dsh-model-health 0.2.0 → 0.2.2

package/dist/client.js

@@ -17,7 +17,7 @@ window.__ModuleLoader__.load({
         var exports = module.exports;
 
         const React = require("react");
-        const { useState, useEffect, useCallback } = React;
+        const { useState, useEffect, useCallback, useRef } = React;
 
         // ── 多语言词典（locale 服务，语言跟随 harness）─────────────────────────
         const NS = "dsh-model-health";
@@ -48,6 +48,8 @@ window.__ModuleLoader__.load({
             statusOk: "可用",
             statusFail: "不可用",
             statusSkip: "跳过",
+            testOne: "测试",
+            testOneTip: "点击测试此模型",
         };
         const en = {
             tab: "Model Health",
@@ -76,6 +78,8 @@ window.__ModuleLoader__.load({
             statusOk: "Available",
             statusFail: "Unavailable",
             statusSkip: "Skipped",
+            testOne: "Test",
+            testOneTip: "Click to test this model",
         };
 
         // 内联样式（适配 DSH 明暗主题的 CSS 变量）
@@ -139,6 +143,20 @@ window.__ModuleLoader__.load({
                 opacity: 0.5,
                 cursor: "not-allowed",
             },
+            // 状态列里的"测试"小按钮（未测试的模型显示它代替"未测试"文字）
+            btnTestSmall: {
+                boxSizing: "border-box",
+                height: 22,
+                padding: "0 12px",
+                fontSize: 12,
+                lineHeight: "16px",
+                cursor: "pointer",
+                border: "1px solid var(--dsw-alias-button-primary-fill, #4f46e5)",
+                borderRadius: 11,
+                background: "transparent",
+                color: "var(--dsw-alias-button-primary-fill, #4f46e5)",
+                whiteSpace: "nowrap",
+            },
             progress: {
                 fontSize: 12,
                 color: "var(--dsw-alias-label-tertiary, #888)",
@@ -179,33 +197,49 @@ window.__ModuleLoader__.load({
                 fontSize: 12,
                 fontFamily: "var(--ds-font-family-code, monospace)",
             },
-            badge: {
-                display: "inline-block",
-                padding: "2px 8px",
-                borderRadius: 10,
+            statusWrap: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
                 fontSize: 12,
-                fontWeight: 500,
                 whiteSpace: "nowrap",
             },
-            badgeOk: {
-                background: "var(--dsw-alias-state-success-bg, #e6f4ea)",
+            statusTextIdle: {
+                color: "var(--dsw-alias-label-tertiary, #999)",
+            },
+            statusTextTesting: {
+                color: "var(--dsw-alias-state-info-primary, #1967d2)",
+            },
+            statusTextOk: {
                 color: "var(--dsw-alias-state-success-primary, #1e8e3e)",
             },
-            badgeFail: {
-                background: "var(--dsw-alias-state-error-bg, #fce8e6)",
+            statusTextFail: {
                 color: "var(--dsw-alias-state-error-primary, #d32f2f)",
             },
-            badgeTesting: {
-                background: "var(--dsw-alias-state-info-bg, #e8f0fe)",
-                color: "var(--dsw-alias-state-info-primary, #1967d2)",
-            },
-            badgeSkip: {
-                background: "var(--dsw-alias-bg-layer-2, #f0f0f0)",
+            statusTextSkip: {
                 color: "var(--dsw-alias-label-tertiary, #888)",
             },
-            badgeIdle: {
-                background: "var(--dsw-alias-bg-layer-2, #f0f0f0)",
-                color: "var(--dsw-alias-label-tertiary, #999)",
+            dot: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                flex: "none",
+            },
+            dotIdle: {
+                background: "var(--dsw-alias-label-dimmed, #bbb)",
+            },
+            dotTesting: {
+                background: "var(--dsw-alias-state-info-primary, #1967d2)",
+                animation: "dsmh-pulse 1s ease-in-out infinite",
+            },
+            dotOk: {
+                background: "var(--dsw-alias-state-success-primary, #1e8e3e)",
+            },
+            dotFail: {
+                background: "var(--dsw-alias-state-error-primary, #d32f2f)",
+            },
+            dotSkip: {
+                background: "var(--dsw-alias-label-dimmed, #bbb)",
             },
             center: {
                 textAlign: "center",
@@ -265,13 +299,31 @@ window.__ModuleLoader__.load({
             fail: "statusFail",
             skip: "statusSkip",
         };
-        const STATUS_STYLE = {
-            idle: STYLES.badgeIdle,
-            testing: STYLES.badgeTesting,
-            ok: STYLES.badgeOk,
-            fail: STYLES.badgeFail,
-            skip: STYLES.badgeSkip,
+        // 状态 → 圆点颜色 / 文字颜色映射（圆点 + 彩色文字；测试中圆点带脉冲动画）
+        const STATUS_DOT_STYLE = {
+            idle: STYLES.dotIdle,
+            testing: STYLES.dotTesting,
+            ok: STYLES.dotOk,
+            fail: STYLES.dotFail,
+            skip: STYLES.dotSkip,
         };
+        const STATUS_TEXT_STYLE = {
+            idle: STYLES.statusTextIdle,
+            testing: STYLES.statusTextTesting,
+            ok: STYLES.statusTextOk,
+            fail: STYLES.statusTextFail,
+            skip: STYLES.statusTextSkip,
+        };
+
+        /** 注入测试中圆点的脉冲动画 keyframes（内联样式无法定义 @keyframes）。 */
+        function ensureStatusCss() {
+            const id = "dsh-model-health-status-style";
+            if (document.getElementById(id)) return;
+            const el = document.createElement("style");
+            el.id = id;
+            el.textContent = "@keyframes dsmh-pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }";
+            document.head.appendChild(el);
+        }
 
         /**
          * 模型列表 section 组件。
@@ -321,6 +373,9 @@ window.__ModuleLoader__.load({
             // 初始值从 localStorage 读取，实现跨刷新持久化
             const [testResults, setTestResults] = useState(loadStoredResults);
             const [testing, setTesting] = useState(false);
+            // 请求序号：同一模型重复触发测试（单测 + 测试全部并发）时，
+            // 只有最新一次请求的结果允许写入，避免旧响应覆盖新状态
+            const seqRef = useRef({});
             const [progress, setProgress] = useState({ done: 0, total: 0 });
             // 可选列显示状态：{ [colKey]: boolean }，默认 false
             const [optionalCols, setOptionalCols] = useState({});
@@ -352,6 +407,42 @@ window.__ModuleLoader__.load({
                 loadData();
             }, [loadData]);
 
+            // 测试单个模型：该行置为 testing → POST /api/model-health/test → 写回结果
+            // （"测试全部"与状态列的"测试"按钮共用此逻辑）
+            const testModel = useCallback(async (key) => {
+                const seq = (seqRef.current[key] || 0) + 1;
+                seqRef.current[key] = seq;
+                setTestResults((s) => ({ ...s, [key]: { status: "testing" } }));
+
+                let result;
+                try {
+                    const resp = await fetch("/api/model-health/test", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ key }),
+                        cache: "no-store",
+                    });
+                    const json = await resp.json();
+                    result = !json.ok
+                        ? { status: "fail", error: json.error }
+                        : {
+                            status: json.status || "fail",
+                            latency: json.latency,
+                            error: json.error,
+                        };
+                } catch (e) {
+                    result = { status: "fail", error: e.message };
+                }
+
+                // 期间若同一模型又发起了更新的测试，丢弃这份过期结果
+                if (seqRef.current[key] !== seq) return;
+                setTestResults((s) => {
+                    const next = { ...s, [key]: result };
+                    saveStoredResults(next);
+                    return next;
+                });
+            }, []);
+
             // 测试全部：并发发起所有测试请求，每个完成即更新对应行状态
             const testAll = useCallback(async () => {
                 const data = state.data;
@@ -359,59 +450,20 @@ window.__ModuleLoader__.load({
                 const total = data.models.length;
                 setTesting(true);
                 setProgress({ done: 0, total });
-                // 初始化所有为 testing（按 provider/modelId key）
-                const init = {};
-                for (const m of data.models) init[m.key] = { status: "testing" };
-                setTestResults(init);
-                saveStoredResults(init);
 
                 let done = 0;
                 // 并发测试，但限制并发数避免压垮 host/网络
                 const CONCURRENCY = 6;
                 const queue = data.models.map((m) => m.key);
 
-                // 更新单个结果并同步到 localStorage
-                function updateResult(key, result) {
-                    setTestResults((s) => {
-                        const next = { ...s, [key]: result };
-                        saveStoredResults(next);
-                        return next;
-                    });
-                }
-
-                async function runOne(key) {
-                    try {
-                        const resp = await fetch("/api/model-health/test", {
-                            method: "POST",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify({ key }),
-                            cache: "no-store",
-                        });
-                        const json = await resp.json();
-                        if (!json.ok) {
-                            updateResult(key, { status: "fail", error: json.error });
-                        } else {
-                            updateResult(key, {
-                                status: json.status || "fail",
-                                latency: json.latency,
-                                error: json.error,
-                            });
-                        }
-                    } catch (e) {
-                        updateResult(key, { status: "fail", error: e.message });
-                    } finally {
-                        done++;
-                        setProgress({ done, total });
-                        if (done >= total) setTesting(false);
-                    }
-                }
-
-                // 限制并发的 worker pool
                 async function worker() {
                     while (queue.length > 0) {
                         const key = queue.shift();
                         if (key === undefined) break;
-                        await runOne(key);
+                        await testModel(key);
+                        done++;
+                        setProgress({ done, total });
+                        if (done >= total) setTesting(false);
                     }
                 }
                 const workers = Array.from(
@@ -419,7 +471,7 @@ window.__ModuleLoader__.load({
                     () => worker()
                 );
                 await Promise.all(workers);
-            }, [state.data]);
+            }, [state.data, testModel]);
 
             const h = React.createElement;
 
@@ -562,7 +614,8 @@ window.__ModuleLoader__.load({
                                     const tr = testResults[row.key] || { status: "idle" };
                                     const labelKey = STATUS_LABEL[tr.status];
                                     const statusLabel = labelKey ? t(labelKey) : tr.status;
-                                    const statusStyle = STATUS_STYLE[tr.status] || STYLES.badgeIdle;
+                                    const dotStyle = STATUS_DOT_STYLE[tr.status] || STYLES.dotIdle;
+                                    const textStyle = STATUS_TEXT_STYLE[tr.status] || STYLES.statusTextIdle;
                                     const latencyText = tr.latency != null ? `${tr.latency}ms` : "-";
                                     return h("tr", { key: (row.modelId || "") + i },
                                         visibleCols.map((col) => {
@@ -576,6 +629,19 @@ window.__ModuleLoader__.load({
                                                 }, row.provider);
                                             }
                                             if (col.key === "_status") {
+                                                // 未测试：显示可点击的"测试"按钮，点击即测单个模型
+                                                if (tr.status === "idle") {
+                                                    return h("td", {
+                                                        key: col.key,
+                                                        style: STYLES.td,
+                                                    },
+                                                        h("button", {
+                                                            style: STYLES.btnTestSmall,
+                                                            title: t("testOneTip"),
+                                                            onClick: () => testModel(row.key),
+                                                        }, t("testOne"))
+                                                    );
+                                                }
                                                 const hasError = tr.error && tr.status === "fail";
                                                 return h("td", {
                                                     key: col.key,
@@ -583,8 +649,8 @@ window.__ModuleLoader__.load({
                                                 },
                                                     h("span", {
                                                         style: {
-                                                            ...STYLES.badge,
-                                                            ...statusStyle,
+                                                            ...STYLES.statusWrap,
+                                                            ...textStyle,
                                                             cursor: hasError ? "help" : "default",
                                                         },
                                                         onMouseEnter: hasError
@@ -607,7 +673,9 @@ window.__ModuleLoader__.load({
                                                         onMouseLeave: hasError
                                                             ? () => setTooltip(null)
                                                             : undefined,
-                                                    }, statusLabel)
+                                                    },
+                                                        h("span", { style: { ...STYLES.dot, ...dotStyle } }),
+                                                        statusLabel)
                                                 );
                                             }
                                             if (col.key === "_latency") {
@@ -662,6 +730,7 @@ window.__ModuleLoader__.load({
          * @param {import('@deepseek-ai/dsh-client-runtime/client').ClientContext} ctx
          */
         function apply(ctx) {
+            ensureStatusCss();
             // 注册 zh/en 词典；t 每次调用读取当前激活语言
             ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-model-health: dictionaries");
             const t = ctx.locale.bind(NS);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-health",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "DSH plugin that lists all configured models with availability/latency testing, by reading $DSH_HOME/settings.yaml.",
   "license": "MIT",
   "repository": {