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) { if (loading) {
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <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>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
{Array.from({ length: 3 }).map((_, i) => ( {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>
</div> </div>
@@ -43,22 +43,22 @@ export function ActiveFlowPilotSessions() {
} }
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div <div
className="flex items-center justify-between px-5 py-3" className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }} style={{ borderBottom: '1px solid var(--glass-border)' }}
> >
<div className="flex items-center gap-2"> <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 && ( {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} {sessions.length}
</span> </span>
)} )}
</div> </div>
<Link <Link
to="/sessions?filter=active" 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} /> View all <ArrowRight size={10} />
</Link> </Link>
@@ -66,7 +66,7 @@ export function ActiveFlowPilotSessions() {
{sessions.length === 0 ? ( {sessions.length === 0 ? (
<div className="px-5 py-8 text-center"> <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> <p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
</div> </div>
) : ( ) : (
@@ -75,26 +75,26 @@ export function ActiveFlowPilotSessions() {
<button <button
key={session.id} key={session.id}
onClick={() => navigate(`/pilot/${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"> <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 <span
className={cn( 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 === 'guided' && 'bg-emerald-400/10 text-emerald-400',
session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-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 === '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'} {session.confidence_tier || 'starting'}
</span> </span>
</div> </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'} {session.problem_summary || 'Session in progress'}
</p> </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"> <span className="flex items-center gap-1">
<Clock size={10} /> <Clock size={10} />
{timeAgo(session.created_at)} {timeAgo(session.created_at)}

8
frontend/src/components/dashboard/FiltersBar.tsx
View File

@@ -22,15 +22,15 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
className={cn( className={cn(
'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors', 'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
activeFilter === f.id activeFilter === f.id
? 'border-primary/30 bg-primary/10 text-primary' ? 'border-[#22d3ee]/30 bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
: 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground' : 'border-[#1e2130] bg-[#14161d] text-[#848b9b] hover:border-[#1e2130]/80 hover:text-[#e2e5eb]'
)} )}
> >
{f.label} {f.label}
</button> </button>
))} ))}
<div className="mx-1.5 h-5 w-px shrink-0 bg-border" /> <div className="mx-1.5 h-5 w-px shrink-0 bg-[#1e2130]" />
<button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors"> <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
<Filter size={14} /> <Filter size={14} />
More Filters More Filters
</button> </button>

10
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
View File

@@ -20,15 +20,15 @@ export function KnowledgeBaseCards() {
] ]
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div <div
className="flex items-center justify-between px-5 py-3" className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }} style={{ borderBottom: '1px solid var(--glass-border)' }}
> >
<h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Knowledge Base</h3>
<button <button
onClick={() => navigate('/trees')} onClick={() => navigate('/trees')}
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"
> >
Browse <ArrowRight size={10} /> Browse <ArrowRight size={10} />
</button> </button>
@@ -41,8 +41,8 @@ export function KnowledgeBaseCards() {
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors" className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
> >
<item.icon size={20} style={{ color: item.color }} /> <item.icon size={20} style={{ color: item.color }} />
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p> <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground"> <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{item.label} {item.label}
</p> </p>
</button> </button>

26
frontend/src/components/dashboard/OnboardingChecklist.tsx
View File

@@ -69,11 +69,11 @@ export function OnboardingChecklist() {
} }
return ( return (
<div className="glass-card overflow-hidden fade-in" style={{ animationDelay: '150ms' }}> <div className="card-interactive overflow-hidden fade-in" style={{ animationDelay: '150ms' }}>
{/* Progress bar */} {/* Progress bar */}
<div className="h-1 w-full bg-[rgba(255,255,255,0.04)]"> <div className="h-1 w-full bg-[rgba(255,255,255,0.04)]">
<div <div
className="h-full bg-gradient-brand transition-all duration-500 ease-out" className="h-full bg-[#22d3ee] transition-all duration-500 ease-out"
style={{ width: `${progressPercent}%` }} style={{ width: `${progressPercent}%` }}
/> />
</div> </div>
@@ -82,15 +82,15 @@ export function OnboardingChecklist() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div> <div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"> <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Getting Started Getting Started
</p> </p>
<p className="text-sm text-foreground mt-0.5"> <p className="text-sm text-[#e2e5eb] mt-0.5">
{isAllDone ? ( {isAllDone ? (
<span className="text-gradient-brand font-semibold">You're all set!</span> <span className="text-[#67e8f9] font-semibold">You're all set!</span>
) : ( ) : (
<span> <span>
<span className="text-gradient-brand font-semibold">{completedCount}</span> <span className="text-[#67e8f9] font-semibold">{completedCount}</span>
{' '}of {totalCount} complete {' '}of {totalCount} complete
</span> </span>
)} )}
@@ -98,7 +98,7 @@ export function OnboardingChecklist() {
</div> </div>
<button <button
onClick={handleDismiss} onClick={handleDismiss}
className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors" className="rounded-md p-1 text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
aria-label="Dismiss onboarding checklist" aria-label="Dismiss onboarding checklist"
> >
<X size={16} /> <X size={16} />
@@ -126,11 +126,11 @@ export function OnboardingChecklist() {
className={cn( className={cn(
'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors', 'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
done done
? 'bg-gradient-brand border-transparent' ? 'bg-[#22d3ee] border-transparent'
: 'border-border' : 'border-[#1e2130]'
)} )}
> >
{done && <Check size={12} className="text-[#101114]" />} {done && <Check size={12} className="text-white" />}
</span> </span>
{/* Label */} {/* Label */}
@@ -138,8 +138,8 @@ export function OnboardingChecklist() {
className={cn( className={cn(
'flex-1', 'flex-1',
done done
? 'text-muted-foreground line-through' ? 'text-[#848b9b] line-through'
: 'text-foreground' : 'text-[#e2e5eb]'
)} )}
> >
{item.label} {item.label}
@@ -147,7 +147,7 @@ export function OnboardingChecklist() {
{/* Arrow for incomplete items */} {/* Arrow for incomplete items */}
{!done && ( {!done && (
<ChevronRight size={14} className="text-muted-foreground shrink-0" /> <ChevronRight size={14} className="text-[#848b9b] shrink-0" />
)} )}
</button> </button>
</li> </li>

16
frontend/src/components/dashboard/OpenSessions.tsx
View File

@@ -17,17 +17,17 @@ interface OpenSessionsProps {
export function OpenSessions({ sessions }: OpenSessionsProps) { export function OpenSessions({ sessions }: OpenSessionsProps) {
return ( return (
<div className="glass-card-static flex flex-col h-full"> <div className="card-flat flex flex-col h-full">
<div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">My Open Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"> <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
View All View All
</Link> </Link>
</div> </div>
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
{sessions.length === 0 ? ( {sessions.length === 0 ? (
<div className="flex-1 flex items-center justify-center"> <div className="flex-1 flex items-center justify-center">
<p className="text-sm text-muted-foreground">No open sessions</p> <p className="text-sm text-[#848b9b]">No open sessions</p>
</div> </div>
) : ( ) : (
sessions.map((session, i) => ( sessions.map((session, i) => (
@@ -40,19 +40,19 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" /> <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm text-foreground truncate">{session.treeName}</div> <div className="text-sm text-[#e2e5eb] truncate">{session.treeName}</div>
<div className="text-[0.6875rem] text-muted-foreground"> <div className="text-[0.6875rem] text-[#848b9b]">
{session.stepNumber && session.totalSteps {session.stepNumber && session.totalSteps
? `Step ${session.stepNumber} of ${session.totalSteps}` ? `Step ${session.stepNumber} of ${session.totalSteps}`
: 'In progress'} : 'In progress'}
<span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span> <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
<span className="font-label text-[0.625rem]">{session.timeAgo}</span> <span className="font-sans text-xs text-[0.625rem]">{session.timeAgo}</span>
</div> </div>
</div> </div>
<Link <Link
to={getTreeNavigatePath(session.treeId, session.treeType)} to={getTreeNavigatePath(session.treeId, session.treeType)}
state={{ sessionId: session.id }} state={{ sessionId: session.id }}
className="shrink-0 rounded-lg bg-gradient-brand px-3 py-1 text-[0.6875rem] font-medium text-primary-foreground hover:opacity-90 transition-opacity" className="shrink-0 rounded-lg bg-[#22d3ee] px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
> >
Resume Resume
</Link> </Link>

12
frontend/src/components/dashboard/PendingEscalations.tsx
View File

@@ -28,7 +28,7 @@ export function PendingEscalations() {
return ( return (
<div <div
className="glass-card-static overflow-hidden" className="card-flat overflow-hidden"
style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }} style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
> >
<div <div
@@ -37,7 +37,7 @@ export function PendingEscalations() {
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertTriangle size={14} className="text-amber-400" /> <AlertTriangle size={14} className="text-amber-400" />
<h3 className="font-heading text-sm font-bold text-foreground"> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">
Pending Escalations Pending Escalations
<span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400"> <span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400">
{escalations.length} {escalations.length}
@@ -46,7 +46,7 @@ export function PendingEscalations() {
</div> </div>
<Link <Link
to="/escalations" to="/escalations"
className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
> >
View all View all
</Link> </Link>
@@ -64,13 +64,13 @@ export function PendingEscalations() {
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" /> <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm text-foreground truncate"> <div className="text-sm text-[#e2e5eb] truncate">
{esc.problem_summary || 'Escalated session'} {esc.problem_summary || 'Escalated session'}
</div> </div>
<div className="text-[0.6875rem] text-muted-foreground"> <div className="text-[0.6875rem] text-[#848b9b]">
{esc.problem_domain || 'General'} {esc.problem_domain || 'General'}
<span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span> <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
<span className="font-label text-[0.625rem]">{timeAgo(esc.created_at)}</span> <span className="font-sans text-xs">{timeAgo(esc.created_at)}</span>
</div> </div>
</div> </div>
<button <button

6
frontend/src/components/dashboard/PerformanceCards.tsx
View File

@@ -71,20 +71,20 @@ export function PerformanceCards() {
key={card.label} key={card.label}
onClick={() => navigate(card.href)} onClick={() => navigate(card.href)}
className={cn( className={cn(
'glass-card p-4 text-left fade-in', 'card-interactive p-4 text-left fade-in',
i === 0 && 'active-glow' i === 0 && 'active-glow'
)} )}
style={{ animationDelay: `${400 + i * 60}ms` }} style={{ animationDelay: `${400 + i * 60}ms` }}
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground"> <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{card.label} {card.label}
</p> </p>
<card.icon size={14} style={{ color: card.iconColor }} /> <card.icon size={14} style={{ color: card.iconColor }} />
</div> </div>
<p className={cn( <p className={cn(
'font-heading text-2xl font-extrabold tracking-tight', 'font-heading text-2xl font-extrabold tracking-tight',
card.highlight ? 'text-gradient-brand' : 'text-foreground' card.highlight ? 'text-[#67e8f9]' : 'text-[#e2e5eb]'
)}> )}>
{card.value} {card.value}
</p> </p>

12
frontend/src/components/dashboard/PreparedSessions.tsx
View File

@@ -28,11 +28,11 @@ export function PreparedSessions() {
} }
return ( return (
<div className="glass-card-static p-5 fade-in" style={{ animationDelay: '200ms' }}> <div className="card-flat p-5 fade-in" style={{ animationDelay: '200ms' }}>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-cyan-400" /> <ClipboardList className="h-4 w-4 text-cyan-400" />
<h3 className="font-heading text-sm font-semibold text-foreground">Prepared for You</h3> <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Prepared for You</h3>
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400"> <span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400">
{sessions.length} {sessions.length}
</span> </span>
@@ -51,13 +51,13 @@ export function PreparedSessions() {
key={session.id} key={session.id}
onClick={() => handleStart(session)} onClick={() => handleStart(session)}
className={cn( className={cn(
'group flex w-full items-center justify-between gap-3 rounded-lg border border-border px-4 py-3', 'group flex w-full items-center justify-between gap-3 rounded-lg border border-[#1e2130] px-4 py-3',
'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5' 'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5'
)} )}
> >
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium text-foreground truncate">{flowName}</p> <p className="text-sm font-medium text-[#e2e5eb] truncate">{flowName}</p>
<div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground"> <div className="mt-1 flex items-center gap-3 text-xs text-[#848b9b]">
{session.ticket_number && ( {session.ticket_number && (
<span>{session.ticket_number}</span> <span>{session.ticket_number}</span>
)} )}
@@ -73,7 +73,7 @@ export function PreparedSessions() {
</span> </span>
</div> </div>
</div> </div>
<ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" /> <ArrowRight className="h-4 w-4 shrink-0 text-[#848b9b] opacity-0 transition-opacity group-hover:opacity-100" />
</button> </button>
) )
})} })}

10
frontend/src/components/dashboard/QuickActions.tsx
View File

@@ -12,16 +12,16 @@ export function QuickActions() {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="glass-card-static flex flex-col h-full"> <div className="card-flat flex flex-col h-full">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Quick Actions</h3>
</div> </div>
<div className="flex-1 flex flex-col justify-between p-3 gap-2"> <div className="flex-1 flex flex-col justify-between p-3 gap-2">
{ACTIONS.map(({ icon: Icon, label, description, href, color }) => ( {ACTIONS.map(({ icon: Icon, label, description, href, color }) => (
<button <button
key={label} key={label}
onClick={() => navigate(href)} onClick={() => navigate(href)}
className="glass-card flex items-center gap-3 px-4 py-3 text-left" className="card-interactive flex items-center gap-3 px-4 py-3 text-left"
> >
<span <span
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
@@ -30,8 +30,8 @@ export function QuickActions() {
<Icon size={18} style={{ color }} /> <Icon size={18} style={{ color }} />
</span> </span>
<div className="min-w-0"> <div className="min-w-0">
<div className="text-sm font-medium text-foreground">{label}</div> <div className="text-sm font-medium text-[#e2e5eb]">{label}</div>
<div className="text-[0.6875rem] text-muted-foreground truncate">{description}</div> <div className="text-[0.6875rem] text-[#848b9b] truncate">{description}</div>
</div> </div>
</button> </button>
))} ))}

6
frontend/src/components/dashboard/QuickStats.tsx
View File

@@ -18,16 +18,16 @@ export function QuickStats({ stats }: QuickStatsProps) {
{stats.map((stat, i) => ( {stats.map((stat, i) => (
<div <div
key={stat.label} key={stat.label}
className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')} className={cn('card-interactive p-4 fade-in', i === 0 && 'active-glow')}
style={{ animationDelay: `${50 + i * 30}ms` }} style={{ animationDelay: `${50 + i * 30}ms` }}
> >
<p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground"> <p className="font-sans text-xs text-[0.625rem] font-medium uppercase tracking-widest text-[#848b9b]">
{stat.label} {stat.label}
</p> </p>
<p <p
className={cn( className={cn(
'mt-1 font-heading text-2xl font-extrabold tracking-tight', 'mt-1 font-heading text-2xl font-extrabold tracking-tight',
stat.gradient && 'text-gradient-brand', stat.gradient && 'text-[#67e8f9]',
stat.color stat.color
)} )}
style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined} style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}

10
frontend/src/components/dashboard/RecentActivity.tsx
View File

@@ -24,9 +24,9 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) { export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Activity</h3>
</div> </div>
<div> <div>
{activities.map((item, i) => ( {activities.map((item, i) => (
@@ -39,15 +39,15 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
}} }}
> >
<span <span
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px]" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
style={{ background: item.iconBg }} style={{ background: item.iconBg }}
> >
<item.icon size={16} style={{ color: item.iconColor }} /> <item.icon size={16} style={{ color: item.iconColor }} />
</span> </span>
<div className="flex-1 min-w-0 pt-0.5"> <div className="flex-1 min-w-0 pt-0.5">
<p className="text-sm text-foreground">{item.description}</p> <p className="text-sm text-[#e2e5eb]">{item.description}</p>
</div> </div>
<span className="shrink-0 font-label text-[0.625rem] text-muted-foreground pt-1"> <span className="shrink-0 font-sans text-xs text-[0.625rem] text-[#848b9b] pt-1">
{item.timestamp} {item.timestamp}
</span> </span>
</div> </div>

10
frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
View File

@@ -41,15 +41,15 @@ export function RecentFlowPilotSessions() {
if (sessions.length === 0) return null if (sessions.length === 0) return null
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div <div
className="flex items-center justify-between px-5 py-3" className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }} style={{ borderBottom: '1px solid var(--glass-border)' }}
> >
<h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Sessions</h3>
<Link <Link
to="/sessions" to="/sessions"
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"
> >
History <ArrowRight size={10} /> History <ArrowRight size={10} />
</Link> </Link>
@@ -69,11 +69,11 @@ export function RecentFlowPilotSessions() {
> >
<StatusIcon size={14} style={{ color: config.color }} className="shrink-0" /> <StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm text-foreground truncate"> <p className="text-sm text-[#e2e5eb] truncate">
{session.problem_summary || 'Session'} {session.problem_summary || 'Session'}
</p> </p>
</div> </div>
<span className="shrink-0 font-label text-[0.625rem] text-muted-foreground"> <span className="shrink-0 font-sans text-xs text-[#848b9b]">
{timeAgo(session.resolved_at || session.created_at)} {timeAgo(session.resolved_at || session.created_at)}
</span> </span>
</button> </button>

8
frontend/src/components/dashboard/SectionGroup.tsx
View File

@@ -19,19 +19,19 @@ export function SectionGroup({ title, count, defaultOpen = true, delay = 150, ch
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
className="flex w-full items-center gap-2 py-2" className="flex w-full items-center gap-2 py-2"
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" /> <span className="h-2 w-2 shrink-0 rounded-full bg-[#22d3ee]" />
<span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground"> <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-[#e2e5eb]">
{title} {title}
</span> </span>
{count !== undefined && ( {count !== undefined && (
<span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground"> <span className="rounded-full bg-secondary px-2 py-0.5 font-sans text-xs text-[#848b9b]">
{count} {count}
</span> </span>
)} )}
<div className="flex-1" /> <div className="flex-1" />
<ChevronDown <ChevronDown
size={14} size={14}
className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')} className={cn('text-[#848b9b] transition-transform', !open && '-rotate-90')}
/> />
</button> </button>
{open && <div className="mt-1 space-y-1">{children}</div>} {open && <div className="mt-1 space-y-1">{children}</div>}

16
frontend/src/components/dashboard/SessionsPanel.tsx
View File

@@ -21,14 +21,14 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
if (sessions.length === 0) return null if (sessions.length === 0) return null
return ( return (
<div className="glass-card-static fade-in" style={{ animationDelay: `${delay}ms` }}> <div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3> <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Recent Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"> <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
View All View All
</Link> </Link>
</div> </div>
<div className="divide-y divide-border"> <div className="divide-y divide-[#1e2130]">
{sessions.map(session => ( {sessions.map(session => (
<Link <Link
key={session.id} key={session.id}
@@ -42,15 +42,15 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
'h-2 w-2 rounded-full', 'h-2 w-2 rounded-full',
session.status === 'completed' ? 'bg-green-500' : session.status === 'completed' ? 'bg-green-500' :
session.status === 'in_progress' ? 'bg-amber-500' : session.status === 'in_progress' ? 'bg-amber-500' :
'bg-muted-foreground' 'bg-[#848b9b]'
)} )}
/> />
{/* Name */} {/* Name */}
<span className="text-sm text-foreground truncate">{session.treeName}</span> <span className="text-sm text-[#e2e5eb] truncate">{session.treeName}</span>
{/* Progress */} {/* Progress */}
<span className="text-[0.6875rem] text-muted-foreground truncate"> <span className="text-[0.6875rem] text-[#848b9b] truncate">
{session.status === 'completed' {session.status === 'completed'
? '✓ Resolved' ? '✓ Resolved'
: session.stepNumber && session.totalSteps : session.stepNumber && session.totalSteps
@@ -59,7 +59,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
</span> </span>
{/* Ticket */} {/* Ticket */}
<span className="font-label text-[0.6875rem] text-muted-foreground truncate"> <span className="font-sans text-xs text-[0.6875rem] text-[#848b9b] truncate">
{session.ticketNumber || '—'} {session.ticketNumber || '—'}
</span> </span>

16
frontend/src/components/dashboard/StartSessionInput.tsx
View File

@@ -32,12 +32,12 @@ export function StartSessionInput() {
} }
return ( return (
<div className="glass-card-static overflow-hidden"> <div className="card-flat overflow-hidden">
<div className="px-5 py-4 sm:px-6 sm:py-5"> <div className="px-5 py-4 sm:px-6 sm:py-5">
<div className="relative"> <div className="relative">
<Sparkles <Sparkles
size={18} size={18}
className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground" className="absolute left-4 top-1/2 -translate-y-1/2 text-[#848b9b]"
/> />
<input <input
ref={inputRef} ref={inputRef}
@@ -46,7 +46,7 @@ export function StartSessionInput() {
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="What are you troubleshooting?" placeholder="What are you troubleshooting?"
className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded-xl border border-[#1e2130] bg-[#0c0d10] py-3.5 pl-11 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
<div className="mt-3 flex items-center justify-between"> <div className="mt-3 flex items-center justify-between">
@@ -57,8 +57,8 @@ export function StartSessionInput() {
className={cn( className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors', 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
mode === 'guided' mode === 'guided'
? 'bg-primary/10 text-foreground' ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-muted-foreground hover:text-foreground' : 'text-[#848b9b] hover:text-[#e2e5eb]'
)} )}
> >
<Sparkles size={12} /> <Sparkles size={12} />
@@ -70,15 +70,15 @@ export function StartSessionInput() {
className={cn( className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors', 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
mode === 'chat' mode === 'chat'
? 'bg-primary/10 text-foreground' ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-muted-foreground hover:text-foreground' : 'text-[#848b9b] hover:text-[#e2e5eb]'
)} )}
> >
<MessageCircle size={12} /> <MessageCircle size={12} />
Open Chat Open Chat
</button> </button>
</div> </div>
<span className="text-[0.625rem] text-muted-foreground"> <span className="text-[0.625rem] text-[#848b9b]">
Press Enter to start Press Enter to start
</span> </span>
</div> </div>

10
frontend/src/components/dashboard/TeamSummary.tsx
View File

@@ -25,15 +25,15 @@ export function TeamSummary() {
] ]
return ( return (
<div className="glass-card-static"> <div className="card-flat">
<div <div
className="flex items-center justify-between px-5 py-3" className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }} style={{ borderBottom: '1px solid var(--glass-border)' }}
> >
<h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Team Summary</h3>
<button <button
onClick={() => navigate('/analytics')} onClick={() => navigate('/analytics')}
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"
> >
Manage <ArrowRight size={10} /> Manage <ArrowRight size={10} />
</button> </button>
@@ -46,8 +46,8 @@ export function TeamSummary() {
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors" className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
> >
<item.icon size={20} style={{ color: item.color }} /> <item.icon size={20} style={{ color: item.color }} />
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p> <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground"> <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{item.label} {item.label}
</p> </p>
</button> </button>

14
frontend/src/components/dashboard/TreeListItem.tsx
View File

@@ -33,7 +33,7 @@ export function TreeListItem({
return ( return (
<div <div
onClick={() => navigate(getTreeNavigatePath(id, treeType))} onClick={() => navigate(getTreeNavigatePath(id, treeType))}
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]" className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-[#14161d] px-4 py-3 transition-colors hover:border-[#1e2130] hover:bg-[var(--sidebar-hover)]"
style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }} style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
> >
{/* Icon box */} {/* Icon box */}
@@ -46,15 +46,15 @@ export function TreeListItem({
{/* Info */} {/* Info */}
<div className="min-w-0"> <div className="min-w-0">
<p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p> <p className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">{name}</p>
<div className="mt-0.5 flex items-center gap-2"> <div className="mt-0.5 flex items-center gap-2">
{tags.slice(0, 3).map(tag => ( {tags.slice(0, 3).map(tag => (
<span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground"> <span key={tag} className="rounded border border-[#1e2130] bg-secondary px-1.5 py-px font-sans text-xs text-[0.625rem] text-[#848b9b]">
{tag} {tag}
</span> </span>
))} ))}
{description && tags.length === 0 && ( {description && tags.length === 0 && (
<span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span> <span className="text-[0.6875rem] text-[#848b9b] truncate">{description}</span>
)} )}
</div> </div>
</div> </div>
@@ -64,13 +64,13 @@ export function TreeListItem({
{category && ( {category && (
<> <>
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} /> <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
<span className="font-label text-xs text-muted-foreground truncate">{category.name}</span> <span className="font-sans text-xs text-[#848b9b] truncate">{category.name}</span>
</> </>
)} )}
</div> </div>
{/* Usage count */} {/* Usage count */}
<div className="text-right font-label text-xs text-muted-foreground"> <div className="text-right font-sans text-xs text-[#848b9b]">
{usageCount} uses {usageCount} uses
</div> </div>
@@ -85,7 +85,7 @@ export function TreeListItem({
e.stopPropagation() e.stopPropagation()
navigate(getTreeEditorPath(id, treeType)) navigate(getTreeEditorPath(id, treeType))
}} }}
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100" className="flex h-8 w-8 items-center justify-center rounded-md text-[#848b9b] opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
> >
<MoreHorizontal size={16} /> <MoreHorizontal size={16} />
</button> </button>

14
frontend/src/components/dashboard/WeeklyCalendar.tsx
View File

@@ -34,10 +34,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
const days = useMemo(() => getWeekDays(), []) const days = useMemo(() => getWeekDays(), [])
return ( return (
<div className="glass-card-static flex flex-col h-full"> <div className="card-flat flex flex-col h-full">
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}> <div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<Calendar size={16} className="text-muted-foreground" /> <Calendar size={16} className="text-[#848b9b]" />
<h3 className="font-heading text-sm font-bold text-foreground">This Week</h3> <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">This Week</h3>
</div> </div>
<div className="flex flex-1 min-h-0"> <div className="flex flex-1 min-h-0">
{days.map((day, i) => { {days.map((day, i) => {
@@ -56,10 +56,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)', borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
}} }}
> >
<span className={`font-label text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}> <span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-[#848b9b]'}`}>
{day.label} {day.label}
</span> </span>
<div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}> <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-[#e2e5eb]' : 'text-[#848b9b]'}`}>
{day.date.getDate()} {day.date.getDate()}
</div> </div>
</div> </div>
@@ -76,8 +76,8 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
background: 'rgba(255, 255, 255, 0.02)', background: 'rgba(255, 255, 255, 0.02)',
}} }}
> >
<div className="font-medium text-foreground truncate">{event.title}</div> <div className="font-medium text-[#e2e5eb] truncate">{event.title}</div>
<div className="font-label text-[0.5625rem] text-muted-foreground">{event.time}</div> <div className="font-sans text-xs text-[0.5625rem] text-[#848b9b]">{event.time}</div>
</div> </div>
)) ))
)} )}