mu-coding 0.5.0 → 0.8.0

package/src/tui/input/cursor.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'bun:test';
+import {
+  cursorRowCol,
+  deleteBackward,
+  deleteForward,
+  deleteWordBackward,
+  insertAt,
+  killToLineEnd,
+  killToLineStart,
+  moveLeft,
+  moveLineDown,
+  moveLineEnd,
+  moveLineHome,
+  moveLineUp,
+  moveRight,
+  moveWordLeft,
+  moveWordRight,
+  positionAt,
+} from './cursor';
+
+const s = (value: string, cursor: number) => ({ value, cursor });
+
+describe('insertAt', () => {
+  it('inserts at the cursor and advances it', () => {
+    expect(insertAt(s('hello', 5), '!')).toEqual({ value: 'hello!', cursor: 6 });
+    expect(insertAt(s('helo', 2), 'l')).toEqual({ value: 'hello', cursor: 3 });
+  });
+  it('is a no-op for empty text', () => {
+    expect(insertAt(s('a', 1), '')).toEqual({ value: 'a', cursor: 1 });
+  });
+  it('clamps an out-of-range cursor', () => {
+    expect(insertAt(s('abc', 99), 'x')).toEqual({ value: 'abcx', cursor: 4 });
+  });
+});
+
+describe('deleteBackward', () => {
+  it('removes the char left of the cursor', () => {
+    expect(deleteBackward(s('hello', 5))).toEqual({ value: 'hell', cursor: 4 });
+    expect(deleteBackward(s('hello', 1))).toEqual({ value: 'ello', cursor: 0 });
+  });
+  it('is a no-op at position 0', () => {
+    expect(deleteBackward(s('hello', 0))).toEqual({ value: 'hello', cursor: 0 });
+  });
+});
+
+describe('deleteForward', () => {
+  it('removes the char at the cursor', () => {
+    expect(deleteForward(s('hello', 0))).toEqual({ value: 'ello', cursor: 0 });
+    expect(deleteForward(s('hello', 4))).toEqual({ value: 'hell', cursor: 4 });
+  });
+  it('is a no-op at end of buffer', () => {
+    expect(deleteForward(s('hello', 5))).toEqual({ value: 'hello', cursor: 5 });
+  });
+});
+
+describe('deleteWordBackward', () => {
+  it('eats the previous word', () => {
+    expect(deleteWordBackward(s('hello world', 11))).toEqual({ value: 'hello ', cursor: 6 });
+    expect(deleteWordBackward(s('hello   world', 13))).toEqual({ value: 'hello   ', cursor: 8 });
+  });
+  it('eats trailing whitespace before the word', () => {
+    expect(deleteWordBackward(s('foo bar  ', 9))).toEqual({ value: 'foo ', cursor: 4 });
+  });
+  it('is a no-op at start', () => {
+    expect(deleteWordBackward(s('foo', 0))).toEqual({ value: 'foo', cursor: 0 });
+  });
+});
+
+describe('killToLineEnd / killToLineStart', () => {
+  it('kills from cursor to end of line', () => {
+    expect(killToLineEnd(s('hello\nworld', 3))).toEqual({ value: 'hel\nworld', cursor: 3 });
+  });
+  it('eats the newline when cursor sits at line end', () => {
+    expect(killToLineEnd(s('hello\nworld', 5))).toEqual({ value: 'helloworld', cursor: 5 });
+  });
+  it('kills from start of line to cursor', () => {
+    expect(killToLineStart(s('hello\nworld', 3))).toEqual({ value: 'lo\nworld', cursor: 0 });
+    expect(killToLineStart(s('hello\nworld', 8))).toEqual({ value: 'hello\nrld', cursor: 6 });
+  });
+});
+
+describe('horizontal movement', () => {
+  it('moveLeft / moveRight respect bounds', () => {
+    expect(moveLeft(s('abc', 0))).toEqual({ value: 'abc', cursor: 0 });
+    expect(moveLeft(s('abc', 2))).toEqual({ value: 'abc', cursor: 1 });
+    expect(moveRight(s('abc', 3))).toEqual({ value: 'abc', cursor: 3 });
+    expect(moveRight(s('abc', 1))).toEqual({ value: 'abc', cursor: 2 });
+  });
+  it('moveWordLeft / moveWordRight jump across word boundaries', () => {
+    expect(moveWordLeft(s('foo bar baz', 11))).toEqual({ value: 'foo bar baz', cursor: 8 });
+    expect(moveWordLeft(s('foo bar baz', 8))).toEqual({ value: 'foo bar baz', cursor: 4 });
+    expect(moveWordRight(s('foo bar baz', 0))).toEqual({ value: 'foo bar baz', cursor: 3 });
+    expect(moveWordRight(s('foo bar baz', 3))).toEqual({ value: 'foo bar baz', cursor: 7 });
+  });
+  it('Home/End operate on the current line', () => {
+    expect(moveLineHome(s('hello\nworld', 8))).toEqual({ value: 'hello\nworld', cursor: 6 });
+    expect(moveLineEnd(s('hello\nworld', 6))).toEqual({ value: 'hello\nworld', cursor: 11 });
+  });
+});
+
+describe('vertical movement', () => {
+  it('moveLineUp returns null on first line', () => {
+    expect(moveLineUp(s('one\ntwo', 1), null)).toBeNull();
+  });
+  it('moveLineDown returns null on last line', () => {
+    expect(moveLineDown(s('one\ntwo', 5), null)).toBeNull();
+  });
+  it('preserves desired column across short lines', () => {
+    // Cursor on line 0 col 5 → down to line 1 (3 chars) clamps to 3 → down again to line 2 (10 chars) restores 5.
+    const start = { value: 'hello\nfoo\nlonglineee', cursor: 5 };
+    const down1 = moveLineDown(start, 5);
+    expect(down1).toEqual({ value: start.value, cursor: 9 }); // end of "foo"
+    const down2 = moveLineDown(down1 as { value: string; cursor: number }, 5);
+    expect(down2).toEqual({ value: start.value, cursor: 15 }); // 10 + 5
+  });
+  it('round-trips up then down to the same offset when desired column is preserved', () => {
+    const state = { value: 'aaaa\nbbbb\ncccc', cursor: 12 }; // line 2, col 2
+    const up = moveLineUp(state, 2);
+    expect(up).toEqual({ value: state.value, cursor: 7 });
+    const down = moveLineDown(up as { value: string; cursor: number }, 2);
+    expect(down).toEqual({ value: state.value, cursor: 12 });
+  });
+});
+
+describe('cursorRowCol / positionAt', () => {
+  it('reports row and col correctly', () => {
+    expect(cursorRowCol('hello\nworld', 0)).toEqual({ row: 0, col: 0 });
+    expect(cursorRowCol('hello\nworld', 5)).toEqual({ row: 0, col: 5 });
+    expect(cursorRowCol('hello\nworld', 6)).toEqual({ row: 1, col: 0 });
+    expect(cursorRowCol('hello\nworld', 11)).toEqual({ row: 1, col: 5 });
+  });
+  it('positionAt clamps to line length', () => {
+    expect(positionAt('hello\nfoo', 1, 99)).toBe(9);
+    expect(positionAt('hello\nfoo', 0, 2)).toBe(2);
+  });
+});

package/src/tui/input/cursor.ts

@@ -0,0 +1,214 @@
+// Pure helpers for editing/navigating a `(value, cursor)` pair, where `value`
+// is the buffer text (potentially multi-line) and `cursor` is a 0-based offset
+// into that string in the half-open range `[0, value.length]`.
+//
+// All operations are pure: they take the current state and return the new
+// state without mutating anything. Keeping the helpers free of any React /
+// Ink dependency makes them trivially unit-testable and cheap to reason
+// about (no hidden ordering, no refs).
+
+export interface BufferState {
+  value: string;
+  cursor: number;
+}
+
+const WORD_RE = /\w/;
+
+function clamp(n: number, min: number, max: number): number {
+  if (n < min) return min;
+  if (n > max) return max;
+  return n;
+}
+
+function clampCursor(value: string, cursor: number): number {
+  return clamp(cursor, 0, value.length);
+}
+
+// ─── Editing ──────────────────────────────────────────────────────────────────
+
+export function insertAt(state: BufferState, text: string): BufferState {
+  if (!text) return state;
+  const cursor = clampCursor(state.value, state.cursor);
+  return {
+    value: state.value.slice(0, cursor) + text + state.value.slice(cursor),
+    cursor: cursor + text.length,
+  };
+}
+
+export function deleteBackward(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  if (cursor === 0) return state;
+  return {
+    value: state.value.slice(0, cursor - 1) + state.value.slice(cursor),
+    cursor: cursor - 1,
+  };
+}
+
+export function deleteForward(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  if (cursor >= state.value.length) return state;
+  return {
+    value: state.value.slice(0, cursor) + state.value.slice(cursor + 1),
+    cursor,
+  };
+}
+
+export function deleteWordBackward(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  if (cursor === 0) return state;
+  const start = wordStart(state.value, cursor);
+  return {
+    value: state.value.slice(0, start) + state.value.slice(cursor),
+    cursor: start,
+  };
+}
+
+/** Kill from cursor to end of line (Emacs-style Ctrl+K). */
+export function killToLineEnd(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  const eol = lineEnd(state.value, cursor);
+  if (eol === cursor) {
+    // At end of line — eat the newline itself, mirroring Emacs/readline.
+    if (cursor < state.value.length) {
+      return { value: state.value.slice(0, cursor) + state.value.slice(cursor + 1), cursor };
+    }
+    return state;
+  }
+  return { value: state.value.slice(0, cursor) + state.value.slice(eol), cursor };
+}
+
+/** Kill from start of line to cursor (Emacs-style Ctrl+U). */
+export function killToLineStart(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  const sol = lineStart(state.value, cursor);
+  if (sol === cursor) return state;
+  return { value: state.value.slice(0, sol) + state.value.slice(cursor), cursor: sol };
+}
+
+// ─── Movement ─────────────────────────────────────────────────────────────────
+
+export function moveLeft(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return cursor === 0 ? state : { ...state, cursor: cursor - 1 };
+}
+
+export function moveRight(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return cursor >= state.value.length ? state : { ...state, cursor: cursor + 1 };
+}
+
+export function moveWordLeft(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return { ...state, cursor: wordStart(state.value, cursor) };
+}
+
+export function moveWordRight(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return { ...state, cursor: wordEnd(state.value, cursor) };
+}
+
+export function moveLineHome(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return { ...state, cursor: lineStart(state.value, cursor) };
+}
+
+export function moveLineEnd(state: BufferState): BufferState {
+  const cursor = clampCursor(state.value, state.cursor);
+  return { ...state, cursor: lineEnd(state.value, cursor) };
+}
+
+/**
+ * Move the cursor up one display line. Returns `null` when the cursor is
+ * already on the first line — callers can then route the keystroke to history
+ * navigation instead of swallowing it. `desiredColumn` makes vertical motion
+ * "sticky": it remembers the column the user originally departed from so that
+ * traversing a short line and coming back lands in the original column.
+ */
+export function moveLineUp(state: BufferState, desiredColumn: number | null): BufferState | null {
+  const { row, col } = cursorRowCol(state.value, state.cursor);
+  if (row === 0) return null;
+  const targetCol = desiredColumn ?? col;
+  return { ...state, cursor: positionAt(state.value, row - 1, targetCol) };
+}
+
+export function moveLineDown(state: BufferState, desiredColumn: number | null): BufferState | null {
+  const { row, col } = cursorRowCol(state.value, state.cursor);
+  const lineCount = countLines(state.value);
+  if (row >= lineCount - 1) return null;
+  const targetCol = desiredColumn ?? col;
+  return { ...state, cursor: positionAt(state.value, row + 1, targetCol) };
+}
+
+// ─── Geometry helpers ─────────────────────────────────────────────────────────
+
+export function cursorRowCol(value: string, cursor: number): { row: number; col: number } {
+  const c = clampCursor(value, cursor);
+  let row = 0;
+  let lastNl = -1;
+  for (let i = 0; i < c; i++) {
+    if (value.charCodeAt(i) === 10) {
+      row++;
+      lastNl = i;
+    }
+  }
+  return { row, col: c - lastNl - 1 };
+}
+
+function countLines(value: string): number {
+  let count = 1;
+  for (let i = 0; i < value.length; i++) {
+    if (value.charCodeAt(i) === 10) count++;
+  }
+  return count;
+}
+
+/** Resolve a `(row, col)` pair back to a flat offset, clamping to the line length. */
+export function positionAt(value: string, row: number, col: number): number {
+  let currentRow = 0;
+  let lineStartIdx = 0;
+  for (let i = 0; i <= value.length; i++) {
+    const isEol = i === value.length || value.charCodeAt(i) === 10;
+    if (currentRow === row && isEol) {
+      const lineLength = i - lineStartIdx;
+      return lineStartIdx + Math.min(col, lineLength);
+    }
+    if (isEol) {
+      currentRow++;
+      lineStartIdx = i + 1;
+    }
+  }
+  return value.length;
+}
+
+function lineStart(value: string, cursor: number): number {
+  for (let i = cursor - 1; i >= 0; i--) {
+    if (value.charCodeAt(i) === 10) return i + 1;
+  }
+  return 0;
+}
+
+function lineEnd(value: string, cursor: number): number {
+  for (let i = cursor; i < value.length; i++) {
+    if (value.charCodeAt(i) === 10) return i;
+  }
+  return value.length;
+}
+
+/**
+ * Standard "previous word boundary" semantics: skip whitespace/punctuation
+ * backwards, then skip the contiguous word characters. Mirrors what shells
+ * (bash/zsh) do for Ctrl+W and Alt+Left.
+ */
+function wordStart(value: string, cursor: number): number {
+  let i = cursor;
+  while (i > 0 && !WORD_RE.test(value[i - 1])) i--;
+  while (i > 0 && WORD_RE.test(value[i - 1])) i--;
+  return i;
+}
+
+function wordEnd(value: string, cursor: number): number {
+  let i = cursor;
+  while (i < value.length && !WORD_RE.test(value[i])) i++;
+  while (i < value.length && WORD_RE.test(value[i])) i++;
+  return i;
+}

package/src/tui/input/dumpContext.ts

@@ -0,0 +1,107 @@
+import { writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import type { ChatMessage, PluginRegistry, ProviderConfig, ToolDefinition } from 'mu-core';
+
+/**
+ * Render a plain-text view of the full LLM context — the merged system
+ * prompt, registered tool definitions, and the message transcript — in the
+ * order and shape mirrored from `mu-provider/src/stream.ts buildMessages`.
+ *
+ * This is a *logical* view: the exact token framing applied on the wire is
+ * controlled by the server's per-model chat template (ChatML, Llama-3,
+ * Hermes, etc.) and cannot be reproduced client-side. The dump captures
+ * what the model semantically receives, which is what matters for
+ * estimating token usage and pruning context.
+ */
+function mergedSystemPrompt(config: ProviderConfig, pluginPrompts: string[]): string {
+  return pluginPrompts.length > 0
+    ? [config.systemPrompt, ...pluginPrompts].filter(Boolean).join('\n\n')
+    : (config.systemPrompt ?? '');
+}
+
+function renderTools(tools: ToolDefinition[]): string {
+  if (tools.length === 0) return '=== TOOLS (0) ===\n(no tools registered)\n';
+  const blocks = tools.map((t, i) => {
+    // Compact JSON mirrors what gets injected into the system prompt by
+    // most chat templates — pretty-printing here would misrepresent the
+    // actual on-the-wire token cost.
+    const params = JSON.stringify(t.function.parameters);
+    const desc = t.function.description ? ` ${t.function.description}` : '';
+    return `[${i + 1}] ${t.function.name}${desc}\n    parameters: ${params}`;
+  });
+  return `=== TOOLS (${tools.length}) ===\n${blocks.join('\n')}\n`;
+}
+
+function renderUser(m: ChatMessage): string {
+  const lines: string[] = [];
+  const hasImages = (m.images?.length ?? 0) > 0;
+  const text = m.content.trim() || (hasImages ? '(image attached)' : '');
+  if (text) lines.push(text);
+  if (m.images) {
+    for (const img of m.images) {
+      lines.push(`[image: ${img.mimeType}, ${img.name}]`);
+    }
+  }
+  return lines.join('\n');
+}
+
+function renderAssistant(m: ChatMessage): string {
+  const lines: string[] = [];
+  if (m.content) {
+    lines.push(m.content);
+  } else if (m.toolCalls?.length) {
+    lines.push('(no content)');
+  }
+  if (m.toolCalls) {
+    for (const tc of m.toolCalls) {
+      lines.push(`[tool_call id=${tc.id}] ${tc.function.name}(${tc.function.arguments})`);
+    }
+  }
+  return lines.join('\n');
+}
+
+function renderMessage(m: ChatMessage, index: number): string {
+  if (m.role === 'tool') {
+    const header = `--- [${index}] tool (call_id=${m.toolCallId ?? ''}) ---`;
+    return `${header}\n${m.content}`;
+  }
+  const header = `--- [${index}] ${m.role} ---`;
+  let body: string;
+  if (m.role === 'user') body = renderUser(m);
+  else if (m.role === 'assistant') body = renderAssistant(m);
+  else body = m.content; // system / fallback
+  return `${header}\n${body}`;
+}
+
+function renderContext(
+  config: ProviderConfig,
+  messages: ChatMessage[],
+  tools: ToolDefinition[],
+  pluginPrompts: string[],
+): string {
+  const system = mergedSystemPrompt(config, pluginPrompts);
+  const header = `# Logical context view — exact token framing depends on the server-side chat template for model "${config.model ?? '(unset)'}".\n`;
+  const systemBlock = `=== SYSTEM ===\n${system || '(empty)'}\n`;
+  const toolsBlock = renderTools(tools);
+  const messagesHeader = `=== MESSAGES (${messages.length}) ===`;
+  const messagesBlock = messages.map((m, i) => renderMessage(m, i + 1)).join('\n\n');
+  return [header, systemBlock, toolsBlock, messagesHeader, messagesBlock].join('\n');
+}
+
+/**
+ * Build the plain-text context view and write it to a temp file. Returns
+ * the absolute path so the caller can surface it (e.g. via toast).
+ */
+export async function dumpContext(
+  config: ProviderConfig,
+  messages: ChatMessage[],
+  registry: PluginRegistry,
+): Promise<string> {
+  const pluginPrompts = await registry.getSystemPrompts();
+  const tools = registry.getToolDefinitions();
+  const text = renderContext(config, messages, tools, pluginPrompts);
+  const path = join(tmpdir(), `mu-context-${Date.now()}.txt`);
+  await writeFile(path, text, 'utf-8');
+  return path;
+}

package/src/tui/input/sanitize.ts

@@ -3,7 +3,7 @@
 //   - M = press / motion
 //   - m = release
 // Examples: "[<0;126;31M", "[<32;36;51M", "[<0;31;51m"
-export const SGR_MOUSE_RE = /\[<\d+;\d+;\d+[Mm]/g;
+const SGR_MOUSE_RE = /\[<\d+;\d+;\d+[Mm]/g;
 
 const SGR_MOUSE_EXACT_RE = /^\[<\d+;\d+;\d+[Mm]$/;
 

package/src/tui/input/useCommandExecutor.ts

@@ -1,4 +1,4 @@
-import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-agents';
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-core';
 import { useCallback, useMemo } from 'react';
 import { BUILTIN_COMMANDS, fromPluginCommand, type SlashCommand } from './commands';
 import type { InputActions } from './useInputHandler';

package/src/tui/input/useInputBox.ts

@@ -1,8 +1,11 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useChatContext } from '../chat/ChatContext';
+import { dumpContext } from './dumpContext';
 import type { InputBoxViewProps } from './InputBoxView';
 import { useCommandExecutor } from './useCommandExecutor';
-import { type InputActions, useInputHandler } from './useInputHandler';
+import { type InputActions, type MentionMode, useInputHandler } from './useInputHandler';
+import { type MentionPickerState, useMentionPicker } from './useMentionPicker';
+import { usePluginShortcuts } from './usePluginShortcuts';
 
 export interface InputBoxProps {
   onSubmit: (text: string) => void;
@@ -13,19 +16,75 @@ export interface InputBoxProps {
   history?: string[];
 }
 
-export function useInputBox({
-  onSubmit,
-  onScrollUp,
-  onScrollDown,
-  isActive = true,
-  model = '',
-  history = [],
-}: InputBoxProps): InputBoxViewProps {
-  const { config, session, toggles, attachment, models, abort, registry } = useChatContext();
+interface BufferDraft {
+  value: string;
+  cursor: number;
+}
 
-  // Stable references prevent downstream `useMemo`s (e.g. inside
-  // `useCommandExecutor`) from being invalidated on every render.
-  const actions: InputActions = useMemo(
+/**
+ * Replace `[triggerStart, cursor)` (the `<trigger><partial>` token) with the
+ * chosen completion value plus a trailing space, so the user is left in a
+ * sensible position for further input.
+ */
+function applyMention(
+  value: string,
+  triggerStart: number,
+  cursor: number,
+  trigger: string,
+  completion: string,
+): BufferDraft {
+  const before = value.slice(0, triggerStart);
+  const after = value.slice(cursor);
+  const insertion = `${trigger}${completion} `;
+  return { value: before + insertion + after, cursor: triggerStart + insertion.length };
+}
+
+interface InputHandle {
+  value: string;
+  cursor: number;
+  setBuffer: (value: string, cursor: number) => void;
+}
+
+/**
+ * Build the mention-mode controls for the picker that the input handler
+ * consumes via a ref. Returns `null` when no completions are available so
+ * the handler skips the override and runs the default editing bindings.
+ */
+function buildMentionMode(mentions: MentionPickerState, input: InputHandle): MentionMode | null {
+  if (!mentions.trigger || mentions.completions.length === 0) return null;
+  return {
+    active: true,
+    count: mentions.completions.length,
+    selectedIndex: mentions.selectedIndex,
+    next: () => mentions.setSelectedIndex((mentions.selectedIndex + 1) % mentions.completions.length),
+    prev: () =>
+      mentions.setSelectedIndex(
+        mentions.selectedIndex === 0 ? mentions.completions.length - 1 : mentions.selectedIndex - 1,
+      ),
+    accept: () => {
+      const completion = mentions.completions[mentions.selectedIndex];
+      const trig = mentions.trigger;
+      if (!(completion && trig)) return;
+      const draft = applyMention(input.value, mentions.triggerStart, input.cursor, trig, completion.value);
+      input.setBuffer(draft.value, draft.cursor);
+    },
+  };
+}
+
+interface ActionDeps {
+  abort: ReturnType<typeof useChatContext>['abort'];
+  attachment: ReturnType<typeof useChatContext>['attachment'];
+  session: ReturnType<typeof useChatContext>['session'];
+  models: ReturnType<typeof useChatContext>['models'];
+  toggles: ReturnType<typeof useChatContext>['toggles'];
+  onShowContext: () => Promise<void>;
+  onScrollUp?: () => void;
+  onScrollDown?: () => void;
+}
+
+function useInputActions(deps: ActionDeps): InputActions {
+  const { abort, attachment, session, models, toggles, onShowContext, onScrollUp, onScrollDown } = deps;
+  return useMemo<InputActions>(
     () => ({
       onCtrlC: abort.onCtrlC,
       onEsc: abort.onEsc,
@@ -34,6 +93,7 @@ export function useInputBox({
       onCycleModel: models.cycleModel,
       onTogglePicker: toggles.onTogglePicker,
       onToggleSessionPicker: toggles.onToggleSessionPicker,
+      onShowContext,
       onScrollUp,
       onScrollDown,
       modelCount: models.models.length,
@@ -47,10 +107,48 @@ export function useInputBox({
       models.models.length,
       toggles.onTogglePicker,
       toggles.onToggleSessionPicker,
+      onShowContext,
       onScrollUp,
       onScrollDown,
     ],
   );
+}
+
+export function useInputBox({
+  onSubmit,
+  onScrollUp,
+  onScrollDown,
+  isActive = true,
+  model = '',
+  history = [],
+}: InputBoxProps): InputBoxViewProps {
+  const { config, session, toggles, attachment, models, abort, registry, uiService } = useChatContext();
+  // Ref pattern: the mention controls depend on the input handler's
+  // `value`/`cursor`, but the handler also needs to reach the controls at key
+  // dispatch time. Pushing the latest snapshot into a ref every render lets
+  // both directions flow without re-calling hooks.
+  const mentionRef = useRef<MentionMode | null>(null);
+
+  const onShowContext = useCallback(async () => {
+    try {
+      const path = await dumpContext(config, session.messages, registry);
+      uiService?.notify(`Context written to ${path}`, 'success');
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      uiService?.notify(`Failed to dump context: ${msg}`, 'error');
+    }
+  }, [config, session.messages, registry, uiService]);
+
+  const actions = useInputActions({
+    abort,
+    attachment,
+    session,
+    models,
+    toggles,
+    onShowContext,
+    onScrollUp,
+    onScrollDown,
+  });
 
   const commandContext = useMemo(
     () => ({ messages: session.messages, cwd: process.cwd(), config }),
@@ -67,6 +165,8 @@ export function useInputBox({
     pluginCommands,
   });
 
+  const { handlers: pluginShortcuts } = usePluginShortcuts(registry);
+
   const input = useInputHandler({
     isActive,
     streaming: session.streaming,
@@ -75,14 +175,33 @@ export function useInputBox({
     onSubmit,
     availableCommands: commandExecutor.commands,
     onCommand: commandExecutor.execute,
+    pluginShortcuts,
+    mentionRef,
   });
 
+  const mentions = useMentionPicker(registry, input.value, input.cursor);
+
+  // Update the ref every render so the dispatch closure sees the latest.
+  mentionRef.current = buildMentionMode(mentions, input);
+
   return {
-    ...input,
+    value: input.value,
+    cursor: input.cursor,
+    commands: input.commands,
+    cmdIndex: input.cmdIndex,
+    isCommandMode: input.isCommandMode,
     streaming: session.streaming,
     isActive,
     model,
     attachmentName: attachment.attachment?.name ?? null,
     attachmentError: attachment.attachmentError,
+    mentions:
+      mentions.completions.length > 0
+        ? {
+            completions: mentions.completions,
+            selectedIndex: mentions.selectedIndex,
+            partial: mentions.partial,
+          }
+        : null,
   };
 }