mixdog 0.7.18 → 0.8.0

package/src/tui/components/AnsiText.jsx

@@ -0,0 +1,199 @@
+/**
+ * components/AnsiText.jsx — render ANSI SGR text as ink <Text> spans.
+ *
+ * Claude Code 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';
+
+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,
+};
+
+const ANSI_BG_COLORS = {
+  40: 'ansi:black',
+  41: 'ansi:red',
+  42: 'ansi:green',
+  43: 'ansi:yellow',
+  44: 'ansi:blue',
+  45: 'ansi:magenta',
+  46: 'ansi:cyan',
+  47: 'ansi:white',
+  100: 'ansi:blackBright',
+  101: 'ansi:redBright',
+  102: 'ansi:greenBright',
+  103: 'ansi:yellowBright',
+  104: 'ansi:blueBright',
+  105: 'ansi:magentaBright',
+  106: 'ansi:cyanBright',
+  107: 'ansi:whiteBright',
+};
+
+function defaultState(defaultColor) {
+  return {
+    color: defaultColor,
+    backgroundColor: undefined,
+    bold: false,
+    dimColor: false,
+    italic: false,
+    underline: false,
+    inverse: false,
+  };
+}
+
+function cloneState(state) {
+  return { ...state };
+}
+
+function rgbCode(codes, index) {
+  if (codes[index + 1] !== 2) return null;
+  const r = codes[index + 2];
+  const g = codes[index + 3];
+  const b = codes[index + 4];
+  if ([r, g, b].some((n) => !Number.isFinite(n))) return null;
+  return `rgb(${r},${g},${b})`;
+}
+
+function applySgr(state, codes, defaultColor) {
+  if (!codes.length) codes = [0];
+  for (let i = 0; i < codes.length; i++) {
+    const code = codes[i];
+    switch (code) {
+      case 0:
+        Object.assign(state, defaultState(defaultColor));
+        break;
+      case 1:
+        state.bold = true;
+        break;
+      case 2:
+        state.dimColor = true;
+        break;
+      case 3:
+        state.italic = true;
+        break;
+      case 4:
+        state.underline = true;
+        break;
+      case 7:
+        state.inverse = true;
+        break;
+      case 22:
+        state.bold = false;
+        state.dimColor = false;
+        break;
+      case 23:
+        state.italic = false;
+        break;
+      case 24:
+        state.underline = false;
+        break;
+      case 27:
+        state.inverse = false;
+        break;
+      case 38: {
+        const color = rgbCode(codes, i);
+        if (color) {
+          state.color = color;
+          i += 4;
+        }
+        break;
+      }
+      case 48: {
+        const color = rgbCode(codes, i);
+        if (color) {
+          state.backgroundColor = color;
+          i += 4;
+        }
+        break;
+      }
+      case 39:
+        state.color = defaultColor;
+        break;
+      case 49:
+        state.backgroundColor = undefined;
+        break;
+      default:
+        if (ANSI_COLORS[code]) {
+          state.color = ANSI_COLORS[code];
+        } else if (ANSI_BG_COLORS[code]) {
+          state.backgroundColor = ANSI_BG_COLORS[code];
+        }
+        break;
+    }
+  }
+}
+
+function parseAnsi(text, defaultColor) {
+  const source = String(text ?? '');
+  const spans = [];
+  const state = defaultState(defaultColor);
+  let lastIndex = 0;
+  let match;
+
+  ANSI_RE.lastIndex = 0;
+  while ((match = ANSI_RE.exec(source)) !== null) {
+    if (match.index > lastIndex) {
+      spans.push({ text: source.slice(lastIndex, match.index), style: cloneState(state) });
+    }
+    const codes = String(match[1] || '')
+      .split(';')
+      .filter(Boolean)
+      .map((n) => Number(n));
+    applySgr(state, codes, defaultColor);
+    lastIndex = ANSI_RE.lastIndex;
+  }
+
+  if (lastIndex < source.length) {
+    spans.push({ text: source.slice(lastIndex), style: cloneState(state) });
+  }
+
+  return spans;
+}
+
+export function AnsiText({ children, defaultColor, wrap }) {
+  const spans = React.useMemo(
+    () => parseAnsi(children, defaultColor),
+    [children, defaultColor],
+  );
+
+  return (
+    <Text wrap={wrap}>
+      {spans.map((span, index) => (
+        <Text
+          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}
+          dimColor={span.style.dimColor}
+          italic={span.style.italic}
+          underline={span.style.underline}
+          inverse={span.style.inverse}
+        >
+          {span.text}
+        </Text>
+      ))}
+    </Text>
+  );
+}

package/src/tui/components/ContextPanel.jsx

@@ -0,0 +1,217 @@
+/**
+ * components/ContextPanel.jsx - read-only context usage dashboard.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import { theme } from '../theme.mjs';
+
+function truncateText(value, width) {
+  const text = String(value || '');
+  if (!(width > 0)) return '';
+  if (stringWidth(text) <= width) return text;
+  if (width <= 1) return '…'.repeat(Math.max(0, width));
+  let out = '';
+  for (const ch of text) {
+    if (stringWidth(`${out}${ch}…`) > width) break;
+    out += ch;
+  }
+  return `${out}…`;
+}
+
+function padCells(value, width) {
+  const text = String(value || '');
+  return `${text}${' '.repeat(Math.max(0, width - stringWidth(text)))}`;
+}
+
+function finiteNumber(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function formatTokens(value) {
+  const n = finiteNumber(value);
+  if (n <= 0) return '0';
+  if (Math.abs(n) >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}m`;
+  if (Math.abs(n) >= 10_000) return `${Math.round(n / 1000)}k`;
+  if (Math.abs(n) >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return `${Math.round(n)}`;
+}
+
+function percent(value, total) {
+  const n = finiteNumber(value);
+  const d = finiteNumber(total);
+  if (d <= 0) return null;
+  return Math.max(0, Math.min(100, (n / d) * 100));
+}
+
+function percentLabel(value, total) {
+  const pct = percent(value, total);
+  if (pct === null) return 'n/a';
+  return `${pct > 0 && pct < 1 ? pct.toFixed(1) : Math.round(pct)}%`;
+}
+
+function usageColor(pct) {
+  if (!Number.isFinite(Number(pct))) return theme.text;
+  if (pct >= 95) return theme.error;
+  if (pct >= 80) return theme.warning;
+  return theme.success;
+}
+
+function ProgressBar({ value = 0, total = 0, width = 24 }) {
+  const pct = percent(value, total) ?? 0;
+  const safeWidth = Math.max(8, Math.floor(width));
+  const filled = Math.max(0, Math.min(safeWidth, Math.round((pct / 100) * safeWidth)));
+  const empty = safeWidth - filled;
+  return (
+    <Box flexDirection="row" width={safeWidth}>
+      {filled > 0 ? <Text color={usageColor(pct)}>{'█'.repeat(filled)}</Text> : null}
+      {empty > 0 ? <Text color={theme.inactive}>{'░'.repeat(empty)}</Text> : null}
+    </Box>
+  );
+}
+
+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);
+  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>
+    </Box>
+  );
+}
+
+function MetricGrid({ cells, columns }) {
+  const innerWidth = Math.max(24, Math.floor(columns || 80) - 4);
+  const twoColumns = innerWidth >= 76;
+  if (!twoColumns) {
+    return (
+      <Box flexDirection="column" width="100%">
+        {cells.map((cell) => (
+          <MetricCell key={cell.label} {...cell} width={innerWidth} />
+        ))}
+      </Box>
+    );
+  }
+  const gap = 4;
+  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));
+  return (
+    <Box flexDirection="column" width="100%">
+      {pairs.map((pair, index) => (
+        <Box key={index} flexDirection="row" width="100%">
+          <MetricCell {...pair[0]} width={leftWidth} />
+          <Text>{' '.repeat(gap)}</Text>
+          {pair[1] ? <MetricCell {...pair[1]} width={rightWidth} /> : null}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function ContextUsageView({ detail, columns }) {
+  const innerWidth = Math.max(24, Math.floor(columns || 80) - 4);
+  const usage = detail?.usage || {};
+  const compaction = detail?.compaction || {};
+  const messages = detail?.messages || {};
+  const tools = detail?.tools || {};
+  const toolIo = detail?.toolIo || {};
+  const request = detail?.request || {};
+  const lastApi = detail?.lastApi || {};
+  const cache = detail?.cache || {};
+  const extensions = detail?.extensions || {};
+  const usedTokens = finiteNumber(usage.usedTokens);
+  const windowTokens = finiteNumber(usage.windowTokens);
+  const freeTokens = windowTokens ? Math.max(0, windowTokens - usedTokens) : finiteNumber(usage.freeTokens);
+  const usedPct = percent(usedTokens, windowTokens);
+  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 compactionLine = metricValue([
+    compaction.stage || 'pending',
+    compaction.state,
+    compaction.triggerTokens ? `trigger ${formatTokens(compaction.triggerTokens)}` : '',
+    compaction.boundaryTokens ? `boundary ${formatTokens(compaction.boundaryTokens)}` : '',
+  ]);
+  const metaLine = metricValue([
+    usage.source || 'estimated',
+    usage.effective ? 'effective window' : '',
+    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`]) },
+  ];
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box flexDirection="row" width="100%">
+        <Text color={usageColor(usedPct)} bold>{padCells(pctText, Math.min(10, innerWidth))}</Text>
+        <Text color={theme.inactive}> </Text>
+        <ProgressBar value={usedTokens} total={windowTokens} width={barWidth} />
+        <Text color={theme.inactive}>  </Text>
+        <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>
+      </Box>
+      <Box marginTop={1} flexDirection="column" width="100%">
+        <MetricGrid cells={cells} columns={columns} />
+      </Box>
+    </Box>
+  );
+}
+
+export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fillHeight = false, detail = null }) {
+  const safeRows = Array.isArray(rows) ? rows : [];
+  const labelWidth = Math.min(
+    safeRows.reduce((w, row) => Math.max(w, String(row.label || '').length), 0),
+    Math.max(12, Math.floor(columns * 0.24)),
+  );
+  const valueWidth = Math.max(0, columns - labelWidth - 8);
+  const isContextUsage = detail?.type === 'context';
+
+  return (
+    <Box flexDirection="column" flexShrink={0} width="100%" height={fillHeight ? '100%' : undefined}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.promptBorder}
+        paddingX={1}
+        width="100%"
+        height={fillHeight ? '100%' : undefined}
+      >
+        <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+          <Text color={theme.panelTitle}>{title}</Text>
+          <Text color={theme.subtle}>Esc back</Text>
+        </Box>
+        {isContextUsage ? (
+          <ContextUsageView detail={detail} columns={columns} />
+        ) : (
+          safeRows.map((row) => (
+            <Box key={row.value || row.label} flexDirection="row" width="100%">
+              <Text color={theme.inactive}>{padCells(truncateText(row.label, labelWidth), labelWidth)}</Text>
+              <Text color={theme.text}>
+                {'  '}
+                {truncateText(row.description, valueWidth)}
+              </Text>
+            </Box>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Markdown.jsx

@@ -0,0 +1,205 @@
+/**
+ * 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).
+ *   - Non-table tokens are rendered to ANSI strings via formatToken and emitted
+ *     through <AnsiText>, matching CC's span-based <Ansi> behavior.
+ *   - 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.
+ *
+ * Syntax highlighting from CC is dropped, 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 { 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 ?? ''));
+  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} />);
+    } else {
+      buffer += formatToken(token);
+    }
+  }
+  flush();
+  return result;
+}
+
+function hasOpenFence(text) {
+  let ticks = 0;
+  let tildes = 0;
+  for (const line of String(text ?? '').split('\n')) {
+    if (/^\s*```/.test(line)) ticks += 1;
+    if (/^\s*~~~/.test(line)) tildes += 1;
+  }
+  return ticks % 2 === 1 || tildes % 2 === 1;
+}
+
+function hasOpenInlineCode(text) {
+  let count = 0;
+  const value = String(text ?? '');
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (ch !== '`') continue;
+    let run = 1;
+    while (value[i + run] === '`') run += 1;
+    if (run === 1) count += 1;
+    i += run - 1;
+  }
+  return count % 2 === 1;
+}
+
+function hasUnclosedDelimiter(text, marker) {
+  let count = 0;
+  const value = String(text ?? '');
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (value.startsWith(marker, i)) {
+      count += 1;
+      i += marker.length - 1;
+    }
+  }
+  return count % 2 === 1;
+}
+
+function balanceStreamingMarkdown(text) {
+  const value = String(text ?? '');
+  if (!value || hasOpenFence(value)) return value;
+  if (hasOpenInlineCode(value)) return `${value}\``;
+  let rendered = value;
+  if (hasUnclosedDelimiter(rendered, '**')) rendered += '**';
+  if (hasUnclosedDelimiter(rendered, '__')) rendered += '__';
+  return rendered;
+}
+
+export function Markdown({ children }) {
+  const elements = React.useMemo(() => {
+    try {
+      return renderMarkdownElements(children);
+    } catch {
+      // Never throw into the render tree — fall back to raw text.
+      return [<Text key="md_0" color={theme.text}>{String(children ?? '')}</Text>];
+    }
+  }, [children]);
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {elements}
+    </Box>
+  );
+}
+
+export function StreamingMarkdown({ children }) {
+  const stablePrefixRef = useRef('');
+  const text = String(children ?? '');
+
+  if (!hasMarkdownSyntax(text)) {
+    stablePrefixRef.current = '';
+    return <Markdown>{text}</Markdown>;
+  }
+
+  if (!text.startsWith(stablePrefixRef.current)) {
+    stablePrefixRef.current = '';
+  }
+
+  let stablePrefix = stablePrefixRef.current;
+  try {
+    configureMarked();
+    const boundary = stablePrefix.length;
+    const tokens = marked.lexer(text.substring(boundary));
+    let lastContentIdx = tokens.length - 1;
+    while (lastContentIdx >= 0 && tokens[lastContentIdx]?.type === 'space') lastContentIdx--;
+    let advance = 0;
+    for (let i = 0; i < lastContentIdx; i++) {
+      advance += tokens[i]?.raw?.length ?? 0;
+    }
+    if (advance > 0) {
+      stablePrefixRef.current = text.substring(0, boundary + advance);
+      stablePrefix = stablePrefixRef.current;
+    }
+  } catch {
+    stablePrefix = '';
+    stablePrefixRef.current = '';
+  }
+
+  const unstableSuffix = text.substring(stablePrefix.length);
+  return (
+    <Box flexDirection="column" gap={1}>
+      {stablePrefix ? <Markdown>{stablePrefix}</Markdown> : null}
+      {unstableSuffix ? <Markdown>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
+    </Box>
+  );
+}