experimental-a2 0.19.0 → 0.21.1

package/examples/playground/app/a2slack/ui/Sidebar.tsx

@@ -0,0 +1,199 @@
+'use client'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { SiteNav } from '@/app/components/site-header'
+import { channelIdSchema } from '@/app/a2slack/model'
+import { useIdentity } from '../identity'
+import { useWorkspace } from '../sessions'
+import { useInboxPanel } from './InboxContext'
+import { useSearch } from './SearchContext'
+
+const MIN_WIDTH = 180
+const MAX_WIDTH = 400
+const WIDTH_KEY = 'a2slack-sidebar-width'
+
+function slugify(raw: string): string {
+  return raw
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/^-+/, '')
+    .slice(0, 32)
+}
+
+type SidebarSession = ReturnType<typeof useWorkspace> & {
+  state: NonNullable<ReturnType<typeof useWorkspace>['state']>
+}
+
+export function Sidebar(): ReactNode {
+  const session = useWorkspace()
+  if (session.state === undefined) {
+    const error =
+      'error' in session.connection ? session.connection.error : null
+    return (
+      <p className="a2slack-loading" role="status">
+        {error?.message ?? 'Loading…'}
+      </p>
+    )
+  }
+  return <SidebarView session={{ ...session, state: session.state }} />
+}
+
+function SidebarView({
+  session,
+}: Record<never, never> & { session: SidebarSession }): ReactNode {
+  const identity = useIdentity()
+  const search = useSearch()
+  const inbox = useInboxPanel()
+  const { state, push } = session
+  const pathname = usePathname()
+  const router = useRouter()
+  const [draft, setDraft] = useState('')
+  const [width, setWidth] = useState(224)
+  const [resizing, setResizing] = useState(false)
+  const startRef = useRef({ x: 0, width: 224 })
+
+  useEffect(() => {
+    const stored = Number(localStorage.getItem(WIDTH_KEY))
+    if (stored >= MIN_WIDTH && stored <= MAX_WIDTH) setWidth(stored)
+  }, [])
+
+  const create = (): void => {
+    const id = slugify(draft)
+    if (!identity || !channelIdSchema.safeParse(id).success) return
+    if (!state.channels.includes(id)) {
+      push({ type: 'channel.created', payload: { id, by: identity } }).catch(
+        () => {},
+      )
+    }
+    setDraft('')
+    search.clear()
+    inbox.setOpen(false)
+    router.push(`/a2slack/c/${id}`)
+  }
+
+  return (
+    <nav className="a2slack-sidebar" style={{ width }}>
+      <div className="site-header a2slack-head">
+        <SiteNav />
+      </div>
+      <form
+        className="a2slack-form a2slack-search"
+        role="search"
+        onSubmit={(e) => {
+          e.preventDefault()
+          search.submit()
+        }}
+      >
+        <input
+          ref={search.input}
+          className="a2slack-input"
+          aria-label="search messages"
+          enterKeyHint="search"
+          placeholder="search…"
+          value={search.query}
+          onChange={(e) => {
+            search.setQuery(e.target.value)
+            inbox.setOpen(false)
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== 'Escape') return
+            e.preventDefault()
+            search.clear()
+          }}
+        />
+      </form>
+      <div className="a2slack-list">
+        <button
+          type="button"
+          className="a2slack-channel a2slack-inbox-row"
+          aria-current={inbox.open ? 'page' : undefined}
+          aria-label={`inbox, ${inbox.unread} unread`}
+          onClick={() => {
+            search.clear()
+            inbox.setOpen(!inbox.open)
+          }}
+        >
+          <span>inbox</span>
+          {inbox.unread > 0 && (
+            <span className="a2slack-unread">{inbox.unread}</span>
+          )}
+        </button>
+        <span className="a2slack-label a2slack-label-spaced">channels</span>
+        {state.channels.map((id) => (
+          <Link
+            key={id}
+            href={`/a2slack/c/${id}`}
+            className="a2slack-channel"
+            aria-current={
+              !inbox.open && pathname === `/a2slack/c/${id}`
+                ? 'page'
+                : undefined
+            }
+            onClick={() => {
+              search.clear()
+              inbox.setOpen(false)
+            }}
+          >
+            #{id}
+          </Link>
+        ))}
+      </div>
+      <form
+        className="a2slack-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          create()
+        }}
+      >
+        <input
+          className="a2slack-input"
+          placeholder="+ new channel"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+        />
+      </form>
+      {identity && (
+        <div className="a2slack-you">
+          <span>you: {identity.name}</span>
+          <Link className="a2slack-lag-link" href="/a2slack/lag">
+            lag
+          </Link>
+        </div>
+      )}
+      <div
+        className="a2slack-handle"
+        onPointerDown={(e) => {
+          e.preventDefault()
+          startRef.current = { x: e.clientX, width }
+          setResizing(true)
+          e.currentTarget.setPointerCapture(e.pointerId)
+        }}
+        onPointerMove={(e) => {
+          if (!resizing) return
+          const next = Math.min(
+            MAX_WIDTH,
+            Math.max(
+              MIN_WIDTH,
+              startRef.current.width + e.clientX - startRef.current.x,
+            ),
+          )
+          setWidth(next)
+        }}
+        onPointerUp={(e) => {
+          if (!resizing) return
+          setResizing(false)
+          e.currentTarget.releasePointerCapture(e.pointerId)
+          localStorage.setItem(WIDTH_KEY, String(width))
+        }}
+      >
+        <span
+          className="a2slack-handle-line"
+          data-active={resizing || undefined}
+        />
+      </div>
+    </nav>
+  )
+}

package/examples/playground/app/a2slack/ui/ThreadPanel.tsx

@@ -0,0 +1,134 @@
+'use client'
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+import {
+  liveThread,
+  type ChatMessage,
+  type ThreadPage,
+} from '@/app/a2slack/model'
+import { useWorkspace } from '../sessions'
+import { Composer } from './Composer'
+import { useInboxPanel } from './InboxContext'
+import { MessageRow } from './MessageRow'
+
+/**
+ * One thread, read from `/a2slack/thread` when it opens and kept live from
+ * the workspace's events. Until the read answers it shows the root as the
+ * feed has it, if the feed has it.
+ */
+export function ThreadPanel({
+  channel,
+  rootId,
+  known,
+  onClose,
+}: {
+  channel: string
+  rootId: string
+  /** The root, live, when it's on the channel's newest page. */
+  known: ChatMessage | null
+  onClose: () => void
+}): ReactNode {
+  const { events } = useWorkspace()
+  const inbox = useInboxPanel()
+  const [page, setPage] = useState<ThreadPage | null>(null)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    const read = async (): Promise<void> => {
+      try {
+        const response = await fetch(
+          `/a2slack/thread?root=${encodeURIComponent(rootId)}`,
+          { signal: controller.signal },
+        )
+        if (!response.ok) throw new Error(`thread: ${response.status}`)
+        setPage((await response.json()) as ThreadPage)
+      } catch {
+        if (!controller.signal.aborted) setFailed(true)
+      }
+    }
+    void read()
+    return () => controller.abort()
+  }, [rootId])
+
+  const thread = useMemo(
+    () => (page ? liveThread(page, events, rootId) : null),
+    [page, events, rootId],
+  )
+  const root = thread?.root ?? known
+  const replies = thread?.replies ?? []
+
+  // Reading the thread reads its notifications, including any that arrive
+  // while it's open.
+  const unread =
+    inbox.items.find((item) => item.threadId === rootId)?.unread ?? 0
+  const { markRead } = inbox
+  useEffect(() => {
+    if (unread > 0) markRead(rootId)
+  }, [unread, rootId, markRead])
+
+  return (
+    <aside className="a2slack-thread">
+      <header className="a2slack-thread-header">
+        <span className="a2slack-thread-title">thread</span>
+        <button className="a2slack-close" onClick={onClose} title="close">
+          <X size={15} strokeWidth={1.75} />
+        </button>
+      </header>
+      <div className="a2slack-thread-scroll">
+        {root === null ? (
+          <div className="a2slack-divider">
+            <span>
+              {failed
+                ? "this thread didn't load"
+                : page
+                  ? 'this message is gone'
+                  : 'loading…'}
+            </span>
+            <span className="a2slack-divider-line" />
+          </div>
+        ) : (
+          <>
+            <MessageRow message={root} grouped={false} inThread />
+            <div className="a2slack-divider">
+              <span>
+                {root.replyCount === 0
+                  ? 'no replies yet'
+                  : `${root.replyCount} ${root.replyCount === 1 ? 'reply' : 'replies'}`}
+                {thread === null &&
+                  root.replyCount > 0 &&
+                  (failed ? " · these didn't load" : ' · loading…')}
+              </span>
+              <span className="a2slack-divider-line" />
+            </div>
+            {replies.map((reply, i) => {
+              const prev = replies[i - 1]
+              const grouped =
+                prev !== undefined &&
+                !prev.deleted &&
+                prev.author.id === reply.author.id &&
+                Date.parse(reply.at) - Date.parse(prev.at) < 5 * 60 * 1000
+              return (
+                <MessageRow
+                  key={reply.id}
+                  message={reply}
+                  grouped={grouped}
+                  inThread
+                />
+              )
+            })}
+          </>
+        )}
+      </div>
+      {root !== null && (
+        <Composer
+          channel={channel}
+          threadId={root.id}
+          placeholder="reply… or ask @bot"
+          autoFocus
+          compact
+        />
+      )}
+    </aside>
+  )
+}

package/examples/playground/app/a2slack/ui/useInbox.ts

@@ -0,0 +1,71 @@
+'use client'
+import { useEffect, useMemo, useState } from 'react'
+import { liveInbox, type InboxItem, type InboxPage } from '@/app/a2slack/model'
+import { useWorkspace } from '../sessions'
+
+export type Inbox = {
+  /** One per thread with news for `me`, newest first. */
+  items: InboxItem[]
+  /** Unread notifications across every thread. */
+  unread: number
+  /** The page hasn't answered yet. */
+  loading: boolean
+  error: string | null
+}
+
+/**
+ * `me`'s inbox: the page `/a2slack/inbox` read, kept live from the
+ * workspace's events after it. A new `me` reads a new page.
+ */
+export function useInbox(me: string | null): Inbox {
+  const { events } = useWorkspace()
+  const [read, setRead] = useState<{
+    me: string
+    page: InboxPage | null
+    error: string | null
+  } | null>(null)
+
+  useEffect(() => {
+    if (me === null) return
+    const controller = new AbortController()
+    const load = async (): Promise<void> => {
+      try {
+        const response = await fetch(
+          `/a2slack/inbox?user=${encodeURIComponent(me)}`,
+          { signal: controller.signal },
+        )
+        const body = (await response.json().catch(() => ({}))) as
+          InboxPage | { error?: string }
+        if (response.ok && 'items' in body) {
+          setRead({ me, page: body, error: null })
+          return
+        }
+        const error = 'error' in body ? body.error : undefined
+        setRead({
+          me,
+          page: null,
+          error: error ?? `the inbox failed (${response.status})`,
+        })
+      } catch {
+        if (controller.signal.aborted) return
+        setRead({ me, page: null, error: "the inbox didn't answer" })
+      }
+    }
+    void load()
+    return () => controller.abort()
+  }, [me])
+
+  const current = me !== null && read?.me === me ? read : null
+  const items = useMemo(
+    () =>
+      current?.page && me !== null ? liveInbox(current.page, events, me) : [],
+    [current, events, me],
+  )
+
+  return {
+    items,
+    unread: items.reduce((sum, item) => sum + item.unread, 0),
+    loading: me !== null && current === null,
+    error: current?.error ?? null,
+  }
+}

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