@pellux/goodvibes-tui 0.20.2 → 0.21.0

package/src/renderer/term-caps.ts

@@ -0,0 +1,318 @@
+/**
+ * term-caps.ts — Terminal capability detection and color downsampling.
+ *
+ * Probes the terminal's color support level once at renderer init and exposes
+ * a `downsampleColor` function that maps hex/RGB color strings to the
+ * appropriate SGR parameter string for the detected capability level.
+ *
+ * Capability levels (in ascending order):
+ *   none      — NO_COLOR set or TERM=dumb; emit no SGR color sequences.
+ *   basic16   — 16 ANSI colors (\x1b[30-37m / \x1b[90-97m / \x1b[40-47m).
+ *   ansi256   — 256-color palette (\x1b[38;5;Nm).
+ *   truecolor — 24-bit RGB (\x1b[38;2;R;G;Bm).
+ *
+ * References:
+ *   - NO_COLOR spec: https://no-color.org/ (any non-empty value disables color)
+ *   - TERM=dumb: conventional dumb-terminal indicator
+ *   - getColorDepth(): Node.js WriteStream API returns 1/4/8/24
+ */
+
+export type ColorCapability = 'none' | 'basic16' | 'ansi256' | 'truecolor';
+
+export interface TermColorCaps {
+  capability: ColorCapability;
+  /**
+   * Whether to emit DEC Synchronized Output (mode 2026) markers.
+   * True when capability != 'none' and TERM != 'dumb'.
+   */
+  syncedOutput: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Capability probe
+// ---------------------------------------------------------------------------
+
+/**
+ * Probe terminal color capabilities from environment and the write stream.
+ * Call once at compositor/renderer construction time.
+ *
+ * @param stdout - The writable stream for terminal output (process.stdout or mock).
+ */
+export function probeTermCaps(stdout: NodeJS.WriteStream): TermColorCaps {
+  // NO_COLOR: any non-empty value disables color, per https://no-color.org/
+  const noColor = process.env['NO_COLOR'];
+  if (noColor !== undefined && noColor !== '') {
+    return { capability: 'none', syncedOutput: false };
+  }
+
+  const term = process.env['TERM'] ?? '';
+  if (term === 'dumb') {
+    return { capability: 'none', syncedOutput: false };
+  }
+
+  // getColorDepth() returns bit depth: 1=none, 4=basic16, 8=ansi256, 24=truecolor
+  const depth: number = typeof stdout.getColorDepth === 'function'
+    ? stdout.getColorDepth()
+    : 1;
+
+  let capability: ColorCapability;
+  if (depth >= 24) {
+    capability = 'truecolor';
+  } else if (depth >= 8) {
+    capability = 'ansi256';
+  } else if (depth >= 4) {
+    capability = 'basic16';
+  } else {
+    capability = 'none';
+  }
+
+  const syncedOutput = capability !== 'none';
+  return { capability, syncedOutput };
+}
+
+// ---------------------------------------------------------------------------
+// Color parsing helpers
+// ---------------------------------------------------------------------------
+
+/** Parse "#rrggbb" → [r, g, b]. Returns null for invalid input. */
+function parseHex(hex: string): [number, number, number] | null {
+  if (hex.length === 7 && hex[0] === '#') {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+  }
+  return null;
+}
+
+/**
+ * Parse a sanitized color string in one of two forms:
+ *   - "#rrggbb"  → RGB tuple
+ *   - "r;g;b"    → RGB tuple (already decomposed by sanitizeColor)
+ *   - "N"        → null (already a palette index — pass through)
+ * Returns [r, g, b] or null (non-RGB / palette index).
+ */
+function parseRgbString(color: string): [number, number, number] | null {
+  if (color.startsWith('#')) return parseHex(color);
+  if (color.includes(';')) {
+    const parts = color.split(';');
+    if (parts.length === 3) {
+      const r = parseInt(parts[0]!, 10);
+      const g = parseInt(parts[1]!, 10);
+      const b = parseInt(parts[2]!, 10);
+      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// 256-color cube math
+// ---------------------------------------------------------------------------
+
+/**
+ * Map [r, g, b] (0-255 each) to the nearest xterm-256 palette index.
+ *
+ * The 256-color palette is structured as:
+ *   0-15:   System colors (16 named colors) — we avoid these for predictability
+ *           and instead target the 6×6×6 cube + grayscale ramp.
+ *   16-231: 6×6×6 color cube, index = 16 + 36*r6 + 6*g6 + b6
+ *           where r6/g6/b6 ∈ 0-5 map via [0,95,135,175,215,255]
+ *   232-255: Grayscale ramp, index = 232 + round((v - 8) / 10)
+ *            values: 8, 18, 28, ..., 238 (24 steps, step=10)
+ */
+const CUBE_STEPS = [0, 95, 135, 175, 215, 255] as const;
+
+function nearestCubeStep(v: number): number {
+  let best = 0;
+  let bestDist = Math.abs(v - CUBE_STEPS[0]!);
+  for (let i = 1; i < CUBE_STEPS.length; i++) {
+    const dist = Math.abs(v - CUBE_STEPS[i]!);
+    if (dist < bestDist) { bestDist = dist; best = i; }
+  }
+  return best;
+}
+
+function cubeIndex(r: number, g: number, b: number): number {
+  const r6 = nearestCubeStep(r);
+  const g6 = nearestCubeStep(g);
+  const b6 = nearestCubeStep(b);
+  return 16 + 36 * r6 + 6 * g6 + b6;
+}
+
+function grayscaleIndex(v: number): number {
+  // Grayscale ramp: 232..255, values 8,18,28,...,238
+  // index 232 = value 8, index 255 = value 238, step 10
+  const clamped = Math.max(8, Math.min(238, v));
+  return 232 + Math.round((clamped - 8) / 10);
+}
+
+function sqDist(r1: number, g1: number, b1: number, r2: number, g2: number, b2: number): number {
+  return (r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2;
+}
+
+/**
+ * Find the nearest xterm-256 index for [r, g, b].
+ * Compares the nearest cube color vs the nearest grayscale color and picks best.
+ */
+export function nearestAnsi256(r: number, g: number, b: number): number {
+  const ci = cubeIndex(r, g, b);
+  const r6 = nearestCubeStep(r);
+  const g6 = nearestCubeStep(g);
+  const b6 = nearestCubeStep(b);
+  const cubeR = CUBE_STEPS[r6]!;
+  const cubeG = CUBE_STEPS[g6]!;
+  const cubeB = CUBE_STEPS[b6]!;
+  const cubeDist = sqDist(r, g, b, cubeR, cubeG, cubeB);
+
+  // Nearest grayscale step
+  const gray = Math.round(0.2126 * r + 0.7152 * g + 0.0722 * b);
+  const gi = grayscaleIndex(gray);
+  const grayVal = 8 + (gi - 232) * 10;
+  const grayDist = sqDist(r, g, b, grayVal, grayVal, grayVal);
+
+  return grayDist < cubeDist ? gi : ci;
+}
+
+// ---------------------------------------------------------------------------
+// 16-color nearest-color table
+// ---------------------------------------------------------------------------
+
+/**
+ * Standard 16 ANSI colors. Each entry is [r, g, b, fgCode, bgCode].
+ * The fg code is the SGR parameter for foreground (30-37, 90-97);
+ * the bg code is 40 higher.
+ *
+ * These values approximate the most common terminal palettes (xterm defaults).
+ */
+const ANSI16_PALETTE: ReadonlyArray<readonly [number, number, number, number]> = [
+  // [r, g, b, SGR-fg-code]
+  [0,   0,   0,   30],  // 0: black
+  [170, 0,   0,   31],  // 1: red
+  [0,   170, 0,   32],  // 2: green
+  [170, 85,  0,   33],  // 3: yellow/brown
+  [0,   0,   170, 34],  // 4: blue
+  [170, 0,   170, 35],  // 5: magenta
+  [0,   170, 170, 36],  // 6: cyan
+  [170, 170, 170, 37],  // 7: light gray
+  [85,  85,  85,  90],  // 8: dark gray (bright black)
+  [255, 85,  85,  91],  // 9: bright red
+  [85,  255, 85,  92],  // 10: bright green
+  [255, 255, 85,  93],  // 11: bright yellow
+  [85,  85,  255, 94],  // 12: bright blue
+  [255, 85,  255, 95],  // 13: bright magenta
+  [85,  255, 255, 96],  // 14: bright cyan
+  [255, 255, 255, 97],  // 15: white
+];
+
+/**
+ * Find the nearest ANSI 16-color SGR foreground code for [r, g, b].
+ * Returns a number like 31 (red fg), 92 (bright green fg), etc.
+ */
+export function nearestAnsi16Fg(r: number, g: number, b: number): number {
+  let bestCode = 37;
+  let bestDist = Infinity;
+  for (const [pr, pg, pb, code] of ANSI16_PALETTE) {
+    const d = sqDist(r, g, b, pr!, pg!, pb!);
+    if (d < bestDist) { bestDist = d; bestCode = code!; }
+  }
+  return bestCode;
+}
+
+/**
+ * Convert an ANSI16 fg code to the corresponding bg code.
+ * fg 30-37 → bg 40-47; fg 90-97 → bg 100-107.
+ */
+export function ansi16FgToBg(fgCode: number): number {
+  // Both ranges (30-37 and 90-97) shift by +10 to reach their bg equivalents
+  // (30-37 → 40-47, 90-97 → 100-107).
+  return fgCode + 10;
+}
+
+// ---------------------------------------------------------------------------
+// Public downsampler
+// ---------------------------------------------------------------------------
+
+/**
+ * Downsample a color for the given capability.
+ *
+ * @param rawColor - A color string as seen in Cell.fg / Cell.bg, before
+ *   sanitizeColor() decomposition. Supported forms:
+ *   - "#rrggbb"  hex
+ *   - "r;g;b"    pre-decomposed RGB (from sanitizeColor)
+ *   - "N"        already a palette index — returned as-is for ansi256/truecolor,
+ *                or omitted for none
+ *
+ * @param caps - The probed terminal capabilities.
+ * @param role - 'fg' or 'bg' — determines which SGR range to use for basic16.
+ *
+ * @returns The SGR parameter string suitable for embedding in \x1b[38;2;...m
+ *   (truecolor), \x1b[38;5;Nm (ansi256), \x1b[Nm (basic16 fg), etc.
+ *   Returns null when capability is 'none' (caller should skip the sequence).
+ *
+ * Caller usage:
+ *   const fg = downsampleColor(cell.fg, caps, 'fg');
+ *   if (fg !== null) {
+ *     const isRgb = fg.includes(';');  // truecolor path
+ *     style += isRgb ? `\x1b[38;2;${fg}m` : `\x1b[38;5;${fg}m`;
+ *   }
+ *
+ * For basic16 the caller must use a different SGR prefix — see applyStyles.
+ */
+export function downsampleColor(
+  rawColor: string,
+  caps: TermColorCaps,
+  role: 'fg' | 'bg',
+): string | null {
+  if (!rawColor) return null;
+  if (caps.capability === 'none') return null;
+
+  const rgb = parseRgbString(rawColor);
+
+  if (caps.capability === 'truecolor') {
+    // Pass hex through as r;g;b decomposed, pass r;g;b through as-is
+    if (rgb) return `${rgb[0]};${rgb[1]};${rgb[2]}`;
+    // Already a palette index — emit as 256-color
+    return rawColor; // caller will use 38;5;N or 48;5;N
+  }
+
+  if (caps.capability === 'ansi256') {
+    if (rgb) return String(nearestAnsi256(rgb[0], rgb[1], rgb[2]));
+    // Already a palette index — pass through
+    return rawColor;
+  }
+
+  // basic16
+  if (rgb) {
+    const fgCode = nearestAnsi16Fg(rgb[0], rgb[1], rgb[2]);
+    if (role === 'fg') return String(fgCode);
+    // bg: shift by 10 (30→40, 90→100)
+    return String(ansi16FgToBg(fgCode));
+  }
+  // Palette index in basic16 mode: map 256-color index to the nearest 16-color.
+  // We don't have the RGB for arbitrary palette indices here; treat as empty
+  // (the caller will skip the sequence rather than emit garbage).
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// DEC 2026 Synchronized Output helpers
+// ---------------------------------------------------------------------------
+
+/** DEC private mode 2026: begin synchronized update (suppress screen updates). */
+export const SYNC_BEGIN = '\x1b[?2026h';
+/** DEC private mode 2026: end synchronized update (flush to screen). */
+export const SYNC_END = '\x1b[?2026l';
+
+/**
+ * Wrap a diff string in DEC 2026 synchronized-update markers if the
+ * terminal supports it.
+ *
+ * @param diff - The raw ANSI diff string.
+ * @param caps - The probed terminal capabilities.
+ * @returns The diff string, optionally wrapped.
+ */
+export function wrapSynced(diff: string, caps: TermColorCaps): string {
+  if (!diff || !caps.syncedOutput) return diff;
+  return `${SYNC_BEGIN}${diff}${SYNC_END}`;
+}

package/src/renderer/theme.ts

@@ -0,0 +1,158 @@
+/**
+ * theme.ts — Semantic colour token layer.
+ *
+ * Defines named tokens for every colour decision in the markdown/compositor/
+ * conversation-rendering pipeline, resolved to concrete hex or ANSI-256 values
+ * per background mode.
+ *
+ * Dark mode values are the historically used colours.
+ * Light mode values are defined now for correctness parity; they are consumed
+ * when background-detection (F5 / terminal-bg-probe) lands and passes the
+ * resolved mode down. Callers that do not yet have mode detection MUST call
+ * resolveTheme('dark') as the safe default.
+ *
+ * IMPORTANT: inline code has NO background token. The bg:#1a1a1a hardcode
+ * that previously existed caused a near-black box on light terminals.
+ * Differentiate inline code via inlineCodeFg + bold only; bg inherits terminal.
+ */
+
+/** Background mode — dark is the safe default until terminal-bg-probe lands. */
+export type ThemeMode = 'dark' | 'light';
+
+/** Resolved semantic colour tokens (concrete hex strings or ANSI-256 indices). */
+export interface ThemeTokens {
+  /** H1 heading foreground + table header accent */
+  heading1: string;
+  /** H2 heading foreground */
+  heading2: string;
+  /** H3 heading foreground (ANSI-256 — falls back to nearest on ansi256 terminals) */
+  heading3: string;
+  /** Inline code foreground (bold is applied separately by caller) */
+  inlineCodeFg: string;
+  /** Hyperlink and bare-URL foreground */
+  link: string;
+  /** Non-current search match background */
+  searchMatchBg: string;
+  /** Non-current search match foreground */
+  searchMatchFg: string;
+  /** Current (focused) search match background */
+  searchCurrentBg: string;
+  /** Current (focused) search match foreground */
+  searchCurrentFg: string;
+  /** Strikethrough / muted text foreground */
+  strikethrough: string;
+  /** Blockquote / dim text foreground */
+  blockquote: string;
+  /** Assistant event-line marker + label accent */
+  assistantHeader: string;
+  /** Reasoning / thinking block accent */
+  reasoningAccent: string;
+  /** Tool call / active status accent (also diff/tool result label) */
+  toolAccent: string;
+  /** Collapsed-fragment body background (tool result preview bg) */
+  collapsedBodyBg: string;
+  /** Checked task-list checkbox foreground (✓ in green) */
+  checkboxChecked: string;
+  /** Error / cancelled message bar background */
+  errorBarBg: string;
+  /** Model name / provider dim label foreground */
+  modelNameDim: string;
+  /** Tool name foreground in tool-result event line */
+  toolNameFg: string;
+  /** Diff block accent — marker, label, and collapsed-prefix foreground */
+  diffAccent: string;
+}
+
+// ---------------------------------------------------------------------------
+// Dark palette
+// ---------------------------------------------------------------------------
+const DARK: ThemeTokens = {
+  heading1:        '#00ffff',
+  heading2:        '#00ffff',
+  heading3:        '111',
+  inlineCodeFg:    '#ffcc00',
+  link:            '#00aaff',
+  searchMatchBg:   '#806600',
+  searchMatchFg:   '#ffffff',
+  searchCurrentBg: '#ffff00',
+  searchCurrentFg: '#000000',
+  strikethrough:   '244',
+  blockquote:      '244',
+  assistantHeader: '#22d3ee',
+  reasoningAccent: '#a855f7',
+  toolAccent:      '#38bdf8',
+  collapsedBodyBg: '#1a1a1a',
+  checkboxChecked: '#22c55e',
+  errorBarBg:      '#3a1a1a',
+  modelNameDim:    '#94a3b8',
+  toolNameFg:      '#e2e8f0',
+  diffAccent:      '#f59e0b',
+};
+
+// ---------------------------------------------------------------------------
+// Light palette
+//
+// Rationale per token:
+//   heading1/2:        Deep teal (#0077aa) — readable on white/cream terminals
+//   heading3:          ANSI-256 #244 equivalent on light bg → use 24 (dark cyan)
+//   inlineCodeFg:      Dark orange (#b45309) — distinguishable without a box bg
+//   link:              Standard blue (#0055cc) — matches browser convention
+//   searchMatchBg:     Muted yellow (#ffe066) — visible on light bg
+//   searchMatchFg:     Black (#000000)
+//   searchCurrentBg:   Strong amber (#f59e0b) — current match is more vivid
+//   searchCurrentFg:   Black (#000000)
+//   strikethrough:     Medium gray (ANSI-256 244 stays; light terminals map it fine)
+//   blockquote:        Dim blue-gray (ANSI-256 67)
+//   assistantHeader:   Dark cyan (#0e7490)
+//   reasoningAccent:   Dark purple (#7c3aed)
+//   toolAccent:        Dark sky (#0369a1)
+//   collapsedBodyBg:   Very light gray (#f3f4f6)
+//   checkboxChecked:   Forest green (#15803d) — AA on white (contrast ~5.2:1 on #fff)
+//   errorBarBg:        Soft rose (#fee2e2) — light error bar bg, legible text on top
+//   modelNameDim:      Slate-500 (#64748b) — dim label; contrast ~4.6:1 on #fff
+//   toolNameFg:        Slate-800 (#334155) — strong enough for tool names
+//   diffAccent:        Amber-700 (#b45309) — darker amber, contrast ~4.7:1 on #fff
+// ---------------------------------------------------------------------------
+const LIGHT: ThemeTokens = {
+  heading1:        '#0077aa',
+  heading2:        '#0077aa',
+  heading3:        '24',
+  inlineCodeFg:    '#b45309',
+  link:            '#0055cc',
+  searchMatchBg:   '#ffe066',
+  searchMatchFg:   '#000000',
+  searchCurrentBg: '#f59e0b',
+  searchCurrentFg: '#000000',
+  strikethrough:   '244',
+  blockquote:      '67',
+  assistantHeader: '#0e7490',
+  reasoningAccent: '#7c3aed',
+  toolAccent:      '#0369a1',
+  collapsedBodyBg: '#f3f4f6',
+  checkboxChecked: '#15803d',
+  errorBarBg:      '#fee2e2',
+  modelNameDim:    '#64748b',
+  toolNameFg:      '#334155',
+  diffAccent:      '#b45309',
+};
+
+/**
+ * resolveTheme — Return the semantic token set for the given background mode.
+ *
+ * Call with 'dark' (the safe default) until terminal-bg-probe lands.
+ * The returned object is frozen; callers should not mutate it.
+ */
+export function resolveTheme(mode: ThemeMode): Readonly<ThemeTokens> {
+  return mode === 'light' ? LIGHT : DARK;
+}
+
+// Freeze both palette objects so they are truly immutable at runtime,
+// matching the Readonly<ThemeTokens> return type in the doc comment above.
+Object.freeze(DARK);
+Object.freeze(LIGHT);
+
+/**
+ * Default dark-mode token set, exported for convenience.
+ * Frozen — do not mutate.
+ */
+export const DARK_THEME: Readonly<ThemeTokens> = DARK;

package/src/renderer/tool-call.ts

@@ -3,6 +3,7 @@ import { LAYOUT, TOOL_STATUS } from './layout.ts';
 import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { ToolCall } from '@pellux/goodvibes-sdk/platform/types';
 import { stripDangerousAnsi } from './ansi-sanitize.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 
 const TOOL_NAME_MIN_WIDTH = 8;
 const TOOL_NAME_MAX_WIDTH = 20;
@@ -148,6 +149,8 @@ function extractKeyArg(toolCall: ToolCall): string {
  * @param width - Terminal width
  * @param durationMs - Optional duration in milliseconds
  * @param errorMsg - Optional error message for failed calls
+ * @param frameIndex - Spinner frame index for animated icon
+ * @param startedAtMs - Wall-clock ms when execution started; enables live elapsed timer
  */
 export function renderToolCallBlock(
   toolCall: ToolCall,
@@ -157,6 +160,7 @@ export function renderToolCallBlock(
   durationMs?: number,
   errorMsg?: string,
   frameIndex?: number,
+  startedAtMs?: number,
 ): Line[] {
   const line = createEmptyLine(width);
   const margin = LAYOUT.LEFT_MARGIN;
@@ -172,9 +176,15 @@ export function renderToolCallBlock(
     : '244';
   const rightText = (() => {
     if (durationMs !== undefined && status === 'done') {
-      return durationMs < 1000 ? `${durationMs}ms` : `${(durationMs / 1000).toFixed(1)}s`;
+      return formatElapsed(durationMs);
     }
-    return status === 'executing' ? '...' : '';
+    if (status === 'executing') {
+      if (startedAtMs !== undefined) {
+        return formatElapsed(Date.now() - startedAtMs);
+      }
+      return '...';
+    }
+    return '';
   })();
   const rightWidth = getDisplayWidth(rightText);
   const rightStart = rightText

package/src/renderer/ui-factory.ts

@@ -5,6 +5,7 @@ import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColo
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
 import { GLYPHS } from './ui-primitives.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 
 /** Number of frames before the animated gradient completes one full cycle. */
 const GRADIENT_CYCLE_FRAMES = 50;
@@ -301,8 +302,12 @@ export class UIFactory {
       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);
+      // Clamp threshold to [0..1]; undefined/0 means no threshold marker.
+      const thresholdFraction = (compactThreshold !== undefined && compactThreshold > 0)
+        ? Math.min(1, compactThreshold)
+        : undefined;
       lines.push(createBaseLine());
-      lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix));
+      lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix, thresholdFraction));
     }
     // Context info line (working dir, model+provider, tools)
     if (workingDir || model) {
@@ -381,12 +386,14 @@ export class UIFactory {
   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[] {
+  public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: 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 elapsedSuffix = elapsedMs !== undefined ? ` (${formatElapsed(elapsedMs)})` : '';
+    const ttftSuffix = (ttftMs !== undefined && ttftMs > 0) ? ` ttft:${ttftMs}ms` : '';
+    const text = `  ${spinner} ${phrase}${speedSuffix}${elapsedSuffix}${ttftSuffix} `;
 
     const textWidth = Math.max(1, getDisplayWidth(text) - 1);
     const segments: ConversationStatusSegment[] = Array.from(text).map((char, index) => {
@@ -485,12 +492,49 @@ export class UIFactory {
    * @param pct - Fill fraction 0..1
    * @param barWidth - Number of bar characters
    * @param lineWidth - Total terminal width to slice to
+   * @param suffix - Optional suffix appended after the percentage
+   * @param compactThreshold - Optional fraction [0..1] at which a threshold marker is drawn
+   *   and the color switches from safe to at-threshold. When omitted, falls back to the
+   *   legacy hardcoded 0.6/0.85 thresholds.
    */
-  private static createProgressBarLine(label: string, pct: number, barWidth: number, lineWidth: number, suffix?: string): Line {
+  private static createProgressBarLine(
+    label: string,
+    pct: number,
+    barWidth: number,
+    lineWidth: number,
+    suffix?: string,
+    compactThreshold?: number,
+  ): 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);
+
+    // Color: when compactThreshold is provided, switch at the threshold;
+    // otherwise fall back to legacy hardcoded 0.6 (green) / 0.85 (yellow) / red.
+    let color: string;
+    if (compactThreshold !== undefined) {
+      color = pct < compactThreshold ? '82' : pct < 1.0 ? '220' : '196';
+    } else {
+      color = pct < 0.6 ? '82' : pct < 0.85 ? '220' : '196';
+    }
+
+    // Build bar with optional threshold marker.
+    // The marker ('▸') is placed at the threshold column, replacing an empty cell.
+    const emptyChar = GLYPHS.meter.empty;
+    const filledChar = GLYPHS.meter.filled;
+    const thresholdCol = compactThreshold !== undefined
+      ? Math.round(compactThreshold * barWidth)
+      : -1;
+
+    let bar = '';
+    for (let i = 0; i < barWidth; i++) {
+      if (i === thresholdCol && i >= filled) {
+        // Threshold marker sits in the empty region
+        bar += '▸'; // ▸
+      } else {
+        bar += i < filled ? filledChar : emptyChar;
+      }
+    }
+
     const pctStr = `  ${pctDisplay}%`;
     const full = label + bar + pctStr + (suffix ?? '');
     return this.stringToLine(truncateDisplay(full, lineWidth), lineWidth, { fg: color, dim: true });

package/src/runtime/bootstrap-command-context.ts

@@ -263,6 +263,7 @@ export function createBootstrapCommandContext(
     activatePlan,
     requestPermission,
     completeModelSelectionSideEffect,
+    localUserAuthManager,
   });
 
   return {

package/src/runtime/bootstrap-command-parts.ts

@@ -42,6 +42,7 @@ import type { PeerClient } from '@/runtime/index.ts';
 import type { DirectTransport } from '@/runtime/index.ts';
 import type { VoiceProviderRegistry, VoiceService } from '@pellux/goodvibes-sdk/platform/voice';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+import { LocalAuthPanel } from '../panels/local-auth-panel.ts';
 
 export type BootstrapCommandSessionSection = CommandContext['session'];
 export type BootstrapCommandProviderSection = CommandContext['provider'];
@@ -62,6 +63,7 @@ export interface BootstrapCommandActionOptions {
   readonly activatePlan: (planId: string, task: string) => void;
   readonly requestPermission: PermissionRequestHandler;
   readonly completeModelSelectionSideEffect?: () => void;
+  readonly localUserAuthManager?: import('@pellux/goodvibes-sdk/platform/security').UserAuthManager;
 }
 
 export interface BootstrapCommandSectionOptions {
@@ -160,6 +162,7 @@ export function createBootstrapCommandActions(
   | 'openKnowledgePanel'
   | 'openRemotePanel'
   | 'openSubscriptionPanel'
+  | 'openLocalAuthMaskedEntry'
 > {
   const {
     providerRegistry,
@@ -172,6 +175,7 @@ export function createBootstrapCommandActions(
     activatePlan,
     requestPermission,
     completeModelSelectionSideEffect,
+    localUserAuthManager,
   } = options;
 
   const showPanel = (panelId: string, pane?: 'top' | 'bottom') => {
@@ -275,6 +279,16 @@ export function createBootstrapCommandActions(
     openSubscriptionPanel: () => {
       showPanel('subscription');
     },
+    openLocalAuthMaskedEntry: (kind, username) => {
+      showPanel('local-auth');
+      const panel = panelManager.getPanel('local-auth');
+      if (panel instanceof LocalAuthPanel && localUserAuthManager) {
+        panel.openMaskedEntry(kind, username, localUserAuthManager);
+      } else {
+        conversation.log('Masked entry unavailable: local auth is not configured in this session.', { fg: '#ef4444' });
+        requestRender();
+      }
+    },
   };
 }