@alexkroman1/aai-cli 6.11.0 → 7.0.0

package/dist/templates/night-owl/tools/recommend.ts

@@ -1,6 +1,5 @@
-import { tool } from "@alexkroman1/aai";
 import { z } from "zod";
-import { CATEGORIES, type Category, MOODS, type Mood } from "../shared.ts";
+import { CATEGORIES, type Category, MOODS, type Mood, nightSlot, type Rec } from "../shared.ts";
 
 const PICKS: Record<Category, Record<Mood, string[]>> = {
   movie: {
@@ -46,19 +45,32 @@ const PICKS: Record<Category, Record<Mood, string[]>> = {
   },
 };
 
-export default tool({
+/**
+ * `updateTool` rather than `tool`: the body is handed the night's own draft and
+ * whatever it leaves behind is stored, so the log the client renders and the
+ * value this returns to the model are written in one place. It must be
+ * SYNCHRONOUS — the mutation is committed when it returns.
+ */
+export default nightSlot.updateTool({
   description: "Get recommendations for movies, music, or books based on mood.",
   inputSchema: z.object({
     category: z.enum(CATEGORIES),
     mood: z.enum(MOODS),
   }),
-  async execute(args, ctx) {
-    const result = {
+  execute: (args, night, ctx) => {
+    const result: Rec = {
       category: args.category,
       mood: args.mood,
       picks: PICKS[args.category][args.mood],
     };
-    ctx.send("recommendations", result);
+    night.recs.unshift(result);
+    // A NUDGE, not state: shown once, when the third pick lands. It is a
+    // `ctx.send` rather than a field on the projection precisely because
+    // replaying it on every reconnect would be nagging — the distinction the
+    // client's header comment spells out.
+    if (night.recs.length === 3) {
+      ctx.send("wind_down", "Three picks in. Want me to work out your bedtime?");
+    }
     return result;
   },
 });

package/dist/templates/pizza-ordering/agent.test.ts

@@ -1,7 +1,13 @@
 /// <reference types="vite/client" />
 
 import type { ToolContext } from "@alexkroman1/aai";
-import { createToolContext, runTool, toolOf, withDiscoveredTools } from "@alexkroman1/aai/testing";
+import {
+  createToolContext,
+  parseToolInput,
+  toolInputIssues,
+  toolRunner,
+  withDiscoveredTools,
+} from "@alexkroman1/aai/testing";
 import { describe, expect, test } from "vitest";
 import authoredAgent from "./agent.ts";
 
@@ -34,11 +40,12 @@ import {
  *  its cart in a session slot and must never touch storage. */
 const makeCtx = (): ToolContext => createToolContext();
 
-/** A tool by the name the model calls it by, bound to this agent. The lookup
- *  and its "no such tool" message are `runTool`'s (`@alexkroman1/aai/testing`);
- *  what is local is only which agent they run against. */
-const run = (name: string, args: Record<string, unknown>, ctx: ToolContext) =>
-  runTool(agentDef, name, args, ctx);
+/** A tool by the name the model calls it by, bound to this agent. The lookup,
+ *  its "no such tool" message and the args-or-context shape are all
+ *  `toolRunner`'s (`@alexkroman1/aai/testing`); what is local is only which
+ *  agent it runs against. Its second parameter is args-or-context, so a
+ *  no-argument tool passes the context in the arguments' place. */
+const run = toolRunner(agentDef);
 
 const margherita: Omit<Pizza, "id"> = {
   size: "medium",
@@ -79,18 +86,11 @@ describe("pricing (shared.ts)", () => {
   });
 
   test("add_pizza schema defaults quantity to 1 and rejects non-positive quantities", async () => {
-    const schema = toolOf(agentDef, "add_pizza").inputSchema;
-    if (!schema) throw new Error("add_pizza has no input schema");
-    // Validate through the Standard Schema contract — the vendor-neutral
-    // interface every inputSchema carries.
-    const validate = (value: unknown) => schema["~standard"].validate(value);
-    const ok = await validate({ size: "small", crust: "thin", toppings: [] });
-    if (ok.issues) throw new Error("expected valid input");
-    expect((ok.value as { quantity: number }).quantity).toBe(1);
-    const zero = await validate({ size: "small", crust: "thin", toppings: [], quantity: 0 });
-    expect(zero.issues).toBeDefined();
-    const frac = await validate({ size: "small", crust: "thin", toppings: [], quantity: 1.5 });
-    expect(frac.issues).toBeDefined();
+    const base = { size: "small", crust: "thin", toppings: [] };
+    const parsed = await parseToolInput<{ quantity: number }>(agentDef, "add_pizza", base);
+    expect(parsed.quantity).toBe(1);
+    expect(await toolInputIssues(agentDef, "add_pizza", { ...base, quantity: 0 })).toBeDefined();
+    expect(await toolInputIssues(agentDef, "add_pizza", { ...base, quantity: 1.5 })).toBeDefined();
   });
 });
 
@@ -101,8 +101,8 @@ describe("tool flow (add → update → remove → place_order)", () => {
     const ctx = makeCtx();
 
     // Empty order guards
-    expect(await run("view_order", {}, ctx)).toEqual({ message: "The order is empty." });
-    expect(await run("place_order", {}, ctx)).toEqual({ error: "Cannot place an empty order." });
+    expect(await run("view_order", ctx)).toEqual({ message: "The order is empty." });
+    expect(await run("place_order", ctx)).toEqual({ error: "Cannot place an empty order." });
 
     // Add two pizzas — IDs increment
     const first = (await run(
@@ -144,7 +144,7 @@ describe("tool flow (add → update → remove → place_order)", () => {
 
     // Name + place the order
     await run("set_customer_name", { name: "Alex" }, ctx);
-    const placed = (await run("place_order", {}, ctx)) as {
+    const placed = (await run("place_order", ctx)) as {
       orderNumber: number;
       customerName: string;
       pizzas: number;
@@ -155,8 +155,8 @@ describe("tool flow (add → update → remove → place_order)", () => {
     expect(placed.total).toBe(`$${(8.99 + 2.0).toFixed(2)}`);
 
     // The cart is cleared after placing — a follow-up order starts fresh.
-    expect(await run("view_order", {}, ctx)).toEqual({ message: "The order is empty." });
-    expect(await run("place_order", {}, ctx)).toEqual({ error: "Cannot place an empty order." });
+    expect(await run("view_order", ctx)).toEqual({ message: "The order is empty." });
+    expect(await run("place_order", ctx)).toEqual({ error: "Cannot place an empty order." });
   });
 
   test("two independent contexts never share pizzas or names", async () => {
@@ -175,10 +175,10 @@ describe("tool flow (add → update → remove → place_order)", () => {
     );
     await run("set_customer_name", { name: "Alice" }, firstCall);
 
-    expect(await run("view_order", {}, secondCall)).toEqual({ message: "The order is empty." });
+    expect(await run("view_order", secondCall)).toEqual({ message: "The order is empty." });
 
     await run("add_pizza", { size: "small", crust: "thin", toppings: [], quantity: 1 }, secondCall);
-    const placedB = (await run("place_order", {}, secondCall)) as {
+    const placedB = (await run("place_order", secondCall)) as {
       customerName: string;
       pizzas: number;
     };
@@ -187,7 +187,7 @@ describe("tool flow (add → update → remove → place_order)", () => {
     expect(placedB.pizzas).toBe(1);
 
     // And the first context's cart survives the second's checkout untouched.
-    const viewA = (await run("view_order", {}, firstCall)) as { pizzas: unknown[] };
+    const viewA = (await run("view_order", firstCall)) as { pizzas: unknown[] };
     expect(viewA.pizzas).toHaveLength(1);
   });
 });
@@ -227,7 +227,7 @@ describe("orderView projection", () => {
     // checkout, and the UI still has to show the order that was just placed.
     const ctx = makeCtx();
     await run("add_pizza", { size: "small", crust: "thin", toppings: [], quantity: 1 }, ctx);
-    await run("place_order", {}, ctx);
+    await run("place_order", ctx);
 
     const view = orderView(orderSlot.get(ctx));
     expect(view.orderPlaced).toBe(true);

package/dist/templates/pizza-ordering/client.tsx

@@ -1,5 +1,5 @@
 import "@alexkroman1/aai-ui/styles.css";
-import { client, useAgentState, useTheme } from "@alexkroman1/aai-ui";
+import { client, useAgentState } from "@alexkroman1/aai-ui";
 import { formatPrice, orderProjection, pizzaPrice } from "./shared.ts";
 
 function PizzaIcon({ size }: { size: string }) {
@@ -20,7 +20,6 @@ function PizzaIcon({ size }: { size: string }) {
 }
 
 function OrderSidebar() {
-  const theme = useTheme();
   // The agent's own cart, projected by `syncState` and pushed after every
   // tool call. This replaced ~45 lines that rebuilt the cart by diffing
   // added/removed/updated events — where one missed event desynced the view
@@ -29,16 +28,11 @@ function OrderSidebar() {
 
   if (order.orderPlaced) {
     return (
-      <div
-        className="flex flex-col items-center gap-4 p-6 text-center"
-        style={{ color: theme.text }}
-      >
+      <div className="flex flex-col items-center gap-4 p-6 text-center text-aai-text">
         <div className="text-5xl">&#10003;</div>
         <h2 className="text-lg font-bold">Order Placed</h2>
         {order.orderNumber && <p className="opacity-70">Order #{order.orderNumber}</p>}
-        <p className="font-bold text-xl" style={{ color: theme.primary }}>
-          {order.total}
-        </p>
+        <p className="font-bold text-xl text-aai-primary">{order.total}</p>
         {order.estimatedMinutes && (
           <p className="opacity-60 text-sm">Ready in ~{order.estimatedMinutes} minutes</p>
         )}
@@ -50,22 +44,16 @@ function OrderSidebar() {
     return (
       <div className="flex flex-col items-center gap-3 p-6 text-center opacity-50">
         <PizzaIcon size="large" />
-        <p className="text-sm" style={{ color: theme.text }}>
-          Your order is empty. Tell me what you'd like.
-        </p>
+        <p className="text-sm text-aai-text">Your order is empty. Tell me what you'd like.</p>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-3 p-4" style={{ color: theme.text }}>
+    <div className="flex flex-col gap-3 p-4 text-aai-text">
       <h3 className="text-sm font-bold opacity-60 uppercase tracking-wide">Your Order</h3>
       {order.pizzas.map((p) => (
-        <div
-          key={p.id}
-          className="flex items-center gap-3 p-3 rounded-lg"
-          style={{ background: theme.surface }}
-        >
+        <div key={p.id} className="flex items-center gap-3 p-3 rounded-lg bg-aai-surface">
           <PizzaIcon size={p.size} />
           <div className="flex-1 min-w-0">
             <p className="text-sm font-medium">
@@ -78,19 +66,14 @@ function OrderSidebar() {
                 : "cheese only"}
             </p>
           </div>
-          <p className="text-sm font-bold whitespace-nowrap" style={{ color: theme.primary }}>
+          <p className="text-sm font-bold whitespace-nowrap text-aai-primary">
             {formatPrice(pizzaPrice(p))}
           </p>
         </div>
       ))}
-      <div
-        className="flex justify-between items-center pt-3 mt-1 border-t"
-        style={{ borderColor: theme.border }}
-      >
+      <div className="flex justify-between items-center pt-3 mt-1 border-t border-aai-border">
         <span className="font-bold">Total</span>
-        <span className="font-bold text-lg" style={{ color: theme.primary }}>
-          {order.total}
-        </span>
+        <span className="font-bold text-lg text-aai-primary">{order.total}</span>
       </div>
     </div>
   );

package/dist/templates/plan-and-execute/agent.test.ts

@@ -1,10 +1,11 @@
 /// <reference types="vite/client" />
 
-import type { GenerateFn, ToolContext } from "@alexkroman1/aai";
+import type { ToolContext } from "@alexkroman1/aai";
 import {
   createToolContext,
-  runTool,
+  okPosition,
   stubGenerate,
+  toolRunner,
   withDiscoveredTools,
 } from "@alexkroman1/aai/testing";
 import { describe, expect, test } from "vitest";
@@ -23,10 +24,10 @@ const agentDef = withDiscoveredTools(
   import.meta.glob("./tools/*.ts", { eager: true }),
 );
 
-import { executeStep, MAX_STEP_SEARCHES, normalizeAct, planNode } from "./graph.ts";
+import { executeStep, MAX_STEP_SEARCHES, normalizeAct, planNode } from "./procedure.ts";
 import { EXECUTOR_SYSTEM, PLANNER_SYSTEM, REPLANNER_SYSTEM, REVISE_SYSTEM } from "./prompts.ts";
 import type { SearchFn } from "./shared.ts";
-import { MAX_PAST_STEPS, planProjection, planSlot, planView } from "./shared.ts";
+import { MAX_PAST_STEPS, planFlow, planProjection, planSlot, planView } from "./shared.ts";
 
 // ─── A scripted model ────────────────────────────────────────────────────────
 //
@@ -80,15 +81,11 @@ function fakeSearch(hits: Record<string, { title: string; url: string }[]>): {
   return { search, queries };
 }
 
-function makeCtx(generate: GenerateFn, sessionId?: string) {
-  return createToolContext({ generate, ...(sessionId ? { sessionId } : {}) });
-}
-
-/** A tool by the name the model calls it by, bound to this agent. The lookup
- *  and its "no such tool" message are `runTool`'s (`@alexkroman1/aai/testing`);
- *  what is local is only which agent they run against. */
-const run = (name: string, args: Record<string, unknown>, ctx: ToolContext) =>
-  runTool(agentDef, name, args, ctx);
+/** A tool by the name the model calls it by, bound to this agent. The lookup,
+ *  its "no such tool" message and the args-or-context shape are all
+ *  `toolRunner`'s (`@alexkroman1/aai/testing`); what is local is only which
+ *  agent it runs against. */
+const run = toolRunner(agentDef);
 
 function stateOf(ctx: ToolContext) {
   return planSlot.get(ctx);
@@ -190,7 +187,7 @@ describe("normalizeAct", () => {
 describe("start_plan", () => {
   test("stores the objective and the steps", async () => {
     const { generate } = scriptedModel({ steps: ["Check prices", "Compare hotels", "Book"] });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     const result = (await run("start_plan", { objective: "a weekend in Lisbon" }, ctx)) as {
       steps: string[];
     };
@@ -214,12 +211,20 @@ describe("start_plan", () => {
 });
 
 describe("work_next_step", () => {
-  test("refuses before there is a plan", async () => {
+  test("is refused before there is a plan, by the flow rather than by the body", async () => {
     const { generate } = scriptedModel();
-    const ctx = makeCtx(generate);
-    expect(await run("work_next_step", {}, ctx)).toEqual({
-      error: "There is no plan yet — use start_plan first.",
+    const ctx = createToolContext({ generate });
+    // The gate is `when: "working"`, so the refusal names the state the call is
+    // actually in and quotes that state's instruction — which is what the model
+    // needs in order to do the right thing on its own next turn.
+    expect(await run("work_next_step", ctx)).toMatchObject({
+      error: expect.stringContaining('this conversation is at "idle"'),
     });
+    expect(await run("work_next_step", ctx)).toMatchObject({
+      error: expect.stringContaining("use start_plan"),
+    });
+    // Refused means the body did not run: nothing was claimed off the plan.
+    expect(stateOf(ctx).pastSteps).toEqual([]);
   });
 
   test("does the head step, records it, and takes the replanner's next plan", async () => {
@@ -228,19 +233,21 @@ describe("work_next_step", () => {
       turns: [{ answer: "Fares are about 180 return." }],
       acts: [{ kind: "plan", steps: ["Compare hotels"] }],
     });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     await run("start_plan", { objective: "a weekend in Lisbon" }, ctx);
 
-    const first = (await run("work_next_step", {}, ctx)) as {
-      done: boolean;
+    const first = okPosition<{
+      finished: boolean;
       step: string;
       result: string;
       remaining: string[];
-    };
-    expect(first.done).toBe(false);
-    expect(first.step).toBe("Check prices");
-    expect(first.result).toContain("180");
-    expect(first.remaining).toEqual(["Compare hotels"]);
+    }>(await run("work_next_step", ctx));
+    expect(first.result.finished).toBe(false);
+    expect(first.result.step).toBe("Check prices");
+    expect(first.result.result).toContain("180");
+    expect(first.result.remaining).toEqual(["Compare hotels"]);
+    // Still working: nothing was concluded, so the flow has not moved on.
+    expect(first.state).toBe("working");
 
     const state = stateOf(ctx);
     expect(state.pastSteps).toHaveLength(1);
@@ -254,19 +261,29 @@ describe("work_next_step", () => {
       turns: [{ answer: "Fares are about 180 return." }],
       acts: [{ kind: "respond", response: "Go in May — flights are about 180 return." }],
     });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     await run("start_plan", { objective: "a weekend in Lisbon" }, ctx);
-    const result = (await run("work_next_step", {}, ctx)) as { done: boolean; response: string };
+    const answered = okPosition<{ finished: boolean; response: string }>(
+      await run("work_next_step", ctx),
+    );
+
+    expect(answered.result.finished).toBe(true);
+    expect(answered.result.response).toContain("180");
+    // A response is what sends ANSWERED — the flow and the data agree because
+    // one tool call moved both.
+    expect(answered.state).toBe("answered");
+    expect(planFlow.position(ctx).state).toBe("answered");
 
-    expect(result.done).toBe(true);
-    expect(result.response).toContain("180");
     const state = stateOf(ctx);
     // The replanner deciding early is a good outcome, so the pending step goes.
     expect(state.plan).toEqual([]);
-    expect(state.response).toBe(result.response);
+    expect(state.response).toBe(answered.result.response);
 
-    // A finished plan is not worked again.
-    expect(await run("work_next_step", {}, ctx)).toMatchObject({ done: true });
+    // A finished plan is not worked again, and now it CANNOT be: the tool is
+    // gated out of `answered` rather than returning a done-shaped result.
+    expect(await run("work_next_step", ctx)).toMatchObject({
+      error: expect.stringContaining('this conversation is at "answered"'),
+    });
     expect(stateOf(ctx).pastSteps).toHaveLength(1);
   });
 
@@ -283,9 +300,9 @@ describe("work_next_step", () => {
         steps: Array.from({ length: total - i - 1 }, (_, j) => `Step ${i + j + 2}`),
       })),
     });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     await run("start_plan", { objective: "a long one" }, ctx);
-    for (let i = 0; i < total; i++) await run("work_next_step", {}, ctx);
+    for (let i = 0; i < total; i++) await run("work_next_step", ctx);
 
     const state = stateOf(ctx);
     expect(state.pastSteps).toHaveLength(MAX_PAST_STEPS);
@@ -302,13 +319,15 @@ describe("work_next_step", () => {
     // session ids would prove nothing extra, and `sessionSlot` could stop
     // keying by session with this still passing.
     const { generate } = scriptedModel({ steps: ["Only step"] });
-    const first = makeCtx(generate);
-    const second = makeCtx(generate);
+    const first = createToolContext({ generate });
+    const second = createToolContext({ generate });
 
     await run("start_plan", { objective: "mine" }, first);
     expect(stateOf(second).objective).toBeNull();
-    expect(await run("work_next_step", {}, second)).toMatchObject({
-      error: "There is no plan yet — use start_plan first.",
+    // The FLOW is per-session too, not just the plan — `second` is still idle.
+    expect(planFlow.position(second).state).toBe("idle");
+    expect(await run("work_next_step", second)).toMatchObject({
+      error: expect.stringContaining('this conversation is at "idle"'),
     });
   });
 });
@@ -323,17 +342,19 @@ describe("revise_plan", () => {
         { kind: "plan", steps: ["Check Porto prices"] },
       ],
     });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     await run("start_plan", { objective: "a weekend in Lisbon" }, ctx);
-    await run("work_next_step", {}, ctx);
+    await run("work_next_step", ctx);
     expect(stateOf(ctx).response).not.toBeNull();
 
-    const revised = (await run("revise_plan", { instruction: "make it Porto instead" }, ctx)) as {
-      done: boolean;
-      remaining: string[];
-    };
-    expect(revised.done).toBe(false);
-    expect(revised.remaining).toEqual(["Check Porto prices"]);
+    const revised = okPosition<{ finished: boolean; remaining: string[] }>(
+      await run("revise_plan", { instruction: "make it Porto instead" }, ctx),
+    );
+    expect(revised.result.finished).toBe(false);
+    expect(revised.result.remaining).toEqual(["Check Porto prices"]);
+    // REOPENED: the one transition that goes backwards, and the reason
+    // `revise_plan` is legal in `answered` at all.
+    expect(revised.state).toBe("working");
 
     const state = stateOf(ctx);
     // The old answer is no longer the answer — the caller moved the goalposts.
@@ -346,13 +367,27 @@ describe("revise_plan", () => {
     expect(calls.at(-1)?.prompt).toContain("make it Porto instead");
   });
 
-  test("refuses before there is a plan", async () => {
+  test("is refused before there is a plan", async () => {
     const { generate } = scriptedModel();
-    const ctx = makeCtx(generate);
-    expect(await run("revise_plan", { instruction: "change it" }, ctx)).toEqual({
-      error: "There is no plan to revise — use start_plan first.",
+    const ctx = createToolContext({ generate });
+    expect(await run("revise_plan", { instruction: "change it" }, ctx)).toMatchObject({
+      error: expect.stringContaining('this conversation is at "idle"'),
     });
   });
+
+  test("a revision that answers outright lands in `answered`", async () => {
+    const { generate } = scriptedModel({
+      steps: ["Check Lisbon prices"],
+      acts: [{ kind: "respond", response: "Nothing to do — you already booked it." }],
+    });
+    const ctx = createToolContext({ generate });
+    await run("start_plan", { objective: "a weekend in Lisbon" }, ctx);
+    const revised = okPosition<{ finished: boolean }>(
+      await run("revise_plan", { instruction: "never mind, it is booked" }, ctx),
+    );
+    expect(revised.result.finished).toBe(true);
+    expect(revised.state).toBe("answered");
+  });
 });
 
 describe("plan_status", () => {
@@ -362,14 +397,20 @@ describe("plan_status", () => {
       turns: [{ answer: "About 180 return." }],
       acts: [{ kind: "plan", steps: ["Book"] }],
     });
-    const ctx = makeCtx(generate);
-    expect(await run("plan_status", {}, ctx)).toEqual({
-      message: "No plan yet. Ask what they want to get done.",
+    const ctx = createToolContext({ generate });
+    // Legal in every state, so it READS the position rather than being gated on
+    // one — and "no plan yet" is the flow's own answer, not a third derivation
+    // of `!objective`.
+    expect(await run("plan_status", ctx)).toMatchObject({
+      stage: "idle",
+      next: expect.stringContaining("start_plan"),
+      objective: null,
     });
 
     await run("start_plan", { objective: "a weekend in Lisbon" }, ctx);
-    await run("work_next_step", {}, ctx);
-    expect(await run("plan_status", {}, ctx)).toMatchObject({
+    await run("work_next_step", ctx);
+    expect(await run("plan_status", ctx)).toMatchObject({
+      stage: "working",
       objective: "a weekend in Lisbon",
       remaining: ["Book"],
       response: null,
@@ -399,11 +440,11 @@ describe("planView projection", () => {
       turns: [{ answer: "Done one." }],
       acts: [{ kind: "plan", steps: ["Two", "Three"] }],
     });
-    const ctx = makeCtx(generate);
+    const ctx = createToolContext({ generate });
     await run("start_plan", { objective: "three things" }, ctx);
     expect(planView(stateOf(ctx)).progress).toBe(0);
 
-    await run("work_next_step", {}, ctx);
+    await run("work_next_step", ctx);
     const view = planView(stateOf(ctx));
     expect(view.progress).toBeCloseTo(1 / 3, 5);
     expect(view.done[0]?.step).toBe("One");

package/dist/templates/plan-and-execute/agent.ts

@@ -3,7 +3,7 @@ import { planProjection } from "./shared.ts";
 
 /**
  * A planning desk you can phone: plan-and-execute, with the caller in the loop.
- * `prompts.ts` carries the attribution, `graph.ts` the three nodes, `shared.ts`
+ * `prompts.ts` carries the attribution, `procedure.ts` the three nodes, `shared.ts`
  * the state (which is their `PlanExecute`, field for field).
  *
  * **The steps do real work.** `work_next_step` runs a bounded search/answer loop

package/dist/templates/plan-and-execute/client.tsx

@@ -1,5 +1,5 @@
 import "@alexkroman1/aai-ui/styles.css";
-import { AutoScroll, client, useAgentState, useTheme } from "@alexkroman1/aai-ui";
+import { AutoScroll, client, useAgentState } from "@alexkroman1/aai-ui";
 import { planProjection } from "./shared.ts";
 
 /**
@@ -10,14 +10,13 @@ import { planProjection } from "./shared.ts";
  * out. The sidebar is where that lives; the call is where the decisions happen.
  */
 function PlanSidebar() {
-  const theme = useTheme();
   const plan = useAgentState(planProjection);
 
   if (!plan.objective) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
         <span className="text-4xl">🗂️</span>
-        <p className="text-sm opacity-60" style={{ color: theme.text }}>
+        <p className="text-sm opacity-60 text-aai-text">
           Say what you want to get done and the plan appears here.
         </p>
       </div>
@@ -25,14 +24,16 @@ function PlanSidebar() {
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-4 p-4" style={{ color: theme.text }}>
+    <div className="flex h-full min-h-0 flex-col gap-4 p-4 text-aai-text">
       <div className="flex flex-col gap-2">
         <h3 className="text-sm font-bold uppercase tracking-wide opacity-60">Objective</h3>
         <p className="text-sm">{plan.objective}</p>
-        <div className="h-1.5 w-full rounded-full" style={{ background: theme.surface }}>
+        <div className="h-1.5 w-full rounded-full bg-aai-surface">
+          {/* The WIDTH is the one thing here that is genuinely computed, so it
+              stays inline; the colour is a token. */}
           <div
-            className="h-1.5 rounded-full transition-all"
-            style={{ width: `${Math.round(plan.progress * 100)}%`, background: theme.primary }}
+            className="h-1.5 rounded-full transition-all bg-aai-primary"
+            style={{ width: `${Math.round(plan.progress * 100)}%` }}
           />
         </div>
         <p className="text-xs opacity-50">
@@ -45,9 +46,9 @@ function PlanSidebar() {
         contentClassName="flex flex-col gap-2 pr-1"
       >
         {plan.done.map((past) => (
-          <div key={past.step} className="rounded-lg p-3" style={{ background: theme.surface }}>
+          <div key={past.step} className="rounded-lg p-3 bg-aai-surface">
             <p className="text-sm">
-              <span style={{ color: theme.primary }}>✓</span> {past.step}
+              <span className="text-aai-primary">✓</span> {past.step}
             </p>
             <p className="mt-1 text-xs opacity-70">{past.result}</p>
             {past.searches.length > 0 && (
@@ -60,8 +61,7 @@ function PlanSidebar() {
           // a revision, so the position is part of the identity.
           <div
             key={`${index}-${step}`}
-            className="rounded-lg p-3 text-sm opacity-60"
-            style={{ border: `1px dashed ${theme.border}` }}
+            className="rounded-lg p-3 text-sm opacity-60 border border-dashed border-aai-border"
           >
             <span className="opacity-50">{plan.done.length + index + 1}.</span> {step}
           </div>
@@ -69,10 +69,7 @@ function PlanSidebar() {
       </AutoScroll>
 
       {plan.response && (
-        <div
-          className="rounded-lg p-3"
-          style={{ background: theme.surface, border: `1px solid ${theme.primary}` }}
-        >
+        <div className="rounded-lg p-3 bg-aai-surface border border-aai-primary">
           <p className="text-[11px] font-bold uppercase tracking-wide opacity-60">Answer</p>
           <p className="mt-1 text-sm">{plan.response}</p>
         </div>