mia-code 0.2.0

package/src/multiline-input.ts

@@ -0,0 +1,739 @@
+/**
+ * MultilineInput - Multiline input handler for terminal CLIs
+ *
+ * Supports:
+ * - Ctrl+J to add new lines without submitting
+ * - Enter to submit the complete input
+ * - Pasting multiline content
+ * - Arrow key navigation
+ * - Interactive dropdown completion for / commands and @ file paths
+ * - TTY detection with readline fallback
+ */
+
+import { EventEmitter } from "events";
+
+export interface TabCompletion {
+  matches: string[];
+  /** Display labels (shown in dropdown). Falls back to matches if not provided. */
+  labels?: string[];
+  prefix: string;
+  /** Position in the input line where the completable token starts */
+  tokenStart: number;
+  /** Character to prepend to each match for display (e.g. "/" or "@") */
+  triggerChar: string;
+  /** If true, append "/" to directories instead of " " */
+  isFilePath?: boolean;
+}
+
+export interface MultilineInputOptions {
+  prompt: string;
+  continuationPrompt?: string;
+  maxLines?: number;
+  onSubmit: (input: string) => Promise<void>;
+  onClose?: () => void;
+  onTabComplete?: (input: string) => TabCompletion | null;
+}
+
+/**
+ * Check if environment supports raw mode multiline input
+ */
+export function supportsMultilineInput(): boolean {
+  return process.stdin.isTTY === true;
+}
+
+// ── Dropdown state ──────────────────────────────────────────────────
+interface DropdownState {
+  visible: boolean;
+  items: string[];        // completion values
+  labels: string[];       // display labels
+  selectedIndex: number;
+  completion: TabCompletion;
+  renderedRows: number;   // how many rows the dropdown currently occupies on screen
+}
+
+export class MultilineInput extends EventEmitter {
+  private prompt: string;
+  private continuationPrompt: string;
+  private maxLines: number;
+  private onSubmit: (input: string) => Promise<void>;
+  private onClose?: () => void;
+  private onTabComplete?: (input: string) => TabCompletion | null;
+
+  private lines: string[] = [];
+  private currentLine: string = "";
+  private cursorPos: number = 0;
+  private isRunning: boolean = false;
+  private isPaused: boolean = false;
+  private isProcessing: boolean = false;
+
+  // Dropdown
+  private dropdown: DropdownState = {
+    visible: false,
+    items: [],
+    labels: [],
+    selectedIndex: 0,
+    completion: { matches: [], prefix: "", tokenStart: 0, triggerChar: "" },
+    renderedRows: 0,
+  };
+  private static readonly MAX_DROPDOWN_ITEMS = 10;
+
+  // ── Helpers ─────────────────────────────────────────────────────
+  private static stripAnsi(str: string): string {
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "");
+  }
+
+  private visibleLength(str: string): number {
+    return MultilineInput.stripAnsi(str).length;
+  }
+
+  private getColumns(): number {
+    return process.stdout.columns || 80;
+  }
+
+  private getRows(): number {
+    return process.stdout.rows || 24;
+  }
+
+  private wrappedRows(promptStr: string, text: string): number {
+    const totalVisible = this.visibleLength(promptStr) + text.length;
+    const cols = this.getColumns();
+    if (cols <= 0) return 1;
+    return Math.max(1, Math.ceil(totalVisible / cols));
+  }
+
+  constructor(options: MultilineInputOptions) {
+    super();
+    this.prompt = options.prompt;
+    this.continuationPrompt = options.continuationPrompt || "... ";
+    this.maxLines = options.maxLines || 100;
+    this.onSubmit = options.onSubmit;
+    this.onClose = options.onClose;
+    this.onTabComplete = options.onTabComplete;
+  }
+
+  start(): void {
+    if (!supportsMultilineInput()) {
+      throw new Error("MultilineInput requires TTY mode");
+    }
+    this.isRunning = true;
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on("data", this.handleData);
+    this.showPrompt();
+  }
+
+  stop(): void {
+    this.isRunning = false;
+    this.clearDropdown();
+    process.stdin.setRawMode(false);
+    process.stdin.removeListener("data", this.handleData);
+  }
+
+  pause(): void {
+    if (!this.isRunning) return;
+    this.isPaused = true;
+    this.clearDropdown();
+    process.stdin.setRawMode(false);
+    process.stdin.removeListener("data", this.handleData);
+  }
+
+  resume(): void {
+    if (!this.isRunning || !this.isPaused) return;
+    this.isPaused = false;
+    process.stdin.setRawMode(true);
+    process.stdin.on("data", this.handleData);
+    this.redraw();
+  }
+
+  reset(): void {
+    this.lines = [];
+    this.currentLine = "";
+    this.cursorPos = 0;
+    this.isProcessing = false;
+    this.clearDropdown();
+    this.showPrompt();
+  }
+
+  // ── Prompt / Redraw ─────────────────────────────────────────────
+
+  private showPrompt(): void {
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    process.stdout.write(promptText);
+  }
+
+  private redraw(): void {
+    // First erase any visible dropdown so it doesn't leave ghosts
+    this.eraseDropdownRows();
+
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    const cols = this.getColumns();
+    const promptVisible = this.visibleLength(promptText);
+
+    const totalVisible = promptVisible + this.currentLine.length;
+    const totalRows = Math.max(1, Math.ceil(totalVisible / cols));
+
+    const cursorAbsPos = promptVisible + this.cursorPos;
+    const cursorRow = Math.floor(cursorAbsPos / cols);
+
+    if (cursorRow > 0) {
+      process.stdout.write(`\x1B[${cursorRow}A`);
+    }
+
+    for (let i = 0; i < totalRows; i++) {
+      process.stdout.write("\r\x1B[K");
+      if (i < totalRows - 1) {
+        process.stdout.write("\x1B[1B");
+      }
+    }
+
+    if (totalRows > 1) {
+      process.stdout.write(`\x1B[${totalRows - 1}A`);
+    }
+
+    process.stdout.write("\r");
+    process.stdout.write(promptText);
+    process.stdout.write(this.currentLine);
+
+    if (this.cursorPos < this.currentLine.length) {
+      const newTotalRows = Math.max(1, Math.ceil((promptVisible + this.currentLine.length) / cols));
+      const endRow = newTotalRows - 1;
+      const targetAbsPos = promptVisible + this.cursorPos;
+      const targetRow = Math.floor(targetAbsPos / cols);
+      const targetCol = targetAbsPos % cols;
+
+      if (endRow > targetRow) {
+        process.stdout.write(`\x1B[${endRow - targetRow}A`);
+      }
+      process.stdout.write(`\r\x1B[${targetCol}C`);
+    }
+
+    // Re-render dropdown if still active
+    if (this.dropdown.visible) {
+      this.renderDropdown();
+    }
+  }
+
+  // ── Dropdown rendering ──────────────────────────────────────────
+  //
+  // IMPORTANT: We avoid \x1B[s / \x1B[u (save/restore cursor) because
+  // terminal scrolling invalidates the saved position, causing ghost rows.
+  // Instead we use explicit relative movement and always return the cursor
+  // to the input position by counting rows moved.
+
+  /**
+   * Calculate how many rows down from the cursor to the start of the dropdown
+   */
+  private rowsFromCursorToDropdown(): number {
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    const promptVisible = this.visibleLength(promptText);
+    const cols = this.getColumns();
+    const inputRows = Math.max(1, Math.ceil((promptVisible + this.currentLine.length) / cols));
+    const cursorAbsPos = promptVisible + this.cursorPos;
+    const cursorRow = Math.floor(cursorAbsPos / cols);
+    return (inputRows - 1 - cursorRow) + 1;
+  }
+
+  /**
+   * Reposition cursor back to the input editing position (absolute)
+   */
+  private repositionCursor(): void {
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    const promptVisible = this.visibleLength(promptText);
+    const cols = this.getColumns();
+    const cursorAbsPos = promptVisible + this.cursorPos;
+    const cursorCol = cursorAbsPos % cols;
+    process.stdout.write("\r");
+    if (cursorCol > 0) {
+      process.stdout.write(`\x1B[${cursorCol}C`);
+    }
+  }
+
+  private eraseDropdownRows(): void {
+    if (this.dropdown.renderedRows <= 0) return;
+
+    const down = this.rowsFromCursorToDropdown();
+
+    // Move down from cursor to dropdown start
+    if (down > 0) {
+      process.stdout.write(`\x1B[${down}B`);
+    }
+
+    // Clear from here to end of screen (wipes all dropdown rows at once)
+    process.stdout.write("\r\x1B[J");
+
+    // Move back up to cursor row
+    if (down > 0) {
+      process.stdout.write(`\x1B[${down}A`);
+    }
+
+    // Restore column position
+    this.repositionCursor();
+
+    this.dropdown.renderedRows = 0;
+  }
+
+  private renderDropdown(): void {
+    if (!this.dropdown.visible || this.dropdown.items.length === 0) return;
+
+    const cols = this.getColumns();
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    const promptVisible = this.visibleLength(promptText);
+    const inputRows = Math.max(1, Math.ceil((promptVisible + this.currentLine.length) / cols));
+
+    const down = this.rowsFromCursorToDropdown();
+
+    // Move down from cursor to dropdown area
+    if (down > 0) {
+      process.stdout.write(`\x1B[${down}B`);
+    }
+
+    // Clear everything below (any stale dropdown content)
+    process.stdout.write("\r\x1B[J");
+
+    // Determine how many items to show
+    const maxVisible = Math.min(
+      this.dropdown.items.length,
+      MultilineInput.MAX_DROPDOWN_ITEMS,
+      Math.max(1, this.getRows() - inputRows - 1)
+    );
+
+    // Scroll window around selected index
+    let startIdx = 0;
+    if (this.dropdown.selectedIndex >= maxVisible) {
+      startIdx = this.dropdown.selectedIndex - maxVisible + 1;
+    }
+
+    const { triggerChar } = this.dropdown.completion;
+    let rowsDrawn = 0;
+
+    for (let i = 0; i < maxVisible; i++) {
+      const idx = startIdx + i;
+      if (idx >= this.dropdown.items.length) break;
+
+      const label = this.dropdown.labels[idx] || (triggerChar + this.dropdown.items[idx]);
+      const isSelected = idx === this.dropdown.selectedIndex;
+      const truncated = label.length > cols - 4
+        ? label.slice(0, cols - 7) + "..."
+        : label;
+
+      if (isSelected) {
+        process.stdout.write(`\x1B[7m  ${truncated}  \x1B[0m`);
+      } else {
+        process.stdout.write(`\x1B[90m  ${truncated}\x1B[0m`);
+      }
+
+      rowsDrawn++;
+      if (i < maxVisible - 1) {
+        process.stdout.write("\n\r");
+      }
+    }
+
+    // Scroll indicator
+    if (this.dropdown.items.length > maxVisible) {
+      const showing = `${startIdx + 1}-${Math.min(startIdx + maxVisible, this.dropdown.items.length)}`;
+      process.stdout.write(`\n\r\x1B[90m  ↕ ${showing} of ${this.dropdown.items.length}\x1B[0m`);
+      rowsDrawn++;
+    }
+
+    this.dropdown.renderedRows = rowsDrawn;
+
+    // Move back up to cursor row: rowsDrawn lines back to dropdown start, then `down` back to cursor
+    const totalUp = rowsDrawn + down - 1;
+    if (totalUp > 0) {
+      process.stdout.write(`\x1B[${totalUp}A`);
+    }
+
+    // Restore column position
+    this.repositionCursor();
+  }
+
+  private clearDropdown(): void {
+    this.eraseDropdownRows();
+    this.dropdown.visible = false;
+    this.dropdown.items = [];
+    this.dropdown.labels = [];
+    this.dropdown.selectedIndex = 0;
+    this.dropdown.renderedRows = 0;
+  }
+
+  /**
+   * Query the completion handler and update dropdown state
+   */
+  private updateDropdown(): void {
+    if (!this.onTabComplete) {
+      this.clearDropdown();
+      return;
+    }
+
+    const result = this.onTabComplete(this.currentLine);
+    if (!result || result.matches.length === 0) {
+      this.clearDropdown();
+      return;
+    }
+
+    this.dropdown.visible = true;
+    this.dropdown.items = result.matches;
+    this.dropdown.labels = result.labels || result.matches.map(m => result.triggerChar + m);
+    this.dropdown.selectedIndex = 0;
+    this.dropdown.completion = result;
+  }
+
+  /**
+   * Accept the currently selected dropdown item
+   */
+  private acceptDropdownSelection(): void {
+    if (!this.dropdown.visible || this.dropdown.items.length === 0) return;
+
+    const { tokenStart, triggerChar, isFilePath } = this.dropdown.completion;
+    const match = this.dropdown.items[this.dropdown.selectedIndex];
+    const before = this.currentLine.slice(0, tokenStart);
+    const suffix = (isFilePath && match.endsWith("/")) ? "" : " ";
+    const completed = before + triggerChar + match + suffix;
+
+    this.currentLine = completed;
+    this.cursorPos = completed.length;
+
+    // If it's a directory, keep dropdown open for deeper navigation
+    if (isFilePath && match.endsWith("/")) {
+      this.redraw();
+      this.updateDropdown();
+      this.renderDropdown();
+    } else {
+      this.clearDropdown();
+      this.redraw();
+    }
+  }
+
+  // ── Input handling ──────────────────────────────────────────────
+
+  private handleData = async (data: Buffer): Promise<void> => {
+    if (this.isProcessing) return;
+
+    const str = data.toString("utf8");
+
+    // Paste detection: multiple chars without escape sequence
+    if (str.length > 1 && !str.startsWith("\x1B")) {
+      this.clearDropdown();
+      this.handlePaste(str);
+      return;
+    }
+
+    const char = str;
+    const code = char.charCodeAt(0);
+
+    // ── Dropdown-aware key handling ──
+
+    // Escape sequences while dropdown is open
+    if (char.startsWith("\x1B") && this.dropdown.visible) {
+      if (char === "\x1B[A") {
+        // Arrow Up — move selection up
+        if (this.dropdown.selectedIndex > 0) {
+          this.dropdown.selectedIndex--;
+          this.eraseDropdownRows();
+          this.renderDropdown();
+        }
+        return;
+      } else if (char === "\x1B[B") {
+        // Arrow Down — move selection down
+        if (this.dropdown.selectedIndex < this.dropdown.items.length - 1) {
+          this.dropdown.selectedIndex++;
+          this.eraseDropdownRows();
+          this.renderDropdown();
+        }
+        return;
+      } else if (char === "\x1B" || char === "\x1B[D" || char === "\x1B[C") {
+        // Esc or horizontal arrows — close dropdown
+        this.clearDropdown();
+        if (char !== "\x1B") {
+          this.handleEscapeSequence(char);
+        }
+        return;
+      }
+    }
+
+    // Escape (standalone) to close dropdown
+    if (code === 27 && char.length === 1 && this.dropdown.visible) {
+      this.clearDropdown();
+      return;
+    }
+
+    switch (code) {
+      case 3: // Ctrl+C
+        this.clearDropdown();
+        if (this.currentLine || this.lines.length > 0) {
+          process.stdout.write("\n");
+          this.lines = [];
+          this.currentLine = "";
+          this.cursorPos = 0;
+          this.showPrompt();
+        } else {
+          process.stdout.write("\n");
+          if (this.onClose) this.onClose();
+        }
+        break;
+
+      case 4: // Ctrl+D
+        if (!this.currentLine && this.lines.length === 0) {
+          this.clearDropdown();
+          process.stdout.write("\n");
+          if (this.onClose) this.onClose();
+        }
+        break;
+
+      case 10: // Ctrl+J (newline without submit)
+        this.clearDropdown();
+        if (this.lines.length < this.maxLines) {
+          this.lines.push(this.currentLine);
+          this.currentLine = "";
+          this.cursorPos = 0;
+          process.stdout.write("\n");
+          this.showPrompt();
+        }
+        break;
+
+      case 9: // Tab — accept dropdown selection or trigger completion
+        if (this.dropdown.visible) {
+          this.acceptDropdownSelection();
+        } else if (this.onTabComplete) {
+          // Open dropdown on Tab if there's a completable context
+          this.updateDropdown();
+          if (this.dropdown.visible) {
+            this.redraw();
+          }
+        }
+        break;
+
+      case 13: // Enter
+        if (this.dropdown.visible) {
+          // Accept selection instead of submitting
+          this.acceptDropdownSelection();
+        } else {
+          this.clearDropdown();
+          this.lines.push(this.currentLine);
+          const fullInput = this.lines.join("\n");
+          this.lines = [];
+          this.currentLine = "";
+          this.cursorPos = 0;
+          process.stdout.write("\n");
+
+          this.isProcessing = true;
+          try {
+            await this.onSubmit(fullInput);
+          } finally {
+            this.isProcessing = false;
+          }
+        }
+        break;
+
+      case 127: // Backspace (macOS/Linux)
+      case 8:   // Backspace (Windows)
+        if (this.cursorPos > 0) {
+          this.currentLine =
+            this.currentLine.slice(0, this.cursorPos - 1) +
+            this.currentLine.slice(this.cursorPos);
+          this.cursorPos--;
+          this.redraw();
+          this.maybeShowDropdown();
+        } else if (this.lines.length > 0) {
+          const prevLine = this.lines.pop()!;
+          this.cursorPos = prevLine.length;
+          this.currentLine = prevLine + this.currentLine;
+          this.clearDropdown();
+          process.stdout.write("\x1B[A");
+          this.redraw();
+        }
+        break;
+
+      case 21: // Ctrl+U (clear line)
+        this.currentLine = this.currentLine.slice(this.cursorPos);
+        this.cursorPos = 0;
+        this.clearDropdown();
+        this.redraw();
+        break;
+
+      case 23: // Ctrl+W (delete word)
+        if (this.cursorPos > 0) {
+          const before = this.currentLine.slice(0, this.cursorPos);
+          const after = this.currentLine.slice(this.cursorPos);
+          const lastSpace = before.trimEnd().lastIndexOf(" ");
+          const newBefore = lastSpace >= 0 ? before.slice(0, lastSpace + 1) : "";
+          this.currentLine = newBefore + after;
+          this.cursorPos = newBefore.length;
+          this.redraw();
+          this.maybeShowDropdown();
+        }
+        break;
+
+      case 12: // Ctrl+L (clear screen)
+        this.clearDropdown();
+        process.stdout.write("\x1B[2J\x1B[H");
+        this.redrawAll();
+        break;
+
+      default:
+        if (char.startsWith("\x1B")) {
+          this.clearDropdown();
+          this.handleEscapeSequence(char);
+        } else if (code >= 32) {
+          // Regular character
+          this.currentLine =
+            this.currentLine.slice(0, this.cursorPos) +
+            char +
+            this.currentLine.slice(this.cursorPos);
+          this.cursorPos++;
+          this.redraw();
+          this.maybeShowDropdown();
+        }
+    }
+  };
+
+  /**
+   * Check if the current input context should trigger a live dropdown.
+   * "/" commands: always live (few items, instant feedback).
+   * "@" files: only update if dropdown is already open (Tab to initiate).
+   */
+  private maybeShowDropdown(): void {
+    if (!this.onTabComplete) return;
+
+    const textUpToCursor = this.currentLine.slice(0, this.cursorPos);
+
+    // "/" commands: live dropdown as you type
+    if (textUpToCursor.startsWith("/") && !textUpToCursor.includes(" ")) {
+      this.updateDropdown();
+      if (this.dropdown.visible) {
+        this.renderDropdown();
+      }
+      return;
+    }
+
+    // "@" files: if dropdown already open, update it as you type deeper
+    if (this.dropdown.visible && this.isInAtContext(textUpToCursor)) {
+      this.updateDropdown();
+      if (this.dropdown.visible) {
+        this.renderDropdown();
+      }
+      return;
+    }
+
+    // No trigger context — close dropdown
+    if (this.dropdown.visible) {
+      this.clearDropdown();
+    }
+  }
+
+  /**
+   * Check if text ends with an active @path context (no space after @)
+   */
+  private isInAtContext(text: string): boolean {
+    const atIdx = text.lastIndexOf("@");
+    if (atIdx < 0) return false;
+    const afterAt = text.slice(atIdx + 1);
+    return !afterAt.includes(" ");
+  }
+
+  private handlePaste(str: string): void {
+    const pastedLines = str.split(/\r?\n/);
+
+    this.currentLine =
+      this.currentLine.slice(0, this.cursorPos) +
+      pastedLines[0] +
+      this.currentLine.slice(this.cursorPos);
+    this.cursorPos += pastedLines[0].length;
+
+    for (let i = 1; i < pastedLines.length; i++) {
+      if (this.lines.length >= this.maxLines) break;
+      this.lines.push(this.currentLine);
+      this.currentLine = pastedLines[i];
+      this.cursorPos = this.currentLine.length;
+    }
+
+    this.redrawAll();
+  }
+
+  private handleEscapeSequence(seq: string): void {
+    if (seq === "\x1B[D") {
+      if (this.cursorPos > 0) {
+        this.cursorPos--;
+        this.redraw();
+      }
+    } else if (seq === "\x1B[C") {
+      if (this.cursorPos < this.currentLine.length) {
+        this.cursorPos++;
+        this.redraw();
+      }
+    } else if (seq === "\x1B[A") {
+      // Arrow Up — could implement history
+    } else if (seq === "\x1B[B") {
+      // Arrow Down — could implement history
+    } else if (seq === "\x1B[H" || seq === "\x1B[1~") {
+      this.cursorPos = 0;
+      this.redraw();
+    } else if (seq === "\x1B[F" || seq === "\x1B[4~") {
+      this.cursorPos = this.currentLine.length;
+      this.redraw();
+    } else if (seq === "\x1B[3~") {
+      if (this.cursorPos < this.currentLine.length) {
+        this.currentLine =
+          this.currentLine.slice(0, this.cursorPos) +
+          this.currentLine.slice(this.cursorPos + 1);
+        this.redraw();
+      }
+    }
+  }
+
+  private redrawAll(): void {
+    const cols = this.getColumns();
+
+    let totalTermRows = 0;
+    for (let i = 0; i < this.lines.length; i++) {
+      const p = i === 0 ? this.prompt : this.continuationPrompt;
+      totalTermRows += this.wrappedRows(p, this.lines[i]);
+    }
+    const currentPrompt = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    totalTermRows += this.wrappedRows(currentPrompt, this.currentLine);
+
+    const currentLineRows = this.wrappedRows(currentPrompt, this.currentLine);
+    const rowsAboveCurrent = totalTermRows - currentLineRows;
+    const cursorRowInCurrent = currentLineRows - 1;
+    const moveUp = rowsAboveCurrent + cursorRowInCurrent;
+    if (moveUp > 0) {
+      process.stdout.write(`\x1B[${moveUp}A`);
+    }
+
+    for (let i = 0; i < totalTermRows; i++) {
+      process.stdout.write("\r\x1B[K");
+      if (i < totalTermRows - 1) {
+        process.stdout.write("\x1B[1B");
+      }
+    }
+
+    if (totalTermRows > 1) {
+      process.stdout.write(`\x1B[${totalTermRows - 1}A`);
+    }
+    process.stdout.write("\r");
+
+    for (let i = 0; i < this.lines.length; i++) {
+      const p = i === 0 ? this.prompt : this.continuationPrompt;
+      process.stdout.write(p + this.lines[i] + "\n");
+    }
+
+    const promptText = this.lines.length === 0 ? this.prompt : this.continuationPrompt;
+    const promptVisible = this.visibleLength(promptText);
+    process.stdout.write(promptText);
+    process.stdout.write(this.currentLine);
+
+    if (this.cursorPos < this.currentLine.length) {
+      const newRows = this.wrappedRows(promptText, this.currentLine);
+      const endRow = newRows - 1;
+      const targetAbsPos = promptVisible + this.cursorPos;
+      const targetRow = Math.floor(targetAbsPos / cols);
+      const targetCol = targetAbsPos % cols;
+
+      if (endRow > targetRow) {
+        process.stdout.write(`\x1B[${endRow - targetRow}A`);
+      }
+      process.stdout.write(`\r\x1B[${targetCol}C`);
+    }
+  }
+}