mu-coding 0.5.0 → 0.9.0

package/src/tui/input/InputBoxView.tsx

@@ -1,19 +1,39 @@
 import { Box, Text } from 'ink';
+import type { InputInfoSegment, 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;
+  infoSegments: InputInfoSegment[];
   attachmentName: string | null;
   attachmentError: string | null;
+  mentions: MentionPickerView | null;
 }
 
-function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; selectedIndex: number }) {
+function CommandHints({
+  commands,
+  selectedIndex,
+  theme,
+}: {
+  commands: SlashCommand[];
+  selectedIndex: number;
+  theme: Theme;
+}) {
   if (!commands.length) {
     return null;
   }
@@ -21,7 +41,7 @@ function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; s
     <Box flexDirection="column" marginBottom={1}>
       {commands.map((cmd, i) => (
         <Box key={cmd.name} paddingX={1}>
-          <Text color={i === selectedIndex ? 'green' : undefined} bold={i === selectedIndex}>
+          <Text color={i === selectedIndex ? theme.input.commandHighlight : undefined} bold={i === selectedIndex}>
             {i === selectedIndex ? '▸ ' : '  '}
             {cmd.name}
           </Text>
@@ -32,96 +52,241 @@ function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; s
   );
 }
 
+/**
+ * Render a label with the substring matching `partial` (case-insensitive)
+ * highlighted using the same accent color the picker uses for the selected
+ * row. Preserves the original casing of the label since we only slice it.
+ */
+function renderHighlightedLabel(label: string, partial: string, theme: Theme) {
+  if (!partial) return <>{label}</>;
+  const idx = label.toLowerCase().indexOf(partial.toLowerCase());
+  if (idx < 0) return <>{label}</>;
+  const head = label.slice(0, idx);
+  const match = label.slice(idx, idx + partial.length);
+  const tail = label.slice(idx + partial.length);
+  return (
+    <>
+      {head}
+      <Text color={theme.input.commandHighlight} bold={true}>
+        {match}
+      </Text>
+      {tail}
+    </>
+  );
+}
+
+function MentionHints({ mentions, theme }: { mentions: MentionPickerView; theme: Theme }) {
+  if (!mentions.completions.length) {
+    return null;
+  }
+  // Group completions by category while preserving the global index so
+  // ↑/↓ navigation still maps to the correct entry. When only one
+  // category is present we hide the header to keep the dropdown compact.
+  const grouped = new Map<string, { c: MentionCompletion; i: number }[]>();
+  mentions.completions.forEach((c, i) => {
+    const key = c.category ?? '';
+    const arr = grouped.get(key);
+    if (arr) arr.push({ c, i });
+    else grouped.set(key, [{ c, i }]);
+  });
+  const showHeaders = grouped.size > 1;
+  const sections = Array.from(grouped.entries());
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {sections.map(([category, items]) => (
+        <Box key={category || 'default'} flexDirection="column">
+          {showHeaders && category && (
+            <Box paddingX={1}>
+              <Text dimColor={true} bold={true}>
+                {category}
+              </Text>
+            </Box>
+          )}
+          {items.map(({ c, i }) => {
+            const selected = i === mentions.selectedIndex;
+            const labelText = c.label ?? c.value;
+            return (
+              <Box key={`${category}:${c.value}`} paddingX={1}>
+                <Text wrap="truncate-start" color={selected ? theme.input.commandHighlight : undefined} bold={selected}>
+                  {selected ? '▸ @' : '  @'}
+                  {renderHighlightedLabel(labelText, mentions.partial, theme)}
+                </Text>
+                {c.description && <Text dimColor={true}> {c.description}</Text>}
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
 function InputFooter({
   model,
+  infoSegments,
   attachmentName,
   attachmentError,
   hasContent,
   isCommandMode,
+  hasMentions,
+  theme,
 }: {
   model: string;
+  infoSegments: InputInfoSegment[];
   attachmentName: string | null;
   attachmentError: string | null;
   hasContent: boolean;
   isCommandMode: boolean;
+  hasMentions: boolean;
+  theme: Theme;
 }) {
-  const hint = hasContent
-    ? isCommandMode
-      ? '↑↓ select · Enter execute'
-      : 'Enter to send · Shift+Enter for newline'
-    : 'Type / for commands';
+  const hint = hasMentions
+    ? '↑↓ · Tab accept'
+    : hasContent
+      ? isCommandMode
+        ? '↑↓ · Enter run'
+        : ''
+      : '/ commands · @ mentions';
 
   return (
     <Box justifyContent="space-between">
       <Box gap={1}>
+        {infoSegments.map((seg) => (
+          <Text key={seg.key} color={seg.color} bold={seg.bold}>
+            {seg.text}
+          </Text>
+        ))}
         {model && (
-          <Text color="white" bold={true}>
+          <Text color={theme.input.modelLabel} bold={true}>
             {model}
           </Text>
         )}
-        {attachmentName && <Text color="cyan">📷 {attachmentName}</Text>}
-        {attachmentError && <Text color="red">{attachmentError}</Text>}
+        {attachmentName && <Text color={theme.input.attachmentName}>📷 {attachmentName}</Text>}
+        {attachmentError && <Text color={theme.input.attachmentError}>{attachmentError}</Text>}
       </Box>
-      <Text dimColor={true}>{hint}</Text>
+      <Text color={theme.input.footerHint}>{hint}</Text>
     </Box>
   );
 }
 
-function InputDisplay({
-  value,
-  isCommandMode,
-  streaming,
-  isActive,
-}: {
+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 inverse={true}>▎</Text>}</Text>;
+    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) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: static input display lines
-        <Text key={`${i}-${line}`} wrap="wrap">
-          {i === 0 && isCommandMode ? <Text color="green">{line}</Text> : line}
-          {i === lines.length - 1 && showCursor && <Text inverse={true}>▎</Text>}
-        </Text>
+        <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="#222222"
+      backgroundColor={theme.input.background}
       paddingX={1}
       paddingY={1}
       marginX={1}
       marginTop={1}
     >
-      {props.isCommandMode && <CommandHints commands={props.commands} selectedIndex={props.cmdIndex} />}
+      {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}
+        infoSegments={props.infoSegments}
         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

@@ -23,7 +23,8 @@ describe('BUILTIN_COMMANDS', () => {
     const onTogglePicker = mock(() => undefined);
     const onToggleSessionPicker = mock(() => undefined);
     const onNew = mock(() => undefined);
-    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew };
+    const onShowContext = mock(() => undefined);
+    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew, onShowContext };
 
     for (const cmd of BUILTIN_COMMANDS) {
       cmd.invoke?.(actions);
@@ -32,6 +33,7 @@ describe('BUILTIN_COMMANDS', () => {
     expect(onTogglePicker).toHaveBeenCalledTimes(1);
     expect(onToggleSessionPicker).toHaveBeenCalledTimes(1);
     expect(onNew).toHaveBeenCalledTimes(1);
+    expect(onShowContext).toHaveBeenCalledTimes(1);
   });
 });
 

package/src/tui/input/commands.ts

@@ -1,4 +1,4 @@
-import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-agents';
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-core';
 import type { InputActions } from './useInputHandler';
 
 /**
@@ -20,6 +20,16 @@ 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: '/compact',
+    description: 'Summarize the conversation and replace history with the summary (frees context)',
+    invoke: (a) => a.onCompact?.(),
+  },
+  {
+    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 {

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);
+  });
+});