feat: PRO 6000 Blackwell deploy + cu128/cu130 Docker switching + UI overhaul

Worker:
- Dockerfile ARG CU_TAG=cu128 for cu128/cu130 build-time switching
- CI workflow_dispatch cu_tag input for manual CUDA variant builds
- setup.sh auto-detects driver version for cu128/cu130 wheel selection
- Phase 10 benchmark: 2× PRO 6000 cu130 @ 512×288/4-step = 55ms/frame,
  ~36 fps dual-GPU throughput (EU-RO-1, production verified)

Frontend:
- Minimal systems bar with pop-over menus (audio/AI/DMX)
- Remove captureSize indirection — canvas renders at output resolution
- Real received-FPS counter (measures actual frames hitting the canvas)
- VisualEngine accepts AI output dimensions for 1:1 capture alignment
- Recording engine improvements + resolution selector
- Performance Deck simplified (no chrome, just live triggers)

Benchmark:
- Document Phase 10 PRO 6000 findings (cold compile, steady-state,
  WebRTC stability EU-RO-1 vs EUR-IS-1, dispatch drop analysis)
- Update Golden Stack to reflect current production hardware + software

Author: TimPietrusky

.github/workflows/runpod-flux2klein-docker.yml

@@ -34,6 +34,14 @@ on:
         required: false
         type: string
         default: ''
+      cu_tag:
+        description: 'CUDA toolkit variant: cu128 (default, broadest compat) or cu130 (12% faster on driver ≥ 570)'
+        required: false
+        type: choice
+        options:
+          - cu128
+          - cu130
+        default: cu128
 
 jobs:
   build-and-push:
@@ -82,5 +90,7 @@ jobs:
           push: true
           platforms: linux/amd64
           tags: ${{ steps.meta.outputs.tags }}
+          build-args: |
+            CU_TAG=${{ inputs.cu_tag || 'cu128' }}
           # Blacksmith caches BuildKit layers per repo automatically; no need
           # for explicit cache-from/cache-to like GitHub-hosted runners need.

app/globals.css

@@ -135,6 +135,12 @@ body::before {
   letter-spacing: 0.04em;
 }
 
+/* Popover variant — slightly larger for better finger/mouse targeting */
+.vj-input--popover {
+  padding: 0.4rem 0.625rem;
+  font-size: 0.75rem;
+}
+
 /* Small button base */
 .vj-btn {
   display: inline-flex;

app/vj/VJApp.tsx

@@ -247,7 +247,6 @@ export function VJApp() {
     sendFrames: aiSendFrames,
     showCaptureDebug: aiShowCaptureDebug,
     prompt: aiPrompt,
-    captureSize: aiCaptureSize,
     outputWidth: aiOutputWidth,
     outputHeight: aiOutputHeight,
     frameRate: aiFrameRate,
@@ -268,7 +267,6 @@ export function VJApp() {
     setSendFrames: setAiSendFrames,
     setShowCaptureDebug: setAiShowCaptureDebug,
     setPrompt: setAiPrompt,
-    setCaptureSize: setAiCaptureSize,
     setOutputSize: setAiOutputSize,
     setFrameRate: setAiFrameRate,
     setSeed: setAiSeed,
@@ -286,8 +284,6 @@ export function VJApp() {
     updatePromptPreset,
   } = useAiSettingsStore();
 
-  const aiOutputLong = Math.max(aiOutputWidth, aiOutputHeight);
-
   // BroadcastChannel to the /vj/stage tab
   const stageChannelRef = useRef<BroadcastChannel | null>(null);
   const stageFrameSeqRef = useRef<number>(0);
@@ -323,20 +319,11 @@ export function VJApp() {
   const flushSettingsNow = useCallback(() => {
     if (!aiTransport.isConnected()) return;
     const s = useAiSettingsStore.getState();
-    const aspect = s.outputWidth / s.outputHeight;
-    const captureW =
-      aspect >= 1
-        ? s.captureSize
-        : Math.max(16, Math.round(s.captureSize * aspect));
-    const captureH =
-      aspect >= 1
-        ? Math.max(16, Math.round(s.captureSize / aspect))
-        : s.captureSize;
     const payload: Record<string, unknown> = {
       prompt: s.prompt,
       seed: s.seed,
-      captureWidth: captureW,
-      captureHeight: captureH,
+      captureWidth: s.outputWidth,
+      captureHeight: s.outputHeight,
       width: s.outputWidth,
       height: s.outputHeight,
     };
@@ -587,6 +574,10 @@ export function VJApp() {
   const [aiLogs, setAiLogs] = useState<string[]>([]);
   const [aiImageUrl, setAiImageUrl] = useState<string | null>(null);
   const [aiGenTime, setAiGenTime] = useState<number | null>(null);
+  // Actual received-frames-per-second counter — measures real canvas output
+  // rate (what the user sees), not per-frame server latency.
+  const [aiRecvFps, setAiRecvFps] = useState<number | null>(null);
+  const aiRecvFpsRef = useRef({ count: 0, last: performance.now() });
   // Per-stage timing breakdown emitted by inference_server.py — surfaces where
   // the frame budget is going (vae_encode vs transformer vs jpeg vs python glue).
   // Useful for spotting the next bottleneck without re-instrumenting the worker.
@@ -773,7 +764,13 @@ export function VJApp() {
         await audioEngine.init(source);
         audioEngineRef.current = audioEngine;
 
-        const visualEngine = new VisualEngine(canvas, audioEngine, SCENES);
+        const visualEngine = new VisualEngine(
+          canvas,
+          audioEngine,
+          SCENES,
+          aiOutputWidth,
+          aiOutputHeight,
+        );
         visualEngineRef.current = visualEngine;
 
         const lightingEngine = new LightingEngine(
@@ -805,9 +802,16 @@ export function VJApp() {
         );
       }
     },
-    [fetchDevices, handleLightingFrame, handleDmxFrame, fixtures, persistedSceneId]
+    [fetchDevices, handleLightingFrame, handleDmxFrame, fixtures, persistedSceneId, aiOutputWidth, aiOutputHeight]
   );
 
+  // Resize the waveform canvas when the AI output resolution changes so the
+  // input canvas always matches the output dimensions — what you see is what
+  // the AI sees, no hidden crop or stretch step.
+  useEffect(() => {
+    visualEngineRef.current?.handleResize(aiOutputWidth, aiOutputHeight);
+  }, [aiOutputWidth, aiOutputHeight]);
+
   // ============================================================================
   // UI event handlers
   // ============================================================================
@@ -1103,6 +1107,17 @@ export function VJApp() {
         return;
       }
 
+      // Count received frames for real FPS measurement
+      const fpsState = aiRecvFpsRef.current;
+      fpsState.count++;
+      const now = performance.now();
+      const elapsed = now - fpsState.last;
+      if (elapsed >= 1000) {
+        setAiRecvFps(Math.round((fpsState.count / elapsed) * 1000));
+        fpsState.count = 0;
+        fpsState.last = now;
+      }
+
       const url = URL.createObjectURL(frame.blob);
       setAiImageUrl((prev) => {
         if (prev) URL.revokeObjectURL(prev);
@@ -1259,11 +1274,11 @@ export function VJApp() {
       return;
     }
 
-    const outAspect = aiOutputWidth / aiOutputHeight;
-    const capW =
-      outAspect >= 1 ? aiCaptureSize : Math.max(16, Math.round(aiCaptureSize * outAspect));
-    const capH =
-      outAspect >= 1 ? Math.max(16, Math.round(aiCaptureSize / outAspect)) : aiCaptureSize;
+    // Capture at the output resolution — VisualEngine already renders at
+    // the same dimensions, so this is a straight 1:1 copy. No crop, no
+    // scale, no aspect-ratio mismatch.
+    const capW = aiOutputWidth;
+    const capH = aiOutputHeight;
     const resolutionKey = capW * 10000 + capH;
     if (!sender.captureCanvas || sender.resolution !== resolutionKey) {
       sender.captureCanvas = document.createElement("canvas");
@@ -1278,21 +1293,7 @@ export function VJApp() {
       return;
     }
 
-    let srcCropW = src.width;
-    let srcCropH = src.height;
-    if (src.width / src.height > outAspect) {
-      srcCropW = src.height * outAspect;
-    } else {
-      srcCropH = src.width / outAspect;
-    }
-    const srcX = (src.width - srcCropW) / 2;
-    const srcY = (src.height - srcCropH) / 2;
-
-    ctx.drawImage(
-      src,
-      srcX, srcY, srcCropW, srcCropH,
-      0, 0, capW, capH
-    );
+    ctx.drawImage(src, 0, 0, capW, capH);
 
     sender.lastFrameTime = now;
     sender.frameCount++;
@@ -1332,7 +1333,7 @@ export function VJApp() {
       "image/jpeg",
       0.85
     );
-  }, [aiTransport, aiCaptureSize, aiFrameRate, aiOutputWidth, aiOutputHeight]);
+  }, [aiTransport, aiFrameRate, aiOutputWidth, aiOutputHeight]);
 
   useEffect(() => {
     // Catch-all for non-hotkey state changes (slider drags, backend swap,
@@ -1346,7 +1347,6 @@ export function VJApp() {
     aiBackend,
     aiPrompt,
     aiSeed,
-    aiCaptureSize,
     aiOutputWidth,
     aiOutputHeight,
     aiKleinAlpha,
@@ -1550,6 +1550,14 @@ export function VJApp() {
       <SystemsBar
         audioStatus={status}
         audioDeviceLabel={selectedDeviceLabel}
+        devices={devices}
+        selectedDeviceId={selectedDeviceId}
+        onDeviceChange={handleDeviceChange}
+        systemAudioSupported={systemAudioSupported}
+        systemAudioValue={SYSTEM_AUDIO_VALUE}
+        scenes={SCENES}
+        currentSceneId={currentSceneId}
+        onSceneChange={handleSceneChange}
         aiStatus={aiStatus}
         aiBackend={aiBackend}
         onBackendChange={(b) => {
@@ -1563,6 +1571,7 @@ export function VJApp() {
         onConnect={() => void aiTransport.start()}
         onDisconnect={() => void aiTransport.stop()}
         aiGenTimeMs={aiStatus === "connected" ? aiGenTime : null}
+        aiRecvFps={aiStatus === "connected" ? aiRecvFps : null}
         aiTiming={aiStatus === "connected" ? aiTiming : null}
         dmxStatus={dmxStatus}
         dmxFixtureCount={fixtures.length}
@@ -1611,14 +1620,6 @@ export function VJApp() {
           <WaveformSourceCard
             canvasRef={canvasRef}
             status={status}
-            scenes={SCENES}
-            currentSceneId={currentSceneId}
-            onSceneChange={handleSceneChange}
-            systemAudioSupported={systemAudioSupported}
-            systemAudioValue={SYSTEM_AUDIO_VALUE}
-            selectedDeviceId={selectedDeviceId}
-            devices={devices}
-            onDeviceChange={handleDeviceChange}
             showDebug={showDebug}
             setShowDebug={setShowDebug}
             debugFeatures={debugFeatures}
@@ -1656,9 +1657,6 @@ export function VJApp() {
             onKleinAlphaChange={setAiKleinAlpha}
             aiKleinSteps={aiKleinSteps}
             onKleinStepsChange={setAiKleinSteps}
-            aiCaptureSize={aiCaptureSize}
-            onCaptureSizeChange={setAiCaptureSize}
-            aiOutputLong={aiOutputLong}
             aiStageSharpen={aiStageSharpen}
             aiStagePixelate={aiStagePixelate}
             aiStagePixelateSize={aiStagePixelateSize}

app/vj/components/AiConsoleCard.tsx

@@ -49,10 +49,6 @@ interface AiConsoleCardProps {
   onKleinAlphaChange: (v: number) => void;
   aiKleinSteps: number;
   onKleinStepsChange: (v: number) => void;
-  aiCaptureSize: number;
-  onCaptureSizeChange: (v: number) => void;
-  aiOutputLong: number;
-
   // Stage FX (display passes — only what the preview canvas needs)
   aiStageSharpen: number;
   aiStagePixelate: boolean;
@@ -110,9 +106,6 @@ export function AiConsoleCard({
   onKleinAlphaChange,
   aiKleinSteps,
   onKleinStepsChange,
-  aiCaptureSize,
-  onCaptureSizeChange,
-  aiOutputLong,
   aiStageSharpen,
   aiStagePixelate,
   aiStagePixelateSize,
@@ -130,13 +123,6 @@ export function AiConsoleCard({
   aiLogs,
 }: AiConsoleCardProps) {
   const sliderFillPct = Math.round((aiKleinAlpha / 0.5) * 100);
-  // Klein renders sharpest when the client capture size matches the
-  // output long side. When it doesn't, the capture chip telegraphs the
-  // mismatch (border + label go magenta, inline → action appears).
-  // Owning both the bad value and the remediation in one chip keeps
-  // the cause and the fix visually adjacent.
-  const captureMismatch =
-    aiBackendKlein && aiCaptureSize !== aiOutputLong;
 
   return (
     <div className="vj-panel p-2 flex flex-col gap-2">
@@ -328,57 +314,12 @@ export function AiConsoleCard({
                 </select>
               </label>
             )}
-            {/* Note: when capture ≠ output long side, the remediation
-                lives inline on the capture chip below (Row 2) — same
-                component owns the broken state + the fix, so they
-                stay together instead of orphaning a separate button. */}
           </div>
 
           {/* Row 2 — Generation params. Permanent, not collapsed: the
               chip language already collapses each one to ~80–130 px so
-              the four fit on a single row in the available column,
-              and these values (capture/fps/seed/upscale) are useful
-              enough to verify at a glance that they don't deserve to
-              hide behind a disclosure. Visual hierarchy vs Row 1 comes
-              from order + Row 1's magenta accent button, not framing. */}
+              they fit on a single row in the available column. */}
           <div className="flex items-center gap-1.5 flex-wrap">
-            <label
-              className={`vj-chip${captureMismatch ? " vj-chip--warn" : ""}`}
-              title={
-                captureMismatch
-                  ? `Capture ${aiCaptureSize} ≠ output long side ${aiOutputLong}. Klein renders sharpest when they match — click → to update.`
-                  : aiBackendKlein
-                    ? "Client capture resolution — matched to output long side for sharpest Klein output."
-                    : "Client capture resolution"
-              }
-            >
-              <span className="vj-chip__label">capture</span>
-              <select
-                value={aiCaptureSize}
-                onChange={(e) => onCaptureSizeChange(Number(e.target.value))}
-                className="vj-chip__select"
-              >
-                <option value={64}>64</option>
-                <option value={128}>128</option>
-                <option value={256}>256</option>
-                <option value={512}>512</option>
-              </select>
-              {/* Corner badge — only rendered when warn is active. It's
-                  absolute-positioned so it doesn't reserve any layout
-                  slot when missing (chip width stays constant without
-                  hidden placeholder space). */}
-              {captureMismatch && (
-                <button
-                  type="button"
-                  onClick={() => onCaptureSizeChange(aiOutputLong)}
-                  className="vj-chip__alert"
-                  title={`Capture ${aiCaptureSize} ≠ output long side ${aiOutputLong} — click to match for sharper Klein output`}
-                  aria-label={`Match capture to output long side ${aiOutputLong}`}
-                >
-                  !
-                </button>
-              )}
-            </label>
             <label className="vj-chip" title="Target frame rate">
               <span className="vj-chip__label">fps</span>
               <select
@@ -455,12 +396,12 @@ export function AiConsoleCard({
               {aiShowCaptureDebug && (
                 <div className="flex flex-col gap-1 rounded border border-[color:var(--vj-edge-hot)] bg-black/50 p-2">
                   <div className="text-[9px] uppercase tracking-wider font-mono text-[color:var(--vj-ink-dim)]">
-                    sending {aiCaptureSize} → {aiOutputWidth}×{aiOutputHeight}
+                    sending {aiOutputWidth}×{aiOutputHeight}
                   </div>
                   <canvas
                     ref={aiDebugCanvasRef}
-                    width={aiCaptureSize}
-                    height={aiCaptureSize}
+                    width={aiOutputWidth}
+                    height={aiOutputHeight}
                     className="rounded bg-black self-center"
                     style={{
                       width: 160,