wip: desktop work

bun.lock

@@ -281,10 +281,14 @@
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
         "@pierre/precision-diffs": "catalog:",
+        "@shikijs/transformers": "3.9.2",
         "@solidjs/meta": "catalog:",
         "fuzzysort": "catalog:",
         "luxon": "catalog:",
+        "marked": "16.2.0",
+        "marked-shiki": "1.2.1",
         "remeda": "catalog:",
+        "shiki": "3.9.2",
         "solid-js": "catalog:",
         "solid-list": "catalog:",
         "virtua": "catalog:",

packages/desktop/src/components/code.tsx

@@ -2,7 +2,7 @@ import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "s
 import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
 import { useLocal, type TextSelection } from "@/context/local"
 import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
-import { useShiki } from "@/context/shiki"
+import { useShiki } from "@opencode-ai/ui"
 
 type DefinedSelection = Exclude<TextSelection, undefined>
 

packages/desktop/src/components/markdown.tsx

@@ -1,23 +0,0 @@
-import { useMarked } from "@/context/marked"
-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 (
-    <div
-      class={`min-w-0 max-w-full overflow-auto no-scrollbar text-14-regular text-text-base ${props.class ?? ""}`}
-      innerHTML={html()}
-    />
-  )
-}

packages/desktop/src/components/message.tsx

@@ -1,304 +0,0 @@
-import type { Part, TextPart, ToolPart, Message } from "@opencode-ai/sdk"
-import { createMemo, For, Match, Show, Switch } from "solid-js"
-import { Dynamic } from "solid-js/web"
-import { Markdown } from "./markdown"
-import { Card, Checkbox, Diff, Icon } from "@opencode-ai/ui"
-import { Message as MessageDisplay, registerPartComponent } from "@opencode-ai/ui"
-import { BasicTool, GenericTool, ToolRegistry, DiffChanges } from "@opencode-ai/ui"
-import { getDirectory, getFilename } from "@/utils"
-
-export function Message(props: { message: Message; parts: Part[] }) {
-  return <MessageDisplay message={props.message} parts={props.parts} />
-}
-
-registerPartComponent("text", function TextPartDisplay(props) {
-  const part = props.part as TextPart
-  return (
-    <Show when={part.text.trim()}>
-      <Markdown text={part.text.trim()} class="mt-8" />
-    </Show>
-  )
-})
-
-registerPartComponent("reasoning", function ReasoningPartDisplay(props) {
-  const part = props.part as any
-  return (
-    <Show when={part.text.trim()}>
-      <Markdown text={part.text.trim()} />
-    </Show>
-  )
-})
-
-registerPartComponent("tool", function ToolPartDisplay(props) {
-  const part = props.part as ToolPart
-  const component = createMemo(() => {
-    const render = ToolRegistry.render(part.tool) ?? GenericTool
-    const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {})
-    const input = part.state.status === "completed" ? part.state.input : {}
-
-    return (
-      <Switch>
-        <Match when={part.state.status === "error" && part.state.error}>
-          {(error) => {
-            const cleaned = error().replace("Error: ", "")
-            const [title, ...rest] = cleaned.split(": ")
-            return (
-              <Card variant="error">
-                <div class="flex items-center gap-2">
-                  <Icon name="circle-ban-sign" size="small" class="text-icon-critical-active" />
-                  <Switch>
-                    <Match when={title}>
-                      <div class="flex items-center gap-2">
-                        <div class="text-12-medium text-[var(--ember-light-11)] capitalize">{title}</div>
-                        <span>{rest.join(": ")}</span>
-                      </div>
-                    </Match>
-                    <Match when={true}>{cleaned}</Match>
-                  </Switch>
-                </div>
-              </Card>
-            )
-          }}
-        </Match>
-        <Match when={true}>
-          <Dynamic
-            component={render}
-            input={input}
-            tool={part.tool}
-            metadata={metadata}
-            output={part.state.status === "completed" ? part.state.output : undefined}
-            hideDetails={props.hideDetails}
-          />
-        </Match>
-      </Switch>
-    )
-  })
-
-  return <Show when={component()}>{component()}</Show>
-})
-
-ToolRegistry.register({
-  name: "read",
-  render(props) {
-    return (
-      <BasicTool
-        icon="glasses"
-        trigger={{ title: "Read", subtitle: props.input.filePath ? getFilename(props.input.filePath) : "" }}
-      />
-    )
-  },
-})
-
-ToolRegistry.register({
-  name: "list",
-  render(props) {
-    return (
-      <BasicTool icon="bullet-list" trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}>
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register({
-  name: "glob",
-  render(props) {
-    return (
-      <BasicTool
-        icon="magnifying-glass-menu"
-        trigger={{
-          title: "Glob",
-          subtitle: getDirectory(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({
-  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: "Grep",
-          subtitle: getDirectory(props.input.path || "/"),
-          args,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register({
-  name: "webfetch",
-  render(props) {
-    return (
-      <BasicTool
-        icon="window-cursor"
-        trigger={{
-          title: "Webfetch",
-          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({
-  name: "task",
-  render(props) {
-    return (
-      <BasicTool
-        icon="task"
-        trigger={{
-          title: `${props.input.subagent_type || props.tool} Agent`,
-          titleClass: "capitalize",
-          subtitle: props.input.description,
-        }}
-      >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register({
-  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({
-  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-2">
-              <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">
-              <Show when={props.metadata.filediff}>
-                <DiffChanges diff={props.metadata.filediff} />
-              </Show>
-            </div>
-          </div>
-        }
-      >
-        <Show when={props.metadata.filediff}>
-          <div class="border-t border-border-weaker-base">
-            <Diff
-              before={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.before }}
-              after={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.after }}
-            />
-          </div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})
-
-ToolRegistry.register({
-  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-2">
-              <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>
-    )
-  },
-})
-
-ToolRegistry.register({
-  name: "todowrite",
-  render(props) {
-    return (
-      <BasicTool
-        icon="checklist"
-        trigger={{
-          title: "To-dos",
-          subtitle: `${props.input.todos?.filter((t: any) => t.status === "completed").length}/${props.input.todos?.length}`,
-        }}
-      >
-        <Show when={props.input.todos?.length}>
-          <div class="px-12 pt-2.5 pb-6 flex flex-col gap-2">
-            <For each={props.input.todos}>
-              {(todo: any) => (
-                <Checkbox readOnly checked={todo.status === "completed"}>
-                  <div classList={{ "line-through text-text-weaker": todo.status === "completed" }}>{todo.content}</div>
-                </Checkbox>
-              )}
-            </For>
-          </div>
-        </Show>
-      </BasicTool>
-    )
-  },
-})

packages/desktop/src/context/local.tsx

@@ -480,8 +480,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       const getMessageText = (message: Message | Message[] | undefined): string => {
         if (!message) return ""
         if (Array.isArray(message)) return message.map((m) => getMessageText(m)).join(" ")
-        const fileParts = sync.data.part[message.id]?.filter((p) => p.type === "file")
-
         return sync.data.part[message.id]
           ?.filter((p) => p.type === "text")
           ?.filter((p) => !p.synthetic)

packages/desktop/src/index.tsx

@@ -3,9 +3,7 @@ import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
-import { Fonts } from "@opencode-ai/ui"
+import { Fonts, ShikiProvider, MarkedProvider } from "@opencode-ai/ui"
-import { ShikiProvider } from "./context/shiki"
-import { MarkedProvider } from "./context/marked"
 import { SDKProvider } from "./context/sdk"
 import { SyncProvider } from "./context/sync"
 import { LocalProvider } from "./context/local"

packages/desktop/src/pages/index.tsx

@@ -12,6 +12,7 @@ import {
   Part,
   DiffChanges,
   ProgressCircle,
+  Message,
 } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import FileTree from "@/components/file-tree"
@@ -35,9 +36,8 @@ import type { JSX } from "solid-js"
 import { Code } from "@/components/code"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
-import { Message } from "@/components/message"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
-import { Markdown } from "@/components/markdown"
+import { Markdown } from "@opencode-ai/ui"
 
 export default function Page() {
   const local = useLocal()

packages/ui/package.json

@@ -28,10 +28,14 @@
     "@kobalte/core": "catalog:",
     "@opencode-ai/sdk": "workspace:*",
     "@pierre/precision-diffs": "catalog:",
+    "@shikijs/transformers": "3.9.2",
     "@solidjs/meta": "catalog:",
     "fuzzysort": "catalog:",
     "luxon": "catalog:",
+    "marked": "16.2.0",
+    "marked-shiki": "1.2.1",
     "remeda": "catalog:",
+    "shiki": "3.9.2",
     "solid-js": "catalog:",
     "solid-list": "catalog:",
     "virtua": "catalog:"

packages/ui/src/components/index.ts

@@ -11,11 +11,15 @@ export * from "./icon-button"
 export * from "./input"
 export * from "./fonts"
 export * from "./list"
+export * from "./markdown"
 export * from "./message-part"
 export * from "./progress-circle"
 export * from "./select"
 export * from "./select-dialog"
 export * from "./tabs"
-export * from "./tool-display"
+export * from "./basic-tool"
-export * from "./tool-registry"
 export * from "./tooltip"
+
+export * from "../context/helper"
+export * from "../context/shiki"
+export * from "../context/marked"

packages/ui/src/components/markdown.css

@@ -0,0 +1,24 @@
+[data-component="markdown"] {
+  min-width: 0;
+  max-width: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  color: var(--text-base);
+
+  /* text-14-regular */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 142.857% */
+  letter-spacing: var(--letter-spacing-normal);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* p { */
+  /*   margin-top: 8px; */
+  /*   margin-bottom: 8px; */
+  /* } */
+}

packages/ui/src/components/markdown.tsx

@@ -0,0 +1,36 @@
+import { useMarked } from "../context/marked"
+import { ComponentProps, createResource, splitProps } 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: ComponentProps<"div"> & {
+    text: string
+    class?: string
+    classList?: Record<string, boolean>
+  },
+) {
+  const [local, others] = splitProps(props, ["text", "class", "classList"])
+  const marked = useMarked()
+  const [html] = createResource(
+    () => strip(local.text),
+    async (markdown) => {
+      return marked.parse(markdown)
+    },
+  )
+  return (
+    <div
+      data-component="markdown"
+      classList={{
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+      innerHTML={html()}
+      {...others}
+    />
+  )
+}

packages/ui/src/components/message-part.css

@@ -20,3 +20,110 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+[data-component="text-part"] {
+  [data-component="markdown"] {
+    margin-top: 32px;
+  }
+}
+
+[data-component="tool-error"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  [data-slot="icon"] {
+    color: var(--icon-critical-active);
+  }
+
+  [data-slot="content"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  [data-slot="title"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--ember-light-11);
+    text-transform: capitalize;
+  }
+}
+
+[data-component="tool-output"] {
+  white-space: pre;
+}
+
+[data-component="edit-trigger"],
+[data-component="write-trigger"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  [data-slot="title-area"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  [data-slot="title"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-base);
+    text-transform: capitalize;
+  }
+
+  [data-slot="path"] {
+    display: flex;
+  }
+
+  [data-slot="directory"] {
+    color: var(--text-weak);
+  }
+
+  [data-slot="filename"] {
+    color: var(--text-strong);
+  }
+
+  [data-slot="actions"] {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+[data-component="edit-content"] {
+  border-top: 1px solid var(--border-weaker-base);
+}
+
+[data-component="tool-action"] {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-component="todos"] {
+  padding: 10px 12px 24px 48px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  [data-slot="todo-content"] {
+    &[data-completed="completed"] {
+      text-decoration: line-through;
+      color: var(--text-weaker);
+    }
+  }
+}

packages/ui/src/components/message-part.tsx

@@ -8,6 +8,14 @@ import {
   ToolPart,
   UserMessage,
 } from "@opencode-ai/sdk"
+import { BasicTool } from "./basic-tool"
+import { GenericTool } from "./basic-tool"
+import { Card } from "./card"
+import { Icon } from "./icon"
+import { Checkbox } from "./checkbox"
+import { Diff } from "./diff"
+import { DiffChanges } from "./diff-changes"
+import { Markdown } from "./markdown"
 
 export interface MessageProps {
   message: MessageType
@@ -22,7 +30,20 @@ export interface MessagePartProps {
 
 export type PartComponent = Component<MessagePartProps>
 
-const PART_MAPPING: Record<string, PartComponent | undefined> = {}
+export const PART_MAPPING: Record<string, PartComponent | undefined> = {}
+
+function getFilename(path: string) {
+  if (!path) return ""
+  const trimmed = path.replace(/[\/]+$/, "")
+  const parts = trimmed.split("/")
+  return parts[parts.length - 1] ?? ""
+}
+
+function getDirectory(path: string) {
+  const parts = path.split("/")
+  const dir = parts.slice(0, parts.length - 1).join("/")
+  return dir ? dir + "/" : ""
+}
 
 export function registerPartComponent(type: string, component: PartComponent) {
   PART_MAPPING[type] = component
@@ -81,3 +102,345 @@ export function Part(props: MessagePartProps) {
     </Show>
   )
 }
+
+export interface ToolProps {
+  input: Record<string, any>
+  metadata: Record<string, any>
+  tool: string
+  output?: string
+  hideDetails?: boolean
+}
+
+export type ToolComponent = Component<ToolProps>
+
+const state: Record<
+  string,
+  {
+    name: string
+    render?: ToolComponent
+  }
+> = {}
+
+export function registerTool(input: { name: string; render?: ToolComponent }) {
+  state[input.name] = input
+  return input
+}
+
+export function getTool(name: string) {
+  return state[name]?.render
+}
+
+export const ToolRegistry = {
+  register: registerTool,
+  render: getTool,
+}
+
+PART_MAPPING["tool"] = function ToolPartDisplay(props) {
+  const part = props.part as ToolPart
+  const component = createMemo(() => {
+    const render = ToolRegistry.render(part.tool) ?? GenericTool
+    const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {})
+    const input = part.state.status === "completed" ? part.state.input : {}
+
+    return (
+      <Switch>
+        <Match when={part.state.status === "error" && part.state.error}>
+          {(error) => {
+            const cleaned = error().replace("Error: ", "")
+            const [title, ...rest] = cleaned.split(": ")
+            return (
+              <Card variant="error">
+                <div data-component="tool-error">
+                  <Icon name="circle-ban-sign" size="small" data-slot="icon" />
+                  <Switch>
+                    <Match when={title}>
+                      <div data-slot="content">
+                        <div data-slot="title">{title}</div>
+                        <span>{rest.join(": ")}</span>
+                      </div>
+                    </Match>
+                    <Match when={true}>{cleaned}</Match>
+                  </Switch>
+                </div>
+              </Card>
+            )
+          }}
+        </Match>
+        <Match when={true}>
+          <Dynamic
+            component={render}
+            input={input}
+            tool={part.tool}
+            metadata={metadata}
+            output={part.state.status === "completed" ? part.state.output : undefined}
+            hideDetails={props.hideDetails}
+          />
+        </Match>
+      </Switch>
+    )
+  })
+
+  return <Show when={component()}>{component()}</Show>
+}
+
+PART_MAPPING["text"] = function TextPartDisplay(props) {
+  const part = props.part as TextPart
+  return (
+    <Show when={part.text.trim()}>
+      <div data-component="text-part">
+        <Markdown text={part.text.trim()} />
+      </div>
+    </Show>
+  )
+}
+
+PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) {
+  const part = props.part as any
+  return (
+    <Show when={part.text.trim()}>
+      <div data-component="reasoning-part">
+        <Markdown text={part.text.trim()} />
+      </div>
+    </Show>
+  )
+}
+
+ToolRegistry.register({
+  name: "read",
+  render(props) {
+    return (
+      <BasicTool
+        icon="glasses"
+        trigger={{
+          title: "Read",
+          subtitle: props.input.filePath ? getFilename(props.input.filePath) : "",
+        }}
+      />
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "list",
+  render(props) {
+    return (
+      <BasicTool
+        icon="bullet-list"
+        trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "glob",
+  render(props) {
+    return (
+      <BasicTool
+        icon="magnifying-glass-menu"
+        trigger={{
+          title: "Glob",
+          subtitle: getDirectory(props.input.path || "/"),
+          args: props.input.pattern ? ["pattern=" + props.input.pattern] : [],
+        }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  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: "Grep",
+          subtitle: getDirectory(props.input.path || "/"),
+          args,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "webfetch",
+  render(props) {
+    return (
+      <BasicTool
+        icon="window-cursor"
+        trigger={{
+          title: "Webfetch",
+          subtitle: props.input.url || "",
+          args: props.input.format ? ["format=" + props.input.format] : [],
+          action: (
+            <div data-component="tool-action">
+              <Icon name="square-arrow-top-right" size="small" />
+            </div>
+          ),
+        }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "task",
+  render(props) {
+    return (
+      <BasicTool
+        icon="task"
+        trigger={{
+          title: `${props.input.subagent_type || props.tool} Agent`,
+          titleClass: "capitalize",
+          subtitle: props.input.description,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "bash",
+  render(props) {
+    return (
+      <BasicTool
+        icon="console"
+        trigger={{
+          title: "Shell",
+          subtitle: "Ran " + props.input.command,
+        }}
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "edit",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div data-component="edit-trigger">
+            <div data-slot="title-area">
+              <div data-slot="title">Edit</div>
+              <div data-slot="path">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span data-slot="directory">{getDirectory(props.input.filePath!)}</span>
+                </Show>
+                <span data-slot="filename">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div data-slot="actions">
+              <Show when={props.metadata.filediff}>
+                <DiffChanges diff={props.metadata.filediff} />
+              </Show>
+            </div>
+          </div>
+        }
+      >
+        <Show when={props.metadata.filediff}>
+          <div data-component="edit-content">
+            <Diff
+              before={{
+                name: getFilename(props.metadata.filediff.path),
+                contents: props.metadata.filediff.before,
+              }}
+              after={{
+                name: getFilename(props.metadata.filediff.path),
+                contents: props.metadata.filediff.after,
+              }}
+            />
+          </div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "write",
+  render(props) {
+    return (
+      <BasicTool
+        icon="code-lines"
+        trigger={
+          <div data-component="write-trigger">
+            <div data-slot="title-area">
+              <div data-slot="title">Write</div>
+              <div data-slot="path">
+                <Show when={props.input.filePath?.includes("/")}>
+                  <span data-slot="directory">{getDirectory(props.input.filePath!)}</span>
+                </Show>
+                <span data-slot="filename">{getFilename(props.input.filePath ?? "")}</span>
+              </div>
+            </div>
+            <div data-slot="actions">{/* <DiffChanges diff={diff} /> */}</div>
+          </div>
+        }
+      >
+        <Show when={false && props.output}>
+          <div data-component="tool-output">{props.output}</div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "todowrite",
+  render(props) {
+    return (
+      <BasicTool
+        icon="checklist"
+        trigger={{
+          title: "To-dos",
+          subtitle: `${props.input.todos?.filter((t: any) => t.status === "completed").length}/${props.input.todos?.length}`,
+        }}
+      >
+        <Show when={props.input.todos?.length}>
+          <div data-component="todos">
+            <For each={props.input.todos}>
+              {(todo: any) => (
+                <Checkbox readOnly checked={todo.status === "completed"}>
+                  <div data-slot="todo-content" data-completed={todo.status === "completed"}>
+                    {todo.content}
+                  </div>
+                </Checkbox>
+              )}
+            </For>
+          </div>
+        </Show>
+      </BasicTool>
+    )
+  },
+})

packages/ui/src/components/tool-registry.tsx

@@ -1,33 +0,0 @@
-import { Component } from "solid-js"
-
-export interface ToolProps {
-  input: Record<string, any>
-  metadata: Record<string, any>
-  tool: string
-  output?: string
-  hideDetails?: boolean
-}
-
-export type ToolComponent = Component<ToolProps>
-
-const state: Record<
-  string,
-  {
-    name: string
-    render?: ToolComponent
-  }
-> = {}
-
-export function registerTool(input: { name: string; render?: ToolComponent }) {
-  state[input.name] = input
-  return input
-}
-
-export function getTool(name: string) {
-  return state[name]?.render
-}
-
-export const ToolRegistry = {
-  register: registerTool,
-  render: getTool,
-}

packages/ui/src/context/helper.tsx

@@ -0,0 +1,25 @@
+import { createContext, Show, useContext, type ParentProps } from "solid-js"
+
+export function createSimpleContext<T, Props extends Record<string, any>>(input: {
+  name: string
+  init: ((input: Props) => T) | (() => T)
+}) {
+  const ctx = createContext<T>()
+
+  return {
+    provider: (props: ParentProps<Props>) => {
+      const init = input.init(props)
+      return (
+        // @ts-expect-error
+        <Show when={init.ready === undefined || init.ready === true}>
+          <ctx.Provider value={init}>{props.children}</ctx.Provider>
+        </Show>
+      )
+    },
+    use() {
+      const value = useContext(ctx)
+      if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+      return value
+    },
+  }
+}

packages/ui/src/context/shiki.tsx

@@ -373,7 +373,11 @@ const theme: ThemeInput = {
       },
     },
     {
-      scope: ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
+      scope: [
+        "storage.modifier.import.java",
+        "variable.language.wildcard.java",
+        "storage.modifier.package.java",
+      ],
       settings: {
         foreground: "var(--text-base)",
       },

packages/ui/src/styles/index.css

@@ -6,6 +6,7 @@
 @import "./base.css" layer(base);
 
 @import "../components/accordion.css" layer(components);
+@import "../components/basic-tool.css" layer(components);
 @import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
 @import "../components/checkbox.css" layer(components);
@@ -17,12 +18,12 @@
 @import "../components/icon-button.css" layer(components);
 @import "../components/input.css" layer(components);
 @import "../components/list.css" layer(components);
+@import "../components/markdown.css" layer(components);
 @import "../components/message-part.css" layer(components);
 @import "../components/progress-circle.css" layer(components);
 @import "../components/select.css" layer(components);
 @import "../components/select-dialog.css" layer(components);
 @import "../components/tabs.css" layer(components);
-@import "../components/tool-display.css" layer(components);
 @import "../components/tooltip.css" layer(components);
 
 @import "./utilities.css" layer(utilities);