fix banner

Author: icecrasher321

apps/desktop/electron-builder.yml

@@ -20,7 +20,7 @@ electronFuses:
   enableNodeCliInspectArguments: false
   enableEmbeddedAsarIntegrityValidation: true
   onlyLoadAppFromAsar: true
-  strictlyRequireAllFuses: true
+  resetAdHocDarwinSignature: true
 
 mac:
   category: public.app-category.developer-tools

apps/desktop/src/main/browser-agent/driver.ts

@@ -24,16 +24,12 @@ import {
   clickElement,
   collectSnapshot,
   getViewportInfo,
-  hasTakeoverBanner,
   hoverElement,
-  isTakeoverDone,
   pageContainsText,
   pressKeyOnPage,
   readPageText,
-  removeTakeoverBanner,
   scrollPage,
   selectOptionInElement,
-  showTakeoverBanner,
   typeIntoElement,
 } from '@/main/browser-agent/page-functions'
 import * as session from '@/main/browser-agent/session'
@@ -73,13 +69,22 @@ function recordNotice(notice: string): void {
   if (pendingNotices.length < 10) pendingNotices.push(notice)
 }
 
+/**
+ * Takeover state lives here (session-level, not in the page) so the panel's
+ * takeover strip survives navigations and tab switches. The reason rides
+ * every page-state push; the panel's Done chip sends `takeover-done`.
+ */
+let takeoverReason: string | null = null
+let takeoverDone = false
+
 function pageStateFor(contents: WebContents): BrowserPageState {
   return {
     url: contents.getURL(),
     title: contents.getTitle(),
     loading: contents.isLoading(),
     canGoBack: contents.navigationHistory.canGoBack(),
     canGoForward: contents.navigationHistory.canGoForward(),
+    ...(takeoverReason !== null ? { takeoverReason } : {}),
   }
 }
 
@@ -344,34 +349,38 @@ export function parseKeyCombo(combo: string): ParsedCombo {
 
 /**
  * Hands control to the user IN THE PANEL: the page is already natively
- * interactive there, so a banner on the page explains what to do and carries
- * the "Done" button; the tool resolves when the user clicks it.
+ * interactive there, so the panel chrome shows a takeover strip (driven by
+ * `takeoverReason` on page-state pushes) with the Done chip; the tool
+ * resolves when that chip sends the `takeover-done` panel action. Nothing is
+ * injected into the page, so the strip never covers page content and
+ * survives navigations.
  */
 async function runTakeover(reason: string): Promise<unknown> {
   const tab = session.ensureTab()
   const contents = tab.view.webContents
-  await execInPage(contents, showTakeoverBanner, [reason]).catch(() => {})
+  takeoverReason = reason
+  takeoverDone = false
+  pushPageState(contents)
 
   const startedAt = Date.now()
-  while (Date.now() - startedAt < TAKEOVER_MAX_MS) {
-    await sleep(TAKEOVER_POLL_MS)
-    if (!session.hasSession() || contents.isDestroyed()) {
-      throw new ToolError(
-        'The browser session was closed during takeover. Ask the user what happened, then reopen with browser_navigate.'
-      )
-    }
-    const done = await execInPage(contents, isTakeoverDone, []).catch(() => false)
-    if (done) {
-      await execInPage(contents, removeTakeoverBanner, []).catch(() => {})
-      return { completed: true, elapsedMs: Date.now() - startedAt }
-    }
-    // The banner disappears on navigation; keep it visible until the user is done.
-    const bannerVisible = await execInPage(contents, hasTakeoverBanner, []).catch(() => true)
-    if (!bannerVisible) {
-      await execInPage(contents, showTakeoverBanner, [reason]).catch(() => {})
+  try {
+    while (Date.now() - startedAt < TAKEOVER_MAX_MS) {
+      await sleep(TAKEOVER_POLL_MS)
+      if (!session.hasSession() || contents.isDestroyed()) {
+        throw new ToolError(
+          'The browser session was closed during takeover. Ask the user what happened, then reopen with browser_navigate.'
+        )
+      }
+      if (takeoverDone) {
+        return { completed: true, elapsedMs: Date.now() - startedAt }
+      }
     }
+    throw new ToolError('Takeover timed out after 12 hours without the user finishing.')
+  } finally {
+    takeoverReason = null
+    takeoverDone = false
+    if (!contents.isDestroyed()) pushPageState(contents)
   }
-  throw new ToolError('Takeover timed out after 12 hours without the user finishing.')
 }
 
 // ---------------------------------------------------------------------------
@@ -620,6 +629,12 @@ export async function executeTool(
 
 /** Browser-chrome commands from the panel header; fire-and-forget. */
 export async function handlePanelAction(action: BrowserPanelAction): Promise<void> {
+  // The Done chip on the panel's takeover strip: hands control back to the
+  // agent. Meaningful only while a takeover is actually waiting.
+  if (action.action === 'takeover-done') {
+    if (takeoverReason !== null) takeoverDone = true
+    return
+  }
   // Navigate bootstraps the session: the user can open the panel manually
   // (before the agent ever touched the browser) and drive it from the URL
   // bar. The other chrome actions need an existing page.

apps/desktop/src/main/browser-agent/page-functions.ts

@@ -20,9 +20,6 @@ export interface PageActionError {
   error: string
 }
 
-export const TAKEOVER_BANNER_ID = '__sim-takeover-banner'
-export const TAKEOVER_DONE_ATTR = 'data-sim-takeover-done'
-
 /**
  * Builds the page snapshot: a structural outline (headings, landmarks) with
  * interactive elements carrying numeric ids, walking open shadow roots and
@@ -79,7 +76,6 @@ export function collectSnapshot(): unknown {
   let truncated = false
 
   const isVisible = (el: Element): boolean => {
-    if (el.closest('#__sim-takeover-banner')) return false
     const rect = el.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return false
     const doc = el.ownerDocument
@@ -441,42 +437,3 @@ export function getViewportInfo(): unknown {
     height: window.innerHeight,
   }
 }
-
-export function showTakeoverBanner(reason: string): unknown {
-  document.documentElement.removeAttribute('data-sim-takeover-done')
-  if (document.getElementById('__sim-takeover-banner')) return { shown: true }
-  const bar = document.createElement('div')
-  bar.id = '__sim-takeover-banner'
-  bar.style.cssText =
-    'position:fixed;top:0;left:0;right:0;z-index:2147483647;background:#18181b;color:#fff;' +
-    'font:14px system-ui,sans-serif;padding:10px 16px;display:flex;align-items:center;' +
-    'gap:12px;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.35)'
-  const label = document.createElement('span')
-  label.textContent = `Sim handed you control: ${reason}`
-  const button = document.createElement('button')
-  button.textContent = 'Done — give control back to Sim'
-  button.style.cssText =
-    'background:#6f5ff2;color:#fff;border:0;border-radius:6px;padding:6px 12px;' +
-    'font:600 13px system-ui,sans-serif;cursor:pointer'
-  button.addEventListener('click', () => {
-    document.documentElement.setAttribute('data-sim-takeover-done', '1')
-    bar.remove()
-  })
-  bar.append(label, button)
-  document.documentElement.append(bar)
-  return { shown: true }
-}
-
-export function isTakeoverDone(): boolean {
-  return document.documentElement.getAttribute('data-sim-takeover-done') === '1'
-}
-
-export function hasTakeoverBanner(): boolean {
-  return Boolean(document.getElementById('__sim-takeover-banner'))
-}
-
-export function removeTakeoverBanner(): boolean {
-  document.getElementById('__sim-takeover-banner')?.remove()
-  document.documentElement.removeAttribute('data-sim-takeover-done')
-  return true
-}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Tooltip } from '@sim/emcn'
+import { Chip, Tooltip } from '@sim/emcn'
 import { ArrowLeft, ArrowRight, Cursor, RefreshCw } from '@sim/emcn/icons'
 import { reportBrowserPanelBounds, sendBrowserPanelAction } from '@/lib/browser-agent/transport'
 import { useBrowserSessionStore } from '@/stores/browser-session/store'
@@ -154,6 +154,20 @@ export function BrowserSession() {
           }}
         />
       </div>
+      {/* Takeover strip: sits in the panel chrome ABOVE the page rect, so it
+          never covers page content. Done hands control back to Sim. */}
+      {typeof pageState?.takeoverReason === 'string' && (
+        <div className='flex items-center gap-2 border-[var(--border)] border-b px-3 py-1.5'>
+          <p className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
+            {pageState.takeoverReason.trim()
+              ? `Sim is waiting for you — ${pageState.takeoverReason.trim()}`
+              : 'Sim is waiting for you'}
+          </p>
+          <Chip variant='primary' onClick={() => sendBrowserPanelAction('takeover-done')}>
+            Done
+          </Chip>
+        </div>
+      )}
       {/* Host area: the real page is overlaid exactly on this rect. */}
       <div ref={hostRef} className='relative flex-1 overflow-hidden bg-[var(--surface-secondary)]'>
         {(!pageState || !sessionAlive) && (

packages/browser-protocol/src/index.ts

@@ -69,11 +69,12 @@ export interface BrowserPanelBounds {
 
 /**
  * Browser-chrome commands from the panel header (URL bar, back/forward,
- * reload). Page interactions need no protocol — the user acts on the real
- * embedded page directly.
+ * reload) plus `takeover-done`, sent by the panel's takeover strip when the
+ * user finishes a hand-control-back request. Page interactions need no
+ * protocol — the user acts on the real embedded page directly.
  */
 export interface BrowserPanelAction {
-  action: 'navigate' | 'reload' | 'back' | 'forward'
+  action: 'navigate' | 'reload' | 'back' | 'forward' | 'takeover-done'
   /** Absolute URL for `navigate` (typed into the panel's URL bar). */
   url?: string
 }
@@ -85,6 +86,13 @@ export interface BrowserPageState {
   loading: boolean
   canGoBack: boolean
   canGoForward: boolean
+  /**
+   * Set while `browser_request_takeover` is waiting on the user: the model's
+   * reason for handing over control (e.g. "Log in to your account"). The
+   * panel renders its takeover strip from this; it is session-level state,
+   * so it survives page navigations and tab switches.
+   */
+  takeoverReason?: string
 }
 
 /**

packages/desktop-bridge/src/index.ts

@@ -23,7 +23,7 @@ export interface SimDesktopBrowserAgentApi {
    * rejects for tool-level failures (those ride `ok: false`).
    */
   executeTool(tool: BrowserToolName, params: Record<string, unknown>): Promise<BrowserToolResponse>
-  /** Browser-chrome commands from the panel header (URL bar, back, reload). */
+  /** Browser-chrome commands from the panel (URL bar, back, reload, takeover Done). */
   panelAction(action: BrowserPanelAction): void
   /**
    * Report where the browser panel sits in the window (CSS pixels relative