@antigenic-oss/paint 0.2.8 → 0.3.0

package/src/components/TargetSelector.tsx

@@ -27,6 +27,7 @@ export function TargetSelector() {
   const [error, setError] = useState<string | null>(null)
 
   const isConnected = connectionStatus === 'connected'
+  const isAuthenticating = connectionStatus === 'authenticating'
 
   const handleConnect = () => {
     setError(null)
@@ -41,6 +42,19 @@ export function TargetSelector() {
     addRecentUrl(normalized)
   }
 
+  const handleLoginFirst = () => {
+    setError(null)
+    const raw = urlMode ? customUrl.trim() : `http://localhost:${selectedPort}`
+    if (urlMode && !raw) {
+      setError('Enter a URL')
+      return
+    }
+    const normalized = normalizeTargetUrl(raw)
+    setTargetUrl(normalized)
+    setConnectionStatus('authenticating')
+    addRecentUrl(normalized)
+  }
+
   const handleDisconnect = () => {
     // Clear persisted changes for this URL so reconnect loads fresh content
     if (targetUrl) {
@@ -70,11 +84,13 @@ export function TargetSelector() {
   const statusColor =
     connectionStatus === 'connected'
       ? 'var(--success)'
-      : connectionStatus === 'connecting' ||
-          connectionStatus === 'confirming' ||
-          connectionStatus === 'scanning'
-        ? 'var(--warning)'
-        : 'var(--error)'
+      : connectionStatus === 'authenticating'
+        ? 'var(--accent)'
+        : connectionStatus === 'connecting' ||
+            connectionStatus === 'confirming' ||
+            connectionStatus === 'scanning'
+          ? 'var(--warning)'
+          : 'var(--error)'
 
   return (
     <div className="flex items-center gap-2 relative">
@@ -88,7 +104,7 @@ export function TargetSelector() {
       {/* Toggle between dropdown and URL input */}
       <button
         onClick={() => {
-          if (!isConnected) {
+          if (!isConnected && !isAuthenticating) {
             setUrlMode(!urlMode)
             setError(null)
           }
@@ -96,8 +112,8 @@ export function TargetSelector() {
         className="p-1 rounded hover:bg-[var(--bg-hover)] transition-colors flex-shrink-0"
         style={{
           color: urlMode ? 'var(--accent)' : 'var(--text-muted)',
-          cursor: isConnected ? 'default' : 'pointer',
-          opacity: isConnected ? 0.5 : 1,
+          cursor: isConnected || isAuthenticating ? 'default' : 'pointer',
+          opacity: isConnected || isAuthenticating ? 0.5 : 1,
         }}
         title={urlMode ? 'Switch to port selector' : 'Switch to URL input'}
       >
@@ -133,7 +149,7 @@ export function TargetSelector() {
         )}
       </button>
 
-      {isConnected ? (
+      {isConnected || isAuthenticating ? (
         <div
           className="w-56 text-sm rounded px-2 py-1 truncate"
           style={{
@@ -172,20 +188,38 @@ export function TargetSelector() {
         </select>
       )}
 
+      {/* Login first button — only shown when disconnected */}
+      {!isConnected && !isAuthenticating && connectionStatus !== 'connecting' && (
+        <button
+          onClick={handleLoginFirst}
+          className="px-2 py-1 text-xs rounded transition-colors font-medium"
+          style={{
+            background: 'var(--bg-hover)',
+            color: 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+          title="Log in to your project first, then connect the editor"
+        >
+          Login first
+        </button>
+      )}
+
       {/* Connect / Disconnect button */}
       <button
-        onClick={isConnected ? handleDisconnect : handleConnect}
+        onClick={isConnected || isAuthenticating ? handleDisconnect : handleConnect}
         className="px-3 py-1 text-xs rounded transition-colors font-medium"
         style={{
-          background: isConnected ? 'var(--bg-hover)' : 'var(--accent)',
-          color: isConnected ? 'var(--text-secondary)' : '#fff',
+          background: isConnected || isAuthenticating ? 'var(--bg-hover)' : 'var(--accent)',
+          color: isConnected || isAuthenticating ? 'var(--text-secondary)' : '#fff',
         }}
       >
         {isConnected
           ? 'Disconnect'
-          : connectionStatus === 'connecting'
-            ? 'Connecting...'
-            : 'Connect'}
+          : isAuthenticating
+            ? 'Cancel'
+            : connectionStatus === 'connecting'
+              ? 'Connecting...'
+              : 'Connect'}
       </button>
 
       {/* Bridge status indicator (shown when running on Vercel) */}

package/src/components/left-panel/LayerNode.tsx

@@ -455,10 +455,13 @@ export function LayerNode({
   const IconComponent = ICON_MAP[category]
   const label = getDisplayLabel(node)
 
-  // Scroll selected layer into view (expansion is handled by usePostMessage)
+  // Scroll selected layer into view after tree expansion renders it.
+  // Use requestAnimationFrame to wait for layout after mount/expansion.
   useEffect(() => {
     if (isSelected && rowRef.current) {
-      rowRef.current.scrollIntoView({ block: 'center', behavior: 'instant' })
+      requestAnimationFrame(() => {
+        rowRef.current?.scrollIntoView({ block: 'center', behavior: 'instant' })
+      })
     }
   }, [isSelected])
 

package/src/components/left-panel/LayersPanel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useEditorStore } from '@/store'
 import { LayerNode } from './LayerNode'
 import { LayerSearch } from './LayerSearch'
@@ -9,6 +9,15 @@ export function LayersPanel() {
   const rootNode = useEditorStore((s) => s.rootNode)
   const searchQuery = useEditorStore((s) => s.searchQuery)
   const styleChanges = useEditorStore((s) => s.styleChanges)
+  const selectorPath = useEditorStore((s) => s.selectorPath)
+
+  // Auto-expand tree to the selected element whenever selection changes.
+  // This also re-expands after DOM_UPDATED replaces the tree.
+  useEffect(() => {
+    if (selectorPath) {
+      useEditorStore.getState().expandToNode(selectorPath)
+    }
+  }, [selectorPath, rootNode])
 
   const { changedSelectors, deletedSelectors } = useMemo(() => {
     const changed = new Set<string>()

package/src/components/right-panel/changes/ChangesPanel.tsx

@@ -1198,7 +1198,12 @@ export function ChangesPanel() {
   ])
 
   const handleAiScan = useCallback(() => {
-    if (!targetUrl || !projectRoot || breakpointChanges.length === 0) return
+    if (!targetUrl || breakpointChanges.length === 0) return
+    if (!projectRoot) {
+      showToast('error', 'Set a project folder first — click the folder icon in the Claude tab')
+      setActiveRightTab('claude')
+      return
+    }
 
     setAiScanStatus('scanning')
     setAiScanError(null)
@@ -1251,6 +1256,7 @@ export function ChangesPanel() {
     setAiScanResult,
     showToast,
     setActiveLeftTab,
+    setActiveRightTab,
   ])
 
   const handleSendToClaudeCode = useCallback(

package/src/hooks/useChangeTracker.ts

@@ -261,6 +261,32 @@ export function performRevertAll() {
   }
 }
 
+// Module-level singletons for auto-persist and load — prevents duplicate
+// subscriptions and stale-data overwrites when multiple components call
+// useChangeTracker() and some of them remount (e.g. LayerNode after tree updates).
+let persistSubscribed = false
+let persistTimeout: ReturnType<typeof setTimeout> | null = null
+let prevChangesRef: unknown = null
+let lastLoadedUrl: string | null = null
+
+function ensurePersistSubscription() {
+  if (persistSubscribed) return
+  persistSubscribed = true
+  useEditorStore.subscribe((state) => {
+    const ref = state.styleChanges
+    if (ref === prevChangesRef) return
+    prevChangesRef = ref
+
+    const url = state.targetUrl
+    if (!url) return
+
+    if (persistTimeout) clearTimeout(persistTimeout)
+    persistTimeout = setTimeout(() => {
+      useEditorStore.getState().persistChanges(url)
+    }, 300)
+  })
+}
+
 /**
  * Hook that tracks style changes, sends PREVIEW_CHANGE to inspector,
  * and auto-persists changes to localStorage.
@@ -273,36 +299,18 @@ export function useChangeTracker() {
   const pushUndo = useEditorStore((s) => s.pushUndo)
   const { sendToInspector } = usePostMessage()
 
-  // Auto-persist changes when they update (count OR content)
-  const persistTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const prevChangesRef = useRef<unknown>(null)
-
+  // Set up singleton auto-persist subscription (once globally, not per component)
   useEffect(() => {
-    const unsubscribe = useEditorStore.subscribe((state) => {
-      // Trigger on any styleChanges or elementSnapshots reference change
-      const ref = state.styleChanges
-      if (ref === prevChangesRef.current) return
-      prevChangesRef.current = ref
-
-      const url = state.targetUrl
-      if (!url) return
-
-      // Debounce persistence
-      if (persistTimeoutRef.current) clearTimeout(persistTimeoutRef.current)
-      persistTimeoutRef.current = setTimeout(() => {
-        useEditorStore.getState().persistChanges(url)
-      }, 300)
-    })
-
-    return () => {
-      unsubscribe()
-      if (persistTimeoutRef.current) clearTimeout(persistTimeoutRef.current)
-    }
+    ensurePersistSubscription()
   }, [])
 
-  // Load persisted changes when target URL changes
+  // Load persisted changes only when target URL actually changes,
+  // not on every component mount. This prevents remounting components
+  // (e.g. LayerNode after tree updates) from overwriting in-memory
+  // changes with stale localStorage data.
   useEffect(() => {
-    if (targetUrl) {
+    if (targetUrl && targetUrl !== lastLoadedUrl) {
+      lastLoadedUrl = targetUrl
       useEditorStore.getState().loadPersistedChanges(targetUrl)
     }
   }, [targetUrl])

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':
@@ -450,6 +456,12 @@ function handleMessage(event: MessageEvent) {
         newParentSelectorPath: mvNewParent,
         oldIndex: mvOldIndex,
         newIndex: mvNewIndex,
+        tagName: mvTag,
+        className: mvClass,
+        elementId: mvId,
+        innerText: mvText,
+        attributes: mvAttrs,
+        computedStyles: mvStyles,
       } = msg.payload
       const mvProperty = '__element_moved__'
 
@@ -464,6 +476,20 @@ function handleMessage(event: MessageEvent) {
         changeScope: store.changeScope,
       })
 
+      // Save element snapshot so move appears in Changes panel
+      store.saveElementSnapshot({
+        selectorPath: mvNewSelector,
+        tagName: mvTag || 'unknown',
+        className: mvClass ?? null,
+        elementId: mvId ?? null,
+        attributes: mvAttrs || {},
+        innerText: mvText,
+        computedStyles: mvStyles ? { ...mvStyles } : {},
+        pagePath: store.currentPagePath,
+        changeScope: store.changeScope,
+        sourceInfo: null,
+      })
+
       // Track the move
       store.addStyleChange({
         id: generateId(),

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)

package/src/types/messages.ts

@@ -337,6 +337,12 @@ export interface ElementMovedMessage {
     newParentSelectorPath: string
     oldIndex: number
     newIndex: number
+    tagName: string
+    className: string | null
+    elementId: string | null
+    innerText: string | null
+    attributes: Record<string, string>
+    computedStyles: Record<string, string>
   }
 }