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

design: overhaul Edit Procedure page layout and color system

Browse Source 
- Move procedure name into inline-editable toolbar input; replace static h1
- Toolbar now uses bg-sidebar for proper depth hierarchy vs bg-card config zone
- Config zone (Details/Intake/Schedule accordions) gets explicit bg-card + border-b
  creating clear visual separation from the step canvas below
- Step canvas switches to bg-page background for distinct work surface
- Replace all hover:bg-accent (orange) with hover:bg-elevated or hover:bg-white/[0.08]
  throughout toolbar, accordion headers, step cards, and editor buttons
- Fix step number badges: bg-accent (orange) → bg-white/[0.10] in StepList + StepEditor
- Fix procedure_end step background: bg-accent/50 → bg-elevated/40
- CollapsibleEditorSection: hover:bg-accent/50 → hover:bg-white/[0.05]
- Input fields in StepEditor: bg-card → bg-elevated for depth inside card surfaces
- Move Content Type selector out of "More Options" into main step editor body
- Rename "More Options" → "Advanced Options" for clarity
- Replace Shield icon with ListOrdered for Steps section heading (semantic fix)
- Bottom Add Step button: better contrast with border-white/20 + hover:bg-elevated/30
- Remove Name field from Details accordion (now lives in toolbar)
- Update Details accordion summary: shows tags, visibility, description preview
- Dirty indicator: "Unsaved changes" text → compact amber dot with tooltip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-01 06:52:50 +00:00
parent 0b77eec1ca
commit 119d17819b
4 changed files with 100 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
View File

@@ -41,7 +41,7 @@ export function CollapsibleEditorSection({
onClick={handleToggle} onClick={handleToggle}
aria-expanded={isExpanded} aria-expanded={isExpanded}
aria-controls={sectionId} aria-controls={sectionId}
className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-accent/50" className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-white/[0.05]"
> >
<ChevronRight <ChevronRight
className={cn( className={cn(

74
frontend/src/components/procedural-editor/StepEditor.tsx
View File

@@ -30,7 +30,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
<span className="text-sm font-medium text-muted-foreground">Edit Section Header</span> <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
<button <button
onClick={onCollapse} onClick={onCollapse}
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground" className="rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
> >
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
</button> </button>
@@ -42,7 +42,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.title} value={step.title}
onChange={(e) => onUpdate({ title: e.target.value })} onChange={(e) => onUpdate({ title: e.target.value })}
placeholder="Section title" placeholder="Section title"
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
</div> </div>
@@ -54,14 +54,14 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
{/* Header */} {/* Header */}
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground"> <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.10] text-xs font-medium text-foreground">
{stepNumber} {stepNumber}
</span> </span>
<span className="text-sm font-medium text-foreground">Edit Step</span> <span className="text-sm font-medium text-foreground">Edit Step</span>
</div> </div>
<button <button
onClick={onCollapse} onClick={onCollapse}
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground" className="rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
> >
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
</button> </button>
@@ -75,7 +75,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
type="text" type="text"
value={step.title} value={step.title}
onChange={(e) => onUpdate({ title: e.target.value })} onChange={(e) => onUpdate({ title: e.target.value })}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
@@ -91,7 +91,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })} onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
placeholder="—" placeholder="—"
min={1} min={1}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
@@ -103,7 +103,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ description: e.target.value })} onChange={(e) => onUpdate({ description: e.target.value })}
placeholder="Step instructions. Use [VAR:name] for variables." placeholder="Step instructions. Use [VAR:name] for variables."
rows={4} rows={4}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
{availableVariables.length > 0 && ( {availableVariables.length > 0 && (
<div className="mt-1 flex flex-wrap gap-1"> <div className="mt-1 flex flex-wrap gap-1">
@@ -132,44 +132,44 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ commands: e.target.value || undefined })} onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools" placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
rows={3} rows={3}
className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
{/* More Options toggle */} {/* Content Type */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Type</label>
<div className="flex gap-1">
{CONTENT_TYPE_OPTIONS.map((opt) => (
<button
key={opt.value}
onClick={() => onUpdate({ content_type: opt.value })}
className={cn(
'rounded px-2 py-1 text-xs font-medium transition-colors',
step.content_type === opt.value
? 'bg-white/15 ' + opt.color
: 'text-muted-foreground hover:bg-elevated hover:text-foreground'
)}
>
{opt.label}
</button>
))}
</div>
</div>
{/* Advanced Options toggle */}
<button <button
type="button" type="button"
onClick={() => setShowMore(!showMore)} onClick={() => setShowMore(!showMore)}
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground" className="flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
> >
<Settings2 className="h-3 w-3" /> <Settings2 className="h-3 w-3" />
More Options Advanced Options
{showMore ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />} {showMore ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
</button> </button>
{showMore && ( {showMore && (
<div className="space-y-4 border-t border-border pt-4"> <div className="space-y-4 border-t border-border pt-4">
{/* Content Type */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
<div className="flex gap-1">
{CONTENT_TYPE_OPTIONS.map((opt) => (
<button
key={opt.value}
onClick={() => onUpdate({ content_type: opt.value })}
className={cn(
'rounded px-2 py-1 text-xs font-medium transition-colors',
step.content_type === opt.value
? 'bg-white/15 ' + opt.color
: 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
)}
>
{opt.label}
</button>
))}
</div>
</div>
{/* Warning text */} {/* Warning text */}
{(step.content_type === 'warning' || step.warning_text) && ( {(step.content_type === 'warning' || step.warning_text) && (
<div> <div>
@@ -195,7 +195,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.expected_outcome || ''} value={step.expected_outcome || ''}
onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })} onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
placeholder="Server should respond with..." placeholder="Server should respond with..."
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
@@ -211,7 +211,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.verification_prompt || ''} value={step.verification_prompt || ''}
onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })} onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
placeholder="Confirm the role was installed" placeholder="Confirm the role was installed"
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
<div> <div>
@@ -219,7 +219,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
<select <select
value={step.verification_type || ''} value={step.verification_type || ''}
onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })} onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
> >
<option value="">None</option> <option value="">None</option>
<option value="checkbox">Checkbox (confirm done)</option> <option value="checkbox">Checkbox (confirm done)</option>
@@ -240,7 +240,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.reference_url || ''} value={step.reference_url || ''}
onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })} onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
placeholder="https://learn.microsoft.com/..." placeholder="https://learn.microsoft.com/..."
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
<div className="flex items-end pb-1"> <div className="flex items-end pb-1">
@@ -267,7 +267,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ onChange={(e) => onUpdate({
library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public' library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
})} })}
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20" className="w-full rounded-lg border border-border bg-elevated px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
> >
<option value="">Inherit from flow</option> <option value="">Inherit from flow</option>
<option value="team">Team only</option> <option value="team">Team only</option>

18
frontend/src/components/procedural-editor/StepList.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useEffect, useCallback, type ReactNode } from 'react' import { useRef, useEffect, useCallback, type ReactNode } from 'react'
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield, SeparatorHorizontal } from 'lucide-react' import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, ListOrdered, SeparatorHorizontal } from 'lucide-react'
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core' import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import type { DragEndEvent } from '@dnd-kit/core' import type { DragEndEvent } from '@dnd-kit/core'
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable' import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
@@ -104,7 +104,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div> <div>
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-muted-foreground" /> <ListOrdered className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Steps</h2> <h2 className="text-lg font-semibold text-foreground">Steps</h2>
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''} ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => addSectionHeader()} onClick={() => addSectionHeader()}
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground" className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
> >
<SeparatorHorizontal className="h-3.5 w-3.5" /> <SeparatorHorizontal className="h-3.5 w-3.5" />
Add Section Add Section
</button> </button>
<button <button
onClick={() => addStep()} onClick={() => addStep()}
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground" className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
> >
<Plus className="h-3.5 w-3.5" /> <Plus className="h-3.5 w-3.5" />
Add Step Add Step
@@ -138,7 +138,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
return ( return (
<div <div
key={step.id} key={step.id}
className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2" className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-elevated/40 px-3 py-2"
> >
<CheckCircle2 className="h-4 w-4 text-emerald-400/50" /> <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
<input <input
@@ -238,7 +238,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<div <div
className={cn( className={cn(
'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors', 'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
'hover:border-primary/30 hover:bg-accent/50', 'hover:border-white/[0.15] hover:bg-elevated',
isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60' isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
)} )}
data-step-id={step.id} data-step-id={step.id}
@@ -254,7 +254,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<GripVertical className="h-4 w-4" /> <GripVertical className="h-4 w-4" />
</button> </button>
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground"> <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/[0.10] text-xs font-medium text-muted-foreground">
{stepNumber} {stepNumber}
</span> </span>
@@ -277,7 +277,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
<button <button
onClick={() => setExpandedStepId(step.id)} onClick={() => setExpandedStepId(step.id)}
className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground" className="shrink-0 rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
> >
<ChevronDown className="h-3.5 w-3.5" /> <ChevronDown className="h-3.5 w-3.5" />
</button> </button>
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
{/* Add step button at bottom */} {/* Add step button at bottom */}
<button <button
onClick={() => addStep()} onClick={() => addStep()}
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground" className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/20 py-2 text-sm text-muted-foreground transition-colors hover:border-primary/40 hover:bg-elevated/30 hover:text-foreground"
> >
<Plus className="h-3.5 w-3.5" /> <Plus className="h-3.5 w-3.5" />
Add Step Add Step

110
frontend/src/pages/ProceduralEditorPage.tsx
View File

@@ -241,9 +241,9 @@ export function ProceduralEditorPage() {
// Summary strings for collapsed sections // Summary strings for collapsed sections
const detailsSummary = [ const detailsSummary = [
name ? `"${name}"` : '"Untitled"',
tags.length > 0 ? `${tags.length} tag${tags.length !== 1 ? 's' : ''}` : 'No tags', tags.length > 0 ? `${tags.length} tag${tags.length !== 1 ? 's' : ''}` : 'No tags',
isPublic ? 'Public' : 'Private', isPublic ? 'Public' : 'Private',
description ? `${description.slice(0, 40)}${description.length > 40 ? '\u2026' : ''}` : 'No description',
].join(' \u00b7 ') ].join(' \u00b7 ')
const scheduleSummary = getScheduleSummary(schedule, scheduleTargetList) const scheduleSummary = getScheduleSummary(schedule, scheduleTargetList)
@@ -265,37 +265,42 @@ export function ProceduralEditorPage() {
{/* Main content column */} {/* Main content column */}
<div className="flex min-w-0 flex-1 flex-col overflow-hidden"> <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
{/* Toolbar — sticky */} {/* Toolbar — sticky */}
<div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2"> <div className="flex shrink-0 items-center gap-3 border-b border-border bg-sidebar px-4 py-2.5">
<div className="flex items-center gap-3"> <button
<button onClick={() => navigate('/trees')}
onClick={() => navigate('/trees')} className="shrink-0 rounded p-1.5 text-muted-foreground transition-colors hover:bg-white/[0.08] hover:text-foreground"
className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground" >
> <ArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-5 w-5" /> </button>
</button>
<div className="flex items-center gap-2"> <div className="flex min-w-0 flex-1 items-center gap-2">
{isMaintenance {isMaintenance
? <Wrench className="h-5 w-5 text-amber-400" /> ? <Wrench className="h-4 w-4 shrink-0 text-amber-400" />
: <ListOrdered className="h-5 w-5 text-muted-foreground" />} : <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />}
<h1 className="text-lg font-bold text-foreground"> <input
{isEditMode ? `Edit ${flowLabel}` : `New ${flowLabel}`} type="text"
{name && <span className="ml-2 font-normal text-muted-foreground">— {name}</span>} value={name}
</h1> onChange={(e) => setName(e.target.value)}
</div> placeholder={`Untitled ${flowLabel}`}
className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-heading placeholder:text-muted-foreground focus:outline-none"
/>
{isDirty && (
<span
title="Unsaved changes"
className="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400"
/>
)}
</div> </div>
<div className="flex items-center gap-2"> <div className="flex shrink-0 items-center gap-2">
{isDirty && (
<span className="text-xs text-muted-foreground">Unsaved changes</span>
)}
<button <button
onClick={() => editorAI.isOpen ? editorAI.closePanel() : editorAI.openPanel()} onClick={() => editorAI.isOpen ? editorAI.closePanel() : editorAI.openPanel()}
title="Toggle AI Assist panel" title="Toggle AI Assist panel"
className={cn( className={cn(
'flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors', 'flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
editorAI.isOpen editorAI.isOpen
? 'bg-accent-dim text-primary border-primary/30' ? 'border-primary/30 bg-accent-dim text-primary'
: 'text-muted-foreground hover:bg-accent hover:text-foreground' : 'text-muted-foreground hover:bg-white/[0.08] hover:text-foreground'
)} )}
> >
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />
@@ -318,8 +323,8 @@ export function ProceduralEditorPage() {
</div> </div>
</div> </div>
{/* Collapsible sections */} {/* Config zone */}
<div className="shrink-0"> <div className="shrink-0 border-b border-border bg-card">
<CollapsibleEditorSection <CollapsibleEditorSection
title="Details" title="Details"
icon={<Settings className="h-4 w-4" />} icon={<Settings className="h-4 w-4" />}
@@ -328,17 +333,6 @@ export function ProceduralEditorPage() {
onToggle={() => toggleSection('details')} onToggle={() => toggleSection('details')}
> >
<div className="space-y-4"> <div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Domain Controller Build"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label> <label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
<textarea <textarea
@@ -397,25 +391,27 @@ export function ProceduralEditorPage() {
)} )}
</div> </div>
{/* Step List */} {/* Step canvas */}
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4"> <div className="min-h-0 flex-1 overflow-y-auto bg-page">
{validationErrors.length > 0 && ( <div className="px-5 py-5">
<div className="px-4 py-3"> {validationErrors.length > 0 && (
<ValidationSummary <div className="mb-4">
errors={validationErrors.map((e): ValidationError => ({ <ValidationSummary
nodeId: e.stepId, errors={validationErrors.map((e): ValidationError => ({
field: e.field, nodeId: e.stepId,
message: e.message, field: e.field,
severity: e.severity, message: e.message,
}))} severity: e.severity,
onSelectNode={handleSelectStep} }))}
onFixWithAI={handleFixWithAI} onSelectNode={handleSelectStep}
isFixing={isFixing} onFixWithAI={handleFixWithAI}
itemLabel="step" isFixing={isFixing}
/> itemLabel="step"
</div> />
)} </div>
<StepList onStepContextMenu={editorAI.openContextMenu} /> )}
<StepList onStepContextMenu={editorAI.openContextMenu} />
</div>
</div> </div>
{editorAI.contextMenu && ( {editorAI.contextMenu && (