@jmoyers/harness 0.1.0

package/src/ui/repository-fold-input.ts

@@ -0,0 +1,91 @@
+import {
+  reduceRepositoryFoldChordInput,
+  repositoryTreeArrowAction,
+} from '../mux/live-mux/repository-folding.ts';
+import type { LeftNavSelection } from '../mux/live-mux/left-nav.ts';
+
+interface RepositoryFoldInputOptions {
+  readonly getLeftNavSelection: () => LeftNavSelection;
+  readonly getRepositoryToggleChordPrefixAtMs: () => number | null;
+  readonly setRepositoryToggleChordPrefixAtMs: (value: number | null) => void;
+  readonly conversations: ReadonlyMap<string, { directoryId: string | null }>;
+  readonly repositoryGroupIdForDirectory: (directoryId: string) => string;
+  readonly collapseRepositoryGroup: (repositoryGroupId: string) => void;
+  readonly expandRepositoryGroup: (repositoryGroupId: string) => void;
+  readonly collapseAllRepositoryGroups: () => void;
+  readonly expandAllRepositoryGroups: () => void;
+  readonly selectLeftNavRepository: (repositoryGroupId: string) => void;
+  readonly markDirty: () => void;
+  readonly chordTimeoutMs: number;
+  readonly collapseAllChordPrefix: Buffer;
+  readonly nowMs: () => number;
+}
+
+export class RepositoryFoldInput {
+  constructor(private readonly options: RepositoryFoldInputOptions) {}
+
+  private selectedRepositoryGroupId(): string | null {
+    const leftNavSelection = this.options.getLeftNavSelection();
+    if (leftNavSelection.kind === 'repository') {
+      return leftNavSelection.repositoryId;
+    }
+    if (leftNavSelection.kind === 'project') {
+      return this.options.repositoryGroupIdForDirectory(leftNavSelection.directoryId);
+    }
+    if (leftNavSelection.kind === 'conversation') {
+      const conversation = this.options.conversations.get(leftNavSelection.sessionId);
+      if (conversation?.directoryId !== null && conversation?.directoryId !== undefined) {
+        return this.options.repositoryGroupIdForDirectory(conversation.directoryId);
+      }
+    }
+    return null;
+  }
+
+  handleRepositoryTreeArrow(input: Buffer): boolean {
+    const repositoryId = this.selectedRepositoryGroupId();
+    const action = repositoryTreeArrowAction(
+      input,
+      this.options.getLeftNavSelection(),
+      repositoryId,
+    );
+    if (repositoryId === null || action === null) {
+      return false;
+    }
+    if (action === 'expand') {
+      this.options.expandRepositoryGroup(repositoryId);
+      this.options.selectLeftNavRepository(repositoryId);
+      this.options.markDirty();
+      return true;
+    }
+    if (action === 'collapse') {
+      this.options.collapseRepositoryGroup(repositoryId);
+      this.options.selectLeftNavRepository(repositoryId);
+      this.options.markDirty();
+      return true;
+    }
+    return false;
+  }
+
+  handleRepositoryFoldChords(input: Buffer): boolean {
+    const reduced = reduceRepositoryFoldChordInput({
+      input,
+      leftNavSelection: this.options.getLeftNavSelection(),
+      nowMs: this.options.nowMs(),
+      prefixAtMs: this.options.getRepositoryToggleChordPrefixAtMs(),
+      chordTimeoutMs: this.options.chordTimeoutMs,
+      collapseAllChordPrefix: this.options.collapseAllChordPrefix,
+    });
+    this.options.setRepositoryToggleChordPrefixAtMs(reduced.nextPrefixAtMs);
+    if (reduced.action === 'expand-all') {
+      this.options.expandAllRepositoryGroups();
+      this.options.markDirty();
+      return true;
+    }
+    if (reduced.action === 'collapse-all') {
+      this.options.collapseAllRepositoryGroups();
+      this.options.markDirty();
+      return true;
+    }
+    return reduced.consumed;
+  }
+}

package/src/ui/screen.ts

@@ -0,0 +1,210 @@
+import { diffRenderedRows } from '../mux/dual-pane-core.ts';
+import { cursorStyleEqual, cursorStyleToDecscusr } from '../mux/render-frame.ts';
+import { findAnsiIntegrityIssues } from '../mux/ansi-integrity.ts';
+
+export interface ScreenCursorStyle {
+  readonly shape: 'block' | 'underline' | 'bar';
+  readonly blinking: boolean;
+}
+
+interface ScreenLayout {
+  readonly paneRows: number;
+  readonly rightCols: number;
+  readonly rightStartCol: number;
+}
+
+interface ScreenRenderFrame {
+  readonly modes: {
+    readonly bracketedPaste: boolean;
+  };
+  readonly cursor: {
+    readonly style: ScreenCursorStyle;
+    readonly visible: boolean;
+    readonly row: number;
+    readonly col: number;
+  };
+  readonly viewport: {
+    readonly followOutput: boolean;
+  };
+}
+
+export interface ScreenFlushInput {
+  readonly layout: ScreenLayout;
+  readonly rows: readonly string[];
+  readonly rightFrame: ScreenRenderFrame | null;
+  readonly selectionRows: readonly number[];
+  readonly selectionOverlay: string;
+  readonly validateAnsi: boolean;
+}
+
+interface ScreenFlushResult {
+  readonly wroteOutput: boolean;
+  readonly changedRowCount: number;
+  readonly shouldShowCursor: boolean;
+}
+
+interface ScreenDependencies {
+  readonly writeOutput: (output: string) => void;
+  readonly writeError: (output: string) => void;
+  readonly findAnsiIssues: (rows: readonly string[]) => readonly string[];
+}
+
+const TERMINAL_SYNC_UPDATE_BEGIN = '\u001b[?2026h';
+const TERMINAL_SYNC_UPDATE_END = '\u001b[?2026l';
+
+function mergeUniqueRows(left: readonly number[], right: readonly number[]): readonly number[] {
+  if (left.length === 0) {
+    return right;
+  }
+  if (right.length === 0) {
+    return left;
+  }
+  const merged = new Set<number>();
+  for (const row of left) {
+    merged.add(row);
+  }
+  for (const row of right) {
+    merged.add(row);
+  }
+  return [...merged].sort((a, b) => a - b);
+}
+
+export class Screen {
+  private dirty = true;
+  private previousRows: readonly string[] = [];
+  private previousSelectionRows: readonly number[] = [];
+  private forceFullClear = true;
+  private renderedCursorVisible: boolean | null = null;
+  private renderedCursorStyle: ScreenCursorStyle | null = null;
+  private renderedBracketedPaste: boolean | null = null;
+  private ansiValidationReported = false;
+
+  private readonly deps: ScreenDependencies;
+
+  constructor(deps?: Partial<ScreenDependencies>) {
+    this.deps = {
+      writeOutput: deps?.writeOutput ?? ((output) => process.stdout.write(output)),
+      writeError: deps?.writeError ?? ((output) => process.stderr.write(output)),
+      findAnsiIssues: deps?.findAnsiIssues ?? findAnsiIntegrityIssues,
+    };
+  }
+
+  isDirty(): boolean {
+    return this.dirty;
+  }
+
+  markDirty(): void {
+    this.dirty = true;
+  }
+
+  clearDirty(): void {
+    this.dirty = false;
+  }
+
+  resetFrameCache(): void {
+    this.previousRows = [];
+    this.forceFullClear = true;
+  }
+
+  flush(input: ScreenFlushInput): ScreenFlushResult {
+    if (!this.dirty) {
+      return {
+        wroteOutput: false,
+        changedRowCount: 0,
+        shouldShowCursor: false,
+      };
+    }
+
+    if (input.validateAnsi) {
+      const issues = this.deps.findAnsiIssues(input.rows);
+      if (issues.length > 0 && !this.ansiValidationReported) {
+        this.ansiValidationReported = true;
+        this.deps.writeError(`[mux] ansi-integrity-failed ${issues.join(' | ')}\n`);
+      }
+    }
+
+    const diff = this.forceFullClear
+      ? diffRenderedRows(input.rows, [])
+      : diffRenderedRows(input.rows, this.previousRows);
+    const overlayResetRows = mergeUniqueRows(this.previousSelectionRows, input.selectionRows);
+
+    let output = '';
+    if (this.forceFullClear) {
+      output += '\u001b[?25l\u001b[H\u001b[2J';
+      this.forceFullClear = false;
+      this.renderedCursorVisible = false;
+      this.renderedCursorStyle = null;
+      this.renderedBracketedPaste = null;
+    }
+    output += diff.output;
+
+    if (overlayResetRows.length > 0) {
+      const changedRows = new Set<number>(diff.changedRows);
+      for (const row of overlayResetRows) {
+        if (row < 0 || row >= input.layout.paneRows || changedRows.has(row)) {
+          continue;
+        }
+        const rowContent = input.rows[row] ?? '';
+        output += `\u001b[${String(row + 1)};1H\u001b[2K${rowContent}`;
+      }
+    }
+
+    let shouldShowCursor = false;
+    if (input.rightFrame !== null) {
+      const shouldEnableBracketedPaste = input.rightFrame.modes.bracketedPaste;
+      if (this.renderedBracketedPaste !== shouldEnableBracketedPaste) {
+        output += shouldEnableBracketedPaste ? '\u001b[?2004h' : '\u001b[?2004l';
+        this.renderedBracketedPaste = shouldEnableBracketedPaste;
+      }
+
+      if (!cursorStyleEqual(this.renderedCursorStyle, input.rightFrame.cursor.style)) {
+        output += cursorStyleToDecscusr(input.rightFrame.cursor.style);
+        this.renderedCursorStyle = input.rightFrame.cursor.style;
+      }
+
+      output += input.selectionOverlay;
+
+      shouldShowCursor =
+        input.rightFrame.viewport.followOutput &&
+        input.rightFrame.cursor.visible &&
+        input.rightFrame.cursor.row >= 0 &&
+        input.rightFrame.cursor.row < input.layout.paneRows &&
+        input.rightFrame.cursor.col >= 0 &&
+        input.rightFrame.cursor.col < input.layout.rightCols;
+
+      if (shouldShowCursor) {
+        if (this.renderedCursorVisible !== true) {
+          output += '\u001b[?25h';
+          this.renderedCursorVisible = true;
+        }
+        output += `\u001b[${String(input.rightFrame.cursor.row + 1)};${String(input.layout.rightStartCol + input.rightFrame.cursor.col)}H`;
+      } else if (this.renderedCursorVisible !== false) {
+        output += '\u001b[?25l';
+        this.renderedCursorVisible = false;
+      }
+    } else {
+      if (this.renderedBracketedPaste !== false) {
+        output += '\u001b[?2004l';
+        this.renderedBracketedPaste = false;
+      }
+      if (this.renderedCursorVisible !== false) {
+        output += '\u001b[?25l';
+        this.renderedCursorVisible = false;
+      }
+    }
+
+    if (output.length > 0) {
+      this.deps.writeOutput(`${TERMINAL_SYNC_UPDATE_BEGIN}${output}${TERMINAL_SYNC_UPDATE_END}`);
+    }
+
+    this.previousRows = diff.nextRows;
+    this.previousSelectionRows = input.selectionRows;
+    this.dirty = false;
+
+    return {
+      wroteOutput: output.length > 0,
+      changedRowCount: diff.changedRows.length,
+      shouldShowCursor,
+    };
+  }
+}

package/src/ui/surface.ts

@@ -0,0 +1,224 @@
+import { measureDisplayWidth } from '../terminal/snapshot-oracle.ts';
+
+export type UiColor =
+  | { kind: 'default' }
+  | { kind: 'indexed'; index: number }
+  | { kind: 'rgb'; r: number; g: number; b: number };
+
+export interface UiStyle {
+  readonly fg: UiColor;
+  readonly bg: UiColor;
+  readonly bold: boolean;
+}
+
+interface UiCell {
+  glyph: string;
+  continued: boolean;
+  style: UiStyle;
+}
+
+export interface UiSurface {
+  readonly cols: number;
+  readonly rows: number;
+  readonly baseStyle: UiStyle;
+  readonly cells: UiCell[];
+}
+
+const DEFAULT_COLOR: UiColor = {
+  kind: 'default',
+};
+
+export const DEFAULT_UI_STYLE: UiStyle = {
+  fg: DEFAULT_COLOR,
+  bg: DEFAULT_COLOR,
+  bold: false,
+};
+
+function cloneColor(color: UiColor): UiColor {
+  if (color.kind === 'default') {
+    return DEFAULT_COLOR;
+  }
+  if (color.kind === 'indexed') {
+    return {
+      kind: 'indexed',
+      index: color.index,
+    };
+  }
+  return {
+    kind: 'rgb',
+    r: color.r,
+    g: color.g,
+    b: color.b,
+  };
+}
+
+function cloneStyle(style: UiStyle): UiStyle {
+  return {
+    fg: cloneColor(style.fg),
+    bg: cloneColor(style.bg),
+    bold: style.bold,
+  };
+}
+
+function styleEqual(left: UiStyle, right: UiStyle): boolean {
+  if (left.bold !== right.bold) {
+    return false;
+  }
+  if (left.fg.kind !== right.fg.kind || left.bg.kind !== right.bg.kind) {
+    return false;
+  }
+
+  if (left.fg.kind === 'indexed') {
+    if (left.fg.index !== (right.fg as Extract<UiColor, { kind: 'indexed' }>).index) {
+      return false;
+    }
+  } else if (left.fg.kind === 'rgb') {
+    const typedRight = right.fg as Extract<UiColor, { kind: 'rgb' }>;
+    if (left.fg.r !== typedRight.r || left.fg.g !== typedRight.g || left.fg.b !== typedRight.b) {
+      return false;
+    }
+  }
+
+  if (left.bg.kind === 'indexed') {
+    if (left.bg.index !== (right.bg as Extract<UiColor, { kind: 'indexed' }>).index) {
+      return false;
+    }
+  } else if (left.bg.kind === 'rgb') {
+    const typedRight = right.bg as Extract<UiColor, { kind: 'rgb' }>;
+    if (left.bg.r !== typedRight.r || left.bg.g !== typedRight.g || left.bg.b !== typedRight.b) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function createCell(style: UiStyle): UiCell {
+  return {
+    glyph: ' ',
+    continued: false,
+    style: cloneStyle(style),
+  };
+}
+
+function cellOffset(surface: UiSurface, col: number, row: number): number {
+  return row * surface.cols + col;
+}
+
+function colorSgrCodes(color: UiColor, target: 'fg' | 'bg'): readonly string[] {
+  const prefix = target === 'fg' ? '38' : '48';
+  if (color.kind === 'default') {
+    return [target === 'fg' ? '39' : '49'];
+  }
+  if (color.kind === 'indexed') {
+    return [prefix, '5', String(color.index)];
+  }
+  return [prefix, '2', String(color.r), String(color.g), String(color.b)];
+}
+
+function styleToSgr(style: UiStyle): string {
+  const codes: string[] = ['0'];
+  if (style.bold) {
+    codes.push('1');
+  }
+  codes.push(...colorSgrCodes(style.fg, 'fg'));
+  codes.push(...colorSgrCodes(style.bg, 'bg'));
+  return `\u001b[${codes.join(';')}m`;
+}
+
+export function createUiSurface(
+  cols: number,
+  rows: number,
+  baseStyle: UiStyle = DEFAULT_UI_STYLE,
+): UiSurface {
+  const safeCols = Math.max(1, cols);
+  const safeRows = Math.max(1, rows);
+  const typedBaseStyle = cloneStyle(baseStyle);
+  return {
+    cols: safeCols,
+    rows: safeRows,
+    baseStyle: typedBaseStyle,
+    cells: Array.from({ length: safeCols * safeRows }, () => createCell(typedBaseStyle)),
+  };
+}
+
+export function fillUiRow(surface: UiSurface, row: number, style: UiStyle): void {
+  if (row < 0 || row >= surface.rows) {
+    return;
+  }
+  const typedStyle = cloneStyle(style);
+  for (let col = 0; col < surface.cols; col += 1) {
+    const cell = surface.cells[cellOffset(surface, col, row)]!;
+    cell.glyph = ' ';
+    cell.continued = false;
+    cell.style = typedStyle;
+  }
+}
+
+export function drawUiText(
+  surface: UiSurface,
+  colStart: number,
+  row: number,
+  text: string,
+  style: UiStyle = surface.baseStyle,
+): void {
+  if (row < 0 || row >= surface.rows || colStart >= surface.cols) {
+    return;
+  }
+  let col = Math.max(0, colStart);
+  const typedStyle = cloneStyle(style);
+
+  for (const glyph of text) {
+    const width = Math.max(0, measureDisplayWidth(glyph));
+    if (width === 0) {
+      continue;
+    }
+    if (col >= surface.cols) {
+      break;
+    }
+
+    if (width === 1) {
+      const cell = surface.cells[cellOffset(surface, col, row)]!;
+      cell.glyph = glyph;
+      cell.continued = false;
+      cell.style = typedStyle;
+      col += 1;
+      continue;
+    }
+
+    if (col + width > surface.cols) {
+      break;
+    }
+
+    const first = surface.cells[cellOffset(surface, col, row)]!;
+    first.glyph = glyph;
+    first.continued = false;
+    first.style = typedStyle;
+    for (let offset = 1; offset < width && col + offset < surface.cols; offset += 1) {
+      const cell = surface.cells[cellOffset(surface, col + offset, row)]!;
+      cell.glyph = '';
+      cell.continued = true;
+      cell.style = typedStyle;
+    }
+    col += width;
+  }
+}
+
+export function renderUiSurfaceAnsiRows(surface: UiSurface): readonly string[] {
+  const rows: string[] = [];
+  for (let row = 0; row < surface.rows; row += 1) {
+    let output = '';
+    let lastStyle: UiStyle | null = null;
+    for (let col = 0; col < surface.cols; col += 1) {
+      const cell = surface.cells[cellOffset(surface, col, row)]!;
+      if (lastStyle === null || !styleEqual(lastStyle, cell.style)) {
+        output += styleToSgr(cell.style);
+        lastStyle = cell.style;
+      }
+      output += cell.continued ? '' : cell.glyph.length > 0 ? cell.glyph : ' ';
+    }
+    output += '\u001b[0m';
+    rows.push(output);
+  }
+  return rows;
+}