orbital-command 0.1.0

package/src/components/DispatchPopover.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import { ArrowRight, AlertTriangle, Terminal, ExternalLink } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { cn, formatScopeId } from '@/lib/utils';
+import type { WorkflowEdge } from '../../shared/workflow-config';
+import type { Scope } from '@/types';
+
+interface DispatchPopoverProps {
+  open: boolean;
+  scope: Scope | null;
+  transition: WorkflowEdge | null;
+  hasActiveSession: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onViewDetails: () => void;
+}
+
+export function DispatchPopover({
+  open,
+  scope,
+  transition,
+  hasActiveSession,
+  onConfirm,
+  onCancel,
+  onViewDetails,
+}: DispatchPopoverProps) {
+  const launchRef = useRef<HTMLButtonElement>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Auto-focus launch button when dialog opens
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => launchRef.current?.focus(), 100);
+      setLoading(false);
+    }
+  }, [open]);
+
+  if (!scope || !transition) return null;
+
+  const command = transition.command?.replace('{id}', String(scope.id)) ?? null;
+  const entryPointPromotion = transition.direction === 'forward' && !transition.command && transition.from !== transition.to;
+  const isIdeaPromotion = scope.status === transition.from && entryPointPromotion;
+  const displayCommand = isIdeaPromotion ? '/scope-create' : command;
+  const actionLabel = isIdeaPromotion ? 'Launch' : command ? 'Launch' : 'Move';
+
+  function handleConfirm() {
+    setLoading(true);
+    onConfirm();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onCancel(); }}>
+      <DialogContent className="max-w-xs p-3 gap-0">
+        {/* Transition arrow */}
+        <div className="mb-2.5 flex items-center gap-2">
+          <Badge variant="outline" className="text-xxs capitalize">{transition.from}</Badge>
+          <ArrowRight className="h-3 w-3 text-muted-foreground" />
+          <Badge variant="default" className="text-xxs capitalize [color:#000]">{transition.to}</Badge>
+        </div>
+
+        {/* Scope preview */}
+        <div className="mb-2 text-xs text-muted-foreground">
+          {isIdeaPromotion ? (
+            <span className="font-light">{scope.title}</span>
+          ) : (
+            <>
+              <span className="font-mono">{formatScopeId(scope.id)}</span>
+              {' '}
+              <span className="font-light">{scope.title}</span>
+            </>
+          )}
+        </div>
+
+        {/* Command preview */}
+        {displayCommand && (
+          <div className="mb-3 flex items-center gap-1.5 rounded bg-black/40 px-2 py-1.5">
+            <Terminal className="h-3 w-3 shrink-0 text-primary" />
+            <code className="text-xxs font-mono text-primary">{displayCommand}</code>
+          </div>
+        )}
+
+        {/* Idea promotion info */}
+        {isIdeaPromotion && (
+          <p className="mb-3 text-xxs text-muted-foreground">
+            Creates a scope document from this idea
+          </p>
+        )}
+
+        {/* Active session warning */}
+        {hasActiveSession && (
+          <div className={cn(
+            'mb-3 flex items-start gap-1.5 rounded border px-2 py-1.5 text-xxs',
+            'border-warning-amber/30 bg-warning-amber/10 text-warning-amber'
+          )}>
+            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" />
+            <span>A CLI session is already running for this scope.</span>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          <Button
+            ref={launchRef}
+            size="sm"
+            onClick={handleConfirm}
+            disabled={loading}
+            className="flex-1"
+          >
+            {loading ? 'Launching...' : actionLabel}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onCancel}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+        </div>
+
+        {/* View details link */}
+        {(command || isIdeaPromotion) && (
+          <button
+            onClick={onViewDetails}
+            className="mt-2 flex items-center gap-1 text-xxs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ExternalLink className="h-2.5 w-2.5" />
+            View Details
+          </button>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/DragOverlay.tsx

@@ -0,0 +1,25 @@
+import { DragOverlay as DndDragOverlay } from '@dnd-kit/core';
+import { ScopeCard } from './ScopeCard';
+import { SprintDragPreview } from './SprintContainer';
+import type { Scope, Sprint, CardDisplayConfig } from '@/types';
+
+interface DragOverlayProps {
+  activeScope: Scope | null;
+  activeSprint?: Sprint | null;
+  cardDisplay?: CardDisplayConfig;
+}
+
+export function DragOverlay({ activeScope, activeSprint, cardDisplay }: DragOverlayProps) {
+  return (
+    <DndDragOverlay dropAnimation={null}>
+      {activeScope && (
+        <div className="w-72 rotate-2 opacity-90 shadow-xl shadow-black/40">
+          <ScopeCard scope={activeScope} cardDisplay={cardDisplay} />
+        </div>
+      )}
+      {activeSprint && (
+        <SprintDragPreview sprint={activeSprint} />
+      )}
+    </DndDragOverlay>
+  );
+}

package/src/components/DriftSidebar.tsx

@@ -0,0 +1,140 @@
+import { formatDistanceToNow } from 'date-fns';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import type { PipelineDrift, DeployFrequencyWeek, Deployment } from '@/types';
+
+interface Props {
+  drift: PipelineDrift;
+  frequency: DeployFrequencyWeek[];
+  deployments: Deployment[];
+}
+
+function driftColor(count: number): string {
+  if (count === 0) return 'text-bid-green';
+  if (count <= 5) return 'text-accent-blue';
+  if (count <= 20) return 'text-warning-amber';
+  return 'text-ask-red';
+}
+
+function timeBehind(oldestDate: string | null): string {
+  if (!oldestDate) return 'synced';
+  return formatDistanceToNow(new Date(oldestDate)) + ' behind';
+}
+
+export function DriftSidebar({ drift, frequency, deployments }: Props) {
+  const latestStaging = deployments.find((d) => d.environment === 'staging');
+  const latestProd = deployments.find((d) => d.environment === 'production');
+
+  return (
+    <div className="space-y-6">
+      {/* Branch Drift Summary */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Branch Drift</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <DriftRow
+            label="dev → staging"
+            count={drift.devToStaging.count}
+            oldestDate={drift.devToStaging.oldestDate}
+          />
+          <DriftRow
+            label="staging → main"
+            count={drift.stagingToMain.count}
+            oldestDate={drift.stagingToMain.oldestDate}
+          />
+
+          <div className="mt-4 border-t border-border pt-3 space-y-2">
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground">Last staging deploy</span>
+              <span className="text-foreground">
+                {latestStaging?.started_at
+                  ? formatDistanceToNow(new Date(latestStaging.started_at), { addSuffix: true })
+                  : '—'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground">Last production deploy</span>
+              <span className="text-foreground">
+                {latestProd?.started_at
+                  ? formatDistanceToNow(new Date(latestProd.started_at), { addSuffix: true })
+                  : '—'}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Deploy Frequency Chart */}
+      {frequency.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Deploy Frequency</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <BarChart
+                data={frequency}
+                margin={{ left: 0, right: 10, top: 0, bottom: 0 }}
+              >
+                <XAxis
+                  dataKey="week"
+                  tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+                  tickFormatter={(w: string) => w.replace(/^\d{4}-/, '')}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+                  width={24}
+                />
+                <RechartsTooltip
+                  contentStyle={{
+                    background: 'hsl(var(--card))',
+                    border: '1px solid hsl(var(--border))',
+                    borderRadius: '6px',
+                    fontSize: '12px',
+                  }}
+                />
+                <Legend
+                  iconSize={8}
+                  wrapperStyle={{ fontSize: '10px' }}
+                />
+                <Bar dataKey="staging" stackId="a" fill="#EC4899" radius={[0, 0, 0, 0]} />
+                <Bar dataKey="production" stackId="a" fill="#00c853" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function DriftRow({ label, count, oldestDate }: {
+  label: string;
+  count: number;
+  oldestDate: string | null;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <div className="flex items-center gap-2">
+        <span className={cn('font-mono text-xs font-medium', driftColor(count))}>
+          {count} commits
+        </span>
+        <span className="text-[10px] text-muted-foreground/60">
+          {timeBehind(oldestDate)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/EnvironmentStrip.tsx

@@ -0,0 +1,88 @@
+import { formatDistanceToNow } from 'date-fns';
+import { ArrowRight } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import type { PipelineDrift } from '@/types';
+
+interface Props {
+  drift: PipelineDrift;
+}
+
+function driftColor(count: number): string {
+  if (count === 0) return 'text-bid-green';
+  if (count <= 5) return 'text-accent-blue';
+  if (count <= 20) return 'text-warning-amber';
+  return 'text-ask-red';
+}
+
+function driftGlow(count: number): string {
+  if (count === 0) return 'glow-green-sm';
+  if (count <= 5) return '';
+  if (count <= 20) return 'glow-amber';
+  return 'glow-red-sm';
+}
+
+function driftLabel(count: number): string {
+  if (count === 0) return 'synced';
+  return `${count} ahead`;
+}
+
+function EnvCard({ name, sha, date }: { name: string; sha: string; date: string }) {
+  return (
+    <div className="flex flex-col items-center gap-1 rounded border border-border bg-surface p-3 min-w-[130px]">
+      <span className="text-xs font-medium uppercase tracking-wider text-foreground">
+        {name}
+      </span>
+      <code className="font-mono text-xxs text-muted-foreground">
+        {sha ? sha.slice(0, 7) : '—'}
+      </code>
+      {date && (
+        <span className="text-[10px] text-muted-foreground/60">
+          {formatDistanceToNow(new Date(date), { addSuffix: true })}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function DriftArrow({ count }: { count: number }) {
+  const color = driftColor(count);
+  const glow = driftGlow(count);
+
+  return (
+    <div className={cn('flex flex-col items-center gap-0.5', glow)}>
+      <span className={cn('text-[10px] font-medium', color)}>
+        {driftLabel(count)}
+      </span>
+      <ArrowRight className={cn('h-4 w-4', color)} />
+    </div>
+  );
+}
+
+export function EnvironmentStrip({ drift }: Props) {
+  return (
+    <Card>
+      <CardContent className="py-4">
+        <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-center gap-3">
+          <EnvCard
+            name="dev"
+            sha={drift.heads.dev.sha}
+            date={drift.heads.dev.date}
+          />
+          <DriftArrow count={drift.devToStaging.count} />
+          <EnvCard
+            name="staging"
+            sha={drift.heads.staging.sha}
+            date={drift.heads.staging.date}
+          />
+          <DriftArrow count={drift.stagingToMain.count} />
+          <EnvCard
+            name="main"
+            sha={drift.heads.main.sha}
+            date={drift.heads.main.date}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { AlertTriangle, RotateCcw } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches unhandled render errors and shows a recoverable fallback UI
+ * instead of a blank white screen.
+ *
+ * Usage: wrap at two levels —
+ *  1. Around <App /> in main.tsx  (last-resort catch)
+ *  2. Around <Outlet /> in DashboardLayout  (view-level isolation)
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  private handleReload = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (!this.state.hasError) return this.props.children;
+
+    return (
+      <div className="flex h-full items-center justify-center p-8">
+        <div className="flex max-w-md flex-col items-center gap-4 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle className="h-6 w-6 text-destructive" />
+          </div>
+          <h2 className="text-sm font-medium text-foreground">
+            Something went wrong
+          </h2>
+          <p className="text-xs text-muted-foreground">
+            {this.state.error?.message ?? 'An unexpected error occurred.'}
+          </p>
+          <button
+            onClick={this.handleReload}
+            className="flex items-center gap-1.5 rounded bg-surface-light px-3 py-1.5 text-xs text-foreground transition-colors hover:bg-border"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/FilterChip.tsx

@@ -0,0 +1,105 @@
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useTheme } from '@/hooks/useTheme';
+import type { FilterField } from '@/types';
+import type { FilterOption } from '@/hooks/useScopeFilters';
+
+interface FilterChipProps {
+  field: FilterField;
+  label: string;
+  options: FilterOption[];
+  selected: Set<string>;
+  onToggle: (field: FilterField, value: string) => void;
+  glowClass?: string;
+}
+
+const FIELD_COLORS: Record<string, string> = {
+  priority: 'text-warning-amber',
+  category: 'text-accent-blue',
+  tags: 'text-info-cyan',
+  effort: 'text-muted-foreground',
+  dependencies: 'text-ask-red',
+};
+
+export function FilterChip({
+  field,
+  label,
+  options,
+  selected,
+  onToggle,
+  glowClass,
+}: FilterChipProps) {
+  const { neonGlass } = useTheme();
+  const isActive = selected.size > 0;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'gap-1.5 capitalize backdrop-blur-sm bg-white/[0.03] border-white/10',
+            isActive && 'border-white/20 text-foreground',
+            isActive && neonGlass && glowClass
+          )}
+        >
+          {label}
+          {isActive && (
+            <span className="ml-0.5 rounded-full bg-white/10 px-1.5 text-[10px]">
+              {selected.size}
+            </span>
+          )}
+          <ChevronDown className="h-3 w-3 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="filter-popover-glass !bg-transparent">
+        <div className="space-y-0.5">
+          {options.map((opt) => {
+            const checked = selected.has(opt.value);
+            return (
+              <button
+                key={opt.value}
+                onClick={() => onToggle(field, opt.value)}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors',
+                  'hover:bg-white/[0.06]',
+                  checked && 'bg-white/[0.06]'
+                )}
+              >
+                {/* Checkbox indicator */}
+                <span
+                  className={cn(
+                    'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border',
+                    checked
+                      ? cn('border-primary bg-primary text-primary-foreground', FIELD_COLORS[field])
+                      : 'border-white/15'
+                  )}
+                >
+                  {checked && (
+                    <svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </span>
+
+                {/* Label */}
+                <span className={cn('capitalize', checked && 'text-foreground')}>
+                  {opt.label}
+                </span>
+
+                {/* Count */}
+                <span className="ml-auto text-[10px] text-muted-foreground">
+                  {opt.count}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/GateIndicator.tsx

@@ -0,0 +1,33 @@
+import { CheckCircle2, XCircle, Loader2, MinusCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { GateStatus } from '@/types';
+
+interface GateIndicatorProps {
+  status: GateStatus;
+  className?: string;
+}
+
+const STATUS_CONFIG: Record<GateStatus, {
+  icon: typeof CheckCircle2;
+  color: string;
+  label: string;
+  animate?: string;
+  glow: string;
+}> = {
+  pass: { icon: CheckCircle2, color: 'text-bid-green', label: 'Pass', glow: 'gate-glow-pass glow-green' },
+  fail: { icon: XCircle, color: 'text-ask-red', label: 'Fail', glow: 'gate-glow-fail glow-red' },
+  running: { icon: Loader2, color: 'text-accent-blue', label: 'Running', animate: 'animate-spin', glow: 'glow-blue' },
+  skipped: { icon: MinusCircle, color: 'text-muted-foreground', label: 'Skipped', glow: '' },
+};
+
+export function GateIndicator({ status, className }: GateIndicatorProps) {
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      <Icon className={cn('h-4 w-4', config.color, config.animate, config.glow)} />
+      <span className={cn('text-xs', config.color)}>{config.label}</span>
+    </div>
+  );
+}