dsh-config-manager 0.1.13 → 0.1.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-config-manager",
-  "version": "0.1.13",
-  "description": "DSH Config Manager — backup / export / import / migrate DSH configuration (dual-face Cordis plugin: host engine + web UI). Manifest shape mirrors @linxin666/dsh-ssh@0.1.12.",
+  "version": "0.1.15",
+  "description": "DSH Config Manager — backup / export / import / migrate DSH configuration (dual-face Cordis plugin: host engine + web UI). Manifest shape mirrors @linxin666/dsh-ssh@0.1.12.",
   "keywords": [
     "dsh",
     "deepseek-harness",

package/src/client/ConfigManagerSection.tsx

@@ -16,6 +16,7 @@ import { runStore, type MainView } from './run-store.ts'
 import { ExportView } from './export/ExportView.tsx'
 import { ImportWizardView } from './import/ImportWizardView.tsx'
 import { SnapshotsPanel } from './snapshots/SnapshotsPanel.tsx'
+import { SyncSettingsView } from './sync/SyncSettingsView.tsx'
 import css from './config-manager.module.css'
 
 export type ConfigManagerSectionProps =
@@ -24,14 +25,15 @@ export type ConfigManagerSectionProps =
   & { t: TranslateNS<'config-manager'> }
 
 /**
- * 设置页容器：Export / Import / Snapshots 三视图切换。
- * Export/Import 状态在模块级 store（切 tab 不丢失）；快照恢复面板为低频显式
+ * 设置页容器：Export / Import / Snapshots / Sync 四视图切换。
+ * Export/Import 状态在模块级 store（切 tab 不丢失）；快照恢复与远程同步为低频显式
  * 操作，其状态组件内自持（local state，不进 sessionStorage）。
  */
-export function ConfigManagerSection({ api, t }: ConfigManagerSectionProps) {
+export function ConfigManagerSection({ api, syncApi, syncT, t }: ConfigManagerSectionProps) {
   const state = useSyncExternalStore(runStore.subscribe, runStore.getSnapshot)
   const view = state.view
   const [snapshotsOpen, setSnapshotsOpen] = useState(false)
+  const [syncOpen, setSyncOpen] = useState(false)
 
   // m2-resume：挂载时重新订阅进行中的 run（刷新 / 重开面板后服务端继续执行，
   // 这里经 /runs 找回活跃 runId 再轮询 /progress）；卸载时停止轮询，重开再订阅。
@@ -44,10 +46,21 @@ export function ConfigManagerSection({ api, t }: ConfigManagerSectionProps) {
 
   const setView = (next: MainView): void => {
     setSnapshotsOpen(false)
+    setSyncOpen(false)
     runStore.patch({ view: next })
   }
 
-  const activeTab: MainView | 'snapshots' = snapshotsOpen ? 'snapshots' : view
+  const openSnapshots = (): void => {
+    setSnapshotsOpen(true)
+    setSyncOpen(false)
+  }
+
+  const openSync = (): void => {
+    setSyncOpen(true)
+    setSnapshotsOpen(false)
+  }
+
+  const activeTab: MainView | 'snapshots' | 'sync' = syncOpen ? 'sync' : snapshotsOpen ? 'snapshots' : view
 
   return (
     <div className={css.section}>
@@ -79,16 +92,28 @@ export function ConfigManagerSection({ api, t }: ConfigManagerSectionProps) {
             aria-selected={activeTab === 'snapshots'}
             data-active={snapshotsOpen ? '' : undefined}
             className={css.viewTab}
-            onClick={() => { setSnapshotsOpen(true) }}
+            onClick={openSnapshots}
           >
             {t('view.snapshots')}
           </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'sync'}
+            data-active={syncOpen ? '' : undefined}
+            className={css.viewTab}
+            onClick={openSync}
+          >
+            {t('view.sync')}
+          </button>
         </div>
       </div>
       <div className={css.sectionBody}>
-        {snapshotsOpen
-          ? <SnapshotsPanel api={api} t={t} />
-          : view === 'export' ? <ExportView api={api} t={t} /> : <ImportWizardView api={api} t={t} />}
+        {syncOpen
+          ? <SyncSettingsView api={syncApi} t={syncT} />
+          : snapshotsOpen
+            ? <SnapshotsPanel api={api} t={t} />
+            : view === 'export' ? <ExportView api={api} t={t} /> : <ImportWizardView api={api} t={t} />}
       </div>
     </div>
   )

package/src/client/client-types.ts

@@ -18,4 +18,8 @@ export type { TranslateNS }
 /** 本插件 Client 半的注入业务面：每个 settings.section 注册项都拿到同一个 api 实例 */
 export interface ConfigManagerSectionInjected {
   api: import('./api.ts').ConfigManagerApi
+  /** 远程同步 API（备份与迁移页第 4 个 tab 使用，主 section 注册时注入） */
+  syncApi: import('./sync/sync-api.ts').SyncApi
+  /** 远程同步 locale（config-manager-sync 命名空间，主 section 注册时注入） */
+  syncT: import('@deepseek-ai/dsh-client-ui-slots').TranslateNS<'config-manager-sync'>
 }

package/src/client/index.ts

@@ -66,22 +66,16 @@ export function apply(ctx: ClientContext): void {
   const syncT = ctx.locale.bind(SYNC_NS)
   const syncApi = new SyncApi()
 
+  // 单一 settings.section：备份与迁移页（内部 Export/Import/Snapshots/Sync 四 tab）。
+  // 远程同步不再注册独立设置页 —— 并入主 section 的 inject 面（syncApi/syncT），
+  // 由 ConfigManagerSection 渲染第 4 个 tab。避免第二个 settings.section 注册在
+  // 目标 DSH 渲染 section 列表时抛错导致整页空白。
   ctx.slots.inject('settings.section', () => ctx.slots.register({
     name: 'settings.section',
     id: 'config-manager',
     order: 60,
     label: () => t('section.label'),
     locale: NS,
-    inject: () => ({ api }),
+    inject: () => ({ api, syncApi, syncT }),
   }, ConfigManagerSection))
-
-  // m-sync-ui：远程同步独立设置页（不触碰 ConfigManagerSection 的 tab 容器）。
-  ctx.slots.inject('settings.section', () => ctx.slots.register({
-    name: 'settings.section',
-    id: 'config-manager-sync',
-    order: 70,
-    label: () => syncT('section.label'),
-    locale: SYNC_NS,
-    inject: () => ({ api: syncApi }),
-  }, SyncSettingsView))
 }

package/src/client/locales.ts

@@ -12,6 +12,7 @@ export const zh = {
   'view.export': '导出备份',
   'view.import': '导入恢复',
   'view.snapshots': '快照恢复',
+  'view.sync': '远程同步',
   // 公共
   'common.close': '关闭',
   'common.cancel': '取消',
@@ -128,6 +129,7 @@ export const en: Record<keyof typeof zh, string> = {
   'view.export': 'Export',
   'view.import': 'Import',
   'view.snapshots': 'Snapshots & Restore',
+  'view.sync': 'Remote Sync',
   'common.close': 'Close',
   'common.cancel': 'Cancel',
   'common.back': 'Back',

package/src/client/run-store.test.ts

@@ -498,3 +498,19 @@ test('subscribe/notify: patch 触发监听器，退订后不再通知', () => {
   store.patch({ view: 'import' })
   assert.notEqual(store.getSnapshot(), before)
 })
+
+test('回归: subscribe/getSnapshot 以裸引用调用时 this 绑定实例（useSyncExternalStore 的调用方式）', () => {
+  const store = new RunStore({ storage: null })
+  // React 内部以无接收者方式调用 getSnapshot()/subscribe(listener) ——
+  // 若为原型方法则 this 为 undefined 直接崩溃（备份与迁移页空白根因）。
+  const bareGet = store.getSnapshot
+  const bareSub = store.subscribe
+  assert.equal(bareGet().view, 'export', '裸引用 getSnapshot 不崩（this 绑定实例）')
+  let notified = 0
+  const unsub = bareSub(() => { notified += 1 })
+  store.patch({ view: 'import' })
+  assert.equal(notified, 1, '裸引用 subscribe 不崩且能退订')
+  unsub()
+  store.patch({ view: 'export' })
+  assert.equal(notified, 1, '退订后不再通知')
+})

package/src/client/run-store.ts

@@ -344,18 +344,27 @@ export class RunStore {
 
   /* ------------------------------------------------------------- 订阅 */
 
-  /** 订阅 store 变化（useSyncExternalStore 的 subscribe）。 */
-  subscribe(listener: () => void): () => void {
+  /**
+   * 订阅 store 变化（useSyncExternalStore 的 subscribe）。
+   *
+   * 必须为箭头函数类字段：React 以裸引用（`runStore.subscribe`）调用它，
+   * 无接收者，若为原型方法则 `this` 为 undefined，`this.listeners` 直接崩溃。
+   */
+  subscribe = (listener: () => void): (() => void) => {
     this.listeners.add(listener)
     return () => {
       this.listeners.delete(listener)
     }
   }
 
-  /** 当前完整快照（引用稳定：仅在 patch 后替换，适合 useSyncExternalStore）。 */
-  getSnapshot(): StoreState {
-    return this.state
-  }
+  /**
+   * 当前完整快照（引用稳定：仅在 patch 后替换，适合 useSyncExternalStore）。
+   *
+   * 必须为箭头函数类字段：React 以裸引用（`runStore.getSnapshot`）调用它，
+   * 无接收者，若为原型方法则 `this` 为 undefined，`this.state` 抛 TypeError，
+   * 导致整个 settings.section 槽位渲染崩溃（备份与迁移页空白）。
+   */
+  getSnapshot = (): StoreState => this.state
 
   private notify(): void {
     for (const listener of this.listeners) listener()

package/src/client/sync/SyncSettingsView.tsx

@@ -1,7 +1,8 @@
 /**
- * 远程同步设置区块（settings.section: config-manager-sync）。
+ * 远程同步面板（备份与迁移页的第 4 个 tab 内容）。
  *
- * 独立 settings 页（不触碰并行会话的 ConfigManagerSection.tsx 三 tab 容器）：
+ * 独立设置页壳（sectionHeader/close/自身 tab）已移除 —— tab 容器由
+ * ConfigManagerSection 统一渲染，本组件只输出内容体：
  * - 仓库配置表单：repoUrl（必填）+ 认证 token（可选，写入 DSH credentials 的提示）
  *   + gitBin（可选）；
  * - 私有仓库强制提示横幅（常驻）；
@@ -16,7 +17,6 @@
  */
 import { useEffect, useState } from 'react'
 import type { ChangeEvent } from 'react'
-import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type { TranslateNS } from '../client-types.ts'
 import type { SyncPullReport, SyncPushReport } from '../../sync/sync-engine.ts'
 import { Badge, Banner, Button, Card, SectionTitle, Spinner } from '../common/ui.tsx'
@@ -29,15 +29,11 @@ import {
 } from './sync-view.ts'
 import css from '../config-manager.module.css'
 
-export interface SyncSettingsSectionInjected {
+export interface SyncSettingsViewProps {
   api: SyncApi
+  t: TranslateNS<'config-manager-sync'>
 }
 
-export type SyncSettingsViewProps =
-  & PropsRuntime<'settings.section'>
-  & SyncSettingsSectionInjected
-  & { t: TranslateNS<'config-manager-sync'> }
-
 interface SyncUiState {
   loading: boolean
   loadError: string | null
@@ -65,7 +61,7 @@ const initial: SyncUiState = {
   error: null,
 }
 
-export function SyncSettingsView({ close, api, t }: SyncSettingsViewProps) {
+export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
   const [state, setState] = useState<SyncUiState>(initial)
   const patch = (p: Partial<SyncUiState>): void => setState((s) => ({ ...s, ...p }))
 
@@ -120,16 +116,8 @@ export function SyncSettingsView({ close, api, t }: SyncSettingsViewProps) {
   const pullView = pullReportView(state.pullReport)
 
   return (
-    <div className={css.section}>
-      <div className={css.sectionHeader}>
-        <div className={css.viewTabs}>
-          <span role="tab" aria-selected="true" data-active className={css.viewTab}>{t('section.label')}</span>
-        </div>
-        <button type="button" className={css.iconButton} title={t('common.close')} aria-label={t('common.close')} onClick={close}>×</button>
-      </div>
-      <div className={css.sectionBody}>
-        <div className={css.viewBody}>
-          <SectionTitle title={t('section.label')} subtitle={t('section.description')} />
+    <div className={css.viewBody}>
+      <SectionTitle title={t('section.label')} subtitle={t('section.description')} />
 
           {/* 私有仓库强制提示 */}
           <Banner kind="warn">{PRIVATE_REPO_HINT}</Banner>
@@ -254,8 +242,6 @@ export function SyncSettingsView({ close, api, t }: SyncSettingsViewProps) {
               {pullView.previewHint !== '' && <Banner kind="info">{pullView.previewHint}</Banner>}
             </Card>
           )}
-        </div>
-      </div>
     </div>
   )
-}
+}

package/src/client/sync/sync-api.ts

@@ -112,7 +112,7 @@ async function postJson<T>(path: string, body: unknown): Promise<T> {
   }
 }
 
-/** 远程同步浏览器半数据入口（settings.section: config-manager-sync 的注入业务面） */
+/** 远程同步浏览器半数据入口（备份与迁移页第 4 个 tab 的注入业务面） */
 export class SyncApi {
   /** 读取同步状态（配置 / 凭据 / 上次同步时间 / 分区数） */
   async status(): Promise<SyncStatusResponse> {