@nxisai/agent-harness 0.6.0 → 0.8.0

package/src/ui/agent-fullscreen.ts

@@ -41,16 +41,33 @@ import {
 import type { ModelProvider } from '../providers/types.js';
 import { connectTools } from '../harness/tools/source.js';
 import {
+  chooserOf,
+  formOptions,
+  formsFor,
   handoffFor,
   isSiteTool,
   withoutSiteSuffix,
   HANDOFF_RESULT,
 } from '../harness/tools/action-tools.js';
+import { resolveSlots, type Slot } from '../harness/slots.js';
+import { isHandoffTool } from '../handoff/tools.js';
+import {
+  actionCard,
+  fieldLabel,
+  fieldsFromSlots,
+  ACTION_CARD_CSS,
+  type ActionHandlers,
+  type ActionItem,
+  type ActionStep,
+} from './action-card.js';
+import { resultsAnswer, RESULTS_ANSWER_CSS, type AnswerCard } from './result-pick.js';
+import { extractRecords, openStatus, recordFacts } from '../harness/records.js';
+import type { ResultPick } from '../harness/recommend.js';
 import { resumePendingAction } from '../harness/tools/resume.js';
 import { savePendingVisit, setConversationSource, takePendingVisit } from '../harness/tools/pending-action.js';
 import { pageForEntity, type SitePage } from '../harness/tools/site-pages.js';
 import { OPEN_PAGE_TOOL } from '../harness/tools/open-page.js';
-import { onJourneyChange, recordStep, restoreJourney, type AgentStep } from '../harness/steps.js';
+import { currentJourney, onJourneyChange, recordStep, restoreJourney, type AgentStep } from '../harness/steps.js';
 import { viewJourney } from './journey.js';
 import { AgentCoordinator } from '../harness/router/coordinator.js';
 import {
@@ -59,6 +76,7 @@ import {
   type HandoffConfig,
   type HandoffEvent,
   type HandoffSession,
+  type HandoffTarget,
 } from '../handoff/controller.js';
 import { registerHandoffTools, HANDOFF_SESSION_RESULT } from '../handoff/tools.js';
 import type { RouteRule } from '../harness/router/rules.js';
@@ -151,6 +169,12 @@ const fmt = (n: number) => n.toLocaleString();
  * be disabled under `prefers-reduced-motion` while the bubble still reads as
  * pending. The label and byte spans are filled per phase and hidden while empty.
  */
+/**
+ * How long the running-step line stays once the conversation moves on past
+ * its card. A glance's worth: long enough to notice and open it.
+ */
+const JSTATUS_TIMEOUT_MS = 10_000;
+
 const THINKING_MARKUP =
   '<span class="think-row">' +
   '<span class="think-dots" aria-hidden="true"><i></i><i></i><i></i></span>' +
@@ -309,6 +333,14 @@ interface ResultCard {
   id?: string;
   /** The page on this site the record came from, when it can be told. */
   page?: { url: string; label: string };
+  /** The rating and how many reviews it rests on. */
+  stars?: number;
+  reviews?: number;
+  /** Open or closed when the search ran: "Open now · 24/7", "Opens 7am". */
+  status?: { open: boolean; label: string };
+  phone?: string;
+  /** What the record states, short, for comparing it. */
+  facts?: string[];
 }
 
 type ThreadItem =
@@ -317,7 +349,7 @@ type ThreadItem =
   | { kind: 'trace'; name: string; args: Record<string, unknown>; text: string; isError: boolean; count?: number }
   | { kind: 'route'; agent: string; via: string }
   | { kind: 'detail'; title: string; note: string; rows: DetailRow[] }
-  | { kind: 'results'; title: string; note: string; cards: ResultCard[] }
+  | { kind: 'results'; title: string; note: string; cards: ResultCard[]; pick?: ResultPick }
   | { kind: 'metrics'; rounds: MetricsRound[] }
   | { kind: 'form' }
   /** A turn the person called off. Kept so the thread explains its own gap. */
@@ -331,7 +363,9 @@ type ThreadItem =
   /** Something a handoff target said: an agent, or a person at a desk. */
   | { kind: 'remote'; from: string; fromKind: 'agent' | 'person'; text: string }
   /** Where a handoff stands, as a quiet line in the thread. */
-  | { kind: 'handoff'; text: string; tone: 'info' | 'done' | 'error' };
+  | { kind: 'handoff'; text: string; tone: 'info' | 'done' | 'error' }
+  /** A form or a handoff, asked for, confirmed and sent in one card. See ./action-card.ts. */
+  | ActionItem;
 
 /**
  * A handoff's state as a line in the thread, or '' for a state the bar alone
@@ -457,6 +491,12 @@ class NxisAgentFullscreen extends HTMLElement {
   };
   /** Watches whether the running journey's card is on screen. */
   private _journeyObserver: IntersectionObserver | null = null;
+  /** The journey the status line is about, while one is running. */
+  private _jstatusJourney: string | null = null;
+  /** Journeys whose status line was opened once or timed out: it does not come back. */
+  private _jstatusDismissed = new Set<string>();
+  /** Dismisses the status line a while after the thread moves on past the card. */
+  private _jstatusTimer: ReturnType<typeof setTimeout> | null = null;
   /** The turn loop. This element is only its renderer. */
   private _harness!: AgentHarness;
   /** Built only when the host defines agents — otherwise there is one harness. */
@@ -466,6 +506,22 @@ class NxisAgentFullscreen extends HTMLElement {
   private _fallbackAgent = '';
   /** The live ask/confirm surface, if one is open. */
   private _prompt: MountedSurface | null = null;
+  /**
+   * The action card still waiting on the visitor or a result, and what it can
+   * do: the harness's ask or confirm request, or, after a page change, a call
+   * of the widget's own.
+   */
+  private _live: {
+    item: ActionItem;
+    tool: ModelContextToolInfo;
+    ask?: AskRequest;
+    confirm?: ConfirmRequest;
+    run?: (values: Record<string, unknown>) => Promise<void>;
+    sent: boolean;
+    declining: boolean;
+  } | null = null;
+  /** Handoff targets as the relay last reported them, for a card's availability line. */
+  private _handoffTargets = new Map<string, HandoffTarget>();
   private _profile: Record<string, string>;
   private _persistPrefs = false;
   private _systemPrompt: string = DEFAULT_SYSTEM_PROMPT;
@@ -579,13 +635,7 @@ class NxisAgentFullscreen extends HTMLElement {
 
     // The element renders; the harness decides. Everything from choosing a
     // tool to running it happens behind harness.turn().
-    this._harness = new AgentHarness({
-      provider: this.provider,
-      toolSource: this.toolSource,
-      renderer: this._renderer(),
-      profile: (schema) => this._profileForSchema(schema as JsonSchema),
-      onMessages: () => this._saveConversations(),
-    });
+    this._harness = this._singleHarness();
 
     // Preferences are supplied by the host page through `element.preferences`.
     // Anything a previous build persisted is picked up so upgrading does not
@@ -620,6 +670,8 @@ class NxisAgentFullscreen extends HTMLElement {
     this._els.jstatus.addEventListener('click', () => {
       const cards = this._els.thread.querySelectorAll<HTMLElement>('.journey.is-running');
       cards[cards.length - 1]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      // One look is what it is for; after that it would only be in the way.
+      this._dismissJourneyStatus();
     });
 
     // Whoever builds the tools, a call that leaves this page reports back to
@@ -715,6 +767,7 @@ class NxisAgentFullscreen extends HTMLElement {
     this._offJourney = null;
     this._journeyObserver?.disconnect();
     this._journeyObserver = null;
+    this._clearJourneyStatusTimer();
     // Streams stop with the element; the handoff itself stays saved, and resumes when it returns.
     this._handoff?.dispose();
   }
@@ -903,7 +956,10 @@ class NxisAgentFullscreen extends HTMLElement {
       else if (it.kind === 'detail') this._els.thread.appendChild(this._detailEl(it));
       else if (it.kind === 'results') this._els.thread.appendChild(this._resultsEl(it));
       else if (it.kind === 'metrics') this._els.thread.appendChild(this._metricsEl(it));
-      else if (it.kind === 'journey') this._els.thread.appendChild(this._journeyEl(it));
+      else if (it.kind === 'journey') {
+        // A request drawn as an action card shows its own steps.
+        if (!conv.items.some((a) => a.kind === 'action' && a.id === it.id)) this._els.thread.appendChild(this._journeyEl(it));
+      } else if (it.kind === 'action') this._paintAction(it);
       else if (it.kind === 'remote' || it.kind === 'handoff') this._paintHandoffItem(it);
     }
     this._scroll();
@@ -1288,6 +1344,15 @@ class NxisAgentFullscreen extends HTMLElement {
       conv.items.push(item);
     }
 
+    // A request with an action card: the steps belong in the card.
+    const action = conv.items.find((it): it is ActionItem => it.kind === 'action' && it.id === view.id);
+    if (action) {
+      this._actionFollows(action, all);
+      this._watchRunningJourney();
+      this._saveConversations();
+      return;
+    }
+
     if (conv.id === this._activeId && this._els?.thread) {
       const fresh = this._journeyEl(item);
       const old = this._els.thread.querySelector(`[data-journey="${CSS.escape(view.id)}"]`);
@@ -1319,7 +1384,12 @@ class NxisAgentFullscreen extends HTMLElement {
     if (!bar) return;
     const cards = this._els.thread.querySelectorAll<HTMLElement>('.journey.is-running');
     const card = cards[cards.length - 1];
-    if (!card || typeof IntersectionObserver === 'undefined') {
+    const id = card?.dataset.journey ?? null;
+    if (id !== this._jstatusJourney) {
+      this._clearJourneyStatusTimer();
+      this._jstatusJourney = id;
+    }
+    if (!card || !id || this._jstatusDismissed.has(id) || typeof IntersectionObserver === 'undefined') {
       bar.hidden = true;
       return;
     }
@@ -1333,6 +1403,36 @@ class NxisAgentFullscreen extends HTMLElement {
     this._journeyObserver.observe(card);
   }
 
+  /**
+   * The thread grew: start the clock on the status line.
+   *
+   * A journey can stay running while the conversation goes on without it, and a
+   * line that spins through all of that says nothing. So once new messages
+   * arrive, the line gets a while longer, then goes.
+   */
+  private _noteThreadGrew(): void {
+    const id = this._jstatusJourney;
+    if (!id || this._jstatusTimer || this._jstatusDismissed.has(id)) return;
+    this._jstatusTimer = setTimeout(() => {
+      this._jstatusTimer = null;
+      this._dismissJourneyStatus();
+    }, JSTATUS_TIMEOUT_MS);
+  }
+
+  /** Hide the status line for the running journey, for good. */
+  private _dismissJourneyStatus(): void {
+    this._clearJourneyStatusTimer();
+    if (this._jstatusJourney) this._jstatusDismissed.add(this._jstatusJourney);
+    this._journeyObserver?.disconnect();
+    this._journeyObserver = null;
+    if (this._els?.jstatus) this._els.jstatus.hidden = true;
+  }
+
+  private _clearJourneyStatusTimer(): void {
+    if (this._jstatusTimer) clearTimeout(this._jstatusTimer);
+    this._jstatusTimer = null;
+  }
+
   private _paintToolResult(name: string, text: string, isError: boolean): HTMLElement {
     this._clearEmpty();
     const el = this._toolEl(name, text, isError);
@@ -1391,6 +1491,7 @@ class NxisAgentFullscreen extends HTMLElement {
     const el = this._paintMsg(role, text, conv.items.length - 1);
     this._saveConversations();
     this._scroll();
+    this._noteThreadGrew();
     return el;
   }
 
@@ -1411,6 +1512,7 @@ class NxisAgentFullscreen extends HTMLElement {
     // without the focus moving to it.
     el.setAttribute('aria-live', 'polite');
     this._scroll();
+    this._noteThreadGrew();
 
     const setLabel = (label?: string) => {
       const node = el.querySelector('.think-label');
@@ -1552,11 +1654,13 @@ class NxisAgentFullscreen extends HTMLElement {
       message: (role, text) => this._appendMsg(role, text),
       streaming: (): HStreamingBubble => this._appendStreaming(),
       status: (text, isError) => this._setStatus(text, isError),
-      ask: (req) => this._renderAsk(req),
-      confirm: (req) => this._renderConfirm(req),
-      results: (tool, res) => {
+      inlinePrompts: !this._classicPrompts,
+      ask: (req) => (this._usesCard(req.tool) ? this._cardAsk(req) : this._renderAsk(req)),
+      confirm: (req) => (this._usesCard(req.tool) ? this._cardConfirm(req) : this._renderConfirm(req)),
+      left: (tool, destination) => this._cardLeft(tool, destination),
+      results: (tool, res, extra) => {
         const conv = this._active();
-        const item = this._buildResultsItem(tool, res);
+        const item = this._buildResultsItem(tool, res, extra?.pick);
         // A read that answers in words — "you are on the home page", "already open" — has no records
         // to draw, and an empty result card reading "No results found." contradicts the answer it
         // just gave. Say what it said.
@@ -1575,6 +1679,7 @@ class NxisAgentFullscreen extends HTMLElement {
         this._scroll();
       },
       detail: (tool, values, text) => {
+        if (this._cardDone(tool, values, text)) return;
         const conv = this._active();
         const item = this._buildDetailItem(tool, values, text);
         conv?.items.push(item);
@@ -1598,8 +1703,23 @@ class NxisAgentFullscreen extends HTMLElement {
         this._saveConversations();
         this._scroll();
       },
-      toolError: (tool, message) => this._paintToolResult(tool.name, message, true),
-      dismissPrompt: () => this._dismissPrompt(),
+      toolError: (tool, message) => {
+        if (this._cardFailed(tool, message)) return;
+        this._paintToolResult(tool.name, message, true);
+      },
+      dismissPrompt: () => {
+        // A sent card stays, and shows the steps; one never sent says so.
+        const live = this._live;
+        if (live) {
+          if (live.sent && (live.item.stage === 'review' || live.item.stage === 'collect')) {
+            live.item.stage = 'working';
+            this._paintAction(live.item);
+            this._saveConversations();
+          }
+          return;
+        }
+        this._dismissPrompt();
+      },
       // The harness says when stopping stops being possible, because it is the
       // part that knows a tool has been invoked. Once a call is out, offering
       // to stop would be offering to un-send a booking.
@@ -1748,6 +1868,390 @@ class NxisAgentFullscreen extends HTMLElement {
     this._scroll();
   }
 
+  // ── Action cards ─────────────────────────────────────────────────────────────
+
+  /** `prompt-style="classic"`: the separate ask, review and submitted cards of earlier versions. */
+  private get _classicPrompts(): boolean {
+    return this.getAttribute('prompt-style') === 'classic';
+  }
+
+  /** Whether a prompt for this tool is drawn as an action card: every write and handoff. */
+  private _usesCard(tool: ModelContextToolInfo): boolean {
+    return !this._classicPrompts && (isHandoffTool(tool.name) || !tool.annotations?.readOnlyHint);
+  }
+
+  /** Details are missing: the card asks for them, beside what it already has. */
+  private _cardAsk(req: AskRequest): void {
+    const needed = new Set(req.plan.steps.flatMap((st) => st.slots.map((sl) => sl.name)));
+    const item = this._liveCard(req.tool, req.resolution.all, req.resolution.values, needed);
+    this._live!.ask = req;
+    this._live!.confirm = undefined;
+    item.stage = 'collect';
+    this._paintAction(item);
+    this._saveConversations();
+  }
+
+  /** Everything is known: the card says what will happen, and waits for Send. */
+  private _cardConfirm(req: ConfirmRequest): void {
+    const all = resolveSlots(toolSchema(req.tool), { modelArgs: req.values }).all;
+    const item = this._liveCard(req.tool, all, req.values, new Set(), req.destination);
+    this._live!.confirm = req;
+    item.stage = 'review';
+    this._paintAction(item);
+    this._saveConversations();
+  }
+
+  /**
+   * The live card for a tool's prompt: the one already open for this request,
+   * or a new one, which takes over from the journey card of the same request.
+   */
+  private _liveCard(
+    tool: ModelContextToolInfo,
+    slots: Slot[],
+    values: Record<string, unknown>,
+    needed: Set<string>,
+    destination?: string,
+  ): ActionItem {
+    const conv = this._active()!;
+    const id = currentJourney() ?? `a${Date.now().toString(36)}`;
+    const live = this._live;
+    const described = this._describeAction(tool, values, destination);
+    const fields = fieldsFromSlots(this._narrowed(tool, slots, values), values, { needed, hidden: described.hidden, labels: described.labels });
+
+    if (live && live.item.id === id && live.tool.name === tool.name) {
+      // The same request, a step on: keep what was typed, and anything the harness has since learned.
+      live.item.fields = fields.map((f) => {
+        const had = live.item.fields.find((o) => o.name === f.name);
+        return had && f.value === '' ? { ...f, value: had.value } : f;
+      });
+      Object.assign(live.item, described.view);
+      live.tool = tool;
+      return live.item;
+    }
+
+    // A request left waiting is replaced by the new one.
+    if (live && (live.item.stage === 'collect' || live.item.stage === 'review')) {
+      live.item.stage = 'declined';
+      this._paintAction(live.item);
+    }
+
+    const item: ActionItem = { kind: 'action', id, tool: tool.name, fields, stage: 'collect', ...described.view };
+    conv.items.push(item);
+    this._live = { item, tool, sent: false, declining: false };
+    this._els?.thread?.querySelector(`[data-journey="${CSS.escape(id)}"]`)?.remove();
+    this._watchRunningJourney();
+    if (isHandoffTool(tool.name)) void this._refreshHandoffTargets(item);
+    return item;
+  }
+
+  /**
+   * The slots with each field's options cut to the form the call means: one
+   * business's services rather than every business's.
+   */
+  private _narrowed(tool: ModelContextToolInfo, slots: Slot[], values: Record<string, unknown>): Slot[] {
+    const options = formOptions(tool, values);
+    return slots.map((slot) => {
+      const only = options[slot.name];
+      if (!only) return slot;
+      // Keep a value the call already gave, even one the form does not list: the form decides.
+      const current = values[slot.name];
+      const list = current !== undefined && current !== '' && !only.includes(String(current)) ? [String(current), ...only] : only;
+      return { ...slot, schema: { ...slot.schema, enum: list } };
+    });
+  }
+
+  /** Who a request goes to, and how the card words it. */
+  private _describeAction(
+    tool: ModelContextToolInfo,
+    values: Record<string, unknown>,
+    destination?: string,
+  ): {
+    view: Pick<ActionItem, 'variant' | 'noun' | 'identity' | 'sentence' | 'note' | 'sendLabel'>;
+    hidden: Set<string>;
+    labels: Record<string, string>;
+  } {
+    const email = String(values.email ?? Object.entries(values).find(([k]) => /e-?mail/i.test(k))?.[1] ?? '').trim();
+
+    if (isHandoffTool(tool.name)) {
+      const name = String(values.target ?? '');
+      const config = this._handoff?.config?.targets[name];
+      const known = this._handoffTargets.get(name);
+      const label = known?.label ?? config?.label ?? fieldLabel(name || 'the team');
+      const person = (known?.kind ?? config?.kind) !== 'agent';
+      const away = known ? !known.available : false;
+      // "The directory team" leads a line, but mid-sentence it is "the directory team".
+      const inline = label.replace(/^The\s/, 'the ');
+      const about = known?.description ?? config?.description;
+      const status = !known
+        ? undefined
+        : away
+          ? `Away now${known.hours ? ` · open ${known.hours}` : ''}`
+          : person
+            ? known.waitMinutes
+              ? `Available · replies in ~${known.waitMinutes} min`
+              : 'Available'
+            : 'Available';
+      const sentence = !person
+        ? `I'll hand this conversation to ${inline}. They'll take it from here.`
+        : away
+          ? email
+            ? `${label} is away right now. They'll reply to ${email}.`
+            : `${label} is away right now. Leave an email and they'll reply there.`
+          : `I'll pass this to ${inline} so you don't have to repeat yourself.`;
+      return {
+        view: {
+          variant: person ? 'handoff-person' : 'handoff-agent',
+          noun: person ? 'handoff' : 'handover',
+          identity: { name: label, sub: about ? about.charAt(0).toUpperCase() + about.slice(1) : undefined, status, tone: away ? 'away' : 'ok' },
+          sentence,
+          note: undefined,
+          sendLabel: !person ? 'Hand over' : away ? `Send to ${inline}` : 'Connect me',
+        },
+        hidden: new Set(['target']),
+        labels: { reason: 'Why', summary: 'What they need to know', email: 'Where should they reply?' },
+      };
+    }
+
+    const noun = fieldLabel(withoutSiteSuffix(tool.name)).toLowerCase();
+    // Which business or place it is for: the site tool's own chooser, else a field the form names it in.
+    const chooser = chooserOf(tool) ?? Object.keys(values).find((k) => /^(business|company|organi[sz]ation|provider|vendor|store|restaurant|practice|venue)(_name)?$/i.test(k)) ?? null;
+    const chosen = chooser ? String(values[chooser] ?? '').trim() : '';
+    const leaving = destination ?? handoffFor(tool, values)?.label;
+    const name = chosen || leaving || this._pageName();
+    // What the conversation already showed about them: their card from a search.
+    const card = this._conversations
+      .find((c) => c.id === this._activeId)
+      ?.items.flatMap((it) => (it.kind === 'results' ? it.cards : []))
+      .find((c) => c.title.toLowerCase() === name.toLowerCase());
+    const sub = [fieldLabel(noun), card?.type && card.type !== 'Thing' ? fieldLabel(card.type) : '', card?.rating ? `★ ${card.rating}` : '']
+      .filter(Boolean)
+      .join(' · ');
+    return {
+      view: {
+        variant: 'form',
+        noun,
+        identity: { name, sub },
+        sentence: `I'll send this ${noun} to ${name}.${email ? ` They'll reply to ${email}.` : ''}`,
+        note: leaving ? 'Their form is on its own page. I’ll open it and send it from there.' : undefined,
+        sendLabel: 'Send',
+      },
+      hidden: new Set(chooser && chooser !== 'target' && chosen ? [chooser] : chooser === 'target' ? ['target'] : []),
+      labels: {},
+    };
+  }
+
+  /** The site's name for this page: its title, without the site's own name after it. */
+  private _pageName(): string {
+    const title = (typeof document === 'undefined' ? '' : document.title).split(/\s+[|—–·-]\s+/)[0].trim();
+    return title || 'this page';
+  }
+
+  /** Read availability for a handoff card, and redraw it once known. */
+  private async _refreshHandoffTargets(item: ActionItem): Promise<void> {
+    const targets = await this._handoff?.targets().catch(() => []);
+    for (const t of targets ?? []) this._handoffTargets.set(t.name, t);
+    if (item.stage !== 'collect' && item.stage !== 'review') return;
+    const values = Object.fromEntries(item.fields.map((f) => [f.name, f.value]));
+    Object.assign(item, this._describeAction({ name: item.tool } as ModelContextToolInfo, values).view);
+    this._paintAction(item);
+  }
+
+  /** What the live card's buttons do. */
+  private _actionHandlers(): ActionHandlers {
+    return {
+      continue: (values) => {
+        const live = this._live;
+        if (!live) return;
+        if (live.ask && !live.confirm) {
+          live.ask.onComplete(values);
+          return;
+        }
+        // Back from a change, or a card of the widget's own: review again, here.
+        Object.assign(live.item, this._describeAction(live.tool, values, live.confirm?.destination).view);
+        live.item.stage = 'review';
+        this._paintAction(live.item);
+        this._saveConversations();
+      },
+      change: () => {
+        const live = this._live;
+        if (!live) return;
+        live.item.fields.forEach((f) => {
+          if (f.group === 'needed' && f.value.trim() !== '') f.group = 'known';
+        });
+        live.sent = false;
+        live.item.stage = 'collect';
+        live.item.open = true;
+        this._paintAction(live.item);
+        this._saveConversations();
+      },
+      send: (values) => {
+        const live = this._live;
+        if (!live) return;
+        live.sent = true;
+        if (live.confirm) live.confirm.onSubmit(values);
+        else if (live.run) void live.run(values);
+      },
+      decline: () => {
+        const live = this._live;
+        if (!live) return;
+        live.declining = true;
+        if (live.confirm) live.confirm.onCancel();
+        else if (live.ask) live.ask.onCancel();
+        // A card the harness is not waiting on declines itself.
+        if (this._live === live) {
+          live.item.stage = 'declined';
+          this._paintAction(live.item);
+          this._live = null;
+          this._saveConversations();
+        }
+      },
+    };
+  }
+
+  /** Draw a card where it was, or at the end of the thread. */
+  private _paintAction(item: ActionItem): void {
+    if (!this._els?.thread) return;
+    const conv = this._active();
+    if (!conv?.items.includes(item)) return;
+    const live = this._live?.item === item;
+    const fresh = actionCard(item, live ? this._actionHandlers() : null, () => this._saveConversations());
+    const old = this._els.thread.querySelector(`[data-action="${CSS.escape(item.id)}"]`);
+    if (old) old.replaceWith(fresh);
+    else {
+      this._clearEmpty();
+      this._els.thread.appendChild(fresh);
+      this._scroll();
+    }
+  }
+
+  /** A request's steps, as its card shows them once sent. */
+  private _actionFollows(item: ActionItem, all: AgentStep[]): void {
+    const live = this._live?.item === item ? this._live : null;
+    const failed = [...all].reverse().find((st) => st.status === 'failed');
+    const done = all.some((st) => st.id === 'submit' && st.status === 'done');
+    const running = ['navigate', 'arrive', 'collect', 'fill', 'submit'];
+    item.steps = all
+      .filter((st) => running.includes(st.id))
+      .map((st): ActionStep => ({
+        label:
+          st.id === 'fill' && st.status === 'active' && item.variant === 'form'
+            ? `Filling in the ${item.noun}`
+            : st.id === 'submit' && st.status === 'done' && item.variant === 'form'
+              ? 'Sent'
+              : st.label,
+        status: st.status === 'failed' ? 'failed' : st.status === 'done' ? 'done' : 'active',
+      }));
+
+    if (failed) {
+      if (live?.declining || failed.label === 'Cancelled') {
+        item.stage = 'declined';
+        if (live) this._live = null;
+      } else {
+        item.stage = 'failed';
+        item.message = failed.detail || failed.label;
+      }
+    } else if (done) {
+      item.stage = 'done';
+      if (live) this._live = null;
+    } else if (item.stage === 'left' || (item.stage === 'working' && item.steps.length)) {
+      item.stage = 'working';
+    }
+    this._paintAction(item);
+  }
+
+  /** The confirmed call is leaving for its page. The card says so, and the new page finishes it. */
+  private _cardLeft(tool: ModelContextToolInfo, destination: string | null): void {
+    const live = this._live;
+    if (!live || live.tool.name !== tool.name) {
+      this._appendMsg('assistant', destination ? `Opening ${destination}…` : 'Opening the page that can submit this…');
+      return;
+    }
+    live.item.stage = 'left';
+    live.item.message = `Opening ${destination ?? live.item.identity.name}’s page to send it from there.`;
+    this._live = null;
+    this._paintAction(live.item);
+    this._saveConversations();
+  }
+
+  /** The form took it: the card becomes the receipt. False when no card is waiting on this tool. */
+  private _cardDone(tool: ModelContextToolInfo, values: Record<string, unknown>, text: string): boolean {
+    const conv = this._active();
+    const id = currentJourney();
+    const item = conv?.items.find((it): it is ActionItem => it.kind === 'action' && it.id === id && it.tool === tool.name);
+    if (!item || this._classicPrompts) return false;
+    const note = this._buildDetailItem(tool, values, text).note;
+    // The default note says nothing the card's "Sent" does not.
+    item.message = /submitted successfully/.test(note) ? undefined : note;
+    item.stage = 'done';
+    item.fields.forEach((f) => {
+      if (values[f.name] !== undefined) f.value = String(values[f.name]);
+    });
+    if (this._live?.item === item) this._live = null;
+    this._paintAction(item);
+    this._saveConversations();
+    return true;
+  }
+
+  /** It did not go through: the card says why and offers to change it. False when no card is waiting. */
+  private _cardFailed(tool: ModelContextToolInfo, message: string): boolean {
+    const live = this._live;
+    if (!live || live.tool.name !== tool.name) return false;
+    live.sent = false;
+    live.item.stage = 'failed';
+    live.item.message = message;
+    this._paintAction(live.item);
+    this._saveConversations();
+    return true;
+  }
+
+  /**
+   * After a page change: the card of the request that travelled, found by its
+   * journey, now finished or asked about here.
+   */
+  private _resumedCard(journeyId: string | undefined): ActionItem | null {
+    if (!journeyId || this._classicPrompts) return null;
+    return this._active()?.items.find((it): it is ActionItem => it.kind === 'action' && it.id === journeyId) ?? null;
+  }
+
+  /** Let a resumed card be changed and sent again from this page, with the page's own tool. */
+  private _reviveCard(item: ActionItem, tool: ModelContextToolInfo, values: Record<string, unknown>, needed: string[]): void {
+    const slots = resolveSlots(toolSchema(tool), { modelArgs: values }).all;
+    const hidden = new Set(item.fields.filter((f) => f.group === 'hidden').map((f) => f.name));
+    item.fields = fieldsFromSlots(slots, values, { needed: new Set(needed), hidden });
+    this._live = {
+      item,
+      tool,
+      sent: false,
+      declining: false,
+      run: async (vals) => {
+        item.stage = 'working';
+        item.steps = [{ label: `Sending the ${item.noun}`, status: 'active' }];
+        this._paintAction(item);
+        try {
+          const res = await this.toolSource.execTool(tool, tool.name, vals);
+          const text = extractResult(res);
+          if (res?.isError) {
+            this._cardFailed(tool, text || 'That form did not accept the details.');
+            return;
+          }
+          this._active()?.messages.push({
+            role: 'user',
+            content: `[${tool.name} submitted with: ${JSON.stringify(vals)}]. Keep these unless I ask to change them.`,
+          });
+          this._live = null;
+          const note = this._buildDetailItem(tool, vals, text).note;
+          item.message = /submitted successfully/.test(note) ? undefined : note;
+          item.stage = 'done';
+          item.steps = [];
+          this._paintAction(item);
+          this._saveConversations();
+        } catch (err) {
+          this._cardFailed(tool, String((err as Error)?.message || err));
+        }
+      },
+    };
+  }
+
   // ── Inline generated form (from JSON-Schema) ───────────────────────────────
   private _renderForm(tool: ModelContextToolInfo, args: Record<string, unknown>): void {
     if (this._useA2ui) {
@@ -2090,61 +2594,9 @@ class NxisAgentFullscreen extends HTMLElement {
    * return the first that yields records. Shapes covered: query → results[],
    * list_types → types[], get → result{}, or a bare entity/array. */
   private _extractItems(res: ModelContextToolResponse | string | null): Record<string, unknown>[] {
-    const sources: unknown[] = [];
-    // Collect every candidate payload, recursively unwrapping tool-response
-    // envelopes. `res` can be an object, a JSON string, or (with a WebMCP browser
-    // extension in the loop) the whole `{content, structuredContent}` envelope
-    // serialized to a string, possibly more than once. Diving into both
-    // `structuredContent` and each `content[].text` covers all of them.
-    const visit = (raw: unknown, depth = 0): void => {
-      if (raw == null || depth > 5) return;
-      const val: unknown = raw;
-      if (typeof val === 'string') {
-        const t = val.trim();
-        if (!t) return;
-        let parsed: unknown;
-        try {
-          parsed = JSON.parse(t);
-        } catch {
-          return; // plain (non-JSON) text — nothing to extract
-        }
-        // Parsed value may itself be an object/array OR another JSON string
-        // (double-encoded); recurse either way.
-        return visit(parsed, depth + 1);
-      }
-      if (!val || typeof val !== 'object') return;
-      sources.push(val);
-      const v = val as Record<string, unknown>;
-      if (v.structuredContent != null) visit(v.structuredContent, depth + 1);
-      if (Array.isArray(v.content)) {
-        for (const c of v.content) {
-          if (c && typeof c === 'object') visit((c as Record<string, unknown>).text, depth + 1);
-        }
-      }
-    };
-    visit(res);
-
-    for (const data of sources) {
-      const items = this._itemsFrom(data);
-      if (items.length) return items;
-    }
-    console.warn('[nxis-mcp] no items extracted from tool result', { sourcesTried: sources.length, res });
-    return [];
-  }
-
-  /** Find the record array within one parsed payload. */
-  private _itemsFrom(data: unknown): Record<string, unknown>[] {
-    const objs = (arr: unknown[]) =>
-      arr.filter((x) => x && typeof x === 'object') as Record<string, unknown>[];
-    if (Array.isArray(data)) return objs(data);
-    if (!data || typeof data !== 'object') return [];
-    const d = data as Record<string, unknown>;
-    for (const key of ['results', 'types', 'items', 'entities', 'data']) {
-      if (Array.isArray(d[key])) return objs(d[key] as unknown[]);
-    }
-    if (d.result && typeof d.result === 'object') return [d.result as Record<string, unknown>];
-    if (d['@id'] != null || d['@type'] != null || d.name != null) return [d];
-    return [];
+    const items = extractRecords(res);
+    if (!items.length) console.warn('[nxis-mcp] no items extracted from tool result', { res });
+    return items;
   }
 
   /** Build a display card from a single record (a JSON-LD entity or a type row). */
@@ -2212,19 +2664,82 @@ class NxisAgentFullscreen extends HTMLElement {
     const id = entity['@id'] != null ? str(entity['@id']) : undefined;
     const found = pageForEntity(entity, this._sitePages, location.origin);
     const page = found ? { url: found.url, label: found.name } : undefined;
-    return { title, type, rating, emergency, sub, rows, id, ...(page ? { page } : {}) };
+
+    // What the answer view compares by, beyond the rating and hours its heading already shows.
+    const facts = recordFacts(entity);
+    const status = openStatus(entity) ?? undefined;
+    const lines = [
+      facts.services.length ? facts.services.slice(0, 3).map((x) => x.name).join(', ') : facts.knows.slice(0, 3).join(', '),
+      facts.since ? `In business since ${facts.since}` : '',
+      facts.reviews[0] ? `\u201c${facts.reviews[0].text}\u201d${facts.reviews[0].author ? ` \u2014 ${facts.reviews[0].author}` : ''}` : '',
+    ].filter((l): l is string => !!l);
+    return {
+      title,
+      type,
+      rating,
+      emergency,
+      sub,
+      rows,
+      id,
+      ...(page ? { page } : {}),
+      ...(facts.rating !== undefined ? { stars: facts.rating } : {}),
+      ...(facts.reviewCount !== undefined ? { reviews: facts.reviewCount } : {}),
+      ...(status ? { status: { open: status.open, label: status.label } } : {}),
+      ...(facts.phone ? { phone: facts.phone } : {}),
+      facts: lines,
+    };
   }
 
   private _buildResultsItem(
     tool: ModelContextToolInfo,
     res: ModelContextToolResponse,
+    pick?: ResultPick,
   ): Extract<ThreadItem, { kind: 'results' }> {
     const items = this._extractItems(res);
     const cards = items.slice(0, 12).map((e) => this._entityCard(e));
     const note = !cards.length
       ? 'No results found.'
       : `${cards.length} result${cards.length === 1 ? '' : 's'}`;
-    return { kind: 'results', title: humanize(tool.name), note, cards };
+    return { kind: 'results', title: humanize(tool.name), note, cards, ...(pick && pick.index < cards.length ? { pick } : {}) };
+  }
+
+  /**
+   * Results as an answer: the recommended pick with its reasons and the others
+   * to compare, or a short list that opens per result. Records of things
+   * only: a listing of types or counts keeps the plain cards.
+   */
+  private _answerEl(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement | null {
+    // Records of things: a pick, or at least one result with a rating, hours, a phone or a page.
+    // A sparse record beside them (an index entry with only a name) still shows, by name.
+    const things = item.cards.filter((c) => c.stars !== undefined || c.status || c.phone || c.page);
+    if (!item.pick && !things.length) return null;
+    const cards: AnswerCard[] = item.cards.map((c) => {
+      const form = formsFor(c.title)[0];
+      const quote = form && /quote/.test(form.noun);
+      return {
+        title: c.title,
+        stars: c.stars,
+        reviews: c.reviews,
+        status: c.status,
+        phone: c.phone,
+        page: c.page,
+        facts: c.facts ?? [],
+        ...(form
+          ? {
+              form: quote
+                ? { label: 'Get a quote', message: `Get a quote from ${c.title}` }
+                : { label: `Use their ${form.noun}`, message: `Start the ${form.noun} for ${c.title}` },
+            }
+          : {}),
+      };
+    });
+    return resultsAnswer(cards, item.pick, {
+      ask: (text) => {
+        if (this._turnActive) return;
+        this._els.input.value = text;
+        void this._onSend();
+      },
+    });
   }
 
   /** Feature-card pattern: tinted icon chip, tags, tight Manrope headline, one
@@ -2285,9 +2800,12 @@ class NxisAgentFullscreen extends HTMLElement {
    * surface; a2ui="a2ui-results" opts this element back into it for comparison.
    */
   private _resultsEl(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement {
-    return this.getAttribute('a2ui') === 'a2ui-results'
-      ? this._resultsElA2ui(item)
-      : this._resultsElLegacy(item);
+    if (this.getAttribute('a2ui') === 'a2ui-results') return this._resultsElA2ui(item);
+    if (!this._classicPrompts && item.cards.length) {
+      const answer = this._answerEl(item);
+      if (answer) return answer;
+    }
+    return this._resultsElLegacy(item);
   }
 
   private _resultsElLegacy(item: Extract<ThreadItem, { kind: 'results' }>): HTMLElement {
@@ -2692,6 +3210,17 @@ class NxisAgentFullscreen extends HTMLElement {
    * `fallback`. Inexpensive: each agent is a role over the one shared provider,
    * so no additional model is loaded.
    */
+  /** The one agent a page without `agents` runs, on the current provider. */
+  private _singleHarness(): AgentHarness {
+    return new AgentHarness({
+      provider: this.provider,
+      toolSource: this.toolSource,
+      renderer: this._renderer(),
+      profile: (schema) => this._profileForSchema(schema as JsonSchema),
+      onMessages: () => this._saveConversations(),
+    });
+  }
+
   private _buildAgents(): void {
     if (!this.provider || !this._agentDefs) {
       this._coordinator = null;
@@ -2842,6 +3371,7 @@ class NxisAgentFullscreen extends HTMLElement {
     if (conversationId === this._activeId && this._els?.thread) {
       this._paintHandoffItem(item);
       this._scroll();
+      this._noteThreadGrew();
     }
   }
 
@@ -2991,6 +3521,44 @@ class NxisAgentFullscreen extends HTMLElement {
     });
     if (outcome.status !== 'none') this._setStatus('');
 
+    // The card that travelled with the request finishes here, when there is one.
+    const card = outcome.status === 'none' ? null : this._resumedCard(outcome.pending.steps?.find((st) => st.journey)?.journey);
+    if (card && outcome.status !== 'none') {
+      switch (outcome.status) {
+        case 'no-registry':
+        case 'no-tool':
+          card.stage = 'failed';
+          card.message = `I couldn't find the ${card.noun} on this page, so nothing was sent. Ask me again and I'll fill it in from here.`;
+          break;
+        case 'incomplete':
+          this._reviveCard(card, outcome.tool, outcome.pending.values, outcome.missing);
+          card.stage = 'collect';
+          card.message = undefined;
+          break;
+        case 'rejected':
+        case 'failed':
+          this._reviveCard(card, outcome.tool, outcome.pending.values, []);
+          card.stage = 'failed';
+          card.message = outcome.status === 'failed' ? outcome.error : outcome.text || 'That form did not accept the details.';
+          break;
+        case 'submitted': {
+          const note = this._buildDetailItem(outcome.tool, outcome.pending.values, outcome.text).note;
+          card.message = /submitted successfully/.test(note) ? undefined : note;
+          card.stage = 'done';
+          this._active()?.messages.push({
+            role: 'user',
+            content:
+              `[${outcome.tool.name} submitted with: ${JSON.stringify(outcome.pending.values)}]. ` +
+              'Keep these unless I ask to change them.',
+          });
+          break;
+        }
+      }
+      this._paintAction(card);
+      this._saveConversations();
+      return;
+    }
+
     switch (outcome.status) {
       case 'none':
         return;
@@ -3348,6 +3916,9 @@ class NxisAgentFullscreen extends HTMLElement {
     if (this._els?.thread) {
       this.provider = next ?? this.provider;
       this._paintProvenance();
+      // Both the single agent and any configured ones: a page without `agents` kept the old
+      // provider's harness, and answered with the model it had just replaced.
+      this._harness = this._singleHarness();
       this._buildAgents();
     }
   }
@@ -3551,6 +4122,12 @@ class NxisAgentFullscreen extends HTMLElement {
       /* A2UI surfaces inherit the tokens above through --a2ui-* bridges. */
       ${A2UI_THEME_CSS}
 
+      /* The action card: forms and handoffs as one message. */
+      ${ACTION_CARD_CSS}
+
+      /* Search results as an answer: a pick and why, or a short list. */
+      ${RESULTS_ANSWER_CSS}
+
       /* App-icon tile: chevron centered in a 56px tile, Soft Gray, hairline. */
       .launcher {
         position: fixed; right: 20px; bottom: 20px; z-index: 9998;