chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate dashboard components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:00:35 -04:00
parent 56ff792f8e
commit 96a4130c0e
18 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
View File

@@ -29,13 +29,13 @@ export function ActiveFlowPilotSessions() {
if (loading) {
return (
<div className="glass-card-static">
<div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
<div key={i} className="h-24 rounded-xl bg-[#14161d] border border-[#1e2130] animate-pulse" />
))}
</div>
</div>
@@ -43,22 +43,22 @@ export function ActiveFlowPilotSessions() {
}
return (
<div className="glass-card-static">
<div className="card-flat">
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
>
<div className="flex items-center gap-2">
<h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
{sessions.length > 0 && (
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[0.625rem] font-bold text-primary">
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 text-[0.625rem] font-bold text-[#22d3ee]">
{sessions.length}
</span>
)}
</div>
<Link
to="/sessions?filter=active"
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
View all <ArrowRight size={10} />
</Link>
@@ -66,7 +66,7 @@ export function ActiveFlowPilotSessions() {
{sessions.length === 0 ? (
<div className="px-5 py-8 text-center">
<p className="text-sm text-muted-foreground">No active sessions</p>
<p className="text-sm text-[#848b9b]">No active sessions</p>
<p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
</div>
) : (
@@ -75,26 +75,26 @@ export function ActiveFlowPilotSessions() {
<button
key={session.id}
onClick={() => navigate(`/pilot/${session.id}`)}
className="glass-card p-4 text-left"
className="card-interactive p-4 text-left"
>
<div className="flex items-start justify-between gap-2 mb-2">
<Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
<Sparkles size={14} className="shrink-0 text-[#22d3ee] mt-0.5" />
<span
className={cn(
'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
'font-sans text-xs text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
!session.confidence_tier && 'bg-card text-muted-foreground',
!session.confidence_tier && 'bg-[#14161d] text-[#848b9b]',
)}
>
{session.confidence_tier || 'starting'}
</span>
</div>
<p className="text-sm font-medium text-foreground truncate">
<p className="text-sm font-medium text-[#e2e5eb] truncate">
{session.problem_summary || 'Session in progress'}
</p>
<div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
<div className="mt-2 flex items-center gap-2 text-[0.625rem] text-[#848b9b]">
<span className="flex items-center gap-1">
<Clock size={10} />
{timeAgo(session.created_at)}