orbital-command 0.1.0

package/src/components/workflow/HooksDashboard.tsx

@@ -0,0 +1,363 @@
+import { useMemo } from 'react';
+import {
+  Shield, Zap, Bot, ShieldCheck, AlertTriangle, Cog, Eye,
+  ChevronRight, Clock,
+} from 'lucide-react';
+import type {
+  WorkflowEdge, HookCategory, UnifiedHook, CcHookEvent,
+} from '../../../shared/workflow-config';
+import { HookExecutionLog } from './HookExecutionLog';
+
+// ─── Types ──────────────────────────────────────────
+
+interface HooksDashboardProps {
+  hooks: UnifiedHook[];
+  edges: WorkflowEdge[];
+  onHookClick: (hook: UnifiedHook) => void;
+}
+
+interface MatcherGroup {
+  matcher: string;
+  hooks: UnifiedHook[];
+}
+
+// ─── Constants ──────────────────────────────────────────
+
+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 CC_EVENT_ORDER: CcHookEvent[] = ['SessionStart', 'PreToolUse', 'PostToolUse', 'SessionEnd'];
+
+const CC_EVENT_COLORS: Record<CcHookEvent, string> = {
+  SessionStart: '#22c55e',
+  PreToolUse: '#eab308',
+  PostToolUse: '#3b82f6',
+  SessionEnd: '#ef4444',
+};
+
+// ─── Component ──────────────────────────────────────────
+
+export function HooksDashboard({ hooks, edges, onHookClick }: HooksDashboardProps) {
+  // Split hooks into workflow (including shared) and CC-only
+  const { workflowHooks, ccOnlyHooks, stats } = useMemo(() => {
+    const wf: UnifiedHook[] = [];
+    const cc: UnifiedHook[] = [];
+    let sharedCount = 0;
+
+    for (const h of hooks) {
+      if (h.source === 'workflow' || h.source === 'both') {
+        wf.push(h);
+        if (h.source === 'both') sharedCount++;
+      } else {
+        cc.push(h);
+      }
+    }
+
+    const edgesWithHooks = edges.filter((e) => (e.hooks ?? []).length > 0).length;
+
+    return {
+      workflowHooks: wf,
+      ccOnlyHooks: cc,
+      stats: {
+        total: hooks.length,
+        workflow: wf.length,
+        ccOnly: cc.length,
+        shared: sharedCount,
+        edgesWithHooks,
+      },
+    };
+  }, [hooks, edges]);
+
+  // Group workflow hooks by category
+  const categoryGroups = useMemo(() => {
+    const groups = new Map<HookCategory, UnifiedHook[]>();
+    for (const h of workflowHooks) {
+      if (!h.workflow) continue;
+      const cat = h.workflow.category;
+      const arr = groups.get(cat);
+      if (arr) arr.push(h);
+      else groups.set(cat, [h]);
+    }
+    return groups;
+  }, [workflowHooks]);
+
+  // Group CC-only hooks by event, then by matcher within each event
+  const eventGroups = useMemo(() => {
+    const groups = new Map<CcHookEvent, MatcherGroup[]>();
+    for (const h of ccOnlyHooks) {
+      if (!h.ccTriggers?.length) continue;
+      // Use the first trigger's event as the primary grouping
+      const primaryTrigger = h.ccTriggers[0];
+      const event = primaryTrigger.event;
+      const matcher = primaryTrigger.matcher ?? '(all)';
+
+      if (!groups.has(event)) groups.set(event, []);
+      const matcherGroups = groups.get(event)!;
+      const existing = matcherGroups.find((g) => g.matcher === matcher);
+      if (existing) existing.hooks.push(h);
+      else matcherGroups.push({ matcher, hooks: [h] });
+    }
+    return groups;
+  }, [ccOnlyHooks]);
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4 space-y-6">
+      {/* Stats Bar */}
+      <StatsBar stats={stats} />
+
+      {/* Transition Enforcement Section */}
+      <section>
+        <div className="mb-3 flex items-center gap-2">
+          <Shield className="h-4 w-4 text-orange-400" />
+          <h2 className="text-sm font-medium text-zinc-200">Transition Enforcement</h2>
+          <span className="text-[10px] text-zinc-500">
+            {workflowHooks.length} hooks on {stats.edgesWithHooks} edges
+          </span>
+        </div>
+        <p className="mb-4 text-[11px] text-zinc-500">
+          Hooks that fire during scope transitions
+        </p>
+
+        <div className="flex gap-1 items-stretch">
+          {/* BEFORE label */}
+          <div className="flex items-center">
+            <span className="rounded-l bg-yellow-500/10 px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-yellow-500 [writing-mode:vertical-lr] rotate-180">
+              Before
+            </span>
+          </div>
+
+          {/* First 3 columns: Guards, Gates, Lifecycle */}
+          <div className="grid flex-1 grid-cols-3 gap-3">
+            {CATEGORY_ORDER.slice(0, 3).map((cat, i) => (
+              <PipelineColumn
+                key={cat}
+                category={cat}
+                hooks={categoryGroups.get(cat) ?? []}
+                onHookClick={onHookClick}
+                showArrow={i < 2}
+              />
+            ))}
+          </div>
+
+          {/* BEFORE/AFTER divider */}
+          <div className="flex flex-col items-center justify-center px-2">
+            <div className="h-full w-px bg-zinc-800" />
+          </div>
+
+          {/* AFTER label */}
+          <div className="flex items-center">
+            <span className="rounded-l bg-cyan-500/10 px-2 py-1 text-[9px] font-semibold uppercase tracking-wider text-cyan-500 [writing-mode:vertical-lr] rotate-180">
+              After
+            </span>
+          </div>
+
+          {/* Last column: Observers */}
+          <div className="w-56">
+            <PipelineColumn
+              category="observer"
+              hooks={categoryGroups.get('observer') ?? []}
+              onHookClick={onHookClick}
+              showArrow={false}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Session Enforcement Section */}
+      <section>
+        <div className="mb-3 flex items-center gap-2">
+          <Bot className="h-4 w-4 text-emerald-400" />
+          <h2 className="text-sm font-medium text-zinc-200">Session Enforcement</h2>
+          <span className="text-[10px] text-zinc-500">
+            {ccOnlyHooks.length} CC hooks
+          </span>
+        </div>
+        <p className="mb-4 text-[11px] text-zinc-500">
+          Hooks that fire on Claude Code tool events
+        </p>
+
+        <div className="grid grid-cols-4 gap-3">
+          {CC_EVENT_ORDER.map((event, i) => (
+            <EventColumn
+              key={event}
+              event={event}
+              matcherGroups={eventGroups.get(event) ?? []}
+              onHookClick={onHookClick}
+              showArrow={i < 3}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Execution Log Placeholder */}
+      <section>
+        <div className="mb-3 flex items-center gap-2">
+          <Clock className="h-4 w-4 text-zinc-500" />
+          <h2 className="text-sm font-medium text-zinc-200">Execution Log</h2>
+          <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[9px] text-zinc-500">scope 079</span>
+        </div>
+        <HookExecutionLog />
+      </section>
+    </div>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function StatsBar({ stats }: { stats: { total: number; workflow: number; ccOnly: number; shared: number; edgesWithHooks: number } }) {
+  return (
+    <div className="flex items-center gap-4 rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-2.5">
+      <Stat icon={Zap} color="#f97316" label="hooks" value={stats.total} />
+      <Divider />
+      <Stat icon={Shield} color="#f97316" label="workflow" value={stats.workflow} />
+      <Divider />
+      <Stat icon={Bot} color="#10b981" label="CC-only" value={stats.ccOnly} />
+      <Divider />
+      <span className="text-[10px] text-zinc-500">
+        {stats.shared} shared scripts
+      </span>
+    </div>
+  );
+}
+
+function Stat({ icon: Icon, color, label, value }: {
+  icon: typeof Zap; color: string; label: string; value: number;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <Icon className="h-3.5 w-3.5" style={{ color }} />
+      <span className="text-sm font-semibold text-zinc-200">{value}</span>
+      <span className="text-[10px] text-zinc-500">{label}</span>
+    </div>
+  );
+}
+
+function Divider() {
+  return <div className="h-4 w-px bg-zinc-800" />;
+}
+
+function PipelineColumn({ category, hooks, onHookClick, showArrow }: {
+  category: HookCategory;
+  hooks: UnifiedHook[];
+  onHookClick: (hook: UnifiedHook) => void;
+  showArrow: boolean;
+}) {
+  const config = CATEGORY_CONFIG[category];
+  const CatIcon = config.icon;
+
+  return (
+    <div className="relative">
+      {/* Column header */}
+      <div className="mb-2 flex items-center gap-1.5">
+        <CatIcon className="h-3 w-3" style={{ color: config.color }} />
+        <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: config.color }}>
+          {config.label}
+        </span>
+        <span className="text-[9px] text-zinc-600">({hooks.length})</span>
+      </div>
+
+      {/* Hook cards */}
+      <div className="space-y-1.5">
+        {hooks.length === 0 ? (
+          <div className="rounded border border-dashed border-zinc-800 px-3 py-4 text-center text-[10px] text-zinc-700">
+            No {config.label.toLowerCase()}
+          </div>
+        ) : (
+          hooks.map((h) => (
+            <CompactHookCard key={h.id} hook={h} onHookClick={onHookClick} />
+          ))
+        )}
+      </div>
+
+      {/* Flow arrow */}
+      {showArrow && (
+        <div className="absolute -right-2.5 top-1/2 -translate-y-1/2 text-zinc-700">
+          <ChevronRight className="h-4 w-4" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EventColumn({ event, matcherGroups, onHookClick, showArrow }: {
+  event: CcHookEvent;
+  matcherGroups: MatcherGroup[];
+  onHookClick: (hook: UnifiedHook) => void;
+  showArrow: boolean;
+}) {
+  const color = CC_EVENT_COLORS[event];
+  const totalHooks = matcherGroups.reduce((sum, g) => sum + g.hooks.length, 0);
+
+  return (
+    <div className="relative">
+      {/* Column header */}
+      <div className="mb-2 flex items-center gap-1.5">
+        <div className="h-2 w-2 rounded-full" style={{ backgroundColor: color }} />
+        <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color }}>
+          {event}
+        </span>
+        {totalHooks > 0 && <span className="text-[9px] text-zinc-600">({totalHooks})</span>}
+      </div>
+
+      {/* Matcher sub-groups */}
+      <div className="space-y-2">
+        {matcherGroups.length === 0 ? (
+          <div className="rounded border border-dashed border-zinc-800 px-3 py-4 text-center text-[10px] text-zinc-700">
+            No hooks
+          </div>
+        ) : (
+          matcherGroups.map((group) => (
+            <div key={group.matcher}>
+              {group.matcher !== '(all)' && (
+                <div className="mb-1 rounded bg-zinc-800/50 px-1.5 py-0.5 font-mono text-[9px] text-zinc-500 w-fit">
+                  {group.matcher}
+                </div>
+              )}
+              <div className="space-y-1.5">
+                {group.hooks.map((h) => (
+                  <CompactHookCard key={h.id} hook={h} onHookClick={onHookClick} />
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Flow arrow */}
+      {showArrow && (
+        <div className="absolute -right-2.5 top-1/2 -translate-y-1/2 text-zinc-700">
+          <ChevronRight className="h-4 w-4" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CompactHookCard({ hook, onHookClick }: { hook: UnifiedHook; onHookClick: (hook: UnifiedHook) => void }) {
+  const isBlocking = hook.workflow?.blocking;
+  const hasCC = hook.source === 'both';
+
+  return (
+    <button
+      onClick={() => onHookClick(hook)}
+      className="w-full rounded border bg-zinc-950/50 px-2.5 py-2 text-left transition-colors hover:border-zinc-600 hover:bg-zinc-900/70"
+      style={{ borderColor: isBlocking ? '#ef444440' : '#27272a' }}
+    >
+      <div className="flex items-center gap-1.5">
+        <span className="text-[11px] font-medium text-zinc-300 truncate">{hook.label}</span>
+        {isBlocking && <Shield className="h-2.5 w-2.5 shrink-0 text-red-400" />}
+        {hasCC && (
+          <span className="ml-auto shrink-0 rounded bg-emerald-500/15 px-1 py-0.5 text-[8px] font-bold text-emerald-400">
+            +CC
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}

package/src/components/workflow/ListPropertyEditor.tsx

@@ -0,0 +1,251 @@
+import { useState, useCallback, useMemo } from 'react';
+import { X, Trash2, Check } from 'lucide-react';
+import type { WorkflowList, WorkflowConfig } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface ListPropertyEditorProps {
+  list: WorkflowList;
+  config: WorkflowConfig;
+  isNew?: boolean;
+  onSave: (updated: WorkflowList) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+// ─── Color Utilities ────────────────────────────────────
+
+function hexToHsl(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return `0 0% ${Math.round(l * 100)}%`;
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+// ─── Component ──────────────────────────────────────────
+
+export function ListPropertyEditor({ list, config, isNew, onSave, onDelete, onClose }: ListPropertyEditorProps) {
+  const [draft, setDraft] = useState<WorkflowList>(() => structuredClone(list));
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const existingGroups = useMemo(() => {
+    const groups = new Set(config.lists.map((l) => l.group).filter(Boolean));
+    return [...groups] as string[];
+  }, [config.lists]);
+
+  const errors = useMemo(() => {
+    const errs: string[] = [];
+    if (!draft.label.trim()) errs.push('Label is required');
+    if (!/^[a-z0-9-]+$/.test(draft.id)) errs.push('ID must be lowercase alphanumeric + hyphens');
+    if (!draft.id) errs.push('ID is required');
+    // Check unique ID (skip self)
+    if (config.lists.some((l) => l.id === draft.id && l.id !== list.id)) {
+      errs.push('ID already exists');
+    }
+    // Only one entry point
+    if (draft.isEntryPoint && config.lists.some((l) => l.isEntryPoint && l.id !== list.id)) {
+      errs.push('Another list is already the entry point');
+    }
+    return errs;
+  }, [draft, config.lists, list.id]);
+
+  const updateField = useCallback(<K extends keyof WorkflowList>(key: K, value: WorkflowList[K]) => {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  const handleHexChange = useCallback((hex: string) => {
+    setDraft((prev) => ({ ...prev, hex, color: hexToHsl(hex) }));
+  }, []);
+
+  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">
+        <div className="flex items-center gap-2">
+          <div className="h-3 w-3 rounded-full" style={{ backgroundColor: draft.hex }} />
+          <span className="text-sm font-medium">{isNew ? 'New List' : 'Edit List'}</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>
+
+      {/* Form */}
+      <div className="flex-1 space-y-3 overflow-y-auto p-4 text-xs">
+        {/* ID */}
+        <FieldGroup label="ID">
+          <input
+            value={draft.id}
+            onChange={(e) => updateField('id', e.target.value)}
+            disabled={!isNew}
+            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500 disabled:opacity-50"
+            placeholder="e.g. review"
+          />
+        </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 placeholder:text-zinc-600 focus:border-zinc-500"
+            placeholder="e.g. Review"
+          />
+        </FieldGroup>
+
+        {/* Color */}
+        <FieldGroup label="Color">
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={draft.hex}
+              onChange={(e) => handleHexChange(e.target.value)}
+              className="h-8 w-8 cursor-pointer rounded border border-zinc-700 bg-zinc-800 p-0.5"
+            />
+            <input
+              value={draft.hex}
+              onChange={(e) => handleHexChange(e.target.value)}
+              className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 font-mono text-zinc-200 outline-none focus:border-zinc-500"
+            />
+          </div>
+        </FieldGroup>
+
+        {/* Order */}
+        <FieldGroup label="Order">
+          <input
+            type="number"
+            value={draft.order}
+            onChange={(e) => updateField('order', parseInt(e.target.value, 10) || 0)}
+            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>
+
+        {/* Group */}
+        <FieldGroup label="Group">
+          <select
+            value={draft.group ?? ''}
+            onChange={(e) => updateField('group', e.target.value || undefined)}
+            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"
+          >
+            <option value="">None</option>
+            {existingGroups.map((g) => (
+              <option key={g} value={g}>{g}</option>
+            ))}
+          </select>
+        </FieldGroup>
+
+        {/* Git Branch */}
+        <FieldGroup label="Git Branch (optional)">
+          <input
+            value={draft.gitBranch ?? ''}
+            onChange={(e) => updateField('gitBranch', e.target.value || undefined)}
+            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+            placeholder="e.g. dev"
+          />
+        </FieldGroup>
+
+        {/* Session Key */}
+        <FieldGroup label="Session Key (optional)">
+          <input
+            value={draft.sessionKey ?? ''}
+            onChange={(e) => updateField('sessionKey', e.target.value || undefined)}
+            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+            placeholder="e.g. COMMIT_SESSION"
+          />
+        </FieldGroup>
+
+        {/* Flags */}
+        <FieldGroup label="Flags">
+          <div className="space-y-2">
+            <ToggleFlag label="Entry Point" checked={draft.isEntryPoint ?? false} onChange={(v) => updateField('isEntryPoint', v || undefined)} />
+            <ToggleFlag label="Has Directory" checked={draft.hasDirectory} onChange={(v) => updateField('hasDirectory', v)} />
+            <ToggleFlag label="Supports Batch" checked={draft.supportsBatch ?? false} onChange={(v) => updateField('supportsBatch', v || undefined)} />
+            <ToggleFlag label="Supports Sprint" checked={draft.supportsSprint ?? false} onChange={(v) => updateField('supportsSprint', v || undefined)} />
+          </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">
+        {!isNew && (
+          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 ToggleFlag({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="h-3.5 w-3.5 rounded border-zinc-600 bg-zinc-800 text-cyan-500 focus:ring-0 focus:ring-offset-0"
+      />
+      <span className="text-zinc-300">{label}</span>
+    </label>
+  );
+}