termdeck-cli 2.0.4 → 2.0.5

package/src/dashboard.js

@@ -7,10 +7,10 @@
  * exactly the rows it needs, with zero gaps between panes:
  *
  *   +-------------------------------------------------------------------+
- *   |                             TERMDECK                              |
- *   |                       Sep 21, 2026 3:30:59 PM                     |
- *   +-------------------------------------------------------------------+
- *   | [ALL 14] [LIVE 6] [EXP 4] …   /search (regex)                     |
+ *   | 15:14:19        +------------+          ● DAEMON ON               |
+ *   |                 | TERMDECK   |                                    |
+ *   |                 +------------+                                    |
+ *   | [ALL 14] [LIVE 6] [EXP 4] …               /search (regex) [box]   |
  *   +---------------------------------+---------------------------------+
  *   | PROJECTS (14)                   | DETAILS: hyperion-core          |
  *   |  ● hyperion-core      12m ago   |  status / path / branch / port  |
@@ -38,11 +38,11 @@ const { openInNewTerminal } = require('./terminal');
 const { LogView } = require('./logView');
 const { MODERN_STATUSES, loadConfig, loadConfigFromPath, displayPath, saveConfig } = require('./config');
 const { escapeBraces, truncate, formatTimestamp, timestamp, timeAgo } = require('./util');
-const { getGitInfo } = require('./projectManager');
-const { launchAgent, tailAgentLog, stopAllAgents } = require('./agentManager');
+const { getGitInfo, detectStack, generateCommitMessage, commitAndPush } = require('./projectManager');
+const { launchAgent, tailAgentLog, stopAllAgents, activeTails } = require('./agentManager');
 const { startMonitoring, stopMonitoring, stopAllMonitoring } = require('./processMonitor');
 
-const LAYOUT = { rows: 12, cols: 12, headerHeight: 6, footerHeight: 1 };
+const LAYOUT = { rows: 12, cols: 12, headerHeight: 6, footerHeight: 2 };
 
 /* ------------------------------------------------------------------ *
  * Theme — dark, modern palette, pastel status tags, thin borders.
@@ -53,9 +53,11 @@ const THEME = {
   surface: '#181825',   // slightly darker panels (output, footer)
   text: '#cdd6f4',      // general text (light gray-white)
   textDim: '#9399b2',   // secondary text (timestamps, labels)
+  tagCyan: '#94e2d5',   // log [termdeck] source tag
   border: '#45475a',    // thin, unobtrusive box borders
-  accentBg: '#3b82f6',  // selected-project highlight (bright blue)
+  accentBg: '#3b82f6',  // selected-project / focused-button highlight
   accentFg: '#ffffff',
+  chipBg: '#2d2d3f',    // action-button / stat-chip background
 };
 
 /** Pastel status colours per modern status; `unknown` is neutral gray. */
@@ -97,7 +99,7 @@ const DEMO_PID = 49201;
 const SAMPLE_CONFIG_PATH = path.join(__dirname, '..', 'sample-config.json');
 
 const FOOTER_KEYS =
-  '{bold}↑↓{/bold} navigate  {bold}tab{/bold} pane  {bold}s{/bold} status  {bold}/{/bold} search  {bold}r{/bold} dev  {bold}shift+x{/bold} stop  {bold}q{/bold} quit';
+  '{bold}\u2191\u2193{/bold} navigate  {bold}tab{/bold} pane  {bold}s{/bold} status  {bold}/{/bold} search  {bold}r{/bold} dev  {bold}shift+x{/bold} stop  {bold}q{/bold} quit';
 const HINTS = ` ${FOOTER_KEYS} `;
 
 /** Colour-coded demo log lines so the OUTPUT pane styling can be checked. */
@@ -153,10 +155,12 @@ function launchDashboard(config, options = {}) {
   const palette = new Map();
   const status = { message: null, timer: null, quitArmed: false, quitTimer: null, clock: null, chip: null, search: null };
   const gitInfo = new Map(); // project.path -> git snapshot (branch / hash / dirty)
+  const stackInfo = new Map();
   const processStats = new Map(); // project.path -> {running, pid, memory, cpu}
   let monitoredPath = null; // project.path currently polled by processMonitor
   let searchActive = false;
   let searchBuffer = '';
+  let gitModal = null;
 
   const colorFor = (project) => palette.get(project.path) || THEME.text;
 
@@ -182,45 +186,162 @@ function launchDashboard(config, options = {}) {
     el.style.label = { fg: THEME.textDim };
     el.style.fg = THEME.text;
     el.style.bg = THEME.bg;
-    if (label) el.setLabel(label);
+    if (label) {
+      el.headerLabel = label;
+      el.setLabel(label);
+    }
     return el;
   }
 
-  // Full-width masthead. A green-outlined title strip on the dark terminal
-  // background: the TERMDECK wordmark sits centred with the live clock below
-  // it, and vertical padding makes the strip read as a real header. No solid
-  // fill — just a clean line border and green text. updateHeader() refreshes
-  // the clock line every second. The box is created once and only its content
-  // is mutated — recreating it per tick leaked the renderer.
-  const TITLE_TEXT = ' TERMDECK ';
-  const TITLE_HEIGHT = 6; // line border + vertical padding + title + clock
-  const HEADER_ACCENT = '#00ff00';
-  const titleBox = blessed.box({
+/**
+   * Right-aligned header text drawn on a pane's top border. Has to be a direct
+   * screen child: blessed refuses to lay out top:-1 children of scrollable
+   * panes (projectList/card/logBox are all scrollable), so a pane-relative
+   * label would never paint. Position is derived from the pane's own geometry.
+   * Returns { widget, refresh(labelText) } so callers can re-evaluate whether the
+   * header still fits (the OUTPUT pane's label grows when logs are paused).
+   */
+  function paneHeaderRight(parent, content, fg = THEME.textDim) {
+    const pct = (v, fb) => {
+      const m = /^(\d+(?:\.\d+)?)%$/.exec(String(v));
+      return m ? parseFloat(m[1]) : fb;
+    };
+    const visible = String(content).replace(/\{[^{}]*\}/g, '').length;
+    const paneWidth = pct(parent.options.width, 0);
+    const position = `${(pct(parent.options.left, 0) + paneWidth).toFixed(2)}%-${visible + 1}`;
+    const widget = blessed.text({
+      parent: screen,
+      top: parent.options.top,
+      left: position,
+      height: 1,
+      tags: true,
+      content,
+      style: { fg, bg: 'transparent' },
+    });
+    widget.refresh = (labelText) => {
+      const labelLen = String(labelText != null ? labelText : parent.headerLabel || '').replace(/\{[^{}]*\}/g, '').length;
+      const px = Math.round((paneWidth / 100) * screen.width);
+      widget.hidden = visible + 1 > px - labelLen - 4;
+    };
+    widget.refresh();
+    return widget;
+  }
+
+  // Two-strip header: a 3-row masthead (clock | TERMDECK box | daemon) above a
+  // 3-row chips strip (status chips | search box). updateHeader() is the only
+  // renderer that mutates these.
+  const TITLE_TEXT = 'T E R M D E C K';
+  const LOGO_GREEN = '#00ff00';
+  const HEADER_ROWS = 6;
+  const CHIP_STRIP_TOP = 3;
+  const CHIP_ORDER = ['all', 'live', 'exp', 'pend', 'unknown', 'scrap'];
+  const CHIP_LABELS = { all: 'ALL', live: 'LIVE', exp: 'EXP', pend: 'PEND', unknown: 'UNKNOWN', scrap: 'SCRAP' };
+  const CHIP_WIDTHS = { all: 8, live: 8, exp: 8, pend: 8, unknown: 12, scrap: 11 };
+  const CHIP_COLORS = { live: STATUS_FG.live, exp: STATUS_FG.exp, pend: STATUS_FG.pend, unknown: STATUS_FG.unknown, scrap: STATUS_FG.scrap };
+
+  /** `15:14:19` — 24-hour clock for the masthead (logs stay 12-hour). */
+  function h24Time(date = new Date()) {
+    const p = (n) => String(n).padStart(2, '0');
+    return `${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`;
+  }
+
+  const masthead = blessed.box({
     parent: screen,
     top: 0,
     left: 0,
     width: '100%',
-    height: TITLE_HEIGHT,
+    height: 3,
     tags: true,
-    padding: { top: 1, bottom: 1 },
-    border: { type: 'line', fg: HEADER_ACCENT },
-    style: { fg: HEADER_ACCENT, bold: true },
+    style: { bg: THEME.bg, fg: THEME.text },
   });
 
-  // Stats + search strip sits directly under the masthead (no gap).
-  const statsBar = blessed.box({
+  const clockLabel = blessed.text({
+    parent: masthead,
+    top: 1,
+    left: 1,
+    height: 1,
+    tags: true,
+    content: '',
+    style: { fg: THEME.textDim, bg: THEME.bg },
+  });
+
+  const titleBox = blessed.box({
+    parent: masthead,
+    top: 0,
+    left: 'center',
+    width: TITLE_TEXT.length + 2,
+    height: 3,
+    tags: true,
+    align: 'center',
+    valign: 'middle',
+    border: { type: 'line', fg: LOGO_GREEN },
+    style: { fg: LOGO_GREEN, bold: true, bg: THEME.bg },
+    content: TITLE_TEXT,
+  });
+
+  const daemonLabel = blessed.text({
+    parent: masthead,
+    top: 1,
+    right: 1,
+    height: 1,
+    tags: true,
+    content: '',
+    style: { bg: THEME.bg },
+  });
+
+  // Row 2 of the header: bordered status chips at the left, bordered search box
+  // at the right. Chips are chunky 3-row boxes so the line border closes cleanly.
+  const chipStrip = blessed.box({
     parent: screen,
-    top: TITLE_HEIGHT,
+    top: CHIP_STRIP_TOP,
     left: 0,
     width: '100%',
-    height: 1,
+    height: 3,
     tags: true,
     style: { bg: THEME.bg, fg: THEME.text },
   });
 
-  const bodyTop = TITLE_HEIGHT + 1;   // masthead + stats bar, no gaps
-  const footerHeight = 1;
-  const bodyHeight = Math.max(3, screen.rows - bodyTop - footerHeight);
+  const searchBox = blessed.box({
+    parent: chipStrip,
+    top: 0,
+    right: 1,
+    width: Math.max(18, Math.min(26, Math.floor(screen.cols * 0.26))),
+    height: 3,
+    tags: true,
+    align: 'center',
+    valign: 'middle',
+    border: { type: 'line', fg: THEME.border },
+    style: { fg: THEME.textDim, bg: THEME.bg },
+  });
+
+  let chipCursor = 0;
+  const chipBoxes = CHIP_ORDER.map((key) => {
+    const box = blessed.box({
+      parent: chipStrip,
+      top: 0,
+      left: chipCursor,
+      width: CHIP_WIDTHS[key],
+      height: 3,
+      tags: true,
+      align: 'center',
+      valign: 'middle',
+      border: { type: 'line', fg: THEME.border },
+      style: { fg: CHIP_COLORS[key] ? CHIP_COLORS[key] : THEME.text, bg: THEME.bg },
+    });
+    chipCursor += CHIP_WIDTHS[key] + 1;
+    return box;
+  });
+
+  const bodyTop = HEADER_ROWS;                 // masthead + chips strip
+  const footerHeight = 2;                      // bordered footer box
+  const bodyHeight = Math.max(6, screen.rows - bodyTop - footerHeight);
+  // Bordered buttons need 5 rows x 3 cells (15) + border(2) + label-row(0). When the
+  // window is too short (80x24 → body 16), the grid collapses to 1-line chips.
+  const large = bodyHeight >= 29;
+  const actionsHeight = large ? 18 : 8;        // border(2) + grid(5x3 or 5x1)
+  const outputHeight = Math.max(3, Math.min(large ? 6 : 4, bodyHeight - actionsHeight - (large ? 8 : 5)));
+  const cardHeight = Math.max(3, bodyHeight - actionsHeight - outputHeight);
+  const logHeight = outputHeight;
 
   const projectList = blessed.list({
     parent: screen,
@@ -243,13 +364,10 @@ function launchDashboard(config, options = {}) {
     },
   });
   panel(projectList, ' PROJECTS ');
+  paneHeaderRight(projectList, ' SORT: RECENT ');
 
   const rightLeft = '40%';
   const rightWidth = '60%';
-  const cardHeight = Math.max(3, Math.round(bodyHeight * 0.42));
-  // The ACTIONS pane must fit 4 button rows plus borders; OUTPUT gets the rest.
-  const actionsHeight = Math.max(6, Math.round(bodyHeight * 0.34));
-  const logHeight = Math.max(3, bodyHeight - cardHeight - actionsHeight);
 
   const card = blessed.box({
     parent: screen,
@@ -263,6 +381,7 @@ function launchDashboard(config, options = {}) {
     border: { type: 'line', fg: THEME.border },
   });
   panel(card, ' DETAILS ');
+  const gitHeader = paneHeaderRight(card, '{#a6e3a1-fg}GIT: CLEAN{/#a6e3a1-fg}');
 
   const actionsShell = blessed.box({
     parent: screen,
@@ -273,30 +392,35 @@ function launchDashboard(config, options = {}) {
     tags: true,
     border: { type: 'line', fg: THEME.border },
   });
-  panel(actionsShell, ' ACTIONS — r/e/c/x/o/f/k/s or [Enter] ');
+  panel(actionsShell, ' ACTIONS - r/e/c/x/o/f/k/s or [Enter] ');
+  paneHeaderRight(actionsShell, ' KEYMAP: VIM/CLI ');
 
-  const footer = blessed.box({
+  const footerMeta = blessed.box({
     parent: screen,
     top: bodyTop + bodyHeight,
     left: 0,
     width: '100%',
-    height: footerHeight,
+    height: 1,
     tags: true,
-    style: { fg: THEME.text, bg: THEME.surface },
+    style: { fg: THEME.textDim, bg: THEME.surface },
+  });
+  const footer = blessed.box({
+    parent: screen,
+    top: bodyTop + bodyHeight + 1,
+    left: 0,
+    width: '100%',
+    height: 1,
+    tags: true,
+    style: { fg: THEME.accentFg, bg: THEME.accentBg },
   });
 
-  /**
-   * One-line action button, nested inside the ACTIONS cell. `focusBg/focusFg`
-   * drive the focused/hover look; the status button is re-styled at render
-   * time to nudge the user while a project has no status.
-   */
-  function makeButton({ content, fg, focusBg, focusFg, onPress }) {
+  function makeButton({ content, onPress }) {
     const button = blessed.button({
       parent: actionsShell,
       top: '0%',
       left: '0%',
       width: '47%',
-      height: '23%',
+      height: large ? 3 : 1,
       shrink: true,
       content,
       align: 'center',
@@ -305,57 +429,55 @@ function launchDashboard(config, options = {}) {
       mouse: true,
       clickable: true,
       autoFocus: false,
+      padding: large ? { left: 1, right: 1 } : {},
+      border: large ? { type: 'line', fg: THEME.border } : undefined,
       style: {
-        fg: fg || THEME.text,
-        bg: THEME.bg,
-        focus: { bg: focusBg || THEME.accentBg, fg: focusFg || THEME.accentFg, bold: true },
-        hover: { bg: focusBg || THEME.accentBg, fg: focusFg || THEME.accentFg, bold: true },
+        fg: THEME.text,
+        bg: THEME.chipBg,
+        focus: { bg: THEME.accentBg, fg: THEME.accentFg, bold: true },
+        hover: { bg: THEME.accentBg, fg: THEME.accentFg, bold: true },
+        border: large ? { fg: THEME.border } : undefined,
       },
     });
 
     button.on('press', () => {
+      let handled = false;
       try {
-        onPress();
+        handled = onPress() === true;
       } catch (err) {
         setStatus(`Error: ${err.message}`);
       } finally {
-        projectList.focus();
-        screen.render();
+        if (!handled && !gitModal) {
+          projectList.focus();
+          screen.render();
+        }
       }
     });
     return button;
   }
 
   const buttons = {};
-  const BUTTON_SLOTS = new Map();
 
-  /**
-   * 2-col x 4-row button grid nested inside the ACTIONS pane. Geometry is
-   * computed from the pane's exact row count so buttons never clip borders,
-   * even on an 80x24 terminal.
-   */
   function addButton(name, slot, content, opts) {
     const button = makeButton({ content, ...opts });
-    BUTTON_SLOTS.set(button, slot);
-    const inner = Math.max(1, actionsHeight - 2);
-    const rowH = Math.max(1, Math.floor(inner / 4));
-    const pad = Math.max(0, Math.floor((inner - 4 * rowH) / 2));
-    button.top = 1 + pad + slot.row * rowH;
+    const rowH = large ? 3 : 1;
+    button.top = 1 + slot.row * rowH;
     button.height = rowH;
-    button.left = slot.col === 0 ? '2%' : '52%';
-    button.width = '46%';
+    button.left = slot.col === 0 ? '2%' : '51%';
+    button.width = '47%';
     buttons[name] = button;
     return button;
   }
 
-  addButton('dev', { row: 0, col: 0 }, '{bold}[r]{/bold} Run dev server', { fg: STATUS_FG.live, onPress: () => startDevServer() });
-  addButton('editor', { row: 0, col: 1 }, '{bold}[e]{/bold} Open in editor', { fg: THEME.text, onPress: () => openTool('editor') });
-  addButton('claude', { row: 1, col: 0 }, `{bold}[c]{/bold} ${AGENT_LABELS.claude}`, { fg: '#f5c2e7', onPress: () => openTool('claude') });
-  addButton('codex', { row: 1, col: 1 }, `{bold}[x]{/bold} ${AGENT_LABELS.codex}`, { fg: '#94e2d5', onPress: () => openTool('codex') });
-  addButton('opencode', { row: 2, col: 0 }, `{bold}[o]{/bold} ${AGENT_LABELS.opencode}`, { fg: STATUS_FG.pend, onPress: () => openTool('opencode') });
-  addButton('freebuff', { row: 2, col: 1 }, `{bold}[f]{/bold} ${AGENT_LABELS.freebuff}`, { fg: STATUS_FG.exp, onPress: () => openTool('freebuff') });
-  addButton('kilocode', { row: 3, col: 0 }, `{bold}[k]{/bold} ${AGENT_LABELS.kilocode}`, { fg: '#cba6f7', onPress: () => openTool('kilocode') });
-  addButton('status', { row: 3, col: 1 }, '{bold}[s]{/bold} Change status', { fg: STATUS_FG.pend, onPress: () => cycleStatus() });
+  addButton('dev', { row: 0, col: 0 }, `{bold}[r]{/bold} Run dev server`, { onPress: () => startDevServer() });
+  addButton('editor', { row: 0, col: 1 }, `{bold}[e]{/bold} Open in editor`, { onPress: () => openTool('editor') });
+  addButton('claude', { row: 1, col: 0 }, `{bold}[c]{/bold} ${AGENT_LABELS.claude}`, { onPress: () => openTool('claude') });
+  addButton('codex', { row: 1, col: 1 }, `{bold}[x]{/bold} ${AGENT_LABELS.codex}`, { onPress: () => openTool('codex') });
+  addButton('opencode', { row: 2, col: 0 }, `{bold}[o]{/bold} ${AGENT_LABELS.opencode}`, { onPress: () => openTool('opencode') });
+  addButton('freebuff', { row: 2, col: 1 }, `{bold}[f]{/bold} ${AGENT_LABELS.freebuff}`, { onPress: () => openTool('freebuff') });
+  addButton('kilocode', { row: 3, col: 0 }, `{bold}[k]{/bold} ${AGENT_LABELS.kilocode}`, { onPress: () => openTool('kilocode') });
+  addButton('status', { row: 3, col: 1 }, `{bold}[s]{/bold} Change status`, { onPress: () => cycleStatus() });
+  addButton('git', { row: 4, col: 0 }, `{bold}[g]{/bold} Git commit & push \u25b8 git`, { onPress: openGitCommitModal });
 
   // Created after the buttons so tab-focus order is list -> actions -> output.
   const logBox = contrib.log({
@@ -371,14 +493,16 @@ function launchDashboard(config, options = {}) {
     border: { type: 'line', fg: THEME.border },
     style: { bg: THEME.surface, item: { fg: THEME.text }, selected: { fg: THEME.text, bg: '#313244' } },
   });
-  panel(logBox, ' OUTPUT (dev server / agents) ');
+  panel(logBox, ' OUTPUT (dev server / agents) [ON] ');
+  const bufferHeader = paneHeaderRight(logBox, ` BUFFER: 1024L {${STATUS_FG.live}-fg}STREAM ACTIVE{/${STATUS_FG.live}-fg} `);
 
   const logView = new LogView(logBox, {
     maxLines: 800,
     flushInterval: 120,
     viewportHeight: () => Math.max(1, (typeof logBox.height === 'number' ? logBox.height : screen.rows) - 2),
     onChange: () => screen.render(),
-    label: ' OUTPUT (dev server / agents)  autoscroll [ON] ',
+    onLabelChange: (label) => bufferHeader.refresh(label),
+    label: ' OUTPUT (dev server / agents) [ON] ',
   });
 
   /* ---------------------------------------------------------------- *
@@ -421,37 +545,39 @@ function launchDashboard(config, options = {}) {
     return counts;
   }
 
-  function filterChips() {
+  function chipData() {
     const counts = modernCounts();
-    const chip = (label, count, color, key) => {
-      if (count <= 0) return '';
-      const active = status.chip === key;
-      return `{${color}-fg}${active ? '{bold}' : ''}[${label} ${count}]${active ? '{/bold}' : ''}{/${color}-fg}`;
-    };
-    const allActive = status.chip === null;
-    return [
-      `{${THEME.text}-fg}${allActive ? '{bold}' : ''}[ALL ${projects.length}]${allActive ? '{/bold}' : ''}{/${THEME.text}-fg}`,
-      chip('LIVE', counts.live, STATUS_FG.live, 'live'),
-      chip('EXP', counts.exp, STATUS_FG.exp, 'exp'),
-      chip('PEND', counts.pend, STATUS_FG.pend, 'pend'),
-      chip('UNKNOWN', counts.unknown, STATUS_FG.unknown, 'unknown'),
-      chip('SCRAP', counts.scrap, STATUS_FG.scrap, 'scrap'),
-    ].filter(Boolean).join(' ');
+    const activeKey = status.chip || 'all';
+    return CHIP_ORDER.map((key) => {
+      const count = key === 'all' ? projects.length : counts[key] || 0;
+      return { key, label: CHIP_LABELS[key], count, active: key === activeKey, hidden: key !== 'all' && count <= 0 };
+    });
   }
 
   function searchLabel() {
-    if (searchActive) return `/search: ${searchBuffer}`;
-    return status.search ? `/search: ${status.search}` : '/search (regex)';
+    if (searchActive) return `/search (regex): ${searchBuffer}`;
+    return status.search ? `/search (regex): ${status.search}` : '/search (regex)';
   }
 
   function updateHeader() {
-    const stats = filterChips();
-    const search = `{${THEME.textDim}-fg}${escapeBraces(searchLabel())}{/${THEME.textDim}-fg}`;
-    statsBar.setContent(` ${stats}   ${search} `);
-    // formatTimestamp() renders "Sep 21, 2026 3:30:59 PM"; fall back to the
-    // platform formatter only if the custom 12-hour/date renderer ever fails.
-    const clock = formatTimestamp(new Date()) || new Date().toLocaleTimeString();
-    titleBox.setContent(`{center}{bold}${TITLE_TEXT}{/bold}{/center}\n{center}${escapeBraces(clock)}{/center}`);
+    clockLabel.setContent(` ${h24Time()}`);
+    const busy = servers.runningCount > 0 || activeTails() > 0;
+    daemonLabel.setContent(busy
+      ? `{${STATUS_FG.live}-fg}\u25cf DAEMON ON{/${STATUS_FG.live}-fg}`
+      : `{${THEME.textDim}-fg}\u25cb DAEMON OFF{/${THEME.textDim}-fg}`);
+
+    chipData().forEach((chip, index) => {
+      const box = chipBoxes[index];
+      if (box.hidden === chip.hidden && box.content === `${chip.label} ${chip.count}` && box.active === chip.active) return;
+      box.hidden = chip.hidden;
+      box.setContent(`${chip.label} ${chip.count}`);
+      box.style.bg = chip.active ? THEME.accentBg : THEME.bg;
+      box.style.fg = chip.active ? THEME.accentFg : (CHIP_COLORS[chip.key] || THEME.text);
+      box.style.bold = chip.key === 'all';
+      box.active = chip.active;
+    });
+
+    searchBox.setContent(escapeBraces(searchLabel()));
   }
 
   /** Projects after the chip (status) + search (regex on name) filters. */
@@ -476,16 +602,16 @@ function launchDashboard(config, options = {}) {
 
   function listItems() {
     const inner = Math.max(12, Math.floor(screen.cols * 0.4) - 4);
-    const nameWidth = Math.max(6, inner - 12);
     return filteredProjects().map((project) => {
       const state = runStates.get(project.path);
       const running = state && (state.status === 'running' || state.status === 'starting');
       const modern = modernStatusOf(project);
       const dotFg = running ? (state.status === 'running' ? STATUS_FG.live : STATUS_FG.exp) : statusFg(modern);
-      const name = escapeBraces(truncate(project.name, nameWidth));
+      const name = escapeBraces(truncate(project.name, Math.max(6, inner - 14)));
       const info = gitInfo.get(project.path);
-      const activity = escapeBraces(truncate(project.lastActivity || timeAgo(info && info.lastCommitAt) || '\u2014', 10));
-      return `{${dotFg}-fg}●{/${dotFg}-fg} ${name} {${THEME.textDim}-fg}${activity}{/${THEME.textDim}-fg}`;
+      const activity = escapeBraces(String(truncate(project.lastActivity || timeAgo(info && info.lastCommitAt) || '\u2014', 10)));
+      const pads = ' '.repeat(Math.max(0, inner - name.length - activity.length - 3));
+      return `{${dotFg}-fg}\u25cf{/${dotFg}-fg} ${name}${pads} {${THEME.textDim}-fg}${activity}{/${THEME.textDim}-fg}`;
     });
   }
 
@@ -517,24 +643,19 @@ function launchDashboard(config, options = {}) {
     const modern = modernStatusOf(project);
     const sFg = statusFg(modern);
     const inner = Math.max(24, Math.floor(screen.cols * 0.6) - 4);
-    const runPid = state && state.pid ? state.pid : null;
     const info = gitInfo.get(project.path);
     const stats = processStats.get(project.path);
-    const pidLabel = runPid
-      ? String(runPid)
-      : stats && stats.pid
-        ? String(stats.pid)
-        : config.demoMode && project.port
-          ? `${DEMO_PID} {${THEME.textDim}-fg}(demo){/${THEME.textDim}-fg}`
-          : '\u2014';
     const memCpu = stats && stats.memory
       ? `${escapeBraces(stats.memory)} \u00b7 ${escapeBraces(stats.cpu || '\u2014')}`
       : config.demoMode
         ? `213.4 MB \u00b7 0.8% {${THEME.textDim}-fg}(demo){/${THEME.textDim}-fg}`
         : '\u2014';
     const dirty = info && info.dirty ? info.dirty : { added: 0, removed: 0 };
-    const dirtyLabel = dirty.added || dirty.removed
-      ? ` {#f38ba8-fg}+${dirty.added}{/#f38ba8-fg}{#89b4fa-fg} -${dirty.removed}{/#89b4fa-fg}`
+    const dirtyLabel = dirty.added
+      ? ` {${STATUS_FG.live}-fg}+${dirty.added}{/${STATUS_FG.live}-fg}`
+      : '';
+    const dirtyLabel2 = dirty.removed
+      ? ` {#f38ba8-fg}-${dirty.removed}{/#f38ba8-fg}`
       : '';
     const branch = (info && info.branch) || project.branch || '\u2014';
     const hash = (info && info.commitHash) || (project.lastCommit && project.lastCommit.hash) || '';
@@ -550,21 +671,34 @@ function launchDashboard(config, options = {}) {
       ? `{${STATUS_FG.unknown}-fg}{bold}[?] Unknown{/bold}{/${STATUS_FG.unknown}-fg}`
       : `{${sFg}-fg}{bold}[${modern.toUpperCase()}]{/bold} ${fullLabel}{/${sFg}-fg}`;
 
+    // Escapes plain values for blessed markup; set `raw` for values that already
+    // carry blessed tags (branch colors, mem/cpu demo suffix).
+    const row = (label, value, raw) => {
+      const v = truncate(value, Math.max(4, inner - label.length - 2));
+      return ` {${THEME.textDim}-fg}${label}{/${THEME.textDim}-fg} ${raw ? v : escapeBraces(v)}`;
+    };
+    const selector = `{${STATUS_FG.live}-fg}${escapeBraces(truncate(branch, 30))}{/${STATUS_FG.live}-fg}`;
+
     const lines = [
-      ` {${sFg}-fg}●{/${sFg}-fg} {bold}${escapeBraces(truncate(project.name, 40))}{/bold}`,
+      ` {${sFg}-fg}\u25cf{/${sFg}-fg} {bold}${escapeBraces(truncate(project.name, 40))}{/bold}`,
       ` {${THEME.textDim}-fg}${escapeBraces(truncate(project.info || '(no description)', inner - 2))}{/${THEME.textDim}-fg}`,
-      ` {${THEME.textDim}-fg}Path:{/${THEME.textDim}-fg} ${escapeBraces(truncate(displayPath(project.path, config.root), inner - 8))}`,
-      ` {${THEME.textDim}-fg}Status:{/${THEME.textDim}-fg} ${statusChip}  {${THEME.textDim}-fg}Branch:{/${THEME.textDim}-fg} {${STATUS_FG.live}-fg}${escapeBraces(truncate(branch, 30))}{/${STATUS_FG.live}-fg}${dirtyLabel}`,
-      ` {${THEME.textDim}-fg}Dev port:{/${THEME.textDim}-fg} ${project.port || '\u2014'}   {${THEME.textDim}-fg}PID:{/${THEME.textDim}-fg} ${pidLabel}`,
-      ` {${THEME.textDim}-fg}Package mgr:{/${THEME.textDim}-fg} ${escapeBraces(String(project.packageManager || '\u2014'))}`,
-      ` {${THEME.textDim}-fg}Stack:{/${THEME.textDim}-fg} ${escapeBraces(truncate(project.stack || '\u2014', inner - 12))}`,
-      ` {${THEME.textDim}-fg}Mem/CPU:{/${THEME.textDim}-fg} ${memCpu}`,
-      ` {${THEME.textDim}-fg}Last commit:{/${THEME.textDim}-fg} ${escapeBraces(truncate(commit, inner - 16))}`,
+      ` {${THEME.textDim}-fg}Status:{/${THEME.textDim}-fg} ${statusChip}`,
+      row('Path:', displayPath(project.path, config.root)),
+      row('Branch:', `${selector}${dirtyLabel}${dirtyLabel2}`, true),
+      row('Package mgr:', String(project.packageManager || '\u2014')),
+      row('Stack:', stackLabel(project)),
+      row('Mem/CPU:', memCpu, true),
+      row('Last commit:', commit),
       devStateLine(project, state),
     ];
 
     card.setContent(lines.join('\n'));
     card.setLabel(` DETAILS: ${project.name} `);
+    const dirtyNow = Boolean(dirty && (dirty.added || dirty.removed));
+    gitHeader.setContent(dirtyNow
+      ? `{#f38ba8-fg}GIT: DIRTY{/#f38ba8-fg}`
+      : `{#a6e3a1-fg}GIT: CLEAN{/#a6e3a1-fg}`);
+    card.headerLabel = ` DETAILS: ${project.name} `;
 
     // Visual cue while the status is unknown: red button asking to be set.
     if (unknown) {
@@ -580,18 +714,38 @@ function launchDashboard(config, options = {}) {
     screen.render();
   }
 
-  function buildFooter() {
+  function footerHints() {
+    if (screen.cols >= 110) return FOOTER_KEYS;
+    if (screen.cols >= 90) return '{bold}\u2191\u2193{/bold} navigate  {bold}s{/bold} status  {bold}r{/bold} dev  {bold}shift+x{/bold} stop  {bold}q{/bold} quit';
+    return '{bold}\u2191\u2193{/bold} navigate  {bold}s{/bold} status  {bold}r{/bold} dev  {bold}q{/bold} quit';
+  }
+
+  function buildFooterRow1() {
+    const showing = ` SHOWING ${filteredProjects().length} OF ${projects.length} `;
+    const press = 'PRESS [/] FILTER';
+    const centerAt = Math.floor(screen.cols / 2) - Math.floor(press.length / 2);
+    const pad = Math.max(0, centerAt - showing.length);
+    const row = `${showing}${' '.repeat(pad)}${press}`.slice(0, screen.cols);
+    return row;
+  }
+
+  function buildFooterRow2() {
     const sel = selectedProject();
     const index = sel ? filteredProjects().indexOf(sel) + 1 : 0;
     const paneLabel = currentPane();
     const size = `${screen.cols}x${screen.rows}`;
     const chipLabel = status.chip ? status.chip.toUpperCase() : 'ALL';
     const search = status.search ? ` /${status.search}` : '';
-    return ` {${THEME.text}-fg}[${index}/${filteredProjects().length}] SELECTED  FILTER: ${chipLabel}${search}{/${THEME.text}-fg}   ${FOOTER_KEYS}   {${THEME.textDim}-fg}PANE: [${paneLabel}] \u2502 ${size}{/${THEME.textDim}-fg} `;
+    const fixed = `[${index}/${filteredProjects().length}] SELECTED  FILTER: ${chipLabel}${search}`;
+    const hints = ` ${footerHints()} `;
+    const tail = ` PANE: [${paneLabel}] \u2502 ${size} `;
+    const row = ` ${fixed}${hints}${tail}`.slice(0, screen.cols);
+    return row;
   }
 
   function updateFooter() {
-    footer.setContent(buildFooter());
+    footerMeta.setContent(buildFooterRow1());
+    footer.setContent(buildFooterRow2());
   }
 
   function currentPane() {
@@ -622,6 +776,7 @@ function launchDashboard(config, options = {}) {
   function setStatus(message) {
     if (status.timer) clearTimeout(status.timer);
     status.message = message;
+    footerMeta.setContent(buildFooterRow1());
     footer.setContent(` {bold}${escapeBraces(message)}{/bold}`);
     screen.render();
 
@@ -635,13 +790,18 @@ function launchDashboard(config, options = {}) {
 
   /** Log lines from child processes are raw text -> escape blessed markup. */
   function appendLog(project, line, stream = 'stdout') {
-    const fg = colorFor(project);
-    const prefix = `{${THEME.textDim}-fg}${timestamp()}{/${THEME.textDim}-fg} {${fg}-fg}${escapeBraces(truncate(project.name, 10))}{/${fg}-fg}`;
+    const time = `{${THEME.textDim}-fg}${timestamp()}{/${THEME.textDim}-fg}`;
     if (stream === 'system') {
-      logView.push(`${prefix} {#89b4fa-fg}[termdeck]{/#89b4fa-fg} ${line}`);
+      // Give generic notes a cyan [termdeck] tag; lines that already carry their
+      // own [tag] keep it.
+      const visible = String(line).replace(/^(?:\{[^{}]*\})*/, '').replace(/^\s+/, '');
+      const tag = visible.startsWith('[') ? '' : `{${THEME.tagCyan}-fg}[termdeck]{/${THEME.tagCyan}-fg} `;
+      logView.push(`${time} ${tag}${line}`);
       return;
     }
-    const marker = stream === 'stderr' ? '{#f38ba8-fg}✗{/#f38ba8-fg} ' : '';
+    const fg = colorFor(project);
+    const prefix = `{${THEME.textDim}-fg}${timestamp()}{/${THEME.textDim}-fg} ${escapeBraces(truncate(project.name, 10))}`;
+    const marker = stream === 'stderr' ? '{#f38ba8-fg}\u2717{/#f38ba8-fg} ' : '';
     logView.push(`${prefix} ${marker}${escapeBraces(line)}`);
   }
 
@@ -649,6 +809,187 @@ function launchDashboard(config, options = {}) {
    * Actions
    * ---------------------------------------------------------------- */
 
+  function getProjectStack(project) {
+    if (!project) return '\u2014';
+    if (project.stack) return project.stack;
+    if (config.demoMode) return '\u2014';
+    if (!stackInfo.has(project.path)) stackInfo.set(project.path, detectStack(project.path));
+    return stackInfo.get(project.path) || '\u2014';
+  }
+
+  /** Stack shown as comma-separated names, even when config used dashes. Plain
+   *  audit text — the row() helper escapes it for blessed markup. */
+  function stackLabel(project) {
+    return String(getProjectStack(project) || '\u2014').replace(/\s*-\s*/g, ', ');
+  }
+
+  function refreshProjectStack(project) {
+    if (!project || config.demoMode || project.stack) return;
+    const stack = detectStack(project.path);
+    stackInfo.set(project.path, stack);
+    if (selectedProject() === project) updateCard();
+  }
+
+  function openGitCommitModal() {
+    const project = selectedProject();
+    if (!project) return false;
+    if (gitModal) {
+      gitModal.textbox.focus();
+      return true;
+    }
+
+    let generated;
+    try {
+      generated = generateCommitMessage(project.path);
+    } catch (_) {
+      generated = 'Update project files';
+    }
+    if (generated === null) {
+      appendLog(project, `{${STATUS_FG.exp}-fg}⚠ No changes to commit.{/${STATUS_FG.exp}-fg}`, 'system');
+      setStatus(`${project.name}: No changes to commit.`);
+      return true;
+    }
+
+    const width = Math.max(32, Math.min(72, screen.cols - 4));
+    const height = Math.max(10, Math.min(14, screen.rows - 4));
+    const modal = blessed.box({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width,
+      height,
+      tags: true,
+      keys: true,
+      border: { type: 'line', fg: THEME.border },
+      style: { bg: THEME.surface, fg: THEME.text },
+    });
+    modal.setLabel(' Git Commit Message ');
+    blessed.text({
+      parent: modal,
+      top: 1,
+      left: 2,
+      width: width - 4,
+      height: 1,
+      tags: true,
+      content: 'Press Enter to commit & push, Esc to cancel',
+      style: { fg: THEME.textDim },
+    });
+    const textbox = blessed.textbox({
+      parent: modal,
+      top: 3,
+      left: 2,
+      width: width - 4,
+      height: Math.max(3, height - 7),
+      keys: true,
+      mouse: true,
+      value: generated || 'Update project files',
+      style: {
+        fg: THEME.text,
+        bg: THEME.surface,
+        focus: { fg: THEME.text, bg: '#282838' },
+      },
+    });
+    const hint = blessed.text({
+      parent: modal,
+      bottom: 1,
+      left: 2,
+      width: width - 4,
+      height: 1,
+      tags: true,
+      content: "Press 'a' to auto-generate, or edit manually. Enter to commit, Esc to cancel.",
+      style: { fg: THEME.textDim },
+    });
+
+    const originalListener = textbox._listener;
+    textbox._listener = function(ch, key) {
+      if ((key.name === 'a' || key.name === 'A') && !key.ctrl && !key.meta) {
+        let next;
+        try {
+          next = generateCommitMessage(project.path);
+        } catch (_) {
+          next = 'Update project files';
+        }
+        if (next === null) {
+          appendLog(project, `{${STATUS_FG.exp}-fg}⚠ No changes to commit.{/${STATUS_FG.exp}-fg}`, 'system');
+          hint.setContent("Press 'a' to auto-generate, or edit manually. Enter to commit, Esc to cancel.");
+        } else {
+          textbox.setValue(next || 'Update project files');
+          hint.setContent("Auto-generated. Press 'a' to regenerate, or edit manually. Enter to commit, Esc to cancel.");
+        }
+        screen.render();
+        return;
+      }
+      return originalListener.call(this, ch, key);
+    };
+
+    function closeGitModal() {
+      if (!gitModal) return;
+      gitModal = null;
+      try { modal.destroy(); } catch (_) {}
+      try { projectList.focus(); } catch (_) {}
+      try { screen.render(); } catch (_) {}
+    }
+
+    function finish(value) {
+      closeGitModal();
+      if (value == null) {
+        setStatus(`${project.name}: Git commit cancelled.`);
+        return;
+      }
+      const message = String(value).trim();
+      if (!message) {
+        appendLog(project, `{${STATUS_FG.exp}-fg}⚠ Commit message cannot be empty.{/${STATUS_FG.exp}-fg}`, 'system');
+        setStatus(`${project.name}: Commit message cannot be empty.`);
+        return;
+      }
+      setImmediate(() => runGitCommit(project, message));
+    }
+
+    textbox.on('submit', finish);
+    textbox.on('cancel', () => finish(null));
+    gitModal = { modal, textbox, close: closeGitModal };
+    textbox.readInput();
+    screen.render();
+    return true;
+  }
+
+  function runGitCommit(project, message) {
+    logView.followTail();
+    appendLog(project, `{${STATUS_FG.live}-fg}[git]{/${STATUS_FG.live}-fg} committing and pushing…`, 'system');
+    let result;
+    try {
+      result = commitAndPush(project.path, message, {
+        onOutput: (line, stream) => appendLog(project, line, stream),
+      });
+    } catch (err) {
+      appendLog(project, `{#f38ba8-fg}✗ Git operation failed: ${escapeBraces(err.message)}{/#f38ba8-fg}`, 'system');
+      setStatus(`${project.name}: Git operation failed: ${err.message}`);
+      refreshProjectGit(project, { force: true });
+      return;
+    }
+
+    if (result.warning) {
+      appendLog(project, `{${STATUS_FG.exp}-fg}⚠ ${escapeBraces(result.warning)}{/${STATUS_FG.exp}-fg}`, 'system');
+      setStatus(`${project.name}: ${result.warning}`);
+      return;
+    }
+    if (!result.ok) {
+      appendLog(project, `{#f38ba8-fg}✗ ${escapeBraces(result.error)}{/#f38ba8-fg}`, 'system');
+      setStatus(`${project.name}: ${result.error}`);
+      refreshProjectGit(project, { force: true });
+      return;
+    }
+
+    const fileCount = result.fileCount || 1;
+    appendLog(
+      project,
+      `{${STATUS_FG.live}-fg}✓ [git] Committed and pushed ${fileCount} files: "${escapeBraces(result.message)}"{/${STATUS_FG.live}-fg}`,
+      'system'
+    );
+    setStatus(`${project.name}: committed and pushed.`);
+    refreshProjectGit(project, { force: true });
+  }
+
   function startDevServer() {
     const project = selectedProject();
     if (!project) return;
@@ -711,7 +1052,7 @@ function launchDashboard(config, options = {}) {
 
     // Agent: launch in a new terminal with log capture via tee where possible.
     const agentName = AGENT_LABELS[kind] || kind;
-    appendLog(project, `{#89b4fa-fg}[${escapeBraces(kind)}]{/#89b4fa-fg} launching ${escapeBraces(agentName)} in a new terminal`, 'system');
+    appendLog(project, `{${STATUS_FG.exp}-fg}[${escapeBraces(kind)}]{/${STATUS_FG.exp}-fg} launching ${escapeBraces(agentName)} in a new terminal`, 'system');
     setStatus(`Launching ${agentName} for ${project.name}\u2026`);
     const result = await launchAgent(project, kind);
     if (result.ok) {
@@ -736,7 +1077,7 @@ function launchDashboard(config, options = {}) {
     const index = MODERN_STATUSES.indexOf(current);
     const next = MODERN_STATUSES[(index + 1) % MODERN_STATUSES.length];
     project.status = next;
-    appendLog(project, `{#89b4fa-fg}[termdeck]{/#89b4fa-fg} status changed to {bold}${next}{/bold}`, 'system');
+    appendLog(project, `{${THEME.tagCyan}-fg}[termdeck]{/${THEME.tagCyan}-fg} status changed to {bold}${next}{/bold}`, 'system');
     setStatus(`${project.name}: status \u2192 ${next}`);
     if (!config.demoMode) {
       try { saveConfig(config); } catch (_) { /* best effort */ }
@@ -771,6 +1112,7 @@ function launchDashboard(config, options = {}) {
   }
 
   function destroy() {
+    if (gitModal) gitModal.close();
     if (status.timer) clearTimeout(status.timer);
     if (status.quitTimer) clearTimeout(status.quitTimer);
     if (status.clock) clearInterval(status.clock);
@@ -807,9 +1149,10 @@ function launchDashboard(config, options = {}) {
    * Git / process-monitor refresh on selection
    * ---------------------------------------------------------------- */
 
-  function refreshProjectGit(project) {
+  function refreshProjectGit(project, { force = false } = {}) {
     if (!project || config.demoMode) return;
-    const info = getGitInfo(project.path);
+    refreshProjectStack(project);
+    const info = getGitInfo(project.path, { force });
     gitInfo.set(project.path, info);
     if (selectedProject() === project) {
       refreshList();
@@ -868,6 +1211,7 @@ function launchDashboard(config, options = {}) {
   screen.key(['o'], () => { if (!searchActive) openTool('opencode'); });
   screen.key(['f'], () => { if (!searchActive) openTool('freebuff'); });
   screen.key(['k'], () => { if (!searchActive) openTool('kilocode'); });
+  screen.key(['g'], () => { if (!searchActive) openGitCommitModal(); });
   screen.key(['S-x'], () => { if (!searchActive) stopDevServer(); });
   screen.key(['j'], () => { if (!searchActive) projectList.down(1); });
   screen.key(['tab'], () => { if (!searchActive) screen.focusNext(); });
@@ -967,7 +1311,7 @@ function launchDashboard(config, options = {}) {
   projectList.focus();
   refreshList();
   updateCard();
-  appendLog({ name: 'termdeck', path: '__termdeck__' }, `{bold}termdeck{/bold} ready — ${projects.length} projects from ${escapeBraces(displayPath(config.root, config.root))}`, 'system');
+  appendLog({ name: 'termdeck', path: '__termdeck__' }, `{bold}termdeck{/bold} ready - ${projects.length} projects discovered from ${escapeBraces(displayPath(config.root, config.root))}`, 'system');
   appendLog({ name: 'termdeck', path: '__termdeck__' }, `pick a project and press {bold}r{/bold} for the dev server, {bold}e{/bold} for your editor, {bold}c/x/o/f/k{/bold} for an agent.`, 'system');
   if (config.demoMode) {
     const demoProject = projects[0] || { name: 'hyperion-core', path: 'demo' };
@@ -1013,7 +1357,7 @@ function launchDashboard(config, options = {}) {
 
   return {
     screen,
-    widgets: { header: titleBox, title: titleBox, statsBar, projectList, card, logBox, footer, buttons },
+    widgets: { header: titleBox, title: titleBox, statsBar: chipStrip, projectList, card, logBox, footer, buttons },
     servers,
     logView,
     runStates,