feat(web): Pressing Plant component library + describeJob

design.css component classes (masthead, contents nav, tiles, dept header,
job row + severity stripe, status chip, progress bar, pressed list, buttons,
fields). Presentational _ui components. describeJob maps worker Job.state to
literal labels + severity kind + stepped progress (unit-tested).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/_ui/status.ts

@@ -0,0 +1,30 @@
+export type Kind = "idle" | "working" | "verify" | "done" | "attention";
+
+// Pipeline stage order (worker Job.currentStage), used to derive a stepped progress.
+const STAGES = ["intake", "match", "rank", "download", "tag", "import"];
+
+// Worker Job.state -> a literal, legible label + severity kind. The record-label
+// metaphor stays in the chrome; these labels never obscure what's happening.
+const STATE_MAP: Record<string, { label: string; kind: Kind }> = {
+  requested: { label: "Queued", kind: "idle" },
+  matching: { label: "Searching", kind: "working" },
+  matched: { label: "Matched", kind: "working" },
+  downloading: { label: "Downloading", kind: "working" },
+  tagging: { label: "Tagging", kind: "verify" },
+  imported: { label: "Pressed", kind: "done" },
+  needs_attention: { label: "Needs attention", kind: "attention" },
+};
+
+export function describeJob(
+  state: string,
+  stage: string,
+): { label: string; kind: Kind; step: number; totalSteps: number } {
+  const base =
+    STATE_MAP[state] ??
+    ({ label: state ? state[0].toUpperCase() + state.slice(1) : "Unknown", kind: "idle" } as {
+      label: string;
+      kind: Kind;
+    });
+  const idx = STAGES.indexOf(stage);
+  return { ...base, step: idx >= 0 ? idx + 1 : 0, totalSteps: STAGES.length };
+}