niceeval 0.9.1 → 0.10.2

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>
+  );
+}