create-spatius-app 0.1.0-beta.0

package/templates/cloudflare-livekit/tests/web/avatar-session.test.ts

@@ -0,0 +1,119 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Room } from 'livekit-client';
+const sdk = vi.hoisted(() => ({
+  initialize: vi.fn(),
+  load: vi.fn(),
+  view: vi.fn(),
+  attach: vi.fn(),
+  detach: vi.fn(),
+  dispose: vi.fn(),
+}));
+vi.mock('@spatius/avatarkit', () => ({
+  AvatarSDK: { configuration: {}, initialize: sdk.initialize },
+  AvatarManager: { shared: { load: sdk.load } },
+  DrivingServiceMode: { rtc: 'rtc' },
+  AvatarView: class {
+    constructor() {
+      sdk.view();
+    }
+    dispose = sdk.dispose;
+  },
+}));
+vi.mock('@spatius/avatarkit-rtc', () => ({
+  LiveKitProvider: class {},
+  AvatarPlayer: class {
+    attach = sdk.attach;
+    detach = sdk.detach;
+  },
+}));
+import { attachAvatarSession } from '../../web/avatar-session.js';
+const credentials = {
+  server_url: 'wss://example.invalid',
+  participant_token: 'token',
+  room_name: 'room',
+  spatius_app_id: 'app',
+  spatius_avatar_id: 'configured-avatar',
+};
+beforeEach(() => {
+  sdk.load.mockResolvedValue({});
+  sdk.attach.mockResolvedValue(undefined);
+  sdk.detach.mockResolvedValue(undefined);
+});
+afterEach(() => vi.clearAllMocks());
+describe('AvatarKit external room adapter', () => {
+  it('applies the public background behind the view and removes it on disposal', async () => {
+    const container = { style: { backgroundImage: '' } } as HTMLElement;
+    const controller = await attachAvatarSession(
+      container,
+      {
+        ...credentials,
+        spatius_avatar_background_url: 'https://cdn.example.com/room.jpg',
+      },
+      {} as Room,
+      new AbortController().signal,
+      vi.fn(),
+    );
+    expect(container.style.backgroundImage).toBe(
+      'url("https://cdn.example.com/room.jpg")',
+    );
+    await controller.dispose();
+    expect(container.style.backgroundImage).toBe('');
+  });
+
+  it('attaches to the host room and only detaches/disposes its own resources', async () => {
+    const room = { connect: vi.fn(), disconnect: vi.fn() } as unknown as Room;
+    const controller = await attachAvatarSession(
+      { style: { backgroundImage: '' } } as HTMLElement,
+      credentials,
+      room,
+      new AbortController().signal,
+      vi.fn(),
+    );
+    expect(sdk.load).toHaveBeenCalledWith('configured-avatar');
+    expect(sdk.attach).toHaveBeenCalledExactlyOnceWith(room);
+    expect(room.connect).not.toHaveBeenCalled();
+    await controller.dispose();
+    await controller.dispose();
+    expect(sdk.detach).toHaveBeenCalledOnce();
+    expect(sdk.dispose).toHaveBeenCalledOnce();
+    expect(room.disconnect).not.toHaveBeenCalled();
+  });
+  it('cleans up an attach failure and still disposes the view when detach fails', async () => {
+    sdk.attach.mockRejectedValueOnce(new Error('attach failed'));
+    sdk.detach.mockRejectedValueOnce(new Error('already detached'));
+    await expect(
+      attachAvatarSession(
+        { style: { backgroundImage: '' } } as HTMLElement,
+        credentials,
+        {} as Room,
+        new AbortController().signal,
+        vi.fn(),
+      ),
+    ).rejects.toThrow('attach failed');
+    expect(sdk.dispose).toHaveBeenCalledOnce();
+  });
+  it('does not construct a late renderer after an aborted asset load', async () => {
+    let finish!: (value: object) => void;
+    sdk.load.mockReturnValueOnce(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const controller = new AbortController();
+    const pending = attachAvatarSession(
+      { style: { backgroundImage: '' } } as HTMLElement,
+      credentials,
+      {} as Room,
+      controller.signal,
+      vi.fn(),
+    );
+    const rejected = expect(pending).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+    controller.abort();
+    finish({});
+    await rejected;
+    expect(sdk.view).not.toHaveBeenCalled();
+    expect(sdk.attach).not.toHaveBeenCalled();
+  });
+});

package/templates/cloudflare-livekit/tests/web/components.test.tsx

@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ReceivedMessage } from '@livekit/components-react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { AgentChatInput } from '../../web/components/agents-ui/agent-chat-input.js';
+import {
+  AgentChatTranscript,
+  snapshotMessages,
+} from '../../web/components/agents-ui/agent-chat-transcript.js';
+import { AgentTrackToggle } from '../../web/components/agents-ui/agent-track-toggle.js';
+afterEach(cleanup);
+describe('upstream UI adaptations', () => {
+  it('keeps failed draft, submits once, and clears only on success', async () => {
+    const onSend = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('send failed'))
+      .mockResolvedValue(undefined);
+    render(<AgentChatInput onSend={onSend} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '  hello  ' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    await screen.findByRole('alert');
+    expect((input as HTMLTextAreaElement).value).toBe('  hello  ');
+    fireEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    await waitFor(() => expect((input as HTMLTextAreaElement).value).toBe(''));
+    expect(onSend).toHaveBeenNthCalledWith(1, 'hello');
+    expect(onSend).toHaveBeenCalledTimes(2);
+  });
+  it('does not send during IME composition, Shift+Enter, or whitespace input', () => {
+    const send = vi.fn();
+    render(<AgentChatInput onSend={send} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '你好' } });
+    fireEvent.keyDown(input, { key: 'Enter', isComposing: true });
+    fireEvent.keyDown(input, { key: 'Enter', shiftKey: true });
+    expect(send).not.toHaveBeenCalled();
+    fireEvent.change(input, { target: { value: '   ' } });
+    expect(
+      screen
+        .getByRole('button', { name: 'Send message' })
+        .hasAttribute('disabled'),
+    ).toBe(true);
+  });
+  it('updates streaming content by stable ID and renders untrusted text as text', () => {
+    const messages = [
+      { id: 'same', timestamp: 0, message: 'A partial', isUser: false },
+    ];
+    const { rerender } = render(<AgentChatTranscript messages={messages} />);
+    rerender(
+      <AgentChatTranscript
+        messages={[
+          { ...messages[0], message: '<img src=x onerror=alert(1)> complete' },
+        ]}
+      />,
+    );
+    expect(screen.queryByText('A partial')).toBeNull();
+    expect(screen.getAllByRole('article')).toHaveLength(1);
+    expect(document.querySelector('img')).toBeNull();
+  });
+  it('preserves repeated utterances with different stream IDs', () => {
+    const messages = snapshotMessages([
+      { id: 'one', type: 'agentTranscript', timestamp: 0, message: 'Yes' },
+      { id: 'two', type: 'agentTranscript', timestamp: 1, message: 'Yes' },
+    ]);
+    expect(messages).toHaveLength(2);
+  });
+  it('distinguishes the user, voice agent, and avatar relay without displaying service chat', () => {
+    const from = (identity: string, attributes = {}, isLocal = false) =>
+      ({ identity, attributes, isLocal }) as NonNullable<
+        ReceivedMessage['from']
+      >;
+    const messages: ReceivedMessage[] = [
+      {
+        id: 'user',
+        type: 'userTranscript',
+        timestamp: 0,
+        message: 'Hello',
+        from: from('me', {}, true),
+      },
+      {
+        id: 'agent',
+        type: 'agentTranscript',
+        timestamp: 1,
+        message: 'Hi',
+        from: from('python'),
+      },
+      {
+        id: 'avatar',
+        type: 'agentTranscript',
+        timestamp: 2,
+        message: 'Spoken reply',
+        from: from('renderer', { 'lk.publish_on_behalf': 'python' }),
+      },
+      {
+        id: 'service',
+        type: 'chatMessage',
+        timestamp: 3,
+        message: 'Service event',
+        from: from('renderer'),
+      },
+      {
+        id: 'other',
+        type: 'agentTranscript',
+        timestamp: 4,
+        message: 'Unrelated',
+        from: from('other'),
+      },
+    ];
+    const participants = {
+      agentIdentity: 'python',
+      avatarIdentity: 'renderer',
+    };
+    const snapshot = snapshotMessages(messages, participants);
+    expect(snapshot.map(({ source }) => source)).toEqual([
+      'user',
+      'agent',
+      'avatar',
+    ]);
+    expect(snapshot.map(({ senderIdentity }) => senderIdentity)).toEqual([
+      'me',
+      'python',
+      'renderer',
+    ]);
+    const final = snapshotMessages(
+      [
+        {
+          id: 'avatar',
+          type: 'agentTranscript',
+          timestamp: 2,
+          message: 'Spoken',
+        },
+      ],
+      participants,
+      snapshot,
+    );
+    expect(final).toEqual([{ ...snapshot[2], message: 'Spoken' }]);
+  });
+  it('exposes a controlled accessible microphone toggle', () => {
+    const change = vi.fn();
+    render(<AgentTrackToggle pressed={false} onPressedChange={change} />);
+    const button = screen.getByRole('button', { name: 'Enable microphone' });
+    fireEvent.click(button);
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    expect(change).toHaveBeenCalledWith(true);
+  });
+});

package/templates/cloudflare-livekit/tests/web/conversation.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { StrictMode } from 'react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { Room } from 'livekit-client';
+import type { PreparedSession } from '../../web/session-attempt.js';
+import { Conversation } from '../../web/components/conversation.js';
+
+// Keep the real device hook: its observable resets state when onError changes.
+vi.mock('@livekit/components-react', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@livekit/components-react')>()),
+  SessionProvider: ({ children }: { children: React.ReactNode }) => children,
+  RoomAudioRenderer: () => null,
+  useSessionContext: () => ({ end: vi.fn() }),
+  useSession: () => ({
+    start: () => new Promise(() => {}),
+    isConnected: false,
+  }),
+  useAgent: () => ({ internal: {}, state: 'connecting' }),
+  useSessionMessages: () => ({ messages: [], isSending: false }),
+  useLocalParticipant: () => ({ isMicrophoneEnabled: false }),
+  useMultibandTrackVolume: () => [],
+  useStartAudio: () => ({ mergedProps: {} }),
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+it('keeps the real LiveKit device subscription stable across renders', async () => {
+  vi.stubGlobal('isSecureContext', true);
+  const enumerateDevices = vi
+    .fn()
+    .mockResolvedValue([
+      { kind: 'audioinput', deviceId: 'default', label: 'Test microphone' },
+    ]);
+  vi.stubGlobal('navigator', {
+    mediaDevices: {
+      enumerateDevices,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    },
+  });
+  const errors = vi.spyOn(console, 'error').mockImplementation((message) => {
+    // Fail promptly instead of letting an effect loop hang the test runner.
+    if (String(message).includes('Maximum update depth'))
+      throw new Error('Device selector entered a render loop');
+  });
+  const room = new Room();
+  const prepared = {
+    attempt: { room, abort: new AbortController() },
+    tokenSource: {},
+  } as PreparedSession;
+  const view = () => (
+    <StrictMode>
+      <Conversation prepared={prepared} onEnd={() => {}} />
+    </StrictMode>
+  );
+  const { rerender } = render(view());
+  await waitFor(() =>
+    expect(
+      screen.getByRole('option', { name: 'Test microphone' }),
+    ).toBeTruthy(),
+  );
+  const initialCalls = enumerateDevices.mock.calls.length;
+  rerender(view());
+  await waitFor(() =>
+    expect(
+      screen.getByRole('option', { name: 'Test microphone' }),
+    ).toBeTruthy(),
+  );
+  expect(enumerateDevices).toHaveBeenCalledTimes(initialCalls);
+  expect(errors).not.toHaveBeenCalled();
+});

package/templates/cloudflare-livekit/tests/web/session-attempt.test.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { Room } from 'livekit-client';
+import {
+  SessionAttempt,
+  type AttemptDependencies,
+} from '../../web/session-attempt.js';
+import type { VoiceSession } from '../../web/api.js';
+
+const credentials: VoiceSession = {
+  server_url: 'wss://example.invalid',
+  participant_token: 'one-attempt',
+  room_name: 'room-one',
+  spatius_app_id: 'app',
+  spatius_avatar_id: 'avatar',
+};
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+function setup(overrides: Partial<AttemptDependencies> = {}) {
+  const stop = vi.fn();
+  const microphone = vi.fn().mockResolvedValue({ track: { stop } });
+  const disconnect = vi.fn().mockResolvedValue(undefined);
+  const prepareConnection = vi.fn().mockResolvedValue(undefined);
+  const room = {
+    disconnect,
+    prepareConnection,
+    localParticipant: { setMicrophoneEnabled: microphone },
+  } as unknown as Room;
+  const dispose = vi.fn().mockResolvedValue(undefined);
+  const deps: AttemptDependencies = {
+    createRoom: () => room,
+    request: vi.fn().mockResolvedValue(credentials),
+    attach: vi.fn().mockResolvedValue({ dispose }),
+    ...overrides,
+  };
+  return {
+    attempt: new SessionAttempt(deps),
+    deps,
+    room,
+    dispose,
+    disconnect,
+    prepareConnection,
+    microphone,
+    stop,
+  };
+}
+const container = {} as HTMLElement;
+describe('per-attempt lifecycle', () => {
+  it('has no bootstrap side effects until prepare, and literal fetch never repeats the POST', async () => {
+    const { attempt, deps, room, prepareConnection } = setup();
+    expect(deps.request).not.toHaveBeenCalled();
+    expect(prepareConnection).not.toHaveBeenCalled();
+    const prepared = await attempt.prepare(container, vi.fn());
+    expect(deps.attach).toHaveBeenCalledWith(
+      container,
+      credentials,
+      room,
+      attempt.abort.signal,
+      expect.any(Function),
+    );
+    await prepared.tokenSource.fetch();
+    await prepared.tokenSource.fetch();
+    expect(deps.request).toHaveBeenCalledTimes(1);
+    expect(prepareConnection).toHaveBeenCalledExactlyOnceWith(
+      credentials.server_url,
+      credentials.participant_token,
+    );
+    await attempt.dispose();
+  });
+  it('aborts the request and never attaches when a cancelled request resolves late', async () => {
+    const request = deferred<VoiceSession>();
+    const { attempt, deps, prepareConnection } = setup({
+      request: () => request.promise,
+    });
+    const pending = attempt.prepare(container, vi.fn());
+    const rejected = expect(pending).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+    await attempt.dispose();
+    request.resolve(credentials);
+    await rejected;
+    expect(deps.attach).not.toHaveBeenCalled();
+    expect(prepareConnection).not.toHaveBeenCalled();
+    expect(attempt.abort.signal.aborted).toBe(true);
+  });
+  it('loads the avatar without waiting for connection warmup', async () => {
+    const { attempt, prepareConnection, deps } = setup();
+    const warmup = deferred<void>();
+    prepareConnection.mockReturnValue(warmup.promise);
+    await attempt.prepare(container, vi.fn());
+    expect(deps.attach).toHaveBeenCalledOnce();
+    await attempt.dispose();
+    // Late warmup completion cannot join the room or restart a cancelled attempt.
+    warmup.resolve();
+    expect(attempt.abort.signal.aborted).toBe(true);
+  });
+  it('continues startup if optional connection warmup fails', async () => {
+    const { attempt, prepareConnection, deps } = setup();
+    prepareConnection.mockRejectedValue(new Error('offline'));
+    await attempt.prepare(container, vi.fn());
+    expect(deps.attach).toHaveBeenCalledOnce();
+    await attempt.dispose();
+  });
+  it('cleans an avatar that becomes ready after cancellation and disposes the room once', async () => {
+    const attach = deferred<{ dispose: () => Promise<void> }>();
+    const { attempt, disconnect } = setup({ attach: () => attach.promise });
+    const pending = attempt.prepare(container, vi.fn());
+    const rejected = expect(pending).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+    await Promise.resolve();
+    await attempt.dispose();
+    await attempt.dispose();
+    const dispose = vi.fn().mockResolvedValue(undefined);
+    attach.resolve({ dispose });
+    await rejected;
+    expect(dispose).toHaveBeenCalledOnce();
+    expect(disconnect).toHaveBeenCalledExactlyOnceWith(true);
+  });
+  it('continues room cleanup if avatar disposal rejects', async () => {
+    const { attempt, dispose, disconnect } = setup();
+    await attempt.prepare(container, vi.fn());
+    dispose.mockRejectedValueOnce(new Error('renderer already gone'));
+    await expect(attempt.dispose()).resolves.toBeUndefined();
+    expect(disconnect).toHaveBeenCalledExactlyOnceWith(true);
+  });
+  it('stops a microphone track returned after the user ended the call', async () => {
+    const { attempt, microphone, stop } = setup();
+    const publication = deferred<{ track: { stop: () => void } }>();
+    microphone.mockReturnValueOnce(publication.promise);
+    const pending = attempt.setMicrophone(true);
+    const rejected = expect(pending).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+    await attempt.dispose();
+    publication.resolve({ track: { stop } });
+    await rejected;
+    expect(stop).toHaveBeenCalledOnce();
+    expect(microphone).toHaveBeenLastCalledWith(false);
+  });
+  it('uses fresh credentials and a fresh room for retry', async () => {
+    const first = setup();
+    await first.attempt.prepare(container, vi.fn());
+    await first.attempt.dispose();
+    const second = setup({
+      request: vi
+        .fn()
+        .mockResolvedValue({ ...credentials, participant_token: 'new-token' }),
+    });
+    const prepared = await second.attempt.prepare(container, vi.fn());
+    expect(second.room).not.toBe(first.room);
+    expect(await prepared.tokenSource.fetch()).toMatchObject({
+      participantToken: 'new-token',
+    });
+    await second.attempt.dispose();
+  });
+  it('stops the replacement microphone when device switching resolves after End', async () => {
+    const { attempt, room, disconnect } = setup();
+    const stop = vi.fn();
+    room.localParticipant.getTrackPublication = vi
+      .fn()
+      .mockReturnValue({ track: { stop } });
+    const switching = deferred<void>();
+    const pending = attempt.switchMicrophoneDevice(() => switching.promise);
+    const rejected = expect(pending).rejects.toMatchObject({
+      name: 'AbortError',
+    });
+    await attempt.dispose();
+    switching.resolve();
+    await rejected;
+    expect(stop).toHaveBeenCalledOnce();
+    expect(disconnect).toHaveBeenCalledTimes(2);
+  });
+});

package/templates/cloudflare-livekit/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": { "paths": { "@/*": ["./web/*"] } },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.web.json" },
+    { "path": "./tsconfig.worker.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/cloudflare-livekit/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "playwright.config.ts",
+    "tests/e2e/vite.config.ts"
+  ]
+}

package/templates/cloudflare-livekit/tsconfig.web.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "paths": { "@/*": ["./web/*"] },
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.web.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["web", "tests/web", "tests/e2e/**/*.ts", "tests/e2e/**/*.tsx"],
+  "exclude": ["tests/e2e/vite.config.ts"]
+}

package/templates/cloudflare-livekit/tsconfig.worker.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023", "WebWorker"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["./worker-configuration.d.ts"],
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["worker", "worker-configuration.d.ts"]
+}

package/templates/cloudflare-livekit/vite.config.ts

@@ -0,0 +1,49 @@
+import { cloudflare } from '@cloudflare/vite-plugin';
+import { avatarkitVitePlugin } from '@spatius/avatarkit/vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { cpSync, existsSync, mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+
+const outputDirectory = resolve(import.meta.dirname, 'dist');
+const avatarkit = avatarkitVitePlugin();
+avatarkit.applyToEnvironment = (environment) => environment.name === 'client';
+
+export default defineConfig({
+  resolve: { alias: { '@': resolve(import.meta.dirname, 'web') } },
+  build: {
+    // AvatarKit includes its renderer and WebAssembly glue in a deliberate,
+    // lazy-loaded chunk. It is expected to be larger than a typical UI chunk.
+    chunkSizeWarningLimit: 3200,
+  },
+  plugins: [
+    react(),
+    tailwindcss(),
+    {
+      name: 'prepare-avatarkit-output',
+      applyToEnvironment: (environment) => environment.name === 'client',
+      buildStart() {
+        mkdirSync(resolve(outputDirectory, 'assets'), { recursive: true });
+      },
+    },
+    avatarkit,
+    {
+      name: 'relocate-avatarkit-output',
+      applyToEnvironment: (environment) => environment.name === 'client',
+      closeBundle() {
+        const generatedAssets = resolve(outputDirectory, 'assets');
+        const clientAssets = resolve(outputDirectory, 'client/assets');
+        const generatedHeaders = resolve(outputDirectory, '_headers');
+
+        mkdirSync(clientAssets, { recursive: true });
+        cpSync(generatedAssets, clientAssets, { recursive: true });
+
+        if (existsSync(generatedHeaders)) {
+          cpSync(generatedHeaders, resolve(outputDirectory, 'client/_headers'));
+        }
+      },
+    },
+    cloudflare(),
+  ],
+});

package/templates/cloudflare-livekit/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  resolve: { alias: { '@': resolve(import.meta.dirname, 'web') } },
+  test: {
+    environment: 'node',
+    include: ['worker/**/*.test.ts', 'tests/web/**/*.test.{ts,tsx}'],
+    exclude: ['tests/e2e/**', 'node_modules/**'],
+  },
+});