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);

ui/index.html

@@ -42,6 +42,7 @@
     <section class="panel">
       <div class="panel__header">
         <h2>Parameters</h2>
+        <button id="reset-parameters-button" type="button">Reset Parameters</button>
       </div>
       <form id="parameter-form" class="parameter-grid"></form>
     </section>

ui/styles.css

@@ -55,9 +55,18 @@ body {
 }
 
 .panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   margin-bottom: 12px;
 }
 
+.panel__header button {
+  width: auto;
+  min-width: 160px;
+}
+
 .status-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }