experimental-a2 0.13.0 → 0.14.0

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

@@ -21,16 +21,13 @@ const tools = {
     inputSchema: chatPostInputSchema,
     execute: async ({ message }, { toolCallId }) => {
       const context = handlerContext(chatAgent)
-      if (context.event.type !== 'ai.tool.called') {
-        throw new Error('The chat post tool must execute automatically')
-      }
       context.signal.throwIfAborted()
       await context.session.append('post', {
         type: 'agent.message.posted',
         payload: {
           message,
-          generationId: context.event.payload.generationId,
-          responseMessageId: context.event.payload.messageId,
+          generationId: context.event.payload.call.generationId,
+          responseMessageId: context.event.payload.call.messageId,
           toolCallId,
         },
       })
@@ -118,23 +115,33 @@ export const authorizeChatOperation = (
       return false
     }
     return !(
-      event.type === 'ai.approval.responded' ||
-      event.type === 'ai.input.responded' ||
-      event.type === 'ai.message.interrupted' ||
-      event.type === 'ai.retry.requested'
+      event.type === 'ai.control.requested' &&
+      typeof event.payload === 'object' &&
+      event.payload !== null &&
+      'action' in event.payload &&
+      typeof event.payload.action === 'string' &&
+      [
+        'approval',
+        'input',
+        'interrupt',
+        'stop',
+        'retry',
+        'pause',
+        'resume',
+      ].includes(event.payload.action)
     )
   })
   return rejected === undefined
 }
 
-const toolCalledHandler = aiHandlers['ai.tool.called']
-if (toolCalledHandler === undefined) {
-  throw new Error('A2 AI handlers must include ai.tool.called')
+const toolExecutionHandler = aiHandlers['ai.tool.execution.requested']
+if (toolExecutionHandler === undefined) {
+  throw new Error('A2 AI handlers must include ai.tool.execution.requested')
 }
-const serializedToolCalledHandler =
-  typeof toolCalledHandler === 'function'
-    ? { handler: toolCalledHandler, lane: 'a2.chat.agent-tools' }
-    : { ...toolCalledHandler, lane: 'a2.chat.agent-tools' }
+const serializedToolExecutionHandler =
+  typeof toolExecutionHandler === 'function'
+    ? { handler: toolExecutionHandler, lane: 'a2.chat.agent-tools' }
+    : { ...toolExecutionHandler, lane: 'a2.chat.agent-tools' }
 
 export const chatScheduler =
   process.env.VERCEL || process.env.A2_QUEUES
@@ -147,7 +154,7 @@ export const chatServer = createServer({
   contract: chatAgent.contract,
   handlers: {
     ...aiHandlers,
-    'ai.tool.called': serializedToolCalledHandler,
+    'ai.tool.execution.requested': serializedToolExecutionHandler,
     'message.sent': {
       lane: 'a2.chat.ingress',
       handler: async (context) => {

package/examples/playground/app/globals.css

@@ -1799,6 +1799,185 @@ button.danger {
   flex: 0 0 auto;
 }
 
+.agent-queue {
+  margin: 0 1rem 0.85rem;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+.agent-queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.8rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.agent-queue-header h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.agent-queue-header h3 span {
+  min-width: 1.2rem;
+  padding: 0 0.3rem;
+  border-radius: 4px;
+  background: var(--line);
+  text-align: center;
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-queue-status {
+  color: var(--muted);
+  font-size: 0.7rem;
+}
+
+.agent-queue-status.paused {
+  color: #885b12;
+}
+
+.agent-queue-list {
+  max-height: 17rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  margin: 0;
+  padding: 0.15rem 0;
+}
+
+.agent-queue-item + .agent-queue-item {
+  border-top: 1px solid var(--line);
+}
+
+.agent-queue-row {
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.7rem;
+  padding: 0.25rem 0.55rem 0.25rem 0.8rem;
+}
+
+.agent-queue-number {
+  color: var(--muted);
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-queue-text {
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.83rem;
+}
+
+.agent-queue-actions {
+  display: flex;
+  gap: 0.1rem;
+}
+
+.agent-queue-actions button {
+  display: grid;
+  place-items: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.agent-queue-actions button:hover:not(:disabled),
+.agent-queue-actions button[aria-expanded='true'] {
+  background: var(--line);
+  color: var(--ink);
+  filter: none;
+}
+
+.agent-queue-actions button:disabled {
+  opacity: 0.22;
+}
+
+.agent-queue-actions .agent-queue-send {
+  color: var(--accent);
+}
+
+.agent-queue-actions .agent-queue-remove:hover:not(:disabled) {
+  background: #f8e8e5;
+  color: var(--danger);
+}
+
+.agent-queue-error {
+  margin: 0;
+  padding: 0 0.75rem 0.65rem 2.55rem;
+  font-size: 0.75rem;
+}
+
+.agent-queue-item.editing {
+  background: var(--surface);
+}
+
+.agent-queue-editor {
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0 0.75rem 0.65rem 2.55rem;
+  border: 0;
+  border-radius: 0;
+}
+
+.agent-queue-editor textarea {
+  width: 100%;
+  min-width: 0;
+  resize: vertical;
+  font-size: 0.83rem;
+  line-height: 1.5;
+}
+
+.agent-queue-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
+}
+
+.agent-queue-editor-actions span {
+  margin-right: auto;
+  color: var(--muted);
+  font-size: 0.65rem;
+}
+
+.agent-queue-editor-actions button {
+  padding: 0.3rem 0.6rem;
+  font-size: 0.72rem;
+}
+
+@media (pointer: coarse) {
+  .agent-queue-actions button {
+    width: 2.25rem;
+    height: 2.5rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .agent-queue-editor {
+    padding-left: 0.75rem;
+  }
+  .agent-queue-editor-actions span {
+    display: none;
+  }
+}
+
 .agent-form {
   margin: 0;
   padding: 1rem;

package/examples/playground/package.json

@@ -22,7 +22,7 @@
     "@vercel/sandbox": "^3.0.0",
     "ai": "^7.0.58",
     "codemirror": "^6.0.2",
-    "experimental-a2": "0.13.0",
+    "experimental-a2": "0.14.0",
     "ioredis": "^5.9.0",
     "next": "^16.3.0",
     "pg": "^8.16.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "experimental-a2",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Durable sync and reactions for things with a lifecycle: one event log, derived state, and live client per session.",
   "license": "MIT",
   "type": "module",

package/src/ai-client-state.ts

@@ -0,0 +1,185 @@
+import type { UIMessage } from 'ai'
+import type { AIState } from './ai.ts'
+import type { ControlCommand, InboxItem } from './ai-control.ts'
+
+export type QueueCommand<M extends UIMessage> = Extract<
+  ControlCommand<M>,
+  {
+    action:
+      | 'send'
+      | 'edit'
+      | 'move'
+      | 'remove'
+      | 'send-now'
+      | 'steer'
+      | 'pause'
+      | 'resume'
+  }
+>
+export type PendingQueueCommand<M extends UIMessage> = {
+  commandId: string
+  command: QueueCommand<M>
+}
+
+export const isQueueCommand = <M extends UIMessage>(
+  command: ControlCommand<M>,
+): command is QueueCommand<M> =>
+  command.action === 'send' ||
+  command.action === 'edit' ||
+  command.action === 'move' ||
+  command.action === 'remove' ||
+  command.action === 'send-now' ||
+  command.action === 'steer' ||
+  command.action === 'pause' ||
+  command.action === 'resume'
+
+const moveItem = <M extends UIMessage>({
+  items,
+  inputId,
+  beforeId,
+}: {
+  items: InboxItem<M>[]
+  inputId: string
+  beforeId: string | null
+}): InboxItem<M>[] => {
+  const from = items.findIndex((item) => item.id === inputId)
+  if (
+    from < 0 ||
+    inputId === beforeId ||
+    (beforeId !== null && !items.some((item) => item.id === beforeId))
+  )
+    return items
+  const next = [...items]
+  const [item] = next.splice(from, 1)
+  const to =
+    beforeId === null
+      ? next.length
+      : next.findIndex((entry) => entry.id === beforeId)
+  next.splice(to, 0, item!)
+  return next
+}
+
+export function projectAIClientState<M extends UIMessage>(
+  state: AIState<M>,
+): AIState<M> {
+  const pending = state.pendingQueueCommands ?? []
+  if (state.status === 'closed') return state
+  if (
+    pending.length === 0 &&
+    !state.inbox.items.some((item) => item.afterStepOf !== undefined)
+  )
+    return state
+  let messages = state.messages
+  let { items, paused } = state.inbox
+  let turnId = state.active?.turnId ?? null
+  let starting = false
+  let suspended =
+    state.active?.phase === 'paused' || state.active?.phase === 'pausing'
+  let messageIds: Set<string> | undefined
+  const show = (message: M): void => {
+    messageIds ??= new Set(messages.map((item) => item.id))
+    if (messageIds.has(message.id)) return
+    if (messages === state.messages) messages = state.messages.slice()
+    messages.push(message)
+    messageIds.add(message.id)
+  }
+  const admit = (): void => {
+    if (turnId !== null || paused || items.length === 0) return
+    let count = 0
+    for (const item of items) {
+      count += 1
+      show(item.message)
+      if (item.generate) {
+        turnId = item.id
+        starting = true
+        suspended = false
+        break
+      }
+    }
+    if (count > 0) items = items.slice(count)
+  }
+  for (const { command } of pending) {
+    switch (command.action) {
+      case 'send':
+      case 'steer': {
+        if (
+          items.some((item) => item.id === command.message.id) ||
+          turnId === command.message.id
+        )
+          break
+        const item = {
+          ...(command.action === 'steer'
+            ? { afterStepOf: command.turnId }
+            : {}),
+          id: command.message.id,
+          revision: 0,
+          message: command.message,
+          generate:
+            command.message.role === 'user' &&
+            (command.action === 'steer' || command.generate !== false),
+        }
+        items = command.action === 'steer' ? [item, ...items] : [...items, item]
+        break
+      }
+      case 'edit':
+        items = items.map((item) =>
+          item.id === command.message.id &&
+          item.revision === command.expectedRevision &&
+          item.message.role === command.message.role
+            ? { ...item, message: command.message }
+            : item,
+        )
+        break
+      case 'move':
+        items = moveItem({
+          items,
+          inputId: command.inputId,
+          beforeId: command.beforeId,
+        })
+        break
+      case 'remove':
+        items = items.filter((item) => item.id !== command.inputId)
+        break
+      case 'send-now': {
+        if (turnId !== command.turnId) break
+        const selected = items.find((item) => item.id === command.inputId)
+        if (!selected || selected.message.role !== 'user') break
+        items = items.map((item) =>
+          item.id === selected.id
+            ? {
+                ...item,
+                generate: true,
+                ...(turnId === null ? {} : { afterStepOf: turnId }),
+              }
+            : item,
+        )
+        items = moveItem({
+          items,
+          inputId: command.inputId,
+          beforeId: items[0]?.id ?? null,
+        })
+        break
+      }
+      case 'pause':
+        paused = true
+        if (command.when === 'now') suspended = true
+        break
+      case 'resume':
+        paused = false
+        suspended = false
+        break
+    }
+    admit()
+  }
+  items = items.filter((item) => {
+    if (item.afterStepOf === undefined) return true
+    show(item.message)
+    return false
+  })
+  return {
+    ...state,
+    messages,
+    inbox: { items, paused },
+    starting: starting && !suspended,
+  }
+}