orbital-command 0.2.0 → 1.0.0

package/src/components/workflow/MigrationPreviewDialog.tsx

@@ -1,237 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { X, AlertTriangle, ArrowRight, CheckCircle2, Loader2 } from 'lucide-react';
-import type { WorkflowConfig } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface MigrationPlan {
-  valid: boolean;
-  validationErrors: string[];
-  removedLists: string[];
-  addedLists: string[];
-  dirsToCreate: string[];
-  dirsToRemove: string[];
-  orphanedScopes: Array<{ listId: string; scopeFiles: string[] }>;
-  lostEdges: Array<{ from: string; to: string }>;
-  suggestedMappings: Record<string, string>;
-  impactSummary: string;
-}
-
-interface MigrationPreviewDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  config: WorkflowConfig;
-  plan: MigrationPlan | null;
-  loading: boolean;
-  error: string | null;
-  onApply: (orphanMappings: Record<string, string>) => void;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function MigrationPreviewDialog({
-  open,
-  onOpenChange,
-  config,
-  plan,
-  loading,
-  error,
-  onApply,
-}: MigrationPreviewDialogProps) {
-  const [orphanMappings, setOrphanMappings] = useState<Record<string, string>>({});
-
-  // Initialize mappings from suggestions when plan changes
-  useMemo(() => {
-    if (plan?.suggestedMappings) {
-      setOrphanMappings({ ...plan.suggestedMappings });
-    }
-  }, [plan?.suggestedMappings]);
-
-  const listIds = useMemo(() => config.lists.map((l) => l.id), [config.lists]);
-
-  const allOrphansMapped = useMemo(() => {
-    if (!plan) return true;
-    return plan.orphanedScopes.every((o) => orphanMappings[o.listId]);
-  }, [plan, orphanMappings]);
-
-  const handleApply = useCallback(() => {
-    if (!allOrphansMapped) return;
-    onApply(orphanMappings);
-  }, [allOrphansMapped, orphanMappings, onApply]);
-
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
-        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 max-h-[80vh] w-[520px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-xl">
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
-            <Dialog.Title className="flex items-center gap-2 text-sm font-medium text-zinc-100">
-              <AlertTriangle className="h-4 w-4 text-amber-400" />
-              Migration Preview
-            </Dialog.Title>
-            <Dialog.Close className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
-              <X className="h-4 w-4" />
-            </Dialog.Close>
-          </div>
-
-          {/* Content */}
-          <div className="max-h-[60vh] overflow-y-auto p-5 text-xs">
-            {loading && (
-              <div className="flex items-center justify-center gap-2 py-8 text-zinc-500">
-                <Loader2 className="h-4 w-4 animate-spin" />
-                <span>Computing migration impact...</span>
-              </div>
-            )}
-
-            {error && (
-              <div className="rounded border border-red-500/30 bg-red-500/10 p-3 text-red-400">
-                {error}
-              </div>
-            )}
-
-            {plan && !loading && (
-              <div className="space-y-4">
-                {/* Validation errors */}
-                {!plan.valid && (
-                  <div className="rounded border border-red-500/30 bg-red-500/10 p-3">
-                    <p className="mb-2 font-semibold text-red-400">Validation Errors</p>
-                    {plan.validationErrors.map((e) => (
-                      <p key={e} className="text-red-400">{e}</p>
-                    ))}
-                  </div>
-                )}
-
-                {plan.valid && (
-                  <>
-                    {/* Summary */}
-                    <div className="rounded border border-zinc-800 bg-zinc-950/50 p-3">
-                      <p className="text-zinc-300">{plan.impactSummary}</p>
-                    </div>
-
-                    {/* Added lists */}
-                    {plan.addedLists.length > 0 && (
-                      <Section title={`Added Lists (${plan.addedLists.length})`}>
-                        <div className="flex flex-wrap gap-1.5">
-                          {plan.addedLists.map((id) => (
-                            <span key={id} className="rounded bg-emerald-500/15 px-2 py-1 font-mono text-emerald-400">
-                              + {id}
-                            </span>
-                          ))}
-                        </div>
-                      </Section>
-                    )}
-
-                    {/* Removed lists */}
-                    {plan.removedLists.length > 0 && (
-                      <Section title={`Removed Lists (${plan.removedLists.length})`}>
-                        <div className="flex flex-wrap gap-1.5">
-                          {plan.removedLists.map((id) => (
-                            <span key={id} className="rounded bg-red-500/15 px-2 py-1 font-mono text-red-400">
-                              - {id}
-                            </span>
-                          ))}
-                        </div>
-                      </Section>
-                    )}
-
-                    {/* Lost edges */}
-                    {plan.lostEdges.length > 0 && (
-                      <Section title={`Lost Edges (${plan.lostEdges.length})`}>
-                        <div className="space-y-1">
-                          {plan.lostEdges.map((e) => (
-                            <div key={`${e.from}:${e.to}`} className="flex items-center gap-2 text-zinc-400">
-                              <span className="font-mono">{e.from}</span>
-                              <ArrowRight className="h-3 w-3 text-zinc-600" />
-                              <span className="font-mono">{e.to}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </Section>
-                    )}
-
-                    {/* Orphaned scopes */}
-                    {plan.orphanedScopes.length > 0 && (
-                      <Section title="Orphaned Scopes — Reassignment Required">
-                        <div className="space-y-3">
-                          {plan.orphanedScopes.map((o) => (
-                            <div key={o.listId} className="rounded border border-amber-500/30 bg-amber-500/5 p-3">
-                              <div className="flex items-center justify-between">
-                                <span className="font-mono text-amber-400">{o.listId}</span>
-                                <span className="text-zinc-500">{o.scopeFiles.length} scope(s)</span>
-                              </div>
-                              <div className="mt-2 flex items-center gap-2">
-                                <span className="text-zinc-500">Move to:</span>
-                                <select
-                                  value={orphanMappings[o.listId] ?? ''}
-                                  onChange={(e) => setOrphanMappings((prev) => ({ ...prev, [o.listId]: e.target.value }))}
-                                  className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
-                                >
-                                  <option value="">Select destination...</option>
-                                  {listIds.map((id) => (
-                                    <option key={id} value={id}>{id}</option>
-                                  ))}
-                                </select>
-                              </div>
-                              {o.scopeFiles.length <= 5 && (
-                                <div className="mt-2 space-y-0.5">
-                                  {o.scopeFiles.map((f) => (
-                                    <p key={f} className="font-mono text-[10px] text-zinc-500">{f}</p>
-                                  ))}
-                                </div>
-                              )}
-                            </div>
-                          ))}
-                        </div>
-                      </Section>
-                    )}
-
-                    {/* No impact */}
-                    {plan.removedLists.length === 0 &&
-                      plan.addedLists.length === 0 &&
-                      plan.lostEdges.length === 0 &&
-                      plan.orphanedScopes.length === 0 && (
-                      <div className="flex items-center gap-2 rounded border border-emerald-500/30 bg-emerald-500/10 p-3 text-emerald-400">
-                        <CheckCircle2 className="h-4 w-4" />
-                        <span>No migration needed — configs are compatible</span>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-4">
-            <Dialog.Close className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
-              Cancel
-            </Dialog.Close>
-            {plan?.valid && (
-              <button
-                onClick={handleApply}
-                disabled={!allOrphansMapped}
-                className="flex items-center gap-1.5 rounded bg-emerald-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-40"
-              >
-                <CheckCircle2 className="h-3.5 w-3.5" />
-                Apply Migration
-              </button>
-            )}
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
-
-// ─── 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>
-  );
-}

package/src/components/workflow/MovementRulesPanel.tsx

@@ -1,188 +0,0 @@
-import { useMemo } from 'react';
-import { ArrowRight, ArrowLeft, CornerRightDown, Info } from 'lucide-react';
-import type { WorkflowEdge, WorkflowList } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface MovementRulesPanelProps {
-  edge: WorkflowEdge;
-  lists: WorkflowList[];
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function MovementRulesPanel({ edge, lists }: MovementRulesPanelProps) {
-  const sortedLists = useMemo(
-    () => [...lists].sort((a, b) => a.order - b.order),
-    [lists],
-  );
-
-  const fromList = lists.find((l) => l.id === edge.from);
-  const toList = lists.find((l) => l.id === edge.to);
-  const fromOrder = fromList?.order ?? -1;
-  const toOrder = toList?.order ?? -1;
-
-  if (edge.direction === 'shortcut') {
-    return <ShortcutRules sortedLists={sortedLists} fromOrder={fromOrder} toOrder={toOrder} edge={edge} />;
-  }
-
-  if (edge.direction === 'backward') {
-    return <BackwardRules edge={edge} fromLabel={fromList?.label ?? edge.from} toLabel={toList?.label ?? edge.to} />;
-  }
-
-  return <ForwardRules edge={edge} fromLabel={fromList?.label ?? edge.from} toLabel={toList?.label ?? edge.to} />;
-}
-
-// ─── Sub-panels ─────────────────────────────────────────
-
-function ShortcutRules({ sortedLists, fromOrder, toOrder, edge }: {
-  sortedLists: WorkflowList[];
-  fromOrder: number;
-  toOrder: number;
-  edge: WorkflowEdge;
-}) {
-  const skippedLists = sortedLists.filter(
-    (l) => l.order > Math.min(fromOrder, toOrder) && l.order < Math.max(fromOrder, toOrder),
-  );
-
-  return (
-    <div className="space-y-2">
-      <RuleHeader icon={CornerRightDown} color="#6366f1" label="Shortcut — Skip Rules" />
-      {/* Mini diagram */}
-      <div className="flex items-center gap-1 rounded border border-zinc-800 bg-zinc-950/50 px-2.5 py-2 overflow-x-auto">
-        {sortedLists.map((list, i) => {
-          const isFrom = list.id === edge.from;
-          const isTo = list.id === edge.to;
-          const isSkipped = skippedLists.some((s) => s.id === list.id);
-          return (
-            <div key={list.id} className="flex items-center gap-1">
-              <span
-                className="rounded px-1.5 py-0.5 text-[8px] font-medium whitespace-nowrap"
-                style={{
-                  backgroundColor: isFrom || isTo ? '#6366f120' : isSkipped ? '#27272a' : '#18181b',
-                  color: isFrom || isTo ? '#818cf8' : isSkipped ? '#52525b' : '#71717a',
-                  border: isFrom || isTo ? '1px solid #6366f140' : '1px solid transparent',
-                  textDecoration: isSkipped ? 'line-through' : 'none',
-                }}
-              >
-                {list.label}
-              </span>
-              {i < sortedLists.length - 1 && (
-                <span className="text-[8px] text-zinc-700">›</span>
-              )}
-            </div>
-          );
-        })}
-      </div>
-      {skippedLists.length > 0 ? (
-        <p className="text-[9px] text-zinc-500">
-          <span className="text-indigo-400">{edge.from}</span>
-          {' → '}
-          <span className="text-indigo-400">{edge.to}</span>
-          {' skips '}
-          <span className="text-zinc-400">{skippedLists.map((l) => l.label).join(', ')}</span>
-        </p>
-      ) : (
-        <p className="text-[9px] text-zinc-500">No intermediate lists are skipped.</p>
-      )}
-    </div>
-  );
-}
-
-function BackwardRules({ edge, fromLabel, toLabel }: {
-  edge: WorkflowEdge;
-  fromLabel: string;
-  toLabel: string;
-}) {
-  const suggestedItems = [
-    'Issue documented',
-    'Fix scope created',
-    'Root cause identified',
-  ];
-
-  return (
-    <div className="space-y-2">
-      <RuleHeader icon={ArrowLeft} color="#f59e0b" label="Backward — Revert Rules" />
-      <div className="flex items-center gap-2 rounded border border-amber-500/20 bg-amber-500/5 px-2.5 py-2">
-        <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-[9px] font-medium text-amber-400">
-          {fromLabel}
-        </span>
-        <svg width="24" height="12" viewBox="0 0 24 12" className="shrink-0">
-          <line x1="20" y1="6" x2="4" y2="6" stroke="#f59e0b" strokeWidth="1.5" strokeDasharray="2 2" />
-          <polygon points="4,6 8,3 8,9" fill="#f59e0b" />
-        </svg>
-        <span className="rounded bg-amber-500/20 px-1.5 py-0.5 text-[9px] font-medium text-amber-400">
-          {toLabel}
-        </span>
-        <span className="ml-auto rounded bg-amber-500/15 px-1.5 py-0.5 text-[8px] font-semibold text-amber-400">
-          REPAIR
-        </span>
-      </div>
-      <p className="text-[9px] text-zinc-500">
-        {fromLabel} → {toLabel} is a <span className="text-amber-400">repair</span> operation.
-        Scopes move backward for rework.
-      </p>
-      {/* Suggested checklist items */}
-      {(!edge.checklist || edge.checklist.length === 0) && (
-        <div className="rounded border border-zinc-800 bg-zinc-950/50 p-2">
-          <div className="flex items-center gap-1 mb-1.5">
-            <Info className="h-3 w-3 text-zinc-600" />
-            <span className="text-[9px] font-medium text-zinc-500">Suggested checklist items</span>
-          </div>
-          <ul className="space-y-0.5">
-            {suggestedItems.map((item) => (
-              <li key={item} className="text-[9px] text-zinc-600 flex items-center gap-1.5">
-                <span className="h-1 w-1 rounded-full bg-zinc-700 shrink-0" />
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ForwardRules({ edge, fromLabel, toLabel }: {
-  edge: WorkflowEdge;
-  fromLabel: string;
-  toLabel: string;
-}) {
-  return (
-    <div className="space-y-2">
-      <RuleHeader icon={ArrowRight} color="#22c55e" label="Forward — Progression" />
-      <div className="flex items-center gap-2 rounded border border-emerald-500/20 bg-emerald-500/5 px-2.5 py-2">
-        <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400">
-          {fromLabel}
-        </span>
-        <svg width="24" height="12" viewBox="0 0 24 12" className="shrink-0">
-          <line x1="4" y1="6" x2="20" y2="6" stroke="#22c55e" strokeWidth="1.5" />
-          <polygon points="20,6 16,3 16,9" fill="#22c55e" />
-        </svg>
-        <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400">
-          {toLabel}
-        </span>
-      </div>
-      {edge.dispatchOnly && (
-        <p className="text-[9px] text-zinc-500">
-          This transition requires a <span className="text-cyan-400">skill command</span> to trigger.
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ─── Shared ─────────────────────────────────────────────
-
-function RuleHeader({ icon: Icon, color, label }: {
-  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
-  color: string;
-  label: string;
-}) {
-  return (
-    <div className="flex items-center gap-1.5">
-      <Icon className="h-3 w-3" style={{ color }} />
-      <span className="text-[10px] font-semibold" style={{ color }}>{label}</span>
-    </div>
-  );
-}

package/src/components/workflow/NodeDetailPanel.tsx

@@ -1,245 +0,0 @@
-import { useMemo } from 'react';
-import { X, Star, Package, Zap, GitBranch, Key, Shield, Terminal, Radio, Globe, ShieldCheck, AlertTriangle, Cog, Eye } from 'lucide-react';
-import type { WorkflowList, WorkflowHook, WorkflowEdge, HookCategory, HookEnforcement } from '../../../shared/workflow-config';
-import { getHookEnforcement } from '../../../shared/workflow-config';
-
-interface NodeDetailPanelProps {
-  list: WorkflowList | null;
-  hooks: WorkflowHook[];
-  connectedEdges: WorkflowEdge[];
-  onClose: () => void;
-  onHookClick?: (hook: WorkflowHook) => void;
-}
-
-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 NodeDetailPanel({ list, hooks, connectedEdges, onClose, onHookClick }: NodeDetailPanelProps) {
-  if (!list) return null;
-
-  const inbound = connectedEdges.filter((e) => e.to === list.id);
-  const outbound = connectedEdges.filter((e) => e.from === list.id);
-
-  // 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">
-          <div className="h-3 w-3 rounded-full" style={{ backgroundColor: list.hex }} />
-          <span className="text-sm font-medium">{list.label}</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">
-        {/* Properties */}
-        <Section title="Properties">
-          <PropRow label="ID" value={list.id} />
-          <PropRow label="Order" value={String(list.order)} />
-          {list.group && <PropRow label="Group" value={list.group} />}
-          <PropRow label="Color" value={list.hex} />
-        </Section>
-
-        {/* Flags */}
-        <Section title="Flags">
-          <div className="flex flex-wrap gap-2">
-            {list.isEntryPoint && <FlagBadge icon={Star} label="Entry Point" color={list.hex} />}
-            {list.supportsBatch && <FlagBadge icon={Package} label="Batch" color="#22c55e" />}
-            {list.supportsSprint && <FlagBadge icon={Zap} label="Sprint" color="#6366f1" />}
-            {list.gitBranch && <FlagBadge icon={GitBranch} label={list.gitBranch} color="#f59e0b" />}
-            {list.sessionKey && <FlagBadge icon={Key} label={list.sessionKey} color="#8b5cf6" />}
-          </div>
-          {!list.isEntryPoint && !list.supportsBatch && !list.supportsSprint && !list.gitBranch && !list.sessionKey && (
-            <span className="text-zinc-600">None</span>
-          )}
-        </Section>
-
-        {/* Inbound edges */}
-        <Section title={`Inbound (${inbound.length})`}>
-          {inbound.length === 0 ? (
-            <span className="text-zinc-600">None</span>
-          ) : (
-            inbound.map((e) => <EdgeRow key={`${e.from}:${e.to}`} edge={e} showField="from" />)
-          )}
-        </Section>
-
-        {/* Outbound edges */}
-        <Section title={`Outbound (${outbound.length})`}>
-          {outbound.length === 0 ? (
-            <span className="text-zinc-600">None</span>
-          ) : (
-            outbound.map((e) => <EdgeRow key={`${e.from}:${e.to}`} edge={e} showField="to" />)
-          )}
-        </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) => (
-                      <NodeHookDetail 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>
-      <div className="space-y-1.5">{children}</div>
-    </div>
-  );
-}
-
-function PropRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center justify-between">
-      <span className="text-zinc-500">{label}</span>
-      <span className="font-mono text-zinc-300">{value}</span>
-    </div>
-  );
-}
-
-function FlagBadge({ icon: Icon, label, color }: { icon: React.ComponentType<{ className?: string }>; label: string; color: string }) {
-  return (
-    <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px]" style={{ backgroundColor: `${color}15`, color }}>
-      <Icon className="h-3 w-3" />
-      {label}
-    </span>
-  );
-}
-
-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 NodeHookDetail({ 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>
-  );
-}
-
-const DIRECTION_COLORS: Record<string, string> = {
-  forward: '#22c55e',
-  backward: '#f59e0b',
-  shortcut: '#6366f1',
-};
-
-function EdgeRow({ edge, showField }: { edge: WorkflowEdge; showField: 'from' | 'to' }) {
-  const color = DIRECTION_COLORS[edge.direction] ?? '#22c55e';
-  return (
-    <div className="flex items-center gap-2 rounded border border-zinc-800/50 bg-zinc-950/30 px-2 py-1.5">
-      <span className="rounded px-1 py-0.5 text-[9px] uppercase" style={{ backgroundColor: `${color}20`, color }}>
-        {edge.direction}
-      </span>
-      <span className="text-zinc-400">{showField === 'from' ? edge.from : edge.to}</span>
-      <span className="ml-auto text-zinc-600">{edge.label}</span>
-    </div>
-  );
-}