replicas-computer 0.3.9 → 0.3.10

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.10";
 var COMPUTER_USE_PROTOCOL_VERSION = 1;
 
 // src/program.ts
@@ -5494,13 +5494,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

@@ -159,8 +159,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 +299,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)));
     }
   });
@@ -571,7 +572,7 @@ var handleServerMessage = (message, viaSocket) => {
     webrtcSkips -= 1;
     useFallback("recent_failure");
   } else if (!transport) {
-    showStatus("Establishing connection\u2026");
+    showStatus("Establishing connection\u2026", true);
     webrtcDeadline ??= setTimeout(() => useFallback("video_timeout", true), webrtcFrameTimeoutMs);
   }
 };
@@ -603,7 +604,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";

package/package.json

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