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

48
frontend/src/components/procedural/PrepareSessionModal.tsx
View File

@@ -89,17 +89,17 @@ export function PrepareSessionModal({
return (
<div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
<div className="absolute inset-0 bg-background/60 backdrop-blur-xs" onClick={onClose} />
<div className="relative w-full max-w-full rounded-t-2xl border border-border bg-card shadow-2xl sm:max-w-lg sm:rounded-2xl">
<div className="absolute inset-0 bg-[#0c0d10]/60" onClick={onClose} />
<div className="relative w-full max-w-full rounded-t-2xl border border-[#1e2130] bg-[#14161d] shadow-2xl sm:max-w-lg sm:rounded-2xl">
{/* Header */}
<div className="flex items-center justify-between border-b border-border px-5 py-4">
<div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
<div className="flex items-center gap-2">
<FileText className="h-4 w-4 text-cyan-400" />
<h3 className="text-sm font-semibold text-foreground">Prepare Session</h3>
<h3 className="text-sm font-semibold text-[#e2e5eb]">Prepare Session</h3>
</div>
<button
onClick={onClose}
className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-lg p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<X className="h-4 w-4" />
</button>
@@ -109,30 +109,30 @@ export function PrepareSessionModal({
<div className="max-h-[70vh] overflow-y-auto p-4 space-y-5 sm:max-h-[60vh] sm:p-5">
{/* Flow name */}
<div className="rounded-lg bg-accent px-3 py-2">
<p className="text-xs text-muted-foreground">Flow</p>
<p className="text-sm font-medium text-foreground">{treeName}</p>
<p className="text-xs text-[#848b9b]">Flow</p>
<p className="text-sm font-medium text-[#e2e5eb]">{treeName}</p>
</div>
{/* Context fields */}
<div className="space-y-3">
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Ticket Number</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Ticket Number</label>
<input
type="text"
value={ticketNumber}
onChange={(e) => setTicketNumber(e.target.value)}
placeholder="e.g. TKT-12345"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 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-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 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>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Client Name</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Client Name</label>
<input
type="text"
value={clientName}
onChange={(e) => setClientName(e.target.value)}
placeholder="e.g. Acme Corp"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 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-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 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>
@@ -140,14 +140,14 @@ export function PrepareSessionModal({
{/* Assignee */}
{teamMembers.length > 0 && (
<div>
<label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
<label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-[#848b9b]">
<UserPlus className="h-3.5 w-3.5" />
Assign to Engineer
</label>
<select
value={assignedToId}
onChange={(e) => setAssignedToId(e.target.value)}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">Unassigned (visible to all)</option>
{teamMembers.map(m => (
@@ -160,17 +160,17 @@ export function PrepareSessionModal({
{/* Intake form fields */}
{intakeFields.length > 0 && (
<div className="space-y-4">
<h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Variables (optional — can be filled later)
</h4>
{Array.from(grouped.entries()).map(([groupName, fields]) => (
<div key={groupName} className="space-y-3">
{grouped.size > 1 && (
<p className="text-xs font-medium text-muted-foreground">{groupName}</p>
<p className="text-xs font-medium text-[#848b9b]">{groupName}</p>
)}
{fields.map(field => (
<div key={field.variable_name}>
<label className="mb-1 block text-xs font-medium text-muted-foreground">
<label className="mb-1 block text-xs font-medium text-[#848b9b]">
{field.label}
{field.required && <span className="ml-1 text-amber-400">*</span>}
</label>
@@ -178,7 +178,7 @@ export function PrepareSessionModal({
<select
value={values[field.variable_name] || ''}
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">{field.placeholder || 'Select...'}</option>
{field.options.map(opt => (
@@ -191,7 +191,7 @@ export function PrepareSessionModal({
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
placeholder={field.placeholder}
rows={3}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 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-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 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"
/>
) : (
<input
@@ -199,11 +199,11 @@ export function PrepareSessionModal({
value={values[field.variable_name] || ''}
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
placeholder={field.placeholder}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 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-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 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"
/>
)}
{field.help_text && (
<p className="mt-1 text-[0.625rem] text-muted-foreground">{field.help_text}</p>
<p className="mt-1 text-[0.625rem] text-[#848b9b]">{field.help_text}</p>
)}
</div>
))}
@@ -214,10 +214,10 @@ export function PrepareSessionModal({
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-3 border-t border-border px-5 py-4">
<div className="flex items-center justify-end gap-3 border-t border-[#1e2130] px-5 py-4">
<button
onClick={onClose}
className="rounded-[10px] px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
className="rounded-lg px-4 py-2 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
>
Cancel
</button>
@@ -225,8 +225,8 @@ export function PrepareSessionModal({
onClick={handleSubmit}
disabled={isSubmitting}
className={cn(
'rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114]',
'shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
'rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
'hover:brightness-110 active:scale-[0.98]',
'disabled:opacity-40'
)}
>