orbital-command 0.1.0

package/src/components/BatchPreflightModal.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import { Play, Package } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { formatScopeId } from '@/lib/utils';
+import { useWorkflow } from '@/hooks/useWorkflow';
+import type { Sprint } from '@/types';
+
+interface BatchPreflightModalProps {
+  open: boolean;
+  batch: Sprint | null;
+  onConfirm: (mergeMode?: string) => void;
+  onCancel: () => void;
+}
+
+export function BatchPreflightModal({ open, batch, onConfirm, onCancel }: BatchPreflightModalProps) {
+  const { engine } = useWorkflow();
+  const [dispatching, setDispatching] = useState(false);
+  const [mergeMode, setMergeMode] = useState<string>('push');
+
+  useEffect(() => {
+    if (open) setDispatching(false);
+  }, [open]);
+
+  if (!batch) return null;
+
+  const totalScopes = batch.scope_ids.length;
+  // Get the batch target edge to derive the action description
+  const targetStatus = engine.getBatchTargetStatus(batch.target_column);
+  const edge = targetStatus ? engine.findEdge(batch.target_column, targetStatus) : undefined;
+  const action = edge?.description ?? 'Will dispatch this batch';
+
+  const handleConfirm = () => {
+    setDispatching(true);
+    onConfirm(mergeMode);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent className="sm:max-w-md p-0 gap-0 overflow-hidden">
+        <DialogHeader className="px-4 pt-3 pb-2">
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Package className="h-4 w-4 text-amber-400" />
+            Dispatch Batch: {batch.name}
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            {action} ({totalScopes} scope{totalScopes !== 1 ? 's' : ''})
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Scope list */}
+        <div className="max-h-48 overflow-y-auto space-y-1 bg-[#0a0a12] px-4 py-3">
+          {batch.scopes.map((ss) => (
+            <div key={ss.scope_id} className="flex items-center gap-2 text-xs">
+              <span className="font-mono text-muted-foreground w-8 shrink-0">
+                {formatScopeId(ss.scope_id)}
+              </span>
+              <span className="truncate flex-1">{ss.title}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Merge mode selector */}
+        <div className="px-4 py-2 border-t border-border/50 space-y-1.5">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Merge Mode</span>
+          <div className="flex gap-2">
+            {['push', 'pr', 'direct'].map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setMergeMode(mode)}
+                className={`rounded px-2 py-1 text-xs transition-colors ${
+                  mergeMode === mode
+                    ? 'bg-cyan-600/80 text-black'
+                    : 'bg-muted text-muted-foreground hover:bg-accent'
+                }`}
+              >
+                {mode === 'push' ? 'Push' : mode === 'pr' ? 'PR' : 'Direct Merge'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 px-4 py-2 border-t border-border/50">
+          <Button variant="ghost" size="sm" onClick={onCancel} disabled={dispatching}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleConfirm}
+            disabled={dispatching || totalScopes === 0}
+            className="bg-cyan-600/80 hover:bg-cyan-500/80 transition-colors"
+          >
+            {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
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/CardDisplayToggle.tsx

@@ -0,0 +1,74 @@
+import { SlidersHorizontal } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { CardDisplayConfig } from '@/types';
+
+interface CardDisplayToggleProps {
+  display: CardDisplayConfig;
+  onToggle: (field: keyof CardDisplayConfig) => void;
+  hiddenCount: number;
+}
+
+const FIELDS: { key: keyof CardDisplayConfig; label: string }[] = [
+  { key: 'effort', label: 'Effort' },
+  { key: 'category', label: 'Category' },
+  { key: 'priority', label: 'Priority' },
+  { key: 'tags', label: 'Tags' },
+];
+
+export function CardDisplayToggle({ display, onToggle, hiddenCount }: CardDisplayToggleProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 backdrop-blur-sm bg-white/[0.03] border-white/10"
+          aria-label="Toggle card display fields"
+        >
+          <SlidersHorizontal className="h-3 w-3" />
+          Display
+          {hiddenCount > 0 && (
+            <span className="ml-0.5 rounded-full bg-white/10 px-1.5 text-[10px]">
+              {hiddenCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" className="filter-popover-glass !bg-transparent w-40">
+        <div className="space-y-0.5">
+          {FIELDS.map(({ key, label }) => {
+            const checked = display[key];
+            return (
+              <button
+                key={key}
+                onClick={() => onToggle(key)}
+                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]',
+                )}
+              >
+                <span
+                  className={cn(
+                    'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border',
+                    checked ? 'border-primary bg-primary text-primary-foreground' : '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>
+                <span className={cn('capitalize', checked && 'text-foreground')}>{label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ColumnHeaderActions.tsx

@@ -0,0 +1,55 @@
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useWorkflow } from '@/hooks/useWorkflow';
+import type { Sprint } from '@/types';
+
+interface ColumnHeaderActionsProps {
+  columnId: string;
+  dispatching?: boolean;
+  onOpenIdeaForm?: () => void;
+  onCreateGroup?: (name: string, options: { target_column: string; group_type: 'sprint' | 'batch' }) => Promise<Sprint | null>;
+}
+
+export function ColumnHeaderActions({ columnId, dispatching, onOpenIdeaForm, onCreateGroup }: ColumnHeaderActionsProps) {
+  const { engine } = useWorkflow();
+
+  const entryPointId = engine.getEntryPoint().id;
+  const list = engine.getList(columnId);
+  const isBatchColumn = list?.supportsBatch ?? false;
+  const isSprintColumn = list?.supportsSprint ?? false;
+  const isEntryPoint = columnId === entryPointId;
+
+  if (isEntryPoint && onOpenIdeaForm) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="ml-1 h-5 w-5"
+        onClick={onOpenIdeaForm}
+        disabled={dispatching}
+        title="Add idea"
+      >
+        <Plus className="h-3 w-3" />
+      </Button>
+    );
+  }
+
+  if ((isSprintColumn || isBatchColumn) && onCreateGroup) {
+    const groupType = isBatchColumn ? 'batch' : 'sprint';
+    const label = isBatchColumn ? 'Batch' : 'Sprint';
+
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="ml-1 h-5 w-5"
+        onClick={() => onCreateGroup(`New ${label}`, { target_column: columnId, group_type: groupType })}
+        title={`Create ${label.toLowerCase()}`}
+      >
+        <Plus className="h-3 w-3" />
+      </Button>
+    );
+  }
+
+  return null;
+}

package/src/components/ColumnMenu.tsx

@@ -0,0 +1,99 @@
+import { MoreVertical, ChevronUp, ChevronDown, Eye, EyeOff } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import type { SortField, SortDirection } from '@/hooks/useBoardSettings';
+
+interface ColumnMenuProps {
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSetSort: (field: SortField) => void;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+const SORT_OPTIONS: { field: SortField; label: string }[] = [
+  { field: 'id', label: 'Scope ID' },
+  { field: 'priority', label: 'Priority' },
+  { field: 'effort', label: 'Effort' },
+  { field: 'updated_at', label: 'Last Updated' },
+  { field: 'created_at', label: 'Created' },
+  { field: 'title', label: 'Alphabetical' },
+];
+
+export function ColumnMenu({
+  sortField,
+  sortDirection,
+  onSetSort,
+  collapsed,
+  onToggleCollapse,
+}: ColumnMenuProps) {
+  const Arrow = sortDirection === 'asc' ? ChevronUp : ChevronDown;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-white/[0.06] hover:text-foreground"
+          aria-label="Column menu"
+        >
+          <MoreVertical className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent className="filter-popover-glass !bg-transparent w-44" align="end">
+        {/* Sort options */}
+        <div className="space-y-0.5">
+          <p className="px-2 pb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            Sort by
+          </p>
+          {SORT_OPTIONS.map((opt) => {
+            const isActive = sortField === opt.field;
+            return (
+              <button
+                key={opt.field}
+                onClick={() => onSetSort(opt.field)}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors',
+                  'hover:bg-white/[0.06]',
+                  isActive && 'bg-white/[0.06]',
+                )}
+              >
+                {/* Radio indicator */}
+                <span
+                  className={cn(
+                    'flex h-3 w-3 shrink-0 items-center justify-center rounded-full border',
+                    isActive ? 'border-primary bg-primary' : 'border-white/15',
+                  )}
+                >
+                  {isActive && <span className="h-1.5 w-1.5 rounded-full bg-white" />}
+                </span>
+
+                <span className={cn('flex-1 text-left', isActive && 'text-foreground')}>
+                  {opt.label}
+                </span>
+
+                {isActive && <Arrow className="h-3 w-3 text-muted-foreground" />}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Separator */}
+        <div className="my-1.5 border-t border-white/10" />
+
+        {/* Collapse toggle */}
+        <button
+          onClick={onToggleCollapse}
+          className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors hover:bg-white/[0.06]"
+        >
+          {collapsed ? (
+            <Eye className="h-3 w-3 text-muted-foreground" />
+          ) : (
+            <EyeOff className="h-3 w-3 text-muted-foreground" />
+          )}
+          <span>{collapsed ? 'Expand column' : 'Collapse column'}</span>
+        </button>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/DeployHistory.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { format, formatDistanceToNow } from 'date-fns';
+import {
+  Rocket,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import type { Deployment, DeployStatus } from '@/types';
+
+const STATUS_CONFIG: Record<DeployStatus, {
+  icon: typeof CheckCircle2;
+  color: string;
+  label: string;
+  animate?: string;
+}> = {
+  deploying: { icon: Loader2, color: 'text-accent-blue', label: 'Deploying', animate: 'animate-spin' },
+  healthy: { icon: CheckCircle2, color: 'text-bid-green', label: 'Healthy' },
+  failed: { icon: XCircle, color: 'text-ask-red', label: 'Failed' },
+  'rolled-back': { icon: XCircle, color: 'text-warning-amber', label: 'Rolled Back' },
+};
+
+const DEFAULT_VISIBLE = 20;
+
+interface Props {
+  deployments: Deployment[];
+}
+
+function groupByDate(deployments: Deployment[]): Map<string, Deployment[]> {
+  const groups = new Map<string, Deployment[]>();
+  for (const d of deployments) {
+    const dateKey = d.started_at ? format(new Date(d.started_at), 'yyyy-MM-dd') : 'Unknown';
+    const existing = groups.get(dateKey);
+    if (existing) {
+      existing.push(d);
+    } else {
+      groups.set(dateKey, [d]);
+    }
+  }
+  return groups;
+}
+
+function computeDuration(d: Deployment): string | null {
+  if (!d.started_at || !d.completed_at) return null;
+  const ms = new Date(d.completed_at).getTime() - new Date(d.started_at).getTime();
+  if (ms < 1000) return '<1s';
+  if (ms < 60_000) return `${Math.round(ms / 1000)}s`;
+  return `${Math.round(ms / 60_000)}m`;
+}
+
+export function DeployHistory({ deployments }: Props) {
+  const [showAll, setShowAll] = useState(false);
+  const visible = showAll ? deployments : deployments.slice(0, DEFAULT_VISIBLE);
+  const grouped = groupByDate(visible);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">
+          Deployment History
+          <Badge variant="secondary" className="ml-2">
+            {deployments.length}
+          </Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {deployments.length === 0 ? (
+          <div className="py-8 text-center">
+            <Rocket className="mx-auto mb-3 h-10 w-10 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">
+              No deployments recorded yet.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {[...grouped.entries()].map(([dateKey, deploys]) => (
+              <div key={dateKey}>
+                <div className="sticky top-0 z-10 bg-card pb-1 pt-0.5">
+                  <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
+                    {dateKey === 'Unknown' ? 'Unknown date' : format(new Date(dateKey), 'EEEE, MMM d')}
+                  </span>
+                </div>
+                <div className="space-y-0.5">
+                  {deploys.map((deploy) => {
+                    const config = STATUS_CONFIG[deploy.status];
+                    const Icon = config.icon;
+                    const duration = computeDuration(deploy);
+                    return (
+                      <div
+                        key={deploy.id}
+                        className="flex items-center gap-4 rounded px-2.5 py-1.5 transition-colors hover:bg-surface-light"
+                      >
+                        <Icon className={cn('h-4 w-4 shrink-0', config.color, config.animate)} />
+                        <Badge variant="outline" className="capitalize shrink-0">
+                          {deploy.environment}
+                        </Badge>
+                        <span className="text-xs font-normal shrink-0">{config.label}</span>
+                        {deploy.commit_sha && (
+                          <code className="font-mono text-xs text-muted-foreground shrink-0">
+                            {deploy.commit_sha.slice(0, 7)}
+                          </code>
+                        )}
+                        {deploy.branch && (
+                          <span className="truncate text-xs text-muted-foreground">
+                            {deploy.branch}
+                          </span>
+                        )}
+                        {duration && (
+                          <span className="font-mono text-xs text-muted-foreground/60 shrink-0">
+                            {duration}
+                          </span>
+                        )}
+                        <span className="ml-auto text-xs text-muted-foreground/60 shrink-0">
+                          {deploy.started_at
+                            ? formatDistanceToNow(new Date(deploy.started_at), { addSuffix: true })
+                            : '—'}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+
+            {!showAll && deployments.length > DEFAULT_VISIBLE && (
+              <button
+                onClick={() => setShowAll(true)}
+                className="w-full rounded border border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-surface-light hover:text-foreground"
+              >
+                Show all {deployments.length} deployments
+              </button>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/DispatchModal.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect } from 'react';
+import { ArrowRight, AlertTriangle, Terminal, Check } 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 { cn, formatScopeId } from '@/lib/utils';
+import type { WorkflowEdge } from '../../shared/workflow-config';
+import type { Scope } from '@/types';
+
+interface DispatchModalProps {
+  open: boolean;
+  scope: Scope | null;
+  transition: WorkflowEdge | null;
+  hasActiveSession: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function DispatchModal({
+  open,
+  scope,
+  transition,
+  hasActiveSession,
+  onConfirm,
+  onCancel,
+}: DispatchModalProps) {
+  const [checked, setChecked] = useState<Set<number>>(new Set());
+  const [loading, setLoading] = useState(false);
+
+  const checklist = transition?.checklist ?? [];
+  const allChecked = checklist.length === 0 || checked.size === checklist.length;
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (open) {
+      setChecked(new Set());
+      setLoading(false);
+    }
+  }, [open]);
+
+  if (!scope || !transition) return null;
+
+  const command = transition.command?.replace('{id}', String(scope.id)) ?? null;
+
+  function toggleCheck(idx: number) {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  }
+
+  async function handleConfirm() {
+    setLoading(true);
+    onConfirm();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onCancel(); }}>
+      <DialogContent className="max-w-md p-0 gap-0">
+        <DialogHeader className="px-5 pt-4 pb-3">
+          {/* Transition arrow */}
+          <div className="flex items-center gap-2 mb-2">
+            <Badge variant="outline" className="text-xxs capitalize">{transition.from}</Badge>
+            <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+            <Badge variant="default" className="text-xxs capitalize [color:#000]">{transition.to}</Badge>
+          </div>
+          <DialogTitle className="text-sm font-normal">
+            {transition.label}
+          </DialogTitle>
+          <DialogDescription className="text-xs text-muted-foreground mt-1">
+            {transition.description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="px-5 pb-4 space-y-3">
+          {/* Scope info */}
+          <div className="flex items-center gap-2 text-xs">
+            <span className="font-mono text-muted-foreground">{formatScopeId(scope.id)}</span>
+            <span className="font-light truncate">{scope.title}</span>
+            {scope.category && (
+              <Badge variant="secondary" className="ml-auto text-xxs">{scope.category}</Badge>
+            )}
+          </div>
+
+          {/* Command block */}
+          {command && (
+            <div className="flex items-center gap-2 rounded border border-border bg-black/40 px-3 py-2">
+              <Terminal className="h-3.5 w-3.5 shrink-0 text-primary" />
+              <code className="text-xs font-mono text-primary">{command}</code>
+            </div>
+          )}
+
+          {/* Checklist */}
+          {checklist.length > 0 && (
+            <div className="space-y-1.5">
+              <p className="text-xxs font-medium text-muted-foreground uppercase tracking-wider">
+                Pre-launch checklist
+              </p>
+              {checklist.map((item, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => toggleCheck(idx)}
+                  className={cn(
+                    'flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-xs text-left transition-colors',
+                    checked.has(idx)
+                      ? 'bg-primary/10 text-foreground'
+                      : 'bg-muted/30 text-muted-foreground hover:bg-muted/50'
+                  )}
+                >
+                  <div className={cn(
+                    'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border transition-colors',
+                    checked.has(idx)
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-muted-foreground/30'
+                  )}>
+                    {checked.has(idx) && <Check className="h-2.5 w-2.5" />}
+                  </div>
+                  <span className="font-light">{item}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Active session warning */}
+          {hasActiveSession && (
+            <div className={cn(
+              'flex items-start gap-2 rounded border px-3 py-2 text-xs',
+              'border-warning-amber/30 bg-warning-amber/10 text-warning-amber'
+            )}>
+              <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>A CLI session is already running for this scope. Launching will start a new one.</span>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 pt-1">
+            <Button
+              onClick={handleConfirm}
+              disabled={!allChecked || loading}
+              className="flex-1"
+            >
+              {loading ? 'Launching...' : command ? 'Launch in iTerm' : 'Confirm Move'}
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={onCancel}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}