Method _renderCommandPalette

src/tui/fullscreen.js:518–599

(inputRow)

  }

  _renderCommandPalette(inputRow) {
    let buf = '';
    const filter = this.inputBuffer.slice(1).toLowerCase(); // Remove leading /
    const filtered = this.commands.filter(c =>
      c.cmd.slice(1).startsWith(filter) || (c.alias && c.alias.slice(1).startsWith(filter))
    );

    // Keep layout stable: fixed 8 visible rows
    const availableRows = inputRow - 3;
    const maxVisible = Math.max(1, Math.min(8, availableRows));
    this._paletteMaxVisible = maxVisible;

    // Clamp selection
    if (filtered.length > 0) {
      this.commandPaletteSelection = Math.max(0, Math.min(this.commandPaletteSelection, filtered.length - 1));
    } else {
      this.commandPaletteSelection = 0;
    }

    // Keep scroll offset in sync
    if (this.commandPaletteSelection < this._paletteScrollOffset) {
      this._paletteScrollOffset = this.commandPaletteSelection;
    } else if (this.commandPaletteSelection >= this._paletteScrollOffset + maxVisible) {
      this._paletteScrollOffset = this.commandPaletteSelection - maxVisible + 1;
    }
    const maxOffset = Math.max(0, filtered.length - maxVisible);
    this._paletteScrollOffset = Math.max(0, Math.min(this._paletteScrollOffset, maxOffset));

    const paletteWidth = Math.max(20, Math.min(this.width - 4, 60));
    const startRow = inputRow - maxVisible - 1;

    // Draw top border with result count (e.g. [5 of 12])
    buf += ANSI.moveTo(startRow, 2);
    const countLabel = filtered.length > 0
      ? `  ${this.commandPaletteSelection + 1}/${filtered.length}  `
      : '  0/0  ';
    const topLabel = ` Commands ${countLabel}`;
    const topFill = paletteWidth - 2 - topLabel.length;
    buf += this.theme.border + BOX.rTopLeft + this.theme.accent + topLabel + this.theme.border + BOX.horizontal.repeat(Math.max(0, topFill)) + BOX.rTopRight + ANSI.reset;

    // Render fixed maxVisible rows
    for (let i = 0; i < maxVisible; i++) {
      const row = startRow + 1 + i;
      buf += ANSI.moveTo(row, 2);
      buf += this.theme.border + BOX.vertical + ANSI.reset;

      const itemIdx = i + this._paletteScrollOffset;
      if (itemIdx < filtered.length) {
        const cmd = filtered[itemIdx];
        const isSelected = itemIdx === this.commandPaletteSelection;

        // Columns: Command (width 16) | Divider (width 3) | Description
        const CMD_COL_WIDTH = 16;
        const descWidth = Math.max(1, paletteWidth - 2 - 1 - CMD_COL_WIDTH - 3);

        const cmdText = cmd.cmd + (cmd.alias ? ` (${cmd.alias})` : '');
        const col1 = fitAnsi(cmdText, CMD_COL_WIDTH);
        const col2 = fitAnsi(cmd.desc, descWidth);