{
- 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/app/src/components/file-tree.tsx b/packages/app/src/components/file-tree.tsx
deleted file mode 100644
index d31255ced..000000000
--- a/packages/app/src/components/file-tree.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-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/app/src/components/markdown.tsx b/packages/app/src/components/markdown.tsx
deleted file mode 100644
index a60fad149..000000000
--- a/packages/app/src/components/markdown.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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/app/src/components/prompt-form.tsx b/packages/app/src/components/prompt-form.tsx
deleted file mode 100644
index 9d7c45a32..000000000
--- a/packages/app/src/components/prompt-form.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-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/app/src/components/resizeable-pane.tsx b/packages/app/src/components/resizeable-pane.tsx
deleted file mode 100644
index 49ccc4e70..000000000
--- a/packages/app/src/components/resizeable-pane.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-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/app/src/context/event.tsx b/packages/app/src/context/event.tsx
deleted file mode 100644
index a2aa54181..000000000
--- a/packages/app/src/context/event.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
deleted file mode 100644
index 128c6adfd..000000000
--- a/packages/app/src/pages/index.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-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)}
- />
-
-
-
- +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+ +### `npm run build` + +Builds the app for production to the `dist` folder.
+It correctly bundles Solid in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +## Deployment + +You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.) diff --git a/packages/desktop/index.html b/packages/desktop/index.html new file mode 100644 index 000000000..1ee727ff4 --- /dev/null +++ b/packages/desktop/index.html @@ -0,0 +1,24 @@ + + + + + + + + +
{
+ 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)}
+ />
+
+
+
+