orbital-command 0.2.0 → 1.0.0

package/src/components/DriftSidebar.tsx

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

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

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

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

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

package/src/components/IdeaDetailModal.tsx

@@ -1,190 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { Trash2, Check, X, Sparkles } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import type { Scope } from '@/types';
-
-interface IdeaDetailModalProps {
-  scope: Scope | null;
-  open: boolean;
-  onClose: () => void;
-  onDelete: (id: number) => void;
-  onApprove: (id: number) => void;
-  onReject: (id: number) => void;
-}
-
-export function IdeaDetailModal({ scope, open, onClose, onDelete, onApprove, onReject }: IdeaDetailModalProps) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [savedTitle, setSavedTitle] = useState('');
-  const [savedDescription, setSavedDescription] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const titleRef = useRef<HTMLInputElement>(null);
-
-  const isGhost = !!scope?.is_ghost;
-  const isDirty = title !== savedTitle || description !== savedDescription;
-
-  // Sync state when scope changes
-  useEffect(() => {
-    if (scope && open) {
-      const t = scope.title ?? '';
-      const d = scope.raw_content ?? '';
-      setTitle(t);
-      setDescription(d);
-      setSavedTitle(t);
-      setSavedDescription(d);
-      setConfirmDelete(false);
-      if (!isGhost) setTimeout(() => titleRef.current?.focus(), 100);
-    }
-  }, [scope?.id, open]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const save = useCallback(async () => {
-    if (!scope || !isDirty || saving || isGhost) return;
-    setSaving(true);
-    try {
-      const res = await fetch(`/api/orbital/ideas/${scope.id}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title, description }),
-      });
-      if (res.ok) {
-        setSavedTitle(title);
-        setSavedDescription(description);
-      }
-    } finally {
-      setSaving(false);
-    }
-  }, [scope, title, description, isDirty, saving, isGhost]);
-
-  // Auto-save every 10s when dirty (not for ghosts)
-  useEffect(() => {
-    if (!isDirty || !open || isGhost) return;
-    const timer = setInterval(() => { save(); }, 10_000);
-    return () => clearInterval(timer);
-  }, [isDirty, open, save, isGhost]);
-
-  function handleClose() {
-    if (isDirty && !isGhost) {
-      if (window.confirm('Save changes before closing?')) {
-        save().then(onClose);
-        return;
-      }
-    }
-    onClose();
-  }
-
-  function handleDelete() {
-    if (!confirmDelete) {
-      setConfirmDelete(true);
-      return;
-    }
-    if (scope) onDelete(scope.id);
-  }
-
-  if (!scope) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) handleClose(); }}>
-      <DialogContent className="max-w-md p-0 gap-0 flex flex-col max-h-[70vh]">
-        {/* Header */}
-        <DialogHeader className="px-4 pt-3 pb-2">
-          <div className="flex items-center gap-2 pr-8">
-            <div className="flex-1 min-w-0">
-              {isGhost ? (
-                <div className="flex items-center gap-2">
-                  <Sparkles className="h-3.5 w-3.5 text-purple-400 shrink-0" />
-                  <span className="text-sm font-normal text-foreground truncate">{title}</span>
-                </div>
-              ) : (
-                <input
-                  ref={titleRef}
-                  className="w-full bg-transparent text-sm font-normal text-foreground border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground"
-                  placeholder="Idea title..."
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                />
-              )}
-            </div>
-            {isGhost ? (
-              <span className="shrink-0 rounded border border-purple-500/30 bg-purple-500/10 px-1.5 py-0.5 text-[10px] text-purple-400 uppercase">
-                ai suggestion
-              </span>
-            ) : confirmDelete ? (
-              <div className="flex items-center gap-1">
-                <Button size="sm" variant="destructive" className="h-6 text-xxs" onClick={handleDelete}>
-                  Confirm
-                </Button>
-                <Button size="sm" variant="ghost" className="h-6 text-xxs" onClick={() => setConfirmDelete(false)}>
-                  No
-                </Button>
-              </div>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6 shrink-0 text-muted-foreground hover:text-destructive"
-                onClick={handleDelete}
-                title="Delete idea"
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            )}
-          </div>
-        </DialogHeader>
-
-        {/* Description */}
-        <div className="flex-1 min-h-0 px-4 pb-4">
-          {isGhost ? (
-            <div className="w-full min-h-[200px] rounded bg-muted/20 px-3 py-2.5 text-xs text-foreground/80 border border-border/50 whitespace-pre-wrap">
-              {description || <span className="text-muted-foreground italic">No description</span>}
-            </div>
-          ) : (
-            <textarea
-              className="w-full h-full min-h-[200px] rounded bg-muted/30 px-3 py-2.5 text-xs text-foreground border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 resize-none placeholder:text-muted-foreground"
-              placeholder="Describe the idea... What problem does it solve? Any notes on approach?"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        {isGhost ? (
-          <div className="px-4 pb-3 flex items-center gap-2">
-            <Button
-              size="sm"
-              className="flex-1 bg-green-600/20 border border-green-500/30 text-green-400 hover:bg-green-600/30 hover:text-green-300"
-              onClick={() => onApprove(scope.id)}
-            >
-              <Check className="h-3.5 w-3.5 mr-1.5" />
-              Approve
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
-              onClick={() => onReject(scope.id)}
-            >
-              <X className="h-3.5 w-3.5 mr-1.5" />
-              Reject
-            </Button>
-          </div>
-        ) : (
-          <div className="px-4 pb-3 flex items-center justify-between text-xxs text-muted-foreground">
-            <span>
-              {saving ? 'Saving...' : isDirty ? 'Unsaved changes' : 'Saved'}
-            </span>
-            <Button size="sm" variant="ghost" className="h-6" onClick={() => save()} disabled={!isDirty || saving}>
-              Save
-            </Button>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}