Add 10 polish improvements for a more professional feel

1. Scroll to top on tab change — no more stranded mid-scroll
2. Sticky table header — stays visible when scrolling 2600+ models
3. Custom ::selection color — brand-consistent indigo highlight
4. Escape key blurs search — complements ⌘K shortcut
5. Logo is a clickable home link — returns to Models tab
6. Indigo left-border accent on row hover — visual affordance
7. Global focus-visible ring — keyboard accessibility polish
8. Fade transition on tab content — smooth tab switching
9. Title tooltip on truncated model names — full name on hover
10. Animated stat card numbers — count-up from 0 on load

Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>

Author: cursoragent

src/App.svelte

@@ -44,6 +44,9 @@
       e.preventDefault();
       searchInput?.focus();
     }
+    if (e.key === "Escape" && document.activeElement === searchInput) {
+      searchInput?.blur();
+    }
   }
 
   // Quick start tab state per model
@@ -521,7 +524,7 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
                     {/if}
                   </div>
                   <div class="model-name-group">
-                    <span class="model-title">{getDisplayModelName(name, litellm_provider)}</span>
+                    <span class="model-title" title={getDisplayModelName(name, litellm_provider)}>{getDisplayModelName(name, litellm_provider)}</span>
                     {#if mode}
                       <span class="mode-badge">{getModeLabel(mode)}</span>
                     {/if}
@@ -1092,6 +1095,9 @@ curl http://0.0.0.0:4000/v1/chat/completions \
     background-color: var(--bg-secondary);
     white-space: nowrap;
     user-select: none;
+    position: sticky;
+    top: 63px;
+    z-index: 10;
   }
 
   .th-model { padding-left: 1rem; }
@@ -1121,7 +1127,10 @@ curl http://0.0.0.0:4000/v1/chat/completions \
     cursor: pointer;
   }
 
-  tbody tr.model-row:hover { background-color: var(--hover-bg); }
+  tbody tr.model-row:hover {
+    background-color: var(--hover-bg);
+    box-shadow: inset 3px 0 0 var(--litellm-primary);
+  }
   tbody tr.model-row.expanded { background-color: var(--bg-secondary); }
   tbody tr.model-row:last-child { border-bottom: none; }
 

src/Main.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
   import App from "./App.svelte";
   import Providers from "./Providers.svelte";
   import Cookbook from "./Cookbook.svelte";
@@ -44,6 +45,7 @@
     activeTab = tab;
     closeMobileMenu();
     trackTabChange(tab);
+    window.scrollTo({ top: 0, behavior: "smooth" });
     
     if (updateUrl) {
       const path = getPathFromTab(tab);
@@ -64,6 +66,23 @@
   let modelCount = 0;
   let statsLoading = true;
 
+  let displayModelCount = 0;
+  let displayProviderCount = 0;
+  let displayEndpointCount = 0;
+  let displayComboCount = 0;
+
+  function animateValue(start: number, end: number, duration: number, setter: (v: number) => void) {
+    const startTime = performance.now();
+    function step(now: number) {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setter(Math.round(start + (end - start) * eased));
+      if (progress < 1) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
+
   onMount(async () => {
     initAnalytics();
     trackPageView('Home');
@@ -109,6 +128,11 @@
       modelCount = Object.keys(modelsData).length;
       
       statsLoading = false;
+
+      animateValue(0, modelCount, 800, (v) => displayModelCount = v);
+      animateValue(0, providerCount, 600, (v) => displayProviderCount = v);
+      animateValue(0, endpointCount, 600, (v) => displayEndpointCount = v);
+      animateValue(0, providerEndpointCount, 700, (v) => displayComboCount = v);
     } catch (error) {
       console.error("Failed to load statistics:", error);
       statsLoading = false;
@@ -127,10 +151,10 @@
   <!-- Header -->
   <header class="header">
     <div class="header-content">
-      <div class="logo-section-header">
+      <a href="/" class="logo-section-header" on:click|preventDefault={() => selectTab("models")}>
         <span class="logo-emoji">🚅</span>
         <span class="logo-text-header">LiteLLM</span>
-      </div>
+      </a>
 
       <!-- Desktop Navigation -->
       <div class="desktop-nav">
@@ -256,35 +280,39 @@
     <div class="stats-section">
       <div class="stats-container">
         <button class="stat-card" on:click={() => selectTab("models")}>
-          <div class="stat-value">{modelCount.toLocaleString()}</div>
+          <div class="stat-value">{displayModelCount.toLocaleString()}</div>
           <div class="stat-label">Models Supported</div>
         </button>
         <button class="stat-card" on:click={() => selectTab("providers")}>
-          <div class="stat-value">{providerCount}</div>
+          <div class="stat-value">{displayProviderCount.toLocaleString()}</div>
           <div class="stat-label">Providers</div>
         </button>
         <button class="stat-card" on:click={() => selectTab("providers")}>
-          <div class="stat-value">{endpointCount}</div>
+          <div class="stat-value">{displayEndpointCount.toLocaleString()}</div>
           <div class="stat-label">Unique Endpoints</div>
         </button>
         <button class="stat-card" on:click={() => selectTab("providers")}>
-          <div class="stat-value">{providerEndpointCount}</div>
+          <div class="stat-value">{displayComboCount.toLocaleString()}</div>
           <div class="stat-label">Provider + Endpoint Combos</div>
         </button>
       </div>
     </div>
   {/if}
 
   <!-- Content -->
-  {#if activeTab === "models"}
-    <App />
-  {:else if activeTab === "providers"}
-    <Providers />
-  {:else if activeTab === "cookbook"}
-    <Cookbook />
-  {:else if activeTab === "guardrails"}
-    <Guardrails />
-  {/if}
+  {#key activeTab}
+    <div in:fade={{ duration: 150, delay: 50 }}>
+      {#if activeTab === "models"}
+        <App />
+      {:else if activeTab === "providers"}
+        <Providers />
+      {:else if activeTab === "cookbook"}
+        <Cookbook />
+      {:else if activeTab === "guardrails"}
+        <Guardrails />
+      {/if}
+    </div>
+  {/key}
 
   <!-- Request Form Modal -->
   <RequestForm bind:this={requestForm} />
@@ -301,6 +329,22 @@
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
+  :global(::selection) {
+    background: rgba(99, 102, 241, 0.2);
+    color: inherit;
+  }
+
+  :global(*:focus-visible) {
+    outline: 2px solid var(--litellm-primary);
+    outline-offset: 2px;
+  }
+
+  :global(input:focus-visible),
+  :global(textarea:focus-visible),
+  :global(select:focus-visible) {
+    outline: none;
+  }
+
   :global(*::-webkit-scrollbar) {
     width: 8px;
     height: 8px;
@@ -420,6 +464,8 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
   }
 
   .logo-emoji {