@alexkroman1/aai-cli 6.11.0 → 8.0.0

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

@@ -1,6 +1,14 @@
 import "@alexkroman1/aai-ui/styles.css";
-import type { AgentState, ChatMessage } from "@alexkroman1/aai-ui";
-import { AutoScroll, client, useSession, useUserTranscript } from "@alexkroman1/aai-ui";
+import type { AgentState } from "@alexkroman1/aai-ui";
+import {
+  AutoScroll,
+  client,
+  useConversation,
+  useSession,
+  useSessionSelector,
+  useTheme,
+} from "@alexkroman1/aai-ui";
+import type { ReactNode } from "react";
 
 const CSS = `
 @keyframes ic-flicker {
@@ -71,89 +79,187 @@ const STATE_COLORS = {
   error: GREEN_DARK,
 } satisfies Record<AgentState, string>;
 
-function InfocomAdventure() {
-  const session = useSession();
-  // `speaking` and `text` in place of a `userTranscript !== null` check: `null`
-  // is silence and `""` is speech detected with no words back yet, and reading
-  // them as one falsy value hides the indicator at the start of every turn.
-  const { speaking, text: userTranscript } = useUserTranscript();
+/**
+ * The exchange, in the CRT idiom.
+ *
+ * `useConversation()` rather than `session.messages`: the four decisions
+ * `<MessageList>` makes — the message/tool-call interleave, the streaming
+ * narrator line, the transcript's `null`-vs-`""` distinction and the thinking
+ * rule — are the hook's now, so this renders them instead of shipping a
+ * conversation missing all four. The old list read `messages` alone, so the
+ * eight `game_state_*` calls and every partial of the narrator's reply were
+ * invisible: the screen sat still until a whole utterance finalized.
+ *
+ * It also subscribes per FIELD, so a partial transcript no longer re-renders
+ * the status bar, the footer and the CRT overlays with it.
+ */
+function Transcript() {
+  const { items, streaming, transcript, thinking } = useConversation();
+  // 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.
+  const theme = useTheme();
+
+  return (
+    <AutoScroll
+      scrollClassName="ic-messages overflow-y-auto"
+      contentClassName="p-5"
+      style={{ scrollbarWidth: "thin", scrollbarColor: `${theme.primary} ${theme.surface}` }}
+    >
+      {items.map((item) =>
+        item.kind === "message" ? (
+          <div
+            key={item.message.id}
+            className={`mb-4 ${item.message.role === "user" ? "ic-user-msg" : ""}`}
+            style={{
+              textShadow:
+                item.message.role === "user"
+                  ? "0 0 5px rgba(0,204,255,0.3)"
+                  : "0 0 5px rgba(0,255,65,0.3)",
+              color: item.message.role === "user" ? CYAN : GREEN,
+            }}
+          >
+            {item.message.content}
+          </div>
+        ) : (
+          // The game engine's own bookkeeping, in the idiom the machine would
+          // have printed it in. Dim, because it is beneath the narration and
+          // not instead of it.
+          <div key={item.toolCall.callId} className="mb-4 text-[13px]" style={{ color: GREEN_DIM }}>
+            {`[ ${item.toolCall.name.replace(/^game_state_/, "").replace(/_/g, " ")}${
+              item.toolCall.status === "pending" ? " …" : ""
+            } ]`}
+          </div>
+        ),
+      )}
+      {streaming !== null && (
+        <div className="mb-4" style={{ color: GREEN, textShadow: "0 0 5px rgba(0,255,65,0.3)" }}>
+          {streaming}
+        </div>
+      )}
+      {transcript.speaking && (
+        <div
+          className="ic-transcript italic"
+          style={{ color: "#007a1e", textShadow: "0 0 5px rgba(0,255,65,0.15)" }}
+        >
+          {transcript.text}
+        </div>
+      )}
+      {thinking && (
+        <div className="animate-pulse" style={{ color: GREEN_DIM }}>
+          &#9612;
+        </div>
+      )}
+    </AutoScroll>
+  );
+}
 
+/** 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,
+  );
+  return <span>Turns: {turns}</span>;
+}
+
+/** The live state dot and its label. */
+function StatusDot() {
+  const state = useSessionSelector((snapshot) => snapshot.state);
+  const dotColor = STATE_COLORS[state];
   const stateLabel =
-    session.state === "listening"
+    state === "listening"
       ? "Listening"
-      : session.state === "speaking"
+      : state === "speaking"
         ? "Narrating"
-        : session.state === "thinking"
+        : state === "thinking"
           ? "Thinking"
-          : session.state === "connecting"
+          : state === "connecting"
             ? "Connecting"
-            : session.state === "ready"
+            : state === "ready"
               ? "Ready"
               : "Idle";
 
-  const msgCount = session.messages.filter((m: ChatMessage) => m.role === "user").length;
+  return (
+    <div
+      className="flex items-center gap-2.5 text-xs uppercase tracking-wider"
+      style={{ color: GREEN_DIM }}
+    >
+      <div
+        className="w-2 h-2 rounded-full"
+        style={{
+          background: dotColor,
+          boxShadow: dotColor !== GREEN_DARK ? `0 0 6px ${dotColor}` : "none",
+        }}
+      />
+      <span>{stateLabel}</span>
+    </div>
+  );
+}
 
-  const dotColor = STATE_COLORS[session.state];
+/**
+ * The fault line.
+ *
+ * `role="alert"` for the reason `ConsoleShell` gives: once `session-core`
+ * latches a fatal error the state eyebrow goes back to reading like a live
+ * session, so this banner is the only remaining signal — and a screen reader is
+ * never told an unannounced one appeared.
+ */
+function ErrorBanner() {
+  const error = useSessionSelector((snapshot) => snapshot.error);
+  if (!error) return null;
+  return (
+    <div
+      role="alert"
+      className="px-5 py-2 text-xs"
+      style={{ background: "#3a0000", color: "#ff4141" }}
+    >
+      ERROR: {error.message}
+    </div>
+  );
+}
 
-  if (!session.started) {
-    return (
-      <>
-        <style>{CSS}</style>
-        <div
-          className="ic-crt fixed inset-0 overflow-hidden"
-          style={{
-            background: CRT_BG,
-            color: GREEN,
-            fontFamily: "monospace",
-            fontSize: "15px",
-            lineHeight: 1.6,
-            animation: "ic-flicker 4s infinite",
-          }}
+/** Pause/resume 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();
+  return (
+    <div
+      className="flex items-center justify-between px-5 py-2 shrink-0 gap-3"
+      style={{ borderTop: `1px solid ${GREEN_DARK}`, background: "#001100" }}
+    >
+      <StatusDot />
+      <div className="flex gap-2">
+        <button
+          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}
         >
-          <div
-            className="flex flex-col items-center justify-center h-full text-center p-10"
-            style={{ animation: "ic-boot 1.5s ease-out" }}
-          >
-            <div
-              className="text-[11px] whitespace-pre mb-8"
-              style={{ textShadow: "0 0 10px rgba(0,255,65,0.5)" }}
-            >
-              {ASCII_LOGO}
-            </div>
-            <div className="text-[13px] mb-2" style={{ color: GREEN_DIM }}>
-              AN INTERACTIVE FICTION
-            </div>
-            <div className="text-[13px] mb-2" style={{ color: GREEN_DIM }}>
-              In the style of the classic text adventures.
-            </div>
-            <div className="text-[13px] mt-4" style={{ color: GREEN }}>
-              VOICE-ENABLED EDITION
-            </div>
-            <button
-              type="button"
-              className="mt-10 px-12 py-3.5 bg-transparent cursor-pointer uppercase tracking-[3px] font-mono text-base"
-              style={{
-                color: GREEN,
-                border: `1px solid ${GREEN}`,
-                animation: "ic-pulse 2s ease-in-out infinite",
-              }}
-              onClick={session.start}
-            >
-              Begin Adventure
-            </button>
-          </div>
-          <div
-            className="fixed inset-0 pointer-events-none z-12"
-            style={{
-              background:
-                "radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%)",
-            }}
-          />
-        </div>
-      </>
-    );
-  }
+          {session.running ? "[P]ause" : "[R]esume"}
+        </button>
+        {/* end() hangs up and drops the sessionId, so the
+            session-scoped game state starts over and the title
+            screen returns. (session.reset() keeps the same
+            sessionId and would resume the old game.) */}
+        <button
+          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()}
+        >
+          [N]ew Game
+        </button>
+      </div>
+    </div>
+  );
+}
 
+/** The CRT itself: the flicker, the scanlines and the vignette every screen
+ *  sits inside. */
+function Crt({ children }: { children: ReactNode }) {
   return (
     <>
       <style>{CSS}</style>
@@ -168,98 +274,7 @@ function InfocomAdventure() {
           animation: "ic-flicker 4s infinite",
         }}
       >
-        <div className="flex flex-col h-full">
-          {/* Status bar */}
-          <div
-            className="flex items-center justify-between px-5 py-2 text-[13px] font-bold tracking-wider shrink-0"
-            style={{ background: GREEN, color: CRT_BG }}
-          >
-            <div className="flex gap-6">
-              <span>CAVERN ADVENTURE</span>
-              <span>Turns: {msgCount}</span>
-            </div>
-            <span>Voice Adventure</span>
-          </div>
-
-          {session.error && (
-            <div className="px-5 py-2 text-xs" style={{ background: "#3a0000", color: "#ff4141" }}>
-              ERROR: {session.error.message}
-            </div>
-          )}
-
-          {/* Messages */}
-          <AutoScroll
-            scrollClassName="ic-messages overflow-y-auto"
-            contentClassName="p-5"
-            style={{ scrollbarWidth: "thin", scrollbarColor: `${GREEN} #001a00` }}
-          >
-            {session.messages.map((msg: ChatMessage, i: number) => (
-              <div
-                key={i}
-                className={`mb-4 ${msg.role === "user" ? "ic-user-msg" : ""}`}
-                style={{
-                  textShadow:
-                    msg.role === "user"
-                      ? "0 0 5px rgba(0,204,255,0.3)"
-                      : "0 0 5px rgba(0,255,65,0.3)",
-                  color: msg.role === "user" ? CYAN : GREEN,
-                }}
-              >
-                {msg.content}
-              </div>
-            ))}
-            {speaking && (
-              <div
-                className="ic-transcript italic"
-                style={{ color: "#007a1e", textShadow: "0 0 5px rgba(0,255,65,0.15)" }}
-              >
-                {userTranscript}
-              </div>
-            )}
-          </AutoScroll>
-
-          {/* Footer controls */}
-          <div
-            className="flex items-center justify-between px-5 py-2 shrink-0 gap-3"
-            style={{ borderTop: `1px solid ${GREEN_DARK}`, background: "#001100" }}
-          >
-            <div
-              className="flex items-center gap-2.5 text-xs uppercase tracking-wider"
-              style={{ color: GREEN_DIM }}
-            >
-              <div
-                className="w-2 h-2 rounded-full"
-                style={{
-                  background: dotColor,
-                  boxShadow: dotColor !== GREEN_DARK ? `0 0 6px ${dotColor}` : "none",
-                }}
-              />
-              <span>{stateLabel}</span>
-            </div>
-            <div className="flex gap-2">
-              <button
-                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}
-              >
-                {session.running ? "[P]ause" : "[R]esume"}
-              </button>
-              {/* end() hangs up and drops the sessionId, so the
-                  session-scoped game state starts over and the title
-                  screen returns. (session.reset() keeps the same
-                  sessionId and would resume the old game.) */}
-              <button
-                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()}
-              >
-                [N]ew Game
-              </button>
-            </div>
-          </div>
-        </div>
+        {children}
         <div
           className="fixed inset-0 pointer-events-none z-12"
           style={{
@@ -271,6 +286,73 @@ function InfocomAdventure() {
   );
 }
 
+function TitleScreen() {
+  const session = useSession();
+  return (
+    <Crt>
+      <div
+        className="flex flex-col items-center justify-center h-full text-center p-10"
+        style={{ animation: "ic-boot 1.5s ease-out" }}
+      >
+        <div
+          className="text-[11px] whitespace-pre mb-8"
+          style={{ textShadow: "0 0 10px rgba(0,255,65,0.5)" }}
+        >
+          {ASCII_LOGO}
+        </div>
+        <div className="text-[13px] mb-2" style={{ color: GREEN_DIM }}>
+          AN INTERACTIVE FICTION
+        </div>
+        <div className="text-[13px] mb-2" style={{ color: GREEN_DIM }}>
+          In the style of the classic text adventures.
+        </div>
+        <div className="text-[13px] mt-4" style={{ color: GREEN }}>
+          VOICE-ENABLED EDITION
+        </div>
+        <button
+          type="button"
+          className="mt-10 px-12 py-3.5 bg-transparent cursor-pointer uppercase tracking-[3px] font-mono text-base"
+          style={{
+            color: GREEN,
+            border: `1px solid ${GREEN}`,
+            animation: "ic-pulse 2s ease-in-out infinite",
+          }}
+          onClick={session.start}
+        >
+          Begin Adventure
+        </button>
+      </div>
+    </Crt>
+  );
+}
+
+function InfocomAdventure() {
+  const started = useSessionSelector((snapshot) => snapshot.started);
+  if (!started) return <TitleScreen />;
+
+  return (
+    <Crt>
+      <div className="flex flex-col h-full">
+        {/* Status bar */}
+        <div
+          className="flex items-center justify-between px-5 py-2 text-[13px] font-bold tracking-wider shrink-0"
+          style={{ background: GREEN, color: CRT_BG }}
+        >
+          <div className="flex gap-6">
+            <span>CAVERN ADVENTURE</span>
+            <TurnCount />
+          </div>
+          <span>Voice Adventure</span>
+        </div>
+
+        <ErrorBanner />
+        <Transcript />
+        <Footer />
+      </div>
+    </Crt>
+  );
+}
+
 client({
   component: InfocomAdventure,
   theme: {

package/dist/templates/infocom-adventure/shared.ts

@@ -26,13 +26,7 @@ export const DEFAULT_GAME_STATE: GameState = {
  */
 export const MAX_HISTORY = 50;
 
-/**
- * How many of those commands a tool reports back to the model.
- *
- * Named because two tools answer with it (`game_state_get` and
- * `game_state_history`), and they live in separate files now — an inline `-5`
- * in each is a number that can disagree with itself.
- */
+/** How many of those commands `game_state_get` reports back to the model. */
 export const REPORTED_HISTORY = 5;
 
 // The game lives in one `sessionSlot`, keyed per session — each session is its
@@ -52,7 +46,24 @@ export const REPORTED_HISTORY = 5;
 // `tool()`.
 export const gameSlot = sessionSlot("game", () => structuredClone(DEFAULT_GAME_STATE));
 
-/** Log a player command, holding {@link MAX_HISTORY}. */
-export function recordCommand(game: GameState, command: string): void {
+/**
+ * Log a player command and count the turn, holding {@link MAX_HISTORY}.
+ *
+ * **Nothing the MODEL can call runs this** — `agent.ts` declares it as a
+ * `user-transcript.committed` hook, so it runs once per thing the player says,
+ * whether or not the narrator cooperates. It replaced a `game_state_history`
+ * TOOL whose `value` argument was the player's own command: the framework
+ * already had the transcript, and the tool existed to hand it back. That cost a
+ * model call per turn and desynced `moves` and `history` from the game every
+ * time the model forgot the system prompt's instruction to call it.
+ *
+ * Which is also why `moves` is counted HERE and not in `game_state_move`. It
+ * used to be both, so a turn where the narrator moved the player AND logged the
+ * command counted twice, and a turn where it did neither counted nothing. A
+ * MOVE is a room change; a TURN is the player saying something, and only one of
+ * those is a thing the game can miscount.
+ */
+export function recordTurn(game: GameState, command: string): void {
   pushCapped(game.history, command, MAX_HISTORY);
+  game.moves++;
 }

package/dist/templates/infocom-adventure/system-prompt.md

@@ -33,7 +33,7 @@ COMMAND INTERPRETATION:
 - "start over" / "new game" / "restart" = restart
 - Accept natural conversational commands and map them to game actions
 
-Use the game state tools to track inventory, location, score, and flags. Use game_state_get to read the current state, game_state_move to change rooms, game_state_take to pick up items, game_state_drop to drop items, game_state_score to add points, game_state_flag to set game flags, and game_state_history to log commands. When the player asks to restart, quit, or start a new game, call game_state_restart, then narrate the opening scene again. Always update state when the player takes an item, moves rooms, or triggers an event. Check state before responding to ensure consistency.
+Use the game state tools to track inventory, location, score, and flags. Use game_state_get to read the current state, game_state_move to change rooms, game_state_take to pick up items, game_state_drop to drop items, game_state_score to add points, and game_state_flag to set game flags. You do not log commands or count moves — the game does that for you on every turn. When the player asks to restart, quit, or start a new game, call game_state_restart, then narrate the opening scene again. Always update state when the player takes an item, moves rooms, or triggers an event. Check state before responding to ensure consistency.
 
 ATMOSPHERE:
 - Underground areas should feel dark and foreboding with the lantern lit, and terrifying in pitch blackness

package/dist/templates/infocom-adventure/tools/game_state_move.ts

@@ -2,13 +2,14 @@ import { z } from "zod";
 import { gameSlot } from "../shared.ts";
 
 export default gameSlot.updateTool({
-  description: "Move the player to a new room and increment the move counter.",
+  description: "Move the player to a new room.",
   inputSchema: z.object({
     value: z.string().describe("Room name to move to"),
   }),
   execute(args, game) {
+    // `moves` is NOT bumped here: a turn is counted once, by the
+    // `user-transcript.committed` hook in `agent.ts`. See `recordTurn`.
     game.currentRoom = args.value;
-    game.moves++;
     return { currentRoom: game.currentRoom, moves: game.moves };
   },
 });