[BigSimmo]

User description

Requested by Josh · project thread

Summary

Before: Work and Clinical read as two different apps. Clinical had a plain white top bar and tab bar, page headings in five sizes, every list item in its own card with a thick blue side bar, red "HIGH" pills on most forms, and some black buttons. Work bands had a dot texture, filter chips wrapped and left one chip alone, and five pages had two ways back.

After: Clinical top bars and tab bars share the mode's soft tint as one band, like a work page's top bar and band. Clinical page headings share one eyebrow, title and description style. Clinical lists group items as divided rows in one hairline card. Priority labels are neutral tags, and red stays for urgent. Buttons take the area colour. Chip rows stay on one line and scroll with an edge fade. The Work band is calmer, and a set of Work polish items is fixed.

The owner approved the seven rules behind this on 11 Oct 2026. They are recorded as decision C8 in docs/design-system/DECISIONS.md.

• How:
  • Clinical band: the top bar carries data-clinical-band on Clinical pages other than the shared home. mode-band.css tints it and the tab bar. The tab bar stays in the collapse track, so it hides and reveals as before. The Clinical search box and its position are untouched.
  • Shared heading: PageHeader defines the heading style once and exports it for hand-rolled headers.
  • Lists and tags: these were restyled in their own components. Every link, action and word is kept.
  • Chip rows: .work-chips is now one line. A scroll-driven fade appears only where there is more. Browsers without scroll-driven animations get no fade, and no chip is hidden.
  • Work polish: the duplicate back link is removed on Open shifts, First week, Leave wallet, Contract and Job applications. Also fixed: profile statuses aligned, On Call type sizes and grouped People, First week and Leave wallet tidy-ups, the CPD "Demo mode" wording changed to "example", and the Leave and requests gap.

Areas touched: App experience, Clinical reference UI, Personal practice (visual only)

Verification

• Checks run:
  • vitest related over every changed source and test file: Test Files 269 passed (269), Tests 3116 passed (3116).
  • Tests that read the changed CSS and components by path: Test Files 44 passed (44), Tests 975 passed (975).
  • tsc --noEmit and eslint on the changed files: clean.
  • prettier --check on the changed files: clean.
  • check:design-system-contract: passes.
  • Screens captured at 320, 390, 1280 and 390 dark: no sideways overflow.
  • Browser suites are left to CI.

Risk and rollout

• Risk: Medium for visuals, low for behaviour. No data, API or clinical wording changes. Visual and layout contracts may need small CI follow-ups.
• Rollback: Revert this commit.
• Provider or production effects: None.

Notes

• Not changed by design: the Clinical bottom search box and its behaviour (owner request), and no title band in Clinical, because it would have moved the tab bar out of the collapse track.
• Follow-ups: these are left for later, either because they touch shared tokens or components or because they wait on an owner decision.
  • Clinical-wide primary button tokens (three pages use local overrides for now).
  • The Diagnoses count clipped by the grouping toggle at 390 px.
  • Journal club showing twice on My Day, which waits on a decision about the Later action.
  • MyDayReturnLink under the one-way-back rule.

🤖 Generated with Claude Code

https://claude.ai/code/session_01T6yVRM8TyEHCooxU8ke9nA

---

Generated by Claude Code

---

Summary by cubic

Unifies Work and Clinical so both modes share one visual language, per the owner-approved design decision C8 from the 11 Oct 2026 review. No data or clinical wording changes.

• Clinical top bars and tab bars become one tinted band; the tab bar still collapses, and the bottom search box is untouched.
• Clinical lists group items into divided rows in a single hairline card, now including the Therapy Compass pathway rail and steps; priority labels are neutral tags with red reserved for urgency.
• Clinical primary buttons take the area colour, falling back to native colours under forced-colour settings, and page headings share one style via PageHeader.
• Work drops the dot texture and calms the band drawing; chip rows stay on one line and scroll sideways with an edge fade.
• One way back everywhere: the duplicate back links are removed on First week, CME applications, Open shifts and the admin pages (whose band's Today tab is Admin Today). First Nations pins its olive to its own standard, so its primary buttons stay neutral. Review fixes contain grouped-row focus rings and keep the danger cue red as a tag; Work polish covers profile statuses, On Call type sizes, the now list leading with cover when there is no Emergency group, and CPD wording.

^{Written for commit 8fbb304. Summary will update on new commits.}

---

CodeAnt-AI Description

Bring Work and Clinical screens into one clear visual style

What Changed

• Clinical pages now use a softly tinted header and tab bar, with consistent page headings and area-coloured primary buttons.
• Lists across both modes use divided rows inside a single card instead of separate cards and coloured side bars.
• Priority and category labels use neutral styling; red is reserved for urgent states.
• Filter chips stay on one line and scroll sideways on narrow screens. Pages no longer repeat a Back link already shown in the header.

Impact

✅ Easier-to-scan grouped lists
✅ Filter chips stay on one row on phones
✅ Urgent states stand out from routine priorities

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

🤖 CodeAnt AI — Review Status

Status	Commit	Started (UTC)	Finished (UTC)
✅ Reviewed your PR	a154913	Oct 11, 2026 · 04:42	04:48

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[greptile-apps]

BigSimmo has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

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

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 6d4809a9-115f-4b62-ad07-6cc1b2e1061b

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

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

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-11T04:46:59.991511Z	a154913	PR opened

ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[claude]

Claude encountered an error after 2s —— View job

---

I'll analyze this and get back to you.

[qodo-code-review]

PR Summary by Qodo

Unify Work and Clinical styling across navigation, lists, and controls

✨ Enhancement 📝 Documentation 🧪 Tests 🕐 40+ Minutes

AI Description

• Give Clinical pages a tinted header and consistent headings while preserving their existing
 navigation and search behavior.
• Replace separate and nested cards with grouped rows, and reserve red styling for genuine urgency.
• Calm Work bands, make filter chips scroll horizontally, and remove duplicate back links.

Diagram

graph TD
  C8["Design decision"] --> ModeCSS["Mode band CSS"] --> Header["Shared header"] --> Clinical["Clinical pages"]
  C8 --> PageHeader["Page headings"] --> Clinical
  C8 --> WorkCSS["Work mode CSS"] --> WorkPages["Work pages"]
  Tests["DOM tests"] --> Clinical
  Tests --> WorkPages

Loading

High-Level Assessment

Keep the PR’s approach: shared styling rules and heading classes unify the modes without replacing their distinct components or changing Clinical search and tab behavior. A top Clinical search bar or separate title band was considered and explicitly rejected in the recorded design decision.

Files changed (53) +863 / -474

Enhancement (39) +695 / -369

page.tsxIllustrate the Documents search entry point +67/-2

Illustrate the Documents search entry point

• Adds a decorative document-search illustration to the empty screen. Gives its primary search link the Clinical accent instead of the shared dark fill.

src/app/(search-app)/documents/search/page.tsx

mode-band.cssTint Clinical header and tab chrome +36/-0

Tint Clinical header and tab chrome

• Styles marked Clinical headers, safe areas, and tab rails as one soft-tinted band. Retains the existing tab collapse track and gives headers without tabs a bottom hairline.

src/app/mode-band.css

work-mode.cssCalm Work bands and standardize scrolling chips +60/-22

Calm Work bands and standardize scrolling chips

• Removes the band dot texture and reduces its illustration opacity. Makes Work chip rows single-line horizontal scrollers with a scroll-driven edge fade where supported.

src/app/work-mode.css

contract-end-page.tsxRemove the redundant Contract end back link +1/-2

Remove the redundant Contract end back link

• Removes the page-level Admin Today link because the band already provides a route back.

src/components/admin/contract/contract-end-page.tsx

leave-wallet-page.tsxGroup Leave wallet rows in one card +13/-10

Group Leave wallet rows in one card

• Replaces overlapping leave cards with divided, full-width rows inside one card and adds row chevrons. Removes the duplicate Admin Today back link.

src/components/admin/leave/leave-wallet-page.tsx

kind-chips.tsxUse the shared scrolling chip row for renewals +4/-4

Use the shared scrolling chip row for renewals

• Removes the wrapping override so checklist filters follow the single-line Work chip treatment.

src/components/admin/renewals/kind-chips.tsx

master-search-header.tsxMark eligible Clinical chrome for band styling +9/-0

Mark eligible Clinical chrome for band styling

• Adds a route-derived Clinical band marker to the universal header and phone safe area. Excludes the shared home and Work routes.

src/components/clinical-dashboard/master-search-header.tsx

applications-page.tsxRemove the Job applications back link +2/-10

Remove the Job applications back link

• Stops rendering a second link to CPD summary in both loading and loaded states; the band’s Summary tab remains available.

src/components/cme/applications/applications-page.tsx

cme-entry-form.tsxSimplify Reflection field guidance +1/-1

Simplify Reflection field guidance

• Rephrases the audit-related hint without changing the field or its behavior.

src/components/cme/cme-entry-form.tsx

cme-new-entry-route.tsxDescribe the CPD entry preview as an example +2/-1

Describe the CPD entry preview as an example

• Replaces “Demo mode” wording while preserving the notice that saving requires a signed-in private record.

src/components/cme/cme-new-entry-route.tsx

cme-quick-log.tsxDescribe Quick log preview as an example +1/-1

Describe Quick log preview as an example

• Rewords the preview notice while retaining the signed-in saving restriction.

src/components/cme/cme-quick-log.tsx

dictionary-catalogue-pages.tsxGroup Dictionary results into hairline cards +66/-19

Group Dictionary results into hairline cards

• Groups alphabetical results by letter while keeping relevance-ranked results together. Applies grouped-card styling to catalogue results, topics, topic details, and the empty state.

src/components/dictionary/dictionary-catalogue-pages.tsx

dictionary-result-row.tsxRestyle Dictionary hits as divided rows +58/-49

Restyle Dictionary hits as divided rows

• Removes colored side bars and per-row card treatment in favor of shared row spacing and restrained tags. Supports heading levels appropriate to letter and kind groups.

src/components/dictionary/dictionary-result-row.tsx

differential-stream-workspace.tsxGroup Differential pathways and quiet priority styling +27/-15

Group Differential pathways and quiet priority styling

• Places pathway entries inside divided group cards and applies shared heading typography. Softens emergent styling while retaining its urgency color, and makes the jump-link shelf neutral.

src/components/differentials/differential-stream-workspace.tsx

factsheets-search-page.tsxAlign Factsheets search heading typography +3/-4

Align Factsheets search heading typography

• Uses shared page-heading classes for the eyebrow and title.

src/components/factsheets/factsheets-search-page.tsx

fn-button.tsxColor filled First Nations buttons by area +25/-4

Color filled First Nations buttons by area

• Wraps filled actions in a First Nations identity scope so primary buttons use the area color, including in sheets. Outlined buttons continue to pass through unchanged.

src/components/first-nations/fn-button.tsx

forms-search-results-page.tsxGroup mobile Forms results and neutralize labels +39/-38

Group mobile Forms results and neutralize labels

• Turns mobile result cards into rows within category cards and removes the desktop hover side bar. Makes category and risk labels neutral and avoids repeating the overall form count.

src/components/forms/forms-search-results-page.tsx

formulation-builder-page.tsxFlatten nested Formulation builder cards +23/-21

Flatten nested Formulation builder cards

• Replaces boxed mechanisms, frameworks, sections, and prompts with divided blocks inside their existing step cards. Keeps selection emphasis through soft backgrounds.

src/components/formulation/formulation-builder-page.tsx

mode-picker-row.tsxRemove dots from the mode-picker band +1/-2

Remove dots from the mode-picker band

• Drops the sheet band’s dot texture while retaining its pale fill and faint mode illustration.

src/components/mode-picker/mode-picker-row.tsx

my-day-calendar-page.tsxAvoid repeating the calendar month in the band +3/-1

Avoid repeating the calendar month in the band

• Shows today’s date in the My Day band subtitle while the page heading continues to identify the displayed month.

src/components/my-day/my-day-calendar-page.tsx

call-page.tsxGroup On Call department contacts +36/-20

Group On Call department contacts

• Places department groups in one shared card with internal dividers, while keeping Emergency and current cover separate.

src/components/on-call/call/call-page.tsx

first-week-page.tsxTidy First week navigation and actions +36/-32

Tidy First week navigation and actions

• Removes the redundant On Call back link and moves read-state actions beside the hospital line. Uses a visibility icon for the future-availability message.

src/components/on-call/first-week/first-week-page.tsx

grouped-list.tsxAllow On Call groups to share a parent card +20/-3

Allow On Call groups to share a parent card

• Adds an in-card presentation that removes individual group card surfaces and adds dividers and compact group headings.

src/components/on-call/kit/grouped-list.tsx

right-now.tsxReduce On Call current-role heading size +6/-1

Reduce On Call current-role heading size

• Brings the Right now title into the page’s quieter type scale.

src/components/on-call/now/right-now.tsx

signed-out-example.tsxAlign example On Call typography +7/-3

Align example On Call typography

• Reduces example phone-number and role type sizes to match adjacent On Call content.

src/components/on-call/now/signed-out-example.tsx

open-shifts-browse-page.tsxRemove duplicate back navigation from Open shifts +8/-30

Remove duplicate back navigation from Open shifts

• Keeps the sample freshness note but removes its extra My Day link. Moves quick filters onto the shared scrolling chip row.

src/components/open-shifts/open-shifts-browse-page.tsx

roster-staffing-entry.tsxMatch Team staffing entry to Leave rows +10/-9

Match Team staffing entry to Leave rows

• Aligns the staffing link’s card, icon, title, and secondary text with nearby Work rows.

src/components/roster/staffing/roster-staffing-entry.tsx

sources-browse-client.tsxGroup browsed Sources under each heading +10/-6

Group browsed Sources under each heading

• Replaces separate, raised source tiles with one divided card per browse group across screen widths.

src/components/sources/sources-browse-client.tsx

sources-catalogue-client.tsxMake the Sources catalogue one divided list +12/-7

Make the Sources catalogue one divided list

• Replaces the multi-column tile grid with semantic list items inside a single hairline card.

src/components/sources/sources-catalogue-client.tsx

specifier-builder-page.tsxFlatten Specifier review rows and color primary actions +20/-4

Flatten Specifier review rows and color primary actions

• Changes nested review cards into divided rows and softens the completed-wording panel. Gives Copy and Continue buttons the Clinical accent.

src/components/specifiers/specifier-builder-page.tsx

specifier-ui.tsxRemove the nested Deciding signal border +3/-1

Remove the nested Deciding signal border

• Presents the signal as a tinted well within its existing result card.

src/components/specifiers/specifier-ui.tsx

controls.tsReplace Therapy hero side bars with a hairline +9/-5

Replace Therapy hero side bars with a hairline

• Uses the remappable category border around hero cards instead of a thick colored left edge.

src/components/therapy-compass/controls.ts

pathway-picker-sheet.tsxTurn the pathway rail into divided rows +6/-2

Turn the pathway rail into divided rows

• Removes individual pathway cards and uses a soft background to identify the active pathway.

src/components/therapy-compass/pathway-picker-sheet.tsx

pathway-step-stack.tsxFlatten Therapy pathway steps +27/-13

Flatten Therapy pathway steps

• Presents mobile and desktop steps as divided content within the pathway card rather than nested cards. Keeps the timeline and changes the mobile record action to a quieter text button.

src/components/therapy-compass/pathway-step-stack.tsx

pathways-screen.tsxAdjust mobile pathway detail spacing +1/-1

Adjust mobile pathway detail spacing

• Reduces top padding so the newly flattened mobile step list sits naturally within its parent card.

src/components/therapy-compass/screens/pathways-screen.tsx

tools-search-results-page.tsxUse the shared Tools page heading +4/-5

Use the shared Tools page heading

• Applies shared title and description typography to the Tools landing header.

src/components/tools/tools-search-results-page.tsx

page-header.tsxCentralize page-heading typography +20/-13

Centralize page-heading typography

• Exports shared eyebrow, title, and description classes for both PageHeader and custom headers. Standardizes heading weight, size, spacing, and description width.

src/components/ui/page-header.tsx

work-profile-page.tsxAlign Work profile status labels +10/-7

Align Work profile status labels

• Gives ready and not-recorded states the same icon-and-text layout.

src/components/work-profile/work-profile-page.tsx

bookings-page.tsxMake Book availability look actionable +9/-1

Make Book availability look actionable

• Styles Book as a secondary-button face inside the existing course link without nesting an interactive button.

src/components/work-screens/admin/bookings-page.tsx

Bug fix (2) +92 / -84

roster-requests-page.tsxClose the empty gap below the Roster band +8/-2

Close the empty gap below the Roster band

• Offsets the content when the band is visible so the first Requests card does not sit below an empty header gap.

src/components/roster/requests/roster-requests-page.tsx

catalogue-toolbar.tsxGive catalogue search a full mobile row +84/-82

Give catalogue search a full mobile row

• Flattens the toolbar layout so search takes the first line on phones, with sort, filter, and count arranged beneath it.

src/components/ui/catalogue-toolbar.tsx

Refactor (1) +2 / -5

mode-band.tsxRemove obsolete Work dot alignment +2/-5

Remove obsolete Work dot alignment

• Stops calculating and publishing the band offset formerly used to align dot textures.

src/components/mode-band/mode-band.tsx

Tests (8) +35 / -14

admin-contract-page.dom.test.tsxVerify Contract end has no duplicate back link +3/-2

Verify Contract end has no duplicate back link

• Updates the signed-out page assertion to require the page-level Admin Today link to be absent.

tests/admin-contract-page.dom.test.tsx

admin-leave-wallet-page.dom.test.tsxVerify Leave wallet has no duplicate back link +2/-1

Verify Leave wallet has no duplicate back link

• Changes the page assertion to expect no page-level Admin Today link.

tests/admin-leave-wallet-page.dom.test.tsx

admin-renewals-page.dom.test.tsxVerify renewals use the shared chip row +6/-3

Verify renewals use the shared chip row

• Replaces wrapping expectations with an assertion that checklist filters use the Work chip class.

tests/admin-renewals-page.dom.test.tsx

cme-applications-page.dom.test.tsxVerify Job applications omits its back link +2/-2

Verify Job applications omits its back link

• Updates the navigation assertion to expect no page-level CPD summary link.

tests/cme-applications-page.dom.test.tsx

first-nations-design.dom.test.tsxPermit area color in First Nations primary buttons +10/-1

Permit area color in First Nations primary buttons

• Extends the design guard’s allowlist to cover the filled button’s mode identity scope.

tests/first-nations-design.dom.test.tsx

forms-search-register-listing.dom.test.tsxVerify Forms displays its total once +7/-2

Verify Forms displays its total once

• Checks that the status band contains the form total while table and mobile list headings do not repeat it.

tests/forms-search-register-listing.dom.test.tsx

on-call-first-week-page.dom.test.tsxVerify First week omits its back link +2/-1

Verify First week omits its back link

• Changes the page assertion to expect no duplicate On Call link.

tests/on-call-first-week-page.dom.test.tsx

open-shifts-browse-sample.dom.test.tsxVerify Open shifts retains freshness without back link +3/-2

Verify Open shifts retains freshness without back link

• Checks that the sample freshness note remains and the redundant My Day link is absent.

tests/open-shifts-browse-sample.dom.test.tsx

Documentation (3) +39 / -2

DECISIONS.mdRecord the approved cross-mode design rules +32/-0

Record the approved cross-mode design rules

• Adds decision C8 with seven rules for bands, buttons, chips, urgency colors, navigation, and grouped cards. Records why a Clinical top search bar and separate title band were rejected.

docs/design-system/DECISIONS.md

work.tsxDocument the new Work chip row behavior +6/-1

Document the new Work chip row behavior

• Clarifies that all Work chip rows now scroll on one line and that the existing scroll prop no longer changes their layout.

src/components/mode-kit/work.tsx

work-frame-header.tsxCorrect the Work band description +1/-1

Correct the Work band description

• Updates the component comment to reflect removal of the dot texture.

src/components/work-frame/work-frame-header.tsx

[codeant-ai]

🏁 CodeAnt Quality Gate Results

Commit: 8fbb3043
Scan Time: 2026-10-11 05:43:00 UTC

✅ Overall Status: PASSED

Quality Gate Details

Quality Gate	Status	Details
Secrets	✅ PASSED	0 secrets found
Duplicate Code	✅ PASSED	0.0% duplicated
SAST	✅ PASSED	No security issues
Bugs	✅ PASSED	Rating S: No bugs
IAC	✅ PASSED	No IAC issues

View Full Results

[codspeed]

Merging this PR will improve performance by ×2.7

⚠️ 1 benchmark spent significant time in system calls

System calls cannot be consistently instrumented, so they are not included in the measure, which understates the real cost. Please switch to the Walltime instrument to accurately measure system calls.

Measurement and system calls

• catalog-search: rankCatalogRecords 400 records

⚡ 1 improved benchmark
✅ 7 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	medication-entities: medicationEntityMatchesInText	11.5 ms	4.2 ms	×2.7

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing claude/design-review-polish-7wb6f7 (8fbb304) with main (50b07e0)}

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Admin pages lose return links ✓ Resolved

Description

ContractEndPage and LeaveWalletPage remove their JuniorBackLink controls on the assumption
that the band's Today tab is available. On /admin/contract and /admin/leave, the navigation
registry selects no active tab and ModeBand hides the band, leaving readers without a direct link
back to /admin.

Code

src/components/admin/contract/contract-end-page.tsx[394]

+        {/* One way back: the band's Today tab is Admin Today, so the page adds no second link to it. */}

Relevance

●●● Strong

Route registry gaps make the assumed band return path unavailable; preserving a direct parent link
is a clear navigation fix.

PR-#3336
PR-#3254

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The UX review skill calls for checking navigation and mobile usability. Both changed pages remove
their parent links, while the navigation registry does not recognize either route and the band is
hidden without an active tab.

src/components/admin/contract/contract-end-page.tsx[391-397]
src/components/admin/leave/leave-wallet-page.tsx[588-594]
src/lib/mode-secondary-navigation.ts[487-494]
src/components/mode-band/mode-band.tsx[389-408]
Skill: ux-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Contract end and Leave wallet remove their return links, but neither route displays the mode band whose Today tab was meant to replace them.
## Fix Focus Areas
- src/components/admin/contract/contract-end-page.tsx[391-397]
- src/components/admin/leave/leave-wallet-page.tsx[588-594]
## Recommended Fix
Restore a direct link to `/admin` on both bandless pages, and update the changed tests to assert that the link is present.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Clinical band changes can regress silently ✗ Dismissed

Description

The new clinicalBandAttribute helper controls whether Clinical pages receive their tinted header
band, but the existing phone-mode-group tests do not exercise its route, root-page, or Work-area
conditions. A later change to pathname or mode grouping could therefore remove or add the band
without a focused test failure.

Code

src/lib/phone-mode-groups.ts[R115-120]

+export function clinicalBandAttribute(
+  modeId: AppModeId,
+  pathname: string | null | undefined,
+  onWorkArea: boolean,
+): "" | undefined {
+  return !onWorkArea && (pathname ?? "/") !== "/" && modeMenuSideForMode(modeId) === "clinical" ? "" : undefined;

Relevance

●●● Strong

Accepted history favors focused regression coverage for new route/helper branches and wiring
conditions.

PR-#2938
PR-#2308

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The PR adds clinicalBandAttribute as a new route-dependent helper, while the existing
phone-mode-group test file only exercises grouping and ordering and has no assertions for the
helper's conditions. The testing-review skill requires modified helper utilities to have
corresponding focused Vitest coverage.

src/lib/phone-mode-groups.ts[109-122]
tests/phone-mode-groups.test.ts[1-79]
Skill: testing-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new `clinicalBandAttribute` helper controls server-rendered Clinical header band state, but no focused test covers its route and mode conditions. Regressions could silently change which pages receive the Clinical tint.

## Fix Focus Areas
- src/lib/phone-mode-groups.ts[115-120]
- tests/phone-mode-groups.test.ts[1-79]

## Recommended Fix
Add Vitest cases for `clinicalBandAttribute` covering a non-root Clinical pathname, the shared root pathname, a Work-area route, and a Work-mode pathname. Keep the assertions next to the existing phone-mode-group tests so future changes to mode grouping and band eligibility fail locally.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Keyboard focus ring is cut off on grouped source and topic rows ✓ Resolved

Description

Source rows (Sources browse and catalogue) and topic links (Dictionary topics) now fill the full
width of a new overflow-hidden rounded-xl group card. They still use the app-wide focus outline,
which is drawn 2px outside the element, so the card clips its left and right sides, plus the top of
the first row and the bottom of the last. Keyboard users tabbing through Sources browse, the Sources
catalogue and the Dictionary topics list see only broken pieces of the focus indicator. Before this
PR each row was its own card with no clipping parent, so the whole ring showed.

Code

src/components/sources/sources-browse-client.tsx[R227-228]

+const rowGrid =
+  "divide-y divide-[color:var(--border)] overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]";

Relevance

●●● Strong

Accepted accessibility precedents require visible focus indicators; overflow clipping clearly breaks
keyboard focus rings.

PR-#2186
PR-#2361

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The global rule :where(button, a, …):focus-visible { outline-offset: 2px } draws the ring outside
the link's box. The new list containers add overflow-hidden, and the rows are full-width links
with no inset focus override, so the outer ring is clipped. The PR fixes this exact problem for
Forms rows (focus-visible:-outline-offset-2 with the comment "the group card clips its corners, so
an outset ring would be cut off") and for Leave wallet rows, but not for Sources or Dictionary
topics. The Dictionary topics link is worse: it sets focus-visible:outline-offset-2 explicitly.

src/app/globals.css[1833-1842]
src/components/sources/sources-browse-client.tsx[143-153]
src/components/sources/sources-catalogue-client.tsx[130-139]
src/components/sources/sources-catalogue-client.tsx[438-444]
src/components/dictionary/dictionary-catalogue-pages.tsx[686-693]
src/components/forms/forms-search-results-page.tsx[531-538]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Rows that now sit inside `overflow-hidden` group cards still use the global outset focus outline (offset 2px), so the card clips the ring on keyboard focus.

## Fix Focus Areas
- src/components/sources/sources-browse-client.tsx[147-152]
- src/components/sources/sources-catalogue-client.tsx[134-139]
- src/components/dictionary/dictionary-catalogue-pages.tsx[693-693]

## Recommended Fix
Add an inset focus ring to each row link, the same way the PR does for Forms rows: `focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]`. The existing `focus-ring-contained` class also works. On the Dictionary topics link, replace `focus-visible:outline-offset-2` with `focus-visible:-outline-offset-2`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

View resolved (1)

4. Emergent safety shelf drops its red warning ✓ Resolved

Description

The Differentials safety shelf, labelled "Must-check / emergent shelf" or "High-priority
presentation pathways", lost its danger border and background, its red heading and its red buttons.
It now uses a neutral card with the clinical accent colour. Rule 5 in this PR's own decision C8
keeps red for urgent states, and the same PR keeps emergent status tags red, so on an empty-query
Differentials screen the must-check pathways no longer stand out as safety-critical next to ordinary
navigation.

Code

src/components/differentials/differential-stream-workspace.tsx[R820-822]

+            className="grid gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3"
          >
-            <div className="flex items-center gap-2 text-sm font-extrabold text-[color:var(--danger)]">
+            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-eyebrow text-[color:var(--clinical-accent)]">

Relevance

●● Moderate

C8 explicitly treats these as jump links, but retaining stronger emergent emphasis is a
safety-sensitive semantic concern.

PR-#2472
PR-#3031

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Decision C8 rule 5 says "Red means overdue, lapsed or urgent only". statusTone in the same file
keeps a red tag for emergent because "it is a genuine urgency". Yet the shelf that gathers
emergent and must-check items, and is headed by a ShieldAlert icon, is restyled as neutral on the
grounds that its items are only jump links.

docs/design-system/DECISIONS.md[230-231]
src/components/differentials/differential-stream-workspace.tsx[73-79]
src/components/differentials/differential-stream-workspace.tsx[814-835]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The emergent/must-check safety shelf on Differentials lost every red cue, which conflicts with decision C8 rule 5 (red for urgent) and with the emergent tags that stay red in the same file.

## Fix Focus Areas
- src/components/differentials/differential-stream-workspace.tsx[814-835]

## Recommended Fix
Keep a restrained danger cue on the shelf heading. For example, colour the ShieldAlert icon and the label with `text-[color:var(--danger)]` while keeping the neutral card and neutral buttons. Otherwise, record in DECISIONS.md C8 that this shelf is exempt from rule 5.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Context sources

✅ Compliance rules (platform): 9 rules

✅ Skills: accessibility-review, design-review, ui

✅ Cross-repo context — repo relationships

Review mode: Auto: 🚀 Fast: Localized forced-colors token adjustment across two equivalent button paths.

Tip of the day

💡 Did you know, you can tweak Display settings with a live preview to see your comment before it ships

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Previous reviews

Review updated until commit 8fbb304 🚀 Fast

Results up to commit a154913 🧠 Deep

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Admin pages lose return links ✓ Resolved

Description

ContractEndPage and LeaveWalletPage remove their JuniorBackLink controls on the assumption
that the band's Today tab is available. On /admin/contract and /admin/leave, the navigation
registry selects no active tab and ModeBand hides the band, leaving readers without a direct link
back to /admin.

Code

src/components/admin/contract/contract-end-page.tsx[394]

+        {/* One way back: the band's Today tab is Admin Today, so the page adds no second link to it. */}

Relevance

●●● Strong

Route registry gaps make the assumed band return path unavailable; preserving a direct parent link
is a clear navigation fix.

PR-#3336
PR-#3254

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The UX review skill calls for checking navigation and mobile usability. Both changed pages remove
their parent links, while the navigation registry does not recognize either route and the band is
hidden without an active tab.

src/components/admin/contract/contract-end-page.tsx[391-397]
src/components/admin/leave/leave-wallet-page.tsx[588-594]
src/lib/mode-secondary-navigation.ts[487-494]
src/components/mode-band/mode-band.tsx[389-408]
Skill: ux-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Contract end and Leave wallet remove their return links, but neither route displays the mode band whose Today tab was meant to replace them.
## Fix Focus Areas
- src/components/admin/contract/contract-end-page.tsx[391-397]
- src/components/admin/leave/leave-wallet-page.tsx[588-594]
## Recommended Fix
Restore a direct link to `/admin` on both bandless pages, and update the changed tests to assert that the link is present.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Keyboard focus ring is cut off on grouped source and topic rows ✓ Resolved

Description

Source rows (Sources browse and catalogue) and topic links (Dictionary topics) now fill the full
width of a new overflow-hidden rounded-xl group card. They still use the app-wide focus outline,
which is drawn 2px outside the element, so the card clips its left and right sides, plus the top of
the first row and the bottom of the last. Keyboard users tabbing through Sources browse, the Sources
catalogue and the Dictionary topics list see only broken pieces of the focus indicator. Before this
PR each row was its own card with no clipping parent, so the whole ring showed.

Code

src/components/sources/sources-browse-client.tsx[R227-228]

+const rowGrid =
+  "divide-y divide-[color:var(--border)] overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]";

Relevance

●●● Strong

Accepted accessibility precedents require visible focus indicators; overflow clipping clearly breaks
keyboard focus rings.

PR-#2186
PR-#2361

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The global rule :where(button, a, …):focus-visible { outline-offset: 2px } draws the ring outside
the link's box. The new list containers add overflow-hidden, and the rows are full-width links
with no inset focus override, so the outer ring is clipped. The PR fixes this exact problem for
Forms rows (focus-visible:-outline-offset-2 with the comment "the group card clips its corners, so
an outset ring would be cut off") and for Leave wallet rows, but not for Sources or Dictionary
topics. The Dictionary topics link is worse: it sets focus-visible:outline-offset-2 explicitly.

src/app/globals.css[1833-1842]
src/components/sources/sources-browse-client.tsx[143-153]
src/components/sources/sources-catalogue-client.tsx[130-139]
src/components/sources/sources-catalogue-client.tsx[438-444]
src/components/dictionary/dictionary-catalogue-pages.tsx[686-693]
src/components/forms/forms-search-results-page.tsx[531-538]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Rows that now sit inside `overflow-hidden` group cards still use the global outset focus outline (offset 2px), so the card clips the ring on keyboard focus.

## Fix Focus Areas
- src/components/sources/sources-browse-client.tsx[147-152]
- src/components/sources/sources-catalogue-client.tsx[134-139]
- src/components/dictionary/dictionary-catalogue-pages.tsx[693-693]

## Recommended Fix
Add an inset focus ring to each row link, the same way the PR does for Forms rows: `focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]`. The existing `focus-ring-contained` class also works. On the Dictionary topics link, replace `focus-visible:outline-offset-2` with `focus-visible:-outline-offset-2`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Emergent safety shelf drops its red warning ✓ Resolved

Description

The Differentials safety shelf, labelled "Must-check / emergent shelf" or "High-priority
presentation pathways", lost its danger border and background, its red heading and its red buttons.
It now uses a neutral card with the clinical accent colour. Rule 5 in this PR's own decision C8
keeps red for urgent states, and the same PR keeps emergent status tags red, so on an empty-query
Differentials screen the must-check pathways no longer stand out as safety-critical next to ordinary
navigation.

Code

src/components/differentials/differential-stream-workspace.tsx[R820-822]

+            className="grid gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3"
          >
-            <div className="flex items-center gap-2 text-sm font-extrabold text-[color:var(--danger)]">
+            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-eyebrow text-[color:var(--clinical-accent)]">

Relevance

●● Moderate

C8 explicitly treats these as jump links, but retaining stronger emergent emphasis is a
safety-sensitive semantic concern.

PR-#2472
PR-#3031

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Decision C8 rule 5 says "Red means overdue, lapsed or urgent only". statusTone in the same file
keeps a red tag for emergent because "it is a genuine urgency". Yet the shelf that gathers
emergent and must-check items, and is headed by a ShieldAlert icon, is restyled as neutral on the
grounds that its items are only jump links.

docs/design-system/DECISIONS.md[230-231]
src/components/differentials/differential-stream-workspace.tsx[73-79]
src/components/differentials/differential-stream-workspace.tsx[814-835]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The emergent/must-check safety shelf on Differentials lost every red cue, which conflicts with decision C8 rule 5 (red for urgent) and with the emergent tags that stay red in the same file.

## Fix Focus Areas
- src/components/differentials/differential-stream-workspace.tsx[814-835]

## Recommended Fix
Keep a restrained danger cue on the shelf heading. For example, colour the ShieldAlert icon and the label with `text-[color:var(--danger)]` while keeping the neutral card and neutral buttons. Otherwise, record in DECISIONS.md C8 that this shelf is exempt from rule 5.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit 0ef8bd7 🚀 Fast

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Clinical band changes can regress silently ✗ Dismissed

Description

The new clinicalBandAttribute helper controls whether Clinical pages receive their tinted header
band, but the existing phone-mode-group tests do not exercise its route, root-page, or Work-area
conditions. A later change to pathname or mode grouping could therefore remove or add the band
without a focused test failure.

Code

src/lib/phone-mode-groups.ts[R115-120]

+export function clinicalBandAttribute(
+  modeId: AppModeId,
+  pathname: string | null | undefined,
+  onWorkArea: boolean,
+): "" | undefined {
+  return !onWorkArea && (pathname ?? "/") !== "/" && modeMenuSideForMode(modeId) === "clinical" ? "" : undefined;

Relevance

●●● Strong

Accepted history favors focused regression coverage for new route/helper branches and wiring
conditions.

PR-#2938
PR-#2308

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The PR adds clinicalBandAttribute as a new route-dependent helper, while the existing
phone-mode-group test file only exercises grouping and ordering and has no assertions for the
helper's conditions. The testing-review skill requires modified helper utilities to have
corresponding focused Vitest coverage.

src/lib/phone-mode-groups.ts[109-122]
tests/phone-mode-groups.test.ts[1-79]
Skill: testing-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new `clinicalBandAttribute` helper controls server-rendered Clinical header band state, but no focused test covers its route and mode conditions. Regressions could silently change which pages receive the Clinical tint.

## Fix Focus Areas
- src/lib/phone-mode-groups.ts[115-120]
- tests/phone-mode-groups.test.ts[1-79]

## Recommended Fix
Add Vitest cases for `clinicalBandAttribute` covering a non-root Clinical pathname, the shared root pathname, a Work-area route, and a Work-mode pathname. Keep the assertions next to the existing phone-mode-group tests so future changes to mode grouping and band eligibility fail locally.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit 756b654 🚀 Fast

No changes from previous review

Results up to commit 8882f3e 🚀 Fast

No changes from previous review

Results up to commit 670e4d8 🚀 Fast

No changes from previous review

[codeant-ai]

CodeAnt Nitpicks

8 code suggestions

1. On browsers without scroll-driven animations, overflowing chips have no fade cue, and both scrollbar rules hide the scrollbar, making off-screen choices easy to miss.

Css layout issue · src/app/work-mode.css:1665-1676

---

2. On First Nations pages, this marker activates a band that reads the root clinical accent, so the header and safe-area tint stay blue instead of using that mode’s olive tint.

Incorrect variable usage · src/components/clinical-dashboard/master-search-header.tsx:2550

---

3. overflow-hidden clips the positive-offset focus rings on contained links, leaving the first and last dictionary rows without a complete keyboard focus indicator.

Css layout issue · src/components/dictionary/dictionary-catalogue-pages.tsx:124-125

---

4. The aria-label is on a generic div, which cannot be named in the accessibility tree; screen readers will not identify this checkbox collection as “Available mechanisms.”

Possible bug · src/components/formulation/formulation-builder-page.tsx:419

---

5. The new hospital line repeats the name already rendered in FirstWeekPackCard, so users with a selected hospital see the same name twice.

Code quality · src/components/on-call/first-week/first-week-page.tsx:337

---

6. At sm and wider, the header still renders the inline New action; this margin removes the shell gap, leaving the first content row directly beneath it.

Css layout issue · src/components/roster/requests/roster-requests-page.tsx:354

---

7. These generic divs do not expose a named group, so screen-reader users do not get the intended “Pathway steps” label on either layout.

Api mismatch · src/components/therapy-compass/pathway-step-stack.tsx:158-178

---

8. Adding fn-button.tsx to this file-wide exception disables the guard for every mode-identity use there, so unrelated color use can pass unnoticed.

Code quality · tests/first-nations-design.dom.test.tsx:108

[codeant-ai]

CodeAnt PR Risk: Medium Risk

• The PR needs attention before merging because on-call cover can be misplaced in the list.
• When there is no Emergency group, coverGroup renders after department groups, despite the code comment saying it should lead them.

Assessed commit: a154913da7ff

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Qodo Fixer

✅ Committed (3) · ☑ Fixed (3)

Commits pushed directly to this PR — no separate fix PR opened.

Process — 3 fixed

• ☑ Fixed: Admin pages lose return links
• ☑ Fixed: Keyboard focus ring is cut off on grouped source and topic rows
• ☑ Fixed: Emergent safety shelf drops its red warning

[BigSimmo]

Pushed 0ef8bd7. Static PR checks failed because the search header grew 9 lines past its no-growth budget. The Clinical band decision now lives in phone-mode-groups.ts, and the header is back to 3241 lines.

From the Qodo autofix commits, I kept two: the contained focus rings and the red label on the emergent shelf. I reverted "Restore admin return links". The band's Today tab is the one way back to Admin Today (design decision C8), and the Leave wallet and Contract end tests assert the extra link is absent, so restoring it fails both tests.

---

Generated by Claude Code

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code review by qodo was updated up to the latest commit 0ef8bd7

[qodo-code-review]

Code review by qodo was updated up to the latest commit 756b654

[qodo-code-review]

Code review by qodo was updated up to the latest commit 8882f3e

[gitar-bot]

Gitar has auto-approved this PR (configure)

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code review by qodo was updated up to the latest commit 670e4d8

[qodo-code-review]

Code review by qodo was updated up to the latest commit 8fbb304

[gitar-bot]

Gitar has auto-approved this PR (configure)

[gitar-bot]

Code Review ✅ Approved 1 closed / 1 findings

🟡 Medium risk · Broadly restyling clinical and work lists, headings, and priority tags could make urgent items less conspicuous or navigation harder to find.

Unifies Work and Clinical styling with a tinted Clinical band, shared page headings, grouped divided-row lists, neutral priority tags, and single-line chip rows. A resolved finding restored the admin back links that DOM tests expected to be absent, so those tests now pass.

Auto-approved: No blocking issues found.
Please see Auto-approve Docs for details on setting custom approval criteria.

✅ 1 closed

✅ Bug: Restored Admin back links break DOM tests asserting they're absent

📄 src/components/admin/contract/contract-end-page.tsx:395 📄 src/components/admin/leave/leave-wallet-page.tsx:592 📄 tests/admin-contract-page.dom.test.tsx:348-349 📄 tests/admin-leave-wallet-page.dom.test.tsx:77-78
This commit puts back JuniorBackLink with testIds admin-contract-back and admin-leave-back. The DOM tests from the earlier commit were not updated, and they still assert queryByTestId("admin-contract-back") and queryByTestId("admin-leave-back") are null, with a 'One way back' comment. Both tests will now fail. If restoring the links is the intended behaviour, change the assertions to check that the link exists and points to /admin, and update the test names and comments. Otherwise, revert the restoration.

Review coverage

🤖 Auto-approval Approved

📋 Rules No rules evaluated

🧪 Functional validation Not enabled · Set up

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[BigSimmo]

Unit coverage partition (1) failed on 8fbb304 in one test: tests/admin-renewed-sheet.dom.test.tsx ("clears the form once a save has actually completed"). The sheet still showed the saved state when it was reopened. This PR does not touch the renewed sheet or that test. The test passes 9/9 locally on the same commit, and 896 of 897 test files passed in that partition. I think it is a timing flake, not something this PR caused. No fix exists yet, so I'm re-running the failed jobs once. If it fails again I'll treat it as a real failure.

---

Generated by Claude Code