From 136dcdc25f82edd77c76d5b3d4b68a00001efbb9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 27 Jun 2026 11:49:16 +0000
Subject: [PATCH] ui: migrate Models panel and Playground to shadcn

- ModelsPanel uses Card, Button, Badge and a dropdown menu for actions
- Playground uses shadcn Tabs for the switcher while keeping every
  interface mounted to preserve state

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UmuGqwNBJNEAMaWsdCDqUC
---
 ui-svelte/src/components/ModelsPanel.svelte | 208 +++++++++-----------
 ui-svelte/src/routes/Playground.svelte      |  97 ++-------
 2 files changed, 113 insertions(+), 192 deletions(-)

diff --git a/ui-svelte/src/components/ModelsPanel.svelte b/ui-svelte/src/components/ModelsPanel.svelte
index 7c884391..f0fb3f3c 100644
--- a/ui-svelte/src/components/ModelsPanel.svelte
+++ b/ui-svelte/src/components/ModelsPanel.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+  import { ArrowLeftRight, Eye, EyeOff, CircleArrowDown, MoreVertical } from "@lucide/svelte";
   import { models, loadModel, unloadAllModels, unloadSingleModel } from "../stores/api";
   import { isNarrow } from "../stores/theme";
   import { persistentStore } from "../stores/persistent";
   import type { Model } from "../lib/types";
+  import * as Card from "$lib/components/ui/card/index.js";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { Badge } from "$lib/components/ui/badge/index.js";
 
   let isUnloading = $state(false);
-  let menuOpen = $state(false);
   let pendingLoads = $state<Record<string, boolean>>({});
   const loadControllers = new Map<string, AbortController>();
 
@@ -72,138 +76,110 @@
   }
 
   function getModelDisplay(model: Model): string {
-    return $showIdorNameStore === "id" ? model.id : (model.name || model.id);
+    return $showIdorNameStore === "id" ? model.id : model.name || model.id;
+  }
+
+  function statusClasses(state: string): string {
+    if (state === "ready") return "border-success/30 bg-success/10 text-success";
+    if (state === "starting" || state === "stopping" || state === "queued")
+      return "border-warning/30 bg-warning/10 text-warning";
+    return "border-border bg-muted text-muted-foreground";
   }
 </script>
 
-<div class="card h-full flex flex-col">
-  <div class="shrink-0">
-    <div class="flex justify-between items-baseline">
-      <h2 class={$isNarrow ? "text-xl" : ""}>Models</h2>
+<Card.Root class="flex h-full flex-col gap-0 overflow-hidden py-0">
+  <Card.Header class="shrink-0 gap-2 border-b px-4 py-3 [.border-b]:pb-3">
+    <div class="flex items-center justify-between gap-2">
+      <Card.Title class="text-lg">Models</Card.Title>
+
       {#if $isNarrow}
-        <div class="relative">
-          <button class="btn text-base flex items-center gap-2 py-1" onclick={() => (menuOpen = !menuOpen)} aria-label="Toggle menu">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-              <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
-            </svg>
-          </button>
-          {#if menuOpen}
-            <div class="absolute right-0 mt-2 w-48 bg-surface border border-gray-200 dark:border-white/10 rounded shadow-lg z-20">
-              <button
-                class="w-full text-left px-4 py-2 hover:bg-secondary-hover flex items-center gap-2"
-                onclick={() => { toggleIdorName(); menuOpen = false; }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                  <path fill-rule="evenodd" d="M15.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H7.5a.75.75 0 0 1 0-1.5h11.69l-3.22-3.22a.75.75 0 0 1 0-1.06Zm-7.94 9a.75.75 0 0 1 0 1.06l-3.22 3.22H16.5a.75.75 0 0 1 0 1.5H4.81l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
-                </svg>
-                {$showIdorNameStore === "id" ? "Show Name" : "Show ID"}
-              </button>
-              <button
-                class="w-full text-left px-4 py-2 hover:bg-secondary-hover flex items-center gap-2"
-                onclick={() => { toggleShowUnlisted(); menuOpen = false; }}
-              >
-                {#if $showUnlistedStore}
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                    <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
-                    <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
-                    <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
-                  </svg>
-                {:else}
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                    <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
-                    <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z" clip-rule="evenodd" />
-                  </svg>
-                {/if}
-                {$showUnlistedStore ? "Hide Unlisted" : "Show Unlisted"}
-              </button>
-              <button
-                class="w-full text-left px-4 py-2 hover:bg-secondary-hover flex items-center gap-2"
-                onclick={() => { handleUnloadAllModels(); menuOpen = false; }}
-                disabled={isUnloading}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                  <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
-                </svg>
-                {isUnloading ? "Unloading..." : "Unload All"}
-              </button>
-            </div>
-          {/if}
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="outline" size="icon" aria-label="Model options">
+                <MoreVertical />
+              </Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            <DropdownMenu.Item onSelect={toggleIdorName}>
+              <ArrowLeftRight />
+              {$showIdorNameStore === "id" ? "Show Name" : "Show ID"}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onSelect={toggleShowUnlisted}>
+              {#if $showUnlistedStore}<EyeOff />{:else}<Eye />{/if}
+              {$showUnlistedStore ? "Hide Unlisted" : "Show Unlisted"}
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item onSelect={handleUnloadAllModels} disabled={isUnloading}>
+              <CircleArrowDown />
+              {isUnloading ? "Unloading..." : "Unload All"}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      {:else}
+        <div class="flex items-center gap-2">
+          <Button variant="outline" size="sm" onclick={toggleIdorName}>
+            <ArrowLeftRight />
+            {$showIdorNameStore === "id" ? "ID" : "Name"}
+          </Button>
+          <Button variant="outline" size="sm" onclick={toggleShowUnlisted}>
+            {#if $showUnlistedStore}<Eye />{:else}<EyeOff />{/if}
+            unlisted
+          </Button>
+          <Button variant="outline" size="sm" onclick={handleUnloadAllModels} disabled={isUnloading}>
+            <CircleArrowDown />
+            {isUnloading ? "Unloading..." : "Unload All"}
+          </Button>
         </div>
       {/if}
     </div>
-    {#if !$isNarrow}
-      <div class="flex justify-between">
-        <div class="flex gap-2">
-          <button class="btn text-base flex items-center gap-2" onclick={toggleIdorName} style="line-height: 1.2">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-              <path fill-rule="evenodd" d="M15.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H7.5a.75.75 0 0 1 0-1.5h11.69l-3.22-3.22a.75.75 0 0 1 0-1.06Zm-7.94 9a.75.75 0 0 1 0 1.06l-3.22 3.22H16.5a.75.75 0 0 1 0 1.5H4.81l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
-            </svg>
-            {$showIdorNameStore === "id" ? "ID" : "Name"}
-          </button>
+  </Card.Header>
 
-          <button class="btn text-base flex items-center gap-2" onclick={toggleShowUnlisted} style="line-height: 1.2">
-            {#if $showUnlistedStore}
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
-                <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z" clip-rule="evenodd" />
-              </svg>
-            {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
-                <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
-                <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
-              </svg>
-            {/if}
-            unlisted
-          </button>
-        </div>
-        <button class="btn text-base flex items-center gap-2" onclick={handleUnloadAllModels} disabled={isUnloading}>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
-          </svg>
-          {isUnloading ? "Unloading..." : "Unload All"}
-        </button>
-      </div>
-    {/if}
-  </div>
-
-  <div class="flex-1 overflow-y-auto">
-    <table class="w-full">
-      <thead class="sticky top-0 bg-card z-10">
-        <tr class="text-left border-b border-gray-200 dark:border-white/10 bg-surface">
-          <th>{$showIdorNameStore === "id" ? "Model ID" : "Name"}</th>
-          <th></th>
-          <th>State</th>
+  <Card.Content class="flex-1 overflow-y-auto p-0">
+    <table class="w-full text-sm">
+      <thead class="bg-card sticky top-0 z-10">
+        <tr class="text-muted-foreground border-b text-left">
+          <th class="px-4 py-2 font-medium">{$showIdorNameStore === "id" ? "Model ID" : "Name"}</th>
+          <th class="px-4 py-2"></th>
+          <th class="px-4 py-2 font-medium">State</th>
         </tr>
       </thead>
       <tbody>
         {#each filteredModels.regularModels as model (model.id)}
-          <tr class="border-b hover:bg-secondary-hover border-gray-200">
-            <td class={model.unlisted ? "text-txtsecondary" : ""}>
-              <a href="/upstream/{model.id}/" class="font-semibold" target="_blank">
+          <tr class="hover:bg-muted/50 border-b transition-colors">
+            <td class="px-4 py-2 {model.unlisted ? 'text-muted-foreground' : ''}">
+              <a href="/upstream/{model.id}/" class="font-semibold hover:underline" target="_blank">
                 {getModelDisplay(model)}
               </a>
               {#if model.description}
-                <p class={model.unlisted ? "text-opacity-70" : ""}><em>{model.description}</em></p>
+                <p class="text-muted-foreground"><em>{model.description}</em></p>
               {/if}
               {#if model.aliases && model.aliases.length > 0}
-                <p class="text-xs text-txtsecondary">Aliases: {model.aliases.join(", ")}</p>
+                <p class="text-muted-foreground text-xs">Aliases: {model.aliases.join(", ")}</p>
               {/if}
             </td>
-            <td class="w-12">
+            <td class="w-12 px-4 py-2">
               {#if model.state === "stopped" && pendingLoads[model.id]}
-                <button class="btn btn--sm" onclick={() => cancelLoad(model.id)}>Cancel</button>
+                <Button variant="outline" size="xs" onclick={() => cancelLoad(model.id)}>Cancel</Button>
               {:else if model.state === "stopped"}
-                <button class="btn btn--sm" onclick={() => handleLoadModel(model.id)}>Load</button>
+                <Button variant="outline" size="xs" onclick={() => handleLoadModel(model.id)}>Load</Button>
               {:else}
-                <button class="btn btn--sm" onclick={() => unloadSingleModel(model.id)} disabled={model.state !== "ready"}>Unload</button>
+                <Button
+                  variant="outline"
+                  size="xs"
+                  onclick={() => unloadSingleModel(model.id)}
+                  disabled={model.state !== "ready"}
+                >
+                  Unload
+                </Button>
               {/if}
             </td>
-            <td class="w-20">
+            <td class="w-24 px-4 py-2">
               {#if model.state === "stopped" && pendingLoads[model.id]}
-                <span class="w-16 text-center status status--queued">queued</span>
+                <Badge variant="outline" class={statusClasses("queued")}>queued</Badge>
               {:else}
-                <span class="w-16 text-center status status--{model.state}">{model.state}</span>
+                <Badge variant="outline" class={statusClasses(model.state)}>{model.state}</Badge>
               {/if}
             </td>
           </tr>
@@ -212,19 +188,19 @@
     </table>
 
     {#if Object.keys(filteredModels.peerModelsByPeerId).length > 0}
-      <h3 class="mt-8 mb-2">Peer Models</h3>
+      <h3 class="px-4 pt-6 pb-2 text-base">Peer Models</h3>
       {#each Object.entries(filteredModels.peerModelsByPeerId).sort(([a], [b]) => a.localeCompare(b)) as [peerId, peerModels] (peerId)}
         <div class="mb-4">
-          <table class="w-full">
-            <thead class="sticky top-0 bg-card z-10">
-              <tr class="text-left border-b border-gray-200 dark:border-white/10 bg-surface">
-                <th class="font-semibold">{peerId}</th>
+          <table class="w-full text-sm">
+            <thead class="bg-card sticky top-0 z-10">
+              <tr class="text-muted-foreground border-b text-left">
+                <th class="px-4 py-2 font-semibold">{peerId}</th>
               </tr>
             </thead>
             <tbody>
               {#each peerModels as model (model.id)}
-                <tr class="border-b hover:bg-secondary-hover border-gray-200">
-                  <td class="pl-8 {model.unlisted ? 'text-txtsecondary' : ''}">
+                <tr class="hover:bg-muted/50 border-b transition-colors">
+                  <td class="px-4 py-2 pl-8 {model.unlisted ? 'text-muted-foreground' : ''}">
                     <span>{model.id}</span>
                   </td>
                 </tr>
@@ -234,5 +210,5 @@
         </div>
       {/each}
     {/if}
-  </div>
-</div>
+  </Card.Content>
+</Card.Root>
diff --git a/ui-svelte/src/routes/Playground.svelte b/ui-svelte/src/routes/Playground.svelte
index c3375311..b4ba7b47 100644
--- a/ui-svelte/src/routes/Playground.svelte
+++ b/ui-svelte/src/routes/Playground.svelte
@@ -6,11 +6,12 @@
   import SpeechInterface from "../components/playground/SpeechInterface.svelte";
   import RerankInterface from "../components/playground/RerankInterface.svelte";
   import ConcurrencyInterface from "../components/playground/ConcurrencyInterface.svelte";
+  import * as Card from "$lib/components/ui/card/index.js";
+  import * as Tabs from "$lib/components/ui/tabs/index.js";
 
   type Tab = "chat" | "images" | "speech" | "audio" | "rerank" | "concurrency";
 
   const selectedTabStore = persistentStore<Tab>("playground-selected-tab", "chat");
-  let mobileMenuOpen = $state(false);
 
   const tabs: { id: Tab; label: string }[] = [
     { id: "chat", label: "Chat" },
@@ -20,95 +21,39 @@
     { id: "rerank", label: "Rerank" },
     { id: "concurrency", label: "Load Test" },
   ];
-
-  function selectTab(tab: Tab) {
-    selectedTabStore.set(tab);
-    mobileMenuOpen = false;
-  }
-
-  function getTabLabel(tabId: Tab): string {
-    return tabs.find((t) => t.id === tabId)?.label || "";
-  }
 </script>
 
-<div class="card h-full flex flex-col">
-  <!-- Tab navigation -->
-  <div class="shrink-0 mb-4">
-    <!-- Mobile: Dropdown menu (hidden on md and up) -->
-    <div class="block md:hidden relative">
-      <button
-        class="w-full px-4 py-2 rounded font-medium transition-colors flex items-center justify-between bg-surface hover:bg-secondary-hover border border-gray-200 dark:border-white/10"
-        onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
-      >
-        <span>{getTabLabel($selectedTabStore)}</span>
-        <svg
-          class="w-5 h-5 transition-transform {mobileMenuOpen ? 'rotate-180' : ''}"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-        </svg>
-      </button>
-      {#if mobileMenuOpen}
-        <div
-          class="absolute top-full left-0 right-0 mt-1 bg-surface border border-gray-200 dark:border-white/10 rounded shadow-lg z-10"
-        >
-          {#each tabs as tab (tab.id)}
-            <button
-              class="w-full px-4 py-2 text-left hover:bg-secondary-hover transition-colors first:rounded-t last:rounded-b {$selectedTabStore ===
-              tab.id
-                ? 'bg-primary/10 font-medium'
-                : ''}"
-              onclick={() => selectTab(tab.id)}
-            >
-              {tab.label}
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-
-    <!-- Desktop: Tab buttons (shown on md and up) -->
-    <div class="hidden md:flex flex-wrap gap-2">
-      {#each tabs as tab (tab.id)}
-        <button
-          class="px-4 py-2 rounded font-medium transition-colors {$selectedTabStore === tab.id
-            ? 'bg-primary text-btn-primary-text'
-            : 'bg-surface hover:bg-secondary-hover border border-gray-200 dark:border-white/10'}"
-          onclick={() => selectTab(tab.id)}
-        >
-          {tab.label}
-        </button>
-      {/each}
-    </div>
+<Card.Root class="flex h-full flex-col gap-0 overflow-hidden p-4">
+  <!-- Tab navigation: triggers update the store; content stays mounted to preserve state -->
+  <div class="mb-4 shrink-0">
+    <Tabs.Root bind:value={() => $selectedTabStore, (v) => selectedTabStore.set(v as Tab)}>
+      <Tabs.List class="h-auto flex-wrap">
+        {#each tabs as tab (tab.id)}
+          <Tabs.Trigger value={tab.id}>{tab.label}</Tabs.Trigger>
+        {/each}
+      </Tabs.List>
+    </Tabs.Root>
   </div>
 
-  <!-- Tab content -->
-  <div class="flex-1 overflow-hidden relative">
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "chat"}>
+  <!-- Tab content (all interfaces stay mounted) -->
+  <div class="relative flex-1 overflow-hidden">
+    <div class="h-full" class:hidden={$selectedTabStore !== "chat"}>
       <ChatInterface />
     </div>
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "images"}>
+    <div class="h-full" class:hidden={$selectedTabStore !== "images"}>
       <ImageInterface />
     </div>
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "speech"}>
+    <div class="h-full" class:hidden={$selectedTabStore !== "speech"}>
       <SpeechInterface />
     </div>
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "audio"}>
+    <div class="h-full" class:hidden={$selectedTabStore !== "audio"}>
       <AudioInterface />
     </div>
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "rerank"}>
+    <div class="h-full" class:hidden={$selectedTabStore !== "rerank"}>
       <RerankInterface />
     </div>
-    <div class="h-full" class:tab-hidden={$selectedTabStore !== "concurrency"}>
+    <div class="h-full" class:hidden={$selectedTabStore !== "concurrency"}>
       <ConcurrencyInterface />
     </div>
   </div>
-</div>
-
-<style>
-  .tab-hidden {
-    display: none;
-  }
-</style>
+</Card.Root>