mu-harness 0.16.22 → 0.17.1

package/esm/tui/chat/ChatApp.d.ts

@@ -54,12 +54,12 @@ export interface ChatHost {
      */
     banner?: string;
     /**
-     * Lean input presentation: drop the surface-background input frame, the
-     * model/provider/agent footer inside the input, and the context readout on
-     * the status bar — leaving a bare prompt + editor. The {@link ChatHost.banner}
+     * Lean input presentation: keep the surface-background input frame but drop
+     * the model/provider/agent footer inside the input and the context readout on
+     * the status bar — leaving a framed prompt + editor. The {@link ChatHost.banner}
      * splash is independent and still shown if set. Hosts that want the full
-     * information-rich input (surface frame, model · provider · @agent footer,
-     * token/context usage in the status line) leave this unset (the default).
+     * information-rich input (model · provider · @agent footer, token/context usage
+     * in the status line) leave this unset (the default).
      */
     minimal?: boolean;
     onExit(code: number): void;
@@ -89,6 +89,8 @@ export declare class ChatApp {
     private running;
     private readonly queue;
     private readonly pendingShell;
+    private readonly pastes;
+    private pasteSeq;
     private models;
     private paletteCursor;
     private paletteDismissedFor;
@@ -132,8 +134,11 @@ export declare class ChatApp {
     private onTurnComplete;
     private stripFileMentions;
     private send;
+    private capturePaste;
+    private expandPastes;
     private flushShellContext;
     private submit;
+    private clearPastes;
     private enqueueFromInput;
     private onInputChange;
     private intercept;
@@ -148,7 +153,6 @@ export declare class ChatApp {
     private pickerVisible;
     private pickerMove;
     private pickerAccept;
-    private deleteMention;
     private pushHistory;
     private navigateHistory;
     private newSession;

package/esm/tui/chat/ChatApp.js

@@ -4,9 +4,9 @@ import { dirname, isAbsolute, relative, resolve } from 'node:path';
 import { box, column, flex, measure, ProcessTerminal, scrollView, truncateToWidth, TUI, visibleWidth, } from 'mu-tui';
 import { buildCommands, filterCommands } from './commands.js';
 import { MultilineEditor } from './editor.js';
-import { activeMention, collectCandidates, rank } from './picker.js';
+import { activeMention, collectCandidates, mentionRanges, rank } from './picker.js';
 import { formatTokens, statusComponent, statusFromEvent } from './status.js';
-import { asHexColor, styleToAnsi, ThemeProvider, themesByName } from './theme.js';
+import { asHexColor, fgToAnsi, styleToAnsi, ThemeProvider, themesByName } from './theme.js';
 import { entryComponent, formatToolArgs, stickyHeader, Transcript, transcriptComponent, } from './transcript.js';
 const RESET = '\x1b[0m';
 const PROMPT_WIDTH = 2;
@@ -88,6 +88,8 @@ export class ChatApp {
     running = false;
     queue = [];
     pendingShell = [];
+    pastes = new Map();
+    pasteSeq = 0;
     models = [];
     paletteCursor = 0;
     paletteDismissedFor = '__none__';
@@ -132,6 +134,20 @@ export class ChatApp {
             onSubmit: (value) => this.submit(value),
             onChange: (value) => this.onInputChange(value),
         });
+        this.editor.mentionRanges = (value, cursor) => {
+            const ranges = mentionRanges(value, activeMention(value, cursor)?.start);
+            for (const placeholder of this.pastes.keys()) {
+                for (let i = value.indexOf(placeholder); i !== -1; i = value.indexOf(placeholder, i + placeholder.length)) {
+                    ranges.push({ start: i, end: i + placeholder.length });
+                }
+            }
+            return ranges;
+        };
+        this.editor.onPaste = (text) => this.capturePaste(text);
+        this.editor.chipColor = () => {
+            const bg = this.theme().styles.commandPaletteSelected.bg;
+            return bg ? fgToAnsi(bg) : '';
+        };
         this.scroll = scrollView({ render: (s) => transcriptComponent(this.transcript, this.theme()).render(s) }, { stickyHeader: (info) => this.stickyHeaderView(info), footer: () => this.jumpToBottomHint() });
         this.subScroll = scrollView({ render: (s) => transcriptComponent(this.subTranscript, this.theme()).render(s) });
         this.commands = buildCommands(this.commandHost()).filter((c) => {
@@ -143,6 +159,8 @@ export class ChatApp {
         });
         this.tui.setRoot({ render: (s) => this.root().render(s) });
         this.tui.setBackgroundColor(this.theme().colors.background);
+        this.tui.setToastBackground(this.theme().colors.surface);
+        this.tui.setToastForeground(this.theme().colors.text);
         this.tui.setFocus(this.editor);
         this.tui.addInputInterceptor((event) => this.intercept(event));
         this.tui.addGlobalKeybinding({ chord: { key: 'c', ctrl: true }, handler: () => this.onCtrlC() });
@@ -151,6 +169,8 @@ export class ChatApp {
         this.tui.addGlobalKeybinding({ chord: { key: 'end', ctrl: true }, handler: () => this.jumpToBottom() });
         this.unsubscribeTheme = this.themeProvider.subscribe(() => {
             this.tui.setBackgroundColor(this.theme().colors.background);
+            this.tui.setToastBackground(this.theme().colors.surface);
+            this.tui.setToastForeground(this.theme().colors.text);
             this.tui.requestRender(true);
         });
         this.bindSession();
@@ -462,6 +482,23 @@ export class ChatApp {
             this.showError(err instanceof Error ? err.message : String(err));
         });
     }
+    capturePaste(text) {
+        const lines = text.split('\n').length;
+        if (lines < 2 && text.length <= 200)
+            return undefined;
+        const id = ++this.pasteSeq;
+        const summary = lines > 1 ? `${lines} lines` : `${text.length} chars`;
+        const placeholder = `[pasted #${id}, ${summary}]`;
+        this.pastes.set(placeholder, text);
+        return placeholder;
+    }
+    expandPastes(text) {
+        let out = text;
+        for (const [placeholder, content] of this.pastes) {
+            out = out.split(placeholder).join(content);
+        }
+        return out;
+    }
     flushShellContext(userText) {
         if (this.pendingShell.length === 0)
             return userText;
@@ -478,35 +515,47 @@ export class ChatApp {
         if (this.modelPickerOpen || this.sessionPickerOpen)
             return;
         this.clearError();
-        this.pushHistory(trimmed);
+        const text = this.expandPastes(trimmed);
         this.editor.setValue('');
-        if (trimmed.startsWith('!') || trimmed.startsWith('$')) {
-            this.runShell(trimmed.slice(1).trim());
+        this.clearPastes();
+        this.pushHistory(text);
+        if (text.startsWith('!') || text.startsWith('$')) {
+            this.runShell(text.slice(1).trim());
             return;
         }
-        if (trimmed.startsWith('/')) {
-            this.runCommand(trimmed);
+        if (text.startsWith('/')) {
+            this.runCommand(text);
             return;
         }
-        if (this.tryDispatch(trimmed))
+        if (this.tryDispatch(text))
             return;
         if (this.running) {
-            this.queue.push(trimmed);
+            this.queue.push(text);
             this.tui.requestRender();
             return;
         }
-        this.send(trimmed);
+        this.send(text);
+    }
+    clearPastes() {
+        this.pastes.clear();
+        this.pasteSeq = 0;
     }
     enqueueFromInput() {
         const value = this.editor.getValue().trim();
         if (!value)
             return;
-        this.pushHistory(value);
+        const text = this.expandPastes(value);
         this.editor.setValue('');
-        this.queue.push(value);
+        this.clearPastes();
+        this.pushHistory(text);
+        this.queue.push(text);
         this.tui.requestRender();
     }
     onInputChange(value) {
+        for (const placeholder of this.pastes.keys()) {
+            if (!value.includes(placeholder))
+                this.pastes.delete(placeholder);
+        }
         if (value !== this.paletteDismissedFor)
             this.paletteDismissedFor = '__none__';
         const items = this.paletteItems();
@@ -554,11 +603,6 @@ export class ChatApp {
         }
         if (key === 'escape' || key === 'esc')
             return this.onEscape();
-        if (key === 'backspace') {
-            if (this.deleteMention())
-                return true;
-            return false;
-        }
         if (key === 'enter' && event.alt) {
             if (this.running) {
                 this.enqueueFromInput();
@@ -716,25 +760,6 @@ export class ChatApp {
         this.tui.requestRender();
         return true;
     }
-    deleteMention() {
-        if (this.pickerMention !== undefined)
-            return false;
-        const value = this.editor.getValue();
-        const cursor = this.editor.cursorPos;
-        const re = /@[^\s]+/g;
-        let match;
-        while ((match = re.exec(value)) !== null) {
-            const start = match.index;
-            const end = start + match[0].length;
-            if (cursor > start && cursor <= end) {
-                this.editor.setValue(value.slice(0, start) + value.slice(end));
-                this.editor.setCursor(start);
-                this.tui.requestRender();
-                return true;
-            }
-        }
-        return false;
-    }
     pushHistory(text) {
         this.host.history?.append(text);
         if (this.history[this.history.length - 1] !== text)
@@ -1091,8 +1116,6 @@ export class ChatApp {
     }
     inputPanel() {
         const inner = this.approvalView() ?? this.editorInner();
-        if (this.minimal)
-            return box(inner, { padding: 0 });
         return box(inner, { background: this.theme().colors.surface, padding: 1 });
     }
     editorInner() {

package/esm/tui/chat/editor.d.ts

@@ -5,12 +5,19 @@ export interface MultilineEditorOptions {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
 }
+interface ChipRange {
+    start: number;
+    end: number;
+}
 export declare class MultilineEditor implements Component {
     private value;
     private cursor;
     private readonly placeholder;
     private readonly maxRows;
     hiddenPrefix: string;
+    chipColor?: () => string;
+    mentionRanges?: (value: string, cursor: number) => ChipRange[];
+    onPaste?: (text: string) => string | undefined;
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
     constructor(opts?: MultilineEditorOptions);
@@ -24,8 +31,13 @@ export declare class MultilineEditor implements Component {
     private lineStart;
     private lineEnd;
     private insert;
+    private chips;
+    private moveLeft;
+    private moveRight;
     private backspace;
     private deleteForward;
     private cursorRowCol;
     render(s: Surface): void;
+    private renderRow;
 }
+export {};

package/esm/tui/chat/editor.js

@@ -2,12 +2,16 @@ import { truncateToWidth, visibleWidth } from 'mu-tui';
 const CURSOR = '\x1b[7m';
 const RESET = '\x1b[0m';
 const DIM = '\x1b[2m';
+const CHIP = '\x1b[33m';
 export class MultilineEditor {
     value = '';
     cursor = 0;
     placeholder;
     maxRows;
     hiddenPrefix = '';
+    chipColor;
+    mentionRanges;
+    onPaste;
     onSubmit;
     onChange;
     constructor(opts = {}) {
@@ -36,7 +40,7 @@ export class MultilineEditor {
     }
     handleInput(event) {
         if (event.type === 'paste') {
-            this.insert(event.text);
+            this.insert(this.onPaste?.(event.text) ?? event.text);
             return;
         }
         if (event.type === 'text') {
@@ -62,10 +66,10 @@ export class MultilineEditor {
                 this.deleteForward();
                 return;
             case 'left':
-                this.cursor = Math.max(0, this.cursor - 1);
+                this.moveLeft();
                 return;
             case 'right':
-                this.cursor = Math.min(this.value.length, this.cursor + 1);
+                this.moveRight();
                 return;
             case 'home':
                 this.cursor = this.lineStart();
@@ -90,17 +94,35 @@ export class MultilineEditor {
         this.cursor += text.length;
         this.onChange?.(this.value);
     }
+    chips() {
+        return this.mentionRanges ? this.mentionRanges(this.value, this.cursor) : [];
+    }
+    moveLeft() {
+        const chip = this.chips().find((c) => c.start < this.cursor && this.cursor <= c.end);
+        this.cursor = chip ? chip.start : Math.max(0, this.cursor - 1);
+    }
+    moveRight() {
+        const chip = this.chips().find((c) => c.start <= this.cursor && this.cursor < c.end);
+        this.cursor = chip ? chip.end : Math.min(this.value.length, this.cursor + 1);
+    }
     backspace() {
         if (this.cursor === 0)
             return;
-        this.value = this.value.slice(0, this.cursor - 1) + this.value.slice(this.cursor);
-        this.cursor -= 1;
+        const chip = this.chips().find((c) => c.start < this.cursor && this.cursor <= c.end);
+        const from = chip ? chip.start : this.cursor - 1;
+        const to = chip ? chip.end : this.cursor;
+        this.value = this.value.slice(0, from) + this.value.slice(to);
+        this.cursor = from;
         this.onChange?.(this.value);
     }
     deleteForward() {
         if (this.cursor >= this.value.length)
             return;
-        this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + 1);
+        const chip = this.chips().find((c) => c.start <= this.cursor && this.cursor < c.end);
+        const from = chip ? chip.start : this.cursor;
+        const to = chip ? chip.end : this.cursor + 1;
+        this.value = this.value.slice(0, from) + this.value.slice(to);
+        this.cursor = from;
         this.onChange?.(this.value);
     }
     cursorRowCol(lines, cursor) {
@@ -124,24 +146,60 @@ export class MultilineEditor {
             s.text(0, 0, `${DIM}${ph}${RESET}`);
             return;
         }
+        const off = hidden ? 1 : 0;
+        const chipColor = this.chipColor?.() || CHIP;
+        const chips = this.chips()
+            .map((c) => ({ start: c.start - off, end: c.end - off }))
+            .filter((c) => c.end > 0);
         const lines = value.split('\n');
         const { row: cr, col: cc } = this.cursorRowCol(lines, cursorIdx);
         const height = Math.max(1, s.height);
         const top = cr >= height ? cr - height + 1 : 0;
+        const lineStarts = [];
+        let offset = 0;
+        for (const line of lines) {
+            lineStarts.push(offset);
+            offset += line.length + 1;
+        }
         for (let r = 0; r < height && top + r < lines.length; r++) {
-            const line = lines[top + r];
-            if (top + r === cr && s.focused) {
-                const hscroll = cc >= width ? cc - width + 1 : 0;
-                const visible = line.slice(hscroll, hscroll + width);
-                const col = cc - hscroll;
-                const before = visible.slice(0, col);
-                const at = visible.slice(col, col + 1) || ' ';
-                const after = visible.slice(col + 1);
-                s.text(0, r, `${before}${CURSOR}${at}${RESET}${after}`);
+            const idx = top + r;
+            const line = lines[idx];
+            const isCursorRow = idx === cr && s.focused;
+            const hscroll = isCursorRow && cc >= width ? cc - width + 1 : 0;
+            s.text(0, r, this.renderRow(line, lineStarts[idx], chips, chipColor, hscroll, width, isCursorRow ? cc : null));
+        }
+    }
+    renderRow(line, lineStart, chips, chipColor, hscroll, width, cursorCol) {
+        const inChip = (abs) => chips.some((c) => abs >= c.start && abs < c.end);
+        let out = '';
+        let yellow = false;
+        for (let c = hscroll; c < hscroll + width; c++) {
+            const isCursor = cursorCol !== null && c === cursorCol;
+            const hasChar = c < line.length;
+            if (!hasChar && !isCursor)
+                break;
+            const ch = hasChar ? line[c] : ' ';
+            if (isCursor) {
+                if (yellow) {
+                    out += RESET;
+                    yellow = false;
+                }
+                out += `${CURSOR}${ch}${RESET}`;
+                continue;
+            }
+            const wantYellow = hasChar && inChip(lineStart + c);
+            if (wantYellow && !yellow) {
+                out += chipColor;
+                yellow = true;
             }
-            else {
-                s.text(0, r, line.length > width ? line.slice(0, width) : line);
+            else if (!wantYellow && yellow) {
+                out += RESET;
+                yellow = false;
             }
+            out += ch;
         }
+        if (yellow)
+            out += RESET;
+        return out;
     }
 }

package/esm/tui/chat/picker.d.ts

@@ -5,6 +5,11 @@ export interface Candidate {
 }
 export declare function collectCandidates(cwd: string, agentNames: string[]): Candidate[];
 export declare function rank(query: string, candidates: Candidate[], limit?: number): Candidate[];
+export interface MentionRange {
+    start: number;
+    end: number;
+}
+export declare function mentionRanges(value: string, excludeStart?: number): MentionRange[];
 export interface ActiveMention {
     start: number;
     query: string;

package/esm/tui/chat/picker.js

@@ -169,6 +169,20 @@ export function rank(query, candidates, limit = 8) {
     scored.sort((a, b) => b.score - a.score);
     return scored.slice(0, limit).map((entry) => entry.candidate);
 }
+export function mentionRanges(value, excludeStart) {
+    const ranges = [];
+    const re = /@[^\s]+/g;
+    let match;
+    while ((match = re.exec(value)) !== null) {
+        const start = match.index;
+        if (start === excludeStart)
+            continue;
+        if (start > 0 && !/\s/.test(value[start - 1] ?? ' '))
+            continue;
+        ranges.push({ start, end: start + match[0].length });
+    }
+    return ranges;
+}
 export function activeMention(value, cursor) {
     let start = -1;
     for (let i = cursor - 1; i >= 0; i--) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mu-harness",
-  "version": "0.16.22",
+  "version": "0.17.1",
   "description": "Agent harness: createHarness wires mu-core into a host — XDG paths, model registry, plugins, disk-loaded agents & skills, sub-agents, sessions (JSONL + SQLite catalog), slash commands, permission/approval hooks, an optional scheduler, and a composable TUI chat app",
   "license": "MIT",
   "main": "./script/index.js",
@@ -23,8 +23,8 @@
     "@swc/wasm-typescript": "^1.15.0",
     "cli-highlight": "^2.1.11",
     "croner": "^9.0.0",
-    "mu-core": "^0.16.22",
-    "mu-tui": "^0.16.22"
+    "mu-core": "^0.17.1",
+    "mu-tui": "^0.17.1"
   },
   "_generatedBy": "dnt@dev",
   "types": "./esm/index.d.ts"

package/script/tui/chat/ChatApp.d.ts

@@ -54,12 +54,12 @@ export interface ChatHost {
      */
     banner?: string;
     /**
-     * Lean input presentation: drop the surface-background input frame, the
-     * model/provider/agent footer inside the input, and the context readout on
-     * the status bar — leaving a bare prompt + editor. The {@link ChatHost.banner}
+     * Lean input presentation: keep the surface-background input frame but drop
+     * the model/provider/agent footer inside the input and the context readout on
+     * the status bar — leaving a framed prompt + editor. The {@link ChatHost.banner}
      * splash is independent and still shown if set. Hosts that want the full
-     * information-rich input (surface frame, model · provider · @agent footer,
-     * token/context usage in the status line) leave this unset (the default).
+     * information-rich input (model · provider · @agent footer, token/context usage
+     * in the status line) leave this unset (the default).
      */
     minimal?: boolean;
     onExit(code: number): void;
@@ -89,6 +89,8 @@ export declare class ChatApp {
     private running;
     private readonly queue;
     private readonly pendingShell;
+    private readonly pastes;
+    private pasteSeq;
     private models;
     private paletteCursor;
     private paletteDismissedFor;
@@ -132,8 +134,11 @@ export declare class ChatApp {
     private onTurnComplete;
     private stripFileMentions;
     private send;
+    private capturePaste;
+    private expandPastes;
     private flushShellContext;
     private submit;
+    private clearPastes;
     private enqueueFromInput;
     private onInputChange;
     private intercept;
@@ -148,7 +153,6 @@ export declare class ChatApp {
     private pickerVisible;
     private pickerMove;
     private pickerAccept;
-    private deleteMention;
     private pushHistory;
     private navigateHistory;
     private newSession;

package/script/tui/chat/ChatApp.js

@@ -91,6 +91,8 @@ class ChatApp {
     running = false;
     queue = [];
     pendingShell = [];
+    pastes = new Map();
+    pasteSeq = 0;
     models = [];
     paletteCursor = 0;
     paletteDismissedFor = '__none__';
@@ -135,6 +137,20 @@ class ChatApp {
             onSubmit: (value) => this.submit(value),
             onChange: (value) => this.onInputChange(value),
         });
+        this.editor.mentionRanges = (value, cursor) => {
+            const ranges = (0, picker_js_1.mentionRanges)(value, (0, picker_js_1.activeMention)(value, cursor)?.start);
+            for (const placeholder of this.pastes.keys()) {
+                for (let i = value.indexOf(placeholder); i !== -1; i = value.indexOf(placeholder, i + placeholder.length)) {
+                    ranges.push({ start: i, end: i + placeholder.length });
+                }
+            }
+            return ranges;
+        };
+        this.editor.onPaste = (text) => this.capturePaste(text);
+        this.editor.chipColor = () => {
+            const bg = this.theme().styles.commandPaletteSelected.bg;
+            return bg ? (0, theme_js_1.fgToAnsi)(bg) : '';
+        };
         this.scroll = (0, mu_tui_1.scrollView)({ render: (s) => (0, transcript_js_1.transcriptComponent)(this.transcript, this.theme()).render(s) }, { stickyHeader: (info) => this.stickyHeaderView(info), footer: () => this.jumpToBottomHint() });
         this.subScroll = (0, mu_tui_1.scrollView)({ render: (s) => (0, transcript_js_1.transcriptComponent)(this.subTranscript, this.theme()).render(s) });
         this.commands = (0, commands_js_1.buildCommands)(this.commandHost()).filter((c) => {
@@ -146,6 +162,8 @@ class ChatApp {
         });
         this.tui.setRoot({ render: (s) => this.root().render(s) });
         this.tui.setBackgroundColor(this.theme().colors.background);
+        this.tui.setToastBackground(this.theme().colors.surface);
+        this.tui.setToastForeground(this.theme().colors.text);
         this.tui.setFocus(this.editor);
         this.tui.addInputInterceptor((event) => this.intercept(event));
         this.tui.addGlobalKeybinding({ chord: { key: 'c', ctrl: true }, handler: () => this.onCtrlC() });
@@ -154,6 +172,8 @@ class ChatApp {
         this.tui.addGlobalKeybinding({ chord: { key: 'end', ctrl: true }, handler: () => this.jumpToBottom() });
         this.unsubscribeTheme = this.themeProvider.subscribe(() => {
             this.tui.setBackgroundColor(this.theme().colors.background);
+            this.tui.setToastBackground(this.theme().colors.surface);
+            this.tui.setToastForeground(this.theme().colors.text);
             this.tui.requestRender(true);
         });
         this.bindSession();
@@ -465,6 +485,23 @@ class ChatApp {
             this.showError(err instanceof Error ? err.message : String(err));
         });
     }
+    capturePaste(text) {
+        const lines = text.split('\n').length;
+        if (lines < 2 && text.length <= 200)
+            return undefined;
+        const id = ++this.pasteSeq;
+        const summary = lines > 1 ? `${lines} lines` : `${text.length} chars`;
+        const placeholder = `[pasted #${id}, ${summary}]`;
+        this.pastes.set(placeholder, text);
+        return placeholder;
+    }
+    expandPastes(text) {
+        let out = text;
+        for (const [placeholder, content] of this.pastes) {
+            out = out.split(placeholder).join(content);
+        }
+        return out;
+    }
     flushShellContext(userText) {
         if (this.pendingShell.length === 0)
             return userText;
@@ -481,35 +518,47 @@ class ChatApp {
         if (this.modelPickerOpen || this.sessionPickerOpen)
             return;
         this.clearError();
-        this.pushHistory(trimmed);
+        const text = this.expandPastes(trimmed);
         this.editor.setValue('');
-        if (trimmed.startsWith('!') || trimmed.startsWith('$')) {
-            this.runShell(trimmed.slice(1).trim());
+        this.clearPastes();
+        this.pushHistory(text);
+        if (text.startsWith('!') || text.startsWith('$')) {
+            this.runShell(text.slice(1).trim());
             return;
         }
-        if (trimmed.startsWith('/')) {
-            this.runCommand(trimmed);
+        if (text.startsWith('/')) {
+            this.runCommand(text);
             return;
         }
-        if (this.tryDispatch(trimmed))
+        if (this.tryDispatch(text))
             return;
         if (this.running) {
-            this.queue.push(trimmed);
+            this.queue.push(text);
             this.tui.requestRender();
             return;
         }
-        this.send(trimmed);
+        this.send(text);
+    }
+    clearPastes() {
+        this.pastes.clear();
+        this.pasteSeq = 0;
     }
     enqueueFromInput() {
         const value = this.editor.getValue().trim();
         if (!value)
             return;
-        this.pushHistory(value);
+        const text = this.expandPastes(value);
         this.editor.setValue('');
-        this.queue.push(value);
+        this.clearPastes();
+        this.pushHistory(text);
+        this.queue.push(text);
         this.tui.requestRender();
     }
     onInputChange(value) {
+        for (const placeholder of this.pastes.keys()) {
+            if (!value.includes(placeholder))
+                this.pastes.delete(placeholder);
+        }
         if (value !== this.paletteDismissedFor)
             this.paletteDismissedFor = '__none__';
         const items = this.paletteItems();
@@ -557,11 +606,6 @@ class ChatApp {
         }
         if (key === 'escape' || key === 'esc')
             return this.onEscape();
-        if (key === 'backspace') {
-            if (this.deleteMention())
-                return true;
-            return false;
-        }
         if (key === 'enter' && event.alt) {
             if (this.running) {
                 this.enqueueFromInput();
@@ -719,25 +763,6 @@ class ChatApp {
         this.tui.requestRender();
         return true;
     }
-    deleteMention() {
-        if (this.pickerMention !== undefined)
-            return false;
-        const value = this.editor.getValue();
-        const cursor = this.editor.cursorPos;
-        const re = /@[^\s]+/g;
-        let match;
-        while ((match = re.exec(value)) !== null) {
-            const start = match.index;
-            const end = start + match[0].length;
-            if (cursor > start && cursor <= end) {
-                this.editor.setValue(value.slice(0, start) + value.slice(end));
-                this.editor.setCursor(start);
-                this.tui.requestRender();
-                return true;
-            }
-        }
-        return false;
-    }
     pushHistory(text) {
         this.host.history?.append(text);
         if (this.history[this.history.length - 1] !== text)
@@ -1094,8 +1119,6 @@ class ChatApp {
     }
     inputPanel() {
         const inner = this.approvalView() ?? this.editorInner();
-        if (this.minimal)
-            return (0, mu_tui_1.box)(inner, { padding: 0 });
         return (0, mu_tui_1.box)(inner, { background: this.theme().colors.surface, padding: 1 });
     }
     editorInner() {

package/script/tui/chat/editor.d.ts

@@ -5,12 +5,19 @@ export interface MultilineEditorOptions {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
 }
+interface ChipRange {
+    start: number;
+    end: number;
+}
 export declare class MultilineEditor implements Component {
     private value;
     private cursor;
     private readonly placeholder;
     private readonly maxRows;
     hiddenPrefix: string;
+    chipColor?: () => string;
+    mentionRanges?: (value: string, cursor: number) => ChipRange[];
+    onPaste?: (text: string) => string | undefined;
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
     constructor(opts?: MultilineEditorOptions);
@@ -24,8 +31,13 @@ export declare class MultilineEditor implements Component {
     private lineStart;
     private lineEnd;
     private insert;
+    private chips;
+    private moveLeft;
+    private moveRight;
     private backspace;
     private deleteForward;
     private cursorRowCol;
     render(s: Surface): void;
+    private renderRow;
 }
+export {};

package/script/tui/chat/editor.js

@@ -5,12 +5,16 @@ const mu_tui_1 = require("mu-tui");
 const CURSOR = '\x1b[7m';
 const RESET = '\x1b[0m';
 const DIM = '\x1b[2m';
+const CHIP = '\x1b[33m';
 class MultilineEditor {
     value = '';
     cursor = 0;
     placeholder;
     maxRows;
     hiddenPrefix = '';
+    chipColor;
+    mentionRanges;
+    onPaste;
     onSubmit;
     onChange;
     constructor(opts = {}) {
@@ -39,7 +43,7 @@ class MultilineEditor {
     }
     handleInput(event) {
         if (event.type === 'paste') {
-            this.insert(event.text);
+            this.insert(this.onPaste?.(event.text) ?? event.text);
             return;
         }
         if (event.type === 'text') {
@@ -65,10 +69,10 @@ class MultilineEditor {
                 this.deleteForward();
                 return;
             case 'left':
-                this.cursor = Math.max(0, this.cursor - 1);
+                this.moveLeft();
                 return;
             case 'right':
-                this.cursor = Math.min(this.value.length, this.cursor + 1);
+                this.moveRight();
                 return;
             case 'home':
                 this.cursor = this.lineStart();
@@ -93,17 +97,35 @@ class MultilineEditor {
         this.cursor += text.length;
         this.onChange?.(this.value);
     }
+    chips() {
+        return this.mentionRanges ? this.mentionRanges(this.value, this.cursor) : [];
+    }
+    moveLeft() {
+        const chip = this.chips().find((c) => c.start < this.cursor && this.cursor <= c.end);
+        this.cursor = chip ? chip.start : Math.max(0, this.cursor - 1);
+    }
+    moveRight() {
+        const chip = this.chips().find((c) => c.start <= this.cursor && this.cursor < c.end);
+        this.cursor = chip ? chip.end : Math.min(this.value.length, this.cursor + 1);
+    }
     backspace() {
         if (this.cursor === 0)
             return;
-        this.value = this.value.slice(0, this.cursor - 1) + this.value.slice(this.cursor);
-        this.cursor -= 1;
+        const chip = this.chips().find((c) => c.start < this.cursor && this.cursor <= c.end);
+        const from = chip ? chip.start : this.cursor - 1;
+        const to = chip ? chip.end : this.cursor;
+        this.value = this.value.slice(0, from) + this.value.slice(to);
+        this.cursor = from;
         this.onChange?.(this.value);
     }
     deleteForward() {
         if (this.cursor >= this.value.length)
             return;
-        this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + 1);
+        const chip = this.chips().find((c) => c.start <= this.cursor && this.cursor < c.end);
+        const from = chip ? chip.start : this.cursor;
+        const to = chip ? chip.end : this.cursor + 1;
+        this.value = this.value.slice(0, from) + this.value.slice(to);
+        this.cursor = from;
         this.onChange?.(this.value);
     }
     cursorRowCol(lines, cursor) {
@@ -127,25 +149,61 @@ class MultilineEditor {
             s.text(0, 0, `${DIM}${ph}${RESET}`);
             return;
         }
+        const off = hidden ? 1 : 0;
+        const chipColor = this.chipColor?.() || CHIP;
+        const chips = this.chips()
+            .map((c) => ({ start: c.start - off, end: c.end - off }))
+            .filter((c) => c.end > 0);
         const lines = value.split('\n');
         const { row: cr, col: cc } = this.cursorRowCol(lines, cursorIdx);
         const height = Math.max(1, s.height);
         const top = cr >= height ? cr - height + 1 : 0;
+        const lineStarts = [];
+        let offset = 0;
+        for (const line of lines) {
+            lineStarts.push(offset);
+            offset += line.length + 1;
+        }
         for (let r = 0; r < height && top + r < lines.length; r++) {
-            const line = lines[top + r];
-            if (top + r === cr && s.focused) {
-                const hscroll = cc >= width ? cc - width + 1 : 0;
-                const visible = line.slice(hscroll, hscroll + width);
-                const col = cc - hscroll;
-                const before = visible.slice(0, col);
-                const at = visible.slice(col, col + 1) || ' ';
-                const after = visible.slice(col + 1);
-                s.text(0, r, `${before}${CURSOR}${at}${RESET}${after}`);
+            const idx = top + r;
+            const line = lines[idx];
+            const isCursorRow = idx === cr && s.focused;
+            const hscroll = isCursorRow && cc >= width ? cc - width + 1 : 0;
+            s.text(0, r, this.renderRow(line, lineStarts[idx], chips, chipColor, hscroll, width, isCursorRow ? cc : null));
+        }
+    }
+    renderRow(line, lineStart, chips, chipColor, hscroll, width, cursorCol) {
+        const inChip = (abs) => chips.some((c) => abs >= c.start && abs < c.end);
+        let out = '';
+        let yellow = false;
+        for (let c = hscroll; c < hscroll + width; c++) {
+            const isCursor = cursorCol !== null && c === cursorCol;
+            const hasChar = c < line.length;
+            if (!hasChar && !isCursor)
+                break;
+            const ch = hasChar ? line[c] : ' ';
+            if (isCursor) {
+                if (yellow) {
+                    out += RESET;
+                    yellow = false;
+                }
+                out += `${CURSOR}${ch}${RESET}`;
+                continue;
+            }
+            const wantYellow = hasChar && inChip(lineStart + c);
+            if (wantYellow && !yellow) {
+                out += chipColor;
+                yellow = true;
             }
-            else {
-                s.text(0, r, line.length > width ? line.slice(0, width) : line);
+            else if (!wantYellow && yellow) {
+                out += RESET;
+                yellow = false;
             }
+            out += ch;
         }
+        if (yellow)
+            out += RESET;
+        return out;
     }
 }
 exports.MultilineEditor = MultilineEditor;

package/script/tui/chat/picker.d.ts

@@ -5,6 +5,11 @@ export interface Candidate {
 }
 export declare function collectCandidates(cwd: string, agentNames: string[]): Candidate[];
 export declare function rank(query: string, candidates: Candidate[], limit?: number): Candidate[];
+export interface MentionRange {
+    start: number;
+    end: number;
+}
+export declare function mentionRanges(value: string, excludeStart?: number): MentionRange[];
 export interface ActiveMention {
     start: number;
     query: string;

package/script/tui/chat/picker.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectCandidates = collectCandidates;
 exports.rank = rank;
+exports.mentionRanges = mentionRanges;
 exports.activeMention = activeMention;
 const node_child_process_1 = require("node:child_process");
 const node_fs_1 = require("node:fs");
@@ -174,6 +175,20 @@ function rank(query, candidates, limit = 8) {
     scored.sort((a, b) => b.score - a.score);
     return scored.slice(0, limit).map((entry) => entry.candidate);
 }
+function mentionRanges(value, excludeStart) {
+    const ranges = [];
+    const re = /@[^\s]+/g;
+    let match;
+    while ((match = re.exec(value)) !== null) {
+        const start = match.index;
+        if (start === excludeStart)
+            continue;
+        if (start > 0 && !/\s/.test(value[start - 1] ?? ' '))
+            continue;
+        ranges.push({ start, end: start + match[0].length });
+    }
+    return ranges;
+}
 function activeMention(value, cursor) {
     let start = -1;
     for (let i = cursor - 1; i >= 0; i--) {