orbital-command 0.2.0 → 0.3.0

package/src/components/workflow/DispatchConfigPanel.tsx

@@ -1,180 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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>
-  );
-}