@timurproko/a1 0.2.4 → 0.2.5-dev.698

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

@@ -1,17 +1,23 @@
 /**
- * Provenance: @earendil-works/pi-coding-agent 1.0.2 (MIT), commit cd32f7725fdbddbaecdff5b1e68491563394e0ca,
+ * Provenance: @earendil-works/pi-coding-agent 1.0.4 (MIT), commit 7c10bd4337495ee613f2224843ecdf349b80d1df,
  * packages/coding-agent/src/modes/interactive/components/tree-selector.ts.
- * Modifications: Source-synchronized tree selector port: preserve filtering, folding, labels, copying,
- * tree navigation, key hints, focus, and viewport behavior while remapping public types/components
- * plus owned keybindings/theme helpers required to avoid the pinned package nested pi-tui singleton;
- * bare A1 uses the shared semantic modal shortcut row and compact padded modal frame.
- * Deviations: owned-modal-shortcut-hints.
+ * Modifications: Port remaps public types/components plus owned keybindings/theme helpers while
+ * preserving tree behavior; bare A1 uses compact modal chrome and label editing, four-mode
+ * Models-style filter status with Tab/Shift+Tab directional cycling and concise all-first presentation
+ * excluding internal bookkeeping, standard search input, blue item-bounded menu-arrow selection that
+ * preserves per-entry semantic foregrounds and has no path bullets, accent entry labels, bracketed
+ * timestamps, and plain label-time status, semantic role colors with session naming for the system
+ * root, standard paging/first-last/non-root containing-branch folding keys with a permanently expanded
+ * system session entry even behind hidden metadata, single-character ellipses on both clipped edges
+ * with bracket-delimiter preservation and selected-fragment highlighting, and Models-ordered semantic
+ * shortcut footers without a redundant select hint.
+ * Deviations: owned-modal-shortcut-hints, owned-session-tree-dialog.
  */
-import { Container, Input, Spacer, sliceByColumn, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+import { Container, Input, matchesKey, Spacer, sliceByColumn, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { DynamicBorder } from "../../../startup-public.js";
 import { KeybindingsManager } from "../adjacent/core/keybindings.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();
@@ -19,7 +25,7 @@ const theme = new Proxy({}, {
         return typeof value === "function" ? value.bind(active) : value;
     },
 });
-const treeKeybindings = KeybindingsManager.create();
+const treeKeybindings = KeybindingsManager.createForOwnedInput();
 function formatKeyText(key) {
     return key
         .split("/")
@@ -57,26 +63,44 @@ function renderHorizontalViewport(rows, width) {
     }
     // Clip only the body; the fixed-width gutter remains visible as navigation context.
     return rows.map((row) => {
-        const line = horizontalScroll > 0
-            ? `${row.gutter}${sliceByColumn(row.body, horizontalScroll, viewportWidth, true)}\x1b[0m`
-            : row.gutter + row.body;
+        if (viewportWidth === 0)
+            return truncateToWidth(row.gutter, width, "");
+        const leftClipped = horizontalScroll > 0;
+        const widthAfterLeftMarker = Math.max(0, viewportWidth - (leftClipped ? 1 : 0));
+        const rightClipped = row.bodyWidth - horizontalScroll > widthAfterLeftMarker;
+        const rightMarkerText = `…${row.rightClipSuffix}`;
+        const rightMarkerWidth = rightClipped ? visibleWidth(rightMarkerText) : 0;
+        const bodyWidth = Math.max(0, widthAfterLeftMarker - rightMarkerWidth);
+        const marker = (text) => row.isSelected
+            ? theme.bg("selectedBg", theme.fg("muted", text))
+            : theme.fg("muted", text);
+        const body = sliceByColumn(row.body, horizontalScroll, bodyWidth, true);
+        const line = `${row.gutter}${leftClipped ? marker("…") : ""}${body}${rightClipped ? marker(rightMarkerText) : ""}\x1b[0m`;
         return truncateToWidth(line, width, "");
     });
 }
+const FILTER_MODES = ["all", "no-tools", "user-only", "labeled-only"];
+const FILTER_LABELS = {
+    all: "all",
+    default: "all",
+    "no-tools": "no tools",
+    "user-only": "user",
+    "labeled-only": "labeled",
+};
 class TreeList {
     flatNodes = [];
     filteredNodes = [];
     selectedIndex = 0;
     currentLeafId;
     maxVisibleLines;
-    filterMode = "default";
+    filterMode = "all";
     searchQuery = "";
     toolCallMap = new Map();
     multipleRoots = false;
     showLabelTimestamps = false;
-    activePathIds = new Set();
     visibleParentMap = new Map();
     visibleChildrenMap = new Map();
+    sessionRootIds = new Set();
     lastSelectedId = null;
     foldedNodes = new Set();
     onSelect;
@@ -86,10 +110,9 @@ class TreeList {
     constructor(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode) {
         this.currentLeafId = currentLeafId;
         this.maxVisibleLines = maxVisibleLines;
-        this.filterMode = initialFilterMode ?? "default";
+        this.filterMode = initialFilterMode && initialFilterMode !== "default" ? initialFilterMode : "all";
         this.multipleRoots = tree.length > 1;
         this.flatNodes = this.flattenTree(tree);
-        this.buildActivePath();
         this.applyFilter();
         // Start with initialSelectedId if provided, otherwise current leaf
         const targetId = initialSelectedId ?? currentLeafId;
@@ -124,29 +147,10 @@ class TreeList {
         // Fallback: last visible entry
         return this.filteredNodes.length - 1;
     }
-    /** Build the set of entry IDs on the path from root to current leaf */
-    buildActivePath() {
-        this.activePathIds.clear();
-        if (!this.currentLeafId)
-            return;
-        // Build a map of id -> entry for parent lookup
-        const entryMap = new Map();
-        for (const flatNode of this.flatNodes) {
-            entryMap.set(flatNode.node.entry.id, flatNode);
-        }
-        // Walk from leaf to root
-        let currentId = this.currentLeafId;
-        while (currentId) {
-            this.activePathIds.add(currentId);
-            const node = entryMap.get(currentId);
-            if (!node)
-                break;
-            currentId = node.node.entry.parentId ?? null;
-        }
-    }
     flattenTree(roots) {
         const result = [];
         this.toolCallMap.clear();
+        this.sessionRootIds.clear();
         const stack = [];
         // Determine which subtrees contain the active leaf (to sort current branch first)
         // Use iterative post-order traversal to avoid stack overflow
@@ -186,8 +190,11 @@ class TreeList {
         }
         while (stack.length > 0) {
             const [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild] = stack.pop();
-            // Extract tool calls from assistant messages for later lookup
+            // Extract structural roots and tool calls from messages for later lookup.
             const entry = node.entry;
+            if (entry.type === "message" && entry.message.role === "system") {
+                this.sessionRootIds.add(entry.id);
+            }
             if (entry.type === "message" && entry.message.role === "assistant") {
                 const content = entry.message.content;
                 if (Array.isArray(content)) {
@@ -266,7 +273,7 @@ class TreeList {
         const searchTokens = this.searchQuery.toLowerCase().split(/\s+/).filter(Boolean);
         this.filteredNodes = this.flatNodes.filter((flatNode) => {
             const entry = flatNode.node.entry;
-            if (entry.type === "usage")
+            if (entry.type === "usage" || entry.type === "model_change" || entry.type === "thinking_level_change")
                 return false;
             const isCurrentLeaf = entry.id === this.currentLeafId;
             // Skip assistant messages with only tool calls (no text) unless error/aborted
@@ -286,8 +293,6 @@ class TreeList {
             const isSettingsEntry = entry.type === "label" ||
                 entry.type === "context_edit" ||
                 entry.type === "custom" ||
-                entry.type === "model_change" ||
-                entry.type === "thinking_level_change" ||
                 entry.type === "session_info";
             switch (this.filterMode) {
                 case "user-only":
@@ -303,11 +308,8 @@ class TreeList {
                     passesFilter = flatNode.node.label !== undefined;
                     break;
                 case "all":
-                    // Show everything
-                    passesFilter = true;
-                    break;
                 default:
-                    // Default mode: hide settings/bookkeeping entries
+                    // Product "all" omits internal settings/bookkeeping entries.
                     passesFilter = !isSettingsEntry;
                     break;
             }
@@ -523,6 +525,9 @@ class TreeList {
     getSearchQuery() {
         return this.searchQuery;
     }
+    getFilterMode() {
+        return this.filterMode;
+    }
     getSelectedNode() {
         return this.filteredNodes[this.selectedIndex]?.node;
     }
@@ -546,31 +551,15 @@ class TreeList {
         }
     }
     getStatusLabels() {
-        let labels = "";
-        switch (this.filterMode) {
-            case "no-tools":
-                labels += " [no-tools]";
-                break;
-            case "user-only":
-                labels += " [user]";
-                break;
-            case "labeled-only":
-                labels += " [labeled]";
-                break;
-            case "all":
-                labels += " [all]";
-                break;
-        }
-        if (this.showLabelTimestamps) {
-            labels += " [+label time]";
-        }
-        return labels;
+        return this.showLabelTimestamps ? " label time" : "";
     }
     render(width) {
         const lines = [];
         if (this.filteredNodes.length === 0) {
             lines.push(truncateToWidth(theme.fg("muted", "  No entries found"), width));
-            lines.push(truncateToWidth(theme.fg("muted", `  (0/0)${this.getStatusLabels()}`), width));
+            const status = this.getStatusLabels().trim();
+            if (status)
+                lines.push(truncateToWidth(theme.fg("muted", `  ${status}`), width));
             return lines;
         }
         const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisibleLines / 2), this.filteredNodes.length - this.maxVisibleLines));
@@ -580,8 +569,8 @@ class TreeList {
             const flatNode = this.filteredNodes[i];
             const entry = flatNode.node.entry;
             const isSelected = i === this.selectedIndex;
-            // Build line: cursor + prefix + path marker + label + content
-            const cursor = isSelected ? theme.fg("accent", "› ") : "  ";
+            // Build line: menu arrow + tree prefix + path marker + label + content
+            const cursor = isSelected ? theme.fg("accent", "→ ") : "  ";
             // If multiple roots, shift display (roots at 0, not 1)
             const displayIndent = this.multipleRoots ? Math.max(0, flatNode.indent - 1) : flatNode.indent;
             // Build prefix with gutters at their correct positions
@@ -626,15 +615,12 @@ class TreeList {
             // Fold marker for nodes without connectors (roots)
             const showsFoldInConnector = flatNode.showConnector && !flatNode.isVirtualRootChild;
             const foldMarker = isFolded && !showsFoldInConnector ? theme.fg("accent", "⊞ ") : "";
-            // Active path marker - shown right before the entry text
-            const isOnActivePath = this.activePathIds.has(entry.id);
-            const pathMarker = isOnActivePath ? theme.fg("accent", "• ") : "";
-            const label = flatNode.node.label ? theme.fg("warning", `[${flatNode.node.label}] `) : "";
+            const label = flatNode.node.label ? theme.fg("accent", `[${flatNode.node.label}] `) : "";
             const labelTimestamp = this.showLabelTimestamps && flatNode.node.label && flatNode.node.labelTimestamp
-                ? theme.fg("muted", `${this.formatLabelTimestamp(flatNode.node.labelTimestamp)} `)
+                ? theme.fg("accent", `[${this.formatLabelTimestamp(flatNode.node.labelTimestamp)}] `)
                 : "";
-            const content = this.getEntryDisplayText(flatNode.node, isSelected);
-            const prefixPart = theme.fg("dim", prefix) + foldMarker + pathMarker;
+            const content = this.getEntryDisplayText(flatNode.node);
+            const prefixPart = theme.fg("dim", prefix) + foldMarker;
             const anchorCol = visibleWidth(prefixPart);
             let gutter = cursor;
             let body = prefixPart + label + labelTimestamp + content;
@@ -642,58 +628,53 @@ class TreeList {
                 gutter = theme.bg("selectedBg", gutter);
                 body = theme.bg("selectedBg", body);
             }
-            renderedRows.push({ gutter, body, anchorCol, bodyWidth: visibleWidth(body), isSelected });
+            const rightClipSuffix = entry.type === "message" && entry.message.role === "toolResult" ? "]" : "";
+            renderedRows.push({ gutter, body, anchorCol, bodyWidth: visibleWidth(body), rightClipSuffix, isSelected });
         }
         lines.push(...renderHorizontalViewport(renderedRows, width));
         lines.push(truncateToWidth(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredNodes.length})${this.getStatusLabels()}`), width));
         return lines;
     }
-    getEntryDisplayText(node, isSelected) {
+    getEntryDisplayText(node) {
         const entry = node.entry;
         let result;
         const normalize = (s) => s.replace(/[\n\t]/g, " ").trim();
+        const primary = (color, text) => theme.fg(color, text);
+        const description = (text, color = "muted") => theme.fg(color, text);
         switch (entry.type) {
             case "message": {
                 const msg = entry.message;
                 const role = msg.role;
                 if (role === "user") {
-                    const msgWithContent = msg;
-                    const content = normalize(this.extractContent(msgWithContent.content));
-                    result = theme.fg("accent", "user: ") + content;
+                    const content = normalize(this.extractContent(msg.content));
+                    result = primary("success", "user: ") + description(content);
                 }
                 else if (role === "assistant") {
-                    const msgWithContent = msg;
-                    const textContent = normalize(this.extractContent(msgWithContent.content));
-                    if (textContent) {
-                        result = theme.fg("success", "assistant: ") + textContent;
-                    }
-                    else if (msgWithContent.stopReason === "aborted") {
-                        result = theme.fg("success", "assistant: ") + theme.fg("muted", "(aborted)");
-                    }
-                    else if (msgWithContent.errorMessage) {
-                        const errMsg = normalize(msgWithContent.errorMessage).slice(0, 80);
-                        result = theme.fg("success", "assistant: ") + theme.fg("error", errMsg);
-                    }
-                    else {
-                        result = theme.fg("success", "assistant: ") + theme.fg("muted", "(no content)");
-                    }
+                    const assistant = msg;
+                    const textContent = normalize(this.extractContent(assistant.content));
+                    const label = primary("warning", "assistant: ");
+                    if (textContent)
+                        result = label + description(textContent);
+                    else if (assistant.stopReason === "aborted")
+                        result = label + description("(aborted)", "muted");
+                    else if (assistant.errorMessage)
+                        result = label + description(normalize(assistant.errorMessage).slice(0, 80), "error");
+                    else
+                        result = label + description("(no content)", "muted");
                 }
                 else if (role === "toolResult") {
                     const toolMsg = msg;
                     const toolCall = toolMsg.toolCallId ? this.toolCallMap.get(toolMsg.toolCallId) : undefined;
-                    if (toolCall) {
-                        result = theme.fg("muted", this.formatToolCall(toolCall.name, toolCall.arguments));
-                    }
-                    else {
-                        result = theme.fg("muted", `[${toolMsg.toolName ?? "tool"}]`);
-                    }
+                    result = primary("muted", toolCall
+                        ? this.formatToolCall(toolCall.name, toolCall.arguments)
+                        : `[${toolMsg.toolName ?? "tool"}]`);
                 }
                 else if (role === "bashExecution") {
-                    const bashMsg = msg;
-                    result = theme.fg("dim", `[bash]: ${normalize(bashMsg.command ?? "")}`);
+                    const command = normalize(msg.command ?? "");
+                    result = primary("dim", "[bash]: ") + description(command, "dim");
                 }
                 else {
-                    result = theme.fg("dim", `[${role}]`);
+                    result = primary("dim", role === "system" ? "session" : `[${role}]`);
                 }
                 break;
             }
@@ -704,41 +685,41 @@ class TreeList {
                         .filter((c) => c.type === "text")
                         .map((c) => c.text)
                         .join("");
-                result = theme.fg("customMessageLabel", `[${entry.customType}]: `) + normalize(content);
+                result = primary("customMessageLabel", `[${entry.customType}]: `) + description(normalize(content));
                 break;
             }
             case "compaction": {
                 const tokens = Math.round(entry.tokensBefore / 1000);
-                result = theme.fg("borderAccent", `[compaction: ${tokens}k tokens]`);
+                result = primary("borderAccent", `[compaction: ${tokens}k tokens]`);
                 break;
             }
             case "branch_summary":
-                result = theme.fg("warning", `[branch summary]: `) + normalize(entry.summary);
+                result = primary("warning", "[branch summary]: ") + description(normalize(entry.summary));
                 break;
             case "model_change":
-                result = theme.fg("dim", `[model: ${entry.modelId}]`);
+                result = primary("dim", `[model: ${entry.modelId}]`);
                 break;
             case "thinking_level_change":
-                result = theme.fg("dim", `[thinking: ${entry.thinkingLevel}]`);
+                result = primary("dim", `[thinking: ${entry.thinkingLevel}]`);
                 break;
             case "custom":
-                result = theme.fg("dim", `[custom: ${entry.customType}]`);
+                result = primary("dim", `[custom: ${entry.customType}]`);
                 break;
             case "context_edit":
-                result = theme.fg("dim", `[context ${entry.replacement === null ? "omit" : "replace"}: ${entry.targetId}]`);
+                result = primary("dim", `[context ${entry.replacement === null ? "omit" : "replace"}: ${entry.targetId}]`);
                 break;
             case "label":
-                result = theme.fg("dim", `[label: ${entry.label ?? "(cleared)"}]`);
+                result = primary("dim", `[label: ${entry.label ?? "(cleared)"}]`);
                 break;
             case "session_info":
                 result = entry.name
-                    ? [theme.fg("dim", "[title: "), theme.fg("dim", entry.name), theme.fg("dim", "]")].join("")
+                    ? primary("dim", `[title: ${entry.name}]`)
                     : [theme.fg("dim", "[title: "), theme.italic(theme.fg("dim", "empty")), theme.fg("dim", "]")].join("");
                 break;
             default:
                 result = "";
         }
-        return isSelected ? theme.bold(result) : result;
+        return result;
     }
     formatLabelTimestamp(timestamp) {
         const date = new Date(timestamp);
@@ -850,7 +831,7 @@ class TreeList {
                     .replace(/[\n\t]/g, " ")
                     .trim()
                     .slice(0, 50);
-                return `[bash: ${cmd}${rawCmd.length > 50 ? "..." : ""}]`;
+                return `[bash: ${cmd}${rawCmd.length > 50 ? "…" : ""}]`;
             }
             case "grep": {
                 const pattern = String(args.pattern || "");
@@ -869,7 +850,7 @@ class TreeList {
             default: {
                 // Custom tool - show name and truncated JSON args
                 const argsStr = JSON.stringify(args).slice(0, 40);
-                return `[${name}: ${argsStr}${JSON.stringify(args).length > 40 ? "..." : ""}]`;
+                return `[${name}: ${argsStr}${JSON.stringify(args).length > 40 ? "…" : ""}]`;
             }
         }
     }
@@ -881,6 +862,21 @@ class TreeList {
         else if (kb.matches(keyData, "tui.select.down")) {
             this.selectedIndex = this.selectedIndex === this.filteredNodes.length - 1 ? 0 : this.selectedIndex + 1;
         }
+        else if (kb.matches(keyData, "owned.tree.collapse")) {
+            const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
+            const branchId = currentId ? this.findNearestExpandedBranch(currentId) : null;
+            if (branchId) {
+                this.foldedNodes.add(branchId);
+                this.applyFilter();
+            }
+        }
+        else if (kb.matches(keyData, "owned.tree.expand")) {
+            const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
+            if (currentId && this.foldedNodes.has(currentId)) {
+                this.foldedNodes.delete(currentId);
+                this.applyFilter();
+            }
+        }
         else if (kb.matches(keyData, "app.tree.foldOrUp")) {
             const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
             if (currentId && this.isFoldable(currentId) && !this.foldedNodes.has(currentId)) {
@@ -901,14 +897,18 @@ class TreeList {
                 this.selectedIndex = this.findBranchSegmentStart("down");
             }
         }
-        else if (kb.matches(keyData, "tui.editor.cursorLeft") || kb.matches(keyData, "tui.select.pageUp")) {
-            // Page up
+        else if (kb.matches(keyData, "tui.select.pageUp")) {
             this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisibleLines);
         }
-        else if (kb.matches(keyData, "tui.editor.cursorRight") || kb.matches(keyData, "tui.select.pageDown")) {
-            // Page down
+        else if (kb.matches(keyData, "tui.select.pageDown")) {
             this.selectedIndex = Math.min(this.filteredNodes.length - 1, this.selectedIndex + this.maxVisibleLines);
         }
+        else if (kb.matches(keyData, "owned.tree.first")) {
+            this.selectedIndex = 0;
+        }
+        else if (kb.matches(keyData, "owned.tree.last")) {
+            this.selectedIndex = Math.max(0, this.filteredNodes.length - 1);
+        }
         else if (kb.matches(keyData, "tui.select.confirm")) {
             const selected = this.filteredNodes[this.selectedIndex];
             if (selected && this.onSelect) {
@@ -929,48 +929,42 @@ class TreeList {
             }
         }
         else if (kb.matches(keyData, "app.tree.filter.default")) {
-            // Direct filter: default
-            this.filterMode = "default";
+            this.filterMode = "all";
             this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (kb.matches(keyData, "app.tree.filter.noTools")) {
-            // Toggle filter: no-tools ↔ default
-            this.filterMode = this.filterMode === "no-tools" ? "default" : "no-tools";
+            // Toggle filter: no-tools ↔ all
+            this.filterMode = this.filterMode === "no-tools" ? "all" : "no-tools";
             this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (kb.matches(keyData, "app.tree.filter.userOnly")) {
-            // Toggle filter: user-only ↔ default
-            this.filterMode = this.filterMode === "user-only" ? "default" : "user-only";
+            // Toggle filter: user-only ↔ all
+            this.filterMode = this.filterMode === "user-only" ? "all" : "user-only";
             this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (kb.matches(keyData, "app.tree.filter.labeledOnly")) {
-            // Toggle filter: labeled-only ↔ default
-            this.filterMode = this.filterMode === "labeled-only" ? "default" : "labeled-only";
+            // Toggle filter: labeled-only ↔ all
+            this.filterMode = this.filterMode === "labeled-only" ? "all" : "labeled-only";
             this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (kb.matches(keyData, "app.tree.filter.all")) {
-            // Toggle filter: all ↔ default
-            this.filterMode = this.filterMode === "all" ? "default" : "all";
+            this.filterMode = "all";
             this.foldedNodes.clear();
             this.applyFilter();
         }
-        else if (kb.matches(keyData, "app.tree.filter.cycleBackward")) {
-            // Cycle filter backwards
-            const modes = ["default", "no-tools", "user-only", "labeled-only", "all"];
-            const currentIndex = modes.indexOf(this.filterMode);
-            this.filterMode = modes[(currentIndex - 1 + modes.length) % modes.length];
+        else if (matchesKey(keyData, "shift+tab") || kb.matches(keyData, "app.tree.filter.cycleBackward")) {
+            const currentIndex = FILTER_MODES.indexOf(this.filterMode);
+            this.filterMode = FILTER_MODES[(currentIndex - 1 + FILTER_MODES.length) % FILTER_MODES.length];
             this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (kb.matches(keyData, "app.tree.filter.cycleForward")) {
-            // Cycle filter forwards: default → no-tools → user-only → labeled-only → all → default
-            const modes = ["default", "no-tools", "user-only", "labeled-only", "all"];
-            const currentIndex = modes.indexOf(this.filterMode);
-            this.filterMode = modes[(currentIndex + 1) % modes.length];
+            const currentIndex = FILTER_MODES.indexOf(this.filterMode);
+            this.filterMode = FILTER_MODES[(currentIndex + 1) % FILTER_MODES.length];
             this.foldedNodes.clear();
             this.applyFilter();
         }
@@ -1003,11 +997,14 @@ class TreeList {
         }
     }
     /**
-     * Whether a node can be folded. A node is foldable if it has visible children
-     * and is either a root (no visible parent) or a segment start (visible parent
-     * has multiple visible children).
+     * Whether a node can be folded. The system entry rendered as the session root
+     * stays expanded even when hidden metadata precedes it; other nodes are
+     * foldable when they have visible children and either appear at the filtered
+     * root or begin a segment below a visible branch point.
      */
     isFoldable(entryId) {
+        if (this.sessionRootIds.has(entryId))
+            return false;
         const children = this.visibleChildrenMap.get(entryId);
         if (!children || children.length === 0)
             return false;
@@ -1017,13 +1014,17 @@ class TreeList {
         const siblings = this.visibleChildrenMap.get(parentId);
         return siblings !== undefined && siblings.length > 1;
     }
-    /**
-     * Find the index of the next branch segment start in the given direction.
-     * A segment start is the first child of a branch point.
-     *
-     * "up" walks the visible parent chain; "down" walks visible children
-     * (always following the first child).
-     */
+    /** Resolve the nearest expanded branch containing the selected entry. */
+    findNearestExpandedBranch(entryId) {
+        let currentId = entryId;
+        while (currentId !== null) {
+            if (this.isFoldable(currentId) && !this.foldedNodes.has(currentId))
+                return currentId;
+            currentId = this.visibleParentMap.get(currentId) ?? null;
+        }
+        return null;
+    }
+    /** Find the next branch segment start for the retained modified-arrow shortcuts. */
     findBranchSegmentStart(direction) {
         const selectedId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
         if (!selectedId)
@@ -1040,7 +1041,6 @@ class TreeList {
                 currentId = children[0];
             }
         }
-        // direction === "up"
         while (true) {
             const parentId = this.visibleParentMap.get(currentId) ?? null;
             if (parentId === null)
@@ -1048,38 +1048,63 @@ class TreeList {
             const children = this.visibleChildrenMap.get(parentId) ?? [];
             if (children.length > 1) {
                 const segmentStart = indexByEntryId.get(currentId);
-                if (segmentStart < this.selectedIndex) {
+                if (segmentStart < this.selectedIndex)
                     return segmentStart;
-                }
             }
             currentId = parentId;
         }
     }
 }
-/** Component that displays the current search query */
-class SearchLine {
+class TreeSearchInput {
     treeList;
+    input = new Input();
+    renderedQuery = "";
     constructor(treeList) {
         this.treeList = treeList;
     }
-    invalidate() { }
+    get focused() {
+        return this.input.focused;
+    }
+    set focused(value) {
+        this.input.focused = value;
+    }
+    invalidate() {
+        this.input.invalidate();
+    }
     render(width) {
         const query = this.treeList.getSearchQuery();
-        if (query) {
-            return [truncateToWidth(`  ${theme.fg("muted", "Type to search:")} ${theme.fg("accent", query)}`, width)];
+        if (query !== this.renderedQuery) {
+            this.input = Object.assign(new Input(), { focused: this.input.focused });
+            this.input.handleInput(query);
+            this.renderedQuery = query;
         }
-        return [truncateToWidth(`  ${theme.fg("muted", "Type to search:")}`, width)];
+        return this.input.render(width);
+    }
+}
+/** Models-style summary of the active tree filter. */
+class TreeFilter {
+    treeList;
+    constructor(treeList) {
+        this.treeList = treeList;
+    }
+    invalidate() { }
+    render(width) {
+        const active = this.treeList.getFilterMode();
+        const choices = FILTER_MODES.map((mode) => theme.fg(mode === active ? "accent" : "muted", FILTER_LABELS[mode]));
+        return [truncateToWidth(theme.fg("muted", "Filter: ") + choices.join(theme.fg("muted", " | ")), width)];
     }
-    handleInput(_keyData) { }
 }
 /** Component that renders tree help as semantic rows with chunk-aware wrapping */
 class TreeHelp {
     invalidate() { }
     render(width) {
-        const items = TREE_HELP_ITEMS.map(({ keys, label, labelFirst }) => {
-            const key = formatHelpKeys(keys);
-            return renderPiModalShortcutHints([key ? { key, action: label, ...(labelFirst === undefined ? {} : { actionFirst: labelFirst }) } : { action: label }]);
-        });
+        const items = [
+            ...TREE_HELP_ITEMS.map(({ keys, label, labelFirst }) => {
+                const key = formatHelpKeys(keys);
+                return renderPiModalShortcutHints([key ? { key, action: label, ...(labelFirst === undefined ? {} : { actionFirst: labelFirst }) } : { action: label }]);
+            }),
+            renderPiModalShortcutHints([DIALOG_CLOSE_SHORTCUT_HINT]),
+        ];
         const availableWidth = Math.max(1, width);
         // The frame supplies the shared outer cell; help content needs no duplicate chrome inset.
         const indent = "";
@@ -1106,24 +1131,15 @@ class TreeHelp {
     }
 }
 const TREE_HELP_ITEMS = [
-    { keys: ["tui.select.up", "tui.select.down"], label: "move" },
-    { keys: ["tui.editor.cursorLeft", "tui.editor.cursorRight"], label: "page" },
-    { keys: ["app.tree.foldOrUp", "app.tree.unfoldOrDown"], label: "branch" },
+    { keys: [], label: "type to search" },
+    { keys: ["tui.select.up", "tui.select.down"], label: "navigate" },
+    { keys: ["app.tree.filter.cycleForward"], label: "filter" },
+    { keys: ["tui.select.pageUp", "tui.select.pageDown"], label: "page" },
+    { keys: ["owned.tree.first", "owned.tree.last"], label: "first/last" },
+    { keys: ["owned.tree.collapse", "owned.tree.expand"], label: "branch" },
     { keys: ["app.message.copy"], label: "copy" },
     { keys: ["app.tree.editLabel"], label: "label" },
     { keys: ["app.tree.toggleLabelTimestamp"], label: "label time" },
-    {
-        keys: [
-            "app.tree.filter.default",
-            "app.tree.filter.noTools",
-            "app.tree.filter.userOnly",
-            "app.tree.filter.labeledOnly",
-            "app.tree.filter.all",
-        ],
-        label: "filters",
-        labelFirst: true,
-    },
-    { keys: ["app.tree.filter.cycleForward", "app.tree.filter.cycleBackward"], label: "cycle", labelFirst: true },
 ];
 function formatHelpKeys(keybindings) {
     const keys = [];
@@ -1135,6 +1151,7 @@ function formatHelpKeys(keybindings) {
     if (keys.length === 0)
         return "";
     return formatKeyText(compactRawKeys(keys))
+        .replace(/\btab\b/gi, "Tab")
         .replace(/\bpageUp\b/g, "pgup")
         .replace(/\bpageDown\b/g, "pgdn")
         .replace(/\bup\b/g, "↑")
@@ -1174,22 +1191,23 @@ class LabelInput {
     constructor(entryId, currentLabel) {
         this.entryId = entryId;
         this.input = new Input();
-        if (currentLabel) {
-            this.input.setValue(currentLabel);
-        }
+        if (currentLabel)
+            this.input.handleInput(currentLabel);
+    }
+    invalidate() {
+        this.input.invalidate();
     }
-    invalidate() { }
     render(width) {
-        const lines = [];
-        const indent = "  ";
-        const availableWidth = width - indent.length;
-        lines.push(truncateToWidth(`${indent}${theme.fg("muted", "Label (empty to remove):")}`, width));
-        lines.push(...this.input.render(availableWidth).map((line) => truncateToWidth(`${indent}${line}`, width)));
-        lines.push(truncateToWidth(renderPiModalShortcutHints([
-            shortcutHint("tui.select.confirm", "save"),
-            shortcutHint("tui.select.cancel", "cancel"),
-        ], indent.length), width));
-        return lines;
+        return [
+            truncateToWidth(theme.fg("muted", "Empty to remove"), width),
+            "",
+            ...this.input.render(width),
+            "",
+            truncateToWidth(renderPiModalShortcutHints([
+                shortcutHint("tui.select.confirm", "save"),
+                DIALOG_CLOSE_SHORTCUT_HINT,
+            ]), width),
+        ];
     }
     handleInput(keyData) {
         const kb = treeKeybindings;
@@ -1210,9 +1228,15 @@ class LabelInput {
  */
 export class TreeSelectorComponent extends Container {
     treeList;
+    searchInput;
+    treeFilter;
+    titleText;
+    searchInputContainer = new Container();
+    treeContainer = new Container();
+    labelInputContainer = new Container();
+    footerContainer = new Container();
+    treeHelp = new TreeHelp();
     labelInput = null;
-    labelInputContainer;
-    treeContainer;
     onLabelChangeCallback;
     onCopy;
     // Focusable implementation - propagate to labelInput when active for IME cursor positioning
@@ -1222,10 +1246,9 @@ export class TreeSelectorComponent extends Container {
     }
     set focused(value) {
         this._focused = value;
-        // Propagate to labelInput when it's active
-        if (this.labelInput) {
+        this.searchInput.focused = value && this.labelInput === null;
+        if (this.labelInput)
             this.labelInput.focused = value;
-        }
     }
     constructor(tree, currentLeafId, terminalHeight, onSelect, onCancel, onLabelChange, initialSelectedId, initialFilterMode) {
         super();
@@ -1236,30 +1259,38 @@ export class TreeSelectorComponent extends Container {
         this.treeList.onCancel = onCancel;
         this.treeList.onCopy = (text) => this.onCopy?.(text);
         this.treeList.onLabelEdit = (entryId, currentLabel) => this.showLabelInput(entryId, currentLabel);
-        this.treeContainer = new Container();
-        this.treeContainer.addChild(this.treeList);
-        this.labelInputContainer = new Container();
-        this.addChild(new Spacer(1));
-        const header = addPiModalHeader(this, new DynamicBorder(), new Text(theme.bold("Session Tree"), 0, 0));
-        this.addChild(new TreeHelp());
-        this.addChild(new SearchLine(this.treeList));
-        const separator = new DynamicBorder();
-        this.addChild(separator);
-        this.addChild(new Spacer(1));
+        this.searchInput = new TreeSearchInput(this.treeList);
+        this.treeFilter = new TreeFilter(this.treeList);
+        this.titleText = new Text(theme.fg("accent", theme.bold("Session Tree")), 0, 0);
+        this.restoreTreeContent();
+        const header = addPiModalHeader(this, new DynamicBorder(), this.titleText);
+        this.addChild(this.searchInputContainer);
         this.addChild(this.treeContainer);
         this.addChild(this.labelInputContainer);
-        this.addChild(new Spacer(1));
+        this.addChild(this.footerContainer);
         this.addChild(new DynamicBorder());
         adoptPiModalFrame(this, {
-            topIndex: 1,
+            topIndex: 0,
             bottomIndex: this.children.length - 1,
             header,
-            fullWidthContent: [separator],
         });
         if (tree.length === 0) {
             setTimeout(() => onCancel(), 100);
         }
     }
+    restoreTreeContent() {
+        this.titleText.setText(theme.fg("accent", theme.bold("Session Tree")));
+        this.searchInputContainer.clear();
+        this.searchInputContainer.addChild(this.treeFilter);
+        this.searchInputContainer.addChild(new Spacer(1));
+        this.searchInputContainer.addChild(this.searchInput);
+        this.searchInputContainer.addChild(new Spacer(1));
+        this.treeContainer.clear();
+        this.treeContainer.addChild(this.treeList);
+        this.footerContainer.clear();
+        this.footerContainer.addChild(new Spacer(1));
+        this.footerContainer.addChild(this.treeHelp);
+    }
     showLabelInput(entryId, currentLabel) {
         this.labelInput = new LabelInput(entryId, currentLabel);
         this.labelInput.onSubmit = (id, label) => {
@@ -1268,17 +1299,21 @@ export class TreeSelectorComponent extends Container {
             this.hideLabelInput();
         };
         this.labelInput.onCancel = () => this.hideLabelInput();
-        // Propagate current focused state to the new labelInput
+        // Focus only the active editor.
+        this.searchInput.focused = false;
         this.labelInput.focused = this._focused;
+        this.titleText.setText(theme.fg("accent", theme.bold("Label")));
+        this.searchInputContainer.clear();
         this.treeContainer.clear();
         this.labelInputContainer.clear();
         this.labelInputContainer.addChild(this.labelInput);
+        this.footerContainer.clear();
     }
     hideLabelInput() {
         this.labelInput = null;
+        this.searchInput.focused = this._focused;
         this.labelInputContainer.clear();
-        this.treeContainer.clear();
-        this.treeContainer.addChild(this.treeList);
+        this.restoreTreeContent();
     }
     handleInput(keyData) {
         if (this.labelInput) {