From 3b5c48ef9d7bf38931a3a5d4b651edce06f253a3 Mon Sep 17 00:00:00 2001 From: kartik Date: Wed, 18 Mar 2026 10:35:02 +0530 Subject: [PATCH 01/10] landing page --- frontend/app/page.tsx | 54 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index ede5909..e90e6c1 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -18,31 +18,31 @@ export default function LandingPage() {
{/* Header with Navigation */}
-
+
-
+
VCell Logo - + AI Explorer
-
- -
@@ -53,42 +53,42 @@ export default function LandingPage() {
{/* Hero Section */} -
-
+
+
VCell Logo -

+

VCell Models
AI Explorer

-

+

Discover, analyze, and explore biomodels with the power of AI. Comprehensive platform for scientific model research.

-
- +
+ - + @@ -97,7 +97,7 @@ export default function LandingPage() {
{/* Features Section */} -
+
{/* AI Chatbot Feature */} From bb6eb82da42b1a5f09a2b4c49d3320db5420562a Mon Sep 17 00:00:00 2001 From: kartik Date: Wed, 18 Mar 2026 11:08:15 +0530 Subject: [PATCH 02/10] "/chat" page --- frontend/app/chat/page.tsx | 43 ++++++++++++++++++++---- frontend/components/onboarding-modal.tsx | 2 +- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx index de589c7..e476638 100644 --- a/frontend/app/chat/page.tsx +++ b/frontend/app/chat/page.tsx @@ -11,14 +11,18 @@ import { BarChart3Icon as Diagram3, HelpCircle, FlaskConical, + Menu, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { OnboardingModal } from "@/components/onboarding-modal"; import { ChatBox } from "@/components/ChatBox"; +import { useSidebar } from "@/components/ui/sidebar"; +import Image from "next/image"; export default function ChatPage() { const [showOnboarding, setShowOnboarding] = useState(false); + const { toggleSidebar, isMobile } = useSidebar(); useEffect(() => { // Check if user has seen onboarding before @@ -92,14 +96,40 @@ export default function ChatPage() { return (
-
+ {/* Mobile Header */} + {isMobile && ( +
+ +
+ VCell Logo + + VCell AI Chat + +
+
+ )} + +
{/* Header */}
-
+
{/* Warning Alert - takes most of the space */} - + ⚠️ Important: Responses are AI generated and may contain errors, or hallucinations. @@ -108,10 +138,11 @@ export default function ChatPage() { variant="outline" size="sm" onClick={() => setShowOnboarding(true)} - className="flex items-center gap-2 flex-shrink-0" + className="flex items-center gap-1 sm:gap-2 flex-shrink-0 px-2 sm:px-3" > - - How to Use + + How to Use + Help
diff --git a/frontend/components/onboarding-modal.tsx b/frontend/components/onboarding-modal.tsx index a9e6a16..08adff8 100644 --- a/frontend/components/onboarding-modal.tsx +++ b/frontend/components/onboarding-modal.tsx @@ -309,7 +309,7 @@ export function OnboardingModal({ isOpen, onClose }: OnboardingModalProps) { return ( - +
From 5c95cef3f3c3bab27f85b37c1c3afe6487ae5bba Mon Sep 17 00:00:00 2001 From: kartik Date: Wed, 18 Mar 2026 11:17:07 +0530 Subject: [PATCH 03/10] /search/[bmid] page --- frontend/app/search/[bmid]/page.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/frontend/app/search/[bmid]/page.tsx b/frontend/app/search/[bmid]/page.tsx index fc7c478..7bd8feb 100644 --- a/frontend/app/search/[bmid]/page.tsx +++ b/frontend/app/search/[bmid]/page.tsx @@ -190,24 +190,25 @@ export default function BiomodelDetailPage() { return (
-
+
- -
-
- - - {data.name} + +
+
+ + + {data.name} -
+
{/*
{biomodelData && ( -
+
{" "} {biomodelData.bmKey} @@ -303,33 +303,35 @@ export default function AnalysisResultsPage({ )}
- + {/* Biomodel Diagram block */} -
-
- - +
+
+ + Biomodel Diagram
- Biomodel Diagram setError("Failed to load diagram image.")} - onLoad={() => setError("")} - /> +
+ Biomodel Diagram setError("Failed to load diagram image.")} + onLoad={() => setError("")} + /> +
{/* Chat Box */} -
-
- - +
+
+ + AI Analysis Assistant
-
+
Date: Wed, 18 Mar 2026 11:36:57 +0530 Subject: [PATCH 05/10] /admin/settings page --- frontend/app/admin/settings/page.tsx | 137 ++++++++++++++------------- 1 file changed, 70 insertions(+), 67 deletions(-) diff --git a/frontend/app/admin/settings/page.tsx b/frontend/app/admin/settings/page.tsx index 28fa6c7..4b74500 100644 --- a/frontend/app/admin/settings/page.tsx +++ b/frontend/app/admin/settings/page.tsx @@ -118,28 +118,25 @@ export default function AdminSettingsPage() { return (
-
+
{/* Header */} -
-
-
-

- - Admin Settings -

-

- Configure LLM settings and preferences -

-
-
- -
+
+
+

+ + Admin Settings +

+
+

+ Configure LLM settings and preferences +

{/* Success/Error Messages */} @@ -158,14 +155,16 @@ export default function AdminSettingsPage() { {/* Tabs */} - - - - Hosted Settings + + + + Hosted Settings + Hosted - - - Local Settings + + + Local Settings + Local @@ -256,54 +255,55 @@ export default function AdminSettingsPage() { {/* Local Settings Tab */} -
+
{/* Setup Guide */} - - - - Local Setup Guide + + + + Local Setup Guide - +
-
+

This is a guide to setup this platform locally on your machine and use your own LLM for unlimited usage. -
Follow the steps below to get started with your local deployment. + Follow the steps below to get started with your local deployment.

- For more details, check https://github.com/KacemMathlouthi/VCell-GSoC + For more details, check https://github.com/KacemMathlouthi/VCell-GSoC

-
-

Step 1: Clone the Repository

-
- +
+

Step 1: Clone the Repository

+
+ git clone https://github.com/KacemMathlouthi/VCell-GSoC.git
-
-

Step 2: Configure Environment Variables

-

Configure the .env files following the .env.example in both frontend and backend folders

-
- 
+                  

+                    
Step 2: Configure Environment Variables

+                    
Configure the .env files following the .env.example in both frontend and backend folders

+                    

+                      
 {`# Frontend .env
 cp frontend/.env.example frontend/.env
 # Backend .env  
@@ -313,41 +313,44 @@ cp backend/.env.example backend/.env`}
                         onClick={() => copyToClipboard("cp frontend/.env.example frontend/.env && cp backend/.env.example backend/.env")}
                         size="sm"
                         variant="outline"
+                        className="flex-shrink-0 px-3 py-2"
                       >
-                        
+                        
                       
                     

                   

 
-                  

-                    
Step 3: Start the Application

-                    

-                      
+                  

+                    
Step 3: Start the Application

+                    

+                      
                         docker compose up --build -d
                       
                       
                     

                   

 
-                  

-                    
Step 4: Access the Application

-                    
Once running, access this page at:

-                    

-                      
+                  

+                    
Step 4: Access the Application

+                    
Once running, access this page at:

+                    

+                      
                         http://localhost:3000/admin/settings
                       
                       
                     

                   

@@ -356,13 +359,13 @@ cp backend/.env.example backend/.env`}
 
               {/* Local Settings Form */}
               
-                
-                  
-                    
-                    Local LLM Configuration
+                
+                  
+                    
+                    Local LLM Configuration
                   
                 
-                
+                
                   

                     

 
-                  

+                  

                     
                   

                 

From 87fd7040a4b2e91b44c3371518bcc7614d0e157f Mon Sep 17 00:00:00 2001
From: kartik 
Date: Wed, 18 Mar 2026 11:42:02 +0530
Subject: [PATCH 06/10] /admin page

---
 frontend/app/admin/page.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index 1f84add..2165b11 100644
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -272,31 +272,31 @@ export default function AdminDashboard() {
 
   return (
     

-      

+      

         {/* Header */}
-        

-          

-            

-              

-                
-                Admin Dashboard
+        

+          

+            

+              

+                
+                Admin Dashboard
               

-              

+              

                 Manage users, conversations, and system resources
               

             

-            

+            

               
               
             

           


From 32d8276904c01fa99ebcf32172358b2e86931f63 Mon Sep 17 00:00:00 2001
From: kartik 
Date: Wed, 18 Mar 2026 11:46:58 +0530
Subject: [PATCH 07/10] admin/knowledge-base

---
 frontend/app/admin/knowledge-base/page.tsx | 42 +++++++++++-----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/app/admin/knowledge-base/page.tsx b/frontend/app/admin/knowledge-base/page.tsx
index 10e2f72..160e3d1 100644
--- a/frontend/app/admin/knowledge-base/page.tsx
+++ b/frontend/app/admin/knowledge-base/page.tsx
@@ -190,39 +190,39 @@ export default function KnowledgeBasePage() {
 
   return (
     

-      

+      

         {/* Header */}
-        

-          

-            

-              

-                
-                Knowledge Base Management
+        

+          

+            

+              

+                
+                Knowledge Base Management
               

-              

+              

                 Upload, manage, and organize knowledge base files
               

             

-            

+            

               
               
             

           

         

 
         {/* Search and Filters */}
-        
-          
+        
+          
             

               

                 
@@ -239,11 +239,13 @@ export default function KnowledgeBasePage() {
 
         {/* Files Table */}
         
-          
-            
-              
-              Knowledge Base Files
-              
+          
+            
+              

+                
+                Knowledge Base Files
+              

+              
                 {files.length} files
               
             

From 7dc0d05e33ba24243e3b4eeb6db36a1890994848 Mon Sep 17 00:00:00 2001
From: kartik 
Date: Wed, 18 Mar 2026 11:55:12 +0530
Subject: [PATCH 08/10] added mobile sidebar toggle to all pages for better
 navigation

---
 frontend/app/admin/knowledge-base/page.tsx | 30 ++++++++++++++++++++
 frontend/app/admin/page.tsx                | 30 ++++++++++++++++++++
 frontend/app/admin/settings/page.tsx       | 30 ++++++++++++++++++++
 frontend/app/analyze/page.tsx              | 32 ++++++++++++++++++++-
 frontend/app/search/page.tsx               | 33 ++++++++++++++++++++--
 5 files changed, 152 insertions(+), 3 deletions(-)

diff --git a/frontend/app/admin/knowledge-base/page.tsx b/frontend/app/admin/knowledge-base/page.tsx
index 160e3d1..0149411 100644
--- a/frontend/app/admin/knowledge-base/page.tsx
+++ b/frontend/app/admin/knowledge-base/page.tsx
@@ -15,7 +15,10 @@ import {
   FolderOpen,
   File,
   Plus,
+  Menu,
 } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface KnowledgeFile {
   name: string;
@@ -29,6 +32,7 @@ interface FileContent {
 }
 
 export default function KnowledgeBasePage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const [files, setFiles] = useState([]);
   const [filteredFiles, setFilteredFiles] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -190,6 +194,32 @@ export default function KnowledgeBasePage() {
 
   return (
     

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Knowledge Base
+            
+          

+        

+      )}
+      
       

         {/* Header */}
         

diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index 2165b11..a5a07ec 100644
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -14,7 +14,10 @@ import {
   Trash2,
   Save,
   X,
+  Menu,
 } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface User {
   id: string;
@@ -40,6 +43,7 @@ interface DashboardStats {
 }
 
 export default function AdminDashboard() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const [stats, setStats] = useState({
     totalUsers: 0,
     totalConversations: 0,
@@ -272,6 +276,32 @@ export default function AdminDashboard() {
 
   return (
     

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Admin Dashboard
+            
+          

+        

+      )}
+      
       

         {/* Header */}
         

diff --git a/frontend/app/admin/settings/page.tsx b/frontend/app/admin/settings/page.tsx
index 4b74500..1f58d59 100644
--- a/frontend/app/admin/settings/page.tsx
+++ b/frontend/app/admin/settings/page.tsx
@@ -16,7 +16,10 @@ import {
   Monitor,
   Copy,
   ExternalLink,
+  Menu,
 } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface SystemSettings {
   modelProvider: string;
@@ -33,6 +36,7 @@ interface LocalSettings {
 }
 
 export default function AdminSettingsPage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const [activeTab, setActiveTab] = useState("hosted");
   const [settings, setSettings] = useState({
     modelProvider: "Azure OpenAI",
@@ -118,6 +122,32 @@ export default function AdminSettingsPage() {
 
   return (
     

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Admin Settings
+            
+          

+        

+      )}
+      
       

         {/* Header */}
         

diff --git a/frontend/app/analyze/page.tsx b/frontend/app/analyze/page.tsx
index 023657a..1e6936f 100644
--- a/frontend/app/analyze/page.tsx
+++ b/frontend/app/analyze/page.tsx
@@ -13,11 +13,14 @@ import {
   Briefcase,
   Cog,
   Sparkles,
+  Menu,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface PromptTemplate {
   title: string;
@@ -27,6 +30,7 @@ interface PromptTemplate {
 }
 
 export default function AnalyzePage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const router = useRouter();
   const [biomodelId, setBiomodelId] = useState("");
   const [prompt, setPrompt] = useState("");
@@ -81,7 +85,33 @@ export default function AnalyzePage() {
 
   return (
     

-      

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              AI Analysis
+            
+          

+        

+      )}
+      
+      

         {/* Header */}
         

           

diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
index c602b96..7797f5b 100644
--- a/frontend/app/search/page.tsx
+++ b/frontend/app/search/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Search, Filter, ChevronsUpDown } from "lucide-react";
+import { Search, Filter, ChevronsUpDown, Menu } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -20,6 +20,8 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 import Link from "next/link";
 
 interface SearchFilters {
@@ -49,6 +51,7 @@ interface BiomodelResult {
 }
 
 export default function BiomodelSearchPage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const [filters, setFilters] = useState({
     bmId: "",
     bmName: "",
@@ -121,7 +124,33 @@ export default function BiomodelSearchPage() {
 
   return (
     

-      

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Biomodel Search
+            
+          

+        

+      )}
+      
+      

         {/* Header */}
         

           


From 97cf431a509da9b8e9e28342e8e78f583dfbf926 Mon Sep 17 00:00:00 2001
From: kartik 
Date: Wed, 18 Mar 2026 12:25:54 +0530
Subject: [PATCH 09/10] touchups

---
 frontend/app/analyze/[id]/page.tsx  | 30 +++++++++++++++++++++++++++++
 frontend/app/search/[bmid]/page.tsx | 30 +++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/frontend/app/analyze/[id]/page.tsx b/frontend/app/analyze/[id]/page.tsx
index 834d8b7..79867ce 100644
--- a/frontend/app/analyze/[id]/page.tsx
+++ b/frontend/app/analyze/[id]/page.tsx
@@ -18,10 +18,13 @@ import {
   Calendar,
   Hash,
   Users,
+  Menu,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ChatBox } from "@/components/ChatBox";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface AnalysisResults {
   title: string;
@@ -47,6 +50,7 @@ export default function AnalysisResultsPage({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const { toggleSidebar, isMobile } = useSidebar();
   const router = useRouter();
   const searchParams = useSearchParams();
   const prompt = searchParams.get("prompt") || "";
@@ -242,6 +246,32 @@ export default function AnalysisResultsPage({
 
   return (
     

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Analysis Results
+            
+          

+        

+      )}
+      
       

         
           
diff --git a/frontend/app/search/[bmid]/page.tsx b/frontend/app/search/[bmid]/page.tsx
index 7bd8feb..351bef5 100644
--- a/frontend/app/search/[bmid]/page.tsx
+++ b/frontend/app/search/[bmid]/page.tsx
@@ -27,7 +27,10 @@ import {
   Atom,
   Briefcase,
   Cog,
+  Menu,
 } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface Simulation {
   key: string;
@@ -79,6 +82,7 @@ interface BiomodelDetail {
 }
 
 export default function BiomodelDetailPage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const params = useParams<{ bmid: string }>();
   const bmid = params?.bmid;
   const [data, setData] = useState(null);
@@ -190,6 +194,32 @@ export default function BiomodelDetailPage() {
 
   return (
     

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Biomodel Details
+            
+          

+        

+      )}
+      
       

         
           

From 140a94fe1c2d9b693acb5b3d46fe6870aaaa29cc Mon Sep 17 00:00:00 2001
From: kartik 
Date: Wed, 18 Mar 2026 13:15:49 +0530
Subject: [PATCH 10/10] added button import

---
 frontend/app/search/[bmid]/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/app/search/[bmid]/page.tsx b/frontend/app/search/[bmid]/page.tsx
index 351bef5..42af136 100644
--- a/frontend/app/search/[bmid]/page.tsx
+++ b/frontend/app/search/[bmid]/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,