{
- 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)}
- />
-
-
-
-