@pellux/goodvibes-tui 0.18.4

package/src/renderer/panel-composite.ts

@@ -0,0 +1,80 @@
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { InputHandler } from '../input/handler.ts';
+import type { PanelManager } from '../panels/panel-manager.ts';
+import type { PanelCompositeData } from './compositor.ts';
+import { createSplitPaneLayout } from './layout-engine.ts';
+import { renderPanelTabBar } from './panel-tab-bar.ts';
+import { renderPanelWorkspaceBar } from './panel-workspace-bar.ts';
+
+export interface PanelCompositeBuildResult {
+  readonly panelData?: PanelCompositeData;
+  readonly panelWidth?: number;
+}
+
+export function buildPanelCompositeData(
+  panelManager: PanelManager,
+  input: InputHandler,
+  panelWidth: number,
+  panelHeight: number,
+): PanelCompositeBuildResult {
+  if (!panelManager.isVisible() || panelManager.getAllOpen().length === 0 || panelWidth <= 0) {
+    return {};
+  }
+
+  const topPane = panelManager.getTopPane();
+  const bottomPane = panelManager.getBottomPane();
+  const focusedPane = panelManager.getFocusedPane();
+  const workspaceTabs = panelManager.getWorkspaceTabs();
+  const verticalSplitRatio = panelManager.getVerticalSplitRatio();
+  const hasBottom = panelManager.isBottomPaneVisible() && bottomPane.panels.length > 0;
+  const workspaceBar = renderPanelWorkspaceBar(workspaceTabs, panelWidth, input.panelFocused);
+
+  let topContent: Line[];
+  let topTabBar: Line | undefined;
+  let bottomTabBar: Line | undefined;
+  let bottomContent: Line[] | undefined;
+
+  const topActivePanel = topPane.panels[topPane.activeIndex] ?? null;
+
+  if (hasBottom) {
+    topTabBar = renderPanelTabBar(
+      topPane.panels,
+      topPane.activeIndex,
+      panelWidth,
+      input.panelFocused && focusedPane === 'top',
+      'top',
+    );
+    const paneLayout = createSplitPaneLayout(Math.max(0, panelHeight - 1), verticalSplitRatio);
+    const topH = paneLayout.topContentRows;
+    const bottomH = paneLayout.bottomContentRows;
+    topContent = topActivePanel ? topActivePanel.render(panelWidth, topH) : [];
+
+    const bottomActivePanel = bottomPane.panels[bottomPane.activeIndex] ?? null;
+    bottomTabBar = renderPanelTabBar(
+      bottomPane.panels,
+      bottomPane.activeIndex,
+      panelWidth,
+      input.panelFocused && focusedPane === 'bottom',
+      'bottom',
+    );
+    bottomContent = bottomActivePanel ? bottomActivePanel.render(panelWidth, bottomH) : [];
+  } else {
+    const topH = Math.max(0, panelHeight - 1);
+    topContent = topActivePanel ? topActivePanel.render(panelWidth, topH) : [];
+  }
+
+  return {
+    panelData: {
+      workspaceBar,
+      topTabBar,
+      topContent,
+      topFocused: input.panelFocused && focusedPane === 'top',
+      bottomTabBar,
+      bottomContent,
+      bottomFocused: input.panelFocused && focusedPane === 'bottom',
+      separator: true,
+      verticalSplitRatio,
+    },
+    panelWidth,
+  };
+}

package/src/renderer/panel-picker-overlay.ts

@@ -0,0 +1,202 @@
+import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { PanelPicker } from '../panels/panel-picker.ts';
+import { CATEGORY_LABELS, CATEGORY_ORDER } from '../panels/panel-picker.ts';
+import type { PanelCategory, PanelRegistration } from '../panels/types.ts';
+import {
+  createOverlayBorderLine,
+  createOverlayBoxLayout,
+  createOverlayContentLine,
+  DEFAULT_OVERLAY_PALETTE,
+  putOverlayText,
+} from './overlay-box.ts';
+import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
+
+const TITLE_FG = '#cbd5e1';
+const CATEGORY_FG = '#94a3b8';
+const SELECTED_FG = '#e2e8f0';
+const SELECTED_BG = '#1e293b';
+const BODY_FG = '252';
+const BORDER_FG = DEFAULT_OVERLAY_PALETTE.borderFg;
+
+/**
+ * Render the panel picker modal as Line[] for overlay in the viewport.
+ * Panels are grouped by category. Category headers are inserted between groups.
+ * When a search query is active a search-bar row is shown beneath the title.
+ */
+export function renderPanelPickerOverlay(
+  picker: PanelPicker,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  if (!picker.active) return [];
+
+  const lines: Line[] = [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    margin: 4,
+    maxWidth: 72,
+    chromeRows: picker.searchQuery.length > 0 ? 7 : 6,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
+  const contentW = layout.innerWidth;
+  const titleFg = TITLE_FG;
+  const borderFg = BORDER_FG;
+
+  // ── Title bar ──────────────────────────────────────────────────────────────
+  const titleLine = createOverlayBorderLine(width, layout, '┌', '─', '┐', borderFg);
+  putOverlayText(titleLine, layout.margin + 2, layout.width - 4, 'Open Panel Workspace', { fg: titleFg, bold: true });
+  lines.push(titleLine);
+
+  // ── Search bar (shown when query is non-empty) ──────────────────────────────
+  if (picker.searchQuery.length > 0) {
+    const searchLine = createOverlayContentLine(width, layout, borderFg);
+    const searchLabel = '\u2315 ';
+    const queryAvail = contentW - getDisplayWidth(searchLabel);
+    const queryText = fitDisplay(picker.searchQuery, queryAvail);
+    putOverlayText(searchLine, layout.margin + 2, getDisplayWidth(searchLabel), searchLabel, { fg: titleFg });
+    putOverlayText(searchLine, layout.margin + 2 + getDisplayWidth(searchLabel), queryAvail, queryText, { fg: titleFg });
+    lines.push(searchLine);
+
+    lines.push(createOverlayBorderLine(width, layout, '├', '─', '┤', borderFg));
+  } else {
+    const placeholder = ' Browse by category or start typing to filter by panel name, purpose, or category.';
+    const row = createOverlayContentLine(width, layout, borderFg);
+    putOverlayText(row, layout.margin + 2, contentW, fitDisplay(placeholder, contentW), { fg: '244', dim: true });
+    lines.push(row);
+  }
+
+  const visible = picker.getVisible();
+
+  if (visible.length === 0) {
+    const noResults = 'No panels match your search';
+    const noRow = createOverlayContentLine(width, layout, borderFg);
+    putOverlayText(noRow, layout.margin + 2, contentW, fitDisplay(noResults, contentW), { fg: '244', dim: true });
+    lines.push(noRow);
+  } else {
+    // Build a flat render list of { type: 'header' | 'item', ... } entries
+    // so we can compute the correct scroll window over all rows.
+    type HeaderEntry = { type: 'header'; category: PanelCategory };
+    type ItemEntry   = { type: 'item';   reg: PanelRegistration; flatIndex: number };
+    type RenderEntry = HeaderEntry | ItemEntry;
+
+    const renderEntries: RenderEntry[] = [];
+
+    // When no search query, group by category; when searching, show flat list
+    // with a single "Results" header.
+    if (picker.searchQuery.length === 0) {
+      const byCategory = new Map<PanelCategory, PanelRegistration[]>();
+      for (const reg of visible) {
+        const group = byCategory.get(reg.category) ?? [];
+        group.push(reg);
+        byCategory.set(reg.category, group);
+      }
+      let flatIndex = 0;
+      for (const cat of CATEGORY_ORDER) {
+        const group = byCategory.get(cat);
+        if (!group || group.length === 0) continue;
+        renderEntries.push({ type: 'header', category: cat });
+        for (const reg of group) {
+          renderEntries.push({ type: 'item', reg, flatIndex });
+          flatIndex++;
+        }
+      }
+    } else {
+      for (let i = 0; i < visible.length; i++) {
+        renderEntries.push({ type: 'item', reg: visible[i], flatIndex: i });
+      }
+    }
+
+    // Compute scroll window: ensure the selected item row stays visible.
+    // Find the render-entry index of the selected item.
+    const selectedEntryIdx = renderEntries.findIndex(
+      e => e.type === 'item' && e.flatIndex === picker.selectedIndex,
+    );
+    const total = renderEntries.length;
+    const maxVisible = metrics.contentRows;
+    let startEntry = 0;
+    if (total > maxVisible && selectedEntryIdx >= 0) {
+      startEntry = Math.max(
+        0,
+        Math.min(
+          selectedEntryIdx - Math.floor(maxVisible / 2),
+          total - maxVisible,
+        ),
+      );
+    }
+    const endEntry = Math.min(startEntry + maxVisible, total);
+
+    for (let i = startEntry; i < endEntry; i++) {
+      const entry = renderEntries[i];
+
+      if (entry.type === 'header') {
+        // Category header row
+        const label = CATEGORY_LABELS[entry.category].toUpperCase();
+        const headerRow = createOverlayContentLine(width, layout, borderFg);
+        putOverlayText(headerRow, layout.margin + 2, contentW, fitDisplay(`  ${label}`, contentW), { fg: CATEGORY_FG, dim: true });
+        lines.push(headerRow);
+      } else {
+        const { reg, flatIndex } = entry;
+        const isSelected = flatIndex === picker.selectedIndex;
+        const indicator = isSelected ? '\u25b6 ' : '  ';
+
+        // icon (1 char) + 2 spaces + name
+        const iconStr = reg.icon + '  ';
+        const iconW = getDisplayWidth(iconStr);
+
+        // separator between name and description: ' \u2014 '
+        const sep = ' \u2014 ';
+        const sepW = getDisplayWidth(sep);
+
+        // Allocate space: indicator(2) + icon(iconW) + name + sep + desc fills contentW
+        const nameMaxW = Math.max(8, Math.floor((contentW - 2 - iconW - sepW) * 0.35));
+        const descMaxW = contentW - 2 - iconW - nameMaxW - sepW;
+
+        const nameRaw = reg.name;
+        const nameStr = fitDisplay(nameRaw, nameMaxW);
+
+        const descRaw = reg.description;
+        const descStr = fitDisplay(descRaw, descMaxW);
+
+        const row = createOverlayContentLine(width, layout, borderFg, isSelected ? SELECTED_BG : '');
+        const rowText = indicator + iconStr + nameStr + sep + descStr;
+        putOverlayText(row, layout.margin + 2, contentW, fitDisplay(truncateDisplay(rowText, contentW), contentW), {
+          fg: isSelected ? SELECTED_FG : BODY_FG,
+          bg: isSelected ? SELECTED_BG : '',
+          bold: isSelected,
+        });
+        lines.push(row);
+      }
+    }
+
+    const selected = picker.getSelected();
+    if (selected) {
+      lines.push(createOverlayBorderLine(width, layout, '├', '─', '┤', borderFg));
+      const categoryLabel = CATEGORY_LABELS[selected.category].toUpperCase();
+      const selectedLine = createOverlayContentLine(width, layout, borderFg);
+      putOverlayText(selectedLine, layout.margin + 2, contentW, fitDisplay(`${selected.icon} ${selected.name}  [${categoryLabel}]`, contentW), { fg: SELECTED_FG });
+      lines.push(selectedLine);
+      const desc = fitDisplay(truncateDisplay(selected.description, contentW), contentW);
+      const descRow = createOverlayContentLine(width, layout, borderFg);
+      putOverlayText(descRow, layout.margin + 2, contentW, desc, { fg: '244', dim: true });
+      lines.push(descRow);
+    }
+
+    // ── Scroll indicator ───────────────────────────────────────────────────
+    if (total > maxVisible) {
+      const scrollInfo = `${picker.selectedIndex + 1}/${visible.length}`;
+      const scrollRow = createOverlayContentLine(width, layout, borderFg);
+      putOverlayText(scrollRow, layout.margin + 2 + Math.max(0, contentW - getDisplayWidth(scrollInfo)), getDisplayWidth(scrollInfo), scrollInfo, { fg: '240', dim: true });
+      lines.push(scrollRow);
+    }
+  }
+
+  // ── Bottom border with hints ───────────────────────────────────────────────
+  const hints = '[Up/Down] Navigate  [Enter] Open  [/] Filter  [Esc] Cancel';
+  const bottomLine = createOverlayBorderLine(width, layout, '└', '─', '┘', borderFg);
+  putOverlayText(bottomLine, layout.margin + 2, layout.width - 4, truncateDisplay(hints, layout.width - 4), { fg: '240', dim: true });
+  lines.push(bottomLine);
+
+  return lines;
+}

package/src/renderer/panel-tab-bar.ts

@@ -0,0 +1,69 @@
+import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Panel } from '../panels/types.ts';
+import { renderTabStrip } from './tab-strip.ts';
+
+const ACTIVE_FG = '#e2e8f0';
+const ACTIVE_FG_UNFOCUSED = '#94a3b8';
+const ACTIVE_BG = '#1e293b';
+const INACTIVE_FG = '244';
+const SEPARATOR_FG = '238';
+const CLOSE_FG = '238';
+const LABEL_FG = '#cbd5e1';
+const LABEL_BG = '#0f172a';
+
+/**
+ * Render the panel tab bar.
+ *
+ * Shows open panel tabs with the active one highlighted.
+ * Format: │ icon Name │ icon Name │ ...
+ *
+ * Active tab:   slate-white, bold, bg #1e293b
+ * Inactive tab: grey (244), no background
+ * Separators:   │ in dim grey (238)
+ * Overflow:     > right scroll indicator (stateless - shows when tabs extend beyond width)
+ * Close button: x at far right for active tab
+ */
+export function renderPanelTabBar(
+  panels: Panel[],
+  activeIndex: number,
+  width: number,
+  focused: boolean = true,
+  paneLabel?: string,
+): Line {
+  if (panels.length === 0) return renderTabStrip({ width, tabs: [], style: {
+    activeFg: ACTIVE_FG,
+    activeBg: ACTIVE_BG,
+    activeBold: focused,
+    inactiveFg: INACTIVE_FG,
+    separatorFg: SEPARATOR_FG,
+    labelFg: LABEL_FG,
+    labelBg: focused ? LABEL_BG : '',
+    labelBold: focused,
+    overflowFg: SEPARATOR_FG,
+    trailingFg: focused ? ACTIVE_FG_UNFOCUSED : INACTIVE_FG,
+  } });
+
+  const tabs = panels.map((panel, index) => ({
+    label: `${panel.icon} ${panel.name}`,
+    active: index === activeIndex,
+  }));
+
+  return renderTabStrip({
+    width,
+    tabs,
+    prefixLabel: paneLabel ? ` ${paneLabel.toUpperCase()} ` : undefined,
+    suffixLabel: ` ${panels.length}  x `,
+    style: {
+      activeFg: focused ? ACTIVE_FG : ACTIVE_FG_UNFOCUSED,
+      activeBg: ACTIVE_BG,
+      activeBold: focused,
+      inactiveFg: INACTIVE_FG,
+      separatorFg: SEPARATOR_FG,
+      labelFg: LABEL_FG,
+      labelBg: focused ? LABEL_BG : '',
+      labelBold: focused,
+      overflowFg: SEPARATOR_FG,
+      trailingFg: CLOSE_FG,
+    },
+  });
+}

package/src/renderer/panel-workspace-bar.ts

@@ -0,0 +1,38 @@
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { WorkspaceTab } from '../panels/panel-manager.ts';
+import { renderTabStrip } from './tab-strip.ts';
+
+const ACTIVE_FG = '#e2e8f0';
+const ACTIVE_BG = '#0f172a';
+const INACTIVE_FG = '#94a3b8';
+const SEPARATOR_FG = '238';
+const LABEL_FG = '#cbd5e1';
+const LABEL_BG = '#1e293b';
+
+export function renderPanelWorkspaceBar(
+  tabs: readonly WorkspaceTab[],
+  width: number,
+  focused: boolean,
+): Line {
+  return renderTabStrip({
+    width,
+    tabs: tabs.map((tab) => ({
+      label: `${tab.pane === 'bottom' ? 'v' : '^'} ${tab.icon} ${tab.name}`,
+      active: tab.active,
+    })),
+    prefixLabel: ' PANELS ',
+    suffixLabel: ` ${tabs.length} `,
+    style: {
+      activeFg: ACTIVE_FG,
+      activeBg: ACTIVE_BG,
+      activeBold: focused,
+      inactiveFg: INACTIVE_FG,
+      separatorFg: SEPARATOR_FG,
+      labelFg: LABEL_FG,
+      labelBg: focused ? LABEL_BG : '',
+      labelBold: focused,
+      overflowFg: SEPARATOR_FG,
+      trailingFg: INACTIVE_FG,
+    },
+  });
+}

package/src/renderer/process-indicator.ts

@@ -0,0 +1,96 @@
+import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { GLYPHS } from './ui-primitives.ts';
+
+/** Truncate a string to fit within maxWidth display columns. */
+function truncateToWidth(text: string, maxWidth: number): string {
+  let width = 0;
+  let i = 0;
+  for (const char of text) {
+    const cw = getDisplayWidth(char);
+    if (width + cw > maxWidth) break;
+    width += cw;
+    i += char.length;
+  }
+  return text.slice(0, i);
+}
+
+/**
+ * renderProcessIndicator — shows a one-line summary of active background
+ * processes below the input area.
+ *
+ * Dimmed when no processes are active, highlighted (cyan) when agents or
+ * background exec processes are running. Includes an `Enter to view` hint
+ * when active.
+ */
+export function renderProcessIndicator(
+  width: number,
+  agentCount: number,
+  toolCount: number,
+  focused: boolean = false,
+  agentProgress?: string,
+): Line[] {
+  const total = agentCount + toolCount;
+  const renderPlainStatus = (text: string, style: { fg: string; bold?: boolean; dim?: boolean }): Line[] => (
+    [UIFactory.stringToLine(`   ${text}`, width, style)]
+  );
+  const renderFocusedStatus = (text: string): Line[] => {
+    const bg = '#31506f';
+    const fg = '#eefaff';
+    const markerFg = '#7dd3fc';
+    const line = UIFactory.stringToLine(' '.repeat(width), width, { fg: '238' });
+    const prefix = `${GLYPHS.navigation.selected} `;
+    const body = truncateToWidth(text, Math.max(0, width - 8));
+    const highlighted = ` ${prefix}${body} `;
+    const startX = 2;
+    for (let i = 0; i < highlighted.length && startX + i < width - 2; i++) {
+      const ch = highlighted[i]!;
+      const isMarker = i < prefix.length + 1;
+      line[startX + i].char = ch;
+      line[startX + i].fg = isMarker ? markerFg : fg;
+      line[startX + i].bg = bg;
+      line[startX + i].bold = true;
+      line[startX + i].dim = false;
+    }
+    return [line];
+  };
+
+  // --- Focused state: always render before idle/active branches ---
+  if (focused) {
+    const parts: string[] = [];
+    if (agentCount > 0) parts.push(`${agentCount} agent${agentCount !== 1 ? 's' : ''}`);
+    if (toolCount > 0) parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
+    const label = total === 0
+      ? `No background processes  ${GLYPHS.status.pending}  back to input`
+      : `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}  ${GLYPHS.status.pending}  Enter to open  ${GLYPHS.status.pending}  back to input`;
+    return renderFocusedStatus(label);
+  }
+
+  if (total === 0) {
+    return renderPlainStatus('No background processes', { fg: '238', dim: true });
+  }
+
+  // Build the label: "bg: 2 agents | Turn 3 | write - src/foo.ts"
+  const parts: string[] = [];
+  if (agentCount > 0) {
+    parts.push(`${agentCount} agent${agentCount !== 1 ? 's' : ''}`);
+  }
+  if (toolCount > 0) {
+    parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
+  }
+  // Append the first running agent's progress (truncated to fit)
+  /**
+   * Number of columns reserved for the agent count label and hint text.
+   * Breakdown: "bg: N agents" prefix (~15 chars) + " | " separator (~3)
+   * + "  Enter to view  " hint (~17) + padding (~8) ≈ 43 chars.
+   */
+  const PROGRESS_RESERVED_CHARS = 43;
+  const progressMaxLen = Math.max(0, width - PROGRESS_RESERVED_CHARS); // reserve space for count + hint
+  const progressSuffix = agentProgress && progressMaxLen > 10
+    ? ` | ${agentProgress.length > progressMaxLen ? agentProgress.slice(0, Math.max(0, progressMaxLen - 3)) + '...' : agentProgress}`
+    : '';
+  const label = `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}${progressSuffix}`;
+  const hint = `  ${GLYPHS.status.pending}  Enter to view`;
+  return renderPlainStatus(`${label}${hint}`, { fg: '#00ffff', bold: true });
+}