diff --git a/studio/backend/core/inference/inference.py b/studio/backend/core/inference/inference.py
index 23203613f2..6be7e63306 100644
--- a/studio/backend/core/inference/inference.py
+++ b/studio/backend/core/inference/inference.py
@@ -489,6 +489,7 @@ class InferenceBackend:
     def generate_with_adapter_control(
         self,
         use_adapter: Optional[Union[bool, str]] = None,
+        cancel_event=None,
         **gen_kwargs,
     ) -> Generator[str, None, None]:
         """
@@ -505,7 +506,7 @@ class InferenceBackend:
         with self._generation_lock:
             self._apply_adapter_state(use_adapter)
             # Delegate to the lock-free generation path
-            yield from self._generate_chat_response_inner(**gen_kwargs)
+            yield from self._generate_chat_response_inner(cancel_event=cancel_event, **gen_kwargs)
 
     def generate_chat_response(self,
                           messages: list,
@@ -515,7 +516,8 @@ class InferenceBackend:
                           top_p: float = 0.9,
                           top_k: int = 40,
                           max_new_tokens: int = 256,
-                          repetition_penalty: float = 1.1) -> Generator[str, None, None]:
+                          repetition_penalty: float = 1.1,
+                          cancel_event=None) -> Generator[str, None, None]:
         """
         Generate response for text or vision models.
         Acquires the generation lock. For adapter-controlled generation,
@@ -531,6 +533,7 @@ class InferenceBackend:
                 top_k=top_k,
                 max_new_tokens=max_new_tokens,
                 repetition_penalty=repetition_penalty,
+                cancel_event=cancel_event,
             )
 
     def _generate_chat_response_inner(self,
@@ -541,7 +544,8 @@ class InferenceBackend:
                           top_p: float = 0.9,
                           top_k: int = 40,
                           max_new_tokens: int = 256,
-                          repetition_penalty: float = 1.1) -> Generator[str, None, None]:
+                          repetition_penalty: float = 1.1,
+                          cancel_event=None) -> Generator[str, None, None]:
         """
         Inner generation logic (no lock). Called by both generate_chat_response
         and generate_with_adapter_control.
@@ -558,7 +562,8 @@ class InferenceBackend:
             # Vision model generation
             yield from self._generate_vision_response(
                 messages, system_prompt, image,
-                temperature, top_p, top_k, max_new_tokens, repetition_penalty
+                temperature, top_p, top_k, max_new_tokens, repetition_penalty,
+                cancel_event=cancel_event,
             )
         else:
             # Text model: Use training pipeline approach
@@ -600,12 +605,13 @@ class InferenceBackend:
 
             # Step 3: Generate
             yield from self.generate_stream(
-                formatted_prompt, temperature, top_p, top_k, max_new_tokens, repetition_penalty
+                formatted_prompt, temperature, top_p, top_k, max_new_tokens, repetition_penalty,
+                cancel_event=cancel_event,
             )
 
     def _generate_vision_response(self, messages, system_prompt, image,
                                   temperature, top_p, top_k, max_new_tokens,
-                                  repetition_penalty) -> Generator[str, None, None]:
+                                  repetition_penalty, cancel_event=None) -> Generator[str, None, None]:
         """Handle vision model generation with true token-by-token streaming."""
         model_info = self.models[self.active_model_name]
         model = model_info["model"]
@@ -651,7 +657,10 @@ class InferenceBackend:
             import threading
 
             streamer = TextIteratorStreamer(
-                processor.tokenizer, skip_prompt=True, skip_special_tokens=True
+                processor.tokenizer,
+                skip_prompt=True,
+                skip_special_tokens=True,
+                timeout=0.2,
             )
 
             generation_kwargs = dict(
@@ -664,23 +673,50 @@ class InferenceBackend:
                 top_k=top_k,
             )
 
+            err: dict[str, str] = {}
+
             def generate_fn():
                 try:
                     model.generate(**generation_kwargs)
                 except Exception as e:
+                    err["msg"] = str(e)
                     logger.error(f"Vision generation error in thread: {e}")
+                finally:
+                    try:
+                        streamer.end()
+                    except Exception:
+                        pass
 
             thread = threading.Thread(target=generate_fn)
             thread.start()
 
             output = ""
-            for new_token in streamer:
-                if new_token:
-                    output += new_token
-                    cleaned = self._clean_generated_text(output)
-                    yield cleaned
+            from queue import Empty
+            try:
+                while True:
+                    if cancel_event is not None and cancel_event.is_set():
+                        break
+                    try:
+                        new_token = next(streamer)
+                    except StopIteration:
+                        break
+                    except Empty:
+                        if not thread.is_alive():
+                            break
+                        continue
+                    if new_token:
+                        output += new_token
+                        cleaned = self._clean_generated_text(output)
+                        yield cleaned
+            finally:
+                if cancel_event is not None:
+                    cancel_event.set()
+                thread.join(timeout=10)
+                if thread.is_alive():
+                    logger.warning("Vision generation thread did not exit after cancel/join timeout")
 
-            thread.join()
+            if err.get("msg"):
+                yield f"Error: {err['msg']}"
 
         except Exception as e:
             logger.error(f"Vision generation error: {e}")
@@ -693,7 +729,8 @@ class InferenceBackend:
                        top_p: float = 0.9,
                        top_k: int = 40,
                        max_new_tokens: int = 256,
-                       repetition_penalty: float = 1.1) -> Generator[str, None, None]:
+                       repetition_penalty: float = 1.1,
+                       cancel_event=None) -> Generator[str, None, None]:
         """Generate streaming text response (text models only)."""
         if not self.active_model_name:
             yield "Error: No active model"
@@ -709,7 +746,12 @@ class InferenceBackend:
             from transformers import TextIteratorStreamer
             import threading
 
-            streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+            streamer = TextIteratorStreamer(
+                tokenizer,
+                skip_prompt=True,
+                skip_special_tokens=True,
+                timeout=0.2,
+            )
 
             generation_kwargs = dict(
                 **inputs,
@@ -723,24 +765,66 @@ class InferenceBackend:
                 eos_token_id=tokenizer.eos_token_id,
                 pad_token_id=tokenizer.eos_token_id if tokenizer.pad_token_id is None else tokenizer.pad_token_id,
             )
+            if cancel_event is not None:
+                from transformers.generation.stopping_criteria import (
+                    StoppingCriteria,
+                    StoppingCriteriaList,
+                )
+
+                class _CancelCriteria(StoppingCriteria):
+                    def __init__(self, ev):
+                        self.ev = ev
+
+                    def __call__(self, input_ids, scores, **kwargs):
+                        return self.ev.is_set()
+
+                generation_kwargs["stopping_criteria"] = StoppingCriteriaList(
+                    [_CancelCriteria(cancel_event)]
+                )
 
             def generate_fn():
                 try:
                     model.generate(**generation_kwargs)
                 except Exception as e:
+                    err["msg"] = str(e)
                     logger.error(f"Generation error: {e}")
+                finally:
+                    try:
+                        streamer.end()
+                    except Exception:
+                        pass
 
+            err: dict[str, str] = {}
             thread = threading.Thread(target=generate_fn)
             thread.start()
 
             output = ""
-            for new_token in streamer:
-                if new_token:
-                    output += new_token
-                    cleaned = self._clean_generated_text(output)
-                    yield cleaned
+            from queue import Empty
+            try:
+                while True:
+                    if cancel_event is not None and cancel_event.is_set():
+                        break
+                    try:
+                        new_token = next(streamer)
+                    except StopIteration:
+                        break
+                    except Empty:
+                        if not thread.is_alive():
+                            break
+                        continue
+                    if new_token:
+                        output += new_token
+                        cleaned = self._clean_generated_text(output)
+                        yield cleaned
+            finally:
+                if cancel_event is not None:
+                    cancel_event.set()
+                thread.join(timeout=10)
+                if thread.is_alive():
+                    logger.warning("Generation thread did not exit after cancel/join timeout")
 
-            thread.join()
+            if err.get("msg"):
+                yield f"Error: {err['msg']}"
 
         except Exception as e:
             logger.error(f"Error during generation: {e}")
diff --git a/studio/backend/routes/inference.py b/studio/backend/routes/inference.py
index ae8fc31a46..3bb84d5c6b 100644
--- a/studio/backend/routes/inference.py
+++ b/studio/backend/routes/inference.py
@@ -5,11 +5,13 @@ import sys
 import time
 import uuid
 from pathlib import Path
-from fastapi import APIRouter, HTTPException
+from fastapi import APIRouter, HTTPException, Request
 from fastapi.responses import StreamingResponse, JSONResponse
 from typing import Optional
 import json
 import logging
+import asyncio
+import threading
 
 
 
@@ -304,7 +306,7 @@ def _extract_content_parts(
 
 
 @router.post("/chat/completions")
-async def openai_chat_completions(request: ChatCompletionRequest):
+async def openai_chat_completions(payload: ChatCompletionRequest, request: Request):
     """
     OpenAI-compatible chat completions endpoint.
 
@@ -324,7 +326,7 @@ async def openai_chat_completions(request: ChatCompletionRequest):
 
     # ── Parse messages (handles multimodal content parts) ─────
     system_prompt, chat_messages, extracted_image_b64 = _extract_content_parts(
-        request.messages
+        payload.messages
     )
 
     # If no non-system messages were provided, error out
@@ -336,7 +338,7 @@ async def openai_chat_completions(request: ChatCompletionRequest):
 
     # ── Decode image (from content parts OR legacy field) ─────
     # Content-part images take priority; fall back to legacy field
-    image_b64 = extracted_image_b64 or request.image_base64
+    image_b64 = extracted_image_b64 or payload.image_base64
     image = None
 
     if image_b64:
@@ -366,31 +368,35 @@ async def openai_chat_completions(request: ChatCompletionRequest):
         messages=chat_messages,
         system_prompt=system_prompt,
         image=image,
-        temperature=request.temperature,
-        top_p=request.top_p,
-        top_k=request.top_k,
-        max_new_tokens=request.max_tokens or 512,
-        repetition_penalty=request.repetition_penalty,
+        temperature=payload.temperature,
+        top_p=payload.top_p,
+        top_k=payload.top_k,
+        max_new_tokens=payload.max_tokens or 512,
+        repetition_penalty=payload.repetition_penalty,
     )
 
     # ── Choose generation path (adapter-controlled or standard) ──
-    if request.use_adapter is not None:
+    cancel_event = threading.Event()
+
+    if payload.use_adapter is not None:
         # Compare mode: toggle adapter state atomically with generation
         def generate():
             return backend.generate_with_adapter_control(
-                use_adapter=request.use_adapter, **gen_kwargs
+                use_adapter=payload.use_adapter,
+                cancel_event=cancel_event,
+                **gen_kwargs,
             )
     else:
         # Standard path: no adapter toggling
         def generate():
-            return backend.generate_chat_response(**gen_kwargs)
+            return backend.generate_chat_response(cancel_event=cancel_event, **gen_kwargs)
 
-    model_name = backend.active_model_name or request.model
+    model_name = backend.active_model_name or payload.model
     completion_id = f"chatcmpl-{uuid.uuid4().hex[:12]}"
     created = int(time.time())
 
     # ── Streaming response ────────────────────────────────────────
-    if request.stream:
+    if payload.stream:
         async def stream_chunks():
             try:
                 # First chunk: send the role
@@ -409,6 +415,10 @@ async def openai_chat_completions(request: ChatCompletionRequest):
                 # text, so we diff to get incremental deltas.
                 prev_text = ""
                 for cumulative in generate():
+                    if await request.is_disconnected():
+                        cancel_event.set()
+                        backend.reset_generation_state()
+                        return
                     new_text = cumulative[len(prev_text):]
                     prev_text = cumulative
                     if not new_text:
@@ -437,6 +447,10 @@ async def openai_chat_completions(request: ChatCompletionRequest):
                 yield f"data: {final_chunk.model_dump_json(exclude_none=True)}\n\n"
                 yield "data: [DONE]\n\n"
 
+            except asyncio.CancelledError:
+                cancel_event.set()
+                backend.reset_generation_state()
+                raise
             except Exception as e:
                 backend.reset_generation_state()
                 logger.error(f"Error during OpenAI streaming: {e}", exc_info=True)
@@ -477,4 +491,3 @@ async def openai_chat_completions(request: ChatCompletionRequest):
             backend.reset_generation_state()
             logger.error(f"Error during OpenAI completion: {e}", exc_info=True)
             raise HTTPException(status_code=500, detail=str(e))
-
diff --git a/studio/backend/utils/paths/path_utils.py b/studio/backend/utils/paths/path_utils.py
index 7743952b6b..856e478bc2 100644
--- a/studio/backend/utils/paths/path_utils.py
+++ b/studio/backend/utils/paths/path_utils.py
@@ -41,6 +41,13 @@ def is_local_path(path: str) -> bool:
     if not path:
         return False
 
+    # If it exists on disk, treat as local (covers relative paths like "outputs/foo").
+    try:
+        if Path(normalize_path(path)).expanduser().exists():
+            return True
+    except Exception:
+        pass
+
     # Obvious HF patterns
     if path.count('/') == 1 and not path.startswith(('/', '.', '~')):
         return False  # Looks like org/model format
diff --git a/studio/frontend/src/app/router.tsx b/studio/frontend/src/app/router.tsx
index 27e0ee9fdf..de8564d035 100644
--- a/studio/frontend/src/app/router.tsx
+++ b/studio/frontend/src/app/router.tsx
@@ -2,7 +2,6 @@ import { createRouter } from "@tanstack/react-router";
 import { Route as rootRoute } from "./routes/__root";
 import { Route as chatRoute } from "./routes/chat";
 import { Route as gridTestRoute } from "./routes/grid-test";
-import { Route as homeRoute } from "./routes/home";
 import { Route as loginRoute } from "./routes/login";
 import { Route as onboardingRoute } from "./routes/onboarding";
 import { Route as exportRoute } from "./routes/export";
@@ -10,7 +9,6 @@ import { Route as signupRoute } from "./routes/signup";
 import { Route as studioRoute } from "./routes/studio";
 
 const routeTree = rootRoute.addChildren([
-  homeRoute,
   onboardingRoute,
   loginRoute,
   signupRoute,
diff --git a/studio/frontend/src/app/routes/home.tsx b/studio/frontend/src/app/routes/home.tsx
deleted file mode 100644
index bf2f3a6b58..0000000000
--- a/studio/frontend/src/app/routes/home.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ComponentExample } from "@/components/component-example";
-import { createRoute } from "@tanstack/react-router";
-import { requireAuth } from "../auth-guards";
-import { Route as rootRoute } from "./__root";
-
-export const Route = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/",
-  beforeLoad: () => requireAuth(),
-  component: HomePage,
-});
-
-function HomePage() {
-  return <ComponentExample />;
-}
diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 9c94e4eb22..c109c92ead 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -7,9 +7,7 @@ import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { AnimatedShinyText } from "@/components/ui/animated-shiny-text";
 import { Button } from "@/components/ui/button";
-import { useChatRuntimeStore } from "@/features/chat/stores/chat-runtime-store";
 import { cn } from "@/lib/utils";
 import {
   ActionBarMorePrimitive,
@@ -73,7 +71,6 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
 
         <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mt-auto flex w-full flex-col gap-4 overflow-visible bg-background pb-4 md:pb-4 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-20 before:bg-gradient-to-t before:from-background before:to-transparent">
           <ThreadScrollToBottom />
-          <WarmupIndicator />
           <AuiIf condition={({ thread }) => !thread.isEmpty}>
             {!hideComposer && <ComposerAnimated />}
           </AuiIf>
@@ -83,28 +80,6 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
   );
 };
 
-const WarmupIndicator: FC = () => {
-  const threadId = useAuiState(({ threads }) => threads.mainThreadId);
-  const isRunning = useAuiState(({ thread }) => thread.isRunning);
-  const isWarmingUp = useChatRuntimeStore((state) =>
-    Boolean(state.warmingByThreadId[threadId ?? "__default"]),
-  );
-
-  if (!isRunning || !isWarmingUp) {
-    return null;
-  }
-
-  return (
-    <div className="mx-auto -mb-2 w-full max-w-(--thread-max-width) px-2">
-      <div className="inline-flex items-center rounded-full border border-border/60 bg-background/90 px-3 py-1.5 text-xs text-muted-foreground shadow-sm">
-        <AnimatedShinyText className="text-xs">
-          Warming up model...
-        </AnimatedShinyText>
-      </div>
-    </div>
-  );
-};
-
 const ThreadScrollToBottom: FC = () => {
   return (
     <ThreadPrimitive.ScrollToBottom asChild={true}>
diff --git a/studio/frontend/src/components/component-example.tsx b/studio/frontend/src/components/component-example.tsx
deleted file mode 100644
index 3171e1abc0..0000000000
--- a/studio/frontend/src/components/component-example.tsx
+++ /dev/null
@@ -1,1318 +0,0 @@
-import * as React from "react";
-
-import { Example, ExampleWrapper } from "@/components/example";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import {
-  Avatar,
-  AvatarBadge,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-} from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/components/ui/combobox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
-import { Progress } from "@/components/ui/progress";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { Toggle } from "@/components/ui/toggle";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  AlertCircleIcon,
-  BluetoothIcon,
-  CodeIcon,
-  ComputerIcon,
-  CreditCardIcon,
-  DownloadIcon,
-  EyeIcon,
-  File01Icon,
-  FileIcon,
-  FloppyDiskIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  HelpCircleIcon,
-  InformationCircleIcon,
-  KeyboardIcon,
-  LanguageCircleIcon,
-  LayoutIcon,
-  LogoutIcon,
-  MailIcon,
-  MoonIcon,
-  MoreHorizontalCircle01Icon,
-  MoreVerticalCircle01Icon,
-  NotificationIcon,
-  PaintBoardIcon,
-  PanelRightIcon,
-  PlusSignIcon,
-  SearchIcon,
-  SettingsIcon,
-  ShieldIcon,
-  SunIcon,
-  TextBoldIcon,
-  TextItalicIcon,
-  TextUnderlineIcon,
-  UserIcon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-
-export function ComponentExample() {
-  return (
-    <ExampleWrapper>
-      <CardExample />
-      <FormExample />
-      <FormControlsExample />
-      <FeedbackExample />
-      <DataDisplayExample />
-      <NavigationExample />
-      <LayoutExample />
-      <OverlaysExample />
-      <SettingsCardExample />
-      <UserTableExample />
-      <LoadingStateExample />
-    </ExampleWrapper>
-  );
-}
-
-function CardExample() {
-  return (
-    <Example title="Card" className="items-center justify-center">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <AlertDialog>
-            <AlertDialogTrigger asChild={true}>
-              <Button>
-                <HugeiconsIcon
-                  icon={PlusSignIcon}
-                  strokeWidth={2}
-                  data-icon="inline-start"
-                />
-                Show Dialog
-              </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogMedia>
-                  <HugeiconsIcon icon={BluetoothIcon} strokeWidth={2} />
-                </AlertDialogMedia>
-                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Do you want to allow the USB accessory to connect to this
-                  device?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                <AlertDialogAction>Allow</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  );
-}
-
-const frameworks = [
-  "Next.js",
-  "SvelteKit",
-  "Nuxt.js",
-  "Remix",
-  "Astro",
-] as const;
-
-function FormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    sms: false,
-    push: true,
-  });
-  const [theme, setTheme] = React.useState("light");
-
-  return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild={true}>
-                <Button variant="ghost" size="icon">
-                  <HugeiconsIcon
-                    icon={MoreVerticalCircle01Icon}
-                    strokeWidth={2}
-                  />
-                  <span className="sr-only">More options</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={FileIcon} strokeWidth={2} />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={FolderIcon} strokeWidth={2} />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <HugeiconsIcon icon={FolderOpenIcon} strokeWidth={2} />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon icon={CodeIcon} strokeWidth={2} />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon icon={CodeIcon} strokeWidth={2} />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <HugeiconsIcon
-                                icon={MoreHorizontalCircle01Icon}
-                                strokeWidth={2}
-                              />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <HugeiconsIcon
-                                    icon={CodeIcon}
-                                    strokeWidth={2}
-                                  />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <HugeiconsIcon
-                                    icon={CodeIcon}
-                                    strokeWidth={2}
-                                  />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon icon={SearchIcon} strokeWidth={2} />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={FloppyDiskIcon} strokeWidth={2} />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={DownloadIcon} strokeWidth={2} />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <HugeiconsIcon icon={EyeIcon} strokeWidth={2} />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <HugeiconsIcon icon={LayoutIcon} strokeWidth={2} />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <HugeiconsIcon icon={PaintBoardIcon} strokeWidth={2} />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup
-                            value={theme}
-                            onValueChange={setTheme}
-                          >
-                            <DropdownMenuRadioItem value="light">
-                              <HugeiconsIcon icon={SunIcon} strokeWidth={2} />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <HugeiconsIcon icon={MoonIcon} strokeWidth={2} />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <HugeiconsIcon
-                                icon={ComputerIcon}
-                                strokeWidth={2}
-                              />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Account</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={UserIcon} strokeWidth={2} />
-                    Profile
-                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={CreditCardIcon} strokeWidth={2} />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <HugeiconsIcon icon={SettingsIcon} strokeWidth={2} />
-                      Settings
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon
-                              icon={KeyboardIcon}
-                              strokeWidth={2}
-                            />
-                            Keyboard Shortcuts
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon
-                              icon={LanguageCircleIcon}
-                              strokeWidth={2}
-                            />
-                            Language
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <HugeiconsIcon
-                                icon={NotificationIcon}
-                                strokeWidth={2}
-                              />
-                              Notifications
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuGroup>
-                                  <DropdownMenuLabel>
-                                    Notification Types
-                                  </DropdownMenuLabel>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.push}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        push: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <HugeiconsIcon
-                                      icon={NotificationIcon}
-                                      strokeWidth={2}
-                                    />
-                                    Push Notifications
-                                  </DropdownMenuCheckboxItem>
-                                  <DropdownMenuCheckboxItem
-                                    checked={notifications.email}
-                                    onCheckedChange={(checked) =>
-                                      setNotifications({
-                                        ...notifications,
-                                        email: checked === true,
-                                      })
-                                    }
-                                  >
-                                    <HugeiconsIcon
-                                      icon={MailIcon}
-                                      strokeWidth={2}
-                                    />
-                                    Email Notifications
-                                  </DropdownMenuCheckboxItem>
-                                </DropdownMenuGroup>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <HugeiconsIcon icon={ShieldIcon} strokeWidth={2} />
-                            Privacy & Security
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={HelpCircleIcon} strokeWidth={2} />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <HugeiconsIcon icon={File01Icon} strokeWidth={2} />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <HugeiconsIcon icon={LogoutIcon} strokeWidth={2} />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input
-                    id="small-form-name"
-                    placeholder="Enter your name"
-                    required={true}
-                    className=""
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="developer">Developer</SelectItem>
-                        <SelectItem value="designer">Designer</SelectItem>
-                        <SelectItem value="manager">Manager</SelectItem>
-                        <SelectItem value="other">Other</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">
-                  Framework
-                </FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required={true}
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea
-                  id="small-form-comments"
-                  placeholder="Add any additional comments"
-                />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  );
-}
-
-function FormControlsExample() {
-  const [checked, setChecked] = React.useState(true);
-  const [radioValue, setRadioValue] = React.useState("option-1");
-  const [switchOn, setSwitchOn] = React.useState(true);
-  const [sliderValue, setSliderValue] = React.useState([50]);
-  const [rangeValue, setRangeValue] = React.useState([25, 75]);
-
-  return (
-    <Example title="Form Controls">
-      <div className="grid w-full gap-6">
-        {/* Checkbox */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Checkbox</Label>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="terms"
-                checked={checked}
-                onCheckedChange={(c) => setChecked(c === true)}
-              />
-              <Label htmlFor="terms" className="font-normal">
-                Accept terms and conditions
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <Checkbox id="marketing" />
-              <Label htmlFor="marketing" className="font-normal">
-                Receive marketing emails
-              </Label>
-            </div>
-          </div>
-        </div>
-
-        {/* RadioGroup */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Radio Group</Label>
-          <RadioGroup value={radioValue} onValueChange={setRadioValue}>
-            <div className="flex items-center gap-2">
-              <RadioGroupItem value="option-1" id="option-1" />
-              <Label htmlFor="option-1" className="font-normal">
-                Default
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <RadioGroupItem value="option-2" id="option-2" />
-              <Label htmlFor="option-2" className="font-normal">
-                Comfortable
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <RadioGroupItem value="option-3" id="option-3" />
-              <Label htmlFor="option-3" className="font-normal">
-                Compact
-              </Label>
-            </div>
-          </RadioGroup>
-        </div>
-
-        {/* Switch */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Switch</Label>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <Switch
-                id="airplane"
-                checked={switchOn}
-                onCheckedChange={setSwitchOn}
-              />
-              <Label htmlFor="airplane" className="font-normal">
-                Airplane Mode
-              </Label>
-            </div>
-            <div className="flex items-center gap-2">
-              <Switch id="small-switch" size="sm" />
-              <Label htmlFor="small-switch" className="font-normal">
-                Small Switch
-              </Label>
-            </div>
-          </div>
-        </div>
-
-        {/* Slider */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Slider</Label>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label className="font-normal">Single: {sliderValue[0]}%</Label>
-              <Slider
-                value={sliderValue}
-                onValueChange={setSliderValue}
-                max={100}
-                step={1}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="font-normal">
-                Range: {rangeValue[0]} - {rangeValue[1]}
-              </Label>
-              <Slider
-                value={rangeValue}
-                onValueChange={setRangeValue}
-                max={100}
-                step={1}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Toggle Group */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Toggle Group</Label>
-          <div className="flex flex-col gap-3">
-            <ToggleGroup type="multiple" variant="outline">
-              <ToggleGroupItem value="bold" aria-label="Toggle bold">
-                <HugeiconsIcon icon={TextBoldIcon} strokeWidth={2} />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="italic" aria-label="Toggle italic">
-                <HugeiconsIcon icon={TextItalicIcon} strokeWidth={2} />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="underline" aria-label="Toggle underline">
-                <HugeiconsIcon icon={TextUnderlineIcon} strokeWidth={2} />
-              </ToggleGroupItem>
-            </ToggleGroup>
-            <Toggle variant="outline" aria-label="Toggle italic">
-              <HugeiconsIcon icon={TextItalicIcon} strokeWidth={2} />
-              Italic
-            </Toggle>
-          </div>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function FeedbackExample() {
-  return (
-    <Example title="Feedback">
-      <div className="grid w-full gap-6">
-        {/* Alert */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Alert</Label>
-          <div className="space-y-3">
-            <Alert className="!corner-squircle rounded-[50px]">
-              <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} />
-              <AlertTitle>Heads up!</AlertTitle>
-              <AlertDescription>
-                You can add components to your app using the CLI.
-              </AlertDescription>
-            </Alert>
-            <Alert variant="destructive" className="rounded-[20px]">
-              <HugeiconsIcon icon={AlertCircleIcon} strokeWidth={2} />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>
-                Your session has expired. Please log in again.
-              </AlertDescription>
-            </Alert>
-          </div>
-        </div>
-
-        {/* Progress */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Progress</Label>
-          <div className="space-y-3">
-            <div className="space-y-1">
-              <Label className="text-xs font-normal">25%</Label>
-              <Progress value={25} />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs font-normal">50%</Label>
-              <Progress value={50} />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs font-normal">75%</Label>
-              <Progress value={75} />
-            </div>
-          </div>
-        </div>
-
-        {/* Skeleton */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Skeleton</Label>
-          <div className="flex items-center space-x-4">
-            <Skeleton className="h-12 w-12 rounded-full" />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-[250px]" />
-              <Skeleton className="h-4 w-[200px]" />
-            </div>
-          </div>
-        </div>
-
-        {/* Tooltip */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Tooltip</Label>
-          <div className="flex gap-2">
-            <Tooltip>
-              <TooltipTrigger asChild={true}>
-                <Button variant="outline">Hover me</Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>This is a tooltip</p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function DataDisplayExample() {
-  return (
-    <Example title="Data Display">
-      <div className="grid w-full gap-6">
-        {/* Avatar */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Avatar</Label>
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center gap-4">
-              <Avatar>
-                <AvatarImage
-                  src="https://github.com/shadcn.png"
-                  alt="@shadcn"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarImage
-                  src="https://github.com/vercel.png"
-                  alt="@vercel"
-                />
-                <AvatarFallback>VC</AvatarFallback>
-                <AvatarBadge />
-              </Avatar>
-              <Avatar size="lg">
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-            </div>
-            <AvatarGroup>
-              <Avatar>
-                <AvatarImage
-                  src="https://github.com/shadcn.png"
-                  alt="@shadcn"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarImage
-                  src="https://github.com/vercel.png"
-                  alt="@vercel"
-                />
-                <AvatarFallback>VC</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-              <AvatarGroupCount>+3</AvatarGroupCount>
-            </AvatarGroup>
-          </div>
-        </div>
-
-        {/* Badge */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Badge</Label>
-          <div className="flex flex-wrap gap-2">
-            <Badge>Default</Badge>
-            <Badge variant="secondary">Secondary</Badge>
-            <Badge variant="outline">Outline</Badge>
-            <Badge variant="destructive">Destructive</Badge>
-          </div>
-        </div>
-
-        {/* Table */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Table</Label>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Role</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow>
-                <TableCell>John Doe</TableCell>
-                <TableCell>
-                  <Badge variant="secondary">Active</Badge>
-                </TableCell>
-                <TableCell>Admin</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Jane Smith</TableCell>
-                <TableCell>
-                  <Badge variant="outline">Pending</Badge>
-                </TableCell>
-                <TableCell>User</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>Bob Wilson</TableCell>
-                <TableCell>
-                  <Badge variant="destructive">Inactive</Badge>
-                </TableCell>
-                <TableCell>User</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function NavigationExample() {
-  return (
-    <Example title="Navigation">
-      <div className="grid w-full gap-6">
-        {/* Tabs */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Tabs</Label>
-          <div className="space-y-4">
-            <Tabs defaultValue="account">
-              <TabsList>
-                <TabsTrigger value="account">Account</TabsTrigger>
-                <TabsTrigger value="password">Password</TabsTrigger>
-                <TabsTrigger value="settings">Settings</TabsTrigger>
-              </TabsList>
-              <TabsContent value="account">
-                Account settings content.
-              </TabsContent>
-              <TabsContent value="password">
-                Password settings content.
-              </TabsContent>
-              <TabsContent value="settings">
-                General settings content.
-              </TabsContent>
-            </Tabs>
-            <Tabs defaultValue="overview">
-              <TabsList variant="line">
-                <TabsTrigger value="overview">Overview</TabsTrigger>
-                <TabsTrigger value="analytics">Analytics</TabsTrigger>
-                <TabsTrigger value="reports">Reports</TabsTrigger>
-              </TabsList>
-              <TabsContent value="overview">Overview content.</TabsContent>
-              <TabsContent value="analytics">Analytics content.</TabsContent>
-              <TabsContent value="reports">Reports content.</TabsContent>
-            </Tabs>
-          </div>
-        </div>
-
-        {/* Breadcrumb */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Breadcrumb</Label>
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#">Home</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#">Components</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        {/* Pagination */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Pagination</Label>
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious href="#" />
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationLink href="#">1</PaginationLink>
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationLink href="#" isActive={true}>
-                  2
-                </PaginationLink>
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationLink href="#">3</PaginationLink>
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationNext href="#" />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function LayoutExample() {
-  return (
-    <Example title="Layout">
-      <div className="grid w-full gap-6">
-        {/* Accordion */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Accordion</Label>
-          <Accordion type="single" collapsible={true}>
-            <AccordionItem value="item-1">
-              <AccordionTrigger>Is it accessible?</AccordionTrigger>
-              <AccordionContent>
-                Yes. It adheres to the WAI-ARIA design pattern.
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-2">
-              <AccordionTrigger>Is it styled?</AccordionTrigger>
-              <AccordionContent>
-                Yes. It comes with default styles that matches the other
-                components.
-              </AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-3">
-              <AccordionTrigger>Is it animated?</AccordionTrigger>
-              <AccordionContent>
-                Yes. It&apos;s animated by default, but you can disable it if
-                you prefer.
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function OverlaysExample() {
-  return (
-    <Example title="Overlays">
-      <div className="grid w-full gap-6">
-        {/* Dialog */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Dialog</Label>
-          <Dialog>
-            <DialogTrigger asChild={true}>
-              <Button variant="outline">Open Dialog</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Edit profile</DialogTitle>
-                <DialogDescription>
-                  Make changes to your profile here. Click save when you&apos;re
-                  done.
-                </DialogDescription>
-              </DialogHeader>
-              <div className="grid gap-4 py-4">
-                <Field>
-                  <FieldLabel htmlFor="name">Name</FieldLabel>
-                  <Input id="name" defaultValue="Pedro Duarte" />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="username">Username</FieldLabel>
-                  <Input id="username" defaultValue="@peduarte" />
-                </Field>
-              </div>
-              <DialogFooter>
-                <Button type="submit">Save changes</Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </div>
-
-        {/* Sheet */}
-        <div className="space-y-3">
-          <Label className="text-muted-foreground text-xs">Sheet</Label>
-          <Sheet>
-            <SheetTrigger asChild={true}>
-              <Button variant="outline">
-                <HugeiconsIcon
-                  icon={PanelRightIcon}
-                  strokeWidth={2}
-                  data-icon="inline-start"
-                />
-                Open Sheet
-              </Button>
-            </SheetTrigger>
-            <SheetContent>
-              <SheetHeader>
-                <SheetTitle>Edit profile</SheetTitle>
-                <SheetDescription>
-                  Make changes to your profile here. Click save when you&apos;re
-                  done.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="grid gap-4 p-6">
-                <Field>
-                  <FieldLabel htmlFor="sheet-name">Name</FieldLabel>
-                  <Input id="sheet-name" defaultValue="Pedro Duarte" />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="sheet-username">Username</FieldLabel>
-                  <Input id="sheet-username" defaultValue="@peduarte" />
-                </Field>
-              </div>
-              <SheetFooter>
-                <Button type="submit">Save changes</Button>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </div>
-    </Example>
-  );
-}
-
-function SettingsCardExample() {
-  const [emailNotifications, setEmailNotifications] = React.useState(true);
-  const [pushNotifications, setPushNotifications] = React.useState(false);
-  const [marketingEmails, setMarketingEmails] = React.useState(false);
-
-  return (
-    <Example title="Settings Card">
-      <Card className="w-full  max-w-md">
-        <CardHeader>
-          <CardTitle>Notifications</CardTitle>
-          <CardDescription>
-            Configure how you receive notifications.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="email-notif">Email notifications</Label>
-              <p className="text-muted-foreground text-xs">
-                Receive emails about your account.
-              </p>
-            </div>
-            <Switch
-              id="email-notif"
-              checked={emailNotifications}
-              onCheckedChange={setEmailNotifications}
-            />
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="push-notif">Push notifications</Label>
-              <p className="text-muted-foreground text-xs">
-                Receive push notifications on your device.
-              </p>
-            </div>
-            <Switch
-              id="push-notif"
-              checked={pushNotifications}
-              onCheckedChange={setPushNotifications}
-            />
-          </div>
-          <div className="flex items-center gap-2 pt-2">
-            <Checkbox
-              id="marketing"
-              checked={marketingEmails}
-              onCheckedChange={(c) => setMarketingEmails(c === true)}
-            />
-            <Label htmlFor="marketing" className="font-normal">
-              Receive marketing emails
-            </Label>
-          </div>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full">Save preferences</Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  );
-}
-
-function UserTableExample() {
-  const [selectedUsers, setSelectedUsers] = React.useState<string[]>(["1"]);
-
-  const toggleUser = (id: string) => {
-    setSelectedUsers((prev) =>
-      prev.includes(id) ? prev.filter((u) => u !== id) : [...prev, id],
-    );
-  };
-
-  const users = [
-    {
-      id: "1",
-      name: "Olivia Martin",
-      email: "olivia@example.com",
-      status: "active",
-      avatar: "https://github.com/shadcn.png",
-    },
-    {
-      id: "2",
-      name: "Jackson Lee",
-      email: "jackson@example.com",
-      status: "pending",
-      avatar: "https://github.com/vercel.png",
-    },
-    {
-      id: "3",
-      name: "Isabella Nguyen",
-      email: "isabella@example.com",
-      status: "inactive",
-      avatar: "",
-    },
-  ];
-
-  return (
-    <Example title="User Table">
-      <Card className="w-full">
-        <CardHeader>
-          <CardTitle>Team Members</CardTitle>
-          <CardDescription>
-            Manage your team members and their roles.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-12" />
-                <TableHead>User</TableHead>
-                <TableHead>Status</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {users.map((user) => (
-                <TableRow key={user.id}>
-                  <TableCell>
-                    <Checkbox
-                      checked={selectedUsers.includes(user.id)}
-                      onCheckedChange={() => toggleUser(user.id)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-3">
-                      <Avatar size="sm">
-                        {user.avatar && (
-                          <AvatarImage src={user.avatar} alt={user.name} />
-                        )}
-                        <AvatarFallback>
-                          {user.name
-                            .split(" ")
-                            .map((n) => n[0])
-                            .join("")}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div>
-                        <div className="font-medium">{user.name}</div>
-                        <div className="text-muted-foreground text-xs">
-                          {user.email}
-                        </div>
-                      </div>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={
-                        user.status === "active"
-                          ? "secondary"
-                          : user.status === "pending"
-                            ? "outline"
-                            : "destructive"
-                      }
-                    >
-                      {user.status}
-                    </Badge>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </Example>
-  );
-}
-
-function LoadingStateExample() {
-  return (
-    <Example title="Loading State">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <div className="flex items-center gap-4">
-            <Skeleton className="h-12 w-12 rounded-full" />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-[150px]" />
-              <Skeleton className="h-3 w-[100px]" />
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <div className="pt-2">
-            <Skeleton className="h-32 w-full rounded-xl" />
-          </div>
-        </CardContent>
-        <CardFooter className="gap-2">
-          <Skeleton className="h-9 w-24 rounded-4xl" />
-          <Skeleton className="h-9 w-24 rounded-4xl" />
-        </CardFooter>
-      </Card>
-    </Example>
-  );
-}
diff --git a/studio/frontend/src/features/chat/api/chat-adapter.ts b/studio/frontend/src/features/chat/api/chat-adapter.ts
index 2b2356e847..45e172bcd4 100644
--- a/studio/frontend/src/features/chat/api/chat-adapter.ts
+++ b/studio/frontend/src/features/chat/api/chat-adapter.ts
@@ -1,5 +1,7 @@
 import type { ChatModelAdapter } from "@assistant-ui/react";
+import { toast } from "sonner";
 import { streamChatCompletions } from "./chat-api";
+import { db } from "../db";
 import { useChatRuntimeStore } from "../stores/chat-runtime-store";
 import {
   hasClosedThinkTag,
@@ -81,13 +83,33 @@ function findLatestUserImageBase64(messages: RunMessages): string | undefined {
   return undefined;
 }
 
+async function resolveUseAdapter(
+  threadId: string | undefined,
+): Promise<boolean | undefined> {
+  if (!threadId) {
+    return undefined;
+  }
+  try {
+    const thread = await db.threads.get(threadId);
+    if (!thread?.pairId) {
+      return undefined;
+    }
+    return thread.modelType === "lora";
+  } catch {
+    return undefined;
+  }
+}
+
 export function createOpenAIStreamAdapter(): ChatModelAdapter {
   return {
     async *run({ messages, abortSignal, unstable_threadId }) {
-      const state = useChatRuntimeStore.getState();
-      const { params } = state;
+      const runtime = useChatRuntimeStore.getState();
+      const { params } = runtime;
 
       if (!params.checkpoint) {
+        toast.error("No model loaded", {
+          description: "Pick model in top bar, then retry.",
+        });
         throw new Error("Load a model first.");
       }
 
@@ -104,10 +126,48 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
         });
       }
       const imageBase64 = findLatestUserImageBase64(messages);
+      const useAdapter = await resolveUseAdapter(unstable_threadId);
 
       const threadKey = unstable_threadId || "__default";
       let waitingFirstChunk = true;
-      useChatRuntimeStore.getState().setThreadWarming(threadKey, true);
+      let firstTokenSettled = false;
+      let resolveFirstToken: (() => void) | null = null;
+      let rejectFirstToken: ((err: unknown) => void) | null = null;
+      const firstTokenPromise = new Promise<void>((resolve, reject) => {
+        resolveFirstToken = resolve;
+        rejectFirstToken = reject;
+      });
+      // Avoid unhandled rejections if toast.promise never attached.
+      void firstTokenPromise.catch(() => {});
+
+      function settleFirstTokenOk(): void {
+        if (firstTokenSettled) return;
+        firstTokenSettled = true;
+        resolveFirstToken?.();
+      }
+
+      function settleFirstTokenErr(err: unknown): void {
+        if (firstTokenSettled) return;
+        firstTokenSettled = true;
+        rejectFirstToken?.(err);
+      }
+
+      let warmupToastShown = false;
+      const warmupDelayMs = 450;
+      const warmupTimer = setTimeout(() => {
+        if (!waitingFirstChunk) return;
+        if (abortSignal.aborted) return;
+        warmupToastShown = true;
+        toast.promise(firstTokenPromise, {
+          loading: "Warming up model",
+          success: "Generating",
+          error: (err) =>
+            err instanceof Error && err.message ? err.message : "Generation failed",
+          description: "Waiting for first token.",
+          duration: 900,
+        });
+      }, warmupDelayMs);
+      runtime.setThreadRunning(threadKey, true);
       let cumulativeText = "";
       let reasoningStartAt: number | null = null;
       let reasoningDuration = 0;
@@ -124,6 +184,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
             top_k: params.topK,
             repetition_penalty: params.repetitionPenalty,
             image_base64: imageBase64,
+            ...(useAdapter === undefined ? {} : { use_adapter: useAdapter }),
           },
           abortSignal,
         );
@@ -135,7 +196,7 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
           }
           if (waitingFirstChunk) {
             waitingFirstChunk = false;
-            useChatRuntimeStore.getState().setThreadWarming(threadKey, false);
+            settleFirstTokenOk();
           }
 
           cumulativeText += delta;
@@ -155,10 +216,30 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
             };
           }
         }
-      } finally {
-        if (waitingFirstChunk) {
-          useChatRuntimeStore.getState().setThreadWarming(threadKey, false);
+        settleFirstTokenOk();
+      } catch (err) {
+        settleFirstTokenErr(err instanceof Error ? err : new Error("Generation failed"));
+        const isEarly = waitingFirstChunk;
+        if (!abortSignal.aborted && !(warmupToastShown && isEarly)) {
+          toast.error("Generation failed", {
+            description: err instanceof Error ? err.message : "Unknown error",
+          });
         }
+        throw err;
+      } finally {
+        clearTimeout(warmupTimer);
+        if (waitingFirstChunk) {
+          if (warmupToastShown && !firstTokenSettled) {
+            if (abortSignal.aborted) {
+              settleFirstTokenErr(new Error("Cancelled"));
+            } else {
+              settleFirstTokenErr(new Error("No tokens received"));
+            }
+          } else {
+            settleFirstTokenOk();
+          }
+        }
+        runtime.setThreadRunning(threadKey, false);
       }
     },
   };
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 445aa53f53..84fae04080 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -174,7 +174,8 @@ function InlineSidebar({
 function TopBarActions({
   onNewThread,
   onNewCompare,
-}: { onNewThread: () => void; onNewCompare: () => void }) {
+  showCompare,
+}: { onNewThread: () => void; onNewCompare: () => void; showCompare: boolean }) {
   const { state } = useSidebar();
   if (state !== "collapsed") {
     return null;
@@ -189,14 +190,16 @@ function TopBarActions({
         </TooltipTrigger>
         <TooltipContent side="bottom">New Chat</TooltipContent>
       </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild={true}>
-          <Button variant="ghost" size="icon-sm" onClick={onNewCompare}>
-            <HugeiconsIcon icon={ColumnInsertIcon} strokeWidth={2} />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">Compare</TooltipContent>
-      </Tooltip>
+      {showCompare ? (
+        <Tooltip>
+          <TooltipTrigger asChild={true}>
+            <Button variant="ghost" size="icon-sm" onClick={onNewCompare}>
+              <HugeiconsIcon icon={ColumnInsertIcon} strokeWidth={2} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Compare</TooltipContent>
+        </Tooltip>
+      ) : null}
     </>
   );
 }
@@ -209,10 +212,17 @@ export function ChatPage(): ReactElement {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const inferenceParams = useChatRuntimeStore((state) => state.params);
   const setInferenceParams = useChatRuntimeStore((state) => state.setParams);
+  const autoTitle = useChatRuntimeStore((state) => state.autoTitle);
+  const setAutoTitle = useChatRuntimeStore((state) => state.setAutoTitle);
   const modelsFromStore = useChatRuntimeStore((state) => state.models);
   const lorasFromStore = useChatRuntimeStore((state) => state.loras);
   const modelsError = useChatRuntimeStore((state) => state.modelsError);
   const { refresh, selectModel, ejectModel } = useChatModelRuntime();
+  const canCompare = useMemo(() => {
+    const selected = inferenceParams.checkpoint;
+    if (!selected) return false;
+    return lorasFromStore.some((lora) => lora.id === selected);
+  }, [inferenceParams.checkpoint, lorasFromStore]);
 
   const handleCheckpointChange = useCallback(
     (value: string, meta?: { isLora: boolean }) => {
@@ -275,6 +285,7 @@ export function ChatPage(): ReactElement {
           onSelect={setView}
           onNewThread={handleNewThread}
           onNewCompare={handleNewCompare}
+          showCompare={canCompare}
         />
       </InlineSidebar>
 
@@ -285,6 +296,7 @@ export function ChatPage(): ReactElement {
             <TopBarActions
               onNewThread={handleNewThread}
               onNewCompare={handleNewCompare}
+              showCompare={canCompare}
             />
             <ModelSelector
               models={models}
@@ -326,6 +338,8 @@ export function ChatPage(): ReactElement {
         open={settingsOpen}
         params={inferenceParams}
         onParamsChange={setInferenceParams}
+        autoTitle={autoTitle}
+        onAutoTitleChange={setAutoTitle}
       />
     </SidebarProvider>
     </div>
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index 484b0d2b5e..f61f3329e0 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -23,6 +23,7 @@ import {
   DEFAULT_INFERENCE_PARAMS,
   type InferenceParams,
 } from "./types/runtime";
+import { Switch } from "@/components/ui/switch";
 
 export const defaultInferenceParams = DEFAULT_INFERENCE_PARAMS;
 export type { InferenceParams } from "./types/runtime";
@@ -143,12 +144,16 @@ interface ChatSettingsPanelProps {
   open: boolean;
   params: InferenceParams;
   onParamsChange: (params: InferenceParams) => void;
+  autoTitle: boolean;
+  onAutoTitleChange: (enabled: boolean) => void;
 }
 
 export function ChatSettingsPanel({
   open,
   params,
   onParamsChange,
+  autoTitle,
+  onAutoTitleChange,
 }: ChatSettingsPanelProps) {
   const [presets, setPresets] = useState<Preset[]>(BUILTIN_PRESETS);
   const [activePreset, setActivePreset] = useState("Default");
@@ -268,7 +273,7 @@ export function ChatSettingsPanel({
           <CollapsibleSection
             icon={SlidersHorizontalIcon}
             label="Sampling"
-            defaultOpen={true}
+            defaultOpen={false}
           >
             <div className="flex flex-col gap-5">
               <ParamSlider
@@ -315,9 +320,18 @@ export function ChatSettingsPanel({
           </CollapsibleSection>
 
           <CollapsibleSection icon={Settings02Icon} label="Settings">
-            <p className="text-xs text-muted-foreground">
-              No additional settings yet.
-            </p>
+            <div className="flex items-center justify-between gap-3 py-1">
+              <div className="min-w-0">
+                <div className="text-xs font-medium">Auto title</div>
+                <div className="text-[11px] text-muted-foreground">
+                  Generate short title after reply.
+                </div>
+              </div>
+              <Switch
+                checked={autoTitle}
+                onCheckedChange={onAutoTitleChange}
+              />
+            </div>
           </CollapsibleSection>
         </div>
       </div>
diff --git a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
index 3eb9301302..e8612eb625 100644
--- a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
+++ b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
@@ -105,6 +105,9 @@ export function useChatModelRuntime() {
       const message =
         error instanceof Error ? error.message : "Failed to load models";
       setModelsError(message);
+      toast.error("Failed to refresh models", {
+        description: message,
+      });
     }
   }, [setCheckpoint, setLoras, setModels, setModelsError]);
 
@@ -122,30 +125,42 @@ export function useChatModelRuntime() {
       const isLora =
         explicitIsLora ?? model?.isLora ?? (lora ? true : false);
       const displayName = model?.name || lora?.name || modelId;
-      const loadingToastId = toast.loading(`Loading ${displayName}...`);
 
       setModelsError(null);
       try {
-        if (params.checkpoint) {
-          await unloadModel({ model_path: params.checkpoint });
+        async function performLoad(): Promise<void> {
+          if (params.checkpoint) {
+            await unloadModel({ model_path: params.checkpoint });
+          }
+
+          await loadModel({
+            model_path: modelId,
+            hf_token: null,
+            max_seq_length: DEFAULT_MODEL_MAX_SEQ_LENGTH,
+            load_in_4bit: true,
+            is_lora: isLora,
+          });
+
+          setCheckpoint(modelId);
+          await refresh();
         }
 
-        await loadModel({
-          model_path: modelId,
-          hf_token: null,
-          max_seq_length: DEFAULT_MODEL_MAX_SEQ_LENGTH,
-          load_in_4bit: true,
-          is_lora: isLora,
-        });
+        let description = "Base model selected.";
+        if (isLora) {
+          description = "Fine-tuned (LoRA) selected.";
+        }
 
-        setCheckpoint(modelId);
-        await refresh();
-        toast.success(`${displayName} loaded`, { id: loadingToastId });
+        await toast.promise(performLoad(), {
+          loading: `Loading ${displayName}`,
+          success: `${displayName} loaded`,
+          error: (err) =>
+            err instanceof Error ? err.message : "Failed to load model",
+          description,
+        });
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Failed to load model";
         setModelsError(message);
-        toast.error(message, { id: loadingToastId });
       }
     },
     [loras, models, params.checkpoint, refresh, setCheckpoint, setModelsError],
@@ -157,9 +172,19 @@ export function useChatModelRuntime() {
     }
     setModelsError(null);
     try {
-      await unloadModel({ model_path: params.checkpoint });
-      clearCheckpoint();
-      await refresh();
+      async function performUnload(): Promise<void> {
+        await unloadModel({ model_path: params.checkpoint });
+        clearCheckpoint();
+        await refresh();
+      }
+
+      await toast.promise(performUnload(), {
+        loading: "Unloading model",
+        success: "Model unloaded",
+        error: (err) =>
+          err instanceof Error ? err.message : "Failed to unload model",
+        description: "Releases VRAM and resets inference state.",
+      });
     } catch (error) {
       const message =
         error instanceof Error ? error.message : "Failed to unload model";
diff --git a/studio/frontend/src/features/chat/runtime-provider.tsx b/studio/frontend/src/features/chat/runtime-provider.tsx
index a94e25b67a..28bcf83421 100644
--- a/studio/frontend/src/features/chat/runtime-provider.tsx
+++ b/studio/frontend/src/features/chat/runtime-provider.tsx
@@ -11,7 +11,6 @@ import {
   SimpleTextAttachmentAdapter,
   type ThreadHistoryAdapter,
   type ThreadMessage,
-  type ThreadUserMessagePart,
   WebSpeechDictationAdapter,
   type unstable_RemoteThreadListAdapter,
   useAui,
@@ -23,8 +22,10 @@ import { createAssistantStream } from "assistant-stream";
 import mammoth from "mammoth";
 import { type ReactElement, type ReactNode, useEffect, useMemo } from "react";
 import { extractText, getDocumentProxy } from "unpdf";
+import { authFetch } from "@/features/auth";
 import { createOpenAIStreamAdapter } from "./api/chat-adapter";
 import { db } from "./db";
+import { useChatRuntimeStore } from "./stores/chat-runtime-store";
 import type { MessageRecord, ModelType } from "./types";
 
 const DEFAULT_SUGGESTIONS = [
@@ -149,6 +150,89 @@ class DocxAttachmentAdapter implements AttachmentAdapter {
   }
 }
 
+function clip(input: string, maxLen: number): string {
+  const text = input.replace(/\s+/g, " ").trim();
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen).trimEnd();
+}
+
+function extractTextParts(m: ThreadMessage | undefined): string {
+  if (!m) return "";
+  const content = Array.isArray(m.content) ? m.content : [];
+  return content
+    .filter((p): p is Extract<typeof p, { type: "text" }> => p.type === "text")
+    .map((p) => p.text)
+    .join("")
+    .trim();
+}
+
+async function generateTitleWithModel(payload: {
+  userText: string;
+}): Promise<string | null> {
+  const params = useChatRuntimeStore.getState().params;
+  if (!params.checkpoint) return null;
+
+  const user = clip(payload.userText, 256);
+  const parts: string[] = [user];
+
+  function normalizeTitle(raw: string): string | null {
+    let title = raw.split(/\r?\n/, 1)[0] ?? "";
+    title = title.replace(/^\s*title\s*:\s*/i, "");
+    title = title.replace(/[^\x20-\x7E]+/g, " ");
+    title = title.replace(/["'`]+/g, "");
+    title = title.replace(/[.!?:;,]+/g, " ");
+    title = title.replace(/\s+/g, " ").trim();
+
+    // Model echo fail-safe.
+    if (/\b(user|base|lora|assistant)\s*:/i.test(title)) {
+      return null;
+    }
+
+    const words = title.split(" ").filter(Boolean).slice(0, 6);
+    const joined = words.join(" ").trim();
+    if (!joined) return null;
+    return joined.length > 60 ? joined.slice(0, 60).trimEnd() : joined;
+  }
+
+  const response = await authFetch("/api/inference/chat/completions", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      model: params.checkpoint,
+      stream: false,
+      temperature: 0.2,
+      top_p: 0.9,
+      max_tokens: 24,
+      top_k: 40,
+      repetition_penalty: 1.05,
+      messages: [
+        {
+          role: "system",
+          content:
+            "Write 1 concise chat title for the user's message. Rules: 2-6 words, no quotes, no punctuation, ASCII only, do not echo input. Output title only.",
+        },
+        { role: "user", content: parts.join("\n") },
+      ],
+    }),
+  });
+
+  const body = (await response.json().catch(() => null)) as any;
+  if (!response.ok) return null;
+  const raw: string | undefined = body?.choices?.[0]?.message?.content;
+  if (!raw) return null;
+  return normalizeTitle(raw);
+}
+
+const inflightTitleByKey = new Set<string>();
+
+function fallbackTitleFromUserText(userText: string): string {
+  const firstLine = (userText || "").split(/\r?\n/, 1)[0] ?? "";
+  const cleaned = firstLine.replace(/\s+/g, " ").trim();
+  const max = 48;
+  if (!cleaned) return "New Chat";
+  return cleaned.slice(0, max) + (cleaned.length > max ? "..." : "");
+}
+
 function toThreadMessage(m: MessageRecord): ThreadMessage {
   const base = {
     id: m.id,
@@ -245,32 +329,83 @@ function createDexieAdapter(
     },
 
     async generateTitle(remoteId: string, messages: readonly ThreadMessage[]) {
+      const autoTitle = useChatRuntimeStore.getState().autoTitle;
+      const thread = await db.threads.get(remoteId);
+      const defaultTitle = "New Chat";
+
+      function streamTitle(title: string) {
+        return createAssistantStream((c) => {
+          c.appendText(title);
+          c.close();
+        });
+      }
+
+      async function persistTitle(title: string): Promise<void> {
+        await db.threads.update(remoteId, { title });
+        if (!pairId) return;
+        const paired = await db.threads
+          .where("pairId")
+          .equals(pairId)
+          .filter((t) => t.id !== remoteId)
+          .first();
+        if (paired) await db.threads.update(paired.id, { title });
+      }
+
+      if (!thread) {
+        return streamTitle(defaultTitle);
+      }
+
+      // Only generate once per thread/pair.
+      if (thread.title && thread.title !== "New Chat") {
+        return streamTitle(thread.title);
+      }
+
       const firstUser = messages.find((m) => m.role === "user");
-      const textParts =
-        firstUser?.content.filter(
-          (part): part is Extract<ThreadUserMessagePart, { type: "text" }> =>
-            part.type === "text",
-        ) ?? [];
-      const text = textParts.map((part) => part.text).join("") || "New Chat";
-      const title = text.slice(0, 60) + (text.length > 60 ? "..." : "");
+      const userText = extractTextParts(firstUser) || defaultTitle;
 
-      await db.threads.update(remoteId, { title });
+      if (!autoTitle) {
+        const title = fallbackTitleFromUserText(userText);
+        await persistTitle(title);
+        return streamTitle(title);
+      }
 
+      const key = pairId ? `pair:${pairId}` : `thread:${remoteId}`;
+      if (inflightTitleByKey.has(key)) {
+        return streamTitle(thread.title || defaultTitle);
+      }
+
+      // Compare: wait until both threads done.
       if (pairId) {
         const paired = await db.threads
           .where("pairId")
           .equals(pairId)
           .filter((t) => t.id !== remoteId)
           .first();
+
         if (paired) {
-          await db.threads.update(paired.id, { title });
+          const running = useChatRuntimeStore.getState().runningByThreadId;
+          if (running[paired.id]) {
+            setTimeout(() => {
+              void createDexieAdapter(modelType, pairId).generateTitle(remoteId, messages);
+            }, 600);
+            return streamTitle(thread.title || defaultTitle);
+          }
         }
       }
 
-      return createAssistantStream((controller) => {
-        controller.appendText(title);
-        controller.close();
-      });
+      inflightTitleByKey.add(key);
+      try {
+        const title =
+          (await generateTitleWithModel({
+            userText,
+          })) ||
+          fallbackTitleFromUserText(userText);
+
+        await persistTitle(title);
+        return streamTitle(title);
+      } finally {
+        inflightTitleByKey.delete(key);
+      }
     },
   };
 }
@@ -287,10 +422,19 @@ function ThreadHistoryProvider({
         if (!remoteId) {
           return { messages: [] };
         }
-        const msgs = await db.messages
-          .where("threadId")
-          .equals(remoteId)
-          .sortBy("createdAt");
+        const roleOrder: Record<string, number> = {
+          system: 0,
+          user: 1,
+          assistant: 2,
+        };
+        const msgs = await db.messages.where("threadId").equals(remoteId).toArray();
+        msgs.sort((a, b) => {
+          if (a.createdAt !== b.createdAt) return a.createdAt - b.createdAt;
+          const aOrder = roleOrder[a.role] ?? 99;
+          const bOrder = roleOrder[b.role] ?? 99;
+          if (aOrder !== bOrder) return aOrder - bOrder;
+          return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+        });
 
         return ExportedMessageRepository.fromArray(msgs.map(toThreadMessage));
       },
@@ -301,13 +445,18 @@ function ThreadHistoryProvider({
           ? JSON.parse(JSON.stringify(message.content))
           : [];
         const custom = message.metadata?.custom;
+        const existing = await db.messages.get(message.id);
+        const createdAt =
+          existing?.createdAt ??
+          message.createdAt?.getTime?.() ??
+          Date.now();
         await db.messages.put({
           id: message.id,
           threadId: remoteId,
           role: message.role,
           content,
           ...(custom && Object.keys(custom).length > 0 && { metadata: custom }),
-          createdAt: message.createdAt?.getTime() ?? Date.now(),
+          createdAt,
         });
       },
     }),
diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx
index 185a6ac823..f849d3f5b7 100644
--- a/studio/frontend/src/features/chat/shared-composer.tsx
+++ b/studio/frontend/src/features/chat/shared-composer.tsx
@@ -52,7 +52,9 @@ export function RegisterCompareHandle({
     }
     const currentHandles = handlesRef.current;
     currentHandles[name] = {
-      append: (content) => aui.thread().append({ role: "user", content }),
+      // fixes occasional reorder on reload.
+      append: (content) =>
+        aui.thread().append({ role: "user", content, createdAt: new Date() } as never),
       cancel: () => aui.thread().cancelRun(),
       isRunning: () => aui.thread().getState().isRunning,
     };
diff --git a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
index 74efc57134..03825b5861 100644
--- a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
+++ b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
@@ -6,16 +6,44 @@ import {
   type InferenceParams,
 } from "../types/runtime";
 
+const AUTO_TITLE_KEY = "unsloth_chat_auto_title";
+
+function canUseStorage(): boolean {
+  return typeof window !== "undefined";
+}
+
+function loadBool(key: string, fallback: boolean): boolean {
+  if (!canUseStorage()) return fallback;
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return fallback;
+    return raw === "true";
+  } catch {
+    return fallback;
+  }
+}
+
+function saveBool(key: string, value: boolean): void {
+  if (!canUseStorage()) return;
+  try {
+    localStorage.setItem(key, value ? "true" : "false");
+  } catch {
+    // ignore
+  }
+}
+
 type ChatRuntimeStore = {
   params: InferenceParams;
   models: ChatModelSummary[];
   loras: ChatLoraSummary[];
-  warmingByThreadId: Record<string, boolean>;
+  runningByThreadId: Record<string, boolean>;
+  autoTitle: boolean;
   modelsError: string | null;
   setParams: (params: InferenceParams) => void;
   setModels: (models: ChatModelSummary[]) => void;
   setLoras: (loras: ChatLoraSummary[]) => void;
-  setThreadWarming: (threadId: string, warming: boolean) => void;
+  setThreadRunning: (threadId: string, running: boolean) => void;
+  setAutoTitle: (enabled: boolean) => void;
   setModelsError: (error: string | null) => void;
   setCheckpoint: (modelId: string) => void;
   clearCheckpoint: () => void;
@@ -25,20 +53,26 @@ export const useChatRuntimeStore = create<ChatRuntimeStore>((set) => ({
   params: DEFAULT_INFERENCE_PARAMS,
   models: [],
   loras: [],
-  warmingByThreadId: {},
+  runningByThreadId: {},
+  autoTitle: loadBool(AUTO_TITLE_KEY, false),
   modelsError: null,
   setParams: (params) => set({ params }),
   setModels: (models) => set({ models }),
   setLoras: (loras) => set({ loras }),
-  setThreadWarming: (threadId, warming) =>
+  setThreadRunning: (threadId, running) =>
     set((state) => {
-      const next = { ...state.warmingByThreadId };
-      if (warming) {
+      const next = { ...state.runningByThreadId };
+      if (running) {
         next[threadId] = true;
       } else {
         delete next[threadId];
       }
-      return { warmingByThreadId: next };
+      return { runningByThreadId: next };
+    }),
+  setAutoTitle: (autoTitle) =>
+    set(() => {
+      saveBool(AUTO_TITLE_KEY, autoTitle);
+      return { autoTitle };
     }),
   setModelsError: (modelsError) => set({ modelsError }),
   setCheckpoint: (modelId) =>
diff --git a/studio/frontend/src/features/chat/thread-sidebar.tsx b/studio/frontend/src/features/chat/thread-sidebar.tsx
index e1645e77bb..369dc30769 100644
--- a/studio/frontend/src/features/chat/thread-sidebar.tsx
+++ b/studio/frontend/src/features/chat/thread-sidebar.tsx
@@ -62,11 +62,13 @@ export function ThreadSidebar({
   onSelect,
   onNewThread,
   onNewCompare,
+  showCompare,
 }: {
   view: ChatView;
   onSelect: (view: ChatView) => void;
   onNewThread: () => void;
   onNewCompare: () => void;
+  showCompare: boolean;
 }) {
   const allThreads = useLiveQuery(
     () => db.threads.orderBy("createdAt").reverse().toArray(),
@@ -112,12 +114,14 @@ export function ThreadSidebar({
                   <span>New Chat</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton onClick={onNewCompare}>
-                  <HugeiconsIcon icon={ColumnInsertIcon} />
-                  <span>Compare</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
+              {showCompare ? (
+                <SidebarMenuItem>
+                  <SidebarMenuButton onClick={onNewCompare}>
+                    <HugeiconsIcon icon={ColumnInsertIcon} />
+                    <span>Compare</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ) : null}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
diff --git a/studio/frontend/src/features/chat/types/api.ts b/studio/frontend/src/features/chat/types/api.ts
index f53bd6ca75..48ea76c4dd 100644
--- a/studio/frontend/src/features/chat/types/api.ts
+++ b/studio/frontend/src/features/chat/types/api.ts
@@ -63,6 +63,7 @@ export interface OpenAIChatCompletionsRequest {
   top_k: number;
   repetition_penalty: number;
   image_base64?: string;
+  use_adapter?: boolean | string | null;
 }
 
 export interface OpenAIChatDelta {