diff --git a/components/editor/ai-chat-cards.tsx b/components/editor/ai-chat-cards.tsx
new file mode 100644
index 0000000..0b4c4c4
--- /dev/null
+++ b/components/editor/ai-chat-cards.tsx
@@ -0,0 +1,304 @@
+"use client";
+
+import { FormEvent, useId, useState } from "react";
+import { Check, ChevronDown } from "lucide-react";
+
+import type { ClarifyAnswer, ClarifyQuestion, DesignPlan, DesignResultSummary } from "@/lib/ai/agent-schema";
+import { cn } from "@/lib/utils";
+
+// Assistant-side cards for the AI Architect chat: clarifying questions, a
+// proposed plan, and a generation result. Only the newest open card is
+// interactive; older ones render read-only as part of the transcript.
+
+const focusClass = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink/60";
+
+const kickerClass = "font-mono text-chrome tracking-chrome text-ink-soft uppercase";
+
+const cardClass = "w-full space-y-3 rounded-paper border border-ink/20 bg-paper-bright px-3.5 py-3 font-brand text-sm text-ink";
+
+const primaryButtonClass = cn(
+  "flex h-9 cursor-pointer items-center justify-center rounded-paper bg-ink px-3.5 font-brand text-sm font-semibold text-paper-cream",
+  "transition-[translate] duration-(--duration-press) active:translate-y-px disabled:cursor-not-allowed disabled:opacity-40",
+  focusClass,
+);
+
+/** Components listed before the rest are folded behind "Show all". */
+const COMPONENTS_PREVIEW_COUNT = 6;
+
+// ---------------------------------------------------------------------------
+// Questions
+// ---------------------------------------------------------------------------
+
+interface QuestionsCardProps {
+  intro: string;
+  questions: ClarifyQuestion[];
+  /** Answers the user already sent for these questions, if any. */
+  answers: ClarifyAnswer[] | null;
+  /** True for the latest open questions while no reply is pending. */
+  interactive: boolean;
+  onSubmit: (answers: ClarifyAnswer[]) => void;
+  onSkip: () => void;
+}
+
+export function QuestionsCard({ intro, questions, answers, interactive, onSubmit, onSkip }: QuestionsCardProps) {
+  const idPrefix = useId();
+  const [chosen, setChosen] = useState<Record<string, string>>({});
+  const [typed, setTyped] = useState<Record<string, string>>({});
+
+  // A typed answer wins over a picked option.
+  const draftAnswers: ClarifyAnswer[] = questions.flatMap((question) => {
+    const answer = (typed[question.id] ?? "").trim() || chosen[question.id];
+    return answer ? [{ questionId: question.id, answer }] : [];
+  });
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (interactive && draftAnswers.length > 0) {
+      onSubmit(draftAnswers);
+    }
+  };
+
+  return (
+    <form className={cardClass} onSubmit={handleSubmit}>
+      <p className={kickerClass}>
+        {questions.length === 1 ? "A quick question" : `${questions.length} quick questions`}
+      </p>
+      {intro ? <p className="whitespace-pre-wrap">{intro}</p> : null}
+
+      <ol className="space-y-4">
+        {questions.map((question, index) => {
+          const labelId = `${idPrefix}-q${index}`;
+          const sent = answers?.find((entry) => entry.questionId === question.id)?.answer;
+          const selected = interactive ? (typed[question.id] ?? "").trim() ? undefined : chosen[question.id] : sent;
+          const sentIsCustom = !interactive && sent !== undefined && !question.options.includes(sent);
+
+          return (
+            <li key={question.id} className="space-y-2">
+              <div>
+                <p id={labelId} className="font-semibold">
+                  {index + 1}. {question.question}
+                </p>
+                {question.why ? <p className="mt-0.5 text-xs text-ink-soft">{question.why}</p> : null}
+              </div>
+
+              {question.options.length > 0 ? (
+                <div role="group" aria-labelledby={labelId} className="flex flex-wrap gap-1.5">
+                  {question.options.map((option) => {
+                    const active = selected === option;
+                    return (
+                      <button
+                        key={option}
+                        type="button"
+                        disabled={!interactive}
+                        aria-pressed={active}
+                        onClick={() =>
+                          setChosen((previous) => ({
+                            ...previous,
+                            [question.id]: previous[question.id] === option ? "" : option,
+                          }))
+                        }
+                        className={cn(
+                          "inline-flex min-h-7 items-center gap-1 rounded-paper border px-2 py-1 text-left text-xs transition-colors",
+                          active ? "border-ink bg-ink text-paper-cream" : "border-ink/20 text-ink",
+                          interactive ? "cursor-pointer hover:border-ink" : "cursor-default",
+                          !interactive && !active && "opacity-60",
+                          focusClass,
+                        )}
+                      >
+                        {active ? <Check className="h-3 w-3 shrink-0" aria-hidden="true" /> : null}
+                        {option}
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
+
+              {interactive ? (
+                <input
+                  type="text"
+                  aria-labelledby={labelId}
+                  placeholder="Or type your own answer"
+                  value={typed[question.id] ?? ""}
+                  onChange={(event) => setTyped((previous) => ({ ...previous, [question.id]: event.target.value }))}
+                  className={cn(
+                    "block h-8 w-full rounded-paper border border-ink/25 bg-paper-cream px-2.5 text-xs text-ink placeholder:text-ink-soft/70",
+                    "focus-visible:border-ink",
+                    focusClass,
+                  )}
+                />
+              ) : null}
+
+              {sentIsCustom ? <p className="text-xs text-ink">→ {sent}</p> : null}
+            </li>
+          );
+        })}
+      </ol>
+
+      {interactive ? (
+        <div className="flex items-center justify-between gap-3 border-t border-ink/10 pt-3">
+          <button
+            type="button"
+            onClick={onSkip}
+            className={cn("cursor-pointer text-xs text-ink-soft underline underline-offset-2 hover:text-ink", focusClass)}
+          >
+            Skip, plan with assumptions
+          </button>
+          <button type="submit" disabled={draftAnswers.length === 0} className={primaryButtonClass}>
+            Send answers
+          </button>
+        </div>
+      ) : null}
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Plan
+// ---------------------------------------------------------------------------
+
+interface PlanCardProps {
+  intro: string;
+  plan: DesignPlan;
+  /** True for the latest plan while no reply is pending. */
+  interactive: boolean;
+  onGenerate: () => void;
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="space-y-1.5">
+      <h3 className={kickerClass}>{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+export function PlanCard({ intro, plan, interactive, onGenerate }: PlanCardProps) {
+  const [showAllComponents, setShowAllComponents] = useState(false);
+  const hiddenComponents = Math.max(0, plan.components.length - COMPONENTS_PREVIEW_COUNT);
+  const components = showAllComponents ? plan.components : plan.components.slice(0, COMPONENTS_PREVIEW_COUNT);
+
+  return (
+    <div className={cardClass}>
+      <p className={kickerClass}>Proposed plan</p>
+      {intro ? <p className="whitespace-pre-wrap">{intro}</p> : null}
+      <p className="text-ink">{plan.summary}</p>
+
+      {plan.decisions.length > 0 ? (
+        <Section title={`Key decisions · ${plan.decisions.length}`}>
+          <ul className="space-y-2">
+            {plan.decisions.map((decision) => (
+              <li
+                key={decision.title}
+                className="rounded-paper border border-ink/15 bg-paper-accent-marker-amber/45 px-3 py-2"
+              >
+                <p className="text-xs font-semibold text-ink-soft">{decision.title}</p>
+                <p className="font-semibold text-ink">{decision.choice}</p>
+                <p className="mt-0.5 text-xs text-ink">{decision.rationale}</p>
+                {decision.alternatives.length > 0 ? (
+                  <p className="mt-1 text-xs text-ink-soft">Considered: {decision.alternatives.join(" · ")}</p>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </Section>
+      ) : null}
+
+      <Section title={`Components · ${plan.components.length}`}>
+        <ul className="divide-y divide-ink/10 rounded-paper border border-ink/10">
+          {components.map((component) => (
+            <li key={component.name} className="px-2.5 py-1.5">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="font-medium text-ink">{component.name}</span>
+                <span className={cn(kickerClass, "shrink-0")}>{component.role}</span>
+              </div>
+              <p className="text-xs text-ink-soft">{component.responsibility}</p>
+            </li>
+          ))}
+        </ul>
+        {hiddenComponents > 0 ? (
+          <button
+            type="button"
+            onClick={() => setShowAllComponents((previous) => !previous)}
+            aria-expanded={showAllComponents}
+            className={cn("cursor-pointer text-xs text-ink-soft underline underline-offset-2 hover:text-ink", focusClass)}
+          >
+            {showAllComponents ? "Show fewer" : `Show all ${plan.components.length}`}
+          </button>
+        ) : null}
+      </Section>
+
+      {plan.flows.length > 0 ? (
+        <Section title="Key flows">
+          <ol className="list-decimal space-y-1 pl-4 text-xs text-ink">
+            {plan.flows.map((flow) => (
+              <li key={flow}>{flow}</li>
+            ))}
+          </ol>
+        </Section>
+      ) : null}
+
+      {plan.assumptions.length > 0 ? (
+        <Section title="Assumptions">
+          <ul className="list-disc space-y-1 pl-4 text-xs text-ink-soft">
+            {plan.assumptions.map((assumption) => (
+              <li key={assumption}>{assumption}</li>
+            ))}
+          </ul>
+        </Section>
+      ) : null}
+
+      {interactive ? (
+        <div className="space-y-2 border-t border-ink/10 pt-3">
+          <button type="button" onClick={onGenerate} className={cn(primaryButtonClass, "w-full")}>
+            Draw this plan
+          </button>
+          <p className={cn(kickerClass, "text-center")}>Or describe changes below</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Result
+// ---------------------------------------------------------------------------
+
+interface ResultCardProps {
+  text: string;
+  result: DesignResultSummary;
+}
+
+export function ResultCard({ text, result }: ResultCardProps) {
+  return (
+    <div className={cardClass}>
+      <p className="flex items-start gap-2">
+        <Check className="mt-0.5 h-4 w-4 shrink-0 text-mat-green" aria-hidden="true" />
+        <span>{text}</span>
+      </p>
+
+      {result.decisions.length > 0 ? (
+        <details className="group">
+          <summary
+            className={cn(
+              "flex cursor-pointer list-none items-center gap-1 marker:hidden [&::-webkit-details-marker]:hidden",
+              kickerClass,
+              focusClass,
+            )}
+          >
+            Decisions · {result.decisions.length}
+            <ChevronDown className="h-3.5 w-3.5 transition-transform group-open:rotate-180" aria-hidden="true" />
+          </summary>
+          <ul className="mt-2 space-y-1 text-xs">
+            {result.decisions.map((decision) => (
+              <li key={decision.title}>
+                <span className="text-ink-soft">{decision.title}:</span>{" "}
+                <span className="font-medium text-ink">{decision.choice}</span>
+              </li>
+            ))}
+          </ul>
+        </details>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/editor/ai-sidebar.tsx b/components/editor/ai-sidebar.tsx
index 97963a5..b77f231 100644
--- a/components/editor/ai-sidebar.tsx
+++ b/components/editor/ai-sidebar.tsx
@@ -4,8 +4,16 @@ import { FormEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { ArrowRight, ChevronDown, Download, FileText, History, Loader2, Plus, Sparkle, X } from "lucide-react";
 
+import { PlanCard, QuestionsCard, ResultCard } from "@/components/editor/ai-chat-cards";
 import { AiSessionHistory } from "@/components/editor/ai-session-history";
-import { useAiSession } from "@/hooks/use-ai-session";
+import { useAiSession, type AiChatMessage } from "@/hooks/use-ai-session";
+import {
+  readAnswersPayload,
+  readPlanPayload,
+  readQuestionsPayload,
+  readReplyPayload,
+  readResultPayload,
+} from "@/lib/ai/agent-schema";
 import { cn } from "@/lib/utils";
 
 interface AiSidebarProps {
@@ -30,6 +38,14 @@ const tabClass = cn(
   focusClass,
 );
 
+/**
+ * The newest assistant reply that did not fail. The server treats questions
+ * as open, and a plan as the one to draw, only while they are that reply.
+ */
+function latestAssistantReply(messages: readonly AiChatMessage[]): AiChatMessage | undefined {
+  return messages.findLast((message) => message.role === "assistant" && !message.isError);
+}
+
 function SparkleMark({ className }: { className?: string }) {
   return (
     <span
@@ -54,6 +70,7 @@ export function AiSidebar({ open, onClose, projectId }: AiSidebarProps) {
     canSwitchSession,
     isLoadingSession,
     sessionLoadFailed,
+    sendTurn,
     sendPrompt,
     startNewChat,
     selectSession,
@@ -65,6 +82,15 @@ export function AiSidebar({ open, onClose, projectId }: AiSidebarProps) {
 
   const showEmptyState = messages.length === 0 && !isLoadingSession && !sessionLoadFailed;
 
+  const latestReply = latestAssistantReply(messages);
+  const openKind = !isRunning && latestReply ? latestReply.kind : null;
+  const composerPlaceholder =
+    openKind === "QUESTIONS"
+      ? "Or answer in your own words..."
+      : openKind === "PLAN"
+        ? "Describe changes to the plan..."
+        : "Ask Draftly AI to design or refine your architecture...";
+
   // Keep the latest message in view, including when a saved chat opens.
   useEffect(() => {
     if (!showHistory) {
@@ -246,7 +272,7 @@ export function AiSidebar({ open, onClose, projectId }: AiSidebarProps) {
                   </div>
                 ) : null}
 
-                {messages.map((message) => {
+                {messages.map((message, index) => {
                   if (message.role === "user") {
                     return (
                       <div key={message.id} className="flex justify-end">
@@ -257,6 +283,48 @@ export function AiSidebar({ open, onClose, projectId }: AiSidebarProps) {
                     );
                   }
 
+                  const isLatestReply = message.id === latestReply?.id && !isRunning;
+
+                  if (!message.isError && message.kind === "QUESTIONS") {
+                    const questions = readQuestionsPayload(message.payload);
+                    if (questions && questions.length > 0) {
+                      const next = messages[index + 1];
+                      return (
+                        <QuestionsCard
+                          key={message.id}
+                          intro={readReplyPayload(message.payload)}
+                          questions={questions}
+                          answers={next?.kind === "ANSWERS" ? readAnswersPayload(next.payload) : null}
+                          interactive={isLatestReply}
+                          onSubmit={(answers) => sendTurn({ type: "answers", answers })}
+                          onSkip={() => sendTurn({ type: "skip" })}
+                        />
+                      );
+                    }
+                  }
+
+                  if (!message.isError && message.kind === "PLAN") {
+                    const plan = readPlanPayload(message.payload);
+                    if (plan) {
+                      return (
+                        <PlanCard
+                          key={message.id}
+                          intro={readReplyPayload(message.payload)}
+                          plan={plan}
+                          interactive={isLatestReply}
+                          onGenerate={() => sendTurn({ type: "generate" })}
+                        />
+                      );
+                    }
+                  }
+
+                  if (!message.isError && message.kind === "RESULT") {
+                    const result = readResultPayload(message.payload);
+                    if (result) {
+                      return <ResultCard key={message.id} text={message.text} result={result} />;
+                    }
+                  }
+
                   return (
                     <div key={message.id} className="flex justify-start">
                       <div
@@ -290,7 +358,7 @@ export function AiSidebar({ open, onClose, projectId }: AiSidebarProps) {
           <form className="border-t border-ink/15 px-5 pt-4 pb-4" onSubmit={handleSubmit}>
             <textarea
               aria-label="Message Draftly AI"
-              placeholder="Ask Draftly AI to design or refine your architecture..."
+              placeholder={composerPlaceholder}
               value={inputValue}
               onChange={(event) => setInputValue(event.target.value)}
               onKeyDown={handleKeyDown}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 8149439..ba686c9 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -10,7 +10,9 @@ Update this file whenever the current phase, active feature, or implementation s
 
 - Persistent, multi-turn AI design sessions (plan: storage → wire sessions → turn engine → UI cards → generation
   quality → docs). Steps 1 (storage, PR #21), 2 (sessions in the sidebar, PR #22) and 3 (clarify → plan → generate
-  turn engine) are done; next is step 4, question/plan/result cards in the sidebar.
+  turn engine, PR #23) are done; step 4 (question/plan/result cards in the sidebar) is built on
+  `feat/ai-agent-cards` and awaiting a live run; next is step 5, generation quality (canvas context, kickers,
+  fills, edge styles, validate-and-repair).
 - After that: the Specs tab (Generate Spec + automatic Markdown download), which remains inert.
 
 ## Completed
@@ -1333,7 +1335,42 @@ Update this file whenever the current phase, active feature, or implementation s
         timeout path is verified. Two worker runs on `gemini-3-flash-preview` got no response while a direct call took
         30.7s and `gemini-2.5-flash` runs through the same worker succeeded, which points to preview-model overload
         rather than code.
-    - Not yet verified: the full flow getting past the skip turn to a plan and a generated diagram through the Trigger
-      worker, with the fix. Both free-tier Gemini quotas on this key are used up (`gemini-3.5-flash` and
-      `gemini-2.5-flash`, 20 requests each); the last run failed on the first turn with the usage-limit message.
-      Re-run `verify-ai-turn-flow-e2e.ts` once quota resets or with a billed key.
+    - Verified end to end on 2026-09-16 on `gemini-3.5-flash-lite` through the restarted Trigger worker (run with the
+      step 4 branch, whose engine and task are unchanged from step 3): first message → 3 questions (15.8s); skip →
+      PLAN (12.3s) with 9 components, 4 flows, 3 decisions, and assumptions, phase `PLANNED`, brief stored, plan payload
+      valid; answers after the plan → 409; generate → RESULT "Added 9 components and 8 connections to the canvas."
+      (12.6s) carrying the plan's decisions, phase `COMPLETE`. Test project, room, sessions, and TaskRuns removed.
+- AI sessions, step 4: question, plan, and result cards in the AI sidebar (2026-09-16, branch `feat/ai-agent-cards`):
+    - Local testing model is now `gemini-3.5-flash-lite` (`.env.local`, not committed).
+    - `lib/ai/agent-schema.ts` (client-safe) now also holds `TurnInput`, `GENERATE_TURN_TEXT` / `SKIP_TURN_TEXT`, and
+      payload readers (`readReplyPayload`, `readQuestionsPayload`, `readAnswersPayload`, `readPlanPayload`,
+      `readResultPayload`) used by both the server and the sidebar. `session-turns.ts` uses them instead of its own
+      copies, and QUESTIONS / PLAN payloads now also store the agent's `reply` (older messages read as an empty intro).
+    - `hooks/use-ai-session.ts`: `sendTurn(input)` for `message`, `answers`, `generate`, and `skip` (`sendPrompt` wraps
+      it); the optimistic user message matches what the server will store (answers paired with their questions, the
+      fixed generate/skip texts); every message now exposes `kind` and `payload`. Non-message turns require an existing
+      session.
+    - `components/editor/ai-chat-cards.tsx`:
+      - `QuestionsCard`: kicker, intro, numbered questions with their "why", option chips (`aria-pressed`, toggle),
+        and a free-text input per question (a typed answer wins over a chip). "Send answers" is disabled until one
+        question is answered; "Skip, plan with assumptions" sends a skip turn. Once answered, it renders read-only with
+        the chosen chip pressed and any typed answer shown.
+      - `PlanCard`: summary; key decisions highlighted on marker-amber paper with choice, rationale, and "Considered"
+        alternatives; components (first 6, "Show all N" toggle) with role labels; key flows; assumptions; and a
+        "Draw this plan" button with an "or describe changes below" hint.
+      - `ResultCard`: the canvas summary with a collapsible "Decisions · N" list.
+    - `ai-sidebar.tsx` renders assistant messages by kind (falling back to the text bubble when a payload doesn't
+      read). Only the newest non-failed assistant reply is interactive, and only while no turn is pending, which
+      mirrors the server's rules for open questions and the plan to draw. The composer placeholder changes to "Or answer
+      in your own words..." / "Describe changes to the plan..." while questions or a plan are open.
+    - Validation checks:
+      - `pnpm typecheck` and `pnpm lint` passed
+      - Static render checks (29, `react-dom/server`): open vs answered questions (chips, inputs, disabled send, skip,
+        labelled groups, pressed chip, typed answer, no controls), plan (intro, highlighted decisions, alternatives
+        line only when present, 6 of 8 components with show-all, flows, assumptions, draw action only when
+        interactive, empty sections omitted), result (collapsible decisions only when present), and the payload
+        readers (including step 2 results without decisions)
+      - DB turn checks (15) passed after the shared-reader refactor
+      - Live flow on `gemini-3.5-flash-lite` through the Trigger worker passed (message → questions → skip → plan →
+        generate; see the step 3 entry), including QUESTIONS and PLAN payloads that now store the agent's reply.
+    - Not yet verified: clicking through the cards in a signed-in browser (chips, typed answers, send, skip, draw).
diff --git a/hooks/use-ai-session.ts b/hooks/use-ai-session.ts
index de18aba..8b13a63 100644
--- a/hooks/use-ai-session.ts
+++ b/hooks/use-ai-session.ts
@@ -4,6 +4,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useUpdateMyPresence } from "@liveblocks/react";
 import { useRealtimeRun } from "@trigger.dev/react-hooks";
 
+import {
+  formatAnswersText,
+  GENERATE_TURN_TEXT,
+  readQuestionsPayload,
+  SKIP_TURN_TEXT,
+  type TurnInput,
+} from "@/lib/ai/agent-schema";
 import { MAX_SESSIONS_PER_USER_PROJECT } from "@/lib/ai/session-limits";
 import {
   DESIGN_AGENT_STAGE_KEY,
@@ -11,12 +18,16 @@ import {
   type DesignAgentStage,
 } from "@/lib/design-generation";
 import type { designAgentTask } from "@/src/trigger/design-agent";
-import type { AiSessionDetail, AiSessionSummary } from "@/types/ai-session";
+import type { AiMessageKind, AiSessionDetail, AiSessionSummary } from "@/types/ai-session";
 
 export interface AiChatMessage {
   id: string;
   role: "user" | "assistant";
+  /** Decides how the sidebar renders the message (plain bubble, questions, plan, result). */
+  kind: AiMessageKind;
   text: string;
+  /** Structured part of the message; read with the payload readers in `agent-schema`. */
+  payload: unknown;
   /** Assistant messages reporting a failure render in the error style. */
   isError?: boolean;
 }
@@ -36,6 +47,7 @@ export interface UseAiSessionResult {
   canSwitchSession: boolean;
   isLoadingSession: boolean;
   sessionLoadFailed: boolean;
+  sendTurn: (input: TurnInput) => void;
   sendPrompt: (text: string) => void;
   startNewChat: () => void;
   selectSession: (sessionId: string) => void;
@@ -85,7 +97,9 @@ function writeStoredSessionId(projectId: string, sessionId: string): void {
 function describeRequestFailure(status: number, serverError: string | undefined): string {
   switch (status) {
     case 400:
-      return "That message could not be sent. Try rephrasing it.";
+      return serverError === "Invalid turn"
+        ? "That message could not be sent. Try rephrasing it."
+        : (serverError ?? "That message could not be sent. Try rephrasing it.");
     case 401:
       return "Your session expired. Sign in again to keep designing.";
     case 403:
@@ -103,6 +117,25 @@ function toSummary({ id, title, phase, lastActivityAt, expiresAt, createdAt }: A
   return { id, title, phase, lastActivityAt, expiresAt, createdAt };
 }
 
+/** What the user's side of a turn reads as, shown until the server transcript returns. */
+function describeTurn(input: TurnInput, session: AiSessionDetail | null): { text: string; kind: AiMessageKind } {
+  switch (input.type) {
+    case "message":
+      return { text: input.text.trim(), kind: "TEXT" };
+    case "answers": {
+      const questionsMessage = session?.messages.findLast(
+        (message) => message.kind === "QUESTIONS" && message.status === "COMPLETE",
+      );
+      const questions = questionsMessage ? (readQuestionsPayload(questionsMessage.payload) ?? []) : [];
+      return { text: formatAnswersText(questions, input.answers), kind: "ANSWERS" };
+    }
+    case "generate":
+      return { text: GENERATE_TURN_TEXT, kind: "TEXT" };
+    case "skip":
+      return { text: SKIP_TURN_TEXT, kind: "TEXT" };
+  }
+}
+
 type SessionLoadResult =
   | { status: "ok"; session: AiSessionDetail }
   | { status: "missing" }
@@ -128,11 +161,11 @@ async function fetchSession(projectId: string, sessionId: string): Promise<Sessi
 /**
  * Drives the AI Architect chat against stored sessions.
  *
- * The server transcript is the single source of truth: a sent message comes
- * back as a PENDING reply carrying a run id, and the reply is filled in when
- * the session is read after the run finishes. Trigger Realtime only shortens
- * that wait; polling guarantees it. A reload therefore restores the chat and
- * picks the in-flight run back up.
+ * The server transcript is the single source of truth: a sent turn comes back
+ * as a PENDING reply carrying a run id, and the reply is filled in when the
+ * session is read after the run finishes. Trigger Realtime only shortens that
+ * wait; polling guarantees it. A reload therefore restores the chat and picks
+ * the in-flight run back up.
  *
  * Must be used inside a `RoomProvider` — it writes presence for the room.
  */
@@ -142,7 +175,7 @@ export function useAiSession(projectId: string): UseAiSessionResult {
   const [session, setSession] = useState<AiSessionDetail | null>(null);
   const [failedSessionId, setFailedSessionId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [optimisticPrompt, setOptimisticPrompt] = useState<string | null>(null);
+  const [optimisticTurn, setOptimisticTurn] = useState<{ text: string; kind: AiMessageKind } | null>(null);
   const [requestError, setRequestError] = useState<string | null>(null);
   const [runAccess, setRunAccess] = useState<{ runId: string; token: string } | null>(null);
 
@@ -306,15 +339,18 @@ export function useAiSession(projectId: string): UseAiSessionResult {
 
   const isRunning = isSubmitting || pendingRunId !== null;
 
-  const sendPrompt = useCallback(
-    (text: string) => {
-      const prompt = text.trim();
-      if (!prompt || isRunning) {
+  const sendTurn = useCallback(
+    (input: TurnInput) => {
+      if (isRunning) {
+        return;
+      }
+      const turn = describeTurn(input, visibleSession);
+      if (turn.text.length === 0) {
         return;
       }
 
       setRequestError(null);
-      setOptimisticPrompt(prompt);
+      setOptimisticTurn(turn);
       setIsSubmitting(true);
 
       void (async () => {
@@ -323,10 +359,15 @@ export function useAiSession(projectId: string): UseAiSessionResult {
 
           // A new chat is only stored once it has a first message.
           if (!sessionId) {
+            if (input.type !== "message") {
+              setRequestError(describeRequestFailure(404, undefined));
+              return;
+            }
+
             const created = await fetch(`/api/projects/${projectId}/ai-sessions`, {
               method: "POST",
               headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ title: prompt }),
+              body: JSON.stringify({ title: turn.text }),
             });
             const createdBody = (await created.json().catch(() => null)) as
               | { session?: AiSessionSummary; error?: string }
@@ -347,7 +388,7 @@ export function useAiSession(projectId: string): UseAiSessionResult {
           const response = await fetch(`/api/projects/${projectId}/ai-sessions/${sessionId}/turns`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ type: "message", text: prompt }),
+            body: JSON.stringify(input.type === "message" ? { type: "message", text: turn.text } : input),
           });
           const body = (await response.json().catch(() => null)) as
             | { session?: AiSessionDetail; error?: string }
@@ -369,14 +410,16 @@ export function useAiSession(projectId: string): UseAiSessionResult {
         } catch {
           setRequestError(GENERIC_ERROR);
         } finally {
-          setOptimisticPrompt(null);
+          setOptimisticTurn(null);
           setIsSubmitting(false);
         }
       })();
     },
-    [activeSessionId, dropSession, isRunning, projectId, upsertSummary],
+    [activeSessionId, dropSession, isRunning, projectId, upsertSummary, visibleSession],
   );
 
+  const sendPrompt = useCallback((text: string) => sendTurn({ type: "message", text }), [sendTurn]);
+
   const startNewChat = useCallback(() => {
     if (isSubmitting) {
       return;
@@ -429,18 +472,33 @@ export function useAiSession(projectId: string): UseAiSessionResult {
       .map((message) => ({
         id: message.id,
         role: message.role === "USER" ? "user" : "assistant",
+        kind: message.kind,
         text: message.content,
+        payload: message.payload,
         isError: message.kind === "ERROR" || message.status === "FAILED",
       }));
 
-    if (optimisticPrompt) {
-      transcript.push({ id: "optimistic-prompt", role: "user", text: optimisticPrompt });
+    if (optimisticTurn) {
+      transcript.push({
+        id: "optimistic-turn",
+        role: "user",
+        kind: optimisticTurn.kind,
+        text: optimisticTurn.text,
+        payload: null,
+      });
     }
     if (requestError) {
-      transcript.push({ id: "request-error", role: "assistant", text: requestError, isError: true });
+      transcript.push({
+        id: "request-error",
+        role: "assistant",
+        kind: "ERROR",
+        text: requestError,
+        payload: null,
+        isError: true,
+      });
     }
     return transcript;
-  }, [optimisticPrompt, requestError, visibleSession]);
+  }, [optimisticTurn, requestError, visibleSession]);
 
   // Let collaborators in the room see that a generation is in progress.
   useEffect(() => {
@@ -472,6 +530,7 @@ export function useAiSession(projectId: string): UseAiSessionResult {
     canSwitchSession: !isSubmitting,
     isLoadingSession: hasActiveSession && failedSessionId !== activeSessionId,
     sessionLoadFailed: hasActiveSession && failedSessionId === activeSessionId,
+    sendTurn,
     sendPrompt,
     startNewChat,
     selectSession,
diff --git a/lib/ai/agent-schema.ts b/lib/ai/agent-schema.ts
index 6ae7744..f414ef5 100644
--- a/lib/ai/agent-schema.ts
+++ b/lib/ai/agent-schema.ts
@@ -240,6 +240,68 @@ export interface DesignAgentPayload {
   clarifyRounds: number;
 }
 
+/** A user turn as sent to the turns route. */
+export type TurnInput =
+  | { type: "message"; text: string }
+  | { type: "answers"; answers: ClarifyAnswer[] }
+  | { type: "generate" }
+  | { type: "skip" };
+
+/** Stored and shown as the user's message for turns that carry no typed text. */
+export const GENERATE_TURN_TEXT = "Generate this plan.";
+export const SKIP_TURN_TEXT = "Skip the questions and plan with sensible assumptions.";
+
+// ---------------------------------------------------------------------------
+// Stored payload readers
+//
+// Message payloads come back from the database as unknown JSON; these narrow
+// them for both the server (building the next turn) and the sidebar (cards).
+// ---------------------------------------------------------------------------
+
+function payloadField(payload: unknown, field: string): unknown {
+  return typeof payload === "object" && payload !== null ? (payload as Record<string, unknown>)[field] : undefined;
+}
+
+const clarifyAnswerSchema = z.object({ questionId: z.string(), answer: z.string() });
+
+const resultPayloadSchema = z.object({
+  nodeCount: z.number(),
+  edgeCount: z.number(),
+  decisions: z.array(planDecisionSchema).optional(),
+});
+
+export interface DesignResultSummary {
+  nodeCount: number;
+  edgeCount: number;
+  decisions: PlanDecision[];
+}
+
+/** The agent's short reply stored with questions and plans; empty for older messages. */
+export function readReplyPayload(payload: unknown): string {
+  const reply = payloadField(payload, "reply");
+  return typeof reply === "string" ? reply : "";
+}
+
+export function readQuestionsPayload(payload: unknown): ClarifyQuestion[] | null {
+  const parsed = z.array(clarifyQuestionSchema).safeParse(payloadField(payload, "questions"));
+  return parsed.success ? parsed.data : null;
+}
+
+export function readAnswersPayload(payload: unknown): ClarifyAnswer[] | null {
+  const parsed = z.array(clarifyAnswerSchema).safeParse(payloadField(payload, "answers"));
+  return parsed.success ? parsed.data : null;
+}
+
+export function readPlanPayload(payload: unknown): DesignPlan | null {
+  const parsed = designPlanSchema.safeParse(payloadField(payload, "plan"));
+  return parsed.success ? parsed.data : null;
+}
+
+export function readResultPayload(payload: unknown): DesignResultSummary | null {
+  const parsed = resultPayloadSchema.safeParse(payload);
+  return parsed.success ? { ...parsed.data, decisions: parsed.data.decisions ?? [] } : null;
+}
+
 // ---------------------------------------------------------------------------
 // Text renderings
 //
diff --git a/lib/ai/session-turns.ts b/lib/ai/session-turns.ts
index 805ab75..e5cc966 100644
--- a/lib/ai/session-turns.ts
+++ b/lib/ai/session-turns.ts
@@ -1,23 +1,24 @@
 import { ApiError, runs, tasks } from "@trigger.dev/sdk/v3";
-import { z } from "zod";
 
 import type { Prisma } from "@/app/generated/prisma/client";
 import {
   AGENT_HISTORY_LIMIT,
-  clarifyQuestionSchema,
   designAgentResultSchema,
   designBriefSchema,
-  designPlanSchema,
   formatAnswersText,
   formatPlanText,
   formatQuestionsText,
+  GENERATE_TURN_TEXT,
+  readPlanPayload,
+  readQuestionsPayload,
+  SKIP_TURN_TEXT,
   type AgentHistoryEntry,
-  type ClarifyAnswer,
   type ClarifyQuestion,
   type DesignAgentPayload,
   type DesignAgentResult,
   type DesignBrief,
   type DesignPlan,
+  type TurnInput,
   type TurnIntent,
 } from "@/lib/ai/agent-schema";
 import {
@@ -75,26 +76,16 @@ function latestAssistantMessage(session: AiSessionDetail): AiMessageDto | undefi
   return session.messages.findLast((message) => message.role === "ASSISTANT" && message.status === "COMPLETE");
 }
 
-function readPayloadField(message: AiMessageDto | undefined, field: string): unknown {
-  const payload = message?.payload;
-  return typeof payload === "object" && payload !== null ? (payload as Record<string, unknown>)[field] : undefined;
-}
-
 /** The most recent plan proposed in the session, if any. */
 function latestPlan(session: AiSessionDetail): DesignPlan | null {
   const message = session.messages.findLast((entry) => entry.kind === "PLAN" && entry.status === "COMPLETE");
-  const parsed = designPlanSchema.safeParse(readPayloadField(message, "plan"));
-  return parsed.success ? parsed.data : null;
+  return message ? readPlanPayload(message.payload) : null;
 }
 
 /** Questions still awaiting answers: only while they are the latest reply. */
 function openQuestions(session: AiSessionDetail): ClarifyQuestion[] {
   const message = latestAssistantMessage(session);
-  if (message?.kind !== "QUESTIONS") {
-    return [];
-  }
-  const parsed = z.array(clarifyQuestionSchema).safeParse(readPayloadField(message, "questions"));
-  return parsed.success ? parsed.data : [];
+  return message?.kind === "QUESTIONS" ? (readQuestionsPayload(message.payload) ?? []) : [];
 }
 
 function storedBrief(session: AiSessionDetail): DesignBrief | null {
@@ -161,7 +152,7 @@ function outcomeFromResult(result: DesignAgentResult): TurnOutcome {
         kind: "QUESTIONS",
         status: "COMPLETE",
         content: formatQuestionsText(result.reply, result.questions),
-        payload: { questions: result.questions },
+        payload: { reply: result.reply, questions: result.questions },
         phase: "CLARIFYING",
         brief: result.brief,
         countsClarifyRound: true,
@@ -171,7 +162,7 @@ function outcomeFromResult(result: DesignAgentResult): TurnOutcome {
         kind: "PLAN",
         status: "COMPLETE",
         content: formatPlanText(result.reply, result.plan),
-        payload: { plan: result.plan },
+        payload: { reply: result.reply, plan: result.plan },
         phase: "PLANNED",
         brief: result.brief,
       };
@@ -284,11 +275,7 @@ export async function getSettledSession(scope: SessionScope, sessionId: string):
 // Starting a turn
 // ---------------------------------------------------------------------------
 
-export type TurnInput =
-  | { type: "message"; text: string }
-  | { type: "answers"; answers: ClarifyAnswer[] }
-  | { type: "generate" }
-  | { type: "skip" };
+export type { TurnInput };
 
 interface ResolvedTurn {
   intent: TurnIntent;
@@ -331,12 +318,12 @@ function resolveTurn(session: AiSessionDetail, input: TurnInput): ResolveTurnRes
       if (!latestPlan(session)) {
         return { ok: false, status: 409, error: "There is no plan to generate yet" };
       }
-      return { ok: true, turn: { intent: "generate", content: "Generate this plan.", kind: "TEXT" } };
+      return { ok: true, turn: { intent: "generate", content: GENERATE_TURN_TEXT, kind: "TEXT" } };
 
     case "skip":
       return {
         ok: true,
-        turn: { intent: "skip", content: "Skip the questions and plan with sensible assumptions.", kind: "TEXT" },
+        turn: { intent: "skip", content: SKIP_TURN_TEXT, kind: "TEXT" },
       };
   }
 }