From 7da171cf1f378cfd0583253d07c41f7476e1987e Mon Sep 17 00:00:00 2001
From: claude <claude@dragonflight>
Date: Sat, 23 May 2026 04:17:36 +0000
Subject: [PATCH] polish: defensive hydration defaults on ZAMPP_DATA accessors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Guards against the brief window between app mount and the first
data load completing — empty arrays render gracefully instead
of throwing on .filter / .map.
---
 services/web-ui/public/screens-ingest.jsx   | 4 ++--
 services/web-ui/public/screens-projects.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/services/web-ui/public/screens-ingest.jsx b/services/web-ui/public/screens-ingest.jsx
index 456e50c..a8621e7 100644
--- a/services/web-ui/public/screens-ingest.jsx
+++ b/services/web-ui/public/screens-ingest.jsx
@@ -259,7 +259,7 @@ function _normRecorder(r) {
 }
 
 function Recorders({ navigate, onNew }) {
-  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA.RECORDERS);
+  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA?.RECORDERS || []);
 
   const refresh = React.useCallback(() => {
     window.ZAMPP_API.fetch('/recorders')
@@ -521,7 +521,7 @@ function Capture({ navigate }) {
 
 /* ===== Monitors ===== */
 function Monitors({ navigate }) {
-  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA.RECORDERS);
+  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA?.RECORDERS || []);
   const [grid, setGrid] = React.useState(4);
 
   React.useEffect(() => {
diff --git a/services/web-ui/public/screens-projects.jsx b/services/web-ui/public/screens-projects.jsx
index 34227df..7737010 100644
--- a/services/web-ui/public/screens-projects.jsx
+++ b/services/web-ui/public/screens-projects.jsx
@@ -42,8 +42,8 @@ function NewProjectModal({ onClose, onCreated }) {
 }
 
 function Projects({ onOpenProject, navigate }) {
-  const [projects, setProjects] = React.useState(window.ZAMPP_DATA.PROJECTS);
-  const { ASSETS } = window.ZAMPP_DATA;
+  const [projects, setProjects] = React.useState(window.ZAMPP_DATA?.PROJECTS || []);
+  const ASSETS = window.ZAMPP_DATA?.ASSETS || [];
   const [search, setSearch] = React.useState('');
   const [view, setView] = React.useState('grid');
   const [showNew, setShowNew] = React.useState(false);