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:
239
frontend/src/components/flowpilot/ProposalDetail.tsx
Normal file
239
frontend/src/components/flowpilot/ProposalDetail.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user