mu-coding 0.4.0 → 0.8.0

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

@@ -1,8 +1,10 @@
 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 { useTheme } from '../../context/ThemeContext';
+import { sanitizeTerminalInput } from '../../input/sanitize';
+import type { DialogRequest, InkUIService } from '../../plugins/InkUIService';
+import { Dropdown } from '../primitives/dropdown';
+import { Modal } from '../primitives/modal';
 
 // ─── Confirm Dialog ───────────────────────────────────────────────────────────
 
@@ -15,6 +17,7 @@ function ConfirmDialog({
   onResolve: (value: unknown) => void;
   onCancel: () => void;
 }) {
+  const theme = useTheme();
   const [selected, setSelected] = useState(0);
 
   useInput((input, key) => {
@@ -41,15 +44,15 @@ function ConfirmDialog({
         </Box>
       )}
       <Box gap={2}>
-        <Text color={selected === 0 ? 'green' : undefined} bold={selected === 0}>
+        <Text color={selected === 0 ? theme.dialog.confirmYes : undefined} bold={selected === 0}>
           {selected === 0 ? '▸ ' : '  '}Yes
         </Text>
-        <Text color={selected === 1 ? 'red' : undefined} bold={selected === 1}>
+        <Text color={selected === 1 ? theme.dialog.confirmNo : undefined} bold={selected === 1}>
           {selected === 1 ? '▸ ' : '  '}No
         </Text>
       </Box>
       <Box marginTop={1}>
-        <Text dimColor={true}>y/n · Enter to confirm · Esc to cancel</Text>
+        <Text color={theme.dialog.hint}>y/n · Enter to confirm · Esc to cancel</Text>
       </Box>
     </Modal>
   );
@@ -80,6 +83,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,
@@ -89,17 +98,25 @@ function InputDialog({
   onResolve: (value: unknown) => void;
   onCancel: () => void;
 }) {
+  const theme = useTheme();
   const [value, setValue] = useState('');
 
   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);
     }
   });
 
@@ -107,12 +124,14 @@ function InputDialog({
     <Modal visible={true} title={dialog.title}>
       <Box flexDirection="column">
         <Box paddingX={1} marginBottom={1}>
-          {!value && dialog.placeholder && <Text dimColor={true}>{dialog.placeholder}</Text>}
+          {!value && dialog.placeholder && <Text color={theme.dialog.placeholder}>{dialog.placeholder}</Text>}
           {value && <Text>{value}</Text>}
-          <Text inverse={true}>▎</Text>
+          <Text color={theme.dialog.cursor} inverse={true}>
+            ▎
+          </Text>
         </Box>
         <Box>
-          <Text dimColor={true}>Enter to submit · Esc to cancel</Text>
+          <Text color={theme.dialog.hint}>Enter to submit · Esc to cancel</Text>
         </Box>
       </Box>
     </Modal>

package/src/tui/context/ThemeContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, type ReactNode, useContext } from 'react';
+import { DEFAULT_THEME } from '../theme/presets';
+import type { Theme } from '../theme/types';
+
+/**
+ * Theme is read in many small components, so a dedicated context keeps
+ * `ChatContext` focused on session/runtime state and avoids re-renders
+ * cascading through unrelated subtrees when chat state changes.
+ */
+const ThemeContext = createContext<Theme>(DEFAULT_THEME);
+
+export function ThemeProvider({ theme, children }: { theme: Theme; children: ReactNode }) {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}

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/input/InputBoxView.tsx

@@ -0,0 +1,237 @@
+import { Box, Text } from 'ink';
+import type { MentionCompletion } from 'mu-core';
+import { useTheme } from '../context/ThemeContext';
+import type { Theme } from '../theme/types';
+import type { SlashCommand } from './commands';
+
+interface MentionPickerView {
+  completions: MentionCompletion[];
+  selectedIndex: number;
+  partial: string;
+}
+
+export interface InputBoxViewProps {
+  value: string;
+  cursor: number;
+  commands: SlashCommand[];
+  cmdIndex: number;
+  isCommandMode: boolean;
+  streaming: boolean;
+  isActive: boolean;
+  model: string;
+  attachmentName: string | null;
+  attachmentError: string | null;
+  mentions: MentionPickerView | null;
+}
+
+function CommandHints({
+  commands,
+  selectedIndex,
+  theme,
+}: {
+  commands: SlashCommand[];
+  selectedIndex: number;
+  theme: Theme;
+}) {
+  if (!commands.length) {
+    return null;
+  }
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {commands.map((cmd, i) => (
+        <Box key={cmd.name} paddingX={1}>
+          <Text color={i === selectedIndex ? theme.input.commandHighlight : undefined} bold={i === selectedIndex}>
+            {i === selectedIndex ? '▸ ' : '  '}
+            {cmd.name}
+          </Text>
+          <Text dimColor={true}> {cmd.description}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function MentionHints({ mentions, theme }: { mentions: MentionPickerView; theme: Theme }) {
+  if (!mentions.completions.length) {
+    return null;
+  }
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {mentions.completions.map((c, i) => (
+        <Box key={c.value} paddingX={1}>
+          <Text
+            color={i === mentions.selectedIndex ? theme.input.commandHighlight : undefined}
+            bold={i === mentions.selectedIndex}
+          >
+            {i === mentions.selectedIndex ? '▸ @' : '  @'}
+            {c.label ?? c.value}
+          </Text>
+          {c.description && <Text dimColor={true}> {c.description}</Text>}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function InputFooter({
+  model,
+  attachmentName,
+  attachmentError,
+  hasContent,
+  isCommandMode,
+  hasMentions,
+  theme,
+}: {
+  model: string;
+  attachmentName: string | null;
+  attachmentError: string | null;
+  hasContent: boolean;
+  isCommandMode: boolean;
+  hasMentions: boolean;
+  theme: Theme;
+}) {
+  const hint = hasMentions
+    ? '↑↓ select · Tab/Enter accept'
+    : hasContent
+      ? isCommandMode
+        ? '↑↓ select · Enter execute'
+        : 'Enter to send · Shift+Enter for newline · ←→ move'
+      : 'Type / for commands · @ for mentions';
+
+  return (
+    <Box justifyContent="space-between">
+      <Box gap={1}>
+        {model && (
+          <Text color={theme.input.modelLabel} bold={true}>
+            {model}
+          </Text>
+        )}
+        {attachmentName && <Text color={theme.input.attachmentName}>📷 {attachmentName}</Text>}
+        {attachmentError && <Text color={theme.input.attachmentError}>{attachmentError}</Text>}
+      </Box>
+      <Text color={theme.input.footerHint}>{hint}</Text>
+    </Box>
+  );
+}
+
+interface RowProps {
+  line: string;
+  cursorCol: number | null;
+  isCommandLine: boolean;
+  theme: Theme;
+}
+
+/**
+ * Render one buffer row, splicing the cursor glyph at `cursorCol` if the
+ * cursor lives on this row. Splitting around the cursor (rather than rendering
+ * the whole line and overlaying) keeps the layout flowing inside Ink's text
+ * wrapping engine.
+ */
+function InputRow({ line, cursorCol, isCommandLine, theme }: RowProps) {
+  const colorize = (text: string) => (isCommandLine ? <Text color={theme.input.commandHighlight}>{text}</Text> : text);
+
+  if (cursorCol === null) {
+    return <Text wrap="wrap">{colorize(line)}</Text>;
+  }
+
+  const before = line.slice(0, cursorCol);
+  const after = line.slice(cursorCol);
+  return (
+    <Text wrap="wrap">
+      {colorize(before)}
+      <Text color={theme.input.cursor} inverse={true}>
+        ▎
+      </Text>
+      {colorize(after)}
+    </Text>
+  );
+}
+
+interface DisplayProps {
+  value: string;
+  cursor: number;
+  isCommandMode: boolean;
+  streaming: boolean;
+  isActive: boolean;
+  theme: Theme;
+}
+
+function InputDisplay({ value, cursor, isCommandMode, streaming, isActive, theme }: DisplayProps) {
+  const showCursor = !streaming && isActive;
+  if (!value.length) {
+    return (
+      <Text>
+        {showCursor && (
+          <Text color={theme.input.cursor} inverse={true}>
+            ▎
+          </Text>
+        )}
+      </Text>
+    );
+  }
+  const lines = value.split('\n');
+  // Locate cursor row/col by walking newline offsets.
+  let row = 0;
+  let consumed = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const lineEnd = consumed + lines[i].length;
+    if (cursor <= lineEnd) {
+      row = i;
+      break;
+    }
+    consumed = lineEnd + 1; // +1 for the newline
+    row = i + 1;
+  }
+  const col = cursor - consumed;
+  return (
+    <>
+      {lines.map((line, i) => (
+        <InputRow
+          // biome-ignore lint/suspicious/noArrayIndexKey: static input display lines
+          key={`${i}-${line}`}
+          line={line}
+          cursorCol={showCursor && i === row ? col : null}
+          isCommandLine={i === 0 && isCommandMode}
+          theme={theme}
+        />
+      ))}
+    </>
+  );
+}
+
+export function InputBoxView(props: InputBoxViewProps) {
+  const theme = useTheme();
+  return (
+    <Box
+      flexDirection="column"
+      flexShrink={0}
+      backgroundColor={theme.input.background}
+      paddingX={1}
+      paddingY={1}
+      marginX={1}
+      marginTop={1}
+    >
+      {props.isCommandMode && <CommandHints commands={props.commands} selectedIndex={props.cmdIndex} theme={theme} />}
+      {props.mentions && <MentionHints mentions={props.mentions} theme={theme} />}
+      <Box flexDirection="column" minHeight={2}>
+        <InputDisplay
+          value={props.value}
+          cursor={props.cursor}
+          isCommandMode={props.isCommandMode}
+          streaming={props.streaming}
+          isActive={props.isActive}
+          theme={theme}
+        />
+      </Box>
+      <InputFooter
+        model={props.model}
+        attachmentName={props.attachmentName}
+        attachmentError={props.attachmentError}
+        hasContent={props.value.length > 0}
+        isCommandMode={props.isCommandMode}
+        hasMentions={Boolean(props.mentions)}
+        theme={theme}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,51 @@
+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 onShowContext = mock(() => undefined);
+    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew, onShowContext };
+
+    for (const cmd of BUILTIN_COMMANDS) {
+      cmd.invoke?.(actions);
+    }
+
+    expect(onTogglePicker).toHaveBeenCalledTimes(1);
+    expect(onToggleSessionPicker).toHaveBeenCalledTimes(1);
+    expect(onNew).toHaveBeenCalledTimes(1);
+    expect(onShowContext).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,44 @@
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-core';
+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?.() },
+  {
+    name: '/context',
+    description: 'Show the LLM context (system prompt, messages, tools) as plain text',
+    invoke: (a) => a.onShowContext?.(),
+  },
+];
+
+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/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);
+  });
+});