@alexkroman1/aai-cli 13.3.0 → 15.0.0

package/dist/templates/dispatch-center/client.tsx

@@ -1,12 +1,16 @@
+import { 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 {
+  AGENT_STATE_LABELS,
   AutoScroll,
-  client,
+  mountClient,
+  SessionErrorBanner,
   useAgentState,
   useConversation,
-  useSession,
+  useSessionActions,
   useSessionSelector,
+  useSessionStatus,
 } from "@alexkroman1/aai-ui";
 import type { DispatchState, IncidentSummary, Severity, Status } from "./shared.ts";
 import { dashboardProjection } from "./shared.ts";
@@ -77,6 +81,20 @@ const STATE_COLORS = {
   error: "#6b7280",
 } satisfies Record<AgentState, string>;
 
+/*
+ * The board's own vocabulary, spread over the package's record rather than
+ * written as a ternary chain. Only three of the seven states get a dispatch
+ * word; the rest come from `AGENT_STATE_LABELS`, so a state added upstream
+ * reads as something rather than falling through to whichever arm the chain
+ * ended on.
+ */
+const STATE_LABELS: Record<AgentState, string> = {
+  ...AGENT_STATE_LABELS,
+  listening: "LISTENING",
+  thinking: "PROCESSING",
+  speaking: "TRANSMITTING",
+};
+
 function Panel({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="rounded-lg p-3" style={{ background: "#1a1a2e", border: "1px solid #1e293b" }}>
@@ -230,8 +248,16 @@ function Conversation() {
             {streaming}
           </div>
         )}
+        {/* Same contract as the shipped `MessageList`'s indicator: three pulsing
+            dots are the only sign the desk is working, and to a screen reader
+            they are punctuation. */}
         {thinking && (
-          <div className="self-start text-[11px] px-3.5" style={{ color: "#64748b" }}>
+          <div
+            role="status"
+            aria-label="Dispatch is thinking"
+            className="self-start text-[11px] px-3.5"
+            style={{ color: "#64748b" }}
+          >
             <span style={{ animation: "dc-pulse 1.2s ease-in-out infinite" }}>· · ·</span>
           </div>
         )}
@@ -261,7 +287,7 @@ function Conversation() {
  * it one level up dragged the incident board through every snapshot change.
  */
 function StatusReadout() {
-  const state = useSessionSelector((s) => s.state);
+  const state = useSessionStatus();
   return (
     <>
       <span
@@ -278,70 +304,36 @@ function StatusReadout() {
         title={state}
       />
       <span className="text-[11px] font-normal normal-case" style={{ color: "#64748b" }}>
-        {state === "listening"
-          ? "LISTENING"
-          : state === "thinking"
-            ? "PROCESSING"
-            : state === "speaking"
-              ? "TRANSMITTING"
-              : state.toUpperCase()}
+        {STATE_LABELS[state]}
       </span>
     </>
   );
 }
 
-/**
- * The fatal-error banner.
+/*
+ * The shift controls.
  *
- * `role="alert"` is the part that is easy to leave out and is load-bearing: per
- * the `fatalError` latch in the session core this banner is the only remaining
- * signal — the status eyebrow beside it goes back to reading like a live
- * session — and a screen reader is never told an unannounced one appeared. It
- * is what `ConsoleShell` carries, which this template's full-bleed two-pane
- * board cannot use as its frame.
+ * `useSessionActions()` for the methods and two one-field selectors for the
+ * flags, rather than the whole-snapshot `useSession()` this used to hold. The
+ * methods are what the row is really after, and `useSession()` re-renders on
+ * every snapshot change — so four buttons re-rendered at STT-partial rate to
+ * read two booleans that flip once a shift.
  */
-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: "#450a0a", color: "#fca5a5", borderTop: "1px solid #991b1b" }}
-    >
-      ERROR: {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 incident board would come back with the next tool call.
- */
-function newConversation(session: Session): void {
-  session.end();
-  session.start();
-}
-
-/** The shift controls. The one place a whole-session read is what is wanted:
- *  it needs `started`, `running` and four methods, and it is four buttons. */
 function ShiftControls({ logged }: { logged: 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.5 px-4 py-3"
       style={{ background: "#111827", borderTop: "1px solid #1e293b" }}
     >
-      {!session.started ? (
+      {!started ? (
         <button
           type="button"
           className="px-4 py-2 border-none rounded-md font-mono text-xs font-semibold uppercase tracking-wider cursor-pointer text-white"
           style={{ background: "#2563eb" }}
-          onClick={() => session.start()}
+          onClick={() => start()}
         >
           Start Dispatch
         </button>
@@ -351,12 +343,12 @@ function ShiftControls({ logged }: { logged: number }) {
             type="button"
             className="px-4 py-2 border-none rounded-md font-mono text-xs font-semibold uppercase tracking-wider cursor-pointer"
             style={{
-              background: session.running ? "#334155" : "#2563eb",
-              color: session.running ? "#e2e8f0" : "white",
+              background: running ? "#334155" : "#2563eb",
+              color: running ? "#e2e8f0" : "white",
             }}
-            onClick={() => session.toggle()}
+            onClick={() => toggle()}
           >
-            {session.running ? "Pause" : "Resume"}
+            {running ? "Pause" : "Resume"}
           </button>
           {/* The one-click new conversation the default shell's
               `<Controls>` gives every other template — a custom
@@ -375,7 +367,7 @@ function ShiftControls({ logged }: { logged: number }) {
             type="button"
             className="px-4 py-2 border-none rounded-md font-mono text-xs font-semibold uppercase tracking-wider cursor-pointer"
             style={{ background: "#1e293b", color: "#e2e8f0" }}
-            onClick={() => newConversation(session)}
+            onClick={restart}
           >
             New Conversation
           </button>
@@ -388,7 +380,7 @@ function ShiftControls({ logged }: { logged: number }) {
             type="button"
             className="px-4 py-2 border-none rounded-md font-mono text-xs font-semibold uppercase tracking-wider cursor-pointer text-white"
             style={{ background: "#dc2626" }}
-            onClick={() => session.end()}
+            onClick={() => end()}
           >
             End Shift
           </button>
@@ -396,7 +388,7 @@ function ShiftControls({ logged }: { logged: number }) {
       )}
       <div className="flex-1" />
       <span className="text-[10px]" style={{ color: "#475569" }}>
-        {logged} incident{logged !== 1 ? "s" : ""} logged
+        {logged} {plural(logged, "incident")} logged
       </span>
     </div>
   );
@@ -471,7 +463,7 @@ function App() {
             style={{ borderRight: "1px solid #1e293b" }}
           >
             <Conversation />
-            <ErrorBanner />
+            <SessionErrorBanner className="rounded-none border-x-0 border-b-0" />
             <ShiftControls logged={incidentList.length} />
           </div>
 
@@ -524,7 +516,7 @@ function App() {
   );
 }
 
-client({
+mountClient({
   component: App,
   theme: {
     bg: "#0a0a0f",

package/dist/templates/dispatch-center/shared.ts

@@ -71,7 +71,6 @@ export interface Incident {
   createdAt: number;
   updatedAt: number;
   escalationLevel: number;
-  protocolsActivated: string[];
   casualties: { confirmed: number; estimated: number; treated: number };
   hazards: string[];
 }
@@ -82,7 +81,6 @@ export interface DispatchState {
   incidentCounter: number;
   mutualAidCounter: number;
   alertLevel: "green" | "yellow" | "orange" | "red";
-  mutualAidRequested: boolean;
 }
 
 /**
@@ -157,7 +155,6 @@ export function createDefaultState(): DispatchState {
     incidentCounter: 0,
     mutualAidCounter: 0,
     alertLevel: "green",
-    mutualAidRequested: false,
   };
 }
 
@@ -348,7 +345,6 @@ export function createIncident(state: DispatchState, overrides: Partial<Incident
     createdAt: time,
     updatedAt: time,
     escalationLevel: 0,
-    protocolsActivated: [],
     casualties: { confirmed: 0, estimated: 0, treated: 0 },
     hazards: [],
     ...overrides,
@@ -730,8 +726,4 @@ export function recalculateAlertLevel(state: DispatchState): void {
   } else {
     state.alertLevel = "green";
   }
-
-  // Mutual aid tracks system posture: requested at red alert, stood down
-  // when the alert level drops back below red.
-  state.mutualAidRequested = state.alertLevel === "red";
 }

package/dist/templates/dispatch-center/tools/ops_dashboard.ts

@@ -25,7 +25,10 @@ export default dispatchSlot.tool({
 
     return {
       systemAlertLevel: state.alertLevel,
-      mutualAidActive: state.mutualAidRequested,
+      // Derived, not stored: mutual aid is requested at red alert and stood
+      // down when the level drops back below it, so the alert level IS the
+      // fact and the two can never disagree.
+      mutualAidActive: state.alertLevel === "red",
       resourceUtilization: `${utilization}%`,
       resourceSummary,
       activeIncidentCount: activeIncidents.length,

package/dist/templates/embedded-assets/agent.eval.test.ts

@@ -13,8 +13,10 @@
 /**
  * The def a DEPLOYED agent runs: authored, plus what `tools/` declares.
  *
- * The glob is written HERE rather than reached for from a shared helper because
- * this file SHIPS — a scaffolded project has no repo helper to import. Without
+ * Taken from `virtual:aai/agent` rather than a hand-written glob: the plugin
+ * expands it against THIS file's own directory, so the spec needs no glob and
+ * no shared helper — which matters because this file SHIPS, and a scaffolded
+ * project has no repo helper to import. Without
  * it this agent would have no tools and would answer every question from the
  * model's own memory, which is exactly what the cases below forbid.
  *

package/dist/templates/health-assistant/agent.eval.test.ts

@@ -22,8 +22,10 @@
 /**
  * The def a DEPLOYED agent runs: authored, plus what `tools/` declares.
  *
- * The glob is written HERE rather than reached for from a shared helper because
- * this file SHIPS — a scaffolded project has no repo helper to import. Without
+ * Taken from `virtual:aai/agent` rather than a hand-written glob: the plugin
+ * expands it against THIS file's own directory, so the spec needs no glob and
+ * no shared helper — which matters because this file SHIPS, and a scaffolded
+ * project has no repo helper to import. Without
  * it the desk would have no tools and would answer every one of these from
  * memory, which is the failure these cases exist to catch.
  *

package/dist/templates/infocom-adventure/client.tsx

@@ -1,10 +1,11 @@
 import "@alexkroman1/aai-ui/styles.css";
-import type { AgentState, Session } from "@alexkroman1/aai-ui";
+import type { AgentState } from "@alexkroman1/aai-ui";
 import {
   AutoScroll,
-  client,
+  mountClient,
   useConversation,
-  useSession,
+  useSessionActions,
+  useSessionError,
   useSessionSelector,
   useTheme,
 } from "@alexkroman1/aai-ui";
@@ -98,7 +99,7 @@ function Transcript() {
   // The one theme read left in this file, and the case `useTheme()` is still
   // for: `scrollbar-color` takes TWO values and has no utility class, so it has
   // to be a style — and reading it off the theme beats re-pinning the two hex
-  // codes the `client({ theme })` block below already declares.
+  // codes the `mountClient({ theme })` block below already declares.
   const theme = useTheme();
 
   return (
@@ -146,8 +147,16 @@ function Transcript() {
           {transcript.text}
         </div>
       )}
+      {/* Same contract as the shipped `MessageList`'s indicator: the blinking
+          block is the only sign the parser is working, and to a screen reader it
+          is one unpronounceable glyph. */}
       {thinking && (
-        <div className="animate-pulse" style={{ color: GREEN_DIM }}>
+        <div
+          role="status"
+          aria-label="The parser is thinking"
+          className="animate-pulse"
+          style={{ color: GREEN_DIM }}
+        >
           &#9612;
         </div>
       )}
@@ -155,12 +164,18 @@ function Transcript() {
   );
 }
 
+/** Module scope, so the selector has a STABLE identity: an inline arrow makes
+ *  `useSyncExternalStoreWithSelector` rebuild its selection memo every render,
+ *  and this runs on every snapshot push — each STT partial and streaming
+ *  delta. Counting with `reduce` rather than `filter().length` for the same
+ *  reason: the array copy is thrown away, and it grows for the whole adventure. */
+const userTurns = (snapshot: { messages: { role: string }[] }): number =>
+  snapshot.messages.reduce((n, message) => (message.role === "user" ? n + 1 : n), 0);
+
 /** The turn counter — a NUMBER out of the selector, so a new message array with
  *  the same user-message count re-renders nothing. */
 function TurnCount() {
-  const turns = useSessionSelector(
-    (snapshot) => snapshot.messages.filter((message) => message.role === "user").length,
-  );
+  const turns = useSessionSelector(userTurns);
   return <span>Turns: {turns}</span>;
 }
 
@@ -207,7 +222,7 @@ function StatusDot() {
  * never told an unannounced one appeared.
  */
 function ErrorBanner() {
-  const error = useSessionSelector((snapshot) => snapshot.error);
+  const error = useSessionError();
   if (!error) return null;
   return (
     <div
@@ -215,33 +230,22 @@ function ErrorBanner() {
       className="px-5 py-2 text-xs"
       style={{ background: "#3a0000", color: "#ff4141" }}
     >
-      ERROR: {error.message}
+      ERROR: {error.message} ({error.code})
     </div>
   );
 }
 
-/**
- * Start a fresh conversation without leaving the game screen.
+/*
+ * Pause/resume, new game and hang-up.
  *
- * 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 game's world would come back with the next tool call. `end()` drops the
- * resume identity, so the redial is a brand-new session (fresh world, opening
- * scene included), and `start()` puts the player straight into it rather than
- * back at the title screen.
+ * `useSessionActions()` is the narrow way `<Controls>` reaches the methods, and
+ * it is published now — so this row takes the three it presses and one
+ * selector for the flag it reads, instead of a whole-snapshot `useSession()`
+ * that re-rendered the footer on every partial transcript.
  */
-function newConversation(session: Session): void {
-  session.end();
-  session.start();
-}
-
-/** Pause/resume, new game and hang-up. The only place a whole-session
- *  subscription is still needed: the ACTIONS live on `useSession()`, and
- *  `useSessionCore` — the narrow way `<Controls>` reaches them — is not on the
- *  public surface. */
 function Footer() {
-  const session = useSession();
+  const { toggle, restart, end } = useSessionActions();
+  const running = useSessionSelector((snapshot) => snapshot.running);
   return (
     <div
       className="flex items-center justify-between px-5 py-2 shrink-0 gap-3"
@@ -253,9 +257,9 @@ function Footer() {
           type="button"
           className="px-4 py-1 bg-transparent cursor-pointer uppercase tracking-wider font-mono text-[11px]"
           style={{ color: GREEN_DIM, border: `1px solid ${GREEN_DARK}` }}
-          onClick={session.toggle}
+          onClick={toggle}
         >
-          {session.running ? "[P]ause" : "[R]esume"}
+          {running ? "[P]ause" : "[R]esume"}
         </button>
         {/* The one-click new conversation the default shell's `<Controls>`
             gives every other template — a custom `component:` renders no
@@ -266,7 +270,7 @@ function Footer() {
           type="button"
           className="px-4 py-1 bg-transparent cursor-pointer uppercase tracking-wider font-mono text-[11px]"
           style={{ color: GREEN_DIM, border: `1px solid ${GREEN_DARK}` }}
-          onClick={() => newConversation(session)}
+          onClick={restart}
         >
           [N]ew Game
         </button>
@@ -276,7 +280,7 @@ function Footer() {
           type="button"
           className="px-4 py-1 bg-transparent cursor-pointer uppercase tracking-wider font-mono text-[11px]"
           style={{ color: GREEN_DIM, border: `1px solid ${GREEN_DARK}` }}
-          onClick={() => session.end()}
+          onClick={() => end()}
         >
           [Q]uit
         </button>
@@ -315,7 +319,7 @@ function Crt({ children }: { children: ReactNode }) {
 }
 
 function TitleScreen() {
-  const session = useSession();
+  const { start } = useSessionActions();
   return (
     <Crt>
       <div
@@ -345,7 +349,7 @@ function TitleScreen() {
             border: `1px solid ${GREEN}`,
             animation: "ic-pulse 2s ease-in-out infinite",
           }}
-          onClick={session.start}
+          onClick={start}
         >
           Begin Adventure
         </button>
@@ -381,7 +385,7 @@ function InfocomAdventure() {
   );
 }
 
-client({
+mountClient({
   component: InfocomAdventure,
   theme: {
     bg: CRT_BG,

package/dist/templates/link-digest/agent.test.ts

@@ -26,7 +26,7 @@
  */
 
 import {
-  createWorkflowCtx,
+  createWorkflowContext,
   schemaInputIssues,
   stubGatewayRoute,
   stubStepInfo,
@@ -170,7 +170,7 @@ describe("fetchArticle", () => {
   });
 
   test("fails FATALLY on a 404 and plainly on a 503", async () => {
-    // `stepFetchOk` builds the message, so it is the SDK's one spelling for a
+    // `stepFetchOrFail` builds the message, so it is the SDK's one spelling for a
     // bad response — the REQUEST, the status, and a preview of any body.
     stubPage("", 404);
     await expect(fetchArticle("https://example.com/gone")).rejects.toThrow(
@@ -264,7 +264,7 @@ describe("summarize", () => {
     // which is the only place the policy is observable at all. `runSteps: false`
     // because the subject is the declared policy rather than the work: the steps
     // would otherwise need a page and a model.
-    const ctx = createWorkflowCtx({ runSteps: false });
+    const ctx = createWorkflowContext({ runSteps: false });
     await digestFlow({ url: "https://example.com/a" }, ctx);
 
     const summarizeStep = ctx.steps.find((step) => step.name === "summarize");

package/dist/templates/link-digest/agent.ts

@@ -13,8 +13,8 @@
  * the entire product, and the declaration says so:
  *
  * - `workflowApp()` is `agent({ …, page: "static" })` with the discriminant
- *   already set. The declaration is not decoration: `createServer` declines
- *   `/websocket` with a reason (so a page mounted with `client()` by mistake
+ *   already set. The declaration is not decoration: `createRuntimeServer` declines
+ *   `/websocket` with a reason (so a page mounted with `mountClient()` by mistake
  *   fails the same way in `aai dev` and in production rather than only after a
  *   deploy) and telephony defaults off.
  * - There is no `stt`/`llm`/`tts`, no `tools` and no `systemPrompt` — and they