niceeval 0.8.0 → 0.9.0

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

@@ -1,51 +0,0 @@
-import { useEffect, useState } from "react";
-import type { LazyArtifactType, T } from "../shared.ts";
-import { artifactUrl } from "../lib/artifact-url.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(artifactUrl(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/SkippedRunsBanner.tsx

@@ -1,140 +0,0 @@
-import { useState } from "react";
-import { AlertCircle, ChevronRight, Copy, Check } from "lucide-react";
-import type { T } from "../shared.ts";
-import type { MessageKey } from "../i18n.ts";
-import type { SkippedRunNotice } from "../types.ts";
-import { copyText } from "./CopyControls.tsx";
-
-// 折叠前默认可见的条目数(跨分组累计);超出的部分收进「展开其余」。
-const DEFAULT_VISIBLE = 3;
-
-type GroupKind = "incompatible" | "incompatibleForeign" | "malformed" | "incomplete";
-
-interface SkippedGroup {
-  key: string;
-  kind: GroupKind;
-  messageKey: MessageKey;
-  vars: Record<string, string | number>;
-  items: SkippedRunNotice[];
-}
-
-/** 同一原因(且描述文案完全相同)的失败 run 归成一组,组内条目只保留目录名 + 命令,
- *  避免把完整原因句子重复 N 遍——这正是原实现把首屏挤满的根因。 */
-function groupSkippedRuns(runs: SkippedRunNotice[]): SkippedGroup[] {
-  const groups = new Map<string, SkippedGroup>();
-  for (const run of runs) {
-    let kind: GroupKind;
-    let key: string;
-    let messageKey: MessageKey;
-    let vars: Record<string, string | number>;
-
-    if (run.reason === "malformed") {
-      kind = "malformed";
-      vars = { detail: run.detail ?? "?" };
-      key = `malformed:${vars.detail}`;
-      messageKey = "banner.skipped.malformed";
-    } else if (run.reason === "incomplete") {
-      kind = "incomplete";
-      vars = {};
-      key = "incomplete";
-      messageKey = "banner.skipped.incomplete";
-    } else if (run.producerName && run.producerName !== "niceeval") {
-      kind = "incompatibleForeign";
-      vars = { name: run.producerName, version: run.producerVersion ?? "?", schemaVersion: run.schemaVersion ?? "?" };
-      key = `foreign:${vars.name}:${vars.version}:${vars.schemaVersion}`;
-      messageKey = "banner.skipped.incompatibleForeign";
-    } else {
-      kind = "incompatible";
-      vars = { producer: run.producerVersion ?? "?", schemaVersion: run.schemaVersion ?? "?" };
-      key = `incompatible:${vars.producer}:${vars.schemaVersion}`;
-      messageKey = "banner.skipped.incompatible";
-    }
-
-    const existing = groups.get(key);
-    if (existing) {
-      existing.items.push(run);
-    } else {
-      groups.set(key, { key, kind, messageKey, vars, items: [run] });
-    }
-  }
-  return [...groups.values()];
-}
-
-function CopyCommandButton({ command, t }: { command: string; t: T }) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      type="button"
-      className={`ib-copy${copied ? " is-copied" : ""}`}
-      title={t("banner.copyCommand")}
-      onClick={async () => {
-        await copyText(command);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1200);
-      }}
-    >
-      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
-    </button>
-  );
-}
-
-export function SkippedRunsBanner({ skippedRuns, t }: { skippedRuns: SkippedRunNotice[]; t: T }) {
-  const [expanded, setExpanded] = useState(false);
-  if (skippedRuns.length === 0) return null;
-
-  const groups = groupSkippedRuns(skippedRuns);
-  const total = skippedRuns.length;
-  let budget = expanded ? total : DEFAULT_VISIBLE;
-  const hiddenCount = expanded ? 0 : Math.max(0, total - DEFAULT_VISIBLE);
-
-  return (
-    <section className="incompatible-banner" role="alert">
-      <div className="ib-head">
-        <AlertCircle className="ib-icon" aria-hidden="true" />
-        <b>{t("banner.skippedTitle", { count: total })}</b>
-      </div>
-      <div className="ib-groups">
-        {groups.map((group) => {
-          const visibleItems = group.items.slice(0, Math.max(0, budget));
-          budget -= visibleItems.length;
-          const hiddenInGroup = group.items.length - visibleItems.length;
-          return (
-            <div className="ib-group" key={group.key}>
-              <div className="ib-group-head">
-                <span className="ib-group-count">{group.items.length}</span>
-                <span className="ib-group-desc">{t(group.messageKey, group.vars)}</span>
-              </div>
-              {visibleItems.length > 0 && (
-                <ul>
-                  {visibleItems.map((item) => (
-                    <li key={item.dir}>
-                      <span className="ib-dir">{item.dir}</span>
-                      {item.command && <CopyCommandButton command={item.command} t={t} />}
-                    </li>
-                  ))}
-                  {hiddenInGroup > 0 && !expanded && (
-                    <li className="ib-more" aria-hidden="true">
-                      +{hiddenInGroup}
-                    </li>
-                  )}
-                </ul>
-              )}
-            </div>
-          );
-        })}
-      </div>
-      {hiddenCount > 0 && (
-        <button type="button" className="ib-toggle" onClick={() => setExpanded(true)}>
-          <ChevronRight aria-hidden="true" />
-          {t("banner.expandRest", { count: hiddenCount })}
-        </button>
-      )}
-      {expanded && total > DEFAULT_VISIBLE && (
-        <button type="button" className="ib-toggle" onClick={() => setExpanded(false)}>
-          <ChevronRight className="is-open" aria-hidden="true" />
-          {t("banner.collapse")}
-        </button>
-      )}
-    </section>
-  );
-}

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

@@ -1,80 +0,0 @@
-import { useState } from "react";
-import type { RowRun, T } from "../shared.ts";
-import { verdictClass, verdictLabel } from "../lib/verdict.ts";
-import { formatCost, formatDateTime, formatDuration, formatTokens, totalTokens } from "../lib/format.ts";
-
-/** 全部历史 attempt 打平成一张表;列表在 App 里由 flattenAttempts(全部快照,已跨快照去重)算好。 */
-export function AttemptsView({ attempts, t }: { attempts: RowRun[]; t: T }) {
-  const [query, setQuery] = useState("");
-  const allRuns = attempts;
-  const filtered = allRuns.filter((r: RowRun) => {
-    const q = query.trim().toLowerCase();
-    return !q || `${r.id} ${r.rowLabel} ${r.rowAgent} ${r.rowModel || ""}`.toLowerCase().includes(q);
-  });
-  return (
-    <section id="tab-attempts">
-      <div className="section-head">
-        <h2>{t("section.attempts")}</h2>
-        <div className="controls">
-          <input
-            className="search"
-            type="search"
-            placeholder={t("search.attempts")}
-            autoComplete="off"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-        </div>
-      </div>
-      {!allRuns.length ? (
-        <div className="empty">{t("empty.attempts")}</div>
-      ) : (
-        <div className="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>{t("table.evalId")}</th>
-                <th>{t("table.experiment")}</th>
-                <th>{t("table.verdict")}</th>
-                <th>{t("table.agent")}</th>
-                <th>{t("table.model")}</th>
-                <th>{t("metric.duration")}</th>
-                <th>{t("table.tokens")}</th>
-                <th>{t("table.estCost")}</th>
-                <th>{t("table.ranAt")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filtered.length ? (
-                filtered.map((r: RowRun) => {
-                  const verdict = r.verdict;
-                  return (
-                    <tr key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
-                      <td>
-                        <span className="name">{r.id}</span>
-                      </td>
-                      <td>{r.rowLabel}</td>
-                      <td className={verdictClass(verdict)}>{verdictLabel(verdict, t)}</td>
-                      <td>{r.rowAgent}</td>
-                      <td>{r.rowModel || t("config.default")}</td>
-                      <td className="num">{formatDuration(r.durationMs)}</td>
-                      <td className="num">{formatTokens(totalTokens(r.usage))}</td>
-                      <td className="num">{formatCost(r.estimatedCostUSD)}</td>
-                      <td className="num">{r.startedAt ? formatDateTime(r.startedAt) : "-"}</td>
-                    </tr>
-                  );
-                })
-              ) : (
-                <tr>
-                  <td colSpan={9} style={{ textAlign: "center", color: "var(--muted)" }}>
-                    {t("empty.attemptsFilter")}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </section>
-  );
-}

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

@@ -1,35 +0,0 @@
-import type { RowRun, T } from "../shared.ts";
-import { verdictClass, verdictLabel } from "../lib/verdict.ts";
-import { formatDuration } from "../lib/format.ts";
-import { LazyArtifact } from "../components/LazyArtifact.tsx";
-
-/** 全部历史 attempt 的 trace/transcript 视图;列表在 App 里由 flattenAttempts 算好。 */
-export function TracesView({ attempts, t }: { attempts: RowRun[]; t: T }) {
-  const traceable = attempts.filter((r: RowRun) => r.hasEvents || r.hasTrace);
-  return (
-    <section id="tab-traces">
-      <div className="section-head">
-        <h2>{t("section.traces")}</h2>
-      </div>
-      {!traceable.length ? (
-        <div className="empty">{t("empty.traces")}</div>
-      ) : (
-        traceable.map((r: RowRun) => {
-          const verdict = r.verdict;
-          return (
-            <div className="traces-entry" key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
-              <div className="traces-entry-head">
-                <span className={`${verdictClass(verdict)} traces-verdict`}>{verdictLabel(verdict, t)}</span>
-                <span className="eval-id">{r.id}</span>
-                <span className="traces-exp">{r.rowLabel}</span>
-                <span className="num traces-dur">{formatDuration(r.durationMs)}</span>
-              </div>
-              {r.hasEvents && r.artifactBase ? <LazyArtifact type="transcript" src={`${r.artifactBase}/events.json`} t={t} /> : null}
-              {r.hasTrace && r.artifactBase ? <LazyArtifact type="trace" src={`${r.artifactBase}/trace.json`} t={t} /> : null}
-            </div>
-          );
-        })
-      )}
-    </section>
-  );
-}