redesign(composer): neutral desktop plus-menu popover with in-place mode picker

[BigSimmo]

Summary

• Fix the ≥1024px composer "+" popover cutting off its subtitle ("Clear the current thread" rendered as "C…"): the old header grid reserved 216px for the mode pill + 52px for close inside a 22rem popover, leaving ~60px for the subtitle.
• Rebuild the popover header to the app's standard Sheet-header anatomy (Clinical White / Aegean direction, matching the ≤1023px sheet variant of this same menu): accent icon tile, mode title as the switcher trigger, subtitle on its own full-width line, toolbarButton close.
• Replace the layered mode-switcher dropdown with an in-place body swap (renderPopoverBody). The old dropdown was clipped by the panel's overflow-hidden whenever the current mode had few action rows (e.g. Forms), leaving below-fold mode options unclickable.
• Single anchor caret centred on the "+" trigger via --mode-action-caret-left (removes the duplicate JSX carets); popover widened 22rem → 24rem; deleted the teal-gradient header CSS and the unreachable ≤430px .mode-action-* rules (net −179 lines).
• Test contract preserved: Open <mode> options trigger, daily-actions-menu role/menu structure, menuitem names ("Scope", "Upload PDF", "View evidence"), menuitemradio mode options, Escape/focus-restore behavior.

Verification

• npm run verify:pr-local — blocked at its format:check step by a pre-existing local checkout artifact: prettier --check fails on CLAUDE.md + .claude/settings.json, which are byte-identical to origin/main (verified via git diff origin/main) and untouched by this PR. The two files this PR changes pass prettier. Constituent gates run individually below.
• npm run verify:cheap — green post-merge with origin/main (runtime, actions-pins, sitemap, lint, typecheck, vitest 1476 passed / 1 skipped)
• npm run verify:ui — full Chromium run green pre-merge (119 passed; 5 cold-compile navigation timeouts on routes untouched by this diff, all 5 pass on targeted re-run). Post-merge, re-ran the popover-relevant specs green: ui-smoke:1078 (desktop mode options close on outside click / scope open), ui-smoke:1119 (@critical demo answer flow), ui-accessibility reduced-motion + forced-colors (both drive the "+" menu → Scope).
• npm run verify:release — not run (not a release/handoff claim)
• npm run eval:retrieval:quality — N/A (no retrieval/ranking/selection/chunking/scoring change)
• npm run eval:rag -- --limit 15 — N/A (no answer generation/synthesis/post-processing change)
• npm run check:production-readiness — N/A (no clinical workflow/privacy/env/Supabase/source-governance change)
• npm run check:deployment-readiness — N/A (no deployment change)

Additional targeted QA (Playwright script, 1280×800): opened the "+" menu in all 8 modes and asserted zero clipped header/subtitle/row text (scrollWidth ≤ clientWidth), light + dark schemes; in-place mode picker shows all 8 options with the last one scrollable and clickable (previously unreachable); Escape restores focus to the trigger.

Clinical Governance Preflight

Not required: this PR changes only the composer "+" menu presentation (one component + its CSS). No ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output paths are touched.

Notes

• The branch also carries 648abfa3f ("docs: align readiness runtime version"), which predates this session; its content is already on main (net file diff vs origin/main is empty), so this PR's effective diff is exactly the two files above.
• origin/main was merged into the branch (clean, no conflicts) before push; the only overlapping file was globals.css in a distant token block.

🤖 Generated with Claude Code

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

📝 Walkthrough

Walkthrough

The mode-action popover now calculates caret placement from the trigger position, exposes it through a CSS variable, renders an in-place mode list, and simplifies related desktop and responsive styles.

Changes

Mode action popover

Layer / File(s)	Summary
Integrated caret layout src/components/clinical-dashboard/mode-action-popup.tsx, src/app/globals.css	Integrated surface geometry calculates a trigger-centered caret position, exposes --mode-action-caret-left, and uses it for both caret directions.
Popover mode rendering src/components/clinical-dashboard/mode-action-popup.tsx	The popover body switches between the mode list and action rows; desktop header controls, close-button styling, and responsive width are updated.
Mode-action styling surface src/app/globals.css	Focus-visible styling and scroll behavior remain, while obsolete header, menu, and small-screen overrides are removed.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Trigger
  participant ModeActionPopup
  participant IntegratedSurface
  Trigger->>ModeActionPopup: provide bounding rectangle
  ModeActionPopup->>ModeActionPopup: calculate caretLeft
  ModeActionPopup->>IntegratedSurface: set --mode-action-caret-left
  IntegratedSurface->>IntegratedSurface: position caret pseudo-element

Loading

---

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

• Ignore

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Verification Claims	❌ Error	PR notes claim verification passed in vague terms like “passing cheap checks” and “full Chromium run green” without exact command/result wording.	Rewrite verification notes to name each exact command/check and outcome, e.g. “Ran npm run verify:cheap: passed” or “Not run: reason.”

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the desktop composer popover redesign and in-place mode picker.
Description check	✅ Passed	The description follows the template with Summary, Verification, Clinical Governance Preflight, and Notes, and includes relevant test results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Generated And Sensitive Files	✅ Passed	Only source files changed; no secrets, credentials, local artifacts, or generated paths were detected in the PR diff.
Risky Git Or Deployment Actions	✅ Passed	PR only changes CSS/TSX popover UI; no force-push, reset --hard, destructive clean, shared-branch rebase, or deployment/mutation instructions found.
Supabase Project And Schema Safety	✅ Passed	Diff is limited to UI popover/CSS changes; no Supabase project refs, env examples, migrations, RLS, or schema files were touched.
Runtime And Package Manager Integrity	✅ Passed	PR only changes two UI files; no package.json, lockfile, .npmrc, or runtime-policy files were touched, and repo still pins npm@11.17.0 with Node 24.x/engine-strict.
Api Route Failure Handling	✅ Passed	Diff is limited to a client-side popover/CSS; no API route, server action, RAG, search, ingestion, or provider code changed.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/desktop-plus-menu-design-1a4bb2

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/desktop-plus-menu-design-1a4bb2

---

_{Comment @coderabbitai help to get the list of available commands.}