portfolio/hats.yml

cli:
  backend: "claude"

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

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: "Mobile Overview Planner"
    description: "Analyses the existing drawer layout and banner, then writes a concrete implementation plan for the new inline overview section."
    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 to understand the full task — replacing the mobile banner with an inline overview section and removing the "More" drawer.

      If triggered by review.changes_requested, read .ralph/review.md for feedback and update the plan to address it.

      Your job:
      1. Read the current source files:
         - src/components/MobilePatientBanner.tsx (being deleted)
         - src/components/MobileBottomNav.tsx (removing drawer + More button)
         - src/components/DashboardLayout.tsx (swapping banner for new component)
         - src/components/Sidebar.tsx (reference for button styles)
      2. Plan the new MobileOverviewHeader component structure:
         - Which elements from MobileBottomNav's drawer to reuse
         - How to layout logo + search, patient data, tags, action buttons
         - State management for ReferralFormModal
      3. Plan the MobileBottomNav cleanup:
         - Which imports become dead after removing drawer
         - Which local components to delete (TagPill, AlertFlag)
         - Rename existing "Overview" to "Summary" with ClipboardList icon
         - Add new "Overview" item at position 0 with UserRound icon and tileId 'mobile-overview'
         - Final nav order: Overview, Summary, Experience, Skills (4 items)
      4. Write a detailed plan to .ralph/plan.md

      Important:
      - Do NOT write code. Planning only.
      - Be specific: file paths, line numbers, style values, component structure.
      - The mobile nav breakpoint is max-width: 599px (useIsMobileNav hook).
      - The new section is static (not sticky) — it just sits at the top of the scroll content.
      - Action buttons replace the alerts section: Download CV (full-width, text+icon) + 3 icon-only buttons (Contact, LinkedIn, GitHub).

      Emit plan.ready when the plan is written.

  builder:
    name: "Mobile Overview Builder"
    description: "Implements the new MobileOverviewHeader, cleans up MobileBottomNav, and wires everything in DashboardLayout."
    triggers: ["plan.ready"]
    publishes: ["build.done"]
    memory:
      path: ".ralph/agent/memories.md"
      scope: "global"
    instructions: |
      You are the Builder. Read PROMPT.md for the overall task and .ralph/plan.md for the implementation plan.

      Your job:
      1. Create src/components/MobileOverviewHeader.tsx:
         - Static inline section with logo, search, patient data, tags, action buttons
         - Wire ReferralFormModal with local state
         - Must accept onSearchClick prop
         - Must have data-tile-id="mobile-overview"
      2. Clean up src/components/MobileBottomNav.tsx:
         - Remove drawer, More button, and all dead code/imports
         - Rename existing "Overview" to "Summary" with ClipboardList icon (keeps tileId 'patient-summary')
         - Add new "Overview" at position 0 with UserRound icon and tileId 'mobile-overview'
         - Final nav order: Overview, Summary, Experience, Skills
      3. Update src/components/DashboardLayout.tsx:
         - Remove MobilePatientBanner import and render
         - Add MobileOverviewHeader import and render with onSearchClick
      4. Delete src/components/MobilePatientBanner.tsx
      5. Run: npm run lint && npm run typecheck && npm run build
      6. Fix any errors before proceeding
      7. Start the dev server with `npm run dev` so the reviewer can test

      Code conventions:
      - TypeScript strict mode (noUnusedLocals, noUnusedParameters)
      - Tailwind utility classes + inline CSSProperties for dynamic styles
      - Path alias: @/* → src/*
      - lucide-react icons, no new dependencies
      - All interactive elements need aria-labels
      - The new section should NOT be sticky — it scrolls with content

      Emit build.done when implementation is complete and quality gates pass.

  reviewer:
    name: "Mobile Overview Reviewer"
    description: "Validates the implementation using Playwright MCP on a mobile viewport."
    triggers: ["build.done"]
    publishes: ["review.changes_requested"]
    memory:
      path: ".ralph/agent/memories.md"
      scope: "global"
    instructions: |
      You are the Reviewer. Read PROMPT.md for success criteria and .ralph/plan.md for what was implemented.

      Your job:
      1. Run quality gates: npm run lint && npm run typecheck && npm run build
      2. Ensure the dev server is running (`npm run dev` — port 5173). If not, start it.
      3. Use the Playwright MCP tools to test on a mobile viewport:
         - Resize browser to 375x812 (iPhone-sized)
         - Navigate to http://localhost:5173
         - Get past the boot sequence + ECG animation + login screen (click "Sign In")

      4. Verify the new overview section:
         - Take a snapshot — should see logo + search bar at top of content
         - Patient info section with avatar, name, data rows
         - Tag pills displayed
         - Download CV button (full-width with icon + text)
         - Three icon-only buttons in a row (Contact, LinkedIn, GitHub)
         - Click Contact button — referral form modal should open
         - Close modal

      5. Verify bottom nav:
         - Should have exactly 4 items: Overview, Summary, Experience, Skills
         - No "More" button visible
         - Click Overview — should scroll to the new top section (mobile-overview)
         - Click Summary — should scroll to the patient summary tile
         - No drawer appears at any point

      6. Verify cleanup:
         - MobilePatientBanner.tsx should not exist (check with file read)
         - No visible sticky banner at viewport top

      7. Write review to .ralph/review.md with:
         - What passed
         - What failed (with Playwright snapshot evidence)
         - Specific fixes needed

      Decision logic:
      - If everything passes: print LOOP_COMPLETE
      - If fixes needed: write specific feedback to .ralph/review.md and emit review.changes_requested

      Circuit breaker: If the same blocker appears 3+ times with identical evidence, record it in .ralph/review.md with status "ESCALATE — needs human decision" and print LOOP_COMPLETE.