Start here.
This site is the single source of truth for building the Vadera Ops app. The live interactive prototype is the spec — every behavior you need to replicate is clickable there. This page tells you what is locked, what is preview-only, and where each system's rules live.
The prototype: Open the current build (v12 — machine-tested: iPad 53/53, iPhone 57/57) — iPad split-view, all 28+ screens, Quick Actions bar, onboarding, tours. What it does is what you build. What it fakes is listed in the Build map.
Locked decisions — do not reopen
The phone rule (iPhone / Android)
The iPad prototype is the behavior spec for every screen. On phones, the layout law is: same content, one screen at a time, push navigation — no sidebar ever exists (the menu is a screen you visit), every page is a full-screen push with a back header, overlays own the whole display, and the Quick Actions bar compresses (you + one teammate + the +N chip + chat + AI + bell) and still hides on Chat, AI, and auth. Flutter's responsive layout handles the reflow; do not hand-build two layouts. A small iPhone prototype exists showing the grammar (Home root, ☰ → Menu screen, pushed detail, Chat, onboarding sheet): open it. Everything it doesn't show behaves exactly as the iPad build does.
Pulse client — locked behaviors
Multi-profile is Founding-only. The account switcher (avatar pill + profile sheet) renders ONLY when the user's plan is Founding AND they have 2+ profiles. Founding with one profile: no pill; the Profiles row reads "Add a profile · up to 3 with Founding." Free/Pro: no pill regardless of profile count; the Profiles row becomes an upsell ("Multiple profiles · a Founding feature — up to 3") and routes to Subscription. Cap: 3 profiles. In production the plan comes from billing state and the profile list from the server — never trust client state for the gate. Prototype reference: PLAN, pillCheck(), profRow() in vadera-pulse-app.html.
Pulse client — streak flame ladder (locked)
The flame changes color every 10 days — earned, never bought. Ember 1–9 (#fb923c) · Gold 10–19 (#f4c97a) · Rose 20–29 (#e879c2) · Violet 30–39 (#c084fc) · Blue flame 40–49 (#60a5fa) · Emerald 50–59 (#34d399) · White-hot 60–69 (#f5f2fb) · Pulse flame 70–99 (brand gradient, animated) · Diamond 100+ (color-shifting, ultra rare). Flame is an SVG (emoji can't recolor) with a matching glow. The streak progress bar fills toward the NEXT tier in the current tier's color, with a one-line teaser ("Rose in 1 day"). Goals strip is number → label → bar only — no status sentences. Prototype reference: FLAME_TIERS, flameTier(), flameSVG(), stkInit().
Deferred to a later version
Mail is out of v1. The email client (folders, Cc/Bcc, reply-all, archive, IMAP sync) is specced and was prototyped, but it ships in a later version — do not build it for v1. Onboarding is two steps (Quick Actions walk + tour); the email-connect step returns with Mail.
What is preview-only (build these for real)
Presence heartbeat (websocket) · notifications service behind the bell · IMAP email connect (credential to server keychain, never device or app DB) · tour/coach-mark engine · WebRTC calls · Face ID · drag-reorder + swipe-reply gestures. Everything else in the prototype behaves as specced.
Start here
Quickstart
1. Open the prototype and use the jump menu (top-left) — 28 screens: signin · register · pending · tfa-setup · tfa · home · wall · games · timeoff · chat · thread · call · ai · members · member · ban · brands · handles · plans · capital · investors · lending · addloan · tasks · approvals · team · devices · audit · superadmin · more
2. Flip the theme (top-right). Every screen must pass both; call screens stay pinned dark in both — that is intentional, not a bug.
3. The bottom nav is locked Option B: Home · Wall · Chat (unread badge) · Tasks · More, floating with blur.
Start here
Roles & permissions
| Register | Anyone @vaderacapital.com — lands in approval queue |
| Approve registrations + assign role | super_admin, admin, dev |
| Change roles · remove admins | Angel only |
| Delete SUPER_ADMIN | Nobody. Ever. |
| Ban / suspend a member | Any employee — reason required, logged |
| Undo any ban · reverse permanent | Admins only |
| Handles: lock, release, edit tied email | Super admin — always manual, always logged |
| Approve brands (first join only) | Admins — campaigns auto-post after |
| Approve time off | Angel + Miriam — auto-sets presence |
| Issue promos | Admins — logged with name |
| Engine toggle · reset 2FA · remote sign-out · delete any post | Super Admin panel |
Start here
Day one vs. build list
Works day one — existing APIs
Dashboard glance · Wall posts, reactions, polls · chat channels/DMs/presence · member list + edits + password resets · verification queue · loans + mark paid · investor reviews, invoices, Mercury sync · push sending · audit + email logs · presence · logged sign-ins.
To build — engineering list
TOTP 2FA service · registration-approval flow · WebRTC calls (LiveKit/Daily) + guest links · Tasks system · handle registry + brand doc uploads · games/streaks/levels · Mercury webhook · countersign + resend-docs routes · time-off approvals · Monday+PandaDoc+Mercury loan sync.
Design system
Wordmark & type
Wordmark A (locked): Comfortaa 700 "vadera" + Fraunces italic "ops." in the purple→pink gradient. Inter for everything readable; Fraunces italic on exactly one accent word per header. Outfit for numbers, scores, IDs. Greetings run on viewer local time and never say "Good morning" — approved: Good day, Good afternoon, Good evening, Hey, Welcome back.
Build
Add a screen — the protocol
1 · Skeleton. A .screen section; include a back affordance if the user can regret entering.
2 · Register it. Jump menu + every Needs-You/More row that reaches it.
3 · It's addressable. Verify navigation both directions — zero orphans.
4 · Ship checklist. Both themes pass · no chrome emoji · tonal button grammar · role gating stated · every sensitive action writes to audit with actor + reason · docs updated in the same commit (no-drift rule).
Build
State tables
| Presence | Online · Lunch · Out · Vacation (auto from approved time off) · Focus · Away (idle) |
| Ban durations | 24h · 3d · 7d · 14d · 30d · Permanent — all undo admin-only; permanent reversal admin-only |
| Verification | submitted → under review → approved / rejected (+reason) — logged with admin ID + IP |
| Handle request | new → docs requested → docs received → released to tied email / declined (+written reason) — all logged |
| Loan reconciliation | on plan · behind plan (n missed) · paid — Monday plan × PandaDoc agreement × Mercury payments |
| Task status | Working · Review · Stuck · Done — Done→notify manager · overdue→Stuck+ping · assigned→push |
Build
Integrations
Mercury: invoices create/send/refresh via real routes; payment status pulls on sync — the seed bar moves then. Webhook = build list.
invest.vaderacapital.com: the app mirrors the recon'd admin route set — investor CRUD + status, accreditation approve/reject with logging, hash-checked signed docs with retention dates. Missing routes (build list): Mercury webhook, dedicated countersign, resend-docs.
Monday + PandaDoc: loan reconciliation reads the payment plan and the executed agreement, crosses with Mercury payments, computes on-plan / behind / paid per borrower.
Push: existing notifications pipeline; quiet hours respected per device.
Build map.
Every feature, its status in the prototype, and what engineering owes. Working = replicate the prototype exactly. Preview = the prototype shows the UX; the behavior needs real infrastructure.
| Feature | Prototype | Engineering owes |
|---|---|---|
| Auth flow (Register→Pending→Sign in→2FA) | Working | TOTP enrollment, session logging, super-admin approval queue, 15-min idle → Face ID lock |
| Quick Actions bar + popovers + bubble | Working | Presence websocket heartbeat; notification service feeding the bell; counts clear on act |
| Quick chat (list→thread→send) | Working | Real messaging backend shared with Chat page; unread counts |
| Chat page (reactions, copy, timestamps) | Working | Swipe-reply gesture; message persistence |
| Tasks (rename, pills, add, remove, updates, boards) | Working | Monday two-way sync (board 18414252351); drag-reorder; admin-edit enforcement server-side |
| Roles & permissions matrix | Working | Route guards per module per verb; audit every change |
| Suspend employee | Working | Kill all sessions instantly; block sign-in; log |
| Onboarding overlay + email connect + tours | Working (connect simulated) | IMAP/SMTP auth to Vadera mail server, credential in server keychain; per-user onboarded_at; coach-mark engine in Flutter |
| Wall (post sheet, photo posts) | Working | Media upload, feed persistence, reactions |
| Games (tic-tac-toe, 2048 playable) | Working | Streaks, leaderboard, super-admin trivia scheduler |
| Time off (calendar strips, approvals) | Working | Request workflow, calendar source of truth |
| Brands / Handles doc flows | Working | Upload storage, request emails, review queue |
| Notifications (audience preview, history) | Working | Push delivery, opt-outs, quiet hours, open tracking |
| Mercury / Investments / Lending | Working | Mercury webhook sync, PandaDoc countersign, loan schedule engine |
| Calls (Join call buttons) | Preview | WebRTC or provider |
| Vadera AI | Preview | Model wiring to live company data, permission-scoped |
Security flags: email credentials → server keychain only. Presence and bell data are permission-scoped (a viewer role never receives investor events). Every admin action writes to the audit log.
The Quick Actions bar
One floating glass bar, bottom-center of every screen, holding everything you reach for between pages: who's around, quick chat, Vadera AI, and the bell. It replaces the old separate presence strip and chat bubble.
What's on it
| Element | Tap it |
|---|---|
| Your avatar (green status ring) | Status menu — Active / Idle / Focus (mutes pings) / Away — plus My profile and Sign out. 15 minutes of inactivity auto-sets Idle. |
| Teammate avatars | Action card: Message, Call, Assign a task, View profile. Call is offered only when they're Active — an idle teammate gets Message ("notifies when back") instead. |
| +N chip | The Active Now panel: search, grouped ACTIVE → IDLE → AWAY. Employees only — customers never appear in presence. Away rows are dimmed with the reason ("vacation · back Jul 11"). |
| Chat icon (badge) | Quick chat: recent threads → tap one → the live thread with composer, without leaving your page. |
| Vadera AI (gradient) | Mini AI panel on live company data — ask anything from anywhere. |
| The bell (count) | The Needs You panel: approvals, overdue loans, AI insights — each row jumps straight into its queue. Counts clear when you act, never just because you looked. |
| ⌄ | Collapse. |
Collapse & the pulse bubble
Tap ⌄ (or open Chat / AI, where the bar hides itself): the bar disappears and a single bubble appears at the screen edge. It stays silent until a new message, a task assigned to you, or an AI insight arrives — then it pulses with a count. Tap the bubble: the bar returns in place.
Rules baked in: liquid glass, one popover at a time, online-first (away people are grouped, not displayed), no call buttons for absent people, the bell rings — never turns red — and the bar never covers a composer.
Onboarding & the tour
Onboarding is temporary by design — it is not a tab. New employees see a welcome overlay on first sign-in; completing or dismissing it removes it permanently (it can be replayed from Profile → Help → Replay tour).
The three steps
Engineering note: onboarding state is per-user (onboarded_at timestamp). The overlay renders only when null. Replay never rewrites the timestamp.
Build
Downloads
Same 28 screens, both themes. iPhone: floating bottom nav. iPad: persistent left rail, wide grids, four-across call tiles.
README + prototype for engineering.
Confidential · Vadera Capital Corporation · internal use only.
Screens · Auth
Sign in · Register · 2FA
Sign in: email + password (SVG eye toggle), Apple-style Face ID button, stay-signed-in 30 days, forgot link. Every sign-in logged with device + location.
Register: first/last split, domain-restricted email, password → Pending approval screen; approver assigns role.
2FA setup: QR + long manual setup key (Authenticator/Authy/Apple Passwords), 6-digit confirm. Mandatory, no SMS. Lost device → Angel resets from Super Admin.
Screens · Core
Home · Wall · Games · Time off
Home: loan alert banner → Lending · local-time greeting (never "Good morning") · free-form Ask AI bar · six live tiles · Needs-You queue (each row taps through) · team presence · system status.
The Wall: feed-first. Collapsed "Share something…" opens the composer sheet (Note / Poll / Trivia / Countdown / Kudos + tint colors). Today at Vadera: birthdays, kudos, announcements with read receipts. Feed: pinned countdown, live tappable polls with animated bars, Wall Bot forecast results, tinted notes, reactions.
Games: level + streak with daily check-in, company trivia (+25 pts, graded on tap), weekly forecast picks, leaderboard. Badges only — bragging rights are the prize.
Time off: request → Angel/Miriam approve → presence auto-sets + calendar entry.
Screens · Chat & AI
Chat · Call · Vadera AI
Chat: channels, groups, DMs — unread counts, presence dots, meetings card with Join. Flat replies by design; no threads.
Thread: attach + send, Enter works, read state.
Call: pinned dark both themes. Voice, video, screen share; guest links join in browser with no account. FaceTime-grammar controls; mute indicators on tiles; speaking ring; invite sheet with copyable link. No recording.
Vadera AI: free-form only — input anchored at the bottom, conversation grows upward, answers from live company data. No preset questions anywhere in the app.
Screens · Pulse mgmt
Members · Ban · Brands · Handles · Plans
Members: search + segmented plan filters with live counts (Founding / Pro / Free / Banned).
Member detail: connected platforms with token state — lapsed = inputs leave the score immediately · editable email/phone · password reset · plan change · promo issue · moderation entry.
Ban: 24h → permanent, written reason required and logged. Any employee can suspend; every undo is admin-only.
Brands: one-time first-join gate; campaigns auto-post after; brands manage campaigns on the website.
Handles: availability search · requests carry the Meta-style verification checklist (business registration, domain-email verification, official-website match) · Request-docs action · tied email editable · release to tied email only · decline demands a written reason · full release log. Releases are always manual.
Plans & promos: counts by tier, promo issue (Pro 3/12 mo, Founding lifetime), logged with name.
Screens · Company
Capital · Investors · Lending · Tasks
Capital: seed bar $0 → $10M moves on Mercury sync; pre-seed $1.24M closed; invoice feed with refresh.
Investors: verification queue with approve / reject+reason (logged with admin ID + IP) · investor records with purchased/bonus/total, amount paid, OFAC/AML state · the six actions: update status, update profile, signed docs, upload, reset password, delete.
Lending: overdue list with Mark-paid · per-borrower reconciliation: Monday plan × PandaDoc agreement × Mercury payments → on-plan / behind / paid · Draft-letter action routes to Tatiana (factual, threat-free; payment in person, cashier's check, or Mercury invoice only).
Tasks: groups → items with owner/date/priority/status; table ↔ kanban toggle; automations: Done→notify, overdue→Stuck+ping, assigned→push.
Screens · Admin
Approvals · Team · Devices · Audit · Super Admin
Approvals: registration queue — role select + approve/deny.
Team: presence picker (Online / Lunch / Out / Vacation / Focus) + full roster with roles.
Devices: every session with remote sign-out · notification toggles · quiet hours.
Audit: promos, bans, handle releases, denied role changes, sign-ins — actor, target, reason, timestamp.
Super Admin (Angel only): change any role, remove admins, reverse permanents, release handles, reset 2FA, engine live toggle, remote sign-out anyone, delete any post. SUPER_ADMIN is undeletable by anyone.
Design system v2 · the Meta refinement
Applied app-wide July 2026, both devices, both themes. Calm opaque surfaces where tone does the elevation; blur exists in exactly one place (the floating quick bar). These tokens and patterns are binding for the Flutter build.
Tokens
| Token | Dark | Light |
|---|---|---|
| bg | #0e0a19 | #f6f5fa |
| surface (card) | #171226 | #ffffff |
| surface-2 (raised / secondary fill) | #1f1932 | #f0eef7 |
| hairline (b1) | rgba(255,255,255,.07) | rgba(25,15,45,.07) |
| text 1 / 2 / 3 | #f5f2fb · #b9addb · #877ba3 | #191428 · #4b4163 · #8b81a4 |
| red (destructive) | #ff4d67 | #e11d48 |
| green / gold | #31d494 · #e8b54a | #0d9668 · #b8860b |
Patterns · binding
- Elevation is tonal: bg → surface → surface-2. Cards carry a 1px hairline, radius 16, no shadows. Buttons radius 12.
- One blur: the floating quick bar (and modal sheets). Never on content cards.
- Grouped lists: repeated rows live inside one surface with internal hairline dividers and a trailing chevron, not stacked cards. The Q() row helper renders this automatically.
- Destructive actions are red text on surface-2 (class .dngr). Solid red exists only as a final confirm step. Button labels never end in dots; the reason or confirm screen is simply the next step.
- Gradient budget: one primary CTA per screen, wordmark, role tags, current-user avatar. Sidebar active state is a 3px gradient edge-bar.
- Punctuation: no em dashes anywhere in UI copy; middot separates fragments. Section headers are sentence case.
- Status colors on solid fills (task boards, badges) use white text; the gold badge uses bg-colored text so it flips per theme.
Quick bar · behavior spec (new)
- Collapse control is a chevron that points toward the bubble's current dock side (default right).
- Collapsed bubble is hold-and-drag anywhere; on release it snaps to the nearest horizontal edge and keeps its vertical position (clamped below the topbar, above the bottom). A drag never triggers a tap.
- Dock side + vertical position persist per user, server-side in production (session-only in the prototype).
- Presence rule: current user + up to 4 most-recent online teammates, then an overflow chip only if more remain.
Added this cycle · dev must implement
- Plan pricing is admin-editable: Plans & promos detail exposes monthly and yearly fields for Pulse Pro ($7.99 / $76.70) and Founding ($17.99 / $172.70). Editable by SUPER ADMIN and ADMIN only; other roles see the fields disabled read-only. Every save writes a
pricing.updaterow to Audit. Client app reads these values live. - Audit now covers sessions: two feeds, Sign-ins (who, when, device, location, live "now" chip) and Actions (pricing.update, promo.issue, ban.apply, handle.release, …). Entire page is admin-only; viewer and dev roles get no access. Retention: sign-ins 12 months, actions 24 months, CSV export from Super Admin.
- Profile row (Option A, approved): 28px gradient avatar, name stacked over a neutral surface-fill role chip (never gradient), no chevron. It is a single tap target for the profile page and stays pinned at the sidebar bottom.
- Claude-style composer (class
cbox) is the standard for Chat and Vadera AI: one calm rounded container, attach or sparkle icon inside on the left, borderless input, integrated gradient send circle. No floating emoji or attach icons outside the field.
Also locked this cycle
- Home date is computed from device time; never hardcoded.
- Collapsed sidebar zeroes label text (font-size:0); labels can never crop-leak.
- Domain check renders "Passed ✓" as a neutral chip with green text.
- Mail remains out of v1 (design spec exists separately).