@alexkroman1/aai-cli 13.2.0 → 14.0.0

package/dist/templates/research-workflow/workflows/research.ts

@@ -35,7 +35,7 @@
  *
  * ## Every stage REPORTS, and the report goes two places
  *
- * `report()` (`@alexkroman1/aai/step`) writes to the run's own stream — which
+ * `stepReport()` (`@alexkroman1/aai/step`) writes to the run's own stream — which
  * `research_progress` reads back down the phone and a page renders — and to the
  * server log, with the attempt number appended past the first. A pass that is
  * retrying and one that is working print the same sentences otherwise.
@@ -49,9 +49,9 @@
  * researcher CONCLUDED, which is exactly what the step returns.
  */
 
-import type { WorkflowCtx } from "@alexkroman1/aai";
-import { mapConcurrent, report } from "@alexkroman1/aai/step";
-import { stepGenerateClassified, stepGenerateJsonClassified } from "@alexkroman1/aai/step-errors";
+import type { WorkflowContext } from "@alexkroman1/aai";
+import { mapConcurrent, stepReport } from "@alexkroman1/aai/step";
+import { stepGenerateJsonOrFail, stepGenerateOrFail } from "@alexkroman1/aai/step-errors";
 import { visitWebpage, webSearch } from "@alexkroman1/aai/tools";
 import { errorMessage, isToolFailure, plural } from "@alexkroman1/aai/utils";
 import { z } from "zod";
@@ -107,7 +107,7 @@ export type Source = { title: string; url: string };
 
 // ---- What each stage's model call has to come back as ------------------------
 //
-// `stepGenerateJsonClassified` validates against these, so a reply that missed
+// `stepGenerateJsonOrFail` validates against these, so a reply that missed
 // is a plain throw and therefore a retry — where the hand-rolled `askJson<T>()`
 // this replaces returned a value the compiler believed and nothing checked. They are
 // deliberately LENIENT wherever the old hand-written coercion was: a model that
@@ -212,7 +212,7 @@ export type Findings = {
  */
 export async function researchFlow(
   input: { topic: string; requestedBy: string },
-  ctx: WorkflowCtx,
+  ctx: WorkflowContext,
 ) {
   const brief = await ctx.step("writeBrief", () => writeBrief(input.topic));
   const angles = await ctx.step("planAngles", () => planAngles(brief));
@@ -270,11 +270,11 @@ export async function researchFlow(
  * later model call.
  */
 export async function writeBrief(topic: string): Promise<Brief> {
-  await report(`Working out what "${topic}" is really asking.`);
-  const parsed = await stepGenerateJsonClassified(
-    `Research request, as the caller said it: ${topic}`,
-    { system: BRIEF_SYSTEM, schema: BriefReply },
-  );
+  await stepReport(`Working out what "${topic}" is really asking.`);
+  const parsed = await stepGenerateJsonOrFail(`Research request, as the caller said it: ${topic}`, {
+    system: BRIEF_SYSTEM,
+    schema: BriefReply,
+  });
   return { brief: parsed.brief || topic, criteria: parsed.criteria.slice(0, MAX_ANGLES) };
 }
 
@@ -286,7 +286,7 @@ export async function writeBrief(topic: string): Promise<Brief> {
  * asking the model again and getting a different one.
  */
 export async function planAngles(brief: Brief): Promise<string[]> {
-  const parsed = await stepGenerateJsonClassified(briefText(brief), {
+  const parsed = await stepGenerateJsonOrFail(briefText(brief), {
     system: PLAN_SYSTEM,
     schema: AnglesReply,
   });
@@ -294,10 +294,10 @@ export async function planAngles(brief: Brief): Promise<string[]> {
   if (angles.length === 0) {
     // Nothing to fan out over is a plan failure, not an empty result: the brief
     // itself is the one angle that is always available.
-    await report("No angles came back; researching the brief itself.");
+    await stepReport("No angles came back; researching the brief itself.");
     return [brief.brief];
   }
-  await report(`Researching ${angles.length} ${plural(angles.length, "angle")}.`);
+  await stepReport(`Researching ${angles.length} ${plural(angles.length, "angle")}.`);
   return angles;
 }
 
@@ -309,7 +309,7 @@ export async function planAngles(brief: Brief): Promise<string[]> {
  * at the end, which is where it becomes small enough to journal.
  */
 export async function investigate(brief: Brief, angle: string): Promise<Note> {
-  await report(`Looking into: ${angle}`);
+  await stepReport(`Looking into: ${angle}`);
   const seen: string[] = [];
   const sources: Source[] = [];
 
@@ -323,7 +323,7 @@ export async function investigate(brief: Brief, angle: string): Promise<Note> {
       continue;
     }
     if (action.action === "read" && action.url) {
-      await report(`Reading ${hostname(action.url)}`);
+      await stepReport(`Reading ${hostname(action.url)}`);
       seen.push(`PAGE ${action.url}\n${await readPage(action.url)}`);
       continue;
     }
@@ -335,8 +335,6 @@ export async function investigate(brief: Brief, angle: string): Promise<Note> {
   return await compress(angle, seen, sources);
 }
 
-/** UNUSED-ORPHAN-MARKER Retries beyond the default: the far side is a search engine and a model. */
-
 /**
  * The supervisor's second look.
  *
@@ -346,12 +344,12 @@ export async function investigate(brief: Brief, angle: string): Promise<Note> {
  */
 export async function findGaps(brief: Brief, notes: readonly Note[]): Promise<string[]> {
   if (notes.length === 0) return [];
-  const parsed = await stepGenerateJsonClassified(
+  const parsed = await stepGenerateJsonOrFail(
     `${briefText(brief)}\n\nWhat came back:\n${notes.map(noteText).join("\n\n")}`,
     { system: GAPS_SYSTEM, schema: AnglesReply },
   );
   const gaps = parsed.angles.slice(0, MAX_ANGLES - 1);
-  await report(
+  await stepReport(
     gaps.length === 0
       ? "The brief is covered; writing it up."
       : `Following up ${gaps.length} ${plural(gaps.length, "gap")}.`,
@@ -371,12 +369,12 @@ export async function writeReport(
   brief: Brief,
   notes: readonly Note[],
 ): Promise<{ report: string; summary: string }> {
-  await report(`Writing up ${notes.length} ${plural(notes.length, "angle")}.`);
-  const written = await stepGenerateClassified(
+  await stepReport(`Writing up ${notes.length} ${plural(notes.length, "angle")}.`);
+  const written = await stepGenerateOrFail(
     `${briefText(brief)}\n\nFindings:\n${notes.map(noteText).join("\n\n")}`,
     { system: REPORT_SYSTEM },
   );
-  const summary = await stepGenerateClassified(`Topic: ${topic}\n\nReport:\n${written}`, {
+  const summary = await stepGenerateOrFail(`Topic: ${topic}\n\nReport:\n${written}`, {
     system: BRIEF_SUMMARY_SYSTEM,
   });
   return { report: written, summary };
@@ -390,7 +388,7 @@ export async function writeReport(
  * parameters carry `_` for the same reason.
  */
 export async function file(_requestedBy: string, _topic: string): Promise<string> {
-  await report("Filing the findings.");
+  await stepReport("Filing the findings.");
   return "filed";
 }
 
@@ -406,7 +404,7 @@ async function nextAction(
   seen: readonly string[],
   left: number,
 ): Promise<Action> {
-  return await stepGenerateJsonClassified(
+  return await stepGenerateJsonOrFail(
     `${briefText(brief)}\n\nYour angle: ${angle}\n` +
       `Actions left: ${left}\n\n` +
       (seen.length === 0 ? "You have not looked at anything yet." : seen.join("\n\n")),
@@ -423,7 +421,7 @@ async function nextAction(
  * pages exist" and gets run again, differently worded, until the budget is gone.
  */
 async function search(query: string): Promise<{ summary: string; sources: Source[] }> {
-  await report(`Searching: ${query}`);
+  await stepReport(`Searching: ${query}`);
   try {
     const results = await webSearch<{ results?: { title?: string; url?: string }[] }>({
       query,
@@ -445,7 +443,7 @@ async function search(query: string): Promise<{ summary: string; sources: Source
     };
   } catch (err: unknown) {
     const summary = `That search failed: ${errorMessage(err)}`;
-    await report(summary);
+    await stepReport(summary);
     return { summary, sources: [] };
   }
 }
@@ -475,7 +473,7 @@ async function compress(angle: string, seen: readonly string[], sources: Source[
   if (seen.length === 0) {
     return { angle, findings: "Nothing was found on this angle.", sources: [] };
   }
-  const parsed = await stepGenerateJsonClassified(`Angle: ${angle}\n\n${seen.join("\n\n")}`, {
+  const parsed = await stepGenerateJsonOrFail(`Angle: ${angle}\n\n${seen.join("\n\n")}`, {
     system: COMPRESS_SYSTEM,
     schema: CompressReply,
   });
@@ -492,11 +490,11 @@ async function compress(angle: string, seen: readonly string[], sources: Source[
 //
 // There is none left, and its absence is the point. This desk carried an `ask()`
 // and an `askJson()` whose whole body was `.catch(throwStepError)`; the SDK's
-// `stepGenerateClassified` and `stepGenerateJsonClassified`
+// `stepGenerateOrFail` and `stepGenerateJsonOrFail`
 // (`@alexkroman1/aai/step-errors`) ARE that call — the `/step` one with the
 // gateway's verdict classified, so a terminal failure stays terminal and a rate
 // limit becomes a `RetryableError` carrying the delay the gateway itself named.
-// `stepGenerateJsonClassified` also owns the four things every JSON stage used
+// `stepGenerateJsonOrFail` also owns the four things every JSON stage used
 // to re-derive — unwrap the fence, parse, reject a non-object, check the shape —
 // and throws PLAINLY when any of them misses, which is what makes a malformed
 // reply a retry rather than a failure.

package/dist/templates/retail/agent.test.ts

@@ -1,6 +1,6 @@
 import type { ToolContext } from "@alexkroman1/aai";
 import { isToolFailure } from "@alexkroman1/aai";
-import { createToolContext, ok } from "@alexkroman1/aai/testing";
+import { createToolContext, expectToolOk } from "@alexkroman1/aai/testing";
 import { describe, expect, test } from "vitest";
 import type { AuthResult } from "./authenticate.ts";
 import type { StagedResult } from "./pending.ts";
@@ -32,7 +32,7 @@ function makeCtx(): ToolContext {
 /** A context already authenticated as `userId`, via the real tool. */
 async function authedCtx(email: string): Promise<ToolContext> {
   const ctx = makeCtx();
-  ok<AuthResult>(await findUserIdByEmail.execute({ email }, ctx));
+  expectToolOk<AuthResult>(await findUserIdByEmail.execute({ email }, ctx));
   return ctx;
 }
 
@@ -47,19 +47,19 @@ async function authedCtx(email: string): Promise<ToolContext> {
  * would let this gate pass while carrying nothing to confirm.
  */
 async function confirmed<R = unknown>(staged: unknown, ctx: ToolContext): Promise<R> {
-  const stage = ok<StagedResult>(staged);
+  const stage = expectToolOk<StagedResult>(staged);
   // A throw rather than an `expect`, which biome's `noMisplacedAssertion`
   // rightly refuses outside a test body. A staged change with no sentence to
   // read back is the one shape that would let the gate pass while carrying
   // nothing to confirm, so it stops the spec here rather than downstream.
   if (stage.read_back.length === 0) throw new Error(`${stage.staged} staged with no readback`);
-  return ok<R>(await confirmChange.execute({}, ctx));
+  return expectToolOk<R>(await confirmChange.execute({}, ctx));
 }
 
 describe("authentication", () => {
   test("find_user_id_by_email is case-insensitive and authenticates the session", async () => {
     const ctx = makeCtx();
-    const result = ok<AuthResult>(
+    const result = expectToolOk<AuthResult>(
       await findUserIdByEmail.execute({ email: "OLIVIA.ITO5204@EXAMPLE.COM" }, ctx),
     );
     expect(result.user_id).toBe("olivia_ito_3591");
@@ -81,7 +81,7 @@ describe("authentication", () => {
 
   test("find_user_id_by_name_zip is case-insensitive on names and exact on zip", async () => {
     const ctx = makeCtx();
-    const found = ok<AuthResult>(
+    const found = expectToolOk<AuthResult>(
       await findUserIdByNameZip.execute(
         { first_name: "aarav", last_name: "ANDERSON", zip: "19031" },
         ctx,
@@ -97,13 +97,13 @@ describe("authentication", () => {
   });
 
   test("two customers share a first name — the zip is what separates them", async () => {
-    const a = ok<AuthResult>(
+    const a = expectToolOk<AuthResult>(
       await findUserIdByNameZip.execute(
         { first_name: "Aarav", last_name: "Anderson", zip: "19031" },
         makeCtx(),
       ),
     );
-    const b = ok<AuthResult>(
+    const b = expectToolOk<AuthResult>(
       await findUserIdByNameZip.execute(
         { first_name: "Aarav", last_name: "Gonzalez", zip: "78268" },
         makeCtx(),
@@ -172,7 +172,7 @@ interface ProductTypesResult {
 describe("read tools", () => {
   test("get_user_details returns the caller's profile with gift-card balances", async () => {
     const ctx = await authedCtx("olivia.ito5204@example.com");
-    const result = ok<UserDetailsResult>(
+    const result = expectToolOk<UserDetailsResult>(
       await getUserDetails.execute({ user_id: "olivia_ito_3591" }, ctx),
     );
     expect(result.email).toBe("olivia.ito5204@example.com");
@@ -189,7 +189,7 @@ describe("read tools", () => {
 
   test("get_order_details resolves shorthand and sets focus", async () => {
     const ctx = await authedCtx("olivia.ito5204@example.com");
-    const result = ok<OrderDetailsResult>(
+    const result = expectToolOk<OrderDetailsResult>(
       await getOrderDetails.execute({ order_id: "the delivered one" }, ctx),
     );
     expect(result.order_id).toBe("#W5866402");
@@ -203,7 +203,7 @@ describe("read tools", () => {
   });
 
   test("get_product_details lists variants and needs no authentication", async () => {
-    const result = ok<ProductDetailsResult>(
+    const result = expectToolOk<ProductDetailsResult>(
       await getProductDetails.execute({ product_id: "9832717871" }, makeCtx()),
     );
     expect(result.name).toBe("Tea Kettle");
@@ -217,7 +217,7 @@ describe("read tools", () => {
   });
 
   test("get_item_details resolves an item without knowing its product", async () => {
-    const result = ok<ItemDetailsResult>(
+    const result = expectToolOk<ItemDetailsResult>(
       await getItemDetails.execute({ item_id: "3909406921" }, makeCtx()),
     );
     expect(result.price).toBe(98.25);
@@ -225,7 +225,9 @@ describe("read tools", () => {
   });
 
   test("list_all_product_types returns all 50, sorted by name", async () => {
-    const result = ok<ProductTypesResult>(await listAllProductTypes.execute({}, makeCtx()));
+    const result = expectToolOk<ProductTypesResult>(
+      await listAllProductTypes.execute({}, makeCtx()),
+    );
     expect(Object.keys(result.products)).toHaveLength(50);
     const names = Object.keys(result.products);
     // localeCompare, not the default lexicographic sort — the tool sorts for a
@@ -1148,7 +1150,7 @@ interface TransferResult {
 
 describe("transfer_to_human_agents", () => {
   test("works without authentication — the escape hatch cannot be gated", async () => {
-    const result = ok<TransferResult>(
+    const result = expectToolOk<TransferResult>(
       await transferToHumanAgents.execute(
         { summary: "Caller wants to dispute a charge from 2019." },
         makeCtx(),
@@ -1160,7 +1162,7 @@ describe("transfer_to_human_agents", () => {
 
   test("the handoff is terminal, so the call cannot be worked afterwards", async () => {
     const ctx = await authedCtx("olivia.ito5204@example.com");
-    ok(await transferToHumanAgents.execute({ summary: "wants a human" }, ctx));
+    expectToolOk(await transferToHumanAgents.execute({ summary: "wants a human" }, ctx));
 
     const at = callFlow.position(ctx);
     expect(at.state).toBe("transferred");

package/dist/templates/retail/cancel.ts

@@ -10,10 +10,11 @@
  */
 
 import { isToolFailure, type ToolFailure } from "@alexkroman1/aai";
+import { formatMoney } from "@alexkroman1/aai/utils";
 import { creditRefund, REFUND_DELAY_NOTE, REFUND_IMMEDIATE_NOTE } from "./refund.ts";
 import { resolveOrder } from "./resolve.ts";
 import type { RetailState } from "./shared.ts";
-import { authenticatedUser, money } from "./store.ts";
+import { money } from "./store.ts";
 
 /** The only two reasons the store records. */
 export const CANCEL_REASONS = ["no longer needed", "ordered by mistake"] as const;
@@ -42,9 +43,9 @@ export function planCancel(
   spokenOrderId: string,
   reason: CancelReason,
 ): CancelPlan | ToolFailure {
-  const user = authenticatedUser(state);
-  if (isToolFailure(user)) return user;
-
+  // No `authenticatedUser` gate here: `resolveOrder` opens with the identical
+  // call and returns the identical failure, so a second one is a second store
+  // lookup for a value this planner never reads.
   const order = resolveOrder(state, spokenOrderId);
   if (isToolFailure(order)) return order;
 
@@ -75,7 +76,7 @@ export function planCancel(
   return {
     readBack:
       `cancel order ${order.order_id} (${items}) as '${reason}' and refund ` +
-      `$${total.toFixed(2)} to ${destinations}`,
+      `${formatMoney(total)} to ${destinations}`,
     orderId: order.order_id,
     reason,
     refunds,
@@ -109,7 +110,7 @@ export function applyCancel(state: RetailState, plan: CancelPlan) {
     cancel_reason: plan.reason,
     refunded: plan.total,
     refund_immediate: immediate,
-    message: `Order ${plan.orderId} is cancelled and $${plan.total.toFixed(2)} is being refunded. ${
+    message: `Order ${plan.orderId} is cancelled and ${formatMoney(plan.total)} is being refunded. ${
       immediate ? REFUND_IMMEDIATE_NOTE : REFUND_DELAY_NOTE
     }`,
   };

package/dist/templates/retail/client.tsx

@@ -1,12 +1,15 @@
+import { formatMoney, plural } from "@alexkroman1/aai/utils";
 import "@alexkroman1/aai-ui/styles.css";
-import type { AgentState, ConversationItem, Session } from "@alexkroman1/aai-ui";
+import type { AgentState, ConversationItem } from "@alexkroman1/aai-ui";
 import {
   AutoScroll,
-  client,
+  mountClient,
+  SessionErrorBanner,
   useAgentState,
   useConversation,
-  useSession,
+  useSessionActions,
   useSessionSelector,
+  useSessionStatus,
 } from "@alexkroman1/aai-ui";
 import type { ReactNode } from "react";
 import type {
@@ -100,7 +103,7 @@ function MethodRow({ method }: { method: PaymentMethodView }) {
         </span>
       ) : (
         <span className="font-semibold tabular-nums" style={{ color: "#15803d" }}>
-          ${method.balance.toFixed(2)}
+          {formatMoney(method.balance)}
         </span>
       )}
     </div>
@@ -132,8 +135,7 @@ function OrderCard({ order, focused }: { order: OrderView; focused: boolean }) {
         </span>
       </div>
       <div className="text-[11px] mb-1 tabular-nums" style={{ color: "#71717a" }}>
-        ${order.total.toFixed(2)} · {order.items.length} item
-        {order.items.length === 1 ? "" : "s"}
+        {formatMoney(order.total)} · {order.items.length} {plural(order.items.length, "item")}
       </div>
       {order.items.slice(0, 3).map((item) => (
         <div
@@ -246,7 +248,7 @@ function SwapOptions({ option }: { option: SwapOptionView }) {
           >
             <span>{Object.values(alternative.options).join(", ")}</span>
             <span className="tabular-nums whitespace-nowrap" style={{ color: "#71717a" }}>
-              ${alternative.price.toFixed(2)}
+              {formatMoney(alternative.price)}
             </span>
           </div>
         ))
@@ -344,8 +346,16 @@ function Conversation() {
             {streaming}
           </div>
         )}
+        {/* Same contract as the shipped `MessageList`'s indicator: three pulsing
+            dots are the only sign the agent is working, and to a screen reader
+            they are punctuation. */}
         {thinking && (
-          <div className="self-start text-[11px] px-3.5" style={{ color: "#a1a1aa" }}>
+          <div
+            role="status"
+            aria-label="Agent is thinking"
+            className="self-start text-[11px] px-3.5"
+            style={{ color: "#a1a1aa" }}
+          >
             <span style={{ animation: "rt-pulse 1.2s ease-in-out infinite" }}>· · ·</span>
           </div>
         )}
@@ -370,7 +380,7 @@ function Conversation() {
 /** The live status dot, on its own subscription rather than a field off a
  *  whole-page read — the header is the only thing here that wants it. */
 function StatusReadout() {
-  const state = useSessionSelector((s) => s.state);
+  const state = useSessionStatus();
   return (
     <>
       <span
@@ -393,58 +403,29 @@ function StatusReadout() {
   );
 }
 
-/**
- * The fatal-error banner.
+/*
+ * The call controls.
  *
- * `role="alert"` is the part a hand-rolled banner leaves out and the part that
- * matters: per the `fatalError` latch in the session core this is the only
- * remaining signal — the status readout beside it goes back to reading like a
- * live call — and a screen reader is never told an unannounced one appeared.
- * `ConsoleShell` carries it, and this template's two-pane page cannot use that
- * shell as its frame; the attribute is what it is here for.
+ * The methods come off `useSessionActions()`, which does not subscribe, and the
+ * two flags off one-field selectors. The whole-snapshot `useSession()` this
+ * replaced re-rendered these four buttons on every STT partial to read two
+ * booleans that change once a call.
  */
-function ErrorBanner() {
-  const error = useSessionSelector((s) => s.error);
-  if (!error) return null;
-  return (
-    <div
-      role="alert"
-      className="px-4 py-2 text-xs"
-      style={{ background: "#fef2f2", color: "#b91c1c", borderTop: "1px solid #fecaca" }}
-    >
-      {error.message} ({error.code})
-    </div>
-  );
-}
-
-/**
- * Start a fresh conversation without leaving the console.
- *
- * Written out here rather than reached for on the session, because there is no
- * one method that does it: `reset()` clears the CONVERSATION and keeps the
- * session, which is wrong for any agent that also keeps session-scoped state —
- * this one's store would come back with the next tool call.
- */
-function newConversation(session: Session): void {
-  session.end();
-  session.start();
-}
-
-/** The call controls: the one place a whole-session read is what is wanted —
- *  `started`, `running` and four methods, in four buttons. */
 function CallControls({ productCount }: { productCount: number }) {
-  const session = useSession();
+  const { start, toggle, restart, end } = useSessionActions();
+  const started = useSessionSelector((s) => s.started);
+  const running = useSessionSelector((s) => s.running);
   return (
     <div
       className="flex items-center gap-2 px-4 py-3"
       style={{ background: "#ffffff", borderTop: "1px solid #e4e4e7" }}
     >
-      {!session.started ? (
+      {!started ? (
         <button
           type="button"
           className="px-4 py-2 border-none rounded-md text-xs font-semibold cursor-pointer text-white"
           style={{ background: "#2563eb" }}
-          onClick={() => session.start()}
+          onClick={() => start()}
         >
           Start call
         </button>
@@ -454,12 +435,12 @@ function CallControls({ productCount }: { productCount: number }) {
             type="button"
             className="px-4 py-2 border-none rounded-md text-xs font-semibold cursor-pointer"
             style={{
-              background: session.running ? "#e4e4e7" : "#2563eb",
-              color: session.running ? "#18181b" : "#ffffff",
+              background: running ? "#e4e4e7" : "#2563eb",
+              color: running ? "#18181b" : "#ffffff",
             }}
-            onClick={() => session.toggle()}
+            onClick={() => toggle()}
           >
-            {session.running ? "Hold" : "Resume"}
+            {running ? "Hold" : "Resume"}
           </button>
           {/* The one-click new conversation the default shell's
               `<Controls>` gives every other template — a custom
@@ -472,7 +453,7 @@ function CallControls({ productCount }: { productCount: number }) {
             type="button"
             className="px-4 py-2 rounded-md text-xs font-semibold cursor-pointer"
             style={{ background: "#ffffff", color: "#18181b", border: "1px solid #e4e4e7" }}
-            onClick={() => newConversation(session)}
+            onClick={restart}
           >
             New Conversation
           </button>
@@ -484,7 +465,7 @@ function CallControls({ productCount }: { productCount: number }) {
             type="button"
             className="px-4 py-2 border-none rounded-md text-xs font-semibold cursor-pointer text-white"
             style={{ background: "#dc2626" }}
-            onClick={() => session.end()}
+            onClick={() => end()}
           >
             End
           </button>
@@ -545,7 +526,7 @@ function App() {
             style={{ borderRight: "1px solid #e4e4e7" }}
           >
             <Conversation />
-            <ErrorBanner />
+            <SessionErrorBanner className="rounded-none border-x-0 border-b-0" />
             <CallControls productCount={view.productCount} />
           </div>
 
@@ -642,7 +623,7 @@ function App() {
             )}
           </span>
           <span className="tabular-nums whitespace-nowrap ml-3">
-            {view.callSeq} call{view.callSeq === 1 ? "" : "s"}
+            {view.callSeq} {plural(view.callSeq, "call")}
           </span>
         </div>
       </div>
@@ -650,7 +631,7 @@ function App() {
   );
 }
 
-client({
+mountClient({
   component: App,
   theme: {
     bg: "#f4f4f5",

package/dist/templates/retail/payment.ts

@@ -4,6 +4,7 @@
  */
 
 import { isToolFailure, type ToolFailure } from "@alexkroman1/aai";
+import { formatMoney } from "@alexkroman1/aai/utils";
 import { resolveOrder } from "./resolve.ts";
 import type { RetailState } from "./shared.ts";
 import { authenticatedUser, findPaymentMethod, isGiftCard, money } from "./store.ts";
@@ -53,13 +54,13 @@ export function planPayment(
   const amount = original.amount;
   if (isGiftCard(newMethod) && newMethod.balance < amount) {
     return {
-      error: `Gift card ${newMethodId}'s balance ($${newMethod.balance.toFixed(2)}) does not cover the $${amount.toFixed(2)} order total.`,
+      error: `Gift card ${newMethodId}'s balance (${formatMoney(newMethod.balance)}) does not cover the ${formatMoney(amount)} order total.`,
     };
   }
 
   return {
     readBack:
-      `charge order ${order.order_id} — $${amount.toFixed(2)} — to ${newMethodId} instead, ` +
+      `charge order ${order.order_id} — ${formatMoney(amount)} — to ${newMethodId} instead, ` +
       `refunding ${original.payment_method_id}`,
     orderId: order.order_id,
     newMethodId,
@@ -102,6 +103,6 @@ export function applyPayment(state: RetailState, plan: PaymentPlan) {
     amount: plan.amount,
     paid_with: plan.newMethodId,
     refunded_to: plan.oldMethodId,
-    message: `Order ${plan.orderId} is now charged to ${plan.newMethodId}, and $${plan.amount.toFixed(2)} is going back to ${plan.oldMethodId}.`,
+    message: `Order ${plan.orderId} is now charged to ${plan.newMethodId}, and ${formatMoney(plan.amount)} is going back to ${plan.oldMethodId}.`,
   };
 }