@pellux/goodvibes-agent 0.1.0

package/src/renderer/autocomplete-overlay.ts

@@ -0,0 +1,154 @@
+import { type Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import type { AutocompleteEngine } from '../input/autocomplete.ts';
+import {
+  createOverlayBorderLine,
+  createOverlayBoxLayout,
+  createOverlayContentLine,
+  DEFAULT_OVERLAY_PALETTE,
+  putOverlayText,
+} from './overlay-box.ts';
+import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
+
+const BORDER_FG = DEFAULT_OVERLAY_PALETTE.borderFg;
+const TITLE_FG = DEFAULT_OVERLAY_PALETTE.titleFg;
+const BODY_FG = DEFAULT_OVERLAY_PALETTE.bodyFg;
+const MUTED_FG = DEFAULT_OVERLAY_PALETTE.mutedFg;
+const SELECTED_BG = DEFAULT_OVERLAY_PALETTE.selectedBg;
+
+interface CellStyle {
+  fg: string;
+  bg?: string;
+  bold?: boolean;
+  dim?: boolean;
+}
+
+function putText(line: Line, startX: number, maxWidth: number, text: string, style: CellStyle): void {
+  putOverlayText(line, startX, maxWidth, text, style);
+}
+
+/**
+ * Render the slash command autocomplete dropdown as Line[] for overlay in the viewport.
+ */
+export function renderAutocompleteOverlay(
+  autocomplete: AutocompleteEngine,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const state = autocomplete.getState();
+  if (!state.active || state.results.length === 0) return [];
+
+  const lines: Line[] = [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    margin: 2,
+    maxWidth: 88,
+    chromeRows: 4,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
+
+  lines.push(createOverlayBorderLine(width, layout, '┌', '─', '┐', BORDER_FG));
+
+  const titleLine = createOverlayContentLine(width, layout);
+  const titleText = ' Commands';
+  const queryText = state.query ? `/${state.query}` : '/';
+  const queryWidth = Math.min(Math.floor(layout.innerWidth / 2), Math.max(8, layout.innerWidth - getDisplayWidth(titleText) - 2));
+  const leftText = fitDisplay(titleText, Math.max(0, layout.innerWidth - queryWidth));
+  const rightText = truncateDisplay(queryText, queryWidth);
+  putText(titleLine, layout.margin + 2, layout.innerWidth - queryWidth, leftText, { fg: TITLE_FG, bold: true });
+  putText(
+    titleLine,
+    layout.margin + 2 + layout.innerWidth - queryWidth,
+    queryWidth,
+    fitDisplay(rightText, queryWidth),
+    { fg: TITLE_FG, dim: true },
+  );
+  lines.push(titleLine);
+
+  const results = state.results;
+  const total = results.length;
+  const maxVisible = metrics.contentRows;
+  let startIdx = 0;
+  if (total > maxVisible) {
+    startIdx = Math.max(
+      0,
+      Math.min(
+        state.selectedIndex - Math.floor(maxVisible / 2),
+        total - maxVisible,
+      ),
+    );
+  }
+  const endIdx = Math.min(startIdx + maxVisible, total);
+
+  const indicatorWidth = 2;
+  const maxCommandWidth = Math.min(18, Math.max(10, Math.floor(layout.innerWidth * 0.28)));
+  const gapWidth = 2;
+  const descWidth = Math.max(0, layout.innerWidth - indicatorWidth - maxCommandWidth - gapWidth);
+
+  for (let i = startIdx; i < endIdx; i++) {
+    const { command } = results[i];
+    const isSelected = i === state.selectedIndex;
+    const line = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : '');
+    const indicator = isSelected ? '▸ ' : '  ';
+    const commandText = fitDisplay(
+      truncateDisplay(`/${command.name}`, maxCommandWidth),
+      maxCommandWidth,
+    );
+    const descriptionText = fitDisplay(
+      truncateDisplay(command.description, descWidth),
+      descWidth,
+    );
+    let x = layout.margin + 2;
+    putText(line, x, indicatorWidth, indicator, {
+      fg: isSelected ? TITLE_FG : MUTED_FG,
+      bg: isSelected ? SELECTED_BG : '',
+      bold: isSelected,
+    });
+    x += indicatorWidth;
+    putText(line, x, maxCommandWidth, commandText, {
+      fg: isSelected ? TITLE_FG : BODY_FG,
+      bg: isSelected ? SELECTED_BG : '',
+      bold: isSelected,
+    });
+    x += maxCommandWidth;
+    putText(line, x, gapWidth, '  ', {
+      fg: BODY_FG,
+      bg: isSelected ? SELECTED_BG : '',
+    });
+    x += gapWidth;
+    putText(line, x, descWidth, descriptionText, {
+      fg: isSelected ? BODY_FG : MUTED_FG,
+      bg: isSelected ? SELECTED_BG : '',
+      bold: false,
+    });
+    lines.push(line);
+  }
+
+  if (total > maxVisible) {
+      const scrollLine = createOverlayContentLine(width, layout);
+    const scrollText = `${state.selectedIndex + 1}/${total}`;
+    putText(
+      scrollLine,
+      layout.margin + 2 + Math.max(0, layout.innerWidth - getDisplayWidth(scrollText)),
+      getDisplayWidth(scrollText),
+      scrollText,
+      { fg: MUTED_FG, dim: true },
+    );
+    lines.push(scrollLine);
+  }
+
+  const footerLine = createOverlayContentLine(width, layout);
+  const hints = '[Tab] Complete  [Up/Down] Navigate  [Enter] Execute  [Esc] Cancel';
+  putText(
+    footerLine,
+    layout.margin + 2,
+    layout.innerWidth,
+    fitDisplay(truncateDisplay(hints, layout.innerWidth), layout.innerWidth),
+    { fg: MUTED_FG, dim: true },
+  );
+  lines.push(footerLine);
+
+  lines.push(createOverlayBorderLine(width, layout, '└', '─', '┘', BORDER_FG));
+  return lines;
+}

package/src/renderer/block-actions.ts

@@ -0,0 +1,76 @@
+import type { BlockMeta } from '../core/conversation';
+
+export type BlockActionId = 'copy' | 'bookmark' | 'toggle' | 'apply' | 'rerun';
+
+export interface BlockAction {
+  id: BlockActionId;
+  label: string;
+  key: string;
+}
+
+const ALL_ACTIONS: BlockAction[] = [
+  { id: 'copy',     label: 'Copy',           key: 'c' },
+  { id: 'bookmark', label: 'Bookmark',       key: 'b' },
+  { id: 'toggle',   label: 'Collapse/Expand',key: 'Tab' },
+  { id: 'apply',    label: 'Apply diff',     key: 'a' },
+  { id: 'rerun',    label: 'Re-run tool',    key: 'r' },
+];
+
+/**
+ * BlockActionsMenu - Lightweight overlay that shows available actions
+ * for the block the cursor is currently on.
+ *
+ * Activated by pressing Enter on a block in the conversation.
+ * Dismissed by Esc or by selecting an action.
+ */
+export class BlockActionsMenu {
+  public active = false;
+  public selectedIndex = 0;
+  public actions: BlockAction[] = [];
+  public block: BlockMeta | null = null;
+
+  /**
+   * open - Show the menu for the given block.
+   * Filters available actions by block type.
+   */
+  open(block: BlockMeta): void {
+    this.block = block;
+    this.actions = ALL_ACTIONS.filter(a => {
+      if (a.id === 'apply') return block.type === 'diff';
+      if (a.id === 'rerun') return block.type === 'tool';
+      return true;
+    });
+    this.selectedIndex = 0;
+    this.active = true;
+  }
+
+  close(): void {
+    this.active = false;
+    this.block = null;
+    this.actions = [];
+    this.selectedIndex = 0;
+  }
+
+  moveUp(): void {
+    if (this.actions.length === 0) return;
+    this.selectedIndex = (this.selectedIndex - 1 + this.actions.length) % this.actions.length;
+  }
+
+  moveDown(): void {
+    if (this.actions.length === 0) return;
+    this.selectedIndex = (this.selectedIndex + 1) % this.actions.length;
+  }
+
+  getSelected(): BlockAction | null {
+    return this.actions[this.selectedIndex] ?? null;
+  }
+
+  /**
+   * getActionForKey - Return the action matching a single key press, or null.
+   * Handles 'tab' as 'Tab'.
+   */
+  getActionForKey(key: string): BlockAction | null {
+    const k = key === 'tab' ? 'Tab' : key;
+    return this.actions.find(a => a.key === k) ?? null;
+  }
+}

package/src/renderer/bookmark-modal.ts

@@ -0,0 +1,101 @@
+/**
+ * renderBookmarkModal — renders the /bookmarks modal as Line[] using ModalFactory.
+ *
+ * Shows a list of bookmarked blocks with:
+ *   - label (block type + excerpt)
+ *   - timestamp (human-readable time)
+ * Footer hints: [Up/Down] Navigate  [Enter] Jump  [o] Open File  [d] Remove  [Esc] Close
+ */
+
+import { type Line } from '../types/grid.ts';
+import { ModalFactory } from './modal-factory.ts';
+import { BookmarkModal } from '../input/bookmark-modal.ts';
+import type { BookmarkEntry } from '@pellux/goodvibes-sdk/platform/bookmarks';
+import { getOverlayContentBudget, getStableOverlayContentRows } from './overlay-viewport.ts';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function entryLabel(entry: BookmarkEntry): string {
+  const time = formatTime(entry.timestamp);
+  // Pad the key to a consistent width (truncated to 28 chars)
+  const keyPart = entry.key.length > 28
+    ? entry.key.slice(0, 25) + '...'
+    : entry.key.padEnd(28);
+  const labelPart = entry.label.length > 30
+    ? entry.label.slice(0, 27) + '...'
+    : entry.label;
+  return `${keyPart}  ${labelPart}  ${time}`;
+}
+
+// ---------------------------------------------------------------------------
+// Renderer
+// ---------------------------------------------------------------------------
+
+/**
+ * Render the bookmark modal as Line[] for overlay in the viewport.
+ *
+ * @param modal  BookmarkModal state object.
+ * @param width  Terminal width.
+ */
+export function renderBookmarkModal(
+  modal: BookmarkModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const visRows = getOverlayContentBudget(viewportHeight, {
+    chromeRows: 5,
+    minContentRows: 5,
+    maxContentRows: 9,
+  });
+  const targetContentRows = getStableOverlayContentRows(visRows, 8);
+  modal.setVisibleRows(visRows);
+  const visible = modal.entries.slice(modal.scrollOffset, modal.scrollOffset + visRows);
+  const relSelected = Math.max(0, modal.selectedIndex - modal.scrollOffset);
+
+  const items = visible.length === 0
+    ? [{ label: 'No bookmarks - use Ctrl+B to bookmark a block', selected: false }]
+    : visible.map((entry, i) => ({
+        label: entryLabel(entry),
+        selected: i === relSelected,
+      }));
+  const sections: import('./modal-factory.ts').ModalSection[] = [
+    {
+      type: 'text',
+      content: '  Key                            Label                           Time',
+      style: { dim: true },
+    },
+    { type: 'separator' },
+    { type: 'list', items },
+  ];
+  if (modal.entries.length > visRows) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: `[${modal.scrollOffset + 1}-${Math.min(modal.entries.length, modal.scrollOffset + visRows)} of ${modal.entries.length}]`,
+      style: { fg: '244', dim: true },
+    });
+  }
+
+  // Scroll indicator in title
+  const totalStr = modal.entries.length > 0
+    ? `${modal.selectedIndex + 1}/${modal.entries.length}`
+    : '0';
+
+  return ModalFactory.createModal(
+    {
+      title: `Bookmarks  ${totalStr}`,
+      width: 80,
+      targetContentRows,
+      sections,
+      hints: ['Up/Down Navigate', 'Enter Jump', 'o Open file', 'd Remove', 'Esc Close'],
+    },
+    width,
+  );
+}

package/src/renderer/bottom-bar.ts

@@ -0,0 +1,58 @@
+import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+
+export interface BottomBarStyle {
+  readonly fg: string;
+  readonly bg: string;
+  readonly bold?: boolean;
+  readonly dim?: boolean;
+  readonly underline?: boolean;
+}
+
+export function createBottomBarLine(width: number, style: BottomBarStyle): Line {
+  const line = createEmptyLine(width);
+  for (let col = 0; col < width; col++) {
+    line[col] = createStyledCell(' ', {
+      fg: style.fg,
+      bg: style.bg,
+      bold: style.bold ?? false,
+      dim: style.dim ?? false,
+      underline: style.underline ?? false,
+    });
+  }
+  return line;
+}
+
+export function writeBottomBarText(
+  line: Line,
+  startX: number,
+  maxWidth: number,
+  text: string,
+  style: BottomBarStyle,
+): void {
+  let x = startX;
+  let used = 0;
+  for (const ch of text) {
+    const cellWidth = getDisplayWidth(ch);
+    if (cellWidth <= 0) continue;
+    if (used + cellWidth > maxWidth || x >= line.length) break;
+    line[x] = createStyledCell(ch, {
+      fg: style.fg,
+      bg: style.bg,
+      bold: style.bold ?? false,
+      dim: style.dim ?? false,
+      underline: style.underline ?? false,
+    });
+    if (cellWidth > 1 && x + 1 < line.length) {
+      line[x + 1] = createStyledCell(' ', {
+        fg: style.fg,
+        bg: style.bg,
+        bold: style.bold ?? false,
+        dim: style.dim ?? false,
+        underline: style.underline ?? false,
+      });
+    }
+    x += cellWidth;
+    used += cellWidth;
+  }
+}

package/src/renderer/buffer.ts

@@ -0,0 +1,113 @@
+import { type Line, type Cell, createEmptyLine, createEmptyCell } from '../types/grid.ts';
+
+/**
+ * TerminalBuffer - Represents a 2D grid of styled cells.
+ * Tracks a per-row dirty bitmap so the diff engine can skip rows that were
+ * never written in the current frame.
+ */
+export class TerminalBuffer {
+  public cells: Line[];
+  /** dirtyRows[y] is true if row y was written since the last reset(). */
+  public dirtyRows: boolean[];
+
+  constructor(public width: number, public height: number) {
+    this.cells = Array.from({ length: height }, () => createEmptyLine(width));
+    this.dirtyRows = new Array(height).fill(false);
+  }
+
+  public setCell(x: number, y: number, cell: Partial<Cell>): void {
+    if (y >= 0 && y < this.height && x >= 0 && x < this.width) {
+      // No-op guard: skip the dirty mark and allocation if every field in `cell`
+      // already matches the current cell value (idempotent write).
+      const current = this.cells[y][x]!;
+      let changed = false;
+      for (const k in cell) {
+        if ((cell as unknown as Record<string, unknown>)[k] !== (current as unknown as Record<string, unknown>)[k]) {
+          changed = true;
+          break;
+        }
+      }
+      if (!changed) return;
+      this.cells[y][x] = { ...current, ...cell };
+      this.dirtyRows[y] = true;
+    }
+  }
+
+  public getCell(x: number, y: number): Cell | undefined {
+    return this.cells[y]?.[x];
+  }
+
+  public blitLine(row: number, line: Line): void {
+    if (row >= 0 && row < this.height) {
+      const current = this.cells[row]!;
+      const next = createEmptyLine(this.width);
+      for (let x = 0; x < Math.min(line.length, this.width); x++) {
+        next[x] = { ...line[x]! };
+      }
+      if (linesEqual(current, next, this.width)) return;
+      this.cells[row] = next;
+      this.dirtyRows[row] = true;
+    }
+  }
+
+  public clone(): TerminalBuffer {
+    const newBuf = new TerminalBuffer(this.width, this.height);
+    newBuf.cells = this.cells.map(line => line.map(cell => ({ ...cell })));
+    newBuf.dirtyRows = [...this.dirtyRows];
+    return newBuf;
+  }
+
+  /**
+   * Reset all cells in-place to empty, reusing this buffer instance.
+   * If dimensions changed, reallocates cells array.
+   * Always clears the dirty bitmap.
+   */
+  public reset(width: number, height: number, source?: TerminalBuffer | null): void {
+    if (width !== this.width || height !== this.height) {
+      this.width = width;
+      this.height = height;
+      this.cells = Array.from({ length: height }, () => createEmptyLine(width));
+      this.dirtyRows = new Array(height).fill(false);
+    } else if (source && source.width === width && source.height === height) {
+      for (let y = 0; y < this.height; y++) {
+        this.cells[y] = source.cells[y]!.map(cell => ({ ...cell }));
+        this.dirtyRows[y] = false;
+      }
+    } else {
+      for (let y = 0; y < this.height; y++) {
+        const row = this.cells[y]!;
+        for (let x = 0; x < this.width; x++) {
+          row[x] = createEmptyCell();
+        }
+        this.dirtyRows[y] = false;
+      }
+    }
+  }
+
+  public clearDirty(): void {
+    this.dirtyRows.fill(false);
+  }
+}
+
+function linesEqual(left: Line, right: Line, width: number): boolean {
+  for (let x = 0; x < width; x++) {
+    const a = left[x];
+    const b = right[x];
+    if (!a && !b) continue;
+    if (!a || !b) return false;
+    if (
+      a.char !== b.char
+      || a.fg !== b.fg
+      || a.bg !== b.bg
+      || a.bold !== b.bold
+      || a.dim !== b.dim
+      || a.underline !== b.underline
+      || a.italic !== b.italic
+      || a.strikethrough !== b.strikethrough
+      || (a.link ?? '') !== (b.link ?? '')
+    ) {
+      return false;
+    }
+  }
+  return true;
+}