@timurproko/a1 0.2.5-dev.683 → 0.2.5-dev.704

package/dist/integrations/pi/components/upstream/components/session-selector.js

@@ -2,20 +2,26 @@
  * Provenance: @earendil-works/pi-coding-agent 1.0.4 (MIT), commit 7c10bd4337495ee613f2224843ecdf349b80d1df,
  * packages/coding-agent/src/modes/interactive/components/session-selector.ts.
  * Modifications: Source-synchronized session selector port: preserve threaded/current/all scope,
- * search, sort, named/path filters, rename, delete confirmation, active-session protection, loading
- * progress, cancellation, focus, and disposal while remapping public helpers, owned keybindings/theme,
- * canonical path handling, and the shared bare-A1 modal shortcut row and compact padded modal frame.
- * Deviations: owned-modal-shortcut-hints.
+ * search, sort, named/path filters, rename, delete confirmation, active-session protection,
+ * progressive partial results, cancellation, focus, and disposal while remapping public helpers, owned
+ * keybindings/theme, canonical path handling, reverse-Tab scope cycling, and the shared bare-A1 modal
+ * frame with standalone title, standard outer rules, stable filter/status row, progressive result
+ * paging, aligned result columns, Session Tree selection roles, quiet in-field query syntax guidance,
+ * and one-line bottom dynamic feedback and searchable-dialog shortcut footer. Selected session rows
+ * use the blue selection surface, success-green primary title, muted metadata, and ordinary text
+ * weight.
+ * Deviations: owned-modal-shortcut-hints, owned-resume-session-dialog,
+ * owned-standard-dialog-selection.
  */
 import { spawnSync } from "node:child_process";
 import { existsSync, realpathSync } from "node:fs";
 import { unlink } from "node:fs/promises";
 import * as os from "node:os";
-import { Container, getKeybindings, Input, Spacer, Text, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { Container, getKeybindings, Input, matchesKey, sliceByColumn, Spacer, Text, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
 import { KeybindingsManager } from "../adjacent/core/keybindings.js";
 import { DynamicBorder } from "../../../startup-public.js";
 import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
-import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
+import { DIALOG_CLOSE_SHORTCUT_HINT, piTheme, renderPiModalShortcutHints } from "../../theme.js";
 const theme = new Proxy({}, {
     get(_target, property) {
         const active = piTheme();
@@ -29,6 +35,16 @@ function keyText(keybinding, keybindings) {
 function shortcutHint(keybinding, action, keybindings) {
     return { key: keyText(keybinding, keybindings), action };
 }
+/** Keep the canonical close control complete while clipping preceding state-specific guidance. */
+function withCloseHint(content, width) {
+    const close = renderPiModalShortcutHints([DIALOG_CLOSE_SHORTCUT_HINT]);
+    const closeWidth = visibleWidth(close);
+    if (width <= closeWidth)
+        return truncateToWidth(close, width, "");
+    const bodyWidth = Math.max(0, width - closeWidth - 2);
+    const body = truncateToWidth(content, bodyWidth, "…");
+    return body.length === 0 ? close : `${body}  ${close}`;
+}
 import { filterAndSortSessions, hasSessionName } from "./session-selector-search.js";
 function shortenPath(path) {
     const home = os.homedir();
@@ -59,6 +75,27 @@ function formatSessionDate(date) {
         return `${Math.floor(diffDays / 30)}mo`;
     return `${Math.floor(diffDays / 365)}y`;
 }
+function fitToWidth(value, width, ellipsis = "") {
+    const available = Math.max(0, width);
+    const clipped = truncateToWidth(value, available, ellipsis);
+    return `${clipped}${" ".repeat(Math.max(0, available - visibleWidth(clipped)))}`;
+}
+function fitPathToWidth(value, width, preserveTail) {
+    if (!preserveTail || visibleWidth(value) <= width)
+        return fitToWidth(value, width, "…");
+    const tailWidth = Math.max(0, width - 1);
+    const tail = sliceByColumn(value, Math.max(0, visibleWidth(value) - tailWidth), tailWidth, true);
+    return fitToWidth(`…${tail}`, width);
+}
+function renderSelectedRow(value) {
+    const marker = "\u0000";
+    const wrapper = theme.bg("selectedBg", marker);
+    const markerIndex = wrapper.indexOf(marker);
+    const on = wrapper.slice(0, markerIndex);
+    const off = wrapper.slice(markerIndex + marker.length);
+    const reasserted = value.replace(/\u001b\[[0-?]*[ -/]*m/gu, sequence => `${sequence}${on}`);
+    return `${on}${reasserted}${off}`;
+}
 function canonicalizePath(path) {
     if (!path)
         return path;
@@ -75,8 +112,6 @@ class SessionSelectorHeader {
     nameFilter;
     requestRender;
     keybindings;
-    loading = false;
-    loadProgress = null;
     showPath = false;
     confirmingDeletePath = null;
     statusMessage = null;
@@ -98,14 +133,6 @@ class SessionSelectorHeader {
     setNameFilter(nameFilter) {
         this.nameFilter = nameFilter;
     }
-    setLoading(loading) {
-        this.loading = loading;
-        // Progress is scoped to the current load; clear whenever the loading state is set
-        this.loadProgress = null;
-    }
-    setProgress(loaded, total) {
-        this.loadProgress = { loaded, total };
-    }
     setShowPath(showPath) {
         this.showPath = showPath;
     }
@@ -134,64 +161,54 @@ class SessionSelectorHeader {
     }
     invalidate() { }
     render(width) {
-        const title = this.scope === "current" ? "Resume Session (Current Folder)" : "Resume Session (All)";
-        const leftText = theme.bold(title);
-        const sortLabel = this.sortMode === "threaded" ? "Threaded" : this.sortMode === "recent" ? "Recent" : "Fuzzy";
+        const title = theme.fg("accent", theme.bold("Resume Session"));
+        const scopeText = theme.fg("muted", "Filter: ")
+            + theme.fg(this.scope === "current" ? "accent" : "dim", "current")
+            + theme.fg("muted", " | ")
+            + theme.fg(this.scope === "all" ? "accent" : "dim", "all");
+        const nameText = theme.fg("muted", "Name: ") + theme.fg("accent", this.nameFilter);
+        const sortLabel = this.sortMode === "relevance" ? "fuzzy" : this.sortMode;
         const sortText = theme.fg("muted", "Sort: ") + theme.fg("accent", sortLabel);
-        const nameLabel = this.nameFilter === "all" ? "All" : "Named";
-        const nameText = theme.fg("muted", "Name: ") + theme.fg("accent", nameLabel);
-        let scopeText;
-        if (this.loading) {
-            const progressText = this.loadProgress ? `${this.loadProgress.loaded}/${this.loadProgress.total}` : "...";
-            scopeText = `${theme.fg("muted", "○ Current Folder | ")}${theme.fg("accent", `Loading ${progressText}`)}`;
-        }
-        else if (this.scope === "current") {
-            scopeText = `${theme.fg("accent", "◉ Current Folder")}${theme.fg("muted", " | ○ All")}`;
-        }
-        else {
-            scopeText = `${theme.fg("muted", "○ Current Folder | ")}${theme.fg("accent", "◉ All")}`;
-        }
-        const rightText = truncateToWidth(`${scopeText}  ${nameText}  ${sortText}`, width, "");
-        const availableLeft = Math.max(0, width - visibleWidth(rightText) - 1);
-        const left = truncateToWidth(leftText, availableLeft, "");
-        const spacing = Math.max(0, width - visibleWidth(left) - visibleWidth(rightText));
-        // Build hint lines - changes based on state (all branches truncate to width)
-        let hintLine1;
-        let hintLine2;
+        const status = `${scopeText}  ${nameText}  ${sortText}`;
+        return [truncateToWidth(title, width, ""), truncateToWidth(status, width, "")];
+    }
+    renderFooter(width) {
         if (this.confirmingDeletePath !== null) {
             const confirmHint = theme.fg("error", "Delete session? ") + renderPiModalShortcutHints([
                 shortcutHint("tui.select.confirm", "confirm", this.keybindings),
-                shortcutHint("tui.select.cancel", "cancel", this.keybindings),
             ]);
-            hintLine1 = truncateToWidth(confirmHint, width, "…");
-            hintLine2 = "";
+            return [withCloseHint(confirmHint, width)];
         }
-        else if (this.statusMessage) {
+        if (this.statusMessage) {
             const color = this.statusMessage.type === "error" ? "error" : "accent";
-            hintLine1 = theme.fg(color, truncateToWidth(this.statusMessage.message, width, "…"));
-            hintLine2 = "";
-        }
-        else {
-            const pathState = this.showPath ? "(on)" : "(off)";
-            const hint1 = renderPiModalShortcutHints([
-                shortcutHint("tui.input.tab", "scope", this.keybindings),
-                { action: "re:<pattern> regex" },
-                { action: '"phrase" exact' },
-            ]);
-            const hint2Parts = [
-                shortcutHint("app.session.toggleSort", "sort", this.keybindings),
-                shortcutHint("app.session.toggleNamedFilter", "named", this.keybindings),
-                shortcutHint("app.session.delete", "delete", this.keybindings),
-                shortcutHint("app.session.togglePath", `path ${pathState}`, this.keybindings),
-            ];
-            if (this.showRenameHint) {
-                hint2Parts.push(shortcutHint("app.session.rename", "rename", this.keybindings));
-            }
-            const hint2 = renderPiModalShortcutHints(hint2Parts);
-            hintLine1 = truncateToWidth(hint1, width, "…");
-            hintLine2 = truncateToWidth(hint2, width, "…");
-        }
-        return [`${left}${" ".repeat(spacing)}${rightText}`, hintLine1, hintLine2];
+            return [withCloseHint(theme.fg(color, this.statusMessage.message), width)];
+        }
+        const pathState = this.showPath ? "(on)" : "(off)";
+        const hints = [
+            { key: "Type", action: "search" },
+            { key: "↑↓", action: "navigate" },
+            shortcutHint("tui.select.confirm", "select", this.keybindings),
+            shortcutHint("tui.input.tab", "scope", this.keybindings),
+            shortcutHint("app.session.toggleSort", "sort", this.keybindings),
+            shortcutHint("app.session.toggleNamedFilter", "named", this.keybindings),
+            shortcutHint("app.session.delete", "delete", this.keybindings),
+            shortcutHint("app.session.togglePath", `path ${pathState}`, this.keybindings),
+        ];
+        if (this.showRenameHint)
+            hints.push(shortcutHint("app.session.rename", "rename", this.keybindings));
+        return [withCloseHint(renderPiModalShortcutHints(hints), width)];
+    }
+}
+class SessionSelectorFooter {
+    presentation;
+    constructor(presentation) {
+        this.presentation = presentation;
+    }
+    invalidate() {
+        this.presentation.invalidate();
+    }
+    render(width) {
+        return this.presentation.renderFooter(width);
     }
 }
 /**
@@ -300,7 +317,10 @@ class SessionList {
     constructor(sessions, showCwd, sortMode, nameFilter, keybindings, currentSessionFilePath) {
         this.allSessions = sessions;
         this.filteredSessions = [];
-        this.searchInput = new Input();
+        this.searchInput = new Input({
+            placeholder: 're:<pattern> regex, "phrase" exact',
+            placeholderStyle: text => text === "r" ? text : `\u001b[2m${text}\u001b[22m`,
+        });
         this.showCwd = showCwd;
         this.sortMode = sortMode;
         this.nameFilter = nameFilter;
@@ -379,6 +399,11 @@ class SessionList {
             return false;
         return (canonicalizePath(path) ?? path) === this.currentSessionCanonicalPath;
     }
+    sessionPathText(session) {
+        if (this.showPath)
+            return shortenPath(session.path);
+        return this.showCwd && session.cwd ? shortenPath(session.cwd) : "";
+    }
     invalidate() { }
     render(width) {
         const lines = [];
@@ -410,7 +435,18 @@ class SessionList {
         // Calculate visible range with scrolling
         const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredSessions.length - this.maxVisible));
         const endIndex = Math.min(startIndex + this.maxVisible, this.filteredSessions.length);
-        // Render visible sessions (one line each with tree structure)
+        const pathTexts = this.filteredSessions.map((node) => this.sessionPathText(node.session));
+        const longestPath = Math.max(0, ...pathTexts.map((path) => visibleWidth(path)));
+        const countColumnWidth = Math.max(1, ...this.filteredSessions.map((node) => String(node.session.messageCount).length));
+        const ageColumnWidth = Math.max(1, ...this.filteredSessions.map((node) => formatSessionDate(node.session.modified).length));
+        const trailingColumnsWidth = countColumnWidth + 1 + ageColumnWidth;
+        const columnGapWidth = 2;
+        const maxPathColumnWidth = Math.max(0, width - trailingColumnsWidth - columnGapWidth * 2 - 12);
+        const pathColumnWidth = Math.min(longestPath, Math.floor(width * 0.45), maxPathColumnWidth);
+        const metadataWidth = columnGapWidth + trailingColumnsWidth
+            + (pathColumnWidth > 0 ? pathColumnWidth + columnGapWidth : 0);
+        const titleColumnWidth = Math.max(0, width - metadataWidth);
+        // Render visible sessions (one line each with stable title, path, count, and age columns)
         for (let i = startIndex; i < endIndex; i++) {
             const node = this.filteredSessions[i];
             const session = node.session;
@@ -423,23 +459,14 @@ class SessionList {
             const hasName = !!session.name;
             const displayText = session.name ?? session.firstMessage;
             const normalizedMessage = displayText.replace(/[\x00-\x1f\x7f]/g, " ").trim();
-            // Right side: message count and age
             const age = formatSessionDate(session.modified);
             const msgCount = String(session.messageCount);
-            let rightPart = `${msgCount} ${age}`;
-            if (this.showCwd && session.cwd) {
-                rightPart = `${shortenPath(session.cwd)} ${rightPart}`;
-            }
-            if (this.showPath) {
-                rightPart = `${shortenPath(session.path)} ${rightPart}`;
-            }
-            // Cursor
-            const cursor = isSelected ? theme.fg("accent", "› ") : "  ";
-            // Calculate available width for message
+            const pathText = this.sessionPathText(session);
+            // Cursor and title stay inside their column so metadata always begins at one boundary.
+            const cursor = isSelected ? theme.fg("accent", "→ ") : "  ";
             const prefixWidth = visibleWidth(prefix);
-            const rightWidth = visibleWidth(rightPart) + 2; // +2 for spacing
-            const availableForMsg = width - 2 - prefixWidth - rightWidth; // -2 for cursor
-            const truncatedMsg = truncateToWidth(normalizedMessage, Math.max(10, availableForMsg), "…");
+            const availableForMsg = Math.max(0, titleColumnWidth - 2 - prefixWidth);
+            const truncatedMsg = truncateToWidth(normalizedMessage, availableForMsg, "…");
             // Style message
             let messageColor = null;
             if (isConfirmingDelete) {
@@ -451,20 +478,22 @@ class SessionList {
             else if (hasName) {
                 messageColor = "warning";
             }
-            let styledMsg = messageColor ? theme.fg(messageColor, truncatedMsg) : truncatedMsg;
-            if (isSelected) {
-                styledMsg = theme.bold(styledMsg);
-            }
-            // Build line
-            const leftPart = cursor + theme.fg("dim", prefix) + styledMsg;
-            const leftWidth = visibleWidth(leftPart);
-            const spacing = Math.max(1, width - leftWidth - visibleWidth(rightPart));
-            const styledRight = theme.fg(isConfirmingDelete ? "error" : "dim", rightPart);
-            let line = leftPart + " ".repeat(spacing) + styledRight;
-            if (isSelected) {
-                line = theme.bg("selectedBg", line);
-            }
-            lines.push(truncateToWidth(line, width));
+            const styledMsg = isConfirmingDelete
+                ? theme.fg("error", truncatedMsg)
+                : isSelected
+                    ? theme.fg("success", truncatedMsg)
+                    : messageColor
+                        ? theme.fg(messageColor, truncatedMsg)
+                        : truncatedMsg;
+            const metadataColor = isConfirmingDelete ? "error" : isSelected ? "muted" : "dim";
+            const titleColumn = fitToWidth(cursor + theme.fg("dim", prefix) + styledMsg, titleColumnWidth, "…");
+            const pathColumn = pathColumnWidth > 0
+                ? `${theme.fg(metadataColor, fitPathToWidth(pathText, pathColumnWidth, this.showPath))}${" ".repeat(columnGapWidth)}`
+                : "";
+            const countColumn = theme.fg(metadataColor, msgCount.padStart(countColumnWidth));
+            const ageColumn = theme.fg(metadataColor, age.padStart(ageColumnWidth));
+            const fittedLine = fitToWidth(`${titleColumn}${" ".repeat(columnGapWidth)}${pathColumn}${countColumn} ${ageColumn}`, width);
+            lines.push(isSelected ? renderSelectedRow(fittedLine) : fittedLine);
         }
         // Add scroll indicator if needed
         if (startIndex > 0 || endIndex < this.filteredSessions.length) {
@@ -499,7 +528,7 @@ class SessionList {
             // Ignore all other keys while confirming
             return;
         }
-        if (kb.matches(keyData, "tui.input.tab")) {
+        if (matchesKey(keyData, "shift+tab") || kb.matches(keyData, "tui.input.tab")) {
             if (this.onToggleScope) {
                 this.onToggleScope();
             }
@@ -635,6 +664,7 @@ export class SessionSelectorComponent extends Container {
     canRename = true;
     sessionList;
     header;
+    footer;
     keybindings;
     scope = "current";
     sortMode = "threaded";
@@ -665,18 +695,19 @@ export class SessionSelectorComponent extends Container {
     }
     buildBaseLayout(content, options) {
         this.clear();
-        this.addChild(new Spacer(1));
         const showHeader = options?.showHeader ?? true;
         const modalHeader = showHeader
-            ? addPiModalHeader(this, new DynamicBorder((s) => theme.fg("accent", s)), this.header)
+            ? addPiModalHeader(this, new DynamicBorder(), this.header)
             : undefined;
         if (!showHeader)
-            this.addChild(new DynamicBorder((s) => theme.fg("accent", s)));
+            this.addChild(new DynamicBorder());
         this.addChild(new Spacer(1));
         this.addChild(content);
         this.addChild(new Spacer(1));
-        this.addChild(new DynamicBorder((s) => theme.fg("accent", s)));
-        const frame = { topIndex: 1, bottomIndex: this.children.length - 1 };
+        if (showHeader)
+            this.addChild(this.footer);
+        this.addChild(new DynamicBorder());
+        const frame = { topIndex: 0, bottomIndex: this.children.length - 1 };
         if (modalHeader === undefined)
             adoptPiModalFrame(this, frame);
         else
@@ -689,6 +720,7 @@ export class SessionSelectorComponent extends Container {
         this.allSessionsLoader = allSessionsLoader;
         this.requestRender = requestRender;
         this.header = new SessionSelectorHeader(this.scope, this.sortMode, this.nameFilter, this.requestRender, this.keybindings);
+        this.footer = new SessionSelectorFooter(this.header);
         const renameSession = options?.renameSession;
         this.renameSession = renameSession;
         this.canRename = !!renameSession;
@@ -791,7 +823,7 @@ export class SessionSelectorComponent extends Container {
         panel.addChild(new Spacer(1));
         panel.addChild(new Text(renderPiModalShortcutHints([
             shortcutHint("tui.select.confirm", "to save", this.keybindings),
-            shortcutHint("tui.select.cancel", "to cancel", this.keybindings),
+            DIALOG_CLOSE_SHORTCUT_HINT,
         ]), 1, 0));
         this.buildBaseLayout(panel, { showHeader: false });
         this.requestRender();
@@ -837,10 +869,9 @@ export class SessionSelectorComponent extends Container {
             this.allLoad = controller;
         }
         this.header.setScope(scope);
-        this.header.setLoading(true);
         this.requestRender();
         const isActive = () => (scope === "current" ? this.currentLoad : this.allLoad) === controller;
-        const onProgress = (loaded, total, partialSessions) => {
+        const onProgress = (_loaded, _total, partialSessions) => {
             if (!isActive())
                 return;
             if (partialSessions) {
@@ -856,7 +887,6 @@ export class SessionSelectorComponent extends Container {
             }
             if (scope !== this.scope)
                 return;
-            this.header.setProgress(loaded, total);
             this.requestRender();
         };
         try {
@@ -875,7 +905,6 @@ export class SessionSelectorComponent extends Container {
             }
             if (scope !== this.scope)
                 return;
-            this.header.setLoading(false);
             this.sessionList.setSessions(sessions, showCwd);
             this.requestRender();
         }
@@ -893,7 +922,6 @@ export class SessionSelectorComponent extends Container {
             if (scope !== this.scope)
                 return;
             const message = err instanceof Error ? err.message : String(err);
-            this.header.setLoading(false);
             this.header.setStatusMessage({ type: "error", message: `Failed to load sessions: ${message}` }, 4000);
             this.sessionList.setSessions([], showCwd);
             this.requestRender();
@@ -923,7 +951,6 @@ export class SessionSelectorComponent extends Container {
         const sessions = this.scope === "current" ? this.currentSessions : this.allSessions;
         const loading = (this.scope === "current" ? this.currentLoad : this.allLoad) !== null;
         this.header.setScope(this.scope);
-        this.header.setLoading(loading);
         this.sessionList.setSessions(sessions ?? [], this.scope === "all");
         this.requestRender();
         if (sessions === null && !loading)

package/dist/integrations/pi/components/upstream/components/thinking-selector.d.ts

@@ -5,12 +5,16 @@
  * selection, and focus while accepting the active bare-A1 cycle-key label from the shell, styling the
  * title with the established bold semantic accent treatment, placing it directly below the top rule
  * through the shared compact padded modal frame and its muted hint directly below it, deduplicating
- * levels, and rendering aligned muted descriptions after fixed active and bracketed default columns.
- * Bare A1 persists defaults immediately on Space, closes only on Escape, and uses the shared compact
- * semantic shortcut row. All list and border colors use the owned theme and its explicit color mode.
- * The comparison profile retains the public pinned component.
+ * levels, and rendering exclusive radio-style default markers before level names, an item-adjacent
+ * active checkmark, and aligned muted descriptions. Bare A1 persists defaults immediately on Space,
+ * closes through the implicit Ctrl+C-capable selection-cancel action, and uses the shared compact
+ * semantic shortcut row with Type/search guidance without advertising that alias. All list and border
+ * colors use the owned theme and its explicit color mode. Selected rows use the shared bare-A1 blue
+ * selection surface only around the rendered item span, with the existing accent arrow, normal-text
+ * level, and preserved current/default/description roles. The comparison profile retains the public
+ * pinned component.
  * Deviations: owned-modal-shortcut-hints, owned-level-cycle-shortcut, owned-thinking-selector-heading,
- * owned-thinking-selector-controls.
+ * owned-thinking-selector-controls, owned-dialog-ctrl-c-cancel, owned-standard-dialog-selection.
  */
 import { Container, type Focusable, SelectList } from "@earendil-works/pi-tui";
 export type ThinkingSelectorLevel = "off" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max";

package/dist/integrations/pi/components/upstream/components/thinking-selector.js

@@ -5,17 +5,21 @@
  * selection, and focus while accepting the active bare-A1 cycle-key label from the shell, styling the
  * title with the established bold semantic accent treatment, placing it directly below the top rule
  * through the shared compact padded modal frame and its muted hint directly below it, deduplicating
- * levels, and rendering aligned muted descriptions after fixed active and bracketed default columns.
- * Bare A1 persists defaults immediately on Space, closes only on Escape, and uses the shared compact
- * semantic shortcut row. All list and border colors use the owned theme and its explicit color mode.
- * The comparison profile retains the public pinned component.
+ * levels, and rendering exclusive radio-style default markers before level names, an item-adjacent
+ * active checkmark, and aligned muted descriptions. Bare A1 persists defaults immediately on Space,
+ * closes through the implicit Ctrl+C-capable selection-cancel action, and uses the shared compact
+ * semantic shortcut row with Type/search guidance without advertising that alias. All list and border
+ * colors use the owned theme and its explicit color mode. Selected rows use the shared bare-A1 blue
+ * selection surface only around the rendered item span, with the existing accent arrow, normal-text
+ * level, and preserved current/default/description roles. The comparison profile retains the public
+ * pinned component.
  * Deviations: owned-modal-shortcut-hints, owned-level-cycle-shortcut, owned-thinking-selector-heading,
- * owned-thinking-selector-controls.
+ * owned-thinking-selector-controls, owned-dialog-ctrl-c-cancel, owned-standard-dialog-selection.
  */
-import { Container, fuzzyFilter, getKeybindings, Input, Key, matchesKey, SelectList, Spacer, Text, } from "@earendil-works/pi-tui";
+import { Container, fuzzyFilter, getKeybindings, Input, SelectList, Spacer, Text, } from "@earendil-works/pi-tui";
 import { DynamicBorder } from "../../../startup-public.js";
 import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
-import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
+import { DIALOG_CLOSE_SHORTCUT_HINT, piTheme, renderPiModalListRow, renderPiModalShortcutHints } from "../../theme.js";
 const THINKING_SELECT_LIST_LAYOUT = {
     minPrimaryColumnWidth: 12,
     maxPrimaryColumnWidth: 32,
@@ -29,6 +33,25 @@ const LEVEL_DESCRIPTIONS = {
     xhigh: "Extra-high reasoning (~32k tokens)",
     max: "Maximum reasoning",
 };
+class ThinkingSelectListPresentation {
+    list;
+    items;
+    constructor(list, items) {
+        this.list = list;
+        this.items = items;
+    }
+    invalidate() {
+        this.list.invalidate();
+    }
+    handleMouse(event) {
+        return this.list.handleMouse(event);
+    }
+    render(width) {
+        const selected = this.list.getSelectedItem();
+        const selectedIndex = selected === null ? -1 : this.items.findIndex((item) => item.value === selected.value);
+        return this.list.render(width).map((row, index) => renderPiModalListRow(row, width, index === selectedIndex));
+    }
+}
 /** Bare-A1 thinking-level selector with profile-resolved shortcut presentation. */
 export class OwnedThinkingSelectorComponent extends Container {
     searchInput;
@@ -67,15 +90,17 @@ export class OwnedThinkingSelectorComponent extends Container {
         this.searchInput.onSubmit = () => this.selectList.handleInput("\r");
         this.addChild(this.searchInput);
         this.addChild(new Spacer(1));
-        this.selectList = this.buildSelectList(this.allItems, currentLevel);
+        const initialList = this.buildSelectList(this.allItems, currentLevel);
+        this.selectList = initialList.list;
         this.selectListContainer = new Container();
-        this.selectListContainer.addChild(this.selectList);
+        this.selectListContainer.addChild(initialList.presentation);
         this.addChild(this.selectListContainer);
         this.addChild(new Spacer(1));
         this.addChild(new Text(renderPiModalShortcutHints([
+            { key: "Type", action: "search" },
             { key: this.keyDisplayText("tui.select.confirm"), action: "select" },
             { key: "Space", action: "default" },
-            { key: "Esc", action: "close" },
+            DIALOG_CLOSE_SHORTCUT_HINT,
         ]), 0, 0));
         this.addChild(new DynamicBorder((text) => piTheme().fg("border", text)));
         adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
@@ -89,29 +114,43 @@ export class OwnedThinkingSelectorComponent extends Container {
             .join("/");
     }
     buildSelectList(items, preselect) {
+        const theme = piTheme();
         const levelWidth = this.allItems.reduce((widest, item) => Math.max(widest, (item.label ?? item.value).length), 0);
+        const selectedDefaultMarker = theme.fg("accent", "◉");
+        const unselectedDefaultMarker = theme.fg("dim", "○");
         const themedItems = items.map((item) => {
-            const level = (item.label ?? item.value).padEnd(levelWidth);
-            const currentMarker = item.value === this.currentLevel ? ` ${piTheme().fg("success", "✓")}` : "  ";
-            const defaultMarker = item.value === this.defaultThinkingLevel
-                ? ` ${piTheme().fg("muted", "[default]")}`
-                : "          ";
-            const description = item.description ? piTheme().fg("muted", item.description) : "";
-            return { value: item.value, label: `${level}${currentMarker}${defaultMarker} ${description}` };
+            const level = item.label ?? item.value;
+            const isCurrent = item.value === this.currentLevel;
+            const currentMarker = isCurrent ? ` ${theme.fg("success", "✓")}` : "";
+            const statePadding = " ".repeat(levelWidth - level.length + (isCurrent ? 0 : 2));
+            const defaultMarker = item.value === this.defaultThinkingLevel ? selectedDefaultMarker : unselectedDefaultMarker;
+            const description = item.description ? theme.fg("muted", item.description) : "";
+            return { value: item.value, label: `${defaultMarker} ${level}${currentMarker}${statePadding} ${description}` };
         });
         // Invariant: the bare selector uses the owned theme's explicit color mode, not upstream's host detection.
         const list = new SelectList(themedItems, Math.max(1, themedItems.length), {
-            selectedPrefix: text => piTheme().fg("accent", text),
-            selectedText: text => piTheme().fg("accent", text),
-            description: text => piTheme().fg("muted", text),
-            scrollInfo: text => piTheme().fg("muted", text),
-            noMatch: text => piTheme().fg("muted", text),
+            selectedPrefix: text => theme.fg("accent", text),
+            selectedText: text => {
+                const arrowEnd = text.startsWith("→ ") ? 2 : 0;
+                const arrow = arrowEnd === 0 ? "" : theme.fg("accent", text.slice(0, arrowEnd));
+                const marker = text.includes(selectedDefaultMarker) ? selectedDefaultMarker : unselectedDefaultMarker;
+                const markerIndex = text.indexOf(marker, arrowEnd);
+                return markerIndex === -1
+                    ? arrow + theme.fg("text", text.slice(arrowEnd))
+                    : arrow
+                        + theme.fg("text", text.slice(arrowEnd, markerIndex))
+                        + marker
+                        + theme.fg("text", text.slice(markerIndex + marker.length));
+            },
+            description: text => theme.fg("muted", text),
+            scrollInfo: text => theme.fg("muted", text),
+            noMatch: text => theme.fg("muted", text),
         }, THINKING_SELECT_LIST_LAYOUT);
         const currentIndex = themedItems.findIndex((item) => item.value === preselect);
         if (currentIndex !== -1)
             list.setSelectedIndex(currentIndex);
         list.onSelect = (item) => this.onSelect(item.value);
-        return list;
+        return { list, presentation: new ThinkingSelectListPresentation(list, themedItems) };
     }
     applyFilter(query) {
         const filtered = query
@@ -120,8 +159,8 @@ export class OwnedThinkingSelectorComponent extends Container {
         const selectedValue = this.selectList.getSelectedItem()?.value;
         const newList = this.buildSelectList(filtered, selectedValue);
         this.selectListContainer.clear();
-        this.selectListContainer.addChild(newList);
-        this.selectList = newList;
+        this.selectListContainer.addChild(newList.presentation);
+        this.selectList = newList.list;
     }
     handleInput(keyData) {
         const kb = getKeybindings();
@@ -134,7 +173,7 @@ export class OwnedThinkingSelectorComponent extends Container {
             }
             return;
         }
-        if (matchesKey(keyData, Key.escape)) {
+        if (kb.matches(keyData, "tui.select.cancel")) {
             this.onCancel();
             return;
         }