Make biomodel browsing public, gate LLM features behind login

frontend/app/analyze/[id]/page.tsx

@@ -22,7 +22,8 @@ import {
 import { Button } from "@/components/ui/button";
 import { ChatBox } from "@/components/ChatBox";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getAccessToken } from "@auth0/nextjs-auth0/client";
+import { getAccessToken, useUser } from "@auth0/nextjs-auth0/client";
+import { LoginRequiredDialog } from "@/components/login-required-dialog";
 
 interface AnalysisResults {
   title: string;
@@ -63,6 +64,8 @@ export default function AnalysisResultsPage({
   const [combinedMessages, setCombinedMessages] = useState<string[]>([]);
   const [biomodelData, setBiomodelData] = useState<BiomodelDetail | null>(null);
   const [biomodelLoading, setBiomodelLoading] = useState(true);
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const { user, isLoading: isUserLoading } = useUser();
 
   useEffect(() => {
     const fetchBiomodelData = async () => {
@@ -88,6 +91,13 @@ export default function AnalysisResultsPage({
   }, [id]);
 
   useEffect(() => {
+    if (isUserLoading) return;
+    if (!user) {
+      setShowLoginDialog(true);
+      setIsAnalysisLoading(false);
+      return;
+    }
+
     const fetchDiagramAnalysis = async () => {
       setIsAnalysisLoading(true);
       setAnalysisError("");
@@ -154,7 +164,7 @@ export default function AnalysisResultsPage({
     };
 
     fetchBothAnalyses();
-  }, [id, prompt]);
+  }, [id, prompt, isUserLoading, user]);
 
   // Create combined messages when analyses are ready
   useEffect(() => {
@@ -247,6 +257,7 @@ export default function AnalysisResultsPage({
 
   return (
     <div className="min-h-screen bg-slate-50">
+      <LoginRequiredDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
       <div className="container mx-auto p-8 max-w-6xl">
         <Card className="mb-10 shadow-lg border-slate-200">
           <CardHeader className="bg-gradient-to-r from-blue-100 to-blue-50 border-b border-slate-200 px-6 py-5 flex flex-col md:flex-row md:items-center md:justify-between">

frontend/app/analyze/page.tsx

@@ -18,6 +18,8 @@ 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 { useUser } from "@auth0/nextjs-auth0/client";
+import { LoginRequiredDialog } from "@/components/login-required-dialog";
 
 interface PromptTemplate {
   title: string;
@@ -30,6 +32,8 @@ export default function AnalyzePage() {
   const router = useRouter();
   const [biomodelId, setBiomodelId] = useState("");
   const [prompt, setPrompt] = useState("");
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const { user, isLoading: isUserLoading } = useUser();
 
   const promptTemplates: PromptTemplate[] = [
     {
@@ -76,11 +80,17 @@ export default function AnalyzePage() {
 
   const handleAnalyze = () => {
     if (!biomodelId.trim() || !prompt.trim()) return;
+    if (isUserLoading) return;
+    if (!user) {
+      setShowLoginDialog(true);
+      return;
+    }
     router.push(`/analyze/${biomodelId}?prompt=${encodeURIComponent(prompt)}`);
   };
 
   return (
     <div className="min-h-screen bg-slate-50">
+      <LoginRequiredDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
       <div className="container mx-auto p-6 max-w-7xl">
         {/* Header */}
         <div className="mb-8">

frontend/app/page.tsx

@@ -15,6 +15,7 @@ import Image from "next/image";
 
 const loginHref = "/auth/login?returnTo=/chat";
 const signupHref = "/auth/login?returnTo=/chat&screen_hint=signup";
+const exploreHref = "/search";
 
 export default function LandingPage() {
   return (
@@ -78,7 +79,7 @@ export default function LandingPage() {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-              <Link href={loginHref}>
+              <Link href={exploreHref}>
                 <Button
                   size="lg"
                   className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
@@ -87,7 +88,7 @@ export default function LandingPage() {
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
               </Link>
-              <Link href={signupHref}>
+              <Link href={exploreHref}>
                 <Button
                   variant="outline"
                   size="lg"

frontend/app/search/[bmid]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -28,7 +28,8 @@ import {
   Briefcase,
   Cog,
 } from "lucide-react";
-import { getAccessToken } from "@auth0/nextjs-auth0/client";
+import { getAccessToken, useUser } from "@auth0/nextjs-auth0/client";
+import { LoginRequiredDialog } from "@/components/login-required-dialog";
 
 interface Simulation {
   key: string;
@@ -89,6 +90,9 @@ export default function BiomodelDetailPage() {
   const [diagramAnalysis, setDiagramAnalysis] = useState("");
   const [analysisError, setAnalysisError] = useState("");
   const [combinedMessages, setCombinedMessages] = useState<string[]>([]);
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const { user, isLoading: isUserLoading } = useUser();
+  const diagramFetchTriggeredRef = useRef(false);
 
   const quickActions = [
     {
@@ -150,7 +154,11 @@ export default function BiomodelDetailPage() {
 
   useEffect(() => {
     if (!data?.bmKey) return;
-
+    if (activeTab !== "analysis") return;
+    if (isUserLoading || !user) return;
+    if (diagramFetchTriggeredRef.current) return;
+    diagramFetchTriggeredRef.current = true;
+
     const fetchDiagramAnalysis = async () => {
       try {
         const token = await getAccessToken();
@@ -176,7 +184,7 @@ export default function BiomodelDetailPage() {
     };
 
     fetchDiagramAnalysis();
-  }, [data?.bmKey]);
+  }, [data?.bmKey, activeTab, isUserLoading, user]);
 
   // Create combined messages when diagram analysis is ready
   useEffect(() => {
@@ -191,8 +199,22 @@ export default function BiomodelDetailPage() {
 
   const biomodelDiagramUrl = `https://vcell.cam.uchc.edu/api/v0/biomodel/${data.bmKey}/diagram`;
 
+  const handleTabChange = (value: string) => {
+    if (value !== "analysis") {
+      setActiveTab(value);
+      return;
+    }
+    if (isUserLoading) return;
+    if (!user) {
+      setShowLoginDialog(true);
+      return;
+    }
+    setActiveTab(value);
+  };
+
   return (
     <div className="min-h-screen bg-slate-50">
+      <LoginRequiredDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
       <div className="container mx-auto p-8 max-w-6xl">
         <Card className="mb-8 shadow-lg border-slate-200">
           <CardHeader className="bg-gradient-to-r from-blue-100 to-blue-50 border-b border-slate-200 px-5 py-4 flex flex-col md:flex-row md:items-center md:justify-between">
@@ -261,7 +283,7 @@ export default function BiomodelDetailPage() {
             </div>
           </CardHeader>
           <CardContent className="p-6 bg-white">
-            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
               <TabsList className="grid w-full grid-cols-2 mb-6">
                 <TabsTrigger value="overview" className="flex items-center gap-2 font-bold text-white">
                   <FileText className="h-4 w-4" />

frontend/components/ChatBox.tsx

@@ -12,7 +12,8 @@ import {
 } from "@/components/ui/select";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { MessageSquare, Send, Bot, User, Loader2 } from "lucide-react";
-import { getAccessToken } from "@auth0/nextjs-auth0/client";
+import { getAccessToken, useUser } from "@auth0/nextjs-auth0/client";
+import { LoginRequiredDialog } from "@/components/login-required-dialog";
 
 type ModelId = "openai-model" | "local-model";
 
@@ -89,6 +90,8 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
   const [inputMessage, setInputMessage] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [selectedModel, setSelectedModel] = useState<ModelId>("openai-model");
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const { user, isLoading: isUserLoading } = useUser();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -139,6 +142,11 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
   const handleSendMessage = async (overrideMessage?: string) => {
     const msg = overrideMessage ?? inputMessage;
     if (!msg.trim()) return;
+    if (isUserLoading) return;
+    if (!user) {
+      setShowLoginDialog(true);
+      return;
+    }
     // Build parameter context string
     let parameterContext = "";
     if (parameters) {
@@ -249,6 +257,8 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
   };
 
   return (
+    <>
+    <LoginRequiredDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
     <Card className="h-full flex flex-col shadow-sm border-slate-200">
       <CardHeader className="bg-slate-50 border-b border-slate-200 flex-shrink-0">
         <CardTitle className="flex items-center gap-2 text-slate-900">
@@ -406,5 +416,6 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
         )}
       </div>
     </Card>
+    </>
   );
 };

frontend/components/app-sidebar.tsx

@@ -117,19 +117,30 @@ export function AppSidebar() {
     return null;
   }
 
+  const isLoggedOut = !isUserLoading && !user;
+
   const usagePercent =
     budget?.max_budget && budget.max_budget > 0
       ? Math.min((budget.spend / budget.max_budget) * 100, 100)
       : 0;
-  const remainingText = !budget
-    ? "Loading..."
-    : `${formatBudget(budget.remaining_budget)} remaining`;
-  const budgetSummary = !budget
-    ? "Loading..."
-    : budget.max_budget === null
-      ? `${formatBudget(budget.spend)} spent, unlimited budget`
-      : `${formatBudget(budget.spend)} spent of ${formatBudget(budget.max_budget)} budget`;
-  const budgetCollapsedText = !budget ? "--" : formatBudget(budget.spend);
+  const remainingText = isLoggedOut
+    ? "Log in to see your token usage"
+    : !budget
+      ? "Loading..."
+      : `${formatBudget(budget.remaining_budget)} remaining`;
+  const budgetSummary = isLoggedOut
+    ? "Log in to see your token usage"
+    : !budget
+      ? "Loading..."
+      : budget.max_budget === null
+        ? `${formatBudget(budget.spend)} spent, unlimited budget`
+        : `${formatBudget(budget.spend)} spent of ${formatBudget(budget.max_budget)} budget`;
+  const budgetCollapsedText = isLoggedOut
+    ? "Log in"
+    : !budget
+      ? "--"
+      : formatBudget(budget.spend);
+  const loginReturnHref = `/auth/login?returnTo=${encodeURIComponent(pathname)}`;
 
   return (
     <Sidebar className="border-r border-slate-200" collapsible="icon">
@@ -332,7 +343,13 @@ export function AppSidebar() {
             {!isCollapsed && (
               <div className="flex justify-between items-center text-xs text-slate-600">
                 <span>Budget</span>
-                <span>{remainingText}</span>
+                {isLoggedOut ? (
+                  <Link href={loginReturnHref} className="text-blue-600 hover:underline">
+                    {remainingText}
+                  </Link>
+                ) : (
+                  <span>{remainingText}</span>
+                )}
               </div>
             )}
             <div className="w-full bg-slate-200 rounded-full h-2">
@@ -343,11 +360,23 @@ export function AppSidebar() {
             </div>
             {isCollapsed ? (
               <div className="text-xs text-slate-500 text-center">
-                {budgetCollapsedText}
+                {isLoggedOut ? (
+                  <Link href={loginReturnHref} className="text-blue-600 hover:underline">
+                    {budgetCollapsedText}
+                  </Link>
+                ) : (
+                  budgetCollapsedText
+                )}
               </div>
             ) : (
               <div className="text-xs text-slate-500 text-center">
-                {budgetSummary}
+                {isLoggedOut ? (
+                  <Link href={loginReturnHref} className="text-blue-600 hover:underline">
+                    {budgetSummary}
+                  </Link>
+                ) : (
+                  budgetSummary
+                )}
               </div>
             )}
           </div>

frontend/components/login-required-dialog.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { LogIn } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+interface LoginRequiredDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function LoginRequiredDialog({
+  open,
+  onOpenChange,
+}: LoginRequiredDialogProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const query = searchParams.toString();
+  const returnTo = query ? `${pathname}?${query}` : pathname;
+  const loginHref = `/auth/login?${new URLSearchParams({ returnTo }).toString()}`;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Log in to continue</DialogTitle>
+          <DialogDescription>
+            Log in to chat with the AI assistant or run an AI analysis.
+            You&apos;ll be brought right back here.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Not now
+          </Button>
+          <Button asChild>
+            <Link href={loginHref} className="flex items-center gap-2">
+              <LogIn className="h-4 w-4" />
+              Log In
+            </Link>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}