@athenaintel/react 0.60.1 → 0.61.0

package/README.md

@@ -318,6 +318,13 @@ function AddMenu() {
 - `useAthenaComposerActions()` is `null` outside a composer slot. Both default
   to `true`: a host that sets neither sees no change.
 
+### A welcome of your own
+
+`welcomeContent` replaces the greeting (`welcomeMessage`, `welcomeSubtext`) in
+the empty thread with what the host renders, in the same place: Athena Desktop
+draws one centred line there whose project name opens its project menu. Absent,
+the greeting shows as before.
+
 ### Composer slash commands
 
 `AthenaChat`'s `composer.slashCommands` (and `TiptapComposer`'s
@@ -1172,7 +1179,8 @@ const frontendTools = {
 
 Before the tool's first call in a conversation runs, `AthenaChat` shows a card
 above the composer ("The agent wants to save a note on this record.") with
-**Allow** and **Decline**. Allow covers the rest of that conversation; Decline
+**Allow** and **Decline**. Allow covers that tool for the rest of the
+conversation, and no other: a second marked tool asks for itself. Decline
 answers the agent with an error for the waiting calls, and a later call asks
 again. Calls to unmarked tools in the same turn still run. The answer is the
 person's own: nothing is remembered across a reload, and someone else signing
@@ -1180,13 +1188,17 @@ in to the same mounted chat is asked for themselves. The mark also reaches
 Athena (`requires_write`), which then never answers the call for the person
 while their tab is away.
 
+- The card names who is asking with the name you gave the agent
+  (`agentUi={{ agentName }}`), else "The agent".
 - A host with its own chat mounts `StatewireClientToolConsentCard` (also in
-  `@athenaintel/react/chat-ui/statewire`; `agentName` names who is asking), or
-  draws its own on `useClientToolWriteConsent()`: `{ request, allow, decline }`,
-  `request` holding the waiting tools (`name`, `summary`) or `null`.
+  `@athenaintel/react/chat-ui/statewire`; its `agentName` prop overrides the
+  name), or draws its own on `useClientToolWriteConsent()`:
+  `{ request, allow, decline }`, `request` holding the waiting tools (`name`,
+  `summary`) and that `agentName`, or `null`.
 - To ask in a dialog of your own instead, pass `confirmClientToolWrites` on
   `<AthenaProvider>`: it receives the same request plus a `signal`, and
-  resolves `true` (allow the conversation) or `false` (decline). The signal
+  resolves `true` (allow those tools for the conversation) or `false`
+  (decline). The signal
   aborts when the question has no call left to answer: close the dialog then
   (its promise need not settle, and a late answer is ignored). A confirmer
   that throws counts as a decline.
@@ -1213,6 +1225,129 @@ execute: async (args, { abortSignal }) => {
 },
 ```
 
+## Agent-drivable UI
+
+An app can let its agent work on the screen the person has open: read what is
+there, point at something, walk the person through steps and, when asked,
+operate a control. Everything the agent does is shown on the page as it
+happens: it scrolls there, outlines the element, says what it is doing and
+types character by character, so the person can follow and learn. Ask "how do
+I filter this list?" and the agent shows it on the list itself.
+
+The app decides what the agent can see and touch. Nothing is discovered: an
+element the app did not mark does not exist for the agent.
+
+```tsx
+import { AthenaProvider, agentRegion, agentTarget } from '@athenaintel/react';
+
+<AthenaProvider agentUi={{ agentName: 'Jichard' }} appId={publicAppId}>
+  <div {...agentRegion({ id: 'filters', label: 'Search and filters' })}>
+    <input
+      aria-label="Search investors"
+      {...agentTarget({ id: 'search', description: 'Narrows the table as it is typed into.' })}
+    />
+    <button {...agentTarget({ id: 'filters.clear' })}>Clear filters</button>
+  </div>
+  {rows.map((row) => (
+    <a key={row.id} href={row.href} {...agentTarget({ id: 'investor.open', key: row.id, label: row.name })}>
+      {row.name}
+    </a>
+  ))}
+  <AthenaChat />
+</AthenaProvider>
+```
+
+**Marking targets.** A target is a few `data-agent-*` attributes on the
+element itself, so any component that passes `data-*` props to its DOM node
+works, a plain web component included. `agentTarget(options)` writes them:
+
+| Option | What it says |
+|--------|--------------|
+| `id` | What the agent names the target by: lowercase words joined by `.`, `-` or `_`, stable across renders (`filters.stage`). An id that is not one leaves the element unmarked and logs why. |
+| `key` | Which one, when several targets share an id (a row's key). The agent names it `investor.open[asset_1]`. |
+| `label` | What a person calls it. Defaults to the element's accessible name (`aria-label`, its `<label>`, its placeholder, its text). |
+| `description` | One line for the agent on what it is for. |
+| `actions` | What the agent may do to it: `click`, `type`, `select`, `toggle`, `clear`. Defaults to what the element allows by nature (a button is clicked, a text field typed into). `[]`: it may only be pointed at. |
+| `danger` | Acting on it changes or destroys something: the person confirms every time, and only the actions you list are allowed. |
+| `sensitive` | Its value is never read back to the agent and never typed by it, and its own text never names it. Password, one-time-code and card fields are treated this way without being marked. |
+
+`agentRegion({ id, label })` names a part of the screen; its targets are
+grouped under it. For a control that clicks and keystrokes cannot drive (a
+custom select, a date picker), `useAgentTarget` takes `handlers` that replace
+the tool's own input, and `<AgentTarget>` marks the element inside it without
+touching that element's component:
+
+```tsx
+import { AgentTarget, useAgentTarget } from '@athenaintel/react';
+
+const stage = useAgentTarget({
+  id: 'filters.stage',
+  label: 'Stage filter',
+  handlers: { select: ({ option }) => setStage(option), options: () => STAGES, value: () => stage },
+});
+<StagePicker {...stage} />
+
+<AgentTarget id="deal.save" label="Save deal">
+  <Button onClick={save}>Save</Button>
+</AgentTarget>
+```
+
+**What the agent gets.** A fixed handful of tools that name targets by id,
+declared with every message like any `frontendTools` entry (so `appId` must
+be a recognised one):
+
+| Tool | What it does | Changes something |
+|------|--------------|-------------------|
+| `read_screen` | Lists the targets on screen: id, role, label, value, state and allowed actions, grouped by region. `region` and `query` narrow it; a long table lists its first 25 rows and counts the rest. | no |
+| `point_at` | Scrolls to a target, outlines it and shows a note beside it for a few seconds (5 by default, 30 at most). `spotlight` dims the rest of the page. | no |
+| `show_steps` | A walkthrough of up to 12 steps, each a target and a sentence or two. It advances by itself; the person can pause, go back, skip ahead or close it. | no |
+| `act_on` | Operates one target: scrolls there, outlines it, moves a cursor onto it, then clicks, types, chooses an option, flips a switch or clears a field, through the element's own events, so your handlers, validation and undo run as they do for a person. | yes |
+| `go_to` | Opens one of the pages you list. Declared only when you pass `routes` and `navigate`. | no |
+
+Your own tools stay the way to do a whole job (set these filters, open that
+record): they take one call and say what changed. The screen tools are for
+showing, and for the controls no tool of yours covers.
+
+**Asking first, and stopping.** `act_on` is marked `requiresWriteConsent`, so
+the chat's consent card asks before the agent first acts in a conversation
+(see [Frontend tools that ask first, and stop](#frontend-tools-that-ask-first-and-stop)).
+A `danger` target is asked about on the page itself, every time. The agent
+acts on the one element it named, as that element is at the moment of acting:
+several rows sharing an id must be named by key, and an element that changed
+while the person read the question (another row, disabled, now a password
+field) is refused. What a keyboard could not do, it does not do: a read-only
+field is not typed into, nor a field past its `maxlength`. The person's own
+click, keypress or scroll stops an action in flight and holds back whatever
+else the agent asked for in the same turn, as does stopping the run; Escape
+closes whatever the agent is showing, and the keyboard goes back to where it
+was. With `prefers-reduced-motion` the same steps play without motion: scrolls
+jump, the cursor lands in place and typed text arrives whole.
+
+**Options** (`agentUi={{ … }}`; `true` takes the defaults):
+
+| Option | Default | Purpose |
+|--------|---------|---------|
+| `agentName` | `"The agent"` | Who the overlay says is acting, and who the chat's consent card says is asking. |
+| `speed` | `"normal"` | `"quick"` halves the waits; `"instant"` removes them. |
+| `allowActing` | `true` | `false` declares no `act_on`: the agent looks and points only (a read-only or "ask" mode). |
+| `actConsent` | `"host"` | `"overlay"` asks on the page (once per visit) instead of through the chat's consent card. |
+| `routes`, `navigate` | none | The pages `go_to` may open, and how to open one. |
+| `describePage` | none | Facts about the page on screen that `read_screen` passes on (its name, the record open). |
+| `classNames` | none | Restyle the overlay's pieces: `mark`, `caption`, `cursor`, `tour`, `question`. |
+
+The overlay uses the SDK's own tokens (`primary`, `popover`, `border`), so it
+follows your theme. To wire the pieces yourself, or draw your own overlay, use
+`@athenaintel/react/agent-ui`: `useAgentUi(options)` returns `{ agentUi, tools }`
+(spread `tools` into `frontendTools`), `<AgentUiLayer agentUi={agentUi} />`
+draws the stage, and `agentUi.stage` (`getState`, `subscribe`) is everything
+the overlay shows, for a layer of your own.
+
+**What it does not do.** It works inside one document: a target in an iframe
+is not seen. A row a virtualized list has not rendered is not on the screen.
+Nothing is discovered without a mark. None of it is a permission boundary:
+the tools run in the person's tab as the signed-in person, and your backend's
+checks, or Athena's, decide what any click may do.
+
 ## Chat voice in AthenaChat
 
 `AthenaChat` includes realtime voice alongside dictation where the deployment
@@ -1246,6 +1381,12 @@ or a typed send. A host's own "Continue on…" control offers to send the
 conversation in voice mode only while `useChatVoiceEnabled({ enabled })` is
 true: the same workspace gate the composer's voice control uses.
 
+A host can fold voice into Send, as ChatGPT's composer does, with
+`composer={{ voiceInSend: true }}`: while the draft is empty and no run or call
+is live, one ink circle with a waveform starts the call; once the person types,
+Send takes its place. A call that is connecting or live keeps its own cancel or
+mute beside Send or Stop. Default `false`: voice and Send side by side.
+
 Use `<AthenaChat voice={false} />` to omit realtime voice in a host that cannot
 support it, or `voice={{ model: 'gemini-3.8-live' }}` to request a host-offered
 voice model. A custom `livekit` adapter and `onDiagnostic` observer are accepted
@@ -1409,6 +1550,17 @@ Both use the same bearer / API key as session creation. The full recipe
 template skill `voice-session-guide.md`. `createAthenaVoiceSession` is also
 exported if you hold the bridge state yourself.
 
+## What's new in 0.61.0
+
+**An app can let its agent work on the screen the person has open.** With `agentUi` on `<AthenaProvider>`, the agent reads the controls your app marks (`agentTarget`, `useAgentTarget`, `<AgentTarget>`), points at one, walks the person through steps on the page, and operates a control once the person allows it. Everything it does is drawn on the page: an outline, a note, a cursor. Nothing unmarked exists for the agent, and password-like fields are never read or typed into. See [Agent-drivable UI](#agent-drivable-ui); the rest of the module is `@athenaintel/react/agent-ui`.
+
+**A yes to one frontend tool is no longer a yes to another.** A tool marked `requiresWriteConsent` is asked about once per conversation, by itself. In 0.60.1, one Allow covered every marked tool for the rest of that conversation.
+
+Also in this release:
+- The consent card names the agent when the app names it (`agentUi={{ agentName }}`), and the request a host's own consent UI receives carries that `agentName`.
+- `AthenaChat` takes `welcomeContent`, the host's own empty-state welcome in place of the greeting, and `composer={{ voiceInSend: true }}`, one button for voice and Send.
+- The composer's border darkens a step while it holds focus, in place of the focus ring.
+
 ## What's new in 0.60.1
 
 **The `@` menu's asset icons draw in apps a computer serves.** In those apps, Marathon's `/_athena/auth` mints `appUrl` as the app's own origin, which serves no Athena icons. So 0.60.0 asked the app itself for the SVGs, and every row fell back to its type's Lucide icon. The icons, mailbox logos, chips and drive cards now load from the deployment's frontend there (`staging-app.athenaintel.com`, `app.athenaintel.com`), the same frontend "Open in Athena" links go to (`assetIconAppUrl`, on `athenaLinkAppUrl`).

package/dist/agent-ui/AgentTarget.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const radixUi = require("radix-ui");
+const useAgentTarget = require("./use-agent-target.cjs");
+function AgentTarget({ children, ...options }) {
+  const props = useAgentTarget.useAgentTarget(options);
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Slot.Root, { ...props, children });
+}
+exports.AgentTarget = AgentTarget;
+//# sourceMappingURL=AgentTarget.cjs.map

package/dist/agent-ui/AgentTarget.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTarget.cjs","sources":["../../src/agent-ui/AgentTarget.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from 'radix-ui';\nimport type { ReactNode } from 'react';\nimport { type UseAgentTargetOptions, useAgentTarget } from './use-agent-target';\n\nexport interface AgentTargetProps extends UseAgentTargetOptions {\n  /** The one element that becomes the target. It must pass `data-*` props to its DOM node. */\n  children: ReactNode;\n}\n\n/**\n * Make the element inside an agent target, without touching the element's own\n * component: its markup, styles and behaviour stay exactly as they are.\n *\n * ```tsx\n * <AgentTarget id=\"deal.save\" label=\"Save deal\">\n *   <Button onClick={save}>Save</Button>\n * </AgentTarget>\n * ```\n */\nexport function AgentTarget({ children, ...options }: AgentTargetProps) {\n  const props = useAgentTarget(options);\n  return <Slot.Root {...props}>{children}</Slot.Root>;\n}\n"],"names":["useAgentTarget","Slot"],"mappings":";;;;;AAqBO,SAAS,YAAY,EAAE,UAAU,GAAG,WAA6B;AACtE,QAAM,QAAQA,eAAAA,eAAe,OAAO;AACpC,wCAAQC,QAAAA,KAAK,MAAL,EAAW,GAAG,OAAQ,UAAS;AACzC;;"}

package/dist/agent-ui/AgentTarget.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type UseAgentTargetOptions } from './use-agent-target';
+export interface AgentTargetProps extends UseAgentTargetOptions {
+    /** The one element that becomes the target. It must pass `data-*` props to its DOM node. */
+    children: ReactNode;
+}
+/**
+ * Make the element inside an agent target, without touching the element's own
+ * component: its markup, styles and behaviour stay exactly as they are.
+ *
+ * ```tsx
+ * <AgentTarget id="deal.save" label="Save deal">
+ *   <Button onClick={save}>Save</Button>
+ * </AgentTarget>
+ * ```
+ */
+export declare function AgentTarget({ children, ...options }: AgentTargetProps): import("react").JSX.Element;

package/dist/agent-ui/AgentTarget.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { useAgentTarget } from "./use-agent-target.js";
+function AgentTarget({ children, ...options }) {
+  const props = useAgentTarget(options);
+  return /* @__PURE__ */ jsx(Slot.Root, { ...props, children });
+}
+export {
+  AgentTarget
+};
+//# sourceMappingURL=AgentTarget.js.map

package/dist/agent-ui/AgentTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTarget.js","sources":["../../src/agent-ui/AgentTarget.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from 'radix-ui';\nimport type { ReactNode } from 'react';\nimport { type UseAgentTargetOptions, useAgentTarget } from './use-agent-target';\n\nexport interface AgentTargetProps extends UseAgentTargetOptions {\n  /** The one element that becomes the target. It must pass `data-*` props to its DOM node. */\n  children: ReactNode;\n}\n\n/**\n * Make the element inside an agent target, without touching the element's own\n * component: its markup, styles and behaviour stay exactly as they are.\n *\n * ```tsx\n * <AgentTarget id=\"deal.save\" label=\"Save deal\">\n *   <Button onClick={save}>Save</Button>\n * </AgentTarget>\n * ```\n */\nexport function AgentTarget({ children, ...options }: AgentTargetProps) {\n  const props = useAgentTarget(options);\n  return <Slot.Root {...props}>{children}</Slot.Root>;\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,YAAY,EAAE,UAAU,GAAG,WAA6B;AACtE,QAAM,QAAQ,eAAe,OAAO;AACpC,6BAAQ,KAAK,MAAL,EAAW,GAAG,OAAQ,UAAS;AACzC;"}

package/dist/agent-ui/AgentUiLayer.cjs

@@ -0,0 +1,387 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const reactDom = require("react-dom");
+const lib_ownerDocument = require("../lib/owner-document.cjs");
+const themeStyleContext = require("../provider/theme-style-context.cjs");
+const contract = require("./contract.cjs");
+const cnfast = require("cnfast");
+const MARK_INSET_PX = 4;
+const CARD_GAP_PX = 10;
+const CARD_WIDTH_PX = 320;
+const CARD_ROOM_PX = 150;
+const EDGE_PX = 8;
+function useElementBox(element) {
+  const [box, setBox] = require$$0.useState(null);
+  require$$0.useEffect(() => {
+    const view = element == null ? void 0 : element.ownerDocument.defaultView;
+    if (!element || !view) {
+      setBox(null);
+      return;
+    }
+    let frame = 0;
+    let last = "";
+    const read = () => {
+      const rect = element.isConnected ? element.getBoundingClientRect() : null;
+      const next = rect ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height } : null;
+      const signature = next ? [next.top, next.left, next.width, next.height].map(Math.round).join(":") : "gone";
+      if (signature !== last) {
+        last = signature;
+        setBox(next);
+      }
+      frame = view.requestAnimationFrame(read);
+    };
+    read();
+    return () => view.cancelAnimationFrame(frame);
+  }, [element]);
+  return box;
+}
+function viewportOf(doc) {
+  const view = doc == null ? void 0 : doc.defaultView;
+  return { width: (view == null ? void 0 : view.innerWidth) ?? 1024, height: (view == null ? void 0 : view.innerHeight) ?? 768 };
+}
+function cardPosition({ box, viewport }) {
+  const width = Math.min(CARD_WIDTH_PX, viewport.width - EDGE_PX * 2);
+  if (!box) {
+    return { left: Math.max(EDGE_PX, (viewport.width - width) / 2), bottom: 24, width };
+  }
+  const left = Math.min(Math.max(box.left, EDGE_PX), Math.max(EDGE_PX, viewport.width - width - EDGE_PX));
+  const below = box.top + box.height + MARK_INSET_PX + CARD_GAP_PX;
+  if (below + CARD_ROOM_PX <= viewport.height || box.top < CARD_ROOM_PX) {
+    return { left, top: Math.min(below, Math.max(EDGE_PX, viewport.height - CARD_ROOM_PX)), width };
+  }
+  return { left, bottom: viewport.height - box.top + MARK_INSET_PX + CARD_GAP_PX, width };
+}
+const TONE_CLASS = {
+  point: "border-primary ring-primary/25",
+  act: "border-primary ring-primary/25 border-dashed",
+  ask: "border-amber-500 ring-amber-500/25"
+};
+function Mark({
+  box,
+  tone,
+  spotlight,
+  leaving,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "agent-ui-mark",
+      "data-tone": tone,
+      className: cnfast.cn(
+        "pointer-events-none fixed rounded-lg border-2 ring-4 transition-opacity duration-500 motion-reduce:transition-none",
+        TONE_CLASS[tone],
+        spotlight && "shadow-[0_0_0_100vmax_rgb(0_0_0/0.45)]",
+        leaving ? "opacity-0" : "opacity-100",
+        className
+      ),
+      style: {
+        top: box.top - MARK_INSET_PX,
+        left: box.left - MARK_INSET_PX,
+        width: box.width + MARK_INSET_PX * 2,
+        height: box.height + MARK_INSET_PX * 2
+      }
+    }
+  );
+}
+function Card({
+  box,
+  viewport,
+  fit = false,
+  className,
+  children,
+  ...props
+}) {
+  const { width, ...position } = cardPosition({ box, viewport });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: cnfast.cn(
+        "pointer-events-auto fixed rounded-xl border border-border bg-popover px-3.5 py-3 text-popover-foreground text-sm shadow-lg",
+        className
+      ),
+      style: fit ? { ...position, maxWidth: width } : { ...position, width },
+      children
+    }
+  );
+}
+function Cursor({
+  box,
+  presses,
+  glideMs,
+  className
+}) {
+  const x = box.left + box.width / 2;
+  const y = box.top + box.height / 2;
+  const [arrived, setArrived] = require$$0.useState(false);
+  require$$0.useEffect(() => {
+    const frame = requestAnimationFrame(() => setArrived(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "agent-ui-cursor",
+      className: cnfast.cn("pointer-events-none fixed top-0 left-0 motion-reduce:transition-none", className),
+      style: {
+        transform: `translate(${arrived ? x : x + 48}px, ${arrived ? y : y + 48}px)`,
+        transitionProperty: "transform",
+        transitionTimingFunction: "ease-out",
+        transitionDuration: `${glideMs}ms`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer2Icon, { className: "size-5 fill-primary text-primary-foreground drop-shadow" }),
+        presses > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-testid": "agent-ui-press",
+            className: "-top-2 -left-2 absolute size-6 animate-ping rounded-full bg-primary/50 [animation-iteration-count:1]"
+          },
+          presses
+        ) : null
+      ]
+    }
+  );
+}
+function TourCard({
+  tour,
+  stage,
+  box,
+  viewport,
+  className
+}) {
+  const step = tour.steps[tour.index];
+  const last = tour.index >= tour.steps.length - 1;
+  const progressRef = require$$0.useRef(null);
+  const advancing = tour.playing && !tour.searching;
+  const durationMs = (step == null ? void 0 : step.durationMs) ?? 0;
+  require$$0.useEffect(() => {
+    const bar = progressRef.current;
+    if (!bar || typeof bar.animate !== "function") return;
+    if (!advancing) return;
+    const animation = bar.animate([{ width: "0%" }, { width: "100%" }], {
+      duration: durationMs,
+      fill: "forwards",
+      easing: "linear"
+    });
+    return () => animation.cancel();
+  }, [advancing, durationMs, tour.index]);
+  if (!step) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      box,
+      viewport,
+      className,
+      role: "dialog",
+      "aria-label": tour.title ?? "Walkthrough",
+      "data-testid": "agent-ui-tour",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "min-w-0 truncate text-muted-foreground text-xs", children: [
+            tour.title ? `${tour.title} · ` : "",
+            "Step ",
+            tour.index + 1,
+            " of ",
+            tour.steps.length
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close the walkthrough",
+              onClick: () => stage.endTour(),
+              className: "shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "break-words pt-1.5 leading-snug", "data-testid": "agent-ui-tour-text", children: step.text }),
+        !tour.searching && !tour.element ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pt-1 text-muted-foreground text-xs", children: "This one is not on the page you have open." }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2.5 h-0.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: progressRef, className: "h-full w-0 bg-primary" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous step",
+              disabled: tour.index === 0,
+              onClick: () => stage.tourBack(),
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": tour.playing ? "Pause the walkthrough" : "Play the walkthrough",
+              onClick: () => stage.tourTogglePlaying(),
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: tour.playing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => stage.tourNext(),
+              className: "ml-auto flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-medium text-primary-foreground text-xs transition-colors hover:bg-primary/90",
+              children: [
+                last ? "Done" : "Next",
+                last ? null : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-3.5" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function QuestionCard({
+  question,
+  stage,
+  box,
+  viewport,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      box,
+      viewport,
+      className,
+      role: "alertdialog",
+      "aria-label": question.title,
+      "data-testid": "agent-ui-question",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "break-words font-semibold leading-snug", children: question.title }),
+        question.body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "break-words pt-1 text-muted-foreground leading-snug", children: question.body }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => stage.answer(true),
+              className: "rounded-md bg-primary px-2.5 py-1 font-medium text-primary-foreground text-xs transition-colors hover:bg-primary/90",
+              children: question.allowLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => stage.answer(false),
+              className: "rounded-md border border-border px-2.5 py-1 font-medium text-xs transition-colors hover:bg-muted",
+              children: question.declineLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AgentUiLayer({ agentUi, classNames }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { stage } = agentUi;
+  const state = require$$0.useSyncExternalStore(stage.subscribe, stage.getState, stage.getState);
+  const ownerDocument = lib_ownerDocument.useOwnerDocument();
+  const portalContainer = lib_ownerDocument.usePortalContainer();
+  const themeStyle = themeStyleContext.useAthenaThemeStyle();
+  const tourElement = ((_a = state.tour) == null ? void 0 : _a.element) ?? null;
+  const markedElement = state.tour ? tourElement : ((_b = state.mark) == null ? void 0 : _b.element) ?? null;
+  const markBox = useElementBox(markedElement);
+  const cursorBox = useElementBox(((_c = state.cursor) == null ? void 0 : _c.element) ?? null);
+  const questionBox = useElementBox(((_d = state.question) == null ? void 0 : _d.element) ?? null);
+  const showing = state.tour !== null || state.mark !== null;
+  require$$0.useEffect(() => {
+    if (!showing || !ownerDocument) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      stage.endTour();
+      stage.clearMark();
+    };
+    ownerDocument.addEventListener("keydown", onKeyDown);
+    return () => ownerDocument.removeEventListener("keydown", onKeyDown);
+  }, [ownerDocument, showing, stage]);
+  const container = portalContainer ?? (ownerDocument == null ? void 0 : ownerDocument.body);
+  if (!container) return null;
+  const idle = !state.mark && !state.cursor && !state.tour && !state.question;
+  if (idle) return null;
+  const viewport = viewportOf(ownerDocument);
+  const caption = state.tour ? null : ((_e = state.mark) == null ? void 0 : _e.caption) ?? null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...{ [contract.AGENT_ATTR.layer]: "" },
+        className: "athena-sdk athena-sdk-chrome pointer-events-none fixed inset-0 z-[2147483000]",
+        style: themeStyle,
+        children: [
+          markBox && (state.tour || state.mark) ? /* @__PURE__ */ jsxRuntime.jsx(
+            Mark,
+            {
+              box: markBox,
+              tone: state.tour ? "point" : ((_f = state.mark) == null ? void 0 : _f.tone) ?? "point",
+              spotlight: state.tour ? false : ((_g = state.mark) == null ? void 0 : _g.spotlight) ?? false,
+              leaving: state.tour ? false : ((_h = state.mark) == null ? void 0 : _h.leaving) ?? false,
+              className: classNames == null ? void 0 : classNames.mark
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", children: caption && markBox && !state.question ? /* @__PURE__ */ jsxRuntime.jsx(
+            Card,
+            {
+              box: markBox,
+              viewport,
+              fit: true,
+              className: cnfast.cn(
+                "pointer-events-none transition-opacity duration-500 motion-reduce:transition-none",
+                ((_i = state.mark) == null ? void 0 : _i.leaving) ? "opacity-0" : "opacity-100",
+                classNames == null ? void 0 : classNames.caption
+              ),
+              "data-testid": "agent-ui-caption",
+              children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "break-words leading-snug", children: caption })
+            }
+          ) : null }),
+          state.tour ? /* @__PURE__ */ jsxRuntime.jsx(
+            TourCard,
+            {
+              tour: state.tour,
+              stage,
+              box: markBox,
+              viewport,
+              className: classNames == null ? void 0 : classNames.tour
+            }
+          ) : null,
+          state.question ? /* @__PURE__ */ jsxRuntime.jsx(
+            QuestionCard,
+            {
+              question: state.question,
+              stage,
+              box: questionBox,
+              viewport,
+              className: classNames == null ? void 0 : classNames.question
+            }
+          ) : null,
+          state.cursor && cursorBox ? /* @__PURE__ */ jsxRuntime.jsx(
+            Cursor,
+            {
+              box: cursorBox,
+              presses: state.cursor.presses,
+              glideMs: agentUi.pace().cursorGlideMs,
+              className: classNames == null ? void 0 : classNames.cursor
+            }
+          ) : null
+        ]
+      }
+    ),
+    container
+  );
+}
+exports.AgentUiLayer = AgentUiLayer;
+exports.cardPosition = cardPosition;
+//# sourceMappingURL=AgentUiLayer.cjs.map