static-fire 0.44.0 → 0.54.1

package/web/tasks.tsx

@@ -0,0 +1,122 @@
+// The Tasks page (#79): each suite and its tasks, from the project's own files. For each task, what the agent gets,
+// where it writes, and how the output is graded. The server sends only what core/task-page.ts allows, so the graders'
+// own material (references, sources, the held-out file) never reaches this page. Each suite and task has an address
+// of its own (web/pages.ts: suiteHref, taskHref), so another page can link to it.
+import { useEffect, useState } from "react";
+import type { TaskListing } from "../src/core/authored";
+import type { TaskPage, TaskPageCriterion } from "../src/core/task-page";
+import type { Suite } from "../src/core/types";
+import { api } from "./api";
+import { LevelTag } from "./levels";
+import { suiteAnchor, taskAnchor, taskHref } from "./pages";
+
+const GRADER_TEXT: Record<TaskPageCriterion["grader"], string> = { check: "Check", judge: "Judge", human: "Human" };
+
+/** A task as the page has it: its details, or the reason it has none (an invalid task file). */
+type Loaded = { page: TaskPage } | { error: string };
+
+export function TasksPage() {
+  const [suites, setSuites] = useState<Suite[] | null>(null);
+  const [listing, setListing] = useState<TaskListing[]>([]);
+  const [tasks, setTasks] = useState<Record<string, Loaded>>({});
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let live = true;
+    Promise.all([api<Suite[]>("/api/suites"), api<TaskListing[]>("/api/tasks")])
+      .then(async ([s, l]) => {
+        const loaded = await Promise.all(l.map((t) =>
+          api<TaskPage>(`/api/tasks/${encodeURIComponent(t.id)}`).then((page): Loaded => ({ page }), (e: Error): Loaded => ({ error: e.message }))));
+        if (!live) return;
+        setSuites(s); setListing(l);
+        setTasks(Object.fromEntries(l.map((t, i) => [t.id, loaded[i]!])));
+      })
+      .catch((e: Error) => { if (live) setError(e.message); });
+    return () => { live = false; };
+  }, []);
+  // A link to one suite or task opens the page there, once the entries exist.
+  useEffect(() => {
+    if (!suites || !location.hash) return;
+    document.getElementById(decodeURIComponent(location.hash.slice(1)))?.scrollIntoView();
+  }, [suites]);
+
+  if (error) return <div className="empty card"><div className="kicker">Could not load the tasks</div><p className="error" style={{ whiteSpace: "pre-wrap" }}>{error}</p></div>;
+  if (!suites) return <div className="empty card"><div className="kicker">Tasks</div><h1>Loading…</h1></div>;
+
+  // Each task is shown once, under the first suite that lists it; a later suite links to it.
+  const shown = new Set<string>();
+  const title = (id: string) => listing.find((t) => t.id === id)?.title ?? id;
+  const groups = suites.map((s) => ({ suite: s, tasks: s.tasks.map((id) => { const first = !shown.has(id); shown.add(id); return { id, first }; }) }));
+  const loose = listing.filter((t) => !shown.has(t.id)).map((t) => t.id);
+
+  return (
+    <>
+      <section className="hero">
+        <div className="kicker">Tasks</div>
+        <h1>Suites and tasks</h1>
+        <p className="page-sub">What each task asks of the agent and how its output is graded, from the project's task files. Graders' own material (references, sources, the held-out file) is not shown.</p>
+      </section>
+      {groups.map(({ suite, tasks: ids }) => (
+        <section key={suite.id} id={suiteAnchor(suite.id)} className="card task-suite">
+          <div className="kicker">Suite</div>
+          <h2>{suite.title}</h2>
+          {suite.description && <p className="sub">{suite.description}</p>}
+          {ids.length === 0 && <p className="note">This suite lists no tasks.</p>}
+          {ids.map(({ id, first }) => first ? <TaskEntry key={id} id={id} title={title(id)} loaded={tasks[id]} />
+            : <p key={id} className="note task-ref">{title(id)}: <a href={taskHref(id)}>shown above</a>.</p>)}
+        </section>
+      ))}
+      {loose.length > 0 && (
+        <section className="card task-suite">
+          <div className="kicker">Not in a suite</div>
+          <h2>Other tasks</h2>
+          <p className="sub">These tasks are in no suite, so the Results page has no suite index for them.</p>
+          {loose.map((id) => <TaskEntry key={id} id={id} title={title(id)} loaded={tasks[id]} />)}
+        </section>
+      )}
+    </>
+  );
+}
+
+function TaskEntry({ id, title, loaded }: { id: string; title: string; loaded?: Loaded }) {
+  if (!loaded || "error" in loaded) {
+    return (
+      <article id={taskAnchor(id)} className="task-entry">
+        <h3>{title}</h3>
+        <p className="error" style={{ whiteSpace: "pre-wrap" }}>This task file has errors, so it cannot run:{"\n"}{loaded?.error ?? "not found"}</p>
+      </article>
+    );
+  }
+  const t = loaded.page;
+  const groups = [{ id: "gates", label: "Gates", note: "If a gate fails, the task score is 0.", criteria: t.gates }, ...t.measures.map((m) => ({ ...m, note: m.weight !== 1 ? `Weight ${m.weight}` : "" }))]
+    .filter((g) => g.criteria.length);
+  return (
+    <article id={taskAnchor(id)} className="task-entry">
+      <h3>{t.title}{t.version != null && <span className="muted task-version"> v{t.version}</span>}</h3>
+      {t.description && <p className="task-desc">{t.description}</p>}
+      <h4>What the agent gets</h4>
+      <pre className="task-prompt">{t.prompt}</pre>
+      <dl className="task-facts">
+        <dt>Input files</dt><dd>{t.inputFiles.length ? t.inputFiles.map((f) => <code key={f}>{f}</code>) : <span className="muted">None</span>}</dd>
+        {t.projectFiles && <><dt>Project files</dt><dd>{t.projectFiles.length ? t.projectFiles.map((f) => <code key={f}>{f}</code>) : <span className="muted">None</span>}</dd></>}
+        <dt>Output</dt><dd><code>{t.output}</code></dd>
+      </dl>
+      <h4>How it is graded</h4>
+      <div className="table-wrap"><table className="criteria task-criteria">
+        <thead><tr><th>Question</th><th>Level</th><th>Grader</th></tr></thead>
+        <tbody>
+          {groups.map((g) => [
+            <tr key={g.id} className="group"><td colSpan={3}>{g.label}{g.note && <span className="group-note"> · {g.note}</span>}</td></tr>,
+            ...g.criteria.map((c) => (
+              <tr key={`${g.id}-${c.id}`}>
+                <td className="question">{c.question}</td>
+                <td><LevelTag level={c.level} /></td>
+                <td className="muted">{GRADER_TEXT[c.grader]}</td>
+              </tr>
+            )),
+          ])}
+        </tbody>
+      </table></div>
+    </article>
+  );
+}

package/web/suite-notes.ts

@@ -1,20 +0,0 @@
-// The suite descriptions the Results page shows with a chart. A suite can state facts that must stand next to any
-// chart of it (for example where its tasks and criteria come from), so every chart that draws a suite shows them.
-import type { Suite } from "../src/core/types";
-import type { Scope } from "../src/core/view-query";
-
-export interface SuiteNote { title: string; description: string }
-
-/**
- * The described suites a chart draws: the chosen suite, every suite in the view for the Workflow Index, or each
- * suite that holds the chosen task (a task's view has no suites of its own). Suites without a description are left out.
- */
-export function suiteNotes(sel: Scope, suiteIds: string[], suites: Map<string, Suite>): SuiteNote[] {
-  const ids = sel.kind === "suite" ? [sel.id]
-    : sel.kind === "index" ? suiteIds
-    : [...suites.keys()].filter((id) => suites.get(id)!.tasks.includes(sel.id));
-  return ids.flatMap((id) => {
-    const s = suites.get(id), description = s?.description?.trim();
-    return s && description ? [{ title: s.title, description }] : [];
-  });
-}