replicas-computer 0.3.15 → 0.3.17

package/README.md

@@ -44,7 +44,7 @@ The server records every decision that changes the picture (viewer connects and
 | `REPLICAS_DESKTOP_STREAM_TRANSPORT` | `webrtc` | Transport for viewers whose URL does not choose one |
 | `REPLICAS_DESKTOP_STREAM_PROFILE` | `balanced` | Encoder profile for viewers whose URL does not choose one |
 | `REPLICAS_DESKTOP_STREAM_ADAPTIVE` | `1` | `0` pins the top quality rung by default |
-| `REPLICAS_DESKTOP_STREAM_ICE_SERVERS` | `stun:stun.l.google.com:19302` | Comma-separated STUN/TURN servers; `turn:user:secret@host:port?transport=tcp` adds a relay. Percent-encode the username and password; the browser receives their decoded values. Re-read from the workspace runtime env on every viewer, so the monolith's `DESKTOP_STREAM_ICE_SERVERS` reaches running workspaces |
+| `REPLICAS_DESKTOP_STREAM_ICE_SERVERS` | `stun:stun.l.google.com:19302` | Comma-separated STUN/TURN servers; `turn:user:secret@host:port?transport=tcp` adds a relay. Percent-encode the username and password; the browser receives their decoded values. Re-read from the workspace runtime env on every viewer, so the monolith's `DESKTOP_STREAM_ICE_SERVERS` reaches running workspaces. Short-lived credentials for the [TURN relay](../services/turn/README.md) are fetched from the monolith and appended; the server itself only uses UDP relays |
 | `REPLICAS_DESKTOP_STREAM_ICE_PORTS` | ephemeral | `begin-end` UDP port range for the server's ICE candidates |
 | `REPLICAS_DESKTOP_STREAM_WEBRTC` | `1` | `0` serves the WebSocket transport only |
 | `REPLICAS_DESKTOP_STREAM_COLOR` | `bt709` | `legacy` disables the explicit BT.709 conversion and signalling |

package/dist/index.js

@@ -2937,7 +2937,7 @@ async function computerStatusCommand() {
 }
 
 // src/version.ts
-var COMPUTER_USE_VERSION = "0.3.15";
+var COMPUTER_USE_VERSION = "0.3.17";
 var COMPUTER_USE_PROTOCOL_VERSION = 1;
 
 // src/program.ts
@@ -3179,69 +3179,11 @@ async function runComputerClient(argv) {
 // src/media-server.ts
 import { spawn as spawn5 } from "child_process";
 import { createHash as createHash3 } from "crypto";
-import { createReadStream, existsSync as existsSync7, readdirSync, readFileSync as readFileSync6, statSync as statSync2 } from "fs";
+import { createReadStream, existsSync as existsSync7, readdirSync, readFileSync as readFileSync7, statSync as statSync2 } from "fs";
 import { createServer as createServer2 } from "http";
 import { availableParallelism as availableParallelism2, loadavg } from "os";
 import { dirname as dirname7, extname, resolve as resolve3 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-
-// ../shared/src/runtime-env.ts
-function parsePosixEnvFile(content) {
-  const result = {};
-  let pos = 0;
-  while (pos < content.length) {
-    let lineStart;
-    if (pos === 0 || content[pos - 1] === "\n") {
-      lineStart = pos;
-    } else {
-      const nl2 = content.indexOf("\n", pos);
-      if (nl2 === -1) break;
-      lineStart = nl2 + 1;
-    }
-    if (!content.startsWith("export ", lineStart)) {
-      const nl2 = content.indexOf("\n", lineStart);
-      if (nl2 === -1) break;
-      pos = nl2 + 1;
-      continue;
-    }
-    const nameStart = lineStart + "export ".length;
-    const eqIdx = content.indexOf("=", nameStart);
-    if (eqIdx === -1) break;
-    const name = content.slice(nameStart, eqIdx).trim();
-    let cursor = eqIdx + 1;
-    if (content[cursor] !== "'") {
-      const nl2 = content.indexOf("\n", cursor);
-      pos = nl2 === -1 ? content.length : nl2 + 1;
-      continue;
-    }
-    cursor += 1;
-    let value = "";
-    let closed = false;
-    while (cursor < content.length) {
-      const ch = content[cursor];
-      if (ch === "'") {
-        if (content.startsWith("\\''", cursor + 1)) {
-          value += "'";
-          cursor += 4;
-          continue;
-        }
-        cursor += 1;
-        closed = true;
-        break;
-      }
-      value += ch;
-      cursor += 1;
-    }
-    if (closed && name) {
-      result[name] = value;
-    }
-    const nl = content.indexOf("\n", cursor);
-    pos = nl === -1 ? content.length : nl + 1;
-  }
-  return result;
-}
-
-// src/media-server.ts
 import WebSocket2, { WebSocketServer } from "ws";
 
 // src/encoder.ts
@@ -3573,13 +3515,17 @@ function superviseEncoder(options) {
   };
 }
 
-// src/video-encoder.ts
-import { existsSync as existsSync6 } from "fs";
-import { availableParallelism } from "os";
-import { dirname as dirname6, resolve as resolve2 } from "path";
-import { fileURLToPath } from "url";
+// src/ice-servers.ts
+import { readFileSync as readFileSync6 } from "fs";
 
 // ../shared/src/desktop-stream.ts
+function isStreamIceServer(value) {
+  return isRecord(value) && typeof value.urls === "string" && (value.username === void 0 || typeof value.username === "string") && (value.credential === void 0 || typeof value.credential === "string");
+}
+var DESKTOP_ICE_SERVERS_PATH = "/v1/engine/desktop/ice-servers";
+function isDesktopIceServers(value) {
+  return isRecord(value) && typeof value.expiresAt === "number" && Array.isArray(value.iceServers) && value.iceServers.every(isStreamIceServer);
+}
 var DEFAULT_STREAM_REQUEST = {
   transport: "webrtc",
   profile: "balanced",
@@ -3636,6 +3582,144 @@ function isDesktopWebRtcFailure(value) {
   ].every((key) => typeof value[key] === "string" && value[key].length <= 200) && ["elapsedMs", "candidateErrors", "framesDecoded", "packetsReceived", "packetsLost", "bytesReceived", "lastFrameAgeMs", "encoderFps"].every((key) => typeof value[key] === "number" && Number.isFinite(value[key]));
 }
 
+// ../shared/src/runtime-env.ts
+var REPLICAS_RUNTIME_ENV_ALIASES = {
+  monolithUrl: ["REPLICAS_MONOLITH_URL", "MONOLITH_URL"],
+  workspaceId: ["REPLICAS_WORKSPACE_ID", "WORKSPACE_ID"],
+  linearSessionId: ["REPLICAS_LINEAR_SESSION_ID", "LINEAR_SESSION_ID"],
+  linearAccessToken: ["REPLICAS_LINEAR_ACCESS_TOKEN", "LINEAR_ACCESS_TOKEN"],
+  slackBotToken: ["REPLICAS_SLACK_BOT_TOKEN", "SLACK_BOT_TOKEN"],
+  slackChannelId: ["REPLICAS_SLACK_CHANNEL_ID", "SLACK_CHANNEL_ID"],
+  slackThreadTs: ["REPLICAS_SLACK_THREAD_TS", "SLACK_THREAD_TS"]
+};
+function readReplicasRuntimeEnv(readEnv, [namespacedKey, legacyKey]) {
+  return readEnv(namespacedKey) ?? readEnv(legacyKey);
+}
+function parsePosixEnvFile(content) {
+  const result = {};
+  let pos = 0;
+  while (pos < content.length) {
+    let lineStart;
+    if (pos === 0 || content[pos - 1] === "\n") {
+      lineStart = pos;
+    } else {
+      const nl2 = content.indexOf("\n", pos);
+      if (nl2 === -1) break;
+      lineStart = nl2 + 1;
+    }
+    if (!content.startsWith("export ", lineStart)) {
+      const nl2 = content.indexOf("\n", lineStart);
+      if (nl2 === -1) break;
+      pos = nl2 + 1;
+      continue;
+    }
+    const nameStart = lineStart + "export ".length;
+    const eqIdx = content.indexOf("=", nameStart);
+    if (eqIdx === -1) break;
+    const name = content.slice(nameStart, eqIdx).trim();
+    let cursor = eqIdx + 1;
+    if (content[cursor] !== "'") {
+      const nl2 = content.indexOf("\n", cursor);
+      pos = nl2 === -1 ? content.length : nl2 + 1;
+      continue;
+    }
+    cursor += 1;
+    let value = "";
+    let closed = false;
+    while (cursor < content.length) {
+      const ch = content[cursor];
+      if (ch === "'") {
+        if (content.startsWith("\\''", cursor + 1)) {
+          value += "'";
+          cursor += 4;
+          continue;
+        }
+        cursor += 1;
+        closed = true;
+        break;
+      }
+      value += ch;
+      cursor += 1;
+    }
+    if (closed && name) {
+      result[name] = value;
+    }
+    const nl = content.indexOf("\n", cursor);
+    pos = nl === -1 ? content.length : nl + 1;
+  }
+  return result;
+}
+
+// src/ice-servers.ts
+var runtimeEnvFile = process.env.REPLICAS_RUNTIME_ENV_FILE || "/home/user/.replicas/runtime-env.sh";
+var refreshMs = 60 * 6e4;
+var retryMs = 6e4;
+var relays = [];
+var expiresAt = 0;
+var refreshAt = 0;
+var refreshing;
+async function currentIceServers() {
+  let env = process.env;
+  try {
+    env = { ...env, ...parsePosixEnvFile(readFileSync6(runtimeEnvFile, "utf8")) };
+  } catch {
+  }
+  const monolithUrl = readReplicasRuntimeEnv((name) => env[name], REPLICAS_RUNTIME_ENV_ALIASES.monolithUrl);
+  const workspaceId = readReplicasRuntimeEnv((name) => env[name], REPLICAS_RUNTIME_ENV_ALIASES.workspaceId);
+  const engineSecret = env.REPLICAS_ENGINE_SECRET;
+  if (monolithUrl && workspaceId && engineSecret && Date.now() >= refreshAt) {
+    const refreshed = refreshing ??= refreshRelays(monolithUrl, workspaceId, engineSecret).finally(() => {
+      refreshing = void 0;
+    });
+    if (expiresAt <= Date.now()) await refreshed;
+  }
+  return toIceServers(env.REPLICAS_DESKTOP_STREAM_ICE_SERVERS, expiresAt > Date.now() ? relays : []);
+}
+async function refreshRelays(monolithUrl, workspaceId, engineSecret) {
+  try {
+    const response = await fetch(new URL(DESKTOP_ICE_SERVERS_PATH, monolithUrl), {
+      headers: { authorization: `Bearer ${engineSecret}`, "x-workspace-id": workspaceId },
+      redirect: "error",
+      signal: AbortSignal.timeout(2e3)
+    });
+    if (response.status === 404) {
+      relays = [];
+      expiresAt = 0;
+    } else {
+      const body = response.ok ? await response.json() : void 0;
+      if (!isDesktopIceServers(body)) throw new Error(`HTTP ${response.status}`);
+      ({ iceServers: relays, expiresAt } = body);
+    }
+    refreshAt = Date.now() + refreshMs;
+  } catch (error) {
+    process.stderr.write(`[desktop-stream] TURN credentials unavailable: ${error instanceof Error ? error.message : String(error)}
+`);
+    refreshAt = Date.now() + retryMs;
+  }
+}
+function toIceServers(spec = "stun:stun.l.google.com:19302", relayServers) {
+  const browser = spec.split(",").map((url) => url.trim()).filter(Boolean).map((url) => {
+    const match = url.match(/^(turns?):([^:@]+):(.+)@([^@]+)$/);
+    if (!match) return { urls: url };
+    const [username, credential] = match.slice(2, 4).map((value) => {
+      try {
+        return decodeURIComponent(value);
+      } catch {
+        return value;
+      }
+    });
+    return { urls: `${match[1]}:${match[4]}`, username, credential };
+  }).concat(relayServers);
+  const native = browser.filter(({ urls }) => !/^turns:|[?&]transport=tcp/i.test(urls)).map(({ urls, username, credential }) => username === void 0 || credential === void 0 ? urls : urls.replace(/^turn:/i, `turn:${encodeURIComponent(username)}:${encodeURIComponent(credential)}@`));
+  return { native, browser };
+}
+
+// src/video-encoder.ts
+import { existsSync as existsSync6 } from "fs";
+import { availableParallelism } from "os";
+import { dirname as dirname6, resolve as resolve2 } from "path";
+import { fileURLToPath } from "url";
+
 // src/input-validation.ts
 var finite = (value) => typeof value === "number" && Number.isFinite(value);
 var optionalFinite = (value) => value === void 0 || finite(value);
@@ -3951,22 +4035,6 @@ async function loadWebRtc() {
   }
 }
 var cleanupWebRtc = () => ndc?.cleanup();
-function parseIceServers(spec) {
-  const native = (spec ?? "stun:stun.l.google.com:19302").split(",").map((server) => server.trim()).filter(Boolean);
-  const browser = native.map((url) => {
-    const match = url.match(/^(turns?):([^:@]+):(.+)@([^@]+)$/);
-    if (!match) return { urls: url };
-    const [username, credential] = match.slice(2, 4).map((value) => {
-      try {
-        return decodeURIComponent(value);
-      } catch {
-        return value;
-      }
-    });
-    return { urls: `${match[1]}:${match[4]}`, username, credential };
-  });
-  return { native, browser };
-}
 var WebRtcViewer = class {
   constructor(options, handlers) {
     this.handlers = handlers;
@@ -4478,7 +4546,6 @@ var standbyRung = 5;
 var port = Number.parseInt(process.env.REPLICAS_DESKTOP_STREAM_PORT || String(DESKTOP_STREAM_PORT), 10);
 var display = process.env.REPLICAS_DESKTOP_DISPLAY?.replace(/^([^:])/, ":$1") || ":99";
 var webrtcEnabled = process.env.REPLICAS_DESKTOP_STREAM_WEBRTC !== "0";
-var runtimeEnvFile = process.env.REPLICAS_RUNTIME_ENV_FILE || "/home/user/.replicas/runtime-env.sh";
 var colorMode = process.env.REPLICAS_DESKTOP_STREAM_COLOR === "legacy" ? "legacy" : "bt709";
 var defaultRequest = parseStreamRequest(new URLSearchParams({
   transport: process.env.REPLICAS_DESKTOP_STREAM_TRANSPORT ?? "",
@@ -4534,14 +4601,6 @@ function mediaPacket(kind, timestamp, payload) {
   header.writeBigUInt64BE(BigInt(Math.max(0, timestamp)), 4);
   return Buffer.concat([header, payload]);
 }
-function currentIceServers() {
-  let spec = process.env.REPLICAS_DESKTOP_STREAM_ICE_SERVERS;
-  try {
-    spec = parsePosixEnvFile(readFileSync6(runtimeEnvFile, "utf8")).REPLICAS_DESKTOP_STREAM_ICE_SERVERS ?? spec;
-  } catch {
-  }
-  return parseIceServers(spec);
-}
 var appliedTheme;
 var pendingTheme;
 var applyingTheme = false;
@@ -4567,7 +4626,7 @@ function drainDesktopTheme() {
 function processCpuMs(pid) {
   if (!pid) return 0;
   try {
-    const stat = readFileSync6(`/proc/${pid}/stat`, "utf8");
+    const stat = readFileSync7(`/proc/${pid}/stat`, "utf8");
     const fields = stat.slice(stat.lastIndexOf(")") + 2).split(" ");
     return (Number(fields[11]) + Number(fields[12])) * 10;
   } catch {
@@ -5252,10 +5311,13 @@ async function runMediaServer() {
       // A socket viewer whose WebRTC attempt failed tries again in the background;
       // the socket keeps carrying its media until the new peer shows video.
       case "retry-webrtc": {
-        const ice = webrtc && viewer.fallback && !viewer.rtc && viewer.request.transport === "webrtc" ? currentIceServers() : void 0;
-        if (!ice) return;
-        record("retrying webrtc", "socket media continues meanwhile");
-        openWebRtc(viewer, reply, ice.native);
+        const retryable = () => webrtc && viewer.fallback && !viewer.rtc && viewer.request.transport === "webrtc" && viewer.socket.readyState === WebSocket2.OPEN;
+        if (!retryable()) return;
+        void currentIceServers().then((ice) => {
+          if (!retryable()) return;
+          record("retrying webrtc", "socket media continues meanwhile");
+          openWebRtc(viewer, reply, ice.native);
+        });
         return;
       }
       case "webrtc-ready":
@@ -5359,10 +5421,11 @@ async function runMediaServer() {
     if (extname(path) === ".html") {
       ensureEncoders();
       if (viewers.size === 0) stopEncodersSoon();
+      if (webrtc) void currentIceServers();
       response.setHeader("cache-control", "no-store");
       const digest = createHash3("sha1");
-      for (const name of readdirSync(webroot).filter((file) => /\.(js|css)$/.test(file)).sort()) digest.update(readFileSync6(resolve3(webroot, name)));
-      response.end(readFileSync6(path, "utf8").replaceAll("__VERSION__", `${COMPUTER_USE_VERSION}-${digest.digest("hex").slice(0, 8)}`));
+      for (const name of readdirSync(webroot).filter((file) => /\.(js|css)$/.test(file)).sort()) digest.update(readFileSync7(resolve3(webroot, name)));
+      response.end(readFileSync7(path, "utf8").replaceAll("__VERSION__", `${COMPUTER_USE_VERSION}-${digest.digest("hex").slice(0, 8)}`));
       return;
     }
     response.setHeader("cache-control", "private, max-age=31536000, immutable");
@@ -5375,9 +5438,10 @@ async function runMediaServer() {
       socket.destroy();
       return;
     }
-    webSocketServer.handleUpgrade(request, socket, head, (client) => webSocketServer.emit("connection", client, parseStreamRequest(url.searchParams, defaultRequest), url.searchParams.get("standby") === "1"));
+    const streamRequest = parseStreamRequest(url.searchParams, defaultRequest);
+    void (webrtc && streamRequest.transport === "webrtc" ? currentIceServers() : Promise.resolve(void 0)).then((ice) => webSocketServer.handleUpgrade(request, socket, head, (client) => webSocketServer.emit("connection", client, streamRequest, url.searchParams.get("standby") === "1", ice)));
   });
-  webSocketServer.on("connection", (socket, request, standby) => {
+  webSocketServer.on("connection", (socket, request, standby, ice) => {
     const viewer = {
       socket,
       input: new InputBridge(display, width, height),
@@ -5411,8 +5475,6 @@ async function runMediaServer() {
     const reply = (message) => {
       if (socket.readyState === WebSocket2.OPEN) socket.send(JSON.stringify(message));
     };
-    const offerWebRtc = webrtc && request.transport === "webrtc";
-    const ice = offerWebRtc ? currentIceServers() : void 0;
     const fallbackProfile = profile() === "high444" ? "main" : profile();
     const configMessage = { ...config, videoCodec: H264_PROFILES[fallbackProfile].codec, iceServers: ice?.browser, request };
     reply(configMessage);

package/dist/stream-viewer.js

@@ -4,6 +4,9 @@ function isRecord(value) {
 }
 
 // ../shared/src/desktop-stream.ts
+function isStreamIceServer(value) {
+  return isRecord(value) && typeof value.urls === "string" && (value.username === void 0 || typeof value.username === "string") && (value.credential === void 0 || typeof value.credential === "string");
+}
 var DEFAULT_STREAM_REQUEST = {
   transport: "webrtc",
   profile: "balanced",
@@ -46,13 +49,10 @@ var DESKTOP_WEBRTC_FAILURE_REASONS = {
   full_chroma_undecodable: "WebRTC could not decode H.264 High 4:4:4"
 };
 var DESKTOP_QUALITY_MESSAGE = "replicas-desktop-quality";
+var DESKTOP_CONNECTION_MESSAGE = "replicas-desktop-connection";
 
 // src/input-validation.ts
 var finite = (value) => typeof value === "number" && Number.isFinite(value);
-var iceServer = (value) => {
-  if (!isRecord(value)) return false;
-  return typeof value.urls === "string" && (value.username === void 0 || typeof value.username === "string") && (value.credential === void 0 || typeof value.credential === "string");
-};
 function validServerMessage(value) {
   if (!isRecord(value) || typeof value.type !== "string") return false;
   switch (value.type) {
@@ -66,7 +66,7 @@ function validServerMessage(value) {
     case "candidate":
       return typeof value.candidate === "string" && value.candidate.length < 1024 && typeof value.mid === "string" && value.mid.length < 16;
     case "config":
-      return finite(value.protocolVersion) && (value.serverVersion === void 0 || typeof value.serverVersion === "string") && (value.webrtcUnavailableReason === void 0 || typeof value.webrtcUnavailableReason === "string") && (value.inputRace === void 0 || typeof value.inputRace === "boolean") && finite(value.width) && finite(value.height) && finite(value.fps) && typeof value.videoCodec === "string" && typeof value.audioCodec === "string" && finite(value.audioSampleRate) && finite(value.audioChannels) && isRecord(value.request) && (value.iceServers === void 0 || Array.isArray(value.iceServers) && value.iceServers.every(iceServer));
+      return finite(value.protocolVersion) && (value.serverVersion === void 0 || typeof value.serverVersion === "string") && (value.webrtcUnavailableReason === void 0 || typeof value.webrtcUnavailableReason === "string") && (value.inputRace === void 0 || typeof value.inputRace === "boolean") && finite(value.width) && finite(value.height) && finite(value.fps) && typeof value.videoCodec === "string" && typeof value.audioCodec === "string" && finite(value.audioSampleRate) && finite(value.audioChannels) && isRecord(value.request) && (value.iceServers === void 0 || Array.isArray(value.iceServers) && value.iceServers.every(isStreamIceServer));
     case "telemetry":
       return isRecord(value.encoder) && isRecord(value.cpu) && isRecord(value.viewer) && Array.isArray(value.events);
     default:
@@ -103,6 +103,7 @@ var webrtcFirstFrameMs = 3e3;
 var webrtcRetryFirstMs = 15e3;
 var webrtcRetryMaxMs = 3e5;
 var webrtcRetryTimeoutMs = 1e4;
+var hiddenDisconnectMs = 6e4;
 var webrtcSkipsAfterFailure = 3;
 var pointerIntervalMs = 4;
 var qualityWindowMs = 3e4;
@@ -114,8 +115,10 @@ try {
 } catch {
 }
 var socket;
-var standby = innerWidth === 0 || innerHeight === 0;
+var intersecting = innerWidth > 0 && innerHeight > 0;
+var standby = !intersecting;
 var standbyTimer;
+var hiddenTimer;
 var config;
 var transport;
 var transportReason = "";
@@ -172,6 +175,24 @@ var restartQuality = () => {
   qualitySequence = 0;
   presentedAt = 0;
 };
+var newConnectionTotals = () => ({
+  sampledAt: 0,
+  presented: 0,
+  shownMs: 0,
+  frames: 0,
+  samples: 0,
+  rung: 0,
+  worstRung: 0,
+  cpu: 0,
+  rtt: 0,
+  rttSamples: 0,
+  worstRtt: 0,
+  loss: 0,
+  lossSamples: 0,
+  longestGapMs: 0,
+  reportedAt: 0
+});
+var connectionTotals = newConnectionTotals();
 var state = {};
 globalThis.__replicasDesktop = state;
 var viewerEvents = [];
@@ -258,6 +279,31 @@ var announceTransport = () => {
   if (window.parent === window) return;
   window.parent.postMessage({ type: DESKTOP_TRANSPORT_MESSAGE, transport: transport ?? "connecting", reason: transportReason, path: route.path, codec: route.codec, failure, recovery }, "*");
 };
+var average = (sum, count) => count ? Math.round(sum * 10 / count) / 10 : void 0;
+var reportConnection = (ended) => {
+  if (window.parent === window || !config) return;
+  const totals = connectionTotals;
+  totals.reportedAt = performance.now();
+  window.parent.postMessage({
+    type: DESKTOP_CONNECTION_MESSAGE,
+    serverVersion: config.serverVersion ?? "unknown",
+    firstFrameMs: totals.firstFrameAt === void 0 ? void 0 : Math.round(totals.firstFrameAt - connectionStartedAt),
+    shownMs: Math.round(totals.shownMs),
+    displayedFps: totals.shownMs >= 1e3 ? Math.round(totals.frames * 1e4 / totals.shownMs) / 10 : void 0,
+    inputRttMs: average(totals.rtt, totals.rttSamples),
+    worstInputRttMs: totals.rttSamples ? Math.round(totals.worstRtt) : void 0,
+    qualityRung: average(totals.rung, totals.samples),
+    worstQualityRung: totals.samples ? totals.worstRung : void 0,
+    longestFrameGapMs: totals.samples ? Math.round(totals.longestGapMs) : void 0,
+    lossPercent: average(totals.loss, totals.lossSamples),
+    cpuLoadPercent: average(totals.cpu, totals.samples),
+    ended
+  }, "*");
+};
+var endConnection = (ended) => {
+  if (ended || connectionTotals.sampledAt) reportConnection(ended);
+  connectionTotals = newConnectionTotals();
+};
 var closePeer = (preserveDeadline = false) => {
   cancelRetry();
   if (!preserveDeadline) {
@@ -311,9 +357,11 @@ var configureVideo = async (next, preferHardware = true) => {
   if (configuration !== videoConfiguration) return;
   const selectedConfig = support.supported && support.config ? support.config : decoderConfig(next);
   activeVideoConfig = selectedConfig;
+  const totals = connectionTotals;
   const decoder = new VideoDecoder({
     output: (frame) => {
       socketDecodedFrames += 1;
+      totals.firstFrameAt ??= performance.now();
       const writer = videoWriter;
       if (!writer || (writer.desiredSize ?? 1) <= 0) {
         frame.close();
@@ -777,6 +825,7 @@ var handleServerText = (data, viaSocket) => {
 };
 var connect = () => {
   if (document.visibilityState !== "visible") return;
+  endConnection();
   clearTimeout(reconnectTimer);
   closePeer();
   transport = void 0;
@@ -819,9 +868,12 @@ var connect = () => {
   });
   nextSocket.addEventListener("close", () => {
     if (socket !== nextSocket) return;
+    endConnection();
     closePeer();
-    transport = void 0;
-    announceTransport();
+    if (transport) {
+      transport = void 0;
+      announceTransport();
+    }
     reconnectAttempt += 1;
     const delay = Math.min(8e3, 250 * 2 ** Math.min(reconnectAttempt, 5)) * (0.85 + Math.random() * 0.3);
     note("socket closed", `reconnect in ${Math.round(delay)} ms`);
@@ -856,6 +908,8 @@ var observeFrame = () => {
     lastPresentedCount = metadata.presentedFrames;
     lastFrameAt = performance.now();
     if (presentedAt && qualityWindow) qualityWindow.longestGapMs = Math.max(qualityWindow.longestGapMs, lastFrameAt - Math.max(presentedAt, qualityWindow.at));
+    const { shownSince } = connectionTotals;
+    if (presentedAt && shownSince !== void 0) connectionTotals.longestGapMs = Math.max(connectionTotals.longestGapMs, lastFrameAt - Math.max(presentedAt, shownSince));
     presentedAt = lastFrameAt;
     status.classList.remove("visible");
     observeFrame();
@@ -910,22 +964,32 @@ var setStandby = (next) => {
   sendSocket({ type: "standby", standby });
   if (!standby && !audioPrompt.hidden) unlockAudio();
 };
-new IntersectionObserver(([entry]) => {
-  if (entry.isIntersecting) setStandby(false);
+var syncStandby = () => {
+  if (intersecting && document.visibilityState === "visible") setStandby(false);
   else if (!standby) {
     clearTimeout(standbyTimer);
     standbyTimer = setTimeout(() => setStandby(true), 1e3);
   }
+};
+new IntersectionObserver(([entry]) => {
+  intersecting = entry.isIntersecting;
+  syncStandby();
 }).observe(document.documentElement);
 window.addEventListener("online", connect);
 document.addEventListener("visibilitychange", () => {
+  clearTimeout(hiddenTimer);
+  syncStandby();
   if (document.visibilityState === "hidden") {
-    disconnect();
+    hiddenTimer = setTimeout(() => {
+      endConnection("hidden");
+      disconnect();
+    }, hiddenDisconnectMs);
     return;
   }
-  connect();
+  if (!socket || socket.readyState >= WebSocket.CLOSING) connect();
 });
 window.addEventListener("pagehide", () => {
+  endConnection();
   disconnect();
   screen.cancelVideoFrameCallback(frameCallback);
   videoDecoder?.close();
@@ -964,6 +1028,32 @@ var updateDiagnostics = (stats) => {
     viewerEvents.length ? `viewer events: ${describeEvents(viewerEvents.slice(-5))}` : ""
   ].filter(Boolean).join("\n");
 };
+var sampleConnection = (stats, current, now) => {
+  const totals = connectionTotals;
+  const shown = !standby && document.visibilityState === "visible" && qualityUnseen.samples < 4;
+  if (shown && totals.sampledAt) {
+    totals.shownSince ??= totals.sampledAt;
+    totals.shownMs += now - totals.sampledAt;
+    totals.frames += presentedFrames - totals.presented;
+    totals.samples += 1;
+    totals.rung += current.encoder.rung;
+    totals.worstRung = Math.max(totals.worstRung, current.encoder.rung);
+    totals.cpu += current.cpu.load * 100 / current.cpu.cores;
+    if (stats.rttMs > 0) {
+      totals.rtt += stats.rttMs;
+      totals.rttSamples += 1;
+      totals.worstRtt = Math.max(totals.worstRtt, stats.rttMs);
+    }
+    if (stats.lossPercent !== void 0) {
+      totals.loss += stats.lossPercent;
+      totals.lossSamples += 1;
+    }
+    totals.longestGapMs = Math.max(totals.longestGapMs, now - Math.max(presentedAt, totals.shownSince));
+  } else if (!shown) totals.shownSince = void 0;
+  totals.sampledAt = now;
+  totals.presented = presentedFrames;
+  if (now - totals.reportedAt >= 2e3) reportConnection();
+};
 var reportQuality = (stats) => {
   if (window.parent === window || !transport || !config || !telemetry) return;
   const now = performance.now();
@@ -971,6 +1061,7 @@ var reportQuality = (stats) => {
   const decoded = transport === "webrtc" ? inbound?.framesDecoded ?? 0 : socketDecodedFrames;
   qualityUnseen = { decoded, presented: presentedFrames, samples: decoded > qualityUnseen.decoded && presentedFrames === qualityUnseen.presented ? qualityUnseen.samples + 1 : 0 };
   if (qualityUnseen.samples >= 4) current.unseen = true;
+  sampleConnection(stats, telemetry, now);
   qualitySamples.push({ stats, telemetry });
   const windowMs = now - current.at;
   if (windowMs < qualityWindowMs) return;
@@ -1049,6 +1140,7 @@ var reportWebRtcStats = async (pc, stats) => {
   };
   if (counters.framesDecoded > (inbound?.framesDecoded ?? 0)) {
     lastFrameAt = now;
+    connectionTotals.firstFrameAt ??= now;
     clearTimeout(webrtcDeadline);
     webrtcDeadline = void 0;
     if (fullChromaFailure) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "replicas-computer",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "Replicas workspace computer-use runtime",
   "type": "module",
   "main": "dist/index.js",