portfolio/hats.yml

cli:
  backend: "claude"

event_loop:
  starting_event: "work.start"
  completion_promise: "LOOP_COMPLETE"
  max_iterations: 40

backpressure:
  gates:
    - name: "lint"
      command: "npm run lint"
      on_fail: "retry"
    - name: "typecheck"
      command: "npm run typecheck"
      on_fail: "retry"
    - name: "build"
      command: "npm run build"
      on_fail: "retry"

hats:
  planner:
    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 for the full task specification.

      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. 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

      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)

      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: "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 for the task and .ralph/plan.md for the
      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+)

      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)

      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: "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 Visual Reviewer. Use Playwright MCP to visually verify the
      portfolio website is responsive at small viewport widths.

      Read PROMPT.md for requirements and success criteria.

      ## Review Process

      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.