@viamrobotics/test-widgets 0.1.11 → 0.2.0

package/dist/builtin.js

@@ -1,4 +1,4 @@
-import { ArmWidget, BaseWidget, BoardWidget, ButtonWidget, CameraWidget, DiscoveryWidget, EncoderWidget, GantryWidget, GripperWidget, InputControllerWidget, MLModelServiceWidget, MotorWidget, MovementSensorWidget, NavigationServiceWidget, PowerSensorWidget, SensorWidget, ServoWidget, SlamWidget, SwitchWidget, VisionServiceWidget, } from './';
+import { ArmWidget, AudioInputWidget, AudioOutputWidget, BaseWidget, BoardWidget, ButtonWidget, CameraWidget, DiscoveryWidget, EncoderWidget, GantryWidget, GripperWidget, InputControllerWidget, MLModelServiceWidget, MotorWidget, MovementSensorWidget, NavigationServiceWidget, PowerSensorWidget, SensorWidget, ServoWidget, SlamWidget, SwitchWidget, VisionServiceWidget, } from './';
 import { clientMap } from "./client-map.js";
 import { getResourceAPI } from "./resource.js";
 export { clientForBuiltinResource } from "./client-map.js";
@@ -9,6 +9,8 @@ const resourceMap =
 // list created via `cat rdkbuiltins/viam-server-stable.json | rg "api" | sort | uniq`
 {
     'rdk:component:arm': [clientMap['rdk:component:arm'], ArmWidget, true],
+    'rdk:component:audio_in': [clientMap['rdk:component:audio_in'], AudioInputWidget, true],
+    'rdk:component:audio_out': [clientMap['rdk:component:audio_out'], AudioOutputWidget, true],
     'rdk:component:base': [clientMap['rdk:component:base'], BaseWidget, true],
     'rdk:component:board': [clientMap['rdk:component:board'], BoardWidget, true],
     'rdk:component:button': [clientMap['rdk:component:button'], ButtonWidget, true],

package/dist/client-map.d.ts

@@ -1,6 +1,8 @@
-import { ArmClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, type ResourceName, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient } from '@viamrobotics/sdk';
+import { ArmClient, AudioInClient, AudioOutClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, type ResourceName, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient } from '@viamrobotics/sdk';
 export declare const clientMap: {
     readonly 'rdk:component:arm': typeof ArmClient;
+    readonly 'rdk:component:audio_in': typeof AudioInClient;
+    readonly 'rdk:component:audio_out': typeof AudioOutClient;
     readonly 'rdk:component:base': typeof BaseClient;
     readonly 'rdk:component:board': typeof BoardClient;
     readonly 'rdk:component:button': typeof ButtonClient;
@@ -28,4 +30,5 @@ export declare const clientMap: {
     readonly 'rdk:service:world_state_store': typeof WorldStateStoreClient;
     readonly 'rdk:service:video': typeof VideoClient;
 };
-export declare const clientForBuiltinResource: (resource: ResourceName) => typeof ArmClient | typeof BaseClient | typeof GantryClient | typeof GripperClient | typeof MotorClient | typeof ServoClient | typeof BoardClient | typeof ButtonClient | typeof CameraClient | typeof DiscoveryClient | typeof EncoderClient | typeof GenericComponentClient | typeof InputControllerClient | typeof MovementSensorClient | typeof PoseTrackerClient | typeof PowerSensorClient | typeof SensorClient | typeof SwitchClient | typeof DataManagerClient | typeof GenericServiceClient | typeof MLModelClient | typeof MotionClient | typeof NavigationClient | typeof SlamClient | typeof VisionClient | typeof WorldStateStoreClient | typeof VideoClient | undefined;
+export declare const clientForBuiltinResource: (resource: ResourceName) => typeof ArmClient | typeof BaseClient | typeof GantryClient | typeof GripperClient | typeof MotorClient | typeof ServoClient | typeof AudioInClient | typeof AudioOutClient | typeof BoardClient | typeof ButtonClient | typeof CameraClient | typeof DiscoveryClient | typeof EncoderClient | typeof GenericComponentClient | typeof InputControllerClient | typeof MovementSensorClient | typeof PoseTrackerClient | typeof PowerSensorClient | typeof SensorClient | typeof SwitchClient | typeof DataManagerClient | typeof GenericServiceClient | typeof MLModelClient | typeof MotionClient | typeof NavigationClient | typeof SlamClient | typeof VisionClient | typeof WorldStateStoreClient | typeof VideoClient | undefined;
+export declare const supportsDoCommand: (resource: ResourceName) => boolean;

package/dist/client-map.js

@@ -1,7 +1,9 @@
-import { ArmClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient, } from '@viamrobotics/sdk';
+import { ArmClient, AudioInClient, AudioOutClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient, } from '@viamrobotics/sdk';
 import { getResourceAPI } from "./resource.js";
 export const clientMap = {
     'rdk:component:arm': ArmClient,
+    'rdk:component:audio_in': AudioInClient,
+    'rdk:component:audio_out': AudioOutClient,
     'rdk:component:base': BaseClient,
     'rdk:component:board': BoardClient,
     'rdk:component:button': ButtonClient,
@@ -33,3 +35,7 @@ export const clientForBuiltinResource = (resource) => {
     const resAPI = getResourceAPI(resource);
     return resAPI in clientMap ? clientMap[resAPI] : undefined;
 };
+export const supportsDoCommand = (resource) => {
+    const client = clientForBuiltinResource(resource);
+    return client !== undefined && client !== MLModelClient;
+};

package/dist/components/error.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
 	import { twMerge } from 'tailwind-merge'
 
 	interface Props {
@@ -11,15 +12,45 @@
 
 	const { lastError, id = `error_${defaultId}`, class: className = '' }: Props = $props()
 
-	const errorName = $derived(lastError?.name)
-	const errorMessage = $derived(lastError?.message)
+	const errorText = $derived(
+		lastError?.name && lastError.message ? `${lastError.name}: ${lastError.message}` : ''
+	)
+
+	let showCopySuccess = $state(false)
+	let copySuccessTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+	const copyErrorToClipboard = async () => {
+		try {
+			await globalThis.navigator.clipboard.writeText(errorText)
+			showCopySuccess = true
+			clearTimeout(copySuccessTimeoutId)
+			copySuccessTimeoutId = setTimeout(() => {
+				showCopySuccess = false
+			}, 750)
+		} catch (error) {
+			console.error('Failed to copy error to clipboard', error)
+		}
+	}
+
+	$effect(() => () => clearTimeout(copySuccessTimeoutId))
 </script>
 
-{#if errorName && errorMessage}
-	<p
-		{id}
-		class={twMerge('font-roboto-mono text-danger-dark text-xs', className)}
-	>
-		{`${errorName}: ${errorMessage}`}
-	</p>
+{#if errorText}
+	<div class="flex items-center justify-between gap-1">
+		<p
+			{id}
+			class={twMerge('font-roboto-mono text-danger-dark text-xs', className)}
+		>
+			{errorText}
+		</p>
+		<Tooltip let:tooltipID>
+			<IconButton
+				aria-describedby={tooltipID}
+				icon={showCopySuccess ? 'check' : 'content-copy'}
+				label="Copy error"
+				on:click={copyErrorToClipboard}
+			/>
+			<div slot="description">Copy error</div>
+		</Tooltip>
+	</div>
 {/if}

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@ export { default as ArmWidget } from './widgets/arm/arm.svelte';
 export { default as ArmMoveToJointPositionsWidget } from './widgets/arm/move-to-joint-positions-widget.svelte';
 export { default as ArmMoveToPositionWidget } from './widgets/arm/move-to-position-widget.svelte';
 export { default as ArmQuickMoveWidget } from './widgets/arm/quick-move-widget.svelte';
+export { default as AudioInputWidget } from './widgets/audio-input/audio-input.svelte';
+export { default as AudioOutputWidget } from './widgets/audio-output/audio-output.svelte';
 export { default as BaseWidget } from './widgets/base/base.svelte';
 export { default as BaseMoveStraightWidget } from './widgets/base/move-straight-widget.svelte';
 export { default as BaseQuickMoveWidget } from './widgets/base/quick-move-widget.svelte';

package/dist/components/index.js

@@ -3,6 +3,8 @@ export { default as ArmWidget } from './widgets/arm/arm.svelte';
 export { default as ArmMoveToJointPositionsWidget } from './widgets/arm/move-to-joint-positions-widget.svelte';
 export { default as ArmMoveToPositionWidget } from './widgets/arm/move-to-position-widget.svelte';
 export { default as ArmQuickMoveWidget } from './widgets/arm/quick-move-widget.svelte';
+export { default as AudioInputWidget } from './widgets/audio-input/audio-input.svelte';
+export { default as AudioOutputWidget } from './widgets/audio-output/audio-output.svelte';
 export { default as BaseWidget } from './widgets/base/base.svelte';
 export { default as BaseMoveStraightWidget } from './widgets/base/move-straight-widget.svelte';
 export { default as BaseQuickMoveWidget } from './widgets/base/quick-move-widget.svelte';

package/dist/components/queries.svelte

@@ -29,11 +29,17 @@
 	let errors = $state.raw<Error[]>([])
 	let data = $state.raw<unknown[]>([])
 
+	const serializeErrors = (errs: Error[]) =>
+		errs.map((error) => `${error.name}\0${error.message}`).join('\0\0')
+
 	// Errors are null during loading, so keep the latest errors during polling.
+	// Only update errors if the content has changed to avoid re-rendering identical errors.
 	$effect.pre(() => {
 		const nextErrors = queries.map((query) => query.error).filter((error) => error !== null)
 		if (nextErrors.length > 0) {
-			errors = nextErrors
+			if (serializeErrors(nextErrors) !== serializeErrors(errors)) {
+				errors = nextErrors
+			}
 		} else if (queries.every((query) => query.isSuccess)) {
 			errors = []
 		}
@@ -55,7 +61,7 @@
 		{contentRect}
 		cx={contentCx}
 	>
-		{#each errors as error (error)}
+		{#each errors as error (`${error.name}\0${error.message}`)}
 			<ErrorDisplay lastError={error} />
 		{/each}
 	</ContentRect>

package/dist/components/refetch-interval-store.svelte.d.ts

@@ -14,5 +14,5 @@ export declare const RefetchIntervals: {
 };
 export type RefetchRate = ValueOf<typeof RefetchRates>;
 export type RefetchInterval = ValueOf<typeof RefetchIntervals>;
-export declare const RefetchRateToInterval: ["Live" | "Refresh every second" | "Refresh every 5 seconds" | "Manual refresh", false | 1000 | 33.3333 | 5000][];
+export declare const RefetchRateToInterval: ["Live" | "Refresh every second" | "Refresh every 5 seconds" | "Manual refresh", false | 33.3333 | 1000 | 5000][];
 export declare const createRefetchIntervalStore: (partID: () => string, resourceName: () => string, scope: string, defaultInterval?: RefetchInterval) => PersistedState<RefetchInterval>;

package/dist/components/section-group.svelte

@@ -32,7 +32,7 @@ A group of sections in a card. For example, "test" or "do command"
 >
 	<header class={['border-gray-3 bg-light hover:bg-medium h-7', !isCollapsed && 'border-b']}>
 		<button
-			class="group flex h-full w-full flex-row items-center gap-2 px-[11px]"
+			class="group flex h-full w-full flex-row items-center gap-2 px-2.75"
 			aria-controls={collapseID}
 			aria-expanded={!isCollapsed}
 			aria-label={`${isCollapsed ? 'expand' : 'collapse'} ${title}`}

package/dist/components/widgets/audio-input/audio-input.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { Button, Label, NumericInput, Select } from '@viamrobotics/prime-core'
+	import { AudioInClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import MutationSection from '../../mutation-section.svelte'
+	import Query from '../../query.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	import { createAudioCapturer } from './create-audio-capturer.svelte.js'
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'audio-input'
+	)
+
+	const client = createResourceClient(
+		AudioInClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	let captureCodec = $state('')
+	let captureDuration = $state(3)
+
+	const capture = createAudioCapturer(client)
+
+	const availableCodecs = $derived(
+		propertiesQuery.data?.supportedCodecs.length ? propertiesQuery.data.supportedCodecs : ['pcm16']
+	)
+
+	const selectedCodec = $derived(captureCodec || availableCodecs[0]!)
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[propertiesQuery]}
+			/>
+		</div>
+
+		<div class="flex flex-row divide-x">
+			<div class="flex w-full flex-col divide-y">
+				<MutationSection
+					title="GetAudio"
+					description="Capture audio from the device"
+					lastError={capture.error}
+				>
+					<div class="flex flex-col gap-2">
+						<Label cx="gap-1 text-xs">
+							Codec
+							<Select
+								slot="input"
+								value={selectedCodec}
+								on:change={(e) => {
+									captureCodec = (e.target as HTMLSelectElement).value
+								}}
+							>
+								{#each availableCodecs as codec (codec)}
+									<option value={codec}>{codec}</option>
+								{/each}
+							</Select>
+						</Label>
+						<Label cx="gap-1 text-xs">
+							Duration (seconds, 0 = stream until stopped)
+							<NumericInput
+								slot="input"
+								value={captureDuration}
+								on:change={(e) => {
+									captureDuration = numberValueFromEvent(e) ?? 3
+								}}
+							/>
+						</Label>
+					</div>
+
+					<div class="mt-auto flex flex-col items-start gap-2">
+						{#if capture.status === 'recording'}
+							<p class="font-roboto-mono text-subtle-1 text-xs">
+								{(capture.totalBytes / 1024).toFixed(1)} kB captured
+							</p>
+							<Button
+								icon="stop-circle-outline"
+								onclick={capture.stop}
+							>
+								Stop
+							</Button>
+						{:else}
+							{#if capture.downloadUrl}
+								<p class="font-roboto-mono text-subtle-1 text-xs">
+									{(capture.totalBytes / 1024).toFixed(1)} kB captured
+								</p>
+								<a
+									href={capture.downloadUrl}
+									download="audio-capture.{selectedCodec}"
+									rel="external"
+								>
+									<Button icon="download">Download</Button>
+								</a>
+							{/if}
+							<Button
+								icon="play-circle-outline"
+								onclick={() => capture.start(selectedCodec, captureDuration)}
+								disabled={!client.current}
+							>
+								{capture.status === 'done' ? 'Capture Again' : 'Start Capture'}
+							</Button>
+						{/if}
+					</div>
+				</MutationSection>
+			</div>
+
+			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
+				<ApiSection
+					title="GetProperties"
+					description="Audio input properties"
+					class="relative"
+				>
+					<Query
+						query={propertiesQuery}
+						contentCx="h-6"
+					>
+						{#if propertiesQuery.data !== undefined}
+							<Properties
+								supportedCodecs={propertiesQuery.data.supportedCodecs}
+								sampleRateHz={propertiesQuery.data.sampleRateHz}
+								numChannels={propertiesQuery.data.numChannels}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/audio-input/audio-input.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const AudioInput: import("svelte").Component<Props, {}, "">;
+type AudioInput = ReturnType<typeof AudioInput>;
+export default AudioInput;

package/dist/components/widgets/audio-input/create-audio-capturer.svelte.d.ts

@@ -0,0 +1,13 @@
+import { AudioInClient } from '@viamrobotics/sdk';
+type CaptureStatus = 'idle' | 'recording' | 'done' | 'error';
+export declare const createAudioCapturer: (client: {
+    current: AudioInClient | undefined;
+}) => {
+    readonly status: CaptureStatus;
+    readonly error: Error | null;
+    readonly totalBytes: number;
+    readonly downloadUrl: string | undefined;
+    start: (codec: string, duration: number) => Promise<void>;
+    stop: () => void;
+};
+export {};

package/dist/components/widgets/audio-input/create-audio-capturer.svelte.js

@@ -0,0 +1,85 @@
+import { AudioInClient } from '@viamrobotics/sdk';
+export const createAudioCapturer = (client) => {
+    let captureStatus = $state('idle');
+    let captureError = $state(null);
+    let captureTotalBytes = $state(0);
+    let captureDownloadUrl = $state();
+    let captureAbortController = $state.raw();
+    $effect(() => {
+        return () => {
+            if (captureDownloadUrl)
+                URL.revokeObjectURL(captureDownloadUrl);
+        };
+    });
+    const start = async (codec, duration) => {
+        if (!client.current)
+            return;
+        captureStatus = 'recording';
+        captureError = null;
+        captureTotalBytes = 0;
+        if (captureDownloadUrl) {
+            URL.revokeObjectURL(captureDownloadUrl);
+            captureDownloadUrl = undefined;
+        }
+        const controller = new AbortController();
+        captureAbortController = controller;
+        const chunks = [];
+        try {
+            const stream = client.current.getAudio(codec, duration, 0n, {}, { ...client.current.callOptions, signal: controller.signal });
+            for await (const chunk of stream) {
+                chunks.push(chunk.audioData);
+                captureTotalBytes += chunk.audioData.byteLength;
+            }
+            captureStatus = 'done';
+        }
+        catch (error) {
+            if (controller.signal.aborted) {
+                captureStatus = 'done';
+            }
+            else {
+                captureStatus = 'error';
+                captureError = error instanceof Error ? error : new Error(String(error));
+            }
+        }
+        finally {
+            captureAbortController = undefined;
+        }
+        if (chunks.length > 0) {
+            const totalLength = chunks.reduce((sum, c) => sum + c.byteLength, 0);
+            const merged = new Uint8Array(totalLength);
+            let offset = 0;
+            for (const chunk of chunks) {
+                merged.set(chunk, offset);
+                offset += chunk.byteLength;
+            }
+            const mimeTypes = {
+                mp3: 'audio/mpeg',
+                wav: 'audio/wav',
+                aac: 'audio/aac',
+                opus: 'audio/ogg',
+                flac: 'audio/flac',
+            };
+            const mimeType = mimeTypes[codec] ?? 'audio/octet-stream';
+            captureDownloadUrl = URL.createObjectURL(new Blob([merged], { type: mimeType }));
+        }
+    };
+    const stop = () => {
+        captureAbortController?.abort();
+    };
+    return {
+        get status() {
+            return captureStatus;
+        },
+        get error() {
+            return captureError;
+        },
+        get totalBytes() {
+            return captureTotalBytes;
+        },
+        get downloadUrl() {
+            return captureDownloadUrl;
+        },
+        start,
+        stop,
+    };
+};

package/dist/components/widgets/audio-input/properties.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	interface Props {
+		supportedCodecs: string[]
+		sampleRateHz: number
+		numChannels: number
+	}
+
+	const { supportedCodecs, sampleRateHz, numChannels }: Props = $props()
+</script>
+
+<dl class="font-roboto-mono flex flex-col gap-y-2 text-sm">
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Supported Codecs</dt>
+		<dd class="text-subtle-1">
+			{supportedCodecs.length > 0 ? supportedCodecs.join(', ') : 'None'}
+		</dd>
+	</div>
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Sample Rate</dt>
+		<dd class="text-subtle-1">{sampleRateHz} Hz</dd>
+	</div>
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Channels</dt>
+		<dd class="text-subtle-1">{numChannels}</dd>
+	</div>
+</dl>

package/dist/components/widgets/audio-input/properties.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    supportedCodecs: string[];
+    sampleRateHz: number;
+    numChannels: number;
+}
+declare const Properties: import("svelte").Component<Props, {}, "">;
+type Properties = ReturnType<typeof Properties>;
+export default Properties;

package/dist/components/widgets/audio-output/audio-output.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { Button, Label, NumericInput, Select } from '@viamrobotics/prime-core'
+	import { AudioOutClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import MutationSection from '../../mutation-section.svelte'
+	import Query from '../../query.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+
+	import { ExtToCodec, MimeToCodec } from './codec.js'
+	import { createAudioPlayer } from './create-audio-player.svelte.js'
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'audio-output'
+	)
+
+	const client = createResourceClient(
+		AudioOutClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const availableCodecs = $derived(
+		propertiesQuery.data?.supportedCodecs.length ? propertiesQuery.data.supportedCodecs : ['pcm16']
+	)
+
+	const playContext = createAudioPlayer(client)
+
+	let selectedFile = $state.raw<File | null>(null)
+	let fileInputError = $state<string | null>(null)
+	let playCodec = $state('')
+	let playSampleRateHz = $state<number | null>(null)
+	let playNumChannels = $state<number | null>(null)
+
+	const selectedCodec = $derived(playCodec || availableCodecs[0]!)
+	const selectedSampleRateHz = $derived(
+		playSampleRateHz ?? propertiesQuery.data?.sampleRateHz ?? 48000
+	)
+	const selectedNumChannels = $derived(playNumChannels ?? propertiesQuery.data?.numChannels ?? 1)
+
+	const handleFileChange = (event: Event) => {
+		const input = event.target as HTMLInputElement
+		const file = input.files?.[0] ?? null
+		selectedFile = file
+		fileInputError = null
+		if (file) {
+			const ext = file.name.split('.').pop()?.toLowerCase() ?? ''
+			if (MimeToCodec[file.type]) {
+				playCodec = MimeToCodec[file.type]
+			} else if (MimeToCodec[`audio/${ext}`]) {
+				playCodec = MimeToCodec[`audio/${ext}`]
+			} else if (ExtToCodec[ext]) {
+				playCodec = ExtToCodec[ext]
+			} else {
+				fileInputError = 'Unsupported audio format'
+			}
+		}
+	}
+
+	const play = async () => {
+		if (!selectedFile) {
+			fileInputError = 'Please select an audio file'
+			return
+		}
+		if (!client.current) return
+
+		const buffer = await selectedFile.arrayBuffer()
+		const audioData = new Uint8Array(buffer)
+		await playContext.play(audioData, selectedCodec, selectedSampleRateHz, selectedNumChannels)
+	}
+
+	const playButtonLabel = $derived.by(() => {
+		if (playContext.status === 'playing') return 'Playing...'
+		if (playContext.status === 'done') return 'Play Again'
+		return 'Play'
+	})
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[propertiesQuery]}
+			/>
+		</div>
+
+		<div class="flex flex-row divide-x">
+			<div class="flex w-full flex-col divide-y">
+				<MutationSection
+					title="Play"
+					description="Send audio data to the device"
+					lastError={playContext.error}
+				>
+					<div class="flex flex-col gap-2">
+						<Label cx="gap-1 text-xs">
+							Audio file
+							<input
+								slot="input"
+								type="file"
+								accept={availableCodecs.map((c) => `.${c}`).join(',')}
+								class="text-xs"
+								onchange={handleFileChange}
+							/>
+						</Label>
+						{#if fileInputError}
+							<p class="text-xs text-red-500">{fileInputError}</p>
+						{/if}
+						{#if selectedFile}
+							<p class="font-roboto-mono text-subtle-1 text-xs">{selectedFile.name}</p>
+						{/if}
+						<Label cx="gap-1 text-xs">
+							Codec
+							<Select
+								slot="input"
+								value={selectedCodec}
+								on:change={(e) => {
+									playCodec = (e.target as HTMLSelectElement).value
+								}}
+							>
+								{#each availableCodecs as codec (codec)}
+									<option value={codec}>{codec}</option>
+								{/each}
+							</Select>
+						</Label>
+						<Label cx="gap-1 text-xs">
+							Sample rate (Hz)
+							<NumericInput
+								slot="input"
+								value={selectedSampleRateHz}
+								on:change={(e) => {
+									playSampleRateHz = numberValueFromEvent(e) ?? null
+								}}
+							/>
+						</Label>
+						<Label cx="gap-1 text-xs">
+							Channels
+							<NumericInput
+								slot="input"
+								value={selectedNumChannels}
+								on:change={(e) => {
+									playNumChannels = numberValueFromEvent(e) ?? null
+								}}
+							/>
+						</Label>
+					</div>
+
+					<div class="mt-auto">
+						<Button
+							icon="play-circle-outline"
+							onclick={play}
+							disabled={!client.current || playContext.status === 'playing'}
+						>
+							{playButtonLabel}
+						</Button>
+					</div>
+				</MutationSection>
+			</div>
+
+			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
+				<ApiSection
+					title="GetProperties"
+					description="Audio output properties"
+					class="relative"
+				>
+					<Query
+						query={propertiesQuery}
+						contentCx="h-6"
+					>
+						{#if propertiesQuery.data !== undefined}
+							<Properties
+								supportedCodecs={propertiesQuery.data.supportedCodecs}
+								sampleRateHz={propertiesQuery.data.sampleRateHz}
+								numChannels={propertiesQuery.data.numChannels}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/audio-output/audio-output.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const AudioOutput: import("svelte").Component<Props, {}, "">;
+type AudioOutput = ReturnType<typeof AudioOutput>;
+export default AudioOutput;

package/dist/components/widgets/audio-output/codec.d.ts

@@ -0,0 +1,2 @@
+export declare const MimeToCodec: Record<string, string>;
+export declare const ExtToCodec: Record<string, string>;

package/dist/components/widgets/audio-output/codec.js

@@ -0,0 +1,16 @@
+export const MimeToCodec = {
+    'audio/mpeg': 'mp3',
+    'audio/mp3': 'mp3',
+    'audio/wav': 'wav',
+    'audio/x-wav': 'wav',
+    'audio/aac': 'aac',
+    'audio/ogg': 'opus',
+    'audio/flac': 'flac',
+    'audio/x-flac': 'flac',
+};
+// Raw PCM formats have no standard MIME type; map by file extension directly.
+export const ExtToCodec = {
+    pcm16: 'pcm16',
+    pcm32: 'pcm32',
+    pcm32_float: 'pcm32_float',
+};

package/dist/components/widgets/audio-output/create-audio-player.svelte.d.ts

@@ -0,0 +1,10 @@
+import { AudioOutClient } from '@viamrobotics/sdk';
+type PlayStatus = 'idle' | 'playing' | 'done' | 'error';
+export declare const createAudioPlayer: (client: {
+    current: AudioOutClient | undefined;
+}) => {
+    readonly status: PlayStatus;
+    readonly error: Error | null;
+    play: (audioData: Uint8Array, codec: string, sampleRateHz: number, numChannels: number) => Promise<void>;
+};
+export {};

package/dist/components/widgets/audio-output/create-audio-player.svelte.js

@@ -0,0 +1,28 @@
+import { AudioOutClient, commonApi } from '@viamrobotics/sdk';
+export const createAudioPlayer = (client) => {
+    let playStatus = $state('idle');
+    let playError = $state(null);
+    const play = async (audioData, codec, sampleRateHz, numChannels) => {
+        if (!client.current)
+            return;
+        playStatus = 'playing';
+        playError = null;
+        try {
+            await client.current.play(audioData, commonApi.AudioInfo.fromJson({ codec, sampleRateHz, numChannels }), {});
+            playStatus = 'done';
+        }
+        catch (error) {
+            playStatus = 'error';
+            playError = error instanceof Error ? error : new Error(String(error));
+        }
+    };
+    return {
+        get status() {
+            return playStatus;
+        },
+        get error() {
+            return playError;
+        },
+        play,
+    };
+};

package/dist/components/widgets/audio-output/properties.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	interface Props {
+		supportedCodecs: string[]
+		sampleRateHz: number
+		numChannels: number
+	}
+
+	const { supportedCodecs, sampleRateHz, numChannels }: Props = $props()
+</script>
+
+<dl class="font-roboto-mono flex flex-col gap-y-2 text-sm">
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Supported Codecs</dt>
+		<dd class="text-subtle-1">
+			{supportedCodecs.length > 0 ? supportedCodecs.join(', ') : 'None'}
+		</dd>
+	</div>
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Sample Rate</dt>
+		<dd class="text-subtle-1">{sampleRateHz} Hz</dd>
+	</div>
+	<div class="flex flex-col gap-0.5">
+		<dt class="text-default w-50 min-w-50 pr-2 font-medium">Channels</dt>
+		<dd class="text-subtle-1">{numChannels}</dd>
+	</div>
+</dl>

package/dist/components/widgets/audio-output/properties.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    supportedCodecs: string[];
+    sampleRateHz: number;
+    numChannels: number;
+}
+declare const Properties: import("svelte").Component<Props, {}, "">;
+type Properties = ReturnType<typeof Properties>;
+export default Properties;

package/dist/components/widgets/do-command/create-do-command-client.svelte.d.ts

@@ -0,0 +1,7 @@
+import { MLModelClient, ResourceName } from '@viamrobotics/sdk';
+import { clientMap } from '../../../client-map';
+type DoCommandable = InstanceType<Exclude<(typeof clientMap)[keyof typeof clientMap], typeof MLModelClient>>;
+export declare const createDoCommandClient: (resource: () => ResourceName, partID: () => string, resourceName: () => string) => {
+    current: DoCommandable | undefined;
+};
+export {};

package/dist/components/widgets/do-command/create-do-command-client.svelte.js

@@ -0,0 +1,26 @@
+import { MachineConnectionEvent, MLModelClient, ResourceName } from '@viamrobotics/sdk';
+import { useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
+import { clientForBuiltinResource, clientMap } from '../../../client-map';
+export const createDoCommandClient = (resource, partID, resourceName) => {
+    const robotClient = useRobotClient(partID);
+    const connectionStatus = useConnectionStatus(partID);
+    const resourceClient = $derived.by(() => {
+        if (!robotClient.current)
+            return;
+        if (connectionStatus.current !== MachineConnectionEvent.CONNECTED)
+            return;
+        const constructor = clientForBuiltinResource(resource());
+        if (!constructor)
+            return;
+        if (constructor === MLModelClient)
+            return;
+        const nextClient = new constructor(robotClient.current, resourceName());
+        nextClient.partID = partID();
+        return nextClient;
+    });
+    return {
+        get current() {
+            return resourceClient;
+        },
+    };
+};

package/dist/components/widgets/do-command/do-command.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Button, Progress } from '@viamrobotics/prime-core'
-	import { JsonEditor } from '@viamrobotics/prime-editor'
-	import { MLModelClient, ResourceName, Struct } from '@viamrobotics/sdk'
-	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+	import { CodeEditor } from '@viamrobotics/prime-core/code-editor'
+	import { type ResourceName, Struct } from '@viamrobotics/sdk'
+	import { createResourceMutation } from '@viamrobotics/svelte-sdk'
 	import { PersistedState } from 'runed'
 
-	import { clientForBuiltinResource } from '../../../client-map'
+	import { supportsDoCommand } from '../../../client-map'
 	import { getResourceAPI, getResourceKey } from '../../../resource'
 
 	import ErrorDisplay from '../../error.svelte'
+	import { createDoCommandClient } from './create-do-command-client.svelte'
 
 	interface Props {
 		partID: string
@@ -17,19 +18,15 @@
 
 	const { partID, resource }: Props = $props()
 
-	type DoCommandable = Extract<ReturnType<typeof clientForBuiltinResource>, MLModelClient>
-
-	const resourceClientType = $derived(clientForBuiltinResource(resource)) as DoCommandable
-
-	const client = $derived(
-		createResourceClient(
-			resourceClientType,
-			() => partID,
-			() => resource.name
-		)
+	const client = createDoCommandClient(
+		() => resource,
+		() => partID,
+		() => resource.name
 	)
 
-	const doCommandMutation = $derived(createResourceMutation(client, 'doCommand'))
+	const doCommandMutation = createResourceMutation(client, 'doCommand')
+
+	const isSupported = $derived(supportsDoCommand(resource))
 
 	let lastErr = $state<Error | null>()
 
@@ -53,17 +50,18 @@
 	}
 </script>
 
-{#if doCommandMutation}
+{#if isSupported}
 	<div class="flex flex-row items-center justify-between">
 		<div class="flex w-[45%] flex-col gap-2 border-r py-2">
 			<span class="text-gray-9 px-4 text-sm font-medium">Input</span>
-			<JsonEditor
+			<CodeEditor
 				label="input"
-				initialValue={input.current ?? '{}'}
+				language="json"
+				value={input.current ?? '{}'}
 				onChange={(nextInput: string) => {
 					input.current = nextInput
 				}}
-				cx="h-56 overflow-y-auto"
+				class="h-56 overflow-y-auto"
 				errorMessageID={lastErr ? uid : undefined}
 			/>
 		</div>
@@ -84,11 +82,12 @@
 				{/if}
 			</div>
 			{#if !lastErr}
-				<JsonEditor
+				<CodeEditor
 					label="output"
-					initialValue={output}
+					language="json"
+					value={output}
 					readonly
-					cx="h-56 overflow-y-auto"
+					class="h-56 overflow-y-auto"
 				/>
 			{:else}
 				<ErrorDisplay

package/dist/components/widgets/do-command/do-command.svelte.d.ts

@@ -1,4 +1,4 @@
-import { ResourceName } from '@viamrobotics/sdk';
+import { type ResourceName } from '@viamrobotics/sdk';
 interface Props {
     partID: string;
     resource: ResourceName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -31,7 +31,6 @@
     "@threlte/core": ">=8",
     "@threlte/extras": ">=9",
     "@viamrobotics/prime-core": ">=0.1",
-    "@viamrobotics/prime-editor": ">=0.0.2",
     "@viamrobotics/sdk": ">=0.68",
     "@viamrobotics/svelte-sdk": ">=1.1",
     "lodash-es": ">=4",
@@ -55,8 +54,8 @@
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/svelte-query": "^6.1.24",
-    "@tanstack/svelte-query-devtools": "^6.1.24",
+    "@tanstack/svelte-query": "^6.1.25",
+    "@tanstack/svelte-query-devtools": "^6.1.25",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
@@ -68,9 +67,8 @@
     "@types/node": "^25.6.0",
     "@types/three": "^0.183.1",
     "@viamrobotics/motion-tools": "^1.19.1",
-    "@viamrobotics/prime-core": "^0.1.19",
-    "@viamrobotics/prime-editor": "^0.0.2",
-    "@viamrobotics/sdk": "^0.68.2",
+    "@viamrobotics/prime-core": "^0.1.21",
+    "@viamrobotics/sdk": "^0.69.0",
     "@viamrobotics/svelte-sdk": "^1.2.1",
     "@viamrobotics/tailwind-config": "^1.0.0",
     "@viamrobotics/three": "^0.0.9",