@seqyuan/annodex 0.1.12 → 0.1.13

package/components/ChatWindow.tsx

@@ -1,576 +0,0 @@
-"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>
-  );
-}