specsmd 0.1.25 → 0.1.26

package/lib/dashboard/tui/app.js

@@ -32,6 +32,19 @@ 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 truncate(value, width) {
   const text = String(value ?? '');
   if (!Number.isFinite(width) || width <= 0 || text.length <= width) {
@@ -46,8 +59,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 +83,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 +106,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}`);
@@ -105,7 +123,7 @@ function buildErrorLines(error, width) {
 
 function buildActiveRunLines(snapshot, runFilter, width) {
   if (runFilter === 'completed') {
-    return [truncate('Hidden by active filter: completed', width)];
+    return [truncate('Hidden by run filter: completed', width)];
   }
 
   const activeRuns = snapshot?.activeRuns || [];
@@ -119,14 +137,9 @@ function buildActiveRunLines(snapshot, runFilter, width) {
     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';
 
     lines.push(`${run.id} [${run.scope}] current: ${currentItem}`);
-    lines.push(`progress ${completed}/${workItems.length} done, ${inProgress} active | artifacts: ${artifacts}`);
+    lines.push(`progress: ${completed}/${workItems.length} done, ${inProgress} active`);
   }
 
   return lines.map((line) => truncate(line, width));
@@ -134,7 +147,7 @@ function buildActiveRunLines(snapshot, runFilter, 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 +156,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 +191,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 +241,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 +289,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,7 +298,6 @@ function createDashboardApp(deps) {
       width,
       maxLines,
       borderColor,
-      marginRight,
       marginBottom
     } = props;
 
@@ -269,7 +312,6 @@ function createDashboardApp(deps) {
         borderColor: borderColor || 'gray',
         paddingX: 1,
         width,
-        marginRight: marginRight || 0,
         marginBottom: marginBottom || 0
       },
       React.createElement(Text, { bold: true, color: 'cyan' }, truncate(title, contentWidth)),
@@ -277,12 +319,43 @@ function createDashboardApp(deps) {
     );
   }
 
+  function TabsBar(props) {
+    const { view, width } = props;
+    const tabs = [
+      { id: 'runs', label: ' 1 RUNS ' },
+      { id: 'overview', label: ' 2 OVERVIEW ' },
+      { id: 'health', label: ' 3 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');
@@ -292,20 +365,49 @@ function createDashboardApp(deps) {
     }));
 
     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,6 +437,11 @@ function createDashboardApp(deps) {
         return;
       }
 
+      if (input === '3') {
+        setUi((previous) => ({ ...previous, view: 'health' }));
+        return;
+      }
+
       if (key.tab) {
         setUi((previous) => ({ ...previous, view: cycleView(previous.view) }));
         return;
@@ -384,20 +491,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 +524,124 @@ 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 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: 'active-runs',
+          title: 'Active Runs',
+          lines: buildActiveRunLines(snapshot, ui.runFilter, compactWidth),
+          borderColor: 'green'
+        },
+        {
+          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 | tab next view | 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 }),
+      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: 1
+        })
+        : 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: index === panels.length - 1 ? 0 : 1
+      })),
+      showHelpLine
+        ? React.createElement(Text, { color: 'gray' }, truncate(helpText, fullWidth))
+        : null
     );
   }
 
@@ -563,5 +652,7 @@ module.exports = {
   createDashboardApp,
   toDashboardError,
   truncate,
-  fitLines
+  fitLines,
+  safeJsonHash,
+  allocateSingleColumnPanels
 };

package/lib/dashboard/tui/store.js

@@ -10,6 +10,9 @@ function cycleView(current) {
   if (current === 'runs') {
     return 'overview';
   }
+  if (current === 'overview') {
+    return 'health';
+  }
   return 'runs';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specsmd",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "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": {