fix(desktop): 模型输出渲染图表 + Markdown 支持表格/代码围栏;ReAct 步数提至可配 12

针对运行页输出的两个渲染缺口 + 一个节点报错:
- 图表:模型输出走 chart 块分段渲染(文本 Markdown,```chart 块用 ChartView 出图),
  不再把图表 spec 显示成原始代码。
- 表格:轻量 Markdown 组件原本不支持 GFM 表格(| … | 显示成原始竖线)与 ``` 围栏代码,
  现补上:表格解析成 <table>、围栏渲染成 <pre>。
- ReAct 步数:reactMaxStep 由常量 8 改 env 可配(REACT_MAX_STEP,默认 12)。研究型任务
  (搜索→抓取→推理多轮)8 步偏紧易触顶报 exceeds max steps;提到 12 覆盖多数。

tsc+vite 通过,dispatcher build/vet 绿;wails 重启加载。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-06-26 17:33:58 +08:00
parent 101d3f9bc9
commit 594be6a317
3 changed files with 84 additions and 11 deletions
@@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { Activity, FileText, History, Wrench } from "lucide-react";
import { ExecTrace } from "../components/ExecTrace";
import { Markdown } from "../components/Markdown";
import { ChartView } from "../components/ChartView";
import { extractChartBlocks, hasChart } from "../lib/chartspec";
import { deriveNodes, emptyRun, type RunState } from "../lib/run";
import { listRuns, taskEval, streamExec, streamTokens, type RunSummary, type EvalResult } from "../lib/api";
import { Tabs, Panel, Dot, Badge, EmptyState, cn, type TabDef } from "../ui";
@@ -141,7 +143,7 @@ export function RunsView({ run }: { run: RunState }) {
{/* 右:模型输出(Markdown,固定面板,与之前一致) */}
<Panel title="模型输出" icon={FileText}>
{cur.output ? (
<Markdown text={cur.output} className="text-sm" />
<OutputView output={cur.output} />
) : (
<EmptyState icon={Activity} title="尚无输出" desc="选择一次运行查看其模型输出;或发起新运行,token 在此流式呈现。" />
)}
@@ -151,6 +153,22 @@ export function RunsView({ run }: { run: RunState }) {
);
}
// OutputView:模型输出 = Markdown 渲染;含 ```chart 块时分段(文本走 Markdown,图表走 ChartView)。
function OutputView({ output }: { output: string }) {
if (!hasChart(output)) return <Markdown text={output} className="text-sm" />;
return (
<div className="text-sm">
{extractChartBlocks(output).map((seg, i) =>
seg.kind === "chart" ? (
<ChartView key={i} spec={seg.spec} />
) : (
seg.text.trim() && <Markdown key={i} text={seg.text} className="text-sm" />
),
)}
</div>
);
}
// ToolCalls:从执行事件筛出工具调用节点,逐条展示入参 → 产出 + 耗时/状态。
function ToolCalls({ run }: { run: RunState }) {
const tools = deriveNodes(run.exec).filter((n) => n.kind === "tool");