feat(ui): tools & favourites mockups + design-token adoption + clinical UI polish

docs/redesign/09-ui-primitives-recipes.md

@@ -47,14 +47,14 @@ Values are tokens; the target sizes follow the `-11`/`-12` spacing scale (L6).
 | `primaryControl`         | Primary command button                | ✅                  | ✅                | ✅     | ✅                        | ✅       |
 | `floatingControl`        | Secondary / floating button           | `min-h-11`          | ✅                | ❌     | ✅                        | ✅       |
 | `toolbarButton`          | Square icon button                    | `h-11 w-11`         | ✅                | ❌     | ✅                        | ✅       |
-| `navPill`                | Nav / segmented pill                  | `min-h-11`          | ✅                | ❌     | ✅                        | ❌       |
-| `chatMicroAction`        | Small chat action (copy, retry…)      | `min-h-11 min-w-11` | ✅                | ❌     | ✅                        | ❌       |
+| `navPill`                | Nav / segmented pill                  | `min-h-11`          | ✅                | ❌     | ✅                        | ✅       |
+| `chatMicroAction`        | Small chat action (copy, retry…)      | `min-h-11 min-w-11` | ✅                | ❌     | ✅                        | ✅       |
 | `sourceCapsule`          | Inline citation capsule               | `min-h-11`          | ✅                | ❌     | ✅ (`focus-ring-premium`) | ❌       |
-| `chatComposerIconButton` | Composer icon button                  | `h-11 w-11`         | ✅                | ❌     | ✅                        | ❌       |
+| `chatComposerIconButton` | Composer icon button                  | `h-11 w-11`         | ✅                | ❌     | ✅                        | ✅       |
 | `chatSendButton`         | Composer send (accent)                | `h-11 w-11`         | ✅                | ❌     | ✅                        | ✅       |
-| `sidebarItem`            | Sidebar nav row                       | `min-h-11`          | ✅                | ❌     | ✅                        | ❌       |
+| `sidebarItem`            | Sidebar nav row                       | `min-h-11`          | ✅                | ❌     | ✅                        | ✅       |
 | `sidebarToolTile`        | Sidebar tool tile                     | `min-h-[64px]`      | ✅                | ❌     | ✅                        | ❌       |
-| `shellChip`              | Filter / mode chip                    | `min-h-10` ⚠️       | ✅                | ❌     | ❌                        | ❌       |
+| `shellChip`              | Filter / mode chip                    | `min-h-11`          | ✅                | ❌     | ❌                        | ❌       |
 
 ### Form fields
 
@@ -129,14 +129,16 @@ focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]` block
    the primary buttons, matching the newer recipes (`chatSendButton`, etc.).
 2. **`active:translate-y-px` only on the `controlBase` family** — other buttons
    (`toolbarButton`, `chatSendButton`, icon buttons) have no press feedback.
-3. **`disabled:` unhandled** on `navPill`, `chatMicroAction`,
-   `chatComposerIconButton`, `sidebarItem` — a disabled state renders identically
-   to enabled.
-4. **`shellChip` is `min-h-10` (40px)** — below the 44px WCAG tap minimum used
-   everywhere else. Promote to `min-h-11` if it's a real tap target.
+3. ✅ **FIXED (2026-07-03).** Added `disabled:cursor-not-allowed disabled:opacity-50`
+   to `navPill`, `chatMicroAction`, `chatComposerIconButton`, `sidebarItem` — they now
+   honour the documented disabled state.
+4. ✅ **FIXED (2026-07-03).** `shellChip` bumped `min-h-10` → `min-h-11` (40→44px) to
+   meet the WCAG tap minimum. (It still lacks `focus-visible` — add if it's used as a
+   focusable control at its call sites.)
 5. **Input focus uses `focus:` not `focus-visible:`** (`fieldControl`,
    `commandInput`) — intentional for text fields (focus ring should show on
    pointer focus too), but noted so it isn't "corrected" to `focus-visible:`.
 
-Gap 1 (the highest-value one) is now closed. Gaps 2–5 remain — all low-risk
-polish; gap 4 (`shellChip` tap size) is the next most worth doing.
+Gaps 1, 3, and 4 are now closed. Remaining: **gap 2** (`active:` press feedback
+beyond the `controlBase` family — an aesthetic/design-team call) and **gap 5**
+(inputs intentionally use `focus:`, no change needed).

src/components/ClinicalDashboard.tsx

@@ -62,9 +62,9 @@
   answerSurface,
   chatMicroAction,
   clinicalDivider,
   clinicalNotesRow,
   cn,
   evidenceRow,
   EmptyState,
   fieldControlPlain,
   fieldControlWithIcon,
@@ -255,9 +255,9 @@
 import {
   type AnswerEvidenceMapRow,
   type AnswerViewMode,
   buildAnswerEvidenceMap,
   buildClinicalOutputSections,
   buildHighYieldClinicalOutputSections,
   shouldPollForUpdates,
 } from "@/lib/ward-output";
 
@@ -478,13 +478,13 @@
   return navigationHashes.includes(hash as (typeof navigationHashes)[number]) ? hash : "#search";
 }
 
 function WhyThisMatchedPanel({ sources }: { sources: SearchResult[] }) {
   const visibleSources = sources.slice(0, 3);
   if (visibleSources.length === 0) return null;
 
   return (
     <details data-testid="why-this-matched" className={cn("group rounded-lg", panelSubtle)}>
-      <summary className="flex min-h-[48px] cursor-pointer list-none items-center justify-between gap-3 px-3 py-2">
+      <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-3 py-2">
         <span className="flex min-w-0 items-center gap-2">
           <span className={cn(iconTilePremium, "h-8 w-8")}>
             <Search className="h-4 w-4" />
@@ -679,7 +679,7 @@
                     </span>
                   )}
                   {!hasStructuredTable ? <QueryCoverageChips relevance={item.relevance} limit={2} /> : null}
-                  <Link href={item.viewer_href} className={cn(floatingControl, "min-h-[44px] px-4 text-xs")}>
+                  <Link href={item.viewer_href} className={cn(floatingControl, "min-h-11 px-4 text-xs")}>
                     <ExternalLink className="h-4 w-4" />
                     Open source
                   </Link>
@@ -1052,7 +1052,7 @@
 function MobileEvidenceTabPanel({
   tab,
   renderModel,
   query,
   visualEvidence,
   answerEvidenceMapRows,
   copiedQuotes,
@@ -1125,7 +1125,7 @@
   return <EvidenceGapsPanel warnings={renderModel.warnings} />;
 }
 
 function UnifiedEvidenceDrawerContent({
   answer,
   renderModel,
   query,
@@ -1282,7 +1282,7 @@
               <div className="min-w-0">
                 <Link
                   href={`/documents/${document.document_id}?page=${document.best_pages[0] ?? 1}&chunk=${document.best_chunk_ids[0] ?? ""}`}
-                  className="inline-flex min-h-[44px] items-center text-sm font-semibold text-[color:var(--text)] transition hover:text-[color:var(--primary)]"
+                  className="inline-flex min-h-11 items-center text-sm font-semibold text-[color:var(--text)] transition hover:text-[color:var(--primary)]"
                 >
                   <span className="line-clamp-2">{documentDisplayTitle(document)}</span>
                 </Link>
@@ -1295,7 +1295,7 @@
               <button
                 type="button"
                 onClick={() => onScopeDocument(document.document_id)}
-                className={cn(floatingControl, "min-h-[44px] px-3 text-xs")}
+                className={cn(floatingControl, "min-h-11 px-3 text-xs")}
               >
                 Scope
               </button>
@@ -1318,8 +1318,8 @@
   query,
   safeAnswerText,
   bestSource,
   currentRelevance,
   queryMode,
   sourceGovernanceWarnings,
   sourceSummary,
   renderModel,
@@ -2642,7 +2642,7 @@
                 <div className="min-w-0">
                   <Link
                     href={`/documents/${document.id}`}
-                    className="flex min-h-[44px] min-w-0 items-center gap-2 text-sm font-semibold text-[color:var(--text)] transition hover:text-[color:var(--primary)]"
+                    className="flex min-h-11 min-w-0 items-center gap-2 text-sm font-semibold text-[color:var(--text)] transition hover:text-[color:var(--primary)]"
                   >
                     <span className="truncate">{documentDisplayTitle(document)}</span>
                     <ExternalLink className="h-3.5 w-3.5 shrink-0 text-[color:var(--text-soft)]" />
@@ -2681,7 +2681,7 @@
                     type="button"
                     onClick={() => onToggleScope(document.id)}
                     className={cn(
-                      "inline-flex min-h-[44px] items-center rounded-lg border px-3 text-xs font-semibold transition",
+                      "inline-flex min-h-11 items-center rounded-lg border px-3 text-xs font-semibold transition",
                       selected
                         ? "border-[color:var(--primary)]/35 bg-[color:var(--primary-soft)] text-[color:var(--primary)]"
                         : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
@@ -2983,7 +2983,7 @@
           : "border-[color:var(--border-lux)] bg-[color:var(--surface)]",
       )}
     >
-      <div className="flex min-w-0 flex-col items-center justify-center gap-1 text-center lg:min-h-[44px] lg:flex-row lg:justify-start lg:gap-2.5 lg:text-left">
+      <div className="flex min-w-0 flex-col items-center justify-center gap-1 text-center lg:min-h-11 lg:flex-row lg:justify-start lg:gap-2.5 lg:text-left">
         <span
           className={cn(
             "grid h-8 w-8 shrink-0 place-items-center rounded-xl border shadow-[var(--shadow-inset)] lg:rounded-lg",
@@ -5573,7 +5573,7 @@
               {loading && answerProgress && searchMode !== "prescribing" && (
                 <div
                   role="status"
-                  className="flex min-h-[44px] items-center gap-2 rounded-lg border border-[color:var(--primary)]/20 bg-[color:var(--primary-soft)] px-3 text-sm font-medium text-[color:var(--text-heading)]"
+                  className="flex min-h-11 items-center gap-2 rounded-lg border border-[color:var(--primary)]/20 bg-[color:var(--primary-soft)] px-3 text-sm font-medium text-[color:var(--text-heading)]"
                 >
                   <Loader2 className="h-4 w-4 shrink-0 animate-spin text-[color:var(--primary)]" />
                   <span className="min-w-0 truncate">{answerProgress}</span>
@@ -5589,7 +5589,12 @@
                   authUnavailable={!clientDemoMode && !canUsePrivateApis}
                   apiUnavailable={apiUnavailable}
                   setupWarning={setupWarning}
-                  onQueryChange={setQuery}
+                  onQueryChange={(nextQuery) => {
+                    setQuery(nextQuery);
+                    // Clear stale evidence so an edited (but unsubmitted) query
+                    // doesn't keep rendering the previous search's rankings.
+                    setDocumentMatches([]);
+                  }}
                   desktopComposerSlotId={desktopHomeComposerSlotId}
                   onSuggestedSearch={(nextQuery) => {
                     setQuery(nextQuery);
@@ -5657,7 +5662,7 @@
                       loading={loading}
                       documentCount={indexedDocumentTotal}
                       recentDocuments={documents}
-                      realDataReady={canRunSearch}
+                      realDataReady={searchMode === "services" || searchMode === "forms" ? true : canRunSearch}
                       authUnavailable={!clientDemoMode && !canUsePrivateApis}
                       apiUnavailable={apiUnavailable}
                       setupWarning={setupWarning}

src/components/DocumentViewer.tsx

@@ -2362,7 +2362,7 @@ export function DocumentViewer({
       tabIndex={-1}
       className={cn(appBackdrop, "min-h-[100dvh] overflow-x-clip text-[color:var(--text)] focus:outline-none")}
     >
-      <header className="edge-glass-header sticky top-0 z-30 border-b border-[color:var(--border)] py-2 pt-[max(0.5rem,env(safe-area-inset-top))] shadow-[var(--shadow-tight)] backdrop-blur-xl">
+      <header className="edge-glass-header z-30 border-b border-[color:var(--border)] py-2 pt-[max(0.5rem,env(safe-area-inset-top))] shadow-[var(--shadow-tight)] backdrop-blur-xl">
         <div className="mx-auto flex h-12 min-w-0 max-w-7xl items-center gap-2">
           <Link
             href={documentHomeHref}
@@ -2952,7 +2952,7 @@ export function DocumentViewer({
             event.preventDefault();
             if (canSummarizeDocument) void summarize();
           }}
-          className="floating-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] ring-1 ring-white/35 backdrop-blur-xl"
+          className="floating-composer-edge dashboard-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] ring-1 ring-white/35 backdrop-blur-xl"
         >
           <button
             type="button"

src/components/applications-launcher-page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import {
   BookOpen,
   Brain,
@@ -812,6 +813,7 @@ export function ApplicationsLauncherWorkspace({
   const [pinnedIds, setPinnedIds] = useState(seedPinnedIds);
   const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const [desktopViewport, setDesktopViewport] = useState(false);
+  const router = useRouter();
   const isDashboardTools = variant === "dashboard-tools";
   const copy = isDashboardTools ? dashboardToolsLauncherCopy : standaloneLauncherCopy;
   const query = controlledQuery ?? uncontrolledQuery;
@@ -870,7 +872,18 @@ export function ApplicationsLauncherWorkspace({
   function submitFooterSearch(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const firstMatch = filteredApps[0];
-    if (firstMatch) selectApplication(firstMatch.id);
+    if (!firstMatch) return;
+    // Dashboard-tools run mode hides the detail panel on desktop, so selecting a
+    // match has no visible effect — launch the top match directly instead.
+    if (isDashboardTools && !showDetailPanel && desktopViewport) {
+      if (firstMatch.external) {
+        window.open(firstMatch.href, "_blank", "noopener,noreferrer");
+      } else {
+        router.push(firstMatch.href);
+      }
+      return;
+    }
+    selectApplication(firstMatch.id);
   }
 
   const workspace = (

src/components/clinical-dashboard/answer-content.tsx

@@ -122,7 +122,7 @@ export const SourceImage = memo(function SourceImage({
           <button
             type="button"
             onClick={retryImage}
-            className="mt-3 inline-flex min-h-[44px] items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--surface)] px-3 text-[color:var(--warning)]"
+            className="mt-3 inline-flex min-h-11 items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--surface)] px-3 text-[color:var(--warning)]"
           >
             Retry image
           </button>

src/components/clinical-dashboard/differentials-home.tsx

@@ -904,7 +904,11 @@ export function DifferentialsHome({
     runSearch(action.query);
   }
 
-  if (trimmedQuery) {
+  // Only surface ranked results once an actual search has run (loading or
+  // evidence matches present) — not on every keystroke, and not for a query
+  // whose source search returned nothing. Otherwise the hard-coded demo
+  // rankings render as if relevant to any typed text.
+  if (trimmedQuery && (loading || hasEvidenceMatches)) {
     return (
       <SearchResultsView
         query={trimmedQuery}

src/components/clinical-dashboard/evidence-panels.tsx

@@ -909,7 +909,7 @@ export function SafetyFindingsPanel({ findings }: { findings: ReturnType<typeof
                 href={finding.href}
                 className={cn(
                   raisedCard,
-                  "inline-flex min-h-[44px] items-center gap-1.5 px-3 text-xs font-semibold text-[color:var(--primary)]",
+                  "inline-flex min-h-11 items-center gap-1.5 px-3 text-xs font-semibold text-[color:var(--primary)]",
                 )}
                 aria-label={`Open source ${formatSafetyFindingLabel(finding)}`}
               >
@@ -981,7 +981,7 @@ function EvidenceGapPanel({
                 <Link
                   key={source.id}
                   href={sourceResultHref(source)}
-                  className={cn(floatingControl, "min-h-[44px] px-3 text-xs")}
+                  className={cn(floatingControl, "min-h-11 px-3 text-xs")}
                   aria-label={`Open closest source ${cleanDisplayTitle(source.title)}`}
                 >
                   <ExternalLink className="h-4 w-4" />
@@ -1171,7 +1171,7 @@ function EvidenceSummaryCard({
           <div className="mt-3 flex flex-wrap gap-2">
             <Link
               href={bestSource.viewer_href}
-              className={cn(primaryControl, "min-h-[44px] px-3 text-xs")}
+              className={cn(primaryControl, "min-h-11 px-3 text-xs")}
               aria-label={`Open ${sourceLabel.toLowerCase()}: ${formatCitationLabel(bestSource)}`}
             >
               Open source
@@ -1180,7 +1180,7 @@ function EvidenceSummaryCard({
             <button
               type="button"
               onClick={() => onScopeDocument(bestSource.document_id)}
-              className={cn(floatingControl, "min-h-[44px] px-3 text-xs")}
+              className={cn(floatingControl, "min-h-11 px-3 text-xs")}
               aria-label={`Search only ${bestSource.title}`}
             >
               <Filter className="h-4 w-4" />
@@ -1600,7 +1600,7 @@ function RenderModelSourceList({
           <article key={`${source.id}:${source.href}`} className={cn(sourceCard, "overflow-hidden p-0")}>
             <Link
               href={source.href}
-              className="block min-h-[44px] px-3 py-3 transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+              className="block min-h-11 px-3 py-3 transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
               aria-label={openLabel}
             >
               <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3">
@@ -1784,7 +1784,7 @@ export function EvidenceMapTable({ rows }: { rows: AnswerEvidenceMapRow[] }) {
               data-testid="evidence-map-open-source"
               className={cn(
                 sourceCard,
-                "grid min-h-[44px] grid-cols-[minmax(0,1fr)_auto] items-center gap-3 p-3 text-sm transition hover:border-[color:var(--primary)]/45 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
+                "grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 p-3 text-sm transition hover:border-[color:var(--primary)]/45 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
               )}
               aria-label={`Open source for ${row.section}: ${row.bestSourceLabel}`}
             >

src/components/differentials/differential-presentation-workflow-page.tsx

@@ -509,10 +509,17 @@ function MobileComparison({ candidates }: { candidates: CandidateView[] }) {
           <MobileCandidateCard key={candidate.record.slug} candidate={candidate} index={index} />
         ))}
       </div>
-      <div className="fixed inset-x-0 bottom-0 z-30 rounded-t-xl border-t border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent)] p-1.5 pb-[calc(0.4rem+env(safe-area-inset-bottom))] shadow-[var(--shadow-elevated)]">
+      <div className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-2 gap-2 rounded-t-xl border-t border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent)] p-1.5 pb-[calc(0.4rem+env(safe-area-inset-bottom))] shadow-[var(--shadow-elevated)]">
+        <Link
+          href="/differentials/presentations"
+          className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[color:var(--clinical-accent-contrast)]/40 bg-[color:var(--clinical-accent-contrast)]/5 px-2 text-xs font-extrabold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-inset)] sm:text-sm"
+        >
+          <GitCompareArrows className="h-4 w-4" aria-hidden />
+          Compare ({acuteConfusionPresentationWorkflow.selectedCount} selected)
+        </Link>
         <CopyAfterReviewButton
           text={comparisonCopy(candidates)}
-          className="w-full min-h-11 bg-[color:var(--surface)] px-2 !text-sm !text-[color:var(--clinical-accent)] hover:bg-[color:var(--surface-raised)]"
+          className="min-h-11 bg-[color:var(--surface)] px-2 !text-xs !text-[color:var(--clinical-accent)] hover:bg-[color:var(--surface-raised)] sm:!text-sm"
         />
       </div>
     </section>