lzh/picoclaw
1
0
Fork 0
mirror of https://github.com/sipeed/picoclaw.git synced 2026-06-12 18:08:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): refine model availability states and preserve API key preview placeholder (#2226)

Browse Source 
* feat(web): clarify model availability and status display

- Rename model availability field from configured to available across backend API and frontend usage

- Keep status as reason classification (configured/unconfigured/unreachable) and show unreachable in UI

- Preserve API key preview even when local service is unreachable

- Update backend tests to assert both availability and status semantics

* fix(web): clarify unreachable model status and wording

- Show unreachable status in model cards instead of API key preview when service is down

- Keep API key placeholder preview in model settings whenever an API key is already saved

- Rename model status wording from configured to available across backend, frontend, and i18n

- Update backend model status tests to match renamed status semantics

* style(web): standardize formatting in handleListModels function

* refactor(web): enforce status field as required to follow backend behavior
This commit is contained in:
LC
2026-03-31 22:52:04 +08:00
committed by GitHub
parent 2bf842e460
commit 3b3f95c44c
12 changed files with 161 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/backend/api/model_status.go
+18 -6
View File
@@ -15,6 +15,17 @@ import (
const modelProbeTimeout = 800 * time.Millisecond
const (
modelStatusAvailable = "available"
modelStatusUnconfigured = "unconfigured"
modelStatusUnreachable = "unreachable"
)
type modelConfigurationSummary struct {
Available bool
Status string
}
var (
probeTCPServiceFunc = probeTCPService
probeOllamaModelFunc = probeOllamaModel
@@ -43,16 +54,17 @@ func hasModelConfiguration(m *config.ModelConfig) bool {
return apiKey != ""
}
// isModelConfigured reports whether a model is currently available to use.
// Local models must be reachable; remote/API-key models only need saved config.
func isModelConfigured(m *config.ModelConfig) bool {
func modelConfigurationStatus(m *config.ModelConfig) modelConfigurationSummary {
if !hasModelConfiguration(m) {
return false
return modelConfigurationSummary{Available: false, Status: modelStatusUnconfigured}
}
if requiresRuntimeProbe(m) {
return probeLocalModelAvailability(m)
if probeLocalModelAvailability(m) {
return modelConfigurationSummary{Available: true, Status: modelStatusAvailable}
}
return modelConfigurationSummary{Available: false, Status: modelStatusUnreachable}
}
return true
return modelConfigurationSummary{Available: true, Status: modelStatusAvailable}
}
func requiresRuntimeProbe(m *config.ModelConfig) bool {
web/backend/api/models.go
+9 -7
View File
@@ -40,10 +40,11 @@ type modelResponse struct {
ThinkingLevel string `json:"thinking_level,omitempty"`
ExtraBody map[string]any `json:"extra_body,omitempty"`
// Meta
Enabled bool `json:"enabled"`
Configured bool `json:"configured"`
IsDefault bool `json:"is_default"`
IsVirtual bool `json:"is_virtual"`
Enabled bool `json:"enabled"`
Available bool `json:"available"`
Status string `json:"status"`
IsDefault bool `json:"is_default"`
IsVirtual bool `json:"is_virtual"`
}
// handleListModels returns all model_list entries with masked API keys.
@@ -57,14 +58,14 @@ func (h *Handler) handleListModels(w http.ResponseWriter, r *http.Request) {
}
defaultModel := cfg.Agents.Defaults.GetModelName()
configured := make([]bool, len(cfg.ModelList))
modelStatuses := make([]modelConfigurationSummary, len(cfg.ModelList))
var wg sync.WaitGroup
wg.Add(len(cfg.ModelList))
for i, m := range cfg.ModelList {
go func(i int, m *config.ModelConfig) {
defer wg.Done()
configured[i] = isModelConfigured(m)
modelStatuses[i] = modelConfigurationStatus(m)
}(i, m)
}
wg.Wait()
@@ -87,7 +88,8 @@ func (h *Handler) handleListModels(w http.ResponseWriter, r *http.Request) {
ThinkingLevel: m.ThinkingLevel,
ExtraBody: m.ExtraBody,
Enabled: m.Enabled,
Configured: configured[i],
Available: modelStatuses[i].Available,
Status: modelStatuses[i].Status,
IsDefault: m.ModelName == defaultModel,
IsVirtual: m.IsVirtual(),
})
web/backend/api/models_test.go
+92 -18
View File
@@ -27,7 +27,7 @@ func resetModelProbeHooks(t *testing.T) {
})
}
func TestHandleListModels_ConfiguredStatusUsesRuntimeProbesForLocalModels(t *testing.T) {
func TestHandleListModels_AvailabilityUsesRuntimeProbesForLocalModels(t *testing.T) {
configPath, cleanup := setupOAuthTestEnv(t)
defer cleanup()
resetOAuthHooks(t)
@@ -113,25 +113,42 @@ func TestHandleListModels_ConfiguredStatusUsesRuntimeProbesForLocalModels(t *tes
t.Fatalf("Unmarshal() error = %v", err)
}
got := make(map[string]bool, len(resp.Models))
gotAvailable := make(map[string]bool, len(resp.Models))
gotStatus := make(map[string]string, len(resp.Models))
for _, model := range resp.Models {
got[model.ModelName] = model.Configured
gotAvailable[model.ModelName] = model.Available
gotStatus[model.ModelName] = model.Status
}
if got["openai-oauth"] {
t.Fatalf("openai oauth model configured = true, want false without stored credential")
if gotAvailable["openai-oauth"] {
t.Fatalf("openai oauth model available = true, want false without stored credential")
}
if !got["vllm-local"] {
t.Fatalf("vllm local model configured = false, want true when local probe succeeds")
if !gotAvailable["vllm-local"] {
t.Fatalf("vllm local model available = false, want true when local probe succeeds")
}
if !got["ollama-default"] {
t.Fatalf("ollama default model configured = false, want true when default local probe succeeds")
if !gotAvailable["ollama-default"] {
t.Fatalf("ollama default model available = false, want true when default local probe succeeds")
}
if !got["vllm-remote"] {
t.Fatalf("remote vllm model configured = false, want true with api_key")
if !gotAvailable["vllm-remote"] {
t.Fatalf("remote vllm model available = false, want true with api_key")
}
if !got["copilot-gpt-5.4"] {
t.Fatalf("copilot model configured = false, want true when local bridge probe succeeds")
if !gotAvailable["copilot-gpt-5.4"] {
t.Fatalf("copilot model available = false, want true when local bridge probe succeeds")
}
if gotStatus["openai-oauth"] != modelStatusUnconfigured {
t.Fatalf("openai oauth model status = %q, want %q", gotStatus["openai-oauth"], modelStatusUnconfigured)
}
if gotStatus["vllm-local"] != modelStatusAvailable {
t.Fatalf("vllm local model status = %q, want %q", gotStatus["vllm-local"], modelStatusAvailable)
}
if gotStatus["ollama-default"] != modelStatusAvailable {
t.Fatalf("ollama default model status = %q, want %q", gotStatus["ollama-default"], modelStatusAvailable)
}
if gotStatus["vllm-remote"] != modelStatusAvailable {
t.Fatalf("remote vllm model status = %q, want %q", gotStatus["vllm-remote"], modelStatusAvailable)
}
if gotStatus["copilot-gpt-5.4"] != modelStatusAvailable {
t.Fatalf("copilot model status = %q, want %q", gotStatus["copilot-gpt-5.4"], modelStatusAvailable)
}
if len(openAIProbes) != 1 || openAIProbes[0] != "http://127.0.0.1:8000/v1|custom-model|" {
t.Fatalf("openAI probes = %#v, want only local vllm probe", openAIProbes)
@@ -144,7 +161,7 @@ func TestHandleListModels_ConfiguredStatusUsesRuntimeProbesForLocalModels(t *tes
}
}
func TestHandleListModels_ConfiguredStatusForOAuthModelWithCredential(t *testing.T) {
func TestHandleListModels_AvailabilityForOAuthModelWithCredential(t *testing.T) {
configPath, cleanup := setupOAuthTestEnv(t)
defer cleanup()
resetOAuthHooks(t)
@@ -193,8 +210,8 @@ func TestHandleListModels_ConfiguredStatusForOAuthModelWithCredential(t *testing
if len(resp.Models) != 1 {
t.Fatalf("len(models) = %d, want 1", len(resp.Models))
}
if !resp.Models[0].Configured {
t.Fatalf("oauth model configured = false, want true with stored credential")
if !resp.Models[0].Available {
t.Fatalf("oauth model available = false, want true with stored credential")
}
}
@@ -306,14 +323,71 @@ func TestHandleListModels_NormalizesWildcardLocalAPIBaseForProbe(t *testing.T) {
if len(resp.Models) != 1 {
t.Fatalf("len(models) = %d, want 1", len(resp.Models))
}
if !resp.Models[0].Configured {
t.Fatal("wildcard-bound local model configured = false, want true after probe host normalization")
if !resp.Models[0].Available {
t.Fatal("wildcard-bound local model available = false, want true after probe host normalization")
}
if gotProbe != "http://127.0.0.1:8000/v1|custom-model|" {
t.Fatalf("probe api base = %q, want %q", gotProbe, "http://127.0.0.1:8000/v1|custom-model|")
}
}
func TestHandleListModels_StatusMarksUnreachableLocalModel(t *testing.T) {
configPath, cleanup := setupOAuthTestEnv(t)
defer cleanup()
resetOAuthHooks(t)
resetModelProbeHooks(t)
probeOpenAICompatibleModelFunc = func(apiBase, modelID, apiKey string) bool {
return false
}
cfg, err := config.LoadConfig(configPath)
if err != nil {
t.Fatalf("LoadConfig() error = %v", err)
}
cfg.ModelList = []*config.ModelConfig{{
ModelName: "vllm-local-down",
Model: "vllm/custom-model",
APIBase: "http://127.0.0.1:8000/v1",
APIKeys: config.SimpleSecureStrings("test-key"),
}}
if err := config.SaveConfig(configPath, cfg); err != nil {
t.Fatalf("SaveConfig() error = %v", err)
}
h := NewHandler(configPath)
mux := http.NewServeMux()
h.RegisterRoutes(mux)
rec := httptest.NewRecorder()
req := httptest.NewRequest(http.MethodGet, "/api/models", nil)
mux.ServeHTTP(rec, req)
if rec.Code != http.StatusOK {
t.Fatalf("status = %d, want %d, body=%s", rec.Code, http.StatusOK, rec.Body.String())
}
var resp struct {
Models []modelResponse `json:"models"`
}
if err := json.Unmarshal(rec.Body.Bytes(), &resp); err != nil {
t.Fatalf("Unmarshal() error = %v", err)
}
if len(resp.Models) != 1 {
t.Fatalf("len(models) = %d, want 1", len(resp.Models))
}
if resp.Models[0].Available {
t.Fatal("unreachable local model available = true, want false")
}
if resp.Models[0].Status != modelStatusUnreachable {
t.Fatalf("unreachable local model status = %q, want %q", resp.Models[0].Status, modelStatusUnreachable)
}
if resp.Models[0].APIKey == "" {
t.Fatal("masked API key preview should still be returned when API key is configured")
}
}
func TestHandleAddModel_PersistsAPIKey(t *testing.T) {
configPath, cleanup := setupOAuthTestEnv(t)
defer cleanup()
web/frontend/src/api/models.ts
+2 -1
View File
@@ -20,7 +20,8 @@ export interface ModelInfo {
thinking_level?: string
extra_body?: Record<string, unknown>
// Meta
configured: boolean
available: boolean
status: "available" | "unconfigured" | "unreachable"
is_default: boolean
is_virtual: boolean
}
web/frontend/src/components/chat/chat-empty-state.tsx
+3 -3
View File
@@ -10,19 +10,19 @@ import { useTranslation } from "react-i18next"
import { Button } from "@/components/ui/button"
interface ChatEmptyStateProps {
hasConfiguredModels: boolean
hasAvailableModels: boolean
defaultModelName: string
isConnected: boolean
}
export function ChatEmptyState({
hasConfiguredModels,
hasAvailableModels,
defaultModelName,
isConnected,
}: ChatEmptyStateProps) {
const { t } = useTranslation()
if (!hasConfiguredModels) {
if (!hasAvailableModels) {
return (
<div className="flex flex-col items-center justify-center py-20 opacity-70">
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-500/10 text-amber-500">
web/frontend/src/components/chat/chat-page.tsx
+3 -3
View File
@@ -39,7 +39,7 @@ export function ChatPage() {
const {
defaultModelName,
hasConfiguredModels,
hasAvailableModels,
apiKeyModels,
oauthModels,
localModels,
@@ -94,7 +94,7 @@ export function ChatPage() {
hasScrolled ? "shadow-sm" : "shadow-none"
}`}
titleExtra={
hasConfiguredModels && (
hasAvailableModels && (
<ModelSelector
defaultModelName={defaultModelName}
apiKeyModels={apiKeyModels}
@@ -140,7 +140,7 @@ export function ChatPage() {
<div className="mx-auto flex w-full max-w-250 flex-col gap-8 pb-8">
{messages.length === 0 && !isTyping && (
<ChatEmptyState
hasConfiguredModels={hasConfiguredModels}
hasAvailableModels={hasAvailableModels}
defaultModelName={defaultModelName}
isConnected={isGatewayRunning}
/>
web/frontend/src/components/models/edit-model-sheet.tsx
+4 -3
View File
@@ -133,9 +133,10 @@ export function EditModelSheet({
}
const isOAuth = model?.auth_method === "oauth"
const apiKeyPlaceholder = model?.configured
const hasSavedAPIKey = Boolean(model?.api_key)
const apiKeyPlaceholder = hasSavedAPIKey
? maskedSecretPlaceholder(
model.api_key,
model?.api_key ?? "",
t("models.field.apiKeyPlaceholderSet"),
)
: t("models.field.apiKeyPlaceholder")
@@ -161,7 +162,7 @@ export function EditModelSheet({
<Field
label={t("models.field.apiKey")}
hint={
model?.configured ? t("models.edit.apiKeyHint") : undefined
hasSavedAPIKey ? t("models.edit.apiKeyHint") : undefined
}
>
<KeyInput
web/frontend/src/components/models/model-card.tsx
+10 -10
View File
@@ -28,14 +28,16 @@ export function ModelCard({
}: ModelCardProps) {
const { t } = useTranslation()
const isOAuth = model.auth_method === "oauth"
const status = model.status
const statusLabel = t(`models.status.${status}`)
const canSetDefault =
model.configured && !model.is_default && !model.is_virtual
model.available && !model.is_default && !model.is_virtual
return (
<div
className={[
"group/card hover:bg-muted/30 relative flex w-full max-w-[36rem] flex-col gap-3 justify-self-start rounded-xl border p-4 transition-colors hover:shadow-xs",
model.configured
model.available
? "border-border/60 bg-card"
: "border-border/50 bg-card/60",
].join(" ")}
@@ -47,15 +49,13 @@ export function ModelCard({
"mt-0.5 h-2 w-2 shrink-0 rounded-full",
model.is_default
? "bg-green-400 shadow-[0_0_0_2px_rgba(74,222,128,0.35)]"
: model.configured
: status === "available"
? "bg-green-500"
: status === "unreachable"
? "bg-amber-500"
: "bg-muted-foreground/25",
].join(" ")}
title={
model.configured
? t("models.status.configured")
: t("models.status.unconfigured")
}
title={statusLabel}
/>
<span className="text-foreground truncate text-sm font-semibold">
{model.model_name}
@@ -127,14 +127,14 @@ export function ModelCard({
<span className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[10px] font-medium">
OAuth
</span>
) : model.configured && model.api_key ? (
) : status === "available" && model.api_key ? (
<span className="text-muted-foreground/70 flex items-center gap-1 font-mono text-[11px]">
<IconKey className="size-3" />
{model.api_key}
</span>
) : (
<span className="text-muted-foreground/50 text-[11px]">
{t("models.status.unconfigured")}
{statusLabel}
</span>
)}
</div>
web/frontend/src/components/models/models-page.tsx
+8 -8
View File
@@ -40,7 +40,7 @@ interface ProviderGroup {
label: string
models: ModelInfo[]
hasDefault: boolean
configuredCount: number
availableCount: number
}
export function ModelsPage() {
@@ -62,8 +62,8 @@ export function ModelsPage() {
const sorted = [...data.models].sort((a, b) => {
if (a.is_default && !b.is_default) return -1
if (!a.is_default && b.is_default) return 1
if (a.configured && !b.configured) return -1
if (!a.configured && b.configured) return 1
if (a.available && !b.available) return -1
if (!a.available && b.available) return 1
return a.model_name.localeCompare(b.model_name)
})
setModels(sorted)
@@ -107,23 +107,23 @@ export function ModelsPage() {
const providerGroups: ProviderGroup[] = Object.entries(grouped)
.map(([key, group]) => {
const configuredCount = group.models.filter(
(model) => model.configured,
const availableCount = group.models.filter(
(model) => model.available,
).length
return {
key,
label: group.label,
models: group.models,
hasDefault: group.models.some((model) => model.is_default),
configuredCount,
availableCount,
}
})
.sort((a, b) => {
if (a.hasDefault && !b.hasDefault) return -1
if (!a.hasDefault && b.hasDefault) return 1
if (a.configuredCount !== b.configuredCount) {
return b.configuredCount - a.configuredCount
if (a.availableCount !== b.availableCount) {
return b.availableCount - a.availableCount
}
const aPriority = PROVIDER_PRIORITY[a.key] ?? Number.MAX_SAFE_INTEGER
web/frontend/src/hooks/use-chat-models.ts
+6 -6
View File
@@ -65,32 +65,32 @@ export function useChatModels({ isConnected }: UseChatModelsOptions) {
[defaultModelName],
)
const hasConfiguredModels = useMemo(
() => modelList.some((m) => m.configured),
const hasAvailableModels = useMemo(
() => modelList.some((m) => m.available),
[modelList],
)
const oauthModels = useMemo(
() => modelList.filter((m) => m.configured && m.auth_method === "oauth"),
() => modelList.filter((m) => m.available && m.auth_method === "oauth"),
[modelList],
)
const localModels = useMemo(
() => modelList.filter((m) => m.configured && isLocalModel(m)),
() => modelList.filter((m) => m.available && isLocalModel(m)),
[modelList],
)
const apiKeyModels = useMemo(
() =>
modelList.filter(
(m) => m.configured && m.auth_method !== "oauth" && !isLocalModel(m),
(m) => m.available && m.auth_method !== "oauth" && !isLocalModel(m),
),
[modelList],
)
return {
defaultModelName,
hasConfiguredModels,
hasAvailableModels,
apiKeyModels,
oauthModels,
localModels,
web/frontend/src/i18n/locales/en.json
+3 -2
View File
@@ -170,8 +170,9 @@
"noDefaultHintPrefix": "No default model set yet. Click",
"noDefaultHintSuffix": "to set one.",
"status": {
"configured": "Configured",
"unconfigured": "Not configured"
"available": "Available",
"unconfigured": "Not configured",
"unreachable": "Service unreachable"
},
"badge": {
"default": "Default",
web/frontend/src/i18n/locales/zh.json
+3 -2
View File
@@ -170,8 +170,9 @@
"noDefaultHintPrefix": "尚未设置默认模型，点击",
"noDefaultHintSuffix": "设为默认。",
"status": {
"configured": "已配置",
"unconfigured": "未配置"
"available": "可用",
"unconfigured": "未配置",
"unreachable": "服务不可达"
},
"badge": {
"default": "默认",