niceeval 0.1.1 → 0.1.2

package/src/view/aggregate.ts

@@ -0,0 +1,103 @@
+// 聚合层:把 loader 读到的 summary 揉成榜单行与页面 KPI。纯数据变换,不碰 fs / http。
+// 折叠与格式化口径在 shared/ 与前端共用;这里只产原始值(number / ISO),格式化由前端按 locale 做。
+
+import type { EvalResult, Usage } from "../types.ts";
+import type { LoadedSummary, ScanResult } from "./loader.ts";
+import { evalLevelStats } from "../shared/outcome.ts";
+import { OUTCOME_ORDER, avg, displayExperimentName, fallbackExperimentLabel, sumMaybe } from "../shared/aggregate.ts";
+import type { ViewData, ViewRow } from "./shared/types.ts";
+
+/** 烘焙进 HTML 的页面数据;绝对路径等 server 私有信息在 loader 就没进 summary,这里只挑展示字段。 */
+export function buildViewData(scan: ScanResult): ViewData {
+  const latest = scan.loaded[0]?.summary;
+  const totals = summarizeAll(scan.loaded);
+  return {
+    rows: aggregateRows(scan.loaded),
+    name: latest?.name,
+    lastRunAt: latest?.startedAt,
+    passRate: totals.passRate,
+    resultCount: totals.results,
+    durationMs: totals.durationMs,
+    estimatedCostUSD: totals.cost,
+    skippedRuns: scan.skipped.map((run) => ({
+      dir: run.dir,
+      reason: run.reason,
+      schemaVersion: run.schemaVersion,
+      producerVersion: run.producerVersion,
+      command: run.command,
+      detail: run.detail,
+    })),
+  };
+}
+
+export function aggregateRows(loaded: LoadedSummary[]): ViewRow[] {
+  const groups = new Map<string, EvalResult[]>();
+  const lastRunAt = new Map<string, string>();
+  for (const item of loaded) {
+    for (const result of item.summary.results) {
+      const key = result.experimentId ? `exp|||${result.experimentId}` : `legacy|||${result.agent}|||${result.model ?? ""}`;
+      groups.set(key, [...(groups.get(key) ?? []), result]);
+      const prev = lastRunAt.get(key);
+      if (!prev || item.summary.startedAt > prev) lastRunAt.set(key, item.summary.startedAt);
+    }
+  }
+
+  return Array.from(groups.entries()).map(([key, results]) => {
+    const first = results[0]!;
+    const experimentId = first.experimentId;
+    const cost = sumMaybe(results.map((r) => r.estimatedCostUSD));
+    // 一行 = 一个实验,results 内按 eval id 折叠计票(passed/failed/通过率都是 eval 级)。
+    const stats = evalLevelStats(results, (r) => r.id);
+    return {
+      key,
+      experimentId,
+      experiment: first.experiment,
+      group: experimentGroup(experimentId),
+      label: displayExperimentName(experimentId) ?? fallbackExperimentLabel(first),
+      agent: first.agent,
+      model: first.model,
+      lastRunAt: lastRunAt.get(key),
+      runs: results.length, // 总 attempt 数(详情里作次要信息)
+      evals: stats.evals, // 去重后的 eval 数(成功率分母的口径)
+      passed: stats.passed,
+      failed: stats.failed,
+      errored: stats.errored,
+      skipped: stats.skipped,
+      passRate: stats.passRate,
+      avgDurationMs: avg(results.map((r) => r.durationMs)),
+      usage: sumUsage(results.map((r) => r.usage)),
+      estimatedCostUSD: cost,
+      results: results
+        .slice()
+        .sort((a, b) => OUTCOME_ORDER[a.outcome] - OUTCOME_ORDER[b.outcome] || a.id.localeCompare(b.id)),
+    };
+  });
+}
+
+function summarizeAll(loaded: LoadedSummary[]) {
+  const results = loaded.flatMap((s) => s.summary.results);
+  // 顶部总览同样按 eval 计票:每个(实验, eval)只算一份,跨实验/跨 run 不被 runs 灌票。
+  const groupKey = (r: EvalResult) => (r.experimentId ? `exp|||${r.experimentId}` : `legacy|||${r.agent}|||${r.model ?? ""}`);
+  const stats = evalLevelStats(results, (r) => `${groupKey(r)}|||${r.id}`);
+  return {
+    results: stats.evals,
+    passRate: stats.passRate,
+    durationMs: loaded.reduce((sum, s) => sum + (s.summary.durationMs ?? 0), 0),
+    cost: sumMaybe(loaded.map((s) => s.summary.estimatedCostUSD)),
+  };
+}
+
+function sumUsage(items: Array<Usage | undefined>): Usage {
+  return {
+    inputTokens: items.reduce((n, u) => n + (u?.inputTokens ?? 0), 0),
+    outputTokens: items.reduce((n, u) => n + (u?.outputTokens ?? 0), 0),
+    cacheReadTokens: items.reduce((n, u) => n + (u?.cacheReadTokens ?? 0), 0),
+    cacheWriteTokens: items.reduce((n, u) => n + (u?.cacheWriteTokens ?? 0), 0),
+    requests: items.reduce((n, u) => n + (u?.requests ?? 0), 0),
+  };
+}
+
+function experimentGroup(id: string | undefined): string | undefined {
+  if (!id || !id.includes("/")) return undefined;
+  return id.split("/").slice(0, -1).join("/");
+}

package/src/view/app/App.tsx

@@ -3,6 +3,7 @@ import { detectLocale, makeTranslator, persistLocale, setDocumentLocale } from "
 import type { MessageKey } from "./i18n.ts";
 import type { Locale, LocalizedText, SortKey, SortState, Tab, ViewData, ViewResult, ViewRow } from "./types.ts";
 import { buildGroupMap, compareRows, resultFromUrl } from "./lib/rows.ts";
+import { formatCost, formatDateTime, formatDuration, formatPercent } from "./lib/format.ts";
 import { Metric } from "./components/primitives.tsx";
 import { GroupSelector } from "./components/GroupSelector.tsx";
 import { ExperimentTable } from "./components/ExperimentTable.tsx";
@@ -128,18 +129,38 @@ export function App({ data }: { data: ViewData }) {
           <h1>{localizedText(data.name, locale) || t("hero.title")}</h1>
           <div className="meta">
             <span>
-              <b>{t("hero.lastRun")}</b> {data.lastRun}
+              {/* viewData 只带原始值(ISO / number),这里按当前界面 locale 格式化。 */}
+              <b>{t("hero.lastRun")}</b> {data.lastRunAt ? formatDateTime(data.lastRunAt, locale) : t("hero.noRuns")}
             </span>
           </div>
         </section>
 
         <section className="summary" aria-label="Run summary">
-          <Metric label={t("metric.passRate")} value={data.passRate} />
-          <Metric label={t("metric.evalResults")} value={data.resultCount} />
-          <Metric label={t("metric.duration")} value={data.duration} />
-          <Metric label={t("metric.cost")} value={data.cost} />
+          <Metric label={t("metric.passRate")} value={formatPercent(data.passRate)} />
+          <Metric label={t("metric.evalResults")} value={String(data.resultCount)} />
+          <Metric label={t("metric.duration")} value={formatDuration(data.durationMs)} />
+          <Metric label={t("metric.cost")} value={formatCost(data.estimatedCostUSD)} />
         </section>
 
+        {(data.skippedRuns?.length ?? 0) > 0 && (
+          <section className="incompatible-banner" role="alert">
+            <b>{t("banner.skippedTitle")}</b>
+            <ul>
+              {data.skippedRuns!.map((run) => (
+                <li key={run.dir}>
+                  <span className="ib-dir">{run.dir}</span>
+                  <span className="ib-meta">
+                    {run.reason === "incompatible-version"
+                      ? t("banner.skipped.incompatible", { producer: run.producerVersion ?? "?", schemaVersion: run.schemaVersion })
+                      : t("banner.skipped.malformed", { detail: run.detail ?? "?" })}
+                  </span>
+                  {run.command ? <code>{run.command}</code> : null}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
         <TabsContent value="experiments" id="tab-experiments">
           <div className="section-head">
             <h2>{t("section.experiments")}</h2>

package/src/view/app/components/AttemptModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import type { ArtifactLoadState, T } from "../shared.ts";
 import type { ViewResult } from "../types.ts";
 import { asEvents, asSources } from "../lib/guards.ts";
-import { outcomeClass, outcomeLabel, outcomeOf } from "../lib/outcome.ts";
+import { outcomeClass, outcomeLabel } from "../lib/outcome.ts";
 import { CodeView, NoSourceBody } from "./CodeView.tsx";
 import { LazyArtifact } from "./LazyArtifact.tsx";
 import { Dialog, DialogClose, DialogContent, DialogTitle } from "./ui/dialog.tsx";
@@ -29,7 +29,7 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
     return () => { alive = false; };
   }, [base, result.hasSources, result.hasEvents]);
 
-  const outcome = outcomeOf(result);
+  const outcome = result.outcome;
   const hasCode = Boolean(data.sources?.length);
 
   return (
@@ -58,7 +58,16 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
           ) : data.status !== "loading" ? (
             <NoSourceBody assertions={allAssertions} events={data.events || []} t={t} />
           ) : null}
-          {result.hasTrace && base ? <LazyArtifact type="trace" src={`${base}/trace.json`} t={t} /> : null}
+          {result.hasTrace && base ? (
+            <LazyArtifact type="trace" src={`${base}/trace.json`} t={t} />
+          ) : data.status !== "loading" ? (
+            <div className="mt-3 text-xs text-muted">
+              {t("trace.enableHint")}
+              <a href={t("trace.enableHintUrl")} target="_blank" rel="noreferrer" className="underline">
+                {t("trace.enableHintLink")}
+              </a>
+            </div>
+          ) : null}
         </div>
       </DialogContent>
     </Dialog>

package/src/view/app/components/CodeView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { ChevronRight } from "lucide-react";
+import { AlertCircle, CheckCircle2, ChevronRight, MessageCircle, XCircle } from "lucide-react";
 import type { T } from "../shared.ts";
 import type { Assertion, CodeSource, SourceTurn, TranscriptEvent } from "../types.ts";
 import { TOOL_VERB, highlightTs, indexAsserts, indexTurns, locKey, resultBody, toolPrimaryArg } from "../lib/transcript-data.tsx";
@@ -145,11 +145,15 @@ export function CodeLine({
         <span className="ln">{n}</span>
         <span className="gmark">
           {hasAsserts ? (
-            <span className={`gstat ${status === "pass" ? "good" : status === "warn" ? "warn" : "bad"}`}>
-              {status === "pass" ? "✓" : status === "warn" ? "!" : "✗"}
-            </span>
+            status === "pass" ? (
+              <CheckCircle2 className="gstat good" aria-hidden="true" />
+            ) : status === "warn" ? (
+              <AlertCircle className="gstat warn" aria-hidden="true" />
+            ) : (
+              <XCircle className="gstat bad" aria-hidden="true" />
+            )
           ) : hasReply ? (
-            <ChevronRight className={`gchev${isOpen ? " is-open" : ""}`} aria-hidden="true" />
+            <MessageCircle className="gsend" aria-hidden="true" />
           ) : null}
         </span>
         <code className="ctext">{highlightTs(text)}</code>

package/src/view/app/components/CopyControls.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Check, Copy } from "lucide-react";
 import type { T } from "../shared.ts";
 import type { ViewResult, ViewRow } from "../types.ts";
-import { failingAssertions, outcomeOf, reasonFor } from "../lib/outcome.ts";
+import { failingAssertions, reasonFor } from "../lib/outcome.ts";
 
 export function CopyReason({ text, t }: { text: string; t: T }) {
   const [copied, setCopied] = useState(false);
@@ -29,13 +29,13 @@ export function CopyAllErrors({ rows, t }: { rows: ViewRow[]; t: T }) {
   const errorEntries = rows.flatMap((row: ViewRow) =>
     (row.results ?? [])
       .filter((r: ViewResult) => {
-        const outcome = outcomeOf(r);
-        return outcome === "failed" || outcome === "errored";
+        return r.outcome === "failed" || r.outcome === "errored";
       })
       .map((r: ViewResult) => {
         const failedAssertions = failingAssertions(r);
         const reason = reasonFor(r, failedAssertions);
-        const traceBase = r.artifactAbsBase || r.artifactBase;
+        // 静态 HTML 里只有相对 view 根的工件路径;宿主机绝对路径不再进 viewData。
+        const traceBase = r.artifactBase;
         const tracePath = r.hasTrace && traceBase ? `${traceBase}/trace.json` : null;
         return { experimentName: row.label, evalId: r.id, reason, tracePath };
       })

package/src/view/app/components/ExperimentTable.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { ChevronRight } from "lucide-react";
 import type { OpenModal, T } from "../shared.ts";
 import type { Assertion, SortKey, SortState, ViewResult, ViewRow } from "../types.ts";
-import { EvalGroup, failingAssertions, groupByEval, outcomeClass, outcomeLabel, outcomeOf, outcomeSummary, reasonFor, scoresSummary } from "../lib/outcome.ts";
+import { EvalGroup, failingAssertions, groupByEval, outcomeClass, outcomeLabel, outcomeSummary, reasonFor, scoresSummary } from "../lib/outcome.ts";
 import { configChips } from "../lib/rows.ts";
 import { formatClock, formatCost, formatDateTime, formatDuration, formatPercent, formatTokens, totalTokens } from "../lib/format.ts";
 import { Kpi, SortHeader } from "./primitives.tsx";
@@ -91,8 +91,8 @@ export function ExperimentRow({ row, open, onToggle, t }: { row: ViewRow; open:
 export function ExperimentDetail({ row, openModal, t }: { row: ViewRow; openModal: OpenModal; t: T }) {
   const totalDuration = (row.results ?? []).reduce((sum: number, r: ViewResult) => sum + (r.durationMs || 0), 0);
   const sampleResult =
-    row.results?.find((r: ViewResult) => outcomeOf(r) === "errored") ||
-    row.results?.find((r: ViewResult) => outcomeOf(r) === "failed") ||
+    row.results?.find((r: ViewResult) => r.outcome === "errored") ||
+    row.results?.find((r: ViewResult) => r.outcome === "failed") ||
     row.results?.[0] ||
     {};
   const evalGroups = groupByEval(row.results ?? []).sort((a, b) => a.id.localeCompare(b.id));
@@ -158,7 +158,7 @@ export function EvalRow({ group, openModal, t }: { group: EvalGroup; openModal:
   }
 
   // 代表轮:取与 eval 判决相同的第一条,用它的原因/分数做折叠行摘要。
-  const rep = group.attempts.find((a) => outcomeOf(a) === group.outcome) ?? group.attempts[0]!;
+  const rep = group.attempts.find((a) => a.outcome === group.outcome) ?? group.attempts[0]!;
   const gates = failingAssertions(rep);
   const reason = reasonFor(rep, gates) || (group.outcome === "passed" ? scoresSummary(rep.assertions || []) : "");
   const totalDuration = group.attempts.reduce((s, a) => s + (a.durationMs || 0), 0);
@@ -207,7 +207,7 @@ export function EvalRow({ group, openModal, t }: { group: EvalGroup; openModal:
 }
 
 export function Attempt({ result, totalRuns, openModal, t }: { result: ViewResult; totalRuns: number; openModal: OpenModal; t: T }) {
-  const outcome = outcomeOf(result);
+  const outcome = result.outcome;
   const gates = failingAssertions(result);
   const reason = reasonFor(result, gates);
   const allAssertions = result.assertions || [];

package/src/view/app/i18n.ts

@@ -1,4 +1,7 @@
-import type { Locale } from "./types.ts";
+// view 前端 i18n:内核(插值/归一)在 src/i18n/core.ts;这里只注入
+// localStorage + navigator 的 locale 来源与 en 默认值。字典与 CLI 侧分开维护。
+
+import { interpolate, normalizeLocale, type Locale, type Vars } from "../../i18n/core.ts";
 
 export type MessageKey =
   | "app.title"
@@ -8,6 +11,7 @@ export type MessageKey =
   | "nav.traces"
   | "hero.title"
   | "hero.lastRun"
+  | "hero.noRuns"
   | "metric.passRate"
   | "metric.evalResults"
   | "metric.duration"
@@ -73,6 +77,9 @@ export type MessageKey =
   | "trace.total"
   | "trace.spans"
   | "trace.clickDetails"
+  | "trace.enableHint"
+  | "trace.enableHintLink"
+  | "trace.enableHintUrl"
   | "transcript.noEvents"
   | "transcript.user"
   | "transcript.assistant"
@@ -98,7 +105,10 @@ export type MessageKey =
   | "outcome.passed"
   | "outcome.failed"
   | "outcome.errored"
-  | "outcome.skipped";
+  | "outcome.skipped"
+  | "banner.skippedTitle"
+  | "banner.skipped.incompatible"
+  | "banner.skipped.malformed";
 
 type Dictionary = Record<MessageKey, string>;
 
@@ -111,6 +121,7 @@ const dictionaries: Record<Locale, Dictionary> = {
     "nav.traces": "Traces",
     "hero.title": "Eval Run Results",
     "hero.lastRun": "Last run:",
+    "hero.noRuns": "No runs yet",
     "metric.passRate": "Pass Rate",
     "metric.evalResults": "Eval Results",
     "metric.duration": "Duration",
@@ -176,6 +187,9 @@ const dictionaries: Record<Locale, Dictionary> = {
     "trace.total": "total",
     "trace.spans": "spans",
     "trace.clickDetails": "click a row for details",
+    "trace.enableHint": "No trace for this run. Wire up OTel to get a call waterfall — see the ",
+    "trace.enableHintLink": "OTel guide",
+    "trace.enableHintUrl": "https://niceeval.com/docs/guides/connect-otel",
     "transcript.noEvents": "no events",
     "transcript.user": "user",
     "transcript.assistant": "assistant",
@@ -197,11 +211,14 @@ const dictionaries: Record<Locale, Dictionary> = {
     "assert.pass": "pass",
     "assert.fail": "fail",
     "assert.soft": "soft",
-    "assert.evidence": "What the judge saw",
+    "assert.evidence": "What was checked",
     "outcome.passed": "passed",
     "outcome.failed": "failed",
     "outcome.errored": "errors",
     "outcome.skipped": "skipped",
+    "banner.skippedTitle": "Some runs could not be loaded and are not shown here:",
+    "banner.skipped.incompatible": "written by niceeval {{producer}} (schemaVersion {{schemaVersion}}) — view it with the command on the right",
+    "banner.skipped.malformed": "unreadable report ({{detail}}) — it may be corrupted; re-run the eval or delete this run directory",
   },
   "zh-CN": {
     "app.title": "niceeval 实验查看器",
@@ -211,6 +228,7 @@ const dictionaries: Record<Locale, Dictionary> = {
     "nav.traces": "追踪",
     "hero.title": "Eval 运行结果",
     "hero.lastRun": "最近运行:",
+    "hero.noRuns": "还没有运行",
     "metric.passRate": "通过率",
     "metric.evalResults": "Eval 结果",
     "metric.duration": "耗时",
@@ -276,6 +294,9 @@ const dictionaries: Record<Locale, Dictionary> = {
     "trace.total": "总计",
     "trace.spans": "spans",
     "trace.clickDetails": "点击行查看详情",
+    "trace.enableHint": "这次运行没有 trace。接入 OTel 才有调用瀑布图——看",
+    "trace.enableHintLink": "OTel 接入指南",
+    "trace.enableHintUrl": "https://niceeval.com/docs/zh/guides/connect-otel",
     "transcript.noEvents": "没有事件",
     "transcript.user": "user",
     "transcript.assistant": "assistant",
@@ -297,11 +318,14 @@ const dictionaries: Record<Locale, Dictionary> = {
     "assert.pass": "通过",
     "assert.fail": "失败",
     "assert.soft": "soft",
-    "assert.evidence": "裁判看到的材料",
+    "assert.evidence": "实际被检查的内容",
     "outcome.passed": "通过",
     "outcome.failed": "失败",
     "outcome.errored": "错误",
     "outcome.skipped": "跳过",
+    "banner.skippedTitle": "以下 run 读取失败,此处不展示:",
+    "banner.skipped.incompatible": "由 niceeval {{producer}} 写入(schemaVersion {{schemaVersion}})—— 用右侧命令查看",
+    "banner.skipped.malformed": "报告读不了({{detail}})—— 可能已损坏;重跑该 eval 或删除这个 run 目录",
   },
 };
 
@@ -311,7 +335,7 @@ export function detectLocale(): Locale {
   const stored = readStoredLocale();
   if (stored) return stored;
   const candidates = typeof navigator === "undefined" ? [] : [navigator.language, ...(navigator.languages ?? [])];
-  return candidates.some((value) => value.toLowerCase().startsWith("zh")) ? "zh-CN" : "en";
+  return candidates.some((value) => normalizeLocale(value) === "zh-CN") ? "zh-CN" : "en";
 }
 
 export function persistLocale(locale: Locale): void {
@@ -327,8 +351,8 @@ export function setDocumentLocale(locale: Locale): void {
   document.title = dictionaries[locale]["app.title"];
 }
 
-export function makeTranslator(locale: Locale): (key: MessageKey) => string {
-  return (key) => dictionaries[locale][key];
+export function makeTranslator(locale: Locale): (key: MessageKey, vars?: Vars) => string {
+  return (key, vars) => interpolate(dictionaries[locale][key], vars);
 }
 
 function readStoredLocale(): Locale | undefined {

package/src/view/app/lib/format.ts

@@ -1,5 +1,8 @@
 import type { ViewUsage } from "../types.ts";
 
+// 通过率/耗时/成本的展示口径与 server 共用一份实现,见 src/shared/format.ts(CLI 表格同用)。
+export { formatCost, formatDuration, formatPercent } from "../../../shared/format.ts";
+
 export function prettyJson(value: unknown): string {
   if (typeof value === "string") return value;
   try {
@@ -10,7 +13,17 @@ export function prettyJson(value: unknown): string {
 }
 
 export function previewText(value: string): string {
-  return String(value).split("\n").find((line) => line.trim()) || "";
+  const str = String(value);
+  const trimmed = str.trim();
+  // object 结果会被 prettyJson 成多行,只取首行会剩一个 "{";JSON 压回单行再做预览。
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try {
+      return JSON.stringify(JSON.parse(trimmed));
+    } catch {
+      // 不是合法 JSON,按普通多行文本取首个非空行
+    }
+  }
+  return str.split("\n").find((line) => line.trim()) || "";
 }
 
 export function truncate(value: unknown, n: number): string {
@@ -28,24 +41,12 @@ export function totalTokens(usage?: ViewUsage): number {
   return (usage?.inputTokens || 0) + (usage?.outputTokens || 0) + (usage?.cacheReadTokens || 0) + (usage?.cacheWriteTokens || 0);
 }
 
-export function formatPercent(value?: number): string {
-  if (typeof value !== "number" || !Number.isFinite(value)) return "0%";
-  return Math.round(value * 100) + "%";
-}
-
 /** 断言 / judge 分数本就是 0–1,直接展示原值(去掉末尾零),不转百分比。pass-rate 之类的「比率」仍用 formatPercent。 */
 export function formatScore(value?: number): string {
   if (typeof value !== "number" || !Number.isFinite(value)) return "0";
   return String(Number(value.toFixed(2)));
 }
 
-export function formatDuration(ms?: number): string {
-  if (typeof ms !== "number" || !Number.isFinite(ms) || ms <= 0) return "0ms";
-  if (ms >= 60000) return (ms / 60000).toFixed(1) + "m";
-  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
-  return Math.round(ms) + "ms";
-}
-
 export function formatTokens(value: number): string {
   if (!Number.isFinite(value) || value <= 0) return "0";
   if (value >= 1000000) return (value / 1000000).toFixed(2) + "M";
@@ -53,16 +54,12 @@ export function formatTokens(value: number): string {
   return String(Math.round(value));
 }
 
-export function formatCost(value?: number): string {
-  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return "$0";
-  return "$" + value.toFixed(value < 1 ? 3 : 2);
-}
-
-export function formatDateTime(iso?: string): string {
+/** 日期按 locale 格式化;不传 locale 时跟随浏览器设置。server 不再预格式化日期,都走这里。 */
+export function formatDateTime(iso?: string, locale?: string): string {
   if (!iso) return "-";
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return "-";
-  return date.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  return date.toLocaleString(locale ?? [], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 
 export function formatClock(iso?: string): string {

package/src/view/app/lib/outcome.ts

@@ -2,22 +2,10 @@ import type { Assertion, Outcome, ViewResult, ViewRow } from "../types.ts";
 import type { T } from "../shared.ts";
 import { formatScore } from "./format.ts";
 
-export function outcomeOf(result: ViewResult): Outcome {
-  return result.outcome;
-}
+// 折叠口径与 server 聚合共用一份实现,见 src/shared/outcome.ts。
+import { foldEvalOutcome } from "../../../shared/outcome.ts";
 
-/**
- * 同一个 eval 的多轮 attempt 折叠成单一判决:任一轮通过 → 通过(对齐 earlyExit「先过一次即停」),
- * 否则按 failed > errored > skipped 取最严重的。后端 view/index.ts:foldEvalOutcome 用同样口径,
- * 两边必须一致,否则折叠行的状态会和 KPI / 成功率对不上。
- */
-export function foldEvalOutcome(attempts: ViewResult[]): Outcome {
-  const outs = attempts.map(outcomeOf);
-  if (outs.some((o) => o === "passed")) return "passed";
-  if (outs.some((o) => o === "failed")) return "failed";
-  if (outs.some((o) => o === "errored")) return "errored";
-  return "skipped";
-}
+export { foldEvalOutcome };
 
 export interface EvalGroup {
   id: string;
@@ -41,7 +29,7 @@ export function groupByEval(results: ViewResult[]): EvalGroup[] {
       experimentId: sorted[0]!.experimentId,
       outcome: foldEvalOutcome(sorted),
       attempts: sorted,
-      passedAttempts: sorted.filter((a) => outcomeOf(a) === "passed").length,
+      passedAttempts: sorted.filter((a) => a.outcome === "passed").length,
     };
   });
 }

package/src/view/app/main.tsx

@@ -5,11 +5,9 @@ import "../styles.css";
 
 const initialData: ViewData = window.__NICEEVAL_VIEW_DATA__ ?? {
   rows: [],
-  lastRun: "No runs yet",
-  passRate: "0%",
-  resultCount: "0",
-  duration: "0ms",
-  cost: "$0",
+  passRate: 0,
+  resultCount: 0,
+  durationMs: 0,
 };
 
 const rootEl = document.getElementById("root");

package/src/view/app/pages/RunsPage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import type { RowRun, T } from "../shared.ts";
 import type { ViewResult, ViewRow } from "../types.ts";
-import { outcomeClass, outcomeLabel, outcomeOf } from "../lib/outcome.ts";
+import { outcomeClass, outcomeLabel } from "../lib/outcome.ts";
 import { formatCost, formatDateTime, formatDuration, formatTokens, totalTokens } from "../lib/format.ts";
 
 export function RunsView({ rows, t }: { rows: ViewRow[]; t: T }) {
@@ -50,7 +50,7 @@ export function RunsView({ rows, t }: { rows: ViewRow[]; t: T }) {
             <tbody>
               {filtered.length ? (
                 filtered.map((r: RowRun) => {
-                  const outcome = outcomeOf(r);
+                  const outcome = r.outcome;
                   return (
                     <tr key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
                       <td>

package/src/view/app/pages/TracesPage.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { RowRun, T } from "../shared.ts";
 import type { ViewResult, ViewRow } from "../types.ts";
-import { outcomeClass, outcomeLabel, outcomeOf } from "../lib/outcome.ts";
+import { outcomeClass, outcomeLabel } from "../lib/outcome.ts";
 import { formatDuration } from "../lib/format.ts";
 import { LazyArtifact } from "../components/LazyArtifact.tsx";
 
@@ -20,7 +20,7 @@ export function TracesView({ rows, t }: { rows: ViewRow[]; t: T }) {
         <div className="empty">{t("empty.traces")}</div>
       ) : (
         traceable.map((r: RowRun) => {
-          const outcome = outcomeOf(r);
+          const outcome = r.outcome;
           return (
             <div className="traces-entry" key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
               <div className="traces-entry-head">

package/src/view/app/shared.ts

@@ -1,7 +1,8 @@
+import type { Vars } from "../../i18n/core.ts";
 import type { MessageKey } from "./i18n.ts";
 import type { CodeSource, TranscriptEvent, ViewJson, ViewResult } from "./types.ts";
 
-export type T = (key: MessageKey) => string;
+export type T = (key: MessageKey, vars?: Vars) => string;
 export type OpenModal = (result: ViewResult) => void;
 export type ArtifactLoadState =
   | { sources: CodeSource[] | null; events: TranscriptEvent[] | null; status: "loading" | "ready" | "none" };

package/src/view/app/types.ts

@@ -9,10 +9,12 @@ import type {
   TraceSpan,
   Usage,
 } from "../../types.ts";
+import type { ViewData } from "../shared/types.ts";
 
 export type { LocalizedText };
-
-export type Locale = "en" | "zh-CN";
+// Locale 只在 i18n 内核声明一次;榜单行 / 页面数据形状与 server 共用 shared/types.ts 的声明。
+export type { Locale } from "../../i18n/core.ts";
+export type { SkippedRunNotice, ViewData, ViewRow } from "../shared/types.ts";
 
 export type Tab = "experiments" | "runs" | "traces";
 export type SortKey = "experiment" | "model" | "agent" | "avgDurationMs" | "passRate" | "tokens" | "cost";
@@ -23,50 +25,11 @@ export interface SortState {
   dir: SortDir;
 }
 
-export interface ViewRow {
-  key: string;
-  experimentId?: string;
-  experiment?: EvalResult["experiment"];
-  group?: string;
-  label: string;
-  agent: string;
-  model?: string;
-  runs: number;
-  evals: number;
-  passed: number;
-  failed: number;
-  errored: number;
-  skipped: number;
-  scored?: number;
-  passRate: number;
-  avgDurationMs: number;
-  usage: Usage;
-  estimatedCostUSD?: number;
-  lastRunAt?: string;
-  results: ViewResult[];
-}
-
-export type ViewResult = EvalResult & {
-  artifactBase?: string;
-  artifactAbsBase?: string;
-  hasEvents?: boolean;
-  hasTrace?: boolean;
-  hasSources?: boolean;
-};
+/** 前端拿到的单条 attempt 结果就是瘦身后的 EvalResult(artifactBase 由 loader 注入)。 */
+export type ViewResult = EvalResult;
 
 export type Assertion = AssertionResult;
 
-export interface ViewData {
-  rows?: ViewRow[];
-  /** 项目名(来自 config.name);hero 标题,可按 locale 多语言。 */
-  name?: LocalizedText;
-  lastRun: string;
-  passRate: string;
-  resultCount: string;
-  duration: string;
-  cost: string;
-}
-
 export type Outcome = "passed" | "failed" | "errored" | "skipped" | string;
 
 export interface SourceTurn {