From 50bdd7b2bd186b4d57b435f266d599524d7119d0 Mon Sep 17 00:00:00 2001
From: Aiden <awils27@hotmail.com>
Date: Sun, 3 May 2026 12:03:20 +1000
Subject: [PATCH] app adjustments

---
 README.md                                |  14 ++
 ui/src/App.jsx                           |  27 ++-
 ui/src/components/StackPresetToolbar.jsx |  24 ++-
 ui/src/components/StatusPanels.jsx       |  10 +-
 ui/src/styles.css                        | 235 +++++++++++++++++------
 5 files changed, 228 insertions(+), 82 deletions(-)

diff --git a/README.md b/README.md
index af3f7cd..7d2f0d9 100644
--- a/README.md
+++ b/README.md
@@ -119,18 +119,32 @@ Current native test coverage includes:
 {
   "shaderLibrary": "shaders",
   "serverPort": 8080,
+  "videoFormat": "1080p",
+  "frameRate": "59.94",
   "autoReload": true,
   "maxTemporalHistoryFrames": 12,
   "enableExternalKeying": true
 }
 ```
 
+`videoFormat` and `frameRate` select the DeckLink capture/playout display mode. Common examples include `720p`/`50`, `720p`/`59.94`, `1080i`/`50`, `1080i`/`59.94`, `1080p`/`25`, `1080p`/`50`, `1080p`/`59.94`, and `2160p`/`59.94`, depending on card support.
+
 The control UI is available at:
 
 ```text
 http://127.0.0.1:<serverPort>
 ```
 
+## Control API
+
+The local REST control API is documented as an OpenAPI/Swagger spec:
+
+```text
+docs/openapi.yaml
+```
+
+Load that file in Swagger UI, Redoc, or another OpenAPI viewer to inspect the `/api/state`, layer control, stack preset, and reload endpoints. Live state updates are also sent over the `/ws` WebSocket.
+
 ## Shader Packages
 
 Each shader package lives under:
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index 1db12d4..1940394 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -56,15 +56,26 @@ function App() {
 
   return (
     <main className="layout">
-      <StackPresetToolbar
-        presetName={presetName}
-        selectedPresetName={selectedPresetName}
-        stackPresets={stackPresets}
-        onPresetNameChange={setPresetName}
-        onSelectedPresetNameChange={setSelectedPresetName}
-      />
+      <header className="app-header">
+        <div>
+          <h1>Video Shader Toys</h1>
+          <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"}`}>
+          {runtime.compileSucceeded ? "Ready" : "Compile Error"}
+        </div>
+      </header>
 
-      <StatusPanels app={app} performance={performance} runtime={runtime} video={video} />
+      <section className="dashboard-grid">
+        <StatusPanels app={app} performance={performance} runtime={runtime} video={video} />
+        <StackPresetToolbar
+          presetName={presetName}
+          selectedPresetName={selectedPresetName}
+          stackPresets={stackPresets}
+          onPresetNameChange={setPresetName}
+          onSelectedPresetNameChange={setSelectedPresetName}
+        />
+      </section>
 
       <LayerStack
         dragLayerId={dragLayerId}
diff --git a/ui/src/components/StackPresetToolbar.jsx b/ui/src/components/StackPresetToolbar.jsx
index 61f3639..d843f47 100644
--- a/ui/src/components/StackPresetToolbar.jsx
+++ b/ui/src/components/StackPresetToolbar.jsx
@@ -8,8 +8,19 @@ export function StackPresetToolbar({
   onSelectedPresetNameChange,
 }) {
   return (
-    <section className="toolbar">
-      <div className="toolbar__group toolbar__group--wide">
+    <div className="panel stack-panel">
+      <div className="panel__header stack-panel__header">
+        <div>
+          <h2>Stack Presets</h2>
+          <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
+        </button>
+      </div>
+
+      <div className="stack-panel__grid">
+      <div className="toolbar__group">
         <label htmlFor="preset-name">Save Stack</label>
         <div className="toolbar__inline">
           <input
@@ -38,7 +49,7 @@ export function StackPresetToolbar({
         </div>
       </div>
 
-      <div className="toolbar__group toolbar__group--wide">
+      <div className="toolbar__group">
         <label htmlFor="preset-select">Recall Stack</label>
         <div className="toolbar__inline">
           <select
@@ -66,10 +77,7 @@ export function StackPresetToolbar({
           </button>
         </div>
       </div>
-
-      <button type="button" onClick={() => postJson("/api/reload", {})}>
-        Reload Shader
-      </button>
-    </section>
+      </div>
+    </div>
   );
 }
diff --git a/ui/src/components/StatusPanels.jsx b/ui/src/components/StatusPanels.jsx
index 3f859c1..9938e43 100644
--- a/ui/src/components/StatusPanels.jsx
+++ b/ui/src/components/StatusPanels.jsx
@@ -6,8 +6,8 @@ function formatNumber(value, digits = 3) {
 
 export function StatusPanels({ app, performance, runtime, video }) {
   return (
-    <section className="status-grid">
-      <div className="panel">
+    <>
+      <div className="panel panel--runtime">
         <h2>Runtime</h2>
         <KvList
           values={[
@@ -24,7 +24,7 @@ export function StatusPanels({ app, performance, runtime, video }) {
         />
       </div>
 
-      <div className="panel">
+      <div className="panel panel--video">
         <h2>Video</h2>
         <KvList
           values={[
@@ -35,10 +35,10 @@ export function StatusPanels({ app, performance, runtime, video }) {
         />
       </div>
 
-      <div className="panel panel--full">
+      <div className="panel panel--compiler">
         <h2>Compiler</h2>
         <pre>{runtime.compileMessage || "No compiler output."}</pre>
       </div>
-    </section>
+    </>
   );
 }
diff --git a/ui/src/styles.css b/ui/src/styles.css
index c2a0702..152957e 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -1,8 +1,8 @@
 :root {
   color-scheme: dark;
-  font-family: "Segoe UI", sans-serif;
-  background: #111318;
-  color: #edf1f7;
+  font-family: Inter, "Segoe UI", system-ui, sans-serif;
+  background: #0c1017;
+  color: #eef4ff;
 }
 
 * {
@@ -17,7 +17,9 @@ body,
 
 body {
   margin: 0;
-  background: #111318;
+  background:
+    radial-gradient(circle at 18% -12%, rgba(58, 113, 193, 0.22), transparent 30%),
+    linear-gradient(180deg, #0d1119 0%, #090d13 100%);
 }
 
 button,
@@ -32,7 +34,14 @@ h2,
 h3 {
   margin: 0;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 650;
+}
+
+h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 750;
+  letter-spacing: 0;
 }
 
 input[type="range"] {
@@ -40,60 +49,111 @@ input[type="range"] {
 }
 
 input[type="number"],
+input[type="text"],
 select,
 button {
   width: 100%;
-  min-height: 36px;
+  min-height: 38px;
   border-radius: 6px;
-  border: 1px solid #38445b;
-  background: #0f131a;
+  border: 1px solid #303a4d;
+  background: #101722;
   color: inherit;
   padding: 8px 10px;
+  outline: none;
+}
+
+input:focus,
+select:focus,
+button:focus-visible {
+  border-color: #6d95d8;
+  box-shadow: 0 0 0 3px rgba(109, 149, 216, 0.18);
 }
 
 button {
   cursor: pointer;
-  background: #22314a;
+  background: #213553;
+  border-color: #385174;
+  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+button:hover:not(:disabled) {
+  background: #294266;
+  border-color: #5172a0;
+}
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
 }
 
 button:disabled {
   cursor: default;
-  opacity: 0.55;
+  opacity: 0.48;
 }
 
 pre {
   margin: 0;
   white-space: pre-wrap;
-  color: #c9d5ea;
+  color: #cbd7ea;
 }
 
 .layout {
-  max-width: 1200px;
+  width: calc(100% - 40px);
   margin: 0 auto;
-  padding: 24px;
+  padding: 22px 0 28px;
   display: grid;
-  gap: 20px;
+  gap: 18px;
 }
 
-.toolbar,
-.status-grid,
-.parameter-grid {
-  display: grid;
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 16px;
+  min-height: 64px;
 }
 
-.toolbar {
-  justify-content: end;
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 112px;
+  min-height: 34px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid #31405a;
+  background: #101722;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.status-pill--ready {
+  color: #bff0cc;
+  border-color: rgba(96, 177, 116, 0.45);
+  background: rgba(41, 94, 58, 0.32);
+}
+
+.status-pill--error {
+  color: #ffd0cf;
+  border-color: rgba(222, 101, 101, 0.55);
+  background: rgba(112, 45, 48, 0.32);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: stretch;
 }
 
 .panel {
-  background: #181c24;
-  border: 1px solid #2a3140;
+  background: rgba(20, 26, 36, 0.92);
+  border: 1px solid #263144;
   border-radius: 8px;
   padding: 16px;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
 }
 
-.panel--full {
+.panel--compiler {
   grid-column: 1 / -1;
 }
 
@@ -102,31 +162,66 @@ pre {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
 }
 
 .panel__header button {
   width: auto;
-  min-width: 160px;
-}
-
-.status-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-width: 150px;
 }
 
 .kv {
   display: grid;
-  grid-template-columns: 160px 1fr;
-  gap: 8px 12px;
-  margin: 0;
+  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1fr);
+  gap: 9px 14px;
+  margin: 12px 0 0;
 }
 
 .kv dt {
-  color: #94a4c2;
+  color: #98aad0;
 }
 
 .kv dd {
+  min-width: 0;
   margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.stack-panel {
+  grid-column: 1 / -1;
+  display: grid;
+  align-content: start;
+  gap: 14px;
+}
+
+.stack-panel__header {
+  margin-bottom: 0;
+}
+
+.stack-panel__reload {
+  min-width: 132px;
+}
+
+.stack-panel__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.toolbar__group {
+  display: grid;
+  gap: 8px;
+}
+
+.toolbar__inline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.28fr);
+  gap: 8px;
+}
+
+.toolbar__inline button {
+  width: 100%;
+  min-width: 92px;
 }
 
 .layer-stack {
@@ -138,20 +233,20 @@ pre {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border: 1px solid #2a3140;
+  border: 1px solid #273246;
   border-radius: 8px;
-  background: #131720;
+  background: #101722;
   transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
 }
 
 .layer-card:hover {
-  border-color: #42516b;
+  border-color: #425a7b;
 }
 
 .layer-card--expanded {
-  border-color: #5d81c3;
-  background: #151d2a;
-  box-shadow: inset 0 0 0 1px rgba(93, 129, 195, 0.25);
+  border-color: #6d95d8;
+  background: #131d2b;
+  box-shadow: inset 0 0 0 1px rgba(109, 149, 216, 0.22);
 }
 
 .layer-card--dragging {
@@ -159,8 +254,8 @@ pre {
 }
 
 .layer-card--drop-target {
-  border-color: #8db0ee;
-  box-shadow: 0 0 0 2px rgba(141, 176, 238, 0.2);
+  border-color: #9ebcf0;
+  box-shadow: 0 0 0 2px rgba(158, 188, 240, 0.2);
 }
 
 .layer-card__header,
@@ -184,8 +279,8 @@ pre {
 }
 
 .icon-button {
-  width: 36px;
-  min-width: 36px;
+  width: 38px;
+  min-width: 38px;
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -196,13 +291,13 @@ pre {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   border-radius: 999px;
-  background: #22314a;
-  color: #c9d5ea;
+  background: #203452;
+  color: #d7e4f8;
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 750;
 }
 
 .layer-card__title {
@@ -210,7 +305,7 @@ pre {
   min-width: 0;
   flex: 1 1 auto;
   text-align: left;
-  background: #1e2a3f;
+  background: #1f314e;
 }
 
 .layer-card__title--static {
@@ -218,14 +313,14 @@ pre {
 }
 
 .layer-card__drag-handle {
-  color: #94a4c2;
+  color: #98aad0;
   cursor: grab;
   user-select: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 34px;
+  height: 34px;
   flex: 0 0 auto;
 }
 
@@ -235,7 +330,7 @@ pre {
 
 .layer-card__actions button {
   width: auto;
-  min-width: 72px;
+  min-width: 78px;
 }
 
 .layer-card__body {
@@ -258,25 +353,27 @@ pre {
 }
 
 .parameter-grid {
+  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
 }
 
 .parameter {
   display: grid;
   gap: 8px;
   padding: 12px;
-  border: 1px solid #2a3140;
+  border: 1px solid #273246;
   border-radius: 8px;
-  background: #131720;
+  background: #0f151f;
 }
 
 .parameter__value {
-  color: #94a4c2;
+  color: #98aad0;
   font-size: 12px;
 }
 
 .parameter__value--pending {
-  color: #d3b26a;
+  color: #d8bb76;
 }
 
 .parameter__pair {
@@ -302,21 +399,37 @@ pre {
 
 .muted {
   margin: 0;
-  color: #94a4c2;
+  color: #98aad0;
 }
 
-@media (max-width: 900px) {
-  .toolbar,
-  .status-grid {
+@media (max-width: 1100px) {
+  .dashboard-grid {
     grid-template-columns: 1fr;
   }
+}
 
+@media (max-width: 760px) {
+  .layout {
+    width: min(100% - 20px, 1500px);
+    padding-top: 14px;
+  }
+
+  .app-header,
+  .panel__header,
   .layer-card__header,
   .layer-card__subheader {
     align-items: flex-start;
     flex-direction: column;
   }
 
+  .dashboard-grid,
+  .stack-panel__grid,
+  .toolbar__inline {
+    grid-template-columns: 1fr;
+  }
+
+  .toolbar__inline button,
+  .stack-panel__reload,
   .layer-card__actions,
   .layer-card__actions button,
   .layer-card__field select {