orbital-command 0.2.0 → 1.0.0

package/src/components/workflow/WorkflowEdgeComponent.tsx

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

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

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

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

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