remotion-claude-agent-demo 0.1.0

package/apps/web/src/lib/state/chat-atoms.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { atom } from "jotai";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import type { ChatItem, PendingQuestion, SubagentActivity } from "@/lib/chat/types";
+
+export type ChatSession = {
+  id: string;
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+  contextId?: string;
+  sessionId?: string;
+  items: ChatItem[];
+  isStreaming: boolean;
+  error: string | null;
+  activeTaskId?: string;
+  pendingQuestion: PendingQuestion | null;
+  subagentActivities: SubagentActivity[];
+  inputDraft: string;
+};
+
+const fallbackStorage: Storage = {
+  getItem: () => null,
+  setItem: () => undefined,
+  removeItem: () => undefined,
+  clear: () => undefined,
+  key: () => null,
+  length: 0,
+};
+
+const getBrowserStorage = (): Storage =>
+  typeof window === "undefined" ? fallbackStorage : window.localStorage;
+
+const sessionsStorage = createJSONStorage<ChatSession[]>(getBrowserStorage);
+const idStorage = createJSONStorage<string | null>(getBrowserStorage);
+
+export const sessionsAtom = atomWithStorage<ChatSession[]>(
+  "a2a.sessions.v1",
+  [],
+  sessionsStorage,
+  { getOnInit: true },
+);
+export const currentSessionIdAtom = atomWithStorage<string | null>(
+  "a2a.currentSessionId.v1",
+  null,
+  idStorage,
+  { getOnInit: true },
+);
+
+export const leftSidebarOpenAtom = atom(true);
+export const rightSidebarOpenAtom = atom(false);

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

@@ -0,0 +1,9 @@
+import path from "path";
+
+export function getWorkspaceDir(): string {
+  const fromEnv = process.env.WORKSPACE_DIR;
+  if (fromEnv && fromEnv.trim().length > 0) {
+    return path.resolve(fromEnv);
+  }
+  return path.resolve(process.cwd(), "..", "..", "workspace");
+}

package/apps/web/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/bin/remotion-agent.js

@@ -0,0 +1,451 @@
+#!/usr/bin/env node
+"use strict";
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { spawn } = require("child_process");
+const readline = require("readline");
+
+const args = process.argv.slice(2);
+const packageRoot = path.resolve(__dirname, "..");
+
+function printHelp(exitCode = 0) {
+  const text = `remotion-agent - Remotion Claude Agent CLI
+
+Usage:
+  remotion-agent --help
+  remotion-agent config set workspace <path>
+  remotion-agent config show
+  remotion-agent env set <KEY> <VALUE>
+  remotion-agent env unset <KEY>
+  remotion-agent env list
+  remotion-agent init
+  remotion-agent web start [--workspace <path>] [--port <port>]
+
+Notes:
+  - 配置文件位于用户主目录下的 .remotion-claude-agent/config.json
+  - 默认 workspace 为当前命令执行目录 (pwd)
+  - 首次运行 web start 时会在终端引导输入 env
+`;
+  process.stdout.write(text);
+  process.exit(exitCode);
+}
+
+function isObject(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+function getConfigPath() {
+  return path.join(os.homedir(), ".remotion-claude-agent", "config.json");
+}
+
+function ensureConfigDir() {
+  fs.mkdirSync(path.dirname(getConfigPath()), { recursive: true });
+}
+
+function readConfig() {
+  const configPath = getConfigPath();
+  if (!fs.existsSync(configPath)) {
+    return { env: {} };
+  }
+  try {
+    const raw = fs.readFileSync(configPath, "utf8");
+    const parsed = JSON.parse(raw);
+    return {
+      workspace: typeof parsed.workspace === "string" ? parsed.workspace : undefined,
+      env: isObject(parsed.env) ? parsed.env : {},
+    };
+  } catch (error) {
+    process.stderr.write(
+      `Failed to read config at ${configPath}: ${error instanceof Error ? error.message : String(error)}\n`,
+    );
+    process.exit(1);
+  }
+}
+
+function writeConfig(config) {
+  ensureConfigDir();
+  const configPath = getConfigPath();
+  const data = {
+    ...(config.workspace ? { workspace: config.workspace } : {}),
+    env: config.env ?? {},
+  };
+  fs.writeFileSync(configPath, JSON.stringify(data, null, 2));
+}
+
+function promptInitialConfig() {
+  if (!process.stdin.isTTY) {
+    process.stderr.write(
+      "未检测到配置文件，且当前终端不可交互。请先运行 remotion-agent env set <KEY> <VALUE>。\n",
+    );
+    process.exit(1);
+  }
+
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const ask = (question) =>
+    new Promise((resolve) => {
+      rl.question(question, (answer) => resolve(answer));
+    });
+
+  const result = { workspace: "", env: {} };
+
+  return (async () => {
+    const wsInput = String(
+      await ask("首次运行：请输入 workspace 路径（回车使用当前目录）："),
+    ).trim();
+    result.workspace = wsInput ? path.resolve(wsInput) : process.cwd();
+
+  const envKeys = [
+    "ANTHROPIC_API_KEY",
+    "ANTHROPIC_BASE_URL",
+    "ANTHROPIC_DEFAULT_HAIKU_MODEL",
+    "ANTHROPIC_DEFAULT_OPUS_MODEL",
+    "ANTHROPIC_DEFAULT_SONNET_MODEL",
+    "ANTHROPIC_MODEL",
+    "ANTHROPIC_REASONING_MODEL",
+  ];
+
+  process.stdout.write("请输入环境变量（逐项输入，直接回车跳过）：\n");
+  for (const key of envKeys) {
+    const value = String(await ask(`${key}=`)).trim();
+    if (value) {
+      result.env[key] = value;
+    }
+  }
+
+    rl.close();
+
+    if (Object.keys(result.env).length === 0) {
+      process.stderr.write("未设置任何环境变量，已取消启动。请先设置 env。\n");
+      process.exit(1);
+    }
+
+    return result;
+  })();
+}
+
+function resolveWorkspace(input, config) {
+  const candidate = input || config.workspace || process.cwd();
+  return path.resolve(candidate);
+}
+
+function parseFlags(rest) {
+  const flags = {};
+  const positional = [];
+  for (let i = 0; i < rest.length; i += 1) {
+    const token = rest[i];
+    if (token === "--workspace") {
+      const value = rest[i + 1];
+      if (!value) {
+        process.stderr.write("--workspace requires a value\n");
+        process.exit(1);
+      }
+      flags.workspace = value;
+      i += 1;
+      continue;
+    }
+    if (token === "--port") {
+      const value = rest[i + 1];
+      if (!value) {
+        process.stderr.write("--port requires a value\n");
+        process.exit(1);
+      }
+      flags.port = value;
+      i += 1;
+      continue;
+    }
+    if (token === "--help" || token === "-h") {
+      printHelp(0);
+    }
+    positional.push(token);
+  }
+  return { flags, positional };
+}
+
+function copyDir(src, dest, options = {}) {
+  const shouldIgnore = options.shouldIgnore;
+  fs.mkdirSync(dest, { recursive: true });
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (shouldIgnore && shouldIgnore(srcPath, entry)) {
+      continue;
+    }
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, options);
+    } else if (entry.isSymbolicLink()) {
+      const link = fs.readlinkSync(srcPath);
+      fs.symlinkSync(link, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function makeReadOnly(targetPath) {
+  let stats;
+  try {
+    stats = fs.lstatSync(targetPath);
+  } catch {
+    return;
+  }
+  if (stats.isSymbolicLink()) return;
+  const mode = stats.mode & ~0o222;
+  try {
+    fs.chmodSync(targetPath, mode);
+  } catch {
+    // Ignore permission errors on platforms that do not fully support chmod
+  }
+}
+
+function setReadOnlyRecursive(targetPath) {
+  let stats;
+  try {
+    stats = fs.lstatSync(targetPath);
+  } catch {
+    return;
+  }
+  if (stats.isSymbolicLink()) return;
+  if (stats.isDirectory()) {
+    const entries = fs.readdirSync(targetPath);
+    for (const entry of entries) {
+      setReadOnlyRecursive(path.join(targetPath, entry));
+    }
+  }
+  makeReadOnly(targetPath);
+}
+
+function ensureClaudeWorkspace(workspaceDir) {
+  fs.mkdirSync(workspaceDir, { recursive: true });
+  const dest = path.join(workspaceDir, ".claude");
+  if (fs.existsSync(dest)) {
+    setReadOnlyRecursive(dest);
+    return;
+  }
+  const src = path.join(packageRoot, "templates", ".claude");
+  if (!fs.existsSync(src)) {
+    process.stderr.write(`Template not found: ${src}\n`);
+    process.exit(1);
+  }
+  copyDir(src, dest);
+  setReadOnlyRecursive(dest);
+}
+
+function getPackageVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(packageRoot, "package.json"), "utf8"));
+    return typeof pkg.version === "string" ? pkg.version : "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+function prepareWebRuntimeDir() {
+  const cacheRoot = path.join(os.homedir(), ".remotion-claude-agent");
+  const runtimeDir = path.join(cacheRoot, "web");
+  const marker = path.join(runtimeDir, ".version");
+  const version = getPackageVersion();
+  let needsCopy = true;
+  try {
+    if (fs.existsSync(marker)) {
+      const current = fs.readFileSync(marker, "utf8").trim();
+      if (current === version) {
+        needsCopy = false;
+      }
+    }
+  } catch {
+    needsCopy = true;
+  }
+
+  if (needsCopy) {
+    fs.rmSync(runtimeDir, { recursive: true, force: true });
+    fs.mkdirSync(runtimeDir, { recursive: true });
+    const src = path.join(packageRoot, "apps", "web");
+    if (!fs.existsSync(src)) {
+      process.stderr.write(`Web app not found: ${src}\n`);
+      process.exit(1);
+    }
+    copyDir(src, runtimeDir, {
+      shouldIgnore: (_srcPath, entry) => entry.name === "node_modules" || entry.name === ".next",
+    });
+    fs.writeFileSync(marker, version);
+  }
+
+  return runtimeDir;
+}
+
+function handleConfig(subcommand, rest) {
+  if (subcommand === "show") {
+    const config = readConfig();
+    process.stdout.write(`${JSON.stringify(config, null, 2)}\n`);
+    return;
+  }
+  if (subcommand === "set") {
+    if (rest[0] !== "workspace") {
+      process.stderr.write("Usage: remotion-agent config set workspace <path>\n");
+      process.exit(1);
+    }
+    const value = rest[1];
+    if (!value) {
+      process.stderr.write("Workspace path is required\n");
+      process.exit(1);
+    }
+    const config = readConfig();
+    config.workspace = path.resolve(value);
+    writeConfig(config);
+    process.stdout.write(`Workspace set to ${config.workspace}\n`);
+    return;
+  }
+  process.stderr.write("Usage: remotion-agent config set workspace <path>\n");
+  process.exit(1);
+}
+
+function handleEnv(subcommand, rest) {
+  const config = readConfig();
+  if (subcommand === "list") {
+    process.stdout.write(`${JSON.stringify(config.env ?? {}, null, 2)}\n`);
+    return;
+  }
+  if (subcommand === "set") {
+    const key = rest[0];
+    const value = rest[1];
+    if (!key || !value) {
+      process.stderr.write("Usage: remotion-agent env set <KEY> <VALUE>\n");
+      process.exit(1);
+    }
+    config.env = config.env ?? {};
+    config.env[String(key)] = String(value);
+    writeConfig(config);
+    process.stdout.write(`Environment variable ${key} saved\n`);
+    return;
+  }
+  if (subcommand === "unset") {
+    const key = rest[0];
+    if (!key) {
+      process.stderr.write("Usage: remotion-agent env unset <KEY>\n");
+      process.exit(1);
+    }
+    if (config.env && Object.prototype.hasOwnProperty.call(config.env, key)) {
+      delete config.env[key];
+      writeConfig(config);
+    }
+    process.stdout.write(`Environment variable ${key} removed\n`);
+    return;
+  }
+  process.stderr.write("Usage: remotion-agent env set <KEY> <VALUE>\n");
+  process.exit(1);
+}
+
+async function handleWeb(subcommand, rest) {
+  if (subcommand !== "start") {
+    process.stderr.write("Usage: remotion-agent web start [--workspace <path>] [--port <port>]\n");
+    process.exit(1);
+  }
+  const parsed = parseFlags(rest);
+  if (parsed.positional.length > 0) {
+    process.stderr.write("Unknown arguments: " + parsed.positional.join(" ") + "\n");
+    process.exit(1);
+  }
+  const configPath = getConfigPath();
+  let config = readConfig();
+  if (!fs.existsSync(configPath)) {
+    const init = await promptInitialConfig();
+    config = { workspace: init.workspace, env: init.env };
+    writeConfig(config);
+  }
+  const workspaceDir = resolveWorkspace(parsed.flags.workspace, config);
+  ensureClaudeWorkspace(workspaceDir);
+
+  const webDir = prepareWebRuntimeDir();
+
+  let nextBin;
+  try {
+    nextBin = require.resolve("next/dist/bin/next", { paths: [packageRoot] });
+  } catch (error) {
+    process.stderr.write("Next.js not found. Please reinstall the package.\n");
+    process.exit(1);
+  }
+
+  const portArgs = parsed.flags.port ? ["--port", String(parsed.flags.port)] : [];
+  const nodePathParts = [path.join(packageRoot, "node_modules"), process.env.NODE_PATH]
+    .filter(Boolean)
+    .join(path.delimiter);
+
+  const child = spawn(process.execPath, [nextBin, "dev", ...portArgs], {
+    cwd: webDir,
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      ...(config.env ?? {}),
+      WORKSPACE_DIR: workspaceDir,
+      NODE_PATH: nodePathParts,
+      NEXT_TELEMETRY_DISABLED: "1",
+    },
+  });
+
+  child.on("exit", (code) => {
+    process.exit(code ?? 0);
+  });
+}
+
+async function handleInit() {
+  const configPath = getConfigPath();
+  if (fs.existsSync(configPath)) {
+    if (!process.stdin.isTTY) {
+      process.stderr.write(
+        "配置文件已存在，且当前终端不可交互。请手动编辑或删除后重试。\n",
+      );
+      process.exit(1);
+    }
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    const answer = await new Promise((resolve) =>
+      rl.question("配置文件已存在，是否覆盖？(y/N): ", resolve),
+    );
+    rl.close();
+    if (!String(answer).trim().toLowerCase().startsWith("y")) {
+      process.stdout.write("已取消。\n");
+      process.exit(0);
+    }
+  }
+
+  const init = await promptInitialConfig();
+  const config = { workspace: init.workspace, env: init.env };
+  writeConfig(config);
+  process.stdout.write(`已写入配置: ${getConfigPath()}\n`);
+}
+
+async function main() {
+  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+    printHelp(0);
+  }
+
+  const [command, subcommand, ...rest] = args;
+  if (!command) {
+    printHelp(0);
+  }
+
+  switch (command) {
+    case "config":
+      handleConfig(subcommand, rest);
+      break;
+    case "env":
+      handleEnv(subcommand, rest);
+      break;
+    case "init":
+      await handleInit();
+      break;
+    case "web":
+      await handleWeb(subcommand, rest);
+      break;
+    default:
+      process.stderr.write(`Unknown command: ${command}\n`);
+      printHelp(1);
+  }
+}
+
+main().catch((error) => {
+  process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "remotion-claude-agent-demo",
+  "version": "0.1.0",
+  "description": "Remotion + Claude Agent local web UI",
+  "license": "MIT",
+  "bin": {
+    "remotion-agent": "bin/remotion-agent.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "bin/",
+    "apps/web/",
+    "templates/.claude/",
+    "README.md"
+  ],
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.19",
+    "@tailwindcss/postcss": "^4",
+    "@streamdown/cjk": "^1.0.1",
+    "@streamdown/code": "^1.0.1",
+    "@streamdown/math": "^1.0.1",
+    "@streamdown/mermaid": "^1.0.1",
+    "jotai": "^2.10.0",
+    "lucide-react": "^0.475.0",
+    "next": "16.1.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "streamdown": "^2.1.0",
+    "tailwindcss": "^4",
+    "zod": "^4.3.6"
+  }
+}

package/templates/.claude/CLAUDE.md

@@ -0,0 +1,95 @@
+# 主对话代理编排
+
+<project_definition>
+Role: 视频创作系统主协调者
+Mission: 编排三个核心阶段——感知 → 创作 → 执行，理解用户意图、澄清需求、在关键节点请求确认，并委派子代理执行具体任务。
+Scope: 产品教程 / Demo 演示 / SaaS 介绍类视频。
+</project_definition>
+
+<available_tools>
+
+- `Read`: 读取脚本、分镜、配置等
+- `Edit` / `Write`: 编写或调整委派说明、阶段产出
+- `AskUserQuestion`: 在关键节点请求用户确认
+- `Skill`: 技能与子代理（Perceiver / Creator / Crafter）
+- `mcp__background_tasks__start`: 后台任务（独立运行、并发）
+- `mcp__background_tasks__list`: 后台任务进度查询（状态 + Todo）
+- `Bash` / `Glob` / `Grep`: 必要时查找与检查产物
+  </available_tools>
+
+<rules>
+**CRITICAL RULES:**
+1. **不直接生成素材或渲染**，除非用户明确要求由主对话完成。
+2. **每个阶段完成后向用户汇报进度**。
+3. **子代理负责具体执行，编排决策由主对话负责**。
+4. **工作目录**：所有工具操作的工作目录为 workspace 根目录（由 `WORKSPACE_DIR` 指定；未设置时为启动命令时的 `pwd`）；若 `projects/` 目录不存在则先创建；生成的文件须保存到 `projects/` 子目录下。
+5. **只读约束**：`.claude` 目录为只读，严禁在运行时写入或修改；如需更新，请在代码仓库中修改模板并重新发布。
+6. **后台任务不等待**：启动后台任务后不要阻塞主流程，不要轮询或等待（例如 `sleep` / `while true` / `watch`），应直接继续对话并等待异步活动通知。
+7. **默认必须配音 + VTT 字幕**：除非用户明确表示不要配音/字幕，否则 Crafter 必须生成配音音频与 VTT。
+8. **时间线必须由字幕生成**：`timeline-config.ts` 必须由 VTT 自动生成，不允许手写时长作为最终来源。
+9. **音画字幕必须对齐**：Composer 渲染前必须通过音频-画面-字幕对齐检查；不通过则禁止渲染。
+</rules>
+
+<workflow>
+**编排流程**
+
+```
+用户需求
+    ↓
+1. Perceiver → 浏览器感知/录屏，获取内容理解
+    ↓
+2. Creator → 生成脚本、分镜、风格配置
+    ↓
+   [用户确认方案]
+    ↓
+3. Crafter → 协调素材下载、语音合成、视频渲染
+    ↓
+最终视频输出
+```
+
+**委派格式**
+
+```yaml
+delegate:
+  agent: "perceiver" | "creator" | "crafter"
+  task: string
+  inputs: object
+  checkpoint: boolean
+  background: boolean  # 是否转为后台并行执行（由主编排调用后台任务工具）
+```
+
+**并行执行优化**
+
+> ⚠️ **关键**：在 Crafter 阶段，配音、下载、录屏等任务互不依赖，**必须使用 `mcp__background_tasks__start` 并行执行**。
+
+```yaml
+# 正确做法：并行发起多个后台任务（返回 jobId）
+- mcp__background_tasks__start({ description: "配音生成", prompt: "...", subagent_type: "crafter" }) → job_id_1
+- mcp__background_tasks__start({ description: "素材下载", prompt: "...", subagent_type: "crafter" }) → job_id_2
+- mcp__background_tasks__start({ description: "录屏任务", prompt: "...", subagent_type: "crafter" }) → job_id_3
+# 任务完成后会通过活动事件流通知前端
+
+# 错误做法：串行等待（性能差）
+- 顺序执行配音 → 下载 → 录屏
+```
+
+**可并行的场景**：
+- Crafter 的素材生成（配音 + 下载 + 录屏 + BGM）
+- 多版本/多风格生成时的并行创作
+- 多 URL 页面的并行感知
+
+**子代理名称规则**：
+- `subagent_type` 必须与 workspace 根目录下 `.claude/agents/*.md` 的 `name` 对应
+- 当前可用：`perceiver` / `creator` / `crafter` / `composer-agent`
+
+**进度查询**：
+- 当用户询问后台任务进度，优先调用 `mcp__background_tasks__list` 汇总状态与 Todo（尽力而为）再回复。
+- `mcp__background_tasks__list` 返回后，仅输出 1–2 行简短摘要，不要复述 JSON。
+</workflow>
+
+<responsibilities>
+- 理解用户意图（产品教程 / Demo 演示 / SaaS 介绍）
+- 主动澄清：时长、风格、受众、素材来源
+- 在关键节点请求用户确认
+- 选择并委派合适的子代理执行任务
+</responsibilities>