@femtomc/mu-agent 26.2.110 → 26.2.112

package/dist/extensions/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/extensions/ui.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,+BAA+B,CAAC;AAs/BpF,wBAAgB,WAAW,CAAC,EAAE,EAAE,YAAY,QA6N3C;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/extensions/ui.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,+BAA+B,CAAC;AA82CpF,wBAAgB,WAAW,CAAC,EAAE,EAAE,YAAY,QA6N3C;AAED,eAAe,WAAW,CAAC"}

package/dist/extensions/ui.js

@@ -1,5 +1,5 @@
 import { normalizeUiDocs, parseUiDoc, resolveUiStatusProfileName, uiStatusProfileWarnings, } from "@femtomc/mu-core";
-import { matchesKey } from "@mariozechner/pi-tui";
+import { matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { registerMuSubcommand } from "./mu-command-dispatcher.js";
 const UI_DISPLAY_DOCS_MAX = 16;
 const UI_PICKER_COMPONENTS_MAX = 8;
@@ -8,6 +8,18 @@ const UI_PICKER_KEYVALUE_ROWS_MAX = 4;
 const UI_SESSION_KEY_FALLBACK = "__mu_ui_active_session__";
 const UI_PROMPT_PREVIEW_MAX = 160;
 const UI_INTERACT_SHORTCUT = "ctrl+shift+u";
+const UI_PICKER_PANEL_MIN_WIDTH = 56;
+const UI_PICKER_PANEL_MAX_WIDTH = 118;
+const UI_PICKER_PANEL_WIDTH_RATIO = 0.9;
+const UI_PICKER_PANEL_TOP_MARGIN = 1;
+const UI_PICKER_PANEL_BOTTOM_MARGIN = 1;
+const UI_PICKER_TWO_PANE_MIN_WIDTH = 92;
+const UI_PICKER_TWO_PANE_LEFT_MIN = 24;
+const UI_PICKER_TWO_PANE_RIGHT_MIN = 32;
+const UI_PICKER_TWO_PANE_SEPARATOR_WIDTH = 3;
+const UI_PICKER_INTERACTION_HINT = "↑/↓ move · tab switch pane · enter select/submit · esc cancel · click rows";
+const UI_ENABLE_MOUSE_TRACKING = "\x1b[?1000h\x1b[?1006h";
+const UI_DISABLE_MOUSE_TRACKING = "\x1b[?1000l\x1b[?1006l";
 const UI_INTERACT_OVERLAY_OPTIONS = {
     anchor: "top-left",
     row: 0,
@@ -487,6 +499,45 @@ function boundedIndex(index, length) {
     }
     return index;
 }
+function parseSgrMouseEvent(data) {
+    const match = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/.exec(data);
+    if (!match) {
+        return null;
+    }
+    const buttonCode = Number.parseInt(match[1] ?? "", 10);
+    const col = Number.parseInt(match[2] ?? "", 10);
+    const row = Number.parseInt(match[3] ?? "", 10);
+    if (!Number.isInteger(buttonCode) || !Number.isInteger(col) || !Number.isInteger(row)) {
+        return null;
+    }
+    return {
+        buttonCode,
+        col,
+        row,
+        release: match[4] === "m",
+    };
+}
+function isPrimaryMouseRelease(event) {
+    if (!event.release) {
+        return false;
+    }
+    if (event.buttonCode >= 64) {
+        return false;
+    }
+    const primaryButton = event.buttonCode & 0b11;
+    return primaryButton === 0;
+}
+function fitStyledLine(text, width) {
+    const trimmed = truncateToWidth(text, width, "…", true);
+    const missing = width - visibleWidth(trimmed);
+    if (missing <= 0) {
+        return trimmed;
+    }
+    return `${trimmed}${" ".repeat(missing)}`;
+}
+function pluralize(count, singular, plural = `${singular}s`) {
+    return count === 1 ? singular : plural;
+}
 function pickerComponentLines(component) {
     switch (component.kind) {
         case "text":
@@ -525,13 +576,21 @@ function pickerComponentLines(component) {
     }
 }
 class UiActionPickerComponent {
+    #tui;
     #entries;
     #theme;
     #done;
     #mode = "doc";
     #docIndex = 0;
     #actionIndex = 0;
+    #mouseEnabled = false;
+    #panelRowStart = 1;
+    #panelRowEnd = 1;
+    #panelColStart = 1;
+    #panelColEnd = 1;
+    #mouseTargets = [];
     constructor(opts) {
+        this.#tui = opts.tui;
         this.#entries = opts.entries;
         this.#theme = opts.theme;
         this.#done = opts.done;
@@ -549,6 +608,21 @@ class UiActionPickerComponent {
                 this.#mode = "action";
             }
         }
+        this.#enableMouseTracking();
+    }
+    #enableMouseTracking() {
+        if (this.#mouseEnabled) {
+            return;
+        }
+        this.#tui.terminal.write(UI_ENABLE_MOUSE_TRACKING);
+        this.#mouseEnabled = true;
+    }
+    #disableMouseTracking() {
+        if (!this.#mouseEnabled) {
+            return;
+        }
+        this.#tui.terminal.write(UI_DISABLE_MOUSE_TRACKING);
+        this.#mouseEnabled = false;
     }
     #currentEntry() {
         return this.#entries[this.#docIndex];
@@ -583,7 +657,152 @@ class UiActionPickerComponent {
             action,
         });
     }
+    #kindChip(action) {
+        switch (action.kind) {
+            case "primary":
+                return this.#theme.fg("success", "[primary]");
+            case "danger":
+                return this.#theme.fg("error", "[danger]");
+            case "link":
+                return this.#theme.fg("accent", "[link]");
+            case "secondary":
+            default:
+                return this.#theme.fg("muted", "[secondary]");
+        }
+    }
+    #buildDocsLines() {
+        const lines = [];
+        lines.push({
+            text: this.#theme.fg(this.#mode === "doc" ? "accent" : "dim", `Documents (${this.#entries.length})`),
+        });
+        for (let idx = 0; idx < this.#entries.length; idx += 1) {
+            const entry = this.#entries[idx];
+            const active = idx === this.#docIndex;
+            const marker = active ? (this.#mode === "doc" ? "▶" : "▸") : " ";
+            const actionCount = entry.actions.length;
+            const actionLabel = actionCount > 0
+                ? `${actionCount} ${pluralize(actionCount, "action")}`
+                : "status";
+            const title = this.#theme.fg(active ? "text" : "muted", `${marker} ${entry.doc.title}`);
+            const meta = this.#theme.fg("dim", `${entry.doc.ui_id} · ${actionLabel}`);
+            lines.push({
+                text: `${title} ${meta}`,
+                selected: active,
+                docIndex: idx,
+            });
+        }
+        return lines;
+    }
+    #buildDetailLines() {
+        const lines = [];
+        const selectedDoc = this.#currentEntry().doc;
+        const selectedActions = this.#currentActions();
+        lines.push({ text: this.#theme.fg("accent", selectedDoc.title) });
+        lines.push({
+            text: this.#theme.fg("dim", `${selectedDoc.ui_id} · revision ${selectedDoc.revision.version}`),
+        });
+        if (selectedDoc.summary) {
+            lines.push({ text: this.#theme.fg("dim", `Summary: ${selectedDoc.summary}`) });
+        }
+        lines.push({ text: "" });
+        lines.push({
+            text: this.#theme.fg("dim", `Components (${selectedDoc.components.length})`),
+        });
+        const visibleComponents = selectedDoc.components.slice(0, UI_PICKER_COMPONENTS_MAX);
+        for (const component of visibleComponents) {
+            const componentLines = pickerComponentLines(component);
+            for (let idx = 0; idx < componentLines.length; idx += 1) {
+                const line = componentLines[idx];
+                const prefix = idx === 0 ? "  " : "    ";
+                lines.push({ text: this.#theme.fg("text", `${prefix}${line}`) });
+            }
+        }
+        if (selectedDoc.components.length > visibleComponents.length) {
+            lines.push({
+                text: this.#theme.fg("muted", `  ... (+${selectedDoc.components.length - visibleComponents.length} more components)`),
+            });
+        }
+        lines.push({ text: "" });
+        lines.push({
+            text: this.#theme.fg(this.#mode === "action" ? "accent" : "dim", `Actions (${selectedActions.length})`),
+        });
+        for (let idx = 0; idx < selectedActions.length; idx += 1) {
+            const action = selectedActions[idx];
+            const active = idx === this.#actionIndex;
+            const marker = active ? (this.#mode === "action" ? "▶" : "▸") : " ";
+            const label = this.#theme.fg(active ? "text" : "muted", `${marker} ${action.label}`);
+            const chip = this.#kindChip(action);
+            const idLabel = this.#theme.fg("dim", `#${action.id}`);
+            lines.push({
+                text: `${label} ${chip} ${idLabel}`,
+                selected: active,
+                actionIndex: idx,
+            });
+        }
+        const action = this.#currentAction();
+        if (action?.description) {
+            lines.push({ text: "" });
+            lines.push({ text: this.#theme.fg("dim", `Ask: ${action.description}`) });
+        }
+        if (action?.component_id) {
+            lines.push({
+                text: this.#theme.fg("dim", `Targets component: ${action.component_id}`),
+            });
+        }
+        const commandText = action ? actionCommandText(action) : null;
+        if (commandText) {
+            lines.push({ text: "" });
+            lines.push({ text: this.#theme.fg("dim", `Prompt template: ${commandText}`) });
+        }
+        return lines;
+    }
+    #singleColumnLines() {
+        const lines = [];
+        const docs = this.#buildDocsLines();
+        const detail = this.#buildDetailLines();
+        for (const line of docs) {
+            lines.push(line);
+        }
+        lines.push({ text: "" });
+        for (const line of detail) {
+            lines.push(line);
+        }
+        return lines;
+    }
+    #handleMouseEvent(event) {
+        if (!isPrimaryMouseRelease(event)) {
+            return;
+        }
+        if (event.row < this.#panelRowStart ||
+            event.row > this.#panelRowEnd ||
+            event.col < this.#panelColStart ||
+            event.col > this.#panelColEnd) {
+            return;
+        }
+        const target = this.#mouseTargets.find((candidate) => {
+            return (candidate.row === event.row &&
+                event.col >= candidate.colStart &&
+                event.col <= candidate.colEnd);
+        });
+        if (!target) {
+            return;
+        }
+        if (target.kind === "doc") {
+            this.#docIndex = boundedIndex(target.index, this.#entries.length);
+            this.#actionIndex = boundedIndex(this.#actionIndex, this.#currentActions().length);
+            this.#mode = "doc";
+            return;
+        }
+        this.#mode = "action";
+        this.#actionIndex = boundedIndex(target.index, this.#currentActions().length);
+        this.#submit();
+    }
     handleInput(data) {
+        const mouse = parseSgrMouseEvent(data);
+        if (mouse) {
+            this.#handleMouseEvent(mouse);
+            return;
+        }
         if (matchesKey(data, "escape")) {
             this.#done(null);
             return;
@@ -632,67 +851,141 @@ class UiActionPickerComponent {
     invalidate() {
         // No cached state.
     }
+    dispose() {
+        this.#disableMouseTracking();
+    }
     render(width) {
-        const maxWidth = Math.max(24, width - 2);
-        const lines = [];
-        lines.push(this.#theme.fg("accent", short("Programmable UI", maxWidth)));
-        lines.push(this.#theme.fg("dim", short("↑/↓ move · tab switch · enter select/submit · esc cancel", maxWidth)));
-        lines.push("");
-        lines.push(this.#theme.fg(this.#mode === "doc" ? "accent" : "dim", short(`Documents (${this.#entries.length})`, maxWidth)));
-        for (let idx = 0; idx < this.#entries.length; idx += 1) {
-            const entry = this.#entries[idx];
-            const active = idx === this.#docIndex;
-            const marker = active ? (this.#mode === "doc" ? "▶" : "▸") : " ";
-            const label = `${marker} ${entry.doc.ui_id} · ${entry.doc.title}`;
-            lines.push(this.#theme.fg(active ? "accent" : "muted", short(label, maxWidth)));
-        }
+        const panelTargetWidth = Math.max(UI_PICKER_PANEL_MIN_WIDTH, Math.min(UI_PICKER_PANEL_MAX_WIDTH, Math.floor(width * UI_PICKER_PANEL_WIDTH_RATIO)));
+        const panelWidth = Math.max(4, Math.min(width, panelTargetWidth));
+        const innerWidth = Math.max(1, panelWidth - 2);
         const selectedDoc = this.#currentEntry().doc;
-        if (selectedDoc.summary) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Summary: ${selectedDoc.summary}`, maxWidth)));
-        }
-        lines.push("");
-        lines.push(this.#theme.fg("dim", short(`Components (${selectedDoc.components.length})`, maxWidth)));
-        const visibleComponents = selectedDoc.components.slice(0, UI_PICKER_COMPONENTS_MAX);
-        for (const component of visibleComponents) {
-            const componentLines = pickerComponentLines(component);
-            for (let idx = 0; idx < componentLines.length; idx += 1) {
-                const line = componentLines[idx];
-                const prefix = idx === 0 ? "  " : "    ";
-                lines.push(this.#theme.fg("text", short(`${prefix}${line}`, maxWidth)));
+        const selectedActions = this.#currentActions();
+        const renderLines = [];
+        const pushFullLine = (line) => {
+            renderLines.push({
+                text: this.#theme.bg("customMessageBg", fitStyledLine(line, innerWidth)),
+            });
+        };
+        const modeLabel = this.#mode === "action" ? "action focus" : "document focus";
+        pushFullLine(`${this.#theme.fg("accent", "mu_ui")}${this.#theme.fg("dim", ` · ${this.#entries.length} ${pluralize(this.#entries.length, "doc")} · ${modeLabel}`)}`);
+        pushFullLine(this.#theme.fg("dim", short(UI_PICKER_INTERACTION_HINT, Math.max(8, innerWidth))));
+        pushFullLine(this.#theme.fg("borderMuted", "─".repeat(innerWidth)));
+        const minTwoPaneWidth = UI_PICKER_TWO_PANE_LEFT_MIN + UI_PICKER_TWO_PANE_RIGHT_MIN + UI_PICKER_TWO_PANE_SEPARATOR_WIDTH;
+        const useTwoPane = innerWidth >= UI_PICKER_TWO_PANE_MIN_WIDTH && innerWidth >= minTwoPaneWidth;
+        if (useTwoPane) {
+            let leftWidth = Math.max(UI_PICKER_TWO_PANE_LEFT_MIN, Math.floor(innerWidth * 0.34));
+            let rightWidth = innerWidth - leftWidth - UI_PICKER_TWO_PANE_SEPARATOR_WIDTH;
+            if (rightWidth < UI_PICKER_TWO_PANE_RIGHT_MIN) {
+                leftWidth = Math.max(UI_PICKER_TWO_PANE_LEFT_MIN, innerWidth - UI_PICKER_TWO_PANE_RIGHT_MIN - UI_PICKER_TWO_PANE_SEPARATOR_WIDTH);
+                rightWidth = innerWidth - leftWidth - UI_PICKER_TWO_PANE_SEPARATOR_WIDTH;
+            }
+            const leftLines = this.#buildDocsLines();
+            const rightLines = this.#buildDetailLines();
+            const rowCount = Math.max(leftLines.length, rightLines.length);
+            for (let idx = 0; idx < rowCount; idx += 1) {
+                const left = leftLines[idx];
+                const right = rightLines[idx];
+                const leftCell = this.#theme.bg(left?.selected ? "selectedBg" : "customMessageBg", fitStyledLine(left?.text ?? "", leftWidth));
+                const separator = this.#theme.bg("customMessageBg", this.#theme.fg("borderMuted", " │ "));
+                const rightCell = this.#theme.bg(right?.selected ? "selectedBg" : "customMessageBg", fitStyledLine(right?.text ?? "", rightWidth));
+                const row = {
+                    text: `${leftCell}${separator}${rightCell}`,
+                };
+                if (left?.docIndex !== undefined) {
+                    row.docTarget = {
+                        index: left.docIndex,
+                        colStart: 1,
+                        colEnd: leftWidth,
+                    };
+                }
+                if (right?.actionIndex !== undefined) {
+                    row.actionTarget = {
+                        index: right.actionIndex,
+                        colStart: leftWidth + UI_PICKER_TWO_PANE_SEPARATOR_WIDTH + 1,
+                        colEnd: leftWidth + UI_PICKER_TWO_PANE_SEPARATOR_WIDTH + rightWidth,
+                    };
+                }
+                renderLines.push(row);
             }
         }
-        if (selectedDoc.components.length > visibleComponents.length) {
-            lines.push(this.#theme.fg("muted", short(`  ... (+${selectedDoc.components.length - visibleComponents.length} more components)`, maxWidth)));
-        }
-        const actions = this.#currentActions();
-        lines.push("");
-        lines.push(this.#theme.fg(this.#mode === "action" ? "accent" : "dim", short(`Actions (${actions.length})`, maxWidth)));
-        for (let idx = 0; idx < actions.length; idx += 1) {
-            const action = actions[idx];
-            const active = idx === this.#actionIndex;
-            const marker = active ? (this.#mode === "action" ? "▶" : "▸") : " ";
-            const label = `${marker} ${action.id} · ${action.label}`;
-            lines.push(this.#theme.fg(active ? "accent" : "text", short(label, maxWidth)));
+        else {
+            const singleColumn = this.#singleColumnLines();
+            for (const line of singleColumn) {
+                const row = {
+                    text: this.#theme.bg(line.selected ? "selectedBg" : "customMessageBg", fitStyledLine(line.text, innerWidth)),
+                };
+                if (line.docIndex !== undefined) {
+                    row.docTarget = {
+                        index: line.docIndex,
+                        colStart: 1,
+                        colEnd: innerWidth,
+                    };
+                }
+                if (line.actionIndex !== undefined) {
+                    row.actionTarget = {
+                        index: line.actionIndex,
+                        colStart: 1,
+                        colEnd: innerWidth,
+                    };
+                }
+                renderLines.push(row);
+            }
         }
-        const action = this.#currentAction();
-        if (action?.description) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Ask: ${action.description}`, maxWidth)));
+        pushFullLine(this.#theme.fg("borderMuted", "─".repeat(innerWidth)));
+        pushFullLine(this.#theme.fg("dim", short(`selected ${selectedDoc.ui_id} · revision ${selectedDoc.revision.version} · ${selectedActions.length} ${pluralize(selectedActions.length, "action")}`, Math.max(8, innerWidth))));
+        const topMarginRows = Math.max(0, UI_PICKER_PANEL_TOP_MARGIN);
+        const bottomMarginRows = Math.max(0, UI_PICKER_PANEL_BOTTOM_MARGIN);
+        const leftPadWidth = Math.max(0, Math.floor((width - panelWidth) / 2));
+        const leftPad = " ".repeat(leftPadWidth);
+        const panelColStart = leftPadWidth + 1;
+        const frame = [];
+        for (let row = 0; row < topMarginRows; row += 1) {
+            frame.push("");
         }
-        if (action?.component_id) {
-            lines.push(this.#theme.fg("dim", short(`Targets component: ${action.component_id}`, maxWidth)));
+        const title = " mu_ui ";
+        const titleWidth = Math.min(innerWidth, visibleWidth(title));
+        const leftRule = "─".repeat(Math.max(0, Math.floor((innerWidth - titleWidth) / 2)));
+        const rightRule = "─".repeat(Math.max(0, innerWidth - titleWidth - leftRule.length));
+        frame.push(`${leftPad}${this.#theme.fg("borderAccent", `╭${leftRule}`)}${this.#theme.fg("accent", title)}${this.#theme.fg("borderAccent", `${rightRule}╮`)}`);
+        this.#mouseTargets = [];
+        const contentStartRow = frame.length + 1;
+        for (let idx = 0; idx < renderLines.length; idx += 1) {
+            const line = renderLines[idx];
+            frame.push(`${leftPad}${this.#theme.fg("border", "│")}${line.text}${this.#theme.fg("border", "│")}`);
+            const row = contentStartRow + idx;
+            if (line.docTarget) {
+                this.#mouseTargets.push({
+                    kind: "doc",
+                    index: line.docTarget.index,
+                    row,
+                    colStart: panelColStart + line.docTarget.colStart,
+                    colEnd: panelColStart + line.docTarget.colEnd,
+                });
+            }
+            if (line.actionTarget) {
+                this.#mouseTargets.push({
+                    kind: "action",
+                    index: line.actionTarget.index,
+                    row,
+                    colStart: panelColStart + line.actionTarget.colStart,
+                    colEnd: panelColStart + line.actionTarget.colEnd,
+                });
+            }
         }
-        const commandText = action ? actionCommandText(action) : null;
-        if (commandText) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Prompt template: ${commandText}`, maxWidth)));
+        frame.push(`${leftPad}${this.#theme.fg("borderAccent", `╰${"─".repeat(innerWidth)}╯`)}`);
+        for (let row = 0; row < bottomMarginRows; row += 1) {
+            frame.push("");
         }
-        return lines;
+        this.#panelRowStart = topMarginRows + 1;
+        this.#panelRowEnd = this.#panelRowStart + renderLines.length + 1;
+        this.#panelColStart = panelColStart;
+        this.#panelColEnd = leftPadWidth + panelWidth;
+        return frame;
     }
 }
 async function pickUiActionInteractively(opts) {
-    const selected = await opts.ctx.ui.custom((_tui, theme, _keybindings, done) => new UiActionPickerComponent({
+    const selected = await opts.ctx.ui.custom((tui, theme, _keybindings, done) => new UiActionPickerComponent({
+        tui,
         entries: opts.entries,
         theme: theme,
         done,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@femtomc/mu-agent",
-	"version": "26.2.110",
+	"version": "26.2.112",
 	"description": "Shared operator runtime for mu assistant sessions and serve extensions.",
 	"keywords": [
 		"mu",
@@ -25,7 +25,7 @@
 		"themes/**"
 	],
 	"dependencies": {
-		"@femtomc/mu-core": "26.2.110",
+		"@femtomc/mu-core": "26.2.112",
 		"@mariozechner/pi-agent-core": "^0.54.2",
 		"@mariozechner/pi-ai": "^0.54.2",
 		"@mariozechner/pi-coding-agent": "^0.54.2",