feat(ui): clean minimal redesign inspired by ChatGPT/Claude

Replace navy/terracotta/cream color scheme with neutral white/dark palette,
swap Playfair Display serif fonts for Geist sans-serif, remove glassmorphism,
gradient mesh, glow effects, and backdrop-blur throughout chat UI. Home page
now redirects authenticated users to /chat, landing page moved to (marketing)
route group. Sidebar rebranded from Aspendos to YULA with nav links for
Council and Memory.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: EfeDurmaz16

apps/web/src/app/(marketing)/landing/page.tsx

@@ -0,0 +1,14 @@
+import { SiteDock } from '@/components/layout/site-dock';
+
+export default function MarketingLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <>
+            {children}
+            <SiteDock />
+        </>
+    );
+}

apps/web/src/app/(marketing)/layout.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import { Brain, CircleNotch, List, SidebarSimple, GlobeIcon } from '@phosphor-icons/react';
+import { Brain, CircleNotch, SidebarSimple, GlobeIcon, PlusCircle } from '@phosphor-icons/react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { ChatSidebar } from '@/components/chat/chat-sidebar';
-import { MemoryPanel } from '@/components/chat/memory-panel';
-import { ModelPicker } from '@/components/chat/model-picker';
 import { AddModelsModal } from '@/components/chat/add-models-modal';
 import { KeyboardShortcuts } from '@/components/chat/keyboard-shortcuts';
 import { ContextMenuMessage } from '@/components/chat/context-menu-message';
@@ -87,7 +85,6 @@ export default function ChatPage() {
     const chatId = params.id as string;
 
     const [sidebarOpen, setSidebarOpen] = useState(true);
-    const [memoryOpen, setMemoryOpen] = useState(false);
     const [chat, setChat] = useState<Chat | null>(null);
     const [chats, setChats] = useState<Chat[]>([]);
     const [isLoadingChat, setIsLoadingChat] = useState(true);
@@ -140,16 +137,6 @@ export default function ChatPage() {
 
                 const data = await res.json();
                 setChat(data);
-                // Initial messages are loaded by useStreamingChat via its own logic if we were using useChat fully, 
-                // but here useStreamingChat manages messages state. 
-                // The original code setInitialMessages separately.
-                // Assuming useStreamingChat handles the message list now or we load it here?
-                // The original code loaded initialMessages and combined them: const allMessages = [...initialMessages, ...messages];
-                // Wait, useStreamingChat in original code didn't load initial messages. It just exposed the new ones.
-                // So I need to keep the "load initial messages" logic, but merge it effectively.
-                // Actually, useStreamingChat hook in Step 16 has a "loadMessages" function.
-                // But typically useChat stores all messages.
-                // Let's stick to the previous pattern: "allMessages".
             } catch (err) {
                 setError(err instanceof Error ? err.message : 'Failed to load chat');
             } finally {
@@ -179,12 +166,11 @@ export default function ChatPage() {
         loadChats();
     }, [isLoaded, isSignedIn]);
 
-    // Initial messages from chat load (re-implementing original logic because useStreamingChat is a wrapper)
+    // Initial messages from chat load
     const [initialMessages, setInitialMessages] = useState<ChatMessage[]>([]);
 
     useEffect(() => {
         if (chat?.messages) {
-            // Map chat.messages to the format we need
             const converted: ChatMessage[] = chat.messages.map((m) => ({
                 id: m.id,
                 role: m.role,
@@ -196,11 +182,6 @@ export default function ChatPage() {
         }
     }, [chat]);
 
-    // Combine messages. 
-    // Note: useStreamingChat messages are cumulative for the session.
-    // If we load old messages, we should probably initialize useStreamingChat with them if possible,
-    // or just display them.
-    // The previous code did: const allMessages = [...initialMessages, ...messages];
     const allMessages: ChatMessage[] = [...initialMessages, ...messages];
 
     const handleNewChat = useCallback(async () => {
@@ -269,7 +250,7 @@ export default function ChatPage() {
     if (!isLoaded) {
         return (
             <div className="h-screen flex items-center justify-center bg-background">
-                <CircleNotch className="w-8 h-8 animate-spin text-zinc-400" />
+                <CircleNotch className="w-8 h-8 animate-spin text-muted-foreground" />
             </div>
         );
     }
@@ -280,17 +261,11 @@ export default function ChatPage() {
     }
 
     return (
-        <div className="h-screen bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-black overflow-hidden font-sans flex relative">
-            {/* YULA Monolith Background - Amber glow only */}
-            <div className="absolute inset-0 pointer-events-none z-0">
-                <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-amber-100/10 to-transparent dark:from-amber-900/8 rounded-full blur-3xl opacity-50" />
-                <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-gradient-to-bl from-emerald-100/15 to-transparent dark:from-emerald-900/10 rounded-full blur-3xl opacity-50" />
-            </div>
-
+        <div className="h-screen bg-background overflow-hidden font-sans flex">
             {/* Sidebar */}
             <div
                 className={cn(
-                    'h-full bg-white/50 dark:bg-zinc-950/50 backdrop-blur border-r border-zinc-200 dark:border-zinc-900 transition-all duration-300 z-20',
+                    'h-full bg-muted border-r border-border transition-all duration-300 z-20',
                     sidebarOpen ? 'w-64' : 'w-0 overflow-hidden'
                 )}
             >
@@ -303,38 +278,26 @@ export default function ChatPage() {
             </div>
 
             {/* Main Chat Area */}
-            <div className="flex-1 h-full flex flex-col relative bg-transparent z-10 w-full min-w-0">
-                {/* Header */}
-                <div className="flex items-center justify-between p-3 border-b border-zinc-200 dark:border-zinc-800 flex-none bg-white/50 dark:bg-zinc-950/50 backdrop-blur z-20 w-full">
-                    <div className="flex items-center">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => setSidebarOpen(!sidebarOpen)}
-                            className="h-8 w-8 text-muted-foreground hover:text-foreground mr-2"
-                        >
-                            <SidebarSimple className="w-4 h-4" />
-                        </Button>
-                        <div className="hidden sm:block">
-                            <ModelPicker
-                                selectedModel={chat?.modelPreference || 'openai/gpt-5.2'}
-                                onSelectModel={handleModelChange}
-                                onOpenAddModels={() => setIsAddModelsOpen(true)}
-                                enabledModels={enabledModels}
-                            />
-                        </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => setMemoryOpen(!memoryOpen)}
-                            className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                        >
-                            <List className="w-4 h-4" />
-                        </Button>
-                    </div>
+            <div className="flex-1 h-full flex flex-col relative z-10 w-full min-w-0">
+                {/* Header - simplified: sidebar toggle + new chat */}
+                <div className="flex items-center justify-between p-3 border-b border-border flex-none bg-background z-20 w-full">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setSidebarOpen(!sidebarOpen)}
+                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                    >
+                        <SidebarSimple className="w-4 h-4" />
+                    </Button>
+
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={handleNewChat}
+                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                    >
+                        <PlusCircle className="w-4 h-4" />
+                    </Button>
                 </div>
 
                 {/* Conversation Area */}
@@ -345,7 +308,7 @@ export default function ChatPage() {
                                 <ConversationEmptyState
                                     icon={<Brain className="w-12 h-12 text-muted-foreground/50" weight="duotone" />}
                                     title="Start a conversation"
-                                    description="Ask anything, analyze data, or generate ideas. Aspendos is here to help."
+                                    description="Ask anything, analyze data, or generate ideas. YULA is here to help."
                                 />
                             ) : (
                                 allMessages.map((msg, index) => (
@@ -354,7 +317,6 @@ export default function ChatPage() {
                                         message={{ id: msg.id, content: msg.content, role: msg.role }}
                                     >
                                         <Message from={msg.role}>
-                                            {/* Show reasoning for assistant messages if available */}
                                             {msg.role === 'assistant' && msg.decision?.reasoning && (
                                                 <Reasoning
                                                     isStreaming={
@@ -395,7 +357,7 @@ export default function ChatPage() {
                 <div className="p-4 flex-none z-20 max-w-3xl mx-auto w-full">
                     <PromptInput
                         onSubmit={handleSubmit}
-                        className="shadow-xl"
+                        className="border border-border rounded-2xl"
                     >
                         <PromptInputHeader>
                             <PromptInputAttachments>
@@ -411,7 +373,6 @@ export default function ChatPage() {
                                     <PromptInputActionMenuTrigger />
                                     <PromptInputActionMenuContent>
                                         <PromptInputActionAddAttachments />
-                                        {/* Add more actions like shortcuts later */}
                                     </PromptInputActionMenuContent>
                                 </PromptInputActionMenu>
                                 <PromptInputButton
@@ -423,7 +384,7 @@ export default function ChatPage() {
                                     <GlobeIcon size={16} />
                                     <span className="text-xs">Search</span>
                                 </PromptInputButton>
-                                {/* Model Selector in input */}
+                                {/* Model Selector in input footer */}
                                 <PromptInputSelect
                                     value={model}
                                     onValueChange={handleModelChange}
@@ -444,21 +405,11 @@ export default function ChatPage() {
                         </PromptInputFooter>
                     </PromptInput>
                     <div className="text-center mt-2 text-xs text-muted-foreground">
-                        Aspendos can make mistakes. Check important info.
+                        YULA can make mistakes. Check important info.
                     </div>
                 </div>
             </div>
 
-            {/* Memory Panel */}
-            <div
-                className={cn(
-                    'h-full border-l border-zinc-200 dark:border-zinc-900 bg-white/50 dark:bg-zinc-950/50 backdrop-blur transition-all duration-300 z-20',
-                    memoryOpen ? 'w-80' : 'w-0 overflow-hidden'
-                )}
-            >
-                <MemoryPanel />
-            </div>
-
             {/* Keyboard Shortcuts Panel */}
             <KeyboardShortcuts />