feat(ui): add Wilson CI + Cohen's kappa bars to stats panel

Two new horizontal bars below the existing verified / agreement-rate bars:

- 'Agreement 95% CI (Wilson)' — RangeBar showing the Wilson CI as a
  filled segment between low and high (wide bar = shaky number, narrow
  bar = tight). Value reads '87–97%'. '—' when no verified-with-pred set.
- 'Cohen's κ (beyond chance)' — SignedBar over [-1, 1] with the zero
  midpoint marked. Positive fills right, negative fills left. Value
  reads '0.41'. '—' when undefined (empty or single-category set).

Hook type extended with the five new fields (agreed_*_ci_low/high +
cohens_kappa). Loading skeleton bumped to 4 placeholders.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mihow

ui/src/data-services/hooks/occurrences/stats/useModelAgreement.ts

@@ -10,8 +10,15 @@ interface ModelAgreementResponse {
   no_prediction_count: number
   agreed_exact_count: number
   agreed_exact_pct: number
+  agreed_exact_ci_low: number | null
+  agreed_exact_ci_high: number | null
   agreed_any_rank_count: number
   agreed_any_rank_pct: number
+  agreed_any_rank_ci_low: number | null
+  agreed_any_rank_ci_high: number | null
+  // Cohen's kappa (exact-taxon) — agreement beyond chance. Range [-1, 1];
+  // null when denominator is 0 or expected agreement is 1.0.
+  cohens_kappa: number | null
   // Only populated when the caller passes ?agreement_coarsest_rank=<RANK>.
   agreement_coarsest_rank: string | null
   agreed_coarser_rank_count: number | null

ui/src/pages/occurrences/occurrence-stats.tsx

@@ -45,6 +45,86 @@ const StatBar = ({
   )
 }
 
+// Horizontal range bar for a Wilson confidence interval. Draws a filled
+// segment between `low` and `high` over a 0–100% track, so a wide CI reads as
+// a wide bar (= shaky number) and a tight CI as a narrow one. Null bounds →
+// "—".
+const RangeBar = ({
+  label,
+  low,
+  high,
+}: {
+  label: string
+  low: number | null
+  high: number | null
+}) => {
+  const hasData = low !== null && high !== null
+  const lowPct = hasData ? Math.round(Math.min(Math.max(low, 0), 1) * 100) : 0
+  const highPct = hasData ? Math.round(Math.min(Math.max(high, 0), 1) * 100) : 0
+
+  return (
+    <div className="space-y-2">
+      <span className="body-overline font-bold text-muted-foreground">
+        {label}
+      </span>
+      <div className="flex items-center gap-3">
+        <div className="h-2 flex-1 rounded-full bg-muted relative">
+          {hasData ? (
+            <div
+              className="absolute h-2 rounded-full bg-primary transition-all"
+              style={{
+                left: `${lowPct}%`,
+                width: `${Math.max(highPct - lowPct, 1)}%`,
+              }}
+            />
+          ) : null}
+        </div>
+        <span className="body-base tabular-nums">
+          {hasData ? `${lowPct}–${highPct}%` : '—'}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// Signed bar for a value in [-1, 1] (Cohen's kappa). 0 sits at the visual
+// midpoint; positive values fill rightward, negative fill leftward. Null →
+// "—" (kappa is undefined for empty or single-category sets).
+const SignedBar = ({
+  label,
+  value,
+}: {
+  label: string
+  value: number | null
+}) => {
+  const v = value === null ? null : Math.min(Math.max(value, -1), 1)
+  const widthPct = v === null ? 0 : Math.abs(v) * 50
+  const leftPct = v === null ? 50 : v >= 0 ? 50 : 50 - widthPct
+
+  return (
+    <div className="space-y-2">
+      <span className="body-overline font-bold text-muted-foreground">
+        {label}
+      </span>
+      <div className="flex items-center gap-3">
+        <div className="h-2 flex-1 rounded-full bg-muted relative">
+          {/* zero marker */}
+          <div className="absolute h-2 w-px bg-foreground/40 left-1/2" />
+          {v !== null ? (
+            <div
+              className="absolute h-2 rounded-full bg-primary transition-all"
+              style={{ left: `${leftPct}%`, width: `${widthPct}%` }}
+            />
+          ) : null}
+        </div>
+        <span className="body-base tabular-nums">
+          {v === null ? '—' : v.toFixed(2)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
 // Live verified / agreement stats for the occurrence list. Threads the same
 // filter array the list view sends so the numbers always match the result set.
 export const OccurrenceStats = ({
@@ -75,6 +155,8 @@ export const OccurrenceStats = ({
           <>
             <div className="h-12 animate-pulse rounded-md bg-muted" />
             <div className="h-12 animate-pulse rounded-md bg-muted" />
+            <div className="h-12 animate-pulse rounded-md bg-muted" />
+            <div className="h-12 animate-pulse rounded-md bg-muted" />
           </>
         ) : (
           <>
@@ -87,6 +169,15 @@ export const OccurrenceStats = ({
               label="Human-model agreement rate"
               value={data.agreed_any_rank_pct}
             />
+            <RangeBar
+              label="Agreement 95% CI (Wilson)"
+              low={data.agreed_any_rank_ci_low}
+              high={data.agreed_any_rank_ci_high}
+            />
+            <SignedBar
+              label="Cohen's κ (beyond chance)"
+              value={data.cohens_kappa}
+            />
           </>
         )}
       </div>