pi-jar 0.1.0

package/src/flame.ts

@@ -0,0 +1,245 @@
+/**
+ * Pixel flame: one continuous flame with a rounded base that tapers into a softly wavering
+ * tip, animated by smooth value noise and a gentle sway, drawn with half blocks (two simulated
+ * rows per terminal row) plus wisps, embers and sparks.
+ * Every frame is a pure function of (seed, frame) so tests and motion-off stay stable.
+ */
+
+/** Odd, so the flame is centered on a whole column (and on the π beneath it). */
+export const FLAME_WIDTH = 21;
+/** Simulated rows; rendered as FLAME_ROWS terminal rows. */
+const SIM_ROWS = 24;
+export const FLAME_ROWS = SIM_ROWS / 2;
+const MAX_HEAT = 9;
+const WARMUP = 28;
+export const MAX_PARTICLES = 8;
+/** Where the rounded base is widest (fraction of the flame's height) and its half width. */
+const BELLY = 0.3;
+const BELLY_HALF_WIDTH = 5.6;
+const MAX_WISPS = 2;
+
+/** Heat ramp from deep ember red to a pale-gold core. Index 0 is transparent. */
+export const FLAME_RAMP = [
+  "", "#2B0A05", "#5C1407", "#8F2207", "#C7400C", "#E8601A", "#F58A24", "#FFB23A", "#FFD56A", "#FFF3C4"
+] as const;
+
+export type FlameColor = "accent" | "warning" | "error" | "muted" | "dim";
+export type FlamePaint = (color: FlameColor, text: string) => string;
+
+interface Particle { x: number; y: number; vy: number; drift: number; life: number; max: number; spark: boolean }
+
+/** Deterministic PRNG (mulberry32). */
+export function prng(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function hexRgb(hex: string): [number, number, number] | undefined {
+  const value = hex.replace("#", "");
+  if (value.length !== 6) return undefined;
+  return [0, 2, 4].map((at) => Number.parseInt(value.slice(at, at + 2), 16)) as [number, number, number];
+}
+
+export function rgb(hex: string, text: string): string {
+  const color = hexRgb(hex);
+  return color ? `\x1b[38;2;${color[0]};${color[1]};${color[2]}m${text}\x1b[39m` : text;
+}
+
+function cell(top: number, bottom: number): string {
+  const up = hexRgb(FLAME_RAMP[top] ?? "");
+  const down = hexRgb(FLAME_RAMP[bottom] ?? "");
+  if (up && down) return `\x1b[38;2;${up[0]};${up[1]};${up[2]}m\x1b[48;2;${down[0]};${down[1]};${down[2]}m▀\x1b[39m\x1b[49m`;
+  if (up) return `\x1b[38;2;${up[0]};${up[1]};${up[2]}m▀\x1b[39m`;
+  if (down) return `\x1b[38;2;${down[0]};${down[1]};${down[2]}m▄\x1b[39m`;
+  return " ";
+}
+
+/** Terminals without 24-bit color get shaded blocks in theme colors instead. */
+function shadedCell(top: number, bottom: number, paint: FlamePaint): string {
+  const heat = Math.max(top, bottom);
+  if (!heat) return " ";
+  const glyph = heat >= 8 ? "█" : heat >= 6 ? "▓" : heat >= 4 ? "▒" : "░";
+  return paint(heat >= 7 ? "warning" : heat >= 4 ? "error" : "dim", glyph);
+}
+
+export function supportsTruecolor(env: NodeJS.ProcessEnv = process.env): boolean {
+  const value = (env.COLORTERM ?? "").toLowerCase();
+  return value === "truecolor" || value === "24bit" || /-direct$/.test(env.TERM ?? "");
+}
+
+/** Smooth 2D value noise in [0, 1) from a seeded integer lattice. */
+function valueNoise(seed: number): (x: number, y: number) => number {
+  const lattice = (ix: number, iy: number) => {
+    let h = Math.imul(ix, 374761393) ^ Math.imul(iy, 668265263) ^ Math.imul(seed, 982451653);
+    h = Math.imul(h ^ (h >>> 13), 1274126177);
+    return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+  };
+  const smooth = (t: number) => t * t * (3 - 2 * t);
+  return (x, y) => {
+    const ix = Math.floor(x), iy = Math.floor(y);
+    const fx = smooth(x - ix), fy = smooth(y - iy);
+    const top = lattice(ix, iy) + (lattice(ix + 1, iy) - lattice(ix, iy)) * fx;
+    const bottom = lattice(ix, iy + 1) + (lattice(ix + 1, iy + 1) - lattice(ix, iy + 1)) * fx;
+    return top + (bottom - top) * fy;
+  };
+}
+
+interface Wisp { x: number; y: number; vy: number; life: number; max: number }
+
+export class FlameSim {
+  readonly width: number;
+  readonly rows: number;
+  frame = 0;
+  private heat: number[];
+  private particles: Particle[] = [];
+  private wisps: Wisp[] = [];
+  private readonly random: () => number;
+  private readonly noise: (x: number, y: number) => number;
+  private readonly center: number;
+  /** Current flame height (fraction of the grid) and horizontal lean of the tip. */
+  private height = 0.9;
+  private sway = 0;
+
+  constructor(seed = 1, width = FLAME_WIDTH, rows = SIM_ROWS) {
+    this.width = width;
+    this.rows = rows;
+    this.center = (width - 1) / 2;
+    this.heat = new Array(width * rows).fill(0);
+    this.random = prng(seed);
+    this.noise = valueNoise(seed);
+    for (let index = 0; index < WARMUP; index++) this.step();
+    this.frame = 0;
+  }
+
+  /**
+   * Half width at height fraction `h` of the flame: a circular bulb below the belly, then a
+   * smooth taper to the tip. The base is rounded, not flat, and narrower than the belly.
+   */
+  private profile(h: number): number {
+    if (h < BELLY) {
+      const k = (BELLY - h) / (BELLY + 0.03);
+      return BELLY_HALF_WIDTH * Math.sqrt(Math.max(0, 1 - k * k));
+    }
+    return BELLY_HALF_WIDTH * Math.pow(Math.max(0, 1 - (h - BELLY) / (1 - BELLY)), 1.25);
+  }
+
+  /** Center column at height fraction `h`: the tip sways and wanders more than the base. */
+  private axis(h: number): number {
+    const t = this.frame;
+    return this.center + this.sway * h * h + (this.noise(h * 1.6, t * 0.06 + 11) - 0.5) * 1.6 * h;
+  }
+
+  step(): void {
+    const { width, rows, random } = this;
+    const t = this.frame;
+    // Slow, layered motion: breathing height and a sway that eases side to side.
+    this.height = 0.84 + 0.1 * this.noise(t * 0.05, 3.1) + 0.05 * Math.sin(t * 0.21);
+    this.sway = 1.4 * Math.sin(t * 0.07) + 0.6 * (this.noise(t * 0.09, 7.3) - 0.5) * 2;
+    const heat = this.heat;
+    for (let y = 0; y < rows; y++) {
+      const v = (rows - 1 - y) / (rows - 1);
+      const h = v / this.height;
+      const axis = this.axis(Math.min(1, h));
+      // Edges ripple upward; the ripple grows toward the tip so the top licks while the base stays calm.
+      const ripple = 1 + (this.noise(h * 3.2 - t * 0.22, 5.5) - 0.5) * (0.08 + 0.85 * h);
+      const half = h > 1 ? 0 : this.profile(h) * ripple;
+      for (let x = 0; x < width; x++) {
+        let value = 0;
+        if (half > 0.2 && x > 0 && x < width - 1) {
+          const d = Math.abs(x - axis) / half;
+          if (d < 1) {
+            // Hot, pale core low in the flame, cooling to red at the rim and the tip.
+            const core = Math.min(1, 1.3 - 0.95 * h);
+            const texture = 0.88 + 0.24 * this.noise(x * 0.8, y * 0.55 - t * 0.35);
+            value = MAX_HEAT * (1 - Math.pow(d, 1.8)) * core * texture;
+          }
+        }
+        heat[y * width + x] = Math.max(0, Math.min(MAX_HEAT, Math.round(value)));
+      }
+    }
+    this.moveWisps();
+    this.moveParticles();
+    this.frame++;
+  }
+
+  /** Small pieces of flame that break off the tip, rise and fade. */
+  private moveWisps(): void {
+    const { width, rows, random, heat } = this;
+    this.wisps = this.wisps.map((wisp) => ({ ...wisp, y: wisp.y + wisp.vy, x: wisp.x + this.sway * 0.05, life: wisp.life - 1 }))
+      .filter((wisp) => wisp.life > 0 && wisp.y >= 0);
+    if (this.wisps.length < MAX_WISPS && random() < 0.09) {
+      const tip = Math.round((rows - 1) * (1 - this.height));
+      const max = 4 + Math.floor(random() * 4);
+      this.wisps.push({ x: this.axis(1), y: Math.max(0, tip - 1), vy: -0.6 - random() * 0.4, life: max, max });
+    }
+    for (const wisp of this.wisps) {
+      const x = Math.round(wisp.x), y = Math.round(wisp.y);
+      if (x < 1 || x >= width - 1 || y < 0 || y >= rows) continue;
+      const value = Math.round(2 + 3 * (wisp.life / wisp.max));
+      heat[y * width + x] = Math.max(heat[y * width + x]!, value);
+    }
+  }
+
+  private topOf(x: number): number | undefined {
+    for (let y = 0; y < this.rows; y++) if (this.heat[y * this.width + x]! >= 3) return y;
+    return undefined;
+  }
+
+  private moveParticles(): void {
+    const random = this.random;
+    this.particles = this.particles
+      .map((particle) => ({ ...particle, y: particle.y + particle.vy, x: particle.x + particle.drift + (random() - 0.5) * 0.3, life: particle.life - 1 }))
+      .filter((particle) => particle.life > 0 && particle.y >= 0 && particle.x >= 1 && particle.x < this.width - 1.5);
+    const spawn = (spark: boolean) => {
+      if (this.particles.length >= MAX_PARTICLES) return;
+      // Embers lift off the upper flame, near its swaying axis.
+      const x = Math.round(this.axis(0.8) + (random() - 0.5) * 5);
+      const top = this.topOf(Math.max(0, Math.min(this.width - 1, x)));
+      if (top == null) return;
+      const max = spark ? 2 + Math.floor(random() * 3) : 8 + Math.floor(random() * 13);
+      this.particles.push({ x, y: Math.max(0, top - 1), vy: spark ? -1.1 - random() * 0.4 : -0.3 - random() * 0.5,
+        drift: (random() - 0.5) * 0.5, life: max, max, spark });
+    };
+    if (random() < 0.3) spawn(false);
+    if (random() < 0.12) spawn(false);
+    if (random() < 0.08) spawn(true);
+  }
+
+  particleCount(): number { return this.particles.length; }
+
+  render(paint: FlamePaint = (_color, text) => text, truecolor = true): string[] {
+    const rows: string[][] = Array.from({ length: this.rows / 2 }, (_, row) => Array.from({ length: this.width }, (_, x) => {
+      const top = this.heat[row * 2 * this.width + x]!;
+      const bottom = this.heat[(row * 2 + 1) * this.width + x]!;
+      return truecolor ? cell(top, bottom) : shadedCell(top, bottom, paint);
+    }));
+    for (const particle of this.particles) {
+      const x = Math.round(particle.x);
+      const simY = Math.round(particle.y);
+      const row = Math.floor(simY / 2);
+      if (row < 0 || row >= rows.length || x < 1 || x >= this.width - 1) continue;
+      if (this.heat[simY * this.width + x]! > 0 || rows[row]![x] !== " ") continue;
+      const fade = particle.life / particle.max;
+      const glyph = particle.spark ? (fade > 0.5 ? "✦" : "*") : fade > 0.66 ? "•" : fade > 0.33 ? "∙" : "·";
+      const heat = particle.spark ? MAX_HEAT : Math.max(3, Math.round(4 + fade * 4));
+      rows[row]![x] = truecolor ? rgb(FLAME_RAMP[heat]!, glyph) : paint(particle.spark ? "warning" : "error", glyph);
+    }
+    return rows.map((row) => row.join(""));
+  }
+}
+
+let cached: { seed: number; sim: FlameSim } | undefined;
+
+/** Rendered flame rows for an absolute frame; replays deterministically for a seed. */
+export function flameFrame(frame: number, seed = 1, paint?: FlamePaint, truecolor = supportsTruecolor()): string[] {
+  const target = Math.max(0, Math.floor(Number.isFinite(frame) ? frame : 0));
+  if (!cached || cached.seed !== seed || cached.sim.frame > target) cached = { seed, sim: new FlameSim(seed) };
+  while (cached.sim.frame < target) cached.sim.step();
+  return cached.sim.render(paint, truecolor);
+}

package/src/footer-settings.ts

@@ -0,0 +1,32 @@
+import { readFileSync, mkdirSync, renameSync, unlinkSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+export const FOOTER_FIELDS = ["model", "effort", "sessionName", "cwd", "context", "memory", "cost", "quota", "roles", "extras", "branch"] as const;
+export type FooterField = (typeof FOOTER_FIELDS)[number];
+export type FooterSettings = Record<FooterField, boolean>;
+export const DEFAULT_FOOTER_SETTINGS: FooterSettings = Object.fromEntries(FOOTER_FIELDS.map((field) => [field, true])) as FooterSettings;
+
+export function loadFooterSettings(directory: string): FooterSettings {
+  try {
+    const value: unknown = JSON.parse(readFileSync(join(directory, "pi-jar-footer.json"), "utf8"));
+    if (!value || typeof value !== "object" || Array.isArray(value)) return { ...DEFAULT_FOOTER_SETTINGS };
+    const entries = value as Record<string, unknown>;
+    return Object.fromEntries(FOOTER_FIELDS.map((field) => [field,
+      typeof entries[field] === "boolean" ? entries[field] : true])) as FooterSettings;
+  } catch {
+    return { ...DEFAULT_FOOTER_SETTINGS };
+  }
+}
+
+export function saveFooterSettings(directory: string, settings: FooterSettings): void {
+  mkdirSync(directory, { recursive: true });
+  const target = join(directory, "pi-jar-footer.json");
+  const temporary = `${target}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
+  try {
+    writeFileSync(temporary, JSON.stringify(settings, null, 2) + "\n", { flag: "wx" });
+    renameSync(temporary, target);
+  } catch (error) {
+    try { unlinkSync(temporary); } catch { /* No temporary file to clean up. */ }
+    throw error;
+  }
+}

package/src/footer.ts

@@ -0,0 +1,147 @@
+import { homedir } from "node:os";
+import { sep } from "node:path";
+import { sliceByColumn, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { DEFAULT_FOOTER_SETTINGS, type FooterSettings } from "./footer-settings.ts";
+import { roleFrame } from "./animations.ts";
+import type { RoleStatus } from "./roles.ts";
+import { ACTIVE_STATES, cleanText, type JarStatus } from "./status.ts";
+import type { Quota } from "./quota.ts";
+
+export type Color = "accent" | "warning" | "success" | "error" | "dim" | "muted"
+  | "thinkingOff" | "thinkingMinimal" | "thinkingLow" | "thinkingMedium" | "thinkingHigh" | "thinkingXhigh" | "thinkingMax";
+export interface FooterTheme { fg(color: Color, text: string): string }
+export interface FooterView extends JarStatus {
+  model: string;
+  effort?: "off" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max";
+  sessionName?: string;
+  cwd?: string;
+  settings?: FooterSettings;
+  context: string;
+  goal?: string;
+  /** pi-jar's own short indicators (changes to review, running shells), shown before extras. */
+  chips?: readonly string[];
+  memory?: string;
+  cost?: string;
+  quota?: Quota;
+  branch: string | null;
+  demo: boolean;
+  animations: boolean;
+  frame: number;
+  motionBudget?: number;
+}
+
+function fitCwd(cwd: string, width: number): string {
+  if (visibleWidth(cwd) <= width) return cwd;
+  return "…" + sliceByColumn(cwd, visibleWidth(cwd) - width + 1, width - 1);
+}
+
+function roleColor(role: RoleStatus): Color {
+  if (role.state === "failed") return "error";
+  if (role.state === "done") return "success";
+  if (role.state === "waiting" || role.state === "idle") return "dim";
+  if (role.state === "reviewing") return "warning";
+  return "accent";
+}
+
+/** Every line is bounded in terminal cells; critical role failure takes precedence. */
+export function renderFooter(view: FooterView, width: number, theme: FooterTheme): string[] {
+  if (width <= 0) return [];
+  const show = view.settings ?? DEFAULT_FOOTER_SETTINGS;
+  if (!view.goal && !Object.entries(show).some(([field, enabled]) => enabled && (field !== "memory" || !!view.memory))) return [];
+  // Keep tiny terminals unframed so context and urgent role status stay readable.
+  const framed = width >= 32;
+  const contentWidth = framed ? width - 4 : width;
+  const roles = show.roles ? [...view.roles].sort((a, b) => Number(b.state === "failed") - Number(a.state === "failed")) : [];
+  const primary = roles.find((role) => role.state === "failed") ?? roles.find((role) => ACTIVE_STATES.has(role.state));
+  const model = cleanText(view.model, 24) || "no-model";
+  const context = cleanText(view.context, 12) || "ctx ?";
+  const goal = view.goal ? cleanText(view.goal, 240) : "";
+  const quota = view.quota;
+  const windows = [quota?.fiveHour && `5h ${Math.round(quota.fiveHour.used)}%`, quota?.week && `week ${Math.round(quota.week.used)}%`].filter((value): value is string => !!value);
+  const cost = view.cost ? cleanText(view.cost, 20) : undefined;
+  const prefix = view.demo ? theme.fg("warning", "DEMO") : "";
+  const effortColors = {
+    off: "thinkingOff", minimal: "thinkingMinimal", low: "thinkingLow", medium: "thinkingMedium",
+    high: "thinkingHigh", xhigh: "thinkingXhigh", max: "thinkingMax"
+  } as const;
+  const effort = show.effort && view.effort ? theme.fg(effortColors[view.effort], view.effort) : "";
+  const firstRole = primary ? `${primary.label} ${roleFrame(primary.state, view.frame, view.animations)}` : undefined;
+  const attention = firstRole ?? (show.extras ? view.extras[0] : undefined);
+  // At narrow widths reserve the right-hand slot for critical/active status, then context.
+  const modelLabel = show.model ? theme.fg("muted", model) : "";
+  const left = [prefix, modelLabel, effort].filter(Boolean).join(theme.fg("dim", " · "));
+  // Context is never dropped; optional metrics move to a second line on medium widths.
+  const metrics = [...(show.context ? [context] : []), ...(show.memory && contentWidth >= 90 && view.memory ? [view.memory] : []), ...(show.cost && contentWidth >= 52 && cost ? [cost] : []), ...(show.quota && contentWidth >= 90 ? windows : [])];
+  let right = theme.fg("dim", metrics.join("  ·  "));
+  if (contentWidth < 52 && attention && contentWidth >= 26) {
+    const room = Math.max(0, contentWidth - Math.min(visibleWidth(left), 12) - visibleWidth(right) - 4);
+    right = theme.fg(primary?.state === "failed" ? "error" : "warning", truncateToWidth(attention, Math.min(room, 14))) + " " + right;
+  }
+  const availableLeft = Math.max(0, contentWidth - visibleWidth(right) - 1);
+  // Never leave a dangling separator when the effort level gets squeezed out.
+  const fittedLeft = (() => {
+    if (visibleWidth(left) <= availableLeft) return left;
+    if (!effort) return truncateToWidth(left, availableLeft);
+    const beforeEffort = [prefix, modelLabel].filter(Boolean).join(theme.fg("dim", " · "));
+    const room = availableLeft - visibleWidth(effort) - 3;
+    if (room >= 3 && beforeEffort) return truncateToWidth(beforeEffort, room) + theme.fg("dim", " · ") + effort;
+    return truncateToWidth(beforeEffort || effort, availableLeft);
+  })();
+  const name = show.sessionName && view.sessionName ? cleanText(view.sessionName, 128) : "";
+  const rawCwd = show.cwd && view.cwd ? cleanText(view.cwd, 256) : "";
+  const home = homedir();
+  const cwd = home && rawCwd.startsWith(home + sep) ? `~${rawCwd.slice(home.length)}` : rawCwd;
+  let namedLeft = fittedLeft;
+  let space = availableLeft - visibleWidth(namedLeft);
+  if (cwd && space >= 7) {
+    const budget = name ? Math.min(24, Math.max(4, Math.floor((space - 6) / 2))) : Math.min(32, space - 3);
+    namedLeft += theme.fg("dim", " · ") + theme.fg("muted", fitCwd(cwd, budget));
+    space = availableLeft - visibleWidth(namedLeft);
+  }
+  if (name && space >= 7) namedLeft += theme.fg("dim", " · ") + theme.fg("muted", truncateToWidth(name, space - 3, "…"));
+  const gap = " ".repeat(Math.max(1, contentWidth - visibleWidth(namedLeft) - visibleWidth(right)));
+  const lines = [truncateToWidth(namedLeft + gap + right, contentWidth)];
+  if (goal) {
+    const goalPrefix = theme.fg("accent", "◎ goal") + theme.fg("dim", " · ");
+    const room = Math.max(0, contentWidth - visibleWidth(goalPrefix));
+    lines.push(truncateToWidth(goalPrefix + theme.fg("muted", truncateToWidth(goal, room, "…")), contentWidth));
+  }
+  if (contentWidth < 52) {
+    const small = [...(show.memory && view.memory ? [view.memory] : []), ...(show.quota ? windows : [])];
+    if (small.length && contentWidth >= 26) lines.push(truncateToWidth(theme.fg("dim", small.join("  ·  ")), contentWidth));
+    return framed ? frameFooter(lines, width, view, theme) : lines;
+  }
+
+  let moving = 0;
+  const segments = roles.map((role) => {
+    const animated = view.animations && ACTIVE_STATES.has(role.state) && moving < (view.motionBudget ?? 2);
+    if (animated) moving++;
+    const glyph = roleFrame(role.state, view.frame, animated);
+    const task = contentWidth >= 100 && role.task ? ` ${role.task}` : "";
+    return theme.fg(roleColor(role), `${role.label} ${glyph}${task}`);
+  });
+  const remaining = Math.max(0, view.extras.length - (contentWidth >= 100 ? 2 : 1));
+  const extras = show.extras ? view.extras.slice(0, contentWidth >= 100 ? 2 : 1).map((status) => theme.fg("muted", status)) : [];
+  if (show.extras && remaining) extras.push(theme.fg("dim", `+${remaining}`));
+  if (show.branch && contentWidth >= 52 && view.branch) extras.push(theme.fg("dim", `git ${cleanText(view.branch, 28)}`));
+  const chips = (view.chips ?? []).map((chip) => theme.fg("warning", cleanText(chip, 32)));
+  const joined = [...segments, ...chips, ...extras].join(theme.fg("dim", "  ·  "));
+  if (joined) lines.push(truncateToWidth(joined, contentWidth));
+  if (contentWidth < 90 && ((show.quota && windows.length) || (show.memory && view.memory))) {
+    const summary = [...(show.memory && view.memory ? [view.memory] : []), ...(show.quota ? windows : [])].join("  ·  ");
+    if (summary) lines.push(truncateToWidth(theme.fg("dim", summary), contentWidth));
+  }
+  return framed ? frameFooter(lines, width, view, theme) : lines;
+}
+
+function frameFooter(lines: string[], width: number, view: FooterView, theme: FooterTheme): string[] {
+  const active = (view.settings?.roles ?? true) && view.roles.some((role) => ACTIVE_STATES.has(role.state));
+  const pulse = active && view.animations ? ["◇", "◈", "◆", "◈"][view.frame % 4] : "◇";
+  const top = theme.fg("dim", "╭─") + theme.fg(active ? "accent" : "dim", pulse)
+    + theme.fg("dim", "─".repeat(width - 4) + "╮");
+  const bottom = theme.fg("dim", "╰" + "─".repeat(width - 2) + "╯");
+  // Only the glyph changes between frames; the outline and content never shift.
+  return [top, ...lines.map((line) =>
+    theme.fg("dim", "│ ") + line + " ".repeat(Math.max(0, width - 4 - visibleWidth(line))) + theme.fg("dim", " │")
+  ), bottom];
+}