Working

ui/app.js

@@ -2,6 +2,7 @@ const shaderSelect = document.getElementById("shader-select");
 const mixSlider = document.getElementById("mix-slider");
 const bypassToggle = document.getElementById("bypass-toggle");
 const reloadButton = document.getElementById("reload-button");
+const resetParametersButton = document.getElementById("reset-parameters-button");
 const runtimeStatus = document.getElementById("runtime-status");
 const videoStatus = document.getElementById("video-status");
 const compileStatus = document.getElementById("compile-status");
@@ -141,6 +142,11 @@ function renderState(state) {
   const shaders = state.shaders || [];
   const activeShaderId = state.runtime.activeShaderId;
   const activeShader = shaders.find((shader) => shader.id === activeShaderId) || shaders[0];
+  const performance = state.performance || {};
+  const frameBudgetMs = Number(performance.frameBudgetMs || 0);
+  const renderMs = Number(performance.renderMs || 0);
+  const smoothedRenderMs = Number(performance.smoothedRenderMs || 0);
+  const budgetUsedPercent = Number(performance.budgetUsedPercent || 0);
 
   shaderSelect.innerHTML = "";
   shaders.forEach((shader) => {
@@ -156,12 +162,17 @@ function renderState(state) {
   mixSlider.value = state.runtime.mixAmount ?? 1;
   bypassToggle.checked = Boolean(state.runtime.bypass);
   compileStatus.textContent = state.runtime.compileMessage || "No compiler output.";
+  resetParametersButton.disabled = !activeShader || activeShader.parameters.length === 0;
 
   createKv(runtimeStatus, [
     ["Active Shader", activeShader?.name || "None"],
     ["Auto Reload", state.app.autoReload ? "On" : "Off"],
     ["Control URL", `http://127.0.0.1:${state.app.serverPort}`],
     ["Compile Status", state.runtime.compileSucceeded ? "Ready" : "Error"],
+    ["Render Time", `${renderMs.toFixed(2)} ms`],
+    ["Smoothed Time", `${smoothedRenderMs.toFixed(2)} ms`],
+    ["Frame Budget", `${frameBudgetMs.toFixed(2)} ms`],
+    ["Budget Used", `${budgetUsedPercent.toFixed(1)}%`],
   ]);
 
   createKv(videoStatus, [
@@ -209,4 +220,13 @@ reloadButton.addEventListener("click", () => {
   postJson("/api/reload", {});
 });
 
+resetParametersButton.addEventListener("click", () => {
+  const activeShaderId = appState?.runtime?.activeShaderId;
+  if (!activeShaderId) {
+    return;
+  }
+
+  postJson("/api/reset-parameters", { shaderId: activeShaderId });
+});
+
 loadInitialState().then(connectWebSocket);