@vandeepunk/pi-coding-agent 0.0.6 → 1.0.0

package/dist/modes/interactive/components/tree-selector.js

@@ -1,7 +1,7 @@
-import { Container, getEditorKeybindings, Input, matchesKey, Spacer, Text, TruncatedText, truncateToWidth, } from "@mariozechner/pi-tui";
+import { Container, getKeybindings, Input, matchesKey, Spacer, Text, TruncatedText, truncateToWidth, } from "@mariozechner/pi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
-import { keyHint } from "./keybinding-hints.js";
+import { keyHint, keyText } from "./keybinding-hints.js";
 class TreeList {
     flatNodes = [];
     filteredNodes = [];
@@ -12,14 +12,19 @@ class TreeList {
     searchQuery = "";
     toolCallMap = new Map();
     multipleRoots = false;
+    showLabelTimestamps = false;
     activePathIds = new Set();
+    visibleParentMap = new Map();
+    visibleChildrenMap = new Map();
     lastSelectedId = null;
+    foldedNodes = new Set();
     onSelect;
     onCancel;
     onLabelEdit;
-    constructor(tree, currentLeafId, maxVisibleLines, initialSelectedId) {
+    constructor(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode) {
         this.currentLeafId = currentLeafId;
         this.maxVisibleLines = maxVisibleLines;
+        this.filterMode = initialFilterMode ?? "default";
         this.multipleRoots = tree.length > 1;
         this.flatNodes = this.flattenTree(tree);
         this.buildActivePath();
@@ -217,7 +222,8 @@ class TreeList {
             const isSettingsEntry = entry.type === "label" ||
                 entry.type === "custom" ||
                 entry.type === "model_change" ||
-                entry.type === "thinking_level_change";
+                entry.type === "thinking_level_change" ||
+                entry.type === "session_info";
             switch (this.filterMode) {
                 case "user-only":
                     // Just user messages
@@ -249,6 +255,17 @@ class TreeList {
             }
             return true;
         });
+        // Filter out descendants of folded nodes.
+        if (this.foldedNodes.size > 0) {
+            const skipSet = new Set();
+            for (const flatNode of this.flatNodes) {
+                const { id, parentId } = flatNode.node.entry;
+                if (parentId != null && (this.foldedNodes.has(parentId) || skipSet.has(parentId))) {
+                    skipSet.add(id);
+                }
+            }
+            this.filteredNodes = this.filteredNodes.filter((flatNode) => !skipSet.has(flatNode.node.entry.id));
+        }
         // Recalculate visual structure (indent, connectors, gutters) based on visible tree
         this.recalculateVisualStructure();
         // Try to preserve cursor on the same node, or find nearest visible ancestor
@@ -373,6 +390,9 @@ class TreeList {
                 ]);
             }
         }
+        // Store visible tree maps for ancestor/descendant lookups in navigation
+        this.visibleParentMap = visibleParent;
+        this.visibleChildrenMap = visibleChildren;
     }
     /** Get searchable text content from a node */
     getSearchableText(node) {
@@ -411,6 +431,11 @@ class TreeList {
             case "branch_summary":
                 parts.push("branch summary", entry.summary);
                 break;
+            case "session_info":
+                parts.push("title");
+                if (entry.name)
+                    parts.push(entry.name);
+                break;
             case "model_change":
                 parts.push("model", entry.modelId);
                 break;
@@ -433,33 +458,41 @@ class TreeList {
     getSelectedNode() {
         return this.filteredNodes[this.selectedIndex]?.node;
     }
-    updateNodeLabel(entryId, label) {
+    updateNodeLabel(entryId, label, labelTimestamp) {
         for (const flatNode of this.flatNodes) {
             if (flatNode.node.entry.id === entryId) {
                 flatNode.node.label = label;
+                flatNode.node.labelTimestamp = label ? (labelTimestamp ?? new Date().toISOString()) : undefined;
                 break;
             }
         }
     }
-    getFilterLabel() {
+    getStatusLabels() {
+        let labels = "";
         switch (this.filterMode) {
             case "no-tools":
-                return " [no-tools]";
+                labels += " [no-tools]";
+                break;
             case "user-only":
-                return " [user]";
+                labels += " [user]";
+                break;
             case "labeled-only":
-                return " [labeled]";
+                labels += " [labeled]";
+                break;
             case "all":
-                return " [all]";
-            default:
-                return "";
+                labels += " [all]";
+                break;
+        }
+        if (this.showLabelTimestamps) {
+            labels += " [+label time]";
         }
+        return labels;
     }
     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.getFilterLabel()}`), width));
+            lines.push(truncateToWidth(theme.fg("muted", `  (0/0)${this.getStatusLabels()}`), width));
             return lines;
         }
         const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisibleLines / 2), this.filteredNodes.length - this.maxVisibleLines));
@@ -479,6 +512,7 @@ class TreeList {
             // Build prefix char by char, placing gutters and connector at their positions
             const totalChars = displayIndent * 3;
             const prefixChars = [];
+            const isFolded = this.foldedNodes.has(entry.id);
             for (let i = 0; i < totalChars; i++) {
                 const level = Math.floor(i / 3);
                 const posInLevel = i % 3;
@@ -493,12 +527,13 @@ class TreeList {
                     }
                 }
                 else if (connector && level === connectorPosition) {
-                    // Connector at this level
+                    // Connector at this level, with fold indicator
                     if (posInLevel === 0) {
                         prefixChars.push(flatNode.isLast ? "└" : "├");
                     }
                     else if (posInLevel === 1) {
-                        prefixChars.push("─");
+                        const foldable = this.isFoldable(entry.id);
+                        prefixChars.push(isFolded ? "⊞" : foldable ? "⊟" : "─");
                     }
                     else {
                         prefixChars.push(" ");
@@ -509,18 +544,24 @@ class TreeList {
                 }
             }
             const prefix = prefixChars.join("");
+            // 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 labelTimestamp = this.showLabelTimestamps && flatNode.node.label && flatNode.node.labelTimestamp
+                ? theme.fg("muted", `${this.formatLabelTimestamp(flatNode.node.labelTimestamp)} `)
+                : "";
             const content = this.getEntryDisplayText(flatNode.node, isSelected);
-            let line = cursor + theme.fg("dim", prefix) + pathMarker + label + content;
+            let line = cursor + theme.fg("dim", prefix) + foldMarker + pathMarker + label + labelTimestamp + content;
             if (isSelected) {
                 line = theme.bg("selectedBg", line);
             }
             lines.push(truncateToWidth(line, width));
         }
-        lines.push(truncateToWidth(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredNodes.length})${this.getFilterLabel()}`), width));
+        lines.push(truncateToWidth(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredNodes.length})${this.getStatusLabels()}`), width));
         return lines;
     }
     getEntryDisplayText(node, isSelected) {
@@ -602,11 +643,35 @@ class TreeList {
             case "label":
                 result = theme.fg("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("")
+                    : [theme.fg("dim", "[title: "), theme.italic(theme.fg("dim", "empty")), theme.fg("dim", "]")].join("");
+                break;
             default:
                 result = "";
         }
         return isSelected ? theme.bold(result) : result;
     }
+    formatLabelTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        const now = new Date();
+        const hours = date.getHours().toString().padStart(2, "0");
+        const minutes = date.getMinutes().toString().padStart(2, "0");
+        const time = `${hours}:${minutes}`;
+        if (date.getFullYear() === now.getFullYear() &&
+            date.getMonth() === now.getMonth() &&
+            date.getDate() === now.getDate()) {
+            return time;
+        }
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        if (date.getFullYear() === now.getFullYear()) {
+            return `${month}/${day} ${time}`;
+        }
+        const year = date.getFullYear().toString().slice(-2);
+        return `${year}/${month}/${day} ${time}`;
+    }
     extractContent(content) {
         const maxLen = 200;
         if (typeof content === "string")
@@ -696,30 +761,51 @@ class TreeList {
         }
     }
     handleInput(keyData) {
-        const kb = getEditorKeybindings();
-        if (kb.matches(keyData, "selectUp")) {
+        const kb = getKeybindings();
+        if (kb.matches(keyData, "tui.select.up")) {
             this.selectedIndex = this.selectedIndex === 0 ? this.filteredNodes.length - 1 : this.selectedIndex - 1;
         }
-        else if (kb.matches(keyData, "selectDown")) {
+        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, "cursorLeft")) {
+        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)) {
+                this.foldedNodes.add(currentId);
+                this.applyFilter();
+            }
+            else {
+                this.selectedIndex = this.findBranchSegmentStart("up");
+            }
+        }
+        else if (kb.matches(keyData, "app.tree.unfoldOrDown")) {
+            const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
+            if (currentId && this.foldedNodes.has(currentId)) {
+                this.foldedNodes.delete(currentId);
+                this.applyFilter();
+            }
+            else {
+                this.selectedIndex = this.findBranchSegmentStart("down");
+            }
+        }
+        else if (kb.matches(keyData, "tui.editor.cursorLeft") || kb.matches(keyData, "tui.select.pageUp")) {
             // Page up
             this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisibleLines);
         }
-        else if (kb.matches(keyData, "cursorRight")) {
+        else if (kb.matches(keyData, "tui.editor.cursorRight") || kb.matches(keyData, "tui.select.pageDown")) {
             // Page down
             this.selectedIndex = Math.min(this.filteredNodes.length - 1, this.selectedIndex + this.maxVisibleLines);
         }
-        else if (kb.matches(keyData, "selectConfirm")) {
+        else if (kb.matches(keyData, "tui.select.confirm")) {
             const selected = this.filteredNodes[this.selectedIndex];
             if (selected && this.onSelect) {
                 this.onSelect(selected.node.entry.id);
             }
         }
-        else if (kb.matches(keyData, "selectCancel")) {
+        else if (kb.matches(keyData, "tui.select.cancel")) {
             if (this.searchQuery) {
                 this.searchQuery = "";
+                this.foldedNodes.clear();
                 this.applyFilter();
             }
             else {
@@ -729,26 +815,31 @@ class TreeList {
         else if (matchesKey(keyData, "ctrl+d")) {
             // Direct filter: default
             this.filterMode = "default";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "ctrl+t")) {
             // Toggle filter: no-tools ↔ default
             this.filterMode = this.filterMode === "no-tools" ? "default" : "no-tools";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "ctrl+u")) {
             // Toggle filter: user-only ↔ default
             this.filterMode = this.filterMode === "user-only" ? "default" : "user-only";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "ctrl+l")) {
             // Toggle filter: labeled-only ↔ default
             this.filterMode = this.filterMode === "labeled-only" ? "default" : "labeled-only";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "ctrl+a")) {
             // Toggle filter: all ↔ default
             this.filterMode = this.filterMode === "all" ? "default" : "all";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "shift+ctrl+o")) {
@@ -756,6 +847,7 @@ class TreeList {
             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];
+            this.foldedNodes.clear();
             this.applyFilter();
         }
         else if (matchesKey(keyData, "ctrl+o")) {
@@ -763,20 +855,25 @@ class TreeList {
             const modes = ["default", "no-tools", "user-only", "labeled-only", "all"];
             const currentIndex = modes.indexOf(this.filterMode);
             this.filterMode = modes[(currentIndex + 1) % modes.length];
+            this.foldedNodes.clear();
             this.applyFilter();
         }
-        else if (kb.matches(keyData, "deleteCharBackward")) {
+        else if (kb.matches(keyData, "tui.editor.deleteCharBackward")) {
             if (this.searchQuery.length > 0) {
                 this.searchQuery = this.searchQuery.slice(0, -1);
+                this.foldedNodes.clear();
                 this.applyFilter();
             }
         }
-        else if (matchesKey(keyData, "shift+l")) {
+        else if (kb.matches(keyData, "app.tree.editLabel")) {
             const selected = this.filteredNodes[this.selectedIndex];
             if (selected && this.onLabelEdit) {
                 this.onLabelEdit(selected.node.entry.id, selected.node.label);
             }
         }
+        else if (kb.matches(keyData, "app.tree.toggleLabelTimestamp")) {
+            this.showLabelTimestamps = !this.showLabelTimestamps;
+        }
         else {
             const hasControlChars = [...keyData].some((ch) => {
                 const code = ch.charCodeAt(0);
@@ -784,10 +881,64 @@ class TreeList {
             });
             if (!hasControlChars && keyData.length > 0) {
                 this.searchQuery += keyData;
+                this.foldedNodes.clear();
                 this.applyFilter();
             }
         }
     }
+    /**
+     * 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).
+     */
+    isFoldable(entryId) {
+        const children = this.visibleChildrenMap.get(entryId);
+        if (!children || children.length === 0)
+            return false;
+        const parentId = this.visibleParentMap.get(entryId);
+        if (parentId === null || parentId === undefined)
+            return true;
+        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).
+     */
+    findBranchSegmentStart(direction) {
+        const selectedId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
+        if (!selectedId)
+            return this.selectedIndex;
+        const indexByEntryId = new Map(this.filteredNodes.map((node, i) => [node.node.entry.id, i]));
+        let currentId = selectedId;
+        if (direction === "down") {
+            while (true) {
+                const children = this.visibleChildrenMap.get(currentId) ?? [];
+                if (children.length === 0)
+                    return indexByEntryId.get(currentId);
+                if (children.length > 1)
+                    return indexByEntryId.get(children[0]);
+                currentId = children[0];
+            }
+        }
+        // direction === "up"
+        while (true) {
+            const parentId = this.visibleParentMap.get(currentId) ?? null;
+            if (parentId === null)
+                return indexByEntryId.get(currentId);
+            const children = this.visibleChildrenMap.get(parentId) ?? [];
+            if (children.length > 1) {
+                const segmentStart = indexByEntryId.get(currentId);
+                if (segmentStart < this.selectedIndex) {
+                    return segmentStart;
+                }
+            }
+            currentId = parentId;
+        }
+    }
 }
 /** Component that displays the current search query */
 class SearchLine {
@@ -834,16 +985,16 @@ class LabelInput {
         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(`${indent}${keyHint("selectConfirm", "save")}  ${keyHint("selectCancel", "cancel")}`, width));
+        lines.push(truncateToWidth(`${indent}${keyHint("tui.select.confirm", "save")}  ${keyHint("tui.select.cancel", "cancel")}`, width));
         return lines;
     }
     handleInput(keyData) {
-        const kb = getEditorKeybindings();
-        if (kb.matches(keyData, "selectConfirm")) {
+        const kb = getKeybindings();
+        if (kb.matches(keyData, "tui.select.confirm")) {
             const value = this.input.getValue().trim();
             this.onSubmit?.(this.entryId, value || undefined);
         }
-        else if (kb.matches(keyData, "selectCancel")) {
+        else if (kb.matches(keyData, "tui.select.cancel")) {
             this.onCancel?.();
         }
         else {
@@ -872,11 +1023,11 @@ export class TreeSelectorComponent extends Container {
             this.labelInput.focused = value;
         }
     }
-    constructor(tree, currentLeafId, terminalHeight, onSelect, onCancel, onLabelChange, initialSelectedId) {
+    constructor(tree, currentLeafId, terminalHeight, onSelect, onCancel, onLabelChange, initialSelectedId, initialFilterMode) {
         super();
         this.onLabelChangeCallback = onLabelChange;
         const maxVisibleLines = Math.max(5, Math.floor(terminalHeight / 2));
-        this.treeList = new TreeList(tree, currentLeafId, maxVisibleLines, initialSelectedId);
+        this.treeList = new TreeList(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode);
         this.treeList.onSelect = onSelect;
         this.treeList.onCancel = onCancel;
         this.treeList.onLabelEdit = (entryId, currentLabel) => this.showLabelInput(entryId, currentLabel);
@@ -886,8 +1037,7 @@ export class TreeSelectorComponent extends Container {
         this.addChild(new Spacer(1));
         this.addChild(new DynamicBorder());
         this.addChild(new Text(theme.bold("  Session Tree"), 1, 0));
-        this.addChild(new TruncatedText(theme.fg("muted", "  ↑/↓: move. ←/→: page. Shift+L: label. ") +
-            theme.fg("muted", "^D/^T/^U/^L/^A: filters (^O/⇧^O cycle)"), 0, 0));
+        this.addChild(new TruncatedText(theme.fg("muted", `  ↑/↓: move. ←/→: page. ^←/^→ or Alt+←/Alt+→: fold/branch. ${keyText("app.tree.editLabel")}: label. ^D/^T/^U/^L/^A: filters (^O/⇧^O cycle). ${keyText("app.tree.toggleLabelTimestamp")}: label time`), 0, 0));
         this.addChild(new SearchLine(this.treeList));
         this.addChild(new DynamicBorder());
         this.addChild(new Spacer(1));