UI updates and preroll buffer to 8 frames

ui/src/App.jsx

@@ -47,8 +47,11 @@ function App() {
     return (
       <main className="layout">
         <section className="panel">
-          <h2>Loading</h2>
+          <h3>Loading</h3>
           <p className="muted">Waiting for control state from the native host.</p>
+          <div className="progress-track" aria-hidden="true">
+            <div className="progress-bar is-indeterminate" />
+          </div>
         </section>
       </main>
     );
@@ -58,7 +61,7 @@ function App() {
     <main className="layout">
       <header className="app-header">
         <div>
-          <h1>Video Shader Toys</h1>
+          <h2>Video Shader Toys</h2>
           <p className="muted">Live shader stack, DeckLink status, and runtime controls.</p>
         </div>
         <div className={`status-pill${runtime.compileSucceeded ? " status-pill--ready" : " status-pill--error"}`}>
@@ -66,6 +69,27 @@ function App() {
         </div>
       </header>
 
+      <section className="panel app-summary" aria-label="Runtime summary">
+        <dl className="summary-grid">
+          <div className="summary-item">
+            <dt>Shaders</dt>
+            <dd>{shaders.length}</dd>
+          </div>
+          <div className="summary-item">
+            <dt>Layers</dt>
+            <dd>{layers.length}</dd>
+          </div>
+          <div className="summary-item">
+            <dt>Signal</dt>
+            <dd>{video.hasSignal ? "Present" : "Missing"}</dd>
+          </div>
+          <div className="summary-item">
+            <dt>Render</dt>
+            <dd>{Number(performance.renderMs ?? 0).toFixed(2)} ms</dd>
+          </div>
+        </dl>
+      </section>
+
       <section className="dashboard-grid">
         <StatusPanels app={app} performance={performance} runtime={runtime} video={video} />
         <StackPresetToolbar

ui/src/components/KvList.jsx

@@ -1,18 +1,12 @@
-export function KvList({ values }) {
+export function KvList({ values, variant = "cards" }) {
   return (
-    <dl className="kv">
+    <dl className={variant === "rows" ? "kv-rows" : "definition-grid compact"}>
       {values.map(([key, value]) => (
-        <FragmentRow key={key} label={key} value={value} />
+        <div className={variant === "rows" ? "kv-row" : "definition-card"} key={key}>
+          <dt>{key}</dt>
+          <dd>{value}</dd>
+        </div>
       ))}
     </dl>
   );
 }
-
-function FragmentRow({ label, value }) {
-  return (
-    <>
-      <dt>{label}</dt>
-      <dd>{value}</dd>
-    </>
-  );
-}

ui/src/components/LayerStack.jsx

@@ -83,8 +83,10 @@ export function LayerStack({
   return (
     <section className="panel">
       <div className="panel__header">
-        <h2>Layers</h2>
-        <p className="muted">Drag layers to reorder them. Each layer processes the output of the one above it.</p>
+        <div>
+          <h3>Layers</h3>
+          <p className="muted">Drag layers to reorder them. Each layer processes the output of the one above it.</p>
+        </div>
       </div>
 
       <div className="layer-stack">

ui/src/components/StackPresetToolbar.jsx

@@ -11,73 +11,73 @@ export function StackPresetToolbar({
     <div className="panel stack-panel">
       <div className="panel__header stack-panel__header">
         <div>
-          <h2>Stack Presets</h2>
+          <h3>Stack presets</h3>
           <p className="muted">Save or recall the current layer chain.</p>
         </div>
         <button type="button" className="stack-panel__reload" onClick={() => postJson("/api/reload", {})}>
-          Reload Shader
+          Reload shader
         </button>
       </div>
 
       <div className="stack-panel__grid">
-      <div className="toolbar__group">
-        <label htmlFor="preset-name">Save Stack</label>
-        <div className="toolbar__inline">
-          <input
-            id="preset-name"
-            type="text"
-            placeholder="Preset name"
-            value={presetName}
-            onChange={(event) => onPresetNameChange(event.target.value)}
-          />
-          <button
-            type="button"
-            disabled={!presetName.trim()}
-            onClick={() => {
-              const trimmedName = presetName.trim();
-              if (!trimmedName) {
-                return;
-              }
-              postJson("/api/stack-presets/save", { presetName: trimmedName });
-              onSelectedPresetNameChange(
-                trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
-              );
-            }}
-          >
-            Save
-          </button>
+        <div className="toolbar__group">
+          <label htmlFor="preset-name">Save stack</label>
+          <div className="toolbar__inline">
+            <input
+              id="preset-name"
+              type="text"
+              placeholder="Preset name"
+              value={presetName}
+              onChange={(event) => onPresetNameChange(event.target.value)}
+            />
+            <button
+              type="button"
+              disabled={!presetName.trim()}
+              onClick={() => {
+                const trimmedName = presetName.trim();
+                if (!trimmedName) {
+                  return;
+                }
+                postJson("/api/stack-presets/save", { presetName: trimmedName });
+                onSelectedPresetNameChange(
+                  trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
+                );
+              }}
+            >
+              Save
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="toolbar__group">
-        <label htmlFor="preset-select">Recall Stack</label>
-        <div className="toolbar__inline">
-          <select
-            id="preset-select"
-            value={selectedPresetName}
-            onChange={(event) => onSelectedPresetNameChange(event.target.value)}
-          >
-            {stackPresets.length === 0 ? <option value="">No presets</option> : null}
-            {stackPresets.map((preset) => (
-              <option key={preset} value={preset}>
-                {preset}
-              </option>
-            ))}
-          </select>
-          <button
-            type="button"
-            disabled={!selectedPresetName}
-            onClick={() => {
-              if (selectedPresetName) {
-                postJson("/api/stack-presets/load", { presetName: selectedPresetName });
-              }
-            }}
-          >
-            Recall
-          </button>
+        <div className="toolbar__group">
+          <label htmlFor="preset-select">Recall stack</label>
+          <div className="toolbar__inline">
+            <select
+              id="preset-select"
+              value={selectedPresetName}
+              onChange={(event) => onSelectedPresetNameChange(event.target.value)}
+            >
+              {stackPresets.length === 0 ? <option value="">No presets</option> : null}
+              {stackPresets.map((preset) => (
+                <option key={preset} value={preset}>
+                  {preset}
+                </option>
+              ))}
+            </select>
+            <button
+              type="button"
+              disabled={!selectedPresetName}
+              onClick={() => {
+                if (selectedPresetName) {
+                  postJson("/api/stack-presets/load", { presetName: selectedPresetName });
+                }
+              }}
+            >
+              Recall
+            </button>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   );
 }

ui/src/components/StatusPanels.jsx

@@ -5,40 +5,66 @@ function formatNumber(value, digits = 3) {
 }
 
 export function StatusPanels({ app, performance, runtime, video }) {
+  const budgetUsedPercent = Math.max(0, Math.min(100, Number(performance.budgetUsedPercent) || 0));
+
   return (
     <>
-      <div className="panel panel--runtime">
-        <h2>Runtime</h2>
-        <KvList
-          values={[
-            ["Layer Count", `${runtime.layerCount || 0}`],
-            ["Auto Reload", app.autoReload ? "On" : "Off"],
-            ["Temporal Cap", `${app.maxTemporalHistoryFrames ?? 0}`],
-            ["Control URL", `http://127.0.0.1:${app.serverPort}`],
-            ["Compile Status", runtime.compileSucceeded ? "Ready" : "Error"],
-            ["Render Time", `${formatNumber(performance.renderMs, 2)} ms`],
-            ["Smoothed Time", `${formatNumber(performance.smoothedRenderMs, 2)} ms`],
-            ["Frame Budget", `${formatNumber(performance.frameBudgetMs, 2)} ms`],
-            ["Budget Used", `${formatNumber(performance.budgetUsedPercent, 1)}%`],
-          ]}
-        />
-      </div>
+      <div className="panel panel--telemetry">
+        <div className="telemetry-header">
+          <h3>Status</h3>
+          <div className="status-badges" aria-label="Current status">
+            <span className={`mini-status${runtime.compileSucceeded ? " mini-status--ready" : " mini-status--error"}`}>
+              {runtime.compileSucceeded ? "Ready" : "Error"}
+            </span>
+            <span className={`mini-status${video.hasSignal ? " mini-status--ready" : " mini-status--error"}`}>
+              {video.hasSignal ? "Signal" : "No signal"}
+            </span>
+          </div>
+        </div>
 
-      <div className="panel panel--video">
-        <h2>Video</h2>
-        <KvList
-          values={[
-            ["Signal", video.hasSignal ? "Present" : "Missing"],
-            ["Input Mode", video.modeName || "Unknown"],
-            ["Input Resolution", `${video.width || 0} x ${video.height || 0}`],
-            ["Output Mode", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
-          ]}
-        />
+        <div className="telemetry-sections">
+          <section className="telemetry-section" aria-labelledby="runtime-status-heading">
+            <h4 id="runtime-status-heading">Runtime</h4>
+            <KvList
+              variant="rows"
+              values={[
+                ["Layers", `${runtime.layerCount || 0}`],
+                ["Auto reload", app.autoReload ? "On" : "Off"],
+                ["Temporal cap", `${app.maxTemporalHistoryFrames ?? 0}`],
+                ["Control URL", `127.0.0.1:${app.serverPort}`],
+                ["Render", `${formatNumber(performance.renderMs, 2)} ms`],
+                ["Smoothed", `${formatNumber(performance.smoothedRenderMs, 2)} ms`],
+                ["Frame budget", `${formatNumber(performance.frameBudgetMs, 2)} ms`],
+              ]}
+            />
+            <div className="meter-row">
+              <span>Budget used</span>
+              <div className="progress-track" aria-hidden="true">
+                <div className="progress-bar" style={{ width: `${budgetUsedPercent}%` }} />
+              </div>
+              <strong>{formatNumber(performance.budgetUsedPercent, 1)}%</strong>
+            </div>
+          </section>
+
+          <section className="telemetry-section" aria-labelledby="video-status-heading">
+            <h4 id="video-status-heading">Video</h4>
+            <KvList
+              variant="rows"
+              values={[
+                ["Input mode", video.modeName || "Unknown"],
+                ["Input size", `${video.width || 0} x ${video.height || 0}`],
+                ["Output", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
+              ]}
+            />
+          </section>
+        </div>
       </div>
 
       <div className="panel panel--compiler">
-        <h2>Compiler</h2>
-        <pre>{runtime.compileMessage || "No compiler output."}</pre>
+        <h3>Compiler</h3>
+        <pre className="log-panel" aria-live="polite">
+          {runtime.compileMessage || "No compiler output."}
+        </pre>
       </div>
     </>
   );