mu-coding 0.5.0 → 0.9.0

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

@@ -1,24 +1,72 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+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[];
 }> = React.memo(function AssistantMessage({ msg, toolMessages }) {
+  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>
+          <Text color={color} bold={true}>
+            {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">{msg.content}</Text>}
+      {msg.content && (
+        <Box flexDirection="column">
+          {prefix && <Text color={color}>{prefix}</Text>}
+          <MarkdownContent content={msg.content} color={color} />
+        </Box>
+      )}
     </Box>
   );
 });

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

@@ -0,0 +1,402 @@
+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
+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 },
+];
+
+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) => (
+        <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) => (
+        <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) => (
+        <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,5 +1,6 @@
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
 import React from 'react';
+import { useMessageRenderer } from '../../chat/MessageRendererContext';
 import { AssistantMessage } from './assistantMessage';
 import { UserMessage } from './userMessage';
 
@@ -7,6 +8,23 @@ 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') {

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

@@ -1,13 +1,17 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 
 export function ReasoningBlock({ reasoning }: { reasoning: string }) {
+  const theme = useTheme();
   return (
-    <Box flexDirection="column" marginTop={0} marginBottom={1}>
-      <Text color="yellow" italic={true}>
-        thinking
-      </Text>
-      <Text dimColor={true} italic={true} wrap="wrap">
-        {reasoning}
+    <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,13 +1,17 @@
 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={1}>
+    <Box flexDirection="column" flexShrink={0} marginBottom={0}>
       {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
       <Text wrap="wrap">
         {currentText}
-        <Text inverse={true}>▎</Text>
+        <Text color={theme.input.cursor} inverse={true}>
+          ▎
+        </Text>
       </Text>
     </Box>
   );

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

@@ -1,7 +1,7 @@
 import { Box, Text } from 'ink';
-import type { ToolDisplayHint } from 'mu-agents';
-import type { ChatMessage } from 'mu-provider';
+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';
@@ -47,7 +47,7 @@ export function ToolCallBlock({
   const argSummary = getArgSummary(args, hint);
 
   return (
-    <Box flexDirection="column" flexShrink={0}>
+    <Box flexDirection="column" flexShrink={0} marginTop={1} marginBottom={1}>
       {!hasResult ? (
         <Box>
           <Text dimColor={true}>
@@ -90,6 +90,7 @@ interface GenericProps {
 }
 
 function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
+  const theme = useTheme();
   let summary = '';
   const commandField = hint?.fields?.command;
   if (commandField) {
@@ -104,7 +105,7 @@ function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
   const preview = content.length > 200 ? `${content.slice(0, 200)}…` : content;
   return (
     <Box flexDirection="column" flexShrink={0}>
-      <Text color={error ? 'red' : 'green'} bold={true}>
+      <Text color={error ? theme.tool.error : theme.tool.success} bold={true}>
         {error ? '✗' : '✓'} {name}
         {summary && (
           <>
@@ -113,8 +114,8 @@ function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
           </>
         )}
       </Text>
-      <Box flexDirection="column" backgroundColor="#111111" padding={1} marginTop={1}>
-        <Text color="white">{preview}</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,29 +1,44 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+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}
-      marginY={1}
-      backgroundColor="#1a1a1a"
+      marginBottom={1}
+      backgroundColor={theme.user.background}
       paddingX={1}
       paddingY={1}
       borderLeft={true}
       borderTop={false}
       borderBottom={false}
       borderRight={false}
-      borderColor="yellow"
+      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="cyan">📷 </Text>
-          <Text color="cyan">{msg.images.map((img) => img.name).join(', ')}</Text>
+          <Text color={theme.user.attachment}>📷 </Text>
+          <Text color={theme.user.attachment}>{msg.images.map((img) => img.name).join(', ')}</Text>
         </Box>
       )}
-      <Text wrap="wrap">{msg.content}</Text>
+      <Text wrap="wrap">
+        {prefix && <Text color={msg.display?.color}>{prefix}</Text>}
+        {msg.content}
+      </Text>
     </Box>
   );
 }