@antigenic-oss/paint 0.2.9 → 0.3.0

package/src/hooks/usePostMessage.ts

@@ -280,7 +280,13 @@ function handleMessage(event: MessageEvent) {
       break
 
     case 'PAGE_LINKS':
-      store.setPageLinks(msg.payload.links)
+      // Strip /sw-proxy/ or /api/proxy prefix from page link paths
+      store.setPageLinks(
+        msg.payload.links.map((link: { href: string; text: string }) => ({
+          ...link,
+          href: link.href.replace(/^\/(sw-proxy|api\/proxy)/, '') || '/',
+        })),
+      )
       break
 
     case 'COMPONENTS_DETECTED':

package/src/lib/serviceWorkerRegistration.ts

@@ -0,0 +1,163 @@
+import { useEditorStore } from '@/store'
+
+let swReady = false
+
+// Must match SW_VERSION in /public/sw-proxy/sw.js
+const EXPECTED_SW_VERSION = 10
+
+const log = (...args: unknown[]) =>
+  console.debug('[sw-proxy]', ...args)
+
+/**
+ * Check the active SW's version via message. Returns the version number,
+ * or 0 if the SW doesn't respond (old version without VERSION_CHECK).
+ */
+function checkSwVersion(sw: ServiceWorker): Promise<number> {
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => resolve(0), 1000)
+    const channel = new MessageChannel()
+    channel.port1.onmessage = (event) => {
+      clearTimeout(timeout)
+      resolve(event.data?.version ?? 0)
+    }
+    sw.postMessage({ type: 'VERSION_CHECK' }, [channel.port2])
+  })
+}
+
+/**
+ * Register the SW proxy at /sw-proxy/sw.js with scope /sw-proxy/.
+ * Sets swProxyReady in the Zustand store when activation completes.
+ * Returns true if the SW is active, false otherwise.
+ *
+ * Handles upgrades from old SW versions by checking the version number.
+ * If the active SW is outdated, it's unregistered and a fresh install
+ * is performed — this ensures existing users get the latest SW code.
+ */
+export async function registerSwProxy(): Promise<boolean> {
+  if (!('serviceWorker' in navigator)) {
+    log('Service Workers not supported — using fallback proxy')
+    return false
+  }
+
+  try {
+    log('Registering...')
+    let registration = await navigator.serviceWorker.register(
+      '/sw-proxy/sw.js',
+      { scope: '/sw-proxy/', updateViaCache: 'none' },
+    )
+    log('Registration successful, scope:', registration.scope)
+
+    // If there's an active SW, check its version
+    if (registration.active) {
+      const version = await checkSwVersion(registration.active)
+      log('Active SW version:', version, '(expected:', EXPECTED_SW_VERSION + ')')
+
+      if (version < EXPECTED_SW_VERSION) {
+        // Old SW — force unregister and re-register clean
+        log('Stale SW detected — forcing clean re-registration')
+        await registration.unregister()
+        registration = await navigator.serviceWorker.register(
+          '/sw-proxy/sw.js',
+          { scope: '/sw-proxy/', updateViaCache: 'none' },
+        )
+        // Fall through to wait for fresh install below
+      }
+    }
+
+    // Helper to mark SW as ready
+    const markReady = () => {
+      if (!swReady) {
+        swReady = true
+        useEditorStore.getState().setSwProxyReady(true)
+        log('Ready')
+      }
+    }
+
+    // If there's a waiting SW, tell it to activate immediately
+    if (registration.waiting) {
+      log('Found waiting SW — sending SKIP_WAITING')
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }
+
+    // If an update is installing, wait for it before marking ready
+    const installing = registration.installing
+    if (installing) {
+      log('SW installing, waiting for activation...')
+      return new Promise<boolean>((resolve) => {
+        installing.addEventListener('statechange', () => {
+          log('Installing SW state:', installing.state)
+          if (installing.state === 'installed' && registration.waiting) {
+            registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+          }
+          if (installing.state === 'activated') {
+            markReady()
+            resolve(true)
+          }
+        })
+      })
+    }
+
+    // Listen for future updates during this page session
+    registration.addEventListener('updatefound', () => {
+      const newSw = registration.installing
+      if (!newSw) return
+      log('Update found, tracking new SW...')
+      newSw.addEventListener('statechange', () => {
+        if (newSw.state === 'installed' && registration.waiting) {
+          registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+        }
+        if (newSw.state === 'activated') {
+          markReady()
+        }
+      })
+    })
+
+    // No update in progress — if already active, we're ready
+    if (registration.active) {
+      markReady()
+      return true
+    }
+
+    // First-time install — wait for activation
+    const sw = registration.waiting
+    if (!sw) {
+      log('No SW instance found')
+      return false
+    }
+
+    log('Waiting for activation, state:', sw.state)
+    return new Promise<boolean>((resolve) => {
+      sw.addEventListener('statechange', () => {
+        log('State changed to:', sw.state)
+        if (sw.state === 'activated') {
+          markReady()
+          resolve(true)
+        }
+      })
+    })
+  } catch (err) {
+    console.warn('[sw-proxy] Registration failed:', err)
+    return false
+  }
+}
+
+/** Synchronous readiness check. */
+export function isSwProxyReady(): boolean {
+  return swReady
+}
+
+/** Unregister the SW proxy and reset state. */
+export async function unregisterSwProxy(): Promise<void> {
+  swReady = false
+  useEditorStore.getState().setSwProxyReady(false)
+  log('Unregistered')
+
+  if (!('serviceWorker' in navigator)) return
+
+  const registrations = await navigator.serviceWorker.getRegistrations()
+  for (const reg of registrations) {
+    if (reg.scope.includes('/sw-proxy/')) {
+      await reg.unregister()
+    }
+  }
+}

package/src/store/treeSlice.ts

@@ -13,6 +13,7 @@ function _collectAllIds(node: TreeNode, ids: Set<string>) {
 export interface TreeSlice {
   rootNode: TreeNode | null
   expandedNodeIds: Set<string>
+  collapsedNodeIds: Set<string>
   searchQuery: string
   highlightedNodeId: string | null
 
@@ -29,41 +30,52 @@ export const createTreeSlice: StateCreator<TreeSlice, [], [], TreeSlice> = (
 ) => ({
   rootNode: null,
   expandedNodeIds: new Set<string>(),
+  collapsedNodeIds: new Set<string>(),
   searchQuery: '',
   highlightedNodeId: null,
 
   setRootNode: (node) => {
-    const { expandedNodeIds: prev } = get()
-    // On first load (no previous state), start collapsed.
-    // On subsequent updates (DOM_UPDATED), preserve user-expanded state.
-    if (prev.size === 0) {
-      set({ rootNode: node, expandedNodeIds: new Set<string>() })
-    } else {
-      set({ rootNode: node })
+    if (!node) {
+      set({ rootNode: null, expandedNodeIds: new Set<string>(), collapsedNodeIds: new Set<string>() })
+      return
+    }
+    // Expand all nodes by default, but respect user-collapsed nodes.
+    const all = new Set<string>()
+    _collectAllIds(node, all)
+    const { collapsedNodeIds } = get()
+    for (const id of collapsedNodeIds) {
+      all.delete(id)
     }
+    set({ rootNode: node, expandedNodeIds: all })
   },
   setSearchQuery: (query) => set({ searchQuery: query }),
   setHighlightedNodeId: (id) => set({ highlightedNodeId: id }),
 
   toggleNodeExpanded: (nodeId) => {
-    const { expandedNodeIds } = get()
-    const next = new Set(expandedNodeIds)
-    if (next.has(nodeId)) {
-      next.delete(nodeId)
+    const { expandedNodeIds, collapsedNodeIds } = get()
+    const nextExpanded = new Set(expandedNodeIds)
+    const nextCollapsed = new Set(collapsedNodeIds)
+    if (nextExpanded.has(nodeId)) {
+      nextExpanded.delete(nodeId)
+      nextCollapsed.add(nodeId)
     } else {
-      next.add(nodeId)
+      nextExpanded.add(nodeId)
+      nextCollapsed.delete(nodeId)
     }
-    set({ expandedNodeIds: next })
+    set({ expandedNodeIds: nextExpanded, collapsedNodeIds: nextCollapsed })
   },
 
   expandToNode: (nodeId) => {
-    // Merge ancestors into existing expanded state (preserve user-toggled branches)
-    const { expandedNodeIds: prev } = get()
+    // Merge ancestors into existing expanded state and clear them from collapsed
+    const { expandedNodeIds: prev, collapsedNodeIds: prevCollapsed } = get()
     const next = new Set(prev)
+    const nextCollapsed = new Set(prevCollapsed)
     const parts = nodeId.split(' > ')
     for (let i = 1; i <= parts.length; i++) {
-      next.add(parts.slice(0, i).join(' > '))
+      const ancestor = parts.slice(0, i).join(' > ')
+      next.add(ancestor)
+      nextCollapsed.delete(ancestor)
     }
-    set({ expandedNodeIds: next })
+    set({ expandedNodeIds: next, collapsedNodeIds: nextCollapsed })
   },
 })

package/src/store/uiSlice.ts

@@ -18,6 +18,7 @@ export type ConnectionStatus =
   | 'disconnected'
   | 'confirming'
   | 'scanning'
+  | 'authenticating'
   | 'connecting'
   | 'connected'
 export type BridgeStatus =
@@ -48,6 +49,7 @@ export interface UISlice {
   toasts: Toast[]
   bridgeUrl: string | null
   bridgeStatus: BridgeStatus
+  swProxyReady: boolean
 
   setTargetUrl: (url: string | null) => void
   setConnectionStatus: (status: ConnectionStatus) => void
@@ -77,6 +79,7 @@ export interface UISlice {
   dismissToast: (id: string) => void
   setBridgeUrl: (url: string | null) => void
   setBridgeStatus: (status: BridgeStatus) => void
+  setSwProxyReady: (ready: boolean) => void
   loadPersistedUI: () => void
 }
 
@@ -105,6 +108,7 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (
   toasts: [],
   bridgeUrl: null,
   bridgeStatus: 'disconnected',
+  swProxyReady: false,
 
   setTargetUrl: (url) => {
     set({ targetUrl: url })
@@ -300,6 +304,8 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (
 
   setBridgeStatus: (status) => set({ bridgeStatus: status }),
 
+  setSwProxyReady: (ready) => set({ swProxyReady: ready }),
+
   loadPersistedUI: () => {
     try {
       const urls = localStorage.getItem(LOCAL_STORAGE_KEYS.RECENT_URLS)