// screens.jsx — PromptLab mobile screens (platform-neutral, fits inside iOS/Android frames) // Exposes a single Screen component that switches on `route`. The frames provide their own // chrome (status bar, home indicator, nav bar) — these screens render the *content* only, // scaled to fit 402×~795 (iOS interior) or 412×~810 (Android interior). // // Routes: // library — list of saved prompts with tabs/search // library-detail — expanded prompt entry // composer — write/edit + enhance bar // streaming — provider response streaming in // voice — full-screen mic capture with waveform // pad-list — notebook pad index // pad-detail — single pad with markdown body const { useState, useEffect, useRef } = React; // ── shared bits ────────────────────────────────────────────────────────── function PLTopBar({ theme, title, leading, trailing, subtitle }) { return (
{leading}
{title &&
{title}
} {subtitle &&
{subtitle}
}
{trailing}
); } function PLTabBar({ theme, current, onChange }) { const items = [ { id: 'library', label: 'Library', icon: PL_ICONS.library }, { id: 'composer', label: 'Compose', icon: PL_ICONS.wand }, { id: 'pad-list', label: 'Pad', icon: PL_ICONS.pad }, ]; return (
{items.map(it => { const active = current === it.id || (it.id === 'pad-list' && current === 'pad-detail') || (it.id === 'library' && current === 'library-detail'); return ( ); })}
); } function PLChip({ theme, active, children, onClick }) { return ( ); } function PLCard({ theme, children, onClick, style = {} }) { return ( ); } // ── Library list ───────────────────────────────────────────────────────── const SAMPLE_PROMPTS = [ { id: 'p1', title: 'Code review · senior reviewer', collection: 'Engineering', tags: ['review', 'code'], use: 47, vars: 2, draft: false, snippet: 'Act as a senior engineer. Review the following code for correctness, clarity, and maintainability…' }, { id: 'p2', title: 'Weekly digest summarizer', collection: 'Writing', tags: ['summary', 'weekly'], use: 23, vars: 1, draft: false, snippet: 'Summarize the following content into a punchy weekly digest with three sections…' }, { id: 'p3', title: 'Bug repro extractor', collection: 'Engineering', tags: ['bug', 'qa'], use: 12, vars: 0, draft: false, snippet: 'Given a bug report, extract minimal reproduction steps, expected vs actual…' }, { id: 'p4', title: 'Cold-email opener (B2B)', collection: 'Sales', tags: ['email'], use: 8, vars: 3, draft: true, snippet: '' }, { id: 'p5', title: 'Naming brainstorm', collection: 'Product', tags: ['naming'], use: 31, vars: 1, draft: false, snippet: 'Generate 12 candidate names for a new product. Each should be one or two words…' }, { id: 'p6', title: 'Changelog → release notes', collection: 'Engineering', tags: ['notes'], use: 19, vars: 0, draft: false, snippet: 'Convert this technical changelog into customer-facing release notes…' }, ]; function LibraryScreen({ theme, nav }) { const [coll, setColl] = useState('All'); const collections = ['All', 'Engineering', 'Writing', 'Sales', 'Product']; const filtered = coll === 'All' ? SAMPLE_PROMPTS : SAMPLE_PROMPTS.filter(p => p.collection === coll); return (
{PL_ICONS.sparkle(18)}
} trailing={} />
{PL_ICONS.search(15)} Search prompts, tags…
{collections.map(c => ( setColl(c)}>{c} ))}
{filtered.map(p => ( nav('library-detail', p.id)}>
{p.title} {p.draft && draft}
{p.snippet || No content yet — tap to edit.}
{PL_ICONS.library(11)}{p.collection} {p.use > 0 && {p.use}×} {p.vars > 0 && {`{{${p.vars}}}`}}
))}
nav(id)} /> ); } // ── Library detail ─────────────────────────────────────────────────────── function LibraryDetailScreen({ theme, nav, promptId }) { const p = SAMPLE_PROMPTS.find(x => x.id === promptId) || SAMPLE_PROMPTS[0]; return (
nav('library')} style={{ background: 'none', border: 'none', color: theme.accent.solid, cursor: 'pointer', padding: 6 }}>{PL_ICONS.back(20)}} trailing={} />
{p.title}
{PL_ICONS.library(11)}{p.collection} · {p.use}× used · 3 versions
{p.tags.map(t => ( #{t} ))}
Enhanced
{p.snippet} The reviewer should enumerate concrete suggestions with file:line references where possible, and flag anything that is unclear rather than guessing.
Original
review this code
); } // ── Composer ───────────────────────────────────────────────────────────── function ComposerScreen({ theme, nav, promptId }) { const p = promptId ? SAMPLE_PROMPTS.find(x => x.id === promptId) : null; const initial = p?.snippet || ''; const [text, setText] = useState(initial); const [showProvider, setShowProvider] = useState(false); const [provider, setProvider] = useState('Claude Sonnet 4'); return (
nav('library-detail', promptId)} style={{ background: 'none', border: 'none', color: theme.accent.solid, cursor: 'pointer', padding: 6 }}>{PL_ICONS.back(20)}} trailing={} />
{showProvider && (
{['Claude Sonnet 4', 'Claude Haiku 4.5', 'GPT-4 Turbo', 'Gemini 1.5 Pro', 'Llama 3 (Ollama)'].map((m, i) => ( ))}
)}
{text ? (
{text}
) : (
Write your prompt. Use {'{{variables}}'} for placeholders. Tap the wand to enhance.
)}
); } // ── Streaming ──────────────────────────────────────────────────────────── const STREAM_TEXT = `I'll review this code carefully. **Correctness** The early-return on \`!user\` is good, but \`fetchProfile\` can throw — wrap it in try/catch or the caller crashes silently. **Clarity** \`handleStuff\` is doing three things: parsing, validating, and persisting. Splitting it would make the data flow easier to follow and the unit tests less brittle. **Maintainability** The magic number \`30000\` should be a named constant — \`POLL_INTERVAL_MS\` — and probably configurable.`; function StreamingScreen({ theme, nav }) { const [shown, setShown] = useState(0); const [done, setDone] = useState(false); useEffect(() => { if (shown >= STREAM_TEXT.length) { setDone(true); return; } const t = setTimeout(() => setShown(s => Math.min(s + 4, STREAM_TEXT.length)), 28); return () => clearTimeout(t); }, [shown]); const visible = STREAM_TEXT.slice(0, shown); return (
nav('composer')} style={{ background: 'none', border: 'none', color: theme.accent.solid, cursor: 'pointer', padding: 6 }}>{PL_ICONS.back(20)}} trailing={!done &&
} />
Prompt
Act as a senior engineer. Review the following code…
{visible.split(/(\*\*[^*]+\*\*)/g).map((seg, i) => seg.startsWith('**') ? {seg.slice(2, -2)} : {seg} )} {!done && }
); } // ── Voice capture ──────────────────────────────────────────────────────── function VoiceScreen({ theme, nav }) { const [t, setT] = useState(0); useEffect(() => { const i = setInterval(() => setT(x => x + 1), 80); return () => clearInterval(i); }, []); const bars = Array.from({ length: 32 }, (_, i) => { const phase = (t * 0.18 + i * 0.4) % (Math.PI * 2); const h = 6 + Math.abs(Math.sin(phase)) * 38 + Math.sin(t * 0.07 + i) * 6; return Math.max(4, h); }); return (
nav('composer')} style={{ background: 'none', border: 'none', color: theme.textSub, cursor: 'pointer', padding: 6 }}>{PL_ICONS.close(20)}} />
“Review the following Python function for correctness…”
{bars.map((h, i) => (
))}
); } // ── Pad list ───────────────────────────────────────────────────────────── const SAMPLE_PADS = [ { id: 'd1', title: 'Onboarding research', body: 'Notes from week 3 user interviews. Three threads worth pulling on…', updated: 'Today', words: 412 }, { id: 'd2', title: 'Q2 planning scratchpad', body: 'Revisit pricing model. Talk to legal about T&Cs. Map out…', updated: 'Yesterday', words: 1280 }, { id: 'd3', title: 'Reading list', body: 'Designing Data-Intensive Apps · Working in Public · The Manager\'s Path…', updated: 'Mon', words: 88 }, { id: 'd4', title: 'Talk outline · "Prompts as Code"', body: 'Open with the version-control story. Three case studies…', updated: 'Apr 17', words: 945 }, ]; function PadListScreen({ theme, nav }) { return (
{PL_ICONS.pad(18)}
} trailing={} />
{SAMPLE_PADS.map(d => ( nav('pad-detail', d.id)}>
{d.title}
{d.body}
{d.updated} · {d.words} words
))}
nav(id)} />
); } // ── Pad detail ─────────────────────────────────────────────────────────── function PadDetailScreen({ theme, nav, padId }) { const d = SAMPLE_PADS.find(x => x.id === padId) || SAMPLE_PADS[0]; return (
nav('pad-list')} style={{ background: 'none', border: 'none', color: theme.accent.solid, cursor: 'pointer', padding: 6 }}>{PL_ICONS.back(20)}} trailing={} />
{d.title}

{d.body}

The clearest pattern across the conversations was a desire for auditable prompt history — not just versioning, but the ability to rewind to a specific moment and see what changed.

Three follow-ups worth scheduling:

  • How does side-by-side diff feel on a phone-sized canvas?
  • Voice capture for free-form notes — tested, worth a closer look.
  • Sharing is mostly internal. URL-only is fine for now.

—

Pull this into a Composer prompt next week and run an A/B against the existing "research synthesis" template.

); } // ── Screen switcher ────────────────────────────────────────────────────── function PLScreen({ route, params, nav, theme }) { switch (route) { case 'library': return ; case 'library-detail': return ; case 'composer': return ; case 'streaming': return ; case 'voice': return ; case 'pad-list': return ; case 'pad-detail': return ; default: return ; } } Object.assign(window, { PLScreen, PLTabBar, PLTopBar, PLChip, PLCard, SAMPLE_PROMPTS, SAMPLE_PADS });