@ramarivera/coding-buddy 0.8.0 → 0.9.1

package/adapters/shared/file-storage.ts

@@ -11,6 +11,7 @@ import {
   writeFileSync,
 } from "node:fs";
 import { join } from "node:path";
+import { configuredSharedUserId } from "../../core/identity.ts";
 import {
   EMPTY_GLOBAL,
   EMPTY_SLOT,
@@ -55,7 +56,9 @@ export const DEFAULT_FILE_BUDDY_CONFIG: FileBuddyConfig = {
   bubblePosition: "top",
   showRarity: true,
   statusLineEnabled: true,
+  statuslineDensity: "auto",
   turnCommentModel: undefined,
+  turnCommentTimeoutMs: undefined,
   muted: false,
 };
 
@@ -312,6 +315,22 @@ export class FileBuddyStorage
     });
   }
 
+  updateSlot(
+    slot: string,
+    transform: (companion: Companion) => Companion | null,
+  ): Companion | null {
+    return this.withLock(() => {
+      const manifest = this.loadManifest();
+      const existing = manifest.companions[slot];
+      if (!existing) return null;
+      const updated = transform(existing);
+      if (!updated) return null;
+      manifest.companions[slot] = updated;
+      this.saveManifest(manifest);
+      return updated;
+    });
+  }
+
   loadSlot(slot: string): Companion | null {
     return this.loadManifest().companions[slot] ?? null;
   }
@@ -505,6 +524,9 @@ export class FileBuddyStorage
   }
 
   ensureStableIdentity(): string {
+    const sharedUserId = configuredSharedUserId();
+    if (sharedUserId) return sharedUserId;
+
     return this.withLock(() => {
       this.ensureDir();
       try {

package/adapters/shared/widget-layout.ts

@@ -1,6 +1,16 @@
+import { RARITY_STARS } from "../../core/engine.ts";
+import type { Achievement } from "../../core/achievements.ts";
+import { getArtFrame, HAT_ART } from "../../core/render-model.ts";
+import type { Companion, ReactionState } from "../../core/model.ts";
+import { getRarityColor } from "../../server/theme.ts";
+
 const ANSI_PATTERN = /\x1b\[[0-?]*[ -/]*[@-~]/g;
 const ART_GAP = "  ";
 const DEFAULT_WIDGET_WIDTH = 78;
+const RESET = "\x1b[0m";
+const DIM_ITALIC = "\x1b[2;3m";
+const resizeSubscribers = new Set<() => void>();
+let resizeDispatcher: (() => void) | null = null;
 
 export const WIDGET_MAX_LINES = 10;
 
@@ -8,10 +18,33 @@ export function stripAnsi(text: string): string {
   return text.replace(ANSI_PATTERN, "");
 }
 
+// East-Asian Wide/Fullwidth ranges. These MUST stay in sync with char_width()
+// in statusline/buddy-status.sh \u2014 the two surfaces render the same companion
+// card, and a disagreement here shears the bubble: borders sized from an
+// undercounted width, text rows drawn at their true width.
+//
+// Box Drawing (U+2500-U+257F) and Block Elements sit inside the CJK span but
+// are narrow, so they are carved out explicitly, matching the shell.
+const BOX_DRAWING_START = 0x2500; // 9472
+const BOX_DRAWING_END = 0x25bf; // 9631
+const CJK_START = 0x3000; // 12288 \u2014 CJK punctuation through Hangul syllables
+const CJK_END = 0x9fff; // 40959
+const FULLWIDTH_START = 0xff01; // 65281 \u2014 Fullwidth ASCII variants
+const FULLWIDTH_END = 0xff60; // 65376
+
+function isEastAsianWide(codePoint: number): boolean {
+  if (codePoint >= BOX_DRAWING_START && codePoint <= BOX_DRAWING_END) return false;
+  if (codePoint >= CJK_START && codePoint <= CJK_END) return true;
+  if (codePoint >= FULLWIDTH_START && codePoint <= FULLWIDTH_END) return true;
+  return false;
+}
+
 function characterWidth(character: string, next?: string): number {
   if (character === "\u200d" || /[\uFE00-\uFE0F]/u.test(character)) return 0;
   if (next === "\uFE0F" && /\p{Emoji}/u.test(character)) return 2;
-  return /\p{Emoji_Presentation}/u.test(character) ? 2 : 1;
+  if (/\p{Emoji_Presentation}/u.test(character)) return 2;
+  const codePoint = character.codePointAt(0);
+  return codePoint !== undefined && isEastAsianWide(codePoint) ? 2 : 1;
 }
 
 export function displayWidth(text: string): number {
@@ -69,7 +102,26 @@ export function wrapReaction(reaction: string, width: number, maxLines: number):
 
 export function getWidgetWidth(): number {
   const columns = process.stdout.columns;
-  return columns && columns > 0 ? Math.max(24, columns - 2) : DEFAULT_WIDGET_WIDTH;
+  return columns && columns > 0 ? Math.max(1, columns - 2) : DEFAULT_WIDGET_WIDTH;
+}
+
+/** Share one host resize listener across all adapter UI instances. */
+export function subscribeToWidgetResize(callback: () => void): () => void {
+  resizeSubscribers.add(callback);
+  if (!resizeDispatcher) {
+    resizeDispatcher = () => {
+      for (const subscriber of resizeSubscribers) subscriber();
+    };
+    process.stdout.on("resize", resizeDispatcher);
+  }
+
+  return () => {
+    resizeSubscribers.delete(callback);
+    if (resizeSubscribers.size === 0 && resizeDispatcher) {
+      process.stdout.removeListener("resize", resizeDispatcher);
+      resizeDispatcher = null;
+    }
+  };
 }
 
 export function getDetailsWidth(art: string[], width: number = getWidgetWidth()): number {
@@ -94,3 +146,197 @@ export function composeDetailsAndArt(
     return `${boundedDetailLine}${" ".repeat(Math.max(0, sideWidth - displayWidth(boundedDetailLine)))}${ART_GAP}${artLine}${" ".repeat(Math.max(0, artWidth - displayWidth(artLine)))}`;
   });
 }
+
+function trimArt(line: string): string {
+  return line.replace(/\s+$/g, "");
+}
+
+function centerToWidth(text: string, width: number): string {
+  const bounded = truncateToWidth(text, width);
+  const remaining = Math.max(0, width - displayWidth(bounded));
+  const left = Math.floor(remaining / 2);
+  return `${" ".repeat(left)}${bounded}${" ".repeat(remaining - left)}`;
+}
+
+function padLine(line: string, width: number): string {
+  const bounded = displayWidth(line) > width ? truncateToWidth(line, width) : line;
+  return `${bounded}${" ".repeat(Math.max(0, width - displayWidth(bounded)))}`;
+}
+
+function frameReaction(reaction: string, achievements: Achievement[], innerWidth: number): string[] {
+  const maxContentLines = WIDGET_MAX_LINES - 2;
+  const trimmedReaction = reaction.trim();
+  const achievementLines = achievements.map((achievement) => `🏆 ${achievement.name}`);
+  const reactionMax = Math.max(0, maxContentLines - achievementLines.length);
+  const reactionLines = trimmedReaction ? wrapReaction(trimmedReaction, innerWidth, reactionMax) : [];
+  const content = reactionLines.concat(achievementLines).slice(0, maxContentLines);
+  const paddedContent = content.length === 1 ? ["", ...content] : content;
+
+  const top = `.${"-".repeat(innerWidth + 2)}.`;
+  const bottom = `\`${"-".repeat(innerWidth + 2)}'`;
+  return [
+    top,
+    ...paddedContent.map((line) => `| ${DIM_ITALIC}${padLine(line, innerWidth)}${RESET} |`),
+    bottom,
+  ];
+}
+
+/**
+ * Render the hero card shared by the OMP, Pi, and Claude Code surfaces.
+ * The bubble is deliberately dropped as a unit when the sprite cannot fit.
+ */
+export function renderCompanionWidget(
+  companion: Companion,
+  reaction: ReactionState | null | undefined,
+  achievements: Achievement[] = [],
+  width: number = getWidgetWidth(),
+  frame: number = Math.floor(Date.now() / 700),
+): string[] {
+  const safeWidth = Math.max(1, Math.floor(width));
+  const art = getArtFrame(companion.bones.species, companion.bones.eye, frame).map(trimArt);
+  if (companion.bones.hat !== "none" && !art[0]?.trim()) art[0] = HAT_ART[companion.bones.hat];
+
+  const color = getRarityColor(companion.bones.rarity);
+  const label = `${companion.name} ${RARITY_STARS[companion.bones.rarity]}${companion.bones.shiny ? " ✨" : ""}`;
+  const artWidth = Math.max(...art.map(displayWidth), 0);
+  const labelWidth = displayWidth(label);
+  const spriteWidth = Math.min(safeWidth, Math.max(artWidth, labelWidth));
+  const clippedArt = art.map((line) => `${color}${padLine(line, spriteWidth)}${RESET}`);
+  const clippedLabel = `${color}${centerToWidth(label, spriteWidth)}${RESET}`;
+
+  const minBubbleInner = 12;
+  const tailWidth = 3;
+  const maxBubbleInner = safeWidth - spriteWidth - tailWidth - 4;
+  const hasContent = Boolean(reaction?.reaction?.trim()) || achievements.length > 0;
+  const canFrame = hasContent && maxBubbleInner >= minBubbleInner;
+  const bubbleInner = canFrame ? maxBubbleInner : 0;
+  const bubble = canFrame ? frameReaction(reaction?.reaction ?? "", achievements, bubbleInner) : [];
+  const bubbleWidth = bubbleInner + 4;
+  const cardWidth = canFrame ? bubbleWidth + tailWidth + spriteWidth : spriteWidth;
+
+  const achievementSprites = canFrame
+    ? []
+    : achievements.map((achievement) => `${DIM_ITALIC}${padLine(`🏆 ${achievement.name}`, spriteWidth)}${RESET}`);
+  const spriteBody = [...clippedArt, clippedLabel, ...achievementSprites];
+  const height = Math.max(spriteBody.length, bubble.length);
+  const connectorRow = canFrame ? Math.min(bubble.length - 2, Math.max(1, Math.floor(bubble.length / 2))) : -1;
+
+  return Array.from({ length: Math.min(WIDGET_MAX_LINES, height) }, (_, index) => {
+    const spriteLine = spriteBody[index] ?? "";
+    const sprite = padLine(spriteLine, spriteWidth);
+    let body: string;
+    if (canFrame) {
+      const bubbleLine = bubble[index] ?? " ".repeat(bubbleWidth);
+      const tail = index === connectorRow ? "-- " : "   ";
+      body = `${bubbleLine}${tail}${sprite}`;
+    } else {
+      body = sprite;
+    }
+    return `${" ".repeat(Math.max(0, safeWidth - cardWidth))}${body}`;
+  });
+}
+
+export interface BuddyWidgetScheduler {
+  setTimeout(callback: () => void, ms?: number): Timer;
+  clearTimer(timer: Timer): void;
+}
+
+/**
+ * Width-aware buddy widget manager.
+ *
+ * Renders once when state arrives, then re-renders with the current terminal
+ * width after coalescing rapid process.stdout resize events. Callers supply
+ * only their harness `setWidget` and the current state; this class owns the
+ * resize subscription, debounce, and re-render logic.
+ */
+export class BuddyWidget {
+  private readonly getWidth: () => number;
+  private scheduler: BuddyWidgetScheduler;
+  private readonly coalesceMs: number;
+  private setWidget: ((lines: string[]) => void) | null = null;
+  private state: { companion: Companion; reaction: ReactionState | null; achievements: Achievement[] } | null = null;
+  private resizeUnsubscribe: (() => void) | null = null;
+  private timer: Timer | null = null;
+
+  constructor(options?: {
+    getWidth?: () => number;
+    scheduler?: BuddyWidgetScheduler;
+    coalesceMs?: number;
+  }) {
+    this.getWidth = options?.getWidth ?? getWidgetWidth;
+    this.scheduler = options?.scheduler ?? {
+      setTimeout: globalThis.setTimeout.bind(globalThis),
+      clearTimer: globalThis.clearTimeout.bind(globalThis),
+    };
+    this.coalesceMs = options?.coalesceMs ?? 50;
+  }
+
+  /**
+   * Render immediately with the current state and start (or renew) the shared
+   * resize subscription. The `setWidget` callback is the adapter's harness
+   * setter bound to the current UI context.
+   */
+  refresh(
+    setWidget: (lines: string[]) => void,
+    companion: Companion,
+    reaction: ReactionState | null,
+    achievements: Achievement[] = [],
+    scheduler?: BuddyWidgetScheduler,
+  ): void {
+    // Cancel any pending resize timer before swapping the scheduler or state
+    // so clearTimer is always paired with the scheduler that created the timer.
+    this.cancelTimer();
+    this.setWidget = setWidget;
+    if (scheduler) this.scheduler = scheduler;
+    this.state = { companion, reaction, achievements };
+    this.renderAndSet();
+    this.subscribe();
+  }
+
+  /** Stop reacting to resizes without unsubscribing from the shared listener. */
+  clear(): void {
+    this.cancelTimer();
+    this.state = null;
+  }
+
+  /** Tear down timers and the shared resize listener. */
+  dispose(): void {
+    this.cancelTimer();
+    this.resizeUnsubscribe?.();
+    this.resizeUnsubscribe = null;
+    this.state = null;
+    this.setWidget = null;
+  }
+
+  private subscribe(): void {
+    if (this.resizeUnsubscribe) return;
+    this.resizeUnsubscribe = subscribeToWidgetResize(() => this.onResize());
+  }
+
+  private onResize(): void {
+    // A cleared widget has no state/setter to render; don't schedule work.
+    if (!this.state || !this.setWidget) return;
+    this.cancelTimer();
+    this.timer = this.scheduler.setTimeout(() => {
+      this.timer = null;
+      try {
+        this.renderAndSet();
+      } catch (error) {
+        console.error("BuddyWidget render failed:", error);
+      }
+    }, this.coalesceMs);
+  }
+  private renderAndSet(): void {
+    if (!this.state || !this.setWidget) return;
+    const width = this.getWidth();
+    const lines = renderCompanionWidget(this.state.companion, this.state.reaction, this.state.achievements, width);
+    this.setWidget(lines);
+  }
+
+  private cancelTimer(): void {
+    if (this.timer !== null) {
+      this.scheduler.clearTimer(this.timer);
+      this.timer = null;
+    }
+  }
+}

package/cli/settings.ts

@@ -19,7 +19,7 @@ if (!key) {
   coding-buddy settings
   ─────────────────────
   Comment cooldown:  ${cfg.commentCooldown}s    (0 = no throttling, default 30)
-  Reaction TTL:      ${cfg.reactionTTL}s    (0 = permanent, default 0)
+  Reaction TTL:      ${cfg.reactionTTL}s    (0 = permanent, default 900)
 
   Change:  bun run settings cooldown <seconds>
            bun run settings ttl <seconds>

package/cli/tui.tsx

@@ -1459,7 +1459,7 @@ interface SettingDef {
 
 const SETTING_DEFS: SettingDef[] = [
   { key: "commentCooldown", label: "Comment Cooldown", description: ["Minimum seconds between", "buddy status line comments.", "", "Lower = chatty, Higher = quiet"], type: "number", min: 0, default: "30" },
-  { key: "reactionTTL", label: "Reaction TTL", description: ["How long reactions stay", "visible in status line.", "", "0 = permanent"], type: "number", min: 0, default: "0" },
+  { key: "reactionTTL", label: "Reaction TTL", description: ["How long reactions stay", "visible in status line.", "", "0 = permanent"], type: "number", min: 0, default: "900" },
   { key: "bubbleStyle", label: "Bubble Style", description: ["Speech bubble style.", "", 'classic → "quoted"', "round → (parens)"], type: "options", options: ["classic", "round"], default: "classic" },
   { key: "bubblePosition", label: "Bubble Position", description: ["Bubble placement.", "", "top → above buddy", "left → beside buddy"], type: "options", options: ["top", "left"], default: "top" },
   { key: "showRarity", label: "Show Rarity", description: ["Show rarity stars in", "the status line.", "", "true → ★★★★ visible", "false → hidden"], type: "options", options: ["true", "false"], default: "true" },

package/core/command-service.ts

@@ -142,6 +142,19 @@ export class BuddyCommandService {
     }));
   }
 
+  setPersonalityForSlot(
+    slot: string,
+    personality: string,
+    expectedPersonality: string,
+  ): Companion | null {
+    const trimmed = personality.trim();
+    if (!trimmed) throw new Error("Buddy personality cannot be empty.");
+    return this.deps.buddies.updateSlot(slot, (companion) => {
+      if (companion.personality !== expectedPersonality) return null;
+      return { ...companion, personality: trimmed };
+    });
+  }
+
   saveBuddy(slot?: string): SaveBuddyResult {
     const { companion, slot: activeSlot } = this.ensureCompanion();
     if (slot?.trim()) {

package/core/engine.ts

@@ -81,6 +81,13 @@ export const EYES = [
   "\u00b0",
 ] as const;
 export type Eye = (typeof EYES)[number];
+const DEFAULT_EYE: Eye = "\u00b0";
+
+/** Keep persisted/runtime eye values from leaking descriptor words into art. */
+export function resolveEyeGlyph(eye: unknown): Eye {
+  return EYES.find((candidate) => candidate === eye) ?? DEFAULT_EYE;
+}
+
 
 export const HATS = [
   "none",
@@ -131,6 +138,8 @@ export interface Companion {
   hatchedAt: number;
   userId: string;
 }
+export const PERSONALITY_MAX_LENGTH = 500;
+
 
 // ─── Hash: wyhash via Bun.hash, pure JS fallback ───────────────────────────
 // Matches Zig stdlib wyhash v4.2 (used by Bun.hash). The pure JS implementation
@@ -401,8 +410,8 @@ const FACE_TEMPLATES: Record<Species, string> = {
   pikachu: "({E}ω{E})",
 };
 
-export function renderFace(species: Species, eye: Eye): string {
-  return FACE_TEMPLATES[species].replace(/\{E\}/g, eye);
+export function renderFace(species: Species, eye: string): string {
+  return FACE_TEMPLATES[species].replace(/\{E\}/g, resolveEyeGlyph(eye));
 }
 
 export function renderBuddy(bones: BuddyBones): string {

package/core/identity.ts

@@ -0,0 +1,15 @@
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+/** Explicit opt-in identity shared by the Claude, OMP, and Pi adapters. */
+export function configuredSharedUserId(): string | undefined {
+  const value = process.env.CODING_BUDDY_USER_ID?.trim();
+  return value || undefined;
+}
+
+/** Shared state is opt-in so existing harness-specific worlds stay isolated. */
+export function sharedStateDir(): string | undefined {
+  if (!configuredSharedUserId()) return undefined;
+  const configured = process.env.CODING_BUDDY_STATE_DIR?.trim();
+  return configured || join(homedir(), ".coding-buddy", "shared");
+}

package/core/model.ts

@@ -38,7 +38,10 @@ export interface BuddyConfig {
   bubblePosition: "top" | "left";
   showRarity: boolean;
   statusLineEnabled: boolean;
+  statuslineDensity?: "auto" | "full" | "compact" | "minimal";
   turnCommentModel?: BuddyTurnCommentModelConfig;
+  /** Optional per-host bound for end-of-turn reaction LLM calls (ms). */
+  turnCommentTimeoutMs?: number;
 }
 
 export interface GlobalCounters {

package/core/ports.ts

@@ -17,6 +17,10 @@ export interface BuddyRepository {
   updateActive(transform: (companion: Companion) => Companion): Companion;
   loadSlot(slot: string): Companion | null;
   saveSlot(slot: string, companion: Companion): void;
+  updateSlot(
+    slot: string,
+    transform: (companion: Companion) => Companion | null,
+  ): Companion | null;
   deleteSlot(slot: string): void;
   listSlots(): Array<{ slot: string; companion: Companion }>;
   loadActiveSlot(): string | null;

package/core/reactions.ts

@@ -1,4 +1,4 @@
-import type { BuddyStats, Species, Rarity } from "./engine.ts";
+import { PERSONALITY_MAX_LENGTH, type BuddyStats, type Species, type Rarity } from "./engine.ts";
 
 export type ReactionReason =
   | "hatch" | "pet" | "error" | "test-fail" | "large-diff" | "turn" | "idle"
@@ -675,6 +675,33 @@ export function generatePersonalityPrompt(
     `Inspiration words: ${vibes.join(", ")}`,
     shiny ? "SHINY variant — extra special." : "",
     "",
-    "Return JSON: {\"name\": \"1-14 chars\", \"personality\": \"2-3 sentences describing behavior\"}",
+    "Return JSON: {\"name\": \"1-14 chars\", \"personality\": \"2-3 sentences, 1-500 chars\"}",
   ].filter(Boolean).join("\n");
 }
+export function extractGeneratedPersonality(
+  text: string,
+  maxLength: number = PERSONALITY_MAX_LENGTH,
+): string | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed);
+  } catch {
+    const match = trimmed.match(/\{[\s\S]*\}/);
+    if (!match) return null;
+    try {
+      parsed = JSON.parse(match[0]);
+    } catch {
+      return null;
+    }
+  }
+
+  if (!parsed || typeof parsed !== "object") return null;
+  const personality = (parsed as Record<string, unknown>).personality;
+  if (typeof personality !== "string") return null;
+  const clean = personality.trim();
+  if (!clean || clean.length > maxLength) return null;
+  return clean;
+}

package/core/render-model.ts

@@ -1,10 +1,11 @@
-import type { Eye, Species } from "./engine.ts";
+import { resolveEyeGlyph, type Species } from "./engine.ts";
 import { HAT_ART, SPECIES_ART } from "./art-data.ts";
 
-export function getArtFrame(species: Species, eye: Eye, frame: number = 0): string[] {
+export function getArtFrame(species: Species, eye: string, frame: number = 0): string[] {
   const frames = SPECIES_ART[species];
   const f = frames[frame % frames.length];
-  return f.map((line) => line.replace(/\{E\}/g, eye));
+  const glyph = resolveEyeGlyph(eye);
+  return f.map((line) => line.replace(/\{E\}/g, glyph));
 }
 
 export { HAT_ART, SPECIES_ART };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramarivera/coding-buddy",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Persistent coding companion for Claude Code, Pi, and Oh My Pi",
   "type": "module",
   "omp": {
@@ -17,7 +17,6 @@
     "coding-buddy": "cli/index.ts"
   },
   "scripts": {
-    "postinstall": "node scripts/postinstall.cjs",
     "server": "bun run server/index.ts",
     "pick": "bun run cli/pick.ts",
     "hunt": "bun run cli/hunt.ts",
@@ -36,7 +35,11 @@
     "tui": "bun run cli/tui.tsx",
     "test": "bun test",
     "typecheck": "tsc --noEmit",
-    "gen:emoji-widths": "bun run scripts/gen-emoji-widths.ts"
+    "gen:emoji-widths": "bun run scripts/gen-emoji-widths.ts",
+    "ci:statusline": "bash scripts/ci/check-statusline.sh",
+    "ci:vhs:render": "bash scripts/ci/render-vhs-goldens.sh",
+    "ci:vhs:update": "bash scripts/ci/render-vhs-goldens.sh --update",
+    "ci:vhs:check": "bash scripts/ci/check-vhs-goldens.sh"
   },
   "files": [
     "core/",

package/scripts/ci/Dockerfile.vhs

@@ -0,0 +1,125 @@
+# syntax=docker/dockerfile:1.7
+# Platform-matched VHS golden renderer.
+#
+# Goldens MUST be produced on linux/amd64 with the same font + tool pins that
+# GitHub Actions ubuntu-latest uses. Rendering on macOS (or arm64 Linux) makes
+# SSIM comparisons fail on font rasterization alone.
+#
+# Build:
+#   docker build --platform linux/amd64 -f scripts/ci/Dockerfile.vhs \
+#     -t coding-buddy-vhs:local scripts/ci
+#
+# Run (prefer scripts/ci/render-vhs-goldens.sh, which wraps this image):
+#   docker run --rm --platform linux/amd64 \
+#     -v "$PWD":/work -w /work coding-buddy-vhs:local \
+#     bash scripts/ci/render-vhs-goldens.sh --native [--update]
+
+FROM --platform=linux/amd64 ubuntu:24.04
+
+ENV DEBIAN_FRONTEND=noninteractive \
+    LANG=C.UTF-8 \
+    LC_ALL=C.UTF-8 \
+    COLORTERM=truecolor \
+    CI=
+
+# Pin exact Ubuntu 24.04 (noble) package versions so runner image drift does
+# not silently re-rasterize glyphs. Bump deliberately when re-baselining.
+#
+# Includes Chromium shared libs for vhs/rod headless browser, plus the fonts
+# used by the tapes (DejaVu mono + Noto CJK/emoji).
+RUN apt-get update -qq \
+ && apt-get install -y -qq --no-install-recommends \
+      ca-certificates=20260601~24.04.1 \
+      curl=8.5.0-2ubuntu10.11 \
+      xz-utils=5.6.1+really5.4.5-1ubuntu0.3 \
+      unzip=6.0-28ubuntu4.1 \
+      jq=1.7.1-3ubuntu0.24.04.2 \
+      python3=3.12.3-0ubuntu2.1 \
+      ffmpeg=7:6.1.1-3ubuntu5 \
+      ttyd=1.7.4-1build2 \
+      fonts-dejavu-core=2.37-8 \
+      fonts-noto-core=20201225-2 \
+      fonts-noto-mono=20201225-2 \
+      fonts-noto-color-emoji=2.047-0ubuntu0.24.04.1 \
+      fonts-noto-cjk=1:20230817+repack1-3 \
+      fonts-liberation=1:2.1.5-3 \
+      fontconfig=2.15.0-1.1ubuntu2 \
+      findutils=4.9.0-5build1 \
+      bash=5.2.21-2ubuntu4 \
+      libnss3=2:3.98-1ubuntu0.2 \
+      libnspr4=2:4.35-1.1build1 \
+      libatk1.0-0t64=2.52.0-1build1 \
+      libatk-bridge2.0-0t64=2.52.0-1build1 \
+      libatspi2.0-0t64=2.52.0-1build1 \
+      libcups2t64=2.4.7-1.2ubuntu7.14 \
+      libdrm2=2.4.125-1ubuntu0.1~24.04.2 \
+      libxkbcommon0=1.6.0-1build1 \
+      libxcomposite1=1:0.4.5-1build3 \
+      libxdamage1=1:1.1.6-1build1 \
+      libxfixes3=1:6.0.0-2build1 \
+      libxrandr2=2:1.5.2-2build1 \
+      libgbm1=25.2.8-0ubuntu0.24.04.2 \
+      libasound2t64=1.2.11-1ubuntu0.3 \
+      libpango-1.0-0=1.52.1+ds-1build1 \
+      libcairo2=1.18.0-3build1 \
+      libxshmfence1=1.3-1build5 \
+      libglib2.0-0t64=2.80.0-6ubuntu3.8 \
+      libgtk-3-0t64=3.24.41-4ubuntu1.3 \
+      libx11-6=2:1.8.7-1build1 \
+      libx11-xcb1=2:1.8.7-1build1 \
+      libxcb1=1.15-1ubuntu2 \
+      libxext6=2:1.3.4-1build2 \
+      libxi6=2:1.8.1-1build1 \
+ && rm -rf /var/lib/apt/lists/*
+
+# Pin vhs binary.
+ARG VHS_VERSION=0.11.0
+RUN bash -lc "set -euo pipefail \
+  && TMP=\$(mktemp -d) \
+  && BASE=https://github.com/charmbracelet/vhs/releases/download/v${VHS_VERSION} \
+  && curl -fsSL -o \"\$TMP/vhs.tgz\" \"\${BASE}/vhs_${VHS_VERSION}_Linux_x86_64.tar.gz\" \
+  && tar -xzf \"\$TMP/vhs.tgz\" -C \"\$TMP\" \
+  && BIN=\$(find \"\$TMP\" -type f -name vhs | head -n1) \
+  && install -m 755 \"\$BIN\" /usr/local/bin/vhs \
+  && rm -rf \"\$TMP\" \
+  && vhs --version"
+
+# Bun (baseline build — OrbStack/QEMU amd64 often lacks AVX).
+# Install system-wide so non-root `docker run --user` still finds it.
+ARG BUN_VERSION=1.3.9
+RUN bash -lc "set -euo pipefail \
+  && TMP=\$(mktemp -d) \
+  && curl -fsSL -o \"\$TMP/bun.zip\" \
+       \"https://github.com/oven-sh/bun/releases/download/bun-v${BUN_VERSION}/bun-linux-x64-baseline.zip\" \
+  && unzip -q \"\$TMP/bun.zip\" -d \"\$TMP\" \
+  && install -m 755 \"\$TMP/bun-linux-x64-baseline/bun\" /usr/local/bin/bun \
+  && rm -rf \"\$TMP\" \
+  && bun --version"
+
+COPY fonts.conf /etc/fonts/conf.d/99-coding-buddy-vhs.conf
+RUN fc-cache -f \
+ && fc-match "DejaVu Sans Mono" \
+ && fc-match "Noto Color Emoji" \
+ && fc-match "Noto Sans CJK SC"
+
+# Chromium refuses to start as root without --no-sandbox. Prefer the stock
+# ubuntu user (uid 1000 on noble) when present; otherwise create vhs:1000.
+RUN if id -u ubuntu >/dev/null 2>&1; then \
+      usermod -l vhs ubuntu; \
+      groupmod -n vhs ubuntu; \
+      mv /home/ubuntu /home/vhs; \
+      usermod -d /home/vhs -s /bin/bash vhs; \
+    else \
+      useradd --create-home --uid 1000 --shell /bin/bash vhs; \
+    fi \
+ && mkdir -p /home/vhs/.cache /home/vhs/.config \
+ && chown -R 1000:1000 /home/vhs
+
+ENV HOME=/home/vhs \
+    XDG_CACHE_HOME=/home/vhs/.cache \
+    XDG_CONFIG_HOME=/home/vhs/.config
+
+WORKDIR /work
+USER vhs
+ENTRYPOINT []
+CMD ["bash", "scripts/ci/render-vhs-goldens.sh", "--native"]