From 439d138967dc8d0d61b684c5dc1bc8cd3a24f72a Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Fri, 30 Oct 2026 21:37:56 +0100
Subject: [PATCH] feat(web): app shell, library, entry detail

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/Cover.tsx           |  18 +
 apps/web/src/components/DetailBoxes.tsx     | 520 ++++++++++++++++++++
 apps/web/src/components/EntryDetail.tsx     | 189 +++++++
 apps/web/src/components/HistoryDrawer.tsx   | 115 +++++
 apps/web/src/components/Icon.tsx            |  21 +
 apps/web/src/components/LinkToCatalogue.tsx | 102 ++++
 apps/web/src/components/Shell.tsx           |  75 +++
 apps/web/src/components/StarRating.tsx      | 148 ++++++
 apps/web/src/hooks.ts                       |  46 ++
 apps/web/src/main.tsx                       |  73 +++
 apps/web/src/routes/library.tsx             | 228 +++++++++
 apps/web/src/routes/login.tsx               |  51 ++
 apps/web/src/routes/not-yet.tsx             |  24 +
 apps/web/src/routes/register.tsx            |  92 ++++
 apps/web/src/settings.ts                    |  38 ++
 apps/web/test/api.test.ts                   |   6 +-
 16 files changed, 1743 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/Cover.tsx
 create mode 100644 apps/web/src/components/DetailBoxes.tsx
 create mode 100644 apps/web/src/components/EntryDetail.tsx
 create mode 100644 apps/web/src/components/HistoryDrawer.tsx
 create mode 100644 apps/web/src/components/Icon.tsx
 create mode 100644 apps/web/src/components/LinkToCatalogue.tsx
 create mode 100644 apps/web/src/components/Shell.tsx
 create mode 100644 apps/web/src/components/StarRating.tsx
 create mode 100644 apps/web/src/hooks.ts
 create mode 100644 apps/web/src/main.tsx
 create mode 100644 apps/web/src/routes/library.tsx
 create mode 100644 apps/web/src/routes/login.tsx
 create mode 100644 apps/web/src/routes/not-yet.tsx
 create mode 100644 apps/web/src/routes/register.tsx
 create mode 100644 apps/web/src/settings.ts

diff --git a/apps/web/src/components/Cover.tsx b/apps/web/src/components/Cover.tsx
new file mode 100644
index 0000000..f477423
--- /dev/null
+++ b/apps/web/src/components/Cover.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { mediaColour } from "../format.ts";
+
+/** A cover image, the media-type gradient when there is none, or the striped draft placeholder. */
+export function Cover({ url, mediaType, draft, size }: { url: string; mediaType: string; draft: boolean; size?: "large" | "small" }) {
+  const [failed, setFailed] = useState(false);
+  const cls = `cover${size ? ` ${size}` : ""}`;
+  if (url && !failed) {
+    return (
+      <div className={cls}>
+        <img src={url} alt="" loading="lazy" onError={() => setFailed(true)} />
+      </div>
+    );
+  }
+  if (draft) return <div className={`${cls} is-draft`} aria-hidden="true" />;
+  const c = mediaColour(mediaType);
+  return <div className={cls} aria-hidden="true" style={{ background: `linear-gradient(160deg, ${c}, color-mix(in srgb, ${c} 25%, #0b0716))` }} />;
+}
diff --git a/apps/web/src/components/DetailBoxes.tsx b/apps/web/src/components/DetailBoxes.tsx
new file mode 100644
index 0000000..7dd1e66
--- /dev/null
+++ b/apps/web/src/components/DetailBoxes.tsx
@@ -0,0 +1,520 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState, type FormEvent, type ReactNode } from "react";
+import { Link } from "wouter";
+import { ApiError, api, type Attachment, type Copy, type CustomFieldDef, type Engagement, type EntryView } from "../api.ts";
+import {
+  actorConnectionId,
+  describeRating,
+  engagementNouns,
+  formatDateRange,
+  formatPartialDate,
+  formatRating,
+  ordinal,
+  parsePartialDate,
+  rollupLabel,
+  statusLabel,
+  timeAgo,
+  type PartialDate,
+} from "../format.ts";
+import { useEntryPatch, useSources } from "../hooks.ts";
+import { useRatingScale } from "../settings.ts";
+import { Icon } from "./Icon.tsx";
+import { StarRating } from "./StarRating.tsx";
+
+function Box({ title, id, action, wide, className, children }: { title: string; id: string; action?: ReactNode; wide?: boolean; className?: string; children: ReactNode }) {
+  return (
+    <section className={`box${wide ? " wide" : ""}${className ? ` ${className}` : ""}`} aria-labelledby={id}>
+      <div className="box-head">
+        <h2 id={id}>{title}</h2>
+        {action}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+const errText = (e: unknown) => (e instanceof ApiError ? e.message : "That didn't save. Try again.");
+
+// ---------------------------------------------------------------------------------------------
+// Reads / plays
+// ---------------------------------------------------------------------------------------------
+
+export function EngagementsBox({
+  entry,
+  nouns,
+  engagements,
+  loading,
+}: {
+  entry: EntryView;
+  nouns: ReturnType<typeof engagementNouns>;
+  engagements: Engagement[] | undefined;
+  loading: boolean;
+}) {
+  const qc = useQueryClient();
+  const [adding, setAdding] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const refresh = () => {
+    void qc.invalidateQueries({ queryKey: ["engagements", entry.id] });
+    void qc.invalidateQueries({ queryKey: ["history", entry.id] });
+  };
+  const add = useMutation({
+    mutationFn: (b: { startedAt: PartialDate | null; finishedAt: PartialDate | null }) => api.addEngagement(entry.id, b),
+    onSuccess: () => {
+      setAdding(false);
+      refresh();
+    },
+    onError: (e) => setFormError(errText(e)),
+  });
+  const remove = useMutation({ mutationFn: api.deleteEngagement, onSuccess: refresh });
+
+  function submit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const f = new FormData(e.currentTarget);
+    const read = (k: string) => {
+      const raw = String(f.get(k) ?? "").trim();
+      if (!raw) return { ok: true as const, v: null };
+      const pd = parsePartialDate(raw);
+      return pd ? { ok: true as const, v: pd } : { ok: false as const, v: null };
+    };
+    const s = read("startedAt");
+    const d = read("finishedAt");
+    if (!s.ok || !d.ok) return setFormError("Use a year, a month or a day: 2025, 2025-03 or 2025-03-14.");
+    setFormError(null);
+    add.mutate({ startedAt: s.v, finishedAt: d.v });
+  }
+
+  // Oldest is the 1st; show newest first, like the mockup.
+  const ordered = [...(engagements ?? [])].sort((a, b) => (a.createdAt < b.createdAt ? -1 : 1));
+  const rows = ordered.map((g, i) => ({ g, n: i + 1 })).reverse();
+
+  return (
+    <Box
+      title={nouns.box}
+      id="box-engagements"
+      action={
+        !adding && (
+          <button type="button" className="btn ghost small" onClick={() => setAdding(true)}>
+            <Icon name="plus" /> {nouns.log}
+          </button>
+        )
+      }
+    >
+      {loading ? null : rows.length === 0 && !adding ? (
+        <p className="empty-line">Nothing logged yet.</p>
+      ) : (
+        rows.map(({ g, n }) => (
+          <div className="r" key={g.id}>
+            <span>{ordinal(n)} {nouns.one}</span>
+            <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
+              <span className="tabular">{formatDateRange(g.startedAt, g.finishedAt)}</span>
+              <button
+                type="button"
+                className="btn ghost small x"
+                aria-label={`Remove ${ordinal(n)} ${nouns.one}`}
+                disabled={remove.isPending}
+                onClick={() => remove.mutate(g.id)}
+              >
+                <Icon name="x" />
+              </button>
+            </span>
+          </div>
+        ))
+      )}
+      {adding && (
+        <form onSubmit={submit} aria-label={nouns.log}>
+          <div className="two">
+            <label className="field">
+              <span>Started</span>
+              <input className="input tabular" name="startedAt" placeholder="2025-03-14" inputMode="numeric" autoFocus aria-describedby="date-hint" />
+            </label>
+            <label className="field">
+              <span>Finished</span>
+              <input className="input tabular" name="finishedAt" placeholder="2025-03" inputMode="numeric" aria-describedby="date-hint" />
+            </label>
+          </div>
+          <small className="hint" id="date-hint">A year, month or day is fine. Leave blank if you don't know.</small>
+          {formError && <p className="error-text" role="alert">{formError}</p>}
+          <div className="actions">
+            <button className="btn primary small" disabled={add.isPending}>Save</button>
+            <button type="button" className="btn ghost small" onClick={() => (setAdding(false), setFormError(null))}>Cancel</button>
+          </div>
+        </form>
+      )}
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------------------------
+// Your copy
+// ---------------------------------------------------------------------------------------------
+
+function formatPrice(c: Copy): string {
+  if (c.priceCents === null) return "";
+  const amount = c.priceCents / 100;
+  if (!c.currency) return amount.toFixed(2);
+  try {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency: c.currency, minimumFractionDigits: c.priceCents % 100 ? 2 : 0 }).format(amount);
+  } catch {
+    return `${amount.toFixed(2)} ${c.currency}`;
+  }
+}
+
+export function CopyBox({ entry }: { entry: EntryView }) {
+  const qc = useQueryClient();
+  const copies = useQuery({ queryKey: ["copies", entry.workId], queryFn: () => api.copies(entry.workId) });
+  const [adding, setAdding] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const add = useMutation({
+    mutationFn: api.addCopy,
+    onSuccess: () => {
+      setAdding(false);
+      void qc.invalidateQueries({ queryKey: ["copies", entry.workId] });
+    },
+    onError: (e) => setFormError(errText(e)),
+  });
+
+  function submit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const f = new FormData(e.currentTarget);
+    const s = (k: string) => String(f.get(k) ?? "").trim() || null;
+    const when = s("acquiredAt");
+    const acquiredAt = when ? parsePartialDate(when) : null;
+    if (when && !acquiredAt) return setFormError("Use a year, a month or a day for when: 2025, 2025-02 or 2025-02-14.");
+    const price = s("price");
+    const priceNum = price ? Number(price.replace(",", ".")) : null;
+    if (price && (priceNum === null || Number.isNaN(priceNum))) return setFormError("Price should be a number, like 14 or 14.99.");
+    const currency = s("currency")?.toUpperCase() ?? null;
+    if (currency && !/^[A-Z]{3}$/.test(currency)) return setFormError("Currency is a three-letter code, like GBP or EUR.");
+    setFormError(null);
+    add.mutate({
+      workId: entry.workId,
+      format: s("format"),
+      acquiredFrom: s("acquiredFrom"),
+      acquiredAt,
+      priceCents: priceNum === null ? null : Math.round(priceNum * 100),
+      currency,
+    });
+  }
+
+  const list = copies.data ?? [];
+  return (
+    <Box
+      title="Your copy"
+      id="box-copy"
+      action={
+        !adding && list.length > 0 && (
+          <button type="button" className="btn ghost small" onClick={() => setAdding(true)}>
+            <Icon name="plus" /> Another
+          </button>
+        )
+      }
+    >
+      {copies.isPending ? null : list.length === 0 && !adding ? (
+        <div className="r">
+          <span>You haven't recorded a copy.</span>
+          <button type="button" className="btn ghost small" onClick={() => setAdding(true)}>Add your copy</button>
+        </div>
+      ) : (
+        list.map((c) => {
+          const when = [formatPartialDate(c.acquiredAt), formatPrice(c)].filter(Boolean).join(" · ");
+          return (
+            <div className="copy" key={c.id}>
+              {c.acquiredFrom && <div className="r"><span>Bought</span><span>{c.acquiredFrom}</span></div>}
+              {when && <div className="r"><span>When / price</span><span className="tabular">{when}</span></div>}
+              {c.format && <div className="r"><span>Format</span><span>{c.format}</span></div>}
+              {!c.acquiredFrom && !when && !c.format && <div className="r"><span>Owned</span><span>No details yet</span></div>}
+            </div>
+          );
+        })
+      )}
+      {adding && (
+        <form onSubmit={submit} aria-label="Add your copy">
+          <div className="two">
+            <label className="field"><span>Bought at</span><input className="input" name="acquiredFrom" placeholder="Waterstones, Leeds" autoFocus /></label>
+            <label className="field"><span>Format</span><input className="input" name="format" placeholder="Hardback" /></label>
+          </div>
+          <div className="two">
+            <label className="field"><span>When</span><input className="input tabular" name="acquiredAt" placeholder="2025-02" /></label>
+            <div className="two" style={{ gridTemplateColumns: "1fr 72px" }}>
+              <label className="field"><span>Price</span><input className="input tabular" name="price" inputMode="decimal" placeholder="14" /></label>
+              <label className="field"><span>Currency</span><input className="input" name="currency" placeholder="GBP" maxLength={3} /></label>
+            </div>
+          </div>
+          {formError && <p className="error-text" role="alert">{formError}</p>}
+          <div className="actions">
+            <button className="btn primary small" disabled={add.isPending}>Save</button>
+            <button type="button" className="btn ghost small" onClick={() => (setAdding(false), setFormError(null))}>Cancel</button>
+          </div>
+        </form>
+      )}
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------------------------
+// Attachments
+// ---------------------------------------------------------------------------------------------
+
+// The API has no "list attachments of an entry" route yet, so this shows what was uploaded in this session.
+const uploaded = new Map<string, Attachment[]>();
+
+export function AttachmentsBox({ entry }: { entry: EntryView }) {
+  const [items, setItems] = useState<Attachment[]>(() => uploaded.get(entry.id) ?? []);
+  const [error, setError] = useState<string | null>(null);
+  const upload = useMutation({
+    mutationFn: (file: File) => api.upload(file, entry.id),
+    onSuccess: (a) => {
+      const next = [...items, a];
+      uploaded.set(entry.id, next);
+      setItems(next);
+      setError(null);
+    },
+    onError: (e) => setError(e instanceof ApiError && e.code === "validation" ? "That file type isn't supported. Use an image, a PDF or a text file." : errText(e)),
+  });
+  return (
+    <Box title="Attachments" id="box-attachments">
+      <div className="thumbs">
+        {items.map((a) => {
+          const url = `/api/v1/attachments/${a.id}`;
+          const image = a.mime.startsWith("image/");
+          return (
+            <a
+              key={a.id}
+              className="thumb"
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+              title={a.filename}
+              aria-label={`Open ${a.filename}`}
+              style={image ? { backgroundImage: `url("${url}")` } : undefined}
+            >
+              {!image && <Icon name="file" />}
+            </a>
+          );
+        })}
+        <label className="thumb upload" title="Add screenshots, photos or receipts">
+          <span className="sr-only">Upload an attachment</span>
+          {upload.isPending ? "…" : <Icon name="upload" />}
+          <input
+            type="file"
+            className="sr-only"
+            accept="image/*,application/pdf,text/plain"
+            disabled={upload.isPending}
+            onChange={(e) => {
+              const f = e.currentTarget.files?.[0];
+              if (f) upload.mutate(f);
+              e.currentTarget.value = "";
+            }}
+          />
+        </label>
+      </div>
+      {error && <p className="error-text" role="alert">{error}</p>}
+      {items.length === 0 && !error && <p className="hint">Screenshots, photos of your copy, receipts.</p>}
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------------------------
+// Linked sources
+// ---------------------------------------------------------------------------------------------
+
+export function SourcesBox({ entry, engagements }: { entry: EntryView; engagements: Engagement[] }) {
+  const sources = useSources();
+  // A source is linked when it has written any field of the entry or its reads.
+  const ids = new Set<string>();
+  for (const fs of [entry.fieldSources, ...engagements.map((g) => g.fieldSources)]) {
+    for (const actor of Object.values(fs ?? {})) {
+      const id = actorConnectionId(actor);
+      if (id) ids.add(id);
+    }
+  }
+  const linked = (sources.data ?? []).filter((s) => ids.has(s.id));
+  return (
+    <Box title="Linked sources" id="box-sources">
+      {linked.length === 0 ? (
+        <p className="empty-line">No source syncs this entry. Everything here is yours.</p>
+      ) : (
+        linked.map((s) => (
+          <div className="src" key={s.id}>
+            <i className={s.status === "active" ? "" : "paused"} aria-hidden="true" />
+            {s.name} · {s.status !== "active" ? "paused" : s.lastRunAt ? `synced ${timeAgo(s.lastRunAt)}` : "not synced yet"}
+          </div>
+        ))
+      )}
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------------------------
+// Custom fields
+// ---------------------------------------------------------------------------------------------
+
+export function CustomFieldsBox({ entry, type }: { entry: EntryView; type: string }) {
+  const defs = useQuery({ queryKey: ["custom-fields", type], queryFn: () => api.customFields(type), staleTime: 60_000 });
+  const patch = useEntryPatch(entry.id);
+  if (!defs.data?.length) return null;
+  const save = (def: CustomFieldDef, value: unknown) => {
+    const next = { ...entry.customFields };
+    if (value === null || value === "" || (Array.isArray(value) && value.length === 0)) delete next[def.id];
+    else next[def.id] = value;
+    if (JSON.stringify(next) !== JSON.stringify(entry.customFields)) patch.mutate({ customFields: next });
+  };
+  return (
+    <Box title="Details" id="box-custom" wide>
+      <div className="custom">
+        {defs.data.map((d) => (
+          <CustomField key={d.id} def={d} value={entry.customFields[d.id]} onSave={(v) => save(d, v)} />
+        ))}
+      </div>
+      {patch.error && <p className="error-text" role="alert">{errText(patch.error)}</p>}
+    </Box>
+  );
+}
+
+function CustomField({ def, value, onSave }: { def: CustomFieldDef; value: unknown; onSave: (v: unknown) => void }) {
+  const scale = useRatingScale();
+  const str = value === undefined || value === null ? "" : String(value);
+  const text = (multiline: boolean, inputType = "text") => (
+    <label className="field">
+      <span>{def.name}</span>
+      {multiline ? (
+        <textarea className="textarea" defaultValue={str} key={str} rows={3} onBlur={(e) => onSave(e.target.value.trim())} />
+      ) : (
+        <input
+          className="input"
+          type={inputType}
+          defaultValue={str}
+          key={str}
+          placeholder={def.type === "date" ? "2025-03-14" : undefined}
+          onBlur={(e) => {
+            const v = e.target.value.trim();
+            if (def.type === "number") onSave(v === "" ? null : Number(v));
+            else if (def.type === "date") onSave(v === "" || parsePartialDate(v) ? v : str);
+            else onSave(v);
+          }}
+        />
+      )}
+    </label>
+  );
+  switch (def.type) {
+    case "long_text":
+      return text(true);
+    case "number":
+      return text(false, "number");
+    case "url":
+      return text(false, "url");
+    case "boolean":
+      return (
+        <label className="inline">
+          <input type="checkbox" checked={value === true} onChange={(e) => onSave(e.target.checked ? true : null)} />
+          {def.name}
+        </label>
+      );
+    case "single_select":
+      return (
+        <label className="field">
+          <span>{def.name}</span>
+          <select className="select" value={str} onChange={(e) => onSave(e.target.value || null)}>
+            <option value="">—</option>
+            {def.options.map((o) => <option key={o} value={o}>{o}</option>)}
+          </select>
+        </label>
+      );
+    case "multi_select": {
+      const cur = Array.isArray(value) ? (value as string[]) : [];
+      return (
+        <fieldset className="field" style={{ border: 0 }}>
+          <legend className="hint" style={{ color: "var(--text-muted)", fontWeight: 500, marginBottom: 5 }}>{def.name}</legend>
+          <div className="checks">
+            {def.options.map((o) => (
+              <label key={o} className="inline">
+                <input type="checkbox" checked={cur.includes(o)} onChange={(e) => onSave(e.target.checked ? [...cur, o] : cur.filter((x) => x !== o))} />
+                {o}
+              </label>
+            ))}
+          </div>
+        </fieldset>
+      );
+    }
+    case "rating":
+      return (
+        <div className="field">
+          <span>{def.name}</span>
+          <StarRating value={typeof value === "number" ? value : null} scale={scale} label={def.name} onChange={onSave} />
+        </div>
+      );
+    default:
+      return text(false);
+  }
+}
+
+// ---------------------------------------------------------------------------------------------
+// Children (seasons, episodes, volumes)
+// ---------------------------------------------------------------------------------------------
+
+export function ChildrenBox({ entry, type }: { entry: EntryView; type: string }) {
+  const scale = useRatingScale();
+  const children = useQuery({
+    queryKey: ["entries", { parentId: entry.workId }],
+    queryFn: () => api.entries({ parentId: entry.workId, limit: 200 }),
+  });
+  const label = rollupLabel(type, entry.childSummary ? { ...entry.childSummary, completed: 0 } : null) ?? "Parts";
+  const title = label.replace(/^\d+\s+/, "");
+  return (
+    <Box title={title.charAt(0).toUpperCase() + title.slice(1)} id="box-children" wide>
+      <ul className="children">
+        {(children.data?.items ?? []).map((c) => (
+          <li key={c.id}>
+            <Link href={`/entries/${c.id}`}>
+              <span className="t">
+                {c.work.title}
+                <span className="s">{statusLabel(c.status, c.work.mediaType)}</span>
+              </span>
+              {c.rating !== null ? (
+                <span className="stars" role="img" aria-label={describeRating(c.rating, scale)}>{formatRating(c.rating, scale)}</span>
+              ) : (
+                <span className="s">Not rated</span>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------------------------
+// Review
+// ---------------------------------------------------------------------------------------------
+
+export function ReviewBox({ entry }: { entry: EntryView }) {
+  const patch = useEntryPatch(entry.id);
+  const [saved, setSaved] = useState(false);
+  const save = (v: string) => {
+    const next = v.trim() === "" ? null : v;
+    if (next === entry.review) return;
+    patch.mutate({ review: next }, { onSuccess: () => setSaved(true) });
+  };
+  return (
+    <Box
+      title="Your review"
+      id="box-review"
+      wide
+      className="review"
+      action={<span className="saved" aria-live="polite">{patch.isPending ? "Saving…" : saved ? "Saved" : ""}</span>}
+    >
+      <label htmlFor="review-text" className="sr-only">Your review (Markdown)</label>
+      <textarea
+        id="review-text"
+        defaultValue={entry.review ?? ""}
+        placeholder="What stayed with you? Markdown works here."
+        onChange={() => setSaved(false)}
+        onBlur={(e) => save(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) save(e.currentTarget.value);
+        }}
+      />
+      {patch.error && <p className="error-text" role="alert">{errText(patch.error)}</p>}
+    </Box>
+  );
+}
diff --git a/apps/web/src/components/EntryDetail.tsx b/apps/web/src/components/EntryDetail.tsx
new file mode 100644
index 0000000..d91294b
--- /dev/null
+++ b/apps/web/src/components/EntryDetail.tsx
@@ -0,0 +1,189 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef, useState } from "react";
+import { Link, useLocation } from "wouter";
+import { ApiError, api, type EntryView } from "../api.ts";
+import { engagementNouns, formatPartialDate, mediaTypeLabel, STATUSES, statusLabel } from "../format.ts";
+import { changesFor, useEntryPatch, usePendingChanges, useSources } from "../hooks.ts";
+import { useRatingScale } from "../settings.ts";
+import { Cover } from "./Cover.tsx";
+import { AttachmentsBox, ChildrenBox, CopyBox, CustomFieldsBox, EngagementsBox, ReviewBox, SourcesBox } from "./DetailBoxes.tsx";
+import { HistoryDrawer } from "./HistoryDrawer.tsx";
+import { Icon } from "./Icon.tsx";
+import { LinkToCatalogue } from "./LinkToCatalogue.tsx";
+import { StarRating } from "./StarRating.tsx";
+
+const TIMES = ["", "once", "twice", "three times"];
+
+export function EntryDetail({ id }: { id: string }) {
+  const entry = useQuery({ queryKey: ["entry", id], queryFn: () => api.entry(id) });
+  if (entry.isPending) return <div className="detail" aria-busy="true" />;
+  if (entry.error) {
+    const gone = entry.error instanceof ApiError && entry.error.status === 404;
+    return (
+      <div className="detail-empty" role="alert">
+        <p>
+          <strong>{gone ? "This entry isn't here" : "Couldn't load this entry"}</strong>
+          {gone ? "It may have been deleted or moved. Pick another from your library." : entry.error.message}
+        </p>
+      </div>
+    );
+  }
+  return <Detail entry={entry.data} />;
+}
+
+function Detail({ entry }: { entry: EntryView }) {
+  const scale = useRatingScale();
+  const patch = useEntryPatch(entry.id);
+  const [, navigate] = useLocation();
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const historyBtn = useRef<HTMLButtonElement>(null);
+  const type = entry.mediaTypeOverride ?? entry.work.mediaType;
+  const nouns = engagementNouns(type);
+
+  const engagements = useQuery({ queryKey: ["engagements", entry.id], queryFn: () => api.engagements(entry.id) });
+  const changes = usePendingChanges();
+  const sources = useSources();
+  const engagementIds = new Set((engagements.data ?? []).map((g) => g.id));
+  const pending = changesFor(changes.data?.items, entry.id, engagementIds);
+
+  // "Book · Read twice · last finished 14 Sep 2026"
+  const finished = (engagements.data ?? []).filter((g) => g.finishedAt && g.finishedAt.precision !== "unknown");
+  const meta = [mediaTypeLabel(type)];
+  if (entry.work.year) meta.push(String(entry.work.year));
+  if (finished.length) {
+    const past = nouns.one === "read" ? "Read" : nouns.one === "play" ? "Played" : nouns.one === "watch" ? "Watched" : nouns.one === "listen" ? "Listened" : "Finished";
+    meta.push(`${past} ${TIMES[finished.length] ?? `${finished.length} times`}`);
+    const last = finished.map((g) => g.finishedAt!).sort((a, b) => (a.value < b.value ? 1 : -1))[0]!;
+    meta.push(`last finished ${formatPartialDate(last)}`);
+  }
+
+  return (
+    <article className="detail" aria-labelledby="entry-title">
+      <Link href="/" className="btn ghost back"><Icon name="back" /> Library</Link>
+      <header className="det-head">
+        <Cover url={entry.work.coverUrl} mediaType={type} draft={entry.draft} size="large" />
+        <div style={{ minWidth: 0 }}>
+          <h1 id="entry-title">
+            {entry.work.title}
+            {entry.draft && <span className="draft">Draft</span>}
+          </h1>
+          <p className="m">{meta.join(" · ")}</p>
+          <div className="det-controls">
+            <StarRating value={entry.rating} scale={scale} label="Your rating" onChange={(rating) => patch.mutate({ rating })} />
+            <label>
+              <span className="sr-only">Status</span>
+              <select className="select" value={entry.status} onChange={(e) => patch.mutate({ status: e.target.value as EntryView["status"] })}>
+                {STATUSES.map((s) => (
+                  <option key={s} value={s}>{statusLabel(s, type)}</option>
+                ))}
+              </select>
+            </label>
+            <div className="det-tools">
+              <button
+                ref={historyBtn}
+                type="button"
+                className="btn ghost small"
+                aria-expanded={historyOpen}
+                aria-controls="history-drawer"
+                onClick={() => setHistoryOpen((o) => !o)}
+              >
+                <Icon name="history" /> History
+              </button>
+            </div>
+          </div>
+          <Tags entry={entry} onChange={(tags) => patch.mutate({ tags })} />
+          {patch.error && <p className="error-text" role="alert">{patch.error.message}</p>}
+        </div>
+      </header>
+
+      {pending.length > 0 && (
+        <div className="alert" role="status">
+          <p>
+            <b>{whoChanged(pending, sources.data)} changed this {mediaTypeLabel(type).toLowerCase()}.</b>{" "}
+            {pending.length === 1 ? `On ${shortDate(pending[0]!.createdAt)}.` : `${pending.length} changes are waiting for you.`} Your rating,{" "}
+            {nouns.box.toLowerCase()} and review here are unchanged.
+          </p>
+          <button type="button" className="btn" onClick={() => navigate(`/changes?entry=${entry.id}`)}>See what changed</button>
+        </div>
+      )}
+
+      {entry.draft && <LinkToCatalogue entry={entry} />}
+
+      <div className="det-grid">
+        <EngagementsBox entry={entry} nouns={nouns} engagements={engagements.data} loading={engagements.isPending} />
+        <CopyBox entry={entry} />
+        <AttachmentsBox entry={entry} />
+        <SourcesBox entry={entry} engagements={engagements.data ?? []} />
+        <CustomFieldsBox entry={entry} type={type} />
+        {entry.childSummary && <ChildrenBox entry={entry} type={type} />}
+        <ReviewBox entry={entry} />
+      </div>
+
+      {historyOpen && (
+        <HistoryDrawer
+          entry={entry}
+          onClose={() => {
+            setHistoryOpen(false);
+            historyBtn.current?.focus();
+          }}
+        />
+      )}
+    </article>
+  );
+}
+
+function whoChanged(pending: { connectionId: string | null }[], sources: { id: string; name: string }[] | undefined): string {
+  const ids = new Set(pending.map((p) => p.connectionId));
+  if (ids.size === 1) {
+    const name = sources?.find((s) => s.id === [...ids][0])?.name;
+    if (name) return name;
+  }
+  return ids.size > 1 ? "Your sources" : "A source";
+}
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function shortDate(iso: string): string {
+  const d = new Date(iso);
+  return `${d.getDate()} ${MONTHS[d.getMonth()]}`;
+}
+
+function Tags({ entry, onChange }: { entry: EntryView; onChange: (tags: string[]) => void }) {
+  const [draft, setDraft] = useState("");
+  function add() {
+    const t = draft.trim();
+    if (!t) return;
+    if (!entry.tags.some((x) => x.toLowerCase() === t.toLowerCase())) onChange([...entry.tags, t]);
+    setDraft("");
+  }
+  return (
+    <ul className="pills" aria-label="Tags" style={{ listStyle: "none" }}>
+      {entry.tags.map((t) => (
+        <li key={t} className="pill">
+          {t}
+          <button type="button" aria-label={`Remove tag ${t}`} onClick={() => onChange(entry.tags.filter((x) => x !== t))}>
+            <Icon name="x" />
+          </button>
+        </li>
+      ))}
+      <li>
+        <label>
+          <span className="sr-only">Add a tag</span>
+          <input
+            className="tag-input"
+            placeholder="+ tag"
+            value={draft}
+            maxLength={100}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                add();
+              }
+            }}
+            onBlur={add}
+          />
+        </label>
+      </li>
+    </ul>
+  );
+}
diff --git a/apps/web/src/components/HistoryDrawer.tsx b/apps/web/src/components/HistoryDrawer.tsx
new file mode 100644
index 0000000..e69bf96
--- /dev/null
+++ b/apps/web/src/components/HistoryDrawer.tsx
@@ -0,0 +1,115 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
+import { api, type EntryView, type HistoryRecord } from "../api.ts";
+import { actorConnectionId, formatPartialDate, formatRating, statusLabel, timeAgo, type PartialDate, type Status } from "../format.ts";
+import { useSources } from "../hooks.ts";
+import { useRatingScale } from "../settings.ts";
+import { Icon } from "./Icon.tsx";
+
+const LABELS: Record<string, string> = {
+  status: "Status",
+  rating: "Rating",
+  review: "Review",
+  privateNotes: "Private notes",
+  favorite: "Favourite",
+  tags: "Tags",
+  customFields: "Details",
+  visibility: "Visibility",
+  overrides: "Title and cover",
+  mediaTypeOverride: "Media type",
+  workId: "Catalogue link",
+  deletedAt: "Removed",
+};
+const SKIP = new Set(["id", "userId", "fieldSources", "createdAt", "updatedAt"]);
+
+/** History of an entry, newest first, with "Restore" to put back what a change replaced. */
+export function HistoryDrawer({ entry, onClose }: { entry: EntryView; onClose: () => void }) {
+  const qc = useQueryClient();
+  const scale = useRatingScale();
+  const sources = useSources();
+  const closeBtn = useRef<HTMLButtonElement>(null);
+  const history = useQuery({ queryKey: ["history", entry.id], queryFn: () => api.history(entry.id) });
+  const restore = useMutation({
+    mutationFn: api.restore,
+    onSuccess: () => {
+      for (const key of [["entry", entry.id], ["history", entry.id], ["engagements", entry.id], ["entries"]]) void qc.invalidateQueries({ queryKey: key });
+    },
+  });
+
+  useEffect(() => {
+    closeBtn.current?.focus();
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const who = (actor: string) => {
+    if (actor === "user") return "You";
+    if (actor.startsWith("token:")) return `App token “${actor.slice(6)}”`;
+    const id = actorConnectionId(actor);
+    return sources.data?.find((s) => s.id === id)?.name ?? actor.split(":")[1] ?? "A source";
+  };
+  const show = (field: string, v: unknown): string => {
+    if (v === null || v === undefined || v === "") return "empty";
+    if (field === "rating") return formatRating(v as number, scale);
+    if (field === "status") return statusLabel(v as Status, entry.work.mediaType);
+    if (Array.isArray(v)) return v.length ? v.join(", ") : "none";
+    if (typeof v === "object" && "precision" in (v as object)) return formatPartialDate(v as PartialDate) || "unknown";
+    if (typeof v === "object") return Object.keys(v as object).length ? "edited" : "empty";
+    if (typeof v === "boolean") return v ? "yes" : "no";
+    const s = String(v);
+    return s.length > 80 ? `${s.slice(0, 80)}…` : s;
+  };
+  const diffs = (h: HistoryRecord) =>
+    [...new Set([...Object.keys(h.before ?? {}), ...Object.keys(h.after ?? {})])]
+      .filter((k) => !SKIP.has(k) && JSON.stringify(h.before?.[k]) !== JSON.stringify(h.after?.[k]))
+      .map((k) => ({ k, before: show(k, h.before?.[k]), after: show(k, h.after?.[k]) }));
+
+  return (
+    <aside className="drawer" id="history-drawer" role="dialog" aria-modal="false" aria-labelledby="history-title">
+      <header>
+        <h2 id="history-title">History</h2>
+        <button ref={closeBtn} type="button" className="btn ghost small" onClick={onClose} aria-label="Close history">
+          <Icon name="x" />
+        </button>
+      </header>
+      {history.isPending ? null : history.error ? (
+        <p className="error-text" style={{ padding: "0 20px" }} role="alert">{history.error.message}</p>
+      ) : (
+        <ol>
+          {history.data.map((h) => {
+            const d = diffs(h);
+            const created = Object.keys(h.before ?? {}).length === 0;
+            return (
+              <li key={h.id}>
+                <div className="when">
+                  <span><span className="who">{who(h.actor)}</span> · {timeAgo(h.createdAt)}</span>
+                  {!created && d.length > 0 && (
+                    <button type="button" className="btn small" disabled={restore.isPending} onClick={() => restore.mutate(h.id)}>
+                      Restore
+                    </button>
+                  )}
+                </div>
+                {created ? (
+                  <p className="hint">Added to your library.</p>
+                ) : d.length === 0 ? (
+                  <p className="hint">No visible change.</p>
+                ) : (
+                  <dl>
+                    {d.map(({ k, before, after }) => (
+                      <div key={k} style={{ display: "contents" }}>
+                        <dt>{LABELS[k] ?? k}</dt>
+                        <dd><s>{before}</s><span className="arrow" aria-label="changed to">→</span>{after}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      )}
+      {restore.error && <p className="error-text" role="alert" style={{ padding: "0 20px 16px" }}>{restore.error.message}</p>}
+    </aside>
+  );
+}
diff --git a/apps/web/src/components/Icon.tsx b/apps/web/src/components/Icon.tsx
new file mode 100644
index 0000000..4473008
--- /dev/null
+++ b/apps/web/src/components/Icon.tsx
@@ -0,0 +1,21 @@
+/** A small authored icon set: 24px grid, 1.75 stroke, round caps. */
+const PATHS = {
+  plus: "M12 5v14M5 12h14",
+  search: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4",
+  x: "M6 6l12 12M18 6L6 18",
+  history: "M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l3 2",
+  back: "M15 18l-6-6 6-6",
+  upload: "M12 16V4M7 9l5-5 5 5M5 20h14",
+  link: "M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1",
+  file: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5",
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+export function Icon({ name }: { name: IconName }) {
+  return (
+    <svg className="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path d={PATHS[name]} />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/LinkToCatalogue.tsx b/apps/web/src/components/LinkToCatalogue.tsx
new file mode 100644
index 0000000..f9ef208
--- /dev/null
+++ b/apps/web/src/components/LinkToCatalogue.tsx
@@ -0,0 +1,102 @@
+import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { useLocation } from "wouter";
+import { api, type EntryView, type Work } from "../api.ts";
+import { mediaTypeLabel } from "../format.ts";
+import { useDebounced } from "../hooks.ts";
+import { Cover } from "./Cover.tsx";
+import { Icon } from "./Icon.tsx";
+
+/** Drafts only: suggested matches and a catalogue search. Linking keeps the user's rating, reads and review. */
+export function LinkToCatalogue({ entry }: { entry: EntryView }) {
+  const qc = useQueryClient();
+  const [, navigate] = useLocation();
+  const [q, setQ] = useState("");
+  const term = useDebounced(q.trim());
+  const suggestions = useQuery({ queryKey: ["suggestions", entry.workId], queryFn: () => api.suggestions(entry.workId) });
+  const candidates = useQueries({
+    queries: (suggestions.data ?? []).slice(0, 5).map((s) => ({ queryKey: ["work", s.candidateWorkId], queryFn: () => api.work(s.candidateWorkId), staleTime: 300_000 })),
+  });
+  const search = useQuery({
+    queryKey: ["works-search", term],
+    queryFn: () => api.searchWorks(term),
+    enabled: term.length >= 2,
+  });
+
+  const done = (newId?: string) => {
+    void qc.invalidateQueries({ queryKey: ["entries"] });
+    void qc.invalidateQueries({ queryKey: ["entry", entry.id] });
+    void qc.invalidateQueries({ queryKey: ["suggestions", entry.workId] });
+    if (newId && newId !== entry.id) navigate(`/entries/${newId}`, { replace: true });
+  };
+  const move = useMutation({ mutationFn: (workId: string) => api.moveEntry(entry.id, workId), onSuccess: (e) => done(e.id) });
+  const accept = useMutation({ mutationFn: api.acceptSuggestion, onSuccess: () => done() });
+  const reject = useMutation({ mutationFn: api.rejectSuggestion, onSuccess: () => done() });
+  const busy = move.isPending || accept.isPending || reject.isPending;
+  const error = move.error ?? accept.error ?? reject.error;
+
+  const row = (w: Work, actions: ReactNode) => (
+    <li key={w.id}>
+      <Cover url={w.cover_url} mediaType={w.media_type} draft={false} size="small" />
+      <div style={{ minWidth: 0 }}>
+        <div>{w.title}</div>
+        <div className="m">{[mediaTypeLabel(w.media_type), w.year, w.creators?.[0]?.name].filter(Boolean).join(" · ")}</div>
+      </div>
+      <div className="acts">{actions}</div>
+    </li>
+  );
+
+  const results = (search.data ?? []).filter((w) => w.id !== entry.workId);
+  return (
+    <section className="box link-box" aria-labelledby="link-title">
+      <div className="box-head">
+        <h2 id="link-title"><Icon name="link" /> Link to catalogue</h2>
+      </div>
+      <p>This is a draft. Link it to a catalogue entry to fill in the cover and details. Your rating, reads and review stay as they are.</p>
+
+      {candidates.length > 0 && (
+        <>
+          <h3 className="sub">Suggested</h3>
+          <ul className="results">
+            {suggestions.data!.slice(0, 5).map((s, i) => {
+              const w = candidates[i]?.data;
+              if (!w) return null;
+              return row(
+                w,
+                <>
+                  <button type="button" className="btn primary small" disabled={busy} onClick={() => accept.mutate(s.id)}>Link</button>
+                  <button type="button" className="btn ghost small" disabled={busy} onClick={() => reject.mutate(s.id)}>Not this</button>
+                </>,
+              );
+            })}
+          </ul>
+        </>
+      )}
+
+      <div className="search">
+        <Icon name="search" />
+        <label htmlFor="catalogue-search" className="sr-only">Search the catalogue</label>
+        <input
+          id="catalogue-search"
+          className="input"
+          type="search"
+          placeholder="Search the catalogue…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+        />
+      </div>
+      {term.length >= 2 && !search.isPending && (
+        results.length === 0 ? (
+          <p className="hint">Nothing in the catalogue matches “{term}”. Connect a source to bring in more.</p>
+        ) : (
+          <ul className="results" aria-label="Search results">
+            {results.map((w) =>
+              row(w, <button type="button" className="btn primary small" disabled={busy} onClick={() => move.mutate(w.id)}>Link</button>),
+            )}
+          </ul>
+        )
+      )}
+      {error && <p className="error-text" role="alert">{error.message}</p>}
+    </section>
+  );
+}
diff --git a/apps/web/src/components/Shell.tsx b/apps/web/src/components/Shell.tsx
new file mode 100644
index 0000000..5e9a60d
--- /dev/null
+++ b/apps/web/src/components/Shell.tsx
@@ -0,0 +1,75 @@
+import { useQueryClient } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { Link, useLocation } from "wouter";
+import { api } from "../api.ts";
+import { useMe, usePendingChanges, useSources } from "../hooks.ts";
+
+function NavLink({ href, active, children, className }: { href: string; active: boolean; children: ReactNode; className?: string }) {
+  return (
+    <Link href={href} className={`nav${className ? ` ${className}` : ""}`} aria-current={active ? "page" : undefined}>
+      {children}
+    </Link>
+  );
+}
+
+/** Sidebar navigation plus the main area. Stacks into a top bar on narrow screens. */
+export function Shell({ children }: { children: ReactNode }) {
+  const [path, navigate] = useLocation();
+  const qc = useQueryClient();
+  const me = useMe();
+  const changes = usePendingChanges();
+  const sources = useSources();
+  const pending = changes.data?.items.length ?? 0;
+  const at = (p: string) => path === p || path.startsWith(`${p}/`);
+
+  async function signOut() {
+    try {
+      await api.logout();
+    } finally {
+      qc.clear();
+      navigate("/login", { replace: true });
+    }
+  }
+
+  return (
+    <div className="shell">
+      <aside className="side">
+        <Link href="/" className="logo">STTracker</Link>
+        <nav aria-label="Main">
+          <NavLink href="/" active={path === "/" || at("/entries")}>Library</NavLink>
+          <NavLink href="/log" active={at("/log")}>Log</NavLink>
+          <NavLink href="/lists" active={at("/lists")}>Lists</NavLink>
+          <NavLink href="/owned" active={at("/owned")}>Owned</NavLink>
+          <NavLink href="/changes" active={at("/changes")}>
+            Changes
+            {pending > 0 && (
+              <span className="count" aria-label={`${pending} waiting`}>
+                {changes.data?.nextCursor ? `${pending}+` : pending}
+              </span>
+            )}
+          </NavLink>
+        </nav>
+        <h2 className="grp">Sources</h2>
+        <nav aria-label="Sources" className="src-nav">
+          {(sources.data ?? []).map((s) => (
+            <NavLink key={s.id} href={`/sources/${s.id}`} active={at(`/sources/${s.id}`)}>
+              <span className="name">{s.name}</span>
+              <span className={`dot${s.status === "active" ? "" : " paused"}`} aria-label={s.status === "active" ? "Active" : "Paused"} />
+            </NavLink>
+          ))}
+          <NavLink href="/sources" active={path === "/sources"}>
+            {sources.data?.length ? "All sources" : "Connect a source"}
+          </NavLink>
+        </nav>
+        <nav aria-label="Account" style={{ marginTop: 14 }}>
+          <NavLink href="/settings" active={at("/settings")}>Settings</NavLink>
+        </nav>
+        <div className="side-foot">
+          {me.data && <span className="who">{me.data.displayName || me.data.username}</span>}
+          <button type="button" onClick={() => void signOut()}>Sign out</button>
+        </div>
+      </aside>
+      <main className="main">{children}</main>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/StarRating.tsx b/apps/web/src/components/StarRating.tsx
new file mode 100644
index 0000000..a104d9d
--- /dev/null
+++ b/apps/web/src/components/StarRating.tsx
@@ -0,0 +1,148 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
+import { describeRating, ratingStep, snapRating, type RatingScale } from "../format.ts";
+
+const STAR = "M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z";
+
+/**
+ * Editable rating in the user's scale. Stars are a slider: arrows step (half a star on "5half"),
+ * Home/End jump, Delete clears. The 10 and 100 point scales use a number field.
+ */
+export function StarRating({
+  value,
+  scale,
+  label,
+  onChange,
+}: {
+  value: number | null;
+  scale: RatingScale;
+  label: string;
+  onChange: (v: number | null) => void;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  // Arrow keys step a local value; it is saved once the user pauses (or leaves), not on every step.
+  const [stepping, setStepping] = useState<{ v: number | null } | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clipBase = useId();
+  const step = ratingStep(scale);
+  // Leaving mid-step (navigating to another entry) still saves the stepped value.
+  const latest = useRef({ stepping, value, onChange });
+  latest.current = { stepping, value, onChange };
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+      const { stepping: st, value: v, onChange: save } = latest.current;
+      if (st && st.v !== v) save(st.v);
+    },
+    [],
+  );
+
+  if (scale === "10" || scale === "100") {
+    const max = scale === "10" ? 10 : 100;
+    const shown = value === null ? "" : String(scale === "10" ? snapRating(value, scale) / 10 : value);
+    return (
+      <label className="rating-number">
+        <span className="sr-only">{label}</span>
+        <input
+          className="input tabular"
+          type="number"
+          min={0}
+          max={max}
+          step={scale === "10" ? 0.5 : 1}
+          defaultValue={shown}
+          key={shown}
+          onBlur={(e) => {
+            const raw = e.currentTarget.value.trim();
+            if (raw === "") return value !== null && onChange(null);
+            const n = Number(raw);
+            if (Number.isNaN(n)) return;
+            const v = snapRating(scale === "10" ? n * 10 : n, scale);
+            if (v !== value) onChange(v);
+          }}
+        />
+        <span>/ {max}</span>
+      </label>
+    );
+  }
+
+  const set = (v: number | null) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    setStepping(null);
+    if (v !== value) onChange(v === null ? null : snapRating(v, scale));
+  };
+  const flush = () => stepping && set(stepping.v);
+  const current = stepping ? stepping.v : value;
+  const onKey = (e: KeyboardEvent) => {
+    const cur = current ?? 0;
+    const map: Record<string, number | null> = {
+      ArrowRight: Math.min(100, cur + step),
+      ArrowUp: Math.min(100, cur + step),
+      ArrowLeft: Math.max(0, cur - step),
+      ArrowDown: Math.max(0, cur - step),
+      Home: 0,
+      End: 100,
+      Delete: null,
+      Backspace: null,
+    };
+    if (!(e.key in map)) return;
+    e.preventDefault();
+    const next = map[e.key]!;
+    setStepping({ v: next });
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => set(next), 500);
+  };
+  const valueAt = (e: PointerEvent<HTMLSpanElement>, i: number) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    const half = scale === "5half" && e.clientX - r.left < r.width / 2;
+    return (i + (half ? 0.5 : 1)) * 20;
+  };
+  const shown = hover ?? current ?? 0;
+
+  return (
+    <span className="rating-wrap" style={{ display: "inline-flex", alignItems: "center" }}>
+      <span
+        className="rating"
+        role="slider"
+        tabIndex={0}
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={current ?? undefined}
+        aria-valuetext={describeRating(current, scale)}
+        onKeyDown={onKey}
+        onBlur={flush}
+        onPointerLeave={() => setHover(null)}
+      >
+        {[0, 1, 2, 3, 4].map((i) => {
+          const fill = Math.max(0, Math.min(1, shown / 20 - i));
+          const id = `${clipBase}-${i}`;
+          return (
+            <span
+              key={i}
+              onPointerMove={(e) => setHover(valueAt(e, i))}
+              onClick={(e) => {
+                const v = valueAt(e as unknown as PointerEvent<HTMLSpanElement>, i);
+                set(v === value ? null : v);
+              }}
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <defs>
+                  <clipPath id={id}>
+                    <rect x="0" y="0" width={24 * fill} height="24" />
+                  </clipPath>
+                </defs>
+                <path className="empty" d={STAR} />
+                {fill > 0 && <path className="full" d={STAR} clipPath={`url(#${id})`} />}
+              </svg>
+            </span>
+          );
+        })}
+      </span>
+      {current !== null && (
+        <button type="button" className="rating-clear" onClick={() => set(null)}>
+          Clear
+        </button>
+      )}
+    </span>
+  );
+}
diff --git a/apps/web/src/hooks.ts b/apps/web/src/hooks.ts
new file mode 100644
index 0000000..87c9310
--- /dev/null
+++ b/apps/web/src/hooks.ts
@@ -0,0 +1,46 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { api, type ChangeEvent, type EntryPatch } from "./api.ts";
+
+/** Pending Changes-inbox events (first 200; the badge shows "200+" beyond that). */
+export function usePendingChanges() {
+  return useQuery({ queryKey: ["changes", "pending"], queryFn: api.changes, staleTime: 30_000 });
+}
+
+export function useMe() {
+  return useQuery({ queryKey: ["me"], queryFn: api.me, retry: false, staleTime: Infinity });
+}
+
+export function useSources() {
+  return useQuery({ queryKey: ["sources"], queryFn: api.sources, staleTime: 60_000 });
+}
+
+/** Pending events that touch an entry or one of its reads/plays. */
+export function changesFor(items: ChangeEvent[] | undefined, entryId: string, engagementIds: Set<string>): ChangeEvent[] {
+  return (items ?? []).filter(
+    (c) => c.targetId !== null && ((c.targetEntity === "entry" && c.targetId === entryId) || (c.targetEntity === "engagement" && engagementIds.has(c.targetId))),
+  );
+}
+
+export function useDebounced<T>(value: T, ms = 220): T {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), ms);
+    return () => clearTimeout(t);
+  }, [value, ms]);
+  return v;
+}
+
+/** Shared save path for every detail edit: PATCH, then refresh the entry and the list. */
+export function useEntryPatch(id: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (patch: EntryPatch) => api.patchEntry(id, patch),
+    onSuccess: (entry) => {
+      qc.setQueryData(["entry", id], entry);
+      void qc.invalidateQueries({ queryKey: ["entries"] });
+      void qc.invalidateQueries({ queryKey: ["history", id] });
+    },
+  });
+}
+
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
new file mode 100644
index 0000000..bcac482
--- /dev/null
+++ b/apps/web/src/main.tsx
@@ -0,0 +1,73 @@
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { Redirect, Route, Switch } from "wouter";
+import { ApiError } from "./api.ts";
+import { Shell } from "./components/Shell.tsx";
+import { useMe } from "./hooks.ts";
+import { Library } from "./routes/library.tsx";
+import { Login } from "./routes/login.tsx";
+import { NotYet } from "./routes/not-yet.tsx";
+import { Register } from "./routes/register.tsx";
+
+const queryClient: QueryClient = new QueryClient({
+  queryCache: new QueryCache({
+    // A 401 anywhere means the session ended: re-check who we are, which sends the user to sign in.
+    onError: (e, query) => {
+      if (e instanceof ApiError && e.status === 401 && query.queryKey[0] !== "me") void queryClient.invalidateQueries({ queryKey: ["me"] });
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      staleTime: 15_000,
+      retry: (n, e) => !(e instanceof ApiError && e.status > 0 && e.status < 500) && n < 2,
+    },
+  },
+});
+
+function RequireAuth({ children }: { children: ReactNode }) {
+  const me = useMe();
+  if (me.isPending) return <div className="boot"><span className="logo">STTracker</span></div>;
+  if (me.error instanceof ApiError && me.error.status === 401) return <Redirect to="/login" replace />;
+  if (me.error) {
+    return (
+      <div className="auth">
+        <div className="auth-card" role="alert">
+          <span className="logo">STTracker</span>
+          <h1>Can't load your library</h1>
+          <p className="lede">{me.error.message}</p>
+          <button className="btn primary" onClick={() => void me.refetch()}>Try again</button>
+        </div>
+      </div>
+    );
+  }
+  return <>{children}</>;
+}
+
+function App() {
+  return (
+    <Switch>
+      <Route path="/login" component={Login} />
+      <Route path="/register" component={Register} />
+      <Route>
+        <RequireAuth>
+          <Shell>
+            <Switch>
+              <Route path="/">{() => <Library selectedId={null} />}</Route>
+              <Route path="/entries/:id">{(p) => <Library selectedId={p.id} />}</Route>
+              <Route path="/:page/*?">{(p) => <NotYet page={p.page} />}</Route>
+            </Switch>
+          </Shell>
+        </RequireAuth>
+      </Route>
+    </Switch>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/apps/web/src/routes/library.tsx b/apps/web/src/routes/library.tsx
new file mode 100644
index 0000000..cd33327
--- /dev/null
+++ b/apps/web/src/routes/library.tsx
@@ -0,0 +1,228 @@
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState, type FormEvent } from "react";
+import { Link, useLocation } from "wouter";
+import { ApiError, api, type EntryView } from "../api.ts";
+import { Cover } from "../components/Cover.tsx";
+import { EntryDetail } from "../components/EntryDetail.tsx";
+import { Icon } from "../components/Icon.tsx";
+import { describeRating, formatRating, mediaTypeLabel, rollupLabel, statusLabel, type Status } from "../format.ts";
+import { useDebounced, usePendingChanges } from "../hooks.ts";
+import { useRatingScale } from "../settings.ts";
+
+const TYPE_FILTERS = ["book", "manga", "comic", "game", "movie", "show", "podcast", "audio_drama", "album", "artist", "video", "other"];
+const STATUS_FILTERS: Status[] = ["in_progress", "planned", "completed", "paused", "dropped"];
+
+/** The library: list pane (search, quick add, filters, rows) and the detail pane. */
+export function Library({ selectedId }: { selectedId: string | null }) {
+  return (
+    <div className={`library${selectedId ? " has-selection" : ""}`}>
+      <ListPane selectedId={selectedId} />
+      <section className="detail-pane" aria-label="Entry">
+        {selectedId ? (
+          <EntryDetail key={selectedId} id={selectedId} />
+        ) : (
+          <div className="detail-empty">
+            <p>
+              <strong>Nothing selected</strong>
+              Pick something from your library, or quick add a title and sort out the details later.
+            </p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+// Filters survive navigating between entries (the list pane remounts on route change).
+let savedFilters: { q: string; mediaType?: string; status?: Status; draft: boolean } = { q: "", draft: false };
+
+function ListPane({ selectedId }: { selectedId: string | null }) {
+  const [, navigate] = useLocation();
+  const qc = useQueryClient();
+  const scale = useRatingScale();
+  const [filters, setFiltersState] = useState(savedFilters);
+  const setFilters = (f: typeof filters) => {
+    savedFilters = f;
+    setFiltersState(f);
+  };
+  const q = useDebounced(filters.q.trim());
+  const query = { q: q || undefined, mediaType: filters.mediaType, status: filters.status, draft: filters.draft || undefined };
+  const entries = useInfiniteQuery({
+    queryKey: ["entries", query],
+    queryFn: ({ pageParam }) => api.entries({ ...query, cursor: pageParam, limit: 50 }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (last) => last.nextCursor ?? undefined,
+  });
+  const changes = usePendingChanges();
+  const flagged = new Set((changes.data?.items ?? []).filter((c) => c.targetEntity === "entry").map((c) => c.targetId));
+
+  const [quickError, setQuickError] = useState<string | null>(null);
+  const quick = useMutation({
+    mutationFn: api.quickAdd,
+    onSuccess: (entry, _t) => {
+      qc.setQueryData(["entry", entry.id], entry);
+      void qc.invalidateQueries({ queryKey: ["entries"] });
+      navigate(`/entries/${entry.id}`);
+    },
+    onError: (e) => setQuickError(e instanceof ApiError ? e.message : "Couldn't add that. Try again."),
+  });
+  function onQuick(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const input = e.currentTarget.elements.namedItem("title") as HTMLInputElement;
+    const title = input.value.trim();
+    if (!title || quick.isPending) return;
+    setQuickError(null);
+    quick.mutate(title, { onSuccess: () => (input.value = "") });
+  }
+
+  const items = entries.data?.pages.flatMap((p) => p.items) ?? [];
+  const filtering = Boolean(q || filters.mediaType || filters.status || filters.draft);
+
+  return (
+    <section className="list-pane" aria-label="Library">
+      <div className="list-tools">
+        <form role="search" className="search" onSubmit={(e) => e.preventDefault()}>
+          <Icon name="search" />
+          <label className="sr-only" htmlFor="lib-search">Search your library</label>
+          <input
+            id="lib-search"
+            className="input"
+            type="search"
+            placeholder="Search your library…"
+            value={filters.q}
+            onChange={(e) => setFilters({ ...filters, q: e.target.value })}
+          />
+        </form>
+        <form className="quick" onSubmit={onQuick}>
+          <span className="plus"><Icon name="plus" /></span>
+          <label className="sr-only" htmlFor="quick-add">Quick add</label>
+          <input
+            id="quick-add"
+            name="title"
+            className="input"
+            placeholder="Quick add: type a title, sort it out later"
+            autoComplete="off"
+            maxLength={1000}
+            disabled={quick.isPending}
+            aria-describedby={quickError ? "quick-error" : undefined}
+          />
+        </form>
+        {quickError && <p className="error-text" id="quick-error" role="alert">{quickError}</p>}
+        <div className="filters">
+          <div className="chips" role="group" aria-label="Filter by status">
+            <button
+              type="button"
+              className="chip draft-chip"
+              aria-pressed={filters.draft}
+              onClick={() => setFilters({ ...filters, draft: !filters.draft })}
+            >
+              Draft
+            </button>
+            {STATUS_FILTERS.map((s) => (
+              <button
+                key={s}
+                type="button"
+                className="chip"
+                aria-pressed={filters.status === s}
+                onClick={() => setFilters({ ...filters, status: filters.status === s ? undefined : s })}
+              >
+                {statusLabel(s)}
+              </button>
+            ))}
+          </div>
+          <div className="chips" role="group" aria-label="Filter by media type">
+            {TYPE_FILTERS.map((t) => (
+              <button
+                key={t}
+                type="button"
+                className="chip"
+                aria-pressed={filters.mediaType === t}
+                onClick={() => setFilters({ ...filters, mediaType: filters.mediaType === t ? undefined : t })}
+              >
+                {mediaTypeLabel(t)}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {entries.isPending ? (
+        <ul className="list" aria-busy="true" aria-label="Loading your library">
+          {[0, 1, 2, 3].map((i) => (
+            <li key={i} className="row skeleton" aria-hidden="true">
+              <div className="cover" />
+              <div><div className="bar" /><div className="bar" /></div>
+            </li>
+          ))}
+        </ul>
+      ) : entries.error ? (
+        <div className="list-note" role="alert">
+          <p>{entries.error.message}</p>
+          <button className="btn small" onClick={() => void entries.refetch()}>Try again</button>
+        </div>
+      ) : items.length === 0 ? (
+        <div className="list-note">
+          {filtering ? (
+            <>
+              <p>Nothing matches these filters.</p>
+              <button className="btn small" onClick={() => setFilters({ q: "", draft: false })}>Clear filters</button>
+            </>
+          ) : (
+            <p>
+              <strong>Your library is empty.</strong> Type a title into Quick add and press Enter. A title alone is
+              enough; you can link it to a catalogue entry later.
+            </p>
+          )}
+        </div>
+      ) : (
+        <ul className="list">
+          {items.map((e) => (
+            <li key={e.id}>
+              <Row entry={e} selected={e.id === selectedId} flagged={flagged.has(e.id)} scale={scale} />
+            </li>
+          ))}
+          {entries.hasNextPage && (
+            <li className="more">
+              <button className="btn small" disabled={entries.isFetchingNextPage} onClick={() => void entries.fetchNextPage()}>
+                {entries.isFetchingNextPage ? "Loading…" : "Show more"}
+              </button>
+            </li>
+          )}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+/** `media type · meta`: children roll-up, else status, plus the year. */
+export function rowMeta(e: EntryView): string {
+  const type = e.mediaTypeOverride ?? e.work.mediaType;
+  const parts = [mediaTypeLabel(type)];
+  const rollup = rollupLabel(type, e.childSummary);
+  if (rollup) parts.push(rollup);
+  else if (e.status !== "none") parts.push(statusLabel(e.status, type).toLowerCase());
+  if (e.work.year) parts.push(String(e.work.year));
+  return parts.join(" · ");
+}
+
+function Row({ entry: e, selected, flagged, scale }: { entry: EntryView; selected: boolean; flagged: boolean; scale: ReturnType<typeof useRatingScale> }) {
+  return (
+    <Link href={`/entries/${e.id}`} className="row" aria-current={selected ? "page" : undefined}>
+      <Cover url={e.work.coverUrl} mediaType={e.work.mediaType} draft={e.draft} />
+      <div style={{ minWidth: 0 }}>
+        <span className="title">{e.work.title}</span>
+        <div className="meta">{rowMeta(e)}</div>
+      </div>
+      <span className="end">
+        {flagged && <span className="flag" role="img" aria-label="A source changed this" title="A source changed this" />}
+        {e.draft ? (
+          <span className="draft">Draft</span>
+        ) : e.rating !== null ? (
+          <span className="stars" role="img" aria-label={describeRating(e.rating, scale)}>{formatRating(e.rating, scale)}</span>
+        ) : e.status === "in_progress" ? (
+          <span className="flag active" role="img" aria-label="In progress" title="In progress" />
+        ) : null}
+      </span>
+    </Link>
+  );
+}
diff --git a/apps/web/src/routes/login.tsx b/apps/web/src/routes/login.tsx
new file mode 100644
index 0000000..2de2c6c
--- /dev/null
+++ b/apps/web/src/routes/login.tsx
@@ -0,0 +1,51 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useState, type FormEvent } from "react";
+import { Link, useLocation } from "wouter";
+import { ApiError, api } from "../api.ts";
+
+export function Login() {
+  const qc = useQueryClient();
+  const [, navigate] = useLocation();
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const f = new FormData(e.currentTarget);
+    setBusy(true);
+    setError(null);
+    try {
+      const user = await api.login(String(f.get("username")), String(f.get("password")));
+      qc.setQueryData(["me"], user);
+      navigate("/", { replace: true });
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Sign-in failed. Try again.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main className="auth">
+      <div className="auth-card">
+        <span className="logo">STTracker</span>
+        <h1>Sign in</h1>
+        <p className="lede">Everything you read, watch, play and listen to, in one place that's yours.</p>
+        <form onSubmit={submit}>
+          {error && <p className="form-error" role="alert">{error}</p>}
+          <label className="field">
+            <span>Username</span>
+            <input className="input" name="username" autoComplete="username" autoCapitalize="none" spellCheck={false} required autoFocus />
+          </label>
+          <label className="field">
+            <span>Password</span>
+            <input className="input" name="password" type="password" autoComplete="current-password" required />
+          </label>
+          <button className="btn primary" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</button>
+        </form>
+        <p className="alt">
+          First time here? <Link className="text-link" href="/register">Create the admin account</Link>
+        </p>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/routes/not-yet.tsx b/apps/web/src/routes/not-yet.tsx
new file mode 100644
index 0000000..e250488
--- /dev/null
+++ b/apps/web/src/routes/not-yet.tsx
@@ -0,0 +1,24 @@
+const NAMES: Record<string, string> = {
+  log: "Log",
+  lists: "Lists",
+  owned: "Owned",
+  changes: "Changes",
+  sources: "Sources",
+  settings: "Settings",
+  about: "About",
+};
+
+/** Sections that arrive in the next update. Unknown paths say so plainly. */
+export function NotYet({ page }: { page: string }) {
+  const name = NAMES[page];
+  return (
+    <section className="page">
+      <h1>{name ?? "Nothing here"}</h1>
+      <p>
+        {name
+          ? `${name} isn't built yet. Your data is safe; this screen arrives in the next update.`
+          : "This address doesn't match any page. Head back to your library."}
+      </p>
+    </section>
+  );
+}
diff --git a/apps/web/src/routes/register.tsx b/apps/web/src/routes/register.tsx
new file mode 100644
index 0000000..6fc28c5
--- /dev/null
+++ b/apps/web/src/routes/register.tsx
@@ -0,0 +1,92 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useState, type FormEvent } from "react";
+import { Link, useLocation, useSearch } from "wouter";
+import { ApiError, api } from "../api.ts";
+
+/**
+ * First-run screen. The first account becomes the admin; later accounts need an invite code. The API
+ * cannot say whether users exist, so the screen assumes first run and switches to invite mode when
+ * the server answers `invite_required` (or the link carries `?invite=`).
+ */
+export function Register() {
+  const qc = useQueryClient();
+  const [, navigate] = useLocation();
+  const invite = new URLSearchParams(useSearch()).get("invite") ?? "";
+  const [needInvite, setNeedInvite] = useState(invite !== "");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const f = new FormData(e.currentTarget);
+    const username = String(f.get("username")).trim().toLowerCase();
+    const password = String(f.get("password"));
+    const displayName = String(f.get("displayName") ?? "").trim();
+    const inviteCode = String(f.get("inviteCode") ?? "").trim();
+    setBusy(true);
+    setError(null);
+    try {
+      await api.register({ username, password, displayName: displayName || undefined, inviteCode: inviteCode || undefined });
+      qc.setQueryData(["me"], await api.login(username, password));
+      navigate("/", { replace: true });
+    } catch (err) {
+      if (err instanceof ApiError && err.code === "invite_required") {
+        setNeedInvite(true);
+        setError(inviteCode ? "That invite code didn't work. Check it, or ask the admin for a new one." : "This STTracker already has an admin. Ask them for an invite code and enter it below.");
+      } else setError(err instanceof ApiError ? err.message : "Couldn't create the account. Try again.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main className="auth">
+      <div className="auth-card">
+        <span className="logo">STTracker</span>
+        <h1>{needInvite ? "Create your account" : "Create the admin account"}</h1>
+        <p className="lede">
+          {needInvite
+            ? "You've been invited to this STTracker. Pick a username and password."
+            : "This is the first account on this STTracker. It can invite friends later."}
+        </p>
+        <form onSubmit={submit}>
+          {error && <p className="form-error" role="alert">{error}</p>}
+          <label className="field">
+            <span>Your name (optional)</span>
+            <input className="input" name="displayName" autoComplete="name" maxLength={100} />
+          </label>
+          <label className="field">
+            <span>Username</span>
+            <input
+              className="input"
+              name="username"
+              autoComplete="username"
+              autoCapitalize="none"
+              spellCheck={false}
+              required
+              minLength={2}
+              maxLength={32}
+              pattern="[a-zA-Z0-9_]+"
+              aria-describedby="username-hint"
+            />
+            <small className="hint" id="username-hint">2–32 lowercase letters, digits and underscores.</small>
+          </label>
+          <label className="field">
+            <span>Password</span>
+            <input className="input" name="password" type="password" autoComplete="new-password" required minLength={8} aria-describedby="password-hint" />
+            <small className="hint" id="password-hint">At least 8 characters.</small>
+          </label>
+          {needInvite && (
+            <label className="field">
+              <span>Invite code</span>
+              <input className="input" name="inviteCode" defaultValue={invite} required autoComplete="off" spellCheck={false} />
+            </label>
+          )}
+          <button className="btn primary" disabled={busy}>{busy ? "Creating…" : "Create account"}</button>
+        </form>
+        <p className="alt">
+          Already have an account? <Link className="text-link" href="/login">Sign in</Link>
+        </p>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/settings.ts b/apps/web/src/settings.ts
new file mode 100644
index 0000000..3c0c568
--- /dev/null
+++ b/apps/web/src/settings.ts
@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from "react";
+import type { RatingScale } from "./format.ts";
+
+/**
+ * The rating scale preference. The API has no preferences endpoint yet, so it lives in this browser
+ * (localStorage) and defaults to five stars with halves. Settings (Task 18) writes it with `setRatingScale`.
+ */
+const KEY = "sttracker.ratingScale";
+const SCALES: RatingScale[] = ["5half", "5", "10", "100"];
+const listeners = new Set<() => void>();
+
+function read(): RatingScale {
+  try {
+    const v = localStorage.getItem(KEY);
+    return SCALES.includes(v as RatingScale) ? (v as RatingScale) : "5half";
+  } catch {
+    return "5half";
+  }
+}
+
+export function setRatingScale(scale: RatingScale): void {
+  localStorage.setItem(KEY, scale);
+  for (const l of listeners) l();
+}
+
+function subscribe(cb: () => void): () => void {
+  listeners.add(cb);
+  const onStorage = (e: StorageEvent) => e.key === KEY && cb();
+  window.addEventListener("storage", onStorage);
+  return () => {
+    listeners.delete(cb);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+
+export function useRatingScale(): RatingScale {
+  return useSyncExternalStore(subscribe, read, () => "5half");
+}
diff --git a/apps/web/test/api.test.ts b/apps/web/test/api.test.ts
index 777f462..22ff8d6 100644
--- a/apps/web/test/api.test.ts
+++ b/apps/web/test/api.test.ts
@@ -19,7 +19,7 @@ describe("request", () => {
         headers: { "content-type": "application/json" },
       }),
     );
-    const err = await request("POST", "entries/quick", { body: { title: "" }, fetchImpl: fn }).catch((e) => e);
+    const err = (await request("POST", "entries/quick", { body: { title: "" }, fetchImpl: fn }).catch((e: unknown) => e)) as ApiError;
     expect(err).toBeInstanceOf(ApiError);
     expect(err.code).toBe("validation");
     expect(err.status).toBe(400);
@@ -74,7 +74,7 @@ describe("request", () => {
 
   test("a non-JSON error still becomes an ApiError", async () => {
     const { fn } = fakeFetch(new Response("<html>Bad gateway</html>", { status: 502 }));
-    const err = await request("GET", "me", { fetchImpl: fn }).catch((e) => e);
+    const err = (await request("GET", "me", { fetchImpl: fn }).catch((e: unknown) => e)) as ApiError;
     expect(err).toBeInstanceOf(ApiError);
     expect(err.code).toBe("http_502");
     expect(err.status).toBe(502);
@@ -84,7 +84,7 @@ describe("request", () => {
     const { fn } = fakeFetch(() => {
       throw new TypeError("fetch failed");
     });
-    const err = await request("GET", "me", { fetchImpl: fn }).catch((e) => e);
+    const err = (await request("GET", "me", { fetchImpl: fn }).catch((e: unknown) => e)) as ApiError;
     expect(err).toBeInstanceOf(ApiError);
     expect(err.code).toBe("network");
     expect(err.status).toBe(0);