SCOPE: Motion plan replay plugin

src/app.css

@@ -67,3 +67,8 @@ select {
 .motion-tools-table tbody th {
 	@apply border-light font-roboto-mono text-default h-[40px] gap-2 border px-1.5 text-center text-xs font-normal;
 }
+
+/* Push toasts above the motion plan scrubber bar (fixed bottom-4, ~44px tall). */
+body.has-scrubber [aria-label='Toasts'] {
+	padding-bottom: 5rem;
+}

src/lib/components/FileDrop/FileDrop.svelte

@@ -11,7 +11,7 @@
 	import { useRelationships } from '$lib/hooks/useRelationships.svelte'
 	import { spawnSnapshotEntities } from '$lib/snapshot'
 
-	import type { FileDropperSuccess } from './file-dropper'
+	import type { FileDropperSuccess, PlanFileDropSuccess } from './file-dropper'
 
 	import { useFileDrop } from './useFileDrop.svelte'
 
@@ -71,6 +71,12 @@
 					)
 					break
 				}
+				case 'plan': {
+					window.dispatchEvent(
+						new CustomEvent<PlanFileDropSuccess>('viam:plan-loaded', { detail: result })
+					)
+					return
+				}
 			}
 
 			toast({ message: `${result.name} loaded.`, variant: ToastVariant.Success })

src/lib/components/FileDrop/file-dropper.ts

@@ -23,6 +23,14 @@ export interface PlyFileDropSuccess extends FileDropSuccess {
 	ply: BufferGeometry
 }
 
+export interface PlanFileDropSuccess extends FileDropSuccess {
+	type: 'plan'
+	content: string
+	snapshots: Snapshot[]
+	name: string
+	stepCount: number
+}
+
 export class FileDropperError extends Error {
 	constructor(message: string, options?: ErrorOptions) {
 		super(message, options)
@@ -34,6 +42,7 @@ export type FileDropperSuccess =
 	| SnapshotFileDropSuccess
 	| PointcloudFileDropSuccess
 	| PlyFileDropSuccess
+	| PlanFileDropSuccess
 
 export interface FileDropperFailure {
 	success: false

src/lib/components/FileDrop/useFileDrop.svelte.ts

@@ -1,3 +1,5 @@
+import { planDropper } from '$lib/plugins/MotionPlanReplayer/plan-dropper'
+
 import type { FileDropperSuccess } from './file-dropper'
 
 import { Extensions, parseFileName, Prefixes, readFile } from './file-names'
@@ -25,6 +27,9 @@ const createFileDropper = (extension: string, prefix: string | undefined) => {
 		case Extensions.PLY: {
 			return plyDropper
 		}
+		case Extensions.JSON: {
+			return planDropper
+		}
 	}
 
 	return undefined

src/lib/plugins/MotionPlanReplayer/MotionPlanReplayer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { untrack } from 'svelte'
+
+	import MotionPlanReplayerScrubber from './MotionPlanReplayerScrubber.svelte'
+	import MotionPlanReplayerUI from './MotionPlanReplayerUI.svelte'
+	import { type PlanEntry, provideMotionPlanReplayer } from './useMotionPlanReplayer.svelte'
+
+	interface Props {
+		/** Pass plans to use app-embedded mode (props-driven, no drag-and-drop UI). Omit for standalone mode. */
+		plans?: PlanEntry[]
+	}
+
+	const { plans }: Props = $props()
+
+	// `plans` is intentionally read once at setup time — initial entries only.
+	// The context manages its own reactive plan list after that.
+	provideMotionPlanReplayer(untrack(() => plans))
+</script>
+
+{#if plans === undefined}
+	<MotionPlanReplayerUI />
+{/if}
+<MotionPlanReplayerScrubber />

src/lib/plugins/MotionPlanReplayer/MotionPlanReplayerScrubber.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+
+	import { useMotionPlanReplayer } from './useMotionPlanReplayer.svelte'
+
+	const STEP_INTERVAL_MS = 100
+
+	const ctx = useMotionPlanReplayer()
+
+	let isPlaying = $state(false)
+	let intervalId: ReturnType<typeof setInterval> | undefined
+
+	const lastStepIdx = $derived(Math.max(0, ctx.totalSteps - 1))
+	const atEnd = $derived(ctx.currentStep >= lastStepIdx)
+
+	const pause = () => {
+		isPlaying = false
+		if (intervalId !== undefined) {
+			clearInterval(intervalId)
+			intervalId = undefined
+		}
+	}
+
+	const play = () => {
+		if (isPlaying || ctx.totalSteps <= 0) return
+		isPlaying = true
+		intervalId = setInterval(() => {
+			if (ctx.currentStep >= lastStepIdx) {
+				pause()
+				return
+			}
+			ctx.setStep(ctx.currentStep + 1)
+		}, STEP_INTERVAL_MS)
+	}
+
+	const togglePlay = () => {
+		if (isPlaying) {
+			pause()
+			return
+		}
+		if (atEnd && ctx.totalSteps > 0) ctx.setStep(0)
+		play()
+	}
+
+	const seek = (index: number) => {
+		pause()
+		ctx.setStep(index)
+	}
+
+	const stepOnce = (direction: 'prev' | 'next') => {
+		pause()
+		ctx.setStep(direction === 'next' ? ctx.currentStep + 1 : ctx.currentStep - 1)
+	}
+
+	$effect(() => {
+		if (ctx.totalSteps <= 0 && isPlaying) pause()
+	})
+	$effect(() => () => pause())
+	$effect(() => {
+		document.body.classList.toggle('has-scrubber', ctx.totalSteps > 0)
+		return () => document.body.classList.remove('has-scrubber')
+	})
+</script>
+
+<Portal id="dom">
+	{#if ctx.totalSteps > 0}
+		<div
+			class="pointer-events-auto fixed bottom-4 left-1/2 z-[10000] flex w-[min(640px,calc(100vw-2rem))] -translate-x-1/2 items-center gap-3 rounded bg-zinc-900/85 px-3 py-2 text-xs text-white"
+		>
+			<!-- Exit replay -->
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none"
+				onclick={ctx.clearActivePlan}
+				aria-label="Exit replay"
+				title="Exit replay">×</button
+			>
+
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none disabled:opacity-40"
+				onclick={togglePlay}
+				disabled={ctx.totalSteps <= 0}
+				aria-label={isPlaying ? 'Pause' : 'Play'}
+				title={isPlaying ? 'Pause' : 'Play'}>{isPlaying ? '⏸' : '▶'}</button
+			>
+
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none disabled:opacity-40"
+				onclick={() => seek(0)}
+				disabled={ctx.currentStep <= 0}
+				aria-label="Jump to start"
+				title="Jump to start">«</button
+			>
+
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none disabled:opacity-40"
+				onclick={() => stepOnce('prev')}
+				disabled={ctx.currentStep <= 0}
+				aria-label="Previous step"
+				title="Previous step">‹</button
+			>
+
+			<input
+				class="scrubber grow"
+				type="range"
+				min="0"
+				max={lastStepIdx}
+				value={ctx.currentStep}
+				oninput={(e) => seek(Number((e.currentTarget as HTMLInputElement).value))}
+			/>
+
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none disabled:opacity-40"
+				onclick={() => stepOnce('next')}
+				disabled={atEnd}
+				aria-label="Next step"
+				title="Next step">›</button
+			>
+
+			<button
+				type="button"
+				class="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-zinc-600 text-sm leading-none disabled:opacity-40"
+				onclick={() => seek(lastStepIdx)}
+				disabled={atEnd}
+				aria-label="Jump to end"
+				title="Jump to end">»</button
+			>
+
+			<span class="whitespace-nowrap tabular-nums">{ctx.currentStep + 1} / {ctx.totalSteps}</span>
+		</div>
+	{/if}
+</Portal>
+
+<style>
+	.scrubber {
+		appearance: none;
+		-webkit-appearance: none;
+		height: 4px;
+		border-radius: 2px;
+		background: #52525b;
+		cursor: pointer;
+		accent-color: #ffffff;
+	}
+	.scrubber::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: #ffffff;
+		border: none;
+		cursor: pointer;
+	}
+	.scrubber::-moz-range-thumb {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: #ffffff;
+		border: none;
+		cursor: pointer;
+	}
+</style>

src/lib/plugins/MotionPlanReplayer/MotionPlanReplayerUI.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { ToastVariant, useToast } from '@viamrobotics/prime-core'
+
+	import type { PlanFileDropSuccess } from '$lib/components/FileDrop/file-dropper'
+
+	import DashboardButton from '$lib/components/overlay/dashboard/Button.svelte'
+	import FloatingPanel from '$lib/components/overlay/FloatingPanel.svelte'
+
+	import { truncate } from './plan-dropper'
+	import { useMotionPlanReplayer } from './useMotionPlanReplayer.svelte'
+
+	const ctx = useMotionPlanReplayer()
+	const toast = useToast()
+
+	let isOpen = $state(false)
+
+	$effect(() => {
+		const handle = (e: Event) => {
+			const { name, content, snapshots } = (e as CustomEvent<PlanFileDropSuccess>).detail
+			if (ctx.plans.some((p) => p.name === name)) {
+				toast({ message: `"${truncate(name, 24)}" already loaded.`, variant: ToastVariant.Warning })
+				return
+			}
+			ctx.addPlan(name, content, snapshots)
+			isOpen = true
+		}
+		window.addEventListener('viam:plan-loaded', handle)
+		return () => window.removeEventListener('viam:plan-loaded', handle)
+	})
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<DashboardButton
+			active={isOpen}
+			icon="play-circle-outline"
+			description="Motion Plan Replayer"
+			onclick={() => (isOpen = !isOpen)}
+		/>
+	</fieldset>
+</Portal>
+
+<Portal id="dom">
+	<FloatingPanel
+		bind:isOpen
+		title="Motion Plan Replayer"
+		defaultSize={{ width: 320, height: 260 }}
+	>
+		<div class="flex h-full flex-col gap-1 p-2 text-xs">
+			{#if ctx.plans.length === 0}
+				<div class="flex grow items-center justify-center text-center text-gray-400">
+					Drop a plan JSON file onto the canvas
+				</div>
+			{/if}
+
+			{#each ctx.plans as plan, i (plan.name)}
+				{@const isActive = ctx.activePlanIndex === i}
+				<div
+					class={[
+						'flex cursor-pointer items-center gap-1 rounded px-2 py-1',
+						isActive ? 'bg-blue-100 font-medium' : 'hover:bg-gray-100',
+					]}
+					role="button"
+					tabindex="0"
+					onclick={() => (isActive ? ctx.clearActivePlan() : ctx.selectPlan(i))}
+					onkeydown={(e) =>
+						e.key === 'Enter' && (isActive ? ctx.clearActivePlan() : ctx.selectPlan(i))}
+				>
+					<span class="mr-1 text-gray-400">{isActive ? '●' : '○'}</span>
+					<span class="grow truncate">{plan.name}</span>
+
+					<button
+						type="button"
+						class="ml-1 rounded px-1 text-gray-400 hover:text-red-500"
+						onclick={(e) => {
+							e.stopPropagation()
+							ctx.removePlan(i)
+						}}
+						aria-label="Remove plan"
+						title="Remove plan">×</button
+					>
+				</div>
+
+				{#if plan.status === 'error'}
+					<div class="pl-5 text-[10px] text-red-600">{plan.error}</div>
+				{/if}
+				{#if plan.status === 'no-trajectory'}
+					<div class="pl-5 text-[10px] text-yellow-600">No trajectory — nothing to replay</div>
+				{/if}
+			{/each}
+		</div>
+	</FloatingPanel>
+</Portal>