# Floom Click Specification
_v9 · every interactive element defined · source of truth for implementation_

This document enumerates every clickable / interactive element in the Floom wireframe (v9.html) and defines the exact behavior expected for each one. The goal is zero uncertainty. If it's on screen and the user can click it, it is described here.

---

## Coverage summary

| Category | Count (approx) |
|---|---|
| Enumerated interactive elements | 230+ |
| Hash-routed navigation targets | 19 sections + dashboard sub-anchors |
| Intra-section state changes (tabs, filters, steps) | 70+ |
| Toast-only actions (copy, save, share, mark-resolved) | 40+ |
| Form submissions with local simulation | 8 |
| Modal / overlay interactions | 5 |
| Toggleable states (reveals, radios, sliders, dropdowns) | 45+ |

---

## Global behaviors

- **Hash routing**: every top-level navigation uses `#<section>` hashes. Listener `fromHash()` reads `location.hash` and calls `showSection(id)`. Pre-existing v8 logic is preserved. Sub-navigation uses `#<section>/<sub>` (e.g. `#dashboard/schedules`).
- **Active state**: `[data-nav-link]` elements toggle `.active` class when their href matches the current section.
- **Toasts**: `v8Toast(msg)` shows a pill toast at the bottom center for 2.2s. Every non-nav, non-form action calls `v8Toast`.
- **Keyboard**: native button / link keyboard behavior (Enter, Space). Focus-visible outline uses `outline:2px solid var(--accent)`.
- **Reduced motion**: `prefers-reduced-motion` respected for scroll-into-view (falls back to instant jump).
- **Escape / outside click**: already applied to existing mobile menus. Review / report modals close via "Cancel" buttons (navigates back to parent page).
- **External links**: `target="_blank" rel="noopener"` where they genuinely go off-site (GitHub, external booking). All others are simulated with toasts.
- **Form validation**: waitlist and auth forms validate email regex `^[^\s@]+@[^\s@]+\.[^\s@]+$`. Invalid emails show inline error styling. Valid emails persist to `localStorage.floomWaitlist` and show success state.
- **Review mode preservation**: `?review=0`, `?review=1`, `?review=all` modes from v8 are unchanged. All new wiring works in every mode.

### Routes (appendix reference)

| Hash | Section | Title |
|---|---|---|
| `#home` | Home | landing |
| `#store` | Store | app store |
| `#app` | App | product page (/p/flyfast) |
| `#dashboard` | Dashboard | creator dashboard |
| `#dashboard/<sub>` | Dashboard sub-section | scroll to anchor |
| `#build` | Build | deploy your app |
| `#run` | Run | user run page (/r/flyfast) |
| `#me` | Me | user dashboard (/me) |
| `#me/<sub>` | Me sub-section | show matching panel |
| `#pricing` | Pricing | /pricing |
| `#docs` | Docs | developer documentation |
| `#auth` | Auth | sign in / sign up |
| `#install` | Install | connect to Claude Desktop |
| `#publish` | Publish | 4-step publish flow |
| `#post-publish` | Post-publish | success state |
| `#review-modal` | Review modal | leave review |
| `#report-modal` | Report modal | report issue |
| `#feedback-inbox` | Feedback inbox | creator inbox |
| `#settings` | Settings | account settings |
| `#settings/<group>` | Settings group | show matching panel |
| `#empty-states` | Empty states | 4 variants |
| `#notes` | Notes | open questions |

---

## Section 1 · Home

### Top site nav (always visible, outside #home)

All links already wired in v8. Verified.

- **Logo**: `<a href="#home" data-nav-link data-logo-link>` → route to `#home`. Active when on home.
- **Store**: `<a href="#store" data-nav-link>` → `#store`.
- **Deploy**: `<a href="#build" data-nav-link>` → `#build`.
- **Docs**: `<a href="#docs" data-nav-link>` → `#docs`.
- **Pricing**: `<a href="#pricing" data-nav-link>` → `#pricing`.
- **Sign in** (right, desktop): `<a href="#auth">` → `#auth`.
- **Deploy an app** (accent, right, desktop): `<a href="#build">` → `#build`.
- **Hamburger** (mobile): toggles `#site-nav-mobile`.
- **Mobile menu links**: Store / Deploy / Docs / Pricing / Sign in / Deploy an app — all route to their hash targets. Clicking closes the mobile menu.

### Home > mock site nav (inside hero card)

- **Store** text link → `#store`.
- **Deploy** text link → `#build`.
- **Pricing** text link → `#pricing`.
- **Docs** text link → `#docs`.
- **Sign in** (secondary btn) → `#auth`.
- **Deploy an app** (accent btn) → `#build`.
- **Mobile hamburger**: toggles `#home-mobile-menu`. Mobile items: Store → `#store`, Deploy → `#build`, Pricing → `#pricing`, Docs → `#docs`.

### Home > hero

- **Pill "MIT licensed, self-host via npx or Docker"**: display only. No click.
- **"Deploy an app"** (btn-accent btn-lg): → `#build`.
- **"Browse the store"** (btn-primary btn-lg): → `#store`.

### Home > ASCII hero diagram

- **"Copy as ASCII"** button: toast "ASCII diagram copied" + button animates to `is-copied` state for 1.5s then reverts.

### Home > featured apps preview (4 cards)

- **FlyFast card**: click anywhere → `#app`.
- **OpenPaper card**: click → `#app`.
- **Claude Wrapped card**: click → `#app`.
- **OpenGTM card**: click → `#app`.

### Home > "Included in every Floom app" banner

- Banner is display only. Pills are non-interactive visual labels.

### Home > ASCII layers diagram

- **"Copy as ASCII"** button: toast "ASCII diagram copied" + `is-copied` state.

### Home > For vibecoders section

- **`$ npx @floom/cli deploy` cmd pill**: click anywhere on the pill or its `copy` button → toast "Copied: npx @floom/cli deploy".
- **code-soft docker-compose block**: display only (no click).
- **"Deploy your first app"** button: → `#build`.
- **Creator dashboard preview card**: display only. Pills inside (Activity, Access, Schedules, Versions, Domain, Feedback) are visual labels, no click.

### Home > For your team section

- **FlyFast card "Run" button** → `#app`.
- **OpenPaper card "Run" button** → `#app`.
- **OpenGTM card "Run" button** → `#app`.
- **"Browse the store"** btn-primary → `#store`.
- **Maria's apps preview tiles** (6 mini cards): display only. "Browse the store" link in the footer → `#store`.

### Home > Works with strip

- Tool items (Claude, ChatGPT, Notion, Google Workspace, Slack, Cursor, Zapier): display only. No click.

### Home > Split waitlist (2 cards)

- **Card 1 "I want to deploy apps"**:
  - Email input: accepts text. On submit, validates email.
  - **"Deploy an app"** btn (accent, btn-sm): on click, validates the email input next to it.
    - Invalid or empty: input gets red border, no toast.
    - Valid: input cleared, button text changes to "You're on the list ✓" for 2.5s, toast "Added to vibecoder waitlist", persists email to `localStorage.floomWaitlist.vibecoder`, then reverts button.
- **Card 2 "I want to use apps"**:
  - Same pattern. Persists to `localStorage.floomWaitlist.user`. Toast "Added to user waitlist".

### Home > Open core section

- **`$ npx floom install flyfast`** cmd pill + copy button: toast "Copied: npx floom install flyfast".
- **Checklist items** (self-host and cloud columns): display only.
- **"Want to charge users for your app?"** warm-note: display only (links inside would open Stripe docs if real).

### Home > For developers row (5 links)

- **MCP endpoint** → `#docs`.
- **Self-host docs** → `#docs`.
- **GitHub monorepo** → opens `https://github.com/floomhq/floom` in new tab (preserved as-is).
- **API spec** → `#docs`.
- **API reference** → `#docs`.

### Home > Footer

- **Store** → `#store`.
- **Deploy** → `#build`.
- **Docs** → `#docs`.
- **GitHub** → new tab `https://github.com/floomhq/floom`.
- **@floomhq** → new tab `https://x.com/floomhq`.

---

## Section 2 · Store

### Store > sub nav

- **floom wordmark**: → `#home`.
- **Search input**: typing filters visible app cards (featured + all 3 category rows). Case-insensitive match on app name. Empty query shows all.
- **Mobile search icon**: toggles visible search input (ghost).
- **"Sign in"** button → `#auth`.

### Store > category pills (10 items)

Clicking a pill activates it (emerald bg via `pill-accent`) and filters the cards below to match that category. "All" shows everything.

| Pill | data-category | Cards shown |
|---|---|---|
| All · 15 | `all` | all |
| New | `new` | Claude Wrapped, Session Recall |
| Productivity | `productivity` | Claude Wrapped, Session Recall, Bulk Run, OpenContext |
| Research | `research` | OpenPaper |
| Travel | `travel` | FlyFast |
| Finance | `finance` | (none in mock) |
| Sales & Marketing | `sales` | OpenGTM, OpenAnalytics, OpenKeyword, OpenDraft, OpenSlides |
| Developer | `developer` | Bouncer, Blast Radius, Dep Check, Hook Stats |
| Content | `content` | OpenDraft, OpenSlides |
| Personal | `personal` | (none in mock) |

Each clickable card gets a `data-category` attribute. Filtering hides non-matching cards via `display:none`.

### Store > featured row (3 cards)

- **"See all" link** in featured header: scrolls to productivity row (display only for wireframe; actually a no-op scroll). Toast "Showing all apps" optional.
- **FlyFast card "Run FlyFast"** btn-accent → `#app`.
- **OpenPaper card "Run OpenPaper"** btn-secondary → `#app`.
- **OpenGTM card "Run OpenGTM"** btn-secondary → `#app`.
- Whole card body (outside button) → `#app` if clicked.

### Store > category row 1 · Productivity (4 cards)

- **"See all" link**: display only.
- **Claude Wrapped card** → `#app`. "Open" pill also → `#app`.
- **Session Recall card** → `#app`.
- **Bulk Run card** → `#app`.
- **OpenContext card** → `#app`.

### Store > category row 2 · Sales & Marketing (4 cards)

- **OpenAnalytics**, **OpenKeyword**, **OpenDraft**, **OpenSlides** — each card and its "Open" pill → `#app`.

### Store > category row 3 · For developers (4 cards)

- **Bouncer**, **Blast Radius**, **Dep Check**, **Hook Stats** — each card and its "Open" pill → `#app`.

### Store > deploy promo

- **"Deploy an app"** btn-accent → `#build`.

---

## Section 3 · App (product page, /p/flyfast)

### App > breadcrumb

- **floom** (wordmark) → `#home`.
- **store** link → `#store`.
- **travel** link → `#store` (category filter).
- **FlyFast** text: display only (current).
- **"Open creator dashboard"** link (right) → `#dashboard`.

### App > hero

- **"Run FlyFast"** btn-accent → `#run`.
- **"Add to your tools"** btn-secondary → `#install`.
- **"Schedule"** btn-secondary: toggles `.schedule-card-expanded` class on the schedule inline card below. Initial state: collapsed. Click expands with height animation. Re-click collapses.
- **"Share"** btn-ghost: toast "Share link copied: floom.dev/p/flyfast".

### App > schedule inline card (collapsible)

- **Close X** btn-ghost (top right of card): collapses the schedule card.
- **Frequency pills** (Daily, Weekdays, Weekly, Monthly, Custom cron): click toggles selection. Only one active at a time (pill-accent). Default: Weekly.
- **Time input**: editable text input. Accepts any value.
- **Timezone select**: native select with UTC / CET / PST options.
- **"Run with input from" select**: native select.
- **"Cancel"** btn-ghost-sm: collapses card without saving.
- **"Create schedule"** btn-accent-sm: toast "Schedule created for Mon 09:00 UTC", collapses card.

### App > right side info card (aside)

- **Used by 2,418 people**: display only.
- **Works with icons** (Claude, ChatGPT, Notion tiles): display only.
- **Updated / Created by / Languages / License**: display only.
- **GitHub source link**: new tab `https://github.com/floomhq/floom`.

### App > how it works screenshots (3 cards)

- All three cards are display only.

### App > about + reviews body

- **About text + what's new list**: display only.
- **Ratings distribution**: display only.
- **3 review cards** (Sophie, Marcus, Elena): display only.

### App > install aside (6 install options)

- **"Open on floom.dev"** row "Run app" btn-accent → `#run`.
- **"Add to Claude"** row "Install" pill → `#install`.
- **"Add to ChatGPT"** row "Install" pill → `#install`.
- **"Add to Notion"** row "Install" pill → `#install`.
- **"Terminal (npx)"** row "Copy" pill: toast "Copied: npx @floom/cli install flyfast".
- **"For developers (MCP)"** row "Copy config" pill: toast "MCP config copied".

### App > report an issue / leave a review (may not be directly visible but wired)

- Any button matching "Report an issue" → `#report-modal`.
- Any button matching "Leave a review" → `#review-modal`.

---

## Section 4 · Dashboard (creator)

### Dashboard > top bar

- **floom wordmark + breadcrumb** "my apps → flyfast": `floom` → `#home`, `my apps` → `#me`, `flyfast` is current.
- **"Back to product page"** link → `#app`.
- **"running" pill**: display only.
- **"Settings"** btn-secondary → `#settings`.
- **"Share this app"** btn-accent: toast "Share link copied: floom.dev/p/flyfast".

### Dashboard > mobile tab strip (15 pills)

Each mobile pill has a `data-dash-sub="<id>"` attribute and on click:
1. Removes `.pill-accent` from all mobile pills, adds it to the clicked one.
2. Scrolls the matching dashboard section into view (smooth scroll).
3. Also updates the desktop sidebar active state.
4. Updates URL hash to `#dashboard/<id>`.

IDs map:
| Pill | data-dash-sub | Anchor in content |
|---|---|---|
| Run it | `run-it` | "Run it" section |
| Install links | `install-links` | |
| Source | `source` | (placeholder, scrolls to "Install links" since no separate Source section) |
| Activity | `activity` | |
| Usage | `usage` | |
| Reviews | `reviews` | |
| Access | `access` | "Who can use it" section |
| Rate limits | `rate-limits` | |
| Audit log | `audit-log` | |
| Secrets | `secrets` | "Secrets vault" |
| Schedules | `schedules` | |
| Webhooks | `webhooks` | |
| App memory | `app-memory` | |
| Versions | `versions` | |
| Custom domain | `custom-domain` | |
| Feedback | `feedback` | "Feedback inbox" section → also: or external → `#feedback-inbox` on click from pill (direct)? For dashboard inline feedback section, scroll within dashboard. |

Note: the dashboard has an inline Feedback inbox section. The pill scrolls there. A separate "Open feedback inbox" button elsewhere routes to `#feedback-inbox`.

### Dashboard > sidebar (15 items, desktop)

Same 15 sub-sections as mobile tab strip. Each sidebar-item has the same `data-dash-sub` attribute. Click behavior identical: scroll to anchor + active state + hash update. The "Feedback inbox" sidebar item ALSO routes to the full `#feedback-inbox` section (since v8 already wires it that way via text match).

- **Identity card** (FlyFast icon + @federico · Travel): display only.
- **15 sidebar items with sidebar-labels**: see table above.

### Dashboard > ASCII app flow panel

- **"Copy as ASCII"** button: toast "ASCII diagram copied" + is-copied state.
- **Stats row**: display only.

### Dashboard > Run it section

- **From / To / When inputs**: editable text inputs.
- **"Run"** btn-accent: toast "Running flight search..." + no route change. 1.2s "fake latency" before showing output (already rendered statically).
- Output cards (TAP, LH, FR): display only.

### Dashboard > Install links (4 cards)

Each card has a `code-soft` block with a copy icon. Click the copy icon → toast "Link copied" (or specific message like "Copied: https://floom.dev/p/flyfast").

### Dashboard > Activity

- **Search input**: typing filters visible activity rows (by caller, input text, result, duration). Simple substring match.
- **"Last 24h"** pill: toast "Filter: last 24h" (placeholder).
- **"Everyone"** pill: toast "Filter: everyone".
- **"Any result"** pill: toast "Filter: any result".
- **Table rows**: display only.

### Dashboard > Usage

- **4 stat cards**: display only.
- **Runs per day sparkline + Where it runs bars**: display only.

### Dashboard > Reviews

- **4 stat cards**: display only.
- **Each review card "Respond" pill**: toast "Reply composer opened" (placeholder — in real app would open inline reply).

### Dashboard > Who can use it

- **Visibility radios** (Public, Invite only, Team): standard radio input. Only one selectable. "Public" starts checked.
- **"Add user"** pill-accent: toast "User picker opened".
- **Allowed callers table rows**: each row's "Edit" pill → toast "Edit role for <user>".
- **Per-tool permissions table**: display only.
- **"New key"** pill-accent: toast "New API key generated: sk_live_•••" + (real: would copy new key to clipboard).
- **API key rows "Reveal" pill**: toggles between masked `sk_live_••••••••••••4f2a` and a fake full value `sk_live_a1b2c3d4e5f6g7h8i9j04f2a`. Text "Reveal" ↔ "Hide".
- **API key rows "Revoke" pill**: toast "Key revoked: <name>". Row gets opacity 0.5.

### Dashboard > Rate limits

- **3 sliders** (per-user per-hour / day / month): native HTML `input[type=range]`. On input, the mono value next to the label updates live.
- **"Emergency brake" pill**: toggles between "Off" and "On". Active "On" state uses `pill-accent`. Toast "Emergency brake engaged" / "Emergency brake released".
- **Rate limit hits stat card**: display only.

### Dashboard > Audit log

- **8 log rows**: display only.

### Dashboard > Secrets vault

- **"Add secret"** pill-accent: toast "Secret creator opened".
- **5 secret rows**:
  - **Eye icon pill**: toggles reveal/hide of the masked value.
  - **"Edit" pill**: toast "Edit secret: <key>".

### Dashboard > Schedules

- **"New schedule"** pill-accent: toast "Schedule creator opened".
- **2 schedule rows**:
  - **"Pause" pill**: toggles to "Resume" + toast "Schedule paused" / "Schedule resumed".
  - **"Edit" pill**: toast "Edit schedule".

### Dashboard > Webhooks

- **"New webhook"** pill-accent: toast "Webhook creator opened".
- **2 webhook rows**: display only (pill "Active" is just a label).
- **Recent deliveries table**: display only.

### Dashboard > App memory

- **Tab pills "runs" / "users"**: click switches active pill (pill-accent). Toast "Viewing <table>". Table content does not actually change for wireframe.
- **Rows**: display only.

### Dashboard > Versions

- **Current v0.3.2 row**: display only.
- **"Rollback" pills** on v0.3.1, v0.3.0, v0.2.4: toast "Rolled back to <version>".

### Dashboard > Custom domain

- **"Edit" pill** on primary domain row: toast "Domain editor opened".
- **DNS setup card**: display only.
- **"Add another domain"** pill-accent: toast "New domain form opened".

### Dashboard > Feedback inbox (inline)

- **4 filter pills** (All · 4 / Open · 2 / In progress · 1 / Resolved · 1): click filters visible ticket cards below. Active pill uses `pill-accent`.
- **4 ticket cards**:
  - **Textarea**: editable.
  - **"Reply"** btn-accent-sm: toast "Reply sent".
  - **"Mark resolved"** pill: toast "Ticket resolved", card's status pill changes to `pill-accent` "Resolved".

---

## Section 5 · Build (/build)

### Build > top bar

- **floom wordmark** → `#home`.
- **"Save draft"** btn-secondary: toast "Draft saved" (disabled initially, activated after generate).
- **"Publish to store"** btn-accent → `#publish` (disabled initially, activated after generate).

### Build > ramp 1 · GitHub import

- **GitHub URL input**: editable.
- **"Detect" pill**: toast "Detecting repo contents..." + after 1.2s toast "Detected 5 endpoints".
- **Detected files / Will be deployed with panels**: display only.
- **"Deploy with Floom"** btn-accent-lg → `#post-publish`.
- **"Connect your GitHub account first" link**: new tab `https://github.com/login/oauth/authorize` (simulated — not a real URL, just placeholder; treat as display only for wireframe).

### Build > ramp 2 · Describe it

- **Textarea**: editable.
- **"Generate app"** btn-secondary → `#post-publish` (wired in v8 via existing text match).

### Build > ramp 3 · Connect a tool (8 tool tiles)

- **Gmail / Stripe / Notion / Sheets / Airtable / Slack / Shopify / More tiles**: click selects tile (highlighted border), toast "Connected to <tool>" for real tools, toast "More tools coming" for More.

### Build > "Deploy from a file instead" link

- → `#docs` (placeholder docs page).

### Build > preview canvas (cafe-finder)

- **"Rename" pill**: toast "Rename form opened".
- **"Add icon" pill**: toast "Icon picker opened".
- **Input form inputs**: editable.
- **"Run"** btn-accent: toast "Running preview..." no route.
- **Output cards**: display only.
- **"Tweak the output"** btn-secondary-sm: toast "Output customizer opened".
- **"Add a field"** btn-secondary-sm: toast "Field added".

### Build > ASCII build canvas preview

- **"Copy as ASCII"** button: toast "ASCII diagram copied" + is-copied.

### Build > ready to publish card

- **"Publish to store"** btn-accent → `#publish`.

### Build > beta sticky strip

- **Email input**: editable.
- **"Join vibecoder beta"** btn-primary-sm: validates email input, same behavior as waitlist. On success: button shows "You're on the list ✓" + toast "Added to vibecoder beta".

---

## Section 6 · Run (/r/flyfast)

### Run > breadcrumb

- **floom** → `#home`.
- **store** → `#store`.
- **travel** → `#store`.
- **FlyFast** → `#app`.
- **"back to product page"** link → `#app` (already wired).

### Run > top bar

- **FlyFast app identity**: display only.
- **"Share"** btn-secondary: toast "Share link copied: floom.dev/r/flyfast".
- **"Add to my apps"** pill-accent → `#me`.
- **"Add to Claude"** link → `#install`.
- **"Add to Notion"** link → `#install`.

### Run > hero input

- **Big input**: editable text (prefilled).
- **Mic icon** btn-ghost: toast "Voice capture not available in preview" (placeholder).
- **"Run" btn-accent**: toast "Running search...". 1.2s delay. Does not route. (Results already displayed.)

### Run > example pills (3)

- Click each → sets the big input value to the pill's text. Toast "Query updated".

### Run > result action bar

- **"Save run"** btn-ghost-sm: toast "Run saved to your history".
- **"Run again"** btn-ghost-sm: toast "Re-running query".
- **"Share link"** btn-ghost-sm: toast "Share link copied".
- **"Schedule this"** btn-ghost-sm → `#me` (to /me schedules).

### Run > 3 flight result cards

- **Each "Book"** button: opens airline URL in new tab (`https://www.google.com/travel/flights` placeholder — uses `target="_blank"`). Toast "Opening booking..." as fallback.

### Run > explain panel

- **"Explain these results"** header: toggles expansion of the inline explanation paragraph. Click rotates chevron 180°.

### Run > keep going (3 tiles)

- **"See recent runs"** tile → `#me`.
- **"Run for another trip"** tile: clears input + toast "Fresh search ready".
- **"Get more travel apps"** tile → `#store`.

### Run > right rail

- **Recent runs** (3 cards): click each → fills the hero input with the text and toast "Loaded previous run".
- **Related apps** (Hotels by Night / TravelCo Transfer / SeatGuru): click each → `#app`.

---

## Section 7 · Me (/me)

### Me > top bar

- **floom wordmark** → `#home`.
- **"your apps"** breadcrumb: display only (current).
- **Search input**: typing filters visible app cards under "Your apps" grid.
- **Bell icon** btn-ghost: toast "No new notifications".
- **Avatar "MC"**: toast "Profile menu opened" (placeholder).
- **"Settings"** link → `#settings`.

### Me > left sidebar (14 items + identity)

- **Identity card MC**: display only.
- **"Switch workspace" pill**: toast "Workspace picker opened".

Sidebar items with `data-me-sub` attribute. Click: activates item + scrolls main area to the matching `#me-sub-<id>` anchor (smooth scroll), updates hash to `#me/<id>`.

| Item | data-me-sub | Scroll target |
|---|---|---|
| Your apps | `your-apps` | `#me-sub-your-apps` (Your apps section) |
| Folders | `folders` | falls back to "Your apps" (no separate section, toast "Folders view coming soon") |
| Recent runs | `recent-runs` | scrolls to Continue-where-you-left-off |
| Saved results | `saved-results` | toast "Saved results view coming soon" |
| Schedules | `schedules` | scrolls to My schedules |
| My tickets | `my-tickets` | scrolls to My tickets |
| Shared with me | `shared-with-me` | scrolls to Shared with me |
| Invitations | `invitations` | toast "Invitations view coming soon" |
| Invite teammates | `invite-teammates` | toast "Invite form opened" |
| Browse the store | `browse-store` | **routes to `#store`** |
| Connected tools | `connected-tools` | scrolls to Connected tools |
| Settings | `settings` | **routes to `#settings`** |
| Help | `help` | **routes to `#docs`** |

### Me > plan card (bottom of sidebar)

- **"Upgrade" link** → `#pricing`.

### Me > Become a vibecoder link

- → `#build`.

### Me > main content sections

- **Continue where you left off** (3 cards): each card clickable → `#run` (FlyFast, OpenPaper, Claude Wrapped all share `#run` for wireframe).
- **Your apps** (8 cards): each "Run <name>" btn → `#run`.
- **Get more** link: → `#store`.
- **My schedules** (3 cards): display only (clicking card: toast "Edit schedule").
- **"Add schedule" link**: toast "Schedule creator opened".
- **Shared with me** (3 cards): each "Open <name>" btn → `#app`.
- **Connected tools grid** (6 tools + Connect tile):
  - Each connected tool tile click: toast "<tool> settings opened".
  - **"Connect" dashed tile**: toast "Tool picker opened".
- **My tickets** (2 cards): click → `#feedback-inbox` (as viewer — simulated).
- **Suggested for you** (4 cards): each "Install" btn → `#app`.
- **Footer strip**: "Browse the store" link → `#store`. "Become a vibecoder" link → `#build`.

---

## Section 8 · Pricing (/pricing)

### Pricing > 4 tier cards

- **Self-host "Read self-host docs"** btn-secondary → `#docs`.
- **Solo "Get started"** btn-secondary → `#auth`.
- **Team "Start free trial"** btn-accent → `#auth`.
- **Enterprise "Talk to sales"** btn-primary: `mailto:sales@floom.dev` (target="_blank" or direct href).

### Pricing > feature matrix

- Entire table: display only.

### Pricing > FAQ (6 cards)

- Display only.

### Pricing > included-in-every-plan callout

- Display only.

---

## Section 9 · Docs (/docs)

### Docs > top bar

- **floom wordmark** → `#home`.
- **docs breadcrumb**: display only.
- **Search input**: typing filters visible sidebar doc items. Kbd `/` key focuses search.
- **GitHub** link btn-ghost: new tab `https://github.com/floomhq/floom`.

### Docs > left sidebar (9+ items)

Each sidebar item has `data-doc-page="<id>"`. Click activates item + scrolls main area (all docs content lives as one long page in wireframe). Also updates hash `#docs/<id>`.

| Item | data-doc-page |
|---|---|
| Quickstart | `quickstart` (active) |
| Self-host | `self-host` |
| MCP integration | `mcp` |
| HTTP API | `http-api` |
| CLI | `cli` |
| App manifest | `manifest` |
| Auth & access | `auth` |
| Activity logs | `activity` |
| Versions & rollback | `versions` |
| FAQ | `faq` |
| Changelog | `changelog` |

Clicking any non-Quickstart item shows toast "`<label>` docs coming soon" (placeholder).

### Docs > main content

- **Quickstart text and code-soft blocks**: each code-soft `Copy` pill → toast "Command copied: <text>".
- **ASCII system architecture diagram**: "Copy as ASCII" → toast + is-copied state.
- **Pro tip warm-note**: display only.

### Docs > next/prev nav

- **"Next: Self-host"** card: toast "Self-host docs coming soon" (since no separate page).

### Docs > right rail TOC

- **"Run Floom locally" / "Deploy your first app" / "Architecture" / "Next steps"**: native `href="#qs-*"` scrolls to in-page anchor. Keep v8 behavior.
- **"Edit on GitHub" link**: new tab GitHub.

---

## Section 10 · Auth (/auth)

### Auth > left form area

- **Logo (wordmark + floom)** → `#home`.

### Auth > tab toggle (Sign in / Sign up)

- **"Sign in"** pill: activates sign-in form (current default).
- **"Sign up"** pill: hides sign-in form, shows sign-up form with additional fields:
  - Name input
  - Email input
  - Password input
  - Confirm password input
  - Terms checkbox
  - "Create account" button (btn-accent) → `#me`.
- Clicking Sign in returns to the default form.

### Auth > sign-in form

- **Email input**: editable (prefilled).
- **Password input**: editable.
- **"Forgot password?"** link: toast "Password reset email sent to <email>".
- **"Sign in"** btn-accent → `#me` (already wired).
- **"GitHub" OAuth** btn-secondary → `#me`.
- **"Google" OAuth** btn-secondary → `#me`.
- **"Sign up"** text link (bottom): switches to sign-up tab.

### Auth > right feature panel

- Quote card + checklist: display only.

---

## Section 11 · Install (/install)

### Install > header

- **Close X** btn-ghost → `#app`.

### Install > 3 steps

- **Step 1 "Copy" pill**: toast "MCP config copied".
- **Step 2**: display only.
- **Step 3 example mono card**: display only.

### Install > Verify card

- **"Test connection"** btn-secondary: click → button text changes to "Testing..." with spinner (inline SVG pulse), after 1.5s changes to "Connected ✓" + toast "Connection verified". The "Connected" pill next to it already shows green.

### Install > troubleshooting link

- **"Read the troubleshooting guide"** link → `#docs`.

### Install > footer

- **"Cancel"** btn-ghost-sm → `#app`.
- **"Finish setup"** btn-accent → `#dashboard` (wired in v8).

---

## Section 12 · Publish (/build/publish)

### Publish > top bar

- **floom wordmark** → `#home`.
- **build** breadcrumb link → `#build`.
- **publish** text: current.
- **"Save & exit"** btn-ghost-sm → `#build`.

### Publish > step indicator (4 steps)

- Visual only. State is controlled by current step number (1–4). Active step uses accent colors, completed steps show check icon, future steps are muted.

### Publish > 4-step content

Publishing flow becomes a stepper. At any time only one step card is visible. v8 currently shows all 4 stacked — v9 changes this:

- Initial step: 1 (Name & URL).
- **Back button** in bottom nav: decrements step (disabled on step 1).
- **Next button** in bottom nav: increments step (becomes "Publish to store" on step 4).
- Step indicator updates: completed steps get `.step-complete`, current `.step-active`, future `.step-future`.
- URL hash reflects step: `#publish` default = step 1, or can specify `#publish/2` etc.
- Bottom text "Step N of 4" updates.

- **Step 1 Name & URL**: 4 editable inputs. Category dropdown (native `<select>` with Travel, Productivity, Research, etc.). Next → step 2.
- **Step 2 Icon & screenshots**: "Replace" btn → toast "File picker opened". "Add" screenshot dashed card → toast "Screenshot uploaded" + replaces dashed tile with a filled one. Back → step 1. Next → step 3.
- **Step 3 Visibility**: 3 radio cards (Public / Unlisted / Private). Click toggles selection. Back → step 2. Next → step 4.
- **Step 4 Review & publish**: summary. "Publish to store" btn-accent → `#post-publish`.

### Publish > bottom nav

- **"Back"** btn-secondary: decrement step.
- **Step N of 4** text.
- **"Next"** btn-primary: increment step. On step 4: text becomes "Publish" and routes to `#post-publish`.

---

## Section 13 · Post-publish

### Post-publish > success card

- **Party icon**: display only.
- **Share link code-soft "Copy link" pill**: toast "Share link copied: floom.dev/p/my-flights".
- **"Open creator dashboard"** btn-accent → `#dashboard`.
- **"Back to the store"** btn-secondary → `#store`.

### Post-publish > what's next checklist (4 items)

- All 4 items are display only.

---

## Section 14 · Review modal

### Review modal > header

- **Close X** btn-ghost → `#app`.

### Review modal > star picker

- 5 stars. Click selects rating (1–5). Hovering previews by filling stars up to that index. Default: 3.
- Below rating: text "N out of 5 stars" updates live.

### Review modal > textarea

- Editable. Placeholder visible when empty.

### Review modal > quick tag pills (3)

- **"Fast"**, **"Accurate results"**, **"Easy to use"**: click toggles selected state (multi-select). Default: Fast + Accurate results selected.

### Review modal > footer

- **"Cancel"** btn-ghost-sm → `#app`.
- **"Submit review"** btn-accent: toast "Review submitted: N stars" + → `#app`.

---

## Section 15 · Report modal

### Report modal > header

- **Close X** btn-ghost → `#app`.

### Report modal > category dropdown

- Click opens native dropdown (wireframe: toast "Category picker opened"). Shows current category ("Bug") — clicking a pill below swaps it.

### Report modal > category alt pills

- "Missing feature" / "Slow / timeout" / "Wrong result" / "Other": click sets the dropdown value to that pill's label.

### Report modal > "What happened" textarea

- Editable.

### Report modal > input code-soft

- Display only (prefilled example).

### Report modal > screenshot upload zone

- Click: toast "File picker opened". Dashed card gets `.is-uploaded` class + shows fake filename "screenshot.png".

### Report modal > urgency radios (4 pills)

- "Low" / "Medium" / "High" / "Blocking my work": click selects. Only one at a time (pill-accent).

### Report modal > footer

- **"Cancel"** btn-ghost-sm → `#app`.
- **"Submit"** btn-accent-sm: toast "Report submitted" + → `#run`.

---

## Section 16 · Feedback inbox

### Feedback inbox > top bar

- **floom** / **flyfast** breadcrumbs → `#home` / `#dashboard`.
- **Stat counters** (4 open / 1 in progress / 12 resolved): display only.
- **"Export"** btn-secondary-sm: toast "Tickets exported as CSV".

### Feedback inbox > filter bar

- **"All 17"** pill pill-solid (active).
- **"Open 4"** pill: filter visible ticket rows to Open status.
- **"In progress 1"** pill: filter to In progress.
- **"Resolved 12"** pill: filter to Resolved.
- **Search input**: filters ticket rows by user name / keyword match.
- **"Sort: Newest"** pill: toggles sort. Click cycles through Newest → Oldest → Urgent → Status → Newest. Text updates on each click.

### Feedback inbox > left ticket list (8 tickets)

Each ticket row click:
1. Removes `.active-ticket` from all rows, adds to clicked one (background: `accent-bg`).
2. Updates the right detail panel with that ticket's content. For wireframe: only ticket #1 has detail content; others show "Loading ticket..." or a placeholder. To keep wiring simple, clicking any other ticket just highlights it and toasts "Loading ticket: <title>".

### Feedback inbox > right detail panel

- **"Tag"** btn-ghost-sm: toast "Tag picker opened".
- **"Mark resolved"** btn-secondary-sm: toast "Ticket resolved" + ticket pill changes to `pill-accent` "Resolved".
- **Original report card**: display only.
- **Federico's response card**: display only.
- **Response textarea**: editable.
- **File-code / Link btn-ghost-sm**: toast "Attach file" / "Insert link".
- **"Close ticket"** btn-ghost-sm: toast "Ticket closed".
- **"Respond"** btn-accent-sm: toast "Response sent".

---

## Section 17 · Settings

### Settings > top bar

- **floom** breadcrumb → `#home`.
- **Settings** text: current.
- **Avatar "FD" + "Federico" text**: display only.

### Settings > sidebar (7 groups)

Each sidebar item has `data-settings-group="<id>"`. Click: shows corresponding panel in main area, hides others. Updates hash `#settings/<id>`.

| Item | data-settings-group | Main panel |
|---|---|---|
| Account (active) | `account` | Account form panel |
| Notifications | `notifications` | Notifications panel |
| Security | `security` | Security panel |
| Team | `team` | Team panel |
| Billing | `billing` | Billing panel |
| Connected tools | `connected-tools` | Connected tools panel |
| Danger zone | `danger` | Danger zone panel |

In v8, all 7 panels are stacked in main content. In v9, each has a wrapper class. By default, all panels are visible (scrollable). Clicking a sidebar item scrolls to that panel AND highlights the sidebar item. (Alternative show-only-one mode optional, but scroll-to is simpler and preserves content.)

### Settings > Account panel

- **Avatar "FD"**: display only.
- **"Upload new"** btn-secondary-sm: toast "File picker opened".
- **Full name / Email inputs**: editable.
- **Timezone / Language dropdowns**: click → toast "Timezone picker opened" / "Language picker opened".
- **"Cancel"** btn-ghost-sm: resets form (wireframe: toast "Changes discarded").
- **"Save changes"** btn-accent-sm: toast "Account updated".

### Settings > Notifications panel (3 toggles)

- Each toggle (New tickets / Weekly digest / Important updates): click toggles on/off. Toggle pill slides. Toast "Notification preference saved".

### Settings > Team panel

- **"Invite teammate"** btn-accent-sm: toast "Invite form opened".
- **3 member rows**: "…" btn-ghost → toast "Member actions menu".

### Settings > Security panel

- **Two-factor auth card**: display only (shown "On").
- **"Sign out everywhere"** btn-secondary-sm: toast "Signed out of all sessions".
- **Active session rows**: display only.

### Settings > Billing panel

- **"Manage"** btn-ghost-sm: toast "Billing portal opening".
- **"Upgrade to Enterprise"** btn-accent-sm → `#pricing`.
- **Invoice rows "Download PDF" links**: toast "Invoice PDF downloaded".

### Settings > Connected tools panel

- **3 tool cards "Revoke" btn-ghost-sm**: toast "Revoked: <tool>".

### Settings > Danger zone panel

- **"Delete account"** btn-secondary-sm (red): toast "Are you sure? Click again to confirm." On second click within 5 seconds: toast "Account deletion scheduled". For wireframe, it's a single-click toast only.

### Settings > "Back" link

- Already wired in v8 to `#me`.

---

## Section 18 · Empty states

### Empty states > 4 cards

1. **"Welcome to Floom" / "Browse the store"** btn-accent → `#store`.
2. **"No runs yet" / "Copy install link"** btn-secondary: toast "Install link copied".
3. **"Ship your first app"**: "Deploy an app" btn-accent → `#build`. "Open the builder" btn-secondary → `#build`.
4. **"No feedback yet" / "Share your app link"** btn-secondary: toast "Share link copied".

---

## Section 19 · Notes / open questions

- **Q1–Q12 cards**: display only.
- **ASCII copy-pattern section**: 2 demo buttons (idle / copied states) – display only for state 1, state 2 is also display.
- **Reload note at bottom**: display only.

---

## Appendix A · Routes

```
#home, #store, #app, #dashboard, #build, #run, #me,
#pricing, #docs, #auth, #install, #publish, #post-publish,
#review-modal, #report-modal, #feedback-inbox, #settings,
#empty-states, #notes

Sub-routes:
  #dashboard/{run-it, install-links, source, activity, usage, reviews,
              access, rate-limits, audit-log, secrets, schedules,
              webhooks, app-memory, versions, custom-domain, feedback}
  #me/{your-apps, folders, recent-runs, saved-results, schedules,
       my-tickets, shared-with-me, invitations, invite-teammates,
       browse-store, connected-tools, settings, help}
  #docs/{quickstart, self-host, mcp, http-api, cli, manifest, auth,
         activity, versions, faq, changelog}
  #settings/{account, notifications, security, team, billing,
             connected-tools, danger}
  #publish/{1,2,3,4}
```

---

## Appendix B · Toast messages

| Trigger | Message |
|---|---|
| ASCII copy btn (any of 6 diagrams) | `ASCII diagram copied` |
| Terminal install cmd | `Copied: npx @floom/cli install flyfast` |
| Deploy cmd on home | `Copied: npx @floom/cli deploy` |
| Self-host cmd on home | `Copied: npx floom install flyfast` |
| App page "Share" | `Share link copied: floom.dev/p/flyfast` |
| App install aside "Copy" (npx) | `Copied: npx @floom/cli install flyfast` |
| App install aside "Copy config" | `MCP config copied` |
| App schedule "Create schedule" | `Schedule created for Mon 09:00 UTC` |
| Dashboard "Share this app" | `Share link copied: floom.dev/p/flyfast` |
| Dashboard install links copy | `Link copied` |
| Dashboard activity filter pills | `Filter: <label>` |
| Dashboard "Add user" | `User picker opened` |
| Dashboard "New key" | `New API key generated` |
| Dashboard API reveal | (toggles text) |
| Dashboard API revoke | `Key revoked: <name>` |
| Dashboard "Add secret" | `Secret creator opened` |
| Dashboard secret edit | `Edit secret: <key>` |
| Dashboard "New schedule" | `Schedule creator opened` |
| Dashboard schedule pause | `Schedule paused` / `Schedule resumed` |
| Dashboard "New webhook" | `Webhook creator opened` |
| Dashboard "Add another domain" | `New domain form opened` |
| Dashboard feedback "Reply" | `Reply sent` |
| Dashboard feedback "Mark resolved" | `Ticket resolved` |
| Dashboard rollback | `Rolled back to <version>` |
| Dashboard reviews "Respond" | `Reply composer opened` |
| Dashboard run button | `Running flight search...` |
| Dashboard rate limit emergency brake | `Emergency brake engaged` / `released` |
| Build ramp "Detect" | `Detecting repo contents...` then `Detected 5 endpoints` |
| Build tool tile click | `Connected to <tool>` |
| Build preview "Run" | `Running preview...` |
| Build preview "Tweak output" | `Output customizer opened` |
| Build preview "Add a field" | `Field added` |
| Build "Join vibecoder beta" (waitlist form) | `Added to vibecoder beta` |
| Run "Save run" | `Run saved to your history` |
| Run "Run again" | `Re-running query` |
| Run "Share link" | `Share link copied` |
| Run mic | `Voice capture not available in preview` |
| Run example pill | `Query updated` |
| Run recent runs card click | `Loaded previous run` |
| Run "Run" button | `Running search...` |
| Run "Run for another trip" | `Fresh search ready` |
| /me bell | `No new notifications` |
| /me avatar | `Profile menu opened` |
| /me "Switch workspace" | `Workspace picker opened` |
| /me schedule card click | `Edit schedule` |
| /me "Add schedule" | `Schedule creator opened` |
| /me connected tool click | `<tool> settings opened` |
| /me "Connect" tile | `Tool picker opened` |
| Docs code-soft copy | `Command copied: <text>` |
| Docs sidebar placeholder click | `<label> docs coming soon` |
| Docs next card | `Self-host docs coming soon` |
| Auth "Forgot password" | `Password reset email sent` |
| Install "Test connection" | `Connection verified` (after spinner) |
| Install step 1 copy | `MCP config copied` |
| Publish "Save draft" | `Draft saved` |
| Publish step 2 "Replace" | `File picker opened` |
| Publish step 2 "Add" screenshot | `Screenshot uploaded` |
| Post-publish "Copy link" | `Share link copied: floom.dev/p/my-flights` |
| Review modal submit | `Review submitted: N stars` |
| Report modal submit | `Report submitted` |
| Report modal screenshot zone | `File picker opened` |
| Feedback inbox "Export" | `Tickets exported as CSV` |
| Feedback inbox ticket click (non-default) | `Loading ticket: <title>` |
| Feedback inbox "Tag" | `Tag picker opened` |
| Feedback inbox "Mark resolved" | `Ticket resolved` |
| Feedback inbox "Close ticket" | `Ticket closed` |
| Feedback inbox "Respond" | `Response sent` |
| Settings "Upload new" avatar | `File picker opened` |
| Settings dropdown clicks | `<label> picker opened` |
| Settings "Cancel" | `Changes discarded` |
| Settings "Save changes" | `Account updated` |
| Settings notifications toggle | `Notification preference saved` |
| Settings team member "…" | `Member actions menu` |
| Settings team "Invite teammate" | `Invite form opened` |
| Settings security "Sign out everywhere" | `Signed out of all sessions` |
| Settings billing "Manage" | `Billing portal opening` |
| Settings billing invoice "Download PDF" | `Invoice PDF downloaded` |
| Settings connected tools "Revoke" | `Revoked: <tool>` |
| Settings danger "Delete account" | `Account deletion scheduled` |
| Home waitlist forms (2) | `Added to <vibecoder|user> waitlist` |
| Empty states install link | `Install link copied` |
| Empty states share app link | `Share link copied` |

---

## Appendix C · Form submissions

| Form | Validation | On success |
|---|---|---|
| Home waitlist · deploy | Email regex | Persist `localStorage.floomWaitlist.vibecoder`, success state, toast |
| Home waitlist · use | Email regex | Persist `localStorage.floomWaitlist.user`, success state, toast |
| Build beta strip | Email regex | Persist `localStorage.floomWaitlist.builderBeta`, toast |
| Auth sign-in | Required fields | Route `#me` |
| Auth sign-up | Required + password match | Route `#me` |
| Publish step flow | Required name/slug on step 1 | Advance to next step |
| Review modal | Rating >=1 star | Toast + route `#app` |
| Report modal | Textarea required | Toast + route `#run` |

---

## Appendix D · Keyboard

- `/` on `#docs` focuses the docs search input (kbd hint shown).
- `Escape` closes any open mobile menu.
- Native `Enter`/`Space` activates all buttons / links.
- Tab order follows DOM order.

---

## Implementation layer (v9.html modules)

The v9 script extends the v8 init function with these NEW modules. Each is self-contained and idempotent:

1. `initDashboardSidebar()` — wires 15 desktop items + 15 mobile pills with `data-dash-sub` → scroll + active state.
2. `initMeSidebar()` — wires 13 items with `data-me-sub` → scroll / route / toast.
3. `initDocsSidebar()` — wires 11 items with `data-doc-page` → toast "coming soon" for non-quickstart.
4. `initSettingsSidebar()` — wires 7 items with `data-settings-group` → scroll + active.
5. `initStoreFilters()` — wires 10 category pills + search input to filter cards by `data-category`.
6. `initFeedbackFilters()` — wires 4 filter pills + search + sort.
7. `initFeedbackTickets()` — ticket row click → highlight + toast.
8. `initPublishFlow()` — step state (1–4), Back/Next/Publish advance, step-indicator update.
9. `initAuthTabs()` — Sign in / Sign up toggle, dynamically swaps form content.
10. `initInstallFlow()` — test connection → spinner → connected.
11. `initScheduleCard()` — expand/collapse on /p/flyfast Schedule button.
12. `initReviewModal()` — star picker (1–5) with hover preview + tag toggles.
13. `initReportModal()` — category alt pill → dropdown update, urgency radio selection, screenshot upload placeholder.
14. `initRateLimitSliders()` — bind 3 range inputs → live value display.
15. `initRevealButtons()` — all "Reveal" pills (API keys, secrets) → toggle masked/shown.
16. `initCopyButtons()` — scan for any `[data-copy]` or well-known copy targets → toast.
17. `initWaitlistForms()` — home + build beta forms → validate, persist, success state.
18. `initAuthForms()` — sign-in form → route to `#me`.
19. `initAsciiCopy()` — every ASCII copy button → copy the pre block text + is-copied animation.
20. `initPillToggles()` — generic handler for any pill that should toggle active state in a group.
21. `initRunPage()` — example pills, recent runs, run button.
22. `initExplainToggle()` — explain panel expand/collapse.

The `init()` function in v9 calls all these in sequence AFTER v8's `wireAll()` so v8's existing wiring is preserved.