ccdeck 3.38.6 → 3.39.1

package/dist/web/index.html

@@ -49,23 +49,25 @@
          Vite leaves untouched in the built HTML (it rewrites only scripts with
          a src or type="module"). Deliberately dependency-free, and kept honest
          against resolveTheme() in theme.ts by theme-first-paint.test.ts, which
-         runs this exact text. With nothing stored, the OS decides (#885). -->
+         runs this exact text. With nothing stored, Rider Black is selected. -->
     <script>
       (function () {
-        var stored = null, light = false;
+        // Generated from JSON alongside the CSS and Settings catalog.
+        var themes = /* theme-ids:start */ ["light","dark","rider-black","vscode-black","omarchy","matrix","black-contrast","white-contrast","catppuccin-mocha"] /* theme-ids:end */;
+        var lightThemes = /* theme-light-ids:start */ ["light","white-contrast"] /* theme-light-ids:end */;
+        var stored = null;
         // `window.localStorage` is a GETTER that throws where site data is
         // blocked, so the property read is inside the try, not just getItem.
         // A refused store must cost a preference and never the boot.
         try { stored = window.localStorage.getItem("agent-dag.theme"); } catch (e) {}
-        // No choice stored: follow the OS. Guarded the same way, because an
-        // embed without matchMedia must not stop the parse either.
-        try { light = window.matchMedia("(prefers-color-scheme: light)").matches; } catch (e) {}
-        document.documentElement.setAttribute("data-theme",
-          stored === "light" || (stored !== "dark" && light) ? "light" : "dark");
+        // Rider Black is the default; saved choices always win.
+        var theme = themes.indexOf(stored) >= 0 ? stored : "rider-black";
+        document.documentElement.setAttribute("data-theme", theme);
+        document.documentElement.setAttribute("data-color-scheme", lightThemes.indexOf(theme) >= 0 ? "light" : "dark");
       })();
     </script>
-    <script type="module" crossorigin src="/assets/index-BKLXyjIh.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DnJPDhs9.css">
+    <script type="module" crossorigin src="/assets/index-DGMP4S3t.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-WHHCRAB3.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccdeck",
-  "version": "3.38.6",
+  "version": "3.39.1",
   "description": "Local dashboard for Claude Code and Codex CLI sessions: which Claude Code session needs input, every tool call and Claude Code subagent live, token cost and quota, several Claude accounts. Run npx ccdeck.",
   "type": "module",
   "bin": {
@@ -18,13 +18,15 @@
     "LICENSING.md"
   ],
   "scripts": {
+    "themes:generate": "node scripts/build-themes.mjs",
+    "themes:check": "node scripts/build-themes.mjs --check",
     "dev:web": "vite",
     "dev:server": "node src/server/index.mjs",
     "start": "node bin/agent-dag.js",
-    "build": "vite build",
+    "build": "node scripts/build-radar-codec.mjs && vite build",
     "test": "vitest run",
-    "prepublishOnly": "vite build",
-    "prepack": "vite build",
+    "prepublishOnly": "npm run build",
+    "prepack": "npm run build",
     "typecheck": "tsc --noEmit -p tsconfig.build.json"
   },
   "engines": {
@@ -77,7 +79,11 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "dagre": "^0.8.5",
+    "esbuild": "0.25.12",
     "hls.js": "^1.7.3",
+    "hpack.js": "2.1.6",
+    "long": "5.3.2",
+    "protobufjs": "8.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reactflow": "^11.11.4",

package/release-notes.json

@@ -75,6 +75,34 @@
     "3.38.2",
     "3.38.6"
   ],
+  "3.39.1": [
+    {
+      "title": "🎨 More themes, with clearer contrast",
+      "body": "Choose Omarchy, Matrix, Black Contrast, White Contrast or Catppuccin Mocha in Settings › Appearance. Fresh installations start with Rider Black; your saved theme choice is preserved."
+    },
+    {
+      "title": "A little more room on the canvas",
+      "body": "The minimap is smaller, leaving more room for the character and your sessions. Undo and Resume now sit beside each other at the bottom of the canvas. Telemetry Radar is marked Beta while it is being tested and improved."
+    }
+  ],
+  "3.39.0": [
+    {
+      "title": "🔎 Inspect Claude Code telemetry on macOS",
+      "body": "Telemetry Radar shows Claude Code's configured telemetry and can inspect traffic at destinations you choose. When settings are absent, it can show observed connections separately; a connection alone does not prove telemetry or reveal message contents. Capture starts only after you run its generated command in Terminal, which uses macOS tcpdump with administrator permission. Captured telemetry can contain prompt or response content, and other apps sending to the same destination may appear too. Messages stay in ccdeck's memory for up to five minutes; no capture file is written."
+    },
+    {
+      "title": "🧭 Open panels from the edges",
+      "body": "Open the session list, Claude accounts, Usage, This machine, Usage history and Browser Watch from the window edges. You can keep several panels open beside the canvas; on a phone, the same controls sit in a bottom dock."
+    },
+    {
+      "title": "More control while you work",
+      "body": "Turn off single-key shortcuts if typed letters should not control the deck, see each stage while adding a Claude account, and undo a recent rearrangement. The topbar also names the Claude Code session waiting on you."
+    },
+    {
+      "title": "🎨 Two new dark themes",
+      "body": "Choose Rider Black or VS Code Black in Settings › Appearance. Both add a darker canvas with flatter panels and distinct focus accents; your existing Light or Dark choice stays as it was."
+    }
+  ],
   "3.38.5": [
     {
       "title": "🔧 Settings are in one place now",

package/src/server/cswap-admin.mjs

@@ -282,6 +282,36 @@ export function newSlot(before, after) {
   return fresh.length === 1 ? fresh[0] : null;
 }
 
+/**
+ * The slot the account that just signed in occupies after `cswap add`, or null.
+ *
+ * ASKED OF THE IDENTITY, NOT OF WHAT IS NEW. `before` is the store as it was
+ * when the sign-in started, minutes ago, and a share or a Local network round
+ * can land other accounts in between. Reading "the one new slot" then named
+ * somebody else's slot for a re-sign-in of an account already here, and found
+ * nothing for a new account that arrived beside another.
+ *
+ * A NEW slot with this address still comes first, because one address under
+ * two organizations is two accounts: signing into the second organization of
+ * an address the store already holds adds a slot, and slotOf — which falls
+ * back to the first slot with the address when the CLI names no organization
+ * — would answer with the old one and call the new account a refresh. A slot
+ * whose organization the store does not record is not ruled out by one.
+ *
+ * newSlot is the last answer, for a store that keeps no address for the slot
+ * — the case it was written for — since nothing else can point at it then.
+ */
+export function signedInSlot(before, after, identity) {
+  const had = new Set(before.slots);
+  const org = identity?.orgId ?? "";
+  const fresh = after.slots.filter(s =>
+    !had.has(s)
+    && sameAddress(after.emails[s], identity?.email)
+    && (!org || !after.orgs?.[s] || after.orgs[s] === org));
+  if (fresh.length === 1) return fresh[0];
+  return slotOf(after, identity) ?? newSlot(before, after);
+}
+
 const sameAddress = (a, b) => String(a ?? "").trim().toLowerCase() === String(b ?? "").trim().toLowerCase();
 
 /**
@@ -379,9 +409,14 @@ let _starting = null;
 
 export function loginState() {
   if (!_login) return { state: "idle" };
-  const { state, url, error, account, expiresAt, restore } = _login;
+  const { state, step, url, error, account, expiresAt, restore } = _login;
   return {
     state, url: url ?? null, error: error ?? null, account: account ?? null, expiresAt: expiresAt ?? null,
+    // Where inside `registering` the flow is — see LOGIN_STEPS. Null before it
+    // and on a failure that happened before it, and left on the step that was
+    // running when anything after it failed, which is how the dialog knows
+    // which of its stages to mark.
+    step: step ?? null,
     // The sign-in's OTHER outcome, and the one it used to drop (#951). `true`
     // until a restore has actually been attempted, because every state before
     // that — awaiting_url, awaiting_code, registering — has moved nothing that
@@ -391,6 +426,23 @@ export function loginState() {
   };
 }
 
+/**
+ * The points a sign-in passes through after the browser said yes, in order.
+ *
+ * `registering` covers all three and used to be reported as one state, so the
+ * dialog could only say "registering…" for however long they took together —
+ * an identity check, a `cswap add` that may first wait its turn on the store
+ * lock, and a `cswap switch` back to the account the user was on. Each is set
+ * on the flow at the moment it begins, never ahead of it, so a dialog that
+ * shows the step is showing what the deck is doing rather than a guess.
+ *
+ *   confirm  the claude CLI is asked who signed in (and, for a pasted code,
+ *            first takes the code)
+ *   save     claude-swap records the account
+ *   restore  the account the user was working in is put back in front
+ */
+export const LOGIN_STEPS = Object.freeze(["confirm", "save", "restore"]);
+
 /** The restore verdict, in the two fields a caller reads. Written once here so
  *  the login route, the cancel result and the dialog's type cannot drift. */
 function restoreFields(restore) {
@@ -624,6 +676,7 @@ async function spawnLogin(email) {
     // code posted while the question is out would otherwise register the same
     // login a second time, with a second `cswap add` racing this one.
     flow.state = "registering";
+    flow.step = "confirm";
     const identity = await currentIdentity();
     if (flow !== _login) return;
     // A clean exit with somebody logged in is a completed sign-in, including
@@ -693,6 +746,10 @@ function loginFailureText(r) {
  * with; the done handler simply drops it.
  */
 async function registerSignedIn(flow, identity) {
+  // Before the lock, not inside it: waiting for another change to the store to
+  // finish is part of saving this one, and the dialog says so rather than
+  // going on claiming the sign-in is still being confirmed.
+  flow.step = "save";
   return withStoreLock(async () => {
     const add = await run(await cswapBin(), ["add"], { timeout: CSWAP_TIMEOUT_MS });
     if (!add.ok) {
@@ -707,10 +764,9 @@ async function registerSignedIn(flow, identity) {
     }
 
     const after = await readStore();
-    const slot = newSlot(flow.before, after);
-    // No new slot means the account was already managed and cswap refreshed its
-    // credentials in place. That is a success with a different sentence.
-    const num = slot ?? slotOf(after, identity) ?? null;
+    // The slot that holds the identity that just signed in, found by asking for
+    // it rather than by looking for what is new: see signedInSlot.
+    const num = signedInSlot(flow.before, after, identity);
 
     // Recorded now that claude-swap holds the account, and before the roster
     // is invalidated below, so no read can land between the two and cache a
@@ -722,16 +778,20 @@ async function registerSignedIn(flow, identity) {
     // or a Local network round can land a different account in between: two
     // new slots, newSlot answers null, and the account this sign-in did add
     // would never be marked.
-    if (num != null) {
-      const email = after.emails[num] || identity.email;
-      const org = after.orgs?.[num] ?? "";
-      await tellOrigins("signedIn", { email, org, added: !holds(flow.before, email, org) });
-    }
+    //
+    // And the success card's "added" is the same answer, asked once. It used to
+    // be `newSlot(before, after) != null`, which a share landing during the
+    // sign-in turned into the wrong sentence either way.
+    const email = num != null ? (after.emails[num] || identity.email) : identity.email;
+    const org = num != null ? (after.orgs?.[num] ?? "") : "";
+    const added = num != null && !holds(flow.before, email, org);
+    if (num != null) await tellOrigins("signedIn", { email, org, added });
 
     // Assigned, not discarded. `done` is still the right state — the account
     // WAS added — but it is `done` with a qualification whenever this says the
     // machine did not go back, and the dialog renders that qualification
     // instead of "The account you were using is still active".
+    flow.step = "restore";
     flow.restore = await restoreActive(flow.previousActive);
     invalidateClaudeAccountsCache();
     // Collect straight away, so the new row shows numbers instead of "never
@@ -739,7 +799,7 @@ async function registerSignedIn(flow, identity) {
     runDetached(await cswapBin(), ["list"]);
 
     flow.state = "done";
-    flow.account = { num, email: identity.email, added: slot != null };
+    flow.account = { num, email: identity.email, added };
     return { ok: true, ...loginState() };
   });
 }
@@ -759,6 +819,7 @@ export async function submitLoginCode(code) {
 
   const askedBefore = flow.prompts;
   flow.state = "registering";
+  flow.step = "confirm";
   flow.child.write(code.trim() + "\n");
 
   // Whichever comes first: the CLI finishing, or it asking again. A wrong code
@@ -770,11 +831,13 @@ export async function submitLoginCode(code) {
   ]);
   if (r === "rejected") {
     flow.state = "awaiting_code";
+    flow.step = null;
     flow.error = "that code was not accepted — copy it again from the browser";
     return { ok: false, reason: "code_rejected", ...loginState() };
   }
   if (r === "slow") {
     flow.state = "awaiting_code";
+    flow.step = null;
     flow.error = "the claude CLI has not answered — try the code again";
     return { ok: false, reason: "no_verdict", ...loginState() };
   }

package/src/server/index.mjs

@@ -20,6 +20,8 @@ export { challengeDeck, challengeProof, isProcessAlive };
 // The gates in front of the route table — see src/server/request-gates.mjs,
 // which also holds the per-process token the strictest of them checks.
 import { GUARDED_READS, OPEN_MUTATIONS, isAuthorizedDataRead, isAuthorizedMutation, isTrustedMutation, isTrustedRead } from "./request-gates.mjs";
+import { trafficRadar } from "./traffic-radar.mjs";
+import { handleTrafficCapture, isAuthorizedTrafficIngest } from "./traffic-radar-routes.mjs";
 // How much the event ring may hold and what one event is charged against it —
 // see ring-bounds.mjs. The four it exported from this file, it still exports.
 export { MAX_BUFFER, MAX_BUFFER_CHARS, MAX_RING_ENTRIES, payloadChars } from "./ring-bounds.mjs";
@@ -280,7 +282,7 @@ export async function startServer({ port = 4317, host = "127.0.0.1", persist = n
     // added later is protected until someone deliberately lists it as open,
     // which is the direction this has to fail in. See isAuthorizedMutation.
     if (req.method !== "GET" && req.method !== "HEAD"
-      && !OPEN_MUTATIONS.has(url.pathname) && !isAuthorizedMutation(req)) {
+      && !OPEN_MUTATIONS.has(url.pathname) && !isAuthorizedMutation(req) && !isAuthorizedTrafficIngest(req, url)) {
       return send(res, 401, { error: "unauthenticated" });
     }
 
@@ -330,6 +332,10 @@ export async function startServer({ port = 4317, host = "127.0.0.1", persist = n
     if (req.method === "GET"  && url.pathname === "/api/rating")       return handleRatingRead(req, res);
     if (req.method === "POST" && url.pathname === "/api/rating")       return guard(handleRatingWrite(req, res), res);
     if (req.method === "GET"  && url.pathname === "/api/system")       return send(res, 200, systemSnapshot());
+    if (req.method === "GET" && url.pathname === "/api/system/traffic-radar") {
+      return guard(trafficRadar.read().then(snapshot => send(res, 200, snapshot)), res);
+    }
+    if (url.pathname.startsWith("/api/system/traffic-radar/")) return guard(handleTrafficCapture(req, res, url), res);
     // On demand only — the process list costs a subprocess on every platform,
     // so it is fetched while the detail panel is open and never on the timer.
     if (req.method === "GET"  && url.pathname === "/api/system/processes") {

package/src/server/request-gates.mjs

@@ -430,6 +430,9 @@ export function isAuthorizedDataRead(req) {
  *  costs nothing: every fetch of both is in src/web, and a page's own GET
  *  carries Sec-Fetch-Site: same-origin. */
 export const GUARDED_READS = new Set([
+  "/api/system/traffic-radar",
+  "/api/system/traffic-radar/capture",
+  "/api/system/traffic-radar/capture/event",
   "/events",
   "/api/events",
   "/api/claude-accounts",

package/src/server/traffic-radar-capture.mjs

@@ -0,0 +1,136 @@
+import { randomBytes, timingSafeEqual } from "node:crypto";
+import { execFile } from "node:child_process";
+import { isIP } from "node:net";
+import { fileURLToPath } from "node:url";
+import { createWireCapture } from "./traffic-radar-wire.mjs";
+
+const WINDOW = 300_000;
+const DURATION = 600_000;
+const MAX_CHARS = 4_000_000;
+const quote = value => `'${String(value).replaceAll("'", "'\\''")}'`;
+export function captureDestination(value) {
+  const match = /^(\d{1,3}(?:\.\d{1,3}){3}):(\d{1,5})$/.exec(String(value));
+  if (!match || isIP(match[1]) !== 4 || +match[2] < 1 || +match[2] > 65535) throw new Error('Choose an IPv4 address and TCP port.');
+  return { host: match[1], port: +match[2] };
+}
+async function networkInterface(host) {
+  return new Promise(resolve => execFile('/sbin/route', ['-n', 'get', host], { timeout: 2000, maxBuffer: 16_384 }, (error, stdout) => {
+    const name = !error && /interface:\s+([a-zA-Z0-9_.:-]{1,32})/.exec(stdout)?.[1];
+    resolve(name || null);
+  }));
+}
+export function exportSummary(payload, signal) {
+  const group = signal === 'traces' ? 'Spans' : signal === 'logs' ? 'Logs' : 'Metrics';
+  const item = signal === 'traces' ? 'spans' : signal === 'logs' ? 'logRecords' : 'metrics';
+  const records = (payload['resource' + group] ?? []).flatMap(r => (r['scope' + group] ?? []).flatMap(s => s[item] ?? []));
+  const fields = new Set(), sessionIds = new Set();
+  const collect = attributes => {
+    for (const a of attributes ?? []) if (['session.id', 'session_id'].includes(a.key)) {
+      const id = a.value?.stringValue;
+      if (typeof id === 'string' && id.length > 0 && id.length <= 200) sessionIds.add(id);
+    }
+  };
+  for (const resource of payload['resource' + group] ?? []) {
+    collect(resource.resource?.attributes);
+    for (const scope of resource['scope' + group] ?? []) for (const record of scope[item] ?? []) {
+      collect(record.attributes);
+      for (const kind of ['gauge', 'sum', 'histogram', 'exponentialHistogram', 'summary'])
+        for (const point of record[kind]?.dataPoints ?? []) collect(point.attributes);
+    }
+  }
+  for (const record of records) for (const a of record.attributes ?? []) {
+    if (/prompt/i.test(a.key)) fields.add('Prompt');
+    if (/response|completion/i.test(a.key)) fields.add('Response');
+    if (/tool/i.test(a.key)) fields.add('Tool');
+  }
+  return { count: records.length, name: String(records[0]?.eventName || records[0]?.name || signal).slice(0, 200), content: [...fields], sessionIds: [...sessionIds] };
+}
+export function createTrafficCapture({ now = Date.now, platform = process.platform, findInterface = networkInterface, wire = createWireCapture } = {}) {
+  let session = null, parsers = [], timer = null, nextId = 1, chars = 0;
+  const events = new Map();
+  let observations = [];
+  function prune() {
+    observations = observations.filter(entry => now() - entry.observedAt <= WINDOW);
+    for (const [id, event] of events) if (now() - event.observedAt > WINDOW) { events.delete(id); chars -= event.chars; }
+    if (session?.token && now() >= session.expiresAt) stop('expired');
+    else if (session?.token && session.sources.some(s => s.lastInputAt !== null) &&
+      session.sources.filter(s => s.lastInputAt !== null).every(s => now() - s.lastInputAt > 5000)) stop('interrupted');
+    if (!session?.token && !events.size && !observations.length && timer) { clearInterval(timer); timer = null; }
+  }
+  function stop(state = 'stopped') {
+    if (session) { session.state = state; session.token = null; for (const source of session.sources) source.command = null; }
+    for (const parser of parsers) parser.close(); parsers = [];
+  }
+  function addExport(value) {
+    const text = JSON.stringify(value.payload);
+    const cost = text.length + value.protobufBase64.length;
+    if (cost > 1_000_000) { session.issues.payload_limit = (session.issues.payload_limit ?? 0) + 1; return null; }
+    const id = nextId++;
+    while (events.size >= 100 || (chars + cost > MAX_CHARS && events.size)) {
+      const first = events.keys().next().value; chars -= events.get(first).chars; events.delete(first);
+    }
+    events.set(id, { ...value, id, observedAt: now(), chars: cost, ...exportSummary(value.payload, value.signal), outcome: 'unconfirmed', response: null });
+    chars += cost;
+    return id;
+  }
+  return {
+    async prepare(destination, localPort) {
+      if (platform !== 'darwin') throw new Error('Passive capture setup is available on macOS.');
+      const targets = [...new Set((Array.isArray(destination) ? destination : [destination]).map(String))];
+      if (!targets.length || targets.length > 8) throw new Error('Choose between one and eight destinations.');
+      const addresses = targets.map(captureDestination);
+      if (!Number.isInteger(localPort) || localPort < 1 || localPort > 65535) throw new Error('Local ccdeck port unavailable.');
+      const names = await Promise.all(addresses.map(({ host }) => findInterface(host)));
+      if (names.some(name => !name || !/^[a-zA-Z0-9_.:-]{1,32}$/.test(name))) throw new Error('Network interface unavailable. Check the destination and retry.');
+      stop(); events.clear(); observations = []; chars = 0;
+      const token = randomBytes(32).toString('hex');
+      const helper = fileURLToPath(new URL('./traffic-radar-helper.mjs', import.meta.url));
+      const sources = addresses.map(({ host, port }, index) => {
+        const filter = `host ${host} and tcp port ${port}`;
+        const command = `sudo /usr/sbin/tcpdump -i ${quote(names[index])} -nn -U -s 0 -w - ${quote(filter)} | ${quote(process.execPath)} ${quote(helper)} ${quote(`http://127.0.0.1:${localPort}`)} ${quote(token)} ${quote(index)}`;
+        return { destination: `${host}:${port}`, interface: names[index], command, lastInputAt: null, bytes: 0 };
+      });
+      session = { id: randomBytes(8).toString('hex'), state: 'awaiting', destination: sources[0].destination, interface: sources[0].interface,
+        sources, startedAt: now(), expiresAt: now() + DURATION, lastInputAt: null, token, bytes: 0, issues: {} };
+      parsers = addresses.map(({ host, port }) => wire({ host, port, onExport: addExport, onResponse: (id, response) => {
+        const event = events.get(id);
+        if (event) { event.response = response; event.outcome = response.outcome; }
+      }, onObservation: value => { observations.unshift({ id: nextId++, ...value, observedAt: now() }); observations = observations.slice(0, 100); }, onIssue: code => { session.issues[code] = (session.issues[code] ?? 0) + 1; } }));
+      if (!timer) { timer = setInterval(prune, 1000); timer.unref?.(); }
+      return { command: sources[0].command, commands: sources.map(({ command, destination }) => ({ command, destination })), expiresAt: session.expiresAt, sessionId: session.id };
+    },
+    accepts(token) {
+      prune();
+      return typeof token === 'string' && /^[a-f0-9]{64}$/.test(token) && !!session?.token
+        && timingSafeEqual(Buffer.from(token), Buffer.from(session.token));
+    },
+    ingest(token, chunk, source = 0) {
+      if (!this.accepts(token)) return false;
+      if (chunk.length > 262_144) throw new Error('Capture chunk too large.');
+      if (!Number.isInteger(source) || !parsers[source]) return false;
+      session.sources[source].lastInputAt = now();
+      session.sources[source].bytes += chunk.length;
+      session.lastInputAt = now();
+      if (chunk.length) session.state = 'capturing';
+      else if (session.state === 'awaiting') session.state = 'receiving';
+      session.bytes += chunk.length;
+      try { parsers[source].feed(chunk); } catch { stop('error'); return false; }
+      return true;
+    },
+    read() {
+      prune();
+      return { ok: true, sessionId: session?.id ?? null, state: session?.state ?? 'idle', destination: session?.destination ?? null, interface: session?.interface ?? null,
+        startedAt: session?.startedAt ?? null, expiresAt: session?.expiresAt ?? null, lastInputAt: session?.lastInputAt ?? null,
+        sources: session?.sources.map(({ command, ...source }) => ({ ...source, active: source.lastInputAt !== null && now() - source.lastInputAt <= 5000 && !!session.token })) ?? [],
+        observations: [...observations],
+        bytes: session?.bytes ?? 0, issues: { ...session?.issues },
+        events: [...events.values()].reverse().map(({ payload, protobufBase64, chars, flow, ...event }) => event),
+      };
+    },
+    detail(id) { prune(); const event = events.get(id); return event ? { payload: event.payload, protobufBase64: event.protobufBase64 } : null; },
+    stop,
+    clear() { events.clear(); observations = []; chars = 0; },
+    dispose() { stop(); events.clear(); observations = []; if (timer) clearInterval(timer); timer = null; },
+  };
+}
+export const trafficCapture = createTrafficCapture();