feat: add PWA support with install prompt and offline handling

- Implemented PWA manifest and icons for PairUX application.
- Created a script to generate PNG icons from SVG templates.
- Added offline page to inform users of connectivity issues.
- Developed service worker for caching and offline support.
- Introduced InstallPrompt component to facilitate PWA installation.
- Created hooks for managing PWA installation state and user preferences.

Author: ralyodio

.claude/settings.local.json

@@ -159,7 +159,9 @@
       "Bash(pnpm --filter web build:*)",
       "Bash(pnpm --filter web test -- --run src/app/join/[joinCode]/page.test.tsx src/app/session/[id]/page.test.tsx)",
       "Bash(pnpm --filter web test)",
-      "Bash(pnpm --filter web lint:*)"
+      "Bash(pnpm --filter web lint:*)",
+      "Bash(xargs -I {} bash -c 'echo \"\"=== {} ===\"\" && wc -l {}')",
+      "Bash(node scripts/generate-pwa-icons.mjs:*)"
     ],
     "deny": ["Bash(npm *)", "Bash(npx *)"],
     "additionalDirectories": [

TODO.md

@@ -71,17 +71,17 @@
   - [x] Fullscreen toggle
   - [x] Connection status indicator
 
-- [ ] **Remote Control (Viewer)**
-  - [ ] Request control button
-  - [ ] Control status indicator (view-only/granted)
-  - [ ] Mouse input capture & transmission
-  - [ ] Keyboard input capture & transmission
-  - [ ] Multi-cursor overlay (see other participants)
-
-- [ ] **PWA Features**
-  - [ ] Service worker for offline shell
-  - [ ] Web app manifest
-  - [ ] Install prompt
+- [x] **Remote Control (Viewer)**
+  - [x] Request control button
+  - [x] Control status indicator (view-only/granted)
+  - [x] Mouse input capture & transmission
+  - [x] Keyboard input capture & transmission
+  - [x] Multi-cursor overlay (see other participants)
+
+- [x] **PWA Features**
+  - [x] Service worker for offline shell
+  - [x] Web app manifest
+  - [x] Install prompt
   - [ ] Push notification support (future)
 
 ---
@@ -90,53 +90,53 @@
 
 ### API Endpoints (Server-Side)
 
-- [ ] **POST /api/chat/send**
-  - [ ] Validate session membership
-  - [ ] Store message in Supabase
-  - [ ] Broadcast via Supabase Realtime
-  - [ ] Rate limiting (10 msg/min)
+- [x] **POST /api/chat/send**
+  - [x] Validate session membership
+  - [x] Store message in Supabase
+  - [x] Broadcast via Supabase Realtime
+  - [x] Rate limiting (10 msg/min)
 
-- [ ] **GET /api/chat/stream (SSE)**
-  - [ ] Server-Sent Events connection
-  - [ ] Real-time message delivery
-  - [ ] Heartbeat/keepalive
-  - [ ] Reconnection handling
+- [x] **GET /api/chat/stream (SSE)**
+  - [x] Server-Sent Events connection
+  - [x] Real-time message delivery
+  - [x] Heartbeat/keepalive
+  - [x] Reconnection handling
 
-- [ ] **GET /api/chat/history**
-  - [ ] Fetch last 100 messages
-  - [ ] Pagination support
-  - [ ] Session-scoped access
+- [x] **GET /api/chat/history**
+  - [x] Fetch last 100 messages
+  - [x] Pagination support
+  - [x] Session-scoped access
 
 ### Chat UI Components
 
-- [ ] **Chat Panel**
-  - [ ] Collapsible sidebar/drawer
-  - [ ] Message list with auto-scroll
-  - [ ] Participant avatars/colors
-  - [ ] Timestamp display
-  - [ ] Unread message indicator
-
-- [ ] **Message Input**
-  - [ ] Text input with send button
-  - [ ] Enter to send, Shift+Enter for newline
-  - [ ] Character limit (500)
+- [x] **Chat Panel**
+  - [x] Collapsible sidebar/drawer
+  - [x] Message list with auto-scroll
+  - [x] Participant avatars/colors
+  - [x] Timestamp display
+  - [x] Unread message indicator
+
+- [x] **Message Input**
+  - [x] Text input with send button
+  - [x] Enter to send, Shift+Enter for newline
+  - [x] Character limit (500)
   - [ ] Typing indicator (optional)
 
-- [ ] **Message Types**
-  - [ ] Text messages
-  - [ ] System messages (join/leave/control)
-  - [ ] Emoji support (native)
+- [x] **Message Types**
+  - [x] Text messages
+  - [x] System messages (join/leave/control)
+  - [x] Emoji support (native)
 
 ### Data Model
 
-- [ ] **chat_messages table**
-  - [ ] id (uuid)
-  - [ ] session_id (fk)
-  - [ ] user_id (fk, nullable for guests)
-  - [ ] display_name (string)
-  - [ ] content (text)
-  - [ ] message_type (text/system)
-  - [ ] created_at (timestamp)
+- [x] **chat_messages table**
+  - [x] id (uuid)
+  - [x] session_id (fk)
+  - [x] user_id (fk, nullable for guests)
+  - [x] display_name (string)
+  - [x] content (text)
+  - [x] message_type (text/system)
+  - [x] created_at (timestamp)
 
 ---
 

apps/web/next.config.ts

@@ -1,4 +1,11 @@
 import type { NextConfig } from 'next';
+import withSerwistInit from '@serwist/next';
+
+const withSerwist = withSerwistInit({
+  swSrc: 'src/app/sw.ts',
+  swDest: 'public/sw.js',
+  disable: process.env.NODE_ENV === 'development',
+});
 
 const nextConfig: NextConfig = {
   // Enable React strict mode for better development experience
@@ -55,4 +62,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSerwist(nextConfig);

apps/web/package.json

@@ -16,6 +16,7 @@
     "clean": "rm -rf .next out node_modules"
   },
   "dependencies": {
+    "@serwist/next": "^9.5.0",
     "@supabase/ssr": "^0.5.0",
     "@supabase/supabase-js": "^2.47.0",
     "clsx": "^2.1.0",
@@ -26,6 +27,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-type-animation": "^3.2.0",
+    "serwist": "^9.5.0",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.24.0"
   },
@@ -42,6 +44,7 @@
     "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.0",
     "postcss": "^8.4.49",
+    "sharp": "^0.34.5",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^2.1.0"