From 90e8f10e832f4ce0c4f07e838f8e69594bc402eb Mon Sep 17 00:00:00 2001
From: Devin C <devin@viam.com>
Date: Thu, 9 Jul 2026 16:19:29 -0400
Subject: [PATCH] update perf monitor

---
 .changeset/curly-heads-search.md      |  5 ++
 .claude/skills/verify/SKILL.md        | 51 ++++++++++++++++
 Makefile                              |  2 +-
 package.json                          |  4 +-
 pnpm-lock.yaml                        |  6 ++
 src/lib/components/App.svelte         | 22 +++++++
 src/lib/components/PerfMonitor.svelte | 85 +++++++++++++++++++++++++++
 src/lib/components/Scene.svelte       |  3 +-
 src/vite-env.d.ts                     |  5 ++
 9 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/curly-heads-search.md
 create mode 100644 .claude/skills/verify/SKILL.md
 create mode 100644 src/lib/components/PerfMonitor.svelte

diff --git a/.changeset/curly-heads-search.md b/.changeset/curly-heads-search.md
new file mode 100644
index 000000000..08c0de2aa
--- /dev/null
+++ b/.changeset/curly-heads-search.md
@@ -0,0 +1,5 @@
+---
+'@viamrobotics/motion-tools': patch
+---
+
+Fix perf monitor in embedded environments with blocking CSPs.
diff --git a/.claude/skills/verify/SKILL.md b/.claude/skills/verify/SKILL.md
new file mode 100644
index 000000000..a50f4ac59
--- /dev/null
+++ b/.claude/skills/verify/SKILL.md
@@ -0,0 +1,51 @@
+---
+name: verify
+description: Build, launch, and drive the visualizer to verify a change end-to-end at its rendered surface.
+---
+
+# Verify a change in the running visualizer
+
+## Build + launch
+
+```bash
+pnpm run up   # wireit: vite-build + go-build, then bun static server (5173) + draw-server (3030)
+```
+
+- **Never invoke it as bare `pnpm up`** — pnpm treats `up` as the built-in
+  `update` alias and mutates package.json/pnpm-lock.yaml instead of running
+  the wireit script. Always `pnpm run up` (`make up` does this).
+- Server is ready when `curl -s http://localhost:5173/` returns 200
+  (~30-60s cold build).
+- The bun server serves exact files from `build/` — routes need `.html`:
+  `http://localhost:5173/snapshot.html` (self-contained demo scene, loads
+  `/visualization_snapshot.json`, no robot required). `/snapshot` 404s.
+
+## Drive it
+
+Playwright is available via the repo's `@playwright/test` devDep. Scripts
+must live inside the repo root for module resolution:
+
+```js
+import { chromium } from '@playwright/test'
+```
+
+Useful selectors on the snapshot page:
+
+- Dashboard buttons use `aria-label` = their description, e.g.
+  `[aria-label="Settings"]`.
+- Settings panel tabs are text labels: Connection / Scene / Debug / etc.
+- Debug tab has a "Render stats" `<Switch>` (toggles the three-perf
+  monitor, `#three-perf-ui`).
+- Robot-query console errors (`[viam-svelte-sdk] error … getPose …`) are
+  expected offline noise on the snapshot page; the SvelteKit router also
+  logs one `Not found: /snapshot.html` — both harmless.
+
+## Gotchas
+
+- Settings persist via localStorage per browser context; fresh Playwright
+  contexts start from defaults.
+- Rendering is on-demand: after toggling scene settings give it ~1-2s
+  before screenshotting.
+- Sentry replay, GLTF/basis, and the PCD loader pool create blob workers
+  at startup — don't mistake them for the code under test when
+  intercepting `window.Worker`.
diff --git a/Makefile b/Makefile
index 3b32ed79e..68ac53b0f 100644
--- a/Makefile
+++ b/Makefile
@@ -9,4 +9,4 @@ setup:
 	@./etc/setup.sh
 
 up:
-	@pnpm up
+	@pnpm run up
diff --git a/package.json b/package.json
index 16bdb9c31..e08478c35 100644
--- a/package.json
+++ b/package.json
@@ -452,10 +452,10 @@
 		"@changesets/cli": "2.29.6",
 		"@connectrpc/connect": "1.7.0",
 		"@connectrpc/connect-web": "1.7.0",
-		"@langchain/anthropic": "^1.4.0",
 		"@dimforge/rapier3d-compat": "0.18.2",
 		"@eslint/compat": "2.0.2",
 		"@eslint/js": "10.0.1",
+		"@langchain/anthropic": "^1.4.0",
 		"@playwright/test": "1.55.1",
 		"@sentry/sveltekit": "10.10.0",
 		"@skeletonlabs/skeleton": "3.2.0",
@@ -632,6 +632,8 @@
 		"koota": "0.6.5",
 		"lodash-es": "4.18.1",
 		"three-mesh-bvh": "^0.9.8",
+		"three-perf": "^1.0.11",
+		"troika-three-text": "^0.52.4",
 		"uuid-tool": "^2.0.3"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6688ca6d..4a2898f3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,12 @@ importers:
       three-mesh-bvh:
         specifier: ^0.9.8
         version: 0.9.8(three@0.183.2)
+      three-perf:
+        specifier: ^1.0.11
+        version: 1.0.11(three@0.183.2)
+      troika-three-text:
+        specifier: ^0.52.4
+        version: 0.52.4(three@0.183.2)
       uuid-tool:
         specifier: ^2.0.3
         version: 2.0.3
diff --git a/src/lib/components/App.svelte b/src/lib/components/App.svelte
index b20b6e3cf..1d686d904 100644
--- a/src/lib/components/App.svelte
+++ b/src/lib/components/App.svelte
@@ -1,3 +1,25 @@
+<script
+	lang="ts"
+	module
+>
+	import { configureTextBuilder } from 'troika-three-text'
+
+	// Embedding hosts (e.g. app.viam.com) can serve a Content-Security-Policy
+	// that blocks the `blob:` worker troika-three-text typesets in, which
+	// leaves every troika Text mesh blank — the perf monitor counters, XR
+	// labels, etc. The visualizer only renders short labels, so typeset on
+	// the main thread instead of depending on host CSP allowing blob workers.
+	// Troika ignores configuration changes after its first font request, so
+	// this must run before the first Text renders.
+	//
+	// Note: troika's CONFIG is a process-global singleton, so this switches
+	// every troika Text on the page to main-thread typesetting, not just the
+	// visualizer's own meshes. That is intended (it also rescues any troika
+	// text a CSP host renders itself); the only cost on a non-CSP host is
+	// losing worker offload, which is negligible for our short labels.
+	configureTextBuilder({ useWorker: false })
+</script>
+
 <script lang="ts">
 	import type { Struct } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
diff --git a/src/lib/components/PerfMonitor.svelte b/src/lib/components/PerfMonitor.svelte
new file mode 100644
index 000000000..ff58c7688
--- /dev/null
+++ b/src/lib/components/PerfMonitor.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { useStage, useTask, useThrelte } from '@threlte/core'
+	import { ThreePerf } from 'three-perf'
+
+	interface Props {
+		logsPerSecond?: number
+		showGraph?: boolean
+		memory?: boolean
+		enabled?: boolean
+		visible?: boolean
+		backgroundOpacity?: number
+		scale?: number
+		anchorX?: 'left' | 'right'
+		anchorY?: 'top' | 'bottom'
+	}
+
+	let {
+		logsPerSecond = 10,
+		showGraph = true,
+		memory = true,
+		enabled = true,
+		visible = true,
+		backgroundOpacity = 0.7,
+		scale = 1,
+		anchorX = 'left',
+		anchorY = 'top',
+	}: Props = $props()
+
+	const { dom, renderer, renderStage, mainStage } = useThrelte()
+
+	let perf: ThreePerf
+
+	$effect.pre(() => {
+		perf = new ThreePerf({
+			domElement: dom,
+			renderer,
+		})
+
+		// three-perf hardcodes `position: fixed`, which anchors the monitor to
+		// the viewport even when the visualizer is embedded in a larger page.
+		// Anchor it to Threlte's relative-positioned canvas wrapper instead.
+		perf.ui.wrapper.style.position = 'absolute'
+
+		// Overlay panels (Details, FloatingPanel) share this corner at z-4/z-5;
+		// keep the debug monitor above them so toggling it on is never a no-op,
+		// but below the top-layer fullscreen/file-drop overlays.
+		perf.ui.wrapper.style.zIndex = '10'
+
+		return () => perf.dispose()
+	})
+
+	$effect.pre(() => {
+		perf.logsPerSecond = logsPerSecond
+		perf.showGraph = showGraph
+		perf.memory = memory
+		perf.enabled = enabled
+		perf.visible = visible
+		perf.backgroundOpacity = backgroundOpacity
+		perf.scale = scale
+		perf.anchorX = anchorX
+		perf.anchorY = anchorY
+	})
+
+	useTask(
+		() => {
+			perf.begin()
+		},
+		{
+			stage: useStage('monitor-begin', {
+				before: mainStage,
+			}),
+		}
+	)
+
+	useTask(
+		() => {
+			perf.end()
+		},
+		{
+			stage: useStage('monitor-end', {
+				after: renderStage,
+			}),
+		}
+	)
+</script>
diff --git a/src/lib/components/Scene.svelte b/src/lib/components/Scene.svelte
index 37a355a0a..9b47ee7a6 100644
--- a/src/lib/components/Scene.svelte
+++ b/src/lib/components/Scene.svelte
@@ -2,12 +2,13 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
+	import { Environment, Grid, interactivity, PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
 	import { ShaderMaterial } from 'three'
 
 	import Camera from '$lib/components/Camera.svelte'
 	import Entities from '$lib/components/Entities/Entities.svelte'
+	import PerfMonitor from '$lib/components/PerfMonitor.svelte'
 	import Selected from '$lib/components/Selected.svelte'
 	import SelectedTransformControls from '$lib/components/SelectedTransformControls.svelte'
 	import StaticGeometries from '$lib/components/StaticGeometries.svelte'
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index e08363db5..62662595f 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -6,3 +6,8 @@ declare const BACKEND_IP: string
 declare const WS_PORT: string
 
 declare module '*.hdr'
+
+// troika-three-text ships no type declarations; declare the one API we use.
+declare module 'troika-three-text' {
+	export function configureTextBuilder(config: { useWorker?: boolean }): void
+}