experimental-a2 0.18.1 → 0.20.0

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)
 })

package/examples/playground/app/agent/model-input.test.tsx

@@ -1,58 +1,107 @@
 // @vitest-environment jsdom
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, expect, it, vi } from 'vitest'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import { serveAgent, type ServedAgent } from '@/test/agent'
+import { AgentClient } from './[agentId]/agent-client'
 import type { ModelChoice } from './model'
-import { ModelInput } from './model-input'
 
-afterEach(cleanup)
+let served: ServedAgent
+let server: ServedAgent['server']
+let probe: ServedAgent['probe']
+let id: string
 
-const renderInput = (value: ModelChoice) => {
-  const onChange = vi.fn<(settings: ModelChoice) => void>()
-  const view = render(
-    <ModelInput value={value} onChange={onChange} disabled={false} />,
+beforeEach(async () => {
+  served = await serveAgent()
+  ;({ server, probe } = served)
+  id = crypto.randomUUID()
+})
+
+afterEach(async () => {
+  cleanup()
+  await served.close()
+})
+
+/** The agent page, after an earlier choice. */
+const page = async (choice: ModelChoice) => {
+  await server
+    .session(id)
+    .append({ type: 'model.choice.updated', payload: choice })
+  render(
+    <AgentClient agentId={id} initial={await server.session(id).state()} />,
+  )
+  await waitFor(() =>
+    expect(ofSession().map(({ type }) => type)).toContain('stream'),
   )
-  return {
-    onChange,
-    model: screen.getByRole('textbox') as HTMLInputElement,
-    update: (next: ModelChoice) =>
-      view.rerender(
-        <ModelInput value={next} onChange={onChange} disabled={false} />,
-      ),
-  }
 }
 
-it('commits a typed model on blur or Enter, not per keystroke', () => {
-  const { onChange, model, update } = renderInput({ reasoning: 'high' })
-  fireEvent.change(model, { target: { value: 'openai/gpt' } })
-  fireEvent.change(model, { target: { value: ' provider/model ' } })
-  expect(onChange).not.toHaveBeenCalled()
-  expect(model.value).toBe(' provider/model ')
-  fireEvent.blur(model)
-  expect(onChange).toHaveBeenCalledExactlyOnceWith({
-    reasoning: 'high',
-    model: 'provider/model',
-  })
+/** The page's own client serves every test's session. */
+const ofSession = () =>
+  probe.operations.filter((operation) => operation.sessionId === id)
+
+/** The choices the page pushed, in order. */
+const pushed = (): unknown[] =>
+  ofSession().flatMap((operation) =>
+    operation.type === 'push'
+      ? operation.events.map((event) => [event.type, event.payload])
+      : [],
+  )
+
+const chosen = async (): Promise<ModelChoice> =>
+  (await server.session(id).state()).state.modelChoice
 
-  update({ reasoning: 'high', model: 'provider/model' })
-  expect(model.value).toBe('provider/model')
-  fireEvent.change(model, { target: { value: '' } })
-  fireEvent.keyDown(model, { key: 'Enter' })
-  expect(onChange).toHaveBeenLastCalledWith({ reasoning: 'high' })
+const model = () =>
+  screen.getByRole('textbox', { name: 'Model' }) as HTMLInputElement
+
+it('commits a typed model on blur or Enter, not per keystroke', async () => {
+  await page({ reasoning: 'high' })
+  fireEvent.change(model(), { target: { value: 'openai/gpt' } })
+  fireEvent.change(model(), { target: { value: ' provider/model ' } })
+  expect(model().value).toBe(' provider/model ')
+  fireEvent.blur(model())
+  await waitFor(async () =>
+    expect(await chosen()).toEqual({
+      reasoning: 'high',
+      model: 'provider/model',
+    }),
+  )
+  expect(pushed()).toEqual([
+    ['model.choice.updated', { reasoning: 'high', model: 'provider/model' }],
+  ])
+  expect(model().value).toBe('provider/model')
+
+  fireEvent.change(model(), { target: { value: '' } })
+  fireEvent.keyDown(model(), { key: 'Enter' })
+  await waitFor(async () =>
+    expect(await chosen()).toEqual({ reasoning: 'high' }),
+  )
+  expect(pushed()).toHaveLength(2)
 })
 
-it('commits reasoning and speed immediately and omits defaults', () => {
-  const { onChange } = renderInput({
-    model: 'provider/model',
-    reasoning: 'low',
-  })
+it('commits reasoning and speed immediately and omits defaults', async () => {
+  await page({ model: 'provider/model', reasoning: 'low' })
   fireEvent.change(screen.getByTitle('Thinking level'), {
     target: { value: 'provider-default' },
   })
-  expect(onChange).toHaveBeenLastCalledWith({ model: 'provider/model' })
+  await waitFor(async () =>
+    expect(await chosen()).toEqual({ model: 'provider/model' }),
+  )
   fireEvent.click(screen.getByRole('button', { name: 'Prefer fast' }))
-  expect(onChange).toHaveBeenLastCalledWith({
-    model: 'provider/model',
-    reasoning: 'low',
-    speed: 'fast',
-  })
+  await waitFor(async () =>
+    expect(await chosen()).toEqual({ model: 'provider/model', speed: 'fast' }),
+  )
+  expect(pushed()).toEqual([
+    ['model.choice.updated', { model: 'provider/model' }],
+    ['model.choice.updated', { model: 'provider/model', speed: 'fast' }],
+  ])
+  expect(
+    screen
+      .getByRole('button', { name: 'Prefer fast' })
+      .getAttribute('aria-pressed'),
+  ).toBe('true')
 })

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

@@ -29,9 +29,18 @@ it('folds compaction settings beside the AI state', () => {
   )
   state = reducer.fold(
     state,
-    event(2, 'ai.message.created', {
-      message: { id: 'user', role: 'user', parts: [] },
-    }),
+    // A send's id is its message's.
+    {
+      ...event(2, 'ai.control.requested', {
+        action: 'send',
+        message: { id: 'user', role: 'user', parts: [] },
+      }),
+      id: 'user',
+    },
+  )
+  state = reducer.fold(
+    state,
+    event(3, 'ai.message.created', { messageId: 'user', role: 'user' }),
   )
   expect(state.compactionSettings).toEqual({ mode: 'disabled' })
   expect(state.compactionSettingsId).toBe('event-1')

package/examples/playground/app/chat/[chatId]/agent-state.test.ts

@@ -19,11 +19,7 @@ function running() {
     active: {
       turnId: 'turn',
       phase: 'generating',
-      input: {
-        id: 'input',
-        generate: true,
-        message: { id: 'input', role: 'user', parts: [] },
-      },
+      input: { id: 'input', role: 'user', generate: true },
     },
   }
   const append = (event: { type: string; payload: unknown; id?: string }) => {

package/examples/playground/app/chat/[chatId]/agent-stream-drawer.test.tsx

@@ -1,5 +1,5 @@
 import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import type { ChatAgentMessage } from '../model'
 import { AgentStreamDrawer } from './agent-stream-drawer'
 import type { AgentMessageMetadata, AgentStreamSelection } from './chat-view'
@@ -89,7 +89,7 @@ describe('AgentStreamDrawer', () => {
         selection={selection}
         summary="ambient · 35 tokens · 2 model steps"
         status="completed"
-        onClose={vi.fn<() => void>()}
+        onClose={() => {}}
       />,
     )
 

package/examples/playground/app/chat/server.test.ts

@@ -1,68 +1,13 @@
-import type { UIMessageChunk } from 'ai'
-import { expect, it, vi } from 'vitest'
+import { afterEach, expect, it, vi } from 'vitest'
+import { testModel, toolCall } from '@/test/model'
+import { chatAgentServer, chatServer } from './server'
 
-vi.mock('server-only', () => ({}))
-vi.mock('@/lib/store', async () => {
-  const { memory } = await import('experimental-a2/store-memory')
-  return { store: memory() }
-})
-
-// The chat's real agent, with a scripted model: two `post` calls, then done.
-const { prompts, step } = vi.hoisted(() => ({
-  prompts: [] as string[],
-  step: (chunks: UIMessageChunk[]) =>
-    new ReadableStream<UIMessageChunk>({
-      start(controller) {
-        for (const chunk of chunks) controller.enqueue(chunk)
-        controller.close()
-      },
-    }),
-}))
-vi.mock('experimental-a2/ai/server', async (importActual) => {
-  const actual =
-    await importActual<typeof import('experimental-a2/ai/server')>()
-  return {
-    ...actual,
-    agent: (options: Parameters<typeof actual.agent>[0]) =>
-      actual.agent({
-        ...options,
-        harness: {
-          ...(options.harness?.type === 'ai-sdk' ? options.harness : {}),
-          type: 'ai-sdk',
-          generate: ({
-            event,
-            messages,
-          }: {
-            event: { payload: { reason: string } }
-            messages: { role: string; id: string }[]
-          }) => {
-            prompts.push(
-              messages.map((message) => `${message.role}:${message.id}`).join(),
-            )
-            return step(
-              event.payload.reason === 'message'
-                ? [
-                    { type: 'start' },
-                    ...['Hello', 'there'].map(
-                      (message, call): UIMessageChunk => ({
-                        type: 'tool-input-available',
-                        toolCallId: `call-${call}`,
-                        toolName: 'post',
-                        input: { message },
-                      }),
-                    ),
-                    { type: 'finish', finishReason: 'tool-calls' },
-                  ]
-                : [{ type: 'start' }, { type: 'finish', finishReason: 'stop' }],
-            )
-          },
-        },
-      } as never),
-  }
+afterEach(() => {
+  vi.unstubAllGlobals()
 })
 
 it('forwards room messages to the agent, whose posts land in the room', async () => {
-  const { chatAgentServer, chatServer } = await import('./server')
+  const model = testModel({ id: 'openai/gpt-5.4' })
   const room = chatServer.session('room')
   const agent = chatAgentServer.session('room')
   await room.append({
@@ -74,6 +19,20 @@ it('forwards room messages to the agent, whose posts land in the room', async ()
     payload: { author: 'bob', text: '@agent say hi' },
   })
 
+  // The mention's step posts twice; the step after the posts ends the turn.
+  const posting = await model.step(0)
+  posting.write(
+    ...['Hello', 'there'].flatMap((message, call) =>
+      toolCall({
+        id: `call-${call}`,
+        name: 'post',
+        chunks: [JSON.stringify({ message })],
+      }),
+    ),
+  )
+  posting.finish('tool-calls')
+  ;(await model.step(1)).finish('stop')
+
   // Without a scheduler, appends run in background drains.
   await vi.waitFor(
     async () => {
@@ -92,19 +51,33 @@ it('forwards room messages to the agent, whose posts land in the room', async ()
   expect(state.posts[0]!.index).toBeGreaterThan(state.messages[1]!.index)
   // The passive message reached the agent as context without a reply of its
   // own; only the mention generated, and it saw both.
-  expect(prompts).toHaveLength(2)
+  expect(model.steps).toHaveLength(2)
   expect(
-    prompts[0]!.split(',').filter((id) => id.startsWith('user:')),
-  ).toHaveLength(2)
+    JSON.stringify(
+      model.steps[0]!.options.prompt.filter(
+        (message) => message.role === 'user',
+      ),
+    ),
+  ).toMatch(/alice: just chatting.*bob: @agent say hi/)
   const messages = (await agent.state()).state.messages
   expect(messages.map((message) => message.role)).toEqual([
     'user',
     'user',
     'assistant',
   ])
+  // One response, both of its steps recorded on it.
+  expect(messages[2]!.metadata).toMatchObject({
+    kind: 'agent',
+    author: 'agent',
+    mode: 'mention',
+    steps: [
+      { model: 'openai/gpt-5.4', finishReason: 'tool-calls' },
+      { model: 'openai/gpt-5.4', finishReason: 'stop' },
+    ],
+  })
 
   // Replaying the post tool's append converges on the stored event.
-  const [post] = (await room.history()).filter(
+  const post = (await room.history()).find(
     (event) => event.type === 'agent.message.posted',
   )
   await room.append({ type: post!.type, id: post!.id, payload: post!.payload })