npm - @antigenic-oss/paint - Versions diffs - 0.2.0 → 0.2.1 - Mend

@antigenic-oss/paint 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/README.md +32 -17
package/bin/bridge-server.js +36 -0
package/bin/paint.js +542 -102
package/bin/terminal-server.js +105 -0
package/package.json +7 -8
package/public/dev-editor-inspector.js +92 -104
package/src/app/api/claude/apply/route.ts +2 -2
package/src/app/api/project/scan/route.ts +1 -1
package/src/app/api/proxy/[[...path]]/route.ts +4 -4
package/src/app/docs/DocsClient.tsx +1 -1
package/src/app/docs/page.tsx +0 -1
package/src/app/page.tsx +1 -1
package/src/bridge/api-handlers.ts +1 -1
package/src/bridge/proxy-handler.ts +4 -4
package/src/bridge/server.ts +135 -39
package/src/components/ConnectModal.tsx +1 -2
package/src/components/PreviewFrame.tsx +2 -2
package/src/components/ResponsiveToolbar.tsx +1 -2
package/src/components/common/ColorPicker.tsx +7 -9
package/src/components/common/UnitInput.tsx +1 -1
package/src/components/common/VariableColorPicker.tsx +0 -1
package/src/components/left-panel/ComponentsPanel.tsx +3 -3
package/src/components/left-panel/LayerNode.tsx +1 -1
package/src/components/left-panel/icons.tsx +1 -1
package/src/components/left-panel/terminal/TerminalPanel.tsx +2 -2
package/src/components/right-panel/ElementLogBox.tsx +1 -3
package/src/components/right-panel/changes/ChangesPanel.tsx +12 -12
package/src/components/right-panel/claude/ClaudeIntegrationPanel.tsx +2 -2
package/src/components/right-panel/claude/DiffViewer.tsx +1 -1
package/src/components/right-panel/claude/ProjectRootSelector.tsx +7 -7
package/src/components/right-panel/claude/SetupFlow.tsx +1 -1
package/src/components/right-panel/console/ConsolePanel.tsx +4 -4
package/src/components/right-panel/design/BackgroundSection.tsx +2 -2
package/src/components/right-panel/design/GradientEditor.tsx +6 -6
package/src/components/right-panel/design/LayoutSection.tsx +4 -4
package/src/components/right-panel/design/PositionSection.tsx +2 -2
package/src/components/right-panel/design/SVGSection.tsx +2 -3
package/src/components/right-panel/design/ShadowBlurSection.tsx +5 -5
package/src/components/right-panel/design/TextSection.tsx +5 -5
package/src/components/right-panel/design/icons.tsx +1 -1
package/src/components/right-panel/design/inputs/BoxModelPreview.tsx +2 -2
package/src/components/right-panel/design/inputs/CompactInput.tsx +2 -2
package/src/components/right-panel/design/inputs/DraggableLabel.tsx +2 -1
package/src/components/right-panel/design/inputs/IconToggleGroup.tsx +1 -1
package/src/components/right-panel/design/inputs/LinkedInputPair.tsx +3 -3
package/src/components/right-panel/design/inputs/SectionHeader.tsx +2 -1
package/src/hooks/useDOMTree.ts +0 -1
package/src/hooks/usePostMessage.ts +4 -3
package/src/hooks/useTargetUrl.ts +1 -1
package/src/inspector/DOMTraverser.ts +2 -2
package/src/inspector/HoverHighlighter.ts +6 -6
package/src/inspector/SelectionHighlighter.ts +4 -4
package/src/lib/classifyElement.ts +1 -2
package/src/lib/claude-bin.ts +1 -1
package/src/lib/clientProjectScanner.ts +13 -13
package/src/lib/cssVariableUtils.ts +1 -1
package/src/lib/folderPicker.ts +4 -1
package/src/lib/projectScanner.ts +15 -15
package/src/lib/tailwindClassParser.ts +1 -1
package/src/lib/textShadowUtils.ts +1 -1
package/src/lib/utils.ts +4 -4
package/src/proxy.ts +1 -1
package/src/store/treeSlice.ts +2 -2
package/src/server/terminal-server.ts +0 -104
package/tsconfig.server.json +0 -12

package/src/app/api/proxy/[[...path]]/route.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { PROXY_HEADER } from '@/lib/constants'
 const INSPECTOR_SCRIPT = `
@@ -311,7 +311,7 @@ function getInspectorCode(): string {
         // Show first meaningful class
         var cls = el.className;
         if (cls && typeof cls === 'string') {
-          var first = cls.trim().split(/\s+/)[0];
+          var first = cls.trim().split(/s+/)[0];
           if (first) return tag + '.' + first;
         }
         return tag;
@@ -1787,7 +1787,7 @@ async function handleProxy(request: NextRequest, params: { path?: string[] }) {
       //      need to make requests through the proxy
       //   5. Suppresses HMR-related errors as a safety net
       //   6. Detects infinite reload loops as a safety net
-      const targetPagePath = '/' + (path || '')
+      const targetPagePath = `/${path || ''}`
       const safePagePath = JSON.stringify(targetPagePath)
       const safeTargetUrl = JSON.stringify(targetUrl)
       const safeEncodedTarget = JSON.stringify(encodedTarget)
@@ -2243,7 +2243,7 @@ async function handleProxy(request: NextRequest, params: { path?: string[] }) {
       // Inject inspector script before </body> (case-insensitive)
       if (/<\/body>/i.test(html)) {
-        html = html.replace(/<\/body>/i, () => INSPECTOR_SCRIPT + '</body>')
+        html = html.replace(/<\/body>/i, () => `${INSPECTOR_SCRIPT}</body>`)
       } else {
         html += INSPECTOR_SCRIPT
       }

package/src/app/docs/DocsClient.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ export function Sidebar() {
       document.getElementById(item.id),
     ).filter(Boolean) as HTMLElement[]
-    sections.forEach((el) => observerRef.current!.observe(el))
+    sections.forEach((el) => observerRef.current?.observe(el))
     return () => observerRef.current?.disconnect()
   }, [])

package/src/app/docs/page.tsx CHANGED Viewed

@@ -2,7 +2,6 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import {
   CodeBlock,
-  CopyButton,
   FaqAccordion,
   FaqSection,
   FrameworkAccordion,

package/src/app/page.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ export default function Home() {
       setIsRecursiveEmbed(true)
       try {
         window.parent.postMessage({ type: 'RECURSIVE_EMBED_DETECTED' }, '*')
-      } catch (e) {
+      } catch (_e) {
         /* cross-origin */
       }
       return

package/src/bridge/api-handlers.ts CHANGED Viewed

@@ -770,7 +770,7 @@ async function handleClaudeApply(
       )
     }
-    const combinedOutput = result.stdout + '\n' + result.stderr
+    const combinedOutput = `${result.stdout}\n${result.stderr}`
     const filesModified = extractModifiedFiles(combinedOutput)
     const fileCount = filesModified.length
     const summary =

package/src/bridge/proxy-handler.ts CHANGED Viewed

@@ -137,13 +137,13 @@ function injectIntoHtml(html: string, inspectorScript: string | null): string {
   // Inject navigation blocker in <head>, inspector before </body>
   if (result.includes('</head>')) {
-    result = result.replace('</head>', navBlocker + '</head>')
+    result = result.replace('</head>', `${navBlocker}</head>`)
   } else {
     result = navBlocker + result
   }
   if (result.includes('</body>')) {
-    result = result.replace('</body>', inspectorTag + '</body>')
+    result = result.replace('</body>', `${inspectorTag}</body>`)
   } else {
     result = result + inspectorTag
   }
@@ -208,7 +208,7 @@ export async function handleProxy(
   // Build the target fetch URL
   const targetOrigin = new URL(targetUrl).origin
-  const fetchUrl = `${targetOrigin}${pathname}${url.search ? url.search.replace(new RegExp(`[?&]${PROXY_HEADER}=[^&]*`), '') : ''}`
+  const _fetchUrl = `${targetOrigin}${pathname}${url.search ? url.search.replace(new RegExp(`[?&]${PROXY_HEADER}=[^&]*`), '') : ''}`
   // Strip the proxy header from the search params
   const cleanSearch = url.search
@@ -305,7 +305,7 @@ export async function handleProxy(
     // Image response — always revalidate so updated assets on the target
     // are reflected immediately instead of being served from browser cache.
     if (
-      (contentType && contentType.includes('image/')) ||
+      (contentType?.includes('image/')) ||
       pathname.match(/\.(png|jpe?g|gif|svg|ico|webp|avif)(\?|$)/i)
     ) {
       responseHeaders.set(

package/src/bridge/server.ts CHANGED Viewed

@@ -1,22 +1,24 @@
 /**
- * pAInt Bridge Server
+ * pAInt Bridge Server (Node runtime)
  *
- * A lightweight Bun HTTP server that runs on the user's machine.
+ * A lightweight HTTP server that runs on the user's machine.
  * When pAInt is deployed on Vercel, it connects to this bridge
  * to proxy localhost pages, scan project directories, and run Claude CLI.
- *
- * Usage:
- *   bun run src/bridge/server.ts
- *   # or
- *   bun run bridge
  */
-import { readFileSync, existsSync } from 'node:fs'
-import { join } from 'node:path'
-import { handleProxy } from './proxy-handler'
+import { existsSync, readFileSync } from 'node:fs'
+import {
+  createServer,
+  type IncomingMessage,
+  type ServerResponse,
+} from 'node:http'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { handleAPI } from './api-handlers'
+import { handleProxy } from './proxy-handler'
 const BRIDGE_PORT = Number(process.env.BRIDGE_PORT) || 4002
+const BRIDGE_HOST = process.env.BRIDGE_HOST || '127.0.0.1'
 const ALLOWED_ORIGIN_PATTERNS = [
   'https://dev-editor-flow.vercel.app',
@@ -51,63 +53,157 @@ function corsHeaders(requestOrigin: string | null): Record<string, string> {
 // Cache the inspector script at startup
 let inspectorScript: string | null = null
-const inspectorPath = join(
-  import.meta.dir,
-  '../../public/dev-editor-inspector.js',
-)
+const thisDir = dirname(fileURLToPath(import.meta.url))
+const inspectorPath = join(thisDir, '../../public/dev-editor-inspector.js')
 if (existsSync(inspectorPath)) {
   inspectorScript = readFileSync(inspectorPath, 'utf-8')
 }
-Bun.serve({
-  port: BRIDGE_PORT,
+function toRequest(req: IncomingMessage): Request {
+  const protocol = 'http'
+  const host = req.headers.host || `${BRIDGE_HOST}:${BRIDGE_PORT}`
+  const url = new URL(req.url || '/', `${protocol}://${host}`)
+  const headers = new Headers()
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (typeof value === 'undefined') continue
+    if (Array.isArray(value)) {
+      for (const v of value) headers.append(key, v)
+    } else {
+      headers.set(key, value)
+    }
+  }
+  const method = req.method || 'GET'
+  if (method === 'GET' || method === 'HEAD') {
+    return new Request(url, { method, headers })
+  }
+  return new Request(url, {
+    method,
+    headers,
+    body: req as unknown as BodyInit,
+    duplex: 'half',
+  } as RequestInit)
+}
+async function writeResponse(
+  res: ServerResponse,
+  response: Response,
+): Promise<void> {
+  res.statusCode = response.status
+  response.headers.forEach((value, key) => {
+    res.setHeader(key, value)
+  })
-  async fetch(req) {
+  // Preserve multiple Set-Cookie headers when available.
+  const getSetCookie = (
+    response.headers as Headers & { getSetCookie?: () => string[] }
+  ).getSetCookie
+  if (typeof getSetCookie === 'function') {
+    const cookies = getSetCookie.call(response.headers)
+    if (cookies.length > 0) {
+      res.setHeader('set-cookie', cookies)
+    }
+  }
+  if (!response.body) {
+    res.end()
+    return
+  }
+  const reader = response.body.getReader()
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    if (!value || value.length === 0) continue
+    if (!res.write(Buffer.from(value))) {
+      await new Promise<void>((resolve) => {
+        res.once('drain', resolve)
+      })
+    }
+  }
+  res.end()
+}
+const server = createServer(async (incomingReq, outgoingRes) => {
+  try {
+    const req = toRequest(incomingReq)
     const url = new URL(req.url)
     const origin = req.headers.get('origin')
     const cors = corsHeaders(origin)
     // CORS preflight
     if (req.method === 'OPTIONS') {
-      return new Response(null, { status: 204, headers: cors })
+      await writeResponse(
+        outgoingRes,
+        new Response(null, { status: 204, headers: cors }),
+      )
+      return
     }
     // Health check (used for auto-discovery from Vercel editor)
     if (url.pathname === '/health') {
-      return Response.json(
-        { status: 'ok', version: '1.0.0', bridge: true },
-        { headers: cors },
+      await writeResponse(
+        outgoingRes,
+        Response.json(
+          { status: 'ok', version: '1.0.0', bridge: true },
+          { headers: cors },
+        ),
       )
+      return
     }
     // Serve the inspector script
     if (url.pathname === '/dev-editor-inspector.js') {
       if (!inspectorScript) {
-        return new Response('Inspector script not found', {
-          status: 404,
-          headers: cors,
-        })
+        await writeResponse(
+          outgoingRes,
+          new Response('Inspector script not found', {
+            status: 404,
+            headers: cors,
+          }),
+        )
+        return
       }
-      return new Response(inspectorScript, {
-        headers: {
-          ...cors,
-          'Content-Type': 'application/javascript',
-          'Cache-Control': 'public, max-age=3600',
-        },
-      })
+      await writeResponse(
+        outgoingRes,
+        new Response(inspectorScript, {
+          headers: {
+            ...cors,
+            'Content-Type': 'application/javascript',
+            'Cache-Control': 'public, max-age=3600',
+          },
+        }),
+      )
+      return
     }
     // API routes
     if (url.pathname.startsWith('/api/')) {
-      return handleAPI(req, url, cors)
+      await writeResponse(outgoingRes, await handleAPI(req, url, cors))
+      return
     }
     // Everything else: proxy to target localhost
-    return handleProxy(req, url, cors, inspectorScript)
-  },
+    await writeResponse(
+      outgoingRes,
+      await handleProxy(req, url, cors, inspectorScript),
+    )
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Unknown bridge error'
+    outgoingRes.statusCode = 500
+    outgoingRes.setHeader('Content-Type', 'application/json')
+    outgoingRes.end(JSON.stringify({ error: message }))
+  }
 })
-console.log(`\n  pAInt Bridge running on http://localhost:${BRIDGE_PORT}`)
-console.log(
-  `  Connect from: https://dev-editor-flow.vercel.app?bridge=localhost:${BRIDGE_PORT}\n`,
-)
+server.listen(BRIDGE_PORT, BRIDGE_HOST, () => {
+  console.log(
+    `\n  pAInt Bridge running on http://${BRIDGE_HOST}:${BRIDGE_PORT}`,
+  )
+  console.log(
+    `  Connect from: https://dev-editor-flow.vercel.app?bridge=${BRIDGE_HOST}:${BRIDGE_PORT}\n`,
+  )
+})

package/src/components/ConnectModal.tsx CHANGED Viewed

@@ -141,7 +141,7 @@ export function ConnectModal() {
       setFolderPath(saved)
       setFolderError(null)
     }
-  }, [selectedPort, urlMode, currentUrl, portRoots, connectionStatus])
+  }, [currentUrl, portRoots, connectionStatus])
   const handleBrowse = async () => {
     setIsBrowsing(true)
@@ -368,7 +368,6 @@ export function ConnectModal() {
                       color: 'var(--text-primary)',
                       border: '1px solid var(--border)',
                     }}
-                    autoFocus
                   />
                 ) : (
                   <select

package/src/components/PreviewFrame.tsx CHANGED Viewed

@@ -72,7 +72,7 @@ export function PreviewFrame() {
   const setPreviewWidth = useEditorStore((s) => s.setPreviewWidth)
   const currentPagePath = useEditorStore((s) => s.currentPagePath)
   const setConnectionStatus = useEditorStore((s) => s.setConnectionStatus)
-  const viewMode = useEditorStore((s) => s.viewMode)
+  const _viewMode = useEditorStore((s) => s.viewMode)
   const { iframeRef, sendToInspector } = usePostMessage()
   const containerRef = useRef<HTMLDivElement>(null)
   const lastSrcRef = useRef<string | null>(null)
@@ -139,7 +139,7 @@ export function PreviewFrame() {
     // Selection mode is managed by TopBar via sendToInspector.
     // When exiting preview, TopBar re-enables selection and the proxy
     // iframe is still loaded — no reload needed.
-  }, [viewMode, targetUrl, connectionStatus, currentPagePath, iframeRef])
+  }, [targetUrl, connectionStatus])
   // Drag resize logic — symmetric from center
   const dragStateRef = useRef<{

package/src/components/ResponsiveToolbar.tsx CHANGED Viewed

@@ -9,7 +9,6 @@ import {
   PREVIEW_WIDTH_MAX,
   BREAKPOINT_CATEGORY_MAP,
 } from '@/lib/constants'
-import type { DevicePreset } from '@/lib/constants'
 export function ResponsiveToolbar() {
   const previewWidth = useEditorStore((s) => s.previewWidth)
@@ -57,7 +56,7 @@ export function ResponsiveToolbar() {
   const handleInputCommit = useCallback(() => {
     const parsed = parseInt(inputValue, 10)
-    if (!isNaN(parsed)) {
+    if (!Number.isNaN(parsed)) {
       applyWidth(parsed)
     } else {
       setInputValue(String(previewWidth))

package/src/components/common/ColorPicker.tsx CHANGED Viewed

@@ -76,7 +76,7 @@ function rgbToHsv({ r, g, b }: RGB): HSV {
 }
 function rgbToHex({ r, g, b }: RGB): string {
-  return '#' + [r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`
 }
 function hexToRgb(hex: string): RGB | null {
@@ -93,7 +93,7 @@ function hexToRgb(hex: string): RGB | null {
   } else {
     return null
   }
-  if (isNaN(r) || isNaN(g) || isNaN(b)) return null
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null
   return { r, g, b }
 }
@@ -254,7 +254,7 @@ function ScrubInput({
   const commit = useCallback(
     (raw: string) => {
       const n = parseInt(raw, 10)
-      if (!isNaN(n)) onChange(Math.max(min, Math.min(max, n)))
+      if (!Number.isNaN(n)) onChange(Math.max(min, Math.min(max, n)))
       setEditing(false)
     },
     [onChange, min, max],
@@ -264,7 +264,6 @@ function ScrubInput({
     <div className="flex flex-col items-center gap-0.5">
       {editing ? (
         <input
-          autoFocus
           type="text"
           inputMode="numeric"
           value={editVal}
@@ -429,7 +428,7 @@ export function ColorPicker({
       // Commit pending hex input on close
       if (prevOpenRef.current) {
         const currentHex = rgbToHex(hsvToRgb(hsv))
-        const pendingHex = '#' + hexInput
+        const pendingHex = `#${hexInput}`
         if (pendingHex !== currentHex) {
           const rgb = hexToRgb(pendingHex)
           if (rgb) {
@@ -503,7 +502,7 @@ export function ColorPicker({
   // Hex commit
   const commitHex = useCallback(() => {
-    const rgb = hexToRgb('#' + hexInput)
+    const rgb = hexToRgb(`#${hexInput}`)
     if (rgb) {
       const next = rgbToHsv(rgb)
       setHsv(next)
@@ -617,7 +616,7 @@ export function ColorPicker({
             // Emit immediately when a valid 6-char hex is entered
             const clean = v.replace(/[^0-9a-fA-F]/g, '')
             if (clean.length === 6) {
-              const rgb = hexToRgb('#' + clean)
+              const rgb = hexToRgb(`#${clean}`)
               if (rgb) {
                 const next = rgbToHsv(rgb)
                 setHsv(next)
@@ -626,7 +625,7 @@ export function ColorPicker({
             }
           }}
           onBlur={() => {
-            const rgb = hexToRgb('#' + hexInput)
+            const rgb = hexToRgb(`#${hexInput}`)
             if (rgb) {
               const next = rgbToHsv(rgb)
               setHsv(next)
@@ -863,7 +862,6 @@ export function ColorPicker({
                         color: 'var(--text-primary)',
                         outline: 'none',
                       }}
-                      autoFocus
                     />
                     {/* Scrollable list */}

package/src/components/common/UnitInput.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ export function UnitInput({
         onChange('auto')
       } else {
         const n = parseFloat(num)
-        if (!isNaN(n)) onChange(formatCSSValue(n, u))
+        if (!Number.isNaN(n)) onChange(formatCSSValue(n, u))
       }
     },
     [onChange],

package/src/components/common/VariableColorPicker.tsx CHANGED Viewed

@@ -527,7 +527,6 @@ export function VariableColorPicker({
                     />
                   </svg>
                   <input
-                    autoFocus
                     type="text"
                     placeholder="Search tokens..."
                     value={search}

package/src/components/left-panel/ComponentsPanel.tsx CHANGED Viewed

@@ -33,8 +33,8 @@ function buildComponentTree(
     for (const [path, candidate] of nodeMap) {
       if (
-        component.selectorPath.startsWith(path + ' ') ||
-        component.selectorPath.startsWith(path + ' > ')
+        component.selectorPath.startsWith(`${path} `) ||
+        component.selectorPath.startsWith(`${path} > `)
       ) {
         if (
           !parentNode ||
@@ -172,7 +172,7 @@ export default function ComponentsPanel() {
       (c) =>
         c.name.toLowerCase().includes(query) ||
         c.tagName.toLowerCase().includes(query) ||
-        (c.className && c.className.toLowerCase().includes(query)),
+        (c.className?.toLowerCase().includes(query)),
     )
   }, [detectedComponents, componentSearchQuery])

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

@@ -405,7 +405,7 @@ const DRAG_DATA_TYPE = 'application/x-dev-editor-layer-move'
 type DropPosition = 'before' | 'inside' | 'after'
 function isDescendant(parentId: string, childId: string): boolean {
-  return childId.startsWith(parentId + ' > ')
+  return childId.startsWith(`${parentId} > `)
 }
 function getDropPosition(

package/src/components/left-panel/icons.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 export function LayersIcon(props: React.SVGProps<SVGSVGElement>) {
   return (

package/src/components/left-panel/terminal/TerminalPanel.tsx CHANGED Viewed

@@ -30,7 +30,7 @@ export function TerminalPanel() {
         fitAddon.fit()
         const dims = fitAddon.proposeDimensions()
         if (dims) {
-          ws.send('\x01' + JSON.stringify({ cols: dims.cols, rows: dims.rows }))
+          ws.send(`\x01${JSON.stringify({ cols: dims.cols, rows: dims.rows })}`)
         }
       }
@@ -54,7 +54,7 @@ export function TerminalPanel() {
       term.onResize((size: { cols: number; rows: number }) => {
         if (ws.readyState === WebSocket.OPEN) {
-          ws.send('\x01' + JSON.stringify({ cols: size.cols, rows: size.rows }))
+          ws.send(`\x01${JSON.stringify({ cols: size.cols, rows: size.rows })}`)
         }
       })
     },

package/src/components/right-panel/ElementLogBox.tsx CHANGED Viewed

@@ -4,9 +4,7 @@ import { useMemo, useState, useCallback, useRef } from 'react'
 import { useEditorStore } from '@/store'
 import {
   buildInstructionsFooter,
-  BREAKPOINTS,
   getBreakpointDeviceInfo,
-  getBreakpointRange,
 } from '@/lib/constants'
 import { EditablePre } from '@/components/common/EditablePre'
 import type { Breakpoint } from '@/types/changelog'
@@ -67,7 +65,7 @@ function buildElementLogText(opts: {
   const attrParts: string[] = []
   if (opts.elementId) attrParts.push(`id="${opts.elementId}"`)
   if (opts.className) attrParts.push(`class="${opts.className}"`)
-  const tag = `<${opts.tagName}${attrParts.length ? ' ' + attrParts.join(' ') : ''}>`
+  const tag = `<${opts.tagName}${attrParts.length ? ` ${attrParts.join(' ')}` : ''}>`
   const isMobileApp =
     opts.framework === 'flutter' || opts.framework === 'react-native'

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

@@ -21,21 +21,21 @@ import type { FileMap, ClaudeScanResponse } from '@/types/claude'
 type BreakpointGroupKey = 'all' | 'desktop-only' | 'tablet-only' | 'mobile-only'
-const GROUP_ORDER: BreakpointGroupKey[] = [
+const _GROUP_ORDER: BreakpointGroupKey[] = [
   'all',
   'desktop-only',
   'tablet-only',
   'mobile-only',
 ]
-const GROUP_META: Record<BreakpointGroupKey, { label: string }> = {
+const _GROUP_META: Record<BreakpointGroupKey, { label: string }> = {
   all: { label: 'All' },
   'desktop-only': { label: 'Desktop Only' },
   'tablet-only': { label: 'Tablet Only' },
   'mobile-only': { label: 'Mobile Only' },
 }
-function getGroupKey(change: StyleChange): BreakpointGroupKey {
+function _getGroupKey(change: StyleChange): BreakpointGroupKey {
   const scope = change.changeScope ?? 'all'
   if (scope === 'all') return 'all'
   return `${change.breakpoint}-only` as BreakpointGroupKey
@@ -141,8 +141,8 @@ function CheckIcon({ size = 14 }: { size?: number }) {
 function buildSingleElementLog(
   snapshot: ElementSnapshot,
   changes: StyleChange[],
-  fileMap?: FileMap | null,
-  projectRoot?: string | null,
+  _fileMap?: FileMap | null,
+  _projectRoot?: string | null,
   framework?: string | null,
   cssStrategy?: string[] | null,
 ): string {
@@ -152,7 +152,7 @@ function buildSingleElementLog(
   const attrParts: string[] = []
   if (snapshot.elementId) attrParts.push(`id="${snapshot.elementId}"`)
   if (snapshot.className) attrParts.push(`class="${snapshot.className}"`)
-  const tag = `<${snapshot.tagName}${attrParts.length ? ' ' + attrParts.join(' ') : ''}>`
+  const tag = `<${snapshot.tagName}${attrParts.length ? ` ${attrParts.join(' ')}` : ''}>`
   const changeBp = (changes[0]?.breakpoint || 'mobile') as Breakpoint
   const { deviceName, range } = getBreakpointDeviceInfo(changeBp)
@@ -230,10 +230,10 @@ function buildSingleElementLog(
 function buildElementSection(
   snapshot: ElementSnapshot,
   changes: StyleChange[],
-  fileMap?: FileMap | null,
-  projectRoot?: string | null,
+  _fileMap?: FileMap | null,
+  _projectRoot?: string | null,
   framework?: string | null,
-  cssStrategy?: string[] | null,
+  _cssStrategy?: string[] | null,
 ): string {
   const lines: string[] = []
   const isMobileApp = framework === 'flutter' || framework === 'react-native'
@@ -241,7 +241,7 @@ function buildElementSection(
   const attrParts: string[] = []
   if (snapshot.elementId) attrParts.push(`id="${snapshot.elementId}"`)
   if (snapshot.className) attrParts.push(`class="${snapshot.className}"`)
-  const tag = `<${snapshot.tagName}${attrParts.length ? ' ' + attrParts.join(' ') : ''}>`
+  const tag = `<${snapshot.tagName}${attrParts.length ? ` ${attrParts.join(' ')}` : ''}>`
   const changeBp = (changes[0]?.breakpoint || 'mobile') as Breakpoint
   const { deviceName: elDevice, range: elRange } =
@@ -655,7 +655,7 @@ interface BreakpointGroupData {
   allChanges: StyleChange[]
 }
-function BreakpointGroupAccordion({
+function _BreakpointGroupAccordion({
   group,
   targetUrl,
   pagePath,
@@ -1220,7 +1220,7 @@ export function ChangesPanel() {
         onStderr: (line: string) => {
           const w = useEditorStore.getState().writeToTerminal
           const formatted = formatStderrLine(line)
-          if (formatted) w?.(formatted + '\r\n')
+          if (formatted) w?.(`${formatted}\r\n`)
         },
         onResult: (data: ClaudeScanResponse) => {
           setAiScanResult(data)

package/src/components/right-panel/claude/ClaudeIntegrationPanel.tsx CHANGED Viewed

@@ -60,7 +60,7 @@ export function ClaudeIntegrationPanel() {
   // Reset setupComplete when targetUrl changes so setup re-shows if needed
   useEffect(() => {
     setSetupComplete(false)
-  }, [targetUrl])
+  }, [])
   // Check if setup is needed
   const needsSetup =
@@ -99,7 +99,7 @@ export function ClaudeIntegrationPanel() {
           onStderr: (line) => {
             const w = useEditorStore.getState().writeToTerminal
             const formatted = formatStderrLine(line)
-            if (formatted) w?.(formatted + '\r\n')
+            if (formatted) w?.(`${formatted}\r\n`)
           },
           onResult: (data) => {
             setSessionId(data.sessionId)

package/src/components/right-panel/claude/DiffViewer.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ export function DiffViewer() {
   const parsedDiffs = useEditorStore((s) => s.parsedDiffs)
   const summary = useMemo(() => {
-    let totalFiles = parsedDiffs.length
+    const totalFiles = parsedDiffs.length
     let totalAdded = 0
     let totalRemoved = 0
     for (const diff of parsedDiffs) {