Make dashboard mobile-responsive + add PWA support

[suraj-markup]

Summary

Make the Next.js dashboard (packages/web) fully mobile-responsive and add Progressive Web App (PWA) support so users can control the orchestrator from their phone via ngrok tunnel.

Context

The dashboard currently works on desktop but isn't optimized for mobile screens. By making it responsive and adding PWA support (manifest, service worker, install-to-home-screen), users can expose localhost:3000 via ngrok and control agents from their phone without carrying their laptop.

Requirements

1. Mobile-Responsive Design

Make all pages work well on small screens (320px–428px width):

Components to update:

• Dashboard.tsx — Stats bar should scroll horizontally or stack on mobile. Cards single-column on small screens.
• SessionCard.tsx — Prevent text overflow, ensure touch-friendly tap targets (min 44x44px).
• SessionDetail.tsx — Stack PR info, CI status, terminal, event log vertically. Terminal full-width.
• AttentionZone.tsx — Verify padding/margins on mobile.
• PRStatus.tsx — Verify badges wrap properly.
• CIBadge.tsx — Verify sizing on mobile.

Patterns:

• Mobile-first Tailwind: base styles for mobile, md: / lg: for larger screens
• Touch-friendly tap targets (min 44x44px)
• Horizontal scroll for data tables/stats rather than squishing
• Stack layouts vertically on mobile
• Full-width buttons on mobile

2. PWA Support

Create packages/web/public/ directory with:

• manifest.json:

  • name: "Agent Orchestrator", short_name: "AO"
  • start_url: "/", display: "standalone"
  • theme_color & background_color: "#0d1117" (dark theme)
  • Placeholder SVG icons (192x192, 512x512)

• sw.js — Service worker:

  • Cache-first for static assets (JS, CSS, images)
  • Network-first for API routes (fresh data)
  • Offline fallback page

• offline.html — Dark-themed offline page: "You're offline. Reconnecting..."

Update layout.tsx metadata:

• <link rel="manifest">, theme-color meta, apple-mobile-web-app-capable, viewport with viewport-fit=cover, apple-touch-icon

Register service worker in root layout or client component.

3. Install Prompt (Nice to have)

• Small "Install App" banner when beforeinstallprompt fires
• Dismissible, non-intrusive, at bottom of dashboard

Technical Notes

• Current stack: Next.js 15, React 19, Tailwind CSS 4, App Router
• Dark theme uses CSS variables defined in globals.css
• Follow all conventions in CLAUDE.md (ESM, .js imports, node: prefix, etc.)
• Run pnpm typecheck in packages/web to verify no breakage

Acceptance Criteria

• Dashboard usable on 375px-wide screen (iPhone SE size)
• All tap targets >= 44x44px
• PWA installable on mobile (manifest + service worker)
• Offline fallback page works
• pnpm typecheck passes
• No regressions on desktop layout