From 025f86081569614c26aacf835b6636a4faf6afdc Mon Sep 17 00:00:00 2001 From: Andy Charlwood Date: Tue, 17 Feb 2026 20:58:56 +0000 Subject: [PATCH] Loop prep --- .ralph/agent/memories.md | 17 --- .ralph/agent/memories.md.lock | 0 .ralph/agent/scratchpad.md | 63 ---------- .ralph/agent/tasks.jsonl | 5 - .ralph/agent/tasks.jsonl.lock | 0 .ralph/current-events | 1 - .ralph/current-loop-id | 1 - .ralph/events-20260217-140400.jsonl | 1 - .ralph/events-20260217-140555.jsonl | 3 - .ralph/history.jsonl | 2 - .ralph/history.jsonl.lock | 0 .ralph/loop.lock | 5 - PROMPT.md | 145 ++++++++++++++--------- hats.yml | 176 ++++++++++++++++++++-------- ralph.yml | 2 +- 15 files changed, 214 insertions(+), 207 deletions(-) delete mode 100644 .ralph/agent/memories.md delete mode 100644 .ralph/agent/memories.md.lock delete mode 100644 .ralph/agent/scratchpad.md delete mode 100644 .ralph/agent/tasks.jsonl delete mode 100644 .ralph/agent/tasks.jsonl.lock delete mode 100644 .ralph/current-events delete mode 100644 .ralph/current-loop-id delete mode 100644 .ralph/events-20260217-140400.jsonl delete mode 100644 .ralph/events-20260217-140555.jsonl delete mode 100644 .ralph/history.jsonl delete mode 100644 .ralph/history.jsonl.lock delete mode 100644 .ralph/loop.lock diff --git a/.ralph/agent/memories.md b/.ralph/agent/memories.md deleted file mode 100644 index 616de4e..0000000 --- a/.ralph/agent/memories.md +++ /dev/null @@ -1,17 +0,0 @@ -# Memories - -## Patterns - -### mem-1771337886-d0ab -> Global focus mode: DashboardLayout manages globalFocusId state + focusRelatedIds derived set. Relationship data: skillToRoles and roleToSkills maps built from timelineEntities.skills[]. focusRelatedIds passed to timeline, skills, and LastConsultationCard. Constellation axis dims via CSS class constellation-focus-active on SVG. - - -## Decisions - -### mem-1771337892-8cc2 -> useConstellationInteraction mouseenter now calls onNodeHover for ALL node types (was previously skill-filtered). handleNodeHover in DashboardLayout checks nodeType to decide what to set for highlightedRoleId. Do NOT set highlightedNodeId from handleNodeHover — it breaks resolveGraphFallback timing. - - -## Fixes - -## Context diff --git a/.ralph/agent/memories.md.lock b/.ralph/agent/memories.md.lock deleted file mode 100644 index e69de29..0000000 diff --git a/.ralph/agent/scratchpad.md b/.ralph/agent/scratchpad.md deleted file mode 100644 index fc29e6a..0000000 --- a/.ralph/agent/scratchpad.md +++ /dev/null @@ -1,63 +0,0 @@ -# Constellation Hover Focus Mode - Scratchpad - -## Understanding - -The feature requires a **global dimming** effect when hovering constellation nodes or skill pills. Currently: - -1. **Constellation internal highlighting** already works well via `useConstellationHighlight` - dims non-connected nodes to 0.15 opacity within the SVG. -2. **Skill pill hover** (`RepeatMedicationsSubsection`) calls `onHighlight(skill.id)` → flows to `setHighlightedNodeId` → passed to `CareerConstellation` as prop → triggers `applyGraphHighlight(skillId)`. -3. **Timeline item hover** calls `onHighlight(entity.id)` → same flow → highlights that role in constellation. -4. **Constellation node hover** calls `onNodeHover(roleId)` → `setHighlightedRoleId` → highlights matching timeline item via `isHighlightedFromGraph` prop. - -### What's Missing - -The **cross-component dimming** doesn't exist yet: -- When hovering a constellation node: timeline items and skill pills don't dim (only the matching timeline item highlights) -- When hovering a skill pill: the constellation highlights but timeline items and other skill pills don't dim -- No global "focus mode" overlay or coordinated dimming across all three areas - -### Architecture Decision - -**Approach: CSS class-based global dimming with React context** - -Rather than a heavy context, I'll use the existing `DashboardLayout` state pattern: -1. Add a `globalFocusId` state to `DashboardLayout` (the orchestrator) -2. Add a `globalFocusType` to know if it's a skill or role focus -3. Pass this down to timeline, skill pills, and constellation -4. Each component applies a dimming class/style when not related to the focused ID -5. Use the existing `connectedMap` data (already built in constellation) to resolve relationships - -**Key insight**: When a skill is focused, the "related" timeline items are those whose `entity.skills` array contains that skill ID. When a role is focused, the "related" skills are those in that role's `entity.skills`. This data is already in `timelineEntities`. - -**Dimming approach**: CSS transitions on opacity. Apply `opacity: 0.25` to non-related elements, keep related ones at full opacity. Use `transition: opacity 0.15s` for smooth enter/exit. - -### Implementation (COMPLETED) - -All implemented in a single commit (`47b52b5`): - -1. **DashboardLayout** — Added `globalFocusId` state, lookup maps (`skillToRoles`, `roleToSkills`, `nodeTypeById`), and computed `focusRelatedIds: Set | null`. Both `handleNodeHighlight` and `handleNodeHover` now set `globalFocusId`. - -2. **useConstellationInteraction** — Removed `d.type !== 'skill'` guard on `onNodeHover` so skill node hovers also propagate to parent for global focus. - -3. **TimelineInterventionsSubsection** — Receives `focusRelatedIds`, computes `isDimmedByFocus` per entity, passes to `ExpandableCardShell`. - -4. **ExpandableCardShell** — New `isDimmedByFocus` prop applies `opacity: 0.25` with 150ms transition. - -5. **RepeatMedicationsSubsection** — `focusRelatedIds` flows through `CategorySection` → `SkillRow`, each skill row dims if not in related set. - -6. **LastConsultationCard** — Dims when `focusRelatedIds` is active and consultation.id not in set. - -7. **CareerConstellation** — New `globalFocusActive` prop + SVG class `constellation-focus-active` triggers CSS axis dimming. - -8. **index.css** — CSS rules dim `.axis-line`, `.year-tick`, `.year-label` to 0.25 opacity when `constellation-focus-active` class is present. Reduced-motion override removes transitions. - -### Verification - -- `npm run typecheck` — PASS -- `npm run lint` — PASS (5 pre-existing warnings only) -- `npm run build` — PASS - -### Remaining - -- Playwright MCP visual verification (reviewer task) -- Manual QA: hover each source (constellation node, skill pill, timeline item), verify dimming/restore diff --git a/.ralph/agent/tasks.jsonl b/.ralph/agent/tasks.jsonl deleted file mode 100644 index 8ea7758..0000000 --- a/.ralph/agent/tasks.jsonl +++ /dev/null @@ -1,5 +0,0 @@ -{"id":"task-1771337307-83ce","title":"Add global focus state to DashboardLayout with relationship resolution","description":"Add globalFocusId/globalFocusType state, derive relatedSkillIds and relatedRoleIds sets using timelineEntities data, wire into existing hover handlers","status":"closed","priority":1,"blocked_by":[],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:27.099307+00:00","closed":"2026-02-17T14:17:28.063483065+00:00"} -{"id":"task-1771337311-1f39","title":"Apply focus-mode dimming to TimelineInterventionsSubsection","description":"Pass globalFocusId/relatedRoleIds to timeline, dim non-related timeline items with opacity transition","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:31.532282963+00:00","closed":"2026-02-17T14:17:28.154478577+00:00"} -{"id":"task-1771337316-d45f","title":"Apply focus-mode dimming to RepeatMedicationsSubsection","description":"Pass globalFocusId/relatedSkillIds to skill pills, dim non-related skill rows with opacity transition","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:36.447585246+00:00","closed":"2026-02-17T14:17:28.246180358+00:00"} -{"id":"task-1771337321-b56c","title":"Wire constellation node hover to global focus and add graph background dimming","description":"Update onNodeHover to set globalFocusId for both role AND skill node hovers, add CSS dimming to constellation background/axis during focus mode","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:41.046446549+00:00","closed":"2026-02-17T14:17:28.342976988+00:00"} -{"id":"task-1771337325-9009","title":"Verify lint, typecheck, build pass and manual testing","description":"Run validation gates, check for stuck states, verify reduced-motion respect","status":"closed","priority":3,"blocked_by":["task-1771337311-1f39","task-1771337316-d45f","task-1771337321-b56c"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:45.626698271+00:00","closed":"2026-02-17T14:17:39.422234149+00:00"} diff --git a/.ralph/agent/tasks.jsonl.lock b/.ralph/agent/tasks.jsonl.lock deleted file mode 100644 index e69de29..0000000 diff --git a/.ralph/current-events b/.ralph/current-events deleted file mode 100644 index e30fe53..0000000 --- a/.ralph/current-events +++ /dev/null @@ -1 +0,0 @@ -.ralph/events-20260217-140555.jsonl \ No newline at end of file diff --git a/.ralph/current-loop-id b/.ralph/current-loop-id deleted file mode 100644 index 89a5e8b..0000000 --- a/.ralph/current-loop-id +++ /dev/null @@ -1 +0,0 @@ -primary-20260217-140555 \ No newline at end of file diff --git a/.ralph/events-20260217-140400.jsonl b/.ralph/events-20260217-140400.jsonl deleted file mode 100644 index 7bf0dc7..0000000 --- a/.ralph/events-20260217-140400.jsonl +++ /dev/null @@ -1 +0,0 @@ -{"ts":"2026-02-17T14:04:00.938681910+00:00","iteration":0,"hat":"loop","topic":"task.start","triggered":"planner","payload":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n - constellation node hover\n - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n - graph axis/background\n - unrelated graph nodes/labels/links\n - unrelated time... [truncated, 3038 chars total]"} diff --git a/.ralph/events-20260217-140555.jsonl b/.ralph/events-20260217-140555.jsonl deleted file mode 100644 index 7f45d0c..0000000 --- a/.ralph/events-20260217-140555.jsonl +++ /dev/null @@ -1,3 +0,0 @@ -{"ts":"2026-02-17T14:05:55.280271324+00:00","iteration":0,"hat":"loop","topic":"task.start","triggered":"planner","payload":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n - constellation node hover\n - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n - graph axis/background\n - unrelated graph nodes/labels/links\n - unrelated time... [truncated, 3038 chars total]"} -{"payload":"Global focus mode implemented: hover any constellation node, skill pill, or timeline item to dim non-related UI to 0.25 opacity. Axis/labels dim via CSS. Typecheck pass, lint pass (pre-existing warnings only), build pass. Commit: 47b52b5","topic":"build.done","ts":"2026-02-17T14:18:22.337524276+00:00"} -{"payload":"tests: pass (no test framework), lint: pass (0 errors, 5 pre-existing warnings), typecheck: pass, audit: pass, coverage: N/A, complexity: low, duplication: pass, performance: pass","topic":"build.done","ts":"2026-02-17T14:19:11.040920579+00:00"} diff --git a/.ralph/history.jsonl b/.ralph/history.jsonl deleted file mode 100644 index d867919..0000000 --- a/.ralph/history.jsonl +++ /dev/null @@ -1,2 +0,0 @@ -{"ts":"2026-02-17T14:04:01.040268715Z","type":{"kind":"loop_started","prompt":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n - constellation node hover\n - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n - graph axis/background\n - unrelated graph nodes/labels/links\n - unrelated timeline and dashboard elements\n- Keep the following elements visually emphasized (not darkened):\n - hovered skill pill\n - hovered/active constellation node\n - connection lines between related node/skill items\n - timeline series item related to that skill/node\n- On hover exit, restore default appearance cleanly with no stuck state.\n- Preserve existing click behavior, keyboard behavior, and detail panel opening logic.\n- Respect reduced-motion preferences and existing accessibility patterns.\n\n## Likely Files To Update\n\n- `src/components/DashboardLayout.tsx`\n- `src/hooks/useConstellationInteraction.ts`\n- `src/hooks/useConstellationHighlight.ts`\n- `src/components/TimelineInterventionsSubsection.tsx`\n- `src/components/RepeatMedicationsSubsection.tsx`\n- `src/components/ExpandableCardShell.tsx`\n- `src/index.css`\n\nUpdate additional files only if necessary.\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] Hovering a constellation node enters focus mode with global dimming.\n- [ ] Hovering a skill pill enters focus mode with global dimming.\n- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted.\n- [ ] Graph axis/background visibly darken during focus mode.\n- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state.\n- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios.\n\n## Playwright MCP Verification\n\nReviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`:\n\n- Run or confirm dev server at `http://localhost:5173`\n- Capture baseline screenshot before hover\n- Hover a constellation node and capture screenshot\n- Hover a skill pill and capture screenshot\n- In both hover screenshots, verify:\n - unrelated areas are darkened\n - related graph + timeline + skill elements remain emphasized\n\n## Constraints\n\n- Do not add new dependencies.\n- Follow existing TypeScript/React conventions and current styling system.\n- Keep changes focused to this feature only.\n- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion.\n\n## Status\n\nTrack progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`.\nWhen all success criteria are met, print `LOOP_COMPLETE`.\n"}} -{"ts":"2026-02-17T14:05:55.382060260Z","type":{"kind":"loop_started","prompt":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n - constellation node hover\n - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n - graph axis/background\n - unrelated graph nodes/labels/links\n - unrelated timeline and dashboard elements\n- Keep the following elements visually emphasized (not darkened):\n - hovered skill pill\n - hovered/active constellation node\n - connection lines between related node/skill items\n - timeline series item related to that skill/node\n- On hover exit, restore default appearance cleanly with no stuck state.\n- Preserve existing click behavior, keyboard behavior, and detail panel opening logic.\n- Respect reduced-motion preferences and existing accessibility patterns.\n\n## Likely Files To Update\n\n- `src/components/DashboardLayout.tsx`\n- `src/hooks/useConstellationInteraction.ts`\n- `src/hooks/useConstellationHighlight.ts`\n- `src/components/TimelineInterventionsSubsection.tsx`\n- `src/components/RepeatMedicationsSubsection.tsx`\n- `src/components/ExpandableCardShell.tsx`\n- `src/index.css`\n\nUpdate additional files only if necessary.\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] Hovering a constellation node enters focus mode with global dimming.\n- [ ] Hovering a skill pill enters focus mode with global dimming.\n- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted.\n- [ ] Graph axis/background visibly darken during focus mode.\n- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state.\n- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios.\n\n## Playwright MCP Verification\n\nReviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`:\n\n- Run or confirm dev server at `http://localhost:5173`\n- Capture baseline screenshot before hover\n- Hover a constellation node and capture screenshot\n- Hover a skill pill and capture screenshot\n- In both hover screenshots, verify:\n - unrelated areas are darkened\n - related graph + timeline + skill elements remain emphasized\n\n## Constraints\n\n- Do not add new dependencies.\n- Follow existing TypeScript/React conventions and current styling system.\n- Keep changes focused to this feature only.\n- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion.\n\n## Status\n\nTrack progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`.\nWhen all success criteria are met, print `LOOP_COMPLETE`.\n"}} diff --git a/.ralph/history.jsonl.lock b/.ralph/history.jsonl.lock deleted file mode 100644 index e69de29..0000000 diff --git a/.ralph/loop.lock b/.ralph/loop.lock deleted file mode 100644 index d2682f6..0000000 --- a/.ralph/loop.lock +++ /dev/null @@ -1,5 +0,0 @@ -{ - "pid": 2082303, - "started": "2026-02-17T14:05:55.274566523Z", - "prompt": "# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that ..." -} \ No newline at end of file diff --git a/PROMPT.md b/PROMPT.md index ef434f8..07c8eb9 100644 --- a/PROMPT.md +++ b/PROMPT.md @@ -1,72 +1,103 @@ -# Task: Constellation Hover Focus Mode With Global Dimming +# Task: Fix Mobile Responsiveness for Small Viewport Widths (≤430px) -Implement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized. +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. + +## Context + +- **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 + +## Target Viewports + +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 + +## Known Issues (from codebase analysis) + +### 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. + +### 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. + +### 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. ## Requirements -- Support hover-triggered focus mode from: - - constellation node hover - - skill pill hover -- In focus mode, darken non-related UI across the page, including: - - graph axis/background - - unrelated graph nodes/labels/links - - unrelated timeline and dashboard elements -- Keep the following elements visually emphasized (not darkened): - - hovered skill pill - - hovered/active constellation node - - connection lines between related node/skill items - - timeline series item related to that skill/node -- On hover exit, restore default appearance cleanly with no stuck state. -- Preserve existing click behavior, keyboard behavior, and detail panel opening logic. -- Respect reduced-motion preferences and existing accessibility patterns. - -## Likely Files To Update - -- `src/components/DashboardLayout.tsx` -- `src/hooks/useConstellationInteraction.ts` -- `src/hooks/useConstellationHighlight.ts` -- `src/components/TimelineInterventionsSubsection.tsx` -- `src/components/RepeatMedicationsSubsection.tsx` -- `src/components/ExpandableCardShell.tsx` -- `src/index.css` - -Update additional files only if necessary. +- **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. ## Success Criteria All of the following must be true: -- [ ] Hovering a constellation node enters focus mode with global dimming. -- [ ] Hovering a skill pill enters focus mode with global dimming. -- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted. -- [ ] Graph axis/background visibly darken during focus mode. -- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state. -- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work. -- [ ] `npm run lint` passes. -- [ ] `npm run typecheck` passes. -- [ ] `npm run build` passes. -- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios. - -## Playwright MCP Verification - -Reviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`: - -- Run or confirm dev server at `http://localhost:5173` -- Capture baseline screenshot before hover -- Hover a constellation node and capture screenshot -- Hover a skill pill and capture screenshot -- In both hover screenshots, verify: - - unrelated areas are darkened - - related graph + timeline + skill elements remain emphasized +- [ ] `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 add new dependencies. -- Follow existing TypeScript/React conventions and current styling system. -- Keep changes focused to this feature only. -- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion. +- 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 ## Status -Track progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`. -When all success criteria are met, print `LOOP_COMPLETE`. +Track progress here. When all success criteria are met, print LOOP_COMPLETE. diff --git a/hats.yml b/hats.yml index 037e956..14550c0 100644 --- a/hats.yml +++ b/hats.yml @@ -20,88 +20,162 @@ backpressure: hats: planner: - name: "Hover Focus Planner" - description: "Plans the hover-focus dimming implementation and incorporates reviewer feedback." + name: "Responsive Planner" + description: "Audits the codebase for mobile responsiveness issues and creates an ordered fix 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 first. + You are the Planner. Read PROMPT.md for the full task specification. - If triggered by review.changes_requested, read .ralph/review.md and update the plan for the exact issues raised. + If triggered by review.changes_requested, read .ralph/review.md for visual + review feedback and update the plan to address those specific issues. Your job: - 1. Inspect the relevant files and current highlight flow. - 2. Write a concrete implementation plan to .ralph/plan.md. - 3. Include exact files to change and how hover state should propagate. - 4. Include a verification checklist matching PROMPT.md success criteria. + 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 - Rules: - - Do not write code in this hat. - - Keep the plan iteration-scoped and actionable. - - If all PROMPT.md criteria are already satisfied and validated, print LOOP_COMPLETE. + 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) - Emit plan.ready when the plan is complete. + 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. builder: - name: "Hover Focus Builder" - description: "Implements the planned dimming/highlight behavior and prepares for review." + name: "Responsive Builder" + description: "Implements responsive CSS/layout fixes from the plan, ensuring lint/typecheck/build pass." triggers: ["plan.ready"] publishes: ["build.done"] memory: path: ".ralph/agent/memories.md" scope: "global" instructions: | - You are the builder. Read PROMPT.md and .ralph/plan.md. + You are the Builder. Read PROMPT.md for the task and .ralph/plan.md for the + implementation plan. Your job: - 1. Implement the plan in the codebase. - 2. Ensure hover interactions cover graph node hover and skill pill hover. - 3. Keep the active skill pill, active node, connecting lines, and related timeline series item visually emphasized while non-related UI darkens. - 4. Preserve accessibility and reduced-motion behavior. - 5. Run npm run lint && npm run typecheck && npm run build. - 6. Record what changed and what was validated in .ralph/build.md. + 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+) - Rules: - - Follow existing project conventions and styling patterns. - - Do not add new dependencies. - - Do not claim completion if any gate fails. + 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) - Emit build.done when implementation is complete and gates pass. + 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. reviewer: - name: "Hover Focus Reviewer" - description: "Validates feature behavior and runs Playwright MCP checks before approving." + name: "Visual Reviewer" + description: "Uses Playwright MCP to visually validate mobile responsiveness at all target viewports." triggers: ["build.done"] publishes: ["review.changes_requested"] memory: path: ".ralph/agent/memories.md" scope: "global" instructions: | - You are the reviewer. Read PROMPT.md, .ralph/plan.md, and .ralph/build.md. + You are the Visual Reviewer. Use Playwright MCP to visually verify the + portfolio website is responsive at small viewport widths. - Validation order: - 1. Run npm run lint && npm run typecheck && npm run build. - 2. Verify code changes match PROMPT.md requirements. - 3. Use Playwright MCP to verify behavior in the running app: - - Ensure dev server is running at http://localhost:5173 (start npm run dev if needed). - - Navigate to the dashboard where the constellation chart is visible. - - Hover a constellation node and confirm: - a) page/axis/background and unrelated UI are darkened, - b) hovered node remains highlighted, - c) connection lines for the hovered/related skill relationship remain highlighted, - d) related timeline series item remains highlighted. - - Hover a skill pill and confirm the same focused-state behavior. - - Capture evidence with at least one screenshot per hover scenario. - 4. Write findings to .ralph/review.md with pass/fail evidence. + Read PROMPT.md for requirements and success criteria. - Decision: - - If every criterion is satisfied, print LOOP_COMPLETE. - - If anything fails, write exact fixes in .ralph/review.md and emit review.changes_requested. + ## Review Process - Circuit breaker: - - If the same blocker repeats with materially identical evidence for 3 cycles, - record status ESCALATE in .ralph/review.md with owner + target date, - emit review.changes_requested, and require human clarification before continuing. + 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. diff --git a/ralph.yml b/ralph.yml index 995f410..0b8a921 100644 --- a/ralph.yml +++ b/ralph.yml @@ -2,7 +2,7 @@ cli: backend: "claude" event_loop: - prompt_file: "PROMPT.md" + starting_event: "work.start" completion_promise: "LOOP_COMPLETE" max_iterations: 40