feat(playground): say no model is deployed yet when the gateway lists none

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>
                 )}

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) => (

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>
+  );
+}

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",

web/src/modules/playground/locales/zh-CN.json

@@ -46,7 +46,9 @@
   },
   "modelSelect": {
     "placeholder": "选择模型",
-    "none": "无可用模型"
+    "none": "还未部署模型",
+    "noneHint": "网关上还没有可调用的模型。先到模型部署里部署一个，就绪后会出现在这里。",
+    "deploy": "去部署"
   },
   "params": {
     "system": "系统提示词",