@dickpy/dsh-imagegen 1.0.2 → 1.0.3

package/lib/index.js

@@ -13,6 +13,8 @@ import { spawn } from "node:child_process";
 */
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 const IMAGEGEN_SETTINGS_NAMESPACE = "dsh-imagegen";
+/** Published package version shared by the host updater and the client UI. */
+const PLUGIN_VERSION = "1.0.3";
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 const SETTINGS_API = {
 	describe: "/api/dsh-imagegen/settings/describe",
@@ -438,7 +440,7 @@ async function readHistoryImage(file) {
 //#region src/updater.ts
 /** GitHub Release discovery and explicit, user-triggered plugin updates. */
 /** Keep this in sync with package.json for each published release. */
-const CURRENT_VERSION = "1.0.2";
+const CURRENT_VERSION = PLUGIN_VERSION;
 const PACKAGE_NAME = "@dickpy/dsh-imagegen";
 const RELEASES_URL = "https://api.github.com/repos/dickpy/dsh-imagegen/releases/latest";
 const CHECK_TIMEOUT_MS = 1e4;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dickpy/dsh-imagegen",
   "description": "AI 生图 (image generation) plugin for the dsh web GUI: text-to-image and image-to-image through a configurable OpenAI-compatible endpoint (gpt-image-2 / gpt-image-1 / dall-e-3), with a settings card for api_url / api_key and a sidebar entry opening a split-pane generation studio.",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/ImageGenPanel.tsx

@@ -50,6 +50,13 @@ function useConfig(scope: ImageGenScope): ImageGenConfig | undefined {
   return value
 }
 
+/** Track the redacted api-key presence bit exposed by the settings bridge. */
+function useKeySet(scope: ImageGenScope): boolean {
+  const [keySet, setKeySet] = useState(scope.getKeySetSnapshot())
+  useEffect(() => scope.subscribeKeySet(() => { setKeySet(scope.getKeySetSnapshot()) }), [scope])
+  return keySet
+}
+
 /** Tick a seconds counter while `running`. */
 function useElapsed(running: boolean, startedAt: number | null): number {
   const [elapsed, setElapsed] = useState(0)
@@ -108,6 +115,8 @@ export function ImageGenPanel(props: {
   const enabled = config?.enabled ?? true
   const apiUrl = config?.apiUrl ?? ''
   const configured = apiUrl.trim() !== ''
+  const keySet = useKeySet(scope)
+  const connected = enabled && configured && keySet
 
   const [mode, setMode] = useState<GenerateMode>('text')
   const [prompt, setPrompt] = useState('')
@@ -316,16 +325,21 @@ export function ImageGenPanel(props: {
   return (
     <div className={css.panel}>
       <header className={css.panelHeader}>
-        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
-        <span className={css.panelSubtitle}>{tt('panel.subtitle')}</span>
+        <span className={css.panelHeading}>
+          <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
+          <span className={css.panelSubtitle}>{tt('panel.subtitle')}</span>
+        </span>
+        <button
+          type="button"
+          className={css.connectionStatus}
+          data-connected={connected ? 'true' : 'false'}
+          aria-label={tt(connected ? 'connection.connected' : 'connection.disconnected')}
+        >
+          <span className={css.connectionDot} aria-hidden="true" />
+          {tt(connected ? 'connection.connected' : 'connection.disconnected')}
+        </button>
       </header>
 
-      {!enabled
-        ? <div className={css.banner} data-kind="warn">{tt('config.disabled')}</div>
-        : !configured
-          ? <div className={css.banner} data-kind="warn">{tt('config.missing')}</div>
-          : <div className={css.banner} data-kind="ok">{tt('config.configured', { url: apiUrl })}</div>}
-
       {update !== null ? (
         <div className={css.updateBanner} data-kind={updateResult === 'success' ? 'ok' : 'warn'}>
           <span className={css.updateText}>

package/src/client/SettingsCard.tsx

@@ -11,6 +11,7 @@ import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-cli
 import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import { CardForm, booleanField, secretField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
 import type { ImageGenScope } from './settings-scope.ts'
+import { PLUGIN_VERSION } from '../protocol.ts'
 import css from './settings-card.module.css'
 
 /** The fields this card edits (the namespace's full schema). */
@@ -161,6 +162,10 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
         ? (
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{t('settings.readOnly')}</p> : null}
+            <div className={css.versionRow}>
+              <span className={css.versionLabel}>{t('settings.currentVersion')}</span>
+              <code className={css.versionValue}>v{PLUGIN_VERSION}</code>
+            </div>
             <ValueField
               id="dsh-imagegen-settings-apikey"
               label={t('settings.apiKey')}

package/src/client/locales.ts

@@ -76,6 +76,8 @@ export const zh = {
   'config.missing': '尚未配置 API：请前往「设置 → 插件 → 可配置」为 AI 生图填写 api_url 与 api_key。',
   'config.configured': '已连接 {url}',
   'config.disabled': '插件已停用，请在设置中重新启用。',
+  'connection.connected': '已连接',
+  'connection.disconnected': '未连接',
   // plugin update
   'update.available': '检测到新版本：{version}',
   'update.install': '在线更新',
@@ -86,6 +88,7 @@ export const zh = {
   // settings card
   'settings.title': 'AI 生图（dsh-imagegen）',
   'settings.description': '配置图像生成 API 地址与密钥',
+  'settings.currentVersion': '当前版本',
   'settings.apiUrl': 'API 地址（api_url）',
   'settings.apiUrlHint': 'OpenAI 兼容接口基址，如 https://api.openai.com/v1；将自动拼接 /images/generations 与 /images/edits',
   'settings.apiKey': 'API 密钥（api_key）',
@@ -178,6 +181,8 @@ export const en: Record<keyof typeof zh, string> = {
   'config.missing': 'API not configured: open "Settings → Plugins → Configurable" and fill in api_url and api_key for AI Image.',
   'config.configured': 'Connected to {url}',
   'config.disabled': 'The plugin is disabled — re-enable it in Settings.',
+  'connection.connected': 'Connected',
+  'connection.disconnected': 'Disconnected',
   'update.available': 'A new version is available: {version}',
   'update.install': 'Update online',
   'update.installing': 'Updating…',
@@ -186,6 +191,7 @@ export const en: Record<keyof typeof zh, string> = {
   'update.release': 'View Release',
   'settings.title': 'AI Image (dsh-imagegen)',
   'settings.description': 'Configure the image generation API endpoint and key',
+  'settings.currentVersion': 'Current version',
   'settings.apiUrl': 'API URL (api_url)',
   'settings.apiUrlHint': 'OpenAI-compatible base URL, e.g. https://api.openai.com/v1; /images/generations and /images/edits are appended',
   'settings.apiKey': 'API Key (api_key)',

package/src/client/panel.module.css

@@ -121,10 +121,18 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 .panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+}
+
+.panelHeading {
   display: flex;
   align-items: baseline;
   gap: 10px;
-  flex: none;
+  min-width: 0;
 }
 
 .panelTitle {
@@ -143,27 +151,35 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   text-overflow: ellipsis;
 }
 
-/* --- banners ------------------------------------------------------------------ */
+/* --- connection status and update notice -------------------------------------- */
 
-.banner {
+.connectionStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   flex: none;
-  padding: 7px 12px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-label-error);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-error);
+  font: inherit;
   font-size: 12px;
-  line-height: 1.5;
-  border-radius: 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  color: var(--dsw-alias-label-secondary);
-  overflow-wrap: anywhere;
+  line-height: 1;
+  white-space: nowrap;
 }
 
-.banner[data-kind='ok'] {
-  color: var(--dsw-alias-state-success-primary);
+.connectionStatus[data-connected='true'] {
   border-color: var(--dsw-alias-state-success-primary);
+  color: var(--dsw-alias-state-success-primary);
 }
 
-.banner[data-kind='warn'] {
-  color: var(--dsw-alias-state-warn-primary);
-  border-color: var(--dsw-alias-state-warn-primary);
+.connectionDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
 }
 
 .updateBanner {
@@ -205,6 +221,16 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 @media (max-width: 700px) {
+  .panelHeader {
+    align-items: flex-start;
+  }
+
+  .panelHeading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 2px;
+  }
+
   .updateBanner {
     align-items: flex-start;
     flex-direction: column;

package/src/client/settings-card.module.css

@@ -95,6 +95,32 @@
   padding-bottom: 8px;
 }
 
+.versionRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.versionLabel {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.versionValue {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--dsw-font-family-mono, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 /* --- fields (mirror of the official plugin-config fields) --------------------- */
 
 .field {

package/src/protocol.ts

@@ -7,6 +7,9 @@
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 export const IMAGEGEN_SETTINGS_NAMESPACE = 'dsh-imagegen'
 
+/** Published package version shared by the host updater and the client UI. */
+export const PLUGIN_VERSION = '1.0.3'
+
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 export const SETTINGS_API = {
   describe: '/api/dsh-imagegen/settings/describe',

package/src/updater.ts

@@ -1,9 +1,10 @@
 /** GitHub Release discovery and explicit, user-triggered plugin updates. */
 
 import { spawn, type ChildProcess } from 'node:child_process'
+import { PLUGIN_VERSION } from './protocol.ts'
 
 /** Keep this in sync with package.json for each published release. */
-export const CURRENT_VERSION = '1.0.2'
+export const CURRENT_VERSION = PLUGIN_VERSION
 export const PACKAGE_NAME = '@dickpy/dsh-imagegen'
 export const RELEASES_URL = 'https://api.github.com/repos/dickpy/dsh-imagegen/releases/latest'