specsmd 0.1.25 → 0.1.27

package/lib/dashboard/tui/app.js

@@ -1,5 +1,5 @@
 const { createWatchRuntime } = require('../runtime/watch-runtime');
-const { createInitialUIState, cycleView, cycleRunFilter } = require('./store');
+const { createInitialUIState, cycleView, cycleViewBackward, cycleRunFilter } = require('./store');
 
 function toDashboardError(error, defaultCode = 'DASHBOARD_ERROR') {
   if (!error) {
@@ -32,6 +32,50 @@ function toDashboardError(error, defaultCode = 'DASHBOARD_ERROR') {
   };
 }
 
+function safeJsonHash(value) {
+  try {
+    return JSON.stringify(value, (key, nestedValue) => {
+      if (key === 'generatedAt') {
+        return undefined;
+      }
+      return nestedValue;
+    });
+  } catch {
+    return String(value);
+  }
+}
+
+function resolveIconSet() {
+  const mode = (process.env.SPECSMD_ICON_SET || 'auto').toLowerCase();
+
+  const ascii = {
+    runs: '[R]',
+    overview: '[O]',
+    health: '[H]',
+    runFile: '*'
+  };
+
+  const nerd = {
+    runs: '󰑮',
+    overview: '󰍉',
+    health: '󰓦',
+    runFile: '󰈔'
+  };
+
+  if (mode === 'ascii') {
+    return ascii;
+  }
+  if (mode === 'nerd') {
+    return nerd;
+  }
+
+  const locale = `${process.env.LC_ALL || ''}${process.env.LC_CTYPE || ''}${process.env.LANG || ''}`;
+  const isUtf8 = /utf-?8/i.test(locale);
+  const looksLikeVsCodeTerminal = (process.env.TERM_PROGRAM || '').toLowerCase().includes('vscode');
+
+  return isUtf8 && looksLikeVsCodeTerminal ? nerd : ascii;
+}
+
 function truncate(value, width) {
   const text = String(value ?? '');
   if (!Number.isFinite(width) || width <= 0 || text.length <= width) {
@@ -46,8 +90,7 @@ function truncate(value, width) {
 }
 
 function fitLines(lines, maxLines, width) {
-  const safeLines = (Array.isArray(lines) ? lines : [])
-    .map((line) => truncate(line, width));
+  const safeLines = (Array.isArray(lines) ? lines : []).map((line) => truncate(line, width));
 
   if (safeLines.length <= maxLines) {
     return safeLines;
@@ -71,14 +114,22 @@ function formatTime(value) {
   return date.toLocaleTimeString();
 }
 
-function buildHeaderLines(snapshot, flow, workspacePath, watchEnabled, watchStatus, lastRefreshAt, view, runFilter, width) {
+function buildShortStats(snapshot) {
+  if (!snapshot?.initialized) {
+    return 'init: waiting for state.yaml';
+  }
+
+  const stats = snapshot.stats;
+  return `runs ${stats.activeRunsCount}/${stats.completedRuns} | intents ${stats.completedIntents}/${stats.totalIntents} | work ${stats.completedWorkItems}/${stats.totalWorkItems}`;
+}
+
+function buildHeaderLine(snapshot, flow, watchEnabled, watchStatus, lastRefreshAt, view, runFilter, width) {
   const projectName = snapshot?.project?.name || 'Unnamed FIRE project';
+  const shortStats = buildShortStats(snapshot);
 
-  return [
-    `specsmd dashboard | ${flow.toUpperCase()} | ${projectName}`,
-    `path: ${workspacePath}`,
-    `updated: ${formatTime(lastRefreshAt)} | watch: ${watchEnabled ? watchStatus : 'off'} | view: ${view} | filter: ${runFilter}`
-  ].map((line) => truncate(line, width));
+  const line = `${flow.toUpperCase()} | ${projectName} | ${shortStats} | watch:${watchEnabled ? watchStatus : 'off'} | ${view}/${runFilter} | ${formatTime(lastRefreshAt)}`;
+
+  return truncate(line, width);
 }
 
 function buildErrorLines(error, width) {
@@ -86,9 +137,7 @@ function buildErrorLines(error, width) {
     return [];
   }
 
-  const lines = [
-    `[${error.code || 'ERROR'}] ${error.message || 'Unknown error'}`
-  ];
+  const lines = [`[${error.code || 'ERROR'}] ${error.message || 'Unknown error'}`];
 
   if (error.details) {
     lines.push(`details: ${error.details}`);
@@ -103,38 +152,89 @@ function buildErrorLines(error, width) {
   return lines.map((line) => truncate(line, width));
 }
 
-function buildActiveRunLines(snapshot, runFilter, width) {
-  if (runFilter === 'completed') {
-    return [truncate('Hidden by active filter: completed', width)];
+function getCurrentRun(snapshot) {
+  const activeRuns = Array.isArray(snapshot?.activeRuns) ? [...snapshot.activeRuns] : [];
+  if (activeRuns.length === 0) {
+    return null;
   }
 
-  const activeRuns = snapshot?.activeRuns || [];
-  if (activeRuns.length === 0) {
-    return [truncate('No active runs', width)];
+  activeRuns.sort((a, b) => {
+    const aTime = a?.startedAt ? Date.parse(a.startedAt) : 0;
+    const bTime = b?.startedAt ? Date.parse(b.startedAt) : 0;
+    if (bTime !== aTime) {
+      return bTime - aTime;
+    }
+    return String(a?.id || '').localeCompare(String(b?.id || ''));
+  });
+
+  return activeRuns[0] || null;
+}
+
+function getCurrentPhaseLabel(run, currentWorkItem) {
+  const phase = currentWorkItem?.currentPhase || '';
+  if (typeof phase === 'string' && phase !== '') {
+    return phase.toLowerCase();
   }
 
-  const lines = [];
-  for (const run of activeRuns) {
-    const currentItem = run.currentItem || 'n/a';
-    const workItems = Array.isArray(run.workItems) ? run.workItems : [];
-    const completed = workItems.filter((item) => item.status === 'completed').length;
-    const inProgress = workItems.filter((item) => item.status === 'in_progress').length;
-    const artifacts = [
-      run.hasPlan ? 'plan' : null,
-      run.hasWalkthrough ? 'walkthrough' : null,
-      run.hasTestReport ? 'test-report' : null
-    ].filter(Boolean).join(', ') || 'none';
+  if (run?.hasTestReport) {
+    return 'review';
+  }
+  if (run?.hasPlan) {
+    return 'execute';
+  }
+  return 'plan';
+}
 
-    lines.push(`${run.id} [${run.scope}] current: ${currentItem}`);
-    lines.push(`progress ${completed}/${workItems.length} done, ${inProgress} active | artifacts: ${artifacts}`);
+function buildPhaseTrack(currentPhase) {
+  const order = ['plan', 'execute', 'test', 'review'];
+  const labels = ['P', 'E', 'T', 'R'];
+  const currentIndex = Math.max(0, order.indexOf(currentPhase));
+  return labels.map((label, index) => (index === currentIndex ? `[${label}]` : ` ${label} `)).join(' - ');
+}
+
+function buildCurrentRunLines(snapshot, width) {
+  const run = getCurrentRun(snapshot);
+  if (!run) {
+    return [truncate('No active run', width)];
   }
 
+  const workItems = Array.isArray(run.workItems) ? run.workItems : [];
+  const completed = workItems.filter((item) => item.status === 'completed').length;
+  const currentWorkItem = workItems.find((item) => item.id === run.currentItem) || workItems.find((item) => item.status === 'in_progress') || workItems[0];
+
+  const itemId = currentWorkItem?.id || run.currentItem || 'n/a';
+  const mode = String(currentWorkItem?.mode || 'confirm').toUpperCase();
+  const status = currentWorkItem?.status || 'pending';
+  const currentPhase = getCurrentPhaseLabel(run, currentWorkItem);
+  const phaseTrack = buildPhaseTrack(currentPhase);
+
+  const lines = [
+    `${run.id}  [${run.scope}]  ${completed}/${workItems.length} items done`,
+    `work item: ${itemId}`,
+    `mode: ${mode}  |  status: ${status}`,
+    `phase: ${phaseTrack}`
+  ];
+
   return lines.map((line) => truncate(line, width));
 }
 
+function buildRunFilesLines(snapshot, width, icons) {
+  const run = getCurrentRun(snapshot);
+  if (!run) {
+    return [truncate('No run files (no active run)', width)];
+  }
+
+  const files = ['run.md'];
+  if (run.hasPlan) files.push('plan.md');
+  if (run.hasTestReport) files.push('test-report.md');
+  if (run.hasWalkthrough) files.push('walkthrough.md');
+
+  return files.map((file) => truncate(`${icons.runFile} ${file}`, width));
+}
+
 function buildPendingLines(snapshot, runFilter, width) {
   if (runFilter === 'completed') {
-    return [truncate('Hidden by active filter: completed', width)];
+    return [truncate('Hidden by run filter: completed', width)];
   }
 
   const pending = snapshot?.pendingItems || [];
@@ -143,16 +243,14 @@ function buildPendingLines(snapshot, runFilter, width) {
   }
 
   return pending.map((item) => {
-    const deps = item.dependencies && item.dependencies.length > 0
-      ? ` deps:${item.dependencies.join(',')}`
-      : '';
+    const deps = item.dependencies && item.dependencies.length > 0 ? ` deps:${item.dependencies.join(',')}` : '';
     return truncate(`${item.id} (${item.mode}/${item.complexity}) in ${item.intentTitle}${deps}`, width);
   });
 }
 
 function buildCompletedLines(snapshot, runFilter, width) {
   if (runFilter === 'active') {
-    return [truncate('Hidden by active filter: active', width)];
+    return [truncate('Hidden by run filter: active', width)];
   }
 
   const completedRuns = snapshot?.completedRuns || [];
@@ -180,6 +278,15 @@ function buildStatsLines(snapshot, width) {
   ].map((line) => truncate(line, width));
 }
 
+function buildWarningsLines(snapshot, width) {
+  const warnings = snapshot?.warnings || [];
+  if (warnings.length === 0) {
+    return [truncate('No warnings', width)];
+  }
+
+  return warnings.map((warning) => truncate(warning, width));
+}
+
 function buildOverviewProjectLines(snapshot, width) {
   if (!snapshot?.initialized) {
     return [
@@ -221,13 +328,37 @@ function buildOverviewStandardsLines(snapshot, width) {
   });
 }
 
-function buildWarningsLines(snapshot, width) {
-  const warnings = snapshot?.warnings || [];
-  if (warnings.length === 0) {
-    return [truncate('No warnings', width)];
+function allocateSingleColumnPanels(candidates, rowsBudget) {
+  const filtered = (candidates || []).filter(Boolean);
+  if (filtered.length === 0) {
+    return [];
   }
 
-  return warnings.map((warning) => truncate(warning, width));
+  const selected = [];
+  let remaining = Math.max(4, rowsBudget);
+
+  for (const panel of filtered) {
+    const margin = selected.length > 0 ? 1 : 0;
+    const minimumRows = 4 + margin;
+
+    if (remaining >= minimumRows || selected.length === 0) {
+      selected.push({
+        ...panel,
+        maxLines: 1
+      });
+      remaining -= minimumRows;
+    }
+  }
+
+  let index = 0;
+  while (remaining > 0 && selected.length > 0) {
+    const panelIndex = index % selected.length;
+    selected[panelIndex].maxLines += 1;
+    remaining -= 1;
+    index += 1;
+  }
+
+  return selected;
 }
 
 function createDashboardApp(deps) {
@@ -245,7 +376,7 @@ function createDashboardApp(deps) {
   } = deps;
 
   const { Box, Text, useApp, useInput, useStdout } = ink;
-  const { useState, useEffect, useCallback } = React;
+  const { useState, useEffect, useCallback, useRef } = React;
 
   function SectionPanel(props) {
     const {
@@ -254,8 +385,8 @@ function createDashboardApp(deps) {
       width,
       maxLines,
       borderColor,
-      marginRight,
-      marginBottom
+      marginBottom,
+      dense
     } = props;
 
     const contentWidth = Math.max(18, width - 4);
@@ -265,11 +396,10 @@ function createDashboardApp(deps) {
       Box,
       {
         flexDirection: 'column',
-        borderStyle: 'round',
+        borderStyle: dense ? 'single' : 'round',
         borderColor: borderColor || 'gray',
-        paddingX: 1,
+        paddingX: dense ? 0 : 1,
         width,
-        marginRight: marginRight || 0,
         marginBottom: marginBottom || 0
       },
       React.createElement(Text, { bold: true, color: 'cyan' }, truncate(title, contentWidth)),
@@ -277,12 +407,43 @@ function createDashboardApp(deps) {
     );
   }
 
+  function TabsBar(props) {
+    const { view, width, icons } = props;
+    const tabs = [
+      { id: 'runs', label: ` 1 ${icons.runs} RUNS ` },
+      { id: 'overview', label: ` 2 ${icons.overview} OVERVIEW ` },
+      { id: 'health', label: ` 3 ${icons.health} HEALTH ` }
+    ];
+
+    return React.createElement(
+      Box,
+      { width, flexWrap: 'nowrap' },
+      ...tabs.map((tab) => {
+        const isActive = tab.id === view;
+        return React.createElement(
+          Text,
+          {
+            key: tab.id,
+            bold: isActive,
+            color: isActive ? 'black' : 'gray',
+            backgroundColor: isActive ? 'cyan' : undefined
+          },
+          tab.label
+        );
+      })
+    );
+  }
+
   function DashboardApp() {
     const { exit } = useApp();
     const { stdout } = useStdout();
 
+    const initialNormalizedError = initialError ? toDashboardError(initialError) : null;
+    const snapshotHashRef = useRef(safeJsonHash(initialSnapshot || null));
+    const errorHashRef = useRef(initialNormalizedError ? safeJsonHash(initialNormalizedError) : null);
+
     const [snapshot, setSnapshot] = useState(initialSnapshot || null);
-    const [error, setError] = useState(initialError ? toDashboardError(initialError) : null);
+    const [error, setError] = useState(initialNormalizedError);
     const [ui, setUi] = useState(createInitialUIState());
     const [lastRefreshAt, setLastRefreshAt] = useState(new Date().toISOString());
     const [watchStatus, setWatchStatus] = useState(watchEnabled ? 'watching' : 'off');
@@ -290,22 +451,52 @@ function createDashboardApp(deps) {
       columns: stdout?.columns || process.stdout.columns || 120,
       rows: stdout?.rows || process.stdout.rows || 40
     }));
+    const icons = resolveIconSet();
 
     const refresh = useCallback(async () => {
+      const now = new Date().toISOString();
+
       try {
         const result = await parseSnapshot();
 
         if (result?.ok) {
-          setSnapshot(result.snapshot || null);
-          setError(null);
-          setWatchStatus(watchEnabled ? 'watching' : 'off');
+          const nextSnapshot = result.snapshot || null;
+          const nextSnapshotHash = safeJsonHash(nextSnapshot);
+
+          if (nextSnapshotHash !== snapshotHashRef.current) {
+            snapshotHashRef.current = nextSnapshotHash;
+            setSnapshot(nextSnapshot);
+            setLastRefreshAt(now);
+          }
+
+          if (errorHashRef.current !== null) {
+            errorHashRef.current = null;
+            setError(null);
+            setLastRefreshAt(now);
+          }
+
+          if (watchEnabled) {
+            setWatchStatus((previous) => (previous === 'watching' ? previous : 'watching'));
+          }
         } else {
-          setError(toDashboardError(result?.error, 'PARSE_ERROR'));
+          const nextError = toDashboardError(result?.error, 'PARSE_ERROR');
+          const nextErrorHash = safeJsonHash(nextError);
+
+          if (nextErrorHash !== errorHashRef.current) {
+            errorHashRef.current = nextErrorHash;
+            setError(nextError);
+            setLastRefreshAt(now);
+          }
         }
       } catch (refreshError) {
-        setError(toDashboardError(refreshError, 'REFRESH_FAILED'));
-      } finally {
-        setLastRefreshAt(new Date().toISOString());
+        const nextError = toDashboardError(refreshError, 'REFRESH_FAILED');
+        const nextErrorHash = safeJsonHash(nextError);
+
+        if (nextErrorHash !== errorHashRef.current) {
+          errorHashRef.current = nextErrorHash;
+          setError(nextError);
+          setLastRefreshAt(now);
+        }
       }
     }, [parseSnapshot, watchEnabled]);
 
@@ -335,11 +526,26 @@ function createDashboardApp(deps) {
         return;
       }
 
+      if (input === '3') {
+        setUi((previous) => ({ ...previous, view: 'health' }));
+        return;
+      }
+
       if (key.tab) {
         setUi((previous) => ({ ...previous, view: cycleView(previous.view) }));
         return;
       }
 
+      if (key.rightArrow) {
+        setUi((previous) => ({ ...previous, view: cycleView(previous.view) }));
+        return;
+      }
+
+      if (key.leftArrow) {
+        setUi((previous) => ({ ...previous, view: cycleViewBackward(previous.view) }));
+        return;
+      }
+
       if (input === 'f') {
         setUi((previous) => ({ ...previous, runFilter: cycleRunFilter(previous.runFilter) }));
       }
@@ -384,20 +590,29 @@ function createDashboardApp(deps) {
 
       const runtime = createWatchRuntime({
         rootPath: rootPath || `${workspacePath}/.specs-fire`,
-        debounceMs: 250,
+        debounceMs: 200,
         onRefresh: () => {
           void refresh();
         },
         onError: (watchError) => {
-          setWatchStatus('reconnecting');
-          setError(toDashboardError(watchError, 'WATCH_ERROR'));
+          const now = new Date().toISOString();
+          setWatchStatus((previous) => (previous === 'reconnecting' ? previous : 'reconnecting'));
+
+          const nextError = toDashboardError(watchError, 'WATCH_ERROR');
+          const nextErrorHash = safeJsonHash(nextError);
+          if (nextErrorHash !== errorHashRef.current) {
+            errorHashRef.current = nextErrorHash;
+            setError(nextError);
+            setLastRefreshAt(now);
+          }
         }
       });
 
       runtime.start();
+      const fallbackIntervalMs = Math.max(refreshMs, 5000);
       const interval = setInterval(() => {
         void refresh();
-      }, refreshMs);
+      }, fallbackIntervalMs);
 
       return () => {
         clearInterval(interval);
@@ -408,151 +623,133 @@ function createDashboardApp(deps) {
     const cols = Number.isFinite(terminalSize.columns) ? terminalSize.columns : (process.stdout.columns || 120);
     const rows = Number.isFinite(terminalSize.rows) ? terminalSize.rows : (process.stdout.rows || 40);
 
-    const compact = cols < 110;
-    const veryCompact = cols < 80 || rows < 22;
-    const contentAreaHeight = Math.max(12, rows - (ui.showHelp ? 7 : 5));
-    const sectionLineLimit = compact
-      ? Math.max(2, Math.floor(contentAreaHeight / 5))
-      : Math.max(3, Math.floor(contentAreaHeight / 4));
-
     const fullWidth = Math.max(40, cols - 1);
-    const leftWidth = compact ? fullWidth : Math.max(28, Math.floor((fullWidth - 1) / 2));
-    const rightWidth = compact ? fullWidth : Math.max(28, fullWidth - leftWidth - 1);
-
-    const headerLines = buildHeaderLines(
-      snapshot,
-      flow,
-      workspacePath,
-      watchEnabled,
-      watchStatus,
-      lastRefreshAt,
-      ui.view,
-      ui.runFilter,
-      fullWidth - 4
-    );
-
-    const helpLines = ui.showHelp
-      ? ['q quit | r refresh | h/? help | tab switch view | 1 runs | 2 overview | f run filter']
-      : ['press h to show shortcuts'];
+    const compactWidth = Math.max(18, fullWidth - 4);
 
-    const errorLines = buildErrorLines(error, fullWidth - 4);
+    const showHelpLine = ui.showHelp && rows >= 14;
+    const showErrorPanel = Boolean(error) && rows >= 18;
+    const showErrorInline = Boolean(error) && !showErrorPanel;
+    const densePanels = rows <= 28 || cols <= 120;
 
-    const leftPanels = [];
-    const rightPanels = [];
+    const reservedRows = 2 + (showHelpLine ? 1 : 0) + (showErrorPanel ? 5 : 0) + (showErrorInline ? 1 : 0);
+    const contentRowsBudget = Math.max(4, rows - reservedRows);
+    const ultraCompact = rows <= 14;
 
+    let panelCandidates;
     if (ui.view === 'overview') {
-      leftPanels.push({
-        title: 'Project + Workspace',
-        lines: buildOverviewProjectLines(snapshot, leftWidth - 4),
-        borderColor: 'green'
-      });
-      leftPanels.push({
-        title: 'Intent Status',
-        lines: buildOverviewIntentLines(snapshot, leftWidth - 4),
-        borderColor: 'yellow'
-      });
-
-      rightPanels.push({
-        title: 'Stats',
-        lines: buildStatsLines(snapshot, rightWidth - 4),
-        borderColor: 'magenta'
-      });
-      rightPanels.push({
-        title: 'Standards',
-        lines: buildOverviewStandardsLines(snapshot, rightWidth - 4),
-        borderColor: 'blue'
-      });
-      rightPanels.push({
-        title: 'Warnings',
-        lines: buildWarningsLines(snapshot, rightWidth - 4),
-        borderColor: 'red'
-      });
+      panelCandidates = [
+        {
+          key: 'project',
+          title: 'Project + Workspace',
+          lines: buildOverviewProjectLines(snapshot, compactWidth),
+          borderColor: 'green'
+        },
+        {
+          key: 'intent-status',
+          title: 'Intent Status',
+          lines: buildOverviewIntentLines(snapshot, compactWidth),
+          borderColor: 'yellow'
+        },
+        {
+          key: 'standards',
+          title: 'Standards',
+          lines: buildOverviewStandardsLines(snapshot, compactWidth),
+          borderColor: 'blue'
+        }
+      ];
+    } else if (ui.view === 'health') {
+      panelCandidates = [
+        {
+          key: 'stats',
+          title: 'Stats',
+          lines: buildStatsLines(snapshot, compactWidth),
+          borderColor: 'magenta'
+        },
+        {
+          key: 'warnings',
+          title: 'Warnings',
+          lines: buildWarningsLines(snapshot, compactWidth),
+          borderColor: 'red'
+        }
+      ];
+
+      if (error && showErrorPanel) {
+        panelCandidates.push({
+          key: 'error-details',
+          title: 'Error Details',
+          lines: buildErrorLines(error, compactWidth),
+          borderColor: 'red'
+        });
+      }
     } else {
-      leftPanels.push({
-        title: 'Active Runs',
-        lines: buildActiveRunLines(snapshot, ui.runFilter, leftWidth - 4),
-        borderColor: 'green'
-      });
-      leftPanels.push({
-        title: 'Pending Queue',
-        lines: buildPendingLines(snapshot, ui.runFilter, leftWidth - 4),
-        borderColor: 'yellow'
-      });
+      panelCandidates = [
+        {
+          key: 'current-run',
+          title: 'Current Run',
+          lines: buildCurrentRunLines(snapshot, compactWidth),
+          borderColor: 'green'
+        },
+        {
+          key: 'run-files',
+          title: 'Run Files',
+          lines: buildRunFilesLines(snapshot, compactWidth, icons),
+          borderColor: 'yellow'
+        },
+        {
+          key: 'pending',
+          title: 'Pending Queue',
+          lines: buildPendingLines(snapshot, ui.runFilter, compactWidth),
+          borderColor: 'yellow'
+        },
+        {
+          key: 'completed',
+          title: 'Recent Completed Runs',
+          lines: buildCompletedLines(snapshot, ui.runFilter, compactWidth),
+          borderColor: 'blue'
+        }
+      ];
+    }
 
-      rightPanels.push({
-        title: 'Recent Completed Runs',
-        lines: buildCompletedLines(snapshot, ui.runFilter, rightWidth - 4),
-        borderColor: 'blue'
-      });
-      rightPanels.push({
-        title: 'Stats',
-        lines: buildStatsLines(snapshot, rightWidth - 4),
-        borderColor: 'magenta'
-      });
-      rightPanels.push({
-        title: 'Warnings',
-        lines: buildWarningsLines(snapshot, rightWidth - 4),
-        borderColor: 'red'
-      });
+    if (ultraCompact) {
+      panelCandidates = [panelCandidates[0]];
     }
 
+    const panels = allocateSingleColumnPanels(panelCandidates, contentRowsBudget);
+
+    const helpText = 'q quit | r refresh | h/? help | ←/→ or tab switch views | 1 runs | 2 overview | 3 health | f run filter';
+
     return React.createElement(
       Box,
       { flexDirection: 'column', width: fullWidth },
-      React.createElement(SectionPanel, {
-        title: veryCompact ? 'specsmd dashboard' : 'specsmd dashboard / FIRE',
-        lines: headerLines,
-        width: fullWidth,
-        maxLines: veryCompact ? 2 : 3,
-        borderColor: 'cyan',
-        marginBottom: 1
-      }),
-      error ? React.createElement(SectionPanel, {
-        title: 'Errors',
-        lines: errorLines,
+      React.createElement(Text, { color: 'cyan' }, buildHeaderLine(snapshot, flow, watchEnabled, watchStatus, lastRefreshAt, ui.view, ui.runFilter, fullWidth)),
+      React.createElement(TabsBar, { view: ui.view, width: fullWidth, icons }),
+      showErrorInline
+        ? React.createElement(Text, { color: 'red' }, truncate(buildErrorLines(error, fullWidth)[0] || 'Error', fullWidth))
+        : null,
+      showErrorPanel
+        ? React.createElement(SectionPanel, {
+          title: 'Errors',
+          lines: buildErrorLines(error, compactWidth),
+          width: fullWidth,
+          maxLines: 2,
+          borderColor: 'red',
+          marginBottom: densePanels ? 0 : 1,
+          dense: densePanels
+        })
+        : null,
+      ...panels.map((panel, index) => React.createElement(SectionPanel, {
+        key: panel.key,
+        title: panel.title,
+        lines: panel.lines,
         width: fullWidth,
-        maxLines: Math.max(2, sectionLineLimit),
-        borderColor: 'red',
-        marginBottom: 1
-      }) : null,
-      React.createElement(
-        Box,
-        { flexDirection: compact ? 'column' : 'row', width: fullWidth },
-        React.createElement(
-          Box,
-          { flexDirection: 'column', width: leftWidth, marginRight: compact ? 0 : 1 },
-          ...leftPanels.map((panel, index) => React.createElement(SectionPanel, {
-            key: `left-${panel.title}`,
-            title: panel.title,
-            lines: panel.lines,
-            width: leftWidth,
-            maxLines: sectionLineLimit,
-            borderColor: panel.borderColor,
-            marginBottom: index === leftPanels.length - 1 ? 0 : 1
-          }))
-        ),
-        React.createElement(
-          Box,
-          { flexDirection: 'column', width: rightWidth },
-          ...rightPanels.map((panel, index) => React.createElement(SectionPanel, {
-            key: `right-${panel.title}`,
-            title: panel.title,
-            lines: panel.lines,
-            width: rightWidth,
-            maxLines: sectionLineLimit,
-            borderColor: panel.borderColor,
-            marginBottom: index === rightPanels.length - 1 ? 0 : 1
-          }))
-        )
-      ),
-      React.createElement(SectionPanel, {
-        title: 'Help',
-        lines: helpLines,
-        width: fullWidth,
-        maxLines: 2,
-        borderColor: 'gray',
-        marginTop: 1
-      })
+        maxLines: panel.maxLines,
+        borderColor: panel.borderColor,
+        marginBottom: densePanels ? 0 : (index === panels.length - 1 ? 0 : 1),
+        dense: densePanels
+      })),
+      showHelpLine
+        ? React.createElement(Text, { color: 'gray' }, truncate(helpText, fullWidth))
+        : null
     );
   }
 
@@ -563,5 +760,7 @@ module.exports = {
   createDashboardApp,
   toDashboardError,
   truncate,
-  fitLines
+  fitLines,
+  safeJsonHash,
+  allocateSingleColumnPanels
 };

package/lib/dashboard/tui/store.js

@@ -10,9 +10,22 @@ function cycleView(current) {
   if (current === 'runs') {
     return 'overview';
   }
+  if (current === 'overview') {
+    return 'health';
+  }
   return 'runs';
 }
 
+function cycleViewBackward(current) {
+  if (current === 'runs') {
+    return 'health';
+  }
+  if (current === 'overview') {
+    return 'runs';
+  }
+  return 'overview';
+}
+
 function cycleRunFilter(current) {
   if (current === 'all') {
     return 'active';
@@ -26,5 +39,6 @@ function cycleRunFilter(current) {
 module.exports = {
   createInitialUIState,
   cycleView,
+  cycleViewBackward,
   cycleRunFilter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specsmd",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Multi-agent orchestration system for AI-native software development. Delivers AI-DLC, Agile, and custom SDLC flows as markdown-based agent systems.",
   "main": "lib/installer.js",
   "bin": {