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.