mu-coding 0.8.0 → 0.9.0

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/messages/EditOutput.tsx

@@ -48,7 +48,7 @@ export function EditOutput({ args, content, error, hint }: EditOutputProps) {
 
   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}
@@ -61,7 +61,7 @@ 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}>
+      <Box flexDirection="column" flexShrink={0} marginBottom={0}>
         <Text color={theme.diff.warning} bold={true}>
           ! {verb}
         </Text>
@@ -75,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>
@@ -85,9 +85,15 @@ 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 = theme.diff.removed;

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

@@ -18,11 +18,13 @@ interface ToolHeaderProps {
 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}
+    <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>}

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

@@ -1,9 +1,26 @@
 import { Box, Text } from 'ink';
 import type { ChatMessage } from 'mu-core';
 import React from 'react';
+import { MarkdownContent } from './markdown';
 import { ReasoningBlock } from './reasoningBlock';
 import { ToolCallBlock } from './toolCallBlock';
 
+/**
+ * Tool names whose calls are already represented in the transcript by the
+ * `mu-agents.subagent` custom message renderer (`SubagentMessage`).
+ * Filtering them out here prevents a redundant `✓ subagent` block from
+ * rendering the same body the SubagentMessage already shows.
+ *
+ * Reload caveat: the `SubagentRunRegistry` is in-memory only, so after a
+ * session reload the SubagentMessage block has no live run and shows
+ * just the `↳ <name>` glyph without a body. The wrapped tool result
+ * still lives in the persisted transcript (and the LLM payload), so the
+ * parent agent's relay paragraph is intact; the user just can't see the
+ * raw subagent output inline after reopening the session. Accepted
+ * trade-off; revisit if/when run hydration is wired into reload.
+ */
+const SUBAGENT_TOOL_NAMES = new Set(['subagent', 'subagent_parallel']);
+
 export const AssistantMessage: React.FC<{
   msg: ChatMessage;
   toolMessages?: ChatMessage[];
@@ -11,28 +28,44 @@ export const AssistantMessage: React.FC<{
   const badge = msg.display?.badge;
   const prefix = msg.display?.prefix;
   const color = msg.display?.color;
+
+  // Filter subagent tool calls out of the visible list, dropping their
+  // matching `toolMessages` entries in lock-step so positional indexing
+  // stays correct for the surviving calls.
+  const visibleEntries = (msg.toolCalls ?? []).flatMap((tc, i) =>
+    SUBAGENT_TOOL_NAMES.has(tc.function.name) ? [] : [{ tc, toolMsg: toolMessages?.[i] }],
+  );
+
+  // If every renderable surface on this assistant message is empty after
+  // filtering, suppress the entire block — otherwise we'd render a
+  // dangling badge bubble for assistant turns that were nothing but a
+  // subagent dispatch.
+  const hasAnything = visibleEntries.length > 0 || !!msg.content || !!msg.reasoning;
+  if (!hasAnything) return null;
+
+  const hasVisibleToolCalls = visibleEntries.length > 0;
   return (
-    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={hasVisibleToolCalls ? 0 : 1}>
       {badge && (
-        <Box marginBottom={1}>
+        <Box>
           <Text color={color} bold={true}>
-            [{badge}]
+            {badge.charAt(0).toUpperCase() + badge.slice(1)}
           </Text>
         </Box>
       )}
       {msg.reasoning && <ReasoningBlock reasoning={msg.reasoning} />}
-      {msg.toolCalls?.length ? (
-        <Box flexDirection="column" marginBottom={1}>
-          {msg.toolCalls.map((tc, i) => (
-            <ToolCallBlock key={tc.id} toolCall={tc} toolMsg={toolMessages?.[i]} />
+      {hasVisibleToolCalls ? (
+        <Box flexDirection="column">
+          {visibleEntries.map(({ tc, toolMsg }) => (
+            <ToolCallBlock key={tc.id} toolCall={tc} toolMsg={toolMsg} />
           ))}
         </Box>
       ) : null}
       {msg.content && (
-        <Text wrap="wrap" color={color}>
+        <Box flexDirection="column">
           {prefix && <Text color={color}>{prefix}</Text>}
-          {msg.content}
-        </Text>
+          <MarkdownContent content={msg.content} color={color} />
+        </Box>
       )}
     </Box>
   );