feat: surface saved endpoint models and revamp the admin UI

Model ids saved per OpenAI-compatible endpoint on the admin page are now
included in the admin model options and provider status, so numbered
routes (openai_compatible_1/<model>) stay listed even when the endpoint's
live /models route is unreachable.

- settings: OpenAI-compatible instances persist an optional models list
- status: endpoint cards report saved model ids alongside live ones
- admin API: model options merge configured, discovered, and stored ids
- tests: stored endpoint models appear in options/status; config round-trip

Admin UI overhaul:
- dark mode toggle (system-aware, persisted) with a light/dark token pass
- responsive sidebar: off-canvas drawer with backdrop/Escape on mobile
- sticky blurred header (view icon, title, description, version) and a
sticky action bar with status icons and a dirty-count badge
- config sections become cards with per-section icons and a model refresh
action; fields gain source badges and description hints
- provider/connected-account cards gain status dots and per-kind icons
- loading skeletons replace the bare loading text
- new primitives: tooltip, separator, skeleton; tw-animate-css animations
- rebuild admin static assets with content-hashed bundles
- version 4.23.2 -> 4.25.0

AGENTS.md

@@ -96,6 +96,16 @@ When unsure between PATCH and MINOR, prefer PATCH for fixes and MINOR for new ca
 
 Example commit on `main` after a packaging fix: bump `1.2.38` → `1.2.39`, run `uv lock`, commit together with the fix.
 
+## COMMIT & PUSH POLICY
+
+- Never commit or push automatically. Only commit or push when the user
+  explicitly asks you to ("commit", "push", "commit and push", or similar).
+- When work is finished and the user has not asked to commit or push, stop
+  and ask. Leave the working tree and staged state exactly as they are.
+- Do not stage, amend, or rewrite commits as a side effect of other work.
+- When the user does ask, review the diff first (`git status`, `git diff`)
+  and report what will be committed before committing.
+
 ## SUMMARY STANDARDS
 
 - Summaries must be technical and granular.

CLAUDE.md

@@ -96,6 +96,16 @@ When unsure between PATCH and MINOR, prefer PATCH for fixes and MINOR for new ca
 
 Example commit on `main` after a packaging fix: bump `1.2.38` → `1.2.39`, run `uv lock`, commit together with the fix.
 
+## COMMIT & PUSH POLICY
+
+- Never commit or push automatically. Only commit or push when the user
+  explicitly asks you to ("commit", "push", "commit and push", or similar).
+- When work is finished and the user has not asked to commit or push, stop
+  and ask. Leave the working tree and staged state exactly as they are.
+- Do not stage, amend, or rewrite commits as a side effect of other work.
+- When the user does ask, review the diff first (`git status`, `git diff`)
+  and report what will be committed before committing.
+
 ## SUMMARY STANDARDS
 
 - Summaries must be technical and granular.

README.md

@@ -250,10 +250,11 @@ fcc-codex exec "hello"
   on, where the number is the endpoint's position in the list. Give each
   endpoint its own base URL, optional comma-separated key pool, and optional
   proxy, then use the numbered routes in `MODEL` so it is easy to see which
-  endpoint a request uses. **Fetch models** pulls the endpoint's model ids
-  from its `/models` route, lists them on the card, and makes them selectable
-  in the Model Config dropdowns; "Use as default" sets the numbered route as
-  the default model. Endpoint 1 also answers the legacy
+  endpoint a request uses. Add as many model ids as you want per endpoint
+  (comma-separated entries), or **Fetch models** to pull the endpoint's model
+  ids from its `/models` route; both list on the card and are selectable in
+  the Model Config dropdowns. "Use as default" sets the numbered route as the
+  default model. Endpoint 1 also answers the legacy
   `openai_compatible/<model-id>` route; the single-endpoint env vars remain
   the fallback when no endpoints are configured.
 - Mistral Codestral uses a separate key from Mistral La Plateforme.

frontend/package-lock.json

@@ -11,13 +11,16 @@
         "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-select": "^2.1.2",
+        "@radix-ui/react-separator": "^1.1.15",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.2.16",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.469.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "tailwind-merge": "^2.6.0"
+        "tailwind-merge": "^2.6.0",
+        "tw-animate-css": "^1.4.0"
       },
       "devDependencies": {
         "@tailwindcss/vite": "^4.0.0",
@@ -1251,6 +1254,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.15.tgz",
+      "integrity": "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
@@ -1269,6 +1295,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.16.tgz",
+      "integrity": "sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
@@ -3137,6 +3198,15 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",

frontend/package.json

@@ -13,13 +13,16 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.0",

frontend/src/App.tsx

@@ -1,4 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  type LucideIcon,
+  Menu,
+  MessageSquare,
+  Plug,
+  Server,
+  SlidersHorizontal,
+  X,
+} from "lucide-react"
 
 import {
   applyConfig,
@@ -24,6 +33,10 @@ import { ConfigView } from "./components/ConfigView"
 import { OpenAICompatibleView } from "./components/OpenAICompatibleView"
 import { ProvidersView } from "./components/ProvidersView"
 import { Sidebar } from "./components/Sidebar"
+import { ThemeToggle } from "./components/ThemeToggle"
+import { Badge } from "./components/ui/badge"
+import { Button } from "./components/ui/button"
+import { Skeleton } from "./components/ui/skeleton"
 
 export const MASKED_SECRET = "********"
 
@@ -31,8 +44,10 @@ interface ViewGroup {
   id: string
   label: string
   title: string
+  description: string
   path: string
   sections: string[]
+  icon: LucideIcon
 }
 
 export const VIEW_GROUPS: ViewGroup[] = [
@@ -40,29 +55,37 @@ export const VIEW_GROUPS: ViewGroup[] = [
     id: "providers",
     label: "Providers",
     title: "Providers",
+    description: "Check connectivity and manage provider credentials",
     path: "providers",
     sections: ["providers", "runtime"],
+    icon: Server,
   },
   {
     id: "model_config",
     label: "Model Config",
     title: "Model Config",
+    description: "Choose models, reasoning behavior, and web tooling",
     path: "model-config",
     sections: ["models", "reasoning", "web_tools"],
+    icon: SlidersHorizontal,
   },
   {
     id: "openai_compatible",
     label: "OpenAI-Compatible",
     title: "OpenAI-Compatible Endpoints",
+    description: "Add any OpenAI-compatible server as a numbered provider",
     path: "openai-compatible",
     sections: [],
+    icon: Plug,
   },
   {
     id: "messaging",
     label: "Messaging",
     title: "Messaging",
+    description: "Chat platforms and voice integration",
     path: "messaging",
     sections: ["messaging", "voice"],
+    icon: MessageSquare,
   },
 ]
 
@@ -138,6 +161,7 @@ export default function App() {
   const [message, setMessage] = useState<{ text: string; kind?: string } | null>(null)
   const [activeView, setActiveView] = useState<string>(() => syncActiveView())
   const [applying, setApplying] = useState(false)
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
   const authTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({})
 
   const setMessageOk = useCallback((text: string) => setMessage({ text }), [])
@@ -286,8 +310,13 @@ export default function App() {
     void load()
     const onHashChange = () => setActiveView(viewFromPath(pathFromHash()))
     window.addEventListener("hashchange", onHashChange)
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setMobileNavOpen(false)
+    }
+    window.addEventListener("keydown", onKeyDown)
     return () => {
       window.removeEventListener("hashchange", onHashChange)
+      window.removeEventListener("keydown", onKeyDown)
       for (const timer of Object.values(authTimers.current)) clearTimeout(timer)
       authTimers.current = {}
     }
@@ -412,6 +441,19 @@ export default function App() {
     [setMessageError],
   )
 
+  const handleAddEndpointModels = useCallback(
+    (providerId: string, models: string[]) => {
+      if (models.length === 0) return
+      setModelOptions((prev) => [
+        ...new Set([
+          ...prev,
+          ...models.map((model) => `${providerId}/${model}`),
+        ]),
+      ])
+    },
+    [],
+  )
+
   const handleRefreshModels = useCallback(
     async (_providerId: string, done?: () => void) => {
       try {
@@ -501,32 +543,109 @@ export default function App() {
 
   if (!config) {
     return (
-      <div className="flex min-h-screen items-center justify-center">
-        <p className="text-muted-foreground">Loading admin config...</p>
+      <div className="flex min-h-screen">
+        <aside className="hidden w-64 shrink-0 flex-col gap-3 border-r p-4 md:flex">
+          <Skeleton className="h-10 w-full" />
+          <div className="mt-3 space-y-2">
+            <Skeleton className="h-9 w-5/6" />
+            <Skeleton className="h-9 w-4/6" />
+            <Skeleton className="h-9 w-3/6" />
+          </div>
+        </aside>
+        <main className="flex min-w-0 flex-1 flex-col gap-6 p-4 md:p-6">
+          <div className="space-y-2">
+            <Skeleton className="h-7 w-56" />
+            <Skeleton className="h-4 w-72" />
+          </div>
+          <Skeleton className="h-36 w-full" />
+          <Skeleton className="h-36 w-full" />
+          <Skeleton className="h-36 w-full" />
+        </main>
       </div>
     )
   }
 
+  const activeGroup =
+    VIEW_GROUPS.find((view) => view.id === activeView) ?? VIEW_GROUPS[0]
+  const ActiveIcon = activeGroup.icon
+
   return (
     <div className="flex min-h-screen">
       <Sidebar
         config={config}
         activeView={activeView}
         onSelectView={handleSelectView}
+        className="hidden md:flex"
       />
+      {mobileNavOpen ? (
+        <div
+          className="fixed inset-0 z-50 md:hidden"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Admin navigation"
+        >
+          <button
+            type="button"
+            aria-label="Close navigation"
+            className="absolute inset-0 bg-black/60"
+            onClick={() => setMobileNavOpen(false)}
+          />
+          <Sidebar
+            config={config}
+            activeView={activeView}
+            onSelectView={handleSelectView}
+            onNavigate={() => setMobileNavOpen(false)}
+            className="animate-in slide-in-from-left absolute inset-y-0 left-0 shadow-2xl"
+          />
+          <button
+            type="button"
+            aria-label="Close navigation"
+            className="absolute top-4 right-4 flex size-8 items-center justify-center rounded-md text-white/80 hover:bg-white/10 hover:text-white"
+            onClick={() => setMobileNavOpen(false)}
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+      ) : null}
       <main className="flex min-w-0 flex-1 flex-col">
-        <header className="flex items-center justify-between border-b px-6 py-4">
-          <h2 className="text-2xl font-semibold">
-            {VIEW_GROUPS.find((view) => view.id === activeView)?.title ?? "Providers"}
-          </h2>
-          {config.version ? (
-            <span className="rounded-full border border-input px-2.5 py-0.5 text-xs text-muted-foreground">
-              v{config.version}
-            </span>
-          ) : null}
+        <header className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b bg-background/80 px-4 py-3 backdrop-blur-md md:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              aria-label="Open navigation"
+              onClick={() => setMobileNavOpen(true)}
+            >
+              <Menu />
+            </Button>
+            <div className="hidden size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary md:flex">
+              <ActiveIcon className="size-4.5" />
+            </div>
+            <div className="min-w-0">
+              <h2 className="truncate text-lg font-semibold leading-tight">
+                {activeGroup.title}
+              </h2>
+              <p className="truncate text-xs text-muted-foreground">
+                {activeGroup.description}
+              </p>
+            </div>
+          </div>
+          <div className="flex shrink-0 items-center gap-1.5">
+            {config.version ? (
+              <Badge
+                variant="outline"
+                className="hidden font-mono text-muted-foreground sm:inline-flex"
+              >
+                v{config.version}
+              </Badge>
+            ) : null}
+            <ThemeToggle />
+          </div>
         </header>
 
-        <div className="flex-1 space-y-8 p-6">
+        <div className="flex-1 space-y-8 p-4 md:p-6">
           {activeView === "providers" && (
             <ProvidersView
               config={config}
@@ -550,6 +669,7 @@ export default function App() {
               localStatus={localStatus}
               onTestProvider={handleTestProvider}
               onFetchModels={handleFetchEndpointModels}
+              onAddModels={handleAddEndpointModels}
               onMessage={showMessage}
             />
           )}

frontend/src/components/ActionBar.tsx

@@ -1,4 +1,7 @@
+import { CheckCircle2, CircleAlert, Loader2, Play, ShieldCheck, TriangleAlert, XCircle } from "lucide-react"
+
 import { cn } from "@/lib/utils"
+import { Badge } from "./ui/badge"
 import { Button } from "./ui/button"
 
 interface ActionBarProps {
@@ -10,6 +13,19 @@ interface ActionBarProps {
   onApply: () => void
 }
 
+function messageIcon(kind?: string) {
+  switch (kind) {
+    case "error":
+      return <XCircle className="size-4 shrink-0 text-destructive" />
+    case "warn":
+      return <TriangleAlert className="size-4 shrink-0 text-amber-600" />
+    case "ok":
+      return <CheckCircle2 className="size-4 shrink-0 text-emerald-600" />
+    default:
+      return null
+  }
+}
+
 export function ActionBar({
   configPath,
   dirtyCount,
@@ -19,31 +35,51 @@ export function ActionBar({
   onApply,
 }: ActionBarProps) {
   return (
-    <footer className="flex items-center gap-4 border-t px-6 py-3">
-      <div className="flex min-w-0 items-center gap-4">
-        <strong className="shrink-0 text-sm">
-          {dirtyCount === 0 ? "No changes" : `${dirtyCount} unsaved change${dirtyCount === 1 ? "" : "s"}`}
-        </strong>
-        <span className="truncate text-xs text-muted-foreground">{configPath}</span>
+    <footer className="sticky bottom-0 z-30 flex flex-wrap items-center gap-x-4 gap-y-2 border-t bg-background/90 px-4 py-3 backdrop-blur-md md:px-6">
+      <div className="flex min-w-0 items-center gap-3">
+        <Badge
+          variant={dirtyCount === 0 ? "outline" : "warn"}
+          className={cn(
+            "shrink-0 gap-1.5",
+            dirtyCount === 0 && "text-muted-foreground",
+          )}
+        >
+          {dirtyCount === 0 ? (
+            <CheckCircle2 className="size-3.5 text-emerald-500" />
+          ) : (
+            <CircleAlert className="size-3.5" />
+          )}
+          {dirtyCount === 0
+            ? "No changes"
+            : `${dirtyCount} unsaved change${dirtyCount === 1 ? "" : "s"}`}
+        </Badge>
+        <span className="hidden min-w-0 truncate font-mono text-xs text-muted-foreground lg:inline">
+          {configPath}
+        </span>
       </div>
       <div
         className={cn(
-          "min-w-0 flex-1 truncate text-sm",
+          "flex min-w-0 flex-1 items-center gap-2 text-sm",
           message?.kind === "error" && "text-destructive",
           message?.kind === "warn" && "text-amber-600",
           message?.kind === "ok" && "text-emerald-600",
         )}
+        role={message?.kind === "error" ? "alert" : undefined}
+        aria-live="polite"
       >
-        {message?.text ?? ""}
+        {messageIcon(message?.kind)}
+        <span className="truncate">{message?.text ?? ""}</span>
       </div>
       <div className="flex shrink-0 gap-2">
-        <Button variant="secondary" onClick={onValidate}>
+        <Button variant="secondary" onClick={onValidate} disabled={applying}>
+          <ShieldCheck />
           Validate
         </Button>
         <Button onClick={onApply} disabled={dirtyCount === 0 || applying}>
+          {applying ? <Loader2 className="animate-spin" /> : <Play />}
           {applying ? "Applying..." : "Apply"}
         </Button>
       </div>
     </footer>
   )
-}
+}

frontend/src/components/ConfigView.tsx

@@ -1,9 +1,31 @@
 import { useMemo, useState } from "react"
+import {
+  Brain,
+  Gauge,
+  Globe,
+  Lightbulb,
+  MessageSquare,
+  Mic,
+  RefreshCw,
+  Server,
+  type LucideIcon,
+} from "lucide-react"
 
 import { VIEW_GROUPS } from "@/App"
 import type { AdminConfig, AdminSection } from "@/lib/types"
 import { FieldRow } from "./FieldControl"
 import { Button } from "./ui/button"
+import { Card, CardContent } from "./ui/card"
+
+const SECTION_ICONS: Record<string, LucideIcon> = {
+  providers: Server,
+  runtime: Gauge,
+  models: Brain,
+  reasoning: Lightbulb,
+  web_tools: Globe,
+  messaging: MessageSquare,
+  voice: Mic,
+}
 
 interface ConfigViewProps {
   config: AdminConfig
@@ -75,6 +97,7 @@ function SettingsSection({
   const [advancedOpen, setAdvancedOpen] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
   const isModelSection = section.id === "models"
+  const SectionIcon = SECTION_ICONS[section.id] ?? Server
 
   const fieldRows = (showAdvanced: boolean) =>
     fields
@@ -91,41 +114,50 @@ function SettingsSection({
       ))
 
   return (
-    <section className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">{section.label}</h3>
-          {section.description ? (
-            <p className="text-sm text-muted-foreground">{section.description}</p>
+    <Card className="gap-0 overflow-hidden">
+      <CardContent className="flex flex-col gap-4 px-5 py-4 md:px-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <SectionIcon className="size-4.5" />
+            </span>
+            <div className="min-w-0">
+              <h3 className="text-base font-semibold leading-tight">
+                {section.label}
+              </h3>
+              {section.description ? (
+                <p className="text-sm text-muted-foreground">{section.description}</p>
+              ) : null}
+            </div>
+          </div>
+          {isModelSection ? (
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={refreshing}
+              onClick={() => {
+                setRefreshing(true)
+                onRefreshModels("__refresh_models__", () => setRefreshing(false))
+              }}
+            >
+              <RefreshCw className={refreshing ? "animate-spin" : undefined} />
+              {refreshing ? "Refreshing" : "Refresh models"}
+            </Button>
           ) : null}
         </div>
-        {isModelSection ? (
+        <div className="grid gap-3">{fieldRows(advancedOpen)}</div>
+        {hasAdvanced ? (
           <Button
-            variant="secondary"
+            type="button"
+            variant="ghost"
             size="sm"
-            disabled={refreshing}
-            onClick={() => {
-              setRefreshing(true)
-              onRefreshModels("__refresh_models__", () => setRefreshing(false))
-            }}
+            className="self-start text-muted-foreground"
+            onClick={() => setAdvancedOpen((prev) => !prev)}
           >
-            {refreshing ? "Refreshing" : "Refresh models"}
+            {advancedOpen ? "Hide advanced" : "Show advanced"}
           </Button>
         ) : null}
-      </div>
-      <div className="grid gap-4">
-        {fieldRows(advancedOpen)}
-      </div>
-      {hasAdvanced ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={() => setAdvancedOpen((prev) => !prev)}
-        >
-          {advancedOpen ? "Hide advanced" : "Show advanced"}
-        </Button>
-      ) : null}
-    </section>
+      </CardContent>
+    </Card>
   )
-}
+}

frontend/src/components/FieldControl.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react"
+import { Info } from "lucide-react"
 
 import type { AdminField } from "@/lib/types"
 import { cn } from "@/lib/utils"
+import { Badge } from "./ui/badge"
 import { Checkbox } from "./ui/checkbox"
 import { Input } from "./ui/input"
 import { Label } from "./ui/label"
@@ -162,10 +164,11 @@ export function FieldRow({
   onValueChange,
   onMessage,
 }: FieldRowProps) {
+  const source = sourceText(field)
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 rounded-lg border p-4",
+        "flex flex-col gap-2.5 rounded-lg border bg-card/40 p-4 transition-colors hover:border-border/80",
         field.advanced && "advanced-field hidden",
       )}
       data-key={field.key}
@@ -174,7 +177,14 @@ export function FieldRow({
         <Label htmlFor={field.type === "boolean" ? undefined : `field-${field.key}`}>
           <span className="text-sm font-medium">{field.label}</span>
         </Label>
-        <span className="text-xs text-muted-foreground">{sourceText(field)}</span>
+        {source ? (
+          <Badge
+            variant="outline"
+            className="gap-1 px-1.5 py-0 text-[10px] font-medium text-muted-foreground"
+          >
+            {source}
+          </Badge>
+        ) : null}
       </div>
       <FieldControl
         field={field}
@@ -184,7 +194,10 @@ export function FieldRow({
         onMessage={onMessage}
       />
       {field.description ? (
-        <p className="text-xs text-muted-foreground">{field.description}</p>
+        <p className="flex items-start gap-1.5 text-xs text-muted-foreground">
+          <Info className="mt-0.5 size-3.5 shrink-0 opacity-70" />
+          <span>{field.description}</span>
+        </p>
       ) : null}
     </div>
   )

frontend/src/components/OpenAICompatibleView.tsx

@@ -1,13 +1,29 @@
 import { useEffect, useState } from "react"
+import {
+  Cable,
+  Check,
+  ListChecks,
+  ListPlus,
+  Loader2,
+  Plus,
+  RefreshCw,
+  Server,
+  Star,
+  Trash2,
+} from "lucide-react"
 
+import { statusClass } from "@/App"
 import type {
   AdminConfig,
   LocalProviderStatus,
   OpenAICompatibleInstance,
 } from "@/lib/types"
+import { statusDotClass } from "@/lib/status"
+import { cn } from "@/lib/utils"
 import { Badge } from "./ui/badge"
 import { Button } from "./ui/button"
 import { Card, CardContent } from "./ui/card"
+import { Checkbox } from "./ui/checkbox"
 import { Input } from "./ui/input"
 import { Label } from "./ui/label"
 
@@ -20,6 +36,7 @@ interface OpenAICompatibleViewProps {
   localStatus: Record<string, LocalProviderStatus>
   onTestProvider: (providerId: string, done?: () => void) => void
   onFetchModels: (providerId: string) => Promise<string[]>
+  onAddModels: (providerId: string, models: string[]) => void
   onMessage: (text: string, kind?: string) => void
 }
 
@@ -70,14 +87,6 @@ function statusFor(
   }
 }
 
-function badgeVariant(status: string): "ok" | "warn" | "error" | "neutral" {
-  if (["configured", "reachable"].includes(status)) return "ok"
-  if (["missing_key", "missing_config", "missing_url", "unknown"].includes(status))
-    return "warn"
-  if (["offline", "error"].includes(status)) return "error"
-  return "neutral"
-}
-
 interface InstanceCardProps {
   index: number
   instance: OpenAICompatibleInstance
@@ -86,11 +95,15 @@ interface InstanceCardProps {
   testing: boolean
   fetching: boolean
   models: string[]
+  selected: string[]
+  currentDefault: string
   onPatch: (patch: Partial<OpenAICompatibleInstance>) => void
   onRemove: () => void
   onTest: () => void
   onFetch: () => void
   onClearModels: () => void
+  onAddModels: (models: string[]) => void
+  onToggleModel: (model: string) => void
   onUseModel: (model: string) => void
 }
 
@@ -102,35 +115,63 @@ function InstanceCard({
   testing,
   fetching,
   models,
+  selected,
+  currentDefault,
   onPatch,
   onRemove,
   onTest,
   onFetch,
   onClearModels,
+  onAddModels,
+  onToggleModel,
   onUseModel,
 }: InstanceCardProps) {
   const providerId = providerIdFor(index)
   const canProbe = !locked && Boolean(instance.base_url.trim())
+  const [modelDraft, setModelDraft] = useState("")
+
+  const addFromDraft = () => {
+    const ids = modelDraft
+      .split(",")
+      .map((id) => id.trim())
+      .filter(Boolean)
+    if (ids.length === 0) return
+    onAddModels(ids)
+    setModelDraft("")
+  }
+
   return (
-    <Card>
+    <Card className="overflow-hidden">
       <CardContent className="flex flex-col gap-4 py-4">
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
-            <h4 className="text-base font-semibold">Endpoint {index + 1}</h4>
-            <Badge variant="outline" className="font-mono">
-              {providerId}/&lt;model&gt;
-            </Badge>
+          <div className="flex items-center gap-3">
+            <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-bold text-primary ring-1 ring-primary/20">
+              {index + 1}
+            </span>
+            <div className="min-w-0">
+              <h4 className="text-base font-semibold leading-tight">
+                Endpoint {index + 1}
+              </h4>
+              <p className="font-mono text-xs text-muted-foreground">
+                {providerId}/&lt;model&gt;
+              </p>
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            <Badge variant={badgeVariant(status.status)}>{status.label}</Badge>
+          <div className="flex items-center gap-1.5">
+            <Badge variant={statusClass(status.status)} className="gap-1.5">
+              <span className={cn("size-1.5 rounded-full", statusDotClass(status.status))} />
+              {status.label}
+            </Badge>
             <Button
               type="button"
               variant="ghost"
-              size="sm"
+              size="icon"
               disabled={locked}
+              aria-label={`Remove endpoint ${index + 1}`}
+              title="Remove endpoint"
               onClick={onRemove}
             >
-              Remove
+              <Trash2 />
             </Button>
           </div>
         </div>
@@ -174,12 +215,23 @@ function InstanceCard({
             onChange={(event) => onPatch({ proxy: event.target.value })}
           />
         </div>
-        {models.length > 0 ? (
-          <div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
-            <div className="flex items-center justify-between gap-2">
-              <p className="text-sm font-medium">
-                {models.length} model{models.length === 1 ? "" : "s"} from /models
+        <div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <p className="flex items-center gap-1.5 text-sm font-medium">
+                <ListChecks className="size-4 text-muted-foreground" />
+                {models.length === 0
+                  ? "No model ids yet"
+                  : `${models.length} model id${models.length === 1 ? "" : "s"}`}
               </p>
+              {selected.length > 0 ? (
+                <Badge variant="outline" className="gap-1 px-1.5 py-0 text-[10px]">
+                  <Check className="size-3" />
+                  {selected.length} selected
+                </Badge>
+              ) : null}
+            </div>
+            {models.length > 0 ? (
               <Button
                 type="button"
                 variant="ghost"
@@ -187,34 +239,99 @@ function InstanceCard({
                 disabled={locked}
                 onClick={onClearModels}
               >
+                <Trash2 />
                 Clear
               </Button>
-            </div>
+            ) : null}
+          </div>
+          <div className="flex gap-2">
+            <Input
+              id={`${providerId}-model-id`}
+              type="text"
+              autoComplete="off"
+              placeholder="Add model id, comma-separated (gpt-4o, deepseek-v3, …)"
+              value={modelDraft}
+              disabled={locked}
+              onChange={(event) => setModelDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault()
+                  addFromDraft()
+                }
+              }}
+            />
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              disabled={locked || !modelDraft.trim()}
+              onClick={addFromDraft}
+            >
+              <ListPlus />
+              Add
+            </Button>
+          </div>
+          {models.length > 0 ? (
             <div className="grid max-h-56 gap-1 overflow-auto">
-              {models.map((model) => (
-                <div
-                  key={model}
-                  className="flex items-center justify-between gap-2 rounded-md bg-card px-2.5 py-1.5"
-                >
-                  <span className="min-w-0 flex-1 truncate font-mono text-xs">
-                    {model}
-                  </span>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    disabled={locked}
-                    onClick={() => onUseModel(model)}
+              {models.map((model) => {
+                const isDefault = `${providerId}/${model}` === currentDefault
+                return (
+                  <div
+                    key={model}
+                    className={cn(
+                      "flex items-center gap-2 rounded-md border px-2.5 py-1.5 transition-colors hover:border-border",
+                      isDefault
+                        ? "border-emerald-200 bg-emerald-50/70 dark:border-emerald-500/30 dark:bg-emerald-500/10"
+                        : "border-transparent bg-card",
+                    )}
                   >
-                    Use as default
-                  </Button>
-                </div>
-              ))}
+                    <Checkbox
+                      id={`${providerId}-model-${model}`}
+                      checked={selected.includes(model)}
+                      disabled={locked}
+                      aria-label={`Apply model ${model}`}
+                      title={
+                        selected.includes(model)
+                          ? "Applied to this endpoint"
+                          : "Select to apply this model"
+                      }
+                      onCheckedChange={() => onToggleModel(model)}
+                    />
+                    <span className="flex min-w-0 flex-1 items-center gap-1.5">
+                      {isDefault ? (
+                        <Star className="size-3.5 shrink-0 fill-amber-400 text-amber-500" />
+                      ) : null}
+                      <span className="truncate font-mono text-xs">{model}</span>
+                      {isDefault ? (
+                        <Badge variant="ok" className="px-1.5 py-0 text-[10px]">
+                          default
+                        </Badge>
+                      ) : null}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      disabled={locked}
+                      onClick={() => onUseModel(model)}
+                    >
+                      <Star className="size-3.5" />
+                      Use as default
+                    </Button>
+                  </div>
+                )
+              })}
             </div>
-          </div>
-        ) : null}
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <p className="text-xs text-muted-foreground">
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Add model ids manually, or use <strong>Fetch models</strong> below
+              to pull them from GET {`{base}`}/models.
+            </p>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/30 px-3 py-2">
+          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Cable className="size-3.5" />
             {status.baseUrl ? `Resolves to ${status.baseUrl}` : "Not checked yet"}
           </p>
           <div className="flex items-center gap-2">
@@ -226,6 +343,11 @@ function InstanceCard({
               onClick={onFetch}
               title="Fetch model ids from GET {base}/models (uses the saved config, Apply first)"
             >
+              {fetching ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                <RefreshCw />
+              )}
               {fetching ? "Fetching…" : "Fetch models"}
             </Button>
             <Button
@@ -235,6 +357,7 @@ function InstanceCard({
               disabled={!canProbe || testing}
               onClick={onTest}
             >
+              {testing ? <Loader2 className="animate-spin" /> : <Cable />}
               {testing ? "Testing…" : "Test connection"}
             </Button>
           </div>
@@ -251,6 +374,7 @@ export function OpenAICompatibleView({
   localStatus,
   onTestProvider,
   onFetchModels,
+  onAddModels,
   onMessage,
 }: OpenAICompatibleViewProps) {
   const field = config.fields.find(
@@ -297,19 +421,52 @@ export function OpenAICompatibleView({
     try {
       const models = await onFetchModels(providerId)
       if (models.length === 0) {
-        setModelsByProvider((prev) => ({ ...prev, [providerId]: [] }))
+        onMessage(`No models found at ${providerId}.`, "warn")
         return
       }
-      setModelsByProvider((prev) => ({ ...prev, [providerId]: models }))
+      setModelsByProvider((prev) => ({
+        ...prev,
+        [providerId]: [...new Set([...(prev[providerId] ?? []), ...models])],
+      }))
       onMessage(`Fetched ${models.length} models from ${providerId}.`, "ok")
     } finally {
       setFetchingId(null)
     }
   }
 
+  const addModels = (index: number, models: string[]) => {
+    const providerId = providerIdFor(index)
+    setModelsByProvider((prev) => ({
+      ...prev,
+      [providerId]: [...new Set([...(prev[providerId] ?? []), ...models])],
+    }))
+    // Manually added ids are deliberately typed, so apply them immediately.
+    const current = instances[index]?.models ?? []
+    updateInstance(index, { models: [...new Set([...current, ...models])] })
+    onAddModels(providerId, models)
+    onMessage(
+      `Added ${models.length} model id${models.length === 1 ? "" : "s"} to ${providerId}. Apply to save.`,
+      "ok",
+    )
+  }
+
+  const toggleModel = (index: number, model: string) => {
+    const current = instances[index]?.models ?? []
+    updateInstance(
+      index,
+      current.includes(model)
+        ? { models: current.filter((candidate) => candidate !== model) }
+        : { models: [...current, model] },
+    )
+  }
+
   const useModelAsDefault = (index: number, model: string) => {
     const route = `${providerIdFor(index)}/${model}`
     onValuesChange({ ...values, MODEL: route })
+    const current = instances[index]?.models ?? []
+    if (!current.includes(model)) {
+      updateInstance(index, { models: [...current, model] })
+    }
     onMessage(`Default model set to ${route}. Apply to save.`, "ok")
   }
 
@@ -323,20 +480,45 @@ export function OpenAICompatibleView({
 
   const legacyBaseUrl = values["OPENAI_COMPATIBLE_BASE_URL"] ?? ""
   const legacyKey = values["OPENAI_COMPATIBLE_API_KEY"] ?? ""
+  const cardModels = (index: number): string[] => {
+    const providerId = providerIdFor(index)
+    return [
+      ...new Set([
+        ...(instances[index]?.models ?? []),
+        ...(modelsByProvider[providerId] ?? []),
+      ]),
+    ]
+  }
+  const totalModels = instances.reduce(
+    (sum, _instance, index) => sum + cardModels(index).length,
+    0,
+  )
 
   return (
     <section className="space-y-4">
       <div>
         <h3 className="text-lg font-semibold">Endpoints</h3>
-        <p className="text-sm text-muted-foreground">
+        <p className="mt-1 text-sm text-muted-foreground">
           Add any OpenAI-compatible server (vLLM, LM Studio, Ollama, Together, or
           your own gateway). Each endpoint becomes a numbered provider:{" "}
           <code>openai_compatible_1/&lt;model&gt;</code>,{" "}
-          <code>openai_compatible_2/&lt;model&gt;</code>, … Use{" "}
-          <strong>Fetch models</strong> to pull model ids from the endpoint's{" "}
-          <code>/models</code> route, then Apply to save. Fetched ids also appear
-          in the Model Config dropdowns.
+          <code>openai_compatible_2/&lt;model&gt;</code>, … Add as many model ids
+          as you want per endpoint, comma-separated, or use{" "}
+          <strong>Fetch models</strong> to pull them from the endpoint's{" "}
+          <code>/models</code> route. Tick the models you want applied — selected
+          ids are saved with the endpoint on <strong>Apply</strong> and appear in
+          the Model Config dropdowns after a reload.
         </p>
+        <div className="mt-3 flex flex-wrap gap-2">
+          <Badge variant="outline" className="gap-1.5">
+            <Server className="size-3.5 text-muted-foreground" />
+            {instances.length} endpoint{instances.length === 1 ? "" : "s"}
+          </Badge>
+          <Badge variant="outline" className="gap-1.5">
+            <ListChecks className="size-3.5 text-muted-foreground" />
+            {totalModels} model id{totalModels === 1 ? "" : "s"}
+          </Badge>
+        </div>
       </div>
 
       {instances.length === 0 && legacyBaseUrl.trim() ? (
@@ -354,6 +536,7 @@ export function OpenAICompatibleView({
               commit([{ base_url: legacyBaseUrl, api_keys: legacyKey, proxy: "" }])
             }
           >
+            <ListPlus />
             Import as endpoint 1
           </Button>
         </div>
@@ -361,11 +544,15 @@ export function OpenAICompatibleView({
 
       {instances.length === 0 ? (
         <Card className="border-dashed">
-          <CardContent className="flex flex-col items-center gap-3 py-10 text-center">
+          <CardContent className="flex flex-col items-center gap-3 py-12 text-center">
+            <span className="flex size-12 items-center justify-center rounded-full bg-primary/10">
+              <Server className="size-6 text-primary" />
+            </span>
             <p className="text-sm text-muted-foreground">
               No endpoints yet. Add your first OpenAI-compatible endpoint.
             </p>
             <Button type="button" onClick={addInstance}>
+              <Plus />
               Add endpoint
             </Button>
           </CardContent>
@@ -383,7 +570,9 @@ export function OpenAICompatibleView({
                 locked={field.locked}
                 testing={testingId === providerId}
                 fetching={fetchingId === providerId}
-                models={modelsByProvider[providerId] ?? []}
+                models={cardModels(index)}
+                selected={instance.models ?? []}
+                currentDefault={values["MODEL"] ?? ""}
                 onPatch={(patch) => updateInstance(index, patch)}
                 onRemove={() => removeInstance(index)}
                 onTest={() => {
@@ -391,18 +580,25 @@ export function OpenAICompatibleView({
                   onTestProvider(providerId, () => setTestingId(null))
                 }}
                 onFetch={() => void fetchModels(index)}
-                onClearModels={() =>
+                onClearModels={() => {
                   setModelsByProvider((prev) => ({ ...prev, [providerId]: [] }))
-                }
+                  updateInstance(index, { models: [] })
+                }}
+                onAddModels={(models) => addModels(index, models)}
+                onToggleModel={(model) => toggleModel(index, model)}
                 onUseModel={(model) => useModelAsDefault(index, model)}
               />
             )
           })}
-          <div>
-            <Button type="button" variant="secondary" onClick={addInstance}>
-              Add endpoint
-            </Button>
-          </div>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-dashed"
+            onClick={addInstance}
+          >
+            <Plus />
+            Add endpoint
+          </Button>
         </div>
       )}
     </section>

frontend/src/components/ProviderCards.tsx

@@ -1,7 +1,10 @@
 import { useState } from "react"
+import { Cable, Cpu, KeyRound, RefreshCw } from "lucide-react"
 
 import { statusClass } from "@/App"
+import { statusDotClass } from "@/lib/status"
 import type { ProviderStatus } from "@/lib/types"
+import { cn } from "@/lib/utils"
 import { Badge } from "./ui/badge"
 import { Button } from "./ui/button"
 import { Card } from "./ui/card"
@@ -26,25 +29,44 @@ export function ProviderCard({ provider, state, onTest }: ProviderCardProps) {
     : provider.configuration || ""
 
   const label = isLocal ? "Test" : "Refresh models"
+  const Icon = isLocal ? Cpu : Cable
 
   return (
-    <Card className="flex flex-row items-center justify-between gap-3 p-4">
-      <div className="min-w-0">
-        <div className="flex items-center gap-2">
-          <strong className="text-sm">{provider.display_name || provider.provider_id}</strong>
-          <Badge variant={statusClass(state.status)}>{state.label}</Badge>
+    <Card className="flex flex-row items-center justify-between gap-3 p-4 transition-shadow hover:shadow-md">
+      <div className="flex min-w-0 items-center gap-3">
+        <span
+          className={cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-lg",
+            isLocal ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+          )}
+        >
+          <Icon className="size-4.5" />
+        </span>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <strong className="truncate text-sm">
+              {provider.display_name || provider.provider_id}
+            </strong>
+            <StatusBadge status={state.status} label={state.label} />
+          </div>
+          <p className="mt-1 truncate text-xs text-muted-foreground">{meta}</p>
         </div>
-        <p className="mt-1 truncate text-xs text-muted-foreground">{meta}</p>
       </div>
       <Button
         variant="secondary"
         size="sm"
+        className="shrink-0"
         disabled={pending}
         onClick={() => {
           setPending(true)
           onTest(provider.provider_id, () => setPending(false))
         }}
       >
+        {pending ? (
+          <RefreshCw className="animate-spin" />
+        ) : (
+          <Icon className="size-4" />
+        )}
         {pending ? (isLocal ? "Testing" : "Refreshing") : label}
       </Button>
     </Card>
@@ -88,10 +110,26 @@ export function ConnectedAccountCard({
   const target = status.authorization_url || status.verification_url
 
   return (
-    <Card className="flex flex-col gap-3 p-4">
-      <div className="flex items-center gap-2">
-        <strong className="text-sm">{provider.display_name || provider.provider_id}</strong>
-        <Badge variant={statusClass(status.state)}>{status.label}</Badge>
+    <Card className="flex flex-col gap-3 p-4 transition-shadow hover:shadow-md">
+      <div className="flex items-center gap-3">
+        <span
+          className={cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-lg",
+            connected
+              ? "bg-emerald-500/10 text-emerald-600"
+              : connecting
+                ? "bg-amber-500/10 text-amber-600"
+                : "bg-muted text-muted-foreground",
+          )}
+        >
+          <KeyRound className="size-4.5" />
+        </span>
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <strong className="truncate text-sm">
+            {provider.display_name || provider.provider_id}
+          </strong>
+          <StatusBadge status={status.state} label={status.label} />
+        </div>
       </div>
       <p className="text-xs text-muted-foreground">{statusMessage(status)}</p>
       <div className="flex flex-wrap gap-2">
@@ -135,6 +173,22 @@ export function ConnectedAccountCard({
   )
 }
 
+function StatusBadge({ status, label }: { status: string; label: string }) {
+  const connecting = status === "connecting"
+  return (
+    <Badge variant={statusClass(status)} className="gap-1.5">
+      <span
+        className={cn(
+          "size-1.5 rounded-full",
+          statusDotClass(status),
+          connecting && "animate-pulse",
+        )}
+      />
+      {label}
+    </Badge>
+  )
+}
+
 function statusMessage(status: ConnectedState): string {
   if (status.connected) {
     const identity = status.email || "ChatGPT subscription connected"
@@ -151,4 +205,4 @@ function statusMessage(status: ConnectedState): string {
     return "Finish signing in, then return to this page."
   }
   return status.message || "Connect a ChatGPT account to discover subscription models."
-}
+}

frontend/src/components/Sidebar.tsx

@@ -1,47 +1,100 @@
+import { Bot, FileCog } from "lucide-react"
+
 import { cn } from "@/lib/utils"
 import type { AdminConfig } from "@/lib/types"
 
 import { VIEW_GROUPS } from "../App"
+import { Separator } from "./ui/separator"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 
 interface SidebarProps {
   config: AdminConfig
   activeView: string
   onSelectView: (view: string) => void
+  /** Called after a view is selected; used by the mobile drawer to close. */
+  onNavigate?: () => void
+  className?: string
 }
 
-export function Sidebar({ config, activeView, onSelectView }: SidebarProps) {
+export function Sidebar({
+  config,
+  activeView,
+  onSelectView,
+  onNavigate,
+  className,
+}: SidebarProps) {
   return (
-    <aside className="flex w-64 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground">
-      <div className="flex items-center gap-3 px-6 py-5">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-primary font-bold text-primary-foreground">
-          FC
+    <aside
+      className={cn(
+        "flex w-64 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3 px-5 py-5">
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-primary/70 text-primary-foreground shadow-sm">
+          <Bot className="size-5" />
         </div>
-        <div>
-          <h1 className="text-base font-semibold leading-tight">Free Claude Code</h1>
+        <div className="min-w-0">
+          <h1 className="truncate text-sm leading-tight font-semibold">
+            Free Claude Code
+          </h1>
           <p className="text-xs text-muted-foreground">Server Control</p>
         </div>
       </div>
+
+      <div className="px-5 pt-1 pb-2 text-[10px] font-semibold tracking-wider text-muted-foreground uppercase">
+        Configuration
+      </div>
+
       <nav className="flex flex-col gap-1 px-3" aria-label="Admin views">
-        {VIEW_GROUPS.map((view) => (
-          <button
-            key={view.id}
-            type="button"
-            className={cn(
-              "rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
-              view.id === activeView
-                ? "bg-accent text-accent-foreground"
-                : "hover:bg-accent/50",
-            )}
-            aria-current={view.id === activeView ? "page" : undefined}
-            onClick={() => onSelectView(view.id)}
-          >
-            {view.label}
-          </button>
-        ))}
+        {VIEW_GROUPS.map((view) => {
+          const isActive = view.id === activeView
+          const Icon = view.icon
+          return (
+            <Tooltip key={view.id}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className={cn(
+                    "relative flex items-center gap-3 rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
+                    isActive
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                  )}
+                  aria-current={isActive ? "page" : undefined}
+                  onClick={() => {
+                    onSelectView(view.id)
+                    onNavigate?.()
+                  }}
+                >
+                  {isActive ? (
+                    <span className="absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary" />
+                  ) : null}
+                  <Icon
+                    className={cn(
+                      "size-4 shrink-0",
+                      isActive ? "text-primary" : "text-muted-foreground",
+                    )}
+                  />
+                  {view.label}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{view.description}</TooltipContent>
+            </Tooltip>
+          )
+        })}
       </nav>
-      <div className="mt-auto px-6 py-4 text-xs text-muted-foreground">
-        <p className="break-all">{config.paths.managed}</p>
+
+      <div className="mt-auto space-y-2 px-5 py-4">
+        <Separator />
+        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <FileCog className="size-3.5 shrink-0" />
+          Managed config
+        </div>
+        <p className="break-all font-mono text-[11px] leading-relaxed text-muted-foreground/80">
+          {config.paths.managed}
+        </p>
       </div>
     </aside>
   )
-}
+}

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,29 @@
+import { Moon, Sun } from "lucide-react"
+
+import { useTheme } from "./theme-provider"
+import { Button } from "./ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
+
+export function ThemeToggle() {
+  const { resolvedTheme, toggleTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+          onClick={toggleTheme}
+        >
+          {isDark ? <Sun /> : <Moon />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {isDark ? "Switch to light theme" : "Switch to dark theme"}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

frontend/src/components/theme-provider.tsx

@@ -0,0 +1,79 @@
+import { createContext, useContext, useEffect, useState } from "react"
+import type { ReactNode } from "react"
+
+const THEME_KEY = "fcc-admin-theme"
+
+export type Theme = "light" | "dark" | "system"
+
+interface ThemeContextValue {
+  theme: Theme
+  /** Resolved appearance currently applied to the document. */
+  resolvedTheme: "light" | "dark"
+  setTheme: (theme: Theme) => void
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+function readStoredTheme(): Theme {
+  try {
+    const stored = window.localStorage.getItem(THEME_KEY)
+    if (stored === "light" || stored === "dark" || stored === "system") return stored
+  } catch {
+    // Storage may be unavailable (private mode); fall back to system.
+  }
+  return "system"
+}
+
+function readSystemTheme(): "light" | "dark" {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+function applyTheme(theme: Theme): "light" | "dark" {
+  const resolved = theme === "system" ? readSystemTheme() : theme
+  document.documentElement.classList.toggle("dark", resolved === "dark")
+  return resolved
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(readStoredTheme)
+  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">(() =>
+    applyTheme(readStoredTheme()),
+  )
+
+  useEffect(() => {
+    setResolvedTheme(applyTheme(theme))
+    if (theme !== "system") return
+    const media = window.matchMedia("(prefers-color-scheme: dark)")
+    const onChange = () => setResolvedTheme(applyTheme("system"))
+    media.addEventListener("change", onChange)
+    return () => media.removeEventListener("change", onChange)
+  }, [theme])
+
+  const setTheme = (next: Theme) => {
+    setThemeState(next)
+    try {
+      window.localStorage.setItem(THEME_KEY, next)
+    } catch {
+      // Non-persistent storage: the toggle still applies for this session.
+    }
+  }
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/src/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -83,7 +84,23 @@
   border-color: var(--border);
 }
 
+html {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
 body {
   background-color: var(--background);
   color: var(--foreground);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Slim scrollbars for dense lists (model pickers, endpoint model lists). */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
 }

frontend/src/lib/status.ts

@@ -0,0 +1,13 @@
+/** Dot color for a provider/endpoint status badge, shared by all status cards. */
+export function statusDotClass(status: string | undefined): string {
+  if (["configured", "reachable", "running", "connected"].includes(status ?? ""))
+    return "bg-emerald-500"
+  if (
+    ["missing_key", "missing_config", "missing_url", "unknown", "connecting"].includes(
+      status ?? "",
+    )
+  )
+    return "bg-amber-500"
+  if (["offline", "error"].includes(status ?? "")) return "bg-red-500"
+  return "bg-muted-foreground/50"
+}

frontend/src/lib/types.ts

@@ -113,4 +113,6 @@ export interface OpenAICompatibleInstance {
   base_url: string
   api_keys: string
   proxy: string
+  /** Model ids applied to this endpoint; persisted on Apply. */
+  models?: string[]
 }

frontend/src/main.tsx

@@ -2,10 +2,13 @@ import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 
 import App from "./App"
+import { ThemeProvider } from "./components/theme-provider"
 import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
-)
+)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "free-claude-code"
-version = "4.23.2"
+version = "4.25.0"
 description = "Local proxy connecting coding agents to OpenAI-compatible AI providers"
 readme = "README.md"
 requires-python = ">=3.14.0"

src/free_claude_code/api/admin_routes.py

@@ -254,18 +254,26 @@ def _model_options(
     *,
     refresh_result: ProviderModelRefreshResult | None = None,
 ) -> dict[str, list[str]]:
-    configured = {
-        ref.model_ref
-        for ref in configured_chat_model_refs(services.requests.current_settings())
-    }
+    settings = services.requests.current_settings()
+    configured = {ref.model_ref for ref in configured_chat_model_refs(settings)}
     discovered = {
         info.model_id for info in services.requests.cached_prefixed_model_infos()
     }
+    stored_instance_models = {
+        f"openai_compatible_{index}/{model.strip()}"
+        for index, instance in enumerate(settings.openai_compatible_instances, start=1)
+        if instance.base_url.strip()
+        for model in instance.models
+        if model.strip()
+    }
     failed_provider_ids = (
         refresh_result.failed_provider_ids if refresh_result is not None else ()
     )
     return {
-        "models": sorted(configured | discovered, key=str.casefold),
+        "models": sorted(
+            configured | discovered | stored_instance_models,
+            key=str.casefold,
+        ),
         "failed_providers": list(failed_provider_ids),
     }
 

src/free_claude_code/api/admin_static/assets/admin-6Z5kWe4I.css

@@ -1 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-800:oklch(44.4% .177 26.899);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-800:oklch(43.2% .095 166.913);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-y-0{inset-block:0}.right-2{right:calc(var(--spacing) * 2)}.z-10{z-index:10}.mt-1{margin-top:var(--spacing)}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.max-h-56{max-height:calc(var(--spacing) * 56)}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-screen{min-height:100vh}.w-9{width:calc(var(--spacing) * 9)}.w-64{width:calc(var(--spacing) * 64)}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--accent)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-background{background-color:var(--background)}.bg-card{background-color:var(--card)}.bg-destructive{background-color:var(--destructive)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/30{background-color:color-mix(in oklab,var(--muted) 30%,transparent)}}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-red-100{background-color:var(--color-red-100)}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-transparent{background-color:#0000}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-amber-600{color:var(--color-amber-600)}.text-amber-800{color:var(--color-amber-800)}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-800{color:var(--color-emerald-800)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-800{color:var(--color-red-800)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-foreground{color:var(--sidebar-foreground)}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}@media(hover:hover){.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.25);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.25);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.25);--primary:oklch(21.6% .006 56.043);--primary-foreground:oklch(98.5% .001 106.423);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(21.6% .006 56.043);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.3% .013 58.071);--accent:oklch(95.6% .012 81.69);--accent-foreground:oklch(21.6% .006 56.043);--destructive:oklch(57.7% .245 27.325);--border:oklch(90.9% .01 58.071);--input:oklch(90.9% .01 58.071);--ring:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% .001 106.423);--sidebar-foreground:oklch(14.7% .004 49.25)}.dark{--background:oklch(14.7% .004 285.25);--foreground:oklch(98.5% .001 106.423);--card:oklch(21.6% .006 56.043);--card-foreground:oklch(98.5% .001 106.423);--popover:oklch(21.6% .006 56.043);--popover-foreground:oklch(98.5% .001 106.423);--primary:oklch(85.1% .2 91.936);--primary-foreground:oklch(21.6% .006 56.043);--secondary:oklch(26.8% .007 34.298);--secondary-foreground:oklch(98.5% .001 106.423);--muted:oklch(26.8% .007 34.298);--muted-foreground:oklch(77.5% .024 90.004);--accent:oklch(31.7% .012 45.683);--accent-foreground:oklch(98.5% .001 106.423);--destructive:oklch(70.7% .222 23.322);--border:oklch(100% 0 0/.15);--input:oklch(100% 0 0/.3);--ring:oklch(95.2% .129 103.88);--sidebar:oklch(21.6% .006 56.043);--sidebar-foreground:oklch(98.5% .001 106.423)}:root{--radius:.625rem}*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}

src/free_claude_code/api/admin_static/assets/admin-Brc4d8H7.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-500:oklch(63.7% .237 25.331);--color-red-800:oklch(44.4% .177 26.899);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-800:oklch(43.2% .095 166.913);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{inset-block:0}.inset-y-1\.5{inset-block:calc(var(--spacing) * 1.5)}.top-0{top:0}.top-4{top:calc(var(--spacing) * 4)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.bottom-0{bottom:0}.left-0{left:0}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-4\.5{width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.h-4{height:calc(var(--spacing) * 4)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-36{height:calc(var(--spacing) * 36)}.max-h-56{max-height:calc(var(--spacing) * 56)}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-screen{min-height:100vh}.w-0\.5{width:calc(var(--spacing) * .5)}.w-3\/6{width:50%}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-9{width:calc(var(--spacing) * 9)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-fit{width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y: calc(-50% - 2px) ;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded-\[2px\]{border-radius:2px}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--accent)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/10{background-color:color-mix(in oklab,var(--color-amber-500) 10%,transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/80{background-color:color-mix(in oklab,var(--background) 80%,transparent)}}.bg-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/90{background-color:color-mix(in oklab,var(--background) 90%,transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/40{background-color:var(--card)}@supports (color:color-mix(in lab,red,red)){.bg-card\/40{background-color:color-mix(in oklab,var(--card) 40%,transparent)}}.bg-destructive{background-color:var(--destructive)}.bg-emerald-50\/70{background-color:#ecfdf5b3}@supports (color:color-mix(in lab,red,red)){.bg-emerald-50\/70{background-color:color-mix(in oklab,var(--color-emerald-50) 70%,transparent)}}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/10{background-color:color-mix(in oklab,var(--color-emerald-500) 10%,transparent)}}.bg-muted{background-color:var(--muted)}.bg-muted-foreground\/50{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.bg-muted-foreground\/50{background-color:color-mix(in oklab,var(--muted-foreground) 50%,transparent)}}.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/30{background-color:color-mix(in oklab,var(--muted) 30%,transparent)}}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/10{background-color:color-mix(in oklab,var(--primary) 10%,transparent)}}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-transparent{background-color:#0000}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-primary{--tw-gradient-from:var(--primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-primary\/70{--tw-gradient-to:var(--primary)}@supports (color:color-mix(in lab,red,red)){.to-primary\/70{--tw-gradient-to:color-mix(in oklab, var(--primary) 70%, transparent)}}.to-primary\/70{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-amber-400{fill:var(--color-amber-400)}.fill-primary{fill:var(--primary)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0{padding-block:0}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-1{padding-top:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-balance{text-wrap:balance}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-amber-500{color:var(--color-amber-500)}.text-amber-600{color:var(--color-amber-600)}.text-amber-800{color:var(--color-amber-800)}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-emerald-500{color:var(--color-emerald-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-800{color:var(--color-emerald-800)}.text-foreground{color:var(--foreground)}.text-muted-foreground,.text-muted-foreground\/80{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/80{color:color-mix(in oklab,var(--muted-foreground) 80%,transparent)}}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-800{color:var(--color-red-800)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-foreground{color:var(--sidebar-foreground)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-primary\/20{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.ring-primary\/20{--tw-ring-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.running{animation-play-state:running}.slide-in-from-left{--tw-enter-translate-x:-100%}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}@media(hover:hover){.hover\:border-border:hover,.hover\:border-border\/80:hover{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.hover\:border-border\/80:hover{border-color:color-mix(in oklab,var(--border) 80%,transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}@media(min-width:40rem){.sm\:inline-flex{display:inline-flex}}@media(min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:64rem){.lg\:inline{display:inline}}.dark\:border-emerald-500\/30:is(.dark *){border-color:#00bb7f4d}@supports (color:color-mix(in lab,red,red)){.dark\:border-emerald-500\/30:is(.dark *){border-color:color-mix(in oklab,var(--color-emerald-500) 30%,transparent)}}.dark\:bg-emerald-500\/10:is(.dark *){background-color:#00bb7f1a}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-500\/10:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-500) 10%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.25);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.25);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.25);--primary:oklch(21.6% .006 56.043);--primary-foreground:oklch(98.5% .001 106.423);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(21.6% .006 56.043);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.3% .013 58.071);--accent:oklch(95.6% .012 81.69);--accent-foreground:oklch(21.6% .006 56.043);--destructive:oklch(57.7% .245 27.325);--border:oklch(90.9% .01 58.071);--input:oklch(90.9% .01 58.071);--ring:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% .001 106.423);--sidebar-foreground:oklch(14.7% .004 49.25)}.dark{--background:oklch(14.7% .004 285.25);--foreground:oklch(98.5% .001 106.423);--card:oklch(21.6% .006 56.043);--card-foreground:oklch(98.5% .001 106.423);--popover:oklch(21.6% .006 56.043);--popover-foreground:oklch(98.5% .001 106.423);--primary:oklch(85.1% .2 91.936);--primary-foreground:oklch(21.6% .006 56.043);--secondary:oklch(26.8% .007 34.298);--secondary-foreground:oklch(98.5% .001 106.423);--muted:oklch(26.8% .007 34.298);--muted-foreground:oklch(77.5% .024 90.004);--accent:oklch(31.7% .012 45.683);--accent-foreground:oklch(98.5% .001 106.423);--destructive:oklch(70.7% .222 23.322);--border:oklch(100% 0 0/.15);--input:oklch(100% 0 0/.3);--ring:oklch(95.2% .129 103.88);--sidebar:oklch(21.6% .006 56.043);--sidebar-foreground:oklch(98.5% .001 106.423)}:root{--radius:.625rem}*{border-color:var(--border)}html{color-scheme:light}html.dark{color-scheme:dark}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}

src/free_claude_code/api/admin_static/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="data:," />
     <title>Free Claude Code Admin</title>
-    <script type="module" crossorigin src="/admin/assets/admin-GjR0Z_x1.js"></script>
-    <link rel="stylesheet" crossorigin href="/admin/assets/admin-6Z5kWe4I.css">
+    <script type="module" crossorigin src="/admin/assets/admin-D-op9N5Q.js"></script>
+    <link rel="stylesheet" crossorigin href="/admin/assets/admin-Brc4d8H7.css">
   </head>
   <body>
     <div id="root"></div>

src/free_claude_code/config/admin/status.py

@@ -114,6 +114,15 @@ def _openai_compatible_instance_statuses(raw: str) -> list[dict[str, Any]]:
             continue
         base_url = str(instance.get("base_url", "") or "")
         configured = bool(base_url.strip())
+        raw_models = instance.get("models")
+        if isinstance(raw_models, list):
+            models = [
+                str(model)
+                for model in raw_models
+                if isinstance(model, str) and model.strip()
+            ]
+        else:
+            models = []
         statuses.append(
             {
                 "provider_id": f"openai_compatible_{index}",
@@ -123,6 +132,7 @@ def _openai_compatible_instance_statuses(raw: str) -> list[dict[str, Any]]:
                 "label": "Configured" if configured else "Missing base URL",
                 "base_url": base_url,
                 "configuration": "OPENAI_COMPATIBLE_BASE_URL",
+                "models": models,
             }
         )
     return statuses

src/free_claude_code/config/settings.py

@@ -27,6 +27,11 @@ class OpenAICompatibleInstance(BaseModel):
     base_url: str = ""
     api_keys: str = ""
     proxy: str = ""
+    # Model ids applied to this endpoint from the admin "OpenAI-Compatible
+    # Endpoints" page. Each id is routable as ``openai_compatible_N/<model>``
+    # and listed in the admin model options even when the endpoint's live
+    # ``/models`` route is unreachable.
+    models: tuple[str, ...] = ()
 
 
 class Settings(BaseSettings):

tests/api/test_admin.py

@@ -16,7 +16,7 @@ from free_claude_code.application.model_metadata import (
 )
 from free_claude_code.config.admin.values import MASKED_SECRET
 from free_claude_code.config.server_urls import local_admin_url
-from free_claude_code.config.settings import Settings
+from free_claude_code.config.settings import OpenAICompatibleInstance, Settings
 from tests.api.support import create_test_app, provider_manager_for_app
 
 
@@ -365,6 +365,19 @@ def test_admin_static_model_combobox_preserves_custom_slugs_and_none_semantics()
     assert '"warn"' in app_source
 
 
+def test_admin_openai_compatible_view_supports_manual_model_entries():
+    view = Path("frontend/src/components/OpenAICompatibleView.tsx").read_text(
+        encoding="utf-8"
+    )
+    app_source = Path("frontend/src/App.tsx").read_text(encoding="utf-8")
+    assert "Add model id, comma-separated" in view
+    assert 'split(",")' in view
+    assert "onAddModels" in view
+    assert "Use as default" in view
+    assert "handleAddEndpointModels" in app_source
+    assert "onAddModels={handleAddEndpointModels}" in app_source
+
+
 def test_admin_config_masks_secrets_and_exposes_manifest(monkeypatch, tmp_path):
     _set_home(monkeypatch, tmp_path)
     _clear_process_config(monkeypatch)
@@ -490,6 +503,35 @@ def test_admin_models_include_configured_and_cached_canonical_slugs():
     }
 
 
+def test_admin_models_include_stored_openai_compatible_instance_models():
+    """Applied per-endpoint model ids are listed even without live discovery."""
+    settings = Settings()
+    settings.model = "nvidia_nim/configured-model"
+    settings.openai_compatible_instances = (
+        OpenAICompatibleInstance(
+            base_url="https://a.example/v1",
+            models=("gpt-4o", "deepseek-v3"),
+        ),
+        OpenAICompatibleInstance(base_url=""),
+        OpenAICompatibleInstance(
+            base_url="https://b.example",
+            models=(" local-model ", ""),
+        ),
+    )
+    app = create_test_app(settings)
+    response = _local_client(app).get("/admin/api/models")
+    assert response.status_code == 200
+    assert response.json() == {
+        "models": [
+            "nvidia_nim/configured-model",
+            "openai_compatible_1/deepseek-v3",
+            "openai_compatible_1/gpt-4o",
+            "openai_compatible_3/local-model",
+        ],
+        "failed_providers": [],
+    }
+
+
 def test_admin_model_refresh_returns_the_updated_canonical_catalog():
     settings = Settings()
     settings.model = "deepseek/deepseek-chat"

tests/config/test_config.py

@@ -673,6 +673,31 @@ class TestOpenAICompatibleInstances:
             ),
         )
 
+    def test_instances_parse_applied_models(self, monkeypatch):
+        """Applied model ids persist per instance and default to empty."""
+        from free_claude_code.config.settings import (
+            OpenAICompatibleInstance,
+            Settings,
+        )
+
+        monkeypatch.setenv(
+            "OPENAI_COMPATIBLE_INSTANCES",
+            '[{"base_url": "https://a.example/v1", "models": ["gpt-4o", '
+            '"deepseek-v3"]}, {"base_url": "https://b.example"}]',
+        )
+        monkeypatch.setitem(Settings.model_config, "env_file", ())
+
+        instances = Settings().openai_compatible_instances
+
+        assert instances == (
+            OpenAICompatibleInstance(
+                base_url="https://a.example/v1",
+                models=("gpt-4o", "deepseek-v3"),
+            ),
+            OpenAICompatibleInstance(base_url="https://b.example"),
+        )
+        assert instances[1].models == ()
+
     def test_instances_empty_json_array(self, monkeypatch):
         """'[]' decodes to an empty tuple."""
         from free_claude_code.config.settings import Settings

tests/contracts/test_admin_provider_manifest.py

@@ -259,7 +259,8 @@ def test_openai_compatible_instance_status_entries_numbered() -> None:
     state = {
         "OPENAI_COMPATIBLE_INSTANCES": {
             "value": (
-                '[{"base_url": "https://a.example/v1", "api_keys": "k1"}, '
+                '[{"base_url": "https://a.example/v1", "api_keys": "k1", '
+                '"models": ["gpt-4o"]}, '
                 '{"base_url": ""}]'
             )
         },
@@ -278,6 +279,8 @@ def test_openai_compatible_instance_status_entries_numbered() -> None:
     assert by_provider["openai_compatible_1"]["display_name"] == (
         "OpenAI-Compatible Endpoint #1"
     )
+    assert by_provider["openai_compatible_1"]["models"] == ["gpt-4o"]
 
     assert by_provider["openai_compatible_2"]["status"] == "missing_config"
     assert by_provider["openai_compatible_2"]["label"] == "Missing base URL"
+    assert by_provider["openai_compatible_2"]["models"] == []

uv.lock

@@ -620,7 +620,7 @@ wheels = [
 
 [[package]]
 name = "free-claude-code"
-version = "4.23.2"
+version = "4.25.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },