@sayknow-cli/coding-agent 0.4.6 → 0.5.0

package/src/modes/components/queue-pane.ts

@@ -1,11 +1,12 @@
 import { Container, matchesKey, type SelectItem, SelectList, Spacer, Text } from "@sayknow-cli/tui";
+import { formatKeyHint } from "../../config/keybindings";
 import type { QueuedMessageEditEntry } from "../../session/agent-session";
 import { getSelectListTheme, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 const MAX_VISIBLE_QUEUE_MESSAGES = 8;
-const RAW_UP = "\x1b[A";
-const RAW_DOWN = "\x1b[B";
+type QueueSelectorAction = "tui.select.confirm" | "tui.select.cancel";
+type QueueSelectorNavigationAction = "tui.select.up" | "tui.select.down" | "tui.select.pageUp" | "tui.select.pageDown";
 
 export class QueuePaneComponent extends Container {
 	#selectList: SelectList;
@@ -13,11 +14,20 @@ export class QueuePaneComponent extends Container {
 	#selectedIndex: number;
 	#onDelete: (entry: QueuedMessageEditEntry, index: number) => void;
 	#onMove: (entry: QueuedMessageEditEntry, index: number, direction: "up" | "down") => void;
-
+	#onSelect: (entry: QueuedMessageEditEntry) => void;
+	#onClose: () => void;
+	#entries: QueuedMessageEditEntry[];
+	#matchesSelectAction: (keyData: string, action: QueueSelectorAction) => boolean;
+	#resolveSelectNavigation: (keyData: string) => QueueSelectorNavigationAction | undefined;
 	constructor(
 		entries: QueuedMessageEditEntry[],
 		options: {
 			selectedIndex?: number;
+			formatKeyHint?: (key: string) => string;
+			formatSelectAction?: (action: QueueSelectorAction) => string;
+			matchesSelectAction?: (keyData: string, action: QueueSelectorAction) => boolean;
+			resolveSelectNavigation?: (keyData: string) => QueueSelectorNavigationAction | undefined;
+			onSelect: (entry: QueuedMessageEditEntry) => void;
 			onDelete: (entry: QueuedMessageEditEntry, index: number) => void;
 			onMove: (entry: QueuedMessageEditEntry, index: number, direction: "up" | "down") => void;
 			onClose: () => void;
@@ -25,23 +35,46 @@ export class QueuePaneComponent extends Container {
 	) {
 		super();
 		this.#onDelete = options.onDelete;
+		this.#onSelect = options.onSelect;
 		this.#onMove = options.onMove;
+		this.#onClose = options.onClose;
+		this.#entries = entries;
+		this.#matchesSelectAction =
+			options.matchesSelectAction ??
+			((keyData, action) => matchesKey(keyData, action === "tui.select.confirm" ? "enter" : "escape"));
+		this.#resolveSelectNavigation = options.resolveSelectNavigation ?? (() => undefined);
 		this.#selectedIndex = Math.max(0, Math.min(options.selectedIndex ?? 0, entries.length - 1));
 		this.#selectedEntry = entries[this.#selectedIndex];
 		const byId = new Map(entries.map(entry => [entry.id, entry]));
+		const displayKey = options.formatKeyHint ?? formatKeyHint;
+		const selectKeys = `${displayKey("alt+up")}/${displayKey("alt+down")}`;
+		const editKey = options.formatSelectAction
+			? options.formatSelectAction("tui.select.confirm") || "Disabled"
+			: displayKey("enter");
+		const deleteKey = displayKey("delete");
+		const moveKeys = `${displayKey("ctrl+up")}/${displayKey("ctrl+down")}`;
+		const closeKey = options.formatSelectAction
+			? options.formatSelectAction("tui.select.cancel") || "Disabled"
+			: displayKey("escape");
+		const itemHint = `${editKey} edit · ${deleteKey} remove · ${moveKeys} move`;
+		const controlsHint = `${selectKeys} select · ${itemHint} · ${closeKey} close`;
 		const items: SelectItem[] = entries.map((entry, index) => ({
 			value: entry.id,
 			label: `${entry.label} ${index + 1}`,
 			description: entry.text,
-			hint: "Del remove · Ctrl+↑/↓ move",
+			hint: itemHint,
 		}));
 
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.bold("Message queue"), 1, 0));
-		this.addChild(new Text(theme.fg("muted", "Del remove · Ctrl+↑/↓ move · Esc close"), 1, 0));
+		this.addChild(new Text(theme.fg("muted", controlsHint), 1, 0));
 		this.addChild(new Spacer(1));
 		this.addChild(new DynamicBorder());
 		this.#selectList = new SelectList(items, MAX_VISIBLE_QUEUE_MESSAGES, getSelectListTheme());
+		this.#selectList.onSelect = item => {
+			const entry = byId.get(item.value);
+			if (entry) this.#onSelect(entry);
+		};
 		this.#selectList.onSelectionChange = item => {
 			const index = entries.findIndex(entry => entry.id === item.value);
 			this.#selectedIndex = index === -1 ? this.#selectedIndex : index;
@@ -54,12 +87,25 @@ export class QueuePaneComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
-		if (matchesKey(keyData, "alt+up")) {
-			this.#selectList.handleInput(RAW_UP);
+		if (this.#matchesSelectAction(keyData, "tui.select.confirm")) {
+			if (this.#selectedEntry) this.#onSelect(this.#selectedEntry);
+			return;
+		}
+		if (this.#matchesSelectAction(keyData, "tui.select.cancel")) {
+			this.#onClose();
+			return;
+		}
+		const navigation = this.#resolveSelectNavigation(keyData);
+		if (navigation) {
+			this.#selectList.handleNavigation(navigation);
 			return;
 		}
-		if (matchesKey(keyData, "alt+down")) {
-			this.#selectList.handleInput(RAW_DOWN);
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "escape")) return;
+		if (matchesKey(keyData, "alt+up") || matchesKey(keyData, "alt+down")) {
+			const direction = matchesKey(keyData, "alt+up") ? -1 : 1;
+			this.#selectedIndex = (this.#selectedIndex + direction + this.#entries.length) % this.#entries.length;
+			this.#selectedEntry = this.#entries[this.#selectedIndex];
+			this.#selectList.setSelectedIndex(this.#selectedIndex);
 			return;
 		}
 		if (matchesKey(keyData, "ctrl+up") || matchesKey(keyData, "ctrl+shift+up")) {

package/src/modes/components/queued-message-selector.ts

@@ -1,12 +1,13 @@
 import { Container, matchesKey, type SelectItem, SelectList, Spacer, Text } from "@sayknow-cli/tui";
+import { formatKeyHint } from "../../config/keybindings";
 import type { QueuedMessageEditEntry } from "../../session/agent-session";
 import { getSelectListTheme, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 const MAX_VISIBLE_QUEUED_MESSAGES = 8;
-const RAW_UP = "\x1b[A";
-const RAW_DOWN = "\x1b[B";
 type QueuedMessageMoveDirection = "up" | "down";
+type QueueSelectorAction = "tui.select.confirm" | "tui.select.cancel";
+type QueueSelectorNavigationAction = "tui.select.up" | "tui.select.down" | "tui.select.pageUp" | "tui.select.pageDown";
 
 export type { QueuedMessageMoveDirection };
 
@@ -16,32 +17,61 @@ export class QueuedMessageSelectorComponent extends Container {
 	#selectedIndex = 0;
 	#onDelete: (entry: QueuedMessageEditEntry, selectedIndex: number) => void;
 	#onMove: (entry: QueuedMessageEditEntry, selectedIndex: number, direction: QueuedMessageMoveDirection) => void;
-
+	#onSelect: (entry: QueuedMessageEditEntry) => void;
+	#onCancel: () => void;
+	#entries: QueuedMessageEditEntry[];
+	#matchesSelectAction: (keyData: string, action: QueueSelectorAction) => boolean;
+	#resolveSelectNavigation: (keyData: string) => QueueSelectorNavigationAction | undefined;
 	constructor(
 		entries: QueuedMessageEditEntry[],
 		onSelect: (entry: QueuedMessageEditEntry) => void,
 		onDelete: (entry: QueuedMessageEditEntry, selectedIndex: number) => void,
 		onMove: (entry: QueuedMessageEditEntry, selectedIndex: number, direction: QueuedMessageMoveDirection) => void,
 		onCancel: () => void,
-		options?: { selectedIndex?: number },
+		options?: {
+			selectedIndex?: number;
+			formatKeyHint?: (key: string) => string;
+			formatSelectAction?: (action: QueueSelectorAction) => string;
+			matchesSelectAction?: (keyData: string, action: QueueSelectorAction) => boolean;
+			resolveSelectNavigation?: (keyData: string) => QueueSelectorNavigationAction | undefined;
+		},
 	) {
 		super();
 
 		this.#onDelete = onDelete;
 		this.#onMove = onMove;
+		this.#onSelect = onSelect;
+		this.#onCancel = onCancel;
+		this.#entries = entries;
+		this.#matchesSelectAction =
+			options?.matchesSelectAction ??
+			((keyData, action) => matchesKey(keyData, action === "tui.select.confirm" ? "enter" : "escape"));
+		this.#resolveSelectNavigation = options?.resolveSelectNavigation ?? (() => undefined);
 		const byId = new Map(entries.map(entry => [entry.id, entry]));
 		this.#selectedIndex = Math.max(0, Math.min(options?.selectedIndex ?? 0, entries.length - 1));
 		this.#selectedEntry = entries[this.#selectedIndex];
+		const displayKey = options?.formatKeyHint ?? formatKeyHint;
+		const selectKeys = `${displayKey("alt+up")}/${displayKey("alt+down")}`;
+		const editKey = options?.formatSelectAction
+			? options.formatSelectAction("tui.select.confirm") || "Disabled"
+			: displayKey("enter");
+		const deleteKey = displayKey("delete");
+		const moveKeys = `${displayKey("ctrl+up")}/${displayKey("ctrl+down")}`;
+		const cancelKey = options?.formatSelectAction
+			? options.formatSelectAction("tui.select.cancel") || "Disabled"
+			: displayKey("escape");
+		const itemHint = `${editKey} edit · ${deleteKey} remove · ${moveKeys} move`;
+		const controlsHint = `${selectKeys} select · ${itemHint} · ${cancelKey} cancel`;
 		const items: SelectItem[] = entries.map((entry, index) => ({
 			value: entry.id,
 			label: `${entry.label} ${index + 1}`,
 			description: entry.text,
-			hint: "Enter edit · Del remove · Ctrl+↑/↓ move",
+			hint: itemHint,
 		}));
 
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.bold("Queued messages"), 1, 0));
-		this.addChild(new Text(theme.fg("muted", "Enter edit · Del remove · Ctrl+↑/↓ move · Esc cancel"), 1, 0));
+		this.addChild(new Text(theme.fg("muted", controlsHint), 1, 0));
 		this.addChild(new Spacer(1));
 		this.addChild(new DynamicBorder());
 
@@ -63,12 +93,25 @@ export class QueuedMessageSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
-		if (matchesKey(keyData, "alt+up")) {
-			this.#selectList.handleInput(RAW_UP);
+		if (this.#matchesSelectAction(keyData, "tui.select.confirm")) {
+			if (this.#selectedEntry) this.#onSelect(this.#selectedEntry);
+			return;
+		}
+		if (this.#matchesSelectAction(keyData, "tui.select.cancel")) {
+			this.#onCancel();
+			return;
+		}
+		const navigation = this.#resolveSelectNavigation(keyData);
+		if (navigation) {
+			this.#selectList.handleNavigation(navigation);
 			return;
 		}
-		if (matchesKey(keyData, "alt+down")) {
-			this.#selectList.handleInput(RAW_DOWN);
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "escape")) return;
+		if (matchesKey(keyData, "alt+up") || matchesKey(keyData, "alt+down")) {
+			const direction = matchesKey(keyData, "alt+up") ? -1 : 1;
+			this.#selectedIndex = (this.#selectedIndex + direction + this.#entries.length) % this.#entries.length;
+			this.#selectedEntry = this.#entries[this.#selectedIndex];
+			this.#selectList.setSelectedIndex(this.#selectedIndex);
 			return;
 		}
 		if (matchesKey(keyData, "ctrl+up") || matchesKey(keyData, "ctrl+shift+up")) {

package/src/modes/components/read-tool-group.ts

@@ -3,7 +3,7 @@ import { Container, Text } from "@sayknow-cli/tui";
 import { InternalUrlRouter } from "../../internal-urls";
 import { getLanguageFromPath, theme } from "../../modes/theme/theme";
 import { splitPathAndSel } from "../../tools/path-utils";
-import { PREVIEW_LIMITS, shortenPath } from "../../tools/render-utils";
+import { PREVIEW_LIMITS, replaceTabs, shortenPath } from "../../tools/render-utils";
 import { renderCodeCell } from "../../tui";
 import type { ToolExecutionHandle } from "./tool-execution";
 
@@ -53,9 +53,16 @@ type ReadToolResultDetails = {
 	conflictCount?: number;
 };
 
-type ReadToolGroupOptions = {
-	showContentPreview?: boolean;
-};
+type ReadToolVisibleProjection = ReadonlyArray<{
+	path: string;
+	status: ReadEntry["status"];
+	correctedFrom?: string;
+	conflictCount?: number;
+	preview?: {
+		lines: readonly string[];
+		hiddenLineCount: number;
+	};
+}>;
 
 function getSuffixResolution(details: ReadToolResultDetails | undefined): ReadToolSuffixResolution | undefined {
 	if (typeof details?.suffixResolution?.from !== "string" || typeof details.suffixResolution.to !== "string") {
@@ -82,13 +89,16 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	#expanded = false;
 	#manuallyExpanded: boolean | undefined;
 	#showContentPreview: boolean;
+	#visibleTranscriptChanged = false;
+	#lastVisibleProjection: ReadToolVisibleProjection = [];
 
-	constructor(options: ReadToolGroupOptions = {}) {
+	constructor(options: { showContentPreview?: boolean } = {}) {
 		super();
 		this.#showContentPreview = options.showContentPreview ?? false;
 		this.#text = new Text("", 0, 0);
 		this.addChild(this.#text);
 		this.#updateDisplay();
+		this.#lastVisibleProjection = this.#visibleProjection();
 	}
 
 	updateArgs(args: ReadRenderArgs, toolCallId?: string): void {
@@ -102,7 +112,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		};
 		entry.path = rawPath;
 		this.#entries.set(toolCallId, entry);
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	updateResult(
@@ -126,23 +136,20 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 			typeof details?.conflictCount === "number" && details.conflictCount > 0 ? details.conflictCount : undefined;
 		entry.conflictCount = conflictCount;
 		entry.status = result.isError ? "error" : suffixResolution ? "warning" : "success";
-		// Store the text content for preview/expanded display
 		const textContent = result.content?.find(c => c.type === "text")?.text;
-		if (textContent !== undefined) {
-			entry.contentText = textContent;
-		}
-		this.#updateDisplay();
+		entry.contentText = textContent;
+		this.#updateDisplayAndNotify();
 	}
 
 	setArgsComplete(_toolCallId?: string): void {
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	/** Applies automatic expansion unless this renderer instance has an explicit fold choice. */
 	setExpanded(expanded: boolean): void {
 		if (this.#manuallyExpanded !== undefined) return;
 		this.#expanded = expanded;
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	/**
@@ -152,13 +159,74 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	setManuallyExpanded(expanded: boolean): void {
 		this.#manuallyExpanded = expanded;
 		this.#expanded = expanded;
-		this.#updateDisplay();
+		this.#updateDisplayAndNotify();
 	}
 
 	getComponent(): Component {
 		return this;
 	}
 
+	consumeVisibleTranscriptChange(): boolean {
+		const changed = this.#visibleTranscriptChanged;
+		this.#visibleTranscriptChanged = false;
+		return changed;
+	}
+
+	#visibleProjection(): ReadToolVisibleProjection {
+		return [...this.#entries.values()].map(entry => {
+			if (!this.#shouldRenderPreview(entry)) {
+				return {
+					path: entry.path,
+					status: entry.status,
+					correctedFrom: entry.correctedFrom,
+					conflictCount: entry.conflictCount,
+				};
+			}
+			const lines = replaceTabs(entry.contentText ?? "")
+				.split(/\r?\n/)
+				.map(line => line.slice(line.lastIndexOf("\r") + 1));
+			const visibleLineCount = this.#expanded ? lines.length : Math.min(lines.length, COLLAPSED_PREVIEW_LINES);
+			return {
+				path: entry.path,
+				status: entry.status,
+				correctedFrom: entry.correctedFrom,
+				preview: {
+					lines: lines.slice(0, visibleLineCount),
+					hiddenLineCount: lines.length - visibleLineCount,
+				},
+			};
+		});
+	}
+
+	#sameVisibleProjection(left: ReadToolVisibleProjection, right: ReadToolVisibleProjection): boolean {
+		if (left.length !== right.length) return false;
+		return left.every((entry, index) => {
+			const other = right[index];
+			if (
+				!other ||
+				entry.path !== other.path ||
+				entry.status !== other.status ||
+				entry.correctedFrom !== other.correctedFrom ||
+				(!entry.preview && entry.conflictCount !== other.conflictCount)
+			)
+				return false;
+			if (!entry.preview || !other.preview) return entry.preview === other.preview;
+			return (
+				entry.preview.hiddenLineCount === other.preview.hiddenLineCount &&
+				entry.preview.lines.length === other.preview.lines.length &&
+				entry.preview.lines.every((line, lineIndex) => line === other.preview!.lines[lineIndex])
+			);
+		});
+	}
+
+	#updateDisplayAndNotify(): void {
+		this.#updateDisplay();
+		const after = this.#visibleProjection();
+		if (this.#sameVisibleProjection(after, this.#lastVisibleProjection)) return;
+		this.#lastVisibleProjection = after;
+		this.#visibleTranscriptChanged = true;
+	}
+
 	#updateDisplay(): void {
 		const entries = [...this.#entries.values()];
 

package/src/modes/components/runtime-mcp-add-wizard.ts

@@ -60,6 +60,7 @@ type WizardStep =
  */
 export interface MCPAddWizardOAuthResult {
 	credentialId: string;
+	tokenEndpoint: string;
 	clientId?: string;
 	clientSecret?: string;
 }
@@ -122,6 +123,7 @@ export class MCPAddWizard extends Container {
 	#onCancelCallback: () => void;
 	#onOAuthCallback:
 		| ((
+				endpointUrl: string,
 				authUrl: string,
 				tokenUrl: string,
 				clientId: string,
@@ -141,6 +143,7 @@ export class MCPAddWizard extends Container {
 		onComplete: (name: string, config: MCPServerConfig, scope: Scope) => void,
 		onCancel: () => void,
 		onOAuth?: (
+			endpointUrl: string,
 			authUrl: string,
 			tokenUrl: string,
 			clientId: string,
@@ -1189,6 +1192,7 @@ export class MCPAddWizard extends Container {
 		try {
 			// Call OAuth handler
 			const oauthResult = await this.#onOAuthCallback(
+				this.#state.url,
 				this.#state.oauthAuthUrl,
 				this.#state.oauthTokenUrl,
 				this.#state.oauthClientId,
@@ -1200,6 +1204,7 @@ export class MCPAddWizard extends Container {
 			// Store credential ID + any dynamically-registered client credentials,
 			// so the final mcp.json entry persists everything needed for refresh.
 			this.#state.oauthCredentialId = oauthResult.credentialId;
+			this.#state.oauthTokenUrl = oauthResult.tokenEndpoint;
 			if (oauthResult.clientId) this.#state.oauthClientId = oauthResult.clientId;
 			if (oauthResult.clientSecret) this.#state.oauthClientSecret = oauthResult.clientSecret;
 

package/src/modes/components/sayknow-pet-widget.ts

@@ -4,6 +4,7 @@ import {
 	type Component,
 	type Container,
 	getCellDimensions,
+	isUnderTmux,
 	PARA_PARA_STEPS,
 	PET_SKINS,
 	type PetMode,
@@ -14,6 +15,7 @@ import {
 	type SayknowPixelFrameName,
 	type SayknowPixelFrames,
 	type TUI,
+	tmuxOwnsSixel,
 	wrapTmuxPassthrough,
 } from "@sayknow-cli/tui";
 import type { CustomEditor } from "./custom-editor";
@@ -281,9 +283,6 @@ export class SayknowPetWidget {
 			sixelTopPaddingPx: protocol === "sixel" ? PET_SIXEL_DROP_PX : 0,
 			kittyCellYOffsetPx: protocol === "kitty" ? petKittyDropPx(cell.heightPx) : 0,
 			kittyImageId: protocol === "kitty" ? this.#kittyImageId : undefined,
-			// Forward the pet's sixel raster through tmux's DCS passthrough envelope
-			// when under tmux (no-op otherwise), so the outer terminal renders it.
-			wrapSixel: wrapTmuxPassthrough,
 		});
 		this.#framedEditor.setReserve(this.#pixel.columns + PET_SIDE_MARGIN);
 	}
@@ -493,6 +492,7 @@ export class SayknowPetWidget {
 		this.#frameCleanupAwaitingAck = false;
 		const { x, y } = pos;
 		let out = "";
+		const positioned = `\x1b[${y + 1};${x + 1}H${pixel.frames[this.#frame]}`;
 
 		if (pixel.protocol === "sixel") {
 			const footprint = { x, y, columns: pixel.columns, rows: pixel.rasterRows };
@@ -501,13 +501,32 @@ export class SayknowPetWidget {
 			}
 			if (clearPet) out += this.#clearSixelFootprint(footprint);
 			this.#lastSixelFootprint = footprint;
-		} else {
-			// A kitty frame emitted below (re)places the image, so cleanup is
-			// pending again even if a narrow-terminal pass consumed it earlier.
-			this.#kittyCleanupPending = true;
+			// Two mutually exclusive delivery modes, and the erase above only works in
+			// the first one:
+			//
+			// tmux owns sixel (terminal-features advertises it): send the frame straight
+			// through. tmux parses it into its own screen model, so the ECH erase above
+			// actually removes the image, and scroll/resize/copy-mode stay consistent.
+			//
+			// tmux does NOT own sixel: the frame has to be smuggled past tmux with DCS
+			// passthrough, which writes pixels directly into the OUTER terminal's image
+			// plane. tmux never records them, so the erase reaches only its cell buffer
+			// and the pixels survive as residue. Passthrough is therefore a fallback,
+			// not the default. The save/restore pair must sit INSIDE the passthrough
+			// envelope: the sixel advances the outer terminal's cursor, and a bare
+			// \x1b7/\x1b8 would only reach tmux, scrolling the viewport every frame.
+			out += tmuxOwnsSixel()
+				? positioned
+				: isUnderTmux()
+					? wrapTmuxPassthrough(`\x1b7${positioned}\x1b8`)
+					: positioned;
+			return out;
 		}
 
-		out += `\x1b[${y + 1};${x + 1}H${pixel.frames[this.#frame]}`;
+		// A kitty frame (re)places the image cursor-neutrally, so cleanup is pending
+		// again even if a narrow-terminal pass consumed it earlier.
+		this.#kittyCleanupPending = true;
+		out += positioned;
 		return out;
 	}
 }