viveworker 0.8.0 → 0.8.2

package/web/remote-pairing/transport.js

@@ -84,6 +84,10 @@ const DEFAULT_BACKOFF_MS = [1_000, 2_000, 4_000, 8_000, 16_000, 30_000];
 const DEFAULT_HANDSHAKE_TIMEOUT_MS = 30_000;
 const MAX_PRE_CONNECT_BACKOFF_MS = 4_000;
 const RELAY_RESET_RECONNECT_MS = 250;
+const DEFAULT_FAILURE_WINDOW_MS = 60_000;
+const DEFAULT_FAILURE_THRESHOLD = 4;
+const DEFAULT_CIRCUIT_BREAKER_MS = 60_000;
+const DEFAULT_MAX_CIRCUIT_BREAKER_MS = 10 * 60_000;
 const DEFAULT_PROLOGUE = new TextEncoder().encode("viveworker/remote-pairing/v1");
 
 // CloseEvent codes we emit. 1000 is normal; 4xxx is application-defined.
@@ -113,6 +117,10 @@ const CLOSE_RELAY_RESET_SESSION = 4004;
  * @property {number} [pingIntervalMs]
  * @property {number[]} [backoffMs]
  * @property {number} [handshakeTimeoutMs]
+ * @property {number} [failureWindowMs]
+ * @property {number} [failureThreshold]
+ * @property {number} [circuitBreakerMs]
+ * @property {number} [maxCircuitBreakerMs]
  * @property {typeof WebSocket} [WebSocketImpl]     injectable for Node-side tests
  * @property {{debug?: Function, warn?: Function}} [logger]
  */
@@ -154,6 +162,10 @@ export class RemotePairingTransport {
     this._backoffMs = (opts.backoffMs ?? DEFAULT_BACKOFF_MS).slice();
     if (this._backoffMs.length === 0) this._backoffMs = [1_000];
     this._handshakeTimeoutMs = opts.handshakeTimeoutMs ?? DEFAULT_HANDSHAKE_TIMEOUT_MS;
+    this._failureWindowMs = opts.failureWindowMs ?? DEFAULT_FAILURE_WINDOW_MS;
+    this._failureThreshold = opts.failureThreshold ?? DEFAULT_FAILURE_THRESHOLD;
+    this._circuitBreakerMs = opts.circuitBreakerMs ?? DEFAULT_CIRCUIT_BREAKER_MS;
+    this._maxCircuitBreakerMs = opts.maxCircuitBreakerMs ?? DEFAULT_MAX_CIRCUIT_BREAKER_MS;
 
     this._WebSocketImpl = opts.WebSocketImpl ?? globalThis.WebSocket;
     if (typeof this._WebSocketImpl !== "function") {
@@ -188,6 +200,12 @@ export class RemotePairingTransport {
     this._pingTimer = null;
     /** @type {ReturnType<typeof setTimeout> | null} */
     this._handshakeTimer = null;
+    /** @type {number[]} recent reconnect-triggering failures. */
+    this._recentFailureAtMs = [];
+    /** If > Date.now(), reconnect attempts are intentionally delayed. */
+    this._circuitOpenUntilMs = 0;
+    /** Consecutive circuit openings, used to lengthen persistent outages. */
+    this._circuitOpenCount = 0;
 
     // ---- crypto state (persists across reconnects until RESUME_FAIL) ----
     /** @type {import("../remote-pairing.bundle.js").NoiseSession | null} */
@@ -320,6 +338,12 @@ export class RemotePairingTransport {
 
   _open() {
     this._cancelReconnectTimer();
+    const circuitDelay = this._circuitDelayMs();
+    if (circuitDelay > 0) {
+      this._log.warn?.(`relay reconnect circuit open for ${circuitDelay}ms`);
+      this._scheduleReconnect();
+      return;
+    }
     this._setState(STATE.OPENING);
 
     const url =
@@ -484,6 +508,12 @@ export class RemotePairingTransport {
 
     this._log.debug?.(`ws closed code=${evt?.code} reason=${evt?.reason}`);
     this._setState(STATE.DISCONNECTED, { code: evt?.code, reason: evt?.reason });
+    if (Number(evt?.code) !== CLOSE_NORMAL) {
+      this._recordReconnectFailure({
+        code: Number(evt?.code) || 0,
+        reason: String(evt?.reason || ""),
+      });
+    }
     if (isRelayReset) {
       this._scheduleRelayResetReconnect();
     } else {
@@ -619,9 +649,10 @@ export class RemotePairingTransport {
     const idx = Math.min(this._reconnectAttempt, this._backoffMs.length - 1);
     const waitingForFirstConnect = this._connectPromise != null && this._session == null;
     const rawDelay = this._backoffMs[idx];
-    const delay = waitingForFirstConnect
+    const backoffDelay = waitingForFirstConnect
       ? Math.min(rawDelay, MAX_PRE_CONNECT_BACKOFF_MS)
       : rawDelay;
+    const delay = Math.max(backoffDelay, this._circuitDelayMs());
     this._reconnectAttempt += 1;
     this._log.debug?.(`reconnect in ${delay}ms (attempt ${this._reconnectAttempt})`);
     this._reconnectTimer = setTimeout(() => {
@@ -636,7 +667,7 @@ export class RemotePairingTransport {
     // rendezvous again. Treat it as a protocol reset, not a network failure,
     // so app boot does not sit behind the exponential backoff ladder.
     this._reconnectAttempt = 0;
-    const delay = RELAY_RESET_RECONNECT_MS;
+    const delay = Math.max(RELAY_RESET_RECONNECT_MS, this._circuitDelayMs());
     this._log.debug?.(`reconnect in ${delay}ms (relay reset)`);
     this._reconnectTimer = setTimeout(() => {
       this._reconnectTimer = null;
@@ -713,6 +744,9 @@ export class RemotePairingTransport {
     this._state = newState;
     if (newState === STATE.CONNECTED) {
       this._reconnectAttempt = 0;
+      this._recentFailureAtMs = [];
+      this._circuitOpenUntilMs = 0;
+      this._circuitOpenCount = 0;
     }
     try {
       this._onStateChange(newState, prev, info);
@@ -729,6 +763,10 @@ export class RemotePairingTransport {
   }
 
   _fail(err) {
+    this._recordReconnectFailure({
+      code: CLOSE_FATAL,
+      reason: err?.message || "fatal-error",
+    });
     this._setState(STATE.FAILED, { error: err });
     this._stopPing();
     this._stopHandshakeTimer();
@@ -748,6 +786,33 @@ export class RemotePairingTransport {
     this._session = null;
     this._handshake = null;
   }
+
+  _recordReconnectFailure(info = {}) {
+    const now = Date.now();
+    const windowMs = Math.max(1_000, Number(this._failureWindowMs) || DEFAULT_FAILURE_WINDOW_MS);
+    this._recentFailureAtMs = this._recentFailureAtMs.filter((at) => now - at <= windowMs);
+    this._recentFailureAtMs.push(now);
+    const threshold = Math.max(2, Math.floor(Number(this._failureThreshold) || DEFAULT_FAILURE_THRESHOLD));
+    if (this._recentFailureAtMs.length < threshold) return;
+
+    const baseCooldownMs = Math.max(1_000, Number(this._circuitBreakerMs) || DEFAULT_CIRCUIT_BREAKER_MS);
+    const maxCooldownMs = Math.max(baseCooldownMs, Number(this._maxCircuitBreakerMs) || DEFAULT_MAX_CIRCUIT_BREAKER_MS);
+    const multiplier = Math.min(16, 2 ** this._circuitOpenCount);
+    const cooldownMs = Math.min(maxCooldownMs, baseCooldownMs * multiplier);
+    this._circuitOpenCount += 1;
+    this._circuitOpenUntilMs = Math.max(this._circuitOpenUntilMs, now + cooldownMs);
+    this._recentFailureAtMs = [];
+    this._dropNoiseState();
+    this._log.warn?.(
+      `relay reconnect circuit opened for ${cooldownMs}ms` +
+      `${info?.code ? ` after close=${info.code}` : ""}` +
+      `${info?.reason ? ` (${String(info.reason).slice(0, 64)})` : ""}`,
+    );
+  }
+
+  _circuitDelayMs() {
+    return Math.max(0, this._circuitOpenUntilMs - Date.now());
+  }
 }
 
 // ---------------------------------------------------------------------------

package/web/sw.js

@@ -1,6 +1,7 @@
-const CACHE_NAME = "viveworker-v127";
-const APP_BUILD_ID = "20260428-remote-token-refresh";
+const APP_BUILD_ID = "__VIVEWORKER_APP_BUILD_ID__";
+const CACHE_NAME = `viveworker-${APP_BUILD_ID}`;
 const APP_SCRIPT_URL = `/app.js?v=${APP_BUILD_ID}`;
+const APP_STYLE_URL = `/app.css?v=${APP_BUILD_ID}`;
 const API_ROUTER_URL = `/remote-pairing/api-router.js?v=${APP_BUILD_ID}`;
 const NOTIFICATION_INTENT_CACHE = "viveworker-notification-intent-v1";
 const NOTIFICATION_INTENT_PATH = "/__viveworker_notification_intent__";
@@ -14,7 +15,7 @@ const NOTIFICATION_INTENT_PATH = "/__viveworker_notification_intent__";
 const APP_ASSETS = [
   "/app",
   APP_SCRIPT_URL,
-  "/app.css",
+  APP_STYLE_URL,
   "/app.js",
   "/i18n.js",
   "/icons/viveworker-v-pulse.svg",
@@ -31,10 +32,12 @@ const APP_ROUTES = new Set(["/", "/app", "/app/"]);
 const CACHED_PATHS = new Set(APP_ASSETS.map((asset) => new URL(asset, self.location.origin).pathname));
 const VERSIONED_CACHE_PATHS = new Set([
   "/app.js",
+  "/app.css",
   "/remote-pairing/api-router.js",
 ]);
 const NETWORK_FIRST_PATHS = new Set([
   "/app.js",
+  "/app.css",
   "/remote-pairing/api-router.js",
 ]);
 const APP_NAVIGATION_NETWORK_TIMEOUT_MS = 1800;
@@ -49,7 +52,7 @@ const APP_SHELL_FALLBACK_HTML = `<!doctype html>
     <link rel="manifest" href="/manifest.webmanifest">
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="192x192" href="/icons/viveworker-icon-192.png">
-    <link rel="stylesheet" href="/app.css">
+    <link rel="stylesheet" href="${APP_STYLE_URL}">
     <style>
       html, body { min-height: 100%; margin: 0; background: #081015; color: #f5fbff; }
       .boot-splash { position: fixed; inset: 0; display: grid; place-items: center; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; background: radial-gradient(circle at 50% 18%, rgba(47, 143, 103, 0.22), transparent 30%), linear-gradient(180deg, #081015 0%, #091015 100%); }
@@ -150,14 +153,14 @@ self.addEventListener("push", (event) => {
   } catch {
     payload = {
       title: "viveworker",
-      body: event.data ? event.data.text() : "A new Codex item is available.",
+      body: event.data ? event.data.text() : fallbackNotificationBody(),
       data: { url: "/app" },
     };
   }
 
   const title = payload.title || "viveworker";
   const options = {
-    body: payload.body || "A new Codex item is available.",
+    body: payload.body || fallbackNotificationBody(),
     tag: payload.tag || "",
     data: payload.data || { url: "/app" },
   };
@@ -175,6 +178,13 @@ self.addEventListener("push", (event) => {
   })());
 });
 
+function fallbackNotificationBody() {
+  const language = String(self.navigator?.language || "").toLowerCase();
+  return language.startsWith("ja")
+    ? "viveworker を開いて確認してください。"
+    : "Open viveworker for details.";
+}
+
 self.addEventListener("notificationclick", (event) => {
   event.preventDefault?.();
   event.notification.close();

package/web/icons/viveworker-beacon-v.svg

@@ -1,19 +0,0 @@
-<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="bg" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(524 120) rotate(90) scale(920 834)">
-      <stop stop-color="#132432"/>
-      <stop offset="0.45" stop-color="#0C151C"/>
-      <stop offset="1" stop-color="#091016"/>
-    </radialGradient>
-    <radialGradient id="signal" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(512 244) rotate(90) scale(182 244)">
-      <stop stop-color="#84CBFF" stop-opacity="0.3"/>
-      <stop offset="1" stop-color="#84CBFF" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="1024" height="1024" rx="224" fill="url(#bg)"/>
-  <ellipse cx="512" cy="246" rx="184" ry="132" fill="url(#signal)"/>
-  <path d="M322 370L477 718C493 754 531 754 547 718L702 370" stroke="#F4FAFF" stroke-width="96" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="512" cy="228" r="28" fill="#8CCBFF"/>
-  <path d="M438 216C438 175 471 142 512 142C553 142 586 175 586 216" stroke="#8CCBFF" stroke-width="30" stroke-linecap="round"/>
-  <path d="M384 220C384 149 441 92 512 92C583 92 640 149 640 220" stroke="#8CCBFF" stroke-width="20" stroke-linecap="round" opacity="0.95"/>
-</svg>

package/web/icons/viveworker-v-check.svg

@@ -1,19 +0,0 @@
-<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="bg" x1="188" y1="122" x2="841" y2="931" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#16222B"/>
-      <stop offset="0.48" stop-color="#0D141A"/>
-      <stop offset="1" stop-color="#0A1116"/>
-    </linearGradient>
-    <radialGradient id="accent" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(780 252) rotate(128.783) scale(251.649)">
-      <stop stop-color="#8BE9C1" stop-opacity="0.34"/>
-      <stop offset="1" stop-color="#8BE9C1" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="1024" height="1024" rx="224" fill="url(#bg)"/>
-  <circle cx="781" cy="254" r="120" fill="url(#accent)"/>
-  <path d="M286 300L468 730C486 772 538 772 556 730L738 300" stroke="#F8FBFE" stroke-width="108" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="760" cy="276" r="116" fill="#8BE9C1"/>
-  <circle cx="760" cy="276" r="94" fill="#132028" fill-opacity="0.2"/>
-  <path d="M707 277L741 312L815 238" stroke="#0C161C" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>