surgent 0.7.0-alpha.0

package/src/ui/components/form.ts

@@ -0,0 +1,179 @@
+import type { KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import { Key, type Focusable, type TUI } from "@earendil-works/pi-tui";
+import { FormField, type Field } from "./form-field.js";
+import { Frame } from "./frame.js";
+import { Lines } from "./lines.js";
+
+export type FormConfig<TSubmit = Record<string, string>> = {
+  title: string;
+  fields: Field<string | number | boolean>[];
+  emptyMessage?: string;
+  parseOnSave?: (values: Record<string, string>) => TSubmit;
+};
+
+export class Form<TSubmit = Record<string, string>> extends Frame implements Focusable {
+  onCancel?: () => void;
+  onSave?: (values: TSubmit) => Promise<void> | void;
+  onSaveError?: (error: unknown) => void;
+
+  private readonly fields: FormField<string | number | boolean>[];
+  private readonly keys: string[];
+  private readonly title: string;
+  private readonly emptyMessage: string;
+  private readonly parseOnSave?: (values: Record<string, string>) => TSubmit;
+
+  private cursor = 0;
+  private editing = false;
+  private saving = false;
+  private _focused = false;
+
+  constructor(
+    tui: TUI,
+    keybindings: KeybindingsManager,
+    theme: Theme,
+    config: FormConfig<TSubmit>,
+  ) {
+    super(theme);
+
+    this.title = config.title;
+    this.emptyMessage = config.emptyMessage ?? "No fields available for editing.";
+    this.parseOnSave = config.parseOnSave;
+    this.keys = config.fields.map((field) => field.key);
+    this.fields = config.fields.map((field) => {
+      const option = new FormField<string | number | boolean>(tui, keybindings, theme, field);
+
+      option.onInputSubmit = (inputValue) => {
+        option.setText(inputValue);
+        this.editing = false;
+        this.syncFocus();
+        return true;
+      };
+
+      option.onInputCancel = () => {
+        this.editing = false;
+        this.syncFocus();
+      };
+
+      return option;
+    });
+
+    this.registerKeybindings([
+      { key: Key.escape, handler: () => this.onCancel?.() },
+      { key: Key.ctrl("s"), hint: "save", handler: () => void this.save() },
+      {
+        key: { navigation: "vertical" },
+        hint: "navigate",
+        navigate: (keyId) => {
+          if (this.editing) return;
+          if (keyId === Key.up) {
+            this.cursor = Math.max(0, this.cursor - 1);
+          } else {
+            this.cursor = Math.min(this.fields.length - 1, this.cursor + 1);
+          }
+          this.syncFocus();
+        },
+      },
+      {
+        key: Key.enter,
+        handler: () => {
+          const selected = this.fields[this.cursor];
+          if (!selected || this.editing) return;
+          if (selected.modeType === "toggle") {
+            selected.handleInput(Key.enter);
+            return;
+          }
+
+          this.editing = true;
+          selected.startEditing();
+          this.syncFocus();
+        },
+      },
+    ]);
+
+    this.syncFocus();
+  }
+
+  get focused(): boolean {
+    return this._focused;
+  }
+
+  set focused(value: boolean) {
+    this._focused = value;
+    this.syncFocus();
+  }
+
+  override invalidate() {
+    super.invalidate();
+    for (const field of this.fields) {
+      field.invalidate();
+    }
+  }
+
+  protected override children(width: number): string[] {
+    const lines = new Lines(width);
+    lines.add(this.theme.bold(this.title));
+    lines.space();
+
+    if (this.fields.length === 0) {
+      lines.add(this.theme.fg("warning", this.emptyMessage));
+      return lines.get();
+    }
+
+    for (let index = 0; index < this.fields.length; index++) {
+      const field = this.fields[index]!;
+      const isSelected = index === this.cursor;
+      field.highlighted = isSelected;
+
+      const marker = isSelected ? this.theme.fg("accent", "→") : " ";
+      const rendered = field.render(width - 2);
+      lines.add(`${marker} ${rendered[0] ?? ""}`);
+    }
+
+    return lines.get();
+  }
+
+  handleInput(data: string) {
+    const selected = this.fields[this.cursor];
+    if (this.editing && selected?.modeType === "input") {
+      selected.handleInput(data);
+      return;
+    }
+    this.handleKb(data);
+  }
+
+  private syncFocus() {
+    this.setHint(Key.enter, this.editing ? "finish editing" : "edit/toggle");
+    this.setHint(Key.escape, this.editing ? "cancel editing" : "cancel");
+
+    for (let index = 0; index < this.fields.length; index++) {
+      const field = this.fields[index]!;
+      field.focused = this._focused && this.editing && index === this.cursor;
+    }
+  }
+
+  private serializeValues(): Record<string, string> {
+    const values: Record<string, string> = {};
+    for (let index = 0; index < this.fields.length; index++) {
+      const field = this.fields[index]!;
+      const key = this.keys[index];
+      if (key) {
+        values[key] = field.getText();
+      }
+    }
+    return values;
+  }
+
+  private async save() {
+    if (this.saving) return;
+    this.saving = true;
+    try {
+      const serialized = this.serializeValues();
+      const submitValues = this.parseOnSave?.(serialized) ?? (serialized as TSubmit);
+      await this.onSave?.(submitValues);
+    } catch (error) {
+      this.onSaveError?.(error);
+    } finally {
+      this.saving = false;
+    }
+  }
+}

package/src/ui/components/frame.ts

@@ -0,0 +1,60 @@
+import { DynamicBorder, type Theme } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { Keybound } from "./keybound.js";
+import { Lines } from "./lines.js";
+
+export class Frame extends Keybound implements Component {
+  private readonly border: DynamicBorder;
+  private readonly custom: Component[] = [];
+
+  protected children(_width: number): string[] {
+    return [];
+  }
+
+  constructor(protected theme: Theme) {
+    super();
+    this.border = new DynamicBorder((segment) => theme.fg("accent", segment));
+  }
+
+  addCustom(child: Component) {
+    this.custom.push(child);
+  }
+
+  invalidate() {
+    this.border.invalidate();
+  }
+
+  render(width: number): string[] {
+    const lines = new Lines(width);
+    lines.add(this.border.render(width)[0]!);
+    lines.space();
+
+    if (!this.custom.length) {
+      for (const child of this.children(width - 1)) {
+        lines.add(child, 1);
+      }
+    } else {
+      for (const item of this.custom) {
+        for (const line of item.render(width - 1)) {
+          lines.add(line, 1);
+        }
+      }
+    }
+
+    if (this.hints.length > 0) {
+      lines.space();
+      lines.add(this.renderHints(), 1);
+    }
+
+    lines.space();
+    lines.add(this.border.render(width)[0]!);
+    return lines.get();
+  }
+
+  private renderHints(): string {
+    return this.hints
+      .filter(([_key, action]) => Boolean(action))
+      .map(([key, action]) => this.theme.fg("dim", key) + " " + action)
+      .join(this.theme.fg("muted", " • "));
+  }
+}

package/src/ui/components/input-mode-indicator.ts

@@ -0,0 +1,64 @@
+import { type KeybindingsManager, type Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
+import { BashModeEditor } from "./bash-mode.js";
+
+export default class ModeIndicatorEditor extends BashModeEditor {
+  private actualPaddingX = 0;
+
+  constructor(
+    tui: TUI,
+    editorTheme: EditorTheme,
+    keybindings: KeybindingsManager,
+    private readonly uiTheme: Theme,
+  ) {
+    super(tui, editorTheme, keybindings);
+  }
+
+  private getIndicator(): string {
+    if (this.isInBashMode()) {
+      return this.uiTheme.fg("warning", "!");
+    }
+    return this.uiTheme.fg("accent", "❯");
+  }
+
+  private applyModeBorderColor() {
+    if (this.getMode() === "bash-included") {
+      this.borderColor = (text) => this.uiTheme.fg("bashMode", text);
+      return;
+    }
+    if (this.getMode() === "bash-excluded") {
+      this.borderColor = (text) => this.uiTheme.fg("dim", text);
+    }
+  }
+
+  override render(width: number): string[] {
+    this.applyModeBorderColor();
+    const lines = super.render(width);
+    if (lines.length === 0) return lines;
+
+    const contentLineIndex = lines.length >= 3 ? 1 : 0;
+    const indicator = this.getIndicator();
+    const prefix = width <= 1 ? indicator : `${indicator} `;
+    const prefixWidth = visibleWidth(prefix);
+    const maxPadding = Math.max(0, Math.floor((width - 1) / 2));
+    const totalPadding = Math.min(super.getPaddingX(), maxPadding);
+    const effectivePrefixWidth = Math.min(prefixWidth, totalPadding);
+    const effectiveUserPadding = Math.max(0, totalPadding - effectivePrefixWidth);
+    const renderedPrefix = truncateToWidth(prefix, effectivePrefixWidth, "");
+    const firstContentLine = lines[contentLineIndex] ?? "";
+
+    lines[contentLineIndex] =
+      " ".repeat(effectiveUserPadding) + renderedPrefix + firstContentLine.slice(totalPadding);
+
+    return lines;
+  }
+
+  override getPaddingX(): number {
+    return this.actualPaddingX;
+  }
+
+  override setPaddingX(padding: number) {
+    this.actualPaddingX = Math.max(0, Math.floor(padding));
+    super.setPaddingX(this.actualPaddingX + 2); // Indicator takes up width of 2
+  }
+}

package/src/ui/components/keybound.ts

@@ -0,0 +1,150 @@
+import { Key, matchesKey, type KeyId } from "@earendil-works/pi-tui";
+
+type NavigationKey = {
+  navigation: "vertical" | "horizontal" | "page";
+  metakey?:
+    | typeof Key.ctrl
+    | typeof Key.shift
+    | typeof Key.alt
+    | typeof Key.super
+    | typeof Key.ctrlShift
+    | typeof Key.shiftCtrl
+    | typeof Key.ctrlAlt
+    | typeof Key.altCtrl
+    | typeof Key.shiftAlt
+    | typeof Key.altShift
+    | typeof Key.ctrlSuper
+    | typeof Key.superCtrl
+    | typeof Key.shiftSuper
+    | typeof Key.superShift
+    | typeof Key.altSuper
+    | typeof Key.superAlt
+    | typeof Key.ctrlShiftAlt
+    | typeof Key.ctrlShiftSuper;
+};
+
+type KeyboundBinding = {
+  handler: (data: string) => void;
+  hintIdx: number;
+  consumable: boolean;
+  hinted: boolean;
+};
+
+export type Keybindings = Array<
+  | { key: KeyId; handler: (data: string) => void; hint?: string }
+  | { key: NavigationKey; navigate: (data: string) => void; hint?: string }
+>;
+
+export class Keybound {
+  private bindings = new Map<KeyId, KeyboundBinding>();
+  private keyHints: [string, string][] = [];
+
+  private getKbConfig(key: string, hint?: string) {
+    const config = { hintIdx: this.keyHints.length, consumable: true, hinted: !!hint };
+    this.keyHints.push([key, hint ?? ""]);
+    return config;
+  }
+
+  private getArrowKeyIds(key: NavigationKey) {
+    const isVertical = key.navigation === "vertical";
+    const isHorizontal = key.navigation === "horizontal";
+    const firstNav = isVertical ? "up" : isHorizontal ? "left" : "pageUp";
+    const secondNav = isVertical ? "down" : isHorizontal ? "right" : "pageDown";
+    return [firstNav, secondNav] as [typeof firstNav, typeof secondNav];
+  }
+
+  private registerNormalKb(key: KeyId, handler: (data: string) => void, hint?: string) {
+    if (this.bindings.has(key)) {
+      throw new Error(`key already registered: ${key}`);
+    }
+    this.bindings.set(key, { handler, ...this.getKbConfig(key, hint) });
+    this.keyHints.push([key, hint ?? ""]);
+  }
+
+  private registerArrowKb(key: NavigationKey, navigate: (data: string) => void, hint?: string) {
+    const [firstNav, secondNav] = this.getArrowKeyIds(key);
+    const first = key.metakey ? key.metakey(Key[firstNav]) : Key[firstNav];
+    const second = key.metakey ? key.metakey(Key[secondNav]) : Key[secondNav];
+    const firstArrow = firstNav === "up" ? "↑" : firstNav === "left" ? "←" : "pgUp";
+    const secondArrow = secondNav === "down" ? "↓" : secondNav === "right" ? "→" : "pgDown";
+
+    const keyParts = first.split("+");
+    const metakey = keyParts.slice(0, -1).join("+");
+    const hintKey = metakey
+      ? `${metakey}+${firstArrow}/${secondArrow}`
+      : `${firstArrow}/${secondArrow}`;
+    const config = this.getKbConfig(hintKey, hint);
+
+    this.bindings.set(first, { handler: () => navigate(firstNav), ...config });
+    this.bindings.set(second, { handler: () => navigate(secondNav), ...config });
+  }
+
+  protected registerKeybindings(keybindings: Keybindings) {
+    for (const keybinding of keybindings) {
+      if ("handler" in keybinding) {
+        this.registerNormalKb(keybinding.key, keybinding.handler, keybinding.hint);
+        continue;
+      }
+      this.registerArrowKb(keybinding.key, keybinding.navigate, keybinding.hint);
+    }
+  }
+
+  protected setKeyAccess(key: KeyId, access: boolean | { consumable?: boolean; hinted?: boolean }) {
+    const binding = this.bindings.get(key);
+    if (!binding) {
+      throw new Error(`key not registered: ${key}`);
+    }
+    binding.consumable =
+      typeof access === "boolean" ? access : (access.consumable ?? binding.consumable);
+    binding.hinted = typeof access === "boolean" ? access : (access.hinted ?? binding.hinted);
+  }
+
+  protected setArrowKeyAccess(
+    key: NavigationKey,
+    access: boolean | { consumable?: boolean; hinted?: boolean },
+  ) {
+    const [firstNav, secondNav] = this.getArrowKeyIds(key);
+    const first = key.metakey ? key.metakey(Key[firstNav]) : Key[firstNav];
+    const second = key.metakey ? key.metakey(Key[secondNav]) : Key[secondNav];
+    this.setKeyAccess(first, access);
+    this.setKeyAccess(second, access);
+  }
+
+  protected setHint(key: KeyId, hint: string) {
+    const binding = this.bindings.get(key);
+    if (!binding) {
+      throw new Error(`key not registered: ${key}`);
+    }
+
+    const hintEntry = this.keyHints[binding.hintIdx];
+    if (!hintEntry) {
+      throw new Error(`hint index out of bounds for key: ${key}`);
+    }
+
+    this.keyHints[binding.hintIdx] = [hintEntry[0], hint];
+  }
+
+  protected handleKb(data: string): boolean {
+    for (const [keyId, binding] of this.bindings) {
+      if (!binding.consumable) continue;
+      if (matchesKey(data, keyId)) {
+        binding.handler(data);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  protected get hints(): [string, string][] {
+    const visible: [string, string][] = [];
+    const visibleIndexes = new Set<number>();
+    for (const binding of this.bindings.values()) {
+      if (!binding.hinted || visibleIndexes.has(binding.hintIdx)) continue;
+      const hintEntry = this.keyHints[binding.hintIdx];
+      if (!hintEntry) continue;
+      visibleIndexes.add(binding.hintIdx);
+      visible.push(hintEntry);
+    }
+    return visible;
+  }
+}

package/src/ui/components/lines.ts

@@ -0,0 +1,27 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+/**
+ * Accumulates rendered lines for a fixed-width TUI component.
+ */
+export class Lines {
+  private readonly lines: string[];
+
+  constructor(
+    private readonly width: number,
+    lines?: string[],
+  ) {
+    this.lines = lines ?? [];
+  }
+
+  add(line: string, pl = 0) {
+    this.lines.push(truncateToWidth(" ".repeat(pl) + line, this.width));
+  }
+
+  space() {
+    this.lines.push("");
+  }
+
+  get(): string[] {
+    return this.lines;
+  }
+}

package/src/ui/components/placeholder-input.ts

@@ -0,0 +1,59 @@
+import {
+  CustomEditor,
+  type KeybindingsManager,
+  type Theme,
+  type ThemeColor,
+} from "@earendil-works/pi-coding-agent";
+import { CURSOR_MARKER, truncateToWidth, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
+
+export class PlaceholderInput extends CustomEditor {
+  constructor(
+    tui: TUI,
+    keybindings: KeybindingsManager,
+    private readonly uiTheme: Theme,
+    private readonly placeholder: string,
+    private readonly customBorderColor?: ThemeColor,
+  ) {
+    const editorTheme: EditorTheme = {
+      borderColor: (text) => uiTheme.fg(customBorderColor ?? "dim", text),
+      selectList: {
+        selectedPrefix: (text) => uiTheme.fg("accent", text),
+        selectedText: (text) => uiTheme.fg("accent", text),
+        description: (text) => uiTheme.fg("muted", text),
+        scrollInfo: (text) => uiTheme.fg("dim", text),
+        noMatch: (text) => uiTheme.fg("warning", text),
+      },
+    };
+    super(tui, editorTheme, keybindings);
+  }
+
+  override render(width: number): string[] {
+    const lines = super.render(width);
+
+    if (super.getText() === "") {
+      const placeholderLines = this.placeholder.split("\n").map((line, i) => {
+        if (i === 0 && this.focused) {
+          const firstChar = line.charAt(0) || " ";
+          const rest = line.slice(1);
+          // Visible cursor requires BOTH the marker (IME positioning) AND the
+          // reverse-video block — the TUI hides the hardware cursor by default.
+          const cursor = CURSOR_MARKER + `\x1b[7m${firstChar}\x1b[0m`;
+          const dimRest = rest.length > 0 ? this.uiTheme.fg("dim", rest) : "";
+          return truncateToWidth(cursor + dimRest, width);
+        }
+        return truncateToWidth(this.uiTheme.fg("dim", line), width);
+      });
+
+      if (this.customBorderColor) {
+        return [lines[0]!, ...placeholderLines, lines[lines.length - 1]!];
+      }
+      return placeholderLines;
+    }
+
+    const contentLines = lines.slice(1, lines.length - 1);
+    if (this.customBorderColor) {
+      return [lines[0]!, ...contentLines, lines[lines.length - 1]!];
+    }
+    return contentLines;
+  }
+}

package/src/ui/components/scoped-input.ts

@@ -0,0 +1,78 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Focusable, Input, Key, visibleWidth } from "@earendil-works/pi-tui";
+import { Lines } from "./lines.js";
+import { Frame } from "./frame.js";
+
+export type ScopeItem = { label: string; value: string };
+export type ScopedInputResult = { scope: string; value: string };
+
+const DEFAULT_SCOPES: ScopeItem[] = [
+  { label: "project", value: "project" },
+  { label: "global", value: "global" },
+];
+
+export class ScopedInput extends Frame implements Focusable {
+  private readonly input = new Input();
+  private readonly scopes: ScopeItem[];
+  private scopeIndex = 0;
+
+  onSubmit?: (result: ScopedInputResult) => void;
+  onCancel?: () => void;
+
+  get focused(): boolean {
+    return this.input.focused;
+  }
+
+  set focused(value: boolean) {
+    this.input.focused = value;
+  }
+
+  constructor(
+    theme: Theme,
+    private readonly title: string,
+    scopes: ScopeItem[] = DEFAULT_SCOPES,
+  ) {
+    super(theme);
+    this.scopes = scopes;
+    this.input.focused = true;
+
+    this.registerKeybindings([
+      {
+        key: Key.shift("tab"),
+        hint: "switch scope",
+        handler: () => (this.scopeIndex = (this.scopeIndex + 1) % this.scopes.length),
+      },
+      {
+        key: Key.enter,
+        hint: "create",
+        handler: () => {
+          const value = this.input.getValue().trim();
+          if (value) {
+            this.onSubmit?.({ scope: this.scopes[this.scopeIndex]!.value, value });
+          }
+        },
+      },
+      { key: Key.escape, hint: "cancel", handler: () => this.onCancel?.() },
+    ]);
+  }
+
+  protected override children(width: number): string[] {
+    const lines = new Lines(width - 1);
+    lines.add(this.theme.bold(this.title));
+    lines.space();
+    const prefix = this.theme.fg("muted", `(${this.scopes[this.scopeIndex]!.label})  `);
+    const inputLine = this.input.render(width - 1 - visibleWidth(prefix))[0]!.slice(2);
+    lines.add(prefix + inputLine);
+    return lines.get();
+  }
+
+  override invalidate() {
+    super.invalidate();
+    this.input.invalidate();
+  }
+
+  handleInput(data: string) {
+    if (this.handleKb(data)) return;
+    this.input.handleInput(data);
+  }
+}