@sherif-fanous/pi-presets-plus 0.1.0

package/src/ui/filter.ts

@@ -0,0 +1,79 @@
+/**
+ * Pure preset filtering helpers for the picker UI.
+ *
+ * Owns ranking and scope filtering of loaded presets; it does NOT own
+ * rendering, picker state, or activation.
+ */
+import type { LoadedPreset } from "../types.js";
+
+/** Three-way scope toggle exposed by the picker header. */
+export type ScopeFilter = "all" | "user" | "project";
+
+/**
+ * Hide presets outside the selected scope.
+ *
+ * `all` returns a shallow copy so callers can chain mutations safely;
+ * `user`/`project` apply a simple equality filter. Shadowed globals are
+ * returned in `user` scope because their project shadow is hidden — the
+ * user is still allowed to inspect/activate the global directly.
+ */
+export function applyScopeFilter(
+  presets: readonly LoadedPreset[],
+  scopeFilter: ScopeFilter,
+): LoadedPreset[] {
+  switch (scopeFilter) {
+    case "all":
+      return [...presets];
+    case "user":
+      return presets.filter((preset) => preset.scope === "user");
+    case "project":
+      return presets.filter((preset) => preset.scope === "project");
+  }
+}
+
+/**
+ * Rank presets by a free-text query.
+ *
+ * Empty queries preserve input order. Non-empty queries return literal
+ * case-insensitive substring matches first, followed by subsequence-only
+ * matches. Ordering within each group is stable so storage/user ordering
+ * remains meaningful after filtering.
+ */
+export function rankPresets(
+  items: readonly LoadedPreset[],
+  query: string,
+): LoadedPreset[] {
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (normalizedQuery.length === 0) return [...items];
+
+  const literalMatches: LoadedPreset[] = [];
+  const fuzzyMatches: LoadedPreset[] = [];
+
+  for (const item of items) {
+    const haystack =
+      `${item.name} ${item.provider}/${item.model}`.toLowerCase();
+
+    if (haystack.includes(normalizedQuery)) {
+      literalMatches.push(item);
+    } else if (subsequenceMatch(haystack, normalizedQuery)) {
+      fuzzyMatches.push(item);
+    }
+  }
+
+  return [...literalMatches, ...fuzzyMatches];
+}
+
+function subsequenceMatch(haystack: string, query: string): boolean {
+  let queryIndex = 0;
+
+  for (
+    let haystackIndex = 0;
+    haystackIndex < haystack.length && queryIndex < query.length;
+    haystackIndex++
+  ) {
+    if (haystack[haystackIndex] === query[queryIndex]) queryIndex++;
+  }
+
+  return queryIndex === query.length;
+}

package/src/ui/frame.ts

@@ -0,0 +1,109 @@
+/**
+ * Small terminal-frame layout helpers shared by custom TUI surfaces.
+ *
+ * Owns width-safe border, padding, and centering primitives reused by
+ * preset dialogs; it does NOT own picker state, activation, or any
+ * specific dialog content.
+ */
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+export interface DialogFrameOptions {
+  readonly bodyLines: readonly string[];
+  readonly footer: string;
+  readonly title: string;
+  readonly width: number;
+}
+
+export function centerText(text: string, width: number): string {
+  const textWidth = visibleWidth(text);
+
+  if (textWidth >= width) return truncateToWidth(text, width, "…");
+
+  const leftPadding = Math.floor((width - textWidth) / 2);
+  const rightPadding = width - textWidth - leftPadding;
+
+  return `${" ".repeat(leftPadding)}${text}${" ".repeat(rightPadding)}`;
+}
+
+/**
+ * Wrap content in a left/right border and pad/truncate it to the requested
+ * width. Width is visual-column based, so ANSI escape sequences do not push
+ * the right border out of alignment.
+ */
+export function frameLine(content: string, width: number): string {
+  if (width <= 2) return truncateToWidth("││", width, "");
+
+  return `│${padToWidth(content, width - 2)}│`;
+}
+
+/**
+ * Render a `left + fill + right` border segment, e.g. `┌────┐`. Falls back
+ * to a truncated `leftright` pair when the requested width is too narrow
+ * for any fill characters.
+ */
+export function frameSegment(
+  left: string,
+  fill: string,
+  right: string,
+  width: number,
+): string {
+  if (width <= 2) return truncateToWidth(`${left}${right}`, width, "");
+
+  return `${left}${fill.repeat(width - 2)}${right}`;
+}
+
+export function padToWidth(
+  text: string,
+  width: number,
+  fill = " ",
+  ellipsis = "…",
+): string {
+  const truncated = truncateToWidth(text, width, ellipsis);
+  const paddingWidth = Math.max(0, width - visibleWidth(truncated));
+
+  return `${truncated}${fill.repeat(paddingWidth)}`;
+}
+
+export function renderDialogFrame(options: DialogFrameOptions): string[] {
+  const frameWidth = Math.max(2, options.width);
+  const bodyWidth = Math.max(1, frameWidth - 2);
+  const lines = [
+    frameSegment("┌", "─", "┐", frameWidth),
+    frameLine(centerText(options.title, bodyWidth), frameWidth),
+    frameLine("", frameWidth),
+    ...options.bodyLines.map((line) => frameLine(line, frameWidth)),
+    frameLine(options.footer, frameWidth),
+    frameSegment("└", "─", "┘", frameWidth),
+  ];
+
+  return lines.map((line) => truncateToWidth(line, frameWidth, ""));
+}
+
+export function wrapBody(text: string, width: number): string[] {
+  const safeWidth = Math.max(1, width);
+
+  return text
+    .split("\n")
+    .flatMap((line) => (line.length === 0 ? [""] : wrapWords(line, safeWidth)));
+}
+
+function wrapWords(text: string, width: number): string[] {
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let current = "";
+
+  for (const word of words) {
+    const candidate = current.length === 0 ? word : `${current} ${word}`;
+
+    if (candidate.length <= width) {
+      current = candidate;
+    } else {
+      if (current.length > 0) lines.push(current);
+      current = word;
+    }
+  }
+
+  if (current.length > 0) lines.push(current);
+
+  return lines.length > 0 ? lines : [""];
+}

package/src/ui/hotkey-input.ts

@@ -0,0 +1,242 @@
+/**
+ * Hotkey parsing and conflict helpers for preset editor fields.
+ *
+ * Owns normalizing user-entered key combinations and comparing them against
+ * pi built-ins or loaded presets; it does NOT register shortcuts or persist
+ * preset files.
+ */
+import type { LoadedPreset } from "../types.js";
+
+export interface ParsedHotkey {
+  readonly key: string;
+  readonly modifiers: readonly HotkeyModifier[];
+  readonly normalized: string;
+}
+
+export type HotkeyModifier = "alt" | "ctrl" | "shift";
+
+export type ParseHotkeyResult =
+  | { ok: true; parsed: ParsedHotkey }
+  | { ok: false; reason: string };
+
+/**
+ * Modifier ordering used for the `normalized` form of a parsed hotkey.
+ *
+ * The order is fixed (not user-visible) so two hotkeys with the same set of
+ * modifiers normalize to the same string regardless of how the user typed
+ * them. Conflict detection compares normalized strings only — the
+ * presentation layer is free to render modifiers in display order.
+ */
+const MODIFIER_ORDER: readonly HotkeyModifier[] = ["ctrl", "shift", "alt"];
+const MODIFIERS = new Set<string>(MODIFIER_ORDER);
+const SPECIAL_KEYS = new Set([
+  "backspace",
+  "clear",
+  "delete",
+  "down",
+  "end",
+  "enter",
+  "esc",
+  "escape",
+  "home",
+  "insert",
+  "left",
+  "pageDown",
+  "pageUp",
+  "return",
+  "right",
+  "space",
+  "tab",
+  "up",
+]);
+// TODO(change-7): shifted-symbol equivalents are layout-dependent
+// (e.g. on a US layout `ctrl+!` and `ctrl+shift+1` produce the same
+// physical chord but normalize to different strings here, so conflict
+// detection between the two will miss). Revisit when per-preset hotkeys
+// actually register with pi-tui's keybinding manager.
+const SYMBOL_KEYS = new Set([
+  "`",
+  "-",
+  "=",
+  "[",
+  "]",
+  "\\",
+  ";",
+  "'",
+  ",",
+  ".",
+  "/",
+  "!",
+  "@",
+  "#",
+  "$",
+  "%",
+  "^",
+  "&",
+  "*",
+  "(",
+  ")",
+  "_",
+  "+",
+  "|",
+  "~",
+  "{",
+  "}",
+  ":",
+  "<",
+  ">",
+  "?",
+]);
+
+/** Defaults copied from pi's documented `docs/keybindings.md`. */
+export const PI_BUILTIN_HOTKEYS: readonly string[] = [
+  "alt+b",
+  "alt+backspace",
+  "alt+d",
+  "alt+delete",
+  "alt+down",
+  "alt+enter",
+  "alt+f",
+  "alt+left",
+  "alt+right",
+  "alt+up",
+  "alt+v",
+  "alt+y",
+  "backspace",
+  "ctrl+-",
+  "ctrl+]",
+  "ctrl+alt+]",
+  "ctrl+a",
+  "ctrl+b",
+  "ctrl+backspace",
+  "ctrl+c",
+  "ctrl+d",
+  "ctrl+e",
+  "ctrl+f",
+  "ctrl+g",
+  "ctrl+k",
+  "ctrl+l",
+  "ctrl+left",
+  "ctrl+n",
+  "ctrl+o",
+  "ctrl+p",
+  "ctrl+r",
+  "ctrl+right",
+  "ctrl+s",
+  "ctrl+t",
+  "ctrl+u",
+  "ctrl+v",
+  "ctrl+w",
+  "ctrl+x",
+  "ctrl+y",
+  "ctrl+z",
+  "delete",
+  "down",
+  "end",
+  "enter",
+  "escape",
+  "home",
+  "left",
+  "pageDown",
+  "pageUp",
+  "right",
+  "shift+ctrl+o",
+  "shift+ctrl+p",
+  "shift+enter",
+  "shift+l",
+  "shift+t",
+  "shift+tab",
+  "tab",
+  "up",
+];
+
+const NORMALIZED_PI_BUILTINS = new Set(
+  PI_BUILTIN_HOTKEYS.map((hotkey) => parseHotkey(hotkey))
+    .filter((result): result is { ok: true; parsed: ParsedHotkey } => result.ok)
+    .map((result) => result.parsed.normalized),
+);
+
+export function findConflictingPreset(
+  parsedKey: ParsedHotkey,
+  loadedPresets: readonly LoadedPreset[],
+  excludeName?: string,
+): LoadedPreset | undefined {
+  return loadedPresets.find((preset) => {
+    if (preset.name === excludeName) return false;
+    if (!preset.hotkey) return false;
+
+    const parsed = parseHotkey(preset.hotkey);
+
+    return parsed.ok && parsed.parsed.normalized === parsedKey.normalized;
+  });
+}
+
+export function isPiBuiltin(parsedKey: ParsedHotkey): boolean {
+  return NORMALIZED_PI_BUILTINS.has(parsedKey.normalized);
+}
+
+export function parseHotkey(text: string): ParseHotkeyResult {
+  const raw = text.trim().toLowerCase();
+
+  if (raw.length === 0) return { ok: false, reason: "hotkey is empty" };
+
+  const parts = raw
+    .split("+")
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0);
+
+  if (parts.length === 0) return { ok: false, reason: "hotkey is empty" };
+
+  const modifierSet = new Set<HotkeyModifier>();
+  let key: string | undefined;
+
+  for (const part of parts) {
+    if (MODIFIERS.has(part)) {
+      const modifier = part as HotkeyModifier;
+
+      if (modifierSet.has(modifier)) {
+        return { ok: false, reason: `duplicate modifier "${modifier}"` };
+      }
+
+      modifierSet.add(modifier);
+    } else if (key === undefined) {
+      key = normalizeKey(part);
+    } else {
+      return { ok: false, reason: "hotkey must contain exactly one key" };
+    }
+  }
+
+  if (!key) return { ok: false, reason: "hotkey is missing a key" };
+  if (!isValidKey(key))
+    return { ok: false, reason: `unsupported key "${key}"` };
+
+  const modifiers = MODIFIER_ORDER.filter((modifier) =>
+    modifierSet.has(modifier),
+  );
+  const normalized = [...modifiers, key].join("+");
+
+  return { ok: true, parsed: { key, modifiers, normalized } };
+}
+
+function isValidKey(key: string): boolean {
+  if (/^[a-z0-9]$/.test(key)) return true;
+  if (/^f(?:[1-9]|1[0-2])$/.test(key)) return true;
+  if (SPECIAL_KEYS.has(key)) return true;
+
+  return SYMBOL_KEYS.has(key);
+}
+
+function normalizeKey(key: string): string {
+  switch (key) {
+    case "return":
+      return "enter";
+    case "escape":
+      return "esc";
+    case "pagedown":
+      return "pageDown";
+    case "pageup":
+      return "pageUp";
+    default:
+      return key;
+  }
+}

package/src/ui/info-dialog.ts

@@ -0,0 +1,118 @@
+/**
+ * Read-only informational overlay for picker-owned multi-line output.
+ *
+ * Owns tone styling, framing, and Enter/Esc dismissal; it does NOT own
+ * command formatting, activation state, or picker state restoration.
+ */
+import { renderDialogFrame, wrapBody } from "./frame.js";
+import type {
+  ExtensionCommandContext,
+  Theme,
+} from "@mariozechner/pi-coding-agent";
+import {
+  Key,
+  matchesKey,
+  type Component,
+  type Focusable,
+} from "@mariozechner/pi-tui";
+
+export interface InfoDialogOptions {
+  readonly body: string;
+  readonly title: string;
+  readonly tone?: InfoDialogTone;
+}
+
+export type InfoDialogTone = "info" | "warning" | "error";
+
+type ResolvedInfoDialogOptions = InfoDialogOptions & { tone: InfoDialogTone };
+
+class InfoDialogComponent implements Component, Focusable {
+  private resolved = false;
+  private _focused = false;
+
+  constructor(
+    private readonly options: ResolvedInfoDialogOptions,
+    private readonly theme: Theme,
+    private readonly done: () => void,
+  ) {}
+
+  get focused(): boolean {
+    return this._focused;
+  }
+
+  set focused(value: boolean) {
+    this._focused = value;
+  }
+
+  handleInput(input: string): void {
+    if (matchesKey(input, Key.enter) || matchesKey(input, Key.escape)) {
+      this.finish();
+    }
+  }
+
+  invalidate(): void {
+    // No cached layout or external data to invalidate.
+  }
+
+  render(width: number): string[] {
+    const frameWidth = Math.max(2, width);
+    const bodyWidth = Math.max(1, frameWidth - 2);
+    const titleColor = toneTitleColor(this.options.tone);
+
+    return renderDialogFrame({
+      bodyLines: [
+        ...wrapBody(this.options.body, bodyWidth - 4).map(
+          (line) => `  ${line}`,
+        ),
+        "",
+      ],
+      footer: this.theme.fg("dim", footerHint(this.options.tone)),
+      title: this.theme.fg(titleColor, this.theme.bold(this.options.title)),
+      width: frameWidth,
+    });
+  }
+
+  private finish(): void {
+    if (this.resolved) return;
+    this.resolved = true;
+    this.done();
+  }
+}
+
+export async function openInfoDialog(
+  ctx: Pick<ExtensionCommandContext, "ui">,
+  options: InfoDialogOptions,
+): Promise<void> {
+  await ctx.ui.custom<void>(
+    (_tui, theme, _keybindings, done) =>
+      new InfoDialogComponent(
+        { ...options, tone: options.tone ?? "info" },
+        theme,
+        done,
+      ),
+    {
+      overlay: true,
+      overlayOptions: {
+        anchor: "center",
+        margin: 2,
+        maxHeight: "90%",
+        minWidth: 48,
+        width: "90%",
+      },
+    },
+  );
+}
+
+function footerHint(tone: InfoDialogTone): string {
+  if (tone === "error") return " Press Enter or Esc to dismiss error ";
+  if (tone === "warning") return " Press Enter or Esc to dismiss warning ";
+
+  return " Press Enter or Esc to dismiss ";
+}
+
+function toneTitleColor(tone: InfoDialogTone): Parameters<Theme["fg"]>[0] {
+  if (tone === "error") return "error";
+  if (tone === "warning") return "warning";
+
+  return "accent";
+}

package/src/ui/labels.ts

@@ -0,0 +1,51 @@
+/**
+ * Canonical user-facing label vocabulary.
+ *
+ * Owns repeated field labels, action labels, and dialog titles shared across
+ * surfaces; it does NOT compose full prose messages or own rendering layout.
+ */
+
+// Field labels shared by status, clear, editor rows, and picker cards.
+export const MODEL_LABEL = "Model";
+export const THINKING_LABEL = "Thinking level";
+export const TOOLS_LABEL = "Tools";
+export const PRESET_LABEL = "Preset";
+export const SCOPE_LABEL = "Scope";
+export const STATUS_LABEL = "Status";
+
+// Per-surface composed labels used by status and related summaries.
+export const BASELINE_MODEL_LABEL = "Baseline model";
+export const BASELINE_THINKING_LABEL = "Baseline thinking level";
+export const BASELINE_TOOLS_LABEL = "Baseline tools";
+export const PRESET_MODEL_LABEL = "Preset model";
+export const PRESET_THINKING_LABEL = "Preset thinking level";
+export const PRESET_TOOLS_LABEL = "Preset tools";
+export const CURRENT_MODEL_LABEL = "Current model";
+export const CURRENT_THINKING_LABEL = "Current thinking level";
+export const CURRENT_TOOLS_LABEL = "Current tools";
+export const RESTORE_LABEL = "Restore";
+
+// Dialog titles shared by overlays and formatter headings.
+export const STATUS_DIALOG_TITLE = "Preset Status";
+export const CLEAR_DIALOG_TITLE = "Preset cleared";
+export const ACTIVATION_FAILED_TITLE = "Activation failed";
+export const RELOAD_PROMPT_TITLE = "Reload Pi?";
+export const MOVE_PRESET_TITLE = "Move preset?";
+
+// Action labels, including single-use footer labels kept here for auditability.
+export const ACTIVATE_LABEL = "Activate";
+export const FILTER_LABEL = "Filter";
+export const STATUS_ACTION_LABEL = "Status";
+export const NEW_LABEL = "New";
+export const EDIT_LABEL = "Edit";
+export const DUPLICATE_LABEL = "Duplicate";
+export const DELETE_LABEL = "Delete";
+export const CLEAR_LABEL = "Clear";
+export const REORDER_LABEL = "Reorder";
+export const CLOSE_LABEL = "Close";
+export const LIST_LABEL = "List";
+export const CURSOR_LABEL = "Cursor";
+export const MOVE_LABEL = "Move";
+export const SAVE_LABEL = "Save";
+export const CANCEL_LABEL = "Cancel";
+export const TEST_LABEL = "Test (apply temporarily)";