niceeval 0.1.0

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

@@ -0,0 +1,89 @@
+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";
+
+export function CopyReason({ text, t }: { text: string; t: T }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    try {
+      await copyText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      setCopied(false);
+    }
+  };
+  return (
+    <button className={`copy-reason${copied ? " is-copied" : ""}`} onClick={copy} aria-label={t("action.copyReason")} title={t("action.copyReason")}>
+      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+    </button>
+  );
+}
+
+export function CopyAllErrors({ rows, t }: { rows: ViewRow[]; t: T }) {
+  const [copied, setCopied] = useState(false);
+
+  const errorEntries = rows.flatMap((row: ViewRow) =>
+    (row.results ?? [])
+      .filter((r: ViewResult) => {
+        const outcome = outcomeOf(r);
+        return outcome === "failed" || outcome === "errored";
+      })
+      .map((r: ViewResult) => {
+        const failedAssertions = failingAssertions(r);
+        const reason = reasonFor(r, failedAssertions);
+        const traceBase = r.artifactAbsBase || r.artifactBase;
+        const tracePath = r.hasTrace && traceBase ? `${traceBase}/trace.json` : null;
+        return { experimentName: row.label, evalId: r.id, reason, tracePath };
+      })
+  );
+
+  if (!errorEntries.length) return null;
+
+  const copy = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const text = errorEntries
+      .map(({ experimentName, evalId, reason, tracePath }: { experimentName: string; evalId: string; reason: string; tracePath: string | null }) =>
+        [
+          `实验: ${experimentName}  Eval: ${evalId}`,
+          reason ? `错误: ${reason}` : null,
+          tracePath ? `Trace: ${tracePath}` : null,
+        ]
+          .filter(Boolean)
+          .join("\n")
+      )
+      .join("\n\n");
+    try {
+      await copyText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <button className={`copy-all-errors${copied ? " is-copied" : ""}`} onClick={copy} title={t("action.copyErrors")}>
+      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+      <span>{copied ? t("action.copied") : `${t("action.copyErrors")} (${errorEntries.length})`}</span>
+    </button>
+  );
+}
+
+export async function copyText(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  ta.remove();
+}

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

@@ -0,0 +1,266 @@
+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 { configChips } from "../lib/rows.ts";
+import { formatClock, formatCost, formatDateTime, formatDuration, formatPercent, formatTokens, totalTokens } from "../lib/format.ts";
+import { Kpi, SortHeader } from "./primitives.tsx";
+
+export function ExperimentTable({
+  rows,
+  sort,
+  setSortKey,
+  openRows,
+  toggleRow,
+  openModal,
+  t,
+}: {
+  rows: ViewRow[];
+  sort: SortState;
+  setSortKey: (key: SortKey) => void;
+  openRows: Set<string>;
+  toggleRow: (key: string) => void;
+  openModal: OpenModal;
+  t: T;
+}) {
+  return (
+    <div className="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <SortHeader name={t("table.experiment")} sortKey="experiment" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.model")} sortKey="model" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.agent")} sortKey="agent" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.avgDuration")} sortKey="avgDurationMs" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.successRate")} sortKey="passRate" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.tokens")} sortKey="tokens" sort={sort} onSort={setSortKey} />
+            <SortHeader name={t("table.estCost")} sortKey="cost" sort={sort} onSort={setSortKey} />
+            <th>{t("table.outcomes")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row: ViewRow) => (
+            <React.Fragment key={row.key}>
+              <ExperimentRow row={row} open={openRows.has(row.key)} onToggle={() => toggleRow(row.key)} t={t} />
+              {openRows.has(row.key) ? <ExperimentDetail row={row} openModal={openModal} t={t} /> : null}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function ExperimentRow({ row, open, onToggle, t }: { row: ViewRow; open: boolean; onToggle: () => void; t: T }) {
+  const tone = row.passRate >= 0.8 ? "good" : row.passRate >= 0.5 ? "warn" : "bad";
+  return (
+    <tr
+      className={`main-row${open ? " is-open" : ""}`}
+      tabIndex={0}
+      onClick={onToggle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      }}
+    >
+      <td>
+        <ChevronRight className="chev-icon" aria-hidden="true" />
+        <span className="name">{row.label}</span>
+        <div className="sub">
+          {row.evals} {row.evals === 1 ? t("detail.evalResult") : t("detail.evalResults")}
+          {row.runs > row.evals ? ` · ${row.runs} ${t("detail.runsUnit")}` : ""}
+          {row.lastRunAt ? ` · ${formatDateTime(row.lastRunAt)}` : ""}
+        </div>
+      </td>
+      <td>{row.model || t("config.default")}</td>
+      <td>{row.agent}</td>
+      <td className="num">{formatDuration(row.avgDurationMs)}</td>
+      <td className={`num ${tone}`}>{formatPercent(row.passRate)}</td>
+      <td className="num">{formatTokens(totalTokens(row.usage))}</td>
+      <td className="num">{formatCost(row.estimatedCostUSD)}</td>
+      <td>
+        <span className="pill">{outcomeSummary(row, t)}</span>
+      </td>
+    </tr>
+  );
+}
+
+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?.[0] ||
+    {};
+  const evalGroups = groupByEval(row.results ?? []).sort((a, b) => a.id.localeCompare(b.id));
+  return (
+    <tr className="detail-row">
+      <td className="detail-cell" colSpan={8}>
+        <div className="detail">
+          <div className="config-strip">
+            {configChips(row, t).map(([label, value]) => (
+              <span className="config-chip" key={label}>
+                <span>{label}</span>
+                <b>{value}</b>
+              </span>
+            ))}
+          </div>
+          <div className="detail-kpis">
+            <Kpi label={t("detail.evals")} value={row.evals} />
+            <Kpi label={t("detail.passed")} value={row.passed} className="good" />
+            <Kpi label={t("detail.failed")} value={row.failed} className={row.failed ? "bad" : ""} />
+            <Kpi label={t("detail.errored")} value={row.errored} className={row.errored ? "infra-err" : ""} />
+            {row.runs > row.evals ? <Kpi label={t("detail.runs")} value={row.runs} /> : null}
+            <Kpi label={t("detail.totalTime")} value={formatDuration(totalDuration)} />
+            <Kpi label={t("detail.totalCost")} value={formatCost(row.estimatedCostUSD)} />
+            <Kpi label={t("detail.ran")} value={formatDateTime(row.lastRunAt)} title={row.lastRunAt || ""} />
+          </div>
+          <h3>{t("detail.evaluationAttempts")}</h3>
+          <div className="eval-list">
+            <div className="eval-grid-head">
+              <span>{t("detail.status")}</span>
+              <span>{t("detail.eval")}</span>
+              <span>{t("detail.reason")}</span>
+              <span>{t("detail.time")}</span>
+              <span>{t("table.tokens")}</span>
+              <span>{t("table.estCost")}</span>
+              <span>{t("detail.run")}</span>
+            </div>
+            {evalGroups.map((group) => (
+              <EvalRow key={`${group.experimentId ?? ""}-${group.id}`} group={group} openModal={openModal} t={t} />
+            ))}
+          </div>
+          <details className="raw-details">
+            <summary>
+              {t("detail.rawSample")} <span className="raw-note">{t("detail.rawNote")}</span>
+            </summary>
+            <pre>{JSON.stringify(sampleResult, null, 2)}</pre>
+          </details>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+/**
+ * 一个 eval 一行:多轮(runs>1)折叠成单行摘要,点开展开各轮 attempt;单轮直接就是那条 attempt。
+ * Run 列显示 通过轮数 / 总轮数(如 0/3、2/3),让 earlyExit 重试和 flaky 一眼可见。
+ */
+export function EvalRow({ group, openModal, t }: { group: EvalGroup; openModal: OpenModal; t: T }) {
+  const [open, setOpen] = useState(false);
+  const n = group.attempts.length;
+
+  if (n === 1) {
+    return <Attempt result={group.attempts[0]!} totalRuns={1} openModal={openModal} t={t} />;
+  }
+
+  // 代表轮:取与 eval 判决相同的第一条,用它的原因/分数做折叠行摘要。
+  const rep = group.attempts.find((a) => outcomeOf(a) === 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);
+  const totalTok = group.attempts.reduce((s, a) => s + totalTokens(a.usage), 0);
+  const totalCost = group.attempts.reduce((s, a) => s + (a.estimatedCostUSD || 0), 0);
+  const toggle = () => setOpen((v) => !v);
+
+  return (
+    <>
+      <div
+        className={`eval-item eval-item-clickable eval-group${open ? " is-open" : ""}`}
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={toggle}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } }}
+      >
+        <span className="attempt-status">
+          <span className={outcomeClass(group.outcome)}>{outcomeLabel(group.outcome, t)}</span>
+        </span>
+        <span className="eval-id">
+          <ChevronRight className="chev-icon" aria-hidden="true" />
+          {group.id}
+        </span>
+        <div className="assertions-cell">
+          <span className="assertions" title={reason || undefined}>
+            {reason || <span className="reason-empty">—</span>}
+          </span>
+        </div>
+        <span className="num">{formatDuration(totalDuration)}</span>
+        <span className="num">{formatTokens(totalTok)}</span>
+        <span className="num">{formatCost(totalCost)}</span>
+        <span className="num run-ratio" title={`${group.passedAttempts}/${n} ${t("detail.passed")}`}>
+          {group.passedAttempts}/{n}
+        </span>
+      </div>
+      {open ? (
+        <div className="eval-attempts">
+          {group.attempts.map((a) => (
+            <Attempt key={`${a.id}-${a.attempt}`} result={a} totalRuns={n} openModal={openModal} t={t} />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function Attempt({ result, totalRuns, openModal, t }: { result: ViewResult; totalRuns: number; openModal: OpenModal; t: T }) {
+  const outcome = outcomeOf(result);
+  const gates = failingAssertions(result);
+  const reason = reasonFor(result, gates);
+  const allAssertions = result.assertions || [];
+  const hasScores = allAssertions.some((a: Assertion) => a.score !== undefined && a.score !== null);
+  const hasBody = result.hasEvents || result.hasTrace || hasScores;
+
+  const inlineScores = !reason && outcome === "passed" ? scoresSummary(allAssertions) : "";
+  const displayReason = reason || inlineScores;
+
+  const handleOpen = () => openModal(result);
+
+  const cells = (
+    <>
+      <span className="attempt-status">
+        <span className={outcomeClass(outcome)}>{outcomeLabel(outcome, t)}</span>
+      </span>
+      <span className="eval-id">{result.id}</span>
+      <div className="assertions-cell">
+        <span
+          className={`assertions${hasBody ? " assertions-link" : ""}`}
+          title={displayReason || undefined}
+          onClick={hasBody ? (e) => { e.stopPropagation(); handleOpen(); } : undefined}
+        >
+          {displayReason || <span className="reason-empty">—</span>}
+        </span>
+      </div>
+      <span className="num">
+        {formatDuration(result.durationMs)}
+        {result.startedAt ? <small className="ran-at">{formatClock(result.startedAt)}</small> : null}
+      </span>
+      <span className="num">{formatTokens(totalTokens(result.usage))}</span>
+      <span className="num">{formatCost(result.estimatedCostUSD)}</span>
+      <span className="num" title={`attempt ${result.attempt + 1} of ${totalRuns}`}>
+        #{result.attempt + 1}
+      </span>
+    </>
+  );
+
+  if (!hasBody) {
+    return <div className="eval-item">{cells}</div>;
+  }
+
+  return (
+    <div
+      className="eval-item eval-item-clickable"
+      role="button"
+      tabIndex={0}
+      onClick={handleOpen}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleOpen(); }
+      }}
+    >
+      {cells}
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import type { T } from "../shared.ts";
+import type { ViewResult, ViewRow } from "../types.ts";
+import { evalPassRate, groupByEval } from "../lib/outcome.ts";
+import { formatCost, formatDateTime, formatPercent } from "../lib/format.ts";
+
+export function GroupSelector({
+  groupMap,
+  selectedGroup,
+  onSelect,
+  t,
+}: {
+  groupMap: Map<string, ViewRow[]>;
+  selectedGroup: string | null;
+  onSelect: (group: string) => void;
+  t: T;
+}) {
+  if (!groupMap.size) return <div id="group-selector" className="group-selector" />;
+  return (
+    <div id="group-selector" className="group-selector">
+      {[...groupMap.keys()].sort().map((group) => {
+        const groupRows = groupMap.get(group) ?? [];
+        const allResults = groupRows.flatMap((r: ViewRow) => r.results ?? []);
+        const evalGroups = groupByEval(allResults); // 卡片计票按 eval,不按 attempt
+        const failed = evalGroups.filter((g) => g.outcome === "failed").length;
+        const errored = evalGroups.filter((g) => g.outcome === "errored").length;
+        const passRate = evalPassRate(allResults);
+        const tone = passRate >= 0.8 ? "good" : passRate >= 0.5 ? "warn" : "bad";
+        const totalCost = groupRows.reduce((s: number, r: ViewRow) => s + (r.estimatedCostUSD || 0), 0);
+        const lastRun = groupRows
+          .map((r: ViewRow) => r.lastRunAt)
+          .filter((value): value is string => Boolean(value))
+          .sort()
+          .at(-1);
+        const selected = selectedGroup === group;
+        return (
+          <div
+            key={group}
+            className={`group-card${selected ? " is-selected" : ""}`}
+            tabIndex={0}
+            role="button"
+            onClick={() => onSelect(group)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(group);
+              }
+            }}
+          >
+            <div className="group-card-name">{group}</div>
+            <div className={`group-card-rate ${tone}`}>{formatPercent(passRate)}</div>
+            <div className="group-card-meta">
+              {groupRows.length} {groupRows.length === 1 ? t("detail.evalResult") : t("detail.evalResults")} · {failed} {t("outcome.failed")}
+              {errored ? ` · ${errored} ${t("outcome.errored")}` : ""} · {formatCost(totalCost)}
+            </div>
+            {lastRun ? <div className="group-card-time">{formatDateTime(lastRun)}</div> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import type { LazyArtifactType, T } from "../shared.ts";
+import { asEvents, asSpans } from "../lib/guards.ts";
+import { Trace } from "./Trace.tsx";
+import { Transcript } from "./Transcript.tsx";
+
+export function LazyArtifact({ type, src, autoLoad = false, t }: { type: LazyArtifactType; src: string; autoLoad?: boolean; t: T }) {
+  const [open, setOpen] = useState(autoLoad);
+  const [loaded, setLoaded] = useState(false);
+  const [content, setContent] = useState<unknown>(null);
+  const [error, setError] = useState("");
+
+  const load = async () => {
+    if (loaded) return;
+    setLoaded(true);
+    try {
+      const resp = await fetch("/artifact?p=" + encodeURIComponent(src));
+      if (!resp.ok) throw new Error("HTTP " + resp.status);
+      const body = await resp.json();
+      setContent(body);
+      setError("");
+    } catch (e) {
+      setLoaded(false);
+      setError(`${t("trace.loadFailed")} ${String(e)}`);
+    }
+  };
+
+  useEffect(() => {
+    if (autoLoad) void load();
+  }, []);
+
+  return (
+    <details
+      className="trace-details"
+      open={open}
+      onToggle={(e) => {
+        const isOpen = e.currentTarget.open;
+        setOpen(isOpen);
+        if (isOpen) void load();
+      }}
+    >
+      <summary>{type === "transcript" ? t("trace.transcript") : t("trace.timing")}</summary>
+      <div className="trace-slot">
+        {error ? <div className="trace-span-meta">{error}</div> : !content ? <div className="trace-span-meta">{t("trace.loading")}</div> : null}
+        {content && type === "transcript" ? <Transcript events={asEvents(content) ?? []} t={t} /> : null}
+        {content && type === "trace" ? <Trace spans={asSpans(content) ?? []} t={t} /> : null}
+      </div>
+    </details>
+  );
+}

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

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+import type { T } from "../shared.ts";
+import type { Span, ViewJson } from "../types.ts";
+import { formatDuration } from "../lib/format.ts";
+
+export function Trace({ spans, t }: { spans: Span[]; t: T }) {
+  if (!spans?.length) return <div className="trace-span-meta">{t("trace.noSpans")}</div>;
+  const t0 = Math.min(...spans.map((s) => s.startMs));
+  const t1 = Math.max(...spans.map((s) => s.endMs));
+  const total = Math.max(1, t1 - t0);
+  const byId = new Map(spans.map((s) => [s.spanId, s]));
+  const depthOf = (span: Span): number => {
+    let depth = 0;
+    let cur = span;
+    const seen = new Set();
+    while (cur && cur.parentSpanId && byId.has(cur.parentSpanId) && !seen.has(cur.spanId)) {
+      seen.add(cur.spanId);
+      const next = byId.get(cur.parentSpanId);
+      if (!next) break;
+      cur = next;
+      depth++;
+      if (depth > 40) break;
+    }
+    return depth;
+  };
+  const ordered = [...spans].sort((a, b) => a.startMs - b.startMs || depthOf(a) - depthOf(b));
+  return (
+    <div className="trace">
+      <div className="trace-span-meta">
+        {t("trace.total")} {formatDuration(total)} · {spans.length} {t("trace.spans")} · {t("trace.clickDetails")}
+      </div>
+      {ordered.map((span) => {
+        const left = ((span.startMs - t0) / total) * 100;
+        const width = Math.max(0.6, ((span.endMs - span.startMs) / total) * 100);
+        const kind = span.kind || "other";
+        const tone = span.status === "error" ? "bad" : "k-" + kind;
+        const detail = spanAttrs(span.attributes);
+        const row = (
+          <summary className="trace-row">
+            <div className="trace-label" style={{ paddingLeft: depthOf(span) * 12 }} title={span.name}>
+              {kind !== "other" ? <span className={`kind-chip k-${kind}`}>{kind}</span> : null}
+              {span.name}
+            </div>
+            <div className="trace-track">
+              <div className={`trace-bar ${tone}`} style={{ left: `${left}%`, width: `${width}%` }} />
+            </div>
+            <div className="trace-dur num">{formatDuration(span.endMs - span.startMs)}</div>
+          </summary>
+        );
+        return detail ? (
+          <details className="span-d" key={span.spanId}>
+            {row}
+            {detail}
+          </details>
+        ) : (
+          <div className="span-d" key={span.spanId}>
+            {row}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function spanAttrs(attrs?: Record<string, ViewJson>): ReactNode {
+  if (!attrs) return null;
+  const hide = /^(code\.|thread\.|target$|busy_ns$|idle_ns$|rpc\.|app_server\.)/;
+  const keys = Object.keys(attrs).filter((k) => !hide.test(k));
+  if (!keys.length) return null;
+  const io = keys.filter((k) => k.startsWith("io."));
+  const rest = keys.filter((k) => !k.startsWith("io.")).sort();
+  return (
+    <div className="span-attrs">
+      {io.map((key) => {
+        const label = key.replace(/^io\./, "");
+        const value = String(attrs[key]);
+        return label === "input" || label === "output" ? (
+          <div className="attr-io" key={key}>
+            <span className="attr-k">{label}</span>
+            <pre className="attr-pre">{value}</pre>
+          </div>
+        ) : (
+          <AttrRow key={key} label={label} value={value} />
+        );
+      })}
+      {rest.map((key) => (
+        <AttrRow key={key} label={key} value={typeof attrs[key] === "object" ? JSON.stringify(attrs[key]) : String(attrs[key])} />
+      ))}
+    </div>
+  );
+}
+
+export function AttrRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="attr-row">
+      <span className="attr-k">{label}</span>
+      <span className="attr-v">{value}</span>
+    </div>
+  );
+}