mixdog 0.8.0 → 0.9.0

package/src/tui/components/AnsiText.jsx

@@ -1,34 +1,39 @@
 /**
  * components/AnsiText.jsx — render ANSI SGR text as ink <Text> spans.
  *
- * Claude Code parses ANSI into styled Text nodes instead of relying on raw
+ * Parses ANSI into styled Text nodes instead of relying on raw
  * escape passthrough. This keeps markdown emphasis/code colors stable when an
  * inner span resets color back to the default.
  */
 import React from 'react';
 import { Text } from 'ink';
-import { theme } from '../theme.mjs';
+import { theme, getThemeVersion } from '../theme.mjs';
 
 const ANSI_RE = /\x1b\[([0-9;]*)m/g;
 
-const ANSI_COLORS = {
-  30: theme.subtle,
-  31: theme.error,
-  32: theme.success,
-  33: theme.warning,
-  34: theme.code,
-  35: 'ansi:magenta',
-  36: 'ansi:cyan',
-  37: theme.text,
-  90: theme.subtle,
-  91: theme.error,
-  92: theme.success,
-  93: theme.warning,
-  94: theme.code,
-  95: 'ansi:magentaBright',
-  96: 'ansi:cyanBright',
-  97: theme.statusText,
-};
+// Resolve the named SGR (30-37/90-97) → theme color map at call time so a
+// live `/theme` switch is honored. `theme` is mutated in-place on switch, so
+// reading the keys per parse keeps colors in sync without a module reload.
+function ansiColorMap() {
+  return {
+    30: theme.subtle,
+    31: theme.error,
+    32: theme.success,
+    33: theme.warning,
+    34: theme.code,
+    35: 'ansi:magenta',
+    36: 'ansi:cyan',
+    37: theme.text,
+    90: theme.subtle,
+    91: theme.error,
+    92: theme.success,
+    93: theme.warning,
+    94: theme.code,
+    95: 'ansi:magentaBright',
+    96: 'ansi:cyanBright',
+    97: theme.statusText,
+  };
+}
 
 const ANSI_BG_COLORS = {
   40: 'ansi:black',
@@ -74,7 +79,7 @@ function rgbCode(codes, index) {
   return `rgb(${r},${g},${b})`;
 }
 
-function applySgr(state, codes, defaultColor) {
+function applySgr(state, codes, defaultColor, ansiColors) {
   if (!codes.length) codes = [0];
   for (let i = 0; i < codes.length; i++) {
     const code = codes[i];
@@ -133,8 +138,8 @@ function applySgr(state, codes, defaultColor) {
         state.backgroundColor = undefined;
         break;
       default:
-        if (ANSI_COLORS[code]) {
-          state.color = ANSI_COLORS[code];
+        if (ansiColors[code]) {
+          state.color = ansiColors[code];
         } else if (ANSI_BG_COLORS[code]) {
           state.backgroundColor = ANSI_BG_COLORS[code];
         }
@@ -147,6 +152,7 @@ function parseAnsi(text, defaultColor) {
   const source = String(text ?? '');
   const spans = [];
   const state = defaultState(defaultColor);
+  const ansiColors = ansiColorMap();
   let lastIndex = 0;
   let match;
 
@@ -159,7 +165,7 @@ function parseAnsi(text, defaultColor) {
       .split(';')
       .filter(Boolean)
       .map((n) => Number(n));
-    applySgr(state, codes, defaultColor);
+    applySgr(state, codes, defaultColor, ansiColors);
     lastIndex = ANSI_RE.lastIndex;
   }
 
@@ -171,9 +177,13 @@ function parseAnsi(text, defaultColor) {
 }
 
 export function AnsiText({ children, defaultColor, wrap }) {
+  // ansiColorMap() reads live theme.* keys, so the parsed spans depend on the
+  // active theme. Include the theme version in the memo deps so a /theme switch
+  // re-parses with the new palette instead of reusing stale span colors.
+  const themeVersion = getThemeVersion();
   const spans = React.useMemo(
     () => parseAnsi(children, defaultColor),
-    [children, defaultColor],
+    [children, defaultColor, themeVersion],
   );
 
   return (
@@ -183,9 +193,10 @@ export function AnsiText({ children, defaultColor, wrap }) {
           key={index}
           color={span.style.color}
           backgroundColor={span.style.backgroundColor}
-          // Windows Terminal's synthetic bold makes Korean markdown text look
-          // slightly fuzzy. Keep the color emphasis, but avoid the font weight.
-          bold={false}
+          // Honor SGR bold only on spans that chalk/markdown set (e.g. **strong**,
+          // headings). Do not force bold globally — avoids fuzzy Korean body text
+          // when models emit no bold codes.
+          bold={span.style.bold}
           dimColor={span.style.dimColor}
           italic={span.style.italic}
           underline={span.style.underline}

package/src/tui/components/ContextPanel.jsx

@@ -75,25 +75,57 @@ function metricValue(parts) {
   return parts.filter(Boolean).join(' · ');
 }
 
-function MetricCell({ label, value, width, tone }) {
-  const labelWidth = Math.min(12, Math.max(8, Math.floor(width * 0.34)));
-  const valueWidth = Math.max(0, width - labelWidth - 1);
+function DetailLine({ label, value, columns }) {
+  const innerWidth = Math.max(24, Math.floor(columns || 80) - 4);
+  const labelWidth = 10;
+  const valueWidth = Math.max(0, innerWidth - labelWidth - 2);
+  return (
+    <Box flexDirection="row" width="100%">
+      <Text color={theme.subtle}>{padCells(truncateText(label, labelWidth), labelWidth)}</Text>
+      <Text color={theme.inactive}>  </Text>
+      <Text color={theme.text}>{truncateText(value, valueWidth)}</Text>
+    </Box>
+  );
+}
+
+function bucketTokens(map, names) {
+  return names.reduce((sum, name) => sum + finiteNumber(map?.[name]?.tokens), 0);
+}
+
+function bucketCount(map, names) {
+  return names.reduce((sum, name) => sum + finiteNumber(map?.[name]?.count), 0);
+}
+
+function semanticTokens(semantic, names) {
+  return names.reduce((sum, name) => sum + finiteNumber(semantic?.[name]?.tokens), 0);
+}
+
+function CategoryItem({ label, tokens, total, width }) {
+  const labelWidth = Math.min(11, Math.max(7, Math.floor(width * 0.22)));
+  const pctWidth = 6;
+  const tokenWidth = 7;
+  const barWidth = Math.max(6, Math.min(20, width - labelWidth - pctWidth - tokenWidth - 4));
+  const pct = percent(tokens, total);
   return (
     <Box flexDirection="row" width={width}>
-      <Text color={theme.subtle}>{padCells(truncateText(label, labelWidth), labelWidth)} </Text>
-      <Text color={tone || theme.text}>{truncateText(value, valueWidth)}</Text>
+      <Text color={theme.subtle}>{padCells(truncateText(label, labelWidth), labelWidth)}</Text>
+      <Text color={theme.inactive}> </Text>
+      <Text color={usageColor(pct)}>{padCells(percentLabel(tokens, total), pctWidth)}</Text>
+      <ProgressBar value={tokens} total={total} width={barWidth} />
+      <Text color={theme.inactive}> </Text>
+      <Text color={theme.text}>{padCells(formatTokens(tokens), tokenWidth)}</Text>
     </Box>
   );
 }
 
-function MetricGrid({ cells, columns }) {
+function CategoryGrid({ categories, columns, total }) {
   const innerWidth = Math.max(24, Math.floor(columns || 80) - 4);
-  const twoColumns = innerWidth >= 76;
+  const twoColumns = innerWidth >= 84;
   if (!twoColumns) {
     return (
       <Box flexDirection="column" width="100%">
-        {cells.map((cell) => (
-          <MetricCell key={cell.label} {...cell} width={innerWidth} />
+        {categories.map((category) => (
+          <CategoryItem key={category.label} {...category} total={total} width={innerWidth} />
         ))}
       </Box>
     );
@@ -102,14 +134,14 @@ function MetricGrid({ cells, columns }) {
   const leftWidth = Math.floor((innerWidth - gap) / 2);
   const rightWidth = innerWidth - gap - leftWidth;
   const pairs = [];
-  for (let i = 0; i < cells.length; i += 2) pairs.push(cells.slice(i, i + 2));
+  for (let i = 0; i < categories.length; i += 2) pairs.push(categories.slice(i, i + 2));
   return (
     <Box flexDirection="column" width="100%">
       {pairs.map((pair, index) => (
         <Box key={index} flexDirection="row" width="100%">
-          <MetricCell {...pair[0]} width={leftWidth} />
+          <CategoryItem {...pair[0]} total={total} width={leftWidth} />
           <Text>{' '.repeat(gap)}</Text>
-          {pair[1] ? <MetricCell {...pair[1]} width={rightWidth} /> : null}
+          {pair[1] ? <CategoryItem {...pair[1]} total={total} width={rightWidth} /> : null}
         </Box>
       ))}
     </Box>
@@ -127,6 +159,9 @@ function ContextUsageView({ detail, columns }) {
   const lastApi = detail?.lastApi || {};
   const cache = detail?.cache || {};
   const extensions = detail?.extensions || {};
+  const mcp = detail?.mcp || {};
+  const semantic = messages.semantic || {};
+  const schema = request.toolSchemaBreakdown || {};
   const usedTokens = finiteNumber(usage.usedTokens);
   const windowTokens = finiteNumber(usage.windowTokens);
   const freeTokens = windowTokens ? Math.max(0, windowTokens - usedTokens) : finiteNumber(usage.freeTokens);
@@ -134,25 +169,36 @@ function ContextUsageView({ detail, columns }) {
   const summaryText = `${formatTokens(usedTokens)} / ${formatTokens(windowTokens)} · ${formatTokens(freeTokens)} free`;
   const pctText = `${percentLabel(usedTokens, windowTokens)} used`;
   const barWidth = Math.max(12, Math.min(34, innerWidth - stringWidth(summaryText) - stringWidth(pctText) - 5));
+  const builtInToolTokens = bucketTokens(schema, ['code', 'web', 'mutation', 'channels', 'setup', 'other']);
+  const builtInToolCount = bucketCount(schema, ['code', 'web', 'mutation', 'channels', 'setup', 'other']);
+  const sessionTokens = semanticTokens(semantic, ['workspace', 'environment', 'other']);
   const compactionLine = metricValue([
-    compaction.stage || 'pending',
+    compaction.stage && compaction.stage !== 'pending' ? compaction.stage : '',
     compaction.state,
+    compaction.type ? `type ${compaction.type}` : '',
     compaction.triggerTokens ? `trigger ${formatTokens(compaction.triggerTokens)}` : '',
     compaction.boundaryTokens ? `boundary ${formatTokens(compaction.boundaryTokens)}` : '',
   ]);
-  const metaLine = metricValue([
-    usage.source || 'estimated',
-    usage.effective ? 'effective window' : '',
+  const sourceLine = metricValue([
+    usage.effective ? `effective ${formatTokens(windowTokens)}` : `window ${formatTokens(windowTokens)}`,
     usage.rawWindowTokens && usage.rawWindowTokens !== usage.windowTokens ? `raw ${formatTokens(usage.rawWindowTokens)}` : '',
   ]);
-  const cells = [
-    { label: 'Messages', value: metricValue([`${formatTokens(messages.tokens)} tokens`, `${messages.count || 0} msgs`]) },
-    { label: 'Tools', value: metricValue([`${formatTokens(tools.schemaTokens)} schema`, `${tools.active || 0}/${tools.count || 0} active`]) },
-    { label: 'Tool I/O', value: metricValue([`${toolIo.calls || 0} calls`, `${toolIo.results || 0} results`]) },
-    { label: 'Overhead', value: metricValue([`${formatTokens(request.overheadTokens)} frame`, `${formatTokens(request.reserveTokens)} reserve`]) },
-    { label: 'Last API', value: metricValue([`${formatTokens(lastApi.contextTokens)} ctx`, `${formatTokens(lastApi.inputTokens)} in`, `${formatTokens(lastApi.outputTokens)} out`]) },
-    { label: 'Cache', value: metricValue([`${cache.hitRate || 'n/a'} hit`, `${formatTokens(cache.readTokens)} read`]) },
-    { label: 'Extensions', value: metricValue([`${extensions.skills || 0} skills`, `${extensions.plugins || 0} plugins`]) },
+  const apiLine = metricValue([
+    `last ctx ${formatTokens(lastApi.contextTokens)}`,
+    `in/out ${formatTokens(lastApi.inputTokens)}/${formatTokens(lastApi.outputTokens)}`,
+    `cache ${cache.hitRate || 'n/a'}`,
+  ]);
+  const categories = [
+    { label: 'Messages', tokens: semanticTokens(semantic, ['chat', 'assistant']), meta: '' },
+    { label: 'Tools', tokens: builtInToolTokens, meta: `${tools.active || 0}/${tools.count || 0} active${builtInToolCount ? ` · ${builtInToolCount} defs` : ''}` },
+    { label: 'MCP', tokens: bucketTokens(schema, ['mcp']), meta: `${mcp.connected || 0}/${mcp.configured || 0} servers` },
+    { label: 'Skills', tokens: bucketTokens(schema, ['skills']), meta: `${extensions.skills || 0} skills` },
+    { label: 'Memory', tokens: semanticTokens(semantic, ['memory']) + bucketTokens(schema, ['memory']), meta: 'core + recall tools' },
+    { label: 'Session', tokens: sessionTokens, meta: 'workspace · environment' },
+    { label: 'Workflow', tokens: semanticTokens(semantic, ['workflow']) + bucketTokens(schema, ['agents']), meta: 'workflow · agents' },
+    { label: 'System', tokens: semanticTokens(semantic, ['system']), meta: 'rules · role catalog' },
+    { label: 'Overhead', tokens: finiteNumber(request.overheadTokens), meta: 'request frame' },
+    { label: 'Tool I/O', tokens: semanticTokens(semantic, ['toolResults']), meta: `${toolIo.calls || 0} calls · ${toolIo.results || 0} results` },
   ];
 
   return (
@@ -165,17 +211,21 @@ function ContextUsageView({ detail, columns }) {
         <Text color={theme.text}>{truncateText(summaryText, Math.max(0, innerWidth - Math.min(10, innerWidth) - barWidth - 3))}</Text>
       </Box>
       <Box marginTop={1} flexDirection="column" width="100%">
-        <Text color={theme.subtle}>{truncateText(metaLine, innerWidth)}</Text>
-        <Text color={theme.text}>{truncateText(`Compaction  ${compactionLine}`, innerWidth)}</Text>
+        <DetailLine label="Source" value={sourceLine} columns={columns} />
+        <DetailLine label="Compaction" value={compactionLine} columns={columns} />
+        <DetailLine label="API/cache" value={apiLine} columns={columns} />
       </Box>
       <Box marginTop={1} flexDirection="column" width="100%">
-        <MetricGrid cells={cells} columns={columns} />
+        <Text color={theme.subtle}>Context mix</Text>
+        <Box marginTop={1} flexDirection="column" width="100%">
+          <CategoryGrid categories={categories} columns={columns} total={windowTokens} />
+        </Box>
       </Box>
     </Box>
   );
 }
 
-export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fillHeight = false, detail = null }) {
+export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fillHeight = false, detail = null, description = '' }) {
   const safeRows = Array.isArray(rows) ? rows : [];
   const labelWidth = Math.min(
     safeRows.reduce((w, row) => Math.max(w, String(row.label || '').length), 0),
@@ -183,6 +233,11 @@ export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fill
   );
   const valueWidth = Math.max(0, columns - labelWidth - 8);
   const isContextUsage = detail?.type === 'context';
+  // Standard panel rhythm: title row, blank, description/hint row, blank, content.
+  const panelDescription = truncateText(
+    String(description || (isContextUsage ? 'Live context window usage by category.' : '')).replace(/\s+/g, ' ').trim(),
+    Math.max(0, columns - 4),
+  );
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%" height={fillHeight ? '100%' : undefined}>
@@ -194,10 +249,13 @@ export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fill
         width="100%"
         height={fillHeight ? '100%' : undefined}
       >
-        <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+        <Box flexDirection="row" justifyContent="space-between">
           <Text color={theme.panelTitle}>{title}</Text>
           <Text color={theme.subtle}>Esc back</Text>
         </Box>
+        <Text> </Text>
+        <Text color={theme.subtle}>{panelDescription || ' '}</Text>
+        <Text> </Text>
         {isContextUsage ? (
           <ContextUsageView detail={detail} columns={columns} />
         ) : (

package/src/tui/components/Markdown.jsx

@@ -1,93 +1,52 @@
 /**
  * components/Markdown.jsx — markdown → ink, hybrid renderer.
  *
- * Ported from Claude Code (refs/claude-code/src/components/Markdown.tsx):
- *   - marked.lexer() produces the token stream (same lib + config as CC).
+ * Markdown → ink hybrid renderer:
+ *   - marked.lexer() produces the token stream.
  *   - Non-table tokens are rendered to ANSI strings via formatToken and emitted
- *     through <AnsiText>, matching CC's span-based <Ansi> behavior.
+ *     through <AnsiText> as styled spans.
  *   - Tables are rendered by the MarkdownTable component (proper Box layout).
- *   - Adjacent non-table tokens are coalesced into one <Text> (CC's
- *     nonTableContent buffer) so block spacing matches.
+ *   - Block tokens are emitted as separate Ink children so lists, code fences,
+ *     and tables keep their markdown block boundaries.
  *
- * Syntax highlighting from CC is dropped, but token cache + streaming-split are
+ * Syntax highlighting is omitted, but token cache + streaming-split are
  * kept so partial markdown does not repaint stable text on every delta.
  */
 import React, { useRef } from 'react';
 import { Box, Text } from 'ink';
 import { marked } from 'marked';
-import { formatToken } from '../markdown/format-token.mjs';
+import {
+  configureMarked,
+  hasMarkdownSyntax,
+  renderTokenAnsiSegments,
+} from '../markdown/render-ansi.mjs';
+import { trimPartialClosingFences } from '../markdown/stream-fence.mjs';
 import { AnsiText } from './AnsiText.jsx';
 import { MarkdownTable } from './MarkdownTable.jsx';
 import { theme } from '../theme.mjs';
 
-let _configured = false;
-function configureMarked() {
-  if (_configured) return;
-  _configured = true;
-  // Disable strikethrough: models use ~ for "approximate" (~100), not <del>.
-  marked.use({ tokenizer: { del() { return undefined; } } });
-}
-
-const TOKEN_CACHE_MAX = 500;
-const tokenCache = new Map();
-const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
-
-function hasMarkdownSyntax(text) {
-  const sample = text.length > 500 ? text.slice(0, 500) : text;
-  return MD_SYNTAX_RE.test(sample);
-}
-
-function cachedLexer(content) {
-  const text = String(content ?? '');
-  if (!hasMarkdownSyntax(text)) {
-    return [{
-      type: 'paragraph',
-      raw: text,
-      text,
-      tokens: [{ type: 'text', raw: text, text }],
-    }];
-  }
-  const hit = tokenCache.get(text);
-  if (hit) {
-    tokenCache.delete(text);
-    tokenCache.set(text, hit);
-    return hit;
-  }
-  const tokens = marked.lexer(text);
-  if (tokenCache.size >= TOKEN_CACHE_MAX) {
-    const first = tokenCache.keys().next().value;
-    if (first !== undefined) tokenCache.delete(first);
-  }
-  tokenCache.set(text, tokens);
-  return tokens;
-}
-
-function renderMarkdownElements(content) {
-  configureMarked();
-  const tokens = cachedLexer(String(content ?? ''));
+function renderMarkdownElements(content, trimPartialFences = false, tableWidth) {
+  // `tableWidth` is the App's body/content width; it doubles as the hr fill
+  // width. Fall back to 80 when not provided so an hr still spans a sane rule.
+  const segments = renderTokenAnsiSegments(content, { trimPartialFences, width: tableWidth || 80 });
   const result = [];
-  let buffer = '';
   let idx = 0;
-  const flush = () => {
-    if (buffer) {
-      // CC trims the coalesced non-table block (MarkdownBody: nonTableContent
-      // .trim()) so leading/trailing blank lines from token EOLs don't bleed
-      // into the surrounding gap={1} spacing. defaultColor={theme.text}
-      // keeps ANSI resets on the same dark-theme foreground instead of the
-      // terminal profile's default foreground.
-      result.push(<AnsiText key={`md_${idx++}`} defaultColor={theme.text}>{buffer.trim()}</AnsiText>);
-      buffer = '';
-    }
-  };
-  for (const token of tokens) {
-    if (token.type === 'table') {
-      flush();
-      result.push(<MarkdownTable key={`md_${idx++}`} token={token} />);
+  for (const segment of segments) {
+    if (segment.type === 'table') {
+      // Pass the App's body width as forceWidth so the table is laid out at the
+      // SAME width the row-height estimator measures (measureMarkdownTableRows).
+      // Without it MarkdownTable falls back to useStdout().columns, which on
+      // win32 is frameColumns+1 — a 1-col gap that can flip the table between
+      // horizontal and vertical layout and top-clip streaming output.
+      result.push(<MarkdownTable key={`md_${idx++}`} token={segment.token} forceWidth={tableWidth} />);
     } else {
-      buffer += formatToken(token);
+      // defaultColor={theme.text} keeps ANSI resets on the same dark-theme
+      // foreground instead of the terminal profile's default foreground.
+      result.push(
+        <AnsiText key={`md_${idx++}`} defaultColor={theme.text}>{segment.ansi}</AnsiText>,
+      );
     }
   }
-  flush();
   return result;
 }
 
@@ -145,15 +104,18 @@ function balanceStreamingMarkdown(text) {
   return rendered;
 }
 
-export function Markdown({ children }) {
+export function Markdown({ children, themeEpoch = 0, trimPartialFences = false, columns }) {
   const elements = React.useMemo(() => {
     try {
-      return renderMarkdownElements(children);
+      return renderMarkdownElements(children, trimPartialFences, columns);
     } catch {
       // Never throw into the render tree — fall back to raw text.
       return [<Text key="md_0" color={theme.text}>{String(children ?? '')}</Text>];
     }
-  }, [children]);
+  // themeEpoch is a memo dep so a /theme switch re-renders to ANSI with the new
+  // md* colors (formatToken re-resolves its colorizers on the active theme).
+  // columns is a dep so a resize re-lays-out tables at the new forceWidth.
+  }, [children, themeEpoch, trimPartialFences, columns]);
 
   return (
     <Box flexDirection="column" gap={1}>
@@ -162,13 +124,13 @@ export function Markdown({ children }) {
   );
 }
 
-export function StreamingMarkdown({ children }) {
+export function StreamingMarkdown({ children, themeEpoch = 0, columns }) {
   const stablePrefixRef = useRef('');
   const text = String(children ?? '');
 
   if (!hasMarkdownSyntax(text)) {
     stablePrefixRef.current = '';
-    return <Markdown>{text}</Markdown>;
+    return <Markdown themeEpoch={themeEpoch} columns={columns}>{text}</Markdown>;
   }
 
   if (!text.startsWith(stablePrefixRef.current)) {
@@ -179,7 +141,11 @@ export function StreamingMarkdown({ children }) {
   try {
     configureMarked();
     const boundary = stablePrefix.length;
+    // Lex the still-streaming suffix and trim any partial closing fence so an
+    // open code block does not grow-then-shrink as the final backtick(s)
+    // stream in. Operates on a fresh lex so the shared tokenCache is untouched.
     const tokens = marked.lexer(text.substring(boundary));
+    trimPartialClosingFences(tokens);
     let lastContentIdx = tokens.length - 1;
     while (lastContentIdx >= 0 && tokens[lastContentIdx]?.type === 'space') lastContentIdx--;
     let advance = 0;
@@ -198,8 +164,8 @@ export function StreamingMarkdown({ children }) {
   const unstableSuffix = text.substring(stablePrefix.length);
   return (
     <Box flexDirection="column" gap={1}>
-      {stablePrefix ? <Markdown>{stablePrefix}</Markdown> : null}
-      {unstableSuffix ? <Markdown>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
+      {stablePrefix ? <Markdown themeEpoch={themeEpoch} columns={columns}>{stablePrefix}</Markdown> : null}
+      {unstableSuffix ? <Markdown themeEpoch={themeEpoch} columns={columns} trimPartialFences>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
     </Box>
   );
 }