feat: load Atlas discovery history into CooChat sidebar

Eliminates the two-chat experience on the overview page: - CooChat now pre-loads Atlas conversation history on mount, showing the full discovery conversation in the left panel. Atlas messages render with a blue "A" avatar; COO messages use the dark "◈" icon. A "Discovery · COO" divider separates historical from new messages. - FreshIdeaMain detects when a PRD already exists and replaces the duplicate AtlasChat with a clean completion view ("Discovery complete") that links to the PRD and Build pages. Atlas chat only shows when discovery is still in progress. Made-with: Cursor
2026-03-10 16:28:44 -07:00
parent 8f95270b12
commit 99c1a83b9f
2 changed files with 218 additions and 58 deletions
--- a/components/layout/coo-chat.tsx
+++ b/components/layout/coo-chat.tsx
@@ -6,40 +6,86 @@ interface CooMessage {
  id: string;
  role: "user" | "assistant";
  content: string;
+  source?: "atlas" | "coo";  // atlas = discovery history, coo = orchestrator response
  streaming?: boolean;
 }

-const WELCOME: CooMessage = {
-  id: "welcome",
-  role: "assistant",
-  content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
-};
-
 export function CooChat({ projectId }: { projectId: string }) {
-  const [messages, setMessages] = useState<CooMessage[]>([WELCOME]);
+  const [messages, setMessages] = useState<CooMessage[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
+  const [historyLoaded, setHistoryLoaded] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

+  // Scroll to bottom whenever messages change
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

+  // Pre-load Atlas discovery history on mount
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}/atlas-chat`)
+      .then(r => r.json())
+      .then((data: { messages?: Array<{ role: "user" | "assistant"; content: string }> }) => {
+        const atlasMessages: CooMessage[] = (data.messages ?? [])
+          .filter(m => m.content?.trim())
+          .map((m, i) => ({
+            id: `atlas_${i}`,
+            role: m.role,
+            content: m.content,
+            source: "atlas" as const,
+          }));
+
+        if (atlasMessages.length > 0) {
+          // Add a small divider message at the bottom of Atlas history
+          setMessages([
+            ...atlasMessages,
+            {
+              id: "coo_divider",
+              role: "assistant",
+              content: "Discovery complete. I'm your product COO — I have the full context above. What do you need?",
+              source: "coo" as const,
+            },
+          ]);
+        } else {
+          // No Atlas history — show default COO welcome
+          setMessages([{
+            id: "welcome",
+            role: "assistant",
+            content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
+            source: "coo" as const,
+          }]);
+        }
+        setHistoryLoaded(true);
+      })
+      .catch(() => {
+        setMessages([{
+          id: "welcome",
+          role: "assistant",
+          content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
+          source: "coo" as const,
+        }]);
+        setHistoryLoaded(true);
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
  const send = async () => {
    const text = input.trim();
    if (!text || loading) return;
    setInput("");

-    const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text };
+    const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text, source: "coo" };
    const assistantId = (Date.now() + 1).toString();
-    const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", streaming: true };
+    const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", source: "coo", streaming: true };

    setMessages(prev => [...prev, userMsg, assistantMsg]);
    setLoading(true);

+    // Build history from COO messages only (skip atlas history for context to orchestrator)
    const history = messages
-      .filter(m => m.id !== "welcome" && m.content)
+      .filter(m => m.source === "coo" && m.id !== "coo_divider" && m.content)
      .map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));

    try {
@@ -79,59 +125,109 @@ export function CooChat({ projectId }: { projectId: string }) {
    }
  };

+  if (!historyLoaded) {
+    return (
+      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <div style={{ display: "flex", gap: 4 }}>
+          {[0, 1, 2].map(i => (
+            <span key={i} style={{
+              width: 4, height: 4, borderRadius: "50%",
+              background: "#d4cfc6", display: "inline-block",
+              animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
+            }} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      {/* Messages */}
-      <div style={{ flex: 1, overflow: "auto", padding: "16px 14px 8px", display: "flex", flexDirection: "column", gap: 14 }}>
-        {messages.map(msg => (
-          <div key={msg.id} style={{
-            display: "flex",
-            flexDirection: msg.role === "user" ? "row-reverse" : "row",
-            alignItems: "flex-end",
-            gap: 7,
-          }}>
-            {msg.role === "assistant" && (
-              <span style={{
-                width: 20, height: 20, borderRadius: 5, background: "#1a1a1a",
-                display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "0.52rem", color: "#fff", flexShrink: 0,
-              }}>◈</span>
-            )}
-            <div style={{
-              maxWidth: "84%",
-              padding: msg.role === "user" ? "8px 11px" : "0",
-              background: msg.role === "user" ? "#f0ece4" : "transparent",
-              borderRadius: msg.role === "user" ? 11 : 0,
-              fontSize: "0.79rem",
-              color: "#1a1a1a",
-              fontFamily: "Outfit, sans-serif",
-              lineHeight: 1.6,
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word",
-            }}>
-              {msg.content}
-              {msg.streaming && msg.content === "" && (
-                <span style={{ display: "inline-flex", gap: 3, alignItems: "center", height: "1em" }}>
-                  {[0, 1, 2].map(i => (
-                    <span key={i} style={{
-                      width: 4, height: 4, borderRadius: "50%",
-                      background: "#b5b0a6", display: "inline-block",
-                      animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
+      <div style={{ flex: 1, overflow: "auto", padding: "12px 14px 8px", display: "flex", flexDirection: "column", gap: 10 }}>
+        {messages.map((msg, idx) => {
+          const isAtlas = msg.source === "atlas";
+          const isUser = msg.role === "user";
+          const isCoo = !isUser && !isAtlas;
+
+          // Separator before the divider message
+          const prevMsg = messages[idx - 1];
+          const showSeparator = msg.id === "coo_divider" && prevMsg?.source === "atlas";
+
+          return (
+            <div key={msg.id}>
+              {showSeparator && (
+                <div style={{
+                  display: "flex", alignItems: "center", gap: 8,
+                  margin: "8px 0 4px", opacity: 0.5,
+                }}>
+                  <div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
+                  <span style={{ fontSize: "0.58rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
+                    Discovery · COO
+                  </span>
+                  <div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
+                </div>
+              )}
+
+              <div style={{
+                display: "flex",
+                flexDirection: isUser ? "row-reverse" : "row",
+                alignItems: "flex-end",
+                gap: 6,
+              }}>
+                {/* Avatar */}
+                {!isUser && (
+                  <span style={{
+                    width: 18, height: 18, borderRadius: 5,
+                    background: isAtlas ? "#4a6fa5" : "#1a1a1a",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    fontSize: isAtlas ? "0.48rem" : "0.48rem",
+                    color: "#fff", flexShrink: 0,
+                    fontFamily: isAtlas ? "Newsreader, serif" : "inherit",
+                    fontWeight: isAtlas ? 700 : 400,
+                  }}>
+                    {isAtlas ? "A" : "◈"}
+                  </span>
+                )}
+
+                <div style={{
+                  maxWidth: "88%",
+                  padding: isUser ? "7px 10px" : "0",
+                  background: isUser ? "#f0ece4" : "transparent",
+                  borderRadius: isUser ? 10 : 0,
+                  fontSize: isAtlas ? "0.75rem" : "0.79rem",
+                  color: isAtlas ? "#4a4540" : "#1a1a1a",
+                  fontFamily: "Outfit, sans-serif",
+                  lineHeight: 1.6,
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  opacity: isAtlas ? 0.85 : 1,
+                }}>
+                  {msg.content}
+                  {msg.streaming && msg.content === "" && (
+                    <span style={{ display: "inline-flex", gap: 3, alignItems: "center", height: "1em" }}>
+                      {[0, 1, 2].map(i => (
+                        <span key={i} style={{
+                          width: 4, height: 4, borderRadius: "50%",
+                          background: "#b5b0a6", display: "inline-block",
+                          animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
+                        }} />
+                      ))}
+                    </span>
+                  )}
+                  {msg.streaming && msg.content !== "" && (
+                    <span style={{
+                      display: "inline-block", width: 2, height: "0.85em",
+                      background: "#1a1a1a", marginLeft: 1,
+                      verticalAlign: "text-bottom",
+                      animation: "cooBlink 1s step-end infinite",
                    }} />
-                  ))}
-                </span>
-              )}
-              {msg.streaming && msg.content !== "" && (
-                <span style={{
-                  display: "inline-block", width: 2, height: "0.85em",
-                  background: "#1a1a1a", marginLeft: 1,
-                  verticalAlign: "text-bottom",
-                  animation: "cooBlink 1s step-end infinite",
-                }} />
-              )}
+                  )}
+                </div>
+              </div>
            </div>
-          </div>
-        ))}
+          );
+        })}
        <div ref={bottomRef} />
      </div>

--- a/components/project-main/FreshIdeaMain.tsx
+++ b/components/project-main/FreshIdeaMain.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { AtlasChat } from "@/components/AtlasChat";
 import { useRouter, useParams } from "next/navigation";
+import Link from "next/link";

 const DISCOVERY_PHASES = [
  "big_picture",
@@ -27,8 +28,15 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
  const [allDone, setAllDone] = useState(false);
  const [prdLoading, setPrdLoading] = useState(false);
  const [dismissed, setDismissed] = useState(false);
+  const [hasPrd, setHasPrd] = useState(false);

  useEffect(() => {
+    // Check if PRD already exists on the project
+    fetch(`/api/projects/${projectId}`)
+      .then(r => r.json())
+      .then(d => { if (d.project?.prd) setHasPrd(true); })
+      .catch(() => {});
+
    const poll = () => {
      fetch(`/api/projects/${projectId}/save-phase`)
        .then(r => r.json())
@@ -59,6 +67,62 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
    router.push(`/${workspace}/project/${projectId}/build`);
  };

+  // Once the PRD exists, show a clean "done" state in the main panel.
+  // The Atlas conversation history lives in the left CooChat sidebar.
+  if (hasPrd) {
+    return (
+      <div style={{
+        height: "100%", display: "flex", flexDirection: "column",
+        alignItems: "center", justifyContent: "center",
+        fontFamily: "Outfit, sans-serif", padding: "32px",
+      }}>
+        <div style={{
+          maxWidth: 420, textAlign: "center",
+          display: "flex", flexDirection: "column", alignItems: "center", gap: 20,
+        }}>
+          <div style={{
+            width: 48, height: 48, borderRadius: 14, background: "#1a1a1a",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: "1.2rem", color: "#fff",
+          }}>✦</div>
+          <div>
+            <div style={{ fontSize: "1.05rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>
+              Discovery complete
+            </div>
+            <div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65 }}>
+              Your PRD is saved. The full discovery conversation is in the left panel — talk to your COO to plan what to build next.
+            </div>
+          </div>
+          <div style={{ display: "flex", gap: 10 }}>
+            <Link
+              href={`/${workspace}/project/${projectId}/prd`}
+              style={{
+                padding: "10px 20px", borderRadius: 8, border: "none",
+                background: "#1a1a1a", color: "#fff",
+                fontSize: "0.82rem", fontWeight: 600,
+                textDecoration: "none", display: "inline-block",
+              }}
+            >
+              View PRD →
+            </Link>
+            <Link
+              href={`/${workspace}/project/${projectId}/build`}
+              style={{
+                padding: "10px 20px", borderRadius: 8,
+                border: "1px solid #e8e4dc",
+                background: "#fff", color: "#1a1a1a",
+                fontSize: "0.82rem", fontWeight: 500,
+                textDecoration: "none", display: "inline-block",
+              }}
+            >
+              Go to Build
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", position: "relative" }}>
      {/* Decision banner — shown when all 6 phases are saved */}