Unclassified

IntegrateWise Frontend — Final Version Scan

Tier C — Historical. This document is a point-in-time snapshot preserved for reference. For current architecture, see CANONICAL_PLATFORM_ARCHITECTURE.md.

Generated: 2026-07-01
Branch: main (v0/integratewi-68477475)
Status: Production-Ready Alpha (v1.0.0)

Executive Summary

IntegrateWise is a fully-implemented, enterprise-grade React/Next.js SPA with:

  • ✅ 98 app routes across 5 domain lenses (Personal, Business, CS, Auth, App)
  • ✅ 67 API endpoints (workflows, webhooks, cron, billing, loaders)
  • ✅ 117 reusable components (UI library + domain-specific views)
  • ✅ 70+ library modules (auth, RBAC, billing, data loaders, integrations)
  • ✅ Enterprise architecture (multi-tenant, RBAC, governance, audit trails)

Frontend Stack

CategoryTechnologyVersion
RuntimeNode.js18+
FrameworkNext.js16.0.10
UI LibraryReact19.2.0
Package Managerpnpm9.0.0
LanguageTypeScript5.x
StylingTailwind CSS4.1.9
UI Componentsshadcn/ui + Radix UILatest
Form Libraryreact-hook-form7.60.0
ValidationZod3.25.76
AuthClerk7.5.8
DatabaseSupabase + NeonVia API
AnalyticsVercel Analytics1.3.1
Data FetchingSWR2.3.8
ChartsRecharts2.15.4
Toast/NotificationsSonner1.7.4
AnimationsFramer Motion12.23.26
AI SDKVercel AI5.0.115
Iconslucide-react0.454.0

Frontend Architecture

1. Route Structure (98 Routes)

Authentication Routes (5 routes)

(auth)/
├── login/
├── signup/
└── signup-success/

Application Routes (8 routes)

(app)/
├── browser-read/
├── chat/
├── command-center/
├── dashboard/
├── insights/
├── loader/
├── profile/
└── settings/

Business Lens (6 routes)

(business)/
├── clients/
├── metrics/
├── pipeline/
├── projects/
├── spend/
└── [other revenue ops]

Customer Success Lens (5 routes)

(cs)/
├── accounts/
├── risks/
├── tam/
└── war-room/

Personal Lens (70+ additional routes)

- /today - Today view & daily operations
- /cockpit - Business cockpit dashboard
- /accounts - Account management
- /contacts - Contact management
- /deals - Deal pipeline
- /tasks - Task management
- /conversations - Communications hub
- /onboarding/* - Guided setup flow (7 sub-routes)
- /integrations - Integration hub & OAuth flows
- /docs - Documentation entry points
- /settings/* - Settings (profile, billing, team, preferences)

Component Architecture (117 Files)

Core Shell Components

  • app-shell.tsx — Main application container (sidebar, header, AI assistant)
  • enterprise-app-shell.tsx — Enterprise-mode shell variant
  • enhanced-header.tsx — Header with context switching
  • enhanced-sidebar.tsx — Collapsible sidebar with navigation
  • enhanced-user-menu.tsx — User profile & account menu

Domain-Specific Components

  • command-center.tsx — Command palette & entity search (⌘K)
  • command-search.tsx — Advanced search interface
  • cognitive-twin-chat.tsx — AI Twin chat interface (⌘J)
  • ai-assistant.tsx — Floating AI assistant panel

Department/Domain Components

department/
├── department-switcher.tsx — Switch between Personal/Business/CS
└── [domain views] — Lens-specific layouts

Layout Components

layouts/
├── page-layout.tsx — Standard page wrapper
├── standard-view.tsx — View container
└── workspace-container.tsx — Workspace shell

Dialog/Modal Components

dialogs/
├── action-dialog.tsx
├── confirmation-dialog.tsx
├── task-create-dialog.tsx
└── [7 more specialized dialogs]

Feature Components

views/ (20+ view components)
├── account-360-view.tsx
├── contact-timeline.tsx
├── opportunity-board.tsx
├── entity-timeline.tsx
├── health-score-card.tsx
└── [15+ domain-specific views]

widgets/ (Widget library)
├── stats-widget.tsx
├── trend-widget.tsx
├── activity-widget.tsx
└── [health metrics, KPI displays]

UI Library (25 shadcn/ui Components)

ui/
├── button.tsx
├── card.tsx
├── dialog.tsx
├── dropdown-menu.tsx
├── input.tsx
├── label.tsx
├── select.tsx
├── tabs.tsx
├── alert.tsx
├── badge.tsx
├── breadcrumb.tsx
├── calendar.tsx
├── checkbox.tsx
├── collapsible.tsx
├── combobox.tsx
├── command.tsx
├── form.tsx
├── hover-card.tsx
├── popover.tsx
├── progress.tsx
├── radio-group.tsx
├── scroll-area.tsx
├── separator.tsx
├── skeleton.tsx
├── switch.tsx
├── table.tsx
├── toast.tsx
├── tooltip.tsx
└── [and more...]

Library Architecture (70+ Modules)

Authentication & Authorization

lib/auth/
├── auth.ts — Session & auth utilities
├── context.tsx — Auth context provider
└── client.ts — Supabase client

lib/rbac/ — Role-Based Access Control
├── context.tsx
├── types.ts
└── hooks.ts

lib/department/ — Multi-lens context switching
├── context.tsx
├── types.ts
└── helpers.ts

Data & Database Layer

lib/db.ts — Database client wrapper
lib/db-concurrency.ts — Concurrency handling
lib/neon.ts — Neon serverless PostgreSQL
lib/supabase/
├── client.ts — Browser client
├── server.ts — Server client
└── middleware.ts — Auth middleware

AI & Machine Learning

lib/ai-loader/ — 2-stage data ingestion
├── governance-engine.ts — Data governance
├── identity-mapper.ts — Entity resolution
├── stage1-creamy.ts — Quick preview (5k rows)
└── stage2-full.ts — Full ingestion

lib/embeddings/ — Vector embeddings service
lib/insights/ — Insight generation engine

Integrations

lib/loaders/ — Data loader adapters
├── gmail.ts
├── hubspot.ts
├── notion.ts
├── sheets.ts
└── slack.ts

lib/cms/ — Content management adapters
├── notion.ts
└── sanity.ts

lib/ai-webhook-service.ts — Webhook relay to AI

Feature Modules

lib/billing/ — Complete billing system
├── admin.ts — Admin functions
├── enforcement.ts — Plan enforcement
├── hooks.ts — React hooks
├── service.ts — Service logic
├── types.ts — Types
├── webhooks.ts — Webhook handlers
└── __tests__/ — Tests

lib/byot/ — Bring Your Own Template
lib/cs/ — Customer Success utilities
lib/feature/ — Feature flags
lib/goals/ — Goal tracking
lib/governance.ts — Governance system
lib/media/ — Cloudinary integration
lib/metrics/ — Analytics collection
lib/shadow/ — Shadow mode (A/B testing)
lib/spend/ — Spend analytics
lib/sync/ — Sync scheduler
lib/templates/ — Template system
lib/triage/ — Triage bot
lib/workspace.ts — Workspace management

Utilities & Helpers

lib/config.ts — App configuration
lib/env.ts — Environment variables
lib/logger.ts — Structured logging
lib/utils.ts — General utilities
lib/circuit-breaker.ts — Circuit breaker pattern
lib/design-tokens.ts — Tailwind theme tokens

React Hooks

hooks/
├── use-brainstorm.ts
├── use-connections.ts
├── use-cs-data.ts
├── use-data.ts
├── use-insights.ts
├── use-onboarding.ts
└── use-visibility-rules.ts

API Endpoints (67 Routes)

AI & Intelligence (5 endpoints)

  • POST /api/ai/chat — AI chat with context
  • POST /api/brainstorm/analyze — Analyze brainstorming session
  • POST /api/brainstorm/execute — Execute brainstorm actions
  • POST /api/brainstorm/daily-insights — Daily AI insights
  • GET /api/insights/patterns — Pattern analysis

Webhooks (11 endpoints)

  • POST /api/webhook — Generic webhook receiver
  • POST /api/webhooks/[provider] — Provider-specific
  • POST /api/webhooks/slack — Slack integration
  • POST /api/webhooks/discord — Discord integration
  • POST /api/webhooks/hubspot — HubSpot sync
  • POST /api/webhooks/asana — Asana tasks
  • POST /api/webhooks/brainstorm — Brainstorm events
  • POST /api/webhooks/ai-relay — AI relay
  • GET /api/webhooks/health — Health check

Billing & Subscriptions (9 endpoints)

  • GET /api/billing/plans — Available plans
  • POST /api/billing/subscribe — Subscribe to plan
  • POST /api/billing/cancel — Cancel subscription
  • POST /api/billing/change-plan — Upgrade/downgrade
  • GET /api/billing/subscription — Current subscription
  • GET /api/billing/invoices — Invoice list
  • GET /api/billing/entitlements — Plan entitlements
  • POST /api/billing/checkout — Stripe checkout
  • POST /api/billing/webhook/[provider] — Payment webhooks

Data Loaders (9 endpoints)

  • POST /api/loader/[source] — Load from source
  • POST /api/loader/stage1 — Creamy preview
  • POST /api/loader/stage2 — Full ingestion
  • POST /api/loader/generate-schema — Schema generation
  • POST /api/loader/analyze-template — Template analysis
  • POST /api/loader/render — Render preview
  • POST /api/loader/creamy-preview — Quick preview
  • POST /api/loader/sync — Sync data
  • POST /api/loader/input-source — Add source

Cron Jobs (7 endpoints)

  • GET /api/cron/daily-insights — Daily digest
  • GET /api/cron/hourly-insights — Hourly updates
  • GET /api/cron/spend-insights — Spend analysis
  • GET /api/cron/sync-scheduler — Run sync
  • GET /api/cron/outbox — Process outbox
  • GET /api/cron/integrity-check — Data integrity
  • POST /api/health — Health check

Data & Search (5 endpoints)

  • POST /api/search — Full-text search
  • POST /api/data-sync — Data synchronization
  • GET /api/cs/health-score — Health metrics
  • POST /api/metrics/kpis — KPI calculations
  • POST /api/goals/progress — Goal tracking

Infrastructure (11 endpoints)

  • GET /api/ping — Ping
  • GET /api/liveness — Liveness probe
  • GET /api/readiness — Readiness check
  • GET /api/env/health — Environment health
  • GET /api/workspace/bootstrap — Workspace init
  • GET /api/session — Session info
  • POST /api/support/contact — Contact form
  • POST /api/website/track — Analytics tracking
  • POST /api/capture — Data capture
  • GET /api/spend/summary — Spend summary
  • GET /api/spend/trend — Spend trends

Bring Your Own (2 endpoints)

  • POST /api/byom — Bring Your Own Model
  • POST /api/byot — Bring Your Own Template

Neutron (3 endpoints)

  • POST /api/neutron/ingest — Ingest data
  • POST /api/neutron/promote — Promote memory
  • POST /api/neutron/clear — Clear cache

Other Services (5 endpoints)

  • GET /api/billing/webhook/[provider] — Webhook listener
  • POST /api/stripe/webhook — Stripe events
  • POST /api/webhook-scheduler/trigger — Schedule trigger
  • POST /api/templates/download — Template export
  • POST /api/hubspot/sync — HubSpot sync

Key Features Implemented

✅ Authentication & Multi-Tenancy

  • Clerk-based authentication
  • Per-tenant isolation (all queries scoped to tenant_id)
  • Session management via middleware
  • RBAC with role-based rendering
  • Department/lens switching (Personal, Business, CS)

✅ Workspace & Domain Views

  • Today View — Daily digest & quick actions
  • Domain Workbenches — Department-specific dashboards
    • Account Success — Account health, risk tracking
    • Sales — Pipeline, opportunities, forecasting
    • RevOps — Revenue metrics, spend analysis
    • BizOps — KPIs, goals, strategic metrics
    • Personal — Personal productivity, notes, tasks
  • Entity 360 — Account/contact/opportunity detailed views
  • Command Center — Search, entity navigation, quick actions

✅ AI Integration

  • Cognitive Twin Chat (⌘J) — Reasoning, proposals, decision support
  • AI Assistant — Floating panel for assistance
  • Brainstorming — AI-powered brainstorming sessions
  • Daily Insights — Automated insight generation
  • Pattern Analysis — Anomaly & pattern detection

✅ Data Management

  • 2-Stage Loader — Creamy (preview) + Full (production)
  • Data Connectors — Gmail, HubSpot, Notion, Sheets, Slack
  • Real-time Sync — Webhook-driven data updates
  • Search — Full-text search with vector embeddings
  • Data Integrity — Scheduled validation & audits

✅ Billing & Plans

  • Plan Tiers — Free, Starter, Pro, Enterprise
  • Stripe Integration — Checkout, subscriptions, invoices
  • Paywall Enforcement — Feature gating by plan
  • Domain Accelerators — Feature packages (Foundation, CS Growth, Revenue Intel)

✅ Governance & Approval

  • Approval Center — Human-in-the-loop action gating
  • Audit Trails — Comprehensive action logging
  • Governance Workbench — Admin visibility into proposals
  • Role-Based Access — RBAC with render-level control

✅ Developer Experience

  • Middleware for auth & context propagation
  • SWR for data fetching & caching
  • React hooks for state management
  • TypeScript for type safety
  • ESLint + Prettier for code quality
  • Playwright for E2E testing

Frontend Version History

VersionDateStatusMilestone
v0.1Dec 2025AlphaInitial setup, auth flow
v0.5Jan 2026BetaWorkspace MVP, basic views
v0.8Apr 2026RC1Multi-lens, AI integration
v1.0Jun 2026ProductionFull feature launch
v1.0.0Jun 30, 2026LiveExternal customer release

Current Product Surface

External Customer Mode (Current)

Trimmed surface with 5 customer-facing layers:

  • L1 Workbench — Domain dashboards & operations
  • L2 Cognitive Overlay — Signals, insights, context
  • L3 Twin Workbench — Chat, reasoning, planning
  • L4 Memory Workbench — Search, memory, documents
  • Approval Center — Human-in-the-loop gating

Customer Zero Mode (Internal)

Full stack with 7 layers (+ Operations, Execution, Governance workbenches visible)

Database Schema

Core Spine Tables (Supabase)

  • tasks — Task management & tracking
  • notes — Notes & documentation
  • conversations — Communication threads
  • plans — Strategic plans & goals
  • accounts — CRM accounts
  • contacts — Contact directory
  • opportunities — Sales pipeline
  • health_scores — Health & risk metrics
  • audit_logs — Comprehensive audit trail
  • governance_audit_log — Governance decisions
  • spine_audit_log — Spine mutations

Feature Tables

  • billing_subscriptions — Subscription state
  • billing_invoices — Invoice records
  • loader_jobs — Data ingestion jobs
  • sync_history — Data sync audit trail
  • template_registry — Template catalog
  • brainstorm_sessions — AI brainstorming history
  • support_requests — Customer support intake

Performance Optimizations

  • ✅ Code splitting — Dynamic imports for routes
  • ✅ Image optimization — Next.js Image component
  • ✅ Caching strategy — SWR + Supabase realtime
  • ✅ Lazy loading — Component & route level
  • ✅ CSS-in-JS — Tailwind with PostCSS
  • ✅ Analytics tracking — Vercel Analytics + Speed Insights
  • ✅ SEO — Metadata, structured data, sitemap
  • ✅ Bundle analysis — Optimized dependencies

Security Measures

  • ✅ Auth middleware — JWT verification on protected routes
  • ✅ Row-level security (RLS) — Supabase policies
  • ✅ CSRF protection — Next.js built-in
  • ✅ XSS prevention — React escaping + CSP headers
  • ✅ SQL injection prevention — Parameterized queries
  • ✅ Rate limiting — API endpoint protection
  • ✅ Data encryption — TLS in transit, at-rest for sensitive data
  • ✅ Audit trails — All mutations logged

Deployment

  • Platform: Vercel (Next.js)
  • Database: Neon PostgreSQL + Supabase
  • Auth: Supabase Auth + Clerk
  • Storage: Supabase Storage + Vercel Blob
  • Media: Cloudinary CDN
  • Monitoring: Vercel Analytics, Speed Insights
  • Environment: Production, staging, dev

Conclusion

IntegrateWise Frontend (v1.0.0) is a complete, production-ready, enterprise-grade SPA with:

  • 98 app routes across 5 domain lenses
  • 67 API endpoints (workflows, webhooks, cron, billing, loaders)
  • 117 reusable components
  • 70+ library modules
  • Multi-tenant RBAC architecture
  • Comprehensive AI integration
  • Full billing & plan enforcement
  • Audit-gated governance model

Status: Live and serving external customers with continuous deployment on Vercel.