@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

package/src/app/i18n/catalogs/zh-CN.ts

@@ -1134,6 +1134,45 @@ const messages: ToolkitAgentChatTranslation = {
   "setup.keyProvider": "API 密钥提供商",
   "setup.keySaveFailed": "无法保存密钥。",
   "setup.storedSecurely": "仅为此应用安全存储。",
+  "accessGate.deniedTitle": "你没有访问权限",
+  "accessGate.deniedDescription": "请让所有者与你共享。",
+  "accessGate.missingTitle": "此内容不存在",
+  "accessGate.missingDescription": "链接可能有误，或内容已被删除。",
+  "accessGate.trashedTitle": "此内容在回收站中",
+  "accessGate.trashedDescription": "恢复后即可再次打开。",
+  "accessGate.signedOutTitle": "登录以继续",
+  "accessGate.signedOutDescription": "请使用有访问权限的账号登录。",
+  "accessGate.signIn": "登录",
+  "accessGate.signedInAs": "当前登录账号：{{email}}",
+  "accessGate.switchAccount": "切换账号",
+  "accessGate.requestDescription": "申请访问权限，所有者将收到通知。",
+  "accessGate.requestSent": "申请已发送，已通知所有者。",
+  "accessGate.requestAccess": "申请访问权限",
+  "accessGate.requestNoteLabel": "备注（可选）",
+  "accessGate.requestNotePlaceholder": "给所有者添加备注",
+  "accessGate.sendRequest": "发送申请",
+  "accessGate.cancel": "取消",
+  "accessGate.requestRateLimited": "当前请求过多，请稍后再试。",
+  "accessGate.requestFailed": "无法发送你的申请，请重试。",
+  "accessGate.signedOutRequestDescription": "登录后即可申请访问权限。",
+  "accessRequest.title": "{{name}} 正在申请访问权限",
+  "accessRequest.approvedTitle": "已允许访问",
+  "accessRequest.declinedTitle": "申请已拒绝",
+  "accessRequest.allow": "允许",
+  "accessRequest.decline": "拒绝",
+  "accessRequest.unavailableTitle": "你无法审核此申请",
+  "accessRequest.unavailableDescription":
+    "申请可能已被撤回，或此账号无权管理访问权限。",
+  "accessRequest.loadFailed": "无法加载此申请。",
+  "accessRequest.retry": "重试",
+  "accessRequest.decisionFailed": "无法保存你的决定，请重试。",
+  "accessRequest.stale": "其他人已处理此申请，或申请已发生变化。",
+  "share.accessRequests": "访问申请",
+  "share.accessRequestsLoadFailed": "无法加载访问申请。",
+  "share.accessRequestsNewest": "显示最新的 {{count}} 条申请。",
+  "accessRequest.emailFailed": "{{name}} 已获得访问权限，但无法向其发送邮件。",
+  "share.allowRequestFrom": "允许 {{name}}",
+  "share.declineRequestFrom": "拒绝 {{name}}",
   "share.add": "添加",
   "share.addPeopleEmail": "通过电子邮件添加人员",
   "share.addPeopleOrganization": "从您的组织添加人员",
@@ -1218,6 +1257,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.failedWithoutDetails": "没有可用的错误详情。",
   "tool.input": "输入",
   "tool.inputWithLabel": "输入 - {{label}}",
+  "tool.identifierHidden": "[标识符已隐藏]",
+  "tool.contentOmitted": "[内容已省略]",
+  "tool.circularReference": "[循环引用]",
   "tool.interrupted":
     "在完成报告前被中断——操作可能已经完成，也可能尚未完成。重试前请先检查。",
   "tool.longRunning": "仍在处理。大型更新可能需要一两分钟。",

package/src/app/i18n/catalogs/zh-TW.ts

@@ -1138,6 +1138,46 @@ const messages: ToolkitAgentChatTranslation = {
   "setup.keyProvider": "API 金鑰供應商",
   "setup.keySaveFailed": "無法儲存金鑰。",
   "setup.storedSecurely": "僅為這個應用程式安全儲存。",
+  "accessGate.deniedTitle": "你沒有存取權",
+  "accessGate.deniedDescription": "請擁有者與你共用。",
+  "accessGate.missingTitle": "此內容不存在",
+  "accessGate.missingDescription": "連結可能有誤，或內容已被刪除。",
+  "accessGate.trashedTitle": "此內容在垃圾桶中",
+  "accessGate.trashedDescription": "還原後即可再次開啟。",
+  "accessGate.signedOutTitle": "登入以繼續",
+  "accessGate.signedOutDescription": "請使用具有存取權的帳號登入。",
+  "accessGate.signIn": "登入",
+  "accessGate.signedInAs": "目前登入帳號：{{email}}",
+  "accessGate.switchAccount": "切換帳號",
+  "accessGate.requestDescription": "申請存取權後，擁有者會收到通知。",
+  "accessGate.requestSent": "申請已傳送，已通知擁有者。",
+  "accessGate.requestAccess": "申請存取權",
+  "accessGate.requestNoteLabel": "備註（選填）",
+  "accessGate.requestNotePlaceholder": "為擁有者新增備註",
+  "accessGate.sendRequest": "傳送申請",
+  "accessGate.cancel": "取消",
+  "accessGate.requestRateLimited": "目前要求過多，請稍後再試。",
+  "accessGate.requestFailed": "無法傳送你的申請，請再試一次。",
+  "accessGate.signedOutRequestDescription": "登入後即可申請存取權。",
+  "accessRequest.title": "{{name}} 正在申請存取權",
+  "accessRequest.approvedTitle": "已允許存取",
+  "accessRequest.declinedTitle": "申請已拒絕",
+  "accessRequest.allow": "允許",
+  "accessRequest.decline": "拒絕",
+  "accessRequest.unavailableTitle": "你無法審核此申請",
+  "accessRequest.unavailableDescription":
+    "申請可能已被撤回，或此帳號無權管理存取權。",
+  "accessRequest.loadFailed": "無法載入此申請。",
+  "accessRequest.retry": "重試",
+  "accessRequest.decisionFailed": "無法儲存你的決定，請再試一次。",
+  "accessRequest.stale": "其他人已處理此申請，或申請已有變更。",
+  "share.accessRequests": "存取申請",
+  "share.accessRequestsLoadFailed": "無法載入存取申請。",
+  "share.accessRequestsNewest": "顯示最新的 {{count}} 筆申請。",
+  "accessRequest.emailFailed":
+    "{{name}} 已取得存取權，但無法寄送電子郵件給對方。",
+  "share.allowRequestFrom": "允許 {{name}}",
+  "share.declineRequestFrom": "拒絕 {{name}}",
   "share.add": "加入",
   "share.addPeopleEmail": "透過電子郵件加入人員",
   "share.addPeopleOrganization": "從您的組織加入人員",
@@ -1222,6 +1262,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.failedWithoutDetails": "沒有可用的錯誤詳細資料。",
   "tool.input": "輸入",
   "tool.inputWithLabel": "輸入 - {{label}}",
+  "tool.identifierHidden": "[識別碼已隱藏]",
+  "tool.contentOmitted": "[內容已省略]",
+  "tool.circularReference": "[循環參照]",
   "tool.interrupted":
     "在完成回報前遭到中斷——操作可能已完成，也可能尚未完成。重試前請先檢查。",
   "tool.longRunning": "仍在處理。大型更新可能需要一兩分鐘。",

package/src/app/shared/StarfieldBackground.tsx

@@ -1,423 +1,4 @@
-import { useEffect, useRef } from "react";
-
-const vertexShader = `
-attribute vec2 position;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-}
-`;
-
-const fragmentShader = `
-precision highp float;
-
-uniform float iTime;
-uniform vec2 iResolution;
-uniform vec3 uPointer;
-uniform vec3 uFgColor;
-uniform vec3 uBgColor;
-uniform float uBrightness;
-uniform float uTransparent;
-
-#define S(a, b, t) smoothstep(a, b, t)
-
-const float WAVE_COUNT = 5.;
-const float WAVE_SCALE = 5.5;
-const float FLOW_ANGLE = 119.;
-const float WARP = 0.35;
-const float SPEED = 0.65;
-const float FOCUS_FOLLOW = 0.65;
-const vec2 FOCUS = vec2(0., -0.05);
-const float SPREAD = 1.2;
-const float DOT_DENSITY = 131.;
-const float DOT_SCALE = 1.35;
-const float GLOW = 1.;
-const float SEED = 56.;
-const float VIGNETTE = 1.7;
-const float TONE_GAMMA = 2.6;
-const float FADE_IN_SECONDS = 0.7;
-
-float N21(vec2 p) {
-  p += SEED;
-  vec3 a = fract(vec3(p.xyx) * vec3(213.897, 653.453, 253.098));
-  a += dot(a, a.yzx + 79.76);
-  return fract((a.x + a.y) * a.z);
-}
-
-float valueNoise(vec2 p) {
-  vec2 cell = floor(p);
-  vec2 f = fract(p);
-  float a = N21(cell);
-  float b = N21(cell + vec2(1., 0.));
-  float c = N21(cell + vec2(0., 1.));
-  float d = N21(cell + vec2(1., 1.));
-  vec2 u = f * f * (3. - 2. * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1. - u.x) + (d - b) * u.x * u.y;
-}
-
-float waveField(vec2 p, float t) {
-  float angle = radians(FLOW_ANGLE);
-  vec2 dir = vec2(cos(angle), sin(angle));
-  vec2 perp = vec2(-dir.y, dir.x);
-  vec2 warpUv = p * 1.1 + vec2(t * 0.14, t * 0.1);
-  float n1 = valueNoise(warpUv);
-  float n2 = valueNoise(warpUv + 5.2);
-  vec2 warped = p + (vec2(n1, n2) - 0.5) * WARP;
-  float along = dot(warped, dir);
-  float across = dot(warped, perp);
-  float field = 0.;
-  float weight = 0.;
-  for (float i = 0.; i < WAVE_COUNT; i += 1.) {
-    float amp = 1. / (1. + i * 0.8);
-    float freq = WAVE_SCALE * (1. + i * 0.55);
-    float drift = t * (1. + i * 0.23) + i * 2.399963;
-    float cross = sin(across * freq * 0.45 - drift * 0.7);
-    field += amp * sin(along * freq + drift + cross * 1.3);
-    weight += amp;
-  }
-  return clamp(field / max(weight, 0.001) * 0.5 + 0.5, 0., 1.);
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = (fragCoord - iResolution.xy * .5) / iResolution.y;
-  vec2 pointerUv = (uPointer.xy - iResolution.xy * .5) / iResolution.y;
-  float t = iTime * SPEED;
-  float cellSize = 1. / DOT_DENSITY;
-  vec2 cell = floor(uv / cellSize);
-  vec2 cellCenter = (cell + 0.5) * cellSize;
-  vec2 cellUv = (uv - cellCenter) / cellSize;
-  float tone = waveField(cellCenter, t);
-  vec2 focus = FOCUS + (pointerUv - FOCUS) * FOCUS_FOLLOW * uPointer.z;
-  float distFromFocus = length(cellCenter - focus) / SPREAD;
-  tone *= exp(-1.6 * distFromFocus * distFromFocus);
-  tone = pow(clamp(tone, 0., 1.), TONE_GAMMA);
-  float radius = sqrt(tone) * 0.5 * DOT_SCALE;
-  float px = (1. / iResolution.y) / cellSize;
-  float edge = max(px * 1.2, 0.004);
-  float dist = length(cellUv);
-  float dotMask = step(0.0001, tone) * (1. - S(radius - edge, radius + edge, dist));
-  float glowTerm = (1. - S(radius, radius + GLOW * 0.9, dist)) * GLOW * tone;
-  float value = clamp(dotMask + glowTerm * 0.6, 0., 1.);
-  value *= clamp(1. - dot(uv, uv) * VIGNETTE, 0., 1.);
-  value *= S(0., FADE_IN_SECONDS, iTime);
-  vec3 lit = mix(uBgColor, uFgColor, value);
-  lit += (uFgColor - uBgColor) * value * tone * (uBrightness - 1.);
-  if (uTransparent > 0.5) {
-    float alpha = clamp(value, 0., 1.);
-    vec3 waveColor = uBgColor + (uFgColor - uBgColor) * (1. + tone * (uBrightness - 1.));
-    fragColor = vec4(clamp(waveColor, 0., 1.) * alpha, alpha);
-  } else {
-    fragColor = vec4(clamp(lit, 0., 1.), 1.);
-  }
-}
-
-void main() {
-  mainImage(gl_FragColor, gl_FragCoord.xy);
-}
-`;
-
-let shaderEpoch = 0;
-
-export interface StarfieldBackgroundProps {
-  className?: string;
-  frameRate?: number;
-  transparent?: boolean;
-}
-
-export function StarfieldBackground({
-  className = "",
-  frameRate = 30,
-  transparent = false,
-}: StarfieldBackgroundProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const rafRef = useRef<number>(0);
-
-  useEffect(() => {
-    const canvasRaw = canvasRef.current;
-    const containerRaw = containerRef.current;
-    if (!canvasRaw || !containerRaw) return;
-    const canvas: HTMLCanvasElement = canvasRaw;
-    const container: HTMLElement = containerRaw;
-
-    const glRaw = canvas.getContext("webgl", {
-      alpha: transparent,
-      antialias: false,
-      preserveDrawingBuffer: false,
-    });
-    if (!glRaw) return;
-    const gl: WebGLRenderingContext = glRaw;
-
-    function compileShader(type: number, src: string) {
-      const shader = gl.createShader(type);
-      if (!shader) return null;
-      gl.shaderSource(shader, src);
-      gl.compileShader(shader);
-      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        console.error(gl.getShaderInfoLog(shader));
-        gl.deleteShader(shader);
-        return null;
-      }
-      return shader;
-    }
-
-    const vs = compileShader(gl.VERTEX_SHADER, vertexShader);
-    const fs = compileShader(gl.FRAGMENT_SHADER, fragmentShader);
-    if (!vs || !fs) return;
-
-    const program = gl.createProgram();
-    if (!program) return;
-    gl.attachShader(program, vs);
-    gl.attachShader(program, fs);
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      console.error(gl.getProgramInfoLog(program));
-      gl.deleteProgram(program);
-      gl.deleteShader(vs);
-      gl.deleteShader(fs);
-      return;
-    }
-    gl.useProgram(program);
-
-    const buf = gl.createBuffer();
-    if (!buf) {
-      gl.deleteProgram(program);
-      gl.deleteShader(vs);
-      gl.deleteShader(fs);
-      return;
-    }
-    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
-      gl.STATIC_DRAW,
-    );
-    const pos = gl.getAttribLocation(program, "position");
-    gl.enableVertexAttribArray(pos);
-    gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
-
-    const uTime = gl.getUniformLocation(program, "iTime");
-    const uRes = gl.getUniformLocation(program, "iResolution");
-    const uPointer = gl.getUniformLocation(program, "uPointer");
-    const uFgColor = gl.getUniformLocation(program, "uFgColor");
-    const uBgColor = gl.getUniformLocation(program, "uBgColor");
-    const uBrightness = gl.getUniformLocation(program, "uBrightness");
-    const uTransparent = gl.getUniformLocation(program, "uTransparent");
-    const reducedMotionQuery =
-      typeof window.matchMedia === "function"
-        ? window.matchMedia("(prefers-reduced-motion: reduce)")
-        : null;
-    let reducedMotion = reducedMotionQuery?.matches ?? false;
-
-    let dpr = 1;
-    let hasPointer = false;
-    let pointerX = 0;
-    let pointerY = 0;
-    let pointerStrength = 0;
-    let targetX = 0;
-    let targetY = 0;
-    let targetStrength = 0;
-
-    function readDarkMode() {
-      const root = document.documentElement;
-      if (root.classList.contains("dark")) return true;
-      if (root.classList.contains("light")) return false;
-      const dataTheme = root.getAttribute("data-theme");
-      if (dataTheme === "dark") return true;
-      if (dataTheme === "light") return false;
-      return (
-        window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
-      );
-    }
-
-    function readTheme() {
-      const dark = readDarkMode();
-      return dark
-        ? {
-            bg: [10 / 255, 10 / 255, 10 / 255] as [number, number, number],
-            fg: [174 / 255, 173 / 255, 172 / 255] as [number, number, number],
-            brightness: 3,
-          }
-        : {
-            bg: [250 / 255, 249 / 255, 245 / 255] as [number, number, number],
-            fg: [0, 103 / 255, 127 / 255] as [number, number, number],
-            brightness: 1.15,
-          };
-    }
-
-    let theme = readTheme();
-
-    function easePointer(allowPointer: boolean) {
-      if (!allowPointer) {
-        pointerStrength = 0;
-        return;
-      }
-      pointerX += (targetX - pointerX) * 0.12;
-      pointerY += (targetY - pointerY) * 0.12;
-      pointerStrength += (targetStrength - pointerStrength) * 0.08;
-      if (pointerStrength < 0.001 && targetStrength === 0) {
-        pointerStrength = 0;
-      }
-    }
-
-    function draw(timeSeconds: number, allowPointer = !reducedMotion) {
-      easePointer(allowPointer);
-      gl.uniform1f(uTime, timeSeconds);
-      gl.uniform2f(uRes, canvas.width, canvas.height);
-      gl.uniform3f(uPointer, pointerX, pointerY, pointerStrength);
-      gl.uniform3f(uFgColor, theme.fg[0], theme.fg[1], theme.fg[2]);
-      gl.uniform3f(uBgColor, theme.bg[0], theme.bg[1], theme.bg[2]);
-      gl.uniform1f(uBrightness, theme.brightness);
-      gl.uniform1f(uTransparent, transparent ? 1 : 0);
-      gl.drawArrays(gl.TRIANGLES, 0, 6);
-    }
-
-    function resize() {
-      const w = container.clientWidth;
-      const h = container.clientHeight;
-      dpr = Math.min(window.devicePixelRatio, 1.5);
-      canvas.width = w * dpr;
-      canvas.height = h * dpr;
-      canvas.style.width = w + "px";
-      canvas.style.height = h + "px";
-      gl.viewport(0, 0, canvas.width, canvas.height);
-      if (!hasPointer) {
-        pointerX = targetX = canvas.width * 0.5;
-        pointerY = targetY = canvas.height * 0.5;
-      }
-    }
-
-    function handlePointerMove(event: PointerEvent | MouseEvent) {
-      const rect = container.getBoundingClientRect();
-      if (rect.width <= 0 || rect.height <= 0) return;
-
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      const inside = x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
-
-      hasPointer = true;
-      targetX = x * dpr;
-      targetY = (rect.height - y) * dpr;
-      targetStrength = inside ? 1 : 0;
-    }
-
-    function fadePointer() {
-      targetStrength = 0;
-    }
-
-    resize();
-    window.addEventListener("resize", resize);
-    window.addEventListener("pointermove", handlePointerMove, {
-      passive: true,
-    });
-    window.addEventListener("mousemove", handlePointerMove, {
-      passive: true,
-    });
-    document.addEventListener("pointerleave", fadePointer, {
-      passive: true,
-    });
-    window.addEventListener("blur", fadePointer);
-
-    const observer = new MutationObserver(() => {
-      theme = readTheme();
-      if (reducedMotion) draw(20, false);
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"],
-    });
-
-    if (!shaderEpoch) shaderEpoch = performance.now();
-    const startTime = shaderEpoch;
-    let lastFrame = 0;
-    const frameBudget = 1000 / Math.max(1, frameRate);
-    const reducedMotionStaticTime = 20;
-
-    function render(now: number) {
-      if (reducedMotion) {
-        rafRef.current = 0;
-        return;
-      }
-      rafRef.current = requestAnimationFrame(render);
-
-      if (now - lastFrame < frameBudget) return;
-      lastFrame = now;
-
-      const rect = container.getBoundingClientRect();
-      if (rect.bottom < 0 || rect.top > window.innerHeight) return;
-
-      draw((now - startTime) * 0.001);
-    }
-
-    function startAnimation() {
-      if (!rafRef.current) {
-        rafRef.current = requestAnimationFrame(render);
-      }
-    }
-
-    function stopAnimation() {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = 0;
-      }
-    }
-
-    function handleReducedMotionChange() {
-      reducedMotion = reducedMotionQuery?.matches ?? false;
-      if (reducedMotion) {
-        stopAnimation();
-        lastFrame = 0;
-        draw(reducedMotionStaticTime, false);
-      } else {
-        startAnimation();
-      }
-    }
-
-    draw(
-      reducedMotion
-        ? reducedMotionStaticTime
-        : (performance.now() - startTime) * 0.001,
-      !reducedMotion,
-    );
-    if (reducedMotionQuery) {
-      reducedMotionQuery.addEventListener("change", handleReducedMotionChange);
-    }
-    if (!reducedMotion) startAnimation();
-
-    return () => {
-      stopAnimation();
-      if (reducedMotionQuery) {
-        reducedMotionQuery.removeEventListener(
-          "change",
-          handleReducedMotionChange,
-        );
-      }
-      observer.disconnect();
-      window.removeEventListener("resize", resize);
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("mousemove", handlePointerMove);
-      document.removeEventListener("pointerleave", fadePointer);
-      window.removeEventListener("blur", fadePointer);
-      gl.deleteProgram(program);
-      gl.deleteShader(vs);
-      gl.deleteShader(fs);
-      gl.deleteBuffer(buf);
-      gl.getExtension("WEBGL_lose_context")?.loseContext();
-    };
-  }, [frameRate, transparent]);
-
-  return (
-    <div
-      ref={containerRef}
-      aria-hidden="true"
-      className={className}
-      style={{ width: "100%", height: "100%", pointerEvents: "none" }}
-      data-agent-native-starfield
-      data-agent-native-starfield-transparent={transparent ? "true" : undefined}
-    >
-      <canvas
-        ref={canvasRef}
-        style={{ display: "block", width: "100%", height: "100%" }}
-      />
-    </div>
-  );
-}
+export {
+  WebGlWaveBackground as StarfieldBackground,
+  type WebGlWaveBackgroundProps as StarfieldBackgroundProps,
+} from "./WebGlWaveBackground.js";

package/src/app/shared/WaveBackground.spec.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { WaveBackground } from "./WaveBackground.js";
+
+const { oceanMount, oceanReady, probeWebgpuSupport, webGlMount } = vi.hoisted(
+  () => ({
+    oceanMount: vi.fn(),
+    oceanReady: { current: undefined as (() => void) | undefined },
+    probeWebgpuSupport: vi.fn(),
+    webGlMount: vi.fn(),
+  }),
+);
+
+vi.mock("./WebGlWaveBackground.js", () => ({
+  WebGlWaveBackground: () => {
+    webGlMount();
+    return <div data-agent-native-wave="true" data-testid="webgl-wave" />;
+  },
+}));
+
+vi.mock("./ocean/hero-ocean-background.js", () => ({
+  HeroOceanBackground: ({ onReady }: { onReady: () => void }) => {
+    oceanMount();
+    oceanReady.current = onReady;
+    return <div data-agent-native-wave="true" data-testid="ocean-wave" />;
+  },
+}));
+
+vi.mock("./ocean/webgpu-support.js", () => ({ probeWebgpuSupport }));
+
+const repoRoot = resolve(process.cwd(), "../..");
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+  oceanReady.current = undefined;
+});
+
+describe("WaveBackground", () => {
+  it("keeps signup, homepage, and Calendar booking on the shared renderer", () => {
+    const consumers = [
+      resolve(repoRoot, "packages/toolkit/src/app/auth/AuthPage.tsx"),
+      resolve(
+        repoRoot,
+        "packages/docs/app/components/website-redesign/hero-background.tsx",
+      ),
+      resolve(repoRoot, "templates/calendar/app/pages/BookingPage.tsx"),
+    ];
+
+    for (const path of consumers) {
+      const source = readFileSync(path, "utf8");
+      expect(source, path).toContain("WaveBackground");
+      expect(source, path).not.toMatch(
+        /StarfieldBackground|HeroOceanBackground|HeroShaderBackground/,
+      );
+    }
+  });
+
+  it("keeps the WebGL wave visible while checking WebGPU support", () => {
+    probeWebgpuSupport.mockReturnValue(new Promise(() => {}));
+
+    render(<WaveBackground className="fixed inset-0" />);
+
+    expect(screen.getByTestId("webgl-wave")).toBeDefined();
+    expect(webGlMount).toHaveBeenCalledOnce();
+    expect(oceanMount).not.toHaveBeenCalled();
+  });
+
+  it("keeps the WebGL wave until the Calendar ocean draws its first frame", async () => {
+    probeWebgpuSupport.mockResolvedValue("supported");
+
+    render(<WaveBackground />);
+
+    expect(screen.getByTestId("webgl-wave")).toBeDefined();
+    await waitFor(() => expect(screen.getByTestId("ocean-wave")).toBeDefined());
+    expect(screen.getByTestId("webgl-wave")).toBeDefined();
+    expect(oceanMount).toHaveBeenCalledOnce();
+
+    act(() => oceanReady.current?.());
+
+    await waitFor(() => expect(screen.queryByTestId("webgl-wave")).toBeNull());
+  });
+
+  it.each(["unsupported", "probe-failed"] as const)(
+    "keeps the WebGL wave when WebGPU is %s",
+    async (support) => {
+      probeWebgpuSupport.mockResolvedValue(support);
+
+      render(<WaveBackground />);
+
+      await waitFor(() =>
+        expect(screen.getByTestId("webgl-wave")).toBeDefined(),
+      );
+      expect(oceanMount).not.toHaveBeenCalled();
+    },
+  );
+});