refactor: migrate FlowPilot components to Design System v4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 01:56:27 -04:00
parent 97a20a4225
commit 56ff792f8e
17 changed files with 219 additions and 221 deletions

View File

@@ -8,7 +8,7 @@ interface AISessionListItemProps {
}
const STATUS_CONFIG = {
active: { icon: Clock, color: 'text-primary', label: 'Active' },
active: { icon: Clock, color: 'text-[#22d3ee]', label: 'Active' },
paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
@@ -22,16 +22,16 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
return (
<Link
to={`/pilot/${session.id}`}
className="glass-card block p-4 transition-all"
className="card-interactive block p-4 transition-all"
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground truncate">
<p className="text-sm font-medium text-[#e2e5eb] truncate">
{session.problem_summary || 'Untitled session'}
</p>
<div className="mt-1.5 flex items-center gap-3 flex-wrap">
{session.problem_domain && (
<span className="font-label rounded-md bg-primary/10 px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
<span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
{session.problem_domain}
</span>
)}
@@ -39,7 +39,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
<StatusIcon size={12} />
{config.label}
</span>
<span className="text-xs text-muted-foreground">
<span className="text-xs text-[#848b9b]">
{session.step_count} steps
</span>
<span className="text-xs text-[#5a6170]">
@@ -50,7 +50,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
</div>
</div>
{session.session_rating && (
<span className="font-label text-xs text-amber-400">
<span className="font-sans text-xs text-xs text-amber-400">
{'★'.repeat(session.session_rating)}
</span>
)}