orbital-command 0.1.0

package/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'card-glass inline-flex h-8 items-center justify-center rounded bg-surface p-0.5 border border-border text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1 text-xxs uppercase tracking-wider font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface-light data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/toggle-switch.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ checked, onCheckedChange, disabled }: ToggleSwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors duration-200',
+        checked
+          ? 'border-[rgba(0,188,212,0.4)] bg-[rgba(0,188,212,0.25)]'
+          : 'border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.05)]',
+        disabled && 'cursor-not-allowed opacity-40'
+      )}
+    >
+      <span
+        className={cn(
+          'pointer-events-none block h-3.5 w-3.5 rounded-full transition-all duration-200',
+          checked
+            ? 'translate-x-[18px] bg-[rgb(0,188,212)] shadow-[0_0_8px_rgba(0,188,212,0.5)]'
+            : 'translate-x-[2px] bg-[rgba(255,255,255,0.4)]'
+        )}
+      />
+    </button>
+  );
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'card-glass z-50 overflow-hidden rounded border bg-popover px-2 py-1 text-xxs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/workflow/AddEdgeDialog.tsx

@@ -0,0 +1,217 @@
+import { useState, useMemo, useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { X, Plus } from 'lucide-react';
+import type { WorkflowEdge, WorkflowConfig, EdgeDirection, ConfirmLevel } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface AddEdgeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: WorkflowConfig;
+  onAdd: (edge: WorkflowEdge) => void;
+}
+
+const DIRECTIONS: EdgeDirection[] = ['forward', 'backward', 'shortcut'];
+const CONFIRM_LEVELS: ConfirmLevel[] = ['quick', 'full'];
+
+const DIRECTION_COLORS: Record<string, string> = {
+  forward: '#22c55e',
+  backward: '#f59e0b',
+  shortcut: '#6366f1',
+};
+
+// ─── Component ──────────────────────────────────────────
+
+export function AddEdgeDialog({ open, onOpenChange, config, onAdd }: AddEdgeDialogProps) {
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  const [direction, setDirection] = useState<EdgeDirection>('forward');
+  const [label, setLabel] = useState('');
+  const [command, setCommand] = useState('');
+  const [confirmLevel, setConfirmLevel] = useState<ConfirmLevel>('quick');
+
+  const listIds = useMemo(() => config.lists.map((l) => l.id), [config.lists]);
+
+  const errors = useMemo(() => {
+    const errs: string[] = [];
+    if (!from) errs.push('From is required');
+    if (!to) errs.push('To is required');
+    if (from && to && from === to) errs.push('From and To must be different');
+    if (from && to && config.edges.some((e) => e.from === from && e.to === to)) {
+      errs.push('An edge with this from:to already exists');
+    }
+    if (!label.trim()) errs.push('Label is required');
+    return errs;
+  }, [from, to, label, config.edges]);
+
+  const resetForm = useCallback(() => {
+    setFrom('');
+    setTo('');
+    setDirection('forward');
+    setLabel('');
+    setCommand('');
+    setConfirmLevel('quick');
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (errors.length > 0) return;
+    const edge: WorkflowEdge = {
+      from,
+      to,
+      direction,
+      label: label.trim(),
+      description: `Transition from ${from} to ${to}`,
+      command: command.trim() || null,
+      confirmLevel,
+    };
+    onAdd(edge);
+    resetForm();
+    onOpenChange(false);
+  }, [errors, from, to, direction, label, command, confirmLevel, onAdd, resetForm, onOpenChange]);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
+        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-96 -translate-x-1/2 -translate-y-1/2 rounded-lg border border-zinc-800 bg-zinc-900 shadow-xl">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
+            <Dialog.Title className="flex items-center gap-2 text-sm font-medium text-zinc-100">
+              <Plus className="h-4 w-4 text-cyan-400" />
+              Add Edge
+            </Dialog.Title>
+            <Dialog.Close className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
+              <X className="h-4 w-4" />
+            </Dialog.Close>
+          </div>
+
+          {/* Form */}
+          <div className="space-y-4 p-5 text-xs">
+            {/* From / To */}
+            <div className="grid grid-cols-2 gap-3">
+              <FieldGroup label="From">
+                <select
+                  value={from}
+                  onChange={(e) => setFrom(e.target.value)}
+                  className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
+                >
+                  <option value="">Select...</option>
+                  {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
+                </select>
+              </FieldGroup>
+              <FieldGroup label="To">
+                <select
+                  value={to}
+                  onChange={(e) => setTo(e.target.value)}
+                  className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
+                >
+                  <option value="">Select...</option>
+                  {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
+                </select>
+              </FieldGroup>
+            </div>
+
+            {/* Direction */}
+            <FieldGroup label="Direction">
+              <div className="flex gap-1">
+                {DIRECTIONS.map((d) => {
+                  const color = DIRECTION_COLORS[d];
+                  return (
+                    <button
+                      key={d}
+                      onClick={() => setDirection(d)}
+                      className="flex-1 rounded px-2 py-1.5 text-[10px] font-medium uppercase transition-colors"
+                      style={{
+                        backgroundColor: direction === d ? `${color}20` : 'transparent',
+                        color: direction === d ? color : '#71717a',
+                        border: `1px solid ${direction === d ? `${color}40` : '#27272a'}`,
+                      }}
+                    >
+                      {d}
+                    </button>
+                  );
+                })}
+              </div>
+            </FieldGroup>
+
+            {/* Label */}
+            <FieldGroup label="Label">
+              <input
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+                placeholder="e.g. Implement"
+              />
+            </FieldGroup>
+
+            {/* Command */}
+            <FieldGroup label="Command (optional)">
+              <input
+                value={command}
+                onChange={(e) => setCommand(e.target.value)}
+                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+                placeholder="/scope-implement {id}"
+              />
+            </FieldGroup>
+
+            {/* Confirm Level */}
+            <FieldGroup label="Confirm Level">
+              <div className="flex gap-1">
+                {CONFIRM_LEVELS.map((cl) => (
+                  <button
+                    key={cl}
+                    onClick={() => setConfirmLevel(cl)}
+                    className="flex-1 rounded px-2 py-1.5 text-[10px] font-medium uppercase transition-colors"
+                    style={{
+                      backgroundColor: confirmLevel === cl ? '#22c55e20' : 'transparent',
+                      color: confirmLevel === cl ? '#22c55e' : '#71717a',
+                      border: `1px solid ${confirmLevel === cl ? '#22c55e40' : '#27272a'}`,
+                    }}
+                  >
+                    {cl}
+                  </button>
+                ))}
+              </div>
+            </FieldGroup>
+
+            {/* Errors */}
+            {errors.length > 0 && from.length > 0 && to.length > 0 && (
+              <div className="rounded border border-red-500/30 bg-red-500/10 p-2.5">
+                {errors.map((e) => (
+                  <p key={e} className="text-[10px] text-red-400">{e}</p>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-4">
+            <Dialog.Close className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
+              Cancel
+            </Dialog.Close>
+            <button
+              onClick={handleSubmit}
+              disabled={errors.length > 0}
+              className="flex items-center gap-1.5 rounded bg-cyan-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-cyan-500 disabled:opacity-40"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              Add Edge
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</label>
+      {children}
+    </div>
+  );
+}

package/src/components/workflow/AddListDialog.tsx

@@ -0,0 +1,201 @@
+import { useState, useMemo, useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { X, Plus } from 'lucide-react';
+import type { WorkflowList, WorkflowConfig } from '../../../shared/workflow-config';
+
+// ─── Types ──────────────────────────────────────────────
+
+interface AddListDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: WorkflowConfig;
+  onAdd: (list: WorkflowList) => void;
+}
+
+// ─── Color Utility ──────────────────────────────────────
+
+function hexToHsl(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return `0 0% ${Math.round(l * 100)}%`;
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+// ─── Component ──────────────────────────────────────────
+
+export function AddListDialog({ open, onOpenChange, config, onAdd }: AddListDialogProps) {
+  const [id, setId] = useState('');
+  const [label, setLabel] = useState('');
+  const [hex, setHex] = useState('#3b82f6');
+  const [group, setGroup] = useState('');
+
+  const existingGroups = useMemo(() => {
+    const groups = new Set(config.lists.map((l) => l.group).filter(Boolean));
+    return [...groups] as string[];
+  }, [config.lists]);
+
+  const maxOrder = useMemo(() => {
+    return Math.max(0, ...config.lists.map((l) => l.order));
+  }, [config.lists]);
+
+  const errors = useMemo(() => {
+    const errs: string[] = [];
+    if (!id) errs.push('ID is required');
+    else if (!/^[a-z0-9-]+$/.test(id)) errs.push('ID must be lowercase alphanumeric + hyphens');
+    else if (config.lists.some((l) => l.id === id)) errs.push('ID already exists');
+    if (!label.trim()) errs.push('Label is required');
+    return errs;
+  }, [id, label, config.lists]);
+
+  const resetForm = useCallback(() => {
+    setId('');
+    setLabel('');
+    setHex('#3b82f6');
+    setGroup('');
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (errors.length > 0) return;
+    const newList: WorkflowList = {
+      id,
+      label: label.trim(),
+      order: maxOrder + 1,
+      color: hexToHsl(hex),
+      hex,
+      hasDirectory: true,
+      ...(group ? { group } : {}),
+    };
+    onAdd(newList);
+    resetForm();
+    onOpenChange(false);
+  }, [errors, id, label, hex, group, maxOrder, onAdd, resetForm, onOpenChange]);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
+        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-96 -translate-x-1/2 -translate-y-1/2 rounded-lg border border-zinc-800 bg-zinc-900 shadow-xl">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
+            <Dialog.Title className="flex items-center gap-2 text-sm font-medium text-zinc-100">
+              <Plus className="h-4 w-4 text-cyan-400" />
+              Add List
+            </Dialog.Title>
+            <Dialog.Close className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
+              <X className="h-4 w-4" />
+            </Dialog.Close>
+          </div>
+
+          {/* Form */}
+          <div className="space-y-4 p-5 text-xs">
+            {/* Preview */}
+            <div className="flex items-center gap-3 rounded border border-zinc-800 bg-zinc-950/50 p-3">
+              <div className="h-5 w-5 rounded" style={{ backgroundColor: hex }} />
+              <div>
+                <p className="text-sm text-zinc-200">{label || 'New List'}</p>
+                <p className="font-mono text-[10px] text-zinc-500">{id || 'list-id'}</p>
+              </div>
+            </div>
+
+            {/* ID */}
+            <FieldGroup label="ID">
+              <input
+                value={id}
+                onChange={(e) => setId(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
+                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+                placeholder="e.g. review"
+                autoFocus
+              />
+            </FieldGroup>
+
+            {/* Label */}
+            <FieldGroup label="Label">
+              <input
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
+                placeholder="e.g. Review"
+              />
+            </FieldGroup>
+
+            {/* Color */}
+            <FieldGroup label="Color">
+              <div className="flex items-center gap-2">
+                <input
+                  type="color"
+                  value={hex}
+                  onChange={(e) => setHex(e.target.value)}
+                  className="h-8 w-8 cursor-pointer rounded border border-zinc-700 bg-zinc-800 p-0.5"
+                />
+                <input
+                  value={hex}
+                  onChange={(e) => setHex(e.target.value)}
+                  className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none focus:border-zinc-500"
+                />
+              </div>
+            </FieldGroup>
+
+            {/* Group */}
+            <FieldGroup label="Group">
+              <select
+                value={group}
+                onChange={(e) => setGroup(e.target.value)}
+                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
+              >
+                <option value="">None</option>
+                {existingGroups.map((g) => (
+                  <option key={g} value={g}>{g}</option>
+                ))}
+              </select>
+            </FieldGroup>
+
+            {/* Errors */}
+            {errors.length > 0 && id.length > 0 && (
+              <div className="rounded border border-red-500/30 bg-red-500/10 p-2.5">
+                {errors.map((e) => (
+                  <p key={e} className="text-[10px] text-red-400">{e}</p>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-4">
+            <Dialog.Close className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
+              Cancel
+            </Dialog.Close>
+            <button
+              onClick={handleSubmit}
+              disabled={errors.length > 0}
+              className="flex items-center gap-1.5 rounded bg-cyan-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-cyan-500 disabled:opacity-40"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              Add List
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</label>
+      {children}
+    </div>
+  );
+}