Fix Obsidian sync by running sync-setup before sync

The container was failing with "No sync configuration found" because
ob sync was called without first running ob sync-setup. Now startup.sh
configures sync using environment variables before starting continuous
sync, and gracefully skips sync if setup fails.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

raggr-frontend/src/App.tsx

@@ -1,13 +1,48 @@
+import { useState, useEffect } from "react";
+
 import "./App.css";
 import { AuthProvider } from "./contexts/AuthContext";
 import { ChatScreen } from "./components/ChatScreen";
 import { LoginScreen } from "./components/LoginScreen";
-import { useAuthCheck } from "./hooks/useAuthCheck";
+import { conversationService } from "./api/conversationService";
 import catIcon from "./assets/cat.png";
 
 const AppContainer = () => {
-  const { isAuthenticated, isChecking, isAdmin, setAuthenticated } = useAuthCheck();
+  const [isAuthenticated, setAuthenticated] = useState<boolean>(false);
+  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">
@@ -26,7 +61,7 @@ const AppContainer = () => {
   return (
     <>
       {isAuthenticated ? (
-        <ChatScreen setAuthenticated={setAuthenticated} isAdmin={isAdmin} />
+        <ChatScreen setAuthenticated={setAuthenticated} />
       ) : (
         <LoginScreen setAuthenticated={setAuthenticated} />
       )}

raggr-frontend/src/components/AdminPanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, 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,19 +12,27 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table";
-import { useAdminUsers } from "../hooks/useAdminUsers";
 
 type Props = {
   onClose: () => void;
 };
 
 export const AdminPanel = ({ onClose }: Props) => {
-  const { users, loading, updateUser } = useAdminUsers();
+  const [users, setUsers] = useState<AdminUserRecord[]>([]);
+  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 ?? "");
@@ -41,8 +49,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       const updated = await userService.adminSetWhatsapp(userId, editValue);
-      updateUser(userId, () => updated);
+      setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
-      setRowSuccess((p) => ({ ...p, [userId]: "Saved" }));
+      setRowSuccess((p) => ({ ...p, [userId]: "Saved ✓" }));
       setEditingId(null);
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
@@ -57,8 +65,10 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       await userService.adminUnlinkWhatsapp(userId);
-      updateUser(userId, (u) => ({ ...u, whatsapp_number: null }));
+      setUsers((p) =>
-      setRowSuccess((p) => ({ ...p, [userId]: "Unlinked" }));
+        p.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)),
+      );
+      setRowSuccess((p) => ({ ...p, [userId]: "Unlinked ✓" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -72,8 +82,8 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       const updated = await userService.adminToggleEmail(userId);
-      updateUser(userId, () => updated);
+      setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
-      setRowSuccess((p) => ({ ...p, [userId]: "Email enabled" }));
+      setRowSuccess((p) => ({ ...p, [userId]: "Email enabled ✓" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -87,8 +97,10 @@ export const AdminPanel = ({ onClose }: Props) => {
     setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       await userService.adminDisableEmail(userId);
-      updateUser(userId, (u) => ({ ...u, email_enabled: false, email_address: null }));
+      setUsers((p) =>
-      setRowSuccess((p) => ({ ...p, [userId]: "Email disabled" }));
+        p.map((u) => (u.id === userId ? { ...u, email_enabled: false, email_address: null } : u)),
+      );
+      setRowSuccess((p) => ({ ...p, [userId]: "Email disabled ✓" }));
       setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
       setRowError((p) => ({
@@ -100,7 +112,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);
   };
 
@@ -116,6 +128,7 @@ 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">
@@ -133,6 +146,7 @@ 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">
@@ -141,7 +155,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>
@@ -190,7 +204,7 @@ export const AdminPanel = ({ onClose }: Props) => {
                                 : "text-warm-gray/40 italic",
                             )}
                           >
-                            {user.whatsapp_number ?? "\u2014"}
+                            {user.whatsapp_number ?? "—"}
                           </span>
                           {rowSuccess[user.id] && (
                             <span className="text-xs text-leaf-dark">
@@ -221,7 +235,7 @@ export const AdminPanel = ({ onClose }: Props) => {
                             </button>
                           </div>
                         ) : (
-                          <span className="text-sm text-warm-gray/40 italic">\u2014</span>
+                          <span className="text-sm text-warm-gray/40 italic">—</span>
                         )}
                       </div>
                     </TableCell>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "../lib/utils";
 
@@ -7,7 +6,7 @@ type AnswerBubbleProps = {
   loading?: boolean;
 };
 
-export const AnswerBubble = React.memo(({ text, loading }: AnswerBubbleProps) => {
+export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
   return (
     <div className="flex justify-start message-enter">
       <div
@@ -18,6 +17,7 @@ export const AnswerBubble = React.memo(({ 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 = React.memo(({ text, loading }: AnswerBubbleProps) =>
       </div>
     </div>
   );
-});
+};

raggr-frontend/src/components/ChatScreen.tsx

@@ -1,5 +1,7 @@
-import { useCallback, useState, useRef } from "react";
+import { useCallback, useEffect, 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";
@@ -7,79 +9,205 @@ 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;
 };
 
-export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
+const TOOL_MESSAGES: Record<string, string> = {
-  const [query, setQuery] = useState("");
+  simba_search: "🔍 Searching Simba's records...",
-  const [simbaMode, setSimbaMode] = useState(false);
+  web_search: "🌐 Searching the web...",
-  const [showConversations, setShowConversations] = useState(false);
+  get_current_date: "📅 Checking today's date...",
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  ynab_budget_summary: "💰 Checking budget summary...",
-  const [showAdminPanel, setShowAdminPanel] = useState(false);
+  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...",
+};
+
+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 isLoadingRef = useRef(false);
+  const isMountedRef = useRef<boolean>(true);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
 
   const scrollToBottom = useCallback(() => {
     requestAnimationFrame(() => {
       messagesEndRef.current?.scrollIntoView({
-        behavior: isLoadingRef.current ? "instant" : "smooth",
+        behavior: isLoading ? "instant" : "smooth",
       });
     });
+  }, [isLoading]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+    };
   }, []);
 
-  const {
+  const handleSelectConversation = (conversation: Conversation) => {
-    conversations,
-    selectedConversation,
-    selectConversation,
-    createConversation,
-    refreshConversations,
-  } = useConversations();
-
-  const onSessionExpired = useCallback(() => setAuthenticated(false), [setAuthenticated]);
-
-  const {
-    messages,
-    setMessages,
-    isLoading,
-    pendingImage,
-    setPendingImage,
-    sendMessage,
-  } = useChat({
-    selectedConversation,
-    createConversation,
-    refreshConversations,
-    onSessionExpired,
-    scrollToBottom,
-  });
-
-  // Keep ref in sync for scrollToBottom behavior
-  isLoadingRef.current = isLoading;
-
-  const handleSelectConversation = useCallback(
-    async (conversation: { title: string; id: string }) => {
     setShowConversations(false);
-      const loaded = await selectConversation(conversation);
+    setSelectedConversation(conversation);
-      setMessages(loaded);
+    const load = async () => {
-    },
+      try {
-    [selectConversation, setMessages],
+        const fetched = await conversationService.getConversation(conversation.id);
+        setMessages(
+          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 handleCreateNewConversation = useCallback(async () => {
+  const loadConversations = async () => {
-    await createConversation();
+    try {
-    setMessages([]);
+      const fetched = await conversationService.getAllConversations();
-  }, [createConversation, setMessages]);
+      const parsed = fetched.map((c) => ({ id: c.id, title: c.name }));
+      setConversations(parsed);
+    } catch (err) {
+      console.error("Failed to load conversations:", err);
+    }
+  };
 
-  const handleQuestionSubmit = useCallback(() => {
+  const handleCreateNewConversation = async () => {
-    sendMessage(query, simbaMode);
+    const newConv = await conversationService.createConversation();
+    await loadConversations();
+    setSelectedConversation({ title: newConv.name, id: newConv.id });
+  };
+
+  useEffect(() => {
+    loadConversations();
+    userService.getMe().then((me) => setIsAdmin(me.is_admin)).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleQuestionSubmit = useCallback(async () => {
+    if ((!query.trim() && !pendingImage) || isLoading) return;
+
+    let activeConversation = selectedConversation;
+    if (!activeConversation) {
+      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("");
-  }, [query, simbaMode, sendMessage]);
+    setPendingImage(null);
+    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);
@@ -93,8 +221,8 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
     }
   }, [handleQuestionSubmit]);
 
-  const handleImageSelect = useCallback((file: File) => setPendingImage(file), [setPendingImage]);
+  const handleImageSelect = useCallback((file: File) => setPendingImage(file), []);
-  const handleClearImage = useCallback(() => setPendingImage(null), [setPendingImage]);
+  const handleClearImage = useCallback(() => setPendingImage(null), []);
 
   const handleLogout = () => {
     localStorage.removeItem("access_token");
@@ -104,7 +232,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: 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",
@@ -113,6 +241,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
         )}
       >
         {sidebarCollapsed ? (
+          /* Collapsed state */
           <div className="flex flex-col items-center py-4 gap-4 h-full">
             <button
               onClick={() => setSidebarCollapsed(false)}
@@ -127,7 +256,9 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: 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" />
@@ -146,6 +277,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
               </button>
             </div>
 
+            {/* Conversations */}
             <div className="flex-1 overflow-y-auto px-2 py-3">
               <ConversationList
                 conversations={conversations}
@@ -155,6 +287,7 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
               />
             </div>
 
+            {/* Footer */}
             <div className="px-2 pb-3 pt-2 border-t border-white/8 flex flex-col gap-0.5">
               {isAdmin && (
                 <button
@@ -177,9 +310,12 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: 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" />
@@ -207,7 +343,9 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: 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
@@ -244,9 +382,11 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: 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
@@ -282,8 +422,8 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
                   setSimbaMode={setSimbaMode}
                   isLoading={isLoading}
                   pendingImage={pendingImage}
-                  onImageSelect={handleImageSelect}
+                  onImageSelect={(file) => setPendingImage(file)}
-                  onClearImage={handleClearImage}
+                  onClearImage={() => setPendingImage(null)}
                 />
               </div>
             </footer>

raggr-frontend/src/components/ConversationList.tsx

@@ -1,5 +1,7 @@
+import { useState, useEffect } from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../lib/utils";
+import { conversationService } from "../api/conversationService";
 
 type Conversation = {
   title: string;
@@ -21,8 +23,32 @@ 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(
@@ -37,7 +63,8 @@ export const ConversationList = ({
         <span>New thread</span>
       </button>
 
-      {conversations.map((conv) => {
+      {/* Conversation items */}
+      {items.map((conv) => {
         const isActive = conv.id === selectedId;
         return (
           <button

raggr-frontend/src/components/LoginScreen.tsx

@@ -1,19 +1,66 @@
+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 { isChecking, isLoggingIn, error, handleLogin } = useOIDCAuth({
+  const [error, setError] = useState<string>("");
-    setAuthenticated,
+  const [isChecking, setIsChecking] = useState<boolean>(true);
-  });
+  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={{
@@ -38,6 +85,7 @@ 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={{
@@ -46,10 +94,12 @@ 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" />
@@ -70,6 +120,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
         </div>
 
+        {/* Card */}
         <div
           className={cn(
             "bg-warm-white rounded-3xl border border-sand-light",
@@ -87,7 +138,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
 
           <button
-            onClick={handleLogin}
+            onClick={handleOIDCLogin}
             disabled={isLoggingIn}
             className={cn(
               "w-full py-3.5 px-4 rounded-2xl text-sm font-semibold tracking-wide",
@@ -103,7 +154,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,14 +1,26 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import { cn } from "../lib/utils";
-import { usePresignedUrl } from "../hooks/usePresignedUrl";
+import { conversationService } from "../api/conversationService";
 
 type QuestionBubbleProps = {
   text: string;
   image_key?: string | null;
 };
 
-export const QuestionBubble = React.memo(({ text, image_key }: QuestionBubbleProps) => {
+export const QuestionBubble = ({ text, image_key }: QuestionBubbleProps) => {
-  const { imageUrl, imageError } = usePresignedUrl(image_key);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  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">
@@ -22,6 +34,7 @@ export const QuestionBubble = React.memo(({ text, image_key }: QuestionBubblePro
       >
         {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>
         )}
@@ -36,4 +49,4 @@ export const QuestionBubble = React.memo(({ text, image_key }: QuestionBubblePro
       </div>
     </div>
   );
-});
+};

raggr-frontend/src/components/ToolBubble.tsx

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

raggr-frontend/src/hooks/useAdminUsers.ts

@@ -1,21 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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 };
-}

startup.sh

@@ -7,9 +7,26 @@ aerich upgrade
 mkdir -p /app/data/obsidian
 
 # Start continuous Obsidian sync if enabled
+if [ "${OBSIDIAN_CONTINUOUS_SYNC}" = "true" ]; then
+    VAULT_PATH="${OBSIDIAN_VAULT_PATH:-/app/data/obsidian}"
+
+    # Setup sync if not already configured
+    if ! ob sync-status --path "$VAULT_PATH" > /dev/null 2>&1; then
+        echo "Configuring Obsidian sync..."
+        ob sync-setup \
+            --vault "${OBSIDIAN_VAULT_ID}" \
+            --path "$VAULT_PATH" \
+            --password "${OBSIDIAN_E2E_PASSWORD}" \
+            --device-name "${OBSIDIAN_DEVICE_NAME:-simbarag}" || {
+                echo "Failed to configure Obsidian sync. Skipping."
+                OBSIDIAN_CONTINUOUS_SYNC=false
+            }
+    fi
+
     if [ "${OBSIDIAN_CONTINUOUS_SYNC}" = "true" ]; then
         echo "Starting Obsidian continuous sync in background..."
-    ob sync --continuous &
+        ob sync --path "$VAULT_PATH" --continuous &
+    fi
 fi
 
 echo "Starting application..."