niceeval 0.1.0

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

@@ -0,0 +1,130 @@
+import type { T, ToolBlockCall } from "../shared.ts";
+import type { ToolResultEvent, TranscriptEvent } from "../types.ts";
+import { TOOL_VERB, resultBody, toolPrimaryArg } from "../lib/transcript-data.tsx";
+import { prettyJson, previewText, truncate } from "../lib/format.ts";
+
+export function Transcript({ events, t }: { events: TranscriptEvent[]; t: T }) {
+  if (!Array.isArray(events) || !events.length) return <div className="trace-span-meta">{t("transcript.noEvents")}</div>;
+  const resultByCall = new Map<string, ToolResultEvent>();
+  for (const event of events) {
+    if (event.type === "action.result" || event.type === "subagent.completed") resultByCall.set(event.callId, event);
+  }
+  const pairedResult = new Set<string>();
+  return (
+    <div className="transcript">
+      {events.map((event, index) => {
+        switch (event.type) {
+          case "message":
+            return <MessageBlock event={event} t={t} key={index} />;
+          case "thinking":
+            return <ThinkBlock event={event} t={t} key={index} />;
+          case "action.called": {
+            const result = resultByCall.get(event.callId);
+            if (result) pairedResult.add(event.callId);
+            return <ToolBlock call={event} result={result} t={t} key={index} />;
+          }
+          case "subagent.called": {
+            const result = resultByCall.get(event.callId);
+            if (result) pairedResult.add(event.callId);
+            return (
+              <ToolBlock
+                call={{ tool: "agent_task", name: event.name, input: { description: event.name, ...(event.remoteUrl ? { remoteUrl: event.remoteUrl } : {}) } }}
+                result={result}
+                t={t}
+                key={index}
+              />
+            );
+          }
+          case "action.result":
+          case "subagent.completed":
+            return pairedResult.has(event.callId) ? null : (
+              <ToolBlock call={{ tool: "unknown", name: "result", input: null }} result={event} t={t} key={index} />
+            );
+          case "input.requested":
+            return <InputBlock event={event} t={t} key={index} />;
+          case "compaction":
+            return (
+              <div className="ts-compaction" key={index}>
+                {t("transcript.contextCompacted")}{event.reason ? " · " + event.reason : ""}
+              </div>
+            );
+          case "error":
+            return (
+              <div className="ts-error" key={index}>
+                ! {event.message || "error"}
+              </div>
+            );
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+
+export function MessageBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "message" }>; t: T }) {
+  const who = event.role === "assistant" ? "assistant" : "user";
+  return (
+    <div className={`ts-msg ts-${who}`}>
+      <span className="ts-role">{who === "assistant" ? t("transcript.assistant") : t("transcript.user")}</span>
+      <div className="ts-text">{event.text || ""}</div>
+    </div>
+  );
+}
+
+export function ThinkBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "thinking" }>; t: T }) {
+  return (
+    <details className="ts-think">
+      <summary>{t("transcript.thinking")}</summary>
+      <div className="ts-think-text">{event.text || ""}</div>
+    </details>
+  );
+}
+
+export function InputBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "input.requested" }>; t: T }) {
+  const request = event.request || {};
+  const opts = (request.options || []).map((o: { id: string; label?: string }) => o.label || o.id).filter(Boolean).join("  /  ");
+  const body = (request.prompt || t("transcript.awaitingInput")) + (opts ? "\n[ " + opts + " ]" : "");
+  return (
+    <div className="ts-msg ts-input">
+      <span className="ts-role">{t("transcript.inputRequested")}</span>
+      <div className="ts-text">{body}</div>
+    </div>
+  );
+}
+
+export function ToolBlock({ call, result, t }: { call: ToolBlockCall; result?: ToolResultEvent; t: T }) {
+  const verb = (call.tool ? TOOL_VERB[call.tool] : undefined) || call.name || call.tool || "tool";
+  const arg = toolPrimaryArg(call);
+  const label = arg ? `${verb}(${arg})` : verb;
+  const status = result ? result.status : "pending";
+  const dot = status === "failed" ? "bad" : status === "rejected" ? "warn" : status === "pending" ? "pending" : "good";
+  const inputStr = call.input == null ? "" : prettyJson(call.input);
+  const outBody = result ? resultBody(result.output) : "";
+  const preview = result ? previewText(outBody) : t("transcript.running");
+  return (
+    <details className="ts-tool-d">
+      <summary className="ts-row">
+        <span className={`ts-dot ${dot}`} />
+        <span className="ts-tool" title={label}>
+          {label}
+        </span>
+        <span className="ts-preview">{truncate(preview, 140)}</span>
+      </summary>
+      <div className="ts-body">
+        {inputStr ? (
+          <div className="ts-field">
+            <span className="ts-k">{t("transcript.input")}</span>
+            <pre className="attr-pre">{truncate(inputStr, 4000)}</pre>
+          </div>
+        ) : null}
+        {result ? (
+          <div className="ts-field">
+            <span className="ts-k">{t("transcript.output")}{result.status && result.status !== "completed" ? " · " + result.status : ""}</span>
+            <pre className="attr-pre">{outBody ? truncate(outBody, 8000) : <span className="reason-empty">{t("transcript.empty")}</span>}</pre>
+          </div>
+        ) : null}
+      </div>
+    </details>
+  );
+}

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import type { SortKey, SortState } from "../types.ts";
+
+export function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="metric">
+      <div className="label">{label}</div>
+      <div className="value">{value}</div>
+    </div>
+  );
+}
+
+export function SortHeader({
+  name,
+  sortKey,
+  sort,
+  onSort,
+}: {
+  name: string;
+  sortKey: SortKey;
+  sort: SortState;
+  onSort: (key: SortKey) => void;
+}) {
+  const sorted = sort.key === sortKey ? (sort.dir === 1 ? "asc" : "desc") : undefined;
+  return (
+    <th>
+      <button data-sorted={sorted} onClick={() => onSort(sortKey)}>
+        {name}
+      </button>
+    </th>
+  );
+}
+
+export function Kpi({ label, value, className = "", title }: { label: string; value: ReactNode; className?: string; title?: string }) {
+  return (
+    <div className="detail-kpi">
+      <span>{label}</span>
+      <b className={className} title={title}>
+        {value}
+      </b>
+    </div>
+  );
+}

package/src/view/app/components/ui/badge.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn.ts";
+
+/**
+ * 状态小标签:边框 + 浅底都取自当前文字色,tone(.good/.bad/.warn/.infra-err)决定颜色。
+ * 取代旧的 .modal-outcome / 内联状态 chip。
+ */
+export function Badge({ tone, className, children }: { tone?: string; className?: string; children: ReactNode }) {
+  return (
+    <span
+      className={cn(
+        "inline-block w-fit rounded-[5px] border border-current bg-current/10 px-[7px] py-px",
+        "text-[10px] font-bold uppercase tracking-[0.05em]",
+        tone,
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/view/app/components/ui/dialog.tsx

@@ -0,0 +1,34 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/cn.ts";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogTitle = DialogPrimitive.Title;
+
+/**
+ * Radix Dialog 内容容器:接管 portal / 焦点陷阱 / Esc 关闭 / 背景滚动锁 / 点遮罩关闭 ——
+ * 这些原本在 AttemptModal 里手搓(keydown + documentElement.overflow + stopPropagation),现在交给 Radix。
+ */
+export function DialogContent({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-[3px]" />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[200] flex max-h-[min(86vh,820px)] w-[min(960px,calc(100vw-48px))]",
+          "-translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-line-strong",
+          "bg-panel shadow-[0_20px_60px_rgba(0,0,0,0.45)] focus:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}

package/src/view/app/components/ui/tabs.tsx

@@ -0,0 +1,30 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/cn.ts";
+
+export const Tabs = TabsPrimitive.Root;
+export const TabsContent = TabsPrimitive.Content;
+
+/** 顶部导航,改用 Radix Tabs(键盘左右切换 + role=tablist/aria-selected);样式 = 原 .nav。 */
+export function TabsList({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn("flex items-center gap-[22px] text-sm text-muted max-[760px]:hidden", className)}
+      {...props}
+    />
+  );
+}
+
+/** 单个 tab 触发器;样式 = 原 .nav-tab,active 态走 data-state 而非 .is-active。 */
+export function TabsTrigger({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "cursor-pointer border-none bg-transparent p-0 font-[inherit] text-sm text-muted transition-colors",
+        "hover:text-text data-[state=active]:font-[560] data-[state=active]:text-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/view/app/i18n.ts

@@ -0,0 +1,341 @@
+import type { Locale } from "./types.ts";
+
+export type MessageKey =
+  | "app.title"
+  | "nav.label"
+  | "nav.experiments"
+  | "nav.runs"
+  | "nav.traces"
+  | "hero.title"
+  | "hero.lastRun"
+  | "metric.passRate"
+  | "metric.evalResults"
+  | "metric.duration"
+  | "metric.cost"
+  | "section.experiments"
+  | "section.individualRuns"
+  | "section.traces"
+  | "search.experiments"
+  | "search.runs"
+  | "empty.summary"
+  | "empty.individualRuns"
+  | "empty.runsFilter"
+  | "empty.traces"
+  | "table.experiment"
+  | "table.model"
+  | "table.agent"
+  | "table.avgDuration"
+  | "table.successRate"
+  | "table.tokens"
+  | "table.estCost"
+  | "table.outcomes"
+  | "table.evalId"
+  | "table.outcome"
+  | "table.ranAt"
+  | "detail.evalResult"
+  | "detail.evalResults"
+  | "detail.attempts"
+  | "detail.evals"
+  | "detail.runs"
+  | "detail.runsUnit"
+  | "detail.passed"
+  | "detail.failed"
+  | "detail.errored"
+  | "detail.totalTime"
+  | "detail.totalCost"
+  | "detail.ran"
+  | "detail.evaluationAttempts"
+  | "detail.status"
+  | "detail.eval"
+  | "detail.reason"
+  | "detail.time"
+  | "detail.run"
+  | "detail.rawSample"
+  | "detail.rawNote"
+  | "config.experiment"
+  | "config.flagsNone"
+  | "config.default"
+  | "config.none"
+  | "config.notApplicable"
+  | "status.pass"
+  | "status.fail"
+  | "status.error"
+  | "status.skipped"
+  | "action.close"
+  | "action.copyReason"
+  | "action.copyErrors"
+  | "action.copied"
+  | "trace.loading"
+  | "trace.loadFailed"
+  | "trace.transcript"
+  | "trace.timing"
+  | "trace.noSpans"
+  | "trace.total"
+  | "trace.spans"
+  | "trace.clickDetails"
+  | "transcript.noEvents"
+  | "transcript.user"
+  | "transcript.assistant"
+  | "transcript.thinking"
+  | "transcript.inputRequested"
+  | "transcript.awaitingInput"
+  | "transcript.contextCompacted"
+  | "transcript.running"
+  | "transcript.input"
+  | "transcript.output"
+  | "transcript.empty"
+  | "code.otherAssertions"
+  | "code.noReply"
+  | "code.reply"
+  | "code.hide"
+  | "code.checks"
+  | "code.conversation"
+  | "code.noSource"
+  | "assert.pass"
+  | "assert.fail"
+  | "assert.soft"
+  | "assert.evidence"
+  | "outcome.passed"
+  | "outcome.failed"
+  | "outcome.errored"
+  | "outcome.skipped";
+
+type Dictionary = Record<MessageKey, string>;
+
+const dictionaries: Record<Locale, Dictionary> = {
+  en: {
+    "app.title": "niceeval experiment view",
+    "nav.label": "Report",
+    "nav.experiments": "Experiments",
+    "nav.runs": "Runs",
+    "nav.traces": "Traces",
+    "hero.title": "Eval Run Results",
+    "hero.lastRun": "Last run:",
+    "metric.passRate": "Pass Rate",
+    "metric.evalResults": "Eval Results",
+    "metric.duration": "Duration",
+    "metric.cost": "Estimated Cost",
+    "section.experiments": "Experiments",
+    "section.individualRuns": "Individual Runs",
+    "section.traces": "Traces",
+    "search.experiments": "Filter experiment, agent, model, or eval...",
+    "search.runs": "Filter eval ID or experiment...",
+    "empty.summary": "No summary.json files found. Run niceeval or pass niceeval view path/to/summary.json.",
+    "empty.individualRuns": "No individual runs found.",
+    "empty.runsFilter": "No results match the filter.",
+    "empty.traces": "No traces available. Traces are collected during eval runs when artifacts are saved.",
+    "table.experiment": "Experiment",
+    "table.model": "Model",
+    "table.agent": "Agent",
+    "table.avgDuration": "Avg Duration",
+    "table.successRate": "Success Rate",
+    "table.tokens": "Tokens",
+    "table.estCost": "Est. Cost",
+    "table.outcomes": "Outcomes",
+    "table.evalId": "Eval ID",
+    "table.outcome": "Outcome",
+    "table.ranAt": "Ran At",
+    "detail.evalResult": "eval",
+    "detail.evalResults": "evals",
+    "detail.attempts": "Attempts",
+    "detail.evals": "Evals",
+    "detail.runs": "Runs",
+    "detail.runsUnit": "runs",
+    "detail.passed": "Passed",
+    "detail.failed": "Failed",
+    "detail.errored": "Errored",
+    "detail.totalTime": "Total Time",
+    "detail.totalCost": "Total Cost",
+    "detail.ran": "Ran",
+    "detail.evaluationAttempts": "Evals",
+    "detail.status": "Status",
+    "detail.eval": "Eval",
+    "detail.reason": "Reason",
+    "detail.time": "Time",
+    "detail.run": "Run",
+    "detail.rawSample": "Raw sample result",
+    "detail.rawNote": "debug JSON, defaults to first error/failure when available",
+    "config.experiment": "experiment",
+    "config.flagsNone": "none",
+    "config.default": "default",
+    "config.none": "none",
+    "config.notApplicable": "n/a",
+    "status.pass": "pass",
+    "status.fail": "fail",
+    "status.error": "error",
+    "status.skipped": "skipped",
+    "action.close": "Close",
+    "action.copyReason": "Copy reason",
+    "action.copyErrors": "Copy errors",
+    "action.copied": "Copied",
+    "trace.loading": "loading...",
+    "trace.loadFailed": "load failed (static report has no server - use niceeval view):",
+    "trace.transcript": "transcript",
+    "trace.timing": "timing trace",
+    "trace.noSpans": "no spans",
+    "trace.total": "total",
+    "trace.spans": "spans",
+    "trace.clickDetails": "click a row for details",
+    "transcript.noEvents": "no events",
+    "transcript.user": "user",
+    "transcript.assistant": "assistant",
+    "transcript.thinking": "thinking",
+    "transcript.inputRequested": "input requested",
+    "transcript.awaitingInput": "(awaiting input)",
+    "transcript.contextCompacted": "context compacted",
+    "transcript.running": "running...",
+    "transcript.input": "input",
+    "transcript.output": "output",
+    "transcript.empty": "(empty)",
+    "code.otherAssertions": "other assertions",
+    "code.noReply": "(no reply)",
+    "code.reply": "reply",
+    "code.hide": "hide",
+    "code.checks": "checks",
+    "code.conversation": "conversation",
+    "code.noSource": "Source was not captured. This run may predate source-loc or the source may be unavailable. Re-run this eval to see the code view.",
+    "assert.pass": "pass",
+    "assert.fail": "fail",
+    "assert.soft": "soft",
+    "assert.evidence": "What the judge saw",
+    "outcome.passed": "passed",
+    "outcome.failed": "failed",
+    "outcome.errored": "errors",
+    "outcome.skipped": "skipped",
+  },
+  "zh-CN": {
+    "app.title": "niceeval 实验查看器",
+    "nav.label": "报告",
+    "nav.experiments": "实验",
+    "nav.runs": "运行",
+    "nav.traces": "追踪",
+    "hero.title": "Eval 运行结果",
+    "hero.lastRun": "最近运行:",
+    "metric.passRate": "通过率",
+    "metric.evalResults": "Eval 结果",
+    "metric.duration": "耗时",
+    "metric.cost": "预估成本",
+    "section.experiments": "实验",
+    "section.individualRuns": "单次运行",
+    "section.traces": "追踪",
+    "search.experiments": "筛选实验、agent、model 或 eval...",
+    "search.runs": "筛选 eval ID 或实验...",
+    "empty.summary": "没有找到 summary.json。请先运行 niceeval，或传入 niceeval view path/to/summary.json。",
+    "empty.individualRuns": "没有单次运行结果。",
+    "empty.runsFilter": "没有匹配筛选条件的结果。",
+    "empty.traces": "没有可用追踪。保存工件的 eval run 会收集 traces。",
+    "table.experiment": "实验",
+    "table.model": "模型",
+    "table.agent": "Agent",
+    "table.avgDuration": "平均耗时",
+    "table.successRate": "成功率",
+    "table.tokens": "Tokens",
+    "table.estCost": "预估成本",
+    "table.outcomes": "结果",
+    "table.evalId": "Eval ID",
+    "table.outcome": "状态",
+    "table.ranAt": "运行时间",
+    "detail.evalResult": "个 eval",
+    "detail.evalResults": "个 eval",
+    "detail.attempts": "尝试",
+    "detail.evals": "Eval 数",
+    "detail.runs": "总轮次",
+    "detail.runsUnit": "轮",
+    "detail.passed": "通过",
+    "detail.failed": "失败",
+    "detail.errored": "错误",
+    "detail.totalTime": "总耗时",
+    "detail.totalCost": "总成本",
+    "detail.ran": "运行",
+    "detail.evaluationAttempts": "各 Eval",
+    "detail.status": "状态",
+    "detail.eval": "Eval",
+    "detail.reason": "原因",
+    "detail.time": "耗时",
+    "detail.run": "轮次",
+    "detail.rawSample": "原始样例结果",
+    "detail.rawNote": "调试 JSON，默认选择第一条错误/失败",
+    "config.experiment": "实验",
+    "config.flagsNone": "无",
+    "config.default": "默认",
+    "config.none": "无",
+    "config.notApplicable": "不适用",
+    "status.pass": "通过",
+    "status.fail": "失败",
+    "status.error": "错误",
+    "status.skipped": "跳过",
+    "action.close": "关闭",
+    "action.copyReason": "复制原因",
+    "action.copyErrors": "复制错误",
+    "action.copied": "已复制",
+    "trace.loading": "加载中...",
+    "trace.loadFailed": "加载失败(静态报告没有服务端 - 请用 niceeval view):",
+    "trace.transcript": "会话",
+    "trace.timing": "耗时追踪",
+    "trace.noSpans": "没有 span",
+    "trace.total": "总计",
+    "trace.spans": "spans",
+    "trace.clickDetails": "点击行查看详情",
+    "transcript.noEvents": "没有事件",
+    "transcript.user": "user",
+    "transcript.assistant": "assistant",
+    "transcript.thinking": "thinking",
+    "transcript.inputRequested": "请求输入",
+    "transcript.awaitingInput": "(等待输入)",
+    "transcript.contextCompacted": "上下文已压缩",
+    "transcript.running": "运行中...",
+    "transcript.input": "输入",
+    "transcript.output": "输出",
+    "transcript.empty": "(空)",
+    "code.otherAssertions": "其它断言",
+    "code.noReply": "(无回复)",
+    "code.reply": "回复",
+    "code.hide": "收起",
+    "code.checks": "检查",
+    "code.conversation": "会话",
+    "code.noSource": "源码未捕获。此 run 可能早于 source-loc，或源码不可读。重跑此 eval 即可看到代码视图。",
+    "assert.pass": "通过",
+    "assert.fail": "失败",
+    "assert.soft": "soft",
+    "assert.evidence": "裁判看到的材料",
+    "outcome.passed": "通过",
+    "outcome.failed": "失败",
+    "outcome.errored": "错误",
+    "outcome.skipped": "跳过",
+  },
+};
+
+const storageKey = "niceeval:view:locale";
+
+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";
+}
+
+export function persistLocale(locale: Locale): void {
+  try {
+    localStorage.setItem(storageKey, locale);
+  } catch {
+    // Reports must still work from local files and locked-down browsers.
+  }
+}
+
+export function setDocumentLocale(locale: Locale): void {
+  document.documentElement.lang = locale;
+  document.title = dictionaries[locale]["app.title"];
+}
+
+export function makeTranslator(locale: Locale): (key: MessageKey) => string {
+  return (key) => dictionaries[locale][key];
+}
+
+function readStoredLocale(): Locale | undefined {
+  try {
+    const value = localStorage.getItem(storageKey);
+    return value === "zh-CN" || value === "en" ? value : undefined;
+  } catch {
+    return undefined;
+  }
+}

package/src/view/app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>niceeval view (dev)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/grab/dist/index.global.js"></script>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** shadcn 标准工具:合并 className,Tailwind 冲突类后者覆盖前者。 */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}