docs(ward-flow): Command screen mockup, premium light edition - #2737
Open
BigSimmo wants to merge 15 commits into
Open
docs(ward-flow): Command screen mockup, premium light edition#2737BigSimmo wants to merge 15 commits into
BigSimmo wants to merge 15 commits into
Conversation
A perfected light-mode treatment of the Ward Flow Command prototype, kept beside the other Ward Flow mockups rather than in the approved Board reference folder, because it proposes a visual identity rather than extending the language those files carry. What changed, all presentation: - Palette: porcelain ground and white panels (no cream), navy ink, one institutional blue, aged gilt reserved for "you are here" marks, and semantic green/amber/red kept apart from the accent. Every text pair is computed against the surface it sits on and printed in the file. - Type: Newsreader for the wordmark and page title only, IBM Plex Sans for the interface, IBM Plex Mono for every id, clock and figure. Nothing renders below 10.5px. - Layout: the same three-column command layout on a 4px rhythm, a rail with named groups, a masthead with the date and clock, a faint field behind each health service on the flow diagram, and the seven-stage stepper as a track with the current and next stage written out once. - Light only, by choice; the dark palette and theme toggle are gone. The data, eligibility engine, reconciliation checks and owner decisions in the script are unchanged apart from diagram geometry and the stepper markup. Reconciliation reports no problems on load. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Contributor
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: 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. Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_3ad73b66-20f6-4ad8-85dd-6e92e89cb225) |
Ledger record for PR #2737 at its reviewed head, written with npm run ledger:append rather than by hand. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
![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: 8aa6791c9d
ℹ️ 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".
The premium Command reference mockup, revised after reviewing the teal-family Command, Capacity and Movement pages and taking the five ideas worth taking: - A state-of-the-day strip in the masthead: open, breached, flagged urgent, escalated, and wards confirmed inside their window, all counted from the data on every render. The clock is a tile beside them so the right of the masthead reads as one instrument. - The page's own reconciliation check is said out loud in the rail foot, with a count of discrepancies when there are any. - A ward whose figures are older than its window carries a "Stale" mark on the flow map, and a long name gives way to the badges. - Exceptions leads the registers, since it is the one register that says what is wrong across every open movement. - Every queue row states its route in words: where the person is and where they are pointed, accepted, referred, or no destination yet. Also corrected from the previous edition: only an eligible or a recorded ward carries a fill on the map; every other verdict is an outline and a word. A dark palette joins the light one, measured pair by pair (35 pairs per theme, all above 4.5:1, printed in the stylesheet header), on the three-root pattern so an explicit choice always wins, with print taking every token's light value. A quiet appearance control in the rail foot lets a reviewer compare. The header comment is rewritten as the nine rules this file keeps. Reconciliation reports no problems on load in either theme. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_95d3e261-aed9-45bf-82df-c18cf4fffc14) |
A further fidelity pass on the premium Command screen, light and dark: - masthead title, chip and disclaimer are one group, so a laptop drops the disclaimer under the title instead of dropping the figures under both - emergency department cards carry two deliberate lines above the bar and the bar's colour repeats the card's own pressure word - every vertical scroll region fades at the edge it continues past, measured on render, scroll and resize, and lifted at the end - the legend is a disclosure, open only where the diagram has room, with the schematic caveat kept on a permanent foot line beside the scroll sentence - the pressure strip gets the diagram's overflow affordance, in words - the diagram fits a full HD centre column without a sideways scroll - the two rail counts are derived, the prototype chip is neutral, tracked labels compensate their trailing tracking, inner corners nest one pixel in - a skip link, a live region that speaks every change of subject, Escape to step back a selection or filter, and an appearance choice remembered per browser with storage failures tolerated - the locked columns no longer squeeze a tab strip shut on a short screen Reconciliation passes with no discrepancies in Chromium at 1200, 1400, 1600 and 1920 wide, in both themes. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
The single standard every Ward Flow mockup is built to, replacing the first edition (Platinum, Raised, Cool) and the visual layer of the Board language while keeping the Board language's five rules and its data rules in full. - The ten rules, the 26 colour tokens in both themes with live swatches, the 35 contrast pairs printed by the build and recomputed by the page on every load, the three faces and the seven-step scale. - Eighteen components rendered from the same stylesheet the Command live edition uses, each with its markup shape, states and rules. - Behaviour, wording and honesty-about-data rules, the accessibility floor and a per-mockup definition of done. - Departures from the Board language with reasons, and the adoption plan for all eighteen mockups in five waves with the decisions the owner must make. - The stylesheet is Command's with five sizes moved onto the scale and an extension block for tables, bands, deltas, charts, disclosures and the tap floor. Published in place at the existing design-system artifact URL with the label "Second edition". verify:pr-local on the file: 15 checks completed, none failed. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
…es it A new mockup, header.html, shows the header every Ward Flow screen will carry, live on a Command page: the title row (title, prototype mark, disclaimer, search with its slash key and refusals, the scope switcher grouped by health service, the one primary action, who is signed in, More), the statistics strip with the clock and an All figures dropdown so the strip never crowds, and the outstanding tasks bar, worst first, where every task is a filter on the queue. Every figure is derived from 23 invented movements on every render and the rail says whether they reconcile. The design system's block gains the header's stylesheet in its extension, section 6.2 renders the header in place of the plain masthead, the shell in 5.4 and the definition of done say so, and the Wave 0 delta for Command now includes the header. The tap floor covers the new controls. Both pages are published as artifacts. verify:pr-local on the two files: 15 checks completed, none failed. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_c696620b-fd6f-4e05-91c6-75638417003c) |
The universal header mockup now offers three single-row options, switchable at the top of the page and stackable for comparison, each built from the design system's block over the same Command body: A, the quiet bar, with every collapsed thing a dropdown under its own control; B, the instrument corner, with the scope, the core figures and the freshness in one bordered cluster and Tasks and Activity as drawers from the right edge; C, the tab strip, with Tasks, Figures and Activity as tabs beside the page's own view, each opening a shelf across the header. Shared by all three: universal search that finds patients by invented name or identifier as well as movements, departments, wards and owners, with the refusals kept; core figures in the corner scoped to the page (Command, Capacity, Referrals via the rail) with the full set behind them; the outstanding tasks and the notices behind one control; an activity pop-out that says what is going on in a sentence derived from the data and lists the last events under a freshness line; a ward contacts pop-out with declared placeholder extensions and addresses; one primary action; Escape in a stated order. Every figure and every name is invented and the page says so. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_cdf21121-1132-4544-a104-9e27c1b04e3f) |
…wers The header mockup settles on the quiet bar. One row: the title and the prototype mark, universal search, the Service selector (all four, or one, filtering the queue, the exceptions, the referrals and every figure on the page), then Activity, Tasks and Tools as matching side drawers, and New referral as the one primary action. Activity opens in two parts: what is going on in a sentence derived from the data and the last events, then the live tally with this page's core figures as tiles and the full set in groups, under a freshness line. Tasks carries the notices with a Seen button and every piece of open work, worst first, each a filter on the queue. Tools carries who is signed in, the handover sheet, the export, the ward and emergency department contact tables with declared placeholder details, the design system, the appearance and sign out. The three options page it replaces stays in history. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
…reen drawn A new mockup offers three side rails, switchable at the top of the page and shown side by side for comparison, each over the settled quiet bar and the same Command body: A, the grouped rail, with the shift block, the pinned movements and a collapse to a strip of glyphs; B, the screen map rail, with two lines per screen, the current screen's own sections beneath it, the bed pressure by health service and who is on call, as roles; C, the strip, a glyph and a word per screen with the shift as a ring, the pinned movements as a fly-out and an expand to full labels. The page also draws every screen: twelve cards in three groups and one flow, each with its purpose, who uses it, the one primary action and a thumbnail of its panels, and a full layout schematic for whichever screen the rail opens, with the live tally following the screen. Every count in the rails follows the Service selector. Every figure and name is invented and the page says so. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
…in text The rail mockup drops the three alternatives for one rail with two designed states over the quiet bar. Open, at 236 pixels: the brand with a hairline in the service hue when one service is chosen, the shift as a ring with the time to handover and a meter, every screen in three groups with its state in one line of text beneath the name where it has one, the current screen's own sections with counts, the pinned movements with the tone bar of the row, and the foot. Closed, at 76 pixels: a glyph and a word per screen, the counts as tags that are red only for a breach and amber for an old referral, a card on hover with the screen's purpose and state, the shift as a ring around the coordinator's initials, and the pinned movements as a fly-out. The bracket key flips between them, the width animates unless motion is reduced, and both can be shown side by side. The screen map and the layout schematics stay. The page also lists what was added and why, and what was considered and left out. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
The open rail no longer lists the current screen's sections beneath it; the page's own headings do that job and the rail stays a list of screens. The tone moves off the count and onto a dot beside the glyph in both states, red only where a legal deadline has passed behind that screen and amber where something wants looking at, so a red count can never be read as a count of breaches. The Governance line that repeated its own tag goes. The page's notes say what was removed on review and why. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_0edf7f44-6da8-4f56-b963-239f95e164c7) |
A document between the design system and the mockups: what every part of the shell is, what it holds, how it behaves, and how a builder cuts it from the system. It lists the four mockups with their status and the earlier pages to re-cut, then the shell, the bar control by control with its collapse ladder and keyboard, universal search with its refusals, the Service selector, the Activity, Tasks and Tools drawers, New referral, the rail open and closed with what each item carries, all twelve screens with their columns, panels, live tally and rail entry, the data and wording contract, the build order with fifteen checks and the measures proved so far, and the decisions still pending. Set in the design system's own guide layout, both themes. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
…e tables Final polish pass on the Ward Flow build sheet mockup document: - Section cells in the mockup and bar tables now link to their sections - Section 3 gains Layers (z-index ladder), Keys, and "What the page says" (live-region announcements) tables ahead of the markup contract - Section 4 gains "Every pop-out, in one table" before Behaviour - Section 11 gains a glyph gallery of the 14 rail and 4 bar icons - Section 14 gains "Every empty state, in one place" All counts in the topbar and rail remain derived from the document on render. Gate: verify:pr-local completed with no failures. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
The Command mockup now sits inside the settled shell: the quiet bar across the top (search, service selector, Activity, Tasks and Tools drawers, New referral) and the rail down the left, open or closed. - The page keeps its own data, panels, diagram, shortlist, registers and reconciliation checks unchanged in substance. - The shell reads that data through one window object, so every figure on the rail, in the drawers and in search is counted from the same arrays the panels read, and the rail's reconcile line also carries the page's own check. - The service selector scopes the queue, the ED strip, the referral queue, the exception, override and refused registers and the masthead figures. The statewide diagram and the shortlist stay statewide by design. - Task rows and search filter the page's own queue, with the filter stated in the queue's filter bar. Escape clears shell state first, then the page's own two levels. - Search finds movements by identifier, cohort or legal status; no names appear on this screen. Rendered offline at five widths, light and dark, both rail states: no console errors, no sideways overflow, all figures reconcile. Gate: verify:pr-local completed with no failures. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
…defects Four findings from review of the Command mockup, each reproduced before it was changed and re-measured after. No viewport declaration, so Chromium laid the standalone document out at 980 CSS pixels on a phone and shrank it. The max-width 640px rules never matched. With the meta tag a 390px device reports innerWidth 390 and the phone rules activate. The shortlist split into two columns on a viewport media query, but the rail takes 15rem so the panel is much narrower than the screen. Measured by sweeping the panel: the second column clips its eligibility rows and controls up to a panel width of 620px and is clean from 630px. The split now keys off the panel's own width through a container query at 39.5rem, just above that floor. At 1001 to 1160px the panel is one column instead of a clipped two, and 1280px and above are unchanged. This also cuts the page's own horizontal overflow at 1001px from 78px to 45px. role="tabpanel" sat on the queue <ul> itself, which replaces the native list role and leaves every <li> without a list parent. The role moves to a wrapper and the list keeps its own role; the wrapper is now the flex child that gives up height, with a [hidden] guard so the inactive tab still collapses. The scroll, fade and render targets follow the list. The flow diagram was one role="img" containing role="button" nodes, an atomic object with interactive descendants. It is now role="group" with the same accessible name, so the node buttons stay reachable. Verified with axe-core 4.13.0 at 1440x900: nested-interactive, aria-allowed-role, list and listitem all report no violations. The four that remain (html-has-lang, landmark-one-main, region, heading-order) are pre-existing and outside these findings. Tab switching still works: patients 14 rows, referrals 5 rows, inactive pane hidden. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0142trjgjRAP2GA9wzqoYUAE
Contributor
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_6d5d6c7a-27db-4f55-8a61-bf4d59802af9) |
BigSimmo
pushed a commit
that referenced
this pull request
Sep 8, 2026
The handover checkpoint added HANDOVER.md and inputs/SHELL-SPEC.md, which cite five paths that do not resolve on this branch, and docs:check-links failed static-pr on the merge head. None of the five is a mistake to repoint. SHELL-SPEC.md is the numbered inventory of the artifacts this kit was built from, each with its published artifact URL: design-standard.html, header.html and rail.html live on the working line the owner published the shell from, and command-premium.html is on claude/hospital-mockup-premium-qzq6cx via PR #2737. Repointing those citations at files on this branch would misattribute where each rule was extracted from. HANDOVER.md's SHELL-REVIEW.md row says in its own text "Not written. The review agent was cut off. Do it first", so it is a work item that resolves when that step is done. Both go in the scoped allowlist with their reasons, which is what that mechanism is for and matches the existing ward-flow entries. The documents are left byte-for-byte as the handover wrote them. Verified: docs link check passed, 7405 repo path references resolve. Both artifacts still report ALL GREEN through the kit's own harness. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0142trjgjRAP2GA9wzqoYUAE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
docs/ward-flow/mockups/command-premium.html, a perfected light-mode treatment of the Ward Flow Command prototype (the synthetic bed-coordination screen: ED pressure strip, priority and referral queues, statewide flow diagram, explainable shortlist and the four registers). The same file is published as the owner's artifact.docs/ward-flow/design/prototypes/, which the README marks as the approved Board reference and not a target for further editing. This file proposes a visual identity for the owner to judge and does not change either canonical style block.Verification
npm run verify:pr-local -- --files docs/ward-flow/mockups/command-premium.htmlPrettier:
All matched files use Prettier code style!on the committed file, run with the repository config.Rendered once in headless Chromium at 1600×1000 with the three font families inlined:
window.__commandCheck(the page's own reconciliation) returned[], no page errors, no horizontal overflow.UI verification not run:
verify:uicoverssrc/routes; this file is a standalone reference document underdocs/, not a route, and nothing undersrc/changed.verify:release, retrieval evals, production and deployment readiness: not applicable, no executable product scope.Risk and rollout
Clinical Governance Preflight
Not in scope (no ingestion, answer generation, search, source rendering, document access, privacy or clinical output change). The page keeps every synthetic-data disclosure the prototype already carried: the "Synthetic prototype" mark and disclaimer in the masthead, and a foot note stating that every figure is invented and only the site and health-service names are real.
Notes
docs/ward-flow/mockups/do; nothing undersrc/gains a third-party font request.🤖 Generated with Claude Code
https://claude.ai/code/session_01RTDYAFCzEyhGNRhAhHjnZr
Generated by Claude Code
Note
Low Risk
Documentation and static HTML only; no product routes, dependencies, or runtime behavior changes.
Overview
Adds
docs/ward-flow/mockups/command-premium.html, a docs-only premium light take on the Ward Flow Command prototype (ED pressure strip, queues, statewide flow diagram, explainable shortlist, registers). Presentation-only: synthetic data, eligibility logic, and reconciliation checks stay the same; updates are mainly visual (porcelain/white surfaces, navy ink, institutional blue, gilt for “you are here”, Newsreader + IBM Plex, light-only with dark mode and theme toggle removed) plus small UI tweaks (diagram geometry, seven-stage stepper as a track with current/next spelled out).The mockup lives under
docs/ward-flow/mockups/as an owner reference, not in the frozen Board prototype path. The diff also appends an immutable branch-review record capturing PR handoff, green CI scope, and local verification (Prettier, headless Chromium,window.__commandCheckclean).Reviewed by Cursor Bugbot for commit 795b03e. Configure here.