remotion-claude-agent-demo 0.1.0

package/apps/web/src/components/chat/tool-blocks.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import { useState } from "react";
+import type { AgentToolBlock } from "@/lib/chat/types";
+import {
+  Activity,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  Clock,
+  Cpu,
+  Info,
+  ListTodo,
+  Loader2,
+} from "lucide-react";
+
+const RESULT_ONE_LINE_LEN = 120;
+
+function getFullParamString(toolName: string, input: unknown): string {
+  if (input === null || input === undefined) return "";
+  const o = typeof input === "object" && input !== null ? (input as Record<string, unknown>) : {};
+  switch (toolName) {
+    case "Bash":
+      return String(o.command ?? "");
+    case "Read":
+    case "Write":
+    case "Edit":
+      return String(o.file_path ?? "");
+    case "Grep":
+    case "Glob":
+      return String(o.pattern ?? "");
+    case "WebFetch":
+      return String(o.url ?? "");
+    case "WebSearch":
+      return String(o.query ?? "");
+    case "TodoWrite":
+      return "";
+    case "Task":
+      return String(o.description ?? "");
+    case "mcp__background_tasks__start":
+      return String(o.description ?? "");
+    case "mcp__background_tasks__list":
+      return "";
+    default:
+      return typeof input === "string" ? input : JSON.stringify(input);
+  }
+}
+
+function getTruncatedParam(param: string, maxLen = 60): string {
+  if (param.length <= maxLen) return param;
+  return param.slice(0, maxLen) + "...";
+}
+
+function getResultDisplay(block: AgentToolBlock): string {
+  if (block.status === "started") return "Running...";
+  const out = block.output;
+  if (out === null || out === undefined) return "Done";
+  const s = typeof out === "string" ? out : JSON.stringify(out);
+  const line = s.split("\n").filter((l) => l.trim())[0] ?? "";
+  if (!line) return "Done";
+  return line.length > RESULT_ONE_LINE_LEN ? line.slice(0, RESULT_ONE_LINE_LEN) + "..." : line;
+}
+
+function getResultFull(block: AgentToolBlock): string {
+  if (block.status === "started" || block.output == null) return "";
+  return typeof block.output === "string" ? block.output : JSON.stringify(block.output, null, 2);
+}
+
+function extractToolText(output: unknown): string | null {
+  if (!output) return null;
+  if (typeof output === "string") return output;
+  if (typeof output !== "object") return null;
+  const rec = output as Record<string, unknown>;
+  const content = rec.content;
+  if (!Array.isArray(content)) return null;
+  for (const item of content) {
+    if (!item || typeof item !== "object") continue;
+    const entry = item as Record<string, unknown>;
+    if (entry.type === "text" && typeof entry.text === "string") {
+      return entry.text;
+    }
+  }
+  return null;
+}
+
+function parseToolJson(output: unknown): Record<string, unknown> | null {
+  if (!output) return null;
+  if (typeof output === "object") {
+    const rec = output as Record<string, unknown>;
+    if ("tasks" in rec || "jobId" in rec) return rec;
+  }
+  const text = extractToolText(output) ?? (typeof output === "string" ? output : null);
+  if (!text) return null;
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === "object") return parsed as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function getDotClass(block: AgentToolBlock): string {
+  if (block.status === "started") return "bg-blue-500 animate-pulse";
+  const out = block.output;
+  const s = typeof out === "string" ? out : out != null ? String(out) : "";
+  if (s.toLowerCase().includes("error")) return "bg-red-500";
+  return "bg-emerald-500";
+}
+
+type TodoItem = {
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+  activeForm?: string;
+};
+
+type TodoWriteInput = {
+  todos?: TodoItem[];
+};
+
+function getTodoStatusIcon(status: TodoItem["status"]) {
+  switch (status) {
+    case "completed":
+      return <CheckCircle2 className="w-4 h-4 text-emerald-500" />;
+    case "in_progress":
+      return <Clock className="w-4 h-4 text-blue-500 animate-pulse" />;
+    default:
+      return <Circle className="w-4 h-4 text-muted-foreground" />;
+  }
+}
+
+function getTodoStatusClass(status: TodoItem["status"]) {
+  switch (status) {
+    case "completed":
+      return "text-muted-foreground line-through";
+    case "in_progress":
+      return "text-blue-600 dark:text-blue-400 font-medium";
+    default:
+      return "text-foreground";
+  }
+}
+
+function getTodoStats(todos: TodoItem[]) {
+  return {
+    total: todos.length,
+    completed: todos.filter((t) => t.status === "completed").length,
+    inProgress: todos.filter((t) => t.status === "in_progress").length,
+    pending: todos.filter((t) => t.status === "pending").length,
+  };
+}
+
+function TodoListCard({
+  title,
+  todos,
+}: {
+  title: string;
+  todos: TodoItem[];
+}) {
+  const stats = getTodoStats(todos);
+
+  return (
+    <div className="rounded-lg border border-cyan-200 dark:border-cyan-800 bg-cyan-50/50 dark:bg-cyan-950/20 overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-cyan-200/50 dark:border-cyan-800/50">
+        <ListTodo className="w-4 h-4 text-cyan-500" />
+        <span className="text-sm font-medium text-foreground">{title}</span>
+        <div className="flex-1" />
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <CheckCircle2 className="w-3 h-3 text-emerald-500" />
+            {stats.completed}
+          </span>
+          <span className="flex items-center gap-1">
+            <Clock className="w-3 h-3 text-blue-500" />
+            {stats.inProgress}
+          </span>
+          <span className="flex items-center gap-1">
+            <Circle className="w-3 h-3" />
+            {stats.pending}
+          </span>
+        </div>
+      </div>
+      <div className="px-3 py-2 space-y-1.5">
+        {todos.map((todo, idx) => (
+          <div key={idx} className="flex items-start gap-2">
+            {getTodoStatusIcon(todo.status)}
+            <span className={`text-sm ${getTodoStatusClass(todo.status)}`}>
+              {todo.content}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function parseTodosFromResult(result?: string): TodoItem[] | null {
+  if (!result) return null;
+  try {
+    const parsed = JSON.parse(result);
+    if (!parsed || typeof parsed !== "object") return null;
+    const rec = parsed as Record<string, unknown>;
+    const rawTodos = Array.isArray(rec.newTodos)
+      ? rec.newTodos
+      : Array.isArray(rec.todos)
+        ? rec.todos
+        : null;
+    if (!rawTodos) return null;
+    const todos = rawTodos
+      .map((todo): TodoItem | null => {
+        if (!todo || typeof todo !== "object") return null;
+        const t = todo as Record<string, unknown>;
+        const content = typeof t.content === "string" ? t.content : null;
+        const status =
+          t.status === "pending" || t.status === "in_progress" || t.status === "completed"
+            ? (t.status as TodoItem["status"])
+            : null;
+        if (!content || !status) return null;
+        const item: TodoItem = { content, status };
+        if (typeof t.activeForm === "string") item.activeForm = t.activeForm;
+        return item;
+      })
+      .filter((t): t is TodoItem => t !== null);
+    return todos.length > 0 ? todos : null;
+  } catch {
+    return null;
+  }
+}
+
+export function TodoBlock({ block }: { block: AgentToolBlock }) {
+  const input = (block.input || {}) as TodoWriteInput;
+  const todos = input.todos || [];
+  const isRunning = block.status === "started";
+
+  if (todos.length === 0 && !isRunning) {
+    return null;
+  }
+  if (todos.length === 0 && isRunning) {
+    return (
+      <div className="rounded-lg border border-cyan-200 dark:border-cyan-800 bg-cyan-50/50 dark:bg-cyan-950/20 overflow-hidden">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-cyan-200/50 dark:border-cyan-800/50">
+          <ListTodo className="w-4 h-4 text-cyan-500" />
+          <span className="text-sm font-medium text-foreground">Task List</span>
+        </div>
+        <div className="px-3 py-2">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="w-4 h-4 animate-spin" />
+            Updating task list...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <TodoListCard title="Task List" todos={todos} />;
+}
+
+type TaskInput = {
+  prompt?: string;
+  description?: string;
+  subagent_type?: string;
+  model?: string;
+  readonly?: boolean;
+  run_in_background?: boolean;
+  background?: boolean;
+  runInBackground?: boolean;
+};
+
+function parseTaskOutput(output: unknown): { result?: string; agentId?: string } {
+  if (!output) return {};
+  const str = typeof output === "string" ? output : JSON.stringify(output);
+  const agentIdMatch = str.match(/agentId:\s*([a-f0-9-]+)/i);
+  return {
+    result: str,
+    agentId: agentIdMatch?.[1],
+  };
+}
+
+type BackgroundTaskInput = {
+  description?: string;
+  prompt?: string;
+  subagent_type?: string;
+};
+
+function parseBackgroundOutput(output: unknown): { jobId?: string } {
+  if (!output) return {};
+  try {
+    const parsed = parseToolJson(output);
+    if (parsed && typeof parsed.jobId === "string") {
+      return { jobId: parsed.jobId };
+    }
+  } catch {
+    // ignore parse errors
+  }
+  return {};
+}
+
+export function TaskBlock({ block }: { block: AgentToolBlock }) {
+  const [expanded, setExpanded] = useState(false);
+  const input = (block.input || {}) as TaskInput;
+  const description = input.description || "Subagent task";
+  const subagentType = input.subagent_type || "generalPurpose";
+  const model = input.model;
+  const isBackground =
+    input.run_in_background === true ||
+    input.background === true ||
+    input.runInBackground === true;
+  const isRunning = block.status === "started";
+  const { result, agentId } = parseTaskOutput(block.output);
+  const todosFromResult = parseTodosFromResult(result);
+  const showRawResult = Boolean(result && !isRunning && !todosFromResult);
+
+  const getSubagentLabel = (type: string) => {
+    switch (type) {
+      case "generalPurpose":
+        return "General";
+      case "explore":
+        return "Explorer";
+      default:
+        return type;
+    }
+  };
+
+  const getModelLabel = (m?: string) => {
+    if (!m) return null;
+    switch (m) {
+      case "fast":
+        return "Fast";
+      case "sonnet":
+        return "Sonnet";
+      case "opus":
+        return "Opus";
+      case "haiku":
+        return "Haiku";
+      default:
+        return m;
+    }
+  };
+
+  const getStatusDisplay = () => {
+    if (isBackground) {
+      return (
+        <span className="flex items-center gap-1 text-blue-500">
+          <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
+          Submitted to background
+        </span>
+      );
+    }
+
+    if (isRunning) {
+      return <span className="text-violet-500">Running...</span>;
+    }
+
+    return (
+      <span className="flex items-center gap-1">
+        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+        Completed
+        {agentId && <span className="opacity-60">· {agentId.slice(0, 8)}</span>}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={`rounded-lg border overflow-hidden ${
+        isBackground
+          ? "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20"
+          : "border-violet-200 dark:border-violet-800 bg-violet-50/50 dark:bg-violet-950/20"
+      }`}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((e) => !e)}
+        className={`w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors enabled:cursor-pointer ${
+          isBackground
+            ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/20"
+            : "hover:bg-violet-100/50 dark:hover:bg-violet-900/20"
+        }`}
+      >
+        <div className="flex items-center gap-2 shrink-0 mt-0.5">
+          {isBackground ? (
+            <Activity className="w-4 h-4 text-blue-500" />
+          ) : isRunning ? (
+            <Loader2 className="w-4 h-4 text-violet-500 animate-spin" />
+          ) : (
+            <Cpu className="w-4 h-4 text-violet-500" />
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-medium text-foreground">{description}</span>
+            <span
+              className={`text-xs px-1.5 py-0.5 rounded ${
+                isBackground
+                  ? "bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400"
+                  : "bg-violet-100 dark:bg-violet-900/40 text-violet-600 dark:text-violet-400"
+              }`}
+            >
+              {getSubagentLabel(subagentType)}
+            </span>
+            {isBackground && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
+                Background
+              </span>
+            )}
+            {model && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                {getModelLabel(model)}
+              </span>
+            )}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">{getStatusDisplay()}</div>
+        </div>
+        <div className="shrink-0 mt-0.5">
+          {expanded ? (
+            <ChevronDown className="w-4 h-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-muted-foreground" />
+          )}
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="px-3 py-2 border-t border-violet-200/50 dark:border-violet-800/50 space-y-2">
+          {input.prompt && (
+            <div className="text-xs">
+              <div className="font-medium text-muted-foreground mb-1">Prompt</div>
+              <div className="text-foreground bg-background/50 rounded p-2 max-h-32 overflow-y-auto whitespace-pre-wrap">
+                {input.prompt.length > 500 ? input.prompt.slice(0, 500) + "..." : input.prompt}
+              </div>
+            </div>
+          )}
+
+          {todosFromResult && (
+            <TodoListCard title="Todo (from result)" todos={todosFromResult} />
+          )}
+
+          {showRawResult && result != null && (
+            <div className="text-xs">
+              <div className="font-medium text-muted-foreground mb-1">Result</div>
+              <div className="text-foreground bg-background/50 rounded p-2 max-h-48 overflow-y-auto whitespace-pre-wrap">
+                {result.length > 1000 ? result.slice(0, 1000) + "..." : result}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function BackgroundTaskBlock({ block }: { block: AgentToolBlock }) {
+  const input = (block.input || {}) as BackgroundTaskInput;
+  const description = input.description || "Background task";
+  const { jobId } = parseBackgroundOutput(block.output);
+  const isRunning = block.status === "started";
+
+  return (
+    <div className="rounded-lg border border-blue-200 dark:border-blue-800 bg-gradient-to-r from-blue-50/70 to-transparent dark:from-blue-950/30 dark:to-transparent overflow-hidden">
+      <div className="flex items-start gap-3 px-3 py-2.5">
+        <div className="flex items-center gap-2 shrink-0 mt-0.5">
+          {isRunning ? (
+            <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />
+          ) : (
+            <Activity className="w-4 h-4 text-blue-500" />
+          )}
+          <span className="text-sm font-medium text-foreground">{description}</span>
+        </div>
+        <div className="flex-1" />
+        <span className="text-xs text-blue-600 dark:text-blue-400">
+          {isRunning ? "Submitting..." : "Submitted"}
+          {jobId && <span className="ml-1 opacity-60">· {jobId.slice(0, 8)}</span>}
+        </span>
+      </div>
+      <div className="px-3 pb-2 text-xs text-muted-foreground flex items-center gap-1.5">
+        <Info className="w-3 h-3" />
+        <span>进度与结果会在右侧 Activity 面板与主会话中同步更新。</span>
+      </div>
+    </div>
+  );
+}
+
+export function ToolBlock({ block }: { block: AgentToolBlock }) {
+  if (block.toolName === "Task") {
+    return <TaskBlock block={block} />;
+  }
+
+  if (block.toolName === "mcp__background_tasks__start") {
+    return <BackgroundTaskBlock block={block} />;
+  }
+
+  if (block.toolName === "TodoWrite") {
+    return <TodoBlock block={block} />;
+  }
+
+  const result = getResultDisplay(block);
+  const query = getFullParamString(block.toolName, block.input);
+  const truncatedQuery = getTruncatedParam(query, 60);
+
+  return (
+    <div className="py-1.5 text-left">
+      <div className="flex items-center gap-2 flex-wrap text-sm">
+        <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${getDotClass(block)}`} />
+        <span className="font-medium text-foreground">{block.toolName}</span>
+        {query && (
+          <span className="text-muted-foreground truncate max-w-[min(320px,70vw)]">
+            ({truncatedQuery})
+          </span>
+        )}
+      </div>
+      <div className="mt-0.5 pl-3.5 text-sm text-muted-foreground min-w-0">
+        <span className="block truncate" title={getResultFull(block) || undefined}>
+          └ {result}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function ToolGroupBlock({ tools, startIdx }: { tools: AgentToolBlock[]; startIdx: number }) {
+  const [expanded, setExpanded] = useState(true);
+  const label = "Tool calls";
+
+  return (
+    <div
+      key={`toolGroup-${startIdx}`}
+      className="rounded-lg border border-border bg-muted/60 overflow-hidden"
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((e) => !e)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-left text-sm font-medium text-foreground hover:bg-muted/70 transition-colors enabled:cursor-pointer"
+      >
+        {expanded ? (
+          <ChevronDown className="w-4 h-4 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground" />
+        )}
+        <span>{label}</span>
+      </button>
+      {expanded && (
+        <div className="px-3 py-2 pt-0 border-t border-border/70">
+          {tools.map((block, j) => (
+            <ToolBlock key={`${block.toolId}-${j}`} block={block} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/web/src/lib/a2a/activity-store.ts

@@ -0,0 +1,150 @@
+import type {
+  A2aActivityEvent,
+  A2aBackgroundTaskActivity,
+  A2aDeliveryMessageActivity,
+  A2aTodoUpdateActivity,
+} from "@/lib/a2a/types";
+
+function buildActivityEvent(
+  id: number,
+  input: Omit<A2aActivityEvent, "id">,
+): A2aActivityEvent {
+  if (input.kind === "backgroundTask") {
+    return {
+      id,
+      contextId: input.contextId,
+      kind: "backgroundTask",
+      data: input.data as A2aBackgroundTaskActivity,
+    };
+  }
+  if (input.kind === "todoUpdate") {
+    return {
+      id,
+      contextId: input.contextId,
+      kind: "todoUpdate",
+      data: input.data as A2aTodoUpdateActivity,
+    };
+  }
+  return {
+    id,
+    contextId: input.contextId,
+    kind: "deliveryMessage",
+    data: input.data as A2aDeliveryMessageActivity,
+  };
+}
+
+const MAX_EVENTS_PER_CONTEXT = 500;
+
+export type ActivityListener = (event: A2aActivityEvent) => void;
+
+type ActivityStore = {
+  nextId: number;
+  eventsByContext: Map<string, A2aActivityEvent[]>;
+  listenersByContext: Map<string, Set<ActivityListener>>;
+};
+
+declare global {
+  var __A2A_ACTIVITY_STORE__: ActivityStore | undefined;
+}
+
+function getStore(): ActivityStore {
+  if (!globalThis.__A2A_ACTIVITY_STORE__) {
+    globalThis.__A2A_ACTIVITY_STORE__ = {
+      nextId: 1,
+      eventsByContext: new Map(),
+      listenersByContext: new Map(),
+    };
+  }
+  return globalThis.__A2A_ACTIVITY_STORE__;
+}
+
+export function appendActivityEvent(
+  input: Omit<A2aActivityEvent, "id">,
+): A2aActivityEvent {
+  const store = getStore();
+  const id = store.nextId++;
+  const event = buildActivityEvent(id, input);
+
+  const list = store.eventsByContext.get(input.contextId) ?? [];
+  list.push(event);
+  if (list.length > MAX_EVENTS_PER_CONTEXT) {
+    list.splice(0, list.length - MAX_EVENTS_PER_CONTEXT);
+  }
+  store.eventsByContext.set(input.contextId, list);
+
+  const listeners = store.listenersByContext.get(input.contextId);
+  if (listeners) {
+    for (const listener of listeners) {
+      try {
+        listener(event);
+      } catch (err) {
+        console.warn("Activity listener failed", err);
+      }
+    }
+  }
+
+  return event;
+}
+
+export function appendBackgroundTaskEvent(input: {
+  contextId: string;
+  data: A2aBackgroundTaskActivity;
+}): A2aActivityEvent {
+  return appendActivityEvent({
+    contextId: input.contextId,
+    kind: "backgroundTask",
+    data: input.data,
+  });
+}
+
+export function appendTodoUpdateEvent(input: {
+  contextId: string;
+  data: A2aTodoUpdateActivity;
+}): A2aActivityEvent {
+  return appendActivityEvent({
+    contextId: input.contextId,
+    kind: "todoUpdate",
+    data: input.data,
+  });
+}
+
+export function appendDeliveryMessageEvent(input: {
+  contextId: string;
+  data: A2aDeliveryMessageActivity;
+}): A2aActivityEvent {
+  return appendActivityEvent({
+    contextId: input.contextId,
+    kind: "deliveryMessage",
+    data: input.data,
+  });
+}
+
+export function listActivityEvents(input: {
+  contextId: string;
+  sinceId?: number;
+}): A2aActivityEvent[] {
+  const store = getStore();
+  const list = store.eventsByContext.get(input.contextId) ?? [];
+  const since = input.sinceId ?? 0;
+  if (since <= 0) return list;
+  return list.filter((event) => event.id > since);
+}
+
+export function subscribeActivityEvents(
+  contextId: string,
+  listener: ActivityListener,
+): () => void {
+  const store = getStore();
+  const listeners = store.listenersByContext.get(contextId) ?? new Set<ActivityListener>();
+  listeners.add(listener);
+  store.listenersByContext.set(contextId, listeners);
+
+  return () => {
+    const set = store.listenersByContext.get(contextId);
+    if (!set) return;
+    set.delete(listener);
+    if (set.size === 0) {
+      store.listenersByContext.delete(contextId);
+    }
+  };
+}