surgent 0.7.0-alpha.0

package/src/ui/components/bash-mode.ts

@@ -0,0 +1,281 @@
+import { CustomEditor, type KeybindingsManager } from "@earendil-works/pi-coding-agent";
+import { getKeybindings, matchesKey, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
+
+export type EditorMode = "prompt" | "bash-included" | "bash-excluded";
+
+export type ParsedText = {
+  mode: EditorMode;
+  displayText: string;
+};
+
+export class BashModeEditor extends CustomEditor {
+  protected mode: EditorMode = "prompt";
+  private persistent = false;
+  private suppressWrappedChange = false;
+  private externalOnSubmit: ((text: string) => void) | undefined;
+  private externalOnChange: ((text: string) => void) | undefined;
+
+  constructor(tui: TUI, editorTheme: EditorTheme, keybindings: KeybindingsManager) {
+    super(tui, editorTheme, keybindings);
+
+    this.installWrappedCallbacks();
+    const parsed = this.parseActualText(super.getText());
+    this.mode = parsed.mode;
+
+    if (parsed.displayText !== super.getText()) {
+      this.withSuppressedChange(() => super.setText(parsed.displayText));
+    }
+  }
+
+  protected getMode(): EditorMode {
+    return this.mode;
+  }
+
+  protected isInBashMode(): boolean {
+    return this.isBashMode(this.mode);
+  }
+
+  private getNextMode(): EditorMode {
+    switch (this.mode) {
+      case "prompt":
+        return "bash-included";
+      case "bash-included":
+        return "bash-excluded";
+      case "bash-excluded":
+        return "prompt";
+    }
+  }
+
+  private isBashMode(mode: EditorMode): boolean {
+    return mode === "bash-included" || mode === "bash-excluded";
+  }
+
+  private parseActualText(text: string): ParsedText {
+    const excludedMatch = text.match(/^(\s*)!!(.*)$/s);
+    if (excludedMatch) {
+      return {
+        mode: "bash-excluded",
+        displayText: `${excludedMatch[1] ?? ""}${excludedMatch[2] ?? ""}`,
+      };
+    }
+
+    const includedMatch = text.match(/^(\s*)!(.*)$/s);
+    if (includedMatch) {
+      return {
+        mode: "bash-included",
+        displayText: `${includedMatch[1] ?? ""}${includedMatch[2] ?? ""}`,
+      };
+    }
+
+    return { mode: "prompt", displayText: text };
+  }
+
+  private toActualText(text: string, mode: EditorMode): string {
+    if (!this.isBashMode(mode)) {
+      return text;
+    }
+
+    const match = text.match(/^(\s*)(.*)$/s);
+    const bangPrefix = mode === "bash-excluded" ? "!!" : "!";
+    return `${match?.[1] ?? ""}${bangPrefix}${match?.[2] ?? ""}`;
+  }
+
+  private installWrappedCallbacks() {
+    Object.defineProperty(this, "onSubmit", {
+      configurable: true,
+      enumerable: true,
+      get: () => (this.externalOnSubmit ? this.submitProxy : undefined),
+      set: (value: ((text: string) => void) | undefined) => {
+        this.externalOnSubmit = value;
+      },
+    });
+
+    Object.defineProperty(this, "onChange", {
+      configurable: true,
+      enumerable: true,
+      get: () => (this.externalOnChange ? this.changeProxy : undefined),
+      set: (value: ((text: string) => void) | undefined) => {
+        this.externalOnChange = value;
+      },
+    });
+  }
+
+  private readonly submitProxy = (text: string) => {
+    const parsed = this.parseActualText(text);
+    const actualText = this.isBashMode(parsed.mode) ? text : this.toActualText(text, this.mode);
+    this.externalOnSubmit?.(actualText);
+  };
+
+  private readonly changeProxy = (text: string) => {
+    if (this.suppressWrappedChange) return;
+    this.externalOnChange?.(this.toActualText(text, this.mode));
+  };
+
+  private withSuppressedChange(fn: () => void) {
+    this.suppressWrappedChange = true;
+    try {
+      fn();
+    } finally {
+      this.suppressWrappedChange = false;
+    }
+  }
+
+  private emitChange() {
+    this.externalOnChange?.(this.toActualText(super.getText(), this.mode));
+  }
+
+  private isHistoryNavInput(data: string): boolean {
+    const keybindings = getKeybindings();
+    return (
+      keybindings.matches(data, "tui.editor.cursorUp") ||
+      keybindings.matches(data, "tui.editor.cursorDown")
+    );
+  }
+
+  private setDisplayText(displayText: string) {
+    const editorInternals = this as unknown as { setTextInternal: (text: string) => void };
+    editorInternals.setTextInternal(displayText);
+  }
+
+  private handleHistoryNavInput(data: string) {
+    const text = this.toActualText(super.getText(), this.mode);
+    const rawBeforeNav = super.getText();
+
+    this.withSuppressedChange(() => super.handleInput(data));
+
+    const rawAfterNav = super.getText();
+    if (rawAfterNav === rawBeforeNav) return;
+
+    const parsedHistoryText = this.parseActualText(rawAfterNav);
+    this.mode = parsedHistoryText.mode;
+    this.persistent = false;
+
+    if (parsedHistoryText.displayText !== rawAfterNav) {
+      this.withSuppressedChange(() => this.setDisplayText(parsedHistoryText.displayText));
+    }
+
+    const actual = this.toActualText(super.getText(), this.mode);
+    if (actual !== text) {
+      this.externalOnChange?.(actual);
+    }
+  }
+
+  private applyMode(mode: EditorMode, persistent = this.persistent) {
+    this.mode = mode;
+    this.persistent = persistent;
+    this.emitChange();
+  }
+
+  private shouldHandleSubmit(data: string): boolean {
+    const keybindings = getKeybindings();
+
+    if (
+      this.disableSubmit ||
+      this.isShowingAutocomplete() ||
+      keybindings.matches(data, "tui.input.newLine") ||
+      data === "\n"
+    ) {
+      return false;
+    }
+    if (!keybindings.matches(data, "tui.input.submit")) {
+      return false;
+    }
+
+    const cursor = super.getCursor();
+    const currentLine = super.getLines()[cursor.line] ?? "";
+    return !(cursor.col > 0 && currentLine[cursor.col - 1] === "\\");
+  }
+
+  private submitCurrentValue() {
+    const actualText = this.toActualText(super.getExpandedText(), this.mode).trim();
+    this.withSuppressedChange(() => super.setText(""));
+
+    if (!this.persistent) {
+      this.mode = "prompt";
+    }
+
+    this.emitChange();
+    this.externalOnSubmit?.(actualText);
+  }
+
+  cycleMode() {
+    if (this.mode !== "prompt" && !this.persistent) return;
+    const nextMode = this.getNextMode();
+    this.applyMode(nextMode, nextMode !== "prompt");
+  }
+
+  override handleInput(data: string) {
+    if (this.isHistoryNavInput(data)) {
+      this.handleHistoryNavInput(data);
+      return;
+    }
+
+    const displayText = super.getText();
+
+    if (!this.persistent && this.mode === "prompt" && data === "!" && /^\s*$/.test(displayText)) {
+      this.applyMode("bash-included", false);
+      return;
+    }
+    if (
+      !this.persistent &&
+      this.mode === "bash-included" &&
+      data === "!" &&
+      /^\s*$/.test(displayText)
+    ) {
+      this.applyMode("bash-excluded", false);
+      return;
+    }
+    if (
+      !this.persistent &&
+      this.mode === "bash-excluded" &&
+      displayText === "" &&
+      matchesKey(data, "backspace")
+    ) {
+      this.applyMode("bash-included", false);
+      return;
+    }
+    if (
+      !this.persistent &&
+      this.mode === "bash-included" &&
+      displayText === "" &&
+      matchesKey(data, "backspace")
+    ) {
+      this.applyMode("prompt", false);
+      return;
+    }
+    if (this.shouldHandleSubmit(data)) {
+      this.submitCurrentValue();
+      return;
+    }
+
+    super.handleInput(data);
+  }
+
+  override getText(): string {
+    return this.toActualText(super.getText(), this.mode);
+  }
+
+  override getExpandedText(): string {
+    return this.toActualText(super.getExpandedText(), this.mode);
+  }
+
+  override setText(text: string) {
+    const parsed = this.parseActualText(text);
+    this.mode = parsed.mode;
+    this.persistent = false;
+    super.setText(parsed.displayText);
+  }
+
+  override insertTextAtCursor(text: string) {
+    const parsed = this.parseActualText(text);
+
+    if (this.mode === "prompt" && this.isBashMode(parsed.mode) && /^\s*$/.test(super.getText())) {
+      this.mode = parsed.mode;
+      this.persistent = false;
+      super.insertTextAtCursor(parsed.displayText);
+      return;
+    }
+
+    super.insertTextAtCursor(text);
+  }
+}

package/src/ui/components/extended-select-list.ts

@@ -0,0 +1,166 @@
+import { getSelectListTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import { Key, SelectList, type KeyId, type SelectItem } from "@earendil-works/pi-tui";
+import { Frame } from "./frame.js";
+import { Lines } from "./lines.js";
+
+export type SelectEntry<TData = unknown> = SelectItem & {
+  data?: TData;
+};
+
+type Options<TData = unknown> = {
+  title: string;
+  items: SelectEntry<TData>[];
+  addLabel?: string;
+  maxVisibleRows?: number;
+  canDelete?: (item: SelectEntry<TData>) => boolean;
+};
+
+export class ExtendedSelectList<TData = unknown> extends Frame {
+  onAdd?: () => void;
+  onSelect?: (item: SelectEntry<TData>) => void;
+  onDelete?: (item: SelectEntry<TData>) => void;
+  onDeleteBlocked?: (item: SelectEntry<TData>) => void;
+  onCancel?: () => void;
+
+  private readonly title: string;
+  private readonly items: [SelectItem, ...SelectEntry<TData>[]] | SelectEntry<TData>[];
+  private readonly canDeleteItem: (item: SelectEntry<TData>) => boolean;
+
+  private selectList: SelectList;
+  private deleteArmed = false;
+
+  constructor(theme: Theme, options: Options<TData>) {
+    super(theme);
+
+    this.title = options.title;
+    this.items = options.items;
+    if (options.addLabel) this.items.unshift({ value: "__add__", label: `[${options.addLabel}]` });
+    this.canDeleteItem = options.canDelete ?? (() => true);
+    this.selectList = new SelectList(this.items, options.maxVisibleRows ?? 7, getSelectListTheme());
+
+    this.registerKeybindings([
+      {
+        key: "esc",
+        hint: "cancel",
+        handler: () => {
+          this.deleteArmed = false;
+          this.onCancel?.();
+        },
+      },
+      { key: "enter", hint: "select", handler: (data) => this.confirmSelection(data) },
+      { key: Key.ctrl("d"), hint: "delete", handler: () => this.armDeletion() },
+    ]);
+  }
+
+  override invalidate() {
+    super.invalidate();
+    this.selectList.invalidate();
+  }
+
+  handleInput(data: string) {
+    if (this.handleKb(data)) return;
+    if (this.deleteArmed) {
+      this.deleteArmed = false;
+    }
+    this.selectList.handleInput(data);
+  }
+
+  override get hints(): [string, string][] {
+    return [["↑↓", "navigate"], ...super.hints];
+  }
+
+  protected override children(width: number): string[] {
+    const lines = new Lines(width);
+
+    lines.add(this.theme.bold(this.title));
+    lines.space();
+
+    for (const renderedLine of this.selectList.render(width)) {
+      lines.add(renderedLine);
+    }
+
+    if (this.deleteArmed) {
+      lines.space();
+      lines.add(this.theme.fg("warning", "Delete selected item: press Enter to confirm"));
+    }
+
+    return lines.get();
+  }
+
+  private confirmSelection(data: string) {
+    if (data === "\n") return;
+    const selected = this.selectList.getSelectedItem() as SelectEntry<TData>;
+    if (!selected) return;
+
+    if (this.deleteArmed) {
+      this.confirmDeletion(selected);
+      return;
+    }
+
+    this.deleteArmed = false;
+    if (this.isAddRow(selected)) {
+      this.onAdd?.();
+      return;
+    }
+
+    this.onSelect?.(selected);
+  }
+
+  private armDeletion() {
+    const selected = this.selectList.getSelectedItem() as SelectEntry<TData>;
+    if (!selected || this.isAddRow(selected)) return;
+    this.setHint(Key.enter, "confirm delete");
+
+    if (!this.canDeleteItem(selected)) {
+      this.onDeleteBlocked?.(selected);
+      return;
+    }
+
+    this.deleteArmed = true;
+  }
+
+  private confirmDeletion(selected: SelectEntry<TData>) {
+    if (this.isAddRow(selected)) {
+      this.deleteArmed = false;
+      return;
+    }
+    if (!this.canDeleteItem(selected)) {
+      this.deleteArmed = false;
+      this.onDeleteBlocked?.(selected);
+      return;
+    }
+
+    const selectedItemIndex = this.items.findIndex((item) => item === selected);
+    if (selectedItemIndex < 0) {
+      this.deleteArmed = false;
+      return;
+    }
+
+    const deletedItem = this.items[selectedItemIndex] as SelectEntry<TData>;
+    if (!deletedItem) {
+      this.deleteArmed = false;
+      return;
+    }
+
+    this.items.splice(selectedItemIndex, 1);
+    this.deleteArmed = false;
+    this.onDelete?.(deletedItem);
+  }
+
+  private isAddRow(item: SelectEntry<TData>): boolean {
+    return item.value === "__add__";
+  }
+
+  extendKb(key: KeyId, customHandler: (selected: SelectEntry<TData>) => void, hint?: string) {
+    this.registerKeybindings([
+      {
+        key,
+        handler: () => {
+          const selected = this.selectList.getSelectedItem() as SelectEntry<TData>;
+          customHandler(selected);
+        },
+        hint,
+      },
+    ]);
+  }
+}

package/src/ui/components/form-field.ts

@@ -0,0 +1,184 @@
+import type { KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import { Key, matchesKey, truncateToWidth, type Focusable, type TUI } from "@earendil-works/pi-tui";
+import { PlaceholderInput } from "./placeholder-input.js";
+
+export type FormFieldMode<TValue> =
+  | { type: "input"; placeholder: string; text?: string; startEditing?: boolean }
+  | { type: "toggle"; values: readonly TValue[]; initialIndex?: number };
+
+export type Field<TValue> = {
+  key: string;
+  label?: string;
+  mode: FormFieldMode<TValue>;
+  labelWidth?: number;
+};
+
+export class FormField<TValue = string> implements Focusable {
+  onInputSubmit?: (value: string) => boolean | void;
+  onInputCancel?: () => void;
+  onToggle?: (value: TValue, index: number) => void;
+
+  private readonly labelWidth: number;
+  private readonly mode: FormFieldMode<TValue>;
+  private readonly input?: PlaceholderInput;
+
+  private label: string;
+  private inputText = "";
+  private toggleIndex = 0;
+
+  private _focused = false;
+  private _highlighted = false;
+  private _editing = false;
+
+  constructor(
+    tui: TUI,
+    keybindings: KeybindingsManager,
+    private readonly theme: Theme,
+    field: Field<TValue>,
+  ) {
+    this.mode = field.mode;
+    this.label = field.label ?? field.key;
+    this.labelWidth = field.labelWidth ?? 40;
+
+    if (this.mode.type === "input") {
+      this.input = new PlaceholderInput(tui, keybindings, theme, this.mode.placeholder);
+      this.inputText = this.mode.text ?? "";
+      this._editing = this.mode.startEditing ?? false;
+      if (this._editing) {
+        this.input.setText(this.inputText);
+      }
+      this.syncInputFocus();
+      return;
+    }
+
+    if (this.mode.values.length === 0) {
+      throw new Error("FormField toggle mode requires at least one value.");
+    }
+
+    const initialIndex = this.mode.initialIndex ?? 0;
+    this.toggleIndex = Math.max(0, Math.min(this.mode.values.length - 1, initialIndex));
+  }
+
+  get focused(): boolean {
+    return this._focused;
+  }
+
+  set focused(value: boolean) {
+    this._focused = value;
+    this.syncInputFocus();
+  }
+
+  get editing(): boolean {
+    return this._editing;
+  }
+
+  get modeType(): "input" | "toggle" {
+    return this.mode.type;
+  }
+
+  set highlighted(value: boolean) {
+    this._highlighted = value && !this._editing;
+  }
+
+  setLabel(label: string) {
+    this.label = label;
+  }
+
+  setText(value: string) {
+    this.inputText = value;
+    if (!this._editing) return;
+    this.input?.setText(value);
+  }
+
+  getText(): string {
+    if (this.mode.type === "input") return this.inputText;
+    const currentValue = this.mode.values[this.toggleIndex]!;
+    return String(currentValue);
+  }
+
+  startEditing() {
+    if (this.mode.type !== "input") return;
+    this._editing = true;
+    this.input?.setText(this.inputText);
+    this.syncInputFocus();
+  }
+
+  invalidate() {
+    this.input?.invalidate();
+  }
+
+  render(width: number): string[] {
+    const label = this.label + " ".repeat(this.labelWidth - this.label.length);
+    const prefix = truncateToWidth(this.theme.fg("dim", label), this.labelWidth);
+
+    if (this.mode.type === "input") {
+      if (this._editing) {
+        const inputLine = this.input!.render(Math.max(1, width - this.labelWidth))[0];
+        return [truncateToWidth(prefix + inputLine, width)];
+      }
+
+      const input = this.inputText
+        ? this.theme.fg(this._highlighted ? "accent" : "text", this.inputText)
+        : this.theme.fg(this._highlighted ? "muted" : "dim", this.mode.placeholder);
+      return [truncateToWidth(prefix + input, width)];
+    }
+
+    const currentValue = this.mode.values[this.toggleIndex]!;
+    const valueLabel = String(currentValue);
+    const color = this._highlighted ? "accent" : "text";
+    return [truncateToWidth(prefix + this.theme.fg(color, valueLabel), width)];
+  }
+
+  handleInput(data: string) {
+    if (this.mode.type === "toggle") {
+      if (matchesKey(data, Key.enter)) {
+        this.toggleIndex = (this.toggleIndex + 1) % this.mode.values.length;
+        const currentValue = this.mode.values[this.toggleIndex]!;
+        this.onToggle?.(currentValue, this.toggleIndex);
+      }
+      return;
+    }
+
+    if (!this._editing) return;
+
+    if (matchesKey(data, Key.escape)) {
+      this.stopEditing();
+      this.onInputCancel?.();
+      return;
+    }
+
+    if (matchesKey(data, Key.enter)) {
+      const value = this.input?.getText() ?? "";
+      const hasSubmitHandler = this.onInputSubmit !== undefined;
+      const submitResult = this.onInputSubmit?.(value);
+      if (submitResult === false) return;
+
+      if (!hasSubmitHandler) {
+        this.inputText = value;
+      }
+      this.stopEditing();
+      return;
+    }
+
+    this.input?.handleInput(data);
+  }
+
+  getToggleValue(): TValue | undefined {
+    if (this.mode.type !== "toggle") return;
+    return this.mode.values[this.toggleIndex];
+  }
+
+  private stopEditing() {
+    this._editing = false;
+    if (this.mode.type === "input") {
+      this.input?.setText(this.inputText);
+    }
+    this.syncInputFocus();
+  }
+
+  private syncInputFocus() {
+    if (this.mode.type !== "input") return;
+    if (!this.input) return;
+    this.input.focused = this._focused && this._editing;
+  }
+}