mu-coding 0.4.0 → 0.8.0

package/src/tui/chat/useStatusSegments.ts

@@ -0,0 +1,62 @@
+import type { StatusSegment } from 'mu-core';
+import type { StatusBarSegment } from '../components/statusBar';
+import { useSpinner } from '../hooks/useUI';
+
+const ERROR_PREVIEW_LEN = 40;
+
+interface StatusSegmentOptions {
+  streaming: boolean;
+  abortWarning: boolean;
+  quitWarning: boolean;
+  error: string | null;
+  modelError: string | null;
+  totalTokens: number;
+  /** Tokens served from server-side prompt cache. Rendered as `(N cached)`
+   *  next to the total when > 0. Omit (or pass 0) to hide the suffix. */
+  cachedTokens?: number;
+  pluginStatus?: StatusSegment[];
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+const tokenFormatter = new Intl.NumberFormat('en-US');
+function formatTokens(n: number): string {
+  return tokenFormatter.format(n);
+}
+
+export function useStatusSegments(options: StatusSegmentOptions): StatusBarSegment[] {
+  const spinner = useSpinner(options.streaming);
+  const segments: StatusBarSegment[] = [];
+
+  if (options.streaming) {
+    segments.push({ text: `${spinner} generating`, color: 'yellow' });
+  }
+  if (options.totalTokens > 0) {
+    const cached = options.cachedTokens ?? 0;
+    const label =
+      cached > 0
+        ? `${formatTokens(options.totalTokens)} tokens (${formatTokens(cached)} cached)`
+        : `${formatTokens(options.totalTokens)} tokens`;
+    segments.push({ text: label, dim: true });
+  }
+  if (options.abortWarning) {
+    segments.push({ text: 'Esc again to stop', color: 'yellow' });
+  } else if (options.quitWarning) {
+    segments.push({ text: 'Ctrl+C again to quit', color: 'yellow' });
+  } else if (options.streaming) {
+    segments.push({ text: 'Esc to stop', dim: true });
+  }
+  if (options.error) {
+    segments.push({ text: `⚠ ${truncate(options.error, ERROR_PREVIEW_LEN)}`, color: 'red' });
+  }
+  if (options.modelError) {
+    segments.push({ text: `⚠ ${truncate(options.modelError, ERROR_PREVIEW_LEN)}`, color: 'red' });
+  }
+  if (options.pluginStatus) {
+    segments.push(...options.pluginStatus);
+  }
+
+  return segments;
+}

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

@@ -1,59 +1,39 @@
-import { type DOMElement as InkDOMElement, useInput } from 'ink';
-import type { PluginRegistry } from 'mu-agents';
-import type { ChatMessage, ProviderConfig } from 'mu-provider';
-import { useRef } from 'react';
-import { ChatContext } from '../../context/chat';
-import { useScroll } from '../../hooks/useScroll';
-import { useMeasure, useTerminalSize } from '../../hooks/useTerminal';
-import type { InkUIService } from '../../services/uiService';
-import { useChat } from '../../useChat';
+import type { ChatMessage, PluginRegistry, ProviderConfig } from 'mu-core';
+import type { ShutdownFn } from '../../../app/shutdown';
+import type { HostMessageBus } from '../../../runtime/messageBus';
+import { ChatContext } from '../../chat/ChatContext';
+import { MessageRendererProvider, useRegistryRenderers } from '../../chat/MessageRendererContext';
+import { ToolDisplayProvider, useToolDisplayMap } from '../../chat/ToolDisplayContext';
+import { useChatPanel } from '../../chat/useChatPanel';
+import type { InkUIService } from '../../plugins/InkUIService';
 import { ChatPanelBody } from './ChatPanelBody';
 
 export function ChatPanel({
   config,
   initialMessages,
   registry,
+  messageBus,
   uiService,
+  shutdown,
 }: {
   config: ProviderConfig;
   initialMessages?: ChatMessage[];
   registry: PluginRegistry;
+  messageBus?: HostMessageBus;
   uiService?: InkUIService;
+  shutdown?: ShutdownFn;
 }) {
-  const ctx = useChat(config, registry, initialMessages);
-  const { width, height } = useTerminalSize();
-  const viewRef = useRef<InkDOMElement>(null);
-  const contentRef = useRef<InkDOMElement>(null);
-  const { viewHeight, contentHeight } = useMeasure(
-    viewRef,
-    contentRef,
-    [
-      ctx.session.messages.length,
-      ...ctx.session.messages.map((m) => m.content.length),
-      ctx.session.stream.text.length,
-      ctx.session.stream.reasoning?.length ?? 0,
-    ].join('|'),
-  );
-  const { scrollOffset, onScrollUp, onScrollDown } = useScroll(contentHeight, viewHeight);
-
-  const anyModalOpen = ctx.toggles.showModelPicker || ctx.toggles.showSessionPicker;
-  useInput((input, key) => key.ctrl && input === 'c' && ctx.abort.onCtrlC(), { isActive: anyModalOpen });
+  const { ctx, bodyProps } = useChatPanel({ config, initialMessages, registry, messageBus, uiService, shutdown });
+  const toolDisplays = useToolDisplayMap(registry);
+  const renderers = useRegistryRenderers(registry);
 
   return (
     <ChatContext.Provider value={ctx}>
-      <ChatPanelBody
-        width={width}
-        height={height}
-        viewRef={viewRef}
-        contentRef={contentRef}
-        scrollOffset={scrollOffset}
-        viewHeight={viewHeight}
-        contentHeight={contentHeight}
-        isActive={!anyModalOpen}
-        onScrollUp={onScrollUp}
-        onScrollDown={onScrollDown}
-        uiService={uiService}
-      />
+      <ToolDisplayProvider value={toolDisplays}>
+        <MessageRendererProvider value={renderers}>
+          <ChatPanelBody {...bodyProps} />
+        </MessageRendererProvider>
+      </ToolDisplayProvider>
     </ChatContext.Provider>
   );
 }

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-core';
+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,72 @@
+import type { DOMElement } from 'ink';
+import { Box, Text } from 'ink';
+import type { ChatMessage } from 'mu-core';
+import { type RefObject, useMemo } from 'react';
+import type { StreamState } from '../chat/useChatSession';
+import { useTheme } from '../context/ThemeContext';
+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 theme = useTheme();
+  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={theme.common.error}>Error: {error}</Text>}
+        </Box>
+      </Box>
+      <Scrollbar viewHeight={viewHeight} contentHeight={contentHeight} scrollOffset={scrollOffset} />
+    </Box>
+  );
+}

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

@@ -1,33 +1,55 @@
 import { Box, Text } from 'ink';
-import { computeDiff, renderDiff } from '../../../diff';
+import type { ToolDisplayHint } from 'mu-core';
+import { computeDiff, renderDiff } from '../../../utils/diff';
+import { useTheme } from '../../context/ThemeContext';
+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 theme = useTheme();
+  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 +57,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
+        <Text color={theme.diff.warning} bold={true}>
+          ! {verb}
         </Text>
         <Text dimColor={true}> {path}</Text>
         <Text dimColor={true}>
@@ -54,35 +76,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';
+          if (line.startsWith('-')) color = theme.diff.removed;
+          else if (line.startsWith('+')) color = theme.diff.added;
           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,28 @@
+import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
+
+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) {
+  const theme = useTheme();
+  return (
+    <Box flexDirection="column" flexShrink={0}>
+      <Text color={error ? theme.tool.error : theme.tool.success} 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>