orbital-command 0.2.0 → 1.0.0

package/src/components/workflow/ChecklistEditor.tsx

@@ -1,239 +0,0 @@
-import { useState, useCallback, useId } from 'react';
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import type { DragEndEvent } from '@dnd-kit/core';
-import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { GripVertical, Plus, Minus, CheckSquare } from 'lucide-react';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface ChecklistEditorProps {
-  items: string[];
-  onChange: (items: string[]) => void;
-  confirmLevel: 'quick' | 'full';
-}
-
-// ─── Template Items ─────────────────────────────────────
-
-const TEMPLATE_ITEMS = [
-  'Implementation is complete and tested',
-  'No merge conflicts with target branch',
-  'Tests pass on source branch',
-  'Code reviewed',
-  'Documentation updated',
-];
-
-// ─── Component ──────────────────────────────────────────
-
-export function ChecklistEditor({ items, onChange, confirmLevel }: ChecklistEditorProps) {
-  const [newItem, setNewItem] = useState('');
-  const [editingIndex, setEditingIndex] = useState<number | null>(null);
-  const [editValue, setEditValue] = useState('');
-  const dndId = useId();
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  const itemIds = items.map((_, i) => `checklist-${i}`);
-
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = itemIds.indexOf(String(active.id));
-    const newIndex = itemIds.indexOf(String(over.id));
-    if (oldIndex === -1 || newIndex === -1) return;
-
-    const next = [...items];
-    const [moved] = next.splice(oldIndex, 1);
-    next.splice(newIndex, 0, moved);
-    onChange(next);
-  }, [items, itemIds, onChange]);
-
-  const addItem = useCallback(() => {
-    const trimmed = newItem.trim();
-    if (!trimmed) return;
-    onChange([...items, trimmed]);
-    setNewItem('');
-  }, [newItem, items, onChange]);
-
-  const removeItem = useCallback((idx: number) => {
-    onChange(items.filter((_, i) => i !== idx));
-    if (editingIndex === idx) setEditingIndex(null);
-  }, [items, onChange, editingIndex]);
-
-  const startEditing = useCallback((idx: number) => {
-    setEditingIndex(idx);
-    setEditValue(items[idx]);
-  }, [items]);
-
-  const finishEditing = useCallback(() => {
-    if (editingIndex === null) return;
-    const trimmed = editValue.trim();
-    if (trimmed && trimmed !== items[editingIndex]) {
-      const next = [...items];
-      next[editingIndex] = trimmed;
-      onChange(next);
-    }
-    setEditingIndex(null);
-  }, [editingIndex, editValue, items, onChange]);
-
-  const addTemplate = useCallback((template: string) => {
-    if (items.includes(template)) return;
-    onChange([...items, template]);
-  }, [items, onChange]);
-
-  return (
-    <div className="space-y-2">
-      {/* Items list */}
-      {items.length > 0 ? (
-        <DndContext id={dndId} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
-            <div className="space-y-1">
-              {items.map((item, idx) => (
-                <SortableChecklistItem
-                  key={itemIds[idx]}
-                  id={itemIds[idx]}
-                  item={item}
-                  index={idx}
-                  isEditing={editingIndex === idx}
-                  editValue={editValue}
-                  onEditValueChange={setEditValue}
-                  onStartEdit={startEditing}
-                  onFinishEdit={finishEditing}
-                  onRemove={removeItem}
-                />
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
-      ) : (
-        <div className="rounded border border-dashed border-zinc-800 bg-zinc-950/30 px-3 py-4 text-center">
-          <CheckSquare className="mx-auto mb-1.5 h-4 w-4 text-zinc-700" />
-          <p className="text-[10px] text-zinc-600">
-            No checklist items. Add items that must be acknowledged before this transition.
-          </p>
-        </div>
-      )}
-
-      {/* Add new item */}
-      <div className="flex gap-1.5">
-        <input
-          value={newItem}
-          onChange={(e) => setNewItem(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && addItem()}
-          className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-xs text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-          placeholder="New item..."
-        />
-        <button
-          onClick={addItem}
-          disabled={!newItem.trim()}
-          className="rounded bg-zinc-800 p-1.5 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 disabled:opacity-40"
-        >
-          <Plus className="h-3 w-3" />
-        </button>
-      </div>
-
-      {/* Quick-add templates */}
-      <div>
-        <span className="mb-1 block text-[9px] font-medium text-zinc-600">Quick add:</span>
-        <div className="flex flex-wrap gap-1">
-          {TEMPLATE_ITEMS.filter((t) => !items.includes(t)).map((template) => (
-            <button
-              key={template}
-              onClick={() => addTemplate(template)}
-              className="rounded border border-zinc-800 bg-zinc-950/50 px-1.5 py-0.5 text-[9px] text-zinc-500 transition-colors hover:border-zinc-700 hover:text-zinc-300"
-            >
-              + {template.length > 30 ? `${template.slice(0, 30)}…` : template}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Preview hint */}
-      {confirmLevel === 'full' && items.length > 0 && (
-        <div className="rounded border border-violet-500/20 bg-violet-500/5 p-2">
-          <span className="text-[9px] font-medium text-violet-400">Dispatch preview:</span>
-          <ul className="mt-1 space-y-0.5">
-            {items.map((item, i) => (
-              <li key={i} className="flex items-center gap-1.5 text-[9px] text-zinc-400">
-                <span className="h-3 w-3 shrink-0 rounded border border-zinc-600" />
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Sortable Item ──────────────────────────────────────
-
-function SortableChecklistItem({ id, item, index, isEditing, editValue, onEditValueChange, onStartEdit, onFinishEdit, onRemove }: {
-  id: string;
-  item: string;
-  index: number;
-  isEditing: boolean;
-  editValue: string;
-  onEditValueChange: (v: string) => void;
-  onStartEdit: (idx: number) => void;
-  onFinishEdit: () => void;
-  onRemove: (idx: number) => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="group flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-950/30 px-1.5 py-1"
-    >
-      <button
-        {...attributes}
-        {...listeners}
-        className="cursor-grab touch-none rounded p-0.5 text-zinc-700 hover:text-zinc-500 active:cursor-grabbing"
-      >
-        <GripVertical className="h-3 w-3" />
-      </button>
-      {isEditing ? (
-        <input
-          value={editValue}
-          onChange={(e) => onEditValueChange(e.target.value)}
-          onBlur={onFinishEdit}
-          onKeyDown={(e) => e.key === 'Enter' && onFinishEdit()}
-          className="flex-1 bg-transparent text-xs text-zinc-200 outline-none"
-          autoFocus
-        />
-      ) : (
-        <span
-          onClick={() => onStartEdit(index)}
-          className="flex-1 cursor-text truncate text-xs text-zinc-300"
-        >
-          {item}
-        </span>
-      )}
-      <button
-        onClick={() => onRemove(index)}
-        className="rounded p-0.5 text-zinc-700 opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100"
-      >
-        <Minus className="h-3 w-3" />
-      </button>
-    </div>
-  );
-}

package/src/components/workflow/CommandPrefixManager.tsx

@@ -1,118 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import { Plus, X, Terminal, AlertTriangle } from 'lucide-react';
-import type { WorkflowEdge } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface CommandPrefixManagerProps {
-  prefixes: string[];
-  edges: WorkflowEdge[];
-  onChange: (prefixes: string[]) => void;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function CommandPrefixManager({ prefixes, edges, onChange }: CommandPrefixManagerProps) {
-  const [newPrefix, setNewPrefix] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  // Cross-reference: which edges use commands starting with each prefix
-  const prefixUsage = useMemo(() => {
-    const usage = new Map<string, string[]>();
-    for (const prefix of prefixes) {
-      const matching = edges
-        .filter((e) => e.command?.startsWith(prefix))
-        .map((e) => `${e.from} → ${e.to}`);
-      usage.set(prefix, matching);
-    }
-    return usage;
-  }, [prefixes, edges]);
-
-  const validate = useCallback((value: string): string | null => {
-    if (!value.startsWith('/')) return 'Must start with /';
-    if (!value.endsWith(' ')) return 'Must end with a space';
-    if (prefixes.includes(value)) return 'Already exists';
-    return null;
-  }, [prefixes]);
-
-  const handleAdd = useCallback(() => {
-    const trimmed = newPrefix;
-    const err = validate(trimmed);
-    if (err) {
-      setError(err);
-      return;
-    }
-    onChange([...prefixes, trimmed]);
-    setNewPrefix('');
-    setError(null);
-  }, [newPrefix, prefixes, onChange, validate]);
-
-  const handleRemove = useCallback((prefix: string) => {
-    onChange(prefixes.filter((p) => p !== prefix));
-  }, [prefixes, onChange]);
-
-  return (
-    <div className="space-y-2">
-      {/* Current prefixes */}
-      {prefixes.length > 0 ? (
-        <div className="space-y-1">
-          {prefixes.map((prefix) => {
-            const usage = prefixUsage.get(prefix) ?? [];
-            return (
-              <div key={prefix} className="group flex items-start gap-2 rounded border border-zinc-800 bg-zinc-950/30 px-2.5 py-1.5">
-                <Terminal className="mt-0.5 h-3 w-3 shrink-0 text-zinc-600" />
-                <div className="flex-1 min-w-0">
-                  <code className="text-xs font-mono text-cyan-400">{prefix.trim()}</code>
-                  {usage.length > 0 ? (
-                    <p className="mt-0.5 text-[9px] text-zinc-600">
-                      Used by: {usage.join(', ')}
-                    </p>
-                  ) : (
-                    <p className="mt-0.5 text-[9px] text-zinc-700">No edges use this prefix</p>
-                  )}
-                </div>
-                <button
-                  onClick={() => handleRemove(prefix)}
-                  className="rounded p-0.5 text-zinc-700 opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100"
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <p className="text-[10px] text-zinc-600">No command prefixes configured.</p>
-      )}
-
-      {/* Add new prefix */}
-      <div className="flex gap-1.5">
-        <input
-          value={newPrefix}
-          onChange={(e) => { setNewPrefix(e.target.value); setError(null); }}
-          onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
-          className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2 py-1 font-mono text-xs text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-          placeholder="/prefix "
-        />
-        <button
-          onClick={handleAdd}
-          disabled={!newPrefix}
-          className="rounded bg-zinc-800 p-1.5 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200 disabled:opacity-40"
-        >
-          <Plus className="h-3 w-3" />
-        </button>
-      </div>
-
-      {error && (
-        <div className="flex items-center gap-1.5 text-[9px] text-amber-400">
-          <AlertTriangle className="h-3 w-3 shrink-0" />
-          {error}
-        </div>
-      )}
-
-      <p className="text-[9px] text-zinc-600">
-        Prefixes must start with <code className="text-zinc-400">/</code> and end with a space
-      </p>
-    </div>
-  );
-}

package/src/components/workflow/ConfigSettingsPanel.tsx

@@ -1,189 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import { X, Settings, AlertTriangle } from 'lucide-react';
-import type { WorkflowConfig } from '../../../shared/workflow-config';
-import { CommandPrefixManager } from './CommandPrefixManager';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface ConfigSettingsPanelProps {
-  config: WorkflowConfig;
-  onUpdate: (config: WorkflowConfig) => void;
-  onClose: () => void;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function ConfigSettingsPanel({ config, onUpdate, onClose }: ConfigSettingsPanelProps) {
-  const [name, setName] = useState(config.name);
-  const [description, setDescription] = useState(config.description ?? '');
-  const [commitPatterns, setCommitPatterns] = useState(config.commitBranchPatterns ?? '');
-  const [branchingMode, setBranchingMode] = useState<'trunk' | 'worktree'>(config.branchingMode ?? 'trunk');
-
-  const allListIds = useMemo(() => config.lists.map((l) => l.id), [config.lists]);
-  const [terminalStatuses, setTerminalStatuses] = useState<Set<string>>(
-    new Set(config.terminalStatuses ?? []),
-  );
-
-  const regexError = useMemo(() => {
-    if (!commitPatterns) return null;
-    try {
-      new RegExp(commitPatterns);
-      return null;
-    } catch {
-      return 'Invalid regex pattern';
-    }
-  }, [commitPatterns]);
-
-  const toggleTerminal = useCallback((listId: string) => {
-    setTerminalStatuses((prev) => {
-      const next = new Set(prev);
-      if (next.has(listId)) next.delete(listId);
-      else next.add(listId);
-      return next;
-    });
-  }, []);
-
-  const handlePrefixChange = useCallback((prefixes: string[]) => {
-    onUpdate({ ...config, allowedCommandPrefixes: prefixes });
-  }, [config, onUpdate]);
-
-  const handleApply = useCallback(() => {
-    onUpdate({
-      ...config,
-      name: name.trim() || config.name,
-      description: description.trim() || undefined,
-      branchingMode,
-      terminalStatuses: [...terminalStatuses],
-      commitBranchPatterns: commitPatterns || undefined,
-    });
-  }, [config, name, description, branchingMode, terminalStatuses, commitPatterns, onUpdate]);
-
-  return (
-    <div className="flex h-full w-80 shrink-0 flex-col rounded-lg border border-zinc-700 bg-zinc-900/95 backdrop-blur">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
-        <div className="flex items-center gap-2">
-          <Settings className="h-3.5 w-3.5 text-zinc-400" />
-          <span className="text-sm font-medium">Config Settings</span>
-        </div>
-        <button onClick={onClose} className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
-          <X className="h-4 w-4" />
-        </button>
-      </div>
-
-      {/* Form */}
-      <div className="flex-1 space-y-4 overflow-y-auto p-4 text-xs">
-        {/* Name */}
-        <FieldGroup label="Config Name">
-          <input
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
-          />
-        </FieldGroup>
-
-        {/* Description */}
-        <FieldGroup label="Description">
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            rows={2}
-            className="w-full resize-none rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-zinc-200 outline-none focus:border-zinc-500"
-            placeholder="Optional config description..."
-          />
-        </FieldGroup>
-
-        {/* Branching Mode */}
-        <FieldGroup label="Branching Mode">
-          <div className="flex gap-2">
-            {(['trunk', 'worktree'] as const).map((mode) => (
-              <label key={mode} className="flex flex-1 cursor-pointer items-center gap-2 rounded border border-zinc-800 bg-zinc-950/30 px-2 py-1.5">
-                <input
-                  type="radio"
-                  name="branchingMode"
-                  value={mode}
-                  checked={branchingMode === mode}
-                  onChange={() => setBranchingMode(mode)}
-                  className="h-3.5 w-3.5 border-zinc-600 bg-zinc-800 text-cyan-500 focus:ring-0 focus:ring-offset-0"
-                />
-                <span className="text-zinc-300 capitalize">{mode}</span>
-              </label>
-            ))}
-          </div>
-          <p className="mt-1 text-[9px] text-zinc-600">
-            Trunk: all work on current branch. Worktree: git worktree per scope for isolation.
-          </p>
-        </FieldGroup>
-
-        {/* Command Prefixes */}
-        <FieldGroup label="Allowed Command Prefixes">
-          <CommandPrefixManager
-            prefixes={config.allowedCommandPrefixes ?? []}
-            edges={config.edges}
-            onChange={handlePrefixChange}
-          />
-        </FieldGroup>
-
-        {/* Terminal Statuses */}
-        <FieldGroup label="Terminal Statuses">
-          <div className="space-y-1">
-            {allListIds.map((id) => (
-              <label key={id} className="flex cursor-pointer items-center gap-2 rounded border border-zinc-800 bg-zinc-950/30 px-2 py-1.5">
-                <input
-                  type="checkbox"
-                  checked={terminalStatuses.has(id)}
-                  onChange={() => toggleTerminal(id)}
-                  className="h-3.5 w-3.5 rounded border-zinc-600 bg-zinc-800 text-cyan-500 focus:ring-0 focus:ring-offset-0"
-                />
-                <span className="text-zinc-300">{id}</span>
-              </label>
-            ))}
-          </div>
-          <p className="mt-1 text-[9px] text-zinc-600">
-            Terminal statuses mark a scope as &quot;done&quot; — no further progression expected.
-          </p>
-        </FieldGroup>
-
-        {/* Commit Branch Patterns */}
-        <FieldGroup label="Commit Branch Patterns">
-          <input
-            value={commitPatterns}
-            onChange={(e) => setCommitPatterns(e.target.value)}
-            className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-            placeholder="^(dev|feat/|fix/|scope/)"
-          />
-          {regexError && (
-            <div className="mt-1 flex items-center gap-1.5 text-[9px] text-amber-400">
-              <AlertTriangle className="h-3 w-3 shrink-0" />
-              {regexError}
-            </div>
-          )}
-          <p className="mt-1 text-[9px] text-zinc-600">
-            Regex pattern for branches that should trigger commit-session hooks.
-          </p>
-        </FieldGroup>
-      </div>
-
-      {/* Footer */}
-      <div className="flex items-center justify-end border-t border-zinc-800 px-4 py-3">
-        <button
-          onClick={handleApply}
-          className="rounded bg-cyan-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-cyan-500"
-        >
-          Apply
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── 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/DirectionSelector.tsx

@@ -1,133 +0,0 @@
-import { ArrowRight, ArrowLeft, CornerRightDown } from 'lucide-react';
-import type { EdgeDirection } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface DirectionSelectorProps {
-  value: EdgeDirection;
-  onChange: (direction: EdgeDirection) => void;
-  fromLabel: string;
-  toLabel: string;
-}
-
-interface DirectionOption {
-  value: EdgeDirection;
-  label: string;
-  description: string;
-  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
-  arrowColor: string;
-  bgActive: string;
-  borderActive: string;
-  hint: string;
-}
-
-// ─── Direction Options ──────────────────────────────────
-
-const DIRECTION_OPTIONS: DirectionOption[] = [
-  {
-    value: 'forward',
-    label: 'Forward',
-    description: 'Normal progression through the workflow',
-    icon: ArrowRight,
-    arrowColor: '#22c55e',
-    bgActive: 'rgba(34,197,94,0.12)',
-    borderActive: 'rgba(34,197,94,0.4)',
-    hint: '',
-  },
-  {
-    value: 'backward',
-    label: 'Backward',
-    description: 'Return to a previous stage for rework',
-    icon: ArrowLeft,
-    arrowColor: '#f59e0b',
-    bgActive: 'rgba(245,158,11,0.12)',
-    borderActive: 'rgba(245,158,11,0.4)',
-    hint: 'Backward edges are shown as amber dashed lines',
-  },
-  {
-    value: 'shortcut',
-    label: 'Shortcut',
-    description: 'Skip intermediate stages',
-    icon: CornerRightDown,
-    arrowColor: '#6366f1',
-    bgActive: 'rgba(99,102,241,0.12)',
-    borderActive: 'rgba(99,102,241,0.4)',
-    hint: 'Shortcut edges are shown as dashed lines and may require a checklist confirmation',
-  },
-];
-
-// ─── Component ──────────────────────────────────────────
-
-export function DirectionSelector({ value, onChange, fromLabel, toLabel }: DirectionSelectorProps) {
-  const selected = DIRECTION_OPTIONS.find((d) => d.value === value) ?? DIRECTION_OPTIONS[0];
-
-  return (
-    <div className="space-y-2">
-      {/* Direction cards */}
-      <div className="space-y-1.5">
-        {DIRECTION_OPTIONS.map((opt) => {
-          const isSelected = value === opt.value;
-          const Icon = opt.icon;
-          return (
-            <button
-              key={opt.value}
-              onClick={() => onChange(opt.value)}
-              className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-all"
-              style={{
-                backgroundColor: isSelected ? opt.bgActive : 'transparent',
-                border: `1px solid ${isSelected ? opt.borderActive : '#27272a'}`,
-              }}
-            >
-              <Icon
-                className="h-4 w-4 shrink-0"
-                style={{ color: isSelected ? opt.arrowColor : '#52525b' }}
-              />
-              <div className="flex-1 min-w-0">
-                <div
-                  className="text-[11px] font-semibold"
-                  style={{ color: isSelected ? opt.arrowColor : '#a1a1aa' }}
-                >
-                  {opt.label}
-                </div>
-                <div className="text-[9px] text-zinc-500 truncate">{opt.description}</div>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Visual preview: mini diagram */}
-      <div className="flex items-center justify-center gap-2 rounded-md border border-zinc-800 bg-zinc-950/50 px-3 py-2">
-        <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[9px] font-medium text-zinc-300">
-          {fromLabel}
-        </span>
-        <svg width="48" height="16" viewBox="0 0 48 16" className="shrink-0">
-          {value === 'backward' ? (
-            <>
-              <line x1="40" y1="8" x2="8" y2="8" stroke={selected.arrowColor} strokeWidth="1.5" strokeDasharray="3 2" />
-              <polygon points="8,8 14,4 14,12" fill={selected.arrowColor} />
-            </>
-          ) : (
-            <>
-              <line
-                x1="8" y1="8" x2="40" y2="8"
-                stroke={selected.arrowColor}
-                strokeWidth="1.5"
-                strokeDasharray={value === 'shortcut' ? '3 2' : 'none'}
-              />
-              <polygon points="40,8 34,4 34,12" fill={selected.arrowColor} />
-            </>
-          )}
-        </svg>
-        <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[9px] font-medium text-zinc-300">
-          {toLabel}
-        </span>
-      </div>
-
-      {/* Change hint */}
-      {selected.hint && (
-        <p className="text-[9px] text-zinc-600 leading-relaxed">{selected.hint}</p>
-      )}
-    </div>
-  );
-}