orbital-command 0.2.0 → 0.3.0

package/src/components/config/StageCard.tsx

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

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

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