modularize tool-call rendering and styles

packages/ui/src/components/tool-call/renderers/bash.tsx

@@ -0,0 +1,38 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+
+export const bashRenderer: ToolRenderer = {
+  tools: ["bash"],
+  getAction: () => "Writing command...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const name = getToolName("bash")
+    if (typeof input.description === "string" && input.description.length > 0) {
+      return `${name} ${input.description}`
+    }
+    return name
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { input, metadata } = readToolStatePayload(state)
+    const command = typeof input.command === "string" && input.command.length > 0 ? `$ ${input.command}` : ""
+    const outputResult = formatUnknown(
+      isToolStateCompleted(state)
+        ? state.output
+        : (isToolStateRunning(state) || isToolStateError(state)) && metadata.output
+          ? metadata.output
+          : undefined,
+    )
+    const parts = [command, outputResult?.text].filter(Boolean)
+    if (parts.length === 0) return null
+
+    const content = ensureMarkdownContent(parts.join("\n"), "bash", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/default.tsx

@@ -0,0 +1,25 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+
+export const defaultRenderer: ToolRenderer = {
+  tools: ["*"],
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { metadata, input } = readToolStatePayload(state)
+    const primaryOutput = isToolStateCompleted(state)
+      ? state.output
+      : (isToolStateRunning(state) || isToolStateError(state)) && metadata.output
+        ? metadata.output
+        : metadata.diff ?? metadata.preview ?? input.content
+
+    const result = formatUnknown(primaryOutput)
+    if (!result) return null
+
+    const content = ensureMarkdownContent(result.text, result.language, true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/edit.tsx

@@ -0,0 +1,32 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+
+export const editRenderer: ToolRenderer = {
+  tools: ["edit"],
+  getAction: () => "Preparing edit...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("edit")
+    return `${getToolName("edit")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, toolName, renderDiff, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const diffPayload = extractDiffPayload(toolName(), state)
+    if (diffPayload) {
+      return renderDiff(diffPayload)
+    }
+
+    const { metadata } = readToolStatePayload(state)
+    const diffText = typeof metadata.diff === "string" ? metadata.diff : null
+    const fallback = isToolStateCompleted(state) && typeof state.output === "string" ? state.output : null
+    const content = ensureMarkdownContent(diffText || fallback, "diff", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/index.ts

@@ -0,0 +1,36 @@
+import type { ToolRenderer } from "../types"
+import { bashRenderer } from "./bash"
+import { defaultRenderer } from "./default"
+import { editRenderer } from "./edit"
+import { patchRenderer } from "./patch"
+import { readRenderer } from "./read"
+import { taskRenderer } from "./task"
+import { todoRenderer } from "./todo"
+import { webfetchRenderer } from "./webfetch"
+import { writeRenderer } from "./write"
+import { invalidRenderer } from "./invalid"
+
+const TOOL_RENDERERS: ToolRenderer[] = [
+  bashRenderer,
+  readRenderer,
+  writeRenderer,
+  editRenderer,
+  patchRenderer,
+  webfetchRenderer,
+  todoRenderer,
+  taskRenderer,
+  invalidRenderer,
+]
+
+const rendererMap = TOOL_RENDERERS.reduce<Record<string, ToolRenderer>>((acc, renderer) => {
+  renderer.tools.forEach((tool) => {
+    acc[tool] = renderer
+  })
+  return acc
+}, {})
+
+export function resolveToolRenderer(toolName: string): ToolRenderer {
+  return rendererMap[toolName] ?? defaultRenderer
+}
+
+export { defaultRenderer }

packages/ui/src/components/tool-call/renderers/invalid.tsx

@@ -0,0 +1,19 @@
+import type { ToolRenderer } from "../types"
+import { defaultRenderer } from "./default"
+import { getToolName, readToolStatePayload } from "../utils"
+
+export const invalidRenderer: ToolRenderer = {
+  tools: ["invalid"],
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return getToolName("invalid")
+    const { input } = readToolStatePayload(state)
+    if (typeof input.tool === "string") {
+      return getToolName(input.tool)
+    }
+    return getToolName("invalid")
+  },
+  renderBody(context) {
+    return defaultRenderer.renderBody(context)
+  },
+}

packages/ui/src/components/tool-call/renderers/patch.tsx

@@ -0,0 +1,32 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+
+export const patchRenderer: ToolRenderer = {
+  tools: ["patch"],
+  getAction: () => "Preparing patch...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("patch")
+    return `${getToolName("patch")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, toolName, renderDiff, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const diffPayload = extractDiffPayload(toolName(), state)
+    if (diffPayload) {
+      return renderDiff(diffPayload)
+    }
+
+    const { metadata } = readToolStatePayload(state)
+    const diffText = typeof metadata.diff === "string" ? metadata.diff : null
+    const fallback = isToolStateCompleted(state) && typeof state.output === "string" ? state.output : null
+    const content = ensureMarkdownContent(diffText || fallback, "diff", true)
+    if (!content) return null
+
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/read.tsx

@@ -0,0 +1,25 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+
+export const readRenderer: ToolRenderer = {
+  tools: ["read"],
+  getAction: () => "Reading file...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("read")
+    return `${getToolName("read")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+    const { metadata, input } = readToolStatePayload(state)
+    const preview = typeof metadata.preview === "string" ? metadata.preview : null
+    const language = inferLanguageFromPath(typeof input.filePath === "string" ? input.filePath : undefined)
+    const content = ensureMarkdownContent(preview, language, true)
+    if (!content) return null
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/task.tsx

@@ -0,0 +1,103 @@
+import { For } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolRenderer } from "../types"
+import { getRelativePath, getToolIcon, getToolName, readToolStatePayload } from "../utils"
+
+interface TaskSummaryItem {
+  id: string
+  tool: string
+  input: Record<string, any>
+}
+
+const taskSummaryCache = new Map<string, { signature: string; items: TaskSummaryItem[] }>()
+
+function normalizeTaskSummary(state?: ToolState, toolCallId?: string): TaskSummaryItem[] {
+  if (!state) return []
+  const { metadata } = readToolStatePayload(state)
+  const rawSummary = Array.isArray((metadata as any).summary) ? ((metadata as any).summary as any[]) : []
+  if (rawSummary.length === 0) {
+    if (toolCallId) taskSummaryCache.delete(toolCallId)
+    return []
+  }
+
+  const signature = JSON.stringify(rawSummary)
+  if (toolCallId) {
+    const cached = taskSummaryCache.get(toolCallId)
+    if (cached && cached.signature === signature) {
+      return cached.items
+    }
+  }
+
+  const normalized: TaskSummaryItem[] = rawSummary.map((entry, index) => {
+    const tool = typeof entry?.tool === "string" ? (entry.tool as string) : "unknown"
+    const input = typeof (entry as any)?.state?.input === "object" && entry.state?.input ? entry.state.input : {}
+    const id = typeof entry?.id === "string" && entry.id.length > 0 ? entry.id : `${tool}-${index}`
+    return { id, tool, input }
+  })
+
+  if (toolCallId) {
+    taskSummaryCache.set(toolCallId, { signature, items: normalized })
+  }
+
+  return normalized
+}
+
+function describeTaskItem(item: TaskSummaryItem): string {
+  const input = item.input || {}
+  switch (item.tool) {
+    case "bash":
+      return typeof input.description === "string" ? input.description : input.command || "bash"
+    case "edit":
+    case "read":
+    case "write":
+      return `${item.tool} ${getRelativePath(typeof input.filePath === "string" ? input.filePath : "")}`.trim()
+    default:
+      return item.tool
+  }
+}
+
+export const taskRenderer: ToolRenderer = {
+  tools: ["task"],
+  getAction: () => "Delegating...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const description = input.description
+    const subagent = input.subagent_type
+    const base = getToolName("task")
+    if (description && subagent) {
+      return `${base}[${subagent}] ${description}`
+    }
+    if (description) {
+      return `${base} ${description}`
+    }
+    return base
+  },
+  renderBody({ toolState, toolCall }) {
+    const state = toolState()
+    if (!state) return null
+
+    const items = normalizeTaskSummary(state, toolCall().id || "__unknown__")
+    if (items.length === 0) return null
+
+    return (
+      <div class="message-text tool-call-markdown tool-call-task-container">
+        <div class="tool-call-task-summary">
+          <For each={items}>
+            {(item) => {
+              const icon = getToolIcon(item.tool)
+              const description = describeTaskItem(item)
+              return (
+                <div class="tool-call-task-item" data-task-id={item.id}>
+                  <span class="tool-call-task-icon">{icon}</span>
+                  <span class="tool-call-task-text">{description}</span>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </div>
+    )
+  },
+}

packages/ui/src/components/tool-call/renderers/todo.tsx

@@ -0,0 +1,121 @@
+import { For } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolRenderer } from "../types"
+import { readToolStatePayload } from "../utils"
+
+export type TodoViewStatus = "pending" | "in_progress" | "completed" | "cancelled"
+
+interface TodoViewItem {
+  id: string
+  content: string
+  status: TodoViewStatus
+}
+
+function normalizeTodoStatus(rawStatus: unknown): TodoViewStatus {
+  if (rawStatus === "completed" || rawStatus === "in_progress" || rawStatus === "cancelled") return rawStatus
+  return "pending"
+}
+
+function extractTodosFromState(state?: ToolState): TodoViewItem[] {
+  if (!state) return []
+  const { metadata } = readToolStatePayload(state)
+  const todos = Array.isArray((metadata as any).todos) ? (metadata as any).todos : []
+  const items: TodoViewItem[] = []
+
+  for (let index = 0; index < todos.length; index++) {
+    const todo = todos[index]
+    const content = typeof todo?.content === "string" ? todo.content.trim() : ""
+    if (!content) continue
+    const status = normalizeTodoStatus((todo as any).status)
+    const id = typeof todo?.id === "string" && todo.id.length > 0 ? todo.id : `${index}-${content}`
+    items.push({ id, content, status })
+  }
+
+  return items
+}
+
+function summarizeTodos(todos: TodoViewItem[]) {
+  return todos.reduce(
+    (acc, todo) => {
+      acc.total += 1
+      acc[todo.status] = (acc[todo.status] || 0) + 1
+      return acc
+    },
+    { total: 0, pending: 0, in_progress: 0, completed: 0, cancelled: 0 } as Record<TodoViewStatus | "total", number>,
+  )
+}
+
+function getTodoStatusLabel(status: TodoViewStatus): string {
+  switch (status) {
+    case "completed":
+      return "Completed"
+    case "in_progress":
+      return "In progress"
+    case "cancelled":
+      return "Cancelled"
+    default:
+      return "Pending"
+  }
+}
+
+function getTodoTitle(state?: ToolState): string {
+  if (!state) return "Plan"
+
+  const todos = extractTodosFromState(state)
+  if (state.status !== "completed" || todos.length === 0) return "Plan"
+
+  const counts = summarizeTodos(todos)
+  if (counts.pending === counts.total) return "Creating plan"
+  if (counts.completed === counts.total) return "Completing plan"
+  return "Updating plan"
+}
+
+export const todoRenderer: ToolRenderer = {
+  tools: ["todowrite", "todoread"],
+  getAction: () => "Planning...",
+  getTitle({ toolState }) {
+    return getTodoTitle(toolState())
+  },
+  renderBody({ toolState }) {
+    const state = toolState()
+    if (!state) return null
+
+    const todos = extractTodosFromState(state)
+    const counts = summarizeTodos(todos)
+
+    if (counts.total === 0) {
+      return <div class="tool-call-todo-empty">No plan items yet.</div>
+    }
+
+    return (
+      <div class="tool-call-todo-region">
+        <div class="tool-call-todos" role="list">
+          <For each={todos}>
+            {(todo) => {
+              const label = getTodoStatusLabel(todo.status)
+              return (
+                <div
+                  class="tool-call-todo-item"
+                  classList={{
+                    "tool-call-todo-item-completed": todo.status === "completed",
+                    "tool-call-todo-item-cancelled": todo.status === "cancelled",
+                    "tool-call-todo-item-active": todo.status === "in_progress",
+                  }}
+                  role="listitem"
+                >
+                  <span class="tool-call-todo-checkbox" data-status={todo.status} aria-label={label}></span>
+                  <div class="tool-call-todo-body">
+                    <div class="tool-call-todo-heading">
+                      <span class="tool-call-todo-text">{todo.content}</span>
+                      <span class={`tool-call-todo-status tool-call-todo-status-${todo.status}`}>{label}</span>
+                    </div>
+                  </div>
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </div>
+    )
+  },
+}

packages/ui/src/components/tool-call/renderers/webfetch.tsx

@@ -0,0 +1,33 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, formatUnknown, getToolName, readToolStatePayload } from "../utils"
+
+export const webfetchRenderer: ToolRenderer = {
+  tools: ["webfetch"],
+  getAction: () => "Fetching from the web...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    if (typeof input.url === "string" && input.url.length > 0) {
+      return `${getToolName("webfetch")} ${input.url}`
+    }
+    return getToolName("webfetch")
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+
+    const { metadata } = readToolStatePayload(state)
+    const result = formatUnknown(
+      state.status === "completed"
+        ? state.output
+        : metadata.output,
+    )
+    if (!result) return null
+
+    const content = ensureMarkdownContent(result.text, result.language, true)
+    if (!content) return null
+
+    return renderMarkdown({ content, disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/renderers/write.tsx

@@ -0,0 +1,25 @@
+import type { ToolRenderer } from "../types"
+import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+
+export const writeRenderer: ToolRenderer = {
+  tools: ["write"],
+  getAction: () => "Preparing write...",
+  getTitle({ toolState }) {
+    const state = toolState()
+    if (!state) return undefined
+    const { input } = readToolStatePayload(state)
+    const filePath = typeof input.filePath === "string" ? input.filePath : ""
+    if (!filePath) return getToolName("write")
+    return `${getToolName("write")} ${getRelativePath(filePath)}`
+  },
+  renderBody({ toolState, renderMarkdown }) {
+    const state = toolState()
+    if (!state || state.status === "pending") return null
+    const { metadata, input } = readToolStatePayload(state)
+    const contentValue = typeof input.content === "string" ? input.content : metadata.content
+    const filePath = typeof input.filePath === "string" ? input.filePath : undefined
+    const content = ensureMarkdownContent(contentValue ?? null, inferLanguageFromPath(filePath), true)
+    if (!content) return null
+    return renderMarkdown({ content, size: "large", disableHighlight: state.status === "running" })
+  },
+}

packages/ui/src/components/tool-call/types.ts

@@ -0,0 +1,39 @@
+import type { Accessor, JSXElement } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { ClientPart } from "../../types/message"
+
+export type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+export interface DiffPayload {
+  diffText: string
+  filePath?: string
+}
+
+export interface MarkdownRenderOptions {
+  content: string
+  size?: "default" | "large"
+  disableHighlight?: boolean
+}
+
+export interface DiffRenderOptions {
+  variant?: string
+  disableScrollTracking?: boolean
+  label?: string
+}
+
+export interface ToolRendererContext {
+  toolCall: Accessor<ToolCallPart>
+  toolState: Accessor<ToolState | undefined>
+  toolName: Accessor<string>
+  renderMarkdown(options: MarkdownRenderOptions): JSXElement | null
+  renderDiff(payload: DiffPayload, options?: DiffRenderOptions): JSXElement | null
+}
+
+export interface ToolRenderer {
+  tools: string[]
+  getTitle?(context: ToolRendererContext): string | undefined
+  getAction?(context: ToolRendererContext): string | undefined
+  renderBody(context: ToolRendererContext): JSXElement | null
+}
+
+export type ToolRendererMap = Record<string, ToolRenderer>

packages/ui/src/components/tool-call/utils.ts

@@ -0,0 +1,191 @@
+import { isRenderableDiffText } from "../../lib/diff-utils"
+import { getLanguageFromPath } from "../../lib/markdown"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { DiffPayload } from "./types"
+
+export type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
+export type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
+export type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+
+export const diffCapableTools = new Set(["edit", "patch"])
+
+export function isToolStateRunning(state: ToolState): state is ToolStateRunning {
+  return state.status === "running"
+}
+
+export function isToolStateCompleted(state: ToolState): state is ToolStateCompleted {
+  return state.status === "completed"
+}
+
+export function isToolStateError(state: ToolState): state is ToolStateError {
+  return state.status === "error"
+}
+
+export function getToolIcon(tool: string): string {
+  switch (tool) {
+    case "bash":
+      return "⚡"
+    case "edit":
+      return "✏️"
+    case "read":
+      return "📖"
+    case "write":
+      return "📝"
+    case "glob":
+      return "🔍"
+    case "grep":
+      return "🔎"
+    case "webfetch":
+      return "🌐"
+    case "task":
+      return "🎯"
+    case "todowrite":
+    case "todoread":
+      return "📋"
+    case "list":
+      return "📁"
+    case "patch":
+      return "🔧"
+    default:
+      return "🔧"
+  }
+}
+
+export function getToolName(tool: string): string {
+  switch (tool) {
+    case "bash":
+      return "Shell"
+    case "webfetch":
+      return "Fetch"
+    case "invalid":
+      return "Invalid"
+    case "todowrite":
+    case "todoread":
+      return "Plan"
+    default: {
+      const normalized = tool.replace(/^opencode_/, "")
+      return normalized.charAt(0).toUpperCase() + normalized.slice(1)
+    }
+  }
+}
+
+export function getRelativePath(path: string): string {
+  if (!path) return ""
+  const parts = path.split("/")
+  return parts.slice(-1)[0] || path
+}
+
+export function ensureMarkdownContent(
+  value: string | null,
+  language?: string,
+  forceFence = false,
+): string | null {
+  if (!value) {
+    return null
+  }
+
+  const trimmed = value.replace(/\s+$/, "")
+  if (!trimmed) {
+    return null
+  }
+
+  const startsWithFence = trimmed.trimStart().startsWith("```")
+  if (startsWithFence && !forceFence) {
+    return trimmed
+  }
+
+  const langSuffix = language ? language : ""
+  if (language || forceFence) {
+    return `\u0060\u0060\u0060${langSuffix}\n${trimmed}\n\u0060\u0060\u0060`
+  }
+
+  return trimmed
+}
+
+export function formatUnknown(value: unknown): { text: string; language?: string } | null {
+  if (value === null || value === undefined) {
+    return null
+  }
+
+  if (typeof value === "string") {
+    return { text: value }
+  }
+
+  if (typeof value === "number" || typeof value === "boolean") {
+    return { text: String(value) }
+  }
+
+  if (Array.isArray(value)) {
+    const parts = value
+      .map((item) => {
+        const formatted = formatUnknown(item)
+        return formatted?.text ?? ""
+      })
+      .filter(Boolean)
+
+    if (parts.length === 0) {
+      return null
+    }
+
+    return { text: parts.join("\n") }
+  }
+
+  if (typeof value === "object") {
+    try {
+      return { text: JSON.stringify(value, null, 2), language: "json" }
+    } catch (error) {
+      console.error("Failed to stringify tool call output", error)
+      return { text: String(value) }
+    }
+  }
+
+  return null
+}
+
+export function inferLanguageFromPath(path?: string): string | undefined {
+  return getLanguageFromPath(path || "")
+}
+
+export function extractDiffPayload(toolName: string, state?: ToolState): DiffPayload | null {
+  if (!state) return null
+  if (!diffCapableTools.has(toolName)) return null
+
+  const { metadata, input, output } = readToolStatePayload(state)
+  const candidates = [metadata.diff, output, metadata.output]
+  let diffText: string | null = null
+
+  for (const candidate of candidates) {
+    if (typeof candidate === "string" && isRenderableDiffText(candidate)) {
+      diffText = candidate
+      break
+    }
+  }
+
+  if (!diffText) {
+    return null
+  }
+
+  const filePath =
+    (typeof input.filePath === "string" ? input.filePath : undefined) ||
+    (typeof metadata.filePath === "string" ? metadata.filePath : undefined) ||
+    (typeof input.path === "string" ? input.path : undefined)
+
+  return { diffText, filePath }
+}
+
+export function readToolStatePayload(state?: ToolState): {
+  input: Record<string, any>
+  metadata: Record<string, any>
+  output: unknown
+} {
+  if (!state) {
+    return { input: {}, metadata: {}, output: undefined }
+  }
+
+  const supportsMetadata = isToolStateRunning(state) || isToolStateCompleted(state) || isToolStateError(state)
+  return {
+    input: supportsMetadata ? ((state.input || {}) as Record<string, any>) : {},
+    metadata: supportsMetadata ? ((state.metadata || {}) as Record<string, any>) : {},
+    output: isToolStateCompleted(state) ? state.output : undefined,
+  }
+}