experimental-a2 0.16.0 → 0.17.0

package/examples/playground/app/agent/[agentId]/command-receipt.tsx

@@ -0,0 +1,27 @@
+import type { ControlReceipt } from 'experimental-a2/ai'
+
+export function CommandReceipt({
+  receipt,
+  stopCommandIds,
+}: {
+  receipt: ControlReceipt | null
+  stopCommandIds: readonly string[]
+}) {
+  if (receipt?.outcome !== 'rejected') return null
+  if (
+    receipt.reason === 'stale-turn' &&
+    stopCommandIds.includes(receipt.commandId)
+  ) {
+    return (
+      <p className="hint" role="status">
+        That turn had already finished.
+      </p>
+    )
+  }
+  return (
+    <p className="error" role="alert">
+      Command rejected: {receipt.reason}. Refresh the input or turn you want to
+      change.
+    </p>
+  )
+}

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

@@ -1,38 +1,39 @@
 import type { ReactNode } from 'react'
-import { formatActivityTime } from '@/app/components/activity-feed'
-import type { CompactionEntry } from '../compaction-timeline'
+import type { CompactionPartData } from 'experimental-a2/ai'
+
+const number = new Intl.NumberFormat('en-US')
 
 export function CompactionEvent({
-  entry,
+  data,
 }: {
-  entry: CompactionEntry
+  data: CompactionPartData
 }): ReactNode {
-  const { event, running, outcome } = entry
-  const completed = event.type === 'ai.compaction.completed'
-  const label = completed
-    ? 'Context compacted'
-    : running
-      ? 'Compacting…'
-      : 'Compaction did not complete'
+  const { status, summary, inputTokens, thresholdTokens } = data
+  const running = status === 'running'
+  const label =
+    status === 'completed'
+      ? 'Context compacted'
+      : running
+        ? 'Compacting…'
+        : 'Compaction did not complete'
+  const hint = [
+    inputTokens === undefined || thresholdTokens === undefined
+      ? undefined
+      : `${number.format(inputTokens)} tokens against a ${number.format(thresholdTokens)} token threshold`,
+    status === 'failed' || status === 'interrupted'
+      ? `Generation ${status}`
+      : undefined,
+  ]
+    .filter((line) => line !== undefined)
+    .join(' · ')
 
   return (
     <details className="agent-compaction-event">
       <summary>
         <span role={running ? 'status' : undefined}>{label}</span>
-        <time dateTime={event.createdAt.toISOString()}>
-          {formatActivityTime(event.createdAt)}
-        </time>
       </summary>
-      <p className="hint">
-        Event #{event.index} ·{' '}
-        {event.payload.throughIndex === undefined
-          ? `Through message ${event.payload.throughMessageId}`
-          : `Summarized through event #${event.payload.throughIndex}`}
-        {outcome === undefined ? null : ` · Generation ${outcome}`}
-      </p>
-      {completed && event.payload.summary ? (
-        <pre>{event.payload.summary}</pre>
-      ) : null}
+      {hint ? <p className="hint">{hint}</p> : null}
+      {summary ? <pre>{summary}</pre> : null}
     </details>
   )
 }

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

@@ -0,0 +1,119 @@
+// @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 { 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>(),
+  }
+})
+afterEach(cleanup)
+
+async function toggle(panel: HTMLDetailsElement, open: boolean) {
+  await act(async () => {
+    panel.open = open
+    fireEvent(panel, new Event('toggle'))
+  })
+}
+
+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',
+  )
+  expect(
+    (screen.getByLabelText('Threshold in tokens') as HTMLInputElement).value,
+  ).toBe('1234')
+  expect(push).not.toHaveBeenCalled()
+  expect(loadHistory).not.toHaveBeenCalled()
+  const panel =
+    view.container.querySelector<HTMLDetailsElement>('.agent-compaction')!
+  await toggle(panel, true)
+  expect(loadHistory).toHaveBeenCalledTimes(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()
+})
+
+it('keeps diagnostic read failures local and retries only when requested', async () => {
+  loadHistory.mockRejectedValueOnce(new Error('History failed'))
+  const view = render(
+    <>
+      <input aria-label="composer" />
+      <CompactionPanel session={session} />
+    </>,
+  )
+  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',
+  )
+  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()
+})
+
+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} />)
+  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 },
+  })
+  expect(screen.getByRole('alert').textContent).toBe('Save failed')
+})

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

@@ -1,15 +1,15 @@
 'use client'
 
 import type { FormEvent, ReactNode } from 'react'
-import { useEffect, useId, useRef, useState } from 'react'
-import type { AIState } from 'experimental-a2/ai'
-import { formatActivityTime } from '@/app/components/activity-feed'
+import { useId, useRef, useState } from 'react'
+import { formatActivityTime } from '../../components/activity-feed'
+import type { AgentSession } from '../session'
 import {
   agentModel,
   compactionSettingsSchema,
-  latestCompactionSettings,
-  type AgentEvent,
+  type AgentState,
   type CompactionSettings,
+  type AgentEvent,
 } from '../model'
 
 const number = new Intl.NumberFormat('en-US')
@@ -19,13 +19,15 @@ const tokens = (value: number | undefined): string =>
     : `${number.format(value)} ${value === 1 ? 'token' : 'tokens'}`
 
 function SettingsForm({
-  agentId,
   settings,
   closed,
+  saving,
+  save,
 }: {
-  agentId: string
   settings: CompactionSettings
   closed: boolean
+  saving: boolean
+  save: (settings: CompactionSettings) => void
 }): ReactNode {
   const modeId = useId()
   const thresholdId = useId()
@@ -33,46 +35,11 @@ function SettingsForm({
   const [threshold, setThreshold] = useState(
     settings.mode === 'manual' ? String(settings.thresholdTokens) : '',
   )
-  const [saving, setSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [notice, setNotice] = useState<string | null>(null)
-  const pending = useRef<AbortController | null>(null)
-
-  useEffect(() => () => pending.current?.abort(), [])
-
-  const save = async (next: CompactionSettings): Promise<void> => {
-    pending.current?.abort()
-    const controller = new AbortController()
-    pending.current = controller
-    setSaving(true)
-    setError(null)
-    setNotice(null)
-    try {
-      const response = await fetch(
-        `/agent/${encodeURIComponent(agentId)}/compaction`,
-        {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: crypto.randomUUID(), settings: next }),
-          signal: controller.signal,
-        },
-      )
-      if (!response.ok)
-        throw new Error('Could not save compaction settings. Try again.')
-      setNotice('Saved. The live feed will confirm the latest settings.')
-    } catch (cause) {
-      if (!controller.signal.aborted)
-        setError(cause instanceof Error ? cause.message : String(cause))
-    } finally {
-      if (pending.current === controller) {
-        pending.current = null
-        setSaving(false)
-      }
-    }
-  }
 
   const submit = (event: FormEvent): void => {
     event.preventDefault()
+    setError(null)
     const parsed = compactionSettingsSchema.safeParse(
       mode === 'manual'
         ? { mode, thresholdTokens: Number(threshold) }
@@ -82,7 +49,7 @@ function SettingsForm({
       setError('Enter a positive whole-number threshold.')
       return
     }
-    void save(parsed.data)
+    save(parsed.data)
   }
 
   return (
@@ -124,14 +91,14 @@ function SettingsForm({
           <button
             type="button"
             className="secondary"
-            onClick={() => void save({ mode: 'manual', thresholdTokens: 1 })}
+            onClick={() => save({ mode: 'manual', thresholdTokens: 1 })}
           >
             Set to 1 token
           </button>
           <button
             type="button"
             className="secondary"
-            onClick={() => void save({ mode: 'automatic' })}
+            onClick={() => save({ mode: 'automatic' })}
           >
             Reset to automatic
           </button>
@@ -147,11 +114,6 @@ function SettingsForm({
           Existing summaries remain in use. This stops future compaction.
         </p>
       ) : null}
-      {notice ? (
-        <p role="status" className="hint">
-          {notice}
-        </p>
-      ) : null}
       {error ? (
         <p role="alert" className="error">
           {error}
@@ -161,17 +123,36 @@ function SettingsForm({
   )
 }
 
-export function CompactionPanel({
-  agentId,
+function CompactionDetails({
   state,
   events,
+  complete,
+  push,
 }: {
-  agentId: string
-  state: AIState
+  state: AgentState
   events: readonly AgentEvent[]
+  complete: boolean
+  push: AgentSession['push']
 }): ReactNode {
-  const { settings, id } = latestCompactionSettings(events)
-  const metadata = state.modelMetadata[agentModel]
+  const settings = state.compactionSettings
+  const id = state.compactionSettingsId
+  // The save outlives the form, which remounts when the optimistic push lands.
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const save = async (next: CompactionSettings): Promise<void> => {
+    setSaving(true)
+    setSaveError(null)
+    try {
+      await push({ type: 'compaction.settings.updated', payload: next })
+    } catch (cause) {
+      setSaveError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setSaving(false)
+    }
+  }
+  const model =
+    state.activeGeneration?.model ?? state.modelChoice.model ?? agentModel
+  const metadata = state.modelMetadata[model]
   const limits = metadata?.status === 'resolved' ? metadata.limits : undefined
   const automaticThreshold =
     limits === undefined ? undefined : Math.floor(limits.contextWindow * 0.75)
@@ -188,127 +169,189 @@ export function CompactionPanel({
       .filter((event) => event.type === 'ai.compaction.requested')
       .map((event) => [event.payload.generationId, event.payload]),
   )
-  const compacting = state.compaction?.status === 'running'
+  return (
+    <div className="compaction-controls">
+      <p className="hint">
+        Model: <code>{model}</code>. Limits are saved for this session.
+      </p>
+      <dl className="compaction-metrics">
+        <div>
+          <dt>Context window</dt>
+          <dd>{tokens(limits?.contextWindow)}</dd>
+        </div>
+        <div>
+          <dt>Model output ceiling</dt>
+          <dd>{tokens(limits?.maxOutputTokens)}</dd>
+        </div>
+        <div>
+          <dt>Automatic trigger · 75%</dt>
+          <dd>{tokens(automaticThreshold)}</dd>
+        </div>
+        <div>
+          <dt>Threshold for next step</dt>
+          <dd>
+            {settings.mode === 'disabled'
+              ? 'Disabled'
+              : tokens(effectiveThreshold)}
+          </dd>
+        </div>
+        <div>
+          <dt>Last loaded step input · reported</dt>
+          <dd>{tokens(lastStep?.payload.usage?.inputTokens)}</dd>
+        </div>
+        <div>
+          <dt>Last loaded step input · raw estimate</dt>
+          <dd>{tokens(lastStep?.payload.inputTokenEstimate)}</dd>
+        </div>
+      </dl>
+      <p className="hint">
+        The raw estimate excludes provider metadata. Compaction adjusts it using
+        the previous step’s reported usage when the model matches and the prompt
+        has not shrunk.
+      </p>
+      {limits === undefined ? (
+        <p className="hint">
+          {metadata?.status === 'unavailable'
+            ? 'Gateway did not report limits for this model. You can set a custom threshold.'
+            : metadata?.status === 'pending'
+              ? 'Model limits have been requested but are not resolved yet. The agent can continue.'
+              : 'Send a message to discover the model limits, or set a custom threshold first.'}
+        </p>
+      ) : null}
+      <SettingsForm
+        key={id}
+        settings={settings}
+        closed={state.status === 'closed'}
+        saving={saving}
+        save={(next) => void save(next)}
+      />
+      {saveError ? (
+        <p role="alert" className="error">
+          {saveError}
+        </p>
+      ) : null}
+      <details className="compaction-history">
+        <summary>
+          Loaded compactions <span>{completed.length}</span>
+        </summary>
+        {completed.length === 0 ? (
+          <p className="hint">
+            {complete
+              ? 'No completed compactions yet.'
+              : 'No completed compactions in the loaded history.'}
+          </p>
+        ) : (
+          <ol>
+            {completed.map((event) => {
+              const trigger = requested.get(event.payload.generationId)
+              return (
+                <li key={event.id}>
+                  <div className="compaction-marker">
+                    <strong>Context compacted · #{event.index}</strong>
+                    <time dateTime={event.createdAt.toISOString()}>
+                      {formatActivityTime(event.createdAt)}
+                    </time>
+                  </div>
+                  <p className="hint">
+                    {event.payload.throughIndex === undefined
+                      ? `Through message ${event.payload.throughMessageId}`
+                      : `Summarized through event #${event.payload.throughIndex}`}{' '}
+                    · {tokens(event.payload.usage?.inputTokens)} in ·{' '}
+                    {tokens(event.payload.usage?.outputTokens)} out
+                  </p>
+                  {trigger?.inputTokens === undefined ? null : (
+                    <p className="hint">
+                      Trigger: {tokens(trigger.inputTokens)} against a{' '}
+                      {tokens(trigger.thresholdTokens)} threshold. Raw estimate:{' '}
+                      {tokens(trigger.inputTokenEstimate)}.
+                    </p>
+                  )}
+                  {event.payload.summary ? (
+                    <details>
+                      <summary>View summary</summary>
+                      <pre>{event.payload.summary}</pre>
+                    </details>
+                  ) : null}
+                </li>
+              )
+            })}
+          </ol>
+        )}
+      </details>
+    </div>
+  )
+}
 
+export function CompactionPanel({
+  session,
+}: {
+  session: AgentSession
+}): ReactNode {
+  const { state, events, history, loadHistory, push } = session
+  const opened = useRef(false)
+  const [historyError, setHistoryError] = useState<string | null>(null)
+  const loadEarlier = async (): Promise<void> => {
+    setHistoryError(null)
+    try {
+      await loadHistory()
+    } catch (error) {
+      setHistoryError(
+        error instanceof Error ? error.message : 'Could not load history.',
+      )
+    }
+  }
   return (
-    <details className="agent-compaction">
+    <details
+      className="agent-compaction"
+      onToggle={(event) => {
+        if (
+          event.target !== event.currentTarget ||
+          !event.currentTarget.open ||
+          opened.current
+        )
+          return
+        opened.current = true
+        if (!history.complete) void loadEarlier()
+      }}
+    >
       <summary>
         <span className="compaction-chevron" aria-hidden="true">
           ›
         </span>
         <strong>Compaction</strong>
-        <span className={`badge${compacting ? ' live' : ''}`}>
-          {compacting
+        <span
+          className={`badge${state.compaction?.status === 'running' ? ' live' : ''}`}
+        >
+          {state.compaction?.status === 'running'
             ? 'Compacting…'
-            : settings.mode === 'disabled'
+            : state.compactionSettings.mode === 'disabled'
               ? 'Disabled'
-              : settings.mode === 'manual'
-                ? `Custom · ${tokens(settings.thresholdTokens)}`
+              : state.compactionSettings.mode === 'manual'
+                ? `Custom · ${tokens(state.compactionSettings.thresholdTokens)}`
                 : 'Automatic'}
         </span>
       </summary>
-      <div className="compaction-controls">
-        <p className="hint">
-          Model: <code>{agentModel}</code>. Limits are saved for this session.
-        </p>
-        <dl className="compaction-metrics">
-          <div>
-            <dt>Context window</dt>
-            <dd>{tokens(limits?.contextWindow)}</dd>
-          </div>
-          <div>
-            <dt>Model output ceiling</dt>
-            <dd>{tokens(limits?.maxOutputTokens)}</dd>
-          </div>
-          <div>
-            <dt>Automatic trigger · 75%</dt>
-            <dd>{tokens(automaticThreshold)}</dd>
-          </div>
-          <div>
-            <dt>Threshold for next step</dt>
-            <dd>
-              {settings.mode === 'disabled'
-                ? 'Disabled'
-                : tokens(effectiveThreshold)}
-            </dd>
-          </div>
-          <div>
-            <dt>Last step input · reported</dt>
-            <dd>{tokens(lastStep?.payload.usage?.inputTokens)}</dd>
-          </div>
-          <div>
-            <dt>Last step input · raw estimate</dt>
-            <dd>{tokens(lastStep?.payload.inputTokenEstimate)}</dd>
-          </div>
-        </dl>
-        <p className="hint">
-          The raw estimate excludes provider metadata. Compaction adjusts it
-          using the previous step’s reported usage when the model matches and
-          the prompt has not shrunk.
+      <CompactionDetails
+        state={state}
+        events={events}
+        complete={history.complete}
+        push={push}
+      />
+      {historyError ? (
+        <p role="alert" className="error">
+          {historyError}
         </p>
-        {limits === undefined ? (
-          <p className="hint">
-            {metadata?.status === 'unavailable'
-              ? 'Gateway did not report limits for this model. You can set a custom threshold.'
-              : metadata?.status === 'pending'
-                ? 'Model limits have been requested but are not resolved yet. The agent can continue.'
-                : 'Send a message to discover the model limits, or set a custom threshold first.'}
-          </p>
-        ) : null}
-        <SettingsForm
-          key={id}
-          agentId={agentId}
-          settings={settings}
-          closed={state.status === 'closed'}
-        />
-        <details className="compaction-history">
-          <summary>
-            Completed compactions <span>{completed.length}</span>
-          </summary>
-          {completed.length === 0 ? (
-            <p className="hint">
-              No completed compactions yet. Each completion will stay here after
-              reload.
-            </p>
-          ) : (
-            <ol>
-              {completed.map((event) => {
-                const trigger = requested.get(event.payload.generationId)
-                return (
-                  <li key={event.id}>
-                    <div className="compaction-marker">
-                      <strong>Context compacted · #{event.index}</strong>
-                      <time dateTime={event.createdAt.toISOString()}>
-                        {formatActivityTime(event.createdAt)}
-                      </time>
-                    </div>
-                    <p className="hint">
-                      {event.payload.throughIndex === undefined
-                        ? `Through message ${event.payload.throughMessageId}`
-                        : `Summarized through event #${event.payload.throughIndex}`}{' '}
-                      · {tokens(event.payload.usage?.inputTokens)} in ·{' '}
-                      {tokens(event.payload.usage?.outputTokens)} out
-                    </p>
-                    {trigger?.inputTokens === undefined ? null : (
-                      <p className="hint">
-                        Trigger: {tokens(trigger.inputTokens)} against a{' '}
-                        {tokens(trigger.thresholdTokens)} threshold. Raw
-                        estimate: {tokens(trigger.inputTokenEstimate)}.
-                      </p>
-                    )}
-                    {event.payload.summary ? (
-                      <details>
-                        <summary>View summary</summary>
-                        <pre>{event.payload.summary}</pre>
-                      </details>
-                    ) : null}
-                  </li>
-                )
-              })}
-            </ol>
-          )}
-        </details>
-      </div>
+      ) : null}
+      {!history.complete ? (
+        <button
+          type="button"
+          className="secondary"
+          disabled={history.loading}
+          onClick={() => void loadEarlier()}
+        >
+          {history.loading ? 'Loading history…' : 'Load earlier events'}
+        </button>
+      ) : null}
     </details>
   )
 }