feat: split top navbar to align with chat/content panels, fix Gemini API key

- Top bar left section (320px) = logo + project name, aligns with chat panel
- Top bar right section = Build|Market|Assist pills + tool icons (Preview, Tasks, Code, Design, Backend) + avatar
- Read GOOGLE_API_KEY inside POST handler (not top-level) to ensure env is resolved at request time

Made-with: Cursor

app/api/projects/[projectId]/advisor/route.ts

@@ -3,9 +3,7 @@ import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 
-const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY ?? '';
+const MODEL = process.env.GEMINI_MODEL ?? 'gemini-2.0-flash';
-const MODEL = process.env.GEMINI_MODEL ?? 'gemini-2.0-flash-exp';
-const STREAM_URL = `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:streamGenerateContent?key=${GOOGLE_API_KEY}&alt=sse`;
 
 function buildSystemPrompt(projectData: Record<string, unknown>): string {
   const name = (projectData.name as string) ?? 'this project';
@@ -57,6 +55,9 @@ export async function POST(
     return new Response('Unauthorized', { status: 401 });
   }
 
+  const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY ?? '';
+  const STREAM_URL = `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:streamGenerateContent?key=${GOOGLE_API_KEY}&alt=sse`;
+
   if (!GOOGLE_API_KEY) {
     return new Response('GOOGLE_API_KEY not configured', { status: 500 });
   }

components/layout/project-shell.tsx

@@ -23,12 +23,24 @@ interface ProjectShellProps {
   creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
 }
 
-const TOP_NAV = [
+// Width of the left chat panel — must match in both the header and the body
+const CHAT_W = 320;
+
+const SECTIONS = [
   { id: "build",  label: "Build",  path: "build" },
   { id: "market", label: "Market", path: "growth" },
   { id: "assist", label: "Assist", path: "assist" },
 ] as const;
 
+// Tool icons shown to the right of section pills
+const TOOLS = [
+  { id: "preview",  icon: "↗",  label: "Preview",    title: "Open preview" },
+  { id: "tasks",    icon: "≡",  label: "Tasks",      title: "Agent tasks" },
+  { id: "code",     icon: "</>", label: "Code",      title: "Code" },
+  { id: "design",   icon: "◈",  label: "Design",     title: "Design" },
+  { id: "backend",  icon: "⬡",  label: "Backend",    title: "Backend / Infra" },
+] as const;
+
 export function ProjectShell({
   children,
   workspace,
@@ -44,70 +56,126 @@ export function ProjectShell({
     pathname?.includes("/assist") ? "assist" :
     "build";
 
-  const userInitial = (session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?").toUpperCase();
+  const userInitial = (
+    session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?"
+  ).toUpperCase();
 
   return (
     <>
-      <div style={{ display: "flex", flexDirection: "column", height: "100dvh", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>
+      <div style={{
+        display: "flex", flexDirection: "column",
+        height: "100dvh", overflow: "hidden",
+        fontFamily: "Outfit, sans-serif",
+        background: "#f6f4f0",
+      }}>
 
-        {/* ── Top navbar ── */}
+        {/* ── Top bar — split to align with panels below ── */}
         <header style={{
           height: 48, flexShrink: 0,
+          display: "flex", alignItems: "stretch",
           background: "#fff", borderBottom: "1px solid #e8e4dc",
-          display: "flex", alignItems: "center",
+          zIndex: 10,
-          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 }}>
+          {/* Left section — aligns with chat panel */}
-            <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden", flexShrink: 0 }}>
+          <div style={{
-              <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+            width: CHAT_W, flexShrink: 0,
+            display: "flex", alignItems: "center",
+            padding: "0 14px", gap: 9,
+            borderRight: "1px solid #e8e4dc",
+          }}>
+            <Link
+              href={`/${workspace}/projects`}
+              style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0 }}
+            >
+              <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>
+
+            <span style={{
+              fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
+              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
+            }}>
+              {projectName}
+            </span>
+          </div>
+
+          {/* Right section — aligns with content panel */}
+          <div style={{
+            flex: 1, display: "flex", alignItems: "center",
+            padding: "0 16px", gap: 0, minWidth: 0,
+          }}>
+
+            {/* Section pills: Build | Market | Assist */}
+            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: "auto" }}>
+              {SECTIONS.map(s => {
+                const isActive = activeSection === s.id;
+                return (
+                  <Link
+                    key={s.id}
+                    href={`/${workspace}/project/${projectId}/${s.path}`}
+                    style={{
+                      padding: "5px 13px",
+                      borderRadius: 8,
+                      fontSize: "0.8rem",
+                      fontWeight: isActive ? 600 : 440,
+                      color: isActive ? "#1a1a1a" : "#8a8478",
+                      background: isActive ? "#f0ece4" : "transparent",
+                      textDecoration: "none",
+                      transition: "background 0.1s, color 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"; }}
+                  >
+                    {s.label}
+                  </Link>
+                );
+              })}
             </div>
-          </Link>
 
-          <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
+            {/* Divider */}
-            {projectName}
+            <div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} />
-          </div>
 
-          <div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />
+            {/* Tool icons */}
-
+            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}>
-          {/* Center: section tabs */}
+              {TOOLS.map(t => (
-          <div style={{ display: "flex", alignItems: "center", gap: 2, flex: 1 }}>
+                <button
-            {TOP_NAV.map(item => {
+                  key={t.id}
-              const isActive = activeSection === item.id;
+                  title={t.title}
-              return (
-                <Link
-                  key={item.id}
-                  href={`/${workspace}/project/${projectId}/${item.path}`}
                   style={{
-                    padding: "5px 14px",
+                    width: 32, height: 32, border: "none", borderRadius: 7,
-                    borderRadius: 8,
+                    background: "transparent", cursor: "pointer",
-                    fontSize: "0.8rem",
+                    display: "flex", alignItems: "center", justifyContent: "center",
-                    fontWeight: isActive ? 600 : 450,
+                    fontSize: t.icon === "</>" ? "0.6rem" : "0.78rem",
-                    color: isActive ? "#1a1a1a" : "#8a8478",
+                    color: "#9a9490", fontFamily: "Outfit, sans-serif",
-                    background: isActive ? "#f0ece4" : "transparent",
+                    fontWeight: 600, letterSpacing: t.icon === "</>" ? "-0.02em" : "normal",
-                    textDecoration: "none",
+                    transition: "background 0.1s, color 0.1s",
-                    transition: "all 0.1s",
+                  }}
-                    whiteSpace: "nowrap",
+                  onMouseEnter={e => {
+                    (e.currentTarget as HTMLElement).style.background = "#f0ece4";
+                    (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
+                  }}
+                  onMouseLeave={e => {
+                    (e.currentTarget as HTMLElement).style.background = "transparent";
+                    (e.currentTarget as HTMLElement).style.color = "#9a9490";
                   }}
-                  onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
-                  onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
                 >
-                  {item.label}
+                  {t.icon}
-                </Link>
+                </button>
-              );
+              ))}
-            })}
+            </div>
-          </div>
 
-          {/* Right: user avatar */}
+            {/* User avatar */}
-          <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
             <button
               onClick={() => signOut({ callbackUrl: "/auth" })}
-              title="Sign out"
+              title={`${session?.user?.name ?? session?.user?.email ?? "Account"} — Sign out`}
               style={{
-                width: 30, height: 30, borderRadius: "50%",
+                width: 28, height: 28, borderRadius: "50%",
                 background: "#f0ece4", border: "none", cursor: "pointer",
                 display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "0.68rem", fontWeight: 600, color: "#6b6560",
+                fontSize: "0.65rem", fontWeight: 700, color: "#6b6560", flexShrink: 0,
               }}
             >
               {userInitial}
@@ -118,9 +186,9 @@ export function ProjectShell({
         {/* ── Main area ── */}
         <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
 
-          {/* Left: COO / Assist — persistent across all sections */}
+          {/* Left: Assist chat — persistent */}
           <div style={{
-            width: 320, flexShrink: 0,
+            width: CHAT_W, flexShrink: 0,
             borderRight: "1px solid #e8e4dc",
             background: "#fff",
             display: "flex", flexDirection: "column",
@@ -136,20 +204,20 @@ export function ProjectShell({
             }}>
               <span style={{
                 width: 22, height: 22, borderRadius: 6,
-                background: "#1a1a1a", display: "flex",
+                background: "#1a1a1a",
-                alignItems: "center", justifyContent: "center",
+                display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "0.55rem", color: "#fff", flexShrink: 0,
+                fontSize: "0.52rem", color: "#fff", flexShrink: 0,
               }}>◈</span>
               <div>
-                <div style={{ fontSize: "0.75rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
+                <div style={{ fontSize: "0.74rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
-                <div style={{ fontSize: "0.58rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
+                <div style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
               </div>
             </div>
 
             <CooChat projectId={projectId} />
           </div>
 
-          {/* Right: page content — changes with top nav */}
+          {/* Right: content — changes per section */}
           <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
             {children}
           </div>