From 58fdc133aa7d536f2d48ac6d96653030a6b0ac9a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 3 Mar 2026 02:25:15 +0000
Subject: [PATCH 1/2] =?UTF-8?q?Add=20=E2=8C=98K=20keyboard=20shortcut=20to?=
 =?UTF-8?q?=20focus=20search=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Cmd+K / Ctrl+K keyboard shortcut that focuses the search input
- Show a ⌘K badge inside the search input when not focused and empty
- Badge hides when input is focused or has a query

Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>
---
 src/App.svelte | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/App.svelte b/src/App.svelte
index 121404e..af3b653 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -35,6 +35,17 @@
   // Copy toast
   let copiedModel = "";
 
+  // Search input ref and focus tracking
+  let searchInput: HTMLInputElement;
+  let searchFocused = false;
+
+  function handleKeydown(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      searchInput?.focus();
+    }
+  }
+
   // Quick start tab state per model
   let codeTabStates: Record<string, "sdk" | "proxy"> = {};
 
@@ -295,6 +306,8 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
   }
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <main class="container">
   <!-- Hero Section -->
   <div class="hero">
@@ -370,7 +383,10 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
         </svg>
         <input
           id="query"
+          bind:this={searchInput}
           bind:value={query}
+          on:focus={() => { searchFocused = true; }}
+          on:blur={() => { searchFocused = false; }}
           type="text"
           autocomplete="off"
           name="query"
@@ -383,6 +399,9 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
           </button>
         {/if}
+        {#if !query && !searchFocused}
+          <kbd class="search-shortcut">⌘K</kbd>
+        {/if}
       </div>
       
       <ProviderDropdown bind:selectedProvider {providers} />
@@ -925,6 +944,26 @@ curl http://0.0.0.0:4000/v1/chat/completions \
 
   .search-clear:hover { color: var(--text-color); background: var(--bg-tertiary); }
 
+  .search-shortcut {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.125rem 0.4375rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--muted-color);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    pointer-events: none;
+    line-height: 1.4;
+  }
+
   /* Filters */
   .filters-row {
     display: grid;

From 449d2c1c483a9e1b95ab27713eb0a5ca602ba7f6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 3 Mar 2026 02:58:38 +0000
Subject: [PATCH 2/2] Add 10 polish improvements for a more professional feel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/App.svelte  | 13 +++++++--
 src/Main.svelte | 76 +++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index af3b653..3b1c2f4 100644
--- a/src/App.svelte
+++ b/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; }
 
diff --git a/src/Main.svelte b/src/Main.svelte
index a5fb346..1e6cbc1 100644
--- a/src/Main.svelte
+++ b/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,19 +280,19 @@
     <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>
@@ -276,15 +300,19 @@
   {/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 {