replicas-computer 0.3.9 → 0.3.11

package/assets/desktop/novnc-index.html

@@ -11,9 +11,8 @@
 </head>
 <body>
   <div id="screen"></div>
-  <div id="status" class="visible" role="status" aria-live="polite">
-    <img src="./viewer-icon.svg" alt="">
-    <span id="status-title" aria-hidden="true">Replicas</span>
+  <div id="status" class="visible pending" role="status" aria-live="polite">
+    <span id="status-spinner" aria-hidden="true"></span>
     <span id="status-text">connecting…</span>
   </div>
   <div id="hint">This desktop runs Linux — ⌘ shortcuts won't work here. Use Ctrl instead (e.g. Ctrl+C / Ctrl+V).</div>

package/assets/desktop/stream-index.html

@@ -11,9 +11,8 @@
 </head>
 <body>
   <video id="screen" tabindex="0" aria-label="Replicas desktop" autoplay muted playsinline></video>
-  <div id="status" class="visible" role="status" aria-live="polite">
-    <img src="./viewer-icon.svg" alt="">
-    <span id="status-title" aria-hidden="true">Replicas</span>
+  <div id="status" class="visible pending" role="status" aria-live="polite">
+    <span id="status-spinner" aria-hidden="true"></span>
     <span id="status-text">connecting…</span>
   </div>
   <button id="audio-prompt" type="button">Enable audio</button>

package/assets/desktop/stream-viewer.css

@@ -11,8 +11,6 @@ html[data-view="native"] body, html[data-view="pixel"] body { width: max-content
   touch-action: none;
 }
 
-#status { background: var(--replicas-grid); }
-
 #audio-prompt {
   position: fixed;
   right: 16px;

package/assets/desktop/viewer-theme.css

@@ -6,14 +6,6 @@
   src: url("./geist-mono-400.woff2") format("woff2");
 }
 
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("./geist-mono-600.woff2") format("woff2");
-}
-
 @font-face {
   font-family: "Geist Mono";
   font-style: normal;
@@ -22,21 +14,10 @@
   src: url("./geist-mono-700.woff2") format("woff2");
 }
 
-@font-face {
-  font-family: "General Sans";
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("./general-sans-300.woff2") format("woff2");
-}
-
 :root {
   --replicas-green: #3cba85;
-  --replicas-mark-glow: rgb(60 186 133 / 15%);
-  --replicas-mark-filter: brightness(0.85);
   --replicas-surface: #121212;
   --replicas-ink: #ededed;
-  --replicas-title: #ffffff;
   --replicas-ink-muted: rgb(255 255 255 / 60%);
   --replicas-hairline: rgb(255 255 255 / 16%);
   --replicas-hairline-strong: rgb(255 255 255 / 50%);
@@ -50,11 +31,8 @@
 
 :root[data-theme="light"] {
   --replicas-green: #2fc487;
-  --replicas-mark-glow: rgb(47 196 135 / 40%);
-  --replicas-mark-filter: brightness(0.84);
   --replicas-surface: #f4f5f1;
   --replicas-ink: #162118;
-  --replicas-title: #162118;
   --replicas-ink-muted: rgb(22 33 24 / 60%);
   --replicas-hairline: rgb(22 33 24 / 14%);
   --replicas-hairline-strong: rgb(22 33 24 / 45%);
@@ -74,51 +52,52 @@ html, body {
 #status {
   position: fixed;
   inset: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  place-items: center;
   pointer-events: none;
+  background: var(--replicas-surface);
   opacity: 0;
   transition: opacity 180ms ease-out;
 }
 
 #status.visible { opacity: 1; }
 
-#status img {
-  width: 56px;
-  height: 56px;
-  filter: var(--replicas-mark-filter) drop-shadow(0 0 18px var(--replicas-mark-glow));
-  animation: status-pulse 2.4s ease-in-out infinite;
+#status-spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 2px solid var(--replicas-hairline);
+  border-top-color: var(--replicas-ink-muted);
+  border-radius: 50%;
+  animation: status-spin 0.8s linear infinite;
 }
 
-@keyframes status-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.55; }
+@keyframes status-spin {
+  to { transform: rotate(360deg); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  #status img { animation: none; }
+  #status-spinner { animation-duration: 2.4s; }
 }
 
-#status-title {
-  color: var(--replicas-title);
-  font-family: "General Sans", system-ui, sans-serif;
-  font-size: 30px;
-  font-weight: 300;
-  letter-spacing: -0.04em;
-  line-height: 1;
-}
+#status:not(.pending) #status-spinner { display: none; }
 
 #status-text {
   max-width: 72ch;
   padding: 0 24px;
   color: var(--replicas-ink-muted);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
+  font-size: 12px;
   line-height: 1.5;
   text-align: center;
-  text-transform: uppercase;
+}
+
+/* Progress messages stay readable to screen readers and capture scripts behind the spinner. */
+#status.pending #status-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }

package/dist/index.js

@@ -2937,7 +2937,7 @@ async function computerStatusCommand() {
 }
 
 // src/version.ts
-var COMPUTER_USE_VERSION = "0.3.9";
+var COMPUTER_USE_VERSION = "0.3.11";
 var COMPUTER_USE_PROTOCOL_VERSION = 1;
 
 // src/program.ts
@@ -3592,7 +3592,8 @@ var DESKTOP_WEBRTC_FAILURE_REASONS = {
   codec_unsupported: "browser cannot receive H.264 over WebRTC",
   negotiation_failed: "negotiation failed",
   video_timeout: "WebRTC did not decode video in time",
-  video_stalled: "WebRTC video stopped arriving"
+  video_stalled: "WebRTC video stopped arriving",
+  full_chroma_undecodable: "WebRTC could not decode H.264 High 4:4:4"
 };
 function isDesktopWebRtcFailure(value) {
   if (!isRecord(value) || typeof value.reasonCode !== "string" || !Object.hasOwn(DESKTOP_WEBRTC_FAILURE_REASONS, value.reasonCode) || typeof value.turnConfigured !== "boolean") return false;
@@ -5494,13 +5495,13 @@ async function setupComputer(options = {}) {
   mkdirSync6(viewerRoot, { recursive: true });
   cpSync(noVncCore, resolve4(viewerRoot, "core"), { recursive: true, force: true });
   cpSync(noVncVendor, resolve4(viewerRoot, "vendor"), { recursive: true, force: true });
-  for (const file of ["novnc-index.html", "viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
+  for (const file of ["novnc-index.html", "viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-700.ttf"]) {
     cpSync(resolve4(assets, file), resolve4(viewerRoot, file === "novnc-index.html" ? "index.html" : file), { force: true });
   }
   cpSync(resolve4(packageRoot2, "dist", "viewer.js"), resolve4(viewerRoot, "viewer.js"), { force: true });
   const streamRoot = "/usr/local/share/replicas/desktop/stream";
   mkdirSync6(streamRoot, { recursive: true });
-  for (const file of ["stream-index.html", "stream-viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
+  for (const file of ["stream-index.html", "stream-viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-700.ttf"]) {
     cpSync(resolve4(assets, file), resolve4(streamRoot, file), { force: true });
   }
   cpSync(resolve4(packageRoot2, "dist", "stream-viewer.js"), resolve4(streamRoot, "stream-viewer.js"), { force: true });

package/dist/stream-viewer.js

@@ -42,7 +42,8 @@ var DESKTOP_WEBRTC_FAILURE_REASONS = {
   codec_unsupported: "browser cannot receive H.264 over WebRTC",
   negotiation_failed: "negotiation failed",
   video_timeout: "WebRTC did not decode video in time",
-  video_stalled: "WebRTC video stopped arriving"
+  video_stalled: "WebRTC video stopped arriving",
+  full_chroma_undecodable: "WebRTC could not decode H.264 High 4:4:4"
 };
 
 // src/input-validation.ts
@@ -99,6 +100,13 @@ diagnostics.classList.toggle("visible", showDiagnostics);
 var webrtcFrameTimeoutMs = 6e3;
 var webrtcSkipsAfterFailure = 3;
 var pointerIntervalMs = 4;
+var fullChromaFailureKey = "replicas-desktop-4:4:4-failed";
+var skipFullChroma = false;
+var fullChromaFailure;
+try {
+  skipFullChroma = localStorage.getItem(fullChromaFailureKey) === navigator.userAgent;
+} catch {
+}
 var socket;
 var config;
 var transport;
@@ -159,8 +167,9 @@ var note = (event, detail) => {
   if (viewerEvents.push({ at: Date.now(), event, detail }) > 50) viewerEvents.shift();
 };
 var describeEvents = (list) => list.map((entry) => `${new Date(entry.at).toLocaleTimeString([], { hour12: false })} ${entry.event}${entry.detail ? ` (${entry.detail})` : ""}`).join(" \xB7 ");
-var showStatus = (message) => {
+var showStatus = (message, pending = false) => {
   statusText.textContent = message;
+  status.classList.toggle("pending", pending);
   status.classList.add("visible");
 };
 var describe = (error) => error instanceof Error ? error.message : String(error);
@@ -298,7 +307,7 @@ var configureVideo = async (next, preferHardware = true) => {
       videoDecoder = void 0;
       waitingForKeyframe = true;
       note("decoder error", error.message);
-      showStatus(`recovering video: ${error.message}`);
+      showStatus(`recovering video: ${error.message}`, true);
       if (config) void configureVideo(config, false).catch((reason) => showStatus(describe(reason)));
     }
   });
@@ -396,38 +405,40 @@ var unlockAudio = () => {
     });
   });
 };
+var captureFailure = (reasonCode, current) => {
+  const captured = {
+    id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    reasonCode,
+    elapsedMs: Math.round(performance.now() - connectionStartedAt),
+    connectionState: peer?.connectionState ?? "unavailable",
+    iceConnectionState: peer?.iceConnectionState ?? "unavailable",
+    iceGatheringState: peer?.iceGatheringState ?? "unavailable",
+    signalingState: peer?.signalingState ?? "unavailable",
+    iceTransportPolicy: request.iceTransportPolicy,
+    turnConfigured: current.iceServers?.some((server) => /^turns?:/i.test(server.urls)) ?? false,
+    serverVersion: current.serverVersion ?? "unknown",
+    serverUnavailableReason: current.webrtcUnavailableReason ?? "",
+    localCandidateTypes: [...localCandidateTypes].join(","),
+    remoteCandidateTypes: [...remoteCandidateTypes].join(","),
+    iceErrorCodes: [...iceErrorCodes].join(","),
+    candidateErrors,
+    errorName: negotiationErrorName,
+    path: route.path,
+    codec: route.codec,
+    framesDecoded: inbound?.framesDecoded ?? 0,
+    packetsReceived: inbound?.packetsReceived ?? 0,
+    packetsLost: inbound?.packetsLost ?? 0,
+    bytesReceived: inbound?.bytesReceived ?? 0,
+    lastFrameAgeMs: lastFrameAt ? Math.round(performance.now() - lastFrameAt) : -1,
+    encoderFps: telemetry?.encoder.fps ?? -1
+  };
+  state.lastWebRtcFailure = captured;
+  return captured;
+};
 var useFallback = (reasonCode, failed = false) => {
   if (transport === "websocket" || !config) return;
   const reason = reasonCode === "websocket_selected" ? "WebSocket transport selected" : reasonCode === "recent_failure" ? "recent WebRTC failure" : DESKTOP_WEBRTC_FAILURE_REASONS[reasonCode];
-  if (request.transport === "webrtc" && reasonCode !== "websocket_selected" && reasonCode !== "recent_failure") {
-    failure = {
-      id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`,
-      reasonCode,
-      elapsedMs: Math.round(performance.now() - connectionStartedAt),
-      connectionState: peer?.connectionState ?? "unavailable",
-      iceConnectionState: peer?.iceConnectionState ?? "unavailable",
-      iceGatheringState: peer?.iceGatheringState ?? "unavailable",
-      signalingState: peer?.signalingState ?? "unavailable",
-      iceTransportPolicy: request.iceTransportPolicy,
-      turnConfigured: config.iceServers?.some((server) => /^turns?:/i.test(server.urls)) ?? false,
-      serverVersion: config.serverVersion ?? "unknown",
-      serverUnavailableReason: config.webrtcUnavailableReason ?? "",
-      localCandidateTypes: [...localCandidateTypes].join(","),
-      remoteCandidateTypes: [...remoteCandidateTypes].join(","),
-      iceErrorCodes: [...iceErrorCodes].join(","),
-      candidateErrors,
-      errorName: negotiationErrorName,
-      path: route.path,
-      codec: route.codec,
-      framesDecoded: inbound?.framesDecoded ?? 0,
-      packetsReceived: inbound?.packetsReceived ?? 0,
-      packetsLost: inbound?.packetsLost ?? 0,
-      bytesReceived: inbound?.bytesReceived ?? 0,
-      lastFrameAgeMs: lastFrameAt ? Math.round(performance.now() - lastFrameAt) : -1,
-      encoderFps: telemetry?.encoder.fps ?? -1
-    };
-    state.lastWebRtcFailure = failure;
-  }
+  if (request.transport === "webrtc" && reasonCode !== "websocket_selected" && reasonCode !== "recent_failure") failure = captureFailure(reasonCode, config);
   closePeer();
   if (failed) webrtcSkips = webrtcSkipsAfterFailure;
   note("fallback to socket", reason);
@@ -503,6 +514,10 @@ var negotiate = async (sdp) => {
   try {
     await pc.setRemoteDescription({ type: "offer", sdp });
     if (peer !== pc) return;
+    if (skipFullChroma) {
+      const codecs = RTCRtpReceiver.getCapabilities("video")?.codecs.filter((codec) => h264ProfileLabel(codec.sdpFmtpLine ?? "") !== H264_PROFILES.high444.label);
+      if (codecs) pc.getTransceivers().find((transceiver) => transceiver.receiver.track.kind === "video")?.setCodecPreferences(codecs);
+    }
     const answer = await pc.createAnswer();
     if (peer !== pc) return;
     await pc.setLocalDescription(answer);
@@ -571,8 +586,17 @@ var handleServerMessage = (message, viaSocket) => {
     webrtcSkips -= 1;
     useFallback("recent_failure");
   } else if (!transport) {
-    showStatus("Establishing connection\u2026");
-    webrtcDeadline ??= setTimeout(() => useFallback("video_timeout", true), webrtcFrameTimeoutMs);
+    showStatus("Establishing connection\u2026", true);
+    webrtcDeadline ??= setTimeout(() => {
+      if (skipFullChroma || !inbound?.packetsReceived || !route.codec.endsWith(H264_PROFILES.high444.label)) {
+        useFallback("video_timeout", true);
+        return;
+      }
+      skipFullChroma = true;
+      if (config) fullChromaFailure = captureFailure("full_chroma_undecodable", config);
+      note("retrying WebRTC without 4:4:4");
+      socket?.close();
+    }, webrtcFrameTimeoutMs);
   }
 };
 var handleServerText = (data, viaSocket) => {
@@ -603,7 +627,7 @@ var connect = () => {
   route = { path: "", codec: "", decoded: "", kbps: 0, displayedFps: 0 };
   announceTransport();
   socket?.close();
-  showStatus(reconnectAttempt ? "reconnecting\u2026" : "connecting\u2026");
+  showStatus(reconnectAttempt ? "reconnecting\u2026" : "connecting\u2026", true);
   const query = new URLSearchParams([...params].filter(([key]) => ["transport", "profile", "adapt", "ice"].includes(key)));
   const nextSocket = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/stream?${query}`);
   nextSocket.binaryType = "arraybuffer";
@@ -793,6 +817,15 @@ var reportWebRtcStats = async (pc, stats) => {
     lastFrameAt = now;
     clearTimeout(webrtcDeadline);
     webrtcDeadline = void 0;
+    if (fullChromaFailure) {
+      try {
+        localStorage.setItem(fullChromaFailureKey, navigator.userAgent);
+      } catch {
+      }
+      failure = fullChromaFailure;
+      fullChromaFailure = void 0;
+      announceTransport();
+    }
   }
   if (inbound && (inbound.id !== counters.id || counters.framesDecoded < inbound.framesDecoded)) inbound = void 0;
   if (!inbound) inboundHistory = [];

package/package.json

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