From 795f28771f4944b5ab3302672d3004b06233b67f Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Fri, 8 Aug 2025 19:58:42 +0530
Subject: [PATCH 01/12] feat: enhance document loading and error handling
 across components

- Introduced LoadingSpinner and ErrorState components for consistent loading and error feedback.
- Updated DocumentDialog, AppSidebar, and various chat components to utilize new loading and error handling mechanisms.
- Improved user experience by providing visual feedback during data fetching and error states.
- Refactored useQuery hooks to include loading and error states for better data management.
---
 src/components/app-sidebar/index.tsx          |  62 +++++++---
 src/components/chat/input/document-list.tsx   |  36 +++++-
 src/components/chat/input/toolbar/index.tsx   |  27 +++-
 .../chat/input/toolbar/projects-dropdown.tsx  |  96 +++++++++------
 src/components/chat/messages/index.tsx        |  35 +++++-
 src/components/chat/messages/user-message.tsx | 100 +++++++++++----
 src/components/chat/panels/mcp/index.tsx      |  34 +++++-
 .../chat/panels/projects/chat-list.tsx        |  28 ++++-
 .../chat/panels/projects/details.tsx          |  32 ++++-
 .../chat/panels/projects/document-list.tsx    |  44 +++++--
 src/components/chat/panels/projects/list.tsx  |  33 ++++-
 src/components/document-dialog.tsx            | 106 ++++++++++++----
 src/components/topnav.tsx                     |  37 ++++--
 src/components/ui/accordion.tsx               |   6 +-
 src/components/ui/error-state.tsx             | 115 ++++++++++++++++++
 src/components/ui/loading-spinner.tsx         |  28 +++++
 src/hooks/chats/use-chats.ts                  |  14 ++-
 src/hooks/chats/use-documents.ts              |   3 +
 src/hooks/chats/use-mcp.ts                    |  10 +-
 src/hooks/chats/use-messages.ts               |  11 +-
 src/hooks/chats/use-stream.ts                 |  14 ++-
 src/routes/__root.tsx                         |  58 +++++----
 src/routes/auth.tsx                           |   4 +-
 src/routes/chat.$chatId.lazy.tsx              |  25 +++-
 src/routes/settings/apiKeys.tsx               |  34 +++---
 src/routes/settings/profile.tsx               |  27 +++-
 temp.md                                       |  40 +++---
 27 files changed, 865 insertions(+), 194 deletions(-)
 create mode 100644 src/components/ui/error-state.tsx
 create mode 100644 src/components/ui/loading-spinner.tsx

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
index c27f0c19..d066cf8b 100644
--- a/src/components/app-sidebar/index.tsx
+++ b/src/components/app-sidebar/index.tsx
@@ -8,11 +8,20 @@ import {
   SidebarGroupContent,
 } from "@/components/ui/sidebar";
 import { useNavigate } from "@tanstack/react-router";
-import { SearchIcon, XIcon, PlusIcon, FolderIcon } from "lucide-react";
+import {
+  SearchIcon,
+  XIcon,
+  PlusIcon,
+  FolderIcon,
+  PinIcon,
+  HistoryIcon,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ChatItem } from "@/components/app-sidebar/chat-item";
 import { useInfiniteChats, useSearchChats } from "@/hooks/chats/use-chats";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import type { Doc } from "../../../convex/_generated/dataModel";
 import {
   Accordion,
@@ -26,7 +35,14 @@ import { useAtom } from "jotai";
 export function AppSidebar() {
   const navigate = useNavigate();
   const { pinnedChats, historyChats, status, loadMore } = useInfiniteChats();
-  const { searchQuery, setSearchQuery, searchResults } = useSearchChats();
+  const {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    isSearching,
+    isLoadingSearch,
+    isSearchError,
+  } = useSearchChats();
   const loadMoreRef = React.useRef<HTMLButtonElement>(null);
   const [pinnedChatsAccordionOpen, setPinnedChatsAccordionOpen] = useAtom(
     pinnedChatsAccordionOpenAtom
@@ -82,7 +98,6 @@ export function AppSidebar() {
   }, [loadMore, status]);
 
   // Determine whether to show search results or regular chat lists
-  const isSearching = searchQuery.trim().length > 0;
   const searchPinnedChats = isSearching
     ? searchResults.filter((chat) => chat.pinned)
     : [];
@@ -98,7 +113,7 @@ export function AppSidebar() {
       <SidebarHeader className="flex items-center w-full font-bold font-mono text-xl py-3.5 px-2">
         0bs
       </SidebarHeader>
-      <SidebarContent className="overflow-hidden px-1">
+      <SidebarContent className="overflow-hidden px-1.5 gap-0">
         <SidebarGroup className="gap-2">
           <Button className="w-full cursor-pointer" onClick={handleNewChat}>
             <div className="flex items-center gap-2">
@@ -118,7 +133,7 @@ export function AppSidebar() {
             </div>
           </Button>
 
-          <div className="flex items-center border-b border-border gap-2">
+          <div className="flex items-center gap-2 py-1.5 border-b border-border">
             <span className="flex items-center justify-center">
               <SearchIcon className="w-4 h-4 text-muted-foreground" />
             </span>
@@ -151,7 +166,7 @@ export function AppSidebar() {
         </SidebarGroup>
 
         {displayPinnedChats.length > 0 && (
-          <SidebarGroup>
+          <SidebarGroup className="p-0">
             <Accordion
               type="single"
               collapsible
@@ -162,12 +177,15 @@ export function AppSidebar() {
                 setPinnedChatsAccordionOpen(value === "pinned");
               }}
             >
-              <AccordionItem value="pinned">
+              <AccordionItem value="pinned" className="border-none py-1">
                 <div className="flex justify-between items-center w-full">
-                  <SidebarGroupLabel>Pinned</SidebarGroupLabel>
-                  <AccordionTrigger className=" cursor-pointer" />
+                  <SidebarGroupLabel>
+                    <PinIcon className="w-4 h-4 mr-2" />
+                    Pinned
+                  </SidebarGroupLabel>
+                  <AccordionTrigger className="cursor-pointer p-0" />
                 </div>
-                <AccordionContent>
+                <AccordionContent className="px-2">
                   <SidebarGroupContent>
                     <div className="flex flex-col">
                       {displayPinnedChats.map((chat) => renderChatItem(chat))}
@@ -179,13 +197,27 @@ export function AppSidebar() {
           </SidebarGroup>
         )}
 
-        <SidebarGroup className="flex-1 min-h-0">
+        <SidebarGroup className="flex-1 min-h-0 p-0">
           <SidebarGroupContent className="h-full flex flex-col">
-            <SidebarGroupLabel>
-              {isSearching ? "Search Results" : "History"}
+            <SidebarGroupLabel className="flex items-center">
+              {!isSearching && <HistoryIcon className="w-4 h-4 mr-2" />}
+              {isSearching ? "Search Results" : "Previous Chats"}
             </SidebarGroupLabel>
             <div className="flex-1 overflow-y-auto scrollbar-none">
-              <div className="flex flex-col">
+              <div className="flex flex-col px-2">
+                {isSearching && isLoadingSearch && (
+                  <div className="flex items-center justify-center py-2">
+                    <LoadingSpinner
+                      sizeClassName="h-4 w-4"
+                      label="Searching chats..."
+                    />
+                  </div>
+                )}
+                {isSearching && isSearchError && (
+                  <div className="py-2">
+                    <ErrorState title="Unable to search chats" />
+                  </div>
+                )}
                 {displayHistoryChats.map((chat) => renderChatItem(chat))}
                 {!isSearching && status === "CanLoadMore" && (
                   <Button
@@ -197,7 +229,7 @@ export function AppSidebar() {
                     Load More
                   </Button>
                 )}
-                {displayHistoryChats.length === 0 && (
+                {displayHistoryChats.length === 0 && !isSearching && (
                   <div className="text-sm text-muted-foreground text-center py-2">
                     {isSearching
                       ? "No matching chats found"
diff --git a/src/components/chat/input/document-list.tsx b/src/components/chat/input/document-list.tsx
index 56cb02a4..ce30b21a 100644
--- a/src/components/chat/input/document-list.tsx
+++ b/src/components/chat/input/document-list.tsx
@@ -4,6 +4,8 @@ import { convexQuery } from "@convex-dev/react-query";
 import { api } from "../../../../convex/_generated/api";
 import type { Id, Doc } from "../../../../convex/_generated/dataModel";
 import { XIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { documentDialogOpenAtom } from "@/store/chatStore";
@@ -74,10 +76,16 @@ export const DocumentList = ({
   documentIds?: Id<"documents">[];
   model: string;
 }) => {
-  const { data: documents } = useQuery({
+  const {
+    data: documents,
+    isLoading: isLoadingDocuments,
+    isError: isDocumentsError,
+    error: documentsError,
+  } = useQuery({
     ...convexQuery(api.documents.queries.getMultiple, { documentIds }),
   });
   const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
+
   const removeDocument = useRemoveDocument();
 
   const handlePreview = useCallback(
@@ -99,6 +107,32 @@ export const DocumentList = ({
   const selectedModel = models.find((m) => m.model_name === model);
   const modalities = selectedModel?.modalities;
 
+  if (!documents?.length) return null;
+
+  if (isLoadingDocuments) {
+    return (
+      <div className="flex items-center justify-start p-2">
+        <div className="text-sm text-muted-foreground flex items-center gap-2">
+          <LoadingSpinner sizeClassName="h-4 w-4" />
+          Loading attached documents...
+        </div>
+      </div>
+    );
+  }
+
+  if (isDocumentsError || documentsError) {
+    return (
+      <div className="flex items-center justify-start p-2">
+        <ErrorState
+          title="Error loading documents"
+          showDescription={false}
+          className="p-2"
+          density="compact"
+        />
+      </div>
+    );
+  }
+
   return (
     <ScrollArea className="max-h-24 w-full px-1 pt-1 whitespace-nowrap">
       <div id="chatInputDocumentList" className="flex gap-1">
diff --git a/src/components/chat/input/toolbar/index.tsx b/src/components/chat/input/toolbar/index.tsx
index 58f1f125..46853ca3 100644
--- a/src/components/chat/input/toolbar/index.tsx
+++ b/src/components/chat/input/toolbar/index.tsx
@@ -53,6 +53,8 @@ import {
 } from "@/lib/motion";
 import { ModelPopover } from "./model-popover";
 import { useRouter } from "@tanstack/react-router";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 
 // Toggle registry for DRY logic
 const TOGGLES = [
@@ -114,7 +116,11 @@ export const ToolBar = () => {
   const setSelectedPanelTab = useSetAtom(selectedPanelTabAtom);
 
   // Get project details if chat has a project
-  const { data: project } = useQuery({
+  const {
+    data: project,
+    isLoading: isLoadingProject,
+    isError: isProjectError,
+  } = useQuery({
     ...convexQuery(
       api.projects.queries.get,
       chat.projectId ? { projectId: chat.projectId } : "skip"
@@ -300,13 +306,28 @@ export const ToolBar = () => {
               {toggle.icon}
             </motion.span>
             {/* X icon: visible only on hover, fully replaces toggle icon */}
-            <span className="absolute inset-0 flex items-center justify-center hidden group-hover:flex">
+            <span className="absolute inset-0 items-center justify-center hidden group-hover:flex">
               <XIcon className="w-4 h-4 text-destructive" />
             </span>
           </Button>
         ))}
         {/* Render project name with X button on hover */}
-        {project && (
+        {isLoadingProject && (
+          <Button variant="outline" className="justify-between px-2" disabled>
+            <span className="flex items-center gap-1 text-muted-foreground">
+              <LoadingSpinner sizeClassName="h-3 w-3" />
+              Loading project...
+            </span>
+          </Button>
+        )}
+        {isProjectError && (
+          <ErrorState
+            density="compact"
+            title="Failed to load project"
+            className="h-9"
+          />
+        )}
+        {project && !isLoadingProject && !isProjectError && (
           <Button
             variant="outline"
             className="group justify-between px-2"
diff --git a/src/components/chat/input/toolbar/projects-dropdown.tsx b/src/components/chat/input/toolbar/projects-dropdown.tsx
index 5071f228..3f2c0f38 100644
--- a/src/components/chat/input/toolbar/projects-dropdown.tsx
+++ b/src/components/chat/input/toolbar/projects-dropdown.tsx
@@ -9,6 +9,8 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
 import { api } from "../../../../../convex/_generated/api";
 import { FoldersIcon, PlusIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import {
   createProjectDialogOpenAtom,
   newChatAtom,
@@ -27,7 +29,12 @@ export const ProjectsDropdown = ({
   onCloseDropdown,
 }: ProjectsDropdownProps) => {
   const chatId = useAtomValue(chatIdAtom);
-  const { data: projects, isFetching: isFetchingProjects } = useQuery({
+  const {
+    data: projects,
+    isLoading: isLoadingProjects,
+    isError: isProjectsError,
+    error: projectsError,
+  } = useQuery({
     ...convexQuery(api.projects.queries.getAll, {
       paginationOpts: { numItems: 3, cursor: null },
     }),
@@ -49,39 +56,60 @@ export const ProjectsDropdown = ({
         </div>
       </DropdownMenuSubTrigger>
       <DropdownMenuSubContent className="ml-2">
-        {projects?.page.slice(0, 3).map((project) => (
-          <DropdownMenuItem
-            key={project._id}
-            onSelect={() => {
-              if (chatId === "new") {
-                setNewChat((prev) => ({ ...prev, projectId: project._id }));
-              } else {
-                updateChatMutation({
-                  chatId,
-                  updates: {
-                    projectId: project._id,
-                  },
-                });
-              }
-              onCloseDropdown();
-              setResizePanelOpen(true);
-              setSelectedPanelTab("projects");
-            }}
-          >
-            {isFetchingProjects ? <div>Fetching...</div> : project.name}
-          </DropdownMenuItem>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onSelect={(e) => {
-            e.preventDefault();
-            onCloseDropdown();
-            setProjectDialogOpen(true);
-          }}
-        >
-          <PlusIcon className="w-4 h-4" />
-          Add New Project
-        </DropdownMenuItem>
+        {isProjectsError ? (
+          <ErrorState error={projectsError} />
+        ) : (
+          <>
+            {isLoadingProjects ? (
+              <DropdownMenuItem>
+                <LoadingSpinner
+                  className="h-4 w-4"
+                  label="Loading projects..."
+                />
+                <span className="text-muted-foreground">
+                  Loading projects...
+                </span>
+              </DropdownMenuItem>
+            ) : (
+              projects?.page?.slice(0, 3).map((project: any) => (
+                <DropdownMenuItem
+                  key={project._id}
+                  onSelect={() => {
+                    if (chatId === "new") {
+                      setNewChat((prev) => ({
+                        ...prev,
+                        projectId: project._id,
+                      }));
+                    } else {
+                      updateChatMutation({
+                        chatId,
+                        updates: {
+                          projectId: project._id,
+                        },
+                      });
+                    }
+                    onCloseDropdown();
+                    setResizePanelOpen(true);
+                    setSelectedPanelTab("projects");
+                  }}
+                >
+                  {project.name}
+                </DropdownMenuItem>
+              ))
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(e) => {
+                e.preventDefault();
+                onCloseDropdown();
+                setProjectDialogOpen(true);
+              }}
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add New Project
+            </DropdownMenuItem>
+          </>
+        )}
       </DropdownMenuSubContent>
     </DropdownMenuSub>
   );
diff --git a/src/components/chat/messages/index.tsx b/src/components/chat/messages/index.tsx
index fdf1cd5d..249cc549 100644
--- a/src/components/chat/messages/index.tsx
+++ b/src/components/chat/messages/index.tsx
@@ -1,4 +1,5 @@
 import { useMessages } from "../../../hooks/chats/use-messages";
+import { ErrorState } from "@/components/ui/error-state";
 import { useMemo } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { MessagesList } from "./messages";
@@ -7,10 +8,12 @@ import { TriangleAlertIcon } from "lucide-react";
 import type { Id } from "../../../../convex/_generated/dataModel";
 import { streamStatusAtom, userLoadableAtom } from "@/store/chatStore";
 import { useAtomValue } from "jotai";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 
 export const ChatMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
   const userLoadable = useAtomValue(userLoadableAtom);
-  const { isLoading, isEmpty } = useMessages({ chatId });
+  const { isLoading, isEmpty, isError, error, isStreamError, streamError } =
+    useMessages({ chatId });
 
   const streamStatus = useAtomValue(streamStatusAtom);
 
@@ -38,11 +41,41 @@ export const ChatMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
     if (isLoading) {
       return (
         <div className="flex items-center justify-center h-full">
+          <LoadingSpinner />
           <div className="text-muted-foreground">Loading messages...</div>
         </div>
       );
     }
 
+    if (isError || error) {
+      return (
+        <div className="flex items-center justify-center w-full h-full">
+          <ErrorState
+            className="max-w-4xl"
+            title="Failed to load messages"
+            error={error}
+            description="Please try again later."
+            density="comfy"
+          />
+        </div>
+      );
+    }
+
+    if (isStreamError || streamError) {
+      return (
+        <div className="flex items-center justify-center w-full h-full">
+          <ErrorState
+            className="max-w-4xl"
+            density="comfy"
+            description="Unable to load messages, this might be due to either a network issue or a server error."
+            title="Error loading messages"
+            error={streamError}
+            showIcon={false}
+          />
+        </div>
+      );
+    }
+
     if (isEmpty) {
       return (
         <div className="flex items-center justify-center h-full">
diff --git a/src/components/chat/messages/user-message.tsx b/src/components/chat/messages/user-message.tsx
index ac954a13..e9453c98 100644
--- a/src/components/chat/messages/user-message.tsx
+++ b/src/components/chat/messages/user-message.tsx
@@ -6,6 +6,8 @@ import type {
   MessageGroup,
 } from "../../../../convex/chatMessages/helpers";
 import { Button } from "@/components/ui/button";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { documentDialogOpenAtom } from "@/store/chatStore";
 import { useSetAtom } from "jotai";
 import { api } from "../../../../convex/_generated/api";
@@ -27,15 +29,44 @@ const DocumentButton = ({
   fileId: string;
   setDocumentDialogOpen: (id: Id<"documents"> | undefined) => void;
 }) => {
-  const { data: documentData } = useQuery({
+  const {
+    data: documentData,
+    isLoading: isLoadingDocument,
+    isError: isDocumentError,
+    error: documentError,
+  } = useQuery({
     ...convexQuery(api.documents.queries.get, {
       documentId: fileId as Id<"documents">,
     }),
   });
 
+  if (isLoadingDocument) {
+    return (
+      <div className="py-2 text-xs text-muted-foreground flex items-center gap-2">
+        <LoadingSpinner
+          sizeClassName="h-4 w-4"
+          label="Fetching attached documents"
+        />
+      </div>
+    );
+  }
+
+  if (isDocumentError || documentError) {
+    return (
+      <div className="py-2 max-w-xs">
+        <ErrorState
+          density="compact"
+          title="error loading attached documents"
+          error={documentError}
+          showDescription={false}
+        />
+      </div>
+    );
+  }
+
   return (
     <Button
-      className="py-7 cursor-pointer"
+      className="py-6 cursor-pointer"
       onClick={() => setDocumentDialogOpen(fileId as Id<"documents">)}
     >
       {documentData?.name}
@@ -51,7 +82,12 @@ const EditingDocumentList = ({
   documentIds: Id<"documents">[];
   onRemove: (documentId: Id<"documents">) => void;
 }) => {
-  const { data: documents } = useQuery({
+  const {
+    data: documents,
+    isLoading: isLoadingDocuments,
+    isError: isDocumentsError,
+    error: documentsError,
+  } = useQuery({
     ...convexQuery(api.documents.queries.getMultiple, { documentIds }),
   });
   const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
@@ -63,6 +99,22 @@ const EditingDocumentList = ({
     [setDocumentDialogOpen]
   );
 
+  if (isLoadingDocuments) {
+    return (
+      <div className="px-2 py-1 text-xs text-muted-foreground flex items-center gap-2">
+        <LoadingSpinner sizeClassName="h-3 w-3" /> Loading…
+      </div>
+    );
+  }
+
+  if (isDocumentsError) {
+    return (
+      <div className="px-2 py-1">
+        <ErrorState title="Failed to load documents" error={documentsError} />
+      </div>
+    );
+  }
+
   if (!documents?.length) return null;
 
   const selectedModel = models.find((m) => m.model_name === "gpt-4");
@@ -80,23 +132,29 @@ const EditingDocumentList = ({
           return (
             <Badge
               key={doc._id}
-              variant="secondary"
-              className="flex items-center gap-1.5 pr-1 cursor-pointer"
+              variant="default"
+              className="group/document flex gap-1.5 py-1 cursor-pointer bg-accent/65 hover:bg-accent/100 hover:text-accent-foreground text-accent-foreground/90 rounded-md transition duration-300 items-center justify-center"
               onClick={() => handlePreview(doc._id)}
             >
-              <Icon className={`${IconClassName} h-3 w-3`} />
-              <span className="max-w-32 truncate">{doc.name}</span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-4 w-4 p-0.5 hover:bg-muted-foreground/20"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRemove(doc._id);
-                }}
-              >
-                <XIcon className="w-3 h-3" />
-              </Button>
+              <div className="relative h-4 w-4">
+                <Icon
+                  className={`${IconClassName} h-4 w-4 group-hover/document:opacity-0 transition duration-300`}
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute inset-0 h-4 w-4 opacity-0 group-hover/document:opacity-100 hover:bg-muted-foreground/20 cursor-pointer transition duration-300"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemove(doc._id);
+                  }}
+                >
+                  <XIcon className="w-3 h-3" />
+                </Button>
+              </div>
+              <span className="max-w-32 truncate text-xs cursor-pointer">
+                {doc.name}
+              </span>
             </Badge>
           );
         })}
@@ -193,7 +251,7 @@ export const UserMessage = memo(
     }, [content, item.message._id, setDocumentDialogOpen]);
 
     return (
-      <div className="group flex flex-col gap-1 max-w-[80%] self-end">
+      <div className="group/message    flex flex-col gap-1 max-w-[80%] self-end">
         {isEditing ? (
           <div className="bg-card max-w-full self-end rounded-md shadow-sm w-full p-2 border-2 border-transparent">
             <AutosizeTextarea
@@ -201,7 +259,7 @@ export const UserMessage = memo(
               onChange={(e) => setEditedText(e.target.value)}
               minHeight={32}
               maxHeight={120}
-              className="bg-transparent resize-none border-none min-w-96 max-w-full ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 outline-none focus-visible:outline-none text-base"
+              className="bg-transparent resize-none border-none min-w-[100vw] max-w-full ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 outline-none focus-visible:outline-none text-base"
               autoFocus
               placeholder="Edit your message..."
             />
@@ -221,7 +279,7 @@ export const UserMessage = memo(
             {renderedContent}
           </ScrollArea>
         )}
-        <div className="opacity-0 flex gap-2 group-hover:opacity-100 transition-opacity">
+        <div className="opacity-0 flex gap-2 group-hover/message:opacity-100 transition-opacity">
           <UserUtilsBar
             input={item}
             isEditing={isEditing}
diff --git a/src/components/chat/panels/mcp/index.tsx b/src/components/chat/panels/mcp/index.tsx
index 6da15667..fc9dfff2 100644
--- a/src/components/chat/panels/mcp/index.tsx
+++ b/src/components/chat/panels/mcp/index.tsx
@@ -1,9 +1,19 @@
 import { MCPCard } from "./mcp-card";
 import { useMCPs } from "@/hooks/chats/use-mcp";
+import { ErrorState } from "@/components/ui/error-state";
 import { MCPDialog } from "./mcp-dialog";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 
 export const MCPPanel = () => {
-  const { getAllMCPs, toggleMCP, handleDelete, restartMCP } = useMCPs();
+  const {
+    getAllMCPs,
+    toggleMCP,
+    handleDelete,
+    restartMCP,
+    isLoading,
+    isError,
+    error,
+  } = useMCPs();
 
   const mcps = getAllMCPs();
 
@@ -17,7 +27,27 @@ export const MCPPanel = () => {
       </div>
 
       <div className="grid gap-2">
-        {mcps?.page.map((mcp) => (
+        {isLoading && (
+          <div className="flex items-center justify-center py-2">
+            <LoadingSpinner sizeClassName="h-4 w-4" label="Loading MCPs..." />
+          </div>
+        )}
+        {isError ||
+          (error && (
+            <div className="py-2">
+              <ErrorState
+                density="comfy"
+                title="Failed to load MCPs"
+                error={error}
+              />
+            </div>
+          ))}
+        {mcps?.page?.length === 0 && mcps && !isLoading && !isError && (
+          <div className=" items-center justify-center flex py-2 w-full text-muted-foreground">
+            <div> Currently no MCPs are running. </div>
+          </div>
+        )}
+        {mcps?.page?.map((mcp) => (
           <MCPCard
             key={mcp._id}
             mcp={mcp}
diff --git a/src/components/chat/panels/projects/chat-list.tsx b/src/components/chat/panels/projects/chat-list.tsx
index c0639570..1de3ae0e 100644
--- a/src/components/chat/panels/projects/chat-list.tsx
+++ b/src/components/chat/panels/projects/chat-list.tsx
@@ -5,6 +5,8 @@ import { api } from "../../../../../convex/_generated/api";
 import type { Id } from "../../../../../convex/_generated/dataModel";
 import { useNavigate } from "@tanstack/react-router";
 import { MessageSquareIcon, ClockIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { formatDistanceToNow } from "date-fns";
 
 interface ProjectChatListProps {
@@ -13,10 +15,34 @@ interface ProjectChatListProps {
 
 export const ProjectChatList = ({ projectId }: ProjectChatListProps) => {
   const navigate = useNavigate();
-  const { data: chats } = useQuery({
+  const {
+    data: chats,
+    isLoading: isLoadingChats,
+    isError: isChatsError,
+    error: chatsError,
+  } = useQuery({
     ...convexQuery(api.chats.queries.getByProjectId, { projectId }),
   });
 
+  if (isLoadingChats) {
+    return (
+      <div className="flex items-center justify-center py-10">
+        <LoadingSpinner className="h-6 w-6" label="Loading project chats..." />
+      </div>
+    );
+  }
+
+  if (isChatsError || chatsError) {
+    return (
+      <div className="flex items-center justify-center gap-2 py-4 ">
+        <ErrorState
+          className="h-12 w-full p-2 gap-2 flex items-center justify-center"
+          title="Error loading project chats"
+        />
+      </div>
+    );
+  }
+
   if (!chats || chats.length === 0) {
     return (
       <Card className="p-4">
diff --git a/src/components/chat/panels/projects/details.tsx b/src/components/chat/panels/projects/details.tsx
index 8c762c30..dae86051 100644
--- a/src/components/chat/panels/projects/details.tsx
+++ b/src/components/chat/panels/projects/details.tsx
@@ -3,6 +3,8 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
 import { api } from "../../../../../convex/_generated/api";
 import { XIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { Button } from "@/components/ui/button";
 import { AutosizeTextarea } from "@/components/ui/autosize-textarea";
 import { useDebouncedCallback } from "use-debounce";
@@ -19,7 +21,12 @@ export const ProjectDetails = ({ projectId }: ProjectDetailsProps) => {
   const chatId = useAtomValue(chatIdAtom);
   const navigate = useNavigate();
   const router = useRouter();
-  const { data: project } = useQuery({
+  const {
+    data: project,
+    isLoading: isLoadingProject,
+    isError: isProjectError,
+    error: projectError,
+  } = useQuery({
     ...convexQuery(
       api.projects.queries.get,
       projectId ? { projectId } : "skip"
@@ -42,6 +49,29 @@ export const ProjectDetails = ({ projectId }: ProjectDetailsProps) => {
     });
   }, 1000);
 
+  if (isLoadingProject) {
+    return (
+      <div className="flex flex-1 items-center justify-center py-8">
+        <LoadingSpinner
+          className="h-6 w-6"
+          label="Loading project details..."
+        />
+      </div>
+    );
+  }
+
+  if (isProjectError || projectError) {
+    return (
+      <div className=" ">
+        <ErrorState
+          className="h-full py-2.5"
+          title="Error loading project details"
+          error={projectError}
+        />
+      </div>
+    );
+  }
+
   if (!project) return null;
 
   return (
diff --git a/src/components/chat/panels/projects/document-list.tsx b/src/components/chat/panels/projects/document-list.tsx
index 4202b95f..ec75fcc0 100644
--- a/src/components/chat/panels/projects/document-list.tsx
+++ b/src/components/chat/panels/projects/document-list.tsx
@@ -5,13 +5,20 @@ import { api } from "../../../../../convex/_generated/api";
 import type { Id } from "../../../../../convex/_generated/dataModel";
 import { ProjectDocumentListItem } from "./document-list-item";
 import { Toggle } from "@/components/ui/toggle";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 
 export function ProjectDocumentList({
   projectId,
 }: {
   projectId: Id<"projects">;
 }) {
-  const { data: projectDocuments } = useQuery({
+  const {
+    data: projectDocuments,
+    isLoading: isLoadingProjectDocs,
+    isError: isProjectDocumentsError,
+    error: projectDocumentsError,
+  } = useQuery({
     ...convexQuery(
       api.projectDocuments.queries.getAll,
       projectId
@@ -22,6 +29,7 @@ export function ProjectDocumentList({
         : "skip"
     ),
   });
+
   const { mutate: toggleSelectAll, isPending: isTogglingSelectAll } =
     useMutation({
       mutationFn: useConvexMutation(
@@ -30,7 +38,7 @@ export function ProjectDocumentList({
     });
 
   const handleSelectAll = async (checked: boolean) => {
-    await toggleSelectAll({
+    toggleSelectAll({
       projectId,
       selected: checked,
     });
@@ -57,7 +65,7 @@ export function ProjectDocumentList({
           <Toggle
             pressed={allSelected}
             onPressedChange={(pressed) => handleSelectAll(pressed)}
-            disabled={isTogglingSelectAll}
+            disabled={isTogglingSelectAll || isLoadingProjectDocs}
             className="w-36 gap-2 cursor-pointer rounded-lg flex items-center justify-center"
             variant={allSelected ? "default" : "outline"}
           >
@@ -84,12 +92,30 @@ export function ProjectDocumentList({
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        {projectDocuments.projectDocuments.map((projectDocument) => (
-          <ProjectDocumentListItem
-            key={projectDocument._id}
-            projectDocument={projectDocument}
-          />
-        ))}
+        {isLoadingProjectDocs ? (
+          <div className="flex items-center justify-center gap-2 py-4 ">
+            <LoadingSpinner className="h-6 w-6" />
+            <p className="text-sm text-muted-foreground">
+              Loading project documents...
+            </p>
+          </div>
+        ) : isProjectDocumentsError || projectDocumentsError ? (
+          <div className="flex items-center justify-center gap-2  ">
+            <ErrorState
+              className="h-12 w-full p-2 gap-2 flex items-center justify-center"
+              title="Error loading project documents"
+              error={projectDocumentsError}
+              showDescription={false}
+            />
+          </div>
+        ) : (
+          projectDocuments.projectDocuments.map((projectDocument) => (
+            <ProjectDocumentListItem
+              key={projectDocument._id}
+              projectDocument={projectDocument}
+            />
+          ))
+        )}
       </div>
     </div>
   );
diff --git a/src/components/chat/panels/projects/list.tsx b/src/components/chat/panels/projects/list.tsx
index 704075ab..de65e040 100644
--- a/src/components/chat/panels/projects/list.tsx
+++ b/src/components/chat/panels/projects/list.tsx
@@ -2,6 +2,8 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { PlusIcon, TrashIcon } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
 import { api } from "../../../../../convex/_generated/api";
@@ -16,7 +18,12 @@ export const ProjectsList = () => {
   const chatId = useAtomValue(chatIdAtom);
   const navigate = useNavigate();
   const router = useRouter();
-  const { data: allProjects } = useQuery({
+  const {
+    data: allProjects,
+    isLoading: isLoadingProjects,
+    isError: isProjectsError,
+    error: projectsError,
+  } = useQuery({
     ...convexQuery(api.projects.queries.getAll, {
       paginationOpts: { numItems: 20, cursor: null },
     }),
@@ -34,6 +41,30 @@ export const ProjectsList = () => {
 
   const isOnProjectsRoute = useLocation().pathname === "/projects";
 
+  if (isLoadingProjects) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <div className="text-sm text-muted-foreground flex items-center gap-2">
+          <LoadingSpinner sizeClassName="h-4 w-4" />
+          Loading projects...
+        </div>
+      </div>
+    );
+  }
+
+  if (isProjectsError || projectsError) {
+    return (
+      <div className="flex items-center justify-center">
+        <ErrorState
+          className="h-10 w-full p-2 gap-2 flex items-center justify-center"
+          title="Error loading projects"
+          error={projectsError}
+          showDescription={false}
+        />
+      </div>
+    );
+  }
+
   return (
     <>
       <div
diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index 0dc01031..db516073 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -9,6 +9,8 @@ import { api } from "../../convex/_generated/api";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
 import { Button } from "@/components/ui/button";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { getDocTagInfo } from "@/lib/helper";
 import { formatBytes } from "@/lib/utils";
 import { useState, useEffect } from "react";
@@ -19,7 +21,12 @@ export const DocumentDialog = () => {
   const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  const { data: document } = useQuery({
+  const {
+    data: document,
+    isLoading: isLoadingDocument,
+    isError: isDocumentError,
+    error: documentError,
+  } = useQuery({
     ...convexQuery(
       api.documents.queries.get,
       documentDialogOpen ? { documentId: documentDialogOpen } : "skip"
@@ -44,37 +51,40 @@ export const DocumentDialog = () => {
     setPreviewUrl(null);
     const loadPreviewUrl = async () => {
       if (!document) return;
-      switch (tag) {
-        case "image":
-        case "pdf":
-        case "file": {
-          // Only files need download URL
-          const url = await generateDownloadUrl({
-            documentId: document._id!,
-          });
-          setPreviewUrl(url);
-          break;
-        }
-        case "url":
-        case "site": {
-          setPreviewUrl(document.key as string);
-          break;
-        }
-        case "youtube": {
-          setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
-          break;
-        }
-        default:
-          if (["file", "text", "github"].includes(document.type)) {
+      try {
+        switch (tag) {
+          case "image":
+          case "pdf":
+          case "file": {
             const url = await generateDownloadUrl({
               documentId: document._id!,
             });
             setPreviewUrl(url);
             break;
-          } else {
+          }
+          case "url":
+          case "site": {
             setPreviewUrl(document.key as string);
+            break;
+          }
+          case "youtube": {
+            setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
+            break;
           }
-          break;
+          default:
+            if (["file", "text", "github"].includes(document.type)) {
+              const url = await generateDownloadUrl({
+                documentId: document._id!,
+              });
+              setPreviewUrl(url);
+              break;
+            } else {
+              setPreviewUrl(document.key as string);
+            }
+            break;
+        }
+      } catch (e) {
+        setPreviewUrl(null);
       }
     };
     loadPreviewUrl();
@@ -85,6 +95,42 @@ export const DocumentDialog = () => {
     return null;
   }
 
+  if (isLoadingDocument) {
+    return (
+      <Dialog
+        open={!!documentDialogOpen}
+        onOpenChange={() => setDocumentDialogOpen(undefined)}
+      >
+        <DialogContent className="sm:max-w-[800px] h-[80vh] flex items-center justify-center gap-4">
+          <LoadingSpinner className="h-8 w-8" />
+          <div className="text-muted-foreground text-lg">
+            Loading document...
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  if (isDocumentError || documentError) {
+    return (
+      <Dialog
+        open={!!documentDialogOpen}
+        onOpenChange={() => setDocumentDialogOpen(undefined)}
+      >
+        <DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col items-center justify-center gap-4">
+          <div className="flex flex-col items-center justify-center gap-4 w-full">
+            <ErrorState
+              title="Failed to load document"
+              error={documentError}
+              description="Please try again later."
+              density="comfy"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   const handleDownload = async () => {
     if (!document || tag !== "file") return;
     const url = await generateDownloadUrl({
@@ -131,6 +177,16 @@ export const DocumentDialog = () => {
             )}
           </div>
 
+          {isDocumentError ||
+            (documentError && (
+              <div className="flex items-center justify-center text-muted-foreground h-full">
+                <ErrorState
+                  density="comfy"
+                  title="Unable to preview document"
+                  error={documentError}
+                />
+              </div>
+            ))}
           {previewUrl && (
             <div className="flex-grow relative min-h-0 bg-muted rounded-md border overflow-hidden">
               {(() => {
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 2768a2ef..0f994662 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -10,11 +10,17 @@ import { PanelRightCloseIcon, PlusIcon, Settings2Icon } from "lucide-react";
 import { PanelRightOpenIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
+import {
+  Navigate,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { convexQuery } from "@convex-dev/react-query";
 import { api } from "../../convex/_generated/api";
 import { useEffect } from "react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 
 export function TopNav() {
   const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);
@@ -25,10 +31,18 @@ export function TopNav() {
   const setUser = useSetAtom(userAtom);
   const location = useLocation();
 
-  const { data: user } = useQuery({
+  const {
+    data: user,
+    isError: isErrorUser,
+    isLoading: isLoadingUser,
+  } = useQuery({
     ...convexQuery(api.auth.getUser, {}),
   });
 
+  if (isErrorUser) {
+    return <Navigate to="/auth" />;
+  }
+
   useEffect(() => {
     if (user) {
       setUser(user);
@@ -40,14 +54,17 @@ export function TopNav() {
   const isOnChatRoute = !!params.chatId;
   const isSettingsRoute = location.pathname.startsWith("/settings");
 
-  // Global shortcut for toggling resizable panel (Ctrl/Cmd+I)
+  // Minimal global shortcut for toggling resizable panel (Ctrl/Cmd+I)
   useEffect(() => {
     if (!isOnChatRoute) return;
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === "i" &&
-        (event.metaKey || event.ctrlKey)
-      ) {
+      const tag = (event.target as HTMLElement)?.tagName;
+      const isEditable =
+        tag === "INPUT" ||
+        tag === "TEXTAREA" ||
+        (event.target as HTMLElement)?.isContentEditable;
+      if (isEditable) return;
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "i") {
         event.preventDefault();
         setResizePanelOpen((open) => {
           if (!open) setSelectedArtifact(undefined);
@@ -55,7 +72,6 @@ export function TopNav() {
         });
       }
     };
-
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
@@ -82,6 +98,11 @@ export function TopNav() {
       <div
         className={`flex items-center gap-1 justify-center top-0 right-0 p-0.5 pointer-events-auto  rounded-lg ${resizePanelOpen ? "border border-transparent translate-y-[.05rem]" : "border-border/80 dark:border-border/40 border bg-accent/25 dark:bg-accent/35"} `}
       >
+        {isLoadingUser && (
+          <div className="px-2">
+            <LoadingSpinner sizeClassName="h-3 w-3" />
+          </div>
+        )}
         {!resizePanelOpen ? (
           <Button
             variant="ghost"
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index a213e502..23d427d1 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -109,9 +109,11 @@ interface AccordionTriggerProps {
   className?: string;
   children?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  showIcon?: boolean;
 }
 
 function AccordionTrigger({
+  showIcon = true,
   className,
   children,
   onClick,
@@ -148,7 +150,9 @@ function AccordionTrigger({
           transition={{ duration: 0.25 }}
           className="items-center flex justify-center "
         >
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+          {showIcon && (
+            <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+          )}
         </motion.div>
         {children}
       </motion.button>
diff --git a/src/components/ui/error-state.tsx b/src/components/ui/error-state.tsx
new file mode 100644
index 00000000..3eb82199
--- /dev/null
+++ b/src/components/ui/error-state.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircleIcon } from "lucide-react";
+
+const errorStateVariants = cva(
+  "relative w-full rounded-md border transition-colors flex gap-2 sm:flex-row flex-col sm:items-center items-start",
+  {
+    variants: {
+      variant: {
+        subtle: "bg-destructive/10 text-destructive border-destructive/20",
+        solid: "bg-destructive text-destructive-foreground border-destructive",
+        outline: "bg-transparent text-destructive border-destructive",
+      },
+      density: {
+        compact: "p-2 text-sm",
+        comfy: "p-3",
+      },
+      align: {
+        left: "justify-start",
+        center: "justify-center",
+      },
+    },
+    defaultVariants: {
+      variant: "subtle",
+      density: "compact",
+      align: "left",
+    },
+  }
+);
+
+export interface ErrorStateProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof errorStateVariants> {
+  error?: unknown;
+  title?: string;
+  description?: string;
+  multiLineDescription?: boolean;
+  showIcon?: boolean;
+  showTitle?: boolean;
+  showDescription?: boolean;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
+  (
+    {
+      className,
+      variant,
+      density,
+      align,
+      error,
+      title = "Something went wrong",
+      description,
+      multiLineDescription = false,
+      showIcon = true,
+      showTitle = true,
+      showDescription = true,
+      icon: Icon = AlertCircleIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const errorMessage = React.useMemo(() => {
+      if (description) return description;
+      if (error instanceof Error) return error.message;
+      if (error) return String(error);
+      return "";
+    }, [error, description]);
+
+    if (!error && !title && !description) return null;
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        aria-live="polite"
+        className={cn(
+          errorStateVariants({ variant, density, align }),
+          className
+        )}
+        {...props}
+      >
+        {showIcon && (
+          <span className="flex items-center justify-center shrink-0">
+            <Icon className="h-5 w-5" />
+          </span>
+        )}
+        <div className="flex flex-col justify-center flex-1 min-w-0">
+          {showTitle && title && (
+            <div className="font-medium py-1 leading-none tracking-tight text-left">
+              {title}
+            </div>
+          )}
+          {showDescription && errorMessage && (
+            <div
+              className={cn(
+                "text-destructive/60 leading-tight",
+                multiLineDescription
+                  ? "break-words whitespace-normal"
+                  : "truncate"
+              )}
+            >
+              {errorMessage}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+ErrorState.displayName = "ErrorState";
+
+export { ErrorState, errorStateVariants };
diff --git a/src/components/ui/loading-spinner.tsx b/src/components/ui/loading-spinner.tsx
new file mode 100644
index 00000000..0f4e212f
--- /dev/null
+++ b/src/components/ui/loading-spinner.tsx
@@ -0,0 +1,28 @@
+import { Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface LoadingSpinnerProps {
+  sizeClassName?: string;
+  className?: string;
+  label?: string;
+}
+
+export function LoadingSpinner({
+  sizeClassName = "h-5 w-5",
+  className,
+  label,
+}: LoadingSpinnerProps) {
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <Loader2
+        aria-label="loading"
+        className={cn(
+          "animate-spin text-muted-foreground",
+          sizeClassName,
+          className
+        )}
+      />
+      <p className="text-muted-foreground">{label}</p>
+    </div>
+  );
+}
diff --git a/src/hooks/chats/use-chats.ts b/src/hooks/chats/use-chats.ts
index 330e3df0..505a5414 100644
--- a/src/hooks/chats/use-chats.ts
+++ b/src/hooks/chats/use-chats.ts
@@ -126,7 +126,12 @@ export const useSearchChats = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
 
-  const { data: searchResults } = useQuery({
+  const {
+    data: searchResults,
+    isLoading: isLoadingSearch,
+    isError: isSearchError,
+    error: searchError,
+  } = useQuery({
     ...convexQuery(api.chats.queries.search, {
       query: debouncedQuery.trim() ? debouncedQuery.trim() : "skip",
     }),
@@ -141,11 +146,16 @@ export const useSearchChats = () => {
     return () => clearTimeout(timer);
   }, [searchQuery]);
 
+  const isSearching = debouncedQuery.trim().length > 0;
+
   return {
     searchQuery,
     setSearchQuery,
     searchResults: searchResults || [],
-    isSearching: debouncedQuery !== searchQuery,
+    isSearching,
+    isLoadingSearch,
+    isSearchError,
+    searchError,
   };
 };
 
diff --git a/src/hooks/chats/use-documents.ts b/src/hooks/chats/use-documents.ts
index fa7dd5b7..e7f32d6a 100644
--- a/src/hooks/chats/use-documents.ts
+++ b/src/hooks/chats/use-documents.ts
@@ -8,6 +8,7 @@ import { useSetAtom, useAtomValue } from "jotai";
 
 export const useRemoveDocument = () => {
   const chatId = useAtomValue(chatIdAtom);
+
   const { data: chatInputQuery } = useQuery({
     ...convexQuery(
       api.chats.queries.get,
@@ -15,9 +16,11 @@ export const useRemoveDocument = () => {
     ),
     enabled: chatId !== "new",
   });
+
   const { mutate: updateChatInputMutation } = useMutation({
     mutationFn: useConvexMutation(api.chats.mutations.update),
   });
+
   const setNewChat = useSetAtom(newChatAtom);
 
   return (documentId: Id<"documents">) => {
diff --git a/src/hooks/chats/use-mcp.ts b/src/hooks/chats/use-mcp.ts
index 7665f3ba..8e42d217 100644
--- a/src/hooks/chats/use-mcp.ts
+++ b/src/hooks/chats/use-mcp.ts
@@ -40,7 +40,12 @@ function validateMCP(mcp: MCPFormState): boolean {
 }
 
 export function useMCPs() {
-  const { data: mcps } = useQuery({
+  const {
+    data: mcps,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
     ...convexQuery(api.mcps.queries.getAll, {
       paginationOpts: { numItems: 10, cursor: null },
     }),
@@ -131,5 +136,8 @@ export function useMCPs() {
     handleDelete,
     restartMCP,
     validateMCP,
+    isLoading,
+    isError,
+    error,
   };
 }
diff --git a/src/hooks/chats/use-messages.ts b/src/hooks/chats/use-messages.ts
index ab804bd5..ae080c79 100644
--- a/src/hooks/chats/use-messages.ts
+++ b/src/hooks/chats/use-messages.ts
@@ -22,7 +22,12 @@ export const useMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
   const setUseStreamAtom = useSetAtom(useStreamAtom);
   const branchPath = useAtomValue(branchPathAtom);
 
-  const { data: messages, isLoading } = useQuery({
+  const {
+    data: messages,
+    isLoading,
+    isError: isMessagesError,
+    error: messagesError,
+  } = useQuery({
     ...convexQuery(
       api.chatMessages.queries.get,
       chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip"
@@ -53,6 +58,10 @@ export const useMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
   return {
     isLoading: isLoading,
     isEmpty: currentThread.length === 0,
+    isError: isMessagesError,
+    error: messagesError,
+    isStreamError: Boolean((streamData as any)?.isError),
+    streamError: (streamData as any)?.error,
   };
 };
 
diff --git a/src/hooks/chats/use-stream.ts b/src/hooks/chats/use-stream.ts
index b1f8286e..f6a3c420 100644
--- a/src/hooks/chats/use-stream.ts
+++ b/src/hooks/chats/use-stream.ts
@@ -16,7 +16,11 @@ import {
 export type ChunkGroup = AIChunkGroup | ToolChunkGroup;
 
 export function useStream(chatId: Id<"chats"> | "new") {
-  const { data: stream } = useQuery({
+  const {
+    data: stream,
+    isError: isStreamError,
+    error: streamError,
+  } = useQuery({
     ...convexQuery(
       api.streams.queries.get,
       chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip"
@@ -36,7 +40,11 @@ export function useStream(chatId: Id<"chats"> | "new") {
 
   // Reactive query for chunks - uses stream._creationTime as dependency for reactivity
   // but still filters by lastSeenTime for bandwidth optimization
-  const { data: chunksResult } = useQuery({
+  const {
+    data: chunksResult,
+    isError: isChunksError,
+    error: chunksError,
+  } = useQuery({
     ...convexQuery(
       api.streams.queries.getChunks,
       stream && stream.status === "streaming"
@@ -171,5 +179,7 @@ export function useStream(chatId: Id<"chats"> | "new") {
     status: stream?.status,
     langchainMessages,
     planningStepsMessage,
+    isError: isStreamError || isChunksError,
+    error: isStreamError ? streamError : chunksError,
   };
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 903d9c87..ade6b982 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,10 +6,10 @@ import {
   HeadContent,
 } from "@tanstack/react-router";
 import { Toaster } from "@/components/ui/sonner";
-import { Loader2 } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { motion } from "motion/react";
-import { sidebarOpenAtom } from "@/store/chatStore";
+import { sidebarOpenAtom, resizePanelOpenAtom } from "@/store/chatStore";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useConvexAuth } from "convex/react";
 import { AppSidebar } from "@/components/app-sidebar";
@@ -19,45 +19,45 @@ export const Route = createRootRoute({
   head: () => ({
     meta: [
       {
-        charSet: 'utf-8',
+        charSet: "utf-8",
       },
       {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1.0',
+        name: "viewport",
+        content: "width=device-width, initial-scale=1.0",
       },
       {
-        name: 'theme-color',
-        content: '#000000',
+        name: "theme-color",
+        content: "#000000",
       },
       {
-        name: 'description',
-        content: 'the everything ai app',
+        name: "description",
+        content: "the everything ai app",
       },
     ],
     links: [
       {
-        rel: 'icon',
-        href: 'favicon.ico',
+        rel: "icon",
+        href: "favicon.ico",
       },
       {
-        rel: 'apple-touch-icon',
-        href: 'favicon.ico',
+        rel: "apple-touch-icon",
+        href: "favicon.ico",
       },
       {
-        rel: 'manifest',
-        href: 'manifest.json',
+        rel: "manifest",
+        href: "manifest.json",
       },
     ],
     scripts: [
       {
-        src: 'https://cdn.databuddy.cc/databuddy.js',
-        'data-client-id': 'NSQmSNKXIn2VGySald6BR',
-        'data-enable-batching': 'true',
-        crossOrigin: 'anonymous',
+        src: "https://cdn.databuddy.cc/databuddy.js",
+        "data-client-id": "NSQmSNKXIn2VGySald6BR",
+        "data-enable-batching": "true",
+        crossOrigin: "anonymous",
         async: true,
       },
     ],
-    title: '0bs',
+    title: "0bs",
   }),
   component: () => {
     const location = useLocation();
@@ -66,11 +66,23 @@ export const Route = createRootRoute({
     const publicRoutes = ["/auth"];
     const sidebarOpen = useAtomValue(sidebarOpenAtom);
     const setSidebarOpen = useSetAtom(sidebarOpenAtom);
+    const setResizePanelOpen = useSetAtom(resizePanelOpenAtom);
+
+    const isSettingsRoute = location.pathname.startsWith("/settings");
+
+    // Ensure sidebar and right resizable panel are closed on settings pages
+    // and keep them hidden there.
+    if (isSettingsRoute && sidebarOpen) {
+      setSidebarOpen(false);
+    }
+    if (isSettingsRoute) {
+      setResizePanelOpen(false);
+    }
 
     if (isLoading) {
       return (
         <div className="flex justify-center items-center h-screen font-sans bg-background">
-          <Loader2 className="w-10 h-10 animate-spin [animation-duration:0.3s]" />
+          <LoadingSpinner sizeClassName="w-10 h-10" />
         </div>
       );
     }
@@ -95,10 +107,10 @@ export const Route = createRootRoute({
               setSidebarOpen(!sidebarOpen);
             }}
           >
-            {/* AppSidebar and TopNav are now available on all routes */}
+            {/* AppSidebar and TopNav (sidebar hidden on settings) */}
             {isAuthenticated && (
               <>
-                <AppSidebar />
+                {!isSettingsRoute && <AppSidebar />}
                 <TopNav />
               </>
             )}
diff --git a/src/routes/auth.tsx b/src/routes/auth.tsx
index 7dfb3827..475712a9 100644
--- a/src/routes/auth.tsx
+++ b/src/routes/auth.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
 import { motion } from "motion/react";
-import { Loader2 } from "lucide-react";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { Navigate } from "@tanstack/react-router";
 import { useConvexAuth } from "convex/react";
 import { useAuthActions } from "@convex-dev/auth/react";
@@ -17,7 +17,7 @@ function RouteComponent() {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-screen">
-        <Loader2 className="w-12 h-12 animate-spin" />
+        <LoadingSpinner sizeClassName="w-8 h-8" />
       </div>
     );
   }
diff --git a/src/routes/chat.$chatId.lazy.tsx b/src/routes/chat.$chatId.lazy.tsx
index b2842f14..6b14335e 100644
--- a/src/routes/chat.$chatId.lazy.tsx
+++ b/src/routes/chat.$chatId.lazy.tsx
@@ -24,6 +24,7 @@ import { api } from "../../convex/_generated/api";
 import { newChatAtom } from "@/store/chatStore";
 import { convexQuery } from "@convex-dev/react-query";
 import { useQuery } from "@tanstack/react-query";
+import { ErrorState } from "@/components/ui/error-state";
 
 export const Route = createLazyFileRoute("/chat/$chatId")({
   component: RouteComponent,
@@ -43,7 +44,11 @@ function RouteComponent() {
     setSelectedArtifact(undefined);
   }, [chatId, setSelectedArtifact]);
 
-  const { data: queryChat } = useQuery({
+  const {
+    data: queryChat,
+    isError: isChatError,
+    error: chatError,
+  } = useQuery({
     ...convexQuery(
       api.chats.queries.get,
       chatId !== "new" ? { chatId: chatId as Id<"chats"> } : "skip"
@@ -54,6 +59,24 @@ function RouteComponent() {
     setChat(chatId !== "new" ? queryChat : newChat);
   }, [queryChat, setChat, newChat]);
 
+  if (isChatError) {
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center bg-muted/40 ">
+        <ErrorState
+          variant="subtle"
+          className="py-4 px-6 max-w-lg shadow-md rounded-lg"
+          density="comfy"
+          align="center"
+          title="Couldn't load chat."
+          description="It may have been deleted or you may not have access. Please select another chat or start a new one."
+          error={chatError}
+          multiLineDescription
+          showIcon={false}
+        />
+      </div>
+    );
+  }
+
   return (
     <>
       <ResizablePanelGroup direction="horizontal">
diff --git a/src/routes/settings/apiKeys.tsx b/src/routes/settings/apiKeys.tsx
index cf0d84fb..eb097742 100644
--- a/src/routes/settings/apiKeys.tsx
+++ b/src/routes/settings/apiKeys.tsx
@@ -15,6 +15,8 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { SaveIcon, TrashIcon } from "lucide-react";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { api } from "../../../convex/_generated/api";
 import { toast } from "sonner";
@@ -206,6 +208,7 @@ function RouteComponent() {
     data: existingKeys,
     error,
     isError,
+    isLoading,
   } = useQuery(convexQuery(api.apiKeys.queries.getAll, {}));
   const { mutateAsync: createApiKey } = useMutation({
     mutationFn: useConvexMutation(api.apiKeys.mutations.create),
@@ -304,22 +307,25 @@ function RouteComponent() {
     );
   };
 
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <LoadingSpinner label="Loading API keys..." />
+      </div>
+    );
+  }
+
   // Show error state if API keys failed to load
-  if (error && isError) {
+  if (isError || error) {
     return (
-      <div className="flex flex-col gap-4 h-full">
-        <Card>
-          <CardContent className="p-6">
-            <div className="text-center">
-              <p className="text-destructive font-medium">
-                Failed to load API keys
-              </p>
-              <p className="text-sm text-muted-foreground mt-2">
-                {error?.message || "An unexpected error occurred"}
-              </p>
-            </div>
-          </CardContent>
-        </Card>
+      <div className="flex items-center justify-center h-full">
+        <ErrorState
+          title="Failed to load API keys"
+          error={error}
+          showIcon={false}
+          density="comfy"
+          description="Unable to load API keys, please try again later."
+        />
       </div>
     );
   }
diff --git a/src/routes/settings/profile.tsx b/src/routes/settings/profile.tsx
index 96543de0..493e0fc5 100644
--- a/src/routes/settings/profile.tsx
+++ b/src/routes/settings/profile.tsx
@@ -9,6 +9,8 @@ import { useAuthActions } from "@convex-dev/auth/react";
 import { convexQuery } from "@convex-dev/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ErrorState } from "@/components/ui/error-state";
 
 export const Route = createFileRoute("/settings/profile")({
   component: RouteComponent,
@@ -17,11 +19,34 @@ export const Route = createFileRoute("/settings/profile")({
 });
 
 function RouteComponent() {
-  const { data: user } = useQuery(convexQuery(api.auth.getUser, {}));
+  const {
+    data: user,
+    isError: isErrorUser,
+    isLoading: isLoadingUser,
+    error: userError,
+  } = useQuery(convexQuery(api.auth.getUser, {}));
 
   const { signOut } = useAuthActions();
   const navigate = useNavigate();
 
+  if (isLoadingUser) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (isErrorUser || userError) {
+    return (
+      <ErrorState
+        title="Failed to load user data"
+        className="max-w-4xl"
+        error={userError}
+      />
+    );
+  }
+
   return (
     <div className="space-y-6">
       <div>
diff --git a/temp.md b/temp.md
index 7b64df03..f0c551a3 100644
--- a/temp.md
+++ b/temp.md
@@ -1,37 +1,29 @@
 ### todo
 
-- pricing [imp]
-- usage
-- improve ux overall with loading states and whatnot.
-- google integration (the code is already there just need to setup oauth)
-- business related mcp with ability to autofill connection info (like auto fetching api key/oauth key for the headers in mcp using oauth, etc to reduce friction)
-
-- need message queue system
-- immediate send, wait for file to be processed check on the frontend instead of backend
-
-<br/>
-
-caching implementation : (tanstack query)
-
-1. normal queries.
-2. normal mutations. (not needed because these are not reactive, so doesn't make any big difference.)
-3. paginated and infinite queries. (gotta figure something about it.)
+--- keep in mind : move logic to hooks. ---------
 
----
+- update these
+  tool-streaming, because of vibz mcp as it one shots the generation. so we need to live stream to the user all the changes.
+  https://github.com/0bs-chat/zerobs/tree/feat/message-queue : the message queue function.
 
---- keep in mind : move logic to hooks. ---------
+- vibe coding (better auth -> convex cloud migration -> streaming tool calls -> convex oauth integration -> revamp mcp templates to pass along the env vars)
+  custom ui for vibz mcp. (like artifacts, we will replace the panel content with the ui for vibz)(preview, dashboard (convex dashboard), code (vs code))
 
+- migrate to better auth (when i get the green light from mantra after better-auth integrates.)
 - infinite scroll area everywhere.
-- convex subscription caching. : will make the ui snappy, can caus too much bandwidth usage.
-- preloading.
 - look into action caching.
+- add more integrations.
 
-<br/>
+---
 
-current : we refetch on every visit to a chat. because usequery fetches all the content again and again and again. which results in database bandwidth increase.
-magic cache.: using useQuery from convex-helper/react/cache . we get the data from cache for a certain time. we can see the time as much time as we want. no fetching of data again and again. which even if got from cache. it still has to send it over the network which can cause database bandwidth increase.
+- pricing [imp]
+- usage
+- improve ux overall with loading states and whatnot.
+- google integration (the code is already there just need to setup oauth)
+- business related mcp with ability to autofill connection info (like auto fetching api key/oauth key for the headers in mcp using oauth, etc to reduce friction)
 
-- how about fetching top 20 chats.
+- need message queue system
+- immediate send, wait for file to be processed check on the frontend instead of backend
 
 </br>
 

From c886becf17a9d8bcf367214dcfb9ba2e6b1ce3e6 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Sat, 9 Aug 2025 18:46:03 +0530
Subject: [PATCH 02/12] refactor: streamline document handling and improve
 loading/error states

- Removed redundant loading and error handling logic from DocumentDialog and other components.
- Consolidated document download and opening functions for better clarity and maintainability.
- Enhanced user feedback during document loading and error states across various chat components.
- Updated LoadingSpinner and ErrorState components for consistent usage throughout the application.
---
 src/components/app-sidebar/index.tsx          |  2 +-
 .../chat/input/toolbar/projects-dropdown.tsx  |  3 --
 src/components/chat/messages/user-message.tsx | 15 ++++---
 src/components/chat/panels/mcp/index.tsx      | 19 +++++----
 .../chat/panels/projects/chat-list.tsx        |  9 +++--
 .../chat/panels/projects/details.tsx          |  5 ++-
 src/components/chat/panels/projects/list.tsx  |  2 +-
 src/components/document-dialog.tsx            | 39 +++++++++----------
 src/components/ui/accordion.tsx               | 16 ++++----
 src/components/ui/error-state.tsx             |  9 ++++-
 src/components/ui/loading-spinner.tsx         | 11 +++++-
 src/hooks/chats/use-documents.ts              |  1 -
 src/hooks/chats/use-messages.ts               |  4 +-
 src/routes/__root.tsx                         | 10 ++---
 14 files changed, 80 insertions(+), 65 deletions(-)

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
index d066cf8b..b34aef30 100644
--- a/src/components/app-sidebar/index.tsx
+++ b/src/components/app-sidebar/index.tsx
@@ -183,7 +183,7 @@ export function AppSidebar() {
                     <PinIcon className="w-4 h-4 mr-2" />
                     Pinned
                   </SidebarGroupLabel>
-                  <AccordionTrigger className="cursor-pointer p-0" />
+                  <AccordionTrigger className="cursor-pointer p-0 mr-2" />
                 </div>
                 <AccordionContent className="px-2">
                   <SidebarGroupContent>
diff --git a/src/components/chat/input/toolbar/projects-dropdown.tsx b/src/components/chat/input/toolbar/projects-dropdown.tsx
index 3f2c0f38..ae1860ee 100644
--- a/src/components/chat/input/toolbar/projects-dropdown.tsx
+++ b/src/components/chat/input/toolbar/projects-dropdown.tsx
@@ -66,9 +66,6 @@ export const ProjectsDropdown = ({
                   className="h-4 w-4"
                   label="Loading projects..."
                 />
-                <span className="text-muted-foreground">
-                  Loading projects...
-                </span>
               </DropdownMenuItem>
             ) : (
               projects?.page?.slice(0, 3).map((project: any) => (
diff --git a/src/components/chat/messages/user-message.tsx b/src/components/chat/messages/user-message.tsx
index e9453c98..744e2b60 100644
--- a/src/components/chat/messages/user-message.tsx
+++ b/src/components/chat/messages/user-message.tsx
@@ -45,13 +45,13 @@ const DocumentButton = ({
       <div className="py-2 text-xs text-muted-foreground flex items-center gap-2">
         <LoadingSpinner
           sizeClassName="h-4 w-4"
-          label="Fetching attached documents"
+          label="Loading attached documents"
         />
       </div>
     );
   }
 
-  if (isDocumentError || documentError) {
+  if (isDocumentError) {
     return (
       <div className="py-2 max-w-xs">
         <ErrorState
@@ -69,7 +69,7 @@ const DocumentButton = ({
       className="py-6 cursor-pointer"
       onClick={() => setDocumentDialogOpen(fileId as Id<"documents">)}
     >
-      {documentData?.name}
+      {documentData?.name ?? "View Document"}
     </Button>
   );
 };
@@ -102,7 +102,7 @@ const EditingDocumentList = ({
   if (isLoadingDocuments) {
     return (
       <div className="px-2 py-1 text-xs text-muted-foreground flex items-center gap-2">
-        <LoadingSpinner sizeClassName="h-3 w-3" /> Loading…
+        <LoadingSpinner sizeClassName="h-3 w-3" label="Loading documents" />
       </div>
     );
   }
@@ -110,7 +110,10 @@ const EditingDocumentList = ({
   if (isDocumentsError) {
     return (
       <div className="px-2 py-1">
-        <ErrorState title="Failed to load documents" error={documentsError} />
+        <ErrorState
+          title="Error loading attached  documents"
+          error={documentsError}
+        />
       </div>
     );
   }
@@ -251,7 +254,7 @@ export const UserMessage = memo(
     }, [content, item.message._id, setDocumentDialogOpen]);
 
     return (
-      <div className="group/message    flex flex-col gap-1 max-w-[80%] self-end">
+      <div className="group/message flex flex-col gap-1 max-w-[80%] self-end">
         {isEditing ? (
           <div className="bg-card max-w-full self-end rounded-md shadow-sm w-full p-2 border-2 border-transparent">
             <AutosizeTextarea
diff --git a/src/components/chat/panels/mcp/index.tsx b/src/components/chat/panels/mcp/index.tsx
index fc9dfff2..ff91baca 100644
--- a/src/components/chat/panels/mcp/index.tsx
+++ b/src/components/chat/panels/mcp/index.tsx
@@ -32,16 +32,15 @@ export const MCPPanel = () => {
             <LoadingSpinner sizeClassName="h-4 w-4" label="Loading MCPs..." />
           </div>
         )}
-        {isError ||
-          (error && (
-            <div className="py-2">
-              <ErrorState
-                density="comfy"
-                title="Failed to load MCPs"
-                error={error}
-              />
-            </div>
-          ))}
+        {(isError || error) && (
+          <div className="py-2">
+            <ErrorState
+              density="comfy"
+              title="Failed to load MCPs"
+              error={error}
+            />
+          </div>
+        )}
         {mcps?.page?.length === 0 && mcps && !isLoading && !isError && (
           <div className=" items-center justify-center flex py-2 w-full text-muted-foreground">
             <div> Currently no MCPs are running. </div>
diff --git a/src/components/chat/panels/projects/chat-list.tsx b/src/components/chat/panels/projects/chat-list.tsx
index 1de3ae0e..afd230a7 100644
--- a/src/components/chat/panels/projects/chat-list.tsx
+++ b/src/components/chat/panels/projects/chat-list.tsx
@@ -19,20 +19,23 @@ export const ProjectChatList = ({ projectId }: ProjectChatListProps) => {
     data: chats,
     isLoading: isLoadingChats,
     isError: isChatsError,
-    error: chatsError,
   } = useQuery({
     ...convexQuery(api.chats.queries.getByProjectId, { projectId }),
   });
 
   if (isLoadingChats) {
     return (
-      <div className="flex items-center justify-center py-10">
+      <div
+        className="flex items-center justify-center py-10"
+        aria-busy="true"
+        aria-live="polite"
+      >
         <LoadingSpinner className="h-6 w-6" label="Loading project chats..." />
       </div>
     );
   }
 
-  if (isChatsError || chatsError) {
+  if (isChatsError) {
     return (
       <div className="flex items-center justify-center gap-2 py-4 ">
         <ErrorState
diff --git a/src/components/chat/panels/projects/details.tsx b/src/components/chat/panels/projects/details.tsx
index dae86051..112c1d62 100644
--- a/src/components/chat/panels/projects/details.tsx
+++ b/src/components/chat/panels/projects/details.tsx
@@ -60,11 +60,12 @@ export const ProjectDetails = ({ projectId }: ProjectDetailsProps) => {
     );
   }
 
-  if (isProjectError || projectError) {
+  if (isProjectError) {
     return (
-      <div className=" ">
+      <div className="flex flex-1 items-center justify-center">
         <ErrorState
           className="h-full py-2.5"
+          density="comfy"
           title="Error loading project details"
           error={projectError}
         />
diff --git a/src/components/chat/panels/projects/list.tsx b/src/components/chat/panels/projects/list.tsx
index de65e040..fbe72e36 100644
--- a/src/components/chat/panels/projects/list.tsx
+++ b/src/components/chat/panels/projects/list.tsx
@@ -52,7 +52,7 @@ export const ProjectsList = () => {
     );
   }
 
-  if (isProjectsError || projectsError) {
+  if (isProjectsError) {
     return (
       <div className="flex items-center justify-center">
         <ErrorState
diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index db516073..f033c3bb 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -31,7 +31,6 @@ export const DocumentDialog = () => {
       api.documents.queries.get,
       documentDialogOpen ? { documentId: documentDialogOpen } : "skip"
     ),
-    enabled: !!documentDialogOpen,
   });
 
   const { mutateAsync: generateDownloadUrl } = useMutation({
@@ -95,6 +94,25 @@ export const DocumentDialog = () => {
     return null;
   }
 
+  const handleDownload = async () => {
+    if (!document || tag !== "file") return;
+    const url = await generateDownloadUrl({
+      documentId: document._id!,
+    });
+    if (url) {
+      window.open(url, "_blank");
+    }
+  };
+
+  const handleOpen = () => {
+    if (!document) return;
+    if (tag === "url" || tag === "site") {
+      window.open(document.key as string, "_blank");
+    } else if (tag === "youtube") {
+      window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
+    }
+  };
+
   if (isLoadingDocument) {
     return (
       <Dialog
@@ -131,25 +149,6 @@ export const DocumentDialog = () => {
     );
   }
 
-  const handleDownload = async () => {
-    if (!document || tag !== "file") return;
-    const url = await generateDownloadUrl({
-      documentId: document._id!,
-    });
-    if (url) {
-      window.open(url, "_blank");
-    }
-  };
-
-  const handleOpen = () => {
-    if (!document) return;
-    if (tag === "url" || tag === "site") {
-      window.open(document.key as string, "_blank");
-    } else if (tag === "youtube") {
-      window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
-    }
-  };
-
   return (
     <Dialog
       open={!!documentDialogOpen}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 23d427d1..41e48473 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -145,15 +145,15 @@ function AccordionTrigger({
         onClick={handleClick}
         {...props}
       >
-        <motion.div
-          animate={{ rotate: isOpen ? 0 : 180 }}
-          transition={{ duration: 0.25 }}
-          className="items-center flex justify-center "
-        >
-          {showIcon && (
+        {showIcon && (
+          <motion.div
+            animate={{ rotate: isOpen ? 0 : 180 }}
+            transition={{ duration: 0.25 }}
+            className="items-center flex justify-center "
+          >
             <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
-          )}
-        </motion.div>
+          </motion.div>
+        )}
         {children}
       </motion.button>
     </div>
diff --git a/src/components/ui/error-state.tsx b/src/components/ui/error-state.tsx
index 3eb82199..050d76db 100644
--- a/src/components/ui/error-state.tsx
+++ b/src/components/ui/error-state.tsx
@@ -68,7 +68,14 @@ const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
       return "";
     }, [error, description]);
 
-    if (!error && !title && !description) return null;
+    // Only return null if nothing at all would render
+    if (
+      !showIcon &&
+      (!showTitle || !title) &&
+      (!showDescription || !errorMessage)
+    ) {
+      return null;
+    }
 
     return (
       <div
diff --git a/src/components/ui/loading-spinner.tsx b/src/components/ui/loading-spinner.tsx
index 0f4e212f..40cd646d 100644
--- a/src/components/ui/loading-spinner.tsx
+++ b/src/components/ui/loading-spinner.tsx
@@ -5,15 +5,22 @@ interface LoadingSpinnerProps {
   sizeClassName?: string;
   className?: string;
   label?: string;
+  containerClassName?: string;
 }
 
 export function LoadingSpinner({
   sizeClassName = "h-5 w-5",
   className,
   label,
+  containerClassName,
 }: LoadingSpinnerProps) {
   return (
-    <div className="flex items-center justify-center gap-2">
+    <div
+      className={cn(
+        "flex items-center justify-center gap-2",
+        containerClassName
+      )}
+    >
       <Loader2
         aria-label="loading"
         className={cn(
@@ -22,7 +29,7 @@ export function LoadingSpinner({
           className
         )}
       />
-      <p className="text-muted-foreground">{label}</p>
+      {label ? <p className="text-muted-foreground">{label}</p> : null}
     </div>
   );
 }
diff --git a/src/hooks/chats/use-documents.ts b/src/hooks/chats/use-documents.ts
index e7f32d6a..30117448 100644
--- a/src/hooks/chats/use-documents.ts
+++ b/src/hooks/chats/use-documents.ts
@@ -14,7 +14,6 @@ export const useRemoveDocument = () => {
       api.chats.queries.get,
       chatId !== "new" ? { chatId } : "skip"
     ),
-    enabled: chatId !== "new",
   });
 
   const { mutate: updateChatInputMutation } = useMutation({
diff --git a/src/hooks/chats/use-messages.ts b/src/hooks/chats/use-messages.ts
index ae080c79..e8cb84a9 100644
--- a/src/hooks/chats/use-messages.ts
+++ b/src/hooks/chats/use-messages.ts
@@ -60,8 +60,8 @@ export const useMessages = ({ chatId }: { chatId: Id<"chats"> | "new" }) => {
     isEmpty: currentThread.length === 0,
     isError: isMessagesError,
     error: messagesError,
-    isStreamError: Boolean((streamData as any)?.isError),
-    streamError: (streamData as any)?.error,
+    isStreamError: Boolean(streamData?.isError),
+    streamError: streamData?.error,
   };
 };
 
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index ade6b982..ef7c0e26 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -14,6 +14,7 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { useConvexAuth } from "convex/react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { TopNav } from "@/components/topnav";
+import { useEffect } from "react";
 
 export const Route = createRootRoute({
   head: () => ({
@@ -72,12 +73,11 @@ export const Route = createRootRoute({
 
     // Ensure sidebar and right resizable panel are closed on settings pages
     // and keep them hidden there.
-    if (isSettingsRoute && sidebarOpen) {
-      setSidebarOpen(false);
-    }
-    if (isSettingsRoute) {
+    useEffect(() => {
+      if (!isSettingsRoute) return;
+      sidebarOpen && setSidebarOpen(false);
       setResizePanelOpen(false);
-    }
+    }, [isSettingsRoute, sidebarOpen, setSidebarOpen, setResizePanelOpen]);
 
     if (isLoading) {
       return (

From b062b969c7c56f93fb873d5229a64af0a8f30530 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:20:27 +0530
Subject: [PATCH 03/12] chore: update subproject commit reference in MCP
 service

---
 services/mcps | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/mcps b/services/mcps
index a202aeaa..1d83b412 160000
--- a/services/mcps
+++ b/services/mcps
@@ -1 +1 @@
-Subproject commit a202aeaa8424127d354886fc270959c85856b928
+Subproject commit 1d83b4120aea6ec474f184d2720dc0a507149143

From 3e246db6b670577255cd8d4bc37c0f28d69343c0 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Mon, 18 Aug 2025 18:57:11 +0530
Subject: [PATCH 04/12] fix: clean up code formatting and improve observer
 logic in AppSidebar and useDocuments hooks

- Removed unnecessary line breaks and adjusted formatting for better readability.
- Enhanced observer logic in AppSidebar to unobserve the loadMoreElement when it is intersecting.
- Updated useRemoveDocument and useUploadDocuments hooks for consistent code style.
---
 src/components/app-sidebar/index.tsx |  5 +++--
 src/hooks/chats/use-documents.ts     | 29 +++++++++++++++++-----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
index 5f5c3e9e..0d281b3c 100644
--- a/src/components/app-sidebar/index.tsx
+++ b/src/components/app-sidebar/index.tsx
@@ -45,7 +45,7 @@ export function AppSidebar() {
   } = useSearchChats();
   const loadMoreRef = React.useRef<HTMLButtonElement>(null);
   const [pinnedChatsAccordionOpen, setPinnedChatsAccordionOpen] = useAtom(
-    pinnedChatsAccordionOpenAtom,
+    pinnedChatsAccordionOpenAtom
   );
 
   const handleNewChat = () => {
@@ -80,6 +80,7 @@ export function AppSidebar() {
       (entries) => {
         const [entry] = entries;
         if (entry.isIntersecting) {
+          observer.unobserve(loadMoreElement);
           loadMore(15);
         }
       },
@@ -87,7 +88,7 @@ export function AppSidebar() {
         root: null,
         rootMargin: "0px",
         threshold: 0.1,
-      },
+      }
     );
 
     observer.observe(loadMoreElement);
diff --git a/src/hooks/chats/use-documents.ts b/src/hooks/chats/use-documents.ts
index 3faafb58..eeb40ce7 100644
--- a/src/hooks/chats/use-documents.ts
+++ b/src/hooks/chats/use-documents.ts
@@ -12,7 +12,7 @@ export const useRemoveDocument = () => {
   const { data: chatInputQuery } = useQuery({
     ...convexQuery(
       api.chats.queries.get,
-      chatId !== "new" ? { chatId } : "skip",
+      chatId !== "new" ? { chatId } : "skip"
     ),
   });
 
@@ -29,19 +29,26 @@ export const useRemoveDocument = () => {
       }
 
       const filteredDocuments = chatInputQuery.documents.filter(
-        (id) => id !== documentId,
+        (id) => id !== documentId
       );
 
-      updateChatInputMutation({
-        chatId: chatId,
-        updates: {
-          documents: filteredDocuments,
+      updateChatInputMutation(
+        {
+          chatId: chatId,
+          updates: {
+            documents: filteredDocuments,
+          },
         },
-      });
+        {
+          onError: () => {
+            toast("Failed to remove document");
+          },
+        }
+      );
     } else {
       setNewChat((prev) => {
         const filteredDocuments = prev.documents.filter(
-          (id) => id !== documentId,
+          (id) => id !== documentId
         );
         return { ...prev, documents: filteredDocuments };
       });
@@ -56,7 +63,7 @@ export const useUploadDocuments = (
   }: {
     type: "file" | "url" | "site" | "youtube" | "text" | "github";
     chat?: Doc<"chats">;
-  } = { type: "file" },
+  } = { type: "file" }
 ) => {
   const chatId = useAtomValue(chatIdAtom);
   const { mutateAsync: updateChatMutation } = useMutation({
@@ -104,7 +111,7 @@ export const useUploadDocuments = (
             size: file.size,
             key: storageId,
           });
-        }),
+        })
       );
 
       // Update chat input with new documents
@@ -125,7 +132,7 @@ export const useUploadDocuments = (
       }
 
       toast(
-        `${files.length} file${files.length > 1 ? "s" : ""} uploaded successfully`,
+        `${files.length} file${files.length > 1 ? "s" : ""} uploaded successfully`
       );
 
       return documentIds;

From e3dededc738befd0c4a671f4f2e1e636186a2531 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Sat, 23 Aug 2025 07:02:37 +0530
Subject: [PATCH 05/12] refactor: simplify sidebar component layout

- Removed unnecessary icons from the Pinned and Previous Chats sections in the AppSidebar component for a cleaner UI.
- Adjusted the SidebarGroupLabel to streamline the display of section titles.
---
 src/components/app-sidebar/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
index fe4b0ac0..ac054751 100644
--- a/src/components/app-sidebar/index.tsx
+++ b/src/components/app-sidebar/index.tsx
@@ -178,10 +178,7 @@ export function AppSidebar() {
             >
               <AccordionItem value="pinned" className="border-none py-1">
                 <div className="flex justify-between items-center w-full">
-                  <SidebarGroupLabel>
-                    <PinIcon className="w-4 h-4 mr-2" />
-                    Pinned
-                  </SidebarGroupLabel>
+                  <SidebarGroupLabel>Pinned</SidebarGroupLabel>
                   <AccordionTrigger className="cursor-pointer p-0 mr-2" />
                 </div>
                 <AccordionContent className="px-2">
@@ -199,7 +196,6 @@ export function AppSidebar() {
         <SidebarGroup className="flex-1 min-h-0 p-0">
           <SidebarGroupContent className="h-full flex flex-col">
             <SidebarGroupLabel className="flex items-center">
-              {!isSearching && <HistoryIcon className="w-4 h-4 mr-2" />}
               {isSearching ? "Search Results" : "Previous Chats"}
             </SidebarGroupLabel>
             <div className="flex-1 overflow-y-auto scrollbar-none">

From d003490e5c544057d5a0f944896fbe223b7ea38e Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Sat, 23 Aug 2025 07:19:13 +0530
Subject: [PATCH 06/12] refactor: clean up imports and improve layout in TopNav
 and AppSidebar

- Removed unused GearIcon import from TopNav component.
- Simplified imports in AppSidebar by removing unnecessary icons and loading spinner.
- Adjusted layout properties for SidebarGroup and SidebarGroupLabel for better UI consistency.
---
 src/components/app-sidebar/index.tsx | 55 +++++++---------------------
 src/components/topnav.tsx            |  1 -
 2 files changed, 13 insertions(+), 43 deletions(-)

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
index ac054751..549259f9 100644
--- a/src/components/app-sidebar/index.tsx
+++ b/src/components/app-sidebar/index.tsx
@@ -8,20 +8,11 @@ import {
   SidebarGroupContent,
 } from "@/components/ui/sidebar";
 import { useNavigate } from "@tanstack/react-router";
-import {
-  SearchIcon,
-  XIcon,
-  PlusIcon,
-  FolderIcon,
-  PinIcon,
-  HistoryIcon,
-} from "lucide-react";
+import { SearchIcon, XIcon, PlusIcon, FolderIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ChatItem } from "@/components/app-sidebar/chat-item";
 import { useInfiniteChats, useSearchChats } from "@/hooks/chats/use-chats";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
-import { ErrorState } from "@/components/ui/error-state";
 import type { Doc } from "../../../convex/_generated/dataModel";
 import {
   Accordion,
@@ -35,14 +26,7 @@ import { useAtom } from "jotai";
 export function AppSidebar() {
   const navigate = useNavigate();
   const { pinnedChats, historyChats, status, loadMore } = useInfiniteChats();
-  const {
-    searchQuery,
-    setSearchQuery,
-    searchResults,
-    isSearching,
-    isLoadingSearch,
-    isSearchError,
-  } = useSearchChats();
+  const { searchQuery, setSearchQuery, searchResults } = useSearchChats();
   const loadMoreRef = React.useRef<HTMLButtonElement>(null);
   const [pinnedChatsAccordionOpen, setPinnedChatsAccordionOpen] = useAtom(
     pinnedChatsAccordionOpenAtom
@@ -80,7 +64,6 @@ export function AppSidebar() {
       (entries) => {
         const [entry] = entries;
         if (entry.isIntersecting) {
-          observer.unobserve(loadMoreElement);
           loadMore(15);
         }
       },
@@ -99,6 +82,7 @@ export function AppSidebar() {
   }, [loadMore, status]);
 
   // Determine whether to show search results or regular chat lists
+  const isSearching = searchQuery.trim().length > 0;
   const searchPinnedChats = isSearching
     ? searchResults.filter((chat) => chat.pinned)
     : [];
@@ -114,7 +98,7 @@ export function AppSidebar() {
       <SidebarHeader className="flex items-center w-full font-bold font-mono text-xl py-3.5 px-2">
         0bs
       </SidebarHeader>
-      <SidebarContent className="overflow-hidden px-1.5 gap-0">
+      <SidebarContent className="overflow-hidden px-1 flex flex-col">
         <SidebarGroup className="gap-2">
           <Button className="w-full cursor-pointer" onClick={handleNewChat}>
             <div className="flex items-center gap-2">
@@ -165,7 +149,7 @@ export function AppSidebar() {
         </SidebarGroup>
 
         {displayPinnedChats.length > 0 && (
-          <SidebarGroup className="p-0">
+          <SidebarGroup className="gap-0 py-0">
             <Accordion
               type="single"
               collapsible
@@ -176,12 +160,12 @@ export function AppSidebar() {
                 setPinnedChatsAccordionOpen(value === "pinned");
               }}
             >
-              <AccordionItem value="pinned" className="border-none py-1">
+              <AccordionItem value="pinned">
                 <div className="flex justify-between items-center w-full">
                   <SidebarGroupLabel>Pinned</SidebarGroupLabel>
-                  <AccordionTrigger className="cursor-pointer p-0 mr-2" />
+                  <AccordionTrigger className="cursor-pointer" />
                 </div>
-                <AccordionContent className="px-2">
+                <AccordionContent>
                   <SidebarGroupContent>
                     <div className="flex flex-col">
                       {displayPinnedChats.map((chat) => renderChatItem(chat))}
@@ -193,26 +177,13 @@ export function AppSidebar() {
           </SidebarGroup>
         )}
 
-        <SidebarGroup className="flex-1 min-h-0 p-0">
+        <SidebarGroup className="flex-1 min-h-0 gap-0">
           <SidebarGroupContent className="h-full flex flex-col">
-            <SidebarGroupLabel className="flex items-center">
-              {isSearching ? "Search Results" : "Previous Chats"}
+            <SidebarGroupLabel>
+              {isSearching ? "Search Results" : "History"}
             </SidebarGroupLabel>
             <div className="flex-1 overflow-y-auto scrollbar-none">
-              <div className="flex flex-col px-2">
-                {isSearching && isLoadingSearch && (
-                  <div className="flex items-center justify-center py-2">
-                    <LoadingSpinner
-                      sizeClassName="h-4 w-4"
-                      label="Searching chats..."
-                    />
-                  </div>
-                )}
-                {isSearching && isSearchError && (
-                  <div className="py-2">
-                    <ErrorState title="Unable to search chats" />
-                  </div>
-                )}
+              <div className="flex flex-col">
                 {displayHistoryChats.map((chat) => renderChatItem(chat))}
                 {!isSearching && status === "CanLoadMore" && (
                   <Button
@@ -224,7 +195,7 @@ export function AppSidebar() {
                     Load More
                   </Button>
                 )}
-                {displayHistoryChats.length === 0 && !isSearching && (
+                {displayHistoryChats.length === 0 && (
                   <div className="text-sm text-muted-foreground text-center py-2">
                     {isSearching
                       ? "No matching chats found"
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 474638fb..3a458e4c 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -26,7 +26,6 @@ import { convexQuery } from "@convex-dev/react-query";
 import { api } from "../../convex/_generated/api";
 import { useEffect } from "react";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
-import { GearIcon } from "@radix-ui/react-icons";
 
 export function TopNav() {
   const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);

From 9792752dc050a1683d263819813a2b04c66d1aba Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Mon, 25 Aug 2025 22:58:07 +0530
Subject: [PATCH 07/12] chore: update project details and improve UI components

- Removed outdated UX improvement note from temp.md.
- Updated mcps submodule to commit 2a33ac72eaa99ca4b87a2e85991523696de5dd1a.
- Made adjustments to the TopNav component by removing unused settings button and mode toggle for a cleaner interface.
---
 services/mcps             |  2 +-
 src/components/topnav.tsx | 17 -----------------
 temp.md                   |  1 -
 3 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/services/mcps b/services/mcps
index 2d17c1a9..2a33ac72 160000
--- a/services/mcps
+++ b/services/mcps
@@ -1 +1 @@
-Subproject commit 2d17c1a9eca5a2986474866696a7fa08b594638f
+Subproject commit 2a33ac72eaa99ca4b87a2e85991523696de5dd1a
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index f796c11b..8a2fed9a 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -103,23 +103,6 @@ export function TopNav() {
 			<div
 				className={`flex items-center gap-1 justify-center top-0 right-0 p-0.5 pointer-events-auto  rounded-lg ${resizePanelOpen ? "border border-transparent translate-y-[.05rem]" : "bg-accent dark:bg-primary/10 backdrop-blur-sm border-border/40 border"} `}
 			>
-				{!resizePanelOpen && (
-					<>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="cursor-pointer"
-							aria-label="Open settings"
-							onClick={() => {
-								navigate({ to: "/settings/profile" });
-							}}
-						>
-							<Settings2Icon className="h-6 w-6" />
-						</Button>
-						<ModeToggle />
-					</>
-				)}
-
 				{!resizePanelOpen ? (
 					<Button
 						variant="ghost"
diff --git a/temp.md b/temp.md
index 6b0589a5..aa9f4d17 100644
--- a/temp.md
+++ b/temp.md
@@ -12,7 +12,6 @@ https://github.com/0bs-chat/zerobs/tree/feat/message-queue : the message queue f
 
 - pricing [imp]
 - usage
-- improve ux overall with loading states and whatnot. [done]
 - google integration (the code is already there just need to setup oauth)
 - business related mcp with ability to autofill connection info (like auto fetching api key/oauth key for the headers in mcp using oauth, etc to reduce friction)
 

From 4716dd027eba1af378c0230e578520ae1e401b72 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 26 Aug 2025 11:00:00 +0530
Subject: [PATCH 08/12] fix: update .gitignore and refactor DocumentDialog and
 TopNav components

- Added stats.html to .gitignore to prevent tracking of generated files.
- Reformatted code in DocumentDialog for improved readability and consistency.
- Simplified user error handling in TopNav by moving error check to a more logical position.
---
 .gitignore                         |   4 +-
 src/components/document-dialog.tsx | 495 +++++++++++++++--------------
 src/components/topnav.tsx          |  23 +-
 3 files changed, 259 insertions(+), 263 deletions(-)

diff --git a/.gitignore b/.gitignore
index 46d0d63d..78ab3d43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+stats.html
 node_modules
 .DS_Store
 dist/
@@ -14,5 +15,4 @@ convex/_generated/
 scripts/__pycache__/
 */__pycache__/*
 .tanstack
-bun.lock
-stats.html
\ No newline at end of file
+bun.lock
\ No newline at end of file
diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index fafd678e..2ce96b7b 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -1,8 +1,8 @@
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 import { documentDialogOpenAtom } from "@/store/chatStore";
 import { api } from "../../convex/_generated/api";
@@ -17,259 +17,262 @@ import { useState, useEffect } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
 
 export const DocumentDialog = () => {
-  const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
-  const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+	const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
+	const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
+	const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  const {
-    data: document,
-    isLoading: isLoadingDocument,
-    isError: isDocumentError,
-    error: documentError,
-  } = useQuery({
-    ...convexQuery(
-      api.documents.queries.get,
-      documentDialogOpen ? { documentId: documentDialogOpen } : "skip",
-    ),
-  });
+	const {
+		data: document,
+		isLoading: isLoadingDocument,
+		isError: isDocumentError,
+		error: documentError,
+	} = useQuery({
+		...convexQuery(
+			api.documents.queries.get,
+			documentDialogOpen ? { documentId: documentDialogOpen } : "skip",
+		),
+	});
 
-  const { mutateAsync: generateDownloadUrl } = useMutation({
-    mutationFn: useConvexMutation(api.documents.mutations.generateDownloadUrl),
-  });
+	const { mutateAsync: generateDownloadUrl } = useMutation({
+		mutationFn: useConvexMutation(api.documents.mutations.generateDownloadUrl),
+	});
 
-  const documentName = document?.name ?? "";
-  const {
-    icon: Icon,
-    className: IconClassName,
-    tag,
-  } = document
-    ? getDocTagInfo(document)
-    : { icon: () => null, className: "", tag: "" };
+	const documentName = document?.name ?? "";
+	const {
+		icon: Icon,
+		className: IconClassName,
+		tag,
+	} = document
+		? getDocTagInfo(document)
+		: { icon: () => null, className: "", tag: "" };
 
-  useEffect(() => {
-    setPreviewUrl(null);
-    const loadPreviewUrl = async () => {
-      if (!document) return;
-      try {
-        switch (tag) {
-          case "image":
-          case "pdf":
-          case "file": {
-            const url = await generateDownloadUrl({
-              documentId: document._id!,
-            });
-            setPreviewUrl(url);
-            break;
-          }
-          case "url":
-          case "site": {
-            setPreviewUrl(document.key as string);
-            break;
-          }
-          case "youtube": {
-            setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
-            break;
-          }
-          default:
-            if (["file", "text", "github"].includes(document.type)) {
-              const url = await generateDownloadUrl({
-                documentId: document._id!,
-              });
-              setPreviewUrl(url);
-              break;
-            } else {
-              setPreviewUrl(document.key as string);
-            }
-            break;
-        }
-      } catch (e) {
-        setPreviewUrl(null);
-      }
-    };
-    loadPreviewUrl();
-  }, [document, tag, generateDownloadUrl]);
+	useEffect(() => {
+		setPreviewUrl(null);
+		const loadPreviewUrl = async () => {
+			if (!document) return;
+			try {
+				switch (tag) {
+					case "image":
+					case "pdf":
+					case "file": {
+						const url = await generateDownloadUrl({
+							documentId: document._id!,
+						});
+						setPreviewUrl(url);
+						break;
+					}
+					case "url":
+					case "site": {
+						setPreviewUrl(document.key as string);
+						break;
+					}
+					case "youtube": {
+						setPreviewUrl(`https://www.youtube.com/embed/${document.key}`);
+						break;
+					}
+					default:
+						if (["file", "text", "github"].includes(document.type)) {
+							const url = await generateDownloadUrl({
+								documentId: document._id!,
+							});
+							setPreviewUrl(url);
+							break;
+						} else {
+							setPreviewUrl(document.key as string);
+						}
+						break;
+				}
+			} catch (e) {
+				setPreviewUrl(null);
+			}
+		};
+		loadPreviewUrl();
+	}, [document, tag, generateDownloadUrl]);
 
-  // Early return if dialog is not open
-  if (!documentDialogOpen) {
-    return null;
-  }
+	// Early return if dialog is not open
+	if (!documentDialogOpen) {
+		return null;
+	}
 
-  const handleDownload = async () => {
-    if (!document || tag !== "file") return;
-    const url = await generateDownloadUrl({
-      documentId: document._id!,
-    });
-    if (url) {
-      window.open(url, "_blank");
-    }
-  };
+	const handleDownload = async () => {
+		if (!document || tag !== "file") return;
+		const url = await generateDownloadUrl({
+			documentId: document._id!,
+		});
+		if (url) {
+			window.open(url, "_blank");
+		}
+	};
 
-  const handleOpen = () => {
-    if (!document) return;
-    if (tag === "url" || tag === "site") {
-      window.open(document.key as string, "_blank");
-    } else if (tag === "youtube") {
-      window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
-    }
-  };
+	const handleOpen = () => {
+		if (!document) return;
+		if (tag === "url" || tag === "site") {
+			window.open(document.key as string, "_blank");
+		} else if (tag === "youtube") {
+			window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
+		}
+	};
 
-  if (isLoadingDocument) {
-    return (
-      <Dialog
-        open={!!documentDialogOpen}
-        onOpenChange={() => setDocumentDialogOpen(undefined)}
-      >
-        <DialogContent className="sm:max-w-[800px] h-[80vh] flex items-center justify-center gap-4">
-          <LoadingSpinner className="h-8 w-8" />
-          <div className="text-muted-foreground text-lg">
-            Loading document...
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
+	if (isLoadingDocument) {
+		return (
+			<Dialog
+				open={!!documentDialogOpen}
+				onOpenChange={() => setDocumentDialogOpen(undefined)}
+			>
+				<DialogContent className="sm:max-w-[800px] h-[80vh] flex items-center justify-center gap-4">
+					<LoadingSpinner className="h-8 w-8" />
+					<div className="text-muted-foreground text-lg">
+						Loading document...
+					</div>
+				</DialogContent>
+			</Dialog>
+		);
+	}
 
-  if (isDocumentError || documentError) {
-    return (
-      <Dialog
-        open={!!documentDialogOpen}
-        onOpenChange={() => setDocumentDialogOpen(undefined)}
-      >
-        <DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col items-center justify-center gap-4">
-          <div className="flex flex-col items-center justify-center gap-4 w-full">
-            <ErrorState
-              title="Failed to load document"
-              error={documentError}
-              description="Please try again later."
-              density="comfy"
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
+	if (isDocumentError || documentError) {
+		return (
+			<Dialog
+				open={!!documentDialogOpen}
+				onOpenChange={() => setDocumentDialogOpen(undefined)}
+			>
+				<DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col items-center justify-center gap-4">
+					<div className="flex flex-col items-center justify-center gap-4 w-full">
+						<ErrorState
+							title="Failed to load document"
+							error={documentError}
+							description="Please try again later."
+							density="comfy"
+						/>
+					</div>
+				</DialogContent>
+			</Dialog>
+		);
+	}
 
-  return (
-    <Dialog
-      open={!!documentDialogOpen}
-      onOpenChange={() => setDocumentDialogOpen(undefined)}
-    >
-      <DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Icon className={`${IconClassName} h-8 w-8`} />
-            <span>{documentName}</span>
-          </DialogTitle>
-        </DialogHeader>
+	return (
+		<Dialog
+			open={!!documentDialogOpen}
+			onOpenChange={() => setDocumentDialogOpen(undefined)}
+		>
+			<DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<Icon className={`${IconClassName} h-8 w-8`} />
+						<span>{documentName}</span>
+					</DialogTitle>
+				</DialogHeader>
 
-        <div className="flex flex-col gap-4 flex-grow overflow-hidden">
-          <div className="flex flex-col gap-2">
-            <div className="text-sm text-muted-foreground">
-              Type:{" "}
-              {document?.type &&
-                document.type.charAt(0).toUpperCase() + document.type.slice(1)}
-            </div>
-            {document?.size && (
-              <div className="text-sm text-muted-foreground">
-                Size: {formatBytes(document.size)}
-              </div>
-            )}
-          </div>
+				<div className="flex flex-col gap-4 flex-grow overflow-hidden">
+					<div className="flex flex-col gap-2">
+						<div className="text-sm text-muted-foreground">
+							Type:{" "}
+							{document?.type &&
+								document.type.charAt(0).toUpperCase() + document.type.slice(1)}
+						</div>
+						{document?.size && (
+							<div className="text-sm text-muted-foreground">
+								Size: {formatBytes(document.size)}
+							</div>
+						)}
+					</div>
 
-          {isDocumentError ||
-            (documentError && (
-              <div className="flex items-center justify-center text-muted-foreground h-full">
-                <ErrorState
-                  density="comfy"
-                  title="Unable to preview document"
-                  error={documentError}
-                />
-              </div>
-            ))}
-          {previewUrl && (
-            <div className="flex-grow relative min-h-0 bg-muted rounded-md border overflow-hidden">
-              {(() => {
-                if (tag === "image") {
-                  return (
-                    <img
-                      src={previewUrl}
-                      alt={documentName}
-                      className="absolute inset-0 w-full h-full object-contain"
-                    />
-                  );
-                } else if (tag === "pdf") {
-                  return (
-                    <object
-                      data={previewUrl}
-                      className="absolute inset-0 w-full h-full"
-                      type="application/pdf"
-                    >
-                      <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-                        PDF preview not supported in your browser. Please
-                        download the file to view it.
-                      </div>
-                    </object>
-                  );
-                } else if (tag === "youtube") {
-                  return (
-                    <iframe
-                      src={previewUrl}
-                      className="absolute inset-0 w-full h-full"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                      allowFullScreen
-                    />
-                  );
-                } else if (tag === "url" || tag === "site") {
-                  return (
-                    <iframe
-                      src={previewUrl}
-                      className="absolute inset-0 w-full h-full"
-                      sandbox="allow-same-origin allow-scripts"
-                      style={{
-                        transform: "scale(0.95)",
-                        transformOrigin: "top left",
-                        width: "105.3%", // 100/0.95 to compensate for scale
-                        height: "105.3%",
-                      }}
-                    />
-                  );
-                } else if (tag === "file") {
-                  // fallback for unknown file types
-                  return (
-                    <object
-                      data={previewUrl}
-                      className="absolute inset-0 w-full h-full"
-                      type="application/octet-stream"
-                    >
-                      <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-                        File preview not supported. Please download the file to
-                        view it.
-                      </div>
-                    </object>
-                  );
-                }
-                return null;
-              })()}
-            </div>
-          )}
-        </div>
+					{isDocumentError ||
+						(documentError && (
+							<div className="flex items-center justify-center text-muted-foreground h-full">
+								<ErrorState
+									density="comfy"
+									title="Unable to preview document"
+									error={documentError}
+								/>
+							</div>
+						))}
+					{previewUrl && (
+						<div className="flex-grow relative min-h-0 bg-muted rounded-md border overflow-hidden">
+							{(() => {
+								if (tag === "image") {
+									return (
+										<img
+											src={previewUrl}
+											alt={documentName}
+											className="absolute inset-0 w-full h-full object-contain"
+										/>
+									);
+								} else if (tag === "pdf") {
+									return (
+										<object
+											data={previewUrl}
+											className="absolute inset-0 w-full h-full"
+											type="application/pdf"
+										>
+											<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+												PDF preview not supported in your browser. Please
+												download the file to view it.
+											</div>
+										</object>
+									);
+								} else if (tag === "youtube") {
+									return (
+										<iframe
+											title="YouTube video player"
+											src={previewUrl}
+											className="absolute inset-0 w-full h-full"
+											allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+											allowFullScreen
+										/>
+									);
+								} else if (tag === "url" || tag === "site") {
+									return (
+										<iframe
+											title="Website preview"
+											src={previewUrl}
+											className="absolute inset-0 w-full h-full"
+											sandbox="allow-same-origin allow-scripts"
+											style={{
+												transform: "scale(0.95)",
+												transformOrigin: "top left",
+												width: "105.3%", // 100/0.95 to compensate for scale
+												height: "105.3%",
+											}}
+										/>
+									);
+								} else if (tag === "file") {
+									// fallback for unknown file types
+									return (
+										<object
+											title="File preview"
+											data={previewUrl}
+											className="absolute inset-0 w-full h-full"
+											type="application/octet-stream"
+										>
+											<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+												File preview not supported. Please download the file to
+												view it.
+											</div>
+										</object>
+									);
+								}
+								return null;
+							})()}
+						</div>
+					)}
+				</div>
 
-        <div className="flex justify-end gap-2 mt-4">
-          {tag === "file" ? (
-            <Button onClick={handleDownload}>Download</Button>
-          ) : tag === "url" || tag === "site" || tag === "youtube" ? (
-            <Button onClick={handleOpen}>
-              Open {tag === "youtube" ? "in YouTube" : "in Browser"}
-            </Button>
-          ) : null}
-          <Button
-            variant="outline"
-            onClick={() => setDocumentDialogOpen(undefined)}
-          >
-            Close
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
+				<div className="flex justify-end gap-2 mt-4">
+					{tag === "file" ? (
+						<Button onClick={handleDownload}>Download</Button>
+					) : tag === "url" || tag === "site" || tag === "youtube" ? (
+						<Button onClick={handleOpen}>
+							Open {tag === "youtube" ? "in YouTube" : "in Browser"}
+						</Button>
+					) : null}
+					<Button
+						variant="outline"
+						onClick={() => setDocumentDialogOpen(undefined)}
+					>
+						Close
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
 };
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 8a2fed9a..842403e6 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -34,32 +34,21 @@ export function TopNav() {
 	const selectedArtifact = useAtomValue(selectedArtifactAtom);
 	const selectedVibzMcp = useAtomValue(selectedVibzMcpAtom);
 	const setUser = useSetAtom(userAtom);
+	const params = useParams({ strict: false });
 	const location = useLocation();
+	const isOnChatRoute = !!params.chatId;
+	const isSettingsRoute = location.pathname.startsWith("/settings");
 
-	const {
-		data: user,
-		isError: isErrorUser,
-		isLoading: isLoadingUser,
-	} = useQuery({
+	const { data: user, isError: isErrorUser } = useQuery({
 		...convexQuery(api.auth.getUser, {}),
 	});
 
-	if (isErrorUser) {
-		return <Navigate to="/auth" />;
-	}
-
 	useEffect(() => {
 		if (user) {
 			setUser(user);
 		}
 	}, [user, setUser]);
 
-	// Check if we're on a chat route by looking for chatId parameter
-	const params = useParams({ strict: false });
-
-	const isOnChatRoute = !!params.chatId;
-	const isSettingsRoute = location.pathname.startsWith("/settings");
-
 	// Minimal global shortcut for toggling resizable panel (Ctrl/Cmd+I)
 	useEffect(() => {
 		if (!isOnChatRoute) return;
@@ -80,6 +69,10 @@ export function TopNav() {
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
 
+	if (isErrorUser) {
+		return <Navigate to="/auth" />;
+	}
+
 	return (
 		<div
 			className={`fixed right-0 py-2 flex items-center w-full bg-transparent justify-between pointer-events-none text-foreground/70 z-50 px-1.5 ${isSettingsRoute ? "hidden" : ""}`}

From bb9cdd871f347f209b36814c20f1ac9cd7ab2195 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:52:15 +0530
Subject: [PATCH 09/12] chore: update dependencies in bun.lock

- Added new dependencies for @dnd-kit components to support drag-and-drop functionality.
- Updated versions for @tanstack/react-query and @tanstack/query-core for improved performance and features.
---
 bun.lock | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/bun.lock b/bun.lock
index 9c378a78..444ec0dc 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,6 +9,9 @@
         "@codesandbox/sandpack-themes": "^2.0.21",
         "@convex-dev/auth": "^0.0.87",
         "@convex-dev/react-query": "^0.0.0-alpha.11",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@isomorphic-git/lightning-fs": "^4.6.2",
         "@langchain/community": "^0.3.47",
         "@langchain/core": "^0.3.61",
@@ -48,6 +51,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.0.6",
+        "@tanstack/react-query": "^5.85.5",
         "@tanstack/react-router": "^1.114.3",
         "@tanstack/react-router-devtools": "^1.114.3",
         "@tanstack/react-virtual": "^3.13.12",
@@ -274,6 +278,14 @@
 
     "@discoveryjs/json-ext": ["@discoveryjs/json-ext@0.5.7", "", {}, "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="],
 
+    "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
+
+    "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
+
+    "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
+
+    "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
+
     "@emnapi/core": ["@emnapi/core@0.45.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-DPWjcUDQkCeEM4VnljEOEcXdAD7pp8zSZsgOujk/LGIwCXWbXJngin+MO4zbH429lzeC3WbYLGjE2MaUOwzpyw=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@0.45.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w=="],
@@ -766,11 +778,11 @@
 
     "@tanstack/history": ["@tanstack/history@1.121.34", "", {}, "sha512-YL8dGi5ZU+xvtav2boRlw4zrRghkY6hvdcmHhA0RGSJ/CBgzv+cbADW9eYJLx74XMZvIQ1pp6VMbrpXnnM5gHA=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.83.1", "", {}, "sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.85.5", "", {}, "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w=="],
 
     "@tanstack/query-devtools": ["@tanstack/query-devtools@5.84.0", "", {}, "sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.84.1", "", { "dependencies": { "@tanstack/query-core": "5.83.1" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-zo7EUygcWJMQfFNWDSG7CBhy8irje/XY0RDVKKV4IQJAysb+ZJkkJPcnQi+KboyGUgT+SQebRFoTqLuTtfoDLw=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.85.5", "", { "dependencies": { "@tanstack/query-core": "5.85.5" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A=="],
 
     "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.84.1", "", { "dependencies": { "@tanstack/query-devtools": "5.84.0" }, "peerDependencies": { "@tanstack/react-query": "^5.84.1", "react": "^18 || ^19" } }, "sha512-nle+OQ9B3Z3EG2R3ixvaNcJ6OeqGwmAc5iMDW6Vj+emLZkWRrN3BDsrzZQu414n34lpxplnC7z1jmKuU/scHCQ=="],
 

From 5ffe8a71e21f77915ba1fc5b2a5884d0f34017f6 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:57:26 +0530
Subject: [PATCH 10/12] refactor: improve DocumentDialog and TopNav components

- Removed unused imports and error handling in DocumentDialog for cleaner code.
- Added preview error state management in DocumentDialog to enhance user feedback.
- Updated TopNav to include retry logic for user query and improved keydown event handling.
- Simplified settings button rendering in TopNav for better accessibility.
---
 src/components/document-dialog.tsx | 95 ++++++++++--------------------
 src/components/topnav.tsx          | 62 ++++++++++---------
 2 files changed, 65 insertions(+), 92 deletions(-)

diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index 2ce96b7b..ed4971ab 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -9,8 +9,6 @@ import { api } from "../../convex/_generated/api";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
 import { Button } from "@/components/ui/button";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
-import { ErrorState } from "@/components/ui/error-state";
 import { getDocTagInfo } from "@/lib/helper";
 import { formatBytes } from "@/lib/utils";
 import { useState, useEffect } from "react";
@@ -20,17 +18,14 @@ export const DocumentDialog = () => {
 	const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
 	const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
 	const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+	const [previewError, setPreviewError] = useState<string | null>(null);
 
-	const {
-		data: document,
-		isLoading: isLoadingDocument,
-		isError: isDocumentError,
-		error: documentError,
-	} = useQuery({
+	const { data: document } = useQuery({
 		...convexQuery(
 			api.documents.queries.get,
 			documentDialogOpen ? { documentId: documentDialogOpen } : "skip",
 		),
+		enabled: !!documentDialogOpen,
 	});
 
 	const { mutateAsync: generateDownloadUrl } = useMutation({
@@ -48,6 +43,7 @@ export const DocumentDialog = () => {
 
 	useEffect(() => {
 		setPreviewUrl(null);
+		setPreviewError(null);
 		const loadPreviewUrl = async () => {
 			if (!document) return;
 			try {
@@ -55,6 +51,7 @@ export const DocumentDialog = () => {
 					case "image":
 					case "pdf":
 					case "file": {
+						// Only files need download URL
 						const url = await generateDownloadUrl({
 							documentId: document._id!,
 						});
@@ -82,8 +79,10 @@ export const DocumentDialog = () => {
 						}
 						break;
 				}
-			} catch (e) {
-				setPreviewUrl(null);
+			} catch (error) {
+				setPreviewError(
+					`Failed to load preview: ${error instanceof Error ? error.message : "Unknown error"}`,
+				);
 			}
 		};
 		loadPreviewUrl();
@@ -100,55 +99,30 @@ export const DocumentDialog = () => {
 			documentId: document._id!,
 		});
 		if (url) {
-			window.open(url, "_blank");
+			const w = window.open(url, "_blank", "noopener,noreferrer");
+			if (w) w.opener = null;
 		}
 	};
 
 	const handleOpen = () => {
 		if (!document) return;
 		if (tag === "url" || tag === "site") {
-			window.open(document.key as string, "_blank");
+			const w = window.open(
+				document.key as string,
+				"_blank",
+				"noopener,noreferrer",
+			);
+			if (w) w.opener = null;
 		} else if (tag === "youtube") {
-			window.open(`https://youtube.com/watch?v=${document.key}`, "_blank");
+			const w = window.open(
+				`https://youtube.com/watch?v=${document.key}`,
+				"_blank",
+				"noopener,noreferrer",
+			);
+			if (w) w.opener = null;
 		}
 	};
 
-	if (isLoadingDocument) {
-		return (
-			<Dialog
-				open={!!documentDialogOpen}
-				onOpenChange={() => setDocumentDialogOpen(undefined)}
-			>
-				<DialogContent className="sm:max-w-[800px] h-[80vh] flex items-center justify-center gap-4">
-					<LoadingSpinner className="h-8 w-8" />
-					<div className="text-muted-foreground text-lg">
-						Loading document...
-					</div>
-				</DialogContent>
-			</Dialog>
-		);
-	}
-
-	if (isDocumentError || documentError) {
-		return (
-			<Dialog
-				open={!!documentDialogOpen}
-				onOpenChange={() => setDocumentDialogOpen(undefined)}
-			>
-				<DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col items-center justify-center gap-4">
-					<div className="flex flex-col items-center justify-center gap-4 w-full">
-						<ErrorState
-							title="Failed to load document"
-							error={documentError}
-							description="Please try again later."
-							density="comfy"
-						/>
-					</div>
-				</DialogContent>
-			</Dialog>
-		);
-	}
-
 	return (
 		<Dialog
 			open={!!documentDialogOpen}
@@ -176,17 +150,13 @@ export const DocumentDialog = () => {
 						)}
 					</div>
 
-					{isDocumentError ||
-						(documentError && (
-							<div className="flex items-center justify-center text-muted-foreground h-full">
-								<ErrorState
-									density="comfy"
-									title="Unable to preview document"
-									error={documentError}
-								/>
+					{previewError ? (
+						<div className="flex-grow flex items-center justify-center bg-muted rounded-md border">
+							<div className="text-center text-muted-foreground">
+								{previewError}
 							</div>
-						))}
-					{previewUrl && (
+						</div>
+					) : previewUrl ? (
 						<div className="flex-grow relative min-h-0 bg-muted rounded-md border overflow-hidden">
 							{(() => {
 								if (tag === "image") {
@@ -213,7 +183,7 @@ export const DocumentDialog = () => {
 								} else if (tag === "youtube") {
 									return (
 										<iframe
-											title="YouTube video player"
+											title={`YouTube video: ${documentName}`}
 											src={previewUrl}
 											className="absolute inset-0 w-full h-full"
 											allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -223,7 +193,7 @@ export const DocumentDialog = () => {
 								} else if (tag === "url" || tag === "site") {
 									return (
 										<iframe
-											title="Website preview"
+											title={`Website preview: ${documentName}`}
 											src={previewUrl}
 											className="absolute inset-0 w-full h-full"
 											sandbox="allow-same-origin allow-scripts"
@@ -239,7 +209,6 @@ export const DocumentDialog = () => {
 									// fallback for unknown file types
 									return (
 										<object
-											title="File preview"
 											data={previewUrl}
 											className="absolute inset-0 w-full h-full"
 											type="application/octet-stream"
@@ -254,7 +223,7 @@ export const DocumentDialog = () => {
 								return null;
 							})()}
 						</div>
-					)}
+					) : null}
 				</div>
 
 				<div className="flex justify-end gap-2 mt-4">
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 842403e6..0695c32f 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -11,20 +11,15 @@ import {
 	PanelRightCloseIcon,
 	PlusIcon,
 	PanelRightOpenIcon,
-	Settings2Icon,
 } from "lucide-react";
 import { Button } from "./ui/button";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import {
-	Navigate,
-	useLocation,
-	useNavigate,
-	useParams,
-} from "@tanstack/react-router";
+import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { convexQuery } from "@convex-dev/react-query";
 import { api } from "../../convex/_generated/api";
 import { useEffect } from "react";
+import { Settings2Icon } from "lucide-react";
 
 export function TopNav() {
 	const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);
@@ -34,13 +29,17 @@ export function TopNav() {
 	const selectedArtifact = useAtomValue(selectedArtifactAtom);
 	const selectedVibzMcp = useAtomValue(selectedVibzMcpAtom);
 	const setUser = useSetAtom(userAtom);
-	const params = useParams({ strict: false });
 	const location = useLocation();
-	const isOnChatRoute = !!params.chatId;
-	const isSettingsRoute = location.pathname.startsWith("/settings");
 
-	const { data: user, isError: isErrorUser } = useQuery({
+	function isUnauthorized(err: unknown) {
+		return err instanceof Error && err.message.includes("401");
+	}
+
+	const { data: user } = useQuery({
 		...convexQuery(api.auth.getUser, {}),
+		// Avoid looping on auth errors; tolerate brief transient failures.
+		retry: (failureCount, err) => !isUnauthorized(err) && failureCount < 2,
+		staleTime: 5 * 60 * 1000,
 	});
 
 	useEffect(() => {
@@ -49,7 +48,12 @@ export function TopNav() {
 		}
 	}, [user, setUser]);
 
-	// Minimal global shortcut for toggling resizable panel (Ctrl/Cmd+I)
+	// Check if we're on a chat route by looking for chatId parameter
+	const params = useParams({ strict: false });
+	const isOnChatRoute = !!params.chatId;
+	const isSettingsRoute = location.pathname.startsWith("/settings");
+
+	// Global shortcut for toggling resizable panel (Ctrl/Cmd+I)
 	useEffect(() => {
 		if (!isOnChatRoute) return;
 		const handleKeyDown = (event: KeyboardEvent) => {
@@ -65,14 +69,11 @@ export function TopNav() {
 				});
 			}
 		};
+
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
 
-	if (isErrorUser) {
-		return <Navigate to="/auth" />;
-	}
-
 	return (
 		<div
 			className={`fixed right-0 py-2 flex items-center w-full bg-transparent justify-between pointer-events-none text-foreground/70 z-50 px-1.5 ${isSettingsRoute ? "hidden" : ""}`}
@@ -96,19 +97,22 @@ export function TopNav() {
 			<div
 				className={`flex items-center gap-1 justify-center top-0 right-0 p-0.5 pointer-events-auto  rounded-lg ${resizePanelOpen ? "border border-transparent translate-y-[.05rem]" : "bg-accent dark:bg-primary/10 backdrop-blur-sm border-border/40 border"} `}
 			>
-				{!resizePanelOpen ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="cursor-pointer"
-						onClick={() => {
-							navigate({ to: "/settings/profile" });
-						}}
-					>
-						<Settings2Icon className="h-6 w-6" />
-					</Button>
-				) : null}
-				{!resizePanelOpen ? <ModeToggle /> : null}
+				{!resizePanelOpen && (
+					<>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="cursor-pointer"
+							aria-label="Open settings"
+							onClick={() => {
+								navigate({ to: "/settings/profile" });
+							}}
+						>
+							<Settings2Icon className="h-6 w-6" />
+						</Button>
+						<ModeToggle />
+					</>
+				)}
 				{isOnChatRoute && (
 					<Button
 						variant="ghost"

From 66ed6e1f300bebd19119067690e5ed97f4a18f9f Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 26 Aug 2025 13:50:09 +0530
Subject: [PATCH 11/12] refactor: enhance DocumentDialog and TopNav components

- Added URL validation in DocumentDialog to ensure only safe links are processed.
- Improved error handling for invalid URLs in DocumentDialog's preview functionality.
- Updated TopNav to navigate to the authentication page on user query errors.
- Refactored code for better readability and consistency across components.
---
 .../chat/messages/utils-bar/index.ts          | 110 ++---
 .../messages/utils-bar/user-utils-bar.tsx     | 425 +++++++++---------
 src/components/document-dialog.tsx            |  72 ++-
 src/components/topnav.tsx                     |  15 +-
 src/components/ui/tooltip-button.tsx          |  61 +--
 5 files changed, 361 insertions(+), 322 deletions(-)

diff --git a/src/components/chat/messages/utils-bar/index.ts b/src/components/chat/messages/utils-bar/index.ts
index c7bedae8..cf624c3f 100644
--- a/src/components/chat/messages/utils-bar/index.ts
+++ b/src/components/chat/messages/utils-bar/index.ts
@@ -11,66 +11,66 @@ export { AiUtilsBar } from "./ai-utils-bar";
 
 // Helper function for navigation logic
 const navigateToChat = (
-  navigate: ReturnType<typeof useNavigate>,
-  chatId: Id<"chats">,
+	navigate: ReturnType<typeof useNavigate>,
+	chatId: Id<"chats">,
 ) => {
-  navigate({
-    to: "/chat/$chatId",
-    params: { chatId },
-  });
+	navigate({
+		to: "/chat/$chatId",
+		params: { chatId },
+	});
 };
 
 export function useMessageActions() {
-  const regenerate = useAction(api.langchain.index.regenerate);
-  const branchChat = useAction(api.langchain.index.branchChat);
-  const chat = useAction(api.langchain.index.chat);
-  const navigate = useNavigate();
-  const navigateBranch = useNavigateBranch();
-  const { mutateAsync: updateChatMutation } = useMutation({
-    mutationFn: useConvexMutation(api.chats.mutations.update),
-  });
+	const regenerate = useAction(api.langchain.index.regenerate);
+	const branchChat = useAction(api.langchain.index.branchChat);
+	const chat = useAction(api.langchain.index.chat);
+	const navigate = useNavigate();
+	const navigateBranch = useNavigateBranch();
+	const { mutateAsync: updateChatMutation } = useMutation({
+		mutationFn: useConvexMutation(api.chats.mutations.update),
+	});
 
-  const handleBranch = async (
-    input: MessageWithBranchInfo,
-    model?: string,
-    editedContent?: { text?: string; documents?: Id<"documents">[] },
-  ) => {
-    const result = await branchChat({
-      chatId: input.message.chatId!,
-      branchFrom: input.message._id,
-      ...(model && { model }),
-      ...(editedContent && { editedContent }),
-    });
-    if (result?.newChatId) {
-      // Model is already persisted by branchChat; start chat without forwarding model
-      chat({
-        chatId: result.newChatId,
-      });
-      navigateToChat(navigate, result.newChatId);
-    }
-  };
+	const handleBranch = async (
+		input: MessageWithBranchInfo,
+		model?: string,
+		editedContent?: { text?: string; documents?: Id<"documents">[] },
+	) => {
+		const result = await branchChat({
+			chatId: input.message.chatId,
+			branchFrom: input.message._id,
+			...(model && { model }),
+			...(editedContent && { editedContent }),
+		});
+		if (result?.newChatId) {
+			// Model is already persisted by branchChat; start chat without forwarding model
+			chat({
+				chatId: result.newChatId,
+			});
+			navigateToChat(navigate, result.newChatId);
+		}
+	};
 
-  const handleRegenerate = async (
-    input: MessageWithBranchInfo,
-    model?: string,
-  ) => {
-    navigateBranch?.(input.depth, "next", input.totalBranches);
-    // If the model is provided, update the chat with the new model or
-    if (model) {
-      await updateChatMutation({
-        chatId: input.message.chatId!,
-        updates: { model },
-      });
-    }
-    await regenerate({
-      messageId: input.message._id,
-    });
-  };
+	const handleRegenerate = async (
+		input: MessageWithBranchInfo,
+		model?: string,
+	) => {
+		navigateBranch?.(input.depth, "next", input.totalBranches);
+		// If the model is provided, update the chat with the new model or
+		if (model) {
+			await updateChatMutation({
+				chatId: input.message.chatId,
+				updates: { model },
+			});
+		}
+		await regenerate({
+			messageId: input.message._id,
+		});
+	};
 
-  return {
-    handleBranch,
-    handleRegenerate,
-    navigate,
-    navigateBranch,
-  };
+	return {
+		handleBranch,
+		handleRegenerate,
+		navigate,
+		navigateBranch,
+	};
 }
diff --git a/src/components/chat/messages/utils-bar/user-utils-bar.tsx b/src/components/chat/messages/utils-bar/user-utils-bar.tsx
index 0d35bf41..d0b9f271 100644
--- a/src/components/chat/messages/utils-bar/user-utils-bar.tsx
+++ b/src/components/chat/messages/utils-bar/user-utils-bar.tsx
@@ -3,13 +3,13 @@ import type { Dispatch, SetStateAction } from "react";
 import { BranchNavigation } from "./branch-navigation";
 import { Button } from "@/components/ui/button";
 import {
-  Check,
-  CheckCheck,
-  GitBranch,
-  Pencil,
-  RefreshCcw,
-  X,
-  PaperclipIcon,
+	Check,
+	CheckCheck,
+	GitBranch,
+	Pencil,
+	RefreshCcw,
+	X,
+	PaperclipIcon,
 } from "lucide-react";
 import { ActionDropdown } from "./action-dropdown";
 import { useMutation, useAction } from "convex/react";
@@ -22,222 +22,231 @@ import { useMessageActions } from "./index";
 import { useUploadDocuments } from "@/hooks/chats/use-documents";
 
 interface MessageContent {
-  type: string;
-  text?: string;
+	type: string;
+	text?: string;
 }
 
 interface UserUtilsBarProps {
-  input: MessageWithBranchInfo;
-  isEditing?: boolean;
-  setEditing?: Dispatch<SetStateAction<string | null>>;
-  editedText?: string;
-  editedDocuments?: Id<"documents">[];
-  onDone?: () => void;
-  onDocumentsChange?: (documents: Id<"documents">[]) => void;
+	input: MessageWithBranchInfo;
+	isEditing?: boolean;
+	setEditing?: Dispatch<SetStateAction<string | null>>;
+	editedText?: string;
+	editedDocuments?: Id<"documents">[];
+	onDone?: () => void;
+	onDocumentsChange?: (documents: Id<"documents">[]) => void;
 }
 
 export const UserUtilsBar = memo(
-  ({
-    input,
-    isEditing,
-    setEditing,
-    editedText,
-    editedDocuments,
-    onDone,
-    onDocumentsChange,
-  }: UserUtilsBarProps) => {
-    const { handleBranch, handleRegenerate, navigateBranch } =
-      useMessageActions();
-    const updateMessage = useMutation(api.chatMessages.mutations.updateInput);
-    const chat = useAction(api.langchain.index.chat);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const [isDragActive, setIsDragActive] = useState(false);
-    const handleFileUpload = useUploadDocuments({ type: "file" });
+	({
+		input,
+		isEditing,
+		setEditing,
+		editedText,
+		editedDocuments,
+		onDone,
+		onDocumentsChange,
+	}: UserUtilsBarProps) => {
+		const { handleBranch, handleRegenerate, navigateBranch } =
+			useMessageActions();
+		const updateMessage = useMutation(api.chatMessages.mutations.updateInput);
+		const chat = useAction(api.langchain.index.chat);
+		const fileInputRef = useRef<HTMLInputElement>(null);
+		const [isDragActive, setIsDragActive] = useState(false);
+		const handleFileUpload = useUploadDocuments({ type: "file" });
 
-    // File upload handlers for editing
-    const handleFileInputChange = useCallback(
-      async (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-          const uploadedIds = await handleFileUpload(e.target.files);
-          if (uploadedIds && onDocumentsChange) {
-            onDocumentsChange([...(editedDocuments || []), ...uploadedIds]);
-          }
-        }
-      },
-      [handleFileUpload, editedDocuments, onDocumentsChange]
-    );
+		// File upload handlers for editing
+		const handleFileInputChange = useCallback(
+			async (e: React.ChangeEvent<HTMLInputElement>) => {
+				if (e.target.files && e.target.files.length > 0) {
+					const uploadedIds = await handleFileUpload(e.target.files);
+					if (uploadedIds && onDocumentsChange) {
+						onDocumentsChange([...(editedDocuments || []), ...uploadedIds]);
+					}
+				}
+			},
+			[handleFileUpload, editedDocuments, onDocumentsChange],
+		);
 
-    const handleDrop = useCallback(
-      async (e: React.DragEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        setIsDragActive(false);
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-          const uploadedIds = await handleFileUpload(e.dataTransfer.files);
-          if (uploadedIds && onDocumentsChange) {
-            onDocumentsChange([...(editedDocuments || []), ...uploadedIds]);
-          }
-        }
-      },
-      [handleFileUpload, editedDocuments, onDocumentsChange]
-    );
+		const handleDrop = useCallback(
+			async (e: React.DragEvent<HTMLDivElement>) => {
+				e.preventDefault();
+				setIsDragActive(false);
+				if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+					const uploadedIds = await handleFileUpload(e.dataTransfer.files);
+					if (uploadedIds && onDocumentsChange) {
+						onDocumentsChange([...(editedDocuments || []), ...uploadedIds]);
+					}
+				}
+			},
+			[handleFileUpload, editedDocuments, onDocumentsChange],
+		);
 
-    const handleDragOver = useCallback(
-      (e: React.DragEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        if (!isDragActive) setIsDragActive(true);
-      },
-      [isDragActive]
-    );
+		const handleDragOver = useCallback(
+			(e: React.DragEvent<HTMLDivElement>) => {
+				e.preventDefault();
+				if (!isDragActive) setIsDragActive(true);
+			},
+			[isDragActive],
+		);
 
-    const handleDragLeave = useCallback(
-      (e: React.DragEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        if (e.currentTarget.contains(e.relatedTarget as Node)) return;
-        setIsDragActive(false);
-      },
-      []
-    );
+		const handleDragLeave = useCallback(
+			(e: React.DragEvent<HTMLDivElement>) => {
+				e.preventDefault();
+				if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+				setIsDragActive(false);
+			},
+			[],
+		);
 
-    const copyText = (() => {
-      const content = input?.message.message.content;
-      if (!content) return "";
+		const copyText = (() => {
+			const content = input?.message.message.content;
+			if (!content) return "";
 
-      if (Array.isArray(content)) {
-        const textContent = (content as MessageContent[]).find(
-          (entry) => entry.type === "text"
-        );
-        return textContent?.text || "";
-      }
-      return typeof content === "string" ? content : "";
-    })();
+			if (Array.isArray(content)) {
+				const textContent = (content as MessageContent[]).find(
+					(entry) => entry.type === "text",
+				);
+				return textContent?.text || "";
+			}
+			return typeof content === "string" ? content : "";
+		})();
 
-    const handleSubmit = (applySame: boolean) => {
-      if (applySame === false) {
-        navigateBranch?.(input.depth, input.totalBranches);
-      }
-      updateMessage({
-        id: input.message._id as Id<"chatMessages">,
-        updates: { text: editedText!, documents: editedDocuments || [] },
-        applySame: applySame,
-      }).then(() => {
-        if (applySame === false) {
-          chat({ chatId: input.message.chatId! });
-        }
-      });
-      onDone?.();
-    };
+		const handleSubmit = (applySame: boolean) => {
+			if (!editedText) return;
 
-    if (isEditing) {
-      return (
-        <div
-          className="flex flex-row items-center gap-1 self-start "
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-        >
-          <input
-            type="file"
-            ref={fileInputRef}
-            className="hidden"
-            multiple
-            onChange={handleFileInputChange}
-          />
-          <TooltipButton
-            onClick={() => setEditing?.(null)}
-            icon={<X className="h-4 w-4 text-foreground/70 " />}
-            tooltip="Cancel"
-          />
-          <TooltipButton
-            onClick={() => handleSubmit(true)}
-            icon={<Check className="h-4 w-4 text-foreground/70 " />}
-            tooltip="Submit"
-            ariaLabel="Submit"
-          />
-          <TooltipButton
-            onClick={() => handleSubmit(false)}
-            icon={<CheckCheck className="h-4 w-4 text-foreground/70" />}
-            tooltip="Submit and Regenerate"
-            ariaLabel="Submit and Regenerate"
-          />
-          <ActionDropdown
-            trigger={
-              <Button variant="ghost" size="icon" className="cursor-pointer">
-                <GitBranch className="h-4 w-4 text-foreground/70 " />
-              </Button>
-            }
-            actionLabel={
-              <>
-                <GitBranch className="h-4 w-4 mr-2" />
-                Branch from edited
-              </>
-            }
-            onAction={() =>
-              handleBranch(input, undefined, {
-                text: editedText,
-                documents: editedDocuments,
-              })
-            }
-            onActionWithModel={(model) =>
-              handleBranch(input, model, {
-                text: editedText,
-                documents: editedDocuments,
-              })
-            }
-          />
-          <TooltipButton
-            onClick={() => fileInputRef.current?.click()}
-            icon={<PaperclipIcon className="h-4 w-4 text-foreground/70" />}
-            tooltip="Attach files"
-          />
-        </div>
-      );
-    }
+			if (applySame === false) {
+				navigateBranch?.(input.depth, "next", input.totalBranches);
+			}
+			updateMessage({
+				id: input.message._id as Id<"chatMessages">,
+				updates: { text: editedText, documents: editedDocuments || [] },
+				applySame: applySame,
+			}).then(() => {
+				if (applySame === false) {
+					chat({ chatId: input.message.chatId });
+				}
+			});
+			onDone?.();
+		};
 
-    return (
-      <div className={`flex flex-row items-center gap-1 self-start opacity-70`}>
-        <BranchNavigation item={input} navigateBranch={navigateBranch!} />
-        {setEditing && (
-          <TooltipButton
-            onClick={() => setEditing(input.message._id)}
-            icon={<Pencil className="h-4 w-4" />}
-            tooltip="Edit"
-            ariaLabel="Edit"
-          />
-        )}
-        <ActionDropdown
-          trigger={
-            <Button variant="ghost" size="icon" className="cursor-pointer">
-              <GitBranch className="h-4 w-4" />
-            </Button>
-          }
-          actionLabel={
-            <>
-              <GitBranch className="h-4 w-4 mr-2 cursor-pointer" />
-              Branch
-            </>
-          }
-          onAction={() => handleBranch(input)}
-          onActionWithModel={(model) => handleBranch(input, model)}
-        />
-        <ActionDropdown
-          trigger={
-            <Button variant="ghost" size="icon" className="cursor-pointer">
-              <RefreshCcw className="h-4 w-4" />
-            </Button>
-          }
-          actionLabel={
-            <>
-              <RefreshCcw className="h-4 w-4 mr-2 cursor-pointer" />
-              Regenerate
-            </>
-          }
-          onAction={() => handleRegenerate(input)}
-          onActionWithModel={(model) => handleRegenerate(input, model)}
-        />
-        {copyText && <CopyButton className="cursor-pointer" text={copyText} />}
-      </div>
-    );
-  }
+		if (isEditing) {
+			return (
+				<div
+					className="flex flex-row items-center gap-1 self-start cursor-pointer"
+					onDrop={handleDrop}
+					onDragOver={handleDragOver}
+					onDragLeave={handleDragLeave}
+				>
+					<input
+						type="file"
+						ref={fileInputRef}
+						className="hidden"
+						multiple
+						onChange={handleFileInputChange}
+					/>
+					<TooltipButton
+						onClick={() => setEditing?.(null)}
+						icon={<X className="h-4 w-4 text-foreground/70 cursor-pointer " />}
+						tooltip="Cancel"
+					/>
+					<TooltipButton
+						onClick={() => handleSubmit(true)}
+						disabled={!editedText || editedText.length === 0}
+						icon={<Check className="h-4 w-4 text-foreground/70 " />}
+						tooltip="Submit"
+						ariaLabel="Submit"
+					/>
+					<TooltipButton
+						onClick={() => handleSubmit(false)}
+						disabled={!editedText || editedText.length === 0}
+						icon={<CheckCheck className="h-4 w-4 text-foreground/70" />}
+						tooltip="Submit and Regenerate"
+						ariaLabel="Submit and Regenerate"
+					/>
+					<ActionDropdown
+						trigger={
+							<Button
+								variant="ghost"
+								size="icon"
+								className="cursor-pointer "
+								disabled={!editedText || editedText.length === 0}
+							>
+								<GitBranch className="h-4 w-4 text-foreground/70 " />
+							</Button>
+						}
+						actionLabel={
+							<>
+								<GitBranch className="h-4 w-4 mr-2" />
+								Branch from edited
+							</>
+						}
+						onAction={() =>
+							handleBranch(input, undefined, {
+								text: editedText,
+								documents: editedDocuments,
+							})
+						}
+						onActionWithModel={(model) =>
+							handleBranch(input, model, {
+								text: editedText,
+								documents: editedDocuments,
+							})
+						}
+					/>
+					<TooltipButton
+						onClick={() => fileInputRef.current?.click()}
+						icon={<PaperclipIcon className="h-4 w-4 text-foreground/70" />}
+						tooltip="Attach files"
+					/>
+				</div>
+			);
+		}
+
+		return (
+			<div className={`flex flex-row items-center gap-1 self-start opacity-70`}>
+				<BranchNavigation item={input} navigateBranch={navigateBranch!} />
+				{setEditing && (
+					<TooltipButton
+						onClick={() => setEditing(input.message._id)}
+						icon={<Pencil className="h-4 w-4" />}
+						tooltip="Edit"
+						ariaLabel="Edit"
+					/>
+				)}
+				<ActionDropdown
+					trigger={
+						<Button variant="ghost" size="icon" className="cursor-pointer">
+							<GitBranch className="h-4 w-4" />
+						</Button>
+					}
+					actionLabel={
+						<>
+							<GitBranch className="h-4 w-4 mr-2 cursor-pointer" />
+							Branch
+						</>
+					}
+					onAction={() => handleBranch(input)}
+					onActionWithModel={(model) => handleBranch(input, model)}
+				/>
+				<ActionDropdown
+					trigger={
+						<Button variant="ghost" size="icon" className="cursor-pointer">
+							<RefreshCcw className="h-4 w-4" />
+						</Button>
+					}
+					actionLabel={
+						<>
+							<RefreshCcw className="h-4 w-4 mr-2 cursor-pointer" />
+							Regenerate
+						</>
+					}
+					onAction={() => handleRegenerate(input)}
+					onActionWithModel={(model) => handleRegenerate(input, model)}
+				/>
+				{copyText && <CopyButton className="cursor-pointer" text={copyText} />}
+			</div>
+		);
+	},
 );
 
 UserUtilsBar.displayName = "UserUtilsBar";
diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index ed4971ab..c2e84af8 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -14,6 +14,16 @@ import { formatBytes } from "@/lib/utils";
 import { useState, useEffect } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
 
+// Helper function to validate URLs to only allow http and https schemes
+const isValidExternalUrl = (url: string): boolean => {
+	try {
+		const parsed = new URL(url);
+		return parsed.protocol === "http:" || parsed.protocol === "https:";
+	} catch {
+		return false;
+	}
+};
+
 export const DocumentDialog = () => {
 	const documentDialogOpen = useAtomValue(documentDialogOpenAtom);
 	const setDocumentDialogOpen = useSetAtom(documentDialogOpenAtom);
@@ -52,15 +62,21 @@ export const DocumentDialog = () => {
 					case "pdf":
 					case "file": {
 						// Only files need download URL
+
 						const url = await generateDownloadUrl({
-							documentId: document._id!,
+							documentId: document._id,
 						});
 						setPreviewUrl(url);
 						break;
 					}
 					case "url":
 					case "site": {
-						setPreviewUrl(document.key as string);
+						const externalUrl = document.key as string;
+						if (isValidExternalUrl(externalUrl)) {
+							setPreviewUrl(externalUrl);
+						} else {
+							setPreviewError("Invalid or unsafe URL");
+						}
 						break;
 					}
 					case "youtube": {
@@ -70,7 +86,7 @@ export const DocumentDialog = () => {
 					default:
 						if (["file", "text", "github"].includes(document.type)) {
 							const url = await generateDownloadUrl({
-								documentId: document._id!,
+								documentId: document._id,
 							});
 							setPreviewUrl(url);
 							break;
@@ -96,7 +112,7 @@ export const DocumentDialog = () => {
 	const handleDownload = async () => {
 		if (!document || tag !== "file") return;
 		const url = await generateDownloadUrl({
-			documentId: document._id!,
+			documentId: document._id,
 		});
 		if (url) {
 			const w = window.open(url, "_blank", "noopener,noreferrer");
@@ -107,12 +123,11 @@ export const DocumentDialog = () => {
 	const handleOpen = () => {
 		if (!document) return;
 		if (tag === "url" || tag === "site") {
-			const w = window.open(
-				document.key as string,
-				"_blank",
-				"noopener,noreferrer",
-			);
-			if (w) w.opener = null;
+			const externalUrl = document.key as string;
+			if (isValidExternalUrl(externalUrl)) {
+				const w = window.open(externalUrl, "_blank", "noopener,noreferrer");
+				if (w) w.opener = null;
+			}
 		} else if (tag === "youtube") {
 			const w = window.open(
 				`https://youtube.com/watch?v=${document.key}`,
@@ -191,20 +206,29 @@ export const DocumentDialog = () => {
 										/>
 									);
 								} else if (tag === "url" || tag === "site") {
-									return (
-										<iframe
-											title={`Website preview: ${documentName}`}
-											src={previewUrl}
-											className="absolute inset-0 w-full h-full"
-											sandbox="allow-same-origin allow-scripts"
-											style={{
-												transform: "scale(0.95)",
-												transformOrigin: "top left",
-												width: "105.3%", // 100/0.95 to compensate for scale
-												height: "105.3%",
-											}}
-										/>
-									);
+									// Only render iframe if URL is valid and safe
+									if (isValidExternalUrl(previewUrl)) {
+										return (
+											<iframe
+												title={`Website preview: ${documentName}`}
+												src={previewUrl}
+												className="absolute inset-0 w-full h-full"
+												sandbox="allow-same-origin allow-scripts"
+												style={{
+													transform: "scale(0.95)",
+													transformOrigin: "top left",
+													width: "105.3%", // 100/0.95 to compensate for scale
+													height: "105.3%",
+												}}
+											/>
+										);
+									} else {
+										return (
+											<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+												Invalid or unsafe URL for preview
+											</div>
+										);
+									}
 								} else if (tag === "file") {
 									// fallback for unknown file types
 									return (
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index 0695c32f..dfb954a5 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -20,6 +20,7 @@ import { convexQuery } from "@convex-dev/react-query";
 import { api } from "../../convex/_generated/api";
 import { useEffect } from "react";
 import { Settings2Icon } from "lucide-react";
+import { Navigate } from "@tanstack/react-router";
 
 export function TopNav() {
 	const [resizePanelOpen, setResizePanelOpen] = useAtom(resizePanelOpenAtom);
@@ -30,12 +31,15 @@ export function TopNav() {
 	const selectedVibzMcp = useAtomValue(selectedVibzMcpAtom);
 	const setUser = useSetAtom(userAtom);
 	const location = useLocation();
+	const params = useParams({ strict: false });
+	const isOnChatRoute = !!params.chatId;
+	const isSettingsRoute = location.pathname.startsWith("/settings");
 
 	function isUnauthorized(err: unknown) {
 		return err instanceof Error && err.message.includes("401");
 	}
 
-	const { data: user } = useQuery({
+	const { data: user, isError: isErrorUser } = useQuery({
 		...convexQuery(api.auth.getUser, {}),
 		// Avoid looping on auth errors; tolerate brief transient failures.
 		retry: (failureCount, err) => !isUnauthorized(err) && failureCount < 2,
@@ -48,11 +52,6 @@ export function TopNav() {
 		}
 	}, [user, setUser]);
 
-	// Check if we're on a chat route by looking for chatId parameter
-	const params = useParams({ strict: false });
-	const isOnChatRoute = !!params.chatId;
-	const isSettingsRoute = location.pathname.startsWith("/settings");
-
 	// Global shortcut for toggling resizable panel (Ctrl/Cmd+I)
 	useEffect(() => {
 		if (!isOnChatRoute) return;
@@ -74,6 +73,10 @@ export function TopNav() {
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [isOnChatRoute, setResizePanelOpen, setSelectedArtifact]);
 
+	if (isErrorUser) {
+		return <Navigate to="/auth" />;
+	}
+
 	return (
 		<div
 			className={`fixed right-0 py-2 flex items-center w-full bg-transparent justify-between pointer-events-none text-foreground/70 z-50 px-1.5 ${isSettingsRoute ? "hidden" : ""}`}
diff --git a/src/components/ui/tooltip-button.tsx b/src/components/ui/tooltip-button.tsx
index e26ed9ea..985e2a12 100644
--- a/src/components/ui/tooltip-button.tsx
+++ b/src/components/ui/tooltip-button.tsx
@@ -1,38 +1,41 @@
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { ReactNode } from "react";
-import { Button } from "./button";
+import { Button } from "@/components/ui/button";
 
 // Helper component to reduce tooltip boilerplate
 export const TooltipButton = ({
-  onClick,
-  icon,
-  tooltip,
-  ariaLabel,
+	onClick,
+	icon,
+	tooltip,
+	disabled,
+	ariaLabel,
 }: {
-  onClick: () => void;
-  icon: ReactNode;
-  tooltip: string;
-  ariaLabel?: string;
+	onClick: () => void;
+	icon: ReactNode;
+	tooltip: string;
+	ariaLabel?: string;
+	disabled?: boolean;
 }) => (
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onClick}
-          aria-label={ariaLabel}
-          className="cursor-pointer"
-        >
-          {icon}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>{tooltip}</TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
+	<TooltipProvider>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={onClick}
+					aria-label={ariaLabel}
+					className="cursor-pointer"
+					disabled={disabled}
+				>
+					{icon}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>{tooltip}</TooltipContent>
+		</Tooltip>
+	</TooltipProvider>
 );

From b5adc1c6bcca972fb251dc5d74a09a3500b9bc8e Mon Sep 17 00:00:00 2001
From: Shivam Sharma <91240327+shivamhwp@users.noreply.github.com>
Date: Tue, 26 Aug 2025 14:49:04 +0530
Subject: [PATCH 12/12] refactor: enhance user experience in components

- Updated DocumentDialog to remove unnecessary line and improve code clarity.
- Refined TopNav's error handling for unauthorized access with additional checks.
- Improved drag event handling in UserUtilsBar for better user interaction.
- Enhanced TooltipButton to provide a disabled state with appropriate styling.
---
 .../messages/utils-bar/user-utils-bar.tsx     |  3 +-
 src/components/document-dialog.tsx            |  3 +-
 src/components/topnav.tsx                     |  9 ++++-
 src/components/ui/tooltip-button.tsx          | 35 +++++++++++++------
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/components/chat/messages/utils-bar/user-utils-bar.tsx b/src/components/chat/messages/utils-bar/user-utils-bar.tsx
index d0b9f271..18c5e8bc 100644
--- a/src/components/chat/messages/utils-bar/user-utils-bar.tsx
+++ b/src/components/chat/messages/utils-bar/user-utils-bar.tsx
@@ -92,7 +92,8 @@ export const UserUtilsBar = memo(
 		const handleDragLeave = useCallback(
 			(e: React.DragEvent<HTMLDivElement>) => {
 				e.preventDefault();
-				if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+				const next = (e.relatedTarget as Node | null) ?? null;
+				if (next && e.currentTarget.contains(next)) return;
 				setIsDragActive(false);
 			},
 			[],
diff --git a/src/components/document-dialog.tsx b/src/components/document-dialog.tsx
index c2e84af8..f02381a8 100644
--- a/src/components/document-dialog.tsx
+++ b/src/components/document-dialog.tsx
@@ -62,7 +62,6 @@ export const DocumentDialog = () => {
 					case "pdf":
 					case "file": {
 						// Only files need download URL
-
 						const url = await generateDownloadUrl({
 							documentId: document._id,
 						});
@@ -213,7 +212,7 @@ export const DocumentDialog = () => {
 												title={`Website preview: ${documentName}`}
 												src={previewUrl}
 												className="absolute inset-0 w-full h-full"
-												sandbox="allow-same-origin allow-scripts"
+												sandbox="allow-scripts"
 												style={{
 													transform: "scale(0.95)",
 													transformOrigin: "top left",
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index dfb954a5..062f4aec 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -36,7 +36,14 @@ export function TopNav() {
 	const isSettingsRoute = location.pathname.startsWith("/settings");
 
 	function isUnauthorized(err: unknown) {
-		return err instanceof Error && err.message.includes("401");
+		const e = err as any;
+		return (
+			e?.response?.status === 401 ||
+			e?.status === 401 ||
+			e?.code === "UNAUTHENTICATED" ||
+			e?.code === "UNAUTHORIZED" ||
+			(e instanceof Error && /\b401\b/.test(e.message))
+		);
 	}
 
 	const { data: user, isError: isErrorUser } = useQuery({
diff --git a/src/components/ui/tooltip-button.tsx b/src/components/ui/tooltip-button.tsx
index 985e2a12..bf6561c8 100644
--- a/src/components/ui/tooltip-button.tsx
+++ b/src/components/ui/tooltip-button.tsx
@@ -24,16 +24,31 @@ export const TooltipButton = ({
 	<TooltipProvider>
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					onClick={onClick}
-					aria-label={ariaLabel}
-					className="cursor-pointer"
-					disabled={disabled}
-				>
-					{icon}
-				</Button>
+				{disabled ? (
+					<span className="inline-flex" aria-disabled="true">
+						<Button
+							variant="ghost"
+							size="icon"
+							type="button"
+							aria-label={ariaLabel ?? tooltip}
+							disabled
+							onClick={undefined}
+							className="cursor-not-allowed"
+						>
+							{icon}
+						</Button>
+					</span>
+				) : (
+					<Button
+						variant="ghost"
+						size="icon"
+						type="button"
+						onClick={onClick}
+						aria-label={ariaLabel ?? tooltip}
+					>
+						{icon}
+					</Button>
+				)}
 			</TooltipTrigger>
 			<TooltipContent>{tooltip}</TooltipContent>
 		</Tooltip>