aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-29 05:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: desktop work

Browse Source
This commit is contained in:
Adam
2025-10-28 12:15:46 -05:00
parent c1278109c9
commit 77ae0b527e
10 changed files with 59 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/desktop/package.json
View File

@@ -26,7 +26,7 @@
"@kobalte/core": "catalog:",
"@opencode-ai/sdk": "workspace:*",
"@opencode-ai/ui": "workspace:*",
"@pierre/precision-diffs": "0.3.5",
"@pierre/precision-diffs": "catalog:",
"@shikijs/transformers": "3.9.2",
"@solid-primitives/active-element": "2.1.3",
"@solid-primitives/event-bus": "1.1.2",

1
packages/desktop/src/components/assistant-message.tsx
View File

@@ -394,7 +394,6 @@ ToolRegistry.register<typeof WriteTool>({
ToolRegistry.register<typeof TodoWriteTool>({
name: "todowrite",
render(props) {
console.log(props.input.todos)
return (
<BasicTool
icon="checklist"

5
packages/desktop/src/pages/index.tsx
View File

@@ -1,4 +1,4 @@
import { Button, List, SelectDialog, Tooltip, IconButton, Tabs, Icon, Accordion } from "@opencode-ai/ui"
import { Button, List, SelectDialog, Tooltip, IconButton, Tabs, Icon, Accordion, Diff } from "@opencode-ai/ui"
import { FileIcon } from "@/ui"
import FileTree from "@/components/file-tree"
import { For, onCleanup, onMount, Show, Match, Switch, createSignal, createEffect, createMemo } from "solid-js"
@@ -21,7 +21,6 @@ import type { JSX } from "solid-js"
import { Code } from "@/components/code"
import { useSync } from "@/context/sync"
import { useSDK } from "@/context/sdk"
import { Diff } from "@/components/diff"
import { ProgressCircle } from "@/components/progress-circle"
import { AssistantMessage } from "@/components/assistant-message"
import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
@@ -655,7 +654,7 @@ export default function Page() {
</ul>
</Show>
<div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
<div class="flex flex-col items-start gap-50 pb-[800px]">
<div class="flex flex-col items-start gap-50 pb-50">
<For each={local.session.userMessages()}>
{(message) => {
const title = createMemo(() => message.summary?.title)

24
packages/ui/src/components/diff.css Normal file
View File

@@ -0,0 +1,24 @@
[data-component="diff"] {
[data-slot="diff-hunk-separator-line-number"] {
position: sticky;
left: 0;
background-color: hsla(209, 96%, 90%, 1);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
[data-slot="diff-hunk-separator-line-number-icon"] {
aspect-ratio: 1;
width: 24px;
height: 24px;
}
}
[data-slot="diff-hunk-separator-content"] {
position: sticky;
background-color: hsla(210, 100%, 96%, 1);
width: var(--pjs-column-content-width);
left: var(--pjs-column-number-width);
padding-left: 8px;
}
}

32
packages/desktop/src/components/diff.tsx → packages/ui/src/components/diff.tsx
View File

@@ -97,24 +97,19 @@ export function Diff<T>(props: DiffProps<T>) {
//
// 'simple':
// Just a subtle bar separator between each hunk
hunkSeparators: "line-info",
// hunkSeparators(hunkData: HunkData) {
// const fragment = document.createDocumentFragment()
// const numCol = document.createElement("div")
// numCol.textContent = `${hunkData.lines}`
// numCol.style.position = "sticky"
// numCol.style.left = "0"
// numCol.style.backgroundColor = "var(--pjs-bg)"
// numCol.style.zIndex = "2"
// fragment.appendChild(numCol)
// const contentCol = document.createElement("div")
// contentCol.textContent = "unmodified lines"
// contentCol.style.position = "sticky"
// contentCol.style.width = "var(--pjs-column-content-width)"
// contentCol.style.left = "var(--pjs-column-number-width)"
// fragment.appendChild(contentCol)
// return fragment
// },
// hunkSeparators: "line-info",
hunkSeparators(hunkData: HunkData) {
const fragment = document.createDocumentFragment()
const numCol = document.createElement("div")
numCol.innerHTML = `<svg data-slot="diff-hunk-separator-line-number-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.97978 14.0204L8.62623 13.6668L9.33334 12.9597L9.68689 13.3133L9.33333 13.6668L8.97978 14.0204ZM12 16.3335L12.3535 16.6871L12 17.0406L11.6464 16.687L12 16.3335ZM14.3131 13.3133L14.6667 12.9597L15.3738 13.6668L15.0202 14.0204L14.6667 13.6668L14.3131 13.3133ZM12.5 16.0002V16.5002H11.5V16.0002H12H12.5ZM9.33333 13.6668L9.68689 13.3133L12.3535 15.9799L12 16.3335L11.6464 16.687L8.97978 14.0204L9.33333 13.6668ZM12 16.3335L11.6464 15.9799L14.3131 13.3133L14.6667 13.6668L15.0202 14.0204L12.3535 16.6871L12 16.3335ZM6.5 8.00016V7.50016H8.5V8.00016V8.50016H6.5V8.00016ZM9.5 8.00016V7.50016H11.5V8.00016V8.50016H9.5V8.00016ZM12.5 8.00016V7.50016H14.5V8.00016V8.50016H12.5V8.00016ZM15.5 8.00016V7.50016H17.5V8.00016V8.50016H15.5V8.00016ZM12 10.5002H12.5V16.0002H12H11.5V10.5002H12Z" fill="currentColor"/></svg> `
numCol.dataset["slot"] = "diff-hunk-separator-line-number"
fragment.appendChild(numCol)
const contentCol = document.createElement("div")
contentCol.textContent = `${hunkData.lines} unmodified lines`
contentCol.dataset["slot"] = "diff-hunk-separator-content"
fragment.appendChild(contentCol)
return fragment
},
// On lines that have both additions and deletions, we can run a
// separate diff check to mark parts of the lines that change.
// 'none':
@@ -162,6 +157,7 @@ export function Diff<T>(props: DiffProps<T>) {
return (
<div
data-component="diff"
style={{
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",

1
packages/ui/src/components/index.ts
View File

@@ -3,6 +3,7 @@ export * from "./button"
export * from "./checkbox"
export * from "./collapsible"
export * from "./dialog"
export * from "./diff"
export * from "./icon"
export * from "./icon-button"
export * from "./input"

76
packages/ui/src/styles/colors.css
View File

@@ -1,41 +1,5 @@
:root {
--grey-dark-1: #ffffff;
--grey-dark-2: #ffffff;
--grey-dark-3: #ffffff;
--grey-dark-4: #ffffff;
--grey-dark-5: #ffffff;
--grey-dark-6: #ffffff;
--grey-dark-7: #ffffff;
--grey-dark-8: #ffffff;
--grey-dark-9: #ffffff;
--grey-dark-10: #ffffff;
--grey-dark-11: #ffffff;
--grey-dark-12: #ffffff;
--grey-light-1: #ffffff;
--grey-dark-alpha-1: #ffffff;
--grey-dark-alpha-2: #ffffff;
--grey-dark-alpha-3: #ffffff;
--grey-dark-alpha-4: #ffffff;
--grey-dark-alpha-5: #ffffff;
--grey-dark-alpha-6: #ffffff;
--grey-dark-alpha-7: #ffffff;
--grey-dark-alpha-8: #ffffff;
--grey-dark-alpha-9: #ffffff;
--grey-dark-alpha-10: #ffffff;
--grey-dark-alpha-11: #ffffff;
--grey-dark-alpha-12: #ffffff;
--smoke-dark-1: #131010;
--grey-light-2: #ffffff;
--grey-light-3: #ffffff;
--grey-light-4: #ffffff;
--grey-light-5: #ffffff;
--grey-light-6: #ffffff;
--grey-light-7: #ffffff;
--grey-light-8: #ffffff;
--grey-light-9: #ffffff;
--grey-light-10: #ffffff;
--grey-light-11: #ffffff;
--grey-light-12: #ffffff;
--smoke-dark-2: #1b1818;
--smoke-dark-3: #252121;
--smoke-dark-4: #2d2828;
@@ -59,19 +23,19 @@
--smoke-light-10: #848181;
--smoke-light-11: #656363;
--smoke-light-12: #211e1e;
--smoke-dark-alpha-1: #bb000003;
--smoke-dark-alpha-2: #f9b4b40b;
--smoke-dark-alpha-3: #f9caca16;
--smoke-dark-alpha-4: #ffd5d51e;
--smoke-dark-alpha-5: #fce2e226;
--smoke-dark-alpha-6: #fce2e231;
--smoke-dark-alpha-7: #fce8e83f;
--smoke-dark-alpha-8: #fff1f159;
--smoke-dark-alpha-9: #fff3f067;
--smoke-dark-alpha-10: #fff2f276;
--smoke-dark-alpha-11: #fff7f7b2;
--smoke-dark-alpha-1: #82383803;
--smoke-dark-alpha-2: #e6c6c60b;
--smoke-dark-alpha-3: #edd5d516;
--smoke-dark-alpha-4: #f2e1e11e;
--smoke-dark-alpha-5: #f5e8e826;
--smoke-dark-alpha-6: #f5e8e831;
--smoke-dark-alpha-7: #f7ecec3f;
--smoke-dark-alpha-8: #faf5f559;
--smoke-dark-alpha-9: #faf5f467;
--smoke-dark-alpha-10: #fbf5f576;
--smoke-dark-alpha-11: #fcf9f9b2;
--smoke-light-alpha-1: #55000003;
--smoke-dark-alpha-12: #fffafaf0;
--smoke-dark-alpha-12: #fdfbfbf0;
--smoke-light-alpha-2: #25000007;
--smoke-light-alpha-3: #1100000f;
--smoke-light-alpha-4: #0c000017;
@@ -149,8 +113,8 @@
--cobalt-light-4: #daeaff;
--cobalt-light-5: #c8e0ff;
--cobalt-light-6: #b4d2ff;
--cobalt-light-7: #98bfff;
--cobalt-dark-alpha-1: #0011f211;
--cobalt-light-7: #98bfff;
--cobalt-dark-alpha-2: #0048fe1c;
--cobalt-dark-alpha-3: #004dff49;
--cobalt-dark-alpha-4: #064dfd6b;
@@ -161,8 +125,8 @@
--cobalt-dark-alpha-9: #034cff;
--cobalt-dark-alpha-10: #003bffed;
--cobalt-dark-alpha-11: #89b5ff;
--cobalt-dark-alpha-12: #cde2ff;
--cobalt-light-8: #73a4ff;
--cobalt-dark-alpha-12: #cde2ff;
--cobalt-light-9: #034cff;
--cobalt-light-10: #0443de;
--cobalt-light-11: #1251ec;
@@ -481,16 +445,4 @@
--mint-light-alpha-10: #0cc7006c;
--mint-light-alpha-11: #016800cf;
--mint-light-alpha-12: #022e00e2;
--grey-light-alpha-1: #ffffff;
--grey-light-alpha-2: #ffffff;
--grey-light-alpha-3: #ffffff;
--grey-light-alpha-4: #ffffff;
--grey-light-alpha-5: #ffffff;
--grey-light-alpha-6: #ffffff;
--grey-light-alpha-7: #ffffff;
--grey-light-alpha-8: #ffffff;
--grey-light-alpha-9: #ffffff;
--grey-light-alpha-10: #ffffff;
--grey-light-alpha-11: #ffffff;
--grey-light-alpha-12: #ffffff;
}

1
packages/ui/src/styles/index.css
View File

@@ -8,6 +8,7 @@
@import "../components/accordion.css" layer(components);
@import "../components/button.css" layer(components);
@import "../components/checkbox.css" layer(components);
@import "../components/diff.css" layer(components);
@import "../components/collapsible.css" layer(components);
@import "../components/dialog.css" layer(components);
@import "../components/icon.css" layer(components);