A UI mockup of a Val Town-native mobile AI chat — what a first-party "Townie in your pocket" app could feel like. Not wired to a real model: responses are canned, Val Town-flavored, and streamed token-by-token to feel alive.

Live: open the val's HTTP endpoint on your phone (or a narrow browser window). Add to Home Screen for the full standalone PWA feel.

Studies the latest ChatGPT and Claude mobile apps and remixes their best interactions into Val Town's own design language (per the valtown-ui skill: IBM Plex Sans, slate + sky, true-black text, 8px radius, iA Writer Quattro eyebrows).

• 💬 Fake streaming chat — typing dots → token stream → blinking caret, with effort-dependent "thinking" time. Markdown rendering with copyable code blocks. Stop, retry, copy, thumbs.
• 🗂️ Push-style sidebar drawer — edge-swipe to open, pinned + recents (persisted to localStorage), New chat FAB, avatar.
• 🧠 Model bottom sheet — drag-to-dismiss, Townie 2 / Townie / Townie Mini, plus an Effort sub-view (High / Medium / Instant) that actually changes streaming speed.
• ➕ Attach popover — Camera / Photos / Files / Connectors with blur backdrop.
• 🎙️ Voice mode chip — animated waveform (mock).
• 👻 Incognito mode — chats created while on are never persisted.
• 📲 PWA-level native feel — manifest + service worker (network-first shell cache), safe-area insets, 100dvh, no tap highlights, overscroll containment, haptics via navigator.vibrate, reduced-motion support.

Rendering mermaid diagram...

• Styling: Twind (Tailwind runtime) + a small style.css for fonts, keyframes, and safe areas.
• Types shared in shared/types.ts.
• No backend state — everything is client-side; the val only serves files.

frontend/lib/fakeAI.ts exposes pickResponse() + streamResponse(). Replace those two with a fetch to a streaming endpoint and the whole UI comes alive unchanged.

Mockup by Charlie (dcm31) · view source