feat: top navbar (Build|Market|Assist) + persistent Assist chat in shell
- New top navbar in ProjectShell: logo + project name | Build | Market | Assist tabs | user avatar — replaces the left icon sidebar for project pages - CooChat extracted to components/layout/coo-chat.tsx and moved into the shell so it persists across Build/Market/Assist route changes - Build page inner layout simplified: inner nav (200px) + file viewer, no longer owns the chat column - Layout: [top nav 48px] / [Assist chat 320px | content flex] Made-with: Cursor
This commit is contained in:
@@ -812,181 +812,6 @@ function TerminalPanel({ appName }: { appName: string }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── COO / Assist chat — persistent left-side advisor ─────────────────────────
|
|
||||||
|
|
||||||
interface CooMessage {
|
|
||||||
id: string;
|
|
||||||
role: "user" | "assistant";
|
|
||||||
content: string;
|
|
||||||
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?",
|
|
||||||
};
|
|
||||||
|
|
||||||
function CooChat({ projectId, projectName }: { projectId: string; projectName: string }) {
|
|
||||||
const [messages, setMessages] = useState<CooMessage[]>([WELCOME]);
|
|
||||||
const [input, setInput] = useState("");
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const bottomRef = useRef<HTMLDivElement>(null);
|
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}, [messages]);
|
|
||||||
|
|
||||||
const send = async () => {
|
|
||||||
const text = input.trim();
|
|
||||||
if (!text || loading) return;
|
|
||||||
setInput("");
|
|
||||||
|
|
||||||
const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text };
|
|
||||||
const assistantId = (Date.now() + 1).toString();
|
|
||||||
const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", streaming: true };
|
|
||||||
|
|
||||||
setMessages(prev => [...prev, userMsg, assistantMsg]);
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// Build history for the API (exclude welcome message, exclude the new blank assistant placeholder)
|
|
||||||
const history = messages
|
|
||||||
.filter(m => m.id !== "welcome" && m.content)
|
|
||||||
.map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/projects/${projectId}/advisor`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ message: text, history }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok || !res.body) {
|
|
||||||
setMessages(prev => prev.map(m => m.id === assistantId
|
|
||||||
? { ...m, content: "Something went wrong. Please try again.", streaming: false }
|
|
||||||
: m));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const reader = res.body.getReader();
|
|
||||||
const decoder = new TextDecoder();
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
const { done, value } = await reader.read();
|
|
||||||
if (done) break;
|
|
||||||
const chunk = decoder.decode(value, { stream: true });
|
|
||||||
setMessages(prev => prev.map(m => m.id === assistantId
|
|
||||||
? { ...m, content: m.content + chunk }
|
|
||||||
: m));
|
|
||||||
}
|
|
||||||
|
|
||||||
setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, streaming: false } : m));
|
|
||||||
} catch {
|
|
||||||
setMessages(prev => prev.map(m => m.id === assistantId
|
|
||||||
? { ...m, content: "Connection error. Please try again.", streaming: false }
|
|
||||||
: m));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
textareaRef.current?.focus();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
|
||||||
{/* Messages */}
|
|
||||||
<div style={{ flex: 1, overflow: "auto", padding: "16px 16px 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: 8,
|
|
||||||
}}>
|
|
||||||
{msg.role === "assistant" && (
|
|
||||||
<span style={{ width: 22, height: 22, borderRadius: 6, background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.58rem", color: "#fff", flexShrink: 0 }}>◈</span>
|
|
||||||
)}
|
|
||||||
<div style={{
|
|
||||||
maxWidth: "82%",
|
|
||||||
padding: msg.role === "user" ? "8px 12px" : "0",
|
|
||||||
background: msg.role === "user" ? "#f0ece4" : "transparent",
|
|
||||||
borderRadius: msg.role === "user" ? 12 : 0,
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
color: "#1a1a1a",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
lineHeight: 1.6,
|
|
||||||
whiteSpace: "pre-wrap",
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}>
|
|
||||||
{msg.content || (msg.streaming ? "" : "")}
|
|
||||||
{msg.streaming && msg.content === "" && (
|
|
||||||
<span style={{ display: "inline-flex", gap: 3, alignItems: "center" }}>
|
|
||||||
{[0, 1, 2].map(i => (
|
|
||||||
<span key={i} style={{
|
|
||||||
width: 4, height: 4, borderRadius: "50%", background: "#b5b0a6", display: "inline-block",
|
|
||||||
animation: `bounce 1.2s ${i * 0.2}s ease-in-out infinite`,
|
|
||||||
}} />
|
|
||||||
))}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{msg.streaming && msg.content !== "" && (
|
|
||||||
<span style={{ display: "inline-block", width: 2, height: "0.9em", background: "#1a1a1a", marginLeft: 1, verticalAlign: "text-bottom", animation: "blink 1s step-end infinite" }} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div ref={bottomRef} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Input */}
|
|
||||||
<div style={{ flexShrink: 0, borderTop: "1px solid #e8e4dc", padding: "10px 12px", background: "#fff" }}>
|
|
||||||
<div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
|
|
||||||
<textarea
|
|
||||||
ref={textareaRef}
|
|
||||||
value={input}
|
|
||||||
onChange={e => setInput(e.target.value)}
|
|
||||||
onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
|
|
||||||
placeholder={loading ? "Thinking…" : "Ask anything…"}
|
|
||||||
disabled={loading}
|
|
||||||
rows={2}
|
|
||||||
style={{
|
|
||||||
flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 10,
|
|
||||||
padding: "8px 11px", fontSize: "0.8rem", fontFamily: "Outfit, sans-serif",
|
|
||||||
color: "#1a1a1a", outline: "none", background: loading ? "#faf8f5" : "#faf8f5",
|
|
||||||
lineHeight: 1.5,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={send}
|
|
||||||
disabled={!input.trim() || loading}
|
|
||||||
style={{
|
|
||||||
width: 34, height: 34, flexShrink: 0, border: "none", borderRadius: 9,
|
|
||||||
background: input.trim() && !loading ? "#1a1a1a" : "#e8e4dc",
|
|
||||||
color: input.trim() && !loading ? "#fff" : "#b5b0a6",
|
|
||||||
cursor: input.trim() && !loading ? "pointer" : "default",
|
|
||||||
display: "flex", alignItems: "center", justifyContent: "center",
|
|
||||||
fontSize: "0.85rem", transition: "background 0.15s",
|
|
||||||
}}
|
|
||||||
>↑</button>
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: "0.62rem", color: "#b5b0a6", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
|
|
||||||
↵ to send · Shift+↵ new line
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>{`
|
|
||||||
@keyframes bounce {
|
|
||||||
0%, 60%, 100% { transform: translateY(0); }
|
|
||||||
30% { transform: translateY(-4px); }
|
|
||||||
}
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0; }
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── File tree (lives in sidebar B) ───────────────────────────────────────────
|
// ── File tree (lives in sidebar B) ───────────────────────────────────────────
|
||||||
|
|
||||||
function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
|
function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
|
||||||
@@ -1110,7 +935,6 @@ function BuildHubInner() {
|
|||||||
const [apps, setApps] = useState<AppEntry[]>([]);
|
const [apps, setApps] = useState<AppEntry[]>([]);
|
||||||
const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
|
const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
|
||||||
const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
|
const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
|
||||||
const [projectName, setProjectName] = useState<string>("");
|
|
||||||
|
|
||||||
// File viewer state — shared between inner nav (tree) and viewer panel
|
// File viewer state — shared between inner nav (tree) and viewer panel
|
||||||
const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
|
const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
|
||||||
@@ -1121,10 +945,7 @@ function BuildHubInner() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch(`/api/projects/${projectId}/apps`)
|
fetch(`/api/projects/${projectId}/apps`)
|
||||||
.then(r => r.json())
|
.then(r => r.json())
|
||||||
.then(d => {
|
.then(d => { setApps(d.apps ?? []); }).catch(() => {});
|
||||||
setApps(d.apps ?? []);
|
|
||||||
if (d.projectName) setProjectName(d.projectName);
|
|
||||||
}).catch(() => {});
|
|
||||||
fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
|
fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
|
||||||
const ids: string[] = d.surfaces ?? [];
|
const ids: string[] = d.surfaces ?? [];
|
||||||
const themes: Record<string, string> = d.surfaceThemes ?? {};
|
const themes: Record<string, string> = d.surfaceThemes ?? {};
|
||||||
@@ -1162,24 +983,7 @@ function BuildHubInner() {
|
|||||||
return (
|
return (
|
||||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||||
|
|
||||||
{/* ── Left: COO / Assist persistent chat ── */}
|
{/* ── Build content ── */}
|
||||||
<div style={{ width: 340, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
|
||||||
|
|
||||||
{/* Advisor header */}
|
|
||||||
<div style={{ height: 48, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 14px", borderBottom: "1px solid #e8e4dc", gap: 9, background: "#faf8f5" }}>
|
|
||||||
<span style={{ width: 26, height: 26, borderRadius: 7, background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.68rem", color: "#fff", flexShrink: 0 }}>◈</span>
|
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
|
||||||
<div style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
|
||||||
{projectName || workspace}
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: "0.6rem", color: "#a09a90", fontFamily: "Outfit, sans-serif", letterSpacing: "0.04em" }}>Assist · Your product COO</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CooChat projectId={projectId} projectName={projectName || workspace} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Right: Build content ── */}
|
|
||||||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
|
<div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
|
||||||
|
|
||||||
{/* Inner nav — Build section switcher + contextual items */}
|
{/* Inner nav — Build section switcher + contextual items */}
|
||||||
|
|||||||
191
components/layout/coo-chat.tsx
Normal file
191
components/layout/coo-chat.tsx
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
interface CooMessage {
|
||||||
|
id: string;
|
||||||
|
role: "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
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 [input, setInput] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const bottomRef = useRef<HTMLDivElement>(null);
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
|
const send = async () => {
|
||||||
|
const text = input.trim();
|
||||||
|
if (!text || loading) return;
|
||||||
|
setInput("");
|
||||||
|
|
||||||
|
const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text };
|
||||||
|
const assistantId = (Date.now() + 1).toString();
|
||||||
|
const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", streaming: true };
|
||||||
|
|
||||||
|
setMessages(prev => [...prev, userMsg, assistantMsg]);
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const history = messages
|
||||||
|
.filter(m => m.id !== "welcome" && m.content)
|
||||||
|
.map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/projects/${projectId}/advisor`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ message: text, history }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok || !res.body) {
|
||||||
|
setMessages(prev => prev.map(m => m.id === assistantId
|
||||||
|
? { ...m, content: "Something went wrong. Please try again.", streaming: false }
|
||||||
|
: m));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = res.body.getReader();
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
if (done) break;
|
||||||
|
const chunk = decoder.decode(value, { stream: true });
|
||||||
|
setMessages(prev => prev.map(m => m.id === assistantId
|
||||||
|
? { ...m, content: m.content + chunk }
|
||||||
|
: m));
|
||||||
|
}
|
||||||
|
|
||||||
|
setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, streaming: false } : m));
|
||||||
|
} catch {
|
||||||
|
setMessages(prev => prev.map(m => m.id === assistantId
|
||||||
|
? { ...m, content: "Connection error. Please try again.", streaming: false }
|
||||||
|
: m));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
textareaRef.current?.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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`,
|
||||||
|
}} />
|
||||||
|
))}
|
||||||
|
</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 ref={bottomRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input */}
|
||||||
|
<div style={{ flexShrink: 0, borderTop: "1px solid #e8e4dc", padding: "10px 12px 10px", background: "#fff" }}>
|
||||||
|
<div style={{ display: "flex", gap: 7, alignItems: "flex-end" }}>
|
||||||
|
<textarea
|
||||||
|
ref={textareaRef}
|
||||||
|
value={input}
|
||||||
|
onChange={e => setInput(e.target.value)}
|
||||||
|
onKeyDown={e => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
|
||||||
|
}}
|
||||||
|
placeholder={loading ? "Thinking…" : "Ask anything…"}
|
||||||
|
disabled={loading}
|
||||||
|
rows={2}
|
||||||
|
style={{
|
||||||
|
flex: 1, resize: "none",
|
||||||
|
border: "1px solid #e8e4dc", borderRadius: 10,
|
||||||
|
padding: "8px 10px", fontSize: "0.79rem",
|
||||||
|
fontFamily: "Outfit, sans-serif",
|
||||||
|
color: "#1a1a1a", outline: "none",
|
||||||
|
background: "#faf8f5", lineHeight: 1.5,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={send}
|
||||||
|
disabled={!input.trim() || loading}
|
||||||
|
style={{
|
||||||
|
width: 32, height: 32, flexShrink: 0,
|
||||||
|
border: "none", borderRadius: 8,
|
||||||
|
background: input.trim() && !loading ? "#1a1a1a" : "#e8e4dc",
|
||||||
|
color: input.trim() && !loading ? "#fff" : "#b5b0a6",
|
||||||
|
cursor: input.trim() && !loading ? "pointer" : "default",
|
||||||
|
display: "flex", alignItems: "center", justifyContent: "center",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
}}
|
||||||
|
>↑</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.6rem", color: "#c5c0b8", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
|
||||||
|
↵ send · Shift+↵ newline
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
@keyframes cooBounce {
|
||||||
|
0%, 60%, 100% { transform: translateY(0); }
|
||||||
|
30% { transform: translateY(-4px); }
|
||||||
|
}
|
||||||
|
@keyframes cooBlink {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0; }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,7 +2,9 @@
|
|||||||
|
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import { VIBNSidebar } from "./vibn-sidebar";
|
import Link from "next/link";
|
||||||
|
import { signOut, useSession } from "next-auth/react";
|
||||||
|
import { CooChat } from "./coo-chat";
|
||||||
import { Toaster } from "sonner";
|
import { Toaster } from "sonner";
|
||||||
|
|
||||||
interface ProjectShellProps {
|
interface ProjectShellProps {
|
||||||
@@ -21,59 +23,136 @@ interface ProjectShellProps {
|
|||||||
creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
|
creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
|
||||||
}
|
}
|
||||||
|
|
||||||
const ALL_TABS = [
|
const TOP_NAV = [
|
||||||
{ id: "overview", label: "Atlas", path: "overview" },
|
{ id: "build", label: "Build", path: "build" },
|
||||||
{ id: "prd", label: "PRD", path: "prd" },
|
{ id: "market", label: "Market", path: "growth" },
|
||||||
{ id: "build", label: "Build", path: "build" },
|
{ id: "assist", label: "Assist", path: "assist" },
|
||||||
{ id: "growth", label: "Growth", path: "growth" },
|
] as const;
|
||||||
{ id: "assist", label: "Assist", path: "assist" },
|
|
||||||
{ id: "analytics", label: "Analytics", path: "analytics" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function getTabsForMode(
|
|
||||||
mode: "fresh" | "chat-import" | "code-import" | "migration" = "fresh"
|
|
||||||
) {
|
|
||||||
switch (mode) {
|
|
||||||
case "code-import":
|
|
||||||
return ALL_TABS.filter(t => t.id !== "prd");
|
|
||||||
case "migration":
|
|
||||||
return ALL_TABS
|
|
||||||
.filter(t => t.id !== "prd")
|
|
||||||
.map(t => t.id === "overview" ? { ...t, label: "Migration Plan" } : t);
|
|
||||||
default:
|
|
||||||
return ALL_TABS;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ProjectShell({
|
export function ProjectShell({
|
||||||
children,
|
children,
|
||||||
workspace,
|
workspace,
|
||||||
projectId,
|
projectId,
|
||||||
creationMode,
|
projectName,
|
||||||
}: ProjectShellProps) {
|
}: ProjectShellProps) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const TABS = getTabsForMode(creationMode);
|
const { data: session } = useSession();
|
||||||
const activeTab = TABS.find(t => pathname?.includes(`/${t.path}`))?.id ?? "overview";
|
|
||||||
|
const activeSection =
|
||||||
|
pathname?.includes("/build") ? "build" :
|
||||||
|
pathname?.includes("/growth") ? "market" :
|
||||||
|
pathname?.includes("/assist") ? "assist" :
|
||||||
|
"build";
|
||||||
|
|
||||||
|
const userInitial = (session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?").toUpperCase();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<style>{`
|
<div style={{ display: "flex", flexDirection: "column", height: "100dvh", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>
|
||||||
@media (max-width: 768px) {
|
|
||||||
.vibn-left-sidebar { display: none !important; }
|
|
||||||
.vibn-page-content { padding-bottom: env(safe-area-inset-bottom); }
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
<div style={{ display: "flex", height: "100dvh", background: "#f6f4f0", overflow: "hidden" }}>
|
{/* ── Top navbar ── */}
|
||||||
|
<header style={{
|
||||||
|
height: 48, flexShrink: 0,
|
||||||
|
background: "#fff", borderBottom: "1px solid #e8e4dc",
|
||||||
|
display: "flex", alignItems: "center",
|
||||||
|
padding: "0 16px", gap: 0, zIndex: 10,
|
||||||
|
}}>
|
||||||
|
{/* Left: logo + project name */}
|
||||||
|
<Link href={`/${workspace}/projects`} style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0, marginRight: 20 }}>
|
||||||
|
<div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden", flexShrink: 0 }}>
|
||||||
|
<img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
{/* Left sidebar — includes project tabs */}
|
<div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
|
||||||
<div className="vibn-left-sidebar" style={{ display: "flex" }}>
|
{projectName}
|
||||||
<VIBNSidebar workspace={workspace} tabs={TABS} activeTab={activeTab} />
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Page content — extends to the very top */}
|
<div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />
|
||||||
<div className="vibn-page-content" style={{ flex: 1, overflow: "auto", minWidth: 0 }}>
|
|
||||||
{children}
|
{/* Center: section tabs */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 2, flex: 1 }}>
|
||||||
|
{TOP_NAV.map(item => {
|
||||||
|
const isActive = activeSection === item.id;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
href={`/${workspace}/project/${projectId}/${item.path}`}
|
||||||
|
style={{
|
||||||
|
padding: "5px 14px",
|
||||||
|
borderRadius: 8,
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
fontWeight: isActive ? 600 : 450,
|
||||||
|
color: isActive ? "#1a1a1a" : "#8a8478",
|
||||||
|
background: isActive ? "#f0ece4" : "transparent",
|
||||||
|
textDecoration: "none",
|
||||||
|
transition: "all 0.1s",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||||
|
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: user avatar */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
|
||||||
|
<button
|
||||||
|
onClick={() => signOut({ callbackUrl: "/auth" })}
|
||||||
|
title="Sign out"
|
||||||
|
style={{
|
||||||
|
width: 30, height: 30, borderRadius: "50%",
|
||||||
|
background: "#f0ece4", border: "none", cursor: "pointer",
|
||||||
|
display: "flex", alignItems: "center", justifyContent: "center",
|
||||||
|
fontSize: "0.68rem", fontWeight: 600, color: "#6b6560",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{userInitial}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* ── Main area ── */}
|
||||||
|
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
|
||||||
|
|
||||||
|
{/* Left: COO / Assist — persistent across all sections */}
|
||||||
|
<div style={{
|
||||||
|
width: 320, flexShrink: 0,
|
||||||
|
borderRight: "1px solid #e8e4dc",
|
||||||
|
background: "#fff",
|
||||||
|
display: "flex", flexDirection: "column",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}>
|
||||||
|
{/* Chat header */}
|
||||||
|
<div style={{
|
||||||
|
height: 44, flexShrink: 0,
|
||||||
|
display: "flex", alignItems: "center",
|
||||||
|
padding: "0 14px", gap: 8,
|
||||||
|
borderBottom: "1px solid #e8e4dc",
|
||||||
|
background: "#faf8f5",
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
width: 22, height: 22, borderRadius: 6,
|
||||||
|
background: "#1a1a1a", display: "flex",
|
||||||
|
alignItems: "center", justifyContent: "center",
|
||||||
|
fontSize: "0.55rem", color: "#fff", flexShrink: 0,
|
||||||
|
}}>◈</span>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: "0.75rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
|
||||||
|
<div style={{ fontSize: "0.58rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CooChat projectId={projectId} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: page content — changes with top nav */}
|
||||||
|
<div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user