@pellux/goodvibes-agent 0.1.0

package/src/renderer/ui-factory.ts

@@ -0,0 +1,524 @@
+import { type Line, type Cell, createEmptyLine, createEmptyCell } from '../types/grid.ts';
+import { LAYOUT } from './layout.ts';
+import { VERSION } from '../version.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor } from '../utils/terminal-width.ts';
+import type { GitHeaderInfo } from './git-status.ts';
+import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
+import { GLYPHS } from './ui-primitives.ts';
+
+/** Number of frames before the animated gradient completes one full cycle. */
+const GRADIENT_CYCLE_FRAMES = 50;
+/** Number of frames before rotating to the next thinking phrase (~30 seconds at 80ms/frame). */
+const PHRASE_ROTATION_FRAMES = 375;
+
+/** Build the git segment string and its display width. Single source of truth for header layout. */
+function buildGitSegment(gitInfo: GitHeaderInfo): { text: string; width: number } {
+  const branch = ` git:${gitInfo.branch}`;
+  if (gitInfo.dirty) {
+    const text = `${branch} * `;
+    return { text, width: getDisplayWidth(text) };
+  }
+  if (gitInfo.ahead > 0 || gitInfo.behind > 0) {
+    const arrows = (gitInfo.ahead > 0 ? ` +${gitInfo.ahead}` : '') + (gitInfo.behind > 0 ? ` -${gitInfo.behind}` : '');
+    const text = `${branch}${arrows} `;
+    return { text, width: getDisplayWidth(text) };
+  }
+  const text = `${branch} `;
+  return { text, width: getDisplayWidth(text) };
+}
+
+/** Format a number: up to 999, then 1.0k, 1.0M, 1.0B, 1.0T */
+function fmtNum(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return (n / 1000).toFixed(1) + 'k';
+  if (n < 1_000_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n < 1_000_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
+  return (n / 1_000_000_000_000).toFixed(1) + 'T';
+}
+
+/**
+ * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
+ */
+export class UIFactory {
+  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo): Line[] {
+    const lines: Line[] = [];
+    const CYAN = '#00ffff';
+    const GREY = '244';
+    const TITLE_COLOR = '250';
+    const brand = ` GoodVibes `;
+    const ver = `v${VERSION} `;
+    const stats = ` ${model} `;
+    const prov = `(${provider}) `;
+    const line = createEmptyLine(width);
+    let curX = 0;
+    for (const char of brand) { line[curX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
+    for (const char of ver) { line[curX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
+    // Optional conversation title — shown after brand/ver, truncated to fit
+    if (title) {
+      const titleStr = `│ ${title} `;
+      // Reserve space for git info (if present) + model/provider on the right
+      const gitReserved = gitInfo ? buildGitSegment(gitInfo).width : 0;
+      const rightReserved = getDisplayWidth(stats + prov) + gitReserved;
+      const maxTitleW = width - curX - rightReserved - 1;
+      let displayTitle: string;
+      if (getDisplayWidth(titleStr) <= maxTitleW) {
+        displayTitle = titleStr;
+      } else {
+        let truncated = '';
+        let w = 0;
+        for (const ch of titleStr) {
+          const cw = getDisplayWidth(ch);
+          if (w + cw > maxTitleW - 3) { truncated += '...'; break; }
+          truncated += ch;
+          w += cw;
+        }
+        displayTitle = truncated;
+      }
+      for (const char of displayTitle) { if (curX < width) line[curX++] = { char, fg: TITLE_COLOR, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
+    }
+    // Build git info segment
+    let gitStr = '';
+    let gitFg = '238';
+    if (gitInfo) {
+      gitStr = buildGitSegment(gitInfo).text;
+      if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
+        gitFg = '220'; // yellow when dirty or out-of-sync
+      }
+    }
+    const rightSideText = stats + prov;
+    const rightSideW = getDisplayWidth(rightSideText) + getDisplayWidth(gitStr);
+    let rightX = width - rightSideW;
+    for (const char of gitStr) { if (rightX >= 0 && rightX < width) line[rightX++] = { char, fg: gitFg, bg: '', bold: false, dim: !gitInfo?.dirty && !(gitInfo?.ahead || gitInfo?.behind), underline: false, italic: false, strikethrough: false }; }
+    for (const char of stats) { if (rightX < width) line[rightX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
+    for (const char of prov) { if (rightX < width) line[rightX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
+    lines.push(line);
+    lines.push(this.stringToLine('━'.repeat(width), width, { fg: '244' }));
+    return lines;
+  }
+
+  /**
+   * createMessageBar - Renders a historical user message.
+   * Logic: Calculates the longest line to create a "hugging" block.
+   */
+  public static createMessageBar(
+    width: number, text: string,
+    bgColor = '#2a2a2a', textColor = '252', prefixStr = ' › ',
+    strikethrough = false
+  ): Line[] {
+    return renderConversationFragment(text, width, {
+      prefix: prefixStr,
+      prefixFg: '135',
+      text: textColor,
+      bodyBg: bgColor,
+      strikethrough,
+    });
+  }
+
+  /**
+   * createQueuedMessageFragment - Renders a dimmed message bar for queued prompts.
+   */
+  public static createQueuedMessageFragment(width: number, text: string): Line[] {
+    return renderConversationFragment(text, width, {
+      prefix: ' (...) ',
+      prefixFg: '135',
+      text: '240',
+      bodyBg: '#1a1a1a',
+      dim: true,
+    });
+  }
+
+  public static createFooter(
+    width: number,
+    prompt: string,
+    usage: { up: number; down: number; max?: number },
+    showExitNotice: boolean,
+    lastCopyTime: number,
+    model?: string,
+    toolCount?: number,
+    cursorPos?: number,
+    workingDir?: string,
+    provider?: string,
+    contextWindow?: number,
+    compactThreshold?: number,
+    dangerMode?: boolean,
+    lastInputTokens?: number,
+    commandArgsHint?: string,
+    hitlMode?: string,
+    promptFocused: boolean = true,
+    composerMode?: string,
+    composerStatus?: string,
+    composerFlags?: readonly string[],
+    composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
+  ): Line[] {
+    const lines: Line[] = [];
+    const promptLines = prompt.split('\n');
+    const TEXT_COLOR = promptFocused ? '252' : '246';
+    const BG_COLOR = promptFocused ? '#2a2a2a' : '#1f2430';
+    const BORDER_COLOR = BG_COLOR;
+    const boxMargin = 2; const boxWidth = width - (boxMargin * 2); const boxStartX = boxMargin;
+    const createBaseLine = () => {
+      const l = createEmptyLine(width);
+      for (let x = 0; x < width; x++) l[x].bg = '';
+      return l;
+    };
+    const topLine = createBaseLine();
+    for (let x = 0; x < boxWidth; x++) topLine[boxStartX + x] = { char: GLYPHS.surface.top, fg: BORDER_COLOR, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+    lines.push(topLine);
+    promptLines.forEach((text, i) => {
+      const contentW = boxWidth - 4;
+      const prefix = i === 0 ? ' › ' : '   ';
+      // Render text without cursor insertion — cursor is overlaid after
+      const rawText = `${prefix}${text}`;
+      const paddedText = fitDisplay(rawText, contentW);
+      const contentLine = createBaseLine();
+      for (let x = 0; x < boxWidth; x++) {
+        const char = (x >= 2 && x < boxWidth - 2) ? paddedText[x - 2] || ' ' : ' ';
+        contentLine[boxStartX + x] = {
+          char,
+          fg: (x < 5 && i === 0) ? (promptFocused ? '135' : '244') : TEXT_COLOR,
+          bg: BG_COLOR,
+          bold: false,
+          dim: !promptFocused,
+          underline: false,
+          italic: false,
+          strikethrough: false,
+        };
+      }
+
+      // Overlay cursor only while the prompt owns focus.
+      if (promptFocused && cursorPos !== undefined) {
+        let lineStart = 0;
+        for (let li = 0; li < i; li++) lineStart += promptLines[li].length + 1;
+        const posInLine = cursorPos - lineStart;
+        if (posInLine >= 0 && posInLine <= text.length) {
+          // Cursor column in cell coordinates: prefix width (3) + posInLine + box padding (2)
+          const cursorX = boxStartX + 2 + prefix.length + posInLine;
+          if (cursorX < boxStartX + boxWidth - 2) {
+            const cell = contentLine[cursorX];
+            // Invert: bright fg on the text bg, swap to make cursor visible
+            contentLine[cursorX] = {
+              char: cell.char === ' ' ? GLYPHS.surface.cursor : cell.char,
+              fg: cell.char === ' ' ? '252' : '#000000',
+              bg: cell.char === ' ' ? (promptFocused ? BG_COLOR : '#334155') : '#ffffff',
+              bold: false, dim: false, underline: false, italic: false, strikethrough: false
+            };
+          }
+        }
+      } else if (promptFocused && i === promptLines.length - 1) {
+        // No cursorPos provided — show block at end (fallback)
+        const endX = boxStartX + 2 + prefix.length + text.length;
+        if (endX < boxStartX + boxWidth - 2) {
+          contentLine[endX] = { char: GLYPHS.surface.cursor, fg: '252', bg: promptFocused ? BG_COLOR : '#334155', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+        }
+      }
+
+      // Overlay args hint: dim grey text after cursor on the last prompt line.
+      // Only shown when a commandArgsHint is provided and cursor is at the end of input.
+      if (commandArgsHint && i === promptLines.length - 1) {
+        // Determine where the cursor sits on this line
+        let cursorColOnLine: number;
+        if (cursorPos !== undefined) {
+          let lineStart = 0;
+          for (let li = 0; li < i; li++) lineStart += promptLines[li].length + 1;
+          cursorColOnLine = cursorPos - lineStart;
+        } else {
+          cursorColOnLine = text.length;
+        }
+        // Only show hint when cursor is at end of the last line (no args typed yet)
+        if (cursorColOnLine >= text.length) {
+          // Hint starts one cell after the cursor block
+          const hintStartX = boxStartX + 2 + prefix.length + text.length + 1;
+          const hintText = ' ' + commandArgsHint;
+          let hx = hintStartX;
+          for (const ch of hintText) {
+            if (hx >= boxStartX + boxWidth - 2) break;
+            contentLine[hx] = { char: ch, fg: '238', bg: BG_COLOR, bold: false, dim: true, underline: false, italic: false, strikethrough: false };
+            hx++;
+          }
+        }
+      }
+
+      lines.push(contentLine);
+    });
+    const bottomLine = createBaseLine();
+    for (let x = 0; x < boxWidth; x++) bottomLine[boxStartX + x] = { char: GLYPHS.surface.bottom, fg: BORDER_COLOR, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+    lines.push(bottomLine);
+    lines.push(createBaseLine());
+    const composerTokens: Array<{ text: string; fg: string; bold?: boolean; dim?: boolean }> = [];
+    if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: '#38bdf8', bold: true });
+    if (composerPendingRisk && composerPendingRisk !== 'none') {
+      const riskColor = composerPendingRisk === 'approval-wait'
+        ? '#f59e0b'
+        : composerPendingRisk === 'shell'
+          ? '#ef4444'
+          : composerPendingRisk === 'remote'
+            ? '#a78bfa'
+            : '#f59e0b';
+      composerTokens.push({ text: ` risk:${composerPendingRisk} `, fg: riskColor, bold: true });
+    }
+    if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
+    if (composerFlags && composerFlags.length > 0) composerTokens.push({ text: ` flags:${composerFlags.join(',')} `, fg: '244', dim: true });
+    if (composerTokens.length > 0) {
+      const postureLine = createBaseLine();
+      let px = 2;
+      for (const token of composerTokens) {
+        for (const ch of token.text) {
+          if (px >= width) break;
+          postureLine[px] = {
+            char: ch,
+            fg: token.fg,
+            bg: '',
+            bold: token.bold ?? false,
+            dim: token.dim ?? false,
+            underline: false,
+            italic: false,
+            strikethrough: false,
+          };
+          px += getDisplayWidth(ch);
+        }
+        if (px >= width) break;
+      }
+      lines.push(postureLine);
+      lines.push(createBaseLine());
+    }
+    const isRecentlyCopied = Date.now() - lastCopyTime < 2000;
+    // Token usage line
+    const u = usage as { input?: number; output?: number; cacheRead?: number; cacheWrite?: number; up?: number; down?: number };
+    const inp = u.input ?? u.up ?? 0;
+    const out = u.output ?? u.down ?? 0;
+    const cr = u.cacheRead ?? 0;
+    const cw = u.cacheWrite ?? 0;
+    const total = inp + out + cr + cw;
+    const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
+    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)} ]`;
+    const copiedNotice = isRecentlyCopied ? ` [COPIED] ` : '';
+    const statsLine = '  ' + tokenLine + ' '.repeat(Math.max(0, width - 4 - getDisplayWidth(tokenLine) - getDisplayWidth(copiedNotice))) + copiedNotice;
+    lines.push(this.stringToLine(statsLine, width, { fg: isRecentlyCopied ? '81' : '244', bold: isRecentlyCopied }));
+    // Context usage progress bar
+    if (contextWindow && contextWindow > 0) {
+      const ctxTokens = lastInputTokens ?? 0;
+      const label = '   Context Usage: ';
+      const suffix = ` [ ${fmtNum(ctxTokens)} / ${fmtNum(contextWindow)} ]`;
+      const barWidth = Math.max(10, Math.min(30, width - getDisplayWidth(label) - getDisplayWidth(suffix) - 8));
+      const ctxPct = Math.min(1, ctxTokens / contextWindow);
+      lines.push(createBaseLine());
+      lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix));
+    }
+    // Context info line (working dir, model+provider, tools)
+    if (workingDir || model) {
+      const home = typeof process !== 'undefined' ? process.env.HOME ?? '' : '';
+      const displayDir = workingDir && home && workingDir.startsWith(home)
+        ? '~' + workingDir.slice(home.length)
+        : workingDir ?? '';
+      const ctxParts: string[] = [];
+      if (displayDir) ctxParts.push(displayDir);
+      if (model) {
+        ctxParts.push(model + (provider ? ` (${provider})` : ''));
+      }
+      if (toolCount) ctxParts.push(`${toolCount} tools`);
+      if (hitlMode) ctxParts.push(`hitl:${hitlMode}`);
+      if (composerMode) ctxParts.push(`mode:${composerMode}`);
+      if (composerStatus && composerStatus !== 'idle') ctxParts.push(`status:${composerStatus}`);
+      if (composerFlags && composerFlags.length > 0) ctxParts.push(composerFlags.join(','));
+      const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
+      lines.push(createBaseLine());
+      lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
+      lines.push(createBaseLine());
+    }
+    if (showExitNotice) {
+      const notice = `   !!! Press Ctrl+C again to exit !!! `;
+      lines.push(this.stringToLine(fitDisplay(notice, width), width, { fg: '196', bold: true }));
+    } else {
+      const help = `   /help for commands  -  Ctrl+C to quit `;
+      const dangerWarn = dangerMode ? `! DANGER MODE - ALL CHANGES AUTO-APPROVED ` : '';
+      const helpW = getDisplayWidth(help);
+      const dangerW = getDisplayWidth(dangerWarn);
+      const spacerW = Math.max(0, width - helpW - dangerW);
+      const combinedLine = help + ' '.repeat(spacerW) + dangerWarn;
+      const line = this.stringToLine(truncateDisplay(combinedLine, width), width, { fg: '240', dim: true });
+      // Overlay the danger warning in red bold
+      if (dangerMode && dangerW > 0) {
+        let col = helpW + spacerW;
+        for (const ch of dangerWarn) {
+          if (col >= width) break;
+          const cw = getDisplayWidth(ch);
+          line[col] = { char: ch, fg: '#ef4444', bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
+          if (cw === 2 && col + 1 < width) line[col + 1] = { ...line[col], char: '' };
+          col += cw;
+        }
+      }
+      lines.push(line);
+    }
+    lines.push(createBaseLine());
+    return lines;
+  }
+
+  /** Rotating thinking phrases — vaporwave / good vibes themed. */
+  private static readonly THINKING_PHRASES = [
+    'Thinking...',
+    'Vibing...',
+    'Manifesting...',
+    'Channeling energy...',
+    'Tuning frequencies...',
+    'Riding the wave...',
+    'Aligning chakras...',
+    'Entering flow state...',
+    'Consulting the void...',
+    'Absorbing aesthetics...',
+    'Synthesizing vibes...',
+    'Transcending...',
+    'Dreaming in neon...',
+    'Parsing the cosmos...',
+    'Loading good vibes...',
+    'Meditating...',
+    'Catching a vibe...',
+    'Harmonizing...',
+    'Feeling it...',
+    'In the zone...',
+  ];
+
+  /** Gradient colors for thinking text — cyan to purple (matches splash). */
+  private static readonly THINK_GRADIENT_START = '#00ffff';
+  private static readonly THINK_GRADIENT_END = '#d000ff';
+
+  public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number): Line[] {
+    // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)
+    const phraseIndex = Math.floor(frame / PHRASE_ROTATION_FRAMES) % this.THINKING_PHRASES.length;
+    const phrase = this.THINKING_PHRASES[phraseIndex];
+    const speedSuffix = (tokenSpeed !== undefined && tokenSpeed > 0) ? ` (${Math.round(tokenSpeed)} tok/s)` : '';
+    const text = `  ${spinner} ${phrase}${speedSuffix} `;
+
+    const textWidth = Math.max(1, getDisplayWidth(text) - 1);
+    const segments: ConversationStatusSegment[] = Array.from(text).map((char, index) => {
+      const rawUnwrapped = (index / textWidth) - (frame % GRADIENT_CYCLE_FRAMES) * 0.02;
+      const raw = ((rawUnwrapped % 1.0) + 1.0) % 1.0;
+      const gradientPos = raw <= 0.5 ? raw * 2 : (1 - raw) * 2;
+      return {
+        text: char,
+        fg: interpolateColor(this.THINK_GRADIENT_START, this.THINK_GRADIENT_END, gradientPos),
+        bold: true,
+      };
+    });
+    if (inputTokens !== undefined || outputTokens !== undefined) {
+      const inTok = inputTokens ?? 0;
+      const outTok = outputTokens ?? 0;
+      segments.push({ text: ` in ${fmtNum(inTok)} `, fg: '243', dim: true });
+      segments.push({ text: `out ${fmtNum(outTok)}`, fg: '#00ffff' });
+    }
+    const line = createEmptyLine(width);
+    let col = 1;
+    for (const segment of segments) {
+      for (const char of segment.text) {
+        if (col >= width) break;
+        const charWidth = getDisplayWidth(char);
+        if (charWidth <= 0 || col + charWidth > width) break;
+        line[col] = {
+          char,
+          fg: segment.fg,
+          bg: '',
+          bold: segment.bold ?? false,
+          dim: segment.dim ?? false,
+          underline: false,
+          italic: segment.italic ?? false,
+          strikethrough: false,
+        };
+        if (charWidth === 2 && col + 1 < width) {
+          line[col + 1] = { ...line[col], char: '' };
+        }
+        col += charWidth;
+      }
+      if (col >= width) break;
+    }
+
+    const lines: Line[] = [
+      this.stringToLine(' '.repeat(width), width),
+      line,
+    ];
+
+    if (toolPreview) {
+      const previewLine = createEmptyLine(width);
+      const label = ' tool: ';
+      let px = 0;
+      for (const ch of label) {
+        if (px >= width) break;
+        previewLine[px] = {
+          char: ch,
+          fg: '#38bdf8',
+          bg: '',
+          bold: true,
+          dim: false,
+          underline: false,
+          italic: false,
+          strikethrough: false,
+        };
+        px += getDisplayWidth(ch);
+      }
+      for (const ch of toolPreview) {
+        if (px >= width) break;
+        const charWidth = getDisplayWidth(ch);
+        if (charWidth <= 0 || px + charWidth > width) break;
+        previewLine[px] = {
+          char: ch,
+          fg: '243',
+          bg: '',
+          bold: false,
+          dim: true,
+          underline: false,
+          italic: false,
+          strikethrough: false,
+        };
+        if (charWidth === 2 && px + 1 < width) {
+          previewLine[px + 1] = { ...previewLine[px], char: '' };
+        }
+        px += charWidth;
+      }
+      lines.push(previewLine);
+    }
+
+    lines.push(this.stringToLine(' '.repeat(width), width));
+    return lines;
+  }
+
+  /**
+   * createProgressBarLine - Renders a labeled progress bar line.
+   * @param label - Left-side label string (padded as-is)
+   * @param pct - Fill fraction 0..1
+   * @param barWidth - Number of bar characters
+   * @param lineWidth - Total terminal width to slice to
+   */
+  private static createProgressBarLine(label: string, pct: number, barWidth: number, lineWidth: number, suffix?: string): Line {
+    const pctDisplay = Math.round(pct * 100);
+    const filled = Math.round(pct * barWidth);
+    const color = pct < 0.6 ? '82' : pct < 0.85 ? '220' : '196';
+    const bar = GLYPHS.meter.filled.repeat(filled) + GLYPHS.meter.empty.repeat(barWidth - filled);
+    const pctStr = `  ${pctDisplay}%`;
+    const full = label + bar + pctStr + (suffix ?? '');
+    return this.stringToLine(truncateDisplay(full, lineWidth), lineWidth, { fg: color, dim: true });
+  }
+
+  public static stringToLine(text: string, width: number, style: Partial<Cell> = {}): Line {
+    const line = createEmptyLine(width);
+    let currentColumn = 0;
+    for (const char of text) {
+      if (currentColumn >= width) break;
+      const code = char.codePointAt(0) ?? 0;
+      if (code < 32 || code === 127) continue;
+      const charWidth = getDisplayWidth(char);
+      line[currentColumn] = {
+        char,
+        fg: style.fg || '',
+        bg: style.bg || '',
+        bold: style.bold || false,
+        dim: style.dim || false,
+        underline: style.underline || false,
+        italic: style.italic || false,
+        strikethrough: style.strikethrough || false
+      };
+      if (charWidth === 2 && currentColumn + 1 < width) {
+        line[currentColumn + 1] = { ...line[currentColumn], char: '' };
+      }
+      currentColumn += charWidth;
+    }
+    return line;
+  }
+}

package/src/renderer/ui-primitives.ts

@@ -0,0 +1,96 @@
+export const GLYPHS = {
+  frame: {
+    topLeft: '┌',
+    topRight: '┐',
+    bottomLeft: '└',
+    bottomRight: '┘',
+    horizontal: '─',
+    vertical: '│',
+    teeLeft: '├',
+    teeRight: '┤',
+    teeTop: '┬',
+    teeBottom: '┴',
+    cross: '┼',
+  },
+  surface: {
+    top: '▄',
+    bottom: '▀',
+    cursor: '█',
+    altCursor: '▌',
+  },
+  navigation: {
+    selected: '▸',
+    collapsed: '▸',
+    expanded: '▾',
+    up: '↑',
+    down: '↓',
+    moreAbove: '▲',
+    moreBelow: '▼',
+    next: '→',
+    back: '←',
+    pipeSeparator: '│',
+  },
+  status: {
+    success: '✓',
+    failure: '✕',
+    pending: '•',
+    active: '●',
+    idle: '○',
+    info: '•',
+    blocked: '⊘',
+    skipped: '◇',
+    review: '◈',
+    retry: '↻',
+    handoff: '⇢',
+    reference: '↗',
+    partial: '◐',
+    dualPane: '◆',
+    star: '★',
+  },
+  meter: {
+    filled: '█',
+    medium: '▓',
+    light: '▒',
+    empty: '░',
+    spark: ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'],
+  },
+} as const;
+
+export const UI_TONES = {
+  fg: {
+    primary: '#e2e8f0',
+    secondary: '#cbd5e1',
+    muted: '#94a3b8',
+    dim: '#475569',
+    inverse: '#0f172a',
+  },
+  bg: {
+    base: '#11131a',
+    surface: '#161a22',
+    title: '#0f172a',
+    section: '#18202b',
+    summary: '#1b2430',
+    selected: '#223049',
+    input: '#1e293b',
+    warning: '#2b2116',
+    error: '#2a161b',
+    success: '#14241b',
+  },
+  state: {
+    info: '#38bdf8',
+    good: '#22c55e',
+    warn: '#f59e0b',
+    bad: '#ef4444',
+    blocked: '#f97316',
+    active: '#60a5fa',
+  },
+  accent: {
+    browser: '#7dd3fc',
+    control: '#22d3ee',
+    inspector: '#c4b5fd',
+    workflow: '#fbbf24',
+    conversation: '#93c5fd',
+  },
+} as const;
+
+export type UiGlyphRegistry = typeof GLYPHS;