feat(KB-048): add collapsible list sections to dashboard

- Add section expansion state management with localStorage persistence
- Update section headers with chevron toggle controls
- Implement conditional task row rendering based on section state
- Add Expand All / Collapse All toolbar controls
- Add CSS styles for chevron rotation animation and section headers
- Add comprehensive tests for collapsible section behavior

packages/dashboard/app/components/Header.tsx

@@ -1,20 +1,32 @@
-import { Settings, Pause, Play, Square } from "lucide-react";
+import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal } from "lucide-react";
 
 interface HeaderProps {
   onOpenSettings?: () => void;
+  onOpenGitHubImport?: () => void;
+  onToggleTerminal?: () => void;
+  inProgressCount?: number;
   globalPaused?: boolean;
   enginePaused?: boolean;
   onToggleGlobalPause?: () => void;
   onToggleEnginePause?: () => void;
+  view?: "board" | "list";
+  onChangeView?: (view: "board" | "list") => void;
 }
 
 export function Header({
   onOpenSettings,
+  onOpenGitHubImport,
+  onToggleTerminal,
+  inProgressCount = 0,
   globalPaused,
   enginePaused,
   onToggleGlobalPause,
   onToggleEnginePause,
+  view = "board",
+  onChangeView,
 }: HeaderProps) {
+  const hasInProgressTasks = inProgressCount > 0;
+
   return (
     <header className="header">
       <div className="header-left">
@@ -23,6 +35,48 @@ export function Header({
         <span className="logo-sub">board</span>
       </div>
       <div className="header-actions">
+        {/* View Toggle */}
+        {onChangeView && (
+          <div className="view-toggle">
+            <button
+              className={`view-toggle-btn${view === "board" ? " active" : ""}`}
+              onClick={() => onChangeView("board")}
+              title="Board view"
+              aria-label="Board view"
+              aria-pressed={view === "board"}
+            >
+              <LayoutGrid size={16} />
+            </button>
+            <button
+              className={`view-toggle-btn${view === "list" ? " active" : ""}`}
+              onClick={() => onChangeView("list")}
+              title="List view"
+              aria-label="List view"
+              aria-pressed={view === "list"}
+            >
+              <List size={16} />
+            </button>
+          </div>
+        )}
+        {/* Import from GitHub */}
+        <button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
+          <Download size={16} />
+        </button>
+        {/* Terminal button - shows badge with count when in-progress tasks exist */}
+        <button
+          className={`btn-icon btn-icon--terminal${hasInProgressTasks ? " has-badge" : ""}`}
+          onClick={onToggleTerminal}
+          title="Open Terminal View"
+          disabled={!hasInProgressTasks}
+          data-testid="terminal-toggle-btn"
+        >
+          <Terminal size={16} />
+          {hasInProgressTasks && (
+            <span className="btn-badge" data-testid="terminal-badge">
+              {inProgressCount > 9 ? "9+" : inProgressCount}
+            </span>
+          )}
+        </button>
         {/* Pause button (soft pause): stops new work, lets agents finish */}
         <button
           className={`btn-icon${enginePaused ? " btn-icon--paused" : ""}`}