thinkpool-pair 0.7.70 → 0.7.72

package/bridge.mjs

@@ -39,7 +39,7 @@ import { createClient } from '@supabase/supabase-js'
 import { startClaudeSession } from './claude-session.mjs'
 import { turnInFlight } from './update-gate.mjs'
 import { saveSession, flushSession, deleteSession, loadAll, canResume, loadPtyId, savePtyId, loadNames, saveNames } from './session-store.mjs'
-import { stampEvent, makeSeqCounter, maxSeq, seqable, capReplayEvents, chunkReplayEvents } from './event-id.mjs'
+import { stampEvent, makeSeqCounter, maxSeq, seqable, capReplayEvents, chunkReplayEvents, boundEventForBroadcast, inlineImageBlocks } from './event-id.mjs'
 import { makeThrottledTrack } from './presence.mjs'
 
 // Public client creds (the same anon values the web app ships — safe to embed).
@@ -462,17 +462,6 @@ const webPeerPresent = () => {
 // still delivers instead of taking the channel down. capReplayEvents bounds bulk
 // replays before they reach here; this catches the single-event case + is the alarm.
 const FRAME_SOFT_LIMIT = 200000
-// Truncate the bulky string fields of ONE event in place (a giant tool_result / cat of
-// a big file / mockup blob). Keeps a head + a marker so the transcript stays readable.
-const truncEventFields = (evt) => {
-  if (!evt || typeof evt !== 'object') return
-  for (const k of ['text', 'content', 'output', 'stdout', 'stderr', 'input']) {
-    const v = evt[k]
-    if (typeof v === 'string' && v.length > 20000) {
-      evt[k] = v.slice(0, 20000) + `\n…[truncated ${v.length - 20000} bytes — too large to broadcast]`
-    }
-  }
-}
 const defendFrame = (event, payload) => {
   let json
   try { json = JSON.stringify(payload) } catch { return payload }
@@ -480,15 +469,15 @@ const defendFrame = (event, payload) => {
   process.stderr.write(`\n  ⚠ oversized ${event} frame: ${json.length}B (term ${String(payload?.term || '?').slice(0, 8)}) — defanging so Realtime doesn't drop it\n`)
   let p
   try { p = JSON.parse(json) } catch { return payload }
-  // single live event (code-event)
-  if (p.evt && typeof p.evt === 'object') truncEventFields(p.evt)
-  // replay batch (code-replay): truncate each event's bulky fields…
+  // single live event (code-event): bound it (truncates strings, strips oversized
+  // image/content blocks → render-safe placeholder).
+  if (p.evt && typeof p.evt === 'object') p.evt = boundEventForBroadcast(p.evt, 100000)
+  // replay batch (code-replay): bound every event…
   if (Array.isArray(p.events)) {
-    p.events.forEach(truncEventFields)
-    // …and if a frame is STILL over the limit (bulk hidden in fields we don't truncate),
-    // drop the OLDEST events until it fits — keep the newest so the client's seqHi still
-    // advances to current. classifyReplay accepts the resulting seq jump; older events are
-    // covered by the DB transcript snapshot.
+    p.events = p.events.map((e) => boundEventForBroadcast(e, 100000))
+    // …and if a frame is STILL over the limit, drop the OLDEST events until it fits —
+    // keep the newest so the client's seqHi still advances to current. classifyReplay
+    // accepts the resulting seq jump; older events are covered by the DB transcript snapshot.
     let guard = 0
     while (p.events.length > 1 && JSON.stringify(p).length > FRAME_SOFT_LIMIT && guard++ < 10000) p.events.shift()
   }
@@ -640,6 +629,64 @@ const ownerOutbox = (kind, id) => path.join(MOCKUP_OUTBOX, kind, id)
 // back to the old "first live session/terminal" heuristic for it alone.
 watchOutbox(MOCKUP_OUTBOX, () => [...sessions.keys()][0] || attachedId || [...terms.keys()][0])
 
+// ── agent image hand-off ───────────────────────────────────────────
+// A screenshot the agent produces arrives as a tool_result whose content carries
+// an inline base64 image (100-600KB+). That overflows Realtime's broadcast frame —
+// it can ride neither a live `code-event` nor a replay (boundEventForBroadcast
+// strips it to a text placeholder so delivery survives). So BEFORE the event is
+// logged/broadcast we lift each image OUT: upload the bytes to Storage (mirrors the
+// mockup path → /api/code-image, service-key write) and rewrite the block to a tiny
+// { type:'image', path } ref. The persisted log + every replay then carry the path,
+// never base64; the web client mints a signed URL on render (structured.jsx, same
+// as the mockup thumbs). Spec: docs/specs/2026-06-26-code-agent-images.md
+async function uploadCodeImage(term, cid, im) {
+  const headers = { 'Content-Type': 'application/json' }
+  if (codeAuthToken) headers.Authorization = `Bearer ${codeAuthToken}`
+  const res = await fetch(`${WEB_BASE}/api/code-image`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ code: room, term, cid, idx: im.idx, mediaType: im.mediaType, b64: im.b64 }),
+  })
+  if (!res.ok) throw new Error(`code-image ${res.status}`)
+  const { path } = await res.json()
+  if (!path) throw new Error('code-image: no path')
+  return path
+}
+// Defer an image-bearing tool_result behind a per-session upload chain (preserves
+// arrival order among images), then log + broadcast the URL-only event through the
+// normal path. pushLog is the single seq-assignment point, so the deferred event
+// still gets a contiguous seq at chain-resolution time; its ts was stamped at
+// arrival, so it sorts into place. On upload failure the block degrades to the same
+// render-safe text placeholder — base64 is NEVER logged, broadcast, or persisted.
+function deferImageEvent(entry, id, evt, imgs, emitTail) {
+  entry.imageChain = (entry.imageChain || Promise.resolve()).then(async () => {
+    for (const im of imgs) {
+      try {
+        const path = await uploadCodeImage(id, evt.cid, im)
+        evt.content[im.idx] = { type: 'image', path, mediaType: im.mediaType }
+      } catch (e) {
+        process.stderr.write(`\n  ◇ screenshot upload failed (${e?.message || e}).\n`)
+        evt.content[im.idx] = { type: 'text', text: '[screenshot omitted — upload failed]' }
+      }
+    }
+    emitTail(evt)
+  }).catch(() => {})
+}
+// Fire-and-forget: drop a closed term's screenshots from Storage so they don't
+// outlive the room (COGS). Per-term scope — never touches a sibling term's images.
+function fireImageCleanup(term) {
+  if (!term) return
+  try {
+    const headers = { 'Content-Type': 'application/json' }
+    if (codeAuthToken) headers.Authorization = `Bearer ${codeAuthToken}`
+    fetch(`${WEB_BASE}/api/code-image-cleanup`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ code: room, term }),
+    }).catch(() => { /* best-effort — the TTL sweep mops up orphans */ })
+  } catch { /* noop */ }
+}
+
 // ── shared-PTY geometry ───────────────────────────────────────────
 // The attached PTY is CAPPED at 120×32, never pinned (2026-06-11).
 // Mangling physics: a PTY *wider/taller* than the host's window forces
@@ -862,10 +909,23 @@ function openStructured({ id, model, resume, log, commands, mode }) {
         entry.compacting = false
         bcast('code-event', { term: id, evt: { kind: 'compact', status: 'done', ts: Date.now() } })
       }
-      if (!chrome) pushLog(entry, evt)
-      bcast('code-event', { term: id, evt })
-      printLocal(evt)
-      if (!chrome) persist()
+      // Single tail: stamp into the log (transcript kinds only), broadcast live,
+      // print locally, persist. Shared so a deferred image event re-enters it once
+      // its base64 has been lifted to a Storage path (see deferImageEvent).
+      const emitTail = (e) => {
+        if (!chrome) pushLog(entry, e)
+        bcast('code-event', { term: id, evt: e })
+        printLocal(e)
+        if (!chrome) persist()
+      }
+      // A tool_result carrying an inline base64 image can't ride a broadcast frame
+      // (live OR replay). Lift it to Storage FIRST, then emit the URL-only event —
+      // so the persisted log + replay carry a path, never base64. Order/seq stay
+      // intact: pushLog (inside emitTail) is the single seq point, called when the
+      // upload resolves. Other kinds emit synchronously, unchanged.
+      const imgs = inlineImageBlocks(evt)
+      if (imgs.length) { deferImageEvent(entry, id, evt, imgs, emitTail); return }
+      emitTail(evt)
     },
     requestPermission: (req) => new Promise((resolve) => {
       // Keep the broadcast payload with the resolver so a reconnect can re-send it
@@ -913,6 +973,7 @@ function endStructured(id) {
     try { s.mockupWatcher?.close() } catch { /* noop */ }
     sessions.delete(id)
     bcast('term-exit', { id })
+    fireImageCleanup(id)   // drop this term's screenshots from Storage (COGS)
   }
   deleteSession(room, id)   // remove <id>.json so loadAll() won't bring it back
   if (s) announce()
@@ -1041,7 +1102,11 @@ channel
       // (the seq-divergence freeze). Replay the full recent tail and flag `reset` so the
       // client rebuilds its cursor from our authoritative log instead of trusting its own.
       const ahead = from > mx
-      const tail = (from > 0 && !ahead) ? s.log.filter((e) => e.seq == null || e.seq > from) : s.log
+      const rawTail = (from > 0 && !ahead) ? s.log.filter((e) => e.seq == null || e.seq > from) : s.log
+      // Bound each event so no single one (e.g. a 592KB inline-image tool_result) can
+      // overflow a frame on its own — chunkReplayEvents only bounds the SUM, not a lone
+      // giant event. boundEventForBroadcast clones+defangs only the oversized ones.
+      const tail = rawTail.map((e) => boundEventForBroadcast(e))
       // Chunk the tail into ORDERED under-budget frames (A): the full log on a fresh reload
       // (empty cursor) is multi-MB and a single frame would be dropped by Realtime, freezing
       // the terminal. chunkReplayEvents splits it so nothing in the recent window is lost;

package/event-id.mjs

@@ -124,3 +124,56 @@ export function chunkReplayEvents(events, budget = REPLAY_BYTE_BUDGET, maxChunks
   // to oldest-first so classifyReplay applies them contiguously in arrival order.
   return chunksRev.reverse().map((c) => c.reverse())
 }
+
+// Bound a SINGLE event so it can never overflow a broadcast frame on its own. The worst
+// offenders are tool_results carrying inline base64 IMAGES (a 592KB screenshot block) —
+// these can't ride a size-capped Realtime broadcast at all (live OR replay). Truncate
+// bulky string fields AND replace oversized content blocks (images, huge text) with a
+// compact, render-SAFE text placeholder — preserving identity (kind/seq/cid/ts/toolUseId)
+// so dedup, ordering, seqHi, and turn structure stay intact. Returns the event UNCHANGED
+// (no clone) when it's already small; clones before mutating so the persisted log is never
+// touched. (Proper fix for inline images = upload to storage + broadcast a URL — separate.)
+export const PER_EVENT_CAP = 180000
+const truncStr = (s) => s.slice(0, 20000) + `\n…[truncated ${s.length - 20000} bytes — too large to broadcast]`
+export function boundEventForBroadcast(evt, cap = PER_EVENT_CAP) {
+  if (!evt || typeof evt !== 'object') return evt
+  let json
+  try { json = JSON.stringify(evt) } catch { return evt }
+  if (json.length <= cap) return evt
+  const out = { ...evt }
+  for (const k of ['text', 'output', 'stdout', 'stderr', 'input']) {
+    if (typeof out[k] === 'string' && out[k].length > 20000) out[k] = truncStr(out[k])
+  }
+  if (typeof out.content === 'string' && out.content.length > 20000) out.content = truncStr(out.content)
+  else if (Array.isArray(out.content)) {
+    out.content = out.content.map((b) => {
+      if (!b || typeof b !== 'object') return b
+      if (JSON.stringify(b).length <= 20000) return b
+      if (b.type === 'image') return { type: 'text', text: '[image omitted from replay — too large to broadcast; open the live session to view]' }
+      if (typeof b.text === 'string') return { ...b, text: truncStr(b.text) }
+      return { type: 'text', text: `[${b.type || 'content'} omitted — too large to broadcast]` }
+    })
+  }
+  out._bounded = true
+  return out
+}
+
+// Detect inline base64 IMAGE blocks on a tool_result event (a screenshot the agent
+// produced — content:[{type:'image', source:{type:'base64', media_type, data}}]).
+// Returns [{ idx, b64, mediaType }] per base64 image block, or [] when none. Pure +
+// import-safe so bridge/test-seq.mjs can exercise it. The bridge uses this to lift
+// images OUT of the event (upload to Storage, swap to a {type:'image', path} ref)
+// BEFORE the base64 ever enters the persisted log or a broadcast frame — so a
+// screenshot renders live AND in replay instead of being stripped to a placeholder
+// by boundEventForBroadcast (which stays the fallback for any block we don't lift).
+export function inlineImageBlocks(evt) {
+  if (!evt || evt.kind !== 'tool_result' || !Array.isArray(evt.content)) return []
+  const out = []
+  evt.content.forEach((b, idx) => {
+    if (b && b.type === 'image' && b.source && b.source.type === 'base64' &&
+        typeof b.source.data === 'string' && b.source.data.length) {
+      out.push({ idx, b64: b.source.data, mediaType: b.source.media_type || 'image/png' })
+    }
+  })
+  return out
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thinkpool-pair",
-  "version": "0.7.70",
+  "version": "0.7.72",
   "description": "Share a local coding-agent CLI (Claude Code, Codex, Gemini, Aider, …) into a ThinkPool Code room, live.",
   "type": "module",
   "bin": {