From 48675e1348f62915af3659329332c0d748d0bae3 Mon Sep 17 00:00:00 2001
From: imneov <i@imneov.im>
Date: Sun, 4 Oct 2026 23:06:24 -0700
Subject: [PATCH] feat(playground): say no model is deployed yet when the
 gateway lists none

An empty model list used to read only "No models available", leaving the
user to guess whether the gateway was broken or nothing was deployed. The
selector now says no model is deployed yet, and Chat and Compare point to
Model Deployment, where a model shows up once it is ready.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 web/src/modules/playground/Chat.tsx             |  4 +++-
 web/src/modules/playground/Compare.tsx          |  4 ++--
 .../playground/components/ModelSelect.tsx       | 17 +++++++++++++++++
 web/src/modules/playground/locales/en-US.json   |  4 +++-
 web/src/modules/playground/locales/zh-CN.json   |  4 +++-
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/web/src/modules/playground/Chat.tsx b/web/src/modules/playground/Chat.tsx
index 1198ff0..20a0500 100644
--- a/web/src/modules/playground/Chat.tsx
+++ b/web/src/modules/playground/Chat.tsx
@@ -3,7 +3,7 @@ import { Button, Card, CardContent, CardHeader, CardTitle, Label, PageBanner } f
 import { Eraser, FlaskConical } from "lucide-react";
 import { buildPayload } from "@/modules/playground/api";
 import { Composer } from "@/modules/playground/components/Composer";
-import { ModelSelect, useModels } from "@/modules/playground/components/ModelSelect";
+import { ModelSelect, NoModels, useModels } from "@/modules/playground/components/ModelSelect";
 import { ParamsPanel } from "@/modules/playground/components/ParamsPanel";
 import { Transcript } from "@/modules/playground/components/Transcript";
 import { ViewCode } from "@/modules/playground/components/ViewCode";
@@ -55,6 +55,8 @@ export function Chat() {
                 <ModelSelect id="pg-model" value={model} onChange={setModel} />
                 {models.error ? (
                   <p className="text-xs text-destructive">{modelsHint(t, models.error)}</p>
+                ) : models.data?.length === 0 ? (
+                  <NoModels />
                 ) : (
                   <p className="text-xs text-muted-foreground">{t("chat.modelsSource")}</p>
                 )}
diff --git a/web/src/modules/playground/Compare.tsx b/web/src/modules/playground/Compare.tsx
index 913ffef..25a2530 100644
--- a/web/src/modules/playground/Compare.tsx
+++ b/web/src/modules/playground/Compare.tsx
@@ -3,7 +3,7 @@ import { Button, Card, Dialog, DialogContent, DialogDescription, DialogHeader, D
 import { Columns2, Eraser, Plus, SlidersHorizontal, X } from "lucide-react";
 import { buildPayload } from "@/modules/playground/api";
 import { Composer } from "@/modules/playground/components/Composer";
-import { ModelSelect, useModels } from "@/modules/playground/components/ModelSelect";
+import { ModelSelect, NoModels, useModels } from "@/modules/playground/components/ModelSelect";
 import { ParamsPanel } from "@/modules/playground/components/ParamsPanel";
 import { Transcript } from "@/modules/playground/components/Transcript";
 import { ViewCode } from "@/modules/playground/components/ViewCode";
@@ -103,7 +103,7 @@ export function Compare() {
       />
 
       <div className="space-y-4 p-4">
-        {models.error ? <p className="text-sm text-destructive">{modelsHint(t, models.error)}</p> : null}
+        {models.error ? <p className="text-sm text-destructive">{modelsHint(t, models.error)}</p> : <NoModels className="text-sm" />}
 
         <div className={`grid gap-4 ${GRID[slots.length] ?? "lg:grid-cols-2"}`}>
           {slots.map((slot, i) => (
diff --git a/web/src/modules/playground/components/ModelSelect.tsx b/web/src/modules/playground/components/ModelSelect.tsx
index 63d889b..5e63b63 100644
--- a/web/src/modules/playground/components/ModelSelect.tsx
+++ b/web/src/modules/playground/components/ModelSelect.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@modelsphere/ui";
 import { api } from "@/modules/playground/api";
 import { useT } from "@/modules/playground/i18n";
@@ -26,3 +27,19 @@ export function ModelSelect({ id, value, onChange, className }: { id?: string; v
     </Select>
   );
 }
+
+// NoModels says why the list is empty: the gateway answered, but no route on it
+// has a model ready to serve yet. A failed request is modelsHint's to explain.
+export function NoModels({ className }: { className?: string }) {
+  const t = useT();
+  const models = useModels();
+  if (!models.isSuccess || models.data.length > 0) return null;
+  return (
+    <p className={`text-xs text-muted-foreground ${className ?? ""}`}>
+      {t("modelSelect.noneHint")}{" "}
+      <Link to="/swiss" className="text-primary underline-offset-4 hover:underline">
+        {t("modelSelect.deploy")}
+      </Link>
+    </p>
+  );
+}
diff --git a/web/src/modules/playground/locales/en-US.json b/web/src/modules/playground/locales/en-US.json
index dd84ee8..9e51956 100644
--- a/web/src/modules/playground/locales/en-US.json
+++ b/web/src/modules/playground/locales/en-US.json
@@ -53,7 +53,9 @@
   },
   "modelSelect": {
     "placeholder": "Select a model",
-    "none": "No models available"
+    "none": "No model deployed yet",
+    "noneHint": "No model on the gateway is ready to call yet. Deploy one under Model Deployment; it shows up here once ready.",
+    "deploy": "Deploy a model"
   },
   "params": {
     "system": "System prompt",
diff --git a/web/src/modules/playground/locales/zh-CN.json b/web/src/modules/playground/locales/zh-CN.json
index 8598392..05486e0 100644
--- a/web/src/modules/playground/locales/zh-CN.json
+++ b/web/src/modules/playground/locales/zh-CN.json
@@ -46,7 +46,9 @@
   },
   "modelSelect": {
     "placeholder": "选择模型",
-    "none": "无可用模型"
+    "none": "还未部署模型",
+    "noneHint": "网关上还没有可调用的模型。先到模型部署里部署一个，就绪后会出现在这里。",
+    "deploy": "去部署"
   },
   "params": {
     "system": "系统提示词",