initial

2026-05-14 19:24:50 +00:00
parent af0628867f
commit a7f218e182
63 changed files with 10539 additions and 0 deletions
--- a/apps/web/src/components/ToolCallCard.tsx
+++ b/apps/web/src/components/ToolCallCard.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { ChevronRight, Wrench } from 'lucide-react';
+import type { Message, ToolCall } from '@/api/types';
+
+interface Props {
+  message?: Message;
+  toolCall?: ToolCall;
+}
+
+export function ToolCallCard({ message, toolCall }: Props) {
+  const [open, setOpen] = useState(false);
+  const tc = toolCall ?? message?.tool_calls?.[0];
+  const result = message?.tool_results;
+
+  const name = tc?.name ?? 'tool';
+  const args = tc?.args ?? {};
+  const error = result?.error;
+  const output = result?.output;
+  const truncated = result?.truncated;
+
+  return (
+    <div className="rounded-md border border-border bg-muted/30 text-sm overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/60 text-left"
+      >
+        <ChevronRight
+          className={`size-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+        <Wrench className="size-3.5 opacity-70" />
+        <span className="font-mono font-medium">{name}</span>
+        <span className="font-mono text-xs text-muted-foreground truncate min-w-0 flex-1">
+          {JSON.stringify(args)}
+        </span>
+        {error && (
+          <span className="text-xs text-destructive font-medium ml-2">error</span>
+        )}
+        {truncated && (
+          <span className="text-xs text-muted-foreground ml-2">truncated</span>
+        )}
+      </button>
+      {open && (
+        <div className="px-2.5 py-2 border-t bg-background/40">
+          {error ? (
+            <pre className="text-xs text-destructive font-mono whitespace-pre-wrap">
+              {error}
+            </pre>
+          ) : output !== undefined ? (
+            <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto max-h-72 overflow-y-auto">
+              {typeof output === 'string' ? output : JSON.stringify(output, null, 2)}
+            </pre>
+          ) : (
+            <div className="text-xs text-muted-foreground">no result yet</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}