@assistant-ui/mcp-docs-server 0.1.28 → 0.1.30

package/.docs/organized/code-examples/with-opencode.md

@@ -0,0 +1,2392 @@
+# Example: with-opencode
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../packages/ui/src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+:root.dark,
+html.dark,
+body.dark,
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "assistant-ui OpenCode Example",
+  description: "An OpenCode runtime example built with assistant-ui",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark h-full">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} dark h-full overflow-hidden bg-background text-foreground antialiased`}
+      >
+        <TooltipProvider>{children}</TooltipProvider>
+      </body>
+    </html>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
+import {
+  useOpenCodeRuntime,
+  useOpenCodeSession,
+} from "@assistant-ui/react-opencode";
+import { Thread } from "../components/assistant-ui/thread";
+
+export default function Home() {
+  const runtime = useOpenCodeRuntime({
+    baseUrl:
+      process.env.NEXT_PUBLIC_OPENCODE_BASE_URL ?? "http://localhost:4096",
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <SidebarProvider>
+        <div className="flex h-dvh w-full overflow-hidden pr-0.5">
+          <ThreadListSidebar />
+          <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+              <SidebarTrigger />
+              <Separator orientation="vertical" className="mr-2 h-4" />
+              <div className="min-w-0">
+                <div className="font-medium text-sm">OpenCode</div>
+                <SelectedSessionTitle />
+              </div>
+            </header>
+            <div className="min-h-0 flex-1 overflow-hidden">
+              <Thread />
+            </div>
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    </AssistantRuntimeProvider>
+  );
+}
+
+function SelectedSessionTitle() {
+  const session = useOpenCodeSession();
+  const title = session?.title?.trim();
+
+  if (!title) return null;
+
+  return (
+    <div className="truncate text-muted-foreground text-xs leading-tight">
+      {title}
+    </div>
+  );
+}
+
+```
+
+## components.json
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
+  }
+}
+
+```
+
+## components/assistant-ui/thread-list.tsx
+
+```tsx
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  AuiIf,
+  ThreadListItemMorePrimitive,
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+} from "@assistant-ui/react";
+import { MoreHorizontalIcon, PlusIcon, TrashIcon } from "lucide-react";
+import type { FC } from "react";
+
+export const ThreadList: FC = () => {
+  return (
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex min-h-0 flex-1 flex-col gap-1 overflow-hidden">
+      <ThreadListNew />
+      <AuiIf condition={(s) => s.threads.isLoading}>
+        <ThreadListSkeleton />
+      </AuiIf>
+      <AuiIf condition={(s) => !s.threads.isLoading}>
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          <ThreadListPrimitive.Items components={{ ThreadListItem }} />
+        </div>
+      </AuiIf>
+    </ThreadListPrimitive.Root>
+  );
+};
+
+const ThreadListNew: FC = () => {
+  return (
+    <ThreadListPrimitive.New asChild>
+      <Button
+        variant="outline"
+        className="aui-thread-list-new h-9 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-active:bg-muted"
+      >
+        <PlusIcon className="size-4" />
+        New Session
+      </Button>
+    </ThreadListPrimitive.New>
+  );
+};
+
+const ThreadListSkeleton: FC = () => {
+  return (
+    <div className="flex flex-col gap-1">
+      {Array.from({ length: 5 }, (_, i) => (
+        <div
+          key={i}
+          role="status"
+          aria-label="Loading threads"
+          className="aui-thread-list-skeleton-wrapper flex h-9 items-center px-3"
+        >
+          <Skeleton className="aui-thread-list-skeleton h-4 w-full" />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ThreadListItem: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item group flex h-9 items-center gap-2 rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted">
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center truncate px-3 text-start text-sm">
+        <ThreadListItemPrimitive.Title fallback="New Session" />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemMore />
+    </ThreadListItemPrimitive.Root>
+  );
+};
+
+const ThreadListItemMore: FC = () => {
+  return (
+    <ThreadListItemMorePrimitive.Root>
+      <ThreadListItemMorePrimitive.Trigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="aui-thread-list-item-more mr-2 size-7 p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100 group-data-active:opacity-100"
+        >
+          <MoreHorizontalIcon className="size-4" />
+          <span className="sr-only">More options</span>
+        </Button>
+      </ThreadListItemMorePrimitive.Trigger>
+      <ThreadListItemMorePrimitive.Content
+        side="bottom"
+        align="start"
+        className="aui-thread-list-item-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+      >
+        <ThreadListItemPrimitive.Delete asChild>
+          <ThreadListItemMorePrimitive.Item className="aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+            <TrashIcon className="size-4" />
+            Delete
+          </ThreadListItemMorePrimitive.Item>
+        </ThreadListItemPrimitive.Delete>
+      </ThreadListItemMorePrimitive.Content>
+    </ThreadListItemMorePrimitive.Root>
+  );
+};
+
+```
+
+## components/assistant-ui/thread.tsx
+
+```tsx
+import {
+  ComposerAddAttachment,
+  ComposerAttachments,
+  UserMessageAttachments,
+} from "@/components/assistant-ui/attachment";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { Reasoning } from "@/components/assistant-ui/reasoning";
+import {
+  AskQuestionInline,
+  withOpenCodeToolInteractions,
+} from "@/components/tools/opencode-tool-interactions";
+import { ReasoningGroup } from "@/components/tools/reasoning-ghost";
+import { BashTerminal } from "@/components/tools/tool-ui-bash";
+import { ApplyPatchDiff } from "@/components/tools/tool-ui-apply-patch";
+import {
+  EditInline,
+  GlobInline,
+  GrepInline,
+  ReadInline,
+  ToolCallFallback,
+  WebFetchInline,
+  WebSearchInline,
+  WriteInline,
+} from "@/components/tools/tool-ui-inline";
+import { ToolGroup } from "@/components/tools/tool-group";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { OpenCodeDataPart } from "@/components/opencode-data-part";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  ActionBarMorePrimitive,
+  ActionBarPrimitive,
+  AuiIf,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  SuggestionPrimitive,
+  ThreadPrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  DownloadIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  SquareIcon,
+} from "lucide-react";
+import type { FC } from "react";
+
+const ReadTool = withOpenCodeToolInteractions(ReadInline);
+const EditTool = withOpenCodeToolInteractions(EditInline);
+const WriteTool = withOpenCodeToolInteractions(WriteInline);
+const BashTool = withOpenCodeToolInteractions(BashTerminal);
+const GrepTool = withOpenCodeToolInteractions(GrepInline);
+const GlobTool = withOpenCodeToolInteractions(GlobInline);
+const WebSearchTool = withOpenCodeToolInteractions(WebSearchInline);
+const WebFetchTool = withOpenCodeToolInteractions(WebFetchInline);
+const ApplyPatchTool = withOpenCodeToolInteractions(ApplyPatchDiff);
+const AskQuestionTool = withOpenCodeToolInteractions(AskQuestionInline);
+const FallbackTool = withOpenCodeToolInteractions(ToolCallFallback);
+
+export const Thread: FC = () => {
+  return (
+    <ThreadPrimitive.Root
+      className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
+      style={{
+        ["--thread-max-width" as string]: "44rem",
+        ["--composer-radius" as string]: "24px",
+        ["--composer-padding" as string]: "10px",
+      }}
+    >
+      <ThreadPrimitive.Viewport
+        turnAnchor="top"
+        className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4"
+      >
+        <AuiIf condition={(s) => s.thread.isEmpty}>
+          <ThreadWelcome />
+        </AuiIf>
+
+        <ThreadPrimitive.Messages>
+          {() => <ThreadMessage />}
+        </ThreadPrimitive.Messages>
+
+        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-(--composer-radius) bg-background pb-4 md:pb-6">
+          <ThreadScrollToBottom />
+          <Composer />
+        </ThreadPrimitive.ViewportFooter>
+      </ThreadPrimitive.Viewport>
+    </ThreadPrimitive.Root>
+  );
+};
+
+const ThreadMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  const isEditing = useAuiState((s) => s.message.composer.isEditing);
+  if (isEditing) return <EditComposer />;
+  if (role === "user") return <UserMessage />;
+  return <AssistantMessage />;
+};
+
+const ThreadScrollToBottom: FC = () => {
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <TooltipIconButton
+        tooltip="Scroll to bottom"
+        variant="outline"
+        className="aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:border-border dark:bg-background dark:hover:bg-accent"
+      >
+        <ArrowDownIcon />
+      </TooltipIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+};
+
+const ThreadWelcome: FC = () => {
+  return (
+    <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
+      <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
+        <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-4">
+          <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200">
+            Welcome
+          </h1>
+          <p className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200">
+            How can I help you today?
+          </p>
+        </div>
+      </div>
+      <ThreadSuggestions />
+    </div>
+  );
+};
+
+const ThreadSuggestions: FC = () => {
+  return (
+    <div className="aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4">
+      <ThreadPrimitive.Suggestions>
+        {() => <ThreadSuggestionItem />}
+      </ThreadPrimitive.Suggestions>
+    </div>
+  );
+};
+
+const ThreadSuggestionItem: FC = () => {
+  return (
+    <div className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200">
+      <SuggestionPrimitive.Trigger send asChild>
+        <Button
+          variant="ghost"
+          className="aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-3xl border bg-background px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
+        >
+          <SuggestionPrimitive.Title className="aui-thread-welcome-suggestion-text-1 font-medium" />
+          <SuggestionPrimitive.Description className="aui-thread-welcome-suggestion-text-2 text-muted-foreground empty:hidden" />
+        </Button>
+      </SuggestionPrimitive.Trigger>
+    </div>
+  );
+};
+
+const Composer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
+      <ComposerPrimitive.AttachmentDropzone asChild>
+        <div
+          data-slot="composer-shell"
+          className="flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-background p-(--composer-padding) transition-shadow focus-within:border-ring/75 focus-within:ring-2 focus-within:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50"
+        >
+          <ComposerAttachments />
+          <ComposerPrimitive.Input
+            placeholder="Send a message..."
+            className="aui-composer-input max-h-32 min-h-10 w-full resize-none bg-transparent px-1.75 py-1 text-sm outline-none placeholder:text-muted-foreground/80"
+            rows={1}
+            autoFocus
+            aria-label="Message input"
+          />
+          <ComposerAction />
+        </div>
+      </ComposerPrimitive.AttachmentDropzone>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const ComposerAction: FC = () => {
+  return (
+    <div className="aui-composer-action-wrapper relative flex items-center justify-between">
+      <ComposerAddAttachment />
+      <AuiIf condition={(s) => !s.thread.isRunning}>
+        <ComposerPrimitive.Send asChild>
+          <TooltipIconButton
+            tooltip="Send message"
+            side="bottom"
+            type="button"
+            variant="default"
+            size="icon"
+            className="aui-composer-send size-8 rounded-full"
+            aria-label="Send message"
+          >
+            <ArrowUpIcon className="aui-composer-send-icon size-4" />
+          </TooltipIconButton>
+        </ComposerPrimitive.Send>
+      </AuiIf>
+      <AuiIf condition={(s) => s.thread.isRunning}>
+        <ComposerPrimitive.Cancel asChild>
+          <Button
+            type="button"
+            variant="default"
+            size="icon"
+            className="aui-composer-cancel size-8 rounded-full"
+            aria-label="Stop generating"
+          >
+            <SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
+          </Button>
+        </ComposerPrimitive.Cancel>
+      </AuiIf>
+    </div>
+  );
+};
+
+const MessageError: FC = () => {
+  return (
+    <MessagePrimitive.Error>
+      <ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-full border border-destructive bg-destructive/10 px-3 py-2 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
+        <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
+  );
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root
+      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
+      data-role="assistant"
+    >
+      <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+        <MessagePrimitive.Parts
+          components={{
+            Text: MarkdownText,
+            Reasoning,
+            ReasoningGroup,
+            tools: {
+              by_name: {
+                read: ReadTool,
+                edit: EditTool,
+                write: WriteTool,
+                bash: BashTool,
+                grep: GrepTool,
+                glob: GlobTool,
+                webSearch: WebSearchTool,
+                webFetch: WebFetchTool,
+                apply_patch: ApplyPatchTool,
+                ask_question: AskQuestionTool,
+                request_user_input: AskQuestionTool,
+                requestUserInput: AskQuestionTool,
+              },
+              Fallback: FallbackTool,
+            },
+            ToolGroup,
+            data: {
+              by_name: {
+                "opencode-step-start": OpenCodeDataPart,
+                "opencode-step-finish": OpenCodeDataPart,
+                "opencode-patch": OpenCodeDataPart,
+                "opencode-snapshot": OpenCodeDataPart,
+                "opencode-retry": OpenCodeDataPart,
+                "opencode-compaction": OpenCodeDataPart,
+                "opencode-agent": OpenCodeDataPart,
+                "opencode-subtask": OpenCodeDataPart,
+              },
+              Fallback: OpenCodeDataPart,
+            },
+          }}
+        />
+        <MessageError />
+      </div>
+
+      <div className="aui-assistant-message-footer mt-1 ml-2 flex">
+        <BranchPicker />
+        <AssistantActionBar />
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      autohideFloat="single-branch"
+      className="aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
+    >
+      <ActionBarPrimitive.Copy asChild>
+        <TooltipIconButton tooltip="Copy">
+          <AuiIf condition={(s) => s.message.isCopied}>
+            <CheckIcon />
+          </AuiIf>
+          <AuiIf condition={(s) => !s.message.isCopied}>
+            <CopyIcon />
+          </AuiIf>
+        </TooltipIconButton>
+      </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.Reload asChild>
+        <TooltipIconButton tooltip="Refresh">
+          <RefreshCwIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Reload>
+      <ActionBarMorePrimitive.Root>
+        <ActionBarMorePrimitive.Trigger asChild>
+          <TooltipIconButton
+            tooltip="More"
+            className="data-[state=open]:bg-accent"
+          >
+            <MoreHorizontalIcon />
+          </TooltipIconButton>
+        </ActionBarMorePrimitive.Trigger>
+        <ActionBarMorePrimitive.Content
+          side="bottom"
+          align="start"
+          className="aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+        >
+          <ActionBarPrimitive.ExportMarkdown asChild>
+            <ActionBarMorePrimitive.Item className="aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+              <DownloadIcon className="size-4" />
+              Export as Markdown
+            </ActionBarMorePrimitive.Item>
+          </ActionBarPrimitive.ExportMarkdown>
+        </ActionBarMorePrimitive.Content>
+      </ActionBarMorePrimitive.Root>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root
+      className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
+      data-role="user"
+    >
+      <UserMessageAttachments />
+
+      <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
+        <div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+          <MessagePrimitive.Parts />
+        </div>
+        <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
+          <UserActionBar />
+        </div>
+      </div>
+
+      <BranchPicker className="aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
+    </MessagePrimitive.Root>
+  );
+};
+
+const UserActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      className="aui-user-action-bar-root flex flex-col items-end"
+    >
+      <ActionBarPrimitive.Edit asChild>
+        <TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
+          <PencilIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Edit>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const EditComposer: FC = () => {
+  return (
+    <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3">
+      <ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted">
+        <ComposerPrimitive.Input
+          className="aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none"
+          autoFocus
+        />
+        <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost" size="sm">
+              Cancel
+            </Button>
+          </ComposerPrimitive.Cancel>
+          <ComposerPrimitive.Send asChild>
+            <Button size="sm">Update</Button>
+          </ComposerPrimitive.Send>
+        </div>
+      </ComposerPrimitive.Root>
+    </MessagePrimitive.Root>
+  );
+};
+
+const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
+  className,
+  ...rest
+}) => {
+  return (
+    <BranchPickerPrimitive.Root
+      hideWhenSingleBranch
+      className={cn(
+        "aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-muted-foreground text-xs",
+        className,
+      )}
+      {...rest}
+    >
+      <BranchPickerPrimitive.Previous asChild>
+        <TooltipIconButton tooltip="Previous">
+          <ChevronLeftIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Previous>
+      <span className="aui-branch-picker-state font-medium">
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </span>
+      <BranchPickerPrimitive.Next asChild>
+        <TooltipIconButton tooltip="Next">
+          <ChevronRightIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Next>
+    </BranchPickerPrimitive.Root>
+  );
+};
+
+```
+
+## components/opencode-data-part.tsx
+
+```tsx
+"use client";
+
+import { WrenchIcon } from "lucide-react";
+import type { FC } from "react";
+
+type OpenCodeDataPartProps = {
+  name: string;
+  data: unknown;
+};
+
+const getSummary = (name: string, data: unknown) => {
+  if (
+    name === "opencode-unsupported-part" &&
+    typeof data === "object" &&
+    data !== null &&
+    "type" in data &&
+    typeof data.type === "string"
+  ) {
+    return `Unsupported part: ${data.type}`;
+  }
+
+  if (name === "opencode-snapshot") return "Snapshot";
+  if (name === "opencode-retry") return "Retry";
+  if (name === "opencode-compaction") return "Compaction";
+  if (name === "opencode-agent") return "Agent event";
+  if (name === "opencode-subtask") return "Subtask";
+
+  return name.replace(/^opencode-/, "").replace(/-/g, " ");
+};
+
+export const OpenCodeDataPart: FC<OpenCodeDataPartProps> = ({ name, data }) => {
+  const shouldHide =
+    name === "opencode-step-start" ||
+    name === "opencode-step-finish" ||
+    name === "opencode-patch";
+
+  if (shouldHide) {
+    return null;
+  }
+
+  const summary = getSummary(name, data);
+
+  return (
+    <div className="my-3 flex w-min items-center gap-2 text-nowrap rounded-full border bg-muted/30 px-2 py-1 text-muted-foreground text-xs">
+      <WrenchIcon className="size-3" />
+      {summary}
+    </div>
+  );
+};
+
+```
+
+## components/tools/opencode-permission-card.tsx
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import {
+  type OpenCodePermissionRequest,
+  type OpenCodePermissionResponse,
+  useOpenCodeRuntimeExtras,
+} from "@assistant-ui/react-opencode";
+import {
+  CheckCircle2Icon,
+  LoaderIcon,
+  ShieldAlertIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const formatPermissionReply = (reply: OpenCodePermissionResponse) => {
+  switch (reply) {
+    case "always":
+      return "Always allow";
+    case "once":
+      return "Allowed once";
+    case "reject":
+      return "Rejected";
+  }
+};
+
+export const OpenCodePermissionCard = ({
+  request,
+  state,
+  reply,
+}: {
+  request: OpenCodePermissionRequest;
+  state: "pending" | "resolved";
+  reply?: OpenCodePermissionResponse;
+}) => {
+  const { replyToPermission } = useOpenCodeRuntimeExtras();
+  const [submittingReply, setSubmittingReply] =
+    useState<OpenCodePermissionResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const submitReply = async (nextReply: OpenCodePermissionResponse) => {
+    setSubmittingReply(nextReply);
+    setError(null);
+
+    try {
+      await replyToPermission(request.id, nextReply);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to submit reply.");
+      setSubmittingReply(null);
+    }
+  };
+
+  const isPending = state === "pending";
+
+  return (
+    <Card className="gap-4 py-4">
+      <CardHeader className="px-4">
+        <div className="flex items-start gap-3">
+          <div className="rounded-md bg-amber-500/10 p-2 text-amber-700">
+            {isPending ? (
+              <ShieldAlertIcon className="size-4" />
+            ) : reply === "reject" ? (
+              <XCircleIcon className="size-4" />
+            ) : (
+              <CheckCircle2Icon className="size-4" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <CardTitle className="text-sm">
+              {isPending ? "Approval required" : formatPermissionReply(reply!)}
+            </CardTitle>
+            <CardDescription className="mt-1 text-xs">
+              {request.title ??
+                `OpenCode requested approval for ${request.toolName ?? request.permission}.`}
+            </CardDescription>
+          </div>
+          <Badge variant={isPending ? "secondary" : "outline"}>
+            {request.toolName ?? request.permission}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      {(request.patterns.length > 0 || request.toolInput !== undefined) && (
+        <CardContent className="space-y-3 px-4">
+          {request.patterns.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {request.patterns.map((pattern) => (
+                <Badge key={pattern} variant="outline" className="font-mono">
+                  {pattern}
+                </Badge>
+              ))}
+            </div>
+          ) : null}
+          {request.toolInput !== undefined ? (
+            <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs">
+              {JSON.stringify(request.toolInput, null, 2)}
+            </pre>
+          ) : null}
+        </CardContent>
+      )}
+
+      {isPending ? (
+        <CardFooter className="flex flex-wrap gap-2 px-4">
+          <Button
+            size="sm"
+            onClick={() => submitReply("once")}
+            disabled={submittingReply !== null}
+          >
+            {submittingReply === "once" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Allow once
+          </Button>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => submitReply("always")}
+            disabled={submittingReply !== null}
+          >
+            {submittingReply === "always" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Always allow
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => submitReply("reject")}
+            disabled={submittingReply !== null}
+          >
+            {submittingReply === "reject" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Reject
+          </Button>
+          {error ? (
+            <p className="w-full text-destructive text-xs">{error}</p>
+          ) : null}
+        </CardFooter>
+      ) : null}
+    </Card>
+  );
+};
+
+```
+
+## components/tools/opencode-question-card.tsx
+
+```tsx
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+  type OpenCodeQuestionRequest,
+  type QuestionAnswer,
+  useOpenCodeRuntimeExtras,
+} from "@assistant-ui/react-opencode";
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  CircleHelpIcon,
+  LoaderIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+type PendingQuestionState = {
+  selectedLabels: string[];
+  customAnswer: string;
+};
+
+const buildEmptyQuestionState = (
+  request: OpenCodeQuestionRequest,
+): PendingQuestionState[] =>
+  request.questions.map(() => ({
+    selectedLabels: [],
+    customAnswer: "",
+  }));
+
+const encodeQuestionAnswers = (
+  request: OpenCodeQuestionRequest,
+  formState: PendingQuestionState[],
+): QuestionAnswer[] =>
+  request.questions.map((question, index) => {
+    const current = formState[index];
+    if (!current) return [];
+
+    const answers = [...current.selectedLabels];
+    const customValue = current.customAnswer.trim();
+    const customAllowed = question.custom !== false;
+
+    if (customAllowed && customValue) {
+      answers.push(`Other: ${customValue}`);
+    }
+
+    return answers;
+  });
+
+export const getQuestionSummary = (request?: OpenCodeQuestionRequest) => {
+  if (!request || request.questions.length === 0) return "Waiting for input";
+  if (request.questions.length === 1) {
+    return request.questions[0]?.header || "1 question";
+  }
+  return `${request.questions.length} questions`;
+};
+
+export const OpenCodeQuestionCard = ({
+  request,
+  state,
+  answers,
+}: {
+  request: OpenCodeQuestionRequest;
+  state: "pending" | "answered" | "rejected";
+  answers?: readonly QuestionAnswer[];
+}) => {
+  const { replyToQuestion, rejectQuestion } = useOpenCodeRuntimeExtras();
+  const [formState, setFormState] = useState(() =>
+    buildEmptyQuestionState(request),
+  );
+  const [submissionState, setSubmissionState] = useState<
+    "reply" | "reject" | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+  const isPending = state === "pending";
+
+  const encodedAnswers = useMemo(
+    () => encodeQuestionAnswers(request, formState),
+    [formState, request],
+  );
+
+  const canSubmit =
+    isPending && encodedAnswers.every((answer) => answer.length > 0);
+
+  const updateQuestionState = (
+    index: number,
+    updater: (current: PendingQuestionState) => PendingQuestionState,
+  ) => {
+    setFormState((current) =>
+      current.map((item, itemIndex) =>
+        itemIndex === index ? updater(item) : item,
+      ),
+    );
+  };
+
+  const submitAnswers = async () => {
+    if (!canSubmit) return;
+    setSubmissionState("reply");
+    setError(null);
+
+    try {
+      await replyToQuestion(request.id, encodedAnswers);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to submit answers.",
+      );
+      setSubmissionState(null);
+    }
+  };
+
+  const rejectRequest = async () => {
+    setSubmissionState("reject");
+    setError(null);
+
+    try {
+      await rejectQuestion(request.id);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to reject request.",
+      );
+      setSubmissionState(null);
+    }
+  };
+
+  return (
+    <Card className="gap-4 py-4">
+      <CardHeader className="px-4">
+        <div className="flex items-start gap-3">
+          <div
+            className={cn(
+              "rounded-md p-2",
+              isPending
+                ? "bg-sky-500/10 text-sky-700"
+                : state === "rejected"
+                  ? "bg-muted text-muted-foreground"
+                  : "bg-emerald-500/10 text-emerald-700",
+            )}
+          >
+            {isPending ? (
+              <CircleHelpIcon className="size-4" />
+            ) : state === "rejected" ? (
+              <XCircleIcon className="size-4" />
+            ) : (
+              <CheckCircle2Icon className="size-4" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <CardTitle className="text-sm">
+              {isPending
+                ? "Answer required"
+                : state === "rejected"
+                  ? "Question dismissed"
+                  : "Answers submitted"}
+            </CardTitle>
+            <CardDescription className="mt-1 text-xs">
+              {getQuestionSummary(request)}
+            </CardDescription>
+          </div>
+          <Badge variant={isPending ? "secondary" : "outline"}>
+            {request.questions.length === 1
+              ? "1 prompt"
+              : `${request.questions.length} prompts`}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 px-4">
+        {request.questions.map((question, index) => {
+          const current = formState[index] ?? {
+            selectedLabels: [],
+            customAnswer: "",
+          };
+          const answeredValues = answers?.[index] ?? [];
+          const customAllowed = question.custom !== false;
+
+          return (
+            <section key={`${request.id}-${index}`} className="space-y-3">
+              <div className="space-y-1">
+                <p className="font-medium text-sm">{question.header}</p>
+                <p className="text-muted-foreground text-xs">
+                  {question.question}
+                </p>
+              </div>
+
+              {isPending ? (
+                <>
+                  {question.options.length > 0 ? (
+                    question.multiple ? (
+                      <div className="space-y-2">
+                        {question.options.map((option) => {
+                          const checked = current.selectedLabels.includes(
+                            option.label,
+                          );
+                          const optionId = `${request.id}-${index}-${option.label}`;
+
+                          return (
+                            <div
+                              key={option.label}
+                              className="flex items-start gap-3 rounded-lg border p-3 text-sm"
+                            >
+                              <Checkbox
+                                id={optionId}
+                                checked={checked}
+                                onCheckedChange={(nextChecked) => {
+                                  updateQuestionState(index, (item) => ({
+                                    ...item,
+                                    selectedLabels:
+                                      nextChecked === true
+                                        ? [...item.selectedLabels, option.label]
+                                        : item.selectedLabels.filter(
+                                            (label) => label !== option.label,
+                                          ),
+                                  }));
+                                }}
+                              />
+                              <div className="space-y-1">
+                                <Label
+                                  htmlFor={optionId}
+                                  className="font-medium text-sm"
+                                >
+                                  {option.label}
+                                </Label>
+                                <p className="text-muted-foreground text-xs">
+                                  {option.description}
+                                </p>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="flex flex-wrap gap-2">
+                        {question.options.map((option) => {
+                          const selected = current.selectedLabels.includes(
+                            option.label,
+                          );
+
+                          return (
+                            <Button
+                              key={option.label}
+                              type="button"
+                              size="sm"
+                              variant={selected ? "default" : "outline"}
+                              onClick={() => {
+                                updateQuestionState(index, (item) => ({
+                                  ...item,
+                                  selectedLabels: [option.label],
+                                  customAnswer: "",
+                                }));
+                              }}
+                            >
+                              {option.label}
+                            </Button>
+                          );
+                        })}
+                      </div>
+                    )
+                  ) : null}
+
+                  {customAllowed ? (
+                    <div className="space-y-2">
+                      <Label htmlFor={`${request.id}-${index}-custom`}>
+                        Other
+                      </Label>
+                      <Textarea
+                        id={`${request.id}-${index}-custom`}
+                        value={current.customAnswer}
+                        onChange={(event) => {
+                          const nextValue = event.target.value;
+                          updateQuestionState(index, (item) => ({
+                            ...item,
+                            customAnswer: nextValue,
+                            selectedLabels:
+                              question.multiple || nextValue.trim().length === 0
+                                ? item.selectedLabels
+                                : [],
+                          }));
+                        }}
+                        placeholder="Add your answer"
+                        rows={3}
+                      />
+                    </div>
+                  ) : null}
+                </>
+              ) : state === "rejected" ? (
+                <p className="text-muted-foreground text-xs">
+                  No answer was submitted.
+                </p>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {answeredValues.map((answer) => (
+                    <Badge key={answer} variant="outline">
+                      {answer}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+            </section>
+          );
+        })}
+      </CardContent>
+
+      {isPending ? (
+        <CardFooter className="flex flex-wrap gap-2 px-4">
+          <Button
+            size="sm"
+            onClick={submitAnswers}
+            disabled={!canSubmit || submissionState !== null}
+          >
+            {submissionState === "reply" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Submit answers
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={rejectRequest}
+            disabled={submissionState !== null}
+          >
+            {submissionState === "reject" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Dismiss
+          </Button>
+          {error ? (
+            <div className="flex w-full items-center gap-2 text-destructive text-xs">
+              <AlertCircleIcon className="size-3.5" />
+              <span>{error}</span>
+            </div>
+          ) : null}
+        </CardFooter>
+      ) : null}
+    </Card>
+  );
+};
+
+```
+
+## components/tools/opencode-tool-interactions.tsx
+
+```tsx
+"use client";
+
+import { memo, useMemo } from "react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import {
+  type OpenCodePermissionRequest,
+  type OpenCodePermissionResponse,
+  type OpenCodeQuestionRequest,
+  type QuestionAnswer,
+  useOpenCodeThreadState,
+} from "@assistant-ui/react-opencode";
+import {
+  CheckCircle2Icon,
+  CircleHelpIcon,
+  LoaderIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { OpenCodePermissionCard } from "@/components/tools/opencode-permission-card";
+import {
+  OpenCodeQuestionCard,
+  getQuestionSummary,
+} from "@/components/tools/opencode-question-card";
+
+type ToolPermissionInteraction = {
+  request: OpenCodePermissionRequest;
+  state: "pending" | "resolved";
+  reply?: OpenCodePermissionResponse;
+};
+
+type ToolQuestionInteraction = {
+  request: OpenCodeQuestionRequest;
+  state: "pending" | "answered" | "rejected";
+  answers?: readonly QuestionAnswer[];
+};
+
+const ASK_QUESTION_TOOL_NAMES = [
+  "ask_question",
+  "request_user_input",
+  "requestUserInput",
+] as const;
+
+const useOpenCodeToolInteractions = (toolCallId: string) => {
+  const interactions = useOpenCodeThreadState((state) => state.interactions);
+
+  return useMemo(() => {
+    const permissions: ToolPermissionInteraction[] = [];
+    const questions: ToolQuestionInteraction[] = [];
+
+    for (const request of Object.values(interactions.permissions.pending)) {
+      if (request.tool?.callID === toolCallId) {
+        permissions.push({ request, state: "pending" });
+      }
+    }
+
+    for (const resolved of Object.values(interactions.permissions.resolved)) {
+      if (resolved.request.tool?.callID === toolCallId) {
+        permissions.push({
+          request: resolved.request,
+          state: "resolved",
+          reply: resolved.reply,
+        });
+      }
+    }
+
+    for (const request of Object.values(interactions.questions.pending)) {
+      if (request.tool?.callID === toolCallId) {
+        questions.push({ request, state: "pending" });
+      }
+    }
+
+    for (const answered of Object.values(interactions.questions.answered)) {
+      if (answered.request.tool?.callID === toolCallId) {
+        questions.push({
+          request: answered.request,
+          state: "answered",
+          answers: answered.answers,
+        });
+      }
+    }
+
+    for (const rejected of Object.values(interactions.questions.rejected)) {
+      if (rejected.request.tool?.callID === toolCallId) {
+        questions.push({
+          request: rejected.request,
+          state: "rejected",
+        });
+      }
+    }
+
+    return { permissions, questions };
+  }, [interactions, toolCallId]);
+};
+
+const ToolInteractionStack = ({ toolCallId }: { toolCallId: string }) => {
+  const { permissions, questions } = useOpenCodeToolInteractions(toolCallId);
+
+  if (permissions.length === 0 && questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      {permissions.map((permission) => (
+        <OpenCodePermissionCard
+          key={`${permission.request.id}-${permission.state}`}
+          request={permission.request}
+          state={permission.state}
+          {...(permission.reply ? { reply: permission.reply } : {})}
+        />
+      ))}
+      {questions.map((question) => (
+        <OpenCodeQuestionCard
+          key={`${question.request.id}-${question.state}`}
+          request={question.request}
+          state={question.state}
+          {...(question.answers ? { answers: question.answers } : {})}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const withOpenCodeToolInteractions = <TArgs = any, TResult = any>(
+  BaseComponent: ToolCallMessagePartComponent<TArgs, TResult>,
+): ToolCallMessagePartComponent<TArgs, TResult> => {
+  const WrappedComponent: ToolCallMessagePartComponent<TArgs, TResult> = memo(
+    (props) => {
+      return (
+        <div className="space-y-3">
+          <BaseComponent {...props} />
+          <ToolInteractionStack toolCallId={props.toolCallId} />
+        </div>
+      );
+    },
+  );
+
+  WrappedComponent.displayName = `withOpenCodeToolInteractions(${
+    BaseComponent.displayName || BaseComponent.name || "Tool"
+  })`;
+
+  return WrappedComponent;
+};
+
+export const AskQuestionInline: ToolCallMessagePartComponent = memo(
+  ({ toolCallId, toolName, status }) => {
+    const { questions } = useOpenCodeToolInteractions(toolCallId);
+    const primaryQuestion = questions[0]?.request;
+    const label = getQuestionSummary(primaryQuestion);
+    const statusType = status?.type ?? "complete";
+
+    return (
+      <div className="flex items-center gap-2 py-0.5 text-muted-foreground text-sm">
+        {statusType === "requires-action" ? (
+          <CircleHelpIcon className="size-3.5 shrink-0" />
+        ) : statusType === "running" ? (
+          <LoaderIcon className="size-3.5 shrink-0 animate-spin" />
+        ) : statusType === "incomplete" ? (
+          <XCircleIcon className="size-3.5 shrink-0 text-destructive" />
+        ) : (
+          <CheckCircle2Icon className="size-3.5 shrink-0" />
+        )}
+
+        <span className="flex items-center gap-1.5 truncate">
+          <span className="font-medium">
+            {ASK_QUESTION_TOOL_NAMES.includes(
+              toolName as (typeof ASK_QUESTION_TOOL_NAMES)[number],
+            )
+              ? "ask_question"
+              : toolName}
+          </span>
+          <span className="opacity-60">{label}</span>
+        </span>
+      </div>
+    );
+  },
+);
+AskQuestionInline.displayName = "AskQuestionInline";
+
+```
+
+## components/tools/reasoning-ghost.tsx
+
+```tsx
+"use client";
+
+import { memo } from "react";
+import { BrainIcon } from "lucide-react";
+import { useAuiState, type ReasoningGroupComponent } from "@assistant-ui/react";
+import { cn } from "@/lib/utils";
+
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  const isMultiLine = useAuiState((s) => {
+    let totalLength = 0;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const part = s.message.parts[i];
+      if (part?.type === "reasoning") {
+        if (part.text.includes("\n\n")) return true;
+        totalLength += part.text.length;
+      }
+    }
+    return totalLength > 120;
+  });
+
+  const textAfter = useAuiState((s) => {
+    for (let i = endIndex + 1; i < s.message.parts.length; i++) {
+      const type = s.message.parts[i]?.type;
+      if (type === "data") continue;
+      return type === "text";
+    }
+    return false;
+  });
+
+  return (
+    <div
+      data-slot="reasoning-group"
+      className={cn(
+        "mt-4 mb-2 flex items-start gap-2 text-muted-foreground text-sm leading-relaxed first:mt-0",
+        isMultiLine && "mt-6 mb-4",
+        textAfter && "mb-4",
+      )}
+    >
+      <BrainIcon className="mt-[3.25px] size-3.5 shrink-0" />
+      <div className="space-y-4.5">{children}</div>
+    </div>
+  );
+};
+
+export const ReasoningGroup = memo(ReasoningGroupImpl);
+ReasoningGroup.displayName = "ReasoningGroup";
+
+```
+
+## components/tools/tool-group.tsx
+
+```tsx
+import { cn } from "@/lib/utils";
+import { useAuiState } from "@assistant-ui/react";
+import { memo, type FC, type PropsWithChildren } from "react";
+
+// ── ToolGroup — lightweight wrapper for spacing ─────────────────────────
+export const ToolGroupImpl: FC<
+  PropsWithChildren<{ startIndex: number; endIndex: number }>
+> = ({ children, startIndex, endIndex }) => {
+  const textBefore = useAuiState((s) => {
+    for (let i = startIndex - 1; i >= 0; i--) {
+      const type = s.message.parts[i]?.type;
+      if (type === "data") continue;
+      return type === "text";
+    }
+    return false;
+  });
+  const textAfter = useAuiState((s) => {
+    for (let i = endIndex + 1; i < s.message.parts.length; i++) {
+      const type = s.message.parts[i]?.type;
+      if (type === "data") continue;
+      return type === "text";
+    }
+    return false;
+  });
+
+  return (
+    <div
+      data-slot="tool-group"
+      className={cn(textBefore && "mt-4", textAfter && "mb-4")}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const ToolGroup = memo(ToolGroupImpl);
+
+```
+
+## components/tools/tool-ui-apply-patch.tsx
+
+```tsx
+"use client";
+
+import { memo, useMemo, useState } from "react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { PatchDiff } from "@pierre/diffs/react";
+import {
+  ToolStatusIcon,
+  getPatchInfo,
+  isCancelledToolStatus,
+  str,
+} from "@/components/tools/tool-ui-shared";
+
+// ── Patch format conversion ──────────────────────────────────────────────
+// Claude Code's apply_patch uses a custom "v2" format:
+//   *** Begin Patch
+//   *** Update File: path/to/file.ts
+//   @@ context search text @@
+//    context line
+//   -removed
+//   +added
+//   *** End Patch
+//
+// The @@ markers are context-search strings, NOT standard unified diff
+// hunk headers. We convert to proper unified diff for @pierre/diffs.
+
+interface PatchBlock {
+  type: string;
+  path: string;
+  body: string;
+}
+
+function parseClaudePatchBlocks(patchText: string): PatchBlock[] {
+  // Strip wrapper lines
+  const cleaned = patchText
+    .replace(/^\*\*\*\s*Begin Patch\s*$/gm, "")
+    .replace(/^\*\*\*\s*End Patch\s*$/gm, "")
+    .trim();
+
+  const headerRegex = /^\*\*\*\s+(Update|Add|Delete)\s+File:\s+(.+)$/gm;
+  const blocks: PatchBlock[] = [];
+  let lastIndex = 0;
+  for (const match of cleaned.matchAll(headerRegex)) {
+    if (blocks.length > 0) {
+      blocks[blocks.length - 1]!.body = cleaned.slice(lastIndex, match.index);
+    }
+    blocks.push({ type: match[1]!, path: match[2]!.trim(), body: "" });
+    lastIndex = match.index + match[0].length;
+  }
+  if (blocks.length > 0) {
+    blocks[blocks.length - 1]!.body = cleaned.slice(lastIndex);
+  }
+
+  return blocks;
+}
+
+function buildHunkHeader(
+  lines: string[],
+  oldStart: number,
+  newStart: number,
+): { header: string; oldCount: number; newCount: number } {
+  let oldCount = 0;
+  let newCount = 0;
+  for (const line of lines) {
+    if (line.startsWith("+")) newCount++;
+    else if (line.startsWith("-")) oldCount++;
+    else {
+      // context line (space prefix or empty)
+      oldCount++;
+      newCount++;
+    }
+  }
+  return {
+    header: `@@ -${oldStart},${oldCount} +${newStart},${newCount} @@`,
+    oldCount,
+    newCount,
+  };
+}
+
+function claudeBlockToUnifiedDiff(block: PatchBlock): string {
+  const { type, path, body } = block;
+  const bodyLines = body
+    .split("\n")
+    .filter((l) => l.trim() !== "" || l.startsWith(" "));
+
+  // Filter out empty trailing lines but keep intentional blank context lines
+  const diffLines: string[] = [];
+  for (const line of bodyLines) {
+    // Skip Claude's @@ context search @@ markers (e.g. "@@ function foo() { @@")
+    // These are NOT standard unified diff hunk headers (@@ -N,M +N,M @@)
+    if (/^@@.*@@\s*$/.test(line)) continue;
+    // Keep actual diff lines: +, -, or space-prefixed context
+    if (line.startsWith("+") || line.startsWith("-") || line.startsWith(" ")) {
+      diffLines.push(line);
+    }
+  }
+
+  let gitHeader: string;
+  let fileHeader: string;
+  switch (type) {
+    case "Add":
+      gitHeader = `diff --git a/${path} b/${path}\nnew file mode 100644`;
+      fileHeader = `--- /dev/null\n+++ b/${path}`;
+      break;
+    case "Delete":
+      gitHeader = `diff --git a/${path} b/${path}\ndeleted file mode 100644`;
+      fileHeader = `--- a/${path}\n+++ /dev/null`;
+      break;
+    default:
+      gitHeader = `diff --git a/${path} b/${path}`;
+      fileHeader = `--- a/${path}\n+++ b/${path}`;
+  }
+
+  if (diffLines.length === 0) return `${gitHeader}\n${fileHeader}`;
+
+  // For Add files, all lines should be additions
+  if (type === "Add") {
+    const addLines = diffLines.map((l) => (l.startsWith("+") ? l : `+${l}`));
+    const count = addLines.length;
+    return `${gitHeader}\n${fileHeader}\n@@ -0,0 +1,${count} @@\n${addLines.join("\n")}`;
+  }
+
+  // For Delete files, all lines should be deletions
+  if (type === "Delete") {
+    const delLines = diffLines.map((l) => (l.startsWith("-") ? l : `-${l}`));
+    const count = delLines.length;
+    return `${gitHeader}\n${fileHeader}\n@@ -1,${count} +0,0 @@\n${delLines.join("\n")}`;
+  }
+
+  // For Update files, synthesize proper hunk headers
+  const { header: hunkHeader } = buildHunkHeader(diffLines, 1, 1);
+  return `${gitHeader}\n${fileHeader}\n${hunkHeader}\n${diffLines.join("\n")}`;
+}
+
+// ── Component ────────────────────────────────────────────────────────────
+
+export const ApplyPatchDiff: ToolCallMessagePartComponent = memo(
+  ({ toolName, args, status }) => {
+    const [open, setOpen] = useState(false);
+    const patchText = str(args?.patchText);
+
+    const patchInfo = useMemo(() => getPatchInfo(patchText), [patchText]);
+
+    const unifiedPatch = useMemo(() => {
+      if (!patchText) return "";
+      const blocks = parseClaudePatchBlocks(patchText);
+      return blocks.map(claudeBlockToUnifiedDiff).join("\n");
+    }, [patchText]);
+
+    const isRunning = status?.type === "running";
+    const isCancelled = isCancelledToolStatus(status);
+    const hasDiff = unifiedPatch.length > 0 && !isRunning;
+
+    return (
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="group flex w-full items-center gap-2 py-0.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
+          >
+            <ToolStatusIcon
+              status={status}
+              completeIcon={<CheckIcon className="size-3 shrink-0" />}
+            />
+
+            <span
+              className={cn(
+                "flex items-center gap-1.5 truncate",
+                isCancelled && "line-through opacity-50",
+              )}
+            >
+              <span className="font-medium">{toolName}</span>
+              {patchInfo.files.length > 0 && (
+                <span className="opacity-60">
+                  {patchInfo.files.length === 1
+                    ? patchInfo.files[0]
+                    : `${patchInfo.files.length} files`}
+                </span>
+              )}
+              {(patchInfo.added > 0 || patchInfo.removed > 0) && !isRunning && (
+                <span className="ml-0.5 flex items-center gap-1 font-mono text-xs">
+                  {patchInfo.added > 0 && (
+                    <span className="text-green-500">+{patchInfo.added}</span>
+                  )}
+                  {patchInfo.removed > 0 && (
+                    <span className="text-red-500">-{patchInfo.removed}</span>
+                  )}
+                </span>
+              )}
+            </span>
+
+            {hasDiff && (
+              <>
+                <span className="mt-0.5 min-w-4 flex-1 self-center border-muted-foreground/20 border-b-[0.5px] transition-colors group-hover:border-muted-foreground/50" />
+                <ChevronRightIcon
+                  className={cn(
+                    "mt-0.5 size-3.75 shrink-0 stroke-muted-foreground/60 transition-[transform,stroke] group-hover:stroke-foreground/60",
+                    open && "rotate-90",
+                  )}
+                />
+              </>
+            )}
+          </button>
+        </CollapsibleTrigger>
+
+        {hasDiff && (
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down data-[state=closed]:ease-out data-[state=open]:ease-in">
+            <div className="mt-1 ml-5 overflow-hidden rounded-md border">
+              <PatchDiff
+                patch={unifiedPatch}
+                options={{
+                  theme: { dark: "pierre-dark", light: "pierre-light" },
+                  diffStyle: "unified",
+                  overflow: "wrap",
+                }}
+              />
+            </div>
+          </CollapsibleContent>
+        )}
+      </Collapsible>
+    );
+  },
+);
+ApplyPatchDiff.displayName = "ApplyPatchDiff";
+
+```
+
+## components/tools/tool-ui-bash.tsx
+
+```tsx
+"use client";
+
+import { memo, useState } from "react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { ChevronRightIcon, DollarSignIcon, XCircleIcon } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  ToolStatusIcon,
+  isCancelledToolStatus,
+  truncate,
+} from "@/components/tools/tool-ui-shared";
+
+const parseResult = (result: unknown) => {
+  if (!result) return {};
+  if (typeof result === "string") {
+    try {
+      const parsed = JSON.parse(result);
+      if (typeof parsed === "object" && parsed !== null) return parsed;
+    } catch {
+      // plain text output
+    }
+    return { stdout: result };
+  }
+  if (typeof result === "object") return result as Record<string, unknown>;
+  return {};
+};
+
+export const BashTerminal: ToolCallMessagePartComponent = memo(
+  ({ args, result, status }) => {
+    const [open, setOpen] = useState(false);
+
+    const command = typeof args?.command === "string" ? args.command : "";
+    const description =
+      typeof args?.description === "string" ? args.description : "";
+    const isRunning = status?.type === "running";
+    const isCancelled = isCancelledToolStatus(status);
+
+    const parsed = isRunning ? {} : parseResult(result);
+    const stdout =
+      typeof parsed.stdout === "string" ? parsed.stdout : undefined;
+    const stderr =
+      typeof parsed.stderr === "string" ? parsed.stderr : undefined;
+    const exitCode = typeof parsed.exitCode === "number" ? parsed.exitCode : 0;
+    const hasOutput = Boolean(stdout || stderr);
+    const isError = !isRunning && exitCode !== 0;
+
+    const summaryText = description || truncate(command);
+
+    return (
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="group flex w-full items-center gap-2 py-0.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
+          >
+            {isRunning ? (
+              <ToolStatusIcon status={status} />
+            ) : isError ? (
+              <XCircleIcon className="size-3 shrink-0 text-destructive" />
+            ) : (
+              <ToolStatusIcon
+                status={status}
+                completeIcon={<DollarSignIcon className="size-3.5 shrink-0" />}
+              />
+            )}
+
+            <span
+              className={cn(
+                "flex items-center gap-1.5 truncate",
+                isCancelled && "line-through opacity-50",
+              )}
+            >
+              <span className="font-medium">bash</span>
+              {summaryText && <span className="opacity-60">{summaryText}</span>}
+            </span>
+
+            {hasOutput && (
+              <>
+                <span className="mt-0.5 min-w-4 flex-1 self-center border-muted-foreground/20 border-b-[0.5px] transition-colors group-hover:border-muted-foreground/50" />
+                <ChevronRightIcon
+                  className={cn(
+                    "mt-0.5 size-3.75 shrink-0 stroke-muted-foreground/60 transition-[transform,stroke] group-hover:stroke-foreground/60",
+                    open && "rotate-90",
+                  )}
+                />
+              </>
+            )}
+          </button>
+        </CollapsibleTrigger>
+
+        {hasOutput && (
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down data-[state=closed]:ease-out data-[state=open]:ease-in">
+            <div className="mt-1 ml-5 max-h-96 overflow-y-auto rounded-md border bg-muted/50 p-3 font-mono text-xs">
+              {command && (
+                <div className="mb-2 text-muted-foreground">$ {command}</div>
+              )}
+              {stdout && (
+                <pre className="wrap-break-word whitespace-pre-wrap text-foreground">
+                  {stdout}
+                </pre>
+              )}
+              {stderr && (
+                <pre
+                  className={cn(
+                    "wrap-break-word whitespace-pre-wrap text-destructive",
+                    stdout && "mt-2",
+                  )}
+                >
+                  {stderr}
+                </pre>
+              )}
+            </div>
+          </CollapsibleContent>
+        )}
+      </Collapsible>
+    );
+  },
+);
+BashTerminal.displayName = "BashTerminal";
+
+```
+
+## components/tools/tool-ui-inline.tsx
+
+```tsx
+"use client";
+
+import { memo, useMemo } from "react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { cn } from "@/lib/utils";
+import {
+  ToolStatusIcon,
+  basename,
+  getPatchInfo,
+  isCancelledToolStatus,
+  str,
+  truncate,
+  type ToolCallStatusLike,
+} from "@/components/tools/tool-ui-shared";
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
+const shortenPath = (filepath: string, depth = 2): string => {
+  const parts = filepath.split("/").filter(Boolean);
+  if (parts.length <= depth) return filepath;
+  return parts.slice(-depth).join("/");
+};
+
+// ── ToolCallShell ──────────────────────────────────────────────────────
+
+const ToolCallShell = ({
+  toolName,
+  status,
+  children,
+}: {
+  toolName: string;
+  status?: ToolCallStatusLike;
+  children?: React.ReactNode;
+}) => {
+  const isCancelled = isCancelledToolStatus(status);
+
+  return (
+    <div className="flex items-center gap-2 py-0.5 text-muted-foreground text-sm">
+      <ToolStatusIcon status={status} />
+      <span
+        className={cn(
+          "flex items-center gap-1.5 truncate",
+          isCancelled && "line-through opacity-50",
+        )}
+      >
+        <span className="font-medium">{toolName}</span>
+        {children}
+      </span>
+    </div>
+  );
+};
+
+// ── Factory for simple inline tools ────────────────────────────────────
+
+const inlineTool = (
+  argKeys: string | string[],
+  format: (v: string) => string = truncate,
+): ToolCallMessagePartComponent => {
+  const keys = Array.isArray(argKeys) ? argKeys : [argKeys];
+  const Component: ToolCallMessagePartComponent = memo(
+    ({ toolName, args, status }) => {
+      const value = keys.reduce<string>(
+        (acc, key) => acc || str((args as Record<string, unknown>)?.[key]),
+        "",
+      );
+      return (
+        <ToolCallShell toolName={toolName} status={status}>
+          {value && <span className="opacity-60">{format(value)}</span>}
+        </ToolCallShell>
+      );
+    },
+  );
+  return Component;
+};
+
+// ── Per-tool inline components ─────────────────────────────────────────
+
+export const ReadInline = inlineTool(
+  ["file_path", "filePath", "path", "file"],
+  (v) => truncate(shortenPath(v)),
+);
+ReadInline.displayName = "ReadInline";
+
+export const EditInline = inlineTool("file_path", basename);
+EditInline.displayName = "EditInline";
+
+export const WriteInline = inlineTool("file_path", basename);
+WriteInline.displayName = "WriteInline";
+
+export const GrepInline = inlineTool("pattern");
+GrepInline.displayName = "GrepInline";
+
+export const GlobInline = inlineTool("pattern");
+GlobInline.displayName = "GlobInline";
+
+export const WebSearchInline = inlineTool("query");
+WebSearchInline.displayName = "WebSearchInline";
+
+export const WebFetchInline = inlineTool("url");
+WebFetchInline.displayName = "WebFetchInline";
+
+// Kept as a compact reference implementation even though the example
+// currently uses the richer diff viewer from tool-ui-apply-patch.tsx.
+export const ApplyPatchInline: ToolCallMessagePartComponent = memo(
+  ({ toolName, args, status }) => {
+    const patchText = str(args?.patchText);
+    const patchInfo = useMemo(() => getPatchInfo(patchText), [patchText]);
+    const isRunning = status?.type === "running";
+
+    return (
+      <ToolCallShell toolName={toolName} status={status}>
+        {patchInfo.files.length > 0 && (
+          <span className="opacity-60">
+            {patchInfo.files.length === 1
+              ? patchInfo.files[0]
+              : `${patchInfo.files.length} files`}
+          </span>
+        )}
+        {(patchInfo.added > 0 || patchInfo.removed > 0) && !isRunning && (
+          <span className="ml-0.5 flex items-center gap-1 font-mono text-xs">
+            {patchInfo.added > 0 && (
+              <span className="text-green-500">+{patchInfo.added}</span>
+            )}
+            {patchInfo.removed > 0 && (
+              <span className="text-red-500">-{patchInfo.removed}</span>
+            )}
+          </span>
+        )}
+      </ToolCallShell>
+    );
+  },
+);
+ApplyPatchInline.displayName = "ApplyPatchInline";
+
+// ── Fallback — generic, for unknown/MCP tools ─────────────────────────
+
+const SUMMARY_KEYS = [
+  "file_path",
+  "path",
+  "pattern",
+  "command",
+  "query",
+  "glob",
+  "url",
+] as const;
+
+const ToolCallFallbackImpl: ToolCallMessagePartComponent = ({
+  toolName,
+  args,
+  status,
+}) => {
+  const summary = useMemo(() => {
+    if (!args || typeof args !== "object") return "";
+    for (const key of SUMMARY_KEYS) {
+      const v = (args as Record<string, unknown>)[key];
+      if (typeof v === "string" && v) return truncate(v);
+    }
+    return "";
+  }, [args]);
+
+  return (
+    <ToolCallShell toolName={toolName} status={status}>
+      {summary && <span className="opacity-60">{summary}</span>}
+    </ToolCallShell>
+  );
+};
+
+export const ToolCallFallback = memo(ToolCallFallbackImpl);
+ToolCallFallback.displayName = "ToolCallFallback";
+
+```
+
+## components/tools/tool-ui-shared.tsx
+
+```tsx
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  AlertCircleIcon,
+  CheckIcon,
+  LoaderIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ToolCallStatusLike =
+  | {
+      type: string;
+      reason?: string;
+    }
+  | undefined;
+
+export const truncate = (value: string, max = 80): string =>
+  value.length > max ? `${value.slice(0, max - 3)}...` : value;
+
+export const str = (value: unknown): string =>
+  typeof value === "string" ? value : "";
+
+export const basename = (filepath: string): string => {
+  const parts = filepath.split("/").filter(Boolean);
+  return parts[parts.length - 1] ?? filepath;
+};
+
+const unique = <T,>(items: readonly T[]) => [...new Set(items)];
+
+export const getPatchInfo = (patchText: string) => {
+  if (!patchText) return { files: [] as string[], added: 0, removed: 0 };
+
+  const files = unique(
+    [...patchText.matchAll(/^\*\*\*\s+(?:Update|Add|Delete)\s+File:\s+(.+)$/gm)]
+      .map((match) => basename(match[1]!.trim()))
+      .filter(Boolean),
+  );
+
+  let added = 0;
+  let removed = 0;
+  for (const line of patchText.split("\n")) {
+    if (line.startsWith("+")) added += 1;
+    else if (line.startsWith("-")) removed += 1;
+  }
+
+  return { files, added, removed };
+};
+
+export const isCancelledToolStatus = (status?: ToolCallStatusLike) =>
+  status?.type === "incomplete" && status.reason === "cancelled";
+
+export const ToolStatusIcon = ({
+  status,
+  completeIcon,
+}: {
+  status?: ToolCallStatusLike;
+  completeIcon?: ReactNode;
+}) => {
+  const statusType = status?.type ?? "complete";
+  const isCancelled = isCancelledToolStatus(status);
+
+  if (statusType === "running") {
+    return <LoaderIcon className="size-3 shrink-0 animate-spin" />;
+  }
+
+  if (statusType === "requires-action") {
+    return <AlertCircleIcon className="size-3 shrink-0 text-amber-600" />;
+  }
+
+  if (statusType === "incomplete") {
+    return (
+      <XCircleIcon
+        className={cn("size-3 shrink-0", !isCancelled && "text-destructive")}
+      />
+    );
+  }
+
+  return completeIcon ?? <CheckIcon className="size-3 shrink-0" />;
+};
+
+```
+
+## next.config.ts
+
+```typescript
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-opencode",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/react-opencode": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "@pierre/diffs": "^1.1.16",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
+    "next": "^16.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^4.2.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3"
+  }
+}
+
+```
+
+## README.md
+
+```markdown
+# with-opencode
+
+> [!NOTE] This integration/example is experimental, there may be bugs or issues.
+
+Next.js example for the OpenCode runtime adapter built with assistant-ui.
+
+Set `NEXT_PUBLIC_OPENCODE_BASE_URL` if your OpenCode server is not running on
+`http://localhost:4096`.
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"],
+      "@assistant-ui/react-opencode": [
+        "../../packages/react-opencode/src/index.ts"
+      ],
+      "@/components/assistant-ui/*": [
+        "../../packages/ui/src/components/assistant-ui/*"
+      ],
+      "@/components/icons/*": ["../../packages/ui/src/components/icons/*"],
+      "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/hooks/*": ["../../packages/ui/src/hooks/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
+      "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+