@femtomc/mu-agent 26.2.111 → 26.2.113

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;AAsqCpF,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;AAw4CpF,wBAAgB,WAAW,CAAC,EAAE,EAAE,YAAY,QA6N3C;AAED,eAAe,WAAW,CAAC"}

package/dist/extensions/ui.js

@@ -13,6 +13,13 @@ 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_PANEL_INNER_PADDING_X = 2;
+const UI_PICKER_PANEL_INNER_PADDING_Y = 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 = {
@@ -522,6 +529,17 @@ function isPrimaryMouseRelease(event) {
     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":
@@ -572,8 +590,7 @@ class UiActionPickerComponent {
     #panelRowEnd = 1;
     #panelColStart = 1;
     #panelColEnd = 1;
-    #docHitRows = new Map();
-    #actionHitRows = new Map();
+    #mouseTargets = [];
     constructor(opts) {
         this.#tui = opts.tui;
         this.#entries = opts.entries;
@@ -642,6 +659,118 @@ 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;
@@ -652,19 +781,23 @@ class UiActionPickerComponent {
             event.col > this.#panelColEnd) {
             return;
         }
-        const docIndex = this.#docHitRows.get(event.row);
-        if (docIndex !== undefined) {
-            this.#docIndex = boundedIndex(docIndex, this.#entries.length);
+        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;
         }
-        const actionIndex = this.#actionHitRows.get(event.row);
-        if (actionIndex !== undefined) {
-            this.#mode = "action";
-            this.#actionIndex = boundedIndex(actionIndex, this.#currentActions().length);
-            this.#submit();
-        }
+        this.#mode = "action";
+        this.#actionIndex = boundedIndex(target.index, this.#currentActions().length);
+        this.#submit();
     }
     handleInput(data) {
         const mouse = parseSgrMouseEvent(data);
@@ -727,72 +860,94 @@ class UiActionPickerComponent {
         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 maxContentWidth = Math.max(8, innerWidth);
-        const content = [];
-        const docHitRowsByContentIndex = new Map();
-        const actionHitRowsByContentIndex = new Map();
-        const pushContent = (line) => {
-            content.push(truncateToWidth(line, innerWidth, "…", true));
-        };
-        pushContent(this.#theme.fg("accent", short("Programmable UI", maxContentWidth)));
-        pushContent(this.#theme.fg("dim", short("↑/↓ move · tab switch · enter select/submit · esc cancel · click action to submit", maxContentWidth)));
-        pushContent("");
-        pushContent(this.#theme.fg(this.#mode === "doc" ? "accent" : "dim", short(`Documents (${this.#entries.length})`, maxContentWidth)));
-        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}`;
-            docHitRowsByContentIndex.set(content.length, idx);
-            pushContent(this.#theme.fg(active ? "accent" : "muted", short(label, maxContentWidth)));
-        }
+        const horizontalPadding = Math.min(UI_PICKER_PANEL_INNER_PADDING_X, Math.max(0, Math.floor((innerWidth - 1) / 2)));
+        const contentWidth = Math.max(1, innerWidth - horizontalPadding * 2);
         const selectedDoc = this.#currentEntry().doc;
-        if (selectedDoc.summary) {
-            pushContent("");
-            pushContent(this.#theme.fg("dim", short(`Summary: ${selectedDoc.summary}`, maxContentWidth)));
-        }
-        pushContent("");
-        pushContent(this.#theme.fg("dim", short(`Components (${selectedDoc.components.length})`, maxContentWidth)));
-        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 ? "  " : "    ";
-                pushContent(this.#theme.fg("text", short(`${prefix}${line}`, maxContentWidth)));
+        const selectedActions = this.#currentActions();
+        const renderLines = [];
+        const innerPadSegment = horizontalPadding > 0 ? this.#theme.bg("customMessageBg", " ".repeat(horizontalPadding)) : "";
+        const contentRowText = (line, bg) => {
+            const core = this.#theme.bg(bg, fitStyledLine(line, contentWidth));
+            return `${innerPadSegment}${core}${innerPadSegment}`;
+        };
+        const pushFullLine = (line) => {
+            renderLines.push({
+                text: contentRowText(line, "customMessageBg"),
+            });
+        };
+        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, contentWidth))));
+        pushFullLine(this.#theme.fg("borderMuted", "─".repeat(contentWidth)));
+        const minTwoPaneWidth = UI_PICKER_TWO_PANE_LEFT_MIN + UI_PICKER_TWO_PANE_RIGHT_MIN + UI_PICKER_TWO_PANE_SEPARATOR_WIDTH;
+        const useTwoPane = contentWidth >= UI_PICKER_TWO_PANE_MIN_WIDTH && contentWidth >= minTwoPaneWidth;
+        if (useTwoPane) {
+            let leftWidth = Math.max(UI_PICKER_TWO_PANE_LEFT_MIN, Math.floor(contentWidth * 0.34));
+            let rightWidth = contentWidth - leftWidth - UI_PICKER_TWO_PANE_SEPARATOR_WIDTH;
+            if (rightWidth < UI_PICKER_TWO_PANE_RIGHT_MIN) {
+                leftWidth = Math.max(UI_PICKER_TWO_PANE_LEFT_MIN, contentWidth - UI_PICKER_TWO_PANE_RIGHT_MIN - UI_PICKER_TWO_PANE_SEPARATOR_WIDTH);
+                rightWidth = contentWidth - 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: `${innerPadSegment}${leftCell}${separator}${rightCell}${innerPadSegment}`,
+                };
+                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) {
-            pushContent(this.#theme.fg("muted", short(`  ... (+${selectedDoc.components.length - visibleComponents.length} more components)`, maxContentWidth)));
-        }
-        const actions = this.#currentActions();
-        pushContent("");
-        pushContent(this.#theme.fg(this.#mode === "action" ? "accent" : "dim", short(`Actions (${actions.length})`, maxContentWidth)));
-        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}`;
-            actionHitRowsByContentIndex.set(content.length, idx);
-            pushContent(this.#theme.fg(active ? "accent" : "text", short(label, maxContentWidth)));
-        }
-        const action = this.#currentAction();
-        if (action?.description) {
-            pushContent("");
-            pushContent(this.#theme.fg("dim", short(`Ask: ${action.description}`, maxContentWidth)));
-        }
-        if (action?.component_id) {
-            pushContent(this.#theme.fg("dim", short(`Targets component: ${action.component_id}`, maxContentWidth)));
-        }
-        const commandText = action ? actionCommandText(action) : null;
-        if (commandText) {
-            pushContent("");
-            pushContent(this.#theme.fg("dim", short(`Prompt template: ${commandText}`, maxContentWidth)));
+        else {
+            const singleColumn = this.#singleColumnLines();
+            for (const line of singleColumn) {
+                const row = {
+                    text: contentRowText(line.text, line.selected ? "selectedBg" : "customMessageBg"),
+                };
+                if (line.docIndex !== undefined) {
+                    row.docTarget = {
+                        index: line.docIndex,
+                        colStart: 1,
+                        colEnd: contentWidth,
+                    };
+                }
+                if (line.actionIndex !== undefined) {
+                    row.actionTarget = {
+                        index: line.actionIndex,
+                        colStart: 1,
+                        colEnd: contentWidth,
+                    };
+                }
+                renderLines.push(row);
+            }
         }
+        pushFullLine(this.#theme.fg("borderMuted", "─".repeat(contentWidth)));
+        pushFullLine(this.#theme.fg("dim", short(`selected ${selectedDoc.ui_id} · revision ${selectedDoc.revision.version} · ${selectedActions.length} ${pluralize(selectedActions.length, "action")}`, Math.max(8, contentWidth))));
         const topMarginRows = Math.max(0, UI_PICKER_PANEL_TOP_MARGIN);
         const bottomMarginRows = Math.max(0, UI_PICKER_PANEL_BOTTOM_MARGIN);
+        const verticalPadding = Math.max(0, UI_PICKER_PANEL_INNER_PADDING_Y);
         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("");
@@ -802,31 +957,46 @@ class UiActionPickerComponent {
         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.#docHitRows.clear();
-        this.#actionHitRows.clear();
+        this.#mouseTargets = [];
+        const blankInnerRow = `${leftPad}${this.#theme.fg("border", "│")}${this.#theme.bg("customMessageBg", " ".repeat(innerWidth))}${this.#theme.fg("border", "│")}`;
+        for (let row = 0; row < verticalPadding; row += 1) {
+            frame.push(blankInnerRow);
+        }
         const contentStartRow = frame.length + 1;
-        for (let idx = 0; idx < content.length; idx += 1) {
-            const line = content[idx] ?? "";
-            const visible = visibleWidth(line);
-            const fill = " ".repeat(Math.max(0, innerWidth - visible));
-            frame.push(`${leftPad}${this.#theme.fg("border", "│")}${this.#theme.bg("customMessageBg", `${line}${fill}`)}${this.#theme.fg("border", "│")}`);
+        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;
-            const docIndex = docHitRowsByContentIndex.get(idx);
-            if (docIndex !== undefined) {
-                this.#docHitRows.set(row, docIndex);
+            if (line.docTarget) {
+                this.#mouseTargets.push({
+                    kind: "doc",
+                    index: line.docTarget.index,
+                    row,
+                    colStart: panelColStart + horizontalPadding + line.docTarget.colStart,
+                    colEnd: panelColStart + horizontalPadding + line.docTarget.colEnd,
+                });
             }
-            const actionIndex = actionHitRowsByContentIndex.get(idx);
-            if (actionIndex !== undefined) {
-                this.#actionHitRows.set(row, actionIndex);
+            if (line.actionTarget) {
+                this.#mouseTargets.push({
+                    kind: "action",
+                    index: line.actionTarget.index,
+                    row,
+                    colStart: panelColStart + horizontalPadding + line.actionTarget.colStart,
+                    colEnd: panelColStart + horizontalPadding + line.actionTarget.colEnd,
+                });
             }
         }
+        for (let row = 0; row < verticalPadding; row += 1) {
+            frame.push(blankInnerRow);
+        }
         frame.push(`${leftPad}${this.#theme.fg("borderAccent", `╰${"─".repeat(innerWidth)}╯`)}`);
         for (let row = 0; row < bottomMarginRows; row += 1) {
             frame.push("");
         }
         this.#panelRowStart = topMarginRows + 1;
-        this.#panelRowEnd = this.#panelRowStart + content.length + 1;
-        this.#panelColStart = leftPadWidth + 1;
+        const panelRows = 1 + verticalPadding + renderLines.length + verticalPadding + 1;
+        this.#panelRowEnd = this.#panelRowStart + panelRows - 1;
+        this.#panelColStart = panelColStart;
         this.#panelColEnd = leftPadWidth + panelWidth;
         return frame;
     }

package/package.json

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