dsh-kylin-media 0.1.0 → 0.2.0

package/README.md

@@ -50,13 +50,22 @@ npm publish          # prepack 会自动跑 smoke
 
 | 项 | 说明 |
 |---|---|
-| 网关地址 | 默认 `http://127.0.0.1:8288`；局域网用 `http://<主机IP>:8288`，frp / 反代填对外地址 |
+| 网关地址 | 默认 `http://127.0.0.1:8288`；局域网用 `http://<主机IP>:8288`，frp / 反代填对外地址。编辑的是「当前线路」的地址 |
+| 连接线路 | 可同时保存多条地址（本机 / 局域网 / frp 公网），点圆点切换当前线路，「测试连接」与所有 `media_*` 都用它；「全部测速」并发探测每条线路并标出最快可用的那条 |
 | 访问 Key | 网关 `API_KEY_MODE=always` 时必填；保存后不再回显明文，留空表示沿用已保存的值 |
 | 单次最多等待 | 工具调用内等待任务的秒数（10-600）；超时不影响网关侧任务，可继续用 `media_job` |
 | 产物目录 | 留空 = `<会话目录>/media-output/<任务 id>/`；也可填绝对路径 |
 | 自动下载 | 关闭后只返回远端 URL，用 `media_job action=download` 取回 |
+| 默认模型 | 「可用能力」卡片里逐类型列出网关实时目录中的模型，点选即设为该类型默认模型并立即保存；`media_*` 未传 `model` 时用它，没选则用该类型第一个可用模型 |
 
-页面上的「测试连接」会读取 `/api/health` 与 `/api/models`，显示网关版本、鉴权模式、ComfyUI 与双卡队列、各类型可用模型数。连接失败时会给出排查提示。
+页面上的「测试连接」会读取 `/api/health` 与 `/api/models`，显示网关版本、鉴权模式、ComfyUI 与双卡队列，并按能力类型列出具体模型（含可用性与权重缺失），可直接点选默认模型。连接失败时会给出排查提示。
+
+> 常见坑：网关默认监听明文 HTTP（`API_PORT=8288`）。frp / 反代把 8288 映射出去后仍然是 HTTP，地址要写 `http://<对外地址>:<端口>`；写成 `https://` 会在 TLS 握手阶段被断开，错误信息里会提示「这个端口没有完成 TLS 握手…把地址改成 http:// 再试」。反过来，如果前面套了 nginx / Caddy 的 HTTPS，则必须写 `https://`（自签证书还需要让运行宿主信任该 CA）。
+
+> 为什么「本机 / 局域网」地址连不上：
+> 1. `127.0.0.1` / `localhost` 只有**网关和插件跑在同一台机器**时才通。网关在远端（例如 Windows 主机）而插件在 Mac 上时，本机地址必然被拒绝。
+> 2. 局域网地址要求两者**在同一网段**，且网关监听 `HOST=0.0.0.0`（默认）、系统防火墙放行 8288（仓库里有 `add-firewall-rule.bat`）。可先用 `curl http://<主机IP>:8288/api/health` 验证。
+> 3. 上面两条都不满足时只能用 frp / 公网地址。把三条地址都加进「连接线路」，点「全部测速」即可看出哪条通、哪条最快；失败原因直接写在行内（拒绝连接 / 不可达 / 域名解析失败 / 协议写反）。
 
 ## 工具
 
@@ -105,10 +114,12 @@ media_audio action=speech text="你好，这是本地语音合成。" format=mp3
 
 ```bash
 cd dsh-kylin-media
-npm test        # smoke（包契约 + 客户端自注册 + locale/icon/技能） + selftest（mock ctx + mock 网关）
+npm test        # smoke（包契约 + 客户端自注册 + locale/icon/技能）+ selftest（mock ctx + mock 网关）+ client-test（渲染自测）
 ```
 
-`selftest` 会用临时 HOME 与 `127.0.0.1` 上的 mock 网关跑完整链路：设置持久化、403 / 400 / 404 / 405 围栏、模型选择、提交轮询、产物下载、鉴权头、注册与卸载。
+`selftest` 会用临时 HOME 与 `127.0.0.1` 上的 mock 网关跑完整链路：设置持久化、403 / 400 / 404 / 405 围栏、默认模型选择与回退、提交轮询、产物下载、鉴权头、注册与卸载。
+
+`client-test` 用最小 React 替身渲染设置页的「可用能力」卡片：类型卡片列出具体模型、默认模型高亮、点选后 POST `settings.update`、缺权重模型不可选，且渲染树不含明文 Key。
 
 ## 目录
 
@@ -126,7 +137,7 @@ dsh-kylin-media/
 │   └── routes.js       # fenced JSON API
 ├── skills/kylin-media/ # 随包技能
 ├── locale/             # 插件管理器展示元数据
-└── scripts/            # smoke / selftest
+└── scripts/            # smoke / selftest / client-test
 ```
 
 ## License

package/client.js

@@ -38,6 +38,24 @@ window.__ModuleLoader__.load({
       testing: '测试中…',
       clearKey: '清除 Key',
       cleared: '已清除访问 Key',
+      lines: '连接线路',
+      linesHint: '点左侧圆点切换当前线路（测试与工具都用它）；「测速」只查连通性。127.0.0.1 / localhost 只有当网关跑在同一台机器时才通，局域网地址要同网段且防火墙放行端口。',
+      lineAdd: '把当前地址加为线路',
+      lineTest: '测速',
+      linesUnavailable: '当前宿主版本还不支持线路管理：重启宿主（插件 0.2.0）后这里会显示可切换的线路。',
+      lineTestAll: '全部测速',
+      lineTesting: '测速中…',
+      lineFailed: '失败',
+      lineActive: '当前线路',
+      lineSwitch: '切换为当前线路',
+      lineRemove: '删除线路',
+      lineSwitched: '已切换到该线路',
+      lineAdded: '已添加线路',
+      lineRemoved: '已删除线路',
+      lineExists: '这个地址已经在列表里了',
+      lineKeepOne: '至少要保留一条线路',
+      noLineReachable: '所有线路都不通：检查网关是否运行、地址/端口是否正确、防火墙是否放行',
+      fastestLine: '最快线路：',
       saved: '已保存',
       failed: '操作失败：',
       loadFailed: '配置加载失败，请确认插件已激活后重试。',
@@ -60,7 +78,13 @@ window.__ModuleLoader__.load({
       noKey: '未配置访问 Key',
       keyConfigured: '访问 Key 已配置',
       capabilities: '可用能力',
-      capabilitiesSub: '来自网关 /api/models 的实时目录。灰色表示模型文件缺失，需要服务方补齐权重。',
+      capabilitiesSub: '来自网关 /api/models 的实时目录。点选一个模型即设为该能力的默认模型，media_* 工具没传 model 时用它；灰色表示权重缺失。',
+      modelsAuto: '自动（第一个可用模型）',
+      modelsStale: '已选：',
+      modelsEmpty: '没有注册模型',
+      missingWeights: '缺权重',
+      defaultSaved: '默认模型已更新',
+      defaultFailed: '默认模型保存失败：',
       behavior: '任务与产物',
       behaviorSub: '这些默认值对所有 media_* 工具生效。',
       waitSeconds: '单次最多等待（秒）',
@@ -76,7 +100,7 @@ window.__ModuleLoader__.load({
       available: '可用',
       unprofiled: '未注册权重',
       noCatalog: '尚未读取到能力目录，点「测试连接」重试。',
-      unreachableHint: '检查网关是否已启动、地址是否正确；若网关是 always 模式，还需填写正确的访问 Key。',
+      unreachableHint: '检查网关是否已启动、地址是否正确；若网关是 always 模式，还需填写正确的访问 Key。https:// 与 http:// 写反也会连不上（错误信息里会提示）。',
       testFailed: '连接测试没有通过。',
       keyRequired: '请先填写访问 Key（网关可能要求鉴权）。',
       type_text2image: '文生图',
@@ -109,6 +133,24 @@ window.__ModuleLoader__.load({
       testing: 'Testing…',
       clearKey: 'Clear key',
       cleared: 'Access key cleared',
+      lines: 'Connection lines',
+      linesHint: 'Click the dot to switch the active line (tests and tools use it). "Test" only checks reachability. 127.0.0.1 / localhost works only when the gateway runs on this machine; a LAN address needs the same subnet and an open firewall port.',
+      lineAdd: 'Add current address as a line',
+      lineTest: 'Test',
+      linesUnavailable: 'This host does not support connection lines yet: restart the host (plugin 0.2.0) to manage and switch lines here.',
+      lineTestAll: 'Test all',
+      lineTesting: 'Testing…',
+      lineFailed: 'failed',
+      lineActive: 'Active line',
+      lineSwitch: 'Switch to this line',
+      lineRemove: 'Remove line',
+      lineSwitched: 'Switched to this line',
+      lineAdded: 'Line added',
+      lineRemoved: 'Line removed',
+      lineExists: 'That address is already in the list',
+      lineKeepOne: 'Keep at least one line',
+      noLineReachable: 'No line is reachable: check the gateway process, address/port and firewall',
+      fastestLine: 'Fastest line: ',
       saved: 'Saved',
       failed: 'Operation failed: ',
       loadFailed: 'Failed to load settings. Make sure the plugin is active, then retry.',
@@ -131,7 +173,13 @@ window.__ModuleLoader__.load({
       noKey: 'No access key',
       keyConfigured: 'Access key configured',
       capabilities: 'Capabilities',
-      capabilitiesSub: 'Live catalogue from the gateway /api/models. Grey means model files are missing and the operator must add the weights.',
+      capabilitiesSub: 'Live catalogue from the gateway /api/models. Pick a model to make it the default for that capability; media_* tools use it when model is omitted. Grey means the weights are missing.',
+      modelsAuto: 'Auto (first available model)',
+      modelsStale: 'Selected: ',
+      modelsEmpty: 'No registered models',
+      missingWeights: 'weights missing',
+      defaultSaved: 'Default model updated',
+      defaultFailed: 'Failed to save the default model: ',
       behavior: 'Jobs and artifacts',
       behaviorSub: 'These defaults apply to every media_* tool.',
       waitSeconds: 'Max wait per call (s)',
@@ -147,7 +195,7 @@ window.__ModuleLoader__.load({
       available: 'available',
       unprofiled: 'unprofiled weights',
       noCatalog: 'No catalogue yet — run "Test connection" again.',
-      unreachableHint: 'Check that the gateway is running and the address is right; if it uses always mode, also check the access key.',
+      unreachableHint: 'Check that the gateway is running and the address is right; if it uses always mode, also check the access key. A mismatched https:// or http:// scheme also fails to connect (the error says which).',
       testFailed: 'Connection test did not pass.',
       keyRequired: 'Enter the access key first (the gateway may require auth).',
       type_text2image: 'Text to image',
@@ -201,6 +249,20 @@ window.__ModuleLoader__.load({
         '.km-hint{font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary,#8a919c)}',
         '.km-keyrow{display:flex;gap:8px;align-items:stretch}',
         '.km-keyrow input{flex:1;min-width:0}',
+        '.km-lines{display:flex;flex-direction:column;gap:6px;margin-top:8px}',
+        '.km-line{display:flex;align-items:center;gap:10px;border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.22));border-radius:var(--dsw-radius-sm,8px);padding:7px 10px;background:var(--dsw-alias-bg-layer-1,transparent);min-width:0}',
+        '.km-line[data-active=true]{border-color:var(--dsw-alias-brand-primary,#4c7dff);background:color-mix(in srgb, var(--dsw-alias-brand-primary,#4c7dff) 9%, transparent)}',
+        '.km-line-radio{appearance:none;flex:none;width:14px;height:14px;padding:0;border-radius:50%;border:1px solid var(--dsw-alias-border-l3,rgba(127,127,127,.45));background:transparent;cursor:pointer;position:relative}',
+        '.km-line-radio[data-active=true]{border-color:var(--dsw-alias-brand-primary,#4c7dff)}',
+        '.km-line-radio[data-active=true]::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--dsw-alias-brand-primary,#4c7dff)}',
+        '.km-line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}',
+        '.km-line-name{font-size:12px;color:var(--dsw-alias-label-primary,#1f2329)}',
+        '.km-line-url{font-family:var(--dsw-font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:11px;color:var(--dsw-alias-label-tertiary,#8a919c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.km-line-status{flex:none;font-size:11px;color:var(--dsw-alias-label-tertiary,#8a919c);white-space:nowrap}',
+        '.km-line-status[data-state=ok]{color:var(--dsw-alias-state-success-primary,#2f8f5b)}',
+        '.km-line-status[data-state=error]{color:var(--dsw-alias-state-error-primary,#d9534f)}',
+        '.km-line-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}',
+        '.km-btn-mini{padding:4px 9px;font-size:11.5px;line-height:1.2}',
         '.km-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.12))}',
         '.km-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.25));background:transparent;color:var(--dsw-alias-label-primary,#1f2329);border-radius:var(--dsw-radius-sm,8px);padding:7px 14px;font:inherit;font-size:13px;line-height:1.2;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}',
         '.km-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.07));border-color:var(--dsw-alias-border-l3,rgba(127,127,127,.4))}',
@@ -216,11 +278,25 @@ window.__ModuleLoader__.load({
         '.km-state{margin-top:14px;font-size:12.5px;line-height:1.75;color:var(--dsw-alias-label-secondary,#5c6470);padding:10px 12px;border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.12));border-left:3px solid var(--dsw-alias-border-l3,rgba(127,127,127,.3));border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-bg-layer-1,transparent)}',
         '.km-state[data-kind=ok]{border-left-color:var(--dsw-alias-state-success-primary,#2f8f5b)}',
         '.km-state[data-kind=error]{color:var(--dsw-alias-state-error-primary,#d9534f);border-left-color:var(--dsw-alias-state-error-primary,#d9534f)}',
-        '.km-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}',
+        '.km-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}',
         '.km-tile{border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.22));border-radius:var(--dsw-radius-sm,10px);padding:11px 12px;background:var(--dsw-alias-bg-layer-1,transparent);display:flex;flex-direction:column;gap:5px;min-width:0}',
         '.km-tile strong{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary,#1f2329)}',
-        '.km-tile span{font-size:11.5px;color:var(--dsw-alias-label-tertiary,#8a919c)}',
+        '.km-tile>span,.km-tile-head span{font-size:11.5px;color:var(--dsw-alias-label-tertiary,#8a919c)}',
         '.km-tile[data-state=missing]{opacity:.55}',
+        '.km-tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}',
+        '.km-tile-models{gap:8px}',
+        '.km-models{display:flex;flex-direction:column;gap:1px}',
+        '.km-model{appearance:none;display:flex;align-items:center;gap:7px;width:100%;box-sizing:border-box;background:transparent;border:1px solid transparent;border-radius:var(--dsw-radius-sm,8px);padding:4px 6px;font:inherit;font-size:11.5px;line-height:1.45;color:var(--dsw-alias-label-secondary,#5c6470);text-align:left;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}',
+        '.km-model:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.07))}',
+        '.km-model:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4c7dff);outline-offset:1px}',
+        '.km-model[data-selected=true]{border-color:var(--dsw-alias-brand-primary,#4c7dff);color:var(--dsw-alias-label-primary,#1f2329);background:color-mix(in srgb, var(--dsw-alias-brand-primary,#4c7dff) 12%, transparent)}',
+        '.km-model[data-disabled=true]{opacity:.5;cursor:not-allowed}',
+        '.km-model-radio{width:11px;height:11px;flex:none;border-radius:50%;border:1px solid var(--dsw-alias-border-l3,rgba(127,127,127,.45));position:relative}',
+        '.km-model[data-selected=true] .km-model-radio{border-color:var(--dsw-alias-brand-primary,#4c7dff)}',
+        '.km-model[data-selected=true] .km-model-radio::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--dsw-alias-brand-primary,#4c7dff)}',
+        '.km-model-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:inherit}',
+        '.km-model-badge{flex:none;font-size:10px;line-height:1;padding:2px 5px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.3));color:var(--dsw-alias-label-tertiary,#8a919c)}',
+        '.km-model-empty,.km-model-stale{font-size:11px;line-height:1.5;color:var(--dsw-alias-label-tertiary,#8a919c)}',
         '.km-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary,#5c6470);cursor:pointer}',
         '.km-check input{width:15px;height:15px;margin:1px 0 0;accent-color:var(--dsw-alias-brand-primary,#4c7dff);flex:none;cursor:pointer}',
         '.km-foot{margin:0;color:var(--dsw-alias-label-tertiary,#8a919c);font-size:11.5px;line-height:1.7}',
@@ -233,14 +309,24 @@ window.__ModuleLoader__.load({
       return function () { if (style.parentNode) style.parentNode.removeChild(style); };
     }
 
+    /* 写操作一律 POST：路由只放行 GET 的 state，其余动作 GET 会被 405 拒绝，
+       所以这里绝不按「有没有 body」决定方法。 */
     function request(action, body) {
-      var options = { headers: { accept: 'application/json' } };
-      if (body !== undefined) {
-        options.method = 'POST';
-        options.headers['content-type'] = 'application/json';
-        options.body = JSON.stringify(body);
-      }
-      return fetch(API + '/' + action, options).then(function (response) {
+      var payload = body === undefined ? {} : body;
+      return fetch(API + '/' + action, {
+        method: 'POST',
+        headers: { accept: 'application/json', 'content-type': 'application/json' },
+        body: JSON.stringify(payload)
+      }).then(function (response) {
+        return response.json().catch(function () {
+          return { ok: false, error: { code: 'http-' + response.status, message: 'HTTP ' + response.status } };
+        });
+      });
+    }
+
+    /* 只读查询（目前只有 state 允许 GET）。 */
+    function query(action) {
+      return fetch(API + '/' + action, { headers: { accept: 'application/json' } }).then(function (response) {
         return response.json().catch(function () {
           return { ok: false, error: { code: 'http-' + response.status, message: 'HTTP ' + response.status } };
         });
@@ -282,10 +368,188 @@ window.__ModuleLoader__.load({
       var busyHook = React.useState(false);
       var busy = busyHook[0];
       var setBusy = busyHook[1];
+      var defsHook = React.useState({});
+      var defaults = defsHook[0];
+      var setDefaults = defsHook[1];
+      var modelNoticeHook = React.useState(null);
+      var modelNotice = modelNoticeHook[0];
+      var setModelNotice = modelNoticeHook[1];
+      var linesHook = React.useState({});
+      var lineResults = linesHook[0];
+      var setLineResults = linesHook[1];
+      var linesBusyHook = React.useState(false);
+      var linesBusy = linesBusyHook[0];
+      var setLinesBusy = linesBusyHook[1];
+
+      /* 点选即保存：{ type: modelId }，空串表示回到「自动」。 */
+      function selectModel(type, modelId) {
+        var previous = defaults;
+        var next = Object.assign({}, defaults);
+        if (modelId === '') delete next[type];
+        else next[type] = modelId;
+        setDefaults(next);
+        setModelNotice(null);
+        request('settings.update', { patch: { defaultModels: next } }).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          setSnapshot(function (current) {
+            if (current === null || current.data === null || current.data === undefined) return current;
+            return Object.assign({}, current, {
+              data: Object.assign({}, current.data, { defaultModels: next })
+            });
+          });
+          setModelNotice({ kind: 'ok', text: t('defaultSaved') });
+        }).catch(function (error) {
+          setDefaults(previous);
+          setModelNotice({ kind: 'error', text: t('defaultFailed') + (error && error.message ? error.message : String(error)) });
+        });
+      }
+
+      function hostOf(url) {
+        try { return new URL(url).host || url; } catch (error) { return url; }
+      }
+
+      function setLineResult(id, value) {
+        setLineResults(function (previous) {
+          var next = Object.assign({}, previous);
+          next[id] = value;
+          return next;
+        });
+      }
+
+      /* 线路相关的接口都会返回最新 publicState：直接落到快照与地址输入框。 */
+      function applyState(state) {
+        setSnapshot({ status: 'ready', data: state, error: null });
+        setDefaults(state.defaultModels || {});
+        setDraft(function (previous) {
+          if (previous === null) {
+            return {
+              baseUrl: state.baseUrl,
+              waitSeconds: String(state.waitSeconds),
+              outputDir: state.outputDir,
+              autoDownload: state.autoDownload
+            };
+          }
+          return Object.assign({}, previous, { baseUrl: state.baseUrl });
+        });
+      }
+
+      function selectEndpoint(id) {
+        if (busy || linesBusy) return;
+        setNotice(null);
+        request('endpoints.select', { id: id }).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          applyState(payload.value);
+          setNotice({ kind: 'ok', text: t('lineSwitched') });
+          runTest();
+        }).catch(function (error) {
+          setNotice({ kind: 'error', text: t('failed') + (error && error.message ? error.message : String(error)) });
+        });
+      }
+
+      function probeLine(id) {
+        setLineResult(id, { status: 'loading' });
+        request('endpoints.probe', { id: id }).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          var value = payload.value;
+          setLineResult(id, value.reachable
+            ? { status: 'ok', latencyMs: value.latencyMs, message: '' }
+            : { status: 'error', latencyMs: value.latencyMs, message: value.error ? value.error.message : '' });
+        }).catch(function (error) {
+          setLineResult(id, { status: 'error', message: error && error.message ? error.message : String(error) });
+        });
+      }
+
+      function currentLines() {
+        return Array.isArray(data.endpoints) ? data.endpoints : [];
+      }
+
+      function probeAll() {
+        if (linesBusy) return;
+        var lines = currentLines();
+        if (lines.length === 0) return;
+        setLinesBusy(true);
+        setNotice(null);
+        var pending = {};
+        for (var index = 0; index < lines.length; index += 1) pending[lines[index].id] = { status: 'loading' };
+        setLineResults(pending);
+        request('endpoints.probeAll', {}).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          var next = {};
+          var best = null;
+          for (var probe = 0; probe < payload.value.results.length; probe += 1) {
+            var result = payload.value.results[probe];
+            next[result.id] = result.reachable
+              ? { status: 'ok', latencyMs: result.latencyMs, message: '' }
+              : { status: 'error', latencyMs: result.latencyMs, message: result.error ? result.error.message : '' };
+            if (result.reachable && (best === null || result.latencyMs < best.latencyMs)) best = result;
+          }
+          setLineResults(next);
+          if (best === null) setNotice({ kind: 'error', text: t('noLineReachable') });
+          else setNotice({ kind: 'ok', text: t('fastestLine') + best.name + ' · ' + String(best.latencyMs) + 'ms' });
+        }).catch(function (error) {
+          setNotice({ kind: 'error', text: t('failed') + (error && error.message ? error.message : String(error)) });
+        }).then(function () {
+          setLinesBusy(false);
+        });
+      }
+
+      function addLine() {
+        if (linesBusy || draft === null) return;
+        var url = String(draft.baseUrl || '').trim().replace(/\/+$/, '');
+        if (url === '') return;
+        var lines = currentLines();
+        for (var index = 0; index < lines.length; index += 1) {
+          if (lines[index].baseUrl === url) {
+            setNotice({ kind: 'error', text: t('lineExists') });
+            return;
+          }
+        }
+        setLinesBusy(true);
+        setNotice(null);
+        request('settings.update', { patch: { endpoints: lines.concat([{ name: hostOf(url), baseUrl: url }]) } }).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          applyState(payload.value);
+          setNotice({ kind: 'ok', text: t('lineAdded') });
+        }).catch(function (error) {
+          setNotice({ kind: 'error', text: t('failed') + (error && error.message ? error.message : String(error)) });
+        }).then(function () {
+          setLinesBusy(false);
+        });
+      }
+
+      function removeLine(id) {
+        if (linesBusy) return;
+        var lines = currentLines();
+        var kept = [];
+        var removedActive = false;
+        for (var index = 0; index < lines.length; index += 1) {
+          if (lines[index].id === id) {
+            removedActive = lines[index].id === data.activeEndpointId;
+            continue;
+          }
+          kept.push(lines[index]);
+        }
+        if (kept.length === 0) {
+          setNotice({ kind: 'error', text: t('lineKeepOne') });
+          return;
+        }
+        setLinesBusy(true);
+        setNotice(null);
+        request('settings.update', { patch: { endpoints: kept } }).then(function (payload) {
+          if (!payload.ok) throw new Error(payloadError(payload));
+          applyState(payload.value);
+          setNotice({ kind: 'ok', text: t('lineRemoved') });
+          if (removedActive) runTest();
+        }).catch(function (error) {
+          setNotice({ kind: 'error', text: t('failed') + (error && error.message ? error.message : String(error)) });
+        }).then(function () {
+          setLinesBusy(false);
+        });
+      }
 
       function runTest() {
         setTest({ status: 'loading', data: null, error: null });
-        request('test').then(function (payload) {
+        request('test', {}).then(function (payload) {
           if (!payload.ok) throw new Error(payloadError(payload));
           setTest({ status: 'ready', data: payload.value, error: null });
         }).catch(function (error) {
@@ -295,9 +559,10 @@ window.__ModuleLoader__.load({
 
       function load() {
         setSnapshot({ status: 'loading', data: null, error: null });
-        request('state').then(function (payload) {
+        query('state').then(function (payload) {
           if (!payload.ok) throw new Error(payloadError(payload));
           setSnapshot({ status: 'ready', data: payload.value, error: null });
+          setDefaults(payload.value.defaultModels || {});
           setDraft({
             baseUrl: payload.value.baseUrl,
             waitSeconds: String(payload.value.waitSeconds),
@@ -342,10 +607,11 @@ window.__ModuleLoader__.load({
         }).then(function (payload) {
           if (payload !== null && !payload.ok) throw new Error(payloadError(payload));
           setKeyInput('');
-          return request('state');
+          return query('state');
         }).then(function (payload) {
           if (!payload.ok) throw new Error(payloadError(payload));
           setSnapshot({ status: 'ready', data: payload.value, error: null });
+          setDefaults(payload.value.defaultModels || {});
           setNotice({ kind: 'ok', text: t('saved') });
           runTest();
         }).catch(function (error) {
@@ -359,7 +625,7 @@ window.__ModuleLoader__.load({
         if (busy) return;
         setBusy(true);
         setNotice(null);
-        request('key.clear').then(function (payload) {
+        request('key.clear', {}).then(function (payload) {
           if (!payload.ok) throw new Error(payloadError(payload));
           setKeyInput('');
           setSnapshot({ status: 'ready', data: payload.value, error: null });
@@ -394,6 +660,7 @@ window.__ModuleLoader__.load({
         }
       }
 
+      var endpoints = Array.isArray(data.endpoints) ? data.endpoints : null;
       var connectionCard = React.createElement('section', { className: 'km-card' },
         React.createElement('div', { className: 'km-card-head' },
           React.createElement('h3', null, t('connection')),
@@ -429,7 +696,61 @@ window.__ModuleLoader__.load({
                 onClick: clearKey,
                 disabled: busy
               }, t('clearKey')) : null),
-            React.createElement('span', { className: 'km-hint' }, t('keyHint')))),
+            React.createElement('span', { className: 'km-hint' }, t('keyHint'))),
+          React.createElement('div', { className: 'km-field km-span2' },
+            React.createElement('label', null, t('lines')),
+            React.createElement('span', { className: 'km-hint' }, t('linesHint')),
+            endpoints === null ? React.createElement('span', { className: 'km-hint' }, t('linesUnavailable')) : null,
+            React.createElement('div', { className: 'km-lines' },
+              (endpoints || []).map(function (endpoint) {
+                var active = endpoint.id === data.activeEndpointId;
+                var result = lineResults[endpoint.id] || { status: 'idle' };
+                var statusText = result.status === 'loading' ? t('lineTesting')
+                  : result.status === 'ok' ? String(result.latencyMs) + 'ms'
+                    : result.status === 'error' ? t('lineFailed') : t('idle');
+                return React.createElement('div', {
+                  key: endpoint.id,
+                  className: 'km-line',
+                  'data-active': active ? 'true' : 'false'
+                },
+                  React.createElement('button', {
+                    type: 'button',
+                    className: 'km-line-radio',
+                    'data-active': active ? 'true' : 'false',
+                    title: active ? t('lineActive') : t('lineSwitch'),
+                    onClick: function () { selectEndpoint(endpoint.id); }
+                  }),
+                  React.createElement('div', { className: 'km-line-main' },
+                    React.createElement('div', { className: 'km-line-name' }, endpoint.name),
+                    React.createElement('div', { className: 'km-line-url' }, endpoint.baseUrl)),
+                  React.createElement('span', { className: 'km-line-status', 'data-state': result.status, title: result.message || '' }, statusText),
+                  React.createElement('button', {
+                    type: 'button',
+                    className: 'km-btn km-btn-mini',
+                    onClick: function () { probeLine(endpoint.id); },
+                    disabled: result.status === 'loading'
+                  }, t('lineTest')),
+                  React.createElement('button', {
+                    type: 'button',
+                    className: 'km-btn km-btn-mini km-btn-danger',
+                    onClick: function () { removeLine(endpoint.id); },
+                    disabled: linesBusy || endpoints === null || endpoints.length <= 1,
+                    title: t('lineRemove')
+                  }, '×'));
+              })),
+            React.createElement('div', { className: 'km-line-actions' },
+              React.createElement('button', {
+                type: 'button',
+                className: 'km-btn km-btn-mini',
+                onClick: addLine,
+                disabled: linesBusy
+              }, t('lineAdd')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'km-btn km-btn-mini',
+                onClick: probeAll,
+                disabled: linesBusy
+              }, linesBusy ? t('testing') : t('lineTestAll'))))),
 
         React.createElement('div', { className: 'km-actions' },
           React.createElement('button', {
@@ -471,17 +792,54 @@ window.__ModuleLoader__.load({
       var capabilitiesCard = React.createElement('section', { className: 'km-card' },
         React.createElement('h3', null, t('capabilities')),
         React.createElement('p', { className: 'km-card-sub' }, t('capabilitiesSub')),
+        modelNotice !== null ? React.createElement('p', { className: 'km-notice', 'data-kind': modelNotice.kind, style: { margin: '0 0 10px' } }, modelNotice.text) : null,
         React.createElement('div', { className: 'km-tiles' },
           TYPE_ORDER.map(function (type) {
             var entry = catalogByType[type];
+            var hasModelList = entry !== undefined && entry !== null && Array.isArray(entry.models);
+            var models = hasModelList ? entry.models : [];
+            var chosen = defaults[type] === undefined ? '' : defaults[type];
             var count = entry ? String(entry.available) + '/' + String(entry.count) + ' ' + t('available') : (catalog ? '—' : t('idle'));
+            var chosenKnown = false;
+            for (var probe = 0; probe < models.length; probe += 1) if (models[probe].id === chosen) chosenKnown = true;
             return React.createElement('div', {
               key: type,
-              className: 'km-tile',
+              className: 'km-tile' + (models.length > 0 ? ' km-tile-models' : ''),
               'data-state': entry && entry.available === 0 ? 'missing' : 'ready'
             },
-              React.createElement('strong', null, t('type_' + type)),
-              React.createElement('span', null, count));
+              React.createElement('div', { className: 'km-tile-head' },
+                React.createElement('strong', null, t('type_' + type)),
+                React.createElement('span', null, count)),
+              models.length === 0
+                ? (hasModelList ? React.createElement('span', { className: 'km-model-empty' }, t('modelsEmpty')) : null)
+                : React.createElement('div', { className: 'km-models' },
+                    React.createElement('button', {
+                      type: 'button',
+                      className: 'km-model',
+                      'data-selected': chosen === '' ? 'true' : 'false',
+                      onClick: function () { selectModel(type, ''); }
+                    },
+                      React.createElement('span', { className: 'km-model-radio' }),
+                      React.createElement('span', { className: 'km-model-name' }, t('modelsAuto'))),
+                    chosen !== '' && !chosenKnown ? React.createElement('span', { className: 'km-model-stale' }, t('modelsStale') + chosen) : null,
+                    models.map(function (model) {
+                      var unavailable = model.available !== true;
+                      return React.createElement('button', {
+                        key: model.id,
+                        type: 'button',
+                        className: 'km-model',
+                        'data-selected': chosen === model.id ? 'true' : 'false',
+                        'data-disabled': unavailable ? 'true' : 'false',
+                        disabled: unavailable,
+                        title: model.id,
+                        onClick: function () { selectModel(type, model.id); }
+                      },
+                        React.createElement('span', { className: 'km-model-radio' }),
+                        React.createElement('span', { className: 'km-model-name' }, model.name),
+                        unavailable ? React.createElement('span', { className: 'km-model-badge' }, t('missingWeights')) : null);
+                    })
+                  )
+            );
           })),
         catalog === null ? React.createElement('p', { className: 'km-hint', style: { margin: '12px 0 0' } }, t('noCatalog')) : null,
         catalog && catalog.unprofiled > 0 ? React.createElement('p', { className: 'km-hint', style: { margin: '8px 0 0' } }, String(catalog.unprofiled) + ' ' + t('unprofiled')) : null

package/entry.js

@@ -17,11 +17,11 @@ import { createTools } from './lib/tools.js'
 
 export const name = 'dsh-kylin-media'
 export const inject = ['tools', 'webServer']
-export const VERSION = '0.1.0'
+export const VERSION = '0.2.0'
 
 const ROOT = dirname(fileURLToPath(import.meta.url))
 const SKILLS_DIR = join(ROOT, 'skills')
-const CONFIG_FIELDS = ['baseUrl', 'waitSeconds', 'pollIntervalMs', 'requestTimeoutMs', 'autoDownload', 'outputDir']
+const CONFIG_FIELDS = ['baseUrl', 'waitSeconds', 'pollIntervalMs', 'requestTimeoutMs', 'autoDownload', 'outputDir', 'defaultModels']
 
 function pickConfig(raw) {
   if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) return {}