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>
This commit is contained in:
374
frontend/src/pages/FlowPilotAnalyticsPage.tsx
Normal file
374
frontend/src/pages/FlowPilotAnalyticsPage.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
201
frontend/src/pages/ReviewQueuePage.tsx
Normal file
201
frontend/src/pages/ReviewQueuePage.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user