fix: tab bar persistence + iframe loading/error states

Tabs now persist in localStorage across page navigations so opening
a new rApp adds it alongside existing tabs instead of replacing them.
Iframe shell shows a loading spinner with 12s timeout and error panel
when standalone apps are unreachable. Converts rSwag to iframe shell.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/swag/mod.ts

@@ -11,7 +11,7 @@ import { mkdir, writeFile, readFile, readdir, stat } from "node:fs/promises";
 import { join } from "node:path";
 import { getProduct, PRODUCTS } from "./products";
 import { processImage } from "./process-image";
-import { renderShell } from "../../server/shell";
+import { renderShell, renderIframeShell } from "../../server/shell";
 import { getModuleInfoList } from "../../shared/module";
 import type { RSpaceModule } from "../../shared/module";
 
@@ -228,15 +228,13 @@ routes.get("/api/artifact/:id", async (c) => {
 // ── Page route: swag designer ──
 routes.get("/", (c) => {
 	const space = c.req.param("space") || "demo";
-	return c.html(renderShell({
+	return c.html(renderIframeShell({
 		title: `Swag Designer | rSpace`,
 		moduleId: "swag",
 		spaceSlug: space,
 		modules: getModuleInfoList(),
 		theme: "dark",
-		styles: `<link rel="stylesheet" href="/modules/swag/swag.css">`,
+		standaloneDomain: "swag.mycofi.earth",
-		body: `<folk-swag-designer></folk-swag-designer>`,
-		scripts: `<script type="module" src="/modules/swag/folk-swag-designer.js"></script>`,
 	}));
 });
 

server/shell.ts

@@ -128,132 +128,157 @@ export function renderShell(opts: ShellOptions): string {
     };
 
     // ── Tab bar / Layer system initialization ──
+    // Tabs persist in localStorage so they survive full-page navigations.
+    // When a user opens a new rApp (via the app switcher or tab-add),
+    // the next page load reads the existing tabs and adds the new module.
     const tabBar = document.querySelector('rstack-tab-bar');
     const spaceSlug = '${escapeAttr(spaceSlug)}';
     const currentModuleId = '${escapeAttr(moduleId)}';
+    const TABS_KEY = 'rspace_tabs_' + spaceSlug;
+    const moduleList = ${moduleListJSON};
 
     if (tabBar) {
-      // Default layer: current module (bootstrap if no layers saved yet)
+      // Helper: look up a module's display name
-      const defaultLayer = {
+      function getModuleLabel(id) {
-        id: 'layer-' + currentModuleId,
+        const m = moduleList.find(mod => mod.id === id);
-        moduleId: currentModuleId,
+        return m ? m.name : id;
-        label: ${JSON.stringify(modules.find((m: any) => m.id === moduleId)?.name || moduleId)},
+      }
-        order: 0,
-        color: '',
-        visible: true,
-        createdAt: Date.now(),
-      };
 
-      // Set the current module as the active layer
+      // Helper: create a layer object
-      tabBar.setLayers([defaultLayer]);
+      function makeLayer(id, order) {
-      tabBar.setAttribute('active', defaultLayer.id);
+        return {
+          id: 'layer-' + id,
+          moduleId: id,
+          label: getModuleLabel(id),
+          order: order,
+          color: '',
+          visible: true,
+          createdAt: Date.now(),
+        };
+      }
 
-      // Listen for tab events
+      // ── Restore tabs from localStorage ──
+      let layers;
+      try {
+        const saved = localStorage.getItem(TABS_KEY);
+        layers = saved ? JSON.parse(saved) : [];
+        if (!Array.isArray(layers)) layers = [];
+      } catch(e) { layers = []; }
+
+      // Ensure the current module is in the tab list
+      if (!layers.find(l => l.moduleId === currentModuleId)) {
+        layers.push(makeLayer(currentModuleId, layers.length));
+      }
+
+      // Persist immediately (includes the newly-added tab)
+      localStorage.setItem(TABS_KEY, JSON.stringify(layers));
+
+      // Render all tabs with the current one active
+      tabBar.setLayers(layers);
+      tabBar.setAttribute('active', 'layer-' + currentModuleId);
+
+      // Helper: save current tab list to localStorage
+      function saveTabs() {
+        localStorage.setItem(TABS_KEY, JSON.stringify(layers));
+      }
+
+      // ── Tab events ──
       tabBar.addEventListener('layer-switch', (e) => {
         const { moduleId } = e.detail;
+        saveTabs();
         window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
       });
 
       tabBar.addEventListener('layer-add', (e) => {
         const { moduleId } = e.detail;
-        // Navigate to the new module (layer will be persisted when sync connects)
+        // Add the new module before navigating so the next page sees it
+        if (!layers.find(l => l.moduleId === moduleId)) {
+          layers.push(makeLayer(moduleId, layers.length));
+        }
+        saveTabs();
         window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
       });
 
       tabBar.addEventListener('layer-close', (e) => {
         const { layerId } = e.detail;
         tabBar.removeLayer(layerId);
-        // If we closed the active layer, switch to first remaining
+        layers = layers.filter(l => l.id !== layerId);
-        const remaining = tabBar.querySelectorAll?.('[data-layer-id]');
+        saveTabs();
-        // The tab bar handles this internally
+        // If we closed the active tab, switch to the first remaining
+        if (layerId === 'layer-' + currentModuleId && layers.length > 0) {
+          window.location.href = window.__rspaceNavUrl(spaceSlug, layers[0].moduleId);
+        }
       });
 
       tabBar.addEventListener('view-toggle', (e) => {
         const { mode } = e.detail;
-        // When switching to stack view, emit event for canvas to connect
         document.dispatchEvent(new CustomEvent('layer-view-mode', { detail: { mode } }));
       });
 
       // Expose tabBar for CommunitySync integration
       window.__rspaceTabBar = tabBar;
 
-      // If CommunitySync is available, wire up layer persistence
+      // ── CommunitySync: merge with Automerge once connected ──
       document.addEventListener('community-sync-ready', (e) => {
         const sync = e.detail?.sync;
         if (!sync) return;
 
-        // Load persisted layers
+        // Merge: Automerge layers win if they exist, otherwise seed from localStorage
-        const layers = sync.getLayers();
+        const remoteLayers = sync.getLayers();
-        if (layers.length > 0) {
+        if (remoteLayers.length > 0) {
+          // Ensure current module is also in the Automerge set
+          if (!remoteLayers.find(l => l.moduleId === currentModuleId)) {
+            const newLayer = makeLayer(currentModuleId, remoteLayers.length);
+            sync.addLayer(newLayer);
+          }
+          layers = sync.getLayers();
           tabBar.setLayers(layers);
           const activeId = sync.doc.activeLayerId;
           if (activeId) tabBar.setAttribute('active', activeId);
           tabBar.setFlows(sync.getFlows());
         } else {
-          // First visit: save the default layer
+          // First connection: push all localStorage tabs into Automerge
-          sync.addLayer(defaultLayer);
+          for (const l of layers) {
-          sync.setActiveLayer(defaultLayer.id);
+            sync.addLayer(l);
+          }
+          sync.setActiveLayer('layer-' + currentModuleId);
         }
 
+        // Keep localStorage in sync
+        saveTabs();
+
         // Sync layer changes back to Automerge
         tabBar.addEventListener('layer-switch', (e) => {
           sync.setActiveLayer(e.detail.layerId);
         });
-
-        // Layer add via tab bar (persist new layer)
         tabBar.addEventListener('layer-add', (e) => {
           const { moduleId } = e.detail;
-          const newLayer = {
+          const newLayer = makeLayer(moduleId, sync.getLayers().length);
-            id: 'layer-' + moduleId,
-            moduleId,
-            label: moduleId,
-            order: sync.getLayers().length,
-            color: '',
-            visible: true,
-            createdAt: Date.now(),
-          };
           sync.addLayer(newLayer);
         });
-
-        // Layer close (remove from Automerge)
         tabBar.addEventListener('layer-close', (e) => {
           sync.removeLayer(e.detail.layerId);
         });
-
-        // Layer reorder
         tabBar.addEventListener('layer-reorder', (e) => {
           const { layerId, newIndex } = e.detail;
           sync.updateLayer(layerId, { order: newIndex });
-          // Reindex all layers
+          const all = sync.getLayers();
-          const layers = sync.getLayers();
+          all.forEach((l, i) => { if (l.order !== i) sync.updateLayer(l.id, { order: i }); });
-          layers.forEach((l, i) => {
-            if (l.order !== i) sync.updateLayer(l.id, { order: i });
-          });
         });
+        tabBar.addEventListener('flow-create', (e) => { sync.addFlow(e.detail.flow); });
+        tabBar.addEventListener('flow-remove', (e) => { sync.removeFlow(e.detail.flowId); });
+        tabBar.addEventListener('view-toggle', (e) => { sync.setLayerViewMode(e.detail.mode); });
 
-        // Flow creation from stack view drag-to-connect
+        // Listen for remote changes
-        tabBar.addEventListener('flow-create', (e) => {
-          sync.addFlow(e.detail.flow);
-        });
-
-        // Flow removal from stack view right-click
-        tabBar.addEventListener('flow-remove', (e) => {
-          sync.removeFlow(e.detail.flowId);
-        });
-
-        // View mode persistence
-        tabBar.addEventListener('view-toggle', (e) => {
-          sync.setLayerViewMode(e.detail.mode);
-        });
-
-        // Listen for remote layer/flow changes
         sync.addEventListener('change', () => {
-          tabBar.setLayers(sync.getLayers());
+          layers = sync.getLayers();
+          tabBar.setLayers(layers);
           tabBar.setFlows(sync.getFlows());
           const activeId = sync.doc.activeLayerId;
           if (activeId) tabBar.setAttribute('active', activeId);
           const viewMode = sync.doc.layerViewMode;
           if (viewMode) tabBar.setAttribute('view-mode', viewMode);
+          saveTabs(); // keep localStorage in sync
         });
       });
     }
@@ -429,13 +454,28 @@ export function renderIframeShell(opts: IframeShellOptions): string {
 	const { standaloneDomain, path = "", ...shellOpts } = opts;
 	const iframeSrc = `https://${standaloneDomain}${path}`;
 
+	const moduleName = shellOpts.modules.find(m => m.id === shellOpts.moduleId)?.name || shellOpts.moduleId;
+
 	return renderShell({
 		...shellOpts,
-		body: `<iframe id="rspace-module-frame"
+		body: `<div id="rspace-iframe-loading" class="rspace-iframe-loading">
-      src="${escapeAttr(iframeSrc)}"
+        <div class="rspace-iframe-loading__spinner"></div>
-      class="rspace-iframe"
+        <p class="rspace-iframe-loading__text">Loading ${escapeHtml(moduleName)}...</p>
-      allow="camera;microphone;fullscreen;autoplay;clipboard-write;web-share"
+      </div>
-      loading="lazy"></iframe>`,
+      <div id="rspace-iframe-error" class="rspace-iframe-error" style="display:none">
+        <div class="rspace-iframe-error__icon">&#x26A0;</div>
+        <h3 class="rspace-iframe-error__title">${escapeHtml(moduleName)} is not available</h3>
+        <p class="rspace-iframe-error__text">The standalone app at <code>${escapeHtml(standaloneDomain)}</code> didn't respond.</p>
+        <div class="rspace-iframe-error__actions">
+          <button onclick="location.reload()" class="rspace-iframe-error__btn">Retry</button>
+          <a href="https://${escapeAttr(standaloneDomain)}" target="_blank" rel="noopener" class="rspace-iframe-error__btn rspace-iframe-error__btn--secondary">Open directly &rarr;</a>
+        </div>
+      </div>
+      <iframe id="rspace-module-frame"
+        src="${escapeAttr(iframeSrc)}"
+        class="rspace-iframe"
+        allow="camera;microphone;fullscreen;autoplay;clipboard-write;web-share"
+        loading="lazy"></iframe>`,
 		styles: `<style>
       #app.iframe-layout {
         padding-top: 92px;
@@ -443,21 +483,104 @@ export function renderIframeShell(opts: IframeShellOptions): string {
         overflow: hidden;
         display: flex;
         flex-direction: column;
+        position: relative;
       }
       .rspace-iframe {
         flex: 1;
         width: 100%;
         border: none;
         background: #0a0a0a;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      .rspace-iframe.loaded { opacity: 1; }
+      .rspace-iframe-loading {
+        position: absolute;
+        inset: 92px 0 0 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        background: #0a0a0a;
+        z-index: 1;
+      }
+      .rspace-iframe-loading__spinner {
+        width: 36px; height: 36px;
+        border: 3px solid rgba(255,255,255,0.1);
+        border-top-color: #14b8a6;
+        border-radius: 50%;
+        animation: rspace-spin 0.8s linear infinite;
+      }
+      @keyframes rspace-spin { to { transform: rotate(360deg); } }
+      .rspace-iframe-loading__text {
+        color: #64748b; font-size: 0.9rem; margin: 0;
+      }
+      .rspace-iframe-error {
+        position: absolute;
+        inset: 92px 0 0 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        background: #0a0a0a;
+        z-index: 2;
+        text-align: center;
+        padding: 24px;
+      }
+      .rspace-iframe-error__icon {
+        font-size: 2.5rem; opacity: 0.5;
+      }
+      .rspace-iframe-error__title {
+        color: #e2e8f0; font-size: 1.1rem; margin: 0;
+      }
+      .rspace-iframe-error__text {
+        color: #64748b; font-size: 0.85rem; margin: 0; max-width: 400px;
+      }
+      .rspace-iframe-error__text code {
+        color: #94a3b8; background: rgba(255,255,255,0.06);
+        padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;
+      }
+      .rspace-iframe-error__actions {
+        display: flex; gap: 10px; margin-top: 8px;
+      }
+      .rspace-iframe-error__btn {
+        padding: 8px 18px; border-radius: 8px; font-size: 0.82rem;
+        font-weight: 600; cursor: pointer; border: none;
+        background: #14b8a6; color: white; text-decoration: none;
+        transition: opacity 0.15s;
+      }
+      .rspace-iframe-error__btn:hover { opacity: 0.85; }
+      .rspace-iframe-error__btn--secondary {
+        background: rgba(255,255,255,0.08); color: #94a3b8;
       }
     </style>`,
 		scripts: `<script type="module">
       document.getElementById('app')?.classList.add('iframe-layout');
 
-      // Identity bridge: forward EncryptID session to the embedded app
       const frame = document.getElementById('rspace-module-frame');
+      const loadingEl = document.getElementById('rspace-iframe-loading');
+      const errorEl = document.getElementById('rspace-iframe-error');
+      let loaded = false;
+
+      // Timeout: if the iframe hasn't signalled a load after 12s, show error
+      const timeout = setTimeout(() => {
+        if (!loaded) {
+          loadingEl?.remove();
+          if (errorEl) errorEl.style.display = 'flex';
+        }
+      }, 12000);
+
       if (frame) {
         frame.addEventListener('load', () => {
+          loaded = true;
+          clearTimeout(timeout);
+          loadingEl?.remove();
+          errorEl?.remove();
+          frame.classList.add('loaded');
+
+          // Identity bridge: forward EncryptID session to the embedded app
           try {
             const raw = localStorage.getItem('encryptid_session');
             if (raw) {
@@ -471,6 +594,16 @@ export function renderIframeShell(opts: IframeShellOptions): string {
           } catch(e) {}
         });
 
+        // Also detect load failure via error event
+        frame.addEventListener('error', () => {
+          if (!loaded) {
+            loaded = true;
+            clearTimeout(timeout);
+            loadingEl?.remove();
+            if (errorEl) errorEl.style.display = 'flex';
+          }
+        });
+
         // Listen for navigation messages from the iframe
         window.addEventListener('message', (e) => {
           if (e.origin !== 'https://${escapeAttr(standaloneDomain)}') return;