experimental-a2 0.12.0 → 0.14.0

package/examples/playground/app/globals.css

@@ -1489,6 +1489,160 @@ button.danger {
 
 /* ── durable agent ──────────────────────────────────────────────── */
 
+.agent-compaction {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface);
+}
+
+.compaction-marker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.agent-compaction > summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.agent-compaction > summary::-webkit-details-marker {
+  display: none;
+}
+
+.compaction-chevron {
+  color: var(--muted);
+}
+
+.agent-compaction[open] .compaction-chevron {
+  transform: rotate(90deg);
+}
+
+.agent-compaction > summary > strong {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+.compaction-controls {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--line);
+}
+
+.agent-compaction code {
+  overflow-wrap: anywhere;
+}
+
+.compaction-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.8rem;
+  margin: 1rem 0;
+}
+
+.compaction-metrics dt {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.compaction-metrics dd {
+  margin: 0.2rem 0 0;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.compaction-form {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.compaction-form fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.compaction-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.75rem;
+}
+
+.compaction-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.compaction-history {
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--line);
+}
+
+.compaction-history summary {
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.compaction-history ol {
+  padding: 0;
+  list-style: none;
+}
+
+.compaction-history li + li {
+  border-top: 1px solid var(--line);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.compaction-marker {
+  font-size: 0.85rem;
+}
+
+.compaction-marker time {
+  color: var(--muted);
+}
+
+.compaction-history pre,
+.agent-compaction-event pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.agent-compaction-event {
+  padding: 0.65rem 0.85rem;
+  border: 1px dashed var(--line);
+  border-radius: 9px;
+  background: var(--code-bg);
+}
+
+.agent-compaction-event summary {
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.agent-compaction-event summary > span {
+  font-weight: 600;
+}
+
+.agent-compaction-event time {
+  display: inline-block;
+  margin-left: 0.75rem;
+}
+
 .agent-conversation {
   display: grid;
   overflow: hidden;
@@ -1645,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.12.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.12.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,
+  }
+}