TUI transcript 不支持 Markdown 渲染，agent 响应中的代码块、表格、粗体等丢失格式

[li-xiu-qi]

问题描述

当前 TUI 的 transcript 面板将 agent 返回的文本（通常包含 Markdown 格式）作为纯文本渲染，所有排版信息（代码块、表格、加粗/斜体、列表、链接等）全部丢失。

当前行为

TranscriptEntry 组件 (src/tui/app.tsx:1517-1570) 渲染逻辑：

const TranscriptEntry = React.memo(function TranscriptEntry(input: {
  item: TranscriptItem;
  theme: StepCliTuiThemeColors;
}) {
  const { item } = input;
  const [firstLine = "", ...restLines] =
    item.lines.length > 0 ? item.lines : [""];
  // ...
  return (
    <box flexDirection="column" marginBottom={1}>
      <text fg={input.theme.foreground}>
        <span bg={badgeStyle.backgroundColor} fg={badgeStyle.textColor}>
          {" "} {item.badge} {" "}
        </span>
        <span> {firstLine}</span>
      </text>
      {restLines.map((line, index) => (
        <text key={`${item.id}:${index}`} fg={input.theme.foreground}>
          <span fg={badgeStyle.railColor}>│ </span>
          {line}
        </text>
      ))}
    </box>
  );
});

内容预处理链路 (src/tui/app.tsx:1910-1935)：

function buildTranscriptItems(entries, width, theme) {
  return entries.map((entry) => {
    const body = compactToolTranscriptContent(entry);  // 仅处理 tool 角色截断
    const lines = wrapMultiline(body, Math.max(12, width - 4));  // 纯文本换行
    return { ..., lines };
  });
}

全部使用 <text> + <span> 渲染，无任何 Markdown 解析步骤。

平台能力已具备

@opentui/core v0.1.90 已经内置了完整的 Markdown 渲染能力：

• MarkdownRenderable (@opentui/core/renderables/Markdown.d.ts)
  • 基于 marked 解析 Markdown token
  • 支持 streaming 增量更新 (streaming 属性)
  • 代码块 tree-sitter 语法高亮
  • 表格渲染（含列宽策略、边框样式）
  • 自定义 renderNode 钩子
  • 链接渲染
• <code> 组件 — 带语法高亮的代码展示
• <diff> 组件 — unified/split diff 视图
• 文本修饰符 — <strong>, <em>, <u> 在 <text> 内可用

缺失的功能

Markdown 元素	OpenTUI 能力	当前 TUI
代码块 (```)	MarkdownRenderable + tree-sitter 高亮	❌ 纯文本展示
表格	MarkdownRenderable.tableOptions	❌ 纯文本展示
加粗 / 斜体	<strong> / <em>	❌ 无
链接	MarkdownRenderable 链接渲染	❌ 纯文本 URL
列表 / 标题	MarkdownRenderable 块级渲染	❌ 无层级
内联代码	MarkdownRenderable inline code 样式	❌ 无区分
Streaming	streaming: true 增量渲染	❌ 不支持

建议方案

在 TranscriptEntry 中使用 @opentui/core 的 MarkdownRenderable 替换纯文本渲染：

1. 将 TranscriptItem.lines: string[] 改为 TranscriptItem.content: string（原始 markdown 文本）
2. 在 TranscriptEntry 中使用 <markdown> 组件（如 OpenTUI React 已注册）或直接创建 MarkdownRenderable
3. 为 assistant 角色的消息启用 streaming: true 以实现增量渲染
4. 可配合 SyntaxStyle 自定义代码高亮配色

环境信息

• 项目：stepfun-ai/Step-Realtime-CLI
• @opentui/core 版本：^0.1.90
• @opentui/react 版本：^0.1.90

[ZouR-Ma]

Thanks for opening this!

We've set up a contribution workflow. If anything is missing (repro steps, version, environment, logs), please refile using one of our templates:

https://github.com/stepfun-ai/Step-Realtime-CLI/issues/new/choose

For logs, run with LOG_LEVEL=debug.

If you'd like to fix it yourself, open a PR referencing this issue with Closes #<number>.

See:
https://github.com/stepfun-ai/Step-Realtime-CLI/blob/main/CONTRIBUTING.md

[li-xiu-qi]

Superseded by #39, which implements comprehensive Markdown rendering for the TUI transcript. Closing this in favor of that PR.