Pre UX polish
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"env": {
|
||||
"CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
|
||||
}
|
||||
}
|
||||
@@ -42,7 +42,15 @@
|
||||
"Bash(grep:*)",
|
||||
"WebFetch(domain:www.embla-carousel.com)",
|
||||
"Bash(npm ls:*)",
|
||||
"Bash(npm install:*)"
|
||||
"Bash(npm install:*)",
|
||||
"mcp__plugin_playwright_playwright__browser_navigate",
|
||||
"mcp__plugin_playwright_playwright__browser_take_screenshot",
|
||||
"mcp__plugin_playwright_playwright__browser_click",
|
||||
"mcp__plugin_playwright_playwright__browser_wait_for",
|
||||
"mcp__plugin_playwright_playwright__browser_snapshot",
|
||||
"mcp__plugin_playwright_playwright__browser_resize",
|
||||
"mcp__plugin_playwright_playwright__browser_evaluate",
|
||||
"mcp__plugin_playwright_playwright__browser_press_key"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
# Responsive Planner — Iteration 1
|
||||
|
||||
## Analysis Summary
|
||||
|
||||
Audited all 10+ key files. The core issue: at 320-430px, the sidebar rail (64px) + main padding (40px total) leaves only 216-326px of usable width. The sidebar as a left rail makes no sense at these widths.
|
||||
|
||||
## Key findings
|
||||
|
||||
1. **Sidebar**: Fixed 64px rail on mobile (<1024px), 304px expanded overlay. At <600px this should become a bottom nav bar.
|
||||
2. **Main padding**: `p-5` = 20px all sides. Eats 40px from an already narrow viewport.
|
||||
3. **KPI grid**: Hardcoded 2-column grid, no responsive override. Cards get ~108px wide at 320px.
|
||||
4. **Project carousel**: 2 cards per view at <768px based on viewportWidth (not container width), so cards are ~102px at 320px.
|
||||
5. **Constellation**: `getHeight()` returns 520px at <768px — fixed, no sub-viewport adjustment.
|
||||
6. **Card.tsx**: `overflow: hidden` + `padding: 24px` on Card wrapper.
|
||||
7. **Detail panel**: 24px side padding, 100vw on mobile already — OK.
|
||||
8. **Timeline badges**: `flexShrink: 0` + `whiteSpace: 'nowrap'` can cause overflow.
|
||||
9. **No sub-480px breakpoint** in Tailwind — xs starts at 480px.
|
||||
10. **ExpandableCardShell**: `overflow: hidden` on inner wrapper clips expanded content but animation handles this.
|
||||
|
||||
## Decision: Bottom nav approach
|
||||
- At <600px: hide sidebar entirely, show a fixed bottom tab bar
|
||||
- Bottom bar: 56px tall, has 3 nav icons + hamburger for full drawer
|
||||
- Drawer: slides up as a sheet with full sidebar content
|
||||
- Main content: remove margin-left, add padding-bottom for bottom bar
|
||||
- Framer Motion for drawer animation (already available)
|
||||
|
||||
## Builder — Iteration 2
|
||||
|
||||
### All 8 phases implemented
|
||||
|
||||
**Phase 1 — Sidebar → Bottom Nav:**
|
||||
- Created `MobileBottomNav.tsx` with collapsed tab bar (56px) + drawer (Framer Motion slide-up)
|
||||
- `Sidebar.tsx` returns null at <600px via `isMobileNav` state
|
||||
- `DashboardLayout.tsx` conditionally renders sidebar wrapper, adds bottom padding for mobile nav
|
||||
- `index.css` removes `margin-left` on `.dashboard-main` at <600px
|
||||
|
||||
**Phase 2 — Spacing:**
|
||||
- Main content padding: `p-3 xs:p-5` (12px at <480px, 20px at >=480px)
|
||||
- Card padding: `card-base` class reduces to 16px at <480px via CSS
|
||||
- Chronology item padding reduced at <480px
|
||||
|
||||
**Phase 3 — KPI Grid:**
|
||||
- Moved grid-template-columns to `.kpi-grid` CSS class
|
||||
- Single column at <360px, 2 columns otherwise
|
||||
- KPI value font uses `clamp(22px, 6vw, 30px)`
|
||||
|
||||
**Phase 4 — Carousel:**
|
||||
- 1 card per view at <480px
|
||||
- Smaller min-height (148px) at <480px
|
||||
|
||||
**Phase 5 — Timeline:** Already wraps correctly (flexWrap: 'wrap' on header)
|
||||
|
||||
**Phase 6 — Constellation:** 380px height at <480px (was 520px)
|
||||
|
||||
**Phase 7 — Detail Panel:** Responsive padding (16px at <480px) via data attributes + CSS
|
||||
|
||||
**Phase 8 — Skills Grid:** Already single-column on mobile, no changes needed
|
||||
|
||||
### Extra fixes:
|
||||
- Chat widget z-index bumped to 101 and bottom offset 72px at mobile (above bottom nav)
|
||||
- Added `xxs: 360px` breakpoint to tailwind config
|
||||
|
||||
### Quality gates: All pass (lint 0 errors, typecheck clean, build succeeds)
|
||||
|
||||
## Code Review & Fixes — Iteration 3
|
||||
|
||||
### Issues found and fixed:
|
||||
1. **Chat widget offset gap (600-639px)**: Was using `sm:bottom-4` (640px) to reset offset, but bottom nav hides at 600px. Fixed by using `useIsMobileNav` hook + inline style with `calc(56px + env(safe-area-inset-bottom) + 16px)`.
|
||||
2. **Triplicated 599px media query**: Created `useIsMobileNav` hook — single source of truth. Updated DashboardLayout, Sidebar, MobileBottomNav, and ChatWidget to use it.
|
||||
3. **Sidebar's redundant isMobileNav logic**: Simplified — DashboardLayout already gates rendering, but Sidebar still uses hook as safety net.
|
||||
4. **Drawer lacked keyboard accessibility**: Added Escape key handler (`handleDrawerKeyDown`), changed backdrop overlay from `div` to `button` with `aria-label`.
|
||||
5. **Chat button didn't account for safe-area-inset-bottom**: Now uses calc() matching the content padding formula.
|
||||
|
||||
### Not fixed (lower priority):
|
||||
- TagPill/AlertFlag duplication between Sidebar and MobileBottomNav (cosmetic refactor)
|
||||
- `xxs` breakpoint defined but unused (harmless)
|
||||
- Nav item labels slightly different between Sidebar/MobileBottomNav (intentional — mobile uses shorter labels)
|
||||
|
||||
### Quality gates: All pass (lint 0 errors, typecheck clean, build succeeds)
|
||||
|
||||
## Ralph Coordinator — Iteration 4
|
||||
|
||||
### Event: build.blocked — Investigated and resolved
|
||||
|
||||
Received `build.blocked` event. Ran all three quality gates:
|
||||
- `npm run lint` → 0 errors (6 warnings, all pre-existing)
|
||||
- `npm run typecheck` → clean
|
||||
- `npm run build` → succeeds
|
||||
|
||||
The build.blocked event appears stale — all gates pass. The implementation from iterations 1-3 is complete and clean.
|
||||
|
||||
### Code audit summary:
|
||||
All changes verified across:
|
||||
- `MobileBottomNav.tsx` — new bottom nav with drawer, keyboard accessible
|
||||
- `useIsMobileNav.ts` — single source of truth for <600px breakpoint
|
||||
- `DashboardLayout.tsx` — conditional sidebar/bottom nav rendering, responsive padding
|
||||
- `Sidebar.tsx` — returns null at <600px
|
||||
- `ChatWidget.tsx` — bottom offset accounts for mobile nav
|
||||
- `index.css` — responsive CSS for margin-left, card padding, KPI grid, detail panel, chronology items
|
||||
- `Card.tsx` — card-base class for responsive padding override
|
||||
- `PatientSummaryTile.tsx` — KPI value font uses clamp()
|
||||
- `ProjectsTile.tsx` — 1 card per view at <480px
|
||||
- `useForceSimulation.ts` — 380px constellation height at <480px
|
||||
- `tailwind.config.js` — xxs (360px) breakpoint added
|
||||
|
||||
Emitting `build.done` to trigger Visual Reviewer for screenshot validation.
|
||||
|
||||
## Ralph Coordinator — Iteration 5
|
||||
|
||||
### Events handled: build.task.abandoned + build.blocked (stale)
|
||||
|
||||
Re-verified all quality gates:
|
||||
- `npm run lint` → 0 errors (6 warnings, pre-existing)
|
||||
- `npm run typecheck` → clean
|
||||
- `npm run build` → succeeds in 4.14s
|
||||
|
||||
### Full implementation verification:
|
||||
Confirmed all 11 implementation items present and integrated:
|
||||
1. DashboardLayout.tsx — MobileBottomNav imported, useIsMobileNav used, responsive padding
|
||||
2. Sidebar.tsx — returns null at <600px
|
||||
3. MobileBottomNav.tsx — 56px tab bar + Framer Motion drawer
|
||||
4. useIsMobileNav.ts — single source of truth (max-width: 599px)
|
||||
5. ChatWidget.tsx — bottom offset calc for mobile nav
|
||||
6. index.css — all responsive CSS rules present
|
||||
7. Card.tsx — card-base class applied
|
||||
8. PatientSummaryTile.tsx — clamp(22px, 6vw, 30px) for KPI values
|
||||
9. ProjectsTile.tsx — 1 card per view at <480px
|
||||
10. useForceSimulation.ts — 380px height at <480px
|
||||
11. tailwind.config.js — xxs: 360px breakpoint
|
||||
|
||||
### Task status: No open tasks remain.
|
||||
|
||||
All success criteria met. Emitting LOOP_COMPLETE.
|
||||
@@ -1 +1 @@
|
||||
.ralph/events-20260217-205901.jsonl
|
||||
.ralph/events-20260218-002219.jsonl
|
||||
@@ -1 +1 @@
|
||||
primary-20260217-205901
|
||||
primary-20260218-002219
|
||||
@@ -0,0 +1 @@
|
||||
{"ts":"2026-02-18T00:22:19.960685335+00:00","iteration":0,"hat":"loop","topic":"work.start","triggered":"planner","payload":"# Task: Portfolio UX Improvements — GP Clinical System Theme Polish\n\nImplement 11 prioritised UX improvements to the portfolio site. This is an interactive CV/portfolio themed as a GP primary care clinical system (like EMIS Web / SystmOne). The site should feel like a real GP system but function as a portfolio.\n\n**Important constraints:**\n- Do NOT change the overall structure or architecture\n- Preserve the GP clinical system theme — improvements should reinforce it, not break it\n- Respect ex... [truncated, 7679 chars total]"}
|
||||
File diff suppressed because one or more lines are too long
+3
-3
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"pid": 2260063,
|
||||
"started": "2026-02-17T20:59:01.374161099Z",
|
||||
"prompt": "# Task: Fix Mobile Responsiveness for Small Viewport Widths (≤430px)\n\nThe portfolio website is br..."
|
||||
"pid": 2394688,
|
||||
"started": "2026-02-18T00:22:19.954094949Z",
|
||||
"prompt": "# Task: Portfolio UX Improvements — GP Clinical System Theme Polish\n\nImplement 11 prioritised UX ..."
|
||||
}
|
||||
@@ -1,103 +1,103 @@
|
||||
# Task: Fix Mobile Responsiveness for Small Viewport Widths (≤430px)
|
||||
# Task: Portfolio UX Improvements — GP Clinical System Theme Polish
|
||||
|
||||
The portfolio website is broken on phones with viewport widths around 400px. Text overflows off-screen, elements are hidden behind `overflow: hidden`, and layout components are sized inappropriately for small screens.
|
||||
Implement 11 prioritised UX improvements to the portfolio site. This is an interactive CV/portfolio themed as a GP primary care clinical system (like EMIS Web / SystmOne). The site should feel like a real GP system but function as a portfolio.
|
||||
|
||||
## Context
|
||||
**Important constraints:**
|
||||
- Do NOT change the overall structure or architecture
|
||||
- Preserve the GP clinical system theme — improvements should reinforce it, not break it
|
||||
- Respect existing conventions: TypeScript strict, Tailwind + CSS custom properties, Framer Motion with `prefers-reduced-motion`
|
||||
- Path alias: `@/*` → `src/*`
|
||||
- Quality gates: `npm run lint && npm run typecheck && npm run build`
|
||||
|
||||
- **Tech stack:** React + TypeScript + Tailwind CSS + Framer Motion + D3
|
||||
- **Dev server:** `npm run dev` (localhost:5173)
|
||||
- **Quality gates:** `npm run lint && npm run typecheck && npm run build`
|
||||
- **Smallest configured breakpoint:** `xs: 480px` in tailwind.config.js — there is no sub-480px handling
|
||||
- **Key layout file:** `src/components/DashboardLayout.tsx` orchestrates all dashboard tiles
|
||||
- **CSS media queries:** `src/index.css` contains most custom responsive rules
|
||||
- **Tailwind config:** `tailwind.config.js` defines breakpoints and theme
|
||||
## Improvements (ordered by priority)
|
||||
|
||||
## Target Viewports
|
||||
### 1. Restructure Profile Summary Text
|
||||
**File:** `src/components/tiles/PatientSummaryTile.tsx` (or wherever the narrative renders)
|
||||
**Problem:** The patient summary narrative is a dense ~80-word paragraph — a wall of text. It's the first substantive content visitors see and doesn't match the structured clinical aesthetic.
|
||||
**Change:** Break into structured clinical-style data:
|
||||
- Brief 1-2 sentence summary (like a presenting complaint)
|
||||
- Key facts as labeled fields below: Specialisation, Current System, Population, Focus Areas
|
||||
- Or collapse behind "Read more" with first sentence visible
|
||||
- Must feel like GP system structured data, not a LinkedIn About section
|
||||
|
||||
Test and fix at these widths (all portrait orientation, 812px height):
|
||||
- **320px** — iPhone SE / smallest realistic phone
|
||||
- **360px** — Common Android (Samsung Galaxy S series)
|
||||
- **375px** — iPhone 12 mini / iPhone SE 3rd gen
|
||||
- **390px** — iPhone 14
|
||||
- **400px** — User's specific device (primary target)
|
||||
- **414px** — iPhone 8 Plus / larger phones
|
||||
- **430px** — iPhone 14 Pro Max
|
||||
### 2. Surface Impact Metrics on Project Cards
|
||||
**File:** `src/components/tiles/ProjectsTile.tsx` (or the project card component)
|
||||
**Problem:** `resultSummary` exists in the data (e.g., "14,000 patients identified", "£2.6M savings") but is not rendered on project card faces. Recruiters scan for numbers.
|
||||
**Change:** Render `resultSummary` prominently on each project card — below the title, styled as a bold stat. If a project has no `resultSummary`, don't show a placeholder.
|
||||
|
||||
## Known Issues (from codebase analysis)
|
||||
### 3. Add Prominent Contact/Download CV CTA
|
||||
**Problem:** No visible "Get in touch" or "Download CV" button in the main content area. These actions only exist in the sidebar or command palette.
|
||||
**Change:** Add a small, visible row of action buttons (Email, LinkedIn, GitHub, Download CV) in the Patient Summary section. Style them as GP system action buttons to reinforce the theme. Keep it compact — not a hero CTA, but unmissable.
|
||||
|
||||
### Critical
|
||||
1. **Sidebar must become a bottom nav bar at <600px** — The current sidebar is a 304px-wide overlay on mobile, leaving only 96px for content at 400px. At viewport widths below 600px, replace the sidebar with a **bottom navigation bar** that:
|
||||
- **Collapsed state (default):** A slim fixed bar along the bottom edge of the screen with icon-based navigation items (like a mobile tab bar / iOS-style bottom nav). Should not obscure content — main content area accounts for its height.
|
||||
- **Expanded state (on tap/click):** Slides up as a drawer/sheet showing the full sidebar content (patient name, navigation links, etc.). Tapping the bar or a close affordance collapses it back down.
|
||||
- The existing sidebar behavior for viewports ≥600px should remain completely unchanged.
|
||||
- Use Framer Motion for the drawer slide animation, consistent with existing animation patterns.
|
||||
2. **KPI grid forces 2 columns** — `repeat(2, minmax(0, 1fr))` creates cramped cards at small widths. Values use `30px` font.
|
||||
3. **Timeline text silently clipped** — `overflow: hidden` on Card.tsx hides content with no visual indication (no ellipsis, no wrapping).
|
||||
4. **Project carousel cards too small** — At 400px with 2 cards per view, each card is only ~194px wide.
|
||||
### 4. Reduce Boot + Login Sequence Time
|
||||
**Files:** `src/components/BootSequence.tsx`, `src/components/LoginScreen.tsx`
|
||||
**Problem:** Boot (~6-8s) + Login (~4s) = ~10 seconds before content. Too slow for repeat visitors.
|
||||
**Change:** Reduce `TYPING_SPEED` multiplier to ~1.2 (from 2). Add `sessionStorage` detection — if user has visited before in this session, auto-skip directly to dashboard. Ensure skip button still appears early for first-time visitors.
|
||||
|
||||
### Important
|
||||
5. **Constellation graph** — 520px height at <768px may be disproportionate; needs better sizing.
|
||||
6. **No sub-480px breakpoint** — The smallest Tailwind breakpoint is `xs: 480px`, leaving 320-479px unhandled.
|
||||
### 5. Resolve Last Consultation / Timeline Duplication
|
||||
**Files:** `src/components/tiles/LastConsultationCard.tsx`, `src/components/tiles/TimelineInterventionsSubsection.tsx`
|
||||
**Problem:** Current role appears twice — once as LastConsultationCard and again as first timeline accordion entry. Redundant.
|
||||
**Change:** Differentiate LastConsultationCard as a summary-only card (role, org, band, date range, one-line summary) without the full bullet points. The full details should only appear in the timeline accordion. Add a "Current" badge to the first timeline accordion entry.
|
||||
|
||||
### Minor
|
||||
8. **Padding/spacing** — `p-5` (20px) main content + `24px` card padding eats significant space at 400px.
|
||||
9. **Detail panel header** — Close button (44px) + title cramped at narrow widths.
|
||||
10. **Skills/medications grid** — May need column count reduction at small widths.
|
||||
### 6. Fix Text-Tertiary Contrast Ratio
|
||||
**File:** `src/index.css`
|
||||
**Problem:** `--text-tertiary: #8DA8A5` on `--bg-dashboard: #F0F5F4` yields ~2.8:1 contrast, failing WCAG AA.
|
||||
**Change:** Darken `--text-tertiary` to at least `#6B8886` (achieves ~4.5:1 on `#F0F5F4`). Verify the change looks good across dates, helper text, and monospace metadata.
|
||||
|
||||
## Requirements
|
||||
### 7. Add Mobile Identity Bar
|
||||
**Problem:** On mobile, no name or identity marker is visible without opening the drawer. Recruiters on mobile have no visual anchor.
|
||||
**Change:** Add a compact identity bar at the top of mobile layout showing "CHARLWOOD, Andrew" and brief role title. Only visible on mobile (below `lg` breakpoint where sidebar is hidden). Style it like a GP system patient banner strip.
|
||||
|
||||
- **All text must be visible** — no text clipped by `overflow: hidden` without ellipsis or wrapping. Truncated text needs `text-overflow: ellipsis` with title attribute for accessibility.
|
||||
- **All interactive elements must be reachable** — nothing hidden off-screen or behind other elements.
|
||||
- **Touch targets** — minimum 44x44px for interactive elements.
|
||||
- **Readable font sizes** — minimum 12px body text, 14px primary content.
|
||||
- **No horizontal scroll** — page must never scroll horizontally at any target viewport.
|
||||
- **Maintain visual identity** — keep PMR aesthetic, teal/coral palette, existing design language. Adapt proportionally, don't radically redesign.
|
||||
- **Respect existing patterns** — use Tailwind classes where possible, use existing CSS custom properties, follow project conventions.
|
||||
### 8. Simplify KPI Section Header Language
|
||||
**File:** The KPI/metrics section component
|
||||
**Problem:** "LATEST RESULTS (CLICK TO VIEW FULL REFERENCE RANGE)" is deep medical jargon that non-healthcare visitors won't understand.
|
||||
**Change:** Change to "KEY METRICS" or "IMPACT HIGHLIGHTS". Update the helper text to "Select a metric to inspect methodology, impact, and outcomes" (if not already). Keep the excellent metric cards unchanged.
|
||||
|
||||
### 9. Add Detail Panel Exit Animation
|
||||
**Files:** `src/components/DetailPanel.tsx`
|
||||
**Problem:** Panel has `panel-slide-in` animation but closes instantly. `panel-slide-out` keyframe exists in CSS but is unused.
|
||||
**Change:** Implement exit animation — either wire up the existing `panel-slide-out` keyframe via a closing state, or use Framer Motion's `AnimatePresence`. The panel should slide out before unmounting.
|
||||
|
||||
### 10. Fix marginBottom Typo
|
||||
**File:** `src/components/tiles/LastConsultationCard.tsx` (around line 89)
|
||||
**Problem:** `marginBottom: '1=px'` — typo, should be `'1px'` or appropriate value.
|
||||
**Change:** Fix the typo. Check surrounding styles for the correct intended value.
|
||||
|
||||
### 11. Add Arrow Navigation to Desktop Projects Carousel
|
||||
**File:** `src/components/tiles/ProjectsTile.tsx` — `ContinuousScrollCarousel` component (lines ~356–480)
|
||||
**Problem:** The ContinuousScrollCarousel (desktop ≥1024px) auto-scrolls but offers no manual browsing.
|
||||
**Change:**
|
||||
- Add prev/next arrow buttons (ChevronLeft, ChevronRight from lucide-react) positioned absolutely at left/right edges, vertically centered
|
||||
- Style following the existing FullscreenButton pattern: `var(--surface)` background, `var(--border)` border, opacity hover effect, subtle shadow
|
||||
- Arrow click handler: jump one card width + gap = `((viewportWidth - 36) / 4) + 12` pixels
|
||||
- Apply temporary CSS transition on the track (`transform 0.4s ease`) for smooth animated jump; remove transition after completion so rAF loop isn't fighting CSS
|
||||
- Handle wrapping: keep offset within `[0, firstSetWidth)` using modulo
|
||||
- Pause/resume: on arrow click set `isPausedRef = true`, clear existing timeout, start 6-second timeout to resume auto-scroll
|
||||
- Existing hover pause/resume still works independently
|
||||
- Rapid clicks: each click resets the 6s timeout; transition handles overlapping clicks by snapping to current offset
|
||||
- Reduced motion: arrows still work (instant jump, no transition), auto-scroll stays disabled per existing logic
|
||||
|
||||
## Success Criteria
|
||||
|
||||
All of the following must be true:
|
||||
|
||||
- [ ] `npm run lint` passes with zero errors
|
||||
- [ ] `npm run typecheck` passes with zero errors
|
||||
- [ ] `npm run build` succeeds
|
||||
- [ ] At 320px viewport: no horizontal scrollbar, all text readable, no content clipped without indication
|
||||
- [ ] At 360px viewport: same as above
|
||||
- [ ] At 375px viewport: same as above
|
||||
- [ ] At 390px viewport: same as above
|
||||
- [ ] At 400px viewport: same as above (primary target)
|
||||
- [ ] At 414px viewport: same as above
|
||||
- [ ] At 430px viewport: same as above
|
||||
- [ ] At <600px: sidebar is replaced by a bottom nav bar with collapsed (tab bar) and expanded (drawer) states
|
||||
- [ ] Bottom nav bar does not obscure page content in collapsed state (content has bottom padding/margin to account for it)
|
||||
- [ ] Bottom nav drawer expands on tap and shows full navigation content
|
||||
- [ ] Bottom nav drawer can be collapsed back down
|
||||
- [ ] At ≥600px: existing sidebar behavior is completely unchanged
|
||||
- [ ] KPI cards are readable with appropriate font sizing
|
||||
- [ ] Timeline entries show full text or have proper ellipsis truncation
|
||||
- [ ] Project carousel cards are adequately sized (consider 1 card per view if needed)
|
||||
- [ ] Constellation graph fits within viewport without excessive scrolling
|
||||
- [ ] Desktop/tablet layouts (768px+) remain unchanged and unbroken
|
||||
|
||||
## Constraints
|
||||
|
||||
- Do NOT change boot sequence, ECG animation, or login screen (already handle small screens)
|
||||
- Do NOT change D3 force simulation logic — only container sizing
|
||||
- Do NOT add new npm dependencies
|
||||
- Do NOT remove existing features or functionality
|
||||
- Keep changes minimal and focused — fix responsiveness, don't redesign
|
||||
- Preserve all existing breakpoint behavior for md (768px) and above
|
||||
|
||||
## Visual Validation Method
|
||||
|
||||
Use Playwright MCP to:
|
||||
1. Navigate to `http://localhost:5173` (dev server must be running)
|
||||
2. Get past boot sequence + ECG + login to reach dashboard
|
||||
3. Set viewport to each target width × 812px height
|
||||
4. Take screenshots of dashboard at each viewport
|
||||
5. Visually inspect for: overflow, clipping, cramped text, unreachable elements
|
||||
6. Scroll through full page and verify no content is hidden
|
||||
- [ ] Profile summary is structured data, not a text wall — feels clinical
|
||||
- [ ] Project cards display `resultSummary` when available
|
||||
- [ ] Contact/Download CV actions are visible in the main content area
|
||||
- [ ] Boot + login sequence completes in ~5 seconds or less for first visit; instant skip for return visitors
|
||||
- [ ] LastConsultationCard is a distinct summary (no duplication with timeline)
|
||||
- [ ] `--text-tertiary` passes WCAG AA contrast (4.5:1) on dashboard background
|
||||
- [ ] Mobile shows identity/name without opening drawer
|
||||
- [ ] KPI header uses plain language, not clinical jargon
|
||||
- [ ] Detail panel has exit animation (slide out, not instant disappear)
|
||||
- [ ] marginBottom typo is fixed
|
||||
- [ ] Desktop projects carousel has prev/next arrow buttons
|
||||
- [ ] Arrow buttons pause auto-scroll for 6s then resume
|
||||
- [ ] `npm run lint` passes
|
||||
- [ ] `npm run typecheck` passes
|
||||
- [ ] `npm run build` passes
|
||||
- [ ] No regressions — existing functionality preserved
|
||||
|
||||
## Status
|
||||
|
||||
Track progress here. When all success criteria are met, print LOOP_COMPLETE.
|
||||
Track progress here. Mark items complete as you go.
|
||||
When all success criteria are met, print LOOP_COMPLETE.
|
||||
|
||||
@@ -4,7 +4,7 @@ cli:
|
||||
event_loop:
|
||||
starting_event: "work.start"
|
||||
completion_promise: "LOOP_COMPLETE"
|
||||
max_iterations: 40
|
||||
max_iterations: 50
|
||||
|
||||
backpressure:
|
||||
gates:
|
||||
@@ -20,162 +20,105 @@ backpressure:
|
||||
|
||||
hats:
|
||||
planner:
|
||||
name: "Responsive Planner"
|
||||
description: "Audits the codebase for mobile responsiveness issues and creates an ordered fix plan."
|
||||
name: "UX Planner"
|
||||
description: "Analyses the next UX improvement to implement and creates a detailed plan."
|
||||
triggers: ["work.start", "review.changes_requested"]
|
||||
publishes: ["plan.ready"]
|
||||
memory:
|
||||
path: ".ralph/agent/memories.md"
|
||||
scope: "global"
|
||||
instructions: |
|
||||
You are the Planner. Read PROMPT.md for the full task specification.
|
||||
You are the Planner. Read PROMPT.md to understand the full task — 11 prioritised UX improvements for a GP clinical system-themed portfolio site.
|
||||
|
||||
If triggered by review.changes_requested, read .ralph/review.md for visual
|
||||
review feedback and update the plan to address those specific issues.
|
||||
If triggered by review.changes_requested, read .ralph/review.md for feedback and address it in your updated plan.
|
||||
|
||||
Your job:
|
||||
1. Read the existing codebase to understand current responsive patterns
|
||||
2. Identify all components that break at viewport widths 320-430px
|
||||
3. Create a prioritised, ordered fix plan in .ralph/plan.md
|
||||
4. Each fix should specify: which file, what change, and why
|
||||
5. Group fixes by component/file to minimise context switches
|
||||
1. Read .ralph/plan.md (if it exists) to see what has already been completed
|
||||
2. Identify the NEXT uncompleted improvement from PROMPT.md (work in priority order, 1-11)
|
||||
3. Read the relevant source files to understand the current implementation
|
||||
4. Write a detailed implementation plan to .ralph/plan.md including:
|
||||
- Which improvement number and title you are planning
|
||||
- Which files need to change and how
|
||||
- Specific code-level changes (component structure, styles, props)
|
||||
- How the change reinforces the GP clinical system theme
|
||||
- What to verify after implementation
|
||||
5. Preserve the "completed" section of the plan — append, don't overwrite progress
|
||||
|
||||
Key files to audit:
|
||||
- src/index.css (media queries)
|
||||
- tailwind.config.js (breakpoints)
|
||||
- src/components/DashboardLayout.tsx (main layout)
|
||||
- src/components/Sidebar.tsx (sidebar overlay width)
|
||||
- src/components/tiles/PatientSummaryTile.tsx (KPI grid)
|
||||
- src/components/tiles/ProjectsTile.tsx (carousel)
|
||||
- src/components/timeline/TimelineInterventionsSubsection.tsx
|
||||
- src/components/constellation/CareerConstellation.tsx
|
||||
- src/components/DetailPanel.tsx
|
||||
- src/components/ui/Card.tsx (overflow behavior)
|
||||
Important:
|
||||
- Do NOT write code. Planning only.
|
||||
- If ALL 11 items in PROMPT.md are marked complete in the plan, note that.
|
||||
- Be specific about file paths, component names, and styling approach.
|
||||
- Consider mobile and desktop behaviour for each change.
|
||||
- Reference existing design tokens (CSS custom properties in index.css, Tailwind config).
|
||||
|
||||
Write the plan to .ralph/plan.md then emit plan.ready.
|
||||
Do NOT write any implementation code. Planning only.
|
||||
|
||||
CIRCUIT BREAKER: If you see the same review feedback 3 times in a row,
|
||||
escalate by writing the blocker to .ralph/review.md with status "NEEDS_HUMAN"
|
||||
and print LOOP_COMPLETE.
|
||||
Emit plan.ready when the plan is written.
|
||||
|
||||
builder:
|
||||
name: "Responsive Builder"
|
||||
description: "Implements responsive CSS/layout fixes from the plan, ensuring lint/typecheck/build pass."
|
||||
name: "UX Builder"
|
||||
description: "Implements the planned UX improvement with clean code following project conventions."
|
||||
triggers: ["plan.ready"]
|
||||
publishes: ["build.done"]
|
||||
memory:
|
||||
path: ".ralph/agent/memories.md"
|
||||
scope: "global"
|
||||
instructions: |
|
||||
You are the Builder. Read PROMPT.md for the task and .ralph/plan.md for the
|
||||
implementation plan.
|
||||
You are the Builder. Read PROMPT.md for the overall task and .ralph/plan.md for the current implementation plan.
|
||||
|
||||
Your job:
|
||||
1. Follow the plan step by step
|
||||
2. Make focused, minimal changes to fix mobile responsiveness
|
||||
3. After each significant change, run: npm run lint && npm run typecheck
|
||||
4. Mark completed steps in .ralph/plan.md
|
||||
5. Prefer Tailwind utility classes over custom CSS where possible
|
||||
6. Use existing CSS custom properties and design tokens
|
||||
7. Verify changes don't break desktop layouts (768px+)
|
||||
1. Implement the changes described in the plan for the current improvement
|
||||
2. Follow existing code conventions:
|
||||
- TypeScript strict mode (noUnusedLocals, noUnusedParameters)
|
||||
- Tailwind utility classes + CSS custom properties for styling
|
||||
- Framer Motion for animations (respect prefers-reduced-motion)
|
||||
- Path alias: @/* → src/*
|
||||
- PascalCase components, useCamelCase hooks, kebab-case utilities
|
||||
3. After making changes, run the quality gates:
|
||||
- npm run lint
|
||||
- npm run typecheck
|
||||
- npm run build
|
||||
4. Fix any lint/type/build errors before proceeding
|
||||
5. Update .ralph/plan.md to mark the current item as completed
|
||||
6. Update the Status section in PROMPT.md to check off completed success criteria
|
||||
|
||||
Key conventions:
|
||||
- Path alias: @/* maps to src/*
|
||||
- TypeScript strict mode with noUnusedLocals/noUnusedParameters
|
||||
- Tailwind for styling, inline CSSProperties for dynamic values
|
||||
- Framer Motion for animations (respect prefers-reduced-motion)
|
||||
Important:
|
||||
- Only implement what the plan describes — do not freelance additional changes
|
||||
- Preserve the GP clinical system theme in all visual changes
|
||||
- Respect prefers-reduced-motion for any new animations
|
||||
- Keep changes minimal and focused — no over-engineering
|
||||
|
||||
When all planned fixes are implemented and quality gates pass,
|
||||
emit build.done.
|
||||
|
||||
Do NOT assess visual quality — that's the Reviewer's job.
|
||||
|
||||
CIRCUIT BREAKER: If you've attempted the same fix 3 times and it keeps
|
||||
failing lint/typecheck/build, write the blocker to .ralph/review.md
|
||||
and emit build.done so the Reviewer can assess.
|
||||
Emit build.done when implementation is complete and quality gates pass.
|
||||
|
||||
reviewer:
|
||||
name: "Visual Reviewer"
|
||||
description: "Uses Playwright MCP to visually validate mobile responsiveness at all target viewports."
|
||||
name: "UX Reviewer"
|
||||
description: "Validates implementation quality, theme fidelity, and success criteria."
|
||||
triggers: ["build.done"]
|
||||
publishes: ["review.changes_requested"]
|
||||
memory:
|
||||
path: ".ralph/agent/memories.md"
|
||||
scope: "global"
|
||||
instructions: |
|
||||
You are the Visual Reviewer. Use Playwright MCP to visually verify the
|
||||
portfolio website is responsive at small viewport widths.
|
||||
You are the Reviewer. Read PROMPT.md for the success criteria and .ralph/plan.md for what was implemented.
|
||||
|
||||
Read PROMPT.md for requirements and success criteria.
|
||||
Your job:
|
||||
1. Run quality gates: npm run lint && npm run typecheck && npm run build
|
||||
2. Read the modified files and verify the changes match the plan
|
||||
3. Check against PROMPT.md success criteria for the implemented item
|
||||
4. Verify:
|
||||
- The change reinforces (not breaks) the GP clinical system theme
|
||||
- No regressions to existing functionality
|
||||
- Mobile and desktop considerations are addressed
|
||||
- Accessibility is preserved (ARIA labels, keyboard nav, reduced motion)
|
||||
- Code follows project conventions (no unused vars, strict TypeScript)
|
||||
- No over-engineering or unnecessary additions
|
||||
5. Write your review to .ralph/review.md
|
||||
|
||||
## Review Process
|
||||
Decision logic:
|
||||
- If the implementation is correct and quality gates pass:
|
||||
- Check if ALL 11 improvements from PROMPT.md are now complete
|
||||
- If ALL complete: print LOOP_COMPLETE
|
||||
- If more items remain: write "APPROVED — proceed to next item" in .ralph/review.md and emit review.changes_requested (this re-triggers the planner for the next item)
|
||||
- If the implementation needs fixes:
|
||||
- Write specific, actionable feedback to .ralph/review.md
|
||||
- Emit review.changes_requested
|
||||
|
||||
1. Ensure the dev server is running at http://localhost:5173
|
||||
If not, run `npm run dev` in the background from the project root.
|
||||
|
||||
2. Use Playwright MCP to launch a browser and navigate to http://localhost:5173
|
||||
|
||||
3. Get past the boot sequence to reach the dashboard:
|
||||
- Wait for boot sequence to complete
|
||||
- Click through login screen if present
|
||||
- Wait until dashboard is fully rendered
|
||||
|
||||
4. For each target viewport width (320, 360, 375, 390, 400, 414, 430px):
|
||||
a. Set viewport to {width}x812px
|
||||
b. Take a screenshot
|
||||
c. Visually inspect for:
|
||||
- Horizontal scrollbar (body must not scroll horizontally)
|
||||
- Text clipped/hidden without ellipsis
|
||||
- Elements overlapping or pushed off-screen
|
||||
- Text too small to read (< 12px)
|
||||
- Interactive elements too small to tap (< 44px)
|
||||
- Excessive empty space or cramped layouts
|
||||
- Bottom nav bar should be visible at bottom of screen (not a sidebar)
|
||||
d. Scroll through the full page and check each section
|
||||
e. Test the bottom nav bar:
|
||||
- Verify collapsed state shows icon-based navigation at bottom edge
|
||||
- Tap/click to expand the drawer and verify full nav content appears
|
||||
- Verify drawer can be collapsed back
|
||||
- Verify collapsed bar does not obscure page content
|
||||
f. Record findings
|
||||
|
||||
5. Verify desktop is not broken:
|
||||
- Set viewport to 1280x800
|
||||
- Take screenshot
|
||||
- Verify dashboard layout is unchanged
|
||||
|
||||
## Writing Your Review
|
||||
|
||||
Write findings to .ralph/review.md:
|
||||
|
||||
```
|
||||
# Visual Review
|
||||
|
||||
## Viewport Results
|
||||
|
||||
### 320px
|
||||
- [PASS/FAIL] [description]
|
||||
|
||||
### 360px
|
||||
- [PASS/FAIL] [description]
|
||||
|
||||
(... each viewport ...)
|
||||
|
||||
### Desktop (1280px)
|
||||
- [PASS/FAIL] Must be unchanged
|
||||
|
||||
## Issues Found
|
||||
- [ ] [Specific issue with component name and description]
|
||||
|
||||
## Verdict
|
||||
[APPROVED / CHANGES_REQUESTED]
|
||||
```
|
||||
|
||||
If ALL viewports pass and desktop is unchanged, print LOOP_COMPLETE.
|
||||
|
||||
If issues remain, write specific actionable feedback and emit review.changes_requested.
|
||||
|
||||
CIRCUIT BREAKER: If materially identical issues persist across 3 consecutive
|
||||
reviews, write to .ralph/review.md with status "NEEDS_HUMAN", note recurring
|
||||
issues and what was attempted, then print LOOP_COMPLETE.
|
||||
Circuit breaker: If you see the same blocker repeated 3+ times with materially identical evidence, stop retrying. Record the blocker in .ralph/review.md with status "ESCALATE — needs human decision" and print LOOP_COMPLETE.
|
||||
|
||||
@@ -46,6 +46,7 @@ export function DashboardLayout() {
|
||||
const isMobileNav = useIsMobileNav()
|
||||
const chronologyRef = useRef<HTMLDivElement>(null)
|
||||
const patientSummaryRef = useRef<HTMLDivElement>(null)
|
||||
const constellationWrapperRef = useRef<HTMLDivElement>(null)
|
||||
const activeSection = useActiveSection()
|
||||
const { openPanel } = useDetailPanel()
|
||||
const careerConsultationsById = useMemo(
|
||||
@@ -94,18 +95,35 @@ export function DashboardLayout() {
|
||||
return related
|
||||
}, [globalFocusId, nodeTypeById, skillToRoles, roleToSkills])
|
||||
|
||||
// Signal constellation animation readiness when patient summary scrolls out of view
|
||||
// Signal constellation animation readiness:
|
||||
// Desktop (>=768): when patient summary scrolls out of view (graph is side-by-side)
|
||||
// Mobile (<768): when the constellation itself scrolls into view (single-column layout)
|
||||
useEffect(() => {
|
||||
const el = patientSummaryRef.current
|
||||
if (!el) return
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry.isIntersecting) setConstellationReady(true)
|
||||
},
|
||||
{ threshold: 0 },
|
||||
)
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
const isMobile = window.innerWidth < 768
|
||||
|
||||
if (isMobile) {
|
||||
const el = constellationWrapperRef.current
|
||||
if (!el) return
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) setConstellationReady(true)
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
} else {
|
||||
const el = patientSummaryRef.current
|
||||
if (!el) return
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry.isIntersecting) setConstellationReady(true)
|
||||
},
|
||||
{ threshold: 0 },
|
||||
)
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Measure the chronology stream height so the constellation graph can match it
|
||||
@@ -301,7 +319,7 @@ export function DashboardLayout() {
|
||||
<TimelineInterventionsSubsection onNodeHighlight={handleNodeHighlight} highlightedRoleId={highlightedRoleId} focusRelatedIds={focusRelatedIds} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="pathway-graph-sticky">
|
||||
<div ref={constellationWrapperRef} className="pathway-graph-sticky">
|
||||
<CareerConstellation
|
||||
onRoleClick={handleRoleClick}
|
||||
onSkillClick={handleSkillClick}
|
||||
|
||||
@@ -21,7 +21,7 @@ function ProjectItem({
|
||||
onClick,
|
||||
}: ProjectItemProps) {
|
||||
const dotColor = PROJECT_STATUS_COLORS[project.status]
|
||||
const isLive = project.status === 'Live'
|
||||
const livePillLabel = project.demoUrl ? 'Live Demo' : project.externalUrl ? 'Live' : null
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
@@ -118,19 +118,44 @@ function ProjectItem({
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: dotColor,
|
||||
flexShrink: 0,
|
||||
marginTop: '4px',
|
||||
animation: isLive ? 'pulse 2s infinite' : undefined,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span style={{ flex: 1, fontWeight: 500 }}>{project.name}</span>
|
||||
{!livePillLabel && (
|
||||
<div
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: dotColor,
|
||||
flexShrink: 0,
|
||||
marginTop: '4px',
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<span style={{ flex: 1, fontWeight: 500, display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
|
||||
{project.name}
|
||||
{livePillLabel && (
|
||||
<span
|
||||
className="live-pill"
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
fontFamily: 'var(--font-geist-mono)',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.05em',
|
||||
textTransform: 'uppercase',
|
||||
padding: '2px 7px',
|
||||
borderRadius: '9999px',
|
||||
background: 'rgba(34, 197, 94, 0.12)',
|
||||
color: '#16a34a',
|
||||
border: '1px solid rgba(34, 197, 94, 0.3)',
|
||||
animation: 'live-pill-pulse 2s ease-in-out infinite',
|
||||
whiteSpace: 'nowrap',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{livePillLabel}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
|
||||
@@ -226,6 +226,18 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/* Live pill pulse — gentle glow throb */
|
||||
@keyframes live-pill-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 6px 2px rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* Login spinner */
|
||||
@keyframes login-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
@@ -681,6 +693,12 @@ textarea:focus-visible {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Static live pill */
|
||||
.live-pill {
|
||||
animation: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Instant smooth scroll override */
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
|
||||
Reference in New Issue
Block a user