@le-space/p2pass 0.2.0 → 0.3.1

package/dist/ui/StorachaIntegration.svelte

@@ -4,7 +4,14 @@
     readSigningPreferenceFromStorage,
     writeSigningPreferenceToStorage,
   } from '../identity/signing-preference.js';
-  import { Upload, LogOut, Loader2, AlertCircle, CheckCircle, Download } from 'lucide-svelte';
+  // Per-icon entrypoints avoid the root `lucide-svelte` barrel (`export *`), which can trigger
+  // "Importing binding name 'default' cannot be resolved by star export entries" in strict ESM.
+  import Upload from 'lucide-svelte/icons/upload';
+  import LogOut from 'lucide-svelte/icons/log-out';
+  import Loader2 from 'lucide-svelte/icons/loader-2';
+  import AlertCircle from 'lucide-svelte/icons/alert-circle';
+  import CheckCircle from 'lucide-svelte/icons/check-circle';
+  import Download from 'lucide-svelte/icons/download';
   import { getSpaceUsage } from './storacha-backup.js';
   import { OrbitDBStorachaBridge } from 'orbitdb-storacha-bridge';
   import { IdentityService, hasLocalPasskeyHint } from '../identity/identity-service.js';
@@ -15,6 +22,7 @@
     storeDelegation,
     loadStoredDelegation,
     clearStoredDelegation,
+    formatDelegationsTooltipSummary,
   } from '../ucan/storacha-auth.js';
   import {
     openDeviceRegistry,
@@ -27,6 +35,9 @@
     storeArchiveEntry,
     listDelegations,
     storeDelegationEntry,
+    removeDeviceEntry,
+    delegationsEntriesForDevice,
+    hashCredentialId,
   } from '../registry/device-registry.js';
   import {
     createManifest,
@@ -86,6 +97,92 @@
     return '\uD83D\uDCF1';
   }
 
+  /** @param {{ mode?: string, algorithm?: string } | null} sm */
+  function passkeyKindFromSigningMode(sm) {
+    if (!sm) return null;
+    if (sm.mode === 'worker') return 'worker-ed25519';
+    if (sm.algorithm === 'P-256') return 'hardware-p256';
+    return 'hardware-ed25519';
+  }
+
+  /** Passkey kind label for a registry device row (stored passkey_kind, else local session). */
+  function linkedDevicePasskeyLabel(/** @type {Record<string, unknown>} */ device) {
+    const k = device.passkey_kind;
+    if (typeof k === 'string' && k) return k;
+    if (signingMode?.did && device.ed25519_did === signingMode.did) {
+      return passkeyKindFromSigningMode(signingMode);
+    }
+    return null;
+  }
+
+  /** UCAN delegation counts keyed by device DID (see {@link delegationsEntriesForDevice}). */
+  let ucanCountsByDid = $state(/** @type {Record<string, number>} */ ({}));
+  /** Parsed UCAN summary for each device row’s badge `title`. */
+  let ucanTooltipByDid = $state(/** @type {Record<string, string>} */ ({}));
+
+  async function refreshLinkedDeviceDelegationCounts() {
+    if (!registryDb) {
+      ucanCountsByDid = {};
+      ucanTooltipByDid = {};
+      return;
+    }
+    try {
+      const delegations = await listDelegations(registryDb);
+      const ownerDid = localStorage.getItem(OWNER_DID_KEY) || signingMode?.did || '';
+      /** @type {Record<string, number>} */
+      const next = {};
+      /** @type {Record<string, string>} */
+      const tips = {};
+      for (const dev of devices) {
+        const did = dev.ed25519_did;
+        if (typeof did !== 'string' || !did) continue;
+        const entries = delegationsEntriesForDevice(delegations, did, ownerDid);
+        next[did] = entries.length;
+        if (entries.length > 0) {
+          tips[did] = await formatDelegationsTooltipSummary(
+            /** @type {Array<{ delegation?: string, space_did?: string, label?: string }>} */ (
+              entries
+            )
+          );
+        }
+      }
+      ucanCountsByDid = next;
+      ucanTooltipByDid = tips;
+    } catch {
+      ucanCountsByDid = {};
+      ucanTooltipByDid = {};
+    }
+  }
+
+  async function confirmRemoveLinkedDevice(/** @type {Record<string, unknown>} */ device) {
+    const label = String(device.device_label || device.ed25519_did || 'this device');
+    const credId = device.credential_id;
+    if (typeof credId !== 'string' || !credId) {
+      showMessage('Cannot remove device: missing credential id.', 'error');
+      return;
+    }
+    if (
+      !confirm(
+        `Remove linked device "${label}" from the registry? Its OrbitDB write access will be revoked.`
+      )
+    ) {
+      return;
+    }
+    const db = deviceManager?.getRegistryDb?.() ?? registryDb;
+    if (!db) {
+      showMessage('Cannot remove device: registry not ready.', 'error');
+      return;
+    }
+    try {
+      await removeDeviceEntry(db, credId);
+      devices = devices.filter((d) => d.ed25519_did !== device.ed25519_did);
+      await refreshLinkedDeviceDelegationCounts();
+      showMessage('Device removed from linked devices.');
+    } catch (err) {
+      showMessage(`Failed to remove device: ${err?.message || err}`, 'error');
+    }
+  }
+
   // Component state
   let showStoracha = $state(true);
   let isLoading = $state(false);
@@ -225,6 +322,15 @@
     };
   });
 
+  /** Per-device UCAN delegation counts for linked-device badges. */
+  $effect(() => {
+    registryDb;
+    devices;
+    signingMode?.did;
+    isLoggedIn;
+    void refreshLinkedDeviceDelegationCounts();
+  });
+
   /** Start MultiDeviceManager once libp2p + registry exist (handles restored signingMode / late orbitdb). */
   $effect(() => {
     if (!signingMode?.did || !orbitdb || !libp2p || !registryDb || deviceManager) return;
@@ -344,7 +450,12 @@
 
     if (store) {
       const spaceDid = storeSpaceDid || client.currentSpace()?.did?.() || '';
-      await storeDelegation(delegationStr, storeRegistryDb, spaceDid);
+      await storeDelegation(
+        delegationStr,
+        storeRegistryDb,
+        spaceDid,
+        signingMode?.did || ''
+      );
     }
 
     currentSpace = client.currentSpace();
@@ -552,7 +663,14 @@
     if (!registryDb || !signingMode?.did) return;
     try {
       const existing = await getDeviceByDID(registryDb, signingMode.did);
-      if (existing) return;
+      const kind = passkeyKindFromSigningMode(signingMode);
+      if (existing) {
+        if (kind && !existing.passkey_kind) {
+          const k = await hashCredentialId(existing.credential_id);
+          await registryDb.put(k, { ...existing, passkey_kind: kind });
+        }
+        return;
+      }
       const credential = loadWebAuthnCredentialSafe();
       await registerDevice(registryDb, {
         credential_id:
@@ -568,6 +686,7 @@
         created_at: Date.now(),
         status: 'active',
         ed25519_did: signingMode.did,
+        passkey_kind: kind,
       });
       console.log('[ui] Self-registered device in registry');
     } catch (err) {
@@ -625,7 +744,7 @@
         credential,
         orbitdb,
         libp2p,
-        identity: { id: signingMode.did },
+        identity: { id: signingMode.did, passkeyKind: passkeyKindFromSigningMode(signingMode) },
         onPairingRequest: async (request) => {
           pairingFlow(
             'ALICE',
@@ -659,6 +778,15 @@
       const dbAddr = registryDb.address?.toString?.() || registryDb.address;
       if (dbAddr) await deviceManager.openExistingDb(dbAddr);
 
+      // Use the same KV instance as MultiDeviceManager (sync listeners + replication). A second
+      // `openDeviceRegistry(..., sameAddress)` in openExistingDb is a distinct replica; reading
+      // `registryDb` from initRegistryDb after reload could list fewer devices than the manager.
+      const managedDb = deviceManager.getRegistryDb();
+      if (managedDb) {
+        registryDb = managedDb;
+        await identityService.setRegistry(registryDb);
+      }
+
       devices = await deviceManager.listDevices();
       peerInfo = deviceManager.getPeerInfo();
       console.log('[ui] MultiDeviceManager initialized');
@@ -671,9 +799,13 @@
 
   async function handleTabSwitch(tab) {
     activeTab = tab;
-    if (tab === 'passkeys' && registryDb) {
+    if (tab === 'passkeys') {
       try {
-        devices = await listRegistryDevices(registryDb);
+        if (deviceManager) {
+          devices = await deviceManager.listDevices();
+        } else if (registryDb) {
+          devices = await listRegistryDevices(registryDb);
+        }
       } catch (err) {
         console.warn('[ui] Failed to load devices:', err.message);
       }
@@ -733,7 +865,13 @@
           await storeArchiveEntry(newDb, did, archive.ciphertext, archive.iv);
         }
         for (const d of delegations) {
-          await storeDelegationEntry(newDb, d.delegation, d.space_did);
+          await storeDelegationEntry(
+            newDb,
+            d.delegation,
+            d.space_did,
+            d.label,
+            d.stored_by_did
+          );
         }
         console.log('[ui] Registry migration complete after', Date.now() - start, 'ms');
         return true;
@@ -1102,6 +1240,91 @@
   {/if}
 {/snippet}
 
+{#snippet yourDidCard()}
+  <div
+    data-testid="storacha-your-did"
+    style="border-radius: 0.375rem; border: 1px solid rgba(233, 19, 21, 0.3); background: linear-gradient(to right, #ffffff, #EFE3F3); padding: 0.625rem 0.75rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);"
+  >
+    <div
+      style="font-size: 0.625rem; font-weight: 600; color: #6b7280; font-family: 'DM Sans', sans-serif; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em;"
+    >
+      Your DID
+    </div>
+    <div style="display: flex; align-items: center; gap: 0.5rem;">
+      <code
+        style="flex: 1; font-size: 0.75rem; color: #374151; font-family: 'DM Mono', monospace; word-break: break-all; line-height: 1.4;"
+      >
+        {signingMode?.did
+          ? signingMode.did.length > 40
+            ? signingMode.did.slice(0, 20) + '...' + signingMode.did.slice(-16)
+            : signingMode.did
+          : 'N/A'}
+      </code>
+      <button
+        class="storacha-btn-icon"
+        onclick={() => {
+          if (signingMode?.did) {
+            navigator.clipboard.writeText(signingMode.did);
+            showMessage('DID copied to clipboard!');
+          }
+        }}
+        style="border-radius: 0.25rem; padding: 0.25rem; color: #0176CE; transition: all 150ms; border: none; background: transparent; cursor: pointer; flex-shrink: 0;"
+        title="Copy full DID"
+        aria-label="Copy DID to clipboard"
+      >
+        <svg
+          style="height: 0.875rem; width: 0.875rem;"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/snippet}
+
+{#snippet storachaConnectedBanner()}
+  <div
+    style="display: flex; align-items: center; justify-content: space-between; border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to right, #BDE0FF, #FFE4AE); padding: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);"
+  >
+    <div style="display: flex; align-items: center; gap: 0.75rem;">
+      <div
+        style="display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: #E91315; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); flex-shrink: 0;"
+      >
+        <CheckCircle style="height: 1rem; width: 1rem; color: #ffffff;" />
+      </div>
+      <div>
+        <div
+          style="font-size: 0.875rem; font-weight: 700; color: #E91315; font-family: 'Epilogue', sans-serif;"
+        >
+          Connected to Storacha
+        </div>
+        {#if currentSpace}
+          <div style="font-size: 0.75rem; color: #0176CE; font-family: 'DM Mono', monospace;">
+            Space: {formatSpaceName(currentSpace)}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <button
+      class="storacha-btn-icon"
+      onclick={handleLogout}
+      style="display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; color: #E91315; transition: color 150ms, background-color 150ms; border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif;"
+    >
+      <LogOut style="height: 0.75rem; width: 0.75rem;" />
+      <span>Logout</span>
+    </button>
+  </div>
+{/snippet}
+
 {#snippet linkedDevicesPanel()}
   <div
     style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to bottom right, #ffffff, #FFE4AE); padding: 0.75rem;"
@@ -1132,10 +1355,11 @@
     {:else}
       <div style="display: flex; flex-direction: column; gap: 0.375rem;">
         {#each devices as device, i (device.credential_id || device.ed25519_did || device.device_label || i)}
+          {@const passkeyBadge = linkedDevicePasskeyLabel(device)}
           <div
             data-testid="storacha-linked-device-row"
             data-device-label={device.device_label || ''}
-            style="display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 0.7); border-left: 3px solid {device.status ===
+            style="display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 0.7); border-left: 3px solid {device.status ===
             'active'
               ? '#10b981'
               : '#E91315'};"
@@ -1154,17 +1378,53 @@
                   ? device.ed25519_did.slice(0, 16) + '...' + device.ed25519_did.slice(-8)
                   : 'N/A'}
               </code>
+              <div
+                style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; align-items: center;"
+              >
+                {#if passkeyBadge}
+                  <span
+                    style="font-size: 0.55rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 9999px; background: #e0e7ff; color: #3730a3; font-family: 'DM Mono', monospace;"
+                    title="Passkey signing mode for this device"
+                  >
+                    {passkeyBadge}
+                  </span>
+                {/if}
+                {#if device.ed25519_did && (ucanCountsByDid[device.ed25519_did] ?? 0) > 0}
+                  <span
+                    style="font-size: 0.55rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 9999px; background: #fef3c7; color: #92400e; font-family: 'DM Sans', sans-serif;"
+                    title={ucanTooltipByDid[device.ed25519_did]?.trim()
+                      ? ucanTooltipByDid[device.ed25519_did]
+                      : 'UCAN delegations on this device (parsing summary…)'}
+                  >
+                    {ucanCountsByDid[device.ed25519_did]}
+                    {ucanCountsByDid[device.ed25519_did] === 1 ? ' UCAN' : ' UCANs'}
+                  </span>
+                {/if}
+              </div>
             </div>
-            <span
-              style="font-size: 0.6rem; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 9999px; flex-shrink: 0; background: {device.status ===
-              'active'
-                ? '#dcfce7'
-                : '#fee2e2'}; color: {device.status === 'active'
-                ? '#166534'
-                : '#991b1b'}; font-family: 'DM Sans', sans-serif;"
+            <div
+              style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0;"
             >
-              {device.status}
-            </span>
+              <span
+                style="font-size: 0.6rem; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 9999px; background: {device.status ===
+                'active'
+                  ? '#dcfce7'
+                  : '#fee2e2'}; color: {device.status === 'active'
+                  ? '#166534'
+                  : '#991b1b'}; font-family: 'DM Sans', sans-serif;"
+              >
+                {device.status}
+              </span>
+              <button
+                type="button"
+                data-testid="storacha-linked-device-remove"
+                aria-label="Remove linked device"
+                onclick={() => confirmRemoveLinkedDevice(device)}
+                style="font-size: 0.6rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 0.25rem; background: transparent; color: #b91c1c; border: 1px solid #fca5a5; cursor: pointer; font-family: 'DM Sans', sans-serif;"
+              >
+                Remove
+              </button>
+            </div>
           </div>
         {/each}
       </div>
@@ -1548,6 +1808,7 @@
 
             <!-- Recover from backup (IPNS / manifest) -->
             <button
+              data-testid="storacha-recover-passkey"
               onclick={handleRecover}
               disabled={isRecovering}
               style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.375rem; background-color: transparent; padding: 0.5rem 1.25rem; color: #E91315; border: 1px solid #E91315; cursor: pointer; font-family: 'Epilogue', sans-serif; font-weight: 600; font-size: 0.75rem; opacity: {isRecovering
@@ -1578,7 +1839,7 @@
             </button>
           </div>
         {:else}
-          <!-- Step 2: Authenticated — show DID info + delegation import -->
+          <!-- Step 2: Authenticated — signing badge; DID + tab panels render below tabs -->
           <div
             data-testid="storacha-post-auth"
             style="display: flex; flex-direction: column; gap: 0.75rem;"
@@ -1644,116 +1905,48 @@
                 </span>
               {/if}
             </div>
+          </div>
+        {/if}
 
-            <!-- DID Display -->
-            <div
-              style="border-radius: 0.375rem; border: 1px solid rgba(233, 19, 21, 0.3); background: linear-gradient(to right, #ffffff, #EFE3F3); padding: 0.625rem 0.75rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);"
+        {#if signingMode}
+          <!-- Tab Navigation (visible after authentication) — P2P Passkeys first -->
+          <div
+            style="border-radius: 0.5rem; background: rgba(233, 19, 21, 0.06); padding: 0.25rem; display: flex; gap: 0.25rem;"
+          >
+            <button
+              data-testid="storacha-tab-passkeys"
+              onclick={() => handleTabSwitch('passkeys')}
+              style="flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-size: 0.8rem; font-weight: 600; transition: all 200ms; background: {activeTab ===
+              'passkeys'
+                ? 'linear-gradient(135deg, #E91315, #FFC83F)'
+                : 'transparent'}; color: {activeTab === 'passkeys'
+                ? '#fff'
+                : '#6B7280'}; box-shadow: {activeTab === 'passkeys'
+                ? '0 2px 8px rgba(233, 19, 21, 0.3)'
+                : 'none'};"
             >
-              <div
-                style="font-size: 0.625rem; font-weight: 600; color: #6b7280; font-family: 'DM Sans', sans-serif; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em;"
-              >
-                Your DID
-              </div>
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <code
-                  style="flex: 1; font-size: 0.75rem; color: #374151; font-family: 'DM Mono', monospace; word-break: break-all; line-height: 1.4;"
-                >
-                  {signingMode.did
-                    ? signingMode.did.length > 40
-                      ? signingMode.did.slice(0, 20) + '...' + signingMode.did.slice(-16)
-                      : signingMode.did
-                    : 'N/A'}
-                </code>
-                <button
-                  class="storacha-btn-icon"
-                  onclick={() => {
-                    if (signingMode.did) {
-                      navigator.clipboard.writeText(signingMode.did);
-                      showMessage('DID copied to clipboard!');
-                    }
-                  }}
-                  style="border-radius: 0.25rem; padding: 0.25rem; color: #0176CE; transition: all 150ms; border: none; background: transparent; cursor: pointer; flex-shrink: 0;"
-                  title="Copy full DID"
-                  aria-label="Copy DID to clipboard"
-                >
-                  <svg
-                    style="height: 0.875rem; width: 0.875rem;"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
+              P2P Passkeys
+            </button>
+            <button
+              data-testid="storacha-tab-storacha"
+              onclick={() => handleTabSwitch('storacha')}
+              style="flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-size: 0.8rem; font-weight: 600; transition: all 200ms; background: {activeTab ===
+              'storacha'
+                ? 'linear-gradient(135deg, #E91315, #FFC83F)'
+                : 'transparent'}; color: {activeTab === 'storacha'
+                ? '#fff'
+                : '#6B7280'}; box-shadow: {activeTab === 'storacha'
+                ? '0 2px 8px rgba(233, 19, 21, 0.3)'
+                : 'none'};"
+            >
+              Storacha
+            </button>
+          </div>
 
-            {#if activeTab !== 'passkeys'}
-              <!-- Delegation Import -->
-              <div
-                style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to bottom right, #ffffff, #EFE3F3); padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);"
-              >
-                <h4
-                  style="margin-bottom: 0.5rem; font-weight: 700; color: #E91315; font-family: 'Epilogue', sans-serif; font-size: 0.875rem;"
-                >
-                  Import UCAN Delegation
-                </h4>
-                <p
-                  style="margin-bottom: 0.75rem; font-size: 0.75rem; color: #6b7280; font-family: 'DM Sans', sans-serif; line-height: 1.4;"
-                >
-                  Paste a <strong>Storacha UCAN delegation</strong> (from w3up, the CLI, or copied
-                  from a browser that already has access) to reach your space. This is not for
-                  linking devices over libp2p — use the <strong>P2P Passkeys</strong> tab and peer JSON
-                  for that.
-                </p>
-                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-                  <textarea
-                    class="storacha-textarea"
-                    bind:value={delegationText}
-                    placeholder="Paste your UCAN delegation here (base64 encoded)..."
-                    rows="4"
-                    style="width: 100%; resize: none; border-radius: 0.375rem; border: 1px solid #E91315; background-color: #ffffff; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #111827; font-family: 'DM Mono', monospace; outline: none; box-sizing: border-box;"
-                  ></textarea>
-                  <button
-                    class="storacha-btn-primary"
-                    onclick={handleImportDelegation}
-                    disabled={isLoading || !delegationText.trim()}
-                    style="display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.375rem; background-color: #E91315; padding: 0.5rem 1rem; color: #ffffff; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); transition: color 150ms, background-color 150ms; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-weight: 600; opacity: {isLoading ||
-                    !delegationText.trim()
-                      ? '0.5'
-                      : '1'}; box-sizing: border-box;"
-                  >
-                    {#if isLoading}
-                      <Loader2
-                        style="height: 1rem; width: 1rem; animation: spin 1s linear infinite;"
-                      />
-                      <span>Connecting...</span>
-                    {:else}
-                      <svg
-                        style="height: 1rem; width: 1rem;"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-                        />
-                      </svg>
-                      <span>Connect</span>
-                    {/if}
-                  </button>
-                </div>
-              </div>
-            {:else}
-              <!-- Link Device (peer id) -->
+          {#if activeTab === 'passkeys'}
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+              {@render yourDidCard()}
+              <!-- Link Device (peer id) — pre–Storacha-login flow -->
               <div
                 style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to bottom right, #ffffff, #FFE4AE); padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);"
               >
@@ -1790,6 +1983,7 @@
                   />
                   {#if linkError}
                     <div
+                      data-testid="storacha-link-error"
                       style="font-size: 0.7rem; color: #dc2626; font-family: 'DM Sans', sans-serif;"
                     >
                       {linkError}
@@ -1834,47 +2028,6 @@
                   </button>
                 </div>
               </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#if signingMode}
-          <!-- Tab Navigation (visible after authentication) — P2P Passkeys first -->
-          <div
-            style="border-radius: 0.5rem; background: rgba(233, 19, 21, 0.06); padding: 0.25rem; display: flex; gap: 0.25rem;"
-          >
-            <button
-              data-testid="storacha-tab-passkeys"
-              onclick={() => handleTabSwitch('passkeys')}
-              style="flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-size: 0.8rem; font-weight: 600; transition: all 200ms; background: {activeTab ===
-              'passkeys'
-                ? 'linear-gradient(135deg, #E91315, #FFC83F)'
-                : 'transparent'}; color: {activeTab === 'passkeys'
-                ? '#fff'
-                : '#6B7280'}; box-shadow: {activeTab === 'passkeys'
-                ? '0 2px 8px rgba(233, 19, 21, 0.3)'
-                : 'none'};"
-            >
-              P2P Passkeys
-            </button>
-            <button
-              data-testid="storacha-tab-storacha"
-              onclick={() => handleTabSwitch('storacha')}
-              style="flex: 1; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-size: 0.8rem; font-weight: 600; transition: all 200ms; background: {activeTab ===
-              'storacha'
-                ? 'linear-gradient(135deg, #E91315, #FFC83F)'
-                : 'transparent'}; color: {activeTab === 'storacha'
-                ? '#fff'
-                : '#6B7280'}; box-shadow: {activeTab === 'storacha'
-                ? '0 2px 8px rgba(233, 19, 21, 0.3)'
-                : 'none'};"
-            >
-              Storacha
-            </button>
-          </div>
-
-          {#if activeTab === 'passkeys'}
-            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
               <!-- Connection Status + Copy -->
               <div
                 style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to right, #ffffff, #FFE4AE); padding: 0.625rem 0.75rem;"
@@ -1945,46 +2098,74 @@
 
               {@render linkedDevicesPanel()}
             </div>
+          {:else if activeTab === 'storacha'}
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+              <div
+                style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to bottom right, #ffffff, #EFE3F3); padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);"
+              >
+                <h4
+                  style="margin-bottom: 0.5rem; font-weight: 700; color: #E91315; font-family: 'Epilogue', sans-serif; font-size: 0.875rem;"
+                >
+                  Import UCAN Delegation
+                </h4>
+                <p
+                  style="margin-bottom: 0.75rem; font-size: 0.75rem; color: #6b7280; font-family: 'DM Sans', sans-serif; line-height: 1.4;"
+                >
+                  Paste a <strong>Storacha UCAN delegation</strong> (from w3up, the CLI, or copied
+                  from a browser that already has access) to reach your space. This is not for
+                  linking devices over libp2p — use the <strong>P2P Passkeys</strong> tab and peer JSON
+                  for that.
+                </p>
+                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+                  <textarea
+                    class="storacha-textarea"
+                    data-testid="storacha-delegation-textarea"
+                    bind:value={delegationText}
+                    placeholder="Paste your UCAN delegation here (base64 encoded)..."
+                    rows="4"
+                    style="width: 100%; resize: none; border-radius: 0.375rem; border: 1px solid #E91315; background-color: #ffffff; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #111827; font-family: 'DM Mono', monospace; outline: none; box-sizing: border-box;"
+                  ></textarea>
+                  <button
+                    class="storacha-btn-primary"
+                    data-testid="storacha-delegation-import"
+                    onclick={handleImportDelegation}
+                    disabled={isLoading || !delegationText.trim()}
+                    style="display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.375rem; background-color: #E91315; padding: 0.5rem 1rem; color: #ffffff; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); transition: color 150ms, background-color 150ms; border: none; cursor: pointer; font-family: 'Epilogue', sans-serif; font-weight: 600; opacity: {isLoading ||
+                    !delegationText.trim()
+                      ? '0.5'
+                      : '1'}; box-sizing: border-box;"
+                  >
+                    {#if isLoading}
+                      <Loader2
+                        style="height: 1rem; width: 1rem; animation: spin 1s linear infinite;"
+                      />
+                      <span>Connecting...</span>
+                    {:else}
+                      <svg
+                        style="height: 1rem; width: 1rem;"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                        />
+                      </svg>
+                      <span>Connect</span>
+                    {/if}
+                  </button>
+                </div>
+              </div>
+            </div>
           {/if}
         {/if}
       </div>
     {:else}
       <!-- Logged In Section -->
       <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <!-- Account Info -->
-        <div
-          style="display: flex; align-items: center; justify-content: space-between; border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to right, #BDE0FF, #FFE4AE); padding: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);"
-        >
-          <div style="display: flex; align-items: center; gap: 0.75rem;">
-            <div
-              style="display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: #E91315; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); flex-shrink: 0;"
-            >
-              <CheckCircle style="height: 1rem; width: 1rem; color: #ffffff;" />
-            </div>
-            <div>
-              <div
-                style="font-size: 0.875rem; font-weight: 700; color: #E91315; font-family: 'Epilogue', sans-serif;"
-              >
-                Connected to Storacha
-              </div>
-              {#if currentSpace}
-                <div style="font-size: 0.75rem; color: #0176CE; font-family: 'DM Mono', monospace;">
-                  Space: {formatSpaceName(currentSpace)}
-                </div>
-              {/if}
-            </div>
-          </div>
-
-          <button
-            class="storacha-btn-icon"
-            onclick={handleLogout}
-            style="display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; color: #E91315; transition: color 150ms, background-color 150ms; border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif;"
-          >
-            <LogOut style="height: 0.75rem; width: 0.75rem;" />
-            <span>Logout</span>
-          </button>
-        </div>
-
         <!-- Tab Navigation — P2P Passkeys first -->
         <div
           style="border-radius: 0.5rem; background: rgba(233, 19, 21, 0.06); padding: 0.25rem; display: flex; gap: 0.25rem;"
@@ -2020,8 +2201,10 @@
         </div>
 
         {#if activeTab === 'storacha'}
-          <!-- Action Buttons -->
           <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            {@render storachaConnectedBanner()}
+            <!-- Action Buttons -->
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
             <button
               class="storacha-btn-backup"
               onclick={handleBackup}
@@ -2241,10 +2424,12 @@
               </div>
             {/if}
           </div>
+          </div>
         {/if}
 
         {#if activeTab === 'passkeys'}
           <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            {@render yourDidCard()}
             <!-- Connection Status + Copy -->
             <div
               style="border-radius: 0.375rem; border: 1px solid #E91315; background: linear-gradient(to right, #ffffff, #FFE4AE); padding: 0.625rem 0.75rem;"
@@ -2395,6 +2580,7 @@
                 </div>
                 {#if linkError}
                   <div
+                    data-testid="storacha-link-error"
                     style="margin-top: 0.5rem; font-size: 0.75rem; color: #b91c1c; font-family: 'DM Sans', sans-serif;"
                   >
                     {linkError}