orbital-command 0.1.0

package/src/components/NeonGrid.tsx

@@ -0,0 +1,128 @@
+import { useRef, useEffect } from 'react';
+
+const GAP = 28;
+const DOT_RADIUS = 1;
+const DOT_COLOR = 'rgba(255, 255, 255, 0.12)';
+const DOT_COLOR_BRIGHT = 'rgba(255, 255, 255, 0.35)';
+
+// How far the cursor influence reaches (px)
+const INFLUENCE_RADIUS = 180;
+// How much dots get pushed away (px)
+const PUSH_STRENGTH = 14;
+
+/**
+ * Full-screen dot grid that warps around the cursor.
+ * Renders to a <canvas> — event-driven, zero CPU when idle.
+ * pointer-events: none — it never blocks clicks.
+ */
+const CURSOR_OFFSCREEN = { x: -9999, y: -9999 };
+
+export function NeonGrid() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const mouseRef = useRef(CURSOR_OFFSCREEN);
+  const pendingRef = useRef(false);
+  const rafIdRef = useRef(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    function draw() {
+      pendingRef.current = false;
+      if (!ctx || !canvas) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const mx = mouseRef.current.x;
+      const my = mouseRef.current.y;
+      const r2 = INFLUENCE_RADIUS * INFLUENCE_RADIUS;
+
+      const cols = Math.ceil(canvas.width / GAP) + 1;
+      const rows = Math.ceil(canvas.height / GAP) + 1;
+
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          const baseX = col * GAP;
+          const baseY = row * GAP;
+
+          const dx = baseX - mx;
+          const dy = baseY - my;
+          const dist2 = dx * dx + dy * dy;
+
+          let drawX = baseX;
+          let drawY = baseY;
+          let color = DOT_COLOR;
+          let radius = DOT_RADIUS;
+
+          if (dist2 < r2) {
+            const dist = Math.sqrt(dist2);
+            const t = 1 - dist / INFLUENCE_RADIUS;
+            const ease = t * t;
+            const push = ease * PUSH_STRENGTH;
+
+            if (dist > 0.1) {
+              drawX += (dx / dist) * push;
+              drawY += (dy / dist) * push;
+            }
+
+            color = DOT_COLOR_BRIGHT;
+            radius = DOT_RADIUS + ease * 0.6;
+          }
+
+          ctx.beginPath();
+          ctx.arc(drawX, drawY, radius, 0, Math.PI * 2);
+          ctx.fillStyle = color;
+          ctx.fill();
+        }
+      }
+    }
+
+    function scheduleFrame() {
+      if (!pendingRef.current) {
+        pendingRef.current = true;
+        rafIdRef.current = requestAnimationFrame(draw);
+      }
+    }
+
+    function resize() {
+      if (!canvas) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      scheduleFrame();
+    }
+
+    function onMouseMove(e: MouseEvent) {
+      mouseRef.current = { x: e.clientX, y: e.clientY };
+      scheduleFrame();
+    }
+
+    // document (not window) — fires reliably when cursor leaves the viewport
+    function onMouseLeave() {
+      mouseRef.current = CURSOR_OFFSCREEN;
+      scheduleFrame();
+    }
+
+    resize();
+    scheduleFrame(); // Initial static grid render
+
+    window.addEventListener('resize', resize);
+    window.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseleave', onMouseLeave);
+
+    return () => {
+      cancelAnimationFrame(rafIdRef.current);
+      window.removeEventListener('resize', resize);
+      window.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="neon-grid-canvas"
+      style={{ pointerEvents: 'none' }}
+    />
+  );
+}

package/src/components/PromotionQueue.tsx

@@ -0,0 +1,89 @@
+import { CheckCircle2 } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { DriftCommit } from '@/types';
+
+interface Props {
+  devToStaging: { count: number; commits: DriftCommit[] };
+  stagingToMain: { count: number; commits: DriftCommit[] };
+}
+
+function CommitRow({ commit }: { commit: DriftCommit }) {
+  return (
+    <div className="flex items-center gap-4 rounded px-2.5 py-1.5 transition-colors hover:bg-surface-light">
+      <code className="font-mono text-xs text-accent-blue shrink-0">
+        {commit.sha.slice(0, 7)}
+      </code>
+      <span className="flex-1 truncate text-xs font-normal text-foreground">
+        {commit.message}
+      </span>
+      <span className="shrink-0 text-xs text-muted-foreground">
+        {commit.author}
+      </span>
+      <span className="shrink-0 text-[10px] text-muted-foreground/60">
+        {formatDistanceToNow(new Date(commit.date), { addSuffix: true })}
+      </span>
+    </div>
+  );
+}
+
+function EmptySync() {
+  return (
+    <div className="flex flex-col items-center justify-center py-12">
+      <CheckCircle2 className="mb-2 h-8 w-8 text-bid-green" />
+      <span className="text-sm text-bid-green">In sync</span>
+    </div>
+  );
+}
+
+export function PromotionQueue({ devToStaging, stagingToMain }: Props) {
+  return (
+    <Card className="lg:col-span-2">
+      <CardHeader>
+        <CardTitle className="text-base">Promotion Queue</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="dev-staging">
+          <TabsList>
+            <TabsTrigger value="dev-staging">
+              dev &rarr; staging ({devToStaging.count})
+            </TabsTrigger>
+            <TabsTrigger value="staging-main">
+              staging &rarr; main ({stagingToMain.count})
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="dev-staging">
+            {devToStaging.commits.length === 0 ? (
+              <EmptySync />
+            ) : (
+              <ScrollArea className="max-h-[400px]">
+                <div className="space-y-0.5">
+                  {devToStaging.commits.map((c) => (
+                    <CommitRow key={c.sha} commit={c} />
+                  ))}
+                </div>
+              </ScrollArea>
+            )}
+          </TabsContent>
+
+          <TabsContent value="staging-main">
+            {stagingToMain.commits.length === 0 ? (
+              <EmptySync />
+            ) : (
+              <ScrollArea className="max-h-[400px]">
+                <div className="space-y-0.5">
+                  {stagingToMain.commits.map((c) => (
+                    <CommitRow key={c.sha} commit={c} />
+                  ))}
+                </div>
+              </ScrollArea>
+            )}
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ScopeCard.tsx

@@ -0,0 +1,234 @@
+import { useDraggable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { Lightbulb, Sparkles, AlertTriangle, Undo2, X } from 'lucide-react';
+import type { Scope, CardDisplayConfig } from '@/types';
+import { Card, CardContent } from '@/components/ui/card';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { cn, formatScopeId } from '@/lib/utils';
+import { useActiveDispatches } from '@/hooks/useActiveDispatches';
+import { useWorkflow } from '@/hooks/useWorkflow';
+
+interface ScopeCardProps {
+  scope: Scope;
+  onClick?: (scope: Scope) => void;
+  isDragOverlay?: boolean;
+  cardDisplay?: CardDisplayConfig;
+  dimmed?: boolean;
+}
+
+const PRIORITY_COLOR: Record<string, string> = {
+  critical: 'border-ask-red text-ask-red',
+  high:     'border-warning-amber text-warning-amber',
+  medium:   'border-accent-blue text-accent-blue',
+  low:      'border-muted-foreground/30 text-muted-foreground',
+};
+
+const CATEGORY_COLOR: Record<string, string> = {
+  'feature':        'border-category-feature text-category-feature',
+  'bugfix':         'border-category-bugfix text-category-bugfix',
+  'refactor':       'border-category-refactor text-category-refactor',
+  'infrastructure': 'border-category-infrastructure text-category-infrastructure',
+  'docs':           'border-category-docs text-category-docs',
+};
+
+const CATEGORY_BORDER: Record<string, string> = {
+  'feature':        'border-l-2 border-l-category-feature scope-cat-feature',
+  'bugfix':         'border-l-2 border-l-category-bugfix scope-cat-bugfix',
+  'refactor':       'border-l-2 border-l-category-refactor scope-cat-refactor',
+  'infrastructure': 'border-l-2 border-l-category-infrastructure scope-cat-infrastructure',
+  'docs':           'border-l-2 border-l-category-docs scope-cat-docs',
+};
+
+const GHOST = 'inline-block rounded border px-1.5 py-0 text-[10px] uppercase bg-transparent';
+
+interface AbandonedPopoverProps {
+  scopeId: number;
+  info: { from_status: string | null };
+  onRecover: (scopeId: number, fromStatus: string) => Promise<void>;
+  onDismiss: (scopeId: number) => Promise<void>;
+}
+
+function AbandonedPopover({ scopeId, info, onRecover, onDismiss }: AbandonedPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>
+        <button className="flex items-center gap-0.5 text-amber-500 hover:text-amber-400 transition-colors">
+          <AlertTriangle className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-56 p-3"
+        side="top"
+        align="end"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <p className="text-xs text-muted-foreground mb-2">
+          Session ended without completing work.
+        </p>
+        <div className="flex flex-col gap-1.5">
+          {info.from_status && (
+            <button
+              className="flex items-center gap-1.5 text-xs px-2 py-1.5 rounded bg-amber-500/10 text-amber-500 hover:bg-amber-500/20 transition-colors"
+              onClick={() => onRecover(scopeId, info.from_status!)}
+            >
+              <Undo2 className="h-3 w-3" />
+              Revert to {info.from_status}
+            </button>
+          )}
+          <button
+            className="flex items-center gap-1.5 text-xs px-2 py-1.5 rounded bg-muted text-muted-foreground hover:bg-muted/80 transition-colors"
+            onClick={() => onDismiss(scopeId)}
+          >
+            <X className="h-3 w-3" />
+            Keep here
+          </button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function abbreviateEffort(raw: string): string {
+  const s = raw.toLowerCase().trim();
+  const minMatch = s.match(/^~?(\d+)(?:\s*-\s*\d+)?\s*min/);
+  if (minMatch) return `${minMatch[1]}M`;
+  const hrMatch = s.match(/^~?(\d+(?:\.\d+)?)(?:\s*-\s*\d+(?:\.\d+)?)?\s*hour/);
+  if (hrMatch) return `${hrMatch[1]}H`;
+  const parenMatch = s.match(/\((\d+(?:\.\d+)?)(?:\s*-\s*\d+(?:\.\d+)?)?\s*(hour|min)/);
+  if (parenMatch) return `${parenMatch[1]}${parenMatch[2].startsWith('h') ? 'H' : 'M'}`;
+  if (s.includes('large') || s.includes('multi')) return 'LG';
+  if (s.includes('medium') || s.includes('half')) return 'MD';
+  if (s.includes('small')) return 'SM';
+  if (s === 'tbd') return 'TBD';
+  return 'TBD';
+}
+
+export function ScopeCard({ scope, onClick, isDragOverlay, cardDisplay, dimmed }: ScopeCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: scope.id,
+    disabled: isDragOverlay || dimmed,
+  });
+
+  const style = transform
+    ? { transform: CSS.Translate.toString(transform) }
+    : undefined;
+
+  const { engine } = useWorkflow();
+  const { activeScopes, abandonedScopes, recoverScope, dismissAbandoned } = useActiveDispatches();
+  const entryPointId = engine.getEntryPoint().id;
+  const isIdea = scope.status === entryPointId;
+  const isGhost = isIdea && !!scope.is_ghost;
+  const isDispatched = !isIdea && activeScopes.has(scope.id);
+  const abandonedInfo = !isIdea ? abandonedScopes.get(scope.id) : undefined;
+  const isAbandoned = !!abandonedInfo && !isDispatched;
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'scope-card cursor-grab transition-[colors,opacity] duration-200 hover:bg-surface-light active:cursor-grabbing',
+        isGhost
+          ? 'scope-card-ghost ghost-shimmer opacity-70'
+          : isIdea
+          ? 'border-l-2 border-dashed border-l-warning-amber/60'
+          : scope.category ? CATEGORY_BORDER[scope.category] : '',
+        isDispatched && 'scope-card-dispatched',
+        isAbandoned && 'scope-card-abandoned',
+        isDragging && 'opacity-30',
+        dimmed && !isDragging && 'opacity-30 cursor-default',
+      )}
+      onClick={() => {
+        if (!isDragging) onClick?.(scope);
+      }}
+      {...attributes}
+      {...listeners}
+    >
+      <CardContent className="px-2.5 py-1.5">
+        {/* Header: ID/idea label + badges */}
+        <div className="mb-1.5 flex items-center gap-1.5">
+          {isGhost ? (
+            <span className="flex items-center gap-1 text-xxs text-purple-400">
+              <Sparkles className="h-3 w-3" />
+              ai suggestion
+            </span>
+          ) : isIdea ? (
+            <span className="flex items-center gap-1 text-xxs text-warning-amber">
+              <Lightbulb className="h-3 w-3" />
+              idea
+            </span>
+          ) : (
+            <span className="font-mono text-xxs text-muted-foreground flex items-center gap-1">
+              {isDispatched && <span className="h-1.5 w-1.5 rounded-full bg-pink-500 dispatch-pulse" />}
+              {isAbandoned && <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />}
+              {formatScopeId(scope.id)}
+            </span>
+          )}
+          {!isIdea && (
+            <div className="ml-auto flex items-center gap-1">
+              {isAbandoned && (
+                <AbandonedPopover
+                  scopeId={scope.id}
+                  info={abandonedInfo}
+                  onRecover={recoverScope}
+                  onDismiss={dismissAbandoned}
+                />
+              )}
+              {scope.effort_estimate && cardDisplay?.effort !== false && (
+                <span className={cn(GHOST, 'effort-ghost border-muted-foreground/30 text-muted-foreground')}>
+                  {abbreviateEffort(scope.effort_estimate)}
+                </span>
+              )}
+              {scope.category && cardDisplay?.category !== false && (
+                <span className={cn(
+                  GHOST,
+                  CATEGORY_COLOR[scope.category] ?? 'border-muted-foreground/30 text-muted-foreground'
+                )}>
+                  {scope.category}
+                </span>
+              )}
+              {scope.priority && cardDisplay?.priority !== false && (
+                <span className={cn(
+                  GHOST,
+                  PRIORITY_COLOR[scope.priority] ?? 'border-muted-foreground/30 text-muted-foreground'
+                )}>
+                  {scope.priority}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Title */}
+        <h3 className="text-xs font-light leading-snug line-clamp-2">
+          {scope.title}
+        </h3>
+
+        {/* Tags (ideas don't have tags) */}
+        {!isIdea && scope.tags.length > 0 && cardDisplay?.tags !== false && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {scope.tags.slice(0, 3).map((tag) => (
+              <span
+                key={tag}
+                className="glass-pill inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+            {scope.tags.length > 3 && (
+              <span className="text-[10px] text-muted-foreground">
+                +{scope.tags.length - 3}
+              </span>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}