feat: add swap button to reverse write/read engine selection

Author: b-per

docs/superpowers/specs/2026-04-27-swap-button-design.md

@@ -0,0 +1,21 @@
+# Swap Button Design
+
+**Date:** 2026-04-27
+**Status:** Approved
+
+## What
+
+Add a `⇄` button at the end of the `write → read` header in the results panel. Clicking it swaps the two selected engines.
+
+## UI
+
+```
+databricks  →  bigquery  ⇄
+```
+
+Button shows only when `write` is set. Muted (`#888`), brightens on hover, monospace, no border.
+
+## Changes
+
+- `src/lib/CatalogResults.svelte` — add `createEventDispatcher`, dispatch `swap` on click, render button in `.results-header`
+- `src/App.svelte` — handle `swap` event: `[selectedWrite, selectedRead] = [selectedRead, selectedWrite]`

src/App.svelte

@@ -5,6 +5,10 @@
 
   let selectedWrite: EngineId | null = null;
   let selectedRead: EngineId | null = null;
+
+  function swapEngines() {
+    [selectedWrite, selectedRead] = [selectedRead, selectedWrite];
+  }
 </script>
 
 <div class="app">
@@ -22,7 +26,7 @@
     <div class="divider" aria-hidden="true"></div>
 
     <section class="results">
-      <CatalogResults write={selectedWrite} read={selectedRead} />
+      <CatalogResults write={selectedWrite} read={selectedRead} on:swap={swapEngines} />
     </section>
   </main>
 

src/lib/CatalogResults.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import { engineCatalogRules, engineReadRules, pairOverrides, CATALOGS } from '../data/compatibility';
   import type { EngineId, CatalogId, Support, CatalogSupport, EngineRule } from '../data/compatibility';
 
+  const dispatch = createEventDispatcher();
+
   export let write: EngineId | null;
   export let read: EngineId | null;
 
@@ -67,6 +70,7 @@
       <span class="engine-tag write">{write}</span>
       <span class="arrow">→</span>
       <span class="engine-tag read">{read ?? '?'}</span>
+      <button class="swap-btn" on:click={() => dispatch('swap')} title="Swap write and read engines">⇄</button>
     </div>
     {#if !read}
       <p class="read-hint">Pick a read engine above to refine results</p>
@@ -200,6 +204,21 @@
 
   .arrow { color: #888; }
 
+  .swap-btn {
+    background: none;
+    border: none;
+    color: #555;
+    font-family: monospace;
+    font-size: 16px;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    line-height: 1;
+    transition: color 0.15s;
+    margin-left: 4px;
+  }
+  .swap-btn:hover { color: #ccc; }
+
   .read-hint {
     font-family: monospace;
     font-size: 11px;