feat: add audio input and audio output widgets (#47)

.changeset/add-audio-in-out-widgets.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': minor
+---
+
+Add `AudioInputWidget` and `AudioOutputWidget` components for audio in/out resources

.claude/rules/viam-context.md

@@ -4,6 +4,8 @@ When reviewing or writing code that touches Viam APIs or SDK types, use the tool
 
 Use `WebFetch` on `https://docs.viam.com/` to understand what a resource type (arm, camera, sensor, etc.) is supposed to do — its RPC semantics, method signatures, and expected behavior.
 
+Use `WebFetch` on `https://design.viam.com/` to understand the style guide and general design conventions and available UI components from the `prime-core` library.
+
 ## Viam source repos
 
 Use `gh api` to fetch source directly from the four Viam repos:

package.json

@@ -82,11 +82,11 @@
 		"@types/lodash-es": "^4.17.12",
 		"@types/node": "^25",
 		"@types/three": "^0.183.1",
-		"@viamrobotics/motion-tools": "^1.18.1",
-		"@viamrobotics/prime-core": "^0.1.16",
+		"@viamrobotics/motion-tools": "^1.19.1",
+		"@viamrobotics/prime-core": "^0.1.18",
 		"@viamrobotics/prime-editor": "^0.0.2",
-		"@viamrobotics/sdk": "^0.68.2",
-		"@viamrobotics/svelte-sdk": "^1.1.6",
+		"@viamrobotics/sdk": "^0.69.0",
+		"@viamrobotics/svelte-sdk": "^1.2.0",
 		"@viamrobotics/tailwind-config": "^1.0.0",
 		"@viamrobotics/three": "^0.0.9",
 		"@vitest/browser": "^4.1.4",

src/lib/builtin.ts

@@ -2,6 +2,8 @@ import type { ResourceName } from '@viamrobotics/sdk'
 
 import {
 	ArmWidget,
+	AudioInputWidget,
+	AudioOutputWidget,
 	BaseWidget,
 	BoardWidget,
 	ButtonWidget,
@@ -35,6 +37,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],

src/lib/client-map.ts

@@ -1,5 +1,7 @@
 import {
 	ArmClient,
+	AudioInClient,
+	AudioOutClient,
 	BaseClient,
 	BoardClient,
 	ButtonClient,
@@ -33,6 +35,8 @@ import { getResourceAPI } from './resource.ts'
 
 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,
@@ -65,3 +69,8 @@ export const clientForBuiltinResource = (resource: ResourceName) => {
 	const resAPI = getResourceAPI(resource)
 	return resAPI in clientMap ? clientMap[resAPI as keyof typeof clientMap] : undefined
 }
+
+export const supportsDoCommand = (resource: ResourceName): boolean => {
+	const client = clientForBuiltinResource(resource)
+	return client !== undefined && client !== MLModelClient
+}

src/lib/components/index.ts

@@ -5,6 +5,10 @@ export { default as ArmMoveToJointPositionsWidget } from './widgets/arm/move-to-
 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'

src/lib/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}`}

src/lib/components/widgets/audio-input/__tests__/properties.spec.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'svelte'
+
+import { render, screen } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Subject from '../properties.svelte'
+
+const renderSubject = (props: Partial<ComponentProps<typeof Subject>> = {}) =>
+	render(Subject, {
+		supportedCodecs: [],
+		sampleRateHz: 0,
+		numChannels: 0,
+		...props,
+	})
+
+describe('AudioInput Properties', () => {
+	it('displays supported codecs', () => {
+		renderSubject({ supportedCodecs: ['mp3', 'pcm16'] })
+		expect(screen.getByText('mp3, pcm16')).toBeInTheDocument()
+	})
+
+	it('displays None when no codecs are supported', () => {
+		renderSubject({ supportedCodecs: [] })
+		expect(screen.getByText('None')).toBeInTheDocument()
+	})
+
+	it('displays sample rate', () => {
+		renderSubject({ sampleRateHz: 48000 })
+		expect(screen.getByText('48000 Hz')).toBeInTheDocument()
+	})
+
+	it('displays number of channels', () => {
+		renderSubject({ numChannels: 2 })
+		expect(screen.getByText('2')).toBeInTheDocument()
+	})
+})