@pi-vault/pi-status 0.1.0

package/src/ui/statusline-editor.ts

@@ -0,0 +1,589 @@
+import {
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  type Component,
+} from "@earendil-works/pi-tui";
+import type { PiStatusConfig } from "../config.ts";
+import {
+  buildFooterLine,
+  type FooterRenderInput,
+  type StatusLineSegmentId,
+} from "../render.ts";
+import type { StatuslineMenuTheme } from "./statusline-theme.ts";
+
+type SegmentMetadata = {
+  id: StatusLineSegmentId;
+  label: string;
+  description: string;
+};
+
+const SEGMENT_ORDER: readonly SegmentMetadata[] = [
+  {
+    id: "model",
+    label: "Model",
+    description: "Current model name",
+  },
+  {
+    id: "model-with-reasoning",
+    label: "Model + Reasoning",
+    description: "Current model name with reasoning level",
+  },
+  {
+    id: "project-name",
+    label: "Project Name",
+    description: "Project name (omitted when unavailable)",
+  },
+  {
+    id: "current-dir",
+    label: "Current Dir",
+    description: "Current working directory",
+  },
+  {
+    id: "git-branch",
+    label: "Git Branch",
+    description: "Current Git branch (omitted when unavailable)",
+  },
+  {
+    id: "run-state",
+    label: "Run State",
+    description: "Pi status (idle, queued, busy)",
+  },
+  {
+    id: "context-remaining",
+    label: "Context Remaining",
+    description:
+      "Percentage of context window remaining (omitted when unknown)",
+  },
+  {
+    id: "context-used",
+    label: "Context Used",
+    description: "Percentage of context window used (omitted when unknown)",
+  },
+  {
+    id: "context-window-size",
+    label: "Context Window",
+    description: "Total context window size in tokens (omitted when unknown)",
+  },
+  {
+    id: "used-tokens",
+    label: "Used Tokens",
+    description: "Total tokens used in session (omitted when zero)",
+  },
+  {
+    id: "total-input-tokens",
+    label: "Input Tokens",
+    description: "Total input tokens used in session",
+  },
+  {
+    id: "total-output-tokens",
+    label: "Output Tokens",
+    description: "Total output tokens used in session",
+  },
+  {
+    id: "session-id",
+    label: "Session ID",
+    description: "Current session ID (omitted when unavailable)",
+  },
+  {
+    id: "five-hour-limit",
+    label: "5h Limit",
+    description:
+      "Remaining usage on the primary usage limit (omitted when unavailable)",
+  },
+  {
+    id: "weekly-limit",
+    label: "Weekly Limit",
+    description:
+      "Remaining usage on the secondary usage limit (omitted when unavailable)",
+  },
+  {
+    id: "extension-statuses",
+    label: "Extension Statuses",
+    description:
+      "Visible extension status values (omitted when none are visible)",
+  },
+] as const;
+
+const SEGMENT_METADATA = new Map(
+  SEGMENT_ORDER.map((segment) => [segment.id, segment]),
+);
+
+const STATUS_ROW_DESCRIPTION = "Visible when extension-statuses is enabled";
+const POLICY_ROW_LABEL = "New extension statuses";
+const POLICY_ROW_DESCRIPTION = "Default visibility for new extension statuses";
+const EMPTY_EXTENSION_STATUSES_HINT = "No extension statuses yet.";
+const SEGMENT_SECTION_TITLE = "Status line items";
+const STATUS_SECTION_TITLE = "Extension statuses";
+
+const LABEL_COLUMN_WIDTH = 24;
+const LAYOUT_GAP = "  ";
+const MIN_DESCRIPTION_WIDTH = 12;
+
+const SHELL_TITLE = "Configure Status Line";
+const SHELL_SUBTITLE = "Select which items to display in the status line.";
+const SHELL_PLACEHOLDER = "Type to search";
+const HELP_BASE =
+  "Toggle: Space  •  Reorder: ← / →  •  Save: Enter  •  Cancel: Esc";
+const HELP_SEARCHING =
+  "Toggle: Space  •  Reorder: disabled while search is active  •  Save: Enter  •  Cancel: Esc";
+
+type SegmentInteractiveRow = { type: "segment"; id: StatusLineSegmentId };
+type StatusInteractiveRow = { type: "status"; key: string };
+type PolicyInteractiveRow = { type: "policy" };
+type InteractiveRow =
+  | SegmentInteractiveRow
+  | StatusInteractiveRow
+  | PolicyInteractiveRow;
+
+type RenderRow =
+  | { type: "header"; text: string }
+  | { type: "divider" }
+  | { type: "hint"; text: string }
+  | { type: "interactive"; row: InteractiveRow; interactiveIndex: number };
+
+export function mapStatusDraftToFilter(input: {
+  discoveredKeys: string[];
+  shownKeys: Iterable<string>;
+  newStatusesShown: boolean;
+}): PiStatusConfig["filter"] {
+  const discovered = [...input.discoveredKeys].sort((a, b) =>
+    a.localeCompare(b),
+  );
+  const shown = new Set(input.shownKeys);
+
+  if (input.newStatusesShown) {
+    return { mode: "all", hidden: discovered.filter((k) => !shown.has(k)) };
+  }
+
+  return { mode: "only", shown: discovered.filter((k) => shown.has(k)) };
+}
+
+function includesFuzzy(haystack: string, needle: string): boolean {
+  if (!needle) return true;
+  let j = 0;
+  const h = haystack.toLowerCase();
+  const n = needle.toLowerCase();
+  for (let i = 0; i < h.length && j < n.length; i++) if (h[i] === n[j]) j++;
+  return j === n.length;
+}
+
+function renderRowLine(
+  row: {
+    cursor: string;
+    checkbox: string;
+    labelWithOrder: string;
+    description: string;
+  },
+  width: number,
+  theme: StatuslineMenuTheme,
+): string {
+  if (width < 1) return "";
+
+  const prefix = `${row.cursor} ${row.checkbox} `;
+  const prefixWidth = visibleWidth(prefix);
+  const alignedMinWidth =
+    prefixWidth +
+    LABEL_COLUMN_WIDTH +
+    LAYOUT_GAP.length +
+    MIN_DESCRIPTION_WIDTH;
+
+  if (width < prefixWidth) {
+    // Not enough room for the full prefix. truncateToWidth uses an ellipsis
+    // strategy that does not preserve the first character at very small
+    // widths, so handle these cases explicitly to keep the cursor marker
+    // identifiable for selected rows.
+    if (row.cursor === ">") return ">".padEnd(width, " ");
+    return " ".repeat(width);
+  }
+
+  if (width >= alignedMinWidth) {
+    const labelFitted = truncateToWidth(row.labelWithOrder, LABEL_COLUMN_WIDTH);
+    const labelPadded = labelFitted.padEnd(LABEL_COLUMN_WIDTH);
+    const descWidth = Math.max(
+      1,
+      width - prefixWidth - LABEL_COLUMN_WIDTH - LAYOUT_GAP.length,
+    );
+    const desc = truncateToWidth(row.description, descWidth);
+    return `${prefix}${labelPadded}${LAYOUT_GAP}${theme.dim(desc)}`;
+  }
+
+  const separator = " - ";
+  const remainingWidth = width - prefixWidth;
+  if (remainingWidth <= separator.length + 1) {
+    return truncateToWidth(`${prefix}${row.labelWithOrder}`, width);
+  }
+
+  const labelWidth = Math.max(1, remainingWidth - separator.length - 1);
+  const label = truncateToWidth(row.labelWithOrder, labelWidth);
+  const fallbackBase = `${prefix}${label}${separator}`;
+  const fallbackDescWidth = Math.max(0, width - visibleWidth(fallbackBase));
+  const desc = truncateToWidth(row.description, fallbackDescWidth);
+  return `${fallbackBase}${theme.dim(desc)}`;
+}
+
+function renderSectionHeader(
+  text: string,
+  width: number,
+  theme: StatuslineMenuTheme,
+): string {
+  return truncateToWidth(theme.dim(text), width);
+}
+
+function renderDivider(width: number, theme: StatuslineMenuTheme): string {
+  return truncateToWidth(
+    theme.fg("borderMuted", "─".repeat(Math.max(1, width))),
+    width,
+  );
+}
+
+function renderHint(
+  text: string,
+  width: number,
+  theme: StatuslineMenuTheme,
+): string {
+  return truncateToWidth(theme.dim(text), width);
+}
+
+export function createStatuslineEditor(options: {
+  config: PiStatusConfig;
+  discoveredStatuses: string[];
+  previewInput: Omit<FooterRenderInput, "segments" | "filter">;
+  theme: StatuslineMenuTheme;
+  done: (result: PiStatusConfig | null) => void;
+  requestRender: () => void;
+}): Component {
+  const orderedStatuses = [...options.discoveredStatuses].sort((a, b) =>
+    a.localeCompare(b),
+  );
+  let enabledSegments = [...options.config.segments];
+
+  const shownNew = options.config.filter.mode === "all";
+  let newPolicyShown = shownNew;
+
+  const hiddenSet = new Set(
+    options.config.filter.mode === "all" ? options.config.filter.hidden : [],
+  );
+  const shown =
+    options.config.filter.mode === "all"
+      ? new Set(orderedStatuses.filter((x) => !hiddenSet.has(x)))
+      : new Set(options.config.filter.shown);
+
+  let selected = 0;
+  let query = "";
+
+  function isEnabledSegment(id: StatusLineSegmentId): boolean {
+    return enabledSegments.includes(id);
+  }
+
+  function getInteractiveRows(): InteractiveRow[] {
+    const enabled = enabledSegments.map((id) => ({
+      type: "segment",
+      id,
+    })) as SegmentInteractiveRow[];
+
+    const disabled = SEGMENT_ORDER.filter(
+      (segment) => !isEnabledSegment(segment.id),
+    ).map((segment) => ({
+      type: "segment",
+      id: segment.id,
+    })) as SegmentInteractiveRow[];
+
+    const policy: PolicyInteractiveRow = { type: "policy" };
+    const statuses = orderedStatuses.map((key) => ({
+      type: "status",
+      key,
+    })) as StatusInteractiveRow[];
+
+    return [...enabled, ...disabled, policy, ...statuses];
+  }
+
+  function rowMatchesQuery(row: InteractiveRow): boolean {
+    if (!query) return true;
+
+    if (row.type === "segment") {
+      const meta = SEGMENT_METADATA.get(row.id);
+      if (!meta) return false;
+      return includesFuzzy(`${meta.label} ${meta.description}`, query);
+    }
+
+    if (row.type === "policy") {
+      return includesFuzzy(
+        `${POLICY_ROW_LABEL} ${POLICY_ROW_DESCRIPTION}`,
+        query,
+      );
+    }
+
+    return includesFuzzy(`${row.key} ${STATUS_ROW_DESCRIPTION}`, query);
+  }
+
+  function getFilteredInteractiveRows(): InteractiveRow[] {
+    return getInteractiveRows().filter((row) => rowMatchesQuery(row));
+  }
+
+  function getRenderRows(): RenderRow[] {
+    const filtered = getFilteredInteractiveRows();
+
+    if (query) {
+      return filtered.map((row, interactiveIndex) => ({
+        type: "interactive",
+        row,
+        interactiveIndex,
+      }));
+    }
+
+    const segmentRows = filtered.filter(
+      (row): row is SegmentInteractiveRow => row.type === "segment",
+    );
+    const extensionRows = filtered.filter(
+      (row): row is StatusInteractiveRow | PolicyInteractiveRow =>
+        row.type === "status" || row.type === "policy",
+    );
+
+    const renderRows: RenderRow[] = [];
+    let interactiveIndex = 0;
+
+    renderRows.push({ type: "header", text: SEGMENT_SECTION_TITLE });
+    for (const row of segmentRows) {
+      renderRows.push({ type: "interactive", row, interactiveIndex });
+      interactiveIndex++;
+    }
+
+    renderRows.push({ type: "divider" });
+    renderRows.push({ type: "header", text: STATUS_SECTION_TITLE });
+
+    for (const row of extensionRows) {
+      renderRows.push({ type: "interactive", row, interactiveIndex });
+      interactiveIndex++;
+    }
+
+    if (orderedStatuses.length === 0) {
+      renderRows.push({ type: "hint", text: EMPTY_EXTENSION_STATUSES_HINT });
+    }
+
+    return renderRows;
+  }
+
+  function clampSelection(): void {
+    const list = getFilteredInteractiveRows();
+    if (list.length === 0) {
+      selected = 0;
+      return;
+    }
+    if (selected < 0) selected = 0;
+    if (selected >= list.length) selected = list.length - 1;
+  }
+
+  function toggleRow(row: InteractiveRow): void {
+    if (row.type === "segment") {
+      if (isEnabledSegment(row.id)) {
+        enabledSegments = enabledSegments.filter((x) => x !== row.id);
+      } else {
+        enabledSegments = [...enabledSegments, row.id];
+      }
+      return;
+    }
+
+    if (row.type === "status") {
+      if (shown.has(row.key)) shown.delete(row.key);
+      else shown.add(row.key);
+      return;
+    }
+
+    newPolicyShown = !newPolicyShown;
+  }
+
+  function moveSegment(delta: -1 | 1, row: InteractiveRow): void {
+    if (query) return;
+    if (row.type !== "segment") return;
+    const idx = enabledSegments.indexOf(row.id);
+    if (idx < 0) return;
+    const next = idx + delta;
+    if (next < 0 || next >= enabledSegments.length) return;
+    const copy = [...enabledSegments];
+    const [item] = copy.splice(idx, 1);
+    copy.splice(next, 0, item);
+    enabledSegments = copy;
+  }
+
+  function toConfig(): PiStatusConfig {
+    return {
+      segments: enabledSegments,
+      filter: mapStatusDraftToFilter({
+        discoveredKeys: orderedStatuses,
+        shownKeys: shown,
+        newStatusesShown: newPolicyShown,
+      }),
+    };
+  }
+
+  return {
+    invalidate(): void {},
+
+    handleInput(data: string): void {
+      clampSelection();
+      const list = getFilteredInteractiveRows();
+      const current = list[selected];
+
+      if (matchesKey(data, Key.escape)) {
+        options.done(null);
+        return;
+      }
+      if (matchesKey(data, Key.enter)) {
+        options.done(toConfig());
+        return;
+      }
+      if (matchesKey(data, Key.up)) {
+        selected--;
+        clampSelection();
+        options.requestRender();
+        return;
+      }
+      if (matchesKey(data, Key.down)) {
+        selected++;
+        clampSelection();
+        options.requestRender();
+        return;
+      }
+      if (matchesKey(data, Key.space) && current) {
+        toggleRow(current);
+        clampSelection();
+        options.requestRender();
+        return;
+      }
+      if (matchesKey(data, Key.left) && current) {
+        moveSegment(-1, current);
+        clampSelection();
+        options.requestRender();
+        return;
+      }
+      if (matchesKey(data, Key.right) && current) {
+        moveSegment(1, current);
+        clampSelection();
+        options.requestRender();
+        return;
+      }
+      if (matchesKey(data, Key.backspace)) {
+        if (query.length > 0) {
+          query = query.slice(0, -1);
+          clampSelection();
+          options.requestRender();
+        }
+        return;
+      }
+
+      if (/^[\x21-\x7E]$/.test(data)) {
+        query += data;
+        clampSelection();
+        options.requestRender();
+      }
+    },
+
+    render(width: number): string[] {
+      clampSelection();
+      const renderRows = getRenderRows();
+      const cfg = toConfig();
+      const preview = buildFooterLine(
+        {
+          ...options.previewInput,
+          segments: cfg.segments,
+          filter: cfg.filter,
+        },
+        options.theme,
+        width,
+      );
+
+      const lines: string[] = [];
+      lines.push(
+        truncateToWidth(
+          options.theme.fg("accent", options.theme.bold(SHELL_TITLE)),
+          width,
+        ),
+      );
+      lines.push(truncateToWidth(options.theme.dim(SHELL_SUBTITLE), width));
+      lines.push(truncateToWidth("", width));
+      lines.push(truncateToWidth(options.theme.dim(SHELL_PLACEHOLDER), width));
+      lines.push(truncateToWidth(`> ${query}`, width));
+
+      for (const renderRow of renderRows) {
+        if (renderRow.type === "header") {
+          lines.push(renderSectionHeader(renderRow.text, width, options.theme));
+          continue;
+        }
+        if (renderRow.type === "divider") {
+          lines.push(renderDivider(width, options.theme));
+          continue;
+        }
+        if (renderRow.type === "hint") {
+          lines.push(renderHint(renderRow.text, width, options.theme));
+          continue;
+        }
+
+        const row = renderRow.row;
+        const cursor = renderRow.interactiveIndex === selected ? ">" : " ";
+        if (row.type === "segment") {
+          const enabled = isEnabledSegment(row.id) ? "[x]" : "[ ]";
+          const order = isEnabledSegment(row.id)
+            ? ` (${enabledSegments.indexOf(row.id) + 1})`
+            : "";
+          const meta = SEGMENT_METADATA.get(row.id);
+          if (!meta) continue;
+          const labelWithOrder = `${meta.label}${order}`;
+          lines.push(
+            renderRowLine(
+              {
+                cursor,
+                checkbox: enabled,
+                labelWithOrder,
+                description: meta.description,
+              },
+              width,
+              options.theme,
+            ),
+          );
+          continue;
+        }
+        if (row.type === "status") {
+          const enabled = shown.has(row.key) ? "[x]" : "[ ]";
+          lines.push(
+            renderRowLine(
+              {
+                cursor,
+                checkbox: enabled,
+                labelWithOrder: row.key,
+                description: STATUS_ROW_DESCRIPTION,
+              },
+              width,
+              options.theme,
+            ),
+          );
+          continue;
+        }
+        const checkbox = `[${newPolicyShown ? "shown" : "hidden"}]`;
+        lines.push(
+          renderRowLine(
+            {
+              cursor,
+              checkbox,
+              labelWithOrder: POLICY_ROW_LABEL,
+              description: POLICY_ROW_DESCRIPTION,
+            },
+            width,
+            options.theme,
+          ),
+        );
+      }
+
+      lines.push(truncateToWidth("", width));
+      lines.push(truncateToWidth(preview, width));
+      lines.push(
+        truncateToWidth(
+          options.theme.dim(query ? HELP_SEARCHING : HELP_BASE),
+          width,
+        ),
+      );
+      return lines;
+    },
+  };
+}

package/src/ui/statusline-theme.ts

@@ -0,0 +1,67 @@
+// Internal theme adapter for the `/statusline` configuration menu.
+//
+// This module owns the only place where the editor reads from Pi's live theme
+// object. The editor itself only sees the narrow `StatuslineMenuTheme`
+// surface so menu styling stays in one place, and the live Pi theme remains
+// the single source of truth for menu colors while `/statusline` is open.
+//
+// The menu's own color usage is a narrow subset of Pi's palette
+// (`accent`, `borderMuted`, `dim`); the union below is widened to also cover
+// the `buildFooterLine` colors so the same adapted theme can feed the bottom
+// preview line as well. The widened union is a strict superset of
+// `FooterRenderColor` (defined in `../render.ts`), which makes a
+// `StatuslineMenuTheme` assignable to the `ThemeLike` that `buildFooterLine`
+// expects.
+
+import type { FooterRenderColor } from "../render.ts";
+
+export type StatuslineMenuColor = FooterRenderColor | "borderMuted";
+
+export type StatuslineMenuTheme = {
+  fg: (color: StatuslineMenuColor, text: string) => string;
+  bold: (text: string) => string;
+  dim: (text: string) => string;
+};
+
+// Shape of the live Pi theme object we care about. Kept narrow on purpose:
+// the adapter only needs `fg` and `bold`; everything else is derived from
+// those two primitives.
+type PiThemeLike = {
+  fg: (color: string, text: string) => string;
+  bold: (text: string) => string;
+};
+
+function isPiThemeLike(value: unknown): value is PiThemeLike {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as { fg?: unknown; bold?: unknown };
+  return (
+    typeof candidate.fg === "function" && typeof candidate.bold === "function"
+  );
+}
+
+// Passthrough fallback. Used for tests and for any runtime where the live Pi
+// theme is missing the methods we need. All calls return the input text
+// unchanged, so styled output collapses to plain text.
+export const noTheme: StatuslineMenuTheme = {
+  fg: (_color, text) => text,
+  bold: (text) => text,
+  dim: (text) => text,
+};
+
+// Adapt a Pi theme object into the narrow `StatuslineMenuTheme` surface used
+// by the editor. Returns `noTheme` for anything that is missing the required
+// `fg` or `bold` methods so the editor never has to deal with partial
+// runtime themes. The returned object captures the Pi theme by reference, so
+// when Pi swaps the live theme instance the next render picks up the new
+// colors without reopening `/statusline`.
+export function fromPiTheme(theme: unknown): StatuslineMenuTheme {
+  if (!isPiThemeLike(theme)) return noTheme;
+  const pi = theme;
+  return {
+    fg: (color, text) => pi.fg(color, text),
+    bold: (text) => pi.bold(text),
+    // Pi exposes "dim" as a foreground color role, not as a separate method,
+    // so the menu's `dim` helper is just a thin wrapper around `fg("dim", …)`.
+    dim: (text) => pi.fg("dim", text),
+  };
+}