From 32054fc9452aab9a23735c609cfac213a61cf133 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 20:26:52 +0000
Subject: [PATCH 1/2] Scope the frontend audit walk to screens as well as
 components

The extraction convention already binds src/screens (its CLAUDE.md
mirrors the components one), but frontend-organization.md's audit
checklist only walked src/components - so the periodic sweeps never
looked at the biggest files in the frontend, which is where the
tech-debt audit found ~22k lines of unextracted decision logic.
---
 docs/dev/frontend-organization.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/dev/frontend-organization.md b/docs/dev/frontend-organization.md
index aca24364..7ec2e74e 100644
--- a/docs/dev/frontend-organization.md
+++ b/docs/dev/frontend-organization.md
@@ -191,7 +191,10 @@ component "to consolidate." Each is locally reasonable.
 The aggregate is a layer rebuilt one inch at a time.
 
 Periodically (and after any non-trivial UI work), walk
-`src/components/*.svelte` and ask, per file:
+`src/components/*.svelte` AND `src/screens/*.svelte` and ask, per
+file (the screens are where the convention drifts hardest - they
+are the biggest files, and "it's only used by this screen" is the
+exact rationalization the convention exists to refuse):
 
 1. **What's in the `<script>` block besides imports, prop
    destructuring, `$state` / `$derived` declarations, and

From 9c070f283953064a5f97c45e4de45b16afbff3e6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 20:37:37 +0000
Subject: [PATCH 2/2] Bring BiasProfile.svelte into conformance with the
 frontend split

The bias-profile modal had accumulated the largest pile of decision
logic of any screen: row sorting, the render-cap selection, catalog
lookups, five formatters, the per-row interpretation prose, the
landscape chart's hue and width geometry, and the current-conversation
empty-state copy all lived in the .svelte file, none of it unit-
testable without a mount. This moves every framework-agnostic decision
into the existing src/lib/ui/bias-profile.ts companion (joining the
five primitives already there) and adds plain-vitest coverage for the
whole module in tests/bias-profile.test.ts, following the
cohort-panel exemplar. The screen keeps only Svelte wire-up: state
runes, the supabase fetch orchestration, toggle handlers, and markup
that picks values instead of deriving them.

Structure only - no behavior change. This is the decomposition
pattern for the remaining oversized screens: extract primitives into
the companion module first; split components only when a section is
genuinely self-contained (nothing here was - the sections all read
the same summary/rendered state, so the screen stays one file with
clean delegation).
---
 docs/dev/bias-profile.md       |  14 +-
 src/lib/ui/bias-profile.ts     | 419 ++++++++++++++++++++++++++++++++-
 src/screens/BiasProfile.svelte | 408 ++++++--------------------------
 tests/bias-profile.test.ts     | 413 ++++++++++++++++++++++++++++++++
 4 files changed, 920 insertions(+), 334 deletions(-)
 create mode 100644 tests/bias-profile.test.ts

diff --git a/docs/dev/bias-profile.md b/docs/dev/bias-profile.md
index fdd635ab..c9bfc43a 100644
--- a/docs/dev/bias-profile.md
+++ b/docs/dev/bias-profile.md
@@ -151,9 +151,17 @@ interval lower bound (not the mean) as the surfacing gate.
 - `src/screens/BiasProfile.svelte` - the diagnostics modal. Reads
   `bias_summary` and `biasListProcessedThreads` on mount;
   per-thread observations are pulled on demand when a row is
-  expanded. Three sections: per-bias evidence table, processed
-  conversations list with drill-down to observations, footer
-  citing the math constants.
+  expanded. Four sections: current-conversation status, bias
+  landscape chart, per-bias evidence cards with drill-down, and
+  the processed-conversations list, plus a footer citing the math
+  constants. The screen is Svelte wire-up only per the frontend
+  split (see `docs/dev/frontend-organization.md`).
+- `src/lib/ui/bias-profile.ts` - the modal's pure display
+  primitives: row sorting, the RENDER_CAP'd rendered set, catalog
+  lookups tolerant of unknown keys, number/verdict formatters, the
+  per-row interpretation prose, the landscape chart's hue and
+  width geometry, and the current-conversation empty-state copy.
+  Unit-tested in `tests/bias-profile.test.ts`.
 - `supabase/schema.sql` (bias-profile section) - the tables
   (`bias_observations`, `bias_summary`, `bias_reactions`), the
   columns on `threads` (`bias_processed_at`,
diff --git a/src/lib/ui/bias-profile.ts b/src/lib/ui/bias-profile.ts
index 9e99bb32..40ddc6d9 100644
--- a/src/lib/ui/bias-profile.ts
+++ b/src/lib/ui/bias-profile.ts
@@ -6,7 +6,424 @@
  * fetch orchestration, navigation patches, and the markup).
  */
 
-import type { Tier } from '$lib/bias/types';
+import { BIAS_CATALOG } from '$lib/bias/catalog';
+import { type BiasKey, isBiasKey } from '$lib/bias/catalog-keys';
+import {
+  ALPHA_PRIOR,
+  BETA_PRIOR,
+  CI_LB_SOFT,
+  CI_LB_STRONG,
+  FEEDBACK_THRESHOLD_DELTA,
+  N_EFF_FLOOR,
+  RENDER_CAP,
+  type Tier,
+} from '$lib/bias/types';
+
+/**
+ * The slice of a `bias_summary` row the modal renders. Narrower
+ * than `BiasSummaryRow` in `$lib/bias/types` on purpose: `bias`
+ * stays free text here (the DB has no enum check, so a row can
+ * carry a key the catalog no longer knows and the modal display-
+ * tolerates it rather than dropping it), and the modal never
+ * touches the raw posterior alpha/beta.
+ */
+export interface BiasSummaryDisplayRow {
+  bias: string;
+  effectiveN: number;
+  posteriorMean: number;
+  ciLower: number;
+  feedbackScore: number;
+  tier: Tier;
+}
+
+/**
+ * Sort summary rows for the table: strong tier first, then soft,
+ * then elided; within each tier, by ciLower descending so the
+ * strongest signal lands at the top. Returns a fresh array; the
+ * input is not mutated.
+ */
+export function sortSummaryRows(
+  rows: readonly BiasSummaryDisplayRow[],
+): BiasSummaryDisplayRow[] {
+  const tierWeight = (t: string): number =>
+    t === 'strong' ? 0 : t === 'soft' ? 1 : 2;
+  return [...rows].sort((a, b) => {
+    const t = tierWeight(a.tier) - tierWeight(b.tier);
+    if (t !== 0) return t;
+    return b.ciLower - a.ciLower;
+  });
+}
+
+/**
+ * The rows whose compensation guidance rides into the system
+ * prompt this turn (post render-cap): soft+strong only, top
+ * RENDER_CAP by ciLower. The modal's "in prompt" pill reads a key
+ * set derived from this so the user can see which biases are
+ * actually shaping responses right now, not just which ones
+ * cleared the tier gate. Mirrors the server-side selection in
+ * supabase/functions/_shared/bias-format.ts.
+ */
+export function renderedBiasRows(
+  rows: readonly BiasSummaryDisplayRow[],
+): BiasSummaryDisplayRow[] {
+  return rows
+    .filter((r) => r.tier === 'soft' || r.tier === 'strong')
+    .sort((a, b) => b.ciLower - a.ciLower)
+    .slice(0, RENDER_CAP);
+}
+
+/**
+ * Display label for a catalog key. The DB stores `bias` as free
+ * text (no enum check), so a persisted row can name a key the
+ * catalog no longer carries; falling back to the raw key keeps
+ * the row legible instead of blanking it.
+ */
+export function biasLabel(key: string): string {
+  if (!isBiasKey(key)) return key;
+  return BIAS_CATALOG[key as BiasKey].label;
+}
+
+/**
+ * Catalog definition for a bias key; empty string for unknown
+ * keys (the surrounding card still renders the label, so a blank
+ * definition line degrades quietly).
+ */
+export function biasDefinition(key: string): string {
+  if (!isBiasKey(key)) return '';
+  return BIAS_CATALOG[key as BiasKey].definition;
+}
+
+/**
+ * The pre-written compensation guidance string for a bias - the
+ * same text that rides into the chat LLM's system prompt when
+ * the bias clears a tier. Surfaced in the "Current conversation"
+ * section so the user can see what the assistant is being told
+ * about them, not just the bias name. Empty string for unknown
+ * keys.
+ */
+export function biasGuidance(key: string): string {
+  if (!isBiasKey(key)) return '';
+  return BIAS_CATALOG[key as BiasKey].guidance;
+}
+
+/** Locale-formatted wall-clock timestamp; empty string for null
+ *  so optional dates render as nothing rather than "null". */
+export function formatTimestamp(iso: string | null): string {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+/** Probability as a tenths-precision percentage ("12.3%") - the
+ *  CI-lower and posterior-mean columns. */
+export function formatProbability(n: number): string {
+  return (n * 100).toFixed(1) + '%';
+}
+
+/** Effective sample size to one decimal - it is a sum of recency
+ *  weights, not an integer count. */
+export function formatEffectiveN(n: number): string {
+  return n.toFixed(1);
+}
+
+/**
+ * Feedback score is signed in [-1, +1]. Render with an explicit
+ * sign so the polarity reads at a glance; +0.00 / -0.00 also
+ * collapse to the neutral 0.00.
+ */
+export function formatFeedback(n: number): string {
+  const abs = Math.abs(n);
+  if (abs < 0.005) return '0.00';
+  const sign = n > 0 ? '+' : '-';
+  return `${sign}${abs.toFixed(2)}`;
+}
+
+/**
+ * Whole-percent confidence label for an observation card. Raw
+ * confidences are clamped to [0.40, 0.85] at ingest, so tenths
+ * would imply precision the pipeline does not have - unlike the
+ * CI columns, which get formatProbability's tenths.
+ */
+export function formatConfidence(n: number): string {
+  return (n * 100).toFixed(0) + '%';
+}
+
+/**
+ * Render-time tag for a reaction's three-state was_confirmed.
+ */
+export function reactionVerdict(wasConfirmed: boolean | null): string {
+  if (wasConfirmed === true) return 'affirmed';
+  if (wasConfirmed === false) return 'pushed back';
+  return 'neutral';
+}
+
+/**
+ * Reaction verdict to the CSS colorway key, parallel to
+ * `reactionVerdict` the same way the tier badge pairs its label
+ * with a class. Matches the `.reaction-verdict.*` rules in the
+ * modal's stylesheet: affirmed (accent-tinted), pushed
+ * (danger-tinted), neutral (subtle gray).
+ */
+export function reactionVerdictClass(
+  wasConfirmed: boolean | null,
+): 'affirmed' | 'pushed' | 'neutral' {
+  if (wasConfirmed === true) return 'affirmed';
+  if (wasConfirmed === false) return 'pushed';
+  return 'neutral';
+}
+
+/**
+ * Has the sweep ever flagged this bias for the user? Distinct
+ * from "is the row above the N_eff floor": effective_n counts
+ * processed conversations (with pConv=0 for no-hits), while this
+ * counts raw observation rows. Zero observations means the
+ * row's ci_lower is just the prior's 10th-percentile (~5%)
+ * dragged slightly down by the cumulative no-hit denominator -
+ * not actual signal. Drives the "no evidence" rendering.
+ * `counts` is the modal's per-bias observation-count map, passed
+ * in so the primitive stays pure of component state.
+ */
+export function hasEvidence(
+  counts: Record<string, number>,
+  biasKey: string,
+): boolean {
+  return (counts[biasKey] ?? 0) > 0;
+}
+
+/**
+ * Subjective, prose-y interpretation of a row's numbers. The
+ * stats grid carries the raw values; this paragraph translates
+ * them into "what does this actually mean for me?" for readers
+ * who do not want to translate a 90% credible interval lower
+ * bound on a Beta-Binomial posterior into intuition on the fly.
+ *
+ * Branches: no-observations (never flagged, ci_lower is just the
+ * prior's 10th-percentile), below-N-floor (numbers are mostly
+ * prior), elided-but-above-floor (weak signal, no surfacing),
+ * soft tier (occasional pattern), strong tier (consistent
+ * pattern). The soft/strong arms also note when a bias is
+ * at-tier but bumped out by RENDER_CAP. A trailing feedback
+ * sentence appears only when the EMA is meaningful (|score| >=
+ * 0.10) - below that the gate shift rounds to zero anyway.
+ *
+ * `hasAnyEvidence` is the `hasEvidence` read for this row's key,
+ * passed in because the counts map lives in component state.
+ */
+export function interpretBias(
+  row: BiasSummaryDisplayRow,
+  isRendered: boolean,
+  hasAnyEvidence: boolean,
+): string {
+  const pct = (n: number): string => (n * 100).toFixed(1) + '%';
+  const noObservations = !hasAnyEvidence;
+  const belowFloor = row.effectiveN < N_EFF_FLOOR;
+
+  let core: string;
+  if (noObservations) {
+    // The ci_lower sits at the prior's 10th-percentile (~5%) plus
+    // a small downward drift from cumulative no-hit denominator
+    // mass; the percentage itself is uninformative, so the prose
+    // leans on "never flagged" rather than the number.
+    core =
+      `No evidence - the analysis has never flagged this bias in any ` +
+      `analyzed conversation. The stats above are just the ` +
+      `Beta(${ALPHA_PRIOR}, ${BETA_PRIOR}) prior with the ` +
+      `cumulative no-hit denominator from processed conversations ` +
+      `pulling the posterior slightly below the prior mean ` +
+      `of ~20%.`;
+  } else if (belowFloor) {
+    const shortfall = Math.max(0, N_EFF_FLOOR - row.effectiveN).toFixed(1);
+    core =
+      `Mostly prior - only ${formatEffectiveN(row.effectiveN)} ` +
+      `effective observations (recency-weighted) against the ` +
+      `floor of ${N_EFF_FLOOR}. The posterior mean of ` +
+      `${pct(row.posteriorMean)} is dominated by the default ` +
+      `Beta(${ALPHA_PRIOR}, ${BETA_PRIOR}) prior (mean ~20%); ` +
+      `about ${shortfall} more recency-weighted observations ` +
+      `needed before any signal can clear the floor.`;
+  } else if (row.tier === 'elided') {
+    core =
+      `Weak signal - 90% confident the underlying rate is at ` +
+      `least ${pct(row.ciLower)}, below the ${pct(CI_LB_SOFT)} ` +
+      `soft gate. Not surfacing in the system prompt.`;
+  } else if (row.tier === 'soft') {
+    const trailing = isRendered
+      ? ` Surfaces as a light "occasionally" nudge in the system prompt.`
+      : ` Outside the top ${RENDER_CAP} by CI lower this turn, ` +
+        `so the system prompt skips it.`;
+    core =
+      `Occasional pattern - 90% lower bound of ` +
+      `${pct(row.ciLower)} clears the soft gate ` +
+      `(${pct(CI_LB_SOFT)}) but not strong ` +
+      `(${pct(CI_LB_STRONG)}).` +
+      trailing;
+  } else {
+    const trailing = isRendered
+      ? ` Surfaces as a firm "consistently" nudge in the system prompt.`
+      : ` Outside the top ${RENDER_CAP} by CI lower this turn, ` +
+        `so the system prompt skips it.`;
+    core =
+      `Consistent pattern - 90% lower bound of ` +
+      `${pct(row.ciLower)} clears the strong gate ` +
+      `(${pct(CI_LB_STRONG)}).` +
+      trailing;
+  }
+
+  const fb = row.feedbackScore;
+  if (Math.abs(fb) >= 0.1) {
+    const delta = (Math.abs(fb) * FEEDBACK_THRESHOLD_DELTA).toFixed(2);
+    if (fb > 0) {
+      core +=
+        ` Feedback ${formatFeedback(fb)} shifts both gates down ` +
+        `by ${delta}, surfacing this sooner.`;
+    } else {
+      core +=
+        ` Feedback ${formatFeedback(fb)} shifts both gates up ` +
+        `by ${delta}, raising the bar to surface.`;
+    }
+  }
+
+  return core;
+}
+
+/**
+ * Hue for the landscape bar - encodes where this bias's CI
+ * lower sits relative to the surfacing gates. Borrowed in
+ * spirit from `usageHue` in Settings.svelte (color carries
+ * "how unusual is this row"; length still carries the magnitude),
+ * but anchored to the absolute gate thresholds rather than the
+ * dataset's median, because the gates are what determine
+ * surfacing and they don't drift with the data.
+ *
+ *   0                       -> 220 (blue, no signal)
+ *   CI_LB_SOFT (0.15)       -> 140 (green, edge of soft tier)
+ *   CI_LB_STRONG (0.30)     ->  30 (orange, edge of strong tier)
+ *   >= CI_LB_STRONG + 0.20  ->   5 (red, deep into strong)
+ *
+ * Linear interpolation between waypoints.
+ */
+export function biasHue(ciLower: number): number {
+  if (ciLower <= 0) return 220;
+  if (ciLower < CI_LB_SOFT) {
+    const t = ciLower / CI_LB_SOFT;
+    return 220 - t * 80;
+  }
+  if (ciLower < CI_LB_STRONG) {
+    const t = (ciLower - CI_LB_SOFT) / (CI_LB_STRONG - CI_LB_SOFT);
+    return 140 - t * 110;
+  }
+  const t = Math.min(1, (ciLower - CI_LB_STRONG) / 0.2);
+  return 30 - t * 25;
+}
+
+/**
+ * Denominator for the landscape bar's width. Always extends at
+ * least to the strong-tier gate so the gate positions sit at a
+ * consistent visual location even when no bias has cleared it
+ * yet - otherwise a profile full of elided biases would stretch
+ * the tiny CI-lower values to full width and lose the "look how
+ * far we are from surfacing" read.
+ */
+export function chartScale(rows: readonly BiasSummaryDisplayRow[]): number {
+  return Math.max(
+    CI_LB_STRONG * 1.1,
+    ...rows.map((r) => r.ciLower),
+  );
+}
+
+/**
+ * Width (in percent of the chart column) for one landscape bar.
+ * `max(2%, share-of-scale)` so a non-zero but tiny CI lower still
+ * registers as a visible nub rather than vanishing. No-evidence
+ * rows are pinned to a fixed 1.5% gray nub - the ci_lower for
+ * these is just prior + cumulative no-hit drift, so rendering it
+ * at gate-relative position would imply signal that isn't there.
+ * `scale` is the chartScale denominator, computed once per row
+ * set by the caller.
+ */
+export function barWidthPct(
+  ciLower: number,
+  hasAnyEvidence: boolean,
+  scale: number,
+): number {
+  if (!hasAnyEvidence) return 1.5;
+  if (ciLower <= 0) return 0;
+  return Math.max(2, (ciLower / scale) * 100);
+}
+
+/**
+ * Empty-state copy for the "Observations from this conversation"
+ * block, or null when the loaded observation list should render
+ * instead. The null checks are the "sweep hasn't analyzed this
+ * thread yet" state, which covers two cases that look the same
+ * from the modal's perspective: (1) the thread is materialized
+ * but still dated today (the day-gate defers it), and (2) the
+ * thread is still a brand-new draft that hasn't been written to
+ * the DB yet, in which case the observations query trivially
+ * returns [] and would otherwise read as "already analyzed, no
+ * findings" - wrong and misleading for a conversation that
+ * hasn't even had its first message sent.
+ */
+export function currentObservationsEmptyCopy(
+  obs: readonly unknown[] | null,
+  processedAt: string | null,
+): string | null {
+  if (obs === null || processedAt === null) {
+    return (
+      'Not yet analyzed. Conversations become eligible once their ' +
+      'last activity falls on a previous day; the hourly sweep picks ' +
+      'this one up then.'
+    );
+  }
+  if (obs.length === 0) {
+    return (
+      'Already analyzed - no clear bias evidence was found in this ' +
+      'conversation. Reporting nothing is the correct answer most of ' +
+      'the time.'
+    );
+  }
+  return null;
+}
+
+/**
+ * Empty-state copy for the "Reactions to compensation" block, or
+ * null when the loaded reaction list should render instead. Same
+ * "not yet analyzed" gating as `currentObservationsEmptyCopy`: an
+ * empty reactions list on an un-processed thread is the sweep not
+ * having gotten to it (or the thread being a draft that doesn't
+ * exist in the DB yet), not "scanned and found nothing." When the
+ * thread IS analyzed but empty, `activeBiasCount` (the size of
+ * this turn's rendered set) picks between "nothing was active to
+ * react to" and "the agent saw no clear signal."
+ */
+export function currentReactionsEmptyCopy(
+  reactions: readonly unknown[] | null,
+  processedAt: string | null,
+  activeBiasCount: number,
+): string | null {
+  if (reactions === null || processedAt === null) {
+    return (
+      'Not yet analyzed. Reactions are recorded for the biases that ' +
+      'were active in the system prompt while the conversation ' +
+      'happened; the sweep classifies them once the conversation ' +
+      'settles.'
+    );
+  }
+  if (reactions.length > 0) return null;
+  if (activeBiasCount === 0) {
+    return (
+      'No biases were active in the system prompt during this ' +
+      'conversation, so there was nothing for you to react to.'
+    );
+  }
+  return (
+    'Already analyzed - the agent did not see a clear affirmation ' +
+    'or pushback signal for the active biases on this conversation.'
+  );
+}
 
 /**
  * Fallback for a thread title rendered as a clickable link in the
diff --git a/src/screens/BiasProfile.svelte b/src/screens/BiasProfile.svelte
index 15ff3a14..7a880fbf 100644
--- a/src/screens/BiasProfile.svelte
+++ b/src/screens/BiasProfile.svelte
@@ -15,33 +15,55 @@
    *     Lists the soft+strong biases that are currently shaping
    *     responses on this turn (the same RENDER_CAP-capped set the
    *     chat-loop injects into the system prompt) plus any
-   *     observations the sweep has already recorded for this
-   *     thread (or an explanation of why none exist yet - the
-   *     thread is excluded from analysis while open).
+   *     observations and reactions the sweep has already recorded
+   *     for this thread (or an explanation of why none exist yet -
+   *     the thread is excluded from analysis while open).
+   *
+   *   - Bias landscape. One bar per catalog entry tracking the CI
+   *     lower bound against the surfacing gates, for an at-a-glance
+   *     comparison across the whole catalog.
    *
    *   - Per-bias evidence table. One row per catalog entry showing
    *     the tier badge, the credible-interval lower bound, the
    *     posterior mean, the effective sample size, and a preview of
-   *     the system-prompt contribution (if any).
+   *     the system-prompt contribution (if any). Each flagged row
+   *     expands to its per-observation drill-down.
    *
    *   - Recently processed conversations. Latest N (default 30)
    *     threads the sweep has analyzed, each expandable to its
    *     per-observation list.
    *
-   *   - Per-observation drill-down. Inside an expanded thread, one
-   *     card per observation with the bias name, confidence, and
-   *     the reasoning string.
-   *
-   * No write controls; the pipeline is autonomic.
+   * No write controls; the pipeline is autonomic. Display
+   * decisions (sorting, the rendered set, formatters, prose
+   * interpretation, chart geometry, empty-state copy) live in
+   * `$lib/ui/bias-profile`; this file is Svelte wire-up.
    */
   import { onMount } from 'svelte';
   import { app } from '$lib/state.svelte';
   import { navigate, route } from '$lib/routing.svelte';
-  import { BIAS_CATALOG } from '$lib/bias/catalog';
-  import { type BiasKey, isBiasKey } from '$lib/bias/catalog-keys';
   import {
+    type BiasSummaryDisplayRow,
+    barWidthPct,
+    biasDefinition,
+    biasGuidance,
+    biasHue,
+    biasLabel,
+    chartScale,
+    currentObservationsEmptyCopy,
+    currentReactionsEmptyCopy,
     displayThreadTitle,
+    formatConfidence,
+    formatEffectiveN,
+    formatFeedback,
+    formatProbability,
+    formatTimestamp,
+    hasEvidence,
+    interpretBias,
     observationsLabel,
+    reactionVerdict,
+    reactionVerdictClass,
+    renderedBiasRows,
+    sortSummaryRows,
     tierTitle,
     IN_PROMPT_TITLE,
     reactionVerdictTitle,
@@ -63,16 +85,6 @@
   }
   let { onClose }: Props = $props();
 
-  interface SummaryRow {
-    bias: string;
-    effectiveN: number;
-    posteriorMean: number;
-    ciLower: number;
-    feedbackScore: number;
-    tier: 'elided' | 'soft' | 'strong';
-    computedAt: string;
-  }
-
   interface ProcessedThreadRow {
     threadId: string;
     title: string;
@@ -113,7 +125,7 @@
     createdAt: string;
   }
 
-  let summary = $state<SummaryRow[]>([]);
+  let summary = $state<BiasSummaryDisplayRow[]>([]);
   let processed = $state<ProcessedThreadRow[]>([]);
   // Per-bias drill-down expansion state. `expandedBiasKey` is the
   // bias whose observations are currently shown inline under its
@@ -262,240 +274,26 @@
     }
   }
 
-  /**
-   * Sort summary rows for the table: strong tier first, then soft,
-   * then elided; within each tier, by ciLower descending so the
-   * strongest signal lands at the top.
-   */
-  const summaryRows = $derived.by<SummaryRow[]>(() => {
-    const tierWeight = (t: string): number =>
-      t === 'strong' ? 0 : t === 'soft' ? 1 : 2;
-    return [...summary].sort((a, b) => {
-      const t = tierWeight(a.tier) - tierWeight(b.tier);
-      if (t !== 0) return t;
-      return b.ciLower - a.ciLower;
-    });
-  });
-
-  /**
-   * Set of bias keys that would be rendered into the system prompt
-   * this turn (post render-cap). The "in prompt" pill in the table
-   * reads from this so the user can see which biases are actually
-   * shaping responses right now, not just which ones cleared the
-   * tier gate.
-   */
-  const renderedRows = $derived.by<SummaryRow[]>(() => {
-    return summary
-      .filter((r) => r.tier === 'soft' || r.tier === 'strong')
-      .sort((a, b) => b.ciLower - a.ciLower)
-      .slice(0, RENDER_CAP);
-  });
+  // All display decisions delegate to $lib/ui/bias-profile; the
+  // deriveds below are the reactive wire-up over those primitives.
+  const summaryRows = $derived(sortSummaryRows(summary));
+  const renderedRows = $derived(renderedBiasRows(summary));
   const rendered = $derived(new Set(renderedRows.map((r) => r.bias)));
-
-  function biasLabel(key: string): string {
-    if (!isBiasKey(key)) return key;
-    return BIAS_CATALOG[key as BiasKey].label;
-  }
-
-  function biasDefinition(key: string): string {
-    if (!isBiasKey(key)) return '';
-    return BIAS_CATALOG[key as BiasKey].definition;
-  }
-
-  /**
-   * The pre-written compensation guidance string for a bias - the
-   * same text that rides into the chat LLM's system prompt when
-   * the bias clears a tier. Surfaced in the "Current conversation"
-   * section so the user can see what the assistant is being told
-   * about them, not just the bias name.
-   */
-  function biasGuidance(key: string): string {
-    if (!isBiasKey(key)) return '';
-    return BIAS_CATALOG[key as BiasKey].guidance;
-  }
-
-  function formatTimestamp(iso: string | null): string {
-    if (!iso) return '';
-    try {
-      return new Date(iso).toLocaleString();
-    } catch {
-      return iso;
-    }
-  }
-
-  function formatProbability(n: number): string {
-    return (n * 100).toFixed(1) + '%';
-  }
-
-  function formatEffectiveN(n: number): string {
-    return n.toFixed(1);
-  }
-
-  /**
-   * Feedback score is signed in [-1, +1]. Render with an explicit
-   * sign so the polarity reads at a glance; +0.00 / -0.00 also
-   * collapse to the neutral 0.00.
-   */
-  function formatFeedback(n: number): string {
-    const abs = Math.abs(n);
-    if (abs < 0.005) return '0.00';
-    const sign = n > 0 ? '+' : '-';
-    return `${sign}${abs.toFixed(2)}`;
-  }
-
-  /**
-   * Render-time tag for a reaction's three-state was_confirmed.
-   */
-  function reactionVerdict(wasConfirmed: boolean | null): string {
-    if (wasConfirmed === true) return 'affirmed';
-    if (wasConfirmed === false) return 'pushed back';
-    return 'neutral';
-  }
-
-  /**
-   * Has the sweep ever flagged this bias for the user? Distinct
-   * from "is the row above the N_eff floor": effective_n counts
-   * processed conversations (with pConv=0 for no-hits), while this
-   * counts raw observation rows. Zero observations means the
-   * row's ci_lower is just the prior's 10th-percentile (~5%)
-   * dragged slightly down by the cumulative no-hit denominator -
-   * not actual signal. Drives the "no evidence" rendering.
-   */
-  function hasEvidence(biasKey: string): boolean {
-    return (observationCounts[biasKey] ?? 0) > 0;
-  }
-
-  /**
-   * Subjective, prose-y interpretation of a row's numbers. The
-   * stats grid carries the raw values; this paragraph translates
-   * them into "what does this actually mean for me?" for readers
-   * who do not want to translate a 90% credible interval lower
-   * bound on a Beta-Binomial posterior into intuition on the fly.
-   *
-   * Branches: no-observations (never flagged, ci_lower is just the
-   * prior's 10th-percentile), below-N-floor (numbers are mostly
-   * prior), elided-but-above-floor (weak signal, no surfacing),
-   * soft tier (occasional pattern), strong tier (consistent
-   * pattern). The soft/strong arms also note when a bias is
-   * at-tier but bumped out by RENDER_CAP. A trailing feedback
-   * sentence appears only when the EMA is meaningful (|score| >=
-   * 0.10) - below that the gate shift rounds to zero anyway.
-   */
-  function interpretBias(row: SummaryRow, isRendered: boolean): string {
-    const pct = (n: number): string => (n * 100).toFixed(1) + '%';
-    const noObservations = !hasEvidence(row.bias);
-    const belowFloor = row.effectiveN < N_EFF_FLOOR;
-
-    let core: string;
-    if (noObservations) {
-      // The ci_lower sits at the prior's 10th-percentile (~5%) plus
-      // a small downward drift from cumulative no-hit denominator
-      // mass; the percentage itself is uninformative, so the prose
-      // leans on "never flagged" rather than the number.
-      core =
-        `No evidence - the analysis has never flagged this bias in any ` +
-        `analyzed conversation. The stats above are just the ` +
-        `Beta(${ALPHA_PRIOR}, ${BETA_PRIOR}) prior with the ` +
-        `cumulative no-hit denominator from processed conversations ` +
-        `pulling the posterior slightly below the prior mean ` +
-        `of ~20%.`;
-    } else if (belowFloor) {
-      const shortfall = Math.max(0, N_EFF_FLOOR - row.effectiveN).toFixed(1);
-      core =
-        `Mostly prior - only ${formatEffectiveN(row.effectiveN)} ` +
-        `effective observations (recency-weighted) against the ` +
-        `floor of ${N_EFF_FLOOR}. The posterior mean of ` +
-        `${pct(row.posteriorMean)} is dominated by the default ` +
-        `Beta(${ALPHA_PRIOR}, ${BETA_PRIOR}) prior (mean ~20%); ` +
-        `about ${shortfall} more recency-weighted observations ` +
-        `needed before any signal can clear the floor.`;
-    } else if (row.tier === 'elided') {
-      core =
-        `Weak signal - 90% confident the underlying rate is at ` +
-        `least ${pct(row.ciLower)}, below the ${pct(CI_LB_SOFT)} ` +
-        `soft gate. Not surfacing in the system prompt.`;
-    } else if (row.tier === 'soft') {
-      const trailing = isRendered
-        ? ` Surfaces as a light "occasionally" nudge in the system prompt.`
-        : ` Outside the top ${RENDER_CAP} by CI lower this turn, ` +
-          `so the system prompt skips it.`;
-      core =
-        `Occasional pattern - 90% lower bound of ` +
-        `${pct(row.ciLower)} clears the soft gate ` +
-        `(${pct(CI_LB_SOFT)}) but not strong ` +
-        `(${pct(CI_LB_STRONG)}).` +
-        trailing;
-    } else {
-      const trailing = isRendered
-        ? ` Surfaces as a firm "consistently" nudge in the system prompt.`
-        : ` Outside the top ${RENDER_CAP} by CI lower this turn, ` +
-          `so the system prompt skips it.`;
-      core =
-        `Consistent pattern - 90% lower bound of ` +
-        `${pct(row.ciLower)} clears the strong gate ` +
-        `(${pct(CI_LB_STRONG)}).` +
-        trailing;
-    }
-
-    const fb = row.feedbackScore;
-    if (Math.abs(fb) >= 0.1) {
-      const delta = (Math.abs(fb) * FEEDBACK_THRESHOLD_DELTA).toFixed(2);
-      if (fb > 0) {
-        core +=
-          ` Feedback ${formatFeedback(fb)} shifts both gates down ` +
-          `by ${delta}, surfacing this sooner.`;
-      } else {
-        core +=
-          ` Feedback ${formatFeedback(fb)} shifts both gates up ` +
-          `by ${delta}, raising the bar to surface.`;
-      }
-    }
-
-    return core;
-  }
-
-  /**
-   * Hue for the landscape bar - encodes where this bias's CI
-   * lower sits relative to the surfacing gates. Borrowed in
-   * spirit from `usageHue` in Settings.svelte (color carries
-   * "how unusual is this row"; length still carries the magnitude),
-   * but anchored to the absolute gate thresholds rather than the
-   * dataset's median, because the gates are what determine
-   * surfacing and they don't drift with the data.
-   *
-   *   0                       -> 220 (blue, no signal)
-   *   CI_LB_SOFT (0.15)       -> 140 (green, edge of soft tier)
-   *   CI_LB_STRONG (0.30)     ->  30 (orange, edge of strong tier)
-   *   >= CI_LB_STRONG + 0.20  ->   5 (red, deep into strong)
-   *
-   * Linear interpolation between waypoints.
-   */
-  function biasHue(ciLower: number): number {
-    if (ciLower <= 0) return 220;
-    if (ciLower < CI_LB_SOFT) {
-      const t = ciLower / CI_LB_SOFT;
-      return 220 - t * 80;
-    }
-    if (ciLower < CI_LB_STRONG) {
-      const t = (ciLower - CI_LB_SOFT) / (CI_LB_STRONG - CI_LB_SOFT);
-      return 140 - t * 110;
-    }
-    const t = Math.min(1, (ciLower - CI_LB_STRONG) / 0.2);
-    return 30 - t * 25;
-  }
-
-  /**
-   * Denominator for the landscape bar's width. Always extends at
-   * least to the strong-tier gate so the gate positions sit at a
-   * consistent visual location even when no bias has cleared it
-   * yet - otherwise a profile full of elided biases would stretch
-   * the tiny CI-lower values to full width and lose the "look how
-   * far we are from surfacing" read.
-   */
-  const chartScale = $derived(
-    Math.max(
-      CI_LB_STRONG * 1.1,
-      ...summaryRows.map((r) => r.ciLower),
+  // Denominator for the landscape bars, computed once per row set
+  // (see chartScale's doc for the gate-anchoring rationale).
+  const scale = $derived(chartScale(summaryRows));
+  // Empty-state copy for the two current-conversation blocks; null
+  // means the loaded list renders instead. The not-yet-analyzed /
+  // analyzed-but-empty distinction (including the brand-new-draft
+  // gotcha) is encoded in the primitives.
+  const obsEmptyCopy = $derived(
+    currentObservationsEmptyCopy(currentThreadObs, currentThreadProcessedAt),
+  );
+  const reactionsEmptyCopy = $derived(
+    currentReactionsEmptyCopy(
+      currentThreadReactions,
+      currentThreadProcessedAt,
+      renderedRows.length,
     ),
   );
 </script>
@@ -571,37 +369,19 @@
             {/if}
 
             <h3 class="sub-title">Observations from this conversation</h3>
-            {#if currentThreadObs === null || currentThreadProcessedAt === null}
-              <!-- The sweep hasn't analyzed this thread yet. Covers
-                   two cases that look the same from the modal's
-                   perspective: (1) the thread is materialized but
-                   still dated today (the day-gate defers it), and
-                   (2) the thread is still a brand-new draft that
-                   hasn't been written to the DB yet, in which
-                   case the observations query trivially returns []
-                   and would otherwise read as "already analyzed,
-                   no findings" - wrong and misleading for a
-                   conversation that hasn't even had its first
-                   message sent. -->
-              <p class="empty">
-                Not yet analyzed. Conversations become eligible
-                once their last activity falls on a previous day;
-                the hourly sweep picks this one up then.
-              </p>
-            {:else if currentThreadObs.length === 0}
-              <p class="empty">
-                Already analyzed - no clear bias evidence was
-                found in this conversation. Reporting nothing
-                is the correct answer most of the time.
-              </p>
+            {#if obsEmptyCopy !== null}
+              <!-- Copy choice (not-yet-analyzed vs analyzed-and-
+                   empty, including the brand-new-draft gotcha)
+                   lives in currentObservationsEmptyCopy. -->
+              <p class="empty">{obsEmptyCopy}</p>
             {:else}
               <div class="obs-list flush">
-                {#each currentThreadObs as o (o.id)}
+                {#each currentThreadObs ?? [] as o (o.id)}
                   <div class="obs-card">
                     <header class="obs-header">
                       <span class="obs-bias">{biasLabel(o.bias)}</span>
                       <span class="obs-confidence subtle">
-                        confidence {(o.confidence * 100).toFixed(0)}%
+                        confidence {formatConfidence(o.confidence)}
                       </span>
                     </header>
                     <p class="obs-reasoning">{o.reasoning}</p>
@@ -611,36 +391,18 @@
             {/if}
 
             <h3 class="sub-title">Reactions to compensation on this conversation</h3>
-            {#if currentThreadReactions === null || currentThreadProcessedAt === null || currentThreadReactions.length === 0}
-              <p class="empty">
-                {#if currentThreadReactions === null || currentThreadProcessedAt === null}
-                  <!-- Same "not yet analyzed" gating as the
-                       observations block above: an empty reactions
-                       list on an un-processed thread is the sweep
-                       not having gotten to it (or the thread being
-                       a draft that doesn't exist in the DB yet),
-                       not "scanned and found nothing." -->
-                  Not yet analyzed. Reactions are recorded for the
-                  biases that were active in the system prompt while
-                  the conversation happened; the sweep classifies
-                  them once the conversation settles.
-                {:else if renderedRows.length === 0}
-                  No biases were active in the system prompt during
-                  this conversation, so there was nothing for you
-                  to react to.
-                {:else}
-                  Already analyzed - the agent did not see a clear
-                  affirmation or pushback signal for the active
-                  biases on this conversation.
-                {/if}
-              </p>
+            {#if reactionsEmptyCopy !== null}
+              <!-- Three-way copy choice (not-yet-analyzed vs
+                   nothing-was-active vs no-clear-signal) lives in
+                   currentReactionsEmptyCopy. -->
+              <p class="empty">{reactionsEmptyCopy}</p>
             {:else}
               <div class="obs-list flush">
-                {#each currentThreadReactions as r (r.id)}
+                {#each currentThreadReactions ?? [] as r (r.id)}
                   <div class="obs-card">
                     <header class="obs-header">
                       <span class="obs-bias">{biasLabel(r.bias)}</span>
-                      <span class="reaction-verdict {r.wasConfirmed === true ? 'affirmed' : r.wasConfirmed === false ? 'pushed' : 'neutral'}" title={reactionVerdictTitle(r.wasConfirmed)}>
+                      <span class="reaction-verdict {reactionVerdictClass(r.wasConfirmed)}" title={reactionVerdictTitle(r.wasConfirmed)}>
                         {reactionVerdict(r.wasConfirmed)}
                       </span>
                     </header>
@@ -689,32 +451,18 @@
                   title={biasDefinition(row.bias)}
                 >{biasLabel(row.bias)}</span>
                 <span class="bias-chart-bar-cell" role="cell">
-                  <!--
-                    Width is `max(2%, share-of-scale)` so a
-                    non-zero but tiny CI lower still registers as
-                    a visible nub rather than vanishing.
-                    chartScale extends at least to CI_LB_STRONG *
-                    1.1 so gate-relative position stays readable
-                    even when no bias has cleared the strong gate
-                    yet. No-evidence rows are pinned to a fixed
-                    1.5% gray nub - the ci_lower for these is just
-                    prior + cumulative no-hit drift, so rendering
-                    it at gate-relative position would imply signal
-                    that isn't there.
-                  -->
+                  <!-- Bar geometry (the visible-nub minimum, the
+                       gate-anchored scale, the fixed no-evidence
+                       nub) lives in barWidthPct + chartScale. -->
                   <span
                     class="bias-chart-bar"
                     class:elided={row.tier === 'elided'}
-                    class:no-evidence={!hasEvidence(row.bias)}
-                    style="--bias-pct:{!hasEvidence(row.bias)
-                      ? 1.5
-                      : row.ciLower > 0
-                        ? Math.max(2, (row.ciLower / chartScale) * 100)
-                        : 0}%; --bias-hue:{biasHue(row.ciLower)}"
+                    class:no-evidence={!hasEvidence(observationCounts, row.bias)}
+                    style="--bias-pct:{barWidthPct(row.ciLower, hasEvidence(observationCounts, row.bias), scale)}%; --bias-hue:{biasHue(row.ciLower)}"
                   ></span>
                 </span>
                 <span class="bias-chart-value" role="cell">
-                  {#if !hasEvidence(row.bias)}
+                  {#if !hasEvidence(observationCounts, row.bias)}
                     <em class="no-evidence-label">no evidence</em>
                   {:else}
                     {formatProbability(row.ciLower)}
@@ -752,7 +500,7 @@
                   <div>
                     <dt>CI lower (90%)</dt>
                     <dd>
-                      {#if !hasEvidence(row.bias)}
+                      {#if !hasEvidence(observationCounts, row.bias)}
                         <em class="no-evidence-label">no evidence</em>
                       {:else}
                         {formatProbability(row.ciLower)}
@@ -768,9 +516,9 @@
                      trailing feedback sentence when the EMA is
                      meaningful enough to shift the gates. -->
                 <p class="bias-interpretation">
-                  {interpretBias(row, rendered.has(row.bias))}
+                  {interpretBias(row, rendered.has(row.bias), hasEvidence(observationCounts, row.bias))}
                 </p>
-                {#if hasEvidence(row.bias)}
+                {#if hasEvidence(observationCounts, row.bias)}
                   <!-- Per-bias drill-down. Surfacing this only on
                        rows the analysis has actually flagged - rows
                        with no observations have nothing to show
@@ -857,7 +605,7 @@
                             <header class="obs-header">
                               <span class="obs-bias">{biasLabel(o.bias)}</span>
                               <span class="obs-confidence subtle">
-                                confidence {(o.confidence * 100).toFixed(0)}%
+                                confidence {formatConfidence(o.confidence)}
                               </span>
                             </header>
                             <p class="obs-reasoning">{o.reasoning}</p>
@@ -870,7 +618,7 @@
                           <div class="obs-card">
                             <header class="obs-header">
                               <span class="obs-bias">{biasLabel(r.bias)}</span>
-                              <span class="reaction-verdict {r.wasConfirmed === true ? 'affirmed' : r.wasConfirmed === false ? 'pushed' : 'neutral'}" title={reactionVerdictTitle(r.wasConfirmed)}>
+                              <span class="reaction-verdict {reactionVerdictClass(r.wasConfirmed)}" title={reactionVerdictTitle(r.wasConfirmed)}>
                                 {reactionVerdict(r.wasConfirmed)}
                               </span>
                             </header>
diff --git a/tests/bias-profile.test.ts b/tests/bias-profile.test.ts
new file mode 100644
index 00000000..06678b7b
--- /dev/null
+++ b/tests/bias-profile.test.ts
@@ -0,0 +1,413 @@
+/**
+ * Unit coverage for the bias-profile modal's UI primitives. Pure
+ * functions - no runes, no DOM, no reactive state - tested via
+ * plain vitest.
+ *
+ * The companion `src/screens/BiasProfile.svelte` is the only
+ * caller that wires these into Svelte reactivity; a port to
+ * another framework would re-use this module untouched.
+ */
+import { describe, it, expect } from 'vitest';
+import { BIAS_CATALOG } from '../src/lib/bias/catalog';
+import { CI_LB_STRONG, RENDER_CAP } from '../src/lib/bias/types';
+import {
+  type BiasSummaryDisplayRow,
+  barWidthPct,
+  biasDefinition,
+  biasGuidance,
+  biasHue,
+  biasLabel,
+  chartScale,
+  currentObservationsEmptyCopy,
+  currentReactionsEmptyCopy,
+  displayThreadTitle,
+  formatConfidence,
+  formatEffectiveN,
+  formatFeedback,
+  formatProbability,
+  formatTimestamp,
+  hasEvidence,
+  interpretBias,
+  observationsLabel,
+  reactionVerdict,
+  reactionVerdictClass,
+  reactionVerdictTitle,
+  renderedBiasRows,
+  sortSummaryRows,
+  tierTitle,
+} from '../src/lib/ui/bias-profile';
+
+function makeRow(
+  bias: string,
+  overrides: Partial<BiasSummaryDisplayRow> = {},
+): BiasSummaryDisplayRow {
+  return {
+    bias,
+    effectiveN: 10,
+    posteriorMean: 0.2,
+    ciLower: 0.1,
+    feedbackScore: 0,
+    tier: 'elided',
+    ...overrides,
+  };
+}
+
+describe('sortSummaryRows', () => {
+  it('orders strong before soft before elided, ciLower descending within a tier', () => {
+    const rows = [
+      makeRow('a', { tier: 'elided', ciLower: 0.05 }),
+      makeRow('b', { tier: 'soft', ciLower: 0.16 }),
+      makeRow('c', { tier: 'strong', ciLower: 0.31 }),
+      makeRow('d', { tier: 'soft', ciLower: 0.2 }),
+    ];
+    expect(sortSummaryRows(rows).map((r) => r.bias)).toEqual([
+      'c',
+      'd',
+      'b',
+      'a',
+    ]);
+  });
+
+  it('does not mutate the input array', () => {
+    const rows = [
+      makeRow('a', { tier: 'elided' }),
+      makeRow('b', { tier: 'strong' }),
+    ];
+    sortSummaryRows(rows);
+    expect(rows.map((r) => r.bias)).toEqual(['a', 'b']);
+  });
+
+  it('returns an empty array for empty input', () => {
+    expect(sortSummaryRows([])).toEqual([]);
+  });
+});
+
+describe('renderedBiasRows', () => {
+  it('drops elided rows entirely', () => {
+    const rows = [
+      makeRow('a', { tier: 'elided', ciLower: 0.9 }),
+      makeRow('b', { tier: 'soft', ciLower: 0.16 }),
+    ];
+    expect(renderedBiasRows(rows).map((r) => r.bias)).toEqual(['b']);
+  });
+
+  it('caps the rendered set at RENDER_CAP, top by ciLower', () => {
+    const rows = Array.from({ length: RENDER_CAP + 2 }, (_, i) =>
+      makeRow(`b${i}`, { tier: 'soft', ciLower: 0.16 + i * 0.01 }),
+    );
+    const out = renderedBiasRows(rows);
+    expect(out).toHaveLength(RENDER_CAP);
+    // Highest ciLower first; the two weakest rows fell off.
+    expect(out[0].bias).toBe(`b${RENDER_CAP + 1}`);
+    expect(out.map((r) => r.bias)).not.toContain('b0');
+  });
+
+  it('does not mutate the input array', () => {
+    const rows = [
+      makeRow('a', { tier: 'soft', ciLower: 0.16 }),
+      makeRow('b', { tier: 'strong', ciLower: 0.31 }),
+    ];
+    renderedBiasRows(rows);
+    expect(rows.map((r) => r.bias)).toEqual(['a', 'b']);
+  });
+});
+
+describe('biasLabel / biasDefinition / biasGuidance', () => {
+  it('resolves known catalog keys to their catalog strings', () => {
+    expect(biasLabel('anchoring')).toBe(BIAS_CATALOG.anchoring.label);
+    expect(biasDefinition('anchoring')).toBe(
+      BIAS_CATALOG.anchoring.definition,
+    );
+    expect(biasGuidance('anchoring')).toBe(BIAS_CATALOG.anchoring.guidance);
+  });
+
+  it('keeps an unknown key legible as its raw label and blanks the prose', () => {
+    // The DB stores `bias` as free text, so a persisted row can
+    // outlive its catalog entry.
+    expect(biasLabel('phantom_bias')).toBe('phantom_bias');
+    expect(biasDefinition('phantom_bias')).toBe('');
+    expect(biasGuidance('phantom_bias')).toBe('');
+  });
+});
+
+describe('formatTimestamp', () => {
+  it('returns an empty string for null', () => {
+    expect(formatTimestamp(null)).toBe('');
+  });
+
+  it('locale-formats a valid ISO timestamp', () => {
+    const iso = '2026-05-19T12:00:00.000Z';
+    expect(formatTimestamp(iso)).toBe(new Date(iso).toLocaleString());
+  });
+});
+
+describe('formatProbability', () => {
+  it('renders tenths-precision percentages', () => {
+    expect(formatProbability(0.1234)).toBe('12.3%');
+    expect(formatProbability(0)).toBe('0.0%');
+    expect(formatProbability(1)).toBe('100.0%');
+  });
+});
+
+describe('formatEffectiveN', () => {
+  it('renders one decimal (the value is a weight sum, not a count)', () => {
+    expect(formatEffectiveN(5)).toBe('5.0');
+    expect(formatEffectiveN(7.46)).toBe('7.5');
+  });
+});
+
+describe('formatFeedback', () => {
+  it('collapses near-zero to the neutral 0.00 without a sign', () => {
+    expect(formatFeedback(0)).toBe('0.00');
+    expect(formatFeedback(0.004)).toBe('0.00');
+    expect(formatFeedback(-0.004)).toBe('0.00');
+  });
+
+  it('forces an explicit sign on meaningful values', () => {
+    expect(formatFeedback(0.25)).toBe('+0.25');
+    expect(formatFeedback(-0.3)).toBe('-0.30');
+  });
+});
+
+describe('formatConfidence', () => {
+  it('renders whole percents (ingest clamps make tenths noise)', () => {
+    expect(formatConfidence(0.72)).toBe('72%');
+    expect(formatConfidence(0.4)).toBe('40%');
+  });
+});
+
+describe('reactionVerdict', () => {
+  it('maps the three-state was_confirmed to display words', () => {
+    expect(reactionVerdict(true)).toBe('affirmed');
+    expect(reactionVerdict(false)).toBe('pushed back');
+    expect(reactionVerdict(null)).toBe('neutral');
+  });
+});
+
+describe('reactionVerdictClass', () => {
+  it('returns the CSS key parallel to reactionVerdict', () => {
+    expect(reactionVerdictClass(true)).toBe('affirmed');
+    expect(reactionVerdictClass(false)).toBe('pushed');
+    expect(reactionVerdictClass(null)).toBe('neutral');
+  });
+});
+
+describe('hasEvidence', () => {
+  it('is true only when the bias has at least one raw observation', () => {
+    const counts = { anchoring: 2, substitution: 0 };
+    expect(hasEvidence(counts, 'anchoring')).toBe(true);
+    expect(hasEvidence(counts, 'substitution')).toBe(false);
+    expect(hasEvidence(counts, 'never_seen')).toBe(false);
+  });
+});
+
+describe('interpretBias', () => {
+  it('leads with "No evidence" when the bias was never flagged', () => {
+    const row = makeRow('a', { tier: 'elided' });
+    expect(interpretBias(row, false, false)).toMatch(/^No evidence/);
+  });
+
+  it('reports the prior-dominated state with the shortfall below the N floor', () => {
+    const row = makeRow('a', { tier: 'elided', effectiveN: 2 });
+    const out = interpretBias(row, false, true);
+    expect(out).toMatch(/^Mostly prior/);
+    expect(out).toContain('about 3.0 more recency-weighted observations');
+  });
+
+  it('reports a weak signal for elided rows above the floor', () => {
+    const row = makeRow('a', { tier: 'elided', effectiveN: 8, ciLower: 0.08 });
+    expect(interpretBias(row, false, true)).toMatch(/^Weak signal/);
+  });
+
+  it('describes a rendered soft row as a light nudge', () => {
+    const row = makeRow('a', { tier: 'soft', effectiveN: 8, ciLower: 0.18 });
+    const out = interpretBias(row, true, true);
+    expect(out).toMatch(/^Occasional pattern/);
+    expect(out).toContain('light "occasionally" nudge');
+  });
+
+  it('notes when an at-tier row is bumped out by the render cap', () => {
+    const row = makeRow('a', { tier: 'soft', effectiveN: 8, ciLower: 0.18 });
+    expect(interpretBias(row, false, true)).toContain(
+      `Outside the top ${RENDER_CAP} by CI lower`,
+    );
+  });
+
+  it('describes a rendered strong row as a firm nudge', () => {
+    const row = makeRow('a', { tier: 'strong', effectiveN: 8, ciLower: 0.35 });
+    const out = interpretBias(row, true, true);
+    expect(out).toMatch(/^Consistent pattern/);
+    expect(out).toContain('firm "consistently" nudge');
+  });
+
+  it('appends the gate-shift sentence only when the feedback EMA is meaningful', () => {
+    const quiet = makeRow('a', {
+      tier: 'soft',
+      effectiveN: 8,
+      ciLower: 0.18,
+      feedbackScore: 0.05,
+    });
+    expect(interpretBias(quiet, true, true)).not.toContain('Feedback');
+
+    const positive = makeRow('a', {
+      tier: 'soft',
+      effectiveN: 8,
+      ciLower: 0.18,
+      feedbackScore: 0.5,
+    });
+    expect(interpretBias(positive, true, true)).toContain(
+      'Feedback +0.50 shifts both gates down by 0.05',
+    );
+
+    const negative = makeRow('a', {
+      tier: 'soft',
+      effectiveN: 8,
+      ciLower: 0.18,
+      feedbackScore: -0.5,
+    });
+    expect(interpretBias(negative, true, true)).toContain(
+      'Feedback -0.50 shifts both gates up by 0.05',
+    );
+  });
+});
+
+describe('biasHue', () => {
+  it('anchors the waypoints to the surfacing gates', () => {
+    expect(biasHue(0)).toBe(220); // blue, no signal
+    expect(biasHue(0.15)).toBe(140); // green at the soft gate
+    expect(biasHue(0.3)).toBe(30); // orange at the strong gate
+    expect(biasHue(0.5)).toBe(5); // red, deep into strong
+    expect(biasHue(0.9)).toBe(5); // clamped past the last waypoint
+  });
+
+  it('interpolates linearly between waypoints', () => {
+    expect(biasHue(0.075)).toBeCloseTo(180); // midway blue -> green
+    expect(biasHue(0.225)).toBeCloseTo(85); // midway green -> orange
+  });
+});
+
+describe('chartScale', () => {
+  it('never shrinks below the strong gate plus headroom', () => {
+    expect(chartScale([])).toBeCloseTo(CI_LB_STRONG * 1.1);
+    expect(
+      chartScale([makeRow('a', { ciLower: 0.05 })]),
+    ).toBeCloseTo(CI_LB_STRONG * 1.1);
+  });
+
+  it('extends to the largest ciLower when one clears the floor', () => {
+    expect(
+      chartScale([
+        makeRow('a', { ciLower: 0.5 }),
+        makeRow('b', { ciLower: 0.1 }),
+      ]),
+    ).toBe(0.5);
+  });
+});
+
+describe('barWidthPct', () => {
+  it('pins no-evidence rows to the fixed gray nub regardless of ciLower', () => {
+    expect(barWidthPct(0.5, false, 0.5)).toBe(1.5);
+  });
+
+  it('renders zero width for a zero ciLower with evidence', () => {
+    expect(barWidthPct(0, true, 0.33)).toBe(0);
+  });
+
+  it('clamps tiny non-zero values to the 2% visible nub', () => {
+    expect(barWidthPct(0.001, true, 0.33)).toBe(2);
+  });
+
+  it('scales proportionally otherwise', () => {
+    expect(barWidthPct(0.165, true, 0.33)).toBeCloseTo(50);
+  });
+});
+
+describe('currentObservationsEmptyCopy', () => {
+  it('reads as not-yet-analyzed while either fetch is unresolved', () => {
+    expect(currentObservationsEmptyCopy(null, null)).toContain(
+      'Not yet analyzed',
+    );
+    // A draft thread's observations query trivially returns [] -
+    // the null processedAt is what keeps this from reading as
+    // "analyzed, no findings".
+    expect(currentObservationsEmptyCopy([], null)).toContain(
+      'Not yet analyzed',
+    );
+  });
+
+  it('reads as analyzed-and-empty once processedAt exists', () => {
+    expect(
+      currentObservationsEmptyCopy([], '2026-05-19T12:00:00Z'),
+    ).toContain('Already analyzed');
+  });
+
+  it('returns null when there are observations to render', () => {
+    expect(
+      currentObservationsEmptyCopy([{}], '2026-05-19T12:00:00Z'),
+    ).toBeNull();
+  });
+});
+
+describe('currentReactionsEmptyCopy', () => {
+  const processedAt = '2026-05-19T12:00:00Z';
+
+  it('reads as not-yet-analyzed while either fetch is unresolved', () => {
+    expect(currentReactionsEmptyCopy(null, processedAt, 2)).toContain(
+      'Not yet analyzed',
+    );
+    expect(currentReactionsEmptyCopy([], null, 2)).toContain(
+      'Not yet analyzed',
+    );
+  });
+
+  it('returns null when there are reactions to render', () => {
+    expect(currentReactionsEmptyCopy([{}], processedAt, 2)).toBeNull();
+  });
+
+  it('explains that nothing was active when the rendered set is empty', () => {
+    expect(currentReactionsEmptyCopy([], processedAt, 0)).toContain(
+      'No biases were active',
+    );
+  });
+
+  it('reports no-clear-signal when biases were active but no reactions landed', () => {
+    expect(currentReactionsEmptyCopy([], processedAt, 2)).toContain(
+      'did not see a clear affirmation or pushback signal',
+    );
+  });
+});
+
+describe('displayThreadTitle', () => {
+  it('falls back to the bracketed sentinel for null and blank titles', () => {
+    expect(displayThreadTitle(null)).toBe('[untitled conversation]');
+    expect(displayThreadTitle('   ')).toBe('[untitled conversation]');
+  });
+
+  it('trims a real title', () => {
+    expect(displayThreadTitle('  Anchors away  ')).toBe('Anchors away');
+  });
+});
+
+describe('observationsLabel', () => {
+  it('pluralizes on the observation count', () => {
+    expect(observationsLabel(1)).toBe('1 observation');
+    expect(observationsLabel(3)).toBe('3 observations');
+    expect(observationsLabel(0)).toBe('0 observations');
+  });
+});
+
+describe('tierTitle', () => {
+  it('expands each tier word into its surfacing meaning', () => {
+    expect(tierTitle('elided')).toMatch(/^Elided:/);
+    expect(tierTitle('soft')).toMatch(/^Soft:/);
+    expect(tierTitle('strong')).toMatch(/^Strong:/);
+  });
+});
+
+describe('reactionVerdictTitle', () => {
+  it('expands each verdict into its feedback meaning', () => {
+    expect(reactionVerdictTitle(true)).toMatch(/^Affirmed:/);
+    expect(reactionVerdictTitle(false)).toMatch(/^Pushed back:/);
+    expect(reactionVerdictTitle(null)).toMatch(/^Neutral:/);
+  });
+});