Call Center Intelligence Assistant
Expert assistant for the Call Center Intelligence Control Tower - a Next.js prototype for unified call center case management with social-media style live feed, trending topics, smart alerts, semantic search, and management sharing/escalation workflows.
Project Architecture
Tech Stack
**Framework**: Next.js 14+ (App Router) with React 19**Database**: SQLite with Drizzle ORM (`lib/db/schema.ts`)**Styling**: Tailwind CSS v4**i18n**: next-intl with English and Thai locales (`messages/en.json`, `messages/th.json`)**Real-time**: SSE or polling (configurable via `contexts/RealtimeContext.tsx`)Key Directories
`app/[locale]/` - Locale-prefixed pages (en, th)`app/api/` - API routes (REST endpoints)`components/feed/` - Live feed cards (Alert, Trending, Highlight, Upload)`components/pulse/` - Real-time sidebar (KPI tiles, sparklines, word cloud)`components/chat/` - Chat assistant drawer`components/cases/` - Case list and detail components`components/alerts/` - Alert components`contexts/` - React context providers (FilterContext, DemoModeContext, RealtimeContext)`lib/db/` - Database schema and connectionCore Routes (all with `/[locale]` prefix)
`/home` - Live Feed + Pulse sidebar + Search + Chat drawer`/alerts` & `/alerts/:id` - Alert list and detail`/cases` & `/cases/:id` - Case list and detail with timeline`/uploads` - Upload interface with history`/inbox` - Received shares and escalations`/search` - Semantic search results`/trending` - Trending topics analysisInstructions for Development
1. Environment Setup
Database file: `data/call-center.db`Database schema: `lib/db/schema.ts`Core tables: `users`, `cases`, `alerts`, `trendingTopics`, `feedItems`, `shares`, `uploads`, `searchAnalytics`2. Working with Code
**Before making changes:**
Read `lib/db/schema.ts` to understand database structureCheck locale files (`messages/en.json`, `messages/th.json`) for i18n keysReview context providers in `contexts/` directoryUnderstand that app wraps pages with FilterProvider, DemoModeProvider, and RealtimeProvider**When implementing features:**
Follow Next.js App Router conventionsKeep components small and focusedUse Tailwind CSS for stylingEnsure TypeScript strict mode complianceSupport both English and Thai localesConsider user roles: PM/PO (Admin), BU Manager, Call Center Supervisor**Database operations:**
Use Drizzle ORM patterns from existing codeTypes are exported from schema (e.g., `Case`, `Alert`, `NewCase`)Run `npm run db:push` after schema changesRun `npm run db:seed` to regenerate mock data3. Available Commands
```bash
Development
npm run dev # Start dev server (http://localhost:3000)
npm run build # Build for production
npm run typecheck # TypeScript type checking
npm run lint # ESLint
Database
npm run db:seed # Seed with ~2k mock cases
npm run db:push # Push schema changes
npm run db:studio # Open Drizzle Studio
npm run compute-alerts # Run alert computation
Ralph flowchart (optional)
cd ralph/flowchart && npm run dev
```
4. Code Quality Requirements
**Must pass before commits:**
`npm run typecheck` - No TypeScript errors`npm run lint` - No ESLint errorsTypeScript strict mode requiredFollow existing code patterns5. Ralph Autonomous Development Loop
Ralph is an autonomous AI agent for implementing PRD stories.
**Files:**
`ralph/ralph.sh` - Bash loop spawning AI agent instances`ralph/prd.json` - User stories with `passes` status`ralph/progress.txt` - Append-only learnings log**Running Ralph:**
```bash
./ralph/ralph.sh [max_iterations]
```
**Ralph Workflow:**
1. Picks highest priority story with `passes: false`
2. Implements ONE story per iteration
3. Runs quality checks (typecheck, lint)
4. Commits if passing: `feat: [Story ID] - [Story Title]`
5. Updates `prd.json` to mark story done
6. Appends learnings to `progress.txt`
**When working with Ralph:**
Focus on ONE story at a timeUpdate `prd.json` status after implementationDocument learnings in `progress.txt`Follow commit message format: `feat: [Story ID] - [Story Title]`6. Key Implementation Patterns
**Real-time updates:**
Check `contexts/RealtimeContext.tsx` for SSE vs polling modeUse demo mode via `DemoModeContext` for deterministic timestamps**Filtering:**
Global filter state managed via `FilterContext`Filters can be set from chat commands or UI**Chat intents:**
Parse commands in `lib/chatIntents.ts`Generate responses in `lib/chatResponses.ts`**Multi-locale support:**
All user-facing strings must exist in both `messages/en.json` and `messages/th.json`Use next-intl hooks (`useTranslations`) in componentsConstraints
This is a **prototype with mock data** (~2k seeded cases in SQLite)Do not add real API integrations without explicit requestMaintain existing context provider structurePreserve locale routing structureKeep TypeScript strict mode complianceSupport both SSE and polling modes for real-time updatesExamples
**Adding a new feed card type:**
1. Create component in `components/feed/`
2. Export from `components/feed/FeedCard.tsx`
3. Add type to `feedItems` schema if needed
4. Update feed rendering logic in `/home` page
**Adding a new locale string:**
1. Add key to `messages/en.json`
2. Add translation to `messages/th.json`
3. Use `useTranslations()` hook to access in component
**Implementing a Ralph story:**
1. Read story from `ralph/prd.json`
2. Implement changes
3. Run `npm run typecheck && npm run lint`
4. Commit with format: `feat: [Story ID] - [Story Title]`
5. Update story `passes: true` in `prd.json`
6. Document learnings in `ralph/progress.txt`