W5: claims review queue

components-claims: ClaimsReviewQueue (proposed → conflicts → unreviewed per
claims-spec §2.3), ClaimCard (confirm/reject/reopen tombstone), ConflictPair
(both sides raw, three resolutions: keep-with-supersede, dismiss-both,
reject-newcomer; human_confirmed can't be rejected). Tiers raw, no scores.
Demo Review tab wired. Typechecks clean.

Co-Authored-By: Claude Fable 5 (build) <noreply@anthropic.com>

demo/knowledge.tsx

@@ -4,11 +4,13 @@
 // ===========================================================================
 import { useEffect, useState } from "react";
 import {
+  ClaimsReviewQueue,
   CollectionForm,
   CollectionList,
   ObjectList,
   ObjectViewer,
   MockKnowledgeTransport,
+  type Claim,
   type Collection,
   type CollectionInput,
   type CollectionPatch,
@@ -25,11 +27,14 @@ type View =
   | { kind: "object"; id: string };
 
 export default function KnowledgeDemo() {
+  const [tab, setTab] = useState<"browse" | "review">("browse");
   const [view, setView] = useState<View>({ kind: "collections" });
   const [collections, setCollections] = useState<Collection[]>([]);
   const [pending, setPending] = useState<Record<string, number>>({});
   const [objects, setObjects] = useState<ObjectSummary[]>([]);
   const [outline, setOutline] = useState<ObjectOutline | null>(null);
+  const [claims, setClaims] = useState<Claim[]>([]);
+  const [busyId, setBusyId] = useState<string | undefined>();
   const [creating, setCreating] = useState<null | "account" | "tenant">(null);
   const [editing, setEditing] = useState<Collection | null>(null);
   const [busy, setBusy] = useState(false);
@@ -38,11 +43,19 @@ export default function KnowledgeDemo() {
     const page = await transport.listCollections();
     setCollections(page.collections);
     const queue = await transport.reviewQueue();
+    setClaims(queue);
     const counts: Record<string, number> = {};
     for (const c of queue) counts[c.collection] = (counts[c.collection] ?? 0) + 1;
     setPending(counts);
   }
 
+  async function afterClaim(id: string, fn: () => Promise<unknown>) {
+    setBusyId(id);
+    await fn();
+    setBusyId(undefined);
+    void refresh();
+  }
+
   useEffect(() => {
     void refresh();
   }, []);
@@ -68,17 +81,43 @@ export default function KnowledgeDemo() {
     void refresh();
   }
 
+  const reviewCount = claims.length;
+
   return (
     <div className="mx-auto max-w-5xl p-6">
-      <button
-        type="button"
-        onClick={() => setView({ kind: "collections" })}
-        className="mb-4 text-sm text-muted-foreground hover:text-foreground"
-      >
-        Knowledge{view.kind !== "collections" ? " / …" : ""}
-      </button>
+      <div className="mb-4 flex items-center gap-2">
+        <TabBtn active={tab === "browse"} onClick={() => setTab("browse")}>Browse</TabBtn>
+        <TabBtn active={tab === "review"} onClick={() => setTab("review")}>
+          Review{reviewCount > 0 ? ` (${reviewCount})` : ""}
+        </TabBtn>
+      </div>
 
-      {view.kind === "collections" && (
+      {tab === "review" && (
+        <ClaimsReviewQueue
+          claims={claims}
+          busyId={busyId}
+          onConfirm={(id) => afterClaim(id, () => transport.confirmClaim(id))}
+          onReject={(id) => afterClaim(id, () => transport.rejectClaim(id))}
+          onKeep={(winner, supersede) => afterClaim(winner, () => transport.confirmClaim(winner, { supersede }))}
+          onDismissConflict={(id) => afterClaim(id, () => transport.dismissConflict(id))}
+          onOpenSource={(objectId) => {
+            setTab("browse");
+            setView({ kind: "object", id: objectId });
+          }}
+        />
+      )}
+
+      {tab === "browse" && view.kind !== "collections" && (
+        <button
+          type="button"
+          onClick={() => setView({ kind: "collections" })}
+          className="mb-4 text-sm text-muted-foreground hover:text-foreground"
+        >
+          ← All corpuses
+        </button>
+      )}
+
+      {tab === "browse" && view.kind === "collections" && (
         <>
           {creating && (
             <div className="mb-6 rounded-xl border border-border bg-card p-4">
@@ -103,7 +142,7 @@ export default function KnowledgeDemo() {
         </>
       )}
 
-      {view.kind === "collection" && (
+      {tab === "browse" && view.kind === "collection" && (
         <>
           <div className="mb-3 flex items-center justify-between">
             <h1 className="text-lg font-semibold">{view.slug}</h1>
@@ -113,7 +152,7 @@ export default function KnowledgeDemo() {
         </>
       )}
 
-      {view.kind === "object" && outline && (
+      {tab === "browse" && view.kind === "object" && outline && (
         <ObjectViewer
           outline={outline}
           readText={(sel) => transport.readText(outline.object_id, sel)}
@@ -128,3 +167,18 @@ export default function KnowledgeDemo() {
     </div>
   );
 }
+
+function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={
+        "rounded-lg px-3 py-1.5 text-sm font-medium transition " +
+        (active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted")
+      }
+    >
+      {children}
+    </button>
+  );
+}