mu-coding 0.2.0 → 0.5.0

package/src/tui/components/{ui → primitives}/dropdown.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from 'ink';
 import { useMemo, useState } from 'react';
+import { sanitizeTerminalInput } from '../../input/sanitize';
 
 interface DropdownItem {
   label: string;
@@ -42,13 +43,37 @@ export function Dropdown({
 
   useInput(
     (input, key) => {
-      if (!isActive || key.tab) return;
-      if (key.escape) onCancel?.();
-      else if (key.return && filtered[index]) onSelect(filtered[index]);
-      else if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
-      else if (key.downArrow) setIndex((i) => Math.min(filtered.length - 1, i + 1));
-      else if (key.backspace) setQuery((q) => q.slice(0, -1));
-      else if (input?.length === 1) setQuery((q) => q + input);
+      if (!isActive) return;
+      // Tab is reserved for the input box's "insert two spaces" binding when
+      // dropdowns are not focused; inside a focused dropdown we ignore it
+      // rather than risk inserting whitespace into the query.
+      if (key.tab) return;
+      if (key.escape) {
+        onCancel?.();
+        return;
+      }
+      if (key.return && filtered[index]) {
+        onSelect(filtered[index]);
+        return;
+      }
+      if (key.upArrow) {
+        setIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setIndex((i) => Math.min(filtered.length - 1, i + 1));
+        return;
+      }
+      if (key.backspace) {
+        setQuery((q) => q.slice(0, -1));
+        return;
+      }
+      // Accept multi-char input (paste) into the filter; strip control bytes
+      // and any SGR mouse sequences that may leak through. Single-line: drop \t/\n.
+      if (input) {
+        const clean = sanitizeTerminalInput(input).replace(/[\t\n]/g, '');
+        if (clean) setQuery((q) => q + clean);
+      }
     },
     { isActive },
   );

package/src/tui/components/primitives/pickerModal.tsx

@@ -0,0 +1,45 @@
+import { Text } from 'ink';
+import { Dropdown } from './dropdown';
+import { Modal } from './modal';
+
+interface PickerItem {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export function PickerModal({
+  visible,
+  title,
+  items,
+  placeholder,
+  emptyMessage,
+  onSelect,
+  onCancel,
+}: {
+  visible: boolean;
+  title: string;
+  items: PickerItem[];
+  placeholder: string;
+  emptyMessage?: string;
+  onSelect: (value: string) => void;
+  onCancel?: () => void;
+}) {
+  return (
+    <Modal visible={visible} title={title}>
+      {items.length === 0 && emptyMessage ? (
+        <Text dimColor={true} italic={true}>
+          {emptyMessage}
+        </Text>
+      ) : (
+        <Dropdown
+          items={items}
+          placeholder={placeholder}
+          isActive={visible}
+          onSelect={(item) => onSelect(item.value)}
+          onCancel={onCancel}
+        />
+      )}
+    </Modal>
+  );
+}

package/src/tui/components/primitives/scrollbar.tsx

@@ -0,0 +1,27 @@
+import { Box, Text } from 'ink';
+
+export function Scrollbar({
+  viewHeight,
+  contentHeight,
+  scrollOffset,
+}: {
+  viewHeight: number;
+  contentHeight: number;
+  scrollOffset: number;
+}) {
+  if (contentHeight <= viewHeight || viewHeight < 1) {
+    return null;
+  }
+  const maxScroll = contentHeight - viewHeight;
+  const ratio = scrollOffset / maxScroll;
+  const thumbSize = Math.max(1, Math.round((viewHeight / contentHeight) * viewHeight));
+  const thumbPos = Math.round(ratio * (viewHeight - thumbSize));
+
+  const track = Array.from({ length: viewHeight }, (_, i) => (i >= thumbPos && i < thumbPos + thumbSize ? '┃' : '│'));
+
+  return (
+    <Box flexDirection="column" flexShrink={0} width={1}>
+      <Text>{track.join('')}</Text>
+    </Box>
+  );
+}

package/src/tui/components/statusBar.tsx

@@ -0,0 +1,25 @@
+import { Box, Text } from 'ink';
+
+export interface StatusBarSegment {
+  text: string;
+  color?: string;
+  dim?: boolean;
+}
+
+export function StatusBar({ segments }: { segments: StatusBarSegment[] }) {
+  return (
+    <Box flexShrink={0} paddingX={1} marginY={1}>
+      <Box justifyContent="flex-end" flexGrow={1}>
+        {segments.map((seg, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: positional static list
+          <Box key={i}>
+            {i > 0 && <Text dimColor={true}> · </Text>}
+            <Text color={seg.color} dimColor={seg.dim}>
+              {seg.text}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/ui/dialogLayer.tsx

@@ -1,8 +1,9 @@
 import { Box, Text, useInput } from 'ink';
 import { useCallback, useEffect, useState } from 'react';
-import type { DialogRequest, InkUIService } from '../../services/uiService';
-import { Dropdown } from './dropdown';
-import { Modal } from './modal';
+import { sanitizeTerminalInput } from '../../input/sanitize';
+import type { DialogRequest, InkUIService } from '../../plugins/InkUIService';
+import { Dropdown } from '../primitives/dropdown';
+import { Modal } from '../primitives/modal';
 
 // ─── Confirm Dialog ───────────────────────────────────────────────────────────
 
@@ -80,6 +81,12 @@ function SelectDialog({
 
 // ─── Input Dialog ─────────────────────────────────────────────────────────────
 
+function sanitizeDialogInput(text: string): string {
+  // Strip mouse sequences + control bytes via the shared helper, then drop
+  // \t/\n that the shared helper preserves — this dialog is single-line.
+  return sanitizeTerminalInput(text).replace(/[\t\n]/g, '');
+}
+
 function InputDialog({
   dialog,
   onResolve,
@@ -94,12 +101,19 @@ function InputDialog({
   useInput((input, key) => {
     if (key.escape) {
       onCancel();
-    } else if (key.return) {
+      return;
+    }
+    if (key.return) {
       onResolve(value || null);
-    } else if (key.backspace || key.delete) {
+      return;
+    }
+    if (key.backspace || key.delete) {
       setValue((v) => v.slice(0, -1));
-    } else if (input && input.length === 1) {
-      setValue((v) => v + input);
+      return;
+    }
+    const insert = sanitizeDialogInput(input);
+    if (insert) {
+      setValue((v) => v + insert);
     }
   });
 

package/src/tui/hooks/useScroll.ts

@@ -8,12 +8,20 @@ export function useScroll(contentHeight: number, viewHeight: number) {
   const autoScrollRef = useRef(true);
   const maxScroll = Math.max(0, contentHeight - viewHeight);
 
-  // Enable SGR mouse mode so wheel sequences arrive through Ink's input pipeline
+  // Enable SGR mouse mode (1000 = press/release+wheel only, no drag motion;
+  // 1006 = SGR-encoded coordinates) so wheel sequences arrive through Ink's
+  // input pipeline. Mode 1002 (button-event w/ drag) was previously used but
+  // produced spurious "[<32;...M" drag events that leaked into text inputs.
+  //
+  // On cleanup we defensively disable 1000/1002/1003 — any of them might be
+  // active from a prior session/binary/extension and disabling already-off
+  // modes is a no-op. Without this, mouse tracking can leak into the parent
+  // shell after abort.
   const { stdout } = useStdout();
   useEffect(() => {
-    stdout.write('\x1b[?1002h\x1b[?1006h');
+    stdout.write('\x1b[?1000h\x1b[?1006h');
     return () => {
-      stdout.write('\x1b[?1002l\x1b[?1006l');
+      stdout.write('\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l');
     };
   }, [stdout]);
 

package/src/tui/input/InputBox.tsx

@@ -0,0 +1,6 @@
+import { InputBoxView } from './InputBoxView';
+import { type InputBoxProps, useInputBox } from './useInputBox';
+
+export function InputBox(props: InputBoxProps) {
+  return <InputBoxView {...useInputBox(props)} />;
+}

package/src/tui/{components/inputBox.tsx → input/InputBoxView.tsx}

@@ -1,15 +1,16 @@
 import { Box, Text } from 'ink';
-import type { SlashCommand } from '../commands';
-import { useChatContext } from '../context/chat';
-import { type InputActions, useInputHandler } from '../hooks/useInputHandler';
+import type { SlashCommand } from './commands';
 
-interface InputBoxProps {
-  onSubmit: (text: string) => void;
-  onScrollUp?: () => void;
-  onScrollDown?: () => void;
-  isActive?: boolean;
-  model?: string;
-  history?: string[];
+export interface InputBoxViewProps {
+  value: string;
+  commands: SlashCommand[];
+  cmdIndex: number;
+  isCommandMode: boolean;
+  streaming: boolean;
+  isActive: boolean;
+  model: string;
+  attachmentName: string | null;
+  attachmentError: string | null;
 }
 
 function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; selectedIndex: number }) {
@@ -95,38 +96,7 @@ function InputDisplay({
   );
 }
 
-export function InputBox({
-  onSubmit,
-  onScrollUp,
-  onScrollDown,
-  isActive = true,
-  model = '',
-  history = [],
-}: InputBoxProps) {
-  const { session, toggles, attachment, models, abort, registry } = useChatContext();
-
-  const actions: InputActions = {
-    onCtrlC: abort.onCtrlC,
-    onEsc: abort.onEsc,
-    onPaste: attachment.onPaste,
-    onNew: session.onNew,
-    onCycleModel: models.cycleModel,
-    onTogglePicker: toggles.onTogglePicker,
-    onToggleSessionPicker: toggles.onToggleSessionPicker,
-    onScrollUp,
-    onScrollDown,
-    modelCount: models.models.length,
-  };
-
-  const { value, commands, cmdIndex, isCommandMode } = useInputHandler({
-    isActive,
-    streaming: session.streaming,
-    history,
-    actions,
-    onSubmit,
-    pluginCommands: registry.getCommands(),
-  });
-
+export function InputBoxView(props: InputBoxViewProps) {
   return (
     <Box
       flexDirection="column"
@@ -137,16 +107,21 @@ export function InputBox({
       marginX={1}
       marginTop={1}
     >
-      {isCommandMode && <CommandHints commands={commands} selectedIndex={cmdIndex} />}
+      {props.isCommandMode && <CommandHints commands={props.commands} selectedIndex={props.cmdIndex} />}
       <Box flexDirection="column" minHeight={2}>
-        <InputDisplay value={value} isCommandMode={isCommandMode} streaming={session.streaming} isActive={isActive} />
+        <InputDisplay
+          value={props.value}
+          isCommandMode={props.isCommandMode}
+          streaming={props.streaming}
+          isActive={props.isActive}
+        />
       </Box>
       <InputFooter
-        model={model}
-        attachmentName={attachment.attachment?.name ?? null}
-        attachmentError={attachment.attachmentError}
-        hasContent={value.length > 0}
-        isCommandMode={isCommandMode}
+        model={props.model}
+        attachmentName={props.attachmentName}
+        attachmentError={props.attachmentError}
+        hasContent={props.value.length > 0}
+        isCommandMode={props.isCommandMode}
       />
     </Box>
   );

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

@@ -0,0 +1,49 @@
+import { describe, expect, it, mock } from 'bun:test';
+import { BUILTIN_COMMANDS, fromPluginCommand, matchCommands } from './commands';
+import type { InputActions } from './useInputHandler';
+
+describe('matchCommands', () => {
+  it('returns no matches for input that does not start with /', () => {
+    expect(matchCommands('model', BUILTIN_COMMANDS)).toEqual([]);
+  });
+
+  it('filters by prefix case-insensitively', () => {
+    const result = matchCommands('/MOD', BUILTIN_COMMANDS);
+    expect(result.map((c) => c.name)).toEqual(['/model']);
+  });
+
+  it('returns all commands when input is just /', () => {
+    const result = matchCommands('/', BUILTIN_COMMANDS);
+    expect(result.length).toBe(BUILTIN_COMMANDS.length);
+  });
+});
+
+describe('BUILTIN_COMMANDS', () => {
+  it('each builtin invokes the expected action', () => {
+    const onTogglePicker = mock(() => undefined);
+    const onToggleSessionPicker = mock(() => undefined);
+    const onNew = mock(() => undefined);
+    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew };
+
+    for (const cmd of BUILTIN_COMMANDS) {
+      cmd.invoke?.(actions);
+    }
+
+    expect(onTogglePicker).toHaveBeenCalledTimes(1);
+    expect(onToggleSessionPicker).toHaveBeenCalledTimes(1);
+    expect(onNew).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('fromPluginCommand', () => {
+  it('prepends a slash and forwards args/context to execute', async () => {
+    const execute = mock(async () => 'ok');
+    const wrapped = fromPluginCommand(
+      { name: 'foo', description: 'plugin', execute },
+      { messages: [], cwd: '/tmp', config: { baseUrl: '', maxTokens: 0, temperature: 0, streamTimeoutMs: 0 } },
+    );
+    expect(wrapped.name).toBe('/foo');
+    await wrapped.execute?.('hello');
+    expect(execute).toHaveBeenCalledWith('hello', expect.any(Object));
+  });
+});

package/src/tui/input/commands.ts

@@ -0,0 +1,39 @@
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-agents';
+import type { InputActions } from './useInputHandler';
+
+/**
+ * A slash command can either:
+ *  - run via `invoke(actions)` — for builtins that just toggle UI state, or
+ *  - run via `execute(args)` — for plugin-supplied commands that produce
+ *    side-effects through the agent runtime.
+ *
+ * Exactly one of `invoke` / `execute` should be set per command.
+ */
+export interface SlashCommand {
+  name: string;
+  description: string;
+  invoke?: (actions: InputActions) => void;
+  execute?: (args: string) => Promise<string | undefined>;
+}
+
+export const BUILTIN_COMMANDS: SlashCommand[] = [
+  { name: '/model', description: 'Select a model', invoke: (a) => a.onTogglePicker?.() },
+  { name: '/sessions', description: 'List project sessions', invoke: (a) => a.onToggleSessionPicker?.() },
+  { name: '/new', description: 'New conversation', invoke: (a) => a.onNew?.() },
+];
+
+export function fromPluginCommand(command: PluginSlashCommand, context: CommandContext): SlashCommand {
+  return {
+    name: `/${command.name}`,
+    description: command.description,
+    execute: (args: string) => command.execute(args, context),
+  };
+}
+
+export function matchCommands(input: string, commands: SlashCommand[]): SlashCommand[] {
+  if (!input.startsWith('/')) {
+    return [];
+  }
+  const q = input.toLowerCase();
+  return commands.filter((cmd) => cmd.name.startsWith(q));
+}

package/src/tui/input/sanitize.ts

@@ -0,0 +1,33 @@
+// Matches xterm SGR (1006) mouse-event sequences after Ink has stripped the
+// leading \x1b. Format: \x1b[<button;x;y[Mm]
+//   - 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_EXACT_RE = /^\[<\d+;\d+;\d+[Mm]$/;
+
+/** Single-event chunk (Ink usually delivers one event per input call). */
+export function isMouseSequence(input: string): boolean {
+  return SGR_MOUSE_EXACT_RE.test(input);
+}
+
+/**
+ * Strip terminal-input bytes that should never become text:
+ *  1. Any embedded SGR mouse-event sequences (clicks/drags/release/wheel).
+ *  2. ASCII control bytes < 0x20 *except* \t and \n which paste should keep.
+ *
+ * Multi-event chunks (e.g. fast clicks batched into one data frame) are
+ * handled because the regex is global.
+ */
+export function sanitizeTerminalInput(text: string): string {
+  const stripped = text.replace(SGR_MOUSE_RE, '');
+  let out = '';
+  for (const ch of stripped) {
+    const code = ch.charCodeAt(0);
+    if (ch === '\t' || ch === '\n' || code >= 0x20) {
+      out += ch;
+    }
+  }
+  return out;
+}

package/src/tui/input/useCommandExecutor.ts

@@ -0,0 +1,32 @@
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-agents';
+import { useCallback, useMemo } from 'react';
+import { BUILTIN_COMMANDS, fromPluginCommand, type SlashCommand } from './commands';
+import type { InputActions } from './useInputHandler';
+
+interface CommandExecutorOptions {
+  actions: InputActions;
+  context: CommandContext;
+  pluginCommands: PluginSlashCommand[];
+}
+
+export function useCommandExecutor(options: CommandExecutorOptions) {
+  const { actions, context, pluginCommands } = options;
+
+  const commands = useMemo(
+    () => [...BUILTIN_COMMANDS, ...pluginCommands.map((command) => fromPluginCommand(command, context))],
+    [context, pluginCommands],
+  );
+
+  const execute = useCallback(
+    (command: SlashCommand, args: string) => {
+      if (command.execute) {
+        void command.execute(args);
+        return;
+      }
+      command.invoke?.(actions);
+    },
+    [actions],
+  );
+
+  return { commands, execute };
+}

package/src/tui/input/useInputBox.ts

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import { useChatContext } from '../chat/ChatContext';
+import type { InputBoxViewProps } from './InputBoxView';
+import { useCommandExecutor } from './useCommandExecutor';
+import { type InputActions, useInputHandler } from './useInputHandler';
+
+export interface InputBoxProps {
+  onSubmit: (text: string) => void;
+  onScrollUp?: () => void;
+  onScrollDown?: () => void;
+  isActive?: boolean;
+  model?: string;
+  history?: string[];
+}
+
+export function useInputBox({
+  onSubmit,
+  onScrollUp,
+  onScrollDown,
+  isActive = true,
+  model = '',
+  history = [],
+}: InputBoxProps): InputBoxViewProps {
+  const { config, session, toggles, attachment, models, abort, registry } = useChatContext();
+
+  // Stable references prevent downstream `useMemo`s (e.g. inside
+  // `useCommandExecutor`) from being invalidated on every render.
+  const actions: InputActions = useMemo(
+    () => ({
+      onCtrlC: abort.onCtrlC,
+      onEsc: abort.onEsc,
+      onPaste: attachment.onPaste,
+      onNew: session.onNew,
+      onCycleModel: models.cycleModel,
+      onTogglePicker: toggles.onTogglePicker,
+      onToggleSessionPicker: toggles.onToggleSessionPicker,
+      onScrollUp,
+      onScrollDown,
+      modelCount: models.models.length,
+    }),
+    [
+      abort.onCtrlC,
+      abort.onEsc,
+      attachment.onPaste,
+      session.onNew,
+      models.cycleModel,
+      models.models.length,
+      toggles.onTogglePicker,
+      toggles.onToggleSessionPicker,
+      onScrollUp,
+      onScrollDown,
+    ],
+  );
+
+  const commandContext = useMemo(
+    () => ({ messages: session.messages, cwd: process.cwd(), config }),
+    [session.messages, config],
+  );
+
+  // `registry.getCommands()` allocates a fresh array each call; cache by
+  // registry identity so `useCommandExecutor`'s memo can hit.
+  const pluginCommands = useMemo(() => registry.getCommands(), [registry]);
+
+  const commandExecutor = useCommandExecutor({
+    actions,
+    context: commandContext,
+    pluginCommands,
+  });
+
+  const input = useInputHandler({
+    isActive,
+    streaming: session.streaming,
+    history,
+    actions,
+    onSubmit,
+    availableCommands: commandExecutor.commands,
+    onCommand: commandExecutor.execute,
+  });
+
+  return {
+    ...input,
+    streaming: session.streaming,
+    isActive,
+    model,
+    attachmentName: attachment.attachment?.name ?? null,
+    attachmentError: attachment.attachmentError,
+  };
+}

package/src/tui/{hooks → input}/useInputHandler.ts

@@ -1,7 +1,7 @@
 import { type Key, useInput, useStdin } from 'ink';
-import type { SlashCommand as PluginSlashCommand } from 'mu-agents';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { matchCommands, type SlashCommand } from '../commands';
+import { matchCommands, type SlashCommand } from './commands';
+import { isMouseSequence, sanitizeTerminalInput } from './sanitize';
 
 const BACKSPACE_BYTES = new Set(['\x7f', '\x08']);
 
@@ -31,7 +31,8 @@ interface UseInputHandlerOptions {
   history: string[];
   actions: InputActions;
   onSubmit: (text: string) => void;
-  pluginCommands?: PluginSlashCommand[];
+  availableCommands: SlashCommand[];
+  onCommand: (command: SlashCommand, args: string) => void;
 }
 
 // Build a stable key identifier from an Ink key event
@@ -124,12 +125,6 @@ function useRawBackspace(isActive: boolean, setValue: (fn: (p: string) => string
   return handledRef;
 }
 
-const COMMAND_ACTIONS: Record<string, keyof InputActions> = {
-  model: 'onTogglePicker',
-  sessions: 'onToggleSessionPicker',
-  new: 'onNew',
-};
-
 interface BindingCtx {
   value: string;
   setValue: React.Dispatch<React.SetStateAction<string>>;
@@ -195,31 +190,25 @@ function handleBackspace(c: BindingCtx, alreadyHandled: boolean) {
 }
 
 function handleInsert(input: string, c: BindingCtx) {
-  if (input && input.length === 1) {
-    c.setValue((p) => p + input);
-    c.nav.reset();
+  if (!input) {
+    return;
   }
-}
-
-function executeCommand(cmd: SlashCommand, args: string, actions: InputActions): void {
-  if (cmd.execute) {
-    cmd.execute(args);
-  } else if (cmd.action) {
-    const actionKey = COMMAND_ACTIONS[cmd.action];
-    if (actionKey) {
-      (actions[actionKey] as (() => void) | undefined)?.();
-    }
+  const sanitized = sanitizeTerminalInput(input);
+  if (!sanitized) {
+    return;
   }
+  c.setValue((p) => p + sanitized);
+  c.nav.reset();
 }
 
 export function useInputHandler(options: UseInputHandlerOptions): InputState {
-  const { isActive, streaming, history, actions, onSubmit, pluginCommands } = options;
+  const { isActive, streaming, history, actions, onSubmit, availableCommands, onCommand } = options;
   const [value, setValue] = useState('');
   const [cmdIndex, setCmdIndex] = useState(0);
   const nav = useHistoryNavigation(value, history);
   const backspaceHandledRef = useRawBackspace(isActive, setValue);
 
-  const commands = useMemo(() => matchCommands(value.trim(), pluginCommands), [value, pluginCommands]);
+  const commands = useMemo(() => matchCommands(value.trim(), availableCommands), [value, availableCommands]);
   const isCommandMode = commands.length > 0 && value.trim().startsWith('/');
 
   const submit = useCallback(() => {
@@ -231,7 +220,7 @@ export function useInputHandler(options: UseInputHandlerOptions): InputState {
       if (cmd) {
         const args = value.trim().slice(cmd.name.length).trim();
         setValue('');
-        executeCommand(cmd, args, actions);
+        onCommand(cmd, args);
       }
       return;
     }
@@ -241,10 +230,16 @@ export function useInputHandler(options: UseInputHandlerOptions): InputState {
     onSubmit(value);
     setValue('');
     nav.reset();
-  }, [streaming, isCommandMode, commands, cmdIndex, value, actions, onSubmit, nav]);
+  }, [streaming, isCommandMode, commands, cmdIndex, value, onCommand, onSubmit, nav]);
 
   useInput(
     (input, key) => {
+      // Discard SGR mouse events outright — useScroll has already routed wheel
+      // events; clicks/releases must not leak into the input box.
+      if (isMouseSequence(input)) {
+        return;
+      }
+
       const alreadyHandled = backspaceHandledRef.current;
       backspaceHandledRef.current = false;