@springbrand/message-panel 0.1.2 → 0.1.3-alpha.1

package/src/camel/camel-tool-presentation.tsx

@@ -0,0 +1,1270 @@
+import {
+  CheckIcon,
+  CopyIcon,
+} from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { MessageResponse } from "../message";
+import { toolNameOfPart } from "../parts";
+import { cn } from "../internal/cn";
+
+type UnknownRecord = Record<string, unknown>;
+
+export type CamelToolKind =
+  | "read"
+  | "write"
+  | "edit"
+  | "bash"
+  | "glob"
+  | "grep"
+  | "list"
+  | "find"
+  | "web-search"
+  | "web-fetch"
+  | "javascript"
+  | "tasks"
+  | "agent"
+  | "skill"
+  | "skill-resource"
+  | "ask-user"
+  | "suggestions"
+  | "notebook"
+  | "mcp"
+  | "generic";
+
+export interface CamelToolPresentation {
+  kind: CamelToolKind;
+  name: string;
+  summary: string;
+  input: UnknownRecord;
+  output: unknown;
+  outputText: string;
+  errorText: string;
+  running: boolean;
+  failed: boolean;
+  isSubAgent: boolean;
+  hasDetails: boolean;
+}
+
+interface CamelToolDetailsProps {
+  presentation: CamelToolPresentation;
+}
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object" && !Array.isArray(value)
+    ? (value as UnknownRecord)
+    : {};
+}
+
+function safeStringify(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function stringField(record: UnknownRecord, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return "";
+}
+
+function numberField(record: UnknownRecord, ...keys: string[]): number | undefined {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+  }
+  return undefined;
+}
+
+function normalizeOutputText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => {
+        const record = recordOf(item);
+        return typeof record.text === "string"
+          ? record.text
+          : safeStringify(item);
+      })
+      .filter(Boolean)
+      .join("\n\n");
+  }
+  const record = recordOf(value);
+  if (typeof record.text === "string") return record.text;
+  if (typeof record.content === "string") return record.content;
+  if (Array.isArray(record.content)) return normalizeOutputText(record.content);
+  return safeStringify(value);
+}
+
+function stripAnsi(value: string): string {
+  // ANSI CSI and OSC sequences should never affect chat layout.
+  // eslint-disable-next-line no-control-regex
+  return value.replace(/\x1b\[[0-9;]*[a-zA-Z]|\x1b\].*?(?:\x07|\x1b\\)/g, "");
+}
+
+function previewLines(value: string, maxLines: number): string {
+  if (!value) return "";
+  const lines = value.split(/\r?\n/);
+  return lines.length <= maxLines
+    ? value
+    : [...lines.slice(0, maxLines), "..."].join("\n");
+}
+
+function truncate(value: string, maxLength: number): string {
+  return value.length <= maxLength
+    ? value
+    : `${value.slice(0, maxLength)}...`;
+}
+
+function filenameOf(path: string): string {
+  const trimmed = path.trim().replace(/\/+$/, "");
+  return trimmed.split("/").pop() || trimmed;
+}
+
+function hostnameOf(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
+function humanize(name: string): string {
+  const spaced = name
+    .replace(/^mcp__/, "")
+    .replace(/__/g, " ")
+    .replace(/[_-]+/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .trim();
+  return spaced
+    ? spaced.replace(/\b\w/g, (character) => character.toUpperCase())
+    : "Tool";
+}
+
+function canonicalToolKind(name: string): CamelToolKind {
+  const normalized = name.trim().replaceAll("-", "_").toLowerCase();
+  if (normalized.startsWith("mcp__")) return "mcp";
+  if (
+    [
+      "read",
+      "read_file",
+      "read_text_file",
+      "read_document",
+    ].includes(normalized)
+  ) {
+    return "read";
+  }
+  if (
+    [
+      "write",
+      "write_file",
+      "create_file",
+      "save_file",
+    ].includes(normalized)
+  ) {
+    return "write";
+  }
+  if (
+    [
+      "edit",
+      "edit_file",
+      "apply_patch",
+      "patch_file",
+    ].includes(normalized)
+  ) {
+    return "edit";
+  }
+  if (
+    [
+      "bash",
+      "shell",
+      "exec",
+      "exec_command",
+      "run_command",
+      "terminal",
+    ].includes(normalized)
+  ) {
+    return "bash";
+  }
+  if (["glob", "find_files", "list_files_recursive"].includes(normalized)) {
+    return "glob";
+  }
+  if (
+    [
+      "grep",
+      "rg",
+      "search_files",
+      "search_code",
+    ].includes(normalized)
+  ) {
+    return "grep";
+  }
+  if (["ls", "list_directory", "list_files"].includes(normalized)) {
+    return "list";
+  }
+  if (["find", "find_file"].includes(normalized)) return "find";
+  if (
+    [
+      "web_search",
+      "search_web",
+      "search_query",
+    ].includes(normalized)
+  ) {
+    return "web-search";
+  }
+  if (
+    [
+      "web_fetch",
+      "fetch_url",
+      "open_url",
+      "fetch_page",
+    ].includes(normalized)
+  ) {
+    return "web-fetch";
+  }
+  if (
+    [
+      "javascript",
+      "js_exec",
+      "node_repl",
+      "execute_javascript",
+    ].includes(normalized)
+  ) {
+    return "javascript";
+  }
+  if (
+    [
+      "todo_write",
+      "update_todo",
+      "update_plan",
+    ].includes(normalized)
+  ) {
+    return "tasks";
+  }
+  if (
+    [
+      "task",
+      "task_output",
+      "agent",
+      "run_agent",
+      "run_temporary_agent",
+      "subagents",
+      "fanout",
+      "extract",
+      "dispatch_background",
+      "explore",
+      "research",
+      "oracle",
+    ].includes(normalized)
+  ) {
+    return "agent";
+  }
+  if (["skill", "read_skill"].includes(normalized)) return "skill";
+  if (normalized === "read_skill_resource") return "skill-resource";
+  if (
+    [
+      "ask_user",
+      "ask_user_question",
+      "request_user_input",
+    ].includes(normalized)
+  ) {
+    return "ask-user";
+  }
+  if (["suggest_followups", "suggestions"].includes(normalized)) {
+    return "suggestions";
+  }
+  if (["notebook_edit", "edit_notebook"].includes(normalized)) {
+    return "notebook";
+  }
+  return "generic";
+}
+
+function parseMcpName(name: string): { server: string; tool: string } | null {
+  if (!name.startsWith("mcp__")) return null;
+  const [, server = "", ...toolParts] = name.split("__");
+  if (!server || toolParts.length === 0) return null;
+  return {
+    server: humanize(server),
+    tool: humanize(toolParts.join(" ")),
+  };
+}
+
+function toolInput(part: UnknownRecord): UnknownRecord {
+  if (part.input != null) return recordOf(part.input);
+  const data = recordOf(part.data);
+  if (data.input != null) return recordOf(data.input);
+  return part.type === "tool" ? data : {};
+}
+
+function toolOutput(part: UnknownRecord): unknown {
+  const data = recordOf(part.data);
+  return part.output ?? data.output ?? part.result;
+}
+
+function parseCount(outputText: string, key: "files" | "matches"): number | null {
+  const match = outputText.match(
+    new RegExp(`Found\\s+(\\d+)\\s+${key}`, "i"),
+  );
+  return match ? Number.parseInt(match[1] ?? "0", 10) : null;
+}
+
+function fileSummary(
+  input: UnknownRecord,
+  state: { running: boolean; failed: boolean },
+  labels: {
+    running: string;
+    runningGeneric: string;
+    failed: string;
+    complete: string;
+  },
+): string {
+  const path = stringField(input, "file_path", "path", "filename");
+  const filename = path ? filenameOf(path) : "";
+  if (state.running) {
+    return filename
+      ? `${labels.running} ${filename}...`
+      : labels.runningGeneric;
+  }
+  if (state.failed) {
+    return filename ? `${labels.failed} ${filename}` : labels.failed;
+  }
+  return filename ? `${labels.complete} ${filename}` : labels.complete;
+}
+
+function questionsOf(input: UnknownRecord): UnknownRecord[] {
+  if (Array.isArray(input.questions)) return input.questions.map(recordOf);
+  if (typeof input.question === "string") {
+    return [
+      {
+        question: input.question,
+        header: input.header,
+        options: input.options,
+      },
+    ];
+  }
+  return [];
+}
+
+function summaryFor(
+  kind: CamelToolKind,
+  name: string,
+  input: UnknownRecord,
+  outputText: string,
+  running: boolean,
+  failed: boolean,
+): string {
+  const state = { running, failed };
+  switch (kind) {
+    case "read":
+      return fileSummary(input, state, {
+        running: "Reading",
+        runningGeneric: "Reading file...",
+        failed: "Failed to read",
+        complete: "Read",
+      });
+    case "write":
+      return fileSummary(input, state, {
+        running: "Creating",
+        runningGeneric: "Creating file...",
+        failed: "Failed to create",
+        complete: "Created",
+      });
+    case "edit":
+      return fileSummary(input, state, {
+        running: "Editing",
+        runningGeneric: "Editing file...",
+        failed: "Failed to edit",
+        complete: "Edited",
+      });
+    case "bash": {
+      const command = stringField(input, "command", "cmd");
+      const description = stringField(input, "description");
+      const label = description || truncate(command || "command", 30);
+      return running
+        ? command || description
+          ? `Running ${label}...`
+          : "Running command..."
+        : failed
+          ? `Failed to run ${label}`
+          : `Ran ${label}`;
+    }
+    case "glob": {
+      const pattern = stringField(input, "pattern", "glob");
+      if (running) {
+        return pattern
+          ? `Searching for "${truncate(pattern, 20)}"...`
+          : "Searching for files...";
+      }
+      if (failed) return "Failed to search files";
+      const count = parseCount(outputText, "files");
+      if (count != null) return `Found ${count} files`;
+      return /no files found/i.test(outputText)
+        ? "No files found"
+        : "Searched files";
+    }
+    case "grep": {
+      const pattern = stringField(input, "pattern", "query");
+      if (running) {
+        return pattern
+          ? `Searching for "${truncate(pattern, 20)}"...`
+          : "Searching...";
+      }
+      if (failed) return "Failed to search codebase";
+      const count = parseCount(outputText, "matches");
+      if (count != null) return `Found ${count} matches`;
+      return /no matches found/i.test(outputText)
+        ? "No matches found"
+        : "Searched codebase";
+    }
+    case "list": {
+      const path = stringField(input, "path");
+      const filename = path ? filenameOf(path) : "";
+      if (running) return filename ? `Listing ${filename}...` : "Listing files...";
+      if (failed) return filename ? `Failed to list ${filename}` : "Failed to list files";
+      return filename ? `Listed ${filename}` : "Listed files";
+    }
+    case "find": {
+      const pattern = stringField(input, "pattern", "query");
+      if (running) {
+        return pattern
+          ? `Finding "${truncate(pattern, 20)}"...`
+          : "Finding files...";
+      }
+      return failed ? "Failed to find files" : "Found files";
+    }
+    case "web-search":
+      return running
+        ? "Searching web..."
+        : failed
+          ? "Failed to search web"
+          : "Searched web";
+    case "web-fetch": {
+      const url = stringField(input, "url");
+      const host = url ? hostnameOf(url) : "web page";
+      return running
+        ? `Fetching ${host}...`
+        : failed
+          ? `Failed to fetch ${host}`
+          : `Fetched ${host}`;
+    }
+    case "javascript": {
+      const label = stringField(input, "description") || "JavaScript";
+      return running
+        ? `Running ${label}...`
+        : failed
+          ? `${label} failed`
+          : `Ran ${label}`;
+    }
+    case "tasks":
+      return running
+        ? "Updating tasks..."
+        : failed
+          ? "Failed to update tasks"
+          : "Updated tasks";
+    case "agent": {
+      const description =
+        stringField(input, "description", "question", "prompt") || "subtask";
+      return running
+        ? `Working on ${truncate(description, 52)}`
+        : failed
+          ? `Could not finish ${truncate(description, 52)}`
+          : `Finished ${truncate(description, 52)}`;
+    }
+    case "skill": {
+      const skill = stringField(input, "skill", "name");
+      return running
+        ? skill
+          ? `Reading instructions for ${skill}...`
+          : "Reading instructions..."
+        : failed
+          ? skill
+            ? `Could not read instructions for ${skill}`
+            : "Could not read instructions"
+          : `Read instructions for ${skill || "task"}`;
+    }
+    case "skill-resource": {
+      const path = stringField(input, "path");
+      const resource = path ? filenameOf(path) : "resource";
+      return running
+        ? `Reading ${resource}...`
+        : failed
+          ? `Could not read ${resource}`
+          : `Read ${resource}`;
+    }
+    case "ask-user": {
+      const questions = questionsOf(input);
+      if (running) return "Waiting for your input";
+      if (questions.length === 1) {
+        const header = stringField(questions[0] ?? {}, "header");
+        return header || "Asked a question";
+      }
+      return questions.length > 1
+        ? `Asked ${questions.length} questions`
+        : "Asked a question";
+    }
+    case "suggestions":
+      return running ? "Preparing follow-ups..." : "Suggested follow-ups";
+    case "notebook":
+      return running
+        ? "Editing notebook cell..."
+        : failed
+          ? "Failed to edit notebook cell"
+          : "Edited notebook cell";
+    case "mcp": {
+      const parts = parseMcpName(name);
+      if (!parts) break;
+      return running
+        ? `Calling ${parts.tool} on ${parts.server}...`
+        : failed
+          ? `Failed to call ${parts.tool} on ${parts.server}`
+          : `Called ${parts.tool} on ${parts.server}`;
+    }
+    case "generic":
+      break;
+  }
+  if (name === "create_agent") {
+    const agent = stringField(input, "name") || "agent";
+    return running
+      ? `Creating ${agent}...`
+      : failed
+        ? `Could not create ${agent}`
+        : `Created ${agent}`;
+  }
+  if (name === "publish_extension") {
+    const extension = humanize(stringField(input, "name") || "extension");
+    return running
+      ? `Publishing ${extension}...`
+      : failed
+        ? `Could not publish ${extension}`
+        : `Published ${extension}`;
+  }
+  if (name === "cancel_schedule") {
+    return running
+      ? "Cancelling schedule..."
+      : failed
+        ? "Schedule cancellation was denied"
+        : "Cancelled schedule";
+  }
+  const displayName = humanize(name);
+  return running
+    ? `Using ${displayName}...`
+    : failed
+      ? `Could not use ${displayName}`
+      : `Used ${displayName}`;
+}
+
+export function getCamelToolPresentation(
+  part: unknown,
+  isActive = false,
+): CamelToolPresentation {
+  const record = recordOf(part);
+  const name =
+    toolNameOfPart(part) ?? (stringField(record, "name") || "tool");
+  const input = toolInput(record);
+  const output = toolOutput(record);
+  const outputText = normalizeOutputText(output);
+  const errorText = stringField(record, "errorText", "error");
+  const state = stringField(record, "state", "status");
+  const failed =
+    state === "output-error" ||
+    state === "output-denied" ||
+    state === "failed" ||
+    Boolean(errorText);
+  const running =
+    isActive &&
+    [
+      "input-streaming",
+      "input-available",
+      "approval-responded",
+      "approval-requested",
+      "running",
+      "",
+    ].includes(state);
+  const kind = canonicalToolKind(name);
+  const hasDetails =
+    Object.keys(input).length > 0 ||
+    output != null ||
+    Boolean(errorText);
+  return {
+    kind,
+    name,
+    summary: summaryFor(
+      kind,
+      name,
+      input,
+      errorText || outputText,
+      running,
+      failed,
+    ),
+    input,
+    output,
+    outputText,
+    errorText,
+    running,
+    failed,
+    isSubAgent: kind === "agent",
+    hasDetails,
+  };
+}
+
+function ToolCopyButton({ value, label }: { value: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current != null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  if (!value) return null;
+  return (
+    <button
+      type="button"
+      className="inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/60 opacity-0 transition-opacity hover:bg-muted group-hover/details:opacity-100 group-focus-within/details:opacity-100"
+      onClick={() => {
+        void navigator.clipboard.writeText(value).then(() => {
+          setCopied(true);
+          if (timerRef.current != null) window.clearTimeout(timerRef.current);
+          timerRef.current = window.setTimeout(() => setCopied(false), 1500);
+        });
+      }}
+      aria-label={copied ? "Copied" : label}
+    >
+      {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
+    </button>
+  );
+}
+
+function DetailRow({
+  label,
+  value,
+  copyValue,
+  mono = false,
+}: {
+  label: string;
+  value?: ReactNode;
+  copyValue?: string;
+  mono?: boolean;
+}) {
+  if (value == null || value === "") return null;
+  return (
+    <div className="flex items-start gap-2 py-0.5">
+      <span className="shrink-0 text-muted-foreground/60">{label}</span>
+      <div className={cn("min-w-0 flex-1 break-words", mono && "font-mono")}>
+        {value}
+      </div>
+      {copyValue ? <ToolCopyButton value={copyValue} label={`Copy ${label}`} /> : null}
+    </div>
+  );
+}
+
+function OutputBlock({
+  label,
+  value,
+  className,
+}: {
+  label: string;
+  value?: string;
+  className?: string;
+}) {
+  if (!value) return null;
+  const displayValue = stripAnsi(value);
+  return (
+    <div className={cn("mt-2", className)}>
+      <div className="mb-1 flex items-center justify-between text-[0.7rem] text-muted-foreground/60">
+        <span>{label}</span>
+        <ToolCopyButton value={displayValue} label={`Copy ${label}`} />
+      </div>
+      <div className="max-h-32 overflow-auto rounded bg-muted/30 p-2 font-mono text-xs">
+        <pre className="whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground/80">
+          {displayValue}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+function ProjectRow({ input }: { input: UnknownRecord }) {
+  const project = stringField(input, "project");
+  return project ? (
+    <DetailRow label="Project:" value={project} copyValue={project} mono />
+  ) : null;
+}
+
+function ReadDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, outputText } = presentation;
+  const path = stringField(input, "file_path", "path", "filename");
+  const lines = outputText ? outputText.split(/\r?\n/).length : 0;
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Path:" value={path} copyValue={path} mono />
+      <ProjectRow input={input} />
+      <DetailRow label="Lines:" value={String(lines)} />
+      <OutputBlock label="Preview" value={previewLines(outputText, 10)} />
+    </div>
+  );
+}
+
+function WriteDetails({ presentation }: CamelToolDetailsProps) {
+  const { input } = presentation;
+  const path = stringField(input, "file_path", "path", "filename");
+  const content = normalizeOutputText(input.content);
+  const bytes = new TextEncoder().encode(content).byteLength;
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Path:" value={path} copyValue={path} mono />
+      <ProjectRow input={input} />
+      {content ? <DetailRow label="Size:" value={formatBytes(bytes)} /> : null}
+      <OutputBlock label="Preview" value={previewLines(content, 10)} />
+    </div>
+  );
+}
+
+interface DiffLine {
+  kind: "add" | "remove" | "context";
+  text: string;
+}
+
+function diffLines(input: UnknownRecord, output: unknown): DiffLine[] {
+  const outputRecord = recordOf(output);
+  const rawDiff =
+    stringField(outputRecord, "diff") ||
+    stringField(recordOf(outputRecord.details), "diff");
+  if (rawDiff) {
+    const lines = rawDiff.split(/\r?\n/);
+    return [
+      ...lines.slice(0, 200).map((text): DiffLine => ({
+        kind: text.startsWith("+")
+          ? "add"
+          : text.startsWith("-")
+            ? "remove"
+            : "context",
+        text,
+      })),
+      ...(lines.length > 200
+        ? [{ kind: "context" as const, text: "... [diff truncated]" }]
+        : []),
+    ];
+  }
+  const edits = Array.isArray(input.edits)
+    ? input.edits.map(recordOf)
+    : [input];
+  const result: DiffLine[] = [];
+  for (const edit of edits) {
+    const oldText = stringField(edit, "old_string", "oldText");
+    const newText = stringField(edit, "new_string", "newText");
+    for (const text of oldText.split(/\r?\n/).filter(Boolean).slice(0, 6)) {
+      result.push({ kind: "remove", text: `- ${text}` });
+    }
+    for (const text of newText.split(/\r?\n/).filter(Boolean).slice(0, 6)) {
+      result.push({ kind: "add", text: `+ ${text}` });
+    }
+  }
+  return result;
+}
+
+function EditDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, output } = presentation;
+  const path = stringField(input, "file_path", "path", "filename");
+  const edits = Array.isArray(input.edits)
+    ? input.edits.length
+    : stringField(input, "old_string", "oldText", "new_string", "newText")
+      ? 1
+      : 0;
+  const outputRecord = recordOf(output);
+  const replacementCount =
+    numberField(outputRecord, "replacementCount") ??
+    numberField(recordOf(outputRecord.details), "replacementCount") ??
+    edits;
+  const lines = diffLines(input, output);
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Path:" value={path} copyValue={path} mono />
+      <ProjectRow input={input} />
+      <DetailRow
+        label="Changes:"
+        value={`${replacementCount} replacements`}
+      />
+      {lines.length > 0 ? (
+        <div className="mt-2 max-h-32 overflow-auto rounded bg-muted/30 p-2 font-mono text-xs">
+          {lines.map((line, index) => (
+            <div
+              key={`${line.kind}:${index}`}
+              className={cn(
+                "whitespace-pre-wrap break-words",
+                line.kind === "add" && "text-green-600/80 dark:text-green-400/80",
+                line.kind === "remove" && "text-red-600/80 dark:text-red-400/80",
+                line.kind === "context" && "text-muted-foreground/60",
+              )}
+            >
+              {line.text}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <DetailRow label="Diff:" value="No diff available" />
+      )}
+    </div>
+  );
+}
+
+function BashDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, output, outputText } = presentation;
+  const command = stringField(input, "command", "cmd");
+  const outputRecord = recordOf(output);
+  const parsedFromText = (() => {
+    if (!outputText.trim().startsWith("{")) return {};
+    try {
+      return recordOf(JSON.parse(outputText));
+    } catch {
+      return {};
+    }
+  })();
+  const result = Object.keys(outputRecord).length > 0
+    ? outputRecord
+    : parsedFromText;
+  const stdout = stringField(result, "stdout");
+  const stderr = stringField(result, "stderr");
+  const exitCode = numberField(result, "exit_code", "exitCode");
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Command:" value={command} copyValue={command} mono />
+      <ProjectRow input={input} />
+      <DetailRow label="Description:" value={stringField(input, "description")} />
+      {exitCode != null ? (
+        <DetailRow label="Exit code:" value={String(exitCode)} />
+      ) : null}
+      <OutputBlock label="Stdout" value={stdout} />
+      <OutputBlock label="Stderr" value={stderr} />
+      {!stdout && !stderr ? (
+        <OutputBlock
+          label={presentation.failed ? "Error" : "Output"}
+          value={presentation.errorText || outputText}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function SearchDetails({
+  presentation,
+  label,
+}: CamelToolDetailsProps & { label: "Files" | "Matches" }) {
+  const { input, outputText } = presentation;
+  const cleanedOutput = outputText
+    .split(/\r?\n/)
+    .filter((line) => !/^Found\s+\d+/i.test(line.trim()))
+    .join("\n");
+  const count =
+    parseCount(outputText, label === "Files" ? "files" : "matches");
+  return (
+    <div className="space-y-1">
+      <DetailRow
+        label="Pattern:"
+        value={stringField(input, "pattern", "glob", "query")}
+        mono
+      />
+      <DetailRow
+        label="Path:"
+        value={stringField(input, "path", "cwd")}
+        mono
+      />
+      <ProjectRow input={input} />
+      <DetailRow label="Mode:" value={stringField(input, "output_mode")} />
+      {count != null ? <DetailRow label="Count:" value={String(count)} /> : null}
+      <OutputBlock label={label} value={cleanedOutput || outputText} />
+    </div>
+  );
+}
+
+function ListDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, outputText } = presentation;
+  return (
+    <div className="space-y-1">
+      <DetailRow
+        label="Path:"
+        value={stringField(input, "path")}
+        mono
+      />
+      <ProjectRow input={input} />
+      <OutputBlock label="Files" value={outputText} />
+    </div>
+  );
+}
+
+function WebDetails({
+  presentation,
+  mode,
+}: CamelToolDetailsProps & { mode: "search" | "fetch" }) {
+  const { input, outputText } = presentation;
+  return (
+    <div className="space-y-1">
+      {mode === "fetch" ? (
+        <DetailRow
+          label="URL:"
+          value={stringField(input, "url")}
+          copyValue={stringField(input, "url")}
+          mono
+        />
+      ) : (
+        <DetailRow
+          label="Query:"
+          value={stringField(input, "query", "q")}
+          copyValue={stringField(input, "query", "q")}
+        />
+      )}
+      <DetailRow
+        label="Prompt:"
+        value={stringField(input, "prompt")}
+      />
+      <OutputBlock
+        label={mode === "fetch" ? "Response" : "Response"}
+        value={outputText}
+      />
+    </div>
+  );
+}
+
+function TaskDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, output, outputText } = presentation;
+  const tasks = Array.isArray(input.todos)
+    ? input.todos.map(recordOf)
+    : Array.isArray(input.steps)
+      ? input.steps.map(recordOf)
+      : [];
+  return (
+    <div className="space-y-2">
+      {tasks.length > 0 ? (
+        <div className="space-y-1">
+          <div className="text-xs text-muted-foreground/60">Tasks:</div>
+          <div className="space-y-1 pl-4">
+            {tasks.map((task, index) => {
+              const status = stringField(task, "status") || "pending";
+              const text =
+                stringField(task, "content", "text", "activeForm") ||
+                "Untitled task";
+              return (
+                <div
+                  key={`${status}:${index}`}
+                  className="flex items-start gap-2 text-xs"
+                >
+                  <span className="font-mono text-muted-foreground/60">
+                    {["done", "completed"].includes(status) ? "[x]" : "[ ]"}
+                  </span>
+                  <span className="min-w-0 flex-1 text-muted-foreground/80">
+                    {text}
+                  </span>
+                  <span className="text-[0.65rem] uppercase text-muted-foreground/50">
+                    {status}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <DetailRow label="Tasks:" value="No tasks provided" />
+      )}
+      <OutputBlock
+        label="Result"
+        value={
+          typeof output === "object"
+            ? summarizeResult(recordOf(output))
+            : outputText
+        }
+      />
+    </div>
+  );
+}
+
+function summarizeResult(output: UnknownRecord): string {
+  const preferred = [
+    "message",
+    "summary",
+    "status",
+    "result",
+  ].flatMap((key) => {
+    const value = output[key];
+    return value == null ? [] : [`${humanize(key)}: ${normalizeOutputText(value)}`];
+  });
+  if (preferred.length > 0) return preferred.join("\n");
+  const counts = ["done", "total", "success", "ok"].flatMap((key) =>
+    output[key] == null ? [] : [`${humanize(key)}: ${String(output[key])}`],
+  );
+  return counts.join("\n");
+}
+
+function AgentDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, output, outputText, running, failed } = presentation;
+  const outputRecord = recordOf(output);
+  const activities = Array.isArray(outputRecord.activities)
+    ? outputRecord.activities
+    : Array.isArray(recordOf(outputRecord.details).activities)
+      ? recordOf(outputRecord.details).activities as unknown[]
+      : [];
+  const request = stringField(input, "question", "prompt", "description");
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Task:" value={stringField(input, "description")} />
+      <DetailRow label="Agent:" value={stringField(input, "agent", "name")} />
+      <DetailRow label="Model:" value={stringField(input, "model")} />
+      <DetailRow
+        label="Request:"
+        value={
+          request ? (
+            <span className="whitespace-pre-wrap break-words text-foreground/80">
+              {request}
+            </span>
+          ) : undefined
+        }
+      />
+      <div className="mt-2">
+        <div className="mb-1 text-[0.7rem] text-muted-foreground/60">
+          Activity
+        </div>
+        {activities.length > 0 ? (
+          <div className="space-y-1">
+            {activities.slice(-10).map((activity, index) => (
+              <div
+                key={`${normalizeOutputText(activity)}:${index}`}
+                className="flex min-w-0 items-center gap-2"
+              >
+                <span
+                  className={cn(
+                    "size-1.5 shrink-0 rounded-full bg-muted-foreground/40",
+                    running && index === activities.slice(-10).length - 1 &&
+                      "animate-pulse bg-blue-500",
+                    failed && "bg-red-500",
+                  )}
+                />
+                <span className="min-w-0 truncate text-muted-foreground/70">
+                  {normalizeOutputText(activity)}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-muted-foreground/60">
+            {running
+              ? "Waiting for the first tool call..."
+              : failed
+                ? "No tool activity was recorded before this run stopped."
+                : "Detailed tool activity was not recorded."}
+          </div>
+        )}
+      </div>
+      {outputText ? (
+        <div className="mt-2">
+          <div className="mb-1 text-[0.7rem] text-muted-foreground/60">
+            Agent result
+          </div>
+          <div className="max-h-72 overflow-auto rounded bg-muted/30 p-2 text-sm text-foreground/90">
+            <MessageResponse>{outputText}</MessageResponse>
+          </div>
+        </div>
+      ) : null}
+      {numberField(recordOf(outputRecord.details), "durationMs") != null ? (
+        <DetailRow
+          label="Duration:"
+          value={`${Math.max(
+            1,
+            Math.round(
+              numberField(recordOf(outputRecord.details), "durationMs")! / 1000,
+            ),
+          )}s`}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function SkillDetails({
+  presentation,
+  resource = false,
+}: CamelToolDetailsProps & { resource?: boolean }) {
+  const { input, outputText } = presentation;
+  const skill = stringField(input, "skill", "name");
+  const path = stringField(input, "path");
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Skill:" value={skill} mono />
+      {resource ? (
+        <DetailRow label="Resource:" value={path} copyValue={path} mono />
+      ) : null}
+      <OutputBlock
+        label={resource ? "Preview" : "Status"}
+        value={resource ? previewLines(outputText, 10) : outputText}
+      />
+    </div>
+  );
+}
+
+function AskUserDetails({ presentation }: CamelToolDetailsProps) {
+  const questions = questionsOf(presentation.input);
+  const answer = presentation.outputText;
+  return (
+    <div className="space-y-2">
+      {questions.length > 0 ? (
+        questions.map((question, index) => (
+          <div key={`${stringField(question, "question", "prompt")}:${index}`}>
+            <p className="font-medium text-foreground/85">
+              {stringField(question, "question", "prompt") || "Question"}
+            </p>
+            <p className="text-muted-foreground/60">
+              {answer || "—"}
+            </p>
+          </div>
+        ))
+      ) : (
+        <GenericDetails presentation={presentation} />
+      )}
+    </div>
+  );
+}
+
+function JavaScriptDetails({ presentation }: CamelToolDetailsProps) {
+  const { input, outputText } = presentation;
+  const timeout = numberField(input, "timeoutMs", "timeout_ms");
+  const outputLimit = numberField(
+    input,
+    "maxOutputCharacters",
+    "max_output_characters",
+  );
+  return (
+    <div className="space-y-1">
+      <DetailRow label="Runtime:" value="JavaScript code mode" />
+      <DetailRow label="Description:" value={stringField(input, "description")} />
+      {timeout != null ? (
+        <DetailRow label="Timeout:" value={`${timeout}ms`} />
+      ) : null}
+      {outputLimit != null ? (
+        <DetailRow label="Output limit:" value={`${outputLimit} chars`} />
+      ) : null}
+      <OutputBlock label="Code" value={stringField(input, "code")} />
+      <OutputBlock label="Output" value={outputText} />
+    </div>
+  );
+}
+
+function McpDetails({ presentation }: CamelToolDetailsProps) {
+  const parsed = parseMcpName(presentation.name);
+  return (
+    <div className="space-y-1">
+      {parsed ? (
+        <>
+          <DetailRow label="MCP Server:" value={parsed.server} />
+          <DetailRow label="Tool:" value={parsed.tool} />
+        </>
+      ) : null}
+      <GenericDetails presentation={presentation} hideProject />
+    </div>
+  );
+}
+
+function GenericDetails({
+  presentation,
+  hideProject = false,
+}: CamelToolDetailsProps & { hideProject?: boolean }) {
+  const { input, outputText, errorText } = presentation;
+  const inputText = Object.keys(input).length > 0 ? safeStringify(input) : "";
+  return (
+    <div className="space-y-1">
+      {!hideProject ? <ProjectRow input={input} /> : null}
+      <OutputBlock label="Input" value={inputText} />
+      <OutputBlock
+        label={presentation.failed ? "Error" : "Output"}
+        value={errorText || outputText}
+      />
+      {!inputText && !outputText && !errorText ? (
+        <DetailRow label="Details:" value="No additional data" />
+      ) : null}
+    </div>
+  );
+}
+
+export function CamelToolDetails({
+  presentation,
+}: CamelToolDetailsProps) {
+  switch (presentation.kind) {
+    case "read":
+      return <ReadDetails presentation={presentation} />;
+    case "write":
+      return <WriteDetails presentation={presentation} />;
+    case "edit":
+      return <EditDetails presentation={presentation} />;
+    case "bash":
+      return <BashDetails presentation={presentation} />;
+    case "glob":
+      return <SearchDetails presentation={presentation} label="Files" />;
+    case "grep":
+      return <SearchDetails presentation={presentation} label="Matches" />;
+    case "list":
+    case "find":
+      return <ListDetails presentation={presentation} />;
+    case "web-search":
+      return <WebDetails presentation={presentation} mode="search" />;
+    case "web-fetch":
+      return <WebDetails presentation={presentation} mode="fetch" />;
+    case "javascript":
+      return <JavaScriptDetails presentation={presentation} />;
+    case "tasks":
+      return <TaskDetails presentation={presentation} />;
+    case "agent":
+      return <AgentDetails presentation={presentation} />;
+    case "skill":
+      return <SkillDetails presentation={presentation} />;
+    case "skill-resource":
+      return <SkillDetails presentation={presentation} resource />;
+    case "ask-user":
+      return <AskUserDetails presentation={presentation} />;
+    case "suggestions":
+      return (
+        <OutputBlock
+          label="Suggestions"
+          value={presentation.outputText || safeStringify(presentation.input)}
+        />
+      );
+    case "notebook":
+      return (
+        <div className="space-y-1">
+          <DetailRow
+            label="Notebook:"
+            value={stringField(presentation.input, "notebook_path", "path")}
+            mono
+          />
+          <DetailRow
+            label="Cell:"
+            value={stringField(presentation.input, "cell_id", "cell_number")}
+          />
+          <OutputBlock
+            label="Code"
+            value={stringField(presentation.input, "code", "new_source")}
+          />
+        </div>
+      );
+    case "mcp":
+      return <McpDetails presentation={presentation} />;
+    case "generic":
+      return <GenericDetails presentation={presentation} />;
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes)) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  const kilobytes = bytes / 1024;
+  if (kilobytes < 1024) return `${kilobytes.toFixed(1)} KB`;
+  return `${(kilobytes / 1024).toFixed(1)} MB`;
+}