floom · wireframes v15.3
18 pages · latest ← all versions

v15.2. Shared shell, GitHub-first, real access control.

Three gaps closed since v15.1: shared app-shell (left rail on /me, /me/a/:slug, /run, /creator so users don't lose context), GitHub-first deploy on /build (most ICP users have code, not cloud — OAuth → repo picker → auto-detect → auto-redeploy on push; OpenAPI URL demoted to secondary tab), and real access control (invite-only, roles, access log, workspace + paid as locked "coming soon").

17 pages. Real apps from preview.floom.dev/api/hub. Desktop 1440 + mobile 375 where relevant. First prod-customer app: ig-nano-scout (Instagram scraper, private, async, secrets-backed, deployed from GitHub).

POSITIONING LOCKED · 2026-04-17 · v2 supersedes v1 same-day ICP: AI engineers in companies

The protocol + runtime for agentic work.

Build agents, workflows, and scripts with AI. Floom deploys them as MCP, API, web, or CLI — production-grade, live in 30 seconds.

Applied to: landing.html, floomhq/floom README, CreatorHeroPage.tsx, apps/web/index.html (preview.floom.dev via PR #28).
Voice split: Floom-company = technical/credible (“protocol + runtime”). Personal-Federico = vibe-coder-adjacent (“ship AI tools”). Do not mix on the same surface.
Retired H1s: app store for agents, ship AI apps in seconds, production for anything agents build, you create, we make it live, you build, we make it an agent-native app. Full banned list in the v2 positioning memo.
Thesis: Creation is commoditized. Production is the moat. Floom is the protocol (apps.yaml + spec/protocol.md) and runtime (hosted cloud + self-host Docker) for agentic work.
v15.3 CYCLE · SCHEMA-FIRST RENDERER CONTRACT 2026-04-17 epic #37

Every input + output derived from JSON Schema.

The web app's current input/output renderers are hand-rolled stubs — date and file inputs fall through to plain text, and outputs like table / pdf / image display as JSON blobs. Meanwhile packages/renderer already has a complete output contract (10 shapes, pure discriminator, 10 components) that the web app never imports.

Single source of truth: OpenAPI JSON Schema + x-floom-* vendor extensions. No parallel type unions. pickInputShape(schema) + pickOutputShape(schema) are pure functions. Catch-all is always text / object — a spec can never refuse to render.
UX mode: new x-floom-shape: prompt | form | auto operation-level extension. prompt = textarea composer + thread history (flyfast, openpaper). form = SchemaInput directly + run-log history (html-to-pdf, resize-image). Same schema, two surfaces, one codebase.
Visual contract: schema-components.html — 14 input shapes × 3 states + 10 output shapes × 3 states + derivation table + state machine + prompt-vs-form comparison. Locks the look that #40 will implement as React components.
Rollout: #39 contract → #43 vendor ext → #44 design system (this) → #40 components → #41 + #42 wiring → #45 form-mode wireframes → #46 build preview.
THE RULES — v15.2 revision

Reduction discipline, with one exception.

  1. 01Landing, /p/:slug, /r/:id, /login, /docs, /404 = ONE input + ONE button. No rail. No tabs.
  2. 02Signed-in pages (/me, /me/a/:slug, /run, /build, /creator) use a shared app-shell: left rail + main pane. Same shape as ChatGPT/Claude. That's where users live; they need to navigate.
  3. 03Rail contains only: brand, one primary action, your apps (with live status dots), current app's threads. Nothing else.
  4. 04Dashboard cards are forbidden. Single scrolling feed inside the main pane.
  5. 05Sparklines, badges, dual-CTAs, "trusted by" rails — all forbidden.
  6. 06App lists = thin horizontal stripes. Never dense card grids.
  7. 07Three colors max on screen. Ink, muted, one accent.
  8. 08Empty state on every list. No fake data, no skeleton padding.
  9. 09Deploy starts from GitHub, not OpenAPI URL. OpenAPI URL stays as secondary tab for power users.
  10. 10If a competitor (ChatGPT/Notion/Linear) wouldn't ship it, we don't.
PALETTE — 3 colors
accent
ink
muted
+ canvas (#f5f4f0) and white. Nothing else.
TYPE — 3 sizes per page
Aa
Inter body, 15-16px.
JetBrains Mono — labels only.
REAL DATA
23 live apps from
preview.floom.dev/api/hub
flyfast, openpaper, bouncer, opendraft, openslides, openblog, base64, hash, jwt-decode, password, uuid, word-count, json-format, session-recall, claude-wrapped, hook-stats, dep-check, blast-radius, opengtm, openanalytics, opencontext, openkeyword, my-renderer-test.
17 PAGES · SHARED SHELL · GITHUB-FIRST · ACCESS CONTROL

Every flow, connected.

Each page = one HTML file. v15.2 = rebuilt this cycle. NEW = added in v15.2.

/schema-components
NEW · v15.3
Schema components — design-system page for every input + output shape
14 input shapes (text, textarea, code, url, number, enum, boolean, date, datetime, file, image, csv, multifile, json) × 3 states (empty / filled / error). 10 output shapes (text, markdown, code, table, object, image, pdf, audio, stream, error) × 3 states (loading / success / error). Derivation table maps each shape to its JSON Schema fragment. Prompt-mode vs form-mode comparison. Desktop + 375px mobile. Visual contract for issues #40, #41, #42.
NEW
/build
REBUILT · v15.2
Build — GitHub-first, OpenAPI URL + templates as fallback
Three deploy tabs: From GitHub (default — OAuth → repo picker → auto-detect Dockerfile / FastAPI / OpenAPI / env vars → hostname preview → auto-redeploy on push), From OpenAPI URL (you host it), From template (6 starters including ig-nano-scout). Live build log. App-shell left rail so you don't lose your threads mid-deploy.
REBUILT
/me/a/:slug/access
NEW · v15.2
Access control — invite-only, roles, access log
Visibility picker (Private / Unlisted / Invite-only / Public · Workspace + Paid locked as "coming soon"). Invite by email with per-user roles (Owner / Admin / Can-run / View-only). Full access log table: who ran what, from where (web / mcp / api), success/fail, duration. CSV export. Danger zone (transfer / revoke all / delete).
NEW
/me/a/:slug
REBUILT · v15.2
Private app page — shared shell + tabs (Overview / Access / Secrets / Analytics / Settings)
Left rail matches /me. Top bar shows app + visibility pill + owner. Tabs replace the old ••• drawer. Overview keeps composer + chips + threads + stats row. Right sidebar links deep into access + secrets + MCP + app details. ig-nano-scout as the example.
REBUILT
/run
REBUILT · v15.2
Run — shared shell + credentials-required state
6 explicit states (was 5): credentials-required (new — prompts user to paste API keys for apps that declare x-floom-user-secrets, composer disabled until saved), empty with chips, streaming, async with live log, error with inline retry, completed multi-turn. Same app-shell as /me.
REBUILT
/creator
REBUILT · v15.2
/creator — shared shell, creator-mode variant
Same left rail as /me, but filtered to apps you own. User/Creator switch at top of rail. Runs-today counter per app in the rail, issues section, drafts section. Feedback inbox button in top bar. Still one number per app (runs today).
REBUILT
/me/a/:slug/secrets
v15.1
Secrets vault — encrypted, masked, write-only
Table of env vars with masked values, last-used timestamps, rotate/delete. .env paste shortcut. One reassurance banner, never 10 lock icons. Deep-linked from run errors and build env step.
v15.1
/me
v15.1
/me — Your apps + threads (Claude/ChatGPT shape)
Left rail with "Your apps" + threads grouped Today/Yesterday/Earlier, right pane showing the latest thread with a composer at the bottom. The shell that v15.2 rolled out to /me/a/:slug, /run, /build, /creator.
v15.1
/
ANCHOR
Landing — one input, one button
Logo + Sign in nav. Glow watermark + tagline + paste-OpenAPI input. Three app stripes below fold. Self-host one-line. Imprint footer. That's the whole page.
done
/p/:slug
ANCHOR
Public app page — ChatGPT-style runner + 3 prompt chips
App icon + name in header, ••• drawer top-right. Big input dominates. Output flows below as a conversation block. No left rail — signed-out view.
v15.1
/apps
v15.1
Apps — the PUBLIC directory (clarified)
Public only. "Looking for your private apps? → /me". Search bar + 3 category pills + stripes.
v15.1
/install
PAPER-CUT
/install — pick one client, copy one block
Four big rows: Claude · ChatGPT · Cursor · Terminal CLI. Click one → reveals a single copy block + a single "Done" button. No matrix, no setup wizard, no per-client docs link tree.
done
/welcome
PAPER-CUT
/welcome — pick one app, run it, feel value
Three app stripes (recommended). Click one → drops you straight on /p/:slug pre-filled with a sample input + auto-runs. Creator branch only appears AFTER first successful run.
done
/r/:id
PAPER-CUT
/r/:id — public run permalink, screenshot vibe
Frozen output, "Run this yourself" CTA, creator attribution one line. OG image preview in the ••• drawer. Looks like a ChatGPT shared chat — instantly recognizable.
done
/login
PAPER-CUT
/login — Notion-clean, 400px column
Centered glow logo, one tagline, Continue with Google + email field. No right-side value pitch, no testimonials, no feature checklist. Sign-in IS the marketing.
done
/docs
PAPER-CUT
/docs — minimal, 4 sections, no sidebar tree
One left rail with 4 links (Run an app · Build an app · Install in your tool · API reference). Long-form prose right side. No mega-nav, no breadcrumbs, no version switcher.
done
/404
PAPER-CUT
/404 — glow logo, one line, one CTA back
No mascot, no error code splash, no "popular pages" list. Centered glow logo + "This page doesn't exist." + one button → /. Same restraint as /login.
done
v15.2 · RESTORED / ADDED
  • Left rail on /me/a/:slug, /run, /build, /creator (shared shell)
  • GitHub-first deploy flow on /build (OAuth → repo picker → auto-detect)
  • Auto-redeploy on push toggle (default ON)
  • Hostname auto-provisioning ({slug}.apps.floom.dev)
  • Credentials-required state on /run (for x-floom-user-secrets apps)
  • Invite-only visibility mode + per-user roles
  • Full access log table with CSV export
  • Workspace + Paid access as locked "coming soon" modes
  • User/Creator switch in rail (one click to flip modes)
REFERENCE BAR — what we copied from
  • ChatGPT — input dominates, conversation flows down, ••• menu
  • Google homepage — one search box, nothing else above fold
  • Notion signup — 400px column, one CTA, no marketing noise
  • Linear empty states — calm, one verb, no decoration
  • Apple product hero — giant glyph, terse line, real product below
  • Claude.ai shared chats — frozen permalink with "Try it" CTA
  • Vercel /docs — minimal left rail, prose right side
PRIOR VERSIONS

Where v15 came from

v14
Stripe/Linear density rewrite
11 pages, tabs on /p/:slug, /run feature-complete with logs/secrets/MCP preview. Right product shape, wrong audience — too dense for non-devs.
prior
v13
15 pages, full surface coverage
Run + install + settings + docs + 404 + onboarding all added. Where the bloat became visible — too many sections per page, too many CTAs.
prior
v12
Launch-ready 8 pages
Split /me and /creator. 4-state /build flow. Last pre-bloat version.
prior