dsh-site-bridge 0.5.3 → 0.6.1

package/extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "default_locale": "en",
   "name": "__MSG_appName__",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "__MSG_appDesc__",
   "minimum_chrome_version": "116",
   "permissions": [

package/extension/popup.html

@@ -94,6 +94,23 @@
       button.link:hover:not(:disabled) { color: #7e98ff; background: none; }
 
       .target-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+      .tabs-list {
+        display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto;
+        margin-top: 8px; scrollbar-width: thin; scrollbar-color: #3a4150 transparent;
+      }
+      .tabs-list::-webkit-scrollbar { width: 6px; }
+      .tabs-list::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 3px; }
+      .tabs-list::-webkit-scrollbar-track { background: transparent; }
+      .tab-item {
+        display: flex; align-items: center; justify-content: space-between; gap: 8px;
+        padding: 6px 8px; background: #15181e; border: 1px solid var(--line);
+        border-radius: 7px; min-height: 44px;
+      }
+      .tab-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; flex: none; }
+      .tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
+      .tab-item-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+      .tab-item-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tab-item-url { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .capture-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
       .capture-row button { padding: 5px 9px; font-size: 11.5px; }
       select {
@@ -148,12 +165,9 @@
 
       <div class="target empty" id="target-block">
         <div class="target-text">
-          <div class="target-title" id="target-title" data-i18n="targetNoneTitle">Вкладка не подключена</div>
-          <div class="target-url" id="target-url" data-i18n="targetNoneUrl">Откройте нужную страницу и подключите её</div>
+          <div class="target-title" data-i18n="targetNoneTitle">Вкладка не подключена</div>
+          <div class="target-url" data-i18n="targetNoneUrl">Откройте нужную страницу и подключите её</div>
         </div>
-        <button class="icon" id="release" hidden data-i18n-title="disconnectTab" title="Отключить вкладку">
-          <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
-        </button>
       </div>
 
       <button class="primary" id="claim" data-i18n="connectTab">Подключить эту вкладку</button>
@@ -161,10 +175,7 @@
 
       <button class="primary" id="claim-more" hidden data-i18n="attachAnother">Подключить ещё вкладку</button>
 
-      <div class="capture-row" id="tabs-row" hidden>
-        <span class="muted" data-i18n="tabsLabel">Вкладки</span>
-        <select id="tabs-select"></select>
-      </div>
+      <div class="tabs-list" id="tabs-list" hidden></div>
 
       <div class="capture-row">
         <span class="muted" id="captured">0</span>

package/extension/popup.js

@@ -59,7 +59,6 @@ function render(status) {
   const dot = $('dot')
   const text = $('connection-text')
   const claim = $('claim')
-  const release = $('release')
   const capture = $('capture')
   const target = $('target-block')
 
@@ -93,35 +92,56 @@ function render(status) {
     text.textContent = t('statusNotConfigured')
   }
 
-  target.classList.toggle('empty', !hasTarget)
-  $('target-title').textContent = hasTarget ? status.target.title || status.target.url : t('targetNoneTitle')
-  $('target-url').textContent = hasTarget ? String(status.target.url || '') : t('targetNoneUrl')
-
-  // Several attached tabs: a compact switcher, nothing else changes.
+  // One block per attached tab: title, address and its own detach cross. The
+  // list scrolls after three blocks so the popup keeps its height.
   const targets = Array.isArray(status.targets) ? status.targets : []
-  const tabsRow = $('tabs-row')
-  const tabsSelect = $('tabs-select')
-  const selfAttached = selfTabId != null && targets.some((item) => item.id === selfTabId)
-  $('claim-more').hidden = !hasTarget || selfAttached
-  if (targets.length > 1) {
-    tabsRow.hidden = false
-    tabsSelect.textContent = ''
-    for (const item of targets) {
-      const option = document.createElement('option')
-      option.value = String(item.id)
-      option.textContent = item.title || item.url || `#${item.id}`
-      option.selected = item.id === status.activeTabId
-      tabsSelect.appendChild(option)
+  target.classList.toggle('empty', targets.length === 0)
+  target.hidden = targets.length > 0
+
+  const list = $('tabs-list')
+  list.hidden = targets.length === 0
+  list.textContent = ''
+  for (const item of targets) {
+    const row = document.createElement('div')
+    row.className = 'tab-item'
+    row.dataset.id = String(item.id)
+    row.title = item.url || ''
+
+    const body = document.createElement('div')
+    body.className = 'tab-item-text'
+    const title = document.createElement('div')
+    title.className = 'tab-item-title'
+    title.textContent = item.title || item.url || `#${item.id}`
+    const address = document.createElement('div')
+    address.className = 'tab-item-url'
+    address.textContent = item.url || ''
+    body.append(title, address)
+
+    const remove = document.createElement('button')
+    remove.className = 'icon'
+    remove.dataset.remove = String(item.id)
+    remove.title = t('disconnectTab')
+    remove.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>'
+
+    // Every tab carries its own numbers: nothing here is "the" tab.
+    const meta = document.createElement('span')
+    meta.className = 'tab-meta'
+    if (item.recording) {
+      const dot = document.createElement('i')
+      dot.className = 'tab-dot'
+      meta.append(dot)
     }
-  } else {
-    tabsRow.hidden = true
+    meta.append(document.createTextNode(String(item.captured ?? 0)))
+    row.append(body, meta, remove)
+    list.append(row)
   }
 
   // Nothing to claim once a tab is bound: the action would be a no-op.
-  claim.hidden = hasTarget
-  claim.disabled = !connected || hasTarget
-  claim.textContent = hasTarget ? t('tabConnected') : t('connectTab')
-  release.hidden = !hasTarget
+  const selfAttached = selfTabId != null && targets.some((item) => item.id === selfTabId)
+  claim.hidden = targets.length > 0
+  claim.disabled = !connected || targets.length > 0
+  claim.textContent = t('connectTab')
+  $('claim-more').hidden = targets.length === 0 || selfAttached
 
   const pick = $('pick')
   pick.classList.toggle('active', status.picking === true)
@@ -273,9 +293,14 @@ $('capture').addEventListener('click', async () => {
   await refresh()
 })
 
-$('release').addEventListener('click', async () => {
-  await send({ type: 'release' })
-  await refresh()
+$('tabs-list').addEventListener('click', async (event) => {
+  const remove = event.target.closest('[data-remove]')
+  if (remove) {
+    event.stopPropagation()
+    await send({ type: 'release', tabId: Number(remove.dataset.remove) })
+    await refresh()
+    return
+  }
 })
 
 $('pick').addEventListener('click', async () => {
@@ -296,11 +321,6 @@ $('pick').addEventListener('click', async () => {
 
 $('claim-more').addEventListener('click', attachCurrentTab)
 
-$('tabs-select').addEventListener('change', async (event) => {
-  const tabId = Number(event.target.value)
-  if (!Number.isFinite(tabId)) return
-  await send({ type: 'use', tabId })
-  await refresh()
-})
+
 
 void init()

package/extension/sw.js

@@ -193,8 +193,10 @@ async function handleMessageInner(message) {
         recording: session.recording,
         captured: session.entries.length
       })),
-      recording: active?.recording ?? false,
-      captured: active?.entries.length ?? 0,
+      // Aggregates: the popup shows every attached tab, so "capture on" means
+      // "at least one is recording" and the counter is the sum.
+      recording: [...state.sessions.values()].some((session) => session.recording),
+      captured: [...state.sessions.values()].reduce((sum, session) => sum + session.entries.length, 0),
       picking: active?.picking === true,
       picks: active?.picks?.length ?? 0
     }
@@ -216,8 +218,13 @@ async function handleMessageInner(message) {
     return { ok: true }
   }
   if (message?.type === 'toggle-capture') {
+    const on = message.on === true
+    if (message.tabId == null || message.tabId === '') {
+      for (const session of state.sessions.values()) await setRecording(session, on)
+      return { ok: true, recording: on, tabs: state.sessions.size }
+    }
     const session = requireSession(message.tabId)
-    return { ok: true, recording: await setRecording(session, message.on === true) }
+    return { ok: true, recording: await setRecording(session, on) }
   }
   return { ok: false, error: `unknown message ${message?.type}` }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-site-bridge",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Chrome/Edge MV3 bridge for DeepSeek Harness: capture page markup (DOM, styles, selectors) and BFF traffic (xhr/fetch with headers and bodies) into a workspace snapshot bundle, drive the page with trusted CDP input, and verify injected scripts. Authorization never leaves the browser and is never written to disk.",
   "icon": "./icon.svg",
   "type": "module",

package/tools/preview-popup.mjs

@@ -21,6 +21,17 @@ const chromePath = process.env.CHROME_PATH ?? 'C:\\Program Files\\Google\\Chrome
 const sleep = (ms) => new Promise((done) => setTimeout(done, ms))
 
 const statuses = {
+  many: {
+    ok: true, configured: true, connected: true, port: 47321, recording: true, captured: 7, selfTabId: 9,
+    activeTabId: 1,
+    target: { id: 1, title: 'Example Store — Products', url: 'https://shop.example/products' },
+    targets: [
+      { id: 1, title: 'Example Store — Products', url: 'https://shop.example/products', recording: true, captured: 7 },
+      { id: 2, title: 'Example Store — Cart', url: 'https://shop.example/cart', recording: false, captured: 0 },
+      { id: 3, title: 'Example Store — Checkout', url: 'https://shop.example/checkout', recording: false, captured: 0 },
+      { id: 4, title: 'Example Store — Orders', url: 'https://shop.example/orders', recording: false, captured: 0 }
+    ]
+  },
   'connected-one': {
     ok: true, configured: true, connected: true, port: 47321, recording: false, captured: 0, selfTabId: 1,
     activeTabId: 1,