Updated chart

.ralph/history.jsonl

@@ -7,3 +7,4 @@
 {"ts":"2026-02-16T11:45:43.872265133Z","type":{"kind":"loop_started","prompt":"# Task: Sidebar-First Navigation Refactor (Remove Top Navbar/Subnav)\n\nRefactor the dashboard so navigation is fully sidebar-driven, with clear recruiter-facing labels and robust responsive behavior. The current layout is still tied to an older navbar/subnav model and shows incorrect scroll behavior in the sidebar area.\n\n## Context\n\nCurrent implementation has separate top navigation (`TopBar`, `SubNav`) and a desktop-only sidebar. On upward scrolling in the sidebar, hidden space becomes visible in a way that implies layered layout offsets from the old top navbar/subnav structure.\n\n## Requirements\n\n- Remove top navbar/subnav from the rendered dashboard flow and migrate section navigation into the sidebar.\n- Replace section labels with recruiter-facing content labels (no GP/internal metaphors as labels):\n  - Overview\n  - Projects\n  - Experience\n  - Education\n  - Skills\n- Keep iconography that can still evoke the GP-system metaphor, but labels must match actual portfolio content.\n- Add a `Navigation` subheader area in the sidebar for section links.\n- Keep a separate `My Data` area above `Navigation` in expanded sidebar mode.\n- Ensure the sidebar no longer reveals hidden spacing/artifacts when scrolling upward.\n- Implement mobile sidebar behavior (currently missing):\n  - Sidebar is collapsed by default.\n  - A hamburger control appears at the top and toggles expanded/collapsed state.\n  - In collapsed mode, render a compact vertical rail with:\n    - hamburger control at the top\n    - the five section icons directly beneath for one-tap section jumping\n  - In expanded mode, reveal full sidebar content:\n    - `My Data` block\n    - `Navigation` links with icon + text labels\n    - tags, alerts, and highlights sections\n- Preserve or improve accessibility:\n  - Keyboard operable controls\n  - Correct `aria-*` labels for menu toggle and navigation regions\n  - Visible focus states\n- Preserve smooth section scrolling/anchor behavior from navigation actions.\n\n## Suggested GP-Metaphor Icon Mapping (labels remain recruiter-facing)\n\nUse these concrete icon targets (or closest equivalents from existing icon library):\n\n- Overview: `UserRound` (profile summary)\n- Projects: `Pill` (interventions/medications metaphor)\n- Experience: `Workflow` (pathway/Sankey metaphor)\n- Education: `GraduationCap` (training/education)\n- Skills: `Wrench` (capabilities/tools)\n\nLabel text must stay recruiter-facing:\n- `Overview`, `Projects`, `Experience`, `Education`, `Skills`\n\n## Likely Files In Scope\n\n- `src/components/DashboardLayout.tsx`\n- `src/components/Sidebar.tsx`\n- `src/components/SubNav.tsx`\n- `src/components/TopBar.tsx`\n- `src/index.css`\n- Any related hooks/types/styles needed for section activity and responsive state\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] No top navbar/subnav is rendered in the final dashboard layout.\n- [ ] Sidebar contains the five required recruiter-facing nav labels under a `Navigation` subheader.\n- [ ] Expanded sidebar includes a distinct `My Data` area above `Navigation`.\n- [ ] Sidebar scrolling no longer exposes hidden top spacing/artifacts when scrolling upward.\n- [ ] Desktop navigation from sidebar correctly jumps/scrolls to each section.\n- [ ] On mobile, sidebar is collapsed by default with hamburger at top and five icon shortcuts visible.\n- [ ] On mobile expand, sidebar shows `My Data`, full navigation links (icon + text), and tags/alerts/highlights.\n- [ ] Navigation controls are keyboard accessible with appropriate ARIA semantics.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n\n## Constraints\n\n- Use the existing project stack and conventions (TypeScript + React + current design language).\n- Do not reintroduce GP-style labels like \"Significant Interventions\" or \"Patient Summary\" for the sidebar nav text.\n- Keep changes focused on layout/navigation behavior; avoid unrelated refactors.\n\n## Status\n\nTrack implementation progress in this file or `.ralph/plan.md`.\nWhen all success criteria are met, print LOOP_COMPLETE.\n"}}
 {"ts":"2026-02-16T12:25:22.487713369Z","type":{"kind":"loop_started","prompt":"# Task: Patient Pathway Graph Stability + Unified Experience/Education Data Model\n\nRefactor the patient-pathway style timeline/graph and related experience UI so interaction feels stable, data is consistent across all sections, and education is merged into the same primary timeline flow.\n\n## Context\n\nCurrent behavior has two major quality issues:\n- Hovering graph-related content appears to trigger graph-wide motion/jiggle, implying unnecessary re-rendering or unstable layout state.\n- Timeline dates shown in the graph do not match the dates shown in work-experience content.\n\nThe layout/content model is also split in ways that make consistency harder:\n- Work and education data appear to be rendered through different pathways.\n- Education is duplicated via a separate section beneath work experience.\n\n## Requirements\n\n- Fix interaction stability:\n  - Hovering either a graph element OR its corresponding experience/education card must apply the same highlight behavior.\n  - Hover should not cause global graph jiggle/repositioning.\n- Diagnose and resolve date mismatch root cause:\n  - Determine whether mismatch is from render logic, duplicated data sources, or both.\n  - Deliver a fix so graph timeline dates match displayed card dates.\n- Create one source of truth for timeline entities (career + education):\n  - Include fields for full title, shortened graph label, date range, description/details, and skills list.\n  - Use this canonical dataset to drive graph nodes/edges and card rendering.\n- Skills integration:\n  - Aggregate skills from canonical entities.\n  - Feed the highest-frequency skills into sidebar tags.\n- Experience/Education presentation update:\n  - Remove the standalone work-experience subheader and existing role pill treatment.\n  - In the unified timeline list, career entries show a `Career Intervention` pill.\n  - Education entries remain in the same overall list/component flow but are visually right-aligned.\n  - Education entries include an `Education Intervention` pill inside each card.\n  - Remove the separate education section that currently sits below work experience.\n\n## Likely Files In Scope\n\n- `src/data/*` (or equivalent canonical data files)\n- `src/types/*` (shared timeline entity typing)\n- `src/components/*` for graph, timeline cards, sidebar tags, and experience/education sections\n- Any related hooks/utilities managing hover state, mapping, and aggregation\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] Hovering on graph items and corresponding cards produces the same highlight outcome.\n- [ ] Hover interactions do not cause full-graph jitter/repositioning artifacts.\n- [ ] Graph dates and card dates are consistent for every timeline entry.\n- [ ] A single canonical dataset powers both graph rendering and experience/education card content.\n- [ ] Each timeline entry supports title + short graph label + skills + date fields needed by all consumers.\n- [ ] Sidebar tags are sourced from aggregated canonical skills (most frequent first).\n- [ ] Career entries show `Career Intervention` pill treatment.\n- [ ] Education entries are visually right-aligned and show `Education Intervention` pill treatment.\n- [ ] Separate standalone education section below work experience is removed.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n\n## Constraints\n\n- Use existing stack/patterns (TypeScript + React + current project conventions).\n- Keep changes focused on graph/timeline/data consistency and the requested UI restructuring.\n- Do not introduce unrelated visual/system-wide refactors.\n\n## Status\n\nTrack implementation progress in this file or `.ralph/plan.md`.\nWhen all success criteria are met, print LOOP_COMPLETE.\n"}}
 {"ts":"2026-02-16T12:44:34.362708559Z","type":{"kind":"loop_completed","reason":"completion_promise"}}
+{"ts":"2026-02-16T12:53:32.069086745Z","type":{"kind":"loop_started","prompt":"# Task: D3 Career Constellation Remediation (Hover, Timeline Parity, Visual Alignment)\n\nImplement a full remediation of the career constellation chart and its linked timeline UI so interactions are reliable, timeline semantics are correct, and styling aligns with the rest of the site typography/tokens.\n\n## Context\n\nRecent chart refresh work did not fully resolve key issues:\n- Hover highlighting is still not consistently activating on chart nodes.\n- Timeline behavior in the chart is now more broken versus the work-experience timeline.\n- Styling in the chart layer is not fully aligned with the main design system (including font token consistency).\n\nThe implementation should be grounded in the current codebase and preserve existing UX intent where possible.\n\n## Requirements\n\n- Fix hover interaction reliability in the D3 chart:\n  - Ensure node hover consistently triggers graph highlighting on desktop.\n  - Preserve touch behavior (tap-to-pin and clear interactions).\n  - Preserve keyboard accessibility interactions.\n- Remove interaction-layer conflicts:\n  - Resolve any pointer interception between invisible accessibility overlays and SVG node hit targets.\n  - Ensure focus-only controls do not break pointer hover behavior.\n- Correct timeline data/semantic parity:\n  - Ensure constellation role nodes map to the intended work-experience scope.\n  - Prevent unintended education entries from being treated as role nodes unless explicitly intended.\n  - Align ordering semantics between the chart timeline and work-experience timeline.\n- Stabilize highlight state behavior:\n  - Ensure graph highlight state and linked timeline card highlighting remain coherent when hovering roles vs skills.\n  - Avoid reset/flicker edge cases on mouseleave/blur transitions.\n- Align chart styling with site design system:\n  - Use canonical font tokens consistently (UI vs mono usage should match the broader app).\n  - Remove or replace invalid/undefined font token usage impacting timeline/chart-adjacent components.\n  - Keep visual treatment consistent with existing dashboard cards/tokens (no unrelated redesign).\n- Keep architecture maintainable:\n  - Clarify data exports for timeline consumers (career-only, education-only, combined) where needed.\n  - Avoid duplicate or dead timeline component paths if they create inconsistency.\n\n## Validation Requirements\n\nRun and pass:\n- `npm run lint`\n- `npm run typecheck`\n- `npm run build`\n\nAlso perform manual behavioral checks and record concise notes in `.ralph/review.md`:\n- Desktop hover on role nodes and skill nodes.\n- Cross-highlight behavior between chart and timeline cards.\n- Touch/coarse-pointer behavior (tap-to-pin and clear).\n- Keyboard focus navigation and activation behavior.\n- Timeline order parity sanity-check against work-experience content.\n\n## Likely Files In Scope\n\n- `src/components/CareerConstellation.tsx`\n- `src/components/DashboardLayout.tsx`\n- `src/components/TimelineInterventionsSubsection.tsx`\n- `src/components/WorkExperienceSubsection.tsx` (if retained, removed, or reintegrated)\n- `src/data/timeline.ts`\n- `src/data/constellation.ts`\n- `src/index.css`\n- Related types in `src/types/pmr.ts` if needed\n\n## Success Criteria\n\nAll of the following must be true:\n- [ ] Constellation hover highlighting works reliably with pointer input.\n- [ ] Accessibility/focus affordances remain functional without breaking pointer interactions.\n- [ ] Timeline/role mapping in the chart is semantically correct and aligned with work-experience content.\n- [ ] Highlight synchronization between chart and timeline cards behaves predictably.\n- [ ] Font/token usage in chart and timeline-adjacent components is consistent with the app's design tokens.\n- [ ] Any legacy/duplicate timeline path that causes divergence is resolved or clearly justified.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n- [ ] Reviewer records manual verification outcomes in `.ralph/review.md`.\n\n## Constraints\n\n- Use the existing TypeScript + React + Vite stack and project conventions.\n- Keep changes scoped to constellation/timeline correctness and visual consistency.\n- Do not introduce broad unrelated refactors.\n- Prioritize correctness and maintainability over cosmetic novelty.\n\n## Status\n\nTrack progress in `.ralph/plan.md` and keep it updated.\nWhen all success criteria are met, print `LOOP_COMPLETE`.\n"}}