@fitchmultz/pi-subagents 0.44.7 → 0.46.0

package/src/tui/conversation-selection.ts

@@ -0,0 +1,66 @@
+import type { ScrollView, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import type { AgentHistoryItem } from "./agent-history.ts";
+import type { HistoryCards } from "./history-cards.ts";
+/** Conversation selection and per-card expansion are independent of draft/control state. */
+export class ConversationSelection {
+  id?: string;
+  toolsExpanded = false;
+  readonly toolExpansion = new Map<string, boolean>();
+  private readonly cards: HistoryCards;
+  private readonly scroll: ScrollView;
+  constructor(cards: HistoryCards, scroll: ScrollView) {
+    this.cards = cards;
+    this.scroll = scroll;
+  }
+  selected(detail?: AgentHistoryItem): AgentHistoryItem | undefined {
+    return (
+      detail ??
+      this.cards.contentItems.find((item) => item.id === this.id) ??
+      this.cards.contentItems.findLast((item) => item.kind === "assistant")
+    );
+  }
+  mouse(event: Readonly<TuiMouseEvent>, detail: boolean): TuiMouseEventResult | undefined {
+    if (event.type !== "click" || event.button !== "left") {
+      return;
+    }
+    const row = this.cards.lines.find(
+      (candidate) =>
+        candidate.start <= event.y + this.scroll.scrollTop &&
+        candidate.end > event.y + this.scroll.scrollTop,
+    );
+    if (!row) {
+      return;
+    }
+    this.id = row.id;
+    const item = this.selected();
+    if ((item?.call || item?.result) && !detail) {
+      this.toolExpansion.set(row.id, !(this.toolExpansion.get(row.id) ?? this.toolsExpanded));
+    } else {
+      this.cards.dispatch(row.id, {
+        ...event,
+        y: event.y + this.scroll.scrollTop - row.contentStart,
+        height: row.end - row.contentStart,
+      });
+    }
+    return { handled: true, focus: true };
+  }
+  select(delta: number, height: number): boolean {
+    const current = this.cards.lines.findIndex((row) => row.id === this.id);
+    const visible =
+      current < 0 ? this.cards.lines.findIndex((row) => row.end > this.scroll.scrollTop) : current;
+    const index = Math.max(0, Math.min(this.cards.lines.length - 1, visible + delta));
+    const row = this.cards.lines.at(index);
+    if (!row) {
+      return false;
+    }
+    this.id = row.id;
+    if (row.start < this.scroll.scrollTop || row.start >= this.scroll.scrollTop + height) {
+      this.scroll.scrollTo(row.start, { disableFollow: true });
+    }
+    return true;
+  }
+  expand(): void {
+    this.toolsExpanded = !this.toolsExpanded;
+    this.toolExpansion.clear();
+  }
+}

package/src/tui/conversation-viewport.ts

@@ -0,0 +1,169 @@
+import {
+  ScrollView,
+  type TUI,
+  type Component,
+  type TuiMouseEvent,
+  type TuiMouseEventResult,
+} from "@earendil-works/pi-tui";
+import type { ReadonlyInput } from "../shared/types.ts";
+import type { AgentTask, AgentVisit, Anchor } from "./view-model.ts";
+import type { HistoryCards } from "./history-cards.ts";
+interface ViewportSource {
+  readonly task: () => AgentTask | undefined;
+  readonly visit: () => AgentVisit;
+  readonly loading: () => boolean;
+  readonly detail: () => boolean;
+  readonly initialVisit: ReadonlyInput<Pick<AgentVisit, "anchor" | "readThrough">>;
+  readonly content: Component;
+}
+function firstUnread(
+  ids: readonly string[],
+  readThrough: string | null | undefined,
+): string | undefined {
+  if (readThrough === null) {
+    return ids.at(0);
+  }
+  if (readThrough === undefined) {
+    return;
+  }
+  const index = ids.indexOf(readThrough);
+  return index >= 0 ? ids.at(index + 1) : undefined;
+}
+export class ConversationViewport implements Component {
+  readonly scroll: ScrollView;
+  initialPosition = true;
+  restoreAnchor?: Anchor;
+  readSequence = -1;
+  height = 1;
+  private lastWidth?: number;
+  private readonly tui: TUI;
+  private readonly cards: HistoryCards;
+  private readonly source: ViewportSource;
+  private readonly mouse: (event: Readonly<TuiMouseEvent>) => TuiMouseEventResult | undefined;
+  constructor(
+    tui: TUI,
+    cards: HistoryCards,
+    source: ViewportSource,
+    mouse: (event: Readonly<TuiMouseEvent>) => TuiMouseEventResult | undefined,
+  ) {
+    this.tui = tui;
+    this.cards = cards;
+    this.source = source;
+    this.mouse = mouse;
+    this.scroll = new ScrollView(source.content, { follow: "end", scrollbar: "hidden" });
+  }
+  invalidate(): void {
+    this.scroll.invalidate();
+  }
+  handleMouse(event: Readonly<TuiMouseEvent>): TuiMouseEventResult | undefined {
+    return this.mouse(event);
+  }
+  anchor(): Anchor | undefined {
+    const row = this.cards.lines.findLast((candidate) => candidate.start <= this.scroll.scrollTop);
+    return row ? { id: row.id, line: this.scroll.scrollTop - row.start } : undefined;
+  }
+  private initialize(): void {
+    const task = this.source.task();
+    if (!this.initialPosition || this.source.loading() || !task) {
+      return;
+    }
+    if (!task.page && task.child.identityUnavailable !== true) {
+      return;
+    }
+    this.initialPosition = false;
+    const initial = this.source.initialVisit;
+    const unread = firstUnread(task.historyIds, initial.readThrough);
+    this.restoreAnchor = unread !== undefined ? { id: unread, line: 0 } : initial.anchor;
+    this.restoreFinal(task);
+  }
+  private restoreFinal(task: Readonly<AgentTask>): void {
+    if (!this.restoreAnchor && task.finalId !== undefined) {
+      this.restoreAnchor = { id: task.finalId, line: 0 };
+      // The finished report is the starting point; earlier activity stays available above it.
+      const finalIndex = task.historyIds.indexOf(task.finalId);
+      this.source.visit().readThrough ??=
+        finalIndex > 0 ? (task.historyIds.at(finalIndex - 1) ?? null) : null;
+    }
+  }
+  private restore(): void {
+    const anchor = this.restoreAnchor;
+    if (!anchor) {
+      return;
+    }
+    const row = this.cards.lines.find((candidate) => candidate.entryIds.includes(anchor.id));
+    if (row) {
+      this.scroll.scrollTo(
+        row.start + Math.min(anchor.line, Math.max(0, row.end - row.start - 1)),
+        { disableFollow: true },
+      );
+    }
+    this.restoreAnchor = undefined;
+  }
+  private visibleRead(
+    task: Readonly<AgentTask>,
+  ): { id: string; index: number; sequence: number } | undefined {
+    const seen = new Set(
+      this.cards.lines
+        .filter(
+          (row) =>
+            row.end > this.scroll.scrollTop && row.end <= this.scroll.scrollTop + this.height,
+        )
+        .flatMap((row) => row.entryIds),
+    );
+    const index = task.historyIds.findLastIndex((id) => seen.has(id));
+    const entry = task.historyIds.at(index);
+    if (index < 0 || entry === undefined) {
+      return;
+    }
+    const id = entry.startsWith("result:") ? (task.page?.latestEntryId ?? entry) : entry;
+    const nativeId = id.replace(/:(?:\d+|error)$/, "");
+    const sequence = task.page?.entries.find((record) => record.id === nativeId)?.sequence;
+    return sequence === undefined ? undefined : { id, index, sequence };
+  }
+  private advanceRead(task: Readonly<AgentTask> | undefined): void {
+    if (!task) {
+      return;
+    }
+    const visit = this.source.visit(),
+      read = this.visibleRead(task);
+    const priorIndex =
+      typeof visit.readThrough === "string" ? task.historyIds.indexOf(visit.readThrough) : -1;
+    if (
+      read &&
+      (read.sequence > this.readSequence ||
+        (read.sequence === this.readSequence && read.index > priorIndex))
+    ) {
+      visit.readThrough = read.id;
+      this.readSequence = read.sequence;
+    }
+  }
+  private recordRead(): void {
+    if (this.source.detail() || this.source.loading() || this.initialPosition) {
+      return;
+    }
+    const task = this.source.task(),
+      visit = this.source.visit();
+    visit.anchor = this.scroll.isFollowingEnd ? undefined : this.anchor();
+    this.advanceRead(task);
+    visit.readThrough ??= null;
+    if (this.scroll.isFollowingEnd) {
+      visit.seenActivityAt = task?.child.activity?.lastActivityAt ?? Date.now();
+    }
+  }
+  render(width: number): string[] {
+    if (this.lastWidth !== width && !this.scroll.isFollowingEnd) {
+      this.restoreAnchor ??= this.anchor();
+    }
+    this.lastWidth = width;
+    const lines = this.scroll.render(width);
+    this.scroll.updateLayout(lines.length, this.height, () => this.tui.requestRender());
+    this.initialize();
+    this.restore();
+    const visible = lines.slice(this.scroll.scrollTop, this.scroll.scrollTop + this.height);
+    while (visible.length < this.height) {
+      visible.push("");
+    }
+    this.recordRead();
+    return visible;
+  }
+}

package/src/tui/direction-message.ts

@@ -0,0 +1,35 @@
+import { keyText, type MessageRenderer } from "@earendil-works/pi-coding-agent";
+import { Text } from "@earendil-works/pi-tui";
+import { withMouseExpansion } from "./action-hints.ts";
+import { short, type Quote } from "./view-model.ts";
+import { hasText } from "./text-values.ts";
+export interface DirectionDetails {
+  readonly label: string;
+  readonly text: string;
+  readonly quote?: Readonly<Quote>;
+}
+export function directionRenderer(): MessageRenderer<DirectionDetails> {
+  return withMouseExpansion<DirectionDetails>((message, options, theme) => {
+    const details = message.details;
+    if (!details) {
+      return;
+    }
+    return {
+      render(width) {
+        const key = keyText("app.tools.expand");
+        const quote = details.quote
+          ? `\n\nReplying to ${details.quote.title}:\n${details.quote.text}`
+          : "";
+        const expanded = `User → ${details.label}\n${details.text}${quote}`;
+        const compact = theme.fg(
+          "dim",
+          `User → ${details.label}: ${short(details.text, 100)} · sent directly${hasText(key) ? ` · ${key}` : ""}`,
+        );
+        return new Text(options.expanded ? expanded : compact, 0, 0).render(width);
+      },
+      invalidate() {
+        /* The message renderer creates themed text on every render. */
+      },
+    };
+  });
+}

package/src/tui/display.ts

@@ -0,0 +1,409 @@
+import { hasText, nonemptyText } from "./text-values.ts";
+import type { ReadonlyInput, AgentProgress, Details } from "../shared/types.ts";
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import {
+  formatTokens,
+  formatDuration,
+  formatModelThinking,
+  formatToolCall,
+} from "../shared/formatters.ts";
+import { getDisplayItems } from "../shared/utils.ts";
+import { formatActivityLabel } from "../shared/status-format.ts";
+import { acceptanceHumanAction } from "../runs/shared/acceptance.ts";
+
+export type Theme = ExtensionContext["ui"]["theme"];
+
+export function getTermWidth(): number {
+  return process.stdout.columns > 0 ? process.stdout.columns : 120;
+}
+
+const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+// Recognize terminal SGR control sequences so truncation retains active styling.
+// oxlint-disable-next-line no-control-regex
+const sgr = /^\u001b\[[0-9;]*m/;
+
+/**
+ * Truncate a line to maxWidth, preserving ANSI styling through the ellipsis.
+ *
+ * pi-tui's truncateToWidth adds \x1b[0m before ellipsis which resets all styling,
+ * causing background color bleed in the TUI. This implementation tracks active
+ * ANSI styles and re-applies them before the ellipsis.
+ *
+ * Uses Intl.Segmenter for proper Unicode/emoji handling (not char-by-char).
+ */
+export function truncLine(text: string, maxWidth: number): string {
+  if (visibleWidth(text) <= maxWidth) {
+    return text;
+  }
+
+  const targetWidth = maxWidth - 1;
+  let result = "";
+  let currentWidth = 0;
+  let activeStyles: string[] = [];
+  let i = 0;
+
+  while (i < text.length) {
+    const ansiMatch = text.slice(i).match(sgr);
+    if (ansiMatch) {
+      const code = ansiMatch[0];
+      result += code;
+
+      if (code === "\x1b[0m" || code === "\x1b[m") {
+        activeStyles = [];
+      } else {
+        activeStyles.push(code);
+      }
+      i += code.length;
+      continue;
+    }
+
+    let end = i;
+    while (end < text.length && !sgr.test(text.slice(end))) {
+      end++;
+    }
+
+    const textPortion = text.slice(i, end);
+    for (const seg of segmenter.segment(textPortion)) {
+      const grapheme = seg.segment;
+      const graphemeWidth = visibleWidth(grapheme);
+
+      if (currentWidth + graphemeWidth > targetWidth) {
+        return result + activeStyles.join("") + "…";
+      }
+
+      result += grapheme;
+      currentWidth += graphemeWidth;
+    }
+    i = end;
+  }
+
+  return result + activeStyles.join("") + "…";
+}
+
+const RUNNING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+const STATIC_RUNNING_GLYPH = "●";
+
+type ProgressSeedSource = Partial<
+  Pick<
+    AgentProgress,
+    | "index"
+    | "toolCount"
+    | "tokens"
+    | "durationMs"
+    | "lastActivityAt"
+    | "currentToolStartedAt"
+    | "turnCount"
+  >
+>;
+
+export function runningSeed(...values: ReadonlyArray<number | undefined>): number | undefined {
+  let seed: number | undefined;
+  for (const value of values) {
+    if (value === undefined || !Number.isFinite(value)) {
+      continue;
+    }
+    seed = (seed ?? 0) + Math.trunc(value);
+  }
+  return seed;
+}
+
+export function runningGlyph(seed?: number): string {
+  if (seed === undefined) {
+    return STATIC_RUNNING_GLYPH;
+  }
+  return RUNNING_FRAMES[Math.abs(seed) % RUNNING_FRAMES.length] ?? STATIC_RUNNING_GLYPH;
+}
+
+export function progressRunningSeed(
+  progress: ReadonlyInput<ProgressSeedSource | undefined>,
+): number | undefined {
+  if (!progress) {
+    return undefined;
+  }
+  return runningSeed(
+    progress.index,
+    progress.toolCount,
+    progress.tokens,
+    progress.durationMs,
+    progress.lastActivityAt,
+    progress.currentToolStartedAt,
+    progress.turnCount,
+  );
+}
+
+export function extractOutputTarget(task: string): string | undefined {
+  const writeToMatch = task.match(/\[Write to:\s*([^\]\n]+)\]/i);
+  if (hasText(writeToMatch?.[1]?.trim())) {
+    return writeToMatch[1].trim();
+  }
+  const findingsMatch = task.match(/Write your findings to:\s*(\S+)/i);
+  if (hasText(findingsMatch?.[1]?.trim())) {
+    return findingsMatch[1].trim();
+  }
+  const outputMatch = task.match(/[Oo]utput(?:\s+to)?\s*:\s*(\S+)/i);
+  if (hasText(outputMatch?.[1]?.trim())) {
+    return outputMatch[1].trim();
+  }
+  return undefined;
+}
+
+export function hasEmptyTextOutputWithoutOutputTarget(task: string, output: string): boolean {
+  if (hasText(output.trim())) {
+    return false;
+  }
+  return !hasText(extractOutputTarget(task));
+}
+
+export function getToolCallLines(
+  result: ReadonlyInput<Pick<Details["results"][number], "messages" | "toolCalls">>,
+  expanded: boolean,
+): string[] {
+  if (result.messages) {
+    return getDisplayItems(result.messages)
+      .filter(
+        (item): item is { type: "tool"; name: string; args: Record<string, unknown> } =>
+          item.type === "tool",
+      )
+      .map((item) => formatToolCall(item.name, item.args, expanded));
+  }
+  return (
+    result.toolCalls?.map((toolCall) => (expanded ? toolCall.expandedText : toolCall.text)) ?? []
+  );
+}
+
+export function snapshotNowForProgress(
+  progress: ReadonlyInput<
+    Pick<AgentProgress, "currentToolStartedAt" | "durationMs" | "lastActivityAt">
+  >,
+): number | undefined {
+  if (progress.currentToolStartedAt !== undefined) {
+    return progress.currentToolStartedAt + progress.durationMs;
+  }
+  return progress.lastActivityAt;
+}
+
+export function formatCurrentToolLine(
+  progress: ReadonlyInput<
+    Pick<AgentProgress, "currentTool" | "currentToolArgs" | "currentToolStartedAt">
+  >,
+  availableWidth: number,
+  expanded: boolean,
+  snapshotNow?: number,
+): string | undefined {
+  if (!hasText(progress.currentTool)) {
+    return undefined;
+  }
+  const maxToolArgsLen = Math.max(50, availableWidth - 20);
+  const toolArgsPreview = toolArgsText(progress.currentToolArgs, maxToolArgsLen, expanded);
+  const durationSuffix =
+    progress.currentToolStartedAt !== undefined && snapshotNow !== undefined
+      ? ` | ${formatDuration(Math.max(0, snapshotNow - progress.currentToolStartedAt))}`
+      : "";
+  return hasText(toolArgsPreview)
+    ? `${progress.currentTool}: ${toolArgsPreview}${durationSuffix}`
+    : `${progress.currentTool}${durationSuffix}`;
+}
+
+function toolArgsText(args: string | undefined, limit: number, expanded: boolean): string {
+  if (!hasText(args)) {
+    return "";
+  }
+  return expanded || args.length <= limit ? args : `${args.slice(0, limit)}...`;
+}
+
+export function buildLiveStatusLine(
+  progress: ReadonlyInput<Pick<AgentProgress, "activityState" | "lastActivityAt">>,
+  snapshotNow?: number,
+): string | undefined {
+  if (progress.lastActivityAt !== undefined && snapshotNow !== undefined) {
+    return formatActivityLabel(progress.lastActivityAt, progress.activityState, snapshotNow);
+  }
+  if (progress.activityState === "needs_attention") {
+    return "needs attention";
+  }
+  if (progress.lastActivityAt !== undefined) {
+    return "active";
+  }
+  return undefined;
+}
+
+export function themeBold(theme: Theme, text: string): string {
+  return theme.bold(text);
+}
+
+export function statJoin(theme: Theme, parts: ReadonlyInput<string[]>): string {
+  return parts
+    .filter(Boolean)
+    .map((part) => theme.fg("dim", part))
+    .join(` ${theme.fg("dim", "·")} `);
+}
+
+export function formatTokenStat(tokens: number): string {
+  return `${formatTokens(tokens)} token`;
+}
+
+export function formatToolUseStat(count: number): string {
+  return `${count} tool use${count === 1 ? "" : "s"}`;
+}
+
+export function formatProgressStats(
+  theme: Theme,
+  progress: ReadonlyInput<Pick<AgentProgress, "toolCount" | "tokens" | "durationMs"> | undefined>,
+  includeDuration = true,
+): string {
+  if (!progress) {
+    return "";
+  }
+  const parts: string[] = [];
+  if (progress.toolCount > 0) {
+    parts.push(formatToolUseStat(progress.toolCount));
+  }
+  if (progress.tokens > 0) {
+    parts.push(formatTokenStat(progress.tokens));
+  }
+  if (includeDuration && progress.durationMs > 0) {
+    parts.push(formatDuration(progress.durationMs));
+  }
+  return statJoin(theme, parts);
+}
+
+export function firstOutputLine(text: string): string {
+  return (
+    text
+      .split("\n")
+      .find((line) => hasText(line.trim()))
+      // One-line status previews reject ASCII controls while retaining ordinary whitespace.
+      // oxlint-disable-next-line no-control-regex
+      ?.replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, "")
+      .trim() ?? ""
+  );
+}
+
+function formatAcceptanceStatus(
+  result: ReadonlyInput<Details["results"][number]>,
+): string | undefined {
+  const acceptance = result.acceptance;
+  if (!hasText(acceptance?.status) || acceptance.status === "not-required") {
+    return undefined;
+  }
+  const finalization = acceptance.finalization
+    ? ` · finalization: ${acceptance.finalization.status} after ${acceptance.finalization.turns.length}/${acceptance.finalization.maxTurns} turns`
+    : "";
+  return `acceptance: ${acceptance.status}${finalization}`;
+}
+
+function stoppedStatusLine(
+  result: ReadonlyInput<Details["results"][number]>,
+  output: string,
+): string | undefined {
+  if (result.detached === true) {
+    return hasText(result.detachedReason) ? `Detached: ${result.detachedReason}` : "Detached";
+  }
+  if (result.timedOut === true) {
+    return `Timed out${hasText(result.error) ? `: ${result.error}` : ""}`;
+  }
+  if (result.interrupted === true) {
+    return "Paused";
+  }
+  if (result.exitCode !== 0) {
+    return `Error: ${result.error ?? nonemptyText(firstOutputLine(output)) ?? `exit ${result.exitCode}`}`;
+  }
+  return;
+}
+
+export function resultStatusLine(
+  result: ReadonlyInput<Details["results"][number]>,
+  output: string,
+): string {
+  const stopped = stoppedStatusLine(result, output);
+  if (stopped !== undefined) {
+    return stopped;
+  }
+  if (result.acceptance?.status === "blocked") {
+    const action = acceptanceHumanAction(result.acceptance)?.split("\n").at(0) ?? "";
+    return `Needs your action · acceptance incomplete · ${action}`;
+  }
+  const acceptance = formatAcceptanceStatus(result);
+  if (hasText(acceptance)) {
+    return `Done · ${acceptance}`;
+  }
+  if (hasEmptyTextOutputWithoutOutputTarget(result.task, output)) {
+    return "Done (no text output)";
+  }
+  return "Done";
+}
+
+export function resultGlyph(
+  result: ReadonlyInput<Details["results"][number]>,
+  output: string,
+  theme: Theme,
+  options: { readonly running?: boolean; readonly seed?: number } = {},
+): string {
+  const running = options.running ?? result.progress?.status === "running";
+  const seed = options.seed ?? progressRunningSeed(result.progress ?? result.progressSummary);
+  if (running) {
+    return theme.fg("accent", runningGlyph(seed));
+  }
+  const stopped = stoppedGlyph(result, theme);
+  if (stopped !== undefined) {
+    return stopped;
+  }
+  if (hasEmptyTextOutputWithoutOutputTarget(result.task, output)) {
+    return theme.fg("warning", "✓");
+  }
+  return theme.fg("success", "✓");
+}
+
+function stoppedGlyph(
+  result: ReadonlyInput<Details["results"][number]>,
+  theme: Theme,
+): string | undefined {
+  if (result.detached === true) {
+    return theme.fg("warning", "■");
+  }
+  if (result.timedOut === true) {
+    return theme.fg("error", "✗");
+  }
+  if (result.interrupted === true) {
+    return theme.fg("warning", "■");
+  }
+  if (result.exitCode !== 0) {
+    return theme.fg("error", "✗");
+  }
+  if (result.acceptance?.status === "blocked") {
+    return theme.fg("warning", "■");
+  }
+  return;
+}
+
+export function compactCurrentActivity(
+  progress: ReadonlyInput<
+    Pick<
+      AgentProgress,
+      | "currentTool"
+      | "currentToolArgs"
+      | "currentToolStartedAt"
+      | "activityState"
+      | "lastActivityAt"
+      | "durationMs"
+    >
+  >,
+): string {
+  const snapshotNow = snapshotNowForProgress(progress);
+  return (
+    formatCurrentToolLine(progress, getTermWidth() - 4, false, snapshotNow) ??
+    buildLiveStatusLine(progress, snapshotNow) ??
+    "thinking…"
+  );
+}
+
+export function modelThinkingBadge(theme: Theme, model?: string, thinking?: string): string {
+  const label = formatModelThinking(model, thinking);
+  return hasText(label) ? theme.fg("dim", ` (${label})`) : "";
+}
+
+export function modelStat(theme: Theme, model?: string): string {
+  return hasText(model) ? ` ${theme.fg("dim", "·")} ${theme.fg("dim", model)}` : "";
+}

package/src/tui/editor-viewport.ts

@@ -0,0 +1,19 @@
+import { CURSOR_MARKER, type Editor, type Component } from "@earendil-works/pi-tui";
+/** Bound native editor output without replacing its cursor or input handling. */
+export function editorViewport(editor: Editor, height: () => number): Component {
+  let offset = 0;
+  return {
+    invalidate: () => editor.invalidate(),
+    render(width) {
+      const lines = editor.render(width),
+        rows = height();
+      const cursor = lines.findIndex((line) => line.includes(CURSOR_MARKER));
+      if (cursor >= 0) {
+        offset = Math.max(0, cursor - rows + 1);
+      }
+      offset = Math.max(0, Math.min(offset, lines.length - rows));
+      return lines.slice(offset, offset + rows);
+    },
+    handleMouse: (event) => editor.handleMouse({ ...event, y: event.y + offset }),
+  };
+}