@wisdoverse/dsh-inline-media-viewer 1.0.11 → 1.0.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.12
+
+- Verify the current source on DSH v0.2.0-rc.2: Web settings load and persist, authenticated ComfyUI image reads succeed, and unauthenticated reads are rejected; the plugin-facing APIs used here are unchanged from v0.1.7-rc.2.
+- Replace the removed `settingsScope` client service with live `Config` fields and `configForms`, fixing plugins stuck pending on DSH v0.1.7 and v0.2.0.
+- Preserve remote read-only media preferences through the authenticated RPC channel.
+- Register media endpoints on DSH's authenticated `/api` bridge; real v0.1.7 testing caught the old custom channel returning HTTP 405.
+- Render the turn-tail media card from the slot's actual turn props; verified image display and enlargement in the v0.1.7-rc.2 Web UI.
+- Align the profile entry id with the old `inline-media` settings section for migration.
+
 ## 1.0.11
 
 - Register the authenticated RPC route inside a connection-injected context so

package/README.md

@@ -59,14 +59,14 @@ audio/sound.mp3                    →  <audio controls>
 
 ## Installation
 
-Targets DSH **v0.1.3-alpha.1+** APIs. Host startup and the settings section were verified on **v0.1.5-rc.1**. End-to-end media playback on v0.1.5-rc.1 has not been verified.
+Version **1.0.12** supports DSH **v0.1.7-rc.2** and **v0.2.0-rc.2**. On v0.2.0-rc.2, the plugin loaded in the real Web UI, settings remained saved after a refresh, and the authenticated ComfyUI image route returned a decodable image; unauthenticated access returned HTTP 401. Local image reads and the inline image card were verified on v0.1.7-rc.2, but have not been retested on v0.2.0-rc.2. Video and audio playback remain unverified. Upgrade from v1.0.11 to remove its obsolete `settingsScope` dependency.
 
 ### From npm
 
 Install and activate the bundle in your Web profile:
 
 ```bash
-dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.11
+dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.12
 ```
 
 Restart the Web profile after installation.
@@ -97,7 +97,7 @@ Restart the Web profile after installation.
 
 3. Rebuild or restart the Web profile.
 
-The plugin mounts its host RPC channel, client projection, and settings section
+The plugin mounts its host API routes, client projection, and settings section
 through [`cordis.patch.yml`](cordis.patch.yml).
 
 ## Configuration
@@ -114,9 +114,10 @@ switch live between English and Chinese.
 | Maximum media height | `380 px` | `160`–`1200 px` |
 | ComfyUI origin (optional) | Empty | `http(s)://host[:port]` |
 
-Settings are stored in the DSH settings document. Writes are available only on
-loopback connections; remote browsers can read settings but cannot persist
-changes.
+Settings are stored in the active DSH profile configuration. DSH imports the
+previous `inline-media` section from `settings.yaml` when upgrading. Writes are
+available only on loopback connections; remote browsers can read these four
+settings through the plugin's authenticated RPC channel but cannot change them.
 
 ### ComfyUI origin
 
@@ -156,6 +157,7 @@ limitations.
 | Command | Purpose |
 | --- | --- |
 | `node test.mjs` | Run the dependency-free unit tests directly. |
+| `node test.mjs --host` | Run the host registration check after installing peer dependencies. |
 | `npm test` | Run the same unit test suite through npm. |
 | `npm run lint` | Syntax-check the host modules and test file. |
 
@@ -163,7 +165,7 @@ limitations.
 
 | Path | Responsibility |
 | --- | --- |
-| `index.js` | Host RPC channel, ComfyUI proxy, and settings registration. |
+| `index.js` | Host API routes, ComfyUI proxy, and settings registration. |
 | `lib.js` | Pure, dependency-free helpers. |
 | `client/client.js` | Turn projection, media renderer, and settings UI. |
 | `cordis.patch.yml` | Bundle mounting and integration points. |

package/README.zh-CN.md

@@ -57,14 +57,14 @@ audio/sound.mp3                    →  <audio controls>
 
 ## 安装
 
-适配 DSH **v0.1.3-alpha.1+** API，并已在 **v0.1.5-rc.1** 验证宿主启动和设置入口。尚未在 v0.1.5-rc.1 完成端到端媒体播放验证。
+**1.0.12** 兼容 DSH **v0.1.7-rc.2** 和 **v0.2.0-rc.2**。在 v0.2.0-rc.2 的真实 Web 页面中，插件正常加载，设置刷新后仍能读回，带认证的 ComfyUI 图片接口返回可解码图片，未认证访问返回 HTTP 401。本地图片读取和内联图片卡片已在 v0.1.7-rc.2 验证，尚未在 v0.2.0-rc.2 重新测试；视频和音频播放也尚未验证。请从 v1.0.11 升级，以移除已废弃的 `settingsScope` 依赖。
 
 ### 通过 npm 安装
 
 在 Web profile 中安装并启用 Bundle：
 
 ```bash
-dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.11
+dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.12
 ```
 
 安装后重启 Web profile。
@@ -95,7 +95,7 @@ dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.11
 
 3. 重新构建或重启 Web profile。
 
-插件通过 [`cordis.patch.yml`](cordis.patch.yml) 挂载宿主 RPC 通道、客户端投影和设置区域。
+插件通过 [`cordis.patch.yml`](cordis.patch.yml) 挂载宿主 API 路由、客户端投影和设置区域。
 
 ## 配置
 
@@ -110,7 +110,7 @@ dsh plugin --profile web add @wisdoverse/dsh-inline-media-viewer@1.0.11
 | 媒体最大高度 | `380 px` | `160`–`1200 px` |
 | ComfyUI 源站（可选） | 留空 | `http(s)://host[:port]` |
 
-设置值保存在 DSH 设置文档中。只有回环连接可以写入；远程浏览器可以读取设置，但不能持久化修改。
+设置值保存在当前 DSH profile 配置中。升级时，DSH 会导入旧 `settings.yaml` 中的 `inline-media` 设置。只有回环连接可以写入；远程浏览器可通过插件的认证 RPC 通道读取这四项设置，但不能修改。
 
 ### ComfyUI 源站
 
@@ -144,6 +144,7 @@ ComfyUI 来源。非空的无效地址会明确报错，而不会静默回退到
 | 命令 | 用途 |
 | --- | --- |
 | `node test.mjs` | 直接运行无依赖的单元测试。 |
+| `node test.mjs --host` | 安装 peer 依赖后运行宿主注册检查。 |
 | `npm test` | 通过 npm 运行同一套单元测试。 |
 | `npm run lint` | 对宿主模块和测试文件执行语法检查。 |
 
@@ -151,7 +152,7 @@ ComfyUI 来源。非空的无效地址会明确报错，而不会静默回退到
 
 | 路径 | 职责 |
 | --- | --- |
-| `index.js` | 宿主 RPC 通道、ComfyUI 代理和设置注册。 |
+| `index.js` | 宿主 API 路由、ComfyUI 代理和设置注册。 |
 | `lib.js` | 无依赖的纯辅助函数。 |
 | `client/client.js` | 消息投影、媒体渲染器和设置界面。 |
 | `cordis.patch.yml` | Bundle 挂载和集成点。 |

package/SECURITY.md

@@ -39,9 +39,8 @@ exfiltration, no arbitrary SSRF, no unbounded memory use.
 
 ## Transport
 
-- The media channel `/inline-media/read` is registered with the DSH
-  connection service (`authority: "trusted-host"`), so it runs under the same
-  browser-trust fence and session gating as DSH's own RPC surface.
+- The media route `/api/inline-media.read` uses DSH's authenticated `/api`
+  bridge and browser-trust fence.
 - The client renderer never receives file system paths back — only `data:`
   URLs — so a hostile session cannot use the channel as a file oracle for
   paths the UI already knows.
@@ -53,6 +52,8 @@ exfiltration, no arbitrary SSRF, no unbounded memory use.
   comfyUrl string ≤ 512 chars, parsed to a bare origin at use time).
 - The settings service only writes back for **loopback** connections; remote
   browsers are read-only, so a remote viewer cannot persist state.
+- The plugin's authenticated `settings` RPC returns only its four non-secret
+  display and ComfyUI preferences to remote browsers.
 
 ## Known limitations
 

package/client/client.js

@@ -7,15 +7,16 @@ window.__ModuleLoader__.load({
 
     const React = require("react");
     const { createElement: h, useEffect, useMemo, useState } = React;
-    const CHANNEL = "/inline-media";
-    const ENDPOINT = "read";
+    const CHANNEL = "/api";
+    const ENDPOINT = "inline-media.read";
     const DISPLAY_CAP = 12;
     const SETTINGS_NAMESPACE = "inline-media";
     // Empty config = the host-side built-in default
     // (http://127.0.0.1:8188, ComfyUI's standard local address).
     const COMFY_DEFAULT_URL = "";
     const DEFAULT_SETTINGS = Object.freeze({ autoRender: true, displayCap: DISPLAY_CAP, imageMaxPx: 380, comfyUrl: COMFY_DEFAULT_URL });
-    let settingsScope = null;
+    let settingsForm = null;
+    let remoteSettingsRequest = null;
 
     function clampInt(raw, min, max, fallback) {
       const n = Number.parseInt(String(raw), 10);
@@ -23,10 +24,8 @@ window.__ModuleLoader__.load({
       return Math.min(max, Math.max(min, n));
     }
 
-    function readSettings() {
-      if (settingsScope === null) return DEFAULT_SETTINGS;
-      const snapshot = settingsScope.getSnapshot();
-      const value = snapshot && snapshot.value;
+    function readSettings(remoteSettings) {
+      const value = settingsForm && settingsForm.getSnapshot().value || remoteSettings;
       if (!value || typeof value !== "object") return DEFAULT_SETTINGS;
       return {
         autoRender: value.autoRender !== false,
@@ -37,6 +36,20 @@ window.__ModuleLoader__.load({
           : DEFAULT_SETTINGS.comfyUrl,
       };
     }
+
+    function fetchRemoteSettings(connection) {
+      if (remoteSettingsRequest === null) {
+        remoteSettingsRequest = connection.rpc.call(CHANNEL, "inline-media.settings", {}).then((result) => {
+          if (result.ok) return result.value;
+          remoteSettingsRequest = null;
+          return null;
+        }).catch(() => {
+          remoteSettingsRequest = null;
+          return null;
+        });
+      }
+      return remoteSettingsRequest;
+    }
     const MEDIA_EXTENSIONS = new Set([
       "png", "jpg", "jpeg", "webp", "gif", "avif", "bmp",
       "mp4", "webm", "mov", "m4v", "mkv", "avi", "ogv",
@@ -159,8 +172,6 @@ window.__ModuleLoader__.load({
     };
 
     function selectMedia(owner) {
-      const settings = readSettings();
-      if (!settings.autoRender) return null;
       const text = [];
       const mentions = owner.turn.data && owner.turn.data.get("inline-media-mentions");
       if (mentions) {
@@ -173,7 +184,7 @@ window.__ModuleLoader__.load({
           .filter((block) => block && block.kind === "text" && typeof block.text === "string")
           .map((block) => block.text));
       }
-      const candidates = extractCandidates(text.join("\n")).slice(0, settings.displayCap);
+      const candidates = extractCandidates(text.join("\n"));
       return candidates.length === 0 ? null : candidates;
     }
 
@@ -363,9 +374,22 @@ window.__ModuleLoader__.load({
       })) : null);
     }
 
-    function MediaTail({ matched, connection, sessionId }) {
-      const settings = readSettings();
+    function MediaTailContent({ matched, connection, sessionId }) {
+      const [remoteSettings, setRemoteSettings] = useState(null);
+      const [settings, setSettings] = useState(() => readSettings());
+      useEffect(() => {
+        let active = true;
+        void fetchRemoteSettings(connection).then((value) => {
+          if (active) setRemoteSettings(value);
+        });
+        return () => { active = false; };
+      }, [connection]);
+      useEffect(() => {
+        setSettings(readSettings(remoteSettings));
+        return settingsForm?.subscribe(() => setSettings(readSettings(remoteSettings)));
+      }, [remoteSettings]);
       const candidates = useMemo(() => matched.slice(0, settings.displayCap), [matched, settings.displayCap]);
+      if (!settings.autoRender) return null;
       return h("section", {
         "aria-label": "媒体预览",
         style: { marginTop: 14 },
@@ -393,11 +417,16 @@ window.__ModuleLoader__.load({
       }))));
     }
 
+    function MediaTail(props) {
+      const matched = selectMedia(props);
+      return matched === null ? null : h(MediaTailContent, { ...props, matched });
+    }
+
     const SETTINGS_NS = "inlineMedia";
     const SETTINGS_DICT = {
       zh: {
         nav: "媒体预览",
-        intro: "调整聊天中内联媒体预览的行为。设置会持久保存到本机设置文档。",
+        intro: "调整聊天中内联媒体预览的行为。设置会保存到当前 profile 配置。",
         autoRender: "自动渲染检测到的媒体",
         autoRenderHint: "关闭后仅扫描不展示(仍会扫描消息)。",
         displayCap: "每回合最多显示",
@@ -412,7 +441,7 @@ window.__ModuleLoader__.load({
       },
       en: {
         nav: "Media preview",
-        intro: "Tune how inline media is previewed in conversations. Changes persist to the local settings document.",
+        intro: "Tune how inline media is previewed in conversations. Changes persist to the active profile configuration.",
         autoRender: "Auto-render detected media",
         autoRenderHint: "When off, mentions are still scanned but nothing is shown.",
         displayCap: "Max items per turn",
@@ -427,10 +456,19 @@ window.__ModuleLoader__.load({
       },
     };
 
-    function MediaSettingsSection({ scope, t }) {
-      const [snap, setSnap] = useState(scope ? scope.getSnapshot() : null);
-      useEffect(() => (scope ? scope.subscribe(() => setSnap(scope.getSnapshot())) : undefined), [scope]);
-      const stored = snap && snap.value && typeof snap.value === "object" ? snap.value : DEFAULT_SETTINGS;
+    function MediaSettingsSection({ form, connection, t }) {
+      const [snap, setSnap] = useState(form ? form.getSnapshot() : null);
+      const [remoteSettings, setRemoteSettings] = useState(null);
+      useEffect(() => (form ? form.subscribe(() => setSnap(form.getSnapshot())) : undefined), [form]);
+      useEffect(() => {
+        let active = true;
+        void fetchRemoteSettings(connection).then((value) => {
+          if (active) setRemoteSettings(value);
+        });
+        return () => { active = false; };
+      }, [connection]);
+      const stored = snap && snap.value && typeof snap.value === "object"
+        ? snap.value : remoteSettings || DEFAULT_SETTINGS;
       const writable = snap ? snap.writable === true : false;
       const comfyUrlValue = String(typeof stored.comfyUrl === "string" ? stored.comfyUrl : DEFAULT_SETTINGS.comfyUrl);
       const comfyUrlInvalid = comfyUrlValue.trim() !== "" && !normalizeComfyOrigin(comfyUrlValue);
@@ -438,15 +476,14 @@ window.__ModuleLoader__.load({
         setSnap((prev) => (prev
           ? { ...prev, value: { ...(prev.value || DEFAULT_SETTINGS), [field]: next } }
           : prev));
-        if (scope && writable) scope.set(field, next);
+        if (form && writable) void form.set(field, next).catch(() => setSnap(form.getSnapshot()));
       };
       const reset = () => {
-        if (!scope || !writable) return;
+        if (!form || !writable) return;
         setSnap((prev) => (prev ? { ...prev, value: DEFAULT_SETTINGS } : prev));
-        scope.unset("autoRender");
-        scope.unset("displayCap");
-        scope.unset("imageMaxPx");
-        scope.unset("comfyUrl");
+        void form.mutate(["autoRender", "displayCap", "imageMaxPx", "comfyUrl"]
+          .map((field) => ({ op: "unset", path: [field] })))
+          .catch(() => setSnap(form.getSnapshot()));
       };
       const field = (label, hint, node) => h("label", {
         style: { display: "grid", gap: 4, margin: "14px 0 0" },
@@ -542,18 +579,22 @@ window.__ModuleLoader__.load({
     }
 
     const name = "dsh-inline-media-viewer";
-    const inject = ["slots", "connection", "settingsScope", "locale", "uiConversation"];
+    const inject = ["slots", "connection", "configForms", "locale", "uiConversation"];
 
     function apply(ctx) {
       const connection = ctx.get("connection");
       ctx.uiConversation.events.register(mediaMentionsDefinition);
       ctx.effect(() => ctx.locale.register(SETTINGS_NS, SETTINGS_DICT), "inline-media: dictionaries");
       const t = ctx.locale.bind(SETTINGS_NS);
-      const scope = ctx.settingsScope.bind({ namespace: SETTINGS_NAMESPACE });
-      settingsScope = scope;
+      const form = ctx.configForms.get(SETTINGS_NAMESPACE);
+      settingsForm = form;
+      ctx.effect(() => () => {
+        settingsForm = null;
+        remoteSettingsRequest = null;
+      }, "inline-media: client settings");
       ctx.slots.inject("conversation.chat.turnTail", () => ctx.slots.register({
         name: "conversation.chat.turnTail",
-        select: selectMedia,
+        id: "inline-media",
         inject: () => ({ connection }),
       }, MediaTail));
       ctx.slots.inject("settings.section", () => ctx.slots.register({
@@ -562,14 +603,14 @@ window.__ModuleLoader__.load({
         order: 25,
         label: () => t("nav"),
         locale: SETTINGS_NS,
-        inject: () => ({ scope }),
+        inject: () => ({ form, connection }),
       }, MediaSettingsSection));
     }
 
     exports.apply = apply;
     exports.inject = inject;
     exports.name = name;
-    exports.testing = Object.freeze({ extractCandidates, mediaMentionsDefinition, mediaTransport, selectMedia, toolArgumentText });
+    exports.testing = Object.freeze({ extractCandidates, fetchRemoteSettings, mediaMentionsDefinition, mediaTransport, readSettings, selectMedia, toolArgumentText });
     return module.exports;
   },
 });

package/cordis.patch.yml

@@ -1,3 +1,3 @@
 - insert:
-    - id: inline-media-viewer
+    - id: inline-media
       name: "@wisdoverse/dsh-inline-media-viewer"

package/index.js

@@ -1,13 +1,12 @@
 /**
  * dsh-inline-media-viewer — host half.
  *
- * Serves media bytes for the web client over a dedicated RPC channel
- * (`/inline-media/read`), reading workspace-local files under the calling
+ * Serves media bytes for the web client over authenticated DSH API routes
+ * (`/api/inline-media.read`), reading workspace-local files under the calling
  * session's workspace root and proxying ComfyUI media URLs onto the
  * user-configured ComfyUI origin (default: `http://127.0.0.1:8188`,
- * ComfyUI's standard local address). Registers a persistent user settings
- * namespace (`inline-media`) so the client can tune display preferences
- * and the ComfyUI server address.
+ * ComfyUI's standard local address). Its live Config fields are edited
+ * through DSH's configuration forms.
  *
  * Security model (see SECURITY.md): local reads are confined to the session
  * workspace (realpath + containment), remote reads always fetch from the
@@ -28,20 +27,11 @@ export { testing } from "./lib.js";
 export const name = "dsh-inline-media-viewer";
 export const inject = ["connection", "sessions", "sessionQuery", "settings"];
 
-const CHANNEL = "/inline-media";
 const ENDPOINT = "read";
 
 /** Persistent user settings namespace for this plugin. */
 export const MEDIA_SETTINGS_NAMESPACE = "inline-media";
 
-/** Schema of the user settings section. */
-export const MEDIA_SETTINGS_SCHEMA = z.object({
-  autoRender: z.boolean().required(),
-  displayCap: z.number().step(1).min(1).max(30).required(),
-  imageMaxPx: z.number().step(1).min(160).max(1200).required(),
-  comfyUrl: z.string().max(512).required(),
-});
-
 /** Composition defaults; the user layer overrides these. */
 export const MEDIA_SETTINGS_DEFAULTS = Object.freeze({
   autoRender: true,
@@ -52,6 +42,14 @@ export const MEDIA_SETTINGS_DEFAULTS = Object.freeze({
   comfyUrl: "",
 });
 
+/** Live configuration projected into DSH's settings forms. */
+export const Config = z.object({
+  autoRender: z.boolean().default(MEDIA_SETTINGS_DEFAULTS.autoRender).volatile(),
+  displayCap: z.number().step(1).min(1).max(30).default(MEDIA_SETTINGS_DEFAULTS.displayCap).volatile(),
+  imageMaxPx: z.number().step(1).min(160).max(1200).default(MEDIA_SETTINGS_DEFAULTS.imageMaxPx).volatile(),
+  comfyUrl: z.string().max(512).default(MEDIA_SETTINGS_DEFAULTS.comfyUrl).volatile(),
+});
+
 function success(value) {
   return { ok: true, value };
 }
@@ -136,6 +134,7 @@ async function readLocal(ctx, source, sessionId) {
 }
 
 async function handleRead(ctx, endpoint, payload, signal, resolveSettings) {
+  if (endpoint === "settings") return success(resolveSettings());
   if (endpoint !== ENDPOINT) return failure("unknown inline-media endpoint");
   if (!payload || typeof payload !== "object") return failure("invalid request");
   const { source, sessionId } = payload;
@@ -155,21 +154,30 @@ async function handleRead(ctx, endpoint, payload, signal, resolveSettings) {
   }
 }
 
-export function apply(ctx) {
-  const settings = ctx.settings.register(MEDIA_SETTINGS_NAMESPACE, MEDIA_SETTINGS_SCHEMA, {
-    base: MEDIA_SETTINGS_DEFAULTS,
+export function apply(ctx, config) {
+  ctx.effect(() => ctx.settings.configure({ auto: false }, ctx.fiber), "inline-media: settings page");
+  const resolveSettings = () => ({
+    autoRender: config.autoRender.get(),
+    displayCap: config.displayCap.get(),
+    imageMaxPx: config.imageMaxPx.get(),
+    comfyUrl: config.comfyUrl.get(),
   });
-  const resolveSettings = () => settings.get();
   ctx.inject(["connection"], (connectionCtx) => {
-    connectionCtx.effect(() => {
-      const dispose = connectionCtx.connection.rpc.handle(
-        CHANNEL,
-        (endpoint, payload, signal) => handleRead(ctx, endpoint, payload, signal, resolveSettings),
-      );
-      return () => {
-        void dispose();
-      };
-    }, "inline-media: rpc");
+    for (const endpoint of ["read", "settings"]) {
+      connectionCtx.effect(() => connectionCtx.connection.fetch.register({
+        path: `/api/inline-media.${endpoint}`,
+        methods: ["POST"],
+        requestBody: "buffered",
+        async fetch(request) {
+          let message;
+          try { message = await request.json(); } catch { return new Response("invalid request", { status: 400 }); }
+          if (message?.type !== "client-request" || typeof message.rpcId !== "string" ||
+            message.method !== `inline-media.${endpoint}`) return new Response("invalid request", { status: 400 });
+          const result = await handleRead(ctx, endpoint, message.payload, request.signal, resolveSettings);
+          return Response.json({ type: "server-response", rpcId: message.rpcId, result });
+        },
+      }), `inline-media: ${endpoint} route`);
+    }
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wisdoverse/dsh-inline-media-viewer",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Persistent inline image, video, and audio previews for DeepSeek Harness Web conversations, with workspace-confined local reads and an optional ComfyUI proxy.",
   "repository": {
     "type": "git",
@@ -53,8 +53,8 @@
     "lint": "node --check index.js && node --check lib.js && node --check client/client.js && node --check test.mjs"
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/schemastery": "^3.18.1"
+    "@deepseek-ai/cordis": "^4.0.4",
+    "@deepseek-ai/schemastery": "^3.18.4"
   },
   "dsh": {
     "bundle": {