feat: replace header dropdowns with collapsible sidebar tree

- Add Sidebar.tsx: project/session tree with inline rename, collapse/resize
- App.tsx: load all sessions at startup, sync selectedProject on session click
- Header.tsx: strip project/session UI, keep only right-side controls
- globals.css: add .main-layout, sidebar, item, and activity-dot styles
- Chat pane: move toggle button to left, use triangle icons matching sidebar

5 files changed, 799 insertions, 292 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index b2cd168..719faac 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Header } from "./components/Header";
+import { Sidebar } from "./components/Sidebar";
 import { DocumentPane } from "./components/DocumentPane";
 import { ChatPane } from "./components/ChatPane";
 import { ActionBar } from "./components/ActionBar";
@@ -51,8 +52,14 @@ export function App() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [documentContent, setDocumentContent] = useState<string>("");
   const [originalContent, setOriginalContent] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [activityStatus, setActivityStatus] = useState<string | null>(null);
+  // Per-session loading/activity state so switching sessions doesn't inherit
+  // another session's "Thinking" indicator.
+  const [loadingBySession, setLoadingBySession] = useState<Record<string, boolean>>({});
+  const [activityBySession, setActivityBySession] = useState<Record<string, string | null>>({});
+
+  const isLoading = selectedSession ? (loadingBySession[selectedSession.id] ?? false) : false;
+  const activityStatus = selectedSession ? (activityBySession[selectedSession.id] ?? null) : null;
+
   const [tokenUsage, setTokenUsage] = useState<TokenUsage>({
     inputTokens: 0,
     outputTokens: 0,
@@ -65,12 +72,42 @@ export function App() {
     () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
   );
 
+  // Which phase's artifact is currently displayed in the DocumentPane.
+  // Defaults to the session's current phase; can be overridden to view
+  // a historical artifact (e.g. research.md while in implement phase).
+  const [viewPhase, setViewPhase] = useState<Phase>(
+    (selectedSession?.phase ?? "research") as Phase
+  );
+
+  // Reset viewPhase whenever the active session or its phase changes.
+  useEffect(() => {
+    setViewPhase((selectedSession?.phase ?? "research") as Phase);
+  }, [selectedSession?.id, selectedSession?.phase]);
+
+  const isViewingHistorical =
+    !!selectedSession && viewPhase !== (selectedSession.phase as Phase);
+
+  // Refs so the global claude:message handler always sees the latest values
+  // without needing to re-subscribe when the selected session changes.
+  const selectedSessionRef = useRef(selectedSession);
+  const selectedProjectRef = useRef(selectedProject);
+  const viewPhaseRef = useRef(viewPhase);
+  useEffect(() => { selectedSessionRef.current = selectedSession; }, [selectedSession]);
+  useEffect(() => { selectedProjectRef.current = selectedProject; }, [selectedProject]);
+  useEffect(() => { viewPhaseRef.current = viewPhase; }, [viewPhase]);
+
   const [chatWidth, setChatWidth] = useState<number>(
     () => Number(localStorage.getItem("cf-chat-width")) || 380
   );
   const [chatCollapsed, setChatCollapsed] = useState<boolean>(
     () => localStorage.getItem("cf-chat-collapsed") === "true"
   );
+  const [sidebarWidth, setSidebarWidth] = useState<number>(
+    () => Number(localStorage.getItem("cf-sidebar-width")) || 260
+  );
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(
+    () => localStorage.getItem("cf-sidebar-collapsed") === "true"
+  );
 
   // Keep document.documentElement in sync and persist to localStorage
   useEffect(() => {
@@ -86,11 +123,20 @@ export function App() {
     localStorage.setItem("cf-chat-collapsed", String(chatCollapsed));
   }, [chatCollapsed]);
 
+  useEffect(() => {
+    localStorage.setItem("cf-sidebar-width", String(sidebarWidth));
+  }, [sidebarWidth]);
+
+  useEffect(() => {
+    localStorage.setItem("cf-sidebar-collapsed", String(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
   const handleCancel = () => {
     if (!selectedSession) return;
-    api.interruptSession(selectedSession.id);
-    setIsLoading(false);
-    setActivityStatus(null);
+    const id = selectedSession.id;
+    api.interruptSession(id);
+    setLoadingBySession((prev) => ({ ...prev, [id]: false }));
+    setActivityBySession((prev) => ({ ...prev, [id]: null }));
   };
 
   const handleToggleTheme = () =>
@@ -113,6 +159,23 @@ export function App() {
     document.addEventListener("mouseup", onUp);
   };
 
+  const handleSidebarResizeMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = sidebarWidth;
+    const onMove = (ev: MouseEvent) => {
+      const delta = ev.clientX - startX; // drag right = wider sidebar
+      const next = Math.max(180, Math.min(400, startWidth + delta));
+      setSidebarWidth(next);
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
   const hasChanges = documentContent !== originalContent;
 
   // Clear error after 5 seconds
@@ -128,9 +191,10 @@ export function App() {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Escape to interrupt
       if (e.key === "Escape" && isLoading && selectedSession) {
-        api.interruptSession(selectedSession.id);
-        setIsLoading(false);
-        setActivityStatus(null);
+        const id = selectedSession.id;
+        api.interruptSession(id);
+        setLoadingBySession((prev) => ({ ...prev, [id]: false }));
+        setActivityBySession((prev) => ({ ...prev, [id]: null }));
       }
       // Cmd/Ctrl + Enter to submit
       if (
@@ -148,87 +212,93 @@ export function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedSession, isLoading]);
 
-  // Load projects and initial model setting on mount
+  // Load projects, all sessions, and initial model setting on mount.
+  // Sessions for every project are fetched in parallel so the sidebar tree
+  // can display all projects and their sessions immediately.
   useEffect(() => {
-    api.listProjects().then(setProjects);
-    // Seed the model badge from the DB so it shows before any query fires.
-    // system:init will overwrite this with the SDK-resolved name once a query runs.
-    api.getSettings(["model"]).then((s) => {
+    (async () => {
+      const loadedProjects = await api.listProjects();
+      setProjects(loadedProjects);
+      const arrays = await Promise.all(
+        loadedProjects.map((p) => api.listSessions(p.id))
+      );
+      setSessions(arrays.flat());
+      // Seed the model badge from the DB so it shows before any query fires.
+      // system:init will overwrite this with the SDK-resolved name once a query runs.
+      const s = await api.getSettings(["model"]);
       if (s["model"]) setActiveModel(s["model"]);
-    });
+    })();
   }, []);
 
-  // Load sessions when project changes
+  // Load messages when session changes (not affected by viewPhase).
   useEffect(() => {
-    if (selectedProject) {
-      api.listSessions(selectedProject.id).then(setSessions);
+    if (selectedSession) {
+      api.listMessages(selectedSession.id).then(setMessages);
     } else {
-      setSessions([]);
+      setMessages([]);
     }
-  }, [selectedProject]);
+  }, [selectedSession?.id]);
 
-  // Load messages and artifact when session changes
+  // Load the viewed artifact whenever the session or the viewed phase changes.
   useEffect(() => {
     if (selectedSession && selectedProject) {
-      // Load messages
-      api.listMessages(selectedSession.id).then(setMessages);
-
-      // Load session-specific artifact (from ~/.claude-flow/)
-      const filename =
-        selectedSession.phase === "research" ? "research.md" : "plan.md";
+      const filename = viewPhase === "research" ? "research.md" : "plan.md";
       api.readSessionArtifact(selectedProject.id, selectedSession.id, filename).then((content) => {
         const text = content || "";
         setDocumentContent(text);
         setOriginalContent(text);
       });
     } else {
-      setMessages([]);
       setDocumentContent("");
       setOriginalContent("");
     }
-  }, [selectedSession?.id, selectedSession?.phase, selectedProject]);
+  }, [selectedSession?.id, selectedProject, viewPhase]);
 
-  // Subscribe to Claude messages
+  // Subscribe to Claude messages once globally.
+  // Loading/activity state is updated for ANY session (via per-session maps).
+  // Content state (messages, artifacts) is only updated for the currently
+  // selected session, using refs to avoid re-subscribing on every session switch.
   useEffect(() => {
     const unsubscribe = api.onClaudeMessage((sessionId, msg) => {
-      if (sessionId !== selectedSession?.id) return;
-
       // ── Live activity indicator ──────────────────────────────────────
-      // Primary: tool_progress fires periodically while a tool is running
       if (msg.type === "tool_progress") {
         const elapsed = Math.round(msg.elapsed_time_seconds);
-        setActivityStatus(
-          elapsed > 0
-            ? `Using ${msg.tool_name} (${elapsed}s)`
-            : `Using ${msg.tool_name}…`
-        );
+        setActivityBySession((prev) => ({
+          ...prev,
+          [sessionId]:
+            elapsed > 0
+              ? `Using ${msg.tool_name} (${elapsed}s)`
+              : `Using ${msg.tool_name}…`,
+        }));
       }
 
-      // Secondary: task_progress carries last_tool_name for sub-agent tasks
       if (
         msg.type === "system" &&
         msg.subtype === "task_progress" &&
         (msg as { last_tool_name?: string }).last_tool_name
       ) {
-        setActivityStatus(
-          `Using ${(msg as { last_tool_name: string }).last_tool_name}…`
-        );
+        setActivityBySession((prev) => ({
+          ...prev,
+          [sessionId]: `Using ${(msg as { last_tool_name: string }).last_tool_name}…`,
+        }));
       }
 
       // ── Model resolved by SDK ────────────────────────────────────────
-      // SDKSystemMessage (subtype "init") contains the actual model in use.
       if (msg.type === "system" && msg.subtype === "init") {
         setActiveModel((msg as { model?: string }).model ?? null);
       }
 
       // ── Result (success or error) ────────────────────────────────────
-      // Always clear loading state on any result subtype so error results
-      // don't leave the UI stuck in the loading/thinking state.
+      // Clear loading state for the session that completed, regardless of
+      // which session is currently selected.
       if (msg.type === "result") {
-        setIsLoading(false);
-        setActivityStatus(null);
+        setLoadingBySession((prev) => ({ ...prev, [sessionId]: false }));
+        setActivityBySession((prev) => ({ ...prev, [sessionId]: null }));
 
-        if (msg.subtype === "success") {
+        // Content updates only matter for the currently visible session.
+        const currentSession = selectedSessionRef.current;
+        const currentProject = selectedProjectRef.current;
+        if (sessionId === currentSession?.id && msg.subtype === "success") {
           if (msg.usage) {
             setTokenUsage({
               inputTokens: msg.usage.input_tokens,
@@ -236,20 +306,24 @@ export function App() {
               cacheHits: msg.usage.cache_read_input_tokens,
             });
           }
-          // Reload artifact after Claude updates it
-          if (selectedProject && selectedSession) {
+          // Only reload the artifact if the user is viewing the current phase's
+          // document. If they're browsing a historical artifact, leave it alone;
+          // the effect tied to viewPhase will reload when they navigate back.
+          if (
+            currentProject &&
+            currentSession &&
+            viewPhaseRef.current === currentSession.phase
+          ) {
             const filename =
-              selectedSession.phase === "research" ? "research.md" : "plan.md";
-            // Capture for the async closure
-            const sessionAtTrigger = selectedSession;
+              currentSession.phase === "research" ? "research.md" : "plan.md";
+            const sessionAtTrigger = currentSession;
             api
-              .readSessionArtifact(selectedProject.id, sessionAtTrigger.id, filename)
+              .readSessionArtifact(currentProject.id, sessionAtTrigger.id, filename)
               .then((content) => {
                 const text = content || "";
                 setDocumentContent(text);
                 setOriginalContent(text);
 
-                // Auto-name: only during research, only while name is still the default
                 if (
                   sessionAtTrigger.phase === "research" &&
                   /^Session \d+$/.test(sessionAtTrigger.name) &&
@@ -266,7 +340,8 @@ export function App() {
       }
 
       // ── Assistant message ────────────────────────────────────────────
-      if (msg.type === "assistant") {
+      // Only update the chat pane for the currently visible session.
+      if (msg.type === "assistant" && sessionId === selectedSessionRef.current?.id) {
         const content = (
           msg.message.content as Array<{ type: string; text?: string }>
         )
@@ -278,10 +353,8 @@ export function App() {
           setMessages((prev) => {
             const last = prev[prev.length - 1];
             if (last?.role === "assistant") {
-              // Update existing assistant message
               return [...prev.slice(0, -1), { ...last, content }];
             }
-            // Add new assistant message
             return [
               ...prev,
               {
@@ -298,74 +371,74 @@ export function App() {
     });
 
     return unsubscribe;
-  }, [selectedSession?.id, selectedSession?.phase, selectedProject]);
+  }, []); // Subscribe once — uses refs for current session/project
 
   const handleSendMessage = async (message: string) => {
     if (!selectedSession) return;
-    setIsLoading(true);
+    const id = selectedSession.id;
+    setLoadingBySession((prev) => ({ ...prev, [id]: true }));
     setError(null);
     setMessages((prev) => [
       ...prev,
       {
         id: crypto.randomUUID(),
-        session_id: selectedSession.id,
+        session_id: id,
         role: "user",
         content: message,
         created_at: Date.now() / 1000,
       },
     ]);
     try {
-      await api.sendMessage(selectedSession.id, message);
+      await api.sendMessage(id, message);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to send message");
-      setIsLoading(false);
+      setLoadingBySession((prev) => ({ ...prev, [id]: false }));
     }
   };
 
   const handleReview = async () => {
-    if (!selectedSession || !selectedProject) return;
+    if (!selectedSession || !selectedProject || isViewingHistorical) return;
+    const id = selectedSession.id;
     setError(null);
     try {
-      // Save user edits first (session-specific, stored in ~/.claude-flow/)
       const filename =
         selectedSession.phase === "research" ? "research.md" : "plan.md";
-      await api.writeSessionArtifact(selectedProject.id, selectedSession.id, filename, documentContent);
+      await api.writeSessionArtifact(selectedProject.id, id, filename, documentContent);
       setOriginalContent(documentContent);
-      setIsLoading(true);
-      await api.triggerReview(selectedSession.id);
+      setLoadingBySession((prev) => ({ ...prev, [id]: true }));
+      await api.triggerReview(id);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Review failed");
-      setIsLoading(false);
+      setLoadingBySession((prev) => ({ ...prev, [id]: false }));
     }
   };
 
   const handleSubmit = async () => {
-    if (!selectedSession || !selectedProject) return;
+    if (!selectedSession || !selectedProject || isViewingHistorical) return;
+    const id = selectedSession.id;
     setError(null);
     try {
-      // Save any pending edits (session-specific, stored in ~/.claude-flow/)
       const filename =
         selectedSession.phase === "research" ? "research.md" : "plan.md";
-      await api.writeSessionArtifact(selectedProject.id, selectedSession.id, filename, documentContent);
+      await api.writeSessionArtifact(selectedProject.id, id, filename, documentContent);
 
-      const advanced = await api.advancePhase(selectedSession.id);
+      const advanced = await api.advancePhase(id);
       if (advanced) {
         setSelectedSession({
           ...selectedSession,
           phase: advanced.phase,
           git_branch: advanced.git_branch,
         });
-        // Trigger initial message for next phase
-        setIsLoading(true);
+        setLoadingBySession((prev) => ({ ...prev, [id]: true }));
         const initialMsg =
           advanced.phase === "plan"
             ? "Create a detailed implementation plan based on the research."
             : "Begin implementing the plan.";
-        await api.sendMessage(selectedSession.id, initialMsg);
+        await api.sendMessage(id, initialMsg);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Submit failed");
-      setIsLoading(false);
+      setLoadingBySession((prev) => ({ ...prev, [id]: false }));
     }
   };
 
@@ -378,26 +451,28 @@ export function App() {
     setSelectedProject(project);
   };
 
-  const handleCreateSession = async () => {
-    if (!selectedProject) return;
-    const name = `Session ${sessions.length + 1}`;
-    const session = await api.createSession(selectedProject.id, name);
+  const handleCreateSession = async (projectId: string) => {
+    const project = projects.find((p) => p.id === projectId);
+    if (!project) return;
+    const projectSessions = sessions.filter((s) => s.project_id === projectId);
+    const name = `Session ${projectSessions.length + 1}`;
+    const session = await api.createSession(projectId, name);
     setSessions((prev) => [session, ...prev]);
+    setSelectedProject(project);
     setSelectedSession(session);
     setMessages([]);
     setDocumentContent("");
     setOriginalContent("");
-    // Note: Each session has its own artifact directory, no need to clear
   };
 
   const handleDeleteProject = async (id: string) => {
     try {
       await api.deleteProject(id);
       setProjects((prev) => prev.filter((p) => p.id !== id));
+      setSessions((prev) => prev.filter((s) => s.project_id !== id));
       if (selectedProject?.id === id) {
         setSelectedProject(null);
         setSelectedSession(null);
-        setSessions([]);
         setMessages([]);
         setDocumentContent("");
         setOriginalContent("");
@@ -436,56 +511,88 @@ export function App() {
   return (
     <div className="app">
       <Header
-        projects={projects}
-        sessions={sessions}
-        selectedProject={selectedProject}
         selectedSession={selectedSession}
-        onSelectProject={setSelectedProject}
-        onSelectSession={setSelectedSession}
-        onCreateProject={handleCreateProject}
-        onCreateSession={handleCreateSession}
-        onDeleteProject={handleDeleteProject}
-        onDeleteSession={handleDeleteSession}
-        onRenameSession={handleRenameSession}
         theme={theme}
         onToggleTheme={handleToggleTheme}
         gitBranch={selectedSession?.git_branch ?? null}
         onOpenSettings={() => setShowSettings(true)}
+        viewPhase={viewPhase}
+        onViewPhase={setViewPhase}
       />
 
-      <div className="main-content">
-        <DocumentPane
-          content={documentContent}
-          onChange={setDocumentContent}
-          phase={selectedSession?.phase || "research"}
-          disabled={!selectedSession || selectedSession.phase === "implement"}
-          showOnboarding={!selectedProject}
-          theme={theme}
+      <div className="main-layout">
+        <Sidebar
+          projects={projects}
+          sessions={sessions}
+          selectedProject={selectedProject}
+          selectedSession={selectedSession}
+          onSelectProject={(p) => {
+            setSelectedProject(p);
+            setSelectedSession(null);
+          }}
+          onSelectSession={(session) => {
+            if (session) {
+              const project = projects.find((p) => p.id === session.project_id);
+              if (project) setSelectedProject(project);
+            }
+            setSelectedSession(session);
+          }}
+          onCreateProject={handleCreateProject}
+          onCreateSession={handleCreateSession}
+          onDeleteProject={handleDeleteProject}
+          onDeleteSession={handleDeleteSession}
+          onRenameSession={handleRenameSession}
+          loadingBySession={loadingBySession}
+          width={sidebarWidth}
+          collapsed={sidebarCollapsed}
+          onCollapsedChange={setSidebarCollapsed}
         />
 
-        {!chatCollapsed && (
+        {!sidebarCollapsed && (
           <div
-            className="chat-resize-handle"
-            onMouseDown={handleResizeMouseDown}
+            className="sidebar-resize-handle"
+            onMouseDown={handleSidebarResizeMouseDown}
           />
         )}
 
-        <ChatPane
-          messages={messages}
-          onSend={handleSendMessage}
-          isLoading={isLoading}
-          disabled={!selectedSession}
-          placeholder={
-            selectedSession
-              ? `Chat with Claude (${selectedSession.phase})...`
-              : "Select a session to start"
-          }
-          collapsed={chatCollapsed}
-          chatWidth={chatWidth}
-          onToggleCollapse={() => setChatCollapsed((c) => !c)}
-          activityStatus={activityStatus}
-          onCancel={handleCancel}
-        />
+        <div className="main-content">
+          <DocumentPane
+            content={documentContent}
+            onChange={setDocumentContent}
+            phase={viewPhase}
+            disabled={
+              !selectedSession ||
+              isViewingHistorical ||
+              selectedSession.phase === "implement"
+            }
+            showOnboarding={!selectedProject}
+            theme={theme}
+          />
+
+          {!chatCollapsed && (
+            <div
+              className="chat-resize-handle"
+              onMouseDown={handleResizeMouseDown}
+            />
+          )}
+
+          <ChatPane
+            messages={messages}
+            onSend={handleSendMessage}
+            isLoading={isLoading}
+            disabled={!selectedSession}
+            placeholder={
+              selectedSession
+                ? `Chat with Claude (${selectedSession.phase})...`
+                : "Select a session to start"
+            }
+            collapsed={chatCollapsed}
+            chatWidth={chatWidth}
+            onToggleCollapse={() => setChatCollapsed((c) => !c)}
+            activityStatus={activityStatus}
+            onCancel={handleCancel}
+          />
+        </div>
       </div>
 
       {error && (
diff --git a/renderer/src/components/ChatPane.tsx b/renderer/src/components/ChatPane.tsx
index c2cdfbb..4136d16 100644
--- a/renderer/src/components/ChatPane.tsx
+++ b/renderer/src/components/ChatPane.tsx
@@ -45,10 +45,10 @@ export function ChatPane({
       style={{ width: collapsed ? 28 : chatWidth }}
     >
       <div className="chat-header">
-        {!collapsed && <span>Chat</span>}
         <button className="chat-collapse-btn" onClick={onToggleCollapse}>
-          {collapsed ? "���" : "���"}
+          {collapsed ? "���" : "���"}
         </button>
+        {!collapsed && <span>Chat</span>}
       </div>
 
       {!collapsed && (
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index dc88a73..4e193e8 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,27 +1,18 @@
 import React, { useState, useEffect } from "react";
-import type { Project, Session, Phase } from "../types";
-import { formatSessionLabel } from "../utils/timeFormat";
+import type { Session, Phase } from "../types";
 
 const api = window.api;
 
 type Theme = "dark" | "light";
 
 interface HeaderProps {
-  projects: Project[];
-  sessions: Session[];
-  selectedProject: Project | null;
   selectedSession: Session | null;
-  onSelectProject: (project: Project | null) => void;
-  onSelectSession: (session: Session | null) => void;
-  onCreateProject: () => void;
-  onCreateSession: () => void;
-  onDeleteProject?: (id: string) => void;
-  onDeleteSession?: (id: string) => void;
-  onRenameSession?: (id: string, name: string) => void;
   theme: Theme;
   onToggleTheme: () => void;
   gitBranch: string | null;
   onOpenSettings: () => void;
+  viewPhase: Phase;
+  onViewPhase: (phase: Phase) => void;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -33,69 +24,18 @@ const phaseLabels: Record<Phase, string> = {
 const phases: Phase[] = ["research", "plan", "implement"];
 
 export function Header({
-  projects,
-  sessions,
-  selectedProject,
   selectedSession,
-  onSelectProject,
-  onSelectSession,
-  onCreateProject,
-  onCreateSession,
-  onDeleteProject,
-  onDeleteSession,
-  onRenameSession,
   theme,
   onToggleTheme,
   gitBranch,
   onOpenSettings,
+  viewPhase,
+  onViewPhase,
 }: HeaderProps) {
-  const handleDeleteProject = () => {
-    if (!selectedProject || !onDeleteProject) return;
-    if (confirm(`Delete project "${selectedProject.name}"? This cannot be undone.`)) {
-      onDeleteProject(selectedProject.id);
-    }
-  };
-
-  const handleDeleteSession = () => {
-    if (!selectedSession || !onDeleteSession) return;
-    if (confirm(`Delete session "${selectedSession.name}"? This cannot be undone.`)) {
-      onDeleteSession(selectedSession.id);
-    }
-  };
-
-  const [isRenamingSession, setIsRenamingSession] = useState(false);
-  const [renameValue, setRenameValue] = useState("");
-  // Guard against double-commit (onKeyDown Enter → unmount → onBlur)
-  const renameCommitted = React.useRef(false);
-
-  const startRename = () => {
-    if (!selectedSession) return;
-    renameCommitted.current = false;
-    setRenameValue(selectedSession.name);
-    setIsRenamingSession(true);
-  };
-
-  const commitRename = () => {
-    if (renameCommitted.current) return;
-    renameCommitted.current = true;
-    if (selectedSession && onRenameSession && renameValue.trim()) {
-      onRenameSession(selectedSession.id, renameValue.trim());
-    }
-    setIsRenamingSession(false);
-  };
-
-  const cancelRename = () => {
-    renameCommitted.current = true; // prevent blur from committing after cancel
-    setIsRenamingSession(false);
-  };
-
   // ── Maximize ─────────────────────────────────────────────────
   const [isMaximized, setIsMaximized] = useState(false);
 
   useEffect(() => {
-    // Returns the unsubscribe function; React cleanup calls it on unmount.
-    // On macOS, clicking the native green traffic light also fires this,
-    // keeping the glyph accurate when native controls are used.
     return api.onWindowMaximized(setIsMaximized);
   }, []);
 
@@ -112,89 +52,7 @@ export function Header({
   return (
     <header className="header">
       <div className="header-left">
-        {/* ── Wordmark ── */}
         <span className="app-wordmark">Claude Flow</span>
-
-        <select
-          value={selectedProject?.id || ""}
-          onChange={(e) => {
-            const project = projects.find((p) => p.id === e.target.value);
-            onSelectProject(project || null);
-            onSelectSession(null);
-          }}
-        >
-          <option value="">Select Project...</option>
-          {projects.map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.name}
-            </option>
-          ))}
-        </select>
-        <button onClick={onCreateProject}>+ Project</button>
-        {selectedProject && onDeleteProject && (
-          <button
-            onClick={handleDeleteProject}
-            className="btn-delete"
-            title="Delete project"
-          >
-            🗑️
-          </button>
-        )}
-
-        {selectedProject && (
-          <>
-            {isRenamingSession ? (
-              <input
-                autoFocus
-                value={renameValue}
-                onChange={(e) => setRenameValue(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") commitRename();
-                  if (e.key === "Escape") cancelRename();
-                }}
-                onBlur={commitRename}
-                className="session-rename-input"
-              />
-            ) : (
-              <select
-                value={selectedSession?.id || ""}
-                onChange={(e) => {
-                  const session = sessions.find((s) => s.id === e.target.value);
-                  onSelectSession(session || null);
-                }}
-              >
-                <option value="">Select Session...</option>
-                {sessions.map((s) => (
-                  <option key={s.id} value={s.id}>
-                    {formatSessionLabel(s.name, s.updated_at)}
-                  </option>
-                ))}
-              </select>
-            )}
-            <button onClick={onCreateSession}>+ Session</button>
-            {selectedSession &&
-              onRenameSession &&
-              !isRenamingSession &&
-              selectedSession.phase !== "implement" && (
-                <button
-                  onClick={startRename}
-                  className="btn-rename"
-                  title="Rename session"
-                >
-                  ✏️
-                </button>
-              )}
-            {selectedSession && onDeleteSession && (
-              <button
-                onClick={handleDeleteSession}
-                className="btn-delete"
-                title="Delete session"
-              >
-                🗑️
-              </button>
-            )}
-          </>
-        )}
       </div>
 
       <div className="header-right">
@@ -205,15 +63,27 @@ export function Header({
               const currentIndex = phases.indexOf(selectedSession.phase);
               const isComplete = phaseIndex < currentIndex;
               const isActive = phase === selectedSession.phase;
+              const isReachable = phaseIndex <= currentIndex;
+              const isViewing = phase === viewPhase && !isActive;
 
-              return (
-                <span
+              return isReachable ? (
+                <button
                   key={phase}
                   className={`phase-step ${isActive ? "active" : ""} ${
                     isComplete ? "complete" : ""
-                  }`}
+                  } ${isViewing ? "viewing" : ""}`}
+                  onClick={() => onViewPhase(phase)}
+                  title={
+                    isActive
+                      ? `Viewing ${phaseLabels[phase]} (current)`
+                      : `View ${phaseLabels[phase]} artifact`
+                  }
                 >
                   {phaseLabels[phase]}
+                </button>
+              ) : (
+                <span key={phase} className="phase-step">
+                  {phaseLabels[phase]}
                 </span>
               );
             })}
@@ -244,7 +114,7 @@ export function Header({
           onClick={() => api.toggleMaximize()}
           title={isMaximized ? "Restore window" : "Maximize window"}
         >
-          {isMaximized ? '⊡' : '□'}
+          {isMaximized ? "⊡" : "□"}
         </button>
 
         {/* ── Settings button ── */}
diff --git a/renderer/src/components/Sidebar.tsx b/renderer/src/components/Sidebar.tsx
new file mode 100644
index 0000000..567e731
--- /dev/null
+++ b/renderer/src/components/Sidebar.tsx
@@ -0,0 +1,231 @@
+import React, { useState, useRef } from "react";
+import type { Project, Session } from "../types";
+import { formatRelativeTime } from "../utils/timeFormat";
+
+interface SidebarProps {
+  projects: Project[];
+  sessions: Session[];
+  selectedProject: Project | null;
+  selectedSession: Session | null;
+  onSelectProject: (project: Project) => void;
+  onSelectSession: (session: Session | null) => void;
+  onCreateProject: () => void;
+  onCreateSession: (projectId: string) => void;
+  onDeleteProject: (id: string) => void;
+  onDeleteSession: (id: string) => void;
+  onRenameSession: (id: string, name: string) => void;
+  loadingBySession: Record<string, boolean>;
+  width: number;
+  collapsed: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
+}
+
+export function Sidebar({
+  projects,
+  sessions,
+  selectedProject,
+  selectedSession,
+  onSelectProject,
+  onSelectSession,
+  onCreateProject,
+  onCreateSession,
+  onDeleteProject,
+  onDeleteSession,
+  onRenameSession,
+  loadingBySession,
+  width,
+  collapsed,
+  onCollapsedChange,
+}: SidebarProps) {
+  const [renamingSessionId, setRenamingSessionId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  // Guard against double-commit (onKeyDown Enter → unmount → onBlur)
+  const renameCommitted = useRef(false);
+
+  const startRename = (session: Session) => {
+    renameCommitted.current = false;
+    setRenameValue(session.name);
+    setRenamingSessionId(session.id);
+  };
+
+  const commitRename = (sessionId: string) => {
+    if (renameCommitted.current) return;
+    renameCommitted.current = true;
+    const trimmed = renameValue.trim();
+    if (trimmed) onRenameSession(sessionId, trimmed);
+    setRenamingSessionId(null);
+  };
+
+  const cancelRename = () => {
+    renameCommitted.current = true;
+    setRenamingSessionId(null);
+  };
+
+  const handleDeleteProject = (project: Project) => {
+    if (confirm(`Delete project "${project.name}"? This cannot be undone.`)) {
+      onDeleteProject(project.id);
+    }
+  };
+
+  const handleDeleteSession = (session: Session) => {
+    if (confirm(`Delete session "${session.name}"? This cannot be undone.`)) {
+      onDeleteSession(session.id);
+    }
+  };
+
+  if (collapsed) {
+    return (
+      <div className="sidebar collapsed">
+        <button
+          className="sidebar-collapse-btn"
+          onClick={() => onCollapsedChange(false)}
+          title="Expand sidebar"
+        >
+          ▶
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sidebar" style={{ width }}>
+      {/* ── Header ── */}
+      <div className="sidebar-header">
+        <span className="sidebar-title">Projects</span>
+        <div className="sidebar-header-actions">
+          <button
+            className="sidebar-action-btn"
+            onClick={onCreateProject}
+            title="Add project"
+          >
+            +
+          </button>
+          <button
+            className="sidebar-collapse-btn"
+            onClick={() => onCollapsedChange(true)}
+            title="Collapse sidebar"
+          >
+            ◁
+          </button>
+        </div>
+      </div>
+
+      {/* ── Tree ── */}
+      <div className="sidebar-tree">
+        {projects.length === 0 && (
+          <div className="sidebar-empty">No projects yet</div>
+        )}
+
+        {projects.map((project) => {
+          const projectSessions = sessions.filter(
+            (s) => s.project_id === project.id
+          );
+          const isSelectedProject = selectedProject?.id === project.id;
+
+          return (
+            <React.Fragment key={project.id}>
+              {/* Project row */}
+              <div
+                className={`project-item${isSelectedProject ? " selected" : ""}`}
+              >
+                <span
+                  className="project-name"
+                  onClick={() => {
+                    onSelectProject(project);
+                    onSelectSession(null);
+                  }}
+                  title={project.path}
+                >
+                  {project.name}
+                </span>
+                <div className="item-controls">
+                  <button
+                    className="item-btn"
+                    onClick={() => onCreateSession(project.id)}
+                    title="New session"
+                  >
+                    +
+                  </button>
+                  <button
+                    className="item-btn item-btn-danger"
+                    onClick={() => handleDeleteProject(project)}
+                    title="Delete project"
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+
+              {/* Empty sessions hint (only under selected project) */}
+              {projectSessions.length === 0 && isSelectedProject && (
+                <div className="sidebar-empty session-empty">
+                  No sessions yet
+                </div>
+              )}
+
+              {/* Session rows */}
+              {projectSessions.map((session) => {
+                const isSelected = selectedSession?.id === session.id;
+                const isLoading = loadingBySession[session.id] ?? false;
+                const isRenaming = renamingSessionId === session.id;
+
+                return (
+                  <div
+                    key={session.id}
+                    className={`session-item${isSelected ? " selected" : ""}`}
+                  >
+                    {isRenaming ? (
+                      <input
+                        className="session-rename-input"
+                        autoFocus
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") commitRename(session.id);
+                          if (e.key === "Escape") cancelRename();
+                        }}
+                        onBlur={() => commitRename(session.id)}
+                      />
+                    ) : (
+                      <>
+                        <span
+                          className="session-name"
+                          onClick={() => onSelectSession(session)}
+                          title={`${session.name} · ${session.phase} · ${formatRelativeTime(session.updated_at)}`}
+                        >
+                          {session.name}
+                          {isLoading && (
+                            <span
+                              className="session-activity-dot"
+                              title="Thinking…"
+                            />
+                          )}
+                        </span>
+                        <div className="item-controls">
+                          <button
+                            className="item-btn"
+                            onClick={() => startRename(session)}
+                            title="Rename session"
+                          >
+                            ✏️
+                          </button>
+                          <button
+                            className="item-btn item-btn-danger"
+                            onClick={() => handleDeleteSession(session)}
+                            title="Delete session"
+                          >
+                            ×
+                          </button>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                );
+              })}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 20275ae..c463432 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -122,23 +122,6 @@ body {
   background: var(--bg-tertiary);
 }
 
-.session-rename-input {
-  padding: 5px 10px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--accent);
-  border-radius: 2px;
-  color: var(--text-primary);
-  font-size: 12px;
-  font-family: inherit;
-  min-width: 140px;
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
-}
-
-html[data-theme="light"] .session-rename-input {
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
-}
-
 /* Theme toggle */
 .theme-toggle {
   font-size: 11px;
@@ -167,6 +150,17 @@ html[data-theme="light"] .session-rename-input {
   border-radius: 2px;
   background: var(--bg-tertiary);
   color: var(--text-secondary);
+  border: none;
+  font-family: inherit;
+}
+
+/* Reachable phases rendered as <button> — add pointer + hover */
+button.phase-step {
+  cursor: pointer;
+}
+
+button.phase-step:hover {
+  filter: brightness(1.15);
 }
 
 .phase-step.active {
@@ -179,6 +173,12 @@ html[data-theme="light"] .session-rename-input {
   color: white;
 }
 
+/* Viewing a historical artifact: outline on the viewed badge */
+.phase-step.viewing {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
 /* ── Branch Badge ────────────────────────────────────────────── */
 .branch-badge {
   padding: 3px 10px;
@@ -206,13 +206,277 @@ html[data-theme="light"] .session-rename-input {
   color: white;
 }
 
-/* ── Main Content ─────────────────────────────────────────────── */
+/* ── Main Layout (sidebar + content row) ─────────────────────── */
+.main-layout {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Main Content (document + chat row) ──────────────────────── */
 .main-content {
   flex: 1;
   display: flex;
   overflow: hidden;
 }
 
+/* ── Sidebar ─────────────────────────────────────────────────── */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.sidebar.collapsed {
+  width: 32px !important;
+  align-items: center;
+  padding-top: 8px;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.sidebar-title {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+.sidebar-header-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.sidebar-action-btn,
+.sidebar-collapse-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  padding: 2px 5px;
+  border-radius: 2px;
+  line-height: 1;
+  transition: background 0.1s, color 0.1s;
+}
+
+.sidebar-action-btn:hover,
+.sidebar-collapse-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+/* ── Sidebar Resize Handle ───────────────────────────────────── */
+.sidebar-resize-handle {
+  width: 5px;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.sidebar-resize-handle:hover {
+  background: var(--accent);
+}
+
+/* ── Project Items ───────────────────────────────────────────── */
+.project-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  cursor: default;
+  user-select: none;
+  gap: 4px;
+}
+
+.project-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.project-item.selected {
+  background: var(--bg-tertiary);
+}
+
+.project-name {
+  flex: 1;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.project-item.selected .project-name {
+  color: var(--accent);
+}
+
+/* ── Session Items ───────────────────────────────────────────── */
+.session-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px 4px 22px;
+  gap: 4px;
+  user-select: none;
+}
+
+.session-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.session-item.selected {
+  background: var(--bg-tertiary);
+  border-left: 2px solid var(--accent);
+  padding-left: 20px;
+}
+
+.session-name {
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.session-item.selected .session-name {
+  color: var(--text-primary);
+}
+
+/* ── Activity dot ────────────────────────────────────────────── */
+.session-activity-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex-shrink: 0;
+  animation: activity-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes activity-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%       { opacity: 1;   }
+}
+
+/* ── Shared item controls (shown on hover) ───────────────────── */
+.item-controls {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.project-item:hover .item-controls,
+.session-item:hover .item-controls {
+  opacity: 1;
+}
+
+.session-item.selected .item-controls {
+  opacity: 1;
+}
+
+.item-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  padding: 1px 4px;
+  border-radius: 2px;
+  line-height: 1.4;
+  transition: background 0.1s, color 0.1s;
+}
+
+.item-btn:hover {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.item-btn-danger:hover {
+  background: var(--danger);
+  color: white;
+}
+
+/* ── Sidebar empty states ────────────────────────────────────── */
+.sidebar-empty {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-style: italic;
+  padding: 10px 12px;
+  text-align: center;
+}
+
+.session-empty {
+  padding: 4px 10px 4px 22px;
+  text-align: left;
+}
+
+/* ── Sidebar scrollbar ───────────────────────────────────────── */
+.sidebar-tree::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar-tree::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-tree::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 2px;
+}
+
+/* ── Session rename input (in sidebar) ───────────────────────── */
+.session-rename-input {
+  flex: 1;
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--accent);
+  border-radius: 2px;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: inherit;
+  min-width: 0;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+html[data-theme="light"] .session-rename-input {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
 /* ── Document Pane ───────────────────────────────────────────── */
 .document-pane {
   flex: 1;
@@ -406,6 +670,11 @@ html[data-theme="light"] .session-rename-input {
   text-transform: uppercase;
 }
 
+.badge-readonly {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
 /* ── Chat Pane ───────────────────────────────────────────────── */
 .chat-pane {
   display: flex;
@@ -432,7 +701,8 @@ html[data-theme="light"] .session-rename-input {
 /* ── Chat Header Strip ───────────────────────────────────────── */
 .chat-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 8px;
   align-items: center;
   padding: 7px 12px;
   background: var(--bg-secondary);
@@ -982,6 +1252,35 @@ html[data-theme="light"] .settings-textarea:focus {
   border-color: var(--accent);
 }
 
+/* ── Phase model override rows ───────────────────────────────── */
+.settings-phase-model-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.settings-phase-model-row {
+  display: grid;
+  grid-template-columns: 80px 1fr auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-phase-model-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.settings-phase-model-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 /* ── Settings Actions Row ────────────────────────────────────── */
 .settings-actions {
   display: flex;