Refactor Help state and improve map/server performance

server/index.js

@@ -1,6 +1,8 @@
+import cluster from 'node:cluster'
 import express from 'express'
 import cors from 'cors'
 import { readFileSync } from 'fs'
+import { availableParallelism, cpus } from 'os'
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import { rpc } from '@stellar/stellar-sdk'
@@ -72,9 +74,16 @@ export function errorHandler(err, _req, res, _next) {
   })
 }
 
-const app = express()
+export const app = express()
 const PORT = process.env.PORT || 3001
 
+function workerCount() {
+  const configured = Number(process.env.WEB_CONCURRENCY)
+  return Number.isFinite(configured) && configured > 0
+    ? Math.floor(configured)
+    : Math.max(1, availableParallelism())
+}
+
 // Solves Issue 1: Restrict CORS policy on ZK Prover Server
 app.use(cors({
   origin: process.env.ALLOWED_ORIGINS 
@@ -190,7 +199,6 @@ async function ensureProver() {
 async function initProver() {
   const { Noir } = await import('@noir-lang/noir_js')
   const { UltraHonkBackend } = await import('@aztec/bb.js')
-  const { cpus } = await import('os')
 
   const circuitPath = join(__dirname, '..', 'circuits', 'target', 'aegis.json')
   const circuit = JSON.parse(readFileSync(circuitPath, 'utf-8'))
@@ -374,7 +382,35 @@ app.get('/api/feedback/:requestId', (req, res) => {
   res.json(entry)
 })
 
-app.listen(PORT, () => {
-  console.log(`ZK Prover on http://localhost:${PORT}`)
-  ensureProver().catch(err => console.error('[prover] Init failed:', err))
-})
+export function startServer() {
+  return app.listen(PORT, () => {
+    console.log(`ZK Prover worker ${process.pid} on http://localhost:${PORT}`)
+    ensureProver().catch(err => console.error('[prover] Init failed:', err))
+  })
+}
+
+function startCluster() {
+  if (process.env.NODE_ENV === 'test' || !cluster.isPrimary) {
+    startServer()
+    return
+  }
+
+  const workers = workerCount()
+  console.log(`[cluster] Primary ${process.pid} starting ${workers} workers`)
+  for (let i = 0; i < workers; i++) {
+    cluster.fork()
+  }
+
+  cluster.on('exit', (worker, code, signal) => {
+    console.error(
+      `[cluster] Worker ${worker.process.pid} exited (${signal || code}); restarting`,
+    )
+    cluster.fork()
+  })
+}
+
+const isDirectRun = process.argv[1] === fileURLToPath(import.meta.url)
+
+if (isDirectRun) {
+  startCluster()
+}

src/App.css

@@ -47,13 +47,33 @@
 
 @keyframes mddrift {
   0% {
-    background-position: 0 0;
+    transform: translate3d(0, 0, 0);
   }
   100% {
-    background-position: 0 -120px;
+    transform: translate3d(0, -120px, 0);
   }
 }
 
+@keyframes hp-shimmer {
+  0%,
+  100% {
+    opacity: 0.62;
+    transform: scaleX(0.98);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+[style*="mdpulse"],
+[style*="mdfloat"],
+[style*="spin"],
+[style*="mddrift"],
+[style*="hp-shimmer"] {
+  will-change: transform, opacity;
+}
+
 html {
   scroll-behavior: smooth;
 }

src/hooks/useHelpUiState.js

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+
+export function useHelpUiState({ loadProfile }) {
+  const [mode, setMode] = useState("get");
+  const [profile, setProfile] = useState(() => {
+    const p = loadProfile();
+    return { nickname: p.nickname || "", contact: p.contact || "" };
+  });
+  const [contactError, setContactError] = useState("");
+  const [emergencyType, setEmergencyType] = useState(null);
+  const [showEmergencyModal, setShowEmergencyModal] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(() => {
+    try {
+      return localStorage.getItem("hp_tour_done") !== "1";
+    } catch {
+      return true;
+    }
+  });
+  const [showFeedback, setShowFeedback] = useState(false);
+  const [feedbackRequestId, setFeedbackRequestId] = useState(null);
+  const [feedbackResponderAddress, setFeedbackResponderAddress] =
+    useState(null);
+  const [styleOpen, setStyleOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+  const [showMobileForm, setShowMobileForm] = useState(false);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(null);
+  const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);
+  const [showResolveConfirm, setShowResolveConfirm] = useState(false);
+  const [showAvatarModal, setShowAvatarModal] = useState(false);
+  const [selectedChar, setSelectedChar] = useState(() => {
+    try {
+      return localStorage.getItem("hp_selected_char") || null;
+    } catch {
+      return null;
+    }
+  });
+  const [mapStyleIndex, setMapStyleIndex] = useState(0);
+
+  useEffect(() => {
+    try {
+      if (selectedChar) {
+        localStorage.setItem("hp_selected_char", selectedChar);
+      } else {
+        localStorage.removeItem("hp_selected_char");
+      }
+    } catch {}
+  }, [selectedChar]);
+
+  return {
+    mode,
+    setMode,
+    profile,
+    setProfile,
+    contactError,
+    setContactError,
+    emergencyType,
+    setEmergencyType,
+    showEmergencyModal,
+    setShowEmergencyModal,
+    showOnboarding,
+    setShowOnboarding,
+    showFeedback,
+    setShowFeedback,
+    feedbackRequestId,
+    setFeedbackRequestId,
+    feedbackResponderAddress,
+    setFeedbackResponderAddress,
+    styleOpen,
+    setStyleOpen,
+    profileOpen,
+    setProfileOpen,
+    showMobileForm,
+    setShowMobileForm,
+    showCancelConfirm,
+    setShowCancelConfirm,
+    showDisconnectConfirm,
+    setShowDisconnectConfirm,
+    showResolveConfirm,
+    setShowResolveConfirm,
+    showAvatarModal,
+    setShowAvatarModal,
+    selectedChar,
+    setSelectedChar,
+    mapStyleIndex,
+    setMapStyleIndex,
+  };
+}