diff --git a/.changeset/odd-stamps-tickle.md b/.changeset/odd-stamps-tickle.md
new file mode 100644
index 000000000..b71390c43
--- /dev/null
+++ b/.changeset/odd-stamps-tickle.md
@@ -0,0 +1,5 @@
+---
+"@viamrobotics/motion-tools": minor
+---
+
+Move frame plugin UX improvements
diff --git a/src/lib/components/Entities/hooks/useEntityEvents.svelte.ts b/src/lib/components/Entities/hooks/useEntityEvents.svelte.ts
index a2681b382..9ddf58e55 100644
--- a/src/lib/components/Entities/hooks/useEntityEvents.svelte.ts
+++ b/src/lib/components/Entities/hooks/useEntityEvents.svelte.ts
@@ -33,6 +33,15 @@ const createEntityEvents = (
 
 	const world = useWorld()
 
+	/**
+	 * A hit on a `NonSelectable` entity is treated as if the object weren't
+	 * there: no cursor change, no hover or selection, and — because the handler
+	 * returns before `stopPropagation` — the next intersection along the ray
+	 * still receives the event, so a ghost never shadows the geometry behind it.
+	 */
+	const isNonSelectable = (event: IntersectionEvent<MouseEvent>) =>
+		entityForEvent(event)?.has(traits.NonSelectable) ?? false
+
 	const hoverEntity = (currentEntity: Entity, event: IntersectionEvent<MouseEvent>) => {
 		const hoverInfo = updateHoverInfo(currentEntity, event)
 
@@ -56,6 +65,8 @@ const createEntityEvents = (
 	}
 
 	const onpointerenter = (event: IntersectionEvent<MouseEvent>) => {
+		if (isNonSelectable(event)) return
+
 		event.stopPropagation()
 		cursor.onPointerEnter()
 
@@ -67,6 +78,8 @@ const createEntityEvents = (
 	}
 
 	const onpointermove = (event: IntersectionEvent<MouseEvent>) => {
+		if (isNonSelectable(event)) return
+
 		event.stopPropagation()
 
 		const currentEntity = entityForEvent(event)
@@ -99,6 +112,8 @@ const createEntityEvents = (
 	}
 
 	const onpointerleave = (event: IntersectionEvent<MouseEvent>) => {
+		if (isNonSelectable(event)) return
+
 		event.stopPropagation()
 		cursor.onPointerLeave()
 
@@ -113,10 +128,14 @@ const createEntityEvents = (
 	}
 
 	const onpointerdown = (event: IntersectionEvent<MouseEvent>) => {
+		if (isNonSelectable(event)) return
+
 		down.copy(event.pointer)
 	}
 
 	const onclick = (event: IntersectionEvent<MouseEvent>) => {
+		if (isNonSelectable(event)) return
+
 		event.stopPropagation()
 
 		if (down.distanceToSquared(event.pointer) >= 0.1) {
diff --git a/src/lib/ecs/traits.ts b/src/lib/ecs/traits.ts
index 8988d0175..439496211 100644
--- a/src/lib/ecs/traits.ts
+++ b/src/lib/ecs/traits.ts
@@ -242,6 +242,14 @@ export const ChunkProgress = trait({ loaded: 0, total: 0 })
 export type InteractionLayerValue = 'selectTool'
 export const SelectToolInteractionLayer = trait(() => true)
 
+/**
+ * Marker for entities that exist to be looked at, not interacted with — move
+ * ghosts, previews, and other transient display-only geometry. Pointer events
+ * that land on one are ignored and left to propagate, so whatever sits behind
+ * it hovers and selects as if the entity weren't there.
+ */
+export const NonSelectable = trait(() => true)
+
 /**
  * This entity is selected by the user
  */
diff --git a/src/lib/editing/__tests__/frameHistory.spec.ts b/src/lib/editing/__tests__/frameHistory.spec.ts
index 00383b9f1..da5700503 100644
--- a/src/lib/editing/__tests__/frameHistory.spec.ts
+++ b/src/lib/editing/__tests__/frameHistory.spec.ts
@@ -6,6 +6,7 @@ vi.mock('$lib/loaders/pcd', () => ({
 }))
 
 import { hierarchy, traits } from '$lib/ecs'
+import { installWorldMatrixListeners } from '$lib/ecs/worldMatrix'
 import { Pose } from '$lib/math'
 
 import {
@@ -94,6 +95,51 @@ describe('frame history replay', () => {
 		expect(entity.has(traits.Sphere)).toBe(false)
 	})
 
+	it('holds the edited pose after the baseline is re-derived from the saved config', async () => {
+		world = createWorld()
+		const unsub = installWorldMatrixListeners(world)
+
+		// useFrames spawns the frame at its saved pose, then the user drags it.
+		const entity = world.spawn(
+			traits.Name('arm'),
+			traits.FramesAPI,
+			traits.Matrix(new Pose(100).toMatrix4()),
+			traits.LiveMatrix(new Pose(100).toMatrix4()),
+			traits.EditedMatrix(new Pose(500).toMatrix4())
+		)
+		await Promise.resolve()
+		expect(entity.get(traits.WorldMatrix)?.elements[12]).toBeCloseTo(0.5)
+
+		// Saving commits the config into the world.
+		applyFrameHistorySnapshotToWorld(
+			world,
+			{
+				components: [
+					{
+						name: 'arm',
+						frame: {
+							parent: 'world',
+							translation: { x: 500, y: 0, z: 0 },
+							orientation: { type: 'ov_degrees', value: { x: 0, y: 0, z: 1, th: 0 } },
+						},
+					},
+				],
+			},
+			{},
+			{ keepEditedMatrices: false }
+		)
+
+		// Back in monitor mode useFrames re-derives the baseline from the saved
+		// config. Without the commit above, the blend would cancel the edit
+		// against a LiveMatrix still holding the pre-save pose.
+		new Pose(500).toMatrix4(entity.get(traits.Matrix)!)
+		entity.changed(traits.Matrix)
+		await Promise.resolve()
+
+		expect(entity.get(traits.WorldMatrix)?.elements[12]).toBeCloseTo(0.5)
+		unsub()
+	})
+
 	it('uses the latest fragment frame mod when collecting replay frames', () => {
 		const config: FrameHistoryPartConfig = {
 			components: [],
diff --git a/src/lib/hooks/usePartConfig.svelte.ts b/src/lib/hooks/usePartConfig.svelte.ts
index bae7ddd40..cd7808c41 100644
--- a/src/lib/hooks/usePartConfig.svelte.ts
+++ b/src/lib/hooks/usePartConfig.svelte.ts
@@ -3,7 +3,7 @@ import type { JsonValue } from '@viamrobotics/sdk'
 import { Struct } from '@viamrobotics/sdk'
 import { createAppMutation, createAppQuery } from '@viamrobotics/svelte-sdk'
 import { StateHistory } from 'runed'
-import { getContext, setContext } from 'svelte'
+import { getContext, setContext, untrack } from 'svelte'
 
 import { useWorld } from '$lib/ecs'
 import {
@@ -94,6 +94,30 @@ export const providePartConfig = (
 		}
 	})
 
+	/**
+	 * Once the edits are committed — saved, discarded, or saved by the embedder —
+	 * the config is the new baseline, so fold it into the world: write the config
+	 * poses into `Matrix` / `LiveMatrix` and drop `EditedMatrix`. Without this the
+	 * staged edit outlives the save, and as soon as `useFrames` re-derives the
+	 * baseline from the saved config the blend (live × baseline⁻¹ × edited)
+	 * cancels the edit against a `LiveMatrix` that still holds the pre-save pose —
+	 * the frame snaps back to where it started. Edge-triggered on dirty → clean so
+	 * it never fights `usePoses` while merely monitoring.
+	 */
+	let wasDirty = false
+	$effect(() => {
+		const settled = wasDirty && !config.isDirty
+		wasDirty = config.isDirty
+
+		if (!settled) return
+
+		untrack(() => {
+			applyFrameHistorySnapshotToWorld(world, current, fragmentInfo.current, {
+				keepEditedMatrices: false,
+			})
+		})
+	})
+
 	let historyPartID: string | undefined
 	$effect(() => {
 		const id = partID()
diff --git a/src/lib/plugins/LLMSceneBuilder/frameDeltaAdapter.ts b/src/lib/plugins/LLMSceneBuilder/frameDeltaAdapter.ts
index 6c42aed1b..ce9c26ea3 100644
--- a/src/lib/plugins/LLMSceneBuilder/frameDeltaAdapter.ts
+++ b/src/lib/plugins/LLMSceneBuilder/frameDeltaAdapter.ts
@@ -6,7 +6,7 @@ import type { PartConfig } from '$lib/hooks/usePartConfig.svelte'
 
 import { frameGeometryFromTransform } from '$lib/geometry'
 import { Pose } from '$lib/math'
-import { applyEulerDeltaToPose } from '$lib/transform'
+import { setOrientationFromEuler } from '$lib/transform'
 
 /**
  * Resolves current frames for fragment-defined components from live framesystem
@@ -295,7 +295,7 @@ export function validateProposedFrameDeltas(
 		)
 
 		if (delta.orientation) {
-			applyEulerDeltaToPose(previousPose, delta.orientation, newPose)
+			setOrientationFromEuler(previousPose, delta.orientation, newPose)
 		}
 
 		if (
diff --git a/src/lib/plugins/MoveFrame/MoveControls.svelte b/src/lib/plugins/MoveFrame/MoveControls.svelte
index c07a2b290..e2430ac80 100644
--- a/src/lib/plugins/MoveFrame/MoveControls.svelte
+++ b/src/lib/plugins/MoveFrame/MoveControls.svelte
@@ -1,25 +1,40 @@
 <script lang="ts">
-	import type { Pose } from '@viamrobotics/sdk'
-	import type { Vector3 } from 'three'
+	import type { Matrix4 } from 'three'
 
-	import { Button, Select, Switch, ToastVariant, useToast } from '@viamrobotics/prime-core'
+	import { Button, Select, ToastVariant, useToast } from '@viamrobotics/prime-core'
 	import { MotionClient } from '@viamrobotics/sdk'
 	import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk'
 	import { MotionMoveWidget } from '@viamrobotics/test-widgets'
-	import { Slider, type SliderChangeEvent } from 'svelte-tweakpane-ui'
-
+	import {
+		Point,
+		type PointChangeEvent,
+		type PointValue3dObject,
+		type PointValue4dObject,
+		RotationEuler,
+		type RotationEulerChangeEvent,
+		type RotationEulerValueObject,
+		TabGroup,
+		TabPage,
+	} from 'svelte-tweakpane-ui'
+
+	import type { Pose } from '$lib/math'
+
+	import DashboardButton from '$lib/components/overlay/dashboard/Button.svelte'
 	import FloatingPanel from '$lib/components/overlay/FloatingPanel.svelte'
 	import { traits, useQuery } from '$lib/ecs'
 	import { useFrames } from '$lib/hooks/useFrames.svelte'
 	import { usePartID } from '$lib/hooks/usePartID.svelte'
 	import { useSettings } from '$lib/hooks/useSettings.svelte'
+	import { setOrientationFromEuler } from '$lib/transform'
 
-	import { buildTargetPose, type OrientationMode } from './buildTargetPose'
 	import { defaultMotionService, frameParent, motionServiceNames } from './moveControls'
-	import { movePicker } from './movePicker.svelte'
+	import MoveGizmo from './MoveGizmo.svelte'
+	import { moveGizmoOwner } from './moveGizmoOwner.svelte'
 	import MoveTabs from './MoveTabs.svelte'
-	import MoveTargetMarker from './MoveTargetMarker.svelte'
-	import MoveTargetPicker from './MoveTargetPicker.svelte'
+	import MoveTargetGhost from './MoveTargetGhost.svelte'
+	import { fromDestinationPose, moveDelta, toDestinationPose } from './moveTargetPose'
+	import { useMovedFrameMatrix } from './useMovedFrameMatrix.svelte'
+	import { useMoveGhosts } from './useMoveGhosts.svelte'
 
 	interface Props {
 		frameName: string
@@ -28,9 +43,12 @@
 
 	const { frameName, onClose }: Props = $props()
 
-	const CLICK_TAB = 'Click to move'
+	const MOVE_TAB = 'Move'
 	const CONTROL_TAB = 'Control'
 
+	/** The gizmo is dragged in world space, so the goal is committed against it. */
+	const WORLD_FRAME = 'world'
+
 	const partID = usePartID()
 	const frames = useFrames()
 	const named = useQuery(traits.Name)
@@ -60,85 +78,160 @@
 		if (!isOpen) onClose()
 	})
 
-	let activeTab = $state(CLICK_TAB)
-	let orientationMode = $state<OrientationMode>('keep')
-	let standoff = $state(50)
+	let activeTab = $state(MOVE_TAB)
+	let mode = $state<'translate' | 'rotate'>('translate')
+	let space = $state<'local' | 'world'>('world')
 	let executing = $state(false)
-	let lastHit = $state.raw<{ worldPoint: Vector3; worldNormal?: Vector3 }>()
+
+	/**
+	 * The staged goal in world space, or `undefined` while the gizmo still tracks
+	 * the frame. Raw because it is a Three.js instance replaced wholesale on every
+	 * drag frame.
+	 */
+	let targetWorldMatrix = $state.raw<Matrix4>()
 
 	const movedEntity = $derived(
 		named.current.find((entity) => entity.get(traits.Name) === frameName)
 	)
 
-	const destinationEntity = $derived(
-		named.current.find((entity) => entity.get(traits.Name) === destination)
+	// The handle is live for as long as the Move tab is showing. Claim the single
+	// gizmo slot so only one open panel drags at a time.
+	const wantsGizmo = $derived(isOpen && activeTab === MOVE_TAB)
+
+	/**
+	 * The end effector, not the `<name>_origin` mount the scene draws the
+	 * component at — that is the frame the motion service moves, so it is the
+	 * frame the handle belongs on. Resolved in world space and only while the
+	 * gizmo is live.
+	 */
+	const currentWorldMatrix = useMovedFrameMatrix(
+		() => partID.current,
+		() => frameName,
+		() => wantsGizmo
 	)
-
-	const hasNormal = $derived(lastHit?.worldNormal !== undefined)
-
-	const pickedPose = $derived.by<Pose | undefined>(() => {
-		if (!lastHit) return undefined
-		return buildTargetPose({
-			worldPoint: lastHit.worldPoint,
-			worldNormal: lastHit.worldNormal,
-			destinationWorldMatrix: destinationEntity?.get(traits.WorldMatrix),
-			currentWorldMatrix: movedEntity?.get(traits.WorldMatrix),
-			orientation: orientationMode,
-			standoff,
-		})
-	})
-
-	// Picking is live while the click-to-move tab is open and nothing is picked yet.
-	// Claim the single picking slot so only one open panel picks at a time.
-	const picking = $derived(isOpen && activeTab === CLICK_TAB && lastHit === undefined)
 	$effect(() => {
-		if (picking) {
-			movePicker.arm(frameName)
-			return () => movePicker.disarm(frameName)
+		if (wantsGizmo) {
+			moveGizmoOwner.arm(frameName)
+			return () => moveGizmoOwner.disarm(frameName)
 		}
 	})
 
-	// While this panel owns picking, put the scene into `move` mode (disables
-	// entity selection, enables accelerated picking) and restore `navigate` after.
-	const armed = $derived(movePicker.armedFrame === frameName)
+	// While this panel owns the gizmo, put the scene into `gizmo` mode so a drag
+	// can't fall through to the scene and change the selection. Restore `navigate`
+	// after.
+	const armed = $derived(moveGizmoOwner.armedFrame === frameName)
 	$effect(() => {
-		if (picking && armed) {
-			settings.current.interactionMode = 'move'
+		if (wantsGizmo && armed) {
+			settings.current.interactionMode = 'gizmo'
 			return () => {
-				if (settings.current.interactionMode === 'move') {
+				// Only hand the scene back if the gizmo wasn't taken over by another
+				// panel — otherwise this teardown would re-enable picking underneath a
+				// gizmo that is still live.
+				const owner = moveGizmoOwner.armedFrame
+				const handedOff = owner !== undefined && owner !== frameName
+				if (!handedOff && settings.current.interactionMode === 'gizmo') {
 					settings.current.interactionMode = 'navigate'
 				}
 			}
 		}
 	})
 
-	const pickerEnabled = $derived(picking && armed && settings.current.interactionMode === 'move')
+	/** Another open panel took the gizmo out from under this one. */
+	const preempted = $derived(wantsGizmo && !armed)
+
+	const showGizmo = $derived(
+		wantsGizmo && armed && !executing && currentWorldMatrix.current !== undefined
+	)
+
+	/** Whether the handle has been dragged off the frame's live pose. */
+	const staged = $derived(targetWorldMatrix !== undefined)
+
+	/**
+	 * What the readout describes: the staged goal once dragged, otherwise where
+	 * the frame is right now. The panel shows the same rows either way, so the
+	 * numbers are readable before the first drag rather than appearing with it.
+	 */
+	const readoutMatrix = $derived(targetWorldMatrix ?? currentWorldMatrix.current)
+
+	// The handle is placed and dragged in world space, so the goal is expressed in
+	// world too — no `<name>_origin` round-trip between what is dragged and what
+	// is committed.
+	const targetPose = $derived(readoutMatrix ? toDestinationPose(readoutMatrix) : undefined)
+
+	const delta = $derived(
+		readoutMatrix && currentWorldMatrix.current
+			? moveDelta(currentWorldMatrix.current, readoutMatrix)
+			: undefined
+	)
+
+	/** The orientation as Euler angles (deg), for the alternate rotation tab. */
+	const eulerValue = $derived.by<RotationEulerValueObject>(() => {
+		if (!targetPose) return { x: 0, y: 0, z: 0 }
+		const { roll, pitch, yaw } = targetPose.toEulerDegrees()
+		return { x: roll, y: pitch, z: yaw }
+	})
+
+	/** Numbers render as an em dash until the frame's pose has resolved. */
+	const num = (value: number | undefined, digits: number) => value?.toFixed(digits) ?? '—'
+
+	// Ghosts are entities, drawn by the scene's own renderers — see `moveGhosts`.
+	// The subtree rides the delta between these two matrices, which the hook
+	// composes itself so a live gizmo isn't allocating one per frame.
+	useMoveGhosts(
+		() => (wantsGizmo && armed ? movedEntity : undefined),
+		() => currentWorldMatrix.current,
+		() => targetWorldMatrix
+	)
 
-	const onPick = (hit: { worldPoint: Vector3; worldNormal?: Vector3 }) => (lastHit = hit)
-	const resetToPick = () => (lastHit = undefined)
+	const onDrag = (matrix: Matrix4) => (targetWorldMatrix = matrix)
 
-	const handleStandoffChange = (event: SliderChangeEvent) => {
-		if (event.detail.origin !== 'internal') return
-		standoff = event.detail.value
+	/**
+	 * Stage an edited pose as the goal. Typing into a field before the first drag
+	 * stages the frame's current pose with that one value changed, so the inputs
+	 * and the gizmo are two views of the same goal.
+	 */
+	const stagePose = (pose: Pose) => (targetWorldMatrix = fromDestinationPose(pose))
+
+	const handlePositionChange = (event: PointChangeEvent) => {
+		if (event.detail.origin !== 'internal' || !targetPose) return
+		const next = event.detail.value as PointValue3dObject
+		stagePose(targetPose.clone().merge({ x: next.x, y: next.y, z: next.z }))
+	}
+
+	const handleOrientationOVChange = (event: PointChangeEvent) => {
+		if (event.detail.origin !== 'internal' || !targetPose) return
+		const next = event.detail.value as PointValue4dObject
+		stagePose(targetPose.clone().merge({ oX: next.x, oY: next.y, oZ: next.z, theta: next.w }))
+	}
+
+	const handleOrientationEulerChange = (event: RotationEulerChangeEvent) => {
+		if (event.detail.origin !== 'internal' || !targetPose) return
+		const next = event.detail.value as RotationEulerValueObject
+		const pose = targetPose.clone()
+		setOrientationFromEuler(targetPose, { roll: next.x, pitch: next.y, yaw: next.z }, pose)
+		stagePose(pose)
 	}
 
+	/** Drop the staged goal so the gizmo snaps back to wherever the frame is now. */
+	const resetTarget = () => (targetWorldMatrix = undefined)
+
 	const executeMove = async () => {
 		const client = motion.current
-		if (!client || !pickedPose || !service) return
+		if (!client || !targetPose || !service || !staged) return
 
 		executing = true
 		try {
 			const success = await client.move(
-				{ referenceFrame: destination, pose: pickedPose },
+				{ referenceFrame: WORLD_FRAME, pose: targetPose },
 				frameName
 			)
 			toast({
 				message: success
-					? `Moved "${frameName}" to the destination.`
+					? `Moved "${frameName}" to the target.`
 					: `Move for "${frameName}" did not complete.`,
 				variant: success ? ToastVariant.Success : ToastVariant.Warning,
 			})
-			if (success) resetToPick()
+			if (success) resetTarget()
 		} catch (error) {
 			toast({
 				message: error instanceof Error ? error.message : `Failed to move "${frameName}".`,
@@ -150,97 +243,137 @@
 	}
 </script>
 
-{#snippet options()}
-	<div class="flex flex-col gap-2">
-		<label class="flex items-center justify-between gap-2">
-			<span class="text-subtle-1">Align to surface</span>
-			<Switch
-				on={orientationMode === 'align'}
-				on:change={(event) => (orientationMode = event.detail ? 'align' : 'keep')}
+{#snippet gizmoOptions()}
+	<div class="flex flex-wrap items-center gap-2">
+		<!-- transform — same controls as the build-mode dashboard -->
+		<fieldset class="flex">
+			<DashboardButton
+				icon="cursor-move"
+				class="rounded-r-none"
+				active={mode === 'translate'}
+				description="Translate"
+				onclick={() => (mode = 'translate')}
 			/>
-		</label>
-
-		{#if orientationMode === 'align'}
-			<p class="text-subtle-2">
-				Falls back to keeping the current orientation on surfaces without a normal (e.g. point
-				clouds).
-			</p>
-		{/if}
-
-		<div aria-label="mutable approach offset">
-			<Slider
-				value={standoff}
-				min={0}
-				max={500}
-				step={5}
-				label="Approach offset (mm)"
-				format={(value) => value.toFixed(0)}
-				on:change={handleStandoffChange}
+			<DashboardButton
+				icon="sync"
+				class="-ml-px rounded-l-none"
+				active={mode === 'rotate'}
+				description="Rotate"
+				onclick={() => (mode = 'rotate')}
 			/>
-		</div>
+		</fieldset>
+
+		<!-- space -->
+		<fieldset class="flex">
+			<DashboardButton
+				icon="axis-arrow"
+				class="rounded-r-none"
+				active={space === 'local'}
+				description="Local space"
+				onclick={() => (space = 'local')}
+			/>
+			<DashboardButton
+				icon="earth"
+				class="-ml-px rounded-l-none"
+				active={space === 'world'}
+				description="World space"
+				onclick={() => (space = 'world')}
+			/>
+		</fieldset>
 	</div>
 {/snippet}
 
-{#snippet clickTab()}
+{#snippet moveTab()}
 	<div class="flex flex-col gap-3 p-1">
-		{#if pickedPose}
-			<div class="flex flex-col gap-2">
-				<div class="text-subtle-2">
-					Destination · relative to <span class="text-default">{destination}</span>
-				</div>
-				<div class="font-roboto-mono flex flex-col gap-1">
-					<div class="flex justify-between gap-2">
-						<span class="text-subtle-2">pos (mm)</span>
-						<span
-							>{pickedPose.x.toFixed(1)}, {pickedPose.y.toFixed(1)}, {pickedPose.z.toFixed(1)}</span
-						>
-					</div>
-					<div class="flex justify-between gap-2">
-						<span class="text-subtle-2">ov</span>
-						<span
-							>{pickedPose.oX.toFixed(2)}, {pickedPose.oY.toFixed(2)}, {pickedPose.oZ.toFixed(
-								2
-							)}</span
-						>
-					</div>
-					<div class="flex justify-between gap-2">
-						<span class="text-subtle-2">θ (deg)</span>
-						<span>{pickedPose.theta.toFixed(1)}</span>
-					</div>
-				</div>
+		{#if preempted}
+			<div class="border-light flex items-center justify-between gap-2 border px-2 py-1.5">
+				<p class="text-subtle-1">Another move panel has the gizmo.</p>
+				<Button
+					variant="ghost"
+					onclick={() => moveGizmoOwner.arm(frameName)}
+				>
+					Use it here
+				</Button>
 			</div>
+		{/if}
 
-			{@render options()}
+		{@render gizmoOptions()}
 
-			{#if orientationMode === 'align' && !hasNormal}
-				<p class="text-warning-dark">No surface normal here — keeping the current orientation.</p>
+		<div class="flex flex-col gap-2">
+			<div class="text-subtle-2">
+				{staged ? 'Target' : 'Current'} · relative to
+				<span class="text-default">{WORLD_FRAME}</span>
+			</div>
+
+			{#if targetPose}
+				<div>
+					<strong class="font-semibold">position</strong>
+					<span class="text-subtle-2">(mm)</span>
+
+					<div aria-label="move target position">
+						<Point
+							value={{ x: targetPose.x, y: targetPose.y, z: targetPose.z }}
+							disabled={executing}
+							on:change={handlePositionChange}
+						/>
+					</div>
+				</div>
+
+				<div>
+					<strong class="font-semibold">orientation</strong>
+
+					<div aria-label="move target orientation">
+						<TabGroup>
+							<TabPage title="OV (deg)">
+								<Point
+									value={{
+										x: targetPose.oX,
+										y: targetPose.oY,
+										z: targetPose.oZ,
+										w: targetPose.theta,
+									}}
+									disabled={executing}
+									on:change={handleOrientationOVChange}
+								/>
+							</TabPage>
+							<TabPage title="Euler">
+								<RotationEuler
+									value={eulerValue}
+									unit="deg"
+									disabled={executing}
+									on:change={handleOrientationEulerChange}
+								/>
+							</TabPage>
+						</TabGroup>
+					</div>
+				</div>
+			{:else}
+				<p class="text-subtle-2">Resolving the frame's pose…</p>
 			{/if}
 
-			<div class="flex items-center gap-2">
-				<Button
-					variant="success"
-					disabled={executing || !service}
-					progress={executing ? 'indeterminate' : undefined}
-					onclick={executeMove}
-				>
-					Execute move
-				</Button>
-				<Button
-					variant="ghost"
-					disabled={executing}
-					onclick={resetToPick}
-				>
-					Pick again
-				</Button>
+			<div class="font-roboto-mono flex justify-between gap-2">
+				<span class="text-subtle-2">travel</span>
+				<span>{num(delta?.distance, 1)} mm · {num(delta?.angle, 1)}°</span>
 			</div>
-		{:else}
-			<p class="text-subtle-1">
-				Click a surface in the scene to set where <span class="text-default">{frameName}</span> should
-				move.
-			</p>
+		</div>
 
-			{@render options()}
-		{/if}
+		<div class="flex items-center gap-2">
+			<Button
+				variant="success"
+				disabled={!staged || executing || !service}
+				progress={executing ? 'indeterminate' : undefined}
+				onclick={executeMove}
+			>
+				Execute move
+			</Button>
+			<Button
+				variant="ghost"
+				disabled={!staged || executing}
+				onclick={resetTarget}
+			>
+				Reset
+			</Button>
+		</div>
 	</div>
 {/snippet}
 
@@ -282,10 +415,10 @@
 
 		<div class="min-h-0 flex-1">
 			<MoveTabs
-				defaultTab={CLICK_TAB}
+				defaultTab={MOVE_TAB}
 				onValueChange={(value) => (activeTab = value)}
 				items={[
-					{ label: CLICK_TAB, content: clickTab },
+					{ label: MOVE_TAB, content: moveTab },
 					{ label: CONTROL_TAB, content: controlTab },
 				]}
 			/>
@@ -293,16 +426,19 @@
 	</div>
 </FloatingPanel>
 
-<MoveTargetPicker
-	enabled={pickerEnabled}
-	{standoff}
-	{onPick}
-/>
-
-{#if isOpen && activeTab === CLICK_TAB && lastHit}
-	<MoveTargetMarker
-		point={lastHit.worldPoint}
-		worldNormal={lastHit.worldNormal}
-		{standoff}
+{#if showGizmo && currentWorldMatrix.current}
+	<MoveGizmo
+		currentWorldMatrix={currentWorldMatrix.current}
+		{targetWorldMatrix}
+		{mode}
+		{space}
+		{onDrag}
+	/>
+{/if}
+
+{#if wantsGizmo && armed && targetWorldMatrix && currentWorldMatrix.current}
+	<MoveTargetGhost
+		currentWorldMatrix={currentWorldMatrix.current}
+		{targetWorldMatrix}
 	/>
 {/if}
diff --git a/src/lib/plugins/MoveFrame/MoveFrame.svelte b/src/lib/plugins/MoveFrame/MoveFrame.svelte
index 66f4ad709..a6c2e3725 100644
--- a/src/lib/plugins/MoveFrame/MoveFrame.svelte
+++ b/src/lib/plugins/MoveFrame/MoveFrame.svelte
@@ -27,8 +27,12 @@
 		isFrame && frameName !== undefined && frameName !== 'world' && hasMotionService
 	)
 
-	const openMove = () => {
-		if (frameName !== undefined) moveWidgets.open(frameName)
+	const moveOn = $derived(frameName !== undefined && moveWidgets.current.includes(frameName))
+
+	const toggleMove = () => {
+		if (frameName === undefined) return
+		if (moveOn) moveWidgets.close(frameName)
+		else moveWidgets.open(frameName)
 	}
 </script>
 
@@ -39,14 +43,18 @@
 			location="bottom"
 		>
 			<button
-				class="text-subtle-2"
+				class={[
+					'hover:text-default focus-visible:text-default transition-colors',
+					moveOn ? 'text-info-dark' : 'text-subtle-2',
+				]}
 				aria-describedby={tooltipID}
 				aria-label="Move this frame"
-				onclick={openMove}
+				aria-pressed={moveOn}
+				onclick={toggleMove}
 			>
 				<Move3d size={14} />
 			</button>
-			<p slot="description">Move this frame</p>
+			<p slot="description">{moveOn ? 'Stop moving this frame' : 'Move this frame'}</p>
 		</Tooltip>
 	</Portal>
 {/if}
diff --git a/src/lib/plugins/MoveFrame/MoveGizmo.svelte b/src/lib/plugins/MoveFrame/MoveGizmo.svelte
new file mode 100644
index 000000000..6cedbd7b3
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/MoveGizmo.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { T, useThrelte } from '@threlte/core'
+	import { TransformControls } from '@threlte/extras'
+	import { onDestroy } from 'svelte'
+	import { Group, MathUtils, Matrix4, Vector3 } from 'three'
+
+	import { useTransformControls } from '$lib/hooks/useControls.svelte'
+	import { useSettings } from '$lib/hooks/useSettings.svelte'
+
+	interface Props {
+		/** Where the frame is right now — world space, metres. */
+		currentWorldMatrix: Matrix4
+		/** The staged target, or `undefined` while the handle still tracks the frame. */
+		targetWorldMatrix?: Matrix4
+		mode: 'translate' | 'rotate'
+		space: 'local' | 'world'
+		/** Reports the dragged transform, world space, on every pointer move. */
+		onDrag: (targetWorldMatrix: Matrix4) => void
+	}
+
+	const { currentWorldMatrix, targetWorldMatrix, mode, space, onDrag }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const settings = useSettings()
+	const transformControls = useTransformControls()
+
+	const UNIT_SCALE = new Vector3(1, 1, 1)
+
+	/**
+	 * The handle `TransformControls` drags. It reads and writes
+	 * `position`/`quaternion`, so `matrixAutoUpdate` stays on and three recomposes
+	 * the matrix from the drag. It mounts at the scene root — where the entity
+	 * renderers mount — so its local transform is already world space.
+	 */
+	const anchor = new Group()
+
+	let dragging = false
+
+	/**
+	 * Seed the handle from the staged target, falling back to the frame's live
+	 * transform while nothing is staged. Skipped mid-drag: the frame keeps
+	 * streaming poses and re-seeding would yank the handle out from under the
+	 * pointer.
+	 */
+	$effect.pre(() => {
+		const source = targetWorldMatrix ?? currentWorldMatrix
+		if (dragging) return
+
+		source.decompose(anchor.position, anchor.quaternion, anchor.scale)
+		// Frames carry no scale; a non-unit one would only distort the gizmo.
+		anchor.scale.copy(UNIT_SCALE)
+		anchor.updateMatrixWorld()
+		invalidate()
+	})
+
+	const onMouseDown = () => {
+		dragging = true
+		// Park the camera controls so an orbit drag can't ride along with the gizmo.
+		transformControls.setActive(true)
+	}
+
+	const onObjectChange = () => {
+		onDrag(new Matrix4().compose(anchor.position, anchor.quaternion, UNIT_SCALE))
+	}
+
+	const onMouseUp = () => {
+		dragging = false
+		transformControls.setActive(false)
+	}
+
+	// Unmounting mid-drag (panel closed, tab switched, gizmo handed off) never
+	// fires `mouseUp`, which would leave the camera controls parked for good.
+	onDestroy(() => {
+		if (dragging) transformControls.setActive(false)
+	})
+
+	const snapping = $derived(settings.current.snapping)
+</script>
+
+<T
+	is={anchor}
+	dispose={false}
+/>
+
+<TransformControls
+	object={anchor}
+	{mode}
+	{space}
+	translationSnap={snapping && settings.current.snapTranslate > 0
+		? settings.current.snapTranslate
+		: null}
+	rotationSnap={snapping && settings.current.snapRotate > 0
+		? MathUtils.degToRad(settings.current.snapRotate)
+		: null}
+	onmouseDown={onMouseDown}
+	onobjectChange={onObjectChange}
+	onmouseUp={onMouseUp}
+/>
diff --git a/src/lib/plugins/MoveFrame/MoveTargetGhost.svelte b/src/lib/plugins/MoveFrame/MoveTargetGhost.svelte
new file mode 100644
index 000000000..cfdc65013
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/MoveTargetGhost.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { LineBasicMaterial } from 'three'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
+	import { Group, Matrix4, Vector3 } from 'three'
+
+	import { MOVE_GHOST_COLOR } from './moveGhostColor'
+
+	interface Props {
+		/** Where the frame is right now — world space, metres. */
+		currentWorldMatrix: Matrix4
+		/** Where the gizmo has staged it — world space, metres. */
+		targetWorldMatrix: Matrix4
+	}
+
+	const { currentWorldMatrix, targetWorldMatrix }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const AXES_LENGTH = 0.08
+	/** Below this the travel line degenerates, so only the triad is worth drawing. */
+	const MIN_TRAVEL = 0.001
+
+	// Both ends of the travel line, reused across drag frames. The array the
+	// derived returns is what tells the geometry to rebuild — a mutated `Vector3`
+	// on its own is `===` its old self, so nothing downstream would see it.
+	const origin = new Vector3()
+	const end = new Vector3()
+
+	const points = $derived.by(() => {
+		origin.setFromMatrixPosition(currentWorldMatrix)
+		end.setFromMatrixPosition(targetWorldMatrix)
+		return [origin, end]
+	})
+
+	/** Read through `points` so the distance can never go stale against it. */
+	const travel = $derived(points[0].distanceTo(points[1]))
+
+	/**
+	 * The staged pose is a rigid world transform, so the triad takes the matrix
+	 * whole — no decompose, and no position/quaternion arrays per drag frame.
+	 */
+	const anchor = new Group()
+	anchor.matrixAutoUpdate = false
+
+	$effect.pre(() => {
+		anchor.matrix.copy(targetWorldMatrix)
+		anchor.updateMatrixWorld()
+		invalidate()
+	})
+
+	/** Draw the ghost through occluding geometry — the goal is usually behind something. */
+	const seeThrough = (material: LineBasicMaterial) => {
+		material.depthTest = false
+		material.transparent = true
+		material.opacity = 0.9
+	}
+</script>
+
+{#if travel > MIN_TRAVEL}
+	<!-- The path from where the frame is to where it has been staged. -->
+	<T.Mesh
+		raycast={() => null}
+		bvh={{ enabled: false }}
+		renderOrder={1}
+	>
+		<MeshLineGeometry {points} />
+		<MeshLineMaterial
+			width={2}
+			color={MOVE_GHOST_COLOR}
+			depthTest={false}
+			attenuate={false}
+			dashArray={0.05}
+			dashRatio={0.4}
+			transparent
+			opacity={0.7}
+		/>
+	</T.Mesh>
+{/if}
+
+<!-- The staged pose. The triad reads the orientation the gizmo can't in world space. -->
+<T is={anchor}>
+	<T.AxesHelper
+		args={[AXES_LENGTH]}
+		raycast={() => null}
+		bvh={{ enabled: false }}
+		renderOrder={1}
+		oncreate={(ref) => seeThrough(ref.material as LineBasicMaterial)}
+	/>
+
+	<T.Mesh
+		raycast={() => null}
+		bvh={{ enabled: false }}
+		renderOrder={1}
+	>
+		<T.SphereGeometry args={[0.008]} />
+		<T.MeshBasicMaterial
+			color={MOVE_GHOST_COLOR}
+			depthTest={false}
+			transparent
+			opacity={0.5}
+		/>
+	</T.Mesh>
+</T>
diff --git a/src/lib/plugins/MoveFrame/MoveTargetMarker.svelte b/src/lib/plugins/MoveFrame/MoveTargetMarker.svelte
deleted file mode 100644
index 69fc4fbc6..000000000
--- a/src/lib/plugins/MoveFrame/MoveTargetMarker.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { T } from '@threlte/core'
-	import { MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
-	import { Vector3 } from 'three'
-
-	interface Props {
-		point: Vector3
-		worldNormal?: Vector3
-		standoff: number
-	}
-
-	const { point, worldNormal, standoff }: Props = $props()
-
-	const MARKER_COLOR = '#37a06f'
-	const worldUp = new Vector3(0, 0, 1)
-
-	const goal = $derived(
-		point.clone().addScaledVector((worldNormal ?? worldUp).clone().normalize(), standoff / 1000)
-	)
-</script>
-
-<!-- The clicked surface point. -->
-<T.Mesh
-	position={point.toArray()}
-	raycast={() => null}
-	bvh={{ enabled: false }}
-	renderOrder={1}
->
-	<T.SphereGeometry args={[0.006]} />
-	<T.MeshBasicMaterial
-		color={MARKER_COLOR}
-		depthTest={false}
-		transparent
-		opacity={0.4}
-	/>
-</T.Mesh>
-
-{#if standoff > 0}
-	<!-- The standoff, from the surface up along the normal to the goal. -->
-	<T.Mesh
-		raycast={() => null}
-		bvh={{ enabled: false }}
-		renderOrder={1}
-	>
-		<MeshLineGeometry points={[point, goal]} />
-		<MeshLineMaterial
-			width={2}
-			color={MARKER_COLOR}
-			depthTest={false}
-			attenuate={false}
-			transparent
-			opacity={0.6}
-		/>
-	</T.Mesh>
-{/if}
-
-<!-- The goal the tool will move to. -->
-<T.Mesh
-	position={goal.toArray()}
-	raycast={() => null}
-	bvh={{ enabled: false }}
-	renderOrder={1}
->
-	<T.SphereGeometry args={[0.01]} />
-	<T.MeshBasicMaterial
-		color={MARKER_COLOR}
-		depthTest={false}
-		transparent
-		opacity={0.9}
-	/>
-</T.Mesh>
diff --git a/src/lib/plugins/MoveFrame/MoveTargetPicker.svelte b/src/lib/plugins/MoveFrame/MoveTargetPicker.svelte
deleted file mode 100644
index a30975808..000000000
--- a/src/lib/plugins/MoveFrame/MoveTargetPicker.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { Intersection, Vector3 } from 'three'
-
-	import { useMouseRaycaster } from '$lib/hooks/useMouseRaycaster.svelte'
-
-	import { worldNormalFromFace } from './buildTargetPose'
-	import MoveTargetMarker from './MoveTargetMarker.svelte'
-
-	interface Props {
-		enabled: boolean
-		standoff: number
-		onPick: (hit: { worldPoint: Vector3; worldNormal?: Vector3 }) => void
-	}
-
-	const { enabled, standoff, onPick }: Props = $props()
-
-	let point = $state.raw<Vector3>()
-	let worldNormal = $state.raw<Vector3>()
-
-	const { onclick, onmove, raycaster } = useMouseRaycaster(() => ({ enabled }))
-	raycaster.firstHitOnly = true
-	raycaster.params.Points.threshold = 0.005
-
-	const normalFor = (hit: Intersection): Vector3 | undefined => {
-		const faceNormal = hit.face?.normal
-		if (!faceNormal) return undefined
-		return worldNormalFromFace(faceNormal, hit.object.matrixWorld)
-	}
-
-	onmove((event) => {
-		const hit = event.intersections[0]
-		if (!hit) {
-			point = undefined
-			worldNormal = undefined
-			return
-		}
-
-		point = hit.point
-		worldNormal = normalFor(hit)
-	})
-
-	onclick(() => {
-		if (!point) return
-		onPick({ worldPoint: point.clone(), worldNormal: worldNormal?.clone() })
-	})
-
-	// Drop the hover preview when picking is handed off or the panel leaves the tab.
-	$effect(() => {
-		if (!enabled) {
-			point = undefined
-			worldNormal = undefined
-		}
-	})
-</script>
-
-{#if enabled && point}
-	<MoveTargetMarker
-		{point}
-		{worldNormal}
-		{standoff}
-	/>
-{/if}
diff --git a/src/lib/plugins/MoveFrame/__tests__/MoveControls.svelte.spec.ts b/src/lib/plugins/MoveFrame/__tests__/MoveControls.svelte.spec.ts
index 2b47d42a8..4f700ad03 100644
--- a/src/lib/plugins/MoveFrame/__tests__/MoveControls.svelte.spec.ts
+++ b/src/lib/plugins/MoveFrame/__tests__/MoveControls.svelte.spec.ts
@@ -6,6 +6,7 @@ import { useResourceNames } from '@viamrobotics/svelte-sdk'
 import { beforeEach, describe, expect, it, type Mock, vi } from 'vitest'
 
 import { usePartID } from '$lib/hooks/usePartID.svelte'
+import { Pose } from '$lib/math'
 
 import MoveControls from '../MoveControls.svelte'
 
@@ -21,18 +22,35 @@ vi.mock('@viamrobotics/test-widgets', async () => {
 })
 // The scene-side components need a Threlte context (and import @threlte/extras);
 // stub them out for the panel-body test.
-vi.mock('../MoveTargetPicker.svelte', async () => {
-	const MockScene = await import('./__fixtures__/MockMoveTargetPicker.svelte')
+vi.mock('../MoveGizmo.svelte', async () => {
+	const MockScene = await import('./__fixtures__/MockSceneComponent.svelte')
 	return { default: MockScene.default }
 })
-vi.mock('../MoveTargetMarker.svelte', async () => {
-	const MockScene = await import('./__fixtures__/MockMoveTargetPicker.svelte')
+vi.mock('../MoveTargetGhost.svelte', async () => {
+	const MockScene = await import('./__fixtures__/MockSceneComponent.svelte')
 	return { default: MockScene.default }
 })
 
+// Ghosts are entities in the real world; the panel-body test has no ECS.
+vi.mock('../useMoveGhosts.svelte', () => ({ useMoveGhosts: () => undefined }))
+
+// The frame's live world transform normally comes from a robot `getPose` poll; hand
+// the panel a fixed one so the pose inputs have something to seed from.
+const moved = vi.hoisted(() => ({ matrix: undefined as unknown }))
+vi.mock('../useMovedFrameMatrix.svelte', () => ({
+	useMovedFrameMatrix: () => ({
+		get current() {
+			return moved.matrix
+		},
+	}),
+}))
+
 // New MoveControls dependencies that the panel-body test does not exercise.
 vi.mock('$lib/hooks/useSettings.svelte', () => ({
-	useSettings: () => ({ current: { interactionMode: 'navigate' } }),
+	RefreshRates: { poses: 'poses' },
+	useSettings: () => ({
+		current: { interactionMode: 'navigate', refreshRates: { poses: 500 } },
+	}),
 }))
 vi.mock('@viamrobotics/prime-core', async (importOriginal) => ({
 	...(await importOriginal<typeof import('@viamrobotics/prime-core')>()),
@@ -52,12 +70,15 @@ vi.mock('$lib/ecs', () => {
 				return ecs.names.map((name) => ({ get: () => name }))
 			},
 		}),
+		useTrait: () => ({ current: undefined }),
 	}
 })
 
 vi.mock('@viamrobotics/svelte-sdk', () => ({
 	useResourceNames: vi.fn(),
 	createResourceClient: vi.fn(() => ({ current: undefined })),
+	useRobotClient: vi.fn(() => ({ current: undefined })),
+	createRobotQuery: vi.fn(() => ({ data: undefined })),
 }))
 vi.mock('$lib/hooks/usePartID.svelte', () => ({ usePartID: vi.fn() }))
 vi.mock('$lib/hooks/useFrames.svelte', () => ({ useFrames: vi.fn() }))
@@ -78,6 +99,7 @@ describe('MoveControls', () => {
 	beforeEach(async () => {
 		vi.clearAllMocks()
 		ecs.names = ['arm']
+		moved.matrix = undefined
 		onClose = vi.fn<() => void>()
 
 		vi.mocked(usePartID).mockReturnValue({ current: partID } as never)
@@ -109,6 +131,52 @@ describe('MoveControls', () => {
 		expect(screen.getByTestId('move-widget')).toHaveTextContent('move:part1:planner:arm:base')
 	})
 
+	it('waits for the frame pose before offering the pose inputs', () => {
+		vi.mocked(useResourceNames).mockReturnValue({ current: [service('builtin')] } as never)
+
+		render(MoveControls, { props: { frameName: 'arm', onClose } })
+
+		expect(screen.queryByLabelText('move target position')).not.toBeInTheDocument()
+		expect(screen.getByText(/resolving the frame's pose/i)).toBeInTheDocument()
+	})
+
+	it('seeds editable position and orientation inputs from the frame pose', async () => {
+		vi.mocked(useResourceNames).mockReturnValue({ current: [service('builtin')] } as never)
+		moved.matrix = new Pose(100, -250, 40).toMatrix4()
+
+		render(MoveControls, { props: { frameName: 'arm', onClose } })
+
+		const position = await screen.findByLabelText('move target position')
+		expect(screen.getByLabelText('move target orientation')).toBeInTheDocument()
+
+		const fields = position.querySelectorAll('input')
+		expect([...fields].map((field) => Number(field.value))).toEqual([100, -250, 40])
+	})
+
+	it('stages a target when a pose field is edited', async () => {
+		vi.mocked(useResourceNames).mockReturnValue({ current: [service('builtin')] } as never)
+		moved.matrix = new Pose(100, -250, 40).toMatrix4()
+
+		render(MoveControls, { props: { frameName: 'arm', onClose } })
+
+		// Nothing is staged until a field moves, so both actions start disabled.
+		expect(screen.getByRole('button', { name: /reset/i })).toHaveAttribute('aria-disabled', 'true')
+
+		const position = await screen.findByLabelText('move target position')
+		const x = position.querySelector('input')
+		if (!x) throw new Error('expected a position field')
+		await fireEvent.change(x, { target: { value: '500' } })
+
+		await waitFor(() => {
+			expect(screen.getByRole('button', { name: /reset/i })).not.toHaveAttribute('aria-disabled')
+		})
+		expect(screen.getByRole('button', { name: /execute move/i })).not.toHaveAttribute(
+			'aria-disabled'
+		)
+		// 400 mm of travel along x, no rotation.
+		expect(screen.getByText(/400\.0 mm · 0\.0°/)).toBeInTheDocument()
+	})
+
 	it('reports a close when the panel is dismissed', async () => {
 		vi.mocked(useResourceNames).mockReturnValue({ current: [service('builtin')] } as never)
 
diff --git a/src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockMoveTargetPicker.svelte b/src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockSceneComponent.svelte
similarity index 70%
rename from src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockMoveTargetPicker.svelte
rename to src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockSceneComponent.svelte
index a0333835e..0a3bad7b5 100644
--- a/src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockMoveTargetPicker.svelte
+++ b/src/lib/plugins/MoveFrame/__tests__/__fixtures__/MockSceneComponent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	// Stand-in for the scene-side components (MoveTargetPicker / MoveTargetMarker)
+	// Stand-in for the scene-side components (MoveGizmo / MoveTargetGhost)
 	// so MoveControls renders without a Threlte context — and without importing
 	// @threlte/extras — in the component test. Renders nothing; ignores its props.
 </script>
diff --git a/src/lib/plugins/MoveFrame/__tests__/buildTargetPose.spec.ts b/src/lib/plugins/MoveFrame/__tests__/buildTargetPose.spec.ts
deleted file mode 100644
index 68b92e74b..000000000
--- a/src/lib/plugins/MoveFrame/__tests__/buildTargetPose.spec.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { Matrix4, Vector3 } from 'three'
-import { describe, expect, it } from 'vitest'
-
-import { Pose } from '$lib/math'
-
-import { buildTargetPose, worldNormalFromFace } from '../buildTargetPose'
-
-describe('buildTargetPose — position', () => {
-	it('converts a world point (m) to a destination pose (mm) relative to world', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0.1, 0.2, 0.3),
-			orientation: 'keep',
-		})
-		expect(pose.x).toBeCloseTo(100)
-		expect(pose.y).toBeCloseTo(200)
-		expect(pose.z).toBeCloseTo(300)
-	})
-
-	it('expresses the point relative to the destination frame', () => {
-		// Destination frame translated +1m on x; a world point at 1.5m is 0.5m local.
-		const destinationWorldMatrix = new Matrix4().makeTranslation(1, 0, 0)
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(1.5, 0, 0),
-			destinationWorldMatrix,
-			orientation: 'keep',
-		})
-		expect(pose.x).toBeCloseTo(500)
-		expect(pose.y).toBeCloseTo(0)
-		expect(pose.z).toBeCloseTo(0)
-	})
-})
-
-describe('buildTargetPose — keep orientation', () => {
-	it('defaults to the (0,0,1,0) orientation when no current transform is given', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			orientation: 'keep',
-		})
-		expect(pose.oX).toBeCloseTo(0)
-		expect(pose.oY).toBeCloseTo(0)
-		expect(pose.oZ).toBeCloseTo(1)
-		expect(pose.theta).toBeCloseTo(0)
-	})
-
-	it('reproduces the current frame orientation, replacing only position', () => {
-		// A frame whose +Z points along world +X.
-		const current = new Pose(0, 0, 0, 1, 0, 0, 0).toMatrix4()
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0.5),
-			currentWorldMatrix: current,
-			orientation: 'keep',
-		})
-		expect(pose.z).toBeCloseTo(500)
-		expect(pose.oX).toBeCloseTo(1)
-		expect(pose.oY).toBeCloseTo(0)
-		expect(pose.oZ).toBeCloseTo(0)
-	})
-})
-
-describe('buildTargetPose — align into surface', () => {
-	it('points the tool into a +Z face (−normal)', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			worldNormal: new Vector3(0, 0, 1),
-			orientation: 'align',
-		})
-		expect(pose.oX).toBeCloseTo(0)
-		expect(pose.oY).toBeCloseTo(0)
-		expect(pose.oZ).toBeCloseTo(-1)
-	})
-
-	it('points the orientation vector opposite the surface normal', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			worldNormal: new Vector3(1, 0, 0),
-			orientation: 'align',
-		})
-		expect(pose.oX).toBeCloseTo(-1)
-		expect(pose.oY).toBeCloseTo(0)
-		expect(pose.oZ).toBeCloseTo(0)
-	})
-
-	it('falls back to keep when align is requested but no normal is available', () => {
-		const current = new Pose(0, 0, 0, 1, 0, 0, 0).toMatrix4()
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			currentWorldMatrix: current,
-			orientation: 'align',
-		})
-		// No normal → keeps the current (+X) orientation instead of aligning.
-		expect(pose.oX).toBeCloseTo(1)
-		expect(pose.oZ).toBeCloseTo(0)
-	})
-})
-
-describe('buildTargetPose — standoff', () => {
-	it('lifts the goal off the surface along the normal', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			worldNormal: new Vector3(0, 0, 1),
-			orientation: 'keep',
-			standoff: 100,
-		})
-		expect(pose.x).toBeCloseTo(0)
-		expect(pose.y).toBeCloseTo(0)
-		expect(pose.z).toBeCloseTo(100)
-	})
-
-	it('offsets along an arbitrary surface normal', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			worldNormal: new Vector3(1, 0, 0),
-			orientation: 'keep',
-			standoff: 100,
-		})
-		expect(pose.x).toBeCloseTo(100)
-		expect(pose.z).toBeCloseTo(0)
-	})
-
-	it('falls back to world up when the hit has no normal', () => {
-		const pose = buildTargetPose({
-			worldPoint: new Vector3(0, 0, 0),
-			orientation: 'keep',
-			standoff: 50,
-		})
-		expect(pose.z).toBeCloseTo(50)
-	})
-})
-
-describe('worldNormalFromFace', () => {
-	it('returns the object-space normal unchanged when the world matrix is identity', () => {
-		const n = worldNormalFromFace(new Vector3(0, 0, 1), new Matrix4())
-		expect(n.x).toBeCloseTo(0)
-		expect(n.y).toBeCloseTo(0)
-		expect(n.z).toBeCloseTo(1)
-	})
-
-	it('rotates the normal by the object rotation (90° about Y maps +Z to +X)', () => {
-		const objectMatrixWorld = new Matrix4().makeRotationY(Math.PI / 2)
-		const n = worldNormalFromFace(new Vector3(0, 0, 1), objectMatrixWorld)
-		expect(n.x).toBeCloseTo(1)
-		expect(n.y).toBeCloseTo(0)
-		expect(n.z).toBeCloseTo(0)
-	})
-})
diff --git a/src/lib/plugins/MoveFrame/__tests__/moveGhosts.spec.ts b/src/lib/plugins/MoveFrame/__tests__/moveGhosts.spec.ts
new file mode 100644
index 000000000..1e4ba02fb
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/__tests__/moveGhosts.spec.ts
@@ -0,0 +1,223 @@
+import { createWorld, type Entity, type World } from 'koota'
+import { BoxGeometry, Matrix4, Vector3 } from 'three'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { relations, traits } from '$lib/ecs'
+
+import { clearMoveGhosts, createMoveGhosts, rigidMoveDelta, syncMoveGhosts } from '../moveGhosts'
+
+/** A metre along +x — enough to tell a ghost's transform from its source's. */
+const delta = new Matrix4().makeTranslation(1, 0, 0)
+
+const position = (entity: Entity) =>
+	new Vector3().setFromMatrixPosition(entity.get(traits.WorldMatrix) ?? new Matrix4())
+
+describe('rigidMoveDelta', () => {
+	it('is the motion that carries the current pose onto the staged one', () => {
+		const current = new Matrix4().makeTranslation(1, 2, 3)
+		const target = new Matrix4().makeTranslation(4, 2, 3)
+
+		const moved = current.clone().premultiply(rigidMoveDelta(current, target))
+
+		expect(moved.elements).toEqual(target.elements)
+	})
+
+	it('reuses one matrix, so callers must consume it before the next call', () => {
+		const first = rigidMoveDelta(new Matrix4(), new Matrix4().makeTranslation(1, 0, 0))
+		const second = rigidMoveDelta(new Matrix4(), new Matrix4().makeTranslation(9, 0, 0))
+
+		expect(first).toBe(second)
+		expect(second.elements[12]).toBe(9)
+	})
+})
+
+describe('syncMoveGhosts', () => {
+	let world: World
+	let root: Entity
+	let ghosts: ReturnType<typeof createMoveGhosts>
+
+	/** A child frame with a box, one metre along +y from wherever its parent is. */
+	const spawnFrame = (parent: Entity, y: number, ...extra: Parameters<World['spawn']>) =>
+		world.spawn(
+			relations.ChildOf(parent),
+			traits.FramesAPI,
+			traits.Box({ x: 100, y: 100, z: 100 }),
+			traits.WorldMatrix(new Matrix4().makeTranslation(0, y, 0)),
+			...extra
+		)
+
+	/** Every ghost in the world, found the way the renderers find them. */
+	const ghostEntities = () => [...world.query(traits.NonSelectable)]
+
+	beforeEach(() => {
+		world = createWorld()
+		root = world.spawn(traits.FramesAPI, traits.WorldMatrix(new Matrix4()))
+		ghosts = createMoveGhosts()
+	})
+
+	it('ghosts each descendant at its own transform plus the delta', () => {
+		const child = spawnFrame(root, 1)
+		const grandchild = spawnFrame(child, 2)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghostEntities()).toHaveLength(2)
+		expect(position(ghosts.get(child)!)).toEqual(new Vector3(1, 1, 0))
+		expect(position(ghosts.get(grandchild)!)).toEqual(new Vector3(1, 2, 0))
+	})
+
+	it('copies the geometry the renderers draw from', () => {
+		const child = spawnFrame(root, 1, traits.Center({ x: 5, y: 0, z: 0, oX: 0, oY: 0, oZ: 1 }))
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		const ghost = ghosts.get(child)!
+		expect(ghost.get(traits.Box)).toEqual({ x: 100, y: 100, z: 100 })
+		expect(ghost.get(traits.Center)?.x).toBe(5)
+		expect(ghost.get(traits.Opacity)).toBe(0.5)
+		expect(ghost.has(traits.NonSelectable)).toBe(true)
+	})
+
+	it('ghosts a frame with no geometry as an axes triad', () => {
+		const child = world.spawn(
+			relations.ChildOf(root),
+			traits.FramesAPI,
+			traits.WorldMatrix(new Matrix4())
+		)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghosts.get(child)?.has(traits.ShowAxesHelper)).toBe(true)
+	})
+
+	it('leaves the dragged frame and its own link geometries behind', () => {
+		// A link of the moved frame: a child without `FramesAPI`.
+		world.spawn(
+			relations.ChildOf(root),
+			traits.Box({ x: 1, y: 1, z: 1 }),
+			traits.WorldMatrix(new Matrix4())
+		)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghostEntities()).toHaveLength(0)
+	})
+
+	it('ghosts the links of an attached component, which do ride along', () => {
+		const gripper = spawnFrame(root, 1)
+		const link = world.spawn(
+			relations.ChildOf(gripper),
+			traits.Box({ x: 1, y: 1, z: 1 }),
+			traits.WorldMatrix(new Matrix4())
+		)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghosts.has(link)).toBe(true)
+	})
+
+	it('reuses ghosts across syncs and tracks the source as it moves', () => {
+		const child = spawnFrame(root, 1)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+		const ghost = ghosts.get(child)!
+
+		child.get(traits.WorldMatrix)?.makeTranslation(0, 5, 0)
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghosts.get(child)).toBe(ghost)
+		expect(position(ghost)).toEqual(new Vector3(1, 5, 0))
+	})
+
+	it('follows a source whose dimensions change mid-drag', () => {
+		const child = spawnFrame(root, 1)
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		child.set(traits.Box, { x: 7, y: 7, z: 7 })
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghosts.get(child)?.get(traits.Box)).toEqual({ x: 7, y: 7, z: 7 })
+	})
+
+	it('respawns the ghost when the source swaps shape', () => {
+		const child = spawnFrame(root, 1)
+		syncMoveGhosts(world, root, delta, ghosts)
+		const ghost = ghosts.get(child)!
+
+		child.remove(traits.Box)
+		child.add(traits.Sphere({ r: 50 }))
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghost.isAlive()).toBe(false)
+		expect(ghosts.get(child)?.get(traits.Sphere)).toEqual({ r: 50 })
+		expect(ghostEntities()).toHaveLength(1)
+	})
+
+	it('clones mesh geometry rather than sharing it', () => {
+		const geometry = new BoxGeometry(1, 1, 1)
+		const child = world.spawn(
+			relations.ChildOf(root),
+			traits.FramesAPI,
+			traits.BufferGeometry(geometry),
+			traits.WorldMatrix(new Matrix4())
+		)
+
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		// `Mesh.svelte` disposes the geometry it renders, so a shared instance
+		// would die with the ghost.
+		expect(ghosts.get(child)?.get(traits.BufferGeometry)).not.toBe(geometry)
+	})
+
+	/**
+	 * The instanced renderers allocate on `onAdd` and rewrite matrices on
+	 * `onChange` — a ghost that spawns without firing either would never be
+	 * drawn.
+	 */
+	it('notifies the renderers when a ghost appears and when it moves', () => {
+		const added: Entity[] = []
+		const changed: Entity[] = []
+		world.onAdd(traits.Box, (entity) => added.push(entity))
+		world.onChange(traits.WorldMatrix, (entity) => changed.push(entity))
+
+		const child = spawnFrame(root, 1)
+		syncMoveGhosts(world, root, delta, ghosts)
+		const ghost = ghosts.get(child)!
+
+		expect(added).toContain(ghost)
+
+		changed.length = 0
+		syncMoveGhosts(world, root, new Matrix4().makeTranslation(2, 0, 0), ghosts)
+
+		expect(changed).toContain(ghost)
+	})
+
+	it('drops the ghost of a source that goes away or turns invisible', () => {
+		const removed = spawnFrame(root, 1)
+		const hidden = spawnFrame(root, 2)
+		syncMoveGhosts(world, root, delta, ghosts)
+		expect(ghostEntities()).toHaveLength(2)
+
+		removed.destroy()
+		hidden.add(traits.InheritedInvisible)
+		syncMoveGhosts(world, root, delta, ghosts)
+
+		expect(ghostEntities()).toHaveLength(0)
+		expect(ghosts.size).toBe(0)
+	})
+
+	it.each([
+		['no delta', () => syncMoveGhosts(world, root, undefined, ghosts)],
+		['no root', () => syncMoveGhosts(world, undefined, delta, ghosts)],
+		['an explicit clear', () => clearMoveGhosts(ghosts)],
+	])('clears every ghost on %s', (_label, act) => {
+		spawnFrame(root, 1)
+		syncMoveGhosts(world, root, delta, ghosts)
+		expect(ghostEntities()).toHaveLength(1)
+
+		act()
+
+		expect(ghostEntities()).toHaveLength(0)
+		expect(ghosts.size).toBe(0)
+	})
+})
diff --git a/src/lib/plugins/MoveFrame/__tests__/moveTargetPose.spec.ts b/src/lib/plugins/MoveFrame/__tests__/moveTargetPose.spec.ts
new file mode 100644
index 000000000..272ed7804
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/__tests__/moveTargetPose.spec.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import { Pose } from '$lib/math'
+
+import { fromDestinationPose, moveDelta, toDestinationPose } from '../moveTargetPose'
+
+const pose = new Pose(100, -250, 40, 0, 1, 0, 35)
+
+describe('fromDestinationPose', () => {
+	it('round-trips a pose through the world matrix the gizmo drags', () => {
+		const matrix = fromDestinationPose(pose)
+
+		expect(toDestinationPose(matrix)).toEqual({
+			x: expect.closeTo(pose.x, 6),
+			y: expect.closeTo(pose.y, 6),
+			z: expect.closeTo(pose.z, 6),
+			oX: expect.closeTo(pose.oX, 6),
+			oY: expect.closeTo(pose.oY, 6),
+			oZ: expect.closeTo(pose.oZ, 6),
+			theta: expect.closeTo(pose.theta, 6),
+		})
+	})
+
+	it('expresses the pose relative to a destination frame', () => {
+		const destination = new Pose(1000).toMatrix4()
+
+		const matrix = fromDestinationPose(pose, destination)
+
+		// The destination sits 1 m along +x, so the world position shifts by that much.
+		expect(toDestinationPose(matrix).x).toBeCloseTo(pose.x + 1000, 6)
+		// …and reading it back against the same destination returns the input.
+		expect(toDestinationPose(matrix, destination).x).toBeCloseTo(pose.x, 6)
+	})
+
+	it('returns a new matrix so the staged goal is replaced rather than mutated', () => {
+		expect(fromDestinationPose(pose)).not.toBe(fromDestinationPose(pose))
+	})
+
+	it('stages no travel when the pose describes where the frame already is', () => {
+		const current = fromDestinationPose(pose)
+
+		const delta = moveDelta(current, fromDestinationPose(pose))
+
+		expect(delta.distance).toBeCloseTo(0, 6)
+		expect(delta.angle).toBeCloseTo(0, 6)
+	})
+})
diff --git a/src/lib/plugins/MoveFrame/buildTargetPose.ts b/src/lib/plugins/MoveFrame/buildTargetPose.ts
deleted file mode 100644
index 6ba85f929..000000000
--- a/src/lib/plugins/MoveFrame/buildTargetPose.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Matrix3, Matrix4, Quaternion, Vector3 } from 'three'
-
-import { Pose } from '$lib/math'
-
-/** How the destination orientation is derived from a clicked surface. */
-export type OrientationMode = 'keep' | 'align'
-
-/** The frame axis pointed into the surface in `align` mode (frame +Z). */
-const APPROACH_AXIS = new Vector3(0, 0, 1)
-
-const invDest = new Matrix4()
-const localPoint = new Vector3()
-const localMatrix = new Matrix4()
-const rotation = new Quaternion()
-const destRotation = new Quaternion()
-const axis = new Vector3()
-const normal = new Vector3()
-const scratchPosition = new Vector3()
-const scratchScale = new Vector3()
-const offsetDir = new Vector3()
-const worldUp = new Vector3(0, 0, 1)
-const normalMatrix = new Matrix3()
-
-/**
- * Transform an object-space face normal into worldspace using the hit object's
- *  world matrix.
- *
- * @returns a normalized copy.
- */
-export const worldNormalFromFace = (faceNormal: Vector3, objectMatrixWorld: Matrix4): Vector3 => {
-	normalMatrix.getNormalMatrix(objectMatrixWorld)
-	return faceNormal.clone().applyMatrix3(normalMatrix).normalize()
-}
-
-export interface BuildTargetPoseParams {
-	/** The clicked point, in meters. */
-	worldPoint: Vector3
-	/** World-space unit surface normal, when the hit exposed one. */
-	worldNormal?: Vector3
-	/** The destination reference frame's world transform in meters. Omit for `world`. */
-	destinationWorldMatrix?: Matrix4
-	/** The moved frame's current world transform in meters, used to keep orientation. */
-	currentWorldMatrix?: Matrix4
-	/** Which orientation convention to apply. */
-	orientation: OrientationMode
-	/** Standoff distance (mm) to lift the goal off the surface along its normal. */
-	standoff?: number
-	/** The frame axis pointed into the surface in `align` mode. Defaults to +Z. */
-	approachAxis?: Vector3
-}
-
-/**
- * Build a Viam destination `Pose` (mm + orientation vector, expressed in the
- * destination reference frame) from a clicked world point.
- *
- * Position comes from the click, lifted off the surface by `standoff` (mm) along
- * the normal so the tool stops above the clicked geometry rather than inside it
- * (the planner treats it as an obstacle). Orientation is either kept from the
- * frame's current world transform (`keep`) or aligned so `approachAxis` points
- * into the surface (`align`). `align` silently falls back to `keep` when no
- * normal is available (e.g. point clouds).
- */
-export const buildTargetPose = ({
-	worldPoint,
-	worldNormal,
-	destinationWorldMatrix,
-	currentWorldMatrix,
-	orientation,
-	standoff = 0,
-	approachAxis = APPROACH_AXIS,
-}: BuildTargetPoseParams): Pose => {
-	invDest.identity()
-	if (destinationWorldMatrix) invDest.copy(destinationWorldMatrix).invert()
-
-	offsetDir.copy(worldNormal ?? worldUp).normalize()
-	localPoint
-		.copy(worldPoint)
-		.addScaledVector(offsetDir, standoff / 1000)
-		.applyMatrix4(invDest)
-
-	const pose = new Pose().setFromVector3(localPoint)
-
-	if (orientation === 'align' && worldNormal) {
-		axis.copy(approachAxis).normalize()
-		normal.copy(worldNormal).normalize().negate()
-		rotation.setFromUnitVectors(axis, normal)
-		if (destinationWorldMatrix) {
-			destinationWorldMatrix.decompose(scratchPosition, destRotation, scratchScale)
-		} else {
-			destRotation.identity()
-		}
-
-		rotation.premultiply(destRotation.invert())
-		pose.setFromQuaternion(rotation)
-	} else if (currentWorldMatrix) {
-		localMatrix.copy(invDest).multiply(currentWorldMatrix)
-		localMatrix.decompose(scratchPosition, rotation, scratchScale)
-		pose.setFromQuaternion(rotation)
-	}
-
-	return pose
-}
diff --git a/src/lib/plugins/MoveFrame/moveGhostColor.ts b/src/lib/plugins/MoveFrame/moveGhostColor.ts
new file mode 100644
index 000000000..ab4cde820
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/moveGhostColor.ts
@@ -0,0 +1,9 @@
+/**
+ * The green every part of a staged move is drawn in — the ghosted subtree, the
+ * travel line, and the triad at the goal. One value so the pieces of a single
+ * affordance can't drift apart.
+ *
+ * A literal hex rather than a design token because these are scene materials,
+ * not UI chrome: nothing here goes through Tailwind.
+ */
+export const MOVE_GHOST_COLOR = '#37a06f'
diff --git a/src/lib/plugins/MoveFrame/moveGhosts.ts b/src/lib/plugins/MoveFrame/moveGhosts.ts
new file mode 100644
index 000000000..203b56313
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/moveGhosts.ts
@@ -0,0 +1,230 @@
+import { type ConfigurableTrait, type Entity, type World } from 'koota'
+import { Color, Matrix4 } from 'three'
+
+import { relations, traits } from '$lib/ecs'
+
+import { MOVE_GHOST_COLOR } from './moveGhostColor'
+
+/**
+ * Ghosting for a staged move, expressed as scene entities rather than meshes
+ * of its own.
+ *
+ * Everything hanging off the moved frame — a gripper on the wrist, the
+ * gripper's own `GetGeometries` shapes, a camera above it — rides one
+ * world-space delta: attached frames are rigid with respect to the frame the
+ * gizmo drags, so previewing them is a single premultiply rather than a
+ * re-solve.
+ *
+ * Each ghost is an entity holding a copy of its source's geometry, tinted and
+ * marked `NonSelectable`. The renderers the scene already runs draw them:
+ * boxes, spheres and capsules fold into the instanced draw calls, bare frames
+ * into the batched axes helpers, meshes into `Mesh.svelte`. Nothing here
+ * draws, and nothing here allocates a material.
+ *
+ * Ghosts carry no `Name` and no `ChildOf`, so the hierarchy tree, the frame
+ * system and the world-matrix system never see them.
+ */
+
+/**
+ * `traits.Color` is read back through `Color.setRGB`, which does no
+ * colour-space conversion, so the channels are stored in the working space
+ * `new Color(hex)` produces.
+ */
+const ghostColor = new Color(MOVE_GHOST_COLOR)
+
+const GHOST_OPACITY = 0.5
+
+/** Ghost entities, keyed by the entity each one mirrors. */
+export type MoveGhosts = Map<Entity, Entity>
+
+export const createMoveGhosts = (): MoveGhosts => new Map()
+
+const delta = new Matrix4()
+const inverseCurrent = new Matrix4()
+
+/**
+ * The rigid world-space motion a staged drag represents — `target × current⁻¹`.
+ * Frames attached below the moved one travel with it, so ghosting the subtree
+ * is this delta applied to each descendant's world transform.
+ *
+ * Returns module scratch, rewritten on every call: hand it straight to
+ * `syncMoveGhosts`, which reads it synchronously, and never hold it across
+ * drag frames. Scratch rather than a fresh `Matrix4` because a live gizmo
+ * recomputes this at frame rate.
+ */
+export const rigidMoveDelta = (currentWorldMatrix: Matrix4, targetWorldMatrix: Matrix4): Matrix4 =>
+	delta.multiplyMatrices(targetWorldMatrix, inverseCurrent.copy(currentWorldMatrix).invert())
+
+/**
+ * Every descendant a rigid move carries with it, depth-first.
+ *
+ * The dragged frame's own `GetGeometries` links are the exception, skipped at
+ * the top level. Those are the arm's links, and they are not rigid with the
+ * end effector: moving it re-solves the chain, so they land wherever IK puts
+ * them rather than offset by the drag. Every level below is rigid, links
+ * included.
+ */
+const collectMoved = (world: World, root: Entity, out: Entity[]): Entity[] => {
+	for (const child of world.query(relations.ChildOf(root), traits.FramesAPI)) {
+		collectDescendants(world, child, out)
+	}
+	return out
+}
+
+const collectDescendants = (world: World, entity: Entity, out: Entity[]): Entity[] => {
+	out.push(entity)
+	for (const child of world.query(relations.ChildOf(entity))) {
+		collectDescendants(world, child, out)
+	}
+	return out
+}
+
+/** Which renderers a source lands in, so a shape swap can respawn the ghost. */
+const shapeKind = (entity: Entity): number =>
+	(entity.has(traits.Box) ? 0b0_0001 : 0) |
+	(entity.has(traits.Sphere) ? 0b0_0010 : 0) |
+	(entity.has(traits.Capsule) ? 0b0_0100 : 0) |
+	(entity.has(traits.BufferGeometry) ? 0b0_1000 : 0) |
+	(entity.has(traits.Center) ? 0b1_0000 : 0)
+
+/** Set on a ghost's cloned geometry, naming the geometry it was cloned from. */
+const GHOST_OF = 'moveGhostOf'
+
+/**
+ * `Mesh.svelte` disposes the geometry it renders when it unmounts, so a ghost
+ * can't share its source's `BufferGeometry` — tearing the ghost down would
+ * take the real geometry with it. The clone drops any vertex colours, which
+ * would otherwise win over the ghost tint, and remembers its origin so a
+ * source that swaps geometry is noticed.
+ */
+const cloneGeometry = (entity: Entity) => {
+	const source = entity.get(traits.BufferGeometry)
+	if (!source) return undefined
+
+	const geometry = source.clone()
+	geometry.deleteAttribute('color')
+	geometry.userData[GHOST_OF] = source.uuid
+	return geometry
+}
+
+/**
+ * A display-only copy of `source`'s geometry. A frame with no geometry of its
+ * own — a bare reference frame — ghosts as an axes triad, so the pose it
+ * carries stays legible.
+ */
+const spawnGhost = (world: World, source: Entity): Entity => {
+	const shape: ConfigurableTrait[] = []
+
+	const box = source.get(traits.Box)
+	if (box) shape.push(traits.Box(box))
+
+	const sphere = source.get(traits.Sphere)
+	if (sphere) shape.push(traits.Sphere(sphere))
+
+	const capsule = source.get(traits.Capsule)
+	if (capsule) shape.push(traits.Capsule(capsule))
+
+	const geometry = cloneGeometry(source)
+	if (geometry) shape.push(traits.BufferGeometry(geometry))
+
+	if (shape.length === 0) shape.push(traits.ShowAxesHelper)
+
+	const center = source.get(traits.Center)
+	if (center) shape.push(traits.Center(center))
+
+	return world.spawn(
+		traits.NonSelectable,
+		traits.WorldMatrix(new Matrix4()),
+		traits.Color({ r: ghostColor.r, g: ghostColor.g, b: ghostColor.b }),
+		traits.Opacity(GHOST_OPACITY),
+		...shape
+	)
+}
+
+/** A geometry swap under a live ghost is rare enough to rebuild rather than patch. */
+const isStale = (source: Entity, ghost: Entity): boolean =>
+	shapeKind(source) !== shapeKind(ghost) ||
+	source.get(traits.BufferGeometry)?.uuid !== ghost.get(traits.BufferGeometry)?.userData[GHOST_OF]
+
+/**
+ * Dimensions and the geometry's frame offset can both change mid-drag. Only
+ * reached once `isStale` has confirmed the ghost carries the same traits as
+ * its source.
+ */
+const syncShape = (source: Entity, ghost: Entity) => {
+	const box = source.get(traits.Box)
+	if (box) ghost.set(traits.Box, box)
+
+	const sphere = source.get(traits.Sphere)
+	if (sphere) ghost.set(traits.Sphere, sphere)
+
+	const capsule = source.get(traits.Capsule)
+	if (capsule) ghost.set(traits.Capsule, capsule)
+
+	const center = source.get(traits.Center)
+	if (center) ghost.set(traits.Center, center)
+}
+
+/**
+ * Bring `ghosts` in line with the move staged by `delta`: spawn ghosts for
+ * descendants that don't have one, drop ghosts whose source has gone (or
+ * turned invisible), and write every ghost's world transform. Safe to call as
+ * often as the drag updates — it only ever writes what changed.
+ *
+ * Passing no `root` or no `delta` clears the set, so an unstaged gizmo and a
+ * closed panel take the same path.
+ */
+export const syncMoveGhosts = (
+	world: World,
+	root: Entity | undefined,
+	delta: Matrix4 | undefined,
+	ghosts: MoveGhosts
+): void => {
+	if (root === undefined || !root.isAlive() || delta === undefined) {
+		clearMoveGhosts(ghosts)
+		return
+	}
+
+	const live = new Set<Entity>()
+
+	for (const source of collectMoved(world, root, [])) {
+		// An invisible source ghosts as nothing at all, rather than as a shape
+		// with no visible original.
+		if (source.has(traits.InheritedInvisible)) continue
+
+		const sourceMatrix = source.get(traits.WorldMatrix)
+		if (!sourceMatrix) continue
+
+		let ghost = ghosts.get(source)
+		if (ghost !== undefined && (!ghost.isAlive() || isStale(source, ghost))) {
+			if (ghost.isAlive()) ghost.destroy()
+			ghost = undefined
+		}
+		if (ghost === undefined) {
+			ghost = spawnGhost(world, source)
+			ghosts.set(source, ghost)
+		}
+
+		live.add(source)
+		syncShape(source, ghost)
+
+		const ghostMatrix = ghost.get(traits.WorldMatrix)
+		if (!ghostMatrix) continue
+		ghostMatrix.multiplyMatrices(delta, sourceMatrix)
+		ghost.changed(traits.WorldMatrix)
+	}
+
+	for (const [source, ghost] of ghosts) {
+		if (live.has(source)) continue
+		if (ghost.isAlive()) ghost.destroy()
+		ghosts.delete(source)
+	}
+}
+
+/** Drop every ghost. Call when the drag ends or the panel closes. */
+export const clearMoveGhosts = (ghosts: MoveGhosts): void => {
+	for (const ghost of ghosts.values()) {
+		if (ghost.isAlive()) ghost.destroy()
+	}
+	ghosts.clear()
+}
diff --git a/src/lib/plugins/MoveFrame/moveGizmoOwner.svelte.ts b/src/lib/plugins/MoveFrame/moveGizmoOwner.svelte.ts
new file mode 100644
index 000000000..f85032439
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/moveGizmoOwner.svelte.ts
@@ -0,0 +1,19 @@
+let armedFrame = $state<string | undefined>(undefined)
+
+/**
+ * The single frame whose move gizmo is live. Several move panels can be open at
+ * once, but only one gizmo may own the scene at a time — two draggable handles
+ * competing for the same pointer, each staging its own target, is unusable. The
+ * most recently armed panel wins and the others fall back to their readout.
+ */
+export const moveGizmoOwner = {
+	get armedFrame() {
+		return armedFrame
+	},
+	arm(frame: string) {
+		armedFrame = frame
+	},
+	disarm(frame: string) {
+		if (armedFrame === frame) armedFrame = undefined
+	},
+}
diff --git a/src/lib/plugins/MoveFrame/movePicker.svelte.ts b/src/lib/plugins/MoveFrame/movePicker.svelte.ts
deleted file mode 100644
index 51459b31c..000000000
--- a/src/lib/plugins/MoveFrame/movePicker.svelte.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-let armedFrame = $state<string | undefined>(undefined)
-
-export const movePicker = {
-	get armedFrame() {
-		return armedFrame
-	},
-	arm(frame: string) {
-		armedFrame = frame
-	},
-	disarm(frame: string) {
-		if (armedFrame === frame) armedFrame = undefined
-	},
-}
diff --git a/src/lib/plugins/MoveFrame/moveTargetPose.ts b/src/lib/plugins/MoveFrame/moveTargetPose.ts
new file mode 100644
index 000000000..ca99b8c63
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/moveTargetPose.ts
@@ -0,0 +1,73 @@
+import { MathUtils, Matrix4, Quaternion, Vector3 } from 'three'
+
+import { Pose } from '$lib/math'
+
+const inverseDestination = new Matrix4()
+const localMatrix = new Matrix4()
+const currentPosition = new Vector3()
+const targetPosition = new Vector3()
+const currentRotation = new Quaternion()
+const targetRotation = new Quaternion()
+const scratchScale = new Vector3()
+
+const M_TO_MM = 1000
+
+/**
+ * Express a world-space target transform as a Viam `Pose` — millimetres, with an
+ * orientation vector whose `theta` is in degrees — relative to a destination
+ * reference frame. This is what `MotionClient.move` expects alongside the
+ * destination's name.
+ *
+ * Three.js matrices are metres; `Pose` converts. Omit
+ * `destinationWorldMatrix` when the destination is `world`, whose world
+ * transform is the identity.
+ */
+export const toDestinationPose = (
+	targetWorldMatrix: Matrix4,
+	destinationWorldMatrix?: Matrix4
+): Pose => {
+	localMatrix.copy(targetWorldMatrix)
+
+	if (destinationWorldMatrix) {
+		inverseDestination.copy(destinationWorldMatrix).invert()
+		localMatrix.premultiply(inverseDestination)
+	}
+
+	return new Pose().setFromMatrix4(localMatrix)
+}
+
+/**
+ * Inverse of `toDestinationPose`: the world-space transform a `Pose` describes
+ * relative to a destination reference frame. The panel's numeric inputs edit
+ * the pose, while the gizmo and the ghosts read the matrix, so a typed or
+ * dragged field round-trips back through here. Returns a new `Matrix4` because
+ * the staged goal is held as `$state.raw` and replaced wholesale.
+ */
+export const fromDestinationPose = (pose: Pose, destinationWorldMatrix?: Matrix4): Matrix4 => {
+	const worldMatrix = pose.toMatrix4()
+	if (destinationWorldMatrix) worldMatrix.premultiply(destinationWorldMatrix)
+	return worldMatrix
+}
+
+/** How far a staged move travels, for the panel readout. */
+export interface MoveDelta {
+	/** Straight-line translation, in millimetres. */
+	distance: number
+	/** Shortest rotation between the two orientations, in degrees. */
+	angle: number
+}
+
+/**
+ * The world-space difference between where the frame is now and where the gizmo
+ * has staged it. Frame-relative units cancel out here, so this reads the same
+ * whichever destination the move is expressed against.
+ */
+export const moveDelta = (currentWorldMatrix: Matrix4, targetWorldMatrix: Matrix4): MoveDelta => {
+	currentWorldMatrix.decompose(currentPosition, currentRotation, scratchScale)
+	targetWorldMatrix.decompose(targetPosition, targetRotation, scratchScale)
+
+	return {
+		distance: currentPosition.distanceTo(targetPosition) * M_TO_MM,
+		angle: MathUtils.radToDeg(currentRotation.angleTo(targetRotation)),
+	}
+}
diff --git a/src/lib/plugins/MoveFrame/useMoveGhosts.svelte.ts b/src/lib/plugins/MoveFrame/useMoveGhosts.svelte.ts
new file mode 100644
index 000000000..15596f4f0
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/useMoveGhosts.svelte.ts
@@ -0,0 +1,66 @@
+import type { Entity } from 'koota'
+import type { Matrix4 } from 'three'
+
+import { traits, useWorld } from '$lib/ecs'
+
+import { clearMoveGhosts, createMoveGhosts, rigidMoveDelta, syncMoveGhosts } from './moveGhosts'
+
+/**
+ * Keep a staged move's ghost entities in step with the drag, for as long as the
+ * frame has both a live pose and a staged goal.
+ *
+ * Takes the two matrices rather than the delta between them so the delta can
+ * live in module scratch: a `Matrix4` mutated in place is `===` its old self,
+ * and a `$derived` returning one would read as unchanged, freezing the ghosts
+ * after the first drag frame. The matrices themselves are replaced wholesale
+ * on every frame, so keying the effect on those stays correct at no cost.
+ *
+ * Two things move a ghost. The gizmo, once per drag frame. And a source's own
+ * `WorldMatrix`, when the robot keeps moving under a still gizmo: the arm the
+ * gripper hangs off carries on streaming poses, and the ghosts track it. Source
+ * changes are coalesced into a microtask, the same shape the instanced
+ * renderers use, so a burst of pose updates syncs once.
+ *
+ * Ghosts are torn down when the drag ends, the panel closes, or the component
+ * unmounts — `syncMoveGhosts` clears the set as soon as an input goes away, so
+ * there is no separate "stop" to remember to call.
+ */
+export const useMoveGhosts = (
+	root: () => Entity | undefined,
+	currentWorldMatrix: () => Matrix4 | undefined,
+	targetWorldMatrix: () => Matrix4 | undefined
+): void => {
+	const world = useWorld()
+	const ghosts = createMoveGhosts()
+
+	const sync = () => {
+		const current = currentWorldMatrix()
+		const target = targetWorldMatrix()
+		const delta = current && target ? rigidMoveDelta(current, target) : undefined
+		syncMoveGhosts(world, root(), delta, ghosts)
+	}
+
+	$effect(sync)
+
+	$effect(() => {
+		let scheduled = false
+
+		const unsubscribe = world.onChange(traits.WorldMatrix, (entity) => {
+			// Ghosts write their own `WorldMatrix` in the sync below; only a source
+			// moving is worth a resync.
+			// `ghosts` is keyed by source entity; a ghost updating its own WorldMatrix
+			// is not a key, so this guard filters out self-triggered updates.
+			if (scheduled || !ghosts.has(entity)) return
+			scheduled = true
+			queueMicrotask(() => {
+				scheduled = false
+				sync()
+			})
+		})
+
+		return () => {
+			unsubscribe()
+			clearMoveGhosts(ghosts)
+		}
+	})
+}
diff --git a/src/lib/plugins/MoveFrame/useMovedFrameMatrix.svelte.ts b/src/lib/plugins/MoveFrame/useMovedFrameMatrix.svelte.ts
new file mode 100644
index 000000000..d0dcffeaf
--- /dev/null
+++ b/src/lib/plugins/MoveFrame/useMovedFrameMatrix.svelte.ts
@@ -0,0 +1,64 @@
+import type { commonApi } from '@viamrobotics/sdk'
+import type { Matrix4 } from 'three'
+
+import { createRobotQuery, useRobotClient } from '@viamrobotics/svelte-sdk'
+
+import { RefetchRates } from '$lib/components/overlay/RefreshRate.svelte'
+import { RefreshRates, useSettings } from '$lib/hooks/useSettings.svelte'
+import { Pose } from '$lib/math'
+
+export interface MovedFrameMatrix {
+	readonly current: Matrix4 | undefined
+}
+
+/**
+ * The world transform of the frame the motion service actually drives.
+ *
+ * For an arm, gantry, gripper or base the frame system reports the *mount*
+ * under `<name>_origin` and the *end effector* under the bare component name —
+ * and the bare name is what `MotionClient.move` takes. The scene renders these
+ * components at their origin (see `usePoses`), so no entity carries the end
+ * effector's transform; ask the frame system for it directly. Frames without a
+ * kinematic model resolve to the transform their entity already has.
+ *
+ * Resolved against `world` so the gizmo can be dragged and committed in the one
+ * space both ends agree on, with no `_origin` ambiguity in between.
+ */
+export const useMovedFrameMatrix = (
+	partID: () => string,
+	frameName: () => string,
+	enabled: () => boolean
+): MovedFrameMatrix => {
+	const settings = useSettings()
+	const client = useRobotClient(partID)
+
+	// Per call, not per module: two open panels each get their own, so neither
+	// depends on the other's decode finishing first.
+	const pose = new Pose()
+
+	const interval = $derived(settings.current.refreshRates[RefreshRates.poses])
+
+	const query = createRobotQuery(
+		client,
+		'getPose',
+		() => [frameName(), 'world', []] as [string, string, commonApi.Transform[]],
+		() => ({
+			enabled: enabled() && partID() !== '',
+			refetchInterval:
+				interval === RefetchRates.OFF || interval === RefetchRates.MANUAL
+					? (false as const)
+					: interval,
+		})
+	)
+
+	const current = $derived.by(() => {
+		const worldPose = query.data?.pose
+		return worldPose ? pose.copy(worldPose).toMatrix4() : undefined
+	})
+
+	return {
+		get current() {
+			return current
+		},
+	}
+}
diff --git a/src/lib/transform.ts b/src/lib/transform.ts
index 0bf5e249a..bc2cfa6d4 100644
--- a/src/lib/transform.ts
+++ b/src/lib/transform.ts
@@ -6,17 +6,26 @@ const quaternion = new Quaternion()
 const euler = new Euler()
 const matA = new Matrix4()
 
-export const applyEulerDeltaToPose = (
+/**
+ * Write `pose`'s orientation into `out` with the given ZYX Euler angles
+ * (degrees) substituted in.
+ *
+ * Each angle is an absolute replacement, not a rotation composed onto what's
+ * there: the base orientation only survives in the channels `angles` leaves
+ * out, which is what lets a control edit one axis without disturbing the other
+ * two. `out` may be `pose`.
+ */
+export const setOrientationFromEuler = (
 	pose: Pose,
-	delta: { roll?: number; pitch?: number; yaw?: number },
+	angles: { roll?: number; pitch?: number; yaw?: number },
 	out: Pose
 ): void => {
 	pose.toQuaternion(quaternion)
 	euler.setFromQuaternion(quaternion, 'ZYX')
 
-	if (delta.roll !== undefined) euler.x = MathUtils.degToRad(delta.roll)
-	if (delta.pitch !== undefined) euler.y = MathUtils.degToRad(delta.pitch)
-	if (delta.yaw !== undefined) euler.z = MathUtils.degToRad(delta.yaw)
+	if (angles.roll !== undefined) euler.x = MathUtils.degToRad(angles.roll)
+	if (angles.pitch !== undefined) euler.y = MathUtils.degToRad(angles.pitch)
+	if (angles.yaw !== undefined) euler.z = MathUtils.degToRad(angles.yaw)
 
 	quaternion.setFromEuler(euler)
 	out.setFromQuaternion(quaternion)