remotion-claude-agent-demo 0.1.0

package/apps/web/src/app/page.tsx

@@ -0,0 +1,358 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useAtom } from "jotai";
+import { useA2AChat } from "@/lib/hooks/useA2AChat";
+import { AgentBlocks } from "@/components/chat/agent-blocks";
+import { AskUserQuestionPanel } from "@/components/chat/ask-user-question-panel";
+import { SubagentActivitySidebar } from "@/components/chat/subagent-activity-sidebar";
+import { SessionSidebar } from "@/components/chat/session-sidebar";
+import {
+  leftSidebarOpenAtom,
+  rightSidebarOpenAtom,
+} from "@/lib/state/chat-atoms";
+import {
+  Activity,
+  AlertCircle,
+  ArrowUp,
+  Plus,
+  Square,
+} from "lucide-react";
+
+export default function Home() {
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    queueMicrotask(() => setIsHydrated(true));
+  }, []);
+
+  if (!isHydrated) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background text-foreground font-sans">
+        <div className="text-sm text-muted-foreground">Loading sessions...</div>
+      </div>
+    );
+  }
+
+  return <HomeContent />;
+}
+
+function HomeContent() {
+  const {
+    sessions,
+    currentSessionId,
+    items,
+    isStreaming,
+    error,
+    send,
+    cancel,
+    contextId,
+    activeTaskId,
+    newSession,
+    switchSession,
+    deleteSession,
+    pendingQuestion,
+    submitAnswer,
+    subagentActivities,
+    inputDraft,
+    setInputDraft,
+  } = useA2AChat();
+  const [leftSidebarOpen, setLeftSidebarOpen] = useAtom(leftSidebarOpenAtom);
+  const [rightSidebarOpen, setRightSidebarOpen] = useAtom(rightSidebarOpenAtom);
+  const backgroundCountRef = useRef(0);
+  const lastSessionIdRef = useRef<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll with conversation flow (skip when AskUserQuestion panel is shown)
+  useEffect(() => {
+    if (pendingQuestion) return;
+    if (scrollRef.current) {
+      const scroller = scrollRef.current;
+      const sessionChanged = lastSessionIdRef.current !== currentSessionId;
+      if (sessionChanged) {
+        lastSessionIdRef.current = currentSessionId;
+      }
+      scroller.scrollTo({
+        top: scroller.scrollHeight - scroller.clientHeight,
+        behavior: sessionChanged ? "auto" : "smooth",
+      });
+    }
+  }, [currentSessionId, items, isStreaming, pendingQuestion]);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const backgroundCount = subagentActivities.filter(
+      (a) => a.isBackground,
+    ).length;
+    if (backgroundCount > backgroundCountRef.current) {
+      setTimeout(() => {
+        setRightSidebarOpen(true);
+      }, 100);
+    }
+    backgroundCountRef.current = backgroundCount;
+  }, [setRightSidebarOpen, subagentActivities]);
+
+  const TEXTAREA_MIN_H = 100;
+  const TEXTAREA_MAX_H = 140;
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    const h = Math.min(
+      Math.max(ta.scrollHeight, TEXTAREA_MIN_H),
+      TEXTAREA_MAX_H,
+    );
+    ta.style.height = `${h}px`;
+    ta.style.overflowY = "hidden";
+  }, [inputDraft]);
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if (isStreaming) return;
+    if (!inputDraft.trim()) return;
+    await send({ text: inputDraft });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (isStreaming) return;
+      handleSubmit();
+    }
+  };
+
+  const lastItem = items[items.length - 1];
+
+  return (
+    <div className="flex h-screen bg-background text-foreground font-sans">
+      <SessionSidebar
+        sessions={sessions}
+        currentSessionId={currentSessionId}
+        isOpen={leftSidebarOpen}
+        onToggle={() => setLeftSidebarOpen((open) => !open)}
+        onSelect={switchSession}
+        onNew={newSession}
+        onDelete={deleteSession}
+      />
+
+      {/* Subagent activity sidebar */}
+      <SubagentActivitySidebar
+        activities={subagentActivities}
+        isOpen={rightSidebarOpen}
+      />
+
+      <div
+        className={`flex flex-col flex-1 min-w-0 relative transition-all duration-300 ${
+          rightSidebarOpen && subagentActivities.length > 0 ? "mr-96" : ""
+        }`}
+      >
+        <header className="flex-none h-16 px-6 py-4 border-b border-border flex items-center justify-between bg-background/80 backdrop-blur-md sticky top-0 z-10 transition-colors duration-300">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="w-4 h-4 text-primary"
+              >
+                <path d="M6 17l5-5-5-5M13 17l5-5-5-5" />
+              </svg>
+            </div>
+            <h1 className="text-sm font-medium tracking-tight text-foreground">
+              Luci<span className="text-muted-foreground">.ai</span>
+            </h1>
+          </div>
+          <div className="flex items-center gap-3 text-xs font-mono text-muted-foreground">
+            {contextId && (
+              <div className="items-center gap-2 max-sm:hidden sm:flex px-2 py-1 rounded bg-muted border border-border">
+                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground" />
+                <span className="opacity-75">CTX:</span>
+                <span>{contextId.slice(0, 8)}</span>
+              </div>
+            )}
+            {activeTaskId && (
+              <div className="items-center gap-2 max-sm:hidden sm:flex px-2 py-1 rounded bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-100 dark:border-emerald-900/50 text-emerald-600 dark:text-emerald-400">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                <span className="opacity-75">TASK:</span>
+                <span>{activeTaskId.slice(0, 8)}</span>
+              </div>
+            )}
+            {/* Subagent activity toggle (in header, does not cover main UI) */}
+            {subagentActivities.length > 0 && (
+              <button
+                type="button"
+                onClick={() => setRightSidebarOpen((o) => !o)}
+                className="max-sm:hidden sm:flex items-center gap-2 px-2.5 py-1.5 rounded-full border border-border bg-background hover:bg-muted text-muted-foreground transition-all enabled:cursor-pointer"
+              >
+                {subagentActivities.some((a) => a.status === "running") && (
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75 animate-ping" />
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
+                  </span>
+                )}
+                <Activity className="w-3.5 h-3.5" />
+                <span className="font-sans font-medium">
+                  {subagentActivities.length} subagents
+                </span>
+              </button>
+            )}
+            <button
+              onClick={newSession}
+              disabled={isStreaming}
+              className="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-border bg-background hover:bg-muted text-muted-foreground transition-all enabled:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Plus className="w-3.5 h-3.5 group-hover:text-foreground transition-colors" />
+              <span className="font-sans font-medium group-hover:text-foreground transition-colors">
+                New Session
+              </span>
+            </button>
+          </div>
+        </header>
+
+        {error && (
+          <div className="flex-none bg-red-50 dark:bg-red-500/10 px-6 py-3 border-b border-red-100 dark:border-red-500/20 flex items-center gap-3 text-red-600 dark:text-red-400 text-sm animate-in slide-in-from-top-2">
+            <AlertCircle className="w-4 h-4 shrink-0" />
+            <span className="font-medium">{error}</span>
+          </div>
+        )}
+
+        <main
+          ref={scrollRef}
+          className="flex-1 overflow-y-auto p-4 sm:p-8 text-left"
+        >
+          {items.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center text-center select-none pointer-events-none">
+              <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6 border border-primary/20">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="w-8 h-8 text-primary"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path
+                    d="M10 8l6 4-6 4V8z"
+                    fill="currentColor"
+                    stroke="none"
+                  />
+                </svg>
+              </div>
+              <h2 className="text-lg font-medium text-foreground mb-2">
+                Ready to set your ideas in motion?
+              </h2>
+              <p className="text-sm text-muted-foreground max-w-xs">
+                {"I'm"} Luci. {"Let's"} turn your concepts into dynamic
+                Remotion video code.
+              </p>
+            </div>
+          ) : (
+            <>
+              {/* workany 布局：用户气泡在右，AI 回复在左，全文左对齐 */}
+              <div className="max-w-3xl mx-auto space-y-6 text-left">
+                {items.map((item) => (
+                  <div
+                    key={item.id}
+                    className={`w-full flex ${item.role === "user" ? "justify-end" : "justify-start"}`}
+                  >
+                    {item.role === "user" ? (
+                      <div className="rounded-lg bg-muted/80 border border-border px-4 py-3 max-w-[85%] sm:max-w-[75%]">
+                        <div className="text-sm leading-relaxed wrap-break-word text-foreground text-left">
+                          {item.text}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="min-w-0 w-full max-w-full">
+                        <AgentBlocks
+                          blocks={item.blocks}
+                          isLastAgent={
+                            isStreaming &&
+                            lastItem?.role === "agent" &&
+                            lastItem.id === item.id
+                          }
+                          isStreaming={isStreaming}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {isStreaming && lastItem?.role === "user" && (
+                  <div className="flex items-center gap-1.5 justify-start">
+                    <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.3s]" />
+                    <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.15s]" />
+                    <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" />
+                  </div>
+                )}
+
+                {/* AskUserQuestion 面板 */}
+                {pendingQuestion && (
+                  <AskUserQuestionPanel
+                    pendingQuestion={pendingQuestion}
+                    onSubmit={submitAnswer}
+                  />
+                )}
+              </div>
+              <div className="h-4" />
+            </>
+          )}
+        </main>
+
+        <footer className="flex-none p-4 sm:p-6 bg-background border-t border-border">
+          <div className="max-w-3xl mx-auto">
+            <form
+              onSubmit={handleSubmit}
+              className="flex items-end gap-2 rounded-2xl border border-border/40 bg-muted/40 transition-[border-color,box-shadow] focus-within:border-border/60 focus-within:ring-1 focus-within:ring-ring/20"
+            >
+              <textarea
+                ref={textareaRef}
+                value={inputDraft}
+                onChange={(e) => setInputDraft(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Type a message..."
+                rows={1}
+                className="min-w-0 flex-1 resize-none border-0 bg-transparent px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+                style={{
+                  minHeight: TEXTAREA_MIN_H,
+                  maxHeight: TEXTAREA_MAX_H,
+                  overflowY: "hidden",
+                }}
+                autoComplete="off"
+              />
+              <button
+                type={isStreaming ? "button" : "submit"}
+                onClick={isStreaming ? cancel : undefined}
+                disabled={!inputDraft.trim() && !isStreaming}
+                className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl transition-colors mr-2 mb-2 enabled:cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed enabled:hover:opacity-90 enabled:active:scale-95 ${
+                  isStreaming
+                    ? "bg-muted text-muted-foreground"
+                    : inputDraft.trim()
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted/60 text-muted-foreground"
+                }`}
+              >
+                {isStreaming ? (
+                  <Square className="h-4 w-4 fill-current" />
+                ) : (
+                  <ArrowUp className="h-4 w-4" />
+                )}
+              </button>
+            </form>
+            <p className="mt-2 text-center text-[10px] text-muted-foreground">
+              AI can make mistakes. Please verify important information.
+            </p>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/apps/web/src/app/tasks/[taskId]/cancel/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+import type { A2aError } from "@/lib/a2a/types";
+import { requestCancel } from "@/lib/a2a/task-store";
+import { getEnv } from "@/lib/env";
+
+export const runtime = "nodejs";
+
+export async function POST(_req: Request, ctx: { params: Promise<{ taskId: string }> }) {
+  const env = getEnv();
+  const { taskId } = await ctx.params;
+  const task = requestCancel(taskId);
+
+  if (!task) {
+    return NextResponse.json(
+      { error: { code: "TaskNotFoundError", message: "Task not found" } } satisfies A2aError,
+      { status: 404, headers: { "Content-Type": "application/a2a+json", "A2A-Version": env.a2aVersion } },
+    );
+  }
+
+  return NextResponse.json(task, {
+    headers: { "Content-Type": "application/a2a+json", "A2A-Version": env.a2aVersion },
+  });
+}

package/apps/web/src/app/tasks/[taskId]/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+import type { A2aError } from "@/lib/a2a/types";
+import { getTask } from "@/lib/a2a/task-store";
+import { getEnv } from "@/lib/env";
+
+export const runtime = "nodejs";
+
+export async function GET(_req: Request, ctx: { params: Promise<{ taskId: string }> }) {
+  const env = getEnv();
+  const { taskId } = await ctx.params;
+
+  const task = getTask(taskId);
+  if (!task) {
+    return NextResponse.json(
+      { error: { code: "TaskNotFoundError", message: "Task not found" } } satisfies A2aError,
+      { status: 404, headers: { "Content-Type": "application/a2a+json", "A2A-Version": env.a2aVersion } },
+    );
+  }
+
+  return NextResponse.json(task, {
+    headers: { "Content-Type": "application/a2a+json", "A2A-Version": env.a2aVersion },
+  });
+}

package/apps/web/src/app/tasks/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+
+import { listTasks } from "@/lib/a2a/task-store";
+import { getEnv } from "@/lib/env";
+
+export const runtime = "nodejs";
+
+export async function GET() {
+  const env = getEnv();
+  return NextResponse.json(listTasks(), {
+    headers: { "Content-Type": "application/a2a+json", "A2A-Version": env.a2aVersion },
+  });
+}

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

@@ -0,0 +1,111 @@
+"use client";
+
+import type { AgentBlock, AgentToolBlock } from "@/lib/chat/types";
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { cjk } from "@streamdown/cjk";
+import { mermaid } from "@streamdown/mermaid";
+import { math } from "@streamdown/math";
+import { TaskBlock, ToolBlock, ToolGroupBlock } from "@/components/chat/tool-blocks";
+
+export type RenderSegment =
+  | { type: "text"; text: string; textIdx: number }
+  | { type: "toolGroup"; tools: AgentToolBlock[]; startIdx: number }
+  | { type: "task"; task: AgentToolBlock; idx: number }
+  | { type: "standaloneTool"; tool: AgentToolBlock; idx: number };
+
+const STANDALONE_TOOLS = ["Task", "TodoWrite", "mcp__background_tasks__start"];
+
+function groupBlocks(blocks: AgentBlock[]): RenderSegment[] {
+  const out: RenderSegment[] = [];
+  let textIdx = 0;
+  for (let i = 0; i < blocks.length; i++) {
+    const b = blocks[i];
+    if (b.kind === "text") {
+      out.push({ type: "text", text: b.text, textIdx: textIdx++ });
+      continue;
+    }
+    if (STANDALONE_TOOLS.includes(b.toolName)) {
+      if (b.toolName === "Task" || b.toolName === "TodoWrite") {
+        out.push({ type: "task", task: b, idx: i });
+      } else {
+        out.push({ type: "standaloneTool", tool: b, idx: i });
+      }
+      continue;
+    }
+    const tools: AgentToolBlock[] = [b];
+    while (
+      i + 1 < blocks.length &&
+      blocks[i + 1].kind === "tool" &&
+      !STANDALONE_TOOLS.includes((blocks[i + 1] as AgentToolBlock).toolName)
+    ) {
+      tools.push(blocks[++i] as AgentToolBlock);
+    }
+    out.push({ type: "toolGroup", tools, startIdx: i - tools.length + 1 });
+  }
+  return out;
+}
+
+export function AgentBlocks({
+  blocks,
+  isLastAgent,
+  isStreaming,
+}: {
+  blocks: AgentBlock[];
+  isLastAgent: boolean;
+  isStreaming: boolean;
+}) {
+  if (blocks.length === 0) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.3s]" />
+        <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.15s]" />
+        <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" />
+      </div>
+    );
+  }
+
+  const segments = groupBlocks(blocks);
+  const lastBlock = blocks[blocks.length - 1];
+
+  return (
+    <div className="space-y-3">
+      {segments.map((seg, segIdx) => {
+        if (seg.type === "text") {
+          const isAnimating =
+            isStreaming &&
+            isLastAgent &&
+            lastBlock?.kind === "text" &&
+            segIdx === segments.length - 1;
+          return (
+            <div
+              key={`text-${seg.textIdx}`}
+              className="text-sm leading-relaxed wrap-break-word text-foreground"
+            >
+              {seg.text ? (
+                <Streamdown plugins={{ code, cjk, mermaid, math }} isAnimating={isAnimating}>
+                  {seg.text}
+                </Streamdown>
+              ) : (
+                <span className="animate-pulse inline-block w-2 h-4 bg-muted rounded" />
+              )}
+            </div>
+          );
+        }
+        if (seg.type === "task") {
+          return <TaskBlock key={`task-${seg.idx}`} block={seg.task} />;
+        }
+        if (seg.type === "standaloneTool") {
+          return <ToolBlock key={`tool-${seg.idx}`} block={seg.tool} />;
+        }
+        return (
+          <ToolGroupBlock
+            key={`toolGroup-${seg.startIdx}`}
+            tools={seg.tools}
+            startIdx={seg.startIdx}
+          />
+        );
+      })}
+    </div>
+  );
+}