@symbo.ls/connect 3.2.7

package/build.js

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+// try to refactor typical html css files into symbols in smbls/extensions/chrome-inspect2/static
+const esbuild = require('esbuild')
+const path = require('path')
+const fs = require('fs')
+
+const root = __dirname
+const srcDir = path.join(root, 'src')
+const staticDir = path.join(root, 'static')
+const outDir = path.join(root, 'dist')
+
+const ENTRIES = [
+  {
+    in: path.join(srcDir, 'content.js'),
+    out: path.join(outDir, 'content.js'),
+    name: 'content'
+  },
+  {
+    in: path.join(srcDir, 'settings', 'settings_ui.js'),
+    out: path.join(outDir, 'settings_ui.js'),
+    name: 'settings'
+  },
+  {
+    in: path.join(srcDir, 'service_worker.js'),
+    out: path.join(outDir, 'service_worker.js'),
+    name: 'service_worker'
+  }
+]
+
+const copyRecursive = (src, dest) => {
+  if (!fs.existsSync(src)) return
+  const stats = fs.statSync(src)
+  if (stats.isDirectory()) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true })
+    for (const entry of fs.readdirSync(src)) {
+      copyRecursive(path.join(src, entry), path.join(dest, entry))
+    }
+  } else {
+    fs.copyFileSync(src, dest)
+  }
+}
+
+const copyStatic = () => {
+  if (fs.existsSync(staticDir)) {
+    for (const entry of fs.readdirSync(staticDir)) {
+      const srcEntry = path.join(staticDir, entry)
+      const destEntry = path.join(outDir, entry)
+      if (fs.existsSync(destEntry)) {
+        fs.rmSync(destEntry, { recursive: true, force: true })
+      }
+      copyRecursive(srcEntry, destEntry)
+    }
+  }
+  console.log('Copied static files.')
+}
+
+const syncManifestVersion = () => {
+  const pkg = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'))
+  const manifestPath = path.join(outDir, 'manifest.json')
+  if (!fs.existsSync(manifestPath)) return
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+  manifest.version = pkg.version
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8')
+  console.log(`Manifest version synced to ${pkg.version}`)
+}
+
+const makeEsbuildOptions = ({
+  entry,
+  outfile,
+  minify = false,
+  sourcemap = false
+}) => ({
+  entryPoints: [entry],
+  bundle: true,
+  format: 'esm',
+  target: ['esnext'],
+  outfile,
+  define: { 'process.env.NODE_ENV': '"development"' },
+  minify,
+  sourcemap
+})
+
+const rewriteUrls = (oldDomain, newDomain) => {
+  const manifestPath = path.join(outDir, 'manifest.json')
+  if (fs.existsSync(manifestPath)) {
+    const text = fs.readFileSync(manifestPath, 'utf8')
+    fs.writeFileSync(
+      manifestPath,
+      text.split(oldDomain).join(newDomain),
+      'utf8'
+    )
+  }
+
+  const textExt = ['.js', '.css', '.html', '.json', '.map', '.svg']
+  const walkDir = (dir, cb) => {
+    if (!fs.existsSync(dir)) return
+    for (const entry of fs.readdirSync(dir)) {
+      const full = path.join(dir, entry)
+      const st = fs.statSync(full)
+      if (st.isDirectory()) walkDir(full, cb)
+      else cb(full)
+    }
+  }
+
+  walkDir(outDir, (file) => {
+    if (path.basename(file) === 'manifest.json') return
+    if (!textExt.includes(path.extname(file))) return
+    try {
+      const txt = fs.readFileSync(file, 'utf8')
+      if (txt.includes(oldDomain)) {
+        fs.writeFileSync(file, txt.split(oldDomain).join(newDomain), 'utf8')
+      }
+    } catch (e) {
+      /* ignore */
+    }
+  })
+}
+
+const buildOnce = async ({ minify = false, local = false } = {}) => {
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true })
+
+  await Promise.all(
+    ENTRIES.map((e) =>
+      esbuild.build(
+        makeEsbuildOptions({
+          entry: e.in,
+          outfile: e.out,
+          minify,
+          sourcemap: !minify
+        })
+      )
+    )
+  )
+  console.log('Bundles written: content.js, settings_ui.js, service_worker.js')
+  copyStatic()
+  syncManifestVersion()
+
+  if (local) {
+    try {
+      rewriteUrls('https://symbols.app', 'http://localhost:1024')
+      console.log('Rewrote URLs for local development')
+    } catch (e) {
+      console.error('Error rewriting URLs:', e)
+    }
+  }
+}
+
+function debounce(fn, ms) {
+  let t = null
+  return (...args) => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), ms)
+  }
+}
+
+const run = async () => {
+  const args = process.argv.slice(2)
+  const watch = args.includes('--watch')
+  const minify =
+    args.includes('--prod') || process.env.NODE_ENV === 'production'
+  const local = args.includes('--local') || args.includes('-l')
+
+  if (!watch) {
+    try {
+      await buildOnce({ minify, local })
+      console.log('Build complete.')
+      process.exit(0)
+    } catch (err) {
+      console.error('Build failed:', err)
+      process.exit(1)
+    }
+  }
+
+  const chokidar = require('chokidar')
+
+  try {
+    await buildOnce({ minify: false, local })
+    console.log('Watching for changes...')
+
+    const watchPaths = [path.join(srcDir, '**', '*.js'), staticDir]
+
+    const watcher = chokidar.watch(watchPaths, {
+      ignoreInitial: true,
+      persistent: true
+    })
+
+    const debouncedBuild = debounce(async () => {
+      try {
+        console.log('Change detected — rebuilding...')
+        await buildOnce({ minify: false, local })
+        console.log('Rebuild complete')
+      } catch (e) {
+        console.error('Rebuild failed:', e)
+      }
+    }, 200)
+
+    watcher.on('all', () => debouncedBuild())
+  } catch (err) {
+    console.error('Watch failed:', err)
+    process.exit(1)
+  }
+}
+
+run()

package/dist/assets/favicon.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    path { fill: #0085FF; }
+  </style>
+  <path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/>
+</svg>

package/dist/auth.js

@@ -0,0 +1,373 @@
+// Auth module — manages login/logout and token storage via chrome.storage.local
+;(function () {
+  'use strict'
+
+  const API_BASE = 'https://api.symbols.app'
+  const STORAGE_KEYS = {
+    accessToken: 'symbols_access_token',
+    refreshToken: 'symbols_refresh_token',
+    expiresAt: 'symbols_expires_at',
+    user: 'symbols_user'
+  }
+
+  // ============================================================
+  // Token storage (chrome.storage.local)
+  // ============================================================
+  function getStoredAuth () {
+    return new Promise((resolve) => {
+      chrome.storage.local.get(Object.values(STORAGE_KEYS), (data) => {
+        resolve({
+          accessToken: data[STORAGE_KEYS.accessToken] || null,
+          refreshToken: data[STORAGE_KEYS.refreshToken] || null,
+          expiresAt: data[STORAGE_KEYS.expiresAt] || 0,
+          user: data[STORAGE_KEYS.user] || null
+        })
+      })
+    })
+  }
+
+  function setStoredAuth (tokens, user) {
+    const data = {}
+    if (tokens) {
+      data[STORAGE_KEYS.accessToken] = tokens.accessToken
+      data[STORAGE_KEYS.refreshToken] = tokens.refreshToken
+      data[STORAGE_KEYS.expiresAt] = tokens.accessTokenExp
+        ? (tokens.accessTokenExp.expiresAt || (Date.now() / 1000 + (tokens.accessTokenExp.expiresIn || 3600)))
+        : (Date.now() / 1000 + 3600)
+    }
+    if (user) {
+      data[STORAGE_KEYS.user] = user
+    }
+    return new Promise((resolve) => chrome.storage.local.set(data, resolve))
+  }
+
+  function clearStoredAuth () {
+    return new Promise((resolve) => {
+      chrome.storage.local.remove(Object.values(STORAGE_KEYS), resolve)
+    })
+  }
+
+  // ============================================================
+  // API calls (routed through service worker to bypass CORS)
+  // ============================================================
+  async function apiRequest (path, options) {
+    var url = API_BASE + path
+    var headers = { 'Content-Type': 'application/json' }
+    if (options && options.headers) {
+      Object.assign(headers, options.headers)
+    }
+    var resp = await swFetch(url, {
+      method: (options && options.method) || 'GET',
+      headers: headers,
+      body: (options && options.body) || undefined
+    })
+    if (!resp.ok) {
+      throw new Error((resp.data && resp.data.message) || resp.text || resp.error || ('HTTP ' + resp.status))
+    }
+    return resp.data
+  }
+
+  async function authedRequest (path, options) {
+    const auth = await getStoredAuth()
+    let token = auth.accessToken
+
+    // Refresh if expired (30s buffer)
+    if (token && auth.expiresAt && (Date.now() / 1000) > auth.expiresAt - 30) {
+      try {
+        const refreshed = await refreshTokens(auth.refreshToken)
+        token = refreshed.accessToken
+      } catch (e) {
+        // Refresh failed — clear auth
+        await clearStoredAuth()
+        throw new Error('Session expired — please sign in again')
+      }
+    }
+
+    if (!token) throw new Error('Not signed in')
+
+    return apiRequest(path, {
+      ...options,
+      headers: {
+        ...(options && options.headers),
+        Authorization: 'Bearer ' + token
+      }
+    })
+  }
+
+  // ============================================================
+  // Auth operations
+  // ============================================================
+  async function login (email, password) {
+    const data = await apiRequest('/core/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password })
+    })
+
+    const tokens = data.tokens || data
+    const user = data.user || null
+    await setStoredAuth(tokens, user)
+    return { tokens, user }
+  }
+
+  async function refreshTokens (refreshToken) {
+    const data = await apiRequest('/core/auth/refresh', {
+      method: 'POST',
+      body: JSON.stringify({ refreshToken })
+    })
+    const tokens = data.tokens || data
+    const auth = await getStoredAuth()
+    await setStoredAuth(tokens, auth.user)
+    return tokens
+  }
+
+  async function getMe () {
+    return authedRequest('/core/auth/me', { method: 'GET' })
+  }
+
+  async function logout () {
+    try {
+      const auth = await getStoredAuth()
+      if (auth.accessToken) {
+        await apiRequest('/core/auth/logout', {
+          method: 'POST',
+          headers: { Authorization: 'Bearer ' + auth.accessToken }
+        }).catch(() => {})
+      }
+    } finally {
+      await clearStoredAuth()
+    }
+  }
+
+  async function isSignedIn () {
+    const auth = await getStoredAuth()
+    if (!auth.accessToken) return false
+    try {
+      await getMe()
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
+  // ============================================================
+  // Platform API — projects
+  // ============================================================
+  async function listProjects () {
+    return authedRequest('/core/projects', { method: 'GET' })
+  }
+
+  async function getProjectByKey (key) {
+    return authedRequest('/core/projects/key/' + encodeURIComponent(key), { method: 'GET' })
+  }
+
+  async function getProjectData (projectId, branch) {
+    return authedRequest(
+      '/core/projects/' + projectId + '/data?branch=' + (branch || 'main') + '&version=latest',
+      { method: 'GET' }
+    )
+  }
+
+  async function getServiceToken () {
+    try {
+      const res = await fetch(API_BASE + '/service-token')
+      const json = await res.json().catch(() => null)
+      if (json && json.token) return json.token.trim()
+      const txt = await res.text()
+      return (txt || '').replace(/\s+/g, '') || null
+    } catch (e) {
+      return null
+    }
+  }
+
+  async function getAccessToken () {
+    const auth = await getStoredAuth()
+    return auth.accessToken
+  }
+
+  // ============================================================
+  // Browser sign-in (PKCE session flow — same as CLI)
+  // ============================================================
+  const WEBSITE_BASE = 'https://symbols.app'
+
+  function randomVerifier (len) {
+    len = len || 64
+    var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~'
+    var arr = new Uint8Array(len)
+    crypto.getRandomValues(arr)
+    var out = ''
+    for (var i = 0; i < len; i++) out += chars.charAt(arr[i] % chars.length)
+    return out
+  }
+
+  async function sha256Base64url (input) {
+    var encoder = new TextEncoder()
+    var data = encoder.encode(input)
+    var hash = await crypto.subtle.digest('SHA-256', data)
+    var bytes = new Uint8Array(hash)
+    var binary = ''
+    for (var i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+  }
+
+  // Proxy fetch through service worker to avoid CORS preflight issues
+  function swFetch (url, options) {
+    return new Promise(function (resolve, reject) {
+      try {
+        chrome.runtime.sendMessage({
+          type: 'api-fetch',
+          url: url,
+          method: (options && options.method) || 'GET',
+          headers: (options && options.headers) || {},
+          body: (options && options.body) || undefined
+        }, function (resp) {
+          if (chrome.runtime.lastError) {
+            reject(new Error(chrome.runtime.lastError.message))
+            return
+          }
+          if (!resp) {
+            reject(new Error('No response from service worker'))
+            return
+          }
+          resolve(resp)
+        })
+      } catch (e) {
+        reject(new Error('sendMessage failed: ' + (e.message || e)))
+      }
+    })
+  }
+
+  // Try swFetch — no fallback to direct fetch (CORS blocks it)
+  async function proxyFetch (url, options) {
+    return swFetch(url, options)
+  }
+
+  async function loginViaBrowser (onStatus) {
+    var sessionId = crypto.randomUUID()
+    var codeVerifier = randomVerifier(64)
+    var codeChallenge = await sha256Base64url(codeVerifier)
+
+    if (onStatus) onStatus('Creating secure session...')
+
+    // Create PKCE session via service worker (avoids CORS)
+    var sessionResp
+    try {
+      sessionResp = await proxyFetch(API_BASE + '/core/auth/session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: sessionId,
+          code_challenge: codeChallenge,
+          plugin_info: { version: 'chrome-extension', figma_env: 'chrome' }
+        })
+      })
+    } catch (fetchErr) {
+      chrome.tabs.create({ url: WEBSITE_BASE + '/signin' })
+      throw new Error('Session fetch error: ' + fetchErr.message)
+    }
+
+    if (!sessionResp.ok) {
+      chrome.tabs.create({ url: WEBSITE_BASE + '/signin' })
+      throw new Error('Session failed (HTTP ' + sessionResp.status + '): ' + (sessionResp.text || '').substring(0, 120))
+    }
+
+    // Open signin with session param
+    var signinUrl = WEBSITE_BASE + '/signin?session=' + encodeURIComponent(sessionId)
+    chrome.tabs.create({ url: signinUrl })
+
+    if (onStatus) onStatus('Waiting for sign-in in browser...')
+
+    var startedAt = Date.now()
+    var timeoutMs = 3 * 60 * 1000
+    var pollMs = 1500
+
+    while (true) {
+      if (Date.now() - startedAt > timeoutMs) {
+        throw new Error('Sign-in timed out — please try again')
+      }
+
+      await new Promise(function (r) { setTimeout(r, pollMs) })
+
+      try {
+        var statusResp = await swFetch(
+          API_BASE + '/core/auth/session/status?session=' + encodeURIComponent(sessionId),
+          { method: 'GET' }
+        )
+
+        if (!statusResp.ok) continue
+
+        var statusData = statusResp.data || {}
+        var status = statusData.status || statusData.data?.status || statusData.state || statusData.data?.state
+        if (status === 'ready_for_confirm') break
+        if (status === 'expired' || status === 'revoked' || status === 'invalid') {
+          throw new Error('Session ' + status + ' — please try again')
+        }
+      } catch (pollErr) {
+        if (pollErr.message && pollErr.message.includes('Session')) throw pollErr
+      }
+    }
+
+    if (onStatus) onStatus('Confirming session...')
+
+    var confirmResp = await proxyFetch(API_BASE + '/core/auth/session/confirm', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        session_id: sessionId,
+        code_verifier: codeVerifier
+      })
+    })
+
+    if (!confirmResp.ok) {
+      var confirmData = confirmResp.data || {}
+      throw new Error(confirmData.message || confirmData.error || 'Session confirm failed')
+    }
+
+    var cData = confirmResp.data || {}
+    var token = cData.access_token || cData.data?.access_token ||
+      cData.token || cData.data?.token
+    if (!token) {
+      throw new Error('Sign-in succeeded but no token returned')
+    }
+
+    var tempTokens = { accessToken: token, refreshToken: null, accessTokenExp: null }
+    await setStoredAuth(tempTokens, null)
+
+    try {
+      var user = await getMe()
+      await setStoredAuth(tempTokens, user)
+      return { tokens: tempTokens, user: user }
+    } catch (e) {
+      return { tokens: tempTokens, user: null }
+    }
+  }
+
+  // ============================================================
+  // AI — platform AI endpoint
+  // ============================================================
+  async function aiPrompt (messages, context) {
+    return authedRequest('/core/ai/chat', {
+      method: 'POST',
+      body: JSON.stringify({ messages, context })
+    })
+  }
+
+  // ============================================================
+  // Expose global API
+  // ============================================================
+  window.SymbolsAuth = {
+    login,
+    loginViaBrowser,
+    logout,
+    getMe,
+    isSignedIn,
+    getStoredAuth,
+    getAccessToken,
+    getServiceToken,
+    listProjects,
+    getProjectByKey,
+    getProjectData,
+    authedRequest,
+    aiPrompt,
+    API_BASE
+  }
+})()

package/dist/content.css

@@ -0,0 +1,46 @@
+#symbols-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999999999998;
+  opacity: 0;
+  transition: opacity 350ms cubic-bezier(0.29, 0.67, 0.51, 0.97);
+}
+
+body:not(.symbols-grabber-active) #symbols-overlay {
+  pointer-events: none;
+}
+
+:not(#symbols-overlay) .symbols-grabber-hovered {
+  outline: 3px solid #0085ff !important;
+  outline-offset: 1px !important;
+}
+
+iframe#symbols-frame {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 85vw;
+  height: 85vh;
+  border-radius: 0.618em;
+  transform: translate(-50%, -50%);
+  border: none;
+  box-shadow: #121212f7 0 0 0 1000em;
+  background: #121212f7;
+}
+
+div#close-btn {
+  cursor: pointer;
+  z-index: 9999999999999;
+  position: fixed;
+  top: 5vh;
+  right: 6.4vw;
+  font-size: 1.5rem;
+  line-height: 0.9;
+  width: 1em;
+  height: 1em;
+  color: white;
+  font-family: monospace;
+}