Migrate browser IDs from numbers to persistent UUIDs

- [Pasted text]

├── apps
│   ├── browser
│   │   ├── src
│   │   │   ├── background
│   │   │   │   ├── main.ts
│   │   │   │   └── websocket.ts
│   │   │   └── manifest.json
│   │   └── webpack.config.ts
│   └── editor
│       ├── src
│       │   ├── constants
│       │   │   └── state-keys.ts
│       │   ├── extension.ts
│       │   └── services
│       │       ├── websocket-manager.ts
│       │       └── websocket-server-process.ts
│       └── webpack.config.ts
└── packages
    └── shared
        └── src
            ├── constants
            │   └── websocket.ts
            └── types
                └── websocket-message.ts

Author: robertpiosik

apps/browser/src/background/websocket.ts

@@ -71,12 +71,21 @@ export const connect_websocket = async (): Promise<void> => {
     const version = manifest.version
     const user_agent = navigator.userAgent
 
-    const storage = await browser.storage.local.get('browser-profile-name')
+    const storage = await browser.storage.local.get([
+      'browser-profile-name',
+      'browser-id'
+    ])
     const profile_name = (
       storage['browser-profile-name'] as string | undefined
     )?.trim()
 
-    let ws_url = `ws://localhost:${DEFAULT_PORT}?client_type=${CLIENT_TYPE.BROWSER}&version=${version}&user_agent=${encodeURIComponent(user_agent)}`
+    let browser_id = storage['browser-id'] as string | undefined
+    if (!browser_id) {
+      browser_id = crypto.randomUUID()
+      await browser.storage.local.set({ 'browser-id': browser_id })
+    }
+
+    let ws_url = `ws://localhost:${DEFAULT_PORT}?client_type=${CLIENT_TYPE.BROWSER}&version=${version}&user_agent=${encodeURIComponent(user_agent)}&browser_id=${encodeURIComponent(browser_id)}`
     if (profile_name) {
       ws_url += `&profile_name=${encodeURIComponent(profile_name)}`
     }

apps/browser/src/manifest.json

@@ -4,7 +4,7 @@
   "name": "Autofill for Code Web Chat",
   "short_name": "CWC",
   "description": "Autofill prompts in chatbots",
-  "version": "2026.1019.19",
+  "version": "2026.1021.20",
   "homepage_url": "https://github.com/robertpiosik/CodeWebChat",
   "icons": {
     "16": "icons/icon-16.png",

apps/editor/src/services/websocket-manager.ts

@@ -307,7 +307,7 @@ export class WebSocketManager {
     }
   }
 
-  private async _select_browser(): Promise<number | undefined> {
+  private async _select_browser(): Promise<string | undefined> {
     if (this.connected_browsers.length == 0) {
       return undefined
     }
@@ -321,10 +321,9 @@ export class WebSocketManager {
       return id
     }
 
-    const last_selected_browser_id =
-      this.extension_context.workspaceState.get<number>(
-        LAST_SELECTED_BROWSER_ID_STATE_KEY
-      )
+    const last_selected_browser_id = this.extension_context.workspaceState.get<
+      string | number
+    >(LAST_SELECTED_BROWSER_ID_STATE_KEY)
 
     const items = this.connected_browsers
       .map((b) => ({
@@ -341,23 +340,23 @@ export class WebSocketManager {
         if (a._has_profile && b._has_profile) {
           return a.label.localeCompare(b.label)
         }
-        return a.id - b.id
+        return a.id.localeCompare(b.id)
       })
       .map((item) => ({
         label: item.label,
         description: item.description,
         id: item.id
       }))
 
-    return new Promise<number | undefined>((resolve) => {
+    return new Promise<string | undefined>((resolve) => {
       const quick_pick = vscode.window.createQuickPick<
-        vscode.QuickPickItem & { id: number }
+        vscode.QuickPickItem & { id: string }
       >()
       quick_pick.items = items
 
-      if (last_selected_browser_id) {
+      if (last_selected_browser_id !== undefined) {
         const active_item = items.find(
-          (item) => item.id == last_selected_browser_id
+          (item) => item.id === last_selected_browser_id
         )
         if (active_item) {
           quick_pick.activeItems = [active_item]

apps/editor/src/services/websocket-server-process.ts

@@ -12,7 +12,7 @@ dotenv.config({ path: path.join(__dirname, '..', '.env') })
 interface BrowserClient {
   ws: WebSocket
   version: string
-  id: number
+  id: string
   user_agent: string
   profile_name?: string
   is_alive: boolean
@@ -26,8 +26,7 @@ interface VSCodeClient {
 
 class WebSocketServer {
   private vscode_clients: Map<string, VSCodeClient> = new Map()
-  private browser_clients: Map<number, BrowserClient> = new Map()
-  private browser_client_counter: number = 0
+  private browser_clients: Map<string, BrowserClient> = new Map()
   private connections: Set<WebSocket> = new Set()
   private server: http.Server
   private wss: any
@@ -117,25 +116,15 @@ class WebSocketServer {
 
   private _create_http_server(): http.Server {
     return http.createServer((req: any, res: any) => {
-      res.setHeader('Access-Control-Allow-Origin', '*')
-      res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
-      res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
-
-      if (req.method == 'OPTIONS') {
-        res.writeHead(204)
-        res.end()
-        return
-      }
-
       const url = new URL(req.url || '', `http://localhost:${DEFAULT_PORT}`)
       if (url.pathname == '/health') {
         const challenge = url.searchParams.get('challenge')
         const response: any = { status: 'ok' }
 
         if (challenge) {
-          // eslint-disable-next-line @typescript-eslint/no-var-requires
           const {
             get_or_create_shared_token
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
           } = require('../utils/shared-token')
           const token = get_or_create_shared_token()
           const signature = crypto
@@ -192,9 +181,7 @@ class WebSocketServer {
     const version = url.searchParams.get('version') || 'unknown'
     const user_agent = url.searchParams.get('user_agent') || 'unknown'
     const profile_name = url.searchParams.get('profile_name') || undefined
-
-    this.browser_client_counter++
-    const id = this.browser_client_counter
+    const id = url.searchParams.get('browser_id') || crypto.randomUUID()
 
     const client: BrowserClient = {
       ws,

packages/shared/src/types/websocket-message.ts

@@ -7,7 +7,7 @@ export type Chat = {
 }
 
 export type ConnectedBrowser = {
-  id: number
+  id: string
   version: string
   user_agent: string
   profile_name?: string
@@ -17,9 +17,9 @@ export type InitializeChatMessage = {
   action: 'initialize-chat'
   text: string
   url: string
-  client_id: string 
+  client_id: string
   model?: string
-  target_browser_id?: number
+  target_browser_id?: string
   reasoning_effort?: string
   system_instructions?: string
   options?: string[]