Add browser profile name input and use it for identifying connected browsers in the editor

- [Fragment] should use 'bangers' font
- because user can run multiple sandboxed browser profiles, to distinguish between them, they should be able to give them an optional name. Whenever browser name changes, reconnect so that it's updated on the editor's extension side.
- refer to 'profile name' as profile name, not just name
- never show user agent to the user (limit its usage to determining browser name)
- [Pasted text]
- connected browsers should be listed alphabetically (if having profile name set, those without profile names, list at the end)

├── apps
│   ├── browser
│   │   ├── src
│   │   │   ├── background
│   │   │   │   ├── clear-chat-init-data.ts
│   │   │   │   ├── config.ts
│   │   │   │   ├── keep-alive.ts
│   │   │   │   ├── main.ts
│   │   │   │   ├── message-handler.ts
│   │   │   │   └── websocket.ts
│   │   │   ├── fonts
│   │   │   │   └── Bangers-Regular.ttf
│   │   │   ├── icons
│   │   │   │   ├── icon-128.png
│   │   │   │   ├── icon-16.png
│   │   │   │   ├── icon-32.png
│   │   │   │   └── icon-48.png
│   │   │   ├── manifest.json
│   │   │   ├── types
│   │   │   │   └── messages.ts
│   │   │   ├── utils
│   │   │   │   └── is-message.ts
│   │   │   └── views
│   │   │       └── popup
│   │   │           ├── App.tsx
│   │   │           ├── Popup.module.scss
│   │   │           ├── Popup.tsx
│   │   │           ├── index.css
│   │   │           ├── index.html
│   │   │           ├── use-browser-profile-name.ts
│   │   │           └── use-firefox-containers.ts
│   │   └── webpack.config.ts
│   └── editor
│       └── src
│           ├── constants
│           │   └── state-keys.ts
│           └── services
│               ├── websocket-manager.ts
│               └── websocket-server-process.ts
└── packages
    ├── shared
    │   └── src
    │       └── types
    │           └── websocket-message.ts
    └── ui
        └── src
            └── styles
                ├── foundation
                │   └── _variables.scss
                └── global.scss

Author: robertpiosik

apps/browser/src/background/websocket.ts

@@ -6,6 +6,18 @@ let websocket: WebSocket | null = null
 let is_reconnecting = false
 let last_ping_timestamp = Date.now()
 
+browser.storage.onChanged.addListener((changes, areaName) => {
+  if (areaName == 'local' && changes['browser-profile-name']) {
+    if (websocket) {
+      is_reconnecting = false
+      const old_ws = websocket
+      websocket = null
+      old_ws.close()
+    }
+    connect_websocket()
+  }
+})
+
 export const check_server_health = async (): Promise<boolean> => {
   try {
     const response = await fetch(`http://localhost:${DEFAULT_PORT}/health`)
@@ -16,7 +28,7 @@ export const check_server_health = async (): Promise<boolean> => {
 }
 
 export const check_and_recover_connection = () => {
-  if (websocket?.readyState === WebSocket.OPEN) {
+  if (websocket?.readyState == WebSocket.OPEN) {
     if (Date.now() - last_ping_timestamp > 20000) {
       console.warn(
         'WebSocket connection is stale (no recent pings). Force reconnecting...'
@@ -28,8 +40,8 @@ export const check_and_recover_connection = () => {
 
   if (
     !is_reconnecting &&
-    websocket?.readyState !== WebSocket.OPEN &&
-    websocket?.readyState !== WebSocket.CONNECTING
+    websocket?.readyState != WebSocket.OPEN &&
+    websocket?.readyState != WebSocket.CONNECTING
   ) {
     connect_websocket()
   }
@@ -38,8 +50,8 @@ export const check_and_recover_connection = () => {
 export const connect_websocket = async (): Promise<void> => {
   if (
     is_reconnecting ||
-    websocket?.readyState === WebSocket.OPEN ||
-    websocket?.readyState === WebSocket.CONNECTING
+    websocket?.readyState == WebSocket.OPEN ||
+    websocket?.readyState == WebSocket.CONNECTING
   ) {
     return
   }
@@ -59,9 +71,17 @@ export const connect_websocket = async (): Promise<void> => {
     const version = manifest.version
     const user_agent = navigator.userAgent
 
-    const ws = new WebSocket(
-      `ws://localhost:${DEFAULT_PORT}?token=${SECURITY_TOKENS.BROWSERS}&version=${version}&user_agent=${encodeURIComponent(user_agent)}`
-    )
+    const storage = await browser.storage.local.get('browser-profile-name')
+    const profile_name = (
+      storage['browser-profile-name'] as string | undefined
+    )?.trim()
+
+    let ws_url = `ws://localhost:${DEFAULT_PORT}?token=${SECURITY_TOKENS.BROWSERS}&version=${version}&user_agent=${encodeURIComponent(user_agent)}`
+    if (profile_name) {
+      ws_url += `&profile_name=${encodeURIComponent(profile_name)}`
+    }
+
+    const ws = new WebSocket(ws_url)
     websocket = ws
 
     ws.onopen = () => {

apps/browser/src/fonts/Bangers-Regular.ttf

@@ -7,7 +7,8 @@
   gap: 12px;
 
   &__title {
-    font-size: 16px;
+    font-family: 'Bangers';
+    font-size: 24px;
     margin: 0;
   }
 
@@ -21,6 +22,27 @@
     gap: 8px;
   }
 
+  &__profile-name {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__input-label {
+    font-size: 14px;
+    align-self: flex-start;
+  }
+
+  &__profile-name-input {
+    width: 100%;
+    padding: 6px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
   &__enable-button {
     background: #0060df;
     color: white;
@@ -36,6 +58,9 @@
 
   &__container-select {
     width: 100%;
-    padding: 4px;
+    padding: 6px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
   }
 }

apps/browser/src/views/popup/Popup.module.scss

@@ -1,6 +1,7 @@
 import React from 'react'
 import styles from './Popup.module.scss'
 import { use_firefox_containers } from './use-firefox-containers'
+import { use_browser_profile_name } from './use-browser-profile-name'
 
 export const Popup: React.FC = () => {
   const {
@@ -12,11 +13,25 @@ export const Popup: React.FC = () => {
     handle_container_change
   } = use_firefox_containers()
 
+  const { profile_name, handle_profile_name_change } =
+    use_browser_profile_name()
+
   return (
     <div className={styles.popup}>
-      <p className={styles['popup__title']}>
-        Autofill for Code Web Chat is alive
-      </p>
+      <p className={styles['popup__title']}>Code Web Chat</p>
+
+      <div className={styles['popup__profile-name']}>
+        <label className={styles['popup__input-label']}>
+          Browser Profile Name:
+        </label>
+        <input
+          type="text"
+          value={profile_name}
+          onChange={handle_profile_name_change}
+          className={styles['popup__profile-name-input']}
+          placeholder="e.g. Work, Personal"
+        />
+      </div>
 
       {is_firefox && (
         <div className={styles['popup__firefox']}>

apps/browser/src/views/popup/Popup.tsx

@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Bangers';
+  src: url('fonts/Bangers-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
   margin: 0;
   font-family:

apps/browser/src/views/popup/index.css

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import browser from 'webextension-polyfill'
+
+export const use_browser_profile_name = () => {
+  const [profile_name, set_profile_name] = useState<string>('')
+
+  useEffect(() => {
+    const init = async () => {
+      const storage = await browser.storage.local.get('browser-profile-name')
+      set_profile_name((storage['browser-profile-name'] as string) || '')
+    }
+    init()
+  }, [])
+
+  const handle_profile_name_change = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.value
+    set_profile_name(value)
+    if (value) {
+      await browser.storage.local.set({ 'browser-profile-name': value })
+    } else {
+      await browser.storage.local.remove('browser-profile-name')
+    }
+  }
+
+  return {
+    profile_name,
+    handle_profile_name_change
+  }
+}

apps/browser/src/views/popup/use-browser-profile-name.ts

@@ -17,6 +17,7 @@ const config = (_: any, argv: Record<string, any>): webpack.Configuration => {
       patterns: [
         { from: 'src/manifest.json', to: 'manifest.json' },
         { from: 'src/icons', to: 'icons' },
+        { from: 'src/fonts', to: 'fonts' },
         { from: 'src/views/popup/index.html', to: 'popup.html' },
         { from: 'src/views/popup/index.css', to: 'index.css' }
       ]

apps/browser/webpack.config.ts

@@ -294,11 +294,25 @@ export class WebSocketManager {
         LAST_SELECTED_BROWSER_ID_STATE_KEY
       )
 
-    const items = this.connected_browsers.map((b) => ({
-      label: this._get_browser_name(b.user_agent),
-      detail: b.user_agent,
-      id: b.id
-    }))
+    const items = this.connected_browsers
+      .map((b) => ({
+        label: b.profile_name || this._get_browser_name(b.user_agent),
+        description: b.profile_name
+          ? this._get_browser_name(b.user_agent)
+          : undefined,
+        id: b.id,
+        _has_profile: !!b.profile_name
+      }))
+      .sort((a, b) => {
+        if (a._has_profile && !b._has_profile) return -1
+        if (!a._has_profile && b._has_profile) return 1
+        return a.label.localeCompare(b.label)
+      })
+      .map((item) => ({
+        label: item.label,
+        description: item.description,
+        id: item.id
+      }))
 
     return new Promise<number | undefined>((resolve) => {
       const quick_pick = vscode.window.createQuickPick<

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

@@ -23,6 +23,7 @@ interface BrowserClient {
   version: string
   id: number
   user_agent: string
+  profile_name?: string
   is_alive: boolean
 }
 
@@ -110,6 +111,7 @@ class WebSocketServer {
   private _handle_browser_connection(ws: WebSocket, url: URL) {
     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
@@ -119,6 +121,7 @@ class WebSocketServer {
       version,
       id,
       user_agent,
+      profile_name,
       is_alive: true
     }
     this.browser_clients.set(id, client)
@@ -252,7 +255,8 @@ class WebSocketServer {
     return Array.from(this.browser_clients.values()).map((c) => ({
       id: c.id,
       version: c.version,
-      user_agent: c.user_agent
+      user_agent: c.user_agent,
+      profile_name: c.profile_name
     }))
   }
 

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

@@ -1,5 +1,3 @@
-import { WebPromptType } from './prompt-types'
-
 export type Chat = {
   url: string
   model?: string
@@ -12,6 +10,7 @@ export type ConnectedBrowser = {
   id: number
   version: string
   user_agent: string
+  profile_name?: string
 }
 
 export type InitializeChatMessage = {