feat(knowledge-flywheel): add Phase 3 Knowledge Flywheel — AI analysis, review queue, analytics

Phase 3 implementation:
- AI session analysis service that generates flow proposals from resolved sessions
- APScheduler job for batch processing pending analyses (max_instances=1)
- Knowledge gap detection (weak options, high escalation signals)
- Flow proposals CRUD with team admin review workflow (approve/edit/dismiss/reject)
- FlowPilot analytics dashboard with confidence tiers, PSA metrics, knowledge gaps
- In-session script generator component
- Review queue page with filtering and proposal detail panel

Bug fixes from review (12 total):
- Fix "Edit & Publish" navigating to non-existent /editor/new route
- Hide Approve button for enhancement proposals (require Edit & Publish)
- Add max_instances=1 to scheduler to prevent TOCTOU race
- Fix eventual_success case() double-counting failed retries
- Add tree_structure validation before creating tree from proposal
- Simplify script generator rendering condition
- Add severity style fallback, toFixed on rates, Link instead of <a href>
- Add toast.warning on dismiss failure, fix dedup for domain-less sessions
- Cast Decimal to int in knowledge gap evidence dicts

Also updates CLAUDE.md with lessons 67-71 and Phase 3 project structure.

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

frontend/src/api/flowProposals.ts

@@ -0,0 +1,41 @@
+import apiClient from './client'
+import type {
+  FlowProposalSummary,
+  FlowProposalDetail,
+  FlowProposalStats,
+  ReviewProposalRequest,
+} from '@/types/flow-proposal'
+
+export const flowProposalsApi = {
+  async list(params?: {
+    status?: string
+    type?: string
+    domain?: string
+    sort_by?: string
+    skip?: number
+    limit?: number
+  }): Promise<FlowProposalSummary[]> {
+    const response = await apiClient.get<FlowProposalSummary[]>('/flow-proposals', { params })
+    return response.data
+  },
+
+  async getStats(): Promise<FlowProposalStats> {
+    const response = await apiClient.get<FlowProposalStats>('/flow-proposals/stats')
+    return response.data
+  },
+
+  async get(id: string): Promise<FlowProposalDetail> {
+    const response = await apiClient.get<FlowProposalDetail>(`/flow-proposals/${id}`)
+    return response.data
+  },
+
+  async review(id: string, data: ReviewProposalRequest): Promise<FlowProposalDetail> {
+    const response = await apiClient.post<FlowProposalDetail>(
+      `/flow-proposals/${id}/review`,
+      data
+    )
+    return response.data
+  },
+}
+
+export default flowProposalsApi

frontend/src/api/flowpilotAnalytics.ts

@@ -0,0 +1,20 @@
+import apiClient from './client'
+import type { FlowPilotDashboard, KnowledgeGapReport } from '@/types/flowpilot-analytics'
+
+export const flowpilotAnalyticsApi = {
+  async getDashboard(period: string = '30d'): Promise<FlowPilotDashboard> {
+    const response = await apiClient.get<FlowPilotDashboard>('/analytics/flowpilot', {
+      params: { period },
+    })
+    return response.data
+  },
+
+  async getKnowledgeGaps(period: string = '30d'): Promise<KnowledgeGapReport> {
+    const response = await apiClient.get<KnowledgeGapReport>('/analytics/flowpilot/knowledge-gaps', {
+      params: { period },
+    })
+    return response.data
+  },
+}
+
+export default flowpilotAnalyticsApi

frontend/src/api/index.ts

@@ -25,3 +25,5 @@ export { integrationsApi, sessionPsaApi } from './integrations'
 export { sidebarApi } from './sidebar'
 export { sessionToFlowApi } from './sessionToFlow'
 export { aiSessionsApi } from './aiSessions'
+export { flowProposalsApi } from './flowProposals'
+export { flowpilotAnalyticsApi } from './flowpilotAnalytics'

frontend/src/components/flowpilot/FlowPilotSession.tsx

@@ -141,6 +141,7 @@ export function FlowPilotSession({
                 step={step}
                 isCurrentStep={currentStep?.step_id === step.step_id}
                 isProcessing={isProcessing && currentStep?.step_id === step.step_id}
+                sessionId={session.id}
                 onRespond={onRespond}
               />
             ))}

frontend/src/components/flowpilot/FlowPilotStepCard.tsx

@@ -4,11 +4,13 @@ import { cn } from '@/lib/utils'
 import type { AISessionStepResponse, StepResponseRequest } from '@/types/ai-session'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { FlowPilotOptions } from './FlowPilotOptions'
+import { InSessionScriptGenerator } from './InSessionScriptGenerator'
 
 interface FlowPilotStepCardProps {
   step: AISessionStepResponse
   isCurrentStep: boolean
   isProcessing: boolean
+  sessionId?: string
   onRespond: (response: StepResponseRequest) => void
 }
 
@@ -22,7 +24,7 @@ const STEP_TYPE_ICONS = {
   note: MessageSquare,
 } as const
 
-export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, onRespond }: FlowPilotStepCardProps) {
+export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId, onRespond }: FlowPilotStepCardProps) {
   const [freeText, setFreeText] = useState('')
   const [showFreeText, setShowFreeText] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(!isCurrentStep)
@@ -163,8 +165,19 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, onRespond
             />
           )}
 
+          {/* In-session script generator */}
+          {!isResolutionSuggestion && (content.action_type as string) === 'script_generation' && sessionId && (
+            <InSessionScriptGenerator
+              templateId={(content.template_id as string) || ''}
+              preFilledParams={(content.pre_filled_params as Record<string, string>) || {}}
+              instructions={(content.instructions as string) || stepText}
+              sessionId={sessionId}
+              onRespond={onRespond}
+            />
+          )}
+
           {/* Action step buttons */}
-          {!isResolutionSuggestion && step.step_type === 'action' && (
+          {!isResolutionSuggestion && step.step_type === 'action' && (content.action_type as string) !== 'script_generation' && (
             <div className="flex gap-2">
               <button
                 onClick={() => handleActionComplete(true)}

frontend/src/components/flowpilot/InSessionScriptGenerator.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { Terminal, Copy, Check, Loader2, Play, ChevronDown, ChevronRight } from 'lucide-react'
+import { scriptsApi } from '@/api'
+import { PowerShellHighlighter } from '@/components/scripts/PowerShellHighlighter'
+import { toast } from '@/lib/toast'
+import type { StepResponseRequest } from '@/types/ai-session'
+
+interface InSessionScriptGeneratorProps {
+  templateId: string
+  preFilledParams: Record<string, string>
+  instructions: string
+  sessionId: string
+  onRespond: (response: StepResponseRequest) => void
+}
+
+export function InSessionScriptGenerator({
+  templateId,
+  preFilledParams,
+  instructions,
+  sessionId,
+  onRespond,
+}: InSessionScriptGeneratorProps) {
+  const [params, setParams] = useState<Record<string, string>>(preFilledParams)
+  const [generatedScript, setGeneratedScript] = useState<string | null>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [showParams, setShowParams] = useState(true)
+
+  const handleGenerate = async () => {
+    setIsGenerating(true)
+    try {
+      const result = await scriptsApi.generate({
+        template_id: templateId,
+        parameters: params,
+        ai_session_id: sessionId,
+      })
+      setGeneratedScript(result.script)
+      setShowParams(false)
+      toast.success('Script generated')
+    } catch {
+      toast.error('Failed to generate script')
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handleCopy = async () => {
+    if (!generatedScript) return
+    await navigator.clipboard.writeText(generatedScript)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleContinue = (success: boolean) => {
+    onRespond({
+      action_result: {
+        success,
+        details: success
+          ? 'Script generated and executed'
+          : 'Script generated but action did not resolve the issue',
+      },
+    })
+  }
+
+  return (
+    <div className="mt-3 rounded-xl border border-primary/20 bg-primary/5 p-4 space-y-3">
+      <div className="flex items-center gap-2">
+        <Terminal size={14} className="text-primary" />
+        <span className="font-label text-[0.625rem] uppercase tracking-wider text-primary">
+          Script Generator
+        </span>
+      </div>
+
+      {instructions && (
+        <p className="text-xs text-muted-foreground">{instructions}</p>
+      )}
+
+      {/* Parameter editing */}
+      {!generatedScript && (
+        <>
+          <button
+            onClick={() => setShowParams(!showParams)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showParams ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            Parameters ({Object.keys(params).length})
+          </button>
+
+          {showParams && Object.keys(params).length > 0 && (
+            <div className="space-y-2">
+              {Object.entries(params).map(([key, value]) => (
+                <div key={key}>
+                  <label className="block text-xs font-medium text-muted-foreground mb-1">
+                    {key.replace(/_/g, ' ')}
+                  </label>
+                  <input
+                    value={value}
+                    onChange={(e) => setParams(prev => ({ ...prev, [key]: e.target.value }))}
+                    className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          <button
+            onClick={handleGenerate}
+            disabled={isGenerating}
+            className="w-full flex items-center justify-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] disabled:opacity-40 transition-all"
+          >
+            {isGenerating ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <Play size={14} />
+            )}
+            Generate Script
+          </button>
+        </>
+      )}
+
+      {/* Generated script display */}
+      {generatedScript && (
+        <>
+          <div className="relative rounded-lg bg-card/80 border border-border overflow-hidden">
+            <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50">
+              <span className="text-xs text-muted-foreground font-mono">PowerShell</span>
+              <button
+                onClick={handleCopy}
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            <div className="p-3 overflow-x-auto max-h-[300px] overflow-y-auto">
+              <PowerShellHighlighter script={generatedScript} />
+            </div>
+          </div>
+
+          {/* Continue buttons */}
+          <div className="flex gap-2 pt-1">
+            <button
+              onClick={() => handleContinue(true)}
+              className="flex-1 rounded-lg bg-primary/10 border border-primary/20 px-4 py-2 text-sm font-medium text-primary hover:bg-primary/20 transition-colors"
+            >
+              Script worked — continue
+            </button>
+            <button
+              onClick={() => handleContinue(false)}
+              className="flex-1 rounded-lg bg-card/50 border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-card transition-colors"
+            >
+              Didn't resolve it
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/components/flowpilot/ProposalCard.tsx

@@ -0,0 +1,62 @@
+import { GitBranch, ArrowUpRight, Sparkles, Clock, Hash } from 'lucide-react'
+import type { FlowProposalSummary } from '@/types/flow-proposal'
+
+const TYPE_CONFIG = {
+  new_flow: { label: 'New Flow', color: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
+  enhancement: { label: 'Enhancement', color: 'text-amber-400 bg-amber-400/10 border-amber-400/20', icon: ArrowUpRight },
+  branch_addition: { label: 'Branch', color: 'text-blue-400 bg-blue-400/10 border-blue-400/20', icon: GitBranch },
+  auto_reinforced: { label: 'Reinforced', color: 'text-muted-foreground bg-card border-border', icon: Sparkles },
+} as const
+
+interface ProposalCardProps {
+  proposal: FlowProposalSummary
+  isSelected: boolean
+  onClick: () => void
+}
+
+export function ProposalCard({ proposal, isSelected, onClick }: ProposalCardProps) {
+  const typeConfig = TYPE_CONFIG[proposal.proposal_type] || TYPE_CONFIG.new_flow
+  const TypeIcon = typeConfig.icon
+
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full text-left rounded-xl border p-3 space-y-2 transition-all ${
+        isSelected
+          ? 'border-primary/30 bg-primary/5'
+          : 'border-[rgba(255,255,255,0.06)] bg-[rgba(24,26,31,0.55)] hover:border-[rgba(255,255,255,0.12)]'
+      }`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm font-semibold text-foreground line-clamp-2">{proposal.title}</p>
+        <span className={`shrink-0 flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-label text-[0.5625rem] uppercase tracking-wider ${typeConfig.color}`}>
+          <TypeIcon size={10} />
+          {typeConfig.label}
+        </span>
+      </div>
+
+      {proposal.description && (
+        <p className="text-xs text-muted-foreground line-clamp-2">{proposal.description}</p>
+      )}
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+        {proposal.problem_domain && (
+          <span className="font-label rounded-md bg-primary/10 px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-primary">
+            {proposal.problem_domain}
+          </span>
+        )}
+        <span className="flex items-center gap-1">
+          <Hash size={10} />
+          {proposal.supporting_session_count} session{proposal.supporting_session_count !== 1 ? 's' : ''}
+        </span>
+        <span className="flex items-center gap-1">
+          <Clock size={10} />
+          {new Date(proposal.created_at).toLocaleDateString()}
+        </span>
+        <span className="text-primary">
+          {Math.round(proposal.confidence_score * 100)}%
+        </span>
+      </div>
+    </button>
+  )
+}

frontend/src/components/flowpilot/ProposalDetail.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { toast } from '@/lib/toast'
+import {
+  CheckCircle2, XCircle, Pencil, EyeOff, ChevronDown, ChevronRight,
+  ExternalLink, Clock, Hash, Sparkles, Loader2,
+} from 'lucide-react'
+import type { FlowProposalDetail as ProposalDetailType } from '@/types/flow-proposal'
+
+interface ProposalDetailProps {
+  proposal: ProposalDetailType
+  onReview: (action: 'approve' | 'reject' | 'modify' | 'dismiss', notes?: string) => Promise<void>
+}
+
+export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
+  const navigate = useNavigate()
+  const [reviewNotes, setReviewNotes] = useState('')
+  const [showFlowData, setShowFlowData] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [showRejectConfirm, setShowRejectConfirm] = useState(false)
+
+  const canReview = proposal.status === 'pending' || proposal.status === 'dismissed'
+
+  const handleAction = async (action: 'approve' | 'reject' | 'modify' | 'dismiss') => {
+    setIsSubmitting(true)
+    try {
+      await onReview(action, reviewNotes || undefined)
+    } finally {
+      setIsSubmitting(false)
+      setShowRejectConfirm(false)
+    }
+  }
+
+  const handleEditAndPublish = async () => {
+    // Mark proposal as dismissed so it doesn't stay in the pending queue.
+    // The tree editor will create the flow independently.
+    // TODO: Wire tree editor to call review API with action='modify' on save
+    // when it detects proposalId in location.state, linking the published tree
+    // back to the proposal.
+    setIsSubmitting(true)
+    try {
+      await onReview('dismiss', 'Opened in Flow Editor for manual editing')
+    } catch {
+      // Warn but continue — the editor will still open
+      toast.warning('Could not update proposal status — it may still appear in the queue')
+    } finally {
+      setIsSubmitting(false)
+    }
+
+    const flowData = proposal.proposed_flow_data
+    navigate('/trees/new', {
+      state: {
+        preloadedStructure: flowData.tree_structure || flowData,
+        proposalId: proposal.id,
+        proposalTitle: proposal.title,
+      },
+    })
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="border-b px-6 py-4" style={{ borderColor: 'var(--glass-border)' }}>
+        <h2 className="font-heading text-lg font-semibold text-foreground">{proposal.title}</h2>
+        {proposal.description && (
+          <p className="mt-1 text-sm text-muted-foreground">{proposal.description}</p>
+        )}
+        <div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          {proposal.problem_domain && (
+            <span className="font-label rounded-md bg-primary/10 px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
+              {proposal.problem_domain}
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <Sparkles size={12} />
+            {Math.round(proposal.confidence_score * 100)}% confidence
+          </span>
+          <span className="flex items-center gap-1">
+            <Hash size={12} />
+            {proposal.supporting_session_count} supporting session{proposal.supporting_session_count !== 1 ? 's' : ''}
+          </span>
+          <span className="flex items-center gap-1">
+            <Clock size={12} />
+            {new Date(proposal.created_at).toLocaleString()}
+          </span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-5">
+        {/* Source session link */}
+        <div className="glass-card-static p-4">
+          <h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Source Session</h4>
+          <Link
+            to={`/pilot/${proposal.source_session_id}`}
+            target="_blank"
+            className="flex items-center gap-2 text-sm text-primary hover:underline"
+          >
+            <ExternalLink size={12} />
+            View session that generated this proposal
+          </Link>
+        </div>
+
+        {/* Proposed diff (for enhancements) */}
+        {proposal.proposed_diff && (() => {
+          const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
+          return (
+            <div className="glass-card-static border-l-2 border-l-amber-500 p-4">
+              <h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Proposed Changes</h4>
+              {diff.diff_description && (
+                <p className="text-sm text-foreground">{diff.diff_description}</p>
+              )}
+              {diff.new_nodes && diff.new_nodes.length > 0 && (
+                <div className="mt-3 space-y-1.5">
+                  <p className="text-xs font-medium text-muted-foreground">New nodes:</p>
+                  {diff.new_nodes.map((node, i) => (
+                    <div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-foreground">
+                      <span className="text-emerald-400">+ </span>
+                      {node.title || node.question || node.description || 'New node'}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })()}
+
+        {/* Flow data preview */}
+        <div className="glass-card-static p-4">
+          <button
+            onClick={() => setShowFlowData(!showFlowData)}
+            className="flex items-center gap-1.5 font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] hover:text-foreground transition-colors"
+          >
+            {showFlowData ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            Flow Data (JSON)
+          </button>
+          {showFlowData && (
+            <pre className="mt-3 max-h-[400px] overflow-auto rounded-lg bg-card/80 p-3 text-xs text-muted-foreground font-mono">
+              {JSON.stringify(proposal.proposed_flow_data, null, 2)}
+            </pre>
+          )}
+        </div>
+
+        {/* Supporting sessions */}
+        {proposal.supporting_session_ids.length > 1 && (
+          <div className="glass-card-static p-4">
+            <h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">
+              Supporting Sessions ({proposal.supporting_session_ids.length})
+            </h4>
+            <div className="space-y-1">
+              {proposal.supporting_session_ids.map((sid) => (
+                <Link
+                  key={sid}
+                  to={`/pilot/${sid}`}
+                  target="_blank"
+                  className="block text-xs text-primary hover:underline truncate"
+                >
+                  {sid}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Review info (for already-reviewed proposals) */}
+        {proposal.reviewed_at && (
+          <div className="glass-card-static p-4">
+            <h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Review</h4>
+            <p className="text-sm text-foreground">
+              <span className="capitalize">{proposal.status}</span> on{' '}
+              {new Date(proposal.reviewed_at).toLocaleString()}
+            </p>
+            {proposal.reviewer_notes && (
+              <p className="mt-1 text-xs text-muted-foreground">{proposal.reviewer_notes}</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Review actions bar */}
+      {canReview && (
+        <div
+          className="border-t px-5 py-3 space-y-3"
+          style={{ borderColor: 'var(--glass-border)', background: 'rgba(16, 17, 20, 0.8)', backdropFilter: 'blur(12px)' }}
+        >
+          {/* Notes input */}
+          <input
+            value={reviewNotes}
+            onChange={(e) => setReviewNotes(e.target.value)}
+            placeholder="Reviewer notes (optional)"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+          />
+
+          {/* Action buttons */}
+          <div className="flex items-center gap-2">
+            {proposal.proposal_type === 'new_flow' ? (
+              <button
+                onClick={() => handleAction('approve')}
+                disabled={isSubmitting}
+                className="flex items-center gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 transition-colors"
+              >
+                {isSubmitting ? <Loader2 size={14} className="animate-spin" /> : <CheckCircle2 size={14} />}
+                Approve & Publish
+              </button>
+            ) : (
+              <span className="text-xs text-muted-foreground italic px-2">
+                Enhancement proposals require Edit & Publish
+              </span>
+            )}
+            <button
+              onClick={handleEditAndPublish}
+              disabled={isSubmitting}
+              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
+            >
+              <Pencil size={14} />
+              Edit & Publish
+            </button>
+            <button
+              onClick={() => handleAction('dismiss')}
+              disabled={isSubmitting}
+              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors ml-auto"
+            >
+              <EyeOff size={14} />
+              Dismiss
+            </button>
+            <button
+              onClick={() => showRejectConfirm ? handleAction('reject') : setShowRejectConfirm(true)}
+              disabled={isSubmitting}
+              className="flex items-center gap-2 rounded-lg bg-rose-500/10 border border-rose-500/20 px-4 py-2 text-sm font-medium text-rose-500 hover:bg-rose-500/20 disabled:opacity-40 transition-colors"
+            >
+              <XCircle size={14} />
+              {showRejectConfirm ? 'Confirm Reject' : 'Reject'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/flowpilot/index.ts

@@ -10,3 +10,6 @@ export { SessionTicketCard } from './SessionTicketCard'
 export { EscalateModal } from './EscalateModal'
 export { EscalationQueue } from './EscalationQueue'
 export { SessionBriefing } from './SessionBriefing'
+export { ProposalCard } from './ProposalCard'
+export { ProposalDetail } from './ProposalDetail'
+export { InSessionScriptGenerator } from './InSessionScriptGenerator'

frontend/src/components/layout/Sidebar.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import {
-  LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3,
-  Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText,
+  LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, TrendingUp,
+  Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, ListChecks,
   BookOpen, Lightbulb, Code2, Library, Brain, WandSparkles, Sparkles, AlertTriangle,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
@@ -94,8 +94,10 @@ export function Sidebar() {
             <NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} collapsed />
             <NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} collapsed />
             <NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} collapsed />
+            <NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" collapsed />
             <NavItem href="/shares" icon={FileOutput} label="Exports" iconColor={NAV_COLORS.exports} collapsed />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" iconColor={NAV_COLORS.analytics} collapsed />
+            <NavItem href="/analytics/flowpilot" icon={TrendingUp} label="FlowPilot Analytics" iconColor="#2dd4bf" collapsed />
             <NavItem href="/guides" icon={BookOpen} label="User Guides" iconColor={NAV_COLORS.guides} collapsed />
             <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" iconColor={NAV_COLORS.feedback} collapsed />
           </div>
@@ -161,6 +163,7 @@ export function Sidebar() {
             <NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} />
             <NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} />
             <NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} />
+            <NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" />
 
             {/* Insights */}
             <div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
@@ -168,6 +171,7 @@ export function Sidebar() {
             </div>
             <NavItem href="/shares" icon={FileOutput} label="Exports" iconColor={NAV_COLORS.exports} />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" iconColor={NAV_COLORS.analytics} />
+            <NavItem href="/analytics/flowpilot" icon={TrendingUp} label="FlowPilot Analytics" iconColor="#2dd4bf" />
           </div>
         </>
       )}

frontend/src/pages/FlowPilotAnalyticsPage.tsx

@@ -0,0 +1,374 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import {
+  BarChart3, Clock, Star, CheckCircle2, ArrowUpRight,
+  AlertTriangle, Lightbulb, Loader2, Ticket,
+} from 'lucide-react'
+import {
+  AreaChart, Area, BarChart, Bar,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+} from 'recharts'
+import { flowpilotAnalyticsApi } from '@/api'
+import { toast } from '@/lib/toast'
+import type { FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap } from '@/types/flowpilot-analytics'
+
+const PERIOD_OPTIONS = [
+  { value: '7d', label: 'Last 7 days' },
+  { value: '30d', label: 'Last 30 days' },
+  { value: '90d', label: 'Last 90 days' },
+]
+
+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',
+  low: 'bg-blue-400/10 text-blue-400 border-blue-400/20',
+}
+
+export default function FlowPilotAnalyticsPage() {
+  const [period, setPeriod] = useState('30d')
+  const [dashboard, setDashboard] = useState<FlowPilotDashboard | null>(null)
+  const [gaps, setGaps] = useState<KnowledgeGapReport | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    Promise.all([
+      flowpilotAnalyticsApi.getDashboard(period),
+      flowpilotAnalyticsApi.getKnowledgeGaps(period),
+    ])
+      .then(([d, g]) => {
+        setDashboard(d)
+        setGaps(g)
+      })
+      .catch(() => toast.error('Failed to load analytics'))
+      .finally(() => setLoading(false))
+  }, [period])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Loader2 size={24} className="animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!dashboard) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <p className="text-sm text-muted-foreground">Failed to load analytics</p>
+      </div>
+    )
+  }
+
+  const conf = dashboard.confidence_breakdown
+
+  return (
+    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span title="FlowPilot Analytics">
+            <BarChart3 size={24} className="text-foreground" />
+          </span>
+          <h1 className="text-2xl font-bold font-heading text-foreground">FlowPilot Analytics</h1>
+        </div>
+        <div className="flex items-center gap-3">
+          <Link
+            to="/analytics"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Team Analytics
+          </Link>
+          <select
+            value={period}
+            onChange={(e) => setPeriod(e.target.value)}
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          >
+            {PERIOD_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </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"
+        />
+      </div>
+
+      {/* Second row — Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* MTTR Trend */}
+        <div className="glass-card-static 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-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-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-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>
+  )
+}
+
+// ── Sub-components ──
+
+function MetricCard({
+  icon: Icon,
+  label,
+  value,
+  iconColor,
+}: {
+  icon: typeof BarChart3
+  label: string
+  value: string | number
+  iconColor: string
+}) {
+  return (
+    <div className="glass-card-static p-4">
+      <div className="flex items-center gap-3">
+        <span
+          className="flex h-8 w-8 items-center justify-center rounded-lg"
+          style={{ background: `${iconColor}15` }}
+        >
+          <Icon size={16} style={{ color: iconColor }} />
+        </span>
+        <div>
+          <p className="font-label text-[0.5625rem] uppercase tracking-wider text-[#5a6170]">{label}</p>
+          <p className="text-lg font-semibold text-foreground">{value}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ConfidenceTierRow({
+  label,
+  count,
+  rate,
+  color,
+  total,
+}: {
+  label: string
+  count: number
+  rate: number
+  color: string
+  total: number
+}) {
+  const pct = total > 0 ? (count / total) * 100 : 0
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-foreground font-medium">{label}</span>
+        <span className="text-muted-foreground">
+          {count} sessions · {rate.toFixed(1)}% resolved
+        </span>
+      </div>
+      <div className="h-2 rounded-full bg-card/80 overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all"
+          style={{ width: `${pct}%`, background: color }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function GapCard({ gap }: { gap: KnowledgeGap }) {
+  const severityStyle = SEVERITY_STYLES[gap.severity as keyof typeof SEVERITY_STYLES] ?? SEVERITY_STYLES.low
+  return (
+    <div className="glass-card-static p-4 space-y-2">
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm font-semibold text-foreground">{gap.title}</p>
+        <span className={`shrink-0 rounded-md border px-1.5 py-0.5 font-label text-[0.5625rem] uppercase tracking-wider ${severityStyle}`}>
+          {gap.severity}
+        </span>
+      </div>
+      <p className="text-xs text-muted-foreground">{gap.description}</p>
+      <div className="flex items-start gap-1.5 pt-1">
+        <Lightbulb size={12} className="text-primary shrink-0 mt-0.5" />
+        <p className="text-xs text-primary">{gap.suggested_action}</p>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/ReviewQueuePage.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from 'react'
+import {
+  Lightbulb, Loader2, RefreshCw, CheckCircle2, Clock, Sparkles,
+} from 'lucide-react'
+import { flowProposalsApi } from '@/api'
+import { toast } from '@/lib/toast'
+import type { FlowProposalSummary, FlowProposalDetail, FlowProposalStats } from '@/types/flow-proposal'
+import { ProposalCard } from '@/components/flowpilot/ProposalCard'
+import { ProposalDetail } from '@/components/flowpilot/ProposalDetail'
+
+const STATUS_TABS = [
+  { key: 'pending', label: 'Pending' },
+  { key: 'approved', label: 'Approved' },
+  { key: 'rejected', label: 'Rejected' },
+  { key: 'dismissed', label: 'Dismissed' },
+  { key: '', label: 'All' },
+] as const
+
+export default function ReviewQueuePage() {
+  const [proposals, setProposals] = useState<FlowProposalSummary[]>([])
+  const [stats, setStats] = useState<FlowProposalStats | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [detail, setDetail] = useState<FlowProposalDetail | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false)
+  const [activeTab, setActiveTab] = useState('pending')
+  const [sortBy, setSortBy] = useState('newest')
+
+  const loadProposals = async () => {
+    setIsLoading(true)
+    try {
+      const [data, statsData] = await Promise.all([
+        flowProposalsApi.list({
+          status: activeTab || undefined,
+          sort_by: sortBy,
+          limit: 50,
+        }),
+        flowProposalsApi.getStats(),
+      ])
+      setProposals(data)
+      setStats(statsData)
+    } catch {
+      toast.error('Failed to load proposals')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadProposals()
+  }, [activeTab, sortBy]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const loadDetail = async (id: string) => {
+    setSelectedId(id)
+    setIsLoadingDetail(true)
+    try {
+      const data = await flowProposalsApi.get(id)
+      setDetail(data)
+    } catch {
+      toast.error('Failed to load proposal')
+    } finally {
+      setIsLoadingDetail(false)
+    }
+  }
+
+  const handleReview = async (action: 'approve' | 'reject' | 'modify' | 'dismiss', notes?: string) => {
+    if (!selectedId) return
+    try {
+      await flowProposalsApi.review(selectedId, {
+        action,
+        reviewer_notes: notes || null,
+      })
+      toast.success(
+        action === 'approve' ? 'Flow published!' :
+        action === 'dismiss' ? 'Proposal dismissed' :
+        action === 'reject' ? 'Proposal rejected' :
+        'Flow published with modifications'
+      )
+      setSelectedId(null)
+      setDetail(null)
+      loadProposals()
+    } catch {
+      toast.error('Review action failed')
+    }
+  }
+
+  return (
+    <div className="flex h-full">
+      {/* Left panel — Proposal list */}
+      <div className="w-[380px] shrink-0 border-r overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
+        {/* Header */}
+        <div className="sticky top-0 z-10 p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(12px)' }}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Lightbulb size={16} className="text-amber-400" />
+              <h1 className="font-heading text-base font-semibold text-foreground">Review Queue</h1>
+            </div>
+            <button onClick={loadProposals} className="text-muted-foreground hover:text-foreground transition-colors">
+              <RefreshCw size={14} />
+            </button>
+          </div>
+
+          {/* Stats bar */}
+          {stats && (
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <Clock size={10} className="text-amber-400" />
+                {stats.pending_count} pending
+              </span>
+              <span className="flex items-center gap-1">
+                <CheckCircle2 size={10} className="text-emerald-400" />
+                {stats.approved_this_week} approved
+              </span>
+              <span className="flex items-center gap-1">
+                <Sparkles size={10} className="text-primary" />
+                {stats.auto_reinforced_this_week} reinforced
+              </span>
+            </div>
+          )}
+
+          {/* Tabs */}
+          <div className="flex gap-1">
+            {STATUS_TABS.map((tab) => (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
+                  activeTab === tab.key
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                {tab.label}
+                {tab.key === 'pending' && stats && stats.pending_count > 0 && (
+                  <span className="ml-1 rounded-full bg-amber-500/20 px-1.5 text-[0.5625rem] text-amber-400">
+                    {stats.pending_count}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Sort */}
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value)}
+            className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-xs text-foreground"
+          >
+            <option value="newest">Newest first</option>
+            <option value="confidence">Highest confidence</option>
+            <option value="sessions">Most supporting sessions</option>
+          </select>
+        </div>
+
+        {/* Proposal list */}
+        <div className="p-3 space-y-2">
+          {isLoading ? (
+            <div className="flex justify-center py-12">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : proposals.length === 0 ? (
+            <div className="py-12 text-center">
+              <Lightbulb size={24} className="mx-auto mb-2 text-muted-foreground/40" />
+              <p className="text-sm text-muted-foreground">No proposals found</p>
+            </div>
+          ) : (
+            proposals.map((proposal) => (
+              <ProposalCard
+                key={proposal.id}
+                proposal={proposal}
+                isSelected={selectedId === proposal.id}
+                onClick={() => loadDetail(proposal.id)}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Right panel — Detail */}
+      <div className="flex-1 overflow-y-auto">
+        {isLoadingDetail ? (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 size={20} className="animate-spin text-muted-foreground" />
+          </div>
+        ) : detail ? (
+          <ProposalDetail
+            proposal={detail}
+            onReview={handleReview}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <Lightbulb size={32} className="mx-auto mb-3 text-muted-foreground/30" />
+              <p className="text-sm text-muted-foreground">Select a proposal to review</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -47,6 +47,8 @@ const AssistantChatPage = lazy(() => import('@/pages/AssistantChatPage'))
 const FlowAssistPage = lazy(() => import('@/pages/FlowAssistPage'))
 const FlowPilotSessionPage = lazy(() => import('@/pages/FlowPilotSessionPage'))
 const EscalationQueuePage = lazy(() => import('@/pages/EscalationQueuePage'))
+const ReviewQueuePage = lazy(() => import('@/pages/ReviewQueuePage'))
+const FlowPilotAnalyticsPage = lazy(() => import('@/pages/FlowPilotAnalyticsPage'))
 const KBAcceleratorPage = lazy(() => import('@/pages/KBAcceleratorPage'))
 const GuidesHubPage = lazy(() => import('@/pages/GuidesHubPage'))
 const GuideDetailPage = lazy(() => import('@/pages/GuideDetailPage'))
@@ -174,6 +176,8 @@ export const router = sentryCreateBrowserRouter([
       { path: 'pilot', element: page(FlowPilotSessionPage) },
       { path: 'pilot/:sessionId', element: page(FlowPilotSessionPage) },
       { path: 'escalations', element: page(EscalationQueuePage) },
+      { path: 'review-queue', element: page(ReviewQueuePage) },
+      { path: 'analytics/flowpilot', element: page(FlowPilotAnalyticsPage) },
       { path: 'guides', element: page(GuidesHubPage) },
       { path: 'guides/:slug', element: page(GuideDetailPage) },
       // Admin routes

frontend/src/types/flow-proposal.ts

@@ -0,0 +1,38 @@
+// ── Flow Proposals (Knowledge Flywheel / Review Queue) ──
+
+export interface FlowProposalSummary {
+  id: string
+  proposal_type: 'new_flow' | 'enhancement' | 'branch_addition' | 'auto_reinforced'
+  title: string
+  description: string | null
+  problem_domain: string | null
+  confidence_score: number
+  supporting_session_count: number
+  status: 'pending' | 'approved' | 'modified' | 'rejected' | 'dismissed' | 'auto_reinforced'
+  target_flow_id: string | null
+  source_session_id: string
+  created_at: string
+}
+
+export interface FlowProposalDetail extends FlowProposalSummary {
+  proposed_flow_data: Record<string, unknown>
+  proposed_diff: Record<string, unknown> | null
+  supporting_session_ids: string[]
+  reviewer_notes: string | null
+  reviewed_by: string | null
+  reviewed_at: string | null
+}
+
+export interface ReviewProposalRequest {
+  action: 'approve' | 'reject' | 'modify' | 'dismiss'
+  reviewer_notes?: string | null
+  modified_flow_data?: Record<string, unknown> | null
+}
+
+export interface FlowProposalStats {
+  pending_count: number
+  approved_this_week: number
+  rejected_this_week: number
+  auto_reinforced_this_week: number
+  top_domains: Array<{ domain: string; count: number }>
+}

frontend/src/types/flowpilot-analytics.ts

@@ -0,0 +1,79 @@
+export interface MTTRDataPoint {
+  date: string
+  mttr_minutes: number
+  session_count: number
+}
+
+export interface DomainBreakdown {
+  domain: string
+  total: number
+  resolved: number
+  escalated: number
+  resolution_rate: number
+}
+
+export interface ConfidenceBreakdown {
+  guided_sessions: number
+  guided_resolution_rate: number
+  exploring_sessions: number
+  exploring_resolution_rate: number
+  discovery_sessions: number
+  discovery_resolution_rate: number
+}
+
+export interface DomainCoverage {
+  domain: string
+  flow_count: number
+  session_count: number
+  guided_rate: number
+}
+
+export interface KnowledgeCoverage {
+  total_flows: number
+  ai_generated_flows: number
+  total_proposals_pending: number
+  proposals_approved_this_period: number
+  proposals_rejected_this_period: number
+  coverage_by_domain: DomainCoverage[]
+}
+
+export interface PsaMetrics {
+  ticket_link_rate: number
+  auto_push_success_rate: number
+  auto_push_retry_success_rate: number
+  total_time_entries_logged: number
+  total_hours_logged: number
+}
+
+export interface FlowPilotDashboard {
+  period: string
+  total_sessions: number
+  resolved_sessions: number
+  escalated_sessions: number
+  abandoned_sessions: number
+  resolution_rate: number
+  avg_steps_to_resolution: number
+  avg_session_duration_minutes: number
+  avg_rating: number | null
+  mttr_minutes: number | null
+  mttr_trend: MTTRDataPoint[]
+  sessions_by_domain: DomainBreakdown[]
+  confidence_breakdown: ConfidenceBreakdown
+  knowledge_coverage: KnowledgeCoverage
+  psa_metrics: PsaMetrics | null
+}
+
+export interface KnowledgeGap {
+  gap_type: string
+  domain: string | null
+  severity: 'high' | 'medium' | 'low'
+  title: string
+  description: string
+  evidence: Record<string, unknown>
+  suggested_action: string
+}
+
+export interface KnowledgeGapReport {
+  generated_at: string
+  gaps: KnowledgeGap[]
+}

frontend/src/types/index.ts

@@ -13,6 +13,8 @@ export * from './analytics'
 export * from './copilot'
 export type { AssistantChat, AssistantChatMessage, ChatListItem, ChatMessageResponse, RetentionSettings } from './assistant-chat'
 export * from './ai-session'
+export * from './flow-proposal'
+export * from './flowpilot-analytics'
 
 // API response wrapper types
 export interface PaginatedResponse<T> {

frontend/src/types/scripts.ts

@@ -73,7 +73,8 @@ export interface ScriptTemplateDetail extends ScriptTemplateListItem {
 export interface ScriptGenerateRequest {
   template_id: string
   parameters: Record<string, unknown>
-  session_id?: string // Phase 3: passed when generating inside a session
+  session_id?: string // Legacy tree-based session
+  ai_session_id?: string // FlowPilot AI session
 }
 
 export interface ScriptGenerateResponse {