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

3 files changed, 254 insertions, 153 deletions

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>
+  );
+}