niceeval 0.9.1 → 0.10.0

package/src/report/components/attempt-detail/AttemptConversation.tsx

@@ -0,0 +1,110 @@
+// AttemptConversation:标准事件流按轮组织的完整分轮事件卡。没有 events 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement, ReactNode } from "react";
+import type { AttemptConversationData, AttemptConversationReply, AttemptConversationRound } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+function ReplyRow({ reply }: { reply: AttemptConversationReply }): ReactNode {
+  switch (reply.kind) {
+    case "assistant":
+      return (
+        <div className="nre-conv-assistant">
+          <span className="nre-conv-role">assistant</span>
+          <div className="nre-conv-text">{reply.text}</div>
+        </div>
+      );
+    case "user":
+      return (
+        <div className="nre-conv-user">
+          <span className="nre-conv-role">user</span>
+          <div className="nre-conv-text">{reply.text}</div>
+        </div>
+      );
+    case "thinking":
+      return (
+        <details className="nre-conv-thinking">
+          <summary>thinking</summary>
+          <div className="nre-conv-text">{reply.text}</div>
+        </details>
+      );
+    case "error":
+      return <div className="nre-conv-error">! {reply.text}</div>;
+    case "skill":
+      return (
+        <div className="nre-conv-skill">
+          <span className="nre-conv-role">skill loaded</span> {reply.skill}
+        </div>
+      );
+    case "tool":
+      return (
+        <details className="nre-conv-tool">
+          <summary>
+            {reply.name}
+            {reply.status ? ` · ${reply.status}` : ""}
+          </summary>
+          <pre className="nre-conv-tool-io">{JSON.stringify(reply.input, null, 2)}</pre>
+          {reply.output !== undefined ? <pre className="nre-conv-tool-io">{JSON.stringify(reply.output, null, 2)}</pre> : null}
+        </details>
+      );
+    case "subagent":
+      return (
+        <details className="nre-conv-subagent">
+          <summary>
+            subagent {reply.name}
+            {reply.status ? ` · ${reply.status}` : ""}
+          </summary>
+          {reply.output !== undefined ? <pre className="nre-conv-tool-io">{JSON.stringify(reply.output, null, 2)}</pre> : null}
+        </details>
+      );
+    case "input":
+      return <div className="nre-conv-input">input requested{reply.request.prompt ? `: ${reply.request.prompt}` : ""}</div>;
+    case "compaction":
+      return <div className="nre-conv-compaction">compaction{reply.reason ? `: ${reply.reason}` : ""}</div>;
+    case "raw":
+      return (
+        <details className="nre-conv-raw">
+          <summary>unrecognized event</summary>
+          <pre className="nre-conv-tool-io">{JSON.stringify(reply.raw, null, 2)}</pre>
+        </details>
+      );
+  }
+}
+
+function RoundCard({ round, index }: { round: AttemptConversationRound; index: number }): ReactElement {
+  return (
+    <div className="nre-conv-round">
+      <div className="nre-conv-round-head">
+        round {index + 1}
+        {round.loc ? (
+          <span className="nre-conv-round-loc" title={`${round.loc.file}:${round.loc.line}`}>
+            {round.loc.file.split("/").pop()}:{round.loc.line}
+          </span>
+        ) : null}
+      </div>
+      {round.sentText ? <div className="nre-conv-sent">{round.sentText}</div> : null}
+      <div className="nre-conv-replies">
+        {round.replies.map((reply, i) => (
+          <ReplyRow key={i} reply={reply} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function AttemptConversation({
+  data,
+  className,
+}: {
+  data: AttemptConversationData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-conversation", className)}>
+      {data.rounds.map((round, i) => (
+        <RoundCard key={i} round={round} index={i} />
+      ))}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptDiagnostics.tsx

@@ -0,0 +1,38 @@
+// AttemptDiagnostics:lifecycle 分组的 diagnostics。没有 diagnostics 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptDiagnosticsData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptDiagnostics({
+  data,
+  className,
+}: {
+  data: AttemptDiagnosticsData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-diagnostics", className)}>
+      {data.groups.map(({ phase, items }) => (
+        <div key={phase} className="nre-diagnostics-group">
+          <div className="nre-diagnostics-phase">{phase}</div>
+          <ul>
+            {items.map((d, i) => (
+              <li key={i} className={`nre-diagnostics-item nre-tone-${d.level === "error" ? "bad" : "warn"}`}>
+                <span className="nre-diagnostics-meta">
+                  {d.level} · {d.code}
+                </span>
+                <div>
+                  {d.message}
+                  {d.count && d.count > 1 ? ` (${d.count} occurrences)` : ""}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptDiff.tsx

@@ -0,0 +1,35 @@
+// AttemptDiff:generated / modified / deleted 文件摘要与展开的行变化统计。没有变更时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptDiffData, AttemptDiffFileEntry } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+const NET_LABEL: Record<AttemptDiffFileEntry["net"], string> = { added: "generated", modified: "modified", deleted: "deleted" };
+
+function FileRow({ file }: { file: AttemptDiffFileEntry }): ReactElement {
+  return (
+    <li className={cx("nre-diff-file", `nre-diff-${file.net}`)}>
+      <span className="nre-diff-net">{NET_LABEL[file.net]}</span>
+      <span className="nre-diff-path">{file.path}</span>
+      {file.binary ? (
+        <span className="nre-diff-lines">binary</span>
+      ) : (
+        <span className="nre-diff-lines">
+          +{file.lines.added} / -{file.lines.deleted}
+        </span>
+      )}
+    </li>
+  );
+}
+
+export function AttemptDiff({ data, className }: { data: AttemptDiffData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <ul className={cx("nre", "nre-attempt-diff", className)}>
+      {data.files.map((f) => (
+        <FileRow key={f.path} file={f} />
+      ))}
+    </ul>
+  );
+}

package/src/report/components/attempt-detail/AttemptError.tsx

@@ -0,0 +1,31 @@
+// AttemptError:结构化 error 明细。没有 error 时零输出(docs/feature/reports/library/attempt-detail.md)。
+// 字段标签是低层技术标识,与终端 `niceeval show` 一样保持英文,不进 view 的 i18n 词典。
+
+import type { ReactElement } from "react";
+import { Fragment } from "react";
+import type { AttemptErrorData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptError({ data, className }: { data: AttemptErrorData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const rows: [string, string][] = [
+    ["phase", data.phase],
+    ["code", data.code],
+    ["message", data.message],
+  ];
+  if (data.cause) rows.push(["cause", data.cause.name ? `${data.cause.name} · ${data.cause.message}` : data.cause.message]);
+  const stack = data.stack?.replace(/\n+$/, "") ?? "";
+  return (
+    <div className={cx("nre", "nre-attempt-error", className)}>
+      <dl className="nre-attempt-error-fields">
+        {rows.map(([k, v]) => (
+          <Fragment key={k}>
+            <dt>{k}</dt>
+            <dd>{v}</dd>
+          </Fragment>
+        ))}
+      </dl>
+      {stack ? <pre className="nre-attempt-error-stack">{stack}</pre> : null}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptFixPrompt.tsx

@@ -0,0 +1,26 @@
+// AttemptFixPrompt:单条 attempt 的复制修复 prompt。passed 或没有可操作失败时零输出
+// (docs/feature/reports/library/attempt-detail.md)。与 CopyFixPrompt 同一套增强约定:
+// prompt 在 resolve 阶段算好、烘进静态 HTML,复制按钮是 enhance.js 的增强行为。
+
+import type { ReactElement } from "react";
+import type { AttemptFixPromptData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptFixPrompt({
+  data,
+  className,
+}: {
+  data: AttemptFixPromptData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <details className={cx("nre", "nre-attempt-fix-prompt", className)}>
+      <summary className="nre-attempt-fix-prompt-summary">Fix prompt</summary>
+      <button type="button" className="nre-attempt-fix-prompt-copy" data-nre-copy={data.prompt}>
+        Copy fix prompt
+      </button>
+      <pre className="nre-attempt-fix-prompt-text">{data.prompt}</pre>
+    </details>
+  );
+}

package/src/report/components/attempt-detail/AttemptSource.tsx

@@ -0,0 +1,80 @@
+// AttemptSource:带 send / assertion 标注的 eval 源码;行内展开 assertion 细节。
+// 没有 source 时零输出(docs/feature/reports/library/attempt-detail.md)。send 标注只是
+// 指向 AttemptConversation 完整回复的指针(status/耗时),不复制轮内内容——区块按事实
+// 边界拆分,同一批事实不在两个组件里各展一份。
+
+import type { ReactElement } from "react";
+import type { AttemptSourceData } from "../../model/types.ts";
+import type { AssertionResult } from "../../../types.ts";
+import { cx } from "../shared.ts";
+
+function assertTone(a: AssertionResult): "good" | "warn" | "bad" | "na" {
+  if (a.outcome === "unavailable") return "na";
+  if (a.outcome === "passed") return "good";
+  return a.severity === "soft" ? "warn" : "bad";
+}
+
+export function AttemptSource({ data, className }: { data: AttemptSourceData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-source", className)}>
+      <div className="nre-attempt-source-head">{data.sourcePath}</div>
+      <div className="nre-attempt-source-lines">
+        {data.lines.map((line) => {
+          const hasAsserts = line.assertions.length > 0;
+          const hasSends = line.sends.length > 0;
+          const worstTone = hasAsserts
+            ? line.assertions.some((a) => assertTone(a) === "bad")
+              ? "bad"
+              : line.assertions.some((a) => assertTone(a) === "warn")
+                ? "warn"
+                : line.assertions.some((a) => assertTone(a) === "na")
+                  ? "na"
+                  : "good"
+            : undefined;
+          return (
+            <details
+              key={line.line}
+              className={cx("nre-source-line", worstTone ? `nre-tone-${worstTone}` : undefined, hasSends ? "nre-source-line-send" : undefined)}
+              open={hasAsserts && (worstTone === "bad" || worstTone === "warn")}
+            >
+              <summary>
+                <span className="nre-source-ln">{line.line}</span>
+                <code className="nre-source-text">{line.text}</code>
+                {hasSends ? <span className="nre-source-send-mark">↳ {line.sends.map((s) => s.label).join(", ")}</span> : null}
+              </summary>
+              {hasAsserts ? (
+                <div className="nre-source-line-detail">
+                  {line.assertions.map((a, i) => (
+                    <div key={i} className={`nre-assertion-row nre-tone-${assertTone(a)}`}>
+                      <span className="nre-assertion-name">{a.name}</span>
+                      {a.outcome === "unavailable" ? (
+                        <span>{a.reason}</span>
+                      ) : (
+                        <>
+                          {a.expected !== undefined ? <span>expected: {a.expected}</span> : null}
+                          {a.received !== undefined ? <span>received: {a.received}</span> : null}
+                        </>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+            </details>
+          );
+        })}
+      </div>
+      {data.unmapped.length > 0 ? (
+        <div className="nre-attempt-source-unmapped">
+          <div className="nre-attempt-source-unmapped-head">Other assertions</div>
+          {data.unmapped.map((a, i) => (
+            <div key={i} className={`nre-assertion-row nre-tone-${assertTone(a)}`}>
+              {a.groupPath?.length ? `${a.groupPath.join(" > ")} · ` : ""}
+              {a.name}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptSummary.tsx

@@ -0,0 +1,74 @@
+// AttemptSummary:恒非空的身份/verdict/时间/成本卡(docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptSummaryData } from "../../model/types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../../model/locale.ts";
+import { cx } from "../shared.ts";
+
+const CAPABILITY_LABEL: Record<keyof AttemptSummaryData["capabilities"], string> = {
+  source: "source",
+  execution: "execution",
+  timing: "timing",
+  diff: "diff",
+};
+
+export function AttemptSummary({
+  data,
+  locale = DEFAULT_REPORT_LOCALE,
+  className,
+}: {
+  data: AttemptSummaryData;
+  locale?: ReportLocale;
+  className?: string;
+}): ReactElement {
+  const caps = (Object.keys(data.capabilities) as (keyof AttemptSummaryData["capabilities"])[]).filter(
+    (k) => data.capabilities[k],
+  );
+  return (
+    <div className={cx("nre", "nre-attempt-summary", className)}>
+      <div className="nre-attempt-summary-head">
+        <span className={`nre-verdict-pill nre-verdict-${data.verdict}`}>{localeText(locale, `verdict.${data.verdict}`)}</span>
+        <span className="nre-attempt-summary-locator">{data.locator}</span>
+      </div>
+      <dl className="nre-attempt-summary-kpis">
+        <div>
+          <dt>Experiment</dt>
+          <dd>{data.identity.experimentId}</dd>
+        </div>
+        <div>
+          <dt>Eval</dt>
+          <dd>{data.identity.evalId}</dd>
+        </div>
+        <div>
+          <dt>Attempt</dt>
+          <dd>{data.identity.attempt + 1}</dd>
+        </div>
+        {data.startedAt ? (
+          <div>
+            <dt>Started</dt>
+            <dd>{data.startedAt}</dd>
+          </div>
+        ) : null}
+        <div>
+          <dt>Duration</dt>
+          <dd>{formatDurationMs(data.durationMs)}</dd>
+        </div>
+        {data.costUSD !== null ? (
+          <div>
+            <dt>Cost</dt>
+            <dd>${data.costUSD.toFixed(4)}</dd>
+          </div>
+        ) : null}
+      </dl>
+      {caps.length > 0 ? (
+        <p className="nre-attempt-summary-caps">{caps.map((k) => CAPABILITY_LABEL[k]).join(" · ")}</p>
+      ) : null}
+    </div>
+  );
+}
+
+function formatDurationMs(ms: number): string {
+  if (ms >= 60_000) return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${ms}ms`;
+}

package/src/report/components/attempt-detail/AttemptTimeline.tsx

@@ -0,0 +1,108 @@
+// AttemptTimeline:runner phases 主链 + 收尾段,children(hook/command/turn)默认收合、
+// 失败节点带标记;turn 节点按 traceId 关联同一轮的 agent/model/tool span。没有 phase 时
+// 零输出(docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptTimelineData } from "../../model/types.ts";
+import type { TimingNode, TraceSpan } from "../../../types.ts";
+import { formatDurationMs } from "../../model/format.ts";
+import { cx } from "../shared.ts";
+
+const CLOSING_PHASES = new Set(["eval.teardown", "agent.teardown", "sandbox.teardown", "sandbox.suspend", "sandbox.stop"]);
+
+function TimingNodeRow({ node, trace }: { node: TimingNode; trace: readonly TraceSpan[] | null }): ReactElement {
+  const kids = node.children ?? [];
+  const spans = node.kind === "turn" && node.traceId && trace ? trace.filter((s) => s.traceId === node.traceId) : [];
+  const label = node.kind === "command" && node.command ? `shell · ${node.command.display}` : node.label;
+  if (kids.length === 0 && spans.length === 0) {
+    return (
+      <li className={cx("nre-timeline-node", node.failed ? "nre-timeline-failed" : undefined)}>
+        <span title={label}>{label}</span> <span className="nre-timeline-dur">{formatDurationMs(node.durationMs)}</span>
+        {node.failed ? " ✗" : ""}
+      </li>
+    );
+  }
+  return (
+    <li>
+      <details open={Boolean(node.failed)}>
+        <summary className={cx("nre-timeline-node", node.failed ? "nre-timeline-failed" : undefined)}>
+          <span title={label}>{label}</span> <span className="nre-timeline-dur">{formatDurationMs(node.durationMs)}</span>
+          {node.failed ? " ✗" : ""}
+        </summary>
+        {kids.length > 0 ? (
+          <ul className="nre-timeline-children">
+            {kids.map((child) => (
+              <TimingNodeRow key={child.id} node={child} trace={trace} />
+            ))}
+          </ul>
+        ) : null}
+        {spans.length > 0 ? (
+          <ul className="nre-timeline-spans">
+            {spans.map((s) => (
+              <li key={s.spanId}>
+                {s.kind} · {s.name} · {formatDurationMs(s.endMs - s.startMs)}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </details>
+    </li>
+  );
+}
+
+export function AttemptTimeline({ data, className }: { data: AttemptTimelineData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const main = data.phases.filter((p) => !CLOSING_PHASES.has(p.name));
+  const closing = data.phases.filter((p) => CLOSING_PHASES.has(p.name));
+  const total = main.reduce((sum, p) => sum + p.durationMs, 0);
+  const anyFailed = data.phases.some((p) => p.failed);
+  return (
+    <details className={cx("nre", "nre-attempt-timeline", className)} open={anyFailed}>
+      <summary>
+        Timing <span className="nre-timeline-dur">{formatDurationMs(total)}</span>
+        {anyFailed ? " ✗" : ""}
+      </summary>
+      <ul className="nre-timeline-phases">
+        {main.map((p, i) => {
+          const kids = p.children ?? [];
+          if (kids.length === 0) {
+            return (
+              <li key={i} className={cx("nre-timeline-phase", p.failed ? "nre-timeline-failed" : undefined)}>
+                {p.name} <span className="nre-timeline-dur">{formatDurationMs(p.durationMs)}</span>
+                {p.failed ? " ✗" : ""}
+              </li>
+            );
+          }
+          return (
+            <li key={i}>
+              <details open={Boolean(p.failed)}>
+                <summary className={cx("nre-timeline-phase", p.failed ? "nre-timeline-failed" : undefined)}>
+                  {p.name} <span className="nre-timeline-dur">{formatDurationMs(p.durationMs)}</span>
+                  {p.failed ? " ✗" : ""}
+                </summary>
+                <ul className="nre-timeline-children">
+                  {kids.map((node) => (
+                    <TimingNodeRow key={node.id} node={node} trace={data.trace} />
+                  ))}
+                </ul>
+              </details>
+            </li>
+          );
+        })}
+      </ul>
+      {closing.length > 0 ? (
+        <div className="nre-timeline-closing">
+          <div className="nre-timeline-closing-head">teardown</div>
+          <ul className="nre-timeline-phases">
+            {closing.map((p, i) => (
+              <li key={i} className={cx("nre-timeline-phase", p.failed ? "nre-timeline-failed" : undefined)}>
+                {p.name} <span className="nre-timeline-dur">{formatDurationMs(p.durationMs)}</span>
+                {p.failed ? " ✗" : ""}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </details>
+  );
+}

package/src/report/components/attempt-detail/AttemptTrace.tsx

@@ -0,0 +1,63 @@
+// AttemptTrace:不与 runner 节点混合的原始 OTel span 树。没有 trace 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptTraceData } from "../../model/types.ts";
+import type { TraceSpan } from "../../../types.ts";
+import { formatDurationMs } from "../../model/format.ts";
+import { cx } from "../shared.ts";
+
+interface SpanNode {
+  span: TraceSpan;
+  children: SpanNode[];
+}
+
+function buildForest(spans: readonly TraceSpan[]): SpanNode[] {
+  const byId = new Map<string, SpanNode>(spans.map((s) => [s.spanId, { span: s, children: [] }]));
+  const roots: SpanNode[] = [];
+  for (const node of byId.values()) {
+    const parent = node.span.parentSpanId ? byId.get(node.span.parentSpanId) : undefined;
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+  }
+  return roots;
+}
+
+function SpanRow({ node }: { node: SpanNode }): ReactElement {
+  const failed = node.span.status === "error";
+  const body = (
+    <>
+      <span className={cx("nre-span-kind", node.span.kind ? `nre-span-${node.span.kind}` : undefined)}>{node.span.kind ?? "other"}</span>
+      <span title={node.span.name}>{node.span.name}</span>
+      <span className="nre-span-dur">{formatDurationMs(node.span.endMs - node.span.startMs)}</span>
+      {failed ? " ✗" : ""}
+    </>
+  );
+  if (node.children.length === 0) {
+    return <li className="nre-trace-span">{body}</li>;
+  }
+  return (
+    <li>
+      <details open={failed}>
+        <summary className="nre-trace-span">{body}</summary>
+        <ul className="nre-trace-children">
+          {node.children.map((child) => (
+            <SpanRow key={child.span.spanId} node={child} />
+          ))}
+        </ul>
+      </details>
+    </li>
+  );
+}
+
+export function AttemptTrace({ data, className }: { data: AttemptTraceData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const forest = buildForest(data.spans);
+  return (
+    <ul className={cx("nre", "nre-attempt-trace", className)}>
+      {forest.map((node) => (
+        <SpanRow key={node.span.spanId} node={node} />
+      ))}
+    </ul>
+  );
+}

package/src/report/components/attempt-detail/AttemptUsage.tsx

@@ -0,0 +1,29 @@
+// AttemptUsage:token / cache token / 成本 / provider usage 明细。没有 usage 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptUsageData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptUsage({ data, className }: { data: AttemptUsageData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const { usage } = data;
+  const rows: [string, string][] = [
+    ["input tokens", usage.inputTokens.toLocaleString()],
+    ["output tokens", usage.outputTokens.toLocaleString()],
+  ];
+  if (usage.cacheReadTokens !== undefined) rows.push(["cache read", usage.cacheReadTokens.toLocaleString()]);
+  if (usage.cacheWriteTokens !== undefined) rows.push(["cache write", usage.cacheWriteTokens.toLocaleString()]);
+  if (usage.requests !== undefined) rows.push(["requests", String(usage.requests)]);
+  if (data.costUSD !== null) rows.push(["cost", `$${data.costUSD.toFixed(4)}`]);
+  return (
+    <dl className={cx("nre", "nre-attempt-usage", className)}>
+      {rows.map(([k, v]) => (
+        <div key={k} className="nre-attempt-usage-row">
+          <dt>{k}</dt>
+          <dd>{v}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}