feat: harden end-to-end simulation workflow

packages/ui/landing.js

@@ -1,12 +1,14 @@
+import { detectWebGpuCapability } from "./webgpu-status.js";
+
 const statusElement = document.querySelector("#webgpu-status");
 
 if (!(statusElement instanceof HTMLElement)) {
   throw new Error("WebGPU status element is missing.");
 }
 
-if ("gpu" in navigator) {
-  statusElement.textContent = "WebGPU 사용 가능";
-} else {
-  statusElement.textContent = "CPU fallback 사용 예정";
-  statusElement.classList.add("status-chip--warning");
-}
+detectWebGpuCapability().then((capability) => {
+  statusElement.textContent = capability.label;
+  statusElement.title = capability.detail;
+  statusElement.classList.toggle("status-chip--warning", !capability.available);
+  statusElement.dataset.backendAvailable = capability.available ? "webgpu" : "cpu";
+});

packages/ui/runtime-status.js

@@ -1,8 +1,13 @@
-const statusElements = document.querySelectorAll("[data-runtime-status]");
-const hasWebGpu = "gpu" in navigator;
+import { detectWebGpuCapability } from "./webgpu-status.js";
 
-for (const statusElement of statusElements) {
-  statusElement.textContent = hasWebGpu ? "WebGPU 준비됨" : "CPU fallback";
-  statusElement.classList.toggle("status-chip--warning", !hasWebGpu);
-  statusElement.classList.toggle("status-chip--neutral", hasWebGpu);
-}
+const statusElements = document.querySelectorAll("[data-runtime-status]");
+
+detectWebGpuCapability().then((capability) => {
+  for (const statusElement of statusElements) {
+    statusElement.textContent = capability.label;
+    statusElement.title = capability.detail;
+    statusElement.classList.toggle("status-chip--warning", !capability.available);
+    statusElement.classList.toggle("status-chip--neutral", capability.available);
+    statusElement.dataset.backendAvailable = capability.available ? "webgpu" : "cpu";
+  }
+});

packages/ui/webgpu-status.js

@@ -0,0 +1,33 @@
+let capabilityPromise;
+
+export function detectWebGpuCapability() {
+  capabilityPromise ??= detect();
+  return capabilityPromise;
+}
+
+async function detect() {
+  if (!navigator.gpu) {
+    return { available: false, label: "CPU fallback", detail: "WebGPU API 없음" };
+  }
+  try {
+    const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
+    if (!adapter) {
+      return { available: false, label: "CPU fallback", detail: "WebGPU adapter 없음" };
+    }
+    const info = adapter.info;
+    const adapterName = [info?.vendor, info?.architecture || info?.device]
+      .filter(Boolean)
+      .join(" · ");
+    return {
+      available: true,
+      label: adapterName ? `WebGPU · ${adapterName}` : "WebGPU adapter 준비됨",
+      detail: adapterName || "WebGPU adapter 준비됨",
+    };
+  } catch (error) {
+    return {
+      available: false,
+      label: "CPU fallback",
+      detail: error instanceof Error ? error.message : String(error),
+    };
+  }
+}