orbital-command 0.1.0

package/src/components/config/StageCard.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { ChevronDown, ChevronRight, Star, Zap, Bot, GitBranch, Layers, Timer } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { HookChip } from './HookChip';
+import { AgentChip } from './AgentChip';
+import { cn } from '@/lib/utils';
+import type { StageData, ConfigPrimitiveType, ResolvedHook } from '@/types';
+
+/** Wraps a HookChip to make it draggable out of the pipeline */
+function DraggableHookChip({ hook, dragId, selected, onClick, onRemove, editable }: {
+  hook: ResolvedHook;
+  dragId: string;
+  selected?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  editable?: boolean;
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: dragId,
+    disabled: !editable,
+    data: { hookId: hook.id },
+  });
+
+  return (
+    <div ref={setNodeRef} className={cn('cursor-pointer', isDragging && 'opacity-40')} onClick={onClick} {...listeners} {...attributes}>
+      <HookChip hook={hook} selected={selected} onRemove={onRemove} />
+    </div>
+  );
+}
+
+interface StageCardProps {
+  stage: StageData;
+  selectedPath: string | null;
+  onSelectItem: (type: ConfigPrimitiveType, path: string) => void;
+  editable?: boolean;
+  onRemoveHook?: (listId: string, hookId: string) => void;
+}
+
+export function StageCard({ stage, selectedPath, onSelectItem, editable, onRemoveHook }: StageCardProps) {
+  const { list, stageHooks, alwaysOnAgents, reviewTeams } = stage;
+  const [hooksOpen, setHooksOpen] = useState(true);
+  const [agentsOpen, setAgentsOpen] = useState(true);
+
+  const hasHooks = stageHooks.length > 0;
+  const hasAgents = alwaysOnAgents.length > 0 || reviewTeams.length > 0;
+  const showHooksSection = hasHooks || editable;
+
+  const dropId = `drop::stage-hooks::${list.id}`;
+  const { setNodeRef, isOver } = useDroppable({ id: dropId, disabled: !editable });
+
+  return (
+    <Card className="overflow-hidden border-border/60">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2">
+        <div
+          className="h-3 w-3 shrink-0 rounded-full"
+          style={{ backgroundColor: list.hex }}
+        />
+        <span className="text-xs font-semibold text-foreground uppercase tracking-wide">
+          {list.label}
+        </span>
+        <span className="text-[10px] text-muted-foreground/40 font-mono">{list.id}</span>
+
+        <div className="ml-auto flex items-center gap-1">
+          {list.isEntryPoint && (
+            <Badge variant="outline" className="text-[9px] gap-0.5 px-1 py-0 border-amber-500/30 text-amber-400">
+              <Star className="h-2.5 w-2.5" /> entry
+            </Badge>
+          )}
+          {list.gitBranch && (
+            <Badge variant="outline" className="text-[9px] gap-0.5 px-1 py-0 border-green-500/30 text-green-400">
+              <GitBranch className="h-2.5 w-2.5" /> {list.gitBranch}
+            </Badge>
+          )}
+          {list.supportsBatch && (
+            <Badge variant="outline" className="text-[9px] gap-0.5 px-1 py-0 border-cyan-500/30 text-cyan-400">
+              <Layers className="h-2.5 w-2.5" /> batch
+            </Badge>
+          )}
+          {list.supportsSprint && (
+            <Badge variant="outline" className="text-[9px] gap-0.5 px-1 py-0 border-indigo-500/30 text-indigo-400">
+              <Timer className="h-2.5 w-2.5" /> sprint
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Stage Hooks */}
+      {showHooksSection && (
+        <div className="border-t border-border/40">
+          <button
+            type="button"
+            onClick={() => setHooksOpen(!hooksOpen)}
+            className="flex w-full items-center gap-1.5 px-3 py-1.5 text-[10px] font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {hooksOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+            <Zap className="h-3 w-3" />
+            Stage Hooks
+            <span className="text-muted-foreground/50">({stageHooks.length})</span>
+          </button>
+          {hooksOpen && (
+            <div
+              ref={setNodeRef}
+              className={cn(
+                'flex flex-wrap gap-1 px-3 pb-2 min-h-[28px]',
+                editable && 'border border-dashed border-transparent rounded-md mx-2 mb-1 p-1',
+                isOver && 'border-accent-blue bg-accent-blue/10',
+              )}
+            >
+              {stageHooks.map(hook => (
+                <DraggableHookChip
+                  key={hook.id}
+                  hook={hook}
+                  dragId={`pipeline::stage-hook::${list.id}::${hook.id}`}
+                  selected={hook.filePath != null && hook.filePath === selectedPath}
+                  onClick={() => hook.filePath && onSelectItem('hooks', hook.filePath)}
+                  onRemove={editable && onRemoveHook ? () => onRemoveHook(list.id, hook.id) : undefined}
+                  editable={editable}
+                />
+              ))}
+              {editable && stageHooks.length === 0 && (
+                <span className="text-[9px] text-muted-foreground/40 italic py-0.5">drop hooks here</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Agents */}
+      {hasAgents && (
+        <div className="border-t border-border/40">
+          <button
+            type="button"
+            onClick={() => setAgentsOpen(!agentsOpen)}
+            className="flex w-full items-center gap-1.5 px-3 py-1.5 text-[10px] font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {agentsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+            <Bot className="h-3 w-3" />
+            Agents
+            <span className="text-muted-foreground/50">
+              ({alwaysOnAgents.length + reviewTeams.reduce((s, t) => s + t.agents.length, 0)})
+            </span>
+          </button>
+          {agentsOpen && (
+            <div className="px-3 pb-2 space-y-2">
+              {/* Always-On */}
+              {alwaysOnAgents.length > 0 && (
+                <div>
+                  <div className="text-[9px] uppercase tracking-wider text-muted-foreground/50 mb-1">Always-On</div>
+                  <div className="flex flex-wrap gap-1">
+                    {alwaysOnAgents.map(agent => (
+                      <AgentChip
+                        key={agent.id}
+                        agent={agent}
+                        mode="always-on"
+                        selected={agent.filePath != null && agent.filePath === selectedPath}
+                        onClick={() => agent.filePath && onSelectItem('agents', agent.filePath)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Review Teams */}
+              {reviewTeams.map(team => (
+                <div key={team.skillCommand}>
+                  <div className="flex items-center gap-1 text-[9px] uppercase tracking-wider text-muted-foreground/50 mb-1">
+                    <span>{team.skillCommand} team:</span>
+                  </div>
+                  <div className="flex flex-wrap gap-1">
+                    {team.agents.map(agent => (
+                      <AgentChip
+                        key={agent.id}
+                        agent={agent}
+                        mode="review"
+                        selected={agent.filePath != null && agent.filePath === selectedPath}
+                        onClick={() => agent.filePath && onSelectItem('agents', agent.filePath)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!showHooksSection && !hasAgents && (
+        <div className="border-t border-border/40 px-3 py-2">
+          <span className="text-[10px] text-muted-foreground/40 italic">No stage-specific hooks or agents</span>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/components/config/TransitionZone.tsx

@@ -0,0 +1,173 @@
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { ArrowDown, Terminal, Zap } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { HookChip } from './HookChip';
+import type { EdgeData, ConfigPrimitiveType, ResolvedHook } from '@/types';
+
+/** Wraps a HookChip to make it draggable out of the pipeline */
+function DraggableHookChip({ hook, dragId, selected, onClick, onRemove, editable }: {
+  hook: ResolvedHook;
+  dragId: string;
+  selected?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  editable?: boolean;
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: dragId,
+    disabled: !editable,
+    data: { hookId: hook.id },
+  });
+
+  return (
+    <div ref={setNodeRef} className={cn('cursor-pointer', isDragging && 'opacity-40')} onClick={onClick} {...listeners} {...attributes}>
+      <HookChip hook={hook} selected={selected} onRemove={onRemove} />
+    </div>
+  );
+}
+
+interface TransitionZoneProps {
+  edges: EdgeData[];
+  selectedPath: string | null;
+  onSelectItem: (type: ConfigPrimitiveType, path: string) => void;
+  editable?: boolean;
+  onRemoveHook?: (from: string, to: string, hookId: string) => void;
+}
+
+const DIRECTION_STYLE: Record<string, { arrow: string; label: string; border: string; bg: string }> = {
+  forward:  { arrow: 'text-green-500',  label: 'text-green-400', border: 'border-green-500/20', bg: 'bg-green-500/5' },
+  backward: { arrow: 'text-amber-500',  label: 'text-amber-400', border: 'border-amber-500/20', bg: 'bg-amber-500/5' },
+  shortcut: { arrow: 'text-indigo-500', label: 'text-indigo-400', border: 'border-indigo-500/20', bg: 'bg-indigo-500/5' },
+};
+
+function EdgeRow({ edgeData, selectedPath, onSelectItem, editable, onRemoveHook }: {
+  edgeData: EdgeData;
+  selectedPath: string | null;
+  onSelectItem: (type: ConfigPrimitiveType, path: string) => void;
+  editable?: boolean;
+  onRemoveHook?: (from: string, to: string, hookId: string) => void;
+}) {
+  const { edge, skillPath, edgeHooks } = edgeData;
+  const style = DIRECTION_STYLE[edge.direction] ?? DIRECTION_STYLE.forward;
+
+  const skillDropId = `drop::edge-skill::${edge.from}:${edge.to}`;
+  const { setNodeRef: setSkillRef, isOver: isSkillOver } = useDroppable({ id: skillDropId, disabled: !editable });
+
+  const hooksDropId = `drop::edge-hooks::${edge.from}:${edge.to}`;
+  const { setNodeRef: setHooksRef, isOver: isHooksOver } = useDroppable({ id: hooksDropId, disabled: !editable });
+
+  const directionLabel = edge.direction === 'shortcut' ? 'SHORTCUT' : 'DEFAULT';
+
+  return (
+    <div className={cn(
+      'flex items-center rounded-lg border overflow-hidden',
+      style.border, 'bg-card',
+    )}>
+      {/* Direction label */}
+      <div className={cn('shrink-0 self-stretch flex items-center px-2.5', style.bg)}>
+        <span className={cn('text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap', style.label)}>
+          {directionLabel}
+        </span>
+      </div>
+
+      {/* Skill + Hooks inline */}
+      <div className="flex items-center flex-1 min-w-0 border-l" style={{ borderColor: 'inherit' }}>
+        {/* Skill */}
+        <div
+          ref={setSkillRef}
+          className={cn(
+            'flex items-center gap-1.5 px-2 py-1 shrink-0',
+            isSkillOver && 'bg-green-500/10',
+          )}
+        >
+          {edge.command ? (
+            <button
+              type="button"
+              onClick={() => skillPath && onSelectItem('skills', skillPath)}
+              data-pipeline-path={skillPath ?? undefined}
+              className={cn(
+                'inline-flex items-center gap-1 text-[11px] font-semibold transition-colors whitespace-nowrap rounded-md px-1 -mx-1',
+                style.label,
+                skillPath && 'hover:brightness-125 cursor-pointer',
+                !skillPath && 'cursor-default opacity-60',
+                skillPath != null && skillPath === selectedPath && 'glow-selected-pulse',
+              )}
+              style={skillPath != null && skillPath === selectedPath ? { '--glow-color': '#22c55eA0', '--glow-color-wide': '#22c55e40' } as React.CSSProperties : undefined}
+            >
+              <Terminal className="h-3 w-3 shrink-0" />
+              {edge.command.replace(/\s+\{.*\}$/, '')}
+            </button>
+          ) : (
+            <span className={cn(
+              'text-[10px] text-muted-foreground/40 italic whitespace-nowrap',
+              editable && 'border border-dashed border-muted-foreground/20 rounded px-1.5 py-0.5',
+            )}>
+              {editable ? 'drop skill' : 'no skill'}
+            </span>
+          )}
+        </div>
+
+        {/* Divider */}
+        <div className={cn('w-px self-stretch', style.border.replace('border-', 'bg-'))} />
+
+        {/* Hooks */}
+        <div
+          ref={setHooksRef}
+          className={cn(
+            'flex items-center gap-1 px-2 py-1 flex-1 min-w-0',
+            isHooksOver && 'bg-[#00bcd4]/10',
+          )}
+        >
+          <Zap className="h-3 w-3 shrink-0 text-muted-foreground/30" />
+          {edgeHooks.map(hook => (
+            <DraggableHookChip
+              key={hook.id}
+              hook={hook}
+              dragId={`pipeline::edge-hook::${edge.from}:${edge.to}::${hook.id}`}
+              selected={hook.filePath != null && hook.filePath === selectedPath}
+              onClick={() => hook.filePath && onSelectItem('hooks', hook.filePath)}
+              onRemove={editable && onRemoveHook ? () => onRemoveHook(edge.from, edge.to, hook.id) : undefined}
+              editable={editable}
+            />
+          ))}
+          {edgeHooks.length === 0 && (
+            <span className={cn(
+              'text-[10px] text-muted-foreground/40 italic',
+              editable && 'border border-dashed border-muted-foreground/20 rounded px-1.5 py-0.5',
+            )}>
+              {editable ? 'drop hooks' : 'none'}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TransitionZone({ edges, selectedPath, onSelectItem, editable, onRemoveHook }: TransitionZoneProps) {
+  if (edges.length === 0) return null;
+
+  const arrowStyle = DIRECTION_STYLE.forward.arrow;
+
+  return (
+    <div className="flex flex-col items-center py-1">
+      <ArrowDown className={cn('h-7 w-4', arrowStyle)} />
+
+      {/* Edge rows */}
+      <div className="flex w-full flex-wrap justify-center gap-1 px-1 my-0.5">
+        {edges.map(edgeData => (
+          <EdgeRow
+            key={`${edgeData.edge.from}:${edgeData.edge.to}`}
+            edgeData={edgeData}
+            selectedPath={selectedPath}
+            onSelectItem={onSelectItem}
+            editable={editable}
+            onRemoveHook={onRemoveHook}
+          />
+        ))}
+      </div>
+
+      <ArrowDown className={cn('h-7 w-4', arrowStyle)} />
+    </div>
+  );
+}

package/src/components/config/UnifiedWorkflowPipeline.tsx

@@ -0,0 +1,216 @@
+import { useState, useEffect } from 'react';
+import { useDraggable } from '@dnd-kit/core';
+import { ChevronDown, ChevronRight, CornerDownLeft } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { usePipelineData } from '@/hooks/usePipelineData';
+import { HookChip } from './HookChip';
+import { StageCard } from './StageCard';
+import { TransitionZone } from './TransitionZone';
+import type { ConfigPrimitiveType, ResolvedHook } from '@/types';
+import type { WorkflowConfig, WorkflowEdge } from '../../../shared/workflow-config';
+
+function DraggableHookChip({ hook, dragId, selected, onClick, onRemove, editable }: {
+  hook: ResolvedHook;
+  dragId: string;
+  selected?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  editable?: boolean;
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: dragId,
+    disabled: !editable,
+    data: { hookId: hook.id },
+  });
+
+  return (
+    <div ref={setNodeRef} className={cn('cursor-pointer', isDragging && 'opacity-40')} onClick={onClick} {...listeners} {...attributes}>
+      <HookChip hook={hook} selected={selected} onRemove={onRemove} />
+    </div>
+  );
+}
+
+interface UnifiedWorkflowPipelineProps {
+  selectedPath: string | null;
+  onSelectItem: (type: ConfigPrimitiveType, path: string) => void;
+  editConfig?: WorkflowConfig;
+  editable?: boolean;
+  onRemoveEdgeHook?: (from: string, to: string, hookId: string) => void;
+  onRemoveStageHook?: (listId: string, hookId: string) => void;
+  onRemoveGlobalHook?: (hookId: string) => void;
+}
+
+export function UnifiedWorkflowPipeline({ selectedPath, onSelectItem, editConfig, editable, onRemoveEdgeHook, onRemoveStageHook, onRemoveGlobalHook }: UnifiedWorkflowPipelineProps) {
+  const data = usePipelineData(editConfig);
+  const [reworkOpen, setReworkOpen] = useState(false);
+
+  // Scroll selected pipeline item into view
+  useEffect(() => {
+    if (!selectedPath) return;
+    requestAnimationFrame(() => {
+      const el = document.querySelector(`[data-pipeline-path="${CSS.escape(selectedPath)}"]`);
+      el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+  }, [selectedPath]);
+
+  // Collect all backward edges across stages
+  const allBackwardEdges: WorkflowEdge[] = data.stages.flatMap(s => s.backwardEdges);
+
+  // Compute stats
+  const totalHooks = new Set([
+    ...data.globalHooks.map(h => h.id),
+    ...data.stages.flatMap(s => s.stageHooks.map(h => h.id)),
+  ]).size;
+  const totalSkills = new Set(
+    data.stages.flatMap(s => s.forwardEdges.filter(e => e.edge.command).map(e => e.edge.command)),
+  ).size;
+  const totalAgents = new Set([
+    ...data.stages.flatMap(s => s.alwaysOnAgents.map(a => a.id)),
+    ...data.stages.flatMap(s => s.reviewTeams.flatMap(t => t.agents.map(a => a.id))),
+  ]).size;
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
+          Workflow Pipeline
+        </span>
+        <div className="flex items-center gap-1.5">
+          <Badge variant="secondary" className="text-[10px]">
+            {data.stages.length} stages
+          </Badge>
+          {totalSkills > 0 && (
+            <Badge variant="secondary" className="text-[10px]">
+              {totalSkills} skills
+            </Badge>
+          )}
+          {totalHooks > 0 && (
+            <Badge variant="secondary" className="text-[10px]">
+              {totalHooks} hooks
+            </Badge>
+          )}
+          {totalAgents > 0 && (
+            <Badge variant="secondary" className="text-[10px]">
+              {totalAgents} agents
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Pipeline */}
+      <ScrollArea className="flex-1">
+        <div className="p-3 space-y-0">
+          {/* Global Hooks */}
+          {data.globalHooks.length > 0 && (
+            <>
+              <Card className="overflow-hidden border-border/60">
+                <div className="flex items-center gap-2 px-3 py-2">
+                  <span className="text-sm">🌐</span>
+                  <span className="text-xs font-semibold text-foreground uppercase tracking-wide">
+                    Global Hooks
+                  </span>
+                  <span className="text-[10px] text-muted-foreground/40">active in all stages</span>
+                </div>
+                <div className="border-t border-border/40">
+                  <div className="flex flex-wrap gap-1 px-3 py-2">
+                    {data.globalHooks.map(hook => (
+                      <DraggableHookChip
+                        key={hook.id}
+                        hook={hook}
+                        dragId={`pipeline::global-hook::${hook.id}`}
+                        selected={hook.filePath != null && hook.filePath === selectedPath}
+                        onClick={() => hook.filePath && onSelectItem('hooks', hook.filePath)}
+                        onRemove={editable && onRemoveGlobalHook ? () => onRemoveGlobalHook(hook.id) : undefined}
+                        editable={editable}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </Card>
+
+              {/* Separator between global hooks and stage cards */}
+              <div className="flex items-center gap-2 py-2 px-4">
+                <div className="flex-1 border-t border-border/40" />
+                <span className="text-[9px] text-muted-foreground/30 uppercase tracking-wider">stages</span>
+                <div className="flex-1 border-t border-border/40" />
+              </div>
+            </>
+          )}
+
+          {/* Stage cards + transition zones */}
+          {data.stages.map((stage, i) => (
+            <div key={stage.list.id}>
+              <StageCard
+                stage={stage}
+                selectedPath={selectedPath}
+                onSelectItem={onSelectItem}
+                editable={editable}
+                onRemoveHook={onRemoveStageHook}
+              />
+
+              {/* Transition zone: all forward/shortcut edges in a single row */}
+              {stage.forwardEdges.length > 0 && (
+                <TransitionZone
+                  edges={stage.forwardEdges}
+                  selectedPath={selectedPath}
+                  onSelectItem={onSelectItem}
+                  editable={editable}
+                  onRemoveHook={onRemoveEdgeHook}
+                />
+              )}
+
+              {/* Spacer between stages if no edges (last stage) */}
+              {stage.forwardEdges.length === 0 && i < data.stages.length - 1 && (
+                <div className="h-2" />
+              )}
+            </div>
+          ))}
+
+          {/* Backward edges summary */}
+          {allBackwardEdges.length > 0 && (
+            <div className="mt-3 border-t border-border/30 pt-2">
+              <button
+                type="button"
+                onClick={() => setReworkOpen(!reworkOpen)}
+                className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-[10px] font-medium text-muted-foreground hover:text-foreground hover:bg-muted/30 transition-colors"
+              >
+                {reworkOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                <CornerDownLeft className="h-3 w-3" />
+                {allBackwardEdges.length} rework paths
+              </button>
+              {reworkOpen && (
+                <div className="space-y-1 px-2 pt-1">
+                  {allBackwardEdges.map(edge => (
+                    <div
+                      key={`${edge.from}:${edge.to}`}
+                      className="flex items-center gap-2 text-[10px] text-muted-foreground/70 py-0.5"
+                    >
+                      <CornerDownLeft className="h-2.5 w-2.5 text-amber-500/50" />
+                      <span className="font-mono">{edge.from}</span>
+                      <span className="text-muted-foreground/30">&rarr;</span>
+                      <span className="font-mono">{edge.to}</span>
+                      <span className="text-muted-foreground/40 truncate">{edge.label}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Footer hint */}
+          <div className="mt-4 px-2 text-center">
+            <span className="text-[9px] text-muted-foreground/30">
+              {editable
+                ? 'Drag items from the tree onto stages or edges'
+                : 'Click any hook, agent, or skill to open in editor'}
+            </span>
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}