replit.md

AI Call Operations Manager Dashboard

Overview

This is a real-time AI call operations monitoring dashboard built with React and Express. The application provides a three-panel interface for monitoring AI agents handling customer calls, viewing live call details with transcripts, and managing customer profiles with personalized offers. The dashboard follows Carbon Design System principles optimized for data-heavy enterprise monitoring interfaces.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

• Framework: React 18 with TypeScript
• Routing: Wouter (lightweight client-side router)
• State Management: TanStack React Query for server state with automatic refetching (5-second intervals for dashboard data, 3-second for transcripts)
• UI Components: Shadcn/ui component library built on Radix UI primitives
• Styling: Tailwind CSS with custom CSS variables for theming (light/dark mode support)
• Build Tool: Vite with HMR support

Backend Architecture

• Framework: Express.js with TypeScript
• HTTP Server: Node.js createServer wrapping Express for WebSocket compatibility
• API Pattern: RESTful endpoints under /api/ prefix
• Data Layer: In-memory storage (MemStorage class) with interface abstraction (IStorage) for easy database swap

Three-Panel Dashboard Layout

• Left Panel (320px): AI Agent tiles showing status, active call counts, and mini call cards
• Middle Panel (flexible): Call detail view with live timer, soundwave indicators, transcript, and timeline
• Right Panel (384px): Customer profile, personalized offers, and interaction summary

Data Models

Core entities defined in shared/schema.ts using Drizzle ORM:

• Agents: AI agents with status tracking (active/waiting/issue)
• Calls: Active calls with sentiment scores, upsell tracking, speaker identification
• Customers: Customer profiles with tier levels and engagement scores
• Offers: Personalized offers with priority rankings
• TranscriptMessages: Real-time conversation logs
• TimelineEvents: Call interaction milestones

API Endpoints

• GET /api/dashboard - Aggregated dashboard data (agents, calls, customers, offers, KPIs)
• GET /api/agents - List all agents
• GET /api/agents/:id - Single agent details
• GET /api/calls/:id/transcript - Call transcript messages
• GET /api/calls/:id/timeline - Call timeline events

Build System

• Development: Vite dev server with HMR, proxied through Express
• Production: esbuild bundles server code, Vite builds client to dist/public
• Database Migrations: Drizzle Kit with PostgreSQL dialect

External Dependencies

Database

• PostgreSQL: Primary database (configured via DATABASE_URL environment variable)
• Drizzle ORM: Type-safe database queries with Zod schema validation
• connect-pg-simple: Session storage (available but not currently active)

UI Framework

• Radix UI: Accessible component primitives (dialog, dropdown, tabs, tooltips, etc.)
• Lucide React: Icon library
• Embla Carousel: Carousel component
• Recharts: Data visualization charts
• class-variance-authority: Component variant management

Development Tools

• Replit Plugins: Runtime error overlay, cartographer, dev banner (development only)
• TypeScript: Strict mode enabled with path aliases (@/, @shared/, @assets/)

Fonts

• Inter: Primary UI font (Google Fonts)
• JetBrains Mono: Monospace font for timestamps, call IDs, metrics