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

74
frontend/src/components/script-editor/ScriptTemplateEditor.tsx
View File

@@ -291,7 +291,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
if (isLoading) {
return (
<div className="flex items-center justify-center py-20">
<Loader2 size={28} className="text-primary animate-spin" />
<Loader2 size={28} className="text-[#22d3ee] animate-spin" />
</div>
)
}
@@ -302,22 +302,22 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<button
type="button"
onClick={handleBack}
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors w-fit"
className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors w-fit"
>
<ArrowLeft size={12} />
Back to templates
</button>
<h1 className="text-2xl font-heading font-bold text-foreground">
<h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">
{templateId ? 'Edit Template' : 'New Template'}
</h1>
{/* ── Metadata ──────────────────────────────────────────────── */}
<section className="glass-card-static p-5 space-y-4">
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Metadata</p>
<section className="card-flat p-5 space-y-4">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Metadata</p>
<div>
<label className="text-sm font-medium text-foreground mb-1 block">
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
Name <span className="text-red-400">*</span>
</label>
<Input
@@ -329,7 +329,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Description</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Description</label>
<Textarea
value={form.description}
onChange={e => updateField('description', e.target.value)}
@@ -338,7 +338,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
/>
</div>
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Use Case</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Use Case</label>
<Textarea
value={form.use_case}
onChange={e => updateField('use_case', e.target.value)}
@@ -350,13 +350,13 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<div className="grid grid-cols-3 gap-4">
<div>
<label className="text-sm font-medium text-foreground mb-1 block">
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
Category <span className="text-red-400">*</span>
</label>
<select
value={form.category_id}
onChange={e => updateField('category_id', e.target.value)}
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
>
<option value="">Select category…</option>
{categories.map(c => (
@@ -365,11 +365,11 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
</select>
</div>
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Complexity</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Complexity</label>
<select
value={form.complexity}
onChange={e => updateField('complexity', e.target.value as FormState['complexity'])}
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
@@ -377,7 +377,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
</select>
</div>
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Estimated Runtime</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Estimated Runtime</label>
<Input
value={form.estimated_runtime}
onChange={e => updateField('estimated_runtime', e.target.value)}
@@ -388,7 +388,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Tags (comma-separated)</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Tags (comma-separated)</label>
<Input
value={form.tags}
onChange={e => updateField('tags', e.target.value)}
@@ -396,7 +396,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
/>
</div>
<div>
<label className="text-sm font-medium text-foreground mb-1 block">Required Modules (comma-separated)</label>
<label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Required Modules (comma-separated)</label>
<Input
value={form.requires_modules}
onChange={e => updateField('requires_modules', e.target.value)}
@@ -406,41 +406,41 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
</div>
<div className="flex items-center gap-6">
<label className="flex items-center gap-2 text-sm text-foreground">
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<input
type="checkbox"
checked={form.requires_elevation}
onChange={e => updateField('requires_elevation', e.target.checked)}
className="rounded border-border"
className="rounded border-[#1e2130]"
/>
Requires elevation (Run as Administrator)
</label>
{/* Share toggle — only for owners/admins editing an existing template */}
{templateId && template && canShareScriptTemplate && (
<label className="flex items-center gap-2 text-sm text-foreground">
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<input
type="checkbox"
checked={template.team_id !== null}
onChange={e => handleShare(e.target.checked)}
className="rounded border-border"
className="rounded border-[#1e2130]"
/>
Share with team
<span className="text-xs text-muted-foreground">(visible to all team members)</span>
<span className="text-xs text-[#848b9b]">(visible to all team members)</span>
</label>
)}
</div>
</section>
{/* ── Script Body ───────────────────────────────────────────── */}
<section className="glass-card-static p-5 space-y-3">
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<section className="card-flat p-5 space-y-3">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Script Body <span className="text-red-400">*</span>
</p>
<p className="text-xs text-muted-foreground">
Use <code className="font-label text-amber-400">{'{{param_key}}'}</code> for parameter placeholders.
Supports <code className="font-label text-amber-400">{'{% if param %} ... {% endif %}'}</code> conditionals
and filters like <code className="font-label text-amber-400">{'{{ param | as_secure_string }}'}</code>.
<p className="text-xs text-[#848b9b]">
Use <code className="font-sans text-xs text-amber-400">{'{{param_key}}'}</code> for parameter placeholders.
Supports <code className="font-sans text-xs text-amber-400">{'{% if param %} ... {% endif %}'}</code> conditionals
and filters like <code className="font-sans text-xs text-amber-400">{'{{ param | as_secure_string }}'}</code>.
</p>
<ScriptBodyEditor
value={form.script_body}
@@ -452,7 +452,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<button
type="button"
onClick={handleDetectParameters}
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-[10px] transition-all"
className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-lg transition-all"
>
<Scan size={14} />
Detect Parameters
@@ -460,7 +460,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
)}
{detectionSummary && (
<p className="text-xs text-muted-foreground italic">{detectionSummary}</p>
<p className="text-xs text-[#848b9b] italic">{detectionSummary}</p>
)}
{showStepper && detectedCandidates.length > 0 && (
@@ -475,10 +475,10 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
</section>
{/* ── Parameters Schema ─────────────────────────────────────── */}
<section className="glass-card-static p-5 space-y-3">
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Parameters</p>
<p className="text-xs text-muted-foreground">
Define form fields that users fill in when generating a script. Each parameter maps to a <code className="font-label text-amber-400">{'{{key}}'}</code> placeholder in the script body.
<section className="card-flat p-5 space-y-3">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Parameters</p>
<p className="text-xs text-[#848b9b]">
Define form fields that users fill in when generating a script. Each parameter maps to a <code className="font-sans text-xs text-amber-400">{'{{key}}'}</code> placeholder in the script body.
</p>
<ParameterSchemaBuilder
schema={form.parameters_schema}
@@ -487,14 +487,14 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
</section>
{/* ── Fixed Action Bar ──────────────────────────────────────── */}
<div className="fixed bottom-0 left-0 right-0 z-20 border-t border-border bg-background/80 backdrop-blur-sm px-6 py-3">
<div className="fixed bottom-0 left-0 right-0 z-20 border-t border-[#1e2130] bg-[#0c0d10]/80 px-6 py-3">
<div className="max-w-5xl mx-auto flex items-center justify-between">
<div className="flex items-center gap-3">
<button
type="button"
onClick={handleSave}
disabled={isSaving}
className="flex items-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-5 py-2 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-5 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
{templateId ? 'Save Changes' : 'Create Template'}
@@ -502,7 +502,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<button
type="button"
onClick={handleBack}
className="text-sm text-muted-foreground hover:text-foreground transition-colors px-4 py-2"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-4 py-2"
>
Cancel
</button>
@@ -515,14 +515,14 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
<button
type="button"
onClick={handleDelete}
className="text-xs font-label text-rose-500 hover:text-rose-400 px-2 py-1"
className="text-xs font-sans text-xs text-rose-500 hover:text-rose-400 px-2 py-1"
>
Confirm
</button>
<button
type="button"
onClick={() => setDeleteConfirm(false)}
className="text-xs font-label text-muted-foreground hover:text-foreground px-2 py-1"
className="text-xs font-sans text-xs text-[#848b9b] hover:text-[#e2e5eb] px-2 py-1"
>
Cancel
</button>