mu-coding 0.2.0 → 0.5.0

package/src/tui/components/chat/ChatPanelBody.tsx

@@ -1,15 +1,16 @@
 import { Box, type DOMElement as InkDOMElement } from 'ink';
-import type { StatusSegment } from 'mu-agents';
-import { useEffect, useState } from 'react';
-import { useChatContext } from '../../context/chat';
-import type { InkUIService, ToastRequest } from '../../services/uiService';
-import { MessageView, StatusBar } from '../chatLayout';
-import { InputBox } from '../inputBox';
+import type { ChatMessage } from 'mu-provider';
+import type { StreamState } from '../../chat/useChatSession';
+import { InputBox } from '../../input/InputBox';
+import type { InkUIService } from '../../plugins/InkUIService';
+import { MessageView } from '../messageView';
+import { type Toast, ToastContainer } from '../primitives/toast';
+import type { StatusBarSegment } from '../statusBar';
+import { StatusBar } from '../statusBar';
 import { DialogLayer } from '../ui/dialogLayer';
-import { ToastContainer, useToast } from '../ui/toast';
 import { Pickers } from './Pickers';
 
-interface LayoutProps {
+export interface ChatPanelBodyProps {
   width: number;
   height: number;
   viewRef: React.RefObject<InkDOMElement | null>;
@@ -20,68 +21,45 @@ interface LayoutProps {
   isActive: boolean;
   onScrollUp: () => void;
   onScrollDown: () => void;
+  uiService?: InkUIService;
+  messages: ChatMessage[];
+  streaming: boolean;
+  stream: StreamState;
+  error: string | null;
+  onSubmit: (text: string) => void;
+  model: string;
+  history: string[];
+  statusSegments: StatusBarSegment[];
+  toasts: Toast[];
+  onDismissToast: (id: number) => void;
 }
 
-const TOAST_LEVEL_COLORS: Record<string, string> = {
-  info: 'cyan',
-  success: 'green',
-  warning: 'yellow',
-  error: 'red',
-};
-
-export function ChatPanelBody(props: LayoutProps & { uiService?: InkUIService }) {
-  const { session, models, abort, registry } = useChatContext();
-  const [pluginStatus, setPluginStatus] = useState<StatusSegment[]>([]);
-  const { toasts, show, dismiss } = useToast();
-
-  useEffect(() => {
-    if (!props.uiService) return;
-    props.uiService.onToast((toast: ToastRequest) => {
-      show(toast.message, TOAST_LEVEL_COLORS[toast.level] ?? 'white');
-    });
-  }, [props.uiService, show]);
-
-  useEffect(() => {
-    const refresh = () => setPluginStatus(registry.getStatusSegments());
-    refresh();
-    const interval = setInterval(refresh, 2000);
-    return () => clearInterval(interval);
-  }, [registry]);
-
+export function ChatPanelBody(props: ChatPanelBodyProps) {
   return (
     <Box flexDirection="column" height={props.height} width={props.width}>
       <MessageView
         viewRef={props.viewRef}
         contentRef={props.contentRef}
-        messages={session.messages}
-        streaming={session.streaming}
-        stream={session.stream}
-        error={session.error}
+        messages={props.messages}
+        streaming={props.streaming}
+        stream={props.stream}
+        error={props.error}
         scrollOffset={props.scrollOffset}
         viewHeight={props.viewHeight}
         contentHeight={props.contentHeight}
       />
       <InputBox
-        onSubmit={session.onSend}
+        onSubmit={props.onSubmit}
         onScrollUp={props.onScrollUp}
         onScrollDown={props.onScrollDown}
         isActive={props.isActive}
-        model={models.currentModel}
-        history={session.inputHistory}
-      />
-      <StatusBar
-        streaming={session.streaming}
-        abortWarning={abort.abortWarning}
-        quitWarning={abort.quitWarning}
-        error={session.error}
-        modelError={models.modelError}
-        totalTokens={session.stream.totalTokens}
-        tokensPerSecond={session.stream.tps}
-        pluginStatus={pluginStatus}
+        model={props.model}
+        history={props.history}
       />
+      <StatusBar segments={props.statusSegments} />
       <Pickers />
       {props.uiService && <DialogLayer service={props.uiService} />}
-      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+      <ToastContainer toasts={props.toasts} onDismiss={props.onDismissToast} />
     </Box>
   );
 }

package/src/tui/components/chat/Pickers.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useChatContext } from '../../context/chat';
-import { PickerModal } from '../chatLayout';
+import { useChatContext } from '../../chat/ChatContext';
+import { PickerModal } from '../primitives/pickerModal';
 
 export function Pickers() {
   const { toggles, models, sessions, session } = useChatContext();

package/src/tui/components/messageView.tsx

@@ -0,0 +1,70 @@
+import type { DOMElement } from 'ink';
+import { Box, Text } from 'ink';
+import type { ChatMessage } from 'mu-provider';
+import { type RefObject, useMemo } from 'react';
+import type { StreamState } from '../chat/useChatSession';
+import { MessageItem } from './messages/messageItem';
+import { StreamingOutput } from './messages/streamingOutput';
+import { Scrollbar } from './primitives/scrollbar';
+
+/**
+ * Walk `messages` once and group every assistant-with-tool-calls index to
+ * its trailing `tool` messages. Avoids the previous O(n²) scan where each
+ * `MessageItem` re-walked the array forward to find its tool replies.
+ */
+function indexToolMessages(messages: ChatMessage[]): Map<number, ChatMessage[]> {
+  const map = new Map<number, ChatMessage[]>();
+  let activeAssistant = -1;
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg.role === 'assistant' && msg.toolCalls?.length) {
+      activeAssistant = i;
+      map.set(i, []);
+    } else if (msg.role === 'tool' && activeAssistant !== -1) {
+      map.get(activeAssistant)?.push(msg);
+    } else {
+      activeAssistant = -1;
+    }
+  }
+  return map;
+}
+
+export function MessageView({
+  viewRef,
+  contentRef,
+  messages,
+  streaming,
+  stream,
+  error,
+  scrollOffset,
+  viewHeight,
+  contentHeight,
+}: {
+  viewRef: RefObject<DOMElement | null>;
+  contentRef: RefObject<DOMElement | null>;
+  messages: ChatMessage[];
+  streaming: boolean;
+  stream: StreamState;
+  error: string | null;
+  scrollOffset: number;
+  viewHeight: number;
+  contentHeight: number;
+}) {
+  const toolMessageIndex = useMemo(() => indexToolMessages(messages), [messages]);
+
+  return (
+    <Box flexGrow={1} overflow="hidden">
+      <Box ref={viewRef} flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
+        <Box ref={contentRef} flexDirection="column" flexShrink={0} marginTop={-scrollOffset}>
+          {messages.map((msg, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: messages have no stable id
+            <MessageItem key={i} msg={msg} toolMessages={toolMessageIndex.get(i)} />
+          ))}
+          {streaming && <StreamingOutput currentText={stream.text} currentReasoning={stream.reasoning} />}
+          {error && <Text color="red">Error: {error}</Text>}
+        </Box>
+      </Box>
+      <Scrollbar viewHeight={viewHeight} contentHeight={contentHeight} scrollOffset={scrollOffset} />
+    </Box>
+  );
+}

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

@@ -1,33 +1,53 @@
 import { Box, Text } from 'ink';
-import { computeDiff, renderDiff } from '../../../diff';
+import type { ToolDisplayHint } from 'mu-agents';
+import { computeDiff, renderDiff } from '../../../utils/diff';
+import { ToolHeader } from './ToolHeader';
 
 interface EditOutputProps {
   args: string;
   content: string;
   error: boolean;
+  /**
+   * Display hint from the tool's plugin. Used to resolve which JSON arg field
+   * holds the path / from-string / to-string, so a plugin can register a
+   * diff-kind tool with arbitrary field names.
+   */
+  hint?: ToolDisplayHint;
 }
 
-export function EditOutput({ args, content, error }: EditOutputProps) {
-  let path = '(unknown)';
-  let oldString = '';
-  let newString = '';
+interface ParsedEditArgs {
+  path: string;
+  before: string;
+  after: string;
+}
+
+const MAX_DIFF_LINES = 30;
 
+function parseEditArgs(args: string, hint: ToolDisplayHint | undefined): ParsedEditArgs {
+  const fields = hint?.fields ?? {};
+  const pathField = fields.path ?? 'path';
+  const fromField = fields.from ?? 'old_string';
+  const toField = fields.to ?? 'new_string';
   try {
     const parsed = JSON.parse(args);
-    path = parsed.path ?? '(unknown)';
-    oldString = parsed.old_string ?? '';
-    newString = parsed.new_string ?? '';
+    return {
+      path: parsed[pathField] ?? '(unknown)',
+      before: parsed[fromField] ?? '',
+      after: parsed[toField] ?? '',
+    };
   } catch {
-    // ignore
+    return { path: '(unknown)', before: '', after: '' };
   }
+}
+
+export function EditOutput({ args, content, error, hint }: EditOutputProps) {
+  const { path, before, after } = parseEditArgs(args, hint);
+  const verb = hint?.verb ?? 'edit_file';
 
   if (error) {
     return (
       <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-        <Text color="red" bold={true}>
-          ✗ edit_file
-        </Text>
-        <Text dimColor={true}> {path}</Text>
+        <ToolHeader name={verb} subtitle={path} error={true} />
         <Text dimColor={true} wrap="wrap">
           {content}
         </Text>
@@ -35,13 +55,13 @@ export function EditOutput({ args, content, error }: EditOutputProps) {
     );
   }
 
-  const diff = computeDiff(oldString, newString);
+  const diff = computeDiff(before, after);
 
   if (diff.lines.length === 0 && diff.totalOldLines > 0 && diff.totalNewLines > 0) {
     return (
       <Box flexDirection="column" flexShrink={0} marginBottom={1}>
         <Text color="yellow" bold={true}>
-          ! edit_file
+          ! {verb}
         </Text>
         <Text dimColor={true}> {path}</Text>
         <Text dimColor={true}>
@@ -54,35 +74,30 @@ export function EditOutput({ args, content, error }: EditOutputProps) {
   if (diff.lines.length === 0) {
     return (
       <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-        <Text color="green" bold={true}>
-          ✓ edit_file
-        </Text>
-        <Text dimColor={true}> {path}</Text>
+        <ToolHeader name={verb} subtitle={path} />
         <Text dimColor={true}>No changes (content identical)</Text>
       </Box>
     );
   }
 
-  const { lines, truncated } = renderDiff(diff, 30);
+  const { lines, truncated } = renderDiff(diff, MAX_DIFF_LINES);
 
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-      <Text color="green" bold={true}>
-        ✓ edit_file
-      </Text>
-      <Text dimColor={true}> {path}</Text>
+      <ToolHeader name={verb} subtitle={path} />
       <Box flexDirection="column" flexShrink={0}>
-        {lines.map((line) => {
+        {lines.map((line, i) => {
           let color: string | undefined;
           if (line.startsWith('-')) color = 'red';
           else if (line.startsWith('+')) color = 'green';
           return (
-            <Text key={line} color={color} dimColor={color === undefined} wrap="wrap">
+            // biome-ignore lint/suspicious/noArrayIndexKey: diff lines may repeat (blank lines, braces); index disambiguates
+            <Text key={`${i}-${line}`} color={color} dimColor={color === undefined} wrap="wrap">
               {line}
             </Text>
           );
         })}
-        {truncated && <Text dimColor={true}>… (truncated, 30 line limit)</Text>}
+        {truncated && <Text dimColor={true}>… (truncated, {MAX_DIFF_LINES} line limit)</Text>}
       </Box>
     </Box>
   );

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

@@ -1,43 +1,48 @@
 import { Box, Text } from 'ink';
+import { ToolHeader } from './ToolHeader';
 
 interface ReadOutputProps {
   args: string;
   error: boolean;
 }
 
-export function ReadOutput({ args, error }: ReadOutputProps) {
-  let paths: string[] = ['(unknown)'];
-  let startLine: number | undefined;
-  let endLine: number | undefined;
+interface ReadArgs {
+  paths: string[];
+  startLine?: number;
+  endLine?: number;
+}
 
+function parseReadArgs(args: string): ReadArgs {
   try {
     const parsed = JSON.parse(args);
     const p = parsed.path;
-    paths = Array.isArray(p) ? p : [p];
-    startLine = parsed.start;
-    endLine = parsed.end;
+    return {
+      paths: Array.isArray(p) ? p : [p ?? '(unknown)'],
+      startLine: typeof parsed.start === 'number' ? parsed.start : undefined,
+      endLine: typeof parsed.end === 'number' ? parsed.end : undefined,
+    };
   } catch {
-    // ignore
+    return { paths: ['(unknown)'] };
   }
+}
 
+export function ReadOutput({ args, error }: ReadOutputProps) {
+  const { paths, startLine, endLine } = parseReadArgs(args);
   const rangeLabel = startLine != null && endLine != null ? ` (lines ${startLine}-${endLine})` : '';
+  const subtitle = paths.length === 1 ? `${paths[0]}${rangeLabel}` : `${paths.length} files${rangeLabel}`;
 
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-      <Text dimColor={true} wrap="wrap">
-        <Text color={error ? 'red' : 'green'} bold={true}>
-          {error ? '✗' : '✓'} read_file
-        </Text>{' '}
-        {paths.length > 1 ? `(${paths.length} files)` : ''}
-        {paths.length > 1 ? '\n' : ''}
-        {paths.map((p) => (
-          <Text key={p} dimColor={true} wrap="wrap">
-            {paths.length > 1 ? '  • ' : ''}
-            {p}
-          </Text>
-        ))}
-        {rangeLabel}
-      </Text>
+      <ToolHeader name="read_file" subtitle={subtitle} error={error} />
+      {paths.length > 1 && (
+        <Box flexDirection="column" flexShrink={0}>
+          {paths.map((p) => (
+            <Text key={p} dimColor={true} wrap="wrap">
+              {`  • ${p}`}
+            </Text>
+          ))}
+        </Box>
+      )}
     </Box>
   );
 }

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

@@ -0,0 +1,26 @@
+import { Box, Text } from 'ink';
+
+interface ToolHeaderProps {
+  /** The tool name shown after the status icon. */
+  name: string;
+  /** Optional subtitle (typically the file path or command). */
+  subtitle?: string;
+  /** When true, render with the failure styling. */
+  error?: boolean;
+}
+
+/**
+ * Shared header used by every tool-output renderer (read/write/edit/bash).
+ * Centralizes the ✓/✗ glyphs, color choice, and subtitle formatting so each
+ * specific component doesn't have to re-implement the same layout.
+ */
+export function ToolHeader({ name, subtitle, error = false }: ToolHeaderProps) {
+  return (
+    <Box flexDirection="column" flexShrink={0}>
+      <Text color={error ? 'red' : 'green'} bold={true}>
+        {error ? '✗' : '✓'} {name}
+      </Text>
+      {subtitle && <Text dimColor={true}> {subtitle}</Text>}
+    </Box>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { Box, Text } from 'ink';
+import { ToolHeader } from './ToolHeader';
 
 const PREVIEW_LINES = 30;
 
@@ -6,24 +7,24 @@ interface WriteOutputProps {
   args: string;
   content: string;
   error: boolean;
-  expanded: boolean;
 }
 
-export function WriteOutput({ args, content, error, expanded }: WriteOutputProps) {
-  let path = '(unknown)';
+function parsePath(args: string): string {
   try {
     const parsed = JSON.parse(args);
-    path = parsed.path ?? '(unknown)';
+    return parsed.path ?? '(unknown)';
   } catch {
-    // ignore
+    return '(unknown)';
   }
+}
+
+export function WriteOutput({ args, content, error }: WriteOutputProps) {
+  const path = parsePath(args);
 
   if (error) {
     return (
       <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-        <Text color="red" bold={true}>
-          ✗ write_file
-        </Text>
+        <ToolHeader name="write_file" error={true} />
         <Text dimColor={true} wrap="wrap">
           {content}
         </Text>
@@ -38,29 +39,16 @@ export function WriteOutput({ args, content, error, expanded }: WriteOutputProps
 
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-      <Text color="green" bold={true}>
-        ✓ write_file
-      </Text>
-      <Text dimColor={true}> {path}</Text>
+      <ToolHeader name="write_file" subtitle={path} />
       <Box flexDirection="column" flexShrink={0}>
         <Text dimColor={true}>
           {totalLines} line{totalLines !== 1 ? 's' : ''}
         </Text>
         <Box flexDirection="column" flexShrink={0}>
           <Text dimColor={true} wrap="wrap">
-            {expanded ? content : preview}
+            {hasMore ? preview : content}
           </Text>
-          {hasMore && !expanded && <Text dimColor={true}>… ({totalLines - PREVIEW_LINES} more lines)</Text>}
-          {!expanded && (
-            <Box>
-              <Text color="cyan"> [Enter] show more </Text>
-            </Box>
-          )}
-          {expanded && (
-            <Box>
-              <Text color="cyan"> [Enter] show less </Text>
-            </Box>
-          )}
+          {hasMore && <Text dimColor={true}>… ({totalLines - PREVIEW_LINES} more lines)</Text>}
         </Box>
       </Box>
     </Box>

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

@@ -5,26 +5,15 @@ 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 }) {
+  // 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/toolCallBlock.tsx

@@ -1,27 +1,32 @@
 import { Box, Text } from 'ink';
+import type { ToolDisplayHint } from 'mu-agents';
 import type { ChatMessage } from 'mu-provider';
+import { useToolDisplay } from '../../chat/ToolDisplayContext';
 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,46 @@ 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) {
+  let summary = '';
+  const commandField = hint?.fields?.command;
+  if (commandField) {
     try {
       const parsed = JSON.parse(args);
-      command = parsed.command ?? '';
+      summary = parsed[commandField] ?? '';
     } catch {
       // ignore
     }
@@ -84,10 +106,10 @@ function renderToolOutput(name: string, args: string, content: string, error: bo
     <Box flexDirection="column" flexShrink={0}>
       <Text color={error ? 'red' : 'green'} bold={true}>
         {error ? '✗' : '✓'} {name}
-        {command && (
+        {summary && (
           <>
             {' '}
-            <Text dimColor={true}>{command}</Text>
+            <Text dimColor={true}>{summary}</Text>
           </>
         )}
       </Text>