Add tappable iPhone suggestion ticker optimized for phone home composer

[BigSimmo]

Motivation

• Adapt the existing desktop suggestion UI into a compact, tappable phone-first ticker so iPhone users get a single high-confidence suggestion affordance that preserves screen space and tap-target requirements.
• Preserve desktop behaviors and the repo’s phone-chrome/one-composer contracts while exposing the same follow-up suggestions on phones in a mobile-friendly form.

Description

• Add a compact tappable ticker under the home composer by extending SmartRotatingHint with showPhoneTicker and onPickExample and rendering a phone-only button that inserts the suggestion into the composer. (see src/components/clinical-dashboard/universal-search-command-surface.tsx)
• Pass the phone-only ticker flag from the header by adding showPhoneSuggestionTicker to the UniversalSearchCommandSurface call site in master-search-header. (see src/components/clinical-dashboard/master-search-header.tsx)
• Add responsive, accessible CSS for the ticker with a three-column layout, truncation, 48px tap-floor, focus-visible outline, and theme tokens. (see src/app/globals.css)
• Update the overlap test to assert the desktop rows are hidden on phones, the ticker is visible and tappable, meets the tap-target floor, and populates the search input when tapped. (see tests/ui-overlap.spec.ts)
• Minor doc sync in AGENTS.md to keep the repo-generated header stable.
• Files changed: src/components/clinical-dashboard/universal-search-command-surface.tsx, src/components/clinical-dashboard/master-search-header.tsx, src/app/globals.css, tests/ui-overlap.spec.ts, AGENTS.md.

Testing

• Ran the repo-focused design sweep and local app ensure with: npm run workflow:design-sweep -- --write-evidence and npm run ensure, both completed successfully.
• Ran the repository Playwright/e2e flow via the npm script: npm run test:e2e:pr -- tests/ui-overlap.spec.ts --grep "smart search", which performed the build and executed the relevant Chromium tests; the targeted overlap tests passed (2 passed).
• Executed the phone-chrome dry-run verification: npm run verify:phone-chrome -- --dry-run and the docs index check node scripts/check-codebase-index-coverage.mjs, both reported OK for the scoped checks.
• Formatted with npm run format (Prettier) and ran the repository docs/site-map update; documentation synchronization completed during the pre-commit task.
• Captured a phone screenshot proof with Playwright into artifacts/iphone-suggestion-ticker.png (390×844, deviceScaleFactor 3), which shows the new ticker on the iPhone layout.

All automated checks above completed successfully in the local run; creating a remote PR/push was not performed from this environment (GitHub CLI was not authenticated here).

---

Codex Task

Summary by CodeRabbit

• New Features

  • Added a mobile smart-search ticker with a compact “Try this” prompt and rotating example queries on home screens.
  • Tapping a suggestion fills the search field and focuses it for quick editing.
  • Improved mobile search styling, tap targets, borders, and focus states.

• Bug Fixes

  • Prevented rotating prompts from competing with the mobile suggestion ticker.

[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]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in:43 minutes

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 02f0f481-0d8c-4fb8-a9b4-d8f2caf39a2d

📥 Commits

Reviewing files that changed from the base of the PR and between f78ba92 and e50e01e.

📒 Files selected for processing (1)

• src/components/ClinicalDashboard.tsx

📝 Walkthrough

Walkthrough

The search surface adds a tappable mobile suggestion ticker for home routes. The ticker pauses rotating examples during interaction, populates and focuses the search input, uses responsive styling, and has UI coverage for visibility and selection.

Changes

Phone search suggestion ticker

Layer / File(s)	Summary
Ticker interaction and query update src/components/clinical-dashboard/universal-search-command-surface.tsx, tests/ui-overlap.spec.ts	SmartRotatingHint renders a tappable ticker, pauses rotation during interaction, and passes selected examples to the search input. UI tests verify labels, tap size, accessibility, and query population.
Home-mode enablement and responsive presentation src/components/clinical-dashboard/global-search-shell.tsx, src/components/ClinicalDashboard.tsx, src/components/clinical-dashboard/master-search-header.tsx, src/app/globals.css, tests/helpers/style-contracts.ts	Home routes enable the ticker. CSS styles the phone ticker and hides it at widths of 640px and above. Style contracts document its coverage.

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

Sequence Diagram(s)

sequenceDiagram
participant User
participant SmartRotatingHint
participant UniversalSearchCommandSurface
participant SearchInput
User->>SmartRotatingHint: Tap suggestion ticker
SmartRotatingHint->>UniversalSearchCommandSurface: Select displayed example
UniversalSearchCommandSurface->>SearchInput: Set query and focus input

Loading

Possibly related PRs

• BigSimmo/Database#473: Modifies MasterSearchHeader and UniversalSearchCommandSurface for phone search behavior.
• BigSimmo/Database#700: Modifies UniversalSearchCommandSurface to control mobile search behavior.
• BigSimmo/Database#1027: Modifies standalone mode-home mobile search composer behavior.

Suggested reviewers:claude, cursoragent

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the motivation, implementation, and testing, but it omits the required Summary, Verification, Risk and rollout, Clinical Governance Preflight, and Notes sections.	Add the template sections and record verification evidence, risk and rollback details, provider effects, and applicable clinical governance confirmations or not-run reasons.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding a tappable iPhone suggestion ticker for the phone home composer.
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.

✨ 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 codex/design-suggestion-ticker-for-iphone

---

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:15c36ae932

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[BigSimmo]

@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. The only repository destination is BigSimmo/Database, and the only branch destination is the pull request head branch codex/design-suggestion-ticker-for-iphone at starting commit 15c36ae; never publish fixes to a detached or synthetic work branch and never create a stacked pull request. Use the authenticated GitHub connector to commit each approved fix to BigSimmo/Database:codex/design-suggestion-ticker-for-iphone, then verify that the pull request head contains the published commit before reporting success. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. For a fixed thread, reply with as the first line and as the second line. For a no-code disposition, use followed by . These result markers authorize the workflow to close that exact thread only after it verifies a fixed commit is the pull request head; a local-only commit is not a fix. If publication or verification fails, do not use either result marker, do not claim success, and leave the thread open with the blocker. If human input or new authorization is required, do the same. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation.

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

• Production UI (3) — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #9651 (failure).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

[chatgpt-codex-connector]

Summary

• Paused suggestion rotation while the phone ticker is focused, hovered, or pressed, ensuring activation inserts the suggestion the user originally saw or heard. src/components/clinical-dashboard/universal-search-command-surface.tsxL174-L187src/components/clinical-dashboard/universal-search-command-surface.tsxL200-L213
• Restricted the compact ticker to the repository’s phone breakpoint by hiding it at widths of 640px and above. src/app/globals.cssL1881-L1889
• Extended the focused Playwright coverage to verify that the suggestion remains stable across a rotation interval, activates through the keyboard, and is hidden at a 768px tablet viewport. tests/ui-overlap.spec.tsL269-L295
• Created scoped commit e0556aa39d9ca3daec2b4f45028178aa1980aba6 on codex/design-suggestion-ticker-for-iphone.
• Publication blocker: the commit could not be pushed because this environment has no authenticated GitHub connector or gh session. Consequently, the existing PR head remains 15c36ae9327b390818a61726779de02762931f90; I did not post resolution markers, close either thread, claim a remote fix, or create a stacked PR. The required make_pr tool was also unavailable in this environment.

Testing

• ✅ npm run workflow:design-sweep -- --write-evidence
• ✅ npm run ensure
• ✅ npm run format
• ✅ git diff --check
• ✅ npm run test:e2e:pr -- tests/ui-overlap.spec.ts --grep "phone smart search" — 1 Chromium test passed, including the production build.
• ✅ curl -fsS http://127.0.0.1:3131/api/local-project-id — confirmed the local server belonged to Clinical KB.
• ✅ test -s artifacts/iphone-suggestion-ticker-review-fixes.png — captured phone-width visual evidence.
• ⚠️file artifacts/iphone-suggestion-ticker-review-fixes.png — the screenshot was created successfully, but the optional file utility is not installed.
• ❌ gh auth status — no authenticated GitHub host was configured.
• ❌ git push origin HEAD:refs/heads/codex/design-suggestion-ticker-for-iphone — GitHub HTTPS credentials were unavailable, so publication and PR-head verification could not be completed.

View task →

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/globals.css`:
- Around line 1825-1828: Restore declaration spacing in the affected CSS blocks
by inserting an empty line between the preceding custom-property declaration and
each of the min-height, gap, and line-height declarations, including the
additional locations noted in the review.
- Around line 1825-1861: Replace the local ticker measurement custom properties
and hardcoded values in the smart-search phone ticker styles with shared
Tailwind 4 `@theme` tokens. Define any missing spacing or line-height tokens in
the existing `@theme` section, then reference those tokens from the ticker
container, .smart-search-phone-ticker-kicker, and
.smart-search-phone-ticker-query while preserving the current visual values.
In `@src/components/clinical-dashboard/master-search-header.tsx`:
- Line 1822: Update the showPhoneSuggestionTicker prop in the relevant header
component to pass showPhoneSuggestionTickerOnHome directly, removing the
isDesktopHomeComposer exclusion so standalone phone hero composers receive the
ticker while existing CSS controls desktop visibility.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8d32c6f1-458d-4fe8-9a67-98d1b667dd1d

📥 Commits

Reviewing files that changed from the base of the PR and between 914a5b9 and e550b50.

📒 Files selected for processing (6)

• src/app/globals.css
• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/clinical-dashboard/universal-search-command-surface.tsx
• tests/helpers/style-contracts.ts
• tests/ui-overlap.spec.ts

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/ClinicalDashboard.tsx`:
- Line 3353: Update the showPhoneSuggestionTickerOnHome prop in
ClinicalDashboard so the ticker is enabled only when showSharedHome or an
equivalent dedicated home-state predicate is true; remove the pathname === "/"
condition that also matches submitted, loading, answer, and error states.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4f693922-ee57-4ad1-bf5a-587bd679b37d

📥 Commits

Reviewing files that changed from the base of the PR and between e550b50 and f78ba92.

📒 Files selected for processing (3)

• src/components/ClinicalDashboard.tsx
• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx

[BigSimmo]

Unblock snapshot for #1805 (final):

• PR head verified: codex/design-suggestion-ticker-for-iphone at e50e01e0245c07095743232563fbec40bb33c085 / merge commit e8b61d8b1609a60dfea4ba0f93ef3266c6e8f6d6
• Base target: main
• Mergeability: initially BLOCKED/MERGEABLE despite passing required checks; root cause was unresolved review threads while ruleset requires full thread resolution.
• Resolved blocking threads: PRRT_kwDOSh5Fis6X6QaZ, PRRT_kwDOSh5Fis6X6Tpz, PRRT_kwDOSh5Fis6X6Tp7
• Required checks at head were green before merge: PR required, PR mergeability, Build, Production UI (1-3), Production UI critical, Unit coverage, Semgrep, Gitleaks, PR policy
• Outcome: auto-merge executed and PR is now merged.

Residual risk: no remaining open required threads/check failures at merge time.