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
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user