@herbertgao/pi-extensions 2026.8.2 → 2026.8.4

package/node_modules/pi-footer/src/ui/screens/global.ts

@@ -0,0 +1,75 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { WidgetStore } from "../../widgets/store.js";
+import {
+  applyGlobalMenuAction,
+  applyGlobalSettingsAction,
+  applyGlobalSettingsBackspace,
+  applyGlobalSettingsTextInput,
+  GLOBAL_MENU_ACTIONS,
+  GLOBAL_MENU_HINT,
+  globalMenuAction,
+  globalMenuFields,
+} from "../global-menu.js";
+import { isPrintable, wrap } from "../helpers.js";
+import { Controller } from "./controller.js";
+
+export class GlobalScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    const fields = globalMenuFields(this.ctx.state.store.settings);
+    return [
+      this.render.line(
+        this.render.menuTitle("Global Overrides", "Configure global settings for the pi-footer"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(GLOBAL_MENU_HINT), width),
+      ...fields.map((field, index) => this.render.menuLine(index === this.selected, field, width)),
+    ];
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.up))
+      this.selected = wrap(this.selected - 1, GLOBAL_MENU_ACTIONS.length);
+    else if (matchesKey(data, Key.down))
+      this.selected = wrap(this.selected + 1, GLOBAL_MENU_ACTIONS.length);
+    else if (matchesKey(data, Key.left)) this.adjust(-1);
+    else if (matchesKey(data, Key.right) || matchesKey(data, Key.enter)) this.adjust(1);
+    else if (matchesKey(data, Key.backspace)) this.applyBackspace();
+    else if (isPrintable(data)) this.applyTextInput(data);
+  }
+
+  private adjust(delta: number): void {
+    const action = globalMenuAction(this.selected);
+    const settings = this.ctx.state.store.settings;
+
+    if (!applyGlobalSettingsAction(settings, action, delta)) {
+      this.ctx.state.store = WidgetStore.fromConfig(
+        applyGlobalMenuAction(this.ctx.state.store.toConfig(), action, delta),
+      );
+    }
+
+    this.ctx.emitChange();
+  }
+
+  private applyTextInput(data: string): void {
+    if (
+      !applyGlobalSettingsTextInput(
+        this.ctx.state.store.settings,
+        globalMenuAction(this.selected),
+        data,
+      )
+    )
+      return;
+    this.ctx.emitChange();
+  }
+
+  private applyBackspace(): void {
+    if (
+      !applyGlobalSettingsBackspace(this.ctx.state.store.settings, globalMenuAction(this.selected))
+    )
+      return;
+    this.ctx.emitChange();
+  }
+}

package/node_modules/pi-footer/src/ui/screens/line-list.ts

@@ -0,0 +1,108 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { registry } from "../../widgets/registry.js";
+import { wrap } from "../helpers.js";
+import { LINE_LIST_HINT, lineListCountLabel, lineListItemLabel } from "../line-list.js";
+import type { ScreenView } from "../model.js";
+import { pageSelection, scrollWindow } from "../navigation.js";
+import type { ScreenContext } from "../screen-context.js";
+import type { ScreenRender } from "../screen-render.js";
+import { addLineAfter, cloneLineAfter, deleteLine, moveLine } from "../widget-actions.js";
+import { Controller } from "./controller.js";
+
+export class LineListScreen extends Controller {
+  constructor(
+    ctx: ScreenContext,
+    render: ScreenRender,
+    private readonly title: string,
+    private readonly nextView: ScreenView,
+  ) {
+    super(ctx, render);
+  }
+
+  renderScreen(width: number): string[] {
+    const visibleCount = this.ctx.visibleRowCount();
+    const { start, end } = scrollWindow(
+      this.ctx.state.store.lines.length,
+      this.ctx.state.selectedLine,
+      visibleCount,
+    );
+    const visible = this.ctx.state.store.lines.slice(start, end);
+    const lines = [
+      this.render.line(
+        this.render.menuTitle(this.title, "Choose which status line to configure"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(LINE_LIST_HINT), width),
+      this.render.line(
+        this.ctx.theme.dim(lineListCountLabel(this.ctx.state.store.lines.length, start, end)),
+        width,
+      ),
+    ];
+    visible.forEach((line, offset) => {
+      const index = start + offset;
+      const text = lineListItemLabel(index, line.length, (value) => this.ctx.theme.dim(value));
+      lines.push(this.render.menuLine(index === this.ctx.state.selectedLine, text, width));
+    });
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.up))
+      this.ctx.state.selectedLine = wrap(
+        this.ctx.state.selectedLine - 1,
+        this.ctx.state.store.lines.length,
+      );
+    else if (matchesKey(data, Key.down))
+      this.ctx.state.selectedLine = wrap(
+        this.ctx.state.selectedLine + 1,
+        this.ctx.state.store.lines.length,
+      );
+    else if (matchesKey(data, Key.pageUp)) this.page(-1);
+    else if (matchesKey(data, Key.pageDown)) this.page(1);
+    else if (matchesKey(data, Key.enter)) {
+      this.ctx.state.selectedWidget = 0;
+      this.ctx.show(this.nextView);
+    } else if (data === "a") {
+      this.ctx.state.selectedLine = addLineAfter(
+        this.ctx.state.store.lines,
+        this.ctx.state.selectedLine,
+      );
+      this.ctx.emitChange();
+    } else if (data === "c") {
+      this.ctx.state.selectedLine = cloneLineAfter(
+        this.ctx.state.store.lines,
+        this.ctx.state.selectedLine,
+        (widget) => registry.cloneWidget(widget),
+      );
+      this.ctx.emitChange();
+    } else if (data === "w") this.move(-1);
+    else if (data === "s") this.move(1);
+    else if (data === "d") this.delete();
+  }
+
+  private page(delta: -1 | 1): void {
+    this.ctx.state.selectedLine = pageSelection(
+      this.ctx.state.selectedLine,
+      this.ctx.state.store.lines.length,
+      this.ctx.visibleRowCount(),
+      delta,
+    );
+  }
+
+  private move(delta: number): void {
+    const next = moveLine(this.ctx.state.store.lines, this.ctx.state.selectedLine, delta);
+    if (next === this.ctx.state.selectedLine) return;
+    this.ctx.state.selectedLine = next;
+    this.ctx.emitChange();
+  }
+
+  private delete(): void {
+    const previousLength = this.ctx.state.store.lines.length;
+    this.ctx.state.selectedLine = deleteLine(
+      this.ctx.state.store.lines,
+      this.ctx.state.selectedLine,
+    );
+    if (this.ctx.state.store.lines.length !== previousLength) this.ctx.emitChange();
+  }
+}

package/node_modules/pi-footer/src/ui/screens/main.ts

@@ -0,0 +1,99 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { wrap } from "../helpers.js";
+import type { ScreenView } from "../model.js";
+import { Controller } from "./controller.js";
+
+type MenuAction =
+  | { type: "view"; view: ScreenView }
+  | { type: "save-exit" }
+  | { type: "discard-exit" };
+
+interface MenuItem {
+  label: string;
+  description: string;
+  action: MenuAction;
+}
+
+const HINT = "↑/↓ select • enter option • ctrl+s save • esc exit";
+
+const ITEMS: readonly MenuItem[] = [
+  {
+    label: "Edit lines",
+    description: "Manage status lines and line widgets",
+    action: { type: "view", view: "line-list" },
+  },
+  {
+    label: "Edit colors",
+    description: "Configure per-widget foreground/background/bold",
+    action: { type: "view", view: "color-line-list" },
+  },
+  {
+    label: "Terminal Options",
+    description: "Terminal width and color level",
+    action: { type: "view", view: "terminal" },
+  },
+  {
+    label: "Global Overrides",
+    description: "Global presets, separators, icons, minimalist mode",
+    action: { type: "view", view: "global" },
+  },
+  {
+    label: "Pi extensions",
+    description: "Published statuses and extension status row visibility",
+    action: { type: "view", view: "extension-status-row" },
+  },
+  {
+    label: "Save & Exit",
+    description: "Persist changes and close the configuration UI",
+    action: { type: "save-exit" },
+  },
+  {
+    label: "Exit without saving",
+    description: "Discard unsaved changes and close immediately",
+    action: { type: "discard-exit" },
+  },
+];
+
+export class MainScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    return [
+      this.render.line(
+        this.render.menuTitle(
+          "Main Menu",
+          "Configure any number of status lines with various widgets",
+        ),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(HINT), width),
+      ...ITEMS.map((item, index) =>
+        this.render.menuLine(
+          index === this.selected,
+          `${item.label} ${this.ctx.theme.dim(item.description)}`,
+          width,
+        ),
+      ),
+    ];
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.up)) this.selected = wrap(this.selected - 1, ITEMS.length);
+    else if (matchesKey(data, Key.down)) this.selected = wrap(this.selected + 1, ITEMS.length);
+    else if (matchesKey(data, Key.enter)) this.applySelectedAction();
+  }
+
+  private menuAction(index: number): MenuAction | undefined {
+    return ITEMS[index]?.action;
+  }
+
+  private applySelectedAction(): void {
+    const action = this.menuAction(this.selected);
+    if (!action) return;
+
+    if (action.type === "view") this.ctx.show(action.view);
+    else if (action.type === "save-exit") this.ctx.save(true);
+    else this.ctx.exitWithoutSaving();
+  }
+}

package/node_modules/pi-footer/src/ui/screens/terminal.ts

@@ -0,0 +1,121 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import type { ColorLevel } from "../../colors.js";
+import {
+  COLOR_LEVEL_CONFIRM_HINT,
+  COLOR_LEVEL_CONFIRM_WARNING,
+  colorLevelConfirmAction,
+  colorLevelConfirmValueLabel,
+} from "../color-level-confirm.js";
+import { hasCustomAnsiColors, resetCustomAnsiColors } from "../color-options.js";
+import { wrap } from "../helpers.js";
+import type { ScreenContext } from "../screen-context.js";
+import type { ScreenRender } from "../screen-render.js";
+import {
+  nextTerminalColorLevel,
+  nextTerminalWidthMode,
+  TERMINAL_MENU_ACTIONS,
+  TERMINAL_MENU_HINT,
+  terminalMenuAction,
+  terminalMenuFields,
+} from "../terminal-menu.js";
+import { Controller } from "./controller.js";
+
+export class TerminalState {
+  pendingColorLevel: ColorLevel | undefined;
+}
+
+export class TerminalScreen extends Controller {
+  private selected = 0;
+
+  constructor(
+    ctx: ScreenContext,
+    render: ScreenRender,
+    private readonly terminalState: TerminalState,
+  ) {
+    super(ctx, render);
+  }
+
+  renderScreen(width: number): string[] {
+    const fields = terminalMenuFields(this.ctx.state.store.settings);
+    return [
+      this.render.line(
+        this.render.menuTitle(
+          "Terminal Options",
+          "Configure terminal width behavior and color level",
+        ),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(TERMINAL_MENU_HINT), width),
+      ...fields.map((field, index) => this.render.menuLine(index === this.selected, field, width)),
+    ];
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.up))
+      this.selected = wrap(this.selected - 1, TERMINAL_MENU_ACTIONS.length);
+    else if (matchesKey(data, Key.down))
+      this.selected = wrap(this.selected + 1, TERMINAL_MENU_ACTIONS.length);
+    else if (matchesKey(data, Key.left)) this.adjust(-1);
+    else if (matchesKey(data, Key.right) || matchesKey(data, Key.enter)) this.adjust(1);
+  }
+
+  private adjust(delta: number): void {
+    if (terminalMenuAction(this.selected) === "width-mode") {
+      this.ctx.state.store.settings.terminal.widthMode = nextTerminalWidthMode(
+        this.ctx.state.store.settings,
+        delta,
+      );
+      this.ctx.emitChange();
+      return;
+    }
+    const settings = this.ctx.state.store.settings;
+    const next = nextTerminalColorLevel(settings, delta);
+    if (next !== settings.terminal.colorLevel && hasCustomAnsiColors(this.ctx.state.store.lines)) {
+      this.terminalState.pendingColorLevel = next;
+      this.ctx.show("confirm-color-level");
+      return;
+    }
+    settings.terminal.colorLevel = next;
+    this.ctx.emitChange();
+  }
+}
+
+export class ColorLevelConfirmScreen extends Controller {
+  constructor(
+    ctx: ScreenContext,
+    render: ScreenRender,
+    private readonly terminalState: TerminalState,
+  ) {
+    super(ctx, render);
+  }
+
+  renderScreen(width: number): string[] {
+    return [
+      this.render.line(this.ctx.theme.warning(COLOR_LEVEL_CONFIRM_WARNING), width),
+      this.render.line(colorLevelConfirmValueLabel(this.terminalState.pendingColorLevel), width),
+      this.render.line(this.ctx.theme.dim(COLOR_LEVEL_CONFIRM_HINT), width),
+    ];
+  }
+
+  handleInput(data: string): void {
+    const action = colorLevelConfirmAction(
+      data,
+      matchesKey(data, Key.escape),
+      matchesKey(data, Key.enter),
+    );
+    if (action === "cancel") {
+      this.terminalState.pendingColorLevel = undefined;
+      this.ctx.show("terminal");
+      return;
+    }
+    if (action === "confirm") {
+      if (this.terminalState.pendingColorLevel)
+        this.ctx.state.store.settings.terminal.colorLevel = this.terminalState.pendingColorLevel;
+      resetCustomAnsiColors(this.ctx.state.store.lines);
+      this.terminalState.pendingColorLevel = undefined;
+      this.ctx.show("terminal");
+      this.ctx.emitChange();
+    }
+  }
+}

package/node_modules/pi-footer/src/ui/screens/widget-list.ts

@@ -0,0 +1,154 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { registry } from "../../widgets/registry.js";
+import type { Widget } from "../../widgets/types.js";
+import { formatWidgetColorOptions, formatWidgetOptions } from "../fields.js";
+import { wrap } from "../helpers.js";
+import { pageSelection, scrollWindow } from "../navigation.js";
+import type { ScreenContext } from "../screen-context.js";
+import type { ScreenRender } from "../screen-render.js";
+import {
+  cloneSelectedWidget,
+  deleteSelectedWidget,
+  moveWidget,
+  toggleWidgetEnabled,
+  toggleWidgetRaw,
+} from "../widget-actions.js";
+import { Controller } from "./controller.js";
+
+const HINT =
+  "↑/↓ select • enter options • a add • c clone • w/s move • d delete • space toggle • r raw • esc back";
+const COLOR_HINT = "↑/↓ select • pgup/pgdn jump • enter colors • esc back";
+
+export class WidgetListScreen extends Controller {
+  constructor(
+    ctx: ScreenContext,
+    render: ScreenRender,
+    private readonly colors: boolean,
+  ) {
+    super(ctx, render);
+  }
+
+  renderScreen(width: number): string[] {
+    const line = this.ctx.currentLine();
+    const visibleCount = this.ctx.visibleRowCount();
+    const { start, end } = scrollWindow(line.length, this.ctx.state.selectedWidget, visibleCount);
+    const visible = line.slice(start, end);
+    const lines = [
+      this.render.line(
+        this.render.menuTitle(
+          `${this.colors ? "Edit widget colors" : "Edit widgets"} / Line ${this.ctx.state.selectedLine + 1}`,
+          this.colors
+            ? "Select a widget to edit its colors"
+            : "Select a widget to edit its options, or add/remove/reorder widgets",
+        ),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(this.colors ? COLOR_HINT : HINT), width),
+      this.render.line(this.ctx.theme.dim(this.countLabel(line.length, start, end)), width),
+    ];
+    if (line.length === 0)
+      lines.push(
+        this.render.line(this.ctx.theme.warning("Empty line. Press a to add a widget."), width),
+      );
+    visible.forEach((widget, offset) => {
+      const index = start + offset;
+      const text = this.colors ? this.colorItemLabel(index, widget) : this.itemLabel(index, widget);
+      lines.push(this.render.menuLine(index === this.ctx.state.selectedWidget, text, width));
+    });
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    const line = this.ctx.currentLine();
+    if (matchesKey(data, Key.up))
+      this.ctx.state.selectedWidget = wrap(
+        this.ctx.state.selectedWidget - 1,
+        Math.max(1, line.length),
+      );
+    else if (matchesKey(data, Key.down))
+      this.ctx.state.selectedWidget = wrap(
+        this.ctx.state.selectedWidget + 1,
+        Math.max(1, line.length),
+      );
+    else if (matchesKey(data, Key.pageUp)) this.page(line.length, -1);
+    else if (matchesKey(data, Key.pageDown)) this.page(line.length, 1);
+    else if (this.colors && matchesKey(data, Key.enter)) this.ctx.show("edit-colors");
+    else if (!this.colors) this.handleEditListInput(data);
+  }
+
+  private countLabel(total: number, start: number, end: number): string {
+    const range = total === 0 ? "0-0" : `${start + 1}-${end}`;
+    return `${total} widget(s), showing ${range}`;
+  }
+
+  private itemLabel(index: number, widget: Widget): string {
+    const enabled = widget.enabled ? this.ctx.theme.success("on ") : this.ctx.theme.dim("off");
+    const indexPad = index < 9 ? " " : "";
+    const options = this.ctx.theme.dim(formatWidgetOptions(widget));
+    return `${enabled} ${index + 1}.${indexPad} ${registry.spec(widget.type).label} ${options}`;
+  }
+
+  private colorItemLabel(index: number, widget: Widget): string {
+    const enabled = widget.enabled ? this.ctx.theme.success("on ") : this.ctx.theme.dim("off");
+    const indexPad = index < 9 ? " " : "";
+    const options = this.ctx.theme.dim(formatWidgetColorOptions(widget));
+    return `${enabled} ${index + 1}.${indexPad} ${registry.spec(widget.type).label} ${options}`;
+  }
+
+  private handleEditListInput(data: string): void {
+    if (data === "a") this.ctx.show("add-widget");
+    else if (matchesKey(data, Key.enter) || data === "e") this.ctx.show("edit-widget");
+    else if (data === "c") this.cloneCurrentWidget();
+    else if (data === "w") this.moveWidget(-1);
+    else if (data === "s") this.moveWidget(1);
+    else if (data === "d") this.deleteCurrentWidget();
+    else if (matchesKey(data, Key.space)) this.toggleCurrentWidget();
+    else if (data === "r") this.toggleCurrentWidgetRaw();
+  }
+
+  private page(length: number, delta: -1 | 1): void {
+    this.ctx.state.selectedWidget = pageSelection(
+      this.ctx.state.selectedWidget,
+      length,
+      this.ctx.visibleRowCount(),
+      delta,
+    );
+  }
+
+  private moveWidget(delta: number): void {
+    const next = moveWidget(this.ctx.currentLine(), this.ctx.state.selectedWidget, delta);
+    if (next === this.ctx.state.selectedWidget) return;
+    this.ctx.state.selectedWidget = next;
+    this.ctx.emitChange();
+  }
+
+  private cloneCurrentWidget(): void {
+    const next = cloneSelectedWidget(
+      this.ctx.currentLine(),
+      this.ctx.state.selectedWidget,
+      (widget) => registry.cloneWidget(widget),
+    );
+    if (next === this.ctx.state.selectedWidget) return;
+    this.ctx.state.selectedWidget = next;
+    this.ctx.emitChange();
+  }
+
+  private deleteCurrentWidget(): void {
+    const line = this.ctx.currentLine();
+    const previousLength = line.length;
+    this.ctx.state.selectedWidget = deleteSelectedWidget(line, this.ctx.state.selectedWidget);
+    if (line.length === previousLength) return;
+    this.ctx.emitChange();
+  }
+
+  private toggleCurrentWidget(): void {
+    if (!toggleWidgetEnabled(this.ctx.currentWidget())) return;
+    this.ctx.emitChange();
+  }
+
+  private toggleCurrentWidgetRaw(): void {
+    if (!toggleWidgetRaw(this.ctx.currentWidget())) return;
+    this.ctx.emitChange();
+  }
+}

package/node_modules/pi-footer/src/ui/terminal-menu.ts

@@ -0,0 +1,32 @@
+import { COLOR_LEVEL_VALUES, type ColorLevel } from "../colors.js";
+import { TERMINAL_WIDTH_MODE_VALUES, type StatuslineSettings } from "../types.js";
+import { cycle } from "./helpers.js";
+import { COLOR_LEVEL_LABELS, WIDTH_MODE_LABELS } from "./model.js";
+
+export const TERMINAL_MENU_ACTIONS = ["width-mode", "color-level"] as const;
+
+type TerminalMenuAction = (typeof TERMINAL_MENU_ACTIONS)[number];
+
+export const TERMINAL_MENU_HINT = "↑/↓ option • ←/→ change • esc back";
+
+export function terminalMenuFields(config: StatuslineSettings): string[] {
+  return [
+    `Terminal Width: ${WIDTH_MODE_LABELS[config.terminal.widthMode]}`,
+    `Color Level: ${COLOR_LEVEL_LABELS[config.terminal.colorLevel]}`,
+  ];
+}
+
+export function terminalMenuAction(index: number): TerminalMenuAction {
+  return TERMINAL_MENU_ACTIONS[index] ?? "color-level";
+}
+
+export function nextTerminalWidthMode(
+  config: StatuslineSettings,
+  delta: number,
+): StatuslineSettings["terminal"]["widthMode"] {
+  return cycle(TERMINAL_WIDTH_MODE_VALUES, config.terminal.widthMode, delta);
+}
+
+export function nextTerminalColorLevel(config: StatuslineSettings, delta: number): ColorLevel {
+  return cycle(COLOR_LEVEL_VALUES, config.terminal.colorLevel, delta);
+}

package/node_modules/pi-footer/src/ui/theme.ts

@@ -0,0 +1,48 @@
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+
+import type { ConfigState } from "./config-lifecycle.js";
+
+export type ThemeProvider = () => Theme;
+
+export interface UiTheme {
+  accent(text: string): string;
+  dim(text: string): string;
+  muted(text: string): string;
+  success(text: string): string;
+  warning(text: string): string;
+  error(text: string): string;
+  bold(text: string): string;
+  selected(text: string): string;
+  border(text: string, color?: ThemeColor): string;
+  previewTitle(text: string): string;
+  configStateLabel(state: ConfigState, label: string): string;
+}
+
+export function createUiTheme(getTheme: ThemeProvider): UiTheme {
+  return {
+    accent: (text) => getTheme().fg("accent", text),
+    dim: (text) => getTheme().fg("dim", text),
+    muted: (text) => getTheme().fg("muted", text),
+    success: (text) => getTheme().fg("success", text),
+    warning: (text) => getTheme().fg("warning", text),
+    error: (text) => getTheme().fg("error", text),
+    bold: (text) => getTheme().bold(text),
+    selected: (text) => {
+      const theme = getTheme();
+      return theme.bg("selectedBg", theme.fg("accent", text));
+    },
+    border: (text, color = "border") => getTheme().fg(color, text),
+    previewTitle: (text) => {
+      const theme = getTheme();
+      return theme.fg("accent", theme.bold(text));
+    },
+    configStateLabel: (state, label) => {
+      const theme = getTheme();
+      if (state === "saved") return theme.fg("accent", label);
+      if (state === "dirty") return theme.bold(theme.fg("warning", label));
+      if (state === "saving") return theme.fg("dim", label);
+      if (state === "error") return theme.bold(theme.fg("error", label));
+      return "";
+    },
+  };
+}