feat(ui): unified Tasks surface, 6-destination rail & sidebar removal (#606)

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 ===

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

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' },

src/ui/static/app.js

@@ -32,23 +32,21 @@ document.addEventListener('DOMContentLoaded', async () => {
     initTabs();
     initShell();
     initLogoClick();
-    initHamburgerMenu();
     initSidebarCollapse();
     await initSidebar();
     initControlButtons();
     initSteeringPanel();
     initSettingsToggles();
     initTaskClicks();
     initRoadmapTaskActions();
-    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();

src/ui/static/css/layout.css

@@ -4,20 +4,22 @@
 /* ========== 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%;
 }
 
-/* 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 {
@@ -34,47 +36,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);
@@ -136,34 +97,13 @@
     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;
     align-items: center;
     gap: 5px;
+    flex-shrink: 0;
+    white-space: nowrap;
     padding: 4px 10px;
     background: var(--primary-10);
     border: 1px solid var(--primary-30);
@@ -305,47 +245,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
@@ -373,16 +280,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 {
@@ -394,15 +293,8 @@
     white-space: nowrap;
 }
 
-.shell-topbar .shell-search {
-    min-width: 120px;
-    flex-shrink: 1;
-    overflow: hidden;
-}
-
 @media (max-width: 1200px) {
-    .shell-topbar .shell-search,
-    .shell-topbar .workflow-pills {
+    .shell-topbar .shell-search {
         display: none;
     }
 }