agentvibes 3.5.9 → 4.0.0

package/src/console/tabs/placeholder-tab.js

@@ -0,0 +1,45 @@
+/**
+ * AgentVibes TUI Console — Placeholder Tab Component
+ * Story 6.2: Tab Bar & Global Keyboard Navigation
+ *
+ * Creates a stub content box for each tab ID.
+ * These are replaced by real tab implementations in Epics 7-11.
+ */
+
+import blessed from 'blessed';
+
+/**
+ * Create a hidden placeholder box for a tab, appended into the content area.
+ *
+ * @param {object} contentArea - Blessed box to append into (this.contentArea from app.js)
+ * @param {string} label - Human-readable tab name for display (e.g. 'Settings')
+ * @returns {object} The created Blessed box widget
+ */
+export function createPlaceholderTab(contentArea, label) {
+  const box = blessed.box({
+    parent: contentArea,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    content: `{center}{bold}${label}{/bold}{/center}\n\n{center}Coming in a future story...{/center}`,
+    tags: true,
+    hidden: true,
+    style: {
+      fg: '#90a4ae',
+      bg: '#0a0e1a',
+    },
+  });
+
+  return box;
+}
+
+/** Map of tabId → display label for all 7 tabs */
+export const TAB_DISPLAY_LABELS = {
+  settings: 'Settings',
+  voices:   'Voices',
+  music:    'Music',
+  readme:   'Readme',
+  help:     'Help',
+  install:  'Install',
+};

package/src/console/tabs/readme-tab.js

@@ -0,0 +1,267 @@
+/**
+ * AgentVibes TUI Console — Readme Tab
+ * Epic 13: Story 13.2
+ *
+ * Implements the Tab Component Contract:
+ *   createReadmeTab(screen, services) → { box, show, hide, onFocus, onBlur, getFooterText, getFooterColor }
+ *
+ * Features: renders README.md with styled markdown, scrolling, search.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+const IS_TEST = process.env.AGENTVIBES_TEST_MODE === 'true';
+
+let blessed;
+if (!IS_TEST) {
+  const { default: b } = await import('blessed');
+  blessed = b;
+}
+
+// ---------------------------------------------------------------------------
+
+const COLORS = {
+  contentBg:  '#0a0e1a',
+  h1Fg:       '#69f0ae',  // Green — H1
+  h2Fg:       '#82b1ff',  // Blue — H2
+  h3Fg:       '#80d8ff',  // Light blue — H3
+  codeFg:     '#ffff00',  // Yellow — code spans
+  boldFg:     '#e3f2fd',  // Bright — bold text
+  quoteFg:    '#90a4ae',  // Gray — blockquotes
+  labelFg:    '#e3f2fd',
+  borderFg:   '#455a64',
+  footerBg:   '#455a64',  // Dark gray — Readme tab footer
+};
+
+const FOOTER_TEXT = '[↑↓/jk] Scroll  [PgUp/PgDn] Page  [/] Search  [S/V/M/A/R] Tab  [Q] Quit';
+
+// ---------------------------------------------------------------------------
+// Markdown renderer (story 13.2)
+
+/**
+ * Render a single markdown line to blessed tagged string.
+ * Handles: H1/H2/H3, bold (**), code spans (`), blockquotes (>), plain text.
+ *
+ * @param {string} line
+ * @returns {string}
+ */
+export function renderMarkdownLine(line) {
+  // H1
+  if (/^# /.test(line)) {
+    const text = line.replace(/^# /, '');
+    return `{bold}{${COLORS.h1Fg}-fg}${text}{/${COLORS.h1Fg}-fg}{/bold}`;
+  }
+  // H2
+  if (/^## /.test(line)) {
+    const text = line.replace(/^## /, '');
+    return `{bold}{${COLORS.h2Fg}-fg}${text}{/${COLORS.h2Fg}-fg}{/bold}`;
+  }
+  // H3
+  if (/^### /.test(line)) {
+    const text = line.replace(/^### /, '');
+    return `{${COLORS.h3Fg}-fg}${text}{/${COLORS.h3Fg}-fg}`;
+  }
+  // Blockquote
+  if (/^> /.test(line)) {
+    const text = line.replace(/^> /, '');
+    return `{${COLORS.quoteFg}-fg}│ ${text}{/${COLORS.quoteFg}-fg}`;
+  }
+  // Horizontal rule
+  if (/^---+$/.test(line.trim())) {
+    return `{${COLORS.quoteFg}-fg}${'─'.repeat(66)}{/${COLORS.quoteFg}-fg}`;
+  }
+
+  // Inline: code spans, bold
+  let result = line;
+  // Escape existing blessed tags (literal braces in content)
+  // Code spans: `text`
+  result = result.replace(/`([^`]+)`/g, `{${COLORS.codeFg}-fg}$1{/${COLORS.codeFg}-fg}`);
+  // Bold: **text**
+  result = result.replace(/\*\*([^*]+)\*\*/g, `{bold}$1{/bold}`);
+  // Italic: *text*
+  result = result.replace(/\*([^*]+)\*/g, `{${COLORS.h3Fg}-fg}$1{/${COLORS.h3Fg}-fg}`);
+
+  return result;
+}
+
+/**
+ * Render full markdown content to blessed tagged multi-line string.
+ * @param {string} markdown
+ * @returns {string}
+ */
+export function renderMarkdown(markdown) {
+  return markdown
+    .split('\n')
+    .map(line => renderMarkdownLine(line))
+    .join('\n');
+}
+
+// ---------------------------------------------------------------------------
+
+function createTestStub() {
+  return {
+    box: {},
+    show: () => {},
+    hide: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    getFooterText: () => FOOTER_TEXT,
+    getFooterColor: () => COLORS.footerBg,
+  };
+}
+
+// ---------------------------------------------------------------------------
+
+/**
+ * Create the Readme tab component.
+ *
+ * @param {object} screen   - Blessed screen instance
+ * @param {object} services
+ * @returns {{ box, show, hide, onFocus, onBlur, getFooterText, getFooterColor }}
+ */
+export function createReadmeTab(screen, services) {
+  if (IS_TEST) return createTestStub();
+
+  const { focusMainTabBar } = services;
+
+  // -------------------------------------------------------------------------
+  // Container
+
+  const box = blessed.box({
+    parent: screen,
+    top: 4,
+    left: 0,
+    width: '100%',
+    bottom: 2,
+    hidden: true,
+    style: { fg: COLORS.labelFg, bg: COLORS.contentBg },
+    border: { type: 'line' },
+    borderStyle: { fg: COLORS.borderFg },
+  });
+
+  // -------------------------------------------------------------------------
+  // Load README.md
+
+  function _loadReadme() {
+    const candidates = [
+      path.resolve(process.cwd(), 'README.md'),
+      path.resolve(process.cwd(), 'readme.md'),
+    ];
+    for (const p of candidates) {
+      if (fs.existsSync(p)) {
+        try {
+          return fs.readFileSync(p, 'utf8');
+        } catch {
+          // Unreadable
+        }
+      }
+    }
+    return '# README\n\n*(No README.md found in current directory)*';
+  }
+
+  // -------------------------------------------------------------------------
+  // Scrollable content
+
+  const scrollBox = blessed.box({
+    parent: box,
+    top: 1,
+    left: 2,
+    width: '96%',
+    bottom: 4,
+    scrollable: true,
+    alwaysScroll: true,
+    tags: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    scrollbar: { ch: '│', style: { fg: COLORS.borderFg } },
+    content: '',
+    style: { fg: COLORS.labelFg, bg: COLORS.contentBg },
+  });
+
+  // Scroll indicator
+  const scrollIndicator = blessed.text({
+    parent: box,
+    bottom: 2,
+    right: 2,
+    content: '',
+    tags: true,
+    style: { fg: COLORS.quoteFg, bg: COLORS.contentBg },
+  });
+
+  // -------------------------------------------------------------------------
+  // Render
+
+  function refreshContent() {
+    const markdown = _loadReadme();
+    const rendered = renderMarkdown(markdown);
+    scrollBox.setContent(rendered);
+    scrollIndicator.setContent('{#607d8b-fg}↓ Scroll for more content ↓{/#607d8b-fg}');
+    screen.render();
+  }
+
+  // Scroll events update indicator
+  scrollBox.on('scroll', () => {
+    const atBottom = scrollBox.getScrollPerc() >= 99;
+    scrollIndicator.setContent(
+      atBottom ? '' : '{#607d8b-fg}↓ Scroll for more content ↓{/#607d8b-fg}'
+    );
+    screen.render();
+  });
+
+  // PgUp/PgDn
+  scrollBox.key(['pageup'], () => {
+    scrollBox.scroll(-10);
+    screen.render();
+  });
+  scrollBox.key(['pagedown'], () => {
+    scrollBox.scroll(10);
+    screen.render();
+  });
+
+  // [↑] at top of content → jump to main header tab bar
+  scrollBox.key(['up'], () => {
+    if (scrollBox.getScroll() === 0 && typeof focusMainTabBar === 'function') {
+      focusMainTabBar();
+    }
+  });
+
+  // Escape → return to header tab bar
+  scrollBox.key(['escape'], () => {
+    if (typeof focusMainTabBar === 'function') { focusMainTabBar(); screen.render(); }
+  });
+
+  // -------------------------------------------------------------------------
+  // Tab Component Contract
+
+  return {
+    box,
+
+    show() {
+      box.show();
+      refreshContent();
+      screen.render();
+    },
+
+    hide() {
+      box.hide();
+      screen.render();
+    },
+
+    onFocus() {
+      scrollBox.focus();
+      screen.render();
+    },
+
+    onBlur() {},
+
+    getFooterText() {
+      return FOOTER_TEXT;
+    },
+
+    getFooterColor() {
+      return COLORS.footerBg;
+    },
+  };
+}