fix: harden escaping and devtools error responses

packages/icons/build-icons.ts

@@ -5,7 +5,13 @@ import { join } from 'node:path'
 const root = fileURLToPath(new URL('.', import.meta.url))
 const viewBoxes: Record<string, string> = {}
 const entries = readdirSync(join(root, 'svg')).filter((name) => name.endsWith('.svg')).sort().map((file) => {
-  const source = readFileSync(join(root, 'svg', file), 'utf8').replace(/<!--[\s\S]*?-->/g, '').trim()
+  let source = readFileSync(join(root, 'svg', file), 'utf8')
+  let previous: string
+  do {
+    previous = source
+    source = source.replace(/<!--[\s\S]*?-->/g, '')
+  } while (source !== previous)
+  source = source.trim()
   const match = /^<svg\b([^>]*)>([\s\S]*)<\/svg>$/.exec(source)
   const viewBox = match && /viewBox=["']([^"']+)["']/.exec(match[1]!)?.[1]
   if (!match || !viewBox) throw new Error(`${file}: missing SVG viewBox`)

server/analyze.ts

@@ -1000,7 +1000,7 @@ export function renameSuggestion<T extends Draft>(suggestion: T, name: string):
     if (mapping.placement === 'module') {
       mapping.arrayName = name
     } else {
-      const pattern = new RegExp(`\\b${mapping.itemName.replace(/\$/g, '\\$')}\\.`, 'g')
+      const pattern = new RegExp(`\\b${mapping.itemName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\.`, 'g')
       body = body.replace(pattern, `${name}.`)
       mapping.key = mapping.key.replace(pattern, `${name}.`)
       mapping.itemName = name

server/devtools.test.ts

@@ -11,11 +11,11 @@ import { createDevtoolsServer } from './devtools.ts'
 const cleanups: (() => void)[] = []
 afterEach(() => { for (const cleanup of cleanups.splice(0).reverse()) cleanup() })
 
-async function fixture() {
+async function fixture(editorUrl = (file: string) => `/editor?file=${encodeURIComponent(file)}`) {
   const running = createApp()
   const other = createApp()
   cleanups.push(running.cleanup, other.cleanup)
-  const devtools = createDevtoolsServer({ root: running.root, editorUrl: (file) => `/editor?file=${encodeURIComponent(file)}` })
+  const devtools = createDevtoolsServer({ root: running.root, editorUrl })
   const server = createServer((req, res) => devtools.middleware(req, res, () => { res.statusCode = 404; res.end() }))
   await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', resolve))
   cleanups.push(() => { devtools.close(); server.closeAllConnections(); server.close() })
@@ -27,6 +27,20 @@ async function fixture() {
   return { running, other, devtools, get, post }
 }
 
+test('unexpected exceptions are logged locally without exposing details over HTTP', async () => {
+  const error = new Error('Secret project path and stack details')
+  const logged = spyOn(console, 'error').mockImplementation(() => {})
+  try {
+    const { get } = await fixture(() => { throw error })
+    const response = await get('/open-in-editor?file=src/App.btsx')
+    expect(response.status).toBe(500)
+    expect(await response.json()).toEqual({ error: 'The devtools request failed. Check the server console for details.' })
+    expect(logged).toHaveBeenCalledWith('[beast-devtools] Request failed:', error)
+  } finally {
+    logged.mockRestore()
+  }
+})
+
 test.each(['running', 'opened'])('%s project watcher ignores missing filenames and still emits source changes', async (project) => {
   const watched = spyOn(fs, 'watch')
   try {

server/devtools.ts

@@ -207,7 +207,8 @@ export function createDevtoolsServer(options: DevtoolsServerOptions): DevtoolsSe
       return send(404, { error: `Unknown endpoint ${url.pathname}` })
     } catch (error) {
       if (error instanceof RefactorError) return send(error.status, { error: error.message })
-      return send(500, { error: error instanceof Error ? error.message : String(error) })
+      console.error('[beast-devtools] Request failed:', error)
+      return send(500, { error: 'The devtools request failed. Check the server console for details.' })
     }
   }
 

server/project.ts

@@ -413,7 +413,7 @@ function validateName(name: string, suggestion: RefactorSuggestion, source: stri
       422,
     )
   }
-  const used = (word: string) => new RegExp(`(^|[^\\w$])${word.replace(/\$/g, '\\$')}($|[^\\w$])`).test(source)
+  const used = (word: string) => new RegExp(`(^|[^\\w$])${word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}($|[^\\w$])`).test(source)
   if (used(name)) throw new RefactorError(`${name} is already used in this file. Choose another name.`, 422)
   if (component && suggestion.propsType !== null && used(`${name}Props`)) {
     throw new RefactorError(`${name}Props is already used in this file. Choose another name.`, 422)

server/style-edits.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'bun:test'
+import { replaceTailwindClasses } from './style-edits.ts'
+
+test('arbitrary Tailwind values preserve literal backslashes and underscores', () => {
+  expect(replaceTailwindClasses([], { 'background-image': String.raw`url(foo\bar_baz.png)` }))
+    .toEqual([String.raw`[background-image:url(foo\\bar\_baz.png)]`])
+})

server/style-edits.ts

@@ -137,7 +137,7 @@ export function replaceTailwindClasses(classes: string[], declarations: Record<s
     if (value !== null && value.trim()) {
       if (/[\[\]\r\n]/.test(value)) throw new RefactorError('This value cannot be represented as a Tailwind arbitrary value.', 422)
       const important = /\s*!important\s*$/i.test(value)
-      const encoded = value.replace(/\s*!important\s*$/i, '').trim().replace(/_/g, '\\_').replace(/\s/g, '_')
+      const encoded = value.replace(/\s*!important\s*$/i, '').trim().replace(/[\\_]/g, '\\$&').replace(/\s/g, '_')
       next.push(`${important ? '!' : ''}${utility(name, encoded)}`)
     }
   }