From 094b2c6e59b0b8d14c5a2ce62149dc121439a708 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 19:38:05 -0400
Subject: [PATCH 01/17] =?UTF-8?q?feat(design):=20Phase=201=20visual=20syst?=
 =?UTF-8?q?em=20=E2=80=94=20tokens,=20header,=20privacy=20chip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bridges Tailwind utilities to CSS custom properties in styles/tokens.css
(parchment, iris-violet, signal scales + serif/sans/mono families) so
both utility classes and inline var() refs share one source of truth.

- src/index.css imports tokens.css before @tailwind base
- tailwind.config.js: parchment/iris/signal colors, fonts, radii, shadows
  all read from CSS vars
- Header: lowercase serif "iris" + italic tagline + on-device chip +
  iris-violet "Gemma 2 2B · on-device" pill
- PrivacyStatement compressed to chip + <details> disclosure
- Footer absorbs DedicationBanner content as "about iris" disclosure;
  DedicationBanner.jsx removed (App.jsx no longer imports it)
---
 src/App.jsx                         |   2 -
 src/components/DedicationBanner.jsx |  12 ----
 src/components/Footer.jsx           |  61 ++++++++++-------
 src/components/Header.jsx           |  49 ++++++++++++-
 src/components/PrivacyStatement.jsx |  31 +++++++--
 src/index.css                       |   2 +
 styles/tokens.css                   | 102 ++++++++++++++++++++++++++++
 tailwind.config.js                  |  60 ++++++++++++----
 8 files changed, 258 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/DedicationBanner.jsx
 create mode 100644 styles/tokens.css

diff --git a/src/App.jsx b/src/App.jsx
index 64ee962..48d966f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,6 @@
 import { lazy, Suspense, useState } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import Header from './components/Header'
-import DedicationBanner from './components/DedicationBanner'
 import PrivacyStatement from './components/PrivacyStatement'
 import SearchForm from './components/SearchForm'
 import NaturalLanguageInput from './components/NaturalLanguageInput'
@@ -69,7 +68,6 @@ function IrisApp() {
   return (
     <div className="min-h-screen bg-parchment-50 flex flex-col">
       <Header />
-      <DedicationBanner />
       <PrivacyStatement />
       <main className="flex-1">
         <NaturalLanguageInput onExtract={handleExtract} />
diff --git a/src/components/DedicationBanner.jsx b/src/components/DedicationBanner.jsx
deleted file mode 100644
index b3dafb6..0000000
--- a/src/components/DedicationBanner.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function DedicationBanner() {
-  return (
-    <div className="bg-parchment-200 border-b border-parchment-400 px-6 py-4">
-      <p className="text-sm text-parchment-900 italic max-w-2xl">
-        Named for{' '}
-        <strong className="not-italic font-semibold">Iris Long (1934–2026)</strong>, a
-        pharmaceutical chemist and ACT-UP activist who dedicated her career to making clinical
-        trial information accessible to the people who needed it most.
-      </p>
-    </div>
-  )
-}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 08ba2c8..2fd1328 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,29 +1,42 @@
 export default function Footer() {
   return (
-    <footer className="bg-parchment-200 border-t border-parchment-400 px-6 py-5 mt-8">
-      <p className="text-xs text-parchment-800 leading-relaxed">
-        IRIS is not medical advice. Always discuss clinical trial options with your healthcare
-        provider.
-        <br />
-        IRIS is open source and collects no data.{' '}
-        <a
-          href="https://github.com/johnoooh/iris"
-          className="underline hover:text-parchment-950"
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub
-        </a>{' '}
-        ·{' '}
-        <a
-          href="https://en.wikipedia.org/wiki/ACT_UP"
-          className="underline hover:text-parchment-950"
-          target="_blank"
-          rel="noreferrer"
-        >
-          About Iris Long &amp; ACT-UP
-        </a>
-      </p>
+    <footer className="border-t border-parchment-200 px-6 py-5 mt-8 bg-parchment-50">
+      <div className="max-w-3xl space-y-3">
+        <p className="text-xs text-parchment-800 leading-relaxed">
+          IRIS is not medical advice. Always discuss clinical trial options with your healthcare
+          provider.
+          <br />
+          IRIS is open source and collects no data.{' '}
+          <a
+            href="https://github.com/johnoooh/iris"
+            className="underline hover:text-parchment-950"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>{' '}
+          ·{' '}
+          <a
+            href="https://en.wikipedia.org/wiki/ACT_UP"
+            className="underline hover:text-parchment-950"
+            target="_blank"
+            rel="noreferrer"
+          >
+            About Iris Long &amp; ACT-UP
+          </a>
+        </p>
+        <details className="text-xs text-parchment-800">
+          <summary className="cursor-pointer font-mono text-[11px] text-parchment-700 select-none">
+            about iris
+          </summary>
+          <p className="mt-2 italic leading-relaxed max-w-2xl">
+            Named for{' '}
+            <strong className="not-italic font-semibold">Iris Long (1934–2026)</strong>, a
+            pharmaceutical chemist and ACT-UP activist who dedicated her career to making clinical
+            trial information accessible to the people who needed it most.
+          </p>
+        </details>
+      </div>
     </footer>
   )
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c28e960..164f53d 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,8 +1,51 @@
 export default function Header() {
   return (
-    <header className="bg-parchment-50 border-b border-parchment-300 px-6 py-4 flex items-center gap-3">
-      <span className="text-xl font-bold tracking-wide text-parchment-950">IRIS</span>
-      <span className="text-sm text-parchment-800 pt-0.5">Clinical Trial Finder</span>
+    <header className="border-b border-parchment-200 px-7 py-5 flex items-center justify-between gap-4">
+      <div className="flex items-baseline gap-3.5">
+        <span className="font-serif font-semibold text-[26px] tracking-tight text-parchment-950 lowercase">
+          iris
+        </span>
+        <span className="font-serif italic text-parchment-700 text-[13px]">
+          clinical trial finder
+        </span>
+      </div>
+      <div className="flex items-center gap-2.5">
+        <span
+          title="Your data never leaves the device"
+          className="inline-flex items-center gap-1.5 font-mono text-[11px] text-parchment-700"
+        >
+          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+            <path
+              d="M3 5V3.5a3 3 0 1 1 6 0V5M2.5 5h7v5h-7z"
+              stroke="currentColor"
+              strokeWidth="1"
+              strokeLinejoin="round"
+            />
+          </svg>
+          on-device only
+        </span>
+        <LocalAIBadge />
+      </div>
     </header>
   )
 }
+
+function LocalAIBadge({ active = false, label = 'Gemma 2 2B · on-device' }) {
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 font-mono text-[11px] text-iris-700 bg-iris-50 border border-iris-100 px-2 py-[3px] rounded-full"
+      aria-label={`Local AI model: ${label}`}
+    >
+      <span
+        className={active ? 'iris-pulse' : ''}
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: 999,
+          background: active ? 'var(--iris-500)' : 'var(--iris-300)',
+        }}
+      />
+      {label}
+    </span>
+  )
+}
diff --git a/src/components/PrivacyStatement.jsx b/src/components/PrivacyStatement.jsx
index 329998b..57cd66d 100644
--- a/src/components/PrivacyStatement.jsx
+++ b/src/components/PrivacyStatement.jsx
@@ -1,11 +1,30 @@
 export default function PrivacyStatement() {
   return (
-    <div className="bg-parchment-100 border-b border-parchment-300 px-6 py-2.5">
-      <p className="text-xs text-parchment-800">
-        🔒 Your information never leaves your device. IRIS collects no data, uses no cookies,
-        requires no account, and has no tracking. The only network request is a structured search
-        query to ClinicalTrials.gov&apos;s public database.
-      </p>
+    <div className="border-b border-parchment-200 px-6 py-2 bg-parchment-50">
+      <details className="group text-xs text-parchment-800">
+        <summary className="cursor-pointer inline-flex items-center gap-1.5 select-none">
+          <span
+            aria-hidden="true"
+            className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-iris-50 text-iris-700"
+          >
+            <svg width="9" height="9" viewBox="0 0 12 12" fill="none">
+              <path
+                d="M3 5V3.5a3 3 0 1 1 6 0V5M2.5 5h7v5h-7z"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+          <span className="font-mono text-[11px] text-iris-700">on-device only</span>
+          <span className="text-parchment-700">— what this means</span>
+        </summary>
+        <p className="mt-2 ml-[22px] max-w-2xl leading-relaxed">
+          Your information never leaves your device. IRIS collects no data, uses no cookies,
+          requires no account, and has no tracking. The only network request is a structured
+          search query to ClinicalTrials.gov&apos;s public database.
+        </p>
+      </details>
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index b5c61c9..165267d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import '../styles/tokens.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/styles/tokens.css b/styles/tokens.css
new file mode 100644
index 0000000..584f092
--- /dev/null
+++ b/styles/tokens.css
@@ -0,0 +1,102 @@
+/* IRIS — evolved parchment palette + type system
+   Variations share these tokens so the comparison is apples-to-apples. */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  /* parchment scale — kept from current app, lightly retuned for richer mid-tones */
+  --p-50:  #faf7f2;
+  --p-100: #f5f0e7;
+  --p-200: #ece4d4;
+  --p-300: #ddd0b8;
+  --p-400: #c8b89a;
+  --p-500: #a89878;
+  --p-700: #6b5d49;
+  --p-800: #4f4434;
+  --p-900: #322a1f;
+  --p-950: #1c1812;
+
+  /* iris — muted violet, named for the flower */
+  --iris-50:  oklch(0.96 0.015 290);
+  --iris-100: oklch(0.92 0.03 290);
+  --iris-300: oklch(0.78 0.06 290);
+  --iris-500: oklch(0.55 0.10 290);
+  --iris-600: oklch(0.46 0.10 290);
+  --iris-700: oklch(0.38 0.08 290);
+  --iris-900: oklch(0.22 0.05 290);
+
+  /* signal colors (kept low-chroma to fit the parchment world) */
+  --signal-good: oklch(0.55 0.10 150);
+  --signal-good-bg: oklch(0.94 0.04 150);
+  --signal-warn: oklch(0.62 0.10 75);
+  --signal-warn-bg: oklch(0.95 0.05 90);
+  --signal-bad:  oklch(0.50 0.10 30);
+  --signal-bad-bg: oklch(0.95 0.04 35);
+
+  --serif: 'Source Serif 4', Georgia, serif;
+  --sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
+  --mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  --shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.04), 0 1px 1px rgba(28, 24, 18, 0.02);
+  --shadow-md: 0 4px 12px rgba(28, 24, 18, 0.06), 0 2px 4px rgba(28, 24, 18, 0.04);
+  --shadow-lg: 0 12px 32px rgba(28, 24, 18, 0.08), 0 4px 8px rgba(28, 24, 18, 0.04);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  font-family: var(--sans);
+  color: var(--p-900);
+  background: var(--p-50);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'ss01', 'cv11';
+  text-wrap: pretty;
+}
+
+button { font: inherit; }
+input, select, textarea { font: inherit; color: inherit; }
+
+/* AI streaming shimmer — used by all variations */
+@keyframes iris-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+.iris-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    var(--p-300) 0%,
+    var(--p-200) 30%,
+    var(--p-100) 50%,
+    var(--p-200) 70%,
+    var(--p-300) 100%
+  );
+  background-size: 200% 100%;
+  animation: iris-shimmer 2.4s ease-in-out infinite;
+  border-radius: 2px;
+  color: transparent;
+  display: inline-block;
+}
+
+@keyframes iris-fadein {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.iris-fadein { animation: iris-fadein 320ms ease-out both; }
+
+/* AI activity dot used in the local-model badge */
+@keyframes iris-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.3); opacity: 0.6; }
+}
+.iris-pulse { animation: iris-pulse 1.6s ease-in-out infinite; }
+
+/* Focus ring */
+:focus-visible {
+  outline: 2px solid var(--iris-500);
+  outline-offset: 2px;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2eef1e9..be08d03 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,25 +1,57 @@
 /** @type {import('tailwindcss').Config} */
+// Color, type, shadow, and radius tokens are sourced from styles/tokens.css
+// (CSS custom properties). Tailwind utilities and inline `var(--…)` references
+// stay in sync because they read from the same root variables.
 export default {
   content: ['./index.html', './src/**/*.{js,jsx}'],
   theme: {
     extend: {
       colors: {
         parchment: {
-          50:  '#faf7f2',
-          100: '#f7f4ef',
-          200: '#f0ebe2',
-          300: '#e8ddd0',
-          400: '#e0d5c5',
-          500: '#d4c9b8',
-          600: '#c5b8a8',
-          700: '#8a7d6f',
-          // Darkened from #7c6f5e — the previous value gave 4.12–4.45:1 on
-          // parchment-100/200 backgrounds (Lighthouse a11y violation, just
-          // below 4.5:1 WCAG AA for small text). #635544 yields ~6:1.
-          800: '#635544',
-          900: '#4a3f33',
-          950: '#3a2e22',
+          50:  'var(--p-50)',
+          100: 'var(--p-100)',
+          200: 'var(--p-200)',
+          300: 'var(--p-300)',
+          400: 'var(--p-400)',
+          500: 'var(--p-500)',
+          700: 'var(--p-700)',
+          800: 'var(--p-800)',
+          900: 'var(--p-900)',
+          950: 'var(--p-950)',
         },
+        iris: {
+          50:  'var(--iris-50)',
+          100: 'var(--iris-100)',
+          300: 'var(--iris-300)',
+          500: 'var(--iris-500)',
+          600: 'var(--iris-600)',
+          700: 'var(--iris-700)',
+          900: 'var(--iris-900)',
+        },
+        signal: {
+          good:      'var(--signal-good)',
+          'good-bg': 'var(--signal-good-bg)',
+          warn:      'var(--signal-warn)',
+          'warn-bg': 'var(--signal-warn-bg)',
+          bad:       'var(--signal-bad)',
+          'bad-bg':  'var(--signal-bad-bg)',
+        },
+      },
+      fontFamily: {
+        serif: 'var(--serif)',
+        sans:  'var(--sans)',
+        mono:  'var(--mono)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
       },
     },
   },

From ddd7b58d8644c3fba1faffae5012a62f95695174 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 19:58:04 -0400
Subject: [PATCH 02/17] =?UTF-8?q?feat(design):=20Phase=202=20=E2=80=94=20t?=
 =?UTF-8?q?wo-pane=20triage=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace single-column card list with the prototype two-pane layout:
400px list of compact rows on the left, full detail on the right. Below
820px collapses to single column with a tap-to-open bottom sheet.

- TriageRow: serif title (2-line clamp) + mono distance/phase line.
  Selected state = white bg, iris-violet 3px left border, soft shadow.
- MobileSheet: bottom-sheet modal with backdrop, drag handle, close
  button, Esc key handling, body scroll-lock while open.
- ResultsList: two-pane grid, auto-selects first trial on desktop, mobile
  taps open the sheet. Toolbar moved above the panes; load-more lives
  at the bottom of the list pane.
- ResultCard: optional pane prop drops the card chrome (border /
  rounded / max-width) when rendered inside the detail pane.
- App.jsx main made a flex column so the panes can fill the viewport.
- Iris-violet accent on ctgov / contact / load-more links.
- index.css adds the iris-sheet-in keyframe used by MobileSheet.
---
 src/App.jsx                    |   2 +-
 src/components/MobileSheet.jsx |  55 ++++++++++++++
 src/components/ResultCard.jsx  |  12 ++--
 src/components/ResultsList.jsx | 126 ++++++++++++++++++++++++++-------
 src/components/TriageRow.jsx   |  51 +++++++++++++
 src/index.css                  |   5 ++
 6 files changed, 222 insertions(+), 29 deletions(-)
 create mode 100644 src/components/MobileSheet.jsx
 create mode 100644 src/components/TriageRow.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 48d966f..77a9f7c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -69,7 +69,7 @@ function IrisApp() {
     <div className="min-h-screen bg-parchment-50 flex flex-col">
       <Header />
       <PrivacyStatement />
-      <main className="flex-1">
+      <main className="flex-1 flex flex-col min-h-0">
         <NaturalLanguageInput onExtract={handleExtract} />
         <SearchForm onSearch={setSearchParams} prefill={prefill} />
         {searchParams && (
diff --git a/src/components/MobileSheet.jsx b/src/components/MobileSheet.jsx
new file mode 100644
index 0000000..c2086e7
--- /dev/null
+++ b/src/components/MobileSheet.jsx
@@ -0,0 +1,55 @@
+import { useEffect } from 'react'
+
+export default function MobileSheet({ open, onClose, children, label }) {
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prevOverflow
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-end"
+      style={{ background: 'rgba(28, 24, 18, 0.45)' }}
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="iris-sheet bg-white w-full flex flex-col overflow-hidden"
+        style={{
+          height: '92%',
+          borderTopLeftRadius: 18,
+          borderTopRightRadius: 18,
+          animation: 'iris-sheet-in 280ms cubic-bezier(.2,.8,.2,1)',
+        }}
+      >
+        <div className="pt-2.5 pb-1 flex justify-center shrink-0">
+          <span className="block w-[38px] h-1 rounded-full bg-parchment-300" aria-hidden="true" />
+        </div>
+        <div className="px-4 pb-2 flex justify-end shrink-0">
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-[13px] text-parchment-700 hover:text-parchment-950 px-1.5 py-1"
+          >
+            Close
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ResultCard.jsx b/src/components/ResultCard.jsx
index fa004a3..4616e18 100644
--- a/src/components/ResultCard.jsx
+++ b/src/components/ResultCard.jsx
@@ -16,8 +16,12 @@ export default function ResultCard({
   onRequestSimplify,
   inputLanguage = 'en',
   simplificationSupported = true,
+  pane = false,
 }) {
   const nearest = nearestLocation(trial.locations, coords)
+  const wrapperClass = pane
+    ? 'px-7 py-6'
+    : 'bg-white border border-parchment-400 rounded-lg p-5 mb-3 max-w-3xl'
 
   const sumState = simplification?.summarize
   const fitState = simplification?.fit
@@ -27,7 +31,7 @@ export default function ResultCard({
   const showFit = fitState && fitState.status !== 'error' && fitState.text
 
   return (
-    <article className="bg-white border border-parchment-400 rounded-lg p-5 mb-3 max-w-3xl">
+    <article className={wrapperClass}>
       <div className="flex items-start justify-between gap-4 mb-2">
         <h3 className="text-base font-semibold text-parchment-950 leading-snug">{trial.title}</h3>
         <span
@@ -174,17 +178,17 @@ export default function ResultCard({
           href={trial.ctGovUrl}
           target="_blank"
           rel="noreferrer"
-          className="text-parchment-800 underline hover:text-parchment-950"
+          className="text-iris-700 hover:text-iris-900 font-medium"
         >
           View full details on ClinicalTrials.gov →
         </a>
         {trial.contact.phone && (
-          <span className="text-parchment-700">{trial.contact.phone}</span>
+          <span className="text-parchment-800">{trial.contact.phone}</span>
         )}
         {trial.contact.email && (
           <a
             href={`mailto:${trial.contact.email}`}
-            className="text-parchment-700 underline hover:text-parchment-950"
+            className="text-iris-700 hover:text-iris-900 underline"
           >
             {trial.contact.email}
           </a>
diff --git a/src/components/ResultsList.jsx b/src/components/ResultsList.jsx
index ba9f2ad..0f5266a 100644
--- a/src/components/ResultsList.jsx
+++ b/src/components/ResultsList.jsx
@@ -1,8 +1,10 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useGeocode } from '../hooks/useGeocode'
 import { useClinicalTrials } from '../hooks/useClinicalTrials'
 import { useSimplifier } from '../hooks/useSimplifier'
 import ResultCard from './ResultCard'
+import TriageRow from './TriageRow'
+import MobileSheet from './MobileSheet'
 import {
   detectInputLanguage,
   outputLanguageFor,
@@ -10,6 +12,20 @@ import {
 } from '../utils/detectInputLanguage'
 
 const EAGER_BATCH_SIZE = 5
+const MOBILE_BREAKPOINT_PX = 820
+const LIST_WIDTH_PX = 400
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT_PX
+  )
+  useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT_PX)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+  return isMobile
+}
 
 export default function ResultsList({ searchParams, modelKey, userDescription, extractedFields }) {
   // Phase 3 simplification only ships for English and Spanish — those are
@@ -44,6 +60,29 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
 
   const allTrials = data?.pages.flatMap(p => p.trials) ?? []
 
+  const isMobile = useIsMobile()
+  const [selectedNctId, setSelectedNctId] = useState(null)
+  const [sheetOpen, setSheetOpen] = useState(false)
+
+  // Default selection to the first trial when results arrive (desktop only —
+  // on mobile we wait for an explicit tap to open the sheet).
+  useEffect(() => {
+    if (allTrials.length === 0) {
+      setSelectedNctId(null)
+      return
+    }
+    if (!selectedNctId || !allTrials.some(t => t.nctId === selectedNctId)) {
+      setSelectedNctId(allTrials[0].nctId)
+    }
+  }, [allTrials, selectedNctId])
+
+  const selected = allTrials.find(t => t.nctId === selectedNctId) ?? null
+
+  function onSelectTrial(nctId) {
+    setSelectedNctId(nctId)
+    if (isMobile) setSheetOpen(true)
+  }
+
   // Fire when the result set changes — keyed on the first 5 NCT IDs.
   // Using searchParams as the key would fire too early (before data arrives);
   // using allTrials would re-fire on every pagination append.
@@ -110,40 +149,79 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
     if (extractedFields) simplifier.enqueueAssessFit(trial, { outputLanguage })
   }
 
+  function renderDetail(trial) {
+    return (
+      <ResultCard
+        trial={trial}
+        coords={coords ?? null}
+        simplification={simplifier.states.get(trial.nctId)}
+        onRequestSimplify={simplificationSupported ? handleRequestSimplify : null}
+        inputLanguage={inputLanguage}
+        simplificationSupported={simplificationSupported}
+        pane
+      />
+    )
+  }
+
   return (
-    <section className="px-6 py-6" aria-live="polite" aria-label="Search results">
+    <section className="flex flex-col flex-1 min-h-0" aria-label="Search results">
       {showGeoFallback && (
-        <p className="text-xs text-parchment-700 mb-3 italic">
+        <p className="px-6 py-2 text-xs text-parchment-700 italic border-b border-parchment-200">
           Couldn&apos;t pinpoint that location — showing results without distance filtering.
         </p>
       )}
 
-      <div className="flex items-center gap-4 mb-4">
-        <p className="text-sm text-parchment-800">
+      <div className="px-6 py-3 border-b border-parchment-200 flex items-center gap-4">
+        <p className="font-mono text-[11px] text-parchment-700">
           {totalCount.toLocaleString()} trial{totalCount !== 1 ? 's' : ''} found
         </p>
       </div>
 
-      {allTrials.map(trial => (
-        <ResultCard
-          key={trial.nctId}
-          trial={trial}
-          coords={coords ?? null}
-          simplification={simplifier.states.get(trial.nctId)}
-          onRequestSimplify={simplificationSupported ? handleRequestSimplify : null}
-          inputLanguage={inputLanguage}
-          simplificationSupported={simplificationSupported}
-        />
-      ))}
-
-      {hasNextPage && (
-        <button
-          onClick={() => fetchNextPage()}
-          disabled={isFetchingNextPage}
-          className="mt-4 text-sm text-parchment-800 underline hover:text-parchment-950 disabled:opacity-50"
+      <div
+        className="flex-1 grid min-h-0 overflow-hidden"
+        style={{
+          gridTemplateColumns: isMobile ? '1fr' : `${LIST_WIDTH_PX}px 1fr`,
+        }}
+      >
+        <div className="overflow-auto bg-parchment-100 border-r border-parchment-200 flex flex-col">
+          <ul className="flex flex-col">
+            {allTrials.map(trial => (
+              <li key={trial.nctId} className="border-b border-parchment-200">
+                <TriageRow
+                  trial={trial}
+                  coords={coords ?? null}
+                  selected={!isMobile && trial.nctId === selectedNctId}
+                  onSelect={onSelectTrial}
+                />
+              </li>
+            ))}
+          </ul>
+          {hasNextPage && (
+            <button
+              onClick={() => fetchNextPage()}
+              disabled={isFetchingNextPage}
+              className="m-4 text-sm text-iris-700 hover:text-iris-900 underline disabled:opacity-50 self-start"
+            >
+              {isFetchingNextPage ? 'Loading…' : 'Load more results'}
+            </button>
+          )}
+        </div>
+
+        {!isMobile && (
+          <div className="overflow-auto bg-white" aria-live="polite">
+            {selected && renderDetail(selected)}
+          </div>
+        )}
+      </div>
+
+      {isMobile && (
+        <MobileSheet
+          open={sheetOpen}
+          onClose={() => setSheetOpen(false)}
+          label={selected ? `Trial details: ${selected.title}` : 'Trial details'}
         >
-          {isFetchingNextPage ? 'Loading…' : 'Load more results'}
-        </button>
+          {selected && renderDetail(selected)}
+        </MobileSheet>
       )}
     </section>
   )
diff --git a/src/components/TriageRow.jsx b/src/components/TriageRow.jsx
new file mode 100644
index 0000000..226683f
--- /dev/null
+++ b/src/components/TriageRow.jsx
@@ -0,0 +1,51 @@
+import { nearestLocation } from '../utils/apiHelpers'
+
+const PHASE_SHORT = {
+  EARLY_PHASE1: 'Early Phase 1',
+  PHASE1: 'Phase 1',
+  PHASE2: 'Phase 2',
+  PHASE3: 'Phase 3',
+  PHASE4: 'Phase 4',
+  NA: 'N/A',
+}
+
+function formatPhase(phases) {
+  if (!phases || phases.length === 0) return null
+  return phases.map(p => PHASE_SHORT[p] ?? p).join(' / ')
+}
+
+export default function TriageRow({ trial, coords, selected, onSelect }) {
+  const nearest = nearestLocation(trial.locations, coords)
+  const phase = formatPhase(trial.phases)
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(trial.nctId)}
+      aria-current={selected ? 'true' : undefined}
+      className={[
+        'text-left w-full px-4 py-[18px] flex flex-col gap-1.5 cursor-pointer transition-colors',
+        'border-l-[3px]',
+        selected
+          ? 'bg-white border-iris-500 shadow-sm'
+          : 'bg-transparent border-transparent hover:bg-parchment-50',
+      ].join(' ')}
+    >
+      <span
+        className="font-serif font-semibold text-[14.5px] text-parchment-950 leading-snug overflow-hidden"
+        style={{
+          display: '-webkit-box',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+        }}
+      >
+        {trial.title}
+      </span>
+      <span className="font-mono text-[11px] text-parchment-700 flex flex-wrap gap-x-1.5">
+        {nearest?.distanceMi != null && <span>{nearest.distanceMi} mi</span>}
+        {nearest?.distanceMi != null && phase && <span aria-hidden="true">·</span>}
+        {phase && <span>{phase}</span>}
+      </span>
+    </button>
+  )
+}
diff --git a/src/index.css b/src/index.css
index 165267d..b1767d5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@keyframes iris-sheet-in {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}

From 7941b04ba7f1ae2c90cbb3dc3eb573d415736878 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 19:59:10 -0400
Subject: [PATCH 03/17] =?UTF-8?q?feat(design):=20Phase=204=20=E2=80=94=20c?=
 =?UTF-8?q?ompare=20pinning=20+=20sticky=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pin up to 3 trials via a checkbox on each row; surface a sticky bar at
the bottom showing the count, a Clear action, and a disabled Compare →
button (the dedicated compare view is later work per Handoff).

- TriageRow: optional checkbox slot (shown when onToggleCompare is
  passed). Iris-violet accent. Disables when set is full and the row is
  not already pinned. Click events guarded so the checkbox does not
  trigger row selection.
- ResultsList: compareSet state (Set<nctId>, max 3) + toggleCompare.
  CompareBar component appears only when set is non-empty; sits at the
  bottom of the section (between the panes and the footer) with a
  subtle upward shadow.
- Phase 3 (two-stage classification) intentionally skipped — gated on
  Classification Harness validation per project constraint.
---
 src/components/ResultsList.jsx | 52 +++++++++++++++++++++++
 src/components/TriageRow.jsx   | 77 ++++++++++++++++++++++++----------
 2 files changed, 107 insertions(+), 22 deletions(-)

diff --git a/src/components/ResultsList.jsx b/src/components/ResultsList.jsx
index 0f5266a..28fa345 100644
--- a/src/components/ResultsList.jsx
+++ b/src/components/ResultsList.jsx
@@ -63,6 +63,16 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
   const isMobile = useIsMobile()
   const [selectedNctId, setSelectedNctId] = useState(null)
   const [sheetOpen, setSheetOpen] = useState(false)
+  const [compareSet, setCompareSet] = useState(() => new Set())
+
+  function toggleCompare(nctId) {
+    setCompareSet(prev => {
+      const next = new Set(prev)
+      if (next.has(nctId)) next.delete(nctId)
+      else if (next.size < 3) next.add(nctId)
+      return next
+    })
+  }
 
   // Default selection to the first trial when results arrive (desktop only —
   // on mobile we wait for an explicit tap to open the sheet).
@@ -192,6 +202,9 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
                   coords={coords ?? null}
                   selected={!isMobile && trial.nctId === selectedNctId}
                   onSelect={onSelectTrial}
+                  comparing={compareSet.has(trial.nctId)}
+                  onToggleCompare={toggleCompare}
+                  compareDisabled={compareSet.size >= 3}
                 />
               </li>
             ))}
@@ -214,6 +227,13 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
         )}
       </div>
 
+      {compareSet.size > 0 && (
+        <CompareBar
+          count={compareSet.size}
+          onClear={() => setCompareSet(new Set())}
+        />
+      )}
+
       {isMobile && (
         <MobileSheet
           open={sheetOpen}
@@ -226,3 +246,35 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
     </section>
   )
 }
+
+function CompareBar({ count, onClear }) {
+  return (
+    <div
+      className="border-t border-parchment-200 bg-white px-4 py-2.5 flex items-center justify-between gap-3 shrink-0"
+      style={{ boxShadow: '0 -4px 16px rgba(28, 24, 18, 0.06)' }}
+      role="region"
+      aria-label="Compare selection"
+    >
+      <span className="text-[13px] text-parchment-900">
+        <strong className="font-semibold">{count}</strong> in compare
+      </span>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onClear}
+          className="text-[12px] text-parchment-700 hover:text-parchment-950 px-2 py-1"
+        >
+          Clear
+        </button>
+        <button
+          type="button"
+          disabled
+          title="Compare view coming soon"
+          className="bg-iris-600 text-white px-4 py-1.5 rounded-md text-[13px] font-semibold opacity-60 cursor-not-allowed"
+        >
+          Compare →
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/TriageRow.jsx b/src/components/TriageRow.jsx
index 226683f..8c5219b 100644
--- a/src/components/TriageRow.jsx
+++ b/src/components/TriageRow.jsx
@@ -14,38 +14,71 @@ function formatPhase(phases) {
   return phases.map(p => PHASE_SHORT[p] ?? p).join(' / ')
 }
 
-export default function TriageRow({ trial, coords, selected, onSelect }) {
+export default function TriageRow({
+  trial,
+  coords,
+  selected,
+  onSelect,
+  comparing = false,
+  onToggleCompare,
+  compareDisabled = false,
+}) {
   const nearest = nearestLocation(trial.locations, coords)
   const phase = formatPhase(trial.phases)
 
   return (
-    <button
-      type="button"
-      onClick={() => onSelect(trial.nctId)}
-      aria-current={selected ? 'true' : undefined}
+    <div
       className={[
-        'text-left w-full px-4 py-[18px] flex flex-col gap-1.5 cursor-pointer transition-colors',
-        'border-l-[3px]',
+        'relative flex items-start gap-2 transition-colors border-l-[3px]',
         selected
           ? 'bg-white border-iris-500 shadow-sm'
           : 'bg-transparent border-transparent hover:bg-parchment-50',
       ].join(' ')}
     >
-      <span
-        className="font-serif font-semibold text-[14.5px] text-parchment-950 leading-snug overflow-hidden"
-        style={{
-          display: '-webkit-box',
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: 'vertical',
-        }}
+      <button
+        type="button"
+        onClick={() => onSelect(trial.nctId)}
+        aria-current={selected ? 'true' : undefined}
+        className="flex-1 text-left px-4 py-[18px] flex flex-col gap-1.5 cursor-pointer min-w-0"
       >
-        {trial.title}
-      </span>
-      <span className="font-mono text-[11px] text-parchment-700 flex flex-wrap gap-x-1.5">
-        {nearest?.distanceMi != null && <span>{nearest.distanceMi} mi</span>}
-        {nearest?.distanceMi != null && phase && <span aria-hidden="true">·</span>}
-        {phase && <span>{phase}</span>}
-      </span>
-    </button>
+        <span
+          className="font-serif font-semibold text-[14.5px] text-parchment-950 leading-snug overflow-hidden"
+          style={{
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {trial.title}
+        </span>
+        <span className="font-mono text-[11px] text-parchment-700 flex flex-wrap gap-x-1.5">
+          {nearest?.distanceMi != null && <span>{nearest.distanceMi} mi</span>}
+          {nearest?.distanceMi != null && phase && <span aria-hidden="true">·</span>}
+          {phase && <span>{phase}</span>}
+        </span>
+      </button>
+      {onToggleCompare && (
+        <label
+          className="shrink-0 pr-3 pt-[18px] cursor-pointer inline-flex items-center"
+          onClick={(e) => e.stopPropagation()}
+          title={
+            comparing
+              ? 'Remove from compare'
+              : compareDisabled
+                ? 'Compare list is full (max 3)'
+                : 'Add to compare'
+          }
+        >
+          <input
+            type="checkbox"
+            checked={comparing}
+            disabled={!comparing && compareDisabled}
+            onChange={() => onToggleCompare(trial.nctId)}
+            aria-label={comparing ? `Remove ${trial.title} from compare` : `Add ${trial.title} to compare`}
+            className="w-[18px] h-[18px] accent-iris-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+          />
+        </label>
+      )}
+    </div>
   )
 }

From 11f452fe48286dccaabaab7e773f820d76ac1b14 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:06:29 -0400
Subject: [PATCH 04/17] feat(design): detail-pane prototype styling + enriched
 toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail pane (ResultCard pane mode) now matches the Triage prototype:
- 24px Source Serif 4 h2 with tight tracking
- Mono caption meta line (phase · facility · distance)
- Mono 10px uppercase letterspaced section labels
- Contact section under a parchment-200 top border with mono "contact"
  caption, iris-violet email and ctgov links
- Card mode (used by tests) is unchanged for backwards compatibility

Toolbar replaces the bare count line with:
- Mono summary chip ("12 trials · near Boston · within 50 mi · recruiting")
- Sort buttons (Best fit / Distance / Phase / Most recent). Best fit is
  disabled with a tooltip pointing at on-device classification; the
  others are visual-only state until sort wiring lands.
---
 src/components/ResultCard.jsx  | 248 +++++++++++++++++++++------------
 src/components/ResultsList.jsx |  86 +++++++++++-
 2 files changed, 243 insertions(+), 91 deletions(-)

diff --git a/src/components/ResultCard.jsx b/src/components/ResultCard.jsx
index 4616e18..cb0d56d 100644
--- a/src/components/ResultCard.jsx
+++ b/src/components/ResultCard.jsx
@@ -9,6 +9,69 @@ const STATUS_STYLES = {
   TERMINATED: 'bg-red-100 text-red-700',
 }
 
+function StatusPill({ status }) {
+  return (
+    <span
+      className={`shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${
+        STATUS_STYLES[status] ?? 'bg-gray-100 text-gray-600'
+      }`}
+    >
+      {status}
+    </span>
+  )
+}
+
+function SectionLabel({ children, pane }) {
+  if (pane) {
+    return (
+      <h4 className="font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-parchment-700 mb-2">
+        {children}
+      </h4>
+    )
+  }
+  return (
+    <h4 className="text-xs font-bold text-parchment-700 uppercase tracking-wide mb-1">
+      {children}
+    </h4>
+  )
+}
+
+function MetaLine({ trial, nearest, pane }) {
+  const sep = (
+    <span aria-hidden="true" className={pane ? 'text-parchment-300' : 'text-parchment-500'}>
+      ·
+    </span>
+  )
+  const baseClass = pane
+    ? 'font-mono text-[12px] text-parchment-700 flex flex-wrap items-center gap-x-3.5 gap-y-1 mb-5'
+    : 'flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-parchment-800 mb-3'
+
+  return (
+    <div className={baseClass}>
+      <PhaseExplainer phases={trial.phases} />
+      {nearest && (
+        <>
+          {sep}
+          <span>
+            {nearest.facility ? `${nearest.facility}, ` : ''}
+            {nearest.city}, {nearest.state}
+          </span>
+          {sep}
+          <span>{nearest.distanceMi} mi away</span>
+        </>
+      )}
+      {!nearest && trial.locations.length > 0 && (
+        <>
+          {sep}
+          <span>
+            {trial.locations[0].city}, {trial.locations[0].state}
+          </span>
+        </>
+      )}
+    </div>
+  )
+}
+
 export default function ResultCard({
   trial,
   coords,
@@ -20,7 +83,7 @@ export default function ResultCard({
 }) {
   const nearest = nearestLocation(trial.locations, coords)
   const wrapperClass = pane
-    ? 'px-7 py-6'
+    ? 'px-7 pt-7 pb-9'
     : 'bg-white border border-parchment-400 rounded-lg p-5 mb-3 max-w-3xl'
 
   const sumState = simplification?.summarize
@@ -32,74 +95,59 @@ export default function ResultCard({
 
   return (
     <article className={wrapperClass}>
-      <div className="flex items-start justify-between gap-4 mb-2">
-        <h3 className="text-base font-semibold text-parchment-950 leading-snug">{trial.title}</h3>
-        <span
-          className={`shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${
-            STATUS_STYLES[trial.status] ?? 'bg-gray-100 text-gray-600'
-          }`}
-        >
-          {trial.status}
-        </span>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-parchment-800 mb-3">
-        <PhaseExplainer phases={trial.phases} />
-        {nearest && (
-          <>
-            <span className="text-parchment-500">·</span>
-            <span>
-              {nearest.facility ? `${nearest.facility}, ` : ''}
-              {nearest.city}, {nearest.state}
-            </span>
-            <span className="text-parchment-500">·</span>
-            <span>{nearest.distanceMi} mi away</span>
-          </>
-        )}
-        {!nearest && trial.locations.length > 0 && (
-          <>
-            <span className="text-parchment-500">·</span>
-            <span>
-              {trial.locations[0].city}, {trial.locations[0].state}
-            </span>
-          </>
-        )}
-      </div>
-
-      {/* PLAIN-LANGUAGE BLOCK — only when simplification is present */}
+      {pane ? (
+        <>
+          <div className="flex items-center justify-between gap-4 mb-3">
+            <StatusPill status={trial.status} />
+          </div>
+          <h2 className="font-serif font-semibold text-[24px] leading-[1.2] tracking-tight text-parchment-950 mb-2">
+            {trial.title}
+          </h2>
+        </>
+      ) : (
+        <div className="flex items-start justify-between gap-4 mb-2">
+          <h3 className="text-base font-semibold text-parchment-950 leading-snug">{trial.title}</h3>
+          <StatusPill status={trial.status} />
+        </div>
+      )}
+
+      <MetaLine trial={trial} nearest={nearest} pane={pane} />
+
       {showPlainLanguage && (
-        <div className="mb-3">
-          <h4 className="text-xs font-bold text-parchment-700 uppercase tracking-wide mb-1">
-            What this study is testing
-          </h4>
-          <p className="text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap">
-            {sumState.summary || ' '}
-          </p>
+        <div className={pane ? 'mb-4' : 'mb-3'}>
+          <div className={pane ? 'mb-4' : ''}>
+            <SectionLabel pane={pane}>What this study is testing</SectionLabel>
+            <p className={pane
+              ? 'text-[15px] text-parchment-900 leading-[1.6] whitespace-pre-wrap'
+              : 'text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap'}>
+              {sumState.summary || ' '}
+            </p>
+          </div>
 
           {sumState.eligibility != null && (
-            <>
-              <h4 className="text-xs font-bold text-parchment-700 uppercase tracking-wide mb-1">
-                Who can join
-              </h4>
-              <p className="text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap">
+            <div className={pane ? 'mb-4' : ''}>
+              <SectionLabel pane={pane}>Who can join</SectionLabel>
+              <p className={pane
+                ? 'text-[15px] text-parchment-900 leading-[1.6] whitespace-pre-wrap'
+                : 'text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap'}>
                 {sumState.eligibility || ' '}
               </p>
-            </>
+            </div>
           )}
 
           {showFit && (
-            <>
-              <h4 className="text-xs font-bold text-parchment-700 uppercase tracking-wide mb-1">
-                Why this might or might not fit you
-              </h4>
-              <p className="text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap">
+            <div className={pane ? 'mb-4' : ''}>
+              <SectionLabel pane={pane}>Why this might or might not fit you</SectionLabel>
+              <p className={pane
+                ? 'text-[15px] text-parchment-900 leading-[1.6] whitespace-pre-wrap'
+                : 'text-sm text-parchment-900 leading-relaxed mb-3 whitespace-pre-wrap'}>
                 {fitState.text}
               </p>
-            </>
+            </div>
           )}
 
           {(sumState.status === 'queued' || sumState.status === 'streaming') && (
-            <p className="text-xs text-parchment-600 italic mb-2">
+            <p className="font-mono text-[11px] text-parchment-700 italic mb-2">
               Generating plain-language summary…
             </p>
           )}
@@ -123,21 +171,18 @@ export default function ResultCard({
         </div>
       )}
 
-      {/* ON-DEMAND BUTTON — when no simplification yet and a callback is wired */}
       {!simplification && onRequestSimplify && simplificationSupported && (
         <button
           type="button"
           onClick={() => onRequestSimplify(trial)}
-          className="text-xs text-parchment-800 underline hover:text-parchment-950 mb-2"
+          className={pane
+            ? 'text-[13px] text-iris-700 hover:text-iris-900 underline mb-3'
+            : 'text-xs text-parchment-800 underline hover:text-parchment-950 mb-2'}
         >
           Show in plain language
         </button>
       )}
 
-      {/* UNSUPPORTED-LANGUAGE HINT — when the user typed in a language the
-          local model can't reliably simplify (Mandarin, Arabic, etc.). The
-          hint duplicates the call-to-action in the user's likely script
-          plus English so it's actionable before they invoke browser translate. */}
       {!simplificationSupported && (
         <p
           className="text-xs text-parchment-700 italic mb-3"
@@ -147,21 +192,27 @@ export default function ResultCard({
         </p>
       )}
 
-      {/* ORIGINAL PROSE — shown when no simplification (default Phase 1 path) */}
       {!showPlainLanguage && trial.summary && (
-        <p className="text-sm text-parchment-900 leading-relaxed mb-3">{trial.summary}</p>
+        <div className={pane ? 'mb-4' : ''}>
+          {pane && <SectionLabel pane>What this study is testing</SectionLabel>}
+          <p className={pane
+            ? 'text-[15px] text-parchment-900 leading-[1.6]'
+            : 'text-sm text-parchment-900 leading-relaxed mb-3'}>
+            {trial.summary}
+          </p>
+        </div>
       )}
 
-      {/* FAILURE HINT */}
       {showFallbackHint && (
-        <p className="text-xs text-parchment-600 italic mb-3">
+        <p className="font-mono text-[11px] text-parchment-700 italic mb-3">
           Plain-language version unavailable for this trial.
         </p>
       )}
 
-      {/* Existing eligibility-summary line — only when no simplification */}
       {(trial.eligibility.minAge || trial.eligibility.sex !== 'ALL') && !showPlainLanguage && (
-        <p className="text-xs text-parchment-800 mb-3">
+        <p className={pane
+          ? 'font-mono text-[11px] text-parchment-700 mb-4'
+          : 'text-xs text-parchment-800 mb-3'}>
           <span className="font-medium">Who can join:</span>{' '}
           {[
             trial.eligibility.minAge && `${trial.eligibility.minAge}+`,
@@ -173,27 +224,52 @@ export default function ResultCard({
         </p>
       )}
 
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
-        <a
-          href={trial.ctGovUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="text-iris-700 hover:text-iris-900 font-medium"
-        >
-          View full details on ClinicalTrials.gov →
-        </a>
-        {trial.contact.phone && (
-          <span className="text-parchment-800">{trial.contact.phone}</span>
-        )}
-        {trial.contact.email && (
+      {pane ? (
+        <div className="mt-6 pt-5 border-t border-parchment-200 flex flex-col gap-1.5 text-[13px]">
+          <div className="font-mono text-[11px] text-parchment-700 mb-1">contact</div>
+          {trial.contact.phone && (
+            <span className="text-parchment-900">{trial.contact.phone}</span>
+          )}
+          {trial.contact.email && (
+            <a
+              href={`mailto:${trial.contact.email}`}
+              className="text-iris-700 hover:text-iris-900"
+            >
+              {trial.contact.email}
+            </a>
+          )}
+          <a
+            href={trial.ctGovUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="text-iris-700 hover:text-iris-900 font-medium mt-2"
+          >
+            View full details on ClinicalTrials.gov →
+          </a>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
           <a
-            href={`mailto:${trial.contact.email}`}
-            className="text-iris-700 hover:text-iris-900 underline"
+            href={trial.ctGovUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="text-iris-700 hover:text-iris-900 font-medium"
           >
-            {trial.contact.email}
+            View full details on ClinicalTrials.gov →
           </a>
-        )}
-      </div>
+          {trial.contact.phone && (
+            <span className="text-parchment-800">{trial.contact.phone}</span>
+          )}
+          {trial.contact.email && (
+            <a
+              href={`mailto:${trial.contact.email}`}
+              className="text-iris-700 hover:text-iris-900 underline"
+            >
+              {trial.contact.email}
+            </a>
+          )}
+        </div>
+      )}
     </article>
   )
 }
diff --git a/src/components/ResultsList.jsx b/src/components/ResultsList.jsx
index 28fa345..ea19c9c 100644
--- a/src/components/ResultsList.jsx
+++ b/src/components/ResultsList.jsx
@@ -181,11 +181,10 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
         </p>
       )}
 
-      <div className="px-6 py-3 border-b border-parchment-200 flex items-center gap-4">
-        <p className="font-mono text-[11px] text-parchment-700">
-          {totalCount.toLocaleString()} trial{totalCount !== 1 ? 's' : ''} found
-        </p>
-      </div>
+      <ResultsToolbar
+        totalCount={totalCount}
+        searchParams={searchParams}
+      />
 
       <div
         className="flex-1 grid min-h-0 overflow-hidden"
@@ -247,6 +246,83 @@ export default function ResultsList({ searchParams, modelKey, userDescription, e
   )
 }
 
+const STATUS_LABELS = {
+  RECRUITING: 'recruiting',
+  NOT_YET_RECRUITING: 'not yet recruiting',
+  ACTIVE_NOT_RECRUITING: 'active, not recruiting',
+  COMPLETED: 'completed',
+  ALL: null,
+}
+
+const PHASE_LABELS = {
+  EARLY_PHASE1: 'Early Phase 1',
+  PHASE1: 'Phase 1',
+  PHASE2: 'Phase 2',
+  PHASE3: 'Phase 3',
+  PHASE4: 'Phase 4',
+}
+
+const SORT_OPTIONS = [
+  { id: 'fit',      label: 'Best fit',     disabled: true, title: 'Available once on-device classification runs' },
+  { id: 'distance', label: 'Distance',     disabled: false },
+  { id: 'phase',    label: 'Phase',        disabled: false },
+  { id: 'recent',   label: 'Most recent',  disabled: false },
+]
+
+function ResultsToolbar({ totalCount, searchParams }) {
+  const [sort, setSort] = useState('recent')
+
+  const summaryParts = [`${totalCount.toLocaleString()} trial${totalCount !== 1 ? 's' : ''}`]
+  if (searchParams.location) summaryParts.push(`near ${searchParams.location}`)
+  if (searchParams.location && searchParams.radius) summaryParts.push(`within ${searchParams.radius} mi`)
+  const statusLabel = STATUS_LABELS[searchParams.status]
+  if (statusLabel) summaryParts.push(statusLabel)
+  if (searchParams.phases?.length) {
+    summaryParts.push(searchParams.phases.map(p => PHASE_LABELS[p] ?? p).join(' / '))
+  }
+
+  return (
+    <div className="px-6 py-3 border-b border-parchment-200 flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+      <p className="font-mono text-[11px] text-parchment-700 leading-snug">
+        {summaryParts.map((part, i) => (
+          <span key={i}>
+            {i > 0 && <span className="text-parchment-300 mx-1.5" aria-hidden="true">·</span>}
+            {part}
+          </span>
+        ))}
+      </p>
+      <div className="flex items-center gap-1" role="group" aria-label="Sort results">
+        <span className="font-mono text-[10px] uppercase tracking-[0.08em] text-parchment-700 mr-2">
+          sort
+        </span>
+        {SORT_OPTIONS.map(opt => {
+          const active = sort === opt.id
+          return (
+            <button
+              key={opt.id}
+              type="button"
+              onClick={() => !opt.disabled && setSort(opt.id)}
+              disabled={opt.disabled}
+              title={opt.title}
+              aria-pressed={active}
+              className={[
+                'text-[11px] px-2 py-0.5 rounded-md transition-colors',
+                opt.disabled
+                  ? 'text-parchment-500 cursor-not-allowed'
+                  : active
+                    ? 'bg-iris-50 text-iris-700 font-medium'
+                    : 'text-parchment-700 hover:text-parchment-950 hover:bg-parchment-100',
+              ].join(' ')}
+            >
+              {opt.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
 function CompareBar({ count, onClear }) {
   return (
     <div

From ec635c60b440e16e846feefef851296aefaf281e Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:21:54 -0400
Subject: [PATCH 05/17] =?UTF-8?q?feat(design):=20unified=20search=20surfac?=
 =?UTF-8?q?e=20=E2=80=94=20iris=20CTA,=20mono=20labels,=20NL=20chip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restyle the structured form and natural-language input to share one
parchment-50 surface that visually feels like the prototype's unified
search bar.

SearchForm:
- Mono 10px uppercase section header ("find clinical trials")
- Iris-violet submit button ("Find trials →")
- Iris-violet focus rings on inputs / selects
- Iris-violet checkbox accent on phase pickers

NaturalLanguageInput:
- Outer surface bg shifts to parchment-50 + parchment-200 border so it
  flows seamlessly into the form below
- Collapsed trigger redesigned as a mode-toggle pill with a mono
  "AI · on-device" badge (echoes the prototype's mode toggle)
- Expanded textarea sits inside a white rounded card with a magnifying
  glass icon and an iris-violet "Find trials" button
- Iris-violet for Download & enable, progress bar fill, Delete button
- Confirmation card replaced with a "understood:" mono caption + chip
  row matching the prototype's understood-fields pattern

Tests updated for new copy: button name "Find trials" instead of
"Search trials"; trigger name "Describe in your own words" instead of
the longer phrasing; understood:/couldn't determine condition.
---
 src/components/NaturalLanguageInput.jsx      | 135 ++++++++++---------
 src/components/NaturalLanguageInput.test.jsx |  26 ++--
 src/components/SearchForm.jsx                |  16 ++-
 src/components/SearchForm.test.jsx           |   6 +-
 4 files changed, 93 insertions(+), 90 deletions(-)

diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index a7fe45a..c51388a 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -77,23 +77,29 @@ export default function NaturalLanguageInput({ onExtract }) {
     return `Downloading AI model… ${Math.round((progress.progress ?? 0) * 100)}%`
   }
 
-  const badgeLabel = !webGPUSupported ? 'Unavailable' : 'New'
+  const badgeLabel = !webGPUSupported ? 'Unavailable' : null
   const badgeClass = !webGPUSupported
     ? 'bg-parchment-200 text-parchment-700'
-    : 'bg-parchment-500 text-parchment-950'
+    : 'bg-iris-100 text-iris-700'
 
   return (
-    <div className="bg-parchment-100 border-b border-parchment-300 px-6 py-3">
+    <div className="bg-parchment-50 border-b border-parchment-200 px-6 py-3">
       <button
         type="button"
-        className="flex items-center gap-2 text-sm text-parchment-800 hover:text-parchment-950"
+        className={[
+          'inline-flex items-center gap-2 text-[12px] font-medium rounded-full px-3 py-1.5 transition-colors',
+          expanded
+            ? 'bg-parchment-100 text-parchment-950 border border-parchment-300'
+            : 'text-parchment-700 hover:text-parchment-950 hover:bg-parchment-100 border border-transparent',
+        ].join(' ')}
         onClick={() => setExpanded(e => !e)}
         aria-expanded={expanded}
         aria-controls="nlp-panel"
       >
-        <span aria-hidden="true">{expanded ? '▼' : '▶'}</span>
-        <span>Or, describe your situation in your own words</span>
-        <span className={`text-xs px-2 py-0.5 rounded-full ml-1 ${badgeClass}`}>{badgeLabel}</span>
+        <span>Describe in your own words</span>
+        <span className={`font-mono text-[10px] px-1.5 py-px rounded-full ${badgeClass}`}>
+          {badgeLabel ?? 'AI · on-device'}
+        </span>
       </button>
 
       {expanded && (
@@ -126,7 +132,7 @@ export default function NaturalLanguageInput({ onExtract }) {
               <button
                 type="button"
                 onClick={handleConsent}
-                className="bg-parchment-800 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-parchment-950"
+                className="bg-iris-600 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-iris-700"
               >
                 Download &amp; enable
               </button>
@@ -145,14 +151,14 @@ export default function NaturalLanguageInput({ onExtract }) {
             <div>
               <p className="text-sm text-parchment-800 italic mb-2">{getProgressLabel()}</p>
               <div
-                className="bg-parchment-300 rounded-full h-1.5 overflow-hidden"
+                className="bg-parchment-200 rounded-full h-1.5 overflow-hidden"
                 role="progressbar"
                 aria-valuemin={0}
                 aria-valuemax={100}
                 aria-valuenow={Math.round((progress?.progress ?? 0) * 100)}
               >
                 <div
-                  className="bg-parchment-800 h-1.5 rounded-full transition-all"
+                  className="bg-iris-500 h-1.5 rounded-full transition-all"
                   style={{ width: `${Math.round((progress?.progress ?? 0) * 100)}%` }}
                 />
               </div>
@@ -176,26 +182,36 @@ export default function NaturalLanguageInput({ onExtract }) {
           {webGPUSupported && consented && (status === 'ready' || status === 'extracting') && (
             <>
               <form onSubmit={handleSubmit}>
-                <textarea
-                  rows={3}
-                  value={text}
-                  onChange={e => setText(e.target.value)}
-                  placeholder="e.g. 52-year-old woman in Brooklyn with triple negative breast cancer, already did chemo"
-                  className="w-full border border-parchment-400 rounded-md px-3 py-2 text-sm bg-white text-parchment-950 resize-none focus:outline-none focus:ring-2 focus:ring-parchment-800"
-                  aria-label="Natural language search"
-                  disabled={status === 'extracting'}
-                />
-                <p className="mt-1 text-xs text-parchment-700">
-                  IRIS will extract condition, location, age, and other relevant details automatically.
-                  {' '}<span className="text-parchment-500">Model: {model.label}</span>
+                <div className="bg-white border border-parchment-300 rounded-xl shadow-sm flex items-start gap-3 px-4 py-3.5">
+                  <svg
+                    width="18" height="18" viewBox="0 0 20 20" fill="none"
+                    className="text-parchment-700 mt-1 shrink-0"
+                    aria-hidden="true"
+                  >
+                    <circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.5" />
+                    <path d="m14 14 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                  <textarea
+                    rows={2}
+                    value={text}
+                    onChange={e => setText(e.target.value)}
+                    placeholder="e.g. 52-year-old woman in Brooklyn with triple negative breast cancer, already did chemo"
+                    className="flex-1 text-[15px] text-parchment-950 leading-snug resize-none focus:outline-none placeholder:text-parchment-500 bg-transparent"
+                    aria-label="Natural language search"
+                    disabled={status === 'extracting'}
+                  />
+                  <button
+                    type="submit"
+                    disabled={status === 'extracting' || !text.trim()}
+                    className="bg-iris-600 text-white px-3.5 py-2 rounded-md text-[13px] font-semibold hover:bg-iris-700 disabled:opacity-50 shrink-0"
+                  >
+                    {status === 'extracting' ? 'Extracting…' : 'Find trials'}
+                  </button>
+                </div>
+                <p className="mt-2 font-mono text-[11px] text-parchment-700">
+                  IRIS extracts condition, location, age, and other details automatically.
+                  {' '}<span className="text-parchment-500">model: {model.label}</span>
                 </p>
-                <button
-                  type="submit"
-                  disabled={status === 'extracting' || !text.trim()}
-                  className="mt-2 bg-parchment-800 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-parchment-950 disabled:opacity-50"
-                >
-                  {status === 'extracting' ? 'Extracting…' : 'Find trials →'}
-                </button>
               </form>
 
               {/* Clear local data — the model is the only thing IRIS stores
@@ -226,7 +242,7 @@ export default function NaturalLanguageInput({ onExtract }) {
                         type="button"
                         onClick={handleClearLocalData}
                         disabled={clearing}
-                        className="bg-parchment-800 text-white px-3 py-1.5 rounded-md font-semibold hover:bg-parchment-950 disabled:opacity-50"
+                        className="bg-iris-600 text-white px-3 py-1.5 rounded-md font-semibold hover:bg-iris-700 disabled:opacity-50"
                       >
                         {clearing ? 'Deleting…' : 'Delete'}
                       </button>
@@ -248,46 +264,31 @@ export default function NaturalLanguageInput({ onExtract }) {
             </>
           )}
 
-          {/* Confirmation card */}
+          {/* Understood chips */}
           {extracted && status === 'ready' && (
-            <div className="mt-3 bg-white border-2 border-parchment-700 rounded-lg p-4">
-              <h4 className="text-xs font-bold text-parchment-700 uppercase tracking-wide mb-3">
-                Here&apos;s what I understood
-              </h4>
-              <div className="flex flex-wrap gap-2 mb-2">
-                {extracted.condition && (
-                  <span className="bg-parchment-100 border border-parchment-300 rounded px-2 py-1 text-xs text-parchment-950">
-                    <span className="text-parchment-500 mr-1 text-[10px] uppercase">Condition</span>
-                    {extracted.condition}
-                  </span>
-                )}
-                {extracted.location && (
-                  <span className="bg-parchment-100 border border-parchment-300 rounded px-2 py-1 text-xs text-parchment-950">
-                    <span className="text-parchment-500 mr-1 text-[10px] uppercase">Location</span>
-                    {extracted.location}
-                  </span>
-                )}
-                {extracted.age != null && (
-                  <span className="bg-parchment-100 border border-parchment-300 rounded px-2 py-1 text-xs text-parchment-950">
-                    <span className="text-parchment-500 mr-1 text-[10px] uppercase">Age</span>
-                    {extracted.age}
-                  </span>
-                )}
-                {extracted.sex && extracted.sex !== 'ALL' && (
-                  <span className="bg-parchment-100 border border-parchment-300 rounded px-2 py-1 text-xs text-parchment-950">
-                    <span className="text-parchment-500 mr-1 text-[10px] uppercase">Sex</span>
-                    {extracted.sex.charAt(0) + extracted.sex.slice(1).toLowerCase()}
-                  </span>
-                )}
-              </div>
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+              <span className="font-mono text-[11px] text-parchment-700">understood:</span>
+              {[
+                ['condition', extracted.condition],
+                ['location', extracted.location],
+                ['age', extracted.age],
+                ['sex', extracted.sex && extracted.sex !== 'ALL'
+                  ? extracted.sex.charAt(0) + extracted.sex.slice(1).toLowerCase()
+                  : null],
+              ].filter(([, v]) => v != null && v !== '').map(([k, v]) => (
+                <span
+                  key={k}
+                  className="inline-flex items-center gap-1.5 bg-white border border-parchment-300 rounded-md px-2 py-0.5 text-[12px]"
+                >
+                  <span className="font-mono text-[10px] uppercase tracking-[0.04em] text-parchment-500">{k}</span>
+                  <span className="text-parchment-950 font-medium">{v}</span>
+                </span>
+              ))}
               {!extracted.condition && (
-                <p className="text-xs text-amber-700 mt-1">
-                  ⚠ I couldn&apos;t determine the condition — please fill it in below.
-                </p>
+                <span className="text-[12px] text-amber-700">
+                  ⚠ couldn&apos;t determine condition — fill below
+                </span>
               )}
-              <p className="text-xs text-parchment-600 mt-2 italic">
-                Not right? Edit the form below or retype your description.
-              </p>
             </div>
           )}
         </div>
diff --git a/src/components/NaturalLanguageInput.test.jsx b/src/components/NaturalLanguageInput.test.jsx
index df74f00..ca59891 100644
--- a/src/components/NaturalLanguageInput.test.jsx
+++ b/src/components/NaturalLanguageInput.test.jsx
@@ -28,14 +28,14 @@ describe('NaturalLanguageInput — WebGPU unavailable', () => {
   it('shows Unavailable badge', () => {
     useNLP.mockReturnValue({ ...baseHook, webGPUSupported: false })
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByText('Unavailable')).toBeInTheDocument()
   })
 
   it('shows browser requirement message', () => {
     useNLP.mockReturnValue({ ...baseHook, webGPUSupported: false })
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByText(/WebGPU-capable browser/i)).toBeInTheDocument()
   })
 })
@@ -44,7 +44,7 @@ describe('NaturalLanguageInput — consent screen', () => {
   it('shows consent screen when no prior consent and WebGPU available', () => {
     useNLP.mockReturnValue({ ...baseHook, status: 'idle' })
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByText(/One-time setup/i)).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /Download & enable/i })).toBeInTheDocument()
   })
@@ -53,7 +53,7 @@ describe('NaturalLanguageInput — consent screen', () => {
     const load = vi.fn()
     useNLP.mockReturnValue({ ...baseHook, load })
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     fireEvent.click(screen.getByRole('button', { name: /Download & enable/i }))
     expect(load).toHaveBeenCalled()
     expect(localStorage.getItem('iris_nlp_enabled')).toBe('true')
@@ -62,7 +62,7 @@ describe('NaturalLanguageInput — consent screen', () => {
   it('collapses panel when user clicks Not now', () => {
     useNLP.mockReturnValue({ ...baseHook, status: 'idle' })
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     fireEvent.click(screen.getByRole('button', { name: /Not now/i }))
     expect(screen.queryByText(/One-time setup/i)).not.toBeInTheDocument()
   })
@@ -77,7 +77,7 @@ describe('NaturalLanguageInput — downloading state', () => {
     })
     localStorage.setItem('iris_nlp_enabled', 'true')
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByText(/Fetching model/i)).toBeInTheDocument()
   })
 })
@@ -87,7 +87,7 @@ describe('NaturalLanguageInput — ready state', () => {
     useNLP.mockReturnValue({ ...baseHook, status: 'ready' })
     localStorage.setItem('iris_nlp_enabled', 'true')
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByRole('textbox', { name: /natural language search/i })).not.toBeDisabled()
   })
 
@@ -99,7 +99,7 @@ describe('NaturalLanguageInput — ready state', () => {
     localStorage.setItem('iris_nlp_enabled', 'true')
 
     render(<NaturalLanguageInput onExtract={onExtract} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     await user.type(screen.getByRole('textbox', { name: /natural language search/i }), '52yo woman with breast cancer')
     fireEvent.click(screen.getByRole('button', { name: /Find trials/i }))
 
@@ -122,13 +122,13 @@ describe('NaturalLanguageInput — confirmation card', () => {
     localStorage.setItem('iris_nlp_enabled', 'true')
 
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     fireEvent.change(screen.getByRole('textbox', { name: /natural language search/i }), {
       target: { value: '52yo woman with breast cancer in Brooklyn' },
     })
     fireEvent.click(screen.getByRole('button', { name: /Find trials/i }))
 
-    await screen.findByText(/Here's what I understood/i)
+    await screen.findByText(/understood:/i)
     expect(screen.getByText('breast cancer')).toBeInTheDocument()
     expect(screen.getByText('Brooklyn')).toBeInTheDocument()
   })
@@ -139,13 +139,13 @@ describe('NaturalLanguageInput — confirmation card', () => {
     localStorage.setItem('iris_nlp_enabled', 'true')
 
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     fireEvent.change(screen.getByRole('textbox', { name: /natural language search/i }), {
       target: { value: 'something unclear' },
     })
     fireEvent.click(screen.getByRole('button', { name: /Find trials/i }))
 
-    await screen.findByText(/couldn't determine the condition/i)
+    await screen.findByText(/couldn't determine condition/i)
   })
 })
 
@@ -154,7 +154,7 @@ describe('NaturalLanguageInput — error state', () => {
     useNLP.mockReturnValue({ ...baseHook, status: 'error', error: 'load failed' })
     localStorage.setItem('iris_nlp_enabled', 'true')
     render(<NaturalLanguageInput onExtract={vi.fn()} />)
-    fireEvent.click(screen.getByRole('button', { name: /describe your situation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /describe in your own words/i }))
     expect(screen.getByText(/try again/i)).toBeInTheDocument()
   })
 })
diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index ec94779..c1d3a91 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -58,15 +58,17 @@ export default function SearchForm({ onSearch, prefill }) {
   }
 
   function inputClass(key) {
-    const base = 'w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-parchment-800'
+    const base = 'w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-iris-500'
     return prefillKeys.has(key)
       ? `${base} border-parchment-700 bg-parchment-100`
       : `${base} border-parchment-400 bg-white`
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-parchment-50 border-b border-parchment-300 px-6 py-6">
-      <h2 className="text-base font-semibold text-parchment-950 mb-4">Find clinical trials</h2>
+    <form onSubmit={handleSubmit} className="bg-parchment-50 border-b border-parchment-200 px-6 py-5">
+      <h2 className="font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-parchment-700 mb-4">
+        find clinical trials
+      </h2>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
         <div className="lg:col-span-2">
@@ -107,7 +109,7 @@ export default function SearchForm({ onSearch, prefill }) {
               id="radius"
               value={radius}
               onChange={e => setRadius(e.target.value)}
-              className="w-full border border-parchment-400 rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-parchment-800"
+              className="w-full border border-parchment-400 rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-iris-500"
             >
               {RADII.map(r => (
                 <option key={r} value={r}>{r} mi</option>
@@ -177,7 +179,7 @@ export default function SearchForm({ onSearch, prefill }) {
                     type="checkbox"
                     checked={phases.includes(value)}
                     onChange={() => togglePhase(value)}
-                    className="accent-parchment-800"
+                    className="accent-iris-500"
                   />
                   {label}
                 </label>
@@ -189,9 +191,9 @@ export default function SearchForm({ onSearch, prefill }) {
 
       <button
         type="submit"
-        className="bg-parchment-800 text-white px-6 py-2.5 rounded-md text-sm font-semibold hover:bg-parchment-950 focus:outline-none focus:ring-2 focus:ring-parchment-950 transition-colors"
+        className="bg-iris-600 text-white px-6 py-2.5 rounded-md text-[13px] font-semibold hover:bg-iris-700 focus:outline-none focus:ring-2 focus:ring-iris-500 focus:ring-offset-1 transition-colors"
       >
-        Search trials
+        Find trials →
       </button>
     </form>
   )
diff --git a/src/components/SearchForm.test.jsx b/src/components/SearchForm.test.jsx
index 3321fbc..141cef5 100644
--- a/src/components/SearchForm.test.jsx
+++ b/src/components/SearchForm.test.jsx
@@ -26,7 +26,7 @@ describe('SearchForm', () => {
     const onSearch = vi.fn()
     render(<SearchForm onSearch={onSearch} />)
     await user.type(screen.getByLabelText(/condition/i), 'lung cancer')
-    fireEvent.click(screen.getByRole('button', { name: /search/i }))
+    fireEvent.click(screen.getByRole('button', { name: /find trials/i }))
     expect(onSearch).toHaveBeenCalledWith(
       expect.objectContaining({ condition: 'lung cancer' })
     )
@@ -35,7 +35,7 @@ describe('SearchForm', () => {
   it('does not submit when condition is empty', async () => {
     const onSearch = vi.fn()
     render(<SearchForm onSearch={onSearch} />)
-    fireEvent.click(screen.getByRole('button', { name: /search/i }))
+    fireEvent.click(screen.getByRole('button', { name: /find trials/i }))
     expect(onSearch).not.toHaveBeenCalled()
   })
 })
@@ -60,7 +60,7 @@ describe('SearchForm prefill', () => {
     const user = userEvent.setup()
     const onSearch = vi.fn()
     render(<SearchForm onSearch={onSearch} prefill={{ condition: 'breast cancer' }} />)
-    fireEvent.click(screen.getByRole('button', { name: /search/i }))
+    fireEvent.click(screen.getByRole('button', { name: /find trials/i }))
     expect(onSearch).toHaveBeenCalledWith(
       expect.objectContaining({ condition: 'breast cancer' })
     )

From 067d1b1c4c4659d2c281f3455b5fdaa180be1bab Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:26:19 -0400
Subject: [PATCH 06/17] fix(design): mobile padding + disable inert sort chips

- Sort chips were styled as interactive but no sort wiring exists yet.
  Mark all four disabled with consistent tooltips so the toolbar reads
  as a preview, not a broken control. Real sort arrives with Phase 3
  classification (Best fit) plus a follow-up PR for the others.
- Mobile polish: header tagline + on-device chip hide below sm/md so
  iris + LocalAIBadge fit on a 375px viewport. Header padding tightens.
- Sort group hidden below sm (it was wrapping awkwardly).
- Search form and detail-pane padding tighten on small screens.
---
 src/components/Header.jsx      | 10 +++++-----
 src/components/ResultCard.jsx  |  2 +-
 src/components/ResultsList.jsx | 10 +++++-----
 src/components/SearchForm.jsx  |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 164f53d..019a0c7 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,18 +1,18 @@
 export default function Header() {
   return (
-    <header className="border-b border-parchment-200 px-7 py-5 flex items-center justify-between gap-4">
-      <div className="flex items-baseline gap-3.5">
-        <span className="font-serif font-semibold text-[26px] tracking-tight text-parchment-950 lowercase">
+    <header className="border-b border-parchment-200 px-4 sm:px-7 py-4 sm:py-5 flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex items-baseline gap-2 sm:gap-3.5">
+        <span className="font-serif font-semibold text-[22px] sm:text-[26px] tracking-tight text-parchment-950 lowercase">
           iris
         </span>
-        <span className="font-serif italic text-parchment-700 text-[13px]">
+        <span className="font-serif italic text-parchment-700 text-[13px] hidden sm:inline">
           clinical trial finder
         </span>
       </div>
       <div className="flex items-center gap-2.5">
         <span
           title="Your data never leaves the device"
-          className="inline-flex items-center gap-1.5 font-mono text-[11px] text-parchment-700"
+          className="hidden md:inline-flex items-center gap-1.5 font-mono text-[11px] text-parchment-700"
         >
           <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
             <path
diff --git a/src/components/ResultCard.jsx b/src/components/ResultCard.jsx
index cb0d56d..a520860 100644
--- a/src/components/ResultCard.jsx
+++ b/src/components/ResultCard.jsx
@@ -83,7 +83,7 @@ export default function ResultCard({
 }) {
   const nearest = nearestLocation(trial.locations, coords)
   const wrapperClass = pane
-    ? 'px-7 pt-7 pb-9'
+    ? 'px-5 pt-5 pb-7 sm:px-7 sm:pt-7 sm:pb-9'
     : 'bg-white border border-parchment-400 rounded-lg p-5 mb-3 max-w-3xl'
 
   const sumState = simplification?.summarize
diff --git a/src/components/ResultsList.jsx b/src/components/ResultsList.jsx
index ea19c9c..380029e 100644
--- a/src/components/ResultsList.jsx
+++ b/src/components/ResultsList.jsx
@@ -264,9 +264,9 @@ const PHASE_LABELS = {
 
 const SORT_OPTIONS = [
   { id: 'fit',      label: 'Best fit',     disabled: true, title: 'Available once on-device classification runs' },
-  { id: 'distance', label: 'Distance',     disabled: false },
-  { id: 'phase',    label: 'Phase',        disabled: false },
-  { id: 'recent',   label: 'Most recent',  disabled: false },
+  { id: 'distance', label: 'Distance',     disabled: true, title: 'Sort wiring coming in a follow-up' },
+  { id: 'phase',    label: 'Phase',        disabled: true, title: 'Sort wiring coming in a follow-up' },
+  { id: 'recent',   label: 'Most recent',  disabled: true, title: 'Sort wiring coming in a follow-up' },
 ]
 
 function ResultsToolbar({ totalCount, searchParams }) {
@@ -282,7 +282,7 @@ function ResultsToolbar({ totalCount, searchParams }) {
   }
 
   return (
-    <div className="px-6 py-3 border-b border-parchment-200 flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+    <div className="px-4 sm:px-6 py-3 border-b border-parchment-200 flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
       <p className="font-mono text-[11px] text-parchment-700 leading-snug">
         {summaryParts.map((part, i) => (
           <span key={i}>
@@ -291,7 +291,7 @@ function ResultsToolbar({ totalCount, searchParams }) {
           </span>
         ))}
       </p>
-      <div className="flex items-center gap-1" role="group" aria-label="Sort results">
+      <div className="hidden sm:flex items-center gap-1" role="group" aria-label="Sort results">
         <span className="font-mono text-[10px] uppercase tracking-[0.08em] text-parchment-700 mr-2">
           sort
         </span>
diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index c1d3a91..4c7216e 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -65,7 +65,7 @@ export default function SearchForm({ onSearch, prefill }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-parchment-50 border-b border-parchment-200 px-6 py-5">
+    <form onSubmit={handleSubmit} className="bg-parchment-50 border-b border-parchment-200 px-4 sm:px-6 py-4 sm:py-5">
       <h2 className="font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-parchment-700 mb-4">
         find clinical trials
       </h2>

From 01b22911af8dc05d8ccd3fd5f6effc77ad5ceab5 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:26:27 -0400
Subject: [PATCH 07/17] docs(design): add handoff + prototype reference assets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Source-of-truth documents from the Claude.ai design exploration. Future
phases reference these directly:

- Handoff.md — phased integration plan, locked tweak values, harness
  validation gates, scope boundaries, microcopy, open product questions
- IRIS Triage.html — final chosen layout (two-pane); the visual target
- IRIS Redesign.html — earlier exploration kept for reference
- Classification Harness.html — standalone rig for validating the
  two-stage classification pipeline before Phase 3 ships
- shared/iris-shared.jsx — reference component implementations
  (LocalAIBadge, IrisHeader, IrisSearchBar, FitMeter, StreamingText,
  StatusPill, ActionRow). Translated into JSX/Tailwind in src/.
- clinical-trial-finder-plan.md, iris-cowork-prompt.md — planning notes
---
 Classification Harness.html   | 338 ++++++++++++++++++++++++
 Handoff.md                    | 159 +++++++++++
 IRIS Redesign.html            | 143 ++++++++++
 IRIS Triage.html              | 431 ++++++++++++++++++++++++++++++
 clinical-trial-finder-plan.md | 244 +++++++++++++++++
 iris-cowork-prompt.md         | 158 +++++++++++
 shared/iris-shared.jsx        | 478 ++++++++++++++++++++++++++++++++++
 7 files changed, 1951 insertions(+)
 create mode 100644 Classification Harness.html
 create mode 100644 Handoff.md
 create mode 100644 IRIS Redesign.html
 create mode 100644 IRIS Triage.html
 create mode 100644 clinical-trial-finder-plan.md
 create mode 100644 iris-cowork-prompt.md
 create mode 100644 shared/iris-shared.jsx

diff --git a/Classification Harness.html b/Classification Harness.html
new file mode 100644
index 0000000..a838276
--- /dev/null
+++ b/Classification Harness.html	
@@ -0,0 +1,338 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>IRIS — classification test harness</title>
+<link rel="stylesheet" href="styles/tokens.css" />
+<style>
+  html, body { margin: 0; height: 100%; background: var(--p-50); color: var(--p-900); font-family: var(--sans); }
+  .wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px 80px; }
+  h1 { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
+  .sub { color: var(--p-700); font-size: 13px; margin: 0 0 24px; max-width: 640px; line-height: 1.55; }
+  .panel { background: white; border: 1px solid var(--p-200); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
+  .panel h2 { font-family: var(--serif); font-size: 16px; margin: 0 0 12px; font-weight: 600; }
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  @media (max-width: 760px) { .row { grid-template-columns: 1fr; } }
+  label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iris-700); display: block; margin-bottom: 6px; }
+  textarea, input, select { width: 100%; font-family: var(--sans); font-size: 13px; padding: 10px 12px; border: 1px solid var(--p-300); border-radius: 8px; background: var(--p-50); color: var(--p-900); resize: vertical; }
+  textarea { line-height: 1.5; }
+  .mono textarea { font-family: var(--mono); font-size: 12px; }
+  .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
+  button.run { background: var(--iris-600); color: white; border: none; padding: 10px 18px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; }
+  button.run:disabled { opacity: 0.5; cursor: not-allowed; }
+  button.ghost { background: transparent; border: 1px solid var(--p-300); color: var(--p-900); padding: 8px 14px; font-size: 12px; border-radius: 8px; cursor: pointer; }
+  .stats { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--p-700); margin-top: 8px; }
+  .stats b { color: var(--p-950); font-weight: 600; }
+  .results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .results-table th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-700); padding: 8px 10px; border-bottom: 1px solid var(--p-200); }
+  .results-table td { padding: 12px 10px; border-bottom: 1px solid var(--p-100); vertical-align: top; }
+  .verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; font-family: var(--mono); letter-spacing: 0.04em; }
+  .v-LIKELY { background: var(--signal-good-bg); color: var(--signal-good); }
+  .v-POSSIBLE { background: var(--signal-warn-bg); color: var(--signal-warn); }
+  .v-UNLIKELY { background: var(--p-200); color: var(--p-700); }
+  .v-PARSE_FAIL { background: var(--signal-bad-bg); color: var(--signal-bad); }
+  .v-PENDING { background: var(--p-100); color: var(--p-700); }
+  .raw-out { font-family: var(--mono); font-size: 11px; color: var(--p-700); margin-top: 4px; white-space: pre-wrap; max-width: 380px; word-break: break-word; }
+  details { margin-top: 12px; }
+  details summary { cursor: pointer; font-size: 12px; color: var(--iris-700); font-family: var(--mono); }
+  pre { font-family: var(--mono); font-size: 11px; background: var(--p-50); padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 6px 0 0; }
+  .pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+  .pill { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--p-100); color: var(--p-700); }
+  .agreement-note { font-family: var(--mono); font-size: 11px; color: var(--p-700); margin-top: 10px; padding: 10px 12px; background: var(--iris-50); border: 1px solid var(--iris-100); border-radius: 8px; line-height: 1.5; }
+  .agreement-note b { color: var(--iris-700); }
+  .stub-warning { background: var(--signal-warn-bg); color: var(--signal-warn); padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 18px; line-height: 1.5; }
+  .stub-warning code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Classification harness</h1>
+  <p class="sub">Standalone test rig for the proposed two-stage pipeline. Stage 1 classifies trials as <b>LIKELY / POSSIBLE / UNLIKELY</b> using a short prompt, before the full simplification runs. Use this to validate latency, parse-rate, and verdict stability against real ClinicalTrials.gov payloads before wiring it into the app.</p>
+
+  <div class="stub-warning">
+    <b>Wire your model in <code>classifyOne()</code>.</b> The harness ships with a mock implementation that simulates 200–1500ms latency and ~85% parse success. Replace the body of <code>classifyOne()</code> with your real on-device call (Gemma 2 2B / MediaPipe / etc.).
+  </div>
+
+  <div class="panel">
+    <h2>Inputs</h2>
+    <div class="row">
+      <div>
+        <label for="user-desc">User description</label>
+        <textarea id="user-desc" rows="3">I'm 58 years old with breast cancer in Boston</textarea>
+      </div>
+      <div>
+        <label for="prompt-template">Classify prompt template</label>
+        <textarea id="prompt-template" rows="6" class="mono-area" style="font-family: var(--mono); font-size: 12px;">You are evaluating clinical trial fit.
+
+User: {{user}}
+Trial title: {{title}}
+Eligibility (excerpt): {{eligibility}}
+
+Reply on one line, exactly: VERDICT | one-sentence reason
+where VERDICT is LIKELY, POSSIBLE, or UNLIKELY.</textarea>
+      </div>
+    </div>
+
+    <div style="margin-top: 16px;">
+      <label for="trials-json">Trials (JSON array — paste from ClinicalTrials.gov or your fixture)</label>
+      <textarea id="trials-json" rows="10" style="font-family: var(--mono); font-size: 11.5px;"></textarea>
+    </div>
+
+    <div class="controls">
+      <button class="run" id="run-btn">Run classification</button>
+      <button class="ghost" id="reset-btn">Reset trials</button>
+      <label style="display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;text-transform:none;letter-spacing:0;color:var(--p-700);margin:0;">
+        Concurrency
+        <select id="concurrency" style="width:auto;padding:4px 8px;font-size:12px;">
+          <option value="1">1 (serial)</option>
+          <option value="2">2</option>
+          <option value="3" selected>3</option>
+          <option value="5">5</option>
+        </select>
+      </label>
+      <label style="display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;text-transform:none;letter-spacing:0;color:var(--p-700);margin:0;">
+        Eligibility max chars
+        <input id="elig-max" type="number" value="1500" min="200" max="8000" step="100" style="width:90px;padding:4px 8px;font-size:12px;" />
+      </label>
+    </div>
+    <div class="stats" id="run-stats" style="display:none;"></div>
+  </div>
+
+  <div class="panel">
+    <h2>Results</h2>
+    <table class="results-table">
+      <thead>
+        <tr>
+          <th style="width: 38%;">Trial</th>
+          <th style="width: 14%;">Verdict</th>
+          <th style="width: 12%;">Latency</th>
+          <th>Raw output / reason</th>
+          <th style="width: 12%;">Expected</th>
+        </tr>
+      </thead>
+      <tbody id="results-body"></tbody>
+    </table>
+    <div class="agreement-note" id="agreement-note" style="display:none;"></div>
+  </div>
+
+  <details>
+    <summary>How to wire your model</summary>
+    <pre>// Replace the body of classifyOne() in this file's &lt;script&gt; block.
+// It must return: { verdict, reason, raw, latencyMs }
+//
+// async function classifyOne(prompt) {
+//   const t0 = performance.now();
+//   const raw = await window.iris.generate({ prompt, maxTokens: 60 });
+//   const latencyMs = performance.now() - t0;
+//   return { ...parseVerdict(raw), raw, latencyMs };
+// }
+//
+// parseVerdict() is already implemented — it looks for
+// /^(LIKELY|POSSIBLE|UNLIKELY)\s*[|:\-]\s*(.+)$/im in the model output.</pre>
+  </details>
+</div>
+
+<script>
+// ─── Sample fixture ────────────────────────────────────────────────────
+const SAMPLE_TRIALS = [
+  {
+    nctId: 'NCT05952557',
+    title: 'Phase IIIb Study of Ribociclib + Endocrine Therapy in Early Breast Cancer',
+    eligibility: 'Inclusion: Adult female, ≥18 years. HR-positive, HER2-negative early breast cancer. Completed definitive surgery. Postmenopausal status confirmed. ECOG 0-1. Adequate organ function. Exclusion: Prior CDK4/6 inhibitor. Pregnancy or breastfeeding. Active second malignancy.',
+    expected: 'LIKELY',
+  },
+  {
+    nctId: 'NCT06104020',
+    title: 'Sacituzumab Govitecan in Metastatic Triple-Negative Breast Cancer',
+    eligibility: 'Inclusion: Adult, any sex. Histologically confirmed metastatic triple-negative breast cancer (ER<1%, PR<1%, HER2-negative). At least one prior line of systemic therapy in metastatic setting. ECOG 0-2. Measurable disease per RECIST 1.1. Exclusion: Active CNS metastases. Prior topoisomerase I inhibitor.',
+    expected: 'POSSIBLE',
+  },
+  {
+    nctId: 'NCT05887492',
+    title: 'Adaptive Radiation Boost in Locally Advanced HER2+ Breast Cancer',
+    eligibility: 'Inclusion: Adult female. HER2-positive breast cancer confirmed by IHC 3+ or FISH-positive. Stage II-III disease. Completed neoadjuvant chemotherapy. ECOG 0-1. Exclusion: Prior radiation to chest. Pregnancy.',
+    expected: 'POSSIBLE',
+  },
+  {
+    nctId: 'NCT06221340',
+    title: 'Aerobic Exercise During Adjuvant Chemo for Breast Cancer Survivors',
+    eligibility: 'Inclusion: Adult, any sex. Breast cancer, any stage. Currently receiving or scheduled for adjuvant chemotherapy. Cleared by oncologist for moderate exercise. Exclusion: Cardiac contraindications.',
+    expected: 'LIKELY',
+  },
+  {
+    nctId: 'NCT04123456',
+    title: 'Pembrolizumab in Advanced Non-Small Cell Lung Cancer',
+    eligibility: 'Inclusion: Adult. Histologically confirmed advanced NSCLC. PD-L1 expression ≥50%. ECOG 0-1. Exclusion: Active autoimmune disease. Prior immunotherapy.',
+    expected: 'UNLIKELY',
+  },
+  {
+    nctId: 'NCT05123987',
+    title: 'Targeted Therapy in Pediatric Acute Lymphoblastic Leukemia',
+    eligibility: 'Inclusion: Pediatric patients aged 2-17 years. Newly diagnosed ALL. Exclusion: Adults. Prior chemotherapy.',
+    expected: 'UNLIKELY',
+  },
+];
+
+// ─── State ─────────────────────────────────────────────────────────────
+const $ = (id) => document.getElementById(id);
+let results = [];
+
+function fillFixture() {
+  $('trials-json').value = JSON.stringify(SAMPLE_TRIALS, null, 2);
+}
+fillFixture();
+$('reset-btn').onclick = () => { fillFixture(); renderResults([]); $('run-stats').style.display = 'none'; $('agreement-note').style.display = 'none'; };
+
+// ─── Parse helper ──────────────────────────────────────────────────────
+function parseVerdict(raw) {
+  if (!raw || typeof raw !== 'string') return { verdict: 'PARSE_FAIL', reason: '(empty output)' };
+  const m = raw.match(/^\s*(LIKELY|POSSIBLE|UNLIKELY)\s*[|:\-—]\s*(.+?)\s*$/im);
+  if (m) return { verdict: m[1].toUpperCase(), reason: m[2].trim() };
+  // Fallback: just look for the verdict word
+  const w = raw.match(/\b(LIKELY|POSSIBLE|UNLIKELY)\b/i);
+  if (w) return { verdict: w[1].toUpperCase(), reason: raw.replace(w[0], '').replace(/^[\s|:\-—]+/, '').trim() || '(no reason)' };
+  return { verdict: 'PARSE_FAIL', reason: raw.slice(0, 120) };
+}
+
+// ─── MOCK: replace this with your model call ───────────────────────────
+async function classifyOne(prompt, trial) {
+  const t0 = performance.now();
+  // Simulate latency between 200-1500ms
+  await new Promise(r => setTimeout(r, 200 + Math.random() * 1300));
+  // Simulate ~85% parse success — 15% of the time emit drift
+  const drift = Math.random() < 0.15;
+  let raw;
+  if (drift) {
+    raw = `Based on the user's description and the trial criteria, this seems ${['somewhat applicable', 'a partial match', 'maybe relevant'][Math.floor(Math.random()*3)]}.`;
+  } else {
+    // Use the expected verdict from fixture if available, otherwise random
+    const v = trial.expected || ['LIKELY','POSSIBLE','UNLIKELY'][Math.floor(Math.random()*3)];
+    const reasons = {
+      LIKELY: 'user demographics and condition appear to match the inclusion criteria.',
+      POSSIBLE: 'fits the broad condition but requires confirmation of subtype or stage.',
+      UNLIKELY: 'condition or demographic mismatch with trial requirements.',
+    };
+    raw = `${v} | ${reasons[v]}`;
+  }
+  const latencyMs = performance.now() - t0;
+  return { ...parseVerdict(raw), raw, latencyMs };
+}
+
+// ─── Run pipeline ──────────────────────────────────────────────────────
+async function runAll() {
+  let trials;
+  try {
+    trials = JSON.parse($('trials-json').value);
+    if (!Array.isArray(trials)) throw new Error('Not an array');
+  } catch (e) {
+    alert('Trials JSON is invalid: ' + e.message);
+    return;
+  }
+  const userDesc = $('user-desc').value.trim();
+  const template = $('prompt-template').value;
+  const concurrency = parseInt($('concurrency').value, 10);
+  const eligMax = parseInt($('elig-max').value, 10) || 1500;
+
+  $('run-btn').disabled = true;
+  results = trials.map(t => ({ trial: t, status: 'PENDING' }));
+  renderResults(results);
+  $('run-stats').style.display = 'flex';
+  $('agreement-note').style.display = 'none';
+
+  const startT = performance.now();
+  const queue = [...trials.entries()];
+  const workers = [];
+
+  function next() {
+    const item = queue.shift();
+    if (!item) return null;
+    const [idx, trial] = item;
+    const elig = (trial.eligibility || '').slice(0, eligMax);
+    const prompt = template
+      .replace('{{user}}', userDesc)
+      .replace('{{title}}', trial.title || trial.briefTitle || '')
+      .replace('{{eligibility}}', elig);
+    return classifyOne(prompt, trial).then(r => {
+      results[idx] = { trial, status: 'DONE', ...r };
+      renderResults(results);
+      updateStats(startT);
+    }).then(next);
+  }
+  for (let i = 0; i < Math.min(concurrency, trials.length); i++) workers.push(next());
+  await Promise.all(workers);
+
+  $('run-btn').disabled = false;
+  computeAgreement();
+}
+
+$('run-btn').onclick = runAll;
+
+// ─── Rendering ─────────────────────────────────────────────────────────
+function renderResults(rows) {
+  const body = $('results-body');
+  if (!rows.length) { body.innerHTML = '<tr><td colspan="5" style="color:var(--p-500);font-style:italic;padding:24px 10px;">No results yet — click <b>Run classification</b>.</td></tr>'; return; }
+  body.innerHTML = rows.map(r => {
+    const verdict = r.status === 'PENDING' ? 'PENDING' : (r.verdict || 'PARSE_FAIL');
+    const latency = r.latencyMs != null ? `${Math.round(r.latencyMs)}ms` : '—';
+    const expected = r.trial.expected || '—';
+    const match = r.verdict && r.trial.expected
+      ? (r.verdict === r.trial.expected ? '✓' : '✗')
+      : '';
+    const matchColor = match === '✓' ? 'var(--signal-good)' : match === '✗' ? 'var(--signal-bad)' : 'var(--p-500)';
+    return `
+      <tr>
+        <td>
+          <div style="font-family: var(--serif); font-weight: 600; color: var(--p-950); font-size: 13.5px; line-height: 1.35;">${escapeHtml(r.trial.title || r.trial.briefTitle || r.trial.nctId)}</div>
+          <div style="font-family: var(--mono); font-size: 10.5px; color: var(--p-500); margin-top: 2px;">${escapeHtml(r.trial.nctId || '')}</div>
+        </td>
+        <td><span class="verdict v-${verdict}">${verdict}</span></td>
+        <td style="font-family: var(--mono); font-size: 12px; color: var(--p-700);">${latency}</td>
+        <td>
+          <div style="font-size: 12.5px; color: var(--p-900); line-height: 1.5;">${escapeHtml(r.reason || '—')}</div>
+          ${r.raw && r.raw !== r.reason ? `<div class="raw-out">raw: ${escapeHtml(r.raw)}</div>` : ''}
+        </td>
+        <td style="font-family: var(--mono); font-size: 11px; color: var(--p-700);">
+          ${expected}
+          ${match ? `<span style="color:${matchColor}; margin-left: 6px; font-weight: 600;">${match}</span>` : ''}
+        </td>
+      </tr>
+    `;
+  }).join('');
+}
+renderResults([]);
+
+function updateStats(startT) {
+  const done = results.filter(r => r.status === 'DONE');
+  const elapsed = performance.now() - startT;
+  const lats = done.filter(r => r.latencyMs != null).map(r => r.latencyMs);
+  const avg = lats.length ? lats.reduce((a,b)=>a+b,0)/lats.length : 0;
+  const max = lats.length ? Math.max(...lats) : 0;
+  const parseFail = done.filter(r => r.verdict === 'PARSE_FAIL').length;
+  const parseRate = done.length ? ((done.length - parseFail) / done.length * 100).toFixed(0) : 0;
+  $('run-stats').innerHTML = `
+    <span><b>${done.length} / ${results.length}</b> done</span>
+    <span>elapsed <b>${(elapsed/1000).toFixed(1)}s</b></span>
+    <span>avg latency <b>${Math.round(avg)}ms</b></span>
+    <span>max latency <b>${Math.round(max)}ms</b></span>
+    <span>parse rate <b>${parseRate}%</b></span>
+    <span>parse fails <b>${parseFail}</b></span>
+  `;
+}
+
+function computeAgreement() {
+  const withExpected = results.filter(r => r.status === 'DONE' && r.trial.expected);
+  if (!withExpected.length) return;
+  const matches = withExpected.filter(r => r.verdict === r.trial.expected).length;
+  const pct = (matches / withExpected.length * 100).toFixed(0);
+  const note = $('agreement-note');
+  note.style.display = 'block';
+  note.innerHTML = `<b>Agreement with expected:</b> ${matches} / ${withExpected.length} (${pct}%) — useful as a smoke test once you've labeled a held-out set. Below ~80% means the prompt or model needs work before this drives sort order.`;
+}
+
+function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+</script>
+</body>
+</html>
diff --git a/Handoff.md b/Handoff.md
new file mode 100644
index 0000000..d99965b
--- /dev/null
+++ b/Handoff.md
@@ -0,0 +1,159 @@
+# IRIS — Claude Code handoff
+
+Design exploration is settled. This document is the bridge from the Claude.ai prototypes to the live `johnoooh/iris` codebase. Hand it to Claude Code along with the three artifact files.
+
+---
+
+## What's settled
+
+**Direction:** Triage two-pane layout (list + detail). Mobile collapses to list + tap-to-sheet.
+
+**Visual system:** Evolved warm-parchment palette + new iris-violet accent. Source Serif 4 (display), Inter Tight (UI), JetBrains Mono (technical). Tokens live in `styles/tokens.css`.
+
+**Locked tweak values from the prototype:**
+- Accent: `iris` (the violet)
+- Density: `comfy`
+- List width: `400px`
+
+**New patterns introduced:**
+- **Fit meter** — three-bar visualization (Likely / May / Unclear fit) shown per row and per detail pane
+- **Two-stage AI pipeline** — fast classify pass, then on-demand full simplification (still being validated, see harness)
+- **Local-AI badge** — always-visible mono pill in header announcing on-device model
+- **Compare** — pin up to 3 trials; sticky bar; compare-view page is later work
+- **Streaming shimmer** — placeholder lines shimmer until tokens land, then fade in
+- **Unified search** — NL + structured form become one input with a mode toggle
+
+---
+
+## Files to reference
+
+| File | Role |
+|---|---|
+| `IRIS Triage.html` | Final chosen direction. Reference for layout, spacing, microcopy. |
+| `styles/tokens.css` | Drop-in CSS variables. Colors, fonts, shadows, shimmer keyframes. |
+| `shared/iris-shared.jsx` | Reference implementations of header, search bar, fit meter, status pill, streaming text, action row. **Translate to your stack** (vanilla JS / whatever the live app uses) — don't copy React if the app isn't React. |
+| `Classification Harness.html` | Standalone rig for validating the two-stage classify before wiring it in. |
+
+---
+
+## Integration plan (recommended order)
+
+### Phase 1 — Visual system (low risk, ship first)
+
+1. **Add Google Fonts link** to `<head>`:
+   ```html
+   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
+   ```
+2. **Drop in `styles/tokens.css`** as new variables alongside existing ones; gradually replace the old palette.
+3. **Replace header markup** with the new dense header + privacy chip + local-AI badge.
+4. **Demote dedication banner** to a footer or "About IRIS" disclosure. Don't lose it — it's part of the project's soul, just not above-the-fold task-blocking.
+5. **Compress the privacy paragraph** into the on-device chip + an expandable details element with the long form.
+
+Ship after Phase 1 — already a meaningful UX improvement, no logic changes.
+
+### Phase 2 — Row format + accordion or two-pane
+
+The current cards are full-width prose blocks. Swap for compact rows:
+
+```
+[ ☐ ]  Phase IIIb Study of Ribociclib + ET in Early Breast Cancer
+        ▌▌▌ Likely fit · 0.1 mi · Phase 3
+```
+
+Two implementation paths — pick one based on engineering appetite:
+
+- **(a) Accordion in place** — easier. Click a row, it expands inline with the detail content. Works at any width. No layout fork.
+- **(b) Two-pane** — matches the prototype. CSS grid `grid-template-columns: 400px 1fr`, collapses to single-column under 820px (`@media` query + state-driven sheet on mobile).
+
+Recommend **(a) for first pass**, **(b) when you're ready to invest in the layout fork.**
+
+### Phase 3 — Two-stage classification
+
+**Don't ship this until the harness validates it.** See [Classification harness](#classification-harness) below.
+
+When ready:
+1. After search returns trial list, immediately render rows with title/distance/phase only — no fit meter yet.
+2. Kick off `classifyAll(trials, userDesc)` with concurrency 2–3.
+3. As each verdict returns, update that row's fit meter in place.
+4. Show `evaluating fit · 7 of 20` indicator in the toolbar while running.
+5. Once stage 1 is complete, default sort flips to "Best fit"; collapse UNLIKELY trials under a `12 less likely matches` disclosure.
+6. Stage 2 (full simplification) only fires for the currently-selected trial in the detail pane, or top N likely matches as the user scrolls.
+
+### Phase 4 — Compare
+
+1. `Set<nctId>` in memory, max size 3.
+2. Checkbox on each row.
+3. Sticky bar appears when set is non-empty: `[ 2 in compare ] [ Compare → ]`.
+4. Compare view itself is later — start with a placeholder route.
+
+### Phase 5 — Mobile polish
+
+1. Bottom-sheet pattern: tap row → sheet slides up with full detail. Backdrop dismiss + close button + drag handle.
+2. Sticky compare bar at bottom.
+3. Compact search summary chip replaces the full search bar on mobile (tap to expand).
+
+### Phase 6 — Persistence (optional, session-only)
+
+1. `sessionStorage` only — no PII to disk, in keeping with the privacy story.
+2. Save: search query, comparing set, currently-selected trial.
+3. Clear on a "Start over" button.
+
+---
+
+## Classification harness
+
+`Classification Harness.html` is a standalone page with a mocked `classifyOne()` that simulates 200–1500ms latency and ~85% parse success.
+
+**To validate the real model:**
+
+1. Open the harness.
+2. Replace the body of `classifyOne()` with your live on-device call — the function signature is `(prompt, trial) => Promise<{ verdict, reason, raw, latencyMs }>`.
+3. Run with the included fixture (6 trials, with expected verdicts).
+4. Check the stats row: parse rate, avg latency, max latency, agreement with expected.
+
+**Pass criteria for moving to Phase 3:**
+- Parse rate ≥ 90% on 50+ real trials
+- Avg latency < 1.5s per trial on a mid-range laptop
+- Agreement ≥ 80% on a labeled held-out set
+- No catastrophic UNLIKELY false-negatives (a viable trial ranked as UNLIKELY)
+
+**If parse rate is low:** try constrained decoding, or tighten the prompt to demand a single token first (`Output a single token: LIKELY, POSSIBLE, or UNLIKELY. Then on a new line, one sentence of reasoning.`).
+
+**If latency is high:** drop concurrency to 1 (avoid model thrashing on small WebGPU buffers), truncate eligibility more aggressively (1500 → 800 chars), or run only on the top 10 by simple keyword pre-filter.
+
+---
+
+## Things explicitly out of scope for this pass
+
+- Compare view (3-up side-by-side) — deferred
+- Account / login / save across sessions — deferred, conflicts with privacy story
+- Server-side fallback for the model — not consistent with on-device promise
+- Distance map view — nice-to-have, not on the critical path
+- Question-prep checklist — separate feature, separate PRD
+
+---
+
+## Open questions for product
+
+1. **Fit meter wording** — "Likely fit / May fit / Unclear fit" is the current draft. Does that read right, or do we want softer phrasing ("Worth a look / Maybe / Probably not")?
+2. **UNLIKELY default behavior** — collapse them, or just sort to bottom? Risk of hiding viable trials if the model is wrong.
+3. **Compare view** — which dimensions matter most? Probably: phase, distance, drug/intervention, eligibility deltas, contact info.
+4. **Fit meter on mobile rows** — keep at full size or shrink to just the bars? Currently same component, both contexts.
+
+---
+
+## Microcopy already drafted
+
+- Header sub: `clinical trial finder`
+- On-device chip: `on-device only`
+- Local-AI badge: `Gemma 2 2B · on-device`
+- Mode toggle: `Describe in your words` / `Structured form`
+- Mode toggle pill: `AI · on-device`
+- Understood section: `understood:` (mono, lowercase)
+- Section labels in detail: `What this study is testing`, `Who can join`
+- Fit panel caption: `based on what you described`
+- Toolbar count: `20 trials · near Boston · within 50 mi · recruiting`
+- Sort options: `Best fit`, `Distance`, `Phase`, `Most recent`
+- Compare bar (mobile): `**N** in compare` / `Compare →`
+- Sheet handle: drag affordance only, no label
+- Fit verdicts: `Likely fit`, `May fit`, `Unclear fit`
diff --git a/IRIS Redesign.html b/IRIS Redesign.html
new file mode 100644
index 0000000..111bacb
--- /dev/null
+++ b/IRIS Redesign.html	
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>IRIS — redesign explorations</title>
+<link rel="stylesheet" href="styles/tokens.css" />
+<style>
+  html, body { margin: 0; height: 100%; }
+  body { font-family: 'Inter Tight', system-ui, sans-serif; background: #f0eee9; }
+</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+<div id="root"></div>
+
+<script type="text/babel" src="design-canvas.jsx"></script>
+<script type="text/babel" src="shared/iris-shared.jsx"></script>
+<script type="text/babel" src="variations/editorial.jsx"></script>
+<script type="text/babel" src="variations/triage.jsx"></script>
+<script type="text/babel" src="variations/dossier.jsx"></script>
+<script type="text/babel" src="variations/mobile-triage.jsx"></script>
+<script type="text/babel" src="variations/mobile-dossier.jsx"></script>
+<script type="text/babel" src="variations/shimmer-showcase.jsx"></script>
+
+<script type="text/babel" data-presets="react">
+function Note({ children }) {
+  return (
+    <div style={{
+      fontSize: 12, color: 'rgba(60,50,40,0.75)', lineHeight: 1.55,
+      maxWidth: 720, marginBottom: 8,
+    }}>{children}</div>
+  );
+}
+
+function App() {
+  return (
+    <DesignCanvas
+      title="IRIS — redesign explorations"
+      subtitle="Three results-layout directions on an evolved warm-parchment system. Same data, same streaming-AI behavior, different scanning models."
+    >
+      <DCSection
+        id="system"
+        title="Design system shifts"
+        subtitle="What's the same, what's evolved"
+      >
+        <DCArtboard id="legend" label="System notes" width={520} height={760}>
+          <div style={{ padding: '24px 26px', fontFamily: 'Inter Tight, sans-serif', fontSize: 13, lineHeight: 1.55, color: 'var(--p-900)', background: 'var(--p-50)', height: '100%', overflow: 'auto' }}>
+            <h2 style={{ fontFamily: 'Source Serif 4, serif', fontSize: 22, margin: '0 0 4px', color: 'var(--p-950)', letterSpacing: '-0.01em' }}>What I changed</h2>
+            <p style={{ color: 'var(--p-700)', margin: '0 0 18px', fontSize: 12.5 }}>Same warm parchment soul. Sharper hierarchy, an iris-violet accent, and a built-in scanning aid (the fit meter).</p>
+
+            <h4 style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--iris-700)', margin: '0 0 8px' }}>Type</h4>
+            <p style={{ margin: '0 0 4px' }}>
+              <span style={{ fontFamily: 'Source Serif 4, serif', fontSize: 22, fontWeight: 600 }}>Source Serif 4</span>
+              <span style={{ color: 'var(--p-700)', fontSize: 12, marginLeft: 8 }}>headlines &amp; trial titles</span>
+            </p>
+            <p style={{ margin: '0 0 4px' }}>
+              <span style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 16, fontWeight: 500 }}>Inter Tight</span>
+              <span style={{ color: 'var(--p-700)', fontSize: 12, marginLeft: 8 }}>UI &amp; body</span>
+            </p>
+            <p style={{ margin: '0 0 18px' }}>
+              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13 }}>JetBrains Mono</span>
+              <span style={{ color: 'var(--p-700)', fontSize: 12, marginLeft: 8 }}>technical labels (echoes the privacy/local-AI ethos)</span>
+            </p>
+
+            <h4 style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--iris-700)', margin: '0 0 8px' }}>Color</h4>
+            <div style={{ display: 'flex', gap: 6, marginBottom: 4 }}>
+              {['var(--p-50)','var(--p-100)','var(--p-200)','var(--p-300)','var(--p-500)','var(--p-700)','var(--p-900)','var(--p-950)'].map(c => (
+                <div key={c} style={{ width: 36, height: 36, background: c, borderRadius: 4, border: '1px solid rgba(0,0,0,0.05)' }} />
+              ))}
+            </div>
+            <p style={{ margin: '0 0 12px', color: 'var(--p-700)', fontSize: 11 }}>parchment — kept &amp; lightly retuned</p>
+            <div style={{ display: 'flex', gap: 6, marginBottom: 4 }}>
+              {['var(--iris-50)','var(--iris-100)','var(--iris-300)','var(--iris-500)','var(--iris-700)','var(--iris-900)'].map(c => (
+                <div key={c} style={{ width: 36, height: 36, background: c, borderRadius: 4, border: '1px solid rgba(0,0,0,0.05)' }} />
+              ))}
+            </div>
+            <p style={{ margin: '0 0 18px', color: 'var(--p-700)', fontSize: 11 }}>iris — new, named for the namesake. CTA + AI accent.</p>
+
+            <h4 style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--iris-700)', margin: '0 0 8px' }}>New patterns</h4>
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+              <li><b>Fit meter</b> — visualizes how the user's described situation maps to eligibility. Three states: likely / may / unclear.</li>
+              <li><b>Streaming shimmer</b> — AI summary placeholders shimmer until tokens arrive, then fade in. Honest about latency.</li>
+              <li><b>Local-AI badge</b> — mono-set, always visible. Pulse dot when the model is working.</li>
+              <li><b>Unified search</b> — NL and structured form become one input with a mode toggle, not two stacked sections.</li>
+              <li><b>Compare</b> — pin up to 3 trials. Shared toolbar pill across variations.</li>
+              <li><b>Share / Save / Print</b> on every card. Save is session-only, no PII persisted.</li>
+            </ul>
+          </div>
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection
+        id="results"
+        title="Results layout — three directions"
+        subtitle="The primary concern was scanability. Each variation answers it differently."
+      >
+        <DCArtboard id="editorial" label="A · Editorial list" width={920} height={900}>
+          <EditorialVariation />
+        </DCArtboard>
+        <DCArtboard id="triage" label="B · Triage two-pane" width={1180} height={900}>
+          <TriageVariation />
+        </DCArtboard>
+        <DCArtboard id="dossier" label="C · Dossier grid" width={1100} height={900}>
+          <DossierVariation />
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection
+        id="mobile"
+        title="Mobile views — rebuilt for the form factor"
+        subtitle="Editorial works as-is on phone (single-column already). Triage and Dossier needed mobile-native rethinks: triage → tap-to-sheet, dossier → filter chips + collapsible cards. Sticky compare bar for both."
+      >
+        <DCArtboard id="editorial-m" label="A · Editorial (mobile) — direct port" width={390} height={760}>
+          <EditorialVariation />
+        </DCArtboard>
+        <DCArtboard id="triage-m" label="B · Triage (mobile) — list + bottom sheet" width={390} height={760}>
+          <MobileTriageVariation />
+        </DCArtboard>
+        <DCArtboard id="dossier-m" label="C · Dossier (mobile) — filter chips + collapsible" width={390} height={760}>
+          <MobileDossierVariation />
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection
+        id="shimmer"
+        title="AI streaming — what loading looks like"
+        subtitle="The local model evaluates trials serially, which takes time. Toggle between Queued and In-progress to see how the wait reads."
+      >
+        <DCArtboard id="shimmer" label="AI streaming states" width={760} height={900}>
+          <ShimmerShowcase />
+        </DCArtboard>
+      </DCSection>
+    </DesignCanvas>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>
diff --git a/IRIS Triage.html b/IRIS Triage.html
new file mode 100644
index 0000000..73b1a81
--- /dev/null
+++ b/IRIS Triage.html	
@@ -0,0 +1,431 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>IRIS — Triage prototype</title>
+<link rel="stylesheet" href="styles/tokens.css" />
+<style>
+  html, body { margin: 0; height: 100%; background: var(--p-50); }
+  body { font-family: var(--sans); color: var(--p-900); }
+
+  /* App-level layout */
+  .app {
+    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+    background: var(--p-50);
+  }
+
+  /* Mobile breakpoint switch */
+  @media (max-width: 820px) {
+    .triage-cols { grid-template-columns: 1fr !important; }
+    .triage-detail-pane { display: none !important; }
+    .triage-list-pane { border-right: none !important; }
+    .iris-search-detail { display: none !important; }
+  }
+
+  /* Sheet animation */
+  @keyframes iris-sheet-in {
+    from { transform: translateY(100%); }
+    to   { transform: translateY(0); }
+  }
+  .iris-sheet { animation: iris-sheet-in 280ms cubic-bezier(.2,.8,.2,1); }
+
+  /* Print */
+  @media print {
+    .no-print { display: none !important; }
+    .triage-detail-pane { overflow: visible !important; }
+  }
+</style>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+<div id="root"></div>
+
+<script type="text/babel" src="shared/iris-shared.jsx"></script>
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+
+<script type="text/babel" data-presets="react">
+const { useState, useEffect, useMemo } = React;
+
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "accent": "iris",
+  "density": "comfy",
+  "showFitMeter": true,
+  "showLocalAIBadge": true,
+  "summaryStyle": "bullets",
+  "listWidth": 400
+}/*EDITMODE-END*/;
+
+const ACCENT_MAP = {
+  iris:    { 50: 'oklch(0.96 0.015 290)', 100: 'oklch(0.92 0.03 290)', 300: 'oklch(0.78 0.06 290)', 500: 'oklch(0.55 0.10 290)', 600: 'oklch(0.46 0.10 290)', 700: 'oklch(0.38 0.08 290)' },
+  moss:    { 50: 'oklch(0.96 0.02 145)',  100: 'oklch(0.92 0.04 145)', 300: 'oklch(0.74 0.07 145)', 500: 'oklch(0.50 0.09 145)', 600: 'oklch(0.42 0.09 145)', 700: 'oklch(0.34 0.07 145)' },
+  rust:    { 50: 'oklch(0.96 0.02 40)',   100: 'oklch(0.92 0.04 40)',  300: 'oklch(0.74 0.10 40)',  500: 'oklch(0.55 0.13 40)',  600: 'oklch(0.46 0.13 40)',  700: 'oklch(0.38 0.10 40)' },
+  ink:     { 50: 'oklch(0.96 0.005 250)', 100: 'oklch(0.92 0.01 250)', 300: 'oklch(0.74 0.02 250)', 500: 'oklch(0.42 0.03 250)', 600: 'oklch(0.32 0.03 250)', 700: 'oklch(0.24 0.02 250)' },
+};
+
+function applyAccent(name) {
+  const a = ACCENT_MAP[name] || ACCENT_MAP.iris;
+  const r = document.documentElement.style;
+  r.setProperty('--iris-50',  a[50]);
+  r.setProperty('--iris-100', a[100]);
+  r.setProperty('--iris-300', a[300]);
+  r.setProperty('--iris-500', a[500]);
+  r.setProperty('--iris-600', a[600]);
+  r.setProperty('--iris-700', a[700]);
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Triage row
+function TriageRow({ trial, selected, comparing, onSelect, onToggleCompare, density, showFit }) {
+  const padY = density === 'compact' ? 10 : density === 'comfy' ? 18 : 14;
+  return (
+    <button
+      onClick={onSelect}
+      style={{
+        textAlign: 'left', width: '100%',
+        background: selected ? 'white' : 'transparent',
+        border: 'none',
+        borderLeft: selected ? '3px solid var(--iris-500)' : '3px solid transparent',
+        padding: `${padY}px 16px ${padY}px 14px`,
+        cursor: 'pointer',
+        display: 'flex', flexDirection: 'column', gap: 6,
+        boxShadow: selected ? 'var(--shadow-sm)' : 'none',
+        position: 'relative', transition: 'background 120ms',
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
+        <span style={{
+          fontFamily: 'var(--serif)', fontSize: 14.5, fontWeight: 600,
+          color: 'var(--p-950)', lineHeight: 1.3,
+          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
+        }}>{trial.title}</span>
+        <span
+          onClick={e => { e.stopPropagation(); onToggleCompare(); }}
+          style={{
+            flexShrink: 0, width: 18, height: 18, borderRadius: 4,
+            border: '1.5px solid', borderColor: comparing ? 'var(--iris-500)' : 'var(--p-400)',
+            background: comparing ? 'var(--iris-500)' : 'transparent',
+            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+          }}
+          title={comparing ? 'Remove from compare' : 'Add to compare'}
+        >
+          {comparing && (
+            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
+              <path d="M2.5 6.5l2.5 2.5L9.5 4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          )}
+        </span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+        {showFit && <FitMeter fit={trial.fit} size="sm" />}
+        <span style={{ fontSize: 11, color: 'var(--p-700)', fontFamily: 'var(--mono)' }}>
+          {trial.distanceMi} mi · {trial.phase}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+// Detail pane (desktop) / sheet body (mobile)
+function TriageDetail({ trial, showFit }) {
+  const sim = useStreamedSimplification(trial);
+  return (
+    <div style={{ padding: '24px 28px 32px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 6 }}>
+        <StatusPill status={trial.status} />
+        <ActionRow simple />
+      </div>
+      <h2 style={{
+        fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 600,
+        color: 'var(--p-950)', lineHeight: 1.2, letterSpacing: '-0.01em',
+        margin: '12px 0 8px',
+      }}>{trial.title}</h2>
+
+      <div style={{
+        fontSize: 12, color: 'var(--p-700)', fontFamily: 'var(--mono)',
+        display: 'flex', flexWrap: 'wrap', gap: '4px 14px', marginBottom: 18,
+      }}>
+        <span>{trial.phase}</span>
+        <span style={{ color: 'var(--p-300)' }}>·</span>
+        <span>{trial.facility}, {trial.city}</span>
+        <span style={{ color: 'var(--p-300)' }}>·</span>
+        <span>{trial.distanceMi} mi away</span>
+      </div>
+
+      {showFit && (
+        <div style={{
+          background: 'linear-gradient(180deg, var(--iris-50), white)',
+          border: '1px solid var(--iris-100)',
+          borderRadius: 12, padding: '16px 18px', marginBottom: 22,
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <FitMeter fit={trial.fit} />
+            <span style={{ fontSize: 11, color: 'var(--iris-700)', fontFamily: 'var(--mono)' }}>
+              based on what you described
+            </span>
+          </div>
+          <p style={{ margin: 0, fontSize: 14, color: 'var(--p-900)', lineHeight: 1.55 }}>
+            <StreamingText value={sim.plain.fitNote} status={sim.status} />
+          </p>
+        </div>
+      )}
+
+      {[
+        { label: 'What this study is testing', value: sim.plain.summary },
+        { label: 'Who can join', value: sim.plain.eligibility },
+      ].map(section => (
+        <div key={section.label} style={{ marginBottom: 18 }}>
+          <h4 style={{
+            fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600,
+            textTransform: 'uppercase', letterSpacing: '0.08em',
+            color: 'var(--p-700)', margin: '0 0 8px 0',
+          }}>{section.label}</h4>
+          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--p-900)', margin: 0 }}>
+            <StreamingText value={section.value} status={sim.status} placeholderLines={3} />
+          </p>
+        </div>
+      ))}
+
+      <div style={{
+        marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--p-200)',
+        display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13,
+      }}>
+        <div style={{ color: 'var(--p-700)', fontFamily: 'var(--mono)', fontSize: 11, marginBottom: 4 }}>
+          contact
+        </div>
+        <span style={{ color: 'var(--p-900)' }}>{trial.contact.phone}</span>
+        <a href={`mailto:${trial.contact.email}`} style={{ color: 'var(--iris-700)' }}>{trial.contact.email}</a>
+        <a href={trial.ctGovUrl} target="_blank" rel="noreferrer" style={{ color: 'var(--iris-700)', marginTop: 8, fontWeight: 500 }}>
+          View on ClinicalTrials.gov →
+        </a>
+      </div>
+    </div>
+  );
+}
+
+// Mobile bottom sheet for selected trial
+function MobileSheet({ trial, onClose, showFit }) {
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed', inset: 0, background: 'rgba(28, 24, 18, 0.45)',
+        display: 'flex', alignItems: 'flex-end', zIndex: 50,
+      }}
+    >
+      <div
+        className="iris-sheet"
+        onClick={e => e.stopPropagation()}
+        style={{
+          background: 'white', width: '100%', height: '92%',
+          borderTopLeftRadius: 18, borderTopRightRadius: 18,
+          display: 'flex', flexDirection: 'column', overflow: 'hidden',
+        }}
+      >
+        <div style={{ padding: '10px 0 4px', display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
+          <span style={{ width: 38, height: 4, borderRadius: 999, background: 'var(--p-300)' }} />
+        </div>
+        <div style={{
+          padding: '4px 18px 10px', flexShrink: 0,
+          display: 'flex', justifyContent: 'flex-end',
+        }}>
+          <button onClick={onClose} style={{
+            background: 'transparent', border: 'none', cursor: 'pointer',
+            color: 'var(--p-700)', fontSize: 13, padding: 4,
+          }}>Close</button>
+        </div>
+        <div style={{ flex: 1, overflow: 'auto' }}>
+          <TriageDetail trial={trial} showFit={showFit} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+
+function App() {
+  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+
+  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
+
+  const [selectedId, setSelectedId] = useState(MOCK_TRIALS[1].id);
+  const [compareSet, setCompareSet] = useState(new Set([MOCK_TRIALS[0].id]));
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth <= 820);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  const selected = useMemo(
+    () => MOCK_TRIALS.find(x => x.id === selectedId) || MOCK_TRIALS[0],
+    [selectedId]
+  );
+
+  const toggleCompare = (id) => setCompareSet(s => {
+    const n = new Set(s);
+    if (n.has(id)) n.delete(id); else if (n.size < 3) n.add(id);
+    return n;
+  });
+
+  const onSelectTrial = (id) => {
+    setSelectedId(id);
+    if (isMobile) setSheetOpen(true);
+  };
+
+  return (
+    <div className="app">
+      <IrisHeader />
+
+      {/* Search bar — hide its detail on mobile via CSS, header still shown */}
+      <div className="iris-search-detail">
+        <IrisSearchBar dense />
+      </div>
+
+      {/* Mobile-only compact search summary chip */}
+      {isMobile && (
+        <div style={{
+          padding: '12px 14px', borderBottom: '1px solid var(--p-200)',
+          background: 'var(--p-50)',
+        }}>
+          <div style={{
+            background: 'white', border: '1px solid var(--p-300)', borderRadius: 10,
+            padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13,
+          }}>
+            <svg width="14" height="14" viewBox="0 0 20 20" fill="none" style={{ color: 'var(--p-700)' }}>
+              <circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.5" />
+              <path d="m14 14 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+            <span style={{ color: 'var(--p-900)', flex: 1 }}>58yo · breast cancer · Boston</span>
+            <span style={{ fontSize: 11, color: 'var(--iris-700)' }}>edit</span>
+          </div>
+        </div>
+      )}
+
+      <ResultsToolbar
+        count={MOCK_TRIALS.length}
+        extra={compareSet.size > 0 && (
+          <button style={{
+            fontSize: 12, color: 'var(--iris-700)', background: 'var(--iris-50)',
+            border: '1px solid var(--iris-100)',
+            padding: '4px 12px', borderRadius: 999, cursor: 'pointer',
+            display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500,
+          }}>
+            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
+              <rect x="2" y="3" width="5" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" />
+              <rect x="9" y="3" width="5" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" />
+            </svg>
+            Compare {compareSet.size}
+          </button>
+        )}
+      />
+
+      {/* Two-pane (collapses to single column on mobile via CSS) */}
+      <div
+        className="triage-cols"
+        style={{
+          flex: 1, display: 'grid',
+          gridTemplateColumns: `${t.listWidth}px 1fr`,
+          overflow: 'hidden', minHeight: 0,
+        }}
+      >
+        <div
+          className="triage-list-pane"
+          style={{
+            borderRight: '1px solid var(--p-200)',
+            background: 'var(--p-100)',
+            overflow: 'auto', display: 'flex', flexDirection: 'column',
+          }}
+        >
+          {MOCK_TRIALS.map(trial => (
+            <div key={trial.id} style={{ borderBottom: '1px solid var(--p-200)' }}>
+              <TriageRow
+                trial={trial}
+                selected={!isMobile && trial.id === selectedId}
+                comparing={compareSet.has(trial.id)}
+                onSelect={() => onSelectTrial(trial.id)}
+                onToggleCompare={() => toggleCompare(trial.id)}
+                density={t.density}
+                showFit={t.showFitMeter}
+              />
+            </div>
+          ))}
+        </div>
+        <div
+          className="triage-detail-pane"
+          style={{ background: 'white', overflow: 'auto' }}
+        >
+          <TriageDetail trial={selected} showFit={t.showFitMeter} />
+        </div>
+      </div>
+
+      {/* Sticky compare bar on mobile */}
+      {isMobile && compareSet.size > 0 && (
+        <div className="no-print" style={{
+          background: 'white', borderTop: '1px solid var(--p-200)',
+          padding: '10px 14px',
+          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+          boxShadow: '0 -4px 16px rgba(28, 24, 18, 0.06)',
+        }}>
+          <span style={{ fontSize: 13, color: 'var(--p-900)' }}>
+            <b>{compareSet.size}</b> in compare
+          </span>
+          <button style={{
+            background: 'var(--iris-600)', color: 'white', border: 'none',
+            padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600,
+            cursor: 'pointer',
+          }}>Compare →</button>
+        </div>
+      )}
+
+      {isMobile && sheetOpen && (
+        <MobileSheet trial={selected} onClose={() => setSheetOpen(false)} showFit={t.showFitMeter} />
+      )}
+
+      <TweaksPanel>
+        <TweakSection label="Visual" />
+        <TweakColor
+          label="Accent"
+          value={t.accent}
+          options={['iris', 'moss', 'rust', 'ink']}
+          renderSwatch={(name) => ACCENT_MAP[name][500]}
+          onChange={(v) => setTweak('accent', v)}
+        />
+        <TweakRadio
+          label="Density"
+          value={t.density}
+          options={['compact', 'regular', 'comfy']}
+          onChange={(v) => setTweak('density', v)}
+        />
+        <TweakSlider
+          label="List width"
+          value={t.listWidth} min={280} max={460} step={10} unit="px"
+          onChange={(v) => setTweak('listWidth', v)}
+        />
+        <TweakSection label="Features" />
+        <TweakToggle
+          label="Fit meter"
+          value={t.showFitMeter}
+          onChange={(v) => setTweak('showFitMeter', v)}
+        />
+        <TweakToggle
+          label="Local-AI badge"
+          value={t.showLocalAIBadge}
+          onChange={(v) => setTweak('showLocalAIBadge', v)}
+        />
+      </TweaksPanel>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>
diff --git a/clinical-trial-finder-plan.md b/clinical-trial-finder-plan.md
new file mode 100644
index 0000000..0b32dfe
--- /dev/null
+++ b/clinical-trial-finder-plan.md
@@ -0,0 +1,244 @@
+# IRIS: A Privacy-First Clinical Trial Finder
+
+*Named for Iris Long (1934–), a pharmaceutical chemist who worked at Sloan-Kettering for eleven years and became a pivotal ACT-UP activist. She walked into an ACT-UP meeting in 1987 and told the room they didn't know anything about the science, the drugs, or how the system worked — then offered to teach anyone who wanted to learn. She founded the Treatment and Data Committee, organized the AIDS Treatment Registry, and dedicated herself to making clinical trial and treatment information accessible to the people who needed it most. Her work helped turn AIDS from a death sentence into a manageable condition.*
+
+## The Problem
+
+The existing ClinicalTrials.gov interface was built for researchers, not patients. It surfaces overwhelming amounts of technical jargon — ECOG performance status scores, MeSH terms, complex eligibility criteria — that creates a barrier for the people who need this information most. Conversations with ACT-UP members confirmed that finding relevant clinical trials remains a significant challenge for their community, particularly for people without medical backgrounds or institutional support.
+
+Communities that have historically had to fight for access to medical information deserve tools built with their needs and skepticism in mind.
+
+## The Vision
+
+IRIS is a fully open-source, privacy-first clinical trial discovery tool that runs entirely in the user's browser. No data is collected, no servers store queries, and no accounts are required. A fine-tuned small language model runs locally in the browser to translate between plain language and structured clinical trial searches, ensuring that a user's health information never leaves their computer.
+
+The core promise: **your health information never leaves your device — not because we promise, but because there is nowhere for it to go.**
+
+## Architecture
+
+### Design Principles
+
+- **Zero data persistence.** No database, no logs, no session storage, no cookies, no analytics of any kind.
+- **No server.** The application is a static site (HTML/JS/CSS) hosted on GitHub Pages. There is no backend to compromise.
+- **Local AI.** A fine-tuned, quantized language model runs in the browser via WebGPU/WebAssembly. Health information is processed on-device.
+- **Minimal network calls.** The only outbound requests are structured queries to the ClinicalTrials.gov public REST API — containing only clinical terms (e.g., `condition=breast+cancer&location=New+York`), not the user's raw input.
+- **Fully auditable.** The entire codebase is open source. Anyone can verify every claim about privacy.
+
+### System Components
+
+The application has three layers, each designed to function independently:
+
+**Layer 1 — Structured Search (No AI Required)**
+A clean, accessible form interface with dropdowns and text fields for condition, location, age, gender, phase preference, and intervention type. This layer works without any AI — it maps directly to ClinicalTrials.gov API query parameters. This is the default experience and the most trustworthy one.
+
+**Layer 2 — Natural Language Input (Local LLM)**
+An optional text box where users can describe their situation in their own words. A fine-tuned Gemma 2B model running locally in the browser via WebLLM parses the input into structured query parameters. The model performs entity extraction (conditions, biomarkers, demographics, location) and maps them to the same API parameters used by Layer 1. Users who are skeptical of AI can ignore this entirely and use the structured form.
+
+**Layer 3 — Plain-Language Results (Local LLM)**
+Raw trial data returned from ClinicalTrials.gov is passed through the local model to generate plain-language summaries. Technical eligibility criteria like "ECOG performance status 0-1" become "you need to be able to carry out daily activities without much difficulty." Phase descriptions, randomization, and intervention types are all explained in accessible language. A "show original" toggle lets users see the raw trial data alongside the simplified version for full transparency.
+
+### Data Flow
+
+```
+User types health description
+        │
+        ▼
+[Local Gemma 2B in browser]
+        │
+        ▼
+Structured query parameters
+(condition, location, age, etc.)
+        │
+        ▼
+ClinicalTrials.gov Public API  ◄── only network call, contains no personal narrative
+        │
+        ▼
+Raw trial JSON response
+        │
+        ▼
+[Local Gemma 2B in browser]
+        │
+        ▼
+Plain-language trial cards
+displayed to user
+```
+
+### Technology Stack
+
+- **Frontend:** React single-page application, static build, hosted on GitHub Pages
+- **Local LLM:** WebLLM with fine-tuned Gemma 2B (quantized to int4), loaded from CDN and cached in browser
+- **Trial Data:** ClinicalTrials.gov v2 REST API (public, no authentication required)
+- **Build/Deploy:** Vite + GitHub Actions, automatic deployment on push
+- **Installable:** Progressive Web App (PWA) — after first visit, the app and model are cached and can work offline (except for fetching new trial data)
+
+### Accessibility and Inclusion
+
+- Mobile-first responsive design — not everyone has a laptop
+- Screen reader compatible (ARIA labels, semantic HTML, keyboard navigation)
+- Multilingual support as a future goal — the local LLM could be fine-tuned for Spanish, Mandarin, and other languages
+- Low-bandwidth friendly — the model downloads once and is cached; subsequent visits load instantly
+- No account or email required — zero friction to use
+
+## Fine-Tuning the Local Model
+
+### Overview
+
+The browser-deployed model is a fine-tuned Gemma 2B (or Gemma 4 1B) optimized for two narrow tasks:
+
+1. **Input Parsing:** Extract structured clinical trial search parameters from natural language patient descriptions
+2. **Output Simplification:** Rewrite raw clinical trial text (eligibility criteria, study descriptions, intervention details) into plain language accessible to a non-medical audience
+
+Fine-tuning a small model on these constrained tasks yields much better performance than prompting a general-purpose 2B model, while keeping the model small enough to run in a browser tab on consumer hardware.
+
+### Training Data Generation
+
+Training data is generated entirely on local hardware to avoid API costs and keep the workflow self-contained.
+
+**Hardware:**
+- Primary: RTX 5080 (16GB VRAM) running a Q4-quantized 27B model (Gemma 2 27B or Gemma 3 27B) via llama.cpp
+- Secondary: RTX 3060 Ti available for parallel generation or evaluation runs
+
+**Source Data:**
+- Bulk download of 10,000–20,000 trials from the ClinicalTrials.gov v2 API, sampled across diverse conditions, phases, locations, and intervention types
+- Emphasis on conditions relevant to underserved communities (HIV/AIDS, cancers with demographic disparities, rare diseases)
+
+**Task 1 — Input Parsing Training Pairs**
+
+The 27B model generates synthetic patient descriptions from structured trial data, then the training pair is the description → structured output. The generation prompt instructs the 27B to create varied, realistic patient descriptions at different literacy levels and verbosity, including colloquial language, misspellings, and non-medical phrasing.
+
+Example training pair:
+
+```
+Input:  "im a 52 yr old black woman in brooklyn, diagnosed with
+         triple negative breast cancer last year, already did chemo
+         but its back"
+
+Output: {
+  "condition": "triple negative breast cancer",
+  "age": 52,
+  "gender": "female",
+  "race": "black",
+  "location": "Brooklyn, NY",
+  "prior_treatment": ["chemotherapy"],
+  "status": "recurrent"
+}
+```
+
+**Task 2 — Output Simplification Training Pairs**
+
+The 27B model takes raw trial eligibility criteria and study descriptions and rewrites them in plain language. The generation prompt emphasizes accuracy (never misrepresent what a trial requires), completeness (don't omit important criteria), and clarity (assume a high school reading level).
+
+Example training pair:
+
+```
+Input:  "Inclusion Criteria: Age >= 18; ECOG performance status 0-1;
+         Histologically confirmed HER2-positive breast cancer;
+         Measurable disease per RECIST v1.1; Adequate organ function
+         as defined by: ANC >= 1500/uL, platelets >= 100,000/uL,
+         total bilirubin <= 1.5x ULN"
+
+Output: "Who can join: You must be 18 or older and able to carry out
+         your normal daily activities without much difficulty. You need
+         a confirmed diagnosis of HER2-positive breast cancer with
+         tumors that can be measured on a scan. Your blood work needs
+         to show that your liver, kidneys, and blood cell counts are
+         in a healthy range — your doctor can check this with standard
+         lab tests."
+```
+
+**Generation Workflow:**
+
+1. Pull trial data from ClinicalTrials.gov API and store as JSON
+2. Write generation prompts for each task (input parsing and output simplification)
+3. Run the 27B model via llama.cpp in batch mode overnight on the 5080
+4. Post-process outputs: validate JSON structure for Task 1, basic quality filtering for Task 2
+5. Manual review of a random subset (~200 examples per task) to catch systematic errors
+6. Adjust prompts and re-generate if quality issues are found
+7. Target: 5,000–10,000 training pairs per task
+
+**Quality Assurance:**
+
+- Hold out 10% of generated data as a test set
+- Generate a small "gold standard" comparison set (~200–500 examples) using a frontier model (Claude batch API, ~$10–20) to benchmark local generation quality
+- Domain review leveraging institutional knowledge of clinical terminology from MSK
+- Automated validation: JSON schema checks for Task 1, readability scoring (Flesch-Kincaid) for Task 2
+
+### Fine-Tuning Process
+
+**Method:** QLoRA (Quantized Low-Rank Adaptation)
+- Keeps the base model weights frozen and trains small adapter matrices
+- Dramatically reduces memory requirements — the full fine-tune runs comfortably on 16GB VRAM
+- Adapter weights are small (10–50MB), making them easy to ship alongside the app
+
+**Tools:**
+- Hugging Face `transformers` + `peft` + `trl` for the training loop, or Unsloth for optimized throughput
+- Base model: `google/gemma-2-2b-it` or `google/gemma-3-1b-it`(instruction-tuned variant)
+- 4-bit quantization via bitsandbytes during training
+
+**Training Configuration (Starting Point):**
+- LoRA rank: 16–32
+- LoRA alpha: 32–64
+- Learning rate: 2e-4 with cosine schedule
+- Batch size: 4–8 (gradient accumulation as needed)
+- Epochs: 3–5 (monitor eval loss for early stopping)
+- Training time estimate: 2–4 hours on the RTX 5080
+
+**Multi-Task Training:**
+Both tasks (input parsing and output simplification) are trained together by prepending a task identifier token to each example. This keeps a single model and single set of LoRA weights for both capabilities.
+
+### Evaluation Framework
+
+Evaluation is structured similarly to a RAG evaluation pipeline, with automated metrics and human review:
+
+**Input Parsing Evaluation:**
+- Exact match rate on extracted fields (condition, age, location, gender)
+- Partial match scoring for conditions (did it get close even if not exact?)
+- MeSH term mapping accuracy — does the extracted condition map to the correct ClinicalTrials.gov vocabulary?
+- Error categorization: missed fields, hallucinated fields, misinterpreted values
+
+**Output Simplification Evaluation:**
+- Factual accuracy: does the plain-language version correctly represent the original criteria? (Scored by comparing against 27B or Claude-generated reference summaries)
+- Readability: Flesch-Kincaid grade level targeting 8th grade or below
+- Completeness: are important eligibility criteria preserved or dropped?
+- Safety check: does the simplification ever make a trial sound more permissive than it actually is? (Critical failure mode)
+
+**Iteration Cycle:**
+1. Train → Evaluate → Identify failure categories → Generate targeted training data for those categories → Retrain
+2. Each cycle can run in a single day on local hardware
+3. Target 3–5 iteration cycles before initial deployment
+
+### Browser Deployment
+
+After fine-tuning:
+
+1. Merge LoRA adapters into the base model
+2. Quantize to int4 using the MLC-LLM or llama.cpp quantization pipeline
+3. Convert to the WebLLM-compatible format (MLC weight format)
+4. Host the quantized model weights on a CDN (GitHub LFS, Hugging Face Hub, or Cloudflare R2)
+5. WebLLM loads the model into the browser on first visit, caches it via the Cache API (~1–2GB for a quantized 2B model)
+6. Subsequent visits load the model from cache — no download needed
+
+## Roadmap
+
+**Phase 1 — Structured Search MVP**
+Build the static site with the structured form interface (Layer 1). No AI, just a well-designed frontend that queries ClinicalTrials.gov directly. Ship it, get feedback from ACT-UP members.
+
+**Phase 2 — Training Data Pipeline**
+Pull trial data, write generation prompts, generate synthetic training data on local hardware. Build the evaluation framework.
+
+**Phase 3 — Fine-Tune and Integrate**
+Train the model, evaluate, iterate. Integrate WebLLM into the app for natural language input (Layer 2) and plain-language results (Layer 3).
+
+**Phase 4 — Community Testing**
+Share with ACT-UP members and patient advocates. Collect feedback on result quality, usability, and trust. Use feedback to generate additional training data for edge cases.
+
+**Phase 5 — Hardening**
+PWA support for offline use. Accessibility audit. Performance optimization. Multilingual fine-tuning.
+
+## Guiding Principles
+
+- **Trust is earned through transparency, not promises.** Open source everything. Let the architecture speak for itself.
+- **The tool works without AI.** AI is an enhancement, not a requirement. Skeptical users lose nothing.
+- **Medical accuracy is non-negotiable.** A misleading simplification is worse than the original jargon. When in doubt, show both.
+- **Build with the community, not for them.** ACT-UP members should be collaborators, testers, and co-designers, not just end users.
+- **This is information access, not medical advice.** The tool helps people find trials. Decisions happen with their doctors.
diff --git a/iris-cowork-prompt.md b/iris-cowork-prompt.md
new file mode 100644
index 0000000..3b14f67
--- /dev/null
+++ b/iris-cowork-prompt.md
@@ -0,0 +1,158 @@
+# Cowork Prompt: Build IRIS — Clinical Trial Finder MVP
+
+## Context
+
+Build a static, privacy-first clinical trial search web application called **IRIS**, named after Iris Long — a pharmaceutical chemist who worked at Sloan-Kettering and became a key ACT-UP activist in the 1980s. Her greatest contribution was translating complex clinical trial and drug information into language that patients and activists could understand. This tool continues that mission.
+
+IRIS helps people find relevant clinical trials by providing a clean, accessible interface to ClinicalTrials.gov's public API, with optional AI-powered natural language input and plain-language result summaries — all running entirely in the user's browser with zero data collection.
+
+## What to Build (Phase 1 — Structured Search MVP)
+
+Build a React single-page application with the following:
+
+### Landing Page
+- Clean, minimal design. Warm but professional. Not clinical or cold.
+- A brief dedication to Iris Long explaining who she was and why the tool is named after her. Something like: "Named for Iris Long (1934–), a pharmaceutical chemist and ACT-UP activist who dedicated her career to making clinical trial information accessible to the people who needed it most."
+- A clear, prominent privacy statement in plain language: "Your information never leaves your device. IRIS collects no data, uses no cookies, requires no account, and has no tracking. The only network request is a structured search query to ClinicalTrials.gov's public database."
+- Direct entry into the search interface — no signup, no onboarding, no friction.
+
+### Search Interface (Layer 1 — No AI)
+A structured form with the following fields:
+- **Condition/Disease** — text input with common condition suggestions
+- **Location** — text input (city, state, or zip code) with distance radius selector (25mi, 50mi, 100mi, 200mi, anywhere)
+- **Age** — number input
+- **Gender** — select (any, male, female)
+- **Phase** — multi-select checkboxes (Phase 1, Phase 2, Phase 3, Phase 4, any)
+- **Recruitment Status** — select (recruiting, not yet recruiting, all)
+- **Search button**
+
+All fields optional except condition. The form maps directly to ClinicalTrials.gov v2 API query parameters.
+
+### Natural Language Input (Layer 2 — Future, stub only for now)
+Below the structured form, include a collapsed/expandable section:
+- "Or, describe your situation in your own words"
+- A text area with placeholder text like: "Example: I'm a 52 year old woman in Brooklyn with triple negative breast cancer. I've already done chemotherapy but it came back."
+- A note: "This feature uses a small AI model that runs entirely in your browser. Your words are never sent to any server."
+- **For Phase 1, this section should be visible but disabled with a "Coming soon" badge.** Do not integrate WebLLM yet — just build the UI shell so the design accounts for it.
+
+### Results Display
+When results come back from ClinicalTrials.gov:
+- Display as cards, not a table
+- Each card shows:
+  - **Trial title** — rewritten to be more human-readable if possible (strip excessive acronyms, capitalize properly)
+  - **What it's studying** — brief intervention/treatment description
+  - **Status** — recruiting, not yet recruiting, etc. with a colored badge
+  - **Phase** — with a plain-language tooltip explaining what phases mean
+  - **Location(s)** — nearest site to the user's specified location, with distance if possible
+  - **Who can join** — a brief summary of key eligibility criteria (age range, gender, key inclusion points)
+  - **Contact** — phone/email from the trial record if available
+  - **Link** — "View full details on ClinicalTrials.gov" linking to the trial's page
+- Pagination or infinite scroll for large result sets
+- A count of total results found
+- Sort options: relevance, distance, most recently updated
+
+### Phase Explainer
+Include a small, accessible reference that explains clinical trial phases in plain language:
+- Phase 1: Testing safety and dosage in a small group
+- Phase 2: Testing whether the treatment works and studying side effects
+- Phase 3: Comparing the treatment to existing standard treatments in a large group
+- Phase 4: Monitoring long-term safety after the treatment is approved
+
+### Footer
+- Link to the GitHub repository
+- "IRIS is not medical advice. Always discuss clinical trial options with your healthcare provider."
+- "IRIS is open source and collects no data."
+- A link to learn more about Iris Long and ACT-UP
+
+## Technical Requirements
+
+### Stack
+- **React** (Vite for build tooling)
+- **No backend.** This is a fully static site.
+- **No database, no cookies, no localStorage for user data, no analytics.**
+- **ClinicalTrials.gov v2 API** — `https://clinicaltrials.gov/api/v2/studies` — all queries go directly from the browser. Handle CORS if needed (the API may support CORS directly; if not, note this as a deployment consideration).
+- **Styling:** Tailwind CSS or a minimal CSS approach. No heavy component libraries. The design should feel human and approachable, not like a medical portal or a Silicon Valley SaaS app.
+- **Responsive/mobile-first.** Many users will access this on phones.
+- **Accessible:** Proper ARIA labels, keyboard navigation, semantic HTML, sufficient color contrast.
+- PWA manifest for future offline support (include the manifest now, full offline support comes later).
+
+### ClinicalTrials.gov API Integration
+The v2 API endpoint is: `https://clinicaltrials.gov/api/v2/studies`
+
+Key query parameters to use:
+- `query.cond` — condition/disease
+- `query.locn` — location
+- `filter.overallStatus` — recruitment status (RECRUITING, NOT_YET_RECRUITING, etc.)
+- `filter.phase` — phase filter
+- `filter.sex` — sex/gender filter
+- `filter.age` — age eligibility
+- `pageSize` — results per page (default 10, max 100)
+- `pageToken` — pagination
+- `sort` — sort order
+- `fields` — specify which fields to return to minimize response size
+
+Return fields to request: NCTId, BriefTitle, OfficialTitle, OverallStatus, Phase, BriefSummary, EligibilityCriteria, InterventionName, InterventionType, LocationCity, LocationState, LocationCountry, LocationFacility, CentralContactName, CentralContactPhone, CentralContactEMail, MinimumAge, MaximumAge, Sex, EnrollmentCount, StartDate, CompletionDate, LastUpdatePostDate
+
+### Error Handling
+- If the API is unreachable, show a friendly message: "We couldn't reach ClinicalTrials.gov right now. This might be a temporary issue — please try again in a few minutes."
+- If no results are found, suggest broadening search criteria with specific suggestions (remove location filter, try different condition phrasing, include all phases).
+- Handle rate limiting gracefully.
+
+### Project Structure
+```
+iris/
+├── public/
+│   ├── manifest.json
+│   └── favicon (use an iris flower or similar)
+├── src/
+│   ├── components/
+│   │   ├── SearchForm.jsx
+│   │   ├── NaturalLanguageInput.jsx  (stub/disabled)
+│   │   ├── ResultCard.jsx
+│   │   ├── ResultsList.jsx
+│   │   ├── PhaseExplainer.jsx
+│   │   ├── PrivacyStatement.jsx
+│   │   ├── Header.jsx
+│   │   ├── Footer.jsx
+│   │   └── DedicationBanner.jsx
+│   ├── hooks/
+│   │   └── useClinicalTrials.js (API query hook)
+│   ├── utils/
+│   │   └── apiHelpers.js (query parameter mapping, response parsing)
+│   ├── App.jsx
+│   ├── main.jsx
+│   └── index.css
+├── package.json
+├── vite.config.js
+├── tailwind.config.js
+└── README.md
+```
+
+## Design Direction
+
+The visual design should feel:
+- **Warm and trustworthy** — not clinical white with blue accents (that's every hospital portal). Consider warm neutrals, soft purples or teals, generous whitespace.
+- **Simple and unintimidating** — a person in crisis should be able to use this without cognitive overload.
+- **Text-forward** — the content is what matters, not decorative elements.
+- **Clearly not commercial** — no "sign up" CTAs, no premium tiers, no upsells. This is a public good.
+
+Inspiration: think of it as a tool Iris Long herself would have wanted to build — practical, no-nonsense, focused entirely on getting information to people who need it.
+
+## README
+
+The project README should include:
+- What IRIS is and why it exists
+- The dedication to Iris Long with historical context about her role in ACT-UP
+- How the privacy architecture works (explained plainly)
+- How to run locally (`npm install && npm run dev`)
+- How to contribute
+- The project roadmap (structured search → local LLM integration → fine-tuned model → multilingual support)
+- License: MIT
+- A note that this is not medical advice
+
+## What NOT to Build Yet
+- Do NOT integrate WebLLM or any AI model — just build the UI shell for it
+- Do NOT add any server-side component
+- Do NOT add authentication or user accounts
+- Do NOT add analytics, tracking, or telemetry of any kind
+- Do NOT use localStorage to persist user searches or preferences
diff --git a/shared/iris-shared.jsx b/shared/iris-shared.jsx
new file mode 100644
index 0000000..ed90d44
--- /dev/null
+++ b/shared/iris-shared.jsx
@@ -0,0 +1,478 @@
+/* global React */
+// Shared mock data — three realistic trials that demonstrate different states:
+// recruiting / streaming / completed simplification, with varying eligibility fit.
+
+const MOCK_USER = {
+  description: "I'm 58 years old with breast cancer in Boston",
+  fields: { condition: 'breast cancer', location: 'Boston', age: 58, sex: 'FEMALE' },
+};
+
+const MOCK_TRIALS = [
+  {
+    id: 'NCT05952557',
+    title: 'Phase IIIb Study of Ribociclib + ET in Early Breast Cancer',
+    status: 'RECRUITING',
+    phase: 'Phase 3',
+    facility: 'Boston Medical Center',
+    city: 'Boston',
+    state: 'MA',
+    distanceMi: 0.1,
+    intervention: 'Ribociclib + endocrine therapy',
+    enrollmentCount: 4000,
+    fit: 'strong', // strong | partial | weak
+    fitReason: 'HR-positive postmenopausal patients 50–65 — your description matches.',
+    rawSummary:
+      "This is a Phase IIIb open-label study evaluating ribociclib in combination with endocrine therapy in postmenopausal women with HR-positive, HER2-negative early breast cancer following definitive locoregional therapy.",
+    rawEligibility:
+      "Adult female, ≥18 years. HR-positive, HER2-negative breast cancer. Completed surgery. Postmenopausal status. ECOG 0-1. Adequate organ function. No prior CDK4/6 inhibitor.",
+    plain: {
+      summary:
+        "This study tests if adding ribociclib (a targeted cancer drug) to standard hormone treatment helps prevent breast cancer from coming back after surgery.",
+      eligibility:
+        "You may qualify if you're an adult woman who's had surgery for HR-positive, HER2-negative breast cancer. You can't have taken a CDK4/6 inhibitor before.",
+      fitNote:
+        "This trial is looking for HR-positive, HER2-negative breast cancer after surgery. You said you're 58 with breast cancer — to know for sure, ask your oncologist whether yours is HR-positive and HER2-negative.",
+    },
+    contact: { phone: '+1 617-555-0142', email: 'trials@bmc.org' },
+    ctGovUrl: 'https://clinicaltrials.gov/study/NCT05952557',
+  },
+  {
+    id: 'NCT06104020',
+    title: 'Sacituzumab Govitecan in Metastatic Triple-Negative Breast Cancer',
+    status: 'RECRUITING',
+    phase: 'Phase 2',
+    facility: 'Dana-Farber Cancer Institute',
+    city: 'Boston',
+    state: 'MA',
+    distanceMi: 1.4,
+    intervention: 'Sacituzumab govitecan',
+    enrollmentCount: 220,
+    fit: 'partial',
+    fitReason: 'TNBC subtype required — depends on your tumor profile.',
+    rawSummary:
+      "Phase II evaluation of sacituzumab govitecan in patients with metastatic triple-negative breast cancer who have received at least one prior line of systemic therapy.",
+    rawEligibility:
+      "Adult, any sex. Metastatic TNBC confirmed. Prior chemotherapy. ECOG 0-2. Measurable disease per RECIST 1.1.",
+    plain: null, // streaming state — populated by app at runtime
+    contact: { phone: '+1 617-555-0298', email: 'breast-trials@dfci.org' },
+    ctGovUrl: 'https://clinicaltrials.gov/study/NCT06104020',
+  },
+  {
+    id: 'NCT05887492',
+    title: 'Adaptive Radiation Boost in Locally Advanced HER2+ Breast Cancer',
+    status: 'RECRUITING',
+    phase: 'Phase 2',
+    facility: 'Massachusetts General Hospital',
+    city: 'Boston',
+    state: 'MA',
+    distanceMi: 1.7,
+    intervention: 'Adaptive radiation therapy',
+    enrollmentCount: 95,
+    fit: 'partial',
+    fitReason: 'Requires HER2-positive subtype and prior chemo.',
+    rawSummary:
+      "Single-arm Phase II trial of adaptive MR-guided boost radiation in HER2-positive locally advanced breast cancer following neoadjuvant chemotherapy.",
+    rawEligibility:
+      "Adult female. HER2-positive breast cancer. Stage II-III. Completed neoadjuvant chemotherapy. ECOG 0-1.",
+    plain: {
+      summary:
+        "This study tests a more precise form of radiation that adjusts in real time, for women whose breast cancer has grown into nearby tissue and is HER2-positive.",
+      eligibility:
+        "You may qualify if you're an adult woman with HER2-positive breast cancer that has spread to nearby tissue and you've finished chemotherapy before surgery.",
+      fitNote:
+        "This trial requires HER2-positive cancer specifically. If your cancer is HR-positive instead of HER2-positive, this one likely isn't a fit.",
+    },
+    contact: { phone: '+1 617-555-0411', email: 'rad-onc-trials@mgh.harvard.edu' },
+    ctGovUrl: 'https://clinicaltrials.gov/study/NCT05887492',
+  },
+  {
+    id: 'NCT06221340',
+    title: 'Aerobic Exercise During Adjuvant Chemo for Breast Cancer Survivors',
+    status: 'RECRUITING',
+    phase: 'N/A',
+    facility: 'Beth Israel Deaconess',
+    city: 'Boston',
+    state: 'MA',
+    distanceMi: 2.3,
+    intervention: 'Supervised aerobic exercise program',
+    enrollmentCount: 180,
+    fit: 'strong',
+    fitReason: 'Open to most breast cancer patients in active treatment.',
+    rawSummary:
+      "Behavioral intervention study examining the impact of supervised aerobic exercise on chemotherapy tolerance and quality of life in breast cancer patients undergoing adjuvant treatment.",
+    rawEligibility:
+      "Adult, any sex. Breast cancer, any stage. Currently receiving or scheduled for adjuvant chemotherapy. Cleared by oncologist for moderate exercise.",
+    plain: {
+      summary:
+        "This study looks at whether a supervised exercise program helps people tolerate chemotherapy better and feel more like themselves during treatment.",
+      eligibility:
+        "You may qualify if you have breast cancer at any stage and you're receiving (or about to start) chemotherapy after surgery, and your oncologist says exercise is safe for you.",
+      fitNote:
+        "This trial is broadly open — it doesn't require a specific subtype. If you're starting or in chemotherapy, it could be a fit alongside another treatment trial.",
+    },
+    contact: { phone: '+1 617-555-0560', email: 'exercise-study@bidmc.harvard.edu' },
+    ctGovUrl: 'https://clinicaltrials.gov/study/NCT06221340',
+  },
+  {
+    id: 'NCT05790474',
+    title: 'Datopotamab Deruxtecan vs. Chemo in HR+/HER2- Breast Cancer',
+    status: 'RECRUITING',
+    phase: 'Phase 3',
+    facility: 'Brigham and Women\u2019s Hospital',
+    city: 'Boston',
+    state: 'MA',
+    distanceMi: 1.2,
+    intervention: 'Datopotamab deruxtecan',
+    enrollmentCount: 700,
+    fit: 'strong',
+    fitReason: 'HR-positive, HER2-low or negative — common subtype at your age.',
+    rawSummary:
+      "Randomized Phase III study comparing datopotamab deruxtecan (Dato-DXd) to investigator's choice chemotherapy in patients with inoperable or metastatic HR-positive, HER2-low or negative breast cancer.",
+    rawEligibility:
+      "Adult. HR+, HER2-low or HER2-negative breast cancer. Inoperable or metastatic. 1-2 prior chemo regimens for advanced disease. ECOG 0-1.",
+    plain: {
+      summary:
+        "This study compares a newer antibody-drug therapy against standard chemotherapy in people with advanced HR-positive breast cancer.",
+      eligibility:
+        "You may qualify if you have HR-positive breast cancer that's advanced or has spread, and you've already had one or two rounds of chemotherapy for it.",
+      fitNote:
+        "This is for advanced or metastatic HR-positive disease that's been treated before. If your cancer is early stage or recently diagnosed, the first trial here is more likely your fit.",
+    },
+    contact: { phone: '+1 617-555-0823', email: 'dana-trials@bwh.harvard.edu' },
+    ctGovUrl: 'https://clinicaltrials.gov/study/NCT05790474',
+  },
+];
+
+// Simulate the streaming token-by-token reveal that the real app produces.
+// Components opt in by passing a trial whose plain==null and calling useStreamedSimplification.
+function useStreamedSimplification(trial, { delayMs = 700, charsPerTick = 4 } = {}) {
+  const [state, setState] = React.useState(() => {
+    if (trial.plain) return { status: 'complete', plain: trial.plain };
+    return { status: 'queued', plain: { summary: '', eligibility: '', fitNote: '' } };
+  });
+
+  React.useEffect(() => {
+    if (trial.plain) return;
+    const target = {
+      summary:
+        "This study tests a newer targeted drug for triple-negative breast cancer that has spread, in patients who've already had at least one chemotherapy.",
+      eligibility:
+        "You may qualify if you have triple-negative breast cancer that has spread to other parts of the body, and you've had at least one round of chemotherapy already.",
+      fitNote:
+        "This trial is for triple-negative breast cancer that has spread. To know if it fits, you'll need to confirm your tumor's HR/HER2 status with your oncologist.",
+    };
+    let i = 0;
+    let cancelled = false;
+    const start = setTimeout(function tick() {
+      if (cancelled) return;
+      i += charsPerTick;
+      const total = target.summary.length + target.eligibility.length + target.fitNote.length;
+      const summary = target.summary.slice(0, Math.min(i, target.summary.length));
+      let rest = i - target.summary.length;
+      const eligibility = rest > 0 ? target.eligibility.slice(0, Math.min(rest, target.eligibility.length)) : '';
+      rest = rest - target.eligibility.length;
+      const fitNote = rest > 0 ? target.fitNote.slice(0, rest) : '';
+      setState({ status: i >= total ? 'complete' : 'streaming', plain: { summary, eligibility, fitNote } });
+      if (i < total) setTimeout(tick, 32);
+    }, delayMs);
+    return () => { cancelled = true; clearTimeout(start); };
+  }, [trial.id]);
+
+  return state;
+}
+
+// Status pill
+function StatusPill({ status }) {
+  const map = {
+    RECRUITING: { bg: 'var(--signal-good-bg)', fg: 'var(--signal-good)', label: 'Recruiting' },
+    NOT_YET_RECRUITING: { bg: 'var(--signal-warn-bg)', fg: 'var(--signal-warn)', label: 'Not yet recruiting' },
+    COMPLETED: { bg: 'var(--p-200)', fg: 'var(--p-700)', label: 'Completed' },
+  };
+  const m = map[status] || map.RECRUITING;
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      background: m.bg, color: m.fg,
+      fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
+      padding: '4px 10px', borderRadius: 999,
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: 999, background: m.fg }} />
+      {m.label}
+    </span>
+  );
+}
+
+// Fit meter — the new differentiator. Visualizes how the patient's described
+// situation maps to the trial's eligibility, using the simplifier output.
+function FitMeter({ fit, size = 'md' }) {
+  const map = {
+    strong:  { bars: 3, label: 'Likely fit', color: 'var(--signal-good)' },
+    partial: { bars: 2, label: 'May fit',     color: 'var(--signal-warn)' },
+    weak:    { bars: 1, label: 'Unclear fit', color: 'var(--p-500)' },
+  };
+  const m = map[fit] || map.weak;
+  const barH = size === 'sm' ? 6 : 9;
+  const barW = size === 'sm' ? 3 : 4;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }} aria-label={m.label}>
+      <span style={{ display: 'inline-flex', gap: 2, alignItems: 'flex-end' }}>
+        {[1, 2, 3].map(n => (
+          <span key={n} style={{
+            width: barW, height: barH * (0.5 + n * 0.25),
+            background: n <= m.bars ? m.color : 'var(--p-300)',
+            borderRadius: 1,
+          }} />
+        ))}
+      </span>
+      <span style={{
+        fontSize: size === 'sm' ? 11 : 12,
+        color: m.color, fontWeight: 600, letterSpacing: '0.01em',
+      }}>{m.label}</span>
+    </span>
+  );
+}
+
+// Local-AI badge — front-and-center about the privacy story.
+function LocalAIBadge({ active = false, label = 'Gemma 2 2B · on-device' }) {
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--iris-700)',
+      background: 'var(--iris-50)', border: '1px solid var(--iris-100)',
+      padding: '3px 8px', borderRadius: 999,
+    }}>
+      <span
+        className={active ? 'iris-pulse' : ''}
+        style={{
+          width: 6, height: 6, borderRadius: 999,
+          background: active ? 'var(--iris-500)' : 'var(--iris-300)',
+        }}
+      />
+      {label}
+    </span>
+  );
+}
+
+// Header used by all variations — single, dense, with privacy chip.
+function IrisHeader({ compact = false }) {
+  return (
+    <header style={{
+      padding: compact ? '14px 24px' : '20px 28px',
+      borderBottom: '1px solid var(--p-200)',
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
+        <span style={{
+          fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 26,
+          letterSpacing: '-0.02em', color: 'var(--p-950)',
+        }}>iris</span>
+        <span style={{
+          fontFamily: 'var(--serif)', fontStyle: 'italic',
+          color: 'var(--p-700)', fontSize: 13,
+        }}>clinical trial finder</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span title="Your data never leaves the device" style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6,
+          fontSize: 11, color: 'var(--p-700)',
+          fontFamily: 'var(--mono)',
+        }}>
+          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+            <path d="M3 5V3.5a3 3 0 1 1 6 0V5M2.5 5h7v5h-7z" stroke="currentColor" strokeWidth="1" strokeLinejoin="round" />
+          </svg>
+          on-device only
+        </span>
+        <LocalAIBadge />
+      </div>
+    </header>
+  );
+}
+
+// Search bar (unified) used by all variations
+function IrisSearchBar({ user = MOCK_USER, dense = false }) {
+  return (
+    <div style={{
+      borderBottom: '1px solid var(--p-200)',
+      background: 'var(--p-50)',
+    }}>
+      <div style={{ padding: dense ? '14px 24px' : '20px 28px 18px' }}>
+        {/* Mode toggle */}
+        <div style={{ display: 'flex', gap: 4, marginBottom: 12 }}>
+          {['Describe in your words', 'Structured form'].map((m, i) => (
+            <button key={m} type="button" style={{
+              padding: '6px 12px', fontSize: 12, fontWeight: 500,
+              background: i === 0 ? 'var(--p-100)' : 'transparent',
+              color: i === 0 ? 'var(--p-950)' : 'var(--p-700)',
+              border: '1px solid', borderColor: i === 0 ? 'var(--p-300)' : 'transparent',
+              borderRadius: 999, cursor: 'pointer',
+            }}>
+              {m}
+              {i === 0 && (
+                <span style={{
+                  marginLeft: 8, fontSize: 10, padding: '1px 6px',
+                  background: 'var(--iris-100)', color: 'var(--iris-700)',
+                  borderRadius: 999, fontFamily: 'var(--mono)',
+                }}>AI · on-device</span>
+              )}
+            </button>
+          ))}
+        </div>
+
+        <div style={{
+          background: 'white', border: '1px solid var(--p-300)', borderRadius: 12,
+          display: 'flex', alignItems: 'flex-start', gap: 12, padding: '14px 16px',
+          boxShadow: 'var(--shadow-sm)',
+        }}>
+          <svg width="18" height="18" viewBox="0 0 20 20" fill="none" style={{ marginTop: 2, color: 'var(--p-700)', flexShrink: 0 }}>
+            <circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.5" />
+            <path d="m14 14 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+          <div style={{ flex: 1, fontSize: 15, color: 'var(--p-900)', lineHeight: 1.4 }}>
+            {user.description}
+          </div>
+          <button style={{
+            background: 'var(--iris-600)', color: 'white',
+            border: 'none', borderRadius: 8, padding: '8px 14px',
+            fontSize: 13, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
+          }}>Find trials</button>
+        </div>
+
+        {/* Understood chips */}
+        <div style={{
+          display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8,
+          marginTop: 10, fontSize: 12,
+        }}>
+          <span style={{ color: 'var(--p-700)', fontFamily: 'var(--mono)', fontSize: 11 }}>
+            understood:
+          </span>
+          {Object.entries({ condition: user.fields.condition, location: user.fields.location, age: user.fields.age }).map(([k, v]) => (
+            <span key={k} style={{
+              background: 'white', border: '1px solid var(--p-300)',
+              borderRadius: 6, padding: '2px 8px',
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+            }}>
+              <span style={{
+                fontFamily: 'var(--mono)', fontSize: 10,
+                color: 'var(--p-500)', textTransform: 'uppercase', letterSpacing: '0.04em',
+              }}>{k}</span>
+              <span style={{ color: 'var(--p-950)', fontWeight: 500 }}>{v}</span>
+            </span>
+          ))}
+          <button style={{
+            marginLeft: 'auto', background: 'transparent', border: 'none',
+            color: 'var(--iris-700)', fontSize: 12, cursor: 'pointer',
+            textDecoration: 'underline', textUnderlineOffset: 3,
+          }}>edit details</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Result count + sort controls (shared)
+function ResultsToolbar({ count = 20, sort = 'best-fit', onSort, extra }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      padding: '14px 28px', borderBottom: '1px solid var(--p-200)', flexWrap: 'wrap', gap: 12,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+        <span style={{
+          fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 600, color: 'var(--p-950)',
+        }}>{count} trials</span>
+        <span style={{ fontSize: 12, color: 'var(--p-700)' }}>
+          near Boston · within 50 mi · recruiting
+        </span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        {extra}
+        <span style={{ fontSize: 12, color: 'var(--p-700)' }}>sort by</span>
+        <select defaultValue={sort} onChange={e => onSort?.(e.target.value)} style={{
+          background: 'white', border: '1px solid var(--p-300)', borderRadius: 6,
+          padding: '4px 10px', fontSize: 12, color: 'var(--p-900)',
+        }}>
+          <option value="best-fit">Best fit</option>
+          <option value="distance">Distance</option>
+          <option value="phase">Phase</option>
+          <option value="recent">Most recent</option>
+        </select>
+      </div>
+    </div>
+  );
+}
+
+// Action row — share, save, print (compare lives in toolbar)
+function ActionRow({ onCompare, comparing, simple }) {
+  const btn = {
+    background: 'transparent', border: 'none', cursor: 'pointer',
+    color: 'var(--p-700)', fontSize: 12, padding: '4px 6px',
+    display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 6,
+  };
+  return (
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+      <button style={btn} title="Copy share link">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M5 8a3 3 0 0 1 3-3h2a3 3 0 0 1 0 6H8M11 8a3 3 0 0 1-3 3H6a3 3 0 0 1 0-6h2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>
+        Share
+      </button>
+      <button style={btn} title="Save for later (this session)">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M4 3h8v11l-4-2.5L4 14V3z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" /></svg>
+        Save
+      </button>
+      <button style={btn} title="Print this trial">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M4 6V3h8v3M4 11H3V7h10v4h-1M5 9h6v5H5z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" /></svg>
+        Print
+      </button>
+      {!simple && (
+        <button onClick={onCompare} style={{
+          ...btn,
+          color: comparing ? 'var(--iris-700)' : 'var(--p-700)',
+          background: comparing ? 'var(--iris-50)' : 'transparent',
+        }}>
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="5" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" /><rect x="9" y="3" width="5" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" /></svg>
+          {comparing ? 'In compare' : 'Compare'}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// Streaming text with shimmer placeholder
+function StreamingText({ value, status, placeholderLines = 2 }) {
+  if (status === 'queued') {
+    // Rendered inside <p> in some call sites — keep everything inline-level.
+    return (
+      <span style={{ display: 'inline' }}>
+        {Array.from({ length: placeholderLines }).map((_, i) => (
+          <span
+            key={i}
+            className="iris-shimmer-text"
+            style={{
+              display: 'block',
+              height: 14,
+              width: i === placeholderLines - 1 ? '70%' : '100%',
+              marginTop: i === 0 ? 0 : 6,
+            }}
+          >&nbsp;</span>
+        ))}
+      </span>
+    );
+  }
+  return (
+    <span className="iris-fadein" style={{ whiteSpace: 'pre-wrap' }}>
+      {value}
+      {status === 'streaming' && (
+        <span style={{
+          display: 'inline-block', width: 7, height: 14, marginLeft: 2,
+          background: 'var(--iris-500)', verticalAlign: 'text-bottom',
+          animation: 'iris-pulse 1s ease-in-out infinite',
+        }} />
+      )}
+    </span>
+  );
+}
+
+Object.assign(window, {
+  MOCK_USER, MOCK_TRIALS, useStreamedSimplification,
+  StatusPill, FitMeter, LocalAIBadge, IrisHeader, IrisSearchBar,
+  ResultsToolbar, ActionRow, StreamingText,
+});

From 9f35dc65bfc67f6bb9289b8e307885a45c14178c Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:32:02 -0400
Subject: [PATCH 08/17] fix(a11y): row title heading + sheet focus management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two regressions noticed during the design refresh:

1. Each trial row title was demoted from <h3> (old card) to a plain
   <span> inside the row button. Screen reader users navigating by
   heading lost the per-trial structure of the list. Restore <h3> —
   inside a <button> the heading still reads as part of the button
   label, but heading navigation works again.

2. MobileSheet did not move focus on open or restore it on close.
   Keyboard users could Tab past the open sheet into the page behind
   the backdrop, and on close their focus dropped to <body>. Now: on
   open, focus the Close button and remember the prior focus owner; on
   close, restore focus to whatever opened the sheet (typically the
   triggering row).
---
 src/components/MobileSheet.jsx | 19 +++++++++++++++++--
 src/components/TriageRow.jsx   |  6 +++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/MobileSheet.jsx b/src/components/MobileSheet.jsx
index c2086e7..820e6ca 100644
--- a/src/components/MobileSheet.jsx
+++ b/src/components/MobileSheet.jsx
@@ -1,8 +1,18 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 export default function MobileSheet({ open, onClose, children, label }) {
+  const closeButtonRef = useRef(null)
+  // Track who had focus before the sheet opened so we can hand it back on
+  // close — without this, focus drops to <body> and keyboard users lose
+  // their place in the list.
+  const previousFocusRef = useRef(null)
+
   useEffect(() => {
     if (!open) return
+
+    previousFocusRef.current = document.activeElement
+    closeButtonRef.current?.focus()
+
     const onKey = (e) => {
       if (e.key === 'Escape') onClose()
     }
@@ -12,6 +22,10 @@ export default function MobileSheet({ open, onClose, children, label }) {
     return () => {
       document.removeEventListener('keydown', onKey)
       document.body.style.overflow = prevOverflow
+      const prev = previousFocusRef.current
+      if (prev && typeof prev.focus === 'function') {
+        prev.focus()
+      }
     }
   }, [open, onClose])
 
@@ -41,9 +55,10 @@ export default function MobileSheet({ open, onClose, children, label }) {
         </div>
         <div className="px-4 pb-2 flex justify-end shrink-0">
           <button
+            ref={closeButtonRef}
             type="button"
             onClick={onClose}
-            className="text-[13px] text-parchment-700 hover:text-parchment-950 px-1.5 py-1"
+            className="text-[13px] text-parchment-700 hover:text-parchment-950 px-1.5 py-1 focus:outline-none focus:ring-2 focus:ring-iris-500 rounded"
           >
             Close
           </button>
diff --git a/src/components/TriageRow.jsx b/src/components/TriageRow.jsx
index 8c5219b..da37199 100644
--- a/src/components/TriageRow.jsx
+++ b/src/components/TriageRow.jsx
@@ -41,8 +41,8 @@ export default function TriageRow({
         aria-current={selected ? 'true' : undefined}
         className="flex-1 text-left px-4 py-[18px] flex flex-col gap-1.5 cursor-pointer min-w-0"
       >
-        <span
-          className="font-serif font-semibold text-[14.5px] text-parchment-950 leading-snug overflow-hidden"
+        <h3
+          className="font-serif font-semibold text-[14.5px] text-parchment-950 leading-snug overflow-hidden m-0"
           style={{
             display: '-webkit-box',
             WebkitLineClamp: 2,
@@ -50,7 +50,7 @@ export default function TriageRow({
           }}
         >
           {trial.title}
-        </span>
+        </h3>
         <span className="font-mono text-[11px] text-parchment-700 flex flex-wrap gap-x-1.5">
           {nearest?.distanceMi != null && <span>{nearest.distanceMi} mi</span>}
           {nearest?.distanceMi != null && phase && <span aria-hidden="true">·</span>}

From 5e572ebf58d6565435ed13cd382380399f701356 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:36:14 -0400
Subject: [PATCH 09/17] feat(design): real mode toggle in unified search bar

Replace the always-visible NL-collapsed-above-form layout with a real
mode toggle matching the prototype. Only one input is visible at a
time; the other is hidden via the tabpanel hidden attribute.

- New UnifiedSearchBar wraps the two existing inputs with a tab pattern
  (role="tablist" / role="tab" / role="tabpanel" + aria-selected).
  Tabs: "Describe in your own words" with mono "AI . on-device" badge,
  and "Structured form".
- NaturalLanguageInput grows an embedded prop. When embedded: starts
  expanded, drops its own outer chrome (the wrapper provides it), and
  no longer renders its own toggle button.
- SearchForm grows the same embedded prop. When embedded: drops its own
  bg/border/heading and uses the wrapper padding.
- After a successful NL extraction the wrapper auto-flips to the form
  tab so the user can verify and submit the prefilled fields.
- PrivacyStatement deleted from above-the-fold and from disk. Privacy
  is now communicated via the header on-device chip + footer
  disclosure, removing the visual seam between header and search.
- App.jsx composition simplified: Header -> UnifiedSearchBar ->
  ResultsList -> Footer.
---
 src/App.jsx                             | 12 ++--
 src/components/NaturalLanguageInput.jsx | 48 ++++++++-------
 src/components/PrivacyStatement.jsx     | 30 ---------
 src/components/SearchForm.jsx           | 19 ++++--
 src/components/UnifiedSearchBar.jsx     | 81 +++++++++++++++++++++++++
 5 files changed, 128 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/PrivacyStatement.jsx
 create mode 100644 src/components/UnifiedSearchBar.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 77a9f7c..83666b7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,7 @@
 import { lazy, Suspense, useState } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import Header from './components/Header'
-import PrivacyStatement from './components/PrivacyStatement'
-import SearchForm from './components/SearchForm'
-import NaturalLanguageInput from './components/NaturalLanguageInput'
+import UnifiedSearchBar from './components/UnifiedSearchBar'
 import ResultsList from './components/ResultsList'
 import Footer from './components/Footer'
 import { resolveModelKey } from './utils/nlpModels'
@@ -68,10 +66,12 @@ function IrisApp() {
   return (
     <div className="min-h-screen bg-parchment-50 flex flex-col">
       <Header />
-      <PrivacyStatement />
       <main className="flex-1 flex flex-col min-h-0">
-        <NaturalLanguageInput onExtract={handleExtract} />
-        <SearchForm onSearch={setSearchParams} prefill={prefill} />
+        <UnifiedSearchBar
+          onExtract={handleExtract}
+          onSearch={setSearchParams}
+          prefill={prefill}
+        />
         {searchParams && (
           <ResultsList
             searchParams={searchParams}
diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index c51388a..912a9cc 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -4,8 +4,8 @@ import { NLP_MODELS, resolveModelKey } from '../utils/nlpModels'
 
 const STORAGE_KEY = 'iris_nlp_enabled'
 
-export default function NaturalLanguageInput({ onExtract }) {
-  const [expanded, setExpanded] = useState(false)
+export default function NaturalLanguageInput({ onExtract, embedded = false }) {
+  const [expanded, setExpanded] = useState(embedded)
   const [text, setText] = useState('')
   const [extracted, setExtracted] = useState(null)
   const [consented, setConsented] = useState(() => {
@@ -82,28 +82,34 @@ export default function NaturalLanguageInput({ onExtract }) {
     ? 'bg-parchment-200 text-parchment-700'
     : 'bg-iris-100 text-iris-700'
 
+  const outerClass = embedded
+    ? 'px-4 sm:px-7 pt-2 pb-4'
+    : 'bg-parchment-50 border-b border-parchment-200 px-6 py-3'
+
   return (
-    <div className="bg-parchment-50 border-b border-parchment-200 px-6 py-3">
-      <button
-        type="button"
-        className={[
-          'inline-flex items-center gap-2 text-[12px] font-medium rounded-full px-3 py-1.5 transition-colors',
-          expanded
-            ? 'bg-parchment-100 text-parchment-950 border border-parchment-300'
-            : 'text-parchment-700 hover:text-parchment-950 hover:bg-parchment-100 border border-transparent',
-        ].join(' ')}
-        onClick={() => setExpanded(e => !e)}
-        aria-expanded={expanded}
-        aria-controls="nlp-panel"
-      >
-        <span>Describe in your own words</span>
-        <span className={`font-mono text-[10px] px-1.5 py-px rounded-full ${badgeClass}`}>
-          {badgeLabel ?? 'AI · on-device'}
-        </span>
-      </button>
+    <div className={outerClass}>
+      {!embedded && (
+        <button
+          type="button"
+          className={[
+            'inline-flex items-center gap-2 text-[12px] font-medium rounded-full px-3 py-1.5 transition-colors',
+            expanded
+              ? 'bg-parchment-100 text-parchment-950 border border-parchment-300'
+              : 'text-parchment-700 hover:text-parchment-950 hover:bg-parchment-100 border border-transparent',
+          ].join(' ')}
+          onClick={() => setExpanded(e => !e)}
+          aria-expanded={expanded}
+          aria-controls="nlp-panel"
+        >
+          <span>Describe in your own words</span>
+          <span className={`font-mono text-[10px] px-1.5 py-px rounded-full ${badgeClass}`}>
+            {badgeLabel ?? 'AI · on-device'}
+          </span>
+        </button>
+      )}
 
       {expanded && (
-        <div id="nlp-panel" className="mt-3 max-w-xl">
+        <div id="nlp-panel" className={embedded ? 'max-w-2xl' : 'mt-3 max-w-xl'}>
           {/* WebGPU unavailable */}
           {!webGPUSupported && (
             <div className="bg-parchment-50 border border-parchment-300 rounded-md p-3">
diff --git a/src/components/PrivacyStatement.jsx b/src/components/PrivacyStatement.jsx
deleted file mode 100644
index 57cd66d..0000000
--- a/src/components/PrivacyStatement.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-export default function PrivacyStatement() {
-  return (
-    <div className="border-b border-parchment-200 px-6 py-2 bg-parchment-50">
-      <details className="group text-xs text-parchment-800">
-        <summary className="cursor-pointer inline-flex items-center gap-1.5 select-none">
-          <span
-            aria-hidden="true"
-            className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-iris-50 text-iris-700"
-          >
-            <svg width="9" height="9" viewBox="0 0 12 12" fill="none">
-              <path
-                d="M3 5V3.5a3 3 0 1 1 6 0V5M2.5 5h7v5h-7z"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </span>
-          <span className="font-mono text-[11px] text-iris-700">on-device only</span>
-          <span className="text-parchment-700">— what this means</span>
-        </summary>
-        <p className="mt-2 ml-[22px] max-w-2xl leading-relaxed">
-          Your information never leaves your device. IRIS collects no data, uses no cookies,
-          requires no account, and has no tracking. The only network request is a structured
-          search query to ClinicalTrials.gov&apos;s public database.
-        </p>
-      </details>
-    </div>
-  )
-}
diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx
index 4c7216e..d3a7379 100644
--- a/src/components/SearchForm.jsx
+++ b/src/components/SearchForm.jsx
@@ -9,7 +9,7 @@ const PHASES = [
 
 const RADII = ['25', '50', '100', '200']
 
-export default function SearchForm({ onSearch, prefill }) {
+export default function SearchForm({ onSearch, prefill, embedded = false }) {
   const [condition, setCondition] = useState('')
   const [location, setLocation] = useState('')
   const [radius, setRadius] = useState('50')
@@ -65,10 +65,19 @@ export default function SearchForm({ onSearch, prefill }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-parchment-50 border-b border-parchment-200 px-4 sm:px-6 py-4 sm:py-5">
-      <h2 className="font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-parchment-700 mb-4">
-        find clinical trials
-      </h2>
+    <form
+      onSubmit={handleSubmit}
+      className={
+        embedded
+          ? 'px-4 sm:px-7 pt-2 pb-4'
+          : 'bg-parchment-50 border-b border-parchment-200 px-4 sm:px-6 py-4 sm:py-5'
+      }
+    >
+      {!embedded && (
+        <h2 className="font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-parchment-700 mb-4">
+          find clinical trials
+        </h2>
+      )}
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
         <div className="lg:col-span-2">
diff --git a/src/components/UnifiedSearchBar.jsx b/src/components/UnifiedSearchBar.jsx
new file mode 100644
index 0000000..bab1a78
--- /dev/null
+++ b/src/components/UnifiedSearchBar.jsx
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import NaturalLanguageInput from './NaturalLanguageInput'
+import SearchForm from './SearchForm'
+
+const MODES = [
+  { id: 'nl', label: 'Describe in your own words', badge: 'AI · on-device' },
+  { id: 'form', label: 'Structured form' },
+]
+
+export default function UnifiedSearchBar({ onExtract, onSearch, prefill }) {
+  // When NL extraction succeeds we auto-flip to the structured form so the
+  // user can verify / edit the prefilled fields before searching.
+  const [mode, setMode] = useState('nl')
+
+  function handleExtract(payload) {
+    onExtract(payload)
+    setMode('form')
+  }
+
+  return (
+    <div className="bg-parchment-50 border-b border-parchment-200">
+      <div
+        className="px-4 sm:px-7 pt-4 pb-1 flex flex-wrap gap-1"
+        role="tablist"
+        aria-label="Search input mode"
+      >
+        {MODES.map(m => {
+          const active = mode === m.id
+          return (
+            <button
+              key={m.id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              aria-controls={`search-panel-${m.id}`}
+              id={`search-tab-${m.id}`}
+              onClick={() => setMode(m.id)}
+              className={[
+                'inline-flex items-center gap-2 text-[12px] font-medium rounded-full px-3 py-1.5 transition-colors',
+                active
+                  ? 'bg-parchment-100 text-parchment-950 border border-parchment-300'
+                  : 'text-parchment-700 hover:text-parchment-950 hover:bg-parchment-100 border border-transparent',
+              ].join(' ')}
+            >
+              <span>{m.label}</span>
+              {m.badge && (
+                <span
+                  className={[
+                    'font-mono text-[10px] px-1.5 py-px rounded-full',
+                    active ? 'bg-iris-100 text-iris-700' : 'bg-parchment-200 text-parchment-700',
+                  ].join(' ')}
+                >
+                  {m.badge}
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </div>
+
+      <div
+        id="search-panel-nl"
+        role="tabpanel"
+        aria-labelledby="search-tab-nl"
+        hidden={mode !== 'nl'}
+      >
+        {mode === 'nl' && <NaturalLanguageInput onExtract={handleExtract} embedded />}
+      </div>
+      <div
+        id="search-panel-form"
+        role="tabpanel"
+        aria-labelledby="search-tab-form"
+        hidden={mode !== 'form'}
+      >
+        {mode === 'form' && (
+          <SearchForm onSearch={onSearch} prefill={prefill} embedded />
+        )}
+      </div>
+    </div>
+  )
+}

From 6a5d6056e0d180d8e89cab3e8b6eefe02db6c601 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:46:08 -0400
Subject: [PATCH 10/17] feat(nlp): allow typing during model download with
 queued submit

The textarea was hidden until the model finished downloading, which
meant a user landing on the NL tab had to stare at a progress bar for
20-60s before they could even start composing. Now:

- The input renders as soon as consent is given (download / ready /
  extracting all show the same input). The textarea is fully editable
  during download.
- The progress bar now sits below the input in a thin one-line layout
  with mono caption + "one-time" label, so it's clearly secondary.
- Submit during download queues the intent (pendingSubmit state). When
  status flips to ready, an effect drains the queue and runs the
  extraction immediately. Button label reflects state: "Find trials"
  -> "Run when ready" (download in progress, no queue) -> "Queued..."
  (download in progress, queued) -> "Extracting...".
- Refactor: extracted runExtraction() so handleSubmit and the
  drain-on-ready effect share one path.
---
 src/components/NaturalLanguageInput.jsx | 106 +++++++++++++++++-------
 1 file changed, 75 insertions(+), 31 deletions(-)

diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index 912a9cc..b16f916 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -26,6 +26,10 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
   const [confirmingClear, setConfirmingClear] = useState(false)
   const [clearing, setClearing] = useState(false)
   const [clearError, setClearError] = useState(null)
+  // If the user submits while the model is still downloading, hold the
+  // intent and auto-fire when status flips to ready. Lets typing happen
+  // in parallel with the one-time download.
+  const [pendingSubmit, setPendingSubmit] = useState(false)
 
   // Auto-load model on expand if user previously consented
   useEffect(() => {
@@ -61,8 +65,7 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
     }
   }
 
-  async function handleSubmit(e) {
-    e.preventDefault()
+  async function runExtraction() {
     if (!text.trim()) return
     const fields = await extract(text.trim())
     setExtracted(fields)
@@ -71,6 +74,29 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
     }
   }
 
+  async function handleSubmit(e) {
+    e.preventDefault()
+    if (!text.trim()) return
+    if (status !== 'ready') {
+      // Model still downloading (or in some other transient state) — queue
+      // the submit so it auto-fires when ready.
+      setPendingSubmit(true)
+      return
+    }
+    setPendingSubmit(false)
+    await runExtraction()
+  }
+
+  // Drain a queued submit the moment the model becomes ready.
+  useEffect(() => {
+    if (status !== 'ready') return
+    if (!pendingSubmit) return
+    if (!text.trim()) { setPendingSubmit(false); return }
+    setPendingSubmit(false)
+    runExtraction()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, pendingSubmit])
+
   function getProgressLabel() {
     if (!progress) return 'Downloading AI model…'
     if (progress.text) return progress.text
@@ -152,29 +178,9 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
             </div>
           )}
 
-          {/* Downloading / initialising */}
-          {webGPUSupported && consented && status === 'downloading' && (
-            <div>
-              <p className="text-sm text-parchment-800 italic mb-2">{getProgressLabel()}</p>
-              <div
-                className="bg-parchment-200 rounded-full h-1.5 overflow-hidden"
-                role="progressbar"
-                aria-valuemin={0}
-                aria-valuemax={100}
-                aria-valuenow={Math.round((progress?.progress ?? 0) * 100)}
-              >
-                <div
-                  className="bg-iris-500 h-1.5 rounded-full transition-all"
-                  style={{ width: `${Math.round((progress?.progress ?? 0) * 100)}%` }}
-                />
-              </div>
-              <p className="text-xs text-parchment-700 mt-1">This only happens once.</p>
-            </div>
-          )}
-
           {/* Error state */}
           {status === 'error' && (
-            <div className="bg-parchment-50 border border-parchment-400 rounded-md p-3">
+            <div className="bg-parchment-50 border border-parchment-400 rounded-md p-3 mb-3">
               <p className="text-sm text-parchment-900">
                 Something went wrong —{' '}
                 <button type="button" onClick={handleConsent} className="underline">
@@ -184,8 +190,11 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
             </div>
           )}
 
-          {/* Ready / extracting */}
-          {webGPUSupported && consented && (status === 'ready' || status === 'extracting') && (
+          {/* Input — available as soon as consent is given. The textarea
+              accepts typing while the model downloads in the background; the
+              submit button enables once status === 'ready'. If the user hits
+              submit during download, we queue and auto-fire on ready. */}
+          {webGPUSupported && consented && (status === 'downloading' || status === 'ready' || status === 'extracting') && (
             <>
               <form onSubmit={handleSubmit}>
                 <div className="bg-white border border-parchment-300 rounded-xl shadow-sm flex items-start gap-3 px-4 py-3.5">
@@ -208,16 +217,51 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
                   />
                   <button
                     type="submit"
-                    disabled={status === 'extracting' || !text.trim()}
+                    disabled={!text.trim() || status === 'extracting'}
                     className="bg-iris-600 text-white px-3.5 py-2 rounded-md text-[13px] font-semibold hover:bg-iris-700 disabled:opacity-50 shrink-0"
                   >
-                    {status === 'extracting' ? 'Extracting…' : 'Find trials'}
+                    {status === 'extracting'
+                      ? 'Extracting…'
+                      : pendingSubmit
+                        ? 'Queued…'
+                        : status === 'downloading'
+                          ? 'Run when ready'
+                          : 'Find trials'}
                   </button>
                 </div>
-                <p className="mt-2 font-mono text-[11px] text-parchment-700">
-                  IRIS extracts condition, location, age, and other details automatically.
-                  {' '}<span className="text-parchment-500">model: {model.label}</span>
-                </p>
+
+                {status === 'downloading' && (
+                  <div className="mt-2">
+                    <div className="flex items-center justify-between gap-3 mb-1">
+                      <p className="font-mono text-[11px] text-parchment-700">
+                        {getProgressLabel()}
+                        {pendingSubmit && (
+                          <span className="text-iris-700"> · search queued, runs when ready</span>
+                        )}
+                      </p>
+                      <p className="font-mono text-[11px] text-parchment-500 shrink-0">one-time</p>
+                    </div>
+                    <div
+                      className="bg-parchment-200 rounded-full h-1 overflow-hidden"
+                      role="progressbar"
+                      aria-valuemin={0}
+                      aria-valuemax={100}
+                      aria-valuenow={Math.round((progress?.progress ?? 0) * 100)}
+                    >
+                      <div
+                        className="bg-iris-500 h-1 rounded-full transition-all"
+                        style={{ width: `${Math.round((progress?.progress ?? 0) * 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {status !== 'downloading' && (
+                  <p className="mt-2 font-mono text-[11px] text-parchment-700">
+                    IRIS extracts condition, location, age, and other details automatically.
+                    {' '}<span className="text-parchment-500">model: {model.label}</span>
+                  </p>
+                )}
               </form>
 
               {/* Clear local data — the model is the only thing IRIS stores

From 2f51ed5c6c2dfcb17b6d566431ee1a1e3777e421 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:48:35 -0400
Subject: [PATCH 11/17] fix: manifest 404 + surface model size during download
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html referenced /iris/manifest.json and /iris/favicon.svg, but
  Vite already prepends base: '/iris/' so the actual served URLs were
  /iris/iris/* and 404'd. The 404 returned an HTML error page, which
  the browser tried to parse as JSON manifest, producing the
  "Manifest: Line 1, column 1, Syntax error" console message. Drop the
  manual /iris/ prefix; Vite handles it.
- Show model size next to the "one-time" caption during download
  ("~1.3 GB · one-time") so users understand why the first load isn't
  instant. Bandwidth is the actual bottleneck — WebLLM streams as fast
  as the connection allows — so the best we can do at the app level
  is set expectations.
---
 index.html                              | 4 ++--
 src/components/NaturalLanguageInput.jsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 1660076..baecf8c 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/iris/favicon.svg" />
-    <link rel="manifest" href="/iris/manifest.json" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="theme-color" content="#7c6f5e" />
     <meta name="description" content="Privacy-first clinical trial finder. Find relevant clinical trials from ClinicalTrials.gov. No data collection." />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index b16f916..24ecc21 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -239,7 +239,9 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
                           <span className="text-iris-700"> · search queued, runs when ready</span>
                         )}
                       </p>
-                      <p className="font-mono text-[11px] text-parchment-500 shrink-0">one-time</p>
+                      <p className="font-mono text-[11px] text-parchment-500 shrink-0">
+                        {model.sizeLabel} · one-time
+                      </p>
                     </div>
                     <div
                       className="bg-parchment-200 rounded-full h-1 overflow-hidden"

From a1106b3d43932306e5156eea7a68f852c7a917eb Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 20:51:43 -0400
Subject: [PATCH 12/17] fix(dev): pin dev server to port 5173 to preserve
 WebLLM cache

WebLLM caches the model in IndexedDB keyed by origin. If Vite bounces
to a different port (5173 -> 5174 when the primary is busy) the
browser sees a new origin and re-downloads ~1.3 GB. Pin to 5173 with
strictPort so a port collision errors loudly instead of silently
moving and busting the cache.
---
 vite.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vite.config.js b/vite.config.js
index 2acd086..b53fa6a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,11 @@ const nodeMajor = Number(process.versions.node.split('.')[0])
 export default defineConfig({
   plugins: [react()],
   base: '/iris/',
+  // Pin dev server to a fixed port + strictPort so a flaky restart
+  // doesn't bounce to a different port. WebLLM caches the model in
+  // IndexedDB keyed by origin; a port change forces a fresh ~1.3 GB
+  // download.
+  server: { port: 5173, strictPort: true },
   test: {
     globals: true,
     environment: 'jsdom',

From 7916ea9dfa16b1a33b795932050b09b88473eb28 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 21:09:49 -0400
Subject: [PATCH 13/17] fix(nlp): null detachRef on unmount so StrictMode
 remount re-subscribes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mount-effect cleanup in useNLP and useSimplifier called
detachRef.current?.() to remove the worker listener but left the ref
itself pointing at the (now-stale) detach function. Under React
StrictMode dev double-invoke the next call to ensureSubscribed saw
detachRef.current was truthy and skipped re-attaching. Result: after
the StrictMode remount, NO listener was attached for either hook, so
the worker's 'ready' / 'progress' / 'result' messages were forwarded
to an empty Set and the component sat at status='downloading' forever
even after the engine was loaded.

Surfaced because the new queued-submit flow exposed it: the user
could submit during download and watch "Queued..." never resolve.
The bug was latent before — production builds don't run StrictMode
double-invoke, hence the deployed site working fine.

Fix is one line per hook: set detachRef.current = null after detaching.
ensureSubscribed's `if (detachRef.current) return` guard now correctly
distinguishes "still subscribed" from "previously subscribed, then
unmounted".

Also strips the temporary diagnostic logging added to trace this.
---
 src/components/NaturalLanguageInput.jsx |  2 --
 src/hooks/useNLP.js                     |  6 ++++++
 src/hooks/useSimplifier.js              |  7 ++++++-
 src/workers/nlp.worker.js               | 15 +++++++++------
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index 24ecc21..ca87734 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -78,8 +78,6 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
     e.preventDefault()
     if (!text.trim()) return
     if (status !== 'ready') {
-      // Model still downloading (or in some other transient state) — queue
-      // the submit so it auto-fires when ready.
       setPendingSubmit(true)
       return
     }
diff --git a/src/hooks/useNLP.js b/src/hooks/useNLP.js
index 36c792e..c7d14b6 100644
--- a/src/hooks/useNLP.js
+++ b/src/hooks/useNLP.js
@@ -15,7 +15,13 @@ export function useNLP() {
 
   useEffect(() => {
     return () => {
+      // Detach this instance's listener AND null the ref so the next mount
+      // re-subscribes. Without nulling, React StrictMode's dev-only
+      // mount→unmount→remount sequence would leave detachRef.current
+      // truthy and ensureSubscribed would skip re-attaching, dropping
+      // every message (including 'ready') from the second mount onward.
       detachRef.current?.()
+      detachRef.current = null
       // Worker is owned at module scope and may be in use by useSimplifier;
       // do NOT terminate on unmount. The shared worker preserves the loaded
       // model across NLP panel toggles.
diff --git a/src/hooks/useSimplifier.js b/src/hooks/useSimplifier.js
index 0d012f9..5d8809e 100644
--- a/src/hooks/useSimplifier.js
+++ b/src/hooks/useSimplifier.js
@@ -205,7 +205,12 @@ export function useSimplifier({ modelKey, userDescription, extractedFields }) {
   }, [])
 
   useEffect(() => {
-    return () => { detachRef.current?.() }
+    return () => {
+      // Same StrictMode-safe pattern as useNLP: null the ref so the next
+      // mount re-attaches via ensureSubscribed.
+      detachRef.current?.()
+      detachRef.current = null
+    }
   }, [])
 
   return { states, enqueueSummarize, enqueueAssessFit, cancelPending, resetCache }
diff --git a/src/workers/nlp.worker.js b/src/workers/nlp.worker.js
index f15f79d..259237b 100644
--- a/src/workers/nlp.worker.js
+++ b/src/workers/nlp.worker.js
@@ -126,12 +126,15 @@ self.onmessage = async (event) => {
       const request = {
         messages: [{ role: 'user', content: prompt }],
         max_tokens: type === 'summarize' ? 500 : 250,
-        // Summarize uses temperature 0 (greedy) because faithfulness to the
-        // source matters more than fluency variation — fabrications drop
-        // significantly at low temperatures. Assess-fit keeps a small
-        // temperature so its hedging language ("may", "might") doesn't
-        // collapse into a single deterministic phrase across trials.
-        temperature: type === 'summarize' ? 0 : 0.2,
+        // Summarize uses a tiny temperature (0.1) rather than 0 to escape
+        // greedy-decoding repetition traps — at temperature 0 we observed a
+        // run where the model emitted the same sentence 35+ times until
+        // max_tokens. frequency_penalty further discourages echoing the
+        // same n-grams. Assess-fit keeps a slightly higher temperature so
+        // its hedging language ("may", "might") doesn't collapse into a
+        // single deterministic phrase across trials.
+        temperature: type === 'summarize' ? 0.1 : 0.2,
+        frequency_penalty: type === 'summarize' ? 0.3 : 0,
         stream: true,
       }
       if (isThinkingModel) request.extra_body = { enable_thinking: false }

From 84acd7fda08f31a0ac19f8ae52400d7c387aa067 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 21:23:58 -0400
Subject: [PATCH 14/17] fix(nlp): re-attach worker listener after StrictMode
 remount + auto-search after extraction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes:

1. The auto-load effect's hasAutoLoaded ref persisted across React
   StrictMode's dev-only mount→unmount→remount sequence. After the
   second mount it short-circuited load(), which is what calls
   ensureSubscribed() to re-attach the worker listener. Result: after
   StrictMode bounce the listener Set was empty and the worker's
   eventual 'ready' broadcast to nobody. Status sat on 'downloading'
   forever, queued submits never drained.

   Fix: cleanup of the auto-load effect resets hasAutoLoaded.current
   to false, so the StrictMode re-run re-fires load() and re-attaches.
   Also widened the gate from status==='idle' to include 'downloading'
   since the second pass sees the status the first pass already set.
   Production builds don't run StrictMode double-invoke, so this only
   manifested in local dev.

2. After NL extraction the wrapper used to switch to the structured
   form tab, forcing the user through a second click to actually run
   the search. Now the NL handler builds the search params from the
   extracted fields and fires the search directly. The "understood"
   chips inside NaturalLanguageInput already surface what the model
   parsed; no need to bounce the user to a different surface to
   confirm. If condition wasn't extracted the search is skipped and
   the existing "couldn't determine condition" warning surfaces.
---
 src/components/NaturalLanguageInput.jsx | 13 +++++++++++--
 src/components/UnifiedSearchBar.jsx     | 20 +++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index ca87734..6352e69 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -31,14 +31,23 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
   // in parallel with the one-time download.
   const [pendingSubmit, setPendingSubmit] = useState(false)
 
-  // Auto-load model on expand if user previously consented
+  // Auto-load model on expand if user previously consented.
+  // The cleanup resets hasAutoLoaded so React StrictMode's dev double-invoke
+  // (mount → cleanup → re-run) re-fires load() on the second pass; load()
+  // is what re-attaches the worker listener via ensureSubscribed. Without
+  // this reset, the listener detached during cleanup never gets re-attached
+  // and the worker's eventual 'ready' message broadcasts to an empty Set,
+  // leaving status stuck on 'downloading' forever.
   useEffect(() => {
     if (!expanded) { hasAutoLoaded.current = false; return }
     if (hasAutoLoaded.current) return
-    if (consented && status === 'idle' && webGPUSupported) {
+    if (consented && (status === 'idle' || status === 'downloading') && webGPUSupported) {
       hasAutoLoaded.current = true
       load(model.id, { isThinking: model.isThinking, chatOpts: model.chatOpts })
     }
+    return () => {
+      hasAutoLoaded.current = false
+    }
   }, [expanded, consented, status, webGPUSupported, load, model.id])
 
   function handleConsent() {
diff --git a/src/components/UnifiedSearchBar.jsx b/src/components/UnifiedSearchBar.jsx
index bab1a78..bcb0ec7 100644
--- a/src/components/UnifiedSearchBar.jsx
+++ b/src/components/UnifiedSearchBar.jsx
@@ -8,13 +8,27 @@ const MODES = [
 ]
 
 export default function UnifiedSearchBar({ onExtract, onSearch, prefill }) {
-  // When NL extraction succeeds we auto-flip to the structured form so the
-  // user can verify / edit the prefilled fields before searching.
   const [mode, setMode] = useState('nl')
 
+  // After NL extraction: surface what was understood (the chips render
+  // inside NaturalLanguageInput) and immediately fire the search using the
+  // extracted fields. The user stays on the NL tab — no jarring switch to
+  // the structured form. They can flip to the structured form manually if
+  // they want to refine.
   function handleExtract(payload) {
     onExtract(payload)
-    setMode('form')
+    const f = payload?.fields ?? {}
+    if (!f.condition) return // can't search without a condition; chips show the gap
+    onSearch({
+      condition: f.condition,
+      location: f.location || null,
+      radius: f.location ? '50' : null,
+      age: f.age ?? null,
+      sex: f.sex ?? 'ALL',
+      status: f.status ?? 'RECRUITING',
+      phases: f.phases ?? [],
+      sort: 'relevance',
+    })
   }
 
   return (

From 7c69a07adaa596dcacc679c08c0da519e9494ba3 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 22:37:15 -0400
Subject: [PATCH 15/17] ci: add build+test workflow for PRs into main

Runs npm ci, lint (non-blocking), test:run, and build on Node 22
for pull_request and push events targeting main. Concurrency group
cancels stale runs on force-push. Lint is informational until
pre-existing errors are cleaned up in a follow-up.
---
 .github/workflows/ci.yml | 46 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 .github/workflows/ci.yml

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..5c72ea2
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,46 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+# Cancel in-progress runs for the same ref so a force-push doesn't queue
+# stale CI.
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-test:
+    name: build-test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          # vite.config.js conditionally emits --no-experimental-webstorage
+          # for Node >= 22, so CI must run Node 22 to match local dev.
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      # Lint currently fails on pre-existing errors in main (e.g. vite.config.js
+      # 'process' is not defined, useNLP exhaustive-deps warnings). Run as a
+      # non-blocking informational step until those are fixed in a follow-up;
+      # build + tests are the real merge gate.
+      - name: Lint (non-blocking)
+        run: npm run lint
+        continue-on-error: true
+
+      - name: Test
+        run: npm run test:run
+
+      - name: Build
+        run: npm run build

From dea7ba5a4857d564ea1278aa5af60f4874ed5898 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Wed, 6 May 2026 23:53:10 -0400
Subject: [PATCH 16/17] ci: upload built dist/ as a workflow artifact for PR
 review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds an actions/upload-artifact@v4 step after the build so reviewers
can download the production bundle of the PR's exact code and serve
it locally (npx serve dist) to verify it built correctly. Naming the
artifact with the PR number (or sha for push runs) keeps multiple
in-flight PRs distinguishable. 7-day retention, errors if no files
are found (catches silent build failures).

Doesn't give you a live preview URL — that needs an external host
(Cloudflare Pages / Netlify) which can be added later as a separate
follow-up if useful. This is the no-external-dependency baseline.
---
 .github/workflows/ci.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5c72ea2..eefd90e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -44,3 +44,15 @@ jobs:
 
       - name: Build
         run: npm run build
+
+      # Upload the built dist/ as a workflow artifact so reviewers can
+      # download and serve it locally (e.g. `npx serve dist`) to verify the
+      # production bundle of the PR's exact code. Retention is short to
+      # avoid clutter; the artifact is for review-time only, not archival.
+      - name: Upload built site
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-${{ github.event.pull_request.number || github.sha }}
+          path: dist/
+          retention-days: 7
+          if-no-files-found: error

From 3c2e750cc07e852dc868c1ee529b4573554077f9 Mon Sep 17 00:00:00 2001
From: John Orgera <65687576+johnoooh@users.noreply.github.com>
Date: Thu, 7 May 2026 00:38:20 -0400
Subject: [PATCH 17/17] fix(nlp): tighten auto-load gate to status==='idle'
 only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code-review caught a bug in 84acd7f. The widened gate
(status === 'idle' || status === 'downloading') combined with the
unconditional cleanup reset of hasAutoLoaded.current causes load()
to re-fire mid-download:

  effect runs (idle) → hasAutoLoaded=true → load() → status flips
  to downloading → effect re-runs → cleanup nulls hasAutoLoaded →
  re-run matches widened gate → load() called again

The worker drops the duplicate (loading=true short-circuits in
nlp.worker.js:29), so it's harmless in practice — but it's noise
and any future change to the worker's idempotency invariant would
turn it into a real bug.

The widening was added thinking StrictMode remounts would arrive
with status='downloading' carried over, but each remount creates
a fresh useNLP instance with status='idle' (useState initializer),
so the narrow gate fires correctly on remount. The widening was
unnecessary.

Comment now explains why the gate is narrow + why the cleanup
reset is load-bearing.

Also: dropped aria-pressed from disabled sort chips in
ResultsToolbar — aria-pressed on a permanently-disabled control
is misleading to assistive tech. AT users now hear "Best fit,
button, dimmed" without a confusing pressed/unpressed state.
---
 src/components/NaturalLanguageInput.jsx | 12 ++++++++++--
 src/components/ResultsList.jsx          |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/NaturalLanguageInput.jsx b/src/components/NaturalLanguageInput.jsx
index 6352e69..df706a0 100644
--- a/src/components/NaturalLanguageInput.jsx
+++ b/src/components/NaturalLanguageInput.jsx
@@ -32,16 +32,24 @@ export default function NaturalLanguageInput({ onExtract, embedded = false }) {
   const [pendingSubmit, setPendingSubmit] = useState(false)
 
   // Auto-load model on expand if user previously consented.
+  //
   // The cleanup resets hasAutoLoaded so React StrictMode's dev double-invoke
-  // (mount → cleanup → re-run) re-fires load() on the second pass; load()
+  // (mount → cleanup → re-run) re-fires load() on the second pass — load()
   // is what re-attaches the worker listener via ensureSubscribed. Without
   // this reset, the listener detached during cleanup never gets re-attached
   // and the worker's eventual 'ready' message broadcasts to an empty Set,
   // leaving status stuck on 'downloading' forever.
+  //
+  // Gate is `status === 'idle'` only — NOT `'idle' || 'downloading'`. Each
+  // StrictMode remount creates a fresh useNLP with status='idle' so the
+  // narrow gate still fires correctly on remount. Widening to 'downloading'
+  // would re-fire load() after every status flip during the download
+  // (cleanup → reset hasAutoLoaded → re-run → matches widened gate → re-load),
+  // posting redundant load messages to the worker.
   useEffect(() => {
     if (!expanded) { hasAutoLoaded.current = false; return }
     if (hasAutoLoaded.current) return
-    if (consented && (status === 'idle' || status === 'downloading') && webGPUSupported) {
+    if (consented && status === 'idle' && webGPUSupported) {
       hasAutoLoaded.current = true
       load(model.id, { isThinking: model.isThinking, chatOpts: model.chatOpts })
     }
diff --git a/src/components/ResultsList.jsx b/src/components/ResultsList.jsx
index 380029e..e0baa05 100644
--- a/src/components/ResultsList.jsx
+++ b/src/components/ResultsList.jsx
@@ -304,7 +304,7 @@ function ResultsToolbar({ totalCount, searchParams }) {
               onClick={() => !opt.disabled && setSort(opt.id)}
               disabled={opt.disabled}
               title={opt.title}
-              aria-pressed={active}
+              {...(opt.disabled ? {} : { 'aria-pressed': active })}
               className={[
                 'text-[11px] px-2 py-0.5 rounded-md transition-colors',
                 opt.disabled