@springbrand/message-panel 0.1.0 → 0.1.2

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

@@ -1,1270 +0,0 @@
-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`;
-}