@xulongzhe/clawbench-desktop-linux-x64-payload 0.130.0 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xulongzhe/clawbench-desktop-linux-x64-payload",
-  "version": "0.130.0",
+  "version": "0.132.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/clawbench-dev/clawbench.git"

package/payload.json

@@ -1,4 +1,4 @@
 {
   "electron": "44.4.3",
-  "shell": "sha256-1cb428de31b5f0bc3d7bc1630d517ca988f097e571284eae2acc3034038dc6a8"
+  "shell": "sha256-8f8a03cd18c8ee4b2e71da17976967d66f4d3c1fe784b5724fe1f14596868002"
 }

package/resources/annotate.html

@@ -0,0 +1,335 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ClawBench 标注</title>
+    <!--
+      Annotation overlay document.
+
+      Loaded by main/annotateOverlay.ts into a transparent, always-on-top window
+      that covers the shared display. It draws on a canvas over a fully
+      transparent page, so the desktop underneath stays visible.
+
+      Every stroke is ALSO reported to the main process. On Windows/macOS the
+      window is excluded from the screen capture and those frames are what the
+      audience draws from; on Linux the window is part of the picture and the
+      main process drops them (forwarding would double every stroke). The page
+      does not need to know which — it always reports.
+
+      `?hideBar=0` (set by main/annotateOverlay.ts where the window is excluded
+      from the capture) keeps the toolbar on screen permanently: the audience
+      cannot see it there, so fading it out would only hide the tool from the
+      person using it. On Linux the bar IS part of the shared picture, so it
+      still fades — and any of these brings it back: drawing, moving the pointer
+      near the bottom edge, focusing the window, or clicking 标注画面 again in
+      the meeting footer (relayed as `annotate:wake`).
+
+      Self-contained on purpose: no bundler, no fonts, no network. The window
+      must paint the instant it is shown.
+    -->
+    <style>
+      :root {
+        color-scheme: dark;
+        --bar-bg: rgba(22, 24, 28, 0.92);
+        --bar-border: rgba(255, 255, 255, 0.16);
+        --bar-fg: #f5f6f8;
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: transparent;
+        cursor: crosshair;
+        user-select: none;
+        -webkit-user-select: none;
+        font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      }
+      #ink {
+        position: fixed;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        touch-action: none;
+      }
+      /* The toolbar floats at the bottom and fades out while the publisher is
+         drawing, so it does not sit in the middle of the shared picture (it is
+         visible to the audience on platforms where the window is captured).
+         See the `hideBar` query flag above: where it is NOT captured it stays. */
+      #bar {
+        position: fixed;
+        left: 50%;
+        bottom: 24px;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        background: var(--bar-bg);
+        border: 1px solid var(--bar-border);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+        transition: opacity 0.18s ease;
+        cursor: default;
+      }
+      #bar.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+      #bar button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 30px;
+        height: 30px;
+        padding: 0 8px;
+        border: none;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--bar-fg);
+        font-size: 12px;
+        cursor: pointer;
+      }
+      #bar button:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+      #bar button.on {
+        background: rgba(88, 166, 255, 0.85);
+        color: #fff;
+      }
+      .swatch {
+        width: 18px;
+        height: 18px;
+        min-width: 18px;
+        padding: 0;
+        border-radius: 50%;
+        border: 2px solid transparent;
+      }
+      .swatch.on {
+        border-color: #fff;
+      }
+      .sep {
+        width: 1px;
+        height: 18px;
+        background: var(--bar-border);
+      }
+      #close {
+        background: rgba(207, 34, 46, 0.85);
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="ink"></canvas>
+    <div id="bar">
+      <button id="pen" class="on" title="画笔">✎</button>
+      <button id="laser" title="激光笔">◉</button>
+      <span class="sep"></span>
+      <button class="swatch on" data-color="#ff3b30" style="background: #ff3b30" title="红"></button>
+      <button class="swatch" data-color="#ffd60a" style="background: #ffd60a" title="黄"></button>
+      <button class="swatch" data-color="#34c759" style="background: #34c759" title="绿"></button>
+      <button class="swatch" data-color="#0a84ff" style="background: #0a84ff" title="蓝"></button>
+      <span class="sep"></span>
+      <button id="undo" title="撤销">↶</button>
+      <button id="clear" title="清空">✕</button>
+      <button id="close" title="关闭标注">关闭</button>
+    </div>
+    <script>
+      (() => {
+        const canvas = document.getElementById('ink')
+        const ctx = canvas.getContext('2d')
+        const bar = document.getElementById('bar')
+        const host = window.AnnotateHost || { ink() {}, close() {} }
+        /**
+         * Whether the bar may fade out. False when the overlay is excluded from
+         * the capture: the audience cannot see the bar there, so hiding it only
+         * makes the tool vanish for the host (and a faded bar cannot be
+         * clicked — the window is the whole screen, there is nothing else to
+         * click).
+         */
+        const autoHideBar = new URLSearchParams(location.search).get('hideBar') !== '0'
+
+        let mode = 'pen'
+        let color = '#ff3b30'
+        const width = 4
+        /** Finished strokes, in normalised 0..1 coordinates. */
+        let strokes = []
+        let current = null
+        /** Laser marker: {x, y, at} or null. */
+        let laser = null
+        let dpr = 1
+
+        function resize() {
+          dpr = window.devicePixelRatio || 1
+          canvas.width = Math.round(window.innerWidth * dpr)
+          canvas.height = Math.round(window.innerHeight * dpr)
+          redraw()
+        }
+
+        function drawStroke(s) {
+          if (s.points.length === 0) return
+          ctx.strokeStyle = s.color
+          ctx.lineWidth = width * dpr
+          ctx.lineCap = 'round'
+          ctx.lineJoin = 'round'
+          ctx.beginPath()
+          const p0 = s.points[0]
+          ctx.moveTo(p0.x * canvas.width, p0.y * canvas.height)
+          for (let i = 1; i < s.points.length; i++) {
+            const p = s.points[i]
+            ctx.lineTo(p.x * canvas.width, p.y * canvas.height)
+          }
+          ctx.stroke()
+        }
+
+        function redraw() {
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
+          for (const s of strokes) drawStroke(s)
+          if (current) drawStroke(current)
+          if (laser) {
+            ctx.beginPath()
+            ctx.fillStyle = 'rgba(255, 59, 48, 0.9)'
+            ctx.arc(laser.x * canvas.width, laser.y * canvas.height, 9 * dpr, 0, Math.PI * 2)
+            ctx.fill()
+          }
+        }
+
+        function send(msg) {
+          host.ink(JSON.stringify(msg))
+        }
+
+        function normalise(ev) {
+          return {
+            x: Math.min(1, Math.max(0, ev.clientX / window.innerWidth)),
+            y: Math.min(1, Math.max(0, ev.clientY / window.innerHeight)),
+          }
+        }
+
+        function hideBarSoon() {
+          if (!autoHideBar) return
+          clearTimeout(hideBarSoon.timer)
+          hideBarSoon.timer = setTimeout(() => bar.classList.add('hidden'), 2600)
+        }
+
+        function wake() {
+          clearTimeout(hideBarSoon.timer)
+          bar.classList.remove('hidden')
+          hideBarSoon()
+        }
+
+        canvas.addEventListener('pointerdown', (ev) => {
+          canvas.setPointerCapture(ev.pointerId)
+          wake()
+          const p = normalise(ev)
+          if (mode === 'laser') {
+            laser = { x: p.x, y: p.y }
+            send({ t: 'laser', x: p.x, y: p.y, on: true })
+            redraw()
+            return
+          }
+          current = { color, points: [p] }
+          send({ t: 'ink', phase: 'start', x: p.x, y: p.y, color, width })
+          redraw()
+        })
+
+        canvas.addEventListener('pointermove', (ev) => {
+          if (mode === 'laser') {
+            if (!laser) return
+            const p = normalise(ev)
+            laser = { x: p.x, y: p.y }
+            send({ t: 'laser', x: p.x, y: p.y, on: true })
+            redraw()
+            return
+          }
+          if (!current) return
+          const p = normalise(ev)
+          current.points.push(p)
+          send({ t: 'ink', phase: 'move', x: p.x, y: p.y, color, width })
+          redraw()
+        })
+
+        function endStroke(ev) {
+          if (mode === 'laser') {
+            if (!laser) return
+            send({ t: 'laser', x: 0, y: 0, on: false })
+            laser = null
+            redraw()
+            return
+          }
+          if (!current) return
+          const p = ev && ev.clientX !== undefined ? normalise(ev) : current.points[current.points.length - 1]
+          send({ t: 'ink', phase: 'end', x: p.x, y: p.y, color, width })
+          strokes.push(current)
+          current = null
+          redraw()
+        }
+
+        canvas.addEventListener('pointerup', endStroke)
+        canvas.addEventListener('pointercancel', endStroke)
+
+        document.getElementById('pen').addEventListener('click', (e) => {
+          mode = 'pen'
+          e.currentTarget.classList.add('on')
+          document.getElementById('laser').classList.remove('on')
+          wake()
+        })
+        document.getElementById('laser').addEventListener('click', (e) => {
+          mode = 'laser'
+          e.currentTarget.classList.add('on')
+          document.getElementById('pen').classList.remove('on')
+          wake()
+        })
+        for (const sw of document.querySelectorAll('.swatch')) {
+          sw.addEventListener('click', () => {
+            color = sw.dataset.color
+            for (const other of document.querySelectorAll('.swatch')) other.classList.remove('on')
+            sw.classList.add('on')
+            mode = 'pen'
+            document.getElementById('pen').classList.add('on')
+            document.getElementById('laser').classList.remove('on')
+            wake()
+          })
+        }
+        document.getElementById('undo').addEventListener('click', () => {
+          strokes.pop()
+          send({ t: 'ink-undo' })
+          redraw()
+          wake()
+        })
+        document.getElementById('clear').addEventListener('click', () => {
+          strokes = []
+          current = null
+          send({ t: 'ink-clear' })
+          redraw()
+          wake()
+        })
+        document.getElementById('close').addEventListener('click', () => host.close())
+
+        document.addEventListener('keydown', (ev) => {
+          if (ev.key === 'Escape') host.close()
+          if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'z') {
+            strokes.pop()
+            send({ t: 'ink-undo' })
+            redraw()
+          }
+        })
+
+        // Keep the toolbar reachable without a permanent strip of chrome: any
+        // pointer movement near the bottom edge brings it back. The meeting
+        // footer's 标注画面 button does the same from outside (onWake), and so
+        // does focusing the window — the host may come back from another app.
+        document.addEventListener('pointermove', (ev) => {
+          if (ev.clientY > window.innerHeight - 120) wake()
+        })
+        window.addEventListener('focus', wake)
+        if (typeof host.onWake === 'function') host.onWake(wake)
+
+        window.addEventListener('resize', resize)
+        resize()
+        hideBarSoon()
+      })()
+    </script>
+  </body>
+</html>

package/resources/floating.html

@@ -38,11 +38,28 @@
        a disc whenever the window is left taller than the content. */
     height: auto;
     padding-top: 5px; padding-bottom: 5px;
-    /* fit-content, not the default block width: the page reports its natural
-       size so the window can hug the capsule, and a box stretched to the window
-       would measure the window instead — the capsule could then grow but never
-       shrink back after the counters drop to zero. */
-    width: fit-content; max-width: 100%;
+    /* max-content + no shrink, NOT `fit-content` and NOT `max-width: 100%`.
+
+       The page reports its natural size so the window can hug the capsule
+       (`measure()` reads `scrollWidth`). Both of those older declarations clamp
+       the pill to the CURRENT window width, and that makes the measurement
+       self-confirming: while the window is too narrow the pill is squeezed, its
+       right padding is eaten by the overflowing row, `scrollWidth` then reports
+       the squeezed width, and the page asks for exactly the width it already
+       has — the capsule can never grow back.
+
+       Measured (Playwright, the bundled Chromium, "执行中 3 · 未读 2"): growing
+       from a 120px window converged on 162px instead of 177px, leaving the last
+       glyph 0.4px past the pill's edge — the text visibly touching / spilling
+       over the capsule wall. With max-content it requests 177px and keeps the
+       documented 15px text gap, and it still shrinks (400 → 88) when the
+       counters drop to zero.
+
+       `flex: 0 0 auto` is the same invariant from the other side: `#pill` is a
+       flex item of `#hit`, so without it the flex base size could still be
+       shrunk and `max-content` would be advisory only. */
+    width: max-content;
+    flex: 0 0 auto;
     display: flex; align-items: center; gap: 7px;
     /* Asymmetric on purpose. Do NOT "fix" this back to symmetric.
 
@@ -64,18 +81,29 @@
     border-radius: 999px;
     background: var(--bg);
     color: var(--text);
-    box-shadow: 0 6px 22px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .07) inset;
+    /* Inset ring ONLY — no drop shadow, ever.
+
+       The window is sized to the pill plus a 4px margin (`measure()` reports
+       `scrollWidth + 8`), and a transparent window is still rectangular to the
+       compositor. A shadow with any blur radius therefore cannot fall away: it
+       is clipped at the window edge and paints that 4px ring, which reads as a
+       grey semi-transparent box framing the capsule on anything but a dark
+       wallpaper. The surround must stay fully transparent — the pill's own
+       translucent background is the only thing that should be visible. */
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset;
     /* Deliberately NOT `-webkit-app-region: drag`: that hands the surface to the
        OS as a title bar, so right-click opens the Windows system menu instead of
        ours and no DOM click reaches the page. Dragging is driven from the main
        process instead (see main/floating.ts). */
     transition: transform .12s ease, box-shadow .12s ease;
   }
-  body.hover #pill { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.12) inset; }
+  /* Feedback without a halo: the lift is kept, the ring just brightens. */
+  body.hover #pill { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset; }
   /* Awaiting approval is the one state worth flagging on the frame itself: a
      blocked session is otherwise indistinguishable from a running one at a
-     glance from across the desk. */
-  body.needs-me #pill { box-shadow: 0 6px 22px rgba(0, 0, 0, .38), 0 0 0 1px var(--pending); }
+     glance from across the desk. The 1px ring follows the pill's own outline —
+     unlike a blurred shadow it never paints the margin as a box. */
+  body.needs-me #pill { box-shadow: 0 0 0 1px var(--pending); }
 
   #logo {
     flex: 0 0 auto;