{
+ container = el
+ }}
+ innerHTML={html()}
+ class="
+ font-mono text-xs tracking-wide overflow-y-auto h-full
+ [&]:[counter-reset:line]
+ [&_pre]:focus-visible:outline-none
+ [&_pre]:overflow-x-auto [&_pre]:no-scrollbar
+ [&_code]:min-w-full [&_code]:inline-block
+ [&_.tab]:relative
+ [&_.tab::before]:content['⇥']
+ [&_.tab::before]:absolute
+ [&_.tab::before]:opacity-0
+ [&_.space]:relative
+ [&_.space::before]:content-['·']
+ [&_.space::before]:absolute
+ [&_.space::before]:opacity-0
+ [&_.line]:inline-block [&_.line]:w-full
+ [&_.line]:hover:bg-background-element
+ [&_.line::before]:sticky [&_.line::before]:left-0
+ [&_.line::before]:w-12 [&_.line::before]:pr-4
+ [&_.line::before]:z-10
+ [&_.line::before]:bg-background-panel
+ [&_.line::before]:text-text-muted/60
+ [&_.line::before]:text-right [&_.line::before]:inline-block
+ [&_.line::before]:select-none
+ [&_.line::before]:[counter-increment:line]
+ [&_.line::before]:content-[counter(line)]
+ [&_.line-number-highlight]:bg-accent/20
+ [&_.line-number-highlight::before]:bg-accent/40!
+ [&_.line-number-highlight::before]:text-background-panel!
+ [&_code.code-diff_.line::before]:content-['']
+ [&_code.code-diff_.line::before]:w-0
+ [&_code.code-diff_.line::before]:pr-0
+ [&_.diff-split_code.code-diff::before]:w-10
+ [&_.diff-split_.diff-newln]:left-0
+ [&_.diff-oldln]:sticky [&_.diff-oldln]:left-0
+ [&_.diff-oldln]:w-10 [&_.diff-oldln]:pr-2
+ [&_.diff-oldln]:z-40
+ [&_.diff-oldln]:text-text-muted/60
+ [&_.diff-oldln]:text-right [&_.diff-oldln]:inline-block
+ [&_.diff-oldln]:select-none
+ [&_.diff-oldln]:bg-background-panel
+ [&_.diff-newln]:sticky [&_.diff-newln]:left-10
+ [&_.diff-newln]:w-10 [&_.diff-newln]:pr-2
+ [&_.diff-newln]:z-40
+ [&_.diff-newln]:text-text-muted/60
+ [&_.diff-newln]:text-right [&_.diff-newln]:inline-block
+ [&_.diff-newln]:select-none
+ [&_.diff-newln]:bg-background-panel
+ [&_.diff-add]:bg-success/20!
+ [&_.diff-add.diff-selected]:bg-success/50!
+ [&_.diff-add_.diff-oldln]:bg-success!
+ [&_.diff-add_.diff-oldln]:text-background-panel!
+ [&_.diff-add_.diff-newln]:bg-success!
+ [&_.diff-add_.diff-newln]:text-background-panel!
+ [&_.diff-remove]:bg-error/20!
+ [&_.diff-remove.diff-selected]:bg-error/50!
+ [&_.diff-remove_.diff-newln]:bg-error!
+ [&_.diff-remove_.diff-newln]:text-background-panel!
+ [&_.diff-remove_.diff-oldln]:bg-error!
+ [&_.diff-remove_.diff-oldln]:text-background-panel!
+ [&_.diff-sign]:inline-block [&_.diff-sign]:px-2 [&_.diff-sign]:select-none
+ [&_.diff-blank]:bg-background-element
+ [&_.diff-blank_.diff-oldln]:bg-background-element
+ [&_.diff-blank_.diff-newln]:bg-background-element
+ [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative
+ [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none
+ [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40!
+ [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info
+ [&_.diff-collapsed]:text-xs
+ [&_.diff-collapsed_.diff-oldln]:bg-info!
+ [&_.diff-collapsed_.diff-newln]:bg-info!
+ "
+ classList={{
+ ...(local.classList || {}),
+ [local.class ?? ""]: !!local.class,
+ }}
+ {...others}
+ >
+ )
+}
+
+function transformerUnifiedDiff(): ShikiTransformer {
+ const kinds = new Map
+
+
+
+ {(file) => (
+
+ {(() => {
+ const view = local.file.view(file.path)
+ const showRaw = view === "raw" || !file.content?.diff
+ const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "")
+ return
+ )}
+
+
+
+ {(() => {
+ const id = activeItem()
+ if (!id) return null
+ const draggedFile = local.file.node(id)
+ if (!draggedFile) return null
+ return (
+
+
+ localProps.onInputRefChange(element ?? null)}
+ />
+
+ )
+}
+
+function TabVisual(props: { file: LocalFile }): JSX.Element {
+ return (
+
+
+ file.path)}>
+
+ {(file) => (
+
+
+
+
+
+
+ {(() => {
+ const activeFile = local.file.active()!
+ const view = local.file.view(activeFile.path)
+ return (
+
+
+ local.layout.toggle(localProps.layoutKey, localProps.timelinePane)}
+ >
+
+
+
+
+
+
+
+ local.file.setView(activeFile.path, "raw")}
+ >
+
+
+
+ local.file.setView(activeFile.path, "diff-unified")}
+ >
+
+
+
+ local.file.setView(activeFile.path, "diff-split")}
+ >
+
+
+
+ )
+ })()}
+
+
+ navigateChange(-1)}>
+
+
+
+ navigateChange(1)}>
+
+
+
+
+
+ )
+ })()}
+
+
+
+ M
+
+
+ A
+
+
+ D
+
+
+
+
+ )
+}
+
+function SortableTab(props: {
+ file: LocalFile
+ onTabClick: (file: LocalFile) => void
+ onTabClose: (file: LocalFile) => void
+}): JSX.Element {
+ const sortable = createSortable(props.file.path)
+
+ return (
+ // @ts-ignore
+
+
+
+
+ )
+}
+
+function ConstrainDragYAxis(): JSX.Element {
+ const context = useDragDropContext()
+ if (!context) return <>
+ const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
+ const transformer: Transformer = {
+ id: "constrain-y-axis",
+ order: 100,
+ callback: (transform) => ({ ...transform, y: 0 }),
+ }
+ onDragStart((event) => {
+ const id = getDraggableId(event)
+ if (!id) return
+ addTransformer("draggables", id, transformer)
+ })
+ onDragEnd((event) => {
+ const id = getDraggableId(event)
+ if (!id) return
+ removeTransformer("draggables", id, transformer.id)
+ })
+ return <>
+}
+
+const getDraggableId = (event: unknown): string | undefined => {
+ if (typeof event !== "object" || event === null) return undefined
+ if (!("draggable" in event)) return undefined
+ const draggable = (event as { draggable?: { id?: unknown } }).draggable
+ if (!draggable) return undefined
+ return typeof draggable.id === "string" ? draggable.id : undefined
+}
diff --git a/packages/desktop/src/components/file-tree.tsx b/packages/desktop/src/components/file-tree.tsx
new file mode 100644
index 000000000..d31255ced
--- /dev/null
+++ b/packages/desktop/src/components/file-tree.tsx
@@ -0,0 +1,110 @@
+import { useLocal } from "@/context"
+import type { LocalFile } from "@/context/local"
+import { Collapsible, FileIcon, Tooltip } from "@/ui"
+import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+export default function FileTree(props: {
+ path: string
+ class?: string
+ nodeClass?: string
+ level?: number
+ onFileClick?: (file: LocalFile) => void
+}) {
+ const local = useLocal()
+ const level = props.level ?? 0
+
+ const Node = (p: ParentProps & ComponentProps<"div"> & { node: LocalFile; as?: "div" | "button" }) => (
+
+ props.onTabClick(props.file)}>
+
+ props.onTabClose(props.file)}
+ >
+
+
+
+
+ {(node) => (
+
+
+
+ (open ? local.file.expand(node.path) : local.file.collapse(node.path))}
+ >
+
+
+
+
+
+
+
+
+
+ props.onFileClick?.(node)}>
+
+
+
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/desktop/src/components/markdown.tsx b/packages/desktop/src/components/markdown.tsx
new file mode 100644
index 000000000..a60fad149
--- /dev/null
+++ b/packages/desktop/src/components/markdown.tsx
@@ -0,0 +1,23 @@
+import { useMarked } from "@/context"
+import { createResource } from "solid-js"
+
+function strip(text: string): string {
+ const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
+ const match = text.match(wrappedRe)
+ return match ? match[2] : text
+}
+export function Markdown(props: { text: string; class?: string }) {
+ const marked = useMarked()
+ const [html] = createResource(
+ () => strip(props.text),
+ async (markdown) => {
+ return marked.parse(markdown)
+ },
+ )
+ return (
+
+ )
+}
diff --git a/packages/desktop/src/components/prompt-form.tsx b/packages/desktop/src/components/prompt-form.tsx
new file mode 100644
index 000000000..9d7c45a32
--- /dev/null
+++ b/packages/desktop/src/components/prompt-form.tsx
@@ -0,0 +1,295 @@
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { Button, FileIcon, Icon, IconButton, Tooltip } from "@/ui"
+import { Select } from "@/components/select"
+import { useLocal } from "@/context"
+import type { FileContext, LocalFile } from "@/context/local"
+import { getFilename } from "@/utils"
+import { createSpeechRecognition } from "@/utils/speech"
+
+interface PromptFormProps {
+ class?: string
+ classList?: Record
+
+
+
+)
+
+const FileTag = (props: { file: FileContext; onClose: () => void }) => (
+
+ {getFilename(props.file.path)}
+
+
+
+
+
+)
diff --git a/packages/desktop/src/components/resizeable-pane.tsx b/packages/desktop/src/components/resizeable-pane.tsx
new file mode 100644
index 000000000..49ccc4e70
--- /dev/null
+++ b/packages/desktop/src/components/resizeable-pane.tsx
@@ -0,0 +1,217 @@
+import { batch, createContext, createMemo, createSignal, onCleanup, Show, useContext } from "solid-js"
+import type { ComponentProps, JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLocal } from "@/context"
+
+type PaneDefault = number | { size: number; visible?: boolean }
+
+type LayoutContextValue = {
+ id: string
+ register: (pane: string, options: { min?: number | string; max?: number | string }) => void
+ size: (pane: string) => number
+ visible: (pane: string) => boolean
+ percent: (pane: string) => number
+ next: (pane: string) => string | undefined
+ startDrag: (left: string, right: string | undefined, event: MouseEvent) => void
+ dragging: () => string | undefined
+}
+
+const LayoutContext = createContext
+ {getFilename(props.file.path)}
+
+
+ ({props.file.selection!.startLine}-{props.file.selection!.endLine})
+
+
+
+ {
+ container = node ?? undefined
+ }}
+ class={props.class ? `relative flex h-full w-full ${props.class}` : "relative flex h-full w-full"}
+ classList={props.classList}
+ >
+ {props.children}
+
+
+ {props.children}
+
+
+
+ context.startDrag(props.id, next(), event)}
+ >
+
+
+
+
+ )
+}
+
+function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps & ComponentProps{local.children}
++ {props.children} +
+
+
+ Read {getFilename(state().input["filePath"] as string)}
+
+
+ )}
+ {sync.sanitize(state().error)}
+ {sync.sanitize(state().error)}
+
+
+ Write {getFilename(state().input["filePath"] as string)}
+
+
+ )}
+ {sync.sanitize(state().error)}
+ {sync.sanitize(state().error)}
+
+
+ {props.part.type}:{props.part.tool}
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default function SessionTimeline(props: { session: string; class?: string }) {
+ const sync = useSync()
+ const [scrollElement, setScrollElement] = createSignal
+
}>
+ -
+
-
+
{part.type}
+
+ + {part().text} +
++ {DateTime.fromMillis(message.time.created).toRelative()} ·{" "} + {sync.data.config.username ?? "user"} +
+
+
+ -
+
-
+
+ ++ ++++ session + + + ++
+ -
+
+ ++ ++++ {message.role === "user" ? "user" : "assistant"} + + + ++
+ -
+
+ ++ ++++ {part.type} + + + ++
+ )}
+
+
+ )
+}
diff --git a/packages/desktop/src/context/event.tsx b/packages/desktop/src/context/event.tsx
new file mode 100644
index 000000000..a2aa54181
--- /dev/null
+++ b/packages/desktop/src/context/event.tsx
@@ -0,0 +1,34 @@
+import { createContext, useContext, type ParentProps } from "solid-js"
+import { createEventBus } from "@solid-primitives/event-bus"
+import type { Event as SDKEvent } from "@opencode-ai/sdk"
+import { useSDK } from "@/context"
+
+export type Event = SDKEvent // can extend with custom events later
+
+function init() {
+ const sdk = useSDK()
+ const bus = createEventBus
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ root!,
+)
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
new file mode 100644
index 000000000..128c6adfd
--- /dev/null
+++ b/packages/desktop/src/pages/index.tsx
@@ -0,0 +1,278 @@
+import { FileIcon, Icon, IconButton, Tooltip } from "@/ui"
+import { Tabs } from "@/ui/tabs"
+import FileTree from "@/components/file-tree"
+import EditorPane from "@/components/editor-pane"
+import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { SelectDialog } from "@/components/select-dialog"
+import { useLocal } from "@/context"
+import { ResizeableLayout, ResizeablePane } from "@/components/resizeable-pane"
+import type { LocalFile } from "@/context/local"
+import SessionList from "@/components/session-list"
+import SessionTimeline from "@/components/session-timeline"
+import { createStore } from "solid-js/store"
+import { getDirectory, getFilename } from "@/utils"
+
+export default function Page() {
+ const local = useLocal()
+ const [store, setStore] = createStore({
+ clickTimer: undefined as number | undefined,
+ modelSelectOpen: false,
+ fileSelectOpen: false,
+ })
+
+ const layoutKey = "workspace"
+ const timelinePane = "timeline"
+
+ let inputRef: HTMLTextAreaElement | undefined = undefined
+
+ const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control"
+
+ onMount(() => {
+ document.addEventListener("keydown", handleKeyDown)
+ })
+
+ onCleanup(() => {
+ document.removeEventListener("keydown", handleKeyDown)
+ })
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.getModifierState(MOD) && event.shiftKey && event.key.toLowerCase() === "p") {
+ event.preventDefault()
+ // TODO: command palette
+ return
+ }
+ if (event.getModifierState(MOD) && event.key.toLowerCase() === "p") {
+ event.preventDefault()
+ setStore("fileSelectOpen", true)
+ return
+ }
+
+ const focused = document.activeElement === inputRef
+ if (focused) {
+ if (event.key === "Escape") {
+ inputRef?.blur()
+ }
+ return
+ }
+
+ if (local.file.active()) {
+ const active = local.file.active()!
+ if (event.key === "Enter" && active.selection) {
+ local.context.add({
+ type: "file",
+ path: active.path,
+ selection: { ...active.selection },
+ })
+ return
+ }
+
+ if (event.getModifierState(MOD)) {
+ if (event.key.toLowerCase() === "a") {
+ return
+ }
+ if (event.key.toLowerCase() === "c") {
+ return
+ }
+ }
+ }
+
+ if (event.key.length === 1 && event.key !== "Unidentified") {
+ inputRef?.focus()
+ }
+ }
+
+ const resetClickTimer = () => {
+ if (!store.clickTimer) return
+ clearTimeout(store.clickTimer)
+ setStore("clickTimer", undefined)
+ }
+
+ const startClickTimer = () => {
+ const newClickTimer = setTimeout(() => {
+ setStore("clickTimer", undefined)
+ }, 300)
+ setStore("clickTimer", newClickTimer as unknown as number)
+ }
+
+ const handleFileClick = async (file: LocalFile) => {
+ if (store.clickTimer) {
+ resetClickTimer()
+ local.file.update(file.path, { ...file, pinned: true })
+ } else {
+ local.file.open(file.path)
+ startClickTimer()
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ No changes
}
+ >
+
+
+
+ Files
+
+
+ Changes
+
+
+
+ -
+
- + + + )} +
+
+
+
+ )}
+
+
+
+
+ local.session.clearActive()}
+ class="text-text-muted hover:text-text"
+ >
+
+
+ + {activeSession().title || "Untitled Session"} +
+
+
+ )}
+ filter={["provider.name", "name", "id"]}
+ groupBy={(x) => x.provider.name}
+ onClose={() => setStore("modelSelectOpen", false)}
+ onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
+ />
+
+ 
+ {i.name}
+
+ {i.id}
+
+
+
+ {i.name}
+
+ {i.id}
+
+
+
+
+
+
+
+
+
+
+
+
+ {new Intl.NumberFormat("en-US", {
+ notation: "compact",
+ compactDisplay: "short",
+ }).format(i.limit.context)}
+
+
+
+ 10}>$$$
+ 1}>$$
+ 0.1}>$
+
+
+
+
+ )}
+ onClose={() => setStore("fileSelectOpen", false)}
+ onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
+ />
+
+
+
+