@seqyuan/annodex 0.1.12 → 0.1.14

package/components/AppShell.tsx

@@ -1,1058 +0,0 @@
-"use client";
-
-import { useState, useCallback, useRef, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { SessionSidebar } from "./SessionSidebar";
-import { ChatWindow } from "./ChatWindow";
-import { FileViewer } from "./FileViewer";
-import { GlobalFileEditor } from "./GlobalFileEditor";
-import { ReportPanel } from "./ReportPanel";
-import { ResizeHandle } from "./ResizeHandle";
-import { TabBar, type Tab } from "./TabBar";
-import { SettingsDialog, type SettingsTab } from "./SettingsDialog";
-import { useTheme } from "@/hooks/useTheme";
-import { useResizable } from "@/hooks/useResizable";
-import type { SessionInfo } from "@/lib/types";
-import type { ChatInputHandle } from "./ChatInput";
-
-interface AppSettings {
-  generativeUI: boolean;
-}
-
-interface RuntimeState {
-  running: boolean;
-  status: "running" | "orphaned" | "stopped";
-  version: string | null;
-  url: string | null;
-  restartPending: boolean;
-  installedVersion: string | null;
-  restartDetectedAt: string | null;
-  restartStartedAt: string | null;
-}
-
-interface VersionStatus {
-  current: string;
-  latest: string | null;
-  updateAvailable: boolean;
-  updateCommand: string;
-  runtime: RuntimeState | null;
-}
-
-export function AppShell() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { isDark, toggleTheme } = useTheme();
-  const [selectedSession, setSelectedSession] = useState<SessionInfo | null>(null);
-  // When user clicks +, we only store the cwd — no fake session id
-  const [newSessionCwd, setNewSessionCwd] = useState<string | null>(null);
-  const [refreshKey, setRefreshKey] = useState(0);
-  const [sessionKey, setSessionKey] = useState(0);
-  const [explorerRefreshKey, setExplorerRefreshKey] = useState(0);
-  const [modelsRefreshKey, setModelsRefreshKey] = useState(0);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsInitialTab, setSettingsInitialTab] = useState<SettingsTab>("projects");
-  const [settings, setSettings] = useState<AppSettings>({ generativeUI: true });
-  const [versionStatus, setVersionStatus] = useState<VersionStatus | null>(null);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-
-  // Resizable panels
-  const sidebarResize = useResizable({ initialWidth: 260, minWidth: 180, maxWidth: 500, storageKey: "--annodex-sidebar-width" });
-  const rightPanelResize = useResizable({ initialWidth: 500, minWidth: 300, maxWidth: 1200, storageKey: "--annodex-right-panel-width", direction: "left" });
-  const chatInputRef = useRef<ChatInputHandle | null>(null);
-  const topBarRef = useRef<HTMLDivElement>(null);
-
-  const [systemPrompt, setSystemPrompt] = useState<string | null>(null);
-  const systemBtnRef = useRef<HTMLButtonElement>(null);
-  const [editingTitle, setEditingTitle] = useState(false);
-  const [titleDraft, setTitleDraft] = useState("");
-  const titleInputRef = useRef<HTMLInputElement>(null);
-  const titleEditCanceledRef = useRef(false);
-
-  const handleSystemPromptChange = useCallback((prompt: string | null) => {
-    setSystemPrompt(prompt);
-  }, []);
-
-  useEffect(() => {
-    setEditingTitle(false);
-  }, [selectedSession?.id]);
-
-  const getSessionTitle = useCallback((session: SessionInfo | null) => {
-    if (!session) return "";
-    return session.name || session.firstMessage.slice(0, 80) || session.id.slice(0, 12);
-  }, []);
-
-  const handleStartTitleEdit = useCallback(() => {
-    if (!selectedSession) return;
-    titleEditCanceledRef.current = false;
-    setTitleDraft(selectedSession.name || getSessionTitle(selectedSession));
-    setEditingTitle(true);
-    setTimeout(() => titleInputRef.current?.select(), 0);
-  }, [getSessionTitle, selectedSession]);
-
-  const handleSaveTitle = useCallback(async () => {
-    if (titleEditCanceledRef.current) {
-      titleEditCanceledRef.current = false;
-      setEditingTitle(false);
-      return;
-    }
-    if (!selectedSession) {
-      setEditingTitle(false);
-      return;
-    }
-    const name = titleDraft.trim();
-    const fallbackTitle = getSessionTitle(selectedSession);
-    setEditingTitle(false);
-    if (name === (selectedSession.name ?? "") || (!selectedSession.name && name === fallbackTitle)) return;
-    try {
-      const res = await fetch(`/api/sessions/${encodeURIComponent(selectedSession.id)}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name }),
-      });
-      if (res.ok) {
-        setSelectedSession((prev) => prev && prev.id === selectedSession.id ? { ...prev, name } : prev);
-        setRefreshKey((k) => k + 1);
-      }
-    } catch {
-      // keep the local title unchanged if saving fails
-    }
-  }, [getSessionTitle, selectedSession, titleDraft]);
-
-  const handleTitleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      void handleSaveTitle();
-    } else if (event.key === "Escape") {
-      titleEditCanceledRef.current = true;
-      setEditingTitle(false);
-    }
-  }, [handleSaveTitle]);
-
-  useEffect(() => {
-    let cancelled = false;
-    fetch("/api/settings")
-      .then((res) => res.ok ? res.json() : null)
-      .then((data: { settings?: Partial<AppSettings> } | null) => {
-        if (cancelled) return;
-        setSettings((cur) => ({
-          generativeUI: typeof data?.settings?.generativeUI === "boolean" ? data.settings.generativeUI : cur.generativeUI,
-        }));
-      })
-      .catch(() => {});
-    return () => { cancelled = true; };
-  }, []);
-
-  useEffect(() => {
-    let cancelled = false;
-    let inFlight = false;
-    const load = () => {
-      if (inFlight) return;
-      inFlight = true;
-      fetch("/api/version")
-        .then((res) => res.ok ? res.json() : null)
-        .then((data: VersionStatus | null) => {
-          if (!cancelled) setVersionStatus(data);
-        })
-        .catch(() => {})
-        .finally(() => { inFlight = false; });
-    };
-    load();
-    const timer = window.setInterval(load, 60_000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, []);
-
-  const handleGenerativeUIToggle = useCallback(() => {
-    const next = !settings.generativeUI;
-    setSettings((cur) => ({ ...cur, generativeUI: next }));
-    fetch("/api/settings", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ settings: { generativeUI: next } }),
-    })
-      .then((res) => res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`)))
-      .then((data: { settings?: Partial<AppSettings> }) => {
-        setSettings((cur) => ({
-          ...cur,
-          ...(typeof data.settings?.generativeUI === "boolean" ? { generativeUI: data.settings.generativeUI } : {}),
-        }));
-      })
-      .catch(() => setSettings((cur) => ({ ...cur, generativeUI: !cur.generativeUI })));
-  }, [settings.generativeUI]);
-
-  // Session stats (tokens + cost) — populated by ChatWindow, displayed in top bar
-  const [sessionStats, setSessionStats] = useState<{ tokens: { input: number; output: number; cacheRead: number; cacheWrite: number }; cost?: number } | null>(null);
-  const handleSessionStatsChange = useCallback((stats: { tokens: { input: number; output: number; cacheRead: number; cacheWrite: number }; cost?: number } | null) => {
-    setSessionStats(stats);
-  }, []);
-
-  // Context usage — populated by ChatWindow, displayed in top bar
-  const [contextUsage, setContextUsage] = useState<{ percent: number | null; contextWindow: number; tokens: number | null } | null>(null);
-  const handleContextUsageChange = useCallback((usage: { percent: number | null; contextWindow: number; tokens: number | null } | null) => {
-    setContextUsage(usage);
-  }, []);
-
-  // Top-bar system prompt dropdown
-  const [activeTopPanel, setActiveTopPanel] = useState<"system" | null>(null);
-  const [topPanelPos, setTopPanelPos] = useState<{ top: number; left: number; width: number } | null>(null);
-
-  const toggleTopPanel = useCallback((panel: "system") => {
-    setActiveTopPanel((cur) => cur === panel ? null : panel);
-  }, []);
-
-  useEffect(() => {
-    if (!activeTopPanel || !topBarRef.current) return;
-    const update = () => {
-      const rect = topBarRef.current!.getBoundingClientRect();
-      setTopPanelPos({ top: rect.bottom, left: rect.left, width: rect.width });
-    };
-    update();
-    const ro = new ResizeObserver(update);
-    ro.observe(topBarRef.current);
-    return () => ro.disconnect();
-  }, [activeTopPanel]);
-
-  // Single active panel — only one dropdown open at a time
-  // Right panel — pinned report tab plus file tabs
-  const [fileTabs, setFileTabs] = useState<Tab[]>([]);
-  const [activeRightTabId, setActiveRightTabId] = useState<string>("report");
-  const [rightPanelOpen, setRightPanelOpen] = useState(false);
-  const [reportRefreshKey, setReportRefreshKey] = useState(0);
-
-  const handleAtMention = useCallback((relativePath: string) => {
-    chatInputRef.current?.insertText("`" + relativePath + "`");
-  }, []);
-
-  const [initialSessionId] = useState<string | null>(() => searchParams.get("session"));
-  const [activeCwd, setActiveCwd] = useState<string | null>(null);
-  // True once the initial ?session= URL param has been resolved (or confirmed absent)
-  const [initialSessionRestored, setInitialSessionRestored] = useState<boolean>(() => !searchParams.get("session"));
-  // Suppresses sessionKey bump in handleCwdChange during the initial URL restore
-  const suppressCwdBumpRef = useRef(false);
-
-  const handleCwdChange = useCallback((cwd: string | null) => {
-    setActiveCwd(cwd);
-    // Skip if cwd is null (initial mount) or during the initial URL restore.
-    if (!cwd || suppressCwdBumpRef.current) return;
-    // Close any session that belongs to a different cwd — it no longer
-    // matches the selected project directory.
-    setSelectedSession((prev) => {
-      if (prev && prev.cwd !== cwd) return null;
-      return prev;
-    });
-    setNewSessionCwd((prev) => {
-      if (prev && prev !== cwd) return null;
-      return prev;
-    });
-    setSessionKey((k) => k + 1);
-    setExplorerRefreshKey((k) => k + 1);
-    setSystemPrompt(null);
-    setActiveTopPanel(null);
-    router.replace("/", { scroll: false });
-  }, [router]);
-
-  const handleProjectSelect = useCallback((cwd: string) => {
-    handleCwdChange(cwd);
-    setSettingsOpen(false);
-    setRefreshKey((k) => k + 1);
-  }, [handleCwdChange]);
-
-  const handleSelectSession = useCallback((session: SessionInfo, isRestore = false) => {
-    setNewSessionCwd(null);
-    setActiveCwd(session.cwd);
-    setSelectedSession(session);
-    setSessionKey((k) => k + 1);
-    setSystemPrompt(null);
-    setInitialSessionRestored(true);
-    if (isRestore) {
-      // Suppress the redundant sessionKey bump that would come from the
-      // onCwdChange effect firing after setSelectedCwd in the sidebar
-      suppressCwdBumpRef.current = true;
-      setTimeout(() => { suppressCwdBumpRef.current = false; }, 0);
-    }
-    // Skip router.replace when restoring from URL — the param is already correct
-    // and calling replace in production Next.js triggers a Suspense remount loop
-    if (!isRestore) {
-      router.replace(`?session=${encodeURIComponent(session.id)}`, { scroll: false });
-    }
-  }, [router]);
-
-  const handleNewSession = useCallback((_sessionId: string, cwd: string) => {
-    setSelectedSession(null);
-    setNewSessionCwd(cwd);
-    setActiveCwd(cwd);
-    setSessionKey((k) => k + 1);
-    setSystemPrompt(null);
-    setActiveTopPanel(null);
-    router.replace("/", { scroll: false });
-  }, [router]);
-
-  // Called by ChatWindow when a new session gets its real id
-  const handleSessionCreated = useCallback((session: SessionInfo) => {
-    setNewSessionCwd(null);
-    setActiveCwd(session.cwd);
-    setSelectedSession(session);
-    setRefreshKey((k) => k + 1);
-    router.replace(`?session=${encodeURIComponent(session.id)}`, { scroll: false });
-  }, [router]);
-
-  const handleAgentEnd = useCallback(() => {
-    setRefreshKey((k) => k + 1);
-    setExplorerRefreshKey((k) => k + 1);
-  }, []);
-
-  const handleSessionForked = useCallback((newSessionId: string) => {
-    setRefreshKey((k) => k + 1);
-    setNewSessionCwd(null);
-    setSelectedSession((prev) => ({
-      ...(prev ?? { path: "", cwd: "", created: "", modified: "", messageCount: 0, firstMessage: "" }),
-      id: newSessionId,
-    }));
-    router.replace(`?session=${encodeURIComponent(newSessionId)}`, { scroll: false });
-  }, [router]);
-
-  const handleInitialRestoreDone = useCallback(() => {
-    setInitialSessionRestored(true);
-  }, []);
-
-  const handleSessionDeleted = useCallback((sessionId: string) => {
-    setRefreshKey((k) => k + 1);
-    if (selectedSession?.id === sessionId) {
-      const cwd = selectedSession.cwd;
-      setSelectedSession(null);
-      setNewSessionCwd(cwd ?? null);
-      setSessionKey((k) => k + 1);
-      setSystemPrompt(null);
-      setActiveTopPanel(null);
-      router.replace("/", { scroll: false });
-    }
-  }, [selectedSession, router]);
-
-  const handleOpenFile = useCallback((filePath: string, fileName: string) => {
-    const tabId = `file:${filePath}`;
-    setFileTabs((prev) => {
-      if (prev.find((t) => t.id === tabId)) return prev;
-      return [...prev, { id: tabId, label: fileName, filePath }];
-    });
-    setActiveRightTabId(tabId);
-    setRightPanelOpen(true);
-  }, []);
-
-  const handleCloseFileTab = useCallback((tabId: string) => {
-    if (tabId === "report") return;
-    setFileTabs((prev) => {
-      const next = prev.filter((t) => t.id !== tabId);
-      return next;
-    });
-    setActiveRightTabId((cur) => {
-      if (cur !== tabId) return cur;
-      const remaining = fileTabs.filter((t) => t.id !== tabId);
-      return remaining.length > 0 ? remaining[remaining.length - 1].id : "report";
-    });
-  }, [fileTabs]);
-
-  // Show chat area if a session is selected, or if we have a cwd to start a new session in
-  const effectiveNewSessionCwd = newSessionCwd ?? (selectedSession === null && activeCwd ? activeCwd : null);
-  const showChat = selectedSession !== null || effectiveNewSessionCwd !== null;
-  // While restoring initial session from URL, don't show the placeholder
-  const showPlaceholder = initialSessionRestored && !showChat;
-
-  const rightTabs: Tab[] = [{ id: "report", label: "Report", closable: false, icon: "report" }, ...fileTabs];
-  const activeFileTab = fileTabs.find((t) => t.id === activeRightTabId) ?? null;
-  const topBarSessionTitle = selectedSession ? getSessionTitle(selectedSession) : effectiveNewSessionCwd ? "New chat" : "No session";
-  const topBarCwd = selectedSession?.cwd ?? effectiveNewSessionCwd ?? activeCwd ?? "";
-  const topBarProjectName = topBarCwd ? topBarCwd.replace(/\/+$/, "").split(/[\\/]/).filter(Boolean).pop() || topBarCwd : "";
-  const settingsCwd = activeCwd ?? selectedSession?.cwd ?? newSessionCwd ?? null;
-  const updateStatus = (() => {
-    const runtime = versionStatus?.runtime;
-    const target = runtime?.installedVersion ?? versionStatus?.latest;
-    if (runtime?.restartPending && target) {
-      const restarting = Boolean(runtime.restartStartedAt);
-      return {
-        label: `${restarting ? "Restarting" : "Restart queued"} ${target}`,
-        title: [
-          `Current runtime: v${runtime.version ?? versionStatus?.current ?? "unknown"}`,
-          `Installed: v${target}`,
-          restarting ? "A replacement server is starting." : "annodex will restart after active sessions become idle.",
-        ].join("\n"),
-        active: true,
-      };
-    }
-    if (versionStatus?.updateAvailable && versionStatus.latest) {
-      return {
-        label: `Update ${versionStatus.latest}`,
-        title: `Current: v${versionStatus.current}\nLatest: v${versionStatus.latest}\nRun: ${versionStatus.updateCommand}`,
-        active: false,
-      };
-    }
-    return null;
-  })();
-  const openSettings = useCallback((tab: SettingsTab = "projects") => {
-    setSettingsInitialTab(tab);
-    setSettingsOpen(true);
-  }, []);
-
-  const sidebarContent = (
-    <>
-      <SessionSidebar
-        selectedSessionId={selectedSession?.id ?? null}
-        onSelectSession={handleSelectSession}
-        onNewSession={handleNewSession}
-        initialSessionId={initialSessionId}
-        onInitialRestoreDone={handleInitialRestoreDone}
-        refreshKey={refreshKey}
-        onSessionDeleted={handleSessionDeleted}
-        selectedCwd={selectedSession?.cwd ?? newSessionCwd ?? activeCwd ?? null}
-        onCwdChange={handleCwdChange}
-        onOpenFile={handleOpenFile}
-        explorerRefreshKey={explorerRefreshKey}
-        onAtMention={handleAtMention}
-      />
-      <div style={{ padding: "8px", flexShrink: 0 }}>
-        <button
-          type="button"
-          onClick={() => openSettings("projects")}
-          title="Settings"
-          aria-label="Settings"
-          style={{
-            width: 34,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: 34,
-            padding: 0,
-            background: "none",
-            border: "none",
-            borderRadius: 9,
-            color: "var(--text-muted)",
-            cursor: "pointer",
-            fontSize: 12,
-            transition: "background 0.12s, color 0.12s",
-          }}
-          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text)"; }}
-          onMouseLeave={(e) => { e.currentTarget.style.background = "none"; e.currentTarget.style.color = "var(--text-muted)"; }}
-        >
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
-            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.72l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z" />
-            <circle cx="12" cy="12" r="3" />
-          </svg>
-        </button>
-      </div>
-    </>
-  );
-
-  return (
-    <>
-    <div style={{ display: "flex", height: "100dvh", overflow: "hidden", background: "var(--bg)" }}>
-      {/* Mobile overlay backdrop */}
-      <div
-        className="sidebar-overlay-backdrop"
-        onClick={() => setSidebarOpen(false)}
-        style={{
-          position: "fixed",
-          inset: 0,
-          zIndex: 199,
-          background: "rgba(0,0,0,0.4)",
-          opacity: sidebarOpen ? 1 : 0,
-          pointerEvents: sidebarOpen ? "auto" : "none",
-          transition: "opacity 0.25s ease",
-        }}
-      />
-
-      {/* Left sidebar */}
-      <div
-        className={`sidebar-container${sidebarOpen ? " sidebar-open" : " sidebar-closed"}`}
-        style={{
-          background: "var(--bg-panel)",
-          borderRight: "1px solid var(--border)",
-          display: "flex",
-          flexDirection: "column",
-          flexShrink: 0,
-          zIndex: 200,
-          width: sidebarResize.width,
-          minWidth: sidebarResize.width,
-          transition: sidebarOpen || sidebarResize.isResizing ? "none" : undefined,
-        }}
-      >
-        {sidebarContent}
-      </div>
-
-      {/* Sidebar drag handle */}
-      {sidebarOpen && (
-        <ResizeHandle
-          side="right"
-          ariaLabel="Resize sidebar"
-          onResizeStart={sidebarResize.beginResize}
-          onResize={sidebarResize.resizeBy}
-          onResizeEnd={sidebarResize.endResize}
-        />
-      )}
-
-      {/* Center: chat */}
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>
-        {/* Top bar */}
-        <div
-          ref={topBarRef}
-          className="app-topbar"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            flexShrink: 0,
-            borderBottom: "1px solid var(--border)",
-            height: 48,
-            padding: "0 8px",
-            background: "var(--bg)",
-          }}
-        >
-          <button
-            className="topbar-sidebar-toggle"
-            onClick={() => setSidebarOpen((v) => !v)}
-            title={sidebarOpen ? "Hide sidebar" : "Show sidebar"}
-            style={{
-              display: "flex", alignItems: "center", justifyContent: "center",
-              width: 32, height: 32, padding: 0,
-              background: "var(--bg-panel)", border: "1px solid var(--border)", borderRadius: 7,
-              color: "var(--text-muted)", cursor: "pointer", flexShrink: 0, transition: "color 0.12s, background 0.12s",
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; e.currentTarget.style.background = "var(--bg-panel)"; }}
-          >
-            {sidebarOpen ? (
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="9" y1="3" x2="9" y2="21" />
-              </svg>
-            ) : (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
-              </svg>
-            )}
-          </button>
-
-          <div className="topbar-title-area" style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0, flex: 1 }}>
-            <div style={{ minWidth: 0, display: "flex", alignItems: "center", gap: 6 }}>
-              {editingTitle && selectedSession ? (
-                <input
-                  ref={titleInputRef}
-                  value={titleDraft}
-                  onChange={(e) => setTitleDraft(e.target.value)}
-                  onKeyDown={handleTitleKeyDown}
-                  onBlur={() => void handleSaveTitle()}
-                  style={{
-                    width: "min(360px, 34vw)",
-                    height: 28,
-                    boxSizing: "border-box",
-                    border: "1px solid var(--border)",
-                    borderRadius: 6,
-                    background: "var(--bg-panel)",
-                    color: "var(--text)",
-                    padding: "0 8px",
-                    fontSize: 13,
-                    fontWeight: 500,
-                    outline: "none",
-                  }}
-                />
-              ) : (
-                <>
-                  <div
-                    className="topbar-session-title"
-                    title={topBarSessionTitle}
-                    style={{
-                      minWidth: 0,
-                      maxWidth: "min(420px, 36vw)",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      color: showChat ? "var(--text)" : "var(--text-muted)",
-                      fontSize: 14,
-                      fontWeight: 600,
-                      lineHeight: 1.2,
-                    }}
-                  >
-                    {topBarSessionTitle}
-                  </div>
-                  {selectedSession && (
-                    <button
-                      type="button"
-                      className="topbar-rename-button"
-                      onClick={handleStartTitleEdit}
-                      title="Rename session"
-                      style={{
-                        width: 22,
-                        height: 22,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        padding: 0,
-                        border: "none",
-                        borderRadius: 5,
-                        background: "transparent",
-                        color: "var(--text-dim)",
-                        cursor: "pointer",
-                        flexShrink: 0,
-                      }}
-                      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-                      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; }}
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M12 20h9" />
-                        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-                      </svg>
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
-            {topBarProjectName && (
-              <>
-                <span className="topbar-project-crumb" style={{ color: "var(--text-dim)", fontSize: 12, flexShrink: 0 }}>/</span>
-                <span
-                  className="topbar-project-crumb"
-                  title={topBarCwd || topBarProjectName}
-                  style={{
-                    minWidth: 0,
-                    maxWidth: "min(280px, 24vw)",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    color: "var(--text-muted)",
-                    fontSize: 12,
-                    lineHeight: 1.2,
-                  }}
-                >
-                  {topBarProjectName}
-                </span>
-              </>
-            )}
-          </div>
-
-          {showChat && (
-            <div className="topbar-chat-tools" style={{ display: "flex", alignItems: "center", gap: 6, height: 28, flexShrink: 0 }}>
-              <button
-                ref={systemBtnRef}
-                className="topbar-system-button"
-                onClick={() => toggleTopPanel("system")}
-                title="System prompt"
-                aria-label="System prompt"
-                style={{
-                  display: "flex", alignItems: "center", gap: 6,
-                  height: 28, padding: "0 9px",
-                  background: activeTopPanel === "system" ? "var(--bg-selected)" : "var(--bg-panel)",
-                  border: `1px solid ${activeTopPanel === "system" ? "rgba(37,99,235,0.45)" : "var(--border)"}`,
-                  borderRadius: 7,
-                  cursor: "pointer",
-                  color: activeTopPanel === "system" ? "var(--text)" : "var(--text-muted)",
-                  fontSize: 11, whiteSpace: "nowrap", transition: "color 0.1s, background 0.1s",
-                }}
-                onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.color = activeTopPanel === "system" ? "var(--text)" : "var(--text-muted)";
-                  e.currentTarget.style.background = activeTopPanel === "system" ? "var(--bg-selected)" : "var(--bg-panel)";
-                }}
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: systemPrompt ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }}>
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                  <polyline points="14 2 14 8 20 8" />
-                  <line x1="8" y1="13" x2="16" y2="13" />
-                  <line x1="8" y1="17" x2="13" y2="17" />
-                </svg>
-                <span className="topbar-system-label">System</span>
-              </button>
-            </div>
-          )}
-          {/* Session stats — right-aligned in top bar */}
-          {showChat && (sessionStats || contextUsage) && (() => {
-            const t = sessionStats?.tokens;
-            const c = sessionStats?.cost ?? 0;
-            const fmt = (n: number) => n >= 1_000_000 ? `${(n / 1_000_000).toFixed(1)}M` : n >= 1000 ? `${(n / 1000).toFixed(0)}k` : String(n);
-            const costStr = c > 0 ? (c >= 0.01 ? `$${c.toFixed(2)}` : `<$0.01`) : null;
-
-            let ctxColor = "var(--text-muted)";
-            let ctxStr: string | null = null;
-            if (contextUsage?.contextWindow) {
-              const pct = contextUsage.percent;
-              const used = contextUsage.tokens;
-              if (pct !== null && pct > 90) ctxColor = "#ef4444";
-              else if (pct !== null && pct > 70) ctxColor = "rgba(234,179,8,0.95)";
-              ctxStr = used !== null ? `${fmt(used)} / ${fmt(contextUsage.contextWindow)}` : `? / ${fmt(contextUsage.contextWindow)}`;
-            }
-
-            const tooltipParts: string[] = [];
-            if (t) {
-              tooltipParts.push(`in: ${t.input.toLocaleString()}`);
-              tooltipParts.push(`out: ${t.output.toLocaleString()}`);
-              tooltipParts.push(`cache read: ${t.cacheRead.toLocaleString()}`);
-              tooltipParts.push(`cache write: ${t.cacheWrite.toLocaleString()}`);
-              if (c > 0) tooltipParts.push(`cost: $${c.toFixed(4)}`);
-            }
-            if (contextUsage?.contextWindow) {
-              const pct = contextUsage.percent;
-              tooltipParts.push(`context: ${contextUsage.tokens !== null ? contextUsage.tokens.toLocaleString() : "unknown"} of ${contextUsage.contextWindow.toLocaleString()} tokens${pct !== null ? ` (${pct.toFixed(1)}%)` : ""}`);
-            }
-            const tooltip = tooltipParts.join("  |  ");
-
-            return (
-              <div
-                className="topbar-session-stats"
-                title={tooltip}
-                style={{
-                  display: "flex", alignItems: "center", gap: 10,
-                  padding: "0 8px",
-                  height: 28,
-                  border: "1px solid var(--border)",
-                  borderRadius: 7,
-                  background: "var(--bg-panel)",
-                  fontSize: 11, color: "var(--text-muted)",
-                  whiteSpace: "nowrap", cursor: "default",
-                  fontVariantNumeric: "tabular-nums",
-                }}
-              >
-                {t && t.input > 0 && (
-                  <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
-                    <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
-                      <line x1="5" y1="8.5" x2="5" y2="1.5" /><polyline points="2 4 5 1.5 8 4" />
-                    </svg>
-                    {fmt(t.input)}
-                  </span>
-                )}
-                {t && t.output > 0 && (
-                  <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
-                    <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
-                      <line x1="5" y1="1.5" x2="5" y2="8.5" /><polyline points="2 6 5 8.5 8 6" />
-                    </svg>
-                    {fmt(t.output)}
-                  </span>
-                )}
-                {t && t.cacheRead > 0 && (
-                  <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
-                    <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M8.5 5a3.5 3.5 0 1 1-1-2.45" /><polyline points="6.5 1.5 8.5 2.5 7.5 4.5" />
-                    </svg>
-                    {fmt(t.cacheRead)}
-                  </span>
-                )}
-                {costStr && (
-                  <span style={{ display: "flex", alignItems: "center", color: "var(--text)", fontWeight: 500 }}>
-                    {costStr}
-                  </span>
-                )}
-                {ctxStr && (
-                  <span style={{ display: "flex", alignItems: "center", gap: 4, color: ctxColor }}>
-                    <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M1 9 L1 5 Q1 1 5 1 Q9 1 9 5 L9 9" /><line x1="1" y1="9" x2="9" y2="9" />
-                    </svg>
-                    {ctxStr}
-                  </span>
-                )}
-              </div>
-            );
-          })()}
-          {updateStatus && (
-            <div
-              className="topbar-update-status"
-              title={updateStatus.title}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                height: 28,
-                padding: "0 8px",
-                border: `1px solid ${updateStatus.active ? "rgba(37,99,235,0.45)" : "var(--border)"}`,
-                borderRadius: 7,
-                background: updateStatus.active ? "var(--bg-selected)" : "var(--bg-panel)",
-                color: updateStatus.active ? "var(--accent)" : "var(--text-muted)",
-                fontSize: 11,
-                whiteSpace: "nowrap",
-                flexShrink: 0,
-                fontVariantNumeric: "tabular-nums",
-              }}
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
-                <path d="M21 12a9 9 0 0 1-15.5 6.2" />
-                <path d="M3 12A9 9 0 0 1 18.5 5.8" />
-                <path d="M7 18H5.5v1.5" />
-                <path d="M17 6h1.5V4.5" />
-              </svg>
-              <span>{updateStatus.label}</span>
-            </div>
-          )}
-          <button
-            type="button"
-            className="topbar-icon-button topbar-generate-ui-toggle"
-            onClick={handleGenerativeUIToggle}
-            title={`生成式 UI: ${settings.generativeUI ? "on" : "off"}`}
-            aria-label={`生成式 UI: ${settings.generativeUI ? "on" : "off"}`}
-            style={{
-              display: "flex", alignItems: "center", justifyContent: "center",
-              width: 32, height: 28, padding: 0,
-              background: settings.generativeUI ? "var(--bg-selected)" : "var(--bg-panel)",
-              border: `1px solid ${settings.generativeUI ? "rgba(37,99,235,0.45)" : "var(--border)"}`,
-              borderRadius: 7,
-              color: settings.generativeUI ? "var(--accent)" : "var(--text-muted)",
-              cursor: "pointer",
-              flexShrink: 0,
-              transition: "color 0.12s, background 0.12s",
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = settings.generativeUI ? "var(--accent)" : "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = settings.generativeUI ? "var(--accent)" : "var(--text-muted)";
-              e.currentTarget.style.background = settings.generativeUI ? "var(--bg-selected)" : "var(--bg-panel)";
-            }}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="7" height="7" rx="1.5" />
-              <rect x="14" y="3" width="7" height="7" rx="1.5" />
-              <rect x="3" y="14" width="7" height="7" rx="1.5" />
-              <path d="M16 17h5" />
-              <path d="M18.5 14.5v5" />
-            </svg>
-          </button>
-          <button
-            className="topbar-icon-button topbar-theme-toggle"
-            onClick={(e) => {
-              const rect = e.currentTarget.getBoundingClientRect();
-              toggleTheme({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
-            }}
-            title={isDark ? "Switch to light mode" : "Switch to dark mode"}
-            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-            aria-pressed={isDark}
-            style={{
-              display: "flex", alignItems: "center", justifyContent: "center",
-              width: 32, height: 28, padding: 0,
-              background: "var(--bg-panel)", border: "1px solid var(--border)", borderRadius: 7,
-              color: "var(--text-muted)", cursor: "pointer", flexShrink: 0, transition: "color 0.12s, background 0.12s",
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; e.currentTarget.style.background = "var(--bg-panel)"; }}
-          >
-            {isDark ? (
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="5" />
-                <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
-                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-                <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
-                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-              </svg>
-            ) : (
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-              </svg>
-            )}
-          </button>
-          <button
-            className="topbar-icon-button topbar-right-panel-toggle"
-            onClick={() => setRightPanelOpen((v) => !v)}
-            title={rightPanelOpen ? "Hide report panel" : "Show report panel"}
-            aria-label={rightPanelOpen ? "Hide report panel" : "Show report panel"}
-            style={{
-              display: "flex", alignItems: "center", justifyContent: "center",
-              width: 32, height: 28, padding: 0,
-              background: rightPanelOpen ? "var(--bg-selected)" : "var(--bg-panel)",
-              border: `1px solid ${rightPanelOpen ? "rgba(37,99,235,0.45)" : "var(--border)"}`,
-              borderRadius: 7,
-              color: rightPanelOpen ? "var(--accent)" : "var(--text-muted)",
-              cursor: "pointer",
-              flexShrink: 0,
-              transition: "color 0.12s, background 0.12s",
-            }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = rightPanelOpen ? "var(--accent)" : "var(--text)"; e.currentTarget.style.background = "var(--bg-hover)"; }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = rightPanelOpen ? "var(--accent)" : "var(--text-muted)";
-              e.currentTarget.style.background = rightPanelOpen ? "var(--bg-selected)" : "var(--bg-panel)";
-            }}
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="15" y1="3" x2="15" y2="21" />
-            </svg>
-          </button>
-          {/* Top panel dropdown — shared, only one active at a time */}
-          {activeTopPanel && topPanelPos && (
-            <div style={{
-              position: "fixed",
-              top: topPanelPos.top,
-              left: topPanelPos.left,
-              width: topPanelPos.width,
-              zIndex: 500,
-            }}>
-              {activeTopPanel === "system" && (
-                <div style={{
-                  background: "var(--bg-panel)",
-                  borderBottom: "1px solid var(--border)",
-                }}>
-                  {systemPrompt ? (
-                    <div style={{
-                      maxHeight: "min(600px, 75vh)",
-                      overflowY: "auto",
-                      padding: "12px 16px",
-                      color: "var(--text-muted)",
-                      fontSize: 12,
-                      lineHeight: 1.6,
-                      whiteSpace: "pre-wrap",
-                      fontFamily: "var(--font-mono)",
-                    }}>
-                      {systemPrompt}
-                    </div>
-                  ) : systemPrompt === "" ? (
-                    <div style={{ padding: "10px 16px", fontSize: 12, color: "var(--text-muted)", fontStyle: "italic" }}>
-                      System prompt is empty (tools are disabled)
-                    </div>
-                  ) : (
-                    <div style={{ padding: "10px 16px", fontSize: 12, color: "var(--text-muted)", fontStyle: "italic" }}>
-                      Send a message to load the system prompt
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-        </div>
-
-        {/* Chat content */}
-        <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
-          {showChat ? (
-            <ChatWindow
-              key={sessionKey}
-              session={selectedSession}
-              newSessionCwd={effectiveNewSessionCwd}
-              onAgentEnd={handleAgentEnd}
-              onSessionCreated={handleSessionCreated}
-              onSessionForked={handleSessionForked}
-              modelsRefreshKey={modelsRefreshKey}
-              chatInputRef={chatInputRef}
-              onSystemPromptChange={handleSystemPromptChange}
-              onSessionStatsChange={handleSessionStatsChange}
-              onContextUsageChange={handleContextUsageChange}
-              onReportUpdated={() => setReportRefreshKey((k) => k + 1)}
-              generativeUI={settings.generativeUI}
-            />
-          ) : showPlaceholder ? (
-            activeCwd ? (
-              <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 15 }}>
-                Select a session from the sidebar
-              </div>
-            ) : (
-              <div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "flex-start", gap: 8, userSelect: "none", pointerEvents: "none" }}>
-                <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.7, flexShrink: 0 }}>
-                  <line x1="20" y1="12" x2="4" y2="12" /><polyline points="10 6 4 12 10 18" />
-                </svg>
-                <div>
-                  <div style={{ fontSize: 18, fontWeight: 600, color: "var(--text)", marginBottom: 8 }}>Get Started</div>
-                  <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.8 }}>
-                    <span style={{ color: "var(--text-dim)", marginRight: 6 }}>1.</span>Select a project directory from the sidebar<br />
-                    <span style={{ color: "var(--text-dim)", marginRight: 6 }}>2.</span>Add models via the <strong style={{ color: "var(--text)" }}>Models</strong> button at the bottom
-                  </div>
-                </div>
-              </div>
-            )
-          ) : null}
-        </div>
-      </div>
-
-      {/* Right panel drag handle */}
-      {rightPanelOpen && (
-        <ResizeHandle
-          side="left"
-          ariaLabel="Resize right panel"
-          onResizeStart={rightPanelResize.beginResize}
-          onResize={rightPanelResize.resizeBy}
-          onResizeEnd={rightPanelResize.endResize}
-        />
-      )}
-
-      {/* Right panel: report + file viewer */}
-      <div
-        className={`right-panel-container${rightPanelOpen ? " right-panel-open" : " right-panel-closed"}`}
-        style={{
-          display: rightPanelOpen ? "flex" : "none",
-          flexDirection: "column",
-          borderLeft: "1px solid var(--border)",
-          background: "var(--bg)",
-          flexShrink: 0,
-          width: rightPanelResize.width,
-          minWidth: rightPanelResize.width,
-          transition: rightPanelResize.isResizing ? "none" : undefined,
-        }}
-      >
-        {/* Right panel tab bar */}
-        <div style={{ display: "flex", alignItems: "center", flexShrink: 0, background: "var(--bg-panel)", borderBottom: "1px solid var(--border)", height: 36 }}>
-          <button
-            type="button"
-            className="right-panel-back-button"
-            onClick={() => setRightPanelOpen(false)}
-            title="Back to chat"
-            aria-label="Back to chat"
-            style={{
-              height: 36,
-              padding: "0 10px",
-              border: "none",
-              borderRight: "1px solid var(--border)",
-              background: "var(--bg-panel)",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: 12,
-              alignItems: "center",
-              gap: 6,
-              flexShrink: 0,
-            }}
-          >
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-              <line x1="19" y1="12" x2="5" y2="12" />
-              <polyline points="12 19 5 12 12 5" />
-            </svg>
-            <span>Chat</span>
-          </button>
-          <div style={{ flex: 1, overflow: "hidden" }}>
-            <TabBar
-              tabs={rightTabs}
-              activeTabId={activeRightTabId}
-              onSelectTab={setActiveRightTabId}
-              onCloseTab={handleCloseFileTab}
-            />
-          </div>
-
-        </div>
-
-        {/* File content */}
-        <div style={{ flex: 1, overflow: "hidden" }}>
-          {activeRightTabId === "report" ? (
-            <ReportPanel
-              sessionId={selectedSession?.id ?? null}
-              cwd={selectedSession?.cwd ?? activeCwd ?? undefined}
-              refreshKey={reportRefreshKey}
-              onOpenFile={handleOpenFile}
-            />
-          ) : activeFileTab?.filePath ? (
-            activeFileTab.filePath.startsWith("__") ? (
-              <GlobalFileEditor filePath={activeFileTab.filePath} />
-            ) : (
-              <FileViewer filePath={activeFileTab.filePath} cwd={activeCwd ?? undefined} onOpenFile={handleOpenFile} />
-            )
-          ) : (
-            <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-dim)", fontSize: 12 }}>
-              No file open
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-    {settingsOpen && (
-      <SettingsDialog
-        cwd={settingsCwd}
-        generativeUI={settings.generativeUI}
-        initialTab={settingsInitialTab}
-        onGenerativeUIToggle={handleGenerativeUIToggle}
-        onModelsChanged={() => setModelsRefreshKey((k) => k + 1)}
-        onProjectSelect={handleProjectSelect}
-        onProjectsChanged={() => setRefreshKey((k) => k + 1)}
-        onClose={() => {
-          setSettingsOpen(false);
-          setModelsRefreshKey((k) => k + 1);
-        }}
-      />
-    )}
-    </>
-  );
-}