feat: US-018 - Skip boot/login sequence for dev iteration
This commit is contained in:
+154
-225
@@ -1,15 +1,15 @@
|
|||||||
{
|
{
|
||||||
"project": "Portfolio — Dashboard Restructure & Graph Improvements",
|
"project": "Portfolio — Typography & Spacing Scale Rework",
|
||||||
"branchName": "ralph/dashboard-restructure",
|
"branchName": "ralph/dashboard-restructure",
|
||||||
"description": "Restructure the dashboard into two parent sections (Patient Summary, Patient Pathway), improve constellation graph clarity, add hover-highlighting between experience/skills and graph, remove inaccurate CV data, and explore parent header typography.",
|
"description": "Rework the entire type scale, spatial tokens, and layout proportions so the dashboard reads comfortably on a 2560x1440 QHD display. Everything is currently undersized — body text at 13px, labels at 9-10px, sidebar details at 11px. Scale up proportionally with larger type, wider sidebar, taller topbar, and more generous spacing.",
|
||||||
"userStories": [
|
"userStories": [
|
||||||
{
|
{
|
||||||
"id": "US-001",
|
"id": "US-018",
|
||||||
"title": "Skip boot/login sequence for dev iteration",
|
"title": "Skip boot/login sequence for dev iteration",
|
||||||
"description": "As a developer, I want to skip the boot/ECG/login animation during this feature branch so I can iterate on the dashboard quickly.",
|
"description": "As a developer, I want to skip the boot/ECG/login animation during this feature work so I can iterate on dashboard sizing quickly.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"In src/App.tsx, change the initial Phase state from 'boot' to 'pmr' so the app loads directly to the dashboard",
|
"In src/App.tsx, change the initial Phase state from 'boot' to 'pmr' so the app loads directly to the dashboard",
|
||||||
"The boot, ECG, and login phases are still present in code — only the initial state changes",
|
"The boot, ECG, and login phases remain in code — only the initial state changes",
|
||||||
"App loads directly to the dashboard layout on refresh",
|
"App loads directly to the dashboard layout on refresh",
|
||||||
"Typecheck passes"
|
"Typecheck passes"
|
||||||
],
|
],
|
||||||
@@ -18,278 +18,207 @@
|
|||||||
"notes": "Temporary — final story reverts this."
|
"notes": "Temporary — final story reverts this."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-002",
|
"id": "US-019",
|
||||||
"title": "Remove inaccurate CV data from consultations and constellation",
|
"title": "Update global layout tokens and Card/CardHeader component",
|
||||||
"description": "As Andy, I want only real career entries so the portfolio doesn't contain fabricated content.",
|
"description": "As a viewer, I want the foundational layout dimensions and card sizing to be larger so everything downstream inherits better proportions.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Remove the 'duty-pharmacist-2016' entry from src/data/consultations.ts — this role is not in References/CV_v4.md",
|
"In src/index.css, update --sidebar-width from 272px to 304px",
|
||||||
"Remove the corresponding role node for duty-pharmacist-2016 from src/data/constellation.ts constellationNodes array",
|
"Update --topbar-height from 48px to 56px",
|
||||||
"Remove all links referencing duty-pharmacist-2016 from constellationLinks array",
|
"Update --subnav-height from 36px to 42px",
|
||||||
"Remove duty-pharmacist-2016 from roleSkillMappings",
|
"Update .dashboard-grid gap from 12px (mobile) to 14px, and 16px (tablet/desktop) to 20px",
|
||||||
"Verify 4 roles remain in consultations.ts: interim-head-2025, deputy-head-2024, high-cost-drugs-2022, pharmacy-manager-2017",
|
"In src/components/Card.tsx, update Card padding from 20px to 24px",
|
||||||
"Verify 4 role nodes remain in constellation.ts",
|
"In Card.tsx CardHeader: title fontSize from 12px to 13px",
|
||||||
|
"CardHeader right text fontSize from 10px to 11px",
|
||||||
|
"CardHeader dot size from 8px to 9px",
|
||||||
|
"CardHeader marginBottom from 16px to 18px",
|
||||||
"Typecheck passes"
|
"Typecheck passes"
|
||||||
],
|
],
|
||||||
"priority": 2,
|
"priority": 2,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Check References/CV_v4.md for the accurate role list. The CV has 4 roles: Interim Head, Deputy Head, High-Cost Drugs, Pharmacy Manager (Tesco)."
|
"notes": "These are foundational tokens — many components reference --sidebar-width, --topbar-height, --subnav-height via CSS vars, so changes propagate automatically. Card.tsx changes affect every card and subsection header in the dashboard."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-003",
|
"id": "US-020",
|
||||||
"title": "Fix inaccurate timeline entries in CareerActivityTile",
|
"title": "Scale TopBar and SubNav",
|
||||||
"description": "As Andy, I want the career timeline to only show real certifications and remove fabricated project entries.",
|
"description": "As a viewer, I want the TopBar and SubNav to feel substantial rather than thin strips across the top of the screen.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"In src/components/tiles/CareerActivityTile.tsx buildTimeline() function, remove the 'Power BI Data Analyst Associate' certification entry — not in CV",
|
"In src/components/TopBar.tsx: brand text fontSize from 13px to 15px",
|
||||||
"Remove the 'Clinical Pharmacy Diploma' certification entry — not in CV",
|
"TopBar 'Remote' label fontSize from 11px to 12px",
|
||||||
"Add 'NHS Leadership Academy — Mary Seacole Programme' as a certification entry with date '2018' and meta 'NHS leadership qualification'",
|
"Search bar text fontSize from 13px to 14px",
|
||||||
"Remove the 'SQL Analytics Transformation' project entry — not a standalone project in the CV",
|
"Search bar height from 42px to 46px",
|
||||||
"Remove the 'Budget Oversight' project entry — budget management is a skill, not a project",
|
"Ctrl+K kbd fontSize from 10px to 11px",
|
||||||
"Add A-Levels entry: title 'A-Levels: Mathematics (A*), Chemistry (B), Politics (C)', meta 'Highworth Grammar School', date '2009–2011', type 'edu'",
|
"Session 'A.RECRUITER' text fontSize from 12px to 13px",
|
||||||
"Verify remaining timeline matches CV_v4.md: 4 roles + GPhC Registration + MPharm + Mary Seacole + A-Levels",
|
"Session badge fontSize from 11px to 12px",
|
||||||
"Typecheck passes"
|
"Skip-to-content link fontSize from 13px to 14px",
|
||||||
|
"Home icon size from 18 to 20",
|
||||||
|
"Search icon size from 16 to 17",
|
||||||
|
"In src/components/SubNav.tsx: tab fontSize from 13px to 14px",
|
||||||
|
"SubNav minHeight from 36px to 42px (matching the updated --subnav-height)",
|
||||||
|
"Typecheck passes",
|
||||||
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 3,
|
"priority": 3,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Reference CV at References/CV_v4.md. The role entries in the timeline reference consultations by consultationId — since duty-pharmacist-2016 was removed in US-002, also remove any timeline entry referencing it."
|
"notes": "TopBar and SubNav heights are controlled by CSS vars updated in US-019. This story just scales the internal text and elements. The search bar min/max widths may also need slight adjustment — use judgement."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-004",
|
"id": "US-021",
|
||||||
"title": "Create ParentSection component for hierarchical layout",
|
"title": "Scale Sidebar proportions",
|
||||||
"description": "As a developer, I need a parent section wrapper component that visually distinguishes top-level sections from child subsections.",
|
"description": "As a viewer, I want the sidebar text and spacing to be comfortably readable rather than tiny and cramped.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Create src/components/ParentSection.tsx with props: title (string), children (ReactNode), optional className",
|
"In src/components/Sidebar.tsx: sidebar padding from '20px 16px' to '24px 20px'",
|
||||||
"Parent section renders as a Card (using existing Card component) spanning full width",
|
"Avatar size from 52px to 60px, font size from 18px to 20px",
|
||||||
"Header text is large and prominent — at minimum 2.4rem (36px at 1920px) — clearly a top-level section marker, not a small label",
|
"Name fontSize from 15px to 17px",
|
||||||
"Header uses font-ui (Elvaro Grotesque) at weight 600-700",
|
"Job title fontSize from 11.5px to 13px",
|
||||||
"Header text color is pmr-text-primary (#1A2B2A)",
|
"Status badge fontSize from 11px to 12px, dot from 6px to 7px",
|
||||||
"No colored dot on parent headers (dots are for subsections only)",
|
"All detail row fontSize from 11.5px to 13px (labels and values)",
|
||||||
"20px (1.333rem) padding below header before children content",
|
"GPhC mono number fontSize from 11px to 12px",
|
||||||
"Component accepts children which will be the subsections",
|
"SectionTitle component fontSize from 10px to 11px",
|
||||||
"Typecheck passes"
|
"TagPill fontSize from 10.5px to 12px, padding from '3px 8px' to '4px 10px'",
|
||||||
|
"AlertFlag fontSize from 11px to 13px, padding from '7px 10px' to '8px 12px'",
|
||||||
|
"AlertFlag icon size from 14 to 16, container from 16px to 18px",
|
||||||
|
"Detail row padding from '2px 0' to '4px 0', gap from 6px to 8px",
|
||||||
|
"PersonHeader section marginBottom from 6px to 10px",
|
||||||
|
"Tags and Alerts section padding adjusted proportionally",
|
||||||
|
"Typecheck passes",
|
||||||
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 4,
|
"priority": 4,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "This is a new component — not modifying Card.tsx. ParentSection wraps Card and adds the large header treatment. Subsection headers continue to use the existing CardHeader style (12px uppercase with colored dot)."
|
"notes": "Sidebar width is already updated via CSS var in US-019. This story handles all internal sizing. The sidebar has many repeated patterns (detail rows) — ensure consistency across all rows."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-005",
|
"id": "US-022",
|
||||||
"title": "Restructure Patient Summary as parent section with Latest Results subsection",
|
"title": "Scale PatientSummaryTile content and KPIs",
|
||||||
"description": "As a visitor, I want Patient Summary to contain the profile and Latest Results as a subsection.",
|
"description": "As a viewer, I want the Patient Summary to feel like the commanding hero section of the dashboard with comfortable body text and prominent KPIs.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"In DashboardLayout.tsx, replace the standalone PatientSummaryTile and LatestResultsTile with a single ParentSection titled 'Patient Summary'",
|
"In src/components/tiles/PatientSummaryTile.tsx: profile text fontSize from 13px to 15px, lineHeight from 1.6 to 1.65",
|
||||||
"Inside the ParentSection, render the profile text (from PatientSummaryTile) first",
|
"KPI MetricCard value fontSize from 28px to 34px",
|
||||||
"Remove the 4 headline metric figures (9+ Years, 1.2M, £220M, £14.6M+) that are currently in PatientSummaryTile — these are redundant with the KPIs",
|
"KPI label fontSize from 12px to 14px",
|
||||||
"Below the profile text, render Latest Results content as a subsection with its own CardHeader-style header ('LATEST RESULTS' with teal dot)",
|
"KPI sublabel fontSize from 10px to 12px",
|
||||||
"KPI flip cards retain their existing click-to-detail behaviour",
|
"KPI card padding from 16px to 20px",
|
||||||
"The standalone LatestResultsTile import is removed from DashboardLayout",
|
"KPI grid gap from 12px to 16px",
|
||||||
|
"Latest Results section marginTop from 24px to 28px",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 5,
|
"priority": 5,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "The Latest Results subsection should look like a section within the parent card — use a CardHeader for 'LATEST RESULTS' and render the KPI grid below it. The parent ParentSection header 'Patient Summary' should be visually dominant."
|
"notes": "The profile text is the largest body copy block in the dashboard — it must feel effortlessly readable. KPI values should be the most visually prominent numbers on the page."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-006",
|
"id": "US-023",
|
||||||
"title": "Create Patient Pathway parent section with constellation graph",
|
"title": "Scale LastConsultationSubsection and main content padding",
|
||||||
"description": "As a visitor, I want a 'Patient Pathway' parent section that contains the constellation graph at the top.",
|
"description": "As a viewer, I want career consultation details and the overall content area to match the new scale.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"In DashboardLayout.tsx, replace the standalone CareerActivityTile with a ParentSection titled 'Patient Pathway'",
|
"In src/components/DashboardLayout.tsx LastConsultationSubsection: field label fontSize from 10px to 12px",
|
||||||
"The constellation graph (CareerConstellation component) renders at the top of the Patient Pathway section",
|
"Field value fontSize from 11.5px to 13px",
|
||||||
"The CareerConstellation receives onRoleClick and onSkillClick handlers (same as current CareerActivityTile)",
|
"Role title fontSize from 13.5px to 15px",
|
||||||
"The standalone CareerActivityTile import is removed from DashboardLayout",
|
"Examination bullet fontSize from 12.5px to 14px",
|
||||||
|
"Bullet dot top offset adjusted for new line height",
|
||||||
|
"View full record button fontSize from 12px to 13px, ChevronRight size from 14 to 15",
|
||||||
|
"In DashboardLayout main content area: update className padding from 'p-4 pb-8 md:p-6 md:pb-10 lg:px-7 lg:pt-6 lg:pb-10' to 'p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12'",
|
||||||
|
"LastConsultation field gap from 16px to 20px",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 6,
|
"priority": 6,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "This story just sets up the parent section with the graph. The Last Consultation, experience/skills columns, and education are added in subsequent stories."
|
"notes": "LastConsultationSubsection is defined inline in DashboardLayout.tsx (around lines 57-232). The main content padding classes are on the <motion.main> element around line 369."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-007",
|
"id": "US-024",
|
||||||
"title": "Move Last Consultation into Patient Pathway as subsection",
|
"title": "Scale ProjectsTile and EducationSubsection",
|
||||||
"description": "As a visitor, I want the most recent role details to appear within Patient Pathway below the graph.",
|
"description": "As a viewer, I want project entries and education entries to be readable and well-spaced.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Inside the Patient Pathway ParentSection (below the constellation graph), add a 'LAST CONSULTATION' subsection with green dot CardHeader",
|
"In src/components/tiles/ProjectsTile.tsx: ProjectItem fontSize from 11.5px to 13px",
|
||||||
"Render the last consultation content: date, organisation, type, band, role title, examination bullets — same content as the current LastConsultationTile",
|
"ProjectItem padding from '10px 12px' to '12px 16px'",
|
||||||
"The standalone LastConsultationTile is removed from DashboardLayout grid",
|
"Project year label fontSize from 10px to 11px",
|
||||||
"The LastConsultationTile.tsx file can be deleted (content is now inline in the Patient Pathway section)",
|
"Tech stack tag fontSize from 9px to 10px, padding from '2px 6px' to '3px 8px'",
|
||||||
|
"Project list gap from 8px to 10px",
|
||||||
|
"Status dot from 7px to 8px",
|
||||||
|
"In src/components/EducationSubsection.tsx: base fontSize from 12px to 13px",
|
||||||
|
"Education entry padding from '10px 12px' to '12px 16px'",
|
||||||
|
"Education title fontSize from 12.5px to 14px",
|
||||||
|
"Institution fontSize from 11px to 12px",
|
||||||
|
"Education detail fontSize from 10.5px to 12px",
|
||||||
|
"Year label fontSize from 10px to 11px",
|
||||||
|
"Education list gap from 10px to 12px",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 7,
|
"priority": 7,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Reuse the rendering logic from LastConsultationTile — either inline it or extract a shared sub-component. The important thing is it lives inside the Patient Pathway ParentSection now."
|
"notes": "Both are list-style components with similar patterns. ProjectsTile is a standalone card, EducationSubsection is inside Patient Pathway."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-008",
|
"id": "US-025",
|
||||||
"title": "Add two-column experience and skills layout in Patient Pathway",
|
"title": "Scale WorkExperienceSubsection and RepeatMedicationsSubsection",
|
||||||
"description": "As a visitor, I want work experience on the left and skills on the right within Patient Pathway.",
|
"description": "As a viewer, I want work experience roles and skill entries in the two-column layout to be comfortably readable.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Below the Last Consultation subsection in Patient Pathway, add a two-column CSS grid layout",
|
"In src/components/WorkExperienceSubsection.tsx: role title fontSize from 12.5px to 14px",
|
||||||
"Left column: subsection header 'WORK EXPERIENCE' (teal dot), lists all 4 roles from consultations.ts with accordion expand (one at a time)",
|
"Organisation fontSize from 11px to 12px",
|
||||||
"Right column: subsection header 'REPEAT MEDICATIONS' (amber dot), shows categorised skills with expand — same content as CoreSkillsTile",
|
"Duration fontSize from 10px to 11px",
|
||||||
"Each role entry shows: role title, organisation, date range. Click to expand shows examination bullets and coded entries",
|
"Role item header padding from '10px 12px' to '12px 14px'",
|
||||||
"On mobile (below md/768px), columns stack vertically: experience above skills",
|
"Expanded content examination bullet fontSize from 11.5px to 13px",
|
||||||
"Grid gap matches the dashboard grid gap (16px / 1.067rem)",
|
"Coded entry tag fontSize from 10px to 11px, padding from '2px 6px' to '3px 8px'",
|
||||||
"The standalone CoreSkillsTile is removed from DashboardLayout grid",
|
"View full record link fontSize from 11px to 12px",
|
||||||
|
"Role list gap from 8px to 10px",
|
||||||
|
"Teal dot from 8px to 9px",
|
||||||
|
"In src/components/RepeatMedicationsSubsection.tsx: skill name fontSize from 12.5px to 14px",
|
||||||
|
"Skill frequency text fontSize from 10.5px to 12px",
|
||||||
|
"Skill status badge fontSize from 10px to 11px, padding from '2px 7px' to '3px 8px'",
|
||||||
|
"Skill row padding from '8px 10px' to '10px 12px'",
|
||||||
|
"Skill icon container from 26px to 30px, icon size from 13 to 15",
|
||||||
|
"Category section label fontSize from 10px to 11px",
|
||||||
|
"Category item count fontSize from 10px to 11px",
|
||||||
|
"View all button fontSize from 11px to 12px",
|
||||||
|
"Skill row gap from 6px to 8px",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 8,
|
"priority": 8,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Reuse expansion patterns from existing CareerActivityTile and CoreSkillsTile. The two-column layout is within the Patient Pathway ParentSection card, not separate cards."
|
"notes": "These two components sit side by side in the Patient Pathway two-column layout. Both are dense with inline style objects. The changes are mechanical — find each fontSize/padding and bump it up."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-009",
|
"id": "US-026",
|
||||||
"title": "Move Education into Patient Pathway as subsection",
|
"title": "Adjust ParentSection headings for new proportions",
|
||||||
"description": "As a visitor, I want education entries at the bottom of Patient Pathway so all career-related info is in one place.",
|
"description": "As a viewer, I want the parent section headings to remain visually dominant now that body text is larger.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Below the two-column experience/skills grid in Patient Pathway, add an 'EDUCATION' subsection with purple dot CardHeader",
|
"In src/components/ParentSection.tsx: evaluate whether heading sizes still create clear hierarchy with the scaled-up body text",
|
||||||
"Render education entries: MPharm, Mary Seacole Programme, A-Levels (same content as EducationTile plus A-Levels added in US-003)",
|
"Current responsive scale: 1.375rem (22px) → 1.6rem (25.6px) → 1.8rem (28.8px) → 2.2rem (35.2px)",
|
||||||
"The standalone EducationTile is removed from DashboardLayout grid",
|
"If body text at 15px makes the heading feel less dominant, bump desktop heading to 2.4rem (38.4px)",
|
||||||
"The EducationTile.tsx file can be deleted (content now in Patient Pathway)",
|
"Heading paddingBottom may need to increase from 1.333rem to 1.5rem to maintain spacing proportion",
|
||||||
|
"Use Playwright to verify the heading-to-body ratio feels right at 2560x1440",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 9,
|
"priority": 9,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Education is the bottom-most subsection in Patient Pathway. Include A-Levels: Mathematics (A*), Chemistry (B), Politics (C) — Highworth Grammar School, 2009–2011."
|
"notes": "This is a judgement call — the agent should look at the dashboard after all previous scaling and decide if headings need adjustment. They may be fine as-is, or may need a small bump. Use dev-browser to compare."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-010",
|
"id": "US-027",
|
||||||
"title": "Clean up removed standalone tiles and verify layout",
|
"title": "Visual regression check across all breakpoints",
|
||||||
"description": "As a developer, I need to remove orphaned tile components and verify the dashboard grid has no gaps.",
|
"description": "As a developer, I need to verify the scaled dashboard works at all viewport sizes without overflow or layout breaks.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
"Delete src/components/tiles/LastConsultationTile.tsx if not already deleted",
|
"Use Playwright to verify at 2560x1440 (QHD) — primary target, everything should feel commanding and well-proportioned",
|
||||||
"Delete src/components/tiles/CoreSkillsTile.tsx if not already deleted",
|
"Verify at 1920x1080 (HD) — content should still be comfortable, not oversized",
|
||||||
"Delete src/components/tiles/LatestResultsTile.tsx if not already deleted",
|
"Verify at 1440x900 — should work without overflow",
|
||||||
"Delete src/components/tiles/EducationTile.tsx if not already deleted",
|
"Verify at 768px width (tablet) — sidebar hidden, single column, no overflow or truncation",
|
||||||
"Delete src/components/tiles/CareerActivityTile.tsx if not already deleted",
|
"Verify at 375px width (mobile) — everything stacks, no horizontal scroll",
|
||||||
"DashboardLayout grid contains only: PatientSummary ParentSection (full width) + Patient Pathway ParentSection (full width) + ProjectsTile (if it remains)",
|
"No horizontal scrollbar at any tested width",
|
||||||
"No broken imports or unused imports remain",
|
"Fix any overflow, wrapping, truncation, or spacing issues discovered during verification",
|
||||||
"No visual gaps in the dashboard grid",
|
"npm run build succeeds without errors",
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill"
|
|
||||||
],
|
|
||||||
"priority": 10,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "ProjectsTile may remain as a standalone tile or be absorbed — check if it still makes sense as standalone. If so, keep it. The key outcome is that the deleted tiles have no remaining references."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-011",
|
|
||||||
"title": "Improve constellation graph visual clarity",
|
|
||||||
"description": "As a visitor, I want the graph to be clearer with better contrast, larger nodes, and an off-white background.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"Graph container has an off-white background (e.g. #F5F7F6 or similar warm neutral) — can use the existing radial gradient approach but with a more visible base colour",
|
|
||||||
"Link lines use slightly thicker stroke (from 1px to 1.5-2px) and higher contrast colour (darker than current #D4E0DE at 0.3 opacity)",
|
|
||||||
"Role node radius increased from 24px to at least 30px",
|
|
||||||
"Skill node radius increased from 10px to at least 14px",
|
|
||||||
"Skill label font size increased from 9px to 10-11px for readability",
|
|
||||||
"Graph is initially scaled/zoomed so nodes fill the container at a comfortable viewing size — adjust force simulation parameters if needed (reduce charge repulsion, adjust link distance)",
|
|
||||||
"All existing interactions preserved (hover dim/highlight, click, keyboard nav)",
|
|
||||||
"Responsive height tiers still work (400/300/250px)",
|
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill"
|
|
||||||
],
|
|
||||||
"priority": 11,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "The key issue is readability — the current graph is too sparse/faint. Larger nodes, thicker links, and stronger colours will help. The background should provide subtle contrast so the white card surface feels like the graph 'lives somewhere'."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-012",
|
|
||||||
"title": "Add hover-highlighting between experience/skills and constellation graph",
|
|
||||||
"description": "As a visitor, I want to hover over an experience or skill entry and see the corresponding node highlighted in the graph.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"Add a highlightedNodeId state (string | null) to the Patient Pathway parent component",
|
|
||||||
"Pass highlightedNodeId as a prop to CareerConstellation",
|
|
||||||
"CareerConstellation applies its existing hover highlight logic when highlightedNodeId changes (dim non-connected nodes, brighten connected links)",
|
|
||||||
"When hovering a work experience entry, set highlightedNodeId to the corresponding consultation ID (which maps to a role node)",
|
|
||||||
"When hovering a skill entry, set highlightedNodeId to the skill ID",
|
|
||||||
"Highlight clears when mouse leaves the entry (set highlightedNodeId to null)",
|
|
||||||
"On touch devices: tap to highlight, tap elsewhere to clear",
|
|
||||||
"Highlighting feels immediate — no perceptible delay",
|
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill"
|
|
||||||
],
|
|
||||||
"priority": 12,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "CareerConstellation already has hover logic that dims non-connected nodes. The new prop should trigger the same visual effect but from an external source. Use the existing adjacency map and opacity/stroke manipulation."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-013",
|
|
||||||
"title": "Update command palette data for restructured dashboard",
|
|
||||||
"description": "As a developer, I need the command palette search index to reflect the new section structure.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"In src/lib/search.ts, update buildPaletteData() to reference new tile IDs (patient-summary, patient-pathway instead of old tile IDs)",
|
|
||||||
"Scroll actions target the correct data-tile-id values for the new ParentSection components",
|
|
||||||
"Skills palette items still open detail panels correctly",
|
|
||||||
"Experience items still open detail panels correctly",
|
|
||||||
"Remove any palette entries that reference deleted tiles (LastConsultation standalone, etc.)",
|
|
||||||
"Remove palette entries for deleted certifications (Power BI, Clinical Diploma) and projects (SQL Analytics Transformation, Budget Oversight)",
|
|
||||||
"Add palette entry for Mary Seacole Programme",
|
|
||||||
"Typecheck passes"
|
"Typecheck passes"
|
||||||
],
|
],
|
||||||
"priority": 13,
|
"priority": 10,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "The palette data model uses tileId for scroll targeting — these need to match the new data-tile-id attributes on ParentSection components."
|
"notes": "Use Playwright browser_resize to test each breakpoint. Take screenshots at each size. Fix any issues found — this may involve adding responsive overrides or adjusting min-widths."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-014",
|
"id": "US-028",
|
||||||
"title": "Responsive verification and fixes",
|
|
||||||
"description": "As a developer, I need to verify the restructured dashboard works at all viewport sizes.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"At 375px (mobile): single column, Patient Summary and Patient Pathway stack vertically, experience/skills columns stack, graph fits container, all text wraps",
|
|
||||||
"At 768px (tablet): single column, comfortable spacing",
|
|
||||||
"At 1024px (desktop): full layout, two-column experience/skills grid visible, sidebar inline",
|
|
||||||
"At 1920px: layout visually balanced, graph nodes and labels readable",
|
|
||||||
"No horizontal scrollbar at any tested width",
|
|
||||||
"Parent section headers scale appropriately across breakpoints",
|
|
||||||
"Fix any issues discovered during verification",
|
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill at 375px, 768px, 1024px, and 1920px widths"
|
|
||||||
],
|
|
||||||
"priority": 14,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "Use Playwright to resize browser and take snapshots at each breakpoint. Fix any overflow, wrapping, or spacing issues found."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-015",
|
|
||||||
"title": "Explore parent header typography options",
|
|
||||||
"description": "As a designer, I want to evaluate different font treatments for parent section headers to find the most visually striking option.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"Test Patient Summary and Patient Pathway headers with Elvaro Grotesque at weights 300, 400, 500, 600, 700, 900",
|
|
||||||
"Test headers with Blumir variable font at weights 100, 300, 500, 700",
|
|
||||||
"Test at sizes from 2rem (30px) up to 3.2rem (48px)",
|
|
||||||
"Consider uppercase vs title case vs sentence case for parent headers",
|
|
||||||
"Take screenshots of at least 3 different options for comparison",
|
|
||||||
"Headers must complement the clinical/luxury aesthetic — premium and intentional, not generic",
|
|
||||||
"Select the best option based on visual hierarchy, readability, and design coherence",
|
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill"
|
|
||||||
],
|
|
||||||
"priority": 15,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "Explored 14 options across Elvaro (300-900) and Blumir (100-700), title case vs uppercase, sizes 1.4-3rem, various tracking. Selected: Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking. Rationale: font consistency, tight tracking feels premium, slightly reduced size is more data-dense/clinical, clear hierarchy above sub-headers."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-016",
|
|
||||||
"title": "Apply chosen parent header typography",
|
|
||||||
"description": "As a developer, I need to apply the selected font treatment to both parent section headers.",
|
|
||||||
"acceptanceCriteria": [
|
|
||||||
"Apply the chosen font family, weight, size, and case to the ParentSection component header",
|
|
||||||
"Both Patient Summary and Patient Pathway headers use identical treatment",
|
|
||||||
"Font scales appropriately across breakpoints (may need responsive size adjustments)",
|
|
||||||
"Headers create clear visual hierarchy — unmistakably top-level sections",
|
|
||||||
"Typecheck passes",
|
|
||||||
"Verify in browser using dev-browser skill"
|
|
||||||
],
|
|
||||||
"priority": 16,
|
|
||||||
"passes": true,
|
|
||||||
"notes": "Applied Elvaro Grotesque 600, -0.02em tracking with responsive scale: 1.375rem (mobile) → 1.6rem (sm) → 1.8rem (md) → 2.2rem (lg). Both headers identical. Verified at 375px (22px) and 1024px+ (35.2px)."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "US-017",
|
|
||||||
"title": "Re-enable boot/login sequence",
|
"title": "Re-enable boot/login sequence",
|
||||||
"description": "As a user, I want the full boot → ECG → login experience restored for production.",
|
"description": "As a user, I want the full boot → ECG → login experience restored for production.",
|
||||||
"acceptanceCriteria": [
|
"acceptanceCriteria": [
|
||||||
@@ -297,11 +226,11 @@
|
|||||||
"Boot → ECG → Login → Dashboard sequence works end to end",
|
"Boot → ECG → Login → Dashboard sequence works end to end",
|
||||||
"No other changes to App.tsx beyond reverting the initial state",
|
"No other changes to App.tsx beyond reverting the initial state",
|
||||||
"Typecheck passes",
|
"Typecheck passes",
|
||||||
"Verify in browser using dev-browser skill: app starts at boot, progresses through ECG and login, arrives at restructured dashboard"
|
"Verify in browser using dev-browser skill: app starts at boot, progresses through ECG and login, arrives at the scaled dashboard"
|
||||||
],
|
],
|
||||||
"priority": 17,
|
"priority": 11,
|
||||||
"passes": true,
|
"passes": false,
|
||||||
"notes": "Reverted initial phase from 'pmr' to 'boot'. Full flow verified: boot → ECG → login (credentials auto-typed) → click Log In → restructured dashboard loads with all sections."
|
"notes": "Simple revert of US-018."
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+46
-1144
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -44,7 +44,7 @@ function SkipButton({ onSkip }: { onSkip: () => void }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [phase, setPhase] = useState<Phase>('boot')
|
const [phase, setPhase] = useState<Phase>('pmr')
|
||||||
const cursorPositionRef = useRef<{ x: number; y: number } | null>(null)
|
const cursorPositionRef = useRef<{ x: number; y: number } | null>(null)
|
||||||
|
|
||||||
const skipToLogin = () => setPhase('login')
|
const skipToLogin = () => setPhase('login')
|
||||||
|
|||||||
Reference in New Issue
Block a user