{"slug":"business/USER_FLOW_AND_VIEWS","title":"USER FLOW AND VIEW ARCHITECTURE","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/USER_FLOW_AND_VIEWS.mdx","bytes":27518,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n**IntegrateWise Complete User Journey** \n_From Login β Workspace β Entity 360 β AI Actions_\n\n---\n\n## π― COMPLETE USER JOURNEY\n\n```\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ STAGE 0: AUTHENTICATION β\nβ Entry: app.integratewise.ai β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ LOGIN / SIGNUP β\nβ Location: /app (redirects to login if not authenticated) β\nβ β\nβ Options: β\nβ β’ Email/Password β\nβ β’ Google SSO (OAuth) β\nβ β’ GitHub SSO (OAuth) β\nβ β\nβ Auth Provider: Spine DB PKCE β\nβ Session: JWT stored in browser, refreshed automatically β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ STAGE 1: ONBOARDING (New Users Only) β\nβ Component: OnboardingFlow.tsx β\nβ 4 Steps β ~2 minutes β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n β\n βββββββββββββββββββββββΌββββββββββββββββββββββ\n β β β\nβββββββββββββββββ ββββββββββββββββββββ ββββββββββββββββββββ\nβ STEP 1 β β STEP 2 β β STEP 3 β\nβ Welcome β β Profile β β Goals β\nβ (~15s) β β (~30s) β β (~25s) β\nβ β β β β β\nβ Choose: β β Select: β β Define: β\nβ β’ Personal β β β’ Industry β β β’ Goal β\nβ β’ Work β β β’ Department β β β’ Workspace Name β\nβ β’ Business β β β’ Company Size β β β’ Workspace Type β\nβ β β β β β\nβ β Determines β β β Triggers β β β Creates β\nβ workspace β β Spine schema β β workspace β\nβ type β β initialization β β context β\nβββββββββββββββββ ββββββββββββββββββββ ββββββββββββββββββββ\n β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ STEP 4: CONNECTORS (~45s) β\nβ β\nβ Connect Data Sources: β\nβ β’ CRM (HubSpot, Salesforce) β\nβ β’ Task Management (Asana, Jira) β\nβ β’ Workspace (Slack, Teams) β\nβ β’ Email (Gmail, Outlook) β\nβ β’ Analytics (Google Analytics) β\nβ β\nβ Flow Types: β\nβ Flow A: OAuth β Loader β Normalizer β Spine (structured data) β\nβ Flow B: Upload β Knowledge β Embeddings (documents) β\nβ Flow C: AI Chat β Triage Bot β Memory (conversations) β\nβ β\nβ β Triggers: β\nβ 1. OAuth authorization (redirect to provider) β\nβ 2. Callback β Store encrypted tokens β\nβ 3. Creamy Layer sync (100 records, schema-driven) β\nβ 4. Background sync (full data, queued) β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ STAGE 2: WORKSPACE (Authenticated Users) β\nβ Component: WorkspaceShellNew.tsx β\nβ Layout: Sidebar + Header + Content + L2 Drawer (hidden) β\nβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n\n---\n\n## ποΈ WORKSPACE ARCHITECTURE\n\n### **Layout Structure**\n\n```\n\nββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ HEADER (Fixed Top) β\nβ ββββββββββββββββ¬ββββββββββββββββββββββββββββββββββ¬βββββββββββββββ β\nβ β Logo β Search (βK) β Notificationsβ β\nβ β IntegrateWiseβ β User Menu β β\nβ ββββββββββββββββ΄ββββββββββββββββββββββββββββββββββ΄βββββββββββββββ β\nββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€\nβ ββββββββββββ¬βββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ β β CONTENT AREA (Dynamic) ββ\nβ β SIDEBAR β ββ\nβ β (260px) β Rendered by ContentRouter based on: ββ\nβ β β β’ Active View (Personal / Work) ββ\nβ β ββββββββ β β’ Active Domain (CS / Sales / RevOps / etc.) ββ\nβ β βDomainβ β β’ Module ID (dashboard / accounts / tasks) ββ\nβ β βSelectβ β ββ\nβ β ββββββββ β Lazy-loaded modules with: ββ\nβ β β β’ Error boundaries ββ\nβ β Nav: β β’ Loading skeletons ββ\nβ β β’ Home β β’ Density gating (hide if no data) ββ\nβ β β’ Accts β β’ Projection-based entitlement ββ\nβ β β’ Tasks β ββ\nβ β β’ Docs β ββ\nβ β β’ ... β ββ\nβ β β ββ\nβ β System: β ββ\nβ β β’ Integr β ββ\nβ β β’ AI β ββ\nβ β β’ Settings ββ\nβ ββββββββββββ΄βββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\nβ L2 COGNITIVE DRAWER (Hidden by default, opens on βJ or event) β\nβ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β\nβ β Think | Triage | Signals | Approvals | Twin | Policies β β\nβ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β\nββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ\n\n```\n\n---\n\n## π VIEW HIERARCHY\n\n### **Two Primary Views**\n\n```\n\nWORKSPACE\nβββ PERSONAL VIEW (Same for everyone)\nβ βββ Dashboard (hub-home)\nβ βββ Today (hub-today)\nβ βββ Calendar\nβ βββ Tasks\nβ βββ Notes\nβ βββ Documents\nβ βββ Knowledge Hub\nβ βββ Settings\nβ\nβββ WORK VIEW (Domain-specific)\nβββ CUSTOMER SUCCESS (Account Success)\nβ βββ Dashboard\nβ βββ Accounts\nβ βββ Contacts\nβ βββ Health Scores\nβ βββ Meetings\nβ βββ Tasks\nβ βββ Touchpoints\nβ βββ Expansion\nβ βββ Renewals\nβ βββ Risks\nβ βββ At-Risk\nβ βββ Decision Log\nβ βββ Docs\nβ βββ Analytics\nβ βββ Workflows\nβ βββ Integrations\nβ\nβββ SALES\nβ βββ Dashboard\nβ βββ Pipeline\nβ βββ Deals\nβ βββ Contacts\nβ βββ Activities\nβ βββ Forecasting\nβ βββ Quotes\nβ βββ Analytics\nβ\nβββ MARKETING\nβ βββ Dashboard\nβ βββ Campaigns\nβ βββ Leads\nβ βββ Email Studio\nβ βββ Social\nβ βββ Attribution\nβ βββ Forms\nβ βββ Analytics\nβ\nβββ REVOPS\nβ βββ Dashboard\nβ βββ Pipeline\nβ βββ Forecasting\nβ βββ Quotas\nβ βββ Analytics\nβ βββ Cohorts\nβ βββ Team\nβ\nβββ PRODUCT_ENGINEERING\nβ βββ Dashboard\nβ βββ Roadmap\nβ βββ Features\nβ βββ Bugs\nβ βββ Sprints\nβ βββ Tasks\nβ βββ Releases\nβ\nβββ FINANCE\nβ βββ Dashboard\nβ βββ Revenue\nβ βββ Expenses\nβ βββ Reports\nβ βββ Forecasting\nβ βββ Budget\nβ βββ Invoice Approvals\nβ\nβββ SERVICE\nβ βββ Dashboard\nβ βββ SLA Dashboard\nβ βββ Tickets\nβ βββ Customers\nβ βββ Knowledge\nβ βββ Analytics\nβ\nβββ PROCUREMENT\nβ βββ Dashboard\nβ βββ Renewals\nβ βββ Vendors\nβ βββ Orders\nβ βββ Contracts\nβ βββ Spend\nβ\nβββ IT_ADMIN\nβ βββ Dashboard\nβ βββ Systems\nβ βββ Incidents\nβ βββ Vulnerabilities\nβ βββ Licenses\nβ\nβββ BIZOPS (Super-domain with cross-department access)\nβββ Dashboard\nβββ Ops Command Center\nβββ Strategic Hub\nβββ Metrics\nβββ CRM\nβββ Sales Hub\nβββ Clients\nβββ Projects\nβββ Workflows\nβββ Analytics\nβββ Accounts\nβββ Tasks\nβββ Docs\nβββ Calendar\nβββ Integrations\nβββ Workflow Canvas\nβββ CEO Dashboard\nβββ COO Dashboard\nβββ CIO/CTO Dashboard\nβββ Strategy & Leadership\nβββ Operations Center\nβββ Human Resources\nβββ Legal & Compliance\nβββ Business Intelligence\nβββ Partnerships\nβββ Knowledge Management\nβββ Cross-Department Views (sales--, cs--, marketing--, etc.)\n\n````\n\n---\n\n## π¨ CONTENT ROUTING\n\n### **ContentRouter.tsx**\n\n**Purpose**: Lazy-load domain-specific modules based on active view + module ID\n\n**Flow**:\n```typescript\n1. User clicks \"Accounts\" in sidebar\n β\n2. handleNavigate(\"/work/accounts\")\n β\n3. setActivePath(\"/work/accounts\")\n β\n4. Extract moduleId: \"accounts\"\n β\n5. ContentRouter receives:\n - domain: \"CUSTOMER_SUCCESS\"\n - moduleId: \"accounts\"\n β\n6. Lookup in DOMAIN_CONTENT_MAP:\n CS_MAP[\"accounts\"] β () => import(\"...modules/accounts\")\n β\n7. Lazy load component with:\n - Error boundary (catches load failures)\n - Suspense (shows loading skeleton)\n - Density gating (hide if no data)\n - Projection entitlement (hide if not allowed)\n β\n8. Render \n````\n\n**Module Registry** (from content-router.tsx):\n\n```typescript\nconst CS_MAP: Record Promise> = {\n dashboard: csModules.dashboard,\n accounts: csModules.accounts,\n contacts: csModules.contacts,\n \"health-scores\": csModules.healthScores,\n meetings: csModules.meetings,\n tasks: csModules.tasks,\n // ... 40+ modules\n};\n\nconst DOMAIN_CONTENT_MAP: Record Promise>> = {\n CUSTOMER_SUCCESS: CS_MAP,\n SALES: SALES_MAP,\n MARKETING: MARKETING_MAP,\n REVOPS: REVOPS_MAP,\n PRODUCT_ENGINEERING: PE_MAP,\n FINANCE: FINANCE_MAP,\n SERVICE: SERVICE_MAP,\n PROCUREMENT: PROCUREMENT_MAP,\n IT_ADMIN: IT_ADMIN_MAP,\n STUDENT_TEACHER: STUDENT_TEACHER_MAP,\n BIZOPS: buildBizOpsMap(), // 100+ modules (own + cross-dept)\n PERSONAL: PERSONAL_MAP,\n};\n```\n\n---\n\n## π COMMAND PALETTE (βK)\n\n**Component**: `CommandPalette.tsx`\n\n**Features**:\n\n- **Live Entity Search**: Type 3+ chars β searches Spine entities\n- **Quick Actions**: Create Account, Add Integration, Create Deal\n- **Deep Dives**: Jump to any domain workspace\n- **Module Navigation**: Jump to any view\n- **Recent Items**: Accounts, Contacts, Documents\n\n**Categories**:\n\n1. **Quick Actions** (Create, Add, Open)\n2. **Deep Dives** (RevOps, CS, Sales, Marketing, Product, BizOps, Finance, Personal)\n3. **Account Success** (Health, Team, Tasks)\n4. **Core Modules** (Home, Accounts, Contacts, Tasks, Calendar, Docs, Meetings, Projects, Team, Analytics, Workflows)\n5. **Sales** (Pipeline, Deals, Forecasting, Activities, Quotes)\n6. **Marketing** (Campaigns, Email Studio, Social, Attribution, Forms)\n7. **Website & CMS** (Website, Blog, SEO, Pages, Media, Theme)\n8. **Admin & Governance** (User Management, RBAC, Approvals)\n9. **System** (Integrations, AI Chat, Settings, Subscriptions, Profile)\n10. **Entities** (Live search results from Spine)\n11. **Accounts** (Quick access to recent accounts)\n12. **Contacts** (Quick access to recent contacts)\n13. **Documents** (Quick access to recent docs)\n\n**Keyboard Shortcuts**:\n\n- `βK` / `Ctrl+K`: Open palette\n- `ββ`: Navigate\n- `Enter`: Select\n- `Esc`: Close\n\n---\n\n## π§ L2 COGNITIVE LAYER\n\n**Component**: `L2DrawerProvider` + Cognitive Panels\n\n**Trigger Events**:\n\n- `βJ`: Open AI Chat\n- `iw:evidence:open`: Open evidence panel\n- `iw:cognitive:open`: Open specific cognitive surface\n- `open-cognitive-layer`: Generic open (defaults to signals)\n\n**Panels** (6 surfaces):\n\n### **1. Think Panel** (`think-panel.tsx`)\n\n**Purpose**: Reasoning surface that generates proposals\n\n**Features**:\n\n- **Think Types**: Summary, Plan, Strategy, Risk Analysis, Prediction\n- **Input**: Natural language prompt\n- **Output**: Proposal + Evidence + Confidence Score\n- **Actions**: Stage Action, View Evidence\n\n**Flow**:\n\n```\nUser: \"Summarize Q1 performance for Acme Corp\"\n β\nPOST /api/v1/cognitive/think\n {\n type: \"summary\",\n prompt: \"Summarize Q1 performance for Acme Corp\",\n entityId: \"acc_123\",\n entityType: \"account\"\n }\n β\nIntelligence Service:\n 1. Fetch entity from Spine\n 2. Fetch related signals\n 3. Call OpenRouter with context\n 4. Stream response chunks via SSE\n 5. Write session summary to memory\n β\nFrontend: Display proposal with confidence + evidence count\n```\n\n### **2. Triage Inbox Panel** (`triage-inbox-panel.tsx`)\n\n**Purpose**: Flow C customer review surface\n\n**Features**:\n\n- **Pending Items**: AI-extracted knowledge from conversations\n- **Actions**: Approve (β memory), Discard (β gone), Defer (β review later)\n- **Metadata**: Priority, Category, Confidence, Sentiment, Reasoning\n\n**Flow**:\n\n```\nExternal AI (ChatGPT/Claude) β Triage Bot API\n β\nPOST /v1/triage/session\n {\n session_id, summary, memories: [...]\n }\n β\nTriage Bot:\n 1. Validate API key\n 2. Classify session (auto-approve / HITL / discard)\n 3. Write to conversational_memory (Spine DB)\n 4. If approved β promote to org_memory\n 5. Return: { approval_status, confidence }\n β\nFrontend: Display in Triage Inbox\n β\nUser: Approve / Discard / Defer\n β\nPATCH /api/v1/knowledge/triage/:id\n { action: \"approve\", reason: \"...\" }\n```\n\n### **3. Signals Panel**\n\n**Purpose**: Real-time alerts and insights\n\n**Features**:\n\n- **Signal Types**: Risk, Opportunity, Anomaly, Trend\n- **Severity**: High, Medium, Low\n- **Actions**: Investigate, Dismiss, Create Task\n\n### **4. Approvals Panel** (HITL)\n\n**Purpose**: Human-in-the-loop approval queue\n\n**Features**:\n\n- **Proposal Types**: Action, Decision, Change\n- **Actions**: Approve, Deny, Request Changes\n- **Metadata**: Confidence, Evidence, Reasoning\n\n### **5. Digital Twin Panel**\n\n**Purpose**: Proactive AI assistant\n\n**Features**:\n\n- **Proactive Suggestions**: Based on context\n- **Conversational Chat**: Entity 360 context\n- **Action Proposals**: Draft-only or execute\n\n### **6. Policies Panel**\n\n**Purpose**: Governance rules management\n\n**Features**:\n\n- **Policy Types**: Approval, Validation, Notification\n- **Actions**: Create, Edit, Delete, Enable/Disable\n\n---\n\n## π DEPARTMENT WORKBENCH\n\n**Component**: `DepartmentWorkbench.tsx`\n\n**Purpose**: Generic configuration-driven workbench for all departments\n\n**Architecture**:\n\n```typescript\n\n```\n\n**Three Tabs**:\n\n1. **My Department**: Department-specific entities + metrics\n2. **Organization**: Cross-department collaboration\n3. **Personal**: Individual tasks + calendar\n\n**Primitives** (Reusable UI components):\n\n- `MetricTile`: KPI display\n- `EntityCard`: Entity preview with actions\n- `InsightBlock`: AI-generated insight\n- `TimelineStream`: Activity feed\n- `GovernancePanel`: Approval queue\n- `OperationalCanvas`: Configurable dashboard\n- `HealthRing`: Health score visualization\n\n---\n\n## π DATA FLOW (User Action β Backend β UI Update)\n\n### **Example: User Views Account Health**\n\n```\n1. USER ACTION\n User clicks \"Accounts\" in sidebar\n β\n\n2. NAVIGATION\n handleNavigate(\"/work/accounts\")\n setActivePath(\"/work/accounts\")\n navigate(\"/app/work/accounts\")\n β\n\n3. CONTENT ROUTING\n ContentRouter receives:\n - domain: \"CUSTOMER_SUCCESS\"\n - moduleId: \"accounts\"\n β\n Lazy load: csModules.accounts()\n β\n\n4. COMPONENT MOUNT\n mounts\n β\n useSpine DBEntities([\"account\"])\n β\n\n5. API CALL\n apiFetch(\"/api/v1/workspace/entities?type=account\")\n Headers:\n - Authorization: Bearer \n - x-tenant-id: \n - x-view-context: CTX_CS\n β\n\n6. GATEWAY ROUTING\n gateway.integratewise.ai receives request\n β\n Validates JWT β extracts tenant_id\n β\n Routes to BFF service binding\n β\n\n7. BFF (NOT IMPLEMENTED YET)\n Would aggregate:\n - Spine entities (accounts)\n - Signals (at-risk alerts)\n - Knowledge (recent docs)\n - Goals (account goals)\n β\n Falls through to Pipeline service\n β\n\n8. PIPELINE SERVICE\n GET /api/entities?type=account\n β\n Reads from Spine (Spine DB):\n - account_success.accounts table\n - Filters by tenant_id\n - Returns canonical entities\n β\n\n9. RESPONSE\n {\n entities: [\n {\n id: \"acc_123\",\n name: \"Acme Corp\",\n health_score: 85,\n arr: 500000,\n status: \"active\",\n ...\n },\n ...\n ],\n total: 42\n }\n β\n\n10. UI UPDATE\n React Query caches response\n β\n renders:\n - Metric tiles (Total ARR, Active Accounts, At-Risk)\n - Entity cards (Account list with health rings)\n - Filters (Status, Health, ARR range)\n β\n\n11. USER CLICKS ACCOUNT\n onClick={() => navigate(`/work/entity-360?id=acc_123`)}\n β\n\n12. ENTITY 360 VIEW\n Fetches:\n - Entity details (Spine)\n - Related entities (Contacts, Opportunities)\n - Signals (At-risk alerts)\n - Evidence (Source data from HubSpot, Salesforce)\n - Timeline (Activity history)\n - AI Insights (Think panel suggestions)\n β\n\n13. L2 COGNITIVE LAYER\n User presses βJ\n β\n Opens Think Panel\n β\n User: \"What's the churn risk for Acme Corp?\"\n β\n POST /api/v1/cognitive/think\n β\n Intelligence Service:\n - Fetches account + signals\n - Calls OpenRouter\n - Streams response\n β\n Displays: \"Churn risk: 35% (Medium). Evidence: 3 missed meetings, declining usage, contract expires in 60 days.\"\n```\n\n---\n\n## π― KEY USER FLOWS\n\n### **Flow 1: New User Onboarding**\n\n```\n1. Visit app.integratewise.ai\n2. Click \"Sign Up\"\n3. Enter email/password OR Google/GitHub SSO\n4. Onboarding Step 1: Choose use case (Personal/Work/Business)\n5. Onboarding Step 2: Select industry + department + company size\n β Triggers Spine schema initialization\n6. Onboarding Step 3: Define goal + workspace name\n7. Onboarding Step 4: Connect data sources (OAuth)\n β Triggers Creamy Layer sync (100 records)\n8. AI Loader: Watch sync progress\n9. Workplace Loading: Finalize setup\n10. Land in Workspace: Dashboard view\n```\n\n### **Flow 2: Daily Workflow (CS Manager)**\n\n```\n1. Login β Land on Dashboard\n2. See metrics: Total ARR, Active Accounts, At-Risk, Avg Health\n3. Click \"At-Risk\" β Filter to at-risk accounts\n4. Click account \"Acme Corp\" β Entity 360 view\n5. See:\n - Health score: 65 (declining)\n - Signals: 3 missed meetings, declining usage\n - Evidence: HubSpot activity log, Slack messages\n - Timeline: Last 30 days of activity\n6. Press βJ β Open Think Panel\n7. Ask: \"What's the churn risk?\"\n8. AI responds: \"35% risk. Recommend: Schedule executive check-in, review contract terms.\"\n9. Click \"Stage Action\" β Creates proposal\n10. Proposal goes to Approvals Panel (HITL)\n11. Manager approves β Action executes (creates HubSpot task)\n12. Signal dismissed β Dashboard updates\n```\n\n### **Flow 3: Cross-Department Collaboration (BizOps)**\n\n```\n1. Login as BizOps user\n2. Dashboard shows: All departments + cross-dept metrics\n3. Click \"Sales Hub\" β See sales pipeline\n4. Click \"CS Hub\" β See account health\n5. Click \"Marketing Hub\" β See campaign performance\n6. Use Command Palette (βK) β Search \"Acme Corp\"\n7. Entity 360 shows:\n - Sales: 3 open opportunities\n - CS: Health score 65\n - Marketing: 5 campaign touches\n - Finance: $500K ARR, renewal in 60 days\n8. Press βJ β Ask: \"What's our strategy for Acme renewal?\"\n9. AI generates: \"Multi-touch strategy: Sales (upsell), CS (health recovery), Marketing (case study)\"\n10. Stage action β Creates tasks across all 3 departments\n11. Approvals β Each dept manager approves their task\n12. Execution β Tasks created in HubSpot, Asana, Slack\n```\n\n---\n\n## π SECURITY & ENTITLEMENT\n\n### **Authentication**\n\n- **Provider**: Spine DB PKCE\n- **Methods**: Email/Password, Google SSO, GitHub SSO\n- **Session**: JWT stored in browser, auto-refreshed\n- **Headers**: `Authorization: Bearer `\n\n### **Tenant Isolation**\n\n- **Header**: `x-tenant-id` (extracted from JWT)\n- **Database**: Row-level security (RLS) on all Spine DB tables\n- **Spine**: All queries filtered by `tenant_id`\n\n### **Role-Based Access Control (RBAC)**\n\n- **Roles**: Owner, Admin, Manager, Member, Viewer\n- **Projection**: `useProjection()` hook determines:\n - `canAct`: Can execute actions\n - `canApprove`: Can approve proposals\n - `canView`: Can view entities\n- **Entitlement**: Modules hidden if not in user's projection\n\n### **Data Gating**\n\n- **Density Gating**: Hide modules with no data\n- **Schema Gating**: Only show entity types in tenant schema\n- **Projection Gating**: Only show modules user is entitled to\n\n---\n\n## π± RESPONSIVE DESIGN\n\n- **Desktop**: Full sidebar + content + L2 drawer\n- **Tablet**: Collapsible sidebar + content\n- **Mobile**: Bottom nav + full-screen content\n\n---\n\n## β‘ PERFORMANCE OPTIMIZATIONS\n\n1. **Lazy Loading**: All modules loaded on-demand\n2. **Code Splitting**: Separate bundles per domain\n3. **React Query**: Automatic caching + background refetch\n4. **Suspense**: Loading skeletons during fetch\n5. **Error Boundaries**: Graceful failure handling\n6. **Density Gating**: Skip rendering empty modules\n7. **Projection Caching**: Cache entitlement checks\n\n---\n\n## π¨ DESIGN SYSTEM\n\n**Colors**:\n\n- Background: `#F5F6FA`\n- Card: `#FFFFFF`\n- Border: `#E8ECF2`\n- Text Primary: `#1B2544`\n- Text Secondary: `#7B8AAD`\n- Accent: Domain-specific (CS: `#4154A3`, Sales: `#10B981`, etc.)\n\n**Typography**:\n\n- Font: `system-ui, sans-serif`\n- Sizes: 10px (labels), 12px (body), 14px (headings), 16px (titles)\n\n**Spacing**:\n\n- Base unit: 4px\n- Common: 8px, 12px, 16px, 24px, 32px\n\n**Shadows**:\n\n- Card: `0 1px 3px rgba(0,0,0,0.1)`\n- Elevated: `0 4px 12px rgba(0,0,0,0.15)`\n\n---\n\n## π DEPLOYMENT\n\n**Frontend**:\n\n- **Platform**: Cloudflare Pages\n- **Preview**: `https://fa598630.integratewise.pages.dev`\n- **Production**: `app.integratewise.ai` (manual promotion)\n- **Build**: Vite + React + TypeScript\n- **Deploy**: GitHub Actions β Cloudflare Pages\n\n**Backend**:\n\n- **Platform**: Cloudflare Workers (22 services)\n- **Gateway**: `gateway.integratewise.ai`\n- **Services**: Connector, Pipeline, Intelligence, Knowledge, BFF, L2\n- **Database**: Spine DB (Neon Postgres)\n- **Cache**: Cloudflare KV + D1\n\n---\n\n**END OF USER FLOW AND VIEW ARCHITECTURE**\n"}