feat: add Flow Analytics panel with step dropoff and CSAT data

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/analytics/FlowAnalyticsPanel.tsx

@@ -0,0 +1,308 @@
+import { useState, useEffect } from 'react'
+import { Loader2, Star } from 'lucide-react'
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import { analyticsApi } from '@/api'
+import { cn } from '@/lib/utils'
+import type { FlowAnalyticsResponse, AnalyticsPeriod } from '@/types'
+
+const CHART_COLORS = {
+  resolved: '#34d399',
+  escalated: '#f87171',
+  workaround: '#fbbf24',
+  unresolved: '#94a3b8',
+}
+
+const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
+  { value: '7d', label: 'Last 7 days' },
+  { value: '30d', label: 'Last 30 days' },
+  { value: '90d', label: 'Last 90 days' },
+]
+
+interface FlowAnalyticsPanelProps {
+  treeId: string
+}
+
+export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
+  const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
+  const [data, setData] = useState<FlowAnalyticsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    setError(false)
+    analyticsApi
+      .getFlowAnalytics(treeId, period)
+      .then(setData)
+      .catch(() => {
+        setError(true)
+        setData(null)
+      })
+      .finally(() => setLoading(false))
+  }, [treeId, period])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        No analytics data available for this flow.
+      </div>
+    )
+  }
+
+  const { summary, avg_csat, total_ratings, time_series, step_feedback, recent_comments } = data
+
+  return (
+    <div className="space-y-6">
+      {/* Period selector */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-foreground">Flow Analytics</h3>
+        <select
+          value={period}
+          onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
+          className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+        >
+          {PERIOD_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Summary stat cards */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <StatCard label="Sessions" value={summary.total_sessions.toLocaleString()} />
+        <StatCard
+          label="Completion"
+          value={`${(summary.completion_rate * 100).toFixed(0)}%`}
+        />
+        <StatCard
+          label="Median Time"
+          value={`${summary.median_duration_minutes} min`}
+        />
+        <StatCard
+          label="CSAT"
+          value={avg_csat != null ? `${avg_csat.toFixed(1)}/5` : 'N/A'}
+          subtitle={total_ratings > 0 ? `${total_ratings} rating${total_ratings !== 1 ? 's' : ''}` : undefined}
+        />
+      </div>
+
+      {/* Area chart - Sessions over time */}
+      {time_series.length > 0 && (
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Sessions Over Time</p>
+          <ResponsiveContainer width="100%" height={180}>
+            <AreaChart data={time_series}>
+              <CartesianGrid
+                strokeDasharray="3 3"
+                stroke="hsl(var(--border))"
+                vertical={false}
+              />
+              <XAxis
+                dataKey="date"
+                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tickLine={false}
+                axisLine={{ stroke: 'hsl(var(--border))' }}
+                tickFormatter={(value) => {
+                  const d = new Date(String(value))
+                  return `${d.getMonth() + 1}/${d.getDate()}`
+                }}
+              />
+              <YAxis
+                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tickLine={false}
+                axisLine={false}
+                allowDecimals={false}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--card))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '8px',
+                  color: 'hsl(var(--foreground))',
+                  fontSize: '13px',
+                }}
+                labelFormatter={(value) => {
+                  const d = new Date(String(value))
+                  return d.toLocaleDateString(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                  })
+                }}
+              />
+              <Area
+                type="monotone"
+                dataKey="resolved"
+                stackId="1"
+                stroke={CHART_COLORS.resolved}
+                fill={CHART_COLORS.resolved}
+                fillOpacity={0.3}
+              />
+              <Area
+                type="monotone"
+                dataKey="escalated"
+                stackId="1"
+                stroke={CHART_COLORS.escalated}
+                fill={CHART_COLORS.escalated}
+                fillOpacity={0.3}
+              />
+              <Area
+                type="monotone"
+                dataKey="workaround"
+                stackId="1"
+                stroke={CHART_COLORS.workaround}
+                fill={CHART_COLORS.workaround}
+                fillOpacity={0.3}
+              />
+              <Area
+                type="monotone"
+                dataKey="unresolved"
+                stackId="1"
+                stroke={CHART_COLORS.unresolved}
+                fill={CHART_COLORS.unresolved}
+                fillOpacity={0.3}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+
+          {/* Chart legend */}
+          <div className="flex items-center gap-4 mt-2 justify-center">
+            {Object.entries(CHART_COLORS).map(([key, color]) => (
+              <div key={key} className="flex items-center gap-1.5">
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-xs text-muted-foreground capitalize">
+                  {key}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Step Feedback Table with Dropoff Metrics */}
+      {step_feedback.length > 0 && (
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Step Performance</p>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-2 pr-4 text-foreground font-medium">Step</th>
+                  <th className="text-right py-2 pr-4 text-foreground font-medium">Visits</th>
+                  <th className="text-right py-2 pr-4 text-foreground font-medium">Dropoffs</th>
+                  <th className="text-right py-2 text-foreground font-medium">Dropoff Rate</th>
+                </tr>
+              </thead>
+              <tbody>
+                {step_feedback.map((step) => (
+                  <tr
+                    key={step.node_id}
+                    className={cn(
+                      'border-b border-border last:border-0',
+                      step.dropoff_rate > 0.2 && 'bg-red-400/5'
+                    )}
+                  >
+                    <td className="py-2 pr-4 text-muted-foreground truncate max-w-[200px]">
+                      {step.node_title}
+                    </td>
+                    <td className="py-2 pr-4 text-right text-muted-foreground">
+                      {step.visit_count}
+                    </td>
+                    <td className="py-2 pr-4 text-right text-muted-foreground">
+                      {step.dropoff_count}
+                    </td>
+                    <td
+                      className={cn(
+                        'py-2 text-right font-medium',
+                        step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-muted-foreground'
+                      )}
+                    >
+                      {(step.dropoff_rate * 100).toFixed(1)}%
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Recent Comments (Anonymous) */}
+      {recent_comments.length > 0 && (
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Recent Feedback</p>
+          <div className="space-y-3">
+            {recent_comments.map((item, i) => (
+              <div
+                key={i}
+                className="flex items-start gap-3 border-b border-border/50 pb-3 last:border-0 last:pb-0"
+              >
+                <div className="flex items-center gap-0.5 shrink-0 pt-0.5">
+                  {[1, 2, 3, 4, 5].map((v) => (
+                    <Star
+                      key={v}
+                      size={12}
+                      className={cn(
+                        v <= item.rating
+                          ? 'fill-yellow-400 text-yellow-400'
+                          : 'fill-none text-muted-foreground'
+                      )}
+                    />
+                  ))}
+                </div>
+                <div className="min-w-0">
+                  {item.comment && (
+                    <p className="text-sm text-foreground">{item.comment}</p>
+                  )}
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {new Date(item.created_at).toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatCard({
+  label,
+  value,
+  subtitle,
+}: {
+  label: string
+  value: string | number
+  subtitle?: string
+}) {
+  return (
+    <div className="bg-card border border-border rounded-xl p-4">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="text-xl font-bold text-foreground mt-1">{value}</p>
+      {subtitle && (
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
+      )}
+    </div>
+  )
+}

frontend/src/pages/TreeEditorPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useParams, useNavigate, useBlocker } from 'react-router-dom'
 import { useStore } from 'zustand'
-import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } from 'lucide-react'
+import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3 } from 'lucide-react'
 import { getMonacoEditor } from '@/components/tree-editor/code-mode'
 import { treesApi } from '@/api/trees'
 import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -13,6 +13,7 @@ import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
 import { usePermissions } from '@/hooks/usePermissions'
 import { cn, safeGetItem } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { FlowAnalyticsPanel } from '@/components/analytics/FlowAnalyticsPanel'
 
 export function TreeEditorPage() {
   const { id } = useParams<{ id: string }>()
@@ -46,6 +47,7 @@ export function TreeEditorPage() {
 
   const [showDraftPrompt, setShowDraftPrompt] = useState(false)
   const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
+  const [showAnalytics, setShowAnalytics] = useState(false)
 
   // Mobile detection
   const [isMobile, setIsMobile] = useState(false)
@@ -538,6 +540,23 @@ export function TreeEditorPage() {
 
           <div className="mx-2 h-6 w-px bg-border" />
 
+          {/* Analytics toggle (only for existing trees) */}
+          {isEditMode && (
+            <button
+              onClick={() => setShowAnalytics(!showAnalytics)}
+              title="Toggle flow analytics panel"
+              className={cn(
+                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
+                showAnalytics
+                  ? 'bg-accent text-foreground'
+                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
+              )}
+            >
+              <BarChart3 className="h-4 w-4" />
+              Analytics
+            </button>
+          )}
+
           {/* Validate */}
           <button
             onClick={handleManualValidate}
@@ -594,6 +613,13 @@ export function TreeEditorPage() {
 
       {/* Main Editor */}
       <TreeEditorLayout isMobile={isMobile} />
+
+      {/* Flow Analytics Panel (collapsible) */}
+      {showAnalytics && id && (
+        <div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
+          <FlowAnalyticsPanel treeId={id} />
+        </div>
+      )}
     </div>
   )
 }