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