DLC-AI-2

As a frontend developer, implement the Navbar section for the Login page. The component (may already exist from the Landing page) uses useState for mobile menu toggle (`open` state), renders the `nv-root` nav with `nv-inner` containing: a brand link with `AudioLines` lucide icon and DLC-AI-2 wordmark, a `NAV_LINKS` array mapped to `nv-links` list items, an `nv-actions` block with SSO enabled badge (`nv-sso-dot` indicator), a Staff Sign In CTA with `ArrowRight` icon, and a burger button with `is-open` class toggle. Mobile drawer (`nv-mobile`) renders mapped nav links with `closeMenu` onClick, a `ShieldCheck` SSO notice, and mobile CTA. Import `AudioLines`, `ShieldCheck`, `ArrowRight` from lucide-react and `Navbar.css`.

As a Backend Developer, implement user management REST API endpoints using FastAPI and MySQL/MariaDB. Endpoints: GET /users (list with pagination/search/filter), POST /users (create), GET /users/{id}, PUT /users/{id}, DELETE /users/{id}, POST /users/{id}/activate, POST /users/{id}/deactivate, POST /users/{id}/resend-invite, GET /roles (list), POST /roles, PUT /roles/{id}. Include bulk action endpoints: POST /users/bulk-activate, POST /users/bulk-deactivate. Enforce RBAC — only Admins can manage users. Referenced by FR-15. Note: frontend tasks UserManagementTable, UserManagementForm, UserManagementHeader, UserManagementRoles depend on this API.

As a Backend Developer, implement the questionnaire engine REST API using FastAPI. Endpoints: GET /questionnaires (list with filters), POST /questionnaires (create), GET /questionnaires/{id}, PUT /questionnaires/{id}, DELETE /questionnaires/{id}, POST /questionnaires/{id}/publish, POST /questionnaires/{id}/archive, POST /questionnaires/{id}/duplicate, GET /questionnaires/{id}/versions, POST /questionnaires/{id}/rollback, GET /questionnaires/{id}/questions, POST /questionnaires/{id}/questions, PUT /questionnaires/{id}/questions/{qid}, DELETE /questionnaires/{id}/questions/{qid}. Support full branching logic, conditional routing, skip logic, and response types (radio, checkbox, text, date, numeric). Version control per questionnaire. Referenced by FR-04, FR-05, FR-07, FR-08. Note: frontend tasks QBEditor, QBLibrary, QBCreateNew, QBPublish, QuestionnaireForm depend on this API.

As a Backend Developer, implement the voice agent REST API using FastAPI. Endpoints: GET /voice-agent/status, GET /voice-agent/metrics (live stats: calls in queue, avg wait, escalation rate, voicemails), GET /voice-agent/health-indicators, POST /voice-agent/sessions (start new call session), GET /voice-agent/sessions/{id}, PUT /voice-agent/sessions/{id} (update session state), POST /voice-agent/sessions/{id}/escalate, GET /voice-agent/realtime-queue (pending calls, voicemail callbacks, escalations). Include WebSocket endpoint /ws/voice-agent for real-time metrics push. Referenced by FR-01, FR-02, FR-03. Note: frontend tasks VoiceAgentStats, VoiceAgentHero, LiveMetricsDashboard, RealtimeCallQueue, ActiveQuestionnaireSection, EscalationIndicators depend on this API.

As a Backend Developer, implement the call logs REST API using FastAPI and MySQL/MariaDB. Endpoints: GET /calls (list with pagination, search, sort, filter by status/urgency/date range), GET /calls/{id} (detail with transcript, timeline, AI summary), GET /calls/{id}/transcript, GET /calls/{id}/recording (presigned URL), GET /calls/{id}/summary, POST /calls/{id}/export, GET /calls/export (CSV export). Support filters: status (completed/in-progress/missed/voicemail/escalated/transferred), urgency (critical/high/medium/low), matter type, date range. Comply with 6-year retention policy. Referenced by FR-12. Note: frontend tasks CallLogsTable, CallLogsFilterBar, CallLogsHeader, CallLogsDetail depend on this API.

As a Backend Developer, implement the escalation queue REST API using FastAPI. Endpoints: GET /escalations (list with filters: matter type, urgency, status, date range, search), GET /escalations/{id} (detail with context summary, Q&A, urgency flags, AI notes), POST /escalations/{id}/accept, POST /escalations/{id}/decline, POST /escalations/{id}/message, GET /escalations/metrics (queue depth, avg wait, active count, critical count), WebSocket /ws/escalations for real-time queue updates. POST /escalations/{id}/warm-transfer (initiate warm transfer flow with context handoff). Referenced by FR-06, FR-09. Note: frontend tasks EscalationQueueList, EscalationQueueDetail, EscalationQueueHeader, EscalationQueueFilters, EscalationQueue, ContextSummary, WarmTransferFlow depend on this API.

As a Backend Developer, implement the voicemail and callback scheduling REST API using FastAPI. Endpoints: GET /voicemails (list with filters: status, urgency, date range, sort), GET /voicemails/{id} (detail with transcript, audio URL), POST /voicemails/{id}/schedule-callback (date, time, assignee, type, notes), PUT /voicemails/{id} (update status), DELETE /voicemails/{id}, POST /voicemails/bulk-resolve, GET /voicemails/stats (total, urgent, scheduled counts, avg duration), GET /callbacks (list scheduled), PUT /callbacks/{id}. Referenced by FR-10. Note: frontend tasks VoicemailMessageList, VoicemailCallbackScheduler, VoicemailStats, VoicemailPageHeader, VoicemailActions depend on this API.

As a Backend Developer, implement the CMS (Indigo) integration REST API using FastAPI. Endpoints: GET /cms/matters (list synced matters with search/filter/pagination), GET /cms/matters/{id}, POST /cms/matters (create matter from intake), PUT /cms/matters/{id} (sync/update), DELETE /cms/matters/{id}/unlink, POST /cms/matters/{id}/sync, GET /cms/status (health cards: server uptime, sync latency, error rate, last sync), GET /cms/logs (connection log feed), GET /cms/field-mappings, PUT /cms/field-mappings, GET /cms/sync-history, POST /cms/sync (trigger manual sync), GET /cms/connectors. Implement bi-directional sync logic and conflict resolution. Store SQL call logs. Referenced by FR-11, FR-12. Note: frontend tasks CMSMatterList, CMSIntegrationStatus, CMSDataSync depend on this API.

As a Backend Developer, implement the alerts and threshold configuration REST API using FastAPI. Endpoints: GET /alerts (active alerts list with filters: severity, type, date range, search), PUT /alerts/{id}/acknowledge, PUT /alerts/{id}/dismiss, PUT /alerts/{id}/resolve, GET /alerts/history (paginated history with search/sort), GET /alerts/thresholds (current threshold config by category: sla, volume, health, quality), PUT /alerts/thresholds (save threshold config), POST /alerts/thresholds/{category}/reset, WebSocket /ws/alerts for real-time alert push. Alert types: sla_breach, call_volume_spike, escalation_delay, system_health, transcription_error. Referenced by FR-14. Note: frontend tasks ActiveAlerts, AlertsFilters, AlertsHistory, ThresholdConfig, AlertsHeader, AlertsPanel depend on this API.

As a Backend Developer, implement the voice agent scripts management REST API using FastAPI. Endpoints: GET /scripts (list with category filter and search), GET /scripts/{id}, POST /scripts (create), PUT /scripts/{id} (edit), DELETE /scripts/{id}, POST /scripts/{id}/duplicate, POST /scripts/publish (publish new version), GET /scripts/versions (version history list), POST /scripts/versions/{id}/rollback, POST /scripts/reset-default, POST /scripts/export (CSV), GET /scripts/variables (available template variables list). Support script categories: greeting, voicemail, escalation, closing, intake. Referenced by FR-01, Section 3 Portal. Note: frontend tasks ScriptsBrowser, ScriptsEditor, ScriptsPreview, ScriptsActions, ScriptsHero depend on this API.

As a Backend Developer, implement the audit trail REST API using FastAPI and MySQL/MariaDB. Endpoints: GET /audit (paginated list with filters: search, date range, user, change type), GET /audit/{id} (entry detail with before/after JSON), POST /audit/{id}/rollback (with reason field, validates permissions), GET /audit/stats (total changes, rollbacks, active users stats). Auto-log all configuration changes (questionnaires, scripts, users, thresholds) via middleware hook. Retain all audit entries indefinitely. Enforce RBAC — rollback restricted to Admins. Referenced by FR-16. Note: frontend tasks AuditTrailTimeline, AuditTrailFilters, AuditTrailRollback, AuditTrailHero depend on this API.

As a DevOps Engineer, implement the CI/CD pipeline for DLC-AI-2. Configure GitHub Actions (or equivalent) workflows for: (1) frontend — lint, build, test, Docker image build and push to registry; (2) backend — pytest unit/integration tests, Docker image build and push; (3) database — Alembic migration validation; (4) deployment — automated deploy to staging on merge to main, manual approval gate for production deploy. Integrate with existing Kubernetes cluster (k8s deployment chart already exists). Add environment-specific configuration (dev/staging/prod) via environment secrets. Set up vulnerability scanning (Trivy or Snyk) in pipeline. Ensure all secrets managed via Kubernetes Secrets or equivalent vault. Pipeline must support on-premise UK data centre deployment.

As a frontend developer, implement the LoginHero section for the Login page. Uses `useRef` (mountRef) and `useEffect` to mount a Three.js WebGL scene onto a `lh-three-wrap` div. Creates a `THREE.PerspectiveCamera` (fov 45, position z=10) and `THREE.WebGLRenderer` with alpha and antialias. Adds three `THREE.Mesh` objects using shared `THREE.SphereGeometry(1, 52, 52)` with `MeshBasicMaterial` in wireframe mode: mesh1 (blue 0x3B82F6, opacity 0.07, scale 2.4/1.6/1.8), mesh2 (dark blue 0x1E3A8A, opacity 0.05, scale 1.8/2.2/1.6), mesh3 (green 0x10B981, opacity 0.06, scale 1.4/1.2/1.3). Animation loop uses `performance.now() * 0.00025` for time-based rotation increments per mesh axis. Includes resize handler updating renderer size and camera aspect. Cleanup cancels animation frame, removes resize listener, disposes renderer/materials/geometry, and removes canvas from DOM. JSX renders `lh-root` section with `lh-three-wrap` (aria-hidden), `lh-glow`, and `lh-glow-bottom` decorative divs plus hero text content.

As a frontend developer, implement the LoginForm section for the Login page. Uses multiple useState hooks: `showCredentials` (boolean toggle for email/password collapse), `email`, `password`, `remember` (checkbox), `showPassword` (Eye/EyeOff toggle), `error` (global error string), `fieldErrors` ({email, password} inline validation). Implements `validateEmail` (regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/) and `validatePassword` (min 6 chars) functions. Handlers `handleEmailChange` and `handlePasswordChange` do inline re-validation only when prior errors exist. `handleSubmit` prevents default, runs both validators, sets fieldErrors, short-circuits on errors, otherwise sets global error 'Invalid email or password...' (simulated auth failure). Renders `lf-card` with: SSO primary button (`Shield` icon, `lf-sso-btn`), hint paragraph, `lf-divider` with 'or' label, collapsible toggle button with `ChevronDown` and `is-open` class, and `lf-credentials` div (toggled by `showCredentials`) containing email field with `Mail` icon, password field with `Lock` icon and `Eye`/`EyeOff` show-toggle, remember-me checkbox, global error alert with `AlertTriangle`, and submit button. Import `LoginForm.css`.

As a frontend developer, implement the LoginSupport section for the Login page. Stateless functional component rendering `ls-root` section with `ls-inner` container. Includes a `ls-divider` decorative element followed by `ls-cards` grid with three cards: (1) `ls-card--help` card with `HelpCircle` icon, 'Need help?' heading, description text, and `helpLinks` array mapped to `ls-card-link` anchors each with `ArrowRight` icon (links to Knowledge Base, Contact IT Support, Reset Password); (2) `ls-card--signup` card with `UserPlus` icon, 'New to DLC-AI-2?' heading, and `signupLinks` array (Request an Account → /Register, Staff Onboarding Guide, Platform Overview); (3) `ls-card--status` card with `Activity` icon and 'System Status' heading showing platform health badge. Import `HelpCircle`, `UserPlus`, `Activity`, `ArrowRight`, `ExternalLink` from lucide-react and `LoginSupport.css`.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page. Stateless functional component using `new Date().getFullYear()` for dynamic copyright year. Renders `ftr-root` footer with: `ftr-glow` decorative element (aria-hidden), `ftr-inner` containing `ftr-brand-block` (Scale icon at size 20 strokeWidth 2.2, brand name 'DLC-AI-2', tagline paragraph about AI-powered inbound voice agent), and `ftr-cols` grid with three columns — Platform (`platformLinks` array: Sign In, Intake Workflows, Questionnaire Builder, Operational Dashboard), Legal (`legalLinks` array: Privacy Policy, Terms of Service, Cookie Policy, Data Protection), and Contact (Mail icon with intake@duncanlewis.com mailto link, Phone icon with +44 20 3114 5000 tel link, MapPin icon with address span). Includes `ftr-divider` and bottom bar with copyright and social links (Linkedin, Twitter, Globe icons). Import `Scale`, `Mail`, `Phone`, `MapPin`, `Linkedin`, `Twitter`, `Globe` from lucide-react and `Footer.css`.

As a frontend developer, implement the VoiceAgentHero section for the VoiceAgent page. The section renders a status badge with an animated `vah-badge-dot` and a `statusLabel` state (default: 'Operational'). Displays an h1 headline with accent span 'Always On', a subheadline paragraph describing 24/7 NLU voice intake. Renders a `healthIndicators` array of 4 items (Voice Agent/Active, NLU Engine/Healthy, Security/Secured, Avg Latency/312ms warn) mapped into `vah-health-item` cards, each with a lucide icon (Mic, Activity, Shield), label, value, and a status dot that conditionally applies `vah-online` or `vah-warn` class. CTA row includes a primary link to /Dashboard (BarChart3 + ArrowRight icons) and a secondary link to /CallActive (Mic icon). Imports VoiceAgentHero.css.

As a frontend developer, implement the LiveMetricsDashboard section for the VoiceAgent page. Renders 4 metric cards from the METRICS array (Calls in Queue/14, Avg Wait Time/2m 14s, Escalation Rate/23%, Voicemails/7), each with a lucide icon (PhoneCall, Clock, AlertTriangle, Voicemail), trend badge, body text, and a SparkBars sub-component. SparkBars uses useMemo to generate random bar heights (Array.from with 14 bars) styled by colorKey prop. TrendBadge sub-component renders TrendingUp/TrendingDown/Minus icons with percentage and up/down/neutral CSS modifier classes. Also renders a DataStreamCanvas sub-component using Three.js (PerspectiveCamera at z=18, 180 particles via Float32Array positions/speeds/alphas, WebGLRenderer with alpha:true) mounted via useRef/useEffect with an animRef animation loop. Imports LiveMetricsDashboard.css and three.

As a frontend developer, implement the ActiveQuestionnaireSection for the VoiceAgent page. Uses useState, useRef, useEffect, and useMemo. Renders a BRANCHING_PATH array of 6 steps (Client Identification through Urgency Assessment), a RESPONSE_OPTIONS array of 4 housing situation choices (council/private/family/street) each with id, label, and desc, and QUESTIONNAIRE_STEPS array of 8 steps with completed/current/pending statuses and meta labels. Includes a QuestionnaireOrbit sub-component built with Three.js: PerspectiveCamera at z=8, WebGLRenderer alpha:true, 8 node spheres (SphereGeometry 0.12r) with activeMat (0x3B82F6), completeMat (0x10B981), pendingMat (0x9CA3AF), and a TorusGeometry active ring (0.24r). Lucide icons used: MessageCircle, ChevronRight, Check, Phone, Clock, AlertTriangle. Imports ActiveQuestionnaireSection.css and three.

As a frontend developer, implement the EscalationIndicators section for the VoiceAgent page. Uses useState for `now` (Date.now()), useEffect for a 1-second setInterval countdown tick, useRef for canvasRef and animRef. Renders ESCALATION_DATA array of 5 escalation records (esc-001 through esc-005) with urgency levels (high/high/medium/medium/low), callRef, escalationDeadline (computed from Date.now() offsets), question label, and reason text. The formatCountdown helper calculates mm:ss from deadline diff, returning { text, warning } with warning:true when under 3 minutes. URGENCY_ICONS maps urgency to AlertTriangle or ShieldCheck lucide icons. Includes a Three.js particle backdrop via canvasRef: scene, dpr-aware canvas resize via parentElement.getBoundingClientRect(), and animRef animation loop for an 'alert network' particle effect. Imports EscalationIndicators.css, three, and lucide icons (AlertTriangle, Clock, ArrowRight, ShieldCheck, ChevronRight).

As a frontend developer, implement the RealtimeCallQueue section for the VoiceAgent page. Uses useState, useRef, useEffect, and useCallback. Renders three data arrays: pendingCalls (4 items with phone, name, duration, time, urgency, reason, badge/badgeClass, detail), voicemailCallbacks (3 items with received time, status: awaiting_callback, reason, detail), and escalations (2+ items with escalated time, status in_progress/resolved, agent name). Badge classes include rcq-badge-urgent, rcq-badge-new, rcq-badge-priority. Lucide icons used: Phone, Clock, AlertTriangle, Play, ChevronDown, ChevronRight, PhoneForwarded, PhoneIncoming, VoicemailIcon, UserCheck, CheckCircle2, Users, Inbox. Includes a Three.js canvas (via useRef) for a visual backdrop — mounted in useEffect. Imports RealtimeCallQueue.css and three.

As a frontend developer, implement the VoiceAgentStats section for the VoiceAgent page. Uses useState for active time period tab, useRef, and useCallback. Renders 6 KPI metric cards driven by a DATA object with three period keys (today/week/month), each containing: calls_handled, calls_change, avg_duration, avg_duration_change, successful_intakes, successful_intakes_change, escalation_rate, escalation_change, csat, csat_change, avg_wait, avg_wait_change. Lucide icons: PhoneCall, Clock, CheckCircle, AlertTriangle, Star, TrendingUp, TrendingDown, ArrowUp, ArrowDown, Minus. Integrates react-chartjs-2 Line chart with ChartJS.register for CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip. SPARKLINES object provides 20-point arrays per metric per period (calls_handled, avg_duration, successful_intakes, escalation_rate, csat). Period tab switcher toggles today/week/month views. Imports VoiceAgentStats.css.

As a frontend developer, implement the DashboardTopBar section for the Dashboard page. Build the `DashboardTopBar` component using `useState` for dropdown open/close state and `sessionSeconds` live timer, `useRef` for the dropdown container (click-outside detection via `handleOutside` callback), and `useEffect` for the 1-second `setInterval` session timer. Render a `<header className='dtb-root'>` with a left side showing the 'Dashboard' page label and separator, and a right side containing: a session timer pill with an animated `dtb-session-dot` and `formatTime(sessionSeconds)` display (HH:MM:SS format), a `Bell` icon notification button with a `dtb-notif-badge` showing count 3, and a user dropdown trigger displaying USER object initials 'VS', name 'Victoria Shaw', role badge 'Supervisor', and `ChevronDown` icon. The dropdown menu renders DROPDOWN_ITEMS (My Dashboard → /Dashboard, User Management → /UserManagement, Settings → /Settings, Help & Support → /Scripts) each with their respective lucide icons, plus a LogOut item. Role styling uses dynamic `dtb-role--supervisor` class. Note: a Navbar component may already exist from the Login page (task e513ddf8-e807-44c2-8777-7a8d8e8ab770); verify before creating a new shared layout component.

As a Backend Developer, implement the intake summary REST API using FastAPI. Endpoints: GET /intake-summaries (list), GET /intake-summaries/{id} (full detail: client info, matter details, AI summary, key statements, related calls, attendance note, approval status), PUT /intake-summaries/{id}/attendance-note (save/edit note), POST /intake-summaries/{id}/approve, POST /intake-summaries/{id}/reject, POST /intake-summaries/{id}/send-for-review, POST /intake-summaries/{id}/save-draft, GET /intake-summaries/{id}/related-calls. AI summary generation triggered post-call. Referenced by FR-13. Note: frontend tasks AIGeneratedSummary, AttendanceNoteEditor, CaseDetailsPanel, ApprovalActions, SummaryMetadata, RelatedCallsContext, IntakeSummaryHeader depend on this API.

As a Backend Developer, implement the reports and analytics REST API using FastAPI and MySQL/MariaDB. Endpoints: GET /reports/metrics (total calls, AI resolution rate, escalation rate, avg handle time, questionnaire completion — with date range filter), GET /reports/call-volume (time-series data for line chart, 7d/30d presets), GET /reports/escalations-by-matter (bar chart data), GET /reports/resolution-time (histogram data), GET /reports/table (paginated call records with search/sort/filter), POST /reports/export (CSV/Excel/PDF with options: include transcripts, AI summaries, call recordings), GET /reports/summary (platform summary metrics). Referenced by FR-14. Note: frontend tasks ReportsMetricsCards, ReportsCharts, ReportsTable, ReportsHeader, ReportsFilters, ReportsExport, KeyMetrics, SystemHealth depend on this API.

As a Backend Developer, implement the real-time dashboard metrics REST API using FastAPI. Endpoints: GET /dashboard/metrics (6 KPIs: total calls, avg handle time, escalation rate, SLA compliance, success rate, active calls — with trend data and sparklines), GET /dashboard/live-metrics (system status, capacity, uptime, queue, SLA warnings), GET /dashboard/escalation-queue (7 queue rows with urgency, wait time), GET /dashboard/recent-calls (10 most recent call records), GET /dashboard/alerts (active alerts summary), GET /dashboard/activity (recent activity feed), WebSocket /ws/dashboard for live metric push. Referenced by FR-14. Note: frontend tasks KeyMetricsCards, LiveMetricsBanner, EscalationQueuePanel, RecentCallsTable, AlertsPanel, CallActivityChart depend on this API.

As a Backend Developer, implement the telephony integration layer using FastAPI. Integrate with SIP/PSTN or cloud telephony (Twilio/Vonage/Amazon Connect) compatible with DLS Cisco UC infrastructure. Implement: inbound call webhook handler, call routing to voice agent, call recording capture and storage, real-time audio streaming to ASR pipeline, call status webhooks (answered, hold, transfer, ended), DTMF handling. Endpoints: POST /telephony/webhook/inbound (handle inbound call events), POST /telephony/webhook/status (call status updates), POST /telephony/calls/{id}/hold, POST /telephony/calls/{id}/resume, POST /telephony/calls/{id}/transfer, POST /telephony/calls/{id}/end, POST /telephony/calls/{id}/record. Ensure UK data residency for all recordings. Referenced by FR-01, Section 10.

As an AI Engineer, implement the AI-powered post-call summarisation engine using LangChain and LiteLLM routing to GPT. After each completed call, trigger summarisation pipeline: (1) receive call transcript and structured intake Q&A data, (2) construct prompt in DLS attendance note format (matter type, key facts, urgency indicators, recommended next steps, assigned fee earner), (3) route through LiteLLM to GPT model, (4) store generated summary linked to call record, (5) auto-attach to CMS matter record via CMS integration API. Endpoints: POST /ai/summarise (trigger summary generation for a call session), GET /ai/summaries/{call_id} (retrieve generated summary), PUT /ai/summaries/{call_id} (human edit/override), POST /ai/summaries/{call_id}/regenerate. Include confidence scoring. Referenced by FR-13.

As a frontend developer, implement the QuestionnaireHeader section for the Questionnaire page. This section renders a dynamic header driven by matterTypes, activeMatterKey, and onMatterChange props with a fallback to local MATTER_TYPES constant covering three matter types: homelessness (Housing Homelessness), disrepair (Housing Disrepair), and dataClaims (Data Claims). Implement the qh-root/qh-inner layout with: (1) a qh-badge-row containing a variant-styled badge (qh-badge--housing, qh-badge--disrepair, qh-badge--data) with a colored dot; (2) an optional qh-matter-switcher using the Layers lucide icon and a native <select> with MATTER_OPTIONS that calls onMatterChange on change, hidden when onMatterChange is not a function; (3) a qh-title-group with an <h1> and description paragraph; (4) a metadata row using the Clock lucide icon to display estimate and questionCount from the active matter type. Apply QuestionnaireHeader.css styles with variant-specific theming. This component may already exist from prior pages — check for reuse before implementing.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Build the `DashboardSidebar` component with `useState` managing three concurrent states: `expandedSections` (object keyed by section title, defaulting Main and Communication to true, Analysis/Configuration/Security to false), `collapsed` (boolean for icon-only mode), and `drawerOpen` (boolean for mobile drawer overlay). Use `useEffect` to read/write `localStorage` key `dsb-collapsed` and attach a `window.matchMedia('(min-width: 768px)')` listener that resets collapsed and drawer state below 768px. Render five `NAV_SECTIONS` groups (Main, Communication, Analysis, Configuration, Security) each with a collapsible header using `ChevronDown` and section icon, and nav items with href routing, lucide icons, and numeric badge chips (e.g. Call Logs: '24', Escalation Queue: '5', Voicemail: '3', Alerts: '2'). Include a collapse toggle button with `Menu`/`X` icons for desktop, and a mobile hamburger drawer trigger. The Dashboard item in Main is marked `active: true`. Persist collapsed preference to localStorage on toggle.

As a frontend developer, implement the LiveMetricsBanner section for the Dashboard page. Build the `LiveMetricsBanner` component using `useState` initialised with `METRICS_DATA` (systemStatus: 'healthy', activeCalls: 8, maxCalls: 20, uptime: 99.94%, queuedCalls: 3, avgWaitTime: '1m 12s', slaWarnCount: 2, escalationCount: 1). Compute `statusConfig` via `getStatusConfig()` (returns className/label for healthy/warning/alert states) and `capacityLevel` via `getCapacityLevel()` (thresholds at 65% warning, 85% alert). Render a `<section className='lmb-root'>` with: left panel showing a pulsing `lmb-status-dot` system status indicator and a capacity bar (`lmb-capacity-bar`) whose inline `width` style is `capacityPct%` with conditional alert/warning class; a centre metrics row with three `lmb-metric` tiles for Uptime (Activity icon), Queued (PhoneCall icon), and Avg Wait (Clock icon); and a right drill-down area showing SLA warning count and escalation count chips with `ChevronRight` links. The capacity bar visually communicates load at 40% (8/20 calls).

As a frontend developer, implement the KeyMetricsCards section for the Dashboard page. Build the `KeyMetricsCards` component rendering six KPI cards from the `METRICS` array: Total Calls (2,847 today, +12.4%), Avg Handle Time (4:32 min, -8.2%), Escalation Rate (6.8%, warning status), SLA Compliance (97.3%, positive), Success Rate (94.6%, neutral), and Active Calls (34 live, +5). Each card uses `useMemo` to derive sparkline path geometry and `useRef` for the Three.js canvas mount. Integrate `@react-three/fiber` `<Canvas>` with a `CardParticles` sub-component that renders 18 instanced particle meshes (Float32Array positions, count=18) — particles activate on card hover via an `active` prop. Each card displays: icon with variant colour class (`iconVariant`: primary/light/secondary/accent/highlight), metric value + unit, trend indicator with `ArrowUp`/`ArrowDown`/`Minus` icon and `trendLabel` percentage, comparison sub-label, and an SVG sparkline polyline. Status classes (`status: 'positive' | 'warning' | 'neutral'`) drive card border/glow accent via `accent` field mapping to CSS variables.

As a frontend developer, implement the CallActivityChart section for the Dashboard page. Build the `CallActivityChart` component using D3.js (`import * as d3 from 'd3'`) for a responsive stacked/grouped bar/area chart. State includes: `preset` (24h/7d/30d hours), `startDate`/`endDate` datetime-local inputs, `tooltip` object for hover overlay, `visibleSeries` object toggling completed/escalated/pending series, and `dimensions` (width/height from `ResizeObserver` on `wrapperRef`). Data is generated by `generateHourlyData(preset)` producing hourly buckets with sinusoidal variation (memoised via `useMemo`). The D3 `useEffect` clears `svgRef` on each render, applies margins (top:24, right:24, bottom:48, left:48), draws axes, and renders coloured series using `CHART_COLORS` (completed: #10B981 green, escalated: #F97316 orange, pending: #F59E0B amber). Includes a summary stats bar (totals via reduce), a three-button preset toggle (24h/7d/30d), custom date range inputs, and a series legend with click-to-toggle visibility. Tooltip shows per-bucket breakdown on hover. `ResizeObserver` drives reactive re-renders on container resize.

As a frontend developer, implement the EscalationQueuePanel section for the Dashboard page. Build the `EscalationQueuePanel` component rendering 7 escalation rows from `ESCALATION_ROWS` with fields: id (ESC-1042 to ESC-1048), name, duration, reason, queueTime, and urgency (critical/high/medium). Integrate `three` (`import * as THREE from 'three'`) for a Three.js accent effect on the panel. Implement sortable columns via `sortRows()` helper which handles: string comparison for `name`/`reason`, numeric parse via `parseDuration()` for duration (MM:SS → seconds), `parseQueueTime()` for queue time (integer minutes), and `URGENCY_RANK` mapping (critical:3, high:2, medium:1) for urgency sorting. Sort state tracks field and direction (asc/desc) with `ChevronUp`/`ChevronDown`/`ArrowUpDown` icons per column header. Each row shows urgency badge using `URGENCY` config (critical: `eqp-urgency-critical`, high: `eqp-urgency-high`, medium: `eqp-urgency-medium`) with animated dot. Include action buttons with `ArrowRight` (assign), `CheckCircle2` (resolve), and `PhoneIncoming` icons. A `THRESHOLD=5` constant drives a warning indicator when queue exceeds threshold. Use `useMemo` for derived sorted rows.

As a frontend developer, implement the RecentCallsTable section for the Dashboard page. Build the `RecentCallsTable` component with `useState` for search query, sort field/direction, current page, and a context menu state. Use `useMemo` for filtered and paginated call data derived from `CALL_DATA` (10 records: CAL-2838 to CAL-2847, outcomes: Complete/Escalated/Voicemail). Implement a `Search` icon text input that filters across caller name, call ID, and summary fields. Render a sortable table with columns: ID, Time, Caller (name + phone number), Duration, Outcome badge (colour-coded Complete/Escalated/Voicemail), and Summary (truncated). Column headers use `ChevronUp`/`ChevronDown` sort indicators. Each row has an actions cell with: `Eye` (view), `Headphones` (listen), `Phone` (call back), `FileText` (notes), and `MoreHorizontal` context menu trigger revealing `Copy` (copy ID) and `ExternalLink` (open detail) options. Pagination controls use `ChevronLeft`/`ChevronRight` buttons with page number display. Call records include realistic legal intake summaries (housing disrepair, homelessness s.21 notices, GDPR SAR, data breach claims).

As a frontend developer, implement the AlertsPanel section for the Dashboard page. Build the `AlertsPanel` component with `useState` for `activeFilter` (default 'all') and `dismissedIds` (a `Set` of dismissed alert IDs). Filter `ALERTS_DATA` (6 alerts) by severity using `SEVERITY_FILTERS` tabs: All, Critical, Warning, Info — each with a coloured dot (`ap-dot-critical`, `ap-dot-warning`, `ap-dot-info`). Render `activeAlertCount` (count of non-dismissed filtered alerts) in the panel header badge alongside a `Bell` icon and `SlidersHorizontal` filter button. Each alert card shows: severity icon (`AlertOctagon` for critical, `AlertTriangle` for warning, `Info` for info), title, description, relative time string (e.g. '12 minutes ago') with `Clock` icon, a `CheckCircle2` acknowledge/dismiss button, and an `ArrowRight` action link. Dismissal via `handleDismiss(id)` adds the alert ID to `dismissedIds` Set and hides the card. Alert content covers: SLA breach (housing disrepair queue, 120s threshold exceeded), high escalation rate (47% spike), CMS Proclaim sync latency (3.8s approaching 5s timeout), NLP model drift (confidence < 0.82), scheduled questionnaire engine maintenance (v3.4.1), and DB backup verification.

As a frontend developer, implement the EscalationHero section for the Escalation page. This section renders a 3D particle galaxy background using @react-three/fiber with a BackgroundGalaxy component that creates 180 green (#10B981) and 90 blue (#1E3A8A) additive-blended point particles via THREE.BufferGeometry. The hero displays a static ESCALATION_DATA object (queueDepth: 14, avgWaitMinutes: 4.2, activeEscalations: 9, criticalCount: 2, totalHandled: 847) with a status badge ('warning' / 'Elevated Load') driven by dynamic CSS class `eh-status-${data.status}`. Four stat cards (Queue Depth, Avg Wait Time, Active Escalations, Total Handled) use conditional value classes (eh-critical-text, eh-warn-text, eh-accent-text) based on threshold logic and render lucide-react icons (Activity, Clock, AlertTriangle, Users) from iconMap. Uses useRef and useMemo for particle geometry optimisation. Canvas is rendered with OrbitControls from @react-three/drei.

As a frontend developer, implement the CallLogsHeader section for the CallLogs page. This section renders a breadcrumb nav using lucide-react Home and ChevronRight icons linking to /Dashboard, a title row with an 'Export CSV' button featuring a Download icon, three stat cards (Total Calls: 1,247 with Phone icon, Avg Duration: 4m 32s with Clock icon, Escalation Rate: 12.4% with AlertTriangle icon) each with distinct iconClass variants (clh-stat-icon--calls, clh-stat-icon--duration, clh-stat-icon--escalation), and a quick-filter tab bar using useState('all') with four filters (All/1247, Escalated/155, Completed/892, Pending/200) each rendered as buttons with clh-filter-btn--active toggling and aria-pressed accessibility. Breadcrumb links target /Dashboard. Component is self-contained with CallLogsHeader.css styles.

As a frontend developer, implement the CallLogsFilterBar section for the CallLogs page. This section manages six pieces of state via useState: search, dateFrom, dateTo, status, urgency, and drawerOpen. It renders a desktop filter bar with a search input (Search icon, clear X button when non-empty, aria-label), date-range inputs (dateFrom/dateTo), a status dropdown built from STATUS_OPTIONS array (All Statuses, Completed, In Progress, Missed, Voicemail, Escalated, Transferred), urgency pill toggles for Critical/High/Medium/Low with dynamic class clfb-active-{key} when selected, and an active filter count badge. A mobile drawer is triggered by a SlidersHorizontal/Filter button; the drawer traps scroll via body.style.overflow and closes on Escape key via useEffect/addEventListener. An Apply button dispatches a custom window event 'calllogs-filter-apply' with filter detail via useCallback. A clearFilters callback resets all state. Imports CallLogsFilterBar.css.

As a frontend developer, implement the CallLogsTable section for the CallLogs page. This section renders a sortable, paginated data table using useState for sort column/direction and current page, and useMemo for sorted/paginated CALL_RECORDS. The CALL_RECORDS array contains 5+ entries with fields: id (e.g. CAL-2847), timestamp, callerName, callerPhone, matterType, duration, status (completed/warning/sla_breach), escalated boolean, summary, queueName, and agent. Column headers use ChevronUp/ChevronDown icons for sort state indication. Each row renders status badges with variant classes per status value, an escalated indicator, and an actions cell with Eye (view detail), Play (replay), FileText (transcript), and FileSpreadsheet (export) icon buttons from lucide-react. Pagination controls use ChevronLeft/ChevronRight buttons with page count display. Listens for the 'calllogs-filter-apply' custom window event to filter displayed records. Imports CallLogsTable.css.

As a frontend developer, implement the AlertsHeader section for the Alerts page. Build the `ah-root` section component using `useState` and `useEffect` to compute and display a formatted `lastUpdated` timestamp via `toLocaleString('en-GB', ...)` on mount. Render a two-column `ah-inner` layout: left side contains `ah-title-block` with an h1 using `ah-title-accent` span styling on 'Notifications', plus a subheadline describing real-time SLA breach monitoring. Right side `ah-actions` contains two summary badges (`ah-badge--active` with `Bell` icon showing count 7, and `ah-badge--critical` with `AlertTriangle` icon showing count 3 from lucide-react), plus an `ah-guidelines` anchor link to `/Scripts` with `ExternalLink` icon. Below the inner row, render `ah-timestamp-row` with a decorative dot, label, and the dynamic timestamp value (fallback: 'Just now'). Note: check if a Navbar/header component exists from the Dashboard page before building shared layout elements. Apply AlertsHeader.css (5065 chars) for all `ah-*` class styling.

As a frontend developer, implement the AlertsFilters section for the Alerts page. Build a multi-control filter bar using `useState` for `severity` (default 'all'), `selectedTypes` (array), `dateFrom`, `dateTo`, and `search` string. Implement a click-outside handler via `useRef` and `useEffect` with `mousedown` event on `document` to close the `typeOpen` multi-select dropdown. Render an `af-controls` row containing: (1) a severity `<select>` with `SEVERITY_OPTIONS` (all/critical/warning/info) applying dynamic `af-sev-*` CSS class based on selection; (2) a custom `af-type-container` multi-select dropdown using `af-type-trigger` button with `ChevronDown` icon that toggles `typeOpen`, listing `ALERT_TYPES` (sla_breach, call_volume_spike, escalation_delay, system_health, transcription_error) with checkboxes and `toggleType()` handler; (3) date-from and date-to `<input type='date'>` fields; (4) a search input with `Search` icon and inline `X` clear button. Track `activeFilterCount` as sum of active filter states. Render a `Filter` icon badge with count and a `RotateCcw` reset button calling `handleClear()` when `hasActiveFilters` is true. Apply AlertsFilters.css (9261 chars).

As a frontend developer, implement the ActiveAlerts section for the Alerts page. Build an alert card list using `useState` for expand/collapse state per card. Define `SEVERITY_ICON` map (critical→`AlertTriangle`, warning→`AlertCircle`, info→`Info` from lucide-react) and `SEVERITY_BADGE_LABEL` map. Render `ALERT_DATA` array (6+ items) each containing: id, severity, title, description, affectedTeam, supervisor, metric, threshold, currentValue, status ('breached'/'warning'/'ok'), and timestamp. Each alert card displays: severity icon with color coding, title, expandable description via `ChevronDown` toggle, metric/threshold/currentValue comparison cells, `Clock` icon with formatted timestamp, `User`/`Users` icons for supervisor and team, and action buttons using `CheckCircle2` (acknowledge), `XCircle` (dismiss), `Settings` (configure), and `ShieldCheck` (resolve) icons. Cards with status 'breached' receive critical styling. Apply ActiveAlerts.css (7286 chars) for all card and severity styling.

As a frontend developer, implement the AlertsHistory section for the Alerts page. Build a sortable, paginated history table using `useState` for `search`, `sortField`, `sortDir`, and `currentPage`, with `useMemo` for derived filtered+sorted data. Define `HISTORY_DATA` (11+ entries) with fields: id, name, severity (Critical/Warning/Info), triggered, acknowledged, resolved (empty string if pending), notes, and status (Resolved/Pending). Render a toolbar with a `Search` icon input for name filtering. Table columns: Alert Name, Severity badge, Triggered datetime, Acknowledged datetime, Resolved datetime, Notes, Status badge. Column headers are clickable to toggle sort direction, showing `ChevronUp`/`ChevronDown` icons from lucide-react. Rows with empty `resolved` and status 'Pending' receive distinct styling. Implement pagination controls using `ChevronLeft`/`ChevronRight` buttons with page count display. Empty state renders `ClipboardList` icon with message. Apply AlertsHistory.css (7957 chars).

As a frontend developer, implement the ThresholdConfig section for the Alerts page. Build an interactive threshold configuration panel using `useState` for per-threshold numeric values, `useCallback` for change handlers, and `useRef`/`useEffect` for tooltip positioning. Define `THRESHOLD_CATEGORIES` array with four categories: 'sla' (`AlertTriangle` icon, thresholds: call_wait_limit/120s and escalation_response/15min), 'volume' (`PhoneCall` icon, thresholds: daily_warning/300, daily_critical/500, concurrent_limit/40), 'health' (`Activity` icon, thresholds: api_latency/500ms and transcription_error/5%), 'quality' (`Shield` icon, thresholds: escalation_rate/15% and avg_handle_time). Each threshold renders a labeled range `<input type='range'>` with min=0, max per config, current numeric value display, unit label, and an `Info` icon that shows a tooltip with the threshold's tooltip string on hover. Implement a `RotateCcw` reset button per category that restores `defaultValue` for all thresholds in that group, and a global `Check` save button that confirms changes. Apply ThresholdConfig.css (9666 chars) for all `tc-*` class styles.

As a frontend developer, implement the ReportsHeader section for the Reports page. This section renders a two-row layout: a top row with a breadcrumb nav (Dashboard → Reports using ChevronRight from lucide-react) and a date range picker with From/To date inputs and DATE_PRESETS buttons (Today, 7D, 30D, 90D, Custom). Uses useState hooks for activePreset, fromDate, and toDate with a formatDateInput helper. The bottom row displays a headline and quick stats with TrendingUp/TrendingDown icons. Clicking a preset updates both date inputs and marks the preset active (rh-preset-active class). Custom typing in either date input sets activePreset to 'Custom'. Apply ReportsHeader.css styles with rh-root, rh-inner, rh-top-row, rh-breadcrumb, rh-date-range, rh-date-presets, rh-preset-btn classes.

As a frontend developer, implement the EscalationQueueHeader section for the EscalationQueue page. This section renders a real-time metrics dashboard header using React state hooks (useState, useEffect, useCallback). It auto-refreshes every 5000ms via setInterval in fetchMetrics(), computing randomised live values for queueCount, avgWait, oldestAge, and urgentCount. The header includes: (1) a title row with dynamic subtitle interpolating metrics.queueCount; (2) a metrics row with four stat cards using Lucide icons — Layers for Queue Count, Clock for Average Wait Time, Clock for Oldest Age (with isOldestUrgent boolean flag turning red when oldestSeconds > 300), and Flame for Urgent Count; (3) a filter button bar using FILTER_BUTTONS array with keys all/urgent/housing/dataclaims, activeFilter state controlling active styling, and filterCounts merging live metric values into button counts. Import from '../styles/EscalationQueueHeader.css'. Note: the EscalationQueuePanel component may already exist from the Dashboard page.

As a frontend developer, implement the VoicemailPageHeader section for the Voicemail page. This section renders a full-width header with decorative background glow divs (vph-glow, vph-glow-secondary), a title block with an h1 'Voicemail' heading and a role badge using Shield icon (Escalation System), a subtitle paragraph, and a CTA anchor linking to /EscalationQueue with ArrowRight icon. Below the title block, render a filter bar with three tab buttons defined in FILTER_TABS (All Voicemails with Voicemail icon count 47, Pending Callbacks with PhoneCall icon count 18, Urgent with AlertCircle icon count 5), a sort dropdown populated from SORT_OPTIONS (newest/oldest/urgency/caller/duration), and two date range inputs (dateFrom, dateTo) using Calendar icon. A 'Clear Filters' button using RotateCcw icon appears conditionally when hasActiveFilters is true. State: activeFilter (useState 'all'), sortBy (useState 'newest'), dateFrom (useState ''), dateTo (useState ''). handleClearFilters resets all state. Also render STATS row with 3 stat chips (total 47, pending 18, urgent 5) each with variant CSS class. Import Voicemail, PhoneCall, AlertCircle, Calendar, ChevronDown, ArrowRight, RotateCcw, Clock, Shield from lucide-react. Note: this may share layout context with DashboardTopBar/DashboardSidebar from Dashboard page.

As a frontend developer, implement the IntakeSummaryHeader section for the IntakeSummary page. Build the `<header className='ish-root'>` component using lucide-react icons (ArrowLeft, RotateCcw, ChevronRight). Render a breadcrumb nav using the BREADCRUMB array (Dashboard → Escalations → Intake Summary) with ChevronRight separators and aria-label support, mapping to /Dashboard and /EscalationQueue hrefs. Implement the `ish-meta-row` displaying static case identifier group (DLS-HOU-2026-004782, Margaret Okonkwo, 07911 234 567) with dividers, and an `ish-status--pending` badge with animated status dot and role='status'. Render `ish-main-row` with an h1 'Intake Summary' title and two action controls: an anchor link back to /EscalationQueue (ArrowLeft icon) and a 'Request Changes' button (RotateCcw icon). Apply IntakeSummaryHeader.css. Note: this is a page-level header unique to IntakeSummary.

As a frontend developer, implement the UserManagementHeader section for the UserManagement page. This section renders a page title ('User Management') with subtitle, three action buttons (Add User with UserPlus icon, Export CSV with Download icon, and a Bulk Actions dropdown with ChevronDown icon), and a dropdown menu driven by `useState(dropdownOpen)` and `useRef(dropdownRef)`. The BULK_ACTIONS array includes 'Activate Selected' (UserCheck), 'Deactivate Selected' (UserX), 'Resend Invites' (RefreshCw), a divider, and 'Delete Selected' (Trash2, danger styling). A `useEffect` registers `mousedown` and `keydown` (Escape) document listeners for outside-click and keyboard dismissal of the dropdown. The chevron icon animates via `umh-chevron-flip` class toggle, and the dropdown button receives `aria-haspopup` and `aria-expanded` for accessibility. CSS uses `umh-root`, `umh-inner`, `umh-title-row`, `umh-actions`, `umh-btn-primary`, `umh-btn-secondary`, `umh-btn-dropdown`, `umh-dropdown-menu`, `umh-dropdown-divider` classes.

As a frontend developer, implement the UserManagementTable section for the UserManagement page. This section renders a full-featured data table with 15 seeded USERS (fields: id, name, email, role, status, lastLogin, avatar initials). Features include: `useState` for search query, sort column/direction, active status filter tab, selected row IDs (checkbox multi-select), current page, and rows-per-page. Status filter tabs (STATUS_FILTERS: All/Active/Inactive/Suspended with counts) are computed from the USERS array. Search filters by name or email via `useMemo`. Columns are sortable with ChevronUp/ChevronDown icons. Each row shows avatar initials circle, name, email, role badge, status badge (colour-coded for Active/Inactive/Suspended), formatted lastLogin, and row action buttons (Edit3, UserX, Key, Users from lucide-react). Pagination controls use ChevronLeft/ChevronRight with a ROWS_PER_PAGE_OPTIONS selector (10/25/50). CSS uses classes such as `umt-root`, `umt-table`, `umt-status-badge`, `umt-avatar`, `umt-pagination`.

As a frontend developer, implement the UserManagementForm section for the UserManagement page. This section renders a user creation form with controlled `useState` hooks for: `fullName`, `email`, `role`, `department`, `isActive` (toggle), `permissions` (array), `errors` (object), `submitted` (boolean), and `saving` (boolean). ROLES options: Admin, Supervisor, Fee Earner, Voice Agent. DEPARTMENTS options: Housing, Contact Centre, Immigration, Family Law, Crime, Clinical Negligence, Employment. PERMISSIONS checkboxes (with icon and description) include: dashboard_access (LayoutDashboard), call_logs (PhoneCall), escalation_queue (AlertTriangle), audit_trail (FileText), questionnaire_builder (ClipboardList). The `validate()` function checks fullName (required), email (required + regex), role and department (required). `handleSubmit` runs validation, sets errors, and on success triggers `setSaving(true)` with a simulated 800ms async delay before `setSubmitted(true)`. `handleCancel` resets all state. Lucide icons used: UserPlus, Mail, User, Shield, Building2, Check, ChevronDown, Lock, KeyRound, LayoutDashboard, PhoneCall, AlertTriangle, FileText, ClipboardList, Eye, Activity. CSS uses `umf-root`, `umf-form`, `umf-field`, `umf-error`, `umf-permissions-grid`, `umf-toggle`, `umf-submit` classes.

As a frontend developer, implement the UserManagementRoles section for the UserManagement page. This section renders a roles overview grid from ROLE_DATA (5 roles: Admin, Contact Centre Supervisor, Fee Earner, Questionnaire Builder, Voice Agent) each with icon (Shield/Headphones/Briefcase/FileText/Mic from lucide-react), description, userCount, permissions array, and lastModified timestamp. Each role card displays its icon, name, user count (Users icon), permissions as badge chips, lastModified (Clock icon), and an edit button (Edit3 icon). A 3D WebGL decoration `RoleCanvas` component uses Three.js via `useRef(mountRef)` and `useEffect`: it creates a `THREE.Scene`, `PerspectiveCamera` at z=18, `WebGLRenderer` with alpha, a central `IcosahedronGeometry(3.8, 0)` mesh rendered as a blue wireframe (color 0x3B82F6, opacity 0.10), and an outer `TorusKnotGeometry(5.2, 0.28, 80, 12, 2, 3)` wireframe. The renderer is mounted via `mount.appendChild(renderer.domElement)` with cleanup on unmount. CSS uses `umr-root`, `umr-canvas`, `umr-roles-grid`, `umr-role-card`, `umr-permissions-chips`, `umr-badge` classes.

As a frontend developer, implement the QBHeader section for the QuestionnaireBuilder page. Build the header component using `useState` for `search` and `activeFilter` state. Render a breadcrumb nav with `ChevronRight` separators linking back to `/Dashboard`. Display a title block with h1 'Questionnaire Builder' and subtitle text. Render the STATS array (Total: 48, Published: 12, Drafts: 36) as stat cards each with a Lucide icon (`FileText`, `Globe`, `Edit3`) and CSS variable colors (`--primary`, `--accent`, `--secondary`). Implement the FILTERS pill row (All, Housing, Data Claims, Disrepair, Published, Drafts) with `handleFilterClick` toggling `activeFilter` and per-filter `qbh-filter-dot--*` CSS classes. Include a search input with clear (`X`) button via `handleClearSearch`. Apply `QBHeader.css` styles.

As a frontend developer, implement the ScriptsHero section for the Scripts page. This section renders a hero banner with decorative background elements (sh-decor-top, sh-decor-blob--left, sh-decor-blob--right), a breadcrumb meta row showing 'Configuration / Voice Intake' with an 'Admin Tool' badge containing an animated dot, an h1 title 'Voice Agent Scripts' with an accent span, a subtitle paragraph describing AI-generated greeting and voicemail scripts for the DLC-AI-2 platform, and a row of three info cards (Greeting Scripts with MessageSquare icon, Voicemail Scripts with Voicemail icon, and a third card with Shield icon) each containing an icon container with category-specific color class (sh-info-icon--greeting, sh-info-icon--voicemail) and a body with label and description spans. Also includes a stats row rendering the STATS array with values '24', '3', '12' for Active Scripts, Script Types, and Published Versions. Uses useState for searchTerm with a Search input and X clear button via handleClear. Imports lucide-react icons: Search, X, MessageSquare, Voicemail, Shield.

As a frontend developer, implement the AuditTrailHero section for the AuditTrail page. Build the hero section using a Three.js/React Three Fiber 3D backdrop featuring a rotating RingMesh built from a custom BufferGeometry with 120 segments, inner radius 1.55 and outer radius 1.75, rendered as lineSegments with blue (#3B82F6) transparent material at 0.28 opacity. The RingMesh animates via useFrame rotating on Y-axis (delta * 0.22) and X-axis (delta * 0.06). The ThreeDBackdrop Canvas is positioned camera at [0, 2.1, 3.4] with fov 42. Render the ath-canvas-wrap aria-hidden div behind content. Implement the ath-inner content block with: ath-eyebrow badge with animated dot and 'Compliance & Configuration' label, ath-title h1 'Audit Trail', ath-subtitle paragraph, and a stats row mapping the STATS array (Activity/Shield/RotateCcw icons) into ath-stat cards each with icon (ath-stat-icon--green/blue/amber variants), label, large value, meta text (ath-stat-meta--up/--info variants), and optional badge (ath-stat-badge--green/--amber). Uses useRef and useMemo hooks. Import AuditTrailHero.css. This is the page entry point and chains from the Dashboard page.

As an AI Engineer, implement the Natural Language Understanding and dialogue management engine using LangChain and LiteLLM. Components: (1) ASR integration — receive transcribed speech from telephony layer, (2) Intent classification — identify caller intent (new client, existing client, matter type selection, urgency expression), (3) Entity extraction — extract client details (name, DOB, phone, matter reference), (4) Stateful dialogue management — maintain conversation context across turns with branching questionnaire routing, (5) Urgency detection — classify urgency flags (imminent eviction, emergency homelessness, immediate health risk) and trigger escalation, (6) CRM lookup — query existing client records by phone/DOB/matter reference, (7) TTS response generation — produce British English professional responses. Integrate with questionnaire engine for dynamic question routing. Referenced by FR-01, FR-02, FR-06.

As a Tech Lead, verify the end-to-end integration between the Voice Agent frontend and the Voice Agent backend API. Ensure VoiceAgentStats, VoiceAgentHero, LiveMetricsDashboard, RealtimeCallQueue, ActiveQuestionnaireSection, EscalationIndicators components correctly fetch from /voice-agent/* endpoints. Verify real-time queue data (pending calls, voicemail callbacks, escalations) renders correctly and updates live. Confirm sparkline chart data maps from API metric period keys (today/week/month). Test escalation countdown timers are computed from API deadline timestamps. Verify active questionnaire step state reflects current NLU engine session state.

As a frontend developer, implement the QuestionnaireProgress section for the Questionnaire page. This section receives an engineState prop and derives steps (default: 6 steps — Client Details, Housing Status, Property Info, Vulnerability, Urgency Flags, Declaration), totalQuestions (default: 24), currentStep (default: 2), and currentQuestion (default: 8). Implement: (1) a qp-top row showing a question counter (currentQuestion/totalQuestions) and computed percentage label; (2) a qp-bar-track progress bar with role=progressbar and aria-valuenow, containing a qp-bar-fill div with inline width style set to percentage%; (3) a qp-mobile fallback showing 'Step X of Y' text and the current step label badge, aria-hidden; (4) a qp-steps row mapping steps with React.Fragment keys — each step renders a qp-step-dot with state classes (qp-completed using Check lucide icon, qp-current using Circle icon, qp-pending), a step label, and connector lines between steps using getConnectorState logic. Apply QuestionnaireProgress.css with responsive breakpoints hiding qp-steps on mobile.

As a frontend developer, implement the QuestionnaireForm section for the Questionnaire page — the most complex section, featuring a live question card and a Three.js galaxy background. Implement using useState, useRef, useMemo, and useCallback hooks with the following sub-components and features: (1) A DEMO_QUESTION object with id, number, totalQuestions, text, helpText, inputType='radio', required flag, and 5 options (damp_mould, structural, heating_hotwater, pest_infestation, electrical) each with value, label, and desc fields; (2) Radio input group rendering each option as a selectable card with label and description, tracking selectedValue state; (3) A help tooltip toggled by HelpCircle lucide icon displaying helpText; (4) Conditional path panel using GitBranch lucide icon — maps conditionalPaths array, highlighting the activeOnValue path that matches selectedValue using AlertCircle and CheckCircle2 icons; (5) A Three.js galaxy canvas rendered via useRef/useEffect using GALAXY_FEATURES nodes (voiceAgent #3B82F6, intakeEngine #F97316, questionnaire #10B981, plus others) as 3D spheres positioned at [x,y,z] coordinates with configurable size, with the 'questionnaire' node highlighted — includes animation loop via requestAnimationFrame and cleanup on unmount; (6) Apply QuestionnaireForm.css for card layout, radio styles, conditional path highlighting, and canvas overlay. This section has backend-adjacent logic (question routing) so enable test_agent.

As a frontend developer, implement the QuestionnaireActions section for the Questionnaire page. This section receives an engineState prop and supports both controlled (external engine state) and uncontrolled (local useState) navigation modes via externalCurrentStep/externalSetCurrentStep fallback pattern. Implement: (1) Navigation controls — goPrev and goNext handlers updating currentStep and currentQuestion, with ChevronLeft and ChevronRight lucide icons, disabled states when isFirst/isLast (managed via useEffect watching currentStep and totalQuestions); (2) Save Draft flow — openDraftDialog triggers a showDraftDialog modal, confirmDraft sets draftSaving=true with a simulated async save using setTimeout, then calls showToast('Draft saved successfully', 'success'); (3) Escalate flow — showEscalateDialog modal triggered by AlertTriangle icon with confirmation via X (cancel) and CheckCircle (confirm) lucide icons; (4) Toast notification system — showToast useCallback sets toast state with message, type, and leaving flag, auto-dismisses after 2600ms with a 320ms leaving animation before nulling; (5) Apply QuestionnaireActions.css for button bar layout, modal overlays, and toast slide-in/out animations.

As a frontend developer, implement the EscalationQueue section for the Escalation page. This section renders a filterable, sortable queue of 8 realistic escalation records (ESC-1042 through ESC-1025) using ESCALATION_DATA array. Each record includes caller name, phone, matterType (Housing or Data Claims), matterSub, urgency (urgent/normal), holdTime, context blurb, and isNew flag. The section uses useState, useEffect, useRef, useMemo, and useCallback for state management. Imports @react-three/fiber (THREE) for subtle 3D background accents. UI includes a Filter button with ChevronDown/Filter/Inbox icons from lucide-react, per-card urgency badge rendering via getMatterClass() helper, hold time display, and isNew badge indicator. Cards must highlight urgent items visually and support click-to-select interaction.

As a frontend developer, implement the ContextSummary section for the Escalation page. This section renders detailed AI-generated client context for selected escalations using MOCK_ESCALATIONS array (ESC-1042 Amara Obi — Housing Disrepair with 4 questionnaire responses and 3 urgency flags; ESC-1043 James McKinnon — Housing Homelessness with CRM unverified). Renders a 3D @react-three/fiber Canvas with @react-three/drei Sparkles component as an ambient background. Uses useState for selected escalation and useMemo for derived data. Displays client details (name, phone, DOB, CRM ref, crmVerified badge via BadgeCheck/ShieldCheck icons), qResponses as a collapsible list (ChevronDown/ChevronRight), urgencyFlags with colour-coded level badges (AlertOctagon for high, AlertTriangle for medium, HelpCircle for low), and an AI-generated aiSummary block with Copy/Check clipboard toggle. Icons from lucide-react: FileText, Copy, Check, User, Phone, Calendar, ShieldCheck, AlertTriangle, Clock, AlertOctagon, BadgeCheck.

As a frontend developer, implement the WarmTransferFlow section for the Escalation page. This section implements a 3-step sequential warm transfer workflow (review → accept → complete) driven by stepState object managed with useState. Step states cycle through 'pending' and 'completed', gating progression (accept is blocked until review is completed). CONTEXT_ITEMS array renders caller name (James Wilson), phone, matter ref (HOU-2026-0842), and reason via lucide-react icons (User, Phone, FileText, Hash). Live call timer uses useRef (timerRef) and setInterval via startTimer/stopTimer callbacks wrapped in useCallback, counting callSeconds. Call controls include muted (Mic/MicOff toggle), held (PauseCircle), and transferStatus ('idle' → loading → 'connected') state. formatTimer() formats seconds as MM:SS. Icons: PhoneForwarded, CheckCircle2, Eye, Play, Send, MicOff, Mic, PauseCircle, Clock, AlertCircle, Loader2. useEffect clears timer interval on unmount.

As a frontend developer, implement the EscalationMetrics section for the Escalation page. This section renders 4 KPI cards (Avg Escalation Time, Escalation Rate, Agent Utilization, SLA Compliance) from KPI_CARDS config, each with a live canvas-drawn sparkline using a custom drawSparkline() function with devicePixelRatio-aware rendering, gradient fill, and a smooth Bézier curve drawn via ctx.bezierCurveTo. Sparkline data is procedurally generated by generateSparklineData() using 60-point arrays with drift, noise, and volatility parameters. Each card shows value/unit, trend arrow (ArrowUp/ArrowDown/Minus from lucide-react), trendText, and an optional slaStatus badge ('good'/'warn') with slaText. Agent Utilization card additionally renders a mini utilization bar (active: 14/18, available: 3, busy: 11). Uses useState, useEffect, useRef, useCallback for animation loop management. Icons: Clock, TrendingUp, Users, ShieldCheck.

As a frontend developer, implement the VoicemailFallback section for the Escalation page. This section renders a list of 5 voicemail records (vm-001 through vm-005) from VOICEMAIL_DATA with caller name, phone, timestamp, duration, message text, status (new/followup/scheduled), urgent flag, and optional matterRef. A 3D animated scene — VoicemailWave — uses @react-three/fiber useFrame to animate 6 concentric ring geometries (radius 1.2–4.0, varying opacity and speed with phase offsets) using THREE.RingGeometry and meshStandardMaterial. The scene is rendered in a Canvas element. useState controls selected voicemail and filter state. Each voicemail card shows an inline audio Play/Pause toggle (Play/Pause icons from lucide-react), urgent AlertCircle badge, status pill, and message preview with expand. Filter bar uses ChevronDown/Filter icons. Other icons: Voicemail, Phone, Calendar, Clock, User, X, CheckCircle2, MessageSquare. useMemo is used for ring geometry config.

As a frontend developer, implement the QuickActions section for the Escalation page. This section renders a horizontal quick-action bar with 6 ActionButton components (View Pending → /EscalationQueue, Escalation Logs → /CallLogs, Schedule → href, Settings → href, Help → href, and a secondary Reports button) using lucide-react icons (AlertCircle, FileText, Clock, History, Settings, HelpCircle, Zap). Each ActionButton is an anchor element with a ref (btnRef) and onMouseMove handler that tracks cursor position as CSS custom properties (--mx, --my) for a radial glow effect on primary variant buttons. An AccentCanvas renders a @react-three/fiber Canvas with an icosahedron mesh (IcosahedronGeometry args [1.2, 1]) animated via useFrame — rotation.x sinusoidal, rotation.y linear, rotation.z cosinusoidal, scale pulsing — with semi-transparent emissive green meshStandardMaterial (opacity: 0.08, emissive: #10B981). AccentCanvas is aria-hidden. dpr capped at [1, 1.5].

As a frontend developer, implement the SummaryHero section for the Summary page. This section renders a dashboard header (`smh-root`) with: (1) an ambient decorative layer (`smh-ambient`) for subtle 3D ring context; (2) a title block with a `BarChart3` lucide icon in an icon-box and 'Platform Summary' heading with subtitle; (3) a controls row (`smh-controls`) containing a date-range picker group using two `<input type='date'>` fields with `dateFrom` / `dateTo` state initialized to '2026-06-07' and '2026-06-14', a `Calendar` icon, and a separator; (4) an actions group with a Refresh button that triggers `handleRefresh` (sets `refreshing` state for 900ms, applies `smh-spin` CSS animation to `RefreshCw` icon and shows 'Refreshing…' label while active) and an Export button that calls `handleExport` (creates a Blob with period metadata and triggers a browser download as `dlc-ai-2-summary-{dateFrom}-to-{dateTo}.txt`). Both handlers use `useCallback`. Depends on Questionnaire page task for page-level chaining.

As a frontend developer, implement the CallLogsDetail section for the CallLogs page. This section is a slide-in detail panel/modal with useState for activeTab ('timeline' | 'transcript' | 'summary') and audio playback state (isPlaying, currentTime, duration), and useRef for the audio element. It displays CALLER_DATA (name, phone, email, type, clientRef, DOB, address with User/PhoneCall icons), MATTER_DATA (reference, department, caseType, assignedSolicitor, status, openedDate with FileText/Hash/UserCheck icons), and URGENCY_FLAGS array (Imminent Eviction/critical, Vulnerable Adult/high, SLA: 4hr Response/info each with AlertTriangle/Clock icons and level-specific badge classes). The tabbed content area renders: (1) TIMELINE_EVENTS list (12 entries) with speaker labels (System/Agent/Caller), timestamps, and highlight class for flagged entries; (2) TRANSCRIPT array with speaker-typed bubbles (agent/caller variants) and timestamps; (3) an AI summary panel with Sparkles icon. An audio player bar uses Play/Pause/SkipBack/SkipForward controls with useEffect for time sync. Header action buttons include Download, Copy (transcript), and ExternalLink (open in CMS). Close button (X icon) dismisses the panel. Imports CallLogsDetail.css.

As a frontend developer, implement the ReportsFilters section for the Reports page. This is a collapsible sidebar filter panel using useState for openSections (dateRange, matterType, status, agentDept accordion state), dateFrom/dateTo inputs, activePreset (today/last7/last30/thisQuarter), matterTypes array (multi-select checkboxes from MATTER_TYPES with counts), statuses array (multi-select from STATUS_OPTIONS), selectedAgent dropdown (from AGENTS list), and selectedDept dropdown (from DEPARTMENTS list). Includes a mobile drawer mode controlled by drawerOpen state with a useRef overlay and useEffect to lock body scroll when open. PRESETS apply date math via applyPreset(). Apply/Reset buttons call handleApply (closes drawer) and handleReset (restores defaults). Uses Filter, ChevronDown, X, Calendar icons from lucide-react. Apply ReportsFilters.css with accordion toggle animations.

As a frontend developer, implement the ReportsMetricsCards section for the Reports page. Renders a row of 5 metric summary cards from the METRICS constant array: Total Calls (1,847), AI Resolution Rate (78.3%), Escalation Rate (14.8%), Avg Handle Time (4.2 min), and Questionnaire Completion (92.6%). Each card displays a lucide-react icon (Phone, CheckCircle, TrendingUp, Clock, FileText), value with optional unit, trend badge with direction (up/down) using TrendingUp/TrendingDown/Minus icons and percentage text, a last-updated timestamp, and an inline SVG sparkline. The Sparkline component uses generateSparklinePath() to compute strokePath and fillPath from a 15-point data array using xScale/yScale helpers, with color classes based on trend direction. Apply ReportsMetricsCards.css styles.

As a frontend developer, implement the ReportsCharts section for the Reports page. Uses react-chartjs-2 (Line and Bar components) with Chart.js registration of CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, and Filler plugins. Renders three charts: (1) a Line chart for call volume with 7-day/30-day toggle (DAY_LABELS_7/DAY_LABELS_30, CALL_VOLUME_7/CALL_VOLUME_30 datasets), (2) a horizontal Bar chart for escalations by matter type (MATTER_TYPES labels, ESCALATION_COUNTS data, ESCALATION_COLORS per-bar colors), and (3) a Bar chart for resolution time distribution (RES_TIME_BUCKETS, RES_TIME_COUNTS, RES_TIME_COLORS). Uses makeLineOptions() shared options factory with custom legend generateLabels and dark tooltip styling. useState for active time window toggle. useRef, useCallback, and useMemo used for chart refs and memoized data objects. Download and FileText icons from lucide-react for export buttons. Apply ReportsCharts.css.

As a frontend developer, implement the ReportsTable section for the Reports page. This is the most complex section: a fully sortable, searchable, paginated data table of DLC-AI-2 call records (REPORT_ROWS array with fields: id, datetime, caller, matterType, duration, status, aiResolved, escalatedTo, snippet). Uses useState for searchQuery, sortColumn/sortDir, currentPage, and a row detail expansion state. useMemo computes filtered+sorted rows. Columns include datetime, caller, matterType, duration, status badge (Completed/Escalated/Active/Pending with CheckCircle, XCircle, Clock icons), AI resolved indicator, and escalatedTo. ChevronUp/ChevronDown icons indicate sort direction. Pagination with ChevronLeft/ChevronRight. Row click opens an inline detail panel showing the snippet and metadata. Icons used: Search, Eye, Phone, Calendar, FileText, Filter, Layers, User, BarChart3. Imports THREE from 'three' for a 3D background canvas element. Apply ReportsTable.css.

As a frontend developer, implement the ReportsExport section for the Reports page. Renders an export toolbar with three format toggle buttons (CSV, Excel, PDF) from EXPORT_FORMATS using FileSpreadsheet/FileText/FileJson icons, tracked by activeFormat useState. Checkbox options (includeTranscripts, includeAISummaries, includeCallRecordings) controlled by checkboxes state object with handleCheckboxChange. selectedCount is computed via useMemo from checkbox values. Export button triggers handleExport which sets exporting=true, simulates a 1200ms async operation via setTimeout, then sets lastExported timestamp and shows a toast notification for 3500ms (toast useState). dateRange is initialized once via useState with getInitialDateRange() helper computing a 30-day window. Displays lastExported and dateRange metadata with Calendar/Clock icons. Apply ReportsExport.css with rex-root, rex-inner, rex-formats, rex-fmt-btn, rex-fmt-active classes.

As a frontend developer, implement the EscalationQueueFilters section for the EscalationQueue page. This section provides a rich multi-filter toolbar using React useState and useMemo hooks. State includes: search (text input with X clear button via lucide Search/X icons), matterType select (MATTER_TYPES array: all/housing_homelessness/housing_disrepair/data_claims), urgentOnly boolean toggle, sortBy select (SORT_OPTIONS: oldest/newest/urgency), showAdvanced boolean panel toggle (SlidersHorizontal/Filter icons), advancedStatus (STATUS_OPTIONS: all/pending/in_progress/accepted/completed), advancedDepartment (DEPARTMENT_OPTIONS: all/housing/immigration/family/crime), advancedDateFrom and advancedDateTo date inputs. The activeFilters array is memoised and renders as removable chip tags with individual clear handlers. A 'Clear All' button (RotateCcw icon) resets all state when hasAnyFilter is true. The advanced panel collapses/expands with ChevronDown animation. handleClearAll resets all filter state. Import from '../styles/EscalationQueueFilters.css'.

As a frontend developer, implement the EscalationQueueList section for the EscalationQueue page. This section renders a scrollable list of escalation queue cards from the QUEUE_ITEMS static array (6 items: eq-001 through eq-006) using React useState, useRef, and useEffect hooks. Each card displays: client avatar with getInitials() helper (two-letter uppercase), client name, phone, matterType badge styled via getMatterBadgeClass() switching on matterCategory (disrepair/homelessness/data-claims/housing), a live wait timer using formatWaitTime(seconds) and getWaitLevel() returning 'critical'/'warning'/'normal' for colour coding (>=150s critical, >=120s warning), a contextSnippet preview, priority badge ('urgent' vs 'standard'), and isNew indicator. Lucide icons used: Clock, Sparkles (for AI context), ChevronDown, ChevronRight, Phone, Inbox (empty state). Cards support expand/collapse interaction tracked via useState. An empty state renders the Inbox icon when no items exist. Import from '../styles/EscalationQueueList.css'.

As a frontend developer, implement the VoicemailMessageList section for the Voicemail page. This section renders a sortable, filterable list of voicemail message cards sourced from INITIAL_MESSAGES (6+ entries with callerName, phone, timestamp, duration in seconds, transcript, state enum pending/urgent/scheduled, priority 1–3, callerInitials, optional callbackScheduled). State: useState for messages array, activeSort (key from SORT_OPTIONS: date/duration/priority), and a playing message ID. useMemo is used to derive sorted messages. Each card displays: caller initials avatar, callerName, phone, formatted timestamp using Calendar icon, duration using Clock icon formatted as mm:ss, state badge (pending/urgent/scheduled with colour variants), priority indicator, full transcript text, and a Play/Pause toggle button using Play/Pause icons from lucide-react that controls per-message playback state. An empty state using Inbox icon renders when no messages exist. Sort tabs render from SORT_OPTIONS array. Import Play, Pause, Clock, Calendar, Phone, MessageSquare, ChevronDown, Inbox from lucide-react.

As a frontend developer, implement the VoicemailCallbackScheduler section for the Voicemail page. This section presents a modal-based callback scheduling workflow triggered by a button (handleOpen). The modal contains a form with: callback type radio/button group from CALLBACK_TYPES (phone/email/sms with Phone, Mail, MessageSquare icons), a date input constrained between getTomorrowStr() and getMaxDateStr() (3-month window), a time input defaulting to '09:00', an assignee select populated from ASSIGNEES array (6 staff members across Housing Intake, Data Claims, Contact Centre, Escalation Lead, Housing Disrepair roles), and a notes textarea pre-populated with SELECTED_VOICEMAIL.transcription. A caller context card renders SELECTED_VOICEMAIL details (Maria Oliveira, phone, department, receivedAt, duration '3:24', initials 'MO') alongside estimated queue position (4) and wait time (25 minutes) using Layers and Clock icons. State: modalOpen, scheduled, scheduledDetails, callbackType, date, time, assignee, notes. handleSchedule validates assignee presence then sets scheduledDetails and scheduled=true showing a confirmation view with CheckCircle2. handleCancel closes modal and resets scheduled state. Import Clock, Calendar, Phone, Mail, MessageSquare, UserCheck, FileText, X, CheckCircle2, Layers from lucide-react.

As a frontend developer, implement the VoicemailStats section for the Voicemail page. This section renders a row of 4 stat cards defined in the STATS array: Total Pending (Mail icon, value 47, variant pending, sub 'Awaiting review'), Urgent Messages (AlertTriangle icon, value 12, badge 'Needs attention', variant urgent, sub 'Escalation flagged'), Scheduled Callbacks (PhoneForwarded icon, value 23, badge 'Upcoming', variant scheduled, sub 'Next: Today, 2:30 PM'), and Avg Message Duration (Clock icon, value '01:42', variant duration, sub 'Across 312 messages'). The first three numeric values animate on mount using a custom animateCounter function that uses requestAnimationFrame with a cubic ease-out easing (1 - Math.pow(1 - progress, 3)) over ~800–1000ms durations. State: pending (useState 0), urgent (useState 0), scheduled (useState 0) animated via useEffect with a hasRun useRef guard to prevent double-firing. The duration card displays a static string. Each card applies variant-specific CSS classes (vms-card--pending, vms-card--urgent, vms-card--scheduled, vms-card--duration) and icon wrapper classes. Import Mail, AlertTriangle, PhoneForwarded, Clock from lucide-react.

As a frontend developer, implement the SummaryMetadata section for the IntakeSummary page. Build a metadata panel using lucide-react icons (Clock, PhoneCall, Tag, User, Briefcase) and a Three.js `ConfidenceRing` sub-component. The `ConfidenceRing` receives a `value` prop (0–100), uses `useRef` for the Three.js mount point and `useState` for hover state, computes `percent` and `targetAngle` via `useMemo`, and initialises a Three.js WebGLRenderer with DPR clamped to 2, an OrthographicCamera, a grey TorusGeometry track ring, a blue progress arc (TorusGeometry with `0, targetAngle` sweep using color #3B82F6), and a centre CircleGeometry dot whose opacity and colour animate on hover (#2563EB hover / #3B82F6 idle). A `requestAnimationFrame` loop lerps `currentAngle` toward `targetAngle` (factor 0.12) and disposes geometry each frame. Includes window resize listener. The outer component renders metadata fields (call time, duration, matter type, assigned user, case reference) alongside the confidence ring. Apply SummaryMetadata.css.

As a frontend developer, implement the AIGeneratedSummary section for the IntakeSummary page. Build a `<section className='ais-root'>` with a card layout. Render an `ais-header` containing a Sparkles icon (lucide-react, size 18) and an h2 heading 'AI-Generated Summary'. Display a static `summaryText` paragraph block (Margaret Okonkwo housing disrepair narrative) inside `ais-summary-block`. Render two `ais-extract-item` blocks: one for `clientIssues` (4 items as a `<ul>` list covering structural damp, landlord denial, child health impact, property address) and one for `nextSteps` (5 items covering surveyor instruction, letter before action, interim injunction prep, urgency flag, Legal Aid confirmation). Include an urgency badge derived from `urgencyLevel='high'` with label 'High Priority' and a confidence score display using `confidenceScore=92` with label 'High Confidence' (threshold ≥85). Apply AIGeneratedSummary.css.

As a frontend developer, implement the AttendanceNoteEditor section for the IntakeSummary page. Build a `<section className='ane-root'>` with a rich text editor card. Initialise `note` state with `DEFAULT_AI_SUMMARY` (a multi-section markdown-style attendance note including call date, client details, advice summary, and next steps). Use `useState` for `note`, `showToast`, and `toastKey`; `useRef` for `editorRef` and `initialRef`; and `useCallback` for `triggerToast`. Compute `wordCount` via `countWords()` (splits on /\s+/) and `charCount`, flagging `isOverLimit` when charCount exceeds `CHAR_LIMIT=4000`. Implement `handleClearRevert` (resets note to `initialRef.current`, triggers success toast 'Note reverted to original AI summary.') and `handleAutoFill` (sets note to DEFAULT_AI_SUMMARY, triggers success toast). Render a toolbar with lucide-react icons (Heading, Quote, Sparkles for AI autofill, RotateCcw for revert, RefreshCw). Display a live word/char counter below the textarea with over-limit warning state. Implement a toast notification system using `toastKey` to re-trigger the 3-second auto-dismiss timer (AlertTriangle for error, CheckCircle2 for success). Apply AttendanceNoteEditor.css.

As a frontend developer, implement the CaseDetailsPanel section for the IntakeSummary page. Build a collapsible panel using `useState` (`expanded`, default true) with a `cdp-toggle` button that toggles `aria-expanded` and animates a ChevronDown icon (class `cdp-open` when expanded). Render three sub-sections inside `cdp-panel` (toggling `cdp-expanded`/`cdp-collapsed` classes): (1) Client Information using `CLIENT_INFO` object (name: Margaret Okonkwo, dob: 12/05/1978, phone: 07911 234 567, email: m.okonkwo@email.co.uk, existingClient: true) with lucide-react icons (User, Phone, Mail, Calendar) and an 'Existing Client' badge when `existingClient` is true; (2) Matter Details using `MATTER_DETAILS` object (reference: DLS-HOU-2026-004782, type: Housing Disrepair, areaOfLaw: Housing — Landlord & Tenant Act 1985) with FileText and Tag icons; (3) Key Statements using `KEY_STATEMENTS` array (5 entries with `text` and `timestamp` fields, e.g. '00:02:34') rendered as quoted cards with MessageSquare icon and timestamp badges. Apply CaseDetailsPanel.css.

As a frontend developer, implement the ApprovalActions section for the IntakeSummary page. Build an actions panel with a `@react-three/fiber` Canvas containing a 3D star-field scene using `@react-three/drei` Stars and OrbitControls. Render `FEATURE_STARS` array (6 entries: Dashboard /Dashboard blue, Voice Agent /VoiceAgent green, Call Logs /CallLogs orange, Reports /Reports amber, Questionnaire Builder /QuestionnaireBuilder purple, Escalation Queue /EscalationQueue pink) as interactive `FeatureStar` sub-components. Each `FeatureStar` uses `useState(hovered)` and `useRef(meshRef)`, renders a `sphereGeometry` (radius 0.45) with `meshBasicMaterial` that scales to 1.6 on hover and increases opacity from 0.6 to 0.95, and conditionally renders a `ringGeometry` halo (radii 0.6–0.7) on hover. Implement `ConnectionLines` component drawing `<line>` primitives with `bufferGeometry`/`bufferAttribute` between consecutive star pairs (max 5 lines), using `lineBasicMaterial` at 12% opacity. Implement an `InfoCard` sub-component that appears when a star is selected (via `onDismiss` prop) showing the star label and a navigation link (ExternalLink icon). Render approval action buttons outside the Canvas: Approve (CheckCircle), Send for Review (MessageSquareText), Save Draft (Save), Reject (XCircle) and a Clock timestamp. Apply ApprovalActions.css.

As a frontend developer, implement the RelatedCallsContext section for the IntakeSummary page. Build a `<section className='rcc-root'>` collapsible panel. Use `useState(expanded, default true)` to toggle the `rcc-body-open` class on the `rcc-body` div (with `aria-controls='rcc-body'` and `aria-expanded` on the toggle button). Render an `rcc-toggle` button with a heading group containing a Phone icon (size 18), an `rcc-title` ('Related Calls from This Client'), an `rcc-subtitle` showing `{MOCK_CALLS.length} prior calls on record`, and an `rcc-badge` count badge. Animate a ChevronDown icon with `rcc-chevron-open` class when expanded. Inside `rcc-body`, map over `MOCK_CALLS` array (4 entries: Housing Homelessness call-001, Housing Disrepair call-002, General Enquiry call-003, Data Claims call-004) each with `date`, `time`, `duration`, `matterType`, `tagClass` (rcc-tag-housing/disrepair/general/data), `outcome`, and `href='/CallActive'`. Render each call as a card with Clock icon for duration, Phone icon for call type, a coloured matter-type tag using `tagClass`, outcome text, and an ArrowRight link to `/CallActive`. Apply RelatedCallsContext.css.

As a frontend developer, implement the QBLibrary section for the QuestionnaireBuilder page. Use `useState` and `useMemo` to manage search, sort, selection, and active practice-area filter state. Render a PRACTICE_AREAS sidebar filter list (All, Housing Homelessness, Housing Disrepair, Data Claims) with counts. Display 9 questionnaire cards from the QUESTIONNAIRES array, each showing title, description, `practiceArea`, `createdAt`, `lastModified`, `version`, `status` badge, and `questionCount`. Include Lucide icons: `Search`, `ArrowUpDown`, `FolderOpen`, `Edit3`, `Copy`, `Trash2`, `History`, `MoreHorizontal`, `FileText`, `Calendar`, `Clock`, `GitBranch`, `CheckSquare`, `X`. Implement a `MoreHorizontal` dropdown menu per card with Edit, Duplicate, Version History, Delete actions. Add multi-select with `CheckSquare` and bulk-action toolbar. Implement `useMemo`-derived filtered+sorted questionnaire list. Apply `QBLibrary.css`.

As a frontend developer, implement the QBCreateNew section for the QuestionnaireBuilder page. Manage `name`, `practiceArea`, `description`, `selectedTemplate`, and `toast` via `useState`; use `canvasRef` and `animRef` refs. Render a form with: text input for questionnaire name, a `<select>` dropdown bound to the PRACTICE_AREAS array (housing_homelessness, housing_disrepair, data_claims, immigration, family, public_law, community_care, crime), a textarea for description, and a TEMPLATES card grid (blank, housing_homelessness, housing_disrepair, data_claims) with radio-style selection. Add a `Plus` icon submit button and a toast notification system using `AlertCircle` / `CheckCircle` icons. Initialize a Three.js particle ring background via `useEffect` on `canvasRef`: 80 floating particles in an elliptical orbit using `THREE.BufferGeometry`, `THREE.Points`, `THREE.PerspectiveCamera` (z=18), animated via `requestAnimationFrame`. Apply `QBCreateNew.css`.

As a frontend developer, implement the ScriptsBrowser section for the Scripts page. This section renders a filterable script library using useMemo for derived state. It includes a CATEGORIES tab bar with four categories (greeting, voicemail, escalation, closing) each with a lucide-react icon (MessageCircle, Voicemail, AlertTriangle, CheckCircle2) and category-specific icon class (sb-cat-greeting, sb-cat-voicemail, sb-cat-escalation, sb-cat-closing). A Search input filters the SCRIPTS array (10 scripts with id, category, title, description, type, modified fields) by title and description. Script cards display title, description, a modified date with Clock icon, and a FileText icon badge showing the type. Each card has four action buttons: Edit3 (edit), Eye (preview), Copy (duplicate), Trash2 (delete). Active category filter uses useState for selectedCategory, and search uses useState for searchQuery, with useMemo combining both filters to derive visible scripts. Imports lucide-react icons: MessageCircle, Voicemail, AlertTriangle, CheckCircle2, Search, Edit3, Eye, Copy, Trash2, Clock, FileText.

As a frontend developer, implement the ScriptsEditor section for the Scripts page. This is the most complex section, featuring a rich script editor with a 3D ambient background rendered via @react-three/fiber Canvas containing an AmbientScene component — a torusKnotGeometry (args: [2.6, 0.28, 100, 16]) with meshStandardMaterial (color #3B82F6, emissive #1E3A8A, opacity 0.12, wireframe false) that sets initial rotation in a useEffect. The editor form uses multiple useState hooks: title, scriptType (defaulting to 'intake'), description, scriptBody, boldActive, italicActive. A SCRIPT_TYPES dropdown (intake, escalation, voicemail, callback, summary) uses a custom ChevronDown select. A rich toolbar with Bold, Italic, List, Quote, Code, Variable lucide icons applies formatting toggling on scriptBody via useCallback and useRef pointing to the textarea. A AVAILABLE_VARIABLES panel (12 variables across Client, Matter, Agent, Scheduling, Intake, Reporting categories) renders as clickable chips that insert variable keys (e.g., {{CLIENT_NAME}}) into the scriptBody at cursor position. Inline validation shows Check or AlertCircle icons. Save and Send (publish) action buttons are present. An X button closes/resets the editor. An Info tooltip explains variable usage. Imports @react-three/fiber Canvas, THREE from three, and lucide-react icons: FileText, Bold, Italic, List, Quote, Code, Variable, Check, AlertCircle, Save, Send, X, ChevronDown, Info.

As a frontend developer, implement the ScriptsPreview section for the Scripts page. This section renders an interactive script playback simulator. It displays SCRIPT_LINES (12 lines) each with an optional cue badge (type: 'agent', 'question', 'closing' with corresponding label), a text body combining text + vars (rendered as highlighted variable chips with key/value pairs) + suffix. A media player controls bar uses useState for currentLine (index), isPlaying, and playbackSpeed (from SPEEDS array: 1.0x, 1.5x, 2.0x). Play/Pause toggles using Play and Pause lucide icons, SkipBack and SkipForward navigate lines. A progress bar shows currentLine / SCRIPT_LINES.length percentage. Uses useEffect with setInterval to auto-advance lines when isPlaying, with speed calculated from BASE_DURATION_SEC (142s) divided by TOTAL_SCRIPT_CHARS to derive per-character timing scaled by playbackSpeed. A stats bar shows total lines (Hash icon), estimated duration (Clock icon), word count (FileText icon), and an AlertCircle icon for variable warnings. Eye icon toggles a 'raw text' mode. Volume2 icon is a placeholder for audio controls. Uses useRef for the interval handle and useCallback for play/pause logic.

As a frontend developer, implement the ScriptsActions section for the Scripts page. This section renders an action bar and version history timeline. The action bar left side contains three buttons: 'Publish New Version' (sa-btn-primary with Send icon, calls handlePublish), 'Export as CSV' (sa-btn-outline with Download icon), and 'Import from File' (sa-btn-outline with Upload icon). The right side contains 'Reset to Default' (sa-btn-warning with RotateCcw icon) and a rollback button (sa-btn-danger) both calling openConfirm(type) which sets confirmModal state via useState. A confirmModal overlay renders conditionally based on confirmModal state ('reset' or 'rollback'), with a modal containing an AlertTriangle icon, title, description, and Confirm/Cancel buttons — confirm calls handleConfirm which closes the modal via closeConfirm(). A VERSION_HISTORY timeline (5 entries: v2.4.1 current, v2.4.0/v2.3.0/v2.2.1 published, v2.2.0 rollback) is toggled by a ChevronDown accordion button (timelineOpen useState). Each version entry shows id, date, author, changes text, and a status badge. Version entries with status 'current' show a Check icon, 'rollback' shows Undo2, others show History. An Eye button previews a version. Trash2 icon on non-current versions allows deletion. Imports lucide-react icons: Send, Download, Upload, RotateCcw, Undo2, Clock, ChevronDown, AlertTriangle, Trash2, Check, X, History, Eye.

As a frontend developer, implement the AuditTrailFilters section for the AuditTrail page. Build a filter bar with multiple interactive controls: (1) Search input with Search icon (18px, strokeWidth 1.8) bound to searchQuery state via useState, with placeholder 'Search audit entries by keyword, field, or value…'; (2) Date range pickers for dateFrom and dateTo states; (3) User dropdown (userRef) with typeahead search (userSearch state) filtering the MOCK_USERS array of 8 names, controlled by userDropdownOpen state; (4) Change type multi-select dropdown (typeRef) with CHANGE_TYPES array ('Configuration', 'User', 'Script', 'Questionnaire') using toggleChangeType to manage selectedTypes array state; (5) Active filter count badge computed from [dateFrom||dateTo, selectedUser, selectedTypes.length>0, searchQuery.trim()] reduced sum shown conditionally; (6) 'Clear All' button (af-clear-btn) calling clearAllFilters() resetting all 5 state values. Implements click-outside handler via useEffect adding/removing mousedown listener checking userRef and typeRef containment. Uses useState, useRef, useEffect from React. Imports Search, Calendar, ChevronDown, X, Filter, RotateCcw from lucide-react. Import AuditTrailFilters.css. This section is independent and can be built in parallel with AuditTrailTimeline.

As a frontend developer, implement the AuditTrailTimeline section for the AuditTrail page. Build a paginated timeline of audit entries using the AUDIT_ENTRIES static array (7+ entries with fields: id, timestamp, changeType, admin, action, before JSON string, after JSON string). Implement pagination with ITEMS_PER_PAGE=5 constant and pagination state via useState. Each entry card displays: entry ID (e.g. 'AUD-1047'), timestamp, changeType badge (color-coded for 'Configuration'/'User'/'Script'/'Questionnaire'), admin name, human-readable action description, and an expandable diff view toggled per entry via ChevronDown showing before/after JSON blobs side-by-side. Individual row expand state managed via useState. Include a RotateCcw rollback trigger button per row. Pagination controls use ChevronLeft/ChevronRight icons with current page indicator. Clock icon used for timestamp display. Imports ChevronDown, RotateCcw, ChevronLeft, ChevronRight, Clock from lucide-react. Uses useState. Import AuditTrailTimeline.css. This section is independent and can be built in parallel with AuditTrailFilters.

As a frontend developer, implement the CallActiveHeader section for the CallActive page. This section renders a live call status bar using `useState` and `useEffect`. It includes: a real-time call duration timer (updating every second via `setInterval`, formatted as HH:MM:SS using `formatDuration`), a randomly selected `matterType` from `MATTER_TYPES` array ('Housing Homelessness', 'Housing Disrepair', 'Data Claims') displayed as a badge with a `cah-matter-dot`, caller info (`callerName: 'Sarah Mitchell'`, `callerPhone: '+44 20 7946 0812'`) with an animated `cah-active-dot`, and a status indicator with `statusClass` and `cah-status-pulse` animation supporting 'active', 'hold', and 'transferring' states. Uses `Clock` icon from lucide-react. Imports `CallActiveHeader.css`.

As a frontend developer, implement the CMSHero section for the CMS page. Build the static hero layout using the `ch-root` section with dual decorative glow divs (`ch-glow-primary`, `ch-glow-secondary`) for ambient background effects. Render the eyebrow badge with a dot indicator and 'Case Management Integration' label. Implement the `ch-headline` with inline accent spans highlighting 'case management' and 'DLC-AI-2'. Include the subheadline and overview paragraph with bold inline emphasis nodes. Render the primary CTA anchor (`ch-cta`) linking to /CMS with an `ArrowRight` lucide icon (size 18, strokeWidth 2.5), and a secondary link with `ExternalLink` icon (size 12). Build the `ch-stats` row with three stat cards each containing a coloured icon wrapper (`ch-stat-icon--blue` for Link2, `ch-stat-icon--green` for Database, `ch-stat-icon--amber` for RefreshCw) and stat values: '14 CMS Connectors', '2.4K Matters Synced', '99.8% Sync Uptime'. Apply all CMSHero.css styles. Note: this is the entry point for the CMS page and chains from the IntakeSummary page dependency.

As a Tech Lead, verify the end-to-end integration between the User Management frontend implementation and the User Management backend API. Ensure data flows correctly from the UserManagementTable, UserManagementForm, UserManagementHeader, and UserManagementRoles components to the /users and /roles API endpoints. Verify RBAC enforcement, bulk actions, pagination, search/filter, role assignment, and permission checkbox states are reflected correctly in the UI from live API responses. Confirm form validation errors from the API surface in the frontend form fields. Test Admin-only access restrictions.

As a Tech Lead, verify the end-to-end integration between the Alerts frontend and the Alerts & Thresholds backend API. Ensure ActiveAlerts, AlertsFilters, AlertsHistory, ThresholdConfig, AlertsHeader components correctly fetch from /alerts and /alerts/thresholds endpoints. Verify real-time alert push via WebSocket /ws/alerts updates ActiveAlerts list without page refresh. Confirm acknowledge/dismiss/resolve actions POST correctly and card disappears from active list. Test threshold range sliders PUT to /alerts/thresholds and category reset triggers correctly. Validate history table search/sort/pagination against /alerts/history endpoint.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend and the Dashboard Metrics backend API. Ensure KeyMetricsCards, LiveMetricsBanner, EscalationQueuePanel, RecentCallsTable, AlertsPanel, CallActivityChart, DashboardTopBar, DashboardSidebar components correctly fetch from /dashboard/* endpoints and receive real-time updates via WebSocket /ws/dashboard. Verify KPI cards and sparklines render live metric data correctly. Confirm escalation queue panel shows live queue with sort. Test alerts panel dismiss action. Validate session timer in DashboardTopBar is client-side only. Confirm sidebar badge counts (Call Logs: 24, Escalation Queue: 5, Voicemail: 3, Alerts: 2) are driven from live API data.

As a Tech Lead, verify the end-to-end integration between the NLU dialogue engine and the questionnaire engine API. Confirm that the voice agent NLU correctly routes callers to the appropriate questionnaire (housing homelessness, housing disrepair, data claims) based on stated matter type. Verify branching logic is executed correctly in real call sessions — conditional routing, skip logic, and re-prompting for ambiguous answers all behave per FR-04, FR-05, FR-08. Test urgency flag detection triggers immediate escalation via FR-06 pathway. Validate intake responses are written to the database correctly and available for AI summarisation. Test with all three Phase 1 questionnaire types.

As a frontend developer, implement the EscalationQueueDetail section for the EscalationQueue page. This section renders a sliding detail panel for a selected escalation record using React useState hooks (panelOpen, closing, qaOpen, selected). The demo ESCALATION object contains: client (name Marcus Johnson, phone, dob), matter (type Housing Homelessness, ref MAT-2026-00471-SOL), urgency 'urgent' with urgency_reason, a long context_summary paragraph, a questionnaire array of 5 Q&A pairs, ai_notes recommendation text, escalated_at and wait_duration. openPanel() sets panelOpen=true and selected=true; closePanel() sets closing=true then after 200ms delay resets panel (slide-out animation). The panel renders: header with ESC-2847 ID badge and urgency pill (eqd-urgency--urgent class from isUrgent boolean), client details block with Phone/Calendar/Clock/User Lucide icons, matter reference row, urgency reason alert (AlertTriangle icon), context summary card (FileText icon), AI notes card (Sparkles icon with eqd-ai-notes styling), collapsible Q&A accordion (ChevronDown toggling qaOpen), and action buttons for Accept (CheckCircle2, ArrowRight), Decline (XCircle), and Message (MessageSquare). A trigger button outside the panel calls openPanel(). renderDesktopPanel() is the main render method. Import from '../styles/EscalationQueueDetail.css'.

As a frontend developer, implement the VoicemailActions section for the Voicemail page. This section renders a conditional bulk-action toolbar that returns null when selectedCount is 0 (no selection). State: selectedCount (useState 3, simulating a pre-selected state). When visible, it renders two responsive layouts: a desktop toolbar (va-desktop) and a mobile bottom bar (va-mobile). The desktop toolbar shows a selection count badge with label ('voicemail selected' / 'voicemails selected' pluralised), and 5 action buttons: Mark Resolved (CheckCircle icon, sets selectedCount to 0), Schedule Callback (Calendar icon, logs action), Delete (Trash2 icon, sets selectedCount to 0), Export (Download icon, logs export), and Deselect (X icon, sets selectedCount to 0). The mobile bottom bar (va-mobile-inner) mirrors these actions in a compact layout with MoreHorizontal icon for overflow. All buttons include title attributes for accessibility. The section uses aria-label 'Bulk voicemail actions' on the root section and role='toolbar' on the mobile bar. Import CheckCircle, Calendar, Trash2, Download, X, MoreHorizontal from lucide-react.

As a frontend developer, implement the QBEditor section — the most complex section of the QuestionnaireBuilder page. Use `useState`, `useCallback`, `useRef`, `useEffect`, `useMemo` for full editor state. Render the INITIAL_QUESTIONS array (yes_no, text, multiple_choice, date types) as a drag-and-drop sortable list via `GripVertical` handles. Each question card shows: type icon (`AlignLeft`, `List`, `ToggleLeft`, `Calendar`), editable question text, required toggle, visibility toggle (`Eye`/`EyeOff`), delete (`Trash2`), and add question (`Plus`) controls. Implement a branching logic panel: per-question branching rules with `CONDITION_OPERATORS` (equals, not_equals, contains, >, <) and a target question `ArrowRight` selector. Add a D3-powered branching flow visualisation via `useEffect` / `useMemo` that renders an SVG node-link diagram of question dependencies. Implement the `EditorBackground` sub-component: a Three.js scene with 18 interconnected sphere nodes (`THREE.SphereGeometry(0.06)`) using `THREE.MeshBasicMaterial` with HSL colours, animated with `requestAnimationFrame`, mounted by appending `renderer.domElement` to a container ref. Add a Save button with `Save` icon. Apply `QBEditor.css`.

As a frontend developer, implement the AuditTrailRollback section for the AuditTrail page. Build a modal/panel rollback confirmation dialog with three internal states: default detail view, processing state (atrb-processing with atrb-spinner), and result state (atrb-result-success or atrb-result-error). The panel header (atrb-header) shows a RotateCcw icon, title, subtitle, and X close button. The atrb-body contains: (1) atrb-details-grid showing entryDetails object fields (id 'CFG-2026-08291', timestamp, user, action, target, description) as label/value pairs with atrb-detail-value-mono for code-style fields; (2) atrb-confirm-visual with a Three.js Canvas (imported from three) for a decorative 3D confirmation visual alongside confirm icon, text, and subtext; (3) atrb-revert-section listing revertItems array (3 items: 'Branching Logic: Section 4 Threshold', 'Question: Q4.2...', third item) each with typed icon (Settings/FileCode/Lock for config/content/permission types), name, description, and color-coded type badge (atrb-revert-type-config/content/permission); (4) atrb-reason-section with required textarea (atrb-reason-input) bound to reason state with Info icon hint (atrb-reason-hint); (5) atrb-actions row with Cancel (atrb-btn-cancel) and Confirm Rollback (atrb-btn-confirm with Undo2 icon) buttons. Visibility toggled via atrb-hidden class. Uses useState, useRef, useEffect, useCallback. Imports RotateCcw, X, Calendar, User, Hash, FileText, AlertTriangle, Undo2, Info, CheckCircle2, XCircle, ShieldAlert, Settings, FileCode, Lock from lucide-react and * as THREE from three. Import AuditTrailRollback.css.

As a frontend developer, implement the CallActivePanel section for the CallActive page. This section renders the live AI call interaction panel using `useState` (callDuration, currentQa, isListening) and `useEffect`. It includes: a live call duration timer formatted MM:SS; a waveform/audio status card with `cap-waveform-dot` live indicator; a QA conversation display driven by `QA_HISTORY` array and `currentQa` state showing question/response bubbles with timestamps; a simulated QA progression via `setTimeout` (4s delay auto-advancing to caller response); `handleNextAction` to push the next question into `currentQa`; `handleEscalate` to trigger duty solicitor escalation text; caller info block with `CALLER_DATA` (name: 'Sarah Mitchell', initials: 'SM', phone, priorCalls: 3, isReturningClient: true); `Phone`, `ArrowRight`, `AlertTriangle`, `Volume2` icons from lucide-react. Imports `CallActivePanel.css`.

As a frontend developer, implement the CallContextPanel section for the CallActive page. This section renders a contextual sidebar panel using `useState` (snapshotOpen, drawerOpen). It includes: a mobile-responsive drawer toggled by `toggleDrawer` (fires on `window.innerWidth < 768`) with `ccp-drawer-handle` and `ccp-drawer-closed` CSS class; a header with `AlertTriangle` icon and 'HIGH PRIORITY' badge; urgency flags rendered from `URGENCY_FLAGS` array (4 items: 'Homelessness Risk', 'Urgent Deadline', 'SRA Regulated Matter', 'Fee Earner Available') as `ccp-urgency-chip` elements with severity classes (`--red`, `--amber`, `--green`) and lucide icons; a collapsible 'Intake Data Snapshot' section toggled by `setSnapshotOpen` displaying 8 QA pairs from `QA_DATA` (including highlighted rows for 'Existing Client' CMS ref and 'Notice Received' Section 21 date); recommended fee earner card showing 'Sarah Gilbert', 'Senior Associate — Housing', availability 'online'. Icons: `AlertTriangle`, `Clock`, `CheckCircle2`, `ChevronDown`, `UserCheck`, `FileText`, `ExternalLink`, `PhoneForwarded`, `Info`. Imports `CallContextPanel.css`.

As a frontend developer, implement the CallTranscriptPanel section for the CallActive page. This section renders a scrollable live transcript panel using `useState` (autoScroll, copied) and `useRef` (scrollRef, bottomRef). It includes: a `TRANSCRIPT_LINES` array of 12+ conversation entries with `timestamp`, `speaker`, `text`, and `speakerType` ('agent'/'caller') fields rendered as alternating chat bubbles; auto-scroll to bottom via `scrollRef`/`bottomRef` with a toggle button; a copy-to-clipboard action using `useCallback` that sets `copied` state with `Check` icon feedback (resets after 2s); a 'Scroll to bottom' chevron button (`ChevronDown`) that appears when not auto-scrolling; a panel header with `MessageSquare` icon and `Clock` timestamp display. Speaker bubbles differentiated by `speakerType` CSS classes. All transcript content in English (legal housing intake context). Imports `CallTranscriptPanel.css`.

As a frontend developer, implement the CallControlsFooter section for the CallActive page. This section renders the call control bar using `useState` (onHold, muted, transferOpen, transferStatus, callSeconds) and `useEffect` for a live duration timer. It includes: a `TransferIndicator` sub-component that maps `transferStatus` ('idle', 'ready', 'progress', 'complete', 'failed') to config objects with lucide icons (`ArrowRightLeft`, `Clock`, `CheckCircle2`, `AlertCircle`), label, message, CSS class, and `dotColor`; hold toggle (`handleHold`) using `Pause`/`Play` icons; mute toggle (`handleMute`) using `Mic`/`MicOff` icons; end call button (`handleEnd`) navigating to `/CallLogs` via `window.location.href`; transfer flow (`handleTransfer`) cycling through idle → ready → progress → complete → idle with a `setTimeout` simulating warm handoff completion; live call time formatted as MM:SS or HH:MM:SS conditionally; transfer panel overlay toggled by `transferOpen` state. Icons: `PhoneOff`, `Mic`, `MicOff`, `Pause`, `Play`, `ArrowRightLeft`, `Clock`, `AlertCircle`, `CheckCircle2`. Imports `CallControlsFooter.css`.

As a frontend developer, implement the CMSMatterList section for the CMS page. Build interactive matter list with `useState` for `search`, `filter`, `page`, and `toast` state. Use `useMemo` to compute the `filtered` array by applying case-insensitive search across `id`, `client`, and `type` fields of the 10-item `MATTERS` constant, then applying the `filter` dropdown value. Implement pagination with `PAGE_SIZE = 8` and `totalPages` calculation, rendering `ChevronLeft`/`ChevronRight` controls. Render the search input with `Search` icon and a `SlidersHorizontal` filter dropdown listing `MATTER_TYPES` (All Types, Housing Disrepair, Homelessness, Data Claims, Immigration, Public Law, Family Law). For each matter row display matter ID, client name, type badge, sync timestamp, and a `STATUS_CONFIG`-driven status chip (Active → `CheckCircle2`/`cml-active`, Pending → `Clock`/`cml-pending`, Failed → `AlertTriangle`/`cml-failed`). Include action buttons per row: `ExternalLink`, `RefreshCw`, `Unlink` with toast feedback via `setToast`. Show `FileText` empty state and `Database` icon in the list header. Apply all CMSMatterList.css styles.

As a frontend developer, implement the CMSIntegrationStatus section for the CMS page. Use `useState`, `useRef`, and `useEffect` to manage component state and DOM references. Render four `HEALTH_CARDS` as metric cards, each with a lucide icon (`Server`, `Zap`, `AlertTriangle`, `Clock`), a metric value, label, description, and a status badge — where `status: 'healthy'` renders 'Operational'/'Normal'/'Current' and `status: 'warning'` renders 'Elevated'. Build the `CONNECTION_LOGS` feed listing 9 log entries with per-entry status icons: `CheckCircle` for healthy, `AlertTriangle` for warning, `XCircle` for error — each with message, detail text, and ISO timestamp formatted for display. Include a `RefreshCw` manual refresh trigger and `Activity`/`Wifi` icons for the section header. Include a `FileText` link for viewing full logs. Apply `useEffect`-driven auto-scroll or polling logic for the log feed. Apply all CMSIntegrationStatus.css styles.

As a frontend developer, implement the CMSConfigurationGuide section for the CMS page. Use `useState`, `useRef`, `useEffect`, and `useMemo` to drive an accordion-based guide. Render the `GUIDE_SECTIONS` array (5 sections: auth-setup, api-key-mgmt, endpoint-config, webhook-setup, troubleshooting) as expandable accordion panels with step number, title, tag pill, badge, and section `Icon` (Settings, Key, Link2, Webhook, Wrench). Each expanded panel shows: description text, a `substeps` list with optional `note` fields, a syntax-highlighted `code.snippet` block with a `Copy`/`Check` clipboard toggle, and an `example` verification callout. Implement a `Search` input with `X` clear button that uses `useMemo` to filter visible sections. Add `ChevronDown` animated expand chevrons and `HelpCircle`/`Info`/`AlertCircle`/`Lightbulb` callout icons for contextual callouts within substeps. Integrate a `THREE.js` decorative 3D element via `useRef`/`useEffect` for background visual enhancement (not interactive). Apply all CMSConfigurationGuide.css styles.

As a frontend developer, implement the CMSDataSync section for the CMS page. Use `useState`, `useRef`, and `useMemo` for sync schedule selection, conflict resolution state, and history log rendering. Build a sync schedule selector rendering `SYNC_OPTIONS` (Immediate/Zap, Daily/Calendar, Weekly/Clock) as toggleable option cards. Render the `FIELD_MAPPINGS` table showing ProClaim → VoiceIntake field pairs (`matter.client_name` → `intake.client_full_name`, etc.) with mapped/unmapped status indicators using `CheckCircle2`/`XCircle`. Implement the `INITIAL_CONFLICTS` conflict resolution UI with CMS value vs platform value comparison and resolution actions using `AlertCircle`/`GitMerge` icons. Build the `TIMELINE_EVENTS` sync history feed (5 entries) with `success`/`failed`/`partial` status chips and `History` icon header. Render the `HISTORY_LOG` with `Play`/`Circle`/`Loader2` state indicators. Integrate a `@react-three/fiber` Canvas with `OrbitControls` and `Text` from `@react-three/drei` for a 3D data-flow visualisation using `useFrame` animation loop and `THREE.js` geometry. Include `ArrowLeftRight`, `Globe`, `Database`, `Timer`, `RefreshCw` icons throughout. Apply all CMSDataSync.css styles.

As a frontend developer, implement the CMSCTASection section for the CMS page. Use `useState` for `revealed` boolean, `useRef` for `rootRef` (section root) and `charRefs` (per-character span refs), and `useMemo` to split the headline string 'Connect your CMS' into the `chars` array. Wire an `IntersectionObserver` in `useEffect` with `threshold: 0.3` on `rootRef` to set `revealed = true` on first intersection, then disconnect. Render the headline as individual `<span>` elements mapped from `chars` with `ccta-char` class, `ccta-space` for space characters, and staggered `animationDelay` of `i * 0.04s` per character — toggling `ccta-reveal` class on the parent `h2` when revealed. Apply `ccta-reveal` class to subheadline, `ccta-actions` div, and `ccta-trust` div based on `revealed` state. Render two CTA anchors: `ccta-btn-primary` ('Start Integration' → /CMS with ArrowRight size 18) and `ccta-btn-secondary` ('View API Docs' → /Scripts with ExternalLink size 17). Render `trustItems` array as `ccta-trust-item` divs with ShieldCheck ('SOC 2 Certified'), Zap ('Real-time sync'), and Lock ('Encrypted transfer') icons. Apply all CMSCTASection.css styles.

As a Tech Lead, verify the end-to-end integration between the Call Logs frontend and the Call Logs backend API. Ensure CallLogsTable, CallLogsFilterBar, CallLogsHeader, and CallLogsDetail components correctly fetch, filter, sort, and paginate call records from the /calls API. Verify the custom 'calllogs-filter-apply' event wires correctly to API query parameters. Confirm call detail panel loads transcript, timeline, AI summary, and audio playback URL. Test CSV export triggers correctly. Verify urgency filter chips and status dropdown map to correct API filter values.

As a Tech Lead, verify the end-to-end integration between the Intake Summary frontend and the Intake Summary backend API. Ensure AIGeneratedSummary, AttendanceNoteEditor, CaseDetailsPanel, ApprovalActions, SummaryMetadata, RelatedCallsContext, IntakeSummaryHeader components correctly load data from /intake-summaries/{id}. Verify attendance note auto-fill loads AI-generated text from the API. Confirm approve/reject/save-draft/send-for-review actions POST to correct endpoints and UI status badge updates. Test related calls panel fetches from /intake-summaries/{id}/related-calls. Verify CMS matter record link navigates correctly post-approval.

As a Tech Lead, verify the end-to-end integration between the Reports frontend and the Reports & Analytics backend API. Ensure ReportsMetricsCards, ReportsCharts, ReportsTable, ReportsHeader, ReportsFilters, ReportsExport components correctly fetch data from /reports/* endpoints. Verify date range presets correctly translate to API query params. Confirm chart data (line, bar) renders from live API time-series responses. Test table search/sort/pagination against /reports/table endpoint. Validate export triggers POST /reports/export with correct format and options payload and handles file download. Confirm sparkline data matches API metric trend arrays.

As a Tech Lead, verify the end-to-end integration between the Scripts frontend and the Scripts Management backend API. Ensure ScriptsBrowser, ScriptsEditor, ScriptsPreview, ScriptsActions, ScriptsHero components correctly fetch, create, update, and delete scripts via the /scripts API. Verify category filter and search params map to API query parameters. Confirm publish new version POSTs to /scripts/publish and version history displays from /scripts/versions. Test rollback and reset-to-default actions. Validate available variables list loads from /scripts/variables and variable insertion in editor works end-to-end.

As a frontend developer, implement the QBPublish section for the QuestionnaireBuilder page. Use `useState`, `useRef`, `useMemo`, `useCallback` for version selection and panel state. Render the `versionData` array (v4.2.0 active, v4.1.0 draft, v4.0.1 archived, v4.0.0 archived) as version cards with author, date, status badge, and change notes. Include action buttons per version: Publish (`Send`), Rollback (`RotateCcw`), Archive (`Archive`), Create Draft (`Plus`). Display an `auditLog` feed with type-differentiated icons (`CheckCircle2` publish, `FileEdit` edit, `History` rollback, `Clock` deprecate). Implement the 3D timeline using `@react-three/fiber` `Canvas` and `@react-three/drei` (`Text`, `Line`, `Sphere`, `Html`): render `TimelineNode` sub-components at positions along a horizontal axis, each using `octahedronGeometry`, `meshStandard` material, `useFrame` for `rotation.y` spin and scale lerp on hover/select (target scale 1.35). Wire `onPointerOver`, `onPointerOut`, `onClick` to update selected version state and highlight the corresponding version card. Apply `QBPublish.css`.

As a Tech Lead, verify the end-to-end integration between the Escalation Queue frontend and the Escalation backend API. Ensure EscalationQueueList, EscalationQueueDetail, EscalationQueueHeader, EscalationQueueFilters components correctly load queue data and receive real-time updates via WebSocket /ws/escalations. Verify accept/decline/message actions POST to correct API endpoints and UI state updates accordingly. Confirm context summary, Q&A accordion, AI notes, and urgency flags all render live data correctly. Test warm transfer flow triggers context handoff to receiving agent.

As a Tech Lead, verify the end-to-end integration between the Voicemail frontend and the Voicemail & Callbacks backend API. Ensure VoicemailMessageList, VoicemailCallbackScheduler, VoicemailStats, VoicemailPageHeader, VoicemailActions components correctly fetch voicemail data from /voicemails API. Verify stat counters (total, urgent, scheduled) match API /voicemails/stats response. Confirm callback scheduling form POSTs to /voicemails/{id}/schedule-callback with correct payload. Test bulk resolve action and message playback state. Validate filter tabs and sort options map to correct API query params.

As a Tech Lead, verify the end-to-end integration between the CMS frontend and the CMS Integration backend API. Ensure CMSMatterList, CMSIntegrationStatus, CMSDataSync components correctly fetch data from /cms/matters, /cms/status, /cms/logs, /cms/field-mappings, /cms/sync-history endpoints. Verify matter list search/filter/pagination operates against live API data. Confirm manual sync trigger and field mapping updates POST correctly. Test connection log auto-refresh polling. Validate sync conflict resolution UI correctly receives conflict data and submits resolution. Confirm matter unlink/refresh actions update records correctly.

As a Tech Lead, verify the end-to-end integration between the Audit Trail frontend and the Audit Trail backend API. Ensure AuditTrailTimeline, AuditTrailFilters, AuditTrailRollback, AuditTrailHero components correctly fetch audit entries from /audit with pagination, search, date range, user, and change type filters. Verify before/after JSON diff display renders correctly from API response. Confirm rollback modal POSTs to /audit/{id}/rollback with reason field and only Admins can trigger rollback (RBAC). Test that all configuration changes across the platform (questionnaires, scripts, users, thresholds) auto-appear in the audit feed.

As a Tech Lead, verify the end-to-end integration of the AI summarisation pipeline with the intake summary frontend. Confirm that on call completion the AI engine is triggered via POST /ai/summarise, the generated summary is stored and retrievable via GET /ai/summaries/{call_id}, and that the AIGeneratedSummary and AttendanceNoteEditor frontend components display the LLM-generated text. Verify confidence score display in SummaryMetadata. Test the human edit/override flow saves correctly via PUT /ai/summaries/{call_id}. Confirm the summary is auto-attached to the CMS matter record via CMS integration. Validate attendance note format matches DLS standard.

As a Tech Lead, verify the end-to-end integration between the Questionnaire Builder frontend and the Questionnaire Engine backend API. Ensure QBEditor, QBLibrary, QBCreateNew, QBPublish, and QBHeader components correctly load, save, and publish questionnaires via the /questionnaires API. Verify branching logic configuration is persisted and retrieved correctly, version history displays accurately, and publish/rollback/archive actions trigger correct API state transitions. Test that published questionnaires are available to the voice agent questionnaire engine.