@seqyuan/annodex 0.1.11 → 0.1.12

package/components/AppShell.tsx

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