@antigenic-oss/paint 0.2.8 → 0.3.0

package/src/app/layout.tsx

@@ -2,8 +2,54 @@ import type { Metadata } from 'next'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'pAInt',
-  description: 'Visual design editor for localhost projects',
+  metadataBase: new URL('https://dev-editor-flow.vercel.app'),
+  title: {
+    default: 'pAInt | Visual Editor for Localhost Projects',
+    template: '%s | pAInt',
+  },
+  description:
+    'pAInt is a visual editor for localhost apps with bridge, server, and terminal workflows. Edit first, export precise changelogs, and save AI tokens with focused Claude Code handoff.',
+  keywords: [
+    'pAInt',
+    'visual editor',
+    'localhost web editor',
+    'bridge server',
+    'terminal server',
+    'Claude Code',
+    'AI token efficiency',
+    'CSS visual editing',
+    'Next.js visual editor',
+    'developer tooling',
+  ],
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    type: 'website',
+    url: '/',
+    siteName: 'pAInt',
+    title: 'pAInt | Visual Editor for Localhost Projects',
+    description:
+      'Inspect, edit, and export structured UI changes. Use bridge/server/terminal modes to ship faster and reduce AI token usage.',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'pAInt | Visual Editor for Localhost Projects',
+    description:
+      'Visual-first editing plus focused changelogs for Claude Code means fewer tokens and faster delivery.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+      'max-video-preview': -1,
+    },
+  },
+  category: 'developer tools',
 }
 
 export default function RootLayout({

package/src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import { Editor } from '@/components/Editor'
 import { useEditorStore } from '@/store'
+import { registerSwProxy } from '@/lib/serviceWorkerRegistration'
 
 export default function Home() {
   const loadPersistedUI = useEditorStore((s) => s.loadPersistedUI)
@@ -26,6 +27,7 @@ export default function Home() {
 
     loadPersistedUI()
     loadPersistedClaude()
+    registerSwProxy()
 
     // Suppress HMR errors caused by proxied routes leaking into the
     // editor's route tree (e.g. "unrecognized HMR message").

package/src/components/ConnectModal.tsx

@@ -49,43 +49,14 @@ export function ConnectModal() {
   const [isBrowsing, setIsBrowsing] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [howToOpen, setHowToOpen] = useState(false)
-  const [showScriptFallback, setShowScriptFallback] = useState(false)
-  const [scriptCopied, setScriptCopied] = useState(false)
   const [scanResult, setScanResult] = useState<ScanResult | null>(null)
   const [scanDone, setScanDone] = useState(false)
-  const fallbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const autoAdvanceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const isConnecting = connectionStatus === 'connecting'
   const isConfirming = connectionStatus === 'confirming'
   const isScanning = connectionStatus === 'scanning'
 
-  // Show script tag fallback after 5s of connecting (immediately when deployed)
-  useEffect(() => {
-    if (isConnecting && targetUrl) {
-      if (!isLocal) {
-        // On Vercel, show immediately — proxy won't inject the script
-        setShowScriptFallback(true)
-      } else {
-        fallbackTimerRef.current = setTimeout(() => {
-          setShowScriptFallback(true)
-        }, 5000)
-      }
-    } else {
-      setShowScriptFallback(false)
-      if (fallbackTimerRef.current) {
-        clearTimeout(fallbackTimerRef.current)
-        fallbackTimerRef.current = null
-      }
-    }
-    return () => {
-      if (fallbackTimerRef.current) {
-        clearTimeout(fallbackTimerRef.current)
-        fallbackTimerRef.current = null
-      }
-    }
-  }, [isConnecting, targetUrl, isLocal])
-
   // Cleanup auto-advance timer
   useEffect(() => {
     return () => {
@@ -104,31 +75,14 @@ export function ConnectModal() {
     if (isConfirming || isScanning) {
       cancelPendingConnection()
     }
-    setShowScriptFallback(false)
-    setScriptCopied(false)
     setScanResult(null)
     setScanDone(false)
-    if (fallbackTimerRef.current) {
-      clearTimeout(fallbackTimerRef.current)
-      fallbackTimerRef.current = null
-    }
     if (autoAdvanceRef.current) {
       clearTimeout(autoAdvanceRef.current)
       autoAdvanceRef.current = null
     }
   }
 
-  const handleCopyScript = async () => {
-    const scriptTag = `<script src="${window.location.origin}/dev-editor-inspector.js"></script>`
-    try {
-      await navigator.clipboard.writeText(scriptTag)
-      setScriptCopied(true)
-      setTimeout(() => setScriptCopied(false), 2000)
-    } catch {
-      /* fallback: user can manually copy */
-    }
-  }
-
   // Pre-fill folder path from portRoots when selected URL changes
   const currentUrl = urlMode
     ? customUrl.trim()
@@ -191,6 +145,19 @@ export function ConnectModal() {
     }
   }
 
+  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 handleConfirm = async () => {
     if (!pendingTargetUrl || !pendingFolderPath) return
     setConnectionStatus('scanning')
@@ -237,16 +204,17 @@ export function ConnectModal() {
     }
   }
 
+  // Auto-dismiss modal once connecting/authenticating starts — top bar shows status
+  if (isConnecting || connectionStatus === 'connected' || connectionStatus === 'authenticating') return null
+
   // Header subtitle changes per step
   const headerSubtitle = isConfirming
     ? 'Confirm connection details'
     : isScanning
       ? 'Scanning project folder'
-      : isConnecting
-        ? 'Connecting to your project'
-        : isLocal
-          ? 'Connect to your localhost project'
-          : 'Connect to your project'
+      : isLocal
+        ? 'Connect to your localhost project'
+        : 'Connect to your project'
 
   return (
     <div
@@ -574,58 +542,28 @@ export function ConnectModal() {
                     color: 'var(--text-secondary)',
                   }}
                 >
-                  {/* Connection Methods */}
+                  {/* How It Works */}
                   <div>
                     <h4
                       className="text-[11px] font-semibold uppercase tracking-wide mb-2"
                       style={{ color: 'var(--text-primary)' }}
                     >
-                      Connection Methods
+                      How It Works
                     </h4>
                     <div className="flex flex-col gap-2">
                       <div>
+                        pAInt uses a{' '}
                         <span style={{ color: 'var(--success)' }}>
-                          Automatic (Reverse Proxy)
-                        </span>{' '}
-                        — Default. The editor loads your page through a built-in
-                        proxy and injects the inspector script automatically.
-                      </div>
-                      <div>
-                        <span style={{ color: 'var(--warning)' }}>
-                          Manual (Script Tag)
+                          Service Worker proxy
                         </span>{' '}
-                        — If auto-connect takes longer than 5s, add the provided
-                        script tag to your project&apos;s HTML layout.
+                        to load your page, inject the inspector script, and
+                        strip security headers — all automatically. No script
+                        tags or project modifications needed.
                       </div>
                       <div>
-                        <span style={{ color: 'var(--accent)' }}>
-                          React Native / Expo Web
-                        </span>{' '}
-                        — Add the inspector script dynamically in your root
-                        layout:
-                        <pre
-                          className="mt-1.5 px-3 py-2.5 rounded text-[11px] leading-relaxed overflow-x-auto whitespace-pre"
-                          style={{
-                            background: 'var(--bg-tertiary)',
-                            color: 'var(--text-primary)',
-                            border: '1px solid var(--border)',
-                          }}
-                        >{`useEffect(() => {
-  if (Platform.OS === 'web') {
-    const script1 = document.createElement('script');
-    script1.src = 'http://localhost:4000/dev-editor-inspector.js';
-    document.body.appendChild(script1);
-
-    const script2 = document.createElement('script');
-    script2.src = 'https://dev-editor-flow.vercel.app/dev-editor-inspector.js';
-    document.body.appendChild(script2);
-
-    return () => {
-      document.body.removeChild(script1);
-      document.body.removeChild(script2);
-    };
-  }
-}`}</pre>
+                        Your page&apos;s scripts and client-side rendering
+                        work normally, so interactive features (3D, animations,
+                        routing) are fully preserved.
                       </div>
                     </div>
                   </div>
@@ -817,75 +755,8 @@ export function ConnectModal() {
             </div>
           )}
 
-          {/* ─── STEP: CONNECTING ─── */}
-          {isConnecting && (
-            <div className="flex flex-col items-center py-8 gap-3">
-              {/* Spinner */}
-              <div
-                className="w-8 h-8 rounded-full"
-                style={{
-                  border: '2px solid var(--border)',
-                  borderTopColor: 'var(--accent)',
-                  animation: 'spin 0.8s linear infinite',
-                }}
-              />
-              <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                Connecting to {targetUrl?.replace(/^https?:\/\//, '')}...
-              </p>
-            </div>
-          )}
         </div>
 
-        {/* Script fallback banner — shown after 5s of connecting */}
-        {showScriptFallback && (
-          <div
-            className="px-6 py-3 flex-shrink-0"
-            style={{
-              borderTop: '1px solid var(--border)',
-              background: 'var(--bg-secondary)',
-            }}
-          >
-            <div
-              className="text-xs font-medium mb-1"
-              style={{ color: 'var(--warning)' }}
-            >
-              {isLocal
-                ? 'Inspector script not detected'
-                : 'Script tag required'}
-            </div>
-            <div
-              className="text-[11px] mb-2"
-              style={{ color: 'var(--text-secondary)' }}
-            >
-              {isLocal
-                ? "Add this script tag to your project's HTML layout:"
-                : "Since the editor is running remotely, add this script tag to your project's HTML layout to enable inspection:"}
-            </div>
-            <div className="flex items-center gap-2">
-              <code
-                className="flex-1 text-[11px] px-2 py-1.5 rounded overflow-x-auto whitespace-nowrap"
-                style={{
-                  background: 'var(--bg-primary)',
-                  color: 'var(--text-primary)',
-                  border: '1px solid var(--border)',
-                }}
-              >
-                {`<script src="${typeof window !== 'undefined' ? window.location.origin : ''}/dev-editor-inspector.js"></script>`}
-              </code>
-              <button
-                onClick={handleCopyScript}
-                className="px-3 py-1.5 text-[11px] font-medium rounded whitespace-nowrap transition-colors flex-shrink-0"
-                style={{
-                  background: scriptCopied ? 'var(--success)' : 'var(--accent)',
-                  color: '#fff',
-                }}
-              >
-                {scriptCopied ? 'Copied!' : 'Copy'}
-              </button>
-            </div>
-          </div>
-        )}
-
         {/* Footer */}
         <div
           className="px-6 py-4 flex-shrink-0"
@@ -897,20 +768,80 @@ export function ConnectModal() {
             </p>
           )}
 
-          {/* SETUP footer: Connect button */}
+          {/* SETUP footer: Connect + Login first buttons */}
           {connectionStatus === 'disconnected' && (
             <>
-              <button
-                onClick={handleConnect}
-                className="w-full py-2 text-xs rounded font-medium transition-colors"
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleConnect}
+                  className="flex-1 py-2 text-xs rounded font-medium transition-colors"
+                  style={{
+                    background: 'var(--accent)',
+                    color: '#fff',
+                  }}
+                >
+                  Connect
+                </button>
+                <button
+                  onClick={handleLoginFirst}
+                  className="py-2 px-4 text-xs rounded font-medium transition-colors flex-shrink-0"
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-secondary)',
+                    border: '1px solid var(--border)',
+                  }}
+                  title="Log in to your project first, then connect the editor"
+                >
+                  Login first
+                </button>
+              </div>
+              {/* Auth hint */}
+              <p
+                className="text-[11px] mt-2 text-center"
+                style={{ color: 'var(--text-muted)' }}
+              >
+                Project requires authentication? Use{' '}
+                <span style={{ color: 'var(--text-secondary)' }}>Login first</span>{' '}
+                to sign in before the editor connects.
+              </p>
+              {/* Incognito tip banner */}
+              <div
+                className="mt-3 rounded-lg px-4 py-3 flex items-start gap-3"
                 style={{
-                  background: 'var(--accent)',
-                  color: '#fff',
+                  background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 146, 0, 0.08) 100%)',
+                  border: '1px solid rgba(251, 191, 36, 0.4)',
                 }}
               >
-                Connect
-              </button>
-              <div className="mt-3 text-center">
+                {/* Incognito icon */}
+                <div
+                  className="flex-shrink-0 mt-0.5"
+                  style={{ color: 'var(--warning)', opacity: 0.9 }}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M12 12c2.5 0 4.5-1 6-3H6c1.5 2 3.5 3 6 3z" />
+                    <path d="M3 9h18" />
+                    <circle cx="7.5" cy="15.5" r="2.5" />
+                    <circle cx="16.5" cy="15.5" r="2.5" />
+                    <path d="M10 15.5h4" />
+                  </svg>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span
+                    className="text-xs font-medium leading-tight"
+                    style={{ color: 'var(--warning)' }}
+                  >
+                    Use Incognito for the best experience
+                  </span>
+                  <span
+                    className="text-[11px] leading-relaxed"
+                    style={{ color: 'var(--text-primary)' }}
+                  >
+                    Browser extensions and cached data can interfere with the
+                    connection. If it gets stuck, try an Incognito window.
+                  </span>
+                </div>
+              </div>
+              <div className="mt-2.5 text-center">
                 <a
                   href="/docs"
                   target="_blank"
@@ -972,20 +903,6 @@ export function ConnectModal() {
             </button>
           )}
 
-          {/* CONNECTING footer: Cancel */}
-          {isConnecting && (
-            <button
-              onClick={cancelConnection}
-              className="w-full py-2 text-xs rounded font-medium transition-colors"
-              style={{
-                background: 'var(--bg-tertiary)',
-                color: 'var(--text-secondary)',
-                border: '1px solid var(--border)',
-              }}
-            >
-              Cancel
-            </button>
-          )}
         </div>
       </div>
     </div>

package/src/components/PreviewFrame.tsx

@@ -8,6 +8,7 @@ import {
   PREVIEW_WIDTH_MAX,
   PROXY_HEADER,
 } from '@/lib/constants'
+import { isSwProxyReady } from '@/lib/serviceWorkerRegistration'
 import { ResponsiveToolbar } from './ResponsiveToolbar'
 
 /**
@@ -49,12 +50,38 @@ function buildDirectUrl(targetUrl: string, pagePath: string): string {
   return `${targetUrl}${path}`
 }
 
+/**
+ * Build the SW proxy URL for the iframe. Routes through the Service Worker
+ * at /sw-proxy/ which intercepts all requests and proxies them to the target,
+ * preserving all scripts for full client-rendered content.
+ */
+function buildSwProxyUrl(targetUrl: string, pagePath: string): string {
+  const path = pagePath === '/' ? '/' : pagePath
+  const encoded = encodeURIComponent(targetUrl)
+  return `/sw-proxy${path}?__sw_target=${encoded}`
+}
+
+/**
+ * Build a SW proxy URL for auth mode. Same as regular SW proxy but adds
+ * __sw_auth=1 so the SW skips inspector/nav-blocker injection, letting
+ * the user interact with login forms normally.
+ */
+function buildSwProxyAuthUrl(targetUrl: string, pagePath: string): string {
+  const path = pagePath === '/' ? '/' : pagePath
+  const encoded = encodeURIComponent(targetUrl)
+  return `/sw-proxy${path}?__sw_target=${encoded}&__sw_auth=1`
+}
+
 /**
  * Build the appropriate iframe URL based on whether the editor is local,
  * has a bridge connection, or is remote without bridge.
+ * Prefers SW proxy when available for full client-rendered content.
  */
 function buildIframeUrl(targetUrl: string, pagePath: string): string {
   if (isEditorOnLocalhost()) {
+    if (isSwProxyReady()) {
+      return buildSwProxyUrl(targetUrl, pagePath)
+    }
     return buildProxyUrl(targetUrl, pagePath)
   }
   // Check for bridge connection
@@ -78,6 +105,24 @@ export function PreviewFrame() {
   const lastSrcRef = useRef<string | null>(null)
   const [isDragging, setIsDragging] = useState(false)
 
+  // Handle auth mode — load target without inspector so user can log in
+  useEffect(() => {
+    if (!targetUrl || connectionStatus !== 'authenticating') return
+
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const newSrc = isSwProxyReady()
+      ? buildSwProxyAuthUrl(targetUrl, currentPagePath)
+      : buildProxyUrl(targetUrl, currentPagePath)
+    console.debug('[PreviewFrame] auth mode iframe src:', newSrc)
+
+    if (lastSrcRef.current !== newSrc) {
+      lastSrcRef.current = newSrc
+      iframe.src = newSrc
+    }
+  }, [targetUrl, connectionStatus, currentPagePath, iframeRef])
+
   // Handle initial connection — load through proxy
   useEffect(() => {
     if (!targetUrl || connectionStatus !== 'connecting') return
@@ -86,6 +131,8 @@ export function PreviewFrame() {
     if (!iframe) return
 
     const newSrc = buildIframeUrl(targetUrl, currentPagePath)
+    const usingSw = newSrc.startsWith('/sw-proxy/')
+    console.debug('[PreviewFrame] iframe src:', newSrc, '| SW ready:', isSwProxyReady())
 
     if (lastSrcRef.current !== newSrc) {
       lastSrcRef.current = newSrc
@@ -98,8 +145,23 @@ export function PreviewFrame() {
 
     iframe.addEventListener('error', handleError)
 
+    // Fallback: if SW proxy doesn't connect within 8s, retry with old proxy.
+    // This handles stale SWs, extension interference, or other SW issues.
+    let fallbackTimer: ReturnType<typeof setTimeout> | null = null
+    if (usingSw) {
+      fallbackTimer = setTimeout(() => {
+        // Only fall back if still connecting (not yet connected)
+        if (useEditorStore.getState().connectionStatus !== 'connecting') return
+        console.debug('[PreviewFrame] SW proxy timeout — falling back to reverse proxy')
+        const fallbackSrc = buildProxyUrl(targetUrl, currentPagePath)
+        lastSrcRef.current = fallbackSrc
+        iframe.src = fallbackSrc
+      }, 8000)
+    }
+
     return () => {
       iframe.removeEventListener('error', handleError)
+      if (fallbackTimer) clearTimeout(fallbackTimer)
     }
   }, [
     targetUrl,
@@ -219,6 +281,13 @@ export function PreviewFrame() {
 
   const showHandles = !isFullWidth && connectionStatus === 'connected'
 
+  const handleFinishAuth = () => {
+    // Force a fresh load by clearing lastSrcRef so the connecting effect
+    // picks up the new (non-auth) URL even if the path hasn't changed.
+    lastSrcRef.current = null
+    setConnectionStatus('connecting')
+  }
+
   return (
     <div
       className="flex flex-col h-full"
@@ -226,6 +295,28 @@ export function PreviewFrame() {
     >
       {connectionStatus === 'connected' && <ResponsiveToolbar />}
 
+      {/* Auth mode banner */}
+      {connectionStatus === 'authenticating' && (
+        <div
+          className="flex items-center justify-between px-4 py-2 flex-shrink-0"
+          style={{
+            background: 'var(--bg-secondary)',
+            borderBottom: '1px solid var(--border)',
+          }}
+        >
+          <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+            Log in to your project below, then click <strong>Connect Editor</strong> when ready.
+          </span>
+          <button
+            onClick={handleFinishAuth}
+            className="px-3 py-1 text-xs rounded font-medium ml-3 flex-shrink-0"
+            style={{ background: 'var(--accent)', color: '#fff' }}
+          >
+            Connect Editor
+          </button>
+        </div>
+      )}
+
       <div
         ref={containerRef}
         className="flex items-start justify-center flex-1 overflow-auto relative"