feat(analytics): add tabbed layout with coverage heatmap

Add Phase 5 types (CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics)
and API methods. Refactor FlowPilotAnalyticsPage with tab bar (Overview,
Coverage, Flow Quality, PSA) with lazy data loading. Create CoverageHeatmap
component with color-coded resolution/escalation/guided rate cells.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/api/flowpilotAnalytics.ts

@@ -1,5 +1,5 @@
 import apiClient from './client'
-import type { FlowPilotDashboard, KnowledgeGapReport } from '@/types/flowpilot-analytics'
+import type { FlowPilotDashboard, KnowledgeGapReport, CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics } from '@/types/flowpilot-analytics'
 
 export const flowpilotAnalyticsApi = {
   async getDashboard(period: string = '30d'): Promise<FlowPilotDashboard> {
@@ -15,6 +15,27 @@ export const flowpilotAnalyticsApi = {
     })
     return response.data
   },
+
+  async getCoverage(period: string = '30d'): Promise<CoverageResponse> {
+    const response = await apiClient.get<CoverageResponse>('/analytics/flowpilot/coverage', {
+      params: { period },
+    })
+    return response.data
+  },
+
+  async getFlowQuality(period: string = '30d', sort: string = 'quality'): Promise<FlowQualityResponse> {
+    const response = await apiClient.get<FlowQualityResponse>('/analytics/flowpilot/flow-quality', {
+      params: { period, sort },
+    })
+    return response.data
+  },
+
+  async getPsaMetrics(period: string = '30d'): Promise<EnhancedPsaMetrics> {
+    const response = await apiClient.get<EnhancedPsaMetrics>('/analytics/flowpilot/psa-metrics', {
+      params: { period },
+    })
+    return response.data
+  },
 }
 
 export default flowpilotAnalyticsApi

frontend/src/components/analytics/CoverageHeatmap.tsx

@@ -0,0 +1,133 @@
+import { Link } from 'react-router-dom'
+import { Plus, MapPin } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { CoverageResponse } from '@/types/flowpilot-analytics'
+
+interface CoverageHeatmapProps {
+  data: CoverageResponse
+}
+
+function getCellStyle(value: number, thresholds: { green: number; amber: number }, inverse?: boolean) {
+  if (inverse) {
+    if (value <= thresholds.green) return 'bg-emerald-400/10 text-emerald-400'
+    if (value <= thresholds.amber) return 'bg-amber-400/10 text-amber-400'
+    return 'bg-rose-500/10 text-rose-500'
+  }
+  if (value >= thresholds.green) return 'bg-emerald-400/10 text-emerald-400'
+  if (value >= thresholds.amber) return 'bg-amber-400/10 text-amber-400'
+  return 'bg-rose-500/10 text-rose-500'
+}
+
+function getFlowCountStyle(count: number) {
+  if (count >= 5) return 'bg-emerald-400/10 text-emerald-400'
+  if (count >= 1) return 'bg-amber-400/10 text-amber-400'
+  return 'bg-rose-500/10 text-rose-500'
+}
+
+export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
+  if (data.domains.length === 0) {
+    return (
+      <div className="glass-card-static p-6">
+        <div className="flex items-center gap-2 mb-2">
+          <MapPin size={16} className="text-foreground" />
+          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          No session data for this period. Start using FlowPilot to see coverage metrics.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="glass-card-static p-3 sm:p-5">
+      <div className="mb-4">
+        <div className="flex items-center gap-2 mb-1">
+          <MapPin size={16} className="text-foreground" />
+          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Resolution coverage and knowledge gaps by problem domain
+        </p>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-border">
+              <th className="px-3 py-2 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Domain
+              </th>
+              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Flows
+              </th>
+              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Sessions
+              </th>
+              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Resolution %
+              </th>
+              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Escalation %
+              </th>
+              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+                Guided %
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.domains.map((row) => (
+              <tr key={row.domain} className="border-b border-border">
+                <td className="px-3 py-2 text-sm text-foreground font-medium">
+                  {row.domain}
+                </td>
+                <td className="px-3 py-2 text-sm text-right">
+                  {row.flow_count === 0 ? (
+                    <Link
+                      to="/trees/new"
+                      className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                    >
+                      <Plus size={10} />
+                      Create Flow
+                    </Link>
+                  ) : (
+                    <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getFlowCountStyle(row.flow_count))}>
+                      {row.flow_count}
+                    </span>
+                  )}
+                </td>
+                <td className="px-3 py-2 text-sm text-right text-muted-foreground">
+                  {row.session_count}
+                </td>
+                <td className="px-3 py-2 text-sm text-right">
+                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.resolution_rate, { green: 0.75, amber: 0.5 }))}>
+                    {(row.resolution_rate * 100).toFixed(1)}%
+                  </span>
+                </td>
+                <td className="px-3 py-2 text-sm text-right">
+                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.escalation_rate, { green: 0.10, amber: 0.25 }, true))}>
+                    {(row.escalation_rate * 100).toFixed(1)}%
+                  </span>
+                </td>
+                <td className="px-3 py-2 text-sm text-right">
+                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.guided_rate, { green: 0.60, amber: 0.30 }))}>
+                    {(row.guided_rate * 100).toFixed(1)}%
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          {data.unmapped_session_count > 0 && (
+            <tfoot>
+              <tr>
+                <td colSpan={6} className="px-3 py-2 text-xs text-muted-foreground">
+                  {data.unmapped_session_count} sessions had no domain classification
+                </td>
+              </tr>
+            </tfoot>
+          )}
+        </table>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/FlowPilotAnalyticsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import {
   BarChart3, Clock, Star, CheckCircle2, ArrowUpRight,
@@ -8,9 +8,14 @@ import {
   AreaChart, Area, BarChart, Bar,
   XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
 } from 'recharts'
+import { cn } from '@/lib/utils'
 import { flowpilotAnalyticsApi } from '@/api'
 import { toast } from '@/lib/toast'
-import type { FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap } from '@/types/flowpilot-analytics'
+import CoverageHeatmap from '@/components/analytics/CoverageHeatmap'
+import type {
+  FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap,
+  CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics,
+} from '@/types/flowpilot-analytics'
 
 const PERIOD_OPTIONS = [
   { value: '7d', label: 'Last 7 days' },
@@ -18,6 +23,15 @@ const PERIOD_OPTIONS = [
   { value: '90d', label: 'Last 90 days' },
 ]
 
+const TABS = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'coverage', label: 'Coverage' },
+  { id: 'quality', label: 'Flow Quality' },
+  { id: 'psa', label: 'PSA' },
+] as const
+
+type TabId = typeof TABS[number]['id']
+
 const SEVERITY_STYLES = {
   high: 'bg-rose-500/10 text-rose-500 border-rose-500/20',
   medium: 'bg-amber-400/10 text-amber-400 border-amber-400/20',
@@ -26,10 +40,25 @@ const SEVERITY_STYLES = {
 
 export default function FlowPilotAnalyticsPage() {
   const [period, setPeriod] = useState('30d')
+  const [activeTab, setActiveTab] = useState<TabId>('overview')
   const [dashboard, setDashboard] = useState<FlowPilotDashboard | null>(null)
   const [gaps, setGaps] = useState<KnowledgeGapReport | null>(null)
   const [loading, setLoading] = useState(true)
 
+  // Lazy-loaded tab data
+  const [coverageData, setCoverageData] = useState<CoverageResponse | null>(null)
+  const [coverageLoading, setCoverageLoading] = useState(false)
+  const [qualityData, setQualityData] = useState<FlowQualityResponse | null>(null)
+  const [qualityLoading, setQualityLoading] = useState(false)
+  const [psaData, setPsaData] = useState<EnhancedPsaMetrics | null>(null)
+  const [psaLoading, setPsaLoading] = useState(false)
+
+  // Track which period each tab was loaded for
+  const coveragePeriodRef = useRef<string | null>(null)
+  const qualityPeriodRef = useRef<string | null>(null)
+  const psaPeriodRef = useRef<string | null>(null)
+
+  // Load overview data
   useEffect(() => {
     setLoading(true)
     Promise.all([
@@ -42,8 +71,50 @@ export default function FlowPilotAnalyticsPage() {
       })
       .catch(() => toast.error('Failed to load analytics'))
       .finally(() => setLoading(false))
+
+    // Reset lazy-loaded data when period changes
+    coveragePeriodRef.current = null
+    qualityPeriodRef.current = null
+    psaPeriodRef.current = null
+    setCoverageData(null)
+    setQualityData(null)
+    setPsaData(null)
   }, [period])
 
+  // Lazy-load tab data on tab switch or period change
+  useEffect(() => {
+    if (activeTab === 'coverage' && coveragePeriodRef.current !== period) {
+      setCoverageLoading(true)
+      flowpilotAnalyticsApi.getCoverage(period)
+        .then((data) => {
+          setCoverageData(data)
+          coveragePeriodRef.current = period
+        })
+        .catch(() => toast.error('Failed to load coverage data'))
+        .finally(() => setCoverageLoading(false))
+    }
+    if (activeTab === 'quality' && qualityPeriodRef.current !== period) {
+      setQualityLoading(true)
+      flowpilotAnalyticsApi.getFlowQuality(period)
+        .then((data) => {
+          setQualityData(data)
+          qualityPeriodRef.current = period
+        })
+        .catch(() => toast.error('Failed to load flow quality data'))
+        .finally(() => setQualityLoading(false))
+    }
+    if (activeTab === 'psa' && psaPeriodRef.current !== period) {
+      setPsaLoading(true)
+      flowpilotAnalyticsApi.getPsaMetrics(period)
+        .then((data) => {
+          setPsaData(data)
+          psaPeriodRef.current = period
+        })
+        .catch(() => toast.error('Failed to load PSA metrics'))
+        .finally(() => setPsaLoading(false))
+    }
+  }, [activeTab, period])
+
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
@@ -91,6 +162,27 @@ export default function FlowPilotAnalyticsPage() {
         </div>
       </div>
 
+      {/* Tab bar */}
+      <div className="flex gap-1 border-b border-border mb-6">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={cn(
+              'px-4 py-2 text-sm transition-colors',
+              activeTab === tab.id
+                ? 'border-b-2 border-primary text-foreground font-medium'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      {activeTab === 'overview' && (
+        <div className="space-y-6">
           {/* Top row — Key metrics */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
             <MetricCard
@@ -288,6 +380,68 @@ export default function FlowPilotAnalyticsPage() {
             </div>
           )}
         </div>
+      )}
+
+      {activeTab === 'coverage' && (
+        <div>
+          {coverageLoading ? (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : coverageData ? (
+            <CoverageHeatmap data={coverageData} />
+          ) : (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <p className="text-sm text-muted-foreground">No coverage data available</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'quality' && (
+        <div>
+          {qualityLoading ? (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : qualityData ? (
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">Flow Quality</h3>
+              <p className="text-xs text-muted-foreground mb-4">Quality scores and performance metrics for your flows</p>
+              <div className="text-sm text-muted-foreground">
+                {qualityData.flows.length} flows analyzed
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <p className="text-sm text-muted-foreground">No flow quality data available</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'psa' && (
+        <div>
+          {psaLoading ? (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : psaData ? (
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">PSA Metrics</h3>
+              <p className="text-xs text-muted-foreground mb-4">Time entry and ticket integration metrics</p>
+              <div className="text-sm text-muted-foreground">
+                {psaData.total_time_entries} time entries logged ({psaData.total_hours_logged.toFixed(1)} hours)
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <p className="text-sm text-muted-foreground">No PSA data available</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   )
 }
 

frontend/src/types/flowpilot-analytics.ts

@@ -77,3 +77,60 @@ export interface KnowledgeGapReport {
   generated_at: string
   gaps: KnowledgeGap[]
 }
+
+// Phase 5 — Coverage
+export interface CoverageDomainRow {
+  domain: string
+  flow_count: number
+  session_count: number
+  resolution_rate: number
+  escalation_rate: number
+  guided_rate: number
+  avg_resolution_minutes: number | null
+}
+
+export interface CoverageResponse {
+  domains: CoverageDomainRow[]
+  unmapped_session_count: number
+  total_domains: number
+}
+
+// Phase 5 — Flow Quality
+export interface FlowQualityRow {
+  flow_id: string
+  name: string
+  tree_type: string
+  usage_count: number
+  success_rate: number | null
+  last_matched_at: string | null
+  avg_confidence: number | null
+  quality_score: number
+}
+
+export interface FlowQualityResponse {
+  flows: FlowQualityRow[]
+  top_performers: FlowQualityRow[]
+  needs_attention: FlowQualityRow[]
+}
+
+// Phase 5 — Enhanced PSA
+export interface PsaFunnel {
+  total_sessions: number
+  linked_to_ticket: number
+  doc_pushed: number
+  time_entry_logged: number
+}
+
+export interface PsaDailyTrend {
+  date: string
+  entries: number
+  hours: number
+}
+
+export interface EnhancedPsaMetrics {
+  total_time_entries: number
+  total_hours_logged: number
+  avg_hours_per_session: number
+  push_funnel: PsaFunnel
+  daily_trend: PsaDailyTrend[]
+}