3 lines
6.2 KiB
JSON
3 lines
6.2 KiB
JSON
{"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"}}
|