orbital-command 0.2.0 → 1.0.0

package/src/components/SprintContainer.tsx

@@ -1,303 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
-import { X, Layers, Package, Play } from 'lucide-react';
-import type { Sprint, Scope, CardDisplayConfig } from '@/types';
-import { ScopeCard } from './ScopeCard';
-import { cn, formatScopeId } from '@/lib/utils';
-import { useWorkflow } from '@/hooks/useWorkflow';
-
-interface SprintContainerProps {
-  sprint: Sprint;
-  /** Full scope objects for scopes in the sprint (for rendering cards) */
-  scopeLookup: Map<number, Scope>;
-  onDelete?: (id: number) => void;
-  onDispatch?: (id: number) => void;
-  onRename?: (id: number, name: string) => void;
-  onScopeClick?: (scope: Scope) => void;
-  cardDisplay?: CardDisplayConfig;
-  dimmedIds?: Set<number>;
-  /** Number of loose (non-batched) scopes in the column — drives "Add all" button visibility */
-  looseCount?: number;
-  /** Bulk-add all loose column scopes into this batch */
-  onAddAll?: (sprintId: number) => void;
-  /** Whether this sprint was just created and should start with name editing */
-  editingName?: boolean;
-  /** Called when name editing finishes (committed or cancelled) */
-  onEditingDone?: () => void;
-}
-
-const STATUS_STYLE: Record<string, string> = {
-  assembling: 'border-dashed border-cyan-500/40',
-  dispatched: 'border-solid border-amber-500/50 batch-group-dispatched',
-  in_progress: 'border-solid border-amber-500/40 batch-group-dispatched',
-  completed: 'border-solid border-green-500/40 opacity-60',
-  failed: 'border-solid border-red-500/40',
-  cancelled: 'border-solid border-muted-foreground/30 opacity-50',
-};
-
-const STATUS_LABEL: Record<string, string> = {
-  assembling: 'Assembling',
-  dispatched: 'Dispatched',
-  in_progress: 'Running',
-  completed: 'Complete',
-  failed: 'Failed',
-  cancelled: 'Cancelled',
-};
-
-function totalEffortHours(sprint: Sprint): string {
-  let total = 0;
-  for (const ss of sprint.scopes) {
-    if (!ss.effort_estimate) continue;
-    const match = ss.effort_estimate.toLowerCase().match(/(\d+(?:\.\d+)?)\s*hour/);
-    if (match) total += parseFloat(match[1]);
-    const minMatch = ss.effort_estimate.toLowerCase().match(/(\d+)\s*min/);
-    if (minMatch) total += parseInt(minMatch[1]) / 60;
-  }
-  if (total === 0) return 'TBD';
-  return total < 1 ? `${Math.round(total * 60)}M` : `~${total.toFixed(0)}H`;
-}
-
-export function SprintContainer({ sprint, scopeLookup, onDelete, onDispatch, onRename, onScopeClick, cardDisplay, dimmedIds, looseCount, onAddAll, editingName, onEditingDone }: SprintContainerProps) {
-  const { engine } = useWorkflow();
-  const isAssembling = sprint.status === 'assembling';
-  const [isEditing, setIsEditing] = useState(editingName ?? false);
-  const [draftName, setDraftName] = useState(sprint.name);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (editingName) {
-      setIsEditing(true);
-      setDraftName('');
-    }
-  }, [editingName]);
-
-  useEffect(() => {
-    if (isEditing) inputRef.current?.focus();
-  }, [isEditing]);
-
-  const commitName = () => {
-    const trimmed = draftName.trim();
-    if (trimmed && trimmed !== sprint.name && onRename) {
-      onRename(sprint.id, trimmed);
-    }
-    setIsEditing(false);
-    setDraftName(trimmed || sprint.name);
-    onEditingDone?.();
-  };
-  const isBatch = sprint.group_type === 'batch';
-  const batchActionLabel = isBatch
-    ? (() => {
-        const target = engine.getBatchTargetStatus(sprint.target_column);
-        return target ? engine.findEdge(sprint.target_column, target)?.label ?? 'Dispatch' : 'Dispatch';
-      })()
-    : undefined;
-
-  // Only sprints are draggable (batches dispatch via header button)
-  const {
-    attributes: dragAttrs,
-    listeners: dragListeners,
-    setNodeRef: setDragRef,
-    transform,
-    isDragging,
-  } = useDraggable({
-    id: `sprint-${sprint.id}`,
-    disabled: isBatch || !isAssembling || sprint.scope_ids.length === 0,
-  });
-
-  const { setNodeRef: setDropRef, isOver } = useDroppable({
-    id: `sprint-drop-${sprint.id}`,
-    disabled: !isAssembling,
-  });
-
-  const dragStyle = transform ? { transform: CSS.Translate.toString(transform) } : undefined;
-
-  const totalScopes = sprint.scope_ids.length;
-  const { progress } = sprint;
-  const canDispatch = isBatch && isAssembling && totalScopes > 0 && onDispatch;
-
-  // Icon and border vary by group_type
-  const Icon = isBatch ? Package : Layers;
-  const iconColor = isBatch ? 'text-amber-400' : 'text-cyan-400';
-  const borderStyle = isBatch && isAssembling
-    ? 'border-muted-foreground/30'
-    : STATUS_STYLE[sprint.status] ?? 'border-muted-foreground/30';
-
-  return (
-    <div
-      ref={setDragRef}
-      style={{
-        ...dragStyle,
-        ...(isBatch && isAssembling ? { borderColor: (engine.getList(sprint.target_column)?.hex ?? '') + '80' } : undefined),
-      }}
-      className={cn(
-        'rounded-lg border bg-card/30 transition-all duration-200',
-        borderStyle,
-        isDragging && 'opacity-30',
-        !isBatch && isAssembling && 'cursor-grab active:cursor-grabbing',
-      )}
-      {...(isBatch ? {} : dragAttrs)}
-      {...(isBatch ? {} : dragListeners)}
-    >
-      {/* Header */}
-      <div className="flex items-center gap-2 px-2.5 py-1.5 border-b border-inherit">
-        <Icon className={cn('h-3 w-3 shrink-0', iconColor)} />
-        {isEditing ? (
-          <input
-            ref={inputRef}
-            className="min-w-0 flex-1 h-5 rounded bg-muted/50 px-1.5 text-xs font-medium text-foreground border border-cyan-500/30 focus:outline-none focus:ring-1 focus:ring-cyan-500/50"
-            placeholder={isBatch ? 'Batch name...' : 'Sprint name...'}
-            value={draftName}
-            onChange={(e) => setDraftName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') commitName();
-              if (e.key === 'Escape') { setIsEditing(false); setDraftName(sprint.name); onEditingDone?.(); }
-            }}
-            onBlur={commitName}
-            onClick={(e) => e.stopPropagation()}
-          />
-        ) : (
-          <span
-            className={cn('text-xs font-medium text-foreground truncate flex-1', isAssembling && 'cursor-text')}
-            onDoubleClick={() => { if (isAssembling) { setIsEditing(true); setDraftName(sprint.name); } }}
-          >
-            {sprint.name}
-          </span>
-        )}
-        <span className={cn(
-          'rounded px-1 py-0.5 text-[10px] uppercase',
-          sprint.status === 'dispatched' || sprint.status === 'in_progress'
-            ? 'bg-amber-500/20 text-amber-400'
-            : sprint.status === 'completed'
-            ? 'bg-green-500/20 text-green-400'
-            : sprint.status === 'failed'
-            ? 'bg-red-500/20 text-red-400'
-            : 'text-muted-foreground',
-        )}>
-          {STATUS_LABEL[sprint.status]}
-        </span>
-        {isAssembling && (looseCount ?? 0) > 0 && onAddAll && (
-          <button
-            onClick={(e) => { e.stopPropagation(); onAddAll(sprint.id); }}
-            className="shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-            title={`Add all ${looseCount} remaining scopes`}
-          >
-            + All ({looseCount})
-          </button>
-        )}
-        {canDispatch && (
-          <button
-            onClick={(e) => { e.stopPropagation(); onDispatch(sprint.id); }}
-            className="shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] bg-cyan-600/80 text-black hover:bg-cyan-500/80 transition-colors"
-            title={batchActionLabel ?? 'Dispatch'}
-          >
-            <Play className="h-2.5 w-2.5" />
-            {batchActionLabel ?? 'Dispatch'}
-          </button>
-        )}
-        {isAssembling && onDelete && (
-          <button
-            onClick={(e) => { e.stopPropagation(); onDelete(sprint.id); }}
-            className="shrink-0 text-muted-foreground hover:text-red-400 transition-colors"
-          >
-            <X className="h-3 w-3" />
-          </button>
-        )}
-      </div>
-
-      {/* Scope Cards (inside the sprint) */}
-      <div
-        ref={setDropRef}
-        className={cn(
-          'p-1.5 space-y-1 min-h-[40px] transition-colors duration-150',
-          isOver && isAssembling && 'bg-cyan-500/5 ring-1 ring-inset ring-cyan-500/30 rounded-b-lg',
-        )}
-      >
-        {sprint.scope_ids.map((scopeId) => {
-          const scope = scopeLookup.get(scopeId);
-          if (!scope) {
-            // Fallback: show minimal info from sprint scope data
-            const ss = sprint.scopes.find((s) => s.scope_id === scopeId);
-            return (
-              <div key={scopeId} className="rounded border border-muted-foreground/20 bg-card/50 px-2 py-1 text-xs text-muted-foreground">
-                <span className="font-mono">{formatScopeId(scopeId)}</span>
-                {ss && <span className="ml-2">{ss.title}</span>}
-              </div>
-            );
-          }
-          return (
-            <ScopeCard key={scopeId} scope={scope} onClick={onScopeClick} cardDisplay={cardDisplay} dimmed={dimmedIds?.has(scopeId)} />
-          );
-        })}
-        {totalScopes === 0 && isAssembling && isOver && (
-          <p className="py-3 text-center text-[10px] text-muted-foreground/50">
-            Drop to add
-          </p>
-        )}
-      </div>
-
-      {/* Footer: effort + scope count + progress + dispatch result */}
-      <div className="flex items-center justify-between border-t border-inherit px-2.5 py-1">
-        <span className="text-[10px] text-muted-foreground">
-          {isBatch ? batchActionLabel ?? 'Batch' : `Effort: ${totalEffortHours(sprint)}`}
-        </span>
-        <span className="text-[10px] text-muted-foreground">
-          {totalScopes} scope{totalScopes !== 1 ? 's' : ''}
-        </span>
-        {sprint.status !== 'assembling' && totalScopes > 0 && (
-          <div className="flex items-center gap-1">
-            {progress.completed > 0 && (
-              <span className="text-[10px] text-green-400">{progress.completed} done</span>
-            )}
-            {progress.failed > 0 && (
-              <span className="text-[10px] text-red-400">{progress.failed} fail</span>
-            )}
-            {progress.in_progress > 0 && (
-              <span className="text-[10px] text-amber-400">{progress.in_progress} active</span>
-            )}
-          </div>
-        )}
-      </div>
-      {/* Dispatch result (batch only — commit SHA / PR link) */}
-      {isBatch && sprint.dispatch_result && (
-        <div className="border-t border-inherit px-2.5 py-1 text-[10px] text-muted-foreground space-y-0.5">
-          {sprint.dispatch_result.commit_sha && (
-            <span className="font-mono">{sprint.dispatch_result.commit_sha.slice(0, 7)}</span>
-          )}
-          {sprint.dispatch_result.pr_url && (
-            <a
-              href={sprint.dispatch_result.pr_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-cyan-400 hover:underline ml-1"
-            >
-              PR #{sprint.dispatch_result.pr_number ?? ''}
-            </a>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** Compact sprint preview for drag overlay */
-export function SprintDragPreview({ sprint }: { sprint: Sprint }) {
-  return (
-    <div className="w-72 rotate-1 opacity-90 shadow-xl shadow-black/40 rounded-lg border border-cyan-500/40 bg-card/80 p-2">
-      <div className="flex items-center gap-2 mb-1">
-        <Layers className="h-3 w-3 text-cyan-400" />
-        <span className="text-xs font-medium">{sprint.name}</span>
-      </div>
-      <div className="space-y-0.5">
-        {sprint.scopes.slice(0, 3).map((ss) => (
-          <div key={ss.scope_id} className="rounded bg-muted/30 px-1.5 py-0.5 text-[10px] text-muted-foreground truncate">
-            {formatScopeId(ss.scope_id)} {ss.title}
-          </div>
-        ))}
-        {sprint.scopes.length > 3 && (
-          <p className="text-[10px] text-muted-foreground text-center">+{sprint.scopes.length - 3} more</p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/SprintDependencyDialog.tsx

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

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

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