feat: replace AtlasChat with assistant-ui Thread component

- Install @assistant-ui/react and @assistant-ui/react-markdown
- components/assistant-ui/thread.tsx — full Thread UI with primitives
- components/assistant-ui/markdown-text.tsx — GFM markdown renderer
- AtlasChat.tsx — useLocalRuntime adapter calling existing atlas-chat API

Gives proper markdown rendering, branch switching, copy/retry actions,
cancel button during streaming, and a polished thread experience.

Made-with: Cursor

components/AtlasChat.tsx

@@ -1,207 +1,109 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useEffect, useRef } from "react";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
-  Send,
+  AssistantRuntimeProvider,
-  Loader2,
+  useLocalRuntime,
-  User,
+  type ChatModelAdapter,
-  RotateCcw,
+} from "@assistant-ui/react";
-  FileText,
+import { Thread } from "@/components/assistant-ui/thread";
-  CheckCircle2,
+import { Button } from "@/components/ui/button";
-  ChevronDown,
+import { FileText, RotateCcw } from "lucide-react";
-  ChevronUp,
-} from "lucide-react";
 
 // ---------------------------------------------------------------------------
-// Types
+// Props
 // ---------------------------------------------------------------------------
 
-interface Message {
-  role: "user" | "assistant";
-  content: string;
-}
-
 interface AtlasChatProps {
   projectId: string;
   projectName?: string;
-  initialMessage?: string;
 }
 
 // ---------------------------------------------------------------------------
-// Atlas avatar — distinct from orchestrator
+// Runtime adapter — calls our existing /api/projects/[id]/atlas-chat endpoint
 // ---------------------------------------------------------------------------
 
-function AtlasAvatar() {
+function makeAtlasAdapter(projectId: string): ChatModelAdapter {
-  return (
+  return {
-    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-sm">
+    async run({ messages, abortSignal }) {
-      A
+      const lastUser = [...messages].reverse().find((m) => m.role === "user");
-    </div>
+      const text =
-  );
+        lastUser?.content
-}
+          .filter((p) => p.type === "text")
+          .map((p) => (p as { type: "text"; text: string }).text)
+          .join("") ?? "";
 
-// ---------------------------------------------------------------------------
+      const res = await fetch(`/api/projects/${projectId}/atlas-chat`, {
-// PRD preview panel
-// ---------------------------------------------------------------------------
-
-function PrdPanel({ content }: { content: string }) {
-  const [expanded, setExpanded] = useState(false);
-  const preview = content.split("\n").slice(0, 6).join("\n");
-
-  return (
-    <div className="mt-4 border border-violet-200 dark:border-violet-800 rounded-xl overflow-hidden bg-violet-50/50 dark:bg-violet-950/20">
-      <div className="flex items-center gap-2 px-4 py-3 bg-violet-100/60 dark:bg-violet-900/30">
-        <CheckCircle2 className="w-4 h-4 text-violet-600 dark:text-violet-400" />
-        <span className="text-sm font-semibold text-violet-700 dark:text-violet-300">
-          PRD Generated
-        </span>
-        <span className="text-xs text-muted-foreground ml-auto">
-          Ready for architecture phase
-        </span>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-6 px-2 text-xs text-violet-600"
-          onClick={() => setExpanded(!expanded)}
-        >
-          {expanded ? (
-            <ChevronUp className="w-3 h-3" />
-          ) : (
-            <ChevronDown className="w-3 h-3" />
-          )}
-        </Button>
-      </div>
-      <div className="px-4 py-3">
-        <pre className={`text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed ${expanded ? "" : "line-clamp-4"}`}>
-          {expanded ? content : preview}
-        </pre>
-        {!expanded && (
-          <button
-            onClick={() => setExpanded(true)}
-            className="text-xs text-violet-600 hover:underline mt-1"
-          >
-            View full PRD
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-
-export function AtlasChat({ projectId, projectName, initialMessage }: AtlasChatProps) {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [prdContent, setPrdContent] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [started, setStarted] = useState(false);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  // Auto-scroll to latest message
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
-
-  // Kick off Atlas with its opening message on first load
-  useEffect(() => {
-    if (started) return;
-    setStarted(true);
-    sendMessage(
-      initialMessage ||
-        `Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const sendMessage = useCallback(
-    async (text: string) => {
-      if (!text.trim() || loading) return;
-      setError(null);
-
-      const userMsg: Message = { role: "user", content: text };
-      setMessages((prev) => [...prev, userMsg]);
-      setInput("");
-      setLoading(true);
-
-      try {
-        const res = await fetch(
-          `/api/projects/${projectId}/atlas-chat`,
-          {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ message: text }),
+        signal: abortSignal,
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || "Atlas is unavailable. Please try again.");
       }
-        );
 
       const data = await res.json();
 
-        if (!res.ok) {
+      return {
-          setError(data.error || "Something went wrong. Please try again.");
+        content: [{ type: "text", text: data.reply || "…" }],
-          setMessages((prev) => prev.slice(0, -1));
-          return;
-        }
-
-        const assistantMsg: Message = {
-          role: "assistant",
-          content: data.reply || "...",
       };
-        setMessages((prev) => [...prev, assistantMsg]);
-
-        if (data.prdContent) {
-          setPrdContent(data.prdContent);
-        }
-      } catch {
-        setError("Couldn't reach Atlas. Check your connection and try again.");
-        setMessages((prev) => prev.slice(0, -1));
-      } finally {
-        setLoading(false);
-        setTimeout(() => textareaRef.current?.focus(), 50);
-      }
     },
-    [loading, projectId]
-  );
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage(input);
-    }
   };
+}
+
+// ---------------------------------------------------------------------------
+// Inner component — has access to runtime context
+// ---------------------------------------------------------------------------
+
+function AtlasChatInner({
+  projectId,
+  projectName,
+  runtime,
+}: AtlasChatProps & { runtime: ReturnType<typeof useLocalRuntime> }) {
+  const greeted = useRef(false);
+
+  // Send Atlas's opening message automatically on first load
+  useEffect(() => {
+    if (greeted.current) return;
+    greeted.current = true;
+
+    const opener =
+      `Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`;
+
+    // Small delay so the thread is mounted before we submit
+    const t = setTimeout(() => {
+      runtime.thread.composer.setText(opener);
+      runtime.thread.composer.send();
+    }, 300);
+
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleReset = async () => {
     if (!confirm("Start the discovery conversation over from scratch?")) return;
     await fetch(`/api/projects/${projectId}/atlas-chat`, { method: "DELETE" });
-    setMessages([]);
+    // Reload to get a fresh runtime state
-    setPrdContent(null);
+    window.location.reload();
-    setStarted(false);
-    setError(null);
   };
 
   return (
-    <div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden">
+    <div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden" style={{ height: "520px" }}>
       {/* Header */}
-      <div className="flex items-center justify-between px-5 py-3.5 border-b border-border/60 bg-gradient-to-r from-violet-50/80 to-indigo-50/50 dark:from-violet-950/30 dark:to-indigo-950/20">
+      <div className="flex items-center justify-between px-5 py-3.5 border-b border-border/60 bg-gradient-to-r from-violet-50/80 to-indigo-50/50 dark:from-violet-950/30 dark:to-indigo-950/20 shrink-0">
         <div className="flex items-center gap-3">
-          <AtlasAvatar />
+          <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shadow-sm">
+            A
+          </div>
           <div>
             <p className="text-sm font-semibold text-foreground">Atlas</p>
             <p className="text-xs text-muted-foreground">Product Requirements</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          {prdContent && (
-            <div className="flex items-center gap-1.5 text-xs text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/40 px-2.5 py-1 rounded-full">
-              <FileText className="w-3 h-3" />
-              PRD ready
-            </div>
-          )}
           <Button
             variant="ghost"
             size="sm"
@@ -214,102 +116,29 @@ export function AtlasChat({ projectId, projectName, initialMessage }: AtlasChatP
         </div>
       </div>
 
-      {/* Messages */}
+      {/* Thread */}
-      <ScrollArea className="flex-1 max-h-[500px]">
+      <div className="flex-1 overflow-hidden">
-        <div className="px-5 py-4 space-y-5">
+        <Thread />
-          {messages.map((msg, i) => (
-            <div
-              key={i}
-              className={`flex gap-3 ${msg.role === "user" ? "justify-end" : "justify-start"}`}
-            >
-              {msg.role === "assistant" && <AtlasAvatar />}
-
-              <div
-                className={`max-w-[82%] ${
-                  msg.role === "user"
-                    ? "bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5"
-                    : "bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3"
-                }`}
-              >
-                <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                  {msg.content}
-                </p>
-              </div>
-
-              {msg.role === "user" && (
-                <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center shrink-0">
-                  <User className="w-3.5 h-3.5 text-muted-foreground" />
-                </div>
-              )}
-            </div>
-          ))}
-
-          {/* Typing indicator */}
-          {loading && (
-            <div className="flex gap-3 justify-start">
-              <AtlasAvatar />
-              <div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3">
-                <div className="flex gap-1.5 items-center h-4">
-                  <span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:0ms]" />
-                  <span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:150ms]" />
-                  <span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:300ms]" />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Error */}
-          {error && (
-            <div className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">
-              {error}
-            </div>
-          )}
-
-          {/* PRD panel */}
-          {prdContent && <PrdPanel content={prdContent} />}
-
-          <div ref={bottomRef} />
-        </div>
-      </ScrollArea>
-
-      {/* Input */}
-      <div className="px-4 py-3 border-t border-border/60 bg-muted/20">
-        {prdContent ? (
-          <p className="text-xs text-center text-muted-foreground py-1">
-            PRD complete — the platform is now architecting your solution.
-          </p>
-        ) : (
-          <div className="flex gap-2 items-end">
-            <Textarea
-              ref={textareaRef}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Reply to Atlas…"
-              rows={1}
-              className="resize-none min-h-[40px] max-h-[120px] text-sm rounded-xl border-border/60 focus-visible:ring-violet-500/30 bg-background"
-              style={{ overflow: "hidden" }}
-              onInput={(e) => {
-                const t = e.currentTarget;
-                t.style.height = "auto";
-                t.style.height = Math.min(t.scrollHeight, 120) + "px";
-              }}
-            />
-            <Button
-              onClick={() => sendMessage(input)}
-              disabled={!input.trim() || loading}
-              size="sm"
-              className="h-10 w-10 p-0 rounded-xl bg-violet-600 hover:bg-violet-700 text-white shrink-0"
-            >
-              {loading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                <Send className="w-4 h-4" />
-              )}
-            </Button>
-          </div>
-        )}
       </div>
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Main export — wraps with runtime provider
+// ---------------------------------------------------------------------------
+
+export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
+  const adapter = makeAtlasAdapter(projectId);
+  const runtime = useLocalRuntime(adapter);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <AtlasChatInner
+        projectId={projectId}
+        projectName={projectName}
+        runtime={runtime}
+      />
+    </AssistantRuntimeProvider>
+  );
+}

components/assistant-ui/markdown-text.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import type { FC } from "react";
+import { cn } from "@/lib/utils";
+
+export const MarkdownText: FC = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="prose prose-sm dark:prose-invert max-w-none leading-relaxed"
+      components={{
+        h1: ({ className, ...props }) => (
+          <h1 className={cn("text-base font-bold mt-3 mb-1", className)} {...props} />
+        ),
+        h2: ({ className, ...props }) => (
+          <h2 className={cn("text-sm font-bold mt-3 mb-1", className)} {...props} />
+        ),
+        h3: ({ className, ...props }) => (
+          <h3 className={cn("text-sm font-semibold mt-2 mb-1", className)} {...props} />
+        ),
+        p: ({ className, ...props }) => (
+          <p className={cn("mb-2 last:mb-0", className)} {...props} />
+        ),
+        ul: ({ className, ...props }) => (
+          <ul className={cn("list-disc list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
+        ),
+        ol: ({ className, ...props }) => (
+          <ol className={cn("list-decimal list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
+        ),
+        li: ({ className, ...props }) => (
+          <li className={cn("leading-relaxed", className)} {...props} />
+        ),
+        strong: ({ className, ...props }) => (
+          <strong className={cn("font-semibold", className)} {...props} />
+        ),
+        code: ({ className, ...props }) => (
+          <code className={cn("bg-muted px-1 py-0.5 rounded text-xs font-mono", className)} {...props} />
+        ),
+        pre: ({ className, ...props }) => (
+          <pre className={cn("bg-muted rounded-lg p-3 overflow-x-auto text-xs my-2", className)} {...props} />
+        ),
+        blockquote: ({ className, ...props }) => (
+          <blockquote className={cn("border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2", className)} {...props} />
+        ),
+      }}
+    />
+  );
+};

components/assistant-ui/thread.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import {
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@assistant-ui/react";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  RefreshCwIcon,
+  SquareIcon,
+} from "lucide-react";
+import type { FC } from "react";
+import { MarkdownText } from "./markdown-text";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Thread root
+// ---------------------------------------------------------------------------
+
+export const Thread: FC = () => (
+  <ThreadPrimitive.Root className="flex flex-col h-full">
+    <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+      <ThreadPrimitive.Empty>
+        <ThreadWelcome />
+      </ThreadPrimitive.Empty>
+
+      <ThreadPrimitive.Messages
+        components={{ UserMessage, AssistantMessage }}
+      />
+
+      <ThreadPrimitive.FollowupSuggestions
+        components={{ Suggestion: FollowupSuggestion }}
+      />
+    </ThreadPrimitive.Viewport>
+
+    <div className="relative">
+      <ThreadScrollToBottom />
+      <Composer />
+    </div>
+  </ThreadPrimitive.Root>
+);
+
+// ---------------------------------------------------------------------------
+// Scroll to bottom
+// ---------------------------------------------------------------------------
+
+const ThreadScrollToBottom: FC = () => (
+  <ThreadPrimitive.ScrollToBottom asChild>
+    <button className="absolute -top-10 right-4 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent transition-colors">
+      <ArrowDownIcon className="h-3.5 w-3.5" />
+    </button>
+  </ThreadPrimitive.ScrollToBottom>
+);
+
+// ---------------------------------------------------------------------------
+// Welcome screen (shown when thread is empty)
+// ---------------------------------------------------------------------------
+
+const ThreadWelcome: FC = () => (
+  <div className="flex flex-col items-center justify-center py-8 text-center gap-2">
+    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-sm">
+      A
+    </div>
+    <p className="text-sm font-medium text-foreground">Atlas</p>
+    <p className="text-xs text-muted-foreground max-w-xs">
+      Your product requirements guide. Let's define what you're building.
+    </p>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Followup suggestions
+// ---------------------------------------------------------------------------
+
+const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
+  <ThreadPrimitive.Suggestion prompt={suggestion.prompt} asChild autoSend>
+    <button className="text-xs px-3 py-1.5 rounded-full border border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors">
+      {suggestion.prompt}
+    </button>
+  </ThreadPrimitive.Suggestion>
+);
+
+// ---------------------------------------------------------------------------
+// Composer (input area)
+// ---------------------------------------------------------------------------
+
+const Composer: FC = () => (
+  <ComposerPrimitive.Root className="flex items-end gap-2 px-4 py-3 border-t border-border/60 bg-muted/20">
+    <ComposerPrimitive.Input
+      placeholder="Reply to Atlas…"
+      rows={1}
+      autoFocus
+      className="flex-1 resize-none bg-background border border-border/60 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/30 min-h-[40px] max-h-[120px] leading-relaxed"
+    />
+    <ThreadPrimitive.If running={false}>
+      <ComposerPrimitive.Send asChild>
+        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
+          <ArrowUpIcon className="h-4 w-4" />
+        </button>
+      </ComposerPrimitive.Send>
+    </ThreadPrimitive.If>
+    <ThreadPrimitive.If running>
+      <ComposerPrimitive.Cancel asChild>
+        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors">
+          <SquareIcon className="h-3.5 w-3.5 fill-white" />
+        </button>
+      </ComposerPrimitive.Cancel>
+    </ThreadPrimitive.If>
+  </ComposerPrimitive.Root>
+);
+
+// ---------------------------------------------------------------------------
+// User message
+// ---------------------------------------------------------------------------
+
+const UserMessage: FC = () => (
+  <MessagePrimitive.Root className="flex justify-end gap-2 group">
+    <div className="max-w-[82%]">
+      <MessagePrimitive.Content
+        components={{ Text: UserText }}
+      />
+      <UserActionBar />
+    </div>
+  </MessagePrimitive.Root>
+);
+
+const UserText: FC<{ text: string }> = ({ text }) => (
+  <div className="bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
+    {text}
+  </div>
+);
+
+const UserActionBar: FC = () => (
+  <ActionBarPrimitive.Root
+    hideWhenRunning
+    autohide="not-last"
+    className="flex items-center gap-1 mt-1 justify-end opacity-0 group-hover:opacity-100 transition-opacity"
+  >
+    <ActionBarPrimitive.Edit asChild>
+      <button className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+        Edit
+      </button>
+    </ActionBarPrimitive.Edit>
+  </ActionBarPrimitive.Root>
+);
+
+// ---------------------------------------------------------------------------
+// Assistant message
+// ---------------------------------------------------------------------------
+
+const AssistantMessage: FC = () => (
+  <MessagePrimitive.Root className="flex justify-start gap-2.5 group">
+    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5 shadow-sm">
+      A
+    </div>
+    <div className="max-w-[82%]">
+      <div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3 text-sm">
+        <MessagePrimitive.Content components={{ Text: AssistantText }} />
+      </div>
+      <AssistantActionBar />
+      <BranchPicker />
+    </div>
+  </MessagePrimitive.Root>
+);
+
+const AssistantText: FC = () => <MarkdownText />;
+
+const AssistantActionBar: FC = () => (
+  <ActionBarPrimitive.Root
+    hideWhenRunning
+    autohide="not-last"
+    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
+  >
+    <ActionBarPrimitive.Copy asChild>
+      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+        <MessagePrimitive.If copied>
+          <CheckIcon className="h-2.5 w-2.5" />
+          Copied
+        </MessagePrimitive.If>
+        <MessagePrimitive.If copied={false}>
+          <CopyIcon className="h-2.5 w-2.5" />
+          Copy
+        </MessagePrimitive.If>
+      </button>
+    </ActionBarPrimitive.Copy>
+    <ActionBarPrimitive.Reload asChild>
+      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
+        <RefreshCwIcon className="h-2.5 w-2.5" />
+        Retry
+      </button>
+    </ActionBarPrimitive.Reload>
+  </ActionBarPrimitive.Root>
+);
+
+// ---------------------------------------------------------------------------
+// Branch picker (for regenerated responses)
+// ---------------------------------------------------------------------------
+
+const BranchPicker: FC = () => (
+  <BranchPickerPrimitive.Root
+    hideWhenSingleBranch
+    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
+  >
+    <BranchPickerPrimitive.Previous asChild>
+      <button className="text-muted-foreground hover:text-foreground transition-colors">
+        <ChevronLeftIcon className="h-3 w-3" />
+      </button>
+    </BranchPickerPrimitive.Previous>
+    <span className="text-[10px] text-muted-foreground">
+      <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+    </span>
+    <BranchPickerPrimitive.Next asChild>
+      <button className="text-muted-foreground hover:text-foreground transition-colors">
+        <ChevronRightIcon className="h-3 w-3" />
+      </button>
+    </BranchPickerPrimitive.Next>
+  </BranchPickerPrimitive.Root>
+);

package.json

@@ -19,13 +19,15 @@
     "prisma:generate": "prisma generate"
   },
   "dependencies": {
+    "@assistant-ui/react": "^0.12.14",
+    "@assistant-ui/react-markdown": "^0.12.5",
     "@auth/core": "^0.34.3",
-    "@next-auth/prisma-adapter": "^1.0.7",
-    "@prisma/client": "^5.22.0",
     "@google-cloud/vertexai": "^1.10.0",
     "@google/genai": "^1.30.0",
     "@google/generative-ai": "^0.24.1",
     "@modelcontextprotocol/sdk": "^1.22.0",
+    "@next-auth/prisma-adapter": "^1.0.7",
+    "@prisma/client": "^5.22.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -48,14 +50,17 @@
     "next-auth": "^4.24.13",
     "next-themes": "^0.4.6",
     "pg": "^8.16.3",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tsx": "^4.20.6",
     "uuid": "^13.0.0",
     "v0-sdk": "^0.14.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",