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

refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens

Browse Source 
Replace hardcoded Tailwind color utilities with semantic CSS variable tokens
across 31 files in the FlowPilot, Assistant Chat, and Script Builder feature
communities — the areas graphify identified as design-system-free.

- text-blue-400 → text-accent, bg-blue-500/10 → bg-accent-dim, border-blue-500/20 → border-accent/20
- text-amber-400 → text-warning, bg-amber-400/10 → bg-warning-dim, border-l-amber-500 → border-l-warning
- text-rose-400/500 → text-danger, bg-rose-500/10 → bg-danger-dim
- text-emerald-400 → text-success, bg-emerald-500/10 → bg-success-dim, border-l-emerald-500 → border-l-success
- bg-white/[0.08] → bg-elevated (opacity hack → semantic surface token)
- bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent (no gradient surfaces)
- bg-[#60a5fa] → bg-accent (hard-coded hex removed)

Also adds graphify-out/ to .gitignore.

Theme resilience: accent color has changed twice in 5 weeks. Semantic tokens
mean the next change is a 1-line edit in index.css, not 110 grep-and-replace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-04-06 20:20:07 -04:00
parent 37179096b0
commit cef853d7ea
25 changed files with 114 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -233,3 +233,7 @@ package.json
package-lock.json
.worktrees/
.gstack/
# graphify knowledge graph outputs
graphify-out/
.graphify_python

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

@@ -17,7 +17,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
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-elevated text-muted-foreground'
}`}
>
{role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}

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

@@ -193,7 +193,7 @@ function ChatItem({
className={cn(
'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
confirming
? 'bg-rose-500/10 border border-rose-500/20'
? 'bg-danger-dim border border-danger/20'
: isActive
? 'bg-accent-dim text-foreground'
: 'text-muted-foreground hover:bg-input hover:text-foreground'
@@ -203,10 +203,10 @@ function ChatItem({
<div className="flex-1 min-w-0">
{confirming ? (
<div className="flex items-center gap-2">
<span className="text-[0.75rem] text-rose-400 font-medium">Delete?</span>
<span className="text-[0.75rem] text-danger font-medium">Delete?</span>
<button
onClick={e => { e.stopPropagation(); onDelete(); setConfirming(false) }}
className="text-[0.6875rem] font-medium text-rose-400 hover:text-rose-300 px-1.5 py-0.5 rounded bg-rose-500/15 hover:bg-rose-500/25 transition-colors"
className="text-[0.6875rem] font-medium text-danger hover:text-danger px-1.5 py-0.5 rounded bg-danger/15 hover:bg-danger/25 transition-colors"
>
Yes
</button>
@@ -230,14 +230,14 @@ function ChatItem({
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={e => { e.stopPropagation(); onTogglePin() }}
className="p-1 rounded hover:bg-white/[0.08]"
className="p-1 rounded hover:bg-elevated"
title={chat.pinned ? 'Unpin' : 'Pin'}
>
<Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
</button>
<button
onClick={e => { e.stopPropagation(); setConfirming(true) }}
className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
className="p-1 rounded hover:bg-elevated text-muted-foreground hover:text-danger"
title="Delete"
>
<Trash2 size={12} />

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

@@ -36,7 +36,7 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
label: 'Resolved',
description: 'Issue has been fixed or answered',
icon: CheckCircle2,
color: 'text-emerald-400',
color: 'text-success',
bg: 'bg-emerald-400/10',
border: 'border-emerald-400/30',
},
@@ -45,17 +45,17 @@ const OUTCOMES: { value: ConclusionOutcome; label: string; description: string;
label: 'Escalate',
description: 'Needs to be handed off or escalated',
icon: ArrowUpRight,
color: 'text-amber-400',
bg: 'bg-amber-400/10',
border: 'border-amber-400/30',
color: 'text-warning',
bg: 'bg-warning-dim',
border: 'border-warning/30',
},
{
value: 'paused',
label: 'Paused',
description: 'Continuing later — saving progress',
icon: Pause,
color: 'text-blue-400',
bg: 'bg-blue-400/10',
color: 'text-accent',
bg: 'bg-accent-dim',
border: 'border-blue-400/30',
},
]
@@ -362,7 +362,7 @@ export function ConcludeSessionModal({
</div>
{error && (
<div className="text-sm text-rose-400 bg-rose-400/10 border border-rose-400/20 rounded-lg px-4 py-2">
<div className="text-sm text-danger bg-danger-dim border border-danger/20 rounded-lg px-4 py-2">
{error}
</div>
)}
@@ -410,7 +410,7 @@ export function ConcludeSessionModal({
<div className="h-3 bg-elevated rounded w-4/5" />
</div>
) : streamError ? (
<div className="flex items-center gap-2 text-sm text-amber-400">
<div className="flex items-center gap-2 text-sm text-warning">
<AlertTriangle size={14} />
{streamError}
</div>
@@ -467,7 +467,7 @@ export function ConcludeSessionModal({
{/* Paused/Escalated: generating spinner */}
{(outcome === 'paused' || outcome === 'escalated') && generatingUpdate && (
<div className="flex flex-col items-center justify-center py-8 gap-3">
<Loader2 size={24} className="animate-spin text-blue-400" />
<Loader2 size={24} className="animate-spin text-accent" />
<p className="text-sm text-muted-foreground">Generating status update...</p>
</div>
)}
@@ -544,7 +544,7 @@ export function ConcludeSessionModal({
{outcome === 'paused' && (
<button
onClick={handleResumeNew}
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"
className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-accent bg-accent-dim border border-accent/20 hover:bg-accent/15 transition-all"
>
<RefreshCw size={14} />
Resume in New Chat
@@ -566,7 +566,7 @@ export function ConcludeSessionModal({
className={cn(
'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-emerald-400/15 text-success border border-emerald-400/30'
: 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
)}
>

2
frontend/src/components/assistant/TaskLane.tsx
View File

@@ -360,7 +360,7 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
<section>
<div className="sticky top-0 z-10 pb-2" style={{ background: 'var(--color-bg-page)' }}>
<div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[1.2px] text-muted-foreground pl-0.5">
<span className="w-1.5 h-1.5 rounded-full bg-[#60a5fa]" />
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
Diagnostic Checks
{actionTasks.every(a => a.state === 'done' || a.state === 'skipped') && (
<Check size={10} className="text-success" />

8
frontend/src/components/flowpilot/AISessionListItem.tsx
View File

@@ -9,9 +9,9 @@ interface AISessionListItemProps {
const STATUS_CONFIG = {
active: { icon: Clock, color: 'text-primary', 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' },
paused: { icon: Pause, color: 'text-warning', label: 'Paused' },
resolved: { icon: CheckCircle2, color: 'text-success', label: 'Resolved' },
escalated: { icon: ArrowUpRight, color: 'text-warning', label: 'Escalated' },
abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
} as const
@@ -64,7 +64,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
</div>
</div>
{session.session_rating && (
<span className="font-sans text-xs text-xs text-amber-400">
<span className="font-sans text-xs text-xs text-warning">
{'★'.repeat(session.session_rating)}
</span>
)}

8
frontend/src/components/flowpilot/EscalateModal.tsx
View File

@@ -35,9 +35,9 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
return (
<Modal isOpen={open} onClose={handleClose} title="Escalate Session" size="sm">
<div className="space-y-4">
<div className="flex items-start gap-3 rounded-xl border border-amber-400/20 bg-amber-400/5 p-3">
<AlertTriangle size={16} className="text-amber-400 shrink-0 mt-0.5" />
<p className="text-sm text-amber-400">
<div className="flex items-start gap-3 rounded-xl border border-warning/20 bg-warning/5 p-3">
<AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
<p className="text-sm text-warning">
This will mark the session as requesting escalation. Team members will see it in their escalation queue and can pick it up with full context.
</p>
</div>
@@ -70,7 +70,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
<button
onClick={handleSubmit}
disabled={!reason.trim() || reason.trim().length < 5 || isProcessing}
className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-amber-500/90 px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-amber-500 active:scale-[0.98] disabled:opacity-40 transition-all"
className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-warning px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-warning active:scale-[0.98] disabled:opacity-40 transition-all"
>
{isProcessing ? (
<Loader2 size={14} className="animate-spin" />

4
frontend/src/components/flowpilot/EscalationQueue.tsx
View File

@@ -50,7 +50,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
if (error) {
return (
<div className="py-12 text-center">
<p className="text-sm text-rose-400">{error}</p>
<p className="text-sm text-danger">{error}</p>
<button
onClick={loadQueue}
className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -99,7 +99,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
{session.problem_summary || 'Untitled session'}
</p>
{session.escalation_reason && (
<p className="mt-1 text-xs text-amber-400 line-clamp-2">
<p className="mt-1 text-xs text-warning line-clamp-2">
Reason: {session.escalation_reason}
</p>
)}

10
frontend/src/components/flowpilot/FlowPilotActionBar.tsx
View File

@@ -91,7 +91,7 @@ export function FlowPilotActionBar({
<button
onClick={() => { setShowResolve(true); setShowEscalate(false) }}
disabled={!canResolve || isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center justify-center gap-1.5 rounded-lg bg-success-dim border border-success/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<CheckCircle2 size={15} />
Resolve
@@ -99,7 +99,7 @@ export function FlowPilotActionBar({
<button
onClick={() => setShowEscalate(true)}
disabled={!canEscalate || isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center justify-center gap-1.5 rounded-lg bg-warning-dim border border-warning/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-warning hover:bg-warning/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<ArrowUpRight size={15} />
Escalate
@@ -108,7 +108,7 @@ export function FlowPilotActionBar({
<button
onClick={() => setShowStatusUpdate(true)}
disabled={isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center justify-center gap-1.5 rounded-lg bg-accent-dim border border-accent/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-accent hover:bg-accent/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
title="Share Update"
>
<FileText size={15} />
@@ -166,7 +166,7 @@ export function FlowPilotActionBar({
<button
onClick={handleResolve}
disabled={resolutionSummary.length < 5 || submitting}
className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
className="rounded-lg bg-success/20 border border-success/30 px-4 py-2 min-h-[44px] text-sm font-medium text-success hover:bg-success/30 disabled:opacity-50 transition-colors"
>
{submitting ? 'Resolving...' : 'Resolve Session'}
</button>
@@ -193,7 +193,7 @@ export function FlowPilotActionBar({
<button
onClick={handleAbandon}
disabled={submitting}
className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
className="rounded-lg bg-danger/20 border border-danger/30 px-4 py-2 min-h-[44px] text-sm font-medium text-danger hover:bg-danger/30 disabled:opacity-50 transition-colors"
>
{submitting ? 'Closing...' : 'Close Session'}
</button>

4
frontend/src/components/flowpilot/FlowPilotIntake.tsx
View File

@@ -155,7 +155,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
</div>
<button
onClick={handleClearTicket}
className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-white/[0.06] hover:text-foreground transition-colors"
className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-elevated hover:text-foreground transition-colors"
>
<X size={14} />
</button>
@@ -215,7 +215,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
Pull from Ticket
</button>
{psaChecked && !psaConnection && (
<span className="flex items-center gap-1 text-[0.625rem] text-amber-400/80">
<span className="flex items-center gap-1 text-[0.625rem] text-warning/80">
<AlertTriangle size={10} />
No PSA connected
</span>

6
frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
View File

@@ -243,17 +243,17 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
<button
type="button"
onClick={() => handleRemoveUpload(upload.id)}
className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-danger/20 transition-colors"
>
<X size={8} className="text-muted-foreground" />
</button>
)}
{upload.status === 'error' && (
<div
className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer"
className="absolute inset-0 bg-danger/20 border-2 border-danger flex items-center justify-center cursor-pointer"
onClick={() => retryUpload(upload.id)}
>
<RotateCcw size={10} className="text-rose-500" />
<RotateCcw size={10} className="text-danger" />
</div>
)}
</div>

2
frontend/src/components/flowpilot/FlowPilotSession.tsx
View File

@@ -148,7 +148,7 @@ export function FlowPilotSession({
<div className="mb-4">
<button
onClick={() => setShowShareCommunication(true)}
className="flex items-center gap-2 rounded-lg bg-blue-500/10 border border-blue-500/20 px-4 py-2.5 text-sm font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
className="flex items-center gap-2 rounded-lg bg-accent-dim border border-accent/20 px-4 py-2.5 text-sm font-medium text-accent hover:bg-accent/20 transition-colors"
>
<FileText size={16} />
{shareLabel}

6
frontend/src/components/flowpilot/FlowPilotStepCard.tsx
View File

@@ -161,7 +161,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
<div
className={cn(
'card-flat p-3 sm:p-4 lg:p-5',
isResolutionSuggestion && 'border-emerald-500/30'
isResolutionSuggestion && 'border-success/30'
)}
>
{/* Context message */}
@@ -175,7 +175,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
<div className="flex items-start gap-3 mb-4">
<span className={cn(
'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
isResolutionSuggestion ? 'bg-emerald-500/10 text-emerald-400' : 'bg-accent-dim text-primary'
isResolutionSuggestion ? 'bg-success-dim text-success' : 'bg-accent-dim text-primary'
)}>
<Icon size={14} />
</span>
@@ -197,7 +197,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
<div className="flex flex-col gap-2 sm:flex-row">
<button
onClick={() => handleResolutionResponse(true)}
className="flex-1 min-h-[44px] rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2.5 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
className="flex-1 min-h-[44px] rounded-lg bg-success-dim border border-success/20 px-4 py-2.5 text-sm font-medium text-success hover:bg-success/20 transition-colors"
>
Yes, this is resolved
</button>

2
frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
View File

@@ -128,7 +128,7 @@ export function InSessionScriptGenerator({
onClick={handleCopy}
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
>
{copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
{copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
{copied ? 'Copied' : 'Copy'}
</button>
</div>

6
frontend/src/components/flowpilot/ProposalCard.tsx
View File

@@ -2,9 +2,9 @@ import { GitBranch, ArrowUpRight, Sparkles, Clock, Hash } from 'lucide-react'
import type { FlowProposalSummary } from '@/types/flow-proposal'
const TYPE_CONFIG = {
new_flow: { label: 'New Flow', color: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
enhancement: { label: 'Enhancement', color: 'text-amber-400 bg-amber-400/10 border-amber-400/20', icon: ArrowUpRight },
branch_addition: { label: 'Branch', color: 'text-blue-400 bg-blue-400/10 border-blue-400/20', icon: GitBranch },
new_flow: { label: 'New Flow', color: 'text-success bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
enhancement: { label: 'Enhancement', color: 'text-warning bg-warning-dim border-warning/20', icon: ArrowUpRight },
branch_addition: { label: 'Branch', color: 'text-accent bg-accent-dim border-accent/20', icon: GitBranch },
auto_reinforced: { label: 'Reinforced', color: 'text-muted-foreground bg-card border-border', icon: Sparkles },
} as const

10
frontend/src/components/flowpilot/ProposalDetail.tsx
View File

@@ -105,7 +105,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
{proposal.proposed_diff && (() => {
const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
return (
<div className="card-flat border-l-2 border-l-amber-500 p-4">
<div className="card-flat border-l-2 border-l-warning p-4">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Proposed Changes</h4>
{diff.diff_description && (
<p className="text-sm text-foreground">{diff.diff_description}</p>
@@ -114,8 +114,8 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
<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>
<div key={i} className="rounded-lg bg-success/5 border border-success/10 px-3 py-2 text-xs text-foreground">
<span className="text-success">+ </span>
{node.title || node.question || node.description || 'New node'}
</div>
))}
@@ -196,7 +196,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
<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"
className="flex items-center gap-2 rounded-lg bg-success-dim border border-success/20 px-4 py-2 text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 transition-colors"
>
{isSubmitting ? <Loader2 size={14} className="animate-spin" /> : <CheckCircle2 size={14} />}
Approve & Publish
@@ -225,7 +225,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
<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"
className="flex items-center gap-2 rounded-lg bg-danger-dim border border-danger/20 px-4 py-2 text-sm font-medium text-danger hover:bg-danger/20 disabled:opacity-40 transition-colors"
>
<XCircle size={14} />
{showRejectConfirm ? 'Confirm Reject' : 'Reject'}

6
frontend/src/components/flowpilot/SessionBriefing.tsx
View File

@@ -38,7 +38,7 @@ export function SessionBriefing({
const pkg = escalationPackage
return (
<div className="card-flat border-l-2 border-l-amber-500 p-5 space-y-4">
<div className="card-flat border-l-2 border-l-warning p-5 space-y-4">
<div>
<h3 className="font-heading text-base font-semibold text-foreground">
Escalation from {originalEngineerName || 'another engineer'}
@@ -60,7 +60,7 @@ export function SessionBriefing({
{pkg.escalation_reason && (
<div>
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Why escalated</h4>
<p className="text-sm text-amber-400">{pkg.escalation_reason}</p>
<p className="text-sm text-warning">{pkg.escalation_reason}</p>
</div>
)}
@@ -111,7 +111,7 @@ export function SessionBriefing({
<ul className="space-y-1">
{pkg.suggested_next_steps.map((s, i) => (
<li key={i} className="text-sm text-foreground flex items-start gap-2">
<span className="text-emerald-400 mt-0.5">→</span>
<span className="text-success mt-0.5">→</span>
{s}
</li>
))}

34
frontend/src/components/flowpilot/SessionDocView.tsx
View File

@@ -55,38 +55,38 @@ export function SessionDocView({
currentPushStatus === 'sent'
? 'border-emerald-400/20 bg-emerald-400/5'
: currentPushStatus === 'pending_retry'
? 'border-amber-400/20 bg-amber-400/5'
: 'border-rose-500/20 bg-rose-500/5'
? 'border-warning/20 bg-warning/5'
: 'border-danger/20 bg-rose-500/5'
}`}
>
{currentPushStatus === 'sent' && (
<>
<CheckCircle2 size={16} className="text-emerald-400 shrink-0" />
<span className="text-sm text-emerald-400">
<CheckCircle2 size={16} className="text-success shrink-0" />
<span className="text-sm text-success">
Documentation pushed to ticket {ticketId ? `#${ticketId}` : ''}
</span>
</>
)}
{currentPushStatus === 'pending_retry' && (
<>
<Loader2 size={16} className="text-amber-400 shrink-0 animate-spin" />
<span className="text-sm text-amber-400">
<Loader2 size={16} className="text-warning shrink-0 animate-spin" />
<span className="text-sm text-warning">
Documentation queued for push — will sync shortly
</span>
</>
)}
{currentPushStatus === 'failed' && (
<>
<AlertTriangle size={16} className="text-rose-500 shrink-0" />
<AlertTriangle size={16} className="text-danger shrink-0" />
<div className="flex-1">
<span className="text-sm text-rose-500">
<span className="text-sm text-danger">
Failed to push to ticket{currentPushError ? ` — ${currentPushError}` : ''}
</span>
</div>
<button
onClick={handleRetry}
disabled={retrying}
className="flex items-center gap-1.5 rounded-lg bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-500 hover:bg-rose-500/20 transition-colors disabled:opacity-50"
className="flex items-center gap-1.5 rounded-lg bg-danger-dim px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-50"
>
{retrying ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
Retry
@@ -98,9 +98,9 @@ export function SessionDocView({
{/* Member mapping warning */}
{memberMappingWarning && (
<div className="rounded-xl border border-blue-400/20 bg-blue-400/5 px-4 py-3 flex items-start gap-3">
<Info size={16} className="text-blue-400 shrink-0 mt-0.5" />
<span className="text-sm text-blue-400">
<div className="rounded-xl border border-accent/20 bg-accent/5 px-4 py-3 flex items-start gap-3">
<Info size={16} className="text-accent shrink-0 mt-0.5" />
<span className="text-sm text-accent">
Time entry was not created — {memberMappingWarning} Session timing is included in the ticket note.
</span>
</div>
@@ -137,12 +137,12 @@ export function SessionDocView({
{/* Outcome */}
{(documentation.resolution_summary || documentation.escalation_reason) && (
<div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-emerald-500' : 'border-l-amber-500'}`}>
<div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-success' : 'border-l-warning'}`}>
<div className="flex items-center gap-2 mb-1">
{documentation.resolution_summary ? (
<CheckCircle2 size={14} className="text-emerald-400" />
<CheckCircle2 size={14} className="text-success" />
) : (
<ArrowUpRight size={14} className="text-amber-400" />
<ArrowUpRight size={14} className="text-warning" />
)}
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
{documentation.resolution_summary ? 'Resolved' : 'Escalated'}
@@ -202,8 +202,8 @@ export function SessionDocView({
size={20}
className={
(currentRating ?? 0) >= star
? 'fill-amber-400 text-amber-400'
: 'text-muted-foreground hover:text-amber-400'
? 'fill-warning text-warning'
: 'text-muted-foreground hover:text-warning'
}
/>
</button>

4
frontend/src/components/flowpilot/SimilarSessions.tsx
View File

@@ -80,9 +80,9 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
className={cn(
'text-[0.5rem] font-sans text-xs uppercase',
session.status === 'resolved'
? 'text-emerald-400'
? 'text-success'
: session.status === 'escalated'
? 'text-amber-400'
? 'text-warning'
: 'text-muted-foreground'
)}
>

8
frontend/src/components/flowpilot/StatusUpdateModal.tsx
View File

@@ -168,7 +168,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
{/* Step 3: Generating */}
{step === 'generating' && (
<div className="flex flex-col items-center justify-center py-8 gap-3">
<Loader2 size={24} className="animate-spin text-blue-400" />
<Loader2 size={24} className="animate-spin text-accent" />
<p className="text-sm text-muted-foreground">
Generating {audience === 'email_draft' ? 'email draft' : audience === 'client_update' ? 'client update' : 'ticket notes'}...
</p>
@@ -180,7 +180,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
<div className="space-y-4">
{/* Meta badges */}
<div className="flex items-center gap-2 flex-wrap">
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent-dim text-accent border border-accent/20">
{AUDIENCES.find(a => a.value === result.audience)?.label}
</span>
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-[rgba(255,255,255,0.06)] text-muted-foreground border border-[rgba(255,255,255,0.08)]">
@@ -208,8 +208,8 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
className={cn(
'flex items-center gap-2 rounded-lg px-4 py-2 min-h-[44px] text-sm font-medium transition-colors',
copied
? 'bg-emerald-500/20 border border-emerald-500/30 text-emerald-400'
: 'bg-blue-500/10 border border-blue-500/20 text-blue-400 hover:bg-blue-500/20'
? 'bg-success/20 border border-success/30 text-success'
: 'bg-accent-dim border border-accent/20 text-accent hover:bg-accent/20'
)}
>
{copied ? <Check size={16} /> : <Copy size={16} />}

6
frontend/src/components/script-builder/ScriptBuilderChat.tsx
View File

@@ -57,7 +57,7 @@ export function ScriptBuilderChat({
>
{msg.role === 'assistant' && (
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(96,165,250,0.1)] flex items-center justify-center mt-0.5">
<Bot size={16} className="text-blue-400" />
<Bot size={16} className="text-accent" />
</div>
)}
@@ -99,10 +99,10 @@ export function ScriptBuilderChat({
{isLoading && (
<div className="flex gap-3 justify-start">
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(96,165,250,0.1)] flex items-center justify-center">
<Bot size={16} className="text-blue-400" />
<Bot size={16} className="text-accent" />
</div>
<div className="card-flat rounded-xl px-4 py-3 text-sm flex items-center gap-2">
<Loader2 size={14} className="animate-spin text-blue-400" />
<Loader2 size={14} className="animate-spin text-accent" />
<span className="text-muted-foreground">Generating script...</span>
</div>
</div>

6
frontend/src/components/script-builder/ScriptCodeBlock.tsx
View File

@@ -55,7 +55,7 @@ export function ScriptCodeBlock({
<div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
<span className="font-mono text-xs text-blue-400 truncate">
<span className="font-mono text-xs text-accent truncate">
{filename || 'script'}
</span>
{lineCount != null && (
@@ -110,14 +110,14 @@ export function ScriptCodeBlock({
"bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
)}
>
{copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
{copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
{copied ? 'Copied' : 'Copy'}
</button>
<button
onClick={(e) => { e.stopPropagation(); onSave() }}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
"bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
"bg-success-dim border border-success/20 text-success hover:bg-emerald-500/15"
)}
>
<BookmarkPlus size={14} />

6
frontend/src/components/script-builder/ScriptPreviewModal.tsx
View File

@@ -62,7 +62,7 @@ export function ScriptPreviewModal({
{/* Header */}
<div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
<div className="flex items-center gap-3 min-w-0">
<span className="font-mono text-sm text-blue-400 truncate">
<span className="font-mono text-sm text-accent truncate">
{filename || 'script'}
</span>
<span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">
@@ -77,14 +77,14 @@ export function ScriptPreviewModal({
"bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
)}
>
{copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
{copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
{copied ? 'Copied' : 'Copy'}
</button>
<button
onClick={onSave}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
"bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
"bg-success-dim border border-success/20 text-success hover:bg-emerald-500/15"
)}
>
<BookmarkPlus size={14} />

10
frontend/src/pages/AssistantChatPage.tsx
View File

@@ -708,13 +708,13 @@ export default function AssistantChatPage() {
</div>
)}
{upload.status === 'done' && (
<button type="button" onClick={() => handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors">
<button type="button" onClick={() => handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-danger/20 transition-colors">
<X size={8} className="text-muted-foreground" />
</button>
)}
{upload.status === 'error' && (
<div className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer" onClick={() => retryUpload(upload.id)}>
<RotateCcw size={10} className="text-rose-500" />
<div className="absolute inset-0 bg-danger/20 border-2 border-danger flex items-center justify-center cursor-pointer" onClick={() => retryUpload(upload.id)}>
<RotateCcw size={10} className="text-danger" />
</div>
)}
</div>
@@ -755,11 +755,11 @@ export default function AssistantChatPage() {
)}
{messages.length >= 2 && (
<>
<button type="button" onClick={() => setShowStatusUpdate(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-blue-400 hover:bg-blue-500/10 transition-colors disabled:opacity-40" title="Share status update">
<button type="button" onClick={() => setShowStatusUpdate(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-accent hover:bg-accent-dim transition-colors disabled:opacity-40" title="Share status update">
<FileText size={14} />
<span className="hidden sm:inline">Update</span>
</button>
<button type="button" onClick={() => setShowConclude(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors disabled:opacity-40" title="Conclude session">
<button type="button" onClick={() => setShowConclude(true)} disabled={loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-warning hover:bg-warning-dim transition-colors disabled:opacity-40" title="Conclude session">
<Flag size={14} />
<span className="hidden sm:inline">Conclude</span>
</button>

38
frontend/src/pages/FlowPilotSessionPage.tsx
View File

@@ -108,7 +108,7 @@ export default function FlowPilotSessionPage() {
return (
<div className="flex items-center justify-center min-h-[50vh]">
<div className="card-flat p-6 text-center max-w-md">
<p className="text-sm text-rose-400">{fp.error}</p>
<p className="text-sm text-danger">{fp.error}</p>
<button
onClick={() => window.location.reload()}
className="mt-3 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -160,15 +160,15 @@ export default function FlowPilotSessionPage() {
className="flex items-center gap-3 border-b px-5 py-3 shrink-0"
style={{ borderColor: 'var(--color-border-default)' }}
>
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500/10">
<Sparkles size={14} className="text-amber-400" />
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-warning-dim">
<Sparkles size={14} className="text-warning" />
</span>
<div className="flex-1 min-w-0">
<h1 className="font-heading text-sm font-semibold text-foreground truncate">
Escalation Pickup — {fp.session.problem_summary || 'FlowPilot Session'}
</h1>
</div>
<span className="font-sans text-xs rounded-md bg-amber-500/10 px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-amber-400 border border-amber-500/20">
<span className="font-sans text-xs rounded-md bg-warning-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-warning border border-warning/20">
Awaiting pickup
</span>
</div>
@@ -196,8 +196,8 @@ export default function FlowPilotSessionPage() {
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
<div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
<div className="flex items-center gap-3 mb-3">
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-500/10">
<AlertTriangle size={18} className="text-amber-400" />
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-warning-dim">
<AlertTriangle size={18} className="text-warning" />
</span>
<h2 className="text-lg font-heading font-semibold text-foreground">Active Session</h2>
</div>
@@ -207,7 +207,7 @@ export default function FlowPilotSessionPage() {
<div className="flex gap-2">
<button
onClick={() => blocker.reset()}
className="flex-1 rounded-lg bg-gradient-to-r from-blue-500 to-blue-400 px-4 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
className="flex-1 rounded-lg bg-accent px-4 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
>
Stay in Session
</button>
@@ -246,7 +246,7 @@ export default function FlowPilotSessionPage() {
<button
onClick={() => setShowResolve(true)}
disabled={!fp.canResolve || fp.isProcessing}
className="flex items-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center gap-1.5 rounded-lg bg-success-dim border border-success/20 px-3 py-1.5 text-xs font-medium text-success hover:bg-success/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<CheckCircle2 size={13} />
Resolve
@@ -254,7 +254,7 @@ export default function FlowPilotSessionPage() {
<button
onClick={() => setShowEscalate(true)}
disabled={!fp.canEscalate || fp.isProcessing}
className="flex items-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-3 py-1.5 text-xs font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center gap-1.5 rounded-lg bg-warning-dim border border-warning/20 px-3 py-1.5 text-xs font-medium text-warning hover:bg-warning/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<ArrowUpRight size={13} />
Escalate
@@ -263,7 +263,7 @@ export default function FlowPilotSessionPage() {
<button
onClick={() => setShowStatusUpdate(true)}
disabled={fp.isProcessing}
className="flex items-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center gap-1.5 rounded-lg bg-accent-dim border border-accent/20 px-3 py-1.5 text-xs font-medium text-accent hover:bg-accent/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
title="Share Update"
>
<FileText size={13} />
@@ -291,7 +291,7 @@ export default function FlowPilotSessionPage() {
</button>
<button
onClick={() => { setShowOverflow(false); setShowAbandon(true) }}
className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-danger hover:bg-danger-dim transition-colors"
>
<X size={13} />
Close Session
@@ -317,7 +317,7 @@ export default function FlowPilotSessionPage() {
<button
onClick={() => { setShowOverflow(false); setShowResolve(true) }}
disabled={!fp.canResolve}
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-emerald-400 hover:bg-emerald-500/10 transition-colors disabled:opacity-40"
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-success hover:bg-success-dim transition-colors disabled:opacity-40"
>
<CheckCircle2 size={14} />
Resolve
@@ -325,7 +325,7 @@ export default function FlowPilotSessionPage() {
<button
onClick={() => { setShowOverflow(false); setShowEscalate(true) }}
disabled={!fp.canEscalate}
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-amber-400 hover:bg-amber-500/10 transition-colors disabled:opacity-40"
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-warning hover:bg-warning-dim transition-colors disabled:opacity-40"
>
<ArrowUpRight size={14} />
Escalate
@@ -333,7 +333,7 @@ export default function FlowPilotSessionPage() {
{fp.allSteps.length >= 2 && (
<button
onClick={() => { setShowOverflow(false); setShowStatusUpdate(true) }}
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-blue-400 hover:bg-blue-500/10 transition-colors"
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-accent hover:bg-accent-dim transition-colors"
>
<FileText size={14} />
Share Update
@@ -349,7 +349,7 @@ export default function FlowPilotSessionPage() {
</button>
<button
onClick={() => { setShowOverflow(false); setShowAbandon(true) }}
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
className="flex w-full items-center gap-2 px-3 py-2.5 text-xs text-muted-foreground hover:text-danger hover:bg-danger-dim transition-colors"
>
<X size={14} />
Close Session
@@ -364,8 +364,8 @@ export default function FlowPilotSessionPage() {
{/* Status badge — non-active states */}
{fp.session.status !== 'active' && (
<span className={`flex items-center gap-1.5 text-[0.625rem] uppercase tracking-wider font-sans ${
fp.session.status === 'resolved' ? 'text-emerald-400' :
fp.session.status === 'escalated' ? 'text-amber-400' :
fp.session.status === 'resolved' ? 'text-success' :
fp.session.status === 'escalated' ? 'text-warning' :
fp.session.status === 'paused' ? 'text-muted-foreground' :
'text-muted-foreground'
}`}>
@@ -437,7 +437,7 @@ export default function FlowPilotSessionPage() {
}
}}
disabled={resolutionSummary.length < 5 || submitting}
className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
className="rounded-lg bg-success/20 border border-success/30 px-4 py-2 min-h-[44px] text-sm font-medium text-success hover:bg-success/30 disabled:opacity-50 transition-colors"
>
{submitting ? 'Resolving...' : 'Resolve Session'}
</button>
@@ -473,7 +473,7 @@ export default function FlowPilotSessionPage() {
}
}}
disabled={submitting}
className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
className="rounded-lg bg-danger/20 border border-danger/30 px-4 py-2 min-h-[44px] text-sm font-medium text-danger hover:bg-danger/30 disabled:opacity-50 transition-colors"
>
{submitting ? 'Closing...' : 'Close Session'}
</button>