wip: desktop work

2 files changed, 382 insertions, 0 deletions

diff --git a/packages/desktop/src/components/assistant-message.tsx b/packages/desktop/src/components/assistant-message.tsx
new file mode 100644
index 000000000..2e3d659aa
--- /dev/null
+++ b/packages/desktop/src/components/assistant-message.tsx
@@ -0,0 +1,362 @@
+import type { Part, AssistantMessage, ReasoningPart, TextPart, ToolPart } from "@opencode-ai/sdk"
+import type { Tool } from "opencode/tool/tool"
+import type { ReadTool } from "opencode/tool/read"
+import { children, Component, createMemo, For, Match, Show, Switch, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import { Markdown } from "./markdown"
+import { Collapsible, Icon, IconProps } from "@opencode-ai/ui"
+import { getDirectory, getFilename } from "@/utils"
+import { ListTool } from "opencode/tool/ls"
+import { GlobTool } from "opencode/tool/glob"
+import { GrepTool } from "opencode/tool/grep"
+import { WebFetchTool } from "opencode/tool/webfetch"
+import { TaskTool } from "opencode/tool/task"
+import { BashTool } from "opencode/tool/bash"
+import { EditTool } from "opencode/tool/edit"
+import { DiffChanges } from "./diff-changes"
+import { WriteTool } from "opencode/tool/write"
+
+export function AssistantMessage(props: { message: AssistantMessage; parts: Part[] }) {
+  return (
+    <div class="w-full flex flex-col items-start gap-4">
+      <For each={props.parts}>
+        {(part) => {
+          const component = createMemo(() => PART_MAPPING[part.type as keyof typeof PART_MAPPING])
+          return (
+            <Show when={component()}>
+              <Dynamic component={component()} part={part as any} message={props.message} />
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}
+
+const PART_MAPPING = {
+  text: TextPart,
+  tool: ToolPart,
+  reasoning: ReasoningPart,
+}
+
+function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }) {
+  return null
+  // return (
+  //   <Show when={props.part.text.trim()}>
+  //     <div>{props.part.text}</div>
+  //   </Show>
+  // )
+}
+
+function TextPart(props: { part: TextPart; message: AssistantMessage }) {
+  return (
+    <Show when={props.part.text.trim()}>
+      <Markdown text={props.part.text.trim()} />
+    </Show>
+  )
+}
+
+function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
+  // const sync = useSync()
+
+  const component = createMemo(() => {
+    const render = ToolRegistry.render(props.part.tool) ?? GenericTool
+
+    const metadata = props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
+    const input = props.part.state.status === "completed" ? props.part.state.input : {}
+    // const permissions = sync.data.permission[props.message.sessionID] ?? []
+    // const permissionIndex = permissions.findIndex((x) => x.callID === props.part.callID)
+    // const permission = permissions[permissionIndex]
+
+    return (
+      <>
+        <Dynamic
+          component={render}
+          input={input}
+          tool={props.part.tool}
+          metadata={metadata}
+          // permission={permission?.metadata ?? {}}
+          output={props.part.state.status === "completed" ? props.part.state.output : undefined}
+        />
+        {/* <Show when={props.part.state.status === "error"}>{props.part.state.error.replace("Error: ", "")}</Show> */}
+      </>
+    )
+  })
+
+  return <Show when={component()}>{component()}</Show>
+}
+
+type TriggerTitle = {
+  title: string
+  subtitle?: string
+  args?: string[]
+  action?: JSX.Element
+}
+
+const isTriggerTitle = (val: any): val is TriggerTitle => {
+  return typeof val === "object" && val !== null && "title" in val && !(val instanceof Node)
+}
+
+function BasicTool(props: { icon: IconProps["name"]; trigger: TriggerTitle | JSX.Element; children?: JSX.Element }) {
+  const resolved = children(() => props.children)
+
+  return (
+    <Collapsible>
+      <Collapsible.Trigger>
+        <div class="w-full flex items-center self-stretch gap-5 justify-between">
+          <div class="w-full flex items-center self-stretch gap-5">
+            <Icon name={props.icon} size="small" />
+            <Switch>
+              <Match when={isTriggerTitle(props.trigger)}>
+                <div class="w-full flex items-center gap-2 justify-between">
+                  <div class="flex items-center gap-2">
+                    <span class="text-12-medium text-text-base capitalize">
+                      {(props.trigger as TriggerTitle).title}
+                    </span>
+                    <Show when={(props.trigger as TriggerTitle).subtitle}>
+                      <span class="text-12-medium text-text-weak">{(props.trigger as TriggerTitle).subtitle}</span>
+                    </Show>
+                    <Show when={(props.trigger as TriggerTitle).args?.length}>
+                      <For each={(props.trigger as TriggerTitle).args}>
+                        {(arg) => <span class="text-12-regular text-text-weaker">{arg}</span>}
+                      </For>
+                    </Show>
+                  </div>
+                  <Show when={(props.trigger as TriggerTitle).action}>{(props.trigger as TriggerTitle).action}</Show>
+                </div>
+              </Match>
+              <Match when={true}>{props.trigger as JSX.Element}</Match>
+            </Switch>
+          </div>
+          <Show when={resolved()}>
+            <Collapsible.Arrow />
+          </Show>
+        </div>
+      </Collapsible.Trigger>
+      <Show when={props.children}>
+        <Collapsible.Content>{props.children}</Collapsible.Content>
+      </Show>
+    </Collapsible>
+  )
+}
+
+function GenericTool(props: ToolProps<any>) {
+  return <BasicTool icon="mcp" trigger={{ title: props.tool }} />
+}
+
+type ToolProps<T extends Tool.Info> = {
+  input: Partial<Tool.InferParameters<T>>
+  metadata: Partial<Tool.InferMetadata<T>>
+  // permission: Record<string, any>
+  tool: string
+  output?: string
+}
+
+const ToolRegistry = (() => {
+  const state: Record<
+    string,
+    {
+      name: string
+      render?: Component<ToolProps<any>>
+    }
+  > = {}
+  function register<T extends Tool.Info>(input: { name: string; render?: Component<ToolProps<T>> }) {
+    state[input.name] = input
+    return input
+  }
+  return {
+    register,
+    render(name: string) {
+      return state[name]?.render
+    },
+  }
+})()
+
+ToolRegistry.register<typeof ReadTool>({
+  name: "read",
+  render(props) {
+    return (
+      <BasicTool
+        icon="glasses"
+        trigger={{ title: props.tool, subtitle: props.input.filePath ? getFilename(props.input.filePath) : "" }}
+      />
+    )
+  },
+})
+
+ToolRegistry.register<typeof ListTool>({
+  name: "list",
+  render(props) {
+    return (
+      <BasicTool icon="bullet-list" trigger={{ title: props.tool, subtitle: props.input.path || "/" }}>
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof GlobTool>({
+  name: "glob",
+  render(props) {
+    return (
+      <BasicTool
+        icon="magnifying-glass-menu"
+        trigger={{
+          title: props.tool,
+          subtitle: props.input.path || "/",
+          args: props.input.pattern ? ["pattern=" + props.input.pattern] : [],
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof GrepTool>({
+  name: "grep",
+  render(props) {
+    const args = []
+    if (props.input.pattern) args.push("pattern=" + props.input.pattern)
+    if (props.input.include) args.push("include=" + props.input.include)
+    return (
+      <BasicTool
+        icon="magnifying-glass-menu"
+        trigger={{
+          title: props.tool,
+          subtitle: props.input.path || "/",
+          args,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof WebFetchTool>({
+  name: "webfetch",
+  render(props) {
+    return (
+      <BasicTool
+        icon="window-cursor"
+        trigger={{
+          title: props.tool,
+          subtitle: props.input.url || "",
+          args: props.input.format ? ["format=" + props.input.format] : [],
+          action: (
+            <div class="size-6 flex items-center justify-center">
+              <Icon name="square-arrow-top-right" size="small" />
+            </div>
+          ),
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof TaskTool>({
+  name: "task",
+  render(props) {
+    return (
+      <BasicTool
+        icon="task"
+        trigger={{
+          title: `${props.input.subagent_type || props.tool} Agent`,
+          subtitle: props.input.description,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof BashTool>({
+  name: "bash",
+  render(props) {
+    return (
+      <BasicTool
+        icon="console"
+        trigger={{
+          title: "Shell",
+          subtitle: "Ran " + props.input.command,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof EditTool>({
+  name: "edit",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-5">
+              <div class="text-12-medium text-text-base capitalize">Edit</div>
+              <div class="flex">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}/</span>
+                </Show>
+                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
+          </div>
+        }
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register<typeof WriteTool>({
+  name: "write",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-5">
+              <div class="text-12-medium text-text-base capitalize">Write</div>
+              <div class="flex">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span class="text-text-weak">{getDirectory(props.input.filePath!)}/</span>
+                </Show>
+                <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
+          </div>
+        }
+      >
+        <Show when={false && props.output}>
+          <div class="whitespace-pre">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
diff --git a/packages/desktop/src/components/diff-changes.tsx b/packages/desktop/src/components/diff-changes.tsx
new file mode 100644
index 000000000..3b633f70f
--- /dev/null
+++ b/packages/desktop/src/components/diff-changes.tsx
@@ -0,0 +1,20 @@
+import { FileDiff } from "@opencode-ai/sdk"
+import { createMemo, Show } from "solid-js"
+
+export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
+  const additions = createMemo(() =>
+    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0) : props.diff.additions,
+  )
+  const deletions = createMemo(() =>
+    Array.isArray(props.diff) ? props.diff.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0) : props.diff.deletions,
+  )
+  const total = createMemo(() => additions() + deletions())
+  return (
+    <Show when={total() > 0}>
+      <div class="flex gap-2 justify-end items-center">
+        <span class="text-12-mono text-right text-text-diff-add-base">{`+${additions()}`}</span>
+        <span class="text-12-mono text-right text-text-diff-delete-base">{`-${deletions()}`}</span>
+      </div>
+    </Show>
+  )
+}