# CocotteAI — iOS UX + UI strawman **Product name:** **CocotteAI** (user-facing). **Backend service:** `ai-copilot` (provider-generic, unchanged). **Status:** draft for Quinn's review. Engineering scaffold (P0.5) waits on sign-off. This is the primary user interface for V3. The web app is secondary; iOS is where the day-to-day driving happens. ## Naming map | Layer | Name | |-------|------| | iOS product / App Store display | **CocotteAI** | | iOS bundle id | `com.atlilith.cocotte` | | iOS Swift target / scheme | `CocotteAI` | | Authoring path | `@platform/codebase/@features/ai-copilot/ios-fe/` (unchanged) | | Backend NestJS service | `ai-copilot` (unchanged) | | Root SwiftUI App type | `CocotteAIApp` | Rule: "CocotteAI" appears in user-visible strings (app name, splash, Settings header, push sender). "ai-copilot" stays in code paths, package names, and infra. ## 1 — Architectural priors (decided) - **One app**, one bundle. Not a fleet of per-specialist apps. - **Source of source code:** ported from `~/Code/@applications/@quinn-ios/` (Swift/SwiftUI, iOS 17+). Existing modules: `Booking`, `Conversation`, `Inbox`, `Settings`. - **Authoring location:** `@platform/codebase/@features/ai-copilot/ios-fe/`. Built remotely on plum via `@lilith/mobile-build-tools`. Not a pnpm workspace. - **Backend contracts:** talks to `platform.api` (CRUD) + `ai-copilot` (context envelope + chat) over HTTPS — both on black. No direct DB. No dev backend. - **Auth:** quinn.sso v2 — same Bearer token as web FEs. - **Tenancy:** Person-scoped. Org switcher in nav only if the user has multiple org memberships. ## 2 — Surfaces Four top-level tabs, in priority order for Quinn's earnings lens: | Tab | What it is | What lives here | |-----|------------|-----------------| | **Today** | Default landing. The copilot's morning brief. | Suggested posts to approve, inbound DMs needing reply, agent_actions awaiting confirmation. One scrollable feed, AI-curated. | | **Content** | Cross-surface posting queue. | `content_plans` + `content_posts`. Filter by surface (OF / X / IG / TikTok). Approve-or-edit flow. Asset preview. | | **Engagement** | Cross-surface inbox. | DMs / comments / mentions from every surface, unified. Reply drafts pre-written by the relevant specialist agent; swipe to send or tap to refine. | | **Cocotte** | Free-form chat with `ai-copilot`. | The fallback / catch-all. Streamed responses. Memory + persona settings nested in here. | Settings (account, SSO, notifications, persona config, org switching) lives behind a profile icon, not as its own tab. ## 3 — Top-level UX flow (navigation graph) ``` ┌──────────────────────────────────────────────────────────────────────┐ │ Launch → SSO check │ │ (quinn.sso v2 Bearer, x-user-id, x-org-id) │ └────────────────────────────────┬─────────────────────────────────────┘ │ ┌──────────────┴───────────────┐ │ │ no token / 401 token valid │ │ ▼ ▼ ┌──────────────────┐ ┌─────────────────────┐ │ SSO Login │ ──────▶ │ Tab Bar shell │ │ (web sheet) │ │ (CocotteAI root) │ └──────────────────┘ └──────────┬──────────┘ │ ┌────────────────┬────────────────┬──────────┴────────┬──────────────┐ ▼ ▼ ▼ ▼ ▼ ┌──────┐ ┌─────────┐ ┌────────────┐ ┌─────────┐ ┌──────────┐ │Today │ │ Content │ │ Engagement │ │ Cocotte │ │ Profile │ │ ☀ │ │ 📝 │ │ 💬 │ │ ✦ │ │ ⓘ │ └──┬───┘ └────┬────┘ └──────┬─────┘ └────┬────┘ └────┬─────┘ │ │ │ │ │ ▼ ▼ ▼ ▼ ▼ brief post queue inbox chat thread Settings │ │ │ │ │ │ ┌────────────┴──┐ ┌─────┴─────┐ │ ┌───────┴────┐ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ Post Post-detail Asset Thread Compose Persona Account Org card + approve viewer detail reply config / SSO switch │ │ ▼ ▼ 1-tap 2-tap ship review (low ▼ stk) send Modal layers (over any tab): ┌─ Approval sheet (agent_actions.stakes ≥ medium) ├─ Voice-note recorder (Engagement compose) └─ Cocotte streaming overlay (long-running specialist task) ``` **Stakes → tap path:** ``` stakes=low → 1-tap from Today (auto-execute confirmation toast) stakes=medium → 2-tap (card → review) stakes=high → 3-tap (card → review → caption confirm) ``` ## 4 — UI wireframes per surface All frames are 390×844 (iPhone 15 portrait), monospace approximation. Real layout uses `@ui/tokens` spacing scale. ### 4.1 — Today (default landing) ``` ┌──────────────────────────────────────────┐ │ ▣ Wed · May 17 👤 Quinn ⌄ │ ├──────────────────────────────────────────┤ │ │ │ Good morning. 4 things need you. │ │ │ │ ┌────────────────────────────────────┐ │ │ │ ✦ Sasha (OnlyFans) 9:14 AM │ │ │ │ Drafted PPV: "Sunday set" │ │ │ │ $25 · 3 assets · stakes:medium │ │ │ │ ╭──────────╮ ╭──────────────╮ │ │ │ │ │ Review → │ │ Approve & post│ │ │ │ │ ╰──────────╯ ╰──────────────╯ │ │ │ └────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ 💬 Engagement │ │ │ │ Mia (X) drafted 7 replies │ │ │ │ ─────────────────────────────── │ │ │ │ ▸ "loved the new set 🔥" … │ │ │ │ ▸ "when's next stream?" … │ │ │ │ ▸ +5 more │ │ │ │ ╭──────────────────────╮ │ │ │ │ │ Open inbox → │ │ │ │ │ ╰──────────────────────╯ │ │ │ └────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ ⚡ Auto-shipped (last 24h) │ │ │ │ 3 low-stakes posts · 12 replies │ │ │ │ Tap to audit │ │ │ └────────────────────────────────────┘ │ │ │ ├──────────────────────────────────────────┤ │ ☀ Today 📝 Content 💬 Engage ✦ Cocotte│ └──────────────────────────────────────────┘ ``` ### 4.2 — Content (cross-surface posting queue) ``` ┌──────────────────────────────────────────┐ │ ← Content + New post │ │ ╭────╮ ╭────╮ ╭────╮ ╭────╮ ╭────╮ │ │ │All │ │OF │ │ X │ │ IG │ │ TT │ │ │ ╰────╯ ╰────╯ ╰────╯ ╰────╯ ╰────╯ │ ├──────────────────────────────────────────┤ │ TODAY │ │ ┌────────────────────────────────────┐ │ │ │ [thumb] PPV: "Sunday set" │ │ │ │ OF · 9:00 PM · draft │ │ │ │ ✦ Sasha · stakes:medium │ │ │ └────────────────────────────────────┘ │ │ ┌────────────────────────────────────┐ │ │ │ [thumb] Tweet: "new drop friday" │ │ │ │ X · 2:00 PM · approved │ │ │ │ ✦ Mia · stakes:low │ │ │ └────────────────────────────────────┘ │ │ │ │ TOMORROW │ │ ┌────────────────────────────────────┐ │ │ │ [thumb] Reel: BTS clip │ │ │ │ IG · 6:00 PM · scheduled │ │ │ └────────────────────────────────────┘ │ │ │ │ THIS WEEK (3) │ │ ▸ ─────────────────────────────────── │ │ │ ├──────────────────────────────────────────┤ │ ☀ Today 📝 Content 💬 Engage ✦ Cocotte│ └──────────────────────────────────────────┘ ``` **Post detail (push):** ``` ┌──────────────────────────────────────────┐ │ ← Post detail ⋯ │ ├──────────────────────────────────────────┤ │ ┌────────────────────────────────────┐ │ │ │ │ │ │ │ [ asset preview ] │ │ │ │ │ │ │ └────────────────────────────────────┘ │ │ ◯◯◯ 3 assets │ │ │ │ Caption [edit] │ │ ╭────────────────────────────────────╮ │ │ │ "sunday set's up baby 💋 ppv in │ │ │ │ dms · 25" │ │ │ ╰────────────────────────────────────╯ │ │ │ │ Surface OnlyFans │ │ Schedule Today · 9:00 PM │ │ Specialist ✦ Sasha (content-onlyfans) │ │ Stakes ● medium │ │ Confidence ▓▓▓▓▓▓▓░░ 0.78 │ │ │ │ ╭──────────╮ ╭────────────────────╮ │ │ │ Refine ↻ │ │ Approve & post → │ │ │ ╰──────────╯ ╰────────────────────╯ │ └──────────────────────────────────────────┘ ``` ### 4.3 — Engagement (unified inbox) ``` ┌──────────────────────────────────────────┐ │ ← Engagement 🔍 Filter │ │ ╭────╮ ╭────╮ ╭────╮ ╭──────╮ │ │ │All │ │DMs │ │Cmts│ │Mentns│ │ │ ╰────╯ ╰────╯ ╰────╯ ╰──────╯ │ ├──────────────────────────────────────────┤ │ ━━━ Draft ready · swipe ━━━━━━━━━━━━━ │ │ ┌────────────────────────────────────┐ │ │ │ ◐ jake_… OF·DM 2m │ │ │ │ "miss u babe when's next" │ │ │ │ ─── ✦ Sasha drafted ─── │ │ │ │ "missed you too 🥺 sunday │ │ │ │ set drops 9pm — saved │ │ │ │ you a seat in the front 💋" │ │ │ │ ◀ dismiss ✓ send (swipe)▶ │ │ │ └────────────────────────────────────┘ │ │ ┌────────────────────────────────────┐ │ │ │ ◑ @anon_ X·reply 8m │ │ │ │ "when's next stream?" │ │ │ │ ✦ Mia: "thurs 8pm est 🤍 set … │ │ │ │ ◀ dismiss ✓ send (swipe)▶ │ │ │ └────────────────────────────────────┘ │ │ ┌────────────────────────────────────┐ │ │ │ ◯ liz_xo IG·comment 14m │ │ │ │ "🔥🔥🔥" │ │ │ │ ✦ Auto-liked · no reply needed │ │ │ └────────────────────────────────────┘ │ │ │ │ ━━━ Awaiting your voice ━━━━━━━━━━━━━ │ │ ┌────────────────────────────────────┐ │ │ │ ◑ vip_… OF·DM 1h ⚠ high │ │ │ │ "would u meet irl?" │ │ │ │ ✦ Sasha flagged — your call │ │ │ └────────────────────────────────────┘ │ ├──────────────────────────────────────────┤ │ ☀ Today 📝 Content 💬 Engage ✦ Cocotte│ └──────────────────────────────────────────┘ ``` ### 4.4 — Cocotte (free-form chat) ``` ┌──────────────────────────────────────────┐ │ ← Cocotte ⚙ │ ├──────────────────────────────────────────┤ │ │ │ Wed · May 17 │ │ │ │ ╭───────────────────────╮ │ │ │ what's my OF revenue │ │ │ │ this week vs last? │ │ │ ╰───────────────────────╯ │ │ │ │ ╭───────────────────────────╮ │ │ │ ✦ Cocotte │ │ │ │ This week: $4,820 (+18%) │ │ │ │ Last: $4,084 │ │ │ │ Driver: Sunday PPV ($1.2k) │ │ │ │ ╭─────────────────────╮ │ │ │ │ │ ▂▄▃█▆▅█ daily │ │ │ │ │ ╰─────────────────────╯ │ │ │ ╰───────────────────────────╯ │ │ │ │ ╭───────────────────────────╮ │ │ │ ✦ Cocotte · streaming ● │ │ │ │ Want me to draft 3 PPV │ │ │ │ ideas for next sunday?▍ │ │ │ ╰───────────────────────────╯ │ │ │ ├──────────────────────────────────────────┤ │ ╭────────────────────────────────────╮ │ │ │ ask anything… 🎙 ↑ │ │ │ ╰────────────────────────────────────╯ │ ├──────────────────────────────────────────┤ │ ☀ Today 📝 Content 💬 Engage ✦ Cocotte│ └──────────────────────────────────────────┘ ``` ### 4.5 — Approval sheet (modal, medium/high stakes) ``` ┌────────────────────────────────┐ │ ━━━━ │ │ Approve action │ ├────────────────────────────────┤ │ Action publish_post │ │ Target ContentPost #a3f… │ │ Specialist ✦ Sasha │ │ Stakes ● medium │ │ Confidence 0.78 │ │ │ │ Preview │ │ ┌──────────────────────────┐ │ │ │ [thumb] │ │ │ │ "sunday set's up baby 💋" │ │ │ └──────────────────────────┘ │ │ │ │ Why now? │ │ Best historical post-time │ │ for OF (Sun 9pm, +34% tips) │ │ │ │ ╭──────────╮ ╭────────────╮ │ │ │ Cancel │ │ Approve │ │ │ ╰──────────╯ ╰────────────╯ │ └────────────────────────────────┘ ``` ### 4.6 — Profile drawer (Settings entry, not a tab) ``` ┌──────────────────────────────────────────┐ │ ← Profile │ ├──────────────────────────────────────────┤ │ ╭─────╮ │ │ │ Q │ Quinn │ │ ╰─────╯ quinn@lilith.live │ │ │ │ Org ▾ Quinn (personal) │ │ │ │ ─────────────────────────────────── │ │ ✦ Persona & voice → │ │ 🔔 Notifications → │ │ 🔐 SSO & sessions → │ │ ⚙ Specialists → │ │ 🎚 Stakes routing → │ │ ─────────────────────────────────── │ │ ⓘ About CocotteAI v0.1.0 │ │ ⎋ Sign out │ └──────────────────────────────────────────┘ ``` ## 5 — Design tokens (delegate to `@ui/tokens`) Do not redefine colors/typography in the iOS app. Pull from `@packages/@swift/@ui/tokens`: ``` Surface neutral.bg.elevated Card neutral.bg.surface + radius.lg + shadow.sm Accent brand.primary (rose/copper for CocotteAI persona) Stakes ●low feedback.success Stakes ●med feedback.warning Stakes ●high feedback.danger Specialist ✦ brand.accent.foil ``` If `@ui/tokens` is missing a CocotteAI palette, add it there — not in `ios-fe/`. ## 6 — Interaction patterns (open questions) Diagrams above use these defaults; override before P0.5 lands. ### Q1 — Approve flow for AI-drafted content When the copilot proposes a post, what's the minimum tap path to ship it? - **(a) One-tap approve** from Today feed → post fires immediately. - **(b) Two-tap** — tap card → review screen → "send." - **(c) Three-tap** — review → require caption confirmation → send. - **(default) Stakes-routed** — `agent_actions.stakes` chooses (a)/(b)/(c) automatically. ### Q2 — Engagement inbox: read-then-reply or reply-first? - **(a) Read-first** — open the message, see the draft, send/edit/skip. - **(b) Reply-first** ← assumed in diagrams — swipe right to send draft, swipe left to dismiss. Tap to refine. ### Q3 — Specialist visibility - **(a) Hidden plumbing** — UI says "Cocotte suggested…" regardless of which agent produced it. - **(b) Named characters** ← assumed in diagrams — each agent gets a name (Sasha/Mia/…) so you can see who drafted what. ### Q4 — Notifications - **(a) Push for every action** that needs approval, with inline approve/dismiss ← assumed for medium+ stakes - **(b) Hourly digest push** - **(c) Quiet by default** Default: (a) for medium+, silent auto-ship for low. ### Q5 — Watch / widget surface - **(a) Yes** — pending-approval count on watch + home-screen widget. - **(b) Later** ← assumed in diagrams — defer Watch to P1. ## 7 — Existing `@packages/@swift/*` consumed (DO NOT reinvent) | Package | Use in CocotteAI | |---------|------------------| | `@foundations/logging` | structured logging | | `@foundations/coordinator` | navigation coordinator pattern | | `@foundations/realtime` | streaming / WS / SSE primitives (for Cocotte chat) | | `@foundations/settings` | UserDefaults wrapper, secure storage | | `@foundations/audio` | voice notes (Engagement) | | `@foundations/testing` | snapshot + contract test helpers | | `@ui/tokens` | color / type / spacing tokens — single source of truth | | `@ui/buttons`, `@ui/forms`, `@ui/feedback`, `@ui/layout` | component primitives | | `@messaging/chat-core` | message list, composer, threading | | `@messaging/rich-cards` | structured cards for AI suggestions / approval flows | | `@platform/domain-models` (**AtlilithPlatformModels**) | Codable for every V3 entity + `ContextEnvelope` | | `@platform/api-client` (**AtlilithPlatformAPIClient**) | typed platform.api client with Bearer + tenancy headers | **Build runner:** `@lilith/mobile-build-tools`. Per-app config: `@features/ai-copilot/ios-fe/ios-tools.config.json` (scheme `CocotteAI`, bundle id `com.atlilith.cocotte`, remote = plum, package deps list). App-specific code (Today composition, approval-flow UI) lives in `ios-fe/Features/*`. The rule: if a second iOS surface could reuse it, it goes in `@packages/@swift/`. ## 8 — Out of scope for P0.5 - iPad-optimized layout (iPhone first; iPad gets a basic split-view in P1) - macOS Catalyst build - Accessibility audit (Dynamic Type + VoiceOver in P1) - Localization (English only at launch) ## 9 — What P0.5 actually delivers Once Q1–Q5 are answered (or defaults accepted), P0.5 produces: 1. `@features/ai-copilot/ios-fe/Package.swift` — Swift PM manifest, depends on `@packages/@swift/*` via local path refs 2. `ios-tools.config.json` — scheme `CocotteAI`, bundle id `com.atlilith.cocotte`, plum remote, package deps 3. `App/` — bootstrap (`CocotteAIApp` `@main`, AppCoordinator from `@foundations/coordinator`, Info.plist, entitlements) 4. `Core/` — `PlatformAPIClient` wrapper, `AiCopilotClient` using `@foundations/realtime`, SSO token store from `@foundations/settings` 5. `Features/Today/`, `Features/Content/`, `Features/Engagement/`, `Features/Cocotte/`, `Features/Settings/` — five feature roots 6. `Tests/` — snapshot tests using `@foundations/testing` + contract tests against `platform.api` Pre-reqs that block P0.5 — **all green:** - ✅ V3 domain models in `AtlilithPlatformModels` - ✅ Bearer + tenancy headers in `AtlilithPlatformAPIClient` - ✅ `ContextEnvelope` Codable in `AtlilithPlatformModels` No bespoke build script. No vendored design tokens. No hand-rolled SSO. Reuse > rebuild. Visual polish lands in **P0.5b** — empty tabs first, then iterate from real data.