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,201 +162,284 @@ export default function FlowPilotAnalyticsPage() {
         </div>
       </div>
 
-      {/* Top row — Key metrics */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
-        <MetricCard
-          icon={BarChart3}
-          label="Total Sessions"
-          value={dashboard.total_sessions}
-          iconColor="#22d3ee"
-        />
-        <MetricCard
-          icon={CheckCircle2}
-          label="Resolution Rate"
-          value={`${dashboard.resolution_rate}%`}
-          iconColor="#34d399"
-        />
-        <MetricCard
-          icon={Clock}
-          label="Avg MTTR"
-          value={dashboard.mttr_minutes ? `${Math.round(dashboard.mttr_minutes)}m` : '—'}
-          iconColor="#60a5fa"
-        />
-        <MetricCard
-          icon={Star}
-          label="Avg Rating"
-          value={dashboard.avg_rating ? `${dashboard.avg_rating.toFixed(1)}/5` : '—'}
-          iconColor="#fbbf24"
-        />
-        <MetricCard
-          icon={Ticket}
-          label="PSA Link Rate"
-          value={dashboard.psa_metrics ? `${dashboard.psa_metrics.ticket_link_rate}%` : '—'}
-          iconColor="#e879f9"
-        />
+      {/* 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>
 
-      {/* Second row — Charts */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* MTTR Trend */}
-        <div className="glass-card-static p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
-            MTTR Trend
-          </h3>
-          {dashboard.mttr_trend.length > 0 ? (
-            <ResponsiveContainer width="100%" height={220}>
-              <AreaChart data={dashboard.mttr_trend}>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
-                <XAxis
-                  dataKey="date"
-                  tick={{ fill: '#8891a0', fontSize: 10 }}
-                  tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
+      {/* 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
+              icon={BarChart3}
+              label="Total Sessions"
+              value={dashboard.total_sessions}
+              iconColor="#22d3ee"
+            />
+            <MetricCard
+              icon={CheckCircle2}
+              label="Resolution Rate"
+              value={`${dashboard.resolution_rate}%`}
+              iconColor="#34d399"
+            />
+            <MetricCard
+              icon={Clock}
+              label="Avg MTTR"
+              value={dashboard.mttr_minutes ? `${Math.round(dashboard.mttr_minutes)}m` : '—'}
+              iconColor="#60a5fa"
+            />
+            <MetricCard
+              icon={Star}
+              label="Avg Rating"
+              value={dashboard.avg_rating ? `${dashboard.avg_rating.toFixed(1)}/5` : '—'}
+              iconColor="#fbbf24"
+            />
+            <MetricCard
+              icon={Ticket}
+              label="PSA Link Rate"
+              value={dashboard.psa_metrics ? `${dashboard.psa_metrics.ticket_link_rate}%` : '—'}
+              iconColor="#e879f9"
+            />
+          </div>
+
+          {/* Second row — Charts */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* MTTR Trend */}
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+                MTTR Trend
+              </h3>
+              {dashboard.mttr_trend.length > 0 ? (
+                <ResponsiveContainer width="100%" height={220}>
+                  <AreaChart data={dashboard.mttr_trend}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                    <XAxis
+                      dataKey="date"
+                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
+                    />
+                    <YAxis
+                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      tickFormatter={(v) => `${Math.round(v)}m`}
+                    />
+                    <Tooltip
+                      contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
+                      labelStyle={{ color: '#f8fafc' }}
+                      formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="mttr_minutes"
+                      stroke="#22d3ee"
+                      fill="url(#mttrGradient)"
+                      strokeWidth={2}
+                    />
+                    <defs>
+                      <linearGradient id="mttrGradient" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
+                        <stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                  </AreaChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
+                  No data for this period
+                </div>
+              )}
+            </div>
+
+            {/* Domain Breakdown */}
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+                Sessions by Domain
+              </h3>
+              {dashboard.sessions_by_domain.length > 0 ? (
+                <ResponsiveContainer width="100%" height={220}>
+                  <BarChart data={dashboard.sessions_by_domain} layout="vertical">
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                    <XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
+                    <YAxis
+                      type="category"
+                      dataKey="domain"
+                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      width={100}
+                    />
+                    <Tooltip
+                      contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
+                      labelStyle={{ color: '#f8fafc' }}
+                    />
+                    <Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
+                    <Bar dataKey="escalated" name="Escalated" fill="#fbbf24" radius={[0, 4, 4, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
+                  No domain data
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Third row — Confidence + Knowledge Coverage */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* Confidence Breakdown */}
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+                Confidence Tiers
+              </h3>
+              <div className="space-y-3">
+                <ConfidenceTierRow
+                  label="Guided"
+                  count={conf.guided_sessions}
+                  rate={conf.guided_resolution_rate}
+                  color="#34d399"
+                  total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
                 />
-                <YAxis
-                  tick={{ fill: '#8891a0', fontSize: 10 }}
-                  tickFormatter={(v) => `${Math.round(v)}m`}
+                <ConfidenceTierRow
+                  label="Exploring"
+                  count={conf.exploring_sessions}
+                  rate={conf.exploring_resolution_rate}
+                  color="#fbbf24"
+                  total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
                 />
-                <Tooltip
-                  contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
-                  labelStyle={{ color: '#f8fafc' }}
-                  formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
+                <ConfidenceTierRow
+                  label="Discovery"
+                  count={conf.discovery_sessions}
+                  rate={conf.discovery_resolution_rate}
+                  color="#f87171"
+                  total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
                 />
-                <Area
-                  type="monotone"
-                  dataKey="mttr_minutes"
-                  stroke="#22d3ee"
-                  fill="url(#mttrGradient)"
-                  strokeWidth={2}
-                />
-                <defs>
-                  <linearGradient id="mttrGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
-                    <stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
-                  </linearGradient>
-                </defs>
-              </AreaChart>
-            </ResponsiveContainer>
+              </div>
+            </div>
+
+            {/* Knowledge Coverage */}
+            <div className="glass-card-static p-3 sm:p-5">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+                Knowledge Coverage
+              </h3>
+              <div className="grid grid-cols-2 gap-3 mb-4">
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Total Flows</p>
+                  <p className="text-lg font-semibold text-foreground">{dashboard.knowledge_coverage.total_flows}</p>
+                </div>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">AI-Generated</p>
+                  <p className="text-lg font-semibold text-gradient-brand">{dashboard.knowledge_coverage.ai_generated_flows}</p>
+                </div>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Pending Review</p>
+                  <p className="text-lg font-semibold text-amber-400">{dashboard.knowledge_coverage.total_proposals_pending}</p>
+                </div>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Approved This Period</p>
+                  <p className="text-lg font-semibold text-emerald-400">{dashboard.knowledge_coverage.proposals_approved_this_period}</p>
+                </div>
+              </div>
+              {dashboard.knowledge_coverage.total_proposals_pending > 0 && (
+                <Link
+                  to="/review-queue"
+                  className="flex items-center gap-2 text-xs text-primary hover:underline"
+                >
+                  <ArrowUpRight size={12} />
+                  Review {dashboard.knowledge_coverage.total_proposals_pending} pending proposals
+                </Link>
+              )}
+            </div>
+          </div>
+
+          {/* Fourth row — Knowledge Gaps */}
+          {gaps && gaps.gaps.length > 0 && (
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 px-1">
+                <AlertTriangle size={14} className="text-amber-400" />
+                <h3 className="font-heading text-sm font-semibold text-foreground">
+                  Knowledge Gaps ({gaps.gaps.length})
+                </h3>
+              </div>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                {gaps.gaps.map((gap, i) => (
+                  <GapCard key={i} gap={gap} />
+                ))}
+              </div>
+            </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 h-[220px] text-sm text-muted-foreground">
-              No data for this period
+            <div className="flex items-center justify-center min-h-[200px]">
+              <p className="text-sm text-muted-foreground">No coverage data available</p>
             </div>
           )}
         </div>
+      )}
 
-        {/* Domain Breakdown */}
-        <div className="glass-card-static p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
-            Sessions by Domain
-          </h3>
-          {dashboard.sessions_by_domain.length > 0 ? (
-            <ResponsiveContainer width="100%" height={220}>
-              <BarChart data={dashboard.sessions_by_domain} layout="vertical">
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
-                <XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
-                <YAxis
-                  type="category"
-                  dataKey="domain"
-                  tick={{ fill: '#8891a0', fontSize: 10 }}
-                  width={100}
-                />
-                <Tooltip
-                  contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
-                  labelStyle={{ color: '#f8fafc' }}
-                />
-                <Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
-                <Bar dataKey="escalated" name="Escalated" fill="#fbbf24" radius={[0, 4, 4, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
+      {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 h-[220px] text-sm text-muted-foreground">
-              No domain data
+            <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>
-      </div>
+      )}
 
-      {/* Third row — Confidence + Knowledge Coverage */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Confidence Breakdown */}
-        <div className="glass-card-static p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
-            Confidence Tiers
-          </h3>
-          <div className="space-y-3">
-            <ConfidenceTierRow
-              label="Guided"
-              count={conf.guided_sessions}
-              rate={conf.guided_resolution_rate}
-              color="#34d399"
-              total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
-            />
-            <ConfidenceTierRow
-              label="Exploring"
-              count={conf.exploring_sessions}
-              rate={conf.exploring_resolution_rate}
-              color="#fbbf24"
-              total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
-            />
-            <ConfidenceTierRow
-              label="Discovery"
-              count={conf.discovery_sessions}
-              rate={conf.discovery_resolution_rate}
-              color="#f87171"
-              total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
-            />
-          </div>
-        </div>
-
-        {/* Knowledge Coverage */}
-        <div className="glass-card-static p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
-            Knowledge Coverage
-          </h3>
-          <div className="grid grid-cols-2 gap-3 mb-4">
-            <div className="rounded-lg bg-card/50 p-3">
-              <p className="text-xs text-muted-foreground">Total Flows</p>
-              <p className="text-lg font-semibold text-foreground">{dashboard.knowledge_coverage.total_flows}</p>
+      {activeTab === 'psa' && (
+        <div>
+          {psaLoading ? (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
             </div>
-            <div className="rounded-lg bg-card/50 p-3">
-              <p className="text-xs text-muted-foreground">AI-Generated</p>
-              <p className="text-lg font-semibold text-gradient-brand">{dashboard.knowledge_coverage.ai_generated_flows}</p>
+          ) : 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="rounded-lg bg-card/50 p-3">
-              <p className="text-xs text-muted-foreground">Pending Review</p>
-              <p className="text-lg font-semibold text-amber-400">{dashboard.knowledge_coverage.total_proposals_pending}</p>
+          ) : (
+            <div className="flex items-center justify-center min-h-[200px]">
+              <p className="text-sm text-muted-foreground">No PSA data available</p>
             </div>
-            <div className="rounded-lg bg-card/50 p-3">
-              <p className="text-xs text-muted-foreground">Approved This Period</p>
-              <p className="text-lg font-semibold text-emerald-400">{dashboard.knowledge_coverage.proposals_approved_this_period}</p>
-            </div>
-          </div>
-          {dashboard.knowledge_coverage.total_proposals_pending > 0 && (
-            <Link
-              to="/review-queue"
-              className="flex items-center gap-2 text-xs text-primary hover:underline"
-            >
-              <ArrowUpRight size={12} />
-              Review {dashboard.knowledge_coverage.total_proposals_pending} pending proposals
-            </Link>
           )}
         </div>
-      </div>
-
-      {/* Fourth row — Knowledge Gaps */}
-      {gaps && gaps.gaps.length > 0 && (
-        <div className="space-y-3">
-          <div className="flex items-center gap-2 px-1">
-            <AlertTriangle size={14} className="text-amber-400" />
-            <h3 className="font-heading text-sm font-semibold text-foreground">
-              Knowledge Gaps ({gaps.gaps.length})
-            </h3>
-          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-            {gaps.gaps.map((gap, i) => (
-              <GapCard key={i} gap={gap} />
-            ))}
-          </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[]
+}