From ce0660a537f2e4e7abf0bf8bda48812734e7ae85 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 8 Apr 2026 14:05:28 -0400
Subject: [PATCH 01/35] chore(apollo-vertex): AI Chat isolated

---
 .../ai-chat/preview/mock-data.ts              | 200 ++++++++++
 .../ai-chat/preview/page.tsx                  | 366 ++++++++++++++++++
 apps/apollo-vertex/lib/auth.ts                |   2 +-
 apps/apollo-vertex/next-env.d.ts              |   2 +-
 apps/apollo-vertex/registry.json              |  79 +++-
 .../registry/accordion/accordion.tsx          |   2 +-
 .../ai-chat/adapters/agenthub/tools.ts        |   2 +-
 .../ai-chat/components/ai-chat-code-block.tsx |  66 ++++
 .../components/ai-chat-empty-state.tsx        |  56 +++
 .../ai-chat/components/ai-chat-input.tsx      | 156 ++++++--
 .../ai-chat/components/ai-chat-loading.tsx    |  51 ++-
 .../ai-chat/components/ai-chat-markdown.tsx   |  60 +--
 .../components/ai-chat-message-actions.tsx    | 157 ++++++++
 .../ai-chat/components/ai-chat-message.tsx    | 157 +++++++-
 .../ai-chat/components/ai-chat-provider.tsx   |  39 ++
 .../components/ai-chat-suggestions.tsx        |  22 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 238 +++++++-----
 apps/apollo-vertex/registry/ai-chat/types.ts  |  36 ++
 .../registry/alert-dialog/alert-dialog.tsx    |   2 +-
 apps/apollo-vertex/registry/avatar/avatar.tsx |   2 +-
 apps/apollo-vertex/registry/badge/badge.tsx   |   2 +-
 .../registry/breadcrumb/breadcrumb.tsx        |   2 +-
 apps/apollo-vertex/registry/button/button.tsx |   2 +-
 apps/apollo-vertex/registry/card/card.tsx     |   2 +-
 .../registry/checkbox/checkbox.tsx            |   2 +-
 .../registry/command/command.tsx              |   2 +-
 .../registry/context-menu/context-menu.tsx    |   2 +-
 .../data-table/data-table-column-header.tsx   |   2 +-
 .../registry/data-table/data-table-row.tsx    |   2 +-
 .../registry/date-picker/date-picker.tsx      |   2 +-
 apps/apollo-vertex/registry/dialog/dialog.tsx |   2 +-
 apps/apollo-vertex/registry/drawer/drawer.tsx |   2 +-
 .../registry/dropdown-menu/dropdown-menu.tsx  |   2 +-
 .../registry/hover-card/hover-card.tsx        |   2 +-
 apps/apollo-vertex/registry/input/input.tsx   |   2 +-
 apps/apollo-vertex/registry/label/label.tsx   |   2 +-
 .../registry/menubar/menubar.tsx              |   2 +-
 .../navigation-menu/navigation-menu.tsx       |   2 +-
 .../registry/pagination/pagination.tsx        |   2 +-
 .../registry/popover/popover.tsx              |   2 +-
 .../registry/progress/progress.tsx            |   2 +-
 .../registry/radio-group/radio-group.tsx      |   2 +-
 .../registry/resizable/resizable.tsx          |   2 +-
 .../registry/scroll-area/scroll-area.tsx      |   2 +-
 apps/apollo-vertex/registry/select/select.tsx |   2 +-
 .../registry/separator/separator.tsx          |   2 +-
 apps/apollo-vertex/registry/sheet/sheet.tsx   |   2 +-
 .../registry/shell/shell-nav-item.tsx         |   2 +-
 .../registry/sidebar/sidebar-content.tsx      |   2 +-
 .../registry/sidebar/sidebar-footer.tsx       |   2 +-
 .../registry/sidebar/sidebar-group-action.tsx |   2 +-
 .../sidebar/sidebar-group-content.tsx         |   2 +-
 .../registry/sidebar/sidebar-group-label.tsx  |   2 +-
 .../registry/sidebar/sidebar-group.tsx        |   2 +-
 .../registry/sidebar/sidebar-header.tsx       |   2 +-
 .../registry/sidebar/sidebar-input.tsx        |   2 +-
 .../registry/sidebar/sidebar-inset.tsx        |   2 +-
 .../registry/sidebar/sidebar-menu-action.tsx  |   2 +-
 .../registry/sidebar/sidebar-menu-badge.tsx   |   2 +-
 .../registry/sidebar/sidebar-menu-button.tsx  |   2 +-
 .../registry/sidebar/sidebar-menu-item.tsx    |   2 +-
 .../sidebar/sidebar-menu-sub-button.tsx       |   2 +-
 .../sidebar/sidebar-menu-sub-item.tsx         |   2 +-
 .../registry/sidebar/sidebar-menu-sub.tsx     |   2 +-
 .../registry/sidebar/sidebar-menu.tsx         |   2 +-
 .../registry/sidebar/sidebar-rail.tsx         |   2 +-
 .../registry/sidebar/sidebar-separator.tsx    |   2 +-
 .../registry/sidebar/sidebar-trigger.tsx      |   2 +-
 .../registry/sidebar/sidebar.tsx              |   2 +-
 apps/apollo-vertex/registry/switch/switch.tsx |   2 +-
 apps/apollo-vertex/registry/table/table.tsx   |   2 +-
 apps/apollo-vertex/registry/tabs/tabs.tsx     |   2 +-
 .../registry/textarea/textarea.tsx            |   2 +-
 apps/apollo-vertex/registry/toggle/toggle.tsx |   2 +-
 .../registry/tooltip/tooltip.tsx              |   2 +-
 .../use-data-table/useEntityDataTable.tsx     |   3 +-
 .../use-data-table/usePersistedColumnOrder.ts |   3 +-
 .../use-data-table/usePersistedSorting.ts     |   3 +-
 .../templates/ai-chat/AiChatLoginGate.tsx     |   2 +-
 79 files changed, 1565 insertions(+), 251 deletions(-)
 create mode 100644 apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
 create mode 100644 apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
new file mode 100644
index 000000000..8601abe16
--- /dev/null
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
@@ -0,0 +1,200 @@
+import type { UIMessage } from "@tanstack/ai-client";
+
+export const MOCK_MESSAGES_BASIC: UIMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    parts: [{ type: "text", content: "What is Apollo Design System?" }],
+    createdAt: new Date(Date.now() - 120000),
+  },
+  {
+    id: "2",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content:
+          "Apollo is UiPath's open-source design system. It provides a unified component library with **design tokens**, **React components**, and **Web Components** for building consistent user interfaces.",
+      },
+    ],
+    createdAt: new Date(Date.now() - 60000),
+  },
+];
+
+export const MOCK_MESSAGES_MARKDOWN: UIMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    parts: [
+      {
+        type: "text",
+        content: "Show me all the markdown formatting you support.",
+      },
+    ],
+    createdAt: new Date(),
+  },
+  {
+    id: "2",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content: `Here's a comprehensive demo of supported markdown:
+
+## Headings & Text
+
+This is a paragraph with **bold**, *italic*, and \`inline code\`.
+
+> This is a blockquote with some important information.
+
+---
+
+## Lists
+
+**Unordered list:**
+- First item
+- Second item with **bold**
+- Third item
+
+**Ordered list:**
+1. Step one
+2. Step two
+3. Step three
+
+## Code Block
+
+\`\`\`typescript
+interface AiChatProps {
+  messages: UIMessage[];
+  isLoading: boolean;
+  onSendMessage: (content: string) => void;
+}
+\`\`\`
+
+## Table
+
+| Component | Status | Description |
+|-----------|--------|-------------|
+| AiChat | Ready | Main chat shell |
+| AiChatMessage | Ready | Message renderer |
+| AiChatInput | Ready | Text input |
+| AiChatMarkdown | Ready | Markdown renderer |
+
+## Links
+
+Check [Apollo UI](https://github.com/UiPath/apollo-ui) for more info.`,
+      },
+    ],
+    createdAt: new Date(),
+  },
+];
+
+export const MOCK_MESSAGES_CONVERSATION: UIMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    parts: [{ type: "text", content: "Can you help me set up a new project?" }],
+    createdAt: new Date(Date.now() - 300000),
+  },
+  {
+    id: "2",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content:
+          "Of course! I'd be happy to help. What kind of project are you looking to create?",
+      },
+    ],
+    createdAt: new Date(Date.now() - 240000),
+  },
+  {
+    id: "3",
+    role: "user",
+    parts: [
+      {
+        type: "text",
+        content: "A React app with Tailwind CSS and TypeScript.",
+      },
+    ],
+    createdAt: new Date(Date.now() - 180000),
+  },
+  {
+    id: "4",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content:
+          "Great choice! Here's how to get started:\n\n1. Run `npx create-next-app@latest`\n2. Select **TypeScript** and **Tailwind CSS** during setup\n3. Install Apollo components:\n\n```bash\nnpx shadcn@latest add @uipath/button\n```\n\nWould you like me to walk through any of these steps in detail?",
+      },
+    ],
+    createdAt: new Date(Date.now() - 120000),
+  },
+  {
+    id: "5",
+    role: "user",
+    parts: [{ type: "text", content: "Yes, explain step 3 please." }],
+    createdAt: new Date(Date.now() - 60000),
+  },
+  {
+    id: "6",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content:
+          "The `shadcn` CLI copies component source code directly into your project. When you run the command, it will:\n\n- Create `components/ui/button.tsx` in your project\n- Add any required dependencies to `package.json`\n- Set up the `cn()` utility if not present\n\nYou own the code — modify it however you need.",
+      },
+    ],
+    createdAt: new Date(),
+  },
+];
+
+export const MOCK_MESSAGES_WITH_CHOICES: UIMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    parts: [{ type: "text", content: "What presentation style should I use?" }],
+    createdAt: new Date(),
+  },
+  {
+    id: "2",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        content: "Here are some options based on your audience:",
+      },
+      {
+        type: "tool-call",
+        id: "call-1",
+        name: "presentChoices",
+        arguments: "{}",
+        state: "input-complete" as const,
+      },
+      {
+        type: "tool-result",
+        toolCallId: "call-1",
+        state: "complete" as const,
+        content: JSON.stringify({
+          type: "choices",
+          prompt: "Pick a presentation style:",
+          options: [
+            { id: "1", label: "Executive Summary", recommended: true },
+            { id: "2", label: "Technical Deep Dive" },
+            { id: "3", label: "Workshop Format" },
+          ],
+        }),
+      },
+    ],
+    createdAt: new Date(),
+  },
+];
+
+export const MOCK_CHOICE_OPTIONS = [
+  { id: "1", label: "Option A — Recommended", recommended: true },
+  { id: "2", label: "Option B — Alternative" },
+  { id: "3", label: "Option C — Experimental" },
+  { id: "4", label: "Option D — Conservative" },
+];
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
new file mode 100644
index 000000000..363b9d439
--- /dev/null
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -0,0 +1,366 @@
+"use client";
+
+import { AiChat } from "@/registry/ai-chat/components/ai-chat";
+import { AiChatCodeBlock } from "@/registry/ai-chat/components/ai-chat-code-block";
+import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state";
+import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input";
+import { AiChatLoading } from "@/registry/ai-chat/components/ai-chat-loading";
+import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
+import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
+import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
+import {
+  MOCK_CHOICE_OPTIONS,
+  MOCK_MESSAGES_BASIC,
+  MOCK_MESSAGES_CONVERSATION,
+  MOCK_MESSAGES_MARKDOWN,
+  MOCK_MESSAGES_WITH_CHOICES,
+} from "./mock-data";
+
+function noop() {
+  // no-op for preview
+}
+
+function SectionHeader({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="mb-4">
+      <h2 className="text-xl font-bold text-foreground">{title}</h2>
+      <p className="text-sm text-muted-foreground mt-1">{description}</p>
+    </div>
+  );
+}
+
+function PreviewCard({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`border rounded-lg bg-background overflow-hidden ${className ?? ""}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default function AiChatPreviewPage() {
+  return (
+    <div className="max-w-6xl mx-auto p-8 space-y-12">
+      <div>
+        <h1 className="text-3xl font-bold text-foreground">
+          {"AI Chat — Component Preview"}
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          {"All visual states and sub-components rendered with mock data."}
+        </p>
+      </div>
+
+      {/* ── 1. Empty State (default) ────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Empty State (Default)"
+          description="Default empty state with AI gradient icon."
+        />
+        <PreviewCard className="h-[400px]">
+          <AiChat
+            messages={[]}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Apollo Assistant"
+          />
+        </PreviewCard>
+      </section>
+
+      {/* ── 2. Empty State (with suggestions) ──────────────── */}
+      <section>
+        <SectionHeader
+          title="Empty State (Custom with Suggestions)"
+          description="AiChatEmptyState component with quick-start prompts."
+        />
+        <PreviewCard className="h-[400px]">
+          <AiChat
+            messages={[]}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            emptyState={
+              <AiChatEmptyState
+                title="Project Helper"
+                description="I can help you scaffold projects, debug code, and write docs."
+                suggestions={[
+                  "Create a React app",
+                  "Debug my code",
+                  "Write tests",
+                ]}
+                onSuggestionClick={noop}
+              />
+            }
+          />
+        </PreviewCard>
+      </section>
+
+      {/* ── 3. Basic Conversation with timestamps ──────────── */}
+      <section>
+        <SectionHeader
+          title="Basic Conversation"
+          description="User/assistant exchange with avatars, timestamps, and hover actions."
+        />
+        <PreviewCard className="h-[400px]">
+          <AiChat
+            messages={MOCK_MESSAGES_BASIC}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Apollo Assistant"
+            showTimestamps
+            showMessageActions
+          >
+            {MOCK_MESSAGES_BASIC.map((msg) => (
+              <AiChatMessage key={msg.id} message={msg} />
+            ))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 4. Multi-turn Conversation ─────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Multi-turn Conversation"
+          description="Longer back-and-forth with scrollable content and custom assistant name."
+        />
+        <PreviewCard className="h-[500px]">
+          <AiChat
+            messages={MOCK_MESSAGES_CONVERSATION}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Project Setup Wizard"
+            assistantName="Setup Bot"
+            showTimestamps
+          >
+            {MOCK_MESSAGES_CONVERSATION.map((msg) => (
+              <AiChatMessage
+                key={msg.id}
+                message={msg}
+                assistantName="Setup Bot"
+              />
+            ))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 5. Markdown + Code Block ───────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Markdown Rendering"
+          description="All markdown elements including code blocks with copy button."
+        />
+        <PreviewCard className="h-[600px]">
+          <AiChat
+            messages={MOCK_MESSAGES_MARKDOWN}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Markdown Demo"
+          >
+            {MOCK_MESSAGES_MARKDOWN.map((msg) => (
+              <AiChatMessage key={msg.id} message={msg} />
+            ))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 6. Loading States ──────────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Loading States"
+          description="Skeleton (default) and dots loading variants."
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <PreviewCard className="h-[300px]">
+            <AiChat
+              messages={[MOCK_MESSAGES_BASIC[0]]}
+              isLoading
+              onSendMessage={noop}
+              onStop={noop}
+              title="Skeleton Loading"
+            >
+              <AiChatMessage message={MOCK_MESSAGES_BASIC[0]} />
+            </AiChat>
+          </PreviewCard>
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"Dots variant (standalone)"}
+            </h3>
+            <AiChatLoading loadingVariant="dots" />
+          </PreviewCard>
+        </div>
+      </section>
+
+      {/* ── 7. Error + Retry ───────────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Error State with Retry"
+          description="Inline error banner with retry button."
+        />
+        <PreviewCard className="h-[400px]">
+          <AiChat
+            messages={MOCK_MESSAGES_BASIC}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            onRetry={noop}
+            title="Apollo Assistant"
+            error={
+              new Error(
+                "Failed to connect to the AI service. Please check your network connection.",
+              )
+            }
+          >
+            {MOCK_MESSAGES_BASIC.map((msg) => (
+              <AiChatMessage key={msg.id} message={msg} />
+            ))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 8. Suggestion Buttons ──────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Suggestion Buttons"
+          description="Choice buttons with recommended badge and hover animation."
+        />
+        <PreviewCard className="h-[400px]">
+          <AiChat
+            messages={MOCK_MESSAGES_WITH_CHOICES}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Presentation Advisor"
+          >
+            {MOCK_MESSAGES_WITH_CHOICES.map((msg) => (
+              <AiChatMessage key={msg.id} message={msg} />
+            ))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 9. Variant Comparison ──────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Variant Comparison"
+          description="Default, compact, and embedded layout variants side by side."
+        />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <PreviewCard className="h-[350px]">
+            <AiChat
+              messages={MOCK_MESSAGES_BASIC}
+              isLoading={false}
+              onSendMessage={noop}
+              onStop={noop}
+              variant="default"
+              title="Default"
+            >
+              {MOCK_MESSAGES_BASIC.map((msg) => (
+                <AiChatMessage key={msg.id} message={msg} />
+              ))}
+            </AiChat>
+          </PreviewCard>
+          <PreviewCard className="h-[350px]">
+            <AiChat
+              messages={MOCK_MESSAGES_BASIC}
+              isLoading={false}
+              onSendMessage={noop}
+              onStop={noop}
+              variant="compact"
+              title="Compact"
+            >
+              {MOCK_MESSAGES_BASIC.map((msg) => (
+                <AiChatMessage key={msg.id} message={msg} />
+              ))}
+            </AiChat>
+          </PreviewCard>
+          <PreviewCard className="h-[350px] p-4">
+            <AiChat
+              messages={MOCK_MESSAGES_BASIC}
+              isLoading={false}
+              onSendMessage={noop}
+              onStop={noop}
+              variant="embedded"
+            >
+              {MOCK_MESSAGES_BASIC.map((msg) => (
+                <AiChatMessage key={msg.id} message={msg} />
+              ))}
+            </AiChat>
+          </PreviewCard>
+        </div>
+      </section>
+
+      {/* ── 10. Isolated Sub-Components ────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Isolated Sub-Components"
+          description="Each sub-component rendered standalone."
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"AiChatSuggestions (with recommended)"}
+            </h3>
+            <AiChatSuggestions
+              prompt="Choose your preferred approach:"
+              options={MOCK_CHOICE_OPTIONS}
+              onSelect={noop}
+            />
+          </PreviewCard>
+
+          <PreviewCard className="p-0">
+            <h3 className="text-sm font-semibold text-muted-foreground px-6 pt-6 uppercase tracking-wide">
+              {"AiChatInput (with text + clear)"}
+            </h3>
+            <AiChatInput
+              value="How do I install Apollo components?"
+              onChange={noop}
+              onSubmit={noop}
+              onStop={noop}
+              onClear={noop}
+              isLoading={false}
+              hasMessages
+            />
+          </PreviewCard>
+
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"AiChatCodeBlock"}
+            </h3>
+            <AiChatCodeBlock language="typescript">
+              {`import { AiChat } from "@/components/ui/ai-chat";
+
+function App() {
+  return <AiChat messages={[]} isLoading={false} />;
+}`}
+            </AiChatCodeBlock>
+          </PreviewCard>
+
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"AiChatMarkdown (standalone)"}
+            </h3>
+            <AiChatMarkdown>
+              {`Here's a quick example with **bold**, *italic*, \`code\`, and a [link](https://example.com).\n\n| Feature | Supported |\n|---------|----------|\n| Tables | Yes |\n| Code | Yes |`}
+            </AiChatMarkdown>
+          </PreviewCard>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/lib/auth.ts b/apps/apollo-vertex/lib/auth.ts
index 3f8cfcc4e..3dff14828 100644
--- a/apps/apollo-vertex/lib/auth.ts
+++ b/apps/apollo-vertex/lib/auth.ts
@@ -1,4 +1,4 @@
-import { useQueryClient } from "@tanstack/react-query";
+import type { useQueryClient } from "@tanstack/react-query";
 import PKCEChallenge from "pkce-challenge";
 import { toast } from "sonner";
 import { z } from "zod";
diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/apollo-vertex/next-env.d.ts
+++ b/apps/apollo-vertex/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
index 170d79712..30c12d26c 100644
--- a/apps/apollo-vertex/registry.json
+++ b/apps/apollo-vertex/registry.json
@@ -66,6 +66,20 @@
           "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)",
           "color-sidebar-border": "var(--sidebar-border)",
           "color-sidebar-ring": "var(--sidebar-ring)",
+          "color-ai-chat": "var(--ai-chat)",
+          "color-ai-chat-foreground": "var(--ai-chat-foreground)",
+          "color-ai-chat-accent": "var(--ai-chat-accent)",
+          "color-ai-chat-accent-foreground": "var(--ai-chat-accent-foreground)",
+          "color-ai-chat-bubble-user": "var(--ai-chat-bubble-user)",
+          "color-ai-chat-bubble-user-foreground": "var(--ai-chat-bubble-user-foreground)",
+          "color-ai-chat-bubble-assistant": "var(--ai-chat-bubble-assistant)",
+          "color-ai-chat-bubble-assistant-foreground": "var(--ai-chat-bubble-assistant-foreground)",
+          "color-ai-chat-border": "var(--ai-chat-border)",
+          "color-ai-chat-input": "var(--ai-chat-input)",
+          "color-ai-chat-input-foreground": "var(--ai-chat-input-foreground)",
+          "color-ai-chat-ring": "var(--ai-chat-ring)",
+          "color-ai-chat-muted": "var(--ai-chat-muted)",
+          "color-ai-chat-muted-foreground": "var(--ai-chat-muted-foreground)",
           "font-sans": "var(--font-sans)"
         },
         "light": {
@@ -120,6 +134,23 @@
           "sidebar-accent-foreground": "oklch(0.1660 0.0283 203.3380)",
           "sidebar-border": "oklch(0.9237 0.0133 262.3780)",
           "sidebar-ring": "oklch(0.64 0.115 208)",
+          "ai-chat": "oklch(0.985 0.002 260)",
+          "ai-chat-foreground": "oklch(0.2394 0.0455 252.45)",
+          "ai-chat-accent": "oklch(0.64 0.115 208)",
+          "ai-chat-accent-foreground": "oklch(1 0 0)",
+          "ai-chat-bubble-user": "oklch(0.955 0.008 252)",
+          "ai-chat-bubble-user-foreground": "oklch(0.2394 0.0455 252.45)",
+          "ai-chat-bubble-assistant": "oklch(0.96 0.020 275)",
+          "ai-chat-bubble-assistant-foreground": "oklch(0.2394 0.0455 252.45)",
+          "ai-chat-border": "oklch(0.92 0.008 260)",
+          "ai-chat-input": "oklch(0.975 0.004 260)",
+          "ai-chat-input-foreground": "oklch(0.2394 0.0455 252.45)",
+          "ai-chat-ring": "oklch(0.64 0.115 208)",
+          "ai-chat-muted": "oklch(0.955 0.006 260)",
+          "ai-chat-muted-foreground": "oklch(0.50 0.020 260)",
+          "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui",
+          "font-serif": "IBM Plex Serif, ui-serif, serif",
+          "font-mono": "IBM Plex Mono, ui-monospace, monospace",
           "radius": "0.625rem",
           "shadow-x": "0",
           "shadow-y": "0px",
@@ -206,6 +237,23 @@
           "sidebar-accent-foreground": "oklch(0.9525 0.0110 225.9830)",
           "sidebar-border": "oklch(0.9525 0.0110 225.9830)",
           "sidebar-ring": "oklch(0.69 0.112 207)",
+          "ai-chat": "oklch(0.19 0.025 260)",
+          "ai-chat-foreground": "oklch(0.95 0.010 225)",
+          "ai-chat-accent": "oklch(0.69 0.112 207)",
+          "ai-chat-accent-foreground": "oklch(0.1660 0.0283 203.34)",
+          "ai-chat-bubble-user": "oklch(0.28 0.035 255)",
+          "ai-chat-bubble-user-foreground": "oklch(0.95 0.010 225)",
+          "ai-chat-bubble-assistant": "oklch(0.25 0.030 270)",
+          "ai-chat-bubble-assistant-foreground": "oklch(0.95 0.010 225)",
+          "ai-chat-border": "oklch(0.30 0.040 258)",
+          "ai-chat-input": "oklch(0.22 0.030 258)",
+          "ai-chat-input-foreground": "oklch(0.95 0.010 225)",
+          "ai-chat-ring": "oklch(0.69 0.112 207)",
+          "ai-chat-muted": "oklch(0.26 0.030 258)",
+          "ai-chat-muted-foreground": "oklch(0.65 0.020 258)",
+          "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui",
+          "font-serif": "IBM Plex Serif, ui-serif, serif",
+          "font-mono": "IBM Plex Mono, ui-monospace, monospace",
           "radius": "0.625rem",
           "shadow-x": "0",
           "shadow-y": "0px",
@@ -272,7 +320,16 @@
         "react-markdown",
         "remark-gfm"
       ],
-      "registryDependencies": [],
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "tooltip",
+        "dropdown-menu",
+        "scroll-area",
+        "skeleton",
+        "badge",
+        "kbd"
+      ],
       "files": [
         {
           "path": "registry/ai-chat/types.ts",
@@ -339,6 +396,11 @@
           "type": "registry:lib",
           "target": "components/ui/ai-chat/hooks/use-sticky-scroll.ts"
         },
+        {
+          "path": "registry/ai-chat/components/ai-chat-provider.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/ai-chat-provider.tsx"
+        },
         {
           "path": "registry/ai-chat/components/ai-chat.tsx",
           "type": "registry:ui",
@@ -368,6 +430,21 @@
           "path": "registry/ai-chat/components/ai-chat-suggestions.tsx",
           "type": "registry:ui",
           "target": "components/ui/ai-chat/components/ai-chat-suggestions.tsx"
+        },
+        {
+          "path": "registry/ai-chat/components/ai-chat-message-actions.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/ai-chat-message-actions.tsx"
+        },
+        {
+          "path": "registry/ai-chat/components/ai-chat-code-block.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/ai-chat-code-block.tsx"
+        },
+        {
+          "path": "registry/ai-chat/components/ai-chat-empty-state.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/ai-chat-empty-state.tsx"
         }
       ]
     },
diff --git a/apps/apollo-vertex/registry/accordion/accordion.tsx b/apps/apollo-vertex/registry/accordion/accordion.tsx
index f0428981e..d09272c18 100644
--- a/apps/apollo-vertex/registry/accordion/accordion.tsx
+++ b/apps/apollo-vertex/registry/accordion/accordion.tsx
@@ -2,7 +2,7 @@
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts b/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts
index 855440c6e..26488eca0 100644
--- a/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts
+++ b/apps/apollo-vertex/registry/ai-chat/adapters/agenthub/tools.ts
@@ -1,4 +1,4 @@
-import { convertSchemaToJsonSchema, type AnyClientTool } from "@tanstack/ai";
+import { type AnyClientTool, convertSchemaToJsonSchema } from "@tanstack/ai";
 import type { AgentHubVendor } from "./types";
 
 export function buildToolDefinitions(
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
new file mode 100644
index 000000000..8601d3d96
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { Check, ClipboardCopy } from "lucide-react";
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tooltip/tooltip";
+
+const COPY_LABEL = "Copy code";
+const COPIED_LABEL = "Copied!";
+
+interface AiChatCodeBlockProps {
+  children: string;
+  language?: string;
+}
+
+export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const copyLabel = copied ? COPIED_LABEL : COPY_LABEL;
+
+  return (
+    <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-ai-chat-border">
+        {language && (
+          <span className="text-[11px] font-mono text-ai-chat-muted-foreground uppercase tracking-wider">
+            {language}
+          </span>
+        )}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="ml-auto size-6 inline-flex items-center justify-center rounded-md opacity-0 group-hover/codeblock:opacity-100 transition-opacity hover:bg-ai-chat-border"
+              aria-label={copyLabel}
+            >
+              {copied ? (
+                <Check className="size-3 text-success" aria-hidden="true" />
+              ) : (
+                <ClipboardCopy
+                  className="size-3 text-ai-chat-muted-foreground"
+                  aria-hidden="true"
+                />
+              )}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{copyLabel}</TooltipContent>
+        </Tooltip>
+      </div>
+      <pre className="p-3 overflow-x-auto">
+        <code className="text-xs font-mono text-ai-chat-foreground">
+          {children}
+        </code>
+      </pre>
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
new file mode 100644
index 000000000..344c7ff1b
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "@/registry/button/button";
+
+interface AiChatEmptyStateProps {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+  suggestions?: string[];
+  onSuggestionClick?: (suggestion: string) => void;
+}
+
+export function AiChatEmptyState({
+  title = "How can I help you?",
+  description,
+  icon,
+  suggestions,
+  onSuggestionClick,
+}: AiChatEmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground gap-4">
+      <div
+        className="size-16 flex items-center justify-center rounded-full"
+        style={{ background: "var(--ai-gradient)" }}
+      >
+        {icon ?? (
+          <Sparkles
+            className="size-8 text-ai-chat-accent-foreground"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+      <div className="space-y-1">
+        <p className="text-lg font-medium text-ai-chat-foreground">{title}</p>
+        {description && <p className="text-sm max-w-sm">{description}</p>}
+      </div>
+      {suggestions && suggestions.length > 0 && onSuggestionClick && (
+        <div className="flex flex-wrap justify-center gap-2 max-w-md">
+          {suggestions.map((suggestion) => (
+            <Button
+              key={suggestion}
+              variant="outline"
+              size="sm"
+              className="border-ai-chat-border text-ai-chat-foreground hover:bg-ai-chat-muted"
+              onClick={() => onSuggestionClick(suggestion)}
+            >
+              {suggestion}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index f0da010fe..6184fec2a 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,8 +1,18 @@
 "use client";
 
-import { Send, Square, Trash2 } from "lucide-react";
-import type { FormEvent, KeyboardEvent } from "react";
+import { Paperclip, Send, Square, Trash2 } from "lucide-react";
+import { type FormEvent, type KeyboardEvent, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "@/registry/button/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tooltip/tooltip";
+import { useAiChat } from "./ai-chat-provider";
+
+const UPLOAD_LABEL = "Attach files";
+const ENTER_HINT = "Enter to send, Shift+Enter for new line";
 
 interface AiChatInputProps {
   value: string;
@@ -10,11 +20,13 @@ interface AiChatInputProps {
   onSubmit: () => void;
   onStop: () => void;
   onClear?: () => void;
+  onFileSelect?: (files: FileList) => void;
   isLoading: boolean;
   disabled?: boolean;
   placeholder?: string;
   showClearButton?: boolean;
   hasMessages?: boolean;
+  maxLength?: number;
 }
 
 export function AiChatInput({
@@ -23,18 +35,42 @@ export function AiChatInput({
   onSubmit,
   onStop,
   onClear,
+  onFileSelect,
   isLoading,
   disabled = false,
   placeholder,
   showClearButton = true,
   hasMessages = false,
+  maxLength,
 }: AiChatInputProps) {
   const { t } = useTranslation();
+  const { variant } = useAiChat();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const isCompact = variant === "compact";
   const displayPlaceholder = placeholder ?? t("type_a_message");
 
+  const adjustHeight = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+  };
+
+  const handleChange = (val: string) => {
+    if (maxLength && val.length > maxLength) return;
+    onChange(val);
+    requestAnimationFrame(adjustHeight);
+  };
+
   const submitMessage = () => {
     if (!value.trim() || isLoading) return;
     onSubmit();
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.style.height = "auto";
+      }
+    });
   };
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
@@ -49,55 +85,109 @@ export function AiChatInput({
     }
   };
 
+  const showCharCount = maxLength && value.length > maxLength * 0.8;
+
   return (
     <div className="p-3">
-      <div className="flex items-center gap-2">
+      <div className="flex items-end gap-2">
         <form
           onSubmit={handleSubmit}
-          className="flex-1 flex items-center gap-2 px-4 py-2 rounded-full border-2 transition-colors bg-muted/50 border-transparent focus-within:border-ring"
+          className={`flex-1 flex items-end gap-2 px-4 py-2 border-2 transition-colors bg-ai-chat-input border-transparent focus-within:border-ai-chat-ring focus-within:shadow-sm ${isCompact ? "rounded-lg" : "rounded-full"}`}
         >
+          {onFileSelect && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="flex-shrink-0 mb-0.5 text-ai-chat-muted-foreground hover:text-ai-chat-foreground"
+                  onClick={() => {
+                    const fileInput = document.createElement("input");
+                    fileInput.type = "file";
+                    fileInput.multiple = true;
+                    fileInput.addEventListener("change", () => {
+                      if (fileInput.files) onFileSelect(fileInput.files);
+                    });
+                    fileInput.click();
+                  }}
+                >
+                  <Paperclip className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{UPLOAD_LABEL}</TooltipContent>
+            </Tooltip>
+          )}
           <textarea
+            ref={textareaRef}
             value={value}
-            onChange={(e) => onChange(e.target.value)}
+            onChange={(e) => handleChange(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={displayPlaceholder}
             aria-label={displayPlaceholder}
-            className="flex-1 resize-none bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none min-h-[32px] max-h-[120px] py-1"
+            className="flex-1 resize-none bg-transparent text-sm text-ai-chat-input-foreground placeholder:text-ai-chat-muted-foreground focus-visible:outline-none min-h-[40px] max-h-[200px] py-1.5 overflow-y-auto"
             rows={1}
             disabled={disabled}
           />
           {isLoading ? (
-            <button
-              type="button"
-              className="size-8 rounded-full flex-shrink-0 flex items-center justify-center hover:bg-muted transition-colors"
-              onClick={onStop}
-              aria-label={t("stop")}
-              title={t("stop")}
-            >
-              <Square className="size-4" aria-hidden="true" />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="flex-shrink-0 mb-0.5"
+                  onClick={onStop}
+                >
+                  <Square className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("stop")}</TooltipContent>
+            </Tooltip>
           ) : (
-            <button
-              type="submit"
-              className="size-8 rounded-full flex-shrink-0 flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              disabled={!value.trim() || disabled}
-              aria-label={t("send")}
-              title={t("send")}
-            >
-              <Send className="size-4" aria-hidden="true" />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="submit"
+                  variant="default"
+                  size="icon-sm"
+                  className="flex-shrink-0 mb-0.5 bg-ai-chat-accent text-ai-chat-accent-foreground hover:bg-ai-chat-accent/90"
+                  disabled={!value.trim() || disabled}
+                >
+                  <Send className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("send")}</TooltipContent>
+            </Tooltip>
           )}
         </form>
         {showClearButton && hasMessages && onClear && (
-          <button
-            type="button"
-            className="size-8 rounded-full flex-shrink-0 flex items-center justify-center hover:bg-muted transition-colors"
-            onClick={onClear}
-            aria-label={t("clear_conversation")}
-            title={t("clear_conversation")}
-          >
-            <Trash2 className="size-4" aria-hidden="true" />
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                className="flex-shrink-0 text-ai-chat-muted-foreground hover:text-ai-chat-foreground"
+                onClick={onClear}
+              >
+                <Trash2 className="size-4" aria-hidden="true" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("clear_conversation")}</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+      <div className="flex items-center justify-between px-2 mt-1">
+        {!isCompact && (
+          <span className="text-xs text-ai-chat-muted-foreground">
+            {ENTER_HINT}
+          </span>
+        )}
+        {showCharCount && (
+          <span className="text-xs text-ai-chat-muted-foreground ml-auto">
+            {`${value.length}/${maxLength}`}
+          </span>
         )}
       </div>
     </div>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
index f4df84fc7..68d05bca6 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
@@ -1,32 +1,55 @@
 "use client";
 
 import { Sparkles } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { Avatar, AvatarFallback } from "@/registry/avatar/avatar";
+import { Skeleton } from "@/registry/skeleton/skeleton";
+import { useAiChat } from "./ai-chat-provider";
+
+type LoadingVariant = "skeleton" | "dots";
 
 interface AiChatLoadingProps {
   assistantName?: string;
+  loadingVariant?: LoadingVariant;
 }
 
-export function AiChatLoading({ assistantName }: AiChatLoadingProps) {
-  const { t } = useTranslation();
-  const displayName = assistantName ?? t("ai_assistant");
+export function AiChatLoading({
+  assistantName,
+  loadingVariant = "skeleton",
+}: AiChatLoadingProps) {
+  const config = useAiChat();
+  const displayName = assistantName ?? config.assistantName;
 
   return (
     <div className="flex justify-start gap-3">
-      <div className="size-8 flex items-center justify-center flex-shrink-0 rounded-full bg-primary">
-        <Sparkles className="size-4 text-primary-foreground" />
-      </div>
+      <Avatar className="size-8 flex-shrink-0">
+        <AvatarFallback className="bg-ai-chat-accent">
+          {config.assistantAvatar ?? (
+            <Sparkles
+              className="size-4 text-ai-chat-accent-foreground"
+              aria-hidden="true"
+            />
+          )}
+        </AvatarFallback>
+      </Avatar>
       <div className="flex flex-col gap-1">
-        <span className="text-xs text-muted-foreground font-medium">
+        <span className="text-xs text-ai-chat-muted-foreground font-medium">
           {displayName}
         </span>
-        <div className="px-4 py-3 rounded-lg bg-primary/10">
-          <div className="flex gap-1">
-            <span className="size-2 bg-primary rounded-full animate-bounce [animation-delay:-0.3s]" />
-            <span className="size-2 bg-primary rounded-full animate-bounce [animation-delay:-0.15s]" />
-            <span className="size-2 bg-primary rounded-full animate-bounce" />
+        {loadingVariant === "skeleton" ? (
+          <div className="flex flex-col gap-2 py-2">
+            <Skeleton className="h-3 w-[80%] bg-ai-chat-muted" />
+            <Skeleton className="h-3 w-[60%] bg-ai-chat-muted" />
+            <Skeleton className="h-3 w-[40%] bg-ai-chat-muted" />
+          </div>
+        ) : (
+          <div className="px-4 py-3 rounded-lg bg-ai-chat-bubble-assistant">
+            <div className="flex gap-1">
+              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce [animation-delay:-0.3s]" />
+              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce [animation-delay:-0.15s]" />
+              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce" />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index f2cd1d929..a63cfe052 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -3,10 +3,19 @@
 import type { ComponentProps, ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { AiChatCodeBlock } from "./ai-chat-code-block";
 
 type NodeProps = { children?: ReactNode };
 type AnchorProps = { children?: ReactNode; href?: string };
 
+function extractCodeProps(props: NodeProps & { className?: string }) {
+  const { className, children } = props;
+  const match = /language-(\w+)/.exec(className ?? "");
+  const language = match ? match[1] : "";
+  const code = String(children).replace(/\n$/, "");
+  return { language, code };
+}
+
 const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   p: ({ children }: NodeProps) => <p className="mb-2 last:mb-0">{children}</p>,
   ul: ({ children }: NodeProps) => (
@@ -16,26 +25,31 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
     <ol className="mb-2 last:mb-0 ml-4 list-decimal">{children}</ol>
   ),
   li: ({ children }: NodeProps) => <li className="mb-1">{children}</li>,
-  pre: ({ children }: NodeProps) => (
-    <pre className="mb-2 last:mb-0 p-3 rounded bg-muted text-foreground font-mono text-xs overflow-x-auto">
-      {children}
-    </pre>
-  ),
+  pre: ({ children }: NodeProps) => <div>{children}</div>,
   code: ({
     children,
     className,
     ...props
-  }: NodeProps & { className?: string }) => (
-    <code
-      className={
-        className ??
-        "px-1.5 py-0.5 rounded bg-muted text-foreground font-mono text-xs"
-      }
-      {...props}
-    >
-      {children}
-    </code>
-  ),
+  }: NodeProps & { className?: string }) => {
+    const isBlock =
+      className?.startsWith("language-") ||
+      (typeof children === "string" && children.includes("\n"));
+
+    if (isBlock) {
+      const { language, code } = extractCodeProps({
+        className,
+        children,
+        ...props,
+      });
+      return <AiChatCodeBlock language={language}>{code}</AiChatCodeBlock>;
+    }
+
+    return (
+      <code className="px-1.5 py-0.5 rounded bg-ai-chat-muted text-ai-chat-foreground font-mono text-xs">
+        {children}
+      </code>
+    );
+  },
   a: ({ children, ...props }: AnchorProps) => (
     <a className="text-primary hover:underline" {...props}>
       {children}
@@ -46,7 +60,7 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   ),
   em: ({ children }: NodeProps) => <em className="italic">{children}</em>,
   blockquote: ({ children }: NodeProps) => (
-    <blockquote className="border-l-2 border-muted-foreground/30 pl-3 italic my-2">
+    <blockquote className="border-l-2 border-ai-chat-accent pl-3 bg-ai-chat-accent/5 rounded-r italic my-2 py-1">
       {children}
     </blockquote>
   ),
@@ -59,17 +73,19 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   h3: ({ children }: NodeProps) => (
     <h3 className="text-sm font-bold mb-2 mt-2 first:mt-0">{children}</h3>
   ),
-  hr: () => <hr className="my-3 border-border" />,
+  hr: () => <hr className="my-3 border-ai-chat-border" />,
   table: ({ children }: NodeProps) => (
     <div className="overflow-x-auto my-2">
-      <table className="min-w-full divide-y divide-border">{children}</table>
+      <table className="min-w-full divide-y divide-ai-chat-border">
+        {children}
+      </table>
     </div>
   ),
   thead: ({ children }: NodeProps) => (
-    <thead className="bg-muted">{children}</thead>
+    <thead className="bg-ai-chat-muted">{children}</thead>
   ),
   tbody: ({ children }: NodeProps) => (
-    <tbody className="divide-y divide-border">{children}</tbody>
+    <tbody className="divide-y divide-ai-chat-border">{children}</tbody>
   ),
   tr: ({ children }: NodeProps) => <tr>{children}</tr>,
   th: ({ children }: NodeProps) => (
@@ -86,7 +102,7 @@ interface AiChatMarkdownProps {
 
 export function AiChatMarkdown({ children }: AiChatMarkdownProps) {
   return (
-    <div className="px-4 py-3 text-sm rounded-lg bg-primary/10 prose prose-sm dark:prose-invert max-w-none">
+    <div className="px-4 py-3 text-sm rounded-lg bg-ai-chat-bubble-assistant text-ai-chat-bubble-assistant-foreground prose prose-sm dark:prose-invert max-w-none">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {children}
       </ReactMarkdown>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
new file mode 100644
index 000000000..f6da975ba
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import {
+  Check,
+  ClipboardCopy,
+  Pencil,
+  RefreshCw,
+  ThumbsDown,
+  ThumbsUp,
+} from "lucide-react";
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tooltip/tooltip";
+import type { MessageFeedbackType } from "../types";
+
+const LABELS = {
+  copy: "Copy",
+  copied: "Copied!",
+  helpful: "Helpful",
+  notHelpful: "Not helpful",
+  regenerate: "Regenerate",
+  edit: "Edit",
+} as const;
+
+interface AiChatMessageActionsProps {
+  content: string;
+  messageRole: "user" | "assistant";
+  showCopy?: boolean;
+  onFeedback?: (type: MessageFeedbackType) => void;
+  onRegenerate?: () => void;
+  onEdit?: () => void;
+}
+
+export function AiChatMessageActions({
+  content,
+  messageRole,
+  showCopy = true,
+  onFeedback,
+  onRegenerate,
+  onEdit,
+}: AiChatMessageActionsProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const copyLabel = copied ? LABELS.copied : LABELS.copy;
+
+  return (
+    <div className="flex items-center gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity">
+      {showCopy && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
+              aria-label={copyLabel}
+            >
+              {copied ? (
+                <Check className="size-3.5 text-success" aria-hidden="true" />
+              ) : (
+                <ClipboardCopy
+                  className="size-3.5 text-ai-chat-muted-foreground"
+                  aria-hidden="true"
+                />
+              )}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{copyLabel}</TooltipContent>
+        </Tooltip>
+      )}
+
+      {messageRole === "assistant" && onFeedback && (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={() => onFeedback("up")}
+                className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
+                aria-label={LABELS.helpful}
+              >
+                <ThumbsUp
+                  className="size-3.5 text-ai-chat-muted-foreground"
+                  aria-hidden="true"
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{LABELS.helpful}</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={() => onFeedback("down")}
+                className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
+                aria-label={LABELS.notHelpful}
+              >
+                <ThumbsDown
+                  className="size-3.5 text-ai-chat-muted-foreground"
+                  aria-hidden="true"
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{LABELS.notHelpful}</TooltipContent>
+          </Tooltip>
+        </>
+      )}
+
+      {messageRole === "assistant" && onRegenerate && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={onRegenerate}
+              className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
+              aria-label={LABELS.regenerate}
+            >
+              <RefreshCw
+                className="size-3.5 text-ai-chat-muted-foreground"
+                aria-hidden="true"
+              />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{LABELS.regenerate}</TooltipContent>
+        </Tooltip>
+      )}
+
+      {messageRole === "user" && onEdit && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={onEdit}
+              className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
+              aria-label={LABELS.edit}
+            >
+              <Pencil
+                className="size-3.5 text-ai-chat-muted-foreground"
+                aria-hidden="true"
+              />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{LABELS.edit}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index 7c3b9aada..04ddcb97c 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -1,15 +1,31 @@
 "use client";
 
 import type { TextPart, UIMessage } from "@tanstack/ai-client";
-import { Sparkles } from "lucide-react";
+import { Sparkles, User } from "lucide-react";
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { Avatar, AvatarFallback } from "@/registry/avatar/avatar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tooltip/tooltip";
+import type { MessageFeedbackType } from "../types";
 import { AiChatMarkdown } from "./ai-chat-markdown";
+import { AiChatMessageActions } from "./ai-chat-message-actions";
+import { useAiChat } from "./ai-chat-provider";
 
 interface AiChatMessageProps {
   message: UIMessage;
   assistantName?: string;
   children?: ReactNode;
+  /** Whether this message is currently being streamed */
+  isStreaming?: boolean;
+  /** Hide avatar and name (for grouped consecutive messages) */
+  isGrouped?: boolean;
+  /** Callbacks for message actions */
+  onFeedback?: (type: MessageFeedbackType) => void;
+  onRegenerate?: () => void;
+  onEdit?: () => void;
 }
 
 function getDisplayText(message: UIMessage): string {
@@ -19,47 +35,146 @@ function getDisplayText(message: UIMessage): string {
     .join("");
 }
 
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return `${diffDay}d ago`;
+}
+
+function formatFullDateTime(date: Date): string {
+  return date.toLocaleString(navigator.language, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
 export function AiChatMessage({
   message,
   assistantName,
   children,
+  isStreaming = false,
+  isGrouped = false,
+  onFeedback,
+  onRegenerate,
+  onEdit,
 }: AiChatMessageProps) {
-  const { t } = useTranslation();
+  const config = useAiChat();
   const isUser = message.role === "user";
-  const displayName = assistantName ?? t("ai_assistant");
+  const displayName = assistantName ?? config.assistantName;
   const displayContent = getDisplayText(message);
 
-  // Don't render assistant messages if they have no text content and no children (e.g. calling tools)
   if (!isUser && !displayContent && !children) {
     return null;
   }
 
+  const timestamp = message.createdAt ? new Date(message.createdAt) : null;
+
   if (isUser) {
     return (
-      <div className="flex w-full justify-end">
-        <div className="max-w-[80%] px-4 py-3 text-sm rounded-lg border border-border bg-muted/50">
-          {displayContent && (
-            <p className="whitespace-pre-wrap">{displayContent}</p>
-          )}
+      <div className="group/message flex w-full justify-end gap-3">
+        <div className="flex flex-col items-end gap-1 max-w-[80%]">
+          <div className="px-4 py-3 text-sm rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
+            {displayContent && (
+              <p className="whitespace-pre-wrap">{displayContent}</p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {config.showTimestamps && timestamp && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-xs text-ai-chat-muted-foreground cursor-default">
+                    {formatRelativeTime(timestamp)}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{formatFullDateTime(timestamp)}</TooltipContent>
+              </Tooltip>
+            )}
+            {config.showMessageActions && (
+              <AiChatMessageActions
+                content={displayContent}
+                messageRole="user"
+                showCopy={config.showCopyButton}
+                onEdit={onEdit}
+              />
+            )}
+          </div>
         </div>
+        {!isGrouped && (
+          <Avatar className="size-8 flex-shrink-0">
+            <AvatarFallback className="bg-ai-chat-muted">
+              {config.userAvatar ?? (
+                <User
+                  className="size-4 text-ai-chat-muted-foreground"
+                  aria-hidden="true"
+                />
+              )}
+            </AvatarFallback>
+          </Avatar>
+        )}
+        {isGrouped && <div className="size-8 flex-shrink-0" />}
       </div>
     );
   }
 
   return (
-    <div className="flex w-full justify-start gap-3">
-      <div className="size-8 flex items-center justify-center flex-shrink-0 rounded-full bg-primary">
-        <Sparkles
-          className="size-4 text-primary-foreground"
-          aria-hidden="true"
-        />
-      </div>
+    <div className="group/message flex w-full justify-start gap-3">
+      {isGrouped ? (
+        <div className="size-8 flex-shrink-0" />
+      ) : (
+        <Avatar className="size-8 flex-shrink-0">
+          <AvatarFallback className="bg-ai-chat-accent">
+            {config.assistantAvatar ?? (
+              <Sparkles
+                className="size-4 text-ai-chat-accent-foreground"
+                aria-hidden="true"
+              />
+            )}
+          </AvatarFallback>
+        </Avatar>
+      )}
       <div className="flex flex-col gap-1 max-w-[85%]">
-        <span className="text-xs text-muted-foreground font-medium">
-          {displayName}
-        </span>
-        {displayContent && <AiChatMarkdown>{displayContent}</AiChatMarkdown>}
+        {!isGrouped && (
+          <span className="text-xs text-ai-chat-muted-foreground font-medium">
+            {displayName}
+          </span>
+        )}
+        {displayContent && (
+          <div>
+            <AiChatMarkdown>{displayContent}</AiChatMarkdown>
+            {isStreaming && (
+              <span className="inline-block w-0.5 h-4 ml-0.5 bg-ai-chat-foreground animate-pulse align-text-bottom" />
+            )}
+          </div>
+        )}
         {children && <div className="mt-2 flex flex-col gap-2">{children}</div>}
+        <div className="flex items-center gap-2">
+          {config.showTimestamps && timestamp && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="text-xs text-ai-chat-muted-foreground cursor-default">
+                  {formatRelativeTime(timestamp)}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{formatFullDateTime(timestamp)}</TooltipContent>
+            </Tooltip>
+          )}
+          {config.showMessageActions && (
+            <AiChatMessageActions
+              content={displayContent}
+              messageRole="assistant"
+              showCopy={config.showCopyButton}
+              onFeedback={onFeedback}
+              onRegenerate={onRegenerate}
+            />
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
new file mode 100644
index 000000000..845b57a72
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { AiChatConfig, AiChatVariant } from "../types";
+
+const defaultConfig: AiChatConfig = {
+  variant: "default",
+  assistantName: "AI Assistant",
+  showTimestamps: false,
+  showMessageActions: true,
+  showCopyButton: true,
+  isLoading: false,
+};
+
+const AiChatContext = createContext<AiChatConfig>(defaultConfig);
+
+interface AiChatProviderProps extends Partial<AiChatConfig> {
+  children: React.ReactNode;
+}
+
+export function AiChatProvider({
+  children,
+  ...overrides
+}: AiChatProviderProps) {
+  const config: AiChatConfig = { ...defaultConfig, ...overrides };
+  const variant: AiChatVariant = config.variant;
+
+  return (
+    <AiChatContext.Provider value={config}>
+      <div data-slot="ai-chat-root" data-variant={variant}>
+        {children}
+      </div>
+    </AiChatContext.Provider>
+  );
+}
+
+export function useAiChat(): AiChatConfig {
+  return useContext(AiChatContext);
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index fa887c508..49e5b3acd 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { Badge } from "@/registry/badge/badge";
+import { Button } from "@/registry/button/button";
 import type { ChoiceOption } from "../types";
 
 interface AiChatSuggestionsProps {
@@ -16,20 +18,30 @@ export function AiChatSuggestions({
 }: AiChatSuggestionsProps) {
   return (
     <div className="space-y-2">
-      {prompt && <p className="text-sm text-muted-foreground">{prompt}</p>}
+      {prompt && (
+        <p className="text-sm text-ai-chat-muted-foreground">{prompt}</p>
+      )}
       <div className="flex flex-wrap gap-2">
         {options.map((option) => (
-          <button
+          <Button
             key={option.id}
             type="button"
+            variant={option.recommended ? "default" : "outline"}
+            size="sm"
             className={cn(
-              "h-auto py-2 px-3 text-left max-w-full text-sm rounded-lg border transition-colors hover:opacity-80",
-              option.recommended && "border-2 border-primary",
+              "h-auto py-2 px-3 text-left max-w-full transition-all hover:scale-[1.02]",
+              option.recommended &&
+                "bg-ai-chat-accent text-ai-chat-accent-foreground hover:bg-ai-chat-accent/90",
             )}
             onClick={() => onSelect(option)}
           >
             <span className="font-medium truncate">{option.label}</span>
-          </button>
+            {option.recommended && (
+              <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5">
+                {"\u2605"}
+              </Badge>
+            )}
+          </Button>
         ))}
       </div>
     </div>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index c0049ef82..6dfad7258 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -1,14 +1,18 @@
 "use client";
 
 import type { UIMessage } from "@tanstack/ai-client";
-import { AlertCircle, ArrowDown, Sparkles } from "lucide-react";
+import { AlertCircle, ArrowDown, RefreshCw, Sparkles } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useStickyScroll } from "../hooks/use-sticky-scroll";
-import type { ChoiceOption } from "../types";
+import type { AiChatVariant, ChoiceOption } from "../types";
+
+const RETRY_LABEL = "Retry";
+
 import { findLatestChoices } from "../utils/ai-chat-utils";
 import { AiChatInput } from "./ai-chat-input";
 import { AiChatLoading } from "./ai-chat-loading";
+import { AiChatProvider } from "./ai-chat-provider";
 import { AiChatSuggestions } from "./ai-chat-suggestions";
 
 export interface AiChatProps {
@@ -18,13 +22,25 @@ export interface AiChatProps {
   onStop: () => void;
   onClearChat?: () => void;
   onChoiceSelect?: (option: ChoiceOption) => void;
+  onRetry?: () => void;
   children?: ReactNode;
   assistantName?: string;
+  assistantAvatar?: ReactNode;
+  userAvatar?: ReactNode;
   title?: string;
+  renderHeader?: ReactNode;
   emptyState?: ReactNode;
   placeholder?: string;
   showClearButton?: boolean;
+  showTimestamps?: boolean;
+  showMessageActions?: boolean;
+  showCopyButton?: boolean;
   error?: Error | null;
+  variant?: AiChatVariant;
+  /** Controlled input value */
+  value?: string;
+  /** Controlled input onChange */
+  onValueChange?: (value: string) => void;
 }
 
 export function AiChat({
@@ -34,18 +50,36 @@ export function AiChat({
   onStop,
   onClearChat,
   onChoiceSelect,
+  onRetry,
   children,
   assistantName,
+  assistantAvatar,
+  userAvatar,
   title,
+  renderHeader,
   emptyState,
   placeholder,
   showClearButton = true,
+  showTimestamps = false,
+  showMessageActions = true,
+  showCopyButton = true,
   error,
+  variant = "default",
+  value: controlledValue,
+  onValueChange,
 }: AiChatProps) {
   const { t } = useTranslation();
-  const [input, setInput] = useState("");
+  const [internalInput, setInternalInput] = useState("");
   const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
+
+  const isControlled = controlledValue != null;
+  const input = isControlled ? controlledValue : internalInput;
+  const setInput =
+    isControlled && onValueChange ? onValueChange : setInternalInput;
+
   const displayName = assistantName ?? t("ai_assistant");
+  const isCompact = variant === "compact";
+  const isEmbedded = variant === "embedded";
 
   const handleSubmit = () => {
     if (!input.trim() || isLoading) return;
@@ -63,10 +97,10 @@ export function AiChat({
   const showLoadingIndicator = isLoading && !lastAssistantHasText;
 
   const defaultEmptyState = (
-    <div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground">
-      <div className="size-16 flex items-center justify-center mb-4 rounded-full bg-primary">
+    <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground">
+      <div className="size-16 flex items-center justify-center mb-4 rounded-full bg-ai-chat-accent">
         <Sparkles
-          className="size-8 text-primary-foreground"
+          className="size-8 text-ai-chat-accent-foreground"
           aria-hidden="true"
         />
       </div>
@@ -74,93 +108,123 @@ export function AiChat({
     </div>
   );
 
+  const padding = isCompact ? "p-2" : "p-4";
+  const messageGap = isCompact ? "space-y-2" : "space-y-4";
+
   return (
-    <div
-      className="flex flex-col h-full border rounded-lg bg-card"
-      data-slot="ai-chat"
+    <AiChatProvider
+      variant={variant}
+      assistantName={displayName}
+      assistantAvatar={assistantAvatar}
+      userAvatar={userAvatar}
+      showTimestamps={showTimestamps}
+      showMessageActions={showMessageActions}
+      showCopyButton={showCopyButton}
+      isLoading={isLoading}
     >
-      {title && (
-        <div className="py-3 px-4">
-          <h3 className="flex items-center gap-2 text-base font-semibold">
-            <Sparkles className="size-4" aria-hidden="true" />
-            {title}
-          </h3>
-        </div>
-      )}
-
-      {error && (
-        <div
-          role="alert"
-          aria-live="assertive"
-          className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive max-h-16 overflow-y-auto"
-        >
-          <AlertCircle
-            className="h-4 w-4 flex-shrink-0 mt-0.5"
-            aria-hidden="true"
-          />
-          <span>{error.message}</span>
-        </div>
-      )}
-
-      <div className="relative flex-1 min-h-0">
-        <div
-          ref={scrollRef}
-          role="log"
-          aria-label={t("chat_messages")}
-          aria-live="polite"
-          aria-atomic="false"
-          className="h-full overflow-y-auto p-4"
-        >
-          {messages.length === 0 ? (
-            (emptyState ?? defaultEmptyState)
-          ) : (
-            <div ref={contentRef} className="space-y-4">
-              {children}
-
-              {latestChoices && !isLoading && (
-                <AiChatSuggestions
-                  prompt={latestChoices.prompt}
-                  options={latestChoices.options}
-                  onSelect={(option) => {
-                    if (onChoiceSelect) {
-                      onChoiceSelect(option);
-                    } else {
-                      onSendMessage(option.label);
-                    }
-                  }}
-                />
-              )}
-
-              {showLoadingIndicator && (
-                <AiChatLoading assistantName={displayName} />
-              )}
+      <div
+        className={
+          isEmbedded
+            ? "flex flex-col h-full bg-transparent text-ai-chat-foreground"
+            : "flex flex-col h-full border border-ai-chat-border rounded-lg bg-ai-chat text-ai-chat-foreground"
+        }
+        data-slot="ai-chat"
+      >
+        {renderHeader ??
+          (title && !isCompact && !isEmbedded && (
+            <div className="py-3 px-4">
+              <h3 className="flex items-center gap-2 text-base font-semibold">
+                <Sparkles className="size-4" aria-hidden="true" />
+                {title}
+              </h3>
             </div>
-          )}
-        </div>
+          ))}
 
-        {!isStuck && (
-          <button
-            type="button"
-            onClick={scrollToBottom}
-            aria-label={t("scroll_to_bottom")}
-            className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center size-8 rounded-full border bg-background shadow-md hover:bg-accent"
+        {error && (
+          <div
+            role="alert"
+            aria-live="assertive"
+            className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive max-h-16 overflow-y-auto"
           >
-            <ArrowDown className="size-4" />
-          </button>
+            <AlertCircle
+              className="h-4 w-4 flex-shrink-0 mt-0.5"
+              aria-hidden="true"
+            />
+            <span className="flex-1">{error.message}</span>
+            {onRetry && (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium hover:underline"
+                aria-label={RETRY_LABEL}
+              >
+                <RefreshCw className="size-3" aria-hidden="true" />
+                {RETRY_LABEL}
+              </button>
+            )}
+          </div>
         )}
-      </div>
 
-      <AiChatInput
-        value={input}
-        onChange={setInput}
-        onSubmit={handleSubmit}
-        onStop={onStop}
-        onClear={onClearChat}
-        isLoading={isLoading}
-        placeholder={placeholder}
-        showClearButton={showClearButton}
-        hasMessages={messages.length > 0}
-      />
-    </div>
+        <div className="relative flex-1 min-h-0">
+          <div
+            ref={scrollRef}
+            role="log"
+            aria-label={t("chat_messages")}
+            aria-live="polite"
+            aria-atomic="false"
+            className={`h-full overflow-y-auto ${padding}`}
+          >
+            {messages.length === 0 ? (
+              (emptyState ?? defaultEmptyState)
+            ) : (
+              <div ref={contentRef} className={messageGap}>
+                {children}
+
+                {latestChoices && !isLoading && (
+                  <AiChatSuggestions
+                    prompt={latestChoices.prompt}
+                    options={latestChoices.options}
+                    onSelect={(option) => {
+                      if (onChoiceSelect) {
+                        onChoiceSelect(option);
+                      } else {
+                        onSendMessage(option.label);
+                      }
+                    }}
+                  />
+                )}
+
+                {showLoadingIndicator && (
+                  <AiChatLoading assistantName={displayName} />
+                )}
+              </div>
+            )}
+          </div>
+
+          {!isStuck && (
+            <button
+              type="button"
+              onClick={scrollToBottom}
+              aria-label={t("scroll_to_bottom")}
+              className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center size-8 rounded-full border border-ai-chat-border bg-ai-chat shadow-md hover:bg-ai-chat-muted"
+            >
+              <ArrowDown className="size-4" />
+            </button>
+          )}
+        </div>
+
+        <AiChatInput
+          value={input}
+          onChange={setInput}
+          onSubmit={handleSubmit}
+          onStop={onStop}
+          onClear={onClearChat}
+          isLoading={isLoading}
+          placeholder={placeholder}
+          showClearButton={showClearButton}
+          hasMessages={messages.length > 0}
+        />
+      </div>
+    </AiChatProvider>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index eb8be9221..f21cf8d16 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -1 +1,37 @@
 export type { ChoiceOption, ToolResultChoices } from "./utils/ai-chat-utils";
+
+export type AiChatVariant = "default" | "compact" | "embedded";
+
+export type MessageFeedbackType = "up" | "down";
+
+export interface MessageAction {
+  /** Unique key for the action */
+  key: string;
+  /** Label shown in tooltip */
+  label: string;
+  /** Lucide icon component */
+  icon: React.ComponentType<{ className?: string }>;
+  /** Called when the action is triggered */
+  onClick: () => void;
+  /** Only show for specific message roles */
+  visibleFor?: "user" | "assistant";
+}
+
+export interface AiChatConfig {
+  /** Layout variant — controls spacing, chrome, and borders */
+  variant: AiChatVariant;
+  /** Display name for the assistant */
+  assistantName: string;
+  /** Custom avatar for the assistant (ReactNode) */
+  assistantAvatar?: React.ReactNode;
+  /** Custom avatar for the user (ReactNode) */
+  userAvatar?: React.ReactNode;
+  /** Show relative timestamps on messages */
+  showTimestamps: boolean;
+  /** Show hover action toolbar on messages */
+  showMessageActions: boolean;
+  /** Show copy button on code blocks and messages */
+  showCopyButton: boolean;
+  /** Whether the chat is currently loading */
+  isLoading: boolean;
+}
diff --git a/apps/apollo-vertex/registry/alert-dialog/alert-dialog.tsx b/apps/apollo-vertex/registry/alert-dialog/alert-dialog.tsx
index 6130fc945..72a53e899 100644
--- a/apps/apollo-vertex/registry/alert-dialog/alert-dialog.tsx
+++ b/apps/apollo-vertex/registry/alert-dialog/alert-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react";
+import type * as React from "react";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/avatar/avatar.tsx b/apps/apollo-vertex/registry/avatar/avatar.tsx
index 1393f5097..11c21d9bf 100644
--- a/apps/apollo-vertex/registry/avatar/avatar.tsx
+++ b/apps/apollo-vertex/registry/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/badge/badge.tsx b/apps/apollo-vertex/registry/badge/badge.tsx
index 7f4e10fca..fdd4def1d 100644
--- a/apps/apollo-vertex/registry/badge/badge.tsx
+++ b/apps/apollo-vertex/registry/badge/badge.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/breadcrumb/breadcrumb.tsx b/apps/apollo-vertex/registry/breadcrumb/breadcrumb.tsx
index 4df4cc37d..72bf73550 100644
--- a/apps/apollo-vertex/registry/breadcrumb/breadcrumb.tsx
+++ b/apps/apollo-vertex/registry/breadcrumb/breadcrumb.tsx
@@ -2,7 +2,7 @@
 
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/button/button.tsx b/apps/apollo-vertex/registry/button/button.tsx
index 43ecee22f..0b2105369 100644
--- a/apps/apollo-vertex/registry/button/button.tsx
+++ b/apps/apollo-vertex/registry/button/button.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/card/card.tsx b/apps/apollo-vertex/registry/card/card.tsx
index 03434dbbb..faf3d7b23 100644
--- a/apps/apollo-vertex/registry/card/card.tsx
+++ b/apps/apollo-vertex/registry/card/card.tsx
@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/checkbox/checkbox.tsx b/apps/apollo-vertex/registry/checkbox/checkbox.tsx
index 267c95b0d..e771797aa 100644
--- a/apps/apollo-vertex/registry/checkbox/checkbox.tsx
+++ b/apps/apollo-vertex/registry/checkbox/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/command/command.tsx b/apps/apollo-vertex/registry/command/command.tsx
index cab3c271b..397d948d8 100644
--- a/apps/apollo-vertex/registry/command/command.tsx
+++ b/apps/apollo-vertex/registry/command/command.tsx
@@ -2,7 +2,7 @@
 
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import {
   Dialog,
   DialogContent,
diff --git a/apps/apollo-vertex/registry/context-menu/context-menu.tsx b/apps/apollo-vertex/registry/context-menu/context-menu.tsx
index 366aede80..5c4b9961c 100644
--- a/apps/apollo-vertex/registry/context-menu/context-menu.tsx
+++ b/apps/apollo-vertex/registry/context-menu/context-menu.tsx
@@ -2,7 +2,7 @@
 
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/data-table/data-table-column-header.tsx b/apps/apollo-vertex/registry/data-table/data-table-column-header.tsx
index a10ce5ee6..104bf3cf0 100644
--- a/apps/apollo-vertex/registry/data-table/data-table-column-header.tsx
+++ b/apps/apollo-vertex/registry/data-table/data-table-column-header.tsx
@@ -2,7 +2,7 @@
 
 import type { Column, SortDirection } from "@tanstack/react-table";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/data-table/data-table-row.tsx b/apps/apollo-vertex/registry/data-table/data-table-row.tsx
index 5db6a515e..fb0cdd809 100644
--- a/apps/apollo-vertex/registry/data-table/data-table-row.tsx
+++ b/apps/apollo-vertex/registry/data-table/data-table-row.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 
 import { TableCell, TableRow } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/date-picker/date-picker.tsx b/apps/apollo-vertex/registry/date-picker/date-picker.tsx
index ff3526628..5c580fff7 100644
--- a/apps/apollo-vertex/registry/date-picker/date-picker.tsx
+++ b/apps/apollo-vertex/registry/date-picker/date-picker.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { DateTime } from "luxon";
 import { ChevronDownIcon } from "lucide-react";
+import { DateTime } from "luxon";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
diff --git a/apps/apollo-vertex/registry/dialog/dialog.tsx b/apps/apollo-vertex/registry/dialog/dialog.tsx
index 5fe451ff6..16ceece8a 100644
--- a/apps/apollo-vertex/registry/dialog/dialog.tsx
+++ b/apps/apollo-vertex/registry/dialog/dialog.tsx
@@ -2,7 +2,7 @@
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/drawer/drawer.tsx b/apps/apollo-vertex/registry/drawer/drawer.tsx
index 88488665f..5b3d6eaff 100644
--- a/apps/apollo-vertex/registry/drawer/drawer.tsx
+++ b/apps/apollo-vertex/registry/drawer/drawer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx b/apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx
index 9a5f645f0..184747adc 100644
--- a/apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx
+++ b/apps/apollo-vertex/registry/dropdown-menu/dropdown-menu.tsx
@@ -2,7 +2,7 @@
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/hover-card/hover-card.tsx b/apps/apollo-vertex/registry/hover-card/hover-card.tsx
index f64b24878..0ef6109c9 100644
--- a/apps/apollo-vertex/registry/hover-card/hover-card.tsx
+++ b/apps/apollo-vertex/registry/hover-card/hover-card.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/input/input.tsx b/apps/apollo-vertex/registry/input/input.tsx
index b7c9d9163..041b2f6a1 100644
--- a/apps/apollo-vertex/registry/input/input.tsx
+++ b/apps/apollo-vertex/registry/input/input.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/label/label.tsx b/apps/apollo-vertex/registry/label/label.tsx
index 6166bcb63..a3661dfa9 100644
--- a/apps/apollo-vertex/registry/label/label.tsx
+++ b/apps/apollo-vertex/registry/label/label.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/menubar/menubar.tsx b/apps/apollo-vertex/registry/menubar/menubar.tsx
index cd7730f15..f83080362 100644
--- a/apps/apollo-vertex/registry/menubar/menubar.tsx
+++ b/apps/apollo-vertex/registry/menubar/menubar.tsx
@@ -2,7 +2,7 @@
 
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/navigation-menu/navigation-menu.tsx b/apps/apollo-vertex/registry/navigation-menu/navigation-menu.tsx
index f84f8e1c5..c18bb30d2 100644
--- a/apps/apollo-vertex/registry/navigation-menu/navigation-menu.tsx
+++ b/apps/apollo-vertex/registry/navigation-menu/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/pagination/pagination.tsx b/apps/apollo-vertex/registry/pagination/pagination.tsx
index caa3b9e26..c7413ba79 100644
--- a/apps/apollo-vertex/registry/pagination/pagination.tsx
+++ b/apps/apollo-vertex/registry/pagination/pagination.tsx
@@ -5,7 +5,7 @@ import {
   ChevronRightIcon,
   MoreHorizontalIcon,
 } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/popover/popover.tsx b/apps/apollo-vertex/registry/popover/popover.tsx
index 45d31d8cf..1555f0583 100644
--- a/apps/apollo-vertex/registry/popover/popover.tsx
+++ b/apps/apollo-vertex/registry/popover/popover.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/progress/progress.tsx b/apps/apollo-vertex/registry/progress/progress.tsx
index cedbe4281..d00d5504b 100644
--- a/apps/apollo-vertex/registry/progress/progress.tsx
+++ b/apps/apollo-vertex/registry/progress/progress.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/radio-group/radio-group.tsx b/apps/apollo-vertex/registry/radio-group/radio-group.tsx
index 29534ed08..6ac185e86 100644
--- a/apps/apollo-vertex/registry/radio-group/radio-group.tsx
+++ b/apps/apollo-vertex/registry/radio-group/radio-group.tsx
@@ -2,7 +2,7 @@
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/resizable/resizable.tsx b/apps/apollo-vertex/registry/resizable/resizable.tsx
index f518282ac..732523652 100644
--- a/apps/apollo-vertex/registry/resizable/resizable.tsx
+++ b/apps/apollo-vertex/registry/resizable/resizable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { GripVerticalIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/scroll-area/scroll-area.tsx b/apps/apollo-vertex/registry/scroll-area/scroll-area.tsx
index 49248f049..554e349a2 100644
--- a/apps/apollo-vertex/registry/scroll-area/scroll-area.tsx
+++ b/apps/apollo-vertex/registry/scroll-area/scroll-area.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/select/select.tsx b/apps/apollo-vertex/registry/select/select.tsx
index 72ac7d29a..092125716 100644
--- a/apps/apollo-vertex/registry/select/select.tsx
+++ b/apps/apollo-vertex/registry/select/select.tsx
@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/separator/separator.tsx b/apps/apollo-vertex/registry/separator/separator.tsx
index ee7836062..50733e0aa 100644
--- a/apps/apollo-vertex/registry/separator/separator.tsx
+++ b/apps/apollo-vertex/registry/separator/separator.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/sheet/sheet.tsx b/apps/apollo-vertex/registry/sheet/sheet.tsx
index 8a95dca09..4ddab8358 100644
--- a/apps/apollo-vertex/registry/sheet/sheet.tsx
+++ b/apps/apollo-vertex/registry/sheet/sheet.tsx
@@ -2,7 +2,7 @@
 
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx b/apps/apollo-vertex/registry/shell/shell-nav-item.tsx
index ad22ad73b..273ffee79 100644
--- a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx
+++ b/apps/apollo-vertex/registry/shell/shell-nav-item.tsx
@@ -1,5 +1,5 @@
-import { Link, useLocation } from "@tanstack/react-router";
 import { useLocalStorage } from "@mantine/hooks";
+import { Link, useLocation } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import type { LucideIcon } from "lucide-react";
 import {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-content.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-content.tsx
index 27a9b6332..76a130901 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-content.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-content.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-footer.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-footer.tsx
index c5714bb41..84c952fec 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-footer.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-group-action.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-group-action.tsx
index 95817eea7..c67e32a4f 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-group-action.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-group-action.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarGroupAction({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-group-content.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-group-content.tsx
index b76e575af..e7a36f561 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-group-content.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-group-content.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarGroupContent({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-group-label.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-group-label.tsx
index 2b439ecfe..4459e8a9b 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-group-label.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-group-label.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarGroupLabel({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-group.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-group.tsx
index eb0ad4d21..b5eb3cc5e 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-group.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-header.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-header.tsx
index 2230fe5f8..160c1cafd 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-header.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-input.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-input.tsx
index 84105a2ce..31657dcb9 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-input.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-inset.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-inset.tsx
index 6fd8cc325..ef6f8a9df 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-inset.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-inset.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-action.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-action.tsx
index 11c1a17b5..3cf746736 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-action.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-action.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuAction({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-badge.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-badge.tsx
index 97f236d2d..f501123e9 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-badge.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-badge.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuBadge({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-button.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-button.tsx
index 9ed1744c7..f711a5684 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-button.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-button.tsx
@@ -2,7 +2,7 @@
 
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 import {
   Tooltip,
   TooltipContent,
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-item.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-item.tsx
index 4d99b29bb..aefe93c62 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-item.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-item.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-button.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-button.tsx
index b45de3c3d..67403bc7a 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-button.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuSubButton({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-item.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-item.tsx
index c4a686e91..1d4d0d277 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-item.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub-item.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuSubItem({
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub.tsx
index d15532802..c6790e9c3 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu-sub.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-menu.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-menu.tsx
index 991b03162..a34e76ec5 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-menu.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-rail.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-rail.tsx
index ff700abf6..0d6cf6afc 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-rail.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-rail.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/lib/utils";
 import { useSidebar } from "./sidebar-provider";
 
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-separator.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-separator.tsx
index a56327db4..275a15adf 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-separator.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-separator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar-trigger.tsx b/apps/apollo-vertex/registry/sidebar/sidebar-trigger.tsx
index 9d474ae84..67690d13c 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar-trigger.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar-trigger.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { PanelLeftIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
diff --git a/apps/apollo-vertex/registry/sidebar/sidebar.tsx b/apps/apollo-vertex/registry/sidebar/sidebar.tsx
index 8fb73c4c4..0b313ed3e 100644
--- a/apps/apollo-vertex/registry/sidebar/sidebar.tsx
+++ b/apps/apollo-vertex/registry/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { useTranslation } from "react-i18next";
 import {
   Sheet,
diff --git a/apps/apollo-vertex/registry/switch/switch.tsx b/apps/apollo-vertex/registry/switch/switch.tsx
index 3bf9946f6..6423f00f5 100644
--- a/apps/apollo-vertex/registry/switch/switch.tsx
+++ b/apps/apollo-vertex/registry/switch/switch.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/table/table.tsx b/apps/apollo-vertex/registry/table/table.tsx
index 71936c551..503e81f56 100644
--- a/apps/apollo-vertex/registry/table/table.tsx
+++ b/apps/apollo-vertex/registry/table/table.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/tabs/tabs.tsx b/apps/apollo-vertex/registry/tabs/tabs.tsx
index 10c310e83..2da77f22e 100644
--- a/apps/apollo-vertex/registry/tabs/tabs.tsx
+++ b/apps/apollo-vertex/registry/tabs/tabs.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/textarea/textarea.tsx b/apps/apollo-vertex/registry/textarea/textarea.tsx
index 7843cc2e5..73ebf4bc5 100644
--- a/apps/apollo-vertex/registry/textarea/textarea.tsx
+++ b/apps/apollo-vertex/registry/textarea/textarea.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/toggle/toggle.tsx b/apps/apollo-vertex/registry/toggle/toggle.tsx
index 91c5d7e36..87074579d 100644
--- a/apps/apollo-vertex/registry/toggle/toggle.tsx
+++ b/apps/apollo-vertex/registry/toggle/toggle.tsx
@@ -2,7 +2,7 @@
 
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/tooltip/tooltip.tsx b/apps/apollo-vertex/registry/tooltip/tooltip.tsx
index 981f5b5e5..ed700c2fb 100644
--- a/apps/apollo-vertex/registry/tooltip/tooltip.tsx
+++ b/apps/apollo-vertex/registry/tooltip/tooltip.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/use-data-table/useEntityDataTable.tsx b/apps/apollo-vertex/registry/use-data-table/useEntityDataTable.tsx
index d096a9c1b..dfde82546 100644
--- a/apps/apollo-vertex/registry/use-data-table/useEntityDataTable.tsx
+++ b/apps/apollo-vertex/registry/use-data-table/useEntityDataTable.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useLocalStorage } from "@mantine/hooks";
 import { useLiveQuery } from "@tanstack/react-db";
 import type {
   ColumnFiltersState,
@@ -8,9 +9,7 @@ import type {
 } from "@tanstack/react-table";
 import { useSolution } from "@uipath/vs-core";
 import { useState } from "react";
-
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@mantine/hooks";
 
 import type {
   ColumnDefWithAccessorKey,
diff --git a/apps/apollo-vertex/registry/use-data-table/usePersistedColumnOrder.ts b/apps/apollo-vertex/registry/use-data-table/usePersistedColumnOrder.ts
index 1bef99736..ed8906409 100644
--- a/apps/apollo-vertex/registry/use-data-table/usePersistedColumnOrder.ts
+++ b/apps/apollo-vertex/registry/use-data-table/usePersistedColumnOrder.ts
@@ -1,9 +1,8 @@
 "use client";
 
+import { useLocalStorage } from "@mantine/hooks";
 import type { OnChangeFn } from "@tanstack/react-table";
-
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@mantine/hooks";
 
 export interface UsePersistedColumnOrderOptions {
   storageKey: string;
diff --git a/apps/apollo-vertex/registry/use-data-table/usePersistedSorting.ts b/apps/apollo-vertex/registry/use-data-table/usePersistedSorting.ts
index 6eb268f1a..0caada1b3 100644
--- a/apps/apollo-vertex/registry/use-data-table/usePersistedSorting.ts
+++ b/apps/apollo-vertex/registry/use-data-table/usePersistedSorting.ts
@@ -1,9 +1,8 @@
 "use client";
 
+import { useLocalStorage } from "@mantine/hooks";
 import type { OnChangeFn, SortingState } from "@tanstack/react-table";
-
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@mantine/hooks";
 
 export interface UsePersistedSortingOptions {
   storageKey: string;
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
index 713901c99..d69c4cb17 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { useLocalStorage } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
 import { jwtDecode } from "jwt-decode";
 import { ChevronRight, LogIn, LogOut } from "lucide-react";
-import { useLocalStorage } from "@mantine/hooks";
 import type { ReactNode } from "react";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";

From 45c9b74a14466d63913462b814dae2ec6a5e5a91 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 8 Apr 2026 16:31:18 -0400
Subject: [PATCH 02/35] chore(apollo-vertex): Initial styling

---
 .../ai-chat/preview/page.tsx                  |   6 +-
 apps/apollo-vertex/registry.json              |   6 +-
 .../components/ai-chat-empty-state.tsx        |   6 +-
 .../ai-chat/components/ai-chat-input.tsx      |  75 ++++++----
 .../ai-chat/components/ai-chat-markdown.tsx   |   2 +-
 .../components/ai-chat-message-actions.tsx    |  22 +--
 .../ai-chat/components/ai-chat-message.tsx    | 129 +++---------------
 .../registry/ai-chat/components/ai-chat.tsx   |  34 +++--
 8 files changed, 105 insertions(+), 175 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 363b9d439..cc9793612 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -75,7 +75,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
-            title="Apollo Assistant"
+            title="Autopilot"
           />
         </PreviewCard>
       </section>
@@ -120,7 +120,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
-            title="Apollo Assistant"
+            title="Autopilot"
             showTimestamps
             showMessageActions
           >
@@ -219,7 +219,7 @@ export default function AiChatPreviewPage() {
             onSendMessage={noop}
             onStop={noop}
             onRetry={noop}
-            title="Apollo Assistant"
+            title="Autopilot"
             error={
               new Error(
                 "Failed to connect to the AI service. Please check your network connection.",
diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
index 30c12d26c..dd55a7b1e 100644
--- a/apps/apollo-vertex/registry.json
+++ b/apps/apollo-vertex/registry.json
@@ -183,7 +183,8 @@
           "--info-fg": "oklch(0.49 0.12 210)",
           "--success-fg": "oklch(0.46 0.10 152)",
           "--destructive-fg": "oklch(0.50 0.14 18)",
-          "ai-gradient": "linear-gradient(100.64deg, rgb(238, 224, 255) 8.29%, rgb(207, 217, 255) 88.73%)"
+          "ai-gradient": "linear-gradient(100.64deg, rgb(238, 224, 255) 8.29%, rgb(207, 217, 255) 88.73%)",
+          "ai-gradient-strong": "linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%)"
         },
         "dark": {
           "background": "oklch(0.2100 0.0300 258.5000)",
@@ -271,7 +272,8 @@
           "shadow-2xl": "0 0px 12px 0px hsl(0 0% 0% / 0.25)",
           "tracking-normal": "0em",
           "spacing": "0.25rem",
-          "ai-gradient": "linear-gradient(98.69deg, rgb(108, 90, 239) 8.79%, rgb(105, 199, 221) 91.48%)"
+          "ai-gradient": "linear-gradient(98.69deg, rgb(108, 90, 239) 8.79%, rgb(105, 199, 221) 91.48%)",
+          "ai-gradient-strong": "linear-gradient(97.73deg, #6C5AEF 8.79%, #69C7DD 91.48%)"
         }
       }
     },
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index 344c7ff1b..0f863bf0c 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -32,9 +32,9 @@ export function AiChatEmptyState({
           />
         )}
       </div>
-      <div className="space-y-1">
-        <p className="text-lg font-medium text-ai-chat-foreground">{title}</p>
-        {description && <p className="text-sm max-w-sm">{description}</p>}
+      <div className="flex flex-col items-center gap-1">
+        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">{title}</h2>
+        {description && <p className="text-sm text-muted-foreground max-w-sm">{description}</p>}
       </div>
       {suggestions && suggestions.length > 0 && onSuggestionClick && (
         <div className="flex flex-wrap justify-center gap-2 max-w-md">
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 6184fec2a..d39440e29 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Paperclip, Send, Square, Trash2 } from "lucide-react";
+import { ArrowUp, Paperclip, Square, Trash2 } from "lucide-react";
 import { type FormEvent, type KeyboardEvent, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
@@ -9,10 +9,9 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/tooltip/tooltip";
-import { useAiChat } from "./ai-chat-provider";
 
 const UPLOAD_LABEL = "Attach files";
-const ENTER_HINT = "Enter to send, Shift+Enter for new line";
+const DISCLAIMER = "Responses may be inaccurate. Please verify important information.";
 
 interface AiChatInputProps {
   value: string;
@@ -44,10 +43,8 @@ export function AiChatInput({
   maxLength,
 }: AiChatInputProps) {
   const { t } = useTranslation();
-  const { variant } = useAiChat();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const isCompact = variant === "compact";
-  const displayPlaceholder = placeholder ?? t("type_a_message");
+  const displayPlaceholder = placeholder ?? "Describe what you want to do\u2026";
 
   const adjustHeight = () => {
     const el = textareaRef.current;
@@ -85,14 +82,41 @@ export function AiChatInput({
     }
   };
 
-  const showCharCount = maxLength && value.length > maxLength * 0.8;
 
   return (
-    <div className="p-3">
+    <div className="mt-auto py-3 px-4">
       <div className="flex items-end gap-2">
         <form
           onSubmit={handleSubmit}
-          className={`flex-1 flex items-end gap-2 px-4 py-2 border-2 transition-colors bg-ai-chat-input border-transparent focus-within:border-ai-chat-ring focus-within:shadow-sm ${isCompact ? "rounded-lg" : "rounded-full"}`}
+          className="flex-1 flex items-end gap-2 pl-[23px] pr-1.5 py-1 rounded-lg border border-input transition-all bg-background"
+          onFocusCapture={(e) => {
+            const el = e.currentTarget;
+            el.style.borderWidth = "2px";
+            el.style.borderColor = "transparent";
+            el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`;
+            el.style.backgroundOrigin = "border-box";
+            el.style.backgroundClip = "padding-box, border-box";
+            el.style.boxShadow = "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
+            el.style.paddingLeft = "22px";
+            el.style.paddingTop = "3px";
+            el.style.paddingRight = "5px";
+            el.style.paddingBottom = "3px";
+          }}
+          onBlurCapture={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+              const el = e.currentTarget;
+              el.style.borderWidth = "";
+              el.style.borderColor = "";
+              el.style.backgroundImage = "";
+              el.style.backgroundOrigin = "";
+              el.style.backgroundClip = "";
+              el.style.boxShadow = "";
+              el.style.paddingLeft = "";
+              el.style.paddingTop = "";
+              el.style.paddingRight = "";
+              el.style.paddingBottom = "";
+            }
+          }}
         >
           {onFileSelect && (
             <Tooltip>
@@ -101,7 +125,7 @@ export function AiChatInput({
                   type="button"
                   variant="ghost"
                   size="icon-sm"
-                  className="flex-shrink-0 mb-0.5 text-ai-chat-muted-foreground hover:text-ai-chat-foreground"
+                  className="flex-shrink-0 text-muted-foreground hover:text-foreground"
                   onClick={() => {
                     const fileInput = document.createElement("input");
                     fileInput.type = "file";
@@ -125,7 +149,7 @@ export function AiChatInput({
             onKeyDown={handleKeyDown}
             placeholder={displayPlaceholder}
             aria-label={displayPlaceholder}
-            className="flex-1 resize-none bg-transparent text-sm text-ai-chat-input-foreground placeholder:text-ai-chat-muted-foreground focus-visible:outline-none min-h-[40px] max-h-[200px] py-1.5 overflow-y-auto"
+            className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[40px] max-h-[200px] py-[10px] overflow-y-auto leading-[20px]"
             rows={1}
             disabled={disabled}
           />
@@ -136,7 +160,7 @@ export function AiChatInput({
                   type="button"
                   variant="ghost"
                   size="icon-sm"
-                  className="flex-shrink-0 mb-0.5"
+                  className="flex-shrink-0"
                   onClick={onStop}
                 >
                   <Square className="size-4" aria-hidden="true" />
@@ -147,15 +171,15 @@ export function AiChatInput({
           ) : (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button
+                <button
                   type="submit"
-                  variant="default"
-                  size="icon-sm"
-                  className="flex-shrink-0 mb-0.5 bg-ai-chat-accent text-ai-chat-accent-foreground hover:bg-ai-chat-accent/90"
                   disabled={!value.trim() || disabled}
+                  className="flex-shrink-0 size-9 mb-0.5 rounded-lg flex items-center justify-center text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+                  style={{ background: "var(--ai-gradient-strong)" }}
+                  aria-label={t("send")}
                 >
-                  <Send className="size-4" aria-hidden="true" />
-                </Button>
+                  <ArrowUp className="size-5" aria-hidden="true" />
+                </button>
               </TooltipTrigger>
               <TooltipContent>{t("send")}</TooltipContent>
             </Tooltip>
@@ -168,7 +192,7 @@ export function AiChatInput({
                 type="button"
                 variant="ghost"
                 size="icon-sm"
-                className="flex-shrink-0 text-ai-chat-muted-foreground hover:text-ai-chat-foreground"
+                className="flex-shrink-0 text-muted-foreground hover:text-foreground"
                 onClick={onClear}
               >
                 <Trash2 className="size-4" aria-hidden="true" />
@@ -178,17 +202,8 @@ export function AiChatInput({
           </Tooltip>
         )}
       </div>
-      <div className="flex items-center justify-between px-2 mt-1">
-        {!isCompact && (
-          <span className="text-xs text-ai-chat-muted-foreground">
-            {ENTER_HINT}
-          </span>
-        )}
-        {showCharCount && (
-          <span className="text-xs text-ai-chat-muted-foreground ml-auto">
-            {`${value.length}/${maxLength}`}
-          </span>
-        )}
+      <div className="mt-1 pl-[24px]">
+        <span className="text-xs text-muted-foreground">{DISCLAIMER}</span>
       </div>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index a63cfe052..1a72a383e 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -102,7 +102,7 @@ interface AiChatMarkdownProps {
 
 export function AiChatMarkdown({ children }: AiChatMarkdownProps) {
   return (
-    <div className="px-4 py-3 text-sm rounded-lg bg-ai-chat-bubble-assistant text-ai-chat-bubble-assistant-foreground prose prose-sm dark:prose-invert max-w-none">
+    <div className="py-3 text-sm bg-transparent text-foreground prose prose-sm dark:prose-invert max-w-none">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {children}
       </ReactMarkdown>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
index f6da975ba..c13ccf83a 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -2,7 +2,7 @@
 
 import {
   Check,
-  ClipboardCopy,
+  Copy,
   Pencil,
   RefreshCw,
   ThumbsDown,
@@ -19,9 +19,9 @@ import type { MessageFeedbackType } from "../types";
 const LABELS = {
   copy: "Copy",
   copied: "Copied!",
-  helpful: "Helpful",
-  notHelpful: "Not helpful",
-  regenerate: "Regenerate",
+  helpful: "Good response",
+  notHelpful: "Bad response",
+  regenerate: "Try again",
   edit: "Edit",
 } as const;
 
@@ -53,7 +53,7 @@ export function AiChatMessageActions({
   const copyLabel = copied ? LABELS.copied : LABELS.copy;
 
   return (
-    <div className="flex items-center gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity">
+    <div className={`flex items-center gap-0.5 -ml-[7px] transition-opacity ${messageRole === "assistant" ? "opacity-100" : "opacity-0 group-hover/message:opacity-100"}`}>
       {showCopy && (
         <Tooltip>
           <TooltipTrigger asChild>
@@ -66,7 +66,7 @@ export function AiChatMessageActions({
               {copied ? (
                 <Check className="size-3.5 text-success" aria-hidden="true" />
               ) : (
-                <ClipboardCopy
+                <Copy
                   className="size-3.5 text-ai-chat-muted-foreground"
                   aria-hidden="true"
                 />
@@ -77,13 +77,13 @@ export function AiChatMessageActions({
         </Tooltip>
       )}
 
-      {messageRole === "assistant" && onFeedback && (
+      {messageRole === "assistant" && (
         <>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 type="button"
-                onClick={() => onFeedback("up")}
+                onClick={() => onFeedback?.("up")}
                 className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
                 aria-label={LABELS.helpful}
               >
@@ -100,7 +100,7 @@ export function AiChatMessageActions({
             <TooltipTrigger asChild>
               <button
                 type="button"
-                onClick={() => onFeedback("down")}
+                onClick={() => onFeedback?.("down")}
                 className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
                 aria-label={LABELS.notHelpful}
               >
@@ -115,12 +115,12 @@ export function AiChatMessageActions({
         </>
       )}
 
-      {messageRole === "assistant" && onRegenerate && (
+      {messageRole === "assistant" && (
         <Tooltip>
           <TooltipTrigger asChild>
             <button
               type="button"
-              onClick={onRegenerate}
+              onClick={() => onRegenerate?.()}
               className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
               aria-label={LABELS.regenerate}
             >
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index 04ddcb97c..a4bbedb7f 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import type { TextPart, UIMessage } from "@tanstack/ai-client";
-import { Sparkles, User } from "lucide-react";
 import type { ReactNode } from "react";
-import { Avatar, AvatarFallback } from "@/registry/avatar/avatar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/tooltip/tooltip";
 import type { MessageFeedbackType } from "../types";
 import { AiChatMarkdown } from "./ai-chat-markdown";
 import { AiChatMessageActions } from "./ai-chat-message-actions";
@@ -16,12 +9,9 @@ import { useAiChat } from "./ai-chat-provider";
 
 interface AiChatMessageProps {
   message: UIMessage;
-  assistantName?: string;
   children?: ReactNode;
   /** Whether this message is currently being streamed */
   isStreaming?: boolean;
-  /** Hide avatar and name (for grouped consecutive messages) */
-  isGrouped?: boolean;
   /** Callbacks for message actions */
   onFeedback?: (type: MessageFeedbackType) => void;
   onRegenerate?: () => void;
@@ -35,116 +25,47 @@ function getDisplayText(message: UIMessage): string {
     .join("");
 }
 
-function formatRelativeTime(date: Date): string {
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  if (diffSec < 60) return "just now";
-  const diffMin = Math.floor(diffSec / 60);
-  if (diffMin < 60) return `${diffMin}m ago`;
-  const diffHr = Math.floor(diffMin / 60);
-  if (diffHr < 24) return `${diffHr}h ago`;
-  const diffDay = Math.floor(diffHr / 24);
-  return `${diffDay}d ago`;
-}
-
-function formatFullDateTime(date: Date): string {
-  return date.toLocaleString(navigator.language, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  });
-}
-
 export function AiChatMessage({
   message,
-  assistantName,
   children,
   isStreaming = false,
-  isGrouped = false,
   onFeedback,
   onRegenerate,
   onEdit,
 }: AiChatMessageProps) {
   const config = useAiChat();
   const isUser = message.role === "user";
-  const displayName = assistantName ?? config.assistantName;
   const displayContent = getDisplayText(message);
 
   if (!isUser && !displayContent && !children) {
     return null;
   }
 
-  const timestamp = message.createdAt ? new Date(message.createdAt) : null;
-
   if (isUser) {
     return (
-      <div className="group/message flex w-full justify-end gap-3">
+      <div className="group/message flex w-full justify-end">
         <div className="flex flex-col items-end gap-1 max-w-[80%]">
           <div className="px-4 py-3 text-sm rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
             {displayContent && (
               <p className="whitespace-pre-wrap">{displayContent}</p>
             )}
           </div>
-          <div className="flex items-center gap-2">
-            {config.showTimestamps && timestamp && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="text-xs text-ai-chat-muted-foreground cursor-default">
-                    {formatRelativeTime(timestamp)}
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>{formatFullDateTime(timestamp)}</TooltipContent>
-              </Tooltip>
-            )}
-            {config.showMessageActions && (
-              <AiChatMessageActions
-                content={displayContent}
-                messageRole="user"
-                showCopy={config.showCopyButton}
-                onEdit={onEdit}
-              />
-            )}
-          </div>
+          {config.showMessageActions && (
+            <AiChatMessageActions
+              content={displayContent}
+              messageRole="user"
+              showCopy={config.showCopyButton}
+              onEdit={onEdit}
+            />
+          )}
         </div>
-        {!isGrouped && (
-          <Avatar className="size-8 flex-shrink-0">
-            <AvatarFallback className="bg-ai-chat-muted">
-              {config.userAvatar ?? (
-                <User
-                  className="size-4 text-ai-chat-muted-foreground"
-                  aria-hidden="true"
-                />
-              )}
-            </AvatarFallback>
-          </Avatar>
-        )}
-        {isGrouped && <div className="size-8 flex-shrink-0" />}
       </div>
     );
   }
 
   return (
-    <div className="group/message flex w-full justify-start gap-3">
-      {isGrouped ? (
-        <div className="size-8 flex-shrink-0" />
-      ) : (
-        <Avatar className="size-8 flex-shrink-0">
-          <AvatarFallback className="bg-ai-chat-accent">
-            {config.assistantAvatar ?? (
-              <Sparkles
-                className="size-4 text-ai-chat-accent-foreground"
-                aria-hidden="true"
-              />
-            )}
-          </AvatarFallback>
-        </Avatar>
-      )}
+    <div className="group/message flex w-full justify-start">
       <div className="flex flex-col gap-1 max-w-[85%]">
-        {!isGrouped && (
-          <span className="text-xs text-ai-chat-muted-foreground font-medium">
-            {displayName}
-          </span>
-        )}
         {displayContent && (
           <div>
             <AiChatMarkdown>{displayContent}</AiChatMarkdown>
@@ -154,27 +75,15 @@ export function AiChatMessage({
           </div>
         )}
         {children && <div className="mt-2 flex flex-col gap-2">{children}</div>}
-        <div className="flex items-center gap-2">
-          {config.showTimestamps && timestamp && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className="text-xs text-ai-chat-muted-foreground cursor-default">
-                  {formatRelativeTime(timestamp)}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>{formatFullDateTime(timestamp)}</TooltipContent>
-            </Tooltip>
-          )}
-          {config.showMessageActions && (
-            <AiChatMessageActions
-              content={displayContent}
-              messageRole="assistant"
-              showCopy={config.showCopyButton}
-              onFeedback={onFeedback}
-              onRegenerate={onRegenerate}
-            />
-          )}
-        </div>
+        {config.showMessageActions && (
+          <AiChatMessageActions
+            content={displayContent}
+            messageRole="assistant"
+            showCopy={config.showCopyButton}
+            onFeedback={onFeedback}
+            onRegenerate={onRegenerate}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 6dfad7258..f6c2c5465 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -97,19 +97,20 @@ export function AiChat({
   const showLoadingIndicator = isLoading && !lastAssistantHasText;
 
   const defaultEmptyState = (
-    <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground">
-      <div className="size-16 flex items-center justify-center mb-4 rounded-full bg-ai-chat-accent">
-        <Sparkles
-          className="size-8 text-ai-chat-accent-foreground"
-          aria-hidden="true"
-        />
+    <div className="flex flex-col items-center justify-center h-full text-center">
+      <div className="flex flex-col items-center gap-1">
+        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
+          {"What would you like to do?"}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {"I can help you review, fix, or complete your work."}
+        </p>
       </div>
-      <p>{t("start_conversation_with", { name: displayName })}</p>
     </div>
   );
 
-  const padding = isCompact ? "p-2" : "p-4";
-  const messageGap = isCompact ? "space-y-2" : "space-y-4";
+  const padding = isCompact ? "p-2" : "py-4 pl-10 pr-4";
+  const messageGap = isCompact ? "space-y-2" : "space-y-1";
 
   return (
     <AiChatProvider
@@ -125,18 +126,21 @@ export function AiChat({
       <div
         className={
           isEmbedded
-            ? "flex flex-col h-full bg-transparent text-ai-chat-foreground"
-            : "flex flex-col h-full border border-ai-chat-border rounded-lg bg-ai-chat text-ai-chat-foreground"
+            ? "flex flex-col h-full max-w-[765px] mx-auto bg-transparent text-ai-chat-foreground"
+            : "flex flex-col h-full max-w-[765px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground"
         }
         data-slot="ai-chat"
       >
         {renderHeader ??
           (title && !isCompact && !isEmbedded && (
-            <div className="py-3 px-4">
-              <h3 className="flex items-center gap-2 text-base font-semibold">
-                <Sparkles className="size-4" aria-hidden="true" />
+            <div className="py-3 px-4 flex items-center gap-2">
+              <Sparkles className="size-4 text-[#6C5AEF]" aria-hidden="true" />
+              <span
+                className="text-sm font-bold tracking-tight bg-clip-text text-transparent"
+                style={{ backgroundImage: "var(--ai-gradient-strong)" }}
+              >
                 {title}
-              </h3>
+              </span>
             </div>
           ))}
 

From f2d27e9aa17d06e62bc80f13b1c5868fcb62147e Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 8 Apr 2026 16:49:40 -0400
Subject: [PATCH 03/35] chore(apollo-vertex): Error message cleanup

---
 .../ai-chat/components/ai-chat-input.tsx      |  2 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 50 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index d39440e29..57006aca3 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -84,7 +84,7 @@ export function AiChatInput({
 
 
   return (
-    <div className="mt-auto py-3 px-4">
+    <div className="relative z-10 mt-auto py-3 px-4">
       <div className="flex items-end gap-2">
         <form
           onSubmit={handleSubmit}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index f6c2c5465..732e3d131 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -144,31 +144,6 @@ export function AiChat({
             </div>
           ))}
 
-        {error && (
-          <div
-            role="alert"
-            aria-live="assertive"
-            className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive max-h-16 overflow-y-auto"
-          >
-            <AlertCircle
-              className="h-4 w-4 flex-shrink-0 mt-0.5"
-              aria-hidden="true"
-            />
-            <span className="flex-1">{error.message}</span>
-            {onRetry && (
-              <button
-                type="button"
-                onClick={onRetry}
-                className="flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium hover:underline"
-                aria-label={RETRY_LABEL}
-              >
-                <RefreshCw className="size-3" aria-hidden="true" />
-                {RETRY_LABEL}
-              </button>
-            )}
-          </div>
-        )}
-
         <div className="relative flex-1 min-h-0">
           <div
             ref={scrollRef}
@@ -217,6 +192,31 @@ export function AiChat({
           )}
         </div>
 
+        {error && (
+          <div
+            role="alert"
+            aria-live="assertive"
+            className="relative z-0 mx-4 -mb-6 flex items-center gap-2 rounded-t-lg bg-destructive/10 px-[23px] pt-3 pb-6 text-sm text-destructive"
+          >
+            <AlertCircle
+              className="h-4 w-4 flex-shrink-0"
+              aria-hidden="true"
+            />
+            <span className="flex-1">{error.message}</span>
+            {onRetry && (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium hover:underline"
+                aria-label={RETRY_LABEL}
+              >
+                <RefreshCw className="size-3" aria-hidden="true" />
+                {RETRY_LABEL}
+              </button>
+            )}
+          </div>
+        )}
+
         <AiChatInput
           value={input}
           onChange={setInput}

From c74f6ffe42c00b14e7cbf8d9b297bae7aca15e4d Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 8 Apr 2026 17:23:15 -0400
Subject: [PATCH 04/35] chore(apollo-vertex): suggestion chips

---
 .../components/ai-chat-suggestions.tsx        | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index 49e5b3acd..34e817fbe 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { Badge } from "@/registry/badge/badge";
-import { Button } from "@/registry/button/button";
 import type { ChoiceOption } from "../types";
 
 interface AiChatSuggestionsProps {
@@ -17,31 +15,26 @@ export function AiChatSuggestions({
   onSelect,
 }: AiChatSuggestionsProps) {
   return (
-    <div className="space-y-2">
+    <div className="mt-4 space-y-2">
       {prompt && (
-        <p className="text-sm text-ai-chat-muted-foreground">{prompt}</p>
+        <p className="text-xs text-muted-foreground">{prompt}</p>
       )}
       <div className="flex flex-wrap gap-2">
         {options.map((option) => (
-          <Button
+          <button
             key={option.id}
             type="button"
-            variant={option.recommended ? "default" : "outline"}
-            size="sm"
             className={cn(
-              "h-auto py-2 px-3 text-left max-w-full transition-all hover:scale-[1.02]",
-              option.recommended &&
-                "bg-ai-chat-accent text-ai-chat-accent-foreground hover:bg-ai-chat-accent/90",
+              "h-auto py-2 px-4 text-left max-w-full rounded-full text-xs font-semibold transition-all hover:scale-[1.02]",
+              option.recommended
+                ? "text-white border-0"
+                : "border border-input bg-background text-foreground hover:bg-muted",
             )}
+            style={option.recommended ? { background: "var(--ai-gradient-strong)" } : {}}
             onClick={() => onSelect(option)}
           >
-            <span className="font-medium truncate">{option.label}</span>
-            {option.recommended && (
-              <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5">
-                {"\u2605"}
-              </Badge>
-            )}
-          </Button>
+            <span className="truncate">{option.label}</span>
+          </button>
         ))}
       </div>
     </div>

From cf9e3064b6c41943daea3aae825ea07ff12b17f9 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 9 Apr 2026 08:05:21 -0400
Subject: [PATCH 05/35] chore(apollo-vertex): Codeblocks and type

---
 .../ai-chat/preview/page.tsx                  |  8 +--
 apps/apollo-vertex/package.json               |  1 +
 .../ai-chat/components/ai-chat-code-block.tsx | 46 ++++++++++++++---
 .../ai-chat/components/ai-chat-input.tsx      | 25 ++++++----
 .../ai-chat/components/ai-chat-markdown.tsx   |  2 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 49 +++++++++++++------
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |  1 -
 .../ai-chat/AiChatConversationalAgentMode.tsx |  1 -
 8 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index cc9793612..1463075d6 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -94,8 +94,8 @@ export default function AiChatPreviewPage() {
             onStop={noop}
             emptyState={
               <AiChatEmptyState
-                title="Project Helper"
-                description="I can help you scaffold projects, debug code, and write docs."
+                title="What would you like to do?"
+                description="I can help you review, fix, or complete your work."
                 suggestions={[
                   "Create a React app",
                   "Debug my code",
@@ -144,14 +144,14 @@ export default function AiChatPreviewPage() {
             onSendMessage={noop}
             onStop={noop}
             title="Project Setup Wizard"
-            assistantName="Setup Bot"
+
             showTimestamps
           >
             {MOCK_MESSAGES_CONVERSATION.map((msg) => (
               <AiChatMessage
                 key={msg.id}
                 message={msg}
-                assistantName="Setup Bot"
+
               />
             ))}
           </AiChat>
diff --git a/apps/apollo-vertex/package.json b/apps/apollo-vertex/package.json
index 15cb90d6b..dfa26c66a 100644
--- a/apps/apollo-vertex/package.json
+++ b/apps/apollo-vertex/package.json
@@ -69,6 +69,7 @@
     "embla-carousel-react": "^8.6.0",
     "eventsource-parser": "^3.0.6",
     "framer-motion": "^12.26.2",
+    "highlight.js": "^11.11.1",
     "i18next": "^25.8.1",
     "input-otp": "^1.4.2",
     "jwt-decode": "^4.0.0",
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
index 8601d3d96..ff5b76011 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
@@ -1,6 +1,17 @@
 "use client";
 
-import { Check, ClipboardCopy } from "lucide-react";
+import "highlight.js/styles/github.min.css";
+
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import python from "highlight.js/lib/languages/python";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 import {
   Tooltip,
@@ -8,6 +19,23 @@ import {
   TooltipTrigger,
 } from "@/registry/tooltip/tooltip";
 
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("js", javascript);
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("ts", typescript);
+hljs.registerLanguage("tsx", typescript);
+hljs.registerLanguage("jsx", javascript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("py", python);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("sh", bash);
+hljs.registerLanguage("shell", bash);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("html", xml);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("sql", sql);
+
 const COPY_LABEL = "Copy code";
 const COPIED_LABEL = "Copied!";
 
@@ -19,6 +47,11 @@ interface AiChatCodeBlockProps {
 export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
   const [copied, setCopied] = useState(false);
 
+  const highlightedHtml =
+    language && hljs.getLanguage(language)
+      ? hljs.highlight(children, { language }).value
+      : hljs.highlightAuto(children).value;
+
   const handleCopy = async () => {
     await navigator.clipboard.writeText(children);
     setCopied(true);
@@ -28,7 +61,7 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
   const copyLabel = copied ? COPIED_LABEL : COPY_LABEL;
 
   return (
-    <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted overflow-hidden">
+    <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted/50 overflow-hidden">
       <div className="flex items-center justify-between px-3 py-1.5 border-b border-ai-chat-border">
         {language && (
           <span className="text-[11px] font-mono text-ai-chat-muted-foreground uppercase tracking-wider">
@@ -46,7 +79,7 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
               {copied ? (
                 <Check className="size-3 text-success" aria-hidden="true" />
               ) : (
-                <ClipboardCopy
+                <Copy
                   className="size-3 text-ai-chat-muted-foreground"
                   aria-hidden="true"
                 />
@@ -57,9 +90,10 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
         </Tooltip>
       </div>
       <pre className="p-3 overflow-x-auto">
-        <code className="text-xs font-mono text-ai-chat-foreground">
-          {children}
-        </code>
+        <code
+          className="hljs text-xs font-mono"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
       </pre>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 57006aca3..94de62f55 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUp, Paperclip, Square, Trash2 } from "lucide-react";
+import { ArrowUp, CircleStop, Paperclip, Trash2 } from "lucide-react";
 import { type FormEvent, type KeyboardEvent, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
@@ -44,6 +44,7 @@ export function AiChatInput({
 }: AiChatInputProps) {
   const { t } = useTranslation();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const glowRef = useRef<HTMLDivElement>(null);
   const displayPlaceholder = placeholder ?? "Describe what you want to do\u2026";
 
   const adjustHeight = () => {
@@ -85,10 +86,16 @@ export function AiChatInput({
 
   return (
     <div className="relative z-10 mt-auto py-3 px-4">
-      <div className="flex items-end gap-2">
+      <div className="relative flex items-end gap-2">
+        <div
+          ref={glowRef}
+          className={`absolute -inset-1 rounded-xl blur-sm transition-opacity duration-300 pointer-events-none ${hasMessages ? "opacity-0" : "opacity-10"}`}
+          style={{ background: "var(--ai-gradient-strong)" }}
+          aria-hidden="true"
+        />
         <form
           onSubmit={handleSubmit}
-          className="flex-1 flex items-end gap-2 pl-[23px] pr-1.5 py-1 rounded-lg border border-input transition-all bg-background"
+          className="relative flex-1 flex items-end gap-2 pl-[23px] pr-1.5 py-1 rounded-lg border border-input transition-all bg-background"
           onFocusCapture={(e) => {
             const el = e.currentTarget;
             el.style.borderWidth = "2px";
@@ -101,6 +108,7 @@ export function AiChatInput({
             el.style.paddingTop = "3px";
             el.style.paddingRight = "5px";
             el.style.paddingBottom = "3px";
+            if (glowRef.current) glowRef.current.style.opacity = "0";
           }}
           onBlurCapture={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget)) {
@@ -115,6 +123,7 @@ export function AiChatInput({
               el.style.paddingTop = "";
               el.style.paddingRight = "";
               el.style.paddingBottom = "";
+              if (glowRef.current) glowRef.current.style.opacity = "";
             }
           }}
         >
@@ -156,15 +165,13 @@ export function AiChatInput({
           {isLoading ? (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button
+                <button
                   type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  className="flex-shrink-0"
+                  className="flex-shrink-0 size-9 mb-0.5 rounded-lg flex items-center justify-center bg-secondary transition-opacity"
                   onClick={onStop}
                 >
-                  <Square className="size-4" aria-hidden="true" />
-                </Button>
+                  <CircleStop className="size-5 text-muted-foreground" aria-hidden="true" />
+                </button>
               </TooltipTrigger>
               <TooltipContent>{t("stop")}</TooltipContent>
             </Tooltip>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index 1a72a383e..83285c2d2 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -51,7 +51,7 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
     );
   },
   a: ({ children, ...props }: AnchorProps) => (
-    <a className="text-primary hover:underline" {...props}>
+    <a className="text-primary-700 dark:text-primary-400 hover:underline" {...props}>
       {children}
     </a>
   ),
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 732e3d131..b4ac048f3 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -144,6 +144,26 @@ export function AiChat({
             </div>
           ))}
 
+        {messages.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center px-4" style={{ justifyContent: "center", paddingBottom: "10%" }}>
+            <div className="w-full max-w-[765px]">
+              <div className="text-center mb-10">
+                {emptyState ?? defaultEmptyState}
+              </div>
+              <AiChatInput
+                value={input}
+                onChange={setInput}
+                onSubmit={handleSubmit}
+                onStop={onStop}
+                onClear={onClearChat}
+                isLoading={isLoading}
+                placeholder={placeholder}
+                showClearButton={showClearButton}
+                hasMessages={false}
+              />
+            </div>
+          </div>
+        ) : (
         <div className="relative flex-1 min-h-0">
           <div
             ref={scrollRef}
@@ -153,9 +173,6 @@ export function AiChat({
             aria-atomic="false"
             className={`h-full overflow-y-auto ${padding}`}
           >
-            {messages.length === 0 ? (
-              (emptyState ?? defaultEmptyState)
-            ) : (
               <div ref={contentRef} className={messageGap}>
                 {children}
 
@@ -177,7 +194,6 @@ export function AiChat({
                   <AiChatLoading assistantName={displayName} />
                 )}
               </div>
-            )}
           </div>
 
           {!isStuck && (
@@ -191,6 +207,7 @@ export function AiChat({
             </button>
           )}
         </div>
+        )}
 
         {error && (
           <div
@@ -217,17 +234,19 @@ export function AiChat({
           </div>
         )}
 
-        <AiChatInput
-          value={input}
-          onChange={setInput}
-          onSubmit={handleSubmit}
-          onStop={onStop}
-          onClear={onClearChat}
-          isLoading={isLoading}
-          placeholder={placeholder}
-          showClearButton={showClearButton}
-          hasMessages={messages.length > 0}
-        />
+        {messages.length > 0 && (
+          <AiChatInput
+            value={input}
+            onChange={setInput}
+            onSubmit={handleSubmit}
+            onStop={onStop}
+            onClear={onClearChat}
+            isLoading={isLoading}
+            placeholder={placeholder}
+            showClearButton={showClearButton}
+            hasMessages
+          />
+        )}
       </div>
     </AiChatProvider>
   );
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index 551a887af..071ffa2d3 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -53,7 +53,6 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
         <AiChatMessage
           key={message.id}
           message={message}
-          assistantName={t("assistant")}
         />
       ))}
     </AiChat>
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
index 5ed2d6d06..5a1b43ec5 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
@@ -60,7 +60,6 @@ function ConversationalAgentChatInner({
         <AiChatMessage
           key={message.id}
           message={message}
-          assistantName={assistantName}
         />
       ))}
     </AiChat>

From 8561b06440118e92a694f8a8a1e7db4cd184fe8f Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 9 Apr 2026 10:40:52 -0400
Subject: [PATCH 06/35] chore(apollo-vertex): spacing cleanup

---
 .../registry/ai-chat/components/ai-chat-markdown.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index 83285c2d2..d053bc430 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -102,7 +102,7 @@ interface AiChatMarkdownProps {
 
 export function AiChatMarkdown({ children }: AiChatMarkdownProps) {
   return (
-    <div className="py-3 text-sm bg-transparent text-foreground prose prose-sm dark:prose-invert max-w-none">
+    <div className="py-1 text-sm bg-transparent text-foreground prose prose-sm dark:prose-invert max-w-none">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {children}
       </ReactMarkdown>

From 1e26836f31dac54586307db998361d763df7d235 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Fri, 10 Apr 2026 16:12:13 -0400
Subject: [PATCH 07/35] chore(apollo-vertex): Typography

---
 .../ai-chat/preview/page.tsx                  |  21 +-
 .../ai-chat/preview/thinking-demo.tsx         |  50 ++++
 apps/apollo-vertex/registry.json              |  20 ++
 .../components/ai-chat-empty-state.tsx        |  14 +-
 .../ai-chat/components/ai-chat-input.tsx      |  49 +---
 .../ai-chat/components/ai-chat-loading.tsx    |  96 ++++----
 .../ai-chat/components/ai-chat-markdown.tsx   |  25 +-
 .../components/ai-chat-message-actions.tsx    |  15 +-
 .../ai-chat/components/ai-chat-message.tsx    | 117 +++++++---
 .../ai-chat/components/ai-chat-provider.tsx   |  17 +-
 .../components/ai-chat-suggestions.tsx        |  54 ++++-
 .../ai-chat/components/ai-chat-thinking.tsx   | 220 ++++++++++++++++++
 .../registry/ai-chat/components/ai-chat.tsx   | 171 ++++++++++----
 .../components/icons/autopilot-gradient.tsx   |  58 +++++
 .../ai-chat/components/icons/autopilot.tsx    |  34 +++
 .../registry/ai-chat/hooks/use-typewriter.ts  | 104 +++++++++
 apps/apollo-vertex/registry/ai-chat/types.ts  |  10 +
 .../registry/ai-chat/utils/ai-chat-utils.ts   |  67 ++++++
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |   5 +-
 .../ai-chat/AiChatConversationalAgentMode.tsx |   5 +-
 20 files changed, 952 insertions(+), 200 deletions(-)
 create mode 100644 apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-thinking.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/icons/autopilot-gradient.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/icons/autopilot.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/hooks/use-typewriter.ts

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 1463075d6..60f825f53 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -4,7 +4,6 @@ import { AiChat } from "@/registry/ai-chat/components/ai-chat";
 import { AiChatCodeBlock } from "@/registry/ai-chat/components/ai-chat-code-block";
 import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state";
 import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input";
-import { AiChatLoading } from "@/registry/ai-chat/components/ai-chat-loading";
 import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
 import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
@@ -15,6 +14,7 @@ import {
   MOCK_MESSAGES_MARKDOWN,
   MOCK_MESSAGES_WITH_CHOICES,
 } from "./mock-data";
+import { ThinkingDemo } from "./thinking-demo";
 
 function noop() {
   // no-op for preview
@@ -144,15 +144,10 @@ export default function AiChatPreviewPage() {
             onSendMessage={noop}
             onStop={noop}
             title="Project Setup Wizard"
-
             showTimestamps
           >
             {MOCK_MESSAGES_CONVERSATION.map((msg) => (
-              <AiChatMessage
-                key={msg.id}
-                message={msg}
-
-              />
+              <AiChatMessage key={msg.id} message={msg} />
             ))}
           </AiChat>
         </PreviewCard>
@@ -179,11 +174,11 @@ export default function AiChatPreviewPage() {
         </PreviewCard>
       </section>
 
-      {/* ── 6. Loading States ──────────────────────────────── */}
+      {/* ── 6. Loading State ───────────────────────────────── */}
       <section>
         <SectionHeader
-          title="Loading States"
-          description="Skeleton (default) and dots loading variants."
+          title="Loading State"
+          description="Thinking indicator that appears while the assistant generates a response."
         />
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <PreviewCard className="h-[300px]">
@@ -192,16 +187,16 @@ export default function AiChatPreviewPage() {
               isLoading
               onSendMessage={noop}
               onStop={noop}
-              title="Skeleton Loading"
+              title="Loading in chat"
             >
               <AiChatMessage message={MOCK_MESSAGES_BASIC[0]} />
             </AiChat>
           </PreviewCard>
           <PreviewCard className="p-6">
             <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
-              {"Dots variant (standalone)"}
+              {"Thinking indicator (interactive)"}
             </h3>
-            <AiChatLoading loadingVariant="dots" />
+            <ThinkingDemo />
           </PreviewCard>
         </div>
       </section>
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
new file mode 100644
index 000000000..d4f143fde
--- /dev/null
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+import { AiChatThinking } from "@/registry/ai-chat/components/ai-chat-thinking";
+import { Button } from "@/registry/button/button";
+
+export function ThinkingDemo() {
+  const [isThinking, setIsThinking] = useState(false);
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <style>{`
+        @keyframes ap-chat-shimmer-thinking {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
+      <div className="flex items-center gap-0 h-14">
+        <AiChatThinking size={40} isThinking={isThinking} />
+        <span
+          style={{
+            opacity: isThinking ? 1 : 0,
+            transform: isThinking ? "translateX(0)" : "translateX(-8px)",
+            transition: isThinking
+              ? "opacity 300ms ease-out 900ms, transform 300ms ease-out 900ms"
+              : "opacity 200ms ease-out, transform 200ms ease-out",
+            marginLeft: "-7px",
+            fontSize: "14px",
+            fontWeight: 500,
+            backgroundImage:
+              "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
+            backgroundSize: "200% 100%",
+            backgroundClip: "text",
+            WebkitBackgroundClip: "text",
+            color: "transparent",
+            animation: "ap-chat-shimmer-thinking 2.4s linear infinite",
+          }}
+        >
+          Thinking…
+        </span>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setIsThinking((v) => !v)}
+      >
+        {isThinking ? "Stop thinking" : "Start thinking"}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
index dd55a7b1e..84d180653 100644
--- a/apps/apollo-vertex/registry.json
+++ b/apps/apollo-vertex/registry.json
@@ -398,6 +398,11 @@
           "type": "registry:lib",
           "target": "components/ui/ai-chat/hooks/use-sticky-scroll.ts"
         },
+        {
+          "path": "registry/ai-chat/hooks/use-typewriter.ts",
+          "type": "registry:lib",
+          "target": "components/ui/ai-chat/hooks/use-typewriter.ts"
+        },
         {
           "path": "registry/ai-chat/components/ai-chat-provider.tsx",
           "type": "registry:ui",
@@ -423,6 +428,11 @@
           "type": "registry:ui",
           "target": "components/ui/ai-chat/components/ai-chat-loading.tsx"
         },
+        {
+          "path": "registry/ai-chat/components/ai-chat-thinking.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/ai-chat-thinking.tsx"
+        },
         {
           "path": "registry/ai-chat/components/ai-chat-input.tsx",
           "type": "registry:ui",
@@ -447,6 +457,16 @@
           "path": "registry/ai-chat/components/ai-chat-empty-state.tsx",
           "type": "registry:ui",
           "target": "components/ui/ai-chat/components/ai-chat-empty-state.tsx"
+        },
+        {
+          "path": "registry/ai-chat/components/icons/autopilot.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/icons/autopilot.tsx"
+        },
+        {
+          "path": "registry/ai-chat/components/icons/autopilot-gradient.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/ai-chat/components/icons/autopilot-gradient.tsx"
         }
       ]
     },
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index 0f863bf0c..2eac76b63 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "@/registry/button/button";
+import { AutopilotIcon } from "./icons/autopilot";
 
 interface AiChatEmptyStateProps {
   title?: string;
@@ -26,15 +26,21 @@ export function AiChatEmptyState({
         style={{ background: "var(--ai-gradient)" }}
       >
         {icon ?? (
-          <Sparkles
+          <AutopilotIcon
             className="size-8 text-ai-chat-accent-foreground"
             aria-hidden="true"
           />
         )}
       </div>
       <div className="flex flex-col items-center gap-1">
-        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">{title}</h2>
-        {description && <p className="text-sm text-muted-foreground max-w-sm">{description}</p>}
+        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
+          {title}
+        </h2>
+        {description && (
+          <p className="text-sm text-muted-foreground max-w-sm">
+            {description}
+          </p>
+        )}
       </div>
       {suggestions && suggestions.length > 0 && onSuggestionClick && (
         <div className="flex flex-wrap justify-center gap-2 max-w-md">
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 94de62f55..4ea20038c 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUp, CircleStop, Paperclip, Trash2 } from "lucide-react";
+import { ArrowUp, CircleStop, Paperclip } from "lucide-react";
 import { type FormEvent, type KeyboardEvent, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
@@ -11,19 +11,18 @@ import {
 } from "@/registry/tooltip/tooltip";
 
 const UPLOAD_LABEL = "Attach files";
-const DISCLAIMER = "Responses may be inaccurate. Please verify important information.";
+const DISCLAIMER =
+  "Responses may be inaccurate. Please verify important information.";
 
 interface AiChatInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
   onStop: () => void;
-  onClear?: () => void;
   onFileSelect?: (files: FileList) => void;
   isLoading: boolean;
   disabled?: boolean;
   placeholder?: string;
-  showClearButton?: boolean;
   hasMessages?: boolean;
   maxLength?: number;
 }
@@ -33,19 +32,18 @@ export function AiChatInput({
   onChange,
   onSubmit,
   onStop,
-  onClear,
   onFileSelect,
   isLoading,
   disabled = false,
   placeholder,
-  showClearButton = true,
   hasMessages = false,
   maxLength,
 }: AiChatInputProps) {
   const { t } = useTranslation();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const glowRef = useRef<HTMLDivElement>(null);
-  const displayPlaceholder = placeholder ?? "Describe what you want to do\u2026";
+  const displayPlaceholder =
+    placeholder ?? "Describe what you want to do\u2026";
 
   const adjustHeight = () => {
     const el = textareaRef.current;
@@ -83,7 +81,6 @@ export function AiChatInput({
     }
   };
 
-
   return (
     <div className="relative z-10 mt-auto py-3 px-4">
       <div className="relative flex items-end gap-2">
@@ -95,34 +92,25 @@ export function AiChatInput({
         />
         <form
           onSubmit={handleSubmit}
-          className="relative flex-1 flex items-end gap-2 pl-[23px] pr-1.5 py-1 rounded-lg border border-input transition-all bg-background"
+          className="relative flex-1 flex items-end gap-2 pl-[22px] pr-[5px] py-[3px] rounded-lg border-2 border-input transition-colors bg-background"
           onFocusCapture={(e) => {
             const el = e.currentTarget;
-            el.style.borderWidth = "2px";
             el.style.borderColor = "transparent";
             el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`;
             el.style.backgroundOrigin = "border-box";
             el.style.backgroundClip = "padding-box, border-box";
-            el.style.boxShadow = "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
-            el.style.paddingLeft = "22px";
-            el.style.paddingTop = "3px";
-            el.style.paddingRight = "5px";
-            el.style.paddingBottom = "3px";
+            el.style.boxShadow =
+              "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
             if (glowRef.current) glowRef.current.style.opacity = "0";
           }}
           onBlurCapture={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget)) {
               const el = e.currentTarget;
-              el.style.borderWidth = "";
               el.style.borderColor = "";
               el.style.backgroundImage = "";
               el.style.backgroundOrigin = "";
               el.style.backgroundClip = "";
               el.style.boxShadow = "";
-              el.style.paddingLeft = "";
-              el.style.paddingTop = "";
-              el.style.paddingRight = "";
-              el.style.paddingBottom = "";
               if (glowRef.current) glowRef.current.style.opacity = "";
             }
           }}
@@ -170,7 +158,10 @@ export function AiChatInput({
                   className="flex-shrink-0 size-9 mb-0.5 rounded-lg flex items-center justify-center bg-secondary transition-opacity"
                   onClick={onStop}
                 >
-                  <CircleStop className="size-5 text-muted-foreground" aria-hidden="true" />
+                  <CircleStop
+                    className="size-5 text-muted-foreground"
+                    aria-hidden="true"
+                  />
                 </button>
               </TooltipTrigger>
               <TooltipContent>{t("stop")}</TooltipContent>
@@ -192,22 +183,6 @@ export function AiChatInput({
             </Tooltip>
           )}
         </form>
-        {showClearButton && hasMessages && onClear && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                className="flex-shrink-0 text-muted-foreground hover:text-foreground"
-                onClick={onClear}
-              >
-                <Trash2 className="size-4" aria-hidden="true" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{t("clear_conversation")}</TooltipContent>
-          </Tooltip>
-        )}
       </div>
       <div className="mt-1 pl-[24px]">
         <span className="text-xs text-muted-foreground">{DISCLAIMER}</span>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
index 68d05bca6..3234aa48b 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
@@ -1,56 +1,56 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/registry/avatar/avatar";
-import { Skeleton } from "@/registry/skeleton/skeleton";
-import { useAiChat } from "./ai-chat-provider";
+import { motion } from "framer-motion";
+import { AiChatThinking } from "./ai-chat-thinking";
 
-type LoadingVariant = "skeleton" | "dots";
-
-interface AiChatLoadingProps {
-  assistantName?: string;
-  loadingVariant?: LoadingVariant;
-}
-
-export function AiChatLoading({
-  assistantName,
-  loadingVariant = "skeleton",
-}: AiChatLoadingProps) {
-  const config = useAiChat();
-  const displayName = assistantName ?? config.assistantName;
+// Quartic ease-in-out — same curve used inside AiChatThinking for consistency
+const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
+// Container slide-up + fade-in duration
+const ENTRANCE_DURATION = 0.5;
+// Text appears after the icon's morph completes (FORWARD_DURATION in AiChatThinking is 0.8s) plus a small gap
+const TEXT_DELAY = 0.9;
+const TEXT_DURATION = 0.3;
 
+export function AiChatLoading() {
   return (
-    <div className="flex justify-start gap-3">
-      <Avatar className="size-8 flex-shrink-0">
-        <AvatarFallback className="bg-ai-chat-accent">
-          {config.assistantAvatar ?? (
-            <Sparkles
-              className="size-4 text-ai-chat-accent-foreground"
-              aria-hidden="true"
-            />
-          )}
-        </AvatarFallback>
-      </Avatar>
-      <div className="flex flex-col gap-1">
-        <span className="text-xs text-ai-chat-muted-foreground font-medium">
-          {displayName}
-        </span>
-        {loadingVariant === "skeleton" ? (
-          <div className="flex flex-col gap-2 py-2">
-            <Skeleton className="h-3 w-[80%] bg-ai-chat-muted" />
-            <Skeleton className="h-3 w-[60%] bg-ai-chat-muted" />
-            <Skeleton className="h-3 w-[40%] bg-ai-chat-muted" />
-          </div>
-        ) : (
-          <div className="px-4 py-3 rounded-lg bg-ai-chat-bubble-assistant">
-            <div className="flex gap-1">
-              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce [animation-delay:-0.3s]" />
-              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce [animation-delay:-0.15s]" />
-              <span className="size-2 bg-ai-chat-accent rounded-full animate-bounce" />
-            </div>
-          </div>
-        )}
+    <motion.div
+      className="flex justify-start py-2"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: ENTRANCE_DURATION, ease: ENTRANCE_EASE }}
+    >
+      <style>{`
+        @keyframes ap-chat-loading-shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
+      <div className="flex items-center gap-0">
+        <AiChatThinking size={40} isThinking />
+        <motion.span
+          initial={{ opacity: 0, x: -8 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{
+            duration: TEXT_DURATION,
+            delay: TEXT_DELAY,
+            ease: ENTRANCE_EASE,
+          }}
+          style={{
+            marginLeft: "-7px",
+            fontSize: "14px",
+            fontWeight: 500,
+            backgroundImage:
+              "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
+            backgroundSize: "200% 100%",
+            backgroundClip: "text",
+            WebkitBackgroundClip: "text",
+            color: "transparent",
+            animation: "ap-chat-loading-shimmer 2.4s linear infinite",
+          }}
+        >
+          {"Thinking…"}
+        </motion.span>
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index d053bc430..6f1bf9916 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -17,14 +17,20 @@ function extractCodeProps(props: NodeProps & { className?: string }) {
 }
 
 const components: ComponentProps<typeof ReactMarkdown>["components"] = {
-  p: ({ children }: NodeProps) => <p className="mb-2 last:mb-0">{children}</p>,
+  p: ({ children }: NodeProps) => (
+    <p className="mt-5 mb-5 first:mt-0 last:mb-0">{children}</p>
+  ),
   ul: ({ children }: NodeProps) => (
-    <ul className="mb-2 last:mb-0 ml-4 list-disc">{children}</ul>
+    <ul className="mt-5 mb-5 first:mt-0 last:mb-0 ml-4 list-disc">
+      {children}
+    </ul>
   ),
   ol: ({ children }: NodeProps) => (
-    <ol className="mb-2 last:mb-0 ml-4 list-decimal">{children}</ol>
+    <ol className="mt-5 mb-5 first:mt-0 last:mb-0 ml-4 list-decimal">
+      {children}
+    </ol>
   ),
-  li: ({ children }: NodeProps) => <li className="mb-1">{children}</li>,
+  li: ({ children }: NodeProps) => <li className="mb-3">{children}</li>,
   pre: ({ children }: NodeProps) => <div>{children}</div>,
   code: ({
     children,
@@ -51,7 +57,10 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
     );
   },
   a: ({ children, ...props }: AnchorProps) => (
-    <a className="text-primary-700 dark:text-primary-400 hover:underline" {...props}>
+    <a
+      className="text-primary-700 dark:text-primary-400 hover:underline"
+      {...props}
+    >
       {children}
     </a>
   ),
@@ -65,13 +74,13 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
     </blockquote>
   ),
   h1: ({ children }: NodeProps) => (
-    <h1 className="text-lg font-bold mb-2 mt-3 first:mt-0">{children}</h1>
+    <h1 className="text-2xl font-bold mb-3 mt-6 first:mt-0">{children}</h1>
   ),
   h2: ({ children }: NodeProps) => (
-    <h2 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+    <h2 className="text-xl font-bold mb-2 mt-5 first:mt-0">{children}</h2>
   ),
   h3: ({ children }: NodeProps) => (
-    <h3 className="text-sm font-bold mb-2 mt-2 first:mt-0">{children}</h3>
+    <h3 className="text-lg font-bold mb-2 mt-4 first:mt-0">{children}</h3>
   ),
   hr: () => <hr className="my-3 border-ai-chat-border" />,
   table: ({ children }: NodeProps) => (
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
index c13ccf83a..6a979a670 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -28,6 +28,8 @@ const LABELS = {
 interface AiChatMessageActionsProps {
   content: string;
   messageRole: "user" | "assistant";
+  /** When true, actions are always visible (used for the latest assistant message). Defaults to false (hover/focus reveal). */
+  isLatest?: boolean;
   showCopy?: boolean;
   onFeedback?: (type: MessageFeedbackType) => void;
   onRegenerate?: () => void;
@@ -37,6 +39,7 @@ interface AiChatMessageActionsProps {
 export function AiChatMessageActions({
   content,
   messageRole,
+  isLatest = false,
   showCopy = true,
   onFeedback,
   onRegenerate,
@@ -52,8 +55,18 @@ export function AiChatMessageActions({
 
   const copyLabel = copied ? LABELS.copied : LABELS.copy;
 
+  // Latest assistant message keeps actions always visible. Everything else
+  // (older assistant messages, all user messages) reveals on hover/focus
+  // for keyboard a11y.
+  const visibilityClass =
+    messageRole === "assistant" && isLatest
+      ? "opacity-100"
+      : "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100";
+
   return (
-    <div className={`flex items-center gap-0.5 -ml-[7px] transition-opacity ${messageRole === "assistant" ? "opacity-100" : "opacity-0 group-hover/message:opacity-100"}`}>
+    <div
+      className={`flex items-center gap-0.5 -ml-[7px] transition-opacity ${visibilityClass}`}
+    >
       {showCopy && (
         <Tooltip>
           <TooltipTrigger asChild>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index a4bbedb7f..98011d82a 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -1,12 +1,22 @@
 "use client";
 
 import type { TextPart, UIMessage } from "@tanstack/ai-client";
-import type { ReactNode } from "react";
+import { motion } from "framer-motion";
+import { type ReactNode, useEffect } from "react";
+import { useTypewriter } from "../hooks/use-typewriter";
 import type { MessageFeedbackType } from "../types";
 import { AiChatMarkdown } from "./ai-chat-markdown";
 import { AiChatMessageActions } from "./ai-chat-message-actions";
 import { useAiChat } from "./ai-chat-provider";
 
+// Quick, subtle entrance — fade + 8px slide up. Quartic ease-out for a soft settle.
+const ENTRANCE_INITIAL = { opacity: 0, y: 8 };
+const ENTRANCE_ANIMATE = { opacity: 1, y: 0 };
+const ENTRANCE_TRANSITION = {
+  duration: 0.22,
+  ease: [0.22, 1, 0.36, 1] as const,
+};
+
 interface AiChatMessageProps {
   message: UIMessage;
   children?: ReactNode;
@@ -28,7 +38,7 @@ function getDisplayText(message: UIMessage): string {
 export function AiChatMessage({
   message,
   children,
-  isStreaming = false,
+  isStreaming: isStreamingProp,
   onFeedback,
   onRegenerate,
   onEdit,
@@ -37,15 +47,56 @@ export function AiChatMessage({
   const isUser = message.role === "user";
   const displayContent = getDisplayText(message);
 
+  // Streaming state — explicit prop wins, otherwise derive from chat-level isLoading
+  // and the latest assistant message ID. The latest assistant message is the one
+  // currently being generated when isLoading is true.
+  const isStreaming =
+    isStreamingProp ??
+    (config.isLoading &&
+      !isUser &&
+      config.latestAssistantMessageId === message.id);
+
+  // Throttle assistant text reveal to a comfortable reading pace.
+  // For user messages, cps=0 disables the typewriter so the full text appears instantly.
+  const { displayedText, isAnimating } = useTypewriter(displayContent, {
+    cps: isUser ? 0 : config.typewriterCps,
+    isStreaming,
+  });
+
+  // Latest assistant message keeps its actions always-visible; older messages
+  // hover-reveal. The chat parent computes the latest ID via context.
+  const isLatestAssistant =
+    !isUser && config.latestAssistantMessageId === message.id;
+
+  // Push typewriter state up to the chat parent when this is the latest
+  // assistant message. The chat uses this to gate suggestion buttons until
+  // the response is fully revealed (typewriter has finished draining).
+  const setIsLatestResponseAnimating = config.setIsLatestResponseAnimating;
+  useEffect(() => {
+    if (!isLatestAssistant) return;
+    setIsLatestResponseAnimating(isAnimating);
+    return () => setIsLatestResponseAnimating(false);
+  }, [isLatestAssistant, isAnimating, setIsLatestResponseAnimating]);
+
+  // Message actions (copy/thumbs/regenerate) only appear once the response is
+  // fully visible — both the LLM stream has finished AND the typewriter has
+  // drained any buffered characters. Prevents actions from popping in mid-reveal.
+  const isResponseFullyRevealed = !isStreaming && !isAnimating;
+
   if (!isUser && !displayContent && !children) {
     return null;
   }
 
   if (isUser) {
     return (
-      <div className="group/message flex w-full justify-end">
-        <div className="flex flex-col items-end gap-1 max-w-[80%]">
-          <div className="px-4 py-3 text-sm rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
+      <motion.div
+        className="flex w-full justify-end"
+        initial={ENTRANCE_INITIAL}
+        animate={ENTRANCE_ANIMATE}
+        transition={ENTRANCE_TRANSITION}
+      >
+        <div className="group/message flex flex-col items-end gap-1 max-w-[80%]">
+          <div className="px-4 py-2 text-sm leading-6 rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
             {displayContent && (
               <p className="whitespace-pre-wrap">{displayContent}</p>
             )}
@@ -59,32 +110,46 @@ export function AiChatMessage({
             />
           )}
         </div>
-      </div>
+      </motion.div>
     );
   }
 
+  // Hide message-level actions when this message belongs to a turn currently
+  // presenting interactive choices — copy/feedback/regenerate aren't meaningful
+  // on a "pick an option" prompt. The chat parent computes which messages are
+  // part of the active choices turn (the prompt text and the tool call may live
+  // on separate sibling messages) and shares the set via context.
+  const isInActiveChoicesTurn = config.activeChoicesMessageIds.has(message.id);
+
   return (
-    <div className="group/message flex w-full justify-start">
-      <div className="flex flex-col gap-1 max-w-[85%]">
-        {displayContent && (
-          <div>
-            <AiChatMarkdown>{displayContent}</AiChatMarkdown>
-            {isStreaming && (
-              <span className="inline-block w-0.5 h-4 ml-0.5 bg-ai-chat-foreground animate-pulse align-text-bottom" />
-            )}
-          </div>
-        )}
+    <motion.div
+      className="flex w-full justify-start"
+      initial={ENTRANCE_INITIAL}
+      animate={ENTRANCE_ANIMATE}
+      transition={ENTRANCE_TRANSITION}
+    >
+      <div className="group/message flex flex-col gap-3 max-w-[85%]">
+        {displayContent && <AiChatMarkdown>{displayedText}</AiChatMarkdown>}
         {children && <div className="mt-2 flex flex-col gap-2">{children}</div>}
-        {config.showMessageActions && (
-          <AiChatMessageActions
-            content={displayContent}
-            messageRole="assistant"
-            showCopy={config.showCopyButton}
-            onFeedback={onFeedback}
-            onRegenerate={onRegenerate}
-          />
-        )}
+        {config.showMessageActions &&
+          !isInActiveChoicesTurn &&
+          isResponseFullyRevealed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
+            >
+              <AiChatMessageActions
+                content={displayContent}
+                messageRole="assistant"
+                isLatest={isLatestAssistant}
+                showCopy={config.showCopyButton}
+                onFeedback={onFeedback}
+                onRegenerate={onRegenerate}
+              />
+            </motion.div>
+          )}
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
index 845b57a72..dd8efc01d 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
@@ -10,6 +10,13 @@ const defaultConfig: AiChatConfig = {
   showMessageActions: true,
   showCopyButton: true,
   isLoading: false,
+  activeChoicesMessageIds: new Set(),
+  latestAssistantMessageId: null,
+  typewriterCps: 75,
+  isLatestResponseAnimating: false,
+  setIsLatestResponseAnimating: () => {
+    // no-op default — replaced by AiChat with the real setter via context override
+  },
 };
 
 const AiChatContext = createContext<AiChatConfig>(defaultConfig);
@@ -27,7 +34,15 @@ export function AiChatProvider({
 
   return (
     <AiChatContext.Provider value={config}>
-      <div data-slot="ai-chat-root" data-variant={variant}>
+      {/*
+        display: contents — wrapper carries data attributes for styling/test
+        hooks but disappears from the box tree, so the AiChat outer div is a
+        direct child of whatever the consumer's parent is. Without this, h-full
+        on the AiChat outer would read this wrapper's auto height and collapse,
+        and the chat would grow to fit its content instead of scrolling within
+        a fixed-height parent like h-[500px].
+      */}
+      <div className="contents" data-slot="ai-chat-root" data-variant={variant}>
         {children}
       </div>
     </AiChatContext.Provider>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index 34e817fbe..fad9ea0f9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -1,8 +1,35 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import type { ChoiceOption } from "../types";
 
+const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
+
+const containerVariants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.28,
+      ease: ENTRANCE_EASE,
+      // Wait until the wrapper has mostly entered before staggering buttons
+      delayChildren: 0.18,
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+const buttonVariants = {
+  hidden: { opacity: 0, y: 6 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.2, ease: ENTRANCE_EASE },
+  },
+};
+
 interface AiChatSuggestionsProps {
   prompt?: string;
   options: ChoiceOption[];
@@ -15,28 +42,37 @@ export function AiChatSuggestions({
   onSelect,
 }: AiChatSuggestionsProps) {
   return (
-    <div className="mt-4 space-y-2">
-      {prompt && (
-        <p className="text-xs text-muted-foreground">{prompt}</p>
-      )}
+    <motion.div
+      className="mt-4 space-y-4"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      {prompt && <p className="text-sm text-muted-foreground">{prompt}</p>}
       <div className="flex flex-wrap gap-2">
         {options.map((option) => (
-          <button
+          <motion.button
             key={option.id}
             type="button"
+            variants={buttonVariants}
+            whileHover={{ scale: 1.02 }}
             className={cn(
-              "h-auto py-2 px-4 text-left max-w-full rounded-full text-xs font-semibold transition-all hover:scale-[1.02]",
+              "h-auto py-2 px-4 text-left max-w-full rounded-full text-xs font-semibold transition-colors",
               option.recommended
                 ? "text-white border-0"
                 : "border border-input bg-background text-foreground hover:bg-muted",
             )}
-            style={option.recommended ? { background: "var(--ai-gradient-strong)" } : {}}
+            style={
+              option.recommended
+                ? { background: "var(--ai-gradient-strong)" }
+                : {}
+            }
             onClick={() => onSelect(option)}
           >
             <span className="truncate">{option.label}</span>
-          </button>
+          </motion.button>
         ))}
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-thinking.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-thinking.tsx
new file mode 100644
index 000000000..7692d3f1f
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-thinking.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useId } from "react";
+
+interface AiChatThinkingProps {
+  size?: number;
+  className?: string;
+  /**
+   * When true, plays the forward sequence (idle → thinking) and holds
+   * the steady-state pulse. When false, plays the reverse back to idle.
+   * Defaults to true so existing usages auto-play on mount.
+   */
+  isThinking?: boolean;
+}
+
+// Timing
+const FORWARD_DURATION = 0.8;
+const REVERSE_DURATION = 0.4;
+const PULSE_DURATION = 1.8;
+
+// Single easing for both directions — quartic ease-in-out, smooth acceleration and deceleration
+const EASE = [0.83, 0, 0.17, 1] as const;
+
+// Circle radius in viewBox units. The 24×24 viewBox at 25% target = 6 units diameter = 3 units radius.
+const CIRCLE_RADIUS = 3;
+
+// Small sparkle geometric center within the 24×24 viewBox
+const SMALL_SPARKLE_CENTER_X = 17.82;
+const SMALL_SPARKLE_CENTER_Y = 6.35;
+const VIEWBOX_CENTER = 12;
+
+export function AiChatThinking({
+  size = 32,
+  className,
+  isThinking = true,
+}: AiChatThinkingProps) {
+  const gradientId = useId();
+
+  // Framer Motion's x/y on SVG elements are applied as CSS translate in CSS pixels.
+  // Convert viewBox-unit deltas into pixel values at the current render size.
+  const unit = size / 24;
+  const smallSparkleTargetX = (VIEWBOX_CENTER - SMALL_SPARKLE_CENTER_X) * unit;
+  const smallSparkleTargetY = (VIEWBOX_CENTER - SMALL_SPARKLE_CENTER_Y) * unit;
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: "relative",
+        width: size,
+        height: size,
+        display: "inline-block",
+      }}
+      aria-hidden="true"
+    >
+      {/* Radiating glow ring — sized proportionally to the circle, fades in with it */}
+      <motion.div
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          width: "55%",
+          height: "55%",
+          marginTop: "-27.5%",
+          marginLeft: "-27.5%",
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(108,90,239,0.4) 0%, rgba(105,199,221,0.18) 55%, transparent 75%)",
+          pointerEvents: "none",
+        }}
+        initial={{ opacity: 0, scale: 0.7 }}
+        animate={
+          isThinking
+            ? { opacity: [0.5, 0.9, 0.5], scale: [0.9, 1.1, 0.9] }
+            : { opacity: 0, scale: 0.7 }
+        }
+        transition={
+          isThinking
+            ? {
+                opacity: {
+                  duration: PULSE_DURATION,
+                  ease: "easeInOut",
+                  delay: FORWARD_DURATION * 0.5,
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: "loop",
+                },
+                scale: {
+                  duration: PULSE_DURATION,
+                  ease: "easeInOut",
+                  delay: FORWARD_DURATION * 0.5,
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: "loop",
+                },
+              }
+            : { duration: REVERSE_DURATION * 0.8, ease: EASE }
+        }
+      />
+
+      {/* SVG stage — holds both layers, no clipping */}
+      <svg
+        viewBox="0 0 24 24"
+        width="100%"
+        height="100%"
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "block",
+          overflow: "visible",
+        }}
+        aria-hidden="true"
+      >
+        <defs>
+          <linearGradient
+            id={gradientId}
+            x1="0"
+            y1="0.5"
+            x2="1"
+            y2="0.5"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="8.79%" stopColor="#6C5AEF" />
+            <stop offset="91.48%" stopColor="#69C7DD" />
+          </linearGradient>
+        </defs>
+
+        {/* Large sparkle — slow rotation (180°), fades out in place */}
+        <motion.g
+          style={{
+            transformBox: "fill-box",
+            transformOrigin: "center",
+          }}
+          initial={{ opacity: 1, rotate: 0 }}
+          animate={
+            isThinking ? { opacity: 0, rotate: 180 } : { opacity: 1, rotate: 0 }
+          }
+          transition={{
+            duration: isThinking ? FORWARD_DURATION : REVERSE_DURATION,
+            ease: EASE,
+          }}
+        >
+          <path
+            d="M19.4231 13.2391C15.2592 12.5335 11.9733 9.06719 11.3046 4.67449C11.292 4.59158 11.1901 4.59158 11.1775 4.67449C10.5088 9.06719 7.22293 12.5335 3.05898 13.2391C2.98034 13.2524 2.98034 13.3599 3.05898 13.3732C7.22293 14.0786 10.5088 17.5451 11.1775 21.9378C11.1901 22.0207 11.292 22.0207 11.3046 21.9378C11.9733 17.5451 15.2592 14.0786 19.4231 13.3732C19.5017 13.3599 19.5017 13.2524 19.4231 13.2391ZM15.3321 13.3397C13.2501 13.6924 11.6072 15.4256 11.2728 17.622C11.2665 17.6634 11.2156 17.6634 11.2093 17.622C10.8749 15.4256 9.23198 13.6924 7.15 13.3397C7.11069 13.333 7.11069 13.2793 7.15 13.2726C9.23198 12.9198 10.8749 11.1867 11.2093 8.99032C11.2156 8.94886 11.2665 8.94886 11.2728 8.99032C11.6072 11.1867 13.2501 12.9198 15.3321 13.2726C15.3714 13.2793 15.3714 13.333 15.3321 13.3397Z"
+            fill={`url(#${gradientId})`}
+          />
+        </motion.g>
+
+        {/* Small sparkle — fast independent rotation (720°), translates to center, scales up, fades out */}
+        <motion.g
+          style={{
+            transformBox: "fill-box",
+            transformOrigin: "center",
+          }}
+          initial={{ opacity: 1, rotate: 0, x: 0, y: 0, scale: 1 }}
+          animate={
+            isThinking
+              ? {
+                  opacity: 0,
+                  rotate: 720,
+                  x: smallSparkleTargetX,
+                  y: smallSparkleTargetY,
+                  scale: 1.8,
+                }
+              : { opacity: 1, rotate: 0, x: 0, y: 0, scale: 1 }
+          }
+          transition={{
+            duration: isThinking ? FORWARD_DURATION : REVERSE_DURATION,
+            ease: EASE,
+          }}
+        >
+          <path
+            d="M21.9179 6.38045C19.8359 6.73316 18.193 8.4664 17.8586 10.6628C17.8523 10.7042 17.8014 10.7042 17.7951 10.6628C17.4607 8.4664 15.8178 6.73316 13.7358 6.38045C13.6965 6.3738 13.6965 6.32005 13.7358 6.3134C15.8178 5.96062 17.4607 4.22744 17.7951 2.03109C17.8014 1.98964 17.8523 1.98964 17.8586 2.03109C18.193 4.22744 19.8359 5.96062 21.9179 6.3134C21.9572 6.32005 21.9572 6.3738 21.9179 6.38045Z"
+            fill={`url(#${gradientId})`}
+          />
+        </motion.g>
+
+        {/* Circle pulse wrapper — infinite breathing in steady state */}
+        <motion.g
+          style={{
+            transformBox: "fill-box",
+            transformOrigin: "center",
+          }}
+          initial={{ scale: 1 }}
+          animate={isThinking ? { scale: [1, 1.15, 1] } : { scale: 1 }}
+          transition={
+            isThinking
+              ? {
+                  duration: PULSE_DURATION,
+                  ease: "easeInOut",
+                  delay: FORWARD_DURATION,
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: "loop",
+                }
+              : { duration: REVERSE_DURATION, ease: EASE }
+          }
+        >
+          {/* Circle — grows from scale 0 / opacity 0 as the sparkle fades out */}
+          <motion.circle
+            cx={12}
+            cy={12}
+            r={CIRCLE_RADIUS}
+            fill={`url(#${gradientId})`}
+            style={{
+              transformBox: "fill-box",
+              transformOrigin: "center",
+            }}
+            initial={{ scale: 0, opacity: 0 }}
+            animate={
+              isThinking ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }
+            }
+            transition={{
+              duration: isThinking ? FORWARD_DURATION : REVERSE_DURATION,
+              ease: EASE,
+            }}
+          />
+        </motion.g>
+      </svg>
+    </div>
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index b4ac048f3..b542b9df0 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import type { UIMessage } from "@tanstack/ai-client";
-import { AlertCircle, ArrowDown, RefreshCw, Sparkles } from "lucide-react";
+import {
+  AlertCircle,
+  ArrowDown,
+  MoreHorizontal,
+  RefreshCw,
+} from "lucide-react";
+import { AutopilotIcon } from "./icons/autopilot";
+import { AutopilotGradientIcon } from "./icons/autopilot-gradient";
 import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useStickyScroll } from "../hooks/use-sticky-scroll";
@@ -9,7 +16,27 @@ import type { AiChatVariant, ChoiceOption } from "../types";
 
 const RETRY_LABEL = "Retry";
 
-import { findLatestChoices } from "../utils/ai-chat-utils";
+import {
+  findActiveChoicesMessageIds,
+  findLatestChoices,
+} from "../utils/ai-chat-utils";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/alert-dialog/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/dropdown-menu/dropdown-menu";
 import { AiChatInput } from "./ai-chat-input";
 import { AiChatLoading } from "./ai-chat-loading";
 import { AiChatProvider } from "./ai-chat-provider";
@@ -41,6 +68,8 @@ export interface AiChatProps {
   value?: string;
   /** Controlled input onChange */
   onValueChange?: (value: string) => void;
+  /** Characters per second for the typewriter reveal on assistant messages. Set to 0 to disable (text appears instantly). Default: 40 */
+  typewriterCps?: number;
 }
 
 export function AiChat({
@@ -67,9 +96,12 @@ export function AiChat({
   variant = "default",
   value: controlledValue,
   onValueChange,
+  typewriterCps = 75,
 }: AiChatProps) {
   const { t } = useTranslation();
   const [internalInput, setInternalInput] = useState("");
+  const [isLatestResponseAnimating, setIsLatestResponseAnimating] =
+    useState(false);
   const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
 
   const isControlled = controlledValue != null;
@@ -89,6 +121,9 @@ export function AiChat({
   };
 
   const latestChoices = findLatestChoices(messages);
+  const activeChoicesMessageIds = findActiveChoicesMessageIds(messages);
+  const latestAssistantMessageId =
+    messages.findLast((m) => m.role === "assistant")?.id ?? null;
 
   const lastMessage = messages.at(-1);
   const lastAssistantHasText =
@@ -98,6 +133,7 @@ export function AiChat({
 
   const defaultEmptyState = (
     <div className="flex flex-col items-center justify-center h-full text-center">
+      <AutopilotGradientIcon size={32} className="mb-4" aria-hidden="true" />
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
           {"What would you like to do?"}
@@ -122,30 +158,84 @@ export function AiChat({
       showMessageActions={showMessageActions}
       showCopyButton={showCopyButton}
       isLoading={isLoading}
+      activeChoicesMessageIds={activeChoicesMessageIds}
+      latestAssistantMessageId={latestAssistantMessageId}
+      typewriterCps={typewriterCps}
+      isLatestResponseAnimating={isLatestResponseAnimating}
+      setIsLatestResponseAnimating={setIsLatestResponseAnimating}
     >
       <div
         className={
           isEmbedded
             ? "flex flex-col h-full max-w-[765px] mx-auto bg-transparent text-ai-chat-foreground"
-            : "flex flex-col h-full max-w-[765px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground"
+            : "flex flex-col h-full max-w-[765px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground overflow-hidden"
         }
         data-slot="ai-chat"
       >
         {renderHeader ??
           (title && !isCompact && !isEmbedded && (
-            <div className="py-3 px-4 flex items-center gap-2">
-              <Sparkles className="size-4 text-[#6C5AEF]" aria-hidden="true" />
-              <span
-                className="text-sm font-bold tracking-tight bg-clip-text text-transparent"
-                style={{ backgroundImage: "var(--ai-gradient-strong)" }}
-              >
-                {title}
-              </span>
+            <div className="py-3 px-4 flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2 min-w-0">
+                <AutopilotIcon
+                  className="size-4 text-[#6C5AEF] flex-shrink-0"
+                  aria-hidden="true"
+                />
+                <span
+                  className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate"
+                  style={{ backgroundImage: "var(--ai-gradient-strong)" }}
+                >
+                  {title}
+                </span>
+              </div>
+              {onClearChat && showClearButton && messages.length > 0 && (
+                <AlertDialog>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors flex-shrink-0"
+                        aria-label={t("more_options")}
+                      >
+                        <MoreHorizontal
+                          className="size-4 text-ai-chat-muted-foreground"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <AlertDialogTrigger asChild>
+                        <DropdownMenuItem>
+                          {"New conversation"}
+                        </DropdownMenuItem>
+                      </AlertDialogTrigger>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        {"Start a new conversation?"}
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        {"This will clear all messages and cannot be undone."}
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>{"Cancel"}</AlertDialogCancel>
+                      <AlertDialogAction onClick={onClearChat}>
+                        {"New conversation"}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
             </div>
           ))}
 
         {messages.length === 0 ? (
-          <div className="flex-1 flex flex-col items-center px-4" style={{ justifyContent: "center", paddingBottom: "10%" }}>
+          <div
+            className="flex-1 flex flex-col items-center px-4"
+            style={{ justifyContent: "center", paddingBottom: "10%" }}
+          >
             <div className="w-full max-w-[765px]">
               <div className="text-center mb-10">
                 {emptyState ?? defaultEmptyState}
@@ -155,28 +245,26 @@ export function AiChat({
                 onChange={setInput}
                 onSubmit={handleSubmit}
                 onStop={onStop}
-                onClear={onClearChat}
                 isLoading={isLoading}
                 placeholder={placeholder}
-                showClearButton={showClearButton}
                 hasMessages={false}
               />
             </div>
           </div>
         ) : (
-        <div className="relative flex-1 min-h-0">
-          <div
-            ref={scrollRef}
-            role="log"
-            aria-label={t("chat_messages")}
-            aria-live="polite"
-            aria-atomic="false"
-            className={`h-full overflow-y-auto ${padding}`}
-          >
+          <div className="relative flex-1 min-h-0">
+            <div
+              ref={scrollRef}
+              role="log"
+              aria-label={t("chat_messages")}
+              aria-live="polite"
+              aria-atomic="false"
+              className={`h-full overflow-y-auto ${padding}`}
+            >
               <div ref={contentRef} className={messageGap}>
                 {children}
 
-                {latestChoices && !isLoading && (
+                {latestChoices && !isLoading && !isLatestResponseAnimating && (
                   <AiChatSuggestions
                     prompt={latestChoices.prompt}
                     options={latestChoices.options}
@@ -190,23 +278,21 @@ export function AiChat({
                   />
                 )}
 
-                {showLoadingIndicator && (
-                  <AiChatLoading assistantName={displayName} />
-                )}
+                {showLoadingIndicator && <AiChatLoading />}
               </div>
-          </div>
+            </div>
 
-          {!isStuck && (
-            <button
-              type="button"
-              onClick={scrollToBottom}
-              aria-label={t("scroll_to_bottom")}
-              className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center size-8 rounded-full border border-ai-chat-border bg-ai-chat shadow-md hover:bg-ai-chat-muted"
-            >
-              <ArrowDown className="size-4" />
-            </button>
-          )}
-        </div>
+            {!isStuck && (
+              <button
+                type="button"
+                onClick={scrollToBottom}
+                aria-label={t("scroll_to_bottom")}
+                className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center size-8 rounded-full border border-ai-chat-border bg-ai-chat shadow-md hover:bg-ai-chat-muted"
+              >
+                <ArrowDown className="size-4" />
+              </button>
+            )}
+          </div>
         )}
 
         {error && (
@@ -215,10 +301,7 @@ export function AiChat({
             aria-live="assertive"
             className="relative z-0 mx-4 -mb-6 flex items-center gap-2 rounded-t-lg bg-destructive/10 px-[23px] pt-3 pb-6 text-sm text-destructive"
           >
-            <AlertCircle
-              className="h-4 w-4 flex-shrink-0"
-              aria-hidden="true"
-            />
+            <AlertCircle className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
             <span className="flex-1">{error.message}</span>
             {onRetry && (
               <button
@@ -240,10 +323,8 @@ export function AiChat({
             onChange={setInput}
             onSubmit={handleSubmit}
             onStop={onStop}
-            onClear={onClearChat}
             isLoading={isLoading}
             placeholder={placeholder}
-            showClearButton={showClearButton}
             hasMessages
           />
         )}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot-gradient.tsx b/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot-gradient.tsx
new file mode 100644
index 000000000..d52c09077
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot-gradient.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+
+interface AutopilotGradientIconProps
+  extends Omit<React.SVGProps<SVGSVGElement>, "width" | "height" | "fill"> {
+  size?: string | number;
+}
+
+/**
+ * Autopilot brand mark filled with the purple → teal brand gradient.
+ * Uses the same gradient stops as `--ai-gradient-strong` so it matches
+ * the gradient used on the chat send button, suggestion buttons, and title.
+ *
+ * Each instance generates a unique gradient ID via `useId` to prevent
+ * collisions when multiple instances are rendered on the same page.
+ */
+export const AutopilotGradientIcon = React.forwardRef<
+  SVGSVGElement,
+  AutopilotGradientIconProps
+>(({ size = 24, ...props }, ref) => {
+  const gradientId = React.useId();
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="0"
+          y1="0.5"
+          x2="1"
+          y2="0.5"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="8.79%" stopColor="#6C5AEF" />
+          <stop offset="91.48%" stopColor="#69C7DD" />
+        </linearGradient>
+      </defs>
+      <g transform="translate(-1.74 -1.19) scale(1.1)">
+        <path
+          d="M19.4231 13.2391C15.2592 12.5335 11.9733 9.06719 11.3046 4.67449C11.292 4.59158 11.1901 4.59158 11.1775 4.67449C10.5088 9.06719 7.22293 12.5335 3.05898 13.2391C2.98034 13.2524 2.98034 13.3599 3.05898 13.3732C7.22293 14.0786 10.5088 17.5451 11.1775 21.9378C11.1901 22.0207 11.292 22.0207 11.3046 21.9378C11.9733 17.5451 15.2592 14.0786 19.4231 13.3732C19.5017 13.3599 19.5017 13.2524 19.4231 13.2391ZM15.3321 13.3397C13.2501 13.6924 11.6072 15.4256 11.2728 17.622C11.2665 17.6634 11.2156 17.6634 11.2093 17.622C10.8749 15.4256 9.23198 13.6924 7.15 13.3397C7.11069 13.333 7.11069 13.2793 7.15 13.2726C9.23198 12.9198 10.8749 11.1867 11.2093 8.99032C11.2156 8.94886 11.2665 8.94886 11.2728 8.99032C11.6072 11.1867 13.2501 12.9198 15.3321 13.2726C15.3714 13.2793 15.3714 13.333 15.3321 13.3397Z"
+          fill={`url(#${gradientId})`}
+        />
+        <path
+          d="M21.9179 6.38045C19.8359 6.73316 18.193 8.4664 17.8586 10.6628C17.8523 10.7042 17.8014 10.7042 17.7951 10.6628C17.4607 8.4664 15.8178 6.73316 13.7358 6.38045C13.6965 6.3738 13.6965 6.32005 13.7358 6.3134C15.8178 5.96062 17.4607 4.22744 17.7951 2.03109C17.8014 1.98964 17.8523 1.98964 17.8586 2.03109C18.193 4.22744 19.8359 5.96062 21.9179 6.3134C21.9572 6.32005 21.9572 6.3738 21.9179 6.38045Z"
+          fill={`url(#${gradientId})`}
+        />
+      </g>
+    </svg>
+  );
+});
+
+AutopilotGradientIcon.displayName = "AutopilotGradientIcon";
diff --git a/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot.tsx b/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot.tsx
new file mode 100644
index 000000000..bf85cb7b7
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/icons/autopilot.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+
+interface AutopilotIconProps
+  extends Omit<React.SVGProps<SVGSVGElement>, "width" | "height"> {
+  size?: string | number;
+}
+
+export const AutopilotIcon = React.forwardRef<
+  SVGSVGElement,
+  AutopilotIconProps
+>(({ size = 24, ...props }, ref) => (
+  <svg
+    ref={ref}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    {...props}
+  >
+    <g transform="translate(-1.74 -1.19) scale(1.1)">
+      <path
+        d="M19.4231 13.2391C15.2592 12.5335 11.9733 9.06719 11.3046 4.67449C11.292 4.59158 11.1901 4.59158 11.1775 4.67449C10.5088 9.06719 7.22293 12.5335 3.05898 13.2391C2.98034 13.2524 2.98034 13.3599 3.05898 13.3732C7.22293 14.0786 10.5088 17.5451 11.1775 21.9378C11.1901 22.0207 11.292 22.0207 11.3046 21.9378C11.9733 17.5451 15.2592 14.0786 19.4231 13.3732C19.5017 13.3599 19.5017 13.2524 19.4231 13.2391ZM15.3321 13.3397C13.2501 13.6924 11.6072 15.4256 11.2728 17.622C11.2665 17.6634 11.2156 17.6634 11.2093 17.622C10.8749 15.4256 9.23198 13.6924 7.15 13.3397C7.11069 13.333 7.11069 13.2793 7.15 13.2726C9.23198 12.9198 10.8749 11.1867 11.2093 8.99032C11.2156 8.94886 11.2665 8.94886 11.2728 8.99032C11.6072 11.1867 13.2501 12.9198 15.3321 13.2726C15.3714 13.2793 15.3714 13.333 15.3321 13.3397Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.9179 6.38045C19.8359 6.73316 18.193 8.4664 17.8586 10.6628C17.8523 10.7042 17.8014 10.7042 17.7951 10.6628C17.4607 8.4664 15.8178 6.73316 13.7358 6.38045C13.6965 6.3738 13.6965 6.32005 13.7358 6.3134C15.8178 5.96062 17.4607 4.22744 17.7951 2.03109C17.8014 1.98964 17.8523 1.98964 17.8586 2.03109C18.193 4.22744 19.8359 5.96062 21.9179 6.3134C21.9572 6.32005 21.9572 6.3738 21.9179 6.38045Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+));
+
+AutopilotIcon.displayName = "AutopilotIcon";
diff --git a/apps/apollo-vertex/registry/ai-chat/hooks/use-typewriter.ts b/apps/apollo-vertex/registry/ai-chat/hooks/use-typewriter.ts
new file mode 100644
index 000000000..a3a361e5d
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/hooks/use-typewriter.ts
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useReducer, useRef } from "react";
+
+interface UseTypewriterOptions {
+  /** Characters per second to reveal. Set to 0 or negative to disable (returns full text instantly). */
+  cps: number;
+  /**
+   * Whether the source text is currently being streamed (still growing).
+   * When false, the typewriter accelerates 2× to drain any remaining buffered characters.
+   */
+  isStreaming: boolean;
+}
+
+interface UseTypewriterResult {
+  /** The substring of `text` that should currently be visible. */
+  displayedText: string;
+  /** True while the typewriter is still revealing characters (i.e., displayedText.length < text.length). */
+  isAnimating: boolean;
+}
+
+/**
+ * Throttles a string's reveal to a configurable characters-per-second rate.
+ * Designed for AI chat assistant messages whose text streams in faster than
+ * a human can comfortably read — ChatGPT, Claude, and other major products
+ * all throttle visible reveal to ~30–50 cps regardless of underlying stream speed.
+ *
+ * Behavior:
+ *   - Mounts in "instant" mode (full text visible) when not streaming or when cps ≤ 0
+ *   - Mounts in "typewriter" mode (starts at length 0) when streaming and cps > 0
+ *   - When `isStreaming` flips from true → false, accelerates to 2× speed to drain
+ *   - Stops the rAF chain when caught up; restarts naturally when text grows
+ *   - Clamps `displayedLength` if text shrinks (e.g., regenerate)
+ */
+export function useTypewriter(
+  text: string,
+  { cps, isStreaming }: UseTypewriterOptions,
+): UseTypewriterResult {
+  const displayedLengthRef = useRef<number>(
+    cps > 0 && isStreaming ? 0 : text.length,
+  );
+  const [, forceRender] = useReducer((x: number) => x + 1, 0);
+
+  // Clamp if text shrunk (e.g., regenerate replaced the message with shorter content)
+  if (displayedLengthRef.current > text.length) {
+    displayedLengthRef.current = text.length;
+  }
+
+  useEffect(() => {
+    // Disabled — show full text instantly
+    if (cps <= 0) {
+      if (displayedLengthRef.current !== text.length) {
+        displayedLengthRef.current = text.length;
+        forceRender();
+      }
+      return;
+    }
+
+    // Already caught up — nothing to animate until text grows
+    if (displayedLengthRef.current >= text.length) {
+      return;
+    }
+
+    let rafId: number | null = null;
+    let lastTime = performance.now();
+    // Drain mode: when streaming has completed, catch up to the buffered text 2× faster
+    const speedMultiplier = isStreaming ? 1 : 2;
+
+    const tick = (now: number) => {
+      const target = text.length;
+      if (displayedLengthRef.current >= target) {
+        // Caught up — let the rAF chain end
+        rafId = null;
+        return;
+      }
+
+      const delta = (now - lastTime) / 1000;
+      // Floor to integer characters so we only re-render when at least one new char is ready;
+      // accumulate `lastTime` only when we actually advance, otherwise the next frame compounds
+      const advance = Math.floor(cps * speedMultiplier * delta);
+      if (advance > 0) {
+        lastTime = now;
+        displayedLengthRef.current = Math.min(
+          target,
+          displayedLengthRef.current + advance,
+        );
+        forceRender();
+      }
+
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [text, isStreaming, cps]);
+
+  return {
+    displayedText: text.slice(0, displayedLengthRef.current),
+    isAnimating: displayedLengthRef.current < text.length,
+  };
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index f21cf8d16..21bd8d383 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -34,4 +34,14 @@ export interface AiChatConfig {
   showCopyButton: boolean;
   /** Whether the chat is currently loading */
   isLoading: boolean;
+  /** IDs of assistant messages that belong to an active "pick a choice" turn — actions on these are suppressed */
+  activeChoicesMessageIds: Set<string>;
+  /** ID of the latest assistant message — its actions stay always-visible while older messages reveal on hover/focus */
+  latestAssistantMessageId: string | null;
+  /** Characters per second for the typewriter reveal effect on assistant messages. Set to 0 to disable. */
+  typewriterCps: number;
+  /** True while the latest assistant message's typewriter is still revealing characters. Used to gate suggestion buttons until the response is fully visible. */
+  isLatestResponseAnimating: boolean;
+  /** Setter for `isLatestResponseAnimating` — called by the latest assistant message component as its typewriter state changes. */
+  setIsLatestResponseAnimating: (animating: boolean) => void;
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
index 4bcf725c6..483e3a772 100644
--- a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
+++ b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
@@ -41,3 +41,70 @@ export function findLatestChoices(
   }
   return null;
 }
+
+/**
+ * Returns true if the message contains a choices tool call/result.
+ * Handles both shapes:
+ *   - `tool-result` with `content` (stringified JSON, server/wire format)
+ *   - `tool-call` with `output` (parsed object, client tools)
+ */
+export function messageHasChoices(message: UIMessage): boolean {
+  return message.parts.some((part) => {
+    // tool-result with stringified JSON content
+    if (part.type === "tool-result" && "content" in part) {
+      try {
+        const parsed = JSON.parse((part as { content: string }).content);
+        if (parsed?.type === "choices") return true;
+      } catch {
+        // invalid JSON, skip
+      }
+    }
+    // tool-call with parsed object output (client tools)
+    if (part.type === "tool-call" && "output" in part) {
+      const output = (part as { output?: unknown }).output;
+      if (
+        output != null &&
+        typeof output === "object" &&
+        "type" in output &&
+        (output as { type: unknown }).type === "choices"
+      ) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+
+/**
+ * Returns the set of assistant message IDs that belong to a turn currently
+ * presenting interactive choices. This is all trailing assistant messages
+ * (after the latest user message) IF any of them contains a choices tool-call/result.
+ *
+ * Used to suppress message-level actions (copy/feedback/regenerate) on the entire
+ * choice-prompt turn — including any text-only assistant message that introduces
+ * the choices, since the choices tool-call may be on a separate sibling message.
+ */
+export function findActiveChoicesMessageIds(
+  messages: UIMessage[],
+): Set<string> {
+  // Find the index of the most recent user message
+  let lastUserIdx = -1;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg && msg.role === "user") {
+      lastUserIdx = i;
+      break;
+    }
+  }
+
+  // Trailing assistant messages — everything after the latest user message
+  const trailingAssistants = messages
+    .slice(lastUserIdx + 1)
+    .filter((m) => m.role === "assistant");
+
+  // Only suppress actions if at least one trailing assistant has choices
+  const hasActiveChoices = trailingAssistants.some((m) => messageHasChoices(m));
+  if (!hasActiveChoices) return new Set();
+
+  return new Set(trailingAssistants.map((m) => m.id));
+}
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index 071ffa2d3..c3d02629c 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -50,10 +50,7 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       error={error ?? null}
     >
       {messages.map((message) => (
-        <AiChatMessage
-          key={message.id}
-          message={message}
-        />
+        <AiChatMessage key={message.id} message={message} />
       ))}
     </AiChat>
   );
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
index 5a1b43ec5..fe9846b24 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
@@ -57,10 +57,7 @@ function ConversationalAgentChatInner({
       error={error ?? null}
     >
       {messages.map((message) => (
-        <AiChatMessage
-          key={message.id}
-          message={message}
-        />
+        <AiChatMessage key={message.id} message={message} />
       ))}
     </AiChat>
   );

From 58349c096efb636241df8f6b1cf3b0cea0d1d372 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Fri, 10 Apr 2026 16:44:38 -0400
Subject: [PATCH 08/35] chore(apollo-vertex): image handling

---
 .../registry/ai-chat/components/ai-chat-markdown.tsx  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index 6f1bf9916..5a0e690c0 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -7,6 +7,7 @@ import { AiChatCodeBlock } from "./ai-chat-code-block";
 
 type NodeProps = { children?: ReactNode };
 type AnchorProps = { children?: ReactNode; href?: string };
+type ImageProps = { src?: string; alt?: string; title?: string };
 
 function extractCodeProps(props: NodeProps & { className?: string }) {
   const { className, children } = props;
@@ -64,6 +65,16 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
       {children}
     </a>
   ),
+  img: ({ src, alt, title }: ImageProps) => (
+    <img
+      src={src}
+      alt={alt ?? ""}
+      title={title}
+      loading="lazy"
+      decoding="async"
+      className="block max-w-full max-h-[400px] object-contain rounded-lg border border-ai-chat-border"
+    />
+  ),
   strong: ({ children }: NodeProps) => (
     <strong className="font-semibold">{children}</strong>
   ),

From 10a201315e52217eddd33918a37f87fc7515c700 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 10:08:24 -0400
Subject: [PATCH 09/35] chore(apollo-vertex): Typography updates

---
 .../ai-chat/preview/thinking-demo.tsx         | 62 ++++++++++-----
 apps/apollo-vertex/registry.json              |  5 ++
 .../ai-chat/components/ai-chat-input.tsx      |  4 +-
 .../ai-chat/components/ai-chat-loading.tsx    | 58 ++++++++++----
 .../ai-chat/components/ai-chat-markdown.tsx   |  2 +-
 .../ai-chat/hooks/use-thinking-label.ts       | 79 +++++++++++++++++++
 6 files changed, 172 insertions(+), 38 deletions(-)
 create mode 100644 apps/apollo-vertex/registry/ai-chat/hooks/use-thinking-label.ts

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
index d4f143fde..fbe2125e0 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
@@ -1,11 +1,32 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 import { AiChatThinking } from "@/registry/ai-chat/components/ai-chat-thinking";
+import { useThinkingLabel } from "@/registry/ai-chat/hooks/use-thinking-label";
 import { Button } from "@/registry/button/button";
 
+const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
+const LABEL_SLIDE = 6;
+
+const shimmerStyle = {
+  display: "inline-block",
+  whiteSpace: "nowrap",
+  fontSize: "14px",
+  fontWeight: 500,
+  backgroundImage:
+    "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
+  backgroundSize: "200% 100%",
+  backgroundClip: "text",
+  WebkitBackgroundClip: "text",
+  color: "transparent",
+  animation: "ap-chat-shimmer-thinking 2.4s linear infinite",
+} as const;
+
 export function ThinkingDemo() {
   const [isThinking, setIsThinking] = useState(false);
+  const { label, key: labelKey } = useThinkingLabel();
+
   return (
     <div className="flex flex-col items-center gap-6">
       <style>{`
@@ -16,27 +37,32 @@ export function ThinkingDemo() {
       `}</style>
       <div className="flex items-center gap-0 h-14">
         <AiChatThinking size={40} isThinking={isThinking} />
-        <span
-          style={{
+        <motion.div
+          initial={{ opacity: 0, x: -8 }}
+          animate={{
             opacity: isThinking ? 1 : 0,
-            transform: isThinking ? "translateX(0)" : "translateX(-8px)",
-            transition: isThinking
-              ? "opacity 300ms ease-out 900ms, transform 300ms ease-out 900ms"
-              : "opacity 200ms ease-out, transform 200ms ease-out",
-            marginLeft: "-7px",
-            fontSize: "14px",
-            fontWeight: 500,
-            backgroundImage:
-              "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
-            backgroundSize: "200% 100%",
-            backgroundClip: "text",
-            WebkitBackgroundClip: "text",
-            color: "transparent",
-            animation: "ap-chat-shimmer-thinking 2.4s linear infinite",
+            x: isThinking ? 0 : -8,
+          }}
+          transition={{
+            duration: 0.3,
+            delay: isThinking ? 0.9 : 0,
+            ease: ENTRANCE_EASE,
           }}
+          style={{ marginLeft: "-7px" }}
         >
-          Thinking…
-        </span>
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={isThinking ? labelKey : "idle"}
+              initial={{ opacity: 0, y: LABEL_SLIDE }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -LABEL_SLIDE }}
+              transition={{ duration: 0.22, ease: ENTRANCE_EASE }}
+              style={shimmerStyle}
+            >
+              {isThinking ? label : "Thinking…"}
+            </motion.span>
+          </AnimatePresence>
+        </motion.div>
       </div>
       <Button
         variant="outline"
diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
index 84d180653..a9835a596 100644
--- a/apps/apollo-vertex/registry.json
+++ b/apps/apollo-vertex/registry.json
@@ -403,6 +403,11 @@
           "type": "registry:lib",
           "target": "components/ui/ai-chat/hooks/use-typewriter.ts"
         },
+        {
+          "path": "registry/ai-chat/hooks/use-thinking-label.ts",
+          "type": "registry:lib",
+          "target": "components/ui/ai-chat/hooks/use-thinking-label.ts"
+        },
         {
           "path": "registry/ai-chat/components/ai-chat-provider.tsx",
           "type": "registry:ui",
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 4ea20038c..efde370d9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -184,8 +184,8 @@ export function AiChatInput({
           )}
         </form>
       </div>
-      <div className="mt-1 pl-[24px]">
-        <span className="text-xs text-muted-foreground">{DISCLAIMER}</span>
+      <div className="mt-2 px-4 text-xs leading-normal text-muted-foreground text-center">
+        {DISCLAIMER}
       </div>
     </div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
index 3234aa48b..756054082 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import { useThinkingLabel } from "../hooks/use-thinking-label";
 import { AiChatThinking } from "./ai-chat-thinking";
 
-// Quartic ease-in-out — same curve used inside AiChatThinking for consistency
+// Quartic ease-out — same curve used inside AiChatThinking for consistency
 const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
 // Container slide-up + fade-in duration
 const ENTRANCE_DURATION = 0.5;
@@ -11,7 +12,27 @@ const ENTRANCE_DURATION = 0.5;
 const TEXT_DELAY = 0.9;
 const TEXT_DURATION = 0.3;
 
+// Label cycling transition
+const LABEL_DURATION = 0.22;
+const LABEL_SLIDE_DISTANCE = 6;
+
+const shimmerStyle = {
+  display: "inline-block",
+  whiteSpace: "nowrap",
+  fontSize: "14px",
+  fontWeight: 500,
+  backgroundImage:
+    "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
+  backgroundSize: "200% 100%",
+  backgroundClip: "text",
+  WebkitBackgroundClip: "text",
+  color: "transparent",
+  animation: "ap-chat-loading-shimmer 2.4s linear infinite",
+} as const;
+
 export function AiChatLoading() {
+  const { label, key: labelKey } = useThinkingLabel();
+
   return (
     <motion.div
       className="flex justify-start py-2"
@@ -27,7 +48,7 @@ export function AiChatLoading() {
       `}</style>
       <div className="flex items-center gap-0">
         <AiChatThinking size={40} isThinking />
-        <motion.span
+        <motion.div
           initial={{ opacity: 0, x: -8 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{
@@ -35,21 +56,24 @@ export function AiChatLoading() {
             delay: TEXT_DELAY,
             ease: ENTRANCE_EASE,
           }}
-          style={{
-            marginLeft: "-7px",
-            fontSize: "14px",
-            fontWeight: 500,
-            backgroundImage:
-              "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 30%, #6C5AEF 42%, var(--foreground) 50%, #69C7DD 58%, var(--muted-foreground) 70%, var(--muted-foreground) 100%)",
-            backgroundSize: "200% 100%",
-            backgroundClip: "text",
-            WebkitBackgroundClip: "text",
-            color: "transparent",
-            animation: "ap-chat-loading-shimmer 2.4s linear infinite",
-          }}
+          style={{ marginLeft: "-7px" }}
         >
-          {"Thinking…"}
-        </motion.span>
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={labelKey}
+              initial={{ opacity: 0, y: LABEL_SLIDE_DISTANCE }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -LABEL_SLIDE_DISTANCE }}
+              transition={{
+                duration: LABEL_DURATION,
+                ease: ENTRANCE_EASE,
+              }}
+              style={shimmerStyle}
+            >
+              {label}
+            </motion.span>
+          </AnimatePresence>
+        </motion.div>
       </div>
     </motion.div>
   );
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index 5a0e690c0..8317aeee7 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -122,7 +122,7 @@ interface AiChatMarkdownProps {
 
 export function AiChatMarkdown({ children }: AiChatMarkdownProps) {
   return (
-    <div className="py-1 text-sm bg-transparent text-foreground prose prose-sm dark:prose-invert max-w-none">
+    <div className="py-1 text-base leading-relaxed bg-transparent text-foreground prose dark:prose-invert max-w-none">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {children}
       </ReactMarkdown>
diff --git a/apps/apollo-vertex/registry/ai-chat/hooks/use-thinking-label.ts b/apps/apollo-vertex/registry/ai-chat/hooks/use-thinking-label.ts
new file mode 100644
index 000000000..11f6216b6
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/hooks/use-thinking-label.ts
@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+// English interleaved with each translation so "Thinking…" appears every other cycle
+const THINKING_LABELS = [
+  "Thinking…",
+  "Se gândește…",
+  "Thinking…",
+  "सोच रहा है…",
+  "Thinking…",
+  "Denkt nach…",
+  "Thinking…",
+  "Réflexion…",
+];
+
+// How long each label is visible before cycling to the next
+const CYCLE_INTERVAL_MS = 3000;
+
+interface UseThinkingLabelOptions {
+  /**
+   * How long to show the initial "Thinking…" label before starting to cycle.
+   * During this phase the label is always THINKING_LABELS[0].
+   * @default 2000
+   */
+  initialDelay?: number;
+}
+
+interface UseThinkingLabelResult {
+  /** The current label text */
+  label: string;
+  /** Unique key for AnimatePresence — use this instead of the label string since "Thinking…" appears multiple times in the cycle */
+  key: number;
+}
+
+/**
+ * Returns a thinking label that cycles through translations after an initial delay.
+ *
+ * - 0 → initialDelay: returns "Thinking…" (English, static)
+ * - initialDelay+: cycles through all labels every CYCLE_INTERVAL_MS
+ *
+ * English is interleaved so the sequence is:
+ *   Thinking… → Se gândește… → Thinking… → सोच रहा है… → Thinking… → Denkt nach… → …
+ *
+ * The cycle wraps around indefinitely, so longer thinking phases just keep rotating.
+ */
+export function useThinkingLabel({
+  initialDelay = 2000,
+}: UseThinkingLabelOptions = {}): UseThinkingLabelResult {
+  const [index, setIndex] = useState(0);
+  const [generation, setGeneration] = useState(0);
+  const [isCycling, setIsCycling] = useState(false);
+
+  // Start cycling after the initial delay
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsCycling(true);
+      // Jump to index 1 to skip re-showing "Thinking…" which was already visible
+      setIndex(1);
+      setGeneration((g) => g + 1);
+    }, initialDelay);
+    return () => clearTimeout(timer);
+  }, [initialDelay]);
+
+  // Cycle through labels once cycling has started
+  useEffect(() => {
+    if (!isCycling) return;
+    const timer = setInterval(() => {
+      setIndex((prev) => (prev + 1) % THINKING_LABELS.length);
+      setGeneration((g) => g + 1);
+    }, CYCLE_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [isCycling]);
+
+  return {
+    label: THINKING_LABELS[index] ?? THINKING_LABELS[0],
+    key: generation,
+  };
+}

From 8880823925a6ba6ad636fec9536ddcb58c5fea60 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 10:26:49 -0400
Subject: [PATCH 10/35] chore(apollo-vertex): name change and fade

---
 .../ai-chat/preview/page.tsx                  | 13 ++++++------
 .../components/ai-chat-message-actions.tsx    |  4 ++--
 .../ai-chat/components/ai-chat-message.tsx    |  2 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 20 +++++++++++++++----
 apps/apollo-vertex/registry/ai-chat/types.ts  |  2 ++
 .../templates/ai-chat/AiChatAgentHubMode.tsx  | 12 ++++++-----
 .../ai-chat/AiChatConversationalAgentMode.tsx | 10 ++++++----
 7 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 60f825f53..8213c841e 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -143,7 +143,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
-            title="Project Setup Wizard"
+            title="Autopilot"
             showTimestamps
           >
             {MOCK_MESSAGES_CONVERSATION.map((msg) => (
@@ -165,7 +165,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
-            title="Markdown Demo"
+            title="Autopilot"
           >
             {MOCK_MESSAGES_MARKDOWN.map((msg) => (
               <AiChatMessage key={msg.id} message={msg} />
@@ -187,7 +187,7 @@ export default function AiChatPreviewPage() {
               isLoading
               onSendMessage={noop}
               onStop={noop}
-              title="Loading in chat"
+              title="Autopilot"
             >
               <AiChatMessage message={MOCK_MESSAGES_BASIC[0]} />
             </AiChat>
@@ -240,7 +240,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
-            title="Presentation Advisor"
+            title="Autopilot"
           >
             {MOCK_MESSAGES_WITH_CHOICES.map((msg) => (
               <AiChatMessage key={msg.id} message={msg} />
@@ -263,7 +263,7 @@ export default function AiChatPreviewPage() {
               onSendMessage={noop}
               onStop={noop}
               variant="default"
-              title="Default"
+              title="Autopilot"
             >
               {MOCK_MESSAGES_BASIC.map((msg) => (
                 <AiChatMessage key={msg.id} message={msg} />
@@ -277,7 +277,7 @@ export default function AiChatPreviewPage() {
               onSendMessage={noop}
               onStop={noop}
               variant="compact"
-              title="Compact"
+              title="Autopilot"
             >
               {MOCK_MESSAGES_BASIC.map((msg) => (
                 <AiChatMessage key={msg.id} message={msg} />
@@ -327,7 +327,6 @@ export default function AiChatPreviewPage() {
               onChange={noop}
               onSubmit={noop}
               onStop={noop}
-              onClear={noop}
               isLoading={false}
               hasMessages
             />
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
index 6a979a670..56a0e4269 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -128,12 +128,12 @@ export function AiChatMessageActions({
         </>
       )}
 
-      {messageRole === "assistant" && (
+      {messageRole === "assistant" && onRegenerate && (
         <Tooltip>
           <TooltipTrigger asChild>
             <button
               type="button"
-              onClick={() => onRegenerate?.()}
+              onClick={() => onRegenerate()}
               className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
               aria-label={LABELS.regenerate}
             >
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index 98011d82a..104fa77f0 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -145,7 +145,7 @@ export function AiChatMessage({
                 isLatest={isLatestAssistant}
                 showCopy={config.showCopyButton}
                 onFeedback={onFeedback}
-                onRegenerate={onRegenerate}
+                onRegenerate={onRegenerate ?? config.onRegenerate}
               />
             </motion.div>
           )}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index b542b9df0..64dbd8d89 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -50,6 +50,8 @@ export interface AiChatProps {
   onClearChat?: () => void;
   onChoiceSelect?: (option: ChoiceOption) => void;
   onRetry?: () => void;
+  /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
+  onRegenerate?: () => void;
   children?: ReactNode;
   assistantName?: string;
   assistantAvatar?: ReactNode;
@@ -80,6 +82,7 @@ export function AiChat({
   onClearChat,
   onChoiceSelect,
   onRetry,
+  onRegenerate,
   children,
   assistantName,
   assistantAvatar,
@@ -163,6 +166,7 @@ export function AiChat({
       typewriterCps={typewriterCps}
       isLatestResponseAnimating={isLatestResponseAnimating}
       setIsLatestResponseAnimating={setIsLatestResponseAnimating}
+      onRegenerate={onRegenerate}
     >
       <div
         className={
@@ -174,14 +178,14 @@ export function AiChat({
       >
         {renderHeader ??
           (title && !isCompact && !isEmbedded && (
-            <div className="py-3 px-4 flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2 min-w-0">
+            <div className="relative z-10 py-3 px-4 flex items-center justify-between gap-2 bg-background">
+              <div className="flex items-center gap-1.5 min-w-0">
                 <AutopilotIcon
-                  className="size-4 text-[#6C5AEF] flex-shrink-0"
+                  className="size-[21px] text-[#6C5AEF] flex-shrink-0"
                   aria-hidden="true"
                 />
                 <span
-                  className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate"
+                  className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate pt-[2px]"
                   style={{ backgroundImage: "var(--ai-gradient-strong)" }}
                 >
                   {title}
@@ -253,6 +257,14 @@ export function AiChat({
           </div>
         ) : (
           <div className="relative flex-1 min-h-0">
+            <div
+              className="absolute top-0 left-0 right-0 h-6 z-10 pointer-events-none"
+              style={{
+                background:
+                  "linear-gradient(to bottom, var(--background) 0%, transparent 100%)",
+              }}
+              aria-hidden="true"
+            />
             <div
               ref={scrollRef}
               role="log"
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index 21bd8d383..3ab3026e9 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -44,4 +44,6 @@ export interface AiChatConfig {
   isLatestResponseAnimating: boolean;
   /** Setter for `isLatestResponseAnimating` — called by the latest assistant message component as its typewriter state changes. */
   setIsLatestResponseAnimating: (animating: boolean) => void;
+  /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
+  onRegenerate?: () => void;
 }
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index c3d02629c..a75152cb2 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -31,10 +31,11 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
     tools: choicesTools,
   });
 
-  const { messages, sendMessage, isLoading, stop, clear, error } = useChat({
-    connection,
-    tools: choicesTools,
-  });
+  const { messages, sendMessage, isLoading, stop, clear, reload, error } =
+    useChat({
+      connection,
+      tools: choicesTools,
+    });
 
   return (
     <AiChat
@@ -45,7 +46,8 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       }}
       onStop={stop}
       onClearChat={clear}
-      title={t("ai_assistant")}
+      onRegenerate={reload}
+      title="Autopilot"
       assistantName={t("assistant")}
       error={error ?? null}
     >
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
index fe9846b24..08ea0c9d6 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
@@ -39,9 +39,10 @@ function ConversationalAgentChatInner({
     };
   }, [connection]);
 
-  const { messages, sendMessage, isLoading, stop, clear, error } = useChat({
-    connection,
-  });
+  const { messages, sendMessage, isLoading, stop, clear, reload, error } =
+    useChat({
+      connection,
+    });
 
   return (
     <AiChat
@@ -52,6 +53,7 @@ function ConversationalAgentChatInner({
       }}
       onStop={stop}
       onClearChat={clear}
+      onRegenerate={reload}
       title={title}
       assistantName={assistantName}
       error={error ?? null}
@@ -147,7 +149,7 @@ export function ConversationalAgentChat({
           sdk={sdk}
           agentId={selectedAgentConfig.agentId}
           folderId={selectedAgentConfig.folderId}
-          title={t("ai_assistant")}
+          title="Autopilot"
           assistantName={t("assistant")}
         />
       </div>

From 1de8d8fb15a1d94d85a301b3d0e8c0a5181b718e Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 11:12:21 -0400
Subject: [PATCH 11/35] chore(apollo-vertex): Style updates

---
 .../components/ai-chat-empty-state.tsx        | 18 ++---
 .../ai-chat/components/ai-chat-input.tsx      |  7 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 71 ++++++++++++-------
 3 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index 2eac76b63..c086e85f3 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -21,17 +21,13 @@ export function AiChatEmptyState({
 }: AiChatEmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground gap-4">
-      <div
-        className="size-16 flex items-center justify-center rounded-full"
-        style={{ background: "var(--ai-gradient)" }}
-      >
-        {icon ?? (
-          <AutopilotIcon
-            className="size-8 text-ai-chat-accent-foreground"
-            aria-hidden="true"
-          />
-        )}
-      </div>
+      {icon ?? (
+        <AutopilotIcon
+          size={32}
+          className="text-foreground"
+          aria-hidden="true"
+        />
+      )}
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
           {title}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index efde370d9..698cf6569 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -11,8 +11,6 @@ import {
 } from "@/registry/tooltip/tooltip";
 
 const UPLOAD_LABEL = "Attach files";
-const DISCLAIMER =
-  "Responses may be inaccurate. Please verify important information.";
 
 interface AiChatInputProps {
   value: string;
@@ -82,7 +80,7 @@ export function AiChatInput({
   };
 
   return (
-    <div className="relative z-10 mt-auto py-3 px-4">
+    <div className="relative z-10 mt-auto pt-3 px-4">
       <div className="relative flex items-end gap-2">
         <div
           ref={glowRef}
@@ -184,9 +182,6 @@ export function AiChatInput({
           )}
         </form>
       </div>
-      <div className="mt-2 px-4 text-xs leading-normal text-muted-foreground text-center">
-        {DISCLAIMER}
-      </div>
     </div>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 64dbd8d89..8d9182d40 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -8,7 +8,6 @@ import {
   RefreshCw,
 } from "lucide-react";
 import { AutopilotIcon } from "./icons/autopilot";
-import { AutopilotGradientIcon } from "./icons/autopilot-gradient";
 import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useStickyScroll } from "../hooks/use-sticky-scroll";
@@ -136,7 +135,11 @@ export function AiChat({
 
   const defaultEmptyState = (
     <div className="flex flex-col items-center justify-center h-full text-center">
-      <AutopilotGradientIcon size={32} className="mb-4" aria-hidden="true" />
+      <AutopilotIcon
+        size={32}
+        className="mb-4 text-foreground"
+        aria-hidden="true"
+      />
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
           {"What would you like to do?"}
@@ -236,23 +239,30 @@ export function AiChat({
           ))}
 
         {messages.length === 0 ? (
-          <div
-            className="flex-1 flex flex-col items-center px-4"
-            style={{ justifyContent: "center", paddingBottom: "10%" }}
-          >
-            <div className="w-full max-w-[765px]">
-              <div className="text-center mb-10">
-                {emptyState ?? defaultEmptyState}
+          <div className="flex-1 flex flex-col min-h-0">
+            <div
+              className="flex-1 flex flex-col items-center px-4"
+              style={{ justifyContent: "center", paddingBottom: "10%" }}
+            >
+              <div className="w-full max-w-[765px]">
+                <div className="text-center mb-10">
+                  {emptyState ?? defaultEmptyState}
+                </div>
+                <AiChatInput
+                  value={input}
+                  onChange={setInput}
+                  onSubmit={handleSubmit}
+                  onStop={onStop}
+                  isLoading={isLoading}
+                  placeholder={placeholder}
+                  hasMessages={false}
+                />
               </div>
-              <AiChatInput
-                value={input}
-                onChange={setInput}
-                onSubmit={handleSubmit}
-                onStop={onStop}
-                isLoading={isLoading}
-                placeholder={placeholder}
-                hasMessages={false}
-              />
+            </div>
+            <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
+              {
+                "Responses may be inaccurate. Please verify important information."
+              }
             </div>
           </div>
         ) : (
@@ -330,15 +340,22 @@ export function AiChat({
         )}
 
         {messages.length > 0 && (
-          <AiChatInput
-            value={input}
-            onChange={setInput}
-            onSubmit={handleSubmit}
-            onStop={onStop}
-            isLoading={isLoading}
-            placeholder={placeholder}
-            hasMessages
-          />
+          <>
+            <AiChatInput
+              value={input}
+              onChange={setInput}
+              onSubmit={handleSubmit}
+              onStop={onStop}
+              isLoading={isLoading}
+              placeholder={placeholder}
+              hasMessages
+            />
+            <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
+              {
+                "Responses may be inaccurate. Please verify important information."
+              }
+            </div>
+          </>
         )}
       </div>
     </AiChatProvider>

From 9437973c2b6ac854e9b6f2352985f069dec00574 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 14:00:07 -0400
Subject: [PATCH 12/35] chore(apollo-vertex): Style changes

---
 .../ai-chat/preview/page.tsx                  |   8 +-
 .../components/ai-chat-empty-state.tsx        |  29 +-
 .../ai-chat/components/ai-chat-input.tsx      | 402 +++++++++++-------
 .../registry/ai-chat/components/ai-chat.tsx   |  86 ++--
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |   7 +
 5 files changed, 317 insertions(+), 215 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 8213c841e..2bb70c65e 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -92,18 +92,14 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
+            title="Autopilot"
             emptyState={
               <AiChatEmptyState
                 title="What would you like to do?"
                 description="I can help you review, fix, or complete your work."
-                suggestions={[
-                  "Create a React app",
-                  "Debug my code",
-                  "Write tests",
-                ]}
-                onSuggestionClick={noop}
               />
             }
+            suggestions={["Create a React app", "Debug my code", "Write tests"]}
           />
         </PreviewCard>
       </section>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index c086e85f3..96dda7091 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -1,33 +1,21 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Button } from "@/registry/button/button";
-import { AutopilotIcon } from "./icons/autopilot";
 
 interface AiChatEmptyStateProps {
   title?: string;
   description?: string;
   icon?: ReactNode;
-  suggestions?: string[];
-  onSuggestionClick?: (suggestion: string) => void;
 }
 
 export function AiChatEmptyState({
   title = "How can I help you?",
   description,
   icon,
-  suggestions,
-  onSuggestionClick,
 }: AiChatEmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground gap-4">
-      {icon ?? (
-        <AutopilotIcon
-          size={32}
-          className="text-foreground"
-          aria-hidden="true"
-        />
-      )}
+      {icon && icon}
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
           {title}
@@ -38,21 +26,6 @@ export function AiChatEmptyState({
           </p>
         )}
       </div>
-      {suggestions && suggestions.length > 0 && onSuggestionClick && (
-        <div className="flex flex-wrap justify-center gap-2 max-w-md">
-          {suggestions.map((suggestion) => (
-            <Button
-              key={suggestion}
-              variant="outline"
-              size="sm"
-              className="border-ai-chat-border text-ai-chat-foreground hover:bg-ai-chat-muted"
-              onClick={() => onSuggestionClick(suggestion)}
-            >
-              {suggestion}
-            </Button>
-          ))}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 698cf6569..1b85c6209 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,17 +1,27 @@
 "use client";
 
-import { ArrowUp, CircleStop, Paperclip } from "lucide-react";
-import { type FormEvent, type KeyboardEvent, useRef } from "react";
+import { ArrowUp, CircleStop, Plus } from "lucide-react";
+import React, {
+  type FormEvent,
+  type KeyboardEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/dropdown-menu/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/tooltip/tooltip";
 
-const UPLOAD_LABEL = "Attach files";
-
 interface AiChatInputProps {
   value: string;
   onChange: (value: string) => void;
@@ -25,163 +35,255 @@ interface AiChatInputProps {
   maxLength?: number;
 }
 
-export function AiChatInput({
-  value,
-  onChange,
-  onSubmit,
-  onStop,
-  onFileSelect,
-  isLoading,
-  disabled = false,
-  placeholder,
-  hasMessages = false,
-  maxLength,
-}: AiChatInputProps) {
-  const { t } = useTranslation();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const glowRef = useRef<HTMLDivElement>(null);
-  const displayPlaceholder =
-    placeholder ?? "Describe what you want to do\u2026";
+export interface AiChatInputHandle {
+  focus: () => void;
+}
 
-  const adjustHeight = () => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
-  };
+export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
+  function AiChatInput(
+    {
+      value,
+      onChange,
+      onSubmit,
+      onStop,
+      onFileSelect,
+      isLoading,
+      disabled = false,
+      placeholder,
+      hasMessages = false,
+      maxLength,
+    }: AiChatInputProps,
+    ref: React.Ref<AiChatInputHandle>,
+  ) {
+    const { t } = useTranslation();
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const glowRef = useRef<HTMLDivElement>(null);
 
-  const handleChange = (val: string) => {
-    if (maxLength && val.length > maxLength) return;
-    onChange(val);
-    requestAnimationFrame(adjustHeight);
-  };
+    useImperativeHandle(ref, () => ({
+      focus: () => textareaRef.current?.focus(),
+    }));
+    const displayPlaceholder = placeholder ?? "Start with a task or goal\u2026";
 
-  const submitMessage = () => {
-    if (!value.trim() || isLoading) return;
-    onSubmit();
-    requestAnimationFrame(() => {
+    const adjustHeight = () => {
+      if (!hasMessages) return;
       const el = textareaRef.current;
-      if (el) {
-        el.style.height = "auto";
-      }
-    });
-  };
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+    };
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    submitMessage();
-  };
+    const handleChange = (val: string) => {
+      if (maxLength && val.length > maxLength) return;
+      onChange(val);
+      requestAnimationFrame(adjustHeight);
+    };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
+    const submitMessage = () => {
+      if (!value.trim() || isLoading) return;
+      onSubmit();
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (el) {
+          el.style.height = "auto";
+        }
+      });
+    };
+
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       submitMessage();
-    }
-  };
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submitMessage();
+      }
+    };
 
-  return (
-    <div className="relative z-10 mt-auto pt-3 px-4">
-      <div className="relative flex items-end gap-2">
-        <div
-          ref={glowRef}
-          className={`absolute -inset-1 rounded-xl blur-sm transition-opacity duration-300 pointer-events-none ${hasMessages ? "opacity-0" : "opacity-10"}`}
-          style={{ background: "var(--ai-gradient-strong)" }}
-          aria-hidden="true"
-        />
-        <form
-          onSubmit={handleSubmit}
-          className="relative flex-1 flex items-end gap-2 pl-[22px] pr-[5px] py-[3px] rounded-lg border-2 border-input transition-colors bg-background"
-          onFocusCapture={(e) => {
-            const el = e.currentTarget;
-            el.style.borderColor = "transparent";
-            el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`;
-            el.style.backgroundOrigin = "border-box";
-            el.style.backgroundClip = "padding-box, border-box";
-            el.style.boxShadow =
-              "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
-            if (glowRef.current) glowRef.current.style.opacity = "0";
-          }}
-          onBlurCapture={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget)) {
-              const el = e.currentTarget;
-              el.style.borderColor = "";
-              el.style.backgroundImage = "";
-              el.style.backgroundOrigin = "";
-              el.style.backgroundClip = "";
-              el.style.boxShadow = "";
-              if (glowRef.current) glowRef.current.style.opacity = "";
-            }
-          }}
-        >
-          {onFileSelect && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  className="flex-shrink-0 text-muted-foreground hover:text-foreground"
-                  onClick={() => {
-                    const fileInput = document.createElement("input");
-                    fileInput.type = "file";
-                    fileInput.multiple = true;
-                    fileInput.addEventListener("change", () => {
-                      if (fileInput.files) onFileSelect(fileInput.files);
-                    });
-                    fileInput.click();
-                  }}
+    const handleFileClick = () => {
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.multiple = true;
+      fileInput.addEventListener("change", () => {
+        if (fileInput.files && onFileSelect) onFileSelect(fileInput.files);
+      });
+      fileInput.click();
+    };
+
+    const focusStyles = {
+      onFocusCapture: (e: React.FocusEvent<HTMLFormElement>) => {
+        const el = e.currentTarget;
+        el.style.borderColor = "transparent";
+        el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`;
+        el.style.backgroundOrigin = "border-box";
+        el.style.backgroundClip = "padding-box, border-box";
+        el.style.boxShadow =
+          "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
+        if (glowRef.current) glowRef.current.style.opacity = "0";
+      },
+      onBlurCapture: (e: React.FocusEvent<HTMLFormElement>) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          const el = e.currentTarget;
+          el.style.borderColor = "";
+          el.style.backgroundImage = "";
+          el.style.backgroundOrigin = "";
+          el.style.backgroundClip = "";
+          el.style.boxShadow = "";
+          if (glowRef.current) glowRef.current.style.opacity = "";
+        }
+      },
+    };
+
+    const plusMenu = (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="flex-shrink-0 text-muted-foreground hover:text-foreground"
+          >
+            <Plus className="size-4" aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" side="top">
+          <DropdownMenuItem onClick={handleFileClick}>
+            {"Upload files"}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    const sendStopButton = isLoading ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="flex-shrink-0 size-9 rounded-lg flex items-center justify-center bg-secondary transition-opacity"
+            onClick={onStop}
+          >
+            <CircleStop
+              className="size-5 text-muted-foreground"
+              aria-hidden="true"
+            />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("stop")}</TooltipContent>
+      </Tooltip>
+    ) : (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="submit"
+            disabled={!value.trim() || disabled}
+            className="flex-shrink-0 size-9 rounded-lg flex items-center justify-center text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+            style={{ background: "var(--ai-gradient-strong)" }}
+            aria-label={t("send")}
+          >
+            <ArrowUp className="size-5" aria-hidden="true" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("send")}</TooltipContent>
+      </Tooltip>
+    );
+
+    return (
+      <div className="relative z-10 mt-auto pt-3 px-4">
+        <div className="relative">
+          <div
+            ref={glowRef}
+            className={`absolute pointer-events-none transition-opacity duration-500 ${hasMessages ? "opacity-0" : "opacity-100"}`}
+            style={{
+              top: "-56px",
+              left: "-48px",
+              right: "-48px",
+              bottom: "-64px",
+            }}
+            aria-hidden="true"
+          >
+            <svg
+              viewBox="0 0 561 176"
+              preserveAspectRatio="none"
+              className="w-full h-full"
+              style={{ overflow: "visible" }}
+              aria-hidden="true"
+            >
+              <defs>
+                <filter
+                  id="ai-chat-input-glow"
+                  x="-25%"
+                  y="-50%"
+                  width="150%"
+                  height="200%"
                 >
-                  <Paperclip className="size-4" aria-hidden="true" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{UPLOAD_LABEL}</TooltipContent>
-            </Tooltip>
-          )}
-          <textarea
-            ref={textareaRef}
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={displayPlaceholder}
-            aria-label={displayPlaceholder}
-            className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[40px] max-h-[200px] py-[10px] overflow-y-auto leading-[20px]"
-            rows={1}
-            disabled={disabled}
-          />
-          {isLoading ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  className="flex-shrink-0 size-9 mb-0.5 rounded-lg flex items-center justify-center bg-secondary transition-opacity"
-                  onClick={onStop}
+                  <feGaussianBlur stdDeviation="10" />
+                </filter>
+                <linearGradient
+                  id="ai-chat-input-gradient"
+                  x1="375.705"
+                  y1="97.1886"
+                  x2="356.926"
+                  y2="19.642"
+                  gradientUnits="userSpaceOnUse"
                 >
-                  <CircleStop
-                    className="size-5 text-muted-foreground"
-                    aria-hidden="true"
-                  />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>{t("stop")}</TooltipContent>
-            </Tooltip>
+                  <stop stopColor="#69C7DD" />
+                  <stop offset="1" stopColor="#6C5AEF" />
+                </linearGradient>
+              </defs>
+              <path
+                d="M124.909 87.7963L40.0002 119.001L40.0471 121.245L88.6762 130.906C132.72 132.472 223.153 135.555 232.53 135.359C244.251 135.113 315.666 133.619 447.602 128.917C579.537 124.214 504.087 109.289 446.803 90.7685C428.089 88.9151 405.086 89.6999 383 82.3956C360.914 75.0913 357.352 70.9186 338.481 61.6054C319.611 52.2922 308.392 55.8035 286.366 51.4103C264.341 47.0172 245.606 44.1934 181.911 40.9756C118.215 37.7579 138.966 43.5125 129.849 43.7033C122.556 43.8559 113.044 50.082 109.2 53.176L124.454 66.084L124.909 87.7963Z"
+                fill="url(#ai-chat-input-gradient)"
+                fillOpacity="0.25"
+                filter="url(#ai-chat-input-glow)"
+              />
+            </svg>
+          </div>
+          {hasMessages ? (
+            <form
+              onSubmit={handleSubmit}
+              className="relative flex items-center gap-2 pl-[8px] pr-[8px] py-[6px] rounded-lg border-2 border-input transition-colors bg-background"
+              {...focusStyles}
+            >
+              {plusMenu}
+              <textarea
+                ref={textareaRef}
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={displayPlaceholder}
+                aria-label={displayPlaceholder}
+                className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] py-[10px] leading-[20px]"
+                rows={1}
+                disabled={disabled}
+              />
+              {sendStopButton}
+            </form>
           ) : (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="submit"
-                  disabled={!value.trim() || disabled}
-                  className="flex-shrink-0 size-9 mb-0.5 rounded-lg flex items-center justify-center text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
-                  style={{ background: "var(--ai-gradient-strong)" }}
-                  aria-label={t("send")}
-                >
-                  <ArrowUp className="size-5" aria-hidden="true" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>{t("send")}</TooltipContent>
-            </Tooltip>
+            <form
+              onSubmit={handleSubmit}
+              className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
+              {...focusStyles}
+            >
+              <textarea
+                ref={textareaRef}
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={displayPlaceholder}
+                aria-label={displayPlaceholder}
+                className="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[80px] px-[22px] pt-5 pb-2 leading-relaxed"
+                rows={1}
+                disabled={disabled}
+              />
+              <div className="flex items-center justify-between px-[8px] pb-[8px]">
+                {plusMenu}
+                {sendStopButton}
+              </div>
+            </form>
           )}
-        </form>
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 8d9182d40..f107f5c95 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -7,18 +7,8 @@ import {
   MoreHorizontal,
   RefreshCw,
 } from "lucide-react";
-import { AutopilotIcon } from "./icons/autopilot";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useStickyScroll } from "../hooks/use-sticky-scroll";
-import type { AiChatVariant, ChoiceOption } from "../types";
-
-const RETRY_LABEL = "Retry";
-
-import {
-  findActiveChoicesMessageIds,
-  findLatestChoices,
-} from "../utils/ai-chat-utils";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -36,10 +26,19 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/registry/dropdown-menu/dropdown-menu";
-import { AiChatInput } from "./ai-chat-input";
+import { useStickyScroll } from "../hooks/use-sticky-scroll";
+import type { AiChatVariant, ChoiceOption } from "../types";
+import {
+  findActiveChoicesMessageIds,
+  findLatestChoices,
+} from "../utils/ai-chat-utils";
+import { AiChatInput, type AiChatInputHandle } from "./ai-chat-input";
 import { AiChatLoading } from "./ai-chat-loading";
 import { AiChatProvider } from "./ai-chat-provider";
 import { AiChatSuggestions } from "./ai-chat-suggestions";
+import { AutopilotIcon } from "./icons/autopilot";
+
+const RETRY_LABEL = "Retry";
 
 export interface AiChatProps {
   messages: UIMessage[];
@@ -58,6 +57,10 @@ export interface AiChatProps {
   title?: string;
   renderHeader?: ReactNode;
   emptyState?: ReactNode;
+  /** Quick-start suggestions shown below the input in the empty state */
+  suggestions?: string[];
+  /** Called when the user clicks a suggestion in the empty state */
+  onSuggestionClick?: (suggestion: string) => void;
   placeholder?: string;
   showClearButton?: boolean;
   showTimestamps?: boolean;
@@ -89,6 +92,8 @@ export function AiChat({
   title,
   renderHeader,
   emptyState,
+  suggestions,
+  onSuggestionClick,
   placeholder,
   showClearButton = true,
   showTimestamps = false,
@@ -105,6 +110,7 @@ export function AiChat({
   const [isLatestResponseAnimating, setIsLatestResponseAnimating] =
     useState(false);
   const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
+  const inputRef = useRef<AiChatInputHandle>(null);
 
   const isControlled = controlledValue != null;
   const input = isControlled ? controlledValue : internalInput;
@@ -122,6 +128,14 @@ export function AiChat({
     scrollToBottom();
   };
 
+  const wasLoadingRef = useRef(false);
+  useEffect(() => {
+    if (wasLoadingRef.current && !isLoading) {
+      inputRef.current?.focus();
+    }
+    wasLoadingRef.current = isLoading;
+  }, [isLoading]);
+
   const latestChoices = findLatestChoices(messages);
   const activeChoicesMessageIds = findActiveChoicesMessageIds(messages);
   const latestAssistantMessageId =
@@ -135,11 +149,6 @@ export function AiChat({
 
   const defaultEmptyState = (
     <div className="flex flex-col items-center justify-center h-full text-center">
-      <AutopilotIcon
-        size={32}
-        className="mb-4 text-foreground"
-        aria-hidden="true"
-      />
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
           {"What would you like to do?"}
@@ -174,8 +183,8 @@ export function AiChat({
       <div
         className={
           isEmbedded
-            ? "flex flex-col h-full max-w-[765px] mx-auto bg-transparent text-ai-chat-foreground"
-            : "flex flex-col h-full max-w-[765px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground overflow-hidden"
+            ? "flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground"
+            : "flex flex-col h-full max-w-[680px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground overflow-hidden"
         }
         data-slot="ai-chat"
       >
@@ -187,10 +196,7 @@ export function AiChat({
                   className="size-[21px] text-[#6C5AEF] flex-shrink-0"
                   aria-hidden="true"
                 />
-                <span
-                  className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate pt-[2px]"
-                  style={{ backgroundImage: "var(--ai-gradient-strong)" }}
-                >
+                <span className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate pt-[2px] [background-image:linear-gradient(97.73deg,#5D4ED0_8.79%,#1076A0_91.48%)] dark:[background-image:linear-gradient(97.73deg,#9485F5_8.79%,#69C7DD_91.48%)]">
                   {title}
                 </span>
               </div>
@@ -244,11 +250,12 @@ export function AiChat({
               className="flex-1 flex flex-col items-center px-4"
               style={{ justifyContent: "center", paddingBottom: "10%" }}
             >
-              <div className="w-full max-w-[765px]">
-                <div className="text-center mb-10">
+              <div className="w-full max-w-[680px]">
+                <div className="text-center mb-6">
                   {emptyState ?? defaultEmptyState}
                 </div>
                 <AiChatInput
+                  ref={inputRef}
                   value={input}
                   onChange={setInput}
                   onSubmit={handleSubmit}
@@ -257,12 +264,30 @@ export function AiChat({
                   placeholder={placeholder}
                   hasMessages={false}
                 />
+                {suggestions && suggestions.length > 0 && (
+                  <div className="mt-4 flex flex-wrap justify-center gap-2">
+                    {suggestions.map((suggestion) => (
+                      <button
+                        key={suggestion}
+                        type="button"
+                        className="py-2 px-4 text-xs font-semibold rounded-full border border-input bg-background text-foreground hover:bg-muted transition-colors"
+                        onClick={() => {
+                          if (onSuggestionClick) {
+                            onSuggestionClick(suggestion);
+                          } else {
+                            onSendMessage(suggestion);
+                          }
+                        }}
+                      >
+                        {suggestion}
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
-              {
-                "Responses may be inaccurate. Please verify important information."
-              }
+              {"AI-generated responses should be reviewed for accuracy."}
             </div>
           </div>
         ) : (
@@ -342,6 +367,7 @@ export function AiChat({
         {messages.length > 0 && (
           <>
             <AiChatInput
+              ref={inputRef}
               value={input}
               onChange={setInput}
               onSubmit={handleSubmit}
@@ -351,9 +377,7 @@ export function AiChat({
               hasMessages
             />
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
-              {
-                "Responses may be inaccurate. Please verify important information."
-              }
+              {"AI-generated responses should be reviewed for accuracy."}
             </div>
           </>
         )}
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index a75152cb2..271479a9b 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -4,6 +4,7 @@ import { useChat } from "@tanstack/ai-react";
 import { useTranslation } from "react-i18next";
 import { createAgentHubConnection } from "@/registry/ai-chat/adapters/agenthub/adapter";
 import { AiChat } from "@/registry/ai-chat/components/ai-chat";
+import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
 import {
   CHOICES_TOOL_PROMPT,
@@ -50,6 +51,12 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       title="Autopilot"
       assistantName={t("assistant")}
       error={error ?? null}
+      emptyState={<AiChatEmptyState title="What can I help you get done?" />}
+      suggestions={[
+        "Summarize a report",
+        "Create an executive brief",
+        "Find automation opportunities",
+      ]}
     >
       {messages.map((message) => (
         <AiChatMessage key={message.id} message={message} />

From 2c5e41e9390d56b8a86a68dbe7823ee7ce2e2675 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 14:08:53 -0400
Subject: [PATCH 13/35] chore(apollo-vertex): Minor alignment

---
 .../app/vertex-components/ai-chat/preview/thinking-demo.tsx  | 3 ++-
 .../registry/ai-chat/components/ai-chat-input.tsx            | 5 +----
 .../registry/ai-chat/components/ai-chat-loading.tsx          | 3 ++-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
index fbe2125e0..a3f720f63 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
@@ -12,6 +12,7 @@ const LABEL_SLIDE = 6;
 const shimmerStyle = {
   display: "inline-block",
   whiteSpace: "nowrap",
+  lineHeight: 1,
   fontSize: "14px",
   fontWeight: 500,
   backgroundImage:
@@ -48,7 +49,7 @@ export function ThinkingDemo() {
             delay: isThinking ? 0.9 : 0,
             ease: ENTRANCE_EASE,
           }}
-          style={{ marginLeft: "-7px" }}
+          style={{ marginLeft: "-7px", display: "flex", alignItems: "center" }}
         >
           <AnimatePresence mode="wait">
             <motion.span
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 1b85c6209..cabf210cf 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -163,10 +163,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
             className="flex-shrink-0 size-9 rounded-lg flex items-center justify-center bg-secondary transition-opacity"
             onClick={onStop}
           >
-            <CircleStop
-              className="size-5 text-muted-foreground"
-              aria-hidden="true"
-            />
+            <CircleStop className="size-5 text-foreground" aria-hidden="true" />
           </button>
         </TooltipTrigger>
         <TooltipContent>{t("stop")}</TooltipContent>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
index 756054082..20a80a077 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
@@ -19,6 +19,7 @@ const LABEL_SLIDE_DISTANCE = 6;
 const shimmerStyle = {
   display: "inline-block",
   whiteSpace: "nowrap",
+  lineHeight: 1,
   fontSize: "14px",
   fontWeight: 500,
   backgroundImage:
@@ -56,7 +57,7 @@ export function AiChatLoading() {
             delay: TEXT_DELAY,
             ease: ENTRANCE_EASE,
           }}
-          style={{ marginLeft: "-7px" }}
+          style={{ marginLeft: "-7px", display: "flex", alignItems: "center" }}
         >
           <AnimatePresence mode="wait">
             <motion.span

From f5d241d0a1154df07b820c0771030b024f9e5974 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 14:47:10 -0400
Subject: [PATCH 14/35] chore(apollo-vertex): Rebase

---
 pnpm-lock.yaml | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65a3fccbe..7ba70344b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -238,6 +238,9 @@ importers:
       framer-motion:
         specifier: ^12.26.2
         version: 12.26.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       i18next:
         specifier: ^25.8.1
         version: 25.8.1(typescript@5.9.3)
@@ -8403,6 +8406,10 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   highlightjs-vue@1.0.0:
     resolution: {integrity: sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==}
 
@@ -20860,6 +20867,8 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
+  highlight.js@11.11.1: {}
+
   highlightjs-vue@1.0.0: {}
 
   hoist-non-react-statics@3.3.2:

From a5526db4af5f5e26b65ede35f2929397e7127169 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 16:11:47 -0400
Subject: [PATCH 15/35] chore(apollo-vertex): Transitions and copy

---
 apps/apollo-vertex/app/_meta.ts                           | 1 +
 .../registry/ai-chat/components/ai-chat-empty-state.tsx   | 2 +-
 .../apollo-vertex/registry/ai-chat/components/ai-chat.tsx | 8 ++++----
 .../registry/ai-chat/hooks/use-sticky-scroll.ts           | 2 +-
 .../templates/ai-chat/AiChatAgentHubMode.tsx              | 6 +++---
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/apollo-vertex/app/_meta.ts b/apps/apollo-vertex/app/_meta.ts
index 152665709..133fd3f89 100644
--- a/apps/apollo-vertex/app/_meta.ts
+++ b/apps/apollo-vertex/app/_meta.ts
@@ -6,6 +6,7 @@ export default {
   templates: "Templates",
   guidelines: "Guidelines",
   experiment: "Experiment",
+  "vertex-components": "Vertex Components",
   "data-querying": "Data Querying",
   localization: "Localization",
   mcp: "MCP Server",
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index 96dda7091..8148a1c94 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -17,7 +17,7 @@ export function AiChatEmptyState({
     <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground gap-4">
       {icon && icon}
       <div className="flex flex-col items-center gap-1">
-        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
+        <h2 className="text-2xl font-semibold leading-tight tracking-tight text-foreground">
           {title}
         </h2>
         {description && (
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index f107f5c95..f6daca552 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -150,8 +150,8 @@ export function AiChat({
   const defaultEmptyState = (
     <div className="flex flex-col items-center justify-center h-full text-center">
       <div className="flex flex-col items-center gap-1">
-        <h2 className="text-xl font-bold leading-tight tracking-tight text-foreground">
-          {"What would you like to do?"}
+        <h2 className="text-2xl font-semibold leading-tight tracking-tight text-foreground">
+          {"What are we tackling today?"}
         </h2>
         <p className="text-sm text-muted-foreground">
           {"I can help you review, fix, or complete your work."}
@@ -160,7 +160,7 @@ export function AiChat({
     </div>
   );
 
-  const padding = isCompact ? "p-2" : "py-4 pl-10 pr-4";
+  const padding = isCompact ? "p-2" : "py-4 pl-10 pr-10";
   const messageGap = isCompact ? "space-y-2" : "space-y-1";
 
   return (
@@ -184,7 +184,7 @@ export function AiChat({
         className={
           isEmbedded
             ? "flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground"
-            : "flex flex-col h-full max-w-[680px] mx-auto border border-ai-chat-border rounded-lg bg-transparent text-ai-chat-foreground overflow-hidden"
+            : "flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground overflow-hidden"
         }
         data-slot="ai-chat"
       >
diff --git a/apps/apollo-vertex/registry/ai-chat/hooks/use-sticky-scroll.ts b/apps/apollo-vertex/registry/ai-chat/hooks/use-sticky-scroll.ts
index 10adb76e0..d4e34666f 100644
--- a/apps/apollo-vertex/registry/ai-chat/hooks/use-sticky-scroll.ts
+++ b/apps/apollo-vertex/registry/ai-chat/hooks/use-sticky-scroll.ts
@@ -49,7 +49,7 @@ export function useStickyScroll() {
   useEffect(() => {
     if (isStuckRef.current) {
       const el = scrollElRef.current;
-      if (el) el.scrollTop = el.scrollHeight;
+      if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
     }
   }, [contentRect.height]);
 
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index 271479a9b..81b5e04cc 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -51,11 +51,11 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       title="Autopilot"
       assistantName={t("assistant")}
       error={error ?? null}
-      emptyState={<AiChatEmptyState title="What can I help you get done?" />}
+      emptyState={<AiChatEmptyState title="What are we tackling today?" />}
       suggestions={[
-        "Summarize a report",
+        "Summarize a PDF",
         "Create an executive brief",
-        "Find automation opportunities",
+        "Draft a follow-up for my last meeting",
       ]}
     >
       {messages.map((message) => (

From 4effbca13afaea2a64735c3075bdd4be9e85a617 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 17:02:42 -0400
Subject: [PATCH 16/35] chore(apollo-vertex): Interaction nuances

---
 .../ai-chat/preview/mock-data.ts              |  12 ++
 .../ai-chat/preview/page.tsx                  |  47 +++--
 .../ai-chat/components/ai-chat-code-block.tsx | 126 +++++++++----
 .../ai-chat/components/ai-chat-input.tsx      | 101 ++++++++---
 .../ai-chat/components/ai-chat-message.tsx    | 166 +++++++++++++++++-
 .../ai-chat/components/ai-chat-provider.tsx   |   1 +
 .../registry/ai-chat/components/ai-chat.tsx   |  69 ++++++--
 apps/apollo-vertex/registry/ai-chat/types.ts  |   2 +
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |   1 +
 9 files changed, 427 insertions(+), 98 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
index 8601abe16..2211805af 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
@@ -192,6 +192,18 @@ export const MOCK_MESSAGES_WITH_CHOICES: UIMessage[] = [
   },
 ];
 
+export const MOCK_SOURCES_BASIC = {
+  "2": [
+    { label: "Apollo UI GitHub", url: "https://github.com/UiPath/apollo-ui" },
+    { label: "Tailwind CSS", url: "https://tailwindcss.com" },
+    { label: "shadcn/ui", url: "https://ui.shadcn.com" },
+  ],
+};
+
+export const MOCK_ATTACHMENTS_BASIC = {
+  "1": [{ name: "Q4_Report.pdf", type: "application/pdf", size: 245000 }],
+};
+
 export const MOCK_CHOICE_OPTIONS = [
   { id: "1", label: "Option A — Recommended", recommended: true },
   { id: "2", label: "Option B — Alternative" },
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 2bb70c65e..48a86dde7 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -8,15 +8,18 @@ import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
 import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
 import {
+  MOCK_ATTACHMENTS_BASIC,
   MOCK_CHOICE_OPTIONS,
   MOCK_MESSAGES_BASIC,
   MOCK_MESSAGES_CONVERSATION,
   MOCK_MESSAGES_MARKDOWN,
   MOCK_MESSAGES_WITH_CHOICES,
+  MOCK_SOURCES_BASIC,
 } from "./mock-data";
 import { ThinkingDemo } from "./thinking-demo";
 
-function noop() {
+// biome-ignore lint/suspicious/noExplicitAny: preview no-op accepts any args
+function noop(..._args: any[]) {
   // no-op for preview
 }
 
@@ -51,6 +54,17 @@ function PreviewCard({
   );
 }
 
+function renderBasicMsg(msg: (typeof MOCK_MESSAGES_BASIC)[number]) {
+  return (
+    <AiChatMessage
+      key={msg.id}
+      message={msg}
+      sources={MOCK_SOURCES_BASIC[msg.id as keyof typeof MOCK_SOURCES_BASIC]}
+      attachments={MOCK_ATTACHMENTS_BASIC[msg.id as keyof typeof MOCK_ATTACHMENTS_BASIC]}
+    />
+  );
+}
+
 export default function AiChatPreviewPage() {
   return (
     <div className="max-w-6xl mx-auto p-8 space-y-12">
@@ -119,10 +133,9 @@ export default function AiChatPreviewPage() {
             title="Autopilot"
             showTimestamps
             showMessageActions
+            onEditMessage={noop}
           >
-            {MOCK_MESSAGES_BASIC.map((msg) => (
-              <AiChatMessage key={msg.id} message={msg} />
-            ))}
+            {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
           </AiChat>
         </PreviewCard>
       </section>
@@ -141,6 +154,7 @@ export default function AiChatPreviewPage() {
             onStop={noop}
             title="Autopilot"
             showTimestamps
+            onEditMessage={noop}
           >
             {MOCK_MESSAGES_CONVERSATION.map((msg) => (
               <AiChatMessage key={msg.id} message={msg} />
@@ -162,6 +176,7 @@ export default function AiChatPreviewPage() {
             onSendMessage={noop}
             onStop={noop}
             title="Autopilot"
+            onEditMessage={noop}
           >
             {MOCK_MESSAGES_MARKDOWN.map((msg) => (
               <AiChatMessage key={msg.id} message={msg} />
@@ -184,8 +199,9 @@ export default function AiChatPreviewPage() {
               onSendMessage={noop}
               onStop={noop}
               title="Autopilot"
+              onEditMessage={noop}
             >
-              <AiChatMessage message={MOCK_MESSAGES_BASIC[0]} />
+              {renderBasicMsg(MOCK_MESSAGES_BASIC[0])}
             </AiChat>
           </PreviewCard>
           <PreviewCard className="p-6">
@@ -210,6 +226,7 @@ export default function AiChatPreviewPage() {
             onSendMessage={noop}
             onStop={noop}
             onRetry={noop}
+            onEditMessage={noop}
             title="Autopilot"
             error={
               new Error(
@@ -217,9 +234,7 @@ export default function AiChatPreviewPage() {
               )
             }
           >
-            {MOCK_MESSAGES_BASIC.map((msg) => (
-              <AiChatMessage key={msg.id} message={msg} />
-            ))}
+            {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
           </AiChat>
         </PreviewCard>
       </section>
@@ -236,6 +251,7 @@ export default function AiChatPreviewPage() {
             isLoading={false}
             onSendMessage={noop}
             onStop={noop}
+            onEditMessage={noop}
             title="Autopilot"
           >
             {MOCK_MESSAGES_WITH_CHOICES.map((msg) => (
@@ -260,10 +276,9 @@ export default function AiChatPreviewPage() {
               onStop={noop}
               variant="default"
               title="Autopilot"
+              onEditMessage={noop}
             >
-              {MOCK_MESSAGES_BASIC.map((msg) => (
-                <AiChatMessage key={msg.id} message={msg} />
-              ))}
+              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
             </AiChat>
           </PreviewCard>
           <PreviewCard className="h-[350px]">
@@ -274,10 +289,9 @@ export default function AiChatPreviewPage() {
               onStop={noop}
               variant="compact"
               title="Autopilot"
+              onEditMessage={noop}
             >
-              {MOCK_MESSAGES_BASIC.map((msg) => (
-                <AiChatMessage key={msg.id} message={msg} />
-              ))}
+              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
             </AiChat>
           </PreviewCard>
           <PreviewCard className="h-[350px] p-4">
@@ -287,10 +301,9 @@ export default function AiChatPreviewPage() {
               onSendMessage={noop}
               onStop={noop}
               variant="embedded"
+              onEditMessage={noop}
             >
-              {MOCK_MESSAGES_BASIC.map((msg) => (
-                <AiChatMessage key={msg.id} message={msg} />
-              ))}
+              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
             </AiChat>
           </PreviewCard>
         </div>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
index ff5b76011..d2b270433 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
@@ -2,6 +2,61 @@
 
 import "highlight.js/styles/github.min.css";
 
+// Dark-mode override: github-dark-dimmed palette scoped to `.dark`
+const DARK_HLJS_STYLE = `
+.dark .hljs {
+  color: #adbac7;
+  background: transparent;
+}
+.dark .hljs-doctag,.dark .hljs-keyword,.dark .hljs-meta .hljs-keyword,.dark .hljs-template-tag,.dark .hljs-template-variable,.dark .hljs-type,.dark .hljs-variable.language_ {
+  color: #f47067;
+}
+.dark .hljs-title,.dark .hljs-title.class_,.dark .hljs-title.class_.inherited__,.dark .hljs-title.function_ {
+  color: #dcbdfb;
+}
+.dark .hljs-attr,.dark .hljs-attribute,.dark .hljs-literal,.dark .hljs-meta,.dark .hljs-number,.dark .hljs-operator,.dark .hljs-variable,.dark .hljs-selector-attr,.dark .hljs-selector-class,.dark .hljs-selector-id {
+  color: #6cb6ff;
+}
+.dark .hljs-regexp,.dark .hljs-string,.dark .hljs-meta .hljs-string {
+  color: #96d0ff;
+}
+.dark .hljs-built_in,.dark .hljs-symbol {
+  color: #f69d50;
+}
+.dark .hljs-comment,.dark .hljs-code,.dark .hljs-formula {
+  color: #768390;
+}
+.dark .hljs-name,.dark .hljs-quote,.dark .hljs-selector-tag,.dark .hljs-selector-pseudo {
+  color: #8ddb8c;
+}
+.dark .hljs-subst {
+  color: #adbac7;
+}
+.dark .hljs-section {
+  color: #316dca;
+  font-weight: bold;
+}
+.dark .hljs-bullet {
+  color: #eac55f;
+}
+.dark .hljs-emphasis {
+  color: #adbac7;
+  font-style: italic;
+}
+.dark .hljs-strong {
+  color: #adbac7;
+  font-weight: bold;
+}
+.dark .hljs-addition {
+  color: #b4f1b4;
+  background-color: #1b4721;
+}
+.dark .hljs-deletion {
+  color: #ffd8d3;
+  background-color: #78191b;
+}
+`;
+
 import hljs from "highlight.js/lib/core";
 import bash from "highlight.js/lib/languages/bash";
 import css from "highlight.js/lib/languages/css";
@@ -61,40 +116,43 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
   const copyLabel = copied ? COPIED_LABEL : COPY_LABEL;
 
   return (
-    <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted/50 overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-ai-chat-border">
-        {language && (
-          <span className="text-[11px] font-mono text-ai-chat-muted-foreground uppercase tracking-wider">
-            {language}
-          </span>
-        )}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={handleCopy}
-              className="ml-auto size-6 inline-flex items-center justify-center rounded-md opacity-0 group-hover/codeblock:opacity-100 transition-opacity hover:bg-ai-chat-border"
-              aria-label={copyLabel}
-            >
-              {copied ? (
-                <Check className="size-3 text-success" aria-hidden="true" />
-              ) : (
-                <Copy
-                  className="size-3 text-ai-chat-muted-foreground"
-                  aria-hidden="true"
-                />
-              )}
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{copyLabel}</TooltipContent>
-        </Tooltip>
+    <>
+      <style dangerouslySetInnerHTML={{ __html: DARK_HLJS_STYLE }} />
+      <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted/50 overflow-hidden">
+        <div className="flex items-center justify-between px-3 py-1.5 border-b border-ai-chat-border">
+          {language && (
+            <span className="text-[11px] font-mono text-ai-chat-muted-foreground uppercase tracking-wider">
+              {language}
+            </span>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="ml-auto size-6 inline-flex items-center justify-center rounded-md opacity-0 group-hover/codeblock:opacity-100 transition-opacity hover:bg-ai-chat-border"
+                aria-label={copyLabel}
+              >
+                {copied ? (
+                  <Check className="size-3 text-success" aria-hidden="true" />
+                ) : (
+                  <Copy
+                    className="size-3 text-ai-chat-muted-foreground"
+                    aria-hidden="true"
+                  />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{copyLabel}</TooltipContent>
+          </Tooltip>
+        </div>
+        <pre className="p-3 overflow-x-auto">
+          <code
+            className="hljs text-xs font-mono"
+            dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+          />
+        </pre>
       </div>
-      <pre className="p-3 overflow-x-auto">
-        <code
-          className="hljs text-xs font-mono"
-          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-        />
-      </pre>
-    </div>
+    </>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index cabf210cf..2d3cb4821 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { ArrowUp, CircleStop, Plus } from "lucide-react";
-import React, {
+import { ArrowUp, CircleStop, FileText, Plus, X } from "lucide-react";
+import {
+  type FocusEvent,
   type FormEvent,
   type KeyboardEvent,
+  type Ref,
   forwardRef,
   useImperativeHandle,
   useRef,
+  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
@@ -22,12 +25,18 @@ import {
   TooltipTrigger,
 } from "@/registry/tooltip/tooltip";
 
+interface PendingFile {
+  name: string;
+  size: number;
+  type: string;
+  file: File;
+}
+
 interface AiChatInputProps {
   value: string;
   onChange: (value: string) => void;
-  onSubmit: () => void;
+  onSubmit: (files?: File[]) => void;
   onStop: () => void;
-  onFileSelect?: (files: FileList) => void;
   isLoading: boolean;
   disabled?: boolean;
   placeholder?: string;
@@ -46,18 +55,18 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       onChange,
       onSubmit,
       onStop,
-      onFileSelect,
       isLoading,
       disabled = false,
       placeholder,
       hasMessages = false,
       maxLength,
     }: AiChatInputProps,
-    ref: React.Ref<AiChatInputHandle>,
+    ref: Ref<AiChatInputHandle>,
   ) {
     const { t } = useTranslation();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const glowRef = useRef<HTMLDivElement>(null);
+    const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
 
     useImperativeHandle(ref, () => ({
       focus: () => textareaRef.current?.focus(),
@@ -79,13 +88,13 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     };
 
     const submitMessage = () => {
-      if (!value.trim() || isLoading) return;
-      onSubmit();
+      if (!value.trim()) return;
+      const files = pendingFiles.map((f) => f.file);
+      onSubmit(files.length > 0 ? files : undefined);
+      setPendingFiles([]);
       requestAnimationFrame(() => {
         const el = textareaRef.current;
-        if (el) {
-          el.style.height = "auto";
-        }
+        if (el) el.style.height = "auto";
       });
     };
 
@@ -106,13 +115,21 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       fileInput.type = "file";
       fileInput.multiple = true;
       fileInput.addEventListener("change", () => {
-        if (fileInput.files && onFileSelect) onFileSelect(fileInput.files);
+        if (!fileInput.files) return;
+        const newFiles: PendingFile[] = Array.from(fileInput.files).map(
+          (file) => ({ name: file.name, size: file.size, type: file.type, file }),
+        );
+        setPendingFiles((prev) => [...prev, ...newFiles]);
       });
       fileInput.click();
     };
 
+    const removeFile = (index: number) => {
+      setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+
     const focusStyles = {
-      onFocusCapture: (e: React.FocusEvent<HTMLFormElement>) => {
+      onFocusCapture: (e: FocusEvent<HTMLFormElement>) => {
         const el = e.currentTarget;
         el.style.borderColor = "transparent";
         el.style.backgroundImage = `linear-gradient(var(--background), var(--background)), var(--ai-gradient-strong)`;
@@ -122,7 +139,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
           "0 0 0 3px color-mix(in oklch, var(--muted-foreground) 10%, transparent)";
         if (glowRef.current) glowRef.current.style.opacity = "0";
       },
-      onBlurCapture: (e: React.FocusEvent<HTMLFormElement>) => {
+      onBlurCapture: (e: FocusEvent<HTMLFormElement>) => {
         if (!e.currentTarget.contains(e.relatedTarget)) {
           const el = e.currentTarget;
           el.style.borderColor = "";
@@ -135,13 +152,35 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       },
     };
 
+    const fileChips = pendingFiles.length > 0 && (
+      <div className="flex flex-wrap gap-1.5 px-[10px] pt-2">
+        {pendingFiles.map((f, i) => (
+          <div
+            key={`${f.name}-${i}`}
+            className="flex items-center gap-1 pl-2 pr-1 py-1 rounded-md bg-muted text-xs text-foreground max-w-[180px]"
+          >
+            <FileText className="size-3 flex-shrink-0 text-muted-foreground" aria-hidden="true" />
+            <span className="truncate">{f.name}</span>
+            <button
+              type="button"
+              onClick={() => removeFile(i)}
+              className="flex-shrink-0 size-4 rounded-sm flex items-center justify-center hover:bg-muted-foreground/20 ml-0.5"
+              aria-label={`Remove ${f.name}`}
+            >
+              <X className="size-2.5" aria-hidden="true" />
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+
     const plusMenu = (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"
-            size="icon-sm"
+            size="icon"
             className="flex-shrink-0 text-muted-foreground hover:text-foreground"
           >
             <Plus className="size-4" aria-hidden="true" />
@@ -239,22 +278,25 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
           {hasMessages ? (
             <form
               onSubmit={handleSubmit}
-              className="relative flex items-center gap-2 pl-[8px] pr-[8px] py-[6px] rounded-lg border-2 border-input transition-colors bg-background"
+              className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
               {...focusStyles}
             >
-              {plusMenu}
-              <textarea
-                ref={textareaRef}
-                value={value}
-                onChange={(e) => handleChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={displayPlaceholder}
-                aria-label={displayPlaceholder}
-                className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] py-[10px] leading-[20px]"
-                rows={1}
-                disabled={disabled}
-              />
-              {sendStopButton}
+              {fileChips}
+              <div className="flex items-end gap-2 pl-[8px] pr-[8px] pt-[4px] pb-[8px]">
+                {plusMenu}
+                <textarea
+                  ref={textareaRef}
+                  value={value}
+                  onChange={(e) => handleChange(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={displayPlaceholder}
+                  aria-label={displayPlaceholder}
+                  className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] pt-[12px] pb-[8px] leading-[20px]"
+                  rows={1}
+                  disabled={disabled}
+                />
+                {sendStopButton}
+              </div>
             </form>
           ) : (
             <form
@@ -262,6 +304,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
               className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
               {...focusStyles}
             >
+              {fileChips}
               <textarea
                 ref={textareaRef}
                 value={value}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index 104fa77f0..038b78db1 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -2,9 +2,12 @@
 
 import type { TextPart, UIMessage } from "@tanstack/ai-client";
 import { motion } from "framer-motion";
-import { type ReactNode, useEffect } from "react";
+import { ExternalLink, FileText } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { Badge } from "@/registry/badge/badge";
 import { useTypewriter } from "../hooks/use-typewriter";
 import type { MessageFeedbackType } from "../types";
+import { messageHasChoices } from "../utils/ai-chat-utils";
 import { AiChatMarkdown } from "./ai-chat-markdown";
 import { AiChatMessageActions } from "./ai-chat-message-actions";
 import { useAiChat } from "./ai-chat-provider";
@@ -17,6 +20,17 @@ const ENTRANCE_TRANSITION = {
   ease: [0.22, 1, 0.36, 1] as const,
 };
 
+export interface MessageSource {
+  label: string;
+  url?: string;
+}
+
+export interface MessageAttachment {
+  name: string;
+  type?: string;
+  size?: number;
+}
+
 interface AiChatMessageProps {
   message: UIMessage;
   children?: ReactNode;
@@ -25,7 +39,10 @@ interface AiChatMessageProps {
   /** Callbacks for message actions */
   onFeedback?: (type: MessageFeedbackType) => void;
   onRegenerate?: () => void;
-  onEdit?: () => void;
+  /** Source citations shown below an assistant message */
+  sources?: MessageSource[];
+  /** File attachments shown in a user message bubble */
+  attachments?: MessageAttachment[];
 }
 
 function getDisplayText(message: UIMessage): string {
@@ -35,18 +52,55 @@ function getDisplayText(message: UIMessage): string {
     .join("");
 }
 
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export function AiChatMessage({
   message,
   children,
   isStreaming: isStreamingProp,
   onFeedback,
   onRegenerate,
-  onEdit,
+  sources,
+  attachments,
 }: AiChatMessageProps) {
   const config = useAiChat();
   const isUser = message.role === "user";
   const displayContent = getDisplayText(message);
 
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(displayContent);
+  const editTextareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Keep editValue in sync if message content changes externally (e.g. regenerate)
+  useEffect(() => {
+    if (!isEditing) setEditValue(displayContent);
+  }, [displayContent, isEditing]);
+
+  // Auto-focus, select all, and scroll into view when entering edit mode.
+  // rAF defers the scroll until after React has committed the new layout
+  // (bubble → textarea expansion), so scrollIntoView sees the final dimensions.
+  useEffect(() => {
+    if (isEditing && editTextareaRef.current) {
+      editTextareaRef.current.focus();
+      editTextareaRef.current.select();
+      const el = editTextareaRef.current;
+      requestAnimationFrame(() => {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }
+  }, [isEditing]);
+
+  const handleSave = () => {
+    if (editValue.trim() && editValue.trim() !== displayContent) {
+      config.onEditMessage?.(message.id, editValue.trim());
+    }
+    setIsEditing(false);
+  };
+
   // Streaming state — explicit prop wins, otherwise derive from chat-level isLoading
   // and the latest assistant message ID. The latest assistant message is the one
   // currently being generated when isLoading is true.
@@ -88,6 +142,52 @@ export function AiChatMessage({
   }
 
   if (isUser) {
+    // Edit mode — swap bubble for inline textarea
+    if (isEditing) {
+      return (
+        <motion.div
+          className="flex w-full justify-end"
+          initial={ENTRANCE_INITIAL}
+          animate={ENTRANCE_ANIMATE}
+          transition={ENTRANCE_TRANSITION}
+        >
+          <div className="flex flex-col items-end gap-2 w-[80%]">
+            <textarea
+              ref={editTextareaRef}
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSave();
+                }
+                if (e.key === "Escape") setIsEditing(false);
+              }}
+              className="w-full px-4 py-2 text-sm leading-6 rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground resize-none focus:outline-none border-2 border-primary/40 min-h-[60px]"
+              rows={3}
+            />
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setIsEditing(false)}
+                className="px-3 py-1 text-xs rounded-md hover:bg-muted text-muted-foreground transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={!editValue.trim()}
+                className="px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors"
+              >
+                Save &amp; re-run
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      );
+    }
+
     return (
       <motion.div
         className="flex w-full justify-end"
@@ -97,6 +197,24 @@ export function AiChatMessage({
       >
         <div className="group/message flex flex-col items-end gap-1 max-w-[80%]">
           <div className="px-4 py-2 text-sm leading-6 rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
+            {attachments && attachments.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 mb-2">
+                {attachments.map((att, i) => (
+                  <div
+                    key={`${att.name}-${i}`}
+                    className="flex items-center gap-1 pl-2 pr-2 py-1 rounded-md bg-white/10 text-xs"
+                  >
+                    <FileText className="size-3 flex-shrink-0 opacity-70" aria-hidden="true" />
+                    <span className="truncate max-w-[120px]">{att.name}</span>
+                    {att.size !== undefined && (
+                      <span className="opacity-60 flex-shrink-0">
+                        {formatFileSize(att.size)}
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
             {displayContent && (
               <p className="whitespace-pre-wrap">{displayContent}</p>
             )}
@@ -106,7 +224,7 @@ export function AiChatMessage({
               content={displayContent}
               messageRole="user"
               showCopy={config.showCopyButton}
-              onEdit={onEdit}
+              onEdit={config.onEditMessage ? () => setIsEditing(true) : undefined}
             />
           )}
         </div>
@@ -129,8 +247,46 @@ export function AiChatMessage({
       transition={ENTRANCE_TRANSITION}
     >
       <div className="group/message flex flex-col gap-3 max-w-[85%]">
-        {displayContent && <AiChatMarkdown>{displayedText}</AiChatMarkdown>}
+        {displayContent && !messageHasChoices(message) && (
+          isResponseFullyRevealed ? (
+            <AiChatMarkdown>{displayedText}</AiChatMarkdown>
+          ) : (
+            <p className="py-1 text-base leading-relaxed text-foreground whitespace-pre-wrap">{displayedText}</p>
+          )
+        )}
         {children && <div className="mt-2 flex flex-col gap-2">{children}</div>}
+
+        {sources && sources.length > 0 && isResponseFullyRevealed && (
+          <motion.div
+            className="flex flex-wrap gap-1.5"
+            initial={{ opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
+          >
+            {sources.map((source, i) =>
+              source.url ? (
+                <a
+                  key={i}
+                  href={source.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="no-underline"
+                >
+                  <Badge variant="outline" className="gap-1 cursor-pointer hover:bg-muted transition-colors">
+                    <ExternalLink className="size-3" aria-hidden="true" />
+                    {source.label}
+                  </Badge>
+                </a>
+              ) : (
+                <Badge key={i} variant="outline" className="gap-1">
+                  <ExternalLink className="size-3" aria-hidden="true" />
+                  {source.label}
+                </Badge>
+              ),
+            )}
+          </motion.div>
+        )}
+
         {config.showMessageActions &&
           !isInActiveChoicesTurn &&
           isResponseFullyRevealed && (
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
index dd8efc01d..97665de1e 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
@@ -17,6 +17,7 @@ const defaultConfig: AiChatConfig = {
   setIsLatestResponseAnimating: () => {
     // no-op default — replaced by AiChat with the real setter via context override
   },
+  onEditMessage: undefined,
 };
 
 const AiChatContext = createContext<AiChatConfig>(defaultConfig);
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index f6daca552..86898852d 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { UIMessage } from "@tanstack/ai-client";
+import type { TextPart, UIMessage } from "@tanstack/ai-client";
 import {
   AlertCircle,
   ArrowDown,
@@ -43,13 +43,15 @@ const RETRY_LABEL = "Retry";
 export interface AiChatProps {
   messages: UIMessage[];
   isLoading: boolean;
-  onSendMessage: (content: string) => void;
+  onSendMessage: (content: string, attachments?: File[]) => void;
   onStop: () => void;
   onClearChat?: () => void;
   onChoiceSelect?: (option: ChoiceOption) => void;
   onRetry?: () => void;
   /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
   onRegenerate?: () => void;
+  /** Callback when the user saves an edited user message. Receives the message ID and new content. */
+  onEditMessage?: (messageId: string, content: string) => void;
   children?: ReactNode;
   assistantName?: string;
   assistantAvatar?: ReactNode;
@@ -85,6 +87,7 @@ export function AiChat({
   onChoiceSelect,
   onRetry,
   onRegenerate,
+  onEditMessage,
   children,
   assistantName,
   assistantAvatar,
@@ -121,9 +124,35 @@ export function AiChat({
   const isCompact = variant === "compact";
   const isEmbedded = variant === "embedded";
 
-  const handleSubmit = () => {
-    if (!input.trim() || isLoading) return;
-    onSendMessage(input.trim());
+  const queuedMessageRef = useRef<{ content: string; attachments?: File[] } | null>(null);
+  const [conversationCopied, setConversationCopied] = useState(false);
+
+  const handleCopyConversation = async () => {
+    const text = messages
+      .map((m) => {
+        const content = m.parts
+          .filter((p): p is TextPart => p.type === "text")
+          .map((p) => p.content)
+          .join("");
+        if (!content) return null;
+        const label = m.role === "user" ? "You" : displayName;
+        return `${label}: ${content}`;
+      })
+      .filter(Boolean)
+      .join("\n\n");
+    await navigator.clipboard.writeText(text);
+    setConversationCopied(true);
+    setTimeout(() => setConversationCopied(false), 2000);
+  };
+
+  const handleSubmit = (attachments?: File[]) => {
+    if (!input.trim()) return;
+    if (isLoading) {
+      queuedMessageRef.current = { content: input.trim(), attachments };
+      setInput("");
+      return;
+    }
+    onSendMessage(input.trim(), attachments);
     setInput("");
     scrollToBottom();
   };
@@ -131,7 +160,14 @@ export function AiChat({
   const wasLoadingRef = useRef(false);
   useEffect(() => {
     if (wasLoadingRef.current && !isLoading) {
-      inputRef.current?.focus();
+      if (queuedMessageRef.current) {
+        const queued = queuedMessageRef.current;
+        queuedMessageRef.current = null;
+        onSendMessage(queued.content, queued.attachments);
+        scrollToBottom();
+      } else {
+        inputRef.current?.focus();
+      }
     }
     wasLoadingRef.current = isLoading;
   }, [isLoading]);
@@ -179,6 +215,7 @@ export function AiChat({
       isLatestResponseAnimating={isLatestResponseAnimating}
       setIsLatestResponseAnimating={setIsLatestResponseAnimating}
       onRegenerate={onRegenerate}
+      onEditMessage={onEditMessage}
     >
       <div
         className={
@@ -200,7 +237,7 @@ export function AiChat({
                   {title}
                 </span>
               </div>
-              {onClearChat && showClearButton && messages.length > 0 && (
+              {messages.length > 0 && (
                 <AlertDialog>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -216,11 +253,16 @@ export function AiChat({
                       </button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                      <AlertDialogTrigger asChild>
-                        <DropdownMenuItem>
-                          {"New conversation"}
-                        </DropdownMenuItem>
-                      </AlertDialogTrigger>
+                      <DropdownMenuItem onClick={handleCopyConversation}>
+                        {conversationCopied ? "Copied!" : "Copy conversation"}
+                      </DropdownMenuItem>
+                      {onClearChat && showClearButton && (
+                        <AlertDialogTrigger asChild>
+                          <DropdownMenuItem>
+                            {"New conversation"}
+                          </DropdownMenuItem>
+                        </AlertDialogTrigger>
+                      )}
                     </DropdownMenuContent>
                   </DropdownMenu>
                   <AlertDialogContent>
@@ -258,7 +300,7 @@ export function AiChat({
                   ref={inputRef}
                   value={input}
                   onChange={setInput}
-                  onSubmit={handleSubmit}
+                  onSubmit={(files) => handleSubmit(files)}
                   onStop={onStop}
                   isLoading={isLoading}
                   placeholder={placeholder}
@@ -306,6 +348,7 @@ export function AiChat({
               aria-label={t("chat_messages")}
               aria-live="polite"
               aria-atomic="false"
+              aria-busy={isLoading || isLatestResponseAnimating}
               className={`h-full overflow-y-auto ${padding}`}
             >
               <div ref={contentRef} className={messageGap}>
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index 3ab3026e9..76558ee40 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -46,4 +46,6 @@ export interface AiChatConfig {
   setIsLatestResponseAnimating: (animating: boolean) => void;
   /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
   onRegenerate?: () => void;
+  /** Callback when the user saves an edited user message. Receives the message ID and new content. */
+  onEditMessage?: (messageId: string, content: string) => void;
 }
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index 81b5e04cc..ef28a88a9 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -48,6 +48,7 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       onStop={stop}
       onClearChat={clear}
       onRegenerate={reload}
+      onEditMessage={(_id, content) => { void sendMessage(content); }}
       title="Autopilot"
       assistantName={t("assistant")}
       error={error ?? null}

From 4af8c2fb39569b99fe1442b57f46b2c3e495b37b Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Mon, 13 Apr 2026 17:23:42 -0400
Subject: [PATCH 17/35] chore(apollo-vertex): menu setup

---
 .../app/patterns/ai-chat/_meta.ts             |  3 +
 .../app/patterns/ai-chat/page.mdx             |  5 +-
 .../app/patterns/ai-chat/preview/page.tsx     |  7 ++
 .../ai-chat/preview/page.tsx                  | 79 +++++++++++++++----
 .../ai-chat/components/ai-chat-code-block.tsx |  2 +-
 .../templates/AiChatTemplate.tsx              |  8 +-
 6 files changed, 80 insertions(+), 24 deletions(-)
 create mode 100644 apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
 create mode 100644 apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx

diff --git a/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts b/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
new file mode 100644
index 000000000..326a9ac3b
--- /dev/null
+++ b/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
@@ -0,0 +1,3 @@
+export default {
+  preview: "Components",
+};
diff --git a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
index b28514cef..b57ebeff0 100644
--- a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
+++ b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
@@ -1,12 +1,13 @@
 import { AiChatTemplate } from '@/templates/AiChatTemplate';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
 
 # AI Chat
 
 A composable AI chat UI component for Apollo Vertex. Built with React, TypeScript, and Tailwind CSS. Designed to work with [TanStack AI](https://tanstack.com/ai) — you bring `useChat` and a connection adapter, the component handles the chrome (scroll, input, loading, suggestions, errors) while you control how messages and tool calls render.
 
-<div className="not-prose my-8">
+<PreviewFullScreen height={600} title="AI Chat">
   <AiChatTemplate />
-</div>
+</PreviewFullScreen>
 
 ## Features
 
diff --git a/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx
new file mode 100644
index 000000000..6586b04c7
--- /dev/null
+++ b/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import AiChatPreviewPage from "@/app/vertex-components/ai-chat/preview/page";
+
+export default function PreviewPage() {
+  return <AiChatPreviewPage />;
+}
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 48a86dde7..b1b2bf2bd 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Maximize2, Minimize2 } from "lucide-react";
+import { type ReactNode, useState } from "react";
 import { AiChat } from "@/registry/ai-chat/components/ai-chat";
 import { AiChatCodeBlock } from "@/registry/ai-chat/components/ai-chat-code-block";
 import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state";
@@ -7,6 +9,14 @@ import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input";
 import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
 import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
+import { Button } from "@/registry/button/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/dialog/dialog";
 import {
   MOCK_ATTACHMENTS_BASIC,
   MOCK_CHOICE_OPTIONS,
@@ -41,16 +51,51 @@ function SectionHeader({
 function PreviewCard({
   children,
   className,
+  title,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
+  title?: string;
 }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const baseClass = `border rounded-lg bg-background overflow-hidden ${className ?? ""}`;
+
+  if (!title) {
+    return <div className={baseClass}>{children}</div>;
+  }
+
   return (
-    <div
-      className={`border rounded-lg bg-background overflow-hidden ${className ?? ""}`}
-    >
-      {children}
-    </div>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <div className={`relative group ${baseClass}`}>
+        {!isOpen && children}
+        <DialogTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon-sm"
+            className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm"
+            aria-label="Enter full screen"
+            title="Enter full screen"
+          >
+            <Maximize2 className="size-4" />
+          </Button>
+        </DialogTrigger>
+      </div>
+      <DialogContent fullscreen showCloseButton={false}>
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <DialogClose asChild>
+          <Button
+            variant="outline"
+            size="icon-sm"
+            className="absolute top-4 right-4 z-20"
+            aria-label="Exit full screen"
+            title="Exit full screen"
+          >
+            <Minimize2 className="size-4" />
+          </Button>
+        </DialogClose>
+        <div className="h-full">{children}</div>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -83,7 +128,7 @@ export default function AiChatPreviewPage() {
           title="Empty State (Default)"
           description="Default empty state with AI gradient icon."
         />
-        <PreviewCard className="h-[400px]">
+        <PreviewCard className="h-[400px]" title="Empty State (Default)">
           <AiChat
             messages={[]}
             isLoading={false}
@@ -100,7 +145,7 @@ export default function AiChatPreviewPage() {
           title="Empty State (Custom with Suggestions)"
           description="AiChatEmptyState component with quick-start prompts."
         />
-        <PreviewCard className="h-[400px]">
+        <PreviewCard className="h-[400px]" title="Empty State (Custom with Suggestions)">
           <AiChat
             messages={[]}
             isLoading={false}
@@ -124,7 +169,7 @@ export default function AiChatPreviewPage() {
           title="Basic Conversation"
           description="User/assistant exchange with avatars, timestamps, and hover actions."
         />
-        <PreviewCard className="h-[400px]">
+        <PreviewCard className="h-[400px]" title="Basic Conversation">
           <AiChat
             messages={MOCK_MESSAGES_BASIC}
             isLoading={false}
@@ -146,7 +191,7 @@ export default function AiChatPreviewPage() {
           title="Multi-turn Conversation"
           description="Longer back-and-forth with scrollable content and custom assistant name."
         />
-        <PreviewCard className="h-[500px]">
+        <PreviewCard className="h-[500px]" title="Multi-turn Conversation">
           <AiChat
             messages={MOCK_MESSAGES_CONVERSATION}
             isLoading={false}
@@ -169,7 +214,7 @@ export default function AiChatPreviewPage() {
           title="Markdown Rendering"
           description="All markdown elements including code blocks with copy button."
         />
-        <PreviewCard className="h-[600px]">
+        <PreviewCard className="h-[600px]" title="Markdown Rendering">
           <AiChat
             messages={MOCK_MESSAGES_MARKDOWN}
             isLoading={false}
@@ -192,7 +237,7 @@ export default function AiChatPreviewPage() {
           description="Thinking indicator that appears while the assistant generates a response."
         />
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <PreviewCard className="h-[300px]">
+          <PreviewCard className="h-[300px]" title="Loading State">
             <AiChat
               messages={[MOCK_MESSAGES_BASIC[0]]}
               isLoading
@@ -219,7 +264,7 @@ export default function AiChatPreviewPage() {
           title="Error State with Retry"
           description="Inline error banner with retry button."
         />
-        <PreviewCard className="h-[400px]">
+        <PreviewCard className="h-[400px]" title="Error State with Retry">
           <AiChat
             messages={MOCK_MESSAGES_BASIC}
             isLoading={false}
@@ -245,7 +290,7 @@ export default function AiChatPreviewPage() {
           title="Suggestion Buttons"
           description="Choice buttons with recommended badge and hover animation."
         />
-        <PreviewCard className="h-[400px]">
+        <PreviewCard className="h-[400px]" title="Suggestion Buttons">
           <AiChat
             messages={MOCK_MESSAGES_WITH_CHOICES}
             isLoading={false}
@@ -268,7 +313,7 @@ export default function AiChatPreviewPage() {
           description="Default, compact, and embedded layout variants side by side."
         />
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <PreviewCard className="h-[350px]">
+          <PreviewCard className="h-[350px]" title="Default Variant">
             <AiChat
               messages={MOCK_MESSAGES_BASIC}
               isLoading={false}
@@ -281,7 +326,7 @@ export default function AiChatPreviewPage() {
               {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
             </AiChat>
           </PreviewCard>
-          <PreviewCard className="h-[350px]">
+          <PreviewCard className="h-[350px]" title="Compact Variant">
             <AiChat
               messages={MOCK_MESSAGES_BASIC}
               isLoading={false}
@@ -294,7 +339,7 @@ export default function AiChatPreviewPage() {
               {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
             </AiChat>
           </PreviewCard>
-          <PreviewCard className="h-[350px] p-4">
+          <PreviewCard className="h-[350px] p-4" title="Embedded Variant">
             <AiChat
               messages={MOCK_MESSAGES_BASIC}
               isLoading={false}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
index d2b270433..75d2ba021 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
@@ -117,7 +117,7 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
 
   return (
     <>
-      <style dangerouslySetInnerHTML={{ __html: DARK_HLJS_STYLE }} />
+      <style>{DARK_HLJS_STYLE}</style>
       <div className="relative group/codeblock mb-2 last:mb-0 rounded-lg bg-ai-chat-muted/50 overflow-hidden">
         <div className="flex items-center justify-between px-3 py-1.5 border-b border-ai-chat-border">
           {language && (
diff --git a/apps/apollo-vertex/templates/AiChatTemplate.tsx b/apps/apollo-vertex/templates/AiChatTemplate.tsx
index 5c9f98270..042d7e47c 100644
--- a/apps/apollo-vertex/templates/AiChatTemplate.tsx
+++ b/apps/apollo-vertex/templates/AiChatTemplate.tsx
@@ -34,8 +34,8 @@ function AiChatWithConnection({
   });
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-end gap-4 pt-2">
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex items-center justify-end gap-4 pt-2 flex-shrink-0">
         <RadioGroup
           value={mode}
           onValueChange={(v) => {
@@ -64,7 +64,7 @@ function AiChatWithConnection({
         </RadioGroup>
       </div>
 
-      <div className="h-[500px]">
+      <div className="flex-1 min-h-[400px]">
         {mode === "agenthub" ? (
           <AgentHubChat accessToken={accessToken} orgTenant={orgTenant} />
         ) : (
@@ -80,7 +80,7 @@ function AiChatWithConnection({
 
 export function AiChatTemplate() {
   return (
-    <div className="min-h-[600px] flex w-full flex-col justify-center">
+    <div className="h-full min-h-[600px] flex w-full flex-col justify-center">
       <QueryClientProvider client={queryClient}>
         <ShellAuthProvider
           clientId={AICHAT_CLIENT_ID}

From fd79c492137a8fdc75b7c8038414a55d0982e0d5 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 13:19:22 -0400
Subject: [PATCH 18/35] chore(apollo-vertex): Demo setup

---
 .../app/patterns/ai-chat/page.mdx             |  2 +-
 .../ai-chat/preview/page.tsx                  | 50 +------------------
 .../ai-chat/components/ai-chat-loading.tsx    |  2 +-
 .../ai-chat/components/ai-chat-provider.tsx   |  6 +--
 .../registry/ai-chat/components/ai-chat.tsx   | 22 ++------
 apps/apollo-vertex/registry/ai-chat/types.ts  |  4 --
 .../templates/AiChatTemplate.tsx              |  8 +--
 .../templates/ai-chat/AiChatLoginGate.tsx     |  4 +-
 8 files changed, 16 insertions(+), 82 deletions(-)

diff --git a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
index b57ebeff0..408ae4f08 100644
--- a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
+++ b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
@@ -6,7 +6,7 @@ import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
 A composable AI chat UI component for Apollo Vertex. Built with React, TypeScript, and Tailwind CSS. Designed to work with [TanStack AI](https://tanstack.com/ai) — you bring `useChat` and a connection adapter, the component handles the chrome (scroll, input, loading, suggestions, errors) while you control how messages and tool calls render.
 
 <PreviewFullScreen height={600} title="AI Chat">
-  <AiChatTemplate />
+  <AiChatTemplate className="h-full flex w-full flex-col" />
 </PreviewFullScreen>
 
 ## Features
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index b1b2bf2bd..cea446281 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -306,55 +306,7 @@ export default function AiChatPreviewPage() {
         </PreviewCard>
       </section>
 
-      {/* ── 9. Variant Comparison ──────────────────────────── */}
-      <section>
-        <SectionHeader
-          title="Variant Comparison"
-          description="Default, compact, and embedded layout variants side by side."
-        />
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <PreviewCard className="h-[350px]" title="Default Variant">
-            <AiChat
-              messages={MOCK_MESSAGES_BASIC}
-              isLoading={false}
-              onSendMessage={noop}
-              onStop={noop}
-              variant="default"
-              title="Autopilot"
-              onEditMessage={noop}
-            >
-              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
-            </AiChat>
-          </PreviewCard>
-          <PreviewCard className="h-[350px]" title="Compact Variant">
-            <AiChat
-              messages={MOCK_MESSAGES_BASIC}
-              isLoading={false}
-              onSendMessage={noop}
-              onStop={noop}
-              variant="compact"
-              title="Autopilot"
-              onEditMessage={noop}
-            >
-              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
-            </AiChat>
-          </PreviewCard>
-          <PreviewCard className="h-[350px] p-4" title="Embedded Variant">
-            <AiChat
-              messages={MOCK_MESSAGES_BASIC}
-              isLoading={false}
-              onSendMessage={noop}
-              onStop={noop}
-              variant="embedded"
-              onEditMessage={noop}
-            >
-              {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
-            </AiChat>
-          </PreviewCard>
-        </div>
-      </section>
-
-      {/* ── 10. Isolated Sub-Components ────────────────────── */}
+      {/* ── 9. Isolated Sub-Components ────────────────────── */}
       <section>
         <SectionHeader
           title="Isolated Sub-Components"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
index 20a80a077..21f44e027 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-loading.tsx
@@ -19,7 +19,7 @@ const LABEL_SLIDE_DISTANCE = 6;
 const shimmerStyle = {
   display: "inline-block",
   whiteSpace: "nowrap",
-  lineHeight: 1,
+  lineHeight: 1.3,
   fontSize: "14px",
   fontWeight: 500,
   backgroundImage:
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
index 97665de1e..c000e150a 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { createContext, useContext } from "react";
-import type { AiChatConfig, AiChatVariant } from "../types";
+import type { AiChatConfig } from "../types";
 
 const defaultConfig: AiChatConfig = {
-  variant: "default",
   assistantName: "AI Assistant",
   showTimestamps: false,
   showMessageActions: true,
@@ -31,7 +30,6 @@ export function AiChatProvider({
   ...overrides
 }: AiChatProviderProps) {
   const config: AiChatConfig = { ...defaultConfig, ...overrides };
-  const variant: AiChatVariant = config.variant;
 
   return (
     <AiChatContext.Provider value={config}>
@@ -43,7 +41,7 @@ export function AiChatProvider({
         and the chat would grow to fit its content instead of scrolling within
         a fixed-height parent like h-[500px].
       */}
-      <div className="contents" data-slot="ai-chat-root" data-variant={variant}>
+      <div className="contents" data-slot="ai-chat-root">
         {children}
       </div>
     </AiChatContext.Provider>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 86898852d..4854a12c4 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -27,7 +27,7 @@ import {
   DropdownMenuTrigger,
 } from "@/registry/dropdown-menu/dropdown-menu";
 import { useStickyScroll } from "../hooks/use-sticky-scroll";
-import type { AiChatVariant, ChoiceOption } from "../types";
+import type { ChoiceOption } from "../types";
 import {
   findActiveChoicesMessageIds,
   findLatestChoices,
@@ -69,7 +69,6 @@ export interface AiChatProps {
   showMessageActions?: boolean;
   showCopyButton?: boolean;
   error?: Error | null;
-  variant?: AiChatVariant;
   /** Controlled input value */
   value?: string;
   /** Controlled input onChange */
@@ -103,7 +102,6 @@ export function AiChat({
   showMessageActions = true,
   showCopyButton = true,
   error,
-  variant = "default",
   value: controlledValue,
   onValueChange,
   typewriterCps = 75,
@@ -121,8 +119,6 @@ export function AiChat({
     isControlled && onValueChange ? onValueChange : setInternalInput;
 
   const displayName = assistantName ?? t("ai_assistant");
-  const isCompact = variant === "compact";
-  const isEmbedded = variant === "embedded";
 
   const queuedMessageRef = useRef<{ content: string; attachments?: File[] } | null>(null);
   const [conversationCopied, setConversationCopied] = useState(false);
@@ -196,12 +192,8 @@ export function AiChat({
     </div>
   );
 
-  const padding = isCompact ? "p-2" : "py-4 pl-10 pr-10";
-  const messageGap = isCompact ? "space-y-2" : "space-y-1";
-
   return (
     <AiChatProvider
-      variant={variant}
       assistantName={displayName}
       assistantAvatar={assistantAvatar}
       userAvatar={userAvatar}
@@ -218,15 +210,11 @@ export function AiChat({
       onEditMessage={onEditMessage}
     >
       <div
-        className={
-          isEmbedded
-            ? "flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground"
-            : "flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground overflow-hidden"
-        }
+        className="flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground overflow-hidden"
         data-slot="ai-chat"
       >
         {renderHeader ??
-          (title && !isCompact && !isEmbedded && (
+          (title && (
             <div className="relative z-10 py-3 px-4 flex items-center justify-between gap-2 bg-background">
               <div className="flex items-center gap-1.5 min-w-0">
                 <AutopilotIcon
@@ -349,9 +337,9 @@ export function AiChat({
               aria-live="polite"
               aria-atomic="false"
               aria-busy={isLoading || isLatestResponseAnimating}
-              className={`h-full overflow-y-auto ${padding}`}
+              className="h-full overflow-y-auto py-4 pl-10 pr-10"
             >
-              <div ref={contentRef} className={messageGap}>
+              <div ref={contentRef} className="space-y-1">
                 {children}
 
                 {latestChoices && !isLoading && !isLatestResponseAnimating && (
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index 76558ee40..c120ded7e 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -1,7 +1,5 @@
 export type { ChoiceOption, ToolResultChoices } from "./utils/ai-chat-utils";
 
-export type AiChatVariant = "default" | "compact" | "embedded";
-
 export type MessageFeedbackType = "up" | "down";
 
 export interface MessageAction {
@@ -18,8 +16,6 @@ export interface MessageAction {
 }
 
 export interface AiChatConfig {
-  /** Layout variant — controls spacing, chrome, and borders */
-  variant: AiChatVariant;
   /** Display name for the assistant */
   assistantName: string;
   /** Custom avatar for the assistant (ReactNode) */
diff --git a/apps/apollo-vertex/templates/AiChatTemplate.tsx b/apps/apollo-vertex/templates/AiChatTemplate.tsx
index 042d7e47c..fca0a6109 100644
--- a/apps/apollo-vertex/templates/AiChatTemplate.tsx
+++ b/apps/apollo-vertex/templates/AiChatTemplate.tsx
@@ -34,7 +34,7 @@ function AiChatWithConnection({
   });
 
   return (
-    <div className="flex flex-col gap-4 h-full">
+    <div className="flex flex-col gap-4 h-full min-h-0">
       <div className="flex items-center justify-end gap-4 pt-2 flex-shrink-0">
         <RadioGroup
           value={mode}
@@ -64,7 +64,7 @@ function AiChatWithConnection({
         </RadioGroup>
       </div>
 
-      <div className="flex-1 min-h-[400px]">
+      <div className="flex-1 min-h-0 overflow-hidden">
         {mode === "agenthub" ? (
           <AgentHubChat accessToken={accessToken} orgTenant={orgTenant} />
         ) : (
@@ -78,9 +78,9 @@ function AiChatWithConnection({
   );
 }
 
-export function AiChatTemplate() {
+export function AiChatTemplate({ className }: { className?: string }) {
   return (
-    <div className="h-full min-h-[600px] flex w-full flex-col justify-center">
+    <div className={className ?? "h-[600px] flex w-full flex-col"}>
       <QueryClientProvider client={queryClient}>
         <ShellAuthProvider
           clientId={AICHAT_CLIENT_ID}
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
index d69c4cb17..d3b73a33d 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatLoginGate.tsx
@@ -252,8 +252,8 @@ export function AiChatLoginGate({ children }: AiChatLoginGateProps) {
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center justify-end gap-2">
+    <div className="flex flex-col gap-2 h-full">
+      <div className="flex-shrink-0 flex items-center justify-end gap-2">
         <span className="flex items-center gap-1 text-sm text-muted-foreground">
           {user && (
             <>

From 1352d7b6c60a8b0f97de02efb03646cf649b5c4c Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 13:25:38 -0400
Subject: [PATCH 19/35] chore(apollo-vertex): Line-height thinking state

---
 .../app/vertex-components/ai-chat/preview/thinking-demo.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
index a3f720f63..12041faa1 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/thinking-demo.tsx
@@ -12,7 +12,7 @@ const LABEL_SLIDE = 6;
 const shimmerStyle = {
   display: "inline-block",
   whiteSpace: "nowrap",
-  lineHeight: 1,
+  lineHeight: 1.3,
   fontSize: "14px",
   fontWeight: 500,
   backgroundImage:

From 7ca102d793053cc12d3c1070c987688abf973422 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 14:10:40 -0400
Subject: [PATCH 20/35] chore(apollo-vertex): label change

---
 .../app/_components/preview-full-screen.tsx            | 10 ++++------
 .../app/vertex-components/ai-chat/preview/page.tsx     |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/apollo-vertex/app/_components/preview-full-screen.tsx b/apps/apollo-vertex/app/_components/preview-full-screen.tsx
index a20ea3545..cfdcdabad 100644
--- a/apps/apollo-vertex/app/_components/preview-full-screen.tsx
+++ b/apps/apollo-vertex/app/_components/preview-full-screen.tsx
@@ -2,7 +2,6 @@
 
 import { Maximize2, Minimize2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
 import {
   Dialog,
@@ -22,7 +21,6 @@ export function PreviewFullScreen({
   title: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const { t } = useTranslation();
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -38,8 +36,8 @@ export function PreviewFullScreen({
             variant="outline"
             size="icon-sm"
             className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm"
-            aria-label={t("enter_full_screen")}
-            title={t("enter_full_screen")}
+            aria-label="Enter full screen"
+            title="Enter full screen"
           >
             <Maximize2 className="size-4" />
           </Button>
@@ -53,8 +51,8 @@ export function PreviewFullScreen({
             variant="outline"
             size="icon-sm"
             className="absolute top-4 right-4 z-20"
-            aria-label={t("exit_full_screen")}
-            title={t("exit_full_screen")}
+            aria-label="Exit full screen"
+            title="Exit full screen"
           >
             <Minimize2 className="size-4" />
           </Button>
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index cea446281..af3ab703b 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -326,7 +326,7 @@ export default function AiChatPreviewPage() {
 
           <PreviewCard className="p-0">
             <h3 className="text-sm font-semibold text-muted-foreground px-6 pt-6 uppercase tracking-wide">
-              {"AiChatInput (with text + clear)"}
+              {"AiChatInput (with text + attachment)"}
             </h3>
             <AiChatInput
               value="How do I install Apollo components?"

From 143379f3795c74e61d5da92b5f39c45a2e6a0f22 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 14:59:59 -0400
Subject: [PATCH 21/35] chore(apollo-vertex): AI Chat UX polish and preview
 cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove compact/embedded variants — consolidate to single default
- Fix empty-state alignment (header/input both px-4, no double-padding)
- Wire onFeedback through context with messageId bridging
- Fix user message actions visibility (isLatest not role-gated)
- Fix Autopilot header icon (AutopilotGradientIcon)
- Export MessageSource/MessageAttachment from types
- Add fullscreen expand to preview cards (Dialog pattern)
- Add Message Actions and Edit Mode sections to preview
- Fix 'Thinking...' descender clipping (lineHeight 1→1.3)
- Fix dark code block bg (github-dark-dimmed, transparent bg)
- Fix input button alignment (items-end, pb-[8px])
- Add Components nav item under Patterns > AI Chat
- Fix lint: no-undefined, no-array-callback-reference, max-lines

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ai-chat/preview/page.tsx                  | 68 +++++++++++++-
 .../ai-chat/components/ai-chat-markdown.tsx   |  4 +-
 .../components/ai-chat-message-actions.tsx    |  2 +-
 .../ai-chat/components/ai-chat-message.tsx    |  9 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 89 ++++++++++---------
 apps/apollo-vertex/registry/ai-chat/types.ts  |  3 +
 6 files changed, 126 insertions(+), 49 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index af3ab703b..4a277d667 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -1,3 +1,4 @@
+// oxlint-disable eslint/max-lines -- preview page documents many visual states
 "use client";
 
 import { Maximize2, Minimize2 } from "lucide-react";
@@ -8,6 +9,7 @@ import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-st
 import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input";
 import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
+import { AiChatMessageActions } from "@/registry/ai-chat/components/ai-chat-message-actions";
 import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
 import { Button } from "@/registry/button/button";
 import {
@@ -179,8 +181,10 @@ export default function AiChatPreviewPage() {
             showTimestamps
             showMessageActions
             onEditMessage={noop}
+            onFeedback={noop}
+            onRegenerate={noop}
           >
-            {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
+            {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))}
           </AiChat>
         </PreviewCard>
       </section>
@@ -279,7 +283,7 @@ export default function AiChatPreviewPage() {
               )
             }
           >
-            {MOCK_MESSAGES_BASIC.map(renderBasicMsg)}
+            {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))}
           </AiChat>
         </PreviewCard>
       </section>
@@ -306,7 +310,65 @@ export default function AiChatPreviewPage() {
         </PreviewCard>
       </section>
 
-      {/* ── 9. Isolated Sub-Components ────────────────────── */}
+      {/* ── 9. Message Actions ─────────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Message Actions"
+          description="Hover action toolbar — copy, thumbs up/down, regenerate (assistant) and edit (user)."
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"Assistant actions (always visible)"}
+            </h3>
+            <AiChatMessageActions
+              content="This is an assistant response."
+              messageRole="assistant"
+              isLatest
+              showCopy
+              onFeedback={noop}
+              onRegenerate={noop}
+            />
+          </PreviewCard>
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"User actions (always visible)"}
+            </h3>
+            <AiChatMessageActions
+              content="This is a user message."
+              messageRole="user"
+              isLatest
+              showCopy
+              onEdit={noop}
+            />
+          </PreviewCard>
+        </div>
+      </section>
+
+      {/* ── 10. Edit Mode ──────────────────────────────────── */}
+      <section>
+        <SectionHeader
+          title="Edit Mode"
+          description="Inline edit flow — click the edit icon on a user message to revise and re-run."
+        />
+        <PreviewCard className="h-[400px]" title="Edit Mode">
+          <AiChat
+            messages={MOCK_MESSAGES_BASIC}
+            isLoading={false}
+            onSendMessage={noop}
+            onStop={noop}
+            title="Autopilot"
+            showMessageActions
+            onEditMessage={noop}
+            onRegenerate={noop}
+            onFeedback={noop}
+          >
+            {MOCK_MESSAGES_BASIC.map((msg) => renderBasicMsg(msg))}
+          </AiChat>
+        </PreviewCard>
+      </section>
+
+      {/* ── 11. Isolated Sub-Components ────────────────────── */}
       <section>
         <SectionHeader
           title="Isolated Sub-Components"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index 8317aeee7..bbd695466 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -7,7 +7,7 @@ import { AiChatCodeBlock } from "./ai-chat-code-block";
 
 type NodeProps = { children?: ReactNode };
 type AnchorProps = { children?: ReactNode; href?: string };
-type ImageProps = { src?: string; alt?: string; title?: string };
+type ImageProps = { src?: string | Blob; alt?: string; title?: string };
 
 function extractCodeProps(props: NodeProps & { className?: string }) {
   const { className, children } = props;
@@ -67,7 +67,7 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   ),
   img: ({ src, alt, title }: ImageProps) => (
     <img
-      src={src}
+      src={typeof src === "string" ? src : undefined}
       alt={alt ?? ""}
       title={title}
       loading="lazy"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
index 56a0e4269..fd34ccf87 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -59,7 +59,7 @@ export function AiChatMessageActions({
   // (older assistant messages, all user messages) reveals on hover/focus
   // for keyboard a11y.
   const visibilityClass =
-    messageRole === "assistant" && isLatest
+    isLatest
       ? "opacity-100"
       : "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100";
 
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index 038b78db1..eaa91e489 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -224,7 +224,7 @@ export function AiChatMessage({
               content={displayContent}
               messageRole="user"
               showCopy={config.showCopyButton}
-              onEdit={config.onEditMessage ? () => setIsEditing(true) : undefined}
+              {...(config.onEditMessage ? { onEdit: () => setIsEditing(true) } : {})}
             />
           )}
         </div>
@@ -300,7 +300,12 @@ export function AiChatMessage({
                 messageRole="assistant"
                 isLatest={isLatestAssistant}
                 showCopy={config.showCopyButton}
-                onFeedback={onFeedback}
+                {...(onFeedback ?? config.onFeedback
+                  ? {
+                      onFeedback:
+                        onFeedback ?? ((type) => config.onFeedback?.(message.id, type)),
+                    }
+                  : {})}
                 onRegenerate={onRegenerate ?? config.onRegenerate}
               />
             </motion.div>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 4854a12c4..f310a7eb9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -1,3 +1,4 @@
+// oxlint-disable eslint/max-lines -- composite orchestration component; split would add indirection without clarity
 "use client";
 
 import type { TextPart, UIMessage } from "@tanstack/ai-client";
@@ -27,7 +28,7 @@ import {
   DropdownMenuTrigger,
 } from "@/registry/dropdown-menu/dropdown-menu";
 import { useStickyScroll } from "../hooks/use-sticky-scroll";
-import type { ChoiceOption } from "../types";
+import type { ChoiceOption, MessageFeedbackType } from "../types";
 import {
   findActiveChoicesMessageIds,
   findLatestChoices,
@@ -36,7 +37,7 @@ import { AiChatInput, type AiChatInputHandle } from "./ai-chat-input";
 import { AiChatLoading } from "./ai-chat-loading";
 import { AiChatProvider } from "./ai-chat-provider";
 import { AiChatSuggestions } from "./ai-chat-suggestions";
-import { AutopilotIcon } from "./icons/autopilot";
+import { AutopilotGradientIcon } from "./icons/autopilot-gradient";
 
 const RETRY_LABEL = "Retry";
 
@@ -48,6 +49,8 @@ export interface AiChatProps {
   onClearChat?: () => void;
   onChoiceSelect?: (option: ChoiceOption) => void;
   onRetry?: () => void;
+  /** Callback when the user gives thumbs up/down feedback on an assistant message. */
+  onFeedback?: (messageId: string, type: MessageFeedbackType) => void;
   /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
   onRegenerate?: () => void;
   /** Callback when the user saves an edited user message. Receives the message ID and new content. */
@@ -85,6 +88,7 @@ export function AiChat({
   onClearChat,
   onChoiceSelect,
   onRetry,
+  onFeedback,
   onRegenerate,
   onEditMessage,
   children,
@@ -206,6 +210,7 @@ export function AiChat({
       typewriterCps={typewriterCps}
       isLatestResponseAnimating={isLatestResponseAnimating}
       setIsLatestResponseAnimating={setIsLatestResponseAnimating}
+      onFeedback={onFeedback}
       onRegenerate={onRegenerate}
       onEditMessage={onEditMessage}
     >
@@ -217,8 +222,9 @@ export function AiChat({
           (title && (
             <div className="relative z-10 py-3 px-4 flex items-center justify-between gap-2 bg-background">
               <div className="flex items-center gap-1.5 min-w-0">
-                <AutopilotIcon
-                  className="size-[21px] text-[#6C5AEF] flex-shrink-0"
+                <AutopilotGradientIcon
+                  size={21}
+                  className="flex-shrink-0"
                   aria-hidden="true"
                 />
                 <span className="text-sm font-bold tracking-tight bg-clip-text text-transparent truncate pt-[2px] [background-image:linear-gradient(97.73deg,#5D4ED0_8.79%,#1076A0_91.48%)] dark:[background-image:linear-gradient(97.73deg,#9485F5_8.79%,#69C7DD_91.48%)]">
@@ -232,7 +238,7 @@ export function AiChat({
                       <button
                         type="button"
                         className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors flex-shrink-0"
-                        aria-label={t("more_options")}
+                        aria-label="More options"
                       >
                         <MoreHorizontal
                           className="size-4 text-ai-chat-muted-foreground"
@@ -276,46 +282,47 @@ export function AiChat({
 
         {messages.length === 0 ? (
           <div className="flex-1 flex flex-col min-h-0">
+            {/* Greeting — centered in the available space above the input */}
             <div
-              className="flex-1 flex flex-col items-center px-4"
-              style={{ justifyContent: "center", paddingBottom: "10%" }}
+              className="flex-1 flex flex-col items-center justify-center px-4"
+              style={{ paddingBottom: "10%" }}
             >
-              <div className="w-full max-w-[680px]">
-                <div className="text-center mb-6">
-                  {emptyState ?? defaultEmptyState}
-                </div>
-                <AiChatInput
-                  ref={inputRef}
-                  value={input}
-                  onChange={setInput}
-                  onSubmit={(files) => handleSubmit(files)}
-                  onStop={onStop}
-                  isLoading={isLoading}
-                  placeholder={placeholder}
-                  hasMessages={false}
-                />
-                {suggestions && suggestions.length > 0 && (
-                  <div className="mt-4 flex flex-wrap justify-center gap-2">
-                    {suggestions.map((suggestion) => (
-                      <button
-                        key={suggestion}
-                        type="button"
-                        className="py-2 px-4 text-xs font-semibold rounded-full border border-input bg-background text-foreground hover:bg-muted transition-colors"
-                        onClick={() => {
-                          if (onSuggestionClick) {
-                            onSuggestionClick(suggestion);
-                          } else {
-                            onSendMessage(suggestion);
-                          }
-                        }}
-                      >
-                        {suggestion}
-                      </button>
-                    ))}
-                  </div>
-                )}
+              <div className="w-full max-w-[680px] text-center">
+                {emptyState ?? defaultEmptyState}
               </div>
             </div>
+            {/* Input + suggestions sit outside the px-4 wrapper so AiChatInput's
+                own px-4 gives it the same indent as the header */}
+            <AiChatInput
+              ref={inputRef}
+              value={input}
+              onChange={setInput}
+              onSubmit={(files) => handleSubmit(files)}
+              onStop={onStop}
+              isLoading={isLoading}
+              placeholder={placeholder}
+              hasMessages={false}
+            />
+            {suggestions && suggestions.length > 0 && (
+              <div className="mt-2 px-4 flex flex-wrap justify-center gap-2">
+                {suggestions.map((suggestion) => (
+                  <button
+                    key={suggestion}
+                    type="button"
+                    className="py-2 px-4 text-xs font-semibold rounded-full border border-input bg-background text-foreground hover:bg-muted transition-colors"
+                    onClick={() => {
+                      if (onSuggestionClick) {
+                        onSuggestionClick(suggestion);
+                      } else {
+                        onSendMessage(suggestion);
+                      }
+                    }}
+                  >
+                    {suggestion}
+                  </button>
+                ))}
+              </div>
+            )}
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
               {"AI-generated responses should be reviewed for accuracy."}
             </div>
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index c120ded7e..98fe27be6 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -1,3 +1,4 @@
+export type { MessageAttachment, MessageSource } from "./components/ai-chat-message";
 export type { ChoiceOption, ToolResultChoices } from "./utils/ai-chat-utils";
 
 export type MessageFeedbackType = "up" | "down";
@@ -40,6 +41,8 @@ export interface AiChatConfig {
   isLatestResponseAnimating: boolean;
   /** Setter for `isLatestResponseAnimating` — called by the latest assistant message component as its typewriter state changes. */
   setIsLatestResponseAnimating: (animating: boolean) => void;
+  /** Callback when the user gives thumbs up/down on an assistant message. */
+  onFeedback?: (messageId: string, type: MessageFeedbackType) => void;
   /** Callback to regenerate the last assistant response. When provided, the "Try again" button appears in assistant message actions. */
   onRegenerate?: () => void;
   /** Callback when the user saves an edited user message. Receives the message ID and new content. */

From 7ea440bddef9b8ede7066d950c03bb5afe2acd26 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 15:15:33 -0400
Subject: [PATCH 22/35] chore(apollo-vertex): cleanup

---
 apps/apollo-vertex/next-env.d.ts              |  2 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 76 +++++++++----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/apps/apollo-vertex/next-env.d.ts
+++ b/apps/apollo-vertex/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index f310a7eb9..82b274266 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -281,50 +281,44 @@ export function AiChat({
           ))}
 
         {messages.length === 0 ? (
-          <div className="flex-1 flex flex-col min-h-0">
-            {/* Greeting — centered in the available space above the input */}
-            <div
-              className="flex-1 flex flex-col items-center justify-center px-4"
-              style={{ paddingBottom: "10%" }}
-            >
-              <div className="w-full max-w-[680px] text-center">
+          <div className="flex-1 flex flex-col items-center justify-center min-h-0">
+            <div className="w-full">
+              <div className="px-4 text-center mb-7">
                 {emptyState ?? defaultEmptyState}
               </div>
-            </div>
-            {/* Input + suggestions sit outside the px-4 wrapper so AiChatInput's
-                own px-4 gives it the same indent as the header */}
-            <AiChatInput
-              ref={inputRef}
-              value={input}
-              onChange={setInput}
-              onSubmit={(files) => handleSubmit(files)}
-              onStop={onStop}
-              isLoading={isLoading}
-              placeholder={placeholder}
-              hasMessages={false}
-            />
-            {suggestions && suggestions.length > 0 && (
-              <div className="mt-2 px-4 flex flex-wrap justify-center gap-2">
-                {suggestions.map((suggestion) => (
-                  <button
-                    key={suggestion}
-                    type="button"
-                    className="py-2 px-4 text-xs font-semibold rounded-full border border-input bg-background text-foreground hover:bg-muted transition-colors"
-                    onClick={() => {
-                      if (onSuggestionClick) {
-                        onSuggestionClick(suggestion);
-                      } else {
-                        onSendMessage(suggestion);
-                      }
-                    }}
-                  >
-                    {suggestion}
-                  </button>
-                ))}
+              <AiChatInput
+                ref={inputRef}
+                value={input}
+                onChange={setInput}
+                onSubmit={(files) => handleSubmit(files)}
+                onStop={onStop}
+                isLoading={isLoading}
+                placeholder={placeholder}
+                hasMessages={false}
+              />
+              {suggestions && suggestions.length > 0 && (
+                <div className="mt-2 px-4 flex flex-wrap justify-center gap-2">
+                  {suggestions.map((suggestion) => (
+                    <button
+                      key={suggestion}
+                      type="button"
+                      className="py-2 px-4 text-xs font-semibold rounded-full border border-input bg-background text-foreground hover:bg-muted transition-colors"
+                      onClick={() => {
+                        if (onSuggestionClick) {
+                          onSuggestionClick(suggestion);
+                        } else {
+                          onSendMessage(suggestion);
+                        }
+                      }}
+                    >
+                      {suggestion}
+                    </button>
+                  ))}
+                </div>
+              )}
+              <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
+                {"AI-generated responses should be reviewed for accuracy."}
               </div>
-            )}
-            <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
-              {"AI-generated responses should be reviewed for accuracy."}
             </div>
           </div>
         ) : (

From 80beffcdb7bcc02548127a3391eadb7db7965f24 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 15:37:35 -0400
Subject: [PATCH 23/35] chore(apollo-vertex): spacing cleanup

---
 apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 82b274266..15d4672dc 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -297,7 +297,7 @@ export function AiChat({
                 hasMessages={false}
               />
               {suggestions && suggestions.length > 0 && (
-                <div className="mt-2 px-4 flex flex-wrap justify-center gap-2">
+                <div className="mt-4 px-4 flex flex-wrap justify-center gap-2">
                   {suggestions.map((suggestion) => (
                     <button
                       key={suggestion}
@@ -316,9 +316,6 @@ export function AiChat({
                   ))}
                 </div>
               )}
-              <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
-                {"AI-generated responses should be reviewed for accuracy."}
-              </div>
             </div>
           </div>
         ) : (

From 62d4d166f00da472af1ab207096efe235e37ae2c Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Tue, 14 Apr 2026 15:45:01 -0400
Subject: [PATCH 24/35] chore(apollo-vertex): Small update

---
 .../apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index 2d3cb4821..a26aa22a9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -71,7 +71,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     useImperativeHandle(ref, () => ({
       focus: () => textareaRef.current?.focus(),
     }));
-    const displayPlaceholder = placeholder ?? "Start with a task or goal\u2026";
+    const displayPlaceholder = placeholder ?? "Start with a task or goal";
 
     const adjustHeight = () => {
       if (!hasMessages) return;

From 785be511d5790eafc9c92272bf4424eaa7ace572 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 15 Apr 2026 16:10:35 -0400
Subject: [PATCH 25/35] chore(apollo-vertex): recommended button styling

---
 apps/apollo-vertex/next-env.d.ts                     |  2 +-
 .../ai-chat/components/ai-chat-suggestions.tsx       | 12 +-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/apollo-vertex/next-env.d.ts
+++ b/apps/apollo-vertex/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index fad9ea0f9..3cb834c2d 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -56,17 +56,7 @@ export function AiChatSuggestions({
             type="button"
             variants={buttonVariants}
             whileHover={{ scale: 1.02 }}
-            className={cn(
-              "h-auto py-2 px-4 text-left max-w-full rounded-full text-xs font-semibold transition-colors",
-              option.recommended
-                ? "text-white border-0"
-                : "border border-input bg-background text-foreground hover:bg-muted",
-            )}
-            style={
-              option.recommended
-                ? { background: "var(--ai-gradient-strong)" }
-                : {}
-            }
+            className="h-auto py-2 px-4 text-left max-w-full rounded-full text-xs font-semibold transition-colors border border-input bg-background text-foreground hover:bg-muted"
             onClick={() => onSelect(option)}
           >
             <span className="truncate">{option.label}</span>

From 44abb38c1227d1cb7fdeadec89cb43a90087ba1c Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 15 Apr 2026 16:18:03 -0400
Subject: [PATCH 26/35] chore(apollo-vertex): Paste image into input

---
 .../ai-chat/components/ai-chat-input.tsx       | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index a26aa22a9..e8ac3364d 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -2,6 +2,7 @@
 
 import { ArrowUp, CircleStop, FileText, Plus, X } from "lucide-react";
 import {
+  type ClipboardEvent,
   type FocusEvent,
   type FormEvent,
   type KeyboardEvent,
@@ -128,6 +129,21 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       setPendingFiles((prev) => prev.filter((_, i) => i !== index));
     };
 
+    const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+      const imageFiles: PendingFile[] = Array.from(e.clipboardData.items)
+        .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
+        .flatMap((item) => {
+          const file = item.getAsFile();
+          if (!file) return [];
+          const name = file.name !== "" ? file.name : `pasted-image.${file.type.split("/")[1]}`;
+          return [{ name, size: file.size, type: file.type, file }];
+        });
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+        setPendingFiles((prev) => [...prev, ...imageFiles]);
+      }
+    };
+
     const focusStyles = {
       onFocusCapture: (e: FocusEvent<HTMLFormElement>) => {
         const el = e.currentTarget;
@@ -289,6 +305,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
                   value={value}
                   onChange={(e) => handleChange(e.target.value)}
                   onKeyDown={handleKeyDown}
+                  onPaste={handlePaste}
                   placeholder={displayPlaceholder}
                   aria-label={displayPlaceholder}
                   className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] pt-[12px] pb-[8px] leading-[20px]"
@@ -310,6 +327,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
                 value={value}
                 onChange={(e) => handleChange(e.target.value)}
                 onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
                 placeholder={displayPlaceholder}
                 aria-label={displayPlaceholder}
                 className="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[80px] px-[22px] pt-5 pb-2 leading-relaxed"

From b0481fb1b30d347370d37bf1839cf5ec0991ea43 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 15 Apr 2026 16:45:17 -0400
Subject: [PATCH 27/35] chore(apollo-vertex): Context menu

---
 .../ai-chat/preview/page.tsx                  | 10 ++--
 .../ai-chat/components/ai-chat-input.tsx      | 27 +++++++++-
 .../ai-chat/components/ai-chat-message.tsx    | 38 +++++++++++++-
 .../components/ai-chat-selection-menu.tsx     | 51 +++++++++++++++++++
 .../registry/ai-chat/components/ai-chat.tsx   | 16 +++++-
 apps/apollo-vertex/registry/ai-chat/types.ts  |  2 +
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |  1 +
 .../ai-chat/AiChatConversationalAgentMode.tsx |  1 +
 8 files changed, 137 insertions(+), 9 deletions(-)
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 4a277d667..c4470e266 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -180,6 +180,7 @@ export default function AiChatPreviewPage() {
             title="Autopilot"
             showTimestamps
             showMessageActions
+            enableTextSelection
             onEditMessage={noop}
             onFeedback={noop}
             onRegenerate={noop}
@@ -292,7 +293,7 @@ export default function AiChatPreviewPage() {
       <section>
         <SectionHeader
           title="Suggestion Buttons"
-          description="Choice buttons with recommended badge and hover animation."
+          description="Label and buttons"
         />
         <PreviewCard className="h-[400px]" title="Suggestion Buttons">
           <AiChat
@@ -314,12 +315,12 @@ export default function AiChatPreviewPage() {
       <section>
         <SectionHeader
           title="Message Actions"
-          description="Hover action toolbar — copy, thumbs up/down, regenerate (assistant) and edit (user)."
+          description="Copy, thumbs up/down, regenerate (assistant) and edit (user)."
         />
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <PreviewCard className="p-6">
             <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
-              {"Assistant actions (always visible)"}
+              {"Assistant actions"}
             </h3>
             <AiChatMessageActions
               content="This is an assistant response."
@@ -332,7 +333,7 @@ export default function AiChatPreviewPage() {
           </PreviewCard>
           <PreviewCard className="p-6">
             <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
-              {"User actions (always visible)"}
+              {"User actions"}
             </h3>
             <AiChatMessageActions
               content="This is a user message."
@@ -397,6 +398,7 @@ export default function AiChatPreviewPage() {
               onStop={noop}
               isLoading={false}
               hasMessages
+              initialFiles={[{ name: "design-spec.png", size: 84320, type: "image/png", file: new File([], "design-spec.png", { type: "image/png" }) }]}
             />
           </PreviewCard>
 
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index e8ac3364d..d1637567a 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUp, CircleStop, FileText, Plus, X } from "lucide-react";
+import { ArrowUp, CircleStop, FileText, MessageSquareText, Plus, X } from "lucide-react";
 import {
   type ClipboardEvent,
   type FocusEvent,
@@ -43,6 +43,9 @@ interface AiChatInputProps {
   placeholder?: string;
   hasMessages?: boolean;
   maxLength?: number;
+  initialFiles?: PendingFile[];
+  quotedText?: string | null;
+  onClearQuote?: () => void;
 }
 
 export interface AiChatInputHandle {
@@ -61,13 +64,16 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       placeholder,
       hasMessages = false,
       maxLength,
+      initialFiles = [],
+      quotedText,
+      onClearQuote,
     }: AiChatInputProps,
     ref: Ref<AiChatInputHandle>,
   ) {
     const { t } = useTranslation();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const glowRef = useRef<HTMLDivElement>(null);
-    const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
+    const [pendingFiles, setPendingFiles] = useState<PendingFile[]>(initialFiles);
 
     useImperativeHandle(ref, () => ({
       focus: () => textareaRef.current?.focus(),
@@ -168,6 +174,21 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       },
     };
 
+    const quoteChip = quotedText && (
+      <div className="flex items-start gap-2 mx-[10px] mt-2 px-2 py-1.5 rounded-md bg-muted/50 text-xs text-muted-foreground">
+        <MessageSquareText className="size-3 flex-shrink-0 mt-0.5 opacity-60" aria-hidden="true" />
+        <span className="flex-1 line-clamp-2 leading-relaxed">{quotedText}</span>
+        <button
+          type="button"
+          onClick={onClearQuote}
+          className="flex-shrink-0 size-4 rounded-sm flex items-center justify-center hover:bg-muted-foreground/20 mt-0.5"
+          aria-label="Remove quote"
+        >
+          <X className="size-2.5" aria-hidden="true" />
+        </button>
+      </div>
+    );
+
     const fileChips = pendingFiles.length > 0 && (
       <div className="flex flex-wrap gap-1.5 px-[10px] pt-2">
         {pendingFiles.map((f, i) => (
@@ -297,6 +318,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
               className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
               {...focusStyles}
             >
+              {quoteChip}
               {fileChips}
               <div className="flex items-end gap-2 pl-[8px] pr-[8px] pt-[4px] pb-[8px]">
                 {plusMenu}
@@ -321,6 +343,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
               className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
               {...focusStyles}
             >
+              {quoteChip}
               {fileChips}
               <textarea
                 ref={textareaRef}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index eaa91e489..f0b86e6eb 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -10,6 +10,7 @@ import type { MessageFeedbackType } from "../types";
 import { messageHasChoices } from "../utils/ai-chat-utils";
 import { AiChatMarkdown } from "./ai-chat-markdown";
 import { AiChatMessageActions } from "./ai-chat-message-actions";
+import { AiChatSelectionMenu } from "./ai-chat-selection-menu";
 import { useAiChat } from "./ai-chat-provider";
 
 // Quick, subtle entrance — fade + 8px slide up. Quartic ease-out for a soft settle.
@@ -75,6 +76,26 @@ export function AiChatMessage({
   const [editValue, setEditValue] = useState(displayContent);
   const editTextareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const [selectionMenu, setSelectionMenu] = useState<{ x: number; y: number; text: string } | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseUp = () => {
+    if (isUser || !config.onQuoteSelect) return;
+    const selection = window.getSelection();
+    const text = selection?.toString().trim();
+    if (!text || !selection || selection.rangeCount === 0) {
+      setSelectionMenu(null);
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    setSelectionMenu({
+      x: rect.left + rect.width / 2,
+      y: rect.top,
+      text,
+    });
+  };
+
   // Keep editValue in sync if message content changes externally (e.g. regenerate)
   useEffect(() => {
     if (!isEditing) setEditValue(displayContent);
@@ -240,13 +261,27 @@ export function AiChatMessage({
   const isInActiveChoicesTurn = config.activeChoicesMessageIds.has(message.id);
 
   return (
+    <>
+      {selectionMenu && (
+        <AiChatSelectionMenu
+          x={selectionMenu.x}
+          y={selectionMenu.y}
+          onAsk={() => {
+            config.onQuoteSelect?.(selectionMenu.text);
+            setSelectionMenu(null);
+            window.getSelection()?.removeAllRanges();
+          }}
+          onDismiss={() => setSelectionMenu(null)}
+        />
+      )}
     <motion.div
       className="flex w-full justify-start"
       initial={ENTRANCE_INITIAL}
       animate={ENTRANCE_ANIMATE}
       transition={ENTRANCE_TRANSITION}
+      onMouseUp={handleMouseUp}
     >
-      <div className="group/message flex flex-col gap-3 max-w-[85%]">
+      <div ref={contentRef} className="group/message flex flex-col gap-3 max-w-[85%]">
         {displayContent && !messageHasChoices(message) && (
           isResponseFullyRevealed ? (
             <AiChatMarkdown>{displayedText}</AiChatMarkdown>
@@ -312,5 +347,6 @@ export function AiChatMessage({
           )}
       </div>
     </motion.div>
+    </>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx
new file mode 100644
index 000000000..6269a3108
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { AutopilotGradientIcon } from "./icons/autopilot-gradient";
+
+interface AiChatSelectionMenuProps {
+  x: number;
+  y: number;
+  onAsk: () => void;
+  onDismiss: () => void;
+}
+
+export function AiChatSelectionMenu({
+  x,
+  y,
+  onAsk,
+  onDismiss,
+}: AiChatSelectionMenuProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  // Dismiss on outside mousedown
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onDismiss();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onDismiss]);
+
+  return createPortal(
+    <button
+      ref={ref}
+      type="button"
+      onMouseDown={(e) => {
+        // Prevent the mousedown from clearing the selection before onAsk fires
+        e.preventDefault();
+      }}
+      onClick={onAsk}
+      className="fixed z-50 flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-background border border-border shadow-md text-xs font-semibold text-foreground hover:bg-muted transition-colors"
+      style={{ left: x, top: y, transform: "translate(-50%, -100%) translateY(-8px)" }}
+      aria-label="Ask Autopilot about selected text"
+    >
+      <AutopilotGradientIcon size={14} aria-hidden="true" />
+      {"Ask Autopilot"}
+    </button>,
+    document.body,
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 15d4672dc..73d2c9e4c 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -78,6 +78,8 @@ export interface AiChatProps {
   onValueChange?: (value: string) => void;
   /** Characters per second for the typewriter reveal on assistant messages. Set to 0 to disable (text appears instantly). Default: 40 */
   typewriterCps?: number;
+  /** When true, selecting text in an assistant message shows an "Ask Autopilot" button that quotes the selection into the input. */
+  enableTextSelection?: boolean;
 }
 
 export function AiChat({
@@ -109,11 +111,13 @@ export function AiChat({
   value: controlledValue,
   onValueChange,
   typewriterCps = 75,
+  enableTextSelection = false,
 }: AiChatProps) {
   const { t } = useTranslation();
   const [internalInput, setInternalInput] = useState("");
   const [isLatestResponseAnimating, setIsLatestResponseAnimating] =
     useState(false);
+  const [quotedText, setQuotedText] = useState<string | null>(null);
   const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
   const inputRef = useRef<AiChatInputHandle>(null);
 
@@ -147,13 +151,18 @@ export function AiChat({
 
   const handleSubmit = (attachments?: File[]) => {
     if (!input.trim()) return;
+    const content = quotedText
+      ? `> ${quotedText}\n\n${input.trim()}`
+      : input.trim();
     if (isLoading) {
-      queuedMessageRef.current = { content: input.trim(), attachments };
+      queuedMessageRef.current = { content, attachments };
       setInput("");
+      setQuotedText(null);
       return;
     }
-    onSendMessage(input.trim(), attachments);
+    onSendMessage(content, attachments);
     setInput("");
+    setQuotedText(null);
     scrollToBottom();
   };
 
@@ -213,6 +222,7 @@ export function AiChat({
       onFeedback={onFeedback}
       onRegenerate={onRegenerate}
       onEditMessage={onEditMessage}
+      {...(enableTextSelection ? { onQuoteSelect: (text) => setQuotedText(text) } : {})}
     >
       <div
         className="flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground overflow-hidden"
@@ -404,6 +414,8 @@ export function AiChat({
               isLoading={isLoading}
               placeholder={placeholder}
               hasMessages
+              quotedText={quotedText}
+              onClearQuote={() => setQuotedText(null)}
             />
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
               {"AI-generated responses should be reviewed for accuracy."}
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index 98fe27be6..b9ef932e6 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -47,4 +47,6 @@ export interface AiChatConfig {
   onRegenerate?: () => void;
   /** Callback when the user saves an edited user message. Receives the message ID and new content. */
   onEditMessage?: (messageId: string, content: string) => void;
+  /** Callback when the user selects text in an assistant message and clicks "Ask Autopilot". */
+  onQuoteSelect?: (text: string) => void;
 }
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index ef28a88a9..5f7b312e1 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -51,6 +51,7 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       onEditMessage={(_id, content) => { void sendMessage(content); }}
       title="Autopilot"
       assistantName={t("assistant")}
+      enableTextSelection
       error={error ?? null}
       emptyState={<AiChatEmptyState title="What are we tackling today?" />}
       suggestions={[
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
index 08ea0c9d6..b96acdd4d 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
@@ -56,6 +56,7 @@ function ConversationalAgentChatInner({
       onRegenerate={reload}
       title={title}
       assistantName={assistantName}
+      enableTextSelection
       error={error ?? null}
     >
       {messages.map((message) => (

From f680522cb50b18efac1736d97e4122de6542853c Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 15 Apr 2026 17:10:01 -0400
Subject: [PATCH 28/35] chore(apollo-vertex): Initial wiring of multi-step

---
 .../ai-chat/components/ai-chat-flow.tsx       | 133 ++++++++++++++++++
 .../components/ai-chat-suggestions.tsx        | 106 +++++++++++++-
 .../registry/ai-chat/components/ai-chat.tsx   |  80 ++++++++++-
 .../registry/ai-chat/examples/choices-tool.ts |  24 +++-
 .../registry/ai-chat/examples/flow-tool.ts    |  54 +++++++
 .../registry/ai-chat/utils/ai-chat-utils.ts   |  52 +++++++
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |  14 +-
 7 files changed, 445 insertions(+), 18 deletions(-)
 create mode 100644 apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
 create mode 100644 apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
new file mode 100644
index 000000000..2eaff249e
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import type { FlowOption, FlowStep, ToolResultFlow } from "../utils/ai-chat-utils";
+
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+interface AiChatFlowProps {
+  flow: ToolResultFlow;
+  onComplete: (answers: { stepId: string; prompt: string; answer: string }[]) => void;
+  onDismiss: () => void;
+}
+
+export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
+  const [stepIndex, setStepIndex] = useState(0);
+  const [answers, setAnswers] = useState<{ stepId: string; prompt: string; answer: string }[]>([]);
+
+  const step = flow.steps[stepIndex] as FlowStep;
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === flow.steps.length - 1;
+  const total = flow.steps.length;
+
+  const handleSelect = (option: FlowOption) => {
+    const answer = option.value ?? option.label;
+    const updated = [
+      ...answers.filter((a) => a.stepId !== step.id),
+      { stepId: step.id, prompt: step.prompt, answer },
+    ];
+    setAnswers(updated);
+
+    if (isLast) {
+      onComplete(updated);
+    } else {
+      setStepIndex((i) => i + 1);
+    }
+  };
+
+  const handleBack = () => {
+    setStepIndex((i) => Math.max(0, i - 1));
+  };
+
+  const handleSkip = () => {
+    const updated = [
+      ...answers.filter((a) => a.stepId !== step.id),
+      { stepId: step.id, prompt: step.prompt, answer: "(skipped)" },
+    ];
+    setAnswers(updated);
+
+    if (isLast) {
+      onComplete(updated);
+    } else {
+      setStepIndex((i) => i + 1);
+    }
+  };
+
+  return (
+    <motion.div
+      className="w-full max-w-sm rounded-xl border border-border bg-background shadow-lg overflow-hidden"
+      initial={{ opacity: 0, y: 12, scale: 0.97 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: 8, scale: 0.97 }}
+      transition={{ duration: 0.25, ease: EASE }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 pt-3 pb-2">
+        <div className="flex items-center gap-2">
+          {!isFirst && (
+            <button
+              type="button"
+              onClick={handleBack}
+              className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground"
+              aria-label="Go back"
+            >
+              <ChevronLeft className="size-4" aria-hidden="true" />
+            </button>
+          )}
+          <span className="text-xs text-muted-foreground">
+            {stepIndex + 1}
+            <span className="opacity-40 mx-1">{"/"}</span>
+            {total}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {step.canSkip && (
+            <button
+              type="button"
+              onClick={handleSkip}
+              className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded-md hover:bg-muted"
+            >
+              {"Skip"}
+              <ChevronRight className="size-3" aria-hidden="true" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground"
+            aria-label="Dismiss"
+          >
+            <X className="size-3.5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      {/* Prompt + options */}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={step.id}
+          initial={{ opacity: 0, x: 16 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -16 }}
+          transition={{ duration: 0.18, ease: EASE }}
+        >
+          <p className="px-4 pb-3 text-sm font-medium text-foreground">{step.prompt}</p>
+          <div className="flex flex-col px-2 pb-3 gap-1">
+            {step.options.map((option) => (
+              <button
+                key={option.id}
+                type="button"
+                className="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors hover:bg-muted text-foreground"
+                onClick={() => handleSelect(option)}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </motion.div>
+  );
+}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index 3cb834c2d..eda68f5a8 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { ChevronLeft, ChevronRight, Loader2, X } from "lucide-react";
 import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-import type { ChoiceOption } from "../types";
+import type { ChoiceOption, ToolResultChoices } from "../types";
 
 const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
 
@@ -14,7 +14,6 @@ const containerVariants = {
     transition: {
       duration: 0.28,
       ease: ENTRANCE_EASE,
-      // Wait until the wrapper has mostly entered before staggering buttons
       delayChildren: 0.18,
       staggerChildren: 0.05,
     },
@@ -34,13 +33,114 @@ interface AiChatSuggestionsProps {
   prompt?: string;
   options: ChoiceOption[];
   onSelect: (option: ChoiceOption) => void;
+  step?: number;
+  totalSteps?: number;
+  canSkip?: boolean;
+  canGoBack?: boolean;
+  isLoading?: boolean;
+  onBack?: () => void;
+  onSkip?: () => void;
+  onDismiss?: () => void;
 }
 
 export function AiChatSuggestions({
   prompt,
   options,
   onSelect,
+  step,
+  totalSteps,
+  canSkip,
+  canGoBack,
+  isLoading = false,
+  onBack,
+  onSkip,
+  onDismiss,
 }: AiChatSuggestionsProps) {
+  const isMultiStep = step !== undefined;
+
+  if (isMultiStep) {
+    return (
+      <motion.div
+        className="mt-4 rounded-xl border border-border bg-background shadow-sm overflow-hidden"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 pt-3 pb-2">
+          <div className="flex items-center gap-2">
+            {isLoading ? (
+              <Loader2 className="size-3.5 animate-spin text-muted-foreground" aria-hidden="true" />
+            ) : (
+              <>
+                {canGoBack && onBack && (
+                  <button
+                    type="button"
+                    onClick={onBack}
+                    className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground"
+                    aria-label="Go back"
+                  >
+                    <ChevronLeft className="size-4" aria-hidden="true" />
+                  </button>
+                )}
+                {totalSteps && (
+                  <span className="text-xs text-muted-foreground">
+                    {step} <span className="opacity-40">/</span> {totalSteps}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            {canSkip && onSkip && (
+              <button
+                type="button"
+                onClick={onSkip}
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded-md hover:bg-muted"
+              >
+                {"Skip"}
+                <ChevronRight className="size-3" aria-hidden="true" />
+              </button>
+            )}
+            {onDismiss && (
+              <button
+                type="button"
+                onClick={onDismiss}
+                className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground"
+                aria-label="Dismiss"
+              >
+                <X className="size-3.5" aria-hidden="true" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Prompt */}
+        {prompt && (
+          <p className="px-4 pb-3 text-sm font-medium text-foreground">{prompt}</p>
+        )}
+
+        {/* Options */}
+        <div className="flex flex-col px-2 pb-3 gap-1">
+          {options.map((option) => (
+            <motion.button
+              key={option.id}
+              type="button"
+              variants={buttonVariants}
+              whileHover={isLoading ? {} : { x: 2 }}
+              disabled={isLoading}
+              className="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors hover:bg-muted text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+              onClick={() => onSelect(option)}
+            >
+              {option.label}
+            </motion.button>
+          ))}
+        </div>
+      </motion.div>
+    );
+  }
+
+  // Single-step: original chip style
   return (
     <motion.div
       className="mt-4 space-y-4"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 73d2c9e4c..0e9d01216 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -32,7 +32,9 @@ import type { ChoiceOption, MessageFeedbackType } from "../types";
 import {
   findActiveChoicesMessageIds,
   findLatestChoices,
+  findLatestFlow,
 } from "../utils/ai-chat-utils";
+import { AiChatFlow } from "./ai-chat-flow";
 import { AiChatInput, type AiChatInputHandle } from "./ai-chat-input";
 import { AiChatLoading } from "./ai-chat-loading";
 import { AiChatProvider } from "./ai-chat-provider";
@@ -118,6 +120,7 @@ export function AiChat({
   const [isLatestResponseAnimating, setIsLatestResponseAnimating] =
     useState(false);
   const [quotedText, setQuotedText] = useState<string | null>(null);
+  const [choiceHistory, setChoiceHistory] = useState<string[]>([]);
   const { scrollRef, contentRef, isStuck, scrollToBottom } = useStickyScroll();
   const inputRef = useRef<AiChatInputHandle>(null);
 
@@ -182,6 +185,9 @@ export function AiChat({
   }, [isLoading]);
 
   const latestChoices = findLatestChoices(messages);
+  const isMultiStep = latestChoices?.step !== undefined;
+  const latestFlow = findLatestFlow(messages);
+  const isFlowActive = latestFlow !== null;
   const activeChoicesMessageIds = findActiveChoicesMessageIds(messages);
   const latestAssistantMessageId =
     messages.findLast((m) => m.role === "assistant")?.id ?? null;
@@ -280,7 +286,7 @@ export function AiChat({
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                       <AlertDialogCancel>{"Cancel"}</AlertDialogCancel>
-                      <AlertDialogAction onClick={onClearChat}>
+                      <AlertDialogAction onClick={() => { onClearChat?.(); setChoiceHistory([]); }}>
                         {"New conversation"}
                       </AlertDialogAction>
                     </AlertDialogFooter>
@@ -338,6 +344,7 @@ export function AiChat({
               }}
               aria-hidden="true"
             />
+            {/* Chat messages — blurred when a multi-step flow is active */}
             <div
               ref={scrollRef}
               role="log"
@@ -345,12 +352,13 @@ export function AiChat({
               aria-live="polite"
               aria-atomic="false"
               aria-busy={isLoading || isLatestResponseAnimating}
-              className="h-full overflow-y-auto py-4 pl-10 pr-10"
+              className={`h-full overflow-y-auto py-4 pl-10 pr-10 transition-[filter] duration-300 ${isMultiStep || isFlowActive ? "blur-[2px] pointer-events-none select-none" : ""}`}
             >
               <div ref={contentRef} className="space-y-1">
                 {children}
 
-                {latestChoices && !isLoading && !isLatestResponseAnimating && (
+                {/* Single-step choices render inline */}
+                {latestChoices && !latestChoices.step && !isLoading && !isLatestResponseAnimating && (
                   <AiChatSuggestions
                     prompt={latestChoices.prompt}
                     options={latestChoices.options}
@@ -364,11 +372,73 @@ export function AiChat({
                   />
                 )}
 
-                {showLoadingIndicator && <AiChatLoading />}
+                {showLoadingIndicator && !isMultiStep && !isFlowActive && <AiChatLoading />}
               </div>
             </div>
 
-            {!isStuck && (
+            {/* Multi-step HUD overlay */}
+            {isMultiStep && latestChoices && (
+              <div className="absolute inset-0 z-20 flex items-center justify-center px-6">
+                <AiChatSuggestions
+                  prompt={latestChoices.prompt}
+                  options={latestChoices.options}
+                  step={latestChoices.step}
+                  totalSteps={latestChoices.totalSteps}
+                  canSkip={latestChoices.canSkip}
+                  canGoBack={latestChoices.canGoBack}
+                  isLoading={isLoading}
+                  onSelect={(option) => {
+                    setChoiceHistory((h) => [...h, option.label]);
+                    if (onChoiceSelect) {
+                      onChoiceSelect(option);
+                    } else {
+                      onSendMessage(option.label);
+                    }
+                  }}
+                  onBack={
+                    latestChoices.canGoBack && choiceHistory.length > 0
+                      ? () => {
+                          const prev = choiceHistory.at(-1);
+                          setChoiceHistory((h) => h.slice(0, -1));
+                          onSendMessage(`Actually, let me revise my previous answer: ${prev}`);
+                        }
+                      : undefined
+                  }
+                  onSkip={
+                    latestChoices.canSkip
+                      ? () => {
+                          setChoiceHistory((h) => [...h, "(skipped)"]);
+                          onSendMessage("Skip this step");
+                        }
+                      : undefined
+                  }
+                  onDismiss={() => {
+                    setChoiceHistory([]);
+                    onSendMessage("Never mind, let's stop here");
+                  }}
+                />
+              </div>
+            )}
+
+            {/* Flow HUD overlay */}
+            {isFlowActive && latestFlow && (
+              <div className="absolute inset-0 z-20 flex items-center justify-center px-6">
+                <AiChatFlow
+                  flow={latestFlow}
+                  onComplete={(answers) => {
+                    const summary = answers
+                      .map((a, i) => `Step ${i + 1} (${a.prompt}): ${a.answer}`)
+                      .join(", ");
+                    onSendMessage(summary);
+                  }}
+                  onDismiss={() => {
+                    onSendMessage("Never mind, let's stop here");
+                  }}
+                />
+              </div>
+            )}
+
+            {!isStuck && !isMultiStep && !isFlowActive && (
               <button
                 type="button"
                 onClick={scrollToBottom}
diff --git a/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
index a9d8ceb90..410681f96 100644
--- a/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
+++ b/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
@@ -17,8 +17,12 @@ const presentChoicesInput = z.object({
   options: z
     .array(choiceOptionSchema)
     .min(2)
-    .max(4)
-    .describe("2 to 4 options for the user to pick from"),
+    .max(6)
+    .describe("2 to 6 options for the user to pick from"),
+  step: z.number().optional().describe("Current step number (1-based) — include when this is part of a multi-step flow"),
+  totalSteps: z.number().optional().describe("Total number of steps in the flow — include alongside step"),
+  canSkip: z.boolean().optional().describe("Show a skip button for this step"),
+  canGoBack: z.boolean().optional().describe("Show a back button to let the user revise their previous answer"),
 });
 
 const presentChoicesOutput = presentChoicesInput.extend({
@@ -27,9 +31,7 @@ const presentChoicesOutput = presentChoicesInput.extend({
 
 const presentChoicesDef = toolDefinition({
   name: "presentChoices",
-  description: `Present the user with 2–4 clickable choices.
-                Call this tool whenever the user asks for choices, options, or wants to pick between alternatives.
-                Mark one option as recommended when there is a clear best pick.`,
+  description: `Present the user with clickable choices. Call this tool whenever the user needs to pick between alternatives, or when gathering information step by step. Mark one option as recommended when there is a clear best pick. For multi-step flows, include step/totalSteps and set canGoBack=true after the first step.`,
   inputSchema: presentChoicesInput,
   outputSchema: presentChoicesOutput,
 });
@@ -42,7 +44,15 @@ export const choicesTools = clientTools(presentChoices);
 
 export const CHOICES_TOOL_PROMPT = `
 You have a "presentChoices" tool.
-When the user asks for choices, options, or says things like "give me some choices", call this tool with 2–4 creative options.
-Always mark exactly one option as recommended.
+Use it when the user asks for choices, options, or when you need to gather information step by step before taking action.
+
+Single-step: call with 2–6 options, mark one as recommended when there is a clear best pick.
+
+Multi-step flows: when you need multiple pieces of information, call this tool once per step.
+- Set step (1-based) and totalSteps on every call in the flow.
+- Set canGoBack=true on step 2 and beyond so the user can revise previous answers.
+- Set canSkip=true on optional steps.
+- Always include a "Something else" option (id: "other") as the last choice so the user can type a custom answer.
+
 After calling the tool keep your text reply short — the UI renders the options as buttons so do NOT repeat them in prose.
 `.trim();
diff --git a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
new file mode 100644
index 000000000..44cf5b855
--- /dev/null
+++ b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
@@ -0,0 +1,54 @@
+import { toolDefinition } from "@tanstack/ai";
+import { clientTools } from "@tanstack/ai-client";
+import { z } from "zod";
+
+const flowOptionSchema = z.object({
+  id: z.string().describe("Unique identifier for this option"),
+  label: z.string().describe("Button text shown to the user"),
+  value: z.string().optional().describe("Optional payload value — defaults to label if omitted"),
+  recommended: z.boolean().optional().describe("Highlight this as the recommended choice"),
+});
+
+const flowStepSchema = z.object({
+  id: z.string().describe("Unique identifier for this step"),
+  prompt: z.string().describe("The question shown to the user for this step"),
+  options: z.array(flowOptionSchema).min(2).max(6).describe("2 to 6 options"),
+  canSkip: z.boolean().optional().describe("Allow the user to skip this step"),
+});
+
+const presentFlowInput = z.object({
+  steps: z.array(flowStepSchema).min(2).max(8).describe("Ordered list of steps — all defined upfront"),
+});
+
+const presentFlowOutput = presentFlowInput.extend({
+  type: z.literal("flow"),
+});
+
+const presentFlowDef = toolDefinition({
+  name: "presentFlow",
+  description: `Present the user with a multi-step guided flow. All steps are defined upfront and the user navigates them client-side — no round-trip between steps. Use this when you need 2–8 answers before you can take action. When the user completes the flow, a single message is sent with all their answers. Always include a "Something else" option (id: "other") on each step as a fallback.`,
+  inputSchema: presentFlowInput,
+  outputSchema: presentFlowOutput,
+});
+
+const presentFlow = presentFlowDef.client((input) =>
+  Object.assign({ type: "flow" as const }, input),
+);
+
+export const flowTool = clientTools(presentFlow);
+
+export const FLOW_TOOL_PROMPT = `
+You have a "presentFlow" tool.
+Use it when you need to gather 2–8 pieces of information before taking action and the questions are independent (each answer doesn't change the next question).
+
+- Define all steps upfront in the steps array.
+- Each step has a prompt and 2–6 options.
+- Always include a "Something else" option (id: "other") as the last choice on each step.
+- Mark one option as recommended when there is a clear best pick.
+- Set canSkip=true on optional steps.
+
+The user navigates all steps locally — no LLM round-trips between steps. When they finish, you receive a single message with all their answers formatted as:
+"Step 1 (prompt): answer, Step 2 (prompt): answer, ..."
+
+After calling the tool keep your text reply very short — do NOT list the questions in prose.
+`.trim();
diff --git a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
index 483e3a772..599fc26c0 100644
--- a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
+++ b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
@@ -1,6 +1,54 @@
 import type { UIMessage } from "@tanstack/ai-client";
 import { z } from "zod";
 
+// ─── Flow (client-side multi-step) ───────────────────────────────────────────
+
+const flowOptionSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  value: z.string().optional(),
+  recommended: z.boolean().optional(),
+});
+
+const flowStepSchema = z.object({
+  id: z.string(),
+  prompt: z.string(),
+  options: z.array(flowOptionSchema),
+  canSkip: z.boolean().optional(),
+});
+
+const toolResultFlowSchema = z.object({
+  type: z.literal("flow"),
+  steps: z.array(flowStepSchema),
+});
+
+export type FlowOption = z.infer<typeof flowOptionSchema>;
+export type FlowStep = z.infer<typeof flowStepSchema>;
+export type ToolResultFlow = z.infer<typeof toolResultFlowSchema>;
+
+export function findLatestFlow(messages: UIMessage[]): ToolResultFlow | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (!msg || msg.role !== "assistant") continue;
+    const hasUserAfter = messages.slice(i + 1).some((m) => m.role === "user");
+    if (hasUserAfter) continue;
+
+    for (const part of msg.parts) {
+      if (part.type === "tool-result" && "content" in part) {
+        try {
+          const result = toolResultFlowSchema.safeParse(JSON.parse(part.content));
+          if (result.success) return result.data;
+        } catch { /* skip */ }
+      }
+      if (part.type === "tool-call" && "output" in part) {
+        const result = toolResultFlowSchema.safeParse((part as { output?: unknown }).output);
+        if (result.success) return result.data;
+      }
+    }
+  }
+  return null;
+}
+
 const choiceOptionSchema = z.object({
   id: z.string(),
   label: z.string(),
@@ -12,6 +60,10 @@ const toolResultChoicesSchema = z.object({
   type: z.literal("choices"),
   prompt: z.string(),
   options: z.array(choiceOptionSchema),
+  step: z.number().optional(),
+  totalSteps: z.number().optional(),
+  canSkip: z.boolean().optional(),
+  canGoBack: z.boolean().optional(),
 });
 
 export type ChoiceOption = z.infer<typeof choiceOptionSchema>;
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index 5f7b312e1..a1e4bbc3c 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -10,11 +10,19 @@ import {
   CHOICES_TOOL_PROMPT,
   choicesTools,
 } from "@/registry/ai-chat/examples/choices-tool";
+import {
+  FLOW_TOOL_PROMPT,
+  flowTool,
+} from "@/registry/ai-chat/examples/flow-tool";
 import type { OrgTenantInfo } from "./AiChatLoginGate";
 
+const allTools = [...choicesTools, ...flowTool];
+
 const systemPrompt = `You are a helpful assistant. Always respond using markdown format.
 
-${CHOICES_TOOL_PROMPT}`;
+${CHOICES_TOOL_PROMPT}
+
+${FLOW_TOOL_PROMPT}`;
 
 interface AgentHubChatProps {
   accessToken: string;
@@ -29,13 +37,13 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
     model: { vendor: "openai", name: "gpt-4.1-mini-2025-04-14" },
     accessToken: () => accessToken,
     systemPrompt,
-    tools: choicesTools,
+    tools: allTools,
   });
 
   const { messages, sendMessage, isLoading, stop, clear, reload, error } =
     useChat({
       connection,
-      tools: choicesTools,
+      tools: allTools,
     });
 
   return (

From 20338d2f62d50aa9592447a86f5d58f9699f64ae Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Wed, 15 Apr 2026 17:20:40 -0400
Subject: [PATCH 29/35] chore(apollo-vertex): Multistep tuning

---
 .../ai-chat/preview/page.tsx                  | 79 +++++++++++++++++++
 .../ai-chat/components/ai-chat-flow.tsx       |  4 +-
 .../registry/ai-chat/components/ai-chat.tsx   | 51 +++++++-----
 3 files changed, 111 insertions(+), 23 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index c4470e266..516a0d0b5 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -6,11 +6,13 @@ import { type ReactNode, useState } from "react";
 import { AiChat } from "@/registry/ai-chat/components/ai-chat";
 import { AiChatCodeBlock } from "@/registry/ai-chat/components/ai-chat-code-block";
 import { AiChatEmptyState } from "@/registry/ai-chat/components/ai-chat-empty-state";
+import { AiChatFlow } from "@/registry/ai-chat/components/ai-chat-flow";
 import { AiChatInput } from "@/registry/ai-chat/components/ai-chat-input";
 import { AiChatMarkdown } from "@/registry/ai-chat/components/ai-chat-markdown";
 import { AiChatMessage } from "@/registry/ai-chat/components/ai-chat-message";
 import { AiChatMessageActions } from "@/registry/ai-chat/components/ai-chat-message-actions";
 import { AiChatSuggestions } from "@/registry/ai-chat/components/ai-chat-suggestions";
+import type { ToolResultFlow } from "@/registry/ai-chat/utils/ai-chat-utils";
 import { Button } from "@/registry/button/button";
 import {
   Dialog,
@@ -35,6 +37,76 @@ function noop(..._args: any[]) {
   // no-op for preview
 }
 
+const MOCK_FLOW: ToolResultFlow = {
+  type: "flow",
+  steps: [
+    {
+      id: "step-1",
+      prompt: "What type of content are you creating?",
+      options: [
+        { id: "blog", label: "Blog post" },
+        { id: "email", label: "Email campaign" },
+        { id: "social", label: "Social media posts" },
+        { id: "other", label: "Something else" },
+      ],
+    },
+    {
+      id: "step-2",
+      prompt: "Who is your target audience?",
+      options: [
+        { id: "developers", label: "Developers" },
+        { id: "business", label: "Business leaders" },
+        { id: "general", label: "General audience" },
+        { id: "other", label: "Something else" },
+      ],
+      canSkip: true,
+    },
+    {
+      id: "step-3",
+      prompt: "What tone would you like?",
+      options: [
+        { id: "professional", label: "Professional" },
+        { id: "casual", label: "Casual & friendly" },
+        { id: "technical", label: "Technical & precise" },
+        { id: "other", label: "Something else" },
+      ],
+    },
+  ],
+};
+
+function FlowDemo() {
+  const [flowKey, setFlowKey] = useState(0);
+  const [result, setResult] = useState<string | null>(null);
+
+  if (result !== null) {
+    return (
+      <div className="flex flex-col gap-3">
+        <p className="text-xs text-muted-foreground font-mono break-all">{result}</p>
+        <button
+          type="button"
+          className="self-start text-xs px-3 py-1.5 rounded-md border border-input bg-background hover:bg-muted transition-colors"
+          onClick={() => { setResult(null); setFlowKey((k) => k + 1); }}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <AiChatFlow
+      key={flowKey}
+      flow={MOCK_FLOW}
+      onComplete={(answers) => {
+        setResult(answers.map((a, i) => `Step ${i + 1}: ${a.answer}`).join(" · "));
+      }}
+      onDismiss={() => {
+        setResult("(dismissed)");
+      }}
+    />
+  );
+}
+
 function SectionHeader({
   title,
   description,
@@ -387,6 +459,13 @@ export default function AiChatPreviewPage() {
             />
           </PreviewCard>
 
+          <PreviewCard className="p-6">
+            <h3 className="text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
+              {"AiChatFlow (multi-step)"}
+            </h3>
+            <FlowDemo />
+          </PreviewCard>
+
           <PreviewCard className="p-0">
             <h3 className="text-sm font-semibold text-muted-foreground px-6 pt-6 uppercase tracking-wide">
               {"AiChatInput (with text + attachment)"}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
index 2eaff249e..dd7df8fac 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
 import { useState } from "react";
 import type { FlowOption, FlowStep, ToolResultFlow } from "../utils/ai-chat-utils";
 
@@ -57,7 +57,7 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
 
   return (
     <motion.div
-      className="w-full max-w-sm rounded-xl border border-border bg-background shadow-lg overflow-hidden"
+      className="w-full rounded-xl border border-border bg-background shadow-lg overflow-hidden"
       initial={{ opacity: 0, y: 12, scale: 0.97 }}
       animate={{ opacity: 1, y: 0, scale: 1 }}
       exit={{ opacity: 0, y: 8, scale: 0.97 }}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 0e9d01216..35d0a6e93 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -187,7 +187,16 @@ export function AiChat({
   const latestChoices = findLatestChoices(messages);
   const isMultiStep = latestChoices?.step !== undefined;
   const latestFlow = findLatestFlow(messages);
-  const isFlowActive = latestFlow !== null;
+  const [flowDismissed, setFlowDismissed] = useState(false);
+  const prevFlowIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    const id = latestFlow?.steps[0]?.id ?? null;
+    if (id !== null && id !== prevFlowIdRef.current) {
+      prevFlowIdRef.current = id;
+      setFlowDismissed(false);
+    }
+  }, [latestFlow]);
+  const isFlowActive = latestFlow !== null && !flowDismissed;
   const activeChoicesMessageIds = findActiveChoicesMessageIds(messages);
   const latestAssistantMessageId =
     messages.findLast((m) => m.role === "assistant")?.id ?? null;
@@ -420,24 +429,6 @@ export function AiChat({
               </div>
             )}
 
-            {/* Flow HUD overlay */}
-            {isFlowActive && latestFlow && (
-              <div className="absolute inset-0 z-20 flex items-center justify-center px-6">
-                <AiChatFlow
-                  flow={latestFlow}
-                  onComplete={(answers) => {
-                    const summary = answers
-                      .map((a, i) => `Step ${i + 1} (${a.prompt}): ${a.answer}`)
-                      .join(", ");
-                    onSendMessage(summary);
-                  }}
-                  onDismiss={() => {
-                    onSendMessage("Never mind, let's stop here");
-                  }}
-                />
-              </div>
-            )}
-
             {!isStuck && !isMultiStep && !isFlowActive && (
               <button
                 type="button"
@@ -474,7 +465,25 @@ export function AiChat({
         )}
 
         {messages.length > 0 && (
-          <>
+          <div className="relative">
+            {isFlowActive && latestFlow && (
+              <div className="absolute bottom-full left-0 right-0 z-20 px-3 pb-1">
+                <AiChatFlow
+                  flow={latestFlow}
+                  onComplete={(answers) => {
+                    setFlowDismissed(true);
+                    const summary = answers
+                      .map((a, i) => `Step ${i + 1} (${a.prompt}): ${a.answer}`)
+                      .join(", ");
+                    onSendMessage(summary);
+                  }}
+                  onDismiss={() => {
+                    setFlowDismissed(true);
+                    onSendMessage("Never mind, let's stop here");
+                  }}
+                />
+              </div>
+            )}
             <AiChatInput
               ref={inputRef}
               value={input}
@@ -490,7 +499,7 @@ export function AiChat({
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
               {"AI-generated responses should be reviewed for accuracy."}
             </div>
-          </>
+          </div>
         )}
       </div>
     </AiChatProvider>

From 4aaedee52e485bef0b2a9df1d9cd4a0ae140cec9 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 16 Apr 2026 11:51:43 -0400
Subject: [PATCH 30/35] chore(apollo-vertex): Multi-step interaction

---
 .../ai-chat/preview/page.tsx                  |   3 -
 .../ai-chat/components/ai-chat-flow.tsx       | 111 +++++++++++-------
 .../registry/ai-chat/components/ai-chat.tsx   |  44 ++++---
 .../registry/ai-chat/examples/flow-tool.ts    |   6 +-
 .../registry/ai-chat/utils/ai-chat-utils.ts   |   1 +
 5 files changed, 102 insertions(+), 63 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 516a0d0b5..4fba9a97d 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -47,7 +47,6 @@ const MOCK_FLOW: ToolResultFlow = {
         { id: "blog", label: "Blog post" },
         { id: "email", label: "Email campaign" },
         { id: "social", label: "Social media posts" },
-        { id: "other", label: "Something else" },
       ],
     },
     {
@@ -57,7 +56,6 @@ const MOCK_FLOW: ToolResultFlow = {
         { id: "developers", label: "Developers" },
         { id: "business", label: "Business leaders" },
         { id: "general", label: "General audience" },
-        { id: "other", label: "Something else" },
       ],
       canSkip: true,
     },
@@ -68,7 +66,6 @@ const MOCK_FLOW: ToolResultFlow = {
         { id: "professional", label: "Professional" },
         { id: "casual", label: "Casual & friendly" },
         { id: "technical", label: "Technical & precise" },
-        { id: "other", label: "Something else" },
       ],
     },
   ],
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
index dd7df8fac..5390988df 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
@@ -2,7 +2,7 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { FlowOption, FlowStep, ToolResultFlow } from "../utils/ai-chat-utils";
 
 const EASE = [0.22, 1, 0.36, 1] as const;
@@ -11,9 +11,11 @@ interface AiChatFlowProps {
   flow: ToolResultFlow;
   onComplete: (answers: { stepId: string; prompt: string; answer: string }[]) => void;
   onDismiss: () => void;
+  /** Called on mount and on every step change with a resolver for the current step's free-text answer. */
+  onFreeTextReady?: (resolve: (text: string) => void) => void;
 }
 
-export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
+export function AiChatFlow({ flow, onComplete, onDismiss, onFreeTextReady }: AiChatFlowProps) {
   const [stepIndex, setStepIndex] = useState(0);
   const [answers, setAnswers] = useState<{ stepId: string; prompt: string; answer: string }[]>([]);
 
@@ -22,6 +24,27 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
   const isLast = stepIndex === flow.steps.length - 1;
   const total = flow.steps.length;
 
+  const advance = (updated: { stepId: string; prompt: string; answer: string }[]) => {
+    if (isLast) {
+      onComplete(updated);
+    } else {
+      setStepIndex((i) => i + 1);
+    }
+  };
+
+  // Notify parent with a fresh resolver whenever the step changes
+  useEffect(() => {
+    onFreeTextReady?.((text) => {
+      const updated = [
+        ...answers.filter((a) => a.stepId !== step.id),
+        { stepId: step.id, prompt: step.prompt, answer: text },
+      ];
+      setAnswers(updated);
+      advance(updated);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepIndex]);
+
   const handleSelect = (option: FlowOption) => {
     const answer = option.value ?? option.label;
     const updated = [
@@ -29,17 +52,10 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
       { stepId: step.id, prompt: step.prompt, answer },
     ];
     setAnswers(updated);
-
-    if (isLast) {
-      onComplete(updated);
-    } else {
-      setStepIndex((i) => i + 1);
-    }
+    advance(updated);
   };
 
-  const handleBack = () => {
-    setStepIndex((i) => Math.max(0, i - 1));
-  };
+  const handleBack = () => setStepIndex((i) => Math.max(0, i - 1));
 
   const handleSkip = () => {
     const updated = [
@@ -47,12 +63,7 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
       { stepId: step.id, prompt: step.prompt, answer: "(skipped)" },
     ];
     setAnswers(updated);
-
-    if (isLast) {
-      onComplete(updated);
-    } else {
-      setStepIndex((i) => i + 1);
-    }
+    advance(updated);
   };
 
   return (
@@ -63,36 +74,47 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
       exit={{ opacity: 0, y: 8, scale: 0.97 }}
       transition={{ duration: 0.25, ease: EASE }}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 pt-3 pb-2">
-        <div className="flex items-center gap-2">
-          {!isFirst && (
+      {/* Header: prompt + controls */}
+      <div className="flex items-start gap-3 px-6 pt-6 pb-3">
+        <AnimatePresence mode="wait">
+          <motion.p
+            key={step.id}
+            className="flex-1 text-base font-bold tracking-tight text-foreground"
+            initial={{ opacity: 0, x: 16 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -16 }}
+            transition={{ duration: 0.18, ease: EASE }}
+          >
+            {step.prompt}
+          </motion.p>
+        </AnimatePresence>
+
+        <div className="flex items-center gap-4 flex-shrink-0 mt-0.5">
+          <div className="flex items-center gap-0.5">
             <button
               type="button"
               onClick={handleBack}
-              className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground"
+              disabled={isFirst}
+              className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground disabled:opacity-30 disabled:pointer-events-none"
               aria-label="Go back"
             >
               <ChevronLeft className="size-4" aria-hidden="true" />
             </button>
-          )}
-          <span className="text-xs text-muted-foreground">
-            {stepIndex + 1}
-            <span className="opacity-40 mx-1">{"/"}</span>
-            {total}
-          </span>
-        </div>
-        <div className="flex items-center gap-1">
-          {step.canSkip && (
+            <span className="text-xs text-muted-foreground px-0.5">
+              {stepIndex + 1}
+              <span className="opacity-40 mx-0.5">{"/"}</span>
+              {total}
+            </span>
             <button
               type="button"
               onClick={handleSkip}
-              className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded-md hover:bg-muted"
+              disabled={isLast}
+              className="size-6 inline-flex items-center justify-center rounded-md hover:bg-muted transition-colors text-muted-foreground disabled:opacity-30 disabled:pointer-events-none"
+              aria-label="Go forward"
             >
-              {"Skip"}
-              <ChevronRight className="size-3" aria-hidden="true" />
+              <ChevronRight className="size-4" aria-hidden="true" />
             </button>
-          )}
+          </div>
           <button
             type="button"
             onClick={onDismiss}
@@ -104,28 +126,31 @@ export function AiChatFlow({ flow, onComplete, onDismiss }: AiChatFlowProps) {
         </div>
       </div>
 
-      {/* Prompt + options */}
+      {/* Options */}
       <AnimatePresence mode="wait">
         <motion.div
           key={step.id}
+          className="pb-[76px]"
           initial={{ opacity: 0, x: 16 }}
           animate={{ opacity: 1, x: 0 }}
           exit={{ opacity: 0, x: -16 }}
           transition={{ duration: 0.18, ease: EASE }}
         >
-          <p className="px-4 pb-3 text-sm font-medium text-foreground">{step.prompt}</p>
-          <div className="flex flex-col px-2 pb-3 gap-1">
-            {step.options.map((option) => (
+          {step.options.map((option, i) => (
+            <div key={option.id}>
+              {i > 0 && <div className="mx-6 border-t border-border" aria-hidden="true" />}
               <button
-                key={option.id}
                 type="button"
-                className="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors hover:bg-muted text-foreground"
+                className="w-full text-left px-6 py-3.5 text-sm transition-colors hover:bg-muted text-foreground flex items-center gap-3"
                 onClick={() => handleSelect(option)}
               >
+                <span className="size-5 rounded-full bg-secondary flex items-center justify-center text-[10px] font-semibold text-secondary-foreground flex-shrink-0 tabular-nums">
+                  {i + 1}
+                </span>
                 {option.label}
               </button>
-            ))}
-          </div>
+            </div>
+          ))}
         </motion.div>
       </AnimatePresence>
     </motion.div>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 35d0a6e93..4fe6973c9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -133,6 +133,7 @@ export function AiChat({
 
   const queuedMessageRef = useRef<{ content: string; attachments?: File[] } | null>(null);
   const [conversationCopied, setConversationCopied] = useState(false);
+  const flowFreeTextResolveRef = useRef<((text: string) => void) | null>(null);
 
   const handleCopyConversation = async () => {
     const text = messages
@@ -154,6 +155,14 @@ export function AiChat({
 
   const handleSubmit = (attachments?: File[]) => {
     if (!input.trim()) return;
+    // Flow is active: route free-text answer into the flow instead of sending a message
+    if (flowFreeTextResolveRef.current) {
+      const resolve = flowFreeTextResolveRef.current;
+      flowFreeTextResolveRef.current = null;
+      resolve(input.trim());
+      setInput("");
+      return;
+    }
     const content = quotedText
       ? `> ${quotedText}\n\n${input.trim()}`
       : input.trim();
@@ -465,13 +474,14 @@ export function AiChat({
         )}
 
         {messages.length > 0 && (
-          <div className="relative">
+          <div>
             {isFlowActive && latestFlow && (
-              <div className="absolute bottom-full left-0 right-0 z-20 px-3 pb-1">
+              <div className="mx-2">
                 <AiChatFlow
                   flow={latestFlow}
                   onComplete={(answers) => {
                     setFlowDismissed(true);
+                    flowFreeTextResolveRef.current = null;
                     const summary = answers
                       .map((a, i) => `Step ${i + 1} (${a.prompt}): ${a.answer}`)
                       .join(", ");
@@ -479,23 +489,29 @@ export function AiChat({
                   }}
                   onDismiss={() => {
                     setFlowDismissed(true);
+                    flowFreeTextResolveRef.current = null;
                     onSendMessage("Never mind, let's stop here");
                   }}
+                  onFreeTextReady={(resolve) => {
+                    flowFreeTextResolveRef.current = resolve;
+                  }}
                 />
               </div>
             )}
-            <AiChatInput
-              ref={inputRef}
-              value={input}
-              onChange={setInput}
-              onSubmit={handleSubmit}
-              onStop={onStop}
-              isLoading={isLoading}
-              placeholder={placeholder}
-              hasMessages
-              quotedText={quotedText}
-              onClearQuote={() => setQuotedText(null)}
-            />
+            <div className={isFlowActive ? "relative z-10 -mt-[76px]" : undefined}>
+              <AiChatInput
+                ref={inputRef}
+                value={input}
+                onChange={setInput}
+                onSubmit={handleSubmit}
+                onStop={onStop}
+                isLoading={isLoading}
+                placeholder={isFlowActive ? "Or type your own answer..." : placeholder}
+                hasMessages
+                quotedText={quotedText}
+                onClearQuote={() => setQuotedText(null)}
+              />
+            </div>
             <div className="pt-2 pb-3 px-4 text-xs leading-normal text-muted-foreground text-center">
               {"AI-generated responses should be reviewed for accuracy."}
             </div>
diff --git a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
index 44cf5b855..96b60c1b7 100644
--- a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
+++ b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
@@ -7,6 +7,7 @@ const flowOptionSchema = z.object({
   label: z.string().describe("Button text shown to the user"),
   value: z.string().optional().describe("Optional payload value — defaults to label if omitted"),
   recommended: z.boolean().optional().describe("Highlight this as the recommended choice"),
+  freeText: z.boolean().optional().describe("When true, selecting this option lets the user type a custom answer in the input instead of choosing a preset"),
 });
 
 const flowStepSchema = z.object({
@@ -26,7 +27,7 @@ const presentFlowOutput = presentFlowInput.extend({
 
 const presentFlowDef = toolDefinition({
   name: "presentFlow",
-  description: `Present the user with a multi-step guided flow. All steps are defined upfront and the user navigates them client-side — no round-trip between steps. Use this when you need 2–8 answers before you can take action. When the user completes the flow, a single message is sent with all their answers. Always include a "Something else" option (id: "other") on each step as a fallback.`,
+  description: `Present the user with a multi-step guided flow. All steps are defined upfront and the user navigates them client-side — no round-trip between steps. Use this when you need 2–8 answers before you can take action. When the user completes the flow, a single message is sent with all their answers. Only include specific, concrete options per step — never add "Other", "Something else", or any catch-all fallback, as the text input is always available.`,
   inputSchema: presentFlowInput,
   outputSchema: presentFlowOutput,
 });
@@ -42,8 +43,7 @@ You have a "presentFlow" tool.
 Use it when you need to gather 2–8 pieces of information before taking action and the questions are independent (each answer doesn't change the next question).
 
 - Define all steps upfront in the steps array.
-- Each step has a prompt and 2–6 options.
-- Always include a "Something else" option (id: "other") as the last choice on each step.
+- Each step has a prompt and 2–6 options. Only include concrete, specific choices. Do NOT add catch-all options like "Something else", "Other", "None of the above", or any similar fallback — the text input below the card is always available for the user to type a custom answer.
 - Mark one option as recommended when there is a clear best pick.
 - Set canSkip=true on optional steps.
 
diff --git a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
index 599fc26c0..9564a978c 100644
--- a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
+++ b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
@@ -8,6 +8,7 @@ const flowOptionSchema = z.object({
   label: z.string(),
   value: z.string().optional(),
   recommended: z.boolean().optional(),
+  freeText: z.boolean().optional(),
 });
 
 const flowStepSchema = z.object({

From 6cdb474cb62b901b48f06605eff070d5a83a1f00 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 16 Apr 2026 11:53:56 -0400
Subject: [PATCH 31/35] chore(apollo-vertex): Intentional inputs

---
 apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
index 96b60c1b7..600ea2e8c 100644
--- a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
+++ b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
@@ -50,5 +50,7 @@ Use it when you need to gather 2–8 pieces of information before taking action
 The user navigates all steps locally — no LLM round-trips between steps. When they finish, you receive a single message with all their answers formatted as:
 "Step 1 (prompt): answer, Step 2 (prompt): answer, ..."
 
+The user can also type a custom free-text answer at any step instead of clicking an option. If an answer doesn't match the options you defined, treat it as a valid custom response and proceed — never question or re-ask it.
+
 After calling the tool keep your text reply very short — do NOT list the questions in prose.
 `.trim();

From 698eb9374f40498cd690151dcafa698f6ef465dc Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 16 Apr 2026 13:32:18 -0400
Subject: [PATCH 32/35] chore(apollo-vertex): Code clean up

---
 .../app/_components/preview-full-screen.tsx            | 10 ++++++----
 apps/apollo-vertex/app/patterns/ai-chat/_meta.ts       |  3 ---
 apps/apollo-vertex/app/patterns/ai-chat/page.mdx       |  2 ++
 .../app/patterns/ai-chat/preview/page.tsx              |  7 -------
 apps/apollo-vertex/registry/accordion/accordion.tsx    |  2 +-
 .../ai-chat/components/ai-chat-empty-state.tsx         |  2 +-
 6 files changed, 10 insertions(+), 16 deletions(-)
 delete mode 100644 apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
 delete mode 100644 apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx

diff --git a/apps/apollo-vertex/app/_components/preview-full-screen.tsx b/apps/apollo-vertex/app/_components/preview-full-screen.tsx
index cfdcdabad..a20ea3545 100644
--- a/apps/apollo-vertex/app/_components/preview-full-screen.tsx
+++ b/apps/apollo-vertex/app/_components/preview-full-screen.tsx
@@ -2,6 +2,7 @@
 
 import { Maximize2, Minimize2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
 import {
   Dialog,
@@ -21,6 +22,7 @@ export function PreviewFullScreen({
   title: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation();
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -36,8 +38,8 @@ export function PreviewFullScreen({
             variant="outline"
             size="icon-sm"
             className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm"
-            aria-label="Enter full screen"
-            title="Enter full screen"
+            aria-label={t("enter_full_screen")}
+            title={t("enter_full_screen")}
           >
             <Maximize2 className="size-4" />
           </Button>
@@ -51,8 +53,8 @@ export function PreviewFullScreen({
             variant="outline"
             size="icon-sm"
             className="absolute top-4 right-4 z-20"
-            aria-label="Exit full screen"
-            title="Exit full screen"
+            aria-label={t("exit_full_screen")}
+            title={t("exit_full_screen")}
           >
             <Minimize2 className="size-4" />
           </Button>
diff --git a/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts b/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
deleted file mode 100644
index 326a9ac3b..000000000
--- a/apps/apollo-vertex/app/patterns/ai-chat/_meta.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  preview: "Components",
-};
diff --git a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
index 408ae4f08..9aad19945 100644
--- a/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
+++ b/apps/apollo-vertex/app/patterns/ai-chat/page.mdx
@@ -9,6 +9,8 @@ A composable AI chat UI component for Apollo Vertex. Built with React, TypeScrip
   <AiChatTemplate className="h-full flex w-full flex-col" />
 </PreviewFullScreen>
 
+> **All visual states and sub-components →** [Component Preview](/vertex-components/ai-chat/preview)
+
 ## Features
 
 - **TanStack AI Integration** — Works with `useChat` from `@tanstack/ai-react` and `UIMessage` types
diff --git a/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx
deleted file mode 100644
index 6586b04c7..000000000
--- a/apps/apollo-vertex/app/patterns/ai-chat/preview/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import AiChatPreviewPage from "@/app/vertex-components/ai-chat/preview/page";
-
-export default function PreviewPage() {
-  return <AiChatPreviewPage />;
-}
diff --git a/apps/apollo-vertex/registry/accordion/accordion.tsx b/apps/apollo-vertex/registry/accordion/accordion.tsx
index d09272c18..f0428981e 100644
--- a/apps/apollo-vertex/registry/accordion/accordion.tsx
+++ b/apps/apollo-vertex/registry/accordion/accordion.tsx
@@ -2,7 +2,7 @@
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
index 8148a1c94..397a8acc4 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-empty-state.tsx
@@ -15,7 +15,7 @@ export function AiChatEmptyState({
 }: AiChatEmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center h-full text-center text-ai-chat-muted-foreground gap-4">
-      {icon && icon}
+      {icon}
       <div className="flex flex-col items-center gap-1">
         <h2 className="text-2xl font-semibold leading-tight tracking-tight text-foreground">
           {title}

From 3bcddf6e5e7890ea8a94ccb0fb93c64f065a1024 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 16 Apr 2026 15:08:02 -0400
Subject: [PATCH 33/35] chore(apollo-vertex): contextual menu fix

---
 .../registry/ai-chat/components/ai-chat.tsx           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index 4fe6973c9..bea19c3dc 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -156,7 +156,7 @@ export function AiChat({
   const handleSubmit = (attachments?: File[]) => {
     if (!input.trim()) return;
     // Flow is active: route free-text answer into the flow instead of sending a message
-    if (flowFreeTextResolveRef.current) {
+    if (isFlowActive && flowFreeTextResolveRef.current) {
       const resolve = flowFreeTextResolveRef.current;
       flowFreeTextResolveRef.current = null;
       resolve(input.trim());
@@ -206,6 +206,15 @@ export function AiChat({
     }
   }, [latestFlow]);
   const isFlowActive = latestFlow !== null && !flowDismissed;
+
+  // Clear the free-text resolver whenever the flow becomes inactive so stale
+  // refs never intercept normal messages or "Ask Autopilot" submissions.
+  useEffect(() => {
+    if (!isFlowActive) {
+      flowFreeTextResolveRef.current = null;
+    }
+  }, [isFlowActive]);
+
   const activeChoicesMessageIds = findActiveChoicesMessageIds(messages);
   const latestAssistantMessageId =
     messages.findLast((m) => m.role === "assistant")?.id ?? null;

From 6f00375ab89ee185daf86257af0f4b869faef26b Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Thu, 16 Apr 2026 16:50:02 -0400
Subject: [PATCH 34/35] chore(apollo-vertex): image thumbnail and lightbox UX

---
 .../ai-chat/components/ai-chat-input.tsx      | 150 +++++++++++++++---
 1 file changed, 128 insertions(+), 22 deletions(-)

diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index d1637567a..d3e29bc4f 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,17 +1,26 @@
 "use client";
 
-import { ArrowUp, CircleStop, FileText, MessageSquareText, Plus, X } from "lucide-react";
+import {
+  ArrowUp,
+  CircleStop,
+  FileText,
+  MessageSquareText,
+  Plus,
+  X,
+} from "lucide-react";
 import {
   type ClipboardEvent,
   type FocusEvent,
   type FormEvent,
+  forwardRef,
   type KeyboardEvent,
   type Ref,
-  forwardRef,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/registry/button/button";
 import {
@@ -31,6 +40,7 @@ interface PendingFile {
   size: number;
   type: string;
   file: File;
+  thumbnailUrl?: string;
 }
 
 interface AiChatInputProps {
@@ -73,7 +83,16 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     const { t } = useTranslation();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const glowRef = useRef<HTMLDivElement>(null);
-    const [pendingFiles, setPendingFiles] = useState<PendingFile[]>(initialFiles);
+    const [pendingFiles, setPendingFiles] =
+      useState<PendingFile[]>(initialFiles);
+    const [lightboxUrl, setLightboxUrl] = useState<string | null>(null);
+
+    useEffect(() => {
+      if (!lightboxUrl) return;
+      const handler = (e: KeyboardEvent) => { if (e.key === "Escape") setLightboxUrl(null); };
+      document.addEventListener("keydown", handler as EventListener);
+      return () => document.removeEventListener("keydown", handler as EventListener);
+    }, [lightboxUrl]);
 
     useImperativeHandle(ref, () => ({
       focus: () => textareaRef.current?.focus(),
@@ -98,6 +117,9 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       if (!value.trim()) return;
       const files = pendingFiles.map((f) => f.file);
       onSubmit(files.length > 0 ? files : undefined);
+      pendingFiles.forEach((f) => {
+        if (f.thumbnailUrl) URL.revokeObjectURL(f.thumbnailUrl);
+      });
       setPendingFiles([]);
       requestAnimationFrame(() => {
         const el = textareaRef.current;
@@ -117,14 +139,25 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       }
     };
 
+    const makePendingFile = (
+      file: File,
+      nameOverride?: string,
+    ): PendingFile => {
+      const name = nameOverride ?? file.name;
+      const thumbnailUrl = file.type.startsWith("image/")
+        ? URL.createObjectURL(file)
+        : undefined;
+      return { name, size: file.size, type: file.type, file, thumbnailUrl };
+    };
+
     const handleFileClick = () => {
       const fileInput = document.createElement("input");
       fileInput.type = "file";
       fileInput.multiple = true;
       fileInput.addEventListener("change", () => {
         if (!fileInput.files) return;
-        const newFiles: PendingFile[] = Array.from(fileInput.files).map(
-          (file) => ({ name: file.name, size: file.size, type: file.type, file }),
+        const newFiles = Array.from(fileInput.files).map((file) =>
+          makePendingFile(file),
         );
         setPendingFiles((prev) => [...prev, ...newFiles]);
       });
@@ -132,17 +165,26 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     };
 
     const removeFile = (index: number) => {
-      setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+      setPendingFiles((prev) => {
+        const removed = prev[index];
+        if (removed?.thumbnailUrl) URL.revokeObjectURL(removed.thumbnailUrl);
+        return prev.filter((_, i) => i !== index);
+      });
     };
 
     const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
       const imageFiles: PendingFile[] = Array.from(e.clipboardData.items)
-        .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
+        .filter(
+          (item) => item.kind === "file" && item.type.startsWith("image/"),
+        )
         .flatMap((item) => {
           const file = item.getAsFile();
           if (!file) return [];
-          const name = file.name !== "" ? file.name : `pasted-image.${file.type.split("/")[1]}`;
-          return [{ name, size: file.size, type: file.type, file }];
+          const name =
+            file.name !== ""
+              ? file.name
+              : `pasted-image.${file.type.split("/")[1]}`;
+          return [makePendingFile(file, name)];
         });
       if (imageFiles.length > 0) {
         e.preventDefault();
@@ -176,8 +218,13 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
 
     const quoteChip = quotedText && (
       <div className="flex items-start gap-2 mx-[10px] mt-2 px-2 py-1.5 rounded-md bg-muted/50 text-xs text-muted-foreground">
-        <MessageSquareText className="size-3 flex-shrink-0 mt-0.5 opacity-60" aria-hidden="true" />
-        <span className="flex-1 line-clamp-2 leading-relaxed">{quotedText}</span>
+        <MessageSquareText
+          className="size-3 flex-shrink-0 mt-0.5 opacity-60"
+          aria-hidden="true"
+        />
+        <span className="flex-1 line-clamp-2 leading-relaxed">
+          {quotedText}
+        </span>
         <button
           type="button"
           onClick={onClearQuote}
@@ -194,18 +241,50 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
         {pendingFiles.map((f, i) => (
           <div
             key={`${f.name}-${i}`}
-            className="flex items-center gap-1 pl-2 pr-1 py-1 rounded-md bg-muted text-xs text-foreground max-w-[180px]"
+            className="relative flex items-center gap-1 rounded-md bg-muted text-xs text-foreground overflow-hidden"
           >
-            <FileText className="size-3 flex-shrink-0 text-muted-foreground" aria-hidden="true" />
-            <span className="truncate">{f.name}</span>
-            <button
-              type="button"
-              onClick={() => removeFile(i)}
-              className="flex-shrink-0 size-4 rounded-sm flex items-center justify-center hover:bg-muted-foreground/20 ml-0.5"
-              aria-label={`Remove ${f.name}`}
-            >
-              <X className="size-2.5" aria-hidden="true" />
-            </button>
+            {f.thumbnailUrl ? (
+              <>
+                <button
+                  type="button"
+                  onClick={() => setLightboxUrl(f.thumbnailUrl!)}
+                  className="flex-shrink-0 focus:outline-none"
+                  aria-label={`Preview ${f.name}`}
+                >
+                  <img
+                    src={f.thumbnailUrl}
+                    alt={f.name}
+                    className="size-10 object-cover border border-border hover:opacity-90 transition-opacity"
+                  />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => removeFile(i)}
+                  className="absolute top-0.5 right-0.5 size-4 rounded-sm flex items-center justify-center bg-black/50 hover:bg-black/70 text-white"
+                  aria-label={`Remove ${f.name}`}
+                >
+                  <X className="size-2.5" aria-hidden="true" />
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="pl-2 flex items-center gap-1 max-w-[180px] py-1">
+                  <FileText
+                    className="size-3 flex-shrink-0 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <span className="truncate">{f.name}</span>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeFile(i)}
+                  className="flex-shrink-0 size-4 rounded-sm flex items-center justify-center hover:bg-muted-foreground/20 mr-1"
+                  aria-label={`Remove ${f.name}`}
+                >
+                  <X className="size-2.5" aria-hidden="true" />
+                </button>
+              </>
+            )}
           </div>
         ))}
       </div>
@@ -262,6 +341,7 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     );
 
     return (
+      <>
       <div className="relative z-10 mt-auto pt-3 px-4">
         <div className="relative">
           <div
@@ -365,6 +445,32 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
           )}
         </div>
       </div>
+      {lightboxUrl && createPortal(
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => setLightboxUrl(null)}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Image preview"
+        >
+          <button
+            type="button"
+            className="absolute top-4 right-4 size-8 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 text-white transition-colors"
+            onClick={() => setLightboxUrl(null)}
+            aria-label="Close preview"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </button>
+          <img
+            src={lightboxUrl}
+            alt="Preview"
+            className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>,
+        document.body,
+      )}
+      </>
     );
   },
 );

From f9f996518ad266e28b1fa4dc014f0e8ac0a5cb21 Mon Sep 17 00:00:00 2001
From: Peter Vachon <peteraldenvachon@gmail.com>
Date: Fri, 17 Apr 2026 07:01:12 -0400
Subject: [PATCH 35/35] fix(apollo-vertex): resolve all CI lint, type, and
 build errors

- Fix TypeScript build error: use globalThis.KeyboardEvent for DOM listener
- Add uid to PendingFile and move makePendingFile outside component
- Wrap async onClick handlers in void (no-misused-promises)
- Replace dangerouslySetInnerHTML with ref-based innerHTML in code block
- Remove unsafe type assertions; use instanceof/type narrowing instead
- Replace no-undefined violations with null checks and conditional spreads
- Fix no-array-index-key with stable uid/label/url keys
- Extract tryParseFlow helper to reduce nesting depth in ai-chat-utils
- Type MOCK_SOURCES_BASIC/ATTACHMENTS_BASIC as Record<string, ...>
- Remove unused FlowStep and ToolResultChoices imports
- Fix jsx-no-literals violations and no-negated-condition in paste handler

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ai-chat/preview/mock-data.ts              |  10 +-
 .../ai-chat/preview/page.tsx                  |  35 ++-
 .../ai-chat/components/ai-chat-code-block.tsx |  18 +-
 .../ai-chat/components/ai-chat-flow.tsx       |  30 +-
 .../ai-chat/components/ai-chat-input.tsx      | 277 +++++++++---------
 .../ai-chat/components/ai-chat-markdown.tsx   |   9 +-
 .../components/ai-chat-message-actions.tsx    |  11 +-
 .../ai-chat/components/ai-chat-message.tsx    | 170 ++++++-----
 .../ai-chat/components/ai-chat-provider.tsx   |   1 -
 .../components/ai-chat-selection-menu.tsx     |  11 +-
 .../components/ai-chat-suggestions.tsx        |  16 +-
 .../registry/ai-chat/components/ai-chat.tsx   |  92 +++---
 .../registry/ai-chat/examples/choices-tool.ts |  19 +-
 .../registry/ai-chat/examples/flow-tool.ts    |  23 +-
 apps/apollo-vertex/registry/ai-chat/types.ts  |   5 +-
 .../registry/ai-chat/utils/ai-chat-utils.ts   |  32 +-
 .../templates/ai-chat/AiChatAgentHubMode.tsx  |   8 +-
 .../ai-chat/AiChatConversationalAgentMode.tsx |   4 +-
 18 files changed, 472 insertions(+), 299 deletions(-)

diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
index 2211805af..22630face 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/mock-data.ts
@@ -192,7 +192,10 @@ export const MOCK_MESSAGES_WITH_CHOICES: UIMessage[] = [
   },
 ];
 
-export const MOCK_SOURCES_BASIC = {
+export const MOCK_SOURCES_BASIC: Record<
+  string,
+  { label: string; url: string }[]
+> = {
   "2": [
     { label: "Apollo UI GitHub", url: "https://github.com/UiPath/apollo-ui" },
     { label: "Tailwind CSS", url: "https://tailwindcss.com" },
@@ -200,7 +203,10 @@ export const MOCK_SOURCES_BASIC = {
   ],
 };
 
-export const MOCK_ATTACHMENTS_BASIC = {
+export const MOCK_ATTACHMENTS_BASIC: Record<
+  string,
+  { name: string; type: string; size: number }[]
+> = {
   "1": [{ name: "Q4_Report.pdf", type: "application/pdf", size: 245000 }],
 };
 
diff --git a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
index 4fba9a97d..c6de1cef7 100644
--- a/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
+++ b/apps/apollo-vertex/app/vertex-components/ai-chat/preview/page.tsx
@@ -32,8 +32,7 @@ import {
 } from "./mock-data";
 import { ThinkingDemo } from "./thinking-demo";
 
-// biome-ignore lint/suspicious/noExplicitAny: preview no-op accepts any args
-function noop(..._args: any[]) {
+function noop(..._args: unknown[]) {
   // no-op for preview
 }
 
@@ -78,11 +77,16 @@ function FlowDemo() {
   if (result !== null) {
     return (
       <div className="flex flex-col gap-3">
-        <p className="text-xs text-muted-foreground font-mono break-all">{result}</p>
+        <p className="text-xs text-muted-foreground font-mono break-all">
+          {result}
+        </p>
         <button
           type="button"
           className="self-start text-xs px-3 py-1.5 rounded-md border border-input bg-background hover:bg-muted transition-colors"
-          onClick={() => { setResult(null); setFlowKey((k) => k + 1); }}
+          onClick={() => {
+            setResult(null);
+            setFlowKey((k) => k + 1);
+          }}
         >
           Reset
         </button>
@@ -95,7 +99,9 @@ function FlowDemo() {
       key={flowKey}
       flow={MOCK_FLOW}
       onComplete={(answers) => {
-        setResult(answers.map((a, i) => `Step ${i + 1}: ${a.answer}`).join(" · "));
+        setResult(
+          answers.map((a, i) => `Step ${i + 1}: ${a.answer}`).join(" · "),
+        );
       }}
       onDismiss={() => {
         setResult("(dismissed)");
@@ -175,8 +181,8 @@ function renderBasicMsg(msg: (typeof MOCK_MESSAGES_BASIC)[number]) {
     <AiChatMessage
       key={msg.id}
       message={msg}
-      sources={MOCK_SOURCES_BASIC[msg.id as keyof typeof MOCK_SOURCES_BASIC]}
-      attachments={MOCK_ATTACHMENTS_BASIC[msg.id as keyof typeof MOCK_ATTACHMENTS_BASIC]}
+      sources={MOCK_SOURCES_BASIC[msg.id]}
+      attachments={MOCK_ATTACHMENTS_BASIC[msg.id]}
     />
   );
 }
@@ -216,7 +222,10 @@ export default function AiChatPreviewPage() {
           title="Empty State (Custom with Suggestions)"
           description="AiChatEmptyState component with quick-start prompts."
         />
-        <PreviewCard className="h-[400px]" title="Empty State (Custom with Suggestions)">
+        <PreviewCard
+          className="h-[400px]"
+          title="Empty State (Custom with Suggestions)"
+        >
           <AiChat
             messages={[]}
             isLoading={false}
@@ -474,7 +483,15 @@ export default function AiChatPreviewPage() {
               onStop={noop}
               isLoading={false}
               hasMessages
-              initialFiles={[{ name: "design-spec.png", size: 84320, type: "image/png", file: new File([], "design-spec.png", { type: "image/png" }) }]}
+              initialFiles={[
+                {
+                  uid: "preview-1",
+                  name: "design-spec.png",
+                  size: 84320,
+                  type: "image/png",
+                  file: new File([], "design-spec.png", { type: "image/png" }),
+                },
+              ]}
             />
           </PreviewCard>
 
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
index 75d2ba021..58bd052fa 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-code-block.tsx
@@ -67,7 +67,7 @@ import sql from "highlight.js/lib/languages/sql";
 import typescript from "highlight.js/lib/languages/typescript";
 import xml from "highlight.js/lib/languages/xml";
 import { Check, Copy } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Tooltip,
   TooltipContent,
@@ -101,12 +101,19 @@ interface AiChatCodeBlockProps {
 
 export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
   const [copied, setCopied] = useState(false);
+  const codeRef = useRef<HTMLElement>(null);
 
   const highlightedHtml =
     language && hljs.getLanguage(language)
       ? hljs.highlight(children, { language }).value
       : hljs.highlightAuto(children).value;
 
+  useEffect(() => {
+    if (codeRef.current) {
+      codeRef.current.innerHTML = highlightedHtml;
+    }
+  }, [highlightedHtml]);
+
   const handleCopy = async () => {
     await navigator.clipboard.writeText(children);
     setCopied(true);
@@ -129,7 +136,9 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
             <TooltipTrigger asChild>
               <button
                 type="button"
-                onClick={handleCopy}
+                onClick={() => {
+                  void handleCopy();
+                }}
                 className="ml-auto size-6 inline-flex items-center justify-center rounded-md opacity-0 group-hover/codeblock:opacity-100 transition-opacity hover:bg-ai-chat-border"
                 aria-label={copyLabel}
               >
@@ -147,10 +156,7 @@ export function AiChatCodeBlock({ children, language }: AiChatCodeBlockProps) {
           </Tooltip>
         </div>
         <pre className="p-3 overflow-x-auto">
-          <code
-            className="hljs text-xs font-mono"
-            dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-          />
+          <code ref={codeRef} className="hljs text-xs font-mono" />
         </pre>
       </div>
     </>
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
index 5390988df..71f6fc38b 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-flow.tsx
@@ -3,28 +3,39 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { useEffect, useState } from "react";
-import type { FlowOption, FlowStep, ToolResultFlow } from "../utils/ai-chat-utils";
+import type { FlowOption, ToolResultFlow } from "../utils/ai-chat-utils";
 
 const EASE = [0.22, 1, 0.36, 1] as const;
 
 interface AiChatFlowProps {
   flow: ToolResultFlow;
-  onComplete: (answers: { stepId: string; prompt: string; answer: string }[]) => void;
+  onComplete: (
+    answers: { stepId: string; prompt: string; answer: string }[],
+  ) => void;
   onDismiss: () => void;
   /** Called on mount and on every step change with a resolver for the current step's free-text answer. */
   onFreeTextReady?: (resolve: (text: string) => void) => void;
 }
 
-export function AiChatFlow({ flow, onComplete, onDismiss, onFreeTextReady }: AiChatFlowProps) {
+export function AiChatFlow({
+  flow,
+  onComplete,
+  onDismiss,
+  onFreeTextReady,
+}: AiChatFlowProps) {
   const [stepIndex, setStepIndex] = useState(0);
-  const [answers, setAnswers] = useState<{ stepId: string; prompt: string; answer: string }[]>([]);
+  const [answers, setAnswers] = useState<
+    { stepId: string; prompt: string; answer: string }[]
+  >([]);
 
-  const step = flow.steps[stepIndex] as FlowStep;
+  const step = flow.steps[stepIndex];
   const isFirst = stepIndex === 0;
   const isLast = stepIndex === flow.steps.length - 1;
   const total = flow.steps.length;
 
-  const advance = (updated: { stepId: string; prompt: string; answer: string }[]) => {
+  const advance = (
+    updated: { stepId: string; prompt: string; answer: string }[],
+  ) => {
     if (isLast) {
       onComplete(updated);
     } else {
@@ -138,7 +149,12 @@ export function AiChatFlow({ flow, onComplete, onDismiss, onFreeTextReady }: AiC
         >
           {step.options.map((option, i) => (
             <div key={option.id}>
-              {i > 0 && <div className="mx-6 border-t border-border" aria-hidden="true" />}
+              {i > 0 && (
+                <div
+                  className="mx-6 border-t border-border"
+                  aria-hidden="true"
+                />
+              )}
               <button
                 type="button"
                 className="w-full text-left px-6 py-3.5 text-sm transition-colors hover:bg-muted text-foreground flex items-center gap-3"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
index d3e29bc4f..920c2d619 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-input.tsx
@@ -1,3 +1,4 @@
+// oxlint-disable eslint/max-lines -- input bundles file handling, paste, quote chip, and lightbox portal; split would add indirection
 "use client";
 
 import {
@@ -36,6 +37,7 @@ import {
 } from "@/registry/tooltip/tooltip";
 
 interface PendingFile {
+  uid: string;
   name: string;
   size: number;
   type: string;
@@ -58,6 +60,22 @@ interface AiChatInputProps {
   onClearQuote?: () => void;
 }
 
+function makePendingFile(file: File, nameOverride?: string): PendingFile {
+  const uid = crypto.randomUUID();
+  const name = nameOverride ?? file.name;
+  if (file.type.startsWith("image/")) {
+    return {
+      uid,
+      name,
+      size: file.size,
+      type: file.type,
+      file,
+      thumbnailUrl: URL.createObjectURL(file),
+    };
+  }
+  return { uid, name, size: file.size, type: file.type, file };
+}
+
 export interface AiChatInputHandle {
   focus: () => void;
 }
@@ -89,9 +107,11 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
 
     useEffect(() => {
       if (!lightboxUrl) return;
-      const handler = (e: KeyboardEvent) => { if (e.key === "Escape") setLightboxUrl(null); };
-      document.addEventListener("keydown", handler as EventListener);
-      return () => document.removeEventListener("keydown", handler as EventListener);
+      const handler = (e: globalThis.KeyboardEvent) => {
+        if (e.key === "Escape") setLightboxUrl(null);
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
     }, [lightboxUrl]);
 
     useImperativeHandle(ref, () => ({
@@ -116,7 +136,8 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
     const submitMessage = () => {
       if (!value.trim()) return;
       const files = pendingFiles.map((f) => f.file);
-      onSubmit(files.length > 0 ? files : undefined);
+      if (files.length > 0) onSubmit(files);
+      else onSubmit();
       pendingFiles.forEach((f) => {
         if (f.thumbnailUrl) URL.revokeObjectURL(f.thumbnailUrl);
       });
@@ -139,17 +160,6 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       }
     };
 
-    const makePendingFile = (
-      file: File,
-      nameOverride?: string,
-    ): PendingFile => {
-      const name = nameOverride ?? file.name;
-      const thumbnailUrl = file.type.startsWith("image/")
-        ? URL.createObjectURL(file)
-        : undefined;
-      return { name, size: file.size, type: file.type, file, thumbnailUrl };
-    };
-
     const handleFileClick = () => {
       const fileInput = document.createElement("input");
       fileInput.type = "file";
@@ -181,9 +191,9 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
           const file = item.getAsFile();
           if (!file) return [];
           const name =
-            file.name !== ""
-              ? file.name
-              : `pasted-image.${file.type.split("/")[1]}`;
+            file.name === ""
+              ? `pasted-image.${file.type.split("/")[1]}`
+              : file.name;
           return [makePendingFile(file, name)];
         });
       if (imageFiles.length > 0) {
@@ -240,14 +250,16 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
       <div className="flex flex-wrap gap-1.5 px-[10px] pt-2">
         {pendingFiles.map((f, i) => (
           <div
-            key={`${f.name}-${i}`}
+            key={f.uid}
             className="relative flex items-center gap-1 rounded-md bg-muted text-xs text-foreground overflow-hidden"
           >
             {f.thumbnailUrl ? (
               <>
                 <button
                   type="button"
-                  onClick={() => setLightboxUrl(f.thumbnailUrl!)}
+                  onClick={() => {
+                    if (f.thumbnailUrl) setLightboxUrl(f.thumbnailUrl);
+                  }}
                   className="flex-shrink-0 focus:outline-none"
                   aria-label={`Preview ${f.name}`}
                 >
@@ -342,66 +354,89 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
 
     return (
       <>
-      <div className="relative z-10 mt-auto pt-3 px-4">
-        <div className="relative">
-          <div
-            ref={glowRef}
-            className={`absolute pointer-events-none transition-opacity duration-500 ${hasMessages ? "opacity-0" : "opacity-100"}`}
-            style={{
-              top: "-56px",
-              left: "-48px",
-              right: "-48px",
-              bottom: "-64px",
-            }}
-            aria-hidden="true"
-          >
-            <svg
-              viewBox="0 0 561 176"
-              preserveAspectRatio="none"
-              className="w-full h-full"
-              style={{ overflow: "visible" }}
+        <div className="relative z-10 mt-auto pt-3 px-4">
+          <div className="relative">
+            <div
+              ref={glowRef}
+              className={`absolute pointer-events-none transition-opacity duration-500 ${hasMessages ? "opacity-0" : "opacity-100"}`}
+              style={{
+                top: "-56px",
+                left: "-48px",
+                right: "-48px",
+                bottom: "-64px",
+              }}
               aria-hidden="true"
             >
-              <defs>
-                <filter
-                  id="ai-chat-input-glow"
-                  x="-25%"
-                  y="-50%"
-                  width="150%"
-                  height="200%"
-                >
-                  <feGaussianBlur stdDeviation="10" />
-                </filter>
-                <linearGradient
-                  id="ai-chat-input-gradient"
-                  x1="375.705"
-                  y1="97.1886"
-                  x2="356.926"
-                  y2="19.642"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop stopColor="#69C7DD" />
-                  <stop offset="1" stopColor="#6C5AEF" />
-                </linearGradient>
-              </defs>
-              <path
-                d="M124.909 87.7963L40.0002 119.001L40.0471 121.245L88.6762 130.906C132.72 132.472 223.153 135.555 232.53 135.359C244.251 135.113 315.666 133.619 447.602 128.917C579.537 124.214 504.087 109.289 446.803 90.7685C428.089 88.9151 405.086 89.6999 383 82.3956C360.914 75.0913 357.352 70.9186 338.481 61.6054C319.611 52.2922 308.392 55.8035 286.366 51.4103C264.341 47.0172 245.606 44.1934 181.911 40.9756C118.215 37.7579 138.966 43.5125 129.849 43.7033C122.556 43.8559 113.044 50.082 109.2 53.176L124.454 66.084L124.909 87.7963Z"
-                fill="url(#ai-chat-input-gradient)"
-                fillOpacity="0.25"
-                filter="url(#ai-chat-input-glow)"
-              />
-            </svg>
-          </div>
-          {hasMessages ? (
-            <form
-              onSubmit={handleSubmit}
-              className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
-              {...focusStyles}
-            >
-              {quoteChip}
-              {fileChips}
-              <div className="flex items-end gap-2 pl-[8px] pr-[8px] pt-[4px] pb-[8px]">
-                {plusMenu}
+              <svg
+                viewBox="0 0 561 176"
+                preserveAspectRatio="none"
+                className="w-full h-full"
+                style={{ overflow: "visible" }}
+                aria-hidden="true"
+              >
+                <defs>
+                  <filter
+                    id="ai-chat-input-glow"
+                    x="-25%"
+                    y="-50%"
+                    width="150%"
+                    height="200%"
+                  >
+                    <feGaussianBlur stdDeviation="10" />
+                  </filter>
+                  <linearGradient
+                    id="ai-chat-input-gradient"
+                    x1="375.705"
+                    y1="97.1886"
+                    x2="356.926"
+                    y2="19.642"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="#69C7DD" />
+                    <stop offset="1" stopColor="#6C5AEF" />
+                  </linearGradient>
+                </defs>
+                <path
+                  d="M124.909 87.7963L40.0002 119.001L40.0471 121.245L88.6762 130.906C132.72 132.472 223.153 135.555 232.53 135.359C244.251 135.113 315.666 133.619 447.602 128.917C579.537 124.214 504.087 109.289 446.803 90.7685C428.089 88.9151 405.086 89.6999 383 82.3956C360.914 75.0913 357.352 70.9186 338.481 61.6054C319.611 52.2922 308.392 55.8035 286.366 51.4103C264.341 47.0172 245.606 44.1934 181.911 40.9756C118.215 37.7579 138.966 43.5125 129.849 43.7033C122.556 43.8559 113.044 50.082 109.2 53.176L124.454 66.084L124.909 87.7963Z"
+                  fill="url(#ai-chat-input-gradient)"
+                  fillOpacity="0.25"
+                  filter="url(#ai-chat-input-glow)"
+                />
+              </svg>
+            </div>
+            {hasMessages ? (
+              <form
+                onSubmit={handleSubmit}
+                className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
+                {...focusStyles}
+              >
+                {quoteChip}
+                {fileChips}
+                <div className="flex items-end gap-2 pl-[8px] pr-[8px] pt-[4px] pb-[8px]">
+                  {plusMenu}
+                  <textarea
+                    ref={textareaRef}
+                    value={value}
+                    onChange={(e) => handleChange(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    placeholder={displayPlaceholder}
+                    aria-label={displayPlaceholder}
+                    className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] pt-[12px] pb-[8px] leading-[20px]"
+                    rows={1}
+                    disabled={disabled}
+                  />
+                  {sendStopButton}
+                </div>
+              </form>
+            ) : (
+              <form
+                onSubmit={handleSubmit}
+                className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
+                {...focusStyles}
+              >
+                {quoteChip}
+                {fileChips}
                 <textarea
                   ref={textareaRef}
                   value={value}
@@ -410,66 +445,44 @@ export const AiChatInput = forwardRef<AiChatInputHandle, AiChatInputProps>(
                   onPaste={handlePaste}
                   placeholder={displayPlaceholder}
                   aria-label={displayPlaceholder}
-                  className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none max-h-[200px] overflow-y-auto h-[40px] pt-[12px] pb-[8px] leading-[20px]"
+                  className="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[80px] px-[22px] pt-5 pb-2 leading-relaxed"
                   rows={1}
                   disabled={disabled}
                 />
-                {sendStopButton}
-              </div>
-            </form>
-          ) : (
-            <form
-              onSubmit={handleSubmit}
-              className="relative flex flex-col rounded-lg border-2 border-input transition-colors bg-background"
-              {...focusStyles}
+                <div className="flex items-center justify-between px-[8px] pb-[8px]">
+                  {plusMenu}
+                  {sendStopButton}
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+        {lightboxUrl &&
+          createPortal(
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+              onClick={() => setLightboxUrl(null)}
+              role="dialog"
+              aria-modal="true"
+              aria-label="Image preview"
             >
-              {quoteChip}
-              {fileChips}
-              <textarea
-                ref={textareaRef}
-                value={value}
-                onChange={(e) => handleChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onPaste={handlePaste}
-                placeholder={displayPlaceholder}
-                aria-label={displayPlaceholder}
-                className="w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none h-[80px] px-[22px] pt-5 pb-2 leading-relaxed"
-                rows={1}
-                disabled={disabled}
+              <button
+                type="button"
+                className="absolute top-4 right-4 size-8 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 text-white transition-colors"
+                onClick={() => setLightboxUrl(null)}
+                aria-label="Close preview"
+              >
+                <X className="size-4" aria-hidden="true" />
+              </button>
+              <img
+                src={lightboxUrl}
+                alt="Preview"
+                className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
+                onClick={(e) => e.stopPropagation()}
               />
-              <div className="flex items-center justify-between px-[8px] pb-[8px]">
-                {plusMenu}
-                {sendStopButton}
-              </div>
-            </form>
+            </div>,
+            document.body,
           )}
-        </div>
-      </div>
-      {lightboxUrl && createPortal(
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
-          onClick={() => setLightboxUrl(null)}
-          role="dialog"
-          aria-modal="true"
-          aria-label="Image preview"
-        >
-          <button
-            type="button"
-            className="absolute top-4 right-4 size-8 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 text-white transition-colors"
-            onClick={() => setLightboxUrl(null)}
-            aria-label="Close preview"
-          >
-            <X className="size-4" aria-hidden="true" />
-          </button>
-          <img
-            src={lightboxUrl}
-            alt="Preview"
-            className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          />
-        </div>,
-        document.body,
-      )}
       </>
     );
   },
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
index bbd695466..3629a66d9 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-markdown.tsx
@@ -13,7 +13,10 @@ function extractCodeProps(props: NodeProps & { className?: string }) {
   const { className, children } = props;
   const match = /language-(\w+)/.exec(className ?? "");
   const language = match ? match[1] : "";
-  const code = String(children).replace(/\n$/, "");
+  const code = (typeof children === "string" ? children : "").replace(
+    /\n$/,
+    "",
+  );
   return { language, code };
 }
 
@@ -39,7 +42,7 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
     ...props
   }: NodeProps & { className?: string }) => {
     const isBlock =
-      className?.startsWith("language-") ||
+      (className?.startsWith("language-") ?? false) ||
       (typeof children === "string" && children.includes("\n"));
 
     if (isBlock) {
@@ -67,7 +70,7 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   ),
   img: ({ src, alt, title }: ImageProps) => (
     <img
-      src={typeof src === "string" ? src : undefined}
+      src={typeof src === "string" ? src : ""}
       alt={alt ?? ""}
       title={title}
       loading="lazy"
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
index fd34ccf87..9cce3e036 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message-actions.tsx
@@ -58,10 +58,9 @@ export function AiChatMessageActions({
   // Latest assistant message keeps actions always visible. Everything else
   // (older assistant messages, all user messages) reveals on hover/focus
   // for keyboard a11y.
-  const visibilityClass =
-    isLatest
-      ? "opacity-100"
-      : "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100";
+  const visibilityClass = isLatest
+    ? "opacity-100"
+    : "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100";
 
   return (
     <div
@@ -72,7 +71,9 @@ export function AiChatMessageActions({
           <TooltipTrigger asChild>
             <button
               type="button"
-              onClick={handleCopy}
+              onClick={() => {
+                void handleCopy();
+              }}
               className="size-7 inline-flex items-center justify-center rounded-md hover:bg-ai-chat-muted transition-colors"
               aria-label={copyLabel}
             >
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
index f0b86e6eb..69de0e8ac 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx
@@ -76,7 +76,11 @@ export function AiChatMessage({
   const [editValue, setEditValue] = useState(displayContent);
   const editTextareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [selectionMenu, setSelectionMenu] = useState<{ x: number; y: number; text: string } | null>(null);
+  const [selectionMenu, setSelectionMenu] = useState<{
+    x: number;
+    y: number;
+    text: string;
+  } | null>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
   const handleMouseUp = () => {
@@ -193,7 +197,7 @@ export function AiChatMessage({
                 onClick={() => setIsEditing(false)}
                 className="px-3 py-1 text-xs rounded-md hover:bg-muted text-muted-foreground transition-colors"
               >
-                Cancel
+                {"Cancel"}
               </button>
               <button
                 type="button"
@@ -201,7 +205,7 @@ export function AiChatMessage({
                 disabled={!editValue.trim()}
                 className="px-3 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors"
               >
-                Save &amp; re-run
+                {"Save & re-run"}
               </button>
             </div>
           </div>
@@ -220,14 +224,17 @@ export function AiChatMessage({
           <div className="px-4 py-2 text-sm leading-6 rounded-2xl rounded-br-md bg-ai-chat-bubble-user text-ai-chat-bubble-user-foreground">
             {attachments && attachments.length > 0 && (
               <div className="flex flex-wrap gap-1.5 mb-2">
-                {attachments.map((att, i) => (
+                {attachments.map((att) => (
                   <div
-                    key={`${att.name}-${i}`}
+                    key={att.name}
                     className="flex items-center gap-1 pl-2 pr-2 py-1 rounded-md bg-white/10 text-xs"
                   >
-                    <FileText className="size-3 flex-shrink-0 opacity-70" aria-hidden="true" />
+                    <FileText
+                      className="size-3 flex-shrink-0 opacity-70"
+                      aria-hidden="true"
+                    />
                     <span className="truncate max-w-[120px]">{att.name}</span>
-                    {att.size !== undefined && (
+                    {att.size != null && (
                       <span className="opacity-60 flex-shrink-0">
                         {formatFileSize(att.size)}
                       </span>
@@ -245,7 +252,9 @@ export function AiChatMessage({
               content={displayContent}
               messageRole="user"
               showCopy={config.showCopyButton}
-              {...(config.onEditMessage ? { onEdit: () => setIsEditing(true) } : {})}
+              {...(config.onEditMessage
+                ? { onEdit: () => setIsEditing(true) }
+                : {})}
             />
           )}
         </div>
@@ -274,79 +283,90 @@ export function AiChatMessage({
           onDismiss={() => setSelectionMenu(null)}
         />
       )}
-    <motion.div
-      className="flex w-full justify-start"
-      initial={ENTRANCE_INITIAL}
-      animate={ENTRANCE_ANIMATE}
-      transition={ENTRANCE_TRANSITION}
-      onMouseUp={handleMouseUp}
-    >
-      <div ref={contentRef} className="group/message flex flex-col gap-3 max-w-[85%]">
-        {displayContent && !messageHasChoices(message) && (
-          isResponseFullyRevealed ? (
-            <AiChatMarkdown>{displayedText}</AiChatMarkdown>
-          ) : (
-            <p className="py-1 text-base leading-relaxed text-foreground whitespace-pre-wrap">{displayedText}</p>
-          )
-        )}
-        {children && <div className="mt-2 flex flex-col gap-2">{children}</div>}
-
-        {sources && sources.length > 0 && isResponseFullyRevealed && (
-          <motion.div
-            className="flex flex-wrap gap-1.5"
-            initial={{ opacity: 0, y: 4 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
-          >
-            {sources.map((source, i) =>
-              source.url ? (
-                <a
-                  key={i}
-                  href={source.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="no-underline"
-                >
-                  <Badge variant="outline" className="gap-1 cursor-pointer hover:bg-muted transition-colors">
-                    <ExternalLink className="size-3" aria-hidden="true" />
-                    {source.label}
-                  </Badge>
-                </a>
-              ) : (
-                <Badge key={i} variant="outline" className="gap-1">
-                  <ExternalLink className="size-3" aria-hidden="true" />
-                  {source.label}
-                </Badge>
-              ),
-            )}
-          </motion.div>
-        )}
+      <motion.div
+        className="flex w-full justify-start"
+        initial={ENTRANCE_INITIAL}
+        animate={ENTRANCE_ANIMATE}
+        transition={ENTRANCE_TRANSITION}
+        onMouseUp={handleMouseUp}
+      >
+        <div
+          ref={contentRef}
+          className="group/message flex flex-col gap-3 max-w-[85%]"
+        >
+          {displayContent &&
+            !messageHasChoices(message) &&
+            (isResponseFullyRevealed ? (
+              <AiChatMarkdown>{displayedText}</AiChatMarkdown>
+            ) : (
+              <p className="py-1 text-base leading-relaxed text-foreground whitespace-pre-wrap">
+                {displayedText}
+              </p>
+            ))}
+          {children && (
+            <div className="mt-2 flex flex-col gap-2">{children}</div>
+          )}
 
-        {config.showMessageActions &&
-          !isInActiveChoicesTurn &&
-          isResponseFullyRevealed && (
+          {sources && sources.length > 0 && isResponseFullyRevealed && (
             <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+              className="flex flex-wrap gap-1.5"
+              initial={{ opacity: 0, y: 4 }}
+              animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
             >
-              <AiChatMessageActions
-                content={displayContent}
-                messageRole="assistant"
-                isLatest={isLatestAssistant}
-                showCopy={config.showCopyButton}
-                {...(onFeedback ?? config.onFeedback
-                  ? {
-                      onFeedback:
-                        onFeedback ?? ((type) => config.onFeedback?.(message.id, type)),
-                    }
-                  : {})}
-                onRegenerate={onRegenerate ?? config.onRegenerate}
-              />
+              {sources.map((source) =>
+                source.url ? (
+                  <a
+                    key={source.url}
+                    href={source.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="no-underline"
+                  >
+                    <Badge
+                      variant="outline"
+                      className="gap-1 cursor-pointer hover:bg-muted transition-colors"
+                    >
+                      <ExternalLink className="size-3" aria-hidden="true" />
+                      {source.label}
+                    </Badge>
+                  </a>
+                ) : (
+                  <Badge key={source.label} variant="outline" className="gap-1">
+                    <ExternalLink className="size-3" aria-hidden="true" />
+                    {source.label}
+                  </Badge>
+                ),
+              )}
             </motion.div>
           )}
-      </div>
-    </motion.div>
+
+          {config.showMessageActions &&
+            !isInActiveChoicesTurn &&
+            isResponseFullyRevealed && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
+              >
+                <AiChatMessageActions
+                  content={displayContent}
+                  messageRole="assistant"
+                  isLatest={isLatestAssistant}
+                  showCopy={config.showCopyButton}
+                  {...((onFeedback ?? config.onFeedback)
+                    ? {
+                        onFeedback:
+                          onFeedback ??
+                          ((type) => config.onFeedback?.(message.id, type)),
+                      }
+                    : {})}
+                  onRegenerate={onRegenerate ?? config.onRegenerate}
+                />
+              </motion.div>
+            )}
+        </div>
+      </motion.div>
     </>
   );
 }
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
index c000e150a..c82338ee7 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-provider.tsx
@@ -16,7 +16,6 @@ const defaultConfig: AiChatConfig = {
   setIsLatestResponseAnimating: () => {
     // no-op default — replaced by AiChat with the real setter via context override
   },
-  onEditMessage: undefined,
 };
 
 const AiChatContext = createContext<AiChatConfig>(defaultConfig);
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx
index 6269a3108..ae581625c 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-selection-menu.tsx
@@ -22,7 +22,10 @@ export function AiChatSelectionMenu({
   // Dismiss on outside mousedown
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      if (
+        ref.current &&
+        !(e.target instanceof Node && ref.current.contains(e.target))
+      ) {
         onDismiss();
       }
     };
@@ -40,7 +43,11 @@ export function AiChatSelectionMenu({
       }}
       onClick={onAsk}
       className="fixed z-50 flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-background border border-border shadow-md text-xs font-semibold text-foreground hover:bg-muted transition-colors"
-      style={{ left: x, top: y, transform: "translate(-50%, -100%) translateY(-8px)" }}
+      style={{
+        left: x,
+        top: y,
+        transform: "translate(-50%, -100%) translateY(-8px)",
+      }}
       aria-label="Ask Autopilot about selected text"
     >
       <AutopilotGradientIcon size={14} aria-hidden="true" />
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
index eda68f5a8..213f5e0b5 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat-suggestions.tsx
@@ -2,7 +2,7 @@
 
 import { ChevronLeft, ChevronRight, Loader2, X } from "lucide-react";
 import { motion } from "framer-motion";
-import type { ChoiceOption, ToolResultChoices } from "../types";
+import type { ChoiceOption } from "../types";
 
 const ENTRANCE_EASE = [0.22, 1, 0.36, 1] as const;
 
@@ -56,7 +56,7 @@ export function AiChatSuggestions({
   onSkip,
   onDismiss,
 }: AiChatSuggestionsProps) {
-  const isMultiStep = step !== undefined;
+  const isMultiStep = step != null;
 
   if (isMultiStep) {
     return (
@@ -70,7 +70,10 @@ export function AiChatSuggestions({
         <div className="flex items-center justify-between px-4 pt-3 pb-2">
           <div className="flex items-center gap-2">
             {isLoading ? (
-              <Loader2 className="size-3.5 animate-spin text-muted-foreground" aria-hidden="true" />
+              <Loader2
+                className="size-3.5 animate-spin text-muted-foreground"
+                aria-hidden="true"
+              />
             ) : (
               <>
                 {canGoBack && onBack && (
@@ -85,7 +88,8 @@ export function AiChatSuggestions({
                 )}
                 {totalSteps && (
                   <span className="text-xs text-muted-foreground">
-                    {step} <span className="opacity-40">/</span> {totalSteps}
+                    {step} <span className="opacity-40">{"/"}</span>{" "}
+                    {totalSteps}
                   </span>
                 )}
               </>
@@ -117,7 +121,9 @@ export function AiChatSuggestions({
 
         {/* Prompt */}
         {prompt && (
-          <p className="px-4 pb-3 text-sm font-medium text-foreground">{prompt}</p>
+          <p className="px-4 pb-3 text-sm font-medium text-foreground">
+            {prompt}
+          </p>
         )}
 
         {/* Options */}
diff --git a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
index bea19c3dc..23d82f08b 100644
--- a/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
+++ b/apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx
@@ -131,7 +131,10 @@ export function AiChat({
 
   const displayName = assistantName ?? t("ai_assistant");
 
-  const queuedMessageRef = useRef<{ content: string; attachments?: File[] } | null>(null);
+  const queuedMessageRef = useRef<{
+    content: string;
+    attachments?: File[];
+  } | null>(null);
   const [conversationCopied, setConversationCopied] = useState(false);
   const flowFreeTextResolveRef = useRef<((text: string) => void) | null>(null);
 
@@ -191,10 +194,11 @@ export function AiChat({
       }
     }
     wasLoadingRef.current = isLoading;
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- onSendMessage/scrollToBottom are stable enough; adding them would retrigger on every render
   }, [isLoading]);
 
   const latestChoices = findLatestChoices(messages);
-  const isMultiStep = latestChoices?.step !== undefined;
+  const isMultiStep = latestChoices?.step != null;
   const latestFlow = findLatestFlow(messages);
   const [flowDismissed, setFlowDismissed] = useState(false);
   const prevFlowIdRef = useRef<string | null>(null);
@@ -255,7 +259,9 @@ export function AiChat({
       onFeedback={onFeedback}
       onRegenerate={onRegenerate}
       onEditMessage={onEditMessage}
-      {...(enableTextSelection ? { onQuoteSelect: (text) => setQuotedText(text) } : {})}
+      {...(enableTextSelection
+        ? { onQuoteSelect: (text) => setQuotedText(text) }
+        : {})}
     >
       <div
         className="flex flex-col h-full max-w-[680px] mx-auto bg-transparent text-ai-chat-foreground overflow-hidden"
@@ -290,7 +296,11 @@ export function AiChat({
                       </button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                      <DropdownMenuItem onClick={handleCopyConversation}>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          void handleCopyConversation();
+                        }}
+                      >
                         {conversationCopied ? "Copied!" : "Copy conversation"}
                       </DropdownMenuItem>
                       {onClearChat && showClearButton && (
@@ -313,7 +323,12 @@ export function AiChat({
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                       <AlertDialogCancel>{"Cancel"}</AlertDialogCancel>
-                      <AlertDialogAction onClick={() => { onClearChat?.(); setChoiceHistory([]); }}>
+                      <AlertDialogAction
+                        onClick={() => {
+                          onClearChat?.();
+                          setChoiceHistory([]);
+                        }}
+                      >
                         {"New conversation"}
                       </AlertDialogAction>
                     </AlertDialogFooter>
@@ -385,21 +400,26 @@ export function AiChat({
                 {children}
 
                 {/* Single-step choices render inline */}
-                {latestChoices && !latestChoices.step && !isLoading && !isLatestResponseAnimating && (
-                  <AiChatSuggestions
-                    prompt={latestChoices.prompt}
-                    options={latestChoices.options}
-                    onSelect={(option) => {
-                      if (onChoiceSelect) {
-                        onChoiceSelect(option);
-                      } else {
-                        onSendMessage(option.label);
-                      }
-                    }}
-                  />
-                )}
+                {latestChoices &&
+                  !latestChoices.step &&
+                  !isLoading &&
+                  !isLatestResponseAnimating && (
+                    <AiChatSuggestions
+                      prompt={latestChoices.prompt}
+                      options={latestChoices.options}
+                      onSelect={(option) => {
+                        if (onChoiceSelect) {
+                          onChoiceSelect(option);
+                        } else {
+                          onSendMessage(option.label);
+                        }
+                      }}
+                    />
+                  )}
 
-                {showLoadingIndicator && !isMultiStep && !isFlowActive && <AiChatLoading />}
+                {showLoadingIndicator && !isMultiStep && !isFlowActive && (
+                  <AiChatLoading />
+                )}
               </div>
             </div>
 
@@ -422,23 +442,25 @@ export function AiChat({
                       onSendMessage(option.label);
                     }
                   }}
-                  onBack={
-                    latestChoices.canGoBack && choiceHistory.length > 0
-                      ? () => {
+                  {...(latestChoices.canGoBack && choiceHistory.length > 0
+                    ? {
+                        onBack: () => {
                           const prev = choiceHistory.at(-1);
                           setChoiceHistory((h) => h.slice(0, -1));
-                          onSendMessage(`Actually, let me revise my previous answer: ${prev}`);
-                        }
-                      : undefined
-                  }
-                  onSkip={
-                    latestChoices.canSkip
-                      ? () => {
+                          onSendMessage(
+                            `Actually, let me revise my previous answer: ${prev}`,
+                          );
+                        },
+                      }
+                    : {})}
+                  {...(latestChoices.canSkip
+                    ? {
+                        onSkip: () => {
                           setChoiceHistory((h) => [...h, "(skipped)"]);
                           onSendMessage("Skip this step");
-                        }
-                      : undefined
-                  }
+                        },
+                      }
+                    : {})}
                   onDismiss={() => {
                     setChoiceHistory([]);
                     onSendMessage("Never mind, let's stop here");
@@ -507,7 +529,7 @@ export function AiChat({
                 />
               </div>
             )}
-            <div className={isFlowActive ? "relative z-10 -mt-[76px]" : undefined}>
+            <div className={isFlowActive ? "relative z-10 -mt-[76px]" : ""}>
               <AiChatInput
                 ref={inputRef}
                 value={input}
@@ -515,7 +537,9 @@ export function AiChat({
                 onSubmit={handleSubmit}
                 onStop={onStop}
                 isLoading={isLoading}
-                placeholder={isFlowActive ? "Or type your own answer..." : placeholder}
+                placeholder={
+                  isFlowActive ? "Or type your own answer..." : placeholder
+                }
                 hasMessages
                 quotedText={quotedText}
                 onClearQuote={() => setQuotedText(null)}
diff --git a/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
index 410681f96..8efe20866 100644
--- a/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
+++ b/apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts
@@ -19,10 +19,23 @@ const presentChoicesInput = z.object({
     .min(2)
     .max(6)
     .describe("2 to 6 options for the user to pick from"),
-  step: z.number().optional().describe("Current step number (1-based) — include when this is part of a multi-step flow"),
-  totalSteps: z.number().optional().describe("Total number of steps in the flow — include alongside step"),
+  step: z
+    .number()
+    .optional()
+    .describe(
+      "Current step number (1-based) — include when this is part of a multi-step flow",
+    ),
+  totalSteps: z
+    .number()
+    .optional()
+    .describe("Total number of steps in the flow — include alongside step"),
   canSkip: z.boolean().optional().describe("Show a skip button for this step"),
-  canGoBack: z.boolean().optional().describe("Show a back button to let the user revise their previous answer"),
+  canGoBack: z
+    .boolean()
+    .optional()
+    .describe(
+      "Show a back button to let the user revise their previous answer",
+    ),
 });
 
 const presentChoicesOutput = presentChoicesInput.extend({
diff --git a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
index 600ea2e8c..08e016cb9 100644
--- a/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
+++ b/apps/apollo-vertex/registry/ai-chat/examples/flow-tool.ts
@@ -5,9 +5,20 @@ import { z } from "zod";
 const flowOptionSchema = z.object({
   id: z.string().describe("Unique identifier for this option"),
   label: z.string().describe("Button text shown to the user"),
-  value: z.string().optional().describe("Optional payload value — defaults to label if omitted"),
-  recommended: z.boolean().optional().describe("Highlight this as the recommended choice"),
-  freeText: z.boolean().optional().describe("When true, selecting this option lets the user type a custom answer in the input instead of choosing a preset"),
+  value: z
+    .string()
+    .optional()
+    .describe("Optional payload value — defaults to label if omitted"),
+  recommended: z
+    .boolean()
+    .optional()
+    .describe("Highlight this as the recommended choice"),
+  freeText: z
+    .boolean()
+    .optional()
+    .describe(
+      "When true, selecting this option lets the user type a custom answer in the input instead of choosing a preset",
+    ),
 });
 
 const flowStepSchema = z.object({
@@ -18,7 +29,11 @@ const flowStepSchema = z.object({
 });
 
 const presentFlowInput = z.object({
-  steps: z.array(flowStepSchema).min(2).max(8).describe("Ordered list of steps — all defined upfront"),
+  steps: z
+    .array(flowStepSchema)
+    .min(2)
+    .max(8)
+    .describe("Ordered list of steps — all defined upfront"),
 });
 
 const presentFlowOutput = presentFlowInput.extend({
diff --git a/apps/apollo-vertex/registry/ai-chat/types.ts b/apps/apollo-vertex/registry/ai-chat/types.ts
index b9ef932e6..bde62fcf1 100644
--- a/apps/apollo-vertex/registry/ai-chat/types.ts
+++ b/apps/apollo-vertex/registry/ai-chat/types.ts
@@ -1,4 +1,7 @@
-export type { MessageAttachment, MessageSource } from "./components/ai-chat-message";
+export type {
+  MessageAttachment,
+  MessageSource,
+} from "./components/ai-chat-message";
 export type { ChoiceOption, ToolResultChoices } from "./utils/ai-chat-utils";
 
 export type MessageFeedbackType = "up" | "down";
diff --git a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
index 9564a978c..b95a66cb1 100644
--- a/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
+++ b/apps/apollo-vertex/registry/ai-chat/utils/ai-chat-utils.ts
@@ -27,6 +27,16 @@ export type FlowOption = z.infer<typeof flowOptionSchema>;
 export type FlowStep = z.infer<typeof flowStepSchema>;
 export type ToolResultFlow = z.infer<typeof toolResultFlowSchema>;
 
+function tryParseFlow(content: string): ToolResultFlow | null {
+  try {
+    const result = toolResultFlowSchema.safeParse(JSON.parse(content));
+    return result.success ? result.data : null;
+  } catch {
+    // invalid JSON — not a flow result
+    return null;
+  }
+}
+
 export function findLatestFlow(messages: UIMessage[]): ToolResultFlow | null {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
@@ -36,13 +46,13 @@ export function findLatestFlow(messages: UIMessage[]): ToolResultFlow | null {
 
     for (const part of msg.parts) {
       if (part.type === "tool-result" && "content" in part) {
-        try {
-          const result = toolResultFlowSchema.safeParse(JSON.parse(part.content));
-          if (result.success) return result.data;
-        } catch { /* skip */ }
+        const result = tryParseFlow(part.content);
+        if (result) return result;
       }
       if (part.type === "tool-call" && "output" in part) {
-        const result = toolResultFlowSchema.safeParse((part as { output?: unknown }).output);
+        const result = toolResultFlowSchema.safeParse(
+          (part as { output?: unknown }).output,
+        );
         if (result.success) return result.data;
       }
     }
@@ -106,8 +116,16 @@ export function messageHasChoices(message: UIMessage): boolean {
     // tool-result with stringified JSON content
     if (part.type === "tool-result" && "content" in part) {
       try {
-        const parsed = JSON.parse((part as { content: string }).content);
-        if (parsed?.type === "choices") return true;
+        const parsed: unknown = JSON.parse(
+          (part as { content: string }).content,
+        );
+        if (
+          parsed !== null &&
+          typeof parsed === "object" &&
+          "type" in parsed &&
+          (parsed as { type: unknown }).type === "choices"
+        )
+          return true;
       } catch {
         // invalid JSON, skip
       }
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
index a1e4bbc3c..9134ff22a 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatAgentHubMode.tsx
@@ -55,8 +55,12 @@ export function AgentHubChat({ accessToken, orgTenant }: AgentHubChatProps) {
       }}
       onStop={stop}
       onClearChat={clear}
-      onRegenerate={reload}
-      onEditMessage={(_id, content) => { void sendMessage(content); }}
+      onRegenerate={() => {
+        void reload();
+      }}
+      onEditMessage={(_id, content) => {
+        void sendMessage(content);
+      }}
       title="Autopilot"
       assistantName={t("assistant")}
       enableTextSelection
diff --git a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
index b96acdd4d..1cfb33183 100644
--- a/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
+++ b/apps/apollo-vertex/templates/ai-chat/AiChatConversationalAgentMode.tsx
@@ -53,7 +53,9 @@ function ConversationalAgentChatInner({
       }}
       onStop={stop}
       onClearChat={clear}
-      onRegenerate={reload}
+      onRegenerate={() => {
+        void reload();
+      }}
       title={title}
       assistantName={assistantName}
       enableTextSelection