remotion-claude-agent-demo 0.1.0

package/apps/web/src/lib/agent/chat.ts

@@ -0,0 +1,543 @@
+import { query } from "@anthropic-ai/claude-agent-sdk";
+
+import { getEnv } from "@/lib/env";
+import { getWorkspaceDir } from "@/lib/workspace";
+import type { AskUserQuestion } from "@/lib/a2a/types";
+import { waitForAnswer } from "@/lib/agent/answer-store";
+import {
+  BACKGROUND_TASK_LIST_TOOL_NAME,
+  BACKGROUND_TASK_TOOL_NAME,
+  createBackgroundTaskServer,
+} from "@/lib/agent/background-tool";
+import { enqueueBackgroundTask } from "@/lib/agent/background";
+
+type TokenEvent = {
+  type: "token";
+  text: string;
+};
+
+type ToolCallEvent = {
+  type: "toolCall";
+  toolName: string;
+  toolId: string;
+  input: unknown;
+  status: "started" | "completed";
+  output?: unknown;
+  /** 递增序号，用于前端匹配 started/completed 事件 */
+  toolSeq?: number;
+};
+
+type FinalEvent = {
+  type: "final";
+  fullText: string;
+  totalCostUsd?: number;
+};
+
+type AskUserQuestionEvent = {
+  type: "askUserQuestion";
+  requestId: string;
+  taskId: string;
+  questions: AskUserQuestion[];
+};
+
+type SubagentEvent = {
+  type: "subagent";
+  agentId: string;
+  agentType: string;
+  status: "started" | "stopped";
+};
+
+export type ChatStreamEvent =
+  | TokenEvent
+  | ToolCallEvent
+  | FinalEvent
+  | AskUserQuestionEvent
+  | SubagentEvent;
+
+function extractTextDelta(event: unknown): string | null {
+  if (!event || typeof event !== "object") return null;
+  const rec = event as Record<string, unknown>;
+  if (rec.type !== "content_block_delta") return null;
+  const delta = rec.delta;
+  if (!delta || typeof delta !== "object") return null;
+  const deltaRec = delta as Record<string, unknown>;
+  const text = deltaRec.text;
+  return typeof text === "string" ? text : null;
+}
+
+function extractSdkSessionId(message: unknown): string | undefined {
+  if (!message || typeof message !== "object") return undefined;
+  const rec = message as Record<string, unknown>;
+  const sid = rec.session_id;
+  return typeof sid === "string" && sid.length > 0 ? sid : undefined;
+}
+
+async function* singleTurnPrompt(text: string) {
+  yield {
+    type: "user" as const,
+    message: {
+      role: "user" as const,
+      content: text,
+    },
+    parent_tool_use_id: null,
+    session_id: "",
+  };
+}
+
+type ToolCallPayload = {
+  type: "toolCall";
+  toolName: string;
+  toolId: string;
+  input: unknown;
+  status: "started" | "completed";
+  output?: unknown;
+  /** 递增序号，用于前端匹配 started/completed 事件（解决 toolId 不一致问题） */
+  toolSeq?: number;
+};
+
+type AskUserQuestionPayload = {
+  type: "askUserQuestion";
+  requestId: string;
+  taskId: string;
+  questions: AskUserQuestion[];
+};
+
+type QuestionDismissedPayload = {
+  type: "questionDismissed";
+  requestId: string;
+  taskId: string;
+  reason: "timeout" | "cancelled";
+};
+
+type SubagentPayload = {
+  type: "subagent";
+  agentId: string;
+  agentType: string;
+  status: "started" | "stopped";
+};
+
+/**
+ * 工具调用状态同步策略：
+ * 
+ * 1. 使用 onToolEvent callback 立即推送 SSE（不依赖 generator yield 时序）
+ * 2. 用递增序号 (toolSeq) 作为备用标识，解决 toolId 不一致问题
+ * 3. 前端用 toolName + 顺序匹配来关联 started/completed 事件
+ * 4. 已通过 callback 发送的事件不再通过 generator yield（避免重复）
+ */
+export async function* streamChatReply(input: {
+  userText: string;
+  taskId: string;
+  contextId?: string;
+  resumeSessionId?: string;
+  abortController?: AbortController;
+  onSessionId?: (sessionId: string) => void;
+  onToolEvent?: (ev: ToolCallPayload) => void;
+  onAskUserQuestion?: (ev: AskUserQuestionPayload) => void;
+  onQuestionDismissed?: (ev: QuestionDismissedPayload) => void;
+  onSubagentEvent?: (ev: SubagentPayload) => void;
+}): AsyncGenerator<ChatStreamEvent, void> {
+  const env = getEnv();
+
+  let fullText = "";
+  let totalCostUsd: number | undefined;
+  let stderrBuf = "";
+
+  let emittedSessionId: string | undefined;
+
+  const { onToolEvent, onAskUserQuestion, onQuestionDismissed, onSubagentEvent, taskId } = input;
+  
+  // 仅当没有 callback 时才通过 generator yield（兜底路径）
+  const toolEventsForYield: ToolCallPayload[] = [];
+  const subagentEventsForYield: SubagentPayload[] = [];
+  
+  // 递增序号，用于前端匹配 started/completed 事件
+  let toolSeq = 0;
+  // 记录每个工具调用的序号，用于 PostToolUse 时查找对应的 started 事件
+  const toolIdToSeq = new Map<string, number>();
+
+  const pushTool = (ev: ToolCallPayload & { toolSeq?: number }) => {
+    // 为 started 事件分配序号，completed 事件复用同一序号
+    if (ev.status === "started") {
+      toolSeq++;
+      ev.toolSeq = toolSeq;
+      if (ev.toolId) {
+        toolIdToSeq.set(ev.toolId, toolSeq);
+      }
+    } else if (ev.status === "completed") {
+      // 尝试从 toolId 找到对应序号
+      const seq = ev.toolId ? toolIdToSeq.get(ev.toolId) : undefined;
+      ev.toolSeq = seq ?? toolSeq; // 如果找不到，用最新序号（兜底）
+    }
+    
+    if (onToolEvent) {
+      // 有 callback 时直接推送，不存入 yield 队列
+      onToolEvent(ev);
+    } else {
+      // 无 callback 时存入队列等待 yield
+      toolEventsForYield.push(ev);
+    }
+  };
+
+  const pushSubagent = (ev: SubagentPayload) => {
+    if (onSubagentEvent) {
+      onSubagentEvent(ev);
+    } else {
+      subagentEventsForYield.push(ev);
+    }
+  };
+
+  const isBackgroundTaskInput = (
+    toolName: string,
+    toolInput: unknown,
+  ): boolean => {
+    if (toolName !== "Task" || !toolInput || typeof toolInput !== "object") return false;
+    const rec = toolInput as Record<string, unknown>;
+    return (
+      rec.run_in_background === true ||
+      rec.background === true ||
+      rec.runInBackground === true
+    );
+  };
+
+  // canUseTool 回调处理 AskUserQuestion
+  const canUseTool = async (
+    toolName: string,
+    toolInput: Record<string, unknown>,
+  ): Promise<
+    | { behavior: "allow"; updatedInput?: Record<string, unknown> }
+    | { behavior: "deny"; message: string; interrupt?: boolean }
+  > => {
+    if (toolName === BACKGROUND_TASK_TOOL_NAME) {
+      return { behavior: "allow", updatedInput: toolInput };
+    }
+
+    if (toolName === "Task") {
+      const runInBackground =
+        toolInput.run_in_background === true ||
+        toolInput.background === true ||
+        toolInput.runInBackground === true;
+
+      if (runInBackground) {
+        const prompt = typeof toolInput.prompt === "string" ? toolInput.prompt : "";
+        const description =
+          typeof toolInput.description === "string" ? toolInput.description : undefined;
+        const subagentType =
+          typeof toolInput.subagent_type === "string" ? toolInput.subagent_type : undefined;
+
+        if (!input.contextId) {
+          return {
+            behavior: "deny",
+            message: "Background tasks require an active contextId. Please retry after the task is created.",
+          };
+        }
+
+        if (!prompt.trim()) {
+          return {
+            behavior: "deny",
+            message: "Background tasks require a prompt. Use mcp__background_tasks__start instead.",
+          };
+        }
+
+        const job = enqueueBackgroundTask({
+          contextId: input.contextId,
+          parentTaskId: taskId,
+          description,
+          prompt,
+          subagentType,
+        });
+
+        const syntheticToolId = `background-${job.jobId}`;
+        const toolInputPayload = {
+          description,
+          prompt,
+          subagent_type: subagentType,
+        };
+
+        pushTool({
+          type: "toolCall",
+          toolName: BACKGROUND_TASK_TOOL_NAME,
+          toolId: syntheticToolId,
+          input: toolInputPayload,
+          status: "started",
+        });
+
+        pushTool({
+          type: "toolCall",
+          toolName: BACKGROUND_TASK_TOOL_NAME,
+          toolId: syntheticToolId,
+          input: toolInputPayload,
+          status: "completed",
+          output: { jobId: job.jobId, status: job.status },
+        });
+
+        return {
+          behavior: "deny",
+          message:
+            "Background task queued. Use mcp__background_tasks__start for background execution instead of Task.",
+        };
+      }
+    }
+
+    if (toolName === "AskUserQuestion") {
+      const questions = (toolInput.questions ?? []) as AskUserQuestion[];
+      const requestId = `${taskId}-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+
+      // 通知前端显示问题
+      onAskUserQuestion?.({
+        type: "askUserQuestion",
+        requestId,
+        taskId,
+        questions,
+      });
+
+      try {
+        // 等待用户回答（最多 60 秒）
+        const answers = await waitForAnswer({
+          requestId,
+          taskId,
+          questions,
+        });
+
+        // 返回用户的回答
+        return {
+          behavior: "allow",
+          updatedInput: {
+            questions,
+            answers,
+          },
+        };
+      } catch (err) {
+        // 超时或取消 - 通知前端清除问题UI
+        const reason = err instanceof Error && err.message.includes("timeout")
+          ? "timeout" as const
+          : "cancelled" as const;
+        onQuestionDismissed?.({
+          type: "questionDismissed",
+          requestId,
+          taskId,
+          reason,
+        });
+        return {
+          behavior: "deny",
+          message: err instanceof Error ? err.message : "User did not respond",
+        };
+      }
+    }
+
+    // 其他工具自动允许（bypassPermissions 模式）
+    return { behavior: "allow", updatedInput: toolInput };
+  };
+
+  const hooks = {
+    PreToolUse: [
+      {
+        matcher: undefined,
+        hooks: [
+          async (hookInput: unknown) => {
+            const i = hookInput as Record<string, unknown>;
+            const toolName = String(i.tool_name || "unknown");
+            if (isBackgroundTaskInput(toolName, i.tool_input)) {
+              return { continue: true };
+            }
+            pushTool({
+              type: "toolCall",
+              toolName,
+              toolId: String(i.tool_use_id || ""),
+              input: i.tool_input,
+              status: "started",
+            });
+            return { continue: true };
+          },
+        ],
+      },
+    ],
+    PostToolUse: [
+      {
+        matcher: undefined,
+        hooks: [
+          async (hookInput: unknown) => {
+            const i = hookInput as Record<string, unknown>;
+            const toolName = String(i.tool_name || "unknown");
+            if (isBackgroundTaskInput(toolName, i.tool_input)) {
+              return { continue: true };
+            }
+            pushTool({
+              type: "toolCall",
+              toolName,
+              toolId: String(i.tool_use_id || ""),
+              input: null,
+              status: "completed",
+              output: i.tool_response,
+            });
+            return { continue: true };
+          },
+        ],
+      },
+    ],
+    // 子代理开始
+    SubagentStart: [
+      {
+        matcher: undefined,
+        hooks: [
+          async (hookInput: unknown) => {
+            const i = hookInput as Record<string, unknown>;
+            pushSubagent({
+              type: "subagent",
+              agentId: String(i.agent_id || ""),
+              agentType: String(i.agent_type || "unknown"),
+              status: "started",
+            });
+            return { continue: true };
+          },
+        ],
+      },
+    ],
+    // 子代理结束
+    SubagentStop: [
+      {
+        matcher: undefined,
+        hooks: [
+          async (hookInput: unknown) => {
+            const i = hookInput as Record<string, unknown>;
+            pushSubagent({
+              type: "subagent",
+              agentId: String(i.agent_id || ""),
+              agentType: String(i.agent_type || "unknown"),
+              status: "stopped",
+            });
+            return { continue: true };
+          },
+        ],
+      },
+    ],
+    // 停止时触发（可用于清理资源）
+    Stop: [
+      {
+        matcher: undefined,
+        hooks: [
+          async (hookInput: unknown) => {
+            const i = hookInput as Record<string, unknown>;
+            const stopHookActive = Boolean(i.stop_hook_active);
+            // 可以在这里执行清理逻辑
+            console.log("[Stop Hook] Agent stopping, stop_hook_active:", stopHookActive);
+            return { continue: true };
+          },
+        ],
+      },
+    ],
+  };
+
+  const backgroundTaskServer =
+    input.contextId
+      ? createBackgroundTaskServer({ contextId: input.contextId, parentTaskId: taskId })
+      : null;
+
+  const q = query({
+    prompt: singleTurnPrompt(input.userText),
+    options: {
+      abortController: input.abortController,
+      model: env.anthropicModel,
+      agent: "assistant",
+      ...(input.resumeSessionId
+        ? { resume: input.resumeSessionId, forkSession: false }
+        : {}),
+      includePartialMessages: true,
+      maxThinkingTokens: 10000, 
+      allowedTools: [
+        "WebSearch",
+        "WebFetch",
+        "Bash",
+        "BashOutput",
+        "KillBash",
+        "Read",
+        "Write",
+        "Edit",
+        "Glob",
+        "Grep",
+        "AskUserQuestion",
+        "Skill",
+        "Task", 
+        "TodoWrite",
+        BACKGROUND_TASK_TOOL_NAME,
+        BACKGROUND_TASK_LIST_TOOL_NAME,
+      ],
+      settingSources: ["project"],
+      permissionMode: "bypassPermissions",
+      cwd: getWorkspaceDir(),
+      ...(backgroundTaskServer ? { mcpServers: { background_tasks: backgroundTaskServer } } : {}),
+      canUseTool,
+      hooks,
+      stderr: (data) => {
+        stderrBuf += data;
+        if (stderrBuf.length > 20000) stderrBuf = stderrBuf.slice(-20000);
+      },
+      env: {
+        ...process.env,
+        ...(env.anthropicApiKey
+          ? { ANTHROPIC_API_KEY: env.anthropicApiKey }
+          : {}),
+        ...(env.anthropicBaseUrl
+          ? { ANTHROPIC_BASE_URL: env.anthropicBaseUrl }
+          : {}),
+        ...(env.anthropicDefaultHaikuModel
+          ? { ANTHROPIC_DEFAULT_HAIKU_MODEL: env.anthropicDefaultHaikuModel }
+          : {}),
+        ...(env.anthropicModel ? { ANTHROPIC_MODEL: env.anthropicModel } : {}),
+      },
+    },
+  });
+
+  try {
+    for await (const msg of q) {
+      // 仅当没有 callback 时才通过 yield 发送事件（兜底路径）
+      while (toolEventsForYield.length > 0) {
+        yield toolEventsForYield.shift()!;
+      }
+      while (subagentEventsForYield.length > 0) {
+        yield subagentEventsForYield.shift()!;
+      }
+
+      if (!emittedSessionId) {
+        const sid = extractSdkSessionId(msg);
+        if (sid) {
+          emittedSessionId = sid;
+          input.onSessionId?.(sid);
+        }
+      }
+
+      if (msg.type === "stream_event") {
+        const delta = extractTextDelta(msg.event);
+        if (delta) {
+          fullText += delta;
+          yield { type: "token", text: delta };
+        }
+        continue;
+      }
+
+      if (msg.type === "result") {
+        totalCostUsd = msg.total_cost_usd;
+      }
+    }
+  } catch (e) {
+    const base = e instanceof Error ? e.message : "Unknown error";
+    const stderr = stderrBuf.trim();
+    const hint =
+      !env.anthropicApiKey && stderr.length === 0
+        ? "Missing ANTHROPIC_API_KEY (set apps/web/.env.local from .env.example) or authenticate Claude Code via `claude`."
+        : "";
+    const message = [base, stderr, hint]
+      .filter((s) => s && s.length > 0)
+      .join("\n");
+    throw new Error(message);
+  }
+
+  // 清空剩余的兜底队列
+  while (toolEventsForYield.length > 0) {
+    yield toolEventsForYield.shift()!;
+  }
+  while (subagentEventsForYield.length > 0) {
+    yield subagentEventsForYield.shift()!;
+  }
+
+  yield { type: "final", fullText, totalCostUsd };
+}

package/apps/web/src/lib/agent/session-store.ts

@@ -0,0 +1,26 @@
+type SessionRecord = {
+  sessionId: string;
+  updatedAtMs: number;
+};
+
+declare global {
+  var __AGENT_SESSION_BY_CONTEXT__: Map<string, SessionRecord> | undefined;
+}
+
+function getStore(): Map<string, SessionRecord> {
+  if (!globalThis.__AGENT_SESSION_BY_CONTEXT__) {
+    globalThis.__AGENT_SESSION_BY_CONTEXT__ = new Map();
+  }
+  return globalThis.__AGENT_SESSION_BY_CONTEXT__;
+}
+
+export function getSessionIdForContext(contextId: string): string | undefined {
+  return getStore().get(contextId)?.sessionId;
+}
+
+export function setSessionIdForContext(input: { contextId: string; sessionId: string }): void {
+  getStore().set(input.contextId, {
+    sessionId: input.sessionId,
+    updatedAtMs: Date.now(),
+  });
+}

package/apps/web/src/lib/chat/types.ts

@@ -0,0 +1,44 @@
+import type { AskUserQuestion as A2aAskUserQuestion, A2aTodoItem } from "@/lib/a2a/types";
+
+export type AgentTextBlock = { kind: "text"; text: string };
+export type AgentToolBlock = {
+  kind: "tool";
+  toolId: string;
+  toolName: string;
+  input: unknown;
+  status: "started" | "completed";
+  output?: unknown;
+  /** 递增序号，用于匹配 started/completed 事件 */
+  toolSeq?: number;
+};
+export type AgentBlock = AgentTextBlock | AgentToolBlock;
+
+export type ChatItem =
+  | { id: string; role: "user"; text: string }
+  | {
+      id: string;
+      role: "agent";
+      taskId?: string;
+      jobId?: string;
+      blocks: AgentBlock[];
+    };
+
+export type PendingQuestion = {
+  requestId: string;
+  taskId: string;
+  questions: A2aAskUserQuestion[];
+};
+
+export type SubagentActivity = {
+  agentId: string;
+  agentType: string;
+  status: "running" | "stopped";
+  startedAt: number;
+  stoppedAt?: number;
+  isBackground?: boolean;
+  prompt?: string;
+  description?: string;
+  result?: string;
+  todos?: A2aTodoItem[];
+  todoUpdatedAt?: number;
+};

package/apps/web/src/lib/env.ts

@@ -0,0 +1,31 @@
+export type Env = {
+  anthropicApiKey?: string;
+  anthropicBaseUrl?: string;
+  anthropicDefaultHaikuModel?: string;
+  anthropicModel: string;
+  a2aVersion: string;
+  a2aAgentName: string;
+  a2aAgentDescription: string;
+  nextPublicA2aBaseUrl: string;
+};
+
+function getEnvString(key: string): string | undefined {
+  const v = process.env[key];
+  return v && v.trim().length > 0 ? v.trim() : undefined;
+}
+
+export function getEnv(): Env {
+  return {
+    anthropicApiKey: getEnvString("ANTHROPIC_API_KEY"),
+    anthropicBaseUrl: getEnvString("ANTHROPIC_BASE_URL"),
+    anthropicDefaultHaikuModel: getEnvString("ANTHROPIC_DEFAULT_HAIKU_MODEL"),
+    anthropicModel: getEnvString("ANTHROPIC_MODEL") ?? "claude-3-5-sonnet-latest",
+    a2aVersion: getEnvString("A2A_VERSION") ?? "0.3.0",
+    a2aAgentName: getEnvString("A2A_AGENT_NAME") ?? "Remotion Demo Agent (MVP)",
+    a2aAgentDescription:
+      getEnvString("A2A_AGENT_DESCRIPTION") ??
+      "Local A2A agent for chat + future demo video generation",
+    nextPublicA2aBaseUrl:
+      getEnvString("NEXT_PUBLIC_A2A_BASE_URL") ?? "http://localhost:3000",
+  };
+}