specsmd 0.1.52 → 0.1.54

package/lib/dashboard/tui/app.js

@@ -121,6 +121,11 @@ function truncate(value, width) {
   return `${sliceAnsi(text, 0, bodyWidth)}${ellipsis}`;
 }
 
+function resolveFrameWidth(columns) {
+  const safeColumns = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 120;
+  return safeColumns > 24 ? safeColumns - 1 : safeColumns;
+}
+
 function normalizePanelLine(line) {
   if (line && typeof line === 'object' && !Array.isArray(line)) {
     return {
@@ -1167,6 +1172,215 @@ function getGitChangesSnapshot(snapshot) {
   };
 }
 
+function readGitCommandLines(repoRoot, args, options = {}) {
+  if (typeof repoRoot !== 'string' || repoRoot.trim() === '' || !Array.isArray(args) || args.length === 0) {
+    return [];
+  }
+
+  const acceptedStatuses = Array.isArray(options.acceptedStatuses) && options.acceptedStatuses.length > 0
+    ? options.acceptedStatuses
+    : [0];
+
+  const result = spawnSync('git', args, {
+    cwd: repoRoot,
+    encoding: 'utf8',
+    maxBuffer: 8 * 1024 * 1024
+  });
+
+  if (result.error) {
+    return [];
+  }
+
+  if (typeof result.status === 'number' && !acceptedStatuses.includes(result.status)) {
+    return [];
+  }
+
+  const lines = String(result.stdout || '')
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  const limit = Number.isFinite(options.limit) ? Math.max(1, Math.floor(options.limit)) : null;
+  if (limit == null || lines.length <= limit) {
+    return lines;
+  }
+  return lines.slice(0, limit);
+}
+
+function buildGitStatusPanelLines(snapshot) {
+  const git = getGitChangesSnapshot(snapshot);
+  if (!git.available) {
+    return [{
+      text: 'Repository unavailable in selected worktree',
+      color: 'red',
+      bold: true
+    }];
+  }
+
+  const tracking = git.upstream
+    ? `${git.upstream} (${git.ahead > 0 ? `ahead ${git.ahead}` : 'ahead 0'}, ${git.behind > 0 ? `behind ${git.behind}` : 'behind 0'})`
+    : 'no upstream';
+
+  return [
+    {
+      text: `branch: ${git.branch}${git.detached ? ' [detached]' : ''}`,
+      color: 'green',
+      bold: true
+    },
+    {
+      text: `tracking: ${tracking}`,
+      color: 'gray',
+      bold: false
+    },
+    {
+      text: `changes: ${git.counts.total || 0} total`,
+      color: 'gray',
+      bold: false
+    },
+    {
+      text: `staged ${git.counts.staged || 0} | unstaged ${git.counts.unstaged || 0}`,
+      color: 'yellow',
+      bold: false
+    },
+    {
+      text: `untracked ${git.counts.untracked || 0} | conflicts ${git.counts.conflicted || 0}`,
+      color: 'yellow',
+      bold: false
+    }
+  ];
+}
+
+function buildGitBranchesPanelLines(snapshot) {
+  const git = getGitChangesSnapshot(snapshot);
+  if (!git.available) {
+    return [{
+      text: 'No branch list (git unavailable)',
+      color: 'gray',
+      bold: false
+    }];
+  }
+
+  const branchLines = readGitCommandLines(git.rootPath, [
+    '-c',
+    'color.ui=false',
+    'for-each-ref',
+    '--sort=-committerdate',
+    '--format=%(if)%(HEAD)%(then)*%(else) %(end) %(refname:short)',
+    'refs/heads'
+  ], { limit: 8 });
+
+  const lines = [{
+    text: 'Local branches · Remotes · Tags',
+    color: 'cyan',
+    bold: true
+  }];
+
+  if (branchLines.length === 0) {
+    lines.push({
+      text: 'No local branches found',
+      color: 'gray',
+      bold: false
+    });
+    return lines;
+  }
+
+  for (const line of branchLines) {
+    const isCurrent = line.startsWith('*');
+    lines.push({
+      text: line,
+      color: isCurrent ? 'green' : 'gray',
+      bold: isCurrent
+    });
+  }
+
+  return lines;
+}
+
+function buildGitCommitsPanelLines(snapshot) {
+  const git = getGitChangesSnapshot(snapshot);
+  if (!git.available) {
+    return [{
+      text: 'No commit log (git unavailable)',
+      color: 'gray',
+      bold: false
+    }];
+  }
+
+  const reflogLines = readGitCommandLines(git.rootPath, [
+    '-c',
+    'color.ui=false',
+    'reflog',
+    '--date=relative',
+    '--pretty=format:%h %gs'
+  ], { limit: 8 });
+
+  const lines = [{
+    text: 'Commits · Reflog',
+    color: 'cyan',
+    bold: true
+  }];
+
+  if (reflogLines.length === 0) {
+    lines.push({
+      text: 'No reflog entries',
+      color: 'gray',
+      bold: false
+    });
+    return lines;
+  }
+
+  lines.push(...reflogLines.map((line) => ({
+    text: line,
+    color: 'gray',
+    bold: false
+  })));
+  return lines;
+}
+
+function buildGitStashPanelLines(snapshot) {
+  const git = getGitChangesSnapshot(snapshot);
+  if (!git.available) {
+    return [{
+      text: 'No stash info (git unavailable)',
+      color: 'gray',
+      bold: false
+    }];
+  }
+
+  const stashLines = readGitCommandLines(git.rootPath, [
+    '-c',
+    'color.ui=false',
+    'stash',
+    'list',
+    '--pretty=format:%gd %s'
+  ], {
+    acceptedStatuses: [0],
+    limit: 4
+  });
+
+  const lines = [{
+    text: 'Stash',
+    color: 'cyan',
+    bold: true
+  }];
+
+  if (stashLines.length === 0) {
+    lines.push({
+      text: 'No stashes',
+      color: 'gray',
+      bold: false
+    });
+    return lines;
+  }
+
+  lines.push(...stashLines.map((line) => ({
+    text: line,
+    color: 'gray',
+    bold: false
+  })));
+  return lines;
+}
+
 function getDashboardWorktreeMeta(snapshot) {
   if (!snapshot || typeof snapshot !== 'object') {
     return null;
@@ -2415,6 +2629,21 @@ function rowToFileEntry(row) {
   };
 }
 
+function firstFileEntryFromRows(rows) {
+  if (!Array.isArray(rows) || rows.length === 0) {
+    return null;
+  }
+
+  for (const row of rows) {
+    const entry = rowToFileEntry(row);
+    if (entry) {
+      return entry;
+    }
+  }
+
+  return null;
+}
+
 function rowToWorktreeId(row) {
   if (!row || typeof row.key !== 'string') {
     return null;
@@ -2522,6 +2751,8 @@ function buildQuickHelpText(view, options = {}) {
       parts.push('b worktrees', 'u others');
     }
     parts.push('a current', 'f files');
+  } else if (view === 'git') {
+    parts.push('d changes', 'c/A/p/P git(soon)');
   }
   parts.push(`tab1 ${activeLabel}`);
 
@@ -2533,6 +2764,57 @@ function buildQuickHelpText(view, options = {}) {
   return parts.join(' | ');
 }
 
+function buildLazyGitCommandStrip(view, options = {}) {
+  const {
+    hasWorktrees = false,
+    previewOpen = false
+  } = options;
+
+  const parts = [];
+
+  if (view === 'runs') {
+    if (hasWorktrees) {
+      parts.push('b worktrees');
+    }
+    parts.push('a current', 'f files', 'enter expand');
+  } else if (view === 'intents') {
+    parts.push('n next', 'x completed', 'enter expand');
+  } else if (view === 'completed') {
+    parts.push('c completed', 'enter expand');
+  } else if (view === 'health') {
+    parts.push('s standards', 't stats', 'w warnings');
+  } else if (view === 'git') {
+    parts.push('d changes', 'space preview', 'c commit (soon)', 'A amend (soon)', 'p push (soon)', 'P pull (soon)');
+  }
+
+  if (previewOpen) {
+    parts.push('tab pane', 'j/k scroll');
+  } else {
+    parts.push('v preview');
+  }
+
+  parts.push('1-5 views', 'g/G panels', 'r refresh', '? help', 'q quit');
+  return parts.join(' | ');
+}
+
+function buildLazyGitCommandLogLine(options = {}) {
+  const {
+    statusLine = '',
+    activeFlow = 'fire',
+    watchEnabled = true,
+    watchStatus = 'watching',
+    selectedWorktreeLabel = null
+  } = options;
+
+  if (typeof statusLine === 'string' && statusLine.trim() !== '') {
+    return `Command Log | ${statusLine}`;
+  }
+
+  const watchLabel = watchEnabled ? watchStatus : 'off';
+  const worktreeSegment = selectedWorktreeLabel ? ` | wt:${selectedWorktreeLabel}` : '';
+  return `Command Log | flow:${String(activeFlow || 'fire').toUpperCase()} | watch:${watchLabel}${worktreeSegment} | ready`;
+}
+
 function buildHelpOverlayLines(options = {}) {
   const {
     view = 'runs',
@@ -2592,6 +2874,7 @@ function buildHelpOverlayLines(options = {}) {
     { text: '', color: undefined, bold: false },
     { text: 'Tab 5 Git Changes', color: 'yellow', bold: true },
     'select changed files and preview diffs',
+    'commit/push/pull shortcuts are shown in footer for LazyGit-style hierarchy',
     { text: '', color: undefined, bold: false },
     { text: `Current view: ${String(view || 'runs').toUpperCase()}`, color: 'gray', bold: false }
   );
@@ -2864,7 +3147,7 @@ function createDashboardApp(deps) {
       focused
     } = props;
 
-    const contentWidth = Math.max(18, width - 4);
+    const contentWidth = Math.max(1, width - (dense ? 2 : 4));
     const visibleLines = fitLines(lines, maxLines, contentWidth);
     const panelBorderColor = focused ? 'cyan' : (borderColor || 'gray');
     const titleColor = focused ? 'black' : 'cyan';
@@ -3218,32 +3501,11 @@ function createDashboardApp(deps) {
     const gitRows = shouldHydrateSecondaryTabs
       ? (() => {
         const git = getGitChangesSnapshot(snapshot);
-        const tracking = git.upstream
-          ? `${git.upstream} (${git.ahead > 0 ? `ahead ${git.ahead}` : 'ahead 0'}, ${git.behind > 0 ? `behind ${git.behind}` : 'behind 0'})`
-          : 'no upstream';
-        const headerRows = [{
-          kind: 'info',
-          key: 'git:branch',
-          label: git.available
-            ? `branch ${git.branch}${git.detached ? ' [detached]' : ''} | ${tracking}`
-            : 'git: repository unavailable in selected worktree',
-          color: git.available ? 'cyan' : 'red',
-          bold: true,
-          selectable: false
-        }, {
-          kind: 'info',
-          key: 'git:counts',
-          label: `changes ${git.counts.total || 0} | staged ${git.counts.staged || 0} | unstaged ${git.counts.unstaged || 0} | untracked ${git.counts.untracked || 0} | conflicts ${git.counts.conflicted || 0}`,
-          color: 'gray',
-          bold: false,
-          selectable: false
-        }];
-        const groups = toExpandableRows(
+        return toExpandableRows(
           buildGitChangeGroups(snapshot),
           git.available ? 'Working tree clean' : 'No git changes',
           expandedGroups
         );
-        return [...headerRows, ...groups];
       })()
       : toLoadingRows('Loading git changes...', 'git-loading');
 
@@ -3279,6 +3541,9 @@ function createDashboardApp(deps) {
     const focusedIndex = selectionBySection[focusedSection] || 0;
     const selectedFocusedRow = getSelectedRow(focusedRows, focusedIndex);
     const selectedFocusedFile = rowToFileEntry(selectedFocusedRow);
+    const selectedGitRow = getSelectedRow(gitRows, selectionBySection['git-changes'] || 0);
+    const selectedGitFile = rowToFileEntry(selectedGitRow);
+    const firstGitFile = firstFileEntryFromRows(gitRows);
 
     const refresh = useCallback(async (overrideSelectedWorktreeId = null) => {
       const now = new Date().toISOString();
@@ -3636,6 +3901,22 @@ function createDashboardApp(deps) {
           setSectionFocus((previous) => ({ ...previous, git: 'git-changes' }));
           return;
         }
+        if (input === 'c') {
+          setStatusLine('Git commit action is not wired yet (footer mirrors LazyGit command hierarchy).');
+          return;
+        }
+        if (input === 'A') {
+          setStatusLine('Git amend action is not wired yet (footer mirrors LazyGit command hierarchy).');
+          return;
+        }
+        if (input === 'p') {
+          setStatusLine('Git push action is not wired yet (footer mirrors LazyGit command hierarchy).');
+          return;
+        }
+        if (input === 'P') {
+          setStatusLine('Git pull action is not wired yet (footer mirrors LazyGit command hierarchy).');
+          return;
+        }
       }
 
       if (key.escape) {
@@ -3845,16 +4126,16 @@ function createDashboardApp(deps) {
     useEffect(() => {
       if (!stdout || typeof stdout.on !== 'function') {
         setTerminalSize({
-          columns: process.stdout.columns || 120,
-          rows: process.stdout.rows || 40
+          columns: Math.max(1, process.stdout.columns || 120),
+          rows: Math.max(1, process.stdout.rows || 40)
         });
         return undefined;
       }
 
       const updateSize = () => {
         setTerminalSize({
-          columns: stdout.columns || process.stdout.columns || 120,
-          rows: stdout.rows || process.stdout.rows || 40
+          columns: Math.max(1, stdout.columns || process.stdout.columns || 120),
+          rows: Math.max(1, stdout.rows || process.stdout.rows || 40)
         });
 
         // Resize in some terminals can leave stale frame rows behind.
@@ -3866,6 +4147,9 @@ function createDashboardApp(deps) {
 
       updateSize();
       stdout.on('resize', updateSize);
+      if (process.stdout !== stdout && typeof process.stdout.on === 'function') {
+        process.stdout.on('resize', updateSize);
+      }
 
       return () => {
         if (typeof stdout.off === 'function') {
@@ -3873,6 +4157,13 @@ function createDashboardApp(deps) {
         } else if (typeof stdout.removeListener === 'function') {
           stdout.removeListener('resize', updateSize);
         }
+        if (process.stdout !== stdout) {
+          if (typeof process.stdout.off === 'function') {
+            process.stdout.off('resize', updateSize);
+          } else if (typeof process.stdout.removeListener === 'function') {
+            process.stdout.removeListener('resize', updateSize);
+          }
+        }
       };
     }, [stdout]);
 
@@ -3937,37 +4228,31 @@ 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 fullWidth = Math.max(40, cols - 1);
+    const fullWidth = resolveFrameWidth(cols);
     const showFlowBar = availableFlowIds.length > 1;
-    const showFooterHelpLine = rows >= 10;
+    const showCommandLogLine = rows >= 8;
+    const showCommandStrip = rows >= 9;
     const showErrorPanel = Boolean(error) && rows >= 18;
     const showGlobalErrorPanel = showErrorPanel && ui.view !== 'health' && !ui.showHelp && !worktreeOverlayOpen;
     const showErrorInline = Boolean(error) && !showErrorPanel && !worktreeOverlayOpen;
     const showApprovalBanner = approvalGateLine !== '' && !ui.showHelp && !worktreeOverlayOpen;
-    const showStatusLine = statusLine !== '';
+    const showLegacyStatusLine = statusLine !== '' && !showCommandLogLine;
     const densePanels = rows <= 28 || cols <= 120;
 
     const reservedRows =
       2 +
       (showFlowBar ? 1 : 0) +
       (showApprovalBanner ? 1 : 0) +
-      (showFooterHelpLine ? 1 : 0) +
+      (showCommandLogLine ? 1 : 0) +
+      (showCommandStrip ? 1 : 0) +
       (showGlobalErrorPanel ? 5 : 0) +
       (showErrorInline ? 1 : 0) +
-      (showStatusLine ? 1 : 0);
+      (showLegacyStatusLine ? 1 : 0);
     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 && !worktreeOverlayOpen && cols >= 110 && rows >= 16;
-    const mainPaneWidth = splitPreviewLayout
-      ? Math.max(34, Math.floor((fullWidth - 1) * 0.52))
-      : fullWidth;
-    const previewPaneWidth = splitPreviewLayout
-      ? Math.max(30, fullWidth - mainPaneWidth - 1)
-      : fullWidth;
-    const mainCompactWidth = Math.max(18, mainPaneWidth - 4);
-    const previewCompactWidth = Math.max(18, previewPaneWidth - 4);
+    const compactWidth = Math.max(18, fullWidth - 4);
 
     const sectionLines = Object.fromEntries(
       Object.entries(rowsBySection).map(([sectionKey, sectionRows]) => [
@@ -3976,17 +4261,27 @@ function createDashboardApp(deps) {
           sectionRows,
           selectionBySection[sectionKey] || 0,
           icons,
-          mainCompactWidth,
+          compactWidth,
           paneFocus === 'main' && focusedSection === sectionKey
         )
       ])
     );
     const effectivePreviewTarget = previewTarget || selectedFocusedFile;
     const previewLines = previewOpen
-      ? buildPreviewLines(effectivePreviewTarget, previewCompactWidth, previewScroll, {
+      ? buildPreviewLines(effectivePreviewTarget, compactWidth, previewScroll, {
         fullDocument: overlayPreviewOpen
       })
       : [];
+    const gitInlineDiffTarget = selectedGitFile || firstGitFile || previewTarget || null;
+    const gitInlineDiffLines = ui.view === 'git'
+      ? buildPreviewLines(gitInlineDiffTarget, compactWidth, previewOpen && paneFocus === 'preview' ? previewScroll : 0, {
+        fullDocument: false
+      })
+      : [];
+    const gitStatusPanelLines = ui.view === 'git' ? buildGitStatusPanelLines(snapshot) : [];
+    const gitBranchesPanelLines = ui.view === 'git' ? buildGitBranchesPanelLines(snapshot) : [];
+    const gitCommitsPanelLines = ui.view === 'git' ? buildGitCommitsPanelLines(snapshot) : [];
+    const gitStashPanelLines = ui.view === 'git' ? buildGitStashPanelLines(snapshot) : [];
 
     const shortcutsOverlayLines = buildHelpOverlayLines({
       view: ui.view,
@@ -4004,6 +4299,17 @@ function createDashboardApp(deps) {
       availableFlowCount: availableFlowIds.length,
       hasWorktrees: worktreeSectionEnabled
     });
+    const commandStripText = buildLazyGitCommandStrip(ui.view, {
+      hasWorktrees: worktreeSectionEnabled,
+      previewOpen
+    });
+    const commandLogLine = buildLazyGitCommandLogLine({
+      statusLine,
+      activeFlow,
+      watchEnabled,
+      watchStatus,
+      selectedWorktreeLabel
+    });
 
     let panelCandidates;
     if (ui.showHelp) {
@@ -4083,11 +4389,41 @@ function createDashboardApp(deps) {
       }
     } else if (ui.view === 'git') {
       panelCandidates = [
+        {
+          key: 'git-status',
+          title: '[1]-Status',
+          lines: gitStatusPanelLines,
+          borderColor: 'green'
+        },
         {
           key: 'git-changes',
-          title: panelTitles.git || 'Git Changes',
+          title: '[2]-Files',
           lines: sectionLines['git-changes'],
           borderColor: 'yellow'
+        },
+        {
+          key: 'git-branches',
+          title: '[3]-Local branches',
+          lines: gitBranchesPanelLines,
+          borderColor: 'magenta'
+        },
+        {
+          key: 'git-commits',
+          title: '[4]-Commits',
+          lines: gitCommitsPanelLines,
+          borderColor: 'cyan'
+        },
+        {
+          key: 'git-stash',
+          title: '[5]-Stash',
+          lines: gitStashPanelLines,
+          borderColor: 'blue'
+        },
+        {
+          key: 'git-diff',
+          title: '[0]-Unstaged changes',
+          lines: gitInlineDiffLines,
+          borderColor: 'yellow'
         }
       ];
     } else {
@@ -4124,7 +4460,7 @@ function createDashboardApp(deps) {
       }
     }
 
-    if (!ui.showHelp && previewOpen && !overlayPreviewOpen && !splitPreviewLayout) {
+    if (!ui.showHelp && previewOpen && !overlayPreviewOpen && ui.view !== 'git') {
       panelCandidates.push({
         key: 'preview',
         title: `Preview: ${effectivePreviewTarget?.label || 'unknown'}`,
@@ -4133,9 +4469,15 @@ function createDashboardApp(deps) {
       });
     }
 
-    if (ultraCompact && !splitPreviewLayout) {
+    if (ultraCompact) {
       if (previewOpen) {
-        panelCandidates = panelCandidates.filter((panel) => panel && (panel.key === focusedSection || panel.key === 'preview'));
+        panelCandidates = panelCandidates.filter((panel) =>
+          panel && (
+            panel.key === focusedSection
+            || panel.key === 'preview'
+            || (ui.view === 'git' && panel.key === 'git-diff')
+          )
+        );
       } else {
         const focusedPanel = panelCandidates.find((panel) => panel?.key === focusedSection);
         panelCandidates = [focusedPanel || panelCandidates[0]];
@@ -4143,6 +4485,13 @@ function createDashboardApp(deps) {
     }
 
     const panels = allocateSingleColumnPanels(panelCandidates, contentRowsBudget);
+    const lazyGitHierarchyLayout = ui.view === 'git'
+      && !ui.showHelp
+      && !worktreeOverlayOpen
+      && !overlayPreviewOpen
+      && !ultraCompact
+      && fullWidth >= 96
+      && panelCandidates.length > 1;
 
     const renderPanel = (panel, index, width, isFocused) => React.createElement(SectionPanel, {
       key: panel.key,
@@ -4157,14 +4506,22 @@ 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: previewBodyLines
+    if (lazyGitHierarchyLayout) {
+      const preferredRightPanel = panelCandidates.find((panel) => panel?.key === 'git-diff')
+        || (previewOpen && !overlayPreviewOpen
+          ? panelCandidates.find((panel) => panel?.key === 'preview')
+          : null);
+      const focusedPanel = panelCandidates.find((panel) => panel?.key === focusedSection);
+      const rightPanelBase = preferredRightPanel
+        || focusedPanel
+        || panelCandidates[panelCandidates.length - 1];
+      const leftCandidates = panelCandidates.filter((panel) => panel?.key !== rightPanelBase?.key);
+      const leftWidth = Math.max(30, Math.min(Math.floor(fullWidth * 0.38), fullWidth - 36));
+      const rightWidth = Math.max(34, fullWidth - leftWidth - 1);
+      const leftPanels = allocateSingleColumnPanels(leftCandidates, contentRowsBudget);
+      const rightPanel = {
+        ...rightPanelBase,
+        maxLines: Math.max(4, contentRowsBudget)
       };
 
       contentNode = React.createElement(
@@ -4172,33 +4529,41 @@ function createDashboardApp(deps) {
         { width: fullWidth, flexDirection: 'row' },
         React.createElement(
           Box,
-          { width: mainPaneWidth, flexDirection: 'column' },
-          ...panels.map((panel, index) => React.createElement(SectionPanel, {
+          { width: leftWidth, flexDirection: 'column' },
+          ...leftPanels.map((panel, index) => React.createElement(SectionPanel, {
             key: panel.key,
             title: panel.title,
             lines: panel.lines,
-            width: mainPaneWidth,
+            width: leftWidth,
             maxLines: panel.maxLines,
             borderColor: panel.borderColor,
-            marginBottom: densePanels ? 0 : (index === panels.length - 1 ? 0 : 1),
+            marginBottom: densePanels ? 0 : (index === leftPanels.length - 1 ? 0 : 1),
             dense: densePanels,
             focused: paneFocus === 'main' && panel.key === focusedSection
           }))
         ),
-        React.createElement(Box, { width: 1 }, React.createElement(Text, null, ' ')),
         React.createElement(
           Box,
-          { width: previewPaneWidth, flexDirection: 'column' },
+          { width: 1, justifyContent: 'center' },
+          React.createElement(Text, { color: 'gray' }, '│')
+        ),
+        React.createElement(
+          Box,
+          { width: rightWidth, flexDirection: 'column' },
           React.createElement(SectionPanel, {
-            key: previewPanel.key,
-            title: previewPanel.title,
-            lines: previewPanel.lines,
-            width: previewPaneWidth,
-            maxLines: previewPanel.maxLines,
-            borderColor: previewPanel.borderColor,
+            key: rightPanel.key,
+            title: rightPanel.title,
+            lines: rightPanel.lines,
+            width: rightWidth,
+            maxLines: rightPanel.maxLines,
+            borderColor: rightPanel.borderColor,
             marginBottom: 0,
             dense: densePanels,
-            focused: paneFocus === 'preview'
+            focused: rightPanel.key === 'preview'
+              ? paneFocus === 'preview'
+              : (rightPanel.key === 'git-diff'
+                ? true
+                : (paneFocus === 'main' && rightPanel.key === focusedSection))
           })
         )
       );
@@ -4248,12 +4613,25 @@ function createDashboardApp(deps) {
         })
         : null,
       ...(Array.isArray(contentNode) ? contentNode : [contentNode]),
-      statusLine !== ''
+      showLegacyStatusLine
         ? React.createElement(Text, { color: 'yellow' }, truncate(statusLine, fullWidth))
         : null,
-      showFooterHelpLine
-        ? React.createElement(Text, { color: 'gray' }, truncate(quickHelpText, fullWidth))
-        : null
+      showCommandLogLine
+        ? React.createElement(
+          Text,
+          { color: 'white', backgroundColor: 'gray', bold: true },
+          truncate(commandLogLine, fullWidth)
+        )
+        : null,
+      showCommandStrip
+        ? React.createElement(
+          Text,
+          { color: 'white', backgroundColor: 'blue', bold: true },
+          truncate(commandStripText, fullWidth)
+        )
+        : (rows >= 10
+          ? React.createElement(Text, { color: 'gray' }, truncate(quickHelpText, fullWidth))
+          : null)
     );
   }
 

package/package.json

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