@sayknow-cli/coding-agent 0.4.6 → 0.5.0

package/src/modes/components/tool-execution.ts

@@ -129,6 +129,21 @@ function stabilizeStreamingPreviews(previews: PerFileDiffPreview[]): PerFileDiff
 	return changed ? next : previews;
 }
 
+function previewsAreEqual(a: PerFileDiffPreview[] | undefined, b: PerFileDiffPreview[]): boolean {
+	return (
+		a?.length === b.length &&
+		a.every((preview, index) => {
+			const next = b[index];
+			return (
+				preview.path === next?.path &&
+				preview.diff === next.diff &&
+				preview.error === next.error &&
+				preview.firstChangedLine === next.firstChangedLine
+			);
+		})
+	);
+}
+
 function isEditLikeToolName(toolName: string): boolean {
 	return toolName === "edit" || toolName === "apply_patch";
 }
@@ -144,6 +159,8 @@ export interface ToolExecutionOptions {
 	editFuzzyThreshold?: number;
 	editAllowFuzzy?: boolean;
 	hashlineAutoDropPureInsertDuplicates?: boolean;
+	/** Internal observer for visible asynchronous renderer mutations. */
+	onVisibleTranscriptMutation?: () => void;
 }
 
 export interface ToolExecutionHandle {
@@ -168,6 +185,11 @@ export interface ToolExecutionHandle {
 	 * back to {@link setExpanded}.
 	 */
 	setManuallyExpanded?(expanded: boolean): void;
+	/**
+	 * Internal capability for dispatchers that need exact synchronous visible-output
+	 * detection. Optional so existing structural handles remain source compatible.
+	 */
+	consumeVisibleTranscriptChange?(): boolean;
 }
 
 /**
@@ -213,8 +235,11 @@ export class ToolExecutionComponent extends Container {
 	#argsIdentityVersion = 0;
 	#lastArgsReference: any;
 	#shareArgsWithRenderer = false;
-	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
-	#convertedImages: Map<number, { data: string; mimeType: string }> = new Map();
+	// Cached converted images for Kitty protocol (which requires PNG), keyed by index and source.
+	#convertedImages: Map<number, { data: string; mimeType: string; source: string }> = new Map();
+	#imageConversionGenerations = new Map<number, number>();
+	#imageConversionsInFlight = new Map<number, string>();
+
 	// Spinner animation for partial task results
 	#spinnerFrame?: number;
 	#spinnerAnimation?: AnimationRegistration;
@@ -229,6 +254,10 @@ export class ToolExecutionComponent extends Container {
 		expanded: false,
 		isPartial: true,
 	};
+	#onVisibleTranscriptMutation?: () => void;
+	#visibleTranscriptChanged = false;
+	#visibleProjection = "";
+	#disposed = false;
 
 	constructor(
 		toolName: string,
@@ -246,6 +275,8 @@ export class ToolExecutionComponent extends Container {
 		this.#editFuzzyThreshold = options.editFuzzyThreshold;
 		this.#editAllowFuzzy = options.editAllowFuzzy;
 		this.#hashlineAutoDropPureInsertDuplicates = options.hashlineAutoDropPureInsertDuplicates;
+		this.#onVisibleTranscriptMutation = options.onVisibleTranscriptMutation;
+
 		this.#tool = tool;
 		this.#ui = ui;
 		this.#cwd = cwd;
@@ -273,18 +304,23 @@ export class ToolExecutionComponent extends Container {
 		this.#editMode = resolveEditModeForTool(toolName, tool);
 
 		this.#updateDisplay();
+		this.#visibleProjection = this.#captureLogicalVisibleProjection();
+
 		void this.#runPreviewDiff();
 	}
 
 	updateArgs(args: any, _toolCallId?: string): void {
+		const argsChanged = !Bun.deepEquals(this.#args, args);
+		if (!argsChanged && !this.#editMode) return;
 		if (args !== this.#lastArgsReference) {
 			this.#lastArgsReference = args;
 			this.#argsIdentityVersion += 1;
 		}
-		this.#args = this.#shareArgsWithRenderer ? args : cloneToolArgs(args);
+		this.#args = argsChanged ? (this.#shareArgsWithRenderer ? args : cloneToolArgs(args)) : this.#args;
 		this.#updateSpinnerAnimation();
 		void this.#runPreviewDiff();
 		this.#updateDisplay();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	/**
@@ -295,6 +331,8 @@ export class ToolExecutionComponent extends Container {
 		this.#argsComplete = true;
 		this.#updateSpinnerAnimation();
 		void this.#runPreviewDiff();
+		this.#updateDisplay();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	async #runPreviewDiff(): Promise<void> {
@@ -338,14 +376,17 @@ export class ToolExecutionComponent extends Container {
 				hashlineAutoDropPureInsertDuplicates: this.#hashlineAutoDropPureInsertDuplicates,
 				isStreaming,
 			});
-			if (controller.signal.aborted) return;
+			if (this.#disposed || controller.signal.aborted) return;
 			if (previews) {
-				this.#editDiffPreview = isStreaming ? stabilizeStreamingPreviews(previews) : previews;
+				const nextPreview = isStreaming ? stabilizeStreamingPreviews(previews) : previews;
+				const changed = !previewsAreEqual(this.#editDiffPreview, nextPreview);
+				this.#editDiffPreview = nextPreview;
 				this.#updateDisplay();
 				this.#ui.requestRender();
+				if (changed) this.#markVisibleMutationIfChanged(true);
 			}
 		} catch (err) {
-			if (controller.signal.aborted) return;
+			if (this.#disposed || controller.signal.aborted) return;
 			logger.warn("Edit preview diff failed", { tool: this.#toolName, error: String(err) });
 		}
 	}
@@ -359,8 +400,10 @@ export class ToolExecutionComponent extends Container {
 		isPartial = false,
 		_toolCallId?: string,
 	): void {
+		if (this.#isPartial === isPartial && Bun.deepEquals(this.#result, result)) return;
 		this.#textOutputCache = undefined;
 		this.#result = result;
+		this.#invalidateStaleKittyConversions();
 		this.#isPartial = isPartial;
 		// When tool is complete, ensure args are marked complete so spinner stops
 		if (!isPartial) {
@@ -370,6 +413,7 @@ export class ToolExecutionComponent extends Container {
 		this.#updateDisplay();
 		// Convert non-PNG images to PNG for Kitty protocol (async)
 		this.#maybeConvertImagesForKitty();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	/**
@@ -383,40 +427,101 @@ export class ToolExecutionComponent extends Container {
 		return [...contentImages, ...detailImages];
 	}
 
-	/**
-	 * Convert non-PNG images to PNG for Kitty graphics protocol.
-	 * Kitty requires PNG format (f=100), so JPEG/GIF/WebP won't display.
-	 */
-	#maybeConvertImagesForKitty(): void {
-		// Only needed for Kitty protocol
-		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
-		if (!this.#result) return;
-
-		const imageBlocks = this.#getAllImageBlocks();
+	#imageSource(image: { data?: string; mimeType?: string }): string | undefined {
+		return image.data && image.mimeType ? `${image.mimeType}\u0000${image.data}` : undefined;
+	}
 
-		for (let i = 0; i < imageBlocks.length; i++) {
-			const img = imageBlocks[i];
-			if (!img.data || !img.mimeType) continue;
-			// Skip if already PNG or already converted
-			if (img.mimeType === "image/png") continue;
-			if (this.#convertedImages.has(i)) continue;
+	#invalidateStaleKittyConversions(): void {
+		const images = this.#getAllImageBlocks();
+		const indices = new Set<number>();
+		for (let index = 0; index < images.length; index++) {
+			const source = this.#imageSource(images[index]);
+			if (!source) continue;
+			indices.add(index);
+			if (this.#convertedImages.get(index)?.source !== source) this.#convertedImages.delete(index);
+			if (this.#imageConversionsInFlight.get(index) !== source) {
+				this.#imageConversionsInFlight.delete(index);
+				this.#imageConversionGenerations.set(index, (this.#imageConversionGenerations.get(index) ?? 0) + 1);
+			}
+		}
+		for (const index of this.#convertedImages.keys()) {
+			if (!indices.has(index)) this.#convertedImages.delete(index);
+		}
+		for (const index of this.#imageConversionsInFlight.keys()) {
+			if (!indices.has(index)) {
+				this.#imageConversionsInFlight.delete(index);
+				this.#imageConversionGenerations.set(index, (this.#imageConversionGenerations.get(index) ?? 0) + 1);
+			}
+		}
+	}
 
-			// Convert async - catch errors from processing
-			const index = i;
-			new Bun.Image(Buffer.from(img.data, "base64"))
+	/** Convert non-PNG images to PNG for Kitty graphics protocol. */
+	#maybeConvertImagesForKitty(): void {
+		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
+		for (const [index, image] of this.#getAllImageBlocks().entries()) {
+			const source = this.#imageSource(image);
+			if (!source || image.mimeType === "image/png") continue;
+			if (
+				this.#convertedImages.get(index)?.source === source ||
+				this.#imageConversionsInFlight.get(index) === source
+			)
+				continue;
+			const generation = this.#imageConversionGenerations.get(index) ?? 0;
+			this.#imageConversionsInFlight.set(index, source);
+			new Bun.Image(Buffer.from(image.data!, "base64"))
 				.png()
 				.toBase64()
 				.then(data => {
-					this.#convertedImages.set(index, { data, mimeType: "image/png" });
+					if (
+						this.#disposed ||
+						this.#imageConversionGenerations.get(index) !== generation ||
+						this.#imageConversionsInFlight.get(index) !== source ||
+						this.#imageSource(this.#getAllImageBlocks()[index] ?? {}) !== source
+					)
+						return;
+					this.#imageConversionsInFlight.delete(index);
+					this.#convertedImages.set(index, { data, mimeType: "image/png", source });
 					this.#updateDisplay();
 					this.#ui.requestRender();
+					this.#markVisibleMutationIfChanged(true);
 				})
 				.catch(() => {
-					// Ignore conversion failures - display will use original image format
+					if (
+						this.#disposed ||
+						this.#imageConversionGenerations.get(index) !== generation ||
+						this.#imageConversionsInFlight.get(index) !== source
+					)
+						return;
+					this.#imageConversionsInFlight.delete(index);
 				});
 		}
 	}
 
+	#captureLogicalVisibleProjection(): string {
+		return this.render(10_000).join("\n");
+	}
+
+	#markVisibleMutationIfChanged(notify = false): void {
+		const projection = this.#captureLogicalVisibleProjection();
+		if (projection === this.#visibleProjection) return;
+		this.#visibleProjection = projection;
+		this.#markVisibleMutation(notify);
+	}
+
+	#markVisibleMutation(notify = false): void {
+		if (notify) {
+			this.#onVisibleTranscriptMutation?.();
+			return;
+		}
+		this.#visibleTranscriptChanged = true;
+	}
+
+	consumeVisibleTranscriptChange(): boolean {
+		const changed = this.#visibleTranscriptChanged;
+		this.#visibleTranscriptChanged = false;
+		return changed;
+	}
+
 	/**
 	 * Start or stop spinner animation based on whether this is a partial task result.
 	 */
@@ -430,6 +535,7 @@ export class ToolExecutionComponent extends Container {
 		const needsSpinner = isStreamingArgs || isPartialTask;
 		if (needsSpinner && !this.#spinnerAnimation) {
 			this.#spinnerAnimation = registerAnimationCallback(() => {
+				if (this.#disposed) return;
 				const frameCount = theme.spinnerFrames.length;
 				if (frameCount === 0) return;
 				this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
@@ -456,6 +562,11 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	override dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#imageConversionGenerations.clear();
+		this.#imageConversionsInFlight.clear();
+		this.#convertedImages.clear();
 		this.stopAnimation();
 		super.dispose();
 	}

package/src/modes/components/tool-status-header.ts

@@ -3,8 +3,12 @@ import * as fs from "node:fs";
 import { type Component, truncateToWidth, visibleWidth } from "@sayknow-cli/tui";
 import { formatCount, getProjectDir } from "@sayknow-cli/utils";
 import { $ } from "bun";
-import type { AppKeybinding, KeybindingsManager } from "../../config/keybindings";
-import { KEYBINDINGS } from "../../config/keybindings";
+import {
+	type AppKeybinding,
+	KEYBINDINGS,
+	type KeybindingsManager,
+	type KeyDisplayContext,
+} from "../../config/keybindings";
 import { settings } from "../../config/settings";
 import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
@@ -46,6 +50,7 @@ export interface StatusLineSettings {
 	previewHighlightSegment?: StatusLineSegmentId;
 	showHookStatus?: boolean;
 	showSkillHud?: boolean;
+	showActionHints?: boolean;
 	sessionAccent?: boolean;
 	maxRows?: number;
 }
@@ -55,6 +60,7 @@ export interface StatusLineComponentOptions {
 	actionRegistry?: ActionRegistry<void>;
 	getKeybindings?: () => KeybindingsManager;
 	focusDomain?: FocusDomain;
+	keyDisplayContext?: KeyDisplayContext;
 }
 
 export interface StatusLineActionHint {
@@ -64,16 +70,13 @@ export interface StatusLineActionHint {
 
 const ACTION_HINT_PRIORITY: readonly AppKeybinding[] = [
 	"app.message.sendNow",
-	"app.message.queue",
 	"app.message.followUp",
+	"app.message.queue",
 	"app.message.dequeue",
 	"app.commandPalette.open",
 	"app.plan.toggle",
 	"app.mode.cycle",
-	"app.thinking.cycle",
-	"app.model.select",
 	"app.model.cycleForward",
-	"app.history.search",
 	"app.session.togglePath",
 	"app.session.toggleSort",
 	"app.session.rename",
@@ -92,6 +95,7 @@ export function getAvailableActionHints(
 	getKeybindings: (() => KeybindingsManager) | undefined,
 	width: number,
 	domain: FocusDomain = "composer",
+	keyDisplayContext?: KeyDisplayContext,
 ): StatusLineActionHint[] {
 	if (!actionRegistry || !getKeybindings || width <= 0) return [];
 	const keybindings = getKeybindings();
@@ -108,7 +112,9 @@ export function getAvailableActionHints(
 		if (!(bindingId in KEYBINDINGS)) continue;
 		const keys = keybindings.getKeys(bindingId);
 		if (keys.length === 0) continue;
-		const content = theme.fg("dim", keybindings.getDisplayString(bindingId)) + theme.fg("muted", ` ${action.title}`);
+		const content =
+			theme.fg("dim", keybindings.getDisplayString(bindingId, keyDisplayContext)) +
+			theme.fg("muted", ` ${action.title}`);
 		const nextWidth = visibleWidth(content) + (selected.length === 0 ? 0 : 3);
 		if (used + nextWidth > width) break;
 		selected.push({ id: action.id, content });
@@ -160,6 +166,7 @@ export class StatusLineComponent implements Component {
 	#actionRegistry: ActionRegistry<void> | undefined;
 	#getKeybindings: (() => KeybindingsManager) | undefined;
 	#focusDomain: FocusDomain;
+	#keyDisplayContext: KeyDisplayContext | undefined;
 
 	#resolvedSettingsCache:
 		| (Required<Pick<StatusLineSettings, "leftSegments" | "rightSegments" | "separator" | "segmentOptions">> &
@@ -199,6 +206,7 @@ export class StatusLineComponent implements Component {
 			separator: settings.get("statusLine.separator"),
 			showHookStatus: settings.get("statusLine.showHookStatus"),
 			showSkillHud: settings.get("statusLine.showSkillHud"),
+			showActionHints: settings.get("statusLine.showActionHints"),
 			segmentOptions: settings.getGroup("statusLine").segmentOptions,
 			sessionAccent: settings.get("statusLine.sessionAccent"),
 			maxRows: settings.get("statusLine.maxRows"),
@@ -207,6 +215,7 @@ export class StatusLineComponent implements Component {
 		this.#actionRegistry = options.actionRegistry;
 		this.#getKeybindings = options.getKeybindings;
 		this.#focusDomain = options.focusDomain ?? "composer";
+		this.#keyDisplayContext = options.keyDisplayContext;
 	}
 
 	updateSettings(settings: StatusLineSettings): void {
@@ -791,7 +800,16 @@ export class StatusLineComponent implements Component {
 		}
 
 		const right: string[] = [];
-		const actionHints = getAvailableActionHints(this.#actionRegistry, this.#getKeybindings, width, this.#focusDomain);
+		const actionHints =
+			effectiveSettings.showActionHints === false
+				? []
+				: getAvailableActionHints(
+						this.#actionRegistry,
+						this.#getKeybindings,
+						width,
+						this.#focusDomain,
+						this.#keyDisplayContext,
+					);
 		for (const segId of effectiveSettings.rightSegments) {
 			const rendered = renderSegment(segId, ctx);
 			if (rendered.visible && rendered.content) {

package/src/modes/components/welcome.ts

@@ -1,6 +1,7 @@
 import { type Component, padding, TERMINAL, truncateToWidth, visibleWidth } from "@sayknow-cli/tui";
 import { APP_NAME } from "@sayknow-cli/utils";
 import { formatBuildLabel } from "../../build-metadata";
+import { formatKeyHint, type KeyDisplayContext } from "../../config/keybindings";
 import { t } from "../../i18n";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
 
@@ -20,28 +21,31 @@ export interface WelcomeComponentOptions {
 	getViewportRows?: () => number | undefined;
 	getReservedBottomRows?: (termWidth: number) => number;
 	changelogMarkdown?: string;
+	rightGutterWidth?: number;
 	collapseChangelog?: boolean;
 	buildLabel?: string;
+	keyDisplayContext?: KeyDisplayContext;
 }
 
 const WELCOME_STATIC_RIGHT_ROWS_EXCLUDING_DYNAMIC_SECTIONS = 15;
 const DEFAULT_WHATS_NEW_ROWS = 3;
 const MAX_WHATS_NEW_ROWS = 12;
-const NEWLINE_FLOW_KEY =
-	process.platform === "win32" ? { key: "alt+enter", label: "newline" } : { key: "ctrl+j", label: "newline" };
-
-const FLOW_KEY_ITEMS: ReadonlyArray<{ key: string; label: string }> = [
-	{ key: "/", label: "commands" },
-	{ key: "#", label: "actions" },
-	{ key: "!", label: "shell" },
-	{ key: "$", label: "python" },
-	{ key: "?", label: "keymap" },
-	{ key: "ctrl+l", label: "model" },
-	{ key: "shift+tab", label: "reasoning" },
-	{ key: "tab", label: "complete" },
-	NEWLINE_FLOW_KEY,
-	{ key: "ctrl+c", label: "clear" },
-];
+
+function flowKeyItems(context: KeyDisplayContext): ReadonlyArray<{ key: string; label: string }> {
+	const newlineKey = context.platform === "win32" ? "alt+enter" : "ctrl+j";
+	return [
+		{ key: "/", label: "commands" },
+		{ key: "#", label: "actions" },
+		{ key: "!", label: "shell" },
+		{ key: "$", label: "python" },
+		{ key: "?", label: "keymap" },
+		{ key: "ctrl+l", label: "model" },
+		{ key: "shift+tab", label: "reasoning" },
+		{ key: "tab", label: "complete" },
+		{ key: newlineKey, label: "newline" },
+		{ key: "ctrl+c", label: "clear" },
+	];
+}
 
 /**
  * Sayknow-CLI launch surface: a blue-gradient SAYKNOW wordmark, compact
@@ -109,7 +113,8 @@ export class WelcomeComponent implements Component {
 	}
 
 	render(termWidth: number): string[] {
-		const boxWidth = Math.max(0, termWidth);
+		const rightGutterWidth = this.#rightGutterWidth(termWidth);
+		const boxWidth = Math.max(0, termWidth - rightGutterWidth);
 		if (boxWidth < 4) {
 			return [];
 		}
@@ -264,7 +269,7 @@ export class WelcomeComponent implements Component {
 			lines.push(tl + titleStyled + theme.fg("dim", hChar.repeat(afterTitle)) + tr);
 		}
 		if (outputRows === 1) {
-			return lines;
+			return this.#withRightGutter(lines, rightGutterWidth);
 		}
 
 		if (showRightColumn) {
@@ -292,7 +297,7 @@ export class WelcomeComponent implements Component {
 			lines.push(bl + h.repeat(leftCol) + br);
 		}
 
-		return lines;
+		return this.#withRightGutter(lines, rightGutterWidth);
 	}
 
 	/** Center text within a given width */
@@ -314,6 +319,19 @@ export class WelcomeComponent implements Component {
 		}
 		return str + padding(width - visLen);
 	}
+	#rightGutterWidth(termWidth: number): number {
+		const configured = this.options.rightGutterWidth ?? 0;
+		if (!Number.isFinite(configured) || configured <= 0) return 0;
+		const gutterWidth = Math.floor(configured);
+		return Math.min(gutterWidth, Math.max(0, termWidth - 4));
+	}
+
+	#withRightGutter(lines: string[], rightGutterWidth: number): string[] {
+		if (rightGutterWidth <= 0) return lines;
+		const gutter = padding(rightGutterWidth);
+		return lines.map(line => line + gutter);
+	}
+
 	#targetRows(termWidth: number): number | undefined {
 		const viewportRows = this.options.getViewportRows?.();
 		if (typeof viewportRows !== "number" || !Number.isFinite(viewportRows) || viewportRows <= 0) {
@@ -347,7 +365,8 @@ export class WelcomeComponent implements Component {
 	}
 
 	#flowKeyItemText(item: { key: string; label: string }): string {
-		return `${theme.fg("dim", item.key)}${theme.fg("muted", ` ${this.#flowKeyLabel(item.label)}`)}`;
+		const context = this.options.keyDisplayContext ?? { platform: process.platform };
+		return `${theme.fg("dim", formatKeyHint(item.key, context))}${theme.fg("muted", ` ${this.#flowKeyLabel(item.label)}`)}`;
 	}
 
 	#flowKeyLabel(label: string): string {
@@ -376,7 +395,7 @@ export class WelcomeComponent implements Component {
 		const separator = ` ${theme.fg("dim", "·")} `;
 		const rows: string[] = [];
 		let current = "";
-		for (const item of FLOW_KEY_ITEMS) {
+		for (const item of flowKeyItems(this.options.keyDisplayContext ?? { platform: process.platform })) {
 			const segment = this.#flowKeyItemText(item);
 			const next = current ? `${current}${separator}${segment}` : segment;
 			if (current && visibleWidth(next) > contentWidth) {
@@ -395,7 +414,7 @@ export class WelcomeComponent implements Component {
 		const rowLimit = Math.max(1, Math.floor(maxRows));
 		if (rows.length <= rowLimit) return rows;
 		if (rowLimit === 1) {
-			const firstItem = FLOW_KEY_ITEMS[0];
+			const firstItem = flowKeyItems(this.options.keyDisplayContext ?? { platform: process.platform })[0];
 			const firstSegment = firstItem ? this.#flowKeyItemText(firstItem) : theme.fg("dim", "keys");
 			return [this.#fitToWidth(` ${firstSegment} ${theme.fg("dim", "· … ")}${theme.bold("/help")}`, width)];
 		}
@@ -679,8 +698,16 @@ function gradientLogo(lines: readonly string[], phase = 0, shine?: ShineConfig):
 
 /** Total length of the intro animation. */
 const INTRO_MS = 3000;
-/** Render cadence during the intro (~30fps). */
-const INTRO_TICK_MS = 33;
+/** Resolve the intro cadence without making tests mutate global process state. */
+export function resolveWelcomeIntroTickMs(
+	platform: NodeJS.Platform = process.platform,
+	tmux = process.env.TMUX,
+): number {
+	return platform === "win32" && tmux ? 100 : 33;
+}
+
+/** Render at 30fps directly, but cap native Windows multiplexers at 10fps to avoid ConPTY output backpressure. */
+const INTRO_TICK_MS = resolveWelcomeIntroTickMs();
 /** Number of full gradient rotations the sweep performs before settling. */
 const INTRO_SWEEPS = 2.5;
 /** Number of times the shine highlight crosses the diagonal across the intro. */