@antigenic-oss/paint 0.1.0

package/src/proxy.ts

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const PROXY_HEADER = 'x-dev-editor-target'
+
+/**
+ * Middleware that intercepts asset requests originating from the proxied
+ * iframe and rewrites them to go through the proxy API route.
+ *
+ * Matches /_next/ paths (static assets, images) and common asset paths
+ * (fonts, images, icons, media) that target apps may serve. This ensures
+ * icon font files, images, and other resources load correctly through
+ * the proxy even when CSS url() references aren't rewritten.
+ *
+ * IMPORTANT: We do NOT match page-level paths (e.g. /works, /about).
+ * Those are handled by the proxy's HTML URL rewriting. Matching page
+ * paths pollutes Next.js HMR route tree and causes reload loops.
+ * The referer/fetch-dest check below ensures only iframe-originated
+ * requests are proxied.
+ */
+
+// Asset file extensions that should be proxied from the iframe
+const ASSET_EXT_RE =
+  /\.(woff2?|ttf|eot|otf|svg|png|jpe?g|gif|webp|avif|ico|mp4|webm|css|js|json|map)(\?|$)/i
+
+export function proxy(request: NextRequest) {
+  const targetUrl = request.cookies.get(PROXY_HEADER)?.value
+  if (!targetUrl) return NextResponse.next()
+
+  const { pathname } = request.nextUrl
+
+  // Never intercept our own editor API routes
+  if (pathname.startsWith('/api/')) return NextResponse.next()
+
+  // Check if this request originates from the proxied iframe.
+  // After the navigation blocker calls history.replaceState, the referer
+  // no longer contains /api/proxy. For dynamically loaded chunks, the
+  // navigation blocker adds ?_devproxy=1 to /_next/ URLs as a proxy marker.
+  // NOTE: Do NOT use "_dp" — Next.js uses ?_dp=1 internally for CSS preloading.
+  const referer = request.headers.get('referer') || ''
+  const isFromProxy = referer.includes('/api/proxy')
+  const fetchDest = request.headers.get('sec-fetch-dest') || ''
+  const hasDynamicProxyMarker = request.nextUrl.searchParams.has('_devproxy')
+
+  if (!isFromProxy && fetchDest !== 'iframe' && !hasDynamicProxyMarker) {
+    return NextResponse.next()
+  }
+
+  // Only proxy requests that look like assets (have a file extension).
+  // This prevents page-level paths from being proxied.
+  if (!pathname.startsWith('/_next/') && !ASSET_EXT_RE.test(pathname)) {
+    return NextResponse.next()
+  }
+
+  // Rewrite to proxy route (rewrite is transparent — doesn't change the
+  // client-visible URL and doesn't confuse HMR since these are asset paths,
+  // not page routes).
+  const proxyUrl = new URL(`/api/proxy${pathname}`, request.url)
+  proxyUrl.searchParams.set(PROXY_HEADER, targetUrl)
+
+  // Preserve original query params (strip internal markers)
+  request.nextUrl.searchParams.forEach((value, key) => {
+    if (key !== PROXY_HEADER && key !== '_devproxy') {
+      proxyUrl.searchParams.set(key, value)
+    }
+  })
+
+  return NextResponse.rewrite(proxyUrl)
+}
+
+export const config = {
+  matcher: [
+    // /_next/ asset paths (static files, images, fonts)
+    '/_next/static/:path*',
+    '/_next/image',
+    // Common asset directories that target apps may serve
+    // (fonts, icons, images, media, static files)
+    '/fonts/:path*',
+    '/webfonts/:path*',
+    '/assets/:path*',
+    '/images/:path*',
+    '/icons/:path*',
+    '/media/:path*',
+    '/static/:path*',
+    '/public/:path*',
+    '/avatars/:path*',
+    '/uploads/:path*',
+    '/files/:path*',
+    '/content/:path*',
+    '/img/:path*',
+    '/pics/:path*',
+  ],
+}

package/src/server/terminal-server.ts

@@ -0,0 +1,104 @@
+import * as pty from 'node-pty'
+
+const TERMINAL_PORT = Number(process.env.TERMINAL_PORT) || 4001
+
+interface WsData {
+  pty: pty.IPty
+}
+
+Bun.serve<WsData>({
+  port: TERMINAL_PORT,
+
+  fetch(req, server) {
+    const url = new URL(req.url)
+
+    if (url.pathname === '/ws') {
+      const ok = server.upgrade(req)
+      if (!ok) return new Response('WebSocket upgrade failed', { status: 400 })
+      return undefined
+    }
+
+    if (url.pathname === '/health') {
+      return new Response('ok', {
+        headers: { 'Access-Control-Allow-Origin': '*' },
+      })
+    }
+
+    // CORS preflight
+    if (req.method === 'OPTIONS') {
+      return new Response(null, {
+        status: 204,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET',
+          'Access-Control-Allow-Headers': '*',
+        },
+      })
+    }
+
+    return new Response('Not found', { status: 404 })
+  },
+
+  websocket: {
+    open(ws) {
+      const shell = process.env.SHELL || '/bin/bash'
+      const term = pty.spawn(shell, [], {
+        name: 'xterm-256color',
+        cols: 80,
+        rows: 24,
+        cwd: process.env.HOME || '/',
+        env: process.env as Record<string, string>,
+      })
+
+      ws.data = { pty: term }
+
+      term.onData((data: string) => {
+        try {
+          ws.send(data)
+        } catch {
+          // WebSocket already closed
+        }
+      })
+
+      term.onExit(() => {
+        try {
+          ws.close()
+        } catch {
+          // Already closed
+        }
+      })
+    },
+
+    message(ws, message) {
+      const { pty: term } = ws.data
+      if (typeof message === 'string') {
+        // Resize messages prefixed with \x01
+        if (message.startsWith('\x01')) {
+          try {
+            const { cols, rows } = JSON.parse(message.slice(1))
+            if (cols && rows) {
+              term.resize(cols, rows)
+            }
+          } catch {
+            // Invalid resize message, ignore
+          }
+          return
+        }
+        term.write(message)
+      } else {
+        // Binary data
+        term.write(Buffer.from(message).toString())
+      }
+    },
+
+    close(ws) {
+      if (ws.data?.pty) {
+        ws.data.pty.kill()
+      }
+    },
+  },
+})
+
+console.log(
+  `Terminal WebSocket server running on ws://localhost:${TERMINAL_PORT}/ws`,
+)

package/src/store/changeSlice.ts

@@ -0,0 +1,288 @@
+import type { StateCreator } from 'zustand'
+import type {
+  StyleChange,
+  ElementSnapshot,
+  UndoRedoAction,
+} from '@/types/changelog'
+import { LOCAL_STORAGE_KEYS } from '@/lib/constants'
+import { generateId } from '@/lib/utils'
+
+const MAX_UNDO_STACK = 50
+
+export interface ChangeSlice {
+  styleChanges: StyleChange[]
+  elementSnapshots: Record<string, ElementSnapshot>
+  undoStack: UndoRedoAction[]
+  redoStack: UndoRedoAction[]
+
+  addStyleChange: (change: StyleChange) => void
+  removeStyleChange: (id: string) => void
+  clearAllChanges: () => void
+  getChangeCount: () => number
+  saveElementSnapshot: (snapshot: ElementSnapshot) => void
+  updateAllSnapshotsScope: (scope: 'all' | 'breakpoint-only') => void
+  persistChanges: (urlKey: string) => void
+  loadPersistedChanges: (urlKey: string) => void
+  pushUndo: (action: UndoRedoAction) => void
+  popUndo: () => UndoRedoAction | null
+  popRedo: () => UndoRedoAction | null
+}
+
+export const createChangeSlice: StateCreator<
+  ChangeSlice,
+  [],
+  [],
+  ChangeSlice
+> = (set, get) => ({
+  styleChanges: [],
+  elementSnapshots: {},
+  undoStack: [],
+  redoStack: [],
+
+  addStyleChange: (change) => {
+    set((state) => {
+      const existing = state.styleChanges.findIndex(
+        (c) =>
+          c.elementSelector === change.elementSelector &&
+          c.property === change.property,
+      )
+      if (existing >= 0) {
+        const trueOriginal = state.styleChanges[existing].originalValue
+        // Auto-remove: value returned to original — no net change
+        if (change.newValue === trueOriginal) {
+          const updated = state.styleChanges.filter((_, i) => i !== existing)
+          const stillHasChanges = updated.some(
+            (c) => c.elementSelector === change.elementSelector,
+          )
+          if (!stillHasChanges) {
+            const { [change.elementSelector]: _, ...rest } =
+              state.elementSnapshots
+            return { styleChanges: updated, elementSnapshots: rest }
+          }
+          return { styleChanges: updated }
+        }
+        const updated = [...state.styleChanges]
+        updated[existing] = { ...change, originalValue: trueOriginal }
+        return { styleChanges: updated }
+      }
+      return { styleChanges: [...state.styleChanges, change] }
+    })
+  },
+
+  removeStyleChange: (id) => {
+    set((state) => {
+      const removed = state.styleChanges.find((c) => c.id === id)
+      const updated = state.styleChanges.filter((c) => c.id !== id)
+      // Clean up snapshot if no more changes for that element
+      if (removed) {
+        const stillHasChanges = updated.some(
+          (c) => c.elementSelector === removed.elementSelector,
+        )
+        if (!stillHasChanges) {
+          const { [removed.elementSelector]: _, ...rest } =
+            state.elementSnapshots
+          return { styleChanges: updated, elementSnapshots: rest }
+        }
+      }
+      return { styleChanges: updated }
+    })
+  },
+
+  clearAllChanges: () => {
+    set({
+      styleChanges: [],
+      elementSnapshots: {},
+      undoStack: [],
+      redoStack: [],
+    })
+  },
+
+  getChangeCount: () => {
+    return get().styleChanges.length
+  },
+
+  saveElementSnapshot: (snapshot) => {
+    set((state) => {
+      // Only save if we don't already have a snapshot for this selector
+      if (state.elementSnapshots[snapshot.selectorPath]) return state
+      return {
+        elementSnapshots: {
+          ...state.elementSnapshots,
+          [snapshot.selectorPath]: snapshot,
+        },
+      }
+    })
+  },
+
+  updateAllSnapshotsScope: (scope) => {
+    set((state) => {
+      const updated: Record<string, ElementSnapshot> = {}
+      for (const [key, snap] of Object.entries(state.elementSnapshots)) {
+        updated[key] = { ...snap, changeScope: scope }
+      }
+      return { elementSnapshots: updated }
+    })
+  },
+
+  persistChanges: (urlKey) => {
+    const { styleChanges, elementSnapshots } = get()
+    try {
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.CHANGES_PREFIX + urlKey,
+        JSON.stringify({ style: styleChanges, snapshots: elementSnapshots }),
+      )
+    } catch {}
+  },
+
+  loadPersistedChanges: (urlKey) => {
+    try {
+      const stored = localStorage.getItem(
+        LOCAL_STORAGE_KEYS.CHANGES_PREFIX + urlKey,
+      )
+      if (stored) {
+        const parsed = JSON.parse(stored)
+        set({
+          styleChanges: parsed.style || [],
+          elementSnapshots: parsed.snapshots || {},
+        })
+      }
+    } catch {}
+  },
+
+  pushUndo: (action) => {
+    set((state) => ({
+      undoStack: [...state.undoStack.slice(-(MAX_UNDO_STACK - 1)), action],
+      redoStack: [],
+    }))
+  },
+
+  popUndo: () => {
+    const { undoStack } = get()
+    if (undoStack.length === 0) return null
+    const action = undoStack[undoStack.length - 1]
+
+    set((state) => {
+      const newUndo = state.undoStack.slice(0, -1)
+      const newRedo = [...state.redoStack, action]
+
+      let newChanges = state.styleChanges
+      let newSnapshots = state.elementSnapshots
+
+      if (action.wasNewChange) {
+        newChanges = newChanges.filter(
+          (c) =>
+            !(
+              c.elementSelector === action.elementSelector &&
+              c.property === action.property
+            ),
+        )
+        const stillHas = newChanges.some(
+          (c) => c.elementSelector === action.elementSelector,
+        )
+        if (!stillHas) {
+          const { [action.elementSelector]: _, ...rest } = newSnapshots
+          newSnapshots = rest
+        }
+      } else {
+        const exists = newChanges.some(
+          (c) =>
+            c.elementSelector === action.elementSelector &&
+            c.property === action.property,
+        )
+        if (exists) {
+          newChanges = newChanges.map((c) =>
+            c.elementSelector === action.elementSelector &&
+            c.property === action.property
+              ? { ...c, newValue: action.beforeValue }
+              : c,
+          )
+        } else {
+          // Change was auto-removed (value matched original) — re-create it
+          newChanges = [
+            ...newChanges,
+            {
+              id: generateId(),
+              elementSelector: action.elementSelector,
+              property: action.property,
+              originalValue: action.afterValue,
+              newValue: action.beforeValue,
+              breakpoint: action.breakpoint,
+              timestamp: Date.now(),
+              changeScope: action.changeScope,
+            },
+          ]
+        }
+      }
+
+      return {
+        undoStack: newUndo,
+        redoStack: newRedo,
+        styleChanges: newChanges,
+        elementSnapshots: newSnapshots,
+      }
+    })
+
+    return action
+  },
+
+  popRedo: () => {
+    const { redoStack } = get()
+    if (redoStack.length === 0) return null
+    const action = redoStack[redoStack.length - 1]
+
+    set((state) => {
+      const newRedo = state.redoStack.slice(0, -1)
+      const newUndo = [...state.undoStack, action]
+
+      let newChanges = state.styleChanges
+      const idx = newChanges.findIndex(
+        (c) =>
+          c.elementSelector === action.elementSelector &&
+          c.property === action.property,
+      )
+
+      let newSnapshots = state.elementSnapshots
+
+      if (idx >= 0) {
+        const trueOriginal = newChanges[idx].originalValue
+        // Auto-remove: redo restores value to original — no net change
+        if (action.afterValue === trueOriginal) {
+          newChanges = newChanges.filter((_, i) => i !== idx)
+          const stillHas = newChanges.some(
+            (c) => c.elementSelector === action.elementSelector,
+          )
+          if (!stillHas) {
+            const { [action.elementSelector]: _, ...rest } = newSnapshots
+            newSnapshots = rest
+          }
+        } else {
+          newChanges = [...newChanges]
+          newChanges[idx] = { ...newChanges[idx], newValue: action.afterValue }
+        }
+      } else {
+        newChanges = [
+          ...newChanges,
+          {
+            id: generateId(),
+            elementSelector: action.elementSelector,
+            property: action.property,
+            originalValue: action.beforeValue,
+            newValue: action.afterValue,
+            breakpoint: action.breakpoint,
+            timestamp: Date.now(),
+            changeScope: action.changeScope,
+          },
+        ]
+      }
+
+      return {
+        undoStack: newUndo,
+        redoStack: newRedo,
+        styleChanges: newChanges,
+        elementSnapshots: newSnapshots,
+      }
+    })
+
+    return action
+  },
+})

package/src/store/claudeSlice.ts

@@ -0,0 +1,222 @@
+import type { StateCreator } from 'zustand'
+import type {
+  ClaudeStatus,
+  ClaudeError,
+  ParsedDiff,
+  ProjectScanResult,
+  ClaudeScanResponse,
+} from '@/types/claude'
+import { LOCAL_STORAGE_KEYS } from '@/lib/constants'
+
+export interface ClaudeSlice {
+  claudeStatus: ClaudeStatus
+  projectRoot: string | null
+  portRoots: Record<string, string>
+  projectScans: Record<string, ProjectScanResult>
+  cliAvailable: boolean | null
+  sessionId: string | null
+  parsedDiffs: ParsedDiff[]
+  claudeError: ClaudeError | null
+
+  // Project scan state
+  componentFileMap: Record<string, string> | null
+  scanStatus: 'idle' | 'scanning' | 'complete' | 'error'
+  scanError: string | null
+  scannedProjectName: string | null
+
+  // AI scan state (smart prompt generation)
+  aiScanStatus: 'idle' | 'scanning' | 'complete' | 'error'
+  aiScanResult: ClaudeScanResponse | null
+  aiScanError: string | null
+
+  // Client-side directory handle (File System Access API, non-serializable)
+  directoryHandle: FileSystemDirectoryHandle | null
+
+  setClaudeStatus: (status: ClaudeStatus) => void
+  setProjectRoot: (url: string, path: string | null) => void
+  getProjectRootForUrl: (url: string | null) => string | null
+  setProjectScan: (url: string, scan: ProjectScanResult) => void
+  getProjectScanForUrl: (url: string | null) => ProjectScanResult | null
+  setCliAvailable: (available: boolean) => void
+  setSessionId: (id: string | null) => void
+  setParsedDiffs: (diffs: ParsedDiff[]) => void
+  setClaudeError: (error: ClaudeError | null) => void
+  resetClaude: () => void
+  loadPersistedClaude: () => void
+
+  // Project scan actions
+  setComponentFileMap: (map: Record<string, string> | null) => void
+  setScanStatus: (status: 'idle' | 'scanning' | 'complete' | 'error') => void
+  setScanError: (error: string | null) => void
+  setScannedProjectName: (name: string | null) => void
+  clearScan: () => void
+
+  // AI scan actions
+  setAiScanStatus: (status: 'idle' | 'scanning' | 'complete' | 'error') => void
+  setAiScanResult: (result: ClaudeScanResponse | null) => void
+  setAiScanError: (error: string | null) => void
+  resetAiScan: () => void
+
+  // Client-side directory handle actions
+  setDirectoryHandle: (handle: FileSystemDirectoryHandle | null) => void
+}
+
+function persistPortRoots(portRoots: Record<string, string>) {
+  try {
+    localStorage.setItem(
+      LOCAL_STORAGE_KEYS.CLAUDE_PORT_ROOTS,
+      JSON.stringify(portRoots),
+    )
+  } catch {}
+}
+
+function persistProjectScans(scans: Record<string, ProjectScanResult>) {
+  try {
+    localStorage.setItem(
+      LOCAL_STORAGE_KEYS.CLAUDE_PROJECT_SCANS,
+      JSON.stringify(scans),
+    )
+  } catch {}
+}
+
+export const createClaudeSlice: StateCreator<
+  ClaudeSlice,
+  [],
+  [],
+  ClaudeSlice
+> = (set, get) => ({
+  claudeStatus: 'idle',
+  projectRoot: null,
+  portRoots: {},
+  projectScans: {},
+  cliAvailable: null,
+  sessionId: null,
+  parsedDiffs: [],
+  claudeError: null,
+
+  componentFileMap: null,
+  scanStatus: 'idle',
+  scanError: null,
+  scannedProjectName: null,
+
+  aiScanStatus: 'idle',
+  aiScanResult: null,
+  aiScanError: null,
+
+  directoryHandle: null,
+
+  setClaudeStatus: (status) => set({ claudeStatus: status }),
+
+  setProjectRoot: (url, path) => {
+    const portRoots = { ...get().portRoots }
+    if (path) {
+      portRoots[url] = path
+    } else {
+      delete portRoots[url]
+    }
+    set({ portRoots, projectRoot: path })
+    persistPortRoots(portRoots)
+  },
+
+  getProjectRootForUrl: (url) => {
+    if (!url) return null
+    return get().portRoots[url] ?? null
+  },
+
+  setProjectScan: (url, scan) => {
+    const projectScans = { ...get().projectScans, [url]: scan }
+    set({ projectScans })
+    persistProjectScans(projectScans)
+  },
+
+  getProjectScanForUrl: (url) => {
+    if (!url) return null
+    return get().projectScans[url] ?? null
+  },
+
+  setCliAvailable: (available) => {
+    set({ cliAvailable: available })
+    try {
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.CLAUDE_CLI_AVAILABLE,
+        JSON.stringify(available),
+      )
+    } catch {}
+  },
+
+  setSessionId: (id) => set({ sessionId: id }),
+  setParsedDiffs: (diffs) => set({ parsedDiffs: diffs }),
+  setClaudeError: (error) => set({ claudeError: error }),
+
+  resetClaude: () => {
+    set({
+      claudeStatus: 'idle',
+      sessionId: null,
+      parsedDiffs: [],
+      claudeError: null,
+      aiScanStatus: 'idle',
+      aiScanResult: null,
+      aiScanError: null,
+    })
+  },
+
+  setComponentFileMap: (map) => set({ componentFileMap: map }),
+  setScanStatus: (status) => set({ scanStatus: status }),
+  setScanError: (error) => set({ scanError: error }),
+  setScannedProjectName: (name) => set({ scannedProjectName: name }),
+  clearScan: () =>
+    set({
+      componentFileMap: null,
+      scanStatus: 'idle',
+      scanError: null,
+      scannedProjectName: null,
+    }),
+
+  setAiScanStatus: (status) => set({ aiScanStatus: status }),
+  setAiScanResult: (result) => set({ aiScanResult: result }),
+  setAiScanError: (error) => set({ aiScanError: error }),
+  resetAiScan: () =>
+    set({
+      aiScanStatus: 'idle',
+      aiScanResult: null,
+      aiScanError: null,
+    }),
+
+  setDirectoryHandle: (handle) => set({ directoryHandle: handle }),
+
+  loadPersistedClaude: () => {
+    try {
+      // Load port roots map
+      const portRootsJson = localStorage.getItem(
+        LOCAL_STORAGE_KEYS.CLAUDE_PORT_ROOTS,
+      )
+      if (portRootsJson) {
+        const portRoots = JSON.parse(portRootsJson) as Record<string, string>
+        set({ portRoots })
+      }
+
+      // Migrate old single-key value: just remove it (no way to know which port it was for)
+      const oldRoot = localStorage.getItem(
+        LOCAL_STORAGE_KEYS.CLAUDE_PROJECT_ROOT,
+      )
+      if (oldRoot) {
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.CLAUDE_PROJECT_ROOT)
+      }
+
+      // Load project scans
+      const scansJson = localStorage.getItem(
+        LOCAL_STORAGE_KEYS.CLAUDE_PROJECT_SCANS,
+      )
+      if (scansJson) {
+        const projectScans = JSON.parse(scansJson) as Record<
+          string,
+          ProjectScanResult
+        >
+        set({ projectScans })
+      }
+
+      const cli = localStorage.getItem(LOCAL_STORAGE_KEYS.CLAUDE_CLI_AVAILABLE)
+      if (cli) set({ cliAvailable: JSON.parse(cli) })
+    } catch {}
+  },
+})