@renxqoo/renx-code 0.0.2 → 0.0.4

package/src/components/chat/code-block.test.tsx

@@ -0,0 +1,206 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  CodeBlock,
+  extractDiffPath,
+  inferCodeFiletype,
+  inferFiletypeFromPath,
+  looksLikeDiff,
+} from './code-block';
+
+type ElementLike = {
+  type: unknown;
+  props?: {
+    children?: unknown;
+    [key: string]: unknown;
+  };
+};
+
+const isElementLike = (value: unknown): value is ElementLike => {
+  return (
+    Boolean(value) && typeof value === 'object' && 'type' in (value as Record<string, unknown>)
+  );
+};
+
+const findElementByType = (node: unknown, targetType: string): ElementLike | null => {
+  if (!node) {
+    return null;
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const match = findElementByType(child, targetType);
+      if (match) {
+        return match;
+      }
+    }
+    return null;
+  }
+
+  if (!isElementLike(node)) {
+    return null;
+  }
+
+  if (typeof node.type === 'function') {
+    return findElementByType(
+      (node.type as (props: object) => unknown)(node.props ?? {}),
+      targetType
+    );
+  }
+
+  if (node.type === targetType) {
+    return node;
+  }
+
+  return findElementByType(node.props?.children, targetType);
+};
+
+describe('CodeBlock', () => {
+  it('detects unified diff content and extracts the changed path', () => {
+    const diff = [
+      'diff --git a/src/App.tsx b/src/App.tsx',
+      '--- a/src/App.tsx',
+      '+++ b/src/App.tsx',
+      '@@ -1,2 +1,2 @@',
+      '-const before = true;',
+      '+const after = true;',
+    ].join('\n');
+
+    expect(looksLikeDiff(diff)).toBe(true);
+    expect(extractDiffPath(diff)).toBe('src/App.tsx');
+    expect(inferCodeFiletype(diff)).toBe('diff');
+    expect(inferFiletypeFromPath('src/App.tsx')).toBe('tsx');
+  });
+
+  it('infers json and bash snippets without explicit metadata', () => {
+    expect(inferCodeFiletype('{\n  "name": "demo"\n}')).toBe('json');
+    expect(inferCodeFiletype('$ pnpm test\n$ pnpm lint')).toBe('bash');
+  });
+
+  it('renders diff snippets with the OpenTUI diff component', () => {
+    const tree = CodeBlock({
+      label: 'output',
+      content: ['--- a/a.ts', '+++ b/a.ts', '@@ -1 +1 @@', '-a', '+b'].join('\n'),
+    });
+
+    const diffNode = findElementByType(tree, 'diff');
+
+    expect(diffNode).not.toBeNull();
+    expect(diffNode?.props?.view).toBe('unified');
+    expect(diffNode?.props?.showLineNumbers).toBe(true);
+  });
+
+  it('falls back to code preview when a diff block is collapsed', () => {
+    const content = [
+      'diff --git a/src/a.ts b/src/a.ts',
+      '--- a/src/a.ts',
+      '+++ b/src/a.ts',
+      '@@ -1,2 +1,22 @@',
+      '-const oldValue = 1;',
+      '+const newValue = 1;',
+      ...Array.from({ length: 20 }, (_, index) => `+const line${index + 1} = ${index + 1};`),
+    ].join('\n');
+
+    const tree = CodeBlock({
+      label: 'output',
+      content,
+      collapsible: true,
+      expanded: false,
+    });
+
+    expect(findElementByType(tree, 'diff')).toBeNull();
+    expect(findElementByType(tree, 'code')).not.toBeNull();
+  });
+
+  it('renders diff component when a collapsed diff block is expanded', () => {
+    const content = [
+      'diff --git a/src/a.ts b/src/a.ts',
+      '--- a/src/a.ts',
+      '+++ b/src/a.ts',
+      '@@ -1,2 +1,22 @@',
+      '-const oldValue = 1;',
+      '+const newValue = 1;',
+      ...Array.from({ length: 20 }, (_, index) => `+const line${index + 1} = ${index + 1};`),
+    ].join('\n');
+
+    const tree = CodeBlock({
+      label: 'output',
+      content,
+      collapsible: true,
+      expanded: true,
+    });
+
+    expect(findElementByType(tree, 'diff')).not.toBeNull();
+  });
+
+  it('renders regular snippets with the OpenTUI code component', () => {
+    const tree = CodeBlock({
+      label: 'arguments',
+      content: '{\n  "timeout": 1000\n}',
+      languageHint: 'json',
+    });
+
+    const codeNode = findElementByType(tree, 'code');
+
+    expect(codeNode).not.toBeNull();
+    expect(codeNode?.props?.filetype).toBe('json');
+  });
+
+  it('collapses long output to 16 lines by default when enabled', () => {
+    const content = Array.from({ length: 20 }, (_, index) => `line ${index + 1}`).join('\n');
+    const expected = `${Array.from({ length: 16 }, (_, index) => `line ${index + 1}`).join('\n')}\n`;
+
+    const tree = CodeBlock({
+      label: 'output',
+      content,
+      collapsible: true,
+      expanded: false,
+    });
+
+    const codeNode = findElementByType(tree, 'code');
+
+    expect(codeNode).not.toBeNull();
+    expect(codeNode?.props?.content).toBe(expected);
+  });
+
+  it('shows full output when expanded is true', () => {
+    const content = Array.from({ length: 20 }, (_, index) => `line ${index + 1}`).join('\n');
+    const expected = content;
+
+    const tree = CodeBlock({
+      label: 'output',
+      content,
+      collapsible: true,
+      expanded: true,
+    });
+
+    const codeNode = findElementByType(tree, 'code');
+
+    expect(codeNode).not.toBeNull();
+    expect(codeNode?.props?.content).toBe(expected);
+  });
+
+  it('does not treat diagnostic text followed by a diff as a diff block', () => {
+    const content = [
+      "Error parsing diff: Hunk at line 5 contained invalid line Line 2');",
+      'Index: /tmp/task-errors.test.ts',
+      '===================================================================',
+      '--- /tmp/task-errors.test.ts original',
+      '+++ /tmp/task-errors.test.ts modified',
+      '@@ -1 +1 @@',
+      '-a',
+      '+b',
+    ].join('\n');
+
+    expect(looksLikeDiff(content)).toBe(false);
+    expect(inferCodeFiletype(content)).toBeUndefined();
+
+    const tree = CodeBlock({
+      label: 'output',
+      content,
+    });
+
+    expect(findElementByType(tree, 'diff')).toBeNull();
+    expect(findElementByType(tree, 'code')).not.toBeNull();
+  });
+});

package/src/components/chat/code-block.tsx

@@ -0,0 +1,313 @@
+import { opencodeMarkdownSyntax } from '../../ui/opencode-markdown';
+import { uiTheme } from '../../ui/theme';
+
+type CodeBlockProps = {
+  content: string;
+  label?: string;
+  languageHint?: string;
+  collapsible?: boolean;
+  collapsedLines?: number;
+  expanded?: boolean;
+  onToggleExpanded?: () => void;
+};
+
+const FILETYPE_BY_EXTENSION: Record<string, string> = {
+  bash: 'bash',
+  cjs: 'javascript',
+  css: 'css',
+  html: 'html',
+  java: 'java',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'tsx',
+  md: 'markdown',
+  mjs: 'javascript',
+  py: 'python',
+  sh: 'bash',
+  sql: 'sql',
+  ts: 'typescript',
+  tsx: 'tsx',
+  txt: 'text',
+  xml: 'xml',
+  yaml: 'yaml',
+  yml: 'yaml',
+  zsh: 'bash',
+};
+
+const DIFF_HEADER_PATTERNS = [/^diff --git /m, /^Index:\s+/m, /^@@ /m];
+
+const normalizeHint = (value?: string): string | undefined => {
+  const normalized = value?.trim().toLowerCase();
+  if (!normalized || normalized === 'auto') {
+    return undefined;
+  }
+  if (normalized === 'sh' || normalized === 'shell' || normalized === 'zsh') {
+    return 'bash';
+  }
+  if (normalized === 'js') {
+    return 'javascript';
+  }
+  if (normalized === 'ts') {
+    return 'typescript';
+  }
+  return normalized;
+};
+
+export const looksLikeDiff = (value: string): boolean => {
+  const normalized = value.trim();
+  if (!normalized) {
+    return false;
+  }
+
+  const firstLine = normalized.split('\n', 1)[0]?.trim();
+  if (
+    !firstLine ||
+    !(
+      firstLine.startsWith('diff --git ') ||
+      firstLine.startsWith('Index: ') ||
+      firstLine.startsWith('--- ') ||
+      firstLine.startsWith('@@ ')
+    )
+  ) {
+    return false;
+  }
+
+  if (DIFF_HEADER_PATTERNS.some(pattern => pattern.test(normalized))) {
+    return (
+      /^@@ /m.test(normalized) ||
+      (/^--- /m.test(normalized) && /^\+\+\+ /m.test(normalized)) ||
+      /^diff --git /m.test(normalized)
+    );
+  }
+
+  return false;
+};
+
+export const inferFiletypeFromPath = (value?: string): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  const fileName = value.split('/').pop();
+  if (!fileName || !fileName.includes('.')) {
+    return undefined;
+  }
+
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  if (!extension) {
+    return undefined;
+  }
+
+  return FILETYPE_BY_EXTENSION[extension];
+};
+
+export const extractDiffPath = (value: string): string | undefined => {
+  const lines = value.split('\n');
+  for (const line of lines) {
+    if (line.startsWith('Index: ')) {
+      return line.slice('Index: '.length).trim();
+    }
+    if (line.startsWith('diff --git ')) {
+      const match = line.match(/^diff --git a\/(.+?) b\/(.+)$/);
+      if (match?.[2]) {
+        return match[2];
+      }
+    }
+    if (line.startsWith('+++ ')) {
+      const path = line.slice(4).trim();
+      if (path && path !== '/dev/null') {
+        return path.replace(/^b\//, '');
+      }
+    }
+  }
+
+  return undefined;
+};
+
+const looksLikeJson = (value: string): boolean => {
+  const normalized = value.trim();
+  if (!normalized || !['{', '['].includes(normalized[0] ?? '')) {
+    return false;
+  }
+
+  try {
+    JSON.parse(normalized);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const inferCodeFiletype = (value: string, languageHint?: string): string | undefined => {
+  const hint = normalizeHint(languageHint);
+  if (hint) {
+    return hint;
+  }
+
+  if (looksLikeDiff(value)) {
+    return 'diff';
+  }
+
+  const normalized = value.trim();
+  if (!normalized) {
+    return undefined;
+  }
+
+  if (looksLikeJson(normalized)) {
+    return 'json';
+  }
+
+  if (
+    normalized.startsWith('#!/bin/bash') ||
+    normalized.startsWith('#!/usr/bin/env bash') ||
+    normalized.startsWith('#!/bin/sh') ||
+    normalized.startsWith('#!/usr/bin/env zsh')
+  ) {
+    return 'bash';
+  }
+
+  const meaningfulLines = normalized
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean);
+  if (meaningfulLines.length > 0 && meaningfulLines.every(line => line.startsWith('$ '))) {
+    return 'bash';
+  }
+
+  return undefined;
+};
+
+const buildHeaderMeta = (content: string, filetype?: string): string | undefined => {
+  if (filetype === 'diff') {
+    return extractDiffPath(content) ?? 'unified';
+  }
+
+  if (!filetype || filetype === 'text') {
+    return undefined;
+  }
+
+  return filetype;
+};
+
+const DEFAULT_COLLAPSED_LINES = 16;
+
+const toContentLines = (value: string): string[] => {
+  if (!value) {
+    return [];
+  }
+
+  const trimmed = value.replace(/\n+$/, '');
+  if (!trimmed) {
+    return [];
+  }
+
+  return trimmed.split('\n');
+};
+
+const buildCollapsedContent = (
+  content: string,
+  lineLimit: number
+): { content: string; hiddenLines: number } => {
+  const lines = toContentLines(content);
+  if (lineLimit <= 0 || lines.length <= lineLimit) {
+    return {
+      content,
+      hiddenLines: 0,
+    };
+  }
+
+  return {
+    content: `${lines.slice(0, lineLimit).join('\n')}\n`,
+    hiddenLines: lines.length - lineLimit,
+  };
+};
+
+export const CodeBlock = ({
+  content,
+  label,
+  languageHint,
+  collapsible = false,
+  collapsedLines = DEFAULT_COLLAPSED_LINES,
+  expanded = false,
+  onToggleExpanded,
+}: CodeBlockProps) => {
+  const normalized = content.replace(/\n+$/, '\n');
+  const collapsed = buildCollapsedContent(normalized, collapsedLines);
+  const isTruncated = collapsible && collapsed.hiddenLines > 0;
+  const renderedContent = isTruncated && !expanded ? collapsed.content : normalized;
+  const filetype = inferCodeFiletype(normalized, languageHint);
+  const isDiff = filetype === 'diff';
+  const shouldRenderDiff = isDiff && (!isTruncated || expanded);
+  const codeFiletype = isDiff ? 'diff' : filetype;
+  const diffFiletype = isDiff ? inferFiletypeFromPath(extractDiffPath(normalized)) : undefined;
+  const headerLabel = label ?? 'code';
+  const headerMeta = buildHeaderMeta(normalized, filetype);
+  const toggleHint = expanded
+    ? 'show less (click to collapse)'
+    : `... hidden ${collapsed.hiddenLines} lines (click to expand)`;
+  const clickHandler = isTruncated ? onToggleExpanded : undefined;
+
+  return (
+    <box
+      flexDirection="column"
+      // backgroundColor={uiTheme.codeBlock.bg}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={1}
+      paddingBottom={1}
+    >
+      <text fg={uiTheme.codeBlock.header} attributes={uiTheme.typography.note}>
+        {headerLabel}
+        {headerMeta ? <span fg={uiTheme.codeBlock.language}> · {headerMeta}</span> : null}
+      </text>
+      <box marginTop={1} onMouseUp={clickHandler}>
+        {shouldRenderDiff ? (
+          <diff
+            diff={renderedContent}
+            view="unified"
+            filetype={diffFiletype}
+            fg={uiTheme.codeBlock.text}
+            syntaxStyle={opencodeMarkdownSyntax}
+            wrapMode="char"
+            conceal={true}
+            showLineNumbers={true}
+            selectionBg={uiTheme.codeBlock.selectionBg}
+            selectionFg={uiTheme.codeBlock.selectionText}
+            lineNumberFg={uiTheme.diff.lineNumberFg}
+            lineNumberBg={uiTheme.diff.lineNumberBg}
+            addedBg={uiTheme.diff.addedBg}
+            removedBg={uiTheme.diff.removedBg}
+            contextBg={uiTheme.diff.contextBg}
+            addedContentBg={uiTheme.diff.addedContentBg}
+            removedContentBg={uiTheme.diff.removedContentBg}
+            contextContentBg={uiTheme.diff.contextContentBg}
+            addedSignColor={uiTheme.diff.addedSign}
+            removedSignColor={uiTheme.diff.removedSign}
+            addedLineNumberBg={uiTheme.diff.addedLineNumberBg}
+            removedLineNumberBg={uiTheme.diff.removedLineNumberBg}
+          />
+        ) : (
+          <code
+            content={renderedContent}
+            filetype={codeFiletype}
+            fg={uiTheme.codeBlock.text}
+            syntaxStyle={opencodeMarkdownSyntax}
+            wrapMode="char"
+            conceal={true}
+            drawUnstyledText={true}
+            selectable={true}
+            selectionBg={uiTheme.codeBlock.selectionBg}
+            selectionFg={uiTheme.codeBlock.selectionText}
+          />
+        )}
+      </box>
+      {isTruncated ? (
+        <box marginTop={1} onMouseUp={clickHandler}>
+          <text fg={uiTheme.muted} attributes={uiTheme.typography.note}>
+            {toggleHint}
+          </text>
+        </box>
+      ) : null}
+    </box>
+  );
+};

package/src/components/chat/prompt-card.tsx

@@ -0,0 +1,81 @@
+import {
+  isAudioSelection,
+  isImageSelection,
+  isVideoSelection,
+} from '../../files/attachment-capabilities';
+import { uiTheme } from '../../ui/theme';
+
+type PromptCardProps = {
+  prompt: string;
+  files?: string[];
+  createdAtMs: number;
+  isFirst?: boolean;
+};
+
+const formatTime = (timestamp: number) => {
+  return new Date(timestamp).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+};
+
+export const PromptCard = ({
+  prompt,
+  files = [],
+  createdAtMs,
+  isFirst = false,
+}: PromptCardProps) => {
+  const mediaFiles = files.filter(
+    file =>
+      isImageSelection({ relativePath: file, absolutePath: file, size: 0 }) ||
+      isAudioSelection({ relativePath: file, absolutePath: file, size: 0 }) ||
+      isVideoSelection({ relativePath: file, absolutePath: file, size: 0 })
+  );
+
+  return (
+    <box flexDirection="row" marginTop={isFirst ? 0 : 1} marginBottom={1}>
+      <box width={0.5} backgroundColor={uiTheme.accent} />
+      <box
+        flexGrow={1}
+        backgroundColor={uiTheme.userPromptBg}
+        paddingLeft={2}
+        paddingRight={1}
+        paddingTop={1}
+        paddingBottom={1}
+      >
+        <text
+          fg={uiTheme.userPromptText}
+          attributes={uiTheme.typography.heading}
+          wrapMode="word"
+          selectable={true}
+        >
+          {prompt}
+        </text>
+        {mediaFiles.length > 0 ? (
+          <box paddingTop={1} flexDirection="column">
+            <text fg={uiTheme.muted} attributes={uiTheme.typography.note}>
+              Media files
+            </text>
+            {mediaFiles.map(file => (
+              <text
+                key={file}
+                fg={uiTheme.text}
+                attributes={uiTheme.typography.note}
+                selectable={true}
+              >
+                {file}
+              </text>
+            ))}
+          </box>
+        ) : null}
+        <box paddingTop={1}>
+          <text fg={uiTheme.muted} attributes={uiTheme.typography.note} selectable={true}>
+            {formatTime(createdAtMs)}
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/components/chat/segment-groups.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ReplySegment } from '../../types/chat';
+import { buildReplyRenderItems } from './segment-groups';
+
+describe('buildReplyRenderItems', () => {
+  it('groups tool segments by call id and keeps non-tool segments in place', () => {
+    const segments: ReplySegment[] = [
+      { id: '1:thinking:1', type: 'thinking', content: 'thinking' },
+      {
+        id: '1:tool-use:call_a',
+        type: 'code',
+        content: '# Tool: bash (call_a)\n$ echo a\n',
+        data: { id: 'call_a', function: { name: 'bash', arguments: '{"command":"echo a"}' } },
+      },
+      { id: '1:tool:call_a:stdout', type: 'code', content: 'a\n' },
+      {
+        id: '1:tool-result:call_a',
+        type: 'code',
+        content: '# Result: bash (call_a) success\na\n',
+        data: { result: { success: true, data: { output: 'a' } } },
+      },
+      { id: '1:text:2', type: 'text', content: 'done' },
+    ];
+
+    const items = buildReplyRenderItems(segments);
+    expect(items.map(item => item.type)).toEqual(['segment', 'tool', 'segment']);
+    expect(items[1]?.type === 'tool' ? items[1].group.toolCallId : '').toBe('call_a');
+    expect(items[1]?.type === 'tool' ? items[1].group.streams.length : 0).toBe(1);
+    expect(items[1]?.type === 'tool' ? items[1].group.use?.data : undefined).toEqual({
+      id: 'call_a',
+      function: { name: 'bash', arguments: '{"command":"echo a"}' },
+    });
+    expect(items[1]?.type === 'tool' ? items[1].group.result?.data : undefined).toEqual({
+      result: { success: true, data: { output: 'a' } },
+    });
+  });
+
+  it('starts a new tool group when call id changes', () => {
+    const segments: ReplySegment[] = [
+      { id: '1:tool-use:call_a', type: 'code', content: '# Tool: bash (call_a)\n$ echo a\n' },
+      { id: '1:tool-result:call_a', type: 'code', content: '# Result: bash (call_a) success\na\n' },
+      { id: '1:tool-use:call_b', type: 'code', content: '# Tool: bash (call_b)\n$ echo b\n' },
+      { id: '1:tool-result:call_b', type: 'code', content: '# Result: bash (call_b) success\nb\n' },
+    ];
+
+    const items = buildReplyRenderItems(segments);
+    expect(items.length).toBe(2);
+    expect(items[0]?.type === 'tool' ? items[0].group.toolCallId : '').toBe('call_a');
+    expect(items[1]?.type === 'tool' ? items[1].group.toolCallId : '').toBe('call_b');
+  });
+});