feat(mockups): psychiatry clinical calculators — search page + variants#670
Conversation
Add a psychiatry calculators feature as design mockups: an 8-scale scoring engine (PHQ-9, GAD-7, K10, MDQ, CAGE, AUDIT-C, SAD PERSONS, Y-BOCS) with score-linked next-clinical-actions and knowledge-base links, rendered through seven layout directions under /mockups/calculators-*. The primary direction is /mockups/calculators-search-page: the app's canonical SearchResultsLayout shell (count header band, tile grid, domain rail) with the search placed at the top on desktop and docked at the bottom on phones, matching site-wide search behaviour. The shared universal composer is suppressed on that route so there is a single, correctly-placed search input. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… page Replace the plain search field with the app's universal-composer treatment: the leading "+" (new search), the teal send button, the "Smart search" hint, the "Prompts" example chips, and the single privacy notice — reusing the answer-footer-search-* classes, AnswerSuggestionChips, and PrivacyInputNotice. Full variant renders in the desktop header; a compact variant (pill + privacy) docks at the bottom on phones. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…h header Drive the bottom composer's visibility with the shell's own useHideOnScroll hook so it slides away on scroll-down and returns on scroll-up in lockstep with the top header (identical thresholds, phone-only, inert on desktop). The page's own SearchResultsLayout <main> is the phone scroller, so the hook is pointed at it by testid; #main-content stays at 0 and only catches descendant scroll. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds shared clinical calculator fixtures, scoring and pathway helpers, seven interactive calculator mockups, corresponding Next.js routes, sitemap entries, and route-specific composer visibility handling. ChangesCalculator mockup suite
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Sequence Diagram(s)sequenceDiagram
participant CalculatorSearchHome
participant CalculatorsSearchDetailMockup
participant CalculatorDetail
participant CalculatorItems
CalculatorSearchHome->>CalculatorsSearchDetailMockup: Open calculator
CalculatorsSearchDetailMockup->>CalculatorDetail: Provide fixture and session answers
CalculatorDetail->>CalculatorItems: Render answer controls
CalculatorItems->>CalculatorsSearchDetailMockup: Update answers
CalculatorsSearchDetailMockup->>CalculatorDetail: Derive updated score and related content
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: be2f5fa67d
ℹ️ 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".
|
@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. 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. After fixing or dispositioning a thread, reply in that thread with as the first line, followed by a concise summary; that marker authorizes the workflow to close that exact thread. If human input or new authorization is required, do not use the marker and leave the thread open with the blocker. 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. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: be2f5fa67d
ℹ️ 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".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/components/calculator-mockups/search-page-mockup.tsx (1)
53-65: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winP2 summary (per coding guidelines, consolidated rather than inlined for
**/*.{js,jsx,ts,tsx,mjs,cjs}). Two duplicate-logic groups plus two lower-confidence/cross-file notes worth a look, none of them P0/P1:
src/components/calculator-mockups/search-page-mockup.tsx#L53-L65:matchContext/matcheshere are the canonical, named-function versions of search-matching logic; consider exporting them (e.g. fromcalculator-fixtures.tsorcalculator-ui.tsx) for reuse.src/components/calculator-mockups/search-detail-mockup.tsx#L72-L75:matchContextduplicates the function above almost verbatim — replace with the shared helper.src/components/calculator-mockups/search-detail-mockup.tsx#L215-L230: the inlinematches:predicate inside theresultsuseMemore-implementssearch-page-mockup.tsx'smatches()— replace with the shared helper.src/components/calculator-mockups/popup-sheet-mockup.tsx#L150-L161: the Escape-key +document.body.style.overflowlock inCalculatorsPopupSheetMockupis byte-identical to the one insearch-page-mockup.tsx; sinceCalculatorSheet(defined in this same file) already owns focus-on-open and receivesonClose, the cleanest fix is moving this effect intoCalculatorSheetitself so neither caller needs to reimplement it.src/components/calculator-mockups/search-page-mockup.tsx#L492-L503: same duplicate effect inCalculatorsSearchPageMockup— remove once the logic is moved intoCalculatorSheetper the item above.src/components/calculator-mockups/search-page-mockup.tsx#L505-L514: locating the scroll container viadocument.querySelector('[data-testid="calculators-search-page"]')couples scroll-hide behavior to a test-only selector; amainRef/forwarded ref onSearchResultsLayout(not in this batch) would be more robust, though the current polling-baseduseHideOnScrollusage already mitigates the main risk — low priority.src/components/calculator-mockups/search-detail-mockup.tsx#L375-L514andsrc/components/calculator-mockups/directory-grid-mockup.tsx#L56-L60: worth verifying (incalculator-fixtures.ts/calculator-pathways.ts, not in this batch) that MDQ'sbandsarray, used generically viabandForScoreforderived.band, actually lines up with MDQ's multi-criteria positive-screen logic already special-cased forderived.resultviamdqResult— otherwiseNextActionsPanel/RelatedContentPanel/ExpandedCalculator's severity-gated content could key off the wrong band for MDQ specifically.🤖 Prompt for 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. In `@src/components/calculator-mockups/search-page-mockup.tsx` around lines 53 - 65, Centralize the canonical matchContext and matches helpers from search-page-mockup.tsx:53-65, export them, and reuse them in search-detail-mockup.tsx:72-75 and :215-230. Move the Escape-key and body-overflow effect into CalculatorSheet, then remove duplicate effects from popup-sheet-mockup.tsx:150-161 and search-page-mockup.tsx:492-503. Replace the test-selector scroll lookup in search-page-mockup.tsx:505-514 with a mainRef/forwarded ref when updating SearchResultsLayout. Verify MDQ band alignment used by bandForScore and derived.band across search-detail-mockup.tsx:375-514 and directory-grid-mockup.tsx:56-60; change only the fixture/pathway data if it does not match MDQ’s multi-criteria result logic.Source: Coding guidelines
🤖 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/calculator-mockups/bedside-sheet-mockup.tsx`:
- Around line 24-121: Ensure triggered safety flags remain visible when
calculators are collapsed or inactive: in
src/components/calculator-mockups/bedside-sheet-mockup.tsx#L24-L121, add a
danger-toned indicator to the SheetSection header when derived.flags.length > 0;
also add it to each session-summary dock entry at `#L201-L254`. In
src/components/calculator-mockups/clinical-console-mockup.tsx#L24-L77, update
RailEntry, and at `#L115-L143` update the mobile chip entries, using each
calculator’s derived flags rather than only the active view.
In `@src/components/calculator-mockups/calculator-ui.tsx`:
- Around line 92-97: Update the completion and progress logic around
optionItems, checkboxItems, answeredCount, checkedCount, and complete so
checkbox questions are included. Make complete require all option items to be
answered and all checkbox items to have defined answers, and update
progressLabel to report checkbox progress for checkbox-based assessments such as
MDQ while preserving option progress for option-based assessments.
In `@src/components/calculator-mockups/popup-sheet-mockup.tsx`:
- Around line 32-141: Update CalculatorSheet to implement modal focus
management: attach a dialog ref to the outer dialog container, trap Tab and
Shift+Tab within its focusable elements, and preserve the element that was
focused before opening so focus is restored when onClose is invoked. Keep the
existing initial focus on closeRef and ensure focus handling remains scoped to
the active calculator dialog.
In `@src/components/calculator-mockups/search-page-mockup.tsx`:
- Around line 645-662: Update the dock container in the activeCalc conditional
around CalculatorComposer to set its inert state from footerHidden, ensuring
hidden dock controls cannot receive focus while preserving the existing visible
behavior and aria-hidden attribute.
---
Nitpick comments:
In `@src/components/calculator-mockups/search-page-mockup.tsx`:
- Around line 53-65: Centralize the canonical matchContext and matches helpers
from search-page-mockup.tsx:53-65, export them, and reuse them in
search-detail-mockup.tsx:72-75 and :215-230. Move the Escape-key and
body-overflow effect into CalculatorSheet, then remove duplicate effects from
popup-sheet-mockup.tsx:150-161 and search-page-mockup.tsx:492-503. Replace the
test-selector scroll lookup in search-page-mockup.tsx:505-514 with a
mainRef/forwarded ref when updating SearchResultsLayout. Verify MDQ band
alignment used by bandForScore and derived.band across
search-detail-mockup.tsx:375-514 and directory-grid-mockup.tsx:56-60; change
only the fixture/pathway data if it does not match MDQ’s multi-criteria result
logic.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c8942ff2-a6cb-4490-a9e6-0bd0861f492d
📒 Files selected for processing (20)
docs/site-map.mdsrc/app/mockups/calculators-bedside-sheet/page.tsxsrc/app/mockups/calculators-clinical-console/page.tsxsrc/app/mockups/calculators-directory-grid/page.tsxsrc/app/mockups/calculators-guided-flow/page.tsxsrc/app/mockups/calculators-popup-sheet/page.tsxsrc/app/mockups/calculators-search-page/page.tsxsrc/app/mockups/calculators-search/page.tsxsrc/app/mockups/mockups-layout-client.tsxsrc/components/calculator-mockups/bedside-sheet-mockup.tsxsrc/components/calculator-mockups/calculator-fixtures.tssrc/components/calculator-mockups/calculator-pathways.tssrc/components/calculator-mockups/calculator-ui.tsxsrc/components/calculator-mockups/clinical-console-mockup.tsxsrc/components/calculator-mockups/directory-grid-mockup.tsxsrc/components/calculator-mockups/guided-flow-mockup.tsxsrc/components/calculator-mockups/index.tssrc/components/calculator-mockups/popup-sheet-mockup.tsxsrc/components/calculator-mockups/search-detail-mockup.tsxsrc/components/calculator-mockups/search-page-mockup.tsx
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 5 file(s) based on 4 unresolved review comments. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 5 file(s) based on 4 unresolved review comments. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Heuristic only — a main-side or flake label is a starting point, not a verdict. |
Gate K10 bands until completion, seed checkbox-only scales to explicit zeros, restore focus trapping, keep the phone dock visible while focused, and point lithium at the real medication slug. Co-authored-by: Cursor <cursoragent@cursor.com>
PR 670 resolution (
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d635b4e243
ℹ️ 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".
…in directory Address the two P2 findings from the re-review of d635b4e: - calculator-ui: replace the on-mount seedCheckboxDefaults effect (which wrote explicit 0s just from opening CAGE/SAD PERSONS, marking them started+complete in Continue/Session summaries) with an explicit "Mark remaining as No" affordance. All-negative checklists now complete only on user action. - directory-grid: include calc.summary and calc.items text in the search haystack so symptom queries (e.g. "worthless", "eye-opener") match, matching the other search variants. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 55ef5264d6
ℹ️ 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".
Address the two P2 findings from the re-review of 55ef526: - search-page: on phones the shell's #main-content owns vertical scroll (max-sm:overflow-y-auto); the inner searchPageShell <main> has no vertical overflow, so the hide-on-scroll hook attached there never fired and the dock never hid. Point the hook at #main-content so it hides in lockstep with the header, driven by the same scroll events. - popup-sheet: the full-screen backdrop is a <button> inside the dialog, so the focus trap made it tabbable ahead of the visible content. Give it tabIndex=-1 and exclude tabindex=-1 from the trap's focusable set; pointer-click close is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fdf2f50948
ℹ️ 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".
…t window On phones the shell's #main-content owns vertical scroll (max-sm:overflow-y-auto), so window.scrollTo alone left the calculator detail view at the prior offset — opening a scale after scrolling the results could land partway down the form with the back control off-screen. Reset both #main-content and the window on open and back. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b7b7dad37a
ℹ️ 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".
…ry answers Address two P2 findings from the re-review of b7b7dad: - calculator-ui: with the explicit "Mark remaining as No" flow, a checkbox-only screen (CAGE/SAD PERSONS, minScore 0) surfaced a severity band as soon as one box was ticked — so a half-answered screen could read/copy "Screen negative" before the other yes/no items had explicit values. Gate checkbox-only band/result/actions on `complete`; options scales keep their provisional band. - directory-grid: answers lived in ExpandedCalculator's local state, so collapsing or switching cards unmounted it and lost entered answers. Hoist answers to a session keyed by calculator id, matching the other variants. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 359aed4778
ℹ️ 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".
… in place Opening a linked calculator from the sheet's related-content rows swaps calc while the overflow-y-auto sheet body stays mounted, so it kept the prior scrollTop and the next calculator opened partway down instead of at its indication. Reset the sheet scroller on calc.id change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 participant
Summary
Adds a psychiatry clinical calculators feature as design-exploration mockups under
/mockups/calculators-*. UI-only; no clinical ingestion, answer-generation, retrieval, auth, or data surfaces are touched.src/components/calculator-mockups/): PHQ-9, GAD-7, K10, MDQ (3-criteria screen logic), CAGE, AUDIT-C, SAD PERSONS, Y-BOCS — with a purederiveCalculator, score bands, safety flags, and score-linked next-clinical-actions + knowledge-base links./mockups/calculators-search-page: the app's canonicalSearchResultsLayoutshell (count header band, tile grid, domain rail) with the search placed top on desktop / docked bottom on phones.+, teal send, "Smart search" hint,Promptschips, single privacy notice), reusing theanswer-footer-search-*classes,AnswerSuggestionChips, andPrivacyInputNotice.useHideOnScrollhook (identical thresholds, phone-only).Verification
npm run verify:cheapgreen (1939 tests),npm run format:checkgreen — typecheck, lint, sitemap, type/icon-scale all pass.Clinical governance
Not applicable — no ingestion, answer generation, search/ranking, source rendering, document access, privacy, or production-config surfaces are changed. Mockups are
robots: noindexand gated behindmockupsEnabled().🤖 Generated with Claude Code
Summary by CodeRabbit