@pi-unipi/footer 0.1.1

package/src/segments/ralph.ts

@@ -0,0 +1,109 @@
+/**
+ * @pi-unipi/footer — Ralph segments
+ *
+ * Segment renderers for the ralph group: active_loops, total_iterations, loop_status.
+ * Data sourced from RALPH_LOOP_START/END/ITERATION_DONE events via registry cache.
+ *
+ * Display logic:
+ * - When loop is active: green dot ● + iteration stats (e.g. 1/3)
+ * - When loop is off: red dot ●
+ * - Uses 󰼉 icon for the ralph group
+ */
+
+import type { FooterSegment, FooterSegmentContext, RenderedSegment, SemanticColor } from "../types.js";
+import { applyColor } from "../rendering/theme.js";
+import { getIcon } from "../rendering/icons.js";
+
+/** Nerd Font icon for ralph: 󰼉 */
+const RALPH_ICON = "\udb81\udf09";
+
+/** Green dot indicator (with explicit ANSI codes) */
+const GREEN_DOT = "\x1b[38;5;82m●\x1b[0m";
+/** Red dot indicator (with explicit ANSI codes) */
+const RED_DOT = "\x1b[38;5;196m●\x1b[0m";
+
+const ANSI_RESET = "\x1b[0m";
+
+function withIcon(segmentId: string, text: string): string {
+  const icon = getIcon(segmentId);
+  return icon ? `${icon} ${text}` : text;
+}
+
+function getRalphData(ctx: FooterSegmentContext): Record<string, unknown> {
+  const data = ctx.data;
+  if (!data || typeof data !== "object") return {};
+  return data as Record<string, unknown>;
+}
+
+/** Apply semantic color to plain text (without overriding embedded ANSI codes) */
+function colorText(ctx: FooterSegmentContext, semantic: SemanticColor, text: string): string {
+  return applyColor(semantic, text, ctx.theme, ctx.colors);
+}
+
+function renderActiveLoopsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const data = getRalphData(ctx);
+  const active = data.active === true;
+  const name = data.name as string | undefined;
+  const iteration = data.iteration as number | undefined;
+  const maxIterations = data.maxIterations as number | undefined;
+
+  // Always show when there's ralph data (even when off, to show red dot)
+  if (!active && !name && iteration === undefined) return { content: "", visible: false };
+
+  const dot = active ? GREEN_DOT : RED_DOT;
+
+  if (active) {
+    // Active: green dot + iteration stats
+    const iterStr = iteration !== undefined
+      ? (maxIterations ? `${iteration}/${maxIterations}` : `${iteration}`)
+      : "";
+    const nameStr = name ? ` ${name}` : "";
+    // Color the icon and text parts, keep dot's own color
+    const iconAndText = `${RALPH_ICON} ${iterStr}${nameStr}`;
+    const coloredText = colorText(ctx, "ralphOn", iconAndText);
+    // Insert the dot after the icon
+    const content = `${RALPH_ICON} ${dot} ${colorText(ctx, "ralphOn", `${iterStr}${nameStr}`)}`;
+    return { content, visible: true };
+  } else {
+    // Off/inactive: red dot
+    const content = `${RALPH_ICON} ${dot}`;
+    return { content: `${colorText(ctx, "ralphOff", RALPH_ICON)} ${dot}`, visible: true };
+  }
+}
+
+function renderTotalIterationsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const data = getRalphData(ctx);
+  const active = data.active === true;
+  const lastIteration = data.lastIteration as Record<string, unknown> | undefined;
+  const iteration = data.iteration ?? lastIteration?.iteration;
+  if (iteration === undefined || iteration === null) return { content: "", visible: false };
+  const maxIterations = data.maxIterations;
+  const display = maxIterations ? `${iteration}/${maxIterations}` : `${iteration}`;
+
+  const dot = active ? GREEN_DOT : RED_DOT;
+  const semantic: SemanticColor = active ? "ralphOn" : "ralphOff";
+  const content = `${colorText(ctx, semantic, RALPH_ICON)} ${dot} ${colorText(ctx, semantic, display)}`;
+  return { content, visible: true };
+}
+
+function renderLoopStatusSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const data = getRalphData(ctx);
+  const status = data.status as string | undefined;
+  const name = data.name as string | undefined;
+  if (!status && !name) return { content: "", visible: false };
+
+  const dot = status === "active" ? GREEN_DOT : status === "completed" ? GREEN_DOT : RED_DOT;
+  const statusIcon = status === "active" ? "▶" : status === "paused" ? "⏸" : status === "completed" ? "✓" : "";
+  const display = name ? `${statusIcon} ${name}` : `${statusIcon}`;
+
+  const active = status === "active" || status === "completed";
+  const semantic: SemanticColor = active ? "ralphOn" : "ralphOff";
+  const content = `${colorText(ctx, semantic, RALPH_ICON)} ${dot} ${colorText(ctx, semantic, display)}`;
+  return { content, visible: true };
+}
+
+export const RALPH_SEGMENTS: FooterSegment[] = [
+  { id: "active_loops", label: "Active Loops", icon: "", render: renderActiveLoopsSegment, defaultShow: true },
+  { id: "total_iterations", label: "Total Iterations", icon: "", render: renderTotalIterationsSegment, defaultShow: true },
+  { id: "loop_status", label: "Loop Status", icon: "", render: renderLoopStatusSegment, defaultShow: true },
+];

package/src/segments/status-ext.ts

@@ -0,0 +1,119 @@
+/**
+ * @pi-unipi/footer — Status extension segment
+ *
+ * Renders extension status entries from footerData.getExtensionStatuses().
+ * Uses the configured separator between entries and the current icon style.
+ *
+ * Status keys from packages:
+ *   "unipi-workflow" → "⚡ wf:brainstorm ✓ rl"  (active command shown)
+ *   "ralph"          → "rl:loop-name 3/50"
+ *   "unipi-memory"   → "⚡ mem 75p/101all"
+ *   "subagents"      → various
+ */
+
+import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
+import { getIcon } from "../rendering/icons.js";
+import { loadFooterSettings } from "../config.js";
+import { getSeparator } from "../rendering/separators.js";
+
+/** Map status keys to short display names and segment IDs for icons */
+const STATUS_DISPLAY: Record<string, { short: string; segmentId: string }> = {
+  "unipi-workflow": { short: "wf", segmentId: "currentCommand" },
+  workflow: { short: "wf", segmentId: "currentCommand" },
+  ralph: { short: "rl", segmentId: "activeLoops" },
+  "unipi-memory": { short: "mem", segmentId: "projectCount" },
+  memory: { short: "mem", segmentId: "projectCount" },
+  compactor: { short: "cmp", segmentId: "compactions" },
+  mcp: { short: "mcp", segmentId: "serversTotal" },
+  notify: { short: "ntf", segmentId: "platformsEnabled" },
+  kanboard: { short: "kb", segmentId: "docsCount" },
+  info: { short: "info", segmentId: "extensionStatuses" },
+  subagents: { short: "sa", segmentId: "extensionStatuses" },
+};
+
+/** Get the separator character for the current settings */
+function getStatusSeparator(): string {
+  const settings = loadFooterSettings();
+  const sepDef = getSeparator(settings.separator);
+  return sepDef.left;
+}
+
+/**
+ * Strip any leading emoji/symbol from a status value.
+ * The packages set their own icons (⚡, 🔄, 📝, ○, ✓) which we replace
+ * with our own based on the configured icon style.
+ */
+function stripLeadingSymbol(value: string): string {
+  // Remove common emoji/symbol prefixes (1-2 chars + optional space)
+  return value.replace(/^[\u2600-\u27BF\u2300-\u23FF\u2B50\u25CF\u25CB\u25B6\u23F3\u26A1\u{1F300}-\u{1F9FF}]\s*/u, "");
+}
+
+/**
+ * Clean up a status value by stripping the package name prefix
+ * and existing icons, returning just the meaningful content.
+ */
+function cleanStatusValue(key: string, value: string): string {
+  // First strip any leading emoji/symbol
+  let cleaned = stripLeadingSymbol(value);
+
+  // Strip known package name prefixes
+  const namePatterns: Record<string, RegExp> = {
+    "unipi-workflow": /^wf:?\s*/i,
+    workflow: /^wf:?\s*/i,
+    "unipi-memory": /^mem:?\s*/i,
+    memory: /^mem:?\s*/i,
+    ralph: /^rl:?\s*/i,
+  };
+
+  const pattern = namePatterns[key.toLowerCase()];
+  if (pattern) {
+    cleaned = cleaned.replace(pattern, "");
+  }
+
+  return cleaned.trim();
+}
+
+function renderExtensionStatusesSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const footerData = ctx.footerData as any;
+  if (!footerData || typeof footerData.getExtensionStatuses !== "function") {
+    return { content: "", visible: false };
+  }
+
+  const statuses = footerData.getExtensionStatuses() as Map<string, string>;
+  if (!statuses || statuses.size === 0) return { content: "", visible: false };
+
+  const sep = getStatusSeparator();
+
+  // Collect compact status strings with icons
+  const parts: string[] = [];
+  for (const [key, value] of statuses) {
+    if (!value || !value.trim()) continue;
+
+    // Strip ANSI codes for compact display
+    const stripped = value.replace(/\x1b\[[0-9;]*m/g, "").trim();
+    if (!stripped) continue;
+
+    const display = STATUS_DISPLAY[key.toLowerCase()];
+    const icon = display
+      ? getIcon(display.segmentId)
+      : getIcon("extensionStatuses");
+
+    const shortName = display?.short ?? key;
+    const extraContent = cleanStatusValue(key, stripped);
+
+    // Format: "icon shortName extraContent" or "icon shortName"
+    const part = extraContent
+      ? (icon ? `${icon} ${shortName} ${extraContent}` : `${shortName} ${extraContent}`)
+      : (icon ? `${icon} ${shortName}` : shortName);
+    parts.push(part);
+  }
+
+  if (parts.length === 0) return { content: "", visible: false };
+
+  const content = parts.join(` ${sep} `);
+  return { content, visible: true };
+}
+
+export const STATUS_EXT_SEGMENTS: FooterSegment[] = [
+  { id: "extension_statuses", label: "Extensions", icon: "", render: renderExtensionStatusesSegment, defaultShow: true },
+];

package/src/segments/workflow.ts

@@ -0,0 +1,100 @@
+/**
+ * @pi-unipi/footer — Workflow segments
+ *
+ * Segment renderers for the workflow group: current_command, sandbox_level,
+ * command_duration.
+ * Data sourced from WORKFLOW_START/END events via registry cache.
+ */
+
+import type { FooterSegment, FooterSegmentContext, RenderedSegment, SemanticColor } from "../types.js";
+import { applyColor } from "../rendering/theme.js";
+import { getIcon } from "../rendering/icons.js";
+
+/** Nerd Font icon for workflow:  */
+const WORKFLOW_ICON = "\uf52e";
+
+function withIcon(segmentId: string, text: string): string {
+  const icon = getIcon(segmentId);
+  return icon ? `${icon} ${text}` : text;
+}
+
+function getWorkflowData(ctx: FooterSegmentContext): Record<string, unknown> {
+  const data = ctx.data;
+  if (!data || typeof data !== "object") return {};
+  return data as Record<string, unknown>;
+}
+
+/** Map a workflow command name to a semantic color for slight differentiation */
+function getWorkflowSemanticColor(command: string): SemanticColor {
+  const commandLower = command.toLowerCase();
+
+  if (commandLower.includes("brainstorm")) return "workflowBrainstorm";
+  if (commandLower.includes("plan")) return "workflowPlan";
+  if (commandLower.includes("work") && !commandLower.includes("network") && !commandLower.includes("framework")) return "workflowWork";
+  if (commandLower.includes("review")) return "workflowReview";
+  if (commandLower.includes("auto")) return "workflowAuto";
+  if (commandLower.includes("fix") || commandLower.includes("debug")) return "workflowWork";
+  if (commandLower.includes("quick")) return "workflowOther";
+  if (commandLower.includes("document")) return "workflowPlan";
+  if (commandLower.includes("consolidate")) return "workflowOther";
+
+  return "workflow";
+}
+
+function renderCurrentCommandSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const data = getWorkflowData(ctx);
+  const active = data.active === true;
+  const command = data.command as string | undefined;
+
+  // No workflow — show dash
+  if (!command) {
+    const content = `${WORKFLOW_ICON} -`;
+    return { content: applyColor("workflow", content, ctx.theme, ctx.colors), visible: true };
+  }
+
+  const statusPrefix = active ? "▶" : "✓";
+  const semanticColor = getWorkflowSemanticColor(command);
+  const content = `${WORKFLOW_ICON} ${statusPrefix} ${command}`;
+  return { content: applyColor(semanticColor, content, ctx.theme, ctx.colors), visible: true };
+}
+
+function renderSandboxLevelSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const piCtx = ctx.piContext as Record<string, unknown> | undefined;
+  // Sandbox level is not directly exposed — show a generic indicator
+  const sandboxEnabled = true; // Default assumption
+  const content = withIcon("sandboxLevel", sandboxEnabled ? "sandbox" : "full");
+  return { content: applyColor("workflow", content, ctx.theme, ctx.colors), visible: true };
+}
+
+function renderCommandDurationSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const data = getWorkflowData(ctx);
+  const startTime = data.startTime as number | undefined;
+  const durationMs = data.durationMs as number | undefined;
+
+  let display: string;
+  if (durationMs !== undefined) {
+    display = formatDuration(durationMs);
+  } else if (startTime) {
+    display = formatDuration(Date.now() - startTime);
+  } else {
+    return { content: "", visible: false };
+  }
+
+  const content = withIcon("commandDuration", display);
+  return { content: applyColor("workflow", content, ctx.theme, ctx.colors), visible: true };
+}
+
+function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) return `${hours}h${minutes % 60}m`;
+  if (minutes > 0) return `${minutes}m${seconds % 60}s`;
+  return `${seconds}s`;
+}
+
+export const WORKFLOW_SEGMENTS: FooterSegment[] = [
+  { id: "current_command", label: "Current Command", icon: "", render: renderCurrentCommandSegment, defaultShow: true },
+  { id: "sandbox_level", label: "Sandbox Level", icon: "", render: renderSandboxLevelSegment, defaultShow: false },
+  { id: "command_duration", label: "Command Duration", icon: "", render: renderCommandDurationSegment, defaultShow: true },
+];

package/src/tui/settings-tui.ts

@@ -0,0 +1,252 @@
+/**
+ * @pi-unipi/footer — Settings TUI
+ *
+ * Interactive settings overlay for toggling groups and individual segments.
+ * Follows the info-screen SettingsOverlay pattern.
+ */
+
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import { loadFooterSettings, saveFooterSettings, getGroupSettings } from "../config.js";
+import type { FooterGroup, FooterSettings } from "../types.js";
+
+/** ANSI escape codes */
+const ansi = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  gray: "\x1b[90m",
+};
+
+const TOGGLE_ON = `${ansi.green}●${ansi.reset}`;
+const TOGGLE_OFF = `${ansi.dim}○${ansi.reset}`;
+
+/**
+ * Show the footer settings overlay.
+ */
+export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
+  ctx.ui.custom(
+    (tui: any, _theme: any, _keybindings: any, done: (result: void) => void) => {
+      const overlay = new FooterSettingsOverlay(groups);
+
+      overlay.onClose = () => done();
+
+      return {
+        focused: true,
+        invalidate: () => overlay.invalidate(),
+        render: (width: number) => overlay.render(width),
+        handleInput: (data: string) => {
+          overlay.handleInput(data);
+          tui.requestRender();
+        },
+        dispose: () => {},
+      };
+    },
+    {
+      overlay: true,
+      overlayOptions: () => ({
+        verticalAlign: "center",
+        horizontalAlign: "center",
+      }),
+    },
+  ).catch((err: unknown) => {
+    console.error("[footer] Settings overlay error:", err);
+  });
+}
+
+/**
+ * Footer settings overlay component.
+ */
+class FooterSettingsOverlay {
+  private settings: FooterSettings;
+  private groups: FooterGroup[];
+  private selectedIndex = 0;
+  private savedGroupIndex = 0;
+  private mode: "groups" | "segments" = "groups";
+  private selectedGroupId: string | null = null;
+  onClose?: () => void;
+
+  constructor(groups: FooterGroup[]) {
+    this.settings = loadFooterSettings();
+    this.groups = groups;
+  }
+
+  invalidate(): void {
+    // No cached state
+  }
+
+  handleInput(data: string): void {
+    if (this.mode === "groups") {
+      this.handleGroupsInput(data);
+    } else {
+      this.handleSegmentsInput(data);
+    }
+  }
+
+  private handleGroupsInput(data: string): void {
+    switch (data) {
+      case "\x1b[A": case "k":
+        this.selectedIndex = (this.selectedIndex - 1 + this.groups.length) % this.groups.length;
+        break;
+      case "\x1b[B": case "j":
+        this.selectedIndex = (this.selectedIndex + 1) % this.groups.length;
+        break;
+      case " ":
+        this.toggleGroup(this.groups[this.selectedIndex].id);
+        break;
+      case "\r": case "\x1b[C": case "l":
+        this.enterSegmentsMode(this.groups[this.selectedIndex].id);
+        break;
+      case "q": case "\x1b":
+        this.onClose?.();
+        break;
+    }
+  }
+
+  private handleSegmentsInput(data: string): void {
+    if (!this.selectedGroupId) return;
+    const group = this.groups.find(g => g.id === this.selectedGroupId);
+    if (!group) return;
+
+    switch (data) {
+      case "\x1b[A": case "k":
+        this.selectedIndex = (this.selectedIndex - 1 + group.segments.length) % group.segments.length;
+        break;
+      case "\x1b[B": case "j":
+        this.selectedIndex = (this.selectedIndex + 1) % group.segments.length;
+        break;
+      case " ":
+        this.toggleSegment(this.selectedGroupId, group.segments[this.selectedIndex].id);
+        break;
+      case "\x1b[D": case "h": case "\r":
+        this.backToGroups();
+        break;
+      case "q": case "\x1b":
+        this.onClose?.();
+        break;
+    }
+  }
+
+  private toggleGroup(groupId: string): void {
+    const groupSettings = this.settings.groups[groupId] ?? { show: true, segments: {} };
+    groupSettings.show = !groupSettings.show;
+    this.settings.groups[groupId] = groupSettings;
+    saveFooterSettings(this.settings);
+  }
+
+  private toggleSegment(groupId: string, segmentId: string): void {
+    const groupSettings = this.settings.groups[groupId] ?? { show: true, segments: {} };
+    if (!groupSettings.segments) groupSettings.segments = {};
+    groupSettings.segments[segmentId] = !(groupSettings.segments[segmentId] ?? true);
+    this.settings.groups[groupId] = groupSettings;
+    saveFooterSettings(this.settings);
+  }
+
+  private enterSegmentsMode(groupId: string): void {
+    this.savedGroupIndex = this.selectedIndex;
+    this.mode = "segments";
+    this.selectedGroupId = groupId;
+    this.selectedIndex = 0;
+  }
+
+  private backToGroups(): void {
+    this.mode = "groups";
+    this.selectedIndex = this.savedGroupIndex;
+    this.selectedGroupId = null;
+  }
+
+  render(width: number): string[] {
+    if (this.mode === "groups") {
+      return this.renderGroupsMode(width);
+    } else {
+      return this.renderSegmentsMode(width);
+    }
+  }
+
+  private padToWidth(line: string, targetWidth: number): string {
+    const visLen = visibleWidth(line);
+    const pad = Math.max(0, targetWidth - visLen);
+    return line + " ".repeat(pad);
+  }
+
+  private renderCentered(text: string, width: number): string {
+    const visLen = visibleWidth(text);
+    if (visLen >= width) return text;
+    const leftPad = Math.floor((width - visLen) / 2);
+    return " ".repeat(leftPad) + text;
+  }
+
+  private renderGroupsMode(width: number): string[] {
+    const lines: string[] = [];
+    const innerWidth = width - 2;
+
+    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.bold}⚙  Footer Settings${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+
+    for (let i = 0; i < this.groups.length; i++) {
+      const group = this.groups[i];
+      const isSelected = i === this.selectedIndex;
+      const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
+      const isEnabled = groupSettings.show;
+
+      const toggle = isEnabled ? TOGGLE_ON : TOGGLE_OFF;
+      const indicator = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
+      let line = `  ${indicator} ${toggle} ${group.name}`;
+
+      if (isSelected) {
+        line += `  ${ansi.dim}→ segments${ansi.reset}`;
+      }
+
+      if (visibleWidth(line) > innerWidth - 2) {
+        line = truncateToWidth(line, innerWidth - 2);
+      }
+
+      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
+    }
+
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  Enter/→ segments  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
+
+    return lines;
+  }
+
+  private renderSegmentsMode(width: number): string[] {
+    const lines: string[] = [];
+    const group = this.groups.find(g => g.id === this.selectedGroupId);
+    if (!group) return lines;
+
+    const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
+    const innerWidth = width - 2;
+
+    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${group.name} Segments`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+
+    for (let i = 0; i < group.segments.length; i++) {
+      const seg = group.segments[i];
+      const isSelected = i === this.selectedIndex;
+      const isEnabled = groupSettings.segments?.[seg.id] ?? seg.defaultShow;
+
+      const toggle = isEnabled ? TOGGLE_ON : TOGGLE_OFF;
+      const indicator = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
+      let line = `  ${indicator} ${toggle} ${seg.label}`;
+
+      if (visibleWidth(line) > innerWidth - 2) {
+        line = truncateToWidth(line, innerWidth - 2);
+      }
+
+      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
+    }
+
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  ←/Enter back  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
+
+    return lines;
+  }
+}