swarm-ui: a review try-out page

A page to try a review classification against a real PR: repo, PR number and one or more classifications (name, description, polarity, threshold). Run posts to the controller's try-out endpoint and polls until the run is done or failed, saying it is running meanwhile, then shows the review's table, the overall verdict and the head commit. A row that could not run shows its error in place of a reason, and a failed run shows its error. The inputs stay so the run can be edited and repeated. Nothing is stored and nothing is posted to the forge. Route, nav entry and a section in docs/swarm/ui.md.

frontend/packages/swarm-ui/src/pages/review-tryout/ClassificationEditor.tsx

@@ -0,0 +1,65 @@
+// <ClassificationEditor> — the fields of one review classification: a name, a
+// description (the prompt the model answers), which answer passes, and how
+// certain the model has to be for its answer to count.
+import { Button } from "../../ui/button/Button.js";
+import { SelectField } from "../../ui/select-field/SelectField.js";
+import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
+import { TextField } from "../../ui/text-field/TextField.js";
+import type { ClassificationDraft, Polarity } from "./TryOutTypes.js";
+import "./ReviewTryOutPage.css";
+
+const POLARITY_OPTIONS = [
+  { value: "positive", label: "positive — the PR should match" },
+  { value: "negative", label: "negative — the PR should not match" },
+];
+
+export function ClassificationEditor({
+  draft,
+  onChange,
+  onRemove,
+}: {
+  draft: ClassificationDraft;
+  onChange: (next: ClassificationDraft) => void;
+  /** Absent when this is the only classification: one is the minimum. */
+  onRemove?: () => void;
+}) {
+  const id = `tryout-${draft.key}`;
+  return (
+    <div class="ui-tryout-classification">
+      <TextField
+        id={`${id}-name`}
+        label="name"
+        value={draft.name}
+        placeholder="e.g. datetime"
+        onInput={(name) => onChange({ ...draft, name })}
+      />
+      <TextAreaField
+        id={`${id}-description`}
+        label="description"
+        value={draft.description}
+        rows={4}
+        placeholder="what to look for in the PR, e.g. does it add a naive datetime?"
+        onInput={(description) => onChange({ ...draft, description })}
+      />
+      <div class="ui-tryout-classification-row">
+        <SelectField
+          id={`${id}-polarity`}
+          label="polarity"
+          value={draft.polarity}
+          options={POLARITY_OPTIONS}
+          onChange={(polarity) =>
+            onChange({ ...draft, polarity: polarity as Polarity })
+          }
+        />
+        <TextField
+          id={`${id}-threshold`}
+          label="threshold (0–100)"
+          value={draft.threshold}
+          pattern="[0-9]+"
+          onInput={(threshold) => onChange({ ...draft, threshold })}
+        />
+        {onRemove ? <Button onClick={onRemove}>remove</Button> : null}
+      </div>
+    </div>
+  );
+}