mu-coding 0.5.0 → 0.9.0

package/src/tui/chat/useStatusSegments.ts

@@ -1,4 +1,4 @@
-import type { StatusSegment } from 'mu-agents';
+import type { StatusSegment } from 'mu-core';
 import type { StatusBarSegment } from '../components/statusBar';
 import { useSpinner } from '../hooks/useUI';
 
@@ -10,7 +10,13 @@ interface StatusSegmentOptions {
   quitWarning: boolean;
   error: string | null;
   modelError: string | null;
-  tokensPerSecond: number;
+  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;
+  /** Model context window (input + output) reported by the provider; when
+   *  set, the tokens segment is rendered as `used/limit tokens`. */
+  contextLimit?: number;
   pluginStatus?: StatusSegment[];
 }
 
@@ -18,15 +24,42 @@ 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 {
+  if (n >= 1_000_000) {
+    const v = n / 1_000_000;
+    return `${v >= 10 ? v.toFixed(0) : v.toFixed(1)}M`;
+  }
+  if (n >= 1000) {
+    const v = n / 1000;
+    return `${v >= 10 ? v.toFixed(0) : v.toFixed(1)}k`;
+  }
+  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' });
+    segments.push({ text: spinner, color: 'yellow', align: 'left' });
   }
-  if (options.tokensPerSecond > 0) {
-    segments.push({ text: `${options.tokensPerSecond} tok/s`, dim: true });
+  if (options.totalTokens > 0) {
+    const cached = options.cachedTokens ?? 0;
+    const used = formatTokens(options.totalTokens);
+    let head: string;
+    if (options.contextLimit) {
+      const pct = (options.totalTokens / options.contextLimit) * 100;
+      const pctStr = pct >= 10 ? pct.toFixed(0) : pct.toFixed(1);
+      head = `${used} (${pctStr}%)`;
+    } else {
+      head = used;
+    }
+    if (cached > 0) {
+      segments.push({ text: `${head} · ${formatTokens(cached)} cached`, dim: true });
+    } else {
+      segments.push({ text: head, dim: true });
+    }
   }
   if (options.abortWarning) {
     segments.push({ text: 'Esc again to stop', color: 'yellow' });

package/src/tui/chat/useSubagentBrowser.ts

@@ -0,0 +1,133 @@
+/**
+ * Subagent browser state machine.
+ *
+ * Exposes:
+ *  - the live list of `SubagentRun`s (subscribed to the registry)
+ *  - the current `viewMode` (chat vs browsing a specific run)
+ *  - keyboard handlers wired through `useChordKeyboard`:
+ *      Ctrl+X ↓        — enter browser at the most recent run
+ *      Ctrl+X →        — next run (loops)
+ *      Ctrl+X ←        — previous run (loops)
+ *      Ctrl+X ↑ or Esc — back to chat
+ *
+ * Returning to chat happens via the `Esc` handler the panel registers
+ * directly (kept outside the chord so it's reachable without the prefix).
+ */
+
+import { useInput } from 'ink';
+import type { SubagentRun, SubagentRunRegistry } from 'mu-agents';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useChordKeyboard } from '../hooks/useChordKeyboard';
+
+export type SubagentViewMode = { kind: 'chat' } | { kind: 'subagent'; runId: string };
+
+export interface SubagentBrowserState {
+  mode: SubagentViewMode;
+  runs: SubagentRun[];
+  currentRun: SubagentRun | undefined;
+  /** 1-based position of the current run (for UI labels like "i / N"). */
+  position: { index: number; total: number } | null;
+  enterLatest: () => void;
+  next: () => void;
+  prev: () => void;
+  exit: () => void;
+}
+
+const NOOP = (): void => {
+  // Intentional: returned by the empty-registry shape so call sites can
+  // wire handlers up without null-checking each invocation.
+};
+
+const EMPTY_BROWSER: SubagentBrowserState = {
+  mode: { kind: 'chat' },
+  runs: [],
+  currentRun: undefined,
+  position: null,
+  enterLatest: NOOP,
+  next: NOOP,
+  prev: NOOP,
+  exit: NOOP,
+};
+
+export function useSubagentBrowser(registry: SubagentRunRegistry | undefined): SubagentBrowserState {
+  const [runs, setRuns] = useState<SubagentRun[]>(() => registry?.list() ?? []);
+  const [mode, setMode] = useState<SubagentViewMode>({ kind: 'chat' });
+
+  // Subscribe to registry events; the listener fires immediately on
+  // subscribe with the current snapshot, so the initial state is correct
+  // even when the registry already has runs from a resumed session.
+  useEffect(() => {
+    if (!registry) return;
+    return registry.subscribe((next) => setRuns(next));
+  }, [registry]);
+
+  // If the run we're showing disappears (registry cleared on /new), bounce
+  // back to chat so the user isn't stuck on a phantom run.
+  useEffect(() => {
+    if (mode.kind !== 'subagent') return;
+    if (!runs.some((r) => r.id === mode.runId)) setMode({ kind: 'chat' });
+  }, [runs, mode]);
+
+  const exit = useCallback(() => setMode({ kind: 'chat' }), []);
+
+  const enterLatest = useCallback(() => {
+    if (runs.length === 0) return;
+    const last = runs[runs.length - 1];
+    setMode({ kind: 'subagent', runId: last.id });
+  }, [runs]);
+
+  const cycle = useCallback(
+    (direction: 1 | -1) => {
+      if (runs.length === 0) return;
+      const currentId = mode.kind === 'subagent' ? mode.runId : runs[runs.length - 1].id;
+      const idx = runs.findIndex((r) => r.id === currentId);
+      const start = idx === -1 ? runs.length - 1 : idx;
+      const len = runs.length;
+      // Wrap-around — `(start + direction + len) % len` is the canonical
+      // modulo trick that handles negative results in JS (`%` keeps sign).
+      const nextIdx = (start + direction + len) % len;
+      setMode({ kind: 'subagent', runId: runs[nextIdx].id });
+    },
+    [mode, runs],
+  );
+
+  const next = useCallback(() => cycle(1), [cycle]);
+  const prev = useCallback(() => cycle(-1), [cycle]);
+
+  // Ctrl+X chord is always armed, but the follow-ups are no-ops while no
+  // subagent run exists (so the user gets terminal-bell silence rather
+  // than an unexpected mode switch).
+  useChordKeyboard({
+    prefix: ({ key, input }) => key.ctrl === true && input === 'x',
+    followUps: [
+      { match: ({ key }) => key.downArrow === true, handler: enterLatest },
+      { match: ({ key }) => key.rightArrow === true, handler: next },
+      { match: ({ key }) => key.leftArrow === true, handler: prev },
+      { match: ({ key }) => key.upArrow === true, handler: exit },
+    ],
+  });
+
+  // Esc returns to chat from the browser. Active only while we're actually
+  // showing a run; otherwise we'd intercept Esc clearing modal/picker UIs.
+  useInput(
+    (_input, key) => {
+      if (key.escape) exit();
+    },
+    { isActive: mode.kind === 'subagent' },
+  );
+
+  const currentRun = useMemo(
+    () => (mode.kind === 'subagent' ? runs.find((r) => r.id === mode.runId) : undefined),
+    [mode, runs],
+  );
+  const position = useMemo(() => {
+    if (mode.kind !== 'subagent') return null;
+    const i = runs.findIndex((r) => r.id === mode.runId);
+    if (i === -1) return null;
+    return { index: i + 1, total: runs.length };
+  }, [mode, runs]);
+
+  if (!registry) return EMPTY_BROWSER;
+
+  return { mode, runs, currentRun, position, enterLatest, next, prev, exit };
+}

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

@@ -1,7 +1,10 @@
-import type { PluginRegistry } from 'mu-agents';
-import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import type { SubagentRunRegistry } from 'mu-agents';
+import type { ChatMessage, PluginRegistry, ProviderConfig } from 'mu-core';
 import type { ShutdownFn } from '../../../app/shutdown';
+import type { SessionPathHolder } from '../../../runtime/createRegistry';
+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';
@@ -11,22 +14,40 @@ export function ChatPanel({
   config,
   initialMessages,
   registry,
+  messageBus,
   uiService,
   shutdown,
+  sessionPathHolder,
+  subagentRuns,
 }: {
   config: ProviderConfig;
   initialMessages?: ChatMessage[];
   registry: PluginRegistry;
+  messageBus?: HostMessageBus;
   uiService?: InkUIService;
   shutdown?: ShutdownFn;
+  sessionPathHolder?: SessionPathHolder;
+  subagentRuns?: SubagentRunRegistry;
 }) {
-  const { ctx, bodyProps } = useChatPanel({ config, initialMessages, registry, uiService, shutdown });
+  const { ctx, bodyProps } = useChatPanel({
+    config,
+    initialMessages,
+    registry,
+    messageBus,
+    uiService,
+    shutdown,
+    sessionPathHolder,
+    subagentRuns,
+  });
   const toolDisplays = useToolDisplayMap(registry);
+  const renderers = useRegistryRenderers(registry);
 
   return (
     <ChatContext.Provider value={ctx}>
       <ToolDisplayProvider value={toolDisplays}>
-        <ChatPanelBody {...bodyProps} />
+        <MessageRendererProvider value={renderers}>
+          <ChatPanelBody {...bodyProps} />
+        </MessageRendererProvider>
       </ToolDisplayProvider>
     </ChatContext.Provider>
   );

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

@@ -1,6 +1,8 @@
 import { Box, type DOMElement as InkDOMElement } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
 import type { StreamState } from '../../chat/useChatSession';
+import type { SubagentBrowserState } from '../../chat/useSubagentBrowser';
+import { useInputInfoSegments } from '../../hooks/useInputInfoSegments';
 import { InputBox } from '../../input/InputBox';
 import type { InkUIService } from '../../plugins/InkUIService';
 import { MessageView } from '../messageView';
@@ -9,6 +11,7 @@ import type { StatusBarSegment } from '../statusBar';
 import { StatusBar } from '../statusBar';
 import { DialogLayer } from '../ui/dialogLayer';
 import { Pickers } from './Pickers';
+import { SubagentBrowserPanel } from './SubagentBrowserPanel';
 
 export interface ChatPanelBodyProps {
   width: number;
@@ -32,9 +35,26 @@ export interface ChatPanelBodyProps {
   statusSegments: StatusBarSegment[];
   toasts: Toast[];
   onDismissToast: (id: number) => void;
+  /** Subagent browser state — when in subagent mode the chat body is replaced. */
+  browser?: SubagentBrowserState;
 }
 
 export function ChatPanelBody(props: ChatPanelBodyProps) {
+  const infoSegments = useInputInfoSegments();
+
+  // Browser mode: replace the entire chat body with the subagent panel.
+  // Modals (dialog layer, toasts) still render so an `ask` triggered by a
+  // subagent dispatch can still surface to the user.
+  if (props.browser?.mode.kind === 'subagent' && props.browser.currentRun) {
+    return (
+      <Box flexDirection="column" height={props.height} width={props.width}>
+        <SubagentBrowserPanel run={props.browser.currentRun} position={props.browser.position} />
+        {props.uiService && <DialogLayer service={props.uiService} />}
+        <ToastContainer toasts={props.toasts} onDismiss={props.onDismissToast} />
+      </Box>
+    );
+  }
+
   return (
     <Box flexDirection="column" height={props.height} width={props.width}>
       <MessageView
@@ -55,6 +75,7 @@ export function ChatPanelBody(props: ChatPanelBodyProps) {
         isActive={props.isActive}
         model={props.model}
         history={props.history}
+        infoSegments={infoSegments}
       />
       <StatusBar segments={props.statusSegments} />
       <Pickers />

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

@@ -0,0 +1,145 @@
+/**
+ * SubagentBrowserPanel — read-only view of a single subagent run.
+ *
+ * Replaces the chat body when `viewMode.kind === 'subagent'`:
+ *  - Top banner: session title · agent name · status (agent colour).
+ *  - Body: full-fidelity `MessageView` over the run's transcript so every
+ *    nested tool call / reasoning block / output renders identically to
+ *    the parent chat.
+ *  - Status bar: subagent-specific segments (i/N, tool calls, elapsed).
+ *  - No input box — the panel is read-only; the user navigates via
+ *    `Ctrl+X →/←` or returns to chat with `Esc` / `Ctrl+X ↑`.
+ */
+
+import { Box, type DOMElement as InkDOMElement, Text } from 'ink';
+import type { SubagentRun } from 'mu-agents';
+import type { ChatMessage } from 'mu-core';
+import { type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from '../../context/ThemeContext';
+import { useScroll } from '../../hooks/useScroll';
+import { useMeasure, useTerminalSize } from '../../hooks/useTerminal';
+import { MessageView } from '../messageView';
+import { StatusBar, type StatusBarSegment } from '../statusBar';
+
+interface SubagentBrowserPanelProps {
+  run: SubagentRun;
+  position: { index: number; total: number } | null;
+  /** Display title for the parent session (e.g. session file stem). */
+  sessionTitle?: string;
+}
+
+const STATUS_LABEL: Record<SubagentRun['status'], string> = {
+  running: 'running…',
+  done: 'done',
+  error: 'error',
+  aborted: 'aborted',
+};
+
+function statusColor(status: SubagentRun['status']): string | undefined {
+  switch (status) {
+    case 'running':
+      return 'cyan';
+    case 'done':
+      return 'green';
+    case 'error':
+      return 'red';
+    case 'aborted':
+      return 'yellow';
+    default:
+      return undefined;
+  }
+}
+
+function formatElapsed(run: SubagentRun): string {
+  const end = run.finishedAt ?? Date.now();
+  const ms = Math.max(0, end - run.startedAt);
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rs = s % 60;
+  return `${m}m${rs.toString().padStart(2, '0')}s`;
+}
+
+function countToolCalls(messages: ChatMessage[]): number {
+  let n = 0;
+  for (const m of messages) {
+    if (m.toolCalls?.length) n += m.toolCalls.length;
+  }
+  return n;
+}
+
+/**
+ * Subscribe to elapsed time so the live "running…" status keeps updating
+ * even when no new tokens arrive. Refreshes every second; the timer
+ * shuts off as soon as the run has a `finishedAt`.
+ */
+function useTickWhileRunning(run: SubagentRun): void {
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (run.finishedAt) return;
+    const id = setInterval(() => force((n) => n + 1), 1000);
+    return () => clearInterval(id);
+  }, [run.finishedAt]);
+}
+
+export function SubagentBrowserPanel({ run, position, sessionTitle }: SubagentBrowserPanelProps) {
+  const theme = useTheme();
+  const { width, height } = useTerminalSize();
+  const viewRef = useRef<InkDOMElement>(null);
+  const contentRef = useRef<InkDOMElement>(null);
+  const measureKey = useMemo(
+    () => `${run.id}|${run.messages.length}|${run.status}`,
+    [run.id, run.messages.length, run.status],
+  );
+  const { viewHeight, contentHeight } = useMeasure(viewRef, contentRef, measureKey);
+  const { scrollOffset } = useScroll(contentHeight, viewHeight);
+
+  useTickWhileRunning(run);
+
+  const segments: StatusBarSegment[] = [
+    ...(position ? [{ text: `subagent ${position.index}/${position.total}`, align: 'left' as const, dim: true }] : []),
+    { text: `tool calls: ${countToolCalls(run.messages)}`, dim: true },
+    { text: formatElapsed(run), dim: true },
+    { text: 'Esc · chat | Ctrl+X →/← cycle', dim: true },
+  ];
+
+  const banner = (
+    <Box flexShrink={0} paddingX={1} borderStyle="single" borderColor={run.agentColor ?? theme.status.separator}>
+      <Box flexGrow={1}>
+        <Text color={run.agentColor} bold={true}>
+          ↳ {run.agentName}
+        </Text>
+        <Text dimColor={true}>{sessionTitle ? `  ·  ${sessionTitle}` : ''}</Text>
+        <Text dimColor={true}>{`  ·  ${run.id}`}</Text>
+      </Box>
+      <Text color={statusColor(run.status)} bold={true}>
+        {STATUS_LABEL[run.status]}
+      </Text>
+    </Box>
+  );
+
+  return (
+    <Box flexDirection="column" height={height} width={width}>
+      {banner}
+      <MessageView
+        viewRef={viewRef}
+        contentRef={contentRef}
+        messages={run.messages}
+        streaming={run.status === 'running'}
+        stream={{ text: '', reasoning: '', totalTokens: 0, cachedTokens: 0 }}
+        error={run.error ?? null}
+        scrollOffset={scrollOffset}
+        viewHeight={viewHeight}
+        contentHeight={contentHeight}
+      />
+      <StatusBar segments={segments} />
+    </Box>
+  );
+}
+
+/** Helper type used by `ChatPanelBody` when constructing the panel. */
+export type SubagentBrowserPanelComponent = typeof SubagentBrowserPanel;
+
+/** Wrap a `RefObject<DOMElement>` cast for callers that need it. */
+export type _SubagentBrowserRef = RefObject<InkDOMElement | null>;

package/src/tui/components/messageView.tsx

@@ -1,8 +1,9 @@
 import type { DOMElement } from 'ink';
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+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';
@@ -50,6 +51,7 @@ export function MessageView({
   viewHeight: number;
   contentHeight: number;
 }) {
+  const theme = useTheme();
   const toolMessageIndex = useMemo(() => indexToolMessages(messages), [messages]);
 
   return (
@@ -61,7 +63,7 @@ export function MessageView({
             <MessageItem key={i} msg={msg} toolMessages={toolMessageIndex.get(i)} />
           ))}
           {streaming && <StreamingOutput currentText={stream.text} currentReasoning={stream.reasoning} />}
-          {error && <Text color="red">Error: {error}</Text>}
+          {error && <Text color={theme.common.error}>Error: {error}</Text>}
         </Box>
       </Box>
       <Scrollbar viewHeight={viewHeight} contentHeight={contentHeight} scrollOffset={scrollOffset} />

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

@@ -1,6 +1,7 @@
 import { Box, Text } from 'ink';
-import type { ToolDisplayHint } from 'mu-agents';
+import type { ToolDisplayHint } from 'mu-core';
 import { computeDiff, renderDiff } from '../../../utils/diff';
+import { useTheme } from '../../context/ThemeContext';
 import { ToolHeader } from './ToolHeader';
 
 interface EditOutputProps {
@@ -41,12 +42,13 @@ function parseEditArgs(args: string, hint: ToolDisplayHint | undefined): ParsedE
 }
 
 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}>
+      <Box flexDirection="column" flexShrink={0} marginBottom={0}>
         <ToolHeader name={verb} subtitle={path} error={true} />
         <Text dimColor={true} wrap="wrap">
           {content}
@@ -59,8 +61,8 @@ export function EditOutput({ args, content, error, hint }: EditOutputProps) {
 
   if (diff.lines.length === 0 && diff.totalOldLines > 0 && diff.totalNewLines > 0) {
     return (
-      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
-        <Text color="yellow" bold={true}>
+      <Box flexDirection="column" flexShrink={0} marginBottom={0}>
+        <Text color={theme.diff.warning} bold={true}>
           ! {verb}
         </Text>
         <Text dimColor={true}> {path}</Text>
@@ -73,7 +75,7 @@ export function EditOutput({ args, content, error, hint }: EditOutputProps) {
 
   if (diff.lines.length === 0) {
     return (
-      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <Box flexDirection="column" flexShrink={0} marginBottom={0}>
         <ToolHeader name={verb} subtitle={path} />
         <Text dimColor={true}>No changes (content identical)</Text>
       </Box>
@@ -83,13 +85,19 @@ export function EditOutput({ args, content, error, hint }: EditOutputProps) {
   const { lines, truncated } = renderDiff(diff, MAX_DIFF_LINES);
 
   return (
-    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={0}>
       <ToolHeader name={verb} subtitle={path} />
-      <Box flexDirection="column" flexShrink={0}>
+      <Box
+        flexDirection="column"
+        flexShrink={0}
+        backgroundColor={theme.tool.previewBackground}
+        paddingX={1}
+        paddingY={0}
+      >
         {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 (
             // 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">

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

@@ -32,7 +32,7 @@ export function ReadOutput({ args, error }: ReadOutputProps) {
   const subtitle = paths.length === 1 ? `${paths[0]}${rangeLabel}` : `${paths.length} files${rangeLabel}`;
 
   return (
-    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={0}>
       <ToolHeader name="read_file" subtitle={subtitle} error={error} />
       {paths.length > 1 && (
         <Box flexDirection="column" flexShrink={0}>

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

@@ -1,4 +1,5 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 
 interface ToolHeaderProps {
   /** The tool name shown after the status icon. */
@@ -15,12 +16,15 @@ interface ToolHeaderProps {
  * 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 ? 'red' : 'green'} bold={true}>
-        {error ? '✗' : '✓'} {name}
+    <Box flexShrink={0}>
+      <Text wrap="truncate-end">
+        <Text color={error ? theme.tool.error : theme.tool.success} bold={true}>
+          {error ? '✗' : '✓'} {name}
+        </Text>
+        {subtitle && <Text dimColor={true}> {subtitle}</Text>}
       </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 { useTheme } from '../../context/ThemeContext';
 import { ToolHeader } from './ToolHeader';
 
 const PREVIEW_LINES = 30;
@@ -19,11 +20,12 @@ function parsePath(args: string): string {
 }
 
 export function WriteOutput({ args, content, error }: WriteOutputProps) {
+  const theme = useTheme();
   const path = parsePath(args);
 
   if (error) {
     return (
-      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <Box flexDirection="column" flexShrink={0} marginBottom={0}>
         <ToolHeader name="write_file" error={true} />
         <Text dimColor={true} wrap="wrap">
           {content}
@@ -38,14 +40,20 @@ export function WriteOutput({ args, content, error }: WriteOutputProps) {
   const hasMore = totalLines > PREVIEW_LINES;
 
   return (
-    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={0}>
       <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">
+        <Box
+          flexDirection="column"
+          flexShrink={0}
+          backgroundColor={theme.tool.previewBackground}
+          paddingX={1}
+          paddingY={0}
+        >
+          <Text color={theme.tool.previewText} wrap="wrap">
             {hasMore ? preview : content}
           </Text>
           {hasMore && <Text dimColor={true}>… ({totalLines - PREVIEW_LINES} more lines)</Text>}