orbital-command 0.2.0 → 1.0.0

package/src/components/workflow/HooksDashboard.tsx

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

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