From 53f6ad41830450c72673935e63619095ca81eec3 Mon Sep 17 00:00:00 2001
From: PoshanP <poshan@twentyideas.com>
Date: Thu, 8 Jan 2026 10:42:17 -0800
Subject: [PATCH] refactor: Code cleanup and deduplication

- Extract magic values to constants (SWR intervals, panel dimensions, URL expiry)
- Create shared ChatMessage/ChatSession types in lib/types/chat.ts
- Create reusable BaseModal component for collection modals
- Consolidate useUserId hook pattern in useApi.ts
- Remove unused code: cache.ts, QueryBuilder, validation helpers, context exports
- Fix duplicate CSS rules in globals.css
- Update RAG config to use centralized constants
---
 app/api/rag/summary/route.ts                  |  11 +-
 app/chat-new/page.tsx                         |  47 ++--
 app/globals.css                               |   9 -
 app/papers/page.tsx                           |   3 +-
 frontend/components/ExportChatButton.tsx      |  14 +-
 frontend/components/NextReadList.tsx          |   4 +-
 frontend/components/RecentPapers.tsx          |   4 +-
 frontend/components/chat/MobileChatLayout.tsx |  27 +-
 frontend/components/chat/MobileChatView.tsx   |  15 +-
 .../collections/AddToCollectionModal.tsx      | 193 ++++++--------
 frontend/components/collections/BaseModal.tsx | 133 ++++++++++
 .../collections/CreateCollectionModal.tsx     | 202 +++++++--------
 .../collections/EditCollectionModal.tsx       | 235 ++++++++----------
 frontend/components/collections/index.ts      |   1 +
 lib/constants/index.ts                        |  22 ++
 lib/contexts/AuthContext.tsx                  |   5 +-
 lib/contexts/DataContext.tsx                  |   2 -
 lib/contexts/StatsContext.tsx                 |  13 -
 lib/db/index.ts                               | 122 +--------
 lib/hooks/useApi.ts                           |  61 ++---
 lib/rag/config.ts                             |  24 +-
 lib/types/chat.ts                             |  27 ++
 lib/types/index.ts                            |  65 +----
 lib/utils/cache.ts                            |  51 ----
 lib/validation/index.ts                       |  76 +-----
 25 files changed, 532 insertions(+), 834 deletions(-)
 create mode 100644 frontend/components/collections/BaseModal.tsx
 create mode 100644 lib/types/chat.ts
 delete mode 100644 lib/utils/cache.ts

diff --git a/app/api/rag/summary/route.ts b/app/api/rag/summary/route.ts
index f2c61e9..e362257 100644
--- a/app/api/rag/summary/route.ts
+++ b/app/api/rag/summary/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { createClient } from '@supabase/supabase-js';
 import OpenAI from 'openai';
+import { SUMMARY_MODEL, SUMMARY_MAX_TOKENS, MAX_SUMMARY_CONTEXT_LENGTH, TOP_K_CHUNKS } from '@/lib/constants';
 
 const supabase = createClient(
   process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -72,18 +73,18 @@ export async function POST(request: NextRequest) {
       .select('content')
       .eq('paper_id', paper_id)
       .order('page_no', { ascending: true })
-      .limit(5);
+      .limit(TOP_K_CHUNKS);
 
     // If we have chunks, use them. Otherwise, try to use raw PDF content
     let contextForSummary = '';
 
     if (chunks && chunks.length > 0) {
-      contextForSummary = chunks.map(c => c.content).join('\n\n').slice(0, 4000);
+      contextForSummary = chunks.map(c => c.content).join('\n\n').slice(0, MAX_SUMMARY_CONTEXT_LENGTH);
     } else if (pdfContent) {
       // Extract readable text from the PDF content (it might be garbled but often contains some text)
       const textMatch = pdfContent.match(/[\x20-\x7E\n\r]+/g);
       if (textMatch) {
-        contextForSummary = textMatch.join(' ').slice(0, 4000);
+        contextForSummary = textMatch.join(' ').slice(0, MAX_SUMMARY_CONTEXT_LENGTH);
       }
     }
 
@@ -104,7 +105,7 @@ You can inquire about complex concepts, request explanations of technical detail
 
     // Generate summary using OpenAI with whatever content we have
     const completion = await openai.chat.completions.create({
-      model: 'gpt-3.5-turbo',
+      model: SUMMARY_MODEL,
       messages: [
         {
           role: 'system',
@@ -115,7 +116,7 @@ You can inquire about complex concepts, request explanations of technical detail
           content: `Extract the title and summarize this research paper content:\n\n${contextForSummary}`
         }
       ],
-      max_tokens: 400,
+      max_tokens: SUMMARY_MAX_TOKENS,
       temperature: 0.3,
     });
 
diff --git a/app/chat-new/page.tsx b/app/chat-new/page.tsx
index b1924ee..2f957d3 100644
--- a/app/chat-new/page.tsx
+++ b/app/chat-new/page.tsx
@@ -22,27 +22,18 @@ import { useConfirm } from "@/lib/contexts/ConfirmContext";
 import { useBreakpoint } from "@/lib/hooks/useMediaQuery";
 import { MobileChatLayout } from "@/frontend/components/chat/MobileChatLayout";
 import { PdfViewer } from "@/frontend/components/PdfViewer";
+import { ChatMessage, ChatSession } from "@/lib/types/chat";
+import {
+  CHAT_PANEL_DEFAULT_WIDTH,
+  CHAT_PANEL_MIN_WIDTH,
+  CHAT_PANEL_MAX_WIDTH,
+  SIDEBAR_EXPANDED_WIDTH,
+  SIDEBAR_COLLAPSED_WIDTH,
+  MESSAGE_TITLE_TRUNCATE_LENGTH,
+  SIGNED_URL_EXPIRY_SECONDS,
+} from "@/lib/constants";
 
-interface ChatSession {
-  id: string;
-  paper_id: string | null;
-  title: string;
-  created_at: string;
-  updated_at: string;
-  user_id: string;
-  paper?: {
-    title: string;
-  };
-}
-
-interface Message {
-  id: string;
-  content: string;
-  role: 'user' | 'assistant';
-  created_at: string;
-  session_id: string;
-  metadata?: any;
-}
+type Message = ChatMessage;
 
 function ChatNewPageContent() {
   const supabase = useSupabase();
@@ -64,7 +55,7 @@ function ChatNewPageContent() {
   const [previewLoading, setPreviewLoading] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
   const [chatEverOpened, setChatEverOpened] = useState(false);
-  const [chatWidth, setChatWidth] = useState(550);
+  const [chatWidth, setChatWidth] = useState(CHAT_PANEL_DEFAULT_WIDTH);
   const [isResizing, setIsResizing] = useState(false);
   const [pdfBaseUrl, setPdfBaseUrl] = useState<string | null>(null);
   const [processingStatus, setProcessingStatus] = useState<'pending' | 'processing' | 'completed' | 'failed' | null>(null);
@@ -258,13 +249,13 @@ function ChatNewPageContent() {
 
       if (messagesError) throw messagesError;
 
-      const transformedMessages = (messagesData || []).map((msg, index) => ({
+      const transformedMessages: ChatMessage[] = (messagesData || []).map((msg, index) => ({
         id: `${msg.id}-${index}`,
         content: msg.content,
         role: msg.role as 'user' | 'assistant',
         created_at: msg.created_at,
         session_id: msg.session_id,
-        metadata: msg.metadata
+        metadata: msg.metadata as ChatMessage['metadata']
       }));
 
       // Cache the messages
@@ -318,7 +309,7 @@ function ChatNewPageContent() {
 
     try {
       if (messages.length === 0) {
-        const newTitle = messageContent.slice(0, 50) + (messageContent.length > 50 ? '...' : '');
+        const newTitle = messageContent.slice(0, MESSAGE_TITLE_TRUNCATE_LENGTH) + (messageContent.length > MESSAGE_TITLE_TRUNCATE_LENGTH ? '...' : '');
         await supabase
           .from('chat_sessions')
           .update({
@@ -516,7 +507,7 @@ function ChatNewPageContent() {
                 if (updatedPaper.storage_path) {
                   const { data: signed } = await supabase.storage
                     .from('papers')
-                    .createSignedUrl(updatedPaper.storage_path, 60 * 60);
+                    .createSignedUrl(updatedPaper.storage_path, SIGNED_URL_EXPIRY_SECONDS);
                   if (signed?.signedUrl) {
                     setPdfBaseUrl(signed.signedUrl);
                   }
@@ -556,7 +547,7 @@ function ChatNewPageContent() {
 
         const { data: signed, error: signedError } = await supabase.storage
           .from('papers')
-          .createSignedUrl(paper.storage_path, 60 * 60);
+          .createSignedUrl(paper.storage_path, SIGNED_URL_EXPIRY_SECONDS);
 
         if (signedError || !signed?.signedUrl) {
           console.error('Signed URL error:', signedError);
@@ -661,10 +652,10 @@ function ChatNewPageContent() {
     const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing) return;
       e.preventDefault();
-      const sidebarWidth = sidebarOpen ? 256 : 56;
+      const sidebarWidth = sidebarOpen ? SIDEBAR_EXPANDED_WIDTH : SIDEBAR_COLLAPSED_WIDTH;
       const newWidth = e.clientX - sidebarWidth;
       requestAnimationFrame(() => {
-        setChatWidth(Math.min(Math.max(280, newWidth), 800));
+        setChatWidth(Math.min(Math.max(CHAT_PANEL_MIN_WIDTH, newWidth), CHAT_PANEL_MAX_WIDTH));
       });
     };
 
diff --git a/app/globals.css b/app/globals.css
index 6580779..0e3cabd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -46,15 +46,6 @@ body {
   -webkit-overflow-scrolling: touch;
 }
 
-/* Hide scrollbar on mobile for cleaner UI */
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
 /* Hide scrollbar utility */
 .scrollbar-hide {
   -ms-overflow-style: none;
diff --git a/app/papers/page.tsx b/app/papers/page.tsx
index f102af9..36e7ea6 100644
--- a/app/papers/page.tsx
+++ b/app/papers/page.tsx
@@ -18,6 +18,7 @@ import {
 import { CollectionsSidebar, AddToCollectionModal, CollectionBadges } from "@/frontend/components/collections";
 import { useCollections, useCollectionPapers, invalidateCollectionCaches } from "@/lib/hooks/useCollections";
 import { CollectionWithCount } from "@/lib/types/database";
+import { SIGNED_URL_EXPIRY_SECONDS } from "@/lib/constants";
 import { formatDate } from "@/lib/utils/dateFormat";
 import { renderPdfFirstPage } from "@/lib/utils/pdfPreview";
 
@@ -155,7 +156,7 @@ function PapersPageContent() {
         if (paper.storage_path) {
           const { data, error } = await supabase.storage
             .from('papers')
-            .createSignedUrl(paper.storage_path, 60 * 60);
+            .createSignedUrl(paper.storage_path, SIGNED_URL_EXPIRY_SECONDS);
           if (!error && data?.signedUrl) {
             const img = await renderPdfFirstPage(data.signedUrl, 560);
             if (img) {
diff --git a/frontend/components/ExportChatButton.tsx b/frontend/components/ExportChatButton.tsx
index 48c08e7..e89d3d1 100644
--- a/frontend/components/ExportChatButton.tsx
+++ b/frontend/components/ExportChatButton.tsx
@@ -4,24 +4,14 @@ import { useState } from "react";
 import { Download, Loader2, FileText, File } from "lucide-react";
 import { exportChatAsPDF, exportChatAsTXT } from "@/lib/utils/export-chat";
 import { useAlert } from "@/lib/contexts/AlertContext";
+import { ChatMessage } from "@/lib/types/chat";
 
 interface ExportChatButtonProps {
   sessionId: string;
   sessionTitle: string;
   paperTitle?: string;
   sessionDate: string;
-  messages: Array<{
-    id: string;
-    content: string;
-    role: 'user' | 'assistant';
-    created_at: string;
-    metadata?: {
-      citations?: Array<{
-        page_no: number;
-        score: number;
-      }>;
-    };
-  }>;
+  messages: ChatMessage[];
 }
 
 export function ExportChatButton({
diff --git a/frontend/components/NextReadList.tsx b/frontend/components/NextReadList.tsx
index a2585f9..4b6a7e7 100644
--- a/frontend/components/NextReadList.tsx
+++ b/frontend/components/NextReadList.tsx
@@ -14,7 +14,7 @@ import {
   hasPreview
 } from "@/lib/utils/previewCache";
 import { useCollections, useCollectionPapers, invalidateCollectionCaches } from "@/lib/hooks/useCollections";
-import { NEXT_READ_COLLECTION_NAME } from "@/lib/constants";
+import { NEXT_READ_COLLECTION_NAME, SIGNED_URL_EXPIRY_SECONDS } from "@/lib/constants";
 
 export function NextReadList() {
   const supabase = useSupabase();
@@ -91,7 +91,7 @@ export function NextReadList() {
         if (paper.storage_path) {
           const signed = await supabase.storage
             .from('papers')
-            .createSignedUrl(paper.storage_path, 60 * 60);
+            .createSignedUrl(paper.storage_path, SIGNED_URL_EXPIRY_SECONDS);
 
           const pdfUrl = signed.data?.signedUrl;
           if (pdfUrl) {
diff --git a/frontend/components/RecentPapers.tsx b/frontend/components/RecentPapers.tsx
index d05dfd9..b2d8424 100644
--- a/frontend/components/RecentPapers.tsx
+++ b/frontend/components/RecentPapers.tsx
@@ -15,7 +15,7 @@ import {
   clearPreview
 } from "@/lib/utils/previewCache";
 import { useCollections, useCollectionPapers } from "@/lib/hooks/useCollections";
-import { SYSTEM_COLLECTION_NAME } from "@/lib/constants";
+import { SYSTEM_COLLECTION_NAME, SIGNED_URL_EXPIRY_SECONDS } from "@/lib/constants";
 import { formatDate } from "@/lib/utils/dateFormat";
 import { renderPdfFirstPage } from "@/lib/utils/pdfPreview";
 
@@ -110,7 +110,7 @@ export function RecentPapers() {
         if (paper.storage_path) {
           const signed = await supabase.storage
             .from('papers')
-            .createSignedUrl(paper.storage_path, 60 * 60);
+            .createSignedUrl(paper.storage_path, SIGNED_URL_EXPIRY_SECONDS);
 
           const pdfUrl = signed.data?.signedUrl;
 
diff --git a/frontend/components/chat/MobileChatLayout.tsx b/frontend/components/chat/MobileChatLayout.tsx
index ef74a5e..2626b57 100644
--- a/frontend/components/chat/MobileChatLayout.tsx
+++ b/frontend/components/chat/MobileChatLayout.tsx
@@ -4,36 +4,13 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { MobileChatView } from "./MobileChatView";
 import { MobilePdfView } from "./MobilePdfView";
 import { MessageSquare, X, ChevronDown, Trash2, Plus, Search } from "lucide-react";
-
-interface Message {
-  id: string;
-  content: string;
-  role: "user" | "assistant";
-  created_at: string;
-  session_id: string;
-  metadata?: {
-    is_loading?: boolean;
-    is_system_summary?: boolean;
-  };
-}
-
-interface ChatSession {
-  id: string;
-  paper_id: string | null;
-  title: string;
-  created_at: string;
-  updated_at: string;
-  user_id: string;
-  paper?: {
-    title: string;
-  };
-}
+import { ChatMessage, ChatSession } from "@/lib/types/chat";
 
 interface MobileChatLayoutProps {
   sessions: ChatSession[];
   currentSession: ChatSession | null;
   filterPaperId: string | null;
-  messages: Message[];
+  messages: ChatMessage[];
   input: string;
   onInputChange: (value: string) => void;
   onSendMessage: () => void;
diff --git a/frontend/components/chat/MobileChatView.tsx b/frontend/components/chat/MobileChatView.tsx
index c9516b9..1b53d60 100644
--- a/frontend/components/chat/MobileChatView.tsx
+++ b/frontend/components/chat/MobileChatView.tsx
@@ -2,21 +2,10 @@
 
 import { useRef, useEffect } from "react";
 import { Send, Loader2 } from "lucide-react";
-
-interface Message {
-  id: string;
-  content: string;
-  role: "user" | "assistant";
-  created_at: string;
-  session_id: string;
-  metadata?: {
-    is_loading?: boolean;
-    is_system_summary?: boolean;
-  };
-}
+import { ChatMessage } from "@/lib/types/chat";
 
 interface MobileChatViewProps {
-  messages: Message[];
+  messages: ChatMessage[];
   input: string;
   onInputChange: (value: string) => void;
   onSendMessage: () => void;
diff --git a/frontend/components/collections/AddToCollectionModal.tsx b/frontend/components/collections/AddToCollectionModal.tsx
index 53f84ef..bfc918f 100644
--- a/frontend/components/collections/AddToCollectionModal.tsx
+++ b/frontend/components/collections/AddToCollectionModal.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { X, Loader2, Check, FolderPlus } from "lucide-react";
+import { Loader2, Check, FolderPlus } from "lucide-react";
+import { BaseModal, ModalButton } from "./BaseModal";
 import { CollectionIcon } from "./CollectionIcon";
 import { useCollections, usePaperCollections, invalidateCollectionCaches } from "@/lib/hooks/useCollections";
 import { updatePaperCollections } from "@/lib/api/collections";
@@ -65,126 +66,96 @@ export function AddToCollectionModal({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      onClose();
-    }
-  };
-
   const isLoading = collectionsLoading || paperCollectionsLoading;
 
-  if (!isOpen || !paperId) return null;
+  if (!paperId) return null;
 
   return (
-    <div
-      className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50"
-      onKeyDown={handleKeyDown}
-    >
-      <div
-        className="absolute inset-0 bg-black/20"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      <div className="relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 w-full max-w-sm max-h-[80vh] overflow-hidden shadow-2xl flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <FolderPlus className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
-            <h2 className="text-base font-semibold text-gray-900 dark:text-white">
-              Add to Collection
-            </h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-            aria-label="Close modal"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        {/* Paper title */}
-        {paperTitle && (
-          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 truncate">
-            {paperTitle}
-          </p>
-        )}
-
-        {/* Collections list */}
-        <div className="flex-1 overflow-y-auto -mx-5 px-5">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
-            </div>
-          ) : collections && collections.length > 0 ? (
-            <div className="space-y-1">
-              {collections.map((collection) => {
-                const isSelected = selectedIds.has(collection.id);
-                return (
-                  <button
-                    key={collection.id}
-                    onClick={() => handleToggle(collection.id)}
-                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
-                      isSelected
-                        ? "bg-indigo-50 dark:bg-indigo-900/20"
-                        : "hover:bg-gray-50 dark:hover:bg-gray-700/50"
-                    }`}
-                  >
-                    <div
-                      className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
-                        isSelected
-                          ? "border-indigo-600 bg-indigo-600"
-                          : "border-gray-300 dark:border-gray-600"
-                      }`}
-                    >
-                      {isSelected && <Check className="h-3 w-3 text-white" />}
-                    </div>
-                    <CollectionIcon
-                      icon={collection.icon}
-                      color={collection.color}
-                      size="sm"
-                    />
-                    <span className="flex-1 text-left text-sm text-gray-700 dark:text-gray-300 truncate">
-                      {collection.name}
-                    </span>
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
-                      {collection.paper_count}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="text-center py-8">
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                No collections yet.
-              </p>
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
-                Create a collection from the sidebar.
-              </p>
-            </div>
-          )}
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
-          >
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Add to Collection"
+      titleIcon={<FolderPlus className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />}
+      maxWidth="sm"
+      footer={
+        <>
+          <ModalButton onClick={onClose} variant="secondary">
             Cancel
-          </button>
-          <button
+          </ModalButton>
+          <ModalButton
             onClick={handleSave}
             disabled={saving || isLoading}
-            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:cursor-not-allowed rounded-lg transition-colors"
+            variant="primary"
           >
             {saving && <Loader2 className="h-4 w-4 animate-spin" />}
             <span>{saving ? "Saving..." : "Save"}</span>
-          </button>
-        </div>
+          </ModalButton>
+        </>
+      }
+    >
+      {/* Paper title */}
+      {paperTitle && (
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 truncate">
+          {paperTitle}
+        </p>
+      )}
+
+      {/* Collections list */}
+      <div className="overflow-y-auto max-h-[40vh] -mx-6 px-6">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+          </div>
+        ) : collections && collections.length > 0 ? (
+          <div className="space-y-1">
+            {collections.map((collection) => {
+              const isSelected = selectedIds.has(collection.id);
+              return (
+                <button
+                  key={collection.id}
+                  type="button"
+                  onClick={() => handleToggle(collection.id)}
+                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
+                    isSelected
+                      ? "bg-indigo-50 dark:bg-indigo-900/20"
+                      : "hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                  }`}
+                >
+                  <div
+                    className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                      isSelected
+                        ? "border-indigo-600 bg-indigo-600"
+                        : "border-gray-300 dark:border-gray-600"
+                    }`}
+                  >
+                    {isSelected && <Check className="h-3 w-3 text-white" />}
+                  </div>
+                  <CollectionIcon
+                    icon={collection.icon}
+                    color={collection.color}
+                    size="sm"
+                  />
+                  <span className="flex-1 text-left text-sm text-gray-700 dark:text-gray-300 truncate">
+                    {collection.name}
+                  </span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {collection.paper_count}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-8">
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No collections yet.
+            </p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+              Create a collection from the sidebar.
+            </p>
+          </div>
+        )}
       </div>
-    </div>
+    </BaseModal>
   );
 }
diff --git a/frontend/components/collections/BaseModal.tsx b/frontend/components/collections/BaseModal.tsx
new file mode 100644
index 0000000..af15a9c
--- /dev/null
+++ b/frontend/components/collections/BaseModal.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useCallback, ReactNode, FormEvent } from "react";
+import { X } from "lucide-react";
+
+interface BaseModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  titleIcon?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  maxWidth?: "sm" | "md" | "lg";
+  // Form support
+  onSubmit?: (e: FormEvent) => void;
+}
+
+const maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+};
+
+export function BaseModal({
+  isOpen,
+  onClose,
+  title,
+  titleIcon,
+  children,
+  footer,
+  maxWidth = "md",
+  onSubmit,
+}: BaseModalProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, handleKeyDown]);
+
+  if (!isOpen) return null;
+
+  const Wrapper = onSubmit ? "form" : "div";
+  const wrapperProps = onSubmit ? { onSubmit } : {};
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+      <div
+        className="absolute inset-0 bg-black/20"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <Wrapper
+        {...wrapperProps}
+        className={`relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 w-full ${maxWidthClasses[maxWidth]} max-h-[90vh] overflow-y-auto shadow-2xl flex flex-col`}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2">
+            {titleIcon}
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {title}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            aria-label="Close modal"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1">{children}</div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="flex items-center justify-end gap-3 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
+            {footer}
+          </div>
+        )}
+      </Wrapper>
+    </div>
+  );
+}
+
+// Reusable button components for modal actions
+interface ModalButtonProps {
+  onClick?: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+  variant?: "primary" | "secondary" | "danger";
+  type?: "button" | "submit";
+}
+
+export function ModalButton({
+  onClick,
+  disabled,
+  children,
+  variant = "secondary",
+  type = "button",
+}: ModalButtonProps) {
+  const variantClasses = {
+    primary:
+      "text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:cursor-not-allowed",
+    secondary:
+      "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600",
+    danger:
+      "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 disabled:opacity-50 disabled:cursor-not-allowed",
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${variantClasses[variant]}`}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/frontend/components/collections/CreateCollectionModal.tsx b/frontend/components/collections/CreateCollectionModal.tsx
index 8adc540..6734171 100644
--- a/frontend/components/collections/CreateCollectionModal.tsx
+++ b/frontend/components/collections/CreateCollectionModal.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
-import { X, Loader2, Plus } from "lucide-react";
+import { useState, FormEvent } from "react";
+import { Loader2, Plus } from "lucide-react";
+import { BaseModal, ModalButton } from "./BaseModal";
 import { ColorPicker } from "./ColorPicker";
 import { IconPicker } from "./IconPicker";
 import { createCollection } from "@/lib/api/collections";
@@ -26,7 +27,7 @@ export function CreateCollectionModal({
   const [saving, setSaving] = useState(false);
   const { error: showError, success: showSuccess } = useAlert();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
 
     if (!name.trim()) {
@@ -62,126 +63,95 @@ export function CreateCollectionModal({
     onClose();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      handleClose();
-    }
-  };
-
-  if (!isOpen) return null;
-
   return (
-    <div
-      className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50"
-      onKeyDown={handleKeyDown}
+    <BaseModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Create Collection"
+      onSubmit={handleSubmit}
+      footer={
+        <>
+          <ModalButton onClick={handleClose} variant="secondary">
+            Cancel
+          </ModalButton>
+          <ModalButton
+            disabled={saving || !name.trim()}
+            variant="primary"
+            type="submit"
+          >
+            {saving ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Plus className="h-4 w-4" />
+            )}
+            <span>{saving ? "Creating..." : "Create"}</span>
+          </ModalButton>
+        </>
+      }
     >
-      <div
-        className="absolute inset-0 bg-black/20"
-        onClick={handleClose}
-        aria-hidden="true"
-      />
-      <div className="relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 w-full max-w-md max-h-[90vh] overflow-y-auto shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Create Collection
-          </h2>
-          <button
-            onClick={handleClose}
-            className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-            aria-label="Close modal"
+      <div className="space-y-5">
+        {/* Name */}
+        <div>
+          <label
+            htmlFor="collection-name"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
           >
-            <X className="h-4 w-4" />
-          </button>
+            Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="collection-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={100}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder="e.g., Research Papers"
+            autoFocus
+          />
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {name.length}/100 characters
+          </p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-5">
-          {/* Name */}
-          <div>
-            <label
-              htmlFor="collection-name"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
-              Name <span className="text-red-500">*</span>
-            </label>
-            <input
-              id="collection-name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              maxLength={100}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-              placeholder="e.g., Research Papers"
-              autoFocus
-            />
-            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              {name.length}/100 characters
-            </p>
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              htmlFor="collection-description"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
-              Description
-            </label>
-            <textarea
-              id="collection-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              maxLength={500}
-              rows={2}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
-              placeholder="Optional description..."
-            />
-          </div>
-
-          {/* Color Picker */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Color
-            </label>
-            <ColorPicker selectedColor={color} onColorChange={setColor} />
-          </div>
+        {/* Description */}
+        <div>
+          <label
+            htmlFor="collection-description"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >
+            Description
+          </label>
+          <textarea
+            id="collection-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={500}
+            rows={2}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+            placeholder="Optional description..."
+          />
+        </div>
 
-          {/* Icon Picker */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Icon
-            </label>
-            <IconPicker
-              selectedIcon={icon}
-              selectedColor={color}
-              onIconChange={setIcon}
-            />
-          </div>
+        {/* Color Picker */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+            Color
+          </label>
+          <ColorPicker selectedColor={color} onColorChange={setColor} />
+        </div>
 
-          {/* Actions */}
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <button
-              type="button"
-              onClick={handleClose}
-              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={saving || !name.trim()}
-              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:cursor-not-allowed rounded-lg transition-colors"
-            >
-              {saving ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Plus className="h-4 w-4" />
-              )}
-              <span>{saving ? "Creating..." : "Create"}</span>
-            </button>
-          </div>
-        </form>
+        {/* Icon Picker */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+            Icon
+          </label>
+          <IconPicker
+            selectedIcon={icon}
+            selectedColor={color}
+            onIconChange={setIcon}
+          />
+        </div>
       </div>
-    </div>
+    </BaseModal>
   );
 }
diff --git a/frontend/components/collections/EditCollectionModal.tsx b/frontend/components/collections/EditCollectionModal.tsx
index 0ba2894..c12c501 100644
--- a/frontend/components/collections/EditCollectionModal.tsx
+++ b/frontend/components/collections/EditCollectionModal.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { X, Loader2, Save, Trash2 } from "lucide-react";
+import { useState, useEffect, FormEvent } from "react";
+import { Loader2, Save, Trash2 } from "lucide-react";
+import { BaseModal, ModalButton } from "./BaseModal";
 import { ColorPicker } from "./ColorPicker";
 import { IconPicker } from "./IconPicker";
 import { updateCollection, deleteCollection } from "@/lib/api/collections";
@@ -41,7 +42,7 @@ export function EditCollectionModal({
     }
   }, [collection]);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
 
     if (!collection) return;
@@ -98,150 +99,120 @@ export function EditCollectionModal({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      onClose();
-    }
-  };
-
-  if (!isOpen || !collection) return null;
+  if (!collection) return null;
 
   return (
-    <div
-      className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50"
-      onKeyDown={handleKeyDown}
-    >
-      <div
-        className="absolute inset-0 bg-black/20"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      <div className="relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 w-full max-w-md max-h-[90vh] overflow-y-auto shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Edit Collection
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-            aria-label="Close modal"
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Edit Collection"
+      onSubmit={handleSubmit}
+      footer={
+        <div className="flex items-center justify-between w-full">
+          <ModalButton
+            onClick={handleDelete}
+            disabled={deleting || saving}
+            variant="danger"
           >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-5">
-          {/* Name */}
-          <div>
-            <label
-              htmlFor="edit-collection-name"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+            {deleting ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Trash2 className="h-4 w-4" />
+            )}
+            <span>{deleting ? "Deleting..." : "Delete"}</span>
+          </ModalButton>
+
+          <div className="flex items-center gap-3">
+            <ModalButton onClick={onClose} variant="secondary">
+              Cancel
+            </ModalButton>
+            <ModalButton
+              disabled={saving || deleting || !name.trim()}
+              variant="primary"
+              type="submit"
             >
-              Name <span className="text-red-500">*</span>
-            </label>
-            <input
-              id="edit-collection-name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              maxLength={100}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-              placeholder="Collection name"
-              autoFocus
-            />
-            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              {name.length}/100 characters
-            </p>
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              htmlFor="edit-collection-description"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
-              Description
-            </label>
-            <textarea
-              id="edit-collection-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              maxLength={500}
-              rows={2}
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
-              placeholder="Optional description..."
-            />
-          </div>
-
-          {/* Color Picker */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Color
-            </label>
-            <ColorPicker selectedColor={color} onColorChange={setColor} />
-          </div>
-
-          {/* Icon Picker */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Icon
-            </label>
-            <IconPicker
-              selectedIcon={icon}
-              selectedColor={color}
-              onIconChange={setIcon}
-            />
-          </div>
-
-          {/* Actions */}
-          <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
-            <button
-              type="button"
-              onClick={handleDelete}
-              disabled={deleting || saving}
-              className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
-            >
-              {deleting ? (
+              {saving ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                <Trash2 className="h-4 w-4" />
+                <Save className="h-4 w-4" />
               )}
-              <span>{deleting ? "Deleting..." : "Delete"}</span>
-            </button>
-
-            <div className="flex items-center gap-3">
-              <button
-                type="button"
-                onClick={onClose}
-                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={saving || deleting || !name.trim()}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 disabled:cursor-not-allowed rounded-lg transition-colors"
-              >
-                {saving ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="h-4 w-4" />
-                )}
-                <span>{saving ? "Saving..." : "Save"}</span>
-              </button>
-            </div>
+              <span>{saving ? "Saving..." : "Save"}</span>
+            </ModalButton>
           </div>
-        </form>
+        </div>
+      }
+    >
+      <div className="space-y-5">
+        {/* Name */}
+        <div>
+          <label
+            htmlFor="edit-collection-name"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >
+            Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="edit-collection-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={100}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder="Collection name"
+            autoFocus
+          />
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {name.length}/100 characters
+          </p>
+        </div>
+
+        {/* Description */}
+        <div>
+          <label
+            htmlFor="edit-collection-description"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >
+            Description
+          </label>
+          <textarea
+            id="edit-collection-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={500}
+            rows={2}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+            placeholder="Optional description..."
+          />
+        </div>
+
+        {/* Color Picker */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+            Color
+          </label>
+          <ColorPicker selectedColor={color} onColorChange={setColor} />
+        </div>
+
+        {/* Icon Picker */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+            Icon
+          </label>
+          <IconPicker
+            selectedIcon={icon}
+            selectedColor={color}
+            onIconChange={setIcon}
+          />
+        </div>
 
         {/* Paper count info */}
         {collection.paper_count > 0 && (
-          <p className="mt-4 text-xs text-gray-500 dark:text-gray-400 text-center">
+          <p className="text-xs text-gray-500 dark:text-gray-400 text-center pt-2">
             This collection contains {collection.paper_count} paper{collection.paper_count !== 1 ? "s" : ""}.
             Deleting the collection will not delete the papers.
           </p>
         )}
       </div>
-    </div>
+    </BaseModal>
   );
 }
diff --git a/frontend/components/collections/index.ts b/frontend/components/collections/index.ts
index f3190fc..ec173fa 100644
--- a/frontend/components/collections/index.ts
+++ b/frontend/components/collections/index.ts
@@ -1,3 +1,4 @@
+export { BaseModal, ModalButton } from './BaseModal'
 export { CollectionIcon } from './CollectionIcon'
 export { ColorPicker } from './ColorPicker'
 export { IconPicker } from './IconPicker'
diff --git a/lib/constants/index.ts b/lib/constants/index.ts
index 0497ef9..47dfdfe 100644
--- a/lib/constants/index.ts
+++ b/lib/constants/index.ts
@@ -10,11 +10,33 @@ export const TOP_K_CHUNKS = 5
 
 export const EMBEDDING_MODEL = 'text-embedding-3-small'
 export const CHAT_MODEL = 'gpt-4o-mini'
+export const SUMMARY_MODEL = 'gpt-4o-mini' // Model for paper summaries (can use cheaper model)
+export const SUMMARY_MAX_TOKENS = 400
+export const MAX_SUMMARY_CONTEXT_LENGTH = 4000
 
 export const PAPERS_PER_PAGE = 20
 export const SESSIONS_PER_PAGE = 10
 export const MESSAGES_PER_PAGE = 50
 
+// SWR deduplication intervals (in ms)
+export const SWR_DEDUP_PROFILE = 300000 // 5 minutes
+export const SWR_DEDUP_PAPERS = 120000 // 2 minutes
+export const SWR_DEDUP_RECENT = 60000 // 1 minute
+
+// Chat UI dimensions (in px)
+export const CHAT_PANEL_DEFAULT_WIDTH = 550
+export const CHAT_PANEL_MIN_WIDTH = 280
+export const CHAT_PANEL_MAX_WIDTH = 800
+export const SIDEBAR_EXPANDED_WIDTH = 256
+export const SIDEBAR_COLLAPSED_WIDTH = 56
+
+// Session and auth
+export const SESSION_CHECK_INTERVAL_MS = 5 * 60 * 1000 // 5 minutes
+export const SIGNED_URL_EXPIRY_SECONDS = 60 * 60 // 1 hour
+
+// Message
+export const MESSAGE_TITLE_TRUNCATE_LENGTH = 50
+
 export const API_ROUTES = {
   AUTH: {
     SIGN_UP: '/api/auth/signup',
diff --git a/lib/contexts/AuthContext.tsx b/lib/contexts/AuthContext.tsx
index 0c662ad..1579ce2 100644
--- a/lib/contexts/AuthContext.tsx
+++ b/lib/contexts/AuthContext.tsx
@@ -3,6 +3,7 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { getSupabaseClient } from '@/lib/hooks/useSupabase';
+import { SESSION_CHECK_INTERVAL_MS } from '@/lib/constants';
 
 const supabase = getSupabaseClient();
 
@@ -50,10 +51,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       }
     });
 
-    // Check session every 5 minutes
+    // Check session periodically
     const interval = setInterval(() => {
       checkSession();
-    }, 5 * 60 * 1000);
+    }, SESSION_CHECK_INTERVAL_MS);
 
     return () => {
       subscription.unsubscribe();
diff --git a/lib/contexts/DataContext.tsx b/lib/contexts/DataContext.tsx
index 858fb9b..311cacd 100644
--- a/lib/contexts/DataContext.tsx
+++ b/lib/contexts/DataContext.tsx
@@ -54,8 +54,6 @@ export function DataProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-export const useDataContext = () => useContext(DataContext);
-
 export const useData = () => {
   const context = useContext(DataContext);
   return {
diff --git a/lib/contexts/StatsContext.tsx b/lib/contexts/StatsContext.tsx
index a4cdc65..485946d 100644
--- a/lib/contexts/StatsContext.tsx
+++ b/lib/contexts/StatsContext.tsx
@@ -107,16 +107,3 @@ export function useStats() {
   }
   return context;
 }
-
-// Export a standalone refresh function for use outside of React components
-let refreshStatsCallback: (() => Promise<void>) | null = null;
-
-export function setRefreshStatsCallback(callback: () => Promise<void>) {
-  refreshStatsCallback = callback;
-}
-
-export async function refreshStatsGlobal() {
-  if (refreshStatsCallback) {
-    await refreshStatsCallback();
-  }
-}
diff --git a/lib/db/index.ts b/lib/db/index.ts
index d0fe128..3fe4c6d 100644
--- a/lib/db/index.ts
+++ b/lib/db/index.ts
@@ -7,26 +7,9 @@ const logger = createRequestLogger('Database')
 
 type TableName = keyof Database['public']['Tables']
 
-export interface QueryOptions {
-  select?: string
-  limit?: number
-  offset?: number
-  orderBy?: {
-    column: string
-    ascending?: boolean
-  }
-  filters?: Array<{
-    column: string
-    operator: 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte' | 'like' | 'ilike' | 'in'
-    value: any
-  }>
-}
-
 export class DatabaseService {
-  private static queryTimeout = 30000 // 30 seconds
-
   static async transaction<T>(
-    callback: (client: any) => Promise<T>
+    callback: (client: ReturnType<typeof createAdminClient>) => Promise<T>
   ): Promise<T> {
     const client = createAdminClient()
     try {
@@ -38,48 +21,6 @@ export class DatabaseService {
     }
   }
 
-  static async query<T>(
-    table: TableName,
-    options?: QueryOptions
-  ): Promise<{ data: T[]; count: number | null }> {
-    try {
-      const supabase = await createServerClientSSR()
-      let query = supabase.from(table).select(options?.select || '*', { count: 'exact' })
-
-      // Apply filters
-      if (options?.filters) {
-        for (const filter of options.filters) {
-          query = (query as any)[filter.operator](filter.column, filter.value)
-        }
-      }
-
-      // Apply ordering
-      if (options?.orderBy) {
-        query = query.order(options.orderBy.column, {
-          ascending: options.orderBy.ascending ?? true,
-        })
-      }
-
-      // Apply pagination
-      if (options?.limit) {
-        const offset = options.offset || 0
-        query = query.range(offset, offset + options.limit - 1)
-      }
-
-      const { data, count, error } = await query
-
-      if (error) {
-        logger.error({ error, table, options }, 'Query failed')
-        throw error
-      }
-
-      return { data: (data || []) as T[], count }
-    } catch (error) {
-      logger.error({ error }, 'Database query error')
-      throw new Error('Database query failed')
-    }
-  }
-
   static async batchInsert<T>(
     table: TableName,
     records: T[],
@@ -134,8 +75,6 @@ export class DatabaseService {
 
   static async getConnectionStats() {
     try {
-      // This would typically query pg_stat_activity in a real PostgreSQL setup
-      // For Supabase, we'll return mock stats
       return {
         activeConnections: 0,
         idleConnections: 0,
@@ -148,63 +87,4 @@ export class DatabaseService {
       return null
     }
   }
-
-  static async optimizeTable(table: TableName): Promise<void> {
-    try {
-      // In a real PostgreSQL setup, you would run VACUUM ANALYZE
-      // This is a placeholder for Supabase
-      logger.info({ table }, 'Table optimization requested')
-
-      // You can implement table-specific optimizations here
-      // For example, rebuilding indexes, updating statistics, etc.
-    } catch (error) {
-      logger.error({ error, table }, 'Table optimization failed')
-      throw new Error('Failed to optimize table')
-    }
-  }
 }
-
-export class QueryBuilder {
-  private table: TableName
-  private options: QueryOptions = {}
-
-  constructor(table: TableName) {
-    this.table = table
-  }
-
-  select(columns: string): this {
-    this.options.select = columns
-    return this
-  }
-
-  where(column: string, operator: NonNullable<QueryOptions['filters']>[0]['operator'], value: any): this {
-    if (!this.options.filters) {
-      this.options.filters = []
-    }
-    this.options.filters!.push({ column, operator, value })
-    return this
-  }
-
-  orderBy(column: string, ascending: boolean = true): this {
-    this.options.orderBy = { column, ascending }
-    return this
-  }
-
-  limit(limit: number): this {
-    this.options.limit = limit
-    return this
-  }
-
-  offset(offset: number): this {
-    this.options.offset = offset
-    return this
-  }
-
-  async execute<T>(): Promise<{ data: T[]; count: number | null }> {
-    return DatabaseService.query<T>(this.table, this.options)
-  }
-}
-
-export function createQueryBuilder(table: TableName): QueryBuilder {
-  return new QueryBuilder(table)
-}
\ No newline at end of file
diff --git a/lib/hooks/useApi.ts b/lib/hooks/useApi.ts
index 4923c78..02fbd3d 100644
--- a/lib/hooks/useApi.ts
+++ b/lib/hooks/useApi.ts
@@ -1,6 +1,7 @@
 import useSWR from 'swr';
 import { getSupabaseClient } from '@/lib/hooks/useSupabase';
 import { useEffect, useState } from 'react';
+import { SWR_DEDUP_PROFILE, SWR_DEDUP_PAPERS, SWR_DEDUP_RECENT } from '@/lib/constants';
 
 const supabase = getSupabaseClient();
 
@@ -260,8 +261,8 @@ async function fetchRecentReads(userId: string): Promise<Paper[]> {
   return papersWithDetails;
 }
 
-// Custom hooks
-export function useDashboardStats() {
+// Shared hook for user ID retrieval
+function useUserId() {
   const [userId, setUserId] = useState<string | null>(null);
 
   useEffect(() => {
@@ -272,6 +273,14 @@ export function useDashboardStats() {
     getUser();
   }, []);
 
+  const clearUserId = () => setUserId(null);
+  return { userId, clearUserId };
+}
+
+// Custom hooks
+export function useDashboardStats() {
+  const { userId, clearUserId } = useUserId();
+
   return useSWR<DashboardStats>(
     userId ? `dashboard-stats|${userId}` : null,
     dashboardStatsFetcher,
@@ -279,10 +288,10 @@ export function useDashboardStats() {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
       revalidateIfStale: false,
-      dedupingInterval: 60000, // 1 minute
+      dedupingInterval: SWR_DEDUP_RECENT,
       onError: (error) => {
         if (error?.message?.includes('JWT') || error?.message?.includes('auth')) {
-          setUserId(null);
+          clearUserId();
         }
       }
     }
@@ -290,15 +299,7 @@ export function useDashboardStats() {
 }
 
 export function useProfileData() {
-  const [userId, setUserId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser();
-      setUserId(user?.id || null);
-    };
-    getUser();
-  }, []);
+  const { userId, clearUserId } = useUserId();
 
   return useSWR<ProfileData>(
     userId ? `profile-data|${userId}` : null,
@@ -307,28 +308,18 @@ export function useProfileData() {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
       revalidateIfStale: false,
-      dedupingInterval: 300000, // 5 minutes
+      dedupingInterval: SWR_DEDUP_PROFILE,
       onError: (error) => {
         if (error?.message?.includes('JWT') || error?.message?.includes('auth')) {
-          setUserId(null);
+          clearUserId();
         }
       }
     }
   );
 }
 
-
-
 export function usePapers() {
-  const [userId, setUserId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser();
-      setUserId(user?.id || null);
-    };
-    getUser();
-  }, []);
+  const { userId, clearUserId } = useUserId();
 
   return useSWR<Paper[]>(
     userId ? `papers|${userId}` : null,
@@ -337,10 +328,10 @@ export function usePapers() {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
       revalidateIfStale: false,
-      dedupingInterval: 120000, // 2 minutes
+      dedupingInterval: SWR_DEDUP_PAPERS,
       onError: (error) => {
         if (error?.message?.includes('JWT') || error?.message?.includes('auth')) {
-          setUserId(null);
+          clearUserId();
         }
       }
     }
@@ -348,15 +339,7 @@ export function usePapers() {
 }
 
 export function useRecentReads() {
-  const [userId, setUserId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser();
-      setUserId(user?.id || null);
-    };
-    getUser();
-  }, []);
+  const { userId, clearUserId } = useUserId();
 
   return useSWR<Paper[]>(
     userId ? `recent-reads|${userId}` : null,
@@ -365,10 +348,10 @@ export function useRecentReads() {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
       revalidateIfStale: false,
-      dedupingInterval: 60000, // 1 minute
+      dedupingInterval: SWR_DEDUP_RECENT,
       onError: (error) => {
         if (error?.message?.includes('JWT') || error?.message?.includes('auth')) {
-          setUserId(null);
+          clearUserId();
         }
       }
     }
diff --git a/lib/rag/config.ts b/lib/rag/config.ts
index 8dbe6af..1cdeb08 100644
--- a/lib/rag/config.ts
+++ b/lib/rag/config.ts
@@ -1,3 +1,5 @@
+import { CHAT_MODEL, EMBEDDING_MODEL, CHUNK_SIZE, CHUNK_OVERLAP, TOP_K_CHUNKS, MAX_FILE_SIZE } from '../constants';
+
 export interface RAGConfig {
   openai: {
     apiKey: string;
@@ -49,8 +51,8 @@ export interface RAGConfig {
 export const defaultConfig: RAGConfig = {
   openai: {
     apiKey: process.env.OPENAI_API_KEY || '',
-    model: 'gpt-4-turbo-preview',
-    embeddingModel: 'text-embedding-3-large',
+    model: CHAT_MODEL,
+    embeddingModel: EMBEDDING_MODEL,
     temperature: 0.7,
     maxTokens: 2000,
     streamingEnabled: true,
@@ -61,14 +63,14 @@ export const defaultConfig: RAGConfig = {
     collectionName: 'papers',
   },
   chunking: {
-    chunkSize: 1000,
-    chunkOverlap: 100,
+    chunkSize: CHUNK_SIZE,
+    chunkOverlap: CHUNK_OVERLAP,
     semanticChunking: false,
     minChunkSize: 200,
     maxChunkSize: 2000,
   },
   retrieval: {
-    defaultK: 5,
+    defaultK: TOP_K_CHUNKS,
     maxK: 20,
     scoreThreshold: 0.7,
     searchType: 'hybrid',
@@ -76,7 +78,7 @@ export const defaultConfig: RAGConfig = {
     rerankingEnabled: true,
   },
   processing: {
-    maxFileSize: 50 * 1024 * 1024, // 50MB
+    maxFileSize: MAX_FILE_SIZE,
     supportedFileTypes: ['pdf', 'txt', 'md', 'docx', 'json'],
     extractMetadata: true,
     ocrEnabled: false,
@@ -214,8 +216,8 @@ export function loadConfigFromEnv(): Partial<RAGConfig> {
   return {
     openai: {
       apiKey: process.env.OPENAI_API_KEY || '',
-      model: process.env.OPENAI_MODEL || 'gpt-4-turbo-preview',
-      embeddingModel: process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-large',
+      model: process.env.OPENAI_MODEL || CHAT_MODEL,
+      embeddingModel: process.env.OPENAI_EMBEDDING_MODEL || EMBEDDING_MODEL,
       temperature: parseFloat(process.env.OPENAI_TEMPERATURE || '0.7'),
       maxTokens: parseInt(process.env.OPENAI_MAX_TOKENS || '2000'),
       streamingEnabled: process.env.OPENAI_STREAMING !== 'false',
@@ -226,14 +228,14 @@ export function loadConfigFromEnv(): Partial<RAGConfig> {
       collectionName: process.env.VECTOR_COLLECTION_NAME || 'papers',
     },
     chunking: {
-      chunkSize: parseInt(process.env.CHUNK_SIZE || '1000'),
-      chunkOverlap: parseInt(process.env.CHUNK_OVERLAP || '100'),
+      chunkSize: parseInt(process.env.CHUNK_SIZE || String(CHUNK_SIZE)),
+      chunkOverlap: parseInt(process.env.CHUNK_OVERLAP || String(CHUNK_OVERLAP)),
       semanticChunking: process.env.SEMANTIC_CHUNKING === 'true',
       minChunkSize: parseInt(process.env.MIN_CHUNK_SIZE || '200'),
       maxChunkSize: parseInt(process.env.MAX_CHUNK_SIZE || '2000'),
     },
     retrieval: {
-      defaultK: parseInt(process.env.RETRIEVAL_K || '5'),
+      defaultK: parseInt(process.env.RETRIEVAL_K || String(TOP_K_CHUNKS)),
       maxK: parseInt(process.env.RETRIEVAL_MAX_K || '20'),
       scoreThreshold: parseFloat(process.env.RETRIEVAL_SCORE_THRESHOLD || '0.7'),
       searchType: (process.env.RETRIEVAL_SEARCH_TYPE as 'similarity' | 'mmr' | 'hybrid') || 'hybrid',
diff --git a/lib/types/chat.ts b/lib/types/chat.ts
new file mode 100644
index 0000000..66aa9e4
--- /dev/null
+++ b/lib/types/chat.ts
@@ -0,0 +1,27 @@
+export interface ChatMessage {
+  id: string;
+  content: string;
+  role: "user" | "assistant";
+  created_at: string;
+  session_id?: string;
+  metadata?: {
+    is_loading?: boolean;
+    is_system_summary?: boolean;
+    citations?: Array<{
+      page_no: number;
+      score: number;
+    }>;
+  };
+}
+
+export interface ChatSession {
+  id: string;
+  paper_id: string | null;
+  title: string;
+  created_at: string;
+  updated_at: string;
+  user_id: string;
+  paper?: {
+    title: string;
+  };
+}
diff --git a/lib/types/index.ts b/lib/types/index.ts
index e4ccd71..8a2361f 100644
--- a/lib/types/index.ts
+++ b/lib/types/index.ts
@@ -11,12 +11,6 @@ export const SignInSchema = z.object({
   password: z.string().min(1),
 })
 
-export const PaperUploadSchema = z.object({
-  title: z.string().min(1),
-  source: z.enum(['upload', 'url']),
-  url: z.string().url().optional(),
-})
-
 export const ChatMessageSchema = z.object({
   sessionId: z.string().uuid(),
   content: z.string().min(1),
@@ -27,65 +21,8 @@ export const CreateSessionSchema = z.object({
   title: z.string().min(1),
 })
 
-export type SignUpInput = z.infer<typeof SignUpSchema>
-export type SignInInput = z.infer<typeof SignInSchema>
-export type PaperUploadInput = z.infer<typeof PaperUploadSchema>
-export type ChatMessageInput = z.infer<typeof ChatMessageSchema>
-export type CreateSessionInput = z.infer<typeof CreateSessionSchema>
-
-export interface ApiResponse<T = any> {
+export interface ApiResponse<T = unknown> {
   data?: T
   error?: string
   code?: number
 }
-
-export interface PaginationParams {
-  page?: number
-  limit?: number
-}
-
-export interface Paper {
-  id: string
-  userId: string
-  title: string
-  source: string
-  storagePath?: string
-  pageCount: number
-  createdAt: string
-  updatedAt: string
-}
-
-export interface PaperChunk {
-  id: string
-  paperId: string
-  pageNo: number
-  content: string
-  embedding?: number[]
-}
-
-export interface ChatSession {
-  id: string
-  userId: string
-  paperId: string
-  title: string
-  createdAt: string
-  updatedAt: string
-}
-
-export interface ChatMessage {
-  id: string
-  sessionId: string
-  role: 'user' | 'assistant' | 'system'
-  content: string
-  createdAt: string
-  citations?: Citation[]
-}
-
-export interface Citation {
-  id: string
-  messageId: string
-  chunkId: string
-  score: number
-  pageNo: number
-  content?: string
-}
\ No newline at end of file
diff --git a/lib/utils/cache.ts b/lib/utils/cache.ts
deleted file mode 100644
index d77d6d4..0000000
--- a/lib/utils/cache.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// Simple cache for search results
-export class SimpleCache<T> {
-  private cache: Map<string, { data: T; expiresAt: number }> = new Map();
-  private maxSize: number;
-  private ttl: number;
-
-  constructor(maxSize: number = 100, ttl: number = 300000) { // 5 minutes
-    this.maxSize = maxSize;
-    this.ttl = ttl;
-  }
-
-  private generateKey(data: any): string {
-    return typeof data === 'string' ? data : JSON.stringify(data);
-  }
-
-  set(key: string | any, value: T): void {
-    const cacheKey = typeof key === 'string' ? key : this.generateKey(key);
-
-    // If cache is full, remove first entry
-    if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-
-    this.cache.set(cacheKey, {
-      data: value,
-      expiresAt: Date.now() + this.ttl,
-    });
-  }
-
-  get(key: string | any): T | null {
-    const cacheKey = typeof key === 'string' ? key : this.generateKey(key);
-    const entry = this.cache.get(cacheKey);
-
-    if (!entry || Date.now() > entry.expiresAt) {
-      this.cache.delete(cacheKey);
-      return null;
-    }
-
-    return entry.data;
-  }
-
-  clear(): void {
-    this.cache.clear();
-  }
-}
-
-// Simple global cache instances
-export const searchCache = new SimpleCache<any>(50, 300000); // 5 minutes
\ No newline at end of file
diff --git a/lib/validation/index.ts b/lib/validation/index.ts
index 8520cb3..71a4d70 100644
--- a/lib/validation/index.ts
+++ b/lib/validation/index.ts
@@ -1,77 +1,3 @@
-import { z } from 'zod'
-import { NextRequest } from 'next/server'
-import { createRequestLogger } from '@/lib/logger'
-
-const logger = createRequestLogger('Validation')
-
-export class ValidationError extends Error {
-  constructor(public errors: z.ZodError) {
-    super('Validation failed')
-    this.name = 'ValidationError'
-  }
-}
-
-export async function validateRequest<T>(
-  request: NextRequest,
-  schema: z.ZodSchema<T>
-): Promise<T> {
-  try {
-    const body = await request.json()
-    const validated = schema.parse(body)
-    return validated
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      logger.warn({ errors: error.errors }, 'Request validation failed')
-      throw new ValidationError(error)
-    }
-    throw error
-  }
-}
-
-export function validateQuery<T>(
-  searchParams: URLSearchParams,
-  schema: z.ZodSchema<T>
-): T {
-  try {
-    const params = Object.fromEntries(searchParams.entries())
-    const validated = schema.parse(params)
-    return validated
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      logger.warn({ errors: error.errors }, 'Query validation failed')
-      throw new ValidationError(error)
-    }
-    throw error
-  }
-}
-
-export const fileValidation = {
-  pdf: z.object({
-    type: z.literal('application/pdf'),
-    size: z.number().max(50 * 1024 * 1024, 'File size must be less than 50MB'),
-  }),
-  image: z.object({
-    type: z.enum(['image/jpeg', 'image/png', 'image/webp']),
-    size: z.number().max(10 * 1024 * 1024, 'Image size must be less than 10MB'),
-  }),
-}
-
-export const paginationSchema = z.object({
-  page: z.string().regex(/^\d+$/).transform(Number).pipe(z.number().min(1)).default('1'),
-  limit: z.string().regex(/^\d+$/).transform(Number).pipe(z.number().min(1).max(100)).default('20'),
-})
-
-export const uuidSchema = z.string().uuid()
-
-export const emailSchema = z.string().email().toLowerCase()
-
-export const passwordSchema = z.string()
-  .min(8, 'Password must be at least 8 characters')
-  .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
-  .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
-  .regex(/[0-9]/, 'Password must contain at least one number')
-  .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character')
-
 export function sanitizeInput(input: string): string {
   // Remove any potential SQL injection attempts
   const sqlPatterns = /(\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE)\b)/gi
@@ -138,4 +64,4 @@ export class InputSanitizer {
     // Remove any directory traversal attempts
     return path.replace(/\.\./g, '').replace(/[\/\\]/g, '_')
   }
-}
\ No newline at end of file
+}