Phase 4

Mobile PWA

Coffee shop headline: record, generate, QR, blown mind. Depends on Phase 1 (Vault for BYOK keys).

First Principle: Blow their mind in the room. Phone records the conversation. Reveal generates a custom page. QR code. They scan it. They see THEIR name on a page you built while talking to them.

The Coffee Shop Demo

You're sitting across from someone. You record the conversation on your phone.

60 seconds later, you show them a QR code. They scan it.

They see a custom page with their name, their pain points, their opportunities.

Built while you were talking to them.

Record

→

Transcribe

→

Generate

→

QR Code

→

Blown Mind

Second-Order Effects

Networking Events: Every conversation becomes a lead-gen opportunity. Walk-and-talk capture is the daily driver.
Speed = Magic: Under 90 seconds from recording to QR. If generation takes longer, the magic breaks.
No Laptop Required: Phone-only workflow. PWA launches like a native app. Add to Home Screen.
Shareability: QR code or SMS link. The other person has a live URL they can share with their team.

Atomic Parts

4.1

PWA Manifest + Service Worker

manifest.json (app name, icons, theme color, display: standalone), service worker (cache-first for app shell, network-first for API), layout.tsx meta tags. Result: "Add to Home Screen" on iOS/Android.

4.2

Mobile-Responsive Dashboard

Bottom nav bar (mobile only): Home, Record, Publish, Settings. Simplified page list as cards. Domain selector as dropdown. Touch-optimized buttons and inputs.

4.3

Live Transcription Engine

Primary: Web Speech API (SpeechRecognition) for browser-based transcription. Start/stop recording, real-time transcript display, auto-punctuation. Fallback: Deepgram/AssemblyAI WebSocket API for higher accuracy (BYOK via vault).

File: components/mobile/LiveRecorder.tsx

4.4

Quick Reveal Flow

After recording: transcript preview, simplified template picker (top 3-4 templates as cards), basic variables (prospect name, password, phone number), "Generate" button calling /api/reveal/run, progress indicator.

4.5

QR Code Generation

qrcode npm package (lightweight). After publish: full-screen QR display for scanning, copy URL fallback, elapsed time display.

4.6

Live Demo Screen

Single-screen flow: Record → Generate → QR. Elapsed time counter ("Generated in 47 seconds"). Share button for SMS/email link.

Dependencies

Phase 1 (Vault) — BYOK for transcription API keys (Deepgram/AssemblyAI)
Reveal pipeline — Already exists. Mobile is a new frontend for it.
No new backend needed — Optional Deepgram/AssemblyAI proxy if WebSocket auth requires server-side

Key Files

File	Role
public/manifest.json	PWA manifest
public/sw.js	Service worker
components/mobile/LiveRecorder.tsx	Transcription + recording UI
components/mobile/QuickReveal.tsx	Simplified Reveal flow
components/mobile/QRDisplay.tsx	Full-screen QR code
components/mobile/MobileNav.tsx	Bottom navigation bar

Risk to Mitigate: If generation takes more than 90 seconds, the magic breaks. Speed is everything. Consider: shorter templates for mobile, streaming progress updates, pre-warming the LLM connection.

Verification

PWA installs on iPhone and Android ("Add to Home Screen")
Recording works in mobile browser with real-time transcript
Generate + publish completes in under 90 seconds
QR code scans correctly on another phone
Scanned page shows prospect's name and relevant content
Share via SMS sends the live URL

Mobile Template Design Notes

Flush out during build. These are directional, not spec.

Speed Strategy

Stacked Page Generation

Generate page 1 fast (~20-30s) with links to deeper pages already baked in using deterministic slugs. Show QR immediately. Background loop generates and publishes pages 2, 3, etc. while prospect reads page 1. If they click a deep-dive link before it's ready, show a "generating..." interstitial that auto-refreshes.

Result: full depth, but the wow moment is instant.

Lead Capture

Always an Elegant CTA

Every mobile template must have a clean, natural way to connect with the person who generated the page. Not a hard gate on first visit — earn the connection.

Return gate: After they come back to the page (2nd+ visit), ask "Want to connect with [Derek]?" Auto-share their info or prefill a contact form.
Visit-gated email: After N visits, require email to continue reading deeper pages. Soft friction, not a wall.
CTA preset per event: Before a networking event, preset the CTA ("Schedule a call with Derek", "Join our next workshop", etc.) so generation is one-tap.

Wizard Flow

Mobile Generation Wizard

Full flow, all preset-able before an event but overridable in the moment:

Source — Record live, paste transcript, or import
Template — Pick from favorites (top 3-4 cards)
CTA — Select preset CTA or customize
Site — Pick which domain/subdomain to publish to
Password — Optional, enter if needed
Generate — Page 1 builds, QR appears agentically
Share — Full-screen QR for prospect to scan

Prospect scans, sees page 1 while deeper pages build in background.

Event Mode

Pre-Event Configuration

Before a networking event or conference, preset all defaults: template, CTA, domain, password. During the event, the flow is: record → name → generate. Three taps max to QR code.