orbital-command 0.1.0

package/src/components/SprintDependencyDialog.tsx

@@ -0,0 +1,78 @@
+import { AlertTriangle, Plus, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { formatScopeId } from '@/lib/utils';
+
+interface UnmetDep {
+  scope_id: number;
+  missing: Array<{ scope_id: number; title: string; status: string }>;
+}
+
+interface SprintDependencyDialogProps {
+  open: boolean;
+  unmetDeps: UnmetDep[];
+  onAddAll: (scopeIds: number[]) => void;
+  onCancel: () => void;
+}
+
+export function SprintDependencyDialog({ open, unmetDeps, onAddAll, onCancel }: SprintDependencyDialogProps) {
+  // Collect all unique missing scope IDs
+  const allMissing = new Map<number, { title: string; status: string }>();
+  for (const dep of unmetDeps) {
+    for (const m of dep.missing) {
+      if (!allMissing.has(m.scope_id)) {
+        allMissing.set(m.scope_id, { title: m.title, status: m.status });
+      }
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <AlertTriangle className="h-4 w-4 text-warning-amber" />
+            Unmet Dependencies
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            Some scopes you added depend on scopes not yet in this sprint.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 my-2">
+          {unmetDeps.map((dep) => (
+            <div key={dep.scope_id} className="text-xs">
+              <span className="font-mono text-muted-foreground">{formatScopeId(dep.scope_id)}</span>
+              <span className="ml-1">depends on:</span>
+              <div className="ml-4 mt-1 space-y-1">
+                {dep.missing.map((m) => (
+                  <div key={m.scope_id} className="flex items-center gap-2">
+                    <span className="font-mono text-muted-foreground">{formatScopeId(m.scope_id)}</span>
+                    <span className="truncate">{m.title}</span>
+                    <Badge variant="outline" className="text-[10px] ml-auto shrink-0">{m.status}</Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-2 border-t">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            <X className="h-3 w-3 mr-1" /> Cancel
+          </Button>
+          <Button size="sm" onClick={() => onAddAll([...allMissing.keys()])}>
+            <Plus className="h-3 w-3 mr-1" /> Add All Dependencies
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/SprintPreflightModal.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react';
+import { Play, ArrowRight, AlertTriangle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { formatScopeId } from '@/lib/utils';
+import type { Sprint } from '@/types';
+
+interface SprintPreflightModalProps {
+  open: boolean;
+  sprint: Sprint | null;
+  graph: { layers: number[][]; edges: Array<{ from: number; to: number }> } | null;
+  loading: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function SprintPreflightModal({
+  open,
+  sprint,
+  graph,
+  loading,
+  onConfirm,
+  onCancel,
+}: SprintPreflightModalProps) {
+  const [dispatching, setDispatching] = useState(false);
+
+  useEffect(() => {
+    if (open) setDispatching(false);
+  }, [open]);
+
+  if (!sprint) return null;
+
+  const scopeMap = new Map(sprint.scopes.map((s) => [s.scope_id, s]));
+  const layers = graph?.layers ?? [];
+  const totalScopes = sprint.scope_ids.length;
+
+  const handleConfirm = async () => {
+    setDispatching(true);
+    onConfirm();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Play className="h-4 w-4 text-cyan-400" />
+            Dispatch Sprint: {sprint.name}
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            {totalScopes} scope{totalScopes !== 1 ? 's' : ''} will be dispatched in{' '}
+            {layers.length} layer{layers.length !== 1 ? 's' : ''} with max{' '}
+            {sprint.concurrency_cap} concurrent agents.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Execution Graph */}
+        <div className="my-3 space-y-3 max-h-64 overflow-y-auto">
+          {layers.map((layer, idx) => (
+            <div key={idx}>
+              <div className="flex items-center gap-2 mb-1">
+                <Badge variant="outline" className="text-[10px]">Layer {idx}</Badge>
+                {idx === 0 && <span className="text-[10px] text-cyan-400">Launches first</span>}
+                {idx > 0 && (
+                  <span className="text-[10px] text-muted-foreground">
+                    Waits for Layer {idx - 1}
+                  </span>
+                )}
+              </div>
+              <div className="ml-4 space-y-1">
+                {layer.map((scopeId) => {
+                  const ss = scopeMap.get(scopeId);
+                  return (
+                    <div key={scopeId} className="flex items-center gap-2 text-xs">
+                      <span className="font-mono text-muted-foreground w-8 shrink-0">
+                        {formatScopeId(scopeId)}
+                      </span>
+                      <span className="truncate flex-1">{ss?.title ?? 'Unknown'}</span>
+                      {ss?.effort_estimate && (
+                        <span className="text-[10px] text-muted-foreground shrink-0">
+                          {ss.effort_estimate}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+              {idx < layers.length - 1 && (
+                <div className="flex justify-center my-1">
+                  <ArrowRight className="h-3 w-3 text-muted-foreground rotate-90" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Warnings */}
+        {layers.length === 0 && !loading && (
+          <div className="flex items-center gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-400">
+            <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+            Could not compute execution layers. Sprint may have issues.
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2 border-t">
+          <Button variant="ghost" size="sm" onClick={onCancel} disabled={dispatching}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleConfirm}
+            disabled={dispatching || loading || layers.length === 0}
+            className="bg-cyan-600 hover:bg-cyan-700"
+          >
+            {dispatching ? (
+              <span className="flex items-center gap-1">
+                <span className="h-3 w-3 animate-spin rounded-full border border-white border-t-transparent" />
+                Dispatching...
+              </span>
+            ) : (
+              <>
+                <Play className="h-3 w-3 mr-1" /> Dispatch Sprint
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,168 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useScopes } from '@/hooks/useScopes';
+import { useWorkflow } from '@/hooks/useWorkflow.tsx';
+import { useTheme } from '@/hooks/useTheme';
+import { formatScopeId } from '@/lib/utils';
+import { cn } from '@/lib/utils';
+import { VersionBadge } from '@/components/VersionBadge';
+import type { Scope } from '@/types';
+
+export function StatusBar() {
+  const { scopes } = useScopes();
+  const { engine } = useWorkflow();
+  const { neonGlass } = useTheme();
+  const navigate = useNavigate();
+
+  const boardColumns = useMemo(() => engine.getBoardColumns(), [engine]);
+  const entryPointId = useMemo(() => engine.getEntryPoint().id, [engine]);
+
+  const columnOrder = useMemo(() => {
+    const map = new Map<string, number>();
+    boardColumns.forEach((col, i) => map.set(col.id, i));
+    return map;
+  }, [boardColumns]);
+
+  const columnColorMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const col of boardColumns) map.set(col.id, col.color);
+    return map;
+  }, [boardColumns]);
+
+  const { inProgress, needsAttention } = useMemo(() => {
+    const prog: Scope[] = [];
+    const attn: Scope[] = [];
+
+    for (const scope of scopes) {
+      if (scope.status === entryPointId) continue;
+      if (engine.isTerminalStatus(scope.status)) continue;
+
+      if (scope.blocked_by.length > 0) {
+        attn.push(scope);
+      } else {
+        prog.push(scope);
+      }
+    }
+
+    return { inProgress: groupByStatus(prog, columnOrder), needsAttention: groupByStatus(attn, columnOrder) };
+  }, [scopes, entryPointId, engine, columnOrder]);
+
+  const handleBadgeClick = (e: React.MouseEvent, scopeId: number) => {
+    e.stopPropagation();
+    navigate(`/?highlight=${scopeId}`);
+  };
+
+  const hasScopes = inProgress.size > 0 || needsAttention.size > 0;
+
+  return (
+    <div className={cn(
+      'fixed bottom-0 left-24 right-0 z-40 border-t border-border bg-surface/95 backdrop-blur-sm',
+      neonGlass && 'ticker-glass'
+    )}>
+      <div className="flex items-center px-4 py-2">
+        {/* Scrollable scope badges */}
+        {hasScopes && (
+          <div className="flex min-w-0 flex-1 items-center gap-4 overflow-x-auto">
+            {inProgress.size > 0 && (
+              <>
+                <span className="flex-shrink-0 text-xxs uppercase tracking-wider font-normal text-muted-foreground">
+                  In Progress
+                </span>
+                <ScopeBadges groups={inProgress} colorMap={columnColorMap} onClick={handleBadgeClick} />
+              </>
+            )}
+
+            {inProgress.size > 0 && needsAttention.size > 0 && (
+              <div className="h-4 w-px flex-shrink-0 bg-border" />
+            )}
+
+            {needsAttention.size > 0 && (
+              <>
+                <span className="flex-shrink-0 text-xxs uppercase tracking-wider font-normal text-warning-amber">
+                  Needs Attention
+                </span>
+                <ScopeBadges groups={needsAttention} colorMap={columnColorMap} onClick={handleBadgeClick} />
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Spacer when no scopes */}
+        {!hasScopes && <div className="flex-1" />}
+
+        {/* Version badge — pinned right */}
+        <div className="flex-shrink-0 ml-4">
+          <VersionBadge />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ScopeBadges({
+  groups,
+  colorMap,
+  onClick,
+}: {
+  groups: Map<string, Scope[]>;
+  colorMap: Map<string, string>;
+  onClick: (e: React.MouseEvent, scopeId: number) => void;
+}) {
+  return (
+    <>
+      {Array.from(groups.entries()).map(([status, scopeList]) => {
+        const color = colorMap.get(status) ?? '220 70% 50%';
+        const hex = hslToHex(color);
+        return scopeList.map((scope) => (
+          <button
+            key={scope.id}
+            onClick={(e) => onClick(e, scope.id)}
+            className="flex flex-shrink-0 items-center gap-1.5 rounded-md border px-2 py-0.5 text-xxs transition-colors hover:brightness-125 cursor-pointer"
+            style={{
+              backgroundColor: `${hex}15`,
+              borderColor: `${hex}40`,
+            }}
+          >
+            <span
+              className="h-2 w-2 rounded-full flex-shrink-0"
+              style={{ backgroundColor: `hsl(${color})` }}
+            />
+            <span className="max-w-[120px] truncate">
+              {formatScopeId(scope.id)} {scope.title}
+            </span>
+          </button>
+        ));
+      })}
+    </>
+  );
+}
+
+function groupByStatus(scopes: Scope[], columnOrder: Map<string, number>): Map<string, Scope[]> {
+  const map = new Map<string, Scope[]>();
+  for (const scope of scopes) {
+    const list = map.get(scope.status);
+    if (list) list.push(scope);
+    else map.set(scope.status, [scope]);
+  }
+  // Sort by column order
+  return new Map(
+    Array.from(map.entries()).sort(
+      ([a], [b]) => (columnOrder.get(a) ?? 999) - (columnOrder.get(b) ?? 999)
+    )
+  );
+}
+
+function hslToHex(hsl: string): string {
+  const parts = hsl.match(/[\d.]+/g);
+  if (!parts || parts.length < 3) return '#888888';
+  const h = parseFloat(parts[0]);
+  const s = parseFloat(parts[1]) / 100;
+  const l = parseFloat(parts[2]) / 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}

package/src/components/SwimCell.tsx

@@ -0,0 +1,67 @@
+import { useDroppable } from '@dnd-kit/core';
+import type { Scope, ScopeStatus, CardDisplayConfig } from '@/types';
+import { ScopeCard } from './ScopeCard';
+import { cn } from '@/lib/utils';
+
+interface SwimCellProps {
+  laneValue: string;
+  status: ScopeStatus;
+  scopes: Scope[];
+  onScopeClick?: (scope: Scope) => void;
+  cardDisplay?: CardDisplayConfig;
+  dimmedIds?: Set<number>;
+  isDragActive: boolean;
+  isValidDrop: boolean;
+  isCollapsed: boolean;
+}
+
+export function SwimCell({
+  laneValue,
+  status,
+  scopes = [],
+  onScopeClick,
+  cardDisplay,
+  dimmedIds,
+  isDragActive,
+  isValidDrop,
+  isCollapsed,
+}: SwimCellProps) {
+  const droppableId = `swim::${laneValue}::${status}`;
+  const { setNodeRef, isOver } = useDroppable({ id: droppableId });
+
+  if (isCollapsed) return null;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'swim-cell min-h-[48px] rounded border border-white/[0.04] p-1 transition-colors',
+        isDragActive && isOver && isValidDrop && 'ring-2 ring-green-500/60 border-green-500/40 bg-green-500/5',
+        isDragActive && isOver && !isValidDrop && 'ring-2 ring-red-500/50 border-red-500/30 bg-red-500/5',
+        isDragActive && !isOver && isValidDrop && 'border-green-500/20',
+        scopes.length === 0 && 'border-dashed border-white/[0.06]',
+      )}
+    >
+      <div className="space-y-1.5">
+        {scopes.filter((s) => !s.is_ghost).map((scope) => (
+          <ScopeCard
+            key={scope.id}
+            scope={scope}
+            onClick={onScopeClick}
+            cardDisplay={cardDisplay}
+            dimmed={dimmedIds?.has(scope.id)}
+          />
+        ))}
+        {scopes.filter((s) => s.is_ghost).map((scope) => (
+          <ScopeCard
+            key={scope.id}
+            scope={scope}
+            onClick={onScopeClick}
+            cardDisplay={cardDisplay}
+            dimmed={dimmedIds?.has(scope.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/SwimLaneRow.tsx

@@ -0,0 +1,94 @@
+import { ChevronRight } from 'lucide-react';
+import type { SwimLane } from '@/lib/swimlane';
+import type { Scope, ScopeStatus, CardDisplayConfig, BoardColumn } from '@/types';
+import { SwimCell } from './SwimCell';
+import { cn } from '@/lib/utils';
+
+interface SwimLaneRowProps {
+  lane: SwimLane;
+  columns: BoardColumn[];
+  collapsedColumns: Set<string>;
+  isLaneCollapsed: boolean;
+  onToggleLane: () => void;
+  onScopeClick?: (scope: Scope) => void;
+  cardDisplay?: CardDisplayConfig;
+  dimmedIds?: Set<number>;
+  isDragActive: boolean;
+  validTargets: Set<ScopeStatus>;
+}
+
+export function SwimLaneRow({
+  lane,
+  columns,
+  collapsedColumns,
+  isLaneCollapsed,
+  onToggleLane,
+  onScopeClick,
+  cardDisplay,
+  dimmedIds,
+  isDragActive,
+  validTargets,
+}: SwimLaneRowProps) {
+  if (isLaneCollapsed) {
+    return (
+      <>
+        {/* Lane label cell — collapsed */}
+        <button
+          onClick={onToggleLane}
+          className="swim-lane-header flex items-center gap-2 rounded-l px-3 py-1.5 text-left hover:bg-white/[0.04] transition-colors cursor-pointer sticky left-0 z-10 bg-background"
+        >
+          <div className={cn('h-full w-0.5 rounded-full shrink-0 self-stretch', lane.color)} />
+          <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
+          <span className="text-xxs font-medium text-muted-foreground truncate capitalize">
+            {lane.label}
+          </span>
+          <span className="ml-auto rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground shrink-0">
+            {lane.count}
+          </span>
+        </button>
+        {/* Empty cells across columns */}
+        {columns.map((col) => (
+          <div key={col.id} className={cn(collapsedColumns.has(col.id) && 'hidden')} />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {/* Lane label cell */}
+      <button
+        onClick={onToggleLane}
+        className="swim-lane-header flex items-start gap-2 rounded-l px-3 py-2 text-left hover:bg-white/[0.04] transition-colors cursor-pointer sticky left-0 z-10 bg-background"
+      >
+        <div className={cn('w-0.5 rounded-full shrink-0 min-h-[32px] self-stretch', lane.color)} />
+        <div className="flex flex-col gap-1 min-w-0">
+          <div className="flex items-center gap-1.5">
+            <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0 rotate-90 transition-transform" />
+            <span className="swim-lane-label text-xxs font-medium text-foreground/80 truncate capitalize">
+              {lane.label}
+            </span>
+          </div>
+          <span className="text-[10px] text-muted-foreground">
+            {lane.count} scope{lane.count !== 1 ? 's' : ''}
+          </span>
+        </div>
+      </button>
+      {/* Cells per column */}
+      {columns.map((col) => (
+        <SwimCell
+          key={col.id}
+          laneValue={lane.value}
+          status={col.id}
+          scopes={lane.cells[col.id]}
+          onScopeClick={onScopeClick}
+          cardDisplay={cardDisplay}
+          dimmedIds={dimmedIds}
+          isDragActive={isDragActive}
+          isValidDrop={validTargets.has(col.id)}
+          isCollapsed={collapsedColumns.has(col.id)}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/SwimlaneBoardView.tsx

@@ -0,0 +1,108 @@
+import { Info } from 'lucide-react';
+import type { SwimLane } from '@/lib/swimlane';
+import type { Scope, ScopeStatus, CardDisplayConfig, BoardColumn, Sprint } from '@/types';
+import { SwimLaneRow } from './SwimLaneRow';
+import { cn } from '@/lib/utils';
+import { useTheme } from '@/hooks/useTheme';
+
+interface SwimlaneBoardViewProps {
+  lanes: SwimLane[];
+  columns: BoardColumn[];
+  collapsedColumns: Set<string>;
+  collapsedLanes: Set<string>;
+  onToggleLane: (laneValue: string) => void;
+  onToggleCollapse: (columnId: string) => void;
+  onScopeClick?: (scope: Scope) => void;
+  cardDisplay?: CardDisplayConfig;
+  dimmedIds?: Set<number>;
+  isDragActive: boolean;
+  validTargets: Set<ScopeStatus>;
+  sprints: Sprint[];
+}
+
+export function SwimlaneBoardView({
+  lanes,
+  columns,
+  collapsedColumns,
+  collapsedLanes,
+  onToggleLane,
+  onToggleCollapse,
+  onScopeClick,
+  cardDisplay,
+  dimmedIds,
+  isDragActive,
+  validTargets,
+  sprints,
+}: SwimlaneBoardViewProps) {
+  const { neonGlass } = useTheme();
+
+  // Filter out collapsed columns for grid sizing
+  const visibleColumns = columns.filter((c) => !collapsedColumns.has(c.id));
+  const gridTemplateColumns = `140px ${visibleColumns.map(() => '200px').join(' ')}`;
+
+  const hasActiveSprints = sprints.some((s) =>
+    s.group_type === 'sprint' || (s.group_type === 'batch' && s.status !== 'completed')
+  );
+
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      {/* Sprint info banner */}
+      {hasActiveSprints && (
+        <div className="mb-2 flex items-center gap-2 rounded border border-primary/20 bg-primary/5 px-3 py-1.5 text-xs text-muted-foreground">
+          <Info className="h-3.5 w-3.5 text-primary shrink-0" />
+          Sprint groups are hidden in swimlane view
+        </div>
+      )}
+
+      <div
+        className="grid gap-px pb-4"
+        style={{ gridTemplateColumns, width: 'max-content' }}
+      >
+        {/* Column headers — sticky top row */}
+        <div className="sticky top-0 z-20 bg-background" />
+        {visibleColumns.map((col) => (
+          <button
+            key={col.id}
+            onClick={() => onToggleCollapse(col.id)}
+            className={cn(
+              'sticky top-0 z-20 flex items-center gap-1.5 rounded-t border-b border-white/[0.06] bg-background px-2 py-1.5 text-left cursor-pointer hover:bg-white/[0.03] transition-colors',
+              neonGlass && 'border-b-white/[0.08]',
+            )}
+          >
+            <div className={cn('h-2 w-2 rounded-full shrink-0', neonGlass && 'animate-glow-pulse')} style={{ backgroundColor: `hsl(${col.color})` }} />
+            <span className="text-xxs uppercase tracking-wider font-normal text-muted-foreground truncate">
+              {col.label}
+            </span>
+          </button>
+        ))}
+
+        {/* Lane rows */}
+        {lanes.map((lane) => (
+          <SwimLaneRow
+            key={lane.value}
+            lane={lane}
+            columns={visibleColumns}
+            collapsedColumns={collapsedColumns}
+            isLaneCollapsed={collapsedLanes.has(lane.value)}
+            onToggleLane={() => onToggleLane(lane.value)}
+            onScopeClick={onScopeClick}
+            cardDisplay={cardDisplay}
+            dimmedIds={dimmedIds}
+            isDragActive={isDragActive}
+            validTargets={validTargets}
+          />
+        ))}
+
+        {/* Empty state */}
+        {lanes.length === 0 && (
+          <>
+            <div />
+            <div className={cn('col-span-full py-12 text-center text-xs text-muted-foreground')}>
+              No scopes to display
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}