orbital-command 0.1.0

package/src/components/workflow/WorkflowEdgeComponent.tsx

@@ -0,0 +1,145 @@
+import { memo } from 'react';
+import { BaseEdge, getSmoothStepPath, EdgeLabelRenderer } from '@xyflow/react';
+import type { Edge, EdgeProps } from '@xyflow/react';
+import type { WorkflowEdge as WfEdge, HookCategory } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+export interface WorkflowEdgeData {
+  edge: WfEdge;
+  hookCount?: number;
+  hasBlockingHook?: boolean;
+  highestCategory?: HookCategory;
+  showHookOverlay?: boolean;
+  [key: string]: unknown;
+}
+
+export type WorkflowEdgeType = Edge<WorkflowEdgeData, 'workflow'>;
+
+// ─── Color maps ─────────────────────────────────────────
+
+const DIRECTION_COLORS: Record<string, string> = {
+  forward: '#22c55e',
+  backward: '#f59e0b',
+  shortcut: '#6366f1',
+};
+
+const CATEGORY_BADGE_COLORS: Record<HookCategory, { bg: string; border: string }> = {
+  guard: { bg: '#ef4444', border: '#dc2626' },
+  gate: { bg: '#f59e0b', border: '#d97706' },
+  lifecycle: { bg: '#3b82f6', border: '#2563eb' },
+  observer: { bg: '#6b7280', border: '#4b5563' },
+};
+
+// ─── Component ──────────────────────────────────────────
+
+function WorkflowEdgeRaw({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected,
+}: EdgeProps<WorkflowEdgeType>) {
+  const edge = data?.edge;
+  const hookCount = data?.hookCount ?? 0;
+  const highestCategory = data?.highestCategory;
+  const showHookOverlay = data?.showHookOverlay ?? false;
+  const color = DIRECTION_COLORS[edge?.direction ?? 'forward'] ?? '#22c55e';
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 12,
+    offset: 25,
+  });
+
+
+  // Badge colors based on highest enforcement category
+  const badgeColors = highestCategory
+    ? CATEGORY_BADGE_COLORS[highestCategory]
+    : { bg: '#3b82f6', border: '#2563eb' };
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={{
+          stroke: color,
+          strokeWidth: selected ? 2.5 : 1.5,
+          strokeDasharray: edge?.direction === 'shortcut' ? '6 4' : undefined,
+          opacity: selected ? 1 : 0.6,
+          filter: selected ? `drop-shadow(0 0 4px ${color}80)` : undefined,
+        }}
+      />
+
+      {/* Glow filter for animated dot */}
+      <defs>
+        <filter id={`glow-${id}`} x="-100%" y="-100%" width="300%" height="300%">
+          <feGaussianBlur stdDeviation="5" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="blur" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Pulsing glow layer (behind) */}
+      <circle fill={color} filter={`url(#glow-${id})`} opacity={0.35}>
+        <animate attributeName="r" values="3;7;3" dur="1.5s" repeatCount="indefinite" />
+        <animateMotion dur="3s" repeatCount="indefinite" path={edgePath} />
+      </circle>
+
+      {/* Solid dot (on top) */}
+      <circle r="2.5" fill={color} opacity={1}>
+        <animateMotion dur="3s" repeatCount="indefinite" path={edgePath} />
+      </circle>
+
+      {/* Label */}
+      <EdgeLabelRenderer>
+        <div
+          className="nodrag nopan pointer-events-auto cursor-pointer rounded px-1.5 py-0.5 text-[9px] font-medium transition-opacity"
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            color,
+            backgroundColor: 'rgb(9 9 11 / 0.85)',
+            border: `1px solid ${color}33`,
+            opacity: selected ? 1 : 0,
+          }}
+        >
+          {edge?.label ?? ''}
+        </div>
+
+        {/* Hook count badge */}
+        {showHookOverlay && hookCount > 0 && (
+          <div
+            className="nodrag nopan pointer-events-none flex items-center justify-center rounded-full text-[8px] font-bold"
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -120%) translate(${labelX}px,${labelY}px)`,
+              width: 18,
+              height: 18,
+              backgroundColor: badgeColors.bg,
+              color: '#fff',
+              border: `2px solid ${badgeColors.border}`,
+              boxShadow: `0 0 6px ${badgeColors.bg}80`,
+            }}
+          >
+            {hookCount}
+          </div>
+        )}
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+export const WorkflowEdgeComponent = memo(WorkflowEdgeRaw);

package/src/components/workflow/WorkflowNode.tsx

@@ -0,0 +1,147 @@
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { Node, NodeProps } from '@xyflow/react';
+import type { WorkflowList } from '../../../shared/workflow-config';
+import { Star, Package, Zap } from 'lucide-react';
+
+// ─── Types ──────────────────────────────────────────────
+
+export interface WorkflowNodeData {
+  list: WorkflowList;
+  scopeCount: number;
+  activeHandles?: Map<string, string>;
+  [key: string]: unknown;
+}
+
+export type WorkflowNodeType = Node<WorkflowNodeData, 'workflow'>;
+
+// ─── Component ──────────────────────────────────────────
+
+function WorkflowNodeComponent({ data, selected }: NodeProps<WorkflowNodeType>) {
+  const { list, scopeCount, activeHandles } = data;
+  const has = (id: string) => !activeHandles || activeHandles.has(id);
+  const handleColor = (id: string) => activeHandles?.get(id) ?? list.hex;
+
+  return (
+    <div
+      className="group relative rounded-lg border px-4 py-3 transition-all duration-200"
+      style={{
+        borderColor: selected ? list.hex : `${list.hex}66`,
+        backgroundColor: `${list.hex}12`,
+        boxShadow: selected ? `0 0 16px ${list.hex}40` : 'none',
+        minWidth: 180,
+      }}
+    >
+      {/* ── Target Handles (incoming) ── */}
+
+      {has('left') && (
+        <Handle
+          type="target"
+          id="left"
+          position={Position.Left}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('left') }}
+        />
+      )}
+
+      {has('top') && (
+        <Handle
+          type="target"
+          id="top"
+          position={Position.Top}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('top'), left: '35%' }}
+        />
+      )}
+
+      {has('bottom-in') && (
+        <Handle
+          type="target"
+          id="bottom-in"
+          position={Position.Bottom}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('bottom-in'), left: '65%' }}
+        />
+      )}
+
+      {/* Header row */}
+      <div className="flex items-center gap-2">
+        {list.isEntryPoint && (
+          <Star className="h-3.5 w-3.5 shrink-0 fill-current" style={{ color: list.hex }} />
+        )}
+        <span className="text-sm font-medium text-foreground">{list.label}</span>
+        {scopeCount > 0 && (
+          <span
+            className="ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
+            style={{
+              backgroundColor: `${list.hex}25`,
+              color: list.hex,
+            }}
+          >
+            {scopeCount}
+          </span>
+        )}
+      </div>
+
+      {/* Badge row — always rendered to keep all nodes the same height */}
+      <div className="mt-1.5 flex items-center gap-1.5" style={{ minHeight: 18 }}>
+        {list.supportsBatch && (
+          <span className="flex items-center gap-0.5 rounded bg-zinc-800/60 px-1.5 py-0.5 text-[9px] text-zinc-400">
+            <Package className="h-2.5 w-2.5" />
+            batch
+          </span>
+        )}
+        {list.supportsSprint && (
+          <span className="flex items-center gap-0.5 rounded bg-zinc-800/60 px-1.5 py-0.5 text-[9px] text-zinc-400">
+            <Zap className="h-2.5 w-2.5" />
+            sprint
+          </span>
+        )}
+      </div>
+
+      {/* ── Source Handles (outgoing) ── */}
+
+      {has('top-out') && (
+        <Handle
+          type="source"
+          id="top-out"
+          position={Position.Top}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('top-out'), left: '65%' }}
+        />
+      )}
+
+      {has('right') && (
+        <Handle
+          type="source"
+          id="right"
+          position={Position.Right}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('right') }}
+        />
+      )}
+
+      {has('bottom-fwd') && (
+        <Handle
+          type="source"
+          id="bottom-fwd"
+          position={Position.Bottom}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('bottom-fwd'), left: '65%' }}
+        />
+      )}
+
+      {has('bottom') && (
+        <Handle
+          type="source"
+          id="bottom"
+          position={Position.Bottom}
+          className="!h-2.5 !w-2.5 !border-2 !border-zinc-800"
+          style={{ backgroundColor: handleColor('bottom'), left: '35%' }}
+        />
+      )}
+    </div>
+  );
+}
+
+export const WorkflowNode = memo(WorkflowNodeComponent);

package/src/components/workflow/graphLayout.ts

@@ -0,0 +1,186 @@
+import type { WorkflowList, WorkflowEdge, WorkflowHook, ListGroup, HookCategory } from '../../../shared/workflow-config';
+import type { WorkflowNodeType, WorkflowNodeData } from './WorkflowNode';
+import type { WorkflowEdgeType, WorkflowEdgeData } from './WorkflowEdgeComponent';
+
+// ─── Constants ──────────────────────────────────────────
+
+const NODE_X_GAP = 260;        // horizontal gap between nodes in a row
+const STAIRCASE_INDENT = 230;  // horizontal offset per previous-group node (multi-node groups)
+const SOLO_GROUP_INDENT = 160;  // horizontal offset for single-node groups
+const ROW_Y_GAP = 140;        // vertical gap between rows
+const MARGIN = 16;             // canvas margin
+
+// ─── Cascading Staircase Layout ─────────────────────────
+
+export function computeLayout(
+  lists: WorkflowList[],
+  groups: ListGroup[],
+  scopeCounts: Map<string, number>,
+  _edges: WorkflowEdge[],
+): WorkflowNodeType[] {
+  // Build group lookup: groupId -> sorted ListGroup
+  const sortedGroups = [...groups].sort((a, b) => a.order - b.order);
+  const groupOrder = new Map(sortedGroups.map((g, i) => [g.id, i]));
+
+  // Bucket lists into groups (preserve list order within each group)
+  const buckets = new Map<string, WorkflowList[]>();
+  for (const g of sortedGroups) buckets.set(g.id, []);
+  const ungrouped: WorkflowList[] = [];
+
+  for (const list of lists) {
+    if (list.group && buckets.has(list.group)) {
+      buckets.get(list.group)!.push(list);
+    } else {
+      ungrouped.push(list);
+    }
+  }
+
+  // Compute starting x offset for each group (cascading staircase)
+  // Multi-node groups use STAIRCASE_INDENT per node, single-node groups use SOLO_GROUP_INDENT
+  const groupStartX = new Map<string, number>();
+  let xOffset = 0;
+  for (const g of sortedGroups) {
+    groupStartX.set(g.id, xOffset);
+    const size = buckets.get(g.id)!.length;
+    xOffset += size === 1
+      ? SOLO_GROUP_INDENT
+      : size * STAIRCASE_INDENT;
+  }
+
+  // Position nodes
+  const positioned: WorkflowNodeType[] = [];
+
+  for (const g of sortedGroups) {
+    const row = groupOrder.get(g.id)!;
+    const startX = groupStartX.get(g.id)!;
+    const groupLists = buckets.get(g.id)!;
+
+    for (let i = 0; i < groupLists.length; i++) {
+      const list = groupLists[i];
+      positioned.push({
+        id: list.id,
+        type: 'workflow' as const,
+        position: {
+          x: MARGIN + startX + i * NODE_X_GAP,
+          y: MARGIN + row * ROW_Y_GAP,
+        },
+        data: { list, scopeCount: scopeCounts.get(list.id) ?? 0 } satisfies WorkflowNodeData,
+      });
+    }
+  }
+
+  // Ungrouped nodes go in an extra row at the bottom
+  if (ungrouped.length > 0) {
+    const extraRow = sortedGroups.length;
+    for (let i = 0; i < ungrouped.length; i++) {
+      const list = ungrouped[i];
+      positioned.push({
+        id: list.id,
+        type: 'workflow' as const,
+        position: {
+          x: MARGIN + i * NODE_X_GAP,
+          y: MARGIN + extraRow * ROW_Y_GAP,
+        },
+        data: { list, scopeCount: scopeCounts.get(list.id) ?? 0 } satisfies WorkflowNodeData,
+      });
+    }
+  }
+
+  return positioned;
+}
+
+// ─── Edges ──────────────────────────────────────────────
+
+export function computeEdges(
+  edges: WorkflowEdge[],
+  lists: WorkflowList[],
+  allHooks: WorkflowHook[],
+  showHookOverlay: boolean,
+): WorkflowEdgeType[] {
+  const hookMap = new Map(allHooks.map((h) => [h.id, h]));
+  const listMap = new Map(lists.map((l) => [l.id, l]));
+  const categoryPriority: HookCategory[] = ['guard', 'gate', 'lifecycle', 'observer'];
+
+  return edges.map((edge) => {
+    const edgeHookIds = edge.hooks ?? [];
+    const edgeHooks = edgeHookIds.map((id) => hookMap.get(id)).filter((h): h is WorkflowHook => h !== undefined);
+    const highestCategory = categoryPriority.find((cat) => edgeHooks.some((h) => h.category === cat));
+
+    const sourceList = listMap.get(edge.from);
+    const targetList = listMap.get(edge.to);
+    const sameGroup = sourceList?.group != null && sourceList.group === targetList?.group;
+
+    const { sourceHandle, targetHandle } = pickHandles(edge.direction, sameGroup);
+
+    return {
+      id: `${edge.from}:${edge.to}`,
+      source: edge.from,
+      target: edge.to,
+      sourceHandle,
+      targetHandle,
+      type: 'workflow',
+      data: {
+        edge,
+        hookCount: edgeHookIds.length,
+        hasBlockingHook: edgeHooks.some((h) => h.blocking === true),
+        highestCategory,
+        showHookOverlay,
+      } satisfies WorkflowEdgeData,
+    };
+  });
+}
+
+// ─── Handle Selection ───────────────────────────────────
+
+// ─── Active Handles ─────────────────────────────────────
+
+const DIRECTION_COLORS: Record<string, string> = {
+  forward: '#22c55e',
+  backward: '#f59e0b',
+  shortcut: '#6366f1',
+};
+
+/** Returns nodeId → Map<handleId, edgeColor> */
+export function computeActiveHandles(
+  edges: WorkflowEdge[],
+  lists: WorkflowList[],
+): Map<string, Map<string, string>> {
+  const listMap = new Map(lists.map((l) => [l.id, l]));
+  const result = new Map<string, Map<string, string>>();
+
+  for (const edge of edges) {
+    const sourceList = listMap.get(edge.from);
+    const targetList = listMap.get(edge.to);
+    const sameGroup = sourceList?.group != null && sourceList.group === targetList?.group;
+    const { sourceHandle, targetHandle } = pickHandles(edge.direction, sameGroup);
+    const color = DIRECTION_COLORS[edge.direction] ?? '#22c55e';
+
+    if (!result.has(edge.from)) result.set(edge.from, new Map());
+    if (!result.has(edge.to)) result.set(edge.to, new Map());
+    result.get(edge.from)!.set(sourceHandle, color);
+    result.get(edge.to)!.set(targetHandle, color);
+  }
+
+  return result;
+}
+
+// ─── Handle Selection ───────────────────────────────────
+
+function pickHandles(
+  direction: WorkflowEdge['direction'],
+  sameGroup: boolean,
+): { sourceHandle: string; targetHandle: string } {
+  if (direction === 'backward') {
+    return { sourceHandle: 'bottom', targetHandle: 'bottom-in' };
+  }
+
+  if (direction === 'shortcut') {
+    // Rise above the row to skip intermediate nodes
+    return { sourceHandle: 'top-out', targetHandle: 'top' };
+  }
+
+  // forward
+  return sameGroup
+    ? { sourceHandle: 'right', targetHandle: 'left' }      // horizontal within row
+    : { sourceHandle: 'bottom-fwd', targetHandle: 'left' };  // cross-group: exits bottom-right, enters left
+}

package/src/components/workflow/mergeHooks.ts

@@ -0,0 +1,85 @@
+import type {
+  WorkflowHook,
+  CcHookParsed,
+  UnifiedHook,
+  CcTrigger,
+} from '../../../shared/workflow-config';
+
+/** Normalize script paths for comparison: strip "$CLAUDE_PROJECT_DIR"/ and leading ./ */
+function normalizePath(p: string): string {
+  return p
+    .replace(/^"?\$CLAUDE_PROJECT_DIR"?\/?/, '')
+    .replace(/^\.\//, '');
+}
+
+/** Convert filename to a human-readable label: "init-session.sh" → "Init Session" */
+function labelFromFilename(filename: string): string {
+  return filename
+    .replace(/\.[^.]+$/, '')
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+/**
+ * Merge workflow hooks and CC hooks into a unified list.
+ * Hooks sharing the same script path are combined with source='both'.
+ */
+export function mergeHooks(
+  workflowHooks: WorkflowHook[],
+  ccHooks: CcHookParsed[],
+): UnifiedHook[] {
+  const byPath = new Map<string, UnifiedHook>();
+
+  // 1. Index workflow hooks by normalized target path
+  for (const wh of workflowHooks) {
+    const key = normalizePath(wh.target);
+    byPath.set(key, {
+      id: wh.id,
+      label: wh.label,
+      scriptPath: key,
+      source: 'workflow',
+      workflow: {
+        timing: wh.timing,
+        type: wh.type,
+        category: wh.category,
+        blocking: wh.blocking ?? false,
+        description: wh.description,
+      },
+    });
+  }
+
+  // 2. Merge CC hooks — match by normalized path
+  for (const cc of ccHooks) {
+    const key = normalizePath(cc.scriptPath);
+    const trigger: CcTrigger = {
+      event: cc.event,
+      matcher: cc.matcher,
+      statusMessage: cc.statusMessage,
+    };
+
+    const existing = byPath.get(key);
+    if (existing) {
+      existing.source = 'both';
+      if (!existing.ccTriggers) existing.ccTriggers = [];
+      existing.ccTriggers.push(trigger);
+    } else {
+      // Check if we already created a CC-only entry for this script
+      const ccKey = key;
+      const prev = byPath.get(ccKey);
+      if (prev) {
+        prev.ccTriggers!.push(trigger);
+      } else {
+        byPath.set(ccKey, {
+          id: cc.id,
+          label: labelFromFilename(cc.scriptName),
+          scriptPath: key,
+          source: 'claude-code',
+          ccTriggers: [trigger],
+        });
+      }
+    }
+  }
+
+  return Array.from(byPath.values());
+}

package/src/components/workflow/useEditHistory.ts

@@ -0,0 +1,88 @@
+import { useState, useCallback, useMemo } from 'react';
+import type { WorkflowConfig } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface EditHistoryState {
+  past: WorkflowConfig[];
+  present: WorkflowConfig;
+  future: WorkflowConfig[];
+}
+
+interface EditHistoryActions {
+  present: WorkflowConfig;
+  canUndo: boolean;
+  canRedo: boolean;
+  changeCount: number;
+  pushState: (config: WorkflowConfig) => void;
+  undo: () => void;
+  redo: () => void;
+  reset: (config: WorkflowConfig) => void;
+}
+
+const MAX_HISTORY = 50;
+
+// ─── Hook ───────────────────────────────────────────────
+
+export function useEditHistory(initialConfig: WorkflowConfig): EditHistoryActions {
+  const [state, setState] = useState<EditHistoryState>({
+    past: [],
+    present: structuredClone(initialConfig),
+    future: [],
+  });
+
+  const pushState = useCallback((config: WorkflowConfig) => {
+    setState((prev) => ({
+      past: [...prev.past, prev.present].slice(-MAX_HISTORY),
+      present: config,
+      future: [],
+    }));
+  }, []);
+
+  const undo = useCallback(() => {
+    setState((prev) => {
+      if (prev.past.length === 0) return prev;
+      const newPast = [...prev.past];
+      const previous = newPast.pop()!;
+      return {
+        past: newPast,
+        present: previous,
+        future: [prev.present, ...prev.future],
+      };
+    });
+  }, []);
+
+  const redo = useCallback(() => {
+    setState((prev) => {
+      if (prev.future.length === 0) return prev;
+      const newFuture = [...prev.future];
+      const next = newFuture.shift()!;
+      return {
+        past: [...prev.past, prev.present],
+        present: next,
+        future: newFuture,
+      };
+    });
+  }, []);
+
+  const reset = useCallback((config: WorkflowConfig) => {
+    setState({
+      past: [],
+      present: structuredClone(config),
+      future: [],
+    });
+  }, []);
+
+  const changeCount = useMemo(() => state.past.length, [state.past.length]);
+
+  return {
+    present: state.present,
+    canUndo: state.past.length > 0,
+    canRedo: state.future.length > 0,
+    changeCount,
+    pushState,
+    undo,
+    redo,
+    reset,
+  };
+}