make icon green on new pages. add test for it.

extension/src/background.ts

@@ -339,6 +339,17 @@ async function ensureConnection(): Promise<void> {
       }
       logger.debug('Removed tab from _connectedTabs map')
     },
+    onTabAttached: (tabId, targetId) => {
+      // logger.debug('=== Tab attached callback for tab:', tabId, '===')
+      useExtensionStore.setState((state) => {
+        const newTabs = new Map(state.connectedTabs)
+        newTabs.set(tabId, {
+          targetId,
+          state: 'connected',
+        })
+        return { connectedTabs: newTabs, connectionState: 'connected' }
+      })
+    },
   })
 
   useExtensionStore.setState({ connection: newConnection })

extension/src/relayConnection.ts

@@ -95,15 +95,18 @@ export class RelayConnection {
   private _closed = false;
   private _onCloseCallback?: (reason: string, code: number) => void;
   private _onTabDetachedCallback?: (tabId: number, reason: `${chrome.debugger.DetachReason}`) => void
+  private _onTabAttachedCallback?: (tabId: number, targetId: string) => void
 
-  constructor({ ws, onClose, onTabDetached }: {
+  constructor({ ws, onClose, onTabDetached, onTabAttached }: {
     ws: WebSocket;
     onClose?: (reason: string, code: number) => void;
     onTabDetached?: (tabId: number, reason: `${chrome.debugger.DetachReason}`) => void;
+    onTabAttached?: (tabId: number, targetId: string) => void;
   }) {
     this._ws = ws;
     this._onCloseCallback = onClose;
     this._onTabDetachedCallback = onTabDetached;
+    this._onTabAttachedCallback = onTabAttached;
     this._ws.onmessage = async (event: MessageEvent) => {
       let message: ExtensionCommandMessage;
       try {
@@ -208,6 +211,7 @@ export class RelayConnection {
     });
 
     logger.debug('Tab attached successfully:', tabId, 'sessionId:', sessionId, 'targetId:', targetInfo.targetId);
+    this._onTabAttachedCallback?.(tabId, targetInfo.targetId);
     return targetInfo;
   }