mu-coding 0.13.0 → 0.16.1

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

@@ -1,407 +0,0 @@
-import { Box, Text } from 'ink';
-import type React from 'react';
-import { useTheme } from '../../context/ThemeContext';
-import type { Theme } from '../../theme/types';
-
-/**
- * Lightweight Markdown renderer for assistant messages. Intentionally
- * pragmatic — covers headings, lists, tables, blockquotes, code blocks,
- * and the common inline tokens (bold, italic, inline code, links).
- *
- * Implementation is two-pass:
- *  - `parseBlocks` splits the raw text into a list of typed blocks
- *  - each block has its own React renderer that delegates inline
- *    formatting to `renderInline` for paragraph / list / heading content.
- *
- * No external markdown dependency: the renderer must work in any host
- * shipping `mu-coding` without forcing them to ship a parser.
- */
-
-// ─── Block model ──────────────────────────────────────────────────────────────
-
-type Block =
-  | { type: 'heading'; level: 1 | 2 | 3; text: string }
-  | { type: 'paragraph'; text: string }
-  | { type: 'list'; ordered: boolean; items: string[] }
-  | { type: 'code'; lang: string; lines: string[] }
-  | { type: 'quote'; lines: string[] }
-  | { type: 'table'; header: string[]; rows: string[][] }
-  | { type: 'hr' };
-
-const FENCE = /^```(.*)$/;
-const HEADING = /^(#{1,3})\s+(.*)$/;
-const UL_ITEM = /^(\s*)[-*+]\s+(.*)$/;
-const OL_ITEM = /^(\s*)\d+\.\s+(.*)$/;
-const QUOTE = /^>\s?(.*)$/;
-const HR = /^\s*(---|\*\*\*|___)\s*$/;
-const TABLE_SEP = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/;
-const TABLE_ROW = /^\s*\|.*\|\s*$/;
-
-function splitTableRow(line: string): string[] {
-  // Trim outer pipes then split. Handles `| a | b |` and `a | b`.
-  const trimmed = line.trim().replace(/^\|/, '').replace(/\|$/, '');
-  return trimmed.split('|').map((c) => c.trim());
-}
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: block parsing is dispatch-heavy
-// biome-ignore lint/complexity/noExcessiveLinesPerFunction: single parser dispatch loop — every block kind consumed inline keeps the cursor (`i`) local; splitting would scatter it.
-function parseBlocks(input: string): Block[] {
-  const lines = input.split('\n');
-  const blocks: Block[] = [];
-  let i = 0;
-
-  while (i < lines.length) {
-    const line = lines[i];
-
-    // Code fence — capture until matching closing fence (or EOF).
-    const fence = line.match(FENCE);
-    if (fence) {
-      const lang = fence[1].trim();
-      const codeLines: string[] = [];
-      i++;
-      while (i < lines.length && !FENCE.test(lines[i])) {
-        codeLines.push(lines[i]);
-        i++;
-      }
-      if (i < lines.length) i++; // skip closing fence
-      blocks.push({ type: 'code', lang, lines: codeLines });
-      continue;
-    }
-
-    if (line.trim() === '') {
-      i++;
-      continue;
-    }
-
-    if (HR.test(line)) {
-      blocks.push({ type: 'hr' });
-      i++;
-      continue;
-    }
-
-    const heading = line.match(HEADING);
-    if (heading) {
-      blocks.push({ type: 'heading', level: heading[1].length as 1 | 2 | 3, text: heading[2] });
-      i++;
-      continue;
-    }
-
-    // Quote — consume consecutive `> ` lines.
-    if (QUOTE.test(line)) {
-      const quoteLines: string[] = [];
-      while (i < lines.length && QUOTE.test(lines[i])) {
-        quoteLines.push((lines[i].match(QUOTE) as RegExpMatchArray)[1]);
-        i++;
-      }
-      blocks.push({ type: 'quote', lines: quoteLines });
-      continue;
-    }
-
-    // Table — header row, separator row, then body rows.
-    if (TABLE_ROW.test(line) && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1])) {
-      const header = splitTableRow(line);
-      i += 2; // skip header + separator
-      const rows: string[][] = [];
-      while (i < lines.length && TABLE_ROW.test(lines[i])) {
-        rows.push(splitTableRow(lines[i]));
-        i++;
-      }
-      blocks.push({ type: 'table', header, rows });
-      continue;
-    }
-
-    // List — ordered or unordered, contiguous items only.
-    const ulMatch = line.match(UL_ITEM);
-    const olMatch = line.match(OL_ITEM);
-    if (ulMatch || olMatch) {
-      const ordered = !!olMatch;
-      const re = ordered ? OL_ITEM : UL_ITEM;
-      const items: string[] = [];
-      while (i < lines.length) {
-        const m = lines[i].match(re);
-        if (!m) break;
-        items.push(m[2]);
-        i++;
-      }
-      blocks.push({ type: 'list', ordered, items });
-      continue;
-    }
-
-    // Paragraph — contiguous non-empty, non-block lines.
-    const paraLines: string[] = [];
-    while (i < lines.length) {
-      const cur = lines[i];
-      if (cur.trim() === '') break;
-      if (FENCE.test(cur) || HEADING.test(cur) || QUOTE.test(cur) || HR.test(cur)) break;
-      if (UL_ITEM.test(cur) || OL_ITEM.test(cur)) break;
-      if (TABLE_ROW.test(cur) && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1])) break;
-      paraLines.push(cur);
-      i++;
-    }
-    if (paraLines.length > 0) {
-      blocks.push({ type: 'paragraph', text: paraLines.join(' ') });
-    }
-  }
-
-  return blocks;
-}
-
-// ─── Inline rendering ─────────────────────────────────────────────────────────
-
-interface InlineToken {
-  kind: 'text' | 'bold' | 'italic' | 'code' | 'link';
-  text: string;
-  href?: string;
-}
-
-const INLINE_PATTERNS: { kind: InlineToken['kind']; re: RegExp; capture: number; href?: number }[] = [
-  // Order matters: longer / more specific patterns first.
-  { kind: 'code', re: /`([^`\n]+)`/, capture: 1 },
-  { kind: 'link', re: /\[([^\]]+)\]\(([^)]+)\)/, capture: 1, href: 2 },
-  { kind: 'bold', re: /\*\*([^*\n]+)\*\*/, capture: 1 },
-  { kind: 'bold', re: /__([^_\n]+)__/, capture: 1 },
-  { kind: 'italic', re: /\*([^*\n]+)\*/, capture: 1 },
-  { kind: 'italic', re: /_([^_\n]+)_/, capture: 1 },
-];
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: greedy inline tokenizer — earliest-match across patterns then advance; the branching is the algorithm.
-function tokenizeInline(input: string): InlineToken[] {
-  const out: InlineToken[] = [];
-  let cursor = 0;
-  while (cursor < input.length) {
-    let bestIdx = -1;
-    let bestMatch: { kind: InlineToken['kind']; text: string; href?: string; raw: string } | null = null;
-    for (const p of INLINE_PATTERNS) {
-      const sub = input.slice(cursor);
-      const m = sub.match(p.re);
-      if (m && m.index !== undefined) {
-        if (bestIdx === -1 || m.index < bestIdx) {
-          bestIdx = m.index;
-          bestMatch = {
-            kind: p.kind,
-            text: m[p.capture],
-            href: p.href !== undefined ? m[p.href] : undefined,
-            raw: m[0],
-          };
-        }
-      }
-    }
-    if (!bestMatch || bestIdx === -1) {
-      out.push({ kind: 'text', text: input.slice(cursor) });
-      break;
-    }
-    if (bestIdx > 0) {
-      out.push({ kind: 'text', text: input.slice(cursor, cursor + bestIdx) });
-    }
-    out.push({ kind: bestMatch.kind, text: bestMatch.text, href: bestMatch.href });
-    cursor += bestIdx + bestMatch.raw.length;
-  }
-  return out;
-}
-
-function renderInline(text: string, theme: Theme, baseColor?: string): React.ReactNode[] {
-  const tokens = tokenizeInline(text);
-  return tokens.map((tok, i) => {
-    const key = `${i}-${tok.kind}`;
-    if (tok.kind === 'text') {
-      return (
-        <Text key={key} color={baseColor}>
-          {tok.text}
-        </Text>
-      );
-    }
-    if (tok.kind === 'bold') {
-      return (
-        <Text key={key} color={baseColor} bold={true}>
-          {tok.text}
-        </Text>
-      );
-    }
-    if (tok.kind === 'italic') {
-      return (
-        <Text key={key} color={baseColor} italic={true}>
-          {tok.text}
-        </Text>
-      );
-    }
-    if (tok.kind === 'code') {
-      return (
-        <Text key={key} color={theme.markdown.codeText} backgroundColor={theme.markdown.codeBackground}>
-          {` ${tok.text} `}
-        </Text>
-      );
-    }
-    if (tok.kind === 'link') {
-      return (
-        <Text key={key} color={theme.markdown.link} underline={true}>
-          {tok.text}
-          {tok.href ? (
-            <Text color={theme.markdown.link} dimColor={true}>
-              {' '}
-              ({tok.href})
-            </Text>
-          ) : null}
-        </Text>
-      );
-    }
-    return null;
-  });
-}
-
-// ─── Block renderers ──────────────────────────────────────────────────────────
-
-function HeadingBlock({ block, theme }: { block: Extract<Block, { type: 'heading' }>; theme: Theme }) {
-  const prefix = block.level === 1 ? '# ' : block.level === 2 ? '## ' : '### ';
-  return (
-    <Box marginBottom={1}>
-      <Text color={theme.markdown.heading} bold={block.level <= 2}>
-        {prefix}
-        {block.text}
-      </Text>
-    </Box>
-  );
-}
-
-function ParagraphBlock({
-  block,
-  theme,
-  color,
-}: {
-  block: Extract<Block, { type: 'paragraph' }>;
-  theme: Theme;
-  color?: string;
-}) {
-  return (
-    <Box marginBottom={1}>
-      <Text wrap="wrap" color={color}>
-        {renderInline(block.text, theme, color)}
-      </Text>
-    </Box>
-  );
-}
-
-function ListBlock({ block, theme, color }: { block: Extract<Block, { type: 'list' }>; theme: Theme; color?: string }) {
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      {block.items.map((item, idx) => {
-        const marker = block.ordered ? `${idx + 1}.` : '•';
-        return (
-          // biome-ignore lint/suspicious/noArrayIndexKey: list items have no stable id
-          <Box key={idx}>
-            <Text color={theme.markdown.bullet}>{`  ${marker} `}</Text>
-            <Box flexShrink={1} flexGrow={1}>
-              <Text wrap="wrap" color={color}>
-                {renderInline(item, theme, color)}
-              </Text>
-            </Box>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-function CodeBlock({ block, theme }: { block: Extract<Block, { type: 'code' }>; theme: Theme }) {
-  return (
-    <Box flexDirection="column" marginBottom={1} paddingX={1} backgroundColor={theme.markdown.codeBlockBackground}>
-      {block.lang && (
-        <Text dimColor={true} color={theme.markdown.codeBlockText}>
-          {block.lang}
-        </Text>
-      )}
-      {block.lines.map((ln, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: code lines have no stable id and may repeat
-        <Text key={`${i}-${ln}`} color={theme.markdown.codeBlockText}>
-          {ln || ' '}
-        </Text>
-      ))}
-    </Box>
-  );
-}
-
-function QuoteBlock({ block, theme }: { block: Extract<Block, { type: 'quote' }>; theme: Theme }) {
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      {block.lines.map((ln, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: blockquote lines render in document order and never reorder — index is the only stable identifier.
-        <Box key={`${i}-${ln}`}>
-          <Text color={theme.markdown.blockquote}> │ </Text>
-          <Box flexShrink={1} flexGrow={1}>
-            <Text wrap="wrap" color={theme.markdown.blockquote} italic={true}>
-              {renderInline(ln, theme, theme.markdown.blockquote)}
-            </Text>
-          </Box>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
-function TableBlock({ block, theme }: { block: Extract<Block, { type: 'table' }>; theme: Theme }) {
-  // Compute column widths based on the longest cell per column.
-  const colCount = Math.max(block.header.length, ...block.rows.map((r) => r.length));
-  const widths: number[] = new Array(colCount).fill(0);
-  for (let c = 0; c < colCount; c++) {
-    widths[c] = (block.header[c] ?? '').length;
-    for (const row of block.rows) {
-      widths[c] = Math.max(widths[c], (row[c] ?? '').length);
-    }
-  }
-  const renderRow = (cells: string[], bold: boolean, key: string) => (
-    <Box key={key}>
-      {Array.from({ length: colCount }, (_, c) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: table columns have fixed positions for the lifetime of the row; reordering is impossible.
-        <Box key={c} marginRight={c === colCount - 1 ? 0 : 2}>
-          <Text bold={bold}>{(cells[c] ?? '').padEnd(widths[c])}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-  const sep = (
-    <Box>
-      {Array.from({ length: colCount }, (_, c) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: separator cells map 1:1 to columns — column index is the natural key.
-        <Box key={c} marginRight={c === colCount - 1 ? 0 : 2}>
-          <Text color={theme.markdown.tableBorder}>{'─'.repeat(widths[c])}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      {renderRow(block.header, true, 'header')}
-      {sep}
-      {block.rows.map((r, i) => renderRow(r, false, `r-${i}`))}
-    </Box>
-  );
-}
-
-function HrBlock({ theme }: { theme: Theme }) {
-  return (
-    <Box marginBottom={1}>
-      <Text color={theme.markdown.tableBorder}>{'─'.repeat(40)}</Text>
-    </Box>
-  );
-}
-
-// ─── Public renderer ─────────────────────────────────────────────────────────
-
-export function MarkdownContent({ content, color }: { content: string; color?: string }) {
-  const theme = useTheme();
-  const blocks = parseBlocks(content);
-  return (
-    <Box flexDirection="column">
-      {blocks.map((b, i) => {
-        const key = `${i}-${b.type}`;
-        if (b.type === 'heading') return <HeadingBlock key={key} block={b} theme={theme} />;
-        if (b.type === 'paragraph') return <ParagraphBlock key={key} block={b} theme={theme} color={color} />;
-        if (b.type === 'list') return <ListBlock key={key} block={b} theme={theme} color={color} />;
-        if (b.type === 'code') return <CodeBlock key={key} block={b} theme={theme} />;
-        if (b.type === 'quote') return <QuoteBlock key={key} block={b} theme={theme} />;
-        if (b.type === 'table') return <TableBlock key={key} block={b} theme={theme} />;
-        if (b.type === 'hr') return <HrBlock key={key} theme={theme} />;
-        return null;
-      })}
-    </Box>
-  );
-}

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

@@ -1,43 +0,0 @@
-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;
-  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;
-  }
-
-  if (msg.role === 'assistant' && msg.toolCalls?.length) {
-    return <AssistantMessage msg={msg} toolMessages={toolMessages} />;
-  }
-
-  if (msg.role === 'user') {
-    return <UserMessage msg={msg} />;
-  }
-
-  return <AssistantMessage msg={msg} />;
-});

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

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

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

@@ -1,18 +0,0 @@
-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={0}>
-      {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
-      <Text wrap="wrap">
-        {currentText}
-        <Text color={theme.input.cursor} inverse={true}>
-          ▎
-        </Text>
-      </Text>
-    </Box>
-  );
-}

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

@@ -1,125 +0,0 @@
-import { Box, Text } from 'ink';
-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 { WebFetchOutput } from './WebFetchOutput';
-import { WriteOutput } from './WriteOutput';
-
-/**
- * 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 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;
-  }
-}
-
-export function ToolCallBlock({
-  toolCall,
-  toolMsg,
-}: {
-  toolCall: { id: string; function: { name: string; arguments: string } };
-  toolMsg?: ChatMessage;
-}) {
-  const name = toolCall.function.name;
-  const args = toolCall.function.arguments;
-  const hint = useToolDisplay(name);
-
-  const result = toolMsg?.toolResult;
-  const hasResult = result !== undefined;
-  const spinner = useSpinner(!hasResult);
-  const verb = hint?.verb ?? 'executing';
-  const argSummary = getArgSummary(args, hint);
-
-  return (
-    <Box flexDirection="column" flexShrink={0} marginTop={1} marginBottom={1}>
-      {!hasResult ? (
-        <Box>
-          <Text dimColor={true}>
-            {' '}
-            {spinner} {verb}... <Text dimColor={true}>{argSummary}</Text>
-          </Text>
-        </Box>
-      ) : (
-        renderToolOutput(name, args, result.content, result.error ?? false, hint)
-      )}
-    </Box>
-  );
-}
-
-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} />;
-    case 'webfetch':
-      return <WebFetchOutput args={args} error={error} />;
-    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;
-}
-
-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);
-      summary = parsed[commandField] ?? '';
-    } catch {
-      // ignore
-    }
-  }
-
-  const preview = content.length > 200 ? `${content.slice(0, 200)}…` : content;
-  return (
-    <Box flexDirection="column" flexShrink={0}>
-      <Text color={error ? theme.tool.error : theme.tool.success} bold={true}>
-        {error ? '✗' : '✓'} {name}
-        {summary && (
-          <>
-            {' '}
-            <Text dimColor={true}>{summary}</Text>
-          </>
-        )}
-      </Text>
-      <Box flexDirection="column" backgroundColor={theme.tool.previewBackground} paddingX={1} paddingY={0}>
-        <Text color={theme.tool.previewText}>{preview}</Text>
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,44 +0,0 @@
-import { Box, Text } from 'ink';
-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}
-      marginBottom={1}
-      backgroundColor={theme.user.background}
-      paddingX={1}
-      paddingY={1}
-      borderLeft={true}
-      borderTop={false}
-      borderBottom={false}
-      borderRight={false}
-      borderColor={borderColor}
-      borderStyle="single"
-    >
-      {badge && (
-        <Box>
-          <Text color={msg.display?.color} bold={true}>
-            {badge.charAt(0).toUpperCase() + badge.slice(1)}
-          </Text>
-        </Box>
-      )}
-      {msg.images && msg.images.length > 0 && (
-        <Box>
-          <Text color={theme.user.attachment}>📷 </Text>
-          <Text color={theme.user.attachment}>{msg.images.map((img) => img.name).join(', ')}</Text>
-        </Box>
-      )}
-      <Text wrap="wrap">
-        {prefix && <Text color={msg.display?.color}>{prefix}</Text>}
-        {msg.content}
-      </Text>
-    </Box>
-  );
-}