Frontend revamp: Animal Crossing × Claude design with shadcn components

- New palette: deep nook green sidebar, sage user bubbles, warm cream answer cards
- shadcn-style UI primitives: Button (CVA variants), Textarea, Input, Badge, Table
- cn() utility (clsx + tailwind-merge)
- lucide-react icons throughout (no more text-only buttons)
- Simba mode: custom CSS toggle switch
- Send button: circular amber button with arrow icon
- AnswerBubble: amber gradient accent bar, loading dots animation
- QuestionBubble: sage green pill with rounded-3xl
- ToolBubble: centered leaf-green badge pill
- ConversationList: active item highlighting, proper selectedId prop
- Sidebar: collapsible with PanelLeftClose/Open icons, icon-only collapsed state
- LoginScreen: decorative background blobs, refined rounded card
- AdminPanel: proper icon buttons, leaf-green save confirmation
- Fonts: Playfair Display (brand) + Nunito 800 weight added

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

raggr-frontend/src/components/AdminPanel.tsx

@@ -1,5 +1,17 @@
 import { useEffect, useState } from "react";
+import { X, Phone, PhoneOff, Pencil, Check } from "lucide-react";
 import { userService, type AdminUserRecord } from "../api/userService";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
 
 type Props = {
   onClose: () => void;
@@ -24,8 +36,8 @@ export const AdminPanel = ({ onClose }: Props) => {
   const startEdit = (user: AdminUserRecord) => {
     setEditingId(user.id);
     setEditValue(user.whatsapp_number ?? "");
-    setRowError((prev) => ({ ...prev, [user.id]: "" }));
-    setRowSuccess((prev) => ({ ...prev, [user.id]: "" }));
+    setRowError((p) => ({ ...p, [user.id]: "" }));
+    setRowSuccess((p) => ({ ...p, [user.id]: "" }));
   };
 
   const cancelEdit = () => {
@@ -34,33 +46,33 @@ export const AdminPanel = ({ onClose }: Props) => {
   };
 
   const saveWhatsapp = async (userId: string) => {
-    setRowError((prev) => ({ ...prev, [userId]: "" }));
+    setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       const updated = await userService.adminSetWhatsapp(userId, editValue);
-      setUsers((prev) => prev.map((u) => (u.id === userId ? updated : u)));
-      setRowSuccess((prev) => ({ ...prev, [userId]: "Saved" }));
+      setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
+      setRowSuccess((p) => ({ ...p, [userId]: "Saved ✓" }));
       setEditingId(null);
-      setTimeout(() => setRowSuccess((prev) => ({ ...prev, [userId]: "" })), 2000);
+      setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
-      setRowError((prev) => ({
-        ...prev,
+      setRowError((p) => ({
+        ...p,
         [userId]: err instanceof Error ? err.message : "Failed to save",
       }));
     }
   };
 
   const unlinkWhatsapp = async (userId: string) => {
-    setRowError((prev) => ({ ...prev, [userId]: "" }));
+    setRowError((p) => ({ ...p, [userId]: "" }));
     try {
       await userService.adminUnlinkWhatsapp(userId);
-      setUsers((prev) =>
-        prev.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)),
+      setUsers((p) =>
+        p.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)),
       );
-      setRowSuccess((prev) => ({ ...prev, [userId]: "Unlinked" }));
-      setTimeout(() => setRowSuccess((prev) => ({ ...prev, [userId]: "" })), 2000);
+      setRowSuccess((p) => ({ ...p, [userId]: "Unlinked ✓" }));
+      setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
     } catch (err) {
-      setRowError((prev) => ({
-        ...prev,
+      setRowError((p) => ({
+        ...p,
         [userId]: err instanceof Error ? err.message : "Failed to unlink",
       }));
     }
@@ -68,110 +80,152 @@ export const AdminPanel = ({ onClose }: Props) => {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-charcoal/40 backdrop-blur-sm"
       onClick={(e) => e.target === e.currentTarget && onClose()}
     >
-      <div className="bg-warm-white rounded-2xl shadow-2xl w-full max-w-3xl mx-4 max-h-[80vh] flex flex-col">
+      <div
+        className={cn(
+          "bg-warm-white rounded-3xl shadow-2xl shadow-charcoal/20",
+          "w-full max-w-3xl mx-4 max-h-[82vh] flex flex-col",
+          "border border-sand-light/60",
+        )}
+      >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-sand-light">
-          <h2 className="text-base font-semibold text-charcoal">Admin: WhatsApp Numbers</h2>
+        <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">
+              <Phone size={14} className="text-leaf-dark" />
+            </div>
+            <h2 className="text-sm font-semibold text-charcoal">
+              Admin · WhatsApp Numbers
+            </h2>
+          </div>
           <button
-            className="text-warm-gray hover:text-charcoal text-xl leading-none cursor-pointer"
             onClick={onClose}
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer"
           >
-            ×
+            <X size={15} />
           </button>
         </div>
 
         {/* Body */}
-        <div className="overflow-y-auto flex-1">
+        <div className="overflow-y-auto flex-1 rounded-b-3xl">
           {loading ? (
-            <div className="px-6 py-10 text-center text-warm-gray text-sm">Loading…</div>
+            <div className="px-6 py-12 text-center text-warm-gray text-sm">
+              <div className="flex justify-center gap-1.5 mb-3">
+                <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" />
+                <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+              </div>
+              Loading users…
+            </div>
           ) : (
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-sand-light text-left text-warm-gray">
-                  <th className="px-6 py-3 font-medium">Username</th>
-                  <th className="px-6 py-3 font-medium">Email</th>
-                  <th className="px-6 py-3 font-medium">WhatsApp</th>
-                  <th className="px-6 py-3 font-medium">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Username</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>WhatsApp</TableHead>
+                  <TableHead className="w-28">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
                 {users.map((user) => (
-                  <tr
-                    key={user.id}
-                    className="border-b border-sand-light/50 hover:bg-cream/40 transition-colors"
-                  >
-                    <td className="px-6 py-3 text-charcoal font-medium">{user.username}</td>
-                    <td className="px-6 py-3 text-warm-gray">{user.email}</td>
-                    <td className="px-6 py-3">
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium text-charcoal">
+                      {user.username}
+                    </TableCell>
+                    <TableCell className="text-warm-gray">{user.email}</TableCell>
+                    <TableCell>
                       {editingId === user.id ? (
                         <div className="flex flex-col gap-1">
-                          <input
-                            className="border border-sand-light rounded-lg px-2 py-1 text-sm text-charcoal bg-cream focus:outline-none focus:ring-1 focus:ring-amber-soft w-52"
+                          <Input
                             value={editValue}
                             onChange={(e) => setEditValue(e.target.value)}
                             placeholder="whatsapp:+15551234567"
+                            className="w-52"
                             autoFocus
+                            onKeyDown={(e) =>
+                              e.key === "Enter" && saveWhatsapp(user.id)
+                            }
                           />
                           {rowError[user.id] && (
-                            <span className="text-xs text-red-500">{rowError[user.id]}</span>
+                            <span className="text-xs text-red-500">
+                              {rowError[user.id]}
+                            </span>
                           )}
                         </div>
                       ) : (
-                        <div className="flex flex-col gap-1">
-                          <span className={user.whatsapp_number ? "text-charcoal" : "text-warm-gray/50 italic"}>
+                        <div className="flex flex-col gap-0.5">
+                          <span
+                            className={cn(
+                              "text-sm",
+                              user.whatsapp_number
+                                ? "text-charcoal"
+                                : "text-warm-gray/40 italic",
+                            )}
+                          >
                             {user.whatsapp_number ?? "—"}
                           </span>
                           {rowSuccess[user.id] && (
-                            <span className="text-xs text-green-600">{rowSuccess[user.id]}</span>
+                            <span className="text-xs text-leaf-dark">
+                              {rowSuccess[user.id]}
+                            </span>
                           )}
                           {rowError[user.id] && (
-                            <span className="text-xs text-red-500">{rowError[user.id]}</span>
+                            <span className="text-xs text-red-500">
+                              {rowError[user.id]}
+                            </span>
                           )}
                         </div>
                       )}
-                    </td>
-                    <td className="px-6 py-3">
+                    </TableCell>
+                    <TableCell>
                       {editingId === user.id ? (
-                        <div className="flex gap-2">
-                          <button
-                            className="text-xs px-2.5 py-1 rounded-lg bg-amber-soft/80 text-charcoal hover:bg-amber-soft transition-colors cursor-pointer"
+                        <div className="flex gap-1.5">
+                          <Button
+                            size="sm"
+                            variant="default"
                             onClick={() => saveWhatsapp(user.id)}
                           >
+                            <Check size={12} />
                             Save
-                          </button>
-                          <button
-                            className="text-xs px-2.5 py-1 rounded-lg text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer"
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost-dark"
                             onClick={cancelEdit}
                           >
                             Cancel
-                          </button>
+                          </Button>
                         </div>
                       ) : (
-                        <div className="flex gap-2">
-                          <button
-                            className="text-xs px-2.5 py-1 rounded-lg text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer"
+                        <div className="flex gap-1.5">
+                          <Button
+                            size="sm"
+                            variant="ghost-dark"
                             onClick={() => startEdit(user)}
                           >
+                            <Pencil size={11} />
                             Edit
-                          </button>
+                          </Button>
                           {user.whatsapp_number && (
-                            <button
-                              className="text-xs px-2.5 py-1 rounded-lg text-red-400 hover:text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
+                            <Button
+                              size="sm"
+                              variant="destructive"
                               onClick={() => unlinkWhatsapp(user.id)}
                             >
+                              <PhoneOff size={11} />
                               Unlink
-                            </button>
+                            </Button>
                           )}
                         </div>
                       )}
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 ))}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           )}
         </div>
       </div>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -1,4 +1,5 @@
 import ReactMarkdown from "react-markdown";
+import { cn } from "../lib/utils";
 
 type AnswerBubbleProps = {
   text: string;
@@ -7,25 +8,32 @@ type AnswerBubbleProps = {
 
 export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
   return (
-    <div className="rounded-md bg-orange-100 p-3 sm:p-4 w-2/3">
-      {loading ? (
-        <div className="flex flex-col w-full animate-pulse gap-2">
-          <div className="flex flex-row gap-2 w-full">
-            <div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-            <div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-          </div>
-          <div className="flex flex-row gap-2 w-full">
-            <div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
-            <div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
-          </div>
+    <div className="flex justify-start message-enter">
+      <div
+        className={cn(
+          "max-w-[78%] rounded-3xl rounded-bl-md",
+          "bg-warm-white border border-sand-light/70",
+          "shadow-sm shadow-sand/30",
+          "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">
+          {loading ? (
+            <div className="flex items-center gap-1.5 py-1 px-1">
+              <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" />
+              <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+            </div>
+          ) : (
+            <div className="markdown-content text-sm leading-relaxed text-charcoal">
+              <ReactMarkdown>{text}</ReactMarkdown>
+            </div>
+          )}
         </div>
-      ) : (
-        <div className=" flex flex-col break-words overflow-wrap-anywhere text-sm sm:text-base [&>*]:break-words">
-          <ReactMarkdown>
-            {"🐈: " + text}
-          </ReactMarkdown>
-        </div>
-      )}
+      </div>
     </div>
   );
 };

raggr-frontend/src/components/ChatScreen.tsx

@@ -1,4 +1,5 @@
 import { 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";
@@ -7,6 +8,7 @@ import { ToolBubble } from "./ToolBubble";
 import { MessageInput } from "./MessageInput";
 import { ConversationList } from "./ConversationList";
 import { AdminPanel } from "./AdminPanel";
+import { cn } from "../lib/utils";
 import catIcon from "../assets/cat.png";
 
 type Message = {
@@ -14,11 +16,6 @@ type Message = {
   speaker: "simba" | "user" | "tool";
 };
 
-type QuestionAnswer = {
-  question: string;
-  answer: string;
-};
-
 type Conversation = {
   title: string;
   id: string;
@@ -48,15 +45,9 @@ const TOOL_MESSAGES: Record<string, string> = {
 
 export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   const [query, setQuery] = useState<string>("");
-  const [answer, setAnswer] = useState<string>("");
   const [simbaMode, setSimbaMode] = useState<boolean>(false);
-  const [questionsAnswers, setQuestionsAnswers] = useState<QuestionAnswer[]>(
-    [],
-  );
   const [messages, setMessages] = useState<Message[]>([]);
-  const [conversations, setConversations] = useState<Conversation[]>([
-    { title: "simba meow meow", id: "uuid" },
-  ]);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
   const [showConversations, setShowConversations] = useState<boolean>(false);
   const [selectedConversation, setSelectedConversation] =
     useState<Conversation | null>(null);
@@ -74,61 +65,45 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
-  // Cleanup effect to handle component unmounting
   useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
-      // Abort any pending requests when component unmounts
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
+      abortControllerRef.current?.abort();
     };
   }, []);
 
   const handleSelectConversation = (conversation: Conversation) => {
     setShowConversations(false);
     setSelectedConversation(conversation);
-    const loadMessages = async () => {
+    const load = async () => {
       try {
-        const fetchedConversation = await conversationService.getConversation(
-          conversation.id,
-        );
+        const fetched = await conversationService.getConversation(conversation.id);
         setMessages(
-          fetchedConversation.messages.map((message) => ({
-            text: message.text,
-            speaker: message.speaker,
-          })),
+          fetched.messages.map((m) => ({ text: m.text, speaker: m.speaker })),
         );
-      } catch (error) {
-        console.error("Failed to load messages:", error);
+      } catch (err) {
+        console.error("Failed to load messages:", err);
       }
     };
-    loadMessages();
+    load();
   };
 
   const loadConversations = async () => {
     try {
-      const fetchedConversations =
-        await conversationService.getAllConversations();
-      const parsedConversations = fetchedConversations.map((conversation) => ({
-        id: conversation.id,
-        title: conversation.name,
-      }));
-      setConversations(parsedConversations);
-      setSelectedConversation(parsedConversations[0]);
-    } catch (error) {
-      console.error("Failed to load messages:", error);
+      const fetched = await conversationService.getAllConversations();
+      const parsed = fetched.map((c) => ({ id: c.id, title: c.name }));
+      setConversations(parsed);
+      setSelectedConversation(parsed[0] ?? null);
+    } catch (err) {
+      console.error("Failed to load conversations:", err);
     }
   };
 
   const handleCreateNewConversation = async () => {
-    const newConversation = await conversationService.createConversation();
+    const newConv = await conversationService.createConversation();
     await loadConversations();
-    setSelectedConversation({
-      title: newConversation.name,
-      id: newConversation.id,
-    });
+    setSelectedConversation({ title: newConv.name, id: newConv.id });
   };
 
   useEffect(() => {
@@ -141,64 +116,48 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   }, [messages]);
 
   useEffect(() => {
-    const loadMessages = async () => {
-      if (selectedConversation == null) return;
+    const load = async () => {
+      if (!selectedConversation) return;
       try {
-        const conversation = await conversationService.getConversation(
-          selectedConversation.id,
-        );
-        // Update the conversation title in case it changed
-        setSelectedConversation({
-          id: conversation.id,
-          title: conversation.name,
-        });
-        setMessages(
-          conversation.messages.map((message) => ({
-            text: message.text,
-            speaker: message.speaker,
-          })),
-        );
-      } catch (error) {
-        console.error("Failed to load messages:", error);
+        const conv = await conversationService.getConversation(selectedConversation.id);
+        setSelectedConversation({ id: conv.id, title: conv.name });
+        setMessages(conv.messages.map((m) => ({ text: m.text, speaker: m.speaker })));
+      } catch (err) {
+        console.error("Failed to load messages:", err);
       }
     };
-    loadMessages();
+    load();
   }, [selectedConversation?.id]);
 
   const handleQuestionSubmit = async () => {
-    if (!query.trim() || isLoading) return; // Don't submit empty messages or while loading
+    if (!query.trim() || isLoading) return;
 
     const currMessages = messages.concat([{ text: query, speaker: "user" }]);
     setMessages(currMessages);
-    setQuery(""); // Clear input immediately after submission
+    setQuery("");
     setIsLoading(true);
 
     if (simbaMode) {
-      const randomIndex = Math.floor(Math.random() * simbaAnswers.length);
-      const randomElement = simbaAnswers[randomIndex];
+      const randomElement = simbaAnswers[Math.floor(Math.random() * simbaAnswers.length)];
       setMessages((prev) => prev.concat([{ text: randomElement, speaker: "simba" }]));
       setIsLoading(false);
       return;
     }
 
-    // Create a new AbortController for this request
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
 
     try {
       await conversationService.streamQuery(
         query,
-        selectedConversation.id,
+        selectedConversation!.id,
         (event) => {
           if (!isMountedRef.current) return;
           if (event.type === "tool_start") {
-            const friendly =
-              TOOL_MESSAGES[event.tool] ?? `🔧 Using ${event.tool}...`;
+            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" }]),
-            );
+            setMessages((prev) => prev.concat([{ text: event.message, speaker: "simba" }]));
           } else if (event.type === "error") {
             console.error("Stream error:", event.message);
           }
@@ -206,22 +165,16 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
         abortController.signal,
       );
     } catch (error) {
-      // Ignore abort errors (these are intentional cancellations)
       if (error instanceof Error && error.name === "AbortError") {
         console.log("Request was aborted");
       } else {
         console.error("Failed to send query:", error);
-        // If session expired, redirect to login
         if (error instanceof Error && error.message.includes("Session expired")) {
           setAuthenticated(false);
         }
       }
     } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setIsLoading(false);
-      }
-      // Clear the abort controller reference
+      if (isMountedRef.current) setIsLoading(false);
       abortControllerRef.current = null;
     }
   };
@@ -230,10 +183,10 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     setQuery(event.target.value);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Submit on Enter, but allow Shift+Enter for new line
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
+  const handleKeyDown = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const kev = event as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+    if (kev.key === "Enter" && !kev.shiftKey) {
+      kev.preventDefault();
       handleQuestionSubmit();
     }
   };
@@ -245,30 +198,54 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   };
 
   return (
-    <div className="h-screen flex flex-row bg-cream">
-      {/* Sidebar */}
+    <div className="h-screen flex flex-row bg-cream overflow-hidden">
+      {/* ── Desktop Sidebar ─────────────────────────────── */}
       <aside
-        className={`hidden md:flex md:flex-col bg-sidebar-bg transition-all duration-300 ease-in-out ${
-          sidebarCollapsed ? "w-[68px]" : "w-72"
-        }`}
+        className={cn(
+          "hidden md:flex md:flex-col",
+          "bg-sidebar-bg transition-all duration-300 ease-in-out",
+          sidebarCollapsed ? "w-[56px]" : "w-64",
+        )}
       >
-        {!sidebarCollapsed ? (
+        {sidebarCollapsed ? (
+          /* Collapsed state */
+          <div className="flex flex-col items-center py-4 gap-4 h-full">
+            <button
+              onClick={() => setSidebarCollapsed(false)}
+              className="w-9 h-9 rounded-xl flex items-center justify-center text-cream/50 hover:text-cream hover:bg-white/10 transition-all cursor-pointer"
+            >
+              <PanelLeftOpen size={18} />
+            </button>
+            <img
+              src={catIcon}
+              alt="Simba"
+              className="w-7 h-7 opacity-70 mt-1"
+            />
+          </div>
+        ) : (
+          /* Expanded state */
           <div className="flex flex-col h-full">
-            {/* Sidebar header */}
-            <div className="flex items-center gap-3 px-5 py-5 border-b border-white/10">
-              <img
-                src={catIcon}
-                alt="Simba"
-                className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200 flex-shrink-0"
+            {/* 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-7 h-7" />
+                <h2
+                  className="text-lg font-bold text-cream tracking-tight"
+                  style={{ fontFamily: "var(--font-display)" }}
+                >
+                  asksimba
+                </h2>
+              </div>
+              <button
                 onClick={() => setSidebarCollapsed(true)}
-              />
-              <h2 className="font-[family-name:var(--font-display)] text-xl font-bold text-cream tracking-tight">
-                asksimba
-              </h2>
+                className="w-7 h-7 rounded-lg flex items-center justify-center text-cream/40 hover:text-cream hover:bg-white/10 transition-all cursor-pointer"
+              >
+                <PanelLeftClose size={15} />
+              </button>
             </div>
 
             {/* Conversations */}
-            <div className="flex-1 overflow-y-auto px-3 py-3">
+            <div className="flex-1 overflow-y-auto px-2 py-3">
               <ConversationList
                 conversations={conversations}
                 onCreateNewConversation={handleCreateNewConversation}
@@ -277,82 +254,76 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               />
             </div>
 
-            {/* Logout */}
-            <div className="px-3 pb-4 pt-2 border-t border-white/10">
+            {/* Footer */}
+            <div className="px-2 pb-3 pt-2 border-t border-white/8 flex flex-col gap-0.5">
               {isAdmin && (
                 <button
-                  className="w-full py-2.5 px-3 text-sm text-cream/60 hover:text-cream hover:bg-white/5 rounded-lg transition-all duration-200 cursor-pointer"
                   onClick={() => setShowAdminPanel(true)}
+                  className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
                 >
-                  Admin
+                  <Shield size={14} />
+                  <span>Admin</span>
                 </button>
               )}
               <button
-                className="w-full py-2.5 px-3 text-sm text-cream/60 hover:text-cream hover:bg-white/5
-                  rounded-lg transition-all duration-200 cursor-pointer"
                 onClick={handleLogout}
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
               >
-                Sign out
+                <LogOut size={14} />
+                <span>Sign out</span>
               </button>
             </div>
           </div>
-        ) : (
-          <div className="flex flex-col items-center py-5 h-full">
-            <img
-              src={catIcon}
-              alt="Simba"
-              className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200"
-              onClick={() => setSidebarCollapsed(false)}
-            />
-          </div>
         )}
       </aside>
 
+      {/* Admin Panel modal */}
       {showAdminPanel && <AdminPanel onClose={() => setShowAdminPanel(false)} />}
 
-      {/* Main chat area */}
-      <div className="flex-1 flex flex-col h-screen overflow-hidden">
+      {/* ── Main chat area ──────────────────────────────── */}
+      <div className="flex-1 flex flex-col h-screen 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">
-          <div className="flex items-center gap-2.5">
-            <img src={catIcon} alt="Simba" className="w-8 h-8" />
-            <h1 className="font-[family-name:var(--font-display)] text-lg font-bold text-charcoal">
+        <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-7 h-7" />
+            <h1
+              className="text-base font-bold text-charcoal"
+              style={{ fontFamily: "var(--font-display)" }}
+            >
               asksimba
             </h1>
           </div>
           <div className="flex items-center gap-2">
             <button
-              className="px-3 py-1.5 text-xs font-medium rounded-lg bg-cream-dark text-charcoal
-                hover:bg-sand-light transition-colors cursor-pointer"
-              onClick={() => setShowConversations(!showConversations)}
+              className="w-8 h-8 rounded-xl flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-all cursor-pointer"
+              onClick={() => setShowConversations((v) => !v)}
             >
-              {showConversations ? "Hide" : "Threads"}
+              {showConversations ? <X size={16} /> : <Menu size={16} />}
             </button>
             <button
-              className="px-3 py-1.5 text-xs font-medium rounded-lg text-warm-gray
-                hover:bg-cream-dark transition-colors cursor-pointer"
+              className="w-8 h-8 rounded-xl flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-all cursor-pointer"
               onClick={handleLogout}
             >
-              Sign out
+              <LogOut size={15} />
             </button>
           </div>
         </header>
 
         {/* Conversation title bar */}
         {selectedConversation && (
-          <div className="bg-warm-white/80 backdrop-blur-sm border-b border-sand-light/50 px-6 py-3">
-            <h2 className="text-sm font-semibold text-charcoal truncate max-w-2xl mx-auto">
+          <div className="bg-warm-white/80 backdrop-blur-sm border-b border-sand-light/50 px-6 py-2.5">
+            <p className="text-xs font-semibold text-warm-gray truncate max-w-2xl mx-auto uppercase tracking-wider">
               {selectedConversation.title || "Untitled Conversation"}
-            </h2>
+            </p>
           </div>
         )}
 
-        {/* Messages area */}
+        {/* Messages */}
         <div className="flex-1 overflow-y-auto px-4 py-6">
-          <div className="max-w-2xl mx-auto flex flex-col gap-4">
-            {/* Mobile conversation list */}
+          <div className="max-w-2xl mx-auto flex flex-col gap-3">
+            {/* Mobile conversation drawer */}
             {showConversations && (
-              <div className="md:hidden mb-2">
+              <div className="md:hidden mb-3 bg-warm-white rounded-2xl border border-sand-light p-3 shadow-sm">
                 <ConversationList
                   conversations={conversations}
                   onCreateNewConversation={handleCreateNewConversation}
@@ -364,20 +335,18 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
 
             {/* Empty state */}
             {messages.length === 0 && !isLoading && (
-              <div className="flex flex-col items-center justify-center py-20 gap-4">
+              <div className="flex flex-col items-center justify-center py-24 gap-5">
                 <div className="relative">
-                  <div className="absolute -inset-4 bg-amber-soft/20 rounded-full blur-2xl" />
+                  <div className="absolute -inset-6 bg-amber-soft/20 rounded-full blur-3xl" />
                   <img
                     src={catIcon}
                     alt="Simba"
-                    className="relative w-16 h-16 opacity-60"
+                    className="relative w-16 h-16 opacity-50"
                   />
                 </div>
-                <div className="text-center">
-                  <p className="text-warm-gray text-sm">
-                    Ask Simba anything
-                  </p>
-                </div>
+                <p className="text-warm-gray/60 text-sm">
+                  Ask Simba anything
+                </p>
               </div>
             )}
 
@@ -388,14 +357,15 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
                 return <AnswerBubble key={index} text={msg.text} />;
               return <QuestionBubble key={index} text={msg.text} />;
             })}
+
             {isLoading && <AnswerBubble text="" loading={true} />}
             <div ref={messagesEndRef} />
           </div>
         </div>
 
-        {/* Input area */}
-        <footer className="border-t border-sand-light/50 bg-warm-white/60 backdrop-blur-sm">
-          <div className="max-w-2xl mx-auto px-4 py-4">
+        {/* Input */}
+        <footer className="border-t border-sand-light/40 bg-cream/80 backdrop-blur-sm">
+          <div className="max-w-2xl mx-auto px-4 py-3">
             <MessageInput
               query={query}
               handleQueryChange={handleQueryChange}

raggr-frontend/src/components/ConversationList.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
-
+import { Plus } from "lucide-react";
+import { cn } from "../lib/utils";
 import { conversationService } from "../api/conversationService";
+
 type Conversation = {
   title: string;
   id: string;
@@ -10,60 +12,72 @@ type ConversationProps = {
   conversations: Conversation[];
   onSelectConversation: (conversation: Conversation) => void;
   onCreateNewConversation: () => void;
+  selectedId?: string;
 };
 
 export const ConversationList = ({
   conversations,
   onSelectConversation,
   onCreateNewConversation,
+  selectedId,
 }: ConversationProps) => {
-  const [conservations, setConversations] = useState(conversations);
+  const [items, setItems] = useState(conversations);
 
   useEffect(() => {
-    const loadConversations = async () => {
+    const load = async () => {
       try {
-        let fetchedConversations =
-          await conversationService.getAllConversations();
-
-        if (conversations.length == 0) {
+        let fetched = await conversationService.getAllConversations();
+        if (fetched.length === 0) {
           await conversationService.createConversation();
-          fetchedConversations =
-            await conversationService.getAllConversations();
+          fetched = await conversationService.getAllConversations();
         }
-        setConversations(
-          fetchedConversations.map((conversation) => ({
-            id: conversation.id,
-            title: conversation.name,
-          })),
-        );
-      } catch (error) {
-        console.error("Failed to load messages:", error);
+        setItems(fetched.map((c) => ({ id: c.id, title: c.name })));
+      } catch (err) {
+        console.error("Failed to load conversations:", err);
       }
     };
-    loadConversations();
+    load();
   }, []);
 
+  // Keep in sync when parent updates conversations
+  useEffect(() => {
+    setItems(conversations);
+  }, [conversations]);
+
   return (
-    <div className="bg-stone-200 rounded-md p-3 sm:p-4 flex flex-col gap-1">
-      {conservations.map((conversation) => {
+    <div className="flex flex-col gap-1">
+      {/* New thread button */}
+      <button
+        onClick={onCreateNewConversation}
+        className={cn(
+          "flex items-center gap-2 w-full px-3 py-2 rounded-xl",
+          "text-sm text-cream/60 hover:text-cream hover:bg-white/8",
+          "transition-all duration-150 cursor-pointer mb-1",
+        )}
+      >
+        <Plus size={14} strokeWidth={2.5} />
+        <span>New thread</span>
+      </button>
+
+      {/* Conversation items */}
+      {items.map((conv) => {
+        const isActive = conv.id === selectedId;
         return (
-          <div
-            key={conversation.id}
-            className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
-            onClick={() => onSelectConversation(conversation)}
+          <button
+            key={conv.id}
+            onClick={() => onSelectConversation(conv)}
+            className={cn(
+              "w-full px-3 py-2 rounded-xl text-left",
+              "text-sm truncate transition-all duration-150 cursor-pointer",
+              isActive
+                ? "bg-white/12 text-cream font-medium"
+                : "text-cream/60 hover:text-cream hover:bg-white/8",
+            )}
           >
-            <p className="text-sm sm:text-base truncate w-full">
-              {conversation.title}
-            </p>
-          </div>
+            {conv.title}
+          </button>
         );
       })}
-      <div
-        className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
-        onClick={() => onCreateNewConversation()}
-      >
-        <p className="text-sm sm:text-base"> + Start a new thread</p>
-      </div>
     </div>
   );
 };

raggr-frontend/src/components/LoginScreen.tsx

@@ -2,6 +2,7 @@ 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";
 
 type LoginScreenProps = {
   setAuthenticated: (isAuth: boolean) => void;
@@ -14,25 +15,17 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
 
   useEffect(() => {
     const initAuth = async () => {
-      // First, check for OIDC callback parameters
       const callbackParams = oidcService.getCallbackParamsFromURL();
-
       if (callbackParams) {
-        // Handle OIDC callback
         try {
           setIsLoggingIn(true);
           const result = await oidcService.handleCallback(
             callbackParams.code,
-            callbackParams.state
+            callbackParams.state,
           );
-
-          // Store tokens
           localStorage.setItem("access_token", result.access_token);
           localStorage.setItem("refresh_token", result.refresh_token);
-
-          // Clear URL parameters
           oidcService.clearCallbackParams();
-
           setAuthenticated(true);
           setIsChecking(false);
           return;
@@ -45,15 +38,10 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           return;
         }
       }
-
-      // Check if user is already authenticated
       const isValid = await userService.validateToken();
-      if (isValid) {
-        setAuthenticated(true);
-      }
+      if (isValid) setAuthenticated(true);
       setIsChecking(false);
     };
-
     initAuth();
   }, [setAuthenticated]);
 
@@ -61,29 +49,34 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
     try {
       setIsLoggingIn(true);
       setError("");
-
-      // Get authorization URL from backend
       const authUrl = await oidcService.initiateLogin();
-
-      // Redirect to Authelia
       window.location.href = authUrl;
-    } catch (err) {
+    } catch {
       setError("Failed to initiate login. Please try again.");
-      console.error("OIDC login error:", err);
       setIsLoggingIn(false);
     }
   };
 
-  // Show loading state while checking authentication or processing callback
   if (isChecking || isLoggingIn) {
     return (
       <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
-        <img
-          src={catIcon}
-          alt="Simba"
-          className="w-16 h-16 animate-bounce"
+        {/* Subtle dot grid */}
+        <div
+          className="fixed inset-0 pointer-events-none opacity-[0.035]"
+          style={{
+            backgroundImage: `radial-gradient(circle, var(--color-charcoal) 1px, transparent 0)`,
+            backgroundSize: "22px 22px",
+          }}
         />
-        <p className="text-warm-gray font-medium text-lg tracking-wide">
+        <div className="relative">
+          <div className="absolute -inset-4 bg-amber-soft/30 rounded-full blur-2xl" />
+          <img
+            src={catIcon}
+            alt="Simba"
+            className="relative w-14 h-14 animate-bounce drop-shadow"
+          />
+        </div>
+        <p className="text-warm-gray text-sm tracking-wide font-medium">
           {isLoggingIn ? "letting you in..." : "checking credentials..."}
         </p>
       </div>
@@ -91,27 +84,35 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
   }
 
   return (
-    <div className="h-screen bg-cream flex items-center justify-center p-4">
-      {/* Decorative background texture */}
-      <div className="fixed inset-0 opacity-[0.03] pointer-events-none"
+    <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={{
-          backgroundImage: `radial-gradient(circle at 1px 1px, var(--color-charcoal) 1px, transparent 0)`,
-          backgroundSize: '24px 24px'
+          backgroundImage: `radial-gradient(circle, var(--color-charcoal) 1px, transparent 0)`,
+          backgroundSize: "22px 22px",
         }}
       />
 
+      {/* 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">
-        {/* Cat icon & branding */}
+        {/* Branding */}
         <div className="flex flex-col items-center mb-8">
-          <div className="relative mb-4">
-            <div className="absolute -inset-3 bg-amber-soft/40 rounded-full blur-xl" />
+          <div className="relative mb-5">
+            <div className="absolute -inset-5 bg-amber-soft/30 rounded-full blur-2xl" />
             <img
               src={catIcon}
               alt="Simba"
               className="relative w-20 h-20 drop-shadow-lg"
             />
           </div>
-          <h1 className="font-[family-name:var(--font-display)] text-4xl font-bold text-charcoal tracking-tight">
+          <h1
+            className="text-4xl font-bold text-charcoal tracking-tight"
+            style={{ fontFamily: "var(--font-display)" }}
+          >
             asksimba
           </h1>
           <p className="text-warm-gray text-sm mt-1.5 tracking-wide">
@@ -119,10 +120,15 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
         </div>
 
-        {/* Login card */}
-        <div className="bg-warm-white rounded-2xl shadow-lg shadow-sand/40 border border-sand-light/60 p-8">
+        {/* Card */}
+        <div
+          className={cn(
+            "bg-warm-white rounded-3xl border border-sand-light",
+            "shadow-xl shadow-sand/30 p-8",
+          )}
+        >
           {error && (
-            <div className="mb-4 text-sm bg-red-50 text-red-700 p-3 rounded-xl border border-red-200">
+            <div className="mb-5 text-sm bg-red-50 text-red-600 px-4 py-3 rounded-2xl border border-red-200">
               {error}
             </div>
           )}
@@ -132,21 +138,23 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
           </p>
 
           <button
-            className="w-full py-3.5 px-4 bg-forest text-white font-semibold rounded-xl
-              hover:bg-forest-light transition-all duration-200
-              active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed
-              shadow-md shadow-forest/20 hover:shadow-lg hover:shadow-forest/30
-              cursor-pointer text-sm tracking-wide"
             onClick={handleOIDCLogin}
             disabled={isLoggingIn}
+            className={cn(
+              "w-full py-3.5 px-4 rounded-2xl text-sm font-semibold tracking-wide",
+              "bg-forest text-cream",
+              "shadow-md shadow-forest/20",
+              "hover:bg-forest-mid hover:shadow-lg hover:shadow-forest/30",
+              "active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-all duration-200 cursor-pointer",
+            )}
           >
             {isLoggingIn ? "Redirecting..." : "Sign in with Authelia"}
           </button>
         </div>
 
-        {/* Footer paw prints */}
-        <p className="text-center text-sand mt-6 text-xs tracking-widest select-none">
-          ~ meow ~
+        <p className="text-center text-sand mt-5 text-xs tracking-widest select-none">
+          ✦ meow ✦
         </p>
       </div>
     </div>

raggr-frontend/src/components/MessageInput.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useState, useRef } from "react";
+import { useState } from "react";
+import { ArrowUp } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Textarea } from "./ui/textarea";
 
 type MessageInputProps = {
   handleQueryChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleKeyDown: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleQuestionSubmit: () => void;
-  setSimbaMode: (sdf: boolean) => void;
+  setSimbaMode: (val: boolean) => void;
   query: string;
   isLoading: boolean;
 };
@@ -17,39 +20,64 @@ export const MessageInput = ({
   setSimbaMode,
   isLoading,
 }: MessageInputProps) => {
+  const [simbaMode, setLocalSimbaMode] = useState(false);
+
+  const toggleSimbaMode = () => {
+    const next = !simbaMode;
+    setLocalSimbaMode(next);
+    setSimbaMode(next);
+  };
+
   return (
-    <div className="flex flex-col gap-4 sticky bottom-0 bg-[#3D763A] p-6 rounded-xl">
-      <div className="flex flex-row justify-between grow">
-        <textarea
-          className="p-3 sm:p-4 border border-blue-200 rounded-md grow bg-[#F9F5EB] min-h-[44px] resize-y"
-          onChange={handleQueryChange}
-          onKeyDown={handleKeyDown}
-          value={query}
-          rows={2}
-          placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)"
-        />
-      </div>
-      <div className="flex flex-row justify-between gap-2 grow">
+    <div
+      className={cn(
+        "rounded-2xl bg-warm-white border border-sand shadow-md shadow-sand/30",
+        "transition-shadow duration-200 focus-within:shadow-lg focus-within:shadow-amber-soft/20",
+        "focus-within:border-amber-soft/60",
+      )}
+    >
+      {/* Textarea */}
+      <Textarea
+        onChange={handleQueryChange}
+        onKeyDown={handleKeyDown}
+        value={query}
+        rows={2}
+        placeholder="Ask Simba anything..."
+        className="min-h-[60px] max-h-40"
+      />
+
+      {/* Bottom toolbar */}
+      <div className="flex items-center justify-between px-3 pb-2.5 pt-1">
+        {/* Simba mode toggle */}
         <button
-          className={`p-3 sm:p-4 min-h-[44px] border border-blue-400 rounded-md flex-grow text-sm sm:text-base ${
-            isLoading
-              ? "bg-gray-400 cursor-not-allowed opacity-50"
-              : "bg-[#EDA541] hover:bg-blue-400 cursor-pointer"
-          }`}
-          onClick={() => handleQuestionSubmit()}
-          type="submit"
-          disabled={isLoading}
+          type="button"
+          onClick={toggleSimbaMode}
+          className="flex items-center gap-2 group cursor-pointer select-none"
         >
-          {isLoading ? "Sending..." : "Submit"}
+          <div className={cn("toggle-track", simbaMode && "checked")}>
+            <div className="toggle-thumb" />
+          </div>
+          <span className="text-xs text-warm-gray group-hover:text-charcoal transition-colors">
+            simba mode
+          </span>
+        </button>
+
+        {/* Send button */}
+        <button
+          type="submit"
+          onClick={handleQuestionSubmit}
+          disabled={isLoading || !query.trim()}
+          className={cn(
+            "w-8 h-8 rounded-full flex items-center justify-center",
+            "transition-all duration-200 cursor-pointer",
+            "shadow-sm",
+            isLoading || !query.trim()
+              ? "bg-sand text-warm-gray/50 cursor-not-allowed shadow-none"
+              : "bg-amber-glow text-white hover:bg-amber-dark hover:shadow-md hover:shadow-amber-glow/30 active:scale-95",
+          )}
+        >
+          <ArrowUp size={15} strokeWidth={2.5} />
         </button>
-      </div>
-      <div className="flex flex-row justify-center gap-2 grow items-center">
-        <input
-          type="checkbox"
-          onChange={(event) => setSimbaMode(event.target.checked)}
-          className="w-5 h-5 cursor-pointer"
-        />
-        <p className="text-sm sm:text-base">simba mode?</p>
       </div>
     </div>
   );

raggr-frontend/src/components/QuestionBubble.tsx

@@ -1,11 +1,22 @@
+import { cn } from "../lib/utils";
+
 type QuestionBubbleProps = {
   text: string;
 };
 
 export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
   return (
-    <div className="w-2/3 rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base ml-auto">
-      🤦: {text}
+    <div className="flex justify-end message-enter">
+      <div
+        className={cn(
+          "max-w-[72%] rounded-3xl rounded-br-md",
+          "bg-leaf-pale border border-leaf-light/60",
+          "px-4 py-3 text-sm leading-relaxed text-charcoal",
+          "shadow-sm shadow-leaf/10",
+        )}
+      >
+        {text}
+      </div>
     </div>
   );
 };

raggr-frontend/src/components/ToolBubble.tsx

@@ -1,5 +1,15 @@
+import { cn } from "../lib/utils";
+
 export const ToolBubble = ({ text }: { text: string }) => (
-  <div className="text-sm text-gray-500 italic px-3 py-1 self-start">
-    {text}
+  <div className="flex justify-center message-enter">
+    <div
+      className={cn(
+        "inline-flex items-center gap-1.5 px-3 py-1 rounded-full",
+        "bg-leaf-pale border border-leaf-light/50",
+        "text-xs text-leaf-dark italic",
+      )}
+    >
+      {text}
+    </div>
   </div>
 );

raggr-frontend/src/components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-leaf-pale text-leaf-dark border border-leaf-light/50",
+        amber: "bg-amber-pale text-amber-glow border border-amber-soft/40",
+        muted: "bg-sand-light/60 text-warm-gray border border-sand/40",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export const Badge = ({ className, variant, ...props }: BadgeProps) => {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+};

raggr-frontend/src/components/ui/button.tsx

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-leaf text-white shadow-sm shadow-leaf/20 hover:bg-leaf-dark hover:shadow-md hover:shadow-leaf/30 active:scale-[0.97]",
+        amber:
+          "bg-amber-glow text-white shadow-sm shadow-amber/20 hover:bg-amber-dark hover:shadow-md active:scale-[0.97]",
+        ghost:
+          "text-cream/70 hover:text-cream hover:bg-white/8 active:scale-[0.97]",
+        "ghost-dark":
+          "text-warm-gray hover:text-charcoal hover:bg-sand-light/60 active:scale-[0.97]",
+        outline:
+          "border border-sand bg-transparent text-warm-gray hover:bg-cream-dark hover:text-charcoal active:scale-[0.97]",
+        destructive:
+          "text-red-400 hover:text-red-600 hover:bg-red-50 active:scale-[0.97]",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-7 px-3 text-xs",
+        lg: "h-11 px-6 text-base",
+        icon: "h-9 w-9",
+        "icon-sm": "h-7 w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = ({ className, variant, size, ...props }: ButtonProps) => {
+  return (
+    <button
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+};

raggr-frontend/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = ({ className, ...props }: InputProps) => {
+  return (
+    <input
+      className={cn(
+        "flex h-8 w-full rounded-lg border border-sand bg-cream px-3 py-1",
+        "text-sm text-charcoal placeholder:text-warm-gray/50",
+        "focus:outline-none focus:ring-2 focus:ring-amber-soft/60",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+};

raggr-frontend/src/components/ui/table.tsx

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/utils";
+
+export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+  <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+);
+
+export const TableHeader = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead className={cn("[&_tr]:border-b [&_tr]:border-sand-light", className)} {...props} />
+);
+
+export const TableBody = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+
+export const TableRow = ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr
+    className={cn(
+      "border-b border-sand-light/50 transition-colors hover:bg-cream-dark/40",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableHead = ({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+  <th
+    className={cn(
+      "h-10 px-4 text-left align-middle text-xs font-semibold text-warm-gray uppercase tracking-wider",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableCell = ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+  <td className={cn("px-4 py-3 align-middle", className)} {...props} />
+);

raggr-frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const Textarea = ({ className, ...props }: TextareaProps) => {
+  return (
+    <textarea
+      className={cn(
+        "flex w-full resize-none rounded-xl border-0 bg-transparent px-3 py-2.5",
+        "text-sm text-charcoal placeholder:text-warm-gray/50",
+        "focus:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+};