Tools: add responsive results-mode mockup

[BigSimmo]

Summary

• add /mockups/tools-search-mode as a responsive submitted Tools results page using the universal shell composer
• use the shared filter contract: SegmentedControl on desktop and ResultFilterTrigger / ResultFilterSheet on phone, with live counts and unavailable zero-count options
• elevate desktop result scanning with visible source/high-yield signals, Best for context, a selected-result accent, and a clearer selected-tool detail hierarchy
• keep the approved phone details sheet, including its Best for panel, accordions, primary action, example link, Escape/close behavior, and focus restoration
• render every tool included in the reported count, normalize punctuation-aware search matching, and close phone-only detail state when entering desktop layout
• provide a visible focus outline when the inline desktop detail panel receives programmatic focus
• register the mockup route, documentation, and focused production-browser coverage

Why

This presents Tools as a true results-mode page consistent with the other site modes, while preserving the approved result-card and detail-sheet direction and adopting the same filter behavior as the other modes.

Verification

• npm run format — passed on the final current-main union head
• npm run check:type-scale — passed
• changed-file ESLint for the Tools component and focused spec — passed with zero warnings
• source typecheck — passed on the perfected Tools source before the final unrelated main sync
• final isolated production Next build — compiled and completed its TypeScript phase successfully
• npm run test:e2e -- tests/ui-tools-search-mode-mockup.spec.ts --project=chromium-mockups — 14 passed on the combined concurrent-review head
• focused coverage includes shared desktop/phone filters, exact punctuation matching, count/render fidelity, visible programmatic focus, phone-to-desktop cleanup, detail focus return, reduced motion, forced colors, and overflow at 320/390/639/768/1440/1920px
• review-ledger integrity and deduplication — passed
• git diff --check refs/remotes/origin/main...HEAD — passed

Checks not run

• The full PR-local lint/unit/build/RAG suite was not stacked after the successful production build, focused 14-test owner journey, changed-file lint, type-scale, and ledger checks.
• Physical iPhone Safari / installed-PWA testing was not run; browser evidence uses responsive Chromium.

Risks / rollback

• Mockup-only: production Tools routing and search behavior are unchanged.
• Rollback is limited to the mockup route/component, registration/docs entries, and focused Playwright spec.

Summary by CodeRabbit

• New Features

  • Added an interactive Tools search-mode mockup with keyword search, category filters, result counts, and empty-state handling.
  • Added responsive tool details for desktop and mobile, including detail and filter views.
  • Added keyboard navigation, focus management, accessibility states, and reduced-motion support.
  • Added the mockup to the sitemap and documentation.

• Tests

  • Added responsive browser coverage for search, filtering, detail views, accessibility, and overflow behavior.

[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:38 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: b226b240-c738-4cc0-92e4-6b9e4fb04e5b

📥 Commits

Reviewing files that changed from the base of the PR and between 3675deb and 5fc2f98.

📒 Files selected for processing (3)

• mockups/README.md
• src/components/tools-page-mockups/tools-search-mode-mockup.tsx
• tests/ui-tools-search-mode-mockup.spec.ts

📝 Walkthrough

Walkthrough

Adds a responsive Tools search-mode mockup route with search, category filters, desktop and mobile tool details, accessibility behavior, documentation, and Playwright coverage.

Changes

Tools search-mode experience

Layer / File(s)	Summary
Route and mockup layout wiring src/app/mockups/tools-search-mode/page.tsx, src/app/mockups/mockups-layout-client.tsx, docs/site-map.md, mockups/README.md	Adds the route, metadata, sitemap entry, documentation, and route-specific search composer visibility.
Search, filtering, and responsive details src/components/tools-page-mockups/tools-search-mode-mockup.tsx	Adds catalog search, category filtering, result cards, empty states, desktop detail panels, mobile detail sheets, accordions, actions, and focus handling.
Playwright matching and interaction validation playwright.config.ts, tests/ui-tools-search-mode-mockup.spec.ts	Adds test matching and coverage for desktop, phone, responsive transitions, filtering, accessibility states, focus behavior, and horizontal overflow.

Estimated code review effort: 4 (Complex) | ~45 minutes

Mergeability Score:🔵 Low · up to 3675d

The mockup route is mergeable with explicit owner follow-up: its documentation needs to describe the composer exception, and a phone filter sheet may remain visible after switching to desktop, causing a stale overlay in that responsive transition.

Sequence Diagram(s)

sequenceDiagram
participant Visitor
participant ToolsSearchModeMockup
participant ToolCatalog
participant DetailView
Visitor->>ToolsSearchModeMockup: Enter search text or select a category
ToolsSearchModeMockup->>ToolCatalog: Filter normalized tool records
ToolCatalog-->>ToolsSearchModeMockup: Return matching tools and counts
Visitor->>ToolsSearchModeMockup: Select a tool
ToolsSearchModeMockup->>DetailView: Open desktop panel or mobile detail sheet
DetailView-->>Visitor: Show tool details and actions

Loading

Possibly related PRs

• BigSimmo/Database#670: Adds related mockup routes and route-specific composer suppression.
• BigSimmo/Database#1141: Changes Sheet focus and layout behavior used by the responsive detail and filter sheets.
• BigSimmo/Database#1744: Modifies shared mode-based search navigation and Tools routing.

Suggested labels:codex

Suggested reviewers:claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the responsive Tools results-mode mockup as the main change.
Description check	✅ Passed	The description includes the summary, verification results, skipped checks, risks, rollback scope, and production impact.
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 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/tools-results-mode-mockup

---

_{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:12478eb7fb

ℹ️ 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/tools-results-mode-mockup at starting commit 12478eb; 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/tools-results-mode-mockup, 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.

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Delightful!

Reviewed commit:12478eb7fb

ℹ️ 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".

[github-actions]

CI triage

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

• Production UI (1) — 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 #10268 (success).

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

[BigSimmo]

Review and repair complete

Reviewed head:bcb39e52d764121b67e215c444a0a5ae7d9f2367

Fixed

• Resolved the branch conflict and incorporated main while preserving both mockup changes.
• Normalised the query with the shared catalogue helper so exact titles such as Risk & Safety match correctly.
• Removed the four-result truncation so every tool included in the reported count is rendered.
• Closed the mobile detail sheet when crossing into desktop layout, preventing hidden modal, inert-content, and scroll-lock state.
• Added focused regression coverage for punctuation normalisation, all-result rendering, and the phone-to-desktop resize path.
• Corrected the changed-file formatting failure.

Verification

CI run #10058 completed successfully on the reviewed head. Green coverage includes build and enforced bundle budget, safety/config and Deno checks, formatting, lint, typecheck, unit coverage, critical Chromium journeys, all three production-UI shards, mockup/advisory UI, Lighthouse, SAST, secret scan, PR policy, and mergeability.

All four actionable review threads were answered and resolved. There are no outstanding change-request reviews.

main advanced after the final run through files disjoint from this PR. GitHub currently reports this PR as mergeable, so no additional no-op sync was pushed that would discard the completed CI evidence.

The PR remains open and has not been merged.

[Copilot]

Pull request overview

Adds a new responsive mockup route for “Tools results mode” that uses the universal search shell/composer, with shared filter controls across desktop/phone and Playwright coverage to exercise the responsive behaviors.

Changes:

• Introduces /mockups/tools-search-mode route and a new ToolsSearchModeMockup client component with responsive results + detail panel/bottom-sheet behavior.
• Adds focused Playwright coverage for the mockup and wires the spec into the mockup test selection patterns.
• Updates mockups/docs route registration to include the new mockup entry.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/ui-tools-search-mode-mockup.spec.ts	New Playwright spec covering desktop/phone behaviors, filter sheet contract, overflow checks, and forced-colors + reduced-motion.
src/components/tools-page-mockups/tools-search-mode-mockup.tsx	Implements the responsive Tools results-mode mockup UI (shared header band, segmented control + filter sheet, desktop aside + phone sheet details).
src/app/mockups/tools-search-mode/page.tsx	Registers the mockup route and metadata for the new page.
src/app/mockups/mockups-layout-client.tsx	Ensures the universal search composer remains visible for this specific Tools mockup route.
playwright.config.ts	Adds the new mockup spec to the mockup spec pattern and global match pattern.
mockups/README.md	Documents the new interactive mockup route and its intentional exclusions.
docs/site-map.md	Adds the generated route listing entry for /mockups/tools-search-mode.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[BigSimmo]

@codex Address all currently unresolved inline review comments on this PR against the current GitHub head. Fix the desktop detail-panel focus visibility and make the Details control's popup semantics accurate by breakpoint, with focused accessibility/regression tests. Push minimal fixes to this PR branch. Do not merge, close, rebase, force-push, deploy, or alter auto-merge. Please report the exact commit SHA and test results.

[github-actions]

Hi @BigSimmo — thanks for the @claude mention.

Open this in Claude Code on the web to continue here: https://claude.ai/code

Context: BigSimmo/Database · #1864

_{Automated backlink from the Claude backlink workflow. Claude Code can pick up the mention and push a scoped fix to the branch.}

[chatgpt-codex-connector]

Summary

• Split the responsive Details control into breakpoint-specific variants: the phone control correctly advertises aria-haspopup="dialog", while the desktop control opens the inline detail panel without dialog semantics. src/components/tools-page-mockups/tools-search-mode-mockup.tsxL374-L401
• Restored a visible focus outline on the programmatically focused desktop detail panel. src/components/tools-page-mockups/tools-search-mode-mockup.tsxL416-L422
• Added focused Playwright assertions covering desktop popup semantics, focus transfer, visible focus styling, and phone dialog semantics. tests/ui-tools-search-mode-mockup.spec.tsL55-L60tests/ui-tools-search-mode-mockup.spec.tsL89-L100
• Created local commit 62dcdf19c87bd2e676418dd7dd62b7e65a1aad37 (fix(mockup): clarify responsive detail semantics).
• Publication is blocked: the push failed because this environment has no GitHub credentials, and no GitHub connector or make_pr tool is available. Consequently, the current remote PR head remains 2ed41111210c731bde8e252b626b4a7e32bd0d52; I cannot truthfully report the local commit as pushed or create the required follow-up PR.

Testing

• ✅ npm run format
• ✅ git diff --check
• ✅ npx eslint src/components/tools-page-mockups/tools-search-mode-mockup.tsx tests/ui-tools-search-mode-mockup.spec.ts
• ✅ npm run test:e2e -- tests/ui-tools-search-mode-mockup.spec.ts --project=chromium-mockups — 13 passed
• ✅ curl -fsS http://localhost:3131/api/local-project-id — confirmed the local server belongs to Clinical KB.
• ✅ Focused browser inspection at 1440×900 — desktop detail panel received focus and computed outline-style: solid; screenshot captured at /tmp/tools-detail-focus.png.
• ❌ git push origin HEAD:codex/tools-results-mode-mockup — failed with fatal: could not read Username for 'https://github.com': No such device or address.
• ⚠️gh auth status — GitHub CLI reports that no GitHub hosts are authenticated, so publishing the commit and opening/updating a PR could not be completed.

View task →

[BigSimmo]

Final review-and-fix summary

Repository / PR:BigSimmo/Database#1864 — Tools: add responsive results-mode mockup
Final reviewed head:fd43d36c34611085c808d865d9fb04dac769bcef
Latest main:b850a58166b68fa9cdd9ff6248c5e93e34c87f73
Merge base:56df4bd8dbc242f979bd917c101eae85b5e6a22b

Sync and merge state

• The branch is 13 commits ahead and 43 commits behind current main.
• No new base merge was pushed in this pass. GitHub reports the PR as mergeable, and the exact-head PR mergeability workflow passed.
• A local shell git merge-tree could not be executed because the isolated runtime cannot resolve github.com. As substitute evidence, the 43 current-base commits change 13 paths, none overlapping this PR's 7 changed paths. The current merge is therefore clean by GitHub mergeability plus path-disjoint comparison.
• A no-op sync was intentionally avoided because there is no merge or required-CI blocker and it would invalidate the completed exact-head evidence.
• Auto-merge state was not exposed reliably by the available connector and was not altered.

High-confidence defects fixed

1. Missing visible focus after desktop Details activation
   • Commit 11acb5901094f97039a5cfb45f0730918b042eaf replaces the focused desktop panel's suppressed outline with the repository focus token, 2 px outline, and offset.
2. Incorrect desktop popup semantics
   • The same commit removes aria-haspopup="dialog" from the shared Details button, so desktop assistive-technology semantics match the inline detail panel. The phone path continues to use the existing accessible Sheet.
3. Regression coverage
   • Commit fd43d36c34611085c808d865d9fb04dac769bcef adds a focused Playwright test asserting the popup claim is absent, focus moves to the desktop panel, and its computed outline remains visible.

The four earlier findings covering query normalisation, result-count parity, all-result rendering, and phone-to-desktop sheet cleanup remained correctly fixed.

Adversarial review and comments

• The configured external review bot was rate-limited, so I performed a separate manual adversarial pass with fresh context over the final delta and surrounding contracts.
• I challenged responsive state, keyboard/focus behaviour, accessibility semantics, result/filter consistency, compatibility, security/privacy, false positives, and missing regression coverage.
• No additional high-confidence PR-introduced P0, P1, or reproducible P2 defect was found.
• Both new Copilot comments were answered with the fix and test commits. All 6 review threads are resolved.
• There are no outstanding REQUEST_CHANGES reviews. Supabase no-change notices, CodeRabbit rate-limit notices, and superseded CI-triage comments were non-actionable bot noise.

Decisive verification

• Local source-contract proof reproduced both defects before the fix, then confirmed the inaccurate popup claim and outline suppression were removed.
• Exact-head CI run #10120 completed successfully.
• Required PR gates passed: Change scope, Static PR checks including formatting/lint/typecheck and ledger integrity, Safety and config checks, Build and enforced bundle budget, Unit coverage, Production UI critical, Production UI (1), Production UI (2), Production UI (3), and the PR required aggregate.
• Security/policy gates passed: SAST #8375, Secret Scan #9962, PR Policy #9258, and PR mergeability #4250.
• No required check is pending, missing, skipped unexpectedly, or failed.
• Scope-excluded jobs skipped as expected and are not blockers: container images, migration replay, visual baselines, baseline refresh, PR-body sync, and the release-only browser matrix.

Advisory checks

• Advisory UI passed.
• Lighthouse budget advisory passed after being triggered automatically by the repository workflow. It was not manually dispatched or rerun in this pass.

Ledger and residual limitations

• No new branch-review-ledger row was committed. Repository policy requires the npm run ledger:append helper and forbids both hand-written rows and ledger-only tips. The connector-only environment could not execute that helper against an authenticated checkout, and there was no further substantive fix with which to pair a helper-generated ledger update. Ledger integrity itself passed in exact-head CI.
• Residual evidence limits are the unavailable local shell merge-tree noted above and the absence of physical iPhone Safari / installed-PWA testing. This is a mockup-only PR and does not change production Tools routing, clinical logic, RAG/ranking, privacy, authentication, migrations, dependencies, deployment, or release behaviour.
• This summary is authoritative for the head and base SHAs above. Any later head or base movement requires a fresh snapshot.

The PR was not merged. Final merge is left to the user.

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@mockups/README.md`:
- Around line 64-66: Update the shared-composer rule near the general Tools
mockup documentation to apply only to Tools mockups that own an in-page search
surface, preserving the documented exception for the Tools search mode route
where the composer remains visible.
In `@src/components/tools-page-mockups/tools-search-mode-mockup.tsx`:
- Around line 236-243: Update the closePhoneDetailOnDesktop handler in the
responsive useEffect to also reset filterOpen when the media query matches
desktop, ensuring the phone filter sheet closes during the transition. Add a
responsive transition test covering an open filter sheet switching to desktop
and verifying it closes.

🪄 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: 8e75e0d9-a625-4193-864d-d49605d53bc6

📥 Commits

Reviewing files that changed from the base of the PR and between b593135 and 3675deb.

📒 Files selected for processing (7)

• docs/site-map.md
• mockups/README.md
• playwright.config.ts
• src/app/mockups/mockups-layout-client.tsx
• src/app/mockups/tools-search-mode/page.tsx
• src/components/tools-page-mockups/tools-search-mode-mockup.tsx
• tests/ui-tools-search-mode-mockup.spec.ts