dsh-inner-browser-use 0.34.98 → 0.35.0

package/client.js

@@ -73,7 +73,7 @@ window.__ModuleLoader__.load({
       '.dshib-side-win[data-on="1"]{background:var(--dsw-alias-bg-subtle);color:var(--dsw-alias-label-primary)}',
       '.dshib-side-win > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
       '.dshib-side-stage{flex:1 1 auto;position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--dsw-alias-bg-base);outline:none;cursor:default}',
-      '.dshib-side-frame{display:block;user-select:none;-webkit-user-drag:none;cursor:default}',
+      '.dshib-side-frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;cursor:default}',
       '.dshib-side-ime{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;resize:none;overflow:hidden;opacity:0;pointer-events:none}',
       /* The black arrow is the agent's pointer, not the person's cursor: both are
          on screen at once, and moving the mouse never takes the arrow over. */
@@ -355,10 +355,27 @@ window.__ModuleLoader__.load({
             }
           }
           restore()
+          /* A pane whose page the browser reclaimed is closed once, so coming
+             back to the chat does not bring the empty column back. */
+          const dropExpired = () => {
+            const who = mountedOf()
+            if (who === '' || hasPane(who) !== true) return
+            void fetch(`${ROUTE}/sidecar/state?session=${encodeURIComponent(who)}`) // ui-copy-ignore
+              .then((said) => (said.ok === true ? said.json() : null))
+              .then((state) => {
+                if (state?.chat?.expired !== true) return
+                if (mountedOf() !== who) return
+                closeHere(who, false)
+              })
+              .catch(() => {})
+          }
           const offAsk = watchAsk()
+          let beats = 0
           const pollAsk = setInterval(() => {
             syncAsk()
             watchPane()
+            beats += 1
+            if (beats % 5 === 1) dropExpired()
           }, 1000)
           const stopAsk = () => {
             clearInterval(pollAsk)
@@ -645,9 +662,27 @@ window.__ModuleLoader__.load({
           .catch(() => {})
       }
 
-      const scale = size.w > 0 && size.h > 0 ? Math.min(size.w / view.w, size.h / view.h) : 0
-      const padX = (size.w - view.w * scale) / 2
-      const padY = (size.h - view.h * scale) / 2
+      /* Where the page actually got drawn inside the column: the frame fills
+         the stage and the picture sits inside it, so the answer comes from the
+         element that is on screen rather than from the last size remembered.
+         A stale measure can then never shrink the picture to a thumbnail. */
+      const frameEl = React.useRef(null)
+      const picture = () => {
+        const at = frameEl.current
+        const areaEl = stage.current
+        if (at === null || at === undefined || areaEl === null || areaEl === undefined) return null
+        if (!(view.w > 0) || !(view.h > 0)) return null
+        const a = at.getBoundingClientRect()
+        const b = areaEl.getBoundingClientRect()
+        if (!(a.width > 1) || !(a.height > 1)) return null
+        const scale = Math.min(a.width / view.w, a.height / view.h)
+        if (!(scale > 0)) return null
+        return {
+          scale,
+          x: a.left - b.left + (a.width - view.w * scale) / 2,
+          y: a.top - b.top + (a.height - view.h * scale) / 2,
+        }
+      }
 
       /* The column tells the page how big it is, a beat after the resize stops:
          a page that relayouts on every pointer step would never settle. */
@@ -656,15 +691,11 @@ window.__ModuleLoader__.load({
         /* The page already has that shape: a resize that lands between two
            viewport sizes would only cost a relayout and another frame. */
         if (Math.abs(Number(view?.w ?? 0) - size.w) < 1 && Math.abs(Number(view?.h ?? 0) - size.h) < 1) return undefined
-        /* The page is told the column's size a beat after the resize stops, and
-           again until the browser says it took it: a request that arrives while
-           the page is still starting is refused, and a pane that gives up then
-           keeps a letterboxed picture for as long as it stays open. */
-        let live = true
-        let tries = 0
-        let timer = 0
-        const send = () => {
-          if (!live) return
+        /* The page is told the column's size a beat after the resize stops.
+           One ask: the pane draws at whatever shape the frame says it has, so
+           a browser that is still starting costs nothing more than the next
+           resize doing the same thing again. */
+        const timer = setTimeout(() => {
           fetch(`${ROUTE}/sidecar/viewport`, {
             method: 'POST',
             headers: { 'content-type': 'application/json' },
@@ -672,30 +703,17 @@ window.__ModuleLoader__.load({
           })
             .then((answer) => (answer.ok === true ? answer.json() : { ok: false }))
             .then((said) => {
-              if (!live) return
               /* The browser answers with the shape it actually took: drawing
                  the picture at that size fills the pane even when the page
                  refused the exact one asked for. */
               const took = said?.view ?? null
               if (said?.ok === true && took !== null && Number(took.width) > 0 && Number(took.height) > 0) {
                 setView({ w: Math.round(Number(took.width)), h: Math.round(Number(took.height)) })
-                return
               }
-              if (said?.ok === true || tries >= 5) return
-              tries += 1
-              timer = setTimeout(send, 400)
             })
-            .catch(() => {
-              if (!live || tries >= 5) return
-              tries += 1
-              timer = setTimeout(send, 600)
-            })
-        }
-        timer = setTimeout(send, 250)
-        return () => {
-          live = false
-          clearTimeout(timer)
-        }
+            .catch(() => {})
+        }, 250)
+        return () => clearTimeout(timer)
       }, [mine, size.w, size.h, view?.w, view?.h])
 
       const who = String(props.sessionId ?? '')
@@ -729,10 +747,12 @@ window.__ModuleLoader__.load({
       }
       const toView = (event) => {
         const el = stage.current
-        if (el === null || scale <= 0) return null
+        if (el === null) return null
+        const spot = picture()
+        if (spot === null) return null
         const box = el.getBoundingClientRect()
-        const x = (event.clientX - box.left - padX) / scale
-        const y = (event.clientY - box.top - padY) / scale
+        const x = (event.clientX - box.left - spot.x) / spot.scale
+        const y = (event.clientY - box.top - spot.y) / spot.scale
         if (x < 0 || y < 0 || x > view.w || y > view.h) return null
         return { x: Math.round(x), y: Math.round(y) }
       }
@@ -828,6 +848,7 @@ window.__ModuleLoader__.load({
           h('div', { className: 'dshib-side-note' }, L('side.foreign')))
       }
       const pointer = person === true || hand === true ? null : ptr
+      const spot = pointer === null ? null : (picture() ?? { scale: 1, x: 0, y: 0 })
       const noteText = phase === 'failed' ? note || L('side.failed') : phase === 'live' ? L('side.empty') : L('side.connecting')
       return h('div', { className: 'dshib-side' },
         h('div', { className: 'dshib-side-bar' },
@@ -894,7 +915,7 @@ window.__ModuleLoader__.load({
             tabIndex: 0,
             spellCheck: false,
             'aria-label': L('side.type'),
-            style: pointer === null ? undefined : { left: `${padX + pointer.x * scale}px`, top: `${padY + pointer.y * scale}px` },
+            style: pointer === null || spot === null ? undefined : { left: `${spot.x + pointer.x * spot.scale}px`, top: `${spot.y + pointer.y * spot.scale}px` },
             onCompositionStart: () => {
               composing.current = true
             },
@@ -913,9 +934,10 @@ window.__ModuleLoader__.load({
           }),
           frame === null ? null : h('img', {
             className: 'dshib-side-frame',
+            ref: frameEl,
             src: `data:image/jpeg;base64,${frame.jpeg}`,
-            width: Math.max(1, Math.round(view.w * scale)),
-            height: Math.max(1, Math.round(view.h * scale)),
+            width: Math.max(1, Math.round(view.w)),
+            height: Math.max(1, Math.round(view.h)),
             alt: '', // ui-copy-ignore
             draggable: false,
           }),
@@ -923,7 +945,7 @@ window.__ModuleLoader__.load({
             className: 'dshib-side-ptr',
             src: SIDE_POINTER, // ui-copy-ignore
             alt: '', // ui-copy-ignore
-            style: { left: `${padX + pointer.x * scale}px`, top: `${padY + pointer.y * scale}px` },
+            style: spot === null ? undefined : { left: `${spot.x + pointer.x * spot.scale}px`, top: `${spot.y + pointer.y * spot.scale}px` },
           })))
     }
   },

package/index.js

@@ -20,7 +20,7 @@
  * learns no port and no secret. // ui-copy-ignore
  */
 
-import { appendFileSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { appendFileSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
 import { homedir } from 'node:os'
 import { join } from 'node:path'
 import { Sidecar } from './sidecar.js?v=1'
@@ -50,6 +50,27 @@ function writeMirror(value) {
   }
 }
 
+/** The note stops growing: past this size the oldest half goes, so a long-lived run never fills the disk. */
+const NOTES_MAX = 256 * 1024
+const NOTES_KEEP = 128 * 1024
+
+/**
+ * Add one line to the mirror's own note, keeping the file bounded.
+ * @param {string} line - what happened, one line.
+ */
+export function note(line) {
+  const file = join(STATE_DIR, 'asks.log')
+  try {
+    mkdirSync(STATE_DIR, { recursive: true })
+    appendFileSync(file, `${new Date().toISOString()} ${line}\n`)
+    if (statSync(file).size <= NOTES_MAX) return
+    const whole = readFileSync(file, 'utf8')
+    writeFileSync(file, whole.slice(whole.length - NOTES_KEEP).replace(/^[^\n]*\n/, ''))
+  } catch {
+    /* a note that cannot be written must not take the mirror down */
+  }
+}
+
 /** Route prefix owned by this plugin. Never under `/api`, which is the Host's own channel. */ // ui-copy-ignore
 export const ROUTE = '/dsh-inner-browser-use'
 
@@ -259,6 +280,9 @@ export function cwdOf(execution) {
 
 export function needsTab(chatState, chat, owner) {
   if (String(chat ?? '') === '' || owner !== chat) return false
+  /* A tab the browser reclaimed is not a tab that went missing: opening one
+     again would bring back the column the person no longer needs. */
+  if (chatState?.expired === true) return false
   return chatState?.alive !== true
 }
 
@@ -336,7 +360,7 @@ export function apply(ctx) {
         if (due !== true) return
         last = Date.now()
         bridge.want(owner, Date.now(), 'keepalive')
-        appendFileSync(join(STATE_DIR, 'asks.log'), `${new Date().toISOString()} asked ${owner.slice(-8)} to draw the mirror again\n`)
+        note(`asked ${owner.slice(-8)} to draw the mirror again`)
       } catch {}
     }, 4000)
     timer.unref?.()
@@ -500,7 +524,7 @@ export function apply(ctx) {
          called open again: the mirror would come back empty in a chat that
          never closed it. The chat that owned the browser asks for its state, so
          answering honestly means picking the browser up first. */
-      if (shouldAdoptOnState(said, chat, bridge.owner)) {
+      if (shouldAdoptOnState(said, chat, bridge.owner) && mineChat?.expired !== true) {
         try {
           await sidecar.ensure(adoptOptions(chat, sidecar.rememberedTab?.(chat)))
           said = await sidecar.state()
@@ -511,7 +535,7 @@ export function apply(ctx) {
         if (Date.now() - before > 2000) {
           lastAsk.set(chat, Date.now())
           try {
-            appendFileSync(join(STATE_DIR, 'asks.log'), `${new Date().toISOString()} ${chat.slice(-8)} alive=${String(said?.alive === true)} viewers=${String(said?.viewers ?? 0)}\n`)
+            note(`${chat.slice(-8)} alive=${String(said?.alive === true)} viewers=${String(said?.viewers ?? 0)}`)
           } catch {}
         }
       }
@@ -715,7 +739,17 @@ export function apply(ctx) {
       const body = await readBody(req).then((raw) => JSON.parse(raw || '{}')).catch(() => ({}))
       const who = acting(body)
       if (who === '') return
-      json(200, { ok: true, forgot: bridge.forget(who) })
+      const forgot = bridge.forget(who)
+      /* Nobody is watching a picture the person closed: the browser itself is
+         put away a minute later rather than a quarter of an hour, unless an
+         agent asks for it again in the meantime. */
+      try {
+        if (sidecar.watched() === 0) {
+          sidecar.touch(REST_MS)
+          note('said ' + who.slice(-8) + ' closed the mirror - browser rests in a minute')
+        }
+      } catch { /* a browser that never started needs no rest timer */ }
+      json(200, { ok: true, forgot })
       return
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-inner-browser-use",
-  "version": "0.34.98",
+  "version": "0.35.0",
   "description": "An agent-owned Chromium sidecar mirrored into the DeepSeek Harness right column: the agent drives it, the person watches and can take the mouse, and logins survive restarts.",
   "type": "module",
   "main": "index.js",

package/sidecar.js

@@ -78,7 +78,7 @@ const QUALITY_FLOOR = 44 // ui-copy-ignore
 const QUALITY_CEILING = 76 // ui-copy-ignore
 
 /**
- * Decide the next JPEG quality from the weight of the frame just seen. A frame
+ * Decide the next JPEG quality from the weight of the frame seen. A frame
  * near 90 KB of base64 is a heavy page: lowering quality by 8 costs a little
  * sharpness and saves a lot of transport. A small frame has room to sharpen.
  * @param {number} current - quality now.
@@ -95,6 +95,12 @@ export function nextQuality(current, base64) {
 
 /** Idle lifetime, so a forgotten sidecar does not sit on a login forever. */
 const IDLE_MS = 15 * 60_000
+/* A pane the person closed is a stronger signal than a pane nobody touched: the
+   browser is put away a minute later unless someone asks for it again. A whole
+   Chrome with its renderers is a few hundred megabytes, and leaving it up for a
+   quarter of an hour after a deliberate close is exactly the cost they did not
+   want. */
+const REST_MS = 60_000
 /* One browser serves every chat, but a chat that is not on screen need not keep
    a full renderer alive for ever: past this many chats the oldest unwatched tab
    is closed, and its address brings it back on the next visit. */
@@ -472,6 +478,30 @@ class Cdp {
  * Input is real CDP input: the page sees the same events a person's trackpad
  * produces, which is what makes sites that reject scripted clicks work.
  */
+/**
+ * Whether two addresses show the same place: a fragment never changes the page.
+ * @param {string} a - one address.
+ * @param {string} b - another address.
+ * @returns {string} the shared key, or '' when they differ.
+ */
+function placeKey(value) {
+  const said = String(value ?? '')
+  if (said === '') return ''
+  try {
+    const url = new URL(said)
+    url.hash = ''
+    const path = url.pathname.replace(/\/+$/, '') || '/'
+    return `${url.protocol}//${url.host}${path}${url.search}`
+  } catch {
+    return said
+  }
+}
+
+function samePlace(a, b) {
+  const key = placeKey(a)
+  return key !== '' && key === placeKey(b)
+}
+
 export class SidecarPage {
   /** @param {Cdp} cdp - the page session. @param {string} profile - profile name. */
   constructor(cdp, profile, port, hold = () => 0) { // ui-copy-ignore
@@ -768,9 +798,10 @@ export class SidecarPage {
       .then((response) => (response.ok ? response.json() : []))
       .catch(() => [])
     const current = await this.cdp.send('Target.getTargetInfo').then((info) => String(info?.targetInfo?.targetId ?? '')).catch(() => '')
-    return (Array.isArray(list) ? list : [])
+    const rows = (Array.isArray(list) ? list : [])
       .filter((item) => item.type === 'page' && item.webSocketDebuggerUrl !== undefined)
       .map((item) => ({ targetId: String(item.id), title: String(item.title ?? ''), url: String(item.url ?? ''), webSocketUrl: String(item.webSocketDebuggerUrl), current: String(item.id) === current }))
+    return rows
   }
 
   /**
@@ -1294,7 +1325,7 @@ export class SidecarPage {
   /**
    * Whether this picture repeats the one the pane is already showing.
    * @param {string} jpeg - base64 JPEG of the new frame.
-   * @returns {boolean} true when sending it would just cost bytes.
+   * @returns {boolean} true when sending it would cost bytes.
    */
   repeats(jpeg, gap = 1000) {
     const prev = this.lastShot
@@ -1973,6 +2004,8 @@ export class Sidecar {
     /* A tab being opened for a chat: a second call for the same chat waits for
        it instead of opening a twin. */
     this.opening = new Map()
+    /* Chats whose tab was reclaimed: the column is told so it can go away. */
+    this.expired = new Map()
     /* A measurement or a test may want a profile of its own; the person's
        browser keeps the default one. */
     this.profile = String(options.profile ?? 'default')
@@ -2151,6 +2184,7 @@ export class Sidecar {
    */
   async tabFor(session, url) {
     const id = String(session ?? '')
+    this.expired?.delete(id)
     const had = this.pageFor(id)
     if (had !== null) {
       if (url !== undefined && url !== '') await had.navigate(url)
@@ -2262,23 +2296,62 @@ export class Sidecar {
       if (page === this.page) continue
       if (now - Number(page.touched ?? 0) < TAB_IDLE_MS) continue
       this.pages.delete(id)
+      /* The column is told the tab is gone, so a chat coming back to the front
+         does not re-expand a pane for a page that already went away. */
+      ;(this.expired ??= new Map()).set(String(id), Date.now())
       await page.stopCast().catch(() => {})
       await fetch(`http://127.0.0.1:${String(page.port)}/json/close/${target}`, { signal: AbortSignal.timeout(800) }).catch(() => {}) // ui-copy-ignore
       this.note(`closed an idle tab — its address is kept for the chat`)
     }
   }
 
+  /**
+   * A page already at an address, so a second open reuses it. A page another
+   * chat is driving is that chat's, and is not offered.
+   * @param {string} url - address wanted.
+   * @param {string} except - chat doing the asking.
+   * @returns {SidecarPage|null} the page, or null.
+   */
+  tabShowing(url, except) {
+    const wanted = String(url ?? '')
+    if (wanted === '' || wanted === 'about:blank') return null
+    const held = new Set()
+    for (const [who, set] of this.claims) {
+      if (String(who) === String(except)) continue
+      for (const target of set) held.add(String(target))
+    }
+    for (const page of [this.page, ...this.pages.values()]) {
+      if (page === null || page === undefined || page.cdp?.closed === true) continue
+      const target = String(page.targetId ?? '')
+      if (target === '' || held.has(target)) continue
+      if (samePlace(page.url, wanted)) return page
+    }
+    return null
+  }
+
   /**
    * @param {string} id - chat id.
    * @param {string} [url] - address to open in it.
    * @returns {Promise<SidecarPage>} a new tab for that chat.
    */
   async openTab(id, url) {
+    this.expired?.delete(String(id))
     const had = this.pageFor(id)
     if (had !== null) {
       if (url !== undefined && url !== '') await had.navigate(url)
       return had
     }
+    /* One address, one page: a browser that is already showing where this chat
+       wants to go hands that page over instead of a second copy of the same
+       address, which nobody would be able to tell apart in the tab list. */
+    const twin = this.tabShowing(url, id)
+    if (twin !== null) {
+      this.pages.set(String(id), twin)
+      this.claim(String(id), twin.targetId)
+      this.touch()
+      this.rememberTab(String(id), String(twin.url ?? url))
+      return twin
+    }
     if (this.page === null) await this.ensure()
     const port = this.page?.port ?? 0 // ui-copy-ignore
     if (port === 0) throw new Error('sidecar: no browser to open a tab in') // ui-copy-ignore
@@ -2640,7 +2713,25 @@ export class Sidecar {
    */
   async tabs(session = '') {
     const page = this.pageFor(session) ?? this.page
-    return page === null ? [] : page.tabs()
+    if (page === null) return []
+    const rows = await page.tabs()
+    /* One address is one row: the base page can be showing the very place a
+       chat's tab already shows, and two identical lines read as two pages. A
+       page a chat holds represents that address; an unheld twin is left out,
+       and the rows that stay keep the browser's order, which is the index
+       space the tab tools address their rows by. */
+    const held = new Set()
+    for (const set of this.claims.values()) for (const target of set) held.add(String(target))
+    const seen = new Set()
+    const kept = []
+    for (const row of [...rows].filter((item) => held.has(item.targetId)).concat(rows.filter((item) => !held.has(item.targetId)))) {
+      const key = placeKey(row.url)
+      if (key !== '' && seen.has(key)) continue
+      if (key !== '') seen.add(key)
+      kept.push(row)
+    }
+    kept.sort((a, b) => rows.indexOf(a) - rows.indexOf(b))
+    return kept
   }
 
   /**
@@ -2836,7 +2927,18 @@ export class Sidecar {
     }
   }
 
-  touch() {
+  /** @returns {number} how many panes are watching a picture right now. */
+  watched() {
+    let n = this.page?.frames?.size ?? 0
+    for (const page of this.pages?.values() ?? []) n += page.frames?.size ?? 0
+    return n
+  }
+
+  /**
+   * Starts the idle clock again.
+   * @param {number} [ms] - how long a browser nobody watches may stay up.
+   */
+  touch(ms = IDLE_MS) {
     if (this.idle !== null) clearTimeout(this.idle)
     this.idle = setTimeout(() => {
       this.idle = null
@@ -2849,7 +2951,7 @@ export class Sidecar {
         return
       }
       void this.shutdown()
-    }, IDLE_MS)
+    }, ms)
     this.idle.unref?.()
   }
 
@@ -3057,8 +3159,9 @@ export class Sidecar {
        question about which site it used to be. */
     const remembered = this.rememberedTab(id)
     const page = id === '' ? null : this.pageFor(id)
-    if (page === null || page === undefined) return { url: '', title: '', viewers: 0, alive: false, remembered } // ui-copy-ignore
-    return { url: String(page.url ?? ''), title: String(page.title ?? ''), viewers: page.frames?.size ?? 0, alive: true, remembered } // ui-copy-ignore
+    const expired = this.expired?.has(id) === true
+    if (page === null || page === undefined) return { url: '', title: '', viewers: 0, alive: false, expired, remembered } // ui-copy-ignore
+    return { url: String(page.url ?? ''), title: String(page.title ?? ''), viewers: page.frames?.size ?? 0, alive: true, expired, remembered } // ui-copy-ignore
   }
 
   async state() {