@aliou/pi-guardrails 0.2.0 → 0.3.0

package/pattern-editor.ts

@@ -0,0 +1,284 @@
+import type { Component, SettingsListTheme } from "@mariozechner/pi-tui";
+import {
+  Input,
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+} from "@mariozechner/pi-tui";
+
+/**
+ * A submenu component for editing an array of {pattern, description} objects.
+ *
+ * List mode: navigate, delete with 'd', add with 'a', edit with 'e'/Enter.
+ * Form mode: two-field form (pattern + description), Tab to switch fields,
+ *            Enter to submit, Escape to cancel.
+ */
+
+export interface PatternItem {
+  pattern: string;
+  description: string;
+}
+
+export interface PatternEditorOptions {
+  label: string;
+  items: PatternItem[];
+  theme: SettingsListTheme;
+  onSave: (items: PatternItem[]) => void;
+  onDone: () => void;
+  maxVisible?: number;
+}
+
+type Field = "pattern" | "description";
+
+export class PatternEditor implements Component {
+  private items: PatternItem[];
+  private label: string;
+  private theme: SettingsListTheme;
+  private onSave: (items: PatternItem[]) => void;
+  private onDone: () => void;
+  private selectedIndex = 0;
+  private maxVisible: number;
+  private mode: "list" | "add" | "edit" = "list";
+  private editIndex = -1;
+
+  // Form state
+  private patternInput: Input;
+  private descriptionInput: Input;
+  private activeField: Field = "pattern";
+
+  constructor(options: PatternEditorOptions) {
+    this.items = [...options.items];
+    this.label = options.label;
+    this.theme = options.theme;
+    this.onSave = options.onSave;
+    this.onDone = options.onDone;
+    this.maxVisible = options.maxVisible ?? 10;
+
+    this.patternInput = new Input();
+    this.descriptionInput = new Input();
+
+    this.patternInput.onSubmit = () => this.submitOrSwitchField();
+    this.patternInput.onEscape = () => this.cancelForm();
+
+    this.descriptionInput.onSubmit = () => this.submitOrSwitchField();
+    this.descriptionInput.onEscape = () => this.cancelForm();
+  }
+
+  private submitOrSwitchField() {
+    // If on pattern field and it has content, move to description
+    if (this.activeField === "pattern" && this.patternInput.getValue().trim()) {
+      this.activeField = "description";
+      return;
+    }
+
+    // If on description field (or pattern is empty), submit
+    this.submitForm();
+  }
+
+  private submitForm() {
+    const pattern = this.patternInput.getValue().trim();
+    const description = this.descriptionInput.getValue().trim();
+
+    if (!pattern) {
+      this.cancelForm();
+      return;
+    }
+
+    const item: PatternItem = {
+      pattern,
+      description: description || pattern,
+    };
+
+    if (this.mode === "edit") {
+      this.items[this.editIndex] = item;
+    } else {
+      this.items.push(item);
+      this.selectedIndex = this.items.length - 1;
+    }
+
+    this.onSave([...this.items]);
+    this.cancelForm();
+  }
+
+  private cancelForm() {
+    this.mode = "list";
+    this.editIndex = -1;
+    this.activeField = "pattern";
+    this.patternInput.setValue("");
+    this.descriptionInput.setValue("");
+  }
+
+  private startEdit() {
+    if (this.items.length === 0) return;
+    const item = this.items[this.selectedIndex];
+    if (!item) return;
+    this.editIndex = this.selectedIndex;
+    this.mode = "edit";
+    this.activeField = "pattern";
+    this.patternInput.setValue(item.pattern);
+    this.descriptionInput.setValue(item.description);
+  }
+
+  private deleteSelected() {
+    if (this.items.length === 0) return;
+    this.items.splice(this.selectedIndex, 1);
+    if (this.selectedIndex >= this.items.length) {
+      this.selectedIndex = Math.max(0, this.items.length - 1);
+    }
+    this.onSave([...this.items]);
+  }
+
+  invalidate() {}
+
+  render(width: number): string[] {
+    const lines: string[] = [];
+    lines.push(this.theme.label(` ${this.label}`, true));
+    lines.push("");
+
+    if (this.mode === "add" || this.mode === "edit") {
+      return [...lines, ...this.renderFormMode(width)];
+    }
+    return [...lines, ...this.renderListMode(width)];
+  }
+
+  private renderListMode(width: number): string[] {
+    const lines: string[] = [];
+
+    if (this.items.length === 0) {
+      lines.push(this.theme.hint("  (empty)"));
+    } else {
+      const startIndex = Math.max(
+        0,
+        Math.min(
+          this.selectedIndex - Math.floor(this.maxVisible / 2),
+          this.items.length - this.maxVisible,
+        ),
+      );
+      const endIndex = Math.min(
+        startIndex + this.maxVisible,
+        this.items.length,
+      );
+
+      for (let i = startIndex; i < endIndex; i++) {
+        const item = this.items[i];
+        if (!item) continue;
+        const isSelected = i === this.selectedIndex;
+        const prefix = isSelected ? this.theme.cursor : "  ";
+        const prefixWidth = visibleWidth(prefix);
+        const maxItemWidth = width - prefixWidth - 2;
+        const display = `${item.description} (${item.pattern})`;
+        const text = this.theme.value(
+          truncateToWidth(display, maxItemWidth, ""),
+          isSelected,
+        );
+        lines.push(prefix + text);
+      }
+
+      if (startIndex > 0 || endIndex < this.items.length) {
+        lines.push(
+          this.theme.hint(`  (${this.selectedIndex + 1}/${this.items.length})`),
+        );
+      }
+    }
+
+    lines.push("");
+    lines.push(
+      this.theme.hint("  a: add · e/Enter: edit · d: delete · Esc: back"),
+    );
+
+    return lines;
+  }
+
+  private renderFormMode(width: number): string[] {
+    const lines: string[] = [];
+    const inputWidth = width - 4;
+    const isEdit = this.mode === "edit";
+
+    const patternActive = this.activeField === "pattern";
+    const descActive = this.activeField === "description";
+
+    // Title
+    lines.push(this.theme.hint(isEdit ? "  Edit pattern:" : "  New pattern:"));
+    lines.push("");
+
+    // Pattern field
+    const patternLabel = "  Pattern (regex):";
+    lines.push(
+      patternActive
+        ? this.theme.label(patternLabel, true)
+        : this.theme.hint(patternLabel),
+    );
+    lines.push(`  ${this.patternInput.render(inputWidth).join("")}`);
+    lines.push("");
+
+    // Description field
+    const descLabel = "  Description:";
+    lines.push(
+      descActive
+        ? this.theme.label(descLabel, true)
+        : this.theme.hint(descLabel),
+    );
+    lines.push(`  ${this.descriptionInput.render(inputWidth).join("")}`);
+    lines.push("");
+
+    lines.push(
+      this.theme.hint("  Tab: switch field · Enter: next/submit · Esc: cancel"),
+    );
+
+    return lines;
+  }
+
+  handleInput(data: string) {
+    if (this.mode === "add" || this.mode === "edit") {
+      this.handleFormInput(data);
+      return;
+    }
+
+    // List mode
+    if (matchesKey(data, Key.up) || data === "k") {
+      if (this.items.length === 0) return;
+      this.selectedIndex =
+        this.selectedIndex === 0
+          ? this.items.length - 1
+          : this.selectedIndex - 1;
+    } else if (matchesKey(data, Key.down) || data === "j") {
+      if (this.items.length === 0) return;
+      this.selectedIndex =
+        this.selectedIndex === this.items.length - 1
+          ? 0
+          : this.selectedIndex + 1;
+    } else if (data === "a" || data === "A") {
+      this.mode = "add";
+      this.activeField = "pattern";
+      this.patternInput.setValue("");
+      this.descriptionInput.setValue("");
+    } else if (data === "e" || data === "E" || matchesKey(data, Key.enter)) {
+      this.startEdit();
+    } else if (data === "d" || data === "D") {
+      this.deleteSelected();
+    } else if (matchesKey(data, Key.escape)) {
+      this.onDone();
+    }
+  }
+
+  private handleFormInput(data: string) {
+    if (matchesKey(data, Key.tab) || matchesKey(data, Key.shift("tab"))) {
+      this.activeField =
+        this.activeField === "pattern" ? "description" : "pattern";
+      return;
+    }
+
+    if (matchesKey(data, Key.escape)) {
+      this.cancelForm();
+      return;
+    }
+
+    // Delegate to active input
+    const activeInput =
+      this.activeField === "pattern"
+        ? this.patternInput
+        : this.descriptionInput;
+    activeInput.handleInput(data);
+  }
+}

package/sectioned-settings.ts

@@ -0,0 +1,345 @@
+import type { Component } from "@mariozechner/pi-tui";
+import {
+  Input,
+  Key,
+  matchesKey,
+  type SettingItem,
+  type SettingsListTheme,
+  truncateToWidth,
+  visibleWidth,
+  wrapTextWithAnsi,
+} from "@mariozechner/pi-tui";
+
+/**
+ * A sectioned settings list. Items are grouped under section headers.
+ * Cursor skips section headers and only lands on items.
+ *
+ * Supports the same SettingItem interface as pi-tui's SettingsList,
+ * including value cycling and submenus.
+ */
+
+export interface SettingsSection {
+  label: string;
+  items: SettingItem[];
+}
+
+export interface SectionedSettingsOptions {
+  enableSearch?: boolean;
+}
+
+interface FlatEntry {
+  type: "section" | "item";
+  sectionLabel?: string;
+  item?: SettingItem;
+}
+
+export class SectionedSettings implements Component {
+  private sections: SettingsSection[];
+  private flatEntries: FlatEntry[];
+  private filteredEntries: FlatEntry[];
+  private theme: SettingsListTheme;
+  private selectedIndex: number; // index into selectable items only
+  private maxVisible: number;
+  private onChange: (id: string, newValue: string) => void;
+  private onCancel: () => void;
+  private searchInput?: Input;
+  private searchEnabled: boolean;
+  private submenuComponent: Component | null = null;
+  private submenuItemIndex: number | null = null;
+
+  constructor(
+    sections: SettingsSection[],
+    maxVisible: number,
+    theme: SettingsListTheme,
+    onChange: (id: string, newValue: string) => void,
+    onCancel: () => void,
+    options: SectionedSettingsOptions = {},
+  ) {
+    this.sections = sections;
+    this.maxVisible = maxVisible;
+    this.theme = theme;
+    this.onChange = onChange;
+    this.onCancel = onCancel;
+    this.searchEnabled = options.enableSearch ?? false;
+    this.selectedIndex = 0;
+
+    if (this.searchEnabled) {
+      this.searchInput = new Input();
+    }
+
+    this.flatEntries = this.buildFlatEntries(sections);
+    this.filteredEntries = this.flatEntries;
+  }
+
+  private buildFlatEntries(sections: SettingsSection[]): FlatEntry[] {
+    const entries: FlatEntry[] = [];
+    for (const section of sections) {
+      entries.push({ type: "section", sectionLabel: section.label });
+      for (const item of section.items) {
+        entries.push({ type: "item", item });
+      }
+    }
+    return entries;
+  }
+
+  private getSelectableItems(): SettingItem[] {
+    return this.filteredEntries
+      .filter((e) => e.type === "item" && e.item)
+      .map((e) => e.item as SettingItem);
+  }
+
+  updateValue(id: string, newValue: string): void {
+    for (const section of this.sections) {
+      const item = section.items.find((i) => i.id === id);
+      if (item) {
+        item.currentValue = newValue;
+        return;
+      }
+    }
+  }
+
+  /** Returns true when a submenu is open (caller should not intercept input). */
+  hasActiveSubmenu(): boolean {
+    return this.submenuComponent !== null;
+  }
+
+  invalidate(): void {
+    this.submenuComponent?.invalidate?.();
+  }
+
+  render(width: number): string[] {
+    if (this.submenuComponent) {
+      return this.submenuComponent.render(width);
+    }
+    return this.renderMainList(width);
+  }
+
+  private renderMainList(width: number): string[] {
+    const lines: string[] = [];
+
+    if (this.searchEnabled && this.searchInput) {
+      lines.push(...this.searchInput.render(width));
+      lines.push("");
+    }
+
+    const allItems = this.getSelectableItems();
+
+    if (allItems.length === 0) {
+      lines.push(
+        this.theme.hint(
+          this.searchEnabled
+            ? "  No matching settings"
+            : "  No settings available",
+        ),
+      );
+      this.addHintLine(lines);
+      return lines;
+    }
+
+    // Calculate max label width for alignment
+    const maxLabelWidth = Math.min(
+      30,
+      Math.max(...allItems.map((item) => visibleWidth(item.label))),
+    );
+
+    // Build visible entries with their "selectable index"
+    let selectableIdx = -1;
+    const rendered: Array<{
+      line: string;
+      isSelected: boolean;
+      description?: string;
+    }> = [];
+
+    for (const entry of this.filteredEntries) {
+      if (entry.type === "section") {
+        // Section header - add blank line before (except first)
+        if (rendered.length > 0) {
+          rendered.push({ line: "", isSelected: false });
+        }
+        rendered.push({
+          line: this.theme.hint(`  ${entry.sectionLabel}`),
+          isSelected: false,
+        });
+        continue;
+      }
+
+      const item = entry.item;
+      if (!item) continue;
+
+      selectableIdx++;
+      const isSelected = selectableIdx === this.selectedIndex;
+      const prefix = isSelected ? this.theme.cursor : "  ";
+      const prefixWidth = visibleWidth(prefix);
+
+      const labelPadded =
+        item.label +
+        " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+      const labelText = this.theme.label(labelPadded, isSelected);
+
+      const separator = "  ";
+      const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+      const valueMaxWidth = width - usedWidth - 2;
+      const valueText = this.theme.value(
+        truncateToWidth(item.currentValue, valueMaxWidth, ""),
+        isSelected,
+      );
+
+      rendered.push({
+        line: prefix + labelText + separator + valueText,
+        isSelected,
+        description: isSelected ? item.description : undefined,
+      });
+    }
+
+    // Scrolling: find the rendered index of the selected item
+    const selectedRenderedIdx = rendered.findIndex((r) => r.isSelected);
+    const totalLines = rendered.length;
+    const startLine = Math.max(
+      0,
+      Math.min(
+        selectedRenderedIdx - Math.floor(this.maxVisible / 2),
+        totalLines - this.maxVisible,
+      ),
+    );
+    const endLine = Math.min(startLine + this.maxVisible, totalLines);
+
+    for (let i = startLine; i < endLine; i++) {
+      const r = rendered[i];
+      if (r) lines.push(r.line);
+    }
+
+    // Scroll indicator
+    if (startLine > 0 || endLine < totalLines) {
+      lines.push(
+        this.theme.hint(`  (${this.selectedIndex + 1}/${allItems.length})`),
+      );
+    }
+
+    // Description for selected item
+    const selectedItem = allItems[this.selectedIndex];
+    if (selectedItem?.description) {
+      lines.push("");
+      const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
+      for (const line of wrappedDesc) {
+        lines.push(this.theme.description(`  ${line}`));
+      }
+    }
+
+    this.addHintLine(lines);
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    if (this.submenuComponent) {
+      this.submenuComponent.handleInput?.(data);
+      return;
+    }
+
+    const items = this.getSelectableItems();
+
+    if (matchesKey(data, Key.up)) {
+      if (items.length === 0) return;
+      this.selectedIndex =
+        this.selectedIndex === 0 ? items.length - 1 : this.selectedIndex - 1;
+    } else if (matchesKey(data, Key.down)) {
+      if (items.length === 0) return;
+      this.selectedIndex =
+        this.selectedIndex === items.length - 1 ? 0 : this.selectedIndex + 1;
+    } else if (matchesKey(data, Key.enter) || data === " ") {
+      this.activateItem();
+    } else if (matchesKey(data, Key.escape)) {
+      this.onCancel();
+    } else if (this.searchEnabled && this.searchInput) {
+      const sanitized = data.replace(/ /g, "");
+      if (!sanitized) return;
+      this.searchInput.handleInput(sanitized);
+      this.applyFilter(this.searchInput.getValue());
+    }
+  }
+
+  private activateItem(): void {
+    const items = this.getSelectableItems();
+    const item = items[this.selectedIndex];
+    if (!item) return;
+
+    if (item.submenu) {
+      this.submenuItemIndex = this.selectedIndex;
+      this.submenuComponent = item.submenu(
+        item.currentValue,
+        (selectedValue) => {
+          if (selectedValue !== undefined) {
+            item.currentValue = selectedValue;
+            this.onChange(item.id, selectedValue);
+          }
+          this.closeSubmenu();
+        },
+      );
+    } else if (item.values && item.values.length > 0) {
+      const currentIndex = item.values.indexOf(item.currentValue);
+      const nextIndex = (currentIndex + 1) % item.values.length;
+      const newValue = item.values[nextIndex] as string;
+      item.currentValue = newValue;
+      this.onChange(item.id, newValue);
+    }
+  }
+
+  private closeSubmenu(): void {
+    this.submenuComponent = null;
+    if (this.submenuItemIndex !== null) {
+      this.selectedIndex = this.submenuItemIndex;
+      this.submenuItemIndex = null;
+    }
+  }
+
+  private applyFilter(query: string): void {
+    if (!query) {
+      this.filteredEntries = this.flatEntries;
+      this.selectedIndex = 0;
+      return;
+    }
+
+    // Filter items, keep section headers if they have matching items
+    const filtered: FlatEntry[] = [];
+    let currentSection: FlatEntry | null = null;
+    let sectionHasMatch = false;
+
+    for (const entry of this.flatEntries) {
+      if (entry.type === "section") {
+        // Flush previous section if it had matches
+        if (currentSection && sectionHasMatch) {
+          // Already added items under this section
+        }
+        currentSection = entry;
+        sectionHasMatch = false;
+        continue;
+      }
+
+      if (entry.item) {
+        const label = entry.item.label.toLowerCase();
+        const q = query.toLowerCase();
+        if (label.includes(q)) {
+          // Add section header if first match in this section
+          if (currentSection && !sectionHasMatch) {
+            filtered.push(currentSection);
+            sectionHasMatch = true;
+          }
+          filtered.push(entry);
+        }
+      }
+    }
+
+    this.filteredEntries = filtered;
+    this.selectedIndex = 0;
+  }
+
+  private addHintLine(lines: string[]): void {
+    lines.push("");
+    lines.push(
+      this.theme.hint(
+        this.searchEnabled
+          ? "  Type to search \u00B7 Enter/Space to change \u00B7 Esc to cancel"
+          : "  Enter/Space to change \u00B7 Esc to cancel",
+      ),
+    );
+  }
+}