revert: restore Atlas|PRD|Build|Growth|Assist|Analytics tab nav, remove COO sidebar

- SECTIONS back to 6 tabs: Atlas → /overview, PRD, Build, Growth, Assist, Analytics
- Remove persistent CooChat left panel and drag-resize handle
- Content area is now full-width again (no 320px sidebar eating space)
- Clean up unused imports (useSearchParams, useRouter, CooChat, Lucide icons, TOOLS constant)

Made-with: Cursor

components/layout/project-shell.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
-import { ReactNode, Suspense, useRef, useState, useCallback } from "react";
+import { ReactNode, Suspense } from "react";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
-import { CooChat } from "./coo-chat";
 import { Toaster } from "sonner";
-import { MonitorPlay, ListChecks, Code2, Palette, Cloud } from "lucide-react";
 
 interface ProjectShellProps {
   children: ReactNode;
@@ -24,33 +22,15 @@ interface ProjectShellProps {
   creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
 }
 
-const CHAT_W_DEFAULT = 320;
-const CHAT_W_MIN = 200;
-const CHAT_W_MAX = 560;
-
 const SECTIONS = [
-  { id: "build",  label: "Build",  path: "build" },
+  { id: "overview",  label: "Atlas",     path: "overview" },
-  { id: "market", label: "Market", path: "growth" },
+  { id: "prd",       label: "PRD",       path: "prd" },
-  { id: "assist", label: "Assist", path: "assist" },
+  { id: "build",     label: "Build",     path: "build" },
+  { id: "growth",    label: "Growth",    path: "growth" },
+  { id: "assist",    label: "Assist",    path: "assist" },
+  { id: "analytics", label: "Analytics", path: "analytics" },
 ] as const;
 
-// Each tool maps to a section param on the build page
-const TOOLS = [
-  { id: "tasks",    Icon: ListChecks,  title: "Tasks",       section: "tasks" },
-  { id: "preview",  Icon: MonitorPlay, title: "Preview",     section: "preview" },
-  { id: "code",     Icon: Code2,       title: "Code",        section: "code" },
-  { id: "design",   Icon: Palette,     title: "Design",      section: "layouts" },
-  { id: "backend",  Icon: Cloud,       title: "Backend",     section: "infrastructure" },
-];
-
-// Maps URL section → tool id (for active highlight)
-const SECTION_TO_TOOL: Record<string, string> = {
-  preview: "preview",
-  tasks:   "tasks",
-  code:    "code",
-  layouts: "design",
-  infrastructure: "backend",
-};
 
 function ProjectShellInner({
   children,
@@ -59,56 +39,21 @@ function ProjectShellInner({
   projectName,
 }: ProjectShellProps) {
   const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useRouter();
   const { data: session } = useSession();
 
-  const [chatWidth, setChatWidth] = useState(CHAT_W_DEFAULT);
-  const dragging = useRef(false);
-  const startX = useRef(0);
-  const startW = useRef(0);
-
-  const onDragStart = useCallback((e: React.MouseEvent) => {
-    dragging.current = true;
-    startX.current = e.clientX;
-    startW.current = chatWidth;
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-
-    const onMove = (e: MouseEvent) => {
-      if (!dragging.current) return;
-      const delta = e.clientX - startX.current;
-      setChatWidth(Math.min(CHAT_W_MAX, Math.max(CHAT_W_MIN, startW.current + delta)));
-    };
-    const onUp = () => {
-      dragging.current = false;
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-  }, [chatWidth]);
-
   const activeSection =
-    pathname?.includes("/build")  ? "build"  :
+    pathname?.includes("/overview")  ? "overview"  :
-    pathname?.includes("/growth") ? "market" :
+    pathname?.includes("/prd")        ? "prd"        :
-    pathname?.includes("/assist") ? "assist" :
+    pathname?.includes("/build")      ? "build"      :
-    "build";
+    pathname?.includes("/growth")     ? "growth"     :
-
+    pathname?.includes("/assist")     ? "assist"     :
-  const urlSection = searchParams.get("section") ?? "code";
+    pathname?.includes("/analytics")  ? "analytics"  :
-  const activeTool = SECTION_TO_TOOL[urlSection] ?? "code";
+    "overview";
 
   const userInitial = (
     session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?"
   ).toUpperCase();
 
-  const handleToolClick = (toolSection: string) => {
-    // Always navigate to the build page with the appropriate section
-    router.push(`/${workspace}/project/${projectId}/build?section=${toolSection}`, { scroll: false });
-  };
-
   return (
     <>
       <div style={{
@@ -126,11 +71,10 @@ function ProjectShellInner({
           zIndex: 10,
         }}>
 
-          {/* Left — aligns with chat panel */}
+          {/* Logo + project name */}
           <div style={{
-            width: chatWidth, flexShrink: 0,
             display: "flex", alignItems: "center",
-            padding: "0 14px", gap: 9,
+            padding: "0 16px", gap: 9, flexShrink: 0,
             borderRight: "1px solid #e8e4dc",
           }}>
             <Link
@@ -143,86 +87,37 @@ function ProjectShellInner({
             </Link>
             <span style={{
               fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
-              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
+              maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
             }}>
               {projectName}
             </span>
           </div>
 
-          {/* Right — aligns with content panel */}
+          {/* Tab nav */}
-          <div style={{
+          <div style={{ flex: 1, display: "flex", alignItems: "center", padding: "0 12px", gap: 2 }}>
-            flex: 1, display: "flex", alignItems: "center",
+            {SECTIONS.map(s => {
-            padding: "0 14px", gap: 0, minWidth: 0,
+              const isActive = activeSection === s.id;
-          }}>
+              return (
-
+                <Link
-            {/* Pills + tool icons grouped together */}
+                  key={s.id}
-            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
+                  href={`/${workspace}/project/${projectId}/${s.path}`}
-
+                  style={{
-              {/* Section pills: Build | Market | Assist */}
+                    padding: "5px 12px", borderRadius: 8,
-              {SECTIONS.map(s => {
+                    fontSize: "0.8rem",
-                const isActive = activeSection === s.id;
+                    fontWeight: isActive ? 600 : 440,
-                return (
+                    color: isActive ? "#1a1a1a" : "#8a8478",
-                  <Link
+                    background: isActive ? "#f0ece4" : "transparent",
-                    key={s.id}
+                    textDecoration: "none",
-                    href={`/${workspace}/project/${projectId}/${s.path}`}
+                    transition: "background 0.1s, color 0.1s",
-                    style={{
+                    whiteSpace: "nowrap",
-                      padding: "5px 12px",
+                  }}
-                      borderRadius: 8,
+                  onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
-                      fontSize: "0.8rem",
+                  onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
-                      fontWeight: isActive ? 600 : 440,
+                >
-                      color: isActive ? "#1a1a1a" : "#8a8478",
+                  {s.label}
-                      background: isActive ? "#f0ece4" : "transparent",
+                </Link>
-                      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>
-                );
-              })}
-
-              {/* Divider */}
-              <div style={{ width: 1, height: 16, background: "#e8e4dc", margin: "0 6px", flexShrink: 0 }} />
-
-              {/* Tool icons — toggle the main content view */}
-              {TOOLS.map(({ id, Icon, title, section }) => {
-                const isActive = activeTool === id;
-                return (
-                  <button
-                    key={id}
-                    title={title}
-                    onClick={() => handleToolClick(section)}
-                    style={{
-                      width: 32, height: 32,
-                      border: isActive ? "1.5px solid #d4cfc6" : "1.5px solid transparent",
-                      borderRadius: 8,
-                      background: isActive ? "#f0ece4" : "transparent",
-                      cursor: "pointer",
-                      display: "flex", alignItems: "center", justifyContent: "center",
-                      color: isActive ? "#1a1a1a" : "#9a9490",
-                      transition: "all 0.1s",
-                    }}
-                    onMouseEnter={e => {
-                      if (!isActive) {
-                        (e.currentTarget as HTMLElement).style.background = "#f6f4f0";
-                        (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
-                      }
-                    }}
-                    onMouseLeave={e => {
-                      if (!isActive) {
-                        (e.currentTarget as HTMLElement).style.background = "transparent";
-                        (e.currentTarget as HTMLElement).style.color = "#9a9490";
-                      }
-                    }}
-                  >
-                    <Icon size={15} strokeWidth={isActive ? 2 : 1.75} />
-                  </button>
-                );
-              })}
-            </div>
 
             {/* Spacer */}
             <div style={{ flex: 1 }} />
@@ -243,56 +138,9 @@ function ProjectShellInner({
           </div>
         </header>
 
-        {/* ── Main area ── */}
+        {/* ── Full-width content ── */}
-        <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+        <div style={{ flex: 1, overflow: "hidden" }}>
-
+          {children}
-          {/* Left: Assist chat — persistent */}
-          <div style={{
-            width: chatWidth, flexShrink: 0,
-            background: "#fff",
-            display: "flex", flexDirection: "column",
-            overflow: "hidden",
-            position: "relative",
-          }}>
-            <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.52rem", color: "#fff", flexShrink: 0,
-              }}>◈</span>
-              <div>
-                <div style={{ fontSize: "0.74rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
-                <div style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
-              </div>
-            </div>
-            <CooChat projectId={projectId} />
-          </div>
-
-          {/* Drag handle */}
-          <div
-            onMouseDown={onDragStart}
-            style={{
-              width: 5, flexShrink: 0, cursor: "col-resize",
-              background: "transparent",
-              borderLeft: "1px solid #e8e4dc",
-              transition: "background 0.15s",
-              zIndex: 5,
-            }}
-            onMouseEnter={e => (e.currentTarget.style.background = "#e8e4dc")}
-            onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-          />
-
-          {/* Right: content */}
-          <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
-            {children}
-          </div>
         </div>
       </div>