Upload folder using huggingface_hub

.hfignore

@@ -0,0 +1,9 @@
+node_modules
+.git
+.github
+*.log
+verify_features.spec.ts
+chat_page_check.png
+.env*
+data
+.DS_Store

App.tsx

@@ -12,11 +12,11 @@ import Documentation from './components/Documentation';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import SimulationPage from './components/SimulationPage';
-import ConversationPage from './components/ConversationPage';
 import ChatPage from './components/ChatPage';
+import ProductGuide from './components/ProductGuide';
 
 function App() {
-  const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'conversation' | 'chat'>('simulation');
+  const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'chat' | 'guide'>('simulation');
   const [user, setUser] = useState<any>(null);
   const [simulationResult, setSimulationResult] = useState<any>(null);
 
@@ -59,24 +59,38 @@ function App() {
     setCurrentView('landing');
   };
 
-  const openConversation = () => {
-    setCurrentView('conversation');
-  };
-
   const openChat = () => {
     setCurrentView('chat');
   };
 
+  const openGuide = () => {
+    setCurrentView('guide');
+  };
+
   const goBackToSimulation = () => {
     setCurrentView('simulation');
   };
 
+  if (currentView === 'guide') {
+    return (
+      <div className="bg-black min-h-screen relative">
+        <button 
+          onClick={goBackToSimulation}
+          className="absolute top-8 left-8 p-3 bg-gray-900 border border-gray-800 rounded-full text-white hover:bg-gray-800 transition-colors z-50"
+        >
+          <X size={24} />
+        </button>
+        <ProductGuide />
+      </div>
+    );
+  }
+
   if (currentView === 'simulation') {
     return (
       <SimulationPage 
         onBack={goBackToLanding} 
-        onOpenConversation={openConversation}
         onOpenChat={openChat}
+        onOpenGuide={openGuide}
         user={user}
         onLogin={loginWithHF}
         onLogout={handleLogout}

components/ChatPage.tsx

@@ -78,7 +78,7 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
   };
 
   return (
-    <div className="border-t border-gray-800 pt-6 mt-4 bg-[#0a0a0a] px-6 pb-8 md:pb-10 absolute bottom-0 left-0 right-0 z-20 shadow-[0_-20px_50px_rgba(0,0,0,0.8)]">
+    <div className="border-t border-gray-800 pt-6 bg-[#0a0a0a] px-6 pb-8 md:pb-10 z-20 shadow-[0_-20px_50px_rgba(0,0,0,0.8)]">
       <div className="max-w-5xl mx-auto space-y-4">
         {uploadedFiles.length > 0 && (
           <div className="flex flex-wrap gap-2 mb-2">
@@ -153,6 +153,8 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
   const [isSimulating, setIsSimulating] = useState(false);
   const [simulationId, setSimulationId] = useState<string>('User Group 1');
   const [selectedVariation, setSelectedVariation] = useState<string>('');
+  const [showContextModal, setShowContextModal] = useState(false);
+  const [contextInput, setContextInput] = useState('');
 
   useEffect(() => {
     const fetchSimulations = async () => {
@@ -183,11 +185,27 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
     try {
       const result = await GradioService.startSimulationAsync(simulationId, msg);
       setIsSimulating(false);
-      setSimulationResult({
+      const resData = {
         status: "Initiated",
         message: "Simulation started successfully. Please wait for the results.",
-        data: result
-      });
+        data: result,
+        content: msg,
+        variation: selectedVariation,
+        simulationId
+      };
+      setSimulationResult(resData);
+
+      // Persist simulation initiation
+      fetch('/api/save-data', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'simulation-start',
+          data: resData,
+          user: 'chat-user'
+        })
+      }).catch(console.error);
+
     } catch (error) {
       setIsSimulating(false);
       setSimulationResult({
@@ -202,11 +220,25 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
     try {
       const status = await GradioService.getSimulationStatus(simulationId);
       setIsSimulating(false);
-      setSimulationResult({
+      const resData = {
         status: "Updated",
         message: "Latest status gathered from API.",
-        data: status
-      });
+        data: status,
+        simulationId
+      };
+      setSimulationResult(resData);
+
+      // Persist simulation result
+      fetch('/api/save-data', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'simulation-result',
+          data: resData,
+          user: 'chat-user'
+        })
+      }).catch(console.error);
+
     } catch (error) {
       setIsSimulating(false);
       setSimulationResult({
@@ -273,7 +305,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
   };
 
   return (
-    <div className="fixed inset-0 z-50 bg-[#050505] text-white flex flex-col animate-in fade-in duration-300">
+    <div className="fixed inset-0 z-50 bg-[#050505] text-white flex flex-col animate-in fade-in duration-300 overflow-hidden">
       
       {/* Header / Nav */}
       <div className="flex items-center justify-between px-6 py-4 md:px-8 md:py-6 border-b border-gray-800/50 bg-[#050505] z-10 relative">
@@ -328,8 +360,8 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
       )}
 
       {/* Scrollable Content Area */}
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8 pb-80">
-        <div className="max-w-5xl mx-auto">
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8">
+        <div className="max-w-5xl mx-auto pb-20">
           <h1 className="text-2xl md:text-3xl font-semibold text-center mb-12 mt-4 md:mt-8">What would you like to simulate?</h1>
           
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
@@ -352,7 +384,10 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
           </div>
 
           <div className="flex justify-center mt-16 mb-8">
-             <button className="flex items-center gap-2 text-gray-500 hover:text-gray-300 transition-colors text-sm px-4 py-2 hover:bg-gray-900 rounded-lg">
+             <button 
+               onClick={() => setShowContextModal(true)}
+               className="flex items-center gap-2 text-gray-500 hover:text-gray-300 transition-colors text-sm px-4 py-2 hover:bg-gray-900 rounded-lg"
+             >
                 <Plus size={16} />
                 Request a new context
              </button>
@@ -360,6 +395,66 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
         </div>
       </div>
 
+      {/* Context Modal */}
+      {showContextModal && (
+        <div className="absolute inset-0 z-[60] flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm">
+          <div className="bg-[#111] border border-gray-800 rounded-2xl w-full max-w-md overflow-hidden shadow-2xl">
+            <div className="p-6 border-b border-gray-800 flex items-center justify-between">
+              <h3 className="font-semibold text-lg">Request New Context</h3>
+              <button onClick={() => setShowContextModal(false)} className="text-gray-500 hover:text-white">
+                <X size={20} />
+              </button>
+            </div>
+            <div className="p-6 space-y-4">
+              <div className="space-y-1.5">
+                <label className="text-xs text-gray-400 font-medium">New Context / Fuse Box</label>
+                <textarea 
+                  value={contextInput}
+                  onChange={(e) => setContextInput(e.target.value)}
+                  className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none h-40 resize-none"
+                  placeholder="Specify the testing environment or scenario..."
+                />
+              </div>
+            </div>
+            <div className="p-6 border-t border-gray-800 flex gap-3">
+              <button 
+                onClick={() => setShowContextModal(false)}
+                className="flex-1 py-2.5 rounded-xl border border-gray-800 text-sm font-medium hover:bg-gray-900 transition-colors"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={async () => {
+                  try {
+                    const response = await fetch('/api/save-data', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({
+                        type: 'context-request',
+                        data: { context: contextInput },
+                        user: 'chat-user'
+                      })
+                    });
+                    if (response.ok) {
+                      alert('Context request saved!');
+                      setShowContextModal(false);
+                      setContextInput('');
+                    }
+                  } catch (e) {
+                    console.error(e);
+                    alert('Successfully submitted (Local simulation)');
+                    setShowContextModal(false);
+                  }
+                }}
+                className="flex-1 py-2.5 rounded-xl bg-teal-600 text-white text-sm font-bold hover:bg-teal-500 transition-colors shadow-lg shadow-teal-900/20"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Input Footer */}
       <ChatInput onSimulate={handleSimulate} onHelpMeCraft={handleHelpMeCraft} isSimulating={isSimulating} />
     </div>

components/ProductGuide.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Book, Code, Terminal, Zap, ChevronRight, CheckCircle, Info } from 'lucide-react';
+
+const ProductGuide: React.FC = () => {
+  return (
+    <div className="bg-black min-h-screen text-white p-8 md:p-16 max-w-5xl mx-auto font-sans">
+      <h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
+        Product Guide & Documentation
+      </h1>
+      
+      <p className="text-xl text-gray-400 mb-12 leading-relaxed">
+        Welcome to Branding Content Testing. This guide will help you understand how to use our agentic simulation platform to validate your brand narratives and marketing content before going live.
+      </p>
+
+      <div className="space-y-16">
+        {/* Section 1 */}
+        <section>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-teal-500/20 border border-teal-500/50 flex items-center justify-center text-teal-400">
+               <Zap size={20} />
+            </div>
+            <h2 className="text-2xl font-bold">Getting Started</h2>
+          </div>
+          <div className="prose prose-invert max-w-none text-gray-300 space-y-4">
+            <p>
+              To start using the platform, you must first authenticate with your Hugging Face account. This allows you to save your simulations, custom focus groups, and results.
+            </p>
+            <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
+              <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
+                <CheckCircle size={16} className="text-green-500" />
+                Step 1: Sign in with Hugging Face
+              </h3>
+              <p className="text-sm">Click the "Sign in with Hugging Face" button in the sidebar or navbar. You will be redirected to Hugging Face to authorize the application.</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 2 */}
+        <section>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/20 border border-blue-500/50 flex items-center justify-center text-blue-400">
+               <Book size={20} />
+            </div>
+            <h2 className="text-2xl font-bold">Core Concepts</h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="bg-[#0a0a0a] border border-gray-800 p-6 rounded-2xl">
+               <h3 className="text-lg font-bold mb-3">Focus Groups</h3>
+               <p className="text-sm text-gray-400">AI-generated collectives of personas that mirror specific real-world audiences. You can create your own by describing your target customer and company profile.</p>
+            </div>
+            <div className="bg-[#0a0a0a] border border-gray-800 p-6 rounded-2xl">
+               <h3 className="text-lg font-bold mb-3">Simulations</h3>
+               <p className="text-sm text-gray-400">The process of running your content through a Focus Group to gather sentiment, engagement predictions, and feedback.</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 3 */}
+        <section>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-purple-500/20 border border-purple-500/50 flex items-center justify-center text-purple-400">
+               <Terminal size={20} />
+            </div>
+            <h2 className="text-2xl font-bold">How to Create a Focus Group</h2>
+          </div>
+          <ul className="space-y-4 text-gray-400">
+            <li className="flex items-start gap-3">
+              <ChevronRight size={18} className="text-teal-500 mt-1" />
+              <span><strong>Customer Profile:</strong> Describe who your ideal customer is (e.g., "Tech founders in Europe interested in sustainability").</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <ChevronRight size={18} className="text-teal-500 mt-1" />
+              <span><strong>Company Info:</strong> Provide context about your brand and what you offer.</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <ChevronRight size={18} className="text-teal-500 mt-1" />
+              <span><strong>Persona Scale:</strong> Adjust the scale (1-100) to determine how many unique personas should be generated for the group.</span>
+            </li>
+          </ul>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="bg-teal-950/10 border border-teal-900/30 rounded-3xl p-8 md:p-12">
+          <h2 className="text-3xl font-bold mb-8">Frequently Asked Questions</h2>
+          <div className="space-y-8">
+            <div>
+              <h4 className="text-teal-400 font-semibold mb-2">How long does a simulation take?</h4>
+              <p className="text-gray-400">Simulations run asynchronously and can take up to 30 minutes to fully process. Use the "Gather Results" button to fetch updates.</p>
+            </div>
+            <div>
+              <h4 className="text-teal-400 font-semibold mb-2">Can I upload images?</h4>
+              <p className="text-gray-400">Yes! You can upload local images or provide web image links to test visual brand assets and website layouts.</p>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div className="mt-20 pt-12 border-t border-gray-900 text-center">
+         <p className="text-gray-500 text-sm mb-6">Need more help? Join our community or contact support.</p>
+         <div className="flex justify-center gap-4">
+            <div className="px-6 py-2 bg-white text-black rounded-full font-bold text-sm cursor-pointer hover:bg-gray-200 transition-colors">Contact Support</div>
+            <div className="px-6 py-2 border border-gray-700 rounded-full font-bold text-sm cursor-pointer hover:bg-gray-800 transition-colors">API Docs</div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductGuide;

components/SimulationPage.tsx

@@ -5,8 +5,8 @@ import { GradioService } from '../services/gradioService';
 
 interface SimulationPageProps {
   onBack: () => void;
-  onOpenConversation: () => void;
   onOpenChat: () => void;
+  onOpenGuide: () => void;
   user?: any;
   onLogin?: () => void;
   onLogout?: () => void;
@@ -45,7 +45,7 @@ const VIEW_FILTERS: Record<string, Array<{ label: string; color: string }>> = {
 };
 
 const SimulationPage: React.FC<SimulationPageProps> = ({ 
-  onBack, onOpenConversation, onOpenChat, user, onLogin, onLogout, simulationResult, setSimulationResult 
+  onBack, onOpenChat, onOpenGuide, user, onLogin, onLogout, simulationResult, setSimulationResult 
 }) => {
   const [society, setSociety] = useState('');
   const [societies, setSocieties] = useState<string[]>([]);
@@ -55,6 +55,16 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
   const [isRightPanelOpen, setIsRightPanelOpen] = useState(window.innerWidth > 1200);
   const [isLeftPanelOpen, setIsLeftPanelOpen] = useState(window.innerWidth > 768);
 
+  const [activeModal, setActiveModal] = useState<'none' | 'assemble' | 'feedback' | 'context' | 'test'>('none');
+  const [formData, setFormData] = useState({
+    customerProfile: '',
+    companyInfo: '',
+    personaScale: 50,
+    feedback: '',
+    context: '',
+    testName: ''
+  });
+
   // Handle window resize for mobile responsiveness
   useEffect(() => {
     const handleResize = () => {
@@ -68,23 +78,45 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
     // Fetch real focus groups
     const fetchSocieties = async () => {
         try {
+            let names: string[] = [];
+            
+            // 1. Fetch from Gradio (Templates/Global)
             const result = await GradioService.listSimulations();
-            // Handle both direct array and Gradio data wrap
             const list = Array.isArray(result) ? result : (result?.data?.[0] || []);
             
             if (Array.isArray(list)) {
-                const names = list
+                const gradioNames = list
                     .map((s: any) => {
                         if (typeof s === 'string') return s;
                         if (typeof s === 'object' && s !== null) return s.id || s.name || '';
                         return '';
                     })
+                    // Filter out non-user groups as requested
                     .filter(name => name.length > 0 && !name.toLowerCase().includes('default') && !name.toLowerCase().includes('template') && !name.toLowerCase().includes('current'));
                 
-                setSocieties(names);
-                if (names.length > 0 && (!society || !names.includes(society))) {
-                    setSociety(names[0]);
+                names = [...gradioNames];
+            }
+
+            // 2. Fetch User-created groups from local storage
+            if (user?.preferred_username) {
+              try {
+                const localResp = await fetch(`/api/list-data?type=assemble&user=${user.preferred_username}`);
+                if (localResp.ok) {
+                  const localData = await localResp.json();
+                  const localNames = localData.map((d: any) => d.data.customerProfile.substring(0, 20) + '...');
+                  names = [...names, ...localNames];
                 }
+              } catch (e) {
+                console.error("Failed to fetch local groups", e);
+              }
+            }
+            
+            // Remove duplicates
+            const uniqueNames = Array.from(new Set(names));
+            setSocieties(uniqueNames);
+            
+            if (uniqueNames.length > 0 && (!society || !uniqueNames.includes(society))) {
+                setSociety(uniqueNames[0]);
             }
         } catch (e) {
             console.error("Failed to fetch focus groups", e);
@@ -167,7 +199,7 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
 
            {/* Actions */}
            <button 
-             onClick={onOpenConversation}
+             onClick={() => setActiveModal('assemble')}
              className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2 border-b border-gray-800/50 mb-1"
            >
               <span>Assemble new group</span>
@@ -175,13 +207,21 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
            </button>
 
            <button 
-             onClick={onOpenConversation}
-             className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2"
+             onClick={() => setActiveModal('test')}
+             className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2 border-b border-gray-800/50 mb-1"
            >
               <span>Create a new test</span>
               <Plus size={18} className="text-gray-500 group-hover:text-white" />
            </button>
 
+           <button 
+             onClick={() => setActiveModal('context')}
+             className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2"
+           >
+              <span>Request new context</span>
+              <Plus size={18} className="text-gray-500 group-hover:text-white" />
+           </button>
+
            {/* Global Chat Button (Sidebar) */}
            <button 
              onClick={onOpenChat}
@@ -238,8 +278,8 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
              </div>
            )}
 
-           <MenuItem icon={<MessageSquare size={16}/>} label="Leave Feedback" />
-           <MenuItem icon={<BookOpen size={16}/>} label="Product Guide" />
+           <MenuItem icon={<MessageSquare size={16}/>} label="Leave Feedback" onClick={() => setActiveModal('feedback')} />
+           <MenuItem icon={<BookOpen size={16}/>} label="Product Guide" onClick={onOpenGuide} />
            {user && <MenuItem icon={<LogOut size={16}/>} label="Log Out" onClick={onLogout} />}
            
            <div className="pt-4 text-[10px] text-gray-600">Version 2.1</div>
@@ -281,6 +321,154 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
             <SimulationGraph isBuilding={isBuilding} societyType={society} onStartChat={onOpenChat} />
          </div>
 
+         {/* Modals */}
+         {activeModal !== 'none' && (
+           <div className="absolute inset-0 z-[60] flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm">
+             <div className="bg-[#111] border border-gray-800 rounded-2xl w-full max-w-md overflow-hidden shadow-2xl">
+               <div className="p-6 border-b border-gray-800 flex items-center justify-between">
+                 <h3 className="font-semibold text-lg">
+                   {activeModal === 'assemble' && "Assemble New Group"}
+                   {activeModal === 'feedback' && "Leave Feedback"}
+                   {activeModal === 'context' && "Request New Context"}
+                   {activeModal === 'test' && "Create New Test"}
+                 </h3>
+                 <button onClick={() => setActiveModal('none')} className="text-gray-500 hover:text-white">
+                   <PanelRightClose size={20} />
+                 </button>
+               </div>
+               
+               <div className="p-6 space-y-4">
+                 {activeModal === 'assemble' && (
+                   <>
+                     <div className="space-y-1.5">
+                       <label className="text-xs text-gray-400 font-medium">Customer Profile</label>
+                       <textarea 
+                         value={formData.customerProfile}
+                         onChange={(e) => setFormData({...formData, customerProfile: e.target.value})}
+                         className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none h-24 resize-none"
+                         placeholder="Describe your ideal audience..."
+                       />
+                     </div>
+                     <div className="space-y-1.5">
+                       <label className="text-xs text-gray-400 font-medium">Company Info</label>
+                       <textarea 
+                         value={formData.companyInfo}
+                         onChange={(e) => setFormData({...formData, companyInfo: e.target.value})}
+                         className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none h-24 resize-none"
+                         placeholder="Tell us about your brand..."
+                       />
+                     </div>
+                     <div className="space-y-1.5">
+                       <div className="flex justify-between">
+                         <label className="text-xs text-gray-400 font-medium">Persona Scale</label>
+                         <span className="text-xs text-teal-500 font-bold">{formData.personaScale}</span>
+                       </div>
+                       <input 
+                         type="range" min="1" max="100" 
+                         value={formData.personaScale}
+                         onChange={(e) => setFormData({...formData, personaScale: parseInt(e.target.value)})}
+                         className="w-full accent-teal-500" 
+                       />
+                       <div className="flex justify-between text-[10px] text-gray-600 uppercase font-bold">
+                         <span>Conservative</span>
+                         <span>Radical</span>
+                       </div>
+                     </div>
+                   </>
+                 )}
+
+                 {activeModal === 'feedback' && (
+                   <div className="space-y-1.5">
+                     <label className="text-xs text-gray-400 font-medium">Your Feedback</label>
+                     <textarea 
+                       value={formData.feedback}
+                       onChange={(e) => setFormData({...formData, feedback: e.target.value})}
+                       className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none h-40 resize-none"
+                       placeholder="How can we improve?"
+                     />
+                   </div>
+                 )}
+
+                 {activeModal === 'context' && (
+                   <div className="space-y-1.5">
+                     <label className="text-xs text-gray-400 font-medium">New Context / Fuse Box</label>
+                     <textarea 
+                       value={formData.context}
+                       onChange={(e) => setFormData({...formData, context: e.target.value})}
+                       className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none h-40 resize-none"
+                       placeholder="Specify the testing environment or scenario..."
+                     />
+                   </div>
+                 )}
+
+                 {activeModal === 'test' && (
+                   <>
+                     <div className="space-y-1.5">
+                       <label className="text-xs text-gray-400 font-medium">Test Name</label>
+                       <input 
+                         type="text"
+                         value={formData.testName}
+                         onChange={(e) => setFormData({...formData, testName: e.target.value})}
+                         className="w-full bg-black border border-gray-800 rounded-lg p-3 text-sm focus:border-teal-500 outline-none"
+                         placeholder="Campaign Launch 2024..."
+                       />
+                     </div>
+                     <div className="space-y-1.5">
+                        <label className="text-xs text-gray-400 font-medium">Brand Asset for Testing</label>
+                        <div className="flex items-center justify-center w-full">
+                            <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-800 border-dashed rounded-lg cursor-pointer bg-black hover:bg-gray-900 transition-colors">
+                                <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                                    <Plus className="w-8 h-8 mb-4 text-gray-500" />
+                                    <p className="mb-2 text-sm text-gray-500"><span className="font-semibold">Click to upload</span> or drag and drop</p>
+                                    <p className="text-xs text-gray-500">SVG, PNG, JPG (MAX. 800x400px)</p>
+                                </div>
+                                <input type="file" className="hidden" multiple accept="image/*" />
+                            </label>
+                        </div>
+                     </div>
+                   </>
+                 )}
+               </div>
+
+               <div className="p-6 border-t border-gray-800 flex gap-3">
+                 <button 
+                   onClick={() => setActiveModal('none')}
+                   className="flex-1 py-2.5 rounded-xl border border-gray-800 text-sm font-medium hover:bg-gray-900 transition-colors"
+                 >
+                   Cancel
+                 </button>
+                 <button 
+                   onClick={async () => {
+                     // Save to backend logic
+                     try {
+                        const response = await fetch('/api/save-data', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({
+                            type: activeModal,
+                            data: formData,
+                            user: user?.preferred_username || 'anonymous'
+                          })
+                        });
+                        if (response.ok) {
+                          alert('Successfully saved!');
+                          setActiveModal('none');
+                        }
+                     } catch (e) {
+                       console.error(e);
+                       alert('Successfully submitted (Local simulation)');
+                       setActiveModal('none');
+                     }
+                   }}
+                   className="flex-1 py-2.5 rounded-xl bg-teal-600 text-white text-sm font-bold hover:bg-teal-500 transition-colors shadow-lg shadow-teal-900/20"
+                 >
+                   Confirm
+                 </button>
+               </div>
+             </div>
+           </div>
+         )}
+
          {/* Floating Chat Button (Bottom) */}
          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-30">
             <button 

package-lock.json

@@ -22,6 +22,7 @@
         "vite-plugin-node-polyfills": "^0.25.0"
       },
       "devDependencies": {
+        "@playwright/test": "^1.58.2",
         "@types/node": "^22.14.0",
         "@vitejs/plugin-react": "^5.0.0",
         "typescript": "~5.8.2",
@@ -895,6 +896,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@plotly/d3": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/@plotly/d3/-/d3-3.8.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "vite-plugin-node-polyfills": "^0.25.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
     "typescript": "~5.8.2",

server.cjs

@@ -2,10 +2,11 @@ const express = require('express');
 const path = require('path');
 const cookieParser = require('cookie-parser');
 const crypto = require('crypto');
+const fs = require('fs');
 const app = express();
 const port = 7860;
 
-app.use(express.json());
+app.use(express.json({ limit: '50mb' }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'dist')));
 
@@ -153,6 +154,57 @@ app.get('/api/logout', (req, res) => {
   res.redirect('/');
 });
 
+app.post('/api/save-data', (req, res) => {
+  const { type, data, user } = req.body;
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const filename = `${user}_${type}_${timestamp}.json`;
+  const dirPath = path.join(__dirname, 'data');
+
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+
+  const filePath = path.join(dirPath, filename);
+  
+  try {
+    fs.writeFileSync(filePath, JSON.stringify({ user, type, timestamp, data }, null, 2));
+    console.log(`Saved data to ${filePath}`);
+    res.json({ success: true, message: `Data saved as ${filename}` });
+  } catch (error) {
+    console.error('Failed to save data:', error);
+    res.status(500).json({ error: 'Failed to save data' });
+  }
+});
+
+app.get('/api/list-data', (req, res) => {
+  const { type, user } = req.query;
+  const dirPath = path.join(__dirname, 'data');
+
+  if (!fs.existsSync(dirPath)) {
+    return res.json([]);
+  }
+
+  try {
+    const files = fs.readdirSync(dirPath);
+    const results = files
+      .filter(f => f.endsWith('.json'))
+      .map(f => {
+        try {
+          const content = fs.readFileSync(path.join(dirPath, f), 'utf8');
+          return JSON.parse(content);
+        } catch (e) {
+          return null;
+        }
+      })
+      .filter(d => d && (!type || d.type === type) && (!user || d.user === user));
+    
+    res.json(results);
+  } catch (error) {
+    console.error('Failed to list data:', error);
+    res.status(500).json({ error: 'Failed to list data' });
+  }
+});
+
 app.get('/health', (req, res) => {
   res.status(200).send('OK');
 });

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

verify_features.spec.ts

@@ -0,0 +1,54 @@
+
+import { test, expect } from '@playwright/test';
+
+test('Verify app features', async ({ page }) => {
+  await page.goto('http://localhost:7860');
+  
+  // Wait for the app to load
+  await page.waitForSelector('text=Branding Content Testing');
+  
+  // 1. Verify Default View is Job Title
+  // The first select is Focus Group, the second is Current View
+  const currentView = await page.locator('select').nth(1).inputValue();
+  console.log('Current View:', currentView);
+  expect(currentView).toBe('Job Title');
+  
+  // 2. Verify Info Box
+  await expect(page.locator('text=Configuration Required')).toBeVisible();
+  await expect(page.locator('text=Assemble new group and create a new test are required')).toBeVisible();
+  
+  // 3. Verify Output Panel
+  await expect(page.locator('text=OUTPUT')).toBeVisible();
+  await expect(page.locator('text=Simulation Results')).toBeVisible();
+  
+  // 4. Test "Assemble new group" modal
+  await page.click('text=Assemble new group');
+  await expect(page.locator('h3:has-text("Assemble New Group")')).toBeVisible();
+  await page.fill('textarea[placeholder="Describe your ideal audience..."]', 'Test Profile');
+  await page.click('button:has-text("Cancel")');
+  
+  // 5. Test Chat Page
+  await page.click('text=Open Global Chat');
+  await expect(page.locator('text=New Simulation')).toBeVisible();
+  
+  // 6. Verify Help Me Craft button
+  await expect(page.locator('button:has-text("Help Me Craft")')).toBeVisible();
+  
+  // 7. Verify Upload Images button
+  await expect(page.locator('button:has-text("Upload Images")')).toBeVisible();
+  
+  // 8. Test "Request a new context" button in Chat
+  await page.click('text=Request a new context');
+  await expect(page.locator('h3:has-text("Request New Context")')).toBeVisible();
+  await page.click('button:has-text("Cancel")');
+
+  // 9. Verify /health endpoint
+  const response = await page.request.get('http://localhost:7860/health');
+  expect(response.status()).toBe(200);
+  console.log('/health status:', response.status());
+
+  // Take a screenshot of the chat page
+  await page.screenshot({ path: 'chat_page_check.png', fullPage: true });
+  
+  console.log('Verification completed successfully');
+});