@linxin666/dsh-client-ui-task-board 0.3.9 → 0.3.10

package/lib/types/client/board-mount.d.ts

@@ -1,10 +1,13 @@
 import type { BoardController } from '../core/controller.ts';
+import type { LocaleRefreshSource } from './sidebar-entry.ts';
 /** The injected board container (kept in the DOM, hidden when inactive). */
 export declare const BOARD_VIEW_SELECTOR = "[data-dsh-taskboard-view]";
 /**
  * Mount the board React tree into the center column and bind its visibility
  * to the controller's boardOpen state.
  * @param controller - the board controller driving the view.
+ * @param locale - locale-change source; when given, re-renders a mounted board
+ *   on a Language switch.
  * @returns disposer unmounting the tree and restoring the column.
  */
-export declare function mountBoard(controller: BoardController): () => void;
+export declare function mountBoard(controller: BoardController, locale?: LocaleRefreshSource): () => void;

package/lib/types/client/locales.d.ts

@@ -155,5 +155,7 @@ export type TaskBoardKey = keyof typeof zh;
 export type SettingsCardKey = TaskBoardKey;
 /** Active dictionary, picked by the document language at call time. */
 export declare function dictionary(): Record<TaskBoardKey, string>;
+/** Wire the SDK translate seat; pass undefined to restore the document-language pick. */
+export declare function setRuntimeTranslate(t: ((key: TaskBoardKey, params?: Record<string, string>) => string) | undefined): void;
 /** Translate a key with optional {name} template params. */
 export declare function t(key: TaskBoardKey, params?: Record<string, string>): string;

package/lib/types/client/sidebar-entry-core.d.ts

@@ -34,6 +34,16 @@ export interface SidebarEntryOptions {
     label(): string;
     /** Optional localized tooltip (title attribute). */
     tooltip?(): string;
+    /**
+     * Optional locale-change subscription: re-applies label / aria-label /
+     * tooltip whenever the active locale changes. Plain-DOM rows would
+     * otherwise keep the label captured at mount; pass the SDK locale runtime
+     * subscription (ctx.locale.subscribe) so the row follows the language
+     * switch without a reload.
+     */
+    refresh?: {
+        subscribe(listener: () => void): () => void;
+    };
     /** Click action (open/toggle the owning panel). */
     onToggle(): void;
     /** Family-block position: 'before' inserts ahead of sibling plugin rows, 'after' behind them. */

package/lib/types/client/sidebar-entry.d.ts

@@ -14,10 +14,16 @@
 import type { BoardController } from '../core/controller.ts';
 /** Stable data attribute identifying the injected entry row. */
 export declare const ENTRY_SELECTOR = "[data-dsh-taskboard-entry]";
+/** Locale-change subscription the shared core asks for (ctx.locale.subscribe shape). */
+export interface LocaleRefreshSource {
+    subscribe(listener: () => void): () => void;
+}
 /**
  * Mount the sidebar entry, waiting for the shell to render and self-healing
  * on later React re-renders.
  * @param controller - the board controller the entry toggles.
+ * @param locale - locale-change source; when given, re-applies the label on
+ *   a Language switch (the plain-DOM row otherwise keeps the mount-time copy).
  * @returns disposer removing the entry and its observers.
  */
-export declare function mountSidebarEntry(controller: BoardController): () => void;
+export declare function mountSidebarEntry(controller: BoardController, locale?: LocaleRefreshSource): () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-task-board",
   "description": "Host-authoritative task board for the DSH Web GUI with real session execution, Host cron scheduling, and optional cross-platform idle-sleep protection; mounted without DSH source changes.",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/board-mount.tsx

@@ -15,6 +15,7 @@
 import { createRoot, type Root } from 'react-dom/client'
 import type { BoardController } from '../core/controller.ts'
 import { TaskBoard } from './board/TaskBoard.tsx'
+import type { LocaleRefreshSource } from './sidebar-entry.ts'
 import css from './board.module.css'
 
 /** The injected board container (kept in the DOM, hidden when inactive). */
@@ -37,11 +38,19 @@ function conversationColumn(): HTMLElement | undefined {
  * Mount the board React tree into the center column and bind its visibility
  * to the controller's boardOpen state.
  * @param controller - the board controller driving the view.
+ * @param locale - locale-change source; when given, re-renders a mounted board
+ *   on a Language switch.
  * @returns disposer unmounting the tree and restoring the column.
  */
-export function mountBoard(controller: BoardController): () => void {
+export function mountBoard(controller: BoardController, locale?: LocaleRefreshSource): () => void {
   let root: Root | undefined
   let container: HTMLDivElement | undefined
+  let unsubscribeLocale: (() => void) | undefined
+  try {
+    unsubscribeLocale = locale?.subscribe(() => {
+      if (root !== undefined) root.render(<TaskBoard controller={controller} />)
+    })
+  } catch { /* locale service absent: the board follows its next natural re-render */ }
 
   const ensure = (): void => {
     if (container !== undefined) {
@@ -106,6 +115,7 @@ export function mountBoard(controller: BoardController): () => void {
     document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
     waitObserver.disconnect()
     unsubscribe()
+    unsubscribeLocale?.()
     document.documentElement.removeAttribute(ACTIVE_ATTR)
     root?.unmount()
     root = undefined

package/src/client/index.ts

@@ -27,7 +27,7 @@ import { claimTaskboardApply, releaseTaskboardApply } from './apply-guard.ts'
 import { mountBoard } from './board-mount.tsx'
 import { mountSidebarEntry } from './sidebar-entry.ts'
 import { TaskBoardSettingsCard, TaskBoardSettingsCardController, type TaskBoardSettings } from './TaskBoardSettingsCard.tsx'
-import { en, zh, type TaskBoardKey } from './locales.ts'
+import { en, zh, setRuntimeTranslate, type TaskBoardKey } from './locales.ts'
 import { HttpTaskBoardHostTransport } from './host-api.ts'
 import { reportDailyHeartbeat } from './telemetry.ts'
 
@@ -157,6 +157,12 @@ export function apply(ctx: ClientContext): void {
     }
   }, 'task-board: dictionaries')
 
+  // Wire the SDK translate seat into the module-level t (sidebar row and
+  // other plain-DOM callers): reads the active locale at call time, so they
+  // follow the Language setting without a reload. The register effect above
+  // guarantees the dictionaries exist before the first read.
+  try { setRuntimeTranslate(ctx.locale.bind(NS)) } catch { /* locale missing: document-language fallback stays */ }
+
   // Plugin configuration card: one staged form over the `task-board` settings
   // namespace, contributed to the Web UI plugin group.
   const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
@@ -246,8 +252,8 @@ export function apply(ctx: ClientContext): void {
     void pushPresetOptions()
     disposers.push(ctx.on('connection/reset', () => { void pushPresetOptions() }))
     try {
-      disposers.push(mountSidebarEntry(controller))
-      disposers.push(mountBoard(controller))
+      disposers.push(mountSidebarEntry(controller, ctx.locale))
+      disposers.push(mountBoard(controller, ctx.locale))
     } catch (error) {
       // DOM failures degrade the board, never the GUI.
       console.error('[dsh-task-board] mount failed:', error)

package/src/client/locales.ts

@@ -307,8 +307,23 @@ export function dictionary(): Record<TaskBoardKey, string> {
   return lang.toLowerCase().startsWith('en') ? en : zh
 }
 
+/**
+ * SDK translate seat wired by the browser apply() once ctx.locale is bound
+ * (setRuntimeTranslate). When present it reads the ACTIVE locale at call
+ * time, so plain-DOM surfaces (sidebar row, toggles) follow a runtime
+ * language switch; the document-language pick above stays only as the
+ * unwired fallback (locale service absent, module-scope early callers).
+ */
+let runtimeT: ((key: TaskBoardKey, params?: Record<string, string>) => string) | undefined
+
+/** Wire the SDK translate seat; pass undefined to restore the document-language pick. */
+export function setRuntimeTranslate(t: ((key: TaskBoardKey, params?: Record<string, string>) => string) | undefined): void {
+  runtimeT = t
+}
+
 /** Translate a key with optional {name} template params. */
 export function t(key: TaskBoardKey, params?: Record<string, string>): string {
+  if (runtimeT !== undefined) return runtimeT(key, params)
   let text: string = dictionary()[key]
   if (params !== undefined) {
     for (const [name, value] of Object.entries(params)) {

package/src/client/sidebar-entry-core.ts

@@ -36,6 +36,14 @@ export interface SidebarEntryOptions {
   label(): string
   /** Optional localized tooltip (title attribute). */
   tooltip?(): string
+  /**
+   * Optional locale-change subscription: re-applies label / aria-label /
+   * tooltip whenever the active locale changes. Plain-DOM rows would
+   * otherwise keep the label captured at mount; pass the SDK locale runtime
+   * subscription (ctx.locale.subscribe) so the row follows the language
+   * switch without a reload.
+   */
+  refresh?: { subscribe(listener: () => void): () => void }
   /** Click action (open/toggle the owning panel). */
   onToggle(): void
   /** Family-block position: 'before' inserts ahead of sibling plugin rows, 'after' behind them. */
@@ -76,7 +84,7 @@ function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
 }
 
 /** Build the entry row (a detached button; insert once the shell is up). */
-function createEntry(options: SidebarEntryOptions): HTMLButtonElement {
+function createEntry(options: SidebarEntryOptions): { entry: HTMLButtonElement; applyLabel: () => void } {
   const entry = document.createElement('button')
   entry.type = 'button'
   entry.setAttribute(options.rowAttribute, '')
@@ -85,12 +93,20 @@ function createEntry(options: SidebarEntryOptions): HTMLButtonElement {
     entry.setAttribute('data-dsh-part', 'sidebar-entry')
   }
   entry.className = options.css['entry'] ?? ''
-  entry.setAttribute('aria-label', options.label())
-  if (options.tooltip !== undefined) entry.setAttribute('title', options.tooltip())
-  entry.innerHTML = '<span class="' + (options.css['entryIcon'] ?? '') + '">' + options.icon
-    + '</span><span class="' + (options.css['entryLabel'] ?? '') + '">' + options.label() + '</span>'
+  const labelSpan = document.createElement('span')
+  labelSpan.className = options.css['entryLabel'] ?? ''
+  const iconSpan = document.createElement('span')
+  iconSpan.className = options.css['entryIcon'] ?? ''
+  iconSpan.innerHTML = options.icon
+  entry.append(iconSpan, labelSpan)
+  const applyLabel = (): void => {
+    entry.setAttribute('aria-label', options.label())
+    if (options.tooltip !== undefined) entry.setAttribute('title', options.tooltip())
+    labelSpan.textContent = options.label()
+  }
+  applyLabel()
   entry.addEventListener('click', options.onToggle)
-  return entry
+  return { entry, applyLabel }
 }
 
 /** Re-insert the entry after the New Session row (before the browser region). */
@@ -132,9 +148,18 @@ export function mountSidebarEntry(options: SidebarEntryOptions): () => void {
   if (typeof document !== 'undefined' && document.querySelector(options.rowSelector) !== null) {
     return () => {}
   }
-  const entry = createEntry(options)
+  const { entry, applyLabel } = createEntry(options)
   let root: HTMLElement | undefined
   let placed = false
+  let unsubscribeRefresh: (() => void) | undefined
+  if (options.refresh !== undefined) {
+    try {
+      unsubscribeRefresh = options.refresh.subscribe(applyLabel)
+    } catch {
+      // A throwing subscription must not break the mount; the label stays at
+      // its initial value and the next reload resolves it again.
+    }
+  }
 
   const tryPlace = (): void => {
     if (root !== undefined && !root.isConnected) {
@@ -202,6 +227,7 @@ export function mountSidebarEntry(options: SidebarEntryOptions): () => void {
   return () => {
     waitObserver.disconnect()
     rootObserver.disconnect()
+    unsubscribeRefresh?.()
     unsubscribeActive?.()
     entry.remove()
   }

package/src/client/sidebar-entry.ts

@@ -22,13 +22,18 @@ export const ENTRY_SELECTOR = '[data-dsh-taskboard-entry]'
 /** Inline icon normalized to the shell's 18px navigation glyph size. */
 const ICON = '<svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5"/><path d="M2 6.5h12M6.5 6.5v7"/></svg>'
 
+/** Locale-change subscription the shared core asks for (ctx.locale.subscribe shape). */
+export interface LocaleRefreshSource { subscribe(listener: () => void): () => void }
+
 /**
  * Mount the sidebar entry, waiting for the shell to render and self-healing
  * on later React re-renders.
  * @param controller - the board controller the entry toggles.
+ * @param locale - locale-change source; when given, re-applies the label on
+ *   a Language switch (the plain-DOM row otherwise keeps the mount-time copy).
  * @returns disposer removing the entry and its observers.
  */
-export function mountSidebarEntry(controller: BoardController): () => void {
+export function mountSidebarEntry(controller: BoardController, locale?: LocaleRefreshSource): () => void {
   return mountSharedSidebarEntry({
     rowAttribute: 'data-dsh-taskboard-entry',
     rowSelector: ENTRY_SELECTOR,
@@ -36,6 +41,7 @@ export function mountSidebarEntry(controller: BoardController): () => void {
     icon: ICON,
     css,
     label: () => t('entry.label'),
+    refresh: locale === undefined ? undefined : { subscribe: (listener) => locale.subscribe(listener) },
     onToggle: () => { controller.toggleBoard() },
     position: 'before',
     familySelectors: ['[data-dsh-taskboard-entry]', '[data-dsh-ssh-entry]'],