dsh-media-skills 0.4.2 → 0.5.0

package/README.md

@@ -72,12 +72,14 @@ See [Desktop 0.2 compatibility notes](docs/DESKTOP_0.2.md) for the exact verific
 
 ## ⚡ Quick start
 
-Install from the DSH **Plugin Manager** (`github:MJorgin/dsh-media-skills`) or the CLI:
+Install from the DSH **Plugin Manager** (`dsh-media-skills`) or the CLI:
 
 ```sh
-dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+dsh plugin --profile <name> add dsh-media-skills
 ```
 
+Or straight from GitHub: `dsh plugin --profile <name> add github:MJorgin/dsh-media-skills`.
+
 1. **Keys**:
    - **Desktop 0.2 / v0.1.6+**: no keys are needed to install — the two skills register at runtime. The default `deepseek-flash` route supports native image chat. Skill keys (`GLM_API_KEY`, `SILICONFLOW_API_KEY`, optional `GEMINI_API_KEY`) go in `~/.dsh/secrets/media-tools.env`; extra model routes are configured in **Settings → Models**.
    - **v0.1.1-rc.1+**: zero extra keys — paste reading and the vision route run on your agent's existing `DEEPSEEK_API_KEY` (DeepSeek-V4-Flash-Vision-Exp).

package/client.js

@@ -0,0 +1,292 @@
+/**
+ * Browser half of dsh-media-skills: the sidebar footer-action entry and the
+ * media panel (生成 / 作品 / 密钥).
+ *
+ * Hand-authored in the client module-loader format — no build step. React and
+ * react/jsx-runtime are baseline modules; everything else is plain DOM.
+ *
+ * Styling uses the host's own `--dsw-alias-*` tokens, so light/dark follow the
+ * app theme instead of shipping a second palette.
+ */
+window.__ModuleLoader__.load({
+  id: 'dsh-media-skills',
+  factory: (require) => {
+    var module = { exports: {} }
+    var exports = module.exports
+    const React = require('react')
+    const h = React.createElement
+
+    const STYLE_ID = 'dsh-media-skills-style'
+    const STORE_KEY = 'dsh-media-skills.works'
+    const TABS = [['generate', '生成'], ['works', '作品'], ['keys', '密钥']]
+
+    const CSS = `
+.dshm-anchor { position: relative; display: block; }
+.dshm-entry {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  height: 28px; padding: 0 10px; border: 0; border-radius: 14px;
+  background: transparent; color: var(--dsw-alias-label-secondary, #61666b);
+  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
+}
+.dshm-entry:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.04)); }
+.dshm-entry[data-open="true"] { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.04)); color: var(--dsw-alias-label-primary, #0f1115); }
+.dshm-entry svg { flex: none; }
+
+.dshm-panel {
+  position: absolute; left: calc(100% + 10px); bottom: 0; width: 420px;
+  max-height: min(600px, calc(100vh - 40px)); display: flex; flex-direction: column;
+  background: var(--dsw-alias-bg-base, #fff); color: var(--dsw-alias-label-primary, #0f1115);
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.1)); border-radius: 16px;
+  box-shadow: 0 24px 56px -24px rgba(0,0,0,.55); z-index: 40; overflow: hidden;
+  font-family: var(--dsw-font-family, -apple-system, "PingFang SC", system-ui, sans-serif);
+}
+.dshm-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 18px 0; }
+.dshm-title { font-size: 15px; font-weight: 600; margin: 0; }
+.dshm-quota { font-size: 11.5px; color: var(--dsw-alias-label-tertiary, #81858c); }
+.dshm-tabs { display: flex; gap: 18px; margin: 14px 18px 0; border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04)); }
+.dshm-tab {
+  font: inherit; font-size: 12.5px; color: var(--dsw-alias-label-tertiary, #81858c);
+  background: none; border: 0; padding: 0 0 8px; cursor: pointer; position: relative;
+}
+.dshm-tab[data-on="true"] { color: var(--dsw-alias-label-primary, #0f1115); font-weight: 500; }
+.dshm-tab[data-on="true"]::after {
+  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
+  background: var(--dsw-alias-label-primary, #0f1115);
+}
+.dshm-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
+
+.dshm-field {
+  width: 100%; min-height: 58px; resize: none; box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.1)); border-radius: 8px;
+  background: var(--dsw-alias-bg-base, #fff); color: inherit;
+  font: inherit; font-size: 13px; line-height: 1.55; padding: 9px 11px; outline: none;
+}
+.dshm-field:focus { border-color: var(--dsw-alias-label-tertiary, #81858c); }
+.dshm-field::placeholder { color: var(--dsw-alias-label-caption, #adb2b8); }
+
+.dshm-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dsw-alias-label-tertiary, #81858c); }
+.dshm-meta b { font-weight: 500; color: var(--dsw-alias-label-secondary, #61666b); }
+.dshm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dsw-alias-label-caption, #adb2b8); }
+
+.dshm-cta {
+  height: 34px; border-radius: 17px; border: 0; cursor: pointer;
+  background: var(--dsw-alias-button-primary-fill, #0f1115); color: var(--dsw-alias-label-primary-foreground, #fff);
+  font: inherit; font-size: 13px; font-weight: 500;
+}
+.dshm-cta:disabled { background: var(--dsw-alias-bg-layer-2, #f9fafb); color: var(--dsw-alias-label-caption, #adb2b8); cursor: not-allowed; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.1)); }
+
+.dshm-shot { border-radius: 10px; overflow: hidden; background: var(--dsw-alias-bg-layer-2, #f2f3f5); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
+.dshm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.dshm-note {
+  border: 1px dashed var(--dsw-alias-border-l2, rgba(0,0,0,.1)); border-radius: 10px;
+  padding: 20px 16px; text-align: center; font-size: 11.5px; line-height: 1.7;
+  color: var(--dsw-alias-label-caption, #adb2b8);
+}
+.dshm-note b { display: block; font-size: 12.5px; font-weight: 500; color: var(--dsw-alias-label-secondary, #61666b); margin-bottom: 4px; }
+.dshm-caption { padding-top: 10px; border-top: 1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04)); }
+.dshm-caption h4 { margin: 0 0 3px; font-size: 12.5px; font-weight: 500; }
+.dshm-caption p { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--dsw-alias-label-tertiary, #81858c); }
+
+.dshm-strip { display: flex; gap: 7px; }
+.dshm-thumb { flex: 1; height: 36px; border-radius: 6px; overflow: hidden; background: var(--dsw-alias-bg-layer-2, #f2f3f5); opacity: .55; border: 0; padding: 0; cursor: pointer; }
+.dshm-thumb[data-on="true"] { opacity: 1; box-shadow: 0 0 0 1.5px var(--dsw-alias-label-primary, #0f1115); }
+.dshm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.dshm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.dshm-work { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
+.dshm-work .im { height: 84px; border-radius: 8px; overflow: hidden; background: var(--dsw-alias-bg-layer-2, #f2f3f5); }
+.dshm-work img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.dshm-work .t { margin-top: 5px; font-size: 11.5px; color: var(--dsw-alias-label-secondary, #61666b); }
+.dshm-work .m { font-size: 10.5px; color: var(--dsw-alias-label-caption, #adb2b8); }
+
+.dshm-key { border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.1)); border-radius: 10px; padding: 10px 12px; }
+.dshm-key .n { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
+.dshm-key .s { font-size: 11px; color: var(--dsw-alias-label-tertiary, #81858c); display: flex; align-items: center; gap: 5px; }
+.dshm-key .s::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2f7d5c; }
+.dshm-key[data-off="true"] .s::before { background: var(--dsw-alias-label-caption, #adb2b8); }
+.dshm-key .v { margin-top: 5px; font-size: 11.5px; color: var(--dsw-alias-label-caption, #adb2b8); }
+.dshm-hint { font-size: 11.5px; color: var(--dsw-alias-label-tertiary, #81858c); line-height: 1.6; }
+`
+
+    function ensureStyles() {
+      if (document.getElementById(STYLE_ID) !== null) return
+      const style = document.createElement('style')
+      style.id = STYLE_ID
+      style.textContent = CSS
+      document.head.appendChild(style)
+    }
+
+    function Icon() {
+      return h('svg', { viewBox: '0 0 16 16', width: 15, height: 15, fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': 'true' },
+        h('rect', { x: 1.8, y: 2.6, width: 12.4, height: 10.8, rx: 1.6 }),
+        h('circle', { cx: 5.4, cy: 6.2, r: 1.1 }),
+        h('path', { d: 'M2.4 11.6l3.4-3.1 2.5 2.2 2.2-1.9 3.1 2.8' }))
+    }
+
+    async function api(path, init) {
+      const response = await fetch(`/media${path}`, { headers: { 'content-type': 'application/json' }, ...init })
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(body.message ?? `HTTP ${response.status}`)
+      return body
+    }
+
+    function loadWorks() {
+      try {
+        const raw = localStorage.getItem(STORE_KEY)
+        const parsed = raw === null ? [] : JSON.parse(raw)
+        return Array.isArray(parsed) ? parsed.slice(0, 60) : []
+      } catch { return [] }
+    }
+
+    function saveWorks(works) {
+      try { localStorage.setItem(STORE_KEY, JSON.stringify(works.slice(0, 60))) } catch { /* storage full or blocked */ }
+    }
+
+    function titleOf(prompt) {
+      const clean = String(prompt).replace(/\s+/g, ' ').trim()
+      return clean.length > 14 ? `${clean.slice(0, 14)}…` : clean
+    }
+
+    function Panel({ onClose }) {
+      const [tab, setTab] = React.useState('generate')
+      const [status, setStatus] = React.useState(null)
+      const [statusError, setStatusError] = React.useState(null)
+      const [prompt, setPrompt] = React.useState('')
+      const [busy, setBusy] = React.useState(false)
+      const [error, setError] = React.useState(null)
+      const [current, setCurrent] = React.useState(() => loadWorks()[0] ?? null)
+      const [works, setWorks] = React.useState(loadWorks)
+
+      const refresh = React.useCallback(() => {
+        setStatusError(null)
+        api('/status').then(setStatus).catch((e) => setStatusError(e.message))
+      }, [])
+      React.useEffect(refresh, [refresh])
+
+      const limit = status?.quota?.limit ?? 5
+      const used = works.length
+      const left = Math.max(0, limit - used)
+      const empty = prompt.trim() === ''
+
+      const generate = React.useCallback(async () => {
+        if (busy || empty || left === 0) return
+        setBusy(true); setError(null)
+        try {
+          const size = '16:9'
+          const result = await api('/generate', { method: 'POST', body: JSON.stringify({ prompt, size }) })
+          const work = {
+            id: String(Date.now()),
+            title: titleOf(prompt),
+            prompt,
+            size,
+            model: status?.providers?.find((p) => p.configured)?.label ?? '未配置',
+            at: Date.now(),
+            src: `/media/file?p=${encodeURIComponent(result.file)}`,
+          }
+          const next = [work, ...works]
+          setWorks(next); saveWorks(next); setCurrent(work)
+        } catch (e) {
+          setError(e.message)
+        } finally {
+          setBusy(false)
+        }
+      }, [busy, empty, left, prompt, status, works])
+
+      const head = h('div', { className: 'dshm-head' },
+        h('h3', { className: 'dshm-title' }, '创作'),
+        h('span', { className: 'dshm-quota' }, statusError !== null ? '无法连接' : `本次还剩 ${left} 张`))
+
+      const tabs = h('div', { className: 'dshm-tabs' }, TABS.map(([id, label]) =>
+        h('button', { key: id, className: 'dshm-tab', 'data-on': String(tab === id), onClick: () => setTab(id) }, label)))
+
+      let body
+      if (tab === 'generate') {
+        body = h('div', { className: 'dshm-body' },
+          h('textarea', {
+            className: 'dshm-field',
+            placeholder: '描述你想要的画面，比如「雨夜街角，霓虹倒影」',
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            onKeyDown: (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') generate() },
+          }),
+          h('div', { className: 'dshm-meta' },
+            h('b', null, status?.providers?.find((p) => p.configured)?.label ?? '未配置密钥'),
+            h('span', { className: 'dshm-dot' }), h('span', null, '16:9'),
+            h('span', { className: 'dshm-dot' }), h('span', null, '1024×576')),
+          h('button', { className: 'dshm-cta', disabled: busy || empty || left === 0, onClick: generate },
+            busy ? '生成中…' : left === 0 ? '本次配额已用完' : '生成'),
+          error !== null
+            ? h('div', { className: 'dshm-note' }, h('b', null, '生成失败。'), error,
+                h('div', { style: { marginTop: 8 } },
+                  h('button', { className: 'dshm-cta', style: { height: 28, padding: '0 14px', width: 'auto' }, onClick: generate }, '重试')))
+            : current !== null
+              ? h('div', null,
+                  h('div', { className: 'dshm-shot' }, h('img', { src: current.src, alt: current.title })),
+                  h('div', { className: 'dshm-caption' },
+                    h('h4', null, current.title),
+                    h('p', null, `${current.model} · ${current.size} · ${new Date(current.at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`)))
+              : h('div', { className: 'dshm-note' },
+                  h('b', null, '暂无作品。'),
+                  '生成的第一张会出现在这里，可以随时回来复用它的参数。'),
+          works.length > 0
+            ? h('div', { className: 'dshm-strip' }, works.slice(0, 4).map((work) =>
+                h('button', { key: work.id, className: 'dshm-thumb', 'data-on': String(current?.id === work.id), onClick: () => setCurrent(work), title: work.title },
+                  h('img', { src: work.src, alt: work.title }))))
+            : null)
+      } else if (tab === 'works') {
+        body = h('div', { className: 'dshm-body' },
+          works.length === 0
+            ? h('div', { className: 'dshm-note' }, h('b', null, '暂无作品。'), '生成过的图片会按时间排列在这里。')
+            : h('div', { className: 'dshm-grid' }, works.map((work) =>
+                h('button', { key: work.id, className: 'dshm-work', onClick: () => { setCurrent(work); setTab('generate') } },
+                  h('div', { className: 'im' }, h('img', { src: work.src, alt: work.title })),
+                  h('div', { className: 't' }, work.title),
+                  h('div', { className: 'm' }, `${new Date(work.at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} · ${work.size}`)))))
+      } else {
+        const providers = status?.providers ?? []
+        body = h('div', { className: 'dshm-body' },
+          providers.length === 0
+            ? h('div', { className: 'dshm-note' }, h('b', null, '未配置密钥。'), statusError ?? '读取状态失败。')
+            : providers.map((p) => h('div', { key: p.id, className: 'dshm-key', 'data-off': String(!p.configured) },
+                h('div', { className: 'n' }, p.label, h('span', { className: 's' }, p.configured ? '已配置' : '未配置')),
+                h('div', { className: 'v' }, p.role))),
+          h('div', { className: 'dshm-hint' }, '密钥保存在本机凭据服务里，也可以继续用 media-tools.env。'))
+      }
+
+      return h('div', { className: 'dshm-panel', role: 'dialog', 'aria-label': '创作' },
+        head, tabs, body)
+    }
+
+    function Entry(props) {
+      const [open, setOpen] = React.useState(false)
+      const ref = React.useRef(null)
+      React.useEffect(() => {
+        if (!open) return undefined
+        const onDown = (event) => { if (ref.current !== null && !ref.current.contains(event.target)) setOpen(false) }
+        const onKey = (event) => { if (event.key === 'Escape') setOpen(false) }
+        document.addEventListener('mousedown', onDown)
+        document.addEventListener('keydown', onKey)
+        return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey) }
+      }, [open])
+      return h('div', { className: 'dshm-anchor', ref },
+        h('button', { className: 'dshm-entry', 'data-open': String(open), title: '创作', 'aria-label': '创作', onClick: () => setOpen((v) => !v) },
+          h(Icon, null),
+          props?.wide === false ? null : h('span', null, '创作')),
+        open ? h(Panel, { onClose: () => setOpen(false) }) : null)
+    }
+
+    function apply(ctx) {
+      ensureStyles()
+      ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({
+        name: 'sidebar.footer.action',
+        id: 'media-desk',
+        order: 100,
+      }, Entry))
+    }
+
+    exports.name = 'dsh-media-skills'
+    exports.apply = apply
+    exports.inject = ['slots']
+    return module.exports
+  },
+})

package/docs/SETUP_VISION.md

@@ -12,13 +12,13 @@
 在 DSH Plugin Manager 中添加：
 
 ```text
-github:MJorgin/dsh-media-skills
+dsh-media-skills
 ```
 
 或使用 CLI：
 
 ```sh
-dsh plugin --profile web add github:MJorgin/dsh-media-skills
+dsh plugin --profile web add dsh-media-skills
 ```
 
 请把 `web` 替换成你实际使用的 DSH profile。安装后重启该 profile。

package/docs/SETUP_VISION_EN.md

@@ -12,13 +12,13 @@ This guide covers two related but different workflows:
 Use the DSH Plugin Manager:
 
 ```text
-github:MJorgin/dsh-media-skills
+dsh-media-skills
 ```
 
 Or use the CLI:
 
 ```sh
-dsh plugin --profile web add github:MJorgin/dsh-media-skills
+dsh plugin --profile web add dsh-media-skills
 ```
 
 Replace `web` with your DSH profile. Restart the profile after installation.

package/docs/lang/README_DE.md

@@ -41,7 +41,7 @@ zwei kostenlose Skills, ein kostenloses Vision-Modell und das Einfügen von Bild
 1. Bundle installieren:
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **Keys**:

package/docs/lang/README_ES.md

@@ -41,7 +41,7 @@ dos skills gratuitas, un modelo de visión gratuito y lectura de imágenes pegad
 1. Instala el bundle:
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **Claves**:

package/docs/lang/README_JA.md

@@ -41,7 +41,7 @@
 1. バンドルをインストール：
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **キー**：

package/docs/lang/README_KO.md

@@ -41,7 +41,7 @@
 1. 번들 설치:
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **키**:

package/docs/lang/README_PT.md

@@ -41,7 +41,7 @@ duas skills grátis, um modelo de visão grátis e leitura de imagens coladas, s
 1. Instale o bundle:
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **Chaves**:

package/docs/lang/README_RU.md

@@ -41,7 +41,7 @@
 1. Установите бандл:
 
    ```sh
-   dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+   dsh plugin --profile <name> add dsh-media-skills
    ```
 
 2. **Ключи**:

package/docs/lang/README_ZH.md

@@ -73,10 +73,10 @@ DeepSeek Harness 很会推理，但图片能否发送取决于当前模型声明
 
 ## ⚡ 快速开始
 
-在 DSH **插件管理器**里添加 `github:MJorgin/dsh-media-skills`，或命令行安装：
+在 DSH **插件管理器**里添加 `dsh-media-skills`，或命令行安装：
 
 ```sh
-dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+dsh plugin --profile <name> add dsh-media-skills
 ```
 
 1. **Key**：

package/docs/lang/README_ZH_TW.md

@@ -62,7 +62,7 @@ DeepSeek Harness 的推理能力十分出色——但純文字模型看不見你
 ## ⚡ 快速開始
 
 ```sh
-dsh plugin --profile <name> add github:MJorgin/dsh-media-skills
+dsh plugin --profile <name> add dsh-media-skills
 ```
 
 1. **金鑰**：

package/index.js

@@ -18,9 +18,11 @@
  * @module dsh-media-skills
  */
 
-import { readFileSync } from 'node:fs'
+import { createReadStream, mkdirSync, readFileSync, statSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
-import { join } from 'node:path'
+import { homedir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
 
 const PROVIDER_NAME = 'dsh-media-skills'
@@ -93,4 +95,165 @@ export const inject = ['skills']
  */
 export function apply(ctx) {
   ctx.skills.registerProvider(createProvider)
+  // Optional: only compositions with a web server get the media routes, so the
+  // headless CLI keeps loading this bundle with skills alone. `inject` is
+  // absent on the bare harness the package's own checks use.
+  if (typeof ctx.inject !== 'function') return
+  ctx.inject(['webServer'], (webCtx) => {
+    webCtx.effect(() => {
+      const handler = createMediaHandler({
+        workspaceRoot: () => webCtx.get('workspace')?.root ?? process.cwd(),
+      })
+      const unregister = webCtx.webServer.register({
+        kind: 'prefix',
+        path: MEDIA_PREFIX,
+        handler,
+      })
+      return () => unregister()
+    }, 'dsh-media-skills: /media routes')
+  })
+}
+
+/** Route prefix owned by this bundle; never overlaps the kernel's `/api`. */
+const MEDIA_PREFIX = '/media'
+
+/** Providers the bundled skills know how to drive. */
+const PROVIDERS = [
+  { id: 'sensenova', label: 'SenseNova U1', env: 'SENSENOVA_API_KEY', role: '主用' },
+  { id: 'siliconflow', label: 'SiliconFlow Kolors', env: 'SILICONFLOW_API_KEY', role: '备用' },
+  { id: 'gemini', label: 'Gemini', env: 'GEMINI_API_KEY', role: '视觉' },
+]
+
+/** Parse `KEY=value` lines out of one secrets file; missing files read as empty. */
+function readSecretFile(file) {
+  try {
+    const out = {}
+    for (const line of readFileSync(file, 'utf8').split(/\r?\n/)) {
+      const match = /^([A-Z0-9_]+)=(.*)$/.exec(line.trim())
+      if (match !== null) out[match[1]] = match[2].trim()
+    }
+    return out
+  } catch {
+    return {}
+  }
+}
+
+/** The secrets the skills themselves read, in the same precedence order. */
+function secretsOf() {
+  const home = process.env.DSH_HOME ?? join(homedir(), '.dsh')
+  return {
+    ...readSecretFile(join(homedir(), '.codex', 'secrets', 'media-tools.env')),
+    ...readSecretFile(join(home, 'secrets', 'media-tools.env')),
+  }
+}
+
+/** Provider table plus the package version, for the panel's 密钥 tab. */
+export function mediaStatus() {
+  const secrets = secretsOf()
+  return {
+    ok: true,
+    version: JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8')).version,
+    providers: PROVIDERS.map((provider) => ({
+      id: provider.id,
+      label: provider.label,
+      role: provider.role,
+      configured: Boolean(process.env[provider.env] ?? secrets[provider.env]),
+    })),
+    quota: { limit: 5 },
+  }
+}
+
+/** Reject cross-site callers: the panel is same-origin, a web page is not. */
+export function originAllowed(req) {
+  const host = req.headers.host
+  if (typeof host !== 'string' || host === '') return false
+  const origin = req.headers.origin ?? req.headers.referer
+  if (origin === undefined) return true
+  try {
+    return new URL(origin).host === host
+  } catch {
+    return false
+  }
+}
+
+/** Run the same `generate.py` the media-tools skill runs — one implementation. */
+export function runGenerate({ prompt, size, out, timeoutMs = 180_000 }) {
+  const script = fileURLToPath(new URL('./skills/media-tools/scripts/generate.py', import.meta.url))
+  return new Promise((resolve) => {
+    let stderr = ''
+    const child = spawn('python3', [script, prompt, out, size], { cwd: dirname(script) })
+    const timer = setTimeout(() => child.kill('SIGTERM'), timeoutMs)
+    child.stderr.on('data', (chunk) => { stderr += String(chunk) })
+    child.on('error', (error) => { clearTimeout(timer); resolve({ ok: false, message: error.message }) })
+    child.on('close', (code) => {
+      clearTimeout(timer)
+      if (code === 0) resolve({ ok: true, file: out })
+      else resolve({ ok: false, message: stderr.trim().split(/\r?\n/).slice(-3).join(' ') || `退出码 ${code}` })
+    })
+  })
+}
+
+/** The `/media` prefix handler: status, generate, and the generated file itself. */
+export function createMediaHandler({ workspaceRoot } = {}) {
+  const root = () => (typeof workspaceRoot === 'function' ? workspaceRoot() : process.cwd())
+  return async function mediaHandler(req, res) {
+    if (!originAllowed(req)) {
+      res.writeHead(403, { 'content-type': 'application/json; charset=utf-8' })
+      res.end(JSON.stringify({ ok: false, message: 'cross-site request refused' }))
+      return
+    }
+    const url = new URL(req.url ?? '/', 'http://localhost')
+    const route = url.pathname.slice(MEDIA_PREFIX.length) || '/'
+
+    if (route === '/status' && req.method === 'GET') {
+      res.writeHead(200, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' })
+      res.end(JSON.stringify(mediaStatus()))
+      return
+    }
+
+    if (route === '/generate' && req.method === 'POST') {
+      let body = ''
+      for await (const chunk of req) body += String(chunk)
+      let parsed = {}
+      try { parsed = JSON.parse(body || '{}') } catch { parsed = {} }
+      const prompt = String(parsed.prompt ?? '').trim()
+      if (prompt === '') {
+        res.writeHead(400, { 'content-type': 'application/json; charset=utf-8' })
+        res.end(JSON.stringify({ ok: false, message: '提示词不能为空。' }))
+        return
+      }
+      const size = String(parsed.size ?? '1024x1024')
+      const dir = join(root(), 'uploads', 'media')
+      mkdirSync(dir, { recursive: true })
+      const out = join(dir, `${Date.now()}.png`)
+      const result = await runGenerate({ prompt, size, out })
+      res.writeHead(result.ok ? 200 : 502, { 'content-type': 'application/json; charset=utf-8' })
+      res.end(JSON.stringify(result))
+      return
+    }
+
+    if (route === '/file' && req.method === 'GET') {
+      const target = url.searchParams.get('p')
+      const base = join(root(), 'uploads', 'media')
+      // Only ever serve files this plugin wrote: resolved path must sit inside
+      // the media directory, so a crafted `?p=` cannot read arbitrary files.
+      if (target === null || !target.startsWith(base + '/')) {
+        res.writeHead(403, { 'content-type': 'application/json; charset=utf-8' })
+        res.end(JSON.stringify({ ok: false, message: 'path outside the media directory' }))
+        return
+      }
+      let size = 0
+      try { size = statSync(target).size } catch {
+        res.writeHead(404, { 'content-type': 'application/json; charset=utf-8' })
+        res.end(JSON.stringify({ ok: false, message: 'file not found' }))
+        return
+      }
+      res.writeHead(200, { 'content-type': 'image/png', 'content-length': size, 'cache-control': 'no-store' })
+      createReadStream(target).pipe(res)
+      return
+    }
+
+    res.writeHead(404, { 'content-type': 'application/json; charset=utf-8' })
+    res.end(JSON.stringify({ ok: false, message: 'not found' }))
+  }
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "dsh-media-skills",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Free image reading and generation skills for DeepSeek Harness v0.1.6+ (runtime-verified on desktop 0.2.0-rc.2; source-checked against dsh-v0.2.1-alpha.2): visual QA, illustration generation, provider fallback, and no bundled keys.",
   "type": "module",
   "main": "index.js",
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./client": "./client.js"
   },
   "scripts": {
     "check:node": "node scripts/check-dsh-manifest.mjs && node scripts/check-dsh-bundle.mjs && node scripts/check-docs-links.mjs && node --check index.js",
@@ -14,6 +15,7 @@
   },
   "files": [
     "index.js",
+    "client.js",
     "cordis.patch.yml",
     "skills",
     "scripts",
@@ -49,6 +51,9 @@
   "dsh": {
     "bundle": {
       "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web"
     }
   }
-}
+}