@gajae-code/coding-agent 0.11.1 → 0.11.3

package/src/modes/components/queue-mode-selector.ts

@@ -1,6 +1,5 @@
-import { Container, type SelectItem, SelectList } from "@gajae-code/tui";
-import { getSelectListTheme } from "../../modes/theme/theme";
-import { DynamicBorder } from "./dynamic-border";
+import { Container, type SelectItem, type SelectList } from "@gajae-code/tui";
+import { FramedSelect } from "./chrome";
 
 /**
  * Component that renders a queue mode selector with borders
@@ -24,30 +23,14 @@ export class QueueModeSelectorComponent extends Container {
 			{ value: "all", label: "all", description: "Process all queued messages at once" },
 		];
 
-		// Add top border
-		this.addChild(new DynamicBorder());
-
-		// Create selector
-		this.#selectList = new SelectList(queueModes, 2, getSelectListTheme());
-
-		// Preselect current mode
-		const currentIndex = queueModes.findIndex(item => item.value === currentMode);
-		if (currentIndex !== -1) {
-			this.#selectList.setSelectedIndex(currentIndex);
-		}
-
-		this.#selectList.onSelect = item => {
-			onSelect(item.value as "all" | "one-at-a-time");
-		};
-
-		this.#selectList.onCancel = () => {
-			onCancel();
-		};
-
-		this.addChild(this.#selectList);
-
-		// Add bottom border
-		this.addChild(new DynamicBorder());
+		const framed = FramedSelect(undefined, queueModes, {
+			maxVisible: 2,
+			selectedValue: currentMode,
+			onSelect: item => onSelect(item.value as "all" | "one-at-a-time"),
+			onCancel,
+		});
+		this.#selectList = framed.selectList;
+		this.addChild(framed.container);
 	}
 
 	getSelectList(): SelectList {

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

@@ -0,0 +1,79 @@
+import { Container, matchesKey, type SelectItem, SelectList, Spacer, Text } from "@gajae-code/tui";
+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";
+
+export class QueuePaneComponent extends Container {
+	#selectList: SelectList;
+	#selectedEntry: QueuedMessageEditEntry | undefined;
+	#selectedIndex: number;
+	#onDelete: (entry: QueuedMessageEditEntry, index: number) => void;
+	#onMove: (entry: QueuedMessageEditEntry, index: number, direction: "up" | "down") => void;
+
+	constructor(
+		entries: QueuedMessageEditEntry[],
+		options: {
+			selectedIndex?: number;
+			onDelete: (entry: QueuedMessageEditEntry, index: number) => void;
+			onMove: (entry: QueuedMessageEditEntry, index: number, direction: "up" | "down") => void;
+			onClose: () => void;
+		},
+	) {
+		super();
+		this.#onDelete = options.onDelete;
+		this.#onMove = options.onMove;
+		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 items: SelectItem[] = entries.map((entry, index) => ({
+			value: entry.id,
+			label: `${entry.label} ${index + 1}`,
+			description: entry.text,
+			hint: "Del remove · Ctrl+↑/↓ move",
+		}));
+
+		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 Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.#selectList = new SelectList(items, MAX_VISIBLE_QUEUE_MESSAGES, getSelectListTheme());
+		this.#selectList.onSelectionChange = item => {
+			const index = entries.findIndex(entry => entry.id === item.value);
+			this.#selectedIndex = index === -1 ? this.#selectedIndex : index;
+			this.#selectedEntry = byId.get(item.value);
+		};
+		this.#selectList.setSelectedIndex(this.#selectedIndex);
+		this.#selectList.onCancel = options.onClose;
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "alt+up")) {
+			this.#selectList.handleInput(RAW_UP);
+			return;
+		}
+		if (matchesKey(keyData, "alt+down")) {
+			this.#selectList.handleInput(RAW_DOWN);
+			return;
+		}
+		if (matchesKey(keyData, "ctrl+up") || matchesKey(keyData, "ctrl+shift+up")) {
+			if (this.#selectedEntry) this.#onMove(this.#selectedEntry, this.#selectedIndex, "up");
+			return;
+		}
+		if (matchesKey(keyData, "ctrl+down") || matchesKey(keyData, "ctrl+shift+down")) {
+			if (this.#selectedEntry) this.#onMove(this.#selectedEntry, this.#selectedIndex, "down");
+			return;
+		}
+		if (matchesKey(keyData, "delete")) {
+			if (this.#selectedEntry) this.#onDelete(this.#selectedEntry, this.#selectedIndex);
+			return;
+		}
+		this.#selectList.handleInput(keyData);
+	}
+}

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

@@ -80,6 +80,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	#entries = new Map<string, ReadEntry>();
 	#text: Text;
 	#expanded = false;
+	#manuallyExpanded: boolean | undefined;
 	#showContentPreview: boolean;
 
 	constructor(options: ReadToolGroupOptions = {}) {
@@ -137,7 +138,19 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		this.#updateDisplay();
 	}
 
+	/** 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();
+	}
+
+	/**
+	 * Applies and pins an explicit fold choice for this renderer instance only.
+	 * Transcript rebuilds recreate components from global state and drop this pin.
+	 */
+	setManuallyExpanded(expanded: boolean): void {
+		this.#manuallyExpanded = expanded;
 		this.#expanded = expanded;
 		this.#updateDisplay();
 	}