remotion-claude-agent-demo 0.1.0

package/apps/web/src/components/chat/ask-user-question-panel.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useState } from "react";
+import type { PendingQuestion } from "@/lib/chat/types";
+import { Check, HelpCircle } from "lucide-react";
+
+const OTHER_OPTION_KEY = "__other__";
+
+export function AskUserQuestionPanel({
+  pendingQuestion,
+  onSubmit,
+}: {
+  pendingQuestion: PendingQuestion;
+  onSubmit: (answers: Record<string, string>) => void;
+}) {
+  const [selectedAnswers, setSelectedAnswers] = useState<Record<string, string[]>>({});
+  const [customTexts, setCustomTexts] = useState<Record<string, string>>({});
+
+  const handleSelect = (questionText: string, label: string, multiSelect?: boolean) => {
+    setSelectedAnswers((prev) => {
+      const current = prev[questionText] || [];
+      if (multiSelect) {
+        if (current.includes(label)) {
+          return { ...prev, [questionText]: current.filter((l) => l !== label) };
+        }
+        return { ...prev, [questionText]: [...current, label] };
+      }
+      if (label !== OTHER_OPTION_KEY) {
+        setCustomTexts((prev) => ({ ...prev, [questionText]: "" }));
+      }
+      return { ...prev, [questionText]: [label] };
+    });
+  };
+
+  const handleCustomTextChange = (questionText: string, text: string) => {
+    setCustomTexts((prev) => ({ ...prev, [questionText]: text }));
+    setSelectedAnswers((prev) => {
+      const current = prev[questionText] || [];
+      if (!current.includes(OTHER_OPTION_KEY)) {
+        return { ...prev, [questionText]: [OTHER_OPTION_KEY] };
+      }
+      return prev;
+    });
+  };
+
+  const handleSubmit = () => {
+    const answers: Record<string, string> = {};
+    for (const q of pendingQuestion.questions) {
+      const selected = selectedAnswers[q.question] || [];
+      const finalAnswers = selected
+        .map((label) => (label === OTHER_OPTION_KEY ? customTexts[q.question] || "" : label))
+        .filter(Boolean);
+      answers[q.question] = finalAnswers.join(", ");
+    }
+    onSubmit(answers);
+  };
+
+  const allAnswered = pendingQuestion.questions.every((q) => {
+    const selected = selectedAnswers[q.question] || [];
+    if (selected.length === 0) return false;
+    if (selected.length === 1 && selected[0] === OTHER_OPTION_KEY) {
+      return (customTexts[q.question] || "").trim().length > 0;
+    }
+    return true;
+  });
+
+  return (
+    <div className="rounded-xl border-2 border-amber-200 dark:border-amber-800 bg-amber-50/50 dark:bg-amber-950/20 p-4 space-y-4 animate-in slide-in-from-bottom-2">
+      <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400">
+        <HelpCircle className="w-5 h-5" />
+        <span className="font-medium">Agent needs your input</span>
+      </div>
+
+      {pendingQuestion.questions.map((q, qIdx) => {
+        const isOtherSelected = (selectedAnswers[q.question] || []).includes(OTHER_OPTION_KEY);
+
+        return (
+          <div key={qIdx} className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium text-muted-foreground bg-muted px-2 py-0.5 rounded">
+                {q.header}
+              </span>
+              {q.multiSelect && <span className="text-xs text-muted-foreground">(multiple)</span>}
+            </div>
+            <p className="text-sm text-foreground font-medium">{q.question}</p>
+            <div className="grid gap-2">
+              {q.options.map((opt, optIdx) => {
+                const isSelected = (selectedAnswers[q.question] || []).includes(opt.label);
+                return (
+                  <button
+                    key={optIdx}
+                    type="button"
+                    onClick={() => handleSelect(q.question, opt.label, q.multiSelect)}
+                    className={`w-full text-left px-3 py-2 rounded-lg border transition-all ${
+                      isSelected
+                        ? "border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-amber-900/40"
+                        : "border-border hover:border-amber-300 dark:hover:border-amber-700 hover:bg-muted/50"
+                    }`}
+                  >
+                    <div className="flex items-start gap-2">
+                      <div
+                        className={`mt-0.5 w-4 h-4 rounded ${
+                          q.multiSelect ? "rounded" : "rounded-full"
+                        } border-2 flex items-center justify-center shrink-0 ${
+                          isSelected ? "border-amber-500 bg-amber-500" : "border-muted-foreground/40"
+                        }`}
+                      >
+                        {isSelected && <Check className="w-3 h-3 text-white" />}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-medium text-foreground">{opt.label}</div>
+                        <div className="text-xs text-muted-foreground">{opt.description}</div>
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+
+              <button
+                type="button"
+                onClick={() => handleSelect(q.question, OTHER_OPTION_KEY, q.multiSelect)}
+                className={`w-full text-left px-3 py-2 rounded-lg border transition-all ${
+                  isOtherSelected
+                    ? "border-amber-400 dark:border-amber-600 bg-amber-100 dark:bg-amber-900/40"
+                    : "border-border hover:border-amber-300 dark:hover:border-amber-700 hover:bg-muted/50"
+                }`}
+              >
+                <div className="flex items-start gap-2">
+                  <div
+                    className={`mt-0.5 w-4 h-4 rounded ${
+                      q.multiSelect ? "rounded" : "rounded-full"
+                    } border-2 flex items-center justify-center shrink-0 ${
+                      isOtherSelected
+                        ? "border-amber-500 bg-amber-500"
+                        : "border-muted-foreground/40"
+                    }`}
+                  >
+                    {isOtherSelected && <Check className="w-3 h-3 text-white" />}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-foreground">Other</div>
+                    <div className="text-xs text-muted-foreground">Enter custom answer</div>
+                  </div>
+                </div>
+              </button>
+
+              {isOtherSelected && (
+                <input
+                  type="text"
+                  value={customTexts[q.question] || ""}
+                  onChange={(e) => handleCustomTextChange(q.question, e.target.value)}
+                  placeholder="Enter your answer..."
+                  autoFocus
+                  className="w-full px-3 py-2 rounded-lg border border-amber-300 dark:border-amber-700 bg-background text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-amber-400/50"
+                />
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={handleSubmit}
+        disabled={!allAnswered}
+        className="w-full py-2 px-4 rounded-lg bg-amber-500 hover:bg-amber-600 text-white font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed enabled:cursor-pointer"
+      >
+        Submit
+      </button>
+    </div>
+  );
+}

package/apps/web/src/components/chat/session-sidebar.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import type { ChatSession } from "@/lib/state/chat-atoms";
+import {
+  Loader2,
+  MessageSquare,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+const DEFAULT_TITLE = "New session";
+
+export function SessionSidebar({
+  sessions,
+  currentSessionId,
+  isOpen,
+  onToggle,
+  onSelect,
+  onNew,
+  onDelete,
+}: {
+  sessions: ChatSession[];
+  currentSessionId: string | null;
+  isOpen: boolean;
+  onToggle: () => void;
+  onSelect: (sessionId: string) => void;
+  onNew: () => void;
+  onDelete: (sessionId: string) => void;
+}) {
+  const sortedSessions = [...sessions].sort(
+    (a, b) => b.updatedAt - a.updatedAt,
+  );
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    queueMicrotask(() => setMounted(true));
+  }, []);
+
+  return (
+    <aside
+      className={`
+        relative flex flex-col h-screen border-r border-border/50
+        bg-background/95 backdrop-blur-xl supports-backdrop-filter:bg-background/60
+        transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
+        will-change-[width]
+        ${isOpen ? "w-[280px]" : "w-[68px]"}
+      `}
+    >
+      {/* Header Section */}
+      <div className="flex flex-col shrink-0 pt-2 relative">
+        {/* Top Controls */}
+        <div className="flex items-center h-12 px-3 mb-2 relative shrink-0">
+          {/* Title (Only visible when open) */}
+          <div
+            className={`
+               font-semibold text-sm tracking-tight text-foreground/90 overflow-hidden whitespace-nowrap transition-all duration-300
+               ${isOpen ? "w-auto opacity-100 translate-x-0" : "w-0 opacity-0 -translate-x-4 pointer-events-none"}
+             `}
+          >
+            Sessions
+          </div>
+
+          {/* Toggle Button - Absolute positioning for smooth movement from Right to Center */}
+          <button
+            onClick={onToggle}
+            className={`
+              absolute flex h-8 w-8 items-center justify-center rounded-lg
+              hover:bg-muted/80 text-muted-foreground hover:text-foreground
+              transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
+              ${
+                isOpen
+                  ? "right-3 bg-transparent"
+                  : "left-1/2 -translate-x-1/2 bg-transparent"
+              }
+            `}
+            aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
+          >
+            {isOpen ? (
+              <PanelLeftClose className="h-4.5 w-4.5" />
+            ) : (
+              <PanelLeftOpen className="h-4.5 w-4.5" />
+            )}
+          </button>
+        </div>
+
+        {/* New Chat Button */}
+        <div className="px-3 pb-3">
+          <button
+            onClick={onNew}
+            className={`
+              group flex items-center
+              rounded-xl border transition-all duration-300 active:scale-[0.98] overflow-hidden
+              h-10 w-full
+              ${
+                isOpen
+                  ? "border-border/50 bg-background shadow-sm hover:shadow-md hover:border-border hover:bg-muted/30"
+                  : "border-transparent bg-transparent hover:bg-muted/50"
+              }
+            `}
+            title="New Chat"
+          >
+            {/* Stable Icon Wrapper */}
+            <div className="flex w-10 h-full shrink-0 items-center justify-center">
+              <Plus
+                className={`h-5 w-5 text-primary transition-transform duration-300 group-hover:rotate-90`}
+              />
+            </div>
+
+            {/* Text */}
+            <span
+              className={`
+                text-sm font-medium text-foreground/80 whitespace-nowrap overflow-hidden transition-all duration-300
+                ${isOpen ? "w-auto opacity-100 pr-4" : "w-0 opacity-0 pr-0"}
+              `}
+            >
+              New Chat
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div
+        className={`mx-4 h-px bg-border/40 mb-2 transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`}
+      />
+
+      {/* Session List */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4 space-y-2 scrollbar-none">
+        {mounted &&
+          sortedSessions.map((session) => {
+            const isActive = session.id === currentSessionId;
+            const isRunning =
+              session.isStreaming ||
+              session.subagentActivities?.some((a) => a.status === "running");
+            const title = session.title || DEFAULT_TITLE;
+
+            return (
+              <div
+                key={session.id}
+                onClick={() => onSelect(session.id)}
+                className={`
+                group relative flex items-center rounded-lg cursor-pointer
+                transition-all duration-200 ease-out border w-full
+                h-10 
+                ${
+                  isActive
+                    ? "bg-muted border-border/60 shadow-sm"
+                    : "border-transparent hover:bg-muted/50 hover:border-border/30"
+                }
+              `}
+                title={!isOpen ? title : undefined}
+              >
+                {/* Active Indicator */}
+                {isActive && (
+                  <div
+                    className={`
+                  absolute left-0 top-1/2 -translate-y-1/2 w-1 h-5 bg-primary rounded-r-full transition-all duration-300
+                  ${isOpen ? "-ml-3 opacity-0" : "-ml-3 opacity-100"} 
+                `}
+                  />
+                )}
+                {/* Indicator at -ml-3 (12px) aligns with px-3 padding edge perfectly */}
+
+                {/* Stable Icon Wrapper */}
+                <div
+                  className={`
+                flex w-10 h-full shrink-0 items-center justify-center transition-colors duration-300
+              `}
+                >
+                  {isRunning ? (
+                    <Loader2 className="h-4.5 w-4.5 text-blue-500 animate-spin" />
+                  ) : (
+                    <MessageSquare
+                      className={`
+                     h-4.5 w-4.5 transition-colors
+                     ${isActive ? "text-foreground" : "text-muted-foreground group-hover:text-foreground/80"}
+                   `}
+                    />
+                  )}
+                </div>
+
+                {/* Text Content */}
+                <div
+                  className={`
+                  flex flex-col flex-1 min-w-0 transition-opacity duration-200
+                  ${isOpen ? "opacity-100 pl-1" : "opacity-0 w-0 px-0 absolute pointer-events-none"}
+                `}
+                >
+                  <span
+                    className={`text-sm font-medium truncate leading-tight ${isActive ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"}`}
+                  >
+                    {title}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground/70 truncate pt-0.5">
+                    {new Date(session.updatedAt).toLocaleDateString()}
+                  </span>
+                </div>
+
+                {/* Actions (Expanded Only) */}
+                {isOpen && (
+                  <div className="flex items-center pr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete(session.id);
+                      }}
+                      className="p-1.5 rounded-md text-muted-foreground hover:text-red-500 hover:bg-red-500/10 transition-colors"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </aside>
+  );
+}

package/apps/web/src/components/chat/subagent-activity-sidebar.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { SubagentActivity } from "@/lib/chat/types";
+import { Activity, CheckCircle2, ChevronDown, ChevronRight, Circle, Clock, Loader2 } from "lucide-react";
+
+function getAgentTypeLabel(type: string) {
+  switch (type) {
+    case "perceiver":
+      return "Perceiver";
+    case "creator":
+      return "Creator";
+    case "crafter":
+      return "Crafter";
+    case "composer-agent":
+      return "Composer";
+    case "generalPurpose":
+      return "General";
+    case "explore":
+      return "Explorer";
+    case "background":
+      return "Background";
+    default:
+      return type;
+  }
+}
+
+function formatRunningTime(startedAt: number, now: number) {
+  const seconds = Math.floor((now - startedAt) / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+function SubagentActivityItem({
+  agent,
+  now,
+}: {
+  agent: SubagentActivity;
+  now: number;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isRunning = agent.status === "running";
+  const hasTodos = (agent.todos ?? []).length > 0;
+  const hasDetails = agent.prompt || agent.result || agent.description || hasTodos;
+  const todoStats = hasTodos
+    ? {
+        total: agent.todos?.length ?? 0,
+        completed: agent.todos?.filter((t) => t.status === "completed").length ?? 0,
+        inProgress: agent.todos?.filter((t) => t.status === "in_progress").length ?? 0,
+        pending: agent.todos?.filter((t) => t.status === "pending").length ?? 0,
+      }
+    : null;
+
+  return (
+    <div
+      className={`rounded-lg border overflow-hidden ${
+        isRunning
+          ? "border-violet-200 dark:border-violet-800 bg-violet-50/50 dark:bg-violet-950/20"
+          : "border-border bg-muted/30"
+      }`}
+    >
+      <button
+        type="button"
+        onClick={() => hasDetails && setExpanded((e) => !e)}
+        disabled={!hasDetails}
+        className={`w-full p-3 text-left ${hasDetails ? "enabled:cursor-pointer hover:bg-muted/50" : ""}`}
+      >
+        <div className="flex items-center gap-2">
+          {isRunning ? (
+            <Loader2 className="w-4 h-4 text-violet-500 animate-spin shrink-0" />
+          ) : (
+            <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
+          )}
+          <span
+            className={`text-sm font-medium ${isRunning ? "text-foreground" : "text-muted-foreground"}`}
+          >
+            {agent.description || getAgentTypeLabel(agent.agentType)}
+          </span>
+          <div className="flex-1" />
+          <span
+            className={`text-xs px-1.5 py-0.5 rounded ${
+              isRunning
+                ? "bg-violet-100 dark:bg-violet-900/40 text-violet-600 dark:text-violet-400"
+                : "bg-muted text-muted-foreground"
+            }`}
+          >
+            {getAgentTypeLabel(agent.agentType)}
+          </span>
+          {agent.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">
+              BG
+            </span>
+          )}
+          {hasDetails &&
+            (expanded ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+            ))}
+        </div>
+        <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+          <Clock className="w-3 h-3" />
+          <span>
+            {isRunning
+              ? formatRunningTime(agent.startedAt, now)
+              : agent.stoppedAt
+                ? formatRunningTime(agent.startedAt, agent.stoppedAt)
+                : "—"}
+          </span>
+          {todoStats && (
+            <>
+              <span className="opacity-50">·</span>
+              <span>{todoStats.completed}/{todoStats.total}</span>
+            </>
+          )}
+          <span className="opacity-50">·</span>
+          <span className="font-mono opacity-60">{agent.agentId.slice(0, 8)}</span>
+        </div>
+      </button>
+
+      {expanded && hasDetails && (
+        <div className="px-3 pb-3 pt-0 border-t border-border/50 space-y-2">
+          {hasTodos && (
+            <div className="text-xs">
+              <div className="font-medium text-muted-foreground mb-1">Todo</div>
+              <div className="space-y-1">
+                {agent.todos?.map((todo, idx) => (
+                  <div key={idx} className="flex items-start gap-2">
+                    {todo.status === "completed" ? (
+                      <CheckCircle2 className="w-3 h-3 text-emerald-500" />
+                    ) : todo.status === "in_progress" ? (
+                      <Clock className="w-3 h-3 text-violet-500" />
+                    ) : (
+                      <Circle className="w-3 h-3 text-muted-foreground" />
+                    )}
+                    <span
+                      className={`text-muted-foreground ${
+                        todo.status === "completed" ? "line-through opacity-70" : ""
+                      }`}
+                    >
+                      {todo.content}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {agent.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-24 overflow-y-auto whitespace-pre-wrap">
+                {agent.prompt.length > 300 ? agent.prompt.slice(0, 300) + "..." : agent.prompt}
+              </div>
+            </div>
+          )}
+          {agent.result && (
+            <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-32 overflow-y-auto whitespace-pre-wrap">
+                {agent.result.length > 500 ? agent.result.slice(0, 500) + "..." : agent.result}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function SubagentActivitySidebar({
+  activities,
+  isOpen,
+}: {
+  activities: SubagentActivity[];
+  isOpen: boolean;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  const runningAgents = activities.filter((a) => a.status === "running");
+  const stoppedAgents = activities.filter((a) => a.status === "stopped");
+  const hasRunning = runningAgents.length > 0;
+
+  useEffect(() => {
+    if (!hasRunning) return;
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [hasRunning]);
+
+  if (activities.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`fixed right-0 top-0 h-full w-96 bg-background border-l border-border shadow-lg z-10 transform transition-transform duration-300 ${
+        isOpen ? "translate-x-0" : "translate-x-full"
+      }`}
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex items-center gap-2 h-16 px-6 py-4 border-b border-border bg-background/80 backdrop-blur-md">
+          <Activity className="w-5 h-5 text-violet-500" />
+          <h2 className="text-sm font-semibold text-foreground">Subagent Activity</h2>
+          <div className="flex-1" />
+          {hasRunning && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-600 dark:text-violet-400">
+              {runningAgents.length} running
+            </span>
+          )}
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          {runningAgents.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                Running
+              </div>
+                {runningAgents.map((agent) => (
+                  <SubagentActivityItem key={agent.agentId} agent={agent} now={now} />
+                ))}
+            </div>
+          )}
+
+          {stoppedAgents.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                Completed
+              </div>
+              {stoppedAgents
+                .slice(-10)
+                .reverse()
+                .map((agent) => (
+                  <SubagentActivityItem key={agent.agentId} agent={agent} now={now} />
+                ))}
+            </div>
+          )}
+
+          {activities.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground">
+              <Activity className="w-8 h-8 mx-auto mb-2 opacity-30" />
+              <p className="text-sm">No subagent activity</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}