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/job-row.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import type { Kind } from "./status";
+import { ProgressBar } from "./progress-bar";
+import { StatusChip } from "./status-chip";
+
+// Map the severity kind to the row's visual class (stripe/bar color).
+function rowClass(kind: Kind): string {
+  if (kind === "attention") return "attention";
+  if (kind === "verify" || kind === "done") return "verify";
+  return "working";
+}
+
+export function JobRow({
+  artist,
+  album,
+  kind,
+  label,
+  step,
+  total,
+  meta,
+  note,
+  indeterminate,
+}: {
+  artist: string;
+  album: string;
+  kind: Kind;
+  label: string;
+  step: number;
+  total: number;
+  meta?: ReactNode;
+  note?: ReactNode;
+  indeterminate?: boolean;
+}) {
+  return (
+    <article className={`job ${rowClass(kind)}`}>
+      <div className="stripe" />
+      <div>
+        <h3 className="title">
+          {album} <span className="artist">· {artist}</span>
+        </h3>
+        {meta ? <div className="meta">{meta}</div> : null}
+        {note ? (
+          <div className="note">{note}</div>
+        ) : kind !== "attention" ? (
+          <ProgressBar kind={kind} step={step} total={total} indeterminate={indeterminate} />
+        ) : null}
+      </div>
+      <StatusChip kind={kind} label={label} />
+    </article>
+  );
+}

web/src/app/_ui/pressed-list.tsx

@@ -0,0 +1,17 @@
+export type PressedItem = { id: string; artist: string; album: string; matrix: string };
+
+export function PressedList({ items }: { items: PressedItem[] }) {
+  return (
+    <ul className="pressed">
+      {items.map((it) => (
+        <li key={it.id}>
+          <span className="mark">✓</span>
+          <span className="name">
+            {it.album} <span className="artist">· {it.artist}</span>
+          </span>
+          <span className="matrix">{it.matrix}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}

web/src/app/_ui/progress-bar.tsx

@@ -0,0 +1,37 @@
+import type { Kind } from "./status";
+
+/** A thin ruled progress bar. `indeterminate` for open-ended stages (searching);
+ *  otherwise a discrete step/total fill with a step readout. */
+export function ProgressBar({
+  kind,
+  step,
+  total,
+  indeterminate,
+}: {
+  kind: Kind;
+  step: number;
+  total: number;
+  indeterminate?: boolean;
+}) {
+  if (indeterminate) {
+    return (
+      <div className="prog">
+        <div className="bar indet">
+          <span />
+        </div>
+        <div className="pct muted">searching</div>
+      </div>
+    );
+  }
+  const pct = total > 0 ? Math.round((step / total) * 100) : 0;
+  return (
+    <div className="prog">
+      <div className="bar">
+        <span style={{ width: `${pct}%` }} />
+      </div>
+      <div className="pct">
+        {step}/{total}
+      </div>
+    </div>
+  );
+}

web/src/app/_ui/section-header.tsx

@@ -0,0 +1,9 @@
+export function SectionHeader({ title, note }: { title: string; note?: string }) {
+  return (
+    <div className="dept">
+      <h2>{title}</h2>
+      <span className="fill" />
+      {note ? <span className="count">{note}</span> : null}
+    </div>
+  );
+}

web/src/app/_ui/stat-tiles.tsx

@@ -0,0 +1,17 @@
+export type Tile = { k: string; v: number | string; unit?: string; accent?: boolean };
+
+export function StatTiles({ items }: { items: Tile[] }) {
+  return (
+    <section className="tiles">
+      {items.map((t) => (
+        <div key={t.k} className={`tile${t.accent ? " accent" : ""}`}>
+          <div className="k">{t.k}</div>
+          <div className="v">
+            {t.v}
+            {t.unit ? <small>{t.unit}</small> : null}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}

web/src/app/_ui/status-chip.tsx

@@ -0,0 +1,5 @@
+import type { Kind } from "./status";
+
+export function StatusChip({ kind, label }: { kind: Kind; label: string }) {
+  return <span className={`chip ${kind}`}>{label}</span>;
+}

web/src/app/_ui/status.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { describeJob } from "./status";
+
+describe("describeJob", () => {
+  it("maps pipeline states to literal labels + severity kind", () => {
+    expect(describeJob("requested", "intake")).toMatchObject({ label: "Queued", kind: "idle" });
+    expect(describeJob("matching", "match")).toMatchObject({ label: "Searching", kind: "working" });
+    expect(describeJob("downloading", "download")).toMatchObject({ label: "Downloading", kind: "working" });
+    expect(describeJob("tagging", "tag")).toMatchObject({ label: "Tagging", kind: "verify" });
+    expect(describeJob("imported", "import")).toMatchObject({ label: "Pressed", kind: "done" });
+    expect(describeJob("needs_attention", "download")).toMatchObject({ label: "Needs attention", kind: "attention" });
+  });
+
+  it("derives a stepped progress from the pipeline stage", () => {
+    expect(describeJob("downloading", "download")).toMatchObject({ step: 4, totalSteps: 6 });
+    expect(describeJob("matching", "intake")).toMatchObject({ step: 1, totalSteps: 6 });
+  });
+
+  it("falls back gracefully for unknown states/stages", () => {
+    expect(describeJob("weird", "intake").kind).toBe("idle");
+    expect(describeJob("weird", "intake").label).toBe("Weird");
+    expect(describeJob("downloading", "???").step).toBe(0);
+  });
+});

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