orbital-command 0.2.0 → 0.3.0

package/src/components/workflow/PresetSelector.tsx

@@ -1,414 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { ChevronDown, Download, Save, Trash2, AlertTriangle, ArrowRight, FolderInput, Plus, Minus } from 'lucide-react';
-
-interface PresetInfo {
-  name: string;
-  isDefault: boolean;
-}
-
-interface OrphanedScope {
-  listId: string;
-  scopeFiles: string[];
-}
-
-interface MigrationPlan {
-  valid: boolean;
-  validationErrors: string[];
-  removedLists: string[];
-  addedLists: string[];
-  dirsToCreate: string[];
-  dirsToRemove: string[];
-  orphanedScopes: OrphanedScope[];
-  lostEdges: Array<{ from: string; to: string }>;
-  suggestedMappings: Record<string, string>;
-  impactSummary: string;
-}
-
-interface PresetSelectorProps {
-  activeConfigName: string;
-}
-
-export function PresetSelector({ activeConfigName }: PresetSelectorProps) {
-  const [presets, setPresets] = useState<PresetInfo[]>([]);
-  const [open, setOpen] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [saveName, setSaveName] = useState('');
-  const [showSaveInput, setShowSaveInput] = useState(false);
-
-  // Confirmation dialog state
-  const [confirm, setConfirm] = useState<{
-    presetName: string;
-    config: unknown;
-    plan: MigrationPlan;
-    mappings: Record<string, string>;
-    newListIds: string[];
-  } | null>(null);
-  const [applying, setApplying] = useState(false);
-
-  const fetchPresets = useCallback(async () => {
-    try {
-      const res = await fetch('/api/orbital/workflow/presets');
-      if (!res.ok) return;
-      const json: { success: boolean; data: PresetInfo[] } = await res.json();
-      if (json.success) setPresets(json.data);
-    } catch {
-      // Presets endpoint may not exist yet
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchPresets();
-  }, [fetchPresets]);
-
-  const loadPreset = async (name: string) => {
-    try {
-      // Step 1: Fetch the preset config
-      const presetRes = await fetch(`/api/orbital/workflow/presets/${encodeURIComponent(name)}`);
-      if (!presetRes.ok) return;
-      const presetJson: { success: boolean; data: unknown } = await presetRes.json();
-      if (!presetJson.success) return;
-
-      // Step 2: Preview the migration impact
-      const previewRes = await fetch('/api/orbital/workflow/preview', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(presetJson.data),
-      });
-      if (!previewRes.ok) return;
-      const previewJson: { success: boolean; data: MigrationPlan } = await previewRes.json();
-      if (!previewJson.success) return;
-
-      const plan = previewJson.data;
-
-      // If no impact at all, apply directly
-      if (plan.removedLists.length === 0 && plan.addedLists.length === 0 && plan.orphanedScopes.length === 0) {
-        await applyConfig(presetJson.data, {});
-        return;
-      }
-
-      // Extract list IDs from the new config for the mapping dropdowns
-      const configObj = presetJson.data as { lists?: Array<{ id: string }> };
-      const newListIds = (configObj.lists ?? []).map((l) => l.id);
-
-      // Step 3: Show confirmation dialog with the plan
-      setConfirm({
-        presetName: name,
-        config: presetJson.data,
-        plan,
-        mappings: { ...plan.suggestedMappings },
-        newListIds,
-      });
-      setOpen(false);
-    } catch {
-      // Silent fail — user can retry
-    }
-  };
-
-  const applyConfig = async (config: unknown, orphanMappings: Record<string, string>) => {
-    setApplying(true);
-    try {
-      await fetch('/api/orbital/workflow/apply', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ config, orphanMappings }),
-      });
-      setConfirm(null);
-      setOpen(false);
-    } catch {
-      // Silent fail
-    } finally {
-      setApplying(false);
-    }
-  };
-
-  const savePreset = async () => {
-    if (!saveName.trim()) return;
-    setSaving(true);
-    try {
-      await fetch('/api/orbital/workflow/presets', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: saveName.trim() }),
-      });
-      setSaveName('');
-      setShowSaveInput(false);
-      fetchPresets();
-    } catch {
-      // Silent fail
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const deletePreset = async (name: string) => {
-    try {
-      await fetch(`/api/orbital/workflow/presets/${encodeURIComponent(name)}`, { method: 'DELETE' });
-      fetchPresets();
-    } catch {
-      // Silent fail
-    }
-  };
-
-  return (
-    <div className="relative">
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-900 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:border-zinc-700 hover:text-zinc-100"
-      >
-        {activeConfigName}
-        <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
-      </button>
-
-      {open && (
-        <>
-          {/* Backdrop */}
-          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-
-          {/* Dropdown */}
-          <div className="absolute right-0 top-full z-50 mt-1.5 w-64 rounded-lg border border-zinc-800 bg-zinc-900/95 p-2 shadow-xl backdrop-blur">
-            <div className="mb-1 px-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
-              Presets
-            </div>
-
-            {presets.length === 0 ? (
-              <div className="px-2 py-3 text-center text-xs text-zinc-600">No presets saved</div>
-            ) : (
-              <div className="max-h-48 space-y-0.5 overflow-y-auto">
-                {presets.map((p) => (
-                  <div
-                    key={p.name}
-                    className="group flex items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-zinc-800"
-                  >
-                    <button onClick={() => loadPreset(p.name)} className="flex flex-1 items-center gap-2 text-left text-zinc-300">
-                      <Download className="h-3 w-3 text-zinc-600" />
-                      {p.name}
-                      {p.isDefault && <span className="text-[9px] text-zinc-600">(default)</span>}
-                    </button>
-                    {!p.isDefault && (
-                      <button
-                        onClick={() => deletePreset(p.name)}
-                        className="rounded p-0.5 text-zinc-600 opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100"
-                      >
-                        <Trash2 className="h-3 w-3" />
-                      </button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Save as preset */}
-            <div className="mt-2 border-t border-zinc-800 pt-2">
-              {showSaveInput ? (
-                <div className="flex gap-1.5">
-                  <input
-                    value={saveName}
-                    onChange={(e) => setSaveName(e.target.value)}
-                    onKeyDown={(e) => e.key === 'Enter' && savePreset()}
-                    placeholder="Preset name..."
-                    className="flex-1 rounded border border-zinc-700 bg-zinc-950 px-2 py-1 text-xs text-zinc-200 outline-none placeholder:text-zinc-700 focus:border-zinc-600"
-                    autoFocus
-                  />
-                  <button
-                    onClick={savePreset}
-                    disabled={saving || !saveName.trim()}
-                    className="rounded bg-zinc-800 px-2 py-1 text-xs text-zinc-300 hover:bg-zinc-700 disabled:opacity-50"
-                  >
-                    Save
-                  </button>
-                </div>
-              ) : (
-                <button
-                  onClick={() => setShowSaveInput(true)}
-                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
-                >
-                  <Save className="h-3 w-3" />
-                  Save current as preset
-                </button>
-              )}
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* Confirmation Dialog */}
-      {confirm && (
-        <ConfirmationDialog
-          presetName={confirm.presetName}
-          plan={confirm.plan}
-          mappings={confirm.mappings}
-          newListIds={confirm.newListIds}
-          applying={applying}
-          onUpdateMapping={(listId, target) => {
-            setConfirm((prev) =>
-              prev ? { ...prev, mappings: { ...prev.mappings, [listId]: target } } : prev,
-            );
-          }}
-          onConfirm={() => applyConfig(confirm.config, confirm.mappings)}
-          onCancel={() => setConfirm(null)}
-        />
-      )}
-    </div>
-  );
-}
-
-// ─── Confirmation Dialog ─────────────────────────────────────
-
-function ConfirmationDialog({ presetName, plan, mappings, newListIds, applying, onUpdateMapping, onConfirm, onCancel }: {
-  presetName: string;
-  plan: MigrationPlan;
-  mappings: Record<string, string>;
-  newListIds: string[];
-  applying: boolean;
-  onUpdateMapping: (listId: string, target: string) => void;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  const hasOrphans = plan.orphanedScopes.length > 0;
-
-  // Check all orphans have valid mappings
-  const allMapped = plan.orphanedScopes.every(
-    (o) => mappings[o.listId] && mappings[o.listId].trim().length > 0,
-  );
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm" onClick={onCancel} />
-
-      {/* Dialog */}
-      <div className="fixed inset-0 z-[61] flex items-center justify-center p-4">
-        <div className="w-full max-w-lg rounded-lg border border-zinc-800 bg-zinc-950 shadow-2xl" onClick={(e) => e.stopPropagation()}>
-          {/* Header */}
-          <div className="flex items-center gap-3 border-b border-zinc-800 px-5 py-4">
-            <AlertTriangle className="h-5 w-5 text-amber-400" />
-            <div>
-              <h3 className="text-sm font-medium text-zinc-100">Switch to "{presetName}"?</h3>
-              <p className="mt-0.5 text-xs text-zinc-500">This will change your workflow and may move scopes between lists.</p>
-            </div>
-          </div>
-
-          {/* Body */}
-          <div className="max-h-[60vh] overflow-y-auto px-5 py-4 space-y-4">
-            {/* Lists being removed */}
-            {plan.removedLists.length > 0 && (
-              <div>
-                <h4 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-zinc-300">
-                  <Minus className="h-3 w-3 text-red-400" />
-                  Lists being removed
-                </h4>
-                <div className="flex flex-wrap gap-1.5">
-                  {plan.removedLists.map((l) => (
-                    <span key={l} className="rounded bg-red-500/10 px-2 py-0.5 text-xs text-red-300 border border-red-500/20">
-                      {l}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Lists being added */}
-            {plan.addedLists.length > 0 && (
-              <div>
-                <h4 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-zinc-300">
-                  <Plus className="h-3 w-3 text-green-400" />
-                  Lists being added
-                </h4>
-                <div className="flex flex-wrap gap-1.5">
-                  {plan.addedLists.map((l) => (
-                    <span key={l} className="rounded bg-green-500/10 px-2 py-0.5 text-xs text-green-300 border border-green-500/20">
-                      {l}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Orphaned scopes — where they're being moved */}
-            {hasOrphans && (
-              <div>
-                <h4 className="mb-2 flex items-center gap-1.5 text-xs font-medium text-zinc-300">
-                  <FolderInput className="h-3 w-3 text-amber-400" />
-                  Scopes that need to move
-                </h4>
-                <p className="mb-3 text-xs text-zinc-500">
-                  These scopes are in lists being removed. Choose where each group should be moved.
-                </p>
-                <div className="space-y-3">
-                  {plan.orphanedScopes.map((orphan) => (
-                    <div key={orphan.listId} className="rounded border border-zinc-800 bg-zinc-900/50 p-3">
-                      <div className="flex items-center gap-2 text-xs">
-                        <span className="rounded bg-red-500/10 px-1.5 py-0.5 text-red-300 border border-red-500/20">
-                          {orphan.listId}
-                        </span>
-                        <ArrowRight className="h-3 w-3 text-zinc-600" />
-                        <select
-                          value={mappings[orphan.listId] ?? ''}
-                          onChange={(e) => onUpdateMapping(orphan.listId, e.target.value)}
-                          className="rounded border border-zinc-700 bg-zinc-950 px-2 py-1 text-xs text-zinc-200 outline-none focus:border-zinc-500"
-                        >
-                          <option value="">Select destination...</option>
-                          {newListIds.map((t) => (
-                            <option key={t} value={t}>{t}</option>
-                          ))}
-                        </select>
-                      </div>
-                      <div className="mt-2 text-xxs text-zinc-500">
-                        {orphan.scopeFiles.length} scope{orphan.scopeFiles.length !== 1 ? 's' : ''}:
-                        {' '}
-                        <span className="text-zinc-400">
-                          {orphan.scopeFiles.slice(0, 5).join(', ')}
-                          {orphan.scopeFiles.length > 5 && ` +${orphan.scopeFiles.length - 5} more`}
-                        </span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Lost edges */}
-            {plan.lostEdges.length > 0 && (
-              <div>
-                <h4 className="mb-1.5 text-xs font-medium text-zinc-300">Transitions being removed</h4>
-                <div className="space-y-1">
-                  {plan.lostEdges.map((e, i) => (
-                    <div key={i} className="flex items-center gap-1.5 text-xs text-zinc-500">
-                      <span>{e.from}</span>
-                      <ArrowRight className="h-3 w-3" />
-                      <span>{e.to}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Impact summary */}
-            {plan.impactSummary && (
-              <div className="rounded bg-zinc-900 px-3 py-2 text-xs text-zinc-400 border border-zinc-800">
-                {plan.impactSummary}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-3">
-            <button
-              onClick={onCancel}
-              className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={onConfirm}
-              disabled={applying || (hasOrphans && !allMapped)}
-              className="rounded bg-amber-500/20 border border-amber-500/30 px-3 py-1.5 text-xs text-amber-300 hover:bg-amber-500/30 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              {applying ? 'Applying...' : 'Confirm Switch'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

package/src/components/workflow/SkillCommandBuilder.tsx

@@ -1,174 +0,0 @@
-import { useState, useMemo, useRef, useCallback } from 'react';
-import { Terminal, X, AlertTriangle } from 'lucide-react';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface SkillCommandBuilderProps {
-  value: string | null;
-  onChange: (value: string | null) => void;
-  allowedPrefixes: string[];
-}
-
-interface TokenSegment {
-  text: string;
-  type: 'prefix' | 'arg' | 'placeholder';
-}
-
-// ─── Constants ──────────────────────────────────────────
-
-const EXAMPLE_SCOPE_ID = '093';
-
-const KNOWN_PREFIXES = ['/scope-', '/git-', '/test-', '/session-'];
-
-// ─── Component ──────────────────────────────────────────
-
-export function SkillCommandBuilder({ value, onChange, allowedPrefixes }: SkillCommandBuilderProps) {
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const prefixes = allowedPrefixes.length > 0 ? allowedPrefixes : KNOWN_PREFIXES;
-
-  const validation = useMemo(() => {
-    if (!value) return null;
-    const isAllowed = prefixes.some((p) => value.startsWith(p));
-    if (!isAllowed) {
-      return { valid: false, message: `Command must start with: ${prefixes.join(', ')}` };
-    }
-    return { valid: true, message: '' };
-  }, [value, prefixes]);
-
-  const preview = useMemo(() => {
-    if (!value) return null;
-    return value.replace('{id}', EXAMPLE_SCOPE_ID);
-  }, [value]);
-
-  const handleSuggestionClick = useCallback((prefix: string) => {
-    onChange(prefix + '{id}');
-    setShowSuggestions(false);
-    inputRef.current?.focus();
-  }, [onChange]);
-
-  const handleClear = useCallback(() => {
-    onChange(null);
-    setShowSuggestions(false);
-  }, [onChange]);
-
-  // Syntax-highlighted segments
-  const segments = useMemo(() => {
-    if (!value) return [];
-    const parts: TokenSegment[] = [];
-    const matchedPrefix = prefixes.find((p) => value.startsWith(p));
-
-    if (matchedPrefix) {
-      parts.push({ text: matchedPrefix, type: 'prefix' });
-      const rest = value.slice(matchedPrefix.length);
-      tokenize(rest, parts);
-    } else {
-      tokenize(value, parts);
-    }
-    return parts;
-  }, [value, prefixes]);
-
-  return (
-    <div className="space-y-2">
-      {/* Input field */}
-      <div className="relative">
-        <div className="flex items-center rounded border border-zinc-700 bg-zinc-800 focus-within:border-zinc-500">
-          <Terminal className="ml-2 h-3 w-3 shrink-0 text-zinc-600" />
-          <input
-            ref={inputRef}
-            value={value ?? ''}
-            onChange={(e) => onChange(e.target.value || null)}
-            onFocus={() => !value && setShowSuggestions(true)}
-            onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
-            className="flex-1 bg-transparent px-2 py-1.5 font-mono text-xs text-zinc-200 outline-none placeholder:text-zinc-600"
-            placeholder="/scope-implement {id}"
-          />
-          {value && (
-            <button
-              onClick={handleClear}
-              className="mr-1 rounded p-0.5 text-zinc-600 hover:text-zinc-300"
-            >
-              <X className="h-3 w-3" />
-            </button>
-          )}
-        </div>
-
-        {/* Autocomplete suggestions */}
-        {showSuggestions && !value && (
-          <div className="absolute left-0 top-full z-10 mt-1 w-full rounded border border-zinc-700 bg-zinc-800 py-1 shadow-xl">
-            {prefixes.map((prefix) => (
-              <button
-                key={prefix}
-                onMouseDown={() => handleSuggestionClick(prefix)}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-zinc-700"
-              >
-                <span className="font-mono text-cyan-400">{prefix.trim()}</span>
-                <span className="text-[9px] text-zinc-600">{'{id}'}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Syntax-highlighted preview */}
-      {value && segments.length > 0 && (
-        <div className="rounded border border-zinc-800 bg-zinc-950/70 px-2.5 py-1.5 font-mono text-xs">
-          {segments.map((seg, i) => (
-            <span
-              key={i}
-              style={{
-                color: seg.type === 'prefix' ? '#60a5fa'
-                  : seg.type === 'placeholder' ? '#facc15'
-                  : '#e4e4e7',
-              }}
-            >
-              {seg.text}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {/* Template preview */}
-      {preview && (
-        <div className="flex items-center gap-2">
-          <span className="text-[9px] text-zinc-600">Preview:</span>
-          <code className="text-[9px] font-mono text-zinc-400">{preview}</code>
-        </div>
-      )}
-
-      {/* Validation warning */}
-      {validation && !validation.valid && (
-        <div className="flex items-center gap-1.5 text-[9px] text-amber-400">
-          <AlertTriangle className="h-3 w-3 shrink-0" />
-          {validation.message}
-        </div>
-      )}
-
-      {/* Placeholder hint */}
-      <p className="text-[9px] text-zinc-600">
-        Use <code className="rounded bg-zinc-800 px-1 text-yellow-400">{'{id}'}</code> as the scope ID placeholder
-      </p>
-    </div>
-  );
-}
-
-// ─── Helpers ────────────────────────────────────────────
-
-function tokenize(text: string, parts: TokenSegment[]) {
-  const regex = /\{id\}/g;
-  let lastIndex = 0;
-  let match: RegExpExecArray | null;
-
-  while ((match = regex.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push({ text: text.slice(lastIndex, match.index), type: 'arg' });
-    }
-    parts.push({ text: '{id}', type: 'placeholder' });
-    lastIndex = match.index + match[0].length;
-  }
-
-  if (lastIndex < text.length) {
-    parts.push({ text: text.slice(lastIndex), type: 'arg' });
-  }
-}