mu-coding 0.4.0 → 0.8.0

package/src/tui/components/messages/assistantMessage.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
 import React from 'react';
 import { ReasoningBlock } from './reasoningBlock';
 import { ToolCallBlock } from './toolCallBlock';
@@ -8,8 +8,18 @@ export const AssistantMessage: React.FC<{
   msg: ChatMessage;
   toolMessages?: ChatMessage[];
 }> = React.memo(function AssistantMessage({ msg, toolMessages }) {
+  const badge = msg.display?.badge;
+  const prefix = msg.display?.prefix;
+  const color = msg.display?.color;
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      {badge && (
+        <Box marginBottom={1}>
+          <Text color={color} bold={true}>
+            [{badge}]
+          </Text>
+        </Box>
+      )}
       {msg.reasoning && <ReasoningBlock reasoning={msg.reasoning} />}
       {msg.toolCalls?.length ? (
         <Box flexDirection="column" marginBottom={1}>
@@ -18,7 +28,12 @@ export const AssistantMessage: React.FC<{
           ))}
         </Box>
       ) : null}
-      {msg.content && <Text wrap="wrap">{msg.content}</Text>}
+      {msg.content && (
+        <Text wrap="wrap" color={color}>
+          {prefix && <Text color={color}>{prefix}</Text>}
+          {msg.content}
+        </Text>
+      )}
     </Box>
   );
 });

package/src/tui/components/messages/messageItem.tsx

@@ -1,30 +1,37 @@
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
 import React from 'react';
+import { useMessageRenderer } from '../../chat/MessageRendererContext';
 import { AssistantMessage } from './assistantMessage';
 import { UserMessage } from './userMessage';
 
 export const MessageItem: React.FC<{
   msg: ChatMessage;
-  messages: ChatMessage[];
-  index: number;
-}> = React.memo(function MessageItem({ msg, messages, index }) {
-  // Tool result messages are rendered inline within ToolCallBlock
+  toolMessages?: ChatMessage[];
+}> = React.memo(function MessageItem({ msg, toolMessages }) {
+  const customRenderer = useMessageRenderer(msg.customType);
+
+  // Plugins may flag a message as `hidden` to keep it in the LLM transcript
+  // while suppressing on-screen rendering (e.g. system reminders carried with
+  // the user's next turn).
+  if (msg.display?.hidden) {
+    return null;
+  }
+
+  // Custom-typed messages always defer to a registered renderer when one is
+  // available; otherwise fall through to the role-default rendering so a
+  // plugin can ship messages whose renderer isn't loaded yet without losing
+  // their content.
+  if (customRenderer) {
+    return <>{customRenderer(msg)}</>;
+  }
+
+  // Tool result messages are rendered inline within ToolCallBlock via the
+  // pre-built index passed from MessageView; suppress them at the top level.
   if (msg.role === 'tool') {
     return null;
   }
 
-  // Check if this assistant message has tool calls
   if (msg.role === 'assistant' && msg.toolCalls?.length) {
-    // Collect following tool messages
-    const toolMessages: ChatMessage[] = [];
-    for (let i = index + 1; i < messages.length; i++) {
-      if (messages[i].role === 'tool') {
-        toolMessages.push(messages[i]);
-      } else {
-        break;
-      }
-    }
-
     return <AssistantMessage msg={msg} toolMessages={toolMessages} />;
   }
 

package/src/tui/components/messages/reasoningBlock.tsx

@@ -1,12 +1,14 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 
 export function ReasoningBlock({ reasoning }: { reasoning: string }) {
+  const theme = useTheme();
   return (
     <Box flexDirection="column" marginTop={0} marginBottom={1}>
-      <Text color="yellow" italic={true}>
+      <Text color={theme.reasoning.title} italic={true}>
         thinking
       </Text>
-      <Text dimColor={true} italic={true} wrap="wrap">
+      <Text color={theme.reasoning.body} italic={true} wrap="wrap">
         {reasoning}
       </Text>
     </Box>

package/src/tui/components/messages/streamingOutput.tsx

@@ -1,13 +1,17 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 import { ReasoningBlock } from './reasoningBlock';
 
 export function StreamingOutput({ currentText, currentReasoning }: { currentText: string; currentReasoning: string }) {
+  const theme = useTheme();
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
       {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
       <Text wrap="wrap">
         {currentText}
-        <Text inverse={true}>▎</Text>
+        <Text color={theme.input.cursor} inverse={true}>
+          ▎
+        </Text>
       </Text>
     </Box>
   );

package/src/tui/components/messages/toolCallBlock.tsx

@@ -1,27 +1,32 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage, ToolDisplayHint } from 'mu-core';
+import { useToolDisplay } from '../../chat/ToolDisplayContext';
+import { useTheme } from '../../context/ThemeContext';
 import { useSpinner } from '../../hooks/useUI';
 import { EditOutput } from './EditOutput';
 import { ReadOutput } from './ReadOutput';
 import { WriteOutput } from './WriteOutput';
 
-const TOOL_VERBS: Record<string, string> = {
-  bash: 'running',
-  read_file: 'reading',
-  write_file: 'writing',
-  edit_file: 'editing',
-};
+/**
+ * Render a tool call. Display behaviour is driven by the optional
+ * `ToolDisplayHint` the plugin attached to its tool — `kind` selects the
+ * dedicated renderer (file-read / file-write / diff / shell), and `verb`
+ * shows in the spinner line. Tools without a hint fall back to a generic
+ * preview block, so plugin-registered tools "just work" without UI changes.
+ */
 
-function getToolArgSummary(name: string, args: string): string {
-  if (name === 'bash') {
-    try {
-      const parsed = JSON.parse(args);
-      return parsed.command ?? args;
-    } catch {
-      return args;
-    }
+function getArgSummary(args: string, hint: ToolDisplayHint | undefined): string {
+  if (!hint?.fields) return args;
+  // For shell-like tools the most useful preview is the command itself;
+  // generic tools show the raw JSON.
+  const commandField = hint.fields.command;
+  if (!commandField) return args;
+  try {
+    const parsed = JSON.parse(args);
+    return parsed[commandField] ?? args;
+  } catch {
+    return args;
   }
-  return args;
 }
 
 export function ToolCallBlock({
@@ -33,13 +38,13 @@ export function ToolCallBlock({
 }) {
   const name = toolCall.function.name;
   const args = toolCall.function.arguments;
+  const hint = useToolDisplay(name);
 
-  // Find the matching tool result message
   const result = toolMsg?.toolResult;
   const hasResult = result !== undefined;
   const spinner = useSpinner(!hasResult);
-  const verb = TOOL_VERBS[name] ?? 'executing';
-  const argSummary = getToolArgSummary(name, args);
+  const verb = hint?.verb ?? 'executing';
+  const argSummary = getArgSummary(args, hint);
 
   return (
     <Box flexDirection="column" flexShrink={0}>
@@ -51,29 +56,47 @@ export function ToolCallBlock({
           </Text>
         </Box>
       ) : (
-        renderToolOutput(name, args, result.content, result.error ?? false, result.expanded)
+        renderToolOutput(name, args, result.content, result.error ?? false, hint)
       )}
     </Box>
   );
 }
 
-function renderToolOutput(name: string, args: string, content: string, error: boolean, expanded?: boolean) {
-  if (name === 'read_file') {
-    return <ReadOutput args={args} error={error} />;
-  }
-  if (name === 'write_file') {
-    return <WriteOutput args={args} content={content} error={error} expanded={expanded ?? false} />;
-  }
-  if (name === 'edit_file') {
-    return <EditOutput args={args} content={content} error={error} />;
+function renderToolOutput(
+  name: string,
+  args: string,
+  content: string,
+  error: boolean,
+  hint: ToolDisplayHint | undefined,
+) {
+  switch (hint?.kind) {
+    case 'file-read':
+      return <ReadOutput args={args} error={error} />;
+    case 'file-write':
+      return <WriteOutput args={args} content={content} error={error} />;
+    case 'diff':
+      return <EditOutput args={args} content={content} error={error} hint={hint} />;
+    default:
+      return <GenericToolOutput name={name} args={args} content={content} error={error} hint={hint} />;
   }
+}
+
+interface GenericProps {
+  name: string;
+  args: string;
+  content: string;
+  error: boolean;
+  hint: ToolDisplayHint | undefined;
+}
 
-  // Fallback for bash and unknown tools
-  let command = '';
-  if (name === 'bash') {
+function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
+  const theme = useTheme();
+  let summary = '';
+  const commandField = hint?.fields?.command;
+  if (commandField) {
     try {
       const parsed = JSON.parse(args);
-      command = parsed.command ?? '';
+      summary = parsed[commandField] ?? '';
     } catch {
       // ignore
     }
@@ -82,17 +105,17 @@ function renderToolOutput(name: string, args: string, content: string, error: bo
   const preview = content.length > 200 ? `${content.slice(0, 200)}…` : content;
   return (
     <Box flexDirection="column" flexShrink={0}>
-      <Text color={error ? 'red' : 'green'} bold={true}>
+      <Text color={error ? theme.tool.error : theme.tool.success} bold={true}>
         {error ? '✗' : '✓'} {name}
-        {command && (
+        {summary && (
           <>
             {' '}
-            <Text dimColor={true}>{command}</Text>
+            <Text dimColor={true}>{summary}</Text>
           </>
         )}
       </Text>
-      <Box flexDirection="column" backgroundColor="#111111" padding={1} marginTop={1}>
-        <Text color="white">{preview}</Text>
+      <Box flexDirection="column" backgroundColor={theme.tool.previewBackground} padding={1} marginTop={1}>
+        <Text color={theme.tool.previewText}>{preview}</Text>
       </Box>
     </Box>
   );

package/src/tui/components/messages/userMessage.tsx

@@ -1,29 +1,44 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
+import { useTheme } from '../../context/ThemeContext';
 
 export function UserMessage({ msg }: { msg: ChatMessage }) {
+  const theme = useTheme();
+  const borderColor = msg.display?.color ?? theme.user.border;
+  const badge = msg.display?.badge;
+  const prefix = msg.display?.prefix;
   return (
     <Box
       flexDirection="column"
       flexShrink={0}
       marginY={1}
-      backgroundColor="#1a1a1a"
+      backgroundColor={theme.user.background}
       paddingX={1}
       paddingY={1}
       borderLeft={true}
       borderTop={false}
       borderBottom={false}
       borderRight={false}
-      borderColor="yellow"
+      borderColor={borderColor}
       borderStyle="single"
     >
+      {badge && (
+        <Box marginBottom={1}>
+          <Text color={msg.display?.color} bold={true}>
+            [{badge}]
+          </Text>
+        </Box>
+      )}
       {msg.images && msg.images.length > 0 && (
         <Box>
-          <Text color="cyan">📷 </Text>
-          <Text color="cyan">{msg.images.map((img) => img.name).join(', ')}</Text>
+          <Text color={theme.user.attachment}>📷 </Text>
+          <Text color={theme.user.attachment}>{msg.images.map((img) => img.name).join(', ')}</Text>
         </Box>
       )}
-      <Text wrap="wrap">{msg.content}</Text>
+      <Text wrap="wrap">
+        {prefix && <Text color={msg.display?.color}>{prefix}</Text>}
+        {msg.content}
+      </Text>
     </Box>
   );
 }

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

@@ -1,5 +1,7 @@
 import { Box, Text, useInput } from 'ink';
 import { useMemo, useState } from 'react';
+import { useTheme } from '../../context/ThemeContext';
+import { sanitizeTerminalInput } from '../../input/sanitize';
 
 interface DropdownItem {
   label: string;
@@ -32,6 +34,7 @@ export function Dropdown({
   onCancel,
   isActive = true,
 }: DropdownProps) {
+  const theme = useTheme();
   const [query, setQuery] = useState('');
   const [index, setIndex] = useState(0);
 
@@ -42,13 +45,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 },
   );
@@ -57,7 +84,7 @@ export function Dropdown({
     if (filtered.length === 0) {
       return (
         <Box paddingX={1}>
-          <Text dimColor={true} italic={true}>
+          <Text color={theme.dropdown.empty} italic={true}>
             No results
           </Text>
         </Box>
@@ -65,7 +92,7 @@ export function Dropdown({
     }
     return visibleItems.map((item, i) => {
       const isSel = i === index - visibleStart;
-      const color = isSel ? 'green' : undefined;
+      const color = isSel ? theme.dropdown.selected : undefined;
       return (
         <Box key={item.value} paddingX={1}>
           <Text color={color} bold={isSel}>
@@ -81,9 +108,11 @@ export function Dropdown({
   return (
     <Box flexDirection="column">
       <Box paddingX={1} marginBottom={1}>
-        <Text dimColor={true}>{placeholder} </Text>
+        <Text color={theme.dropdown.placeholder}>{placeholder} </Text>
         <Text>{query}</Text>
-        <Text inverse={true}>▎</Text>
+        <Text color={theme.dropdown.cursor} inverse={true}>
+          ▎
+        </Text>
       </Box>
       {renderResults()}
       {filtered.length > maxVisible && (

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

@@ -1,5 +1,6 @@
 import { Box, Text, useStdout } from 'ink';
 import type { ReactNode } from 'react';
+import { useTheme } from '../../context/ThemeContext';
 
 interface ModalProps {
   visible: boolean;
@@ -9,6 +10,7 @@ interface ModalProps {
 }
 
 export function Modal({ visible, title, width: requestedWidth, children }: ModalProps) {
+  const theme = useTheme();
   const { stdout } = useStdout();
   const columns = stdout.columns;
   const rows = stdout.rows;
@@ -30,12 +32,12 @@ export function Modal({ visible, title, width: requestedWidth, children }: Modal
       top={0}
       left={0}
     >
-      <Box flexDirection="column" width={modalWidth} backgroundColor="#1a1a1a" paddingX={2} paddingY={1}>
+      <Box flexDirection="column" width={modalWidth} backgroundColor={theme.modal.background} paddingX={2} paddingY={1}>
         {title && (
           <Box marginBottom={1}>
             <Text bold={true}>{title}</Text>
             <Box flexGrow={1} />
-            <Text dimColor={true}>Esc to close</Text>
+            <Text color={theme.modal.hint}>Esc to close</Text>
           </Box>
         )}
         {children}

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

@@ -0,0 +1,47 @@
+import { Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
+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;
+}) {
+  const theme = useTheme();
+  return (
+    <Modal visible={visible} title={title}>
+      {items.length === 0 && emptyMessage ? (
+        <Text color={theme.dropdown.empty} 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/{ui → primitives}/toast.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useInput, useStdout } from 'ink';
 import { useCallback, useState } from 'react';
+import { useTheme } from '../../context/ThemeContext';
 
 export interface Toast {
   id: number;
@@ -29,6 +30,7 @@ export function useToast() {
 }
 
 export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
+  const theme = useTheme();
   const { stdout } = useStdout();
   const columns = stdout.columns;
 
@@ -48,14 +50,14 @@ export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismi
     <Box position="absolute" top={0} left={0} width={columns} justifyContent="flex-end" paddingX={2} paddingY={1}>
       <Box flexDirection="column" gap={1}>
         {toasts.map((t) => (
-          <Box key={t.id} backgroundColor="#1a1a1a" paddingX={2} paddingY={0} width={maxWidth}>
+          <Box key={t.id} backgroundColor={theme.toast.background} paddingX={2} paddingY={0} width={maxWidth}>
             <Box flexGrow={1} flexShrink={1}>
-              <Text color={t.color ?? 'green'} wrap="wrap">
+              <Text color={t.color ?? theme.toast.defaultColor} wrap="wrap">
                 {t.message}
               </Text>
             </Box>
             <Box marginLeft={1} flexShrink={0}>
-              <Text color="gray" dimColor={true}>
+              <Text color={theme.toast.closeHint} dimColor={true}>
                 [esc]✕
               </Text>
             </Box>

package/src/tui/components/statusBar.tsx

@@ -0,0 +1,32 @@
+import { Box, Text } from 'ink';
+import { useTheme } from '../context/ThemeContext';
+
+export interface StatusBarSegment {
+  text: string;
+  color?: string;
+  dim?: boolean;
+}
+
+export function StatusBar({ segments }: { segments: StatusBarSegment[] }) {
+  const theme = useTheme();
+  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 color={theme.status.separator} dimColor={true}>
+                {' '}
+                ·{' '}
+              </Text>
+            )}
+            <Text color={seg.color} dimColor={seg.dim}>
+              {seg.text}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}