Apply Stackless chat design to Atlas thread

- Remove card container (no more rounded-2xl, ring, 600px height)
- Chat fills the full layout space naturally
- Avatars: 28x28 rounded-7 squares (black for Atlas, warm gray for user)
- Both sides use same avatar+label layout (no right-aligned bubbles)
- Sender labels: tiny uppercase ATLAS / YOU above each message
- Input bar: white pill with border, Send button, Stop for streaming
- User initial pulled from session (name or email first letter)

Made-with: Cursor

components/AtlasChat.tsx

@@ -1,28 +1,19 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { useSession } from "next-auth/react";
 import {
   AssistantRuntimeProvider,
   useLocalRuntime,
   type ChatModelAdapter,
 } from "@assistant-ui/react";
 import { Thread } from "@/components/assistant-ui/thread";
-import { Button } from "@/components/ui/button";
-import { RotateCcw } from "lucide-react";
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
 
 interface AtlasChatProps {
   projectId: string;
   projectName?: string;
 }
 
-// ---------------------------------------------------------------------------
-// Runtime adapter — calls our existing /api/projects/[id]/atlas-chat endpoint
-// ---------------------------------------------------------------------------
-
 function makeAtlasAdapter(projectId: string): ChatModelAdapter {
   return {
     async run({ messages, abortSignal }) {
@@ -46,78 +37,49 @@ function makeAtlasAdapter(projectId: string): ChatModelAdapter {
       }
 
       const data = await res.json();
-
+      return { content: [{ type: "text", text: data.reply || "…" }] };
-      return {
-        content: [{ type: "text", text: data.reply || "…" }],
-      };
     },
   };
 }
 
-// ---------------------------------------------------------------------------
-// Inner component — has access to runtime context
-// ---------------------------------------------------------------------------
-
 function AtlasChatInner({
   projectId,
   projectName,
+  userInitial,
   runtime,
-}: AtlasChatProps & { runtime: ReturnType<typeof useLocalRuntime> }) {
+}: AtlasChatProps & {
+  userInitial: string;
+  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.`;
-    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" });
-    // Reload to get a fresh runtime state
-    window.location.reload();
-  };
-
   return (
-    <div className="flex flex-col rounded-2xl overflow-hidden bg-card ring-1 ring-border" style={{ height: "600px" }}>
+    // No card — fills the layout space directly
-      {/* Minimal header bar */}
+    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-      <div className="flex items-center justify-end px-4 py-2.5 shrink-0 border-b border-border">
+      <Thread userInitial={userInitial} />
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleReset}
-          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-          title="Start over"
-        >
-          <RotateCcw className="w-3.5 h-3.5" />
-        </Button>
-      </div>
-
-      {/* Thread */}
-      <div className="flex-1 overflow-hidden">
-        <Thread />
-      </div>
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Main export — wraps with runtime provider
-// ---------------------------------------------------------------------------
-
 export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
+  const { data: session } = useSession();
+  const userInitial =
+    session?.user?.name?.[0]?.toUpperCase() ??
+    session?.user?.email?.[0]?.toUpperCase() ??
+    "Y";
+
   const adapter = makeAtlasAdapter(projectId);
   const runtime = useLocalRuntime(adapter);
 
@@ -126,6 +88,7 @@ export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
       <AtlasChatInner
         projectId={projectId}
         projectName={projectName}
+        userInitial={userInitial}
         runtime={runtime}
       />
     </AssistantRuntimeProvider>

components/assistant-ui/thread.tsx

@@ -8,7 +8,6 @@ import {
   ThreadPrimitive,
 } from "@assistant-ui/react";
 import {
-  ArrowUpIcon,
   CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -20,69 +19,140 @@ import type { FC } from "react";
 import { MarkdownText } from "./markdown-text";
 
 // ---------------------------------------------------------------------------
-// Thread root — Grok-style layout
+// Thread root — Stackless style: flat on beige, no card
-// When empty: logo + composer centered. When not empty: viewport + composer bottom.
 // ---------------------------------------------------------------------------
 
-export const Thread: FC = () => (
+export const Thread: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => (
-  <ThreadPrimitive.Root className="flex flex-col h-full px-4">
+  <ThreadPrimitive.Root
-
+    style={{
-    {/* Empty state: centered welcome + composer */}
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      background: "#f6f4f0",
+      fontFamily: "Outfit, sans-serif",
+    }}
+  >
+    {/* Empty state */}
     <ThreadPrimitive.Empty>
-      <div className="flex h-full flex-col items-center justify-center gap-6">
+      <div style={{
-        <div className="flex flex-col items-center gap-2 text-center">
+        display: "flex", height: "100%",
-          <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-base shadow-sm">
+        flexDirection: "column", alignItems: "center", justifyContent: "center",
-            A
+        gap: 12, padding: "40px 32px",
-          </div>
+      }}>
-          <p className="text-sm font-medium text-foreground">Atlas</p>
+        <div style={{
-          <p className="text-xs text-muted-foreground max-w-xs">
+          width: 44, height: 44, borderRadius: 11, background: "#1a1a1a",
+          display: "flex", alignItems: "center", justifyContent: "center",
+          fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 500,
+          color: "#fff",
+        }}>
+          A
+        </div>
+        <div style={{ textAlign: "center" }}>
+          <p style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 4 }}>Atlas</p>
+          <p style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
             Your product strategist. Let&apos;s define what you&apos;re building.
           </p>
         </div>
-        <div className="w-full max-w-2xl">
+        <div style={{ width: "100%", maxWidth: 600 }}>
-          <Composer />
+          <Composer userInitial={userInitial} />
         </div>
       </div>
     </ThreadPrimitive.Empty>
 
-    {/* Messages viewport */}
+    {/* Messages */}
-    <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto py-6 space-y-6">
+    <ThreadPrimitive.Viewport style={{ flex: 1, overflowY: "auto", padding: "28px 32px" }}>
       <ThreadPrimitive.Messages
-        components={{ UserMessage, AssistantMessage }}
+        components={{
-      />
+          UserMessage: (props) => <UserMessage {...props} userInitial={userInitial} />,
-      <ThreadPrimitive.Suggestions
+          AssistantMessage,
-        components={{ Suggestion: FollowupSuggestion }}
+        }}
       />
     </ThreadPrimitive.Viewport>
 
-    <Composer />
+    {/* Input bar */}
+    <div style={{ padding: "14px 32px 22px", flexShrink: 0 }}>
+      <Composer userInitial={userInitial} />
+    </div>
   </ThreadPrimitive.Root>
 );
 
 // ---------------------------------------------------------------------------
-// Composer — Grok pill style with inverted send button
+// Composer — Stackless white pill input bar
 // ---------------------------------------------------------------------------
 
-const Composer: FC = () => (
+const Composer: FC<{ userInitial?: string }> = () => (
-  <ComposerPrimitive.Root className="group/composer mx-auto w-full max-w-2xl mb-3">
+  <ComposerPrimitive.Root style={{ width: "100%" }}>
-    <div className="flex items-end gap-2 rounded-[26px] bg-muted ring-1 ring-border px-4 py-3 transition-shadow focus-within:ring-ring/50">
+    <div style={{
+      display: "flex", gap: 8,
+      padding: "5px 5px 5px 16px",
+      background: "#fff",
+      border: "1px solid #e0dcd4",
+      borderRadius: 10,
+      alignItems: "center",
+      boxShadow: "0 1px 4px #1a1a1a06",
+    }}>
       <ComposerPrimitive.Input
-        placeholder="What do you want to build?"
+        placeholder="Describe your thinking..."
         rows={1}
         autoFocus
-        className="flex-1 resize-none bg-transparent text-foreground placeholder:text-muted-foreground text-sm leading-relaxed outline-none min-h-[24px] max-h-[120px]"
+        style={{
+          flex: 1,
+          border: "none",
+          background: "none",
+          fontSize: "0.86rem",
+          fontFamily: "Outfit, sans-serif",
+          color: "#1a1a1a",
+          padding: "8px 0",
+          resize: "none",
+          outline: "none",
+          minHeight: 24,
+          maxHeight: 120,
+        }}
       />
       <ThreadPrimitive.If running={false}>
         <ComposerPrimitive.Send asChild>
-          <button className="h-8 w-8 rounded-full bg-foreground text-background flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed">
+          <button
-            <ArrowUpIcon className="h-3.5 w-3.5" />
+            style={{
+              padding: "9px 16px",
+              borderRadius: 7,
+              border: "none",
+              background: "#1a1a1a",
+              color: "#fff",
+              fontSize: "0.78rem",
+              fontWeight: 600,
+              fontFamily: "Outfit, sans-serif",
+              cursor: "pointer",
+              transition: "opacity 0.15s",
+              flexShrink: 0,
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.8")}
+            onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
+          >
+            Send
           </button>
         </ComposerPrimitive.Send>
       </ThreadPrimitive.If>
       <ThreadPrimitive.If running>
         <ComposerPrimitive.Cancel asChild>
-          <button className="h-8 w-8 rounded-full bg-foreground text-background flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity">
+          <button
-            <SquareIcon className="h-3 w-3 fill-current" />
+            style={{
+              padding: "9px 16px",
+              borderRadius: 7,
+              border: "none",
+              background: "#eae6de",
+              color: "#8a8478",
+              fontSize: "0.78rem",
+              fontWeight: 600,
+              fontFamily: "Outfit, sans-serif",
+              cursor: "pointer",
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+            }}
+          >
+            <SquareIcon style={{ width: 10, height: 10 }} />
+            Stop
           </button>
         </ComposerPrimitive.Cancel>
       </ThreadPrimitive.If>
@@ -91,61 +161,31 @@ const Composer: FC = () => (
 );
 
 // ---------------------------------------------------------------------------
-// Followup suggestions
+// Assistant message — black avatar, "Atlas" label, plain text
-// ---------------------------------------------------------------------------
-
-const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
-  <ThreadPrimitive.Suggestion prompt={suggestion.prompt} send asChild>
-    <button className="text-xs px-3 py-1.5 rounded-full ring-1 ring-border text-muted-foreground hover:ring-ring/50 hover:text-foreground transition-all">
-      {suggestion.prompt}
-    </button>
-  </ThreadPrimitive.Suggestion>
-);
-
-// ---------------------------------------------------------------------------
-// User message — subtle right-aligned bubble
-// ---------------------------------------------------------------------------
-
-const UserMessage: FC = () => (
-  <MessagePrimitive.Root className="flex justify-end group">
-    <div className="max-w-[72%]">
-      <MessagePrimitive.Content components={{ Text: UserText }} />
-      <UserActionBar />
-    </div>
-  </MessagePrimitive.Root>
-);
-
-const UserText: FC<{ text: string }> = ({ text }) => (
-  <div className="bg-foreground text-background rounded-[20px] rounded-tr-[6px] 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 transition-colors">
-        Edit
-      </button>
-    </ActionBarPrimitive.Edit>
-  </ActionBarPrimitive.Root>
-);
-
-// ---------------------------------------------------------------------------
-// Assistant message — plain text, no bubble, small avatar
 // ---------------------------------------------------------------------------
 
 const AssistantMessage: FC = () => (
-  <MessagePrimitive.Root className="flex justify-start gap-3 group">
+  <MessagePrimitive.Root style={{ display: "flex", gap: 12, marginBottom: 22 }} className="group">
-    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-1 shadow-sm">
+    {/* Avatar */}
+    <div style={{
+      width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
+      background: "#1a1a1a",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      fontSize: "0.68rem", fontWeight: 700, color: "#fff",
+      fontFamily: "Newsreader, serif",
+    }}>
       A
     </div>
-    <div className="flex-1 min-w-0 max-w-[80%]">
+    <div style={{ flex: 1, minWidth: 0 }}>
-      <div className="text-sm text-[#0d0d0d] dark:text-white leading-relaxed">
+      {/* Sender label */}
+      <div style={{
+        fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
+        marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
+      }}>
+        Atlas
+      </div>
+      {/* Message content */}
+      <div style={{ fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72 }}>
         <MessagePrimitive.Content components={{ Text: AssistantText }} />
       </div>
       <AssistantActionBar />
@@ -154,37 +194,97 @@ const AssistantMessage: FC = () => (
   </MessagePrimitive.Root>
 );
 
-const AssistantText: FC = () => (
+const AssistantText: FC = () => <MarkdownText />;
-  <MarkdownText />
-);
 
 const AssistantActionBar: FC = () => (
   <ActionBarPrimitive.Root
     hideWhenRunning
     autohide="not-last"
-    className="flex items-center gap-2 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
+    className="group-hover:opacity-100"
+    style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6, opacity: 0, transition: "opacity 0.15s" }}
   >
     <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 transition-colors">
+      <button style={{
+        display: "flex", alignItems: "center", gap: 4,
+        fontSize: "0.68rem", color: "#b5b0a6",
+        background: "none", border: "none", cursor: "pointer",
+        fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
+      }}>
         <MessagePrimitive.If copied>
-          <CheckIcon className="h-2.5 w-2.5" />
+          <CheckIcon style={{ width: 10, height: 10 }} /> Copied
-          Copied
         </MessagePrimitive.If>
         <MessagePrimitive.If copied={false}>
-          <CopyIcon className="h-2.5 w-2.5" />
+          <CopyIcon style={{ width: 10, height: 10 }} /> Copy
-          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 transition-colors">
+      <button style={{
-        <RefreshCwIcon className="h-2.5 w-2.5" />
+        display: "flex", alignItems: "center", gap: 4,
-        Retry
+        fontSize: "0.68rem", color: "#b5b0a6",
+        background: "none", border: "none", cursor: "pointer",
+        fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
+      }}>
+        <RefreshCwIcon style={{ width: 10, height: 10 }} /> Retry
       </button>
     </ActionBarPrimitive.Reload>
   </ActionBarPrimitive.Root>
 );
 
+// ---------------------------------------------------------------------------
+// User message — warm avatar, "You" label, same layout as Atlas
+// ---------------------------------------------------------------------------
+
+const UserMessage: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => (
+  <MessagePrimitive.Root style={{ display: "flex", gap: 12, marginBottom: 22 }} className="group">
+    {/* Avatar */}
+    <div style={{
+      width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
+      background: "#e8e4dc",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      fontSize: "0.68rem", fontWeight: 700, color: "#8a8478",
+      fontFamily: "Outfit, sans-serif",
+    }}>
+      {userInitial}
+    </div>
+    <div style={{ flex: 1, minWidth: 0 }}>
+      {/* Sender label */}
+      <div style={{
+        fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
+        marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
+      }}>
+        You
+      </div>
+      {/* Message content */}
+      <div style={{ fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72, whiteSpace: "pre-wrap" }}>
+        <MessagePrimitive.Content components={{ Text: UserText }} />
+      </div>
+      <UserActionBar />
+    </div>
+  </MessagePrimitive.Root>
+);
+
+const UserText: FC<{ text: string }> = ({ text }) => <span>{text}</span>;
+
+const UserActionBar: FC = () => (
+  <ActionBarPrimitive.Root
+    hideWhenRunning
+    autohide="not-last"
+    className="group-hover:opacity-100"
+    style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, opacity: 0, transition: "opacity 0.15s" }}
+  >
+    <ActionBarPrimitive.Edit asChild>
+      <button style={{
+        fontSize: "0.68rem", color: "#b5b0a6",
+        background: "none", border: "none", cursor: "pointer",
+        fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
+      }}>
+        Edit
+      </button>
+    </ActionBarPrimitive.Edit>
+  </ActionBarPrimitive.Root>
+);
+
 // ---------------------------------------------------------------------------
 // Branch picker
 // ---------------------------------------------------------------------------
@@ -192,19 +292,20 @@ const AssistantActionBar: FC = () => (
 const BranchPicker: FC = () => (
   <BranchPickerPrimitive.Root
     hideWhenSingleBranch
-    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
+    className="group-hover:opacity-100"
+    style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, opacity: 0, transition: "opacity 0.15s" }}
   >
     <BranchPickerPrimitive.Previous asChild>
-      <button className="text-muted-foreground hover:text-foreground transition-colors">
+      <button style={{ background: "none", border: "none", cursor: "pointer", color: "#b5b0a6" }}>
-        <ChevronLeftIcon className="h-3 w-3" />
+        <ChevronLeftIcon style={{ width: 12, height: 12 }} />
       </button>
     </BranchPickerPrimitive.Previous>
-    <span className="text-[10px] text-muted-foreground">
+    <span style={{ fontSize: "0.68rem", color: "#b5b0a6" }}>
       <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
     </span>
     <BranchPickerPrimitive.Next asChild>
-      <button className="text-muted-foreground hover:text-foreground transition-colors">
+      <button style={{ background: "none", border: "none", cursor: "pointer", color: "#b5b0a6" }}>
-        <ChevronRightIcon className="h-3 w-3" />
+        <ChevronRightIcon style={{ width: 12, height: 12 }} />
       </button>
     </BranchPickerPrimitive.Next>
   </BranchPickerPrimitive.Root>