vizcore 1.1.0 → 1.2.0

data/frontend/src/midi-learn.js

@@ -122,7 +122,9 @@ export const midiLearnActionLabel = (action) => {
   }
 
   if (safeAction.type === "switch_scene") {
-    return `Switch scene: ${safeAction.scene}`;
+    return safeAction.effect
+      ? `Switch scene: ${safeAction.scene} (${safeAction.effect?.name || "with effect"})`
+      : `Switch scene: ${safeAction.scene}`;
   }
   if (safeAction.type === "live_control") {
     return `Toggle ${safeAction.control}`;
@@ -150,7 +152,11 @@ const normalizeMidiAction = (action) => {
 
   if (type === "switch_scene") {
     const scene = String(action.scene || "").trim();
-    return scene ? { type, scene } : null;
+    if (!scene) {
+      return null;
+    }
+    const effect = normalizeTransitionEffect(action.effect);
+    return effect ? { type, scene, effect } : { type, scene };
   }
 
   if (type === "live_control") {
@@ -167,6 +173,20 @@ const normalizeMidiSignature = (signature) => {
   return value.includes(":") ? value : null;
 };
 
+const normalizeTransitionEffect = (effect) => {
+  if (!effect) {
+    return null;
+  }
+  if (typeof effect === "string" || typeof effect === "number" || typeof effect === "symbol") {
+    return { name: String(effect) };
+  }
+  if (typeof effect !== "object" || Array.isArray(effect)) {
+    return null;
+  }
+
+  return effect;
+};
+
 const normalizeMidiBytes = (data) => {
   if (Array.isArray(data) || ArrayBuffer.isView(data)) {
     return Array.from(data).map((value) => Number(value) || 0);

data/frontend/src/performance-monitor.js

@@ -1,15 +1,32 @@
 const DEFAULT_EXPECTED_FRAME_MS = 1000 / 60;
 const FPS_WINDOW_MS = 500;
+const LATENCY_HISTORY_MAX = 120;
 
 export const createPerformanceMonitorState = () => ({
   audioLatencyMs: null,
+  audioCaptureMs: null,
+  audioAnalysisMs: null,
+  sceneBuildMs: null,
   clockOffsetMs: null,
   droppedFrames: 0,
+  wsDroppedFrames: 0,
+  wsActiveClients: 0,
+  wsEstimatedLagFrames: 0,
+  wsAvgPayloadBytes: 0,
   fps: 0,
   frameMs: 0,
   lastRenderAtMs: null,
   lastSocketTimestampMs: null,
+  latencyProbeSamples: [],
+  latencyProbeMaxMs: null,
+  latencyProbeP95Ms: null,
+  rendererFloatColorBuffer: false,
+  rendererTextureFloat: false,
+  rendererMaxDrawBuffers: null,
   reconnects: 0,
+  rendererDpr: null,
+  rendererMaxTextureSize: null,
+  rendererSafeMode: false,
   renderWindowFrames: 0,
   renderWindowStartedAtMs: null,
   rttMs: null,
@@ -69,12 +86,18 @@ export const recordSocketFrame = (
   const frameGapMs = previousTimestamp === null ? 0 : Math.max(0, timestampMs - previousTimestamp);
   const droppedFrames = Number(state?.droppedFrames || 0) + estimateDroppedFrames(frameGapMs, expectedFrameMs);
   const audioLatencyMs = audioLatencyFromMetrics(frame?.metrics, state?.audioLatencyMs);
+  const audioCaptureMs = audioCaptureFromMetrics(frame?.metrics, state?.audioCaptureMs);
+  const audioAnalysisMs = audioAnalysisFromMetrics(frame?.metrics, state?.audioAnalysisMs);
+  const sceneBuildMs = sceneBuildFromMetrics(frame?.metrics, state?.sceneBuildMs);
   const clockOffsetMs = Number.isFinite(state?.clockOffsetMs) ? Number(state.clockOffsetMs) : 0;
   const browserTimestampMs = timestampMs - clockOffsetMs;
 
   return {
     ...state,
     audioLatencyMs,
+    audioCaptureMs,
+    audioAnalysisMs,
+    sceneBuildMs,
     droppedFrames,
     lastSocketTimestampMs: timestampMs,
     wsLatencyMs: Math.max(0, Math.round(receivedAt - browserTimestampMs)),
@@ -101,9 +124,18 @@ export const recordLatencyProbe = (state, payload, receivedAtMs) => {
   const serverProcessingMs = serverSentAtMs - serverReceivedAtMs;
   const rttMs = Math.max(0, browserReceivedAtMs - clientSentAtMs - serverProcessingMs);
   const clockOffsetMs = ((serverReceivedAtMs - clientSentAtMs) + (serverSentAtMs - browserReceivedAtMs)) / 2;
+  const nextLatencySamples = appendNumericHistory(
+    Array.isArray(state?.latencyProbeSamples) ? state.latencyProbeSamples : [],
+    rttMs,
+    LATENCY_HISTORY_MAX,
+  );
+  const { max, p95 } = latencyProbeStats(nextLatencySamples);
 
   return {
     ...state,
+    latencyProbeSamples: nextLatencySamples,
+    latencyProbeMaxMs: max,
+    latencyProbeP95Ms: p95,
     clockOffsetMs: Math.round(clockOffsetMs),
     rttMs: Math.round(rttMs),
   };
@@ -132,6 +164,46 @@ export const recordShaderCompile = (state, detail) => {
   };
 };
 
+export const recordRendererCapabilities = (state, detail) => {
+  const effectiveDpr = coerceMetric(detail?.effectiveDevicePixelRatio);
+  const maxTextureSize = coerceMetric(detail?.maxTextureSize);
+
+  return {
+    ...state,
+    rendererDpr: effectiveDpr ?? state?.rendererDpr ?? null,
+    rendererMaxTextureSize: maxTextureSize ?? state?.rendererMaxTextureSize ?? null,
+    rendererMaxDrawBuffers: Number.isFinite(coerceMetric(detail?.maxDrawBuffers))
+      ? coerceMetric(detail.maxDrawBuffers)
+      : state?.rendererMaxDrawBuffers ?? null,
+    rendererFloatColorBuffer: !!detail?.floatColorBuffer,
+    rendererTextureFloat: !!detail?.textureFloat,
+  };
+};
+
+export const recordRendererSafeMode = (state, detail) => {
+  return {
+    ...state,
+    rendererSafeMode: !!detail?.active,
+    rendererDpr: coerceMetric(detail?.effectiveDevicePixelRatio) ?? state?.rendererDpr ?? null,
+  };
+};
+
+export const recordWebSocketBackpressure = (state, detail) => {
+  const total = detail?.total || {};
+  const clients = Array.isArray(detail?.clients) ? detail.clients : [];
+  const averageLag = clients.length > 0
+    ? Math.max(0, clients.reduce((acc, entry) => acc + coerceFiniteNumber(entry?.estimated_lag_frames || 0), 0) / clients.length)
+    : 0;
+
+  return {
+    ...state,
+    wsDroppedFrames: Number(total?.dropped_frames || 0),
+    wsActiveClients: Number(detail?.active_clients || 0),
+    wsAvgPayloadBytes: Number(coerceMetric(total?.avg_payload_bytes) || 0),
+    wsEstimatedLagFrames: averageLag,
+  };
+};
+
 export const formatPerformanceMonitorText = (state) => {
   const fps = Number(state?.fps || 0) > 0 ? Number(state.fps).toFixed(1) : "--";
   const frameMs = Number(state?.frameMs || 0) > 0 ? `${Number(state.frameMs).toFixed(1)}ms` : "--";
@@ -139,11 +211,25 @@ export const formatPerformanceMonitorText = (state) => {
   const rtt = Number.isFinite(state?.rttMs) ? `${Math.round(state.rttMs)}ms` : "--";
   const clockOffset = Number.isFinite(state?.clockOffsetMs) ? `${formatSignedInteger(state.clockOffsetMs)}ms` : "--";
   const audioLatency = Number.isFinite(state?.audioLatencyMs) ? `${Number(state.audioLatencyMs).toFixed(1)}ms` : "--";
+  const audioCaptureMs = Number.isFinite(state?.audioCaptureMs) ? `${Number(state.audioCaptureMs).toFixed(1)}ms` : "--";
+  const audioAnalysisMs = Number.isFinite(state?.audioAnalysisMs) ? `${Number(state.audioAnalysisMs).toFixed(1)}ms` : "--";
+  const sceneBuildMs = Number.isFinite(state?.sceneBuildMs) ? `${Number(state.sceneBuildMs).toFixed(1)}ms` : "--";
+  const probeMax = Number.isFinite(state?.latencyProbeMaxMs) ? `${Math.round(state.latencyProbeMaxMs)}ms` : "--";
+  const probeP95 = Number.isFinite(state?.latencyProbeP95Ms) ? `${Math.round(state.latencyProbeP95Ms)}ms` : "--";
   const shaderCompile = Number.isFinite(state?.shaderCompileMs) ? `${Number(state.shaderCompileMs).toFixed(1)}ms` : "--";
+  const rendererDpr = Number.isFinite(state?.rendererDpr) ? `${Number(state.rendererDpr).toFixed(2)}x` : "--";
+  const maxTexture = Number.isFinite(state?.rendererMaxTextureSize) ? Math.round(state.rendererMaxTextureSize) : "--";
+  const maxDrawBuffers = Number.isFinite(state?.rendererMaxDrawBuffers) ? Math.round(state.rendererMaxDrawBuffers) : "--";
+  const floatColorBuffer = state?.rendererFloatColorBuffer ? "floatColorBuffer yes" : "floatColorBuffer no";
+  const textureFloat = state?.rendererTextureFloat ? "textureFloat yes" : "textureFloat no";
+  const safeMode = state?.rendererSafeMode ? "on" : "off";
   const droppedFrames = Math.max(0, Number(state?.droppedFrames || 0));
+  const wsDroppedFrames = Math.max(0, Number(state?.wsDroppedFrames || 0));
+  const wsEstimatedLagFrames = Math.max(0, Number(state?.wsEstimatedLagFrames || 0));
   const reconnects = Math.max(0, Number(state?.reconnects || 0));
+  const wsAvgPayload = Number.isFinite(state?.wsAvgPayloadBytes) ? `${Math.round(state.wsAvgPayloadBytes)}B` : "--";
 
-  return `Perf: ${fps} FPS | Frame ${frameMs} | WS ${wsLatency} | RTT ${rtt} | Clock ${clockOffset} | Drop ${droppedFrames} | Audio ${audioLatency} | Shader ${shaderCompile} | Reconnect ${reconnects}`;
+  return `Perf: ${fps} FPS | Frame ${frameMs} | WS ${wsLatency} | RTT ${rtt} | Probe max ${probeMax} | Probe p95 ${probeP95} | Clock ${clockOffset} | Drop ${droppedFrames} | BDrop ${wsDroppedFrames} | WSLag ${wsEstimatedLagFrames.toFixed(1)}f | Audio ${audioLatency} | Capture ${audioCaptureMs} | Analyze ${audioAnalysisMs} | Build ${sceneBuildMs} | Shader ${shaderCompile} | DPR ${rendererDpr} | MaxTex ${maxTexture} | DrawBuf ${maxDrawBuffers} | ${floatColorBuffer} | ${textureFloat} | Safe ${safeMode} | Backpressure ${wsAvgPayload} | Reconnect ${reconnects}`;
 };
 
 export const estimateDroppedFrames = (frameGapMs, expectedFrameMs = DEFAULT_EXPECTED_FRAME_MS) => {
@@ -166,6 +252,21 @@ const audioLatencyFromMetrics = (metrics, fallback) => {
   return (captureMs || 0) + (analysisMs || 0);
 };
 
+const audioCaptureFromMetrics = (metrics, fallback) => {
+  const captureMs = coerceMetric(metrics?.audio_capture_ms);
+  return captureMs ?? fallback ?? null;
+};
+
+const audioAnalysisFromMetrics = (metrics, fallback) => {
+  const analysisMs = coerceMetric(metrics?.audio_analysis_ms);
+  return analysisMs ?? fallback ?? null;
+};
+
+const sceneBuildFromMetrics = (metrics, fallback) => {
+  const buildMs = coerceMetric(metrics?.scene_build_ms);
+  return buildMs ?? fallback ?? null;
+};
+
 const coerceMetric = (value) => {
   const numeric = Number(value);
   if (!Number.isFinite(numeric)) {
@@ -177,7 +278,42 @@ const coerceMetric = (value) => {
 
 const roundOneDecimal = (value) => Math.round(value * 10) / 10;
 
+const coerceFiniteNumber = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+};
+
 const formatSignedInteger = (value) => {
   const rounded = Math.round(Number(value) || 0);
   return rounded > 0 ? `+${rounded}` : `${rounded}`;
 };
+
+const appendNumericHistory = (history = [], sample, maxLength = LATENCY_HISTORY_MAX) => {
+  if (!Number.isFinite(sample)) {
+    return Array.isArray(history) ? history.slice(-maxLength) : [];
+  }
+
+  const keep = Math.max(1, Number(maxLength) || 1);
+  const sanitizedHistory = Array.isArray(history)
+    ? history.filter((entry) => Number.isFinite(entry)).map((entry) => Number(entry))
+    : [];
+  const next = [...sanitizedHistory, Number(sample)];
+  if (next.length <= keep) {
+    return next;
+  }
+
+  return next.slice(next.length - keep);
+};
+
+const latencyProbeStats = (samples) => {
+  const numericSamples = (Array.isArray(samples) ? samples : []).filter((entry) => Number.isFinite(entry));
+  if (numericSamples.length === 0) {
+    return { max: null, p95: null };
+  }
+
+  const sorted = [...numericSamples].sort((left, right) => left - right);
+  const max = sorted[sorted.length - 1];
+  const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(0.95 * sorted.length) - 1));
+
+  return { max, p95: sorted[index] };
+};