@sammorrowdrums/mcpi 0.70.9 → 0.85.0-bootstrap.0

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

@@ -1,7 +1,41 @@
-import { Container, getKeybindings, Input, Spacer, Text, TruncatedText, truncateToWidth, } from "@mariozechner/pi-tui";
+import { Container, getKeybindings, Input, Spacer, sliceByColumn, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@sammorrowdrums/mcpi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
-import { keyHint, keyText } from "./keybinding-hints.js";
+import { formatKeyText, keyHint } from "./keybinding-hints.js";
+const TREE_GUTTER_WIDTH = 2;
+const MIN_VISIBLE_ANCHOR_CONTENT_WIDTH = 4;
+const MAX_VISIBLE_ANCHOR_CONTENT_WIDTH = 20;
+const MIN_ANCHOR_CONTEXT_WIDTH = 2;
+const MAX_ANCHOR_CONTEXT_WIDTH = 12;
+/**
+ * Render tree rows into a horizontally clipped viewport.
+ *
+ * The tree gutter is always kept visible. The row bodies are shifted left only
+ * when the selected row's anchor (the start of its entry text after tree
+ * indentation/markers) would otherwise be too far right to see useful content.
+ */
+function renderHorizontalViewport(rows, width) {
+    const viewportWidth = Math.max(0, width - TREE_GUTTER_WIDTH);
+    const maxBodyWidth = rows.reduce((max, row) => Math.max(max, row.bodyWidth), 0);
+    const maxHorizontalScroll = Math.max(0, maxBodyWidth - viewportWidth);
+    const selectedRow = rows.find((row) => row.isSelected);
+    // Only pan horizontally when needed to keep enough selected-row content visible after its anchor.
+    let horizontalScroll = 0;
+    if (selectedRow && maxHorizontalScroll > 0) {
+        const minVisibleAnchorContentWidth = Math.min(MAX_VISIBLE_ANCHOR_CONTENT_WIDTH, Math.max(MIN_VISIBLE_ANCHOR_CONTENT_WIDTH, Math.floor(viewportWidth / 3)));
+        if (selectedRow.anchorCol > viewportWidth - minVisibleAnchorContentWidth) {
+            const anchorContextWidth = Math.min(MAX_ANCHOR_CONTEXT_WIDTH, Math.max(MIN_ANCHOR_CONTEXT_WIDTH, Math.floor(viewportWidth / 4)));
+            horizontalScroll = Math.min(maxHorizontalScroll, selectedRow.anchorCol - anchorContextWidth);
+        }
+    }
+    // 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;
+        return truncateToWidth(line, width, "");
+    });
+}
 class TreeList {
     flatNodes = [];
     filteredNodes = [];
@@ -20,6 +54,7 @@ class TreeList {
     foldedNodes = new Set();
     onSelect;
     onCancel;
+    onCopy;
     onLabelEdit;
     constructor(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode) {
         this.currentLeafId = currentLeafId;
@@ -458,6 +493,10 @@ class TreeList {
     getSelectedNode() {
         return this.filteredNodes[this.selectedIndex]?.node;
     }
+    copySelected() {
+        const node = this.getSelectedNode();
+        this.onCopy?.(node ? this.getEntryCopyText(node) : undefined);
+    }
     updateNodeLabel(entryId, label, labelTimestamp) {
         for (const flatNode of this.flatNodes) {
             if (flatNode.node.entry.id === entryId) {
@@ -497,6 +536,7 @@ class TreeList {
         }
         const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisibleLines / 2), this.filteredNodes.length - this.maxVisibleLines));
         const endIndex = Math.min(startIndex + this.maxVisibleLines, this.filteredNodes.length);
+        const renderedRows = [];
         for (let i = startIndex; i < endIndex; i++) {
             const flatNode = this.filteredNodes[i];
             const entry = flatNode.node.entry;
@@ -555,12 +595,17 @@ class TreeList {
                 ? theme.fg("muted", `${this.formatLabelTimestamp(flatNode.node.labelTimestamp)} `)
                 : "";
             const content = this.getEntryDisplayText(flatNode.node, isSelected);
-            let line = cursor + theme.fg("dim", prefix) + foldMarker + pathMarker + label + labelTimestamp + content;
+            const prefixPart = theme.fg("dim", prefix) + foldMarker + pathMarker;
+            const anchorCol = visibleWidth(prefixPart);
+            let gutter = cursor;
+            let body = prefixPart + label + labelTimestamp + content;
             if (isSelected) {
-                line = theme.bg("selectedBg", line);
+                gutter = theme.bg("selectedBg", gutter);
+                body = theme.bg("selectedBg", body);
             }
-            lines.push(truncateToWidth(line, width));
+            renderedRows.push({ gutter, body, anchorCol, bodyWidth: visibleWidth(body), isSelected });
         }
+        lines.push(...renderHorizontalViewport(renderedRows, width));
         lines.push(truncateToWidth(theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredNodes.length})${this.getStatusLabels()}`), width));
         return lines;
     }
@@ -673,21 +718,47 @@ class TreeList {
         return `${year}/${month}/${day} ${time}`;
     }
     extractContent(content) {
-        const maxLen = 200;
+        return this.extractFullContent(content).slice(0, 200);
+    }
+    extractFullContent(content) {
         if (typeof content === "string")
-            return content.slice(0, maxLen);
-        if (Array.isArray(content)) {
-            let result = "";
-            for (const c of content) {
-                if (typeof c === "object" && c !== null && "type" in c && c.type === "text") {
-                    result += c.text;
-                    if (result.length >= maxLen)
-                        return result.slice(0, maxLen);
-                }
+            return content;
+        if (!Array.isArray(content))
+            return "";
+        let result = "";
+        for (const block of content) {
+            if (typeof block === "object" && block !== null && "type" in block && block.type === "text") {
+                result += block.text;
             }
-            return result;
         }
-        return "";
+        return result;
+    }
+    getEntryCopyText(node) {
+        const entry = node.entry;
+        let text;
+        switch (entry.type) {
+            case "message":
+                if (entry.message.role === "bashExecution") {
+                    text = entry.message.command;
+                }
+                else if ("content" in entry.message) {
+                    text = this.extractFullContent(entry.message.content);
+                    if (!text && entry.message.role === "assistant") {
+                        text = entry.message.errorMessage;
+                    }
+                }
+                break;
+            case "custom_message":
+                text = this.extractFullContent(entry.content);
+                break;
+            case "compaction":
+                text = entry.summary;
+                break;
+            case "branch_summary":
+                text = entry.summary;
+                break;
+        }
+        return text?.trim() ? text : undefined;
     }
     hasTextContent(content) {
         if (typeof content === "string")
@@ -802,6 +873,9 @@ class TreeList {
                 this.onSelect(selected.node.entry.id);
             }
         }
+        else if (kb.matches(keyData, "app.message.copy")) {
+            this.copySelected();
+        }
         else if (kb.matches(keyData, "tui.select.cancel")) {
             if (this.searchQuery) {
                 this.searchQuery = "";
@@ -956,6 +1030,91 @@ class SearchLine {
     }
     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 text = formatHelpKeys(keys);
+            if (!text)
+                return label;
+            return labelFirst ? `${label} ${text}` : `${text} ${label}`;
+        });
+        const availableWidth = Math.max(1, width);
+        const indent = "  ";
+        const separator = " · ";
+        const lines = [];
+        let currentLine = "";
+        for (const item of items) {
+            const candidate = currentLine
+                ? `${currentLine}${separator}${item}`
+                : visibleWidth(`${indent}${item}`) <= availableWidth
+                    ? `${indent}${item}`
+                    : item;
+            if (!currentLine || visibleWidth(candidate) <= availableWidth) {
+                currentLine = candidate;
+                continue;
+            }
+            lines.push(...wrapTextWithAnsi(currentLine.trimEnd(), availableWidth));
+            currentLine = visibleWidth(`${indent}${item}`) <= availableWidth ? `${indent}${item}` : item;
+        }
+        if (currentLine) {
+            lines.push(...wrapTextWithAnsi(currentLine.trimEnd(), availableWidth));
+        }
+        return lines.map((line) => theme.fg("muted", line));
+    }
+}
+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: ["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 = [];
+    for (const keybinding of keybindings) {
+        const key = getKeybindings().getKeys(keybinding)[0];
+        if (key !== undefined)
+            keys.push(key);
+    }
+    if (keys.length === 0)
+        return "";
+    return formatKeyText(compactRawKeys(keys))
+        .replace(/\bpageUp\b/g, "pgup")
+        .replace(/\bpageDown\b/g, "pgdn")
+        .replace(/\bup\b/g, "↑")
+        .replace(/\bdown\b/g, "↓")
+        .replace(/\bleft\b/g, "←")
+        .replace(/\bright\b/g, "→");
+}
+function compactRawKeys(keys) {
+    if (keys.length === 1)
+        return keys[0];
+    const parts = keys.map((key) => {
+        const separatorIndex = key.lastIndexOf("+");
+        return separatorIndex === -1
+            ? { prefix: "", suffix: key }
+            : { prefix: key.slice(0, separatorIndex + 1), suffix: key.slice(separatorIndex + 1) };
+    });
+    const prefix = parts[0].prefix;
+    return prefix && parts.every((part) => part.prefix === prefix)
+        ? `${prefix}${parts.map((part) => part.suffix).join("/")}`
+        : keys.join("/");
+}
 /** Label input component shown when editing a label */
 class LabelInput {
     input;
@@ -1011,6 +1170,7 @@ export class TreeSelectorComponent extends Container {
     labelInputContainer;
     treeContainer;
     onLabelChangeCallback;
+    onCopy;
     // Focusable implementation - propagate to labelInput when active for IME cursor positioning
     _focused = false;
     get focused() {
@@ -1030,6 +1190,7 @@ export class TreeSelectorComponent extends Container {
         this.treeList = new TreeList(tree, currentLeafId, maxVisibleLines, initialSelectedId, initialFilterMode);
         this.treeList.onSelect = onSelect;
         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);
@@ -1037,15 +1198,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));
-        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")}`;
-        this.addChild(new TruncatedText(theme.fg("muted", `  ↑/↓: move. ←/→: page. ^←/^→ or Alt+←/Alt+→: fold/branch. ${keyText("app.tree.editLabel")}: label. ${filterKeys}: filters (${cycleKeys} cycle). ${keyText("app.tree.toggleLabelTimestamp")}: label time`), 0, 0));
+        this.addChild(new TreeHelp());
         this.addChild(new SearchLine(this.treeList));
         this.addChild(new DynamicBorder());
         this.addChild(new Spacer(1));