remotion-claude-agent-demo 0.1.0

package/apps/web/src/lib/a2a/client.ts

@@ -0,0 +1,357 @@
+import type {
+  A2aMessage,
+  A2aStreamResponse,
+  A2aToolCallEvent,
+  A2aAskUserQuestionEvent,
+  A2aQuestionDismissedEvent,
+  A2aSubagentEvent,
+  A2aActivityEvent,
+  A2aActivityStreamResponse,
+} from "@/lib/a2a/types";
+import { getEnv } from "@/lib/env";
+
+type StreamCallbacks = {
+  onOpen?: (initial: { taskId: string; contextId?: string }) => void;
+  onDelta?: (deltaText: string) => void;
+  onSessionId?: (sessionId: string) => void;
+  onToolCall?: (toolCall: A2aToolCallEvent) => void;
+  onAskUserQuestion?: (event: A2aAskUserQuestionEvent) => void;
+  onQuestionDismissed?: (event: A2aQuestionDismissedEvent) => void;
+  onSubagent?: (event: A2aSubagentEvent) => void;
+  onFinal?: (final: { taskId: string }) => void;
+  onError?: (error: Error) => void;
+};
+
+type ActivityStreamCallbacks = {
+  onActivity?: (event: A2aActivityEvent) => void;
+  onError?: (error: Error) => void;
+};
+
+const decoder = new TextDecoder();
+
+function isObject(v: unknown): v is Record<string, unknown> {
+  return !!v && typeof v === "object";
+}
+
+function extractDeltaText(msg: A2aMessage): string {
+  for (const p of msg.parts) {
+    if (p.kind === "text") return p.text;
+  }
+  return "";
+}
+
+export async function streamA2aChat(input: {
+  baseUrl?: string;
+  text: string;
+  contextId?: string;
+  sessionId?: string;
+  signal?: AbortSignal;
+  callbacks: StreamCallbacks;
+}): Promise<void> {
+  const env = getEnv();
+  const baseUrl = input.baseUrl ?? env.nextPublicA2aBaseUrl;
+
+  const body = {
+    message: {
+      kind: "message",
+      role: "user",
+      parts: [{ kind: "text", text: input.text }],
+      contextId: input.contextId,
+    },
+    ...(input.sessionId
+      ? { configuration: { metadata: { sessionId: input.sessionId } } }
+      : {}),
+  };
+
+  const res = await fetch(`${baseUrl}/messages/stream`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/a2a+json",
+      Accept: "text/event-stream",
+      "A2A-Version": env.a2aVersion,
+    },
+    body: JSON.stringify(body),
+    signal: input.signal,
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(
+      `A2A request failed (${res.status}): ${text || res.statusText}`,
+    );
+  }
+  if (!res.body) throw new Error("Missing response body");
+
+  const reader = res.body.getReader();
+  let buf = "";
+  let taskId: string | undefined;
+  let contextId: string | undefined;
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+
+      while (true) {
+        const idx = buf.indexOf("\n\n");
+        if (idx === -1) break;
+        const rawEvent = buf.slice(0, idx);
+        buf = buf.slice(idx + 2);
+
+        const lines = rawEvent.split("\n");
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed.startsWith("data:")) continue;
+          const jsonStr = trimmed.slice("data:".length).trim();
+          if (!jsonStr) continue;
+
+          let payload: unknown;
+          try {
+            payload = JSON.parse(jsonStr);
+          } catch {
+            continue;
+          }
+          if (!isObject(payload) || typeof payload.kind !== "string") continue;
+
+          const sr = payload as A2aStreamResponse;
+
+          if (sr.kind === "task") {
+            taskId = sr.task.taskId;
+            contextId = sr.task.contextId;
+            input.callbacks.onOpen?.({ taskId, contextId });
+          }
+
+          if (sr.kind === "session") {
+            input.callbacks.onSessionId?.(sr.sessionId);
+          }
+
+          if (sr.kind === "message" && sr.message.role === "agent") {
+            const delta = extractDeltaText(sr.message);
+            if (delta) input.callbacks.onDelta?.(delta);
+          }
+
+          if (sr.kind === "statusUpdate") {
+            if (
+              sr.statusUpdate.final &&
+              sr.statusUpdate.status.state === "completed" &&
+              taskId
+            ) {
+              input.callbacks.onFinal?.({ taskId });
+            }
+          }
+
+          if (sr.kind === "toolCall") {
+            input.callbacks.onToolCall?.(sr.toolCall);
+          }
+
+          if (sr.kind === "askUserQuestion") {
+            input.callbacks.onAskUserQuestion?.(sr.askUserQuestion);
+          }
+
+          if (sr.kind === "questionDismissed") {
+            input.callbacks.onQuestionDismissed?.(sr.questionDismissed);
+          }
+
+          if (sr.kind === "subagent") {
+            input.callbacks.onSubagent?.(sr.subagent);
+          }
+        }
+      }
+    }
+  } catch (e) {
+    const err = e instanceof Error ? e : new Error("Unknown streaming error");
+    if (input.signal?.aborted || err.name === "AbortError") return;
+    input.callbacks.onError?.(err);
+    throw err;
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+export async function streamA2aEvents(input: {
+  baseUrl?: string;
+  contextId: string;
+  since?: number;
+  signal?: AbortSignal;
+  callbacks: ActivityStreamCallbacks;
+}): Promise<void> {
+  const env = getEnv();
+  const baseUrl = input.baseUrl ?? env.nextPublicA2aBaseUrl;
+  const params = new URLSearchParams({ contextId: input.contextId });
+  if (input.since && input.since > 0) {
+    params.set("since", String(input.since));
+  }
+
+  const res = await fetch(`${baseUrl}/events/stream?${params.toString()}`, {
+    method: "GET",
+    headers: {
+      Accept: "text/event-stream",
+      "A2A-Version": env.a2aVersion,
+      ...(input.since && input.since > 0
+        ? { "Last-Event-ID": String(input.since) }
+        : {}),
+    },
+    signal: input.signal,
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(
+      `A2A events request failed (${res.status}): ${text || res.statusText}`,
+    );
+  }
+  if (!res.body) throw new Error("Missing response body");
+
+  const reader = res.body.getReader();
+  let buf = "";
+  let pendingEventId: number | undefined;
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += decoder.decode(value, { stream: true });
+
+      while (true) {
+        const idx = buf.indexOf("\n\n");
+        if (idx === -1) break;
+        const rawEvent = buf.slice(0, idx);
+        buf = buf.slice(idx + 2);
+
+        const lines = rawEvent.split("\n");
+        pendingEventId = undefined;
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (trimmed.startsWith("id:")) {
+            const value = trimmed.slice("id:".length).trim();
+            const parsed = Number(value);
+            if (Number.isFinite(parsed)) pendingEventId = parsed;
+            continue;
+          }
+          if (!trimmed.startsWith("data:")) continue;
+          const jsonStr = trimmed.slice("data:".length).trim();
+          if (!jsonStr) continue;
+
+          let payload: unknown;
+          try {
+            payload = JSON.parse(jsonStr);
+          } catch {
+            continue;
+          }
+          if (!isObject(payload) || typeof payload.kind !== "string") continue;
+
+          const sr = payload as A2aActivityStreamResponse;
+          if (sr.kind === "activity") {
+            const activity = pendingEventId
+              ? { ...sr.activity, id: pendingEventId }
+              : sr.activity;
+            input.callbacks.onActivity?.(activity);
+          }
+        }
+      }
+    }
+  } catch (e) {
+    const err = e instanceof Error ? e : new Error("Unknown streaming error");
+    input.callbacks.onError?.(err);
+    throw err;
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+/**
+ * 请求后端取消指定 task（会触发 AbortController + 标记为 cancelled）
+ * 设计为 fire-and-forget，前端通常不需要关心返回值。
+ */
+export async function cancelA2aTask(input: {
+  baseUrl?: string;
+  taskId: string;
+}): Promise<void> {
+  const env = getEnv();
+  const baseUrl = input.baseUrl ?? env.nextPublicA2aBaseUrl;
+
+  try {
+    const res = await fetch(`${baseUrl}/tasks/${input.taskId}/cancel`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/a2a+json",
+        "A2A-Version": env.a2aVersion,
+      },
+    });
+
+    // 404 = task 已不在内存里了，可以忽略；其他非 2xx 仅做调试用
+    if (!res.ok && res.status !== 404) {
+      console.warn(
+        "cancelA2aTask: backend returned non-2xx",
+        res.status,
+        await res.text().catch(() => ""),
+      );
+    }
+  } catch (e) {
+    // 网络错误 / dev 服务器重启之类，终止本身就已经打断前端流，这里静默即可
+    console.warn("cancelA2aTask: request failed", e);
+  }
+}
+
+export async function cancelA2aBackgroundTask(input: {
+  baseUrl?: string;
+  jobId: string;
+}): Promise<void> {
+  const env = getEnv();
+  const baseUrl = input.baseUrl ?? env.nextPublicA2aBaseUrl;
+
+  try {
+    const res = await fetch(`${baseUrl}/background-tasks/${input.jobId}/cancel`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/a2a+json",
+        "A2A-Version": env.a2aVersion,
+      },
+    });
+
+    if (!res.ok && res.status !== 404) {
+      console.warn(
+        "cancelA2aBackgroundTask: backend returned non-2xx",
+        res.status,
+        await res.text().catch(() => ""),
+      );
+    }
+  } catch (e) {
+    console.warn("cancelA2aBackgroundTask: request failed", e);
+  }
+}
+
+/**
+ * 提交用户对 AskUserQuestion 的回答
+ */
+export async function submitA2aAnswer(input: {
+  baseUrl?: string;
+  requestId: string;
+  taskId: string;
+  answers: Record<string, string>;
+}): Promise<{ success: boolean }> {
+  const env = getEnv();
+  const baseUrl = input.baseUrl ?? env.nextPublicA2aBaseUrl;
+
+  const res = await fetch(`${baseUrl}/messages/answer`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      requestId: input.requestId,
+      taskId: input.taskId,
+      answers: input.answers,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(
+      `Failed to submit answer (${res.status}): ${text || res.statusText}`,
+    );
+  }
+
+  return res.json();
+}

package/apps/web/src/lib/a2a/sse.ts

@@ -0,0 +1,19 @@
+import type { A2aStreamResponse } from "@/lib/a2a/types";
+
+const encoder = new TextEncoder();
+
+export function sseHeaders(extra?: Record<string, string>): Headers {
+  const h = new Headers();
+  h.set("Content-Type", "text/event-stream; charset=utf-8");
+  h.set("Cache-Control", "no-cache, no-transform");
+  h.set("Connection", "keep-alive");
+  h.set("X-Accel-Buffering", "no");
+  if (extra) {
+    for (const [k, v] of Object.entries(extra)) h.set(k, v);
+  }
+  return h;
+}
+
+export function sseData(payload: A2aStreamResponse): Uint8Array {
+  return encoder.encode(`data: ${JSON.stringify(payload)}\n\n`);
+}

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

@@ -0,0 +1,111 @@
+import type { A2aArtifact, A2aMessage, A2aTask, A2aTaskStatus } from "@/lib/a2a/types";
+
+type TaskRecord = {
+  task: A2aTask;
+  createdAtMs: number;
+  updatedAtMs: number;
+  cancelRequested: boolean;
+  abortController?: AbortController;
+  statusIndex: number;
+  artifactIndex: number;
+};
+
+declare global {
+  var __A2A_TASK_STORE__: Map<string, TaskRecord> | undefined;
+}
+
+function getStore(): Map<string, TaskRecord> {
+  if (!globalThis.__A2A_TASK_STORE__) {
+    globalThis.__A2A_TASK_STORE__ = new Map();
+  }
+  return globalThis.__A2A_TASK_STORE__;
+}
+
+export function createTask(input: {
+  taskId: string;
+  contextId?: string;
+  initialMessage?: A2aMessage;
+}): A2aTask {
+  const now = Date.now();
+  const task: A2aTask = {
+    taskId: input.taskId,
+    contextId: input.contextId,
+    status: {
+      state: "working",
+      timestamp: new Date(now).toISOString(),
+      message: "working",
+    },
+    artifacts: [],
+    history: input.initialMessage ? [input.initialMessage] : [],
+  };
+
+  getStore().set(input.taskId, {
+    task,
+    createdAtMs: now,
+    updatedAtMs: now,
+    cancelRequested: false,
+    statusIndex: 0,
+    artifactIndex: 0,
+  });
+
+  return task;
+}
+
+export function getTask(taskId: string): A2aTask | undefined {
+  return getStore().get(taskId)?.task;
+}
+
+export function listTasks(): A2aTask[] {
+  return Array.from(getStore().values())
+    .sort((a, b) => b.updatedAtMs - a.updatedAtMs)
+    .map((r) => r.task);
+}
+
+export function requestCancel(taskId: string): A2aTask | undefined {
+  const rec = getStore().get(taskId);
+  if (!rec) return undefined;
+  rec.cancelRequested = true;
+  rec.abortController?.abort();
+  rec.task.status = {
+    state: "cancelled",
+    timestamp: new Date().toISOString(),
+    message: "cancelled",
+  };
+  rec.updatedAtMs = Date.now();
+  return rec.task;
+}
+
+export function attachAbortController(taskId: string, abortController: AbortController): void {
+  const rec = getStore().get(taskId);
+  if (!rec) return;
+  rec.abortController = abortController;
+}
+
+export function isCancelRequested(taskId: string): boolean {
+  return getStore().get(taskId)?.cancelRequested ?? false;
+}
+
+export function updateStatus(taskId: string, status: A2aTaskStatus): number {
+  const rec = getStore().get(taskId);
+  if (!rec) return 0;
+  rec.task.status = status;
+  rec.updatedAtMs = Date.now();
+  rec.statusIndex += 1;
+  return rec.statusIndex;
+}
+
+export function appendHistory(taskId: string, msg: A2aMessage): void {
+  const rec = getStore().get(taskId);
+  if (!rec) return;
+  rec.task.history = [...(rec.task.history ?? []), msg];
+  rec.updatedAtMs = Date.now();
+}
+
+export function addArtifact(taskId: string, artifact: A2aArtifact): number {
+  const rec = getStore().get(taskId);
+  if (!rec) return 0;
+  rec.task.artifacts = [...(rec.task.artifacts ?? []), artifact];
+  rec.updatedAtMs = Date.now();
+  rec.artifactIndex += 1;
+  return rec.artifactIndex;
+}

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

@@ -0,0 +1,216 @@
+export type A2aTaskState =
+  | "working"
+  | "input_required"
+  | "completed"
+  | "failed"
+  | "cancelled"
+  | "rejected";
+
+export type A2aRole = "user" | "agent";
+
+export type A2aTextPart = { kind: "text"; text: string };
+export type A2aFilePart = {
+  kind: "file";
+  url: string;
+  mimeType?: string;
+  name?: string;
+};
+export type A2aDataPart = { kind: "data"; data: unknown; mimeType?: string };
+export type A2aPart = A2aTextPart | A2aFilePart | A2aDataPart;
+
+export type A2aMessage = {
+  kind: "message";
+  messageId?: string;
+  role: A2aRole;
+  parts: A2aPart[];
+  contextId?: string;
+  referenceTaskIds?: string[];
+};
+
+export type A2aTaskStatus = {
+  state: A2aTaskState;
+  timestamp: string;
+  message?: string;
+};
+
+export type A2aArtifact = {
+  artifactId: string;
+  name?: string;
+  description?: string;
+  parts: A2aPart[];
+  index?: number;
+};
+
+export type A2aTask = {
+  taskId: string;
+  contextId?: string;
+  status: A2aTaskStatus;
+  artifacts?: A2aArtifact[];
+  history?: A2aMessage[];
+};
+
+export type A2aTaskStatusUpdateEvent = {
+  kind: "statusUpdate";
+  taskId: string;
+  status: A2aTaskStatus;
+  index: number;
+  message?: A2aMessage;
+  final?: boolean;
+};
+
+export type A2aTaskArtifactUpdateEvent = {
+  kind: "artifactUpdate";
+  taskId: string;
+  artifact: A2aArtifact;
+  index: number;
+};
+
+export type A2aSessionEvent = {
+  kind: "session";
+  sessionId: string;
+  contextId?: string;
+};
+
+export type A2aToolCallEvent = {
+  kind: "toolCall";
+  toolName: string;
+  toolId: string;
+  input: unknown;
+  status: "started" | "completed";
+  output?: unknown;
+  /** 递增序号，用于前端匹配 started/completed 事件（解决 toolId 不一致问题） */
+  toolSeq?: number;
+};
+
+export type A2aTodoItem = {
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+  activeForm?: string;
+};
+
+// AskUserQuestion 问题选项
+export type AskUserQuestionOption = {
+  label: string;
+  description: string;
+};
+
+// AskUserQuestion 单个问题
+export type AskUserQuestion = {
+  question: string;
+  header: string;
+  options: AskUserQuestionOption[];
+  multiSelect?: boolean;
+};
+
+// AskUserQuestion 事件 - 当 Claude 需要用户回答时发送
+export type A2aAskUserQuestionEvent = {
+  kind: "askUserQuestion";
+  requestId: string;
+  taskId: string;
+  questions: AskUserQuestion[];
+};
+
+// AskUserQuestion 回答格式
+export type AskUserQuestionAnswer = {
+  requestId: string;
+  taskId: string;
+  answers: Record<string, string>; // question -> selected label(s)
+};
+
+// AskUserQuestion 超时/取消事件 - 当问题超时或被取消时发送
+export type A2aQuestionDismissedEvent = {
+  kind: "questionDismissed";
+  requestId: string;
+  taskId: string;
+  reason: "timeout" | "cancelled";
+};
+
+// 子代理事件
+export type A2aSubagentEvent = {
+  kind: "subagent";
+  agentId: string;
+  agentType: string;
+  status: "started" | "stopped";
+};
+
+// 后台任务活动事件
+export type A2aBackgroundTaskActivity = {
+  jobId: string;
+  status: "queued" | "running" | "completed" | "failed" | "cancelled";
+  description?: string;
+  prompt?: string;
+  subagentType?: string;
+  parentTaskId?: string;
+  createdAt: number;
+  startedAt?: number;
+  finishedAt?: number;
+  result?: string;
+  error?: string;
+  sessionId?: string;
+};
+
+export type A2aTodoUpdateActivity = {
+  jobId: string;
+  todos: A2aTodoItem[];
+  updatedAt: number;
+};
+
+export type A2aDeliveryMessageActivity = {
+  jobId?: string;
+  text: string;
+  createdAt: number;
+  isDelta?: boolean;
+};
+
+export type A2aActivityEvent =
+  | {
+      id: number;
+      contextId: string;
+      kind: "backgroundTask";
+      data: A2aBackgroundTaskActivity;
+    }
+  | {
+      id: number;
+      contextId: string;
+      kind: "todoUpdate";
+      data: A2aTodoUpdateActivity;
+    }
+  | {
+      id: number;
+      contextId: string;
+      kind: "deliveryMessage";
+      data: A2aDeliveryMessageActivity;
+    };
+
+export type A2aActivityStreamResponse = {
+  kind: "activity";
+  activity: A2aActivityEvent;
+};
+
+export type A2aStreamResponse =
+  | { kind: "task"; task: A2aTask }
+  | { kind: "message"; message: A2aMessage }
+  | A2aSessionEvent
+  | { kind: "statusUpdate"; statusUpdate: A2aTaskStatusUpdateEvent }
+  | { kind: "artifactUpdate"; artifactUpdate: A2aTaskArtifactUpdateEvent }
+  | { kind: "toolCall"; toolCall: A2aToolCallEvent }
+  | { kind: "askUserQuestion"; askUserQuestion: A2aAskUserQuestionEvent }
+  | { kind: "questionDismissed"; questionDismissed: A2aQuestionDismissedEvent }
+  | { kind: "subagent"; subagent: A2aSubagentEvent };
+
+export type A2aSendMessageRequest = {
+  message: A2aMessage;
+  configuration?: {
+    blocking?: boolean;
+    historyLength?: number;
+    metadata?: Record<string, unknown>;
+  };
+};
+
+export type A2aError = {
+  error: {
+    code: string;
+    message: string;
+    details?: unknown;
+  };
+};