<Debug />

<Debug /> surfaces the TanStack Query devtools panel — inspect the query cache, view in-flight mutations, and refetch manually — for any motion-tools instance. Motion-tools issues its Viam RPC calls through @viamrobotics/svelte-sdk (built on TanStack Query), so the devtools attaches to the QueryClient your <ViamAppProvider> already sets up. No extra wiring required.

The devtools package is an optional peer dependency — it isn’t bundled with motion-tools, so consumers that don’t mount <Debug /> pay nothing for it.

Install

pnpm add -D @tanstack/svelte-query-devtools

Usage

Mount <Debug /> anywhere inside <Visualizer />:

<script lang="ts">
	import { Visualizer } from '@viamrobotics/motion-tools'
	import { Debug } from '@viamrobotics/motion-tools/plugins'
</script>

<div class="h-screen w-screen">
	<Visualizer>
		<Debug />
	</Visualizer>
</div>

A floating TanStack logo appears in the bottom-left corner of the viewport — click it to open the devtools panel. Unmount the component (or remove it from the tree) to hide both the button and the panel.