@seqyuan/annodex 0.1.12 → 0.1.14

package/components/SessionSidebar.tsx

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