orbital-command 0.1.4 → 0.3.0

package/src/components/workflow/EditToolbar.tsx

@@ -1,138 +0,0 @@
-import {
-  Plus, GitBranch, Undo2, Redo2, Save, XCircle, Eye,
-  CheckCircle2, AlertTriangle, Settings,
-} from 'lucide-react';
-import type { ConfigValidationResult } from './validateConfig';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface EditToolbarProps {
-  canUndo: boolean;
-  canRedo: boolean;
-  changeCount: number;
-  validation: ConfigValidationResult;
-  saving: boolean;
-  onAddList: () => void;
-  onAddEdge: () => void;
-  onConfigSettings: () => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  onSave: () => void;
-  onDiscard: () => void;
-  onPreview: () => void;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function EditToolbar({
-  canUndo,
-  canRedo,
-  changeCount,
-  validation,
-  saving,
-  onAddList,
-  onAddEdge,
-  onConfigSettings,
-  onUndo,
-  onRedo,
-  onSave,
-  onDiscard,
-  onPreview,
-}: EditToolbarProps) {
-  return (
-    <div className="flex items-center gap-2 rounded-lg border border-cyan-500/30 bg-zinc-900/95 px-3 py-2 shadow-lg backdrop-blur">
-      {/* Add buttons */}
-      <ToolButton icon={Plus} label="List" onClick={onAddList} color="blue" />
-      <ToolButton icon={GitBranch} label="Edge" onClick={onAddEdge} color="blue" />
-      <ToolButton icon={Settings} label="Config" onClick={onConfigSettings} />
-
-      <Divider />
-
-      {/* Undo/Redo */}
-      <ToolButton icon={Undo2} onClick={onUndo} disabled={!canUndo} />
-      <ToolButton icon={Redo2} onClick={onRedo} disabled={!canRedo} />
-
-      {/* Dirty indicator */}
-      {changeCount > 0 && (
-        <span className="rounded-full bg-amber-500/20 px-2 py-0.5 text-[9px] font-semibold text-amber-400">
-          {changeCount} change{changeCount !== 1 ? 's' : ''}
-        </span>
-      )}
-
-      <Divider />
-
-      {/* Validation status */}
-      {validation.valid ? (
-        <span className="flex items-center gap-1 text-[10px] text-emerald-400">
-          <CheckCircle2 className="h-3.5 w-3.5" />
-          Valid
-        </span>
-      ) : (
-        <span className="group relative flex items-center gap-1 text-[10px] text-red-400">
-          <AlertTriangle className="h-3.5 w-3.5" />
-          {validation.errors.length} error{validation.errors.length !== 1 ? 's' : ''}
-          {/* Tooltip with error list */}
-          <div className="absolute bottom-full left-0 z-50 mb-2 hidden w-64 rounded border border-red-500/30 bg-zinc-900 p-2 shadow-xl group-hover:block">
-            {validation.errors.map((e) => (
-              <p key={e} className="text-[10px] text-red-400">{e}</p>
-            ))}
-          </div>
-        </span>
-      )}
-
-      <Divider />
-
-      {/* Preview / Save / Discard */}
-      <ToolButton icon={Eye} label="Preview" onClick={onPreview} />
-      <button
-        onClick={onSave}
-        disabled={!validation.valid || changeCount === 0 || saving}
-        className="flex items-center gap-1.5 rounded bg-emerald-600 px-3 py-1.5 text-[11px] font-medium text-white transition-colors hover:bg-emerald-500 disabled:opacity-40"
-      >
-        <Save className="h-3 w-3" />
-        {saving ? 'Saving...' : 'Save'}
-      </button>
-      <button
-        onClick={onDiscard}
-        className="flex items-center gap-1.5 rounded bg-red-600/80 px-3 py-1.5 text-[11px] font-medium text-white transition-colors hover:bg-red-500"
-      >
-        <XCircle className="h-3 w-3" />
-        Discard
-      </button>
-    </div>
-  );
-}
-
-// ─── Sub-components ─────────────────────────────────────
-
-interface ToolButtonProps {
-  icon: React.ComponentType<{ className?: string }>;
-  label?: string;
-  onClick: () => void;
-  disabled?: boolean;
-  color?: 'blue' | 'default';
-}
-
-function ToolButton({ icon: Icon, label, onClick, disabled, color }: ToolButtonProps) {
-  const isBlue = color === 'blue';
-  return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className="flex items-center gap-1 rounded px-2 py-1.5 text-[10px] font-medium transition-colors disabled:opacity-30"
-      style={{
-        color: isBlue ? '#3b82f6' : '#a1a1aa',
-        backgroundColor: 'transparent',
-      }}
-      onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = isBlue ? '#3b82f615' : '#27272a'; }}
-      onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
-    >
-      <Icon className="h-3.5 w-3.5" />
-      {label}
-    </button>
-  );
-}
-
-function Divider() {
-  return <div className="h-4 w-px bg-zinc-800" />;
-}

package/src/components/workflow/HookDetailPanel.tsx

@@ -1,250 +0,0 @@
-import { useMemo } from 'react';
-import {
-  X, ArrowRight, Shield, Terminal, Radio, Globe, Bot,
-  ShieldCheck, AlertTriangle, Cog, Eye, FileCode2, ExternalLink,
-} from 'lucide-react';
-import type {
-  WorkflowEdge, HookCategory, HookEnforcement, UnifiedHook, CcTrigger,
-} from '../../../shared/workflow-config';
-import { getHookEnforcement } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────
-
-interface HookDetailPanelProps {
-  hook: UnifiedHook | null;
-  edges: WorkflowEdge[];
-  onClose: () => void;
-  onViewSource: (hook: UnifiedHook) => void;
-  onNavigateToEdge?: (from: string, to: string) => void;
-}
-
-// ─── Constants ──────────────────────────────────────────
-
-const CATEGORY_CONFIG: Record<HookCategory, { icon: typeof Shield; color: string; label: string }> = {
-  guard: { icon: ShieldCheck, color: '#ef4444', label: 'Guard' },
-  gate: { icon: AlertTriangle, color: '#f59e0b', label: 'Gate' },
-  lifecycle: { icon: Cog, color: '#3b82f6', label: 'Lifecycle' },
-  observer: { icon: Eye, color: '#6b7280', label: 'Observer' },
-};
-
-const ENFORCEMENT_CONFIG: Record<HookEnforcement, { color: string; description: string }> = {
-  blocker: { color: '#ef4444', description: 'Blocks transition on failure' },
-  advisor: { color: '#f59e0b', description: 'Warns but allows transition' },
-  operator: { color: '#3b82f6', description: 'Side-effects during lifecycle' },
-  silent: { color: '#6b7280', description: 'Observes without affecting outcome' },
-};
-
-const TIMING_COLORS: Record<string, string> = { before: '#eab308', after: '#3b82f6' };
-const TYPE_ICONS: Record<string, typeof Terminal> = { shell: Terminal, event: Radio, webhook: Globe };
-const TYPE_COLORS: Record<string, string> = { shell: '#22c55e', event: '#a855f7', webhook: '#f97316' };
-const DIRECTION_COLORS: Record<string, string> = { forward: '#22c55e', backward: '#f59e0b', shortcut: '#6366f1' };
-
-const SOURCE_CONFIG: Record<string, { label: string; color: string }> = {
-  workflow: { label: 'Workflow', color: '#f97316' },
-  'claude-code': { label: 'Claude Code', color: '#10b981' },
-  both: { label: 'Both', color: '#8b5cf6' },
-};
-
-const CC_EVENT_COLORS: Record<string, string> = {
-  SessionStart: '#22c55e',
-  SessionEnd: '#ef4444',
-  PreToolUse: '#eab308',
-  PostToolUse: '#3b82f6',
-};
-
-// ─── Component ──────────────────────────────────────────
-
-export function HookDetailPanel({ hook, edges, onClose, onViewSource, onNavigateToEdge }: HookDetailPanelProps) {
-  const attachedEdges = useMemo(() => {
-    if (!hook?.workflow) return [];
-    return edges.filter((e) => (e.hooks ?? []).includes(hook.id));
-  }, [hook, edges]);
-
-  if (!hook) return null;
-
-  const hasWorkflow = !!hook.workflow;
-  const hasCc = !!hook.ccTriggers?.length;
-  const srcConfig = SOURCE_CONFIG[hook.source];
-  const catConfig = hasWorkflow ? CATEGORY_CONFIG[hook.workflow!.category] : null;
-  const CatIcon = catConfig?.icon ?? Bot;
-  const catColor = catConfig?.color ?? '#10b981';
-  const enforcement = hasWorkflow
-    ? getHookEnforcement({ category: hook.workflow!.category } as Parameters<typeof getHookEnforcement>[0])
-    : null;
-  const enforcementConfig = enforcement ? ENFORCEMENT_CONFIG[enforcement] : null;
-  const TypeIcon = hasWorkflow ? (TYPE_ICONS[hook.workflow!.type] ?? Terminal) : Bot;
-
-  return (
-    <div className="flex h-full w-96 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 min-w-0">
-          <CatIcon className="h-4 w-4 shrink-0" style={{ color: catColor }} />
-          <span className="text-sm font-medium text-zinc-200 truncate">{hook.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">
-        {/* Source badge */}
-        <div className="flex flex-wrap items-center gap-2">
-          <span
-            className="rounded px-2 py-0.5 text-[10px] font-bold uppercase"
-            style={{ backgroundColor: `${srcConfig.color}20`, color: srcConfig.color }}
-          >
-            {srcConfig.label}
-          </span>
-          {hasWorkflow && enforcement && enforcementConfig && (
-            <span
-              className="rounded px-2 py-0.5 text-[10px] font-bold uppercase"
-              style={{ backgroundColor: `${enforcementConfig.color}20`, color: enforcementConfig.color }}
-            >
-              {enforcement}
-            </span>
-          )}
-          {hasWorkflow && hook.workflow!.blocking && (
-            <span className="flex items-center gap-1 rounded bg-red-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase text-red-400">
-              <Shield className="h-2.5 w-2.5" />
-              Blocking
-            </span>
-          )}
-        </div>
-
-        {/* Workflow Properties */}
-        {hasWorkflow && (
-          <Section title="Workflow Properties">
-            <PropRow label="Timing" value={hook.workflow!.timing} color={TIMING_COLORS[hook.workflow!.timing]} />
-            <PropRow label="Type" value={hook.workflow!.type} color={TYPE_COLORS[hook.workflow!.type]} />
-            <PropRow label="Category" value={hook.workflow!.category} color={catColor} />
-            <PropRow label="Blocking" value={hook.workflow!.blocking ? 'Yes' : 'No'} color={hook.workflow!.blocking ? '#ef4444' : '#6b7280'} />
-          </Section>
-        )}
-
-        {/* Enforcement derivation */}
-        {hasWorkflow && enforcement && enforcementConfig && (
-          <Section title="Enforcement">
-            <p className="text-zinc-500">{enforcementConfig.description}</p>
-            <p className="mt-1 text-[10px] text-zinc-600">
-              {hook.workflow!.category} <span className="text-zinc-700">&rarr;</span>{' '}
-              <span style={{ color: enforcementConfig.color }}>{enforcement}</span>
-            </p>
-          </Section>
-        )}
-
-        {/* Description */}
-        {hasWorkflow && hook.workflow!.description && (
-          <Section title="Description">
-            <p className="text-zinc-400 leading-relaxed">{hook.workflow!.description}</p>
-          </Section>
-        )}
-
-        {/* Script Path */}
-        <Section title="Script Path">
-          <div className="flex items-center gap-2 rounded border border-zinc-800 bg-zinc-950 px-3 py-2 font-mono text-[11px] text-emerald-400">
-            <TypeIcon className="h-3.5 w-3.5 shrink-0 text-zinc-600" />
-            <span className="truncate">{hook.scriptPath}</span>
-          </div>
-        </Section>
-
-        {/* CC Triggers */}
-        {hasCc && (
-          <Section title={`Claude Code Triggers (${hook.ccTriggers!.length})`}>
-            <CCTriggerList triggers={hook.ccTriggers!} />
-          </Section>
-        )}
-
-        {/* Attached Edges */}
-        {hasWorkflow && (
-          <Section title={`Attached Edges (${attachedEdges.length})`}>
-            {attachedEdges.length === 0 ? (
-              <span className="text-zinc-600">No edges reference this hook</span>
-            ) : (
-              <div className="space-y-1.5">
-                {attachedEdges.map((e) => {
-                  const color = DIRECTION_COLORS[e.direction] ?? '#22c55e';
-                  return (
-                    <button
-                      key={`${e.from}:${e.to}`}
-                      onClick={() => onNavigateToEdge?.(e.from, e.to)}
-                      className="flex w-full items-center gap-2 rounded border border-zinc-800/50 bg-zinc-950/30 px-2 py-1.5 text-left transition-colors hover:border-zinc-700 hover:bg-zinc-900/50"
-                    >
-                      <span className="rounded px-1 py-0.5 text-[9px] uppercase" style={{ backgroundColor: `${color}20`, color }}>
-                        {e.direction}
-                      </span>
-                      <span className="text-zinc-300">{e.from}</span>
-                      <ArrowRight className="h-2.5 w-2.5 text-zinc-600" />
-                      <span className="text-zinc-300">{e.to}</span>
-                      <ExternalLink className="ml-auto h-3 w-3 text-zinc-600" />
-                    </button>
-                  );
-                })}
-              </div>
-            )}
-          </Section>
-        )}
-      </div>
-
-      {/* Footer — View Source */}
-      <div className="border-t border-zinc-800 p-3">
-        <button
-          onClick={() => onViewSource(hook)}
-          className="flex w-full items-center justify-center gap-2 rounded border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-xs text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-800"
-        >
-          <FileCode2 className="h-3.5 w-3.5" />
-          View Source Code
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Sub-components ─────────────────────────────────────
-
-function CCTriggerList({ triggers }: { triggers: CcTrigger[] }) {
-  return (
-    <div className="space-y-1.5">
-      {triggers.map((t, i) => {
-        const evColor = CC_EVENT_COLORS[t.event] ?? '#10b981';
-        return (
-          <div key={i} 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.5 py-0.5 text-[9px] font-semibold uppercase"
-              style={{ backgroundColor: `${evColor}20`, color: evColor }}
-            >
-              {t.event}
-            </span>
-            {t.matcher && (
-              <span className="rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[9px] text-zinc-400">
-                {t.matcher}
-              </span>
-            )}
-            {t.statusMessage && (
-              <span className="ml-auto truncate text-[10px] text-zinc-600">{t.statusMessage}</span>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-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>
-  );
-}
-
-function PropRow({ label, value, color }: { label: string; value: string; color?: string }) {
-  return (
-    <div className="flex items-center justify-between py-0.5">
-      <span className="text-zinc-500">{label}</span>
-      <span className="text-zinc-300" style={color ? { color } : undefined}>{value}</span>
-    </div>
-  );
-}

package/src/components/workflow/HookExecutionLog.tsx

@@ -1,24 +0,0 @@
-import { Zap, Clock } from 'lucide-react';
-
-// ─── Component ──────────────────────────────────────────
-// Placeholder for hook execution history.
-// The CC events system does not yet track hook executions,
-// so this component shows a "no data" state.
-// When hook execution tracking is added (scope 079+),
-// this will subscribe to Socket.io events and display live data.
-
-export function HookExecutionLog() {
-  return (
-    <div className="flex flex-col items-center gap-3 rounded-lg border border-zinc-800 bg-zinc-950/50 p-8 text-center">
-      <div className="flex items-center gap-2 text-zinc-600">
-        <Zap className="h-4 w-4" />
-        <Clock className="h-4 w-4" />
-      </div>
-      <span className="text-xs font-medium text-zinc-500">No hook execution data available</span>
-      <p className="max-w-xs text-[10px] text-zinc-600">
-        Hook execution tracking will be added when the Hook & Event Foundation (scope 079) is implemented.
-        This panel will show real-time hook firing events with timestamps, results, and durations.
-      </p>
-    </div>
-  );
-}

package/src/components/workflow/HookSourceModal.tsx

@@ -1,129 +0,0 @@
-import { useState, useEffect } from 'react';
-import { FileCode2, Loader2 } from 'lucide-react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import type { UnifiedHook } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────
-
-interface HookSourceModalProps {
-  hook: UnifiedHook | null;
-  open: boolean;
-  onClose: () => void;
-}
-
-interface HookSource {
-  filePath: string;
-  content: string;
-  lineCount: number;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function HookSourceModal({ hook, open, onClose }: HookSourceModalProps) {
-  const [source, setSource] = useState<HookSource | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!hook || !open) { setSource(null); setError(null); return; }
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-
-    fetch(`/api/orbital/workflow/hooks/source?path=${encodeURIComponent(hook.scriptPath)}`)
-      .then(async (res) => {
-        if (cancelled) return;
-        if (!res.ok) {
-          const body = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
-          setError(body.error ?? `Failed to load source (HTTP ${res.status})`);
-          setSource(null);
-        } else {
-          const json = await res.json() as { data: HookSource };
-          setSource(json.data);
-        }
-      })
-      .catch((err) => { if (!cancelled) setError(err instanceof Error ? err.message : 'Network error'); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-
-    return () => { cancelled = true; };
-  }, [hook?.id, hook?.scriptPath, open]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  if (!hook) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}>
-      <DialogContent className="max-w-[min(56rem,calc(100vw_-_2rem))] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden">
-        <DialogHeader className="px-4 pt-3 pb-2">
-          <div className="flex items-center gap-2 pr-8">
-            <FileCode2 className="h-4 w-4 shrink-0 text-zinc-500" />
-            <DialogTitle className="text-sm font-medium text-foreground leading-tight truncate">
-              {hook.label}
-            </DialogTitle>
-          </div>
-          <DialogDescription className="mt-1 font-mono text-[11px] text-zinc-500 truncate">
-            {hook.scriptPath}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 min-h-0 border-t border-zinc-800 bg-[#0a0a12]">
-          <ScrollArea className="h-full">
-            <div className="px-2 py-3">
-              {loading && (
-                <div className="flex items-center gap-2 px-4 py-8 text-xs text-zinc-500">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  Loading source...
-                </div>
-              )}
-              {error && (
-                <div className="px-4 py-8 text-xs text-red-400">
-                  <FileCode2 className="mb-2 h-5 w-5 text-zinc-600" />
-                  {error}
-                </div>
-              )}
-              {source && <SourceViewer content={source.content} filePath={source.filePath} />}
-              {!loading && !error && !source && (
-                <div className="px-4 py-8 text-xs text-zinc-600 italic">No source available</div>
-              )}
-            </div>
-          </ScrollArea>
-        </div>
-
-        {source && (
-          <div className="border-t border-zinc-800 px-4 py-2 text-[10px] text-zinc-600">
-            {source.lineCount} lines
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-// ─── Sub-components ─────────────────────────────────────
-
-function SourceViewer({ content, filePath }: { content: string; filePath: string }) {
-  const lines = content.split('\n');
-  const gutterWidth = String(lines.length).length;
-
-  return (
-    <div>
-      <div className="mb-2 flex items-center gap-2 rounded border border-zinc-800/50 bg-zinc-900/50 px-3 py-1.5 font-mono text-[10px] text-zinc-500">
-        <FileCode2 className="h-3 w-3 shrink-0" />
-        {filePath}
-      </div>
-      <pre className="font-mono text-[12px] leading-[1.6]">
-        {lines.map((line, i) => (
-          <div key={i} className="flex hover:bg-white/[0.02]">
-            <span
-              className="select-none text-right text-zinc-700 pr-3 shrink-0"
-              style={{ width: `${gutterWidth + 2}ch` }}
-            >
-              {i + 1}
-            </span>
-            <span className="text-zinc-300 whitespace-pre overflow-x-auto">{line || ' '}</span>
-          </div>
-        ))}
-      </pre>
-    </div>
-  );
-}