From 1ef3f9baa33d36438febe89c98d26bad85b3a7ed Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Mon, 9 Mar 2026 15:51:48 -0700
Subject: [PATCH] feat: top navbar (Build|Market|Assist) + persistent Assist
 chat in shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../project/[projectId]/build/page.tsx        | 200 +-----------------
 components/layout/coo-chat.tsx                | 191 +++++++++++++++++
 components/layout/project-shell.tsx           | 161 ++++++++++----
 3 files changed, 313 insertions(+), 239 deletions(-)
 create mode 100644 components/layout/coo-chat.tsx

diff --git a/app/[workspace]/project/[projectId]/build/page.tsx b/app/[workspace]/project/[projectId]/build/page.tsx
index 9c5a456..3185bf4 100644
--- a/app/[workspace]/project/[projectId]/build/page.tsx
+++ b/app/[workspace]/project/[projectId]/build/page.tsx
@@ -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) ───────────────────────────────────────────
 
 function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
@@ -1110,7 +935,6 @@ function BuildHubInner() {
   const [apps, setApps] = useState<AppEntry[]>([]);
   const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
   const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
-  const [projectName, setProjectName] = useState<string>("");
 
   // File viewer state — shared between inner nav (tree) and viewer panel
   const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
@@ -1121,10 +945,7 @@ function BuildHubInner() {
   useEffect(() => {
     fetch(`/api/projects/${projectId}/apps`)
       .then(r => r.json())
-      .then(d => {
-        setApps(d.apps ?? []);
-        if (d.projectName) setProjectName(d.projectName);
-      }).catch(() => {});
+      .then(d => { setApps(d.apps ?? []); }).catch(() => {});
     fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
       const ids: string[] = d.surfaces ?? [];
       const themes: Record<string, string> = d.surfaceThemes ?? {};
@@ -1162,24 +983,7 @@ function BuildHubInner() {
   return (
     <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
 
-      {/* ── Left: COO / Assist persistent chat ── */}
-      <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 ── */}
+      {/* ── Build content ── */}
       <div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
 
         {/* Inner nav — Build section switcher + contextual items */}
diff --git a/components/layout/coo-chat.tsx b/components/layout/coo-chat.tsx
new file mode 100644
index 0000000..9281478
--- /dev/null
+++ b/components/layout/coo-chat.tsx
@@ -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>
+  );
+}
diff --git a/components/layout/project-shell.tsx b/components/layout/project-shell.tsx
index 7c6855e..daa4b4d 100644
--- a/components/layout/project-shell.tsx
+++ b/components/layout/project-shell.tsx
@@ -2,7 +2,9 @@
 
 import { usePathname } from "next/navigation";
 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";
 
 interface ProjectShellProps {
@@ -21,59 +23,136 @@ interface ProjectShellProps {
   creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
 }
 
-const ALL_TABS = [
-  { id: "overview",   label: "Atlas",     path: "overview" },
-  { id: "prd",        label: "PRD",       path: "prd" },
-  { id: "build",      label: "Build",     path: "build" },
-  { id: "growth",     label: "Growth",    path: "growth" },
-  { 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;
-  }
-}
+const TOP_NAV = [
+  { id: "build",  label: "Build",  path: "build" },
+  { id: "market", label: "Market", path: "growth" },
+  { id: "assist", label: "Assist", path: "assist" },
+] as const;
 
 export function ProjectShell({
   children,
   workspace,
   projectId,
-  creationMode,
+  projectName,
 }: ProjectShellProps) {
   const pathname = usePathname();
-  const TABS = getTabsForMode(creationMode);
-  const activeTab = TABS.find(t => pathname?.includes(`/${t.path}`))?.id ?? "overview";
+  const { data: session } = useSession();
+
+  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 (
     <>
-      <style>{`
-        @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", flexDirection: "column", height: "100dvh", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>
 
-      <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 className="vibn-left-sidebar" style={{ display: "flex" }}>
-          <VIBNSidebar workspace={workspace} tabs={TABS} activeTab={activeTab} />
-        </div>
+          <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
+            {projectName}
+          </div>
 
-        {/* Page content — extends to the very top */}
-        <div className="vibn-page-content" style={{ flex: 1, overflow: "auto", minWidth: 0 }}>
-          {children}
+          <div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />
+
+          {/* 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>