Merge pull request 'Refactor frontend to hook-based architecture' (#33) from refactor/frontend-hooks into main

Reviewed-on: #33

raggr-frontend/src/App.tsx

@@ -1,48 +1,13 @@
-import { useState, useEffect } from "react";
-
 import "./App.css";
 import { AuthProvider } from "./contexts/AuthContext";
 import { ChatScreen } from "./components/ChatScreen";
 import { LoginScreen } from "./components/LoginScreen";
-import { conversationService } from "./api/conversationService";
+import { useAuthCheck } from "./hooks/useAuthCheck";
 import catIcon from "./assets/cat.png";
 
 const AppContainer = () => {
-  const [isAuthenticated, setAuthenticated] = useState<boolean>(false);
+  const { isAuthenticated, isChecking, isAdmin, setAuthenticated } = useAuthCheck();
-  const [isChecking, setIsChecking] = useState<boolean>(true);
 
-  useEffect(() => {
-    const checkAuth = async () => {
-      const accessToken = localStorage.getItem("access_token");
-      const refreshToken = localStorage.getItem("refresh_token");
-
-      // No tokens at all, not authenticated
-      if (!accessToken && !refreshToken) {
-        setIsChecking(false);
-        setAuthenticated(false);
-        return;
-      }
-
-      // Try to verify token by making a request
-      try {
-        await conversationService.getAllConversations();
-        // If successful, user is authenticated
-        setAuthenticated(true);
-      } catch (error) {
-        // Token is invalid or expired
-        console.error("Authentication check failed:", error);
-        localStorage.removeItem("access_token");
-        localStorage.removeItem("refresh_token");
-        setAuthenticated(false);
-      } finally {
-        setIsChecking(false);
-      }
-    };
-
-    checkAuth();
-  }, []);
-
-  // Show loading state while checking authentication
   if (isChecking) {
     return (
       <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
@@ -61,7 +26,7 @@ const AppContainer = () => {
   return (
     <>
       {isAuthenticated ? (
-        <ChatScreen setAuthenticated={setAuthenticated} />
+        <ChatScreen setAuthenticated={setAuthenticated} isAdmin={isAdmin} />
       ) : (
         <LoginScreen setAuthenticated={setAuthenticated} />
       )}

raggr-frontend/src/components/AdminPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { X, Phone, PhoneOff, Pencil, Check, Mail, Copy } from "lucide-react";
 import { userService, type AdminUserRecord } from "../api/userService";
 import { cn } from "../lib/utils";
@@ -12,27 +12,19 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table";
+import { useAdminUsers } from "../hooks/useAdminUsers";
 
 type Props = {
   onClose: () => void;
 };
 
 export const AdminPanel = ({ onClose }: Props) => {
-  const [users, setUsers] = useState<AdminUserRecord[]>([]);
+  const { users, loading, updateUser } = useAdminUsers();
-  const [loading, setLoading] = useState(true);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editValue, setEditValue] = useState("");
   const [rowError, setRowError] = useState<Record<string, string>>({});
   const [rowSuccess, setRowSuccess] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    userService
-      .adminListUsers()
-      .then(setUsers)
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
   const startEdit = (user: AdminUserRecord) => {
     setEditingId(user.id);
     setEditValue(user.whatsapp_number ?? "");
@@ -49,8 +41,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       const updated = await userService.adminSetWhatsapp(userId, editValue);
-      setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
+      updateUser(userId, () => updated);
-      setRowSuccess((p) => ({ ...p, [userId]: "Saved ✓" }));
+      setRowSuccess((p) => ({ ...p, [userId]: "Saved" }));
       setEditingId(null);
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
@@ -65,10 +57,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       await userService.adminUnlinkWhatsapp(userId);
-      setUsers((p) =>
+      updateUser(userId, (u) => ({ ...u, whatsapp_number: null }));
-        p.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)),
+      setRowSuccess((p) => ({ ...p, [userId]: "Unlinked" }));
-      );
-      setRowSuccess((p) => ({ ...p, [userId]: "Unlinked ✓" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -82,8 +72,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       const updated = await userService.adminToggleEmail(userId);
-      setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
+      updateUser(userId, () => updated);
-      setRowSuccess((p) => ({ ...p, [userId]: "Email enabled ✓" }));
+      setRowSuccess((p) => ({ ...p, [userId]: "Email enabled" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -97,10 +87,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       await userService.adminDisableEmail(userId);
-      setUsers((p) =>
+      updateUser(userId, (u) => ({ ...u, email_enabled: false, email_address: null }));
-        p.map((u) => (u.id === userId ? { ...u, email_enabled: false, email_address: null } : u)),
+      setRowSuccess((p) => ({ ...p, [userId]: "Email disabled" }));
-      );
-      setRowSuccess((p) => ({ ...p, [userId]: "Email disabled ✓" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -112,7 +100,7 @@ export const AdminPanel = ({ onClose }: Props) => {
 
   const copyToClipboard = (text: string, userId: string) => {
     navigator.clipboard.writeText(text);
-    setRowSuccess((p) => ({ ...p, [userId]: "Copied ✓" }));
+    setRowSuccess((p) => ({ ...p, [userId]: "Copied" }));
     setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
   };
 
@@ -128,7 +116,6 @@ export const AdminPanel = ({ onClose }: Props) => {
           "border border-sand-light/60",
         )}
       >
-        {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-sand-light/60">
           <div className="flex items-center gap-2.5">
             <div className="w-8 h-8 rounded-xl bg-leaf-pale flex items-center justify-center">
@@ -146,7 +133,6 @@ export const AdminPanel = ({ onClose }: Props) => {
           </button>
         </div>
 
-        {/* Body */}
         <div className="overflow-y-auto flex-1 rounded-b-3xl">
           {loading ? (
             <div className="px-6 py-12 text-center text-warm-gray text-sm">
@@ -155,7 +141,7 @@ export const AdminPanel = ({ onClose }: Props) => {
                 <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
                 <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
               </div>
-              Loading users…
+              Loading users...
             </div>
           ) : (
             <Table>
@@ -204,7 +190,7 @@ export const AdminPanel = ({ onClose }: Props) => {
                                 : "text-warm-gray/40 italic",
                             )}
                           >
-                            {user.whatsapp_number ?? "—"}
+                            {user.whatsapp_number ?? "\u2014"}
                           </span>
                           {rowSuccess[user.id] && (
                             <span className="text-xs text-leaf-dark">
@@ -235,7 +221,7 @@ export const AdminPanel = ({ onClose }: Props) => {
                             </button>
                           </div>
                         ) : (
-                          <span className="text-sm text-warm-gray/40 italic">—</span>
+                          <span className="text-sm text-warm-gray/40 italic">\u2014</span>
                         )}
                       </div>
                     </TableCell>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "../lib/utils";
 
@@ -6,7 +7,7 @@ type AnswerBubbleProps = {
   loading?: boolean;
 };
 
-export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
+export const AnswerBubble = React.memo(({ text, loading }: AnswerBubbleProps) => {
   return (
     <div className="flex justify-start message-enter">
       <div
@@ -17,7 +18,6 @@ export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
           "overflow-hidden",
         )}
       >
-        {/* amber accent bar */}
         <div className="h-0.5 w-full bg-gradient-to-r from-amber-soft via-amber-glow/50 to-transparent" />
 
         <div className="px-4 py-3">
@@ -36,4 +36,4 @@ export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
       </div>
     </div>
   );
-};
+});

raggr-frontend/src/components/ChatScreen.tsx

@@ -1,7 +1,5 @@
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useState, useRef } from "react";
 import { LogOut, Shield, PanelLeftClose, PanelLeftOpen, Menu, X } from "lucide-react";
-import { conversationService } from "../api/conversationService";
-import { userService } from "../api/userService";
 import { QuestionBubble } from "./QuestionBubble";
 import { AnswerBubble } from "./AnswerBubble";
 import { ToolBubble } from "./ToolBubble";
@@ -9,205 +7,79 @@ import { MessageInput } from "./MessageInput";
 import { ConversationList } from "./ConversationList";
 import { AdminPanel } from "./AdminPanel";
 import { cn } from "../lib/utils";
+import { useConversations } from "../hooks/useConversations";
+import { useChat } from "../hooks/useChat";
 import catIcon from "../assets/cat.png";
 
-type Message = {
-  text: string;
-  speaker: "simba" | "user" | "tool";
-  image_key?: string | null;
-};
-
-type Conversation = {
-  title: string;
-  id: string;
-};
-
 type ChatScreenProps = {
   setAuthenticated: (isAuth: boolean) => void;
+  isAdmin: boolean;
 };
 
-const TOOL_MESSAGES: Record<string, string> = {
+export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
-  simba_search: "🔍 Searching Simba's records...",
+  const [query, setQuery] = useState("");
-  web_search: "🌐 Searching the web...",
+  const [simbaMode, setSimbaMode] = useState(false);
-  get_current_date: "📅 Checking today's date...",
+  const [showConversations, setShowConversations] = useState(false);
-  ynab_budget_summary: "💰 Checking budget summary...",
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  ynab_search_transactions: "💳 Looking up transactions...",
+  const [showAdminPanel, setShowAdminPanel] = useState(false);
-  ynab_category_spending: "📊 Analyzing category spending...",
-  ynab_insights: "📈 Generating budget insights...",
-  obsidian_search_notes: "📝 Searching notes...",
-  obsidian_read_note: "📖 Reading note...",
-  obsidian_create_note: "✏️ Saving note...",
-  obsidian_create_task: "✅ Creating task...",
-  journal_get_today: "📔 Reading today's journal...",
-  journal_get_tasks: "📋 Getting tasks...",
-  journal_add_task: "➕ Adding task...",
-  journal_complete_task: "✔️ Completing task...",
-};
-
-export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
-  const [query, setQuery] = useState<string>("");
-  const [simbaMode, setSimbaMode] = useState<boolean>(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [showConversations, setShowConversations] = useState<boolean>(false);
-  const [selectedConversation, setSelectedConversation] =
-    useState<Conversation | null>(null);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isAdmin, setIsAdmin] = useState<boolean>(false);
-  const [showAdminPanel, setShowAdminPanel] = useState<boolean>(false);
-  const [pendingImage, setPendingImage] = useState<File | null>(null);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const isMountedRef = useRef<boolean>(true);
+  const isLoadingRef = useRef(false);
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
 
   const scrollToBottom = useCallback(() => {
     requestAnimationFrame(() => {
       messagesEndRef.current?.scrollIntoView({
-        behavior: isLoading ? "instant" : "smooth",
+        behavior: isLoadingRef.current ? "instant" : "smooth",
       });
     });
-  }, [isLoading]);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      abortControllerRef.current?.abort();
-    };
   }, []);
 
-  const handleSelectConversation = (conversation: Conversation) => {
+  const {
-    setShowConversations(false);
+    conversations,
-    setSelectedConversation(conversation);
+    selectedConversation,
-    const load = async () => {
+    selectConversation,
-      try {
+    createConversation,
-        const fetched = await conversationService.getConversation(conversation.id);
+    refreshConversations,
-        setMessages(
+  } = useConversations();
-          fetched.messages.map((m) => ({ text: m.text, speaker: m.speaker, image_key: m.image_key })),
-        );
-      } catch (err) {
-        console.error("Failed to load messages:", err);
-      }
-    };
-    load();
-  };
 
-  const loadConversations = async () => {
+  const onSessionExpired = useCallback(() => setAuthenticated(false), [setAuthenticated]);
-    try {
-      const fetched = await conversationService.getAllConversations();
-      const parsed = fetched.map((c) => ({ id: c.id, title: c.name }));
-      setConversations(parsed);
-    } catch (err) {
-      console.error("Failed to load conversations:", err);
-    }
-  };
 
-  const handleCreateNewConversation = async () => {
+  const {
-    const newConv = await conversationService.createConversation();
+    messages,
-    await loadConversations();
+    setMessages,
-    setSelectedConversation({ title: newConv.name, id: newConv.id });
+    isLoading,
-  };
+    pendingImage,
+    setPendingImage,
+    sendMessage,
+  } = useChat({
+    selectedConversation,
+    createConversation,
+    refreshConversations,
+    onSessionExpired,
+    scrollToBottom,
+  });
 
-  useEffect(() => {
+  // Keep ref in sync for scrollToBottom behavior
-    loadConversations();
+  isLoadingRef.current = isLoading;
-    userService.getMe().then((me) => setIsAdmin(me.is_admin)).catch(() => {});
-  }, []);
 
-  useEffect(() => {
+  const handleSelectConversation = useCallback(
-    scrollToBottom();
+    async (conversation: { title: string; id: string }) => {
-  }, [messages]);
+      setShowConversations(false);
+      const loaded = await selectConversation(conversation);
+      setMessages(loaded);
+    },
+    [selectConversation, setMessages],
+  );
 
-  const handleQuestionSubmit = useCallback(async () => {
+  const handleCreateNewConversation = useCallback(async () => {
-    if ((!query.trim() && !pendingImage) || isLoading) return;
+    await createConversation();
+    setMessages([]);
+  }, [createConversation, setMessages]);
 
-    let activeConversation = selectedConversation;
+  const handleQuestionSubmit = useCallback(() => {
-    if (!activeConversation) {
+    sendMessage(query, simbaMode);
-      const newConv = await conversationService.createConversation();
-      activeConversation = { title: newConv.name, id: newConv.id };
-      setSelectedConversation(activeConversation);
-      setConversations((prev) => [activeConversation!, ...prev]);
-    }
-
-    // Capture pending image before clearing state
-    const imageFile = pendingImage;
-
-    const currMessages = messages.concat([{ text: query, speaker: "user" }]);
-    setMessages(currMessages);
     setQuery("");
-    setPendingImage(null);
+  }, [query, simbaMode, sendMessage]);
-    setIsLoading(true);
-
-    if (simbaMode) {
-      const randomElement = simbaAnswers[Math.floor(Math.random() * simbaAnswers.length)];
-      setMessages((prev) => prev.concat([{ text: randomElement, speaker: "simba" }]));
-      setIsLoading(false);
-      return;
-    }
-
-    const abortController = new AbortController();
-    abortControllerRef.current = abortController;
-
-    try {
-      // Upload image first if present
-      let imageKey: string | undefined;
-      if (imageFile) {
-        const uploadResult = await conversationService.uploadImage(
-          imageFile,
-          activeConversation.id,
-        );
-        imageKey = uploadResult.image_key;
-
-        // Update the user message with the image key
-        setMessages((prev) => {
-          const updated = [...prev];
-          // Find the last user message we just added
-          for (let i = updated.length - 1; i >= 0; i--) {
-            if (updated[i].speaker === "user") {
-              updated[i] = { ...updated[i], image_key: imageKey };
-              break;
-            }
-          }
-          return updated;
-        });
-      }
-
-      await conversationService.streamQuery(
-        query,
-        activeConversation.id,
-        (event) => {
-          if (!isMountedRef.current) return;
-          if (event.type === "tool_start") {
-            const friendly = TOOL_MESSAGES[event.tool] ?? `🔧 Using ${event.tool}...`;
-            setMessages((prev) => prev.concat([{ text: friendly, speaker: "tool" }]));
-          } else if (event.type === "response") {
-            setMessages((prev) => prev.concat([{ text: event.message, speaker: "simba" }]));
-          } else if (event.type === "error") {
-            console.error("Stream error:", event.message);
-          }
-        },
-        abortController.signal,
-        imageKey,
-      );
-    } catch (error) {
-      if (error instanceof Error && error.name === "AbortError") {
-        console.log("Request was aborted");
-      } else {
-        console.error("Failed to send query:", error);
-        if (error instanceof Error && error.message.includes("Session expired")) {
-          setAuthenticated(false);
-        }
-      }
-    } finally {
-      if (isMountedRef.current) {
-        setIsLoading(false);
-        loadConversations();
-      }
-      abortControllerRef.current = null;
-    }
-  }, [query, pendingImage, isLoading, selectedConversation, simbaMode, messages, setAuthenticated]);
 
   const handleQueryChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setQuery(event.target.value);
@@ -221,8 +93,8 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     }
   }, [handleQuestionSubmit]);
 
-  const handleImageSelect = useCallback((file: File) => setPendingImage(file), []);
+  const handleImageSelect = useCallback((file: File) => setPendingImage(file), [setPendingImage]);
-  const handleClearImage = useCallback(() => setPendingImage(null), []);
+  const handleClearImage = useCallback(() => setPendingImage(null), [setPendingImage]);
 
   const handleLogout = () => {
     localStorage.removeItem("access_token");
@@ -232,7 +104,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
 
   return (
     <div className="h-screen h-[100dvh] flex flex-row bg-cream overflow-hidden">
-      {/* ── Desktop Sidebar ─────────────────────────────── */}
+      {/* Desktop Sidebar */}
       <aside
         className={cn(
           "hidden md:flex md:flex-col",
@@ -241,7 +113,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
         )}
       >
         {sidebarCollapsed ? (
-          /* Collapsed state */
           <div className="flex flex-col items-center py-4 gap-4 h-full">
             <button
               onClick={() => setSidebarCollapsed(false)}
@@ -256,9 +127,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
             />
           </div>
         ) : (
-          /* Expanded state */
           <div className="flex flex-col h-full">
-            {/* Header */}
             <div className="flex items-center justify-between px-4 py-4 border-b border-white/8">
               <div className="flex items-center gap-2.5">
                 <img src={catIcon} alt="Simba" className="w-12 h-12" />
@@ -277,7 +146,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               </button>
             </div>
 
-            {/* Conversations */}
             <div className="flex-1 overflow-y-auto px-2 py-3">
               <ConversationList
                 conversations={conversations}
@@ -287,7 +155,6 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               />
             </div>
 
-            {/* Footer */}
             <div className="px-2 pb-3 pt-2 border-t border-white/8 flex flex-col gap-0.5">
               {isAdmin && (
                 <button
@@ -310,12 +177,9 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
         )}
       </aside>
 
-      {/* Admin Panel modal */}
       {showAdminPanel && <AdminPanel onClose={() => setShowAdminPanel(false)} />}
 
-      {/* ── Main chat area ──────────────────────────────── */}
       <div className="flex-1 flex flex-col h-full overflow-hidden min-w-0">
-        {/* Mobile header */}
         <header className="md:hidden flex items-center justify-between px-4 py-3 bg-warm-white border-b border-sand-light/60">
           <div className="flex items-center gap-2">
             <img src={catIcon} alt="Simba" className="w-12 h-12" />
@@ -343,9 +207,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
         </header>
 
         {messages.length === 0 ? (
-          /* ── Empty / homepage state ── */
           <div className="flex-1 flex flex-col items-center justify-center px-4 gap-6">
-            {/* Mobile conversation drawer */}
             {showConversations && (
               <div className="md:hidden w-full max-w-2xl bg-warm-white rounded-2xl border border-sand-light p-3 shadow-sm">
                 <ConversationList
@@ -382,11 +244,9 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
             </div>
           </div>
         ) : (
-          /* ── Active chat state ── */
           <>
             <div className="flex-1 overflow-y-auto px-4 py-6">
               <div className="max-w-2xl mx-auto flex flex-col gap-3">
-                {/* Mobile conversation drawer */}
                 {showConversations && (
                   <div className="md:hidden mb-3 bg-warm-white rounded-2xl border border-sand-light p-3 shadow-sm">
                     <ConversationList
@@ -422,8 +282,8 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
                   setSimbaMode={setSimbaMode}
                   isLoading={isLoading}
                   pendingImage={pendingImage}
-                  onImageSelect={(file) => setPendingImage(file)}
+                  onImageSelect={handleImageSelect}
-                  onClearImage={() => setPendingImage(null)}
+                  onClearImage={handleClearImage}
                 />
               </div>
             </footer>

raggr-frontend/src/components/ConversationList.tsx

@@ -1,7 +1,5 @@
-import { useState, useEffect } from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../lib/utils";
-import { conversationService } from "../api/conversationService";
 
 type Conversation = {
   title: string;
@@ -23,32 +21,8 @@ export const ConversationList = ({
   selectedId,
   variant = "dark",
 }: ConversationProps) => {
-  const [items, setItems] = useState(conversations);
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        let fetched = await conversationService.getAllConversations();
-        if (fetched.length === 0) {
-          await conversationService.createConversation();
-          fetched = await conversationService.getAllConversations();
-        }
-        setItems(fetched.map((c) => ({ id: c.id, title: c.name })));
-      } catch (err) {
-        console.error("Failed to load conversations:", err);
-      }
-    };
-    load();
-  }, []);
-
-  // Keep in sync when parent updates conversations
-  useEffect(() => {
-    setItems(conversations);
-  }, [conversations]);
-
   return (
     <div className="flex flex-col gap-1">
-      {/* New thread button */}
       <button
         onClick={onCreateNewConversation}
         className={cn(
@@ -63,8 +37,7 @@ export const ConversationList = ({
         <span>New thread</span>
       </button>
 
-      {/* Conversation items */}
+      {conversations.map((conv) => {
-      {items.map((conv) => {
         const isActive = conv.id === selectedId;
         return (
           <button

raggr-frontend/src/components/LoginScreen.tsx

@@ -1,66 +1,19 @@
-import { useState, useEffect } from "react";
-import { userService } from "../api/userService";
-import { oidcService } from "../api/oidcService";
 import catIcon from "../assets/cat.png";
 import { cn } from "../lib/utils";
+import { useOIDCAuth } from "../hooks/useOIDCAuth";
 
 type LoginScreenProps = {
   setAuthenticated: (isAuth: boolean) => void;
 };
 
 export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
-  const [error, setError] = useState<string>("");
+  const { isChecking, isLoggingIn, error, handleLogin } = useOIDCAuth({
-  const [isChecking, setIsChecking] = useState<boolean>(true);
+    setAuthenticated,
-  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
+  });
-
-  useEffect(() => {
-    const initAuth = async () => {
-      const callbackParams = oidcService.getCallbackParamsFromURL();
-      if (callbackParams) {
-        try {
-          setIsLoggingIn(true);
-          const result = await oidcService.handleCallback(
-            callbackParams.code,
-            callbackParams.state,
-          );
-          localStorage.setItem("access_token", result.access_token);
-          localStorage.setItem("refresh_token", result.refresh_token);
-          oidcService.clearCallbackParams();
-          setAuthenticated(true);
-          setIsChecking(false);
-          return;
-        } catch (err) {
-          console.error("OIDC callback error:", err);
-          setError("Login failed. Please try again.");
-          oidcService.clearCallbackParams();
-          setIsLoggingIn(false);
-          setIsChecking(false);
-          return;
-        }
-      }
-      const isValid = await userService.validateToken();
-      if (isValid) setAuthenticated(true);
-      setIsChecking(false);
-    };
-    initAuth();
-  }, [setAuthenticated]);
-
-  const handleOIDCLogin = async () => {
-    try {
-      setIsLoggingIn(true);
-      setError("");
-      const authUrl = await oidcService.initiateLogin();
-      window.location.href = authUrl;
-    } catch {
-      setError("Failed to initiate login. Please try again.");
-      setIsLoggingIn(false);
-    }
-  };
 
   if (isChecking || isLoggingIn) {
     return (
       <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
-        {/* Subtle dot grid */}
         <div
           className="fixed inset-0 pointer-events-none opacity-[0.035]"
           style={{
@@ -85,7 +38,6 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
 
   return (
     <div className="h-screen bg-cream flex items-center justify-center p-4 relative overflow-hidden">
-      {/* Background dot texture */}
       <div
         className="fixed inset-0 pointer-events-none opacity-[0.04]"
         style={{
@@ -94,12 +46,10 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
         }}
       />
 
-      {/* Decorative background blobs */}
       <div className="absolute top-1/4 -left-20 w-72 h-72 rounded-full bg-leaf-pale/60 blur-3xl pointer-events-none" />
       <div className="absolute bottom-1/4 -right-20 w-64 h-64 rounded-full bg-amber-pale/70 blur-3xl pointer-events-none" />
 
       <div className="relative w-full max-w-sm">
-        {/* Branding */}
         <div className="flex flex-col items-center mb-8">
           <div className="relative mb-5">
             <div className="absolute -inset-5 bg-amber-soft/30 rounded-full blur-2xl" />
@@ -120,7 +70,6 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
         </div>
 
-        {/* Card */}
         <div
           className={cn(
             "bg-warm-white rounded-3xl border border-sand-light",
@@ -138,7 +87,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
 
           <button
-            onClick={handleOIDCLogin}
+            onClick={handleLogin}
             disabled={isLoggingIn}
             className={cn(
               "w-full py-3.5 px-4 rounded-2xl text-sm font-semibold tracking-wide",
@@ -154,7 +103,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
         </div>
 
         <p className="text-center text-sand mt-5 text-xs tracking-widest select-none">
-          ✦ meow ✦
+          * meow *
         </p>
       </div>
     </div>

raggr-frontend/src/components/QuestionBubble.tsx

@@ -1,26 +1,14 @@
-import { useEffect, useState } from "react";
+import React from "react";
 import { cn } from "../lib/utils";
-import { conversationService } from "../api/conversationService";
+import { usePresignedUrl } from "../hooks/usePresignedUrl";
 
 type QuestionBubbleProps = {
   text: string;
   image_key?: string | null;
 };
 
-export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
+export const QuestionBubble = React.memo(({ text, image_key }: QuestionBubbleProps) => {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const { imageUrl, imageError } = usePresignedUrl(image_key);
-  const [imageError, setImageError] = useState(false);
-
-  useEffect(() => {
-    if (!image_key) return;
-    conversationService
-      .getPresignedImageUrl(image_key)
-      .then(setImageUrl)
-      .catch((err) => {
-        console.error("Failed to load image:", err);
-        setImageError(true);
-      });
-  }, [image_key]);
 
   return (
     <div className="flex justify-end message-enter">
@@ -34,7 +22,6 @@ export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
       >
         {imageError && (
           <div className="flex items-center gap-2 text-xs text-charcoal/50 bg-charcoal/5 rounded-xl px-3 py-2 mb-2">
-            <span>🖼️</span>
             <span>Image failed to load</span>
           </div>
         )}
@@ -49,4 +36,4 @@ export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
       </div>
     </div>
   );
-};
+});

raggr-frontend/src/components/ToolBubble.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { cn } from "../lib/utils";
 
-export const ToolBubble = ({ text }: { text: string }) => (
+export const ToolBubble = React.memo(({ text }: { text: string }) => (
   <div className="flex justify-center message-enter">
     <div
       className={cn(
@@ -12,4 +13,4 @@ export const ToolBubble = ({ text }: { text: string }) => (
       {text}
     </div>
   </div>
-);
+));

raggr-frontend/src/hooks/useAdminUsers.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { userService, type AdminUserRecord } from "../api/userService";
+
+export function useAdminUsers() {
+  const [users, setUsers] = useState<AdminUserRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    userService
+      .adminListUsers()
+      .then(setUsers)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const updateUser = (userId: string, updater: (u: AdminUserRecord) => AdminUserRecord) => {
+    setUsers((prev) => prev.map((u) => (u.id === userId ? updater(u) : u)));
+  };
+
+  return { users, loading, updateUser };
+}

raggr-frontend/src/hooks/useAuthCheck.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { userService } from "../api/userService";
+
+export function useAuthCheck() {
+  const [isAuthenticated, setAuthenticated] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const accessToken = localStorage.getItem("access_token");
+      const refreshToken = localStorage.getItem("refresh_token");
+
+      if (!accessToken && !refreshToken) {
+        setIsChecking(false);
+        setAuthenticated(false);
+        return;
+      }
+
+      try {
+        const me = await userService.getMe();
+        setAuthenticated(true);
+        setIsAdmin(me.is_admin);
+      } catch {
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        setAuthenticated(false);
+      } finally {
+        setIsChecking(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  return { isAuthenticated, isChecking, isAdmin, setAuthenticated };
+}

raggr-frontend/src/hooks/useChat.ts

@@ -0,0 +1,183 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { conversationService } from "../api/conversationService";
+import type { Conversation } from "./useConversations";
+
+type Message = {
+  text: string;
+  speaker: "simba" | "user" | "tool";
+  image_key?: string | null;
+};
+
+const TOOL_MESSAGES: Record<string, string> = {
+  simba_search: "Searching Simba's records...",
+  web_search: "Searching the web...",
+  get_current_date: "Checking today's date...",
+  ynab_budget_summary: "Checking budget summary...",
+  ynab_search_transactions: "Looking up transactions...",
+  ynab_category_spending: "Analyzing category spending...",
+  ynab_insights: "Generating budget insights...",
+  obsidian_search_notes: "Searching notes...",
+  obsidian_read_note: "Reading note...",
+  obsidian_create_note: "Saving note...",
+  obsidian_create_task: "Creating task...",
+  journal_get_today: "Reading today's journal...",
+  journal_get_tasks: "Getting tasks...",
+  journal_add_task: "Adding task...",
+  journal_complete_task: "Completing task...",
+};
+
+const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
+
+type UseChatOptions = {
+  selectedConversation: Conversation | null;
+  createConversation: () => Promise<Conversation>;
+  refreshConversations: () => Promise<void>;
+  onSessionExpired: () => void;
+  scrollToBottom: () => void;
+};
+
+export function useChat({
+  selectedConversation,
+  createConversation,
+  refreshConversations,
+  onSessionExpired,
+  scrollToBottom,
+}: UseChatOptions) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [pendingImage, setPendingImage] = useState<File | null>(null);
+
+  const isMountedRef = useRef(true);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  const updateMessages = useCallback(
+    (updater: Message[] | ((prev: Message[]) => Message[])) => {
+      setMessages(updater);
+      scrollToBottom();
+    },
+    [scrollToBottom],
+  );
+
+  const sendMessage = useCallback(
+    async (query: string, simbaMode: boolean) => {
+      if ((!query.trim() && !pendingImage) || isLoading) return;
+
+      let activeConversation = selectedConversation;
+      let createdNew = false;
+      if (!activeConversation) {
+        activeConversation = await createConversation();
+        createdNew = true;
+      }
+
+      const imageFile = pendingImage;
+
+      updateMessages((prev) => prev.concat([{ text: query, speaker: "user" }]));
+      setPendingImage(null);
+      setIsLoading(true);
+
+      if (simbaMode) {
+        const randomElement =
+          simbaAnswers[Math.floor(Math.random() * simbaAnswers.length)];
+        updateMessages((prev) =>
+          prev.concat([{ text: randomElement, speaker: "simba" }]),
+        );
+        setIsLoading(false);
+        return;
+      }
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      try {
+        let imageKey: string | undefined;
+        if (imageFile) {
+          const uploadResult = await conversationService.uploadImage(
+            imageFile,
+            activeConversation.id,
+          );
+          imageKey = uploadResult.image_key;
+
+          updateMessages((prev) => {
+            const updated = [...prev];
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].speaker === "user") {
+                updated[i] = { ...updated[i], image_key: imageKey };
+                break;
+              }
+            }
+            return updated;
+          });
+        }
+
+        await conversationService.streamQuery(
+          query,
+          activeConversation.id,
+          (event) => {
+            if (!isMountedRef.current) return;
+            if (event.type === "tool_start") {
+              const friendly =
+                TOOL_MESSAGES[event.tool] ?? `Using ${event.tool}...`;
+              updateMessages((prev) =>
+                prev.concat([{ text: friendly, speaker: "tool" }]),
+              );
+            } else if (event.type === "response") {
+              updateMessages((prev) =>
+                prev.concat([{ text: event.message, speaker: "simba" }]),
+              );
+            } else if (event.type === "error") {
+              console.error("Stream error:", event.message);
+            }
+          },
+          abortController.signal,
+          imageKey,
+        );
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("Request was aborted");
+        } else {
+          console.error("Failed to send query:", error);
+          if (
+            error instanceof Error &&
+            error.message.includes("Session expired")
+          ) {
+            onSessionExpired();
+          }
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+          if (createdNew) {
+            refreshConversations();
+          }
+        }
+        abortControllerRef.current = null;
+      }
+    },
+    [
+      pendingImage,
+      isLoading,
+      selectedConversation,
+      createConversation,
+      refreshConversations,
+      onSessionExpired,
+      updateMessages,
+    ],
+  );
+
+  return {
+    messages,
+    setMessages: updateMessages,
+    isLoading,
+    pendingImage,
+    setPendingImage,
+    sendMessage,
+  };
+}

raggr-frontend/src/hooks/useConversations.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback, useEffect } from "react";
+import { conversationService } from "../api/conversationService";
+
+export type Conversation = {
+  title: string;
+  id: string;
+};
+
+type Message = {
+  text: string;
+  speaker: "simba" | "user" | "tool";
+  image_key?: string | null;
+};
+
+export function useConversations() {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [selectedConversation, setSelectedConversation] =
+    useState<Conversation | null>(null);
+
+  const refreshConversations = useCallback(async () => {
+    try {
+      const fetched = await conversationService.getAllConversations();
+      setConversations(fetched.map((c) => ({ id: c.id, title: c.name })));
+    } catch (err) {
+      console.error("Failed to load conversations:", err);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshConversations();
+  }, [refreshConversations]);
+
+  const selectConversation = useCallback(
+    async (conversation: Conversation): Promise<Message[]> => {
+      setSelectedConversation(conversation);
+      try {
+        const fetched = await conversationService.getConversation(
+          conversation.id,
+        );
+        return fetched.messages.map((m) => ({
+          text: m.text,
+          speaker: m.speaker,
+          image_key: m.image_key,
+        }));
+      } catch (err) {
+        console.error("Failed to load messages:", err);
+        return [];
+      }
+    },
+    [],
+  );
+
+  const createConversation = useCallback(async (): Promise<Conversation> => {
+    const newConv = await conversationService.createConversation();
+    const conversation = { title: newConv.name, id: newConv.id };
+    setConversations((prev) => [conversation, ...prev]);
+    setSelectedConversation(conversation);
+    return conversation;
+  }, []);
+
+  return {
+    conversations,
+    selectedConversation,
+    setSelectedConversation,
+    selectConversation,
+    createConversation,
+    refreshConversations,
+  };
+}

raggr-frontend/src/hooks/useOIDCAuth.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { userService } from "../api/userService";
+import { oidcService } from "../api/oidcService";
+
+type UseOIDCAuthOptions = {
+  setAuthenticated: (isAuth: boolean) => void;
+};
+
+export function useOIDCAuth({ setAuthenticated }: UseOIDCAuthOptions) {
+  const [isChecking, setIsChecking] = useState(true);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const initAuth = async () => {
+      const callbackParams = oidcService.getCallbackParamsFromURL();
+      if (callbackParams) {
+        try {
+          setIsLoggingIn(true);
+          const result = await oidcService.handleCallback(
+            callbackParams.code,
+            callbackParams.state,
+          );
+          localStorage.setItem("access_token", result.access_token);
+          localStorage.setItem("refresh_token", result.refresh_token);
+          oidcService.clearCallbackParams();
+          setAuthenticated(true);
+          setIsChecking(false);
+          return;
+        } catch (err) {
+          console.error("OIDC callback error:", err);
+          setError("Login failed. Please try again.");
+          oidcService.clearCallbackParams();
+          setIsLoggingIn(false);
+          setIsChecking(false);
+          return;
+        }
+      }
+      const isValid = await userService.validateToken();
+      if (isValid) setAuthenticated(true);
+      setIsChecking(false);
+    };
+    initAuth();
+  }, [setAuthenticated]);
+
+  const handleLogin = async () => {
+    try {
+      setIsLoggingIn(true);
+      setError("");
+      const authUrl = await oidcService.initiateLogin();
+      window.location.href = authUrl;
+    } catch {
+      setError("Failed to initiate login. Please try again.");
+      setIsLoggingIn(false);
+    }
+  };
+
+  return { isChecking, isLoggingIn, error, handleLogin };
+}

raggr-frontend/src/hooks/usePresignedUrl.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { conversationService } from "../api/conversationService";
+
+const urlCache = new Map<string, string>();
+
+export function usePresignedUrl(imageKey: string | null | undefined) {
+  const [imageUrl, setImageUrl] = useState<string | null>(
+    imageKey ? (urlCache.get(imageKey) ?? null) : null,
+  );
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    if (!imageKey) return;
+
+    const cached = urlCache.get(imageKey);
+    if (cached) {
+      setImageUrl(cached);
+      return;
+    }
+
+    conversationService
+      .getPresignedImageUrl(imageKey)
+      .then((url) => {
+        urlCache.set(imageKey, url);
+        setImageUrl(url);
+      })
+      .catch((err) => {
+        console.error("Failed to load image:", err);
+        setImageError(true);
+      });
+  }, [imageKey]);
+
+  return { imageUrl, imageError };
+}