experimental-a2 0.19.0 → 0.20.0

package/examples/playground/app/a0/shell.tsx

@@ -106,7 +106,7 @@ export function A0Shell({
   const remove = async (target: App): Promise<void> => {
     if (
       !confirm(
-        `Delete ${target.name}? This deletes its sandbox, with everything the agent built in it.`,
+        `Delete ${target.name}? This deletes its conversation and its sandbox, with everything the agent built in it.`,
       )
     )
       return

package/examples/playground/app/a0/uploads/route.test.ts

@@ -0,0 +1,59 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { POST } from './route'
+
+const appId = crypto.randomUUID()
+
+beforeEach(() => {
+  vi.stubEnv('BLOB_READ_WRITE_TOKEN', 'vercel_blob_rw_teststore_secret')
+})
+
+afterEach(() => {
+  vi.unstubAllEnvs()
+  vi.restoreAllMocks()
+})
+
+/** What the browser's `upload()` asks its `handleUploadUrl` for first. */
+const tokenRequest = (pathname: string, clientPayload: string | null) =>
+  POST(
+    new Request('http://test/a0/uploads', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        type: 'blob.generate-client-token',
+        payload: { pathname, clientPayload, multipart: false },
+      }),
+    }),
+  )
+
+/** The upload a client token allows, as Blob reads it from the token. */
+const allowed = (clientToken: string): unknown => {
+  const [, encoded] = /^vercel_blob_client_teststore_(.+)$/.exec(clientToken)!
+  const signed = Buffer.from(encoded!, 'base64').toString()
+  const payload = signed.slice(signed.indexOf('.') + 1)
+  return JSON.parse(Buffer.from(payload, 'base64').toString())
+}
+
+it("signs an upload into the app's own folder, without a request of its own", async () => {
+  const fetch = vi.spyOn(globalThis, 'fetch')
+  const response = await tokenRequest(`a0/${appId}/shot.png`, appId)
+  expect(response.status).toBe(200)
+  const body = (await response.json()) as { type: string; clientToken: string }
+  expect(body.type).toBe('blob.generate-client-token')
+  expect(allowed(body.clientToken)).toMatchObject({
+    pathname: `a0/${appId}/shot.png`,
+    addRandomSuffix: true,
+  })
+  expect(fetch).not.toHaveBeenCalled()
+})
+
+it.each([
+  ['another app', `a0/${crypto.randomUUID()}/shot.png`, appId],
+  ['no app', `a0/${appId}/shot.png`, null],
+  ['something other than an app', 'a0/list/shot.png', 'list'],
+])('refuses an upload for %s', async (_, pathname, clientPayload) => {
+  const response = await tokenRequest(pathname, clientPayload)
+  expect(response.status).toBe(400)
+  expect(await response.json()).toEqual({
+    error: "An attachment goes in its app's folder",
+  })
+})

package/examples/playground/app/agent/[agentId]/agent-queue.test.tsx

@@ -1,124 +1,150 @@
 // @vitest-environment jsdom
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, expect, it, vi } from 'vitest'
-import type { UIMessage } from 'ai'
-import { AgentQueue } from './agent-queue'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import { inputs } from 'experimental-a2/ai'
+import type { A2Operation } from 'experimental-a2/server'
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import { serveAgent, type ServedAgent } from '@/test/agent'
+import { AgentClient } from './agent-client'
 
-afterEach(cleanup)
+let served: ServedAgent
+let server: ServedAgent['server']
+let probe: ServedAgent['probe']
+let id: string
 
-type Edit = (message: UIMessage) => Promise<void>
+beforeEach(async () => {
+  served = await serveAgent()
+  ;({ server, probe } = served)
+  id = crypto.randomUUID()
+  // Paused, so the message waits in the queue rather than starting a turn.
+  await server.session(id).append(
+    ...inputs.pause({ when: 'now' }),
+    ...inputs.message({
+      id: 'queued',
+      role: 'user',
+      parts: [{ type: 'text', text: 'Original' }],
+    }),
+  )
+})
+
+afterEach(async () => {
+  cleanup()
+  await served.close()
+})
 
-const queue = (edit: Edit) =>
+const page = async () =>
   render(
-    <AgentQueue
-      items={[
-        {
-          id: 'queued',
-          role: 'user',
-          message: {
-            id: 'queued',
-            role: 'user',
-            parts: [{ type: 'text', text: 'Original' }],
-          },
-          generate: true,
-        },
-      ]}
-      paused
-      edit={edit}
-      move={vi.fn<() => void>()}
-      remove={vi.fn<() => Promise<void>>().mockResolvedValue(undefined)}
-      sendNow={vi.fn<() => Promise<void>>().mockResolvedValue(undefined)}
-    />,
+    <AgentClient agentId={id} initial={await server.session(id).state()} />,
   )
 
+const isEdit = (operation: A2Operation): boolean =>
+  operation.type === 'push' &&
+  operation.sessionId === id &&
+  operation.events.some(
+    (event) =>
+      event.type === 'ai.control.requested' &&
+      (event.payload as { action?: unknown }).action === 'edit',
+  )
+
+/** The texts each edit pushed to the server carried. */
+const editsReceived = (): string[] =>
+  probe.operations.filter(isEdit).flatMap((operation) =>
+    operation.type === 'push'
+      ? operation.events.map(
+          (event) =>
+            (
+              event.payload as {
+                message: { parts: { text: string }[] }
+              }
+            ).message.parts[0]!.text,
+        )
+      : [],
+  )
+
+const queuedText = async (): Promise<string | undefined> => {
+  const { state } = await server.session(id).state()
+  const part = state.inbox.items[0]?.message.parts[0]
+  return part?.type === 'text' ? part.text : undefined
+}
+
+/** The queued message's text, as the queue shows it. */
+const shownText = (): string | null | undefined =>
+  document.querySelector('.agent-queue-text')?.textContent
+
+const editor = () =>
+  screen.queryByLabelText(
+    'Edit text for queued message 1',
+  ) as HTMLTextAreaElement | null
+const button = (name: string) =>
+  screen.getByRole('button', { name }) as HTMLButtonElement
+
 const open = (): void => {
-  fireEvent.click(screen.getByRole('button', { name: 'Edit queued message 1' }))
+  fireEvent.click(button('Edit queued message 1'))
 }
 const save = (text: string): void => {
-  fireEvent.change(screen.getByRole('textbox'), { target: { value: text } })
-  fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+  fireEvent.change(editor()!, { target: { value: text } })
+  fireEvent.click(button('Save'))
 }
 
 it('closes immediately and permits another edit while saves remain in flight', async () => {
-  const first = Promise.withResolvers<void>()
-  const second = Promise.withResolvers<void>()
-  const edit = vi
-    .fn<Edit>()
-    .mockImplementationOnce(() => first.promise)
-    .mockImplementationOnce(() => second.promise)
-  queue(edit)
+  await page()
+  const first = probe.hold(isEdit)
   open()
   save('First')
-  expect(screen.queryByRole('textbox')).toBeNull()
-  expect(
-    (
-      screen.getByRole('button', {
-        name: 'Edit queued message 1',
-      }) as HTMLButtonElement
-    ).disabled,
-  ).toBe(false)
-  expect(
-    (
-      screen.getByRole('button', {
-        name: 'Send queued message 1 after current step',
-      }) as HTMLButtonElement
-    ).disabled,
-  ).toBe(false)
+  expect(editor()).toBeNull()
+  expect(button('Edit queued message 1').disabled).toBe(false)
+  expect(button('Send queued message 1 after current step').disabled).toBe(
+    false,
+  )
+  await first.arrived
   open()
   save('Second')
-  expect(edit.mock.calls.map(([message]) => message.parts)).toEqual([
-    [{ type: 'text', text: 'First' }],
-    [{ type: 'text', text: 'Second' }],
-  ])
-  await act(async () => {
-    first.reject(new Error('Earlier save failed'))
-    await first.promise.catch(() => {})
-  })
-  expect(screen.queryByRole('textbox')).toBeNull()
+  first.deny()
+  await waitFor(async () => expect(await queuedText()).toBe('Second'))
+  expect(editsReceived()).toEqual(['First', 'Second'])
+  expect(editor()).toBeNull()
   expect(screen.queryByRole('alert')).toBeNull()
-  await act(async () => {
-    second.resolve()
-    await second.promise
-  })
+  expect(shownText()).toBe('Second')
 })
 
-it('restores the latest submitted draft on transport failure', async () => {
-  const pending = Promise.withResolvers<void>()
-  queue(() => pending.promise)
+it('restores the latest submitted draft when its save fails', async () => {
+  await page()
+  const pending = probe.hold(isEdit)
   open()
   save('Keep this draft')
-  expect(screen.queryByRole('textbox')).toBeNull()
-  await act(async () => {
-    pending.reject(new Error('Save failed'))
-    await pending.promise.catch(() => {})
-  })
-  expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe(
-    'Keep this draft',
+  expect(editor()).toBeNull()
+  await pending.arrived
+  pending.deny()
+  await waitFor(() => expect(editor()?.value).toBe('Keep this draft'))
+  expect(screen.getByRole('alert').textContent).toBe(
+    'the operation is not authorized',
   )
-  expect(screen.getByRole('alert').textContent).toBe('Save failed')
+  expect(await queuedText()).toBe('Original')
 })
 
 it.each(['open', 'cancel'] as const)(
   'does not restore an old failed save after a newer draft is %s',
   async (action) => {
-    const pending = Promise.withResolvers<void>()
-    queue(() => pending.promise)
+    await page()
+    const pending = probe.hold(isEdit)
     open()
     save('Old draft')
+    await pending.arrived
     open()
-    fireEvent.change(screen.getByRole('textbox'), {
-      target: { value: 'New draft' },
-    })
-    if (action === 'cancel')
-      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
-    await act(async () => {
-      pending.reject(new Error('Old save failed'))
-      await pending.promise.catch(() => {})
-    })
-    expect(
-      (screen.queryByRole('textbox') as HTMLTextAreaElement | null)?.value ??
-        null,
-    ).toBe(action === 'open' ? 'New draft' : null)
+    fireEvent.change(editor()!, { target: { value: 'New draft' } })
+    if (action === 'cancel') fireEvent.click(button('Cancel'))
+    pending.deny()
+    // The failed save leaves the queue; then its handler has had its turn.
+    await waitFor(() => expect(shownText()).toBe('Original'))
+    await act(() => new Promise((resolve) => setTimeout(resolve, 10)))
+    expect(editor()?.value ?? null).toBe(action === 'open' ? 'New draft' : null)
     expect(screen.queryByRole('alert')).toBeNull()
+    expect(await queuedText()).toBe('Original')
   },
 )

package/examples/playground/app/agent/[agentId]/compaction-panel.test.tsx

@@ -1,30 +1,57 @@
 // @vitest-environment jsdom
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, beforeEach, expect, it, vi } from 'vitest'
-import { demoAgent } from '../model'
-import type { AgentSession } from '../session'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import type { InitialSnapshot } from 'experimental-a2'
+import { useAgent } from 'experimental-a2/ai/react'
+import { createClient, type A2Client } from 'experimental-a2/client'
+import type { ReactNode } from 'react'
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import { serveAgent, type ServedAgent } from '@/test/agent'
+import { demoAgent, type AgentState } from '../model'
 import { CompactionPanel } from './compaction-panel'
 
-const loadHistory = vi.fn<AgentSession['loadHistory']>()
-const push = vi.fn<AgentSession['push']>()
-let session: AgentSession
-
-beforeEach(() => {
-  loadHistory.mockReset().mockResolvedValue([])
-  push.mockReset()
-  session = {
-    state: demoAgent.reducer.initialState,
-    hydrated: true,
-    events: [],
-    index: 10,
-    connection: { status: 'live', reconnects: 0 },
-    history: { complete: false, loading: false, oldestLoaded: null },
-    loadHistory,
-    push,
-    reconnect: vi.fn<() => void>(),
-  }
+let served: ServedAgent
+let server: ServedAgent['server']
+let probe: ServedAgent['probe']
+let client: A2Client<typeof demoAgent.events, AgentState>
+let id: string
+
+beforeEach(async () => {
+  served = await serveAgent()
+  ;({ server, probe } = served)
+  client = createClient({ contract: demoAgent, api: served.url })
+  id = crypto.randomUUID()
+})
+
+afterEach(async () => {
+  cleanup()
+  await served.close()
 })
-afterEach(cleanup)
+
+/** The panel as the agent page mounts it: on the session's live state. */
+function Panel({
+  initial,
+}: {
+  initial: InitialSnapshot<AgentState>
+}): ReactNode {
+  return <CompactionPanel session={useAgent({ client, id, initial })} />
+}
+
+const page = async (): Promise<InitialSnapshot<AgentState>> =>
+  server.session(id).state()
+
+const operations = (type: 'stream' | 'history' | 'push'): number =>
+  probe.operations.filter(
+    (operation) => operation.type === type && operation.sessionId === id,
+  ).length
+
+const connected = () => waitFor(() => expect(operations('stream')).toBe(1))
 
 async function toggle(panel: HTMLDetailsElement, open: boolean) {
   await act(async () => {
@@ -33,87 +60,91 @@ async function toggle(panel: HTMLDetailsElement, open: boolean) {
   })
 }
 
+const field = (label: string) =>
+  screen.getByLabelText(label) as HTMLInputElement | HTMLSelectElement
+
 it('uses seeded settings immediately and loads diagnostic history only on open', async () => {
-  session.state = {
-    ...session.state,
-    compactionSettings: { mode: 'manual', thresholdTokens: 1234 },
-  }
-  const view = render(<CompactionPanel session={session} />)
-  expect((screen.getByLabelText('Mode') as HTMLSelectElement).value).toBe(
-    'manual',
+  // More history than one page, so a second open would have more to load.
+  await server.session(id).append(
+    ...Array.from({ length: 60 }, (_, at) => ({
+      type: 'compaction.settings.updated' as const,
+      payload: { mode: 'manual' as const, thresholdTokens: 1175 + at },
+    })),
   )
-  expect(
-    (screen.getByLabelText('Threshold in tokens') as HTMLInputElement).value,
-  ).toBe('1234')
-  expect(push).not.toHaveBeenCalled()
-  expect(loadHistory).not.toHaveBeenCalled()
+  const view = render(<Panel initial={await page()} />)
+  expect(field('Mode').value).toBe('manual')
+  expect(field('Threshold in tokens').value).toBe('1234')
+  await connected()
+  expect(operations('history')).toBe(0)
+
   const panel =
     view.container.querySelector<HTMLDetailsElement>('.agent-compaction')!
   await toggle(panel, true)
-  expect(loadHistory).toHaveBeenCalledTimes(1)
+  await waitFor(() => expect(operations('history')).toBe(1))
   await toggle(panel, false)
   await toggle(panel, true)
-  expect(loadHistory).toHaveBeenCalledTimes(1)
-  session.state = {
-    ...session.state,
-    compactionSettings: { mode: 'disabled' },
-    compactionSettingsId: 'new',
-  }
-  session.events = [
-    {
-      id: 'old',
-      sessionId: 'one',
-      index: 2,
-      createdAt: new Date(),
-      type: 'compaction.settings.updated',
-      payload: { mode: 'automatic' },
-    },
-  ]
-  view.rerender(<CompactionPanel session={session} />)
-  expect((screen.getByLabelText('Mode') as HTMLSelectElement).value).toBe(
-    'disabled',
-  )
-  expect(push).not.toHaveBeenCalled()
+
+  await server.session(id).append({
+    type: 'compaction.settings.updated',
+    payload: { mode: 'disabled' },
+  })
+  await waitFor(() => expect(field('Mode').value).toBe('disabled'))
+  expect(operations('history')).toBe(1)
+  expect(operations('push')).toBe(0)
 })
 
 it('keeps diagnostic read failures local and retries only when requested', async () => {
-  loadHistory.mockRejectedValueOnce(new Error('History failed'))
+  await server.session(id).append({
+    type: 'compaction.settings.updated',
+    payload: { mode: 'automatic' },
+  })
+  probe.deny(({ type }) => type === 'history')
+  const initial = await page()
   const view = render(
     <>
       <input aria-label="composer" />
-      <CompactionPanel session={session} />
+      <Panel initial={initial} />
     </>,
   )
   await toggle(view.container.querySelector('details')!, true)
-  expect(screen.getByRole('alert').textContent).toBe('History failed')
-  expect(screen.getByLabelText('composer')).toBeDefined()
-  expect((screen.getByLabelText('Mode') as HTMLSelectElement).value).toBe(
-    'automatic',
+  expect((await screen.findByRole('alert')).textContent).toBe(
+    'the operation is not authorized',
   )
+  expect(screen.getByLabelText('composer')).toBeDefined()
+  expect(field('Mode').value).toBe('automatic')
+
   await act(async () =>
     fireEvent.click(
       screen.getByRole('button', { name: 'Load earlier events' }),
     ),
   )
-  expect(loadHistory).toHaveBeenCalledTimes(2)
-  expect(screen.queryByRole('alert')).toBeNull()
-  expect(push).not.toHaveBeenCalled()
+  await waitFor(() => expect(screen.queryByRole('alert')).toBeNull())
+  expect(operations('history')).toBe(2)
+  expect(operations('push')).toBe(0)
 })
 
 it('pushes the settings event and reports a failed save outside the form', async () => {
-  push.mockImplementationOnce(() =>
-    Object.assign(Promise.reject(new Error('Save failed')), {
-      confirmed: Promise.resolve([]),
-    }),
-  )
-  const view = render(<CompactionPanel session={session} />)
+  const view = render(<Panel initial={await page()} />)
   await toggle(view.container.querySelector('details')!, true)
   await act(async () =>
     fireEvent.click(screen.getByRole('button', { name: 'Set to 1 token' })),
   )
-  expect(push).toHaveBeenCalledWith({
-    type: 'compaction.settings.updated',
-    payload: { mode: 'manual', thresholdTokens: 1 },
+  await waitFor(async () =>
+    expect((await server.session(id).state()).state.compactionSettings).toEqual(
+      { mode: 'manual', thresholdTokens: 1 },
+    ),
+  )
+  expect(screen.queryByRole('alert')).toBeNull()
+
+  probe.deny(({ type }) => type === 'push')
+  await act(async () =>
+    fireEvent.click(screen.getByRole('button', { name: 'Reset to automatic' })),
+  )
+  expect((await screen.findByRole('alert')).textContent).toBe(
+    'the operation is not authorized',
+  )
+  expect((await server.session(id).state()).state.compactionSettings).toEqual({
+    mode: 'manual',
+    thresholdTokens: 1,
   })
-  expect(screen.getByRole('alert').textContent).toBe('Save failed')
 })

package/examples/playground/app/agent/ingress.test.ts

@@ -1,8 +1,10 @@
-import { expect, it, vi } from 'vitest'
+import { expect, it } from 'vitest'
 import { agent } from 'experimental-a2/ai/server'
 import { memory } from 'experimental-a2/store-memory'
 import { inputs } from 'experimental-a2/ai'
+import { GET, POST } from './events/route'
 import { demoAgent } from './model'
+import { agentServer as playgroundAgent } from './server'
 
 const message = { id: 'message', role: 'user' as const, parts: [] }
 
@@ -81,21 +83,43 @@ it('keeps lifecycle events server-only beside public controls', async () => {
   expect(accepted.status).toBe(200)
 })
 
-it('forwards both HTTP and WebSocket entry requests to the agent', async () => {
-  const fetch = vi
-    .fn<(request: Request) => Promise<Response>>()
-    .mockResolvedValue(new Response(null))
-  vi.doMock('./server', () => ({ agentServer: { fetch } }))
-  try {
-    const route = await import('./events/route')
-    const read = new Request('http://test/events', {
+it("serves the playground's agent over its events route", async () => {
+  const sessionId = crypto.randomUUID()
+  const pushed = await POST(
+    new Request('http://test/agent/events', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        sessionId,
+        events: [
+          {
+            type: 'compaction.settings.updated',
+            payload: { mode: 'manual', thresholdTokens: 2 },
+          },
+        ],
+      }),
+    }),
+  )
+  expect(pushed.status).toBe(200)
+  await playgroundAgent.drain(sessionId)
+  const { state } = await playgroundAgent.session(sessionId).state()
+  expect(state.compactionSettings).toEqual({
+    mode: 'manual',
+    thresholdTokens: 2,
+  })
+
+  const stream = await GET(
+    new Request(`http://test/agent/events?sessionId=${sessionId}`),
+  )
+  expect(stream.status).toBe(200)
+  expect(stream.headers.get('content-type')).toContain('text/event-stream')
+  await stream.body?.cancel()
+
+  // The agent's browser client streams over HTTP; the route offers no upgrade.
+  const upgrade = await GET(
+    new Request(`http://test/agent/events?sessionId=${sessionId}`, {
       headers: { upgrade: 'websocket' },
-    })
-    const write = new Request('http://test/events', { method: 'POST' })
-    await route.GET(read)
-    await route.POST(write)
-    expect(fetch.mock.calls).toEqual([[read], [write]])
-  } finally {
-    vi.doUnmock('./server')
-  }
+    }),
+  )
+  expect(upgrade.status).toBe(426)
 })