experimental-a2 0.18.0 → 0.19.0

package/examples/playground/app/a0/a0.css

@@ -345,10 +345,140 @@ body:has(.a0-splitter[data-dragging]) iframe {
 .a0-text[data-role='user'] {
   align-self: flex-end;
   padding: 0.5rem 0.75rem;
+  overflow-wrap: anywhere;
   background: var(--shade);
   color: var(--ink);
 }
 
+/* ── attachments ─────────────────────────────────────────────────── */
+
+.a0-chat-drop {
+  display: contents;
+}
+
+/* Over the whole chat column, which positions it. */
+.a0-drop {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: color-mix(in oklab, var(--bg) 85%, transparent);
+  outline: 2px dashed var(--muted);
+  outline-offset: -0.75rem;
+  color: var(--bright);
+  pointer-events: none;
+}
+
+.a0-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  max-width: 85%;
+}
+
+.a0-files[data-role='user'] {
+  align-self: flex-end;
+  justify-content: flex-end;
+}
+
+.a0-files[data-role='assistant'] {
+  align-self: flex-start;
+}
+
+.a0-files img {
+  display: block;
+  max-width: 12rem;
+  max-height: 9rem;
+  border: 1px solid var(--line);
+  object-fit: cover;
+}
+
+.a0-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: inherit;
+  text-decoration: underline dotted var(--faint);
+  text-underline-offset: 3px;
+  vertical-align: bottom;
+}
+
+.a0-files .a0-file {
+  padding: 0.25rem 0.5rem;
+  border: 1px dashed var(--line);
+  text-decoration: none;
+}
+
+.a0-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem 0;
+  list-style: none;
+  font-size: 0.75rem;
+}
+
+.a0-attachments li {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--muted);
+}
+
+.a0-attachments li[data-kind='link'] {
+  height: 1.75rem;
+  padding-left: 0.5rem;
+  border: 1px dashed var(--line);
+}
+
+.a0-attachments li[data-kind='link'] span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a0-attachments img {
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  border: 1px solid var(--line);
+  object-fit: cover;
+}
+
+.a0-attachments li[data-kind='image'][data-uploading] img {
+  opacity: 0.5;
+}
+
+/* On the thumbnail's corners: the spinner, and the button that removes it. */
+.a0-attachments li[data-kind='image'] .a0-spin {
+  position: absolute;
+  top: calc(50% - 6px);
+  left: calc(1.5rem - 6px);
+}
+
+.a0-attachments li[data-kind='image'] .a0-icon-button {
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  background: var(--bg);
+}
+
+.a0-attachments li[data-kind='link'] .a0-icon-button {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .a0-text[data-role='assistant'] {
   align-self: flex-start;
   color: var(--muted);
@@ -428,6 +558,86 @@ body:has(.a0-splitter[data-dragging]) iframe {
   white-space: nowrap;
 }
 
+/* A tool step that shows what the call writes, folded once it's done. */
+.a0-tool {
+  align-self: stretch;
+  min-width: 0;
+}
+
+.a0-tool summary {
+  width: fit-content;
+  cursor: pointer;
+  list-style: none;
+}
+
+.a0-tool summary::-webkit-details-marker {
+  display: none;
+}
+
+.a0-tool summary:hover .a0-step-label {
+  color: var(--ink);
+}
+
+.a0-tool[data-failed] summary,
+.a0-tool[data-failed] .a0-step-label {
+  color: var(--danger);
+}
+
+.a0-tool-text {
+  max-height: 14rem;
+  margin: 0.375rem 0 0 1.125rem;
+  padding: 0.5rem 0.625rem;
+  overflow: auto;
+  background: color-mix(in oklab, var(--shade) 60%, transparent);
+  color: var(--muted);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  scrollbar-color: var(--faint) transparent;
+  scrollbar-width: thin;
+  white-space: pre-wrap;
+}
+
+/* Messages waiting for the turn to end, just above the composer. */
+.a0-queue {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0 0.75rem;
+  padding: 0;
+  list-style: none;
+  font-size: 0.75rem;
+}
+
+.a0-queue li {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
+  border: 1px dashed var(--line);
+  color: var(--muted);
+}
+
+.a0-queue span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a0-queue button {
+  height: 1.375rem;
+  padding: 0 0.375rem;
+}
+
+.a0-queue .a0-icon-button {
+  width: 1.375rem;
+  padding: 0;
+  color: var(--faint);
+}
+
 .a0-send-error {
   margin: 0;
   padding: 0 1.25rem 0.5rem;
@@ -533,16 +743,45 @@ body:has(.a0-splitter[data-dragging]) iframe {
   gap: 0.5rem;
 }
 
-.a0-queued {
-  color: var(--faint);
-  font-size: 0.75rem;
-}
-
 .a0-composer-actions button {
   height: 1.75rem;
   padding: 0 0.625rem;
 }
 
+.a0-composer-actions > .a0-icon-button {
+  padding: 0;
+}
+
+/* Pause or resume, then stop, as a player's buttons. */
+.a0-player {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.a0-composer-actions .a0-player button {
+  width: 1.75rem;
+  padding: 0;
+  color: var(--muted);
+}
+
+/* Send, or during a turn Steer or Queue with its mode on the chevron. */
+.a0-send {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+
+.a0-composer-actions .a0-send-mode {
+  width: 1.5rem;
+  padding: 0;
+}
+
+.a0-menu-check {
+  margin-right: 0.375rem;
+  vertical-align: -0.125rem;
+}
+
 .a0-ghost {
   color: var(--muted);
 }

package/examples/playground/app/a0/app-view.tsx

@@ -44,11 +44,12 @@ export function AppView({
       <section aria-label="Chat" className="a0-chat">
         <h1 className="a0-title">{name}</h1>
         <Chat
+          appId={appId}
           harness={harness}
           onPrompt={(text) =>
             prompted({
               id: appId,
-              name: titleFromPrompt(prompt ?? text),
+              name: titleFromPrompt(prompt || text),
               harness,
             })
           }

package/examples/playground/app/a0/attachments.ts

@@ -0,0 +1,133 @@
+'use client'
+import { upload as uploadToBlob } from '@vercel/blob/client'
+import type { FileUIPart } from 'ai'
+import { useEffect, useRef, useState } from 'react'
+import { isAttachmentUrl } from './model'
+
+/**
+ * A file the user attached. An image goes out with the message, for the
+ * model to see; any other file goes into the message's text as a link, which
+ * the agent downloads in its sandbox.
+ */
+export type Attachment = {
+  id: string
+  file: File
+  kind: 'image' | 'link'
+  /** Once Blob has it. */
+  part?: FileUIPart
+}
+
+export type Attachments = {
+  list: Attachment[]
+  add: (files: File[]) => void
+  /** Stops its upload, if it's still running. */
+  remove: (id: string) => void
+  clear: () => void
+  /** Puts back what a failed send took, before anything attached since. */
+  restore: (sent: Attachment[]) => void
+}
+
+const isImage = (file: File): boolean => file.type.startsWith('image/')
+
+/** Uploads straight to Blob, with a token from the app's uploads route. */
+async function upload({
+  appId,
+  file,
+  signal,
+}: {
+  appId: string
+  file: File
+  signal: AbortSignal
+}): Promise<FileUIPart> {
+  const blob = await uploadToBlob(`a0/${appId}/${file.name}`, file, {
+    access: 'public',
+    handleUploadUrl: '/a0/uploads',
+    clientPayload: appId,
+    ...(file.type ? { contentType: file.type } : {}),
+    abortSignal: signal,
+  }).catch((cause: unknown) => {
+    throw new Error(
+      `Couldn't upload ${file.name}: ${cause instanceof Error ? cause.message : String(cause)}`,
+      { cause },
+    )
+  })
+  return {
+    type: 'file',
+    mediaType: blob.contentType,
+    filename: file.name,
+    url: blob.url,
+  }
+}
+
+/** The line a file that isn't an image adds to the message. */
+const linkLine = (part: FileUIPart): string =>
+  `${part.filename ?? 'file'}: ${part.url}`
+
+/** One of the composer's link lines, as the file it names. */
+export function attachedLink(
+  line: string,
+): { name: string; url: string } | null {
+  const match = /^(.+): (https:\/\/\S+)$/.exec(line)
+  return match?.[1] && match[2] && isAttachmentUrl(match[2])
+    ? { name: match[1], url: match[2] }
+    : null
+}
+
+/** The files attached to the next message, each uploading as it's added. */
+export function useAttachments({
+  appId,
+  onLink,
+  onError,
+}: {
+  appId: string
+  /** A file that isn't an image finished uploading: its line for the text. */
+  onLink: (line: string) => void
+  onError: (cause: unknown) => void
+}): Attachments {
+  const [list, setList] = useState<Attachment[]>([])
+  // The uploads still running, which removing their file or leaving the app
+  // stops.
+  const uploads = useRef(new Map<string, AbortController>())
+  useEffect(() => {
+    const running = uploads.current
+    return () => {
+      for (const controller of running.values()) controller.abort()
+    }
+  }, [])
+  const drop = (id: string): void =>
+    setList((current) => current.filter((item) => item.id !== id))
+  const attach = async (file: File): Promise<void> => {
+    const id = crypto.randomUUID()
+    const kind = isImage(file) ? 'image' : 'link'
+    const controller = new AbortController()
+    uploads.current.set(id, controller)
+    setList((current) => [...current, { id, file, kind }])
+    try {
+      const part = await upload({ appId, file, signal: controller.signal })
+      if (kind === 'link') {
+        drop(id)
+        onLink(linkLine(part))
+      } else
+        setList((current) =>
+          current.map((item) => (item.id === id ? { ...item, part } : item)),
+        )
+    } catch (cause) {
+      drop(id)
+      if (!controller.signal.aborted) onError(cause)
+    } finally {
+      uploads.current.delete(id)
+    }
+  }
+  return {
+    list,
+    add: (files) => {
+      for (const file of files) void attach(file)
+    },
+    remove: (id) => {
+      uploads.current.get(id)?.abort()
+      drop(id)
+    },
+    clear: () => setList([]),
+    restore: (sent) => setList((current) => [...sent, ...current]),
+  }
+}