@phi-code-admin/phi-code 0.74.2 → 0.75.0

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

@@ -1,18 +1,27 @@
-import { Container, getEditorKeybindings, Input, matchesKey, Spacer, Text, TruncatedText, truncateToWidth, } from "phi-code-tui";
+import { Container, getKeybindings, Input, Spacer, Text, TruncatedText, truncateToWidth, } from "phi-code-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 = [];
+    selectedIndex = 0;
+    currentLeafId;
+    maxVisibleLines;
+    filterMode = "default";
+    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, initialFilterMode) {
-        this.flatNodes = [];
-        this.filteredNodes = [];
-        this.selectedIndex = 0;
-        this.filterMode = "default";
-        this.searchQuery = "";
-        this.toolCallMap = new Map();
-        this.multipleRoots = false;
-        this.activePathIds = new Set();
-        this.lastSelectedId = null;
         this.currentLeafId = currentLeafId;
         this.maxVisibleLines = maxVisibleLines;
         this.filterMode = initialFilterMode ?? "default";
@@ -213,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
@@ -245,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
@@ -369,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) {
@@ -407,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;
@@ -429,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));
@@ -475,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;
@@ -489,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(" ");
@@ -505,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) {
@@ -598,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")
@@ -692,87 +761,119 @@ 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 {
                 this.onCancel?.();
             }
         }
-        else if (matchesKey(keyData, "ctrl+d")) {
+        else if (kb.matches(keyData, "app.tree.filter.default")) {
             // Direct filter: default
             this.filterMode = "default";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
-        else if (matchesKey(keyData, "ctrl+t")) {
+        else if (kb.matches(keyData, "app.tree.filter.noTools")) {
             // 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")) {
+        else if (kb.matches(keyData, "app.tree.filter.userOnly")) {
             // 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")) {
+        else if (kb.matches(keyData, "app.tree.filter.labeledOnly")) {
             // 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")) {
+        else if (kb.matches(keyData, "app.tree.filter.all")) {
             // Toggle filter: all ↔ default
             this.filterMode = this.filterMode === "all" ? "default" : "all";
+            this.foldedNodes.clear();
             this.applyFilter();
         }
-        else if (matchesKey(keyData, "shift+ctrl+o")) {
+        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];
+            this.foldedNodes.clear();
             this.applyFilter();
         }
-        else if (matchesKey(keyData, "ctrl+o")) {
+        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];
+            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);
@@ -780,13 +881,68 @@ 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 {
+    treeList;
     constructor(treeList) {
         this.treeList = treeList;
     }
@@ -802,6 +958,12 @@ class SearchLine {
 }
 /** Label input component shown when editing a label */
 class LabelInput {
+    input;
+    entryId;
+    onSubmit;
+    onCancel;
+    // Focusable implementation - propagate to input for IME cursor positioning
+    _focused = false;
     get focused() {
         return this._focused;
     }
@@ -810,8 +972,6 @@ class LabelInput {
         this.input.focused = value;
     }
     constructor(entryId, currentLabel) {
-        // Focusable implementation - propagate to input for IME cursor positioning
-        this._focused = false;
         this.entryId = entryId;
         this.input = new Input();
         if (currentLabel) {
@@ -825,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 {
@@ -846,6 +1006,13 @@ class LabelInput {
  * Component that renders a session tree selector for navigation
  */
 export class TreeSelectorComponent extends Container {
+    treeList;
+    labelInput = null;
+    labelInputContainer;
+    treeContainer;
+    onLabelChangeCallback;
+    // Focusable implementation - propagate to labelInput when active for IME cursor positioning
+    _focused = false;
     get focused() {
         return this._focused;
     }
@@ -858,9 +1025,6 @@ export class TreeSelectorComponent extends Container {
     }
     constructor(tree, currentLeafId, terminalHeight, onSelect, onCancel, onLabelChange, initialSelectedId, initialFilterMode) {
         super();
-        this.labelInput = null;
-        // Focusable implementation - propagate to labelInput when active for IME cursor positioning
-        this._focused = false;
         this.onLabelChangeCallback = onLabelChange;
         const maxVisibleLines = Math.max(5, Math.floor(terminalHeight / 2));
         this.treeList = new TreeList(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode);
@@ -873,8 +1037,16 @@ 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));
+        const filterKeys = [
+            keyText("app.tree.filter.default"),
+            keyText("app.tree.filter.noTools"),
+            keyText("app.tree.filter.userOnly"),
+            keyText("app.tree.filter.labeledOnly"),
+            keyText("app.tree.filter.all"),
+        ].join("/");
+        const cycleKeys = `${keyText("app.tree.filter.cycleForward")}/${keyText("app.tree.filter.cycleBackward")}`;
+        const branchKeys = `${keyText("app.tree.foldOrUp")}/${keyText("app.tree.unfoldOrDown")}`;
+        this.addChild(new TruncatedText(theme.fg("muted", `  ↑/↓: move. ←/→: page. ${branchKeys}: fold/branch. ${keyText("app.tree.editLabel")}: label. ${filterKeys}: filters (${cycleKeys} cycle). ${keyText("app.tree.toggleLabelTimestamp")}: label time`), 0, 0));
         this.addChild(new SearchLine(this.treeList));
         this.addChild(new DynamicBorder());
         this.addChild(new Spacer(1));