opencode-clm 0.1.1 → 0.3.0

package/src/panel/keys.ts

@@ -0,0 +1,235 @@
+// Key handling for the `/clm` panel as a pure reducer. The key table follows pi-clm
+// src/viewer.ts `handleInput` (MIT, Copyright 2026 Emanuel Casco), plus `r` reload; the
+// edits page's scroll-inside-an-expanded-diff rule follows its `scrollWithinExpandedEdit`.
+
+import { PAGES } from "./command.ts";
+import type { PanelModel } from "./model.ts";
+import { availableTimelineZooms } from "./timeline.ts";
+import {
+	contentWidth,
+	currentRevision,
+	editKey,
+	editsPage,
+	effectiveZoom,
+	markerSelection,
+	maxScroll,
+	revisionIndex,
+	settingsPage,
+	viewportHeight,
+	type PanelSize,
+	type PanelState,
+} from "./view.ts";
+
+export type { PanelState } from "./view.ts";
+export { initialPanelState } from "./view.ts";
+
+export type Key =
+	| "1" | "2" | "3" | "4"
+	| "tab" | "shift+tab"
+	| "left" | "right" | "up" | "down"
+	| "pageup" | "pagedown"
+	| "home" | "end" | "g" | "G"
+	| "enter" | "space"
+	| "a" | "z" | "r" | "q" | "escape"
+	// Aliases: j k for down/up, [ ] for left/right.
+	| "j" | "k" | "[" | "]";
+
+export type Effect =
+	| { kind: "close" }
+	| { kind: "reload" }
+	| { kind: "prompt"; setting: string; current: string; placeholder?: string }
+	| { kind: "apply"; setting: string; value: string };
+
+export interface ReduceResult {
+	state: PanelState;
+	effect?: Effect;
+}
+
+const ALIASES: Partial<Record<Key, Key>> = { j: "down", k: "up", "[": "left", "]": "right" };
+
+function withPage(state: PanelState, page: PanelState["page"]): PanelState {
+	return { ...state, page, scroll: 0 };
+}
+
+/** Edits page: keep the selected row (header plus any expanded diff) on screen, header first. */
+function revealEdit(state: PanelState, model: PanelModel, size: PanelSize): PanelState {
+	const { lines, rowStarts } = editsPage(model, state, contentWidth(size));
+	const viewport = viewportHeight(size);
+	const start = rowStarts[state.editSel];
+	if (start === undefined) return state;
+	const end = rowStarts[state.editSel + 1] ?? lines.length;
+	let scroll = state.scroll;
+	if (start < scroll) scroll = start;
+	else if (end > scroll + viewport) scroll = Math.min(start, end - viewport);
+	return { ...state, scroll };
+}
+
+/**
+ * ↓/↑ first scroll through the selected row's expanded diff while it extends past the
+ * viewport, then move to the next/previous row. Returns undefined when it did not scroll.
+ */
+function scrollWithinExpanded(state: PanelState, model: PanelModel, size: PanelSize, delta: number): PanelState | undefined {
+	const revision = currentRevision(model, state);
+	if (!state.expanded.has(editKey(revision, state.editSel))) return undefined;
+	const { lines, rowStarts } = editsPage(model, state, contentWidth(size));
+	const start = rowStarts[state.editSel];
+	if (start === undefined) return undefined;
+	const end = rowStarts[state.editSel + 1] ?? lines.length;
+	const viewport = viewportHeight(size);
+	if (delta > 0 && end > state.scroll + viewport) {
+		return { ...state, scroll: state.scroll + Math.min(delta, end - (state.scroll + viewport)) };
+	}
+	if (delta < 0 && start < state.scroll) {
+		return { ...state, scroll: state.scroll - Math.min(-delta, state.scroll - start) };
+	}
+	return undefined;
+}
+
+function moveSelection(state: PanelState, model: PanelModel, size: PanelSize, delta: number): PanelState {
+	switch (state.page) {
+		case "overview":
+			return moveMarker(state, model, delta);
+		case "edits": {
+			const scrolled = scrollWithinExpanded(state, model, size, delta);
+			if (scrolled) return scrolled;
+			const count = currentRevision(model, state)?.edits.length ?? 0;
+			if (count === 0) return { ...state, scroll: Math.max(0, state.scroll + delta) };
+			return revealEdit({ ...state, editSel: Math.max(0, Math.min(count - 1, state.editSel + delta)) }, model, size);
+		}
+		case "settings":
+			return revealSetting({ ...state, settingSel: clampSetting(model, state.settingSel + delta), message: undefined }, model, size);
+		case "input":
+			return { ...state, scroll: Math.max(0, state.scroll + delta) };
+	}
+}
+
+/** ← → (and ↑ ↓ on the overview) step through markers; the stop after the newest is "now". */
+function moveMarker(state: PanelState, model: PanelModel, delta: number): PanelState {
+	const now = model.timeline.markers.length;
+	const next = Math.max(0, Math.min(now, markerSelection(model, state) + delta));
+	return { ...state, markerSel: next === now ? undefined : next };
+}
+
+function clampSetting(model: PanelModel, index: number): number {
+	return Math.max(0, Math.min(model.settings.rows.length - 1, index));
+}
+
+function revealSetting(state: PanelState, model: PanelModel, size: PanelSize): PanelState {
+	const { focus } = settingsPage(model, state, contentWidth(size));
+	const viewport = viewportHeight(size);
+	let scroll = state.scroll;
+	if (focus < scroll) scroll = focus;
+	else if (focus >= scroll + viewport) scroll = focus - viewport + 1;
+	return { ...state, scroll };
+}
+
+/** Enter on the overview: a marker with a revision opens edits there; "now" opens input. */
+function openMarker(state: PanelState, model: PanelModel): PanelState {
+	const selection = markerSelection(model, state);
+	if (selection === model.timeline.markers.length) return withPage(state, "input");
+	const marker = model.timeline.markers[selection];
+	if (!marker || marker.kind !== "applied") return state;
+	const index = model.revisions.findIndex((revision) => revision.revision === marker.revision);
+	if (index < 0) return state;
+	return { ...withPage(state, "edits"), revisionIndex: index, editSel: 0 };
+}
+
+function toggleEdit(state: PanelState, model: PanelModel, size: PanelSize): PanelState {
+	const revision = currentRevision(model, state);
+	if (!revision?.edits[state.editSel]) return state;
+	const key = editKey(revision, state.editSel);
+	const expanded = new Set(state.expanded);
+	if (expanded.delete(key)) return { ...state, expanded };
+	expanded.add(key);
+	return revealEdit({ ...state, expanded }, model, size);
+}
+
+function toggleAllEdits(state: PanelState, model: PanelModel): PanelState {
+	const revision = currentRevision(model, state);
+	if (!revision) return state;
+	const keys = revision.edits.map((_edit, index) => editKey(revision, index));
+	const collapse = keys.length > 0 && keys.every((key) => state.expanded.has(key));
+	const expanded = new Set(state.expanded);
+	for (const key of keys) {
+		if (collapse) expanded.delete(key);
+		else expanded.add(key);
+	}
+	return { ...state, expanded };
+}
+
+/** Enter/Space on a setting: next choice, or a text prompt. */
+function changeSetting(state: PanelState, model: PanelModel): ReduceResult {
+	const row = model.settings.rows[clampSetting(model, state.settingSel)];
+	if (!row) return { state };
+	const cleared = { ...state, message: undefined };
+	if (row.choices && row.choices.length > 0) {
+		const index = row.choices.indexOf(row.value);
+		return { state: cleared, effect: { kind: "apply", setting: row.key, value: row.choices[(index + 1) % row.choices.length]! } };
+	}
+	return {
+		state: cleared,
+		effect: { kind: "prompt", setting: row.key, current: row.value, ...(row.placeholder ? { placeholder: row.placeholder } : {}) },
+	};
+}
+
+function jump(state: PanelState, model: PanelModel, toEnd: boolean): PanelState {
+	switch (state.page) {
+		case "overview":
+			return { ...state, markerSel: toEnd ? undefined : model.timeline.markers.length === 0 ? undefined : 0 };
+		case "edits":
+			return {
+				...state,
+				editSel: toEnd ? Math.max(0, (currentRevision(model, state)?.edits.length ?? 1) - 1) : 0,
+				scroll: toEnd ? Number.MAX_SAFE_INTEGER : 0,
+			};
+		case "settings":
+			return { ...state, settingSel: toEnd ? Math.max(0, model.settings.rows.length - 1) : 0, scroll: toEnd ? Number.MAX_SAFE_INTEGER : 0 };
+		case "input":
+			return { ...state, scroll: toEnd ? Number.MAX_SAFE_INTEGER : 0 };
+	}
+}
+
+function step(state: PanelState, key: Key, model: PanelModel, size: PanelSize): ReduceResult {
+	const page = state.page;
+	if (page === "settings" && (key === "up" || key === "down")) return { state: moveSelection(state, model, size, key === "up" ? -1 : 1) };
+	if (page === "settings" && (key === "enter" || key === "space")) return changeSetting(state, model);
+	if (key === "q" || key === "escape") return { state, effect: { kind: "close" } };
+	if (key === "r") return { state, effect: { kind: "reload" } };
+	if (page === "overview" && key === "enter") return { state: openMarker(state, model) };
+	if (page === "overview" && (key === "left" || key === "right")) return { state: moveMarker(state, model, key === "left" ? -1 : 1) };
+	if (page === "overview" && key === "z") {
+		const width = contentWidth(size);
+		const zooms = availableTimelineZooms(model.timeline, width);
+		const next = zooms[(zooms.indexOf(effectiveZoom(model, state, width)) + 1) % zooms.length]!;
+		return { state: { ...state, zoom: next } };
+	}
+	if (page === "edits" && (key === "left" || key === "right")) {
+		if (model.revisions.length === 0) return { state };
+		const index = Math.max(0, Math.min(model.revisions.length - 1, revisionIndex(model, state) + (key === "left" ? -1 : 1)));
+		return { state: { ...state, revisionIndex: index, editSel: 0, scroll: 0 } };
+	}
+	const pageIndex = PAGES.indexOf(page);
+	if (key === "tab") return { state: withPage(state, PAGES[(pageIndex + 1) % PAGES.length]!) };
+	if (key === "shift+tab") return { state: withPage(state, PAGES[(pageIndex - 1 + PAGES.length) % PAGES.length]!) };
+	if (key === "enter" || key === "space") return { state: page === "edits" ? toggleEdit(state, model, size) : state };
+	if (page === "edits" && key === "a") return { state: toggleAllEdits(state, model) };
+	if (key === "up" || key === "down") return { state: moveSelection(state, model, size, key === "up" ? -1 : 1) };
+	if (key === "pageup" || key === "pagedown") {
+		const viewport = viewportHeight(size);
+		const sign = key === "pageup" ? -1 : 1;
+		if (page === "edits") return { state: moveSelection(state, model, size, sign * Math.max(1, viewport - 2)) };
+		return { state: { ...state, scroll: Math.max(0, state.scroll + sign * viewport) } };
+	}
+	if (key === "home" || key === "g") return { state: jump(state, model, false) };
+	if (key === "end" || key === "G") return { state: jump(state, model, true) };
+	if (/^[1-4]$/.test(key)) return { state: withPage(state, PAGES[Number(key) - 1]!) };
+	return { state };
+}
+
+/** Applies one key. The result's scroll is clamped to the page. */
+export function reduce(state: PanelState, key: Key, model: PanelModel, size: PanelSize): ReduceResult {
+	const result = step(state, ALIASES[key] ?? key, model, size);
+	const limit = maxScroll(model, result.state, size);
+	if (result.state.scroll > limit) result.state = { ...result.state, scroll: limit };
+	return result;
+}

package/src/panel/lines.ts

@@ -0,0 +1,269 @@
+// Styled lines for the `/clm` panel: spans carry theme tones instead of ANSI escapes, so
+// the pure renderers can be tested as plain text and the TUI adapter maps each tone to
+// the host theme. Written for this package.
+
+export type Tone =
+	| "text"
+	| "muted"
+	| "dim"
+	| "accent"
+	| "edit"
+	| "warning"
+	| "error"
+	| "success"
+	| "diffAdd"
+	| "diffDel"
+	| "diffAddEm"
+	| "diffDelEm"
+	| "border";
+
+export interface Span {
+	text: string;
+	tone?: Tone;
+	bold?: boolean;
+}
+
+export type Line = Span[];
+
+export function span(text: string, tone?: Tone, bold?: boolean): Span {
+	const result: Span = { text };
+	if (tone !== undefined) result.tone = tone;
+	if (bold) result.bold = true;
+	return result;
+}
+
+/** The text of a line without styles. */
+export function plain(line: readonly Span[]): string {
+	return line.map((part) => part.text).join("");
+}
+
+/**
+ * Terminal cells of one code point: 0 for combining marks, 2 for East Asian wide and
+ * emoji ranges, 1 otherwise. An approximation; it covers the scripts a diff is likely to show.
+ */
+export function charWidth(char: string): number {
+	const code = char.codePointAt(0) ?? 0;
+	if (code === 0) return 0;
+	if ((code >= 0x0300 && code <= 0x036f) || (code >= 0x200b && code <= 0x200f) || code === 0xfe0f) return 0;
+	if (
+		(code >= 0x1100 && code <= 0x115f) ||
+		(code >= 0x2e80 && code <= 0xa4cf && code !== 0x303f) ||
+		(code >= 0xac00 && code <= 0xd7a3) ||
+		(code >= 0xf900 && code <= 0xfaff) ||
+		(code >= 0xfe30 && code <= 0xfe4f) ||
+		(code >= 0xff00 && code <= 0xff60) ||
+		(code >= 0xffe0 && code <= 0xffe6) ||
+		(code >= 0x1f300 && code <= 0x1faff) ||
+		(code >= 0x20000 && code <= 0x3fffd)
+	) return 2;
+	return 1;
+}
+
+export function textWidth(text: string): number {
+	let width = 0;
+	for (const char of text) width += charWidth(char);
+	return width;
+}
+
+export function lineWidth(line: readonly Span[]): number {
+	return line.reduce((total, part) => total + textWidth(part.text), 0);
+}
+
+function sameStyle(a: Span, b: Span): boolean {
+	return a.tone === b.tone && Boolean(a.bold) === Boolean(b.bold);
+}
+
+/** Drops empty spans and merges neighbours with the same style. */
+export function normalize(line: readonly Span[]): Line {
+	const result: Line = [];
+	for (const part of line) {
+		if (part.text === "") continue;
+		const last = result.at(-1);
+		if (last && sameStyle(last, part)) last.text += part.text;
+		else result.push({ ...part });
+	}
+	return result;
+}
+
+/** Gives every span without a tone the given tone. */
+export function withTone(line: readonly Span[], tone: Tone): Line {
+	return line.map((part) => (part.tone === undefined ? { ...part, tone } : { ...part }));
+}
+
+/** Cuts a line to `width` cells, ending with `ellipsis` (styled like the cut span) when it was cut. */
+export function truncate(line: readonly Span[], width: number, ellipsis = "…"): Line {
+	if (width <= 0) return [];
+	if (lineWidth(line) <= width) return line.map((part) => ({ ...part }));
+	const target = Math.max(0, width - textWidth(ellipsis));
+	const result: Line = [];
+	let used = 0;
+	let lastStyle: Span | undefined;
+	for (const part of line) {
+		let text = "";
+		for (const char of part.text) {
+			const cells = charWidth(char);
+			if (used + cells > target) break;
+			text += char;
+			used += cells;
+		}
+		lastStyle = part;
+		if (text) result.push({ ...part, text });
+		if (text.length < part.text.length) break;
+	}
+	if (ellipsis && textWidth(ellipsis) <= width) {
+		result.push({ ...(lastStyle ?? {}), text: ellipsis });
+	}
+	return normalize(result);
+}
+
+/** Pads a line with plain spaces to `width` cells (no-op when already wider). */
+export function padEnd(line: readonly Span[], width: number): Line {
+	const missing = width - lineWidth(line);
+	const result = line.map((part) => ({ ...part }));
+	if (missing > 0) result.push({ text: " ".repeat(missing) });
+	return result;
+}
+
+/** Fits a line to exactly `width` cells: truncated with an ellipsis, then padded. */
+export function fit(line: readonly Span[], width: number): Line {
+	return padEnd(truncate(line, width), width);
+}
+
+/** Removes trailing whitespace. */
+export function trimEnd(line: readonly Span[]): Line {
+	const result = line.map((part) => ({ ...part }));
+	while (result.length > 0) {
+		const last = result.at(-1)!;
+		last.text = last.text.replace(/\s+$/u, "");
+		if (last.text !== "") break;
+		result.pop();
+	}
+	return result;
+}
+
+export function concat(...lines: ReadonlyArray<readonly Span[]>): Line {
+	return normalize(lines.flat());
+}
+
+interface Cell {
+	char: string;
+	width: number;
+	style: Span;
+}
+
+function toCells(line: readonly Span[]): Cell[] {
+	const cells: Cell[] = [];
+	for (const part of line) {
+		for (const char of part.text) cells.push({ char, width: charWidth(char), style: part });
+	}
+	return cells;
+}
+
+function fromCells(cells: readonly Cell[]): Line {
+	return normalize(cells.map((cell) => {
+		const out: Span = { text: cell.char };
+		if (cell.style.tone !== undefined) out.tone = cell.style.tone;
+		if (cell.style.bold) out.bold = true;
+		return out;
+	}));
+}
+
+function cellsWidth(cells: readonly Cell[]): number {
+	return cells.reduce((total, cell) => total + cell.width, 0);
+}
+
+/** Splits a line at newline characters, keeping styles. */
+export function splitNewlines(line: readonly Span[]): Line[] {
+	const rows: Line[] = [[]];
+	for (const part of line) {
+		const pieces = part.text.split(/\r\n?|\n/);
+		pieces.forEach((piece, index) => {
+			if (index > 0) rows.push([]);
+			if (piece) rows.at(-1)!.push({ ...part, text: piece });
+		});
+	}
+	return rows;
+}
+
+/**
+ * Word-wraps a styled line to `width` cells. Breaks at whitespace when it can and inside a
+ * word when the word alone is wider than the row. Leading whitespace of the first row is
+ * kept (indentation); whitespace at a break is dropped. Newlines start a new row. Always
+ * returns at least one row.
+ */
+export function wrap(line: readonly Span[], width: number): Line[] {
+	if (width <= 0) return [[]];
+	const rows: Line[] = [];
+	for (const physical of splitNewlines(line)) rows.push(...wrapOne(physical, width));
+	return rows.length > 0 ? rows : [[]];
+}
+
+function wrapOne(line: readonly Span[], width: number): Line[] {
+	// A cell wider than the row (a wide character at width 1) is shown as "?".
+	const cells = toCells(line).map((cell) => (cell.width > width ? { ...cell, char: "?", width: 1 } : cell));
+	if (cells.length === 0) return [[]];
+	// Tokens: runs of whitespace or of non-whitespace.
+	const tokens: Cell[][] = [];
+	for (const cell of cells) {
+		const space = /\s/u.test(cell.char);
+		const last = tokens.at(-1);
+		if (last && /\s/u.test(last[0]!.char) === space) last.push(cell);
+		else tokens.push([cell]);
+	}
+	const rows: Cell[][] = [];
+	let row: Cell[] = [];
+	let used = 0;
+	const flush = () => {
+		while (row.length > 0 && /\s/u.test(row.at(-1)!.char)) used -= row.pop()!.width;
+		rows.push(row);
+		row = [];
+		used = 0;
+	};
+	for (const token of tokens) {
+		const tokenWidth = cellsWidth(token);
+		const space = /\s/u.test(token[0]!.char);
+		if (space) {
+			if (row.length === 0 && rows.length > 0) continue; // no leading space after a break
+			if (row.length === 0 && tokenWidth > width) {
+				// Indentation wider than the row: keep what fits rather than an empty row.
+				for (const cell of token) {
+					if (used + cell.width > width) break;
+					row.push(cell);
+					used += cell.width;
+				}
+				continue;
+			}
+			if (used + tokenWidth <= width) {
+				row.push(...token);
+				used += tokenWidth;
+			} else {
+				flush();
+			}
+			continue;
+		}
+		if (used + tokenWidth <= width) {
+			row.push(...token);
+			used += tokenWidth;
+			continue;
+		}
+		if (tokenWidth <= width && row.length > 0) {
+			flush();
+			row.push(...token);
+			used = tokenWidth;
+			continue;
+		}
+		// Hard break: the word is wider than a row.
+		for (const cell of token) {
+			if (used + cell.width > width && row.length > 0) flush();
+			row.push(cell);
+			used += cell.width;
+		}
+	}
+	if (row.length > 0 || rows.length === 0) flush();
+	return rows.map(fromCells);
+}
+
+/** Wraps plain text in one tone. */
+export function wrapText(text: string, width: number, tone?: Tone, bold?: boolean): Line[] {
+	return wrap([span(text, tone, bold)], width);
+}