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

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/assistant/ChatMessage.tsx
View File

@@ -16,8 +16,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
<div
className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
role === 'assistant'
? 'bg-primary/15 text-primary'
: 'bg-white/[0.08] text-muted-foreground'
? 'bg-primary/15 text-[#22d3ee]'
: 'bg-white/[0.08] text-[#848b9b]'
}`}
>
{role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
@@ -28,8 +28,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
<div
className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
role === 'user'
? 'bg-primary/15 text-foreground'
: 'bg-white/[0.04] text-foreground border border-brand-border'
? 'bg-primary/15 text-[#e2e5eb]'
: 'bg-white/[0.04] text-[#e2e5eb] border border-brand-border'
}`}
>
<MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
@@ -38,7 +38,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
{/* Suggested flows (assistant only) */}
{role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
<div className="space-y-1.5">
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
Related Flows
</span>
{suggestedFlows.map(flow => (

16
frontend/src/components/assistant/ChatSidebar.tsx
View File

@@ -31,7 +31,7 @@ export function ChatSidebar({
<div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
<button
onClick={onNewChat}
className="w-full flex items-center justify-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-4 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
className="w-full flex items-center justify-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
>
<Plus size={16} />
New Chat
@@ -42,7 +42,7 @@ export function ChatSidebar({
<div className="flex-1 overflow-y-auto py-2">
{pinnedChats.length > 0 && (
<div className="px-3 mb-1">
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
Pinned
</span>
</div>
@@ -74,7 +74,7 @@ export function ChatSidebar({
))}
{chats.length === 0 && (
<div className="px-4 py-8 text-center text-muted-foreground text-sm">
<div className="px-4 py-8 text-center text-[#848b9b] text-sm">
No conversations yet
</div>
)}
@@ -102,14 +102,14 @@ function ChatItem({
className={cn(
'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
isActive
? 'bg-primary/10 text-foreground'
: 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:bg-white/[0.04] hover:text-[#e2e5eb]'
)}
>
<MessageSquare size={14} className="shrink-0" />
<div className="flex-1 min-w-0">
<div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
<div className="text-[0.6875rem] text-muted-foreground">
<div className="text-[0.6875rem] text-[#848b9b]">
{chat.message_count} messages
</div>
</div>
@@ -119,11 +119,11 @@ function ChatItem({
className="p-1 rounded hover:bg-white/[0.08]"
title={chat.pinned ? 'Unpin' : 'Pin'}
>
<Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
<Pin size={12} className={chat.pinned ? 'text-[#22d3ee]' : ''} />
</button>
<button
onClick={e => { e.stopPropagation(); onDelete() }}
className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
className="p-1 rounded hover:bg-white/[0.08] text-[#848b9b] hover:text-rose-400"
title="Delete"
>
<Trash2 size={12} />

62
frontend/src/components/assistant/ConcludeSessionModal.tsx
View File

@@ -136,13 +136,13 @@ export function ConcludeSessionModal({
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-xs"
className="absolute inset-0 bg-black/60"
onClick={onClose}
/>
{/* Modal */}
<div
className="relative w-full max-w-2xl mx-4 glass-card-static overflow-hidden animate-in fade-in zoom-in-95 duration-200"
className="relative w-full max-w-2xl mx-4 card-flat overflow-hidden animate-in fade-in zoom-in-95 duration-200"
style={{
maxHeight: 'calc(100vh - 4rem)',
display: 'flex',
@@ -155,21 +155,21 @@ export function ConcludeSessionModal({
style={{ borderColor: 'var(--glass-border)' }}
>
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
<ClipboardList size={18} className="text-primary" />
<div className="w-9 h-9 rounded-xl bg-[rgba(34,211,238,0.10)] flex items-center justify-center">
<ClipboardList size={18} className="text-[#22d3ee]" />
</div>
<div>
<h2 className="text-base font-heading font-semibold text-foreground">
<h2 className="text-base font-heading font-semibold text-[#e2e5eb]">
Conclude Session
</h2>
<p className="text-xs text-muted-foreground truncate max-w-[300px]">
<p className="text-xs text-[#848b9b] truncate max-w-[300px]">
{chatTitle}
</p>
</div>
</div>
<button
onClick={onClose}
className="p-2 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
className="p-2 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
<X size={18} />
</button>
@@ -194,20 +194,20 @@ export function ConcludeSessionModal({
)}
<div
className={cn(
'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-label font-medium transition-colors',
'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-sans text-xs font-medium transition-colors',
step === s
? 'bg-gradient-brand text-brand-dark'
? 'bg-[#22d3ee] text-brand-dark'
: (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
? 'bg-primary/20 text-primary'
: 'bg-brand-border text-muted-foreground'
? 'bg-primary/20 text-[#22d3ee]'
: 'bg-brand-border text-[#848b9b]'
)}
>
{i + 1}
</div>
<span
className={cn(
'text-xs font-label',
step === s ? 'text-foreground' : 'text-muted-foreground'
'text-xs font-sans text-xs',
step === s ? 'text-[#e2e5eb]' : 'text-[#848b9b]'
)}
>
{s === 'select-outcome' ? 'Outcome' : s === 'add-notes' ? 'Notes' : 'Summary'}
@@ -221,7 +221,7 @@ export function ConcludeSessionModal({
{/* Step 1: Select Outcome */}
{step === 'select-outcome' && (
<div className="space-y-3">
<p className="text-sm text-muted-foreground mb-4">
<p className="text-sm text-[#848b9b] mb-4">
How did this session end?
</p>
{OUTCOMES.map(o => {
@@ -241,8 +241,8 @@ export function ConcludeSessionModal({
<Icon size={20} className={o.color} />
</div>
<div>
<span className="text-sm font-semibold text-foreground block">{o.label}</span>
<span className="text-xs text-muted-foreground">{o.description}</span>
<span className="text-sm font-semibold text-[#e2e5eb] block">{o.label}</span>
<span className="text-xs text-[#848b9b]">{o.description}</span>
</div>
</button>
)
@@ -255,20 +255,20 @@ export function ConcludeSessionModal({
<div className="space-y-4">
{/* Selected outcome badge */}
<div className="flex items-center gap-2">
<div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
<div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs font-sans text-xs', selectedOutcome.bg, selectedOutcome.border, 'border')}>
<selectedOutcome.icon size={14} className={selectedOutcome.color} />
<span className={selectedOutcome.color}>{selectedOutcome.label}</span>
</div>
<button
onClick={() => setStep('select-outcome')}
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Change
</button>
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-2">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-2">
Additional Notes (optional)
</label>
<textarea
@@ -282,7 +282,7 @@ export function ConcludeSessionModal({
: 'What still needs to be done, where you left off...'
}
rows={4}
className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
className="w-full resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm placeholder:text-[#848b9b] px-4 py-3 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
/>
</div>
@@ -300,7 +300,7 @@ export function ConcludeSessionModal({
<div className="space-y-4">
{/* Outcome badge */}
{selectedOutcome && (
<div className={cn('px-3 py-1.5 rounded-lg inline-flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
<div className={cn('px-3 py-1.5 rounded-lg inline-flex items-center gap-2 text-xs font-sans text-xs', selectedOutcome.bg, selectedOutcome.border, 'border')}>
<selectedOutcome.icon size={14} className={selectedOutcome.color} />
<span className={selectedOutcome.color}>{selectedOutcome.label}</span>
</div>
@@ -312,12 +312,12 @@ export function ConcludeSessionModal({
style={{ borderColor: 'var(--glass-border)' }}
>
<div className="flex items-center justify-between mb-3">
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
<Sparkles size={10} className="text-primary" />
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] flex items-center gap-1.5">
<Sparkles size={10} className="text-[#22d3ee]" />
Generated Ticket Notes
</span>
</div>
<div className="prose-sm text-foreground">
<div className="prose-sm text-[#e2e5eb]">
<MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
</div>
</div>
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
<div />
<button
onClick={onClose}
className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
>
Cancel
</button>
@@ -346,14 +346,14 @@ export function ConcludeSessionModal({
<>
<button
onClick={() => setStep('select-outcome')}
className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
>
Back
</button>
<button
onClick={handleGenerate}
disabled={generating}
className="flex items-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
className="flex items-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
>
{generating ? (
<>
@@ -376,7 +376,7 @@ export function ConcludeSessionModal({
{outcome === 'paused' && (
<button
onClick={handleResumeNew}
className="flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
>
<RefreshCw size={14} />
Resume in New Chat
@@ -387,10 +387,10 @@ export function ConcludeSessionModal({
<button
onClick={handleCopy}
className={cn(
'flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
copied
? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
: 'bg-gradient-brand text-brand-dark hover:opacity-90 active:scale-[0.97]'
: 'bg-[#22d3ee] text-brand-dark hover:brightness-110 active:scale-[0.98]'
)}
>
{copied ? (
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
</button>
<button
onClick={onClose}
className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
className="px-4 py-2.5 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
>
Done
</button>

12
frontend/src/components/assistant/SuggestedFlowCard.tsx
View File

@@ -18,24 +18,24 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
return (
<button
onClick={handleClick}
className="w-full text-left glass-card-static p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
className="w-full text-left card-flat p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
>
<div className="flex items-start gap-2">
<Box size={14} className="text-primary mt-0.5 shrink-0" />
<Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5">
<span className="text-[0.8125rem] font-medium text-foreground truncate">
<span className="text-[0.8125rem] font-medium text-[#e2e5eb] truncate">
{flow.tree_name}
</span>
<span className="font-label text-[0.625rem] uppercase tracking-wider text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
{flow.tree_type}
</span>
</div>
<p className="text-[0.75rem] text-muted-foreground mt-0.5 line-clamp-2">
<p className="text-[0.75rem] text-[#848b9b] mt-0.5 line-clamp-2">
{flow.relevance_snippet}
</p>
</div>
<ArrowRight size={14} className="text-muted-foreground group-hover:text-primary transition-colors shrink-0 mt-0.5" />
<ArrowRight size={14} className="text-[#848b9b] group-hover:text-[#22d3ee] transition-colors shrink-0 mt-0.5" />
</div>
</button>
)