From 1bd474f1caf2bdf578e02bfa72d5565d38fc78df Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Fri, 10 Jul 2026 18:26:33 +0300
Subject: [PATCH 01/10] feat(outpost): unified Tasks surface, rail 7 to 6

---
 src/ui/static/app.js                   |   6 +-
 src/ui/static/css/views.css            | 388 +++++++++++--------------
 src/ui/static/index.html               | 246 +++-------------
 src/ui/static/modules/config.js        |  12 -
 src/ui/static/modules/tabs.js          |  40 +--
 src/ui/static/modules/tasks-surface.js | 188 ++++++++++++
 src/ui/static/modules/tasks.js         |   6 +
 src/ui/static/modules/ui-updates.js    | 220 +-------------
 tests/e2e/specs/lists.spec.ts          |  22 +-
 tests/e2e/specs/polling.spec.ts        |   1 -
 tests/e2e/specs/tabs.spec.ts           |   3 +-
 11 files changed, 428 insertions(+), 704 deletions(-)
 create mode 100644 src/ui/static/modules/tasks-surface.js

diff --git a/src/ui/static/app.js b/src/ui/static/app.js
index 7c5c94d6..b0fdce49 100644
--- a/src/ui/static/app.js
+++ b/src/ui/static/app.js
@@ -43,12 +43,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     initSidebarItemClicks();
     await initProductNav();
     initModalClose();
-    initPipelineInfiniteScroll();
+    initTasksSurface();
 
-    // Pipeline workflow filter
+    // Tasks workflow filter
     document.getElementById('pipeline-workflow-filter')?.addEventListener('change', (e) => {
         pipelineWorkflowFilter = e.target.value || null;
-        if (lastState?.tasks) updatePipelineView(lastState.tasks);
+        if (lastState?.tasks) updateTasksSurface(lastState.tasks);
     });
     initActions();
     initNotifications();
diff --git a/src/ui/static/css/views.css b/src/ui/static/css/views.css
index 32b65b06..d3e868c0 100644
--- a/src/ui/static/css/views.css
+++ b/src/ui/static/css/views.css
@@ -2,289 +2,256 @@
  * Tab content views: pipeline, workflow, product, settings
  */
 
-/* ========== PIPELINE VIEW ========== */
-.pipeline-wrapper {
+/* ========== TASKS SURFACE (#606) ========== */
+.tasks-surface {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
     height: 100%;
 }
 
-.pipeline-stage {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.pipeline-stage-header {
+.tasks-toolbar {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 12px;
-    padding: 8px 12px;
-    margin-bottom: 8px;
+    flex-wrap: wrap;
 }
 
-.pipeline-stage-title {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--color-primary-dim);
+.filter-chips {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
 }
 
-.pipeline-workflow-filter {
-    padding: 4px 8px;
-    background: var(--bg-screen);
-    border: 1px solid var(--primary-15);
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 12px;
+    background: transparent;
+    border: 1px solid var(--bezel-edge);
     border-radius: 3px;
-    color: var(--color-primary-dim);
-    font-family: var(--font-ui);
-    font-size: 9px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-muted);
     cursor: pointer;
     transition: all 0.15s ease;
 }
 
-.pipeline-workflow-filter:hover {
-    border-color: var(--primary-30);
+.filter-chip:hover {
+    color: var(--color-primary);
+    background: var(--primary-05);
 }
 
-.pipeline-workflow-filter:focus {
-    outline: none;
-    border-color: var(--color-secondary);
+.filter-chip.active {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+    background: var(--primary-10);
 }
 
-.pipeline-stage-title.analysis {
-    color: var(--color-secondary);
+.chip-count {
+    font-size: 10px;
+    color: var(--color-primary-dim);
 }
 
-.pipeline-stage-title.execution {
-    color: var(--color-secondary);
+.chips-extra {
+    margin-left: 8px;
+    font-size: 10px;
+    color: var(--color-muted);
 }
 
-.pipeline-container {
+.tasks-toolbar-actions {
     display: flex;
+    align-items: center;
     gap: 8px;
-    flex: 1;
-    min-height: 0;
-    align-items: stretch;
 }
 
-.pipeline-column {
-    flex: 1;
-    background: var(--bg-screen);
-    border: 1px solid var(--primary-12);
-    border-radius: 4px;
+.tasks-progress-strip {
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background-image:
-        linear-gradient(var(--grid-color) 1px, transparent 1px),
-        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
-        linear-gradient(var(--grid-color-strong) 1px, transparent 1px),
-        linear-gradient(90deg, var(--grid-color-strong) 1px, transparent 1px);
-    background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
+    align-items: center;
+    gap: 12px;
 }
 
-.pipeline-column.highlight {
-    border-color: var(--secondary-30);
+.tasks-progress-track {
+    flex: 1;
+    height: 6px;
+    background: var(--bg-screen);
+    border: 1px solid var(--bezel-edge);
+    border-radius: 3px;
+    overflow: hidden;
 }
 
-.column-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 14px;
-    background: var(--primary-05);
-    border-bottom: 1px solid var(--primary-10);
-    position: relative;
+.tasks-progress-bar {
+    height: 100%;
+    width: 0;
+    background: var(--color-primary);
+    box-shadow: 0 0 6px var(--primary-glow);
+    transition: width 0.3s ease;
 }
 
-.column-resize-handle {
-    position: absolute;
-    right: -4px;
-    top: 0;
-    bottom: 0;
-    width: 8px;
-    cursor: col-resize;
-    z-index: 5;
+.tasks-progress-label {
+    font-size: 10px;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
 }
 
-.column-resize-handle::after {
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 20%;
-    bottom: 20%;
-    width: 2px;
-    background: transparent;
-    transition: background 0.15s ease;
-    border-radius: 1px;
+.tasks-main {
+    display: grid;
+    grid-template-columns: 1fr minmax(280px, 340px);
+    gap: 12px;
+    min-height: 200px;
 }
 
-.column-resize-handle:hover::after,
-.column-resize-handle.dragging::after {
-    background: var(--color-primary-dim);
+.tasks-list .task-list-item.tasks-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.column-label {
-    font-size: 10px;
+.task-status-word {
+    flex: 0 0 auto;
+    min-width: 88px;
+    font-size: 9px;
     font-weight: 600;
-    letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--color-primary-dim);
+    letter-spacing: 0.05em;
+    color: var(--type-color, var(--color-muted));
 }
 
-.column-count {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--color-primary);
-    text-shadow: 0 0 10px var(--primary-glow);
-}
+.task-status-word.status-todo { color: var(--color-primary); }
+.task-status-word.status-analysing,
+.task-status-word.status-in-progress { color: var(--color-secondary); }
+.task-status-word.status-needs-input,
+.task-status-word.status-needs-review { color: var(--color-warning); }
+.task-status-word.status-analysed { color: var(--color-info); }
+.task-status-word.status-done { color: var(--color-success); }
+.task-status-word.status-skipped { color: var(--color-muted); }
 
-.column-items {
+.tasks-row .task-list-item-name {
     flex: 1;
-    padding: 8px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-/* Animated flow arrows */
-.flow-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-primary);
-    font-size: 24px;
-    text-shadow: 0 0 15px var(--primary-glow);
-    animation: flowPulse 1.5s ease-in-out infinite;
+.tasks-row .task-row-actions {
+    flex: 0 0 auto;
 }
 
-@keyframes flowPulse {
-    0%, 100% { opacity: 0.3; transform: translateX(0); }
-    50% { opacity: 1; transform: translateX(3px); }
+.tasks-row.ignored {
+    opacity: 0.45;
 }
 
-/* Pipeline task cards (full detail) */
-.pipeline-task {
-    padding: 10px 12px;
-    background: var(--bg-black-overlay-heavy);
-    border: 1px solid var(--primary-15);
-    border-radius: 3px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    position: relative;
-    padding-left: 14px;
+.tasks-row.selected {
+    background: var(--primary-08);
+    border-color: var(--primary-30);
 }
 
-.pipeline-task::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background: var(--color-primary);
-    border-radius: 3px 0 0 3px;
+.tasks-show-more {
+    display: block;
+    width: 100%;
+    margin-top: 8px;
+    text-align: center;
 }
 
-.pipeline-task.priority-high::before { background: var(--color-error); }
-.pipeline-task.priority-med::before { background: var(--color-primary); }
-.pipeline-task.priority-low::before { background: var(--color-success); }
-
-.pipeline-task:hover {
-    background: var(--primary-08);
-    border-color: var(--primary-30);
+.task-detail-panel {
+    background: var(--bg-module);
+    border: 1px solid var(--bezel-edge);
+    border-radius: 4px;
+    padding: 14px;
+    overflow-y: auto;
+    max-height: 60vh;
 }
 
-.pipeline-task.active {
-    border-color: var(--color-secondary);
-    background: rgba(95, 179, 179, 0.1);
+.task-detail-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 10px;
 }
 
-.pipeline-task.active::before {
-    background: var(--color-secondary);
+.task-detail-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-primary);
 }
 
-.pipeline-load-more {
-    display: block;
-    width: 100%;
-    margin-top: 4px;
-    padding: 6px 12px;
-    background: var(--primary-05);
-    border: 1px dashed var(--primary-30);
-    border-radius: 3px;
-    color: var(--label-color);
-    font-family: inherit;
-    font-size: 11px;
-    letter-spacing: 0.04em;
+.task-detail-full-link {
+    font-size: 10px;
+    color: var(--color-secondary);
     text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
     cursor: pointer;
-    transition: all 0.15s ease;
 }
 
-.pipeline-load-more:hover {
-    background: var(--primary-08);
-    border-color: var(--primary-30);
-    color: var(--color-primary);
+.task-detail-actions {
+    margin-bottom: 10px;
 }
 
-.pipeline-task .task-id {
-    font-size: 8px;
-    color: var(--label-color);
-    margin-bottom: 4px;
-    font-family: var(--font-ui);
-    word-break: break-all;
+.task-detail-body {
+    font-size: 12px;
 }
 
-.pipeline-task .task-title {
-    font-size: 11px;
-    color: var(--color-primary);
-    line-height: 1.4;
-    margin-bottom: 6px;
+.tasks-processes-section {
+    border-top: 1px solid var(--bezel-edge);
+    padding-top: 12px;
 }
 
-.pipeline-task .task-tags {
+.tasks-processes-header {
     display: flex;
-    gap: 4px;
-    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
 }
 
-.pipeline-task .task-tag {
-    padding: 2px 6px;
-    background: var(--primary-10);
-    border-radius: 2px;
-    font-size: 8px;
+.tasks-processes-title {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
     color: var(--color-primary-dim);
 }
 
-/* Review-waiting tasks share the "Needs Input" column but are flagged with a
-   warning-toned chip to distinguish them from input-waiting tasks (#500). */
-.pipeline-task .task-tag.tag-review {
-    color: var(--color-warning);
-    background: rgb(var(--color-warning-rgb) / 0.12);
+.tasks-processes-counts {
+    font-size: 10px;
+    color: var(--color-muted);
 }
 
-.pipeline-task:has(.completed-date) {
-    padding-bottom: 24px;
+@media (max-width: 900px) {
+    .tasks-main {
+        grid-template-columns: 1fr;
+    }
 }
 
-.pipeline-task > .completed-date {
-    position: absolute;
-    bottom: 6px;
-    right: 8px;
-    padding: 2px 8px;
-    background: var(--surface-tertiary);
-    color: var(--color-success);
+.pipeline-workflow-filter {
+    padding: 4px 8px;
+    background: var(--bg-screen);
+    border: 1px solid var(--primary-15);
+    border-radius: 3px;
+    color: var(--color-primary-dim);
     font-family: var(--font-ui);
-    font-size: 8px;
-    border-radius: 10px;
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.pipeline-workflow-filter:hover {
+    border-color: var(--primary-30);
 }
 
+.pipeline-workflow-filter:focus {
+    outline: none;
+    border-color: var(--color-secondary);
+}
 /* ========== PRODUCT TAB ========== */
 .product-viewer {
     display: flex;
@@ -2756,35 +2723,6 @@
 }
 
 /* ========== ROADMAP TASK ACTIONS ========== */
-.roadmap-column-header {
-    gap: 10px;
-}
-
-.roadmap-column-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-}
-
-.pipeline-task.ignored {
-    background: rgba(222, 145, 74, 0.08);
-    border-color: rgba(222, 145, 74, 0.28);
-}
-
-.pipeline-task.blocked {
-    border-style: dashed;
-    background: rgba(94, 120, 145, 0.08);
-}
-
-.pipeline-task.manual-ignored::before {
-    background: var(--color-warning);
-}
-
-.pipeline-task.blocked::before {
-    background: var(--color-secondary);
-}
-
 .roadmap-task-note {
     margin-top: 8px;
     font-size: 9px;
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index b624a2fd..cd4db6e7 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -75,9 +75,8 @@
         <!-- Icon rail (replaces tab bar; destinations mirror pre-shell tabs 1:1 — restructure in #606) -->
         <nav class="shell-rail" id="shell-rail" aria-label="Primary">
             <a class="shell-rail-item" href="#" data-tab="overview" aria-current="page"><span class="shell-rail-icon">□</span><span class="shell-rail-label">Overview</span></a>
+            <a class="shell-rail-item" href="#" data-tab="tasks"><span class="shell-rail-icon">▣</span><span class="shell-rail-label">Tasks</span></a>
             <a class="shell-rail-item" href="#" data-tab="product"><span class="shell-rail-icon">◆</span><span class="shell-rail-label">Product</span></a>
-            <a class="shell-rail-item" href="#" data-tab="pipeline"><span class="shell-rail-icon">▣</span><span class="shell-rail-label">Roadmap</span></a>
-            <a class="shell-rail-item" href="#" data-tab="processes"><span class="shell-rail-icon">◎</span><span class="shell-rail-label">Processes</span></a>
             <a class="shell-rail-item" href="#" data-tab="decisions"><span class="shell-rail-icon">◇</span><span class="shell-rail-label">Decisions</span></a>
             <a class="shell-rail-item" href="#" data-tab="workflow"><span class="shell-rail-icon">○</span><span class="shell-rail-label">Workflows</span></a>
             <div class="shell-rail-divider"></div>
@@ -230,101 +229,7 @@
                     </div>
                 </div>
 
-                <!-- Pipeline/Roadmap Context: Task Summary -->
-                <div class="context-panel hidden" data-context="pipeline">
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Task Summary</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="task-summary">
-                                <div class="summary-item todo">
-                                    <span class="summary-label">Todo</span>
-                                    <span class="count-badge" data-status="todo" id="context-todo-count">-</span>
-                                </div>
-                                <div class="summary-item analysing">
-                                    <span class="summary-label">Analysing</span>
-                                    <span class="count-badge" id="context-analysing-count">-</span>
-                                </div>
-                                <div class="summary-item needs-input">
-                                    <span class="summary-label">Needs Input</span>
-                                    <span class="count-badge" id="context-needs-input-count">-</span>
-                                </div>
-                                <div class="summary-item analysed">
-                                    <span class="summary-label">Analysed</span>
-                                    <span class="count-badge" id="context-analysed-count">-</span>
-                                </div>
-                                <div class="summary-item in-progress">
-                                    <span class="summary-label">In Progress</span>
-                                    <span class="count-badge" data-status="in-progress" id="context-progress-count">-</span>
-                                </div>
-                                <div class="summary-item done">
-                                    <span class="summary-label">Done</span>
-                                    <span class="count-badge" data-status="done" id="context-done-count">-</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Progress</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="progress-bar-container">
-                                <div class="progress-bar" id="context-progress-bar"></div>
-                            </div>
-                            <div class="progress-label" id="context-progress-label">0%</div>
-                        </div>
-                    </div>
-
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Other</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="task-summary secondary">
-                                <div class="summary-item skipped">
-                                    <span class="summary-label">Skipped</span>
-                                    <span class="count-badge muted" id="context-skipped-count">-</span>
-                                </div>
-                                <div class="summary-item cancelled">
-                                    <span class="summary-label">Cancelled</span>
-                                    <span class="count-badge muted" id="context-cancelled-count">-</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Processes Context: Process Summary -->
-                <div class="context-panel hidden" data-context="processes">
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Processes</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="process-summary">
-                                <div class="summary-item">
-                                    <span class="summary-label">Running</span>
-                                    <span class="summary-value active" id="proc-running-count">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Completed</span>
-                                    <span class="summary-value" id="proc-completed-count">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Failed</span>
-                                    <span class="summary-value" id="proc-failed-count">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Total Tasks</span>
-                                    <span class="summary-value" id="proc-total-tasks">0</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <!-- Pipeline/Processes context panels removed in #606 - superseded by the Tasks surface -->
 
                 <!-- Decisions Context: Decision Summary -->
                 <div class="context-panel hidden" data-context="decisions">
@@ -409,37 +314,7 @@
                         <!-- Executive Summary -->
                         <div class="executive-summary" id="executive-summary" style="display: none;"></div>
 
-                        <!-- Stats Row -->
-                        <div class="stats-row">
-                            <div class="stat-card">
-                                <div class="stat-label">TODO</div>
-                                <div class="stat-value" data-status="todo" id="todo-count">-</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">ANALYSING</div>
-                                <div class="stat-value" data-status="in-progress" id="analysing-count">0</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">AWAITING INPUT</div>
-                                <div class="stat-value" data-status="todo" id="needs-input-count">0</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">READY</div>
-                                <div class="stat-value" data-status="todo" id="analysed-count">0</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">IN PROGRESS</div>
-                                <div class="stat-value" data-status="in-progress" id="progress-count">-</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">DONE</div>
-                                <div class="stat-value" data-status="done" id="done-count">-</div>
-                            </div>
-                            <div class="stat-card">
-                                <div class="stat-label">PROGRESS</div>
-                                <div class="stat-value" id="progress-percent">-</div>
-                            </div>
-                        </div>
+                        <!-- Stats row removed in #606 — counts live on the Tasks filter chips -->
 
                         <!-- Activity Oscilloscope -->
                         <div id="activity-scope" class="crt-monitor">
@@ -473,7 +348,7 @@
                                     <div class="empty-state">No running processes</div>
                                 </div>
                                 <div class="view-all-link" id="view-all-processes" style="display: none;">
-                                    <a href="#" onclick="switchToTab('processes'); return false;">View All Processes &rarr;</a>
+                                    <a href="#" onclick="switchToTab('tasks'); return false;">View All Processes &rarr;</a>
                                 </div>
                             </div>
                         </div>
@@ -529,81 +404,55 @@
                       </div><!-- /.overview-layout -->
                     </div>
 
-                    <!-- Pipeline Tab -->
-                    <div class="tab-pane" id="tab-pipeline">
-                        <div class="pipeline-wrapper">
-                            <!-- Unified Task Pipeline -->
-                            <div class="pipeline-stage">
-                                <div class="pipeline-stage-header">
-                                    <span class="pipeline-stage-title">◈ Task Pipeline</span>
+                    <!-- Tasks Tab (unified surface: pipeline board + Processes list + stat counts, #606/#551) -->
+                    <div class="tab-pane" id="tab-tasks">
+                        <div class="tasks-surface">
+                            <div class="tasks-toolbar">
+                                <div class="filter-chips" id="task-filter-chips">
+                                    <button class="filter-chip active" data-task-filter="all">All</button>
+                                    <button class="filter-chip" data-task-filter="todo">Todo <span class="chip-count" id="todo-count">-</span></button>
+                                    <button class="filter-chip" data-task-filter="analysing">Analysing <span class="chip-count" id="analysing-count">0</span></button>
+                                    <button class="filter-chip" data-task-filter="needs-input">Needs input <span class="chip-count" id="needs-input-count">0</span></button>
+                                    <button class="filter-chip" data-task-filter="analysed">Analysed <span class="chip-count" id="analysed-count">0</span></button>
+                                    <button class="filter-chip" data-task-filter="in-progress">In progress <span class="chip-count" id="progress-count">-</span></button>
+                                    <button class="filter-chip" data-task-filter="done">Done <span class="chip-count" id="done-count">-</span></button>
+                                    <span class="chips-extra"><span id="skipped-count">0</span> skipped · <span id="cancelled-count">0</span> cancelled</span>
+                                </div>
+                                <div class="tasks-toolbar-actions">
                                     <select class="pipeline-workflow-filter" id="pipeline-workflow-filter" title="Filter tasks by workflow">
                                         <option value="">All Workflows</option>
                                     </select>
+                                    <button class="ctrl-btn-sm roadmap-header-action" id="roadmap-deleted-btn" title="View deleted task archive">Deleted</button>
+                                    <button class="ctrl-btn-sm primary add-task-btn roadmap-header-action" id="add-task-btn-pipeline" title="Add new task">New Task</button>
                                 </div>
-                                <div class="pipeline-container">
-                                    <!-- Todo Column -->
-                                    <div class="pipeline-column">
-                                        <div class="column-header roadmap-column-header">
-                                            <span class="column-label">◇ Todo</span>
-                                            <div class="roadmap-column-actions">
-                                                <span class="column-count" id="pipeline-todo-count">0</span>
-                                                <button class="ctrl-btn-sm roadmap-header-action" id="roadmap-deleted-btn" title="View deleted task archive">Deleted</button>
-                                                <button class="ctrl-btn-sm primary add-task-btn roadmap-header-action" id="add-task-btn-pipeline" title="Add new task">New Task</button>
-                                            </div>
-                                        </div>
-                                        <div class="column-items" id="pipeline-todo">
-                                            <div class="loading-state">Loading...</div>
-                                        </div>
-                                    </div>
-
-                                    <div class="flow-arrow">→</div>
-
-                                    <!-- Working Column (Analysing + In Progress) -->
-                                    <div class="pipeline-column highlight">
-                                        <div class="column-header">
-                                            <span class="column-label">◈ Working</span>
-                                            <span class="column-count" id="pipeline-working-count">0</span>
-                                        </div>
-                                        <div class="column-items" id="pipeline-working">
-                                            <div class="empty-state">No active tasks</div>
-                                        </div>
-                                    </div>
-
-                                    <div class="flow-arrow">→</div>
-
-                                    <!-- Needs Input Column -->
-                                    <div class="pipeline-column">
-                                        <div class="column-header">
-                                            <span class="column-label">⚡ Needs Input</span>
-                                            <span class="column-count" id="pipeline-needs-input-count">0</span>
-                                        </div>
-                                        <div class="column-items" id="pipeline-needs-input">
-                                            <div class="empty-state">No tasks</div>
-                                        </div>
-                                    </div>
-
-                                    <div class="flow-arrow">→</div>
-
-                                    <!-- Done Column -->
-                                    <div class="pipeline-column">
-                                        <div class="column-header">
-                                            <span class="column-label">✓ Done</span>
-                                            <span class="column-count" id="pipeline-done-count">0</span>
-                                        </div>
-                                        <div class="column-items" id="pipeline-done">
-                                            <div class="loading-state">Loading...</div>
-                                        </div>
-                                    </div>
+                            </div>
+                            <div class="tasks-progress-strip">
+                                <div class="tasks-progress-track"><div class="tasks-progress-bar" id="tasks-progress-bar"></div></div>
+                                <span class="tasks-progress-label"><span id="progress-percent">-</span> complete</span>
+                            </div>
+                            <div class="tasks-main">
+                                <div class="task-list tasks-list" id="tasks-list">
+                                    <div class="loading-state">Loading...</div>
+                                </div>
+                                <aside class="task-detail-panel" id="task-detail-panel">
+                                    <div class="empty-state">Select a task to see details</div>
+                                </aside>
+                            </div>
+                            <!-- Running processes share the surface (Q3/Q6); list rendering reused verbatim -->
+                            <div class="tasks-processes-section">
+                                <div class="tasks-processes-header">
+                                    <span class="tasks-processes-title">◈ Processes</span>
+                                    <span class="tasks-processes-counts">
+                                        Running <span id="proc-running-count">0</span> ·
+                                        Completed <span id="proc-completed-count">0</span> ·
+                                        Failed <span id="proc-failed-count">0</span> ·
+                                        Tasks <span id="proc-total-tasks">0</span>
+                                    </span>
+                                </div>
+                                <div id="process-list">
+                                    <div class="empty-state">No processes</div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-
-                    <!-- Processes Tab -->
-                    <div class="tab-pane" id="tab-processes">
-                        <!-- Process List -->
-                        <div id="process-list">
-                            <div class="empty-state">No processes</div>
                         </div>
                     </div>
 
@@ -1594,6 +1443,7 @@
     <script src="modules/workflow-launch.js"></script>
     <script src="modules/tasks.js"></script>
     <script src="modules/roadmap-task-actions.js"></script>
+    <script src="modules/tasks-surface.js"></script>
     <script src="modules/processes.js"></script>
     <script src="modules/editor.js"></script>
     <script src="modules/controls.js"></script>
diff --git a/src/ui/static/modules/config.js b/src/ui/static/modules/config.js
index a9063fd2..e14362f9 100644
--- a/src/ui/static/modules/config.js
+++ b/src/ui/static/modules/config.js
@@ -124,18 +124,6 @@ let currentTheme = null;  // Current theme configuration
 // Store discovered directories for use in relationship tree
 let discoveredDirectories = [];
 
-// Pipeline column display limits (for infinite scroll)
-let pipelineDisplayLimits = {
-    'pipeline-todo': 10,
-    'pipeline-progress': 10,
-    'pipeline-done': 10
-};
-let pipelineTaskCounts = {
-    'pipeline-todo': 0,
-    'pipeline-progress': 0,
-    'pipeline-done': 0
-};
-
 // Workflow viewer state
 let currentWorkflowItem = { type: null, file: null };
 
diff --git a/src/ui/static/modules/tabs.js b/src/ui/static/modules/tabs.js
index 560540a6..3cd9810b 100644
--- a/src/ui/static/modules/tabs.js
+++ b/src/ui/static/modules/tabs.js
@@ -57,18 +57,14 @@ function switchContextPanel(tabId) {
         targetPanel.classList.remove('hidden');
     }
 
-    // Start/stop process polling based on tab
-    if (tabId === 'processes') {
+    // Tasks surface hosts the process list — poll while it's visible
+    if (tabId === 'tasks') {
         startProcessPolling();
+        if (lastState?.tasks) updateTasksSurface(lastState.tasks);
     } else {
         stopProcessPolling();
     }
 
-    // Update task summary when switching to pipeline tab
-    if (tabId === 'pipeline' && lastState?.tasks) {
-        updateTaskSummary(lastState.tasks);
-    }
-
     // Reload decisions when switching to decisions tab
     if (tabId === 'decisions') {
         reloadDecisions();
@@ -93,36 +89,6 @@ function switchContextPanel(tabId) {
     }
 }
 
-/**
- * Update task summary in pipeline context panel
- * @param {Object} tasks - Tasks object from state
- */
-function updateTaskSummary(tasks) {
-    // Update count badges in context panel
-    setElementText('context-todo-count', tasks.todo || 0);
-    setElementText('context-analysing-count', tasks.analysing || 0);
-    // "Needs Input" surfaces everything waiting on a person — input-waiting plus
-    // review-waiting tasks — matching the unified pipeline column (#500).
-    setElementText('context-needs-input-count', (tasks.needs_input || 0) + (tasks.needs_review || 0));
-    setElementText('context-analysed-count', tasks.analysed || 0);
-    setElementText('context-progress-count', tasks.in_progress || 0);
-    setElementText('context-done-count', tasks.done || 0);
-    setElementText('context-skipped-count', tasks.skipped || 0);
-    setElementText('context-cancelled-count', tasks.cancelled || 0);
-
-    // Update progress bar - include all statuses in total
-    const total = (tasks.todo || 0) + (tasks.analysing || 0) + (tasks.needs_input || 0) +
-                  (tasks.needs_review || 0) + (tasks.analysed || 0) + (tasks.in_progress || 0) +
-                  (tasks.done || 0);
-    const percent = total > 0 ? Math.round((tasks.done / total) * 100) : 0;
-
-    const progressBar = document.getElementById('context-progress-bar');
-    const progressLabel = document.getElementById('context-progress-label');
-
-    if (progressBar) progressBar.style.width = `${percent}%`;
-    if (progressLabel) progressLabel.textContent = `${percent}%`;
-}
-
 /**
  * Initialize logo click to return to overview
  */
diff --git a/src/ui/static/modules/tasks-surface.js b/src/ui/static/modules/tasks-surface.js
new file mode 100644
index 00000000..7b42b229
--- /dev/null
+++ b/src/ui/static/modules/tasks-surface.js
@@ -0,0 +1,188 @@
+/**
+ * DOTBOT Control Panel - Unified Tasks Surface (#606/#551)
+ * One task list with status filter chips + slim detail panel, replacing the
+ * pipeline kanban and the Processes tab. Task actions (ignore/edit/delete +
+ * history/restore) come from roadmap-task-actions.js; the deep-view modal
+ * stays in tasks.js behind the panel's "Full detail" link.
+ */
+
+let activeTaskFilter = 'all';
+let selectedTaskId = null;
+let tasksDisplayLimit = 100;
+
+const TASK_FILTER_LABELS = {
+    'todo': 'Todo',
+    'analysing': 'Analysing',
+    'needs-input': 'Needs input',
+    'needs-review': 'Needs review',
+    'analysed': 'Analysed',
+    'in-progress': 'In progress',
+    'done': 'Done',
+    'skipped': 'Skipped',
+};
+
+function initTasksSurface() {
+    const chips = document.getElementById('task-filter-chips');
+    chips?.addEventListener('click', (e) => {
+        const chip = e.target.closest('.filter-chip');
+        if (!chip) return;
+        activeTaskFilter = chip.dataset.taskFilter || 'all';
+        tasksDisplayLimit = 100;
+        chips.querySelectorAll('.filter-chip').forEach(c => c.classList.toggle('active', c === chip));
+        if (lastState?.tasks) updateTasksSurface(lastState.tasks);
+    });
+
+    // Row clicks open the detail panel. Guard order matters: action buttons
+    // must win — roadmap-task-actions listens at document level, which fires
+    // AFTER this container listener, so its stopPropagation can't protect us.
+    document.getElementById('tasks-list')?.addEventListener('click', (e) => {
+        if (e.target.closest('[data-task-action], .roadmap-task-action, .roadmap-header-action')) return;
+        const showMore = e.target.closest('.tasks-show-more');
+        if (showMore) {
+            tasksDisplayLimit += 100;
+            if (lastState?.tasks) updateTasksSurface(lastState.tasks);
+            return;
+        }
+        const row = e.target.closest('.task-list-item');
+        if (row && row.dataset.taskId) {
+            selectedTaskId = row.dataset.taskId;
+            renderTaskDetailPanel(findTaskById(selectedTaskId));
+            document.querySelectorAll('#tasks-list .task-list-item').forEach(r =>
+                r.classList.toggle('selected', r.dataset.taskId === selectedTaskId));
+        }
+    });
+
+    document.getElementById('task-detail-panel')?.addEventListener('click', (e) => {
+        const full = e.target.closest('.task-detail-full-link');
+        if (full && selectedTaskId) {
+            const task = findTaskById(selectedTaskId);
+            if (task) showTaskModal(task);
+        }
+    });
+}
+
+/**
+ * Map the active filter to state lists. Statuses mirror the old kanban
+ * columns; needs-input combines input- and review-waiting (#500).
+ */
+function collectFilteredTasks(tasks) {
+    const withStatus = (list, status) => (Array.isArray(list) ? list : []).map(t => ({ task: t, status }));
+    const buckets = {
+        'in-progress': [
+            ...withStatus(tasks.in_progress_list, 'in-progress'),
+            ...(tasks.current && !(tasks.in_progress_list || []).some(t => t.id === tasks.current.id)
+                ? [{ task: tasks.current, status: 'in-progress' }] : []),
+        ],
+        'needs-input': [
+            ...withStatus(tasks.needs_input_list, 'needs-input'),
+            ...withStatus(tasks.needs_review_list, 'needs-review'),
+        ],
+        'analysing': withStatus(tasks.analysing_list, 'analysing'),
+        'analysed': withStatus(tasks.analysed_list, 'analysed'),
+        'todo': withStatus(tasks.upcoming, 'todo'),
+        'done': withStatus(tasks.recent_completed, 'done'),
+    };
+
+    let rows;
+    if (activeTaskFilter === 'all') {
+        rows = [
+            ...buckets['in-progress'], ...buckets['needs-input'], ...buckets['analysing'],
+            ...buckets['analysed'], ...buckets['todo'], ...buckets['done'],
+            ...withStatus(tasks.skipped_list, 'skipped'),
+        ];
+    } else {
+        rows = buckets[activeTaskFilter] || [];
+    }
+
+    if (pipelineWorkflowFilter) {
+        rows = rows.filter(r => r.task.workflow === pipelineWorkflowFilter);
+    }
+    return rows;
+}
+
+/**
+ * Re-render the Tasks surface from state. Replaces updatePipelineView().
+ */
+function updateTasksSurface(tasks) {
+    if (!tasks) return;
+    if (typeof normalizeRoadmapTaskState === 'function') {
+        normalizeRoadmapTaskState({ tasks });
+    }
+    updatePipelineFilterOptions();
+
+    const container = document.getElementById('tasks-list');
+    if (!container) return;
+
+    const rows = collectFilteredTasks(tasks);
+    if (rows.length === 0) {
+        container.innerHTML = '<div class="empty-state">No tasks for this filter</div>';
+    } else {
+        const visible = rows.slice(0, tasksDisplayLimit);
+        const rowsHtml = visible.map(({ task, status }) => {
+            const ignoreState = task.ignore_state || {};
+            const dimmed = ignoreState.effective ? ' ignored' : '';
+            const selected = task.id === selectedTaskId ? ' selected' : '';
+            const actions = (status === 'todo' && typeof buildRoadmapTaskActionsMarkup === 'function')
+                ? buildRoadmapTaskActionsMarkup(task, 'todo') : '';
+            const meta = [task.category, task.workflow].filter(Boolean).map(escapeHtml).join(' · ');
+            return `
+                <div class="task-list-item tasks-row${dimmed}${selected}" data-task-id="${escapeHtml(task.id || '')}" data-status="${status}">
+                    <span class="task-status-word status-${status}">${TASK_FILTER_LABELS[status] || status}</span>
+                    <span class="task-list-item-name">${escapeHtml(task.name || task.id || 'Unknown')}</span>
+                    <span class="task-list-item-meta">${meta}</span>
+                    <span class="task-row-actions">${actions}</span>
+                </div>`;
+        }).join('');
+        const more = rows.length > tasksDisplayLimit
+            ? `<button class="tasks-show-more ctrl-btn-sm" type="button">Show more (${rows.length - tasksDisplayLimit} remaining)</button>`
+            : '';
+        container.innerHTML = rowsHtml + more;
+    }
+
+    updateTasksProgressBar(tasks);
+
+    // Keep the detail panel in sync with polled state
+    if (selectedTaskId) {
+        const task = findTaskById(selectedTaskId);
+        if (task) {
+            renderTaskDetailPanel(task);
+        } else {
+            selectedTaskId = null;
+            renderTaskDetailPanel(null);
+        }
+    }
+}
+
+function updateTasksProgressBar(tasks) {
+    const total = (tasks.todo || 0) + (tasks.analysing || 0) + (tasks.needs_input || 0) +
+                  (tasks.needs_review || 0) + (tasks.analysed || 0) + (tasks.in_progress || 0) +
+                  (tasks.done || 0);
+    const percent = total > 0 ? Math.round(((tasks.done || 0) / total) * 100) : 0;
+    const bar = document.getElementById('tasks-progress-bar');
+    if (bar) bar.style.width = `${percent}%`;
+}
+
+/**
+ * Slim detail panel: identity + requirements summary + actions.
+ * "Full detail" opens the existing 6-section modal (tasks.js).
+ */
+function renderTaskDetailPanel(task) {
+    const panel = document.getElementById('task-detail-panel');
+    if (!panel) return;
+    if (!task) {
+        panel.innerHTML = '<div class="empty-state">Select a task to see details</div>';
+        return;
+    }
+    const actions = (task.status === 'todo' && typeof buildRoadmapTaskActionsMarkup === 'function')
+        ? `<div class="task-detail-actions">${buildRoadmapTaskActionsMarkup(task, 'todo')}</div>` : '';
+    panel.innerHTML = `
+        <div class="task-detail-header">
+            <span class="task-detail-title">${escapeHtml(task.name || task.id || 'Task')}</span>
+            <a href="#" class="task-detail-full-link" onclick="return false;">Full detail →</a>
+        </div>
+        ${actions}
+        <div class="task-detail-body">
+            ${buildOverviewSection(task)}
+            ${buildRequirementsSection(task)}
+        </div>`;
+}
diff --git a/src/ui/static/modules/tasks.js b/src/ui/static/modules/tasks.js
index 83249bf6..291293b2 100644
--- a/src/ui/static/modules/tasks.js
+++ b/src/ui/static/modules/tasks.js
@@ -32,6 +32,12 @@ function initTaskClicks() {
             return;
         }
 
+        // Rows inside the Tasks surface open the detail panel (tasks-surface.js),
+        // not the modal — the modal is reachable via the panel's "Full detail" link.
+        if (e.target.closest('#tasks-list')) {
+            return;
+        }
+
         const taskItem = e.target.closest('.task-list-item, .pipeline-task');
         if (taskItem && taskItem.dataset.taskId) {
             const task = findTaskById(taskItem.dataset.taskId);
diff --git a/src/ui/static/modules/ui-updates.js b/src/ui/static/modules/ui-updates.js
index f92ada87..51b6e277 100644
--- a/src/ui/static/modules/ui-updates.js
+++ b/src/ui/static/modules/ui-updates.js
@@ -19,7 +19,7 @@ function updateUI(state) {
     updateCurrentTask(state.tasks.current);
     updateUpcomingTasks(state.tasks.upcoming);
     updateCompletedTasks(state.tasks.recent_completed, state.tasks.skipped_list);
-    updatePipelineView(state.tasks);
+    updateTasksSurface(state.tasks);
     updateControlSignalStatus(state.control);
     updateControlButtonStates(state.session, state.control, state.loops);
 
@@ -28,11 +28,6 @@ function updateUI(state) {
         updateSteeringPanel(state.instances);
     }
 
-    // Update task summary in pipeline context panel
-    if (state.tasks) {
-        updateTaskSummary(state.tasks);
-    }
-
     // Update per-workflow control LEDs/buttons
     if (state.workflows && typeof updateWorkflowControlStates === 'function') {
         updateWorkflowControlStates(state.workflows);
@@ -76,25 +71,17 @@ function updateTimestamp(instanceId) {
  * @param {Object} tasks - Tasks object from state
  */
 function updateTaskCounts(tasks) {
-    // Overview stats
+    // Tasks-surface chip badges (#606)
     setElementText('todo-count', tasks.todo);
     setElementText('progress-count', tasks.in_progress);
     setElementText('done-count', getCompletedTaskCount(tasks));
     setElementText('analysing-count', tasks.analysing || 0);
-    setElementText('needs-input-count', tasks.needs_input || 0);
+    // Needs input combines input- and review-waiting, matching the chip's list (#500)
+    setElementText('needs-input-count', (tasks.needs_input || 0) + (tasks.needs_review || 0));
     setElementText('analysed-count', tasks.analysed || 0);
+    setElementText('skipped-count', tasks.skipped || 0);
+    setElementText('cancelled-count', tasks.cancelled || 0);
 
-    // Pipeline counts - Unified pipeline
-    setElementText('pipeline-todo-count', tasks.todo);
-    setElementText('pipeline-working-count', (tasks.analysing || 0) + (tasks.in_progress || 0));
-    setElementText('pipeline-needs-input-count', (tasks.needs_input || 0) + (tasks.needs_review || 0));
-    setElementText('pipeline-done-count', getCompletedTaskCount(tasks));
-    // Legacy pipeline counts (kept for backward compat)
-    setElementText('pipeline-analysing-count', tasks.analysing || 0);
-    setElementText('pipeline-analysed-count', tasks.analysed || 0);
-    setElementText('pipeline-ready-count', tasks.analysed || 0);
-    setElementText('pipeline-progress-count', tasks.in_progress);
-    
     // Update action widget
     if (typeof updateActionWidget === 'function') {
         updateActionWidget(tasks.action_required || 0, { fromPoll: true });
@@ -393,169 +380,6 @@ function updateCompletedTasks(tasks, skippedTasks) {
     }).join('');
 }
 
-/**
- * Update pipeline view
- * @param {Object} tasks - Tasks object from state
- */
-function updatePipelineView(tasks) {
-    let upcoming = Array.isArray(tasks.upcoming) ? tasks.upcoming : [];
-    let completed = Array.isArray(tasks.recent_completed) ? tasks.recent_completed : [];
-    let analysing = Array.isArray(tasks.analysing_list) ? tasks.analysing_list : [];
-    let needsInput = Array.isArray(tasks.needs_input_list) ? tasks.needs_input_list : [];
-    let needsReview = Array.isArray(tasks.needs_review_list) ? tasks.needs_review_list : [];
-    let analysed = Array.isArray(tasks.analysed_list) ? tasks.analysed_list : [];
-    let inProgress = Array.isArray(tasks.in_progress_list)
-        ? tasks.in_progress_list
-        : (tasks.current ? [tasks.current] : []);
-
-    // Apply workflow filter if set
-    if (pipelineWorkflowFilter) {
-        const wf = pipelineWorkflowFilter;
-        upcoming = upcoming.filter(t => t.workflow === wf);
-        completed = completed.filter(t => t.workflow === wf);
-        analysing = analysing.filter(t => t.workflow === wf);
-        needsInput = needsInput.filter(t => t.workflow === wf);
-        needsReview = needsReview.filter(t => t.workflow === wf);
-        analysed = analysed.filter(t => t.workflow === wf);
-        inProgress = inProgress.filter(t => t.workflow === wf);
-    }
-
-    // Update filter dropdown options from state.workflows
-    updatePipelineFilterOptions();
-
-    // Unified pipeline columns
-    updatePipelineColumn('pipeline-todo', upcoming, 'todo');
-
-    // "Working" combines analysing + analysed + in-progress (all actively being processed)
-    const working = [...analysing, ...analysed, ...inProgress];
-    // Tag each task with its phase for sub-label display
-    working.forEach(t => {
-        if (analysing.includes(t)) t._phase = 'analysing';
-        else if (analysed.includes(t)) t._phase = 'ready';
-        else t._phase = 'executing';
-    });
-    updatePipelineColumn('pipeline-working', working, 'active');
-
-    // "Needs Input" surfaces everything waiting on a person: tasks parked for
-    // human input plus tasks parked for human review. Tag review tasks so the
-    // card renders a distinct chip (#500). The Review Required panel is unchanged.
-    needsReview.forEach(t => { t._waitKind = 'review'; });
-    const waitingOnPerson = [...needsInput, ...needsReview];
-    updatePipelineColumn('pipeline-needs-input', waitingOnPerson, 'needs-input');
-    const skipped = Array.isArray(tasks.skipped_list) ? tasks.skipped_list : [];
-    const doneAndSkipped = [...completed, ...skipped];
-    updatePipelineColumn('pipeline-done', doneAndSkipped, 'done');
-
-    // Legacy columns (for backward compat if old HTML is cached)
-    updatePipelineColumn('pipeline-analysing', analysing, 'analysing');
-    updatePipelineColumn('pipeline-analysed', analysed, 'analysed');
-    updatePipelineColumn('pipeline-ready', analysed, 'ready');
-    updatePipelineColumn('pipeline-progress', inProgress, 'active');
-}
-
-/**
- * Update a pipeline column
- * @param {string} containerId - Container element ID
- * @param {Array} tasks - Tasks to display
- * @param {string} type - Column type (todo, active, done)
- */
-function updatePipelineColumn(containerId, tasks, type) {
-    const container = document.getElementById(containerId);
-    if (!container) return;
-
-    // Ensure tasks is an array
-    const taskList = Array.isArray(tasks) ? tasks : [];
-
-    // Track total task count for infinite scroll
-    pipelineTaskCounts[containerId] = taskList.length;
-
-    if (taskList.length === 0) {
-        container.innerHTML = `<div class="empty-state">No tasks</div>`;
-        return;
-    }
-
-    // Get display limit for this column
-    const limit = pipelineDisplayLimits[containerId] || 10;
-    const visibleTasks = taskList.slice(0, limit);
-
-    const taskMarkup = visibleTasks.map(task => {
-        const priorityClass = task.priority == 1 ? 'priority-high' :
-                              task.priority == 2 ? 'priority-med' : '';
-        const ignoreState = task.ignore_state || {};
-        const roadmapClasses = [
-            ignoreState.effective ? 'ignored' : '',
-            ignoreState.manual ? 'manual-ignored' : '',
-            ignoreState.auto ? 'blocked' : ''
-        ].filter(Boolean).join(' ');
-
-        // Format duration or completed date for done items
-        let completedBadge = '';
-        if (type === 'done' && task.status === 'skipped') {
-            completedBadge = `<span class="task-tag phase-tag">skipped</span>`;
-        } else if (type === 'done' && task.completed_at) {
-            const duration = formatTaskDuration(task) || formatCompactDate(task.completed_at);
-            completedBadge = `<span class="task-tag completed-date">${duration}</span>`;
-        }
-
-        // Show phase sub-label for tasks in the "Working" column
-        const phaseLabel = task._phase ? `<span class="task-tag phase-tag">${escapeHtml(task._phase)}</span>` : '';
-        // Distinguish review-waiting tasks from input-waiting tasks in the
-        // shared "Needs Input" column (#500).
-        const waitKindLabel = task._waitKind === 'review'
-            ? `<span class="task-tag tag-review">⚲ review</span>`
-            : '';
-        const roadmapStateTags = typeof buildRoadmapTaskStatusTags === 'function'
-            ? buildRoadmapTaskStatusTags(task, type)
-            : '';
-        const roadmapIgnoreHint = typeof buildRoadmapTaskIgnoreHint === 'function'
-            ? buildRoadmapTaskIgnoreHint(task, type)
-            : '';
-        const roadmapActions = typeof buildRoadmapTaskActionsMarkup === 'function'
-            ? buildRoadmapTaskActionsMarkup(task, type)
-            : '';
-
-        return `
-            <div class="pipeline-task ${type === 'active' ? 'active' : ''} ${priorityClass} ${roadmapClasses}" data-task-id="${escapeHtml(task.id || '')}">
-                <div class="task-id">${escapeHtml(task.id || '')}</div>
-                <div class="task-title">${escapeHtml(task.name || task.id || 'Unknown')}</div>
-                <div class="task-tags">
-                    ${task.category ? `<span class="task-tag">${escapeHtml(task.category)}</span>` : ''}
-                    ${task.workflow ? `<span class="task-tag tag-workflow">${escapeHtml(task.workflow)}</span>` : ''}
-                    ${task.type && task.type !== 'prompt' ? `<span class="task-tag tag-type">${escapeHtml(task.type)}</span>` : ''}
-                    ${phaseLabel}
-                    ${waitKindLabel}
-                    ${type === 'active' && !task._phase ? '<span class="task-tag">↻ agent</span>' : ''}
-                    ${roadmapStateTags}
-                </div>
-                ${roadmapIgnoreHint}
-                ${roadmapActions}
-                ${completedBadge}
-            </div>
-        `;
-    }).join('');
-
-    // Reveal-more affordance. The column caps rendering at `limit` and relies on
-    // the scroll handler to load more, but a column that doesn't overflow never
-    // fires a scroll event — leaving the remaining tasks hidden while the count
-    // claims otherwise (#454). A visible button guarantees every task is reachable
-    // regardless of whether the column scrolls.
-    const remaining = taskList.length - visibleTasks.length;
-    const loadMoreMarkup = remaining > 0
-        ? `<button type="button" class="pipeline-load-more">Show ${remaining} more</button>`
-        : '';
-
-    container.innerHTML = taskMarkup + loadMoreMarkup;
-
-    if (remaining > 0) {
-        const loadMoreBtn = container.querySelector('.pipeline-load-more');
-        if (loadMoreBtn) {
-            loadMoreBtn.addEventListener('click', () => {
-                pipelineDisplayLimits[containerId] = (pipelineDisplayLimits[containerId] || 10) + remaining;
-                if (lastState?.tasks) updatePipelineView(lastState.tasks);
-            });
-        }
-    }
-}
 /**
  * Update pipeline filter dropdown options from latest state
  */
@@ -572,38 +396,6 @@ function updatePipelineFilterOptions() {
         workflows.map(name => `<option value="${escapeHtml(name)}"${name === current ? ' selected' : ''}>${escapeHtml(name)}</option>`).join('');
 }
 
-function initPipelineInfiniteScroll() {
-    const columnIds = [
-        'pipeline-todo', 'pipeline-working', 'pipeline-needs-input', 'pipeline-done',
-        // Legacy columns (backward compat)
-        'pipeline-analysing', 'pipeline-analysed', 'pipeline-ready', 'pipeline-progress'
-    ];
-
-    columnIds.forEach(containerId => {
-        const container = document.getElementById(containerId);
-        if (!container) return;
-
-        container.addEventListener('scroll', () => {
-            // Check if scrolled near bottom (within 50px)
-            const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-            if (scrollBottom < 50) {
-                const currentLimit = pipelineDisplayLimits[containerId] || 10;
-                const totalTasks = pipelineTaskCounts[containerId] || 0;
-
-                // Load more if there are more tasks available
-                if (currentLimit < totalTasks) {
-                    pipelineDisplayLimits[containerId] = currentLimit + 5;
-
-                    // Re-render with updated limit
-                    if (lastState?.tasks) {
-                        updatePipelineView(lastState.tasks);
-                    }
-                }
-            }
-        });
-    });
-}
-
 /**
  * Update control signal status display
  * @param {Object} control - Control object from state
diff --git a/tests/e2e/specs/lists.spec.ts b/tests/e2e/specs/lists.spec.ts
index 276f87b8..b597a38b 100644
--- a/tests/e2e/specs/lists.spec.ts
+++ b/tests/e2e/specs/lists.spec.ts
@@ -35,13 +35,13 @@ test.describe("Task list rendering (Roadmap tab)", () => {
       timeout: 10_000,
     });
 
-    await page.locator('.shell-rail-item[data-tab="pipeline"]').click();
-    await expect(page.locator("#tab-pipeline")).toHaveClass(/active/);
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+    await expect(page.locator("#tab-tasks")).toHaveClass(/active/);
 
-    const rows = page.locator("#upcoming-tasks .task-list-item");
+    const rows = page.locator("#tasks-list .task-list-item");
     await expect(rows).toHaveCount(3, { timeout: 10_000 });
 
-    const names = page.locator("#upcoming-tasks .task-list-item-name");
+    const names = page.locator("#tasks-list .task-list-item-name");
     await expect(names).toContainText([
       "list-spec-alpha",
       "list-spec-bravo",
@@ -54,10 +54,8 @@ test.describe("Task list rendering (Roadmap tab)", () => {
     await expect(page.locator("#todo-count")).toHaveText("0", {
       timeout: 10_000,
     });
-    await page.locator('.shell-rail-item[data-tab="pipeline"]').click();
-    await expect(page.locator("#upcoming-tasks .task-list-item")).toHaveCount(
-      0,
-    );
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+    await expect(page.locator("#tasks-list .task-list-item")).toHaveCount(0);
   });
 });
 
@@ -89,8 +87,8 @@ test.describe("Process list rendering (Processes tab)", () => {
     // Cannot use overview-active as a guard because index.html hardcodes
     // `class="tab active"` on the overview button.
     await expect(page.locator("body")).toHaveAttribute("data-app-ready", "1");
-    await page.locator('.shell-rail-item[data-tab="processes"]').click();
-    await expect(page.locator("#tab-processes")).toHaveClass(/active/);
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+    await expect(page.locator("#tab-tasks")).toHaveClass(/active/);
 
     const row = page.locator(
       `#process-list .process-row[data-process-id="${proc.id}"]`,
@@ -102,8 +100,8 @@ test.describe("Process list rendering (Processes tab)", () => {
   test("renders empty state when no process JSONs exist", async ({ page }) => {
     await page.goto("/");
     await expect(page.locator("body")).toHaveAttribute("data-app-ready", "1");
-    await page.locator('.shell-rail-item[data-tab="processes"]').click();
-    await expect(page.locator("#tab-processes")).toHaveClass(/active/);
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+    await expect(page.locator("#tab-tasks")).toHaveClass(/active/);
 
     await expect(page.locator("#process-list .empty-state")).toBeVisible({
       timeout: 10_000,
diff --git a/tests/e2e/specs/polling.spec.ts b/tests/e2e/specs/polling.spec.ts
index 779b9637..fb7e4b63 100644
--- a/tests/e2e/specs/polling.spec.ts
+++ b/tests/e2e/specs/polling.spec.ts
@@ -36,7 +36,6 @@ test.describe("State polling reflects backend state in the DOM", () => {
     await expect(page.locator("#todo-count")).toHaveText("1", {
       timeout: 10_000,
     });
-    await expect(page.locator("#pipeline-todo-count")).toHaveText("1");
   });
 
   test("moving a task from todo to in-progress shifts the counts", async ({
diff --git a/tests/e2e/specs/tabs.spec.ts b/tests/e2e/specs/tabs.spec.ts
index 76756555..737f5316 100644
--- a/tests/e2e/specs/tabs.spec.ts
+++ b/tests/e2e/specs/tabs.spec.ts
@@ -2,9 +2,8 @@ import { test, expect, Page } from "@playwright/test";
 
 const TABS = [
   "overview",
+  "tasks",
   "product",
-  "pipeline",
-  "processes",
   "decisions",
   "workflow",
   "settings",

From 70df273f79dc81849a3c31a8af188bb50acb44af Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Fri, 10 Jul 2026 18:43:02 +0300
Subject: [PATCH 02/10] feat(outpost): re-home context panels into panes

---
 src/ui/static/css/views.css |  40 ++++++++
 src/ui/static/index.html    | 187 +++++++++++++++++-------------------
 2 files changed, 129 insertions(+), 98 deletions(-)

diff --git a/src/ui/static/css/views.css b/src/ui/static/css/views.css
index d3e868c0..e2b912a4 100644
--- a/src/ui/static/css/views.css
+++ b/src/ui/static/css/views.css
@@ -2,6 +2,46 @@
  * Tab content views: pipeline, workflow, product, settings
  */
 
+/* ========== PANE NAV (#606 — former sidebar context panels) ========== */
+.pane-with-nav {
+    display: grid;
+    grid-template-columns: minmax(220px, 280px) 1fr;
+    gap: 16px;
+    height: 100%;
+    min-height: 0;
+}
+
+.pane-nav {
+    min-width: 0;
+    overflow-y: auto;
+}
+
+.pane-body {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.decisions-header-strip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.decisions-header-strip .decision-summary {
+    display: flex;
+    gap: 16px;
+}
+
+@media (max-width: 900px) {
+    .pane-with-nav {
+        grid-template-columns: 1fr;
+    }
+}
+
 /* ========== TASKS SURFACE (#606) ========== */
 .tasks-surface {
     display: flex;
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index cd4db6e7..1f3019f5 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -204,100 +204,7 @@
                     </div>
                 </div>
 
-                <!-- Product Context: Project Info + File Navigator -->
-                <div class="context-panel hidden" data-context="product">
-                    <div class="sidebar-section" id="project-info-card">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Project</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="project-info">
-                                <div class="project-info-name" id="project-info-name">--</div>
-                                <div class="project-info-workflow" id="project-info-workflow"></div>
-                                <div class="project-info-summary" id="project-info-summary"></div>
-                                <div class="project-info-path" id="project-info-path"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Product Docs</span>
-                        </div>
-                        <div class="sidebar-content" id="product-file-nav">
-                            <div class="loading-state">Loading...</div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Pipeline/Processes context panels removed in #606 - superseded by the Tasks surface -->
-
-                <!-- Decisions Context: Decision Summary -->
-                <div class="context-panel hidden" data-context="decisions">
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Decisions</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="decision-summary">
-                                <div class="summary-item">
-                                    <span class="summary-label">Proposed</span>
-                                    <span class="summary-value" id="decision-count-proposed">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Accepted</span>
-                                    <span class="summary-value active" id="decision-count-accepted">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Deprecated</span>
-                                    <span class="summary-value" id="decision-count-deprecated">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Superseded</span>
-                                    <span class="summary-value" id="decision-count-superseded">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Total</span>
-                                    <span class="summary-value" id="decision-count-total">0</span>
-                                </div>
-                            </div>
-                            <div style="margin-top: 10px;">
-                                <button class="ctrl-btn-sm primary" id="decision-create-btn" style="width:100%;">+ New Decision</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Workflow Context: Nav Tree -->
-                <div class="context-panel hidden" data-context="workflow">
-                    <div class="sidebar-section">
-                        <div class="sidebar-content" id="wf-nav-tree">
-                            <div class="loading-state">Loading workflows...</div>
-                        </div>
-                    </div>
-                    <div id="prompts-sidebar" style="display:none"></div>
-                </div>
-
-                <!-- Settings Context -->
-                <div class="context-panel hidden" data-context="settings">
-                    <div class="sidebar-section">
-                        <div class="sidebar-header">
-                            <span class="sidebar-title">◈ Settings</span>
-                        </div>
-                        <div class="sidebar-content">
-                            <div class="settings-nav">
-                                <div class="settings-nav-item active" data-settings-section="theme">Theme</div>
-                                <div class="settings-nav-item" data-settings-section="provider">Coding Agent</div>
-                                <div class="settings-nav-item" data-settings-section="analysis">Analysis Phase</div>
-                                <div class="settings-nav-item" data-settings-section="execution">Execution Phase</div>
-                                <div class="settings-nav-item" data-settings-section="verification">Verification</div>
-                                <div class="settings-nav-item" data-settings-section="costs">Costs</div>
-                                <div class="settings-nav-item" data-settings-section="editor">Editor</div>
-                                <div class="settings-nav-item" data-settings-section="mothership">Mothership</div>
-                                <div class="settings-nav-item" data-settings-section="aether" id="aetherNavItem" style="display:none">Aether</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <!-- Per-tab context panels moved into their panes in #606 -->
             </aside>
 
             <!-- Panel Splitter -->
@@ -458,6 +365,31 @@
 
                     <!-- Decisions Tab -->
                     <div class="tab-pane" id="tab-decisions">
+                        <div class="decisions-header-strip">
+                            <div class="decision-summary">
+                                <div class="summary-item">
+                                    <span class="summary-label">Proposed</span>
+                                    <span class="summary-value" id="decision-count-proposed">0</span>
+                                </div>
+                                <div class="summary-item">
+                                    <span class="summary-label">Accepted</span>
+                                    <span class="summary-value active" id="decision-count-accepted">0</span>
+                                </div>
+                                <div class="summary-item">
+                                    <span class="summary-label">Deprecated</span>
+                                    <span class="summary-value" id="decision-count-deprecated">0</span>
+                                </div>
+                                <div class="summary-item">
+                                    <span class="summary-label">Superseded</span>
+                                    <span class="summary-value" id="decision-count-superseded">0</span>
+                                </div>
+                                <div class="summary-item">
+                                    <span class="summary-label">Total</span>
+                                    <span class="summary-value" id="decision-count-total">0</span>
+                                </div>
+                            </div>
+                            <button class="ctrl-btn-sm primary" id="decision-create-btn">+ New Decision</button>
+                        </div>
                         <!-- Decision List (expandable rows grouped by status) -->
                         <div id="decision-list">
                             <div class="empty-state">No decisions yet. Create one or run the interview workflow to generate them automatically.</div>
@@ -541,6 +473,16 @@
 
                     <!-- Workflow Tab -->
                     <div class="tab-pane" id="tab-workflow">
+                      <div class="pane-with-nav">
+                        <div class="pane-nav">
+                            <div class="sidebar-section">
+                                <div class="sidebar-content" id="wf-nav-tree">
+                                    <div class="loading-state">Loading workflows...</div>
+                                </div>
+                            </div>
+                            <div id="prompts-sidebar" style="display:none"></div>
+                        </div>
+                        <div class="pane-body">
                         <!-- All workflow runs (concurrent runs + repeat instances), grouped by run -->
                         <div class="module workflow-runs-panel" id="workflow-runs-panel">
                             <div class="module-header">
@@ -573,14 +515,41 @@
                                 </div>
                             </div>
                         </div>
+                        </div><!-- /pane-body -->
+                      </div><!-- /pane-with-nav -->
                     </div>
 
                     <!-- Product Tab -->
                     <div class="tab-pane" id="tab-product">
-                        <div class="product-viewer">
-                            <div class="product-content full-width">
-                                <div class="doc-viewer" id="doc-viewer">
-                                    <div class="doc-placeholder">Select a document from the left panel</div>
+                        <div class="pane-with-nav">
+                            <div class="pane-nav">
+                                <div class="sidebar-section" id="project-info-card">
+                                    <div class="sidebar-header">
+                                        <span class="sidebar-title">◈ Project</span>
+                                    </div>
+                                    <div class="sidebar-content">
+                                        <div class="project-info">
+                                            <div class="project-info-name" id="project-info-name">--</div>
+                                            <div class="project-info-workflow" id="project-info-workflow"></div>
+                                            <div class="project-info-summary" id="project-info-summary"></div>
+                                            <div class="project-info-path" id="project-info-path"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="sidebar-section">
+                                    <div class="sidebar-header">
+                                        <span class="sidebar-title">◈ Product Docs</span>
+                                    </div>
+                                    <div class="sidebar-content" id="product-file-nav">
+                                        <div class="loading-state">Loading...</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="product-viewer">
+                                <div class="product-content full-width">
+                                    <div class="doc-viewer" id="doc-viewer">
+                                        <div class="doc-placeholder">Select a document from the left panel</div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -588,6 +557,27 @@
 
                     <!-- Settings Tab -->
                     <div class="tab-pane" id="tab-settings">
+                      <div class="pane-with-nav">
+                        <div class="pane-nav">
+                            <div class="sidebar-section">
+                                <div class="sidebar-header">
+                                    <span class="sidebar-title">◈ Settings</span>
+                                </div>
+                                <div class="sidebar-content">
+                                    <div class="settings-nav">
+                                        <div class="settings-nav-item active" data-settings-section="theme">Theme</div>
+                                        <div class="settings-nav-item" data-settings-section="provider">Coding Agent</div>
+                                        <div class="settings-nav-item" data-settings-section="analysis">Analysis Phase</div>
+                                        <div class="settings-nav-item" data-settings-section="execution">Execution Phase</div>
+                                        <div class="settings-nav-item" data-settings-section="verification">Verification</div>
+                                        <div class="settings-nav-item" data-settings-section="costs">Costs</div>
+                                        <div class="settings-nav-item" data-settings-section="editor">Editor</div>
+                                        <div class="settings-nav-item" data-settings-section="mothership">Mothership</div>
+                                        <div class="settings-nav-item" data-settings-section="aether" id="aetherNavItem" style="display:none">Aether</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="settings-container">
                             <!-- Theme Section -->
                             <div class="settings-section" id="settings-theme">
@@ -1091,6 +1081,7 @@
                                 </div>
                             </div>
                         </div>
+                      </div><!-- /pane-with-nav -->
                     </div>
                 </div>
             </main>

From 9f04b92609bb02c22022292e3dedc68b6a6c1bfb Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Fri, 10 Jul 2026 19:29:16 +0300
Subject: [PATCH 03/10] feat(outpost): Overview cockpit hosts controls,
 session, git and panic

---
 src/ui/static/css/responsive.css |  2 +-
 src/ui/static/css/views.css      | 24 ++++++++++++++++++++--
 src/ui/static/index.html         | 35 ++++++++++++++++----------------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/ui/static/css/responsive.css b/src/ui/static/css/responsive.css
index a8ca0151..e34bb0b4 100644
--- a/src/ui/static/css/responsive.css
+++ b/src/ui/static/css/responsive.css
@@ -18,7 +18,7 @@
     }
 
     /* Overview side panel: stack below main content */
-    .overview-layout {
+    .overview-cockpit {
         flex-direction: column;
     }
 
diff --git a/src/ui/static/css/views.css b/src/ui/static/css/views.css
index e2b912a4..90fee6b2 100644
--- a/src/ui/static/css/views.css
+++ b/src/ui/static/css/views.css
@@ -1840,13 +1840,33 @@
     margin: 0 0.15em;
 }
 
-/* Workflow Phases — Overview side panel */
-.overview-layout {
+/* Overview cockpit grid (#606): controls column + content + optional side panel */
+.overview-cockpit {
     display: flex;
     height: 100%;
     gap: 1rem;
 }
 
+.cockpit-col {
+    flex: 0 0 clamp(240px, 22vw, 300px);
+    min-width: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+@media (max-width: 900px) {
+    .overview-cockpit {
+        flex-direction: column;
+    }
+    /* Control column first so RUN/STOP + panic stay reachable on mobile */
+    .cockpit-col {
+        flex: none;
+        order: -1;
+    }
+}
+
 .overview-content {
     flex: 1;
     min-width: 0;
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index 1f3019f5..1baa71a3 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -92,7 +92,21 @@
             <!-- Left Sidebar (Context-Aware) -->
             <aside class="sidebar-left">
                 <!-- Overview Context: Control, Session, Verification (mirrors right sidebar) -->
-                <div class="context-panel" data-context="overview">
+                <!-- Overview cockpit moved into the Overview pane in #606 -->
+                <!-- Per-tab context panels moved into their panes in #606 -->
+            </aside>
+
+            <!-- Panel Splitter -->
+            <div class="panel-splitter" id="panel-splitter" title="Drag to resize · Double-click to reset"></div>
+
+            <!-- Main Content -->
+            <main class="main-content">
+                <!-- Tab Content -->
+                <div class="tab-content">
+                    <!-- Overview Tab -->
+                    <div class="tab-pane active" id="tab-overview">
+                      <div class="overview-cockpit">
+                        <aside class="cockpit-col">
                     <!-- Agent Control -->
                     <div class="left-module">
                         <div class="module-header">
@@ -202,21 +216,8 @@
                         </button>
                         <div class="panic-hint">Clear stale locks &amp; signals</div>
                     </div>
-                </div>
-
-                <!-- Per-tab context panels moved into their panes in #606 -->
-            </aside>
-
-            <!-- Panel Splitter -->
-            <div class="panel-splitter" id="panel-splitter" title="Drag to resize · Double-click to reset"></div>
-
-            <!-- Main Content -->
-            <main class="main-content">
-                <!-- Tab Content -->
-                <div class="tab-content">
-                    <!-- Overview Tab -->
-                    <div class="tab-pane active" id="tab-overview">
-                      <div class="overview-layout">
+                
+                        </aside>
                         <div class="overview-content">
                         <!-- Executive Summary -->
                         <div class="executive-summary" id="executive-summary" style="display: none;"></div>
@@ -308,7 +309,7 @@
                                 <div id="overview-workflow-phases"></div>
                             </div>
                         </div>
-                      </div><!-- /.overview-layout -->
+                      </div><!-- /.overview-cockpit -->
                     </div>
 
                     <!-- Tasks Tab (unified surface: pipeline board + Processes list + stat counts, #606/#551) -->

From 1e842e3fca413b1c86ec2d6be75331c6f406c196 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Fri, 10 Jul 2026 19:53:47 +0300
Subject: [PATCH 04/10] chore(outpost): remove contextual sidebar chassis

---
 src/ui/static/app.js             |   2 -
 src/ui/static/css/layout.css     |  88 ++-------------
 src/ui/static/css/responsive.css | 104 +----------------
 src/ui/static/css/sidebar.css    |  24 +---
 src/ui/static/index.html         |  19 +---
 src/ui/static/modules/icons.js   |   6 -
 src/ui/static/modules/layout.js  | 186 +------------------------------
 src/ui/static/modules/sidebar.js |  35 +-----
 src/ui/static/modules/tabs.js    |  35 +-----
 9 files changed, 25 insertions(+), 474 deletions(-)

diff --git a/src/ui/static/app.js b/src/ui/static/app.js
index b0fdce49..b7e8f045 100644
--- a/src/ui/static/app.js
+++ b/src/ui/static/app.js
@@ -32,7 +32,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     initTabs();
     initShell();
     initLogoClick();
-    initHamburgerMenu();
     initSidebarCollapse();
     await initSidebar();
     initControlButtons();
@@ -40,7 +39,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     initSettingsToggles();
     initTaskClicks();
     initRoadmapTaskActions();
-    initSidebarItemClicks();
     await initProductNav();
     initModalClose();
     initTasksSurface();
diff --git a/src/ui/static/css/layout.css b/src/ui/static/css/layout.css
index ac32adc6..20d27173 100644
--- a/src/ui/static/css/layout.css
+++ b/src/ui/static/css/layout.css
@@ -4,11 +4,11 @@
 /* ========== LAYOUT ==========
  * Page chrome (topbar/rail/ticker) comes from /shared/css/dotbot-shell.css
  * (#551/#605). This file keeps app-side pieces that live inside the shell:
- * context group, badges, pickers, LEDs, editor button, main-layout/sidebar. */
+ * context group, badges, pickers, LEDs, editor button, main content. */
 
-/* Glue: the cockpit layout fills the shell content area without the 1280px
- * reading cap — resizable sidebar + pipeline columns need full width. */
-.shell-content > .main-layout {
+/* Glue: the operator cockpit fills the shell content area without the 1280px
+ * reading cap — pane navigation columns need full width. */
+.shell-content > .main-content {
     height: 100%;
 }
 
@@ -34,47 +34,6 @@
     opacity: 0.8;
 }
 
-.hamburger-menu {
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 32px;
-    height: 32px;
-    background: transparent;
-    border: 1px solid var(--bezel-edge);
-    border-radius: 4px;
-    cursor: pointer;
-    padding: 6px;
-    transition: all 0.2s ease;
-}
-
-.hamburger-menu span {
-    display: block;
-    width: 100%;
-    height: 2px;
-    background: var(--color-primary);
-    transition: all 0.3s ease;
-    border-radius: 1px;
-}
-
-.hamburger-menu:hover {
-    border-color: var(--color-primary);
-    background: var(--primary-10);
-}
-
-.hamburger-menu.active span:nth-child(1) {
-    transform: rotate(45deg) translate(5px, 5px);
-}
-
-.hamburger-menu.active span:nth-child(2) {
-    opacity: 0;
-}
-
-.hamburger-menu.active span:nth-child(3) {
-    transform: rotate(-45deg) translate(5px, -5px);
-}
-
 .project-badge {
     padding: 4px 12px;
     background: var(--primary-10);
@@ -305,47 +264,14 @@
     opacity: 0.6;
 }
 
-/* ========== MAIN LAYOUT ========== */
-:root {
-    --sidebar-width: 280px;
-}
-
-.main-layout {
-    display: grid;
-    grid-template-columns: var(--sidebar-width) 4px 1fr;
-    flex: 1;
-    overflow: hidden;
-    background: var(--bezel-edge);
-}
-
-.panel-splitter {
-    background: var(--bezel-edge);
-    cursor: col-resize;
-    transition: background 0.15s ease;
-    position: relative;
-    z-index: 10;
-}
-
-.panel-splitter:hover,
-.panel-splitter.dragging {
-    background: var(--color-primary-dim);
-}
-
-.panel-splitter::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -4px;
-    right: -4px;
-    bottom: 0;
-}
-
-/* ========== MAIN CONTENT ========== */
+/* ========== MAIN CONTENT ==========
+ * Contextual sidebar + splitter removed in #606 — panes own their navigation. */
 .main-content {
     background: var(--bg-panel);
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    height: 100%;
 }
 
 /* Tab bar chrome removed in #605 — navigation lives in the shell rail
diff --git a/src/ui/static/css/responsive.css b/src/ui/static/css/responsive.css
index e34bb0b4..937cbb5c 100644
--- a/src/ui/static/css/responsive.css
+++ b/src/ui/static/css/responsive.css
@@ -2,16 +2,10 @@
  * Media queries and mobile styles
  */
 
-/* ========== RESPONSIVE ========== */
+/* ========== RESPONSIVE ==========
+ * Sidebar drawer + hamburger removed with the chassis (#606) — panes stack
+ * full-width on small screens instead. */
 @media (max-width: 1200px) {
-    .main-layout {
-        grid-template-columns: var(--sidebar-width, 260px) 4px 1fr;
-    }
-
-    .stats-row {
-        grid-template-columns: repeat(4, 1fr);
-    }
-
     /* Workflow cards: tighter minmax */
     .workflow-card-grid {
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -27,103 +21,27 @@
         align-self: stretch;
     }
 
-    /* Pipeline filter: full width */
-    .pipeline-stage-header {
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .pipeline-workflow-filter {
-        width: 100%;
-    }
-
-    /* Workflow pills: allow wrapping */
-    .workflow-pills {
+    .tasks-toolbar {
         flex-wrap: wrap;
     }
 }
 
 @media (max-width: 900px) {
-    .stats-row {
-        grid-template-columns: repeat(3, 1fr);
-    }
-
     .two-column {
         grid-template-columns: 1fr;
     }
 
-    .main-layout {
-        grid-template-columns: 1fr;
-    }
-
-    .panel-splitter {
-        display: none;
-    }
-
-    .hamburger-menu {
-        display: flex;
-    }
-
     .shell-context-group,
     .shell-search,
     #framework-banner {
         display: none;
     }
 
-    .sidebar-left {
-        position: fixed;
-        top: 0;
-        left: -280px;
-        width: min(280px, 85vw);
-        height: 100vh;
-        z-index: 1001;
-        transition: left 0.3s ease;
-        box-shadow: 2px 0 10px var(--bg-black-overlay-darker);
-    }
-
-    .sidebar-left.mobile-open {
-        left: 0;
-    }
-
-    .mobile-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--bg-black-overlay-darkest);
-        z-index: 1000;
-        display: none;
-    }
-
-    .mobile-overlay.active {
-        display: block;
-    }
-
     /* Workflow cards: single column */
     .workflow-card-grid {
         grid-template-columns: 1fr;
     }
 
-    /* Pipeline: stack columns vertically */
-    .pipeline-container {
-        flex-direction: column;
-    }
-
-    .flow-arrow {
-        transform: rotate(90deg);
-        font-size: 18px;
-    }
-
-    @keyframes flowPulse {
-        0%, 100% { opacity: 0.3; transform: rotate(90deg) translateX(0); }
-        50% { opacity: 1; transform: rotate(90deg) translateX(3px); }
-    }
-
-    .pipeline-column {
-        min-height: 120px;
-    }
-
     /* Control panel workflow rows: compact */
     .process-control-row {
         flex-direction: column;
@@ -142,26 +60,12 @@
 }
 
 @media (max-width: 600px) {
-    /* Stats: two columns */
-    .stats-row {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
     /* Workflow cards: tighter padding, no grid overlay */
     .workflow-card {
         padding: 8px;
         background-image: none;
     }
 
-    /* Pipeline columns: more compact */
-    .column-header {
-        padding: 8px 10px;
-    }
-
-    .column-items {
-        padding: 4px;
-    }
-
     /* Workflow-launch CTA: tighter */
     .workflow-launch-cta {
         padding: 20px 16px;
diff --git a/src/ui/static/css/sidebar.css b/src/ui/static/css/sidebar.css
index e83656bd..c457b452 100644
--- a/src/ui/static/css/sidebar.css
+++ b/src/ui/static/css/sidebar.css
@@ -1,15 +1,9 @@
-/* DOTBOT Control Panel - Sidebar
- * Left sidebar, right sidebar, context panels
+/* DOTBOT Control Panel - Pane navigation + cockpit modules
+ * The 280px contextual sidebar chassis was removed in #606; these section/
+ * item/folder rules now style the per-pane navigation columns (.pane-nav)
+ * and the Overview cockpit, plus app-wide bits like .ctrl-btn-sm.
  */
 
-/* ========== LEFT SIDEBAR ========== */
-.sidebar-left {
-    background: var(--bg-panel);
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-}
-
 .sidebar-section {
     border-bottom: 1px solid var(--bezel-edge);
 }
@@ -174,16 +168,6 @@
     margin-left: 18px;
 }
 
-/* ========== CONTEXT PANELS ========== */
-.context-panel {
-    display: flex;
-    flex-direction: column;
-}
-
-.context-panel.hidden {
-    display: none;
-}
-
 /* Left Module (same as right-module) */
 .left-module {
     border-bottom: 1px solid var(--bezel-edge);
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index 1baa71a3..0bfd9553 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -23,13 +23,9 @@
     </style>
 </head>
 <body>
-    <div class="mobile-overlay" id="mobile-overlay"></div>
     <div class="shell" id="shell">
         <!-- Top bar (v4 shell, #551/#605) -->
         <header class="shell-topbar">
-            <button class="hamburger-menu" id="hamburger-menu" aria-label="Toggle menu">
-                <!-- Menu icon loaded dynamically -->
-            </button>
             <div class="shell-logo">
                 <span class="logo">◈ DOTBOT</span>
             </div>
@@ -86,19 +82,8 @@
             </button>
         </nav>
 
-        <!-- Content -->
+        <!-- Content (contextual sidebar removed in #606 — content lives in the panes) -->
         <div class="shell-content">
-        <div class="main-layout" id="main-layout">
-            <!-- Left Sidebar (Context-Aware) -->
-            <aside class="sidebar-left">
-                <!-- Overview Context: Control, Session, Verification (mirrors right sidebar) -->
-                <!-- Overview cockpit moved into the Overview pane in #606 -->
-                <!-- Per-tab context panels moved into their panes in #606 -->
-            </aside>
-
-            <!-- Panel Splitter -->
-            <div class="panel-splitter" id="panel-splitter" title="Drag to resize · Double-click to reset"></div>
-
             <!-- Main Content -->
             <main class="main-content">
                 <!-- Tab Content -->
@@ -1086,8 +1071,6 @@
                     </div>
                 </div>
             </main>
-        </div>
-
         </div><!-- /shell-content -->
 
         <!-- Dispatch ticker slot (static line; scroll behaviour lands with #607) -->
diff --git a/src/ui/static/modules/icons.js b/src/ui/static/modules/icons.js
index 8858c542..73b80219 100644
--- a/src/ui/static/modules/icons.js
+++ b/src/ui/static/modules/icons.js
@@ -56,12 +56,6 @@ function replaceIconPlaceholders() {
     const stopBtn = document.querySelector('.ctrl-btn[data-action="stop"]');
     if (stopBtn) stopBtn.innerHTML = getIcon('stop') + ' STOP';
 
-    // Replace hamburger menu with menu icon
-    const hamburger = document.getElementById('hamburger-menu');
-    if (hamburger) {
-        hamburger.innerHTML = getIcon('menu', 24);
-    }
-
     // Replace sidebar toggles with expand icons
     document.querySelectorAll('.sidebar-toggle').forEach(toggle => {
         toggle.innerHTML = getIcon('expandMore', 16);
diff --git a/src/ui/static/modules/layout.js b/src/ui/static/modules/layout.js
index 876763d8..6dbc14d6 100644
--- a/src/ui/static/modules/layout.js
+++ b/src/ui/static/modules/layout.js
@@ -1,17 +1,10 @@
 /**
- * Layout persistence: draggable panel splitter + resizable pipeline columns.
- * Storage keys: dotbot:layout:sidebarWidth, dotbot:layout:columnWidths
+ * Shared localStorage helpers (dotbot:* keys).
+ * The splitter/column-resize machinery that used to live here died with the
+ * contextual sidebar and the pipeline kanban (#606); these helpers remain
+ * because other modules persist state through them (e.g. shell.js rail pin).
  */
 
-const SIDEBAR_MIN = 160;
-const SIDEBAR_MAX = 520;
-const SIDEBAR_DEFAULT = 280;
-const COLUMN_MIN = 120;
-const STORAGE_SIDEBAR = 'dotbot:layout:sidebarWidth';
-const STORAGE_COLUMNS = 'dotbot:layout:columnWidths';
-
-// ── Storage helpers ──────────────────────────────────────────────────────────
-
 function layoutGet(key) {
     try { return window.localStorage.getItem(key); } catch (e) { return null; }
 }
@@ -23,174 +16,3 @@ function layoutSet(key, value) {
 function layoutRemove(key) {
     try { window.localStorage.removeItem(key); } catch (e) { /* ignore */ }
 }
-
-// ── Sidebar width ────────────────────────────────────────────────────────────
-
-function applySidebarWidth(px) {
-    document.documentElement.style.setProperty('--sidebar-width', `${px}px`);
-}
-
-function restoreSidebarWidth() {
-    const stored = layoutGet(STORAGE_SIDEBAR);
-    if (stored) {
-        const px = parseInt(stored, 10);
-        if (px >= SIDEBAR_MIN && px <= SIDEBAR_MAX) applySidebarWidth(px);
-    }
-}
-
-function initPanelSplitter() {
-    const splitter = document.getElementById('panel-splitter');
-    const layout = document.getElementById('main-layout');
-    if (!splitter || !layout) return;
-
-    let dragging = false;
-    let startX = 0;
-    let startWidth = 0;
-
-    splitter.addEventListener('mousedown', (e) => {
-        dragging = true;
-        startX = e.clientX;
-        startWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width'), 10) || SIDEBAR_DEFAULT;
-        splitter.classList.add('dragging');
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-        e.preventDefault();
-    });
-
-    document.addEventListener('mousemove', (e) => {
-        if (!dragging) return;
-        const delta = e.clientX - startX;
-        const newWidth = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, startWidth + delta));
-        applySidebarWidth(newWidth);
-    });
-
-    document.addEventListener('mouseup', () => {
-        if (!dragging) return;
-        dragging = false;
-        splitter.classList.remove('dragging');
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-        const current = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width'), 10);
-        if (current !== SIDEBAR_DEFAULT) {
-            layoutSet(STORAGE_SIDEBAR, current);
-        } else {
-            layoutRemove(STORAGE_SIDEBAR);
-        }
-    });
-
-    splitter.addEventListener('dblclick', () => {
-        applySidebarWidth(SIDEBAR_DEFAULT);
-        layoutRemove(STORAGE_SIDEBAR);
-    });
-}
-
-// ── Pipeline column resize ───────────────────────────────────────────────────
-
-function loadColumnWidths() {
-    try {
-        const raw = layoutGet(STORAGE_COLUMNS);
-        return raw ? JSON.parse(raw) : {};
-    } catch (e) { return {}; }
-}
-
-function saveColumnWidths(map) {
-    try { layoutSet(STORAGE_COLUMNS, JSON.stringify(map)); } catch (e) { /* ignore */ }
-}
-
-function getColumnKey(col) {
-    const label = col.querySelector('.column-label');
-    return label ? label.textContent.trim().replace(/\s+/g, '_') : null;
-}
-
-function applyColumnWidth(col, px) {
-    col.style.flex = 'none';
-    col.style.width = `${px}px`;
-}
-
-function resetColumnWidth(col) {
-    col.style.flex = '';
-    col.style.width = '';
-}
-
-function initColumnResizeHandles() {
-    const container = document.querySelector('.pipeline-container');
-    if (!container) return;
-
-    const columns = Array.from(container.querySelectorAll('.pipeline-column'));
-    const widths = loadColumnWidths();
-
-    columns.forEach((col) => {
-        const key = getColumnKey(col);
-        if (key && widths[key]) {
-            applyColumnWidth(col, widths[key]);
-        }
-
-        const header = col.querySelector('.column-header');
-        if (!header) return;
-
-        const handle = document.createElement('div');
-        handle.className = 'column-resize-handle';
-        handle.title = 'Drag to resize · Double-click to reset';
-        header.appendChild(handle);
-
-        let dragging = false;
-        let startX = 0;
-        let startWidth = 0;
-
-        handle.addEventListener('mousedown', (e) => {
-            dragging = true;
-            startX = e.clientX;
-            startWidth = col.getBoundingClientRect().width;
-            handle.classList.add('dragging');
-            document.body.style.cursor = 'col-resize';
-            document.body.style.userSelect = 'none';
-            e.preventDefault();
-            e.stopPropagation();
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!dragging) return;
-            const delta = e.clientX - startX;
-            const newWidth = Math.max(COLUMN_MIN, startWidth + delta);
-            applyColumnWidth(col, newWidth);
-        });
-
-        document.addEventListener('mouseup', () => {
-            if (!dragging) return;
-            dragging = false;
-            handle.classList.remove('dragging');
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-
-            if (key) {
-                const map = loadColumnWidths();
-                map[key] = Math.round(col.getBoundingClientRect().width);
-                saveColumnWidths(map);
-            }
-        });
-
-        handle.addEventListener('dblclick', (e) => {
-            e.stopPropagation();
-            resetColumnWidth(col);
-            if (key) {
-                const map = loadColumnWidths();
-                delete map[key];
-                if (Object.keys(map).length) {
-                    saveColumnWidths(map);
-                } else {
-                    layoutRemove(STORAGE_COLUMNS);
-                }
-            }
-        });
-    });
-}
-
-// ── Init ─────────────────────────────────────────────────────────────────────
-
-// Restore sidebar width before first paint to avoid flash.
-restoreSidebarWidth();
-
-document.addEventListener('DOMContentLoaded', () => {
-    initPanelSplitter();
-    initColumnResizeHandles();
-});
diff --git a/src/ui/static/modules/sidebar.js b/src/ui/static/modules/sidebar.js
index ba57acf7..c99a1357 100644
--- a/src/ui/static/modules/sidebar.js
+++ b/src/ui/static/modules/sidebar.js
@@ -20,24 +20,7 @@ function initSidebarCollapse() {
     });
 }
 
-/**
- * Initialize collapse for dynamically created sections
- * @param {HTMLElement} container - Container element
- */
-function initSidebarCollapseForContainer(container) {
-    container.querySelectorAll('.sidebar-header').forEach(header => {
-        header.addEventListener('click', () => {
-            const section = header.closest('.sidebar-section');
-            const content = section.querySelector('.sidebar-content');
-            const isCollapsed = section.classList.toggle('collapsed');
-            content.style.display = isCollapsed ? 'none' : 'block';
-            const toggle = header.querySelector('.sidebar-toggle');
-            if (toggle) {
-                toggle.innerHTML = getIcon(isCollapsed ? 'chevronRight' : 'expandMore', 16);
-            }
-        });
-    });
-}
+
 
 /**
  * Initialize the sidebar with dynamic content
@@ -199,18 +182,4 @@ function renderFlatItems(container, items, type, shortType) {
     });
 }
 
-/**
- * Initialize sidebar item click handlers
- */
-function initSidebarItemClicks() {
-    document.querySelectorAll('.sidebar-item').forEach(item => {
-        item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const type = item.dataset.type;
-            const file = item.dataset.file;
-            if (type && file) {
-                showWorkflowItem(type, file);
-            }
-        });
-    });
-}
+
diff --git a/src/ui/static/modules/tabs.js b/src/ui/static/modules/tabs.js
index 3cd9810b..3c46176a 100644
--- a/src/ui/static/modules/tabs.js
+++ b/src/ui/static/modules/tabs.js
@@ -37,26 +37,16 @@ function switchToTab(targetId) {
     // Keep the shell rail's active marker in sync (modules/shell.js)
     syncRailActive(targetId);
 
-    // Switch context panel in left sidebar
+    // Run per-tab side effects
     switchContextPanel(targetId);
 }
 
 /**
- * Switch context panel based on current tab
+ * Per-tab side effects (the contextual sidebar this used to drive was
+ * removed in #606 — the name survives for its many call sites).
  * @param {string} tabId - Tab ID
  */
 function switchContextPanel(tabId) {
-    // Hide all context panels
-    document.querySelectorAll('.context-panel').forEach(panel => {
-        panel.classList.add('hidden');
-    });
-
-    // Show the context panel matching the tab
-    const targetPanel = document.querySelector(`.context-panel[data-context="${tabId}"]`);
-    if (targetPanel) {
-        targetPanel.classList.remove('hidden');
-    }
-
     // Tasks surface hosts the process list — poll while it's visible
     if (tabId === 'tasks') {
         startProcessPolling();
@@ -102,22 +92,3 @@ function initLogoClick() {
     }
 }
 
-/**
- * Initialize hamburger menu for mobile
- */
-function initHamburgerMenu() {
-    const hamburger = document.getElementById('hamburger-menu');
-    const sidebar = document.querySelector('.sidebar-left');
-    const overlay = document.getElementById('mobile-overlay');
-
-    if (!hamburger || !sidebar || !overlay) return;
-
-    const toggleMenu = () => {
-        hamburger.classList.toggle('active');
-        sidebar.classList.toggle('mobile-open');
-        overlay.classList.toggle('active');
-    };
-
-    hamburger.addEventListener('click', toggleMenu);
-    overlay.addEventListener('click', toggleMenu);
-}

From 6fe2c17b0d38a96a0dc2995f06e96d74cea91402 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 11:03:58 +0300
Subject: [PATCH 05/10] feat(outpost): drop installed-workflow pills from
 topbar

---
 src/shared/css/dotbot-shell.css     |  6 ++---
 src/shared/css/harness.html         |  2 +-
 src/ui/static/css/layout.css        | 38 +++--------------------------
 src/ui/static/index.html            |  1 -
 src/ui/static/modules/ui-updates.js | 27 +++-----------------
 5 files changed, 10 insertions(+), 64 deletions(-)

diff --git a/src/shared/css/dotbot-shell.css b/src/shared/css/dotbot-shell.css
index 4d52399f..d7e498c6 100644
--- a/src/shared/css/dotbot-shell.css
+++ b/src/shared/css/dotbot-shell.css
@@ -1,6 +1,6 @@
 /* DOTBOT Shared Navigation Shell
  * One shell, many rooms: the v4 navigation frame shared by Mothership and Outpost.
- * Spec: docs/DOTBOT-v4-DESIGN-IDEAS.md §7 — 44px top bar · 56px icon rail (pinnable
+ * Spec: docs/DOTBOT-v4-DESIGN-IDEAS.md #7 — 44px top bar · 56px icon rail (pinnable
  * to 200px labelled mode) · 28px dispatch ticker · content capped at 1280px.
  *
  * Consumption order: dotbot-tokens.css → dotbot-crt.css → dotbot-shell.css
@@ -25,7 +25,7 @@
     --shell-rail-w-pinned: 200px;
     --shell-ticker-h: 28px;
     --shell-content-max: 1280px;
-    /* Scanline intensity: 6% on chrome, 0% on content (spec §11) */
+    /* Scanline intensity: 6% on chrome, 0% on content (spec #11) */
     --shell-scanline-alpha: 0.06;
 
     display: grid;
@@ -46,7 +46,7 @@
 }
 
 /* The shell owns its own chrome texture; suppress the global crt.css overlay
- * so content panels stay at 0% (spec §11). No-op until .shell markup exists. */
+ * so content panels stay at 0% (spec #11). No-op until .shell markup exists. */
 body:has(.shell)::after {
     content: none;
 }
diff --git a/src/shared/css/harness.html b/src/shared/css/harness.html
index 90288f78..2d63416e 100644
--- a/src/shared/css/harness.html
+++ b/src/shared/css/harness.html
@@ -147,7 +147,7 @@ <h1 style="font-size:18px; letter-spacing:0.05em;">SHELL HARNESS</h1>
 </div>
 
 <script>
-    // Rail item sets per app variant (glyphs from the design spec §7/§8/§9)
+    // Rail item sets per app variant (glyphs from the design spec #7/#8/#9)
     var RAILS = {
         mothership: [
             { icon: '□', label: 'Fleet' },
diff --git a/src/ui/static/css/layout.css b/src/ui/static/css/layout.css
index 20d27173..83845b57 100644
--- a/src/ui/static/css/layout.css
+++ b/src/ui/static/css/layout.css
@@ -95,29 +95,6 @@
     display: none;
 }
 
-/* Workflow pills container (header, next to workflow badge) */
-.workflow-pills {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.workflow-pill {
-    display: inline-flex;
-    align-items: center;
-    padding: 3px 10px;
-    background: rgb(var(--color-info-rgb) / 0.15);
-    border: 1px solid rgb(var(--color-info-rgb) / 0.4);
-    border-radius: 10px;
-    font-family: var(--font-ui);
-    font-size: 9px;
-    font-weight: 600;
-    color: var(--color-info);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
 /* Editor launch button (tab bar) */
 .editor-btn {
     display: inline-flex;
@@ -299,16 +276,8 @@
 
 /* Topbar density: nothing wraps in the 44px bar. Priority under pressure:
  * identity values (project, workflow, DOTBOT_HOME SHA) keep full text; the
- * inert search pill compresses first; workflow pills ellipsize last — the
- * full list lives on the Workflows tab. */
-.shell-topbar .workflow-pills {
-    flex-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-}
-
+ * inert search pill compresses first. (Installed-workflow pills were dropped
+ * in #606 — spec #7.3 topbar carries only the current-workflow badge.) */
 .shell-topbar .project-badge,
 .shell-topbar .workflow-badge,
 .shell-topbar .framework-banner {
@@ -327,8 +296,7 @@
 }
 
 @media (max-width: 1200px) {
-    .shell-topbar .shell-search,
-    .shell-topbar .workflow-pills {
+    .shell-topbar .shell-search {
         display: none;
     }
 }
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index 0bfd9553..e1165d5f 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -38,7 +38,6 @@
                     </select>
                 </label>
                 <span class="workflow-badge" id="workflow-badge"></span>
-                <span class="workflow-pills" id="workflow-pills"></span>
             </div>
             <button class="shell-search" type="button" disabled title="Command palette — coming with #553">
                 <span>search…</span>
diff --git a/src/ui/static/modules/ui-updates.js b/src/ui/static/modules/ui-updates.js
index 51b6e277..6a96c9b3 100644
--- a/src/ui/static/modules/ui-updates.js
+++ b/src/ui/static/modules/ui-updates.js
@@ -558,7 +558,9 @@ async function initProjectName() {
         const workflowName = info.workflow || null;
         currentWorkflowName = workflowName;
         updateWorkflowBadge(workflowName);
-        updateWorkflowPills(info.installed_workflows || []);
+        // Topbar pills were dropped in #606 (spec #7.3 topbar has no pills);
+        // the installed list still feeds the workflow-launch CTA.
+        installedWorkflows = info.installed_workflows || [];
         updateFrameworkBanner(info.framework || null);
     } else {
         projectName = 'autonomous';
@@ -649,29 +651,6 @@ function updateFrameworkBanner(framework) {
     banner.title = tooltipLines.join('\n');
 }
 
-/**
- * Update workflow pills in header from installed_workflows
- * @param {Array} workflows - Array of workflow name strings
- */
-function updateWorkflowPills(workflows) {
-    const container = document.getElementById('workflow-pills');
-    if (!container) return;
-    installedWorkflows = workflows || [];
-    if (workflows && workflows.length > 0) {
-        // Strip the registry prefix (e.g. "iwg:iwg-bs-scoring" -> "iwg-bs-scoring")
-        // so we can de-duplicate against the active workflow badge
-        const activeBase = currentWorkflowName
-            ? currentWorkflowName.replace(/^[^:]+:/, '')
-            : null;
-        const filtered = workflows.filter(name => name !== currentWorkflowName && name !== activeBase);
-        container.innerHTML = filtered.map(name =>
-            `<span class="workflow-pill" title="Installed workflow: ${escapeHtml(name)}">${escapeHtml(name)}</span>`
-        ).join('');
-    } else {
-        container.innerHTML = '';
-    }
-}
-
 /**
  * Update footer mission text
  */

From d9d544c5bec31b358715da7239fe53c8f16f52a4 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 11:06:40 +0300
Subject: [PATCH 06/10] style(mothership): restyle dashboard tabs as filter
 chips

---
 .../Dotbot.Server/wwwroot/css/dashboard.css   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/server-dotnet/src/Dotbot.Server/wwwroot/css/dashboard.css b/src/server-dotnet/src/Dotbot.Server/wwwroot/css/dashboard.css
index 498e2a7c..503509b7 100644
--- a/src/server-dotnet/src/Dotbot.Server/wwwroot/css/dashboard.css
+++ b/src/server-dotnet/src/Dotbot.Server/wwwroot/css/dashboard.css
@@ -89,25 +89,22 @@ body {
     margin-left: auto;
 }
 
-/* === Tab Bar === */
+/* === View filter chips (#606 — sentence-case chips replace uppercase tabs,
+ * design spec #10; same switching JS, restyle only) === */
 .tab-bar-container {
     display: flex;
-    gap: 0;
-    padding: 0 20px;
-    background: var(--bezel-dark);
-    border-bottom: 1px solid var(--bezel-edge);
+    gap: 6px;
+    padding: 12px 20px 12px 0;
     flex-shrink: 0;
 }
 .tab {
     font-family: var(--font-mono);
     font-size: 11px;
     font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    padding: 10px 20px;
+    padding: 3px 12px;
     background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
+    border: 1px solid var(--bezel-edge);
+    border-radius: 3px;
     color: var(--color-muted);
     cursor: pointer;
     transition: all 150ms ease;
@@ -118,8 +115,8 @@ body {
 }
 .tab.active {
     color: var(--color-primary);
-    border-bottom-color: var(--color-primary);
-    text-shadow: 0 0 8px var(--primary-30);
+    border-color: var(--color-primary);
+    background: var(--primary-10);
 }
 
 /* === Main Content ===

From 889a69487d1ec72c4f96091aa0f4ba5a7e6d4eba Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 11:28:15 +0300
Subject: [PATCH 07/10] test(e2e): cover Tasks surface chips, detail panel and
 action guard

---
 tests/e2e/specs/tasks.spec.ts | 94 +++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 tests/e2e/specs/tasks.spec.ts

diff --git a/tests/e2e/specs/tasks.spec.ts b/tests/e2e/specs/tasks.spec.ts
new file mode 100644
index 00000000..e1b23ee3
--- /dev/null
+++ b/tests/e2e/specs/tasks.spec.ts
@@ -0,0 +1,94 @@
+import { test, expect } from "@playwright/test";
+import { seedTask, removeTask, type SeededTask } from "../helpers/fixture";
+
+// Unified Tasks surface (#606): filter chips + task list + detail panel.
+test.describe("Tasks surface", () => {
+  const seeded: SeededTask[] = [];
+
+  test.afterEach(async () => {
+    while (seeded.length > 0) {
+      const t = seeded.pop()!;
+      try {
+        removeTask(t);
+      } catch {}
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator("body")).toHaveAttribute("data-app-ready", "1", {
+      timeout: 15_000,
+    });
+  });
+
+  test("chip filtering changes the visible row set", async ({ page }) => {
+    seeded.push(seedTask("todo", { name: "tasks-spec-todo" }));
+
+    await expect(page.locator("#todo-count")).toHaveText("1", {
+      timeout: 10_000,
+    });
+
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+    await expect(page.locator("#tab-tasks")).toHaveClass(/active/);
+
+    // All filter shows the row
+    await page.locator('.filter-chip[data-task-filter="all"]').click();
+    await expect(page.locator("#tasks-list .task-list-item")).toHaveCount(1);
+
+    // Done filter hides it
+    await page.locator('.filter-chip[data-task-filter="done"]').click();
+    await expect(
+      page.locator('.filter-chip[data-task-filter="done"]'),
+    ).toHaveClass(/active/);
+    await expect(page.locator("#tasks-list .task-list-item")).toHaveCount(0);
+
+    // Todo filter shows it again
+    await page.locator('.filter-chip[data-task-filter="todo"]').click();
+    await expect(page.locator("#tasks-list .task-list-item")).toHaveCount(1);
+  });
+
+  test("row click opens the detail panel; Full detail opens the modal", async ({
+    page,
+  }) => {
+    seeded.push(seedTask("todo", { name: "tasks-spec-panel" }));
+
+    await expect(page.locator("#todo-count")).toHaveText("1", {
+      timeout: 10_000,
+    });
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+
+    const row = page.locator("#tasks-list .task-list-item").first();
+    await expect(row).toBeVisible({ timeout: 10_000 });
+    // Click the name, not the action buttons
+    await row.locator(".task-list-item-name").click();
+
+    const panel = page.locator("#task-detail-panel");
+    await expect(panel).toContainText("tasks-spec-panel");
+    await expect(panel.locator(".task-detail-full-link")).toBeVisible();
+
+    // Full detail opens the deep-view modal
+    await panel.locator(".task-detail-full-link").click();
+    await expect(page.locator("#task-modal")).toHaveClass(/visible/);
+  });
+
+  test("clicking a task action button does not open the detail panel", async ({
+    page,
+  }) => {
+    seeded.push(seedTask("todo", { name: "tasks-spec-guard" }));
+
+    await expect(page.locator("#todo-count")).toHaveText("1", {
+      timeout: 10_000,
+    });
+    await page.locator('.shell-rail-item[data-tab="tasks"]').click();
+
+    const row = page.locator("#tasks-list .task-list-item").first();
+    await expect(row).toBeVisible({ timeout: 10_000 });
+
+    // The edit action opens the edit modal — the panel must stay empty
+    await row.locator('[data-task-action="edit-task"]').click();
+    await expect(page.locator("#task-edit-modal")).toHaveClass(/visible/, {
+      timeout: 10_000,
+    });
+    await expect(page.locator("#task-detail-panel .empty-state")).toBeVisible();
+  });
+});

From a60861c64bf2b72d97e910db4a6ac620c6d3ac58 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 14:04:41 +0300
Subject: [PATCH 08/10] style(shell): center and widen the topbar search pill

---
 src/shared/css/dotbot-shell.css |  9 +++++++--
 src/ui/static/css/layout.css    | 14 ++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/shared/css/dotbot-shell.css b/src/shared/css/dotbot-shell.css
index d7e498c6..dd6a2d76 100644
--- a/src/shared/css/dotbot-shell.css
+++ b/src/shared/css/dotbot-shell.css
@@ -112,14 +112,19 @@ body:has(.shell)::after {
     color: var(--color-primary);
 }
 
-/* Search pill — the visible palette affordance. Behaviour lands with #553. */
+/* Search pill — the visible palette affordance (behaviour lands with #553).
+ * Centered mid-bar per the spec #7.3 sketch; clamp keeps it prominent on wide
+ * screens and lets it compress before identity values would truncate. */
 .shell-search {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex: 0 1 clamp(180px, 24vw, 340px);
+    min-width: 140px;
     margin-left: auto;
+    margin-right: auto;
     padding: 5px 12px;
-    min-width: 220px;
+    overflow: hidden;
     font-family: var(--font-mono);
     font-size: 11px;
     color: var(--color-muted);
diff --git a/src/ui/static/css/layout.css b/src/ui/static/css/layout.css
index 83845b57..a2ecd8c0 100644
--- a/src/ui/static/css/layout.css
+++ b/src/ui/static/css/layout.css
@@ -12,12 +12,14 @@
     height: 100%;
 }
 
-/* App-side topbar group: project badge + runtime picker + workflow badges */
+/* App-side topbar group: project badge + runtime picker + workflow badge.
+ * Never shrinks below content — identity values keep full text; the search
+ * pill is the flexible element that absorbs width pressure. */
 .shell-context-group {
     display: flex;
     align-items: center;
     gap: 12px;
-    min-width: 0;
+    flex-shrink: 0;
 }
 
 .logo {
@@ -100,6 +102,8 @@
     display: inline-flex;
     align-items: center;
     gap: 5px;
+    flex-shrink: 0;
+    white-space: nowrap;
     padding: 4px 10px;
     background: var(--primary-10);
     border: 1px solid var(--primary-30);
@@ -289,12 +293,6 @@
     white-space: nowrap;
 }
 
-.shell-topbar .shell-search {
-    min-width: 120px;
-    flex-shrink: 1;
-    overflow: hidden;
-}
-
 @media (max-width: 1200px) {
     .shell-topbar .shell-search {
         display: none;

From 83cd5c9fa2af92573ff70aa5d23fce23bf375ec8 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 14:04:42 +0300
Subject: [PATCH 09/10] feat(outpost): tasks surface and pane layout polish

---
 src/ui/static/css/views.css            | 39 ++++++++++++++++++++++++--
 src/ui/static/index.html               | 33 +++++++---------------
 src/ui/static/modules/tasks-surface.js |  3 +-
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/ui/static/css/views.css b/src/ui/static/css/views.css
index 90fee6b2..d252c4de 100644
--- a/src/ui/static/css/views.css
+++ b/src/ui/static/css/views.css
@@ -7,12 +7,20 @@
     display: grid;
     grid-template-columns: minmax(220px, 280px) 1fr;
     gap: 16px;
-    height: 100%;
-    min-height: 0;
+    /* min-height (not height): the grid must grow with content so the
+     * scrolling .tab-pane can actually scroll it */
+    min-height: 100%;
 }
 
 .pane-nav {
     min-width: 0;
+    /* Independent scroll, like the old sidebar: the column sticks to the
+     * viewport and scrolls internally, so expanding nav items never inflates
+     * the pane (which stretched the viewer into an empty void) */
+    align-self: start;
+    position: sticky;
+    top: 0;
+    max-height: calc(100vh - 44px - 28px - 32px);
     overflow-y: auto;
 }
 
@@ -23,6 +31,18 @@
     gap: 12px;
 }
 
+/* Runs panel keeps its natural height; the viewer takes the remainder
+ * (its own height:100% would otherwise squeeze the panel and clip tasks) */
+.pane-body > .workflow-runs-panel {
+    flex-shrink: 0;
+}
+
+.pane-body > .workflow-viewer {
+    height: auto;
+    flex: 1;
+    min-height: 240px;
+}
+
 .decisions-header-strip {
     display: flex;
     align-items: center;
@@ -33,9 +53,16 @@
 
 .decisions-header-strip .decision-summary {
     display: flex;
-    gap: 16px;
+    align-items: center;
+    gap: 8px;
 }
 
+/* Decision filter chips: counts keep the .decision-status-* palette */
+.filter-chip[data-decision-filter="proposed"] .chip-count { color: var(--color-primary); }
+.filter-chip[data-decision-filter="accepted"] .chip-count { color: var(--color-success); }
+.filter-chip[data-decision-filter="deprecated"] .chip-count,
+.filter-chip[data-decision-filter="superseded"] .chip-count { color: var(--color-muted); }
+
 @media (max-width: 900px) {
     .pane-with-nav {
         grid-template-columns: 1fr;
@@ -1850,10 +1877,16 @@
 .cockpit-col {
     flex: 0 0 clamp(240px, 22vw, 300px);
     min-width: 0;
+    align-self: stretch;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 12px;
+    /* Framed as a panel so internal scrolling reads as such — without the
+     * border, content clipped at the fold looks broken rather than scrollable */
+    background: var(--bg-module);
+    border: 1px solid var(--bezel-edge);
+    border-radius: 4px;
 }
 
 @media (max-width: 900px) {
diff --git a/src/ui/static/index.html b/src/ui/static/index.html
index e1165d5f..748ee5a0 100644
--- a/src/ui/static/index.html
+++ b/src/ui/static/index.html
@@ -308,7 +308,9 @@
                                     <button class="filter-chip" data-task-filter="analysed">Analysed <span class="chip-count" id="analysed-count">0</span></button>
                                     <button class="filter-chip" data-task-filter="in-progress">In progress <span class="chip-count" id="progress-count">-</span></button>
                                     <button class="filter-chip" data-task-filter="done">Done <span class="chip-count" id="done-count">-</span></button>
-                                    <span class="chips-extra"><span id="skipped-count">0</span> skipped · <span id="cancelled-count">0</span> cancelled</span>
+                                    <button class="filter-chip" data-task-filter="skipped">Skipped <span class="chip-count" id="skipped-count">0</span></button>
+                                    <!-- Count only: /api/state carries no cancelled_list, so there is nothing to filter -->
+                                    <span class="chips-extra" title="Count only — the server does not return cancelled tasks"><span id="cancelled-count">0</span> cancelled</span>
                                 </div>
                                 <div class="tasks-toolbar-actions">
                                     <select class="pipeline-workflow-filter" id="pipeline-workflow-filter" title="Filter tasks by workflow">
@@ -351,27 +353,12 @@
                     <!-- Decisions Tab -->
                     <div class="tab-pane" id="tab-decisions">
                         <div class="decisions-header-strip">
-                            <div class="decision-summary">
-                                <div class="summary-item">
-                                    <span class="summary-label">Proposed</span>
-                                    <span class="summary-value" id="decision-count-proposed">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Accepted</span>
-                                    <span class="summary-value active" id="decision-count-accepted">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Deprecated</span>
-                                    <span class="summary-value" id="decision-count-deprecated">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Superseded</span>
-                                    <span class="summary-value" id="decision-count-superseded">0</span>
-                                </div>
-                                <div class="summary-item">
-                                    <span class="summary-label">Total</span>
-                                    <span class="summary-value" id="decision-count-total">0</span>
-                                </div>
+                            <div class="filter-chips" id="decision-filter-chips">
+                                <button class="filter-chip active" data-decision-filter="all">All <span class="chip-count" id="decision-count-total">0</span></button>
+                                <button class="filter-chip" data-decision-filter="proposed">Proposed <span class="chip-count" id="decision-count-proposed">0</span></button>
+                                <button class="filter-chip" data-decision-filter="accepted">Accepted <span class="chip-count" id="decision-count-accepted">0</span></button>
+                                <button class="filter-chip" data-decision-filter="deprecated">Deprecated <span class="chip-count" id="decision-count-deprecated">0</span></button>
+                                <button class="filter-chip" data-decision-filter="superseded">Superseded <span class="chip-count" id="decision-count-superseded">0</span></button>
                             </div>
                             <button class="ctrl-btn-sm primary" id="decision-create-btn">+ New Decision</button>
                         </div>
@@ -909,7 +896,7 @@
                                                     <span class="setting-label">Test Connection</span>
                                                     <span class="setting-description" id="notif-test-status"></span>
                                                 </div>
-                                                <button class="btn btn-small" id="notif-test-btn">Test</button>
+                                                <button class="ctrl-btn-sm" id="notif-test-btn">Test</button>
                                             </div>
                                         </div>
 
diff --git a/src/ui/static/modules/tasks-surface.js b/src/ui/static/modules/tasks-surface.js
index 7b42b229..83fdfaf5 100644
--- a/src/ui/static/modules/tasks-surface.js
+++ b/src/ui/static/modules/tasks-surface.js
@@ -81,6 +81,7 @@ function collectFilteredTasks(tasks) {
         'analysed': withStatus(tasks.analysed_list, 'analysed'),
         'todo': withStatus(tasks.upcoming, 'todo'),
         'done': withStatus(tasks.recent_completed, 'done'),
+        'skipped': withStatus(tasks.skipped_list, 'skipped'),
     };
 
     let rows;
@@ -88,7 +89,7 @@ function collectFilteredTasks(tasks) {
         rows = [
             ...buckets['in-progress'], ...buckets['needs-input'], ...buckets['analysing'],
             ...buckets['analysed'], ...buckets['todo'], ...buckets['done'],
-            ...withStatus(tasks.skipped_list, 'skipped'),
+            ...buckets['skipped'],
         ];
     } else {
         rows = buckets[activeTaskFilter] || [];

From dce633585cd0a79fd0b04f3cef96f5db3dbc907d Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <ivan.bondarenko@iwgplc.com>
Date: Mon, 13 Jul 2026 14:04:42 +0300
Subject: [PATCH 10/10] feat(outpost): decision status counts become filter
 chips

---
 src/ui/static/modules/decisions.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/ui/static/modules/decisions.js b/src/ui/static/modules/decisions.js
index 41203595..ce7441c1 100644
--- a/src/ui/static/modules/decisions.js
+++ b/src/ui/static/modules/decisions.js
@@ -8,6 +8,7 @@
 let _decisions          = [];
 let _expandedDecisionId = null;
 let _editingDecisionId  = null;   // null = create mode
+let _decisionFilter     = 'all';  // status filter driven by the header chips (#606)
 
 // ── Init ──────────────────────────────────────────────────────────────────────
 
@@ -15,9 +16,22 @@ async function initDecisions() {
     _bindCreateButton();
     _bindModal();
     _bindListDelegation();
+    _bindFilterChips();
     await _loadDecisions();
 }
 
+function _bindFilterChips() {
+    const chips = document.getElementById('decision-filter-chips');
+    if (!chips) return;
+    chips.addEventListener('click', (e) => {
+        const chip = e.target.closest('.filter-chip');
+        if (!chip) return;
+        _decisionFilter = chip.dataset.decisionFilter || 'all';
+        chips.querySelectorAll('.filter-chip').forEach(c => c.classList.toggle('active', c === chip));
+        _renderList();
+    });
+}
+
 function _bindListDelegation() {
     const container = document.getElementById('decision-list');
     if (!container) return;
@@ -72,11 +86,20 @@ function _renderList() {
         return;
     }
 
+    const visible = _decisionFilter === 'all'
+        ? _decisions
+        : _decisions.filter(d => (d.status || 'proposed') === _decisionFilter);
+
+    if (visible.length === 0) {
+        container.innerHTML = '<div class="empty-state">No decisions for this filter</div>';
+        return;
+    }
+
     const statusOrder  = ['proposed', 'accepted', 'deprecated', 'superseded'];
     const statusLabels = { proposed: 'Proposed', accepted: 'Accepted', deprecated: 'Deprecated', superseded: 'Superseded' };
 
     const groups = {};
-    for (const dec of _decisions) {
+    for (const dec of visible) {
         const s = dec.status || 'proposed';
         if (!groups[s]) groups[s] = [];
         groups[s].push(dec);