@jmoyers/harness 0.1.11 → 0.1.20

package/packages/harness-ui/src/layout.ts

@@ -0,0 +1,238 @@
+const MIN_LEFT_PANE_COLS = 28;
+const MIN_RIGHT_PANE_COLS = 20;
+const DEFAULT_LEFT_PANE_WIDTH_PERCENT = 30;
+const MIN_PANE_WIDTH_PERCENT = 1;
+const MAX_PANE_WIDTH_PERCENT = 99;
+const DEFAULT_BASE_LAYER_Z_INDEX = 0;
+const DEFAULT_OVERLAY_LAYER_Z_INDEX = 100;
+
+export interface UiLayoutRect {
+  readonly col: number;
+  readonly row: number;
+  readonly cols: number;
+  readonly rows: number;
+}
+
+export type UiLayoutAnchor = 'viewport' | 'left-pane' | 'right-pane' | 'status';
+
+export interface UiLayoutOverlay {
+  readonly id: string;
+  readonly col: number;
+  readonly row: number;
+  readonly cols: number;
+  readonly rows: number;
+  readonly anchor?: UiLayoutAnchor;
+  readonly zIndex?: number;
+  readonly clipToViewport?: boolean;
+}
+
+export interface ComputeUiLayoutOptions {
+  readonly leftCols?: number;
+  readonly paneWidthPercent?: number;
+  readonly statusRows?: number;
+  readonly overlays?: readonly UiLayoutOverlay[];
+}
+
+export interface UiLayoutLayer {
+  readonly id: string;
+  readonly kind: 'left-pane' | 'separator' | 'right-pane' | 'status' | 'overlay';
+  readonly zIndex: number;
+  readonly rect: UiLayoutRect;
+}
+
+export interface UiDualPaneLayout {
+  readonly cols: number;
+  readonly rows: number;
+  readonly paneRows: number;
+  readonly statusRow: number;
+  readonly leftCols: number;
+  readonly rightCols: number;
+  readonly separatorCol: number;
+  readonly rightStartCol: number;
+  readonly viewport: UiLayoutRect;
+  readonly leftPane: UiLayoutRect;
+  readonly separator: UiLayoutRect;
+  readonly rightPane: UiLayoutRect;
+  readonly status: UiLayoutRect;
+  readonly layers: readonly UiLayoutLayer[];
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+function normalizeInt(value: number, minimum: number): number {
+  if (!Number.isFinite(value)) {
+    return minimum;
+  }
+  return Math.max(minimum, Math.floor(value));
+}
+
+function normalizePaneWidthPercent(value: number): number {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_LEFT_PANE_WIDTH_PERCENT;
+  }
+  return clamp(value, MIN_PANE_WIDTH_PERCENT, MAX_PANE_WIDTH_PERCENT);
+}
+
+function resolveLeftPaneCols(
+  normalizedCols: number,
+  requestedLeftCols: number | undefined,
+  paneWidthPercent: number | undefined,
+): number {
+  const availablePaneCols = normalizedCols - 1;
+  const percent = normalizePaneWidthPercent(paneWidthPercent ?? DEFAULT_LEFT_PANE_WIDTH_PERCENT);
+  const defaultLeftCols = Math.round((availablePaneCols * percent) / 100);
+  const requested =
+    requestedLeftCols === undefined ? defaultLeftCols : Math.floor(requestedLeftCols);
+
+  let leftCols = clamp(requested, 1, availablePaneCols - 1);
+  if (normalizedCols >= MIN_LEFT_PANE_COLS + MIN_RIGHT_PANE_COLS + 1) {
+    leftCols = Math.max(MIN_LEFT_PANE_COLS, leftCols);
+    const maxLeft = availablePaneCols - MIN_RIGHT_PANE_COLS;
+    leftCols = Math.min(leftCols, maxLeft);
+  }
+  return leftCols;
+}
+
+function rect(col: number, row: number, cols: number, rows: number): UiLayoutRect {
+  return {
+    col,
+    row,
+    cols: Math.max(1, cols),
+    rows: Math.max(1, rows),
+  };
+}
+
+function anchorRect(
+  layout: Omit<UiDualPaneLayout, 'layers'>,
+  anchor: UiLayoutAnchor,
+): UiLayoutRect {
+  if (anchor === 'left-pane') {
+    return layout.leftPane;
+  }
+  if (anchor === 'right-pane') {
+    return layout.rightPane;
+  }
+  if (anchor === 'status') {
+    return layout.status;
+  }
+  return layout.viewport;
+}
+
+function intersectRect(left: UiLayoutRect, right: UiLayoutRect): UiLayoutRect | null {
+  const startCol = Math.max(left.col, right.col);
+  const startRow = Math.max(left.row, right.row);
+  const endCol = Math.min(left.col + left.cols - 1, right.col + right.cols - 1);
+  const endRow = Math.min(left.row + left.rows - 1, right.row + right.rows - 1);
+  if (endCol < startCol || endRow < startRow) {
+    return null;
+  }
+  return rect(startCol, startRow, endCol - startCol + 1, endRow - startRow + 1);
+}
+
+export function computeDualPaneLayoutWithLayers(
+  cols: number,
+  rows: number,
+  options: ComputeUiLayoutOptions = {},
+): UiDualPaneLayout {
+  const normalizedCols = normalizeInt(cols, 3);
+  const normalizedRows = normalizeInt(rows, 2);
+  const requestedStatusRows = normalizeInt(options.statusRows ?? 1, 1);
+  const statusRows = Math.min(requestedStatusRows, normalizedRows - 1);
+  const paneRows = normalizedRows - statusRows;
+  const statusRow = paneRows + 1;
+
+  const availablePaneCols = normalizedCols - 1;
+  const leftCols = resolveLeftPaneCols(normalizedCols, options.leftCols, options.paneWidthPercent);
+  const rightCols = availablePaneCols - leftCols;
+  const separatorCol = leftCols + 1;
+  const rightStartCol = leftCols + 2;
+
+  const layoutBase = {
+    cols: normalizedCols,
+    rows: normalizedRows,
+    paneRows,
+    statusRow,
+    leftCols,
+    rightCols,
+    separatorCol,
+    rightStartCol,
+    viewport: rect(1, 1, normalizedCols, normalizedRows),
+    leftPane: rect(1, 1, leftCols, paneRows),
+    separator: rect(separatorCol, 1, 1, paneRows),
+    rightPane: rect(rightStartCol, 1, rightCols, paneRows),
+    status: rect(1, statusRow, normalizedCols, statusRows),
+  } satisfies Omit<UiDualPaneLayout, 'layers'>;
+
+  const layers: UiLayoutLayer[] = [
+    {
+      id: 'left-pane',
+      kind: 'left-pane',
+      zIndex: DEFAULT_BASE_LAYER_Z_INDEX,
+      rect: layoutBase.leftPane,
+    },
+    {
+      id: 'separator',
+      kind: 'separator',
+      zIndex: DEFAULT_BASE_LAYER_Z_INDEX,
+      rect: layoutBase.separator,
+    },
+    {
+      id: 'right-pane',
+      kind: 'right-pane',
+      zIndex: DEFAULT_BASE_LAYER_Z_INDEX,
+      rect: layoutBase.rightPane,
+    },
+    {
+      id: 'status',
+      kind: 'status',
+      zIndex: DEFAULT_BASE_LAYER_Z_INDEX,
+      rect: layoutBase.status,
+    },
+  ];
+
+  for (const overlay of options.overlays ?? []) {
+    if (overlay.id.trim().length === 0) {
+      continue;
+    }
+    const overlayAnchor = anchorRect(layoutBase, overlay.anchor ?? 'viewport');
+    const absoluteRect = rect(
+      overlayAnchor.col + overlay.col - 1,
+      overlayAnchor.row + overlay.row - 1,
+      overlay.cols,
+      overlay.rows,
+    );
+    const resolvedRect =
+      overlay.clipToViewport === false
+        ? absoluteRect
+        : intersectRect(absoluteRect, layoutBase.viewport);
+    if (resolvedRect === null) {
+      continue;
+    }
+    layers.push({
+      id: overlay.id,
+      kind: 'overlay',
+      zIndex: overlay.zIndex ?? DEFAULT_OVERLAY_LAYER_Z_INDEX,
+      rect: resolvedRect,
+    });
+  }
+
+  const sortedLayers = layers.toSorted((left, right) => {
+    if (left.zIndex !== right.zIndex) {
+      return left.zIndex - right.zIndex;
+    }
+    return left.id.localeCompare(right.id);
+  });
+
+  return {
+    ...layoutBase,
+    layers: sortedLayers,
+  };
+}

package/packages/harness-ui/src/modal-manager.ts

@@ -0,0 +1,222 @@
+import type { UiModalOverlay, UiModalTheme } from './kit.ts';
+import type {
+  ApiKeyPromptState,
+  CommandMenuActionDescriptor,
+  CommandMenuState,
+  ConversationTitleEditState,
+  NewThreadPromptState,
+  RepositoryPromptState,
+  TaskEditorPromptState,
+} from './interaction/input.ts';
+
+type AddDirectoryPromptState = { value: string; error: string | null };
+type ModalOverlay = UiModalOverlay;
+type ModalTheme = Partial<UiModalTheme>;
+
+interface ModalManagerOptions {
+  readonly theme: ModalTheme;
+  readonly resolveRepositoryName: (repositoryId: string) => string | null;
+  readonly getCommandMenu: () => CommandMenuState | null;
+  readonly resolveCommandMenuActions: () => readonly CommandMenuActionDescriptor[];
+  readonly getNewThreadPrompt: () => NewThreadPromptState | null;
+  readonly getAddDirectoryPrompt: () => AddDirectoryPromptState | null;
+  readonly getApiKeyPrompt?: () => ApiKeyPromptState | null;
+  readonly getTaskEditorPrompt: () => TaskEditorPromptState | null;
+  readonly getRepositoryPrompt: () => RepositoryPromptState | null;
+  readonly getConversationTitleEdit: () => ConversationTitleEditState | null;
+}
+
+export interface ModalDismissOnOutsideClickInput {
+  readonly input: Buffer;
+  readonly inputRemainder: string;
+  readonly dismiss: () => void;
+  readonly buildCurrentModalOverlay: () => ModalOverlay | null;
+  readonly onInsidePointerPress?: (col: number, row: number) => boolean;
+  readonly isOverlayHit: (overlay: ModalOverlay, col: number, row: number) => boolean;
+}
+
+export interface ModalDismissOnOutsideClickResult {
+  readonly handled: boolean;
+  readonly inputRemainder: string;
+}
+
+export interface ModalManagerStrategies {
+  buildCommandMenuModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    menu: CommandMenuState | null,
+    actions: readonly CommandMenuActionDescriptor[],
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildNewThreadModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    prompt: NewThreadPromptState | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildAddDirectoryModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    prompt: AddDirectoryPromptState | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildTaskEditorModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    prompt: TaskEditorPromptState | null,
+    resolveRepositoryName: (repositoryId: string) => string | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildApiKeyModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    prompt: ApiKeyPromptState | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildRepositoryModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    prompt: RepositoryPromptState | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  buildConversationTitleModalOverlay(
+    layoutCols: number,
+    viewportRows: number,
+    edit: ConversationTitleEditState | null,
+    theme: ModalTheme,
+  ): ModalOverlay | null;
+  dismissModalOnOutsideClick(
+    input: ModalDismissOnOutsideClickInput,
+  ): ModalDismissOnOutsideClickResult;
+  isOverlayHit(overlay: ModalOverlay, col: number, row: number): boolean;
+}
+
+interface ModalDismissInput {
+  readonly input: Buffer;
+  readonly inputRemainder: string;
+  readonly layoutCols: number;
+  readonly viewportRows: number;
+  readonly dismiss: () => void;
+  readonly onInsidePointerPress?: (col: number, row: number) => boolean;
+}
+
+interface ModalDismissResult {
+  readonly handled: boolean;
+  readonly inputRemainder: string;
+}
+
+export class ModalManager {
+  constructor(
+    private readonly options: ModalManagerOptions,
+    private readonly strategies: ModalManagerStrategies,
+  ) {}
+
+  buildCommandMenuOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildCommandMenuModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getCommandMenu(),
+      this.options.resolveCommandMenuActions(),
+      this.options.theme,
+    );
+  }
+
+  buildNewThreadOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildNewThreadModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getNewThreadPrompt(),
+      this.options.theme,
+    );
+  }
+
+  buildAddDirectoryOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildAddDirectoryModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getAddDirectoryPrompt(),
+      this.options.theme,
+    );
+  }
+
+  buildTaskEditorOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildTaskEditorModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getTaskEditorPrompt(),
+      this.options.resolveRepositoryName,
+      this.options.theme,
+    );
+  }
+
+  buildApiKeyOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildApiKeyModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getApiKeyPrompt?.() ?? null,
+      this.options.theme,
+    );
+  }
+
+  buildRepositoryOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildRepositoryModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getRepositoryPrompt(),
+      this.options.theme,
+    );
+  }
+
+  buildConversationTitleOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    return this.strategies.buildConversationTitleModalOverlay(
+      layoutCols,
+      viewportRows,
+      this.options.getConversationTitleEdit(),
+      this.options.theme,
+    );
+  }
+
+  buildCurrentOverlay(layoutCols: number, viewportRows: number): ModalOverlay | null {
+    const commandMenuOverlay = this.buildCommandMenuOverlay(layoutCols, viewportRows);
+    if (commandMenuOverlay !== null) {
+      return commandMenuOverlay;
+    }
+    const newThreadOverlay = this.buildNewThreadOverlay(layoutCols, viewportRows);
+    if (newThreadOverlay !== null) {
+      return newThreadOverlay;
+    }
+    const addDirectoryOverlay = this.buildAddDirectoryOverlay(layoutCols, viewportRows);
+    if (addDirectoryOverlay !== null) {
+      return addDirectoryOverlay;
+    }
+    const taskEditorOverlay = this.buildTaskEditorOverlay(layoutCols, viewportRows);
+    if (taskEditorOverlay !== null) {
+      return taskEditorOverlay;
+    }
+    const apiKeyOverlay = this.buildApiKeyOverlay(layoutCols, viewportRows);
+    if (apiKeyOverlay !== null) {
+      return apiKeyOverlay;
+    }
+    const repositoryOverlay = this.buildRepositoryOverlay(layoutCols, viewportRows);
+    if (repositoryOverlay !== null) {
+      return repositoryOverlay;
+    }
+    return this.buildConversationTitleOverlay(layoutCols, viewportRows);
+  }
+
+  dismissOnOutsideClick(input: ModalDismissInput): ModalDismissResult {
+    return this.strategies.dismissModalOnOutsideClick({
+      input: input.input,
+      inputRemainder: input.inputRemainder,
+      dismiss: input.dismiss,
+      buildCurrentModalOverlay: () =>
+        this.buildCurrentOverlay(input.layoutCols, input.viewportRows),
+      isOverlayHit: this.strategies.isOverlayHit,
+      ...(input.onInsidePointerPress === undefined
+        ? {}
+        : {
+            onInsidePointerPress: input.onInsidePointerPress,
+          }),
+    });
+  }
+}

package/{src/ui → packages/harness-ui/src}/screen.ts

@@ -1,11 +1,12 @@
-import { diffRenderedRows } from '../mux/dual-pane-core.ts';
-import { cursorStyleEqual, cursorStyleToDecscusr } from '../mux/render-frame.ts';
-import { findAnsiIntegrityIssues } from '../mux/ansi-integrity.ts';
+import {
+  cursorStyleEqual,
+  cursorStyleToDecscusr,
+  diffRenderedRows,
+  findAnsiIntegrityIssues,
+  type RenderCursorStyle,
+} from './frame-primitives.ts';
 
-export interface ScreenCursorStyle {
-  readonly shape: 'block' | 'underline' | 'bar';
-  readonly blinking: boolean;
-}
+export type ScreenCursorStyle = RenderCursorStyle;
 
 interface ScreenLayout {
   readonly paneRows: number;
@@ -43,10 +44,33 @@ interface ScreenFlushResult {
   readonly shouldShowCursor: boolean;
 }
 
-interface ScreenDependencies {
-  readonly writeOutput: (output: string) => void;
-  readonly writeError: (output: string) => void;
-  readonly findAnsiIssues: (rows: readonly string[]) => readonly string[];
+export interface ScreenWriter {
+  writeOutput(output: string): void;
+  writeError(output: string): void;
+}
+
+export class ProcessScreenWriter implements ScreenWriter {
+  constructor() {}
+
+  writeOutput(output: string): void {
+    process.stdout.write(output);
+  }
+
+  writeError(output: string): void {
+    process.stderr.write(output);
+  }
+}
+
+export interface ScreenAnsiValidator {
+  findIssues(rows: readonly string[]): readonly string[];
+}
+
+export class DefaultScreenAnsiValidator implements ScreenAnsiValidator {
+  constructor() {}
+
+  findIssues(rows: readonly string[]): readonly string[] {
+    return findAnsiIntegrityIssues(rows);
+  }
 }
 
 const TERMINAL_SYNC_UPDATE_BEGIN = '\u001b[?2026h';
@@ -66,7 +90,17 @@ function mergeUniqueRows(left: readonly number[], right: readonly number[]): rea
   for (const row of right) {
     merged.add(row);
   }
-  return [...merged].sort((a, b) => a - b);
+  const output = [...merged];
+  for (let index = 1; index < output.length; index += 1) {
+    const value = output[index]!;
+    let insertIndex = index - 1;
+    while (insertIndex >= 0 && output[insertIndex]! > value) {
+      output[insertIndex + 1] = output[insertIndex]!;
+      insertIndex -= 1;
+    }
+    output[insertIndex + 1] = value;
+  }
+  return output;
 }
 
 export class Screen {
@@ -79,15 +113,10 @@ export class Screen {
   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,
-    };
-  }
+  constructor(
+    private readonly writer: ScreenWriter = new ProcessScreenWriter(),
+    private readonly ansiValidator: ScreenAnsiValidator = new DefaultScreenAnsiValidator(),
+  ) {}
 
   isDirty(): boolean {
     return this.dirty;
@@ -116,10 +145,10 @@ export class Screen {
     }
 
     if (input.validateAnsi) {
-      const issues = this.deps.findAnsiIssues(input.rows);
+      const issues = this.ansiValidator.findIssues(input.rows);
       if (issues.length > 0 && !this.ansiValidationReported) {
         this.ansiValidationReported = true;
-        this.deps.writeError(`[mux] ansi-integrity-failed ${issues.join(' | ')}\n`);
+        this.writer.writeError(`[mux] ansi-integrity-failed ${issues.join(' | ')}\n`);
       }
     }
 
@@ -163,7 +192,6 @@ export class Screen {
       }
 
       output += input.selectionOverlay;
-
       shouldShowCursor =
         input.rightFrame.viewport.followOutput &&
         input.rightFrame.cursor.visible &&
@@ -194,13 +222,12 @@ export class Screen {
     }
 
     if (output.length > 0) {
-      this.deps.writeOutput(`${TERMINAL_SYNC_UPDATE_BEGIN}${output}${TERMINAL_SYNC_UPDATE_END}`);
+      this.writer.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,