orbital-command 0.1.0

package/src/components/workflow/ChecklistEditor.tsx

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

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

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

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