@pellux/goodvibes-tui 2.0.21 → 2.1.1

package/src/renderer/footer-targets.ts

@@ -0,0 +1,38 @@
+/**
+ * footer-targets.ts, which footer rows open a view when clicked.
+ *
+ * The status line (the row carrying the context bar and cost) opens the
+ * Usage modal on a click. The footer builder tags those Line arrays with a symbol-keyed
+ * property (invisible to rendering, iteration and golden frames); the shell
+ * turns the tags into screen rows each frame and the mouse route reads them.
+ */
+
+import type { Line } from '@pellux/goodvibes-sdk/platform/types';
+
+/** What a clickable footer row opens. */
+export type FooterTarget = 'usage';
+
+const FOOTER_TARGET = Symbol('footer-target');
+
+type TaggedLine = Line & { [FOOTER_TARGET]?: FooterTarget };
+
+/** Mark a footer row as opening `target` when clicked; returns the same line. */
+export function tagFooterLine(line: Line, target: FooterTarget): Line {
+  (line as TaggedLine)[FOOTER_TARGET] = target;
+  return line;
+}
+
+/** The target a footer row opens, or undefined. */
+function footerTargetOf(line: Line): FooterTarget | undefined {
+  return (line as TaggedLine)[FOOTER_TARGET];
+}
+
+/** Screen row → target for a footer drawn with its first row at `startRow`. */
+export function footerTargetRows(footer: readonly Line[], startRow: number): ReadonlyMap<number, FooterTarget> {
+  const rows = new Map<number, FooterTarget>();
+  footer.forEach((line, index) => {
+    const target = footerTargetOf(line);
+    if (target) rows.set(startRow + index, target);
+  });
+  return rows;
+}

package/src/renderer/git-status.ts

@@ -55,10 +55,9 @@ export class GitStatusProvider {
   }
 
   /**
-   * Start a lightweight live-repo-state poll. Mirrors DiffPanel's principle of
-   * never trusting a cached "is this a repo" flag (see diff-panel.ts
-   * showGitDiff/showFileDiffs/showStagedDiff, all gated on a fresh
-   * GitService.isGitRepo() check) but amortizes the cost for the header: the
+   * Start a lightweight live-repo-state poll. Follows the Changes modal's principle of
+   * never trusting a cached "is this a repo" flag (its git diff actions are
+   * all gated on a fresh GitService.isGitRepo() check) but amortizes the cost for the header: the
    * cheap synchronous isGitRepo() spawn runs every tick; the heavier async
    * status()+branch() fetch (this.refresh()) only runs when that boolean
    * actually flips, e.g. an external `git init`, or `.git` removed.

package/src/renderer/header-line.ts

@@ -1,146 +1,169 @@
 /**
- * header-line.ts, the top-of-screen header row: brand, version, optional
- * conversation title, optional git segment, and the right-hand model/provider
- * pair.
+ * header-line.ts, the one-row header.
  *
- * Extracted from ui-factory.ts (which sits on the 800-line source gate) when
- * the header gained the failover divergence marker. `UIFactory.createHeader`
- * remains the call name everywhere and delegates here.
+ *   col 1   GoodVibes, bold, in the theme's brand -> brandEnd gradient
+ *           (the theme's gradient, never the protected splash constant)
+ *   then    the version (faint) and the session title (muted)
+ *   right   the branch with a warning-colored dirty dot (ahead/behind counts
+ *           muted), 3 columns, then the serving model ending at width-2,
+ *           followed by the failover marker in the warning color while the
+ *           serving backend is not the configured one
  *
- * The model/provider pair rendered here is the SERVING backend, resolved by
- * core/active-model-identity.ts, the same resolution the footer uses, so the
- * two surfaces can no longer disagree about who is answering. `note` carries
- * the divergence marker naming the user's configured selection when serving
- * has moved off it.
+ * No rule row under it; on the main screen one empty row (withHeaderGap)
+ * keeps the output off it. The header is the one place for session identity:
+ * title, branch, model. Inside an agent or process view the title gives way
+ * to the breadcrumb (main › engineer, the last name in its own color) and the
+ * right side names that session: the agent's model, or the process's pid,
+ * uptime and port. On a narrow row the marker falls back to its short
+ * form, then is dropped whole (a half-cut marker reads worse than none); the
+ * branch goes before the marker does, the title before either.
  */
 
 import { type Line, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types';
 import { VERSION } from '../version.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { getDisplayWidth, interpolateColor, truncateDisplay } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
-import { activeUiTones } from './theme.ts';
+import { activeTokens } from './theme.ts';
 
-/** 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 BRAND = 'GoodVibes';
+const BRAND_X = 1;
+const GAP = 3;
+
+interface Seg { readonly text: string; readonly fg: string; readonly bold?: boolean }
+
+/** An agent or process view: the breadcrumb in place of the title, the session's own right side. */
+export interface HeaderView {
+  /** main, then each level down to the one shown; the last is drawn bold in its color. */
+  readonly crumbs: ReadonlyArray<{ readonly text: string; readonly fg: string; readonly bold?: boolean }>;
+  /** Replaces the branch and model on the right (the agent's model; pid · uptime · port). */
+  readonly right: string;
+  readonly rightFg?: string;
+}
+
+function put(line: Line, x: number, endX: number, seg: Seg): number {
+  let cx = x;
+  for (const ch of seg.text) {
+    const w = getDisplayWidth(ch);
+    if (w <= 0) continue;
+    if (cx + w > endX) break;
+    line[cx] = { char: ch, fg: seg.fg, bg: '', bold: seg.bold ?? false, dim: false, underline: false, italic: false, strikethrough: false };
+    if (w === 2 && cx + 1 < line.length) line[cx + 1] = { ...line[cx]!, char: '' };
+    cx += w;
   }
-  const text = `${branch} `;
-  return { text, width: getDisplayWidth(text) };
+  return cx;
 }
 
-/**
- * Pick the widest divergence marker that still fits beside the brand and the
- * model/provider pair.
- *
- * Graded, never truncated mid-word: the full marker (which names the
- * configured selection) is preferred; a bare "divergent" keyword is the
- * fallback on a narrow terminal; on a very narrow terminal the marker is
- * dropped entirely. Dropping it is safe, what remains is still the SERVING
- * backend, so the header never claims the configured backend is answering.
- * The footer carries the full marker with far more room (see ui-factory's
- * prioritized context segments).
- */
-function fitHeaderNote(note: string, usedWidth: number, width: number): string {
-  if (!note) return '';
-  const full = `· ${note} `;
-  if (usedWidth + getDisplayWidth(full) <= width) return full;
-  const short = '· divergent ';
-  return usedWidth + getDisplayWidth(short) <= width ? short : '';
+function branchSegments(gitInfo: GitHeaderInfo): Seg[] {
+  const t = activeTokens();
+  const segs: Seg[] = [{ text: gitInfo.branch, fg: t.textMuted }];
+  if (gitInfo.ahead > 0) segs.push({ text: ` +${gitInfo.ahead}`, fg: t.textMuted });
+  if (gitInfo.behind > 0) segs.push({ text: ` -${gitInfo.behind}`, fg: t.textMuted });
+  if (gitInfo.dirty) segs.push({ text: ' ●', fg: t.warning });
+  return segs;
 }
 
 /**
- * Render the header row plus its underline.
+ * Render the header row.
  *
- * @param width    - Terminal columns.
- * @param model    - Serving model id (already resolved; see file doc).
- * @param provider - Serving provider id.
- * @param title    - Optional conversation title, truncated to fit.
- * @param gitInfo  - Optional git branch/dirty/ahead-behind segment.
- * @param version  - Defaults to the live build VERSION; tests pass a pinned
- *                   fixture so golden snapshots survive release bumps.
- * @param note     - Divergence marker naming the configured selection when the
- *                   serving backend is not the one the user chose; '' otherwise.
+ * @param width   - Terminal columns.
+ * @param model   - Serving model id (core/active-model-identity.ts).
+ * @param title   - Optional session title, truncated to fit.
+ * @param gitInfo - Optional branch/dirty/ahead-behind.
+ * @param version - Defaults to the live build VERSION; tests pin a fixture.
+ * @param modelNote - The failover marker (core/active-model-identity.ts), set
+ *                    only while serving differs from the configured model.
  */
 export function renderHeaderLine(
   width: number,
   model: string,
-  provider: string,
   title?: string,
   gitInfo?: GitHeaderInfo,
   version: string = VERSION,
-  note: string = '',
+  modelNote?: string,
+  view?: HeaderView,
 ): Line[] {
-  const lines: Line[] = [];
-  // Header/footer/thinking paint on the transparent terminal background, so
-  // they read chrome.* (light-terminal-aware), NOT fg.*/state.*, which stay
-  // tuned for the opaque dark modal/panel boxes. Read live per render so a
-  // mode flip re-resolves without any module reload (see theme.ts).
-  const t = activeUiTones();
-  const CYAN = t.accent.brand;
-  const GREY = t.chrome.faint;
-  const TITLE_COLOR = t.chrome.label;
-  const brand = ` GoodVibes `;
-  const ver = `v${version} `;
-  const stats = ` ${model} `;
-  const prov = `(${provider}) `;
-  const gitWidth = gitInfo ? buildGitSegment(gitInfo).width : 0;
-  // Resolve the marker before the title so the title's fit calculation
-  // reserves room for it too.
-  const noteStr = fitHeaderNote(note, getDisplayWidth(brand + ver + stats + prov) + gitWidth, width);
+  const t = activeTokens();
   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
+  for (const cell of line) cell.bg = '';
+  const end = width - 1; // exclusive: the model ends at width-2
+  if (view) return [renderViewHeader(line, width, version, view)];
+
+  // Right side first, so the title knows how much room it has.
+  const leftMin = BRAND_X + BRAND.length + 1 + getDisplayWidth(version);
+  const fits = (w: number): boolean => leftMin + GAP + w <= end;
+  let note = '';
+  if (modelNote) {
+    const full = ` · ${modelNote}`;
+    const short = ' · divergent';
+    const baseW = getDisplayWidth(model);
+    if (fits(baseW + getDisplayWidth(full))) note = full;
+    else if (fits(baseW + getDisplayWidth(short))) note = short;
+  }
+  const modelW = getDisplayWidth(model) + getDisplayWidth(note);
+  const branch = gitInfo ? branchSegments(gitInfo) : [];
+  const branchW = branch.reduce((s, seg) => s + getDisplayWidth(seg.text), 0);
+  const showBranch = branchW > 0 && fits(branchW + GAP + modelW);
+  const rightW = modelW + (showBranch ? branchW + GAP : 0);
+  const rightX = Math.max(leftMin + GAP, end - rightW);
+
+  // Brand, version, title.
+  let x = BRAND_X;
+  [...BRAND].forEach((ch, i) => {
+    x = put(line, x, end, { text: ch, fg: interpolateColor(t.brand, t.brandEnd, i / (BRAND.length - 1)), bold: true });
+  });
+  x = put(line, x + 1, end, { text: version, fg: t.textFaint });
   if (title) {
-    const titleStr = `│ ${title} `;
-    // Reserve space for git info (if present) + model/provider + marker on the right
-    const rightReserved = getDisplayWidth(stats + prov + noteStr) + gitWidth;
-    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 }; }
+    const room = rightX - GAP - (x + 2);
+    if (room >= 4) put(line, x + 2, rightX - GAP, { text: truncateDisplay(title, room), fg: t.textMuted });
   }
-  // Build git info segment
-  let gitStr = '';
-  let gitFg: string = t.chrome.faint;
-  if (gitInfo) {
-    gitStr = buildGitSegment(gitInfo).text;
-    if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-      gitFg = t.chrome.warn; // yellow when dirty or out-of-sync
-    }
+
+  let rx = rightX;
+  if (showBranch) {
+    for (const seg of branch) rx = put(line, rx, end, seg);
+    rx += GAP;
   }
-  const rightSideW = getDisplayWidth(stats + prov + noteStr) + 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 }; }
-  // The marker reads as a warning, not as chrome: serving has left the
-  // selection the user made and that is worth noticing.
-  for (const char of noteStr) { if (rightX >= 0 && rightX < width) line[rightX++] = { char, fg: t.chrome.warn, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false }; }
-  lines.push(line);
-  const underline = createEmptyLine(width);
-  for (let x = 0; x < width; x++) underline[x] = { char: '━', fg: t.chrome.faint, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
-  lines.push(underline);
-  return lines;
+  rx = put(line, rx, end, { text: model, fg: t.text });
+  if (note) put(line, rx, end, { text: note, fg: t.warning });
+  return [line];
 }
+
+/** The header inside an agent or process view. */
+function renderViewHeader(line: Line, width: number, version: string, view: HeaderView): Line {
+  const t = activeTokens();
+  const end = width - 1;
+  let x = BRAND_X;
+  [...BRAND].forEach((ch, i) => {
+    x = put(line, x, end, { text: ch, fg: interpolateColor(t.brand, t.brandEnd, i / (BRAND.length - 1)), bold: true });
+  });
+  x = put(line, x + 1, end, { text: version, fg: t.textFaint });
+  const crumbsW = view.crumbs.reduce((s, c, i) => s + (i > 0 ? 3 : 0) + getDisplayWidth(c.text), 0);
+  // The right side yields before the breadcrumb does: where you are matters more than the model name.
+  const roomForRight = end - (x + 2 + crumbsW + GAP);
+  const right = roomForRight >= 4 ? truncateDisplay(view.right, roomForRight) : '';
+  const rightX = end - getDisplayWidth(right);
+  const crumbEnd = right ? rightX - GAP : end;
+  x += 2;
+  view.crumbs.forEach((crumb, i) => {
+    if (i > 0) x = put(line, x + 1, crumbEnd, { text: '›', fg: t.textFaint }) + 1;
+    const last = i === view.crumbs.length - 1;
+    const room = crumbEnd - x;
+    x = put(line, x, crumbEnd, { text: last ? truncateDisplay(crumb.text, Math.max(0, room)) : crumb.text, fg: crumb.fg, bold: crumb.bold });
+  });
+  if (right) put(line, rightX, end, { text: right, fg: view.rightFg ?? t.text });
+  return line;
+}
+
+/**
+ * The main screen's header block with its gap: the header row (and the
+ * session chips row, when it shows), then one empty row, so output never
+ * touches the header. An agent or process view's body starts with its own
+ * empty row, so a view does not take this one.
+ */
+export function withHeaderGap(header: readonly Line[], width: number): Line[] {
+  const gap = createEmptyLine(width);
+  for (const cell of gap) cell.bg = '';
+  return [...header, gap];
+}
+
+/** Rows the gap under the main screen's header adds. */
+export const HEADER_GAP_ROWS = 1;