Show pairing as steps in a dialog, not a status line and a toast

Scanning a code appended "Connecting…" to the screen you were already on, then
announced the result in a toast — which arrives after you've looked away, and
says nothing while the workspace is being copied across. Pairing is a short
linear flow with two waits in it, so show it as one: a dialog with a step per
wait, a spinner on the step that's running, and a tick or a warning when it
lands.

    ✓ Synced 42 resources with Xiaomi Pad 6
    ⟳ Bringing your workspace over…

The second step exists because `/iroh-sync` answers as soon as the peer's push
is imported, which is a moment before the drive is readable — that gap is what
used to be a silent pause and then a toast.

`PairingFlowProvider` owns the dialog and the state machine, and every entry
point drives it: the in-app scanner, the paste field, and a tapped deep link.
So `PairingLinkHandler` shrinks to validating that a link is ours and handing
it over, and the connect-device screen no longer carries its own progress and
error rendering. On success the dialog offers "Open workspace" rather than
navigating out from under you; on failure it offers "Try again" without making
you re-scan.

`runPairing` reports failure as a value instead of throwing, so the component
never awaits inside try/catch — which the React Compiler can't memoise through
(see the data-browser CLAUDE.md).

Says "Paired with <device>" rather than "Synced 0 resources" when there was no
drive to sync, which is the honest description of what happened: the peer is
recorded and a later sync will use it.

browser/data-browser/src/components/PairingLinkHandler.tsx

@@ -1,85 +1,31 @@
 import { useEffect, useEffectEvent, type JSX } from 'react';
-import toast from 'react-hot-toast';
-import { useNavigate } from '@tanstack/react-router';
-import {
-  decodePairingEnvelope,
-  PairingEnvelopeError,
-  type PairingEnvelope,
-} from '@tomic/lib';
-import { useStore } from '@tomic/react';
 import { clearDeepLinkSink, setDeepLinkSink } from '../helpers/deepLinkQueue';
-import { upsertKnownPeer } from '../helpers/knownPeers';
-import { pairAndSync } from '../helpers/pairing';
-import { paths } from '../routes/paths';
+import { usePairingFlow } from './pairing/PairingFlowProvider';
 
 /**
  * Consumes scanned/tapped `atomic://pair` deep links (forwarded by the Tauri
- * shell, queued by helpers/deepLinkQueue.ts): persist a KnownPeer, start a
- * sync, and show the Sync page.
+ * shell, queued by helpers/deepLinkQueue.ts) and hands them to the pairing
+ * flow, which shows its progress and reports what happened.
  *
  * A pairing code is routing only, so this can act on one without asking. It
  * grants nothing — the dialed peer still has to pass same-agent AUTH — and a
- * code that tries to carry an identity is refused by the decoder. That refusal
- * is what makes acting-without-asking safe here: `atomic://` links can be fired
- * by any app or web page, not just by the camera, so a link must never be able
- * to sign this device in as someone else.
+ * code that tries to carry an identity is refused when it's decoded. That
+ * refusal is what makes acting-without-asking safe here: `atomic://` links can
+ * be fired by any app or web page, not just by the camera, so a link must never
+ * be able to sign this device in as someone else.
  */
 export function PairingLinkHandler(): JSX.Element {
-  const store = useStore();
-  const navigate = useNavigate();
-
-  /**
-   * Record the peer, then pull its copy of the current drive right away —
-   * pairing should *sync*, not just store an address. Best-effort: the peer may
-   * be unreachable or hold a different agent (AUTH refuses). The peer is
-   * recorded either way, so Sync → Peers offers a manual retry.
-   */
-  async function kickInitialSync(nodeDid: string) {
-    const drive = store.getSyncStatus().drive;
-
-    try {
-      const outcome = await pairAndSync(nodeDid, drive);
-
-      if (outcome) {
-        toast.success(
-          `Synced ${outcome.count} resources with the paired device.`,
-        );
-      }
-    } catch (e) {
-      toast.error(
-        e instanceof Error
-          ? `Could not sync yet: ${e.message}`
-          : 'Could not reach the paired device yet — retry under Sync → Peers.',
-      );
-    }
-  }
+  const startPairing = usePairingFlow();
 
   const handleLink = useEffectEvent((uri: string) => {
     // Deep links from the OS always arrive as `atomic://…`. The Sync page's
     // paste field feeds this same pipeline, and there a bare node DID is a
-    // legitimate (routing-only) code.
+    // legitimate (routing-only) code. Anything else isn't ours.
     if (!uri.startsWith('atomic://') && !uri.startsWith('did:ad:node:')) {
       return;
     }
 
-    let envelope: PairingEnvelope;
-
-    try {
-      envelope = decodePairingEnvelope(uri);
-    } catch (e) {
-      toast.error(
-        e instanceof PairingEnvelopeError
-          ? e.message
-          : 'Could not read the pairing link.',
-      );
-
-      return;
-    }
-
-    upsertKnownPeer(envelope.node);
-    toast.success('Device paired — starting a sync…');
-    navigate({ to: paths.sync });
-    void kickInitialSync(envelope.node);
+    startPairing(uri);
   });
 
   useEffect(() => {