floom · wireframes v16
20 pages · Store + Studio ← all versions

v16. Floom Store + Floom Studio. Two contexts, one identity.

v15 tried to put consumers and creators on the same shell. Result: the /me page was doing six jobs, the /p/:slug page had Edit buttons next to Run buttons, and everyone felt lost. v16 splits it: a consumer Store at the root, and a creator Studio at /studio. Same login. Different chrome. Different URLs. Obvious boundary.

20 pages. Store uses the v15.3 light surface (#FAFAF7, green accent, marketing chrome). Studio uses a tool-grade workspace (#F5F5F1, left sidebar, dense tabs, dashboard rhythm like Supabase or Linear). Real apps from preview.floom.dev/api/hub.

WHAT CHANGED FROM v15 2026-04-18

The split, in one table.

  v15 (merged) v16 (split)
URL root one root, everything mixed / Store, /studio Studio
/me runs + your-apps + install + threads runs + installs only (consumer)
/p/:slug Edit / Secrets / Delete visible to owner zero creator affordances, "Open in Studio" link only
App management /me/a/:slug + /creator + /creator/:slug (three pages) /studio/:slug (one page, tabs)
Deploy /build in Store nav /studio/build behind Studio sidebar
Surface one shell for both roles marketing-light Store, dashboard-dense Studio
STORE consumer · URL root /

Browse. Run. Share. Install.

Light surface (#FAFAF7), marketing nav, one input, one green CTA. Owner sees the same shell as everyone else on /p/:slug. No edit affordances leak through.

Pages: / · /apps · /p/:slug · /me · /r/:id · /install/:slug · /login · /onboarding · /docs · /404
STUDIO creator · URL root /studio

Publish. Manage. Observe.

Workspace surface (#F5F5F1), fixed 240px left sidebar, breadcrumb top-bar, tool-grade density. Feels like Supabase, Linear, Vercel dashboards. Back-to-Store link always available.

Pages: /studio · /studio/build · /studio/:slug (+ 4 tabs) · /studio/settings
STORE · 11 PAGES · CONSUMER SURFACE

The Store.

What anonymous visitors and running-app users see. Light chrome, marketing nav.

/
CORE
Landing — glow logo, one input, one green CTA
Keeps the v15.3 hero shape. Nav simplifies to Store · Docs · Sign in · [Deploy an app] for anon. Adds a subtle "Build on Floom → [Open Studio]" footer CTA visible only to logged-in creators with apps. No em dashes, no speculative claims.
v16
/apps
CORE
Apps directory — browse, search, featured band
Fixes the UX-audit P0: filters out stopwatch/petstore/e2e fixtures, pins 3 featured consumer apps at top (opendraft, openpaper, bouncer), category accent colors per stripe, cleaner search placeholder rotation. 22 live apps from the hub API.
v16
/p/:slug
CORE
Run page — zero creator affordances even for owner
Consumer-only surface. If you own this app, the only hint is a subtle "Open in Studio →" link top-right. No Edit, no Secrets, no Delete. Edit flow lives in /studio/:slug. Owner still sees reviews and run history as a visitor.
REWRITTEN
/me
CORE
MY RUNS + MY INSTALLS — no "Your apps" section
Scoped to consumer activity: recent runs grouped by date, installed MCP endpoints, favourites. "Your apps" moved to /studio. Empty state for creators has a primary "Open Studio →" link. Solves v15's role-mixing bloat.
REWRITTEN
/r/:id
PAPER-CUT
Shared run permalink, frozen output
ChatGPT-shared-chat feel. "Run this yourself" green CTA, creator attribution one line, OG preview in ••• drawer. Unchanged from v15.3.
v15.3
/install/:slug
PAPER-CUT
Install in Claude Desktop wizard
Four rows (Claude · ChatGPT · Cursor · Terminal). Click one → one copy block + Done button. Per UX audit (step #7): now wired as a real route, no more /install/:slug 404s.
v16
/onboarding
CORE
Welcome — split by intent (consumer vs creator)
Step 1 asks "What brings you here?" → Run apps lands in Store /apps, Build apps lands in Studio empty-state. Cross-link to the other track is always visible. Same login, different landing.
REWRITTEN
/login
PAPER-CUT
Login — adds value-prop side panel (UX-audit fix)
Notion-clean 400px column + right-side 1-line value prop ("Run, share, and install AI apps. Free to start."). Google OAuth + email. Deep-link ?next=/studio shows a creator variant ("Sign in to manage your apps").
v16
/docs
PAPER-CUT
Docs — 4-section left rail, prose right side
Run an app · Build an app · Install in Claude · API reference. Mobile fix from UX audit (the rail collapses to a drawer at 720px).
v15.3
/404
PAPER-CUT
404 — glow logo, one line, one button back
Same restraint as /login. No mascot, no popular-pages list. Unchanged from v15.3.
v15.3
STUDIO · 9 PAGES · CREATOR WORKSPACE

The Studio.

What creators see once they own an app. Workspace chrome, left sidebar, Supabase/Linear density.

/studio
NEW · v16
Studio home — your apps grid + "Getting started"
Hero: "Your apps". Grid of owned apps as cards, each showing icon, name, status pill (live / draft / paused), last-7d runs sparkline*, Open link. "+ Publish new app" primary CTA. Empty state: welcome text + "Paste OpenAPI URL →" direct to /studio/build.
NEW
/studio/build
REBUILT
Build — paste OpenAPI URL, detect, review, publish
v15.3 /build flow relocated behind Studio chrome. Sidebar always visible. Live build log. Slug collision suggests free alternative. "Preview run surface" collapsed section shows input fields + required secrets before publish. Per UX audit: no green/black button inconsistency.
NEW
/studio/:slug
NEW · v16
Per-app overview — icon, description, MCP URL, actions, danger zone
Collapses /me/a/:slug + /creator/:slug into one page. Top tabs: Overview · Runs · Secrets · Access · Renderer · Analytics. Overview shows: full https://preview.floom.dev/p/slug with copy button (audit fix), MCP install snippet for Claude Desktop, Edit manifest link, Delete (typed-slug confirmation).
NEW
/studio/:slug/runs
NEW · v16
Runs tab — paginated run log, click-through to /r/:id
Table: run-id · user · input-hash · status · duration · timestamp. Filters: status (success/failed/timeout), caller (web/MCP/API), date range. Export CSV. Clicking a row opens /r/:id in Store for the frozen view.
NEW
/studio/:slug/secrets
REBUILT
Secrets — creator override vs user vault (PR #53 UI)
Per-secret policy toggle: "I provide for all users" (stores in creator vault) vs "Each user provides their own" (stores in user vault). Masked values, rotate, last-used. .env paste shortcut. AES-256 reassurance footer. One row per env var.
NEW
/studio/:slug/access
NEW · v16
Access — visibility + per-user roles + access log
Visibility picker (Private / Unlisted / Invite-only / Public). Invite by email with roles (Owner / Admin / Can-run / View-only). Access log: who ran what, from where, duration. CSV export. Workspace + Paid modes shown as locked "coming soon".
NEW
/studio/:slug/renderer
NEW · v16
Custom renderer — TSX upload with sandbox preview
Upload a .tsx file → server esbuild-compiles to an iframe-sandboxed bundle (PR #10 + #22). Shows the 3-layer cascade (custom → library → auto) from PR #66 as an explainer. Left: code editor. Right: sandbox preview with sample output.
NEW
/studio/:slug/analytics
STUB
Analytics — locked "coming v1.1" with mockup
Page exists so the tab is never dead. Shows a greyed mockup of the shipped version: runs-over-time line chart, top callers, error rate, p50/p95 latency. Full-surface "Request early access" link.
STUB
/studio/settings
NEW · v16
Creator settings — profile, API keys, billing placeholder
Display name, handle, avatar. API keys for MCP admin (ingest_app, list_apps). Billing section shows free tier + locked "Cloud Pro" card. Danger zone: transfer all apps / delete creator account.
NEW
THE RULES — v16 revision

Two surfaces, one identity.

  1. 01Anonymous visitor = Store only. /studio/* routes redirect to /login?next=/studio.
  2. 02Logged-in, no apps = Store by default. Avatar menu has "Open Studio →" as an escape hatch.
  3. 03Logged-in, with published apps = TopBar shows both contexts: Store · Studio · Me · •••.
  4. 04Store surfaces never leak creator affordances. Even the app owner sees /p/:slug as a visitor would.
  5. 05Studio surfaces never leak marketing chrome. No "Deploy an app" CTA in Studio, no "Ship yours" pills.
  6. 06Store = #FAFAF7, green accent, serif hero, light nav. Studio = #F5F5F1, 240px sidebar, breadcrumb top-bar, dense tabs.
  7. 07Mobile Store = v15.3 shape. Mobile Studio = sidebar becomes hamburger drawer, same content.
  8. 08Empty state on every list. No fake data. Illustrative metrics carry a footer asterisk.
  9. 09"Back to Store ←" link is always present in Studio sidebar footer.
  10. 10No em dashes. No AI-slop phrasing. Real app data via the hub API.
KNOWN GAPS · v16 DOES NOT COVER
PRIOR VERSIONS

Where v16 came from

v15.3
Shared shell, GitHub-first, schema components
18 pages. Right shape for power users but /me page was doing six jobs. v16 split fixes the role-mix problem.
prior
v14
Stripe/Linear density rewrite
11 pages. Too dense for consumers, too generic for creators. v16 Studio borrows this density for creators only.
prior
v13
15 pages, full surface coverage
Where the bloat became visible. Too many sections per page, too many CTAs.
prior