@seqyuan/annodex 0.1.11 → 0.1.12

package/components/ChatWindow.tsx

@@ -0,0 +1,576 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AgentMessage, SessionInfo } from "@/lib/types";
+import { MessageView } from "./MessageView";
+import { ChatInput, type ChatInputHandle } from "./ChatInput";
+import { ChatMinimap, useMessageRefs } from "./ChatMinimap";
+import { SubagentPanel, extractSubagentRuns } from "./SubagentPanel";
+import { useAgentSession, type AgentPhase } from "@/hooks/useAgentSession";
+import { useAudio } from "@/hooks/useAudio";
+import { useDragDrop } from "@/hooks/useDragDrop";
+import { parseReportUpdates } from "@/lib/report-update-parser";
+import { APP_NAME } from "@/lib/brand";
+import { mergeSubagentRuns } from "@/lib/subagent-progress";
+
+interface Props {
+  session: SessionInfo | null;
+  newSessionCwd: string | null;
+  onAgentEnd?: () => void;
+  onSessionCreated?: (session: SessionInfo) => void;
+  onSessionForked?: (newSessionId: string) => void;
+  modelsRefreshKey?: number;
+  chatInputRef?: React.RefObject<ChatInputHandle | null>;
+  onSystemPromptChange?: (prompt: string | null) => void;
+  onSessionStatsChange?: (stats: { tokens: { input: number; output: number; cacheRead: number; cacheWrite: number }; cost?: number } | null) => void;
+  onContextUsageChange?: (usage: { percent: number | null; contextWindow: number; tokens: number | null } | null) => void;
+  onReportUpdated?: () => void;
+  generativeUI?: boolean;
+}
+
+function phaseLabel(phase: AgentPhase): string {
+  if (phase?.kind === "running_tools") {
+    const names = phase.tools.map((t) => t.name);
+    if (names.length === 0) return "Running tool...";
+    if (names.length === 1) return `Running ${names[0]}...`;
+    if (names.length <= 3) return `Running ${names.join(", ")}...`;
+    return `Running ${names.slice(0, 2).join(", ")} (+${names.length - 2})...`;
+  }
+  if (phase?.kind === "waiting_model") return "Waiting for model...";
+  return "Thinking...";
+}
+
+const TYPEWRITER_PHRASES = [
+  "annotate and analyze.",
+  "vibe code bioinformatics.",
+  "turn data into figures.",
+  "inspect your project.",
+  "build a reproducible report.",
+  "summarize that paper.",
+  "review the pipeline.",
+  "compare markers.",
+  "draft methods.",
+  "find the next analysis step.",
+];
+
+const BIO_ANALYSIS_RE = /\b(seurat|scanpy|single[- ]cell|scrna|sc[- ]rna|rna[- ]seq|transcriptom|gene|genes|marker|cell type|cluster|clustering|umap|tsne|pca|qc|mitochondrial|percent\.mt|nfeature|ncount|deg|differential expression|go enrichment|kegg|reactome|pathway|gsea|volcano|heatmap|h5ad|rds|loom|mtx|fastq|bam|vcf|counts?|expression|annotation|doublet|batch|integration|harmony|scvi)\b|生信|单细胞|转录组|基因|表达矩阵|差异表达|富集|通路|聚类|细胞类型|细胞注释|质控|线粒体|标记基因|火山图|热图/i;
+const OUTPUT_SUMMARY_RE = /(?:^|[\s(["'`])(?:\.{1,2}\/|\/|~\/)?[A-Za-z0-9_.@+\-/\\]+\/\s*(?:[:：-]|[0-9]+|含|共|files?|个文件|PDFs?|PNGs?|输出|output|results?)/im;
+const FILE_OUTPUT_RE = /\.(?:csv|tsv|xlsx|xls|pdf|png|jpg|jpeg|svg|html|r|R|py|rds|h5ad|loom|mtx|tsv\.gz|csv\.gz)\b/i;
+
+function Typewriter({ phrases }: { phrases: string[] }) {
+  const [phraseIdx, setPhraseIdx] = useState(() => Math.floor(Math.random() * phrases.length));
+  const [text, setText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  const [caretOn, setCaretOn] = useState(true);
+
+  useEffect(() => {
+    const blink = setInterval(() => setCaretOn((v) => !v), 530);
+    return () => clearInterval(blink);
+  }, []);
+
+  useEffect(() => {
+    const current = phrases[phraseIdx];
+    let timeout: ReturnType<typeof setTimeout>;
+    if (!deleting && text === current) {
+      timeout = setTimeout(() => setDeleting(true), 1800);
+    } else if (deleting && text === "") {
+      setDeleting(false);
+      setPhraseIdx((i) => (i + 1) % phrases.length);
+    } else {
+      const next = deleting ? current.slice(0, text.length - 1) : current.slice(0, text.length + 1);
+      timeout = setTimeout(() => setText(next), deleting ? 28 : 55);
+    }
+    return () => clearTimeout(timeout);
+  }, [text, deleting, phraseIdx, phrases]);
+
+  return (
+    <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>
+      {text}
+      <span style={{ opacity: caretOn ? 1 : 0, color: "var(--accent)", marginLeft: 1 }}>▍</span>
+    </span>
+  );
+}
+
+function getMessageText(message: AgentMessage): string {
+  const content = message.content;
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content.map((block) => {
+    if (block.type === "text") return block.text;
+    if (block.type === "toolCall") return `${block.toolName} ${JSON.stringify(block.input)}`;
+    return "";
+  }).join("\n");
+}
+
+function getLastUserTopic(messages: AgentMessage[]): string {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role !== "user") continue;
+    const text = getMessageText(messages[i]).replace(/\s+/g, " ").trim();
+    if (text) return text.slice(0, 90);
+  }
+  return "Current bioinformatics analysis";
+}
+
+function getCurrentTurnMessages(messages: AgentMessage[]): AgentMessage[] {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === "user") return messages.slice(i);
+  }
+  return messages;
+}
+
+function shouldGenerateAnalysisReport(messages: AgentMessage[]): boolean {
+  if (messages.length === 0) return false;
+  const text = messages.map(getMessageText).join("\n");
+  if (!BIO_ANALYSIS_RE.test(text)) return false;
+  return FILE_OUTPUT_RE.test(text) || OUTPUT_SUMMARY_RE.test(text) || /\b(saved|wrote|created|exported|generated|output|result)\b|输出|生成|保存|文件/.test(text);
+}
+
+export function ChatWindow({ session, newSessionCwd, onAgentEnd, onSessionCreated, onSessionForked, modelsRefreshKey, chatInputRef, onSystemPromptChange, onSessionStatsChange, onContextUsageChange, onReportUpdated, generativeUI }: Props) {
+  const {
+    data, loading, error, messages, entryIds, streamState,
+    agentRunning, modelNames, modelList, modelThinkingLevels, modelThinkingLevelMaps, toolPreset, thinkingLevel,
+    retryInfo, contextUsage, forkingEntryId,
+    isCompacting, compactError, displayModel: displayModelValue, sessionStats,
+    agentPhase, agentError, subagentRuns: runtimeSubagentRuns,
+    isNew,
+    messagesEndRef, scrollContainerRef,
+    lastUserMsgRef,
+    handleSend, handleAbort, handleFork, handleModelChange,
+    handleCompact, handleAbortCompaction,
+    handleToolPresetChange, handleThinkingLevelChange, handleAgentEventRef,
+  } = useAgentSession({
+    session, newSessionCwd, onAgentEnd, onSessionCreated, onSessionForked,
+    modelsRefreshKey, onSystemPromptChange,
+  });
+
+  const { soundEnabled, onSoundToggle, playDoneSound } = useAudio();
+  const playDoneSoundRef = useRef(playDoneSound);
+  playDoneSoundRef.current = playDoneSound;
+  const soundEnabledRef = useRef(soundEnabled);
+  soundEnabledRef.current = soundEnabled;
+
+  // Wrap agent event handler to play sound on agent_end
+  const origHandler = handleAgentEventRef.current;
+  useEffect(() => {
+    handleAgentEventRef.current = (event) => {
+      if (event.type === "agent_end" && soundEnabledRef.current) {
+        playDoneSoundRef.current();
+      }
+      origHandler?.(event);
+    };
+  }, [origHandler, handleAgentEventRef]);
+
+  // Push session stats up to AppShell for the top bar.
+  // Compare scalar fields to avoid loops from new object identity each render.
+  const statsKey = sessionStats
+    ? `${sessionStats.tokens.input}|${sessionStats.tokens.output}|${sessionStats.tokens.cacheRead}|${sessionStats.tokens.cacheWrite}|${sessionStats.cost ?? 0}`
+    : null;
+  const sessionStatsRef = useRef(sessionStats);
+  sessionStatsRef.current = sessionStats;
+  useEffect(() => {
+    onSessionStatsChange?.(sessionStatsRef.current);
+  }, [statsKey, onSessionStatsChange]);
+  useEffect(() => () => { onSessionStatsChange?.(null); }, [onSessionStatsChange]);
+
+  // Push context usage up to AppShell as well.
+  const ctxKey = contextUsage
+    ? `${contextUsage.percent ?? "null"}|${contextUsage.contextWindow}|${contextUsage.tokens ?? "null"}`
+    : null;
+  const contextUsageRef = useRef(contextUsage);
+  contextUsageRef.current = contextUsage;
+  useEffect(() => {
+    onContextUsageChange?.(contextUsageRef.current);
+  }, [ctxKey, onContextUsageChange]);
+  useEffect(() => () => { onContextUsageChange?.(null); }, [onContextUsageChange]);
+
+  const onDrop = useCallback((files: File[]) => {
+    chatInputRef?.current?.addFiles(files);
+  }, [chatInputRef]);
+
+  const { isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDrop } = useDragDrop(onDrop);
+  const visibleMessages = messages.filter((m) => m.role === "user" || m.role === "assistant");
+  const messageRefs = useMessageRefs(visibleMessages.length);
+  const appliedReportUpdatesRef = useRef<Set<string>>(new Set());
+  const generatedReportTopicsRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    appliedReportUpdatesRef.current.clear();
+    generatedReportTopicsRef.current.clear();
+  }, [session?.id]);
+
+  useEffect(() => {
+    if (!session?.id || agentRunning || streamState.isStreaming) return;
+    const updates = messages.flatMap((message) => {
+      if (message.role !== "assistant") return [];
+      const blocks = Array.isArray(message.content) ? message.content : [];
+      return blocks.flatMap((block) => {
+        if (block.type !== "text") return [];
+        return parseReportUpdates(block.text);
+      });
+    });
+    for (const parsed of updates) {
+      const key = `${session.id}:${parsed.raw}`;
+      if (appliedReportUpdatesRef.current.has(key)) continue;
+      appliedReportUpdatesRef.current.add(key);
+      fetch(`/api/reports/${encodeURIComponent(session.id)}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "apply_update", update: parsed.update, updateKey: parsed.raw }),
+      })
+        .then((res) => {
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          onReportUpdated?.();
+        })
+        .catch(() => {
+          appliedReportUpdatesRef.current.delete(key);
+        });
+    }
+  }, [agentRunning, messages, onReportUpdated, session?.id, streamState.isStreaming]);
+
+  useEffect(() => {
+    if (!session?.id || agentRunning || streamState.isStreaming) return;
+    const currentTurnMessages = getCurrentTurnMessages(messages);
+    const assistantText = currentTurnMessages
+      .filter((message) => message.role === "assistant")
+      .map(getMessageText)
+      .join("\n");
+    if (parseReportUpdates(assistantText).length > 0) return;
+    if (!shouldGenerateAnalysisReport(currentTurnMessages)) return;
+
+    const topic = getLastUserTopic(messages);
+    const key = `${session.id}:latest:${topic}`;
+    if (generatedReportTopicsRef.current.has(key)) return;
+    generatedReportTopicsRef.current.add(key);
+    fetch(`/api/reports/${encodeURIComponent(session.id)}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "generate", topic }),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        onReportUpdated?.();
+      })
+      .catch(() => {
+        generatedReportTopicsRef.current.delete(key);
+      });
+  }, [agentRunning, messages, onReportUpdated, session?.id, streamState.isStreaming]);
+
+  const isEmptyNew = isNew && messages.length === 0 && !streamState.isStreaming && !agentRunning;
+
+  const [subagentPanelOpen, setSubagentPanelOpen] = useState(false);
+  const subagentRuns = mergeSubagentRuns(extractSubagentRuns(messages), runtimeSubagentRuns);
+  const activeSubagentCount = subagentRuns.filter((run) => run.status === "running" || run.status === "pending").length;
+
+  useEffect(() => {
+    if (subagentRuns.length === 0 && subagentPanelOpen) {
+      setSubagentPanelOpen(false);
+    }
+  }, [subagentRuns.length, subagentPanelOpen]);
+
+  const availableThinkingLevels = displayModelValue
+    ? (modelThinkingLevels[`${displayModelValue.provider}:${displayModelValue.modelId}`] ?? null)
+    : null;
+
+  const currentThinkingLevelMap = displayModelValue
+    ? (modelThinkingLevelMaps[`${displayModelValue.provider}:${displayModelValue.modelId}`] ?? null)
+    : null;
+
+  const chatInputElement = (
+    <ChatInput
+      ref={chatInputRef}
+      onSend={handleSend}
+      onAbort={handleAbort}
+      isStreaming={agentRunning}
+      model={displayModelValue}
+      modelNames={modelNames}
+      modelList={modelList}
+      onModelChange={handleModelChange}
+      onCompact={session || isNew ? handleCompact : undefined}
+      onAbortCompaction={handleAbortCompaction}
+      isCompacting={isCompacting}
+      compactError={compactError}
+      toolPreset={toolPreset}
+      onToolPresetChange={session || isNew ? handleToolPresetChange : undefined}
+      thinkingLevel={thinkingLevel}
+      onThinkingLevelChange={session || isNew ? handleThinkingLevelChange : undefined}
+      availableThinkingLevels={availableThinkingLevels}
+      thinkingLevelMap={currentThinkingLevelMap}
+      retryInfo={retryInfo}
+      soundEnabled={soundEnabled}
+      onSoundToggle={onSoundToggle}
+    />
+  );
+
+  const handleWidgetSendMessage = useCallback((content: string) => {
+    if (agentRunning) {
+      chatInputRef?.current?.insertText(content);
+    } else {
+      void handleSend(content);
+    }
+  }, [agentRunning, chatInputRef, handleSend]);
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center text-text-muted">
+        Loading session...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center text-red-400">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="relative flex h-full flex-col overflow-hidden"
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {isDragOver && (
+        <div className="pointer-events-none absolute inset-0 z-50 flex animate-[drop-zone-in_0.15s_ease_both] items-center justify-center bg-[rgba(37,99,235,0.06)] backdrop-blur-[1px]">
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            {[0, 0.8, 1.6].map((delay) => (
+              <div
+                key={delay}
+                className="absolute h-[720px] w-[720px] rounded-full border-[1.5px] border-solid border-[rgba(37,99,235,0.5)] animate-[drop-ripple_2.4s_ease-out_infinite_backwards]"
+                style={{ transformOrigin: "center", animationDelay: `${delay}s` }}
+              />
+            ))}
+          </div>
+          <svg
+            width="280" height="280" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg"
+            className="drop-shadow-[0_6px_18px_rgba(37,99,235,0.18)]"
+          >
+            <rect x="28" y="44" width="84" height="60" rx="8" fill="rgba(37,99,235,0.08)" stroke="rgba(37,99,235,0.50)" strokeWidth="1.8"/>
+            <path d="M36 100 L54 72 L68 88 L80 74 L104 100Z" fill="rgba(37,99,235,0.16)" stroke="rgba(37,99,235,0.40)" strokeWidth="1.4" strokeLinejoin="round"/>
+            <circle cx="96" cy="58" r="8" fill="rgba(37,99,235,0.22)" stroke="rgba(37,99,235,0.55)" strokeWidth="1.6"/>
+            <g stroke="rgba(37,99,235,0.45)" strokeWidth="1.4" strokeLinecap="round">
+              <line x1="96" y1="46" x2="96" y2="43"/>
+              <line x1="96" y1="70" x2="96" y2="73"/>
+              <line x1="84" y1="58" x2="81" y2="58"/>
+              <line x1="108" y1="58" x2="111" y2="58"/>
+              <line x1="87.5" y1="49.5" x2="85.4" y2="47.4"/>
+              <line x1="104.5" y1="66.5" x2="106.6" y2="68.6"/>
+              <line x1="104.5" y1="49.5" x2="106.6" y2="47.4"/>
+              <line x1="87.5" y1="66.5" x2="85.4" y2="68.6"/>
+            </g>
+          </svg>
+        </div>
+      )}
+
+      {isEmptyNew ? (
+        <div className="flex flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-8">
+          <div className="w-full max-w-[820px]">
+            <div
+              className="mb-3"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                marginLeft: 16,
+                marginRight: 52,
+                fontFamily: "var(--font-mono)",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "baseline", gap: 10, minWidth: 0, flex: 1, lineHeight: 1.4 }}>
+                <span style={{ fontSize: 23, color: "var(--text)", fontWeight: 750, letterSpacing: 0 }}>{APP_NAME}</span>
+                <span style={{ fontSize: 14, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
+                  <Typewriter phrases={TYPEWRITER_PHRASES} />
+                </span>
+              </div>
+              <div style={{ flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "flex-end", minHeight: 22 }}>
+                <span style={{ fontSize: 11, color: "var(--text-dim)", whiteSpace: "nowrap" }}>
+                  v{process.env.NEXT_PUBLIC_APP_VERSION ?? "0.0.0"}
+                </span>
+              </div>
+            </div>
+            {chatInputElement}
+          </div>
+        </div>
+      ) : (
+      <>
+      <div className="relative flex flex-1 overflow-hidden">
+        <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-4 [scrollbar-width:none]">
+          <div className="mx-auto max-w-[820px] px-4">
+
+            {(() => {
+              const toolResultsMap = new Map<string, import("@/lib/types").ToolResultMessage>();
+              for (const msg of messages) {
+                if (msg.role === "toolResult") {
+                  toolResultsMap.set((msg as import("@/lib/types").ToolResultMessage).toolCallId, msg as import("@/lib/types").ToolResultMessage);
+                }
+              }
+              let lastUserIdx = -1;
+              for (let i = messages.length - 1; i >= 0; i--) {
+                if (messages[i].role === "user") { lastUserIdx = i; break; }
+              }
+              let refIdx = 0;
+              return messages.map((msg, idx) => {
+                const isVisible = msg.role === "user" || msg.role === "assistant";
+                const currentRefIdx = isVisible ? refIdx++ : -1;
+                let showTimestamp = false;
+                if (msg.role === "assistant") {
+                  showTimestamp = true;
+                  for (let j = idx + 1; j < messages.length; j++) {
+                    const r = messages[j].role;
+                    if (r === "user") break;
+                    if (r === "assistant") { showTimestamp = false; break; }
+                  }
+                  // Hide on the currently-streaming tail (the streaming bubble owns the live timestamp)
+                  if (showTimestamp && streamState.isStreaming && idx === messages.length - 1) {
+                    showTimestamp = false;
+                  }
+                }
+                const view = (
+                  <MessageView
+                    key={idx}
+                    message={msg}
+                    toolResults={toolResultsMap}
+                    modelNames={modelNames}
+                    entryId={entryIds[idx]}
+                    onFork={agentRunning || isNew || (idx === 0 && msg.role === "user") ? undefined : handleFork}
+                    forking={forkingEntryId === entryIds[idx]}
+                    onSendMessage={handleWidgetSendMessage}
+                    showTimestamp={showTimestamp}
+                    prevTimestamp={idx > 0 ? (messages[idx - 1] as import("@/lib/types").AgentMessage & { timestamp?: number }).timestamp : undefined}
+                    renderVisualCodeBlocks={!!generativeUI}
+                    cwd={data?.info?.cwd ?? session?.cwd ?? newSessionCwd ?? undefined}
+                  />
+                );
+                if (!isVisible) return view;
+                return (
+                  <div key={idx} ref={(el) => {
+                    messageRefs.current[currentRefIdx] = el;
+                    if (idx === lastUserIdx) { (lastUserMsgRef as { current: HTMLDivElement | null }).current = el; }
+                  }}>
+                    {view}
+                  </div>
+                );
+              });
+            })()}
+
+            {streamState.isStreaming && streamState.streamingMessage && (
+              <MessageView message={streamState.streamingMessage as AgentMessage} isStreaming modelNames={modelNames} onSendMessage={handleWidgetSendMessage} renderVisualCodeBlocks={!!generativeUI} cwd={data?.info?.cwd ?? session?.cwd ?? newSessionCwd ?? undefined} />
+            )}
+
+            {agentRunning && !streamState.streamingMessage && (
+              <div className="py-2 text-[13px] text-text-muted">
+                <span className="animate-[pulse_1.5s_infinite]">{phaseLabel(agentPhase)}</span>
+              </div>
+            )}
+
+            {data?.info?.cwd && data.info.cwdExists === false && (
+              <div className="my-3 rounded-[7px] border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.07)] px-3 py-2 text-[12px] leading-relaxed text-red-400">
+                Project directory no longer exists: <code className="font-mono">{data.info.cwd}</code>
+              </div>
+            )}
+
+            {agentError && (
+              <div className="my-3 rounded-[7px] border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.07)] px-3 py-2 text-[12px] leading-relaxed text-red-400">
+                {agentError}
+              </div>
+            )}
+
+            {agentRunning && (
+              <div style={{ height: scrollContainerRef.current ? scrollContainerRef.current.clientHeight : "80vh" }} />
+            )}
+
+            <div ref={messagesEndRef} />
+          </div>
+        </div>
+        <ChatMinimap
+          messages={messages}
+          streamingMessage={streamState.streamingMessage}
+          scrollContainer={scrollContainerRef}
+          messageRefs={messageRefs}
+        />
+        {subagentRuns.length > 0 && (
+          <button
+            onClick={() => setSubagentPanelOpen((v) => !v)}
+            title={subagentPanelOpen ? "Hide agent runs" : "Show agent runs"}
+            style={{
+              position: "absolute",
+              right: subagentPanelOpen ? 260 : 40,
+              top: 8,
+              minWidth: 28,
+              height: 28,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              padding: activeSubagentCount > 0 || subagentRuns.length > 1 ? "0 8px" : 0,
+              background: subagentPanelOpen ? "var(--bg-selected)" : "var(--bg-panel)",
+              border: "1px solid var(--border)",
+              borderRadius: 6,
+              color: subagentPanelOpen ? "var(--accent)" : "var(--text-dim)",
+              cursor: "pointer",
+              zIndex: 30,
+              fontSize: 12,
+              transition: "right 0.2s ease, background 0.12s",
+            }}
+            onMouseEnter={(e) => { if (!subagentPanelOpen) e.currentTarget.style.color = "var(--text)"; }}
+            onMouseLeave={(e) => { if (!subagentPanelOpen) e.currentTarget.style.color = "var(--text-dim)"; }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+            {(activeSubagentCount > 0 || subagentRuns.length > 1) && (
+              <span style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 10, fontWeight: 700, color: activeSubagentCount > 0 ? "var(--accent)" : "var(--text-dim)" }}>
+                {activeSubagentCount > 0 && <span>{activeSubagentCount} active</span>}
+                <span>{subagentRuns.length}</span>
+              </span>
+            )}
+          </button>
+        )}
+        {subagentPanelOpen && subagentRuns.length > 0 && (
+          <div
+            style={{
+              position: "absolute",
+              right: 48,
+              top: 4,
+              bottom: 4,
+              width: 250,
+              background: "var(--bg)",
+              border: "1px solid var(--border)",
+              borderRadius: 8,
+              boxShadow: "-2px 0 12px rgba(0,0,0,0.08)",
+              zIndex: 25,
+              overflow: "hidden",
+            }}
+          >
+            <div style={{
+              padding: "6px 12px",
+              fontSize: 11,
+              fontWeight: 600,
+              color: "var(--text-dim)",
+              borderBottom: "1px solid var(--border)",
+              background: "var(--bg-panel)",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+            }}>
+              Agent Runs
+            </div>
+            <SubagentPanel runs={subagentRuns} />
+          </div>
+        )}
+      </div>
+
+      <div className="relative">
+        {chatInputElement}
+      </div>
+      </>
+      )}
+    </div>
+  );
+}