orbital-command 0.1.0

package/src/components/workflow/DispatchConfigPanel.tsx

@@ -0,0 +1,180 @@
+import { Terminal, User, ServerOff, Zap, ClipboardCheck } from 'lucide-react';
+import type { ConfirmLevel } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface DispatchConfigPanelProps {
+  dispatchOnly: boolean;
+  humanOnly: boolean;
+  skipServerTransition: boolean;
+  confirmLevel: ConfirmLevel;
+  hasCommand: boolean;
+  onDispatchOnlyChange: (v: boolean) => void;
+  onHumanOnlyChange: (v: boolean) => void;
+  onSkipServerTransitionChange: (v: boolean) => void;
+  onConfirmLevelChange: (v: ConfirmLevel) => void;
+}
+
+// ─── Component ──────────────────────────────────────────
+
+export function DispatchConfigPanel({
+  dispatchOnly,
+  humanOnly,
+  skipServerTransition,
+  confirmLevel,
+  hasCommand,
+  onDispatchOnlyChange,
+  onHumanOnlyChange,
+  onSkipServerTransitionChange,
+  onConfirmLevelChange,
+}: DispatchConfigPanelProps) {
+  return (
+    <div className="space-y-3">
+      {/* Dispatch toggles */}
+      <div className="space-y-2">
+        <DispatchToggle
+          icon={Terminal}
+          label="Dispatch Only"
+          description="This transition can only be triggered by a skill command, not by manual drag-and-drop"
+          checked={dispatchOnly}
+          onChange={onDispatchOnlyChange}
+        />
+        {dispatchOnly && !hasCommand && (
+          <p className="ml-6 text-[9px] text-amber-400">
+            No command configured — add one below for this toggle to be effective
+          </p>
+        )}
+
+        <DispatchToggle
+          icon={User}
+          label="Human Only"
+          description="This transition requires human confirmation and cannot be triggered by automated processes"
+          checked={humanOnly}
+          onChange={onHumanOnlyChange}
+          badge={humanOnly ? 'HUMAN' : undefined}
+          badgeColor="#6366f1"
+        />
+
+        <DispatchToggle
+          icon={ServerOff}
+          label="Skip Server Transition"
+          description="The skill command handles the status change itself — the server won't move the scope"
+          checked={skipServerTransition}
+          onChange={onSkipServerTransitionChange}
+        />
+        {skipServerTransition && (
+          <p className="ml-6 text-[9px] text-amber-400">
+            The bound skill must handle the scope move itself
+          </p>
+        )}
+      </div>
+
+      {/* Confirm Level */}
+      <div>
+        <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+          Confirmation Mode
+        </label>
+        <div className="grid grid-cols-2 gap-1.5">
+          <ConfirmLevelCard
+            icon={Zap}
+            label="Quick"
+            description="Immediate — one click to confirm"
+            active={confirmLevel === 'quick'}
+            onClick={() => onConfirmLevelChange('quick')}
+            color="#f59e0b"
+          />
+          <ConfirmLevelCard
+            icon={ClipboardCheck}
+            label="Full"
+            description="Review — must acknowledge checklist"
+            active={confirmLevel === 'full'}
+            onClick={() => onConfirmLevelChange('full')}
+            color="#8b5cf6"
+          />
+        </div>
+        {confirmLevel === 'full' && (
+          <p className="mt-1.5 text-[9px] text-violet-400">
+            Users must review the checklist before confirming this transition
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function DispatchToggle({ icon: Icon, label, description, checked, onChange, badge, badgeColor }: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  description: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  badge?: string;
+  badgeColor?: string;
+}) {
+  return (
+    <label className="flex cursor-pointer gap-2 rounded-md border border-zinc-800 bg-zinc-950/30 px-2.5 py-2 transition-colors hover:border-zinc-700">
+      <div
+        className="relative mt-0.5 h-4 w-7 shrink-0 rounded-full transition-colors"
+        style={{ backgroundColor: checked ? '#22c55e' : '#3f3f46' }}
+      >
+        <div
+          className="absolute top-0.5 h-3 w-3 rounded-full bg-white transition-transform"
+          style={{ transform: checked ? 'translateX(12px)' : 'translateX(2px)' }}
+        />
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+          className="sr-only"
+        />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <Icon className="h-3 w-3 text-zinc-400" />
+          <span className="text-[11px] font-medium text-zinc-300">{label}</span>
+          {badge && (
+            <span
+              className="rounded px-1 py-0.5 text-[8px] font-bold"
+              style={{ backgroundColor: `${badgeColor}20`, color: badgeColor }}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+        <p className="mt-0.5 text-[9px] text-zinc-600 leading-relaxed">{description}</p>
+      </div>
+    </label>
+  );
+}
+
+function ConfirmLevelCard({ icon: Icon, label, description, active, onClick, color }: {
+  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+  label: string;
+  description: string;
+  active: boolean;
+  onClick: () => void;
+  color: string;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="rounded-md px-2.5 py-2 text-left transition-all"
+      style={{
+        backgroundColor: active ? `${color}12` : 'transparent',
+        border: `1px solid ${active ? `${color}60` : '#27272a'}`,
+      }}
+    >
+      <div className="flex items-center gap-1.5">
+        <Icon className="h-3.5 w-3.5" style={{ color: active ? color : '#52525b' }} />
+        <span className="text-[10px] font-semibold" style={{ color: active ? color : '#a1a1aa' }}>
+          {label}
+        </span>
+      </div>
+      <p className="mt-0.5 text-[8px]" style={{ color: active ? '#a1a1aa' : '#52525b' }}>
+        {description}
+      </p>
+    </button>
+  );
+}

package/src/components/workflow/EdgeDetailPanel.tsx

@@ -0,0 +1,236 @@
+import { useMemo } from 'react';
+import { X, ArrowRight, CheckCircle2, Terminal, Shield, Radio, Globe, ShieldCheck, AlertTriangle, Cog, Eye } from 'lucide-react';
+import type { WorkflowEdge, WorkflowHook, HookCategory, HookEnforcement } from '../../../shared/workflow-config';
+import { getHookEnforcement } from '../../../shared/workflow-config';
+
+interface EdgeDetailPanelProps {
+  edge: WorkflowEdge | null;
+  hooks: WorkflowHook[];
+  onClose: () => void;
+  onHookClick?: (hook: WorkflowHook) => void;
+}
+
+const DIRECTION_COLORS: Record<string, string> = {
+  forward: '#22c55e',
+  backward: '#f59e0b',
+  shortcut: '#6366f1',
+};
+
+const CATEGORY_CONFIG: Record<HookCategory, { icon: typeof Shield; color: string; label: string }> = {
+  guard: { icon: ShieldCheck, color: '#ef4444', label: 'Guards' },
+  gate: { icon: AlertTriangle, color: '#f59e0b', label: 'Gates' },
+  lifecycle: { icon: Cog, color: '#3b82f6', label: 'Lifecycle' },
+  observer: { icon: Eye, color: '#6b7280', label: 'Observers' },
+};
+
+const CATEGORY_ORDER: HookCategory[] = ['guard', 'gate', 'lifecycle', 'observer'];
+
+const ENFORCEMENT_COLORS: Record<HookEnforcement, string> = {
+  blocker: '#ef4444',
+  advisor: '#f59e0b',
+  operator: '#3b82f6',
+  silent: '#6b7280',
+};
+
+export function EdgeDetailPanel({ edge, hooks, onClose, onHookClick }: EdgeDetailPanelProps) {
+  if (!edge) return null;
+
+  const color = DIRECTION_COLORS[edge.direction] ?? '#22c55e';
+
+  // Group hooks by category
+  const grouped = useMemo(() => {
+    const groups = new Map<HookCategory, WorkflowHook[]>();
+    for (const hook of hooks) {
+      const existing = groups.get(hook.category);
+      if (existing) existing.push(hook);
+      else groups.set(hook.category, [hook]);
+    }
+    return groups;
+  }, [hooks]);
+
+  return (
+    <div className="flex h-full w-80 shrink-0 flex-col rounded-lg border border-zinc-800 bg-zinc-900/95 backdrop-blur">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <span className="text-zinc-300">{edge.from}</span>
+          <ArrowRight className="h-3.5 w-3.5 text-zinc-600" />
+          <span className="text-zinc-300">{edge.to}</span>
+        </div>
+        <button onClick={onClose} className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 space-y-4 overflow-y-auto p-4 text-xs">
+        {/* Label & Direction */}
+        <Section title="Transition">
+          <div className="flex items-center gap-2">
+            <span
+              className="rounded px-2 py-0.5 text-[10px] font-semibold uppercase"
+              style={{ backgroundColor: `${color}20`, color }}
+            >
+              {edge.direction}
+            </span>
+            <span className="text-zinc-300">{edge.label}</span>
+          </div>
+          <p className="mt-1.5 text-zinc-500">{edge.description}</p>
+        </Section>
+
+        {/* Command */}
+        {edge.command && (
+          <Section title="Command">
+            <div className="flex items-center gap-2 rounded border border-zinc-800 bg-zinc-950 px-3 py-2 font-mono text-emerald-400">
+              <Terminal className="h-3.5 w-3.5 shrink-0 text-zinc-600" />
+              {edge.command}
+            </div>
+          </Section>
+        )}
+
+        {/* Flags */}
+        <Section title="Behavior">
+          <div className="flex flex-wrap gap-2">
+            <Flag label="Confirm" value={edge.confirmLevel} />
+            {edge.dispatchOnly && <Flag label="Dispatch Only" active />}
+            {edge.humanOnly && <Flag label="Human Only" active />}
+            {edge.skipServerTransition && <Flag label="Skip Server" active />}
+          </div>
+        </Section>
+
+        {/* Checklist */}
+        {edge.checklist && edge.checklist.length > 0 && (
+          <Section title={`Checklist (${edge.checklist.length})`}>
+            <div className="space-y-1.5">
+              {edge.checklist.map((item, i) => (
+                <div key={i} className="flex items-start gap-2 text-zinc-400">
+                  <CheckCircle2 className="mt-0.5 h-3 w-3 shrink-0 text-zinc-600" />
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {/* Hooks grouped by category */}
+        {hooks.length > 0 && (
+          <Section title={`Hooks (${hooks.length})`}>
+            <div className="space-y-3">
+              {CATEGORY_ORDER.map((cat) => {
+                const catHooks = grouped.get(cat);
+                if (!catHooks?.length) return null;
+                const config = CATEGORY_CONFIG[cat];
+                const CatIcon = config.icon;
+                return (
+                  <div key={cat}>
+                    <div className="mb-1.5 flex items-center gap-1.5">
+                      <CatIcon className="h-2.5 w-2.5" style={{ color: config.color }} />
+                      <span className="text-[9px] font-semibold uppercase tracking-wider" style={{ color: config.color }}>
+                        {config.label}
+                      </span>
+                    </div>
+                    {catHooks.map((h) => (
+                      <HookDetail key={h.id} hook={h} onClick={onHookClick} />
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </Section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h4 className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{title}</h4>
+      {children}
+    </div>
+  );
+}
+
+const TIMING_COLORS: Record<string, string> = {
+  before: '#eab308',
+  after: '#3b82f6',
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  shell: '#22c55e',
+  event: '#a855f7',
+  webhook: '#f97316',
+};
+
+const TYPE_ICONS: Record<string, typeof Terminal> = {
+  shell: Terminal,
+  event: Radio,
+  webhook: Globe,
+};
+
+function HookDetail({ hook, onClick }: { hook: WorkflowHook; onClick?: (hook: WorkflowHook) => void }) {
+  const timingColor = TIMING_COLORS[hook.timing] ?? '#3b82f6';
+  const typeColor = TYPE_COLORS[hook.type] ?? '#22c55e';
+  const TypeIcon = TYPE_ICONS[hook.type] ?? Terminal;
+  const enforcement = getHookEnforcement(hook);
+  const enforcementColor = ENFORCEMENT_COLORS[enforcement];
+  const catConfig = CATEGORY_CONFIG[hook.category];
+  const CatIcon = catConfig.icon;
+
+  return (
+    <button
+      onClick={() => onClick?.(hook)}
+      className="w-full rounded border bg-zinc-950/50 p-2 text-left transition-colors hover:border-zinc-600 hover:bg-zinc-900/70"
+      style={{ borderColor: hook.blocking ? '#ef444466' : '#27272a' }}
+    >
+      <div className="flex items-center gap-2">
+        <CatIcon className="h-2.5 w-2.5" style={{ color: catConfig.color }} />
+        <span className="text-zinc-300">{hook.label}</span>
+        <span
+          className="ml-auto rounded px-1 py-0.5 text-[8px] font-bold uppercase"
+          style={{ backgroundColor: `${enforcementColor}20`, color: enforcementColor }}
+        >
+          {enforcement}
+        </span>
+      </div>
+      <div className="mt-1.5 flex flex-wrap items-center gap-1">
+        <span
+          className="rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase"
+          style={{ backgroundColor: `${timingColor}20`, color: timingColor }}
+        >
+          {hook.timing}
+        </span>
+        <span
+          className="flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase"
+          style={{ backgroundColor: `${typeColor}20`, color: typeColor }}
+        >
+          <TypeIcon className="h-2.5 w-2.5" />
+          {hook.type}
+        </span>
+      </div>
+      <div className="mt-1.5 flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-900 px-2 py-1 font-mono text-[10px] text-zinc-400">
+        <TypeIcon className="h-3 w-3 shrink-0 text-zinc-600" />
+        <span className="truncate">{hook.target}</span>
+      </div>
+      {hook.description && <p className="mt-1 text-zinc-500">{hook.description}</p>}
+    </button>
+  );
+}
+
+function Flag({ label, value, active }: { label: string; value?: string; active?: boolean }) {
+  return (
+    <span
+      className="rounded border px-1.5 py-0.5 text-[10px]"
+      style={{
+        borderColor: active ? '#22c55e33' : '#27272a',
+        color: active ? '#22c55e' : '#a1a1aa',
+        backgroundColor: active ? '#22c55e10' : 'transparent',
+      }}
+    >
+      {label}{value ? `: ${value}` : ''}
+    </span>
+  );
+}

package/src/components/workflow/EdgePropertyEditor.tsx

@@ -0,0 +1,251 @@
+import { useState, useCallback, useMemo } from 'react';
+import { X, Trash2, Check } from 'lucide-react';
+import type { WorkflowEdge, WorkflowConfig, WorkflowHook, ConfirmLevel, EdgeDirection } from '../../../shared/workflow-config';
+import { DirectionSelector } from './DirectionSelector';
+import { SkillCommandBuilder } from './SkillCommandBuilder';
+import { ChecklistEditor } from './ChecklistEditor';
+import { DispatchConfigPanel } from './DispatchConfigPanel';
+import { MovementRulesPanel } from './MovementRulesPanel';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface EdgePropertyEditorProps {
+  edge: WorkflowEdge;
+  config: WorkflowConfig;
+  onSave: (updated: WorkflowEdge) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+// ─── Component ──────────────────────────────────────────
+
+export function EdgePropertyEditor({ edge, config, onSave, onDelete, onClose }: EdgePropertyEditorProps) {
+  const [draft, setDraft] = useState<WorkflowEdge>(() => structuredClone(edge));
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const listIds = useMemo(() => config.lists.map((l) => l.id), [config.lists]);
+  const availableHooks = useMemo(() => config.hooks ?? [], [config.hooks]);
+  const allowedPrefixes = useMemo(() => config.allowedCommandPrefixes ?? [], [config.allowedCommandPrefixes]);
+  const fromLabel = useMemo(() => config.lists.find((l) => l.id === draft.from)?.label ?? draft.from, [config.lists, draft.from]);
+  const toLabel = useMemo(() => config.lists.find((l) => l.id === draft.to)?.label ?? draft.to, [config.lists, draft.to]);
+
+  const errors = useMemo(() => {
+    const errs: string[] = [];
+    if (!draft.from) errs.push('From is required');
+    if (!draft.to) errs.push('To is required');
+    if (draft.from === draft.to) errs.push('From and To must be different');
+    if (!draft.label.trim()) errs.push('Label is required');
+    if (!draft.description.trim()) errs.push('Description is required');
+    const key = `${draft.from}:${draft.to}`;
+    const origKey = `${edge.from}:${edge.to}`;
+    if (key !== origKey && config.edges.some((e) => `${e.from}:${e.to}` === key)) {
+      errs.push('An edge with this from:to already exists');
+    }
+    return errs;
+  }, [draft, edge, config.edges]);
+
+  const updateField = useCallback(<K extends keyof WorkflowEdge>(key: K, value: WorkflowEdge[K]) => {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  const toggleHook = useCallback((hookId: string) => {
+    setDraft((prev) => {
+      const current = prev.hooks ?? [];
+      const has = current.includes(hookId);
+      return { ...prev, hooks: has ? current.filter((id) => id !== hookId) : [...current, hookId] };
+    });
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (errors.length > 0) return;
+    onSave(draft);
+  }, [draft, errors, onSave]);
+
+  return (
+    <div className="flex h-full w-80 shrink-0 flex-col rounded-lg border border-cyan-500/30 bg-zinc-900/95 backdrop-blur">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
+        <span className="text-sm font-medium">Edit Edge</span>
+        <button onClick={onClose} className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Form */}
+      <div className="flex-1 space-y-3 overflow-y-auto p-4 text-xs">
+        {/* From / To */}
+        <div className="grid grid-cols-2 gap-2">
+          <FieldGroup label="From">
+            <select
+              value={draft.from}
+              onChange={(e) => updateField('from', e.target.value)}
+              className="w-full rounded border border-zinc-700 bg-zinc-800 px-2 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
+            >
+              {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
+            </select>
+          </FieldGroup>
+          <FieldGroup label="To">
+            <select
+              value={draft.to}
+              onChange={(e) => updateField('to', e.target.value)}
+              className="w-full rounded border border-zinc-700 bg-zinc-800 px-2 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
+            >
+              {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
+            </select>
+          </FieldGroup>
+        </div>
+
+        {/* Direction — rich selector */}
+        <FieldGroup label="Direction">
+          <DirectionSelector
+            value={draft.direction}
+            onChange={(d: EdgeDirection) => updateField('direction', d)}
+            fromLabel={fromLabel}
+            toLabel={toLabel}
+          />
+        </FieldGroup>
+
+        {/* Movement Rules — informational panel */}
+        <FieldGroup label="Movement Rules">
+          <MovementRulesPanel edge={draft} lists={config.lists} />
+        </FieldGroup>
+
+        {/* Label */}
+        <FieldGroup label="Label">
+          <input
+            value={draft.label}
+            onChange={(e) => updateField('label', e.target.value)}
+            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
+          />
+        </FieldGroup>
+
+        {/* Description */}
+        <FieldGroup label="Description">
+          <textarea
+            value={draft.description}
+            onChange={(e) => updateField('description', e.target.value)}
+            rows={2}
+            className="w-full resize-none rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
+          />
+        </FieldGroup>
+
+        {/* Skill Command — rich builder */}
+        <FieldGroup label="Skill Command">
+          <SkillCommandBuilder
+            value={draft.command}
+            onChange={(v: string | null) => updateField('command', v)}
+            allowedPrefixes={allowedPrefixes}
+          />
+        </FieldGroup>
+
+        {/* Dispatch Configuration — rich toggles */}
+        <FieldGroup label="Dispatch & Confirmation">
+          <DispatchConfigPanel
+            dispatchOnly={draft.dispatchOnly ?? false}
+            humanOnly={draft.humanOnly ?? false}
+            skipServerTransition={draft.skipServerTransition ?? false}
+            confirmLevel={draft.confirmLevel}
+            hasCommand={draft.command !== null}
+            onDispatchOnlyChange={(v: boolean) => updateField('dispatchOnly', v || undefined)}
+            onHumanOnlyChange={(v: boolean) => updateField('humanOnly', v || undefined)}
+            onSkipServerTransitionChange={(v: boolean) => updateField('skipServerTransition', v || undefined)}
+            onConfirmLevelChange={(v: ConfirmLevel) => updateField('confirmLevel', v)}
+          />
+        </FieldGroup>
+
+        {/* Checklist — drag-to-reorder editor */}
+        <FieldGroup label={`Checklist (${(draft.checklist ?? []).length})`}>
+          <ChecklistEditor
+            items={draft.checklist ?? []}
+            onChange={(items: string[]) => updateField('checklist', items.length > 0 ? items : undefined)}
+            confirmLevel={draft.confirmLevel}
+          />
+        </FieldGroup>
+
+        {/* Hooks */}
+        {availableHooks.length > 0 && (
+          <FieldGroup label={`Hooks (${(draft.hooks ?? []).length} selected)`}>
+            <div className="space-y-1.5">
+              {availableHooks.map((hook) => (
+                <HookCheckbox
+                  key={hook.id}
+                  hook={hook}
+                  checked={(draft.hooks ?? []).includes(hook.id)}
+                  onToggle={() => toggleHook(hook.id)}
+                />
+              ))}
+            </div>
+          </FieldGroup>
+        )}
+
+        {/* Validation errors */}
+        {errors.length > 0 && (
+          <div className="rounded border border-red-500/30 bg-red-500/10 p-2.5">
+            {errors.map((e) => (
+              <p key={e} className="text-[10px] text-red-400">{e}</p>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center gap-2 border-t border-zinc-800 px-4 py-3">
+        {showDeleteConfirm ? (
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-red-400">Confirm?</span>
+            <button onClick={onDelete} className="rounded bg-red-500/20 px-2 py-1 text-[10px] text-red-400 hover:bg-red-500/30">
+              Delete
+            </button>
+            <button onClick={() => setShowDeleteConfirm(false)} className="rounded px-2 py-1 text-[10px] text-zinc-500 hover:text-zinc-300">
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowDeleteConfirm(true)}
+            className="rounded p-1.5 text-zinc-600 hover:bg-red-500/10 hover:text-red-400"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div className="flex-1" />
+        <button
+          onClick={handleSave}
+          disabled={errors.length > 0}
+          className="flex items-center gap-1.5 rounded bg-cyan-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-cyan-500 disabled:opacity-40"
+        >
+          <Check className="h-3 w-3" />
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function HookCheckbox({ hook, checked, onToggle }: { hook: WorkflowHook; checked: boolean; onToggle: () => void }) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2 rounded border border-zinc-800 bg-zinc-950/30 px-2 py-1.5">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onToggle}
+        className="h-3.5 w-3.5 rounded border-zinc-600 bg-zinc-800 text-cyan-500 focus:ring-0 focus:ring-offset-0"
+      />
+      <div className="flex-1">
+        <span className="text-zinc-300">{hook.label}</span>
+        <span className="ml-1.5 text-[9px] text-zinc-600">{hook.timing} · {hook.type}</span>
+      </div>
+    </label>
+  );
+}