create-spatius-app 0.1.0-beta.0

package/templates/cloudflare-livekit/tests/dev-supervision.test.mjs

@@ -0,0 +1,203 @@
+import assert from 'node:assert/strict';
+import { spawn } from 'node:child_process';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { delimiter, dirname, join } from 'node:path';
+import process from 'node:process';
+import test from 'node:test';
+import { pathToFileURL } from 'node:url';
+import { setTimeout as delay } from 'node:timers/promises';
+import { commandSpec } from '../scripts/command.mjs';
+import {
+  assertNoCredentials,
+  assertStopped,
+  fixture,
+  templateDirectory,
+  readEvents,
+  waitForEvents,
+  windows,
+} from './dev-fixtures.mjs';
+
+// Resolves in generated projects and in the root CI installation. A missing
+// dependency fails this suite rather than silently skipping supervision tests.
+const require = createRequire(import.meta.url);
+const concurrentlyPackage = require.resolve('concurrently/package.json');
+const concurrentlyBin = join(
+  dirname(concurrentlyPackage),
+  require(concurrentlyPackage).bin.concurrently,
+);
+
+async function supervise(f, extraEnv) {
+  const viteBin = join(f.root, 'node_modules', 'vite', 'bin');
+  await mkdir(viteBin, { recursive: true });
+  await writeFile(
+    join(viteBin, 'vite.js'),
+    `process.argv = [process.argv[0], ${JSON.stringify(f.runtime)}, 'web']; await import(${JSON.stringify(pathToFileURL(f.runtime).href)});`,
+  );
+  const sourcePackage = JSON.parse(
+    await readFile(join(templateDirectory, 'package.json'), 'utf8'),
+  );
+  // Exercise the production script composition with npm, available alongside
+  // Node in both generated projects and root CI. Only PM selection changes.
+  const scripts = Object.fromEntries(
+    ['dev', 'dev:web', 'agent:dev'].map((name) => [
+      name,
+      sourcePackage.scripts[name].replaceAll('pnpm run ', 'npm run '),
+    ]),
+  );
+  await writeFile(
+    join(f.root, 'package.json'),
+    JSON.stringify({
+      name: 'dev-supervision-fixture',
+      private: true,
+      type: 'module',
+      scripts,
+    }),
+  );
+  const localBin = join(f.root, 'node_modules', '.bin');
+  await mkdir(localBin, { recursive: true });
+  await writeFile(
+    join(localBin, windows ? 'concurrently.cmd' : 'concurrently'),
+    windows
+      ? `@echo off\r\n"${process.execPath}" "${concurrentlyBin}" %*\r\n`
+      : `#!/bin/sh\nexec '${process.execPath.replaceAll("'", "'\\''")}' '${concurrentlyBin.replaceAll("'", "'\\''")}' "$@"\n`,
+    { mode: 0o755 },
+  );
+  await writeFile(
+    join(localBin, windows ? 'vite.cmd' : 'vite'),
+    windows
+      ? `@echo off\r\n"${process.execPath}" "${join(viteBin, 'vite.js')}" %*\r\n`
+      : `#!/bin/sh\nexec '${process.execPath.replaceAll("'", "'\\''")}' '${join(viteBin, 'vite.js').replaceAll("'", "'\\''")}' "$@"\n`,
+    { mode: 0o755 },
+  );
+  const env = { ...f.env, ...extraEnv };
+  env.PATH += `${delimiter}${process.env.PATH ?? process.env.Path ?? ''}`;
+  const spec = commandSpec('npm', ['run', 'dev'], env);
+  const child = spawn(spec.command, spec.arguments_, {
+    cwd: f.root,
+    env,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    detached: !windows,
+    windowsVerbatimArguments: spec.windowsVerbatimArguments,
+  });
+  f.children.push(child);
+  let output = '';
+  child.stdout.on('data', (chunk) => {
+    output += chunk;
+  });
+  child.stderr.on('data', (chunk) => {
+    output += chunk;
+  });
+  const done = new Promise((resolve, reject) => {
+    child.once('error', reject);
+    child.once('close', (code, signal) => resolve({ code, signal, output }));
+  });
+  return { child, done };
+}
+
+for (const [name, side, code] of [
+  ['web exits zero', 'web', '0'],
+  ['web fails', 'web', '7'],
+  ['agent exits zero', 'agent', '0'],
+  ['agent fails', 'agent', '29'],
+]) {
+  test(
+    `real concurrently: ${name} stops its sibling and all grandchildren`,
+    { timeout: 15000 },
+    async (t) => {
+      const f = await fixture(t);
+      const run = await supervise(f, {
+        DEV_TEST_RUNTIME_HOLD: '1',
+        DEV_TEST_GRANDCHILD: '1',
+        ...(side === 'web'
+          ? { DEV_TEST_WEB_EXIT: code }
+          : { DEV_TEST_EXIT_WHEN_RELEASED: '1', DEV_TEST_RUNTIME_EXIT: code }),
+      });
+      const events = await waitForEvents(
+        f.events,
+        (events) =>
+          events.filter(
+            ({ role, type }) => role === 'grandchild' && type === 'ready',
+          ).length === 2,
+      );
+      await delay(250);
+      await writeFile(f.env.DEV_TEST_RELEASE, 'exit');
+      const result = await run.done;
+      assert.notEqual(result.code, null, result.output);
+      if (code !== '0') assert.notEqual(result.code, 0, result.output);
+      assert.match(result.output, /SIGTERM/);
+      assertNoCredentials(result.output);
+      await assertStopped(events.map(({ pid }) => pid));
+      assert.equal(
+        (await readEvents(f.events)).filter(
+          ({ role, args, type }) =>
+            role === 'lk' &&
+            type === 'invoked' &&
+            args.at(-1) === 'src/agent.py',
+        ).length,
+        1,
+      );
+    },
+  );
+}
+
+test(
+  'real concurrently: Ctrl+C stops both services and their grandchildren',
+  {
+    timeout: 15000,
+    skip:
+      windows &&
+      'Node cannot send console Ctrl+C events on Windows; taskkill tree cleanup is tested separately.',
+  },
+  async (t) => {
+    const f = await fixture(t);
+    const run = await supervise(f, {
+      DEV_TEST_RUNTIME_HOLD: '1',
+      DEV_TEST_GRANDCHILD: '1',
+      DEV_TEST_DETACHED: '1',
+    });
+    const events = await waitForEvents(
+      f.events,
+      (events) =>
+        events.filter(
+          ({ role, type }) => role === 'grandchild' && type === 'ready',
+        ).length === 2,
+    );
+    await delay(250);
+    // A terminal Ctrl+C targets the foreground group, including npm's shells.
+    process.kill(-run.child.pid, 'SIGINT');
+    const result = await run.done;
+    // npm can re-raise SIGINT (Linux) or return an exit code (macOS). Both
+    // represent a completed Ctrl+C; the essential contract is full cleanup.
+    assert.ok(
+      result.signal === 'SIGINT' || result.code !== null,
+      result.output,
+    );
+    assertNoCredentials(result.output);
+    await assertStopped(events.map(({ pid }) => pid));
+  },
+);
+
+test(
+  'a timed-out CLI probe reaps its descendants before Python fallback, including Windows cmd wrappers',
+  { timeout: 15000 },
+  async (t) => {
+    const f = await fixture(t, { uv: true });
+    const run = f.start('dev-agent.mjs', {
+      DEV_TEST_PROBE: 'version-hang',
+      DEV_TEST_PROBE_GRANDCHILD: '1',
+      DEV_TEST_DETACHED: '1',
+    });
+    const events = await waitForEvents(f.events, (events) =>
+      events.some(
+        ({ role, type }) => role === 'grandchild' && type === 'ready',
+      ),
+    );
+    const result = await run.done;
+    assert.equal(result.code, 0, result.output);
+    await assertStopped(events.map(({ pid }) => pid));
+    const after = await readEvents(f.events);
+    assert.equal(after.filter(({ role }) => role === 'uv').length, 1);
+    assertNoCredentials(result.output);
+  },
+);

package/templates/cloudflare-livekit/tests/e2e/conversation.spec.ts

@@ -0,0 +1,376 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.route('**/*', async (route) => {
+    const url = new URL(route.request().url());
+    if (url.hostname !== '127.0.0.1') {
+      await route.abort();
+      return;
+    }
+    if (url.pathname === '/api/session') {
+      await route.fulfill({
+        json: {
+          server_url: 'wss://example.invalid',
+          participant_token: 'fixture-token',
+          room_name: 'fixture-room',
+          spatius_app_id: 'fixture-app',
+          spatius_avatar_id: 'fixture-avatar',
+        },
+      });
+      return;
+    }
+    await route.continue();
+  });
+  await page.goto('/tests/e2e/harness.html');
+});
+
+test('minimal workspace exposes microphone activity, readable devices, and transcript', async ({
+  page,
+}, testInfo) => {
+  await expect(
+    page.getByRole('heading', { name: 'Voice assistant' }),
+  ).toBeVisible();
+  const transcript = page.getByRole('complementary', { name: 'Transcript' });
+  await expect(transcript).toBeVisible();
+  await page.screenshot({
+    path: testInfo.outputPath('idle.png'),
+    fullPage: true,
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  const meter = page.getByRole('group', { name: 'Your microphone activity' });
+  await expect(meter).toBeVisible();
+  await expect(meter.locator('.audio-bars')).toHaveAttribute(
+    'data-enabled',
+    'true',
+  );
+  await expect(page.getByLabel('Microphone device')).toBeVisible();
+  const avatarBox = await page.getByLabel('Avatar stage').boundingBox();
+  const transcriptBox = await transcript.boundingBox();
+  expect(avatarBox).not.toBeNull();
+  expect(transcriptBox).not.toBeNull();
+  if (testInfo.project.name === 'desktop') {
+    expect(transcriptBox!.x).toBeGreaterThanOrEqual(
+      avatarBox!.x + avatarBox!.width,
+    );
+  } else {
+    expect(transcriptBox!.y).toBeGreaterThanOrEqual(
+      avatarBox!.y + avatarBox!.height,
+    );
+  }
+  await page.screenshot({
+    path: testInfo.outputPath('connected.png'),
+    fullPage: true,
+  });
+  await page.getByRole('button', { name: 'Mute microphone' }).click();
+  await expect(meter).toContainText('Microphone off');
+  await expect(meter.locator('.audio-bars')).toHaveAttribute(
+    'data-enabled',
+    'false',
+  );
+  await page.getByRole('textbox', { name: 'Message your agent' }).fill('Hello');
+  await page.getByRole('button', { name: 'Send message' }).click();
+  await expect(page.getByRole('log')).toContainText('I hear you.');
+  await page.screenshot({
+    path: testInfo.outputPath('transcript.png'),
+    fullPage: true,
+  });
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth > window.innerWidth,
+    ),
+  ).toBe(false);
+});
+
+test('explicit Start, attach ordering, one audio renderer, typed chat and full post-call transcript', async ({
+  page,
+}) => {
+  let posts = 0;
+  page.on('request', (request) => {
+    if (request.url().endsWith('/api/session')) posts++;
+  });
+  expect(await page.evaluate(() => window.__fixture.events)).toEqual([]);
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  expect(posts).toBe(1);
+  const events = await page.evaluate(() => window.__fixture.events);
+  expect(events).toContain('room:false');
+  expect(events.indexOf('avatar:attach')).toBeLessThan(
+    events.indexOf('room:connect'),
+  );
+  expect(events.filter((event) => event === 'room:connect')).toHaveLength(1);
+  await expect(page.getByTestId('remote-audio-renderer')).toHaveCount(1);
+  await page
+    .getByRole('textbox', { name: 'Message your agent' })
+    .fill('Hello there');
+  await page.getByRole('button', { name: 'Send message' }).click();
+  await expect(page.getByRole('log')).toContainText('Hello there');
+  await expect(page.getByRole('log')).toContainText('I hear you.');
+  await expect(page.getByText('Hello there', { exact: true })).toHaveCount(1);
+  await expect(page.getByLabel('Live captions')).toHaveCount(0);
+  await page.getByRole('button', { name: 'End conversation' }).click();
+  await expect(
+    page.getByRole('heading', { name: 'Conversation ended' }),
+  ).toBeVisible();
+  await expect(page.getByTestId('remote-audio-renderer')).toHaveCount(0);
+  await expect(page.getByRole('log')).toContainText('Hello there');
+  expect(posts).toBe(1);
+});
+
+test('mic denial retains typed chat, device selection, and audio unlock', async ({
+  page,
+}) => {
+  await page.evaluate(() => {
+    window.__fixture.failMicrophone = true;
+    window.__fixture.blockedAudio = true;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(page.getByRole('alert')).toContainText('continue by typing');
+  await page.getByRole('button', { name: 'Enable sound' }).click();
+  await expect(page.getByRole('button', { name: 'Enable sound' })).toBeHidden();
+  await page.getByRole('textbox').fill('Text still works');
+  await page.getByRole('button', { name: 'Send message' }).click();
+  await expect(page.getByRole('log')).toContainText('Text still works');
+  await page.evaluate(() => {
+    window.__fixture.failMicrophone = false;
+  });
+  await page.getByRole('button', { name: 'Enable microphone' }).click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await page.getByLabel('Microphone device').selectOption('headset');
+  expect(await page.evaluate(() => window.__fixture.events)).toContain(
+    'device:headset',
+  );
+});
+
+test('streamed updates replace transcript by ID and the panel stays open with keyboard input', async ({
+  page,
+}) => {
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await page.evaluate(() => {
+    window.__fixture.messages = [
+      { id: 'speech', timestamp: 0, message: 'Partial', isUser: false },
+    ];
+    window.dispatchEvent(new Event('fixture:update'));
+  });
+  await expect(page.getByRole('log')).toContainText('Partial');
+  await page.evaluate(() => {
+    window.__fixture.messages = [
+      {
+        id: 'speech',
+        timestamp: 0,
+        message: 'Completed speech',
+        isUser: false,
+      },
+    ];
+    window.dispatchEvent(new Event('fixture:update'));
+  });
+  await expect(page.getByRole('log')).toContainText('Completed speech');
+  await expect(page.getByRole('article')).toHaveCount(1);
+  await page.getByRole('textbox').focus();
+  await page.keyboard.press('Escape');
+  await expect(
+    page.getByRole('complementary', { name: 'Transcript' }),
+  ).toBeVisible();
+  await expect(page.getByRole('textbox')).toBeFocused();
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth > window.innerWidth,
+    ),
+  ).toBe(false);
+});
+
+test('reconnecting keeps the attempt and the final message survives disconnection in the same turn', async ({
+  page,
+}) => {
+  let posts = 0;
+  page.on('request', (request) => {
+    if (request.url().endsWith('/api/session')) posts++;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await page.evaluate(() =>
+    window.dispatchEvent(new Event('fixture:reconnecting')),
+  );
+  await expect(page.getByRole('status')).toContainText('Reconnecting');
+  await expect(page.getByTestId('remote-audio-renderer')).toHaveCount(1);
+  expect(posts).toBe(1);
+  await page.evaluate(() =>
+    window.dispatchEvent(new Event('fixture:reconnected')),
+  );
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await page.evaluate(() => {
+    window.__fixture.messages = [
+      {
+        id: 'farewell',
+        timestamp: 0,
+        message: 'The final reply',
+        isUser: false,
+      },
+    ];
+    window.dispatchEvent(new Event('fixture:update'));
+    window.dispatchEvent(new Event('fixture:disconnect'));
+  });
+  await expect(page.getByRole('button', { name: 'Try again' })).toBeVisible();
+  await expect(page.getByRole('log')).toContainText('The final reply');
+  expect(posts).toBe(1);
+});
+
+test('agent join timeout aborts the attempt and exposes an explicit retry', async ({
+  page,
+}) => {
+  await page.clock.install();
+  await page.evaluate(() => {
+    window.__fixture.stallConnect = true;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('heading', { name: 'Connecting to the room' }),
+  ).toBeVisible();
+  await page.clock.fastForward(33_000);
+  await expect(page.getByRole('alert')).toContainText(
+    'agent did not join in time',
+  );
+  await expect(page.getByRole('button', { name: 'Try again' })).toBeVisible();
+  expect(await page.evaluate(() => window.__fixture.events)).toContain(
+    'avatar:detach',
+  );
+});
+
+test('cancel a pending bootstrap and ignore its late response', async ({
+  page,
+}) => {
+  let release!: () => void;
+  const gate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  await page.route('**/api/session', async (route) => {
+    await gate;
+    await route
+      .fulfill({
+        json: {
+          server_url: 'wss://example.invalid',
+          participant_token: 'late',
+          room_name: 'late',
+          spatius_app_id: 'app',
+          spatius_avatar_id: 'avatar',
+        },
+      })
+      .catch(() => undefined);
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await page.getByRole('button', { name: 'Cancel' }).click();
+  release();
+  await expect(
+    page.getByRole('button', { name: 'Start conversation', exact: true }),
+  ).toBeVisible();
+  expect(await page.evaluate(() => window.__fixture.events)).not.toContain(
+    'room:connect',
+  );
+});
+
+test('no credentials refetch on end; explicit retry creates another attempt', async ({
+  page,
+}) => {
+  let posts = 0;
+  page.on('request', (request) => {
+    if (request.url().endsWith('/api/session')) posts++;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await page.evaluate(() =>
+    window.dispatchEvent(new Event('fixture:disconnect')),
+  );
+  await expect(page.getByRole('alert')).toContainText('connection ended');
+  expect(posts).toBe(1);
+  await page.getByRole('button', { name: 'Try again' }).click();
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  expect(posts).toBe(2);
+});
+
+test('room connection waits for agent readiness without publishing a microphone', async ({
+  page,
+}, testInfo) => {
+  await page.evaluate(() => {
+    window.__fixture.pendingAgent = true;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('heading', { name: 'Waiting for your agent' }),
+  ).toBeVisible();
+  await expect(page.getByRole('textbox')).toBeDisabled();
+  expect(await page.evaluate(() => window.__fixture.events)).not.toContain(
+    'microphone:true',
+  );
+  await page.screenshot({
+    path: testInfo.outputPath('waiting.png'),
+    fullPage: true,
+  });
+  await page.evaluate(() => {
+    window.__fixture.pendingAgent = false;
+    window.dispatchEvent(new Event('fixture:update'));
+  });
+  await expect(
+    page.getByRole('button', { name: 'Mute microphone' }),
+  ).toBeEnabled();
+  await expect(
+    page.getByRole('heading', { name: 'Waiting for your agent' }),
+  ).toHaveCount(0);
+  await expect(page.getByRole('textbox')).toBeEnabled();
+});
+
+test('an agent that never initializes times out even after the room connects', async ({
+  page,
+}) => {
+  await page.clock.install();
+  await page.evaluate(() => {
+    window.__fixture.pendingAgent = true;
+  });
+  await page
+    .getByRole('button', { name: 'Start conversation', exact: true })
+    .click();
+  await expect(
+    page.getByRole('heading', { name: 'Waiting for your agent' }),
+  ).toBeVisible();
+  await page.clock.fastForward(33_000);
+  await expect(page.getByRole('alert')).toContainText(
+    'agent did not join in time',
+  );
+  expect(await page.evaluate(() => window.__fixture.events)).toContain(
+    'avatar:detach',
+  );
+});

package/templates/cloudflare-livekit/tests/e2e/fake-avatar.ts

@@ -0,0 +1,24 @@
+export async function attachAvatarSession(
+  container: HTMLElement,
+  _credentials: unknown,
+  _room: unknown,
+  signal: AbortSignal,
+) {
+  signal.throwIfAborted();
+  window.__fixture.events.push('avatar:attach');
+  const figure = document.createElement('div');
+  figure.className = 'fixture-avatar';
+  figure.setAttribute('aria-label', 'Test avatar renderer');
+  // Neutral geometry exercises the real stage's layout without a persona asset.
+  figure.style.cssText =
+    'position:absolute;inset:14% 25% 0;border-radius:48% 48% 0 0;background:linear-gradient(160deg,#c9c9b9,#83988a);box-shadow:0 0 80px #354b3a30';
+  container.append(figure);
+  await Promise.resolve();
+  return {
+    dispose: async () => {
+      window.__fixture.events.push('avatar:detach');
+      figure.remove();
+      await Promise.resolve();
+    },
+  };
+}