[codex] add multi-agent command center

.env.example

@@ -85,6 +85,8 @@ OPENAI_API_KEY=sk-your-api-key-here
 
 # === Optional: Tavily web search ===
 # TAVILY_API_KEY=          # Enables structured search in blog research and graph expansion
+# TAVILY_MCP_URL=          # Optional MCP proxy endpoint; used before TAVILY_API_KEY when set
+# TAVILY_MCP_TOKEN=        # Bearer token for TAVILY_MCP_URL
 
 # === Optional: Google Search Console ===
 # GOOGLE_GSC_CREDENTIALS=      # JSON string with client_id, client_secret, refresh_token

frontend/src/components/chat/ChatContainer.tsx

@@ -65,6 +65,7 @@ export function ChatContainer({
   hasMessages,
   projectId,
   projectContext,
+  compact = false,
 }: {
   messages: ChatMessage[];
   isStreaming: boolean;
@@ -73,6 +74,7 @@ export function ChatContainer({
   hasMessages: boolean;
   projectId: number | null;
   projectContext?: ChatProjectContext | null;
+  compact?: boolean;
 }) {
   const { t } = useI18n();
   const projectName = projectContext?.project.brand_name ?? null;
@@ -95,13 +97,16 @@ export function ChatContainer({
                 <ProjectContextCard
                   context={projectContext}
                   onSuggest={(prompt) => sendMessage(prompt)}
+                  compact={compact}
                 />
-                <div className="border-t border-slate-100 pt-6">
-                  <AgentGrid
-                    onSelect={(prompt) => sendMessage(prompt)}
-                    projectName={projectName}
-                  />
-                </div>
+                {!compact && (
+                  <div className="border-t border-slate-100 pt-6">
+                    <AgentGrid
+                      onSelect={(prompt) => sendMessage(prompt)}
+                      projectName={projectName}
+                    />
+                  </div>
+                )}
               </div>
             ) : (
               <AgentGrid

frontend/src/components/chat/ProjectContextCard.tsx

@@ -63,9 +63,11 @@ function SeverityDot({ severity }: { severity: string }) {
 export function ProjectContextCard({
   context,
   onSuggest,
+  compact = false,
 }: {
   context: ChatProjectContext;
   onSuggest: (prompt: string) => void;
+  compact?: boolean;
 }) {
   const { t } = useI18n();
   const { project, scores, keywords, competitors, keyword_gaps, findings } =
@@ -118,7 +120,7 @@ export function ProjectContextCard({
       </div>
 
       {/* Score cards */}
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <div className={compact ? "grid grid-cols-2 gap-3" : "grid grid-cols-2 gap-3 lg:grid-cols-4"}>
         <ScoreCard
           label="SEO"
           value={
@@ -249,7 +251,7 @@ export function ProjectContextCard({
         <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
           {t("chat.contextQuickStart")}
         </p>
-        <div className="grid grid-cols-2 gap-2">
+        <div className={compact ? "grid gap-2" : "grid grid-cols-2 gap-2"}>
           {suggestions.map((s) => (
             <button
               key={s.label}

frontend/src/components/layout/AppShell.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { AnimatePresence, motion } from "framer-motion";
+import { useLocation } from "react-router";
 import { Sidebar } from "./Sidebar";
 import { SiteFooter } from "./SiteFooter";
 import { TopBar } from "./TopBar";
 
 export function AppShell({ children }: { children: ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { pathname } = useLocation();
+  const projectConsole = pathname.startsWith("/projects/");
 
   useEffect(() => {
     const robotsMeta = document.querySelector('meta[name="robots"]');
@@ -44,8 +47,12 @@ export function AppShell({ children }: { children: ReactNode }) {
       <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
       <div className="flex flex-1 flex-col overflow-hidden lg:pl-0 pl-0 relative">
         <TopBar onMenuClick={() => setSidebarOpen(true)} />
-        <main className="flex-1 overflow-y-auto px-4 pb-8 lg:px-8">
-          <div className="mx-auto flex min-h-full w-full max-w-5xl flex-col">
+        <main className="flex-1 overflow-y-auto px-3 pb-8 sm:px-4 lg:px-6">
+          <div
+            className={`mx-auto flex min-h-full w-full flex-col ${
+              projectConsole ? "max-w-[1760px]" : "max-w-5xl"
+            }`}
+          >
             <div className="flex-1">
               {children}
             </div>