@seqyuan/annodex 0.1.10 → 0.1.12

package/components/SessionSidebar.tsx

@@ -0,0 +1,1464 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef, useMemo } from "react";
+import type { ProjectInfo, SessionInfo } from "@/lib/types";
+import { FileExplorer } from "./FileExplorer";
+import { ConversationSearch } from "./ConversationSearch";
+import { ProjectFolderPicker } from "./ProjectFolderPicker";
+import { APP_NAME } from "@/lib/brand";
+
+interface Props {
+  selectedSessionId: string | null;
+  onSelectSession: (session: SessionInfo, isRestore?: boolean) => void;
+  onNewSession?: (sessionId: string, cwd: string) => void;
+  initialSessionId?: string | null;
+  onInitialRestoreDone?: () => void;
+  refreshKey?: number;
+  onSessionDeleted?: (sessionId: string) => void;
+  selectedCwd?: string | null;
+  onCwdChange?: (cwd: string | null) => void;
+  onOpenFile?: (filePath: string, fileName: string) => void;
+  explorerRefreshKey?: number;
+  onAtMention?: (relativePath: string) => void;
+}
+
+const SESSION_TRUNCATE_LIMIT = 10;
+
+async function getResponseError(label: string, res: Response): Promise<string> {
+  const fallback = `${label}: HTTP ${res.status}`;
+  try {
+    const data = await res.json() as { error?: unknown };
+    return typeof data.error === "string" && data.error ? `${label}: ${data.error}` : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return date.toLocaleDateString();
+}
+
+function shortenCwd(cwd: string, homeDir?: string): string {
+  const path = (homeDir && cwd.startsWith(homeDir)) ? "~" + cwd.slice(homeDir.length) : cwd;
+  const sep = path.includes("/") ? "/" : "\\";
+  const parts = path.split(sep).filter(Boolean);
+  if (parts.length <= 2) return path;
+  return "…/" + parts.slice(-2).join(sep);
+}
+
+function projectNameFromCwd(cwd: string, homeDir?: string): string {
+  if (!cwd) return "No Project";
+  const normalized = cwd.replace(/[\\/]+$/, "");
+  const sep = normalized.includes("/") ? "/" : "\\";
+  const name = normalized.split(sep).filter(Boolean).pop();
+  return name || shortenCwd(cwd, homeDir);
+}
+
+function getProjectDisplayName(projects: ProjectInfo[], cwd: string | null, homeDir?: string): string {
+  if (!cwd) return "Open project...";
+  return projects.find((project) => project.cwd === cwd)?.displayName || projectNameFromCwd(cwd, homeDir);
+}
+
+function projectLastAccessed(project: ProjectInfo): string {
+  return project.lastAccessed ?? project.created ?? "";
+}
+
+interface SessionTreeNode {
+  session: SessionInfo;
+  children: SessionTreeNode[];
+}
+
+function buildSessionTree(sessions: SessionInfo[]): SessionTreeNode[] {
+  const byId = new Map<string, SessionTreeNode>();
+  for (const s of sessions) {
+    byId.set(s.id, { session: s, children: [] });
+  }
+
+  // Build a map of parentSessionId chains so we can resolve missing ancestors
+  const parentOf = new Map<string, string>();
+  for (const s of sessions) {
+    if (s.parentSessionId) parentOf.set(s.id, s.parentSessionId);
+  }
+
+  // Walk up the parentSessionId chain to find the nearest ancestor that exists in byId
+  function resolveAncestor(id: string): string | null {
+    let cur = parentOf.get(id);
+    const visited = new Set<string>();
+    while (cur) {
+      if (visited.has(cur)) return null; // cycle guard
+      visited.add(cur);
+      if (byId.has(cur)) return cur;
+      cur = parentOf.get(cur);
+    }
+    return null;
+  }
+
+  const roots: SessionTreeNode[] = [];
+  for (const node of byId.values()) {
+    const ancestor = resolveAncestor(node.session.id);
+    if (ancestor) {
+      byId.get(ancestor)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  // Sort each level by modified desc
+  const sort = (nodes: SessionTreeNode[]) => {
+    nodes.sort((a, b) => b.session.modified.localeCompare(a.session.modified));
+    nodes.forEach((n) => sort(n.children));
+  };
+  sort(roots);
+  return roots;
+}
+
+function containsSession(node: SessionTreeNode, sessionId: string | null): boolean {
+  if (!sessionId) return false;
+  if (node.session.id === sessionId) return true;
+  return node.children.some((child) => containsSession(child, sessionId));
+}
+
+const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
+
+function useScramble(target: string, running: boolean): string {
+  const [display, setDisplay] = useState(target);
+  const frameRef = useRef<number | null>(null);
+  const iterRef = useRef(0);
+
+  useEffect(() => {
+    if (!running) {
+      setDisplay(target);
+      return;
+    }
+    iterRef.current = 0;
+    const totalFrames = target.length * 4;
+
+    const step = () => {
+      iterRef.current += 1;
+      const progress = iterRef.current / totalFrames;
+      const resolved = Math.floor(progress * target.length);
+
+      setDisplay(
+        target
+          .split("")
+          .map((char, i) => {
+            if (char === " ") return " ";
+            if (i < resolved) return char;
+            return SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)];
+          })
+          .join("")
+      );
+
+      if (iterRef.current < totalFrames) {
+        frameRef.current = requestAnimationFrame(step);
+      } else {
+        setDisplay(target);
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(step);
+    return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
+  }, [target, running]);
+
+  return display;
+}
+
+function AnnodexTitle() {
+  const [showVersion, setShowVersion] = useState(false);
+  const [scrambling, setScrambling] = useState(false);
+  const revertTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const target = showVersion ? `v${process.env.NEXT_PUBLIC_APP_VERSION ?? "0.0.0"}` : APP_NAME;
+  const display = useScramble(target, scrambling);
+
+  const triggerScramble = useCallback((toVersion: boolean) => {
+    setShowVersion(toVersion);
+    setScrambling(true);
+    setTimeout(() => setScrambling(false), (toVersion ? 6 : 8) * 4 * (1000 / 60) + 100);
+  }, []);
+
+  const handleClick = useCallback(() => {
+    if (revertTimerRef.current) clearTimeout(revertTimerRef.current);
+
+    const next = !showVersion;
+    triggerScramble(next);
+
+    if (next) {
+      revertTimerRef.current = setTimeout(() => triggerScramble(false), 3000);
+    }
+  }, [showVersion, triggerScramble]);
+
+  useEffect(() => () => { if (revertTimerRef.current) clearTimeout(revertTimerRef.current); }, []);
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{
+        background: "none", border: "none", padding: 0, cursor: "default",
+        fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em",
+        color: showVersion ? "var(--accent)" : "var(--text)",
+        fontFamily: "var(--font-mono)",
+        minWidth: "9ch",
+      }}
+    >
+      {display}
+    </button>
+  );
+}
+
+export function SessionSidebar({ selectedSessionId, onSelectSession, onNewSession, initialSessionId, onInitialRestoreDone, refreshKey, onSessionDeleted, selectedCwd: selectedCwdProp, onCwdChange, onOpenFile, explorerRefreshKey, onAtMention }: Props) {
+  const [allSessions, setAllSessions] = useState<SessionInfo[]>([]);
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCwd, setSelectedCwd] = useState<string | null>(null);
+  const [homeDir, setHomeDir] = useState<string>("");
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [customPathError, setCustomPathError] = useState<string | null>(null);
+  const [folderPickerOpen, setFolderPickerOpen] = useState(false);
+  const [conversationSearchOpen, setConversationSearchOpen] = useState(false);
+  const [sessionsExpanded, setSessionsExpanded] = useState(false);
+  const selectingSessionRef = useRef(false);
+  const projectSelectSyncRef = useRef(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const restoredRef = useRef(false);
+  const [projectOpen, setProjectOpen] = useState(true);
+  const [chatsOpen, setChatsOpen] = useState(true);
+  const [explorerOpen, setExplorerOpen] = useState(true);
+  const [explorerKey, setExplorerKey] = useState(0);
+  const [explorerFileFilter, setExplorerFileFilter] = useState("");
+  const loadProjects = useCallback(async (showLoading = false) => {
+    try {
+      if (showLoading) setLoading(true);
+      const projectsRes = await fetch("/api/projects?sessionStats=1");
+      if (!projectsRes.ok) throw new Error(await getResponseError("projects", projectsRes));
+      const projectsData = await projectsRes.json() as { projects: ProjectInfo[] };
+      setProjects(projectsData.projects);
+      setError(null);
+      // no-op — refresh signal handled by re-render
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  }, []);
+
+  const loadSessionsForCwd = useCallback(async (cwd: string | null, showLoading = false) => {
+    if (!cwd) {
+      setAllSessions([]);
+      return;
+    }
+    try {
+      if (showLoading) setLoading(true);
+      const sessionsRes = await fetch(`/api/sessions?cwd=${encodeURIComponent(cwd)}`);
+      if (!sessionsRes.ok) throw new Error(await getResponseError("sessions", sessionsRes));
+      const sessionsData = await sessionsRes.json() as { sessions: SessionInfo[] };
+      setAllSessions(sessionsData.sessions);
+      setError(null);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  }, []);
+
+  const initialLoadDone = useRef(false);
+  useEffect(() => {
+    const isFirst = !initialLoadDone.current;
+    initialLoadDone.current = true;
+    loadProjects(isFirst);
+  }, [loadProjects, refreshKey]);
+
+  useEffect(() => {
+    if (explorerRefreshKey !== undefined) setExplorerKey((k) => k + 1);
+  }, [explorerRefreshKey]);
+
+  useEffect(() => {
+    fetch("/api/home").then((r) => r.json()).then((d: { home?: string }) => {
+      if (d.home) setHomeDir(d.home);
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (selectingSessionRef.current) {
+      selectingSessionRef.current = false;
+      return;
+    }
+    if (projectSelectSyncRef.current) {
+      projectSelectSyncRef.current = false;
+      return;
+    }
+    onCwdChange?.(selectedCwd);
+  }, [selectedCwd, onCwdChange]);
+
+  const registerProject = useCallback(async (cwd: string, create = false): Promise<boolean> => {
+    try {
+      const res = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd, create }),
+      });
+      const data = await res.json() as { error?: string };
+      if (!res.ok || data.error) {
+        setCustomPathError(data.error ?? `HTTP ${res.status}`);
+        return false;
+      }
+      void loadProjects(false);
+      return true;
+    } catch (error) {
+      setCustomPathError(error instanceof Error ? error.message : String(error));
+      return false;
+    }
+  }, [loadProjects]);
+
+  const touchProject = useCallback((cwd: string) => {
+    fetch("/api/projects", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ cwd, touch: true }),
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!initialSessionId || restoredRef.current) return;
+    let cancelled = false;
+    fetch("/api/sessions")
+      .then((res) => res.ok ? res.json() : null)
+      .then((data: { sessions?: SessionInfo[] } | null) => {
+        if (cancelled || restoredRef.current) return;
+        const target = data?.sessions?.find((session) => session.id === initialSessionId);
+        if (!target) return;
+        restoredRef.current = true;
+        setSelectedCwd(target.cwd);
+        touchProject(target.cwd);
+        onSelectSession(target, true);
+      })
+      .finally(() => {
+        if (!cancelled && !restoredRef.current) onInitialRestoreDone?.();
+      });
+    return () => { cancelled = true; };
+  }, [initialSessionId, onInitialRestoreDone, onSelectSession, touchProject]);
+
+  const chooseProject = useCallback((cwd: string) => {
+    projectSelectSyncRef.current = true;
+    setSelectedCwd(cwd);
+    setSessionsExpanded(false);
+    setExplorerOpen(true);
+    setExplorerFileFilter("");
+    setExplorerKey((k) => k + 1);
+    onCwdChange?.(cwd);
+    touchProject(cwd);
+  }, [onCwdChange, touchProject]);
+
+  // Auto-select cwd and restore session from URL on first load
+  useEffect(() => {
+    if (allSessions.length === 0 && projects.length === 0) return;
+
+    if (selectedCwd === null) {
+      if (initialSessionId && !restoredRef.current) return;
+      const firstProject = projects[0]?.cwd;
+      if (firstProject) {
+        setSelectedCwd(firstProject);
+        touchProject(firstProject);
+      }
+    }
+  }, [allSessions, projects, selectedCwd, initialSessionId, onSelectSession, onInitialRestoreDone, touchProject]);
+
+  const handleDefaultCwd = useCallback(async () => {
+    try {
+      const res = await fetch("/api/default-cwd", { method: "POST" });
+      const data = await res.json() as { cwd?: string; error?: string };
+      if (data.cwd) {
+        await registerProject(data.cwd, false);
+        chooseProject(data.cwd);
+        setDropdownOpen(false);
+      }
+    } catch {
+      // ignore
+    }
+  }, [chooseProject, registerProject]);
+
+  const handleFolderPickerSelect = useCallback(async (path: string) => {
+    const ok = await registerProject(path, false);
+    if (!ok) return;
+    chooseProject(path);
+    setFolderPickerOpen(false);
+    setCustomPathError(null);
+    setDropdownOpen(false);
+  }, [chooseProject, registerProject]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setDropdownOpen(false);
+        setCustomPathError(null);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const effectiveCwd = selectedCwdProp ?? selectedCwd;
+
+  const handleRefreshProject = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      await Promise.all([
+        loadProjects(false),
+        loadSessionsForCwd(effectiveCwd, false),
+      ]);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [effectiveCwd, loadProjects, loadSessionsForCwd]);
+
+  useEffect(() => {
+    void loadSessionsForCwd(effectiveCwd, false);
+  }, [effectiveCwd, loadSessionsForCwd, refreshKey]);
+
+  const createSessionInCwd = useCallback((cwd: string | null) => {
+    if (!cwd) {
+      setDropdownOpen(true);
+      return;
+    }
+    // Generate a temporary UUID client-side — no backend call needed.
+    // Pi will be spawned lazily when the user sends the first message.
+    const tempId = typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID()
+      : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+    onNewSession?.(tempId, cwd);
+  }, [onNewSession]);
+
+  const handleNewSession = useCallback(() => {
+    createSessionInCwd(effectiveCwd);
+  }, [createSessionInCwd, effectiveCwd]);
+
+  const sortedProjects = useMemo(() => {
+    const withActive = effectiveCwd && !projects.some((project) => project.cwd === effectiveCwd)
+      ? [{
+          cwd: effectiveCwd,
+          displayName: projectNameFromCwd(effectiveCwd, homeDir),
+          chatCount: allSessions.filter((session) => session.cwd === effectiveCwd).length,
+          lastAccessed: null,
+          created: null,
+          exists: true,
+          source: "manual" as const,
+        }]
+      : [];
+    return [...withActive, ...projects].sort((a, b) => {
+      if (effectiveCwd && a.cwd === effectiveCwd) return -1;
+      if (effectiveCwd && b.cwd === effectiveCwd) return 1;
+      const aTime = projectLastAccessed(a);
+      const bTime = projectLastAccessed(b);
+      if (aTime !== bTime) return bTime.localeCompare(aTime);
+      return a.displayName.localeCompare(b.displayName);
+    });
+  }, [allSessions, effectiveCwd, homeDir, projects]);
+
+  const currentProjectSessions = useMemo(
+    () => allSessions
+      .filter((session) => session.cwd === effectiveCwd)
+      .sort((a, b) => b.modified.localeCompare(a.modified)),
+    [allSessions, effectiveCwd],
+  );
+
+  const currentProject = effectiveCwd
+    ? sortedProjects.find((project) => project.cwd === effectiveCwd)
+    : undefined;
+  const currentProjectName = getProjectDisplayName(sortedProjects, effectiveCwd, homeDir);
+  const currentChatCount = currentProject?.chatCount ?? currentProjectSessions.length;
+  const currentSessionTree = useMemo(() => buildSessionTree(currentProjectSessions), [currentProjectSessions]);
+  const flatRootCount = currentSessionTree.length;
+  let visibleSessionTree = currentSessionTree;
+  if (flatRootCount > SESSION_TRUNCATE_LIMIT && !sessionsExpanded) {
+    visibleSessionTree = currentSessionTree.slice(0, SESSION_TRUNCATE_LIMIT);
+    const activeRoot = currentSessionTree.find((node) => containsSession(node, selectedSessionId));
+    if (activeRoot && !visibleSessionTree.includes(activeRoot)) visibleSessionTree = [...visibleSessionTree, activeRoot];
+  }
+  const hiddenSessionCount = flatRootCount - visibleSessionTree.length;
+
+  const handleSelectSessionFromList = useCallback((session: SessionInfo, isRestore = false) => {
+    if (session.cwd !== effectiveCwd) {
+      selectingSessionRef.current = true;
+      setSelectedCwd(session.cwd);
+    }
+    touchProject(session.cwd);
+    onSelectSession(session, isRestore);
+  }, [onSelectSession, effectiveCwd, touchProject]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      {/* Header */}
+      <div
+        style={{
+          padding: "12px 10px 10px",
+          borderBottom: "1px solid var(--border)",
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
+          <AnnodexTitle />
+          <div style={{ display: "flex", gap: 6 }}>
+            <button
+              onClick={handleNewSession}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
+                background: "var(--bg-hover)",
+                border: "1px solid var(--border)",
+                color: "var(--text-muted)",
+                cursor: "pointer",
+                height: 32,
+                paddingLeft: 10,
+                paddingRight: 12,
+                borderRadius: 7,
+                fontSize: 12,
+                fontWeight: 500,
+                letterSpacing: "-0.01em",
+                flexShrink: 0,
+                transition: "background 0.12s, color 0.12s, border-color 0.12s",
+              }}
+              title={effectiveCwd ? `New session in ${effectiveCwd}` : "Select a project first"}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "var(--bg-selected)";
+                e.currentTarget.style.color = "var(--accent)";
+                e.currentTarget.style.borderColor = "rgba(37,99,235,0.35)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "var(--bg-hover)";
+                e.currentTarget.style.color = "var(--text-muted)";
+                e.currentTarget.style.borderColor = "var(--border)";
+              }}
+            >
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+                <line x1="6" y1="1" x2="6" y2="11" />
+                <line x1="1" y1="6" x2="11" y2="6" />
+              </svg>
+              New
+            </button>
+            <button
+              onClick={() => setConversationSearchOpen(true)}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center",
+                background: "var(--bg-hover)",
+                border: "1px solid var(--border)",
+                color: "var(--text-muted)",
+                cursor: "pointer",
+                width: 32, height: 32,
+                borderRadius: 7,
+                padding: 0,
+                flexShrink: 0,
+                transition: "background 0.12s, color 0.12s, border-color 0.12s",
+              }}
+              title="Search conversations"
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "var(--bg-selected)";
+                e.currentTarget.style.color = "var(--accent)";
+                e.currentTarget.style.borderColor = "rgba(37,99,235,0.35)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "var(--bg-hover)";
+                e.currentTarget.style.color = "var(--text-muted)";
+                e.currentTarget.style.borderColor = "var(--border)";
+              }}
+            >
+              <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="7" cy="7" r="4.4" />
+                <path d="M10.4 10.4 13.2 13.2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Project picker */}
+        <div ref={dropdownRef} style={{ position: "relative" }}>
+          <div style={{ marginBottom: projectOpen ? 5 : 0, display: "flex", alignItems: "center", justifyContent: "space-between", color: "var(--text-dim)" }}>
+            <button
+              type="button"
+              onClick={() => {
+                setProjectOpen((value) => {
+                  const next = !value;
+                  if (!next) setDropdownOpen(false);
+                  return next;
+                });
+                void handleRefreshProject();
+              }}
+              title={projectOpen ? "Collapse project" : "Expand project"}
+              aria-expanded={projectOpen}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "4px 0",
+                background: "none",
+                border: "none",
+                color: "var(--text-dim)",
+                cursor: "pointer",
+                fontSize: 10,
+                fontWeight: 600,
+                letterSpacing: "0.05em",
+                textTransform: "uppercase",
+                textAlign: "left",
+              }}
+            >
+              <svg
+                width="9"
+                height="9"
+                viewBox="0 0 10 10"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{ transform: projectOpen ? "rotate(90deg)" : "none", transition: "transform 0.15s", flexShrink: 0 }}
+              >
+                <polyline points="3 2 7 5 3 8" />
+              </svg>
+              Project
+            </button>
+            <button
+              type="button"
+              onClick={(event) => {
+                event.stopPropagation();
+                void handleRefreshProject();
+              }}
+              disabled={isRefreshing}
+              title="Refresh projects and chats"
+              aria-label="Refresh projects and chats"
+              style={{
+                width: 22,
+                height: 22,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 0,
+                border: "1px solid var(--border)",
+                borderRadius: 5,
+                background: "var(--bg-panel)",
+                color: isRefreshing ? "var(--accent)" : "var(--text-dim)",
+                cursor: isRefreshing ? "default" : "pointer",
+                flexShrink: 0,
+                transition: "color 0.12s, background 0.12s, border-color 0.12s",
+              }}
+              onMouseEnter={(event) => {
+                if (isRefreshing) return;
+                event.currentTarget.style.color = "var(--text)";
+                event.currentTarget.style.background = "var(--bg-hover)";
+              }}
+              onMouseLeave={(event) => {
+                if (isRefreshing) return;
+                event.currentTarget.style.color = "var(--text-dim)";
+                event.currentTarget.style.background = "var(--bg-panel)";
+              }}
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{ animation: isRefreshing ? "spin 0.9s linear infinite" : undefined }}
+              >
+                <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>
+            </button>
+          </div>
+
+          {projectOpen && (
+            <>
+              <button
+                onClick={() => setDropdownOpen((v) => !v)}
+                style={{
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 9,
+                  padding: "8px 10px",
+                  background: effectiveCwd ? "var(--bg-hover)" : "rgba(37,99,235,0.06)",
+                  border: effectiveCwd ? "1px solid var(--border)" : "1px solid rgba(37,99,235,0.4)",
+                  borderRadius: 7,
+                  cursor: "pointer",
+                  fontSize: 12,
+                  color: "var(--text)",
+                  textAlign: "left",
+                  transition: "border-color 0.15s, background 0.15s",
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ color: effectiveCwd ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }}>
+                  <path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2.5h6.5A2.5 2.5 0 0 1 21 9v8.5A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z" />
+                </svg>
+                <span style={{ flex: 1, minWidth: 0 }}>
+                  <span style={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 12, fontWeight: 650, color: effectiveCwd ? "var(--text)" : "var(--text-dim)" }}>
+                    {effectiveCwd ? currentProjectName : (initialSessionId && !restoredRef.current ? "" : "Open project...")}
+                  </span>
+                  {effectiveCwd && (
+                    <span style={{ display: "block", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-dim)" }} title={effectiveCwd}>
+                      {shortenCwd(effectiveCwd, homeDir)}
+                    </span>
+                  )}
+                </span>
+                {effectiveCwd && (
+                  <span style={{ flexShrink: 0, color: "var(--text-dim)", fontSize: 10, whiteSpace: "nowrap" }}>
+                    {currentChatCount} chats
+                  </span>
+                )}
+                <svg width="11" height="11" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-dim)", flexShrink: 0, transform: dropdownOpen ? "rotate(180deg)" : "none", transition: "transform 0.15s" }}>
+                  <polyline points="2 3.5 5 6.5 8 3.5" />
+                </svg>
+              </button>
+
+              {dropdownOpen && (
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "calc(100% + 4px)",
+                    left: 0,
+                    right: 0,
+                    zIndex: 100,
+                    background: "var(--bg)",
+                    border: "1px solid var(--border)",
+                    borderRadius: 8,
+                    boxShadow: "0 6px 20px rgba(0,0,0,0.10)",
+                    overflow: "hidden",
+                  }}
+                >
+                  <div style={{ maxHeight: 260, overflowY: "auto" }}>
+                    {sortedProjects.length === 0 && (
+                      <div style={{ padding: "10px 12px", color: "var(--text-muted)", fontSize: 12 }}>
+                        No projects yet
+                      </div>
+                    )}
+                    {sortedProjects.map((project) => {
+                      const active = project.cwd === effectiveCwd;
+                      const last = projectLastAccessed(project);
+                      return (
+                        <button
+                          key={project.cwd}
+                          onClick={() => {
+                            chooseProject(project.cwd);
+                            setCustomPathError(null);
+                            setDropdownOpen(false);
+                          }}
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            width: "100%",
+                            padding: "8px 10px",
+                            background: active ? "var(--bg-selected)" : "none",
+                            border: "none",
+                            borderBottom: "1px solid var(--border)",
+                            color: active ? "var(--text)" : "var(--text-muted)",
+                            cursor: "pointer",
+                            textAlign: "left",
+                            fontSize: 11,
+                          }}
+                          title={project.cwd}
+                        >
+                          {active ? (
+                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+                              <polyline points="1.5 5 4 7.5 8.5 2.5" />
+                            </svg>
+                          ) : (
+                            <span style={{ width: 10, flexShrink: 0 }} />
+                          )}
+                          <span style={{ flex: 1, minWidth: 0 }}>
+                            <span style={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: active ? "var(--text)" : "var(--text-muted)", fontWeight: active ? 650 : 500 }}>
+                              {project.displayName}
+                            </span>
+                            <span style={{ display: "block", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--text-dim)", fontSize: 10 }}>
+                              {project.chatCount} chats{last ? ` / ${formatRelativeTime(last)}` : ""}{!project.exists ? " / missing" : ""}
+                            </span>
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+
+                  <div style={{ borderTop: sortedProjects.length > 0 ? "1px solid var(--border)" : "none" }}>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); handleDefaultCwd(); }}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 7,
+                        width: "100%",
+                        padding: "8px 10px",
+                        background: "none",
+                        border: "none",
+                        color: "var(--text-muted)",
+                        cursor: "pointer",
+                        textAlign: "left",
+                        fontSize: 11,
+                      }}
+                    >
+                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+                        <path d="M1 3A1 1 0 0 1 2 2H4L5 3.5H8.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7A.5.5 0 0 1 1 8V3Z" />
+                      </svg>
+                      <span>Use default directory</span>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setCustomPathError(null);
+                        setFolderPickerOpen(true);
+                      }}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 7,
+                        width: "100%",
+                        padding: "8px 10px",
+                        background: "none",
+                        border: "none",
+                        color: "var(--text-muted)",
+                        cursor: "pointer",
+                        textAlign: "left",
+                        fontSize: 11,
+                      }}
+                    >
+                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+                        <path d="M1 3A1 1 0 0 1 2 2h1.5L4.5 3H8a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3Z" />
+                        <path d="M5 4.5v3M3.5 6h3" />
+                      </svg>
+                      <span>Select project path...</span>
+                    </button>
+                    {customPathError && (
+                      <div style={{ padding: "0 10px 8px 27px", color: "#f87171", fontSize: 10, lineHeight: 1.4 }}>
+                        {customPathError}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+      </div>
+
+      <ConversationSearch
+        open={conversationSearchOpen}
+        cwd={effectiveCwd}
+        homeDir={homeDir}
+        onClose={() => setConversationSearchOpen(false)}
+        onSelectSession={(session) => {
+          handleSelectSessionFromList(session);
+        }}
+      />
+
+      {/* Chats section */}
+      {effectiveCwd && (
+        <div style={{ padding: "0 10px 4px", display: "flex", alignItems: "center", justifyContent: "space-between", color: "var(--text-dim)", flexShrink: 0 }}>
+          <button
+            type="button"
+            onClick={() => setChatsOpen((v) => !v)}
+            title={chatsOpen ? "Collapse chats" : "Expand chats"}
+            aria-expanded={chatsOpen}
+            style={{
+              display: "flex", alignItems: "center", gap: 6,
+              padding: "4px 0", background: "none", border: "none",
+              color: "var(--text-dim)", cursor: "pointer",
+              fontSize: 10, fontWeight: 600, letterSpacing: "0.05em",
+              textTransform: "uppercase", textAlign: "left",
+            }}
+          >
+            <svg
+              width="9" height="9" viewBox="0 0 10 10" fill="none"
+              stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
+              style={{ transform: chatsOpen ? "rotate(90deg)" : "none", transition: "transform 0.15s", flexShrink: 0 }}
+            >
+              <polyline points="3 2 7 5 3 8" />
+            </svg>
+            Chats
+          </button>
+          <span style={{ fontSize: 10, fontWeight: 500 }}>{currentChatCount} sessions</span>
+        </div>
+      )}
+
+      {/* Current project sessions */}
+      {chatsOpen && (
+      <div style={{ flex: explorerOpen && effectiveCwd ? "1 1 0" : "1 1 auto", overflowY: "auto", padding: "6px 8px 8px", minHeight: 120 }}>
+        {loading && (
+          <div style={{ padding: "16px 14px", color: "var(--text-muted)", fontSize: 12 }}>
+            Loading...
+          </div>
+        )}
+        {error && (
+          <div style={{ padding: "12px 14px", color: "#f87171", fontSize: 12 }}>
+            {error}
+          </div>
+        )}
+        {!loading && !error && !effectiveCwd && (
+          <div style={{ padding: "16px 14px", color: "var(--text-muted)", fontSize: 12 }}>
+            Open or create a project to start chatting.
+          </div>
+        )}
+        {!loading && !error && effectiveCwd && (
+          <>
+            {currentProjectSessions.length === 0 ? (
+              <button
+                type="button"
+                onClick={() => createSessionInCwd(effectiveCwd)}
+                style={{
+                  width: "100%",
+                  padding: "12px",
+                  background: "transparent",
+                  border: "none",
+                  color: "var(--text-muted)",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  fontSize: 12,
+                }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text)"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text-muted)"; }}
+              >
+                Start a new session in this project
+              </button>
+            ) : (
+              visibleSessionTree.map((node) => (
+                <SessionTreeItem
+                  key={node.session.id}
+                  node={node}
+                  selectedSessionId={selectedSessionId}
+                  onSelectSession={handleSelectSessionFromList}
+                  onRenamed={() => loadSessionsForCwd(effectiveCwd, false)}
+                  onSessionDeleted={(id) => {
+                    onSessionDeleted?.(id);
+                    void loadSessionsForCwd(effectiveCwd, false);
+                  }}
+                  depth={0}
+                />
+              ))
+            )}
+            {(sessionsExpanded || hiddenSessionCount > 0) && flatRootCount > SESSION_TRUNCATE_LIMIT && (
+              <button
+                type="button"
+                onClick={() => setSessionsExpanded((value) => !value)}
+                style={{
+                  width: "100%",
+                  padding: "6px 10px",
+                  background: "transparent",
+                  border: "none",
+                  color: "var(--text-dim)",
+                  cursor: "pointer",
+                  fontSize: 11,
+                  textAlign: "center",
+                }}
+              >
+                {sessionsExpanded ? "Show less" : `Show ${Math.max(0, hiddenSessionCount)} more`}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+      )}
+
+      {/* File Explorer section */}
+      {effectiveCwd && (
+        <div
+          style={{
+            borderTop: "1px solid var(--border)",
+            display: "flex",
+            flexDirection: "column",
+            flex: explorerOpen ? "1 1 0" : "0 0 auto",
+            minHeight: 0,
+            overflow: "hidden",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", flexShrink: 0, gap: 0, padding: "2px 4px" }}>
+            <button
+              onClick={() => {
+                setExplorerOpen((v) => !v);
+                setExplorerKey((k) => k + 1);
+              }}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "6px 6px 6px 6px",
+                background: "none",
+                border: "none",
+                color: "var(--text-muted)",
+                cursor: "pointer",
+                fontSize: 11,
+                fontWeight: 600,
+                letterSpacing: "0.05em",
+                textTransform: "uppercase",
+                textAlign: "left",
+                flexShrink: 0,
+              }}
+            >
+              <svg
+                width="9" height="9" viewBox="0 0 10 10" fill="none"
+                stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
+                style={{ transform: explorerOpen ? "rotate(90deg)" : "none", transition: "transform 0.15s", flexShrink: 0 }}
+              >
+                <polyline points="3 2 7 5 3 8" />
+              </svg>
+              Explorer
+            </button>
+            <div style={{ position: "relative", flex: 1, minWidth: 0 }}>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{
+                  position: "absolute",
+                  left: 8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--text-dim)",
+                  pointerEvents: "none",
+                }}
+              >
+                <circle cx="7" cy="7" r="4.4" />
+                <path d="M10.4 10.4 13.2 13.2" />
+              </svg>
+              <input
+                value={explorerFileFilter}
+                onChange={(e) => setExplorerFileFilter(e.target.value)}
+                placeholder="Filter files..."
+                style={{
+                  width: "100%",
+                  height: 28,
+                  boxSizing: "border-box",
+                  padding: "0 26px 0 26px",
+                  borderRadius: 6,
+                  border: "1px solid var(--border)",
+                  background: "var(--bg)",
+                  color: "var(--text)",
+                  fontSize: 12,
+                  outline: "none",
+                }}
+              />
+              {explorerFileFilter && (
+                <button
+                  type="button"
+                  onClick={() => setExplorerFileFilter("")}
+                  title="Clear filter"
+                  style={{
+                    position: "absolute",
+                    right: 4,
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    width: 20,
+                    height: 20,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "none",
+                    borderRadius: 4,
+                    background: "transparent",
+                    color: "var(--text-dim)",
+                    cursor: "pointer",
+                    padding: 0,
+                  }}
+                >
+                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+                    <line x1="2" y1="2" x2="8" y2="8" />
+                    <line x1="8" y1="2" x2="2" y2="8" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          </div>
+          {explorerOpen && (
+            <div style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}>
+              <FileExplorer
+                cwd={effectiveCwd}
+                onOpenFile={onOpenFile ?? (() => {})}
+                refreshKey={explorerKey}
+                onAtMention={onAtMention}
+                searchQuery={explorerFileFilter}
+                onSearchChange={setExplorerFileFilter}
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <ProjectFolderPicker
+        open={folderPickerOpen}
+        initialPath={effectiveCwd || homeDir || null}
+        onClose={() => setFolderPickerOpen(false)}
+        onSelect={(path) => void handleFolderPickerSelect(path)}
+      />
+    </div>
+  );
+}
+
+function SessionTreeItem({
+  node,
+  selectedSessionId,
+  onSelectSession,
+  onRenamed,
+  onSessionDeleted,
+  depth,
+}: {
+  node: SessionTreeNode;
+  selectedSessionId: string | null;
+  onSelectSession: (s: SessionInfo) => void;
+  onRenamed?: () => void;
+  onSessionDeleted?: (id: string) => void;
+  depth: number;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const hasChildren = node.children.length > 0;
+
+  return (
+    <div>
+      <div style={{ position: "relative" }}>
+        {/* Indent line for child sessions */}
+        {depth > 0 && (
+          <div style={{
+            position: "absolute",
+            left: depth * 12 + 6,
+            top: 0, bottom: 0,
+            width: 1,
+            background: "var(--border)",
+            pointerEvents: "none",
+          }} />
+        )}
+        <SessionItem
+          session={node.session}
+          isSelected={node.session.id === selectedSessionId}
+          onClick={() => onSelectSession(node.session)}
+          onRenamed={onRenamed}
+          onDeleted={(id) => onSessionDeleted?.(id)}
+          depth={depth}
+          hasChildren={hasChildren}
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed((v) => !v)}
+        />
+      </div>
+      {hasChildren && !collapsed && (
+        <div>
+          {node.children.map((child) => (
+            <SessionTreeItem
+              key={child.session.id}
+              node={child}
+              selectedSessionId={selectedSessionId}
+              onSelectSession={onSelectSession}
+              onRenamed={onRenamed}
+              onSessionDeleted={onSessionDeleted}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SessionItem({
+  session,
+  isSelected,
+  onClick,
+  onRenamed,
+  onDeleted,
+  depth = 0,
+  hasChildren = false,
+  collapsed = false,
+  onToggleCollapse,
+}: {
+  session: SessionInfo;
+  isSelected: boolean;
+  onClick: () => void;
+  onRenamed?: () => void;
+  onDeleted?: (id: string) => void;
+  depth?: number;
+  hasChildren?: boolean;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState("");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const title = session.name || session.firstMessage.slice(0, 50) || session.id.slice(0, 12);
+
+  const startRename = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setRenameValue(session.name ?? "");
+    setRenaming(true);
+    setTimeout(() => inputRef.current?.select(), 0);
+  }, [session.name]);
+
+  const commitRename = useCallback(async () => {
+    const name = renameValue.trim();
+    setRenaming(false);
+    if (name === (session.name ?? "")) return;
+    try {
+      await fetch(`/api/sessions/${encodeURIComponent(session.id)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      onRenamed?.();
+    } catch {
+      // ignore
+    }
+  }, [renameValue, session.id, session.name, onRenamed]);
+
+  const handleDeleteClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setConfirmDelete(true);
+  }, []);
+
+  const handleDeleteConfirm = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setConfirmDelete(false);
+    setDeleting(true);
+    try {
+      await fetch(`/api/sessions/${encodeURIComponent(session.id)}`, { method: "DELETE" });
+      onDeleted?.(session.id);
+    } catch {
+      setDeleting(false);
+    }
+  }, [session.id, onDeleted]);
+
+  const handleDeleteCancel = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setConfirmDelete(false);
+  }, []);
+
+  // Fixed-height outer wrapper — content swaps in place so the list never reflows
+  const ITEM_HEIGHT = 54;
+
+  return (
+    <div
+      onClick={confirmDelete || renaming ? undefined : onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => { setHovered(false); }}
+      style={{
+        height: ITEM_HEIGHT,
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: depth > 0 ? depth * 12 + 14 : 14,
+        paddingRight: 8,
+        cursor: confirmDelete || renaming ? "default" : "pointer",
+        background: confirmDelete
+          ? "rgba(239,68,68,0.06)"
+          : isSelected ? "var(--bg-selected)" : hovered ? "var(--bg-hover)" : "transparent",
+        borderLeft: confirmDelete
+          ? "2px solid #ef4444"
+          : isSelected ? "2px solid var(--accent)" : "2px solid transparent",
+        transition: "background 0.1s",
+        opacity: deleting ? 0.5 : 1,
+        gap: 6,
+        overflow: "hidden",
+      }}
+    >
+      {confirmDelete ? (
+        /* ── Delete confirmation: same height, two flat buttons ── */
+        <>
+          <div style={{ flex: 1, minWidth: 0, fontSize: 12, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+            Delete <span style={{ fontWeight: 600 }}>&ldquo;{title.slice(0, 22)}{title.length > 22 ? "…" : ""}&rdquo;</span>?
+          </div>
+          <div style={{ display: "flex", gap: 5, flexShrink: 0 }}>
+            <button
+              onClick={handleDeleteConfirm}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center", gap: 4,
+                height: 30, padding: "0 11px",
+                background: "#ef4444", border: "none",
+                borderRadius: 6, color: "#fff",
+                cursor: "pointer", fontSize: 12, fontWeight: 600,
+                whiteSpace: "nowrap",
+              }}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="3 6 5 6 21 6" />
+                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                <path d="M10 11v6M14 11v6" />
+                <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+              </svg>
+              Delete
+            </button>
+            <button
+              onClick={handleDeleteCancel}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center",
+                height: 30, padding: "0 11px",
+                background: "var(--bg)", border: "1px solid var(--border)",
+                borderRadius: 6, color: "var(--text-muted)",
+                cursor: "pointer", fontSize: 12, fontWeight: 500,
+                whiteSpace: "nowrap",
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </>
+      ) : renaming ? (
+        /* ── Rename: input fills the same row ── */
+        <input
+          ref={inputRef}
+          value={renameValue}
+          onChange={(e) => setRenameValue(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitRename();
+            if (e.key === "Escape") setRenaming(false);
+          }}
+          autoFocus
+          style={{
+            flex: 1,
+            fontSize: 12,
+            padding: "5px 8px",
+            border: "1px solid var(--accent)",
+            borderRadius: 5,
+            outline: "none",
+            background: "var(--bg)",
+            color: "var(--text)",
+            height: 30,
+          }}
+        />
+      ) : (
+        /* ── Normal view ── */
+        <>
+          {/* Fork indicator for child sessions */}
+          {depth > 0 && (
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+              <line x1="6" y1="3" x2="6" y2="15" />
+              <circle cx="18" cy="6" r="3" />
+              <circle cx="6" cy="18" r="3" />
+              <path d="M18 9a9 9 0 0 1-9 9" />
+            </svg>
+          )}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: isSelected ? 500 : 400,
+                lineHeight: 1.4,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: "var(--text)",
+              }}
+              title={title}
+            >
+              {title}
+            </div>
+            <div style={{ marginTop: 2, display: "flex", gap: 8, color: "var(--text-dim)", fontSize: 11 }}>
+              <span title={session.modified}>{formatRelativeTime(session.modified)}</span>
+              <span>{session.messageCount} msgs</span>
+              {session.cwdExists === false && (
+                <span title={`Project path missing: ${session.cwd}`} style={{ color: "#f87171" }}>
+                  missing path
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Collapse toggle — always visible when has children */}
+          {hasChildren && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onToggleCollapse?.(); }}
+              title={collapsed ? "Expand forks" : "Collapse forks"}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center",
+                width: 20, height: 20, padding: 0, flexShrink: 0,
+                background: "none", border: "none",
+                color: "var(--text-dim)", cursor: "pointer",
+                transform: collapsed ? "rotate(-90deg)" : "none",
+                transition: "transform 0.15s",
+              }}
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="2 3.5 5 6.5 8 3.5" />
+              </svg>
+            </button>
+          )}
+
+          {/* Action buttons — shown on hover */}
+          {hovered && (
+            <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
+              <button
+                onClick={startRename}
+                title="Rename"
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 32, height: 32, padding: 0,
+                  background: "var(--bg-hover)", border: "1px solid var(--border)",
+                  borderRadius: 7, color: "var(--text-muted)",
+                  cursor: "pointer", flexShrink: 0,
+                  transition: "background 0.12s, color 0.12s, border-color 0.12s",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "var(--bg-selected)";
+                  e.currentTarget.style.color = "var(--accent)";
+                  e.currentTarget.style.borderColor = "rgba(37,99,235,0.35)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "var(--bg-hover)";
+                  e.currentTarget.style.color = "var(--text-muted)";
+                  e.currentTarget.style.borderColor = "var(--border)";
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+                </svg>
+              </button>
+              <button
+                onClick={handleDeleteClick}
+                title="Delete"
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 32, height: 32, padding: 0,
+                  background: "var(--bg-hover)", border: "1px solid var(--border)",
+                  borderRadius: 7, color: "var(--text-muted)",
+                  cursor: "pointer", flexShrink: 0,
+                  transition: "background 0.12s, color 0.12s, border-color 0.12s",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "rgba(239,68,68,0.08)";
+                  e.currentTarget.style.color = "#ef4444";
+                  e.currentTarget.style.borderColor = "rgba(239,68,68,0.35)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "var(--bg-hover)";
+                  e.currentTarget.style.color = "var(--text-muted)";
+                  e.currentTarget.style.borderColor = "var(--border)";
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                  <path d="M10 11v6M14 11v6" />
+                  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}