specsmd 0.1.38 → 0.1.40

package/lib/dashboard/index.js

@@ -172,12 +172,19 @@ async function runFlowDashboard(options, flow, availableFlows = []) {
   }
 
   const ink = await import('ink');
+  let inkUi = null;
+  try {
+    inkUi = await import('@inkjs/ui');
+  } catch {
+    inkUi = null;
+  }
   const reactNamespace = await import('react');
   const React = reactNamespace.default || reactNamespace;
 
   const App = createDashboardApp({
     React,
     ink,
+    inkUi,
     parseSnapshotForFlow,
     workspacePath,
     flow,

package/lib/dashboard/tui/app.js

@@ -1,9 +1,18 @@
 const fs = require('fs');
 const path = require('path');
 const { spawnSync } = require('child_process');
+const stringWidthModule = require('string-width');
+const sliceAnsiModule = require('slice-ansi');
 const { createWatchRuntime } = require('../runtime/watch-runtime');
 const { createInitialUIState } = require('./store');
 
+const stringWidth = typeof stringWidthModule === 'function'
+  ? stringWidthModule
+  : stringWidthModule.default;
+const sliceAnsi = typeof sliceAnsiModule === 'function'
+  ? sliceAnsiModule
+  : sliceAnsiModule.default;
+
 function toDashboardError(error, defaultCode = 'DASHBOARD_ERROR') {
   if (!error) {
     return {
@@ -87,15 +96,26 @@ function resolveIconSet() {
 
 function truncate(value, width) {
   const text = String(value ?? '');
-  if (!Number.isFinite(width) || width <= 0 || text.length <= width) {
+  if (!Number.isFinite(width)) {
     return text;
   }
 
-  if (width <= 3) {
-    return text.slice(0, width);
+  const safeWidth = Math.max(0, Math.floor(width));
+  if (safeWidth === 0) {
+    return '';
+  }
+
+  if (stringWidth(text) <= safeWidth) {
+    return text;
   }
 
-  return `${text.slice(0, width - 3)}...`;
+  if (safeWidth <= 3) {
+    return sliceAnsi(text, 0, safeWidth);
+  }
+
+  const ellipsis = '...';
+  const bodyWidth = Math.max(0, safeWidth - stringWidth(ellipsis));
+  return `${sliceAnsi(text, 0, bodyWidth)}${ellipsis}`;
 }
 
 function normalizePanelLine(line) {
@@ -104,7 +124,8 @@ function normalizePanelLine(line) {
       text: typeof line.text === 'string' ? line.text : String(line.text ?? ''),
       color: line.color,
       bold: Boolean(line.bold),
-      selected: Boolean(line.selected)
+      selected: Boolean(line.selected),
+      loading: Boolean(line.loading)
     };
   }
 
@@ -112,7 +133,8 @@ function normalizePanelLine(line) {
     text: String(line ?? ''),
     color: undefined,
     bold: false,
-    selected: false
+    selected: false,
+    loading: false
   };
 }
 
@@ -1245,6 +1267,15 @@ function toInfoRows(lines, keyPrefix, emptyLabel = 'No data') {
   });
 }
 
+function toLoadingRows(label, keyPrefix = 'loading') {
+  return [{
+    kind: 'loading',
+    key: `${keyPrefix}:row`,
+    label: typeof label === 'string' && label !== '' ? label : 'Loading...',
+    selectable: false
+  }];
+}
+
 function buildOverviewIntentGroups(snapshot, flow, filter = 'next') {
   const effectiveFlow = getEffectiveFlow(flow, snapshot);
   const normalizedFilter = filter === 'completed' ? 'completed' : 'next';
@@ -1582,6 +1613,16 @@ function buildInteractiveRowsLines(rows, selectedIndex, icons, width, isFocusedS
       };
     }
 
+    if (row.kind === 'loading') {
+      return {
+        text: truncate(row.label || 'Loading...', width),
+        color: 'cyan',
+        bold: false,
+        selected: false,
+        loading: true
+      };
+    }
+
     return {
       text: truncate(`${isSelected ? `${cursor} ` : '  '}${row.label || ''}`, width),
       color: isSelected ? (isFocusedSection ? 'green' : 'cyan') : (row.color || 'gray'),
@@ -1921,6 +1962,7 @@ function createDashboardApp(deps) {
   const {
     React,
     ink,
+    inkUi,
     parseSnapshot,
     parseSnapshotForFlow,
     workspacePath,
@@ -1936,6 +1978,9 @@ function createDashboardApp(deps) {
 
   const { Box, Text, useApp, useInput, useStdout } = ink;
   const { useState, useEffect, useCallback, useRef } = React;
+  const Spinner = inkUi && typeof inkUi.Spinner === 'function'
+    ? inkUi.Spinner
+    : null;
 
   function SectionPanel(props) {
     const {
@@ -1970,15 +2015,25 @@ function createDashboardApp(deps) {
         { bold: true, color: titleColor, backgroundColor: titleBackground },
         truncate(title, contentWidth)
       ),
-      ...visibleLines.map((line, index) => React.createElement(
-        Text,
-        {
-          key: `${title}-${index}`,
-          color: line.color,
-          bold: line.bold
-        },
-        line.text
-      ))
+      ...visibleLines.map((line, index) => {
+        if (line.loading && Spinner) {
+          return React.createElement(
+            Box,
+            { key: `${title}-${index}` },
+            React.createElement(Spinner, { label: truncate(line.text, contentWidth) })
+          );
+        }
+
+        return React.createElement(
+          Text,
+          {
+            key: `${title}-${index}`,
+            color: line.color,
+            bold: line.bold
+          },
+          line.text
+        );
+      })
     );
   }
 
@@ -2158,42 +2213,42 @@ function createDashboardApp(deps) {
           expandedGroups
         )
       ]
-      : toInfoRows(['Loading intents...'], 'intent-loading');
+      : toLoadingRows('Loading intents...', 'intent-loading');
     const completedRows = shouldHydrateSecondaryTabs
       ? toExpandableRows(
         buildCompletedGroups(snapshot, activeFlow),
         getNoCompletedMessage(effectiveFlow),
         expandedGroups
       )
-      : toInfoRows(['Loading completed items...'], 'completed-loading');
+      : toLoadingRows('Loading completed items...', 'completed-loading');
     const standardsRows = shouldHydrateSecondaryTabs
       ? toExpandableRows(
         buildStandardsGroups(snapshot, activeFlow),
         effectiveFlow === 'simple' ? 'No standards for SIMPLE flow' : 'No standards found',
         expandedGroups
       )
-      : toInfoRows(['Loading standards...'], 'standards-loading');
+      : toLoadingRows('Loading standards...', 'standards-loading');
     const statsRows = shouldHydrateSecondaryTabs
       ? toInfoRows(
         buildStatsLines(snapshot, 200, activeFlow),
         'stats',
         'No stats available'
       )
-      : toInfoRows(['Loading stats...'], 'stats-loading');
+      : toLoadingRows('Loading stats...', 'stats-loading');
     const warningsRows = shouldHydrateSecondaryTabs
       ? toInfoRows(
         buildWarningsLines(snapshot, 200),
         'warnings',
         'No warnings'
       )
-      : toInfoRows(['Loading warnings...'], 'warnings-loading');
+      : toLoadingRows('Loading warnings...', 'warnings-loading');
     const errorDetailsRows = shouldHydrateSecondaryTabs
       ? toInfoRows(
         buildErrorLines(error, 200),
         'error-details',
         'No error details'
       )
-      : toInfoRows(['Loading error details...'], 'error-loading');
+      : toLoadingRows('Loading error details...', 'error-loading');
 
     const rowsBySection = {
       'current-run': currentRunRows,
@@ -2751,7 +2806,8 @@ function createDashboardApp(deps) {
       (showGlobalErrorPanel ? 5 : 0) +
       (showErrorInline ? 1 : 0) +
       (showStatusLine ? 1 : 0);
-    const contentRowsBudget = Math.max(4, rows - reservedRows);
+    const frameSafetyRows = 2;
+    const contentRowsBudget = Math.max(4, rows - reservedRows - frameSafetyRows);
     const ultraCompact = rows <= 14;
     const panelTitles = getPanelTitles(activeFlow, snapshot);
     const splitPreviewLayout = previewOpen && !overlayPreviewOpen && !ui.showHelp && cols >= 110 && rows >= 16;
@@ -2916,12 +2972,13 @@ function createDashboardApp(deps) {
 
     let contentNode;
     if (splitPreviewLayout && !overlayPreviewOpen) {
+      const previewBodyLines = Math.max(1, contentRowsBudget - 3);
       const previewPanel = {
         key: 'preview-split',
         title: `Preview: ${effectivePreviewTarget?.label || 'unknown'}`,
         lines: previewLines,
         borderColor: 'magenta',
-        maxLines: Math.max(4, contentRowsBudget)
+        maxLines: previewBodyLines
       };
 
       contentNode = React.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specsmd",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "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": {
@@ -40,6 +40,7 @@
     "README.md"
   ],
   "dependencies": {
+    "@inkjs/ui": "^2.0.0",
     "chalk": "^4.1.2",
     "chokidar": "^4.0.3",
     "commander": "^11.1.0",