@linxin666/dsh-client-ui-task-board 0.3.11 → 0.3.13

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

@@ -1,3 +1,13 @@
+/**
+ * Board view mounting (dsh-task-board wrapper).
+ *
+ * The single-occupant takeover lifecycle — container injection into the
+ * center column, sibling eviction, remount resilience, sidebar click-out —
+ * lives exactly once in shared/client/panel-mount-core.ts (synced copy); this
+ * wrapper supplies the board tree, view dataset key, CSS module, and the html
+ * attribute names. Those names are pinned by board.module.css, skins, and the
+ * semantic attributes contract.
+ */
 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). */

package/lib/types/client/panel-mount-core.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Center-column panel takeover lifecycle.
+ *
+ * The `conversation` slot is single-occupant (ui-conversation) and external
+ * plugins cannot declare slots, so a family panel takes over the center
+ * column at the DOM level: a container is appended inside the center column
+ * (`[class*="centerCol"]`, the 0.1.0-rc.6+ AppFrame layout; previously
+ * `[data-pane="conversation"]` on older shells — the mount selector keeps
+ * both, ssh #243 / task-board #107) as an extra trailing child React never
+ * manages, and a stylesheet rule hides the conversation content while the
+ * panel is active. Toggling is a data attribute on <html> — no React
+ * involvement, so the conversation subtree underneath stays mounted and
+ * stateful.
+ *
+ * Consuming plugins keep a thin wrapper that supplies the panel tree,
+ * container attribute names, and stylesheet class; those names are pinned by
+ * each package's CSS, skins, and the semantic-attributes contract. The
+ * sidebar row toggling the panel shares its core the same way
+ * (shared/client/sidebar-entry-core.ts, synced copy).
+ */
+import { type Root } from 'react-dom/client';
+/** Options for mountCenterPanel; dsh-ssh mount.tsx and dsh-task-board board-mount.tsx are the canonical consumers. */
+export interface CenterPanelMountOptions {
+    /** Render the panel React tree into a root (initial mount, remount, locale refresh). */
+    render: (root: Root) => void;
+    /** dataset key of the injected container's view attribute, e.g. `dshSshView` for `data-dsh-ssh-view`. */
+    viewDatasetKey: string;
+    /** value of the container's L2 `data-dsh-plugin` semantic attribute. */
+    pluginName: string;
+    /** stylesheet class applied to the injected container. */
+    viewClassName: string;
+    /** <html> attribute set while this panel is active. */
+    activeAttribute: string;
+    /** the sibling panel's active attribute, removed from <html> when this panel opens. */
+    siblingActiveAttribute: string;
+    /** detail value this panel broadcasts on the cross-plugin activation event. */
+    panelName: string;
+    /** sibling detail value whose activation closes this panel. */
+    siblingPanelName: string;
+    /** open flag of the owning controller. */
+    isOpen: () => boolean;
+    /** close the panel, handing the center column back to the conversation. */
+    close: () => void;
+    /** subscribe to the owning controller's open-state changes; returns an unsubscriber. */
+    subscribe: (listener: () => void) => () => void;
+    /** locale-change source; when given, re-renders an open panel on a Language switch. */
+    locale?: {
+        subscribe(listener: () => void): () => void;
+    };
+}
+/**
+ * Mount a family panel into the center column and bind its visibility to the
+ * owning controller's open state.
+ * @returns disposer unmounting the tree and restoring the column.
+ */
+export declare function mountCenterPanel(options: CenterPanelMountOptions): () => 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.11",
+  "version": "0.3.13",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "dsh": {
     "engines": {
-      "dsh": ">=0.1.2-alpha.3"
+      "dsh": ">=0.1.2-alpha.4"
     },
     "bundle": {
       "patch": "./cordis.patch.yml"
@@ -48,23 +48,23 @@
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-agent": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-agent-presets": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-api-gateway": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-workspace": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-api-session-controller": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-connection": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-store": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-commands": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-settings": "^0.1.2-alpha.3",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.2-alpha.3",
+    "@deepseek-ai/dsh-agent": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-agent-presets": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-api-gateway": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-workspace": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-api-session-controller": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-connection": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-store": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-commands": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-settings": "^0.1.2-alpha.4",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.2-alpha.4",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
     "@types/react-dom": "^18.3.5",

package/src/client/board-mount.tsx

@@ -1,39 +1,22 @@
 /**
- * Board view mounting.
+ * Board view mounting (dsh-task-board wrapper).
  *
- * The `conversation` slot is single-occupant (ui-conversation) and external
- * plugins cannot declare slots, so the board takes over the center column at
- * the DOM level: a container is appended inside the center column
- * (`[class*="centerCol"]`, the dsh 0.1.0-rc.6 AppFrame layout; previously
- * `[data-pane="conversation"]` on older shells — the mount selector keeps both)
- * as an extra trailing child
- * React never manages, and a stylesheet
- * rule hides the conversation content while the board is active. Toggling is
- * a data attribute on <html> — no React involvement, so the conversation
- * subtree underneath stays mounted and stateful.
+ * The single-occupant takeover lifecycle — container injection into the
+ * center column, sibling eviction, remount resilience, sidebar click-out —
+ * lives exactly once in shared/client/panel-mount-core.ts (synced copy); this
+ * wrapper supplies the board tree, view dataset key, CSS module, and the html
+ * attribute names. Those names are pinned by board.module.css, skins, and the
+ * semantic attributes contract.
  */
-import { createRoot, type Root } from 'react-dom/client'
 import type { BoardController } from '../core/controller.ts'
 import { TaskBoard } from './board/TaskBoard.tsx'
+import { mountCenterPanel } from './panel-mount-core.ts'
 import type { LocaleRefreshSource } from './sidebar-entry.ts'
 import css from './board.module.css'
 
 /** The injected board container (kept in the DOM, hidden when inactive). */
 export const BOARD_VIEW_SELECTOR = '[data-dsh-taskboard-view]'
 
-const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
-const ACTIVE_ATTR = 'data-dsh-taskboard-active'
-/** The sibling panel's activation attribute (ssh), removed when this panel opens. */
-const OTHER_ACTIVE_ATTR = 'data-dsh-ssh-active'
-/** Cross-plugin activation event; detail is the activating panel name. */
-const ACTIVATE_EVENT = 'dsh-panel-activate'
-const PANEL_NAME = 'taskboard'
-
-/** Find the center column, or undefined while the frame is not mounted. */
-function conversationColumn(): HTMLElement | undefined {
-  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
-}
-
 /**
  * Mount the board React tree into the center column and bind its visibility
  * to the controller's boardOpen state.
@@ -43,83 +26,18 @@ function conversationColumn(): HTMLElement | undefined {
  * @returns disposer unmounting the tree and restoring the column.
  */
 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) {
-      if (container.isConnected) return
-      root?.unmount()
-      root = undefined
-      container.remove()
-      container = undefined
-    }
-    const column = conversationColumn()
-    if (column === undefined) return
-    container = document.createElement('div')
-    container.dataset.dshTaskboardView = ''
-    container.dataset.dshPlugin = 'task-board'
-    container.className = css.boardView
-    column.appendChild(container)
-    root = createRoot(container)
-    root.render(<TaskBoard controller={controller} />)
-  }
-
-  // The frame mounts after boot settlement; watch for the column's arrival.
-  const waitObserver = new MutationObserver(() => { ensure() })
-  waitObserver.observe(document.body, { childList: true, subtree: true })
-
-  const applyActive = (): void => {
-    if (controller.getSnapshot().boardOpen) {
-      // Single-occupant center column: opening this panel must evict the
-      // sibling panel (ssh), both its html attribute and its controller
-      // state, otherwise the two panels' visibility rules fight and the
-      // second click appears dead.
-      document.documentElement.removeAttribute(OTHER_ACTIVE_ATTR)
-      document.documentElement.setAttribute(ACTIVE_ATTR, '')
-      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
-    } else {
-      document.documentElement.removeAttribute(ACTIVE_ATTR)
-    }
-  }
-  const onOtherActivate = (event: Event): void => {
-    if ((event as CustomEvent).detail === 'ssh' && controller.getSnapshot().boardOpen) {
-      controller.closeBoard()
-    }
-  }
-  // Jump out on sidebar context clicks: clicking a session/workspace row
-  // (including the already-current one, which produces no session-change
-  // event) hands the center column back to the conversation. Capture phase,
-  // so the panel closes before the shell processes the click.
-  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
-  const onClickSidebarRow = (event: MouseEvent): void => {
-    if (!controller.getSnapshot().boardOpen) return
-    const target = event.target as HTMLElement | null
-    if (target === null) return
-    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.closeBoard()
-  }
-  document.addEventListener('click', onClickSidebarRow, true)
-  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
-  const unsubscribe = controller.subscribe(applyActive)
-  applyActive()
-  ensure()
-
-  return () => {
-    document.removeEventListener('click', onClickSidebarRow, true)
-    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
-    waitObserver.disconnect()
-    unsubscribe()
-    unsubscribeLocale?.()
-    document.documentElement.removeAttribute(ACTIVE_ATTR)
-    root?.unmount()
-    root = undefined
-    container?.remove()
-    container = undefined
-  }
+  return mountCenterPanel({
+    render: root => root.render(<TaskBoard controller={controller} />),
+    viewDatasetKey: 'dshTaskboardView',
+    pluginName: 'task-board',
+    viewClassName: css.boardView,
+    activeAttribute: 'data-dsh-taskboard-active',
+    siblingActiveAttribute: 'data-dsh-ssh-active',
+    panelName: 'taskboard',
+    siblingPanelName: 'ssh',
+    isOpen: () => controller.getSnapshot().boardOpen,
+    close: () => controller.closeBoard(),
+    subscribe: listener => controller.subscribe(listener),
+    locale,
+  })
 }

package/src/client/panel-mount-core.ts

@@ -0,0 +1,147 @@
+// Generated by scripts/sync-shared.mjs from shared/client/panel-mount-core.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Center-column panel takeover lifecycle.
+ *
+ * The `conversation` slot is single-occupant (ui-conversation) and external
+ * plugins cannot declare slots, so a family panel takes over the center
+ * column at the DOM level: a container is appended inside the center column
+ * (`[class*="centerCol"]`, the 0.1.0-rc.6+ AppFrame layout; previously
+ * `[data-pane="conversation"]` on older shells — the mount selector keeps
+ * both, ssh #243 / task-board #107) as an extra trailing child React never
+ * manages, and a stylesheet rule hides the conversation content while the
+ * panel is active. Toggling is a data attribute on <html> — no React
+ * involvement, so the conversation subtree underneath stays mounted and
+ * stateful.
+ *
+ * Consuming plugins keep a thin wrapper that supplies the panel tree,
+ * container attribute names, and stylesheet class; those names are pinned by
+ * each package's CSS, skins, and the semantic-attributes contract. The
+ * sidebar row toggling the panel shares its core the same way
+ * (shared/client/sidebar-entry-core.ts, synced copy).
+ */
+import { createRoot, type Root } from 'react-dom/client'
+
+/** Options for mountCenterPanel; dsh-ssh mount.tsx and dsh-task-board board-mount.tsx are the canonical consumers. */
+export interface CenterPanelMountOptions {
+  /** Render the panel React tree into a root (initial mount, remount, locale refresh). */
+  render: (root: Root) => void
+  /** dataset key of the injected container's view attribute, e.g. `dshSshView` for `data-dsh-ssh-view`. */
+  viewDatasetKey: string
+  /** value of the container's L2 `data-dsh-plugin` semantic attribute. */
+  pluginName: string
+  /** stylesheet class applied to the injected container. */
+  viewClassName: string
+  /** <html> attribute set while this panel is active. */
+  activeAttribute: string
+  /** the sibling panel's active attribute, removed from <html> when this panel opens. */
+  siblingActiveAttribute: string
+  /** detail value this panel broadcasts on the cross-plugin activation event. */
+  panelName: string
+  /** sibling detail value whose activation closes this panel. */
+  siblingPanelName: string
+  /** open flag of the owning controller. */
+  isOpen: () => boolean
+  /** close the panel, handing the center column back to the conversation. */
+  close: () => void
+  /** subscribe to the owning controller's open-state changes; returns an unsubscriber. */
+  subscribe: (listener: () => void) => () => void
+  /** locale-change source; when given, re-renders an open panel on a Language switch. */
+  locale?: { subscribe(listener: () => void): () => void }
+}
+
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
+/** Cross-plugin activation event; detail is the activating panel name. */
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+// Sidebar rows whose clicks hand the center column back to the conversation
+// (including the already-current row, which produces no session-change
+// event). Capture phase, so the panel closes before the shell processes the
+// click.
+const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+
+/** Find the center column, or undefined while the frame is not mounted. */
+function conversationColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
+}
+
+/**
+ * Mount a family panel into the center column and bind its visibility to the
+ * owning controller's open state.
+ * @returns disposer unmounting the tree and restoring the column.
+ */
+export function mountCenterPanel(options: CenterPanelMountOptions): () => void {
+  let root: Root | undefined
+  let container: HTMLDivElement | undefined
+  let unsubscribeLocale: (() => void) | undefined
+  try {
+    unsubscribeLocale = options.locale?.subscribe(() => {
+      if (root !== undefined) options.render(root)
+    })
+  } catch { /* locale service absent: the panel follows its next natural re-render */ }
+
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      // The conversation pane was replaced; drop the stale tree and remount.
+      root?.unmount()
+      root = undefined
+      container.remove()
+      container = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset[options.viewDatasetKey] = ''
+    container.dataset.dshPlugin = options.pluginName
+    container.className = options.viewClassName
+    column.appendChild(container)
+    root = createRoot(container)
+    options.render(root)
+  }
+
+  // The frame mounts after boot settlement; watch for the column's arrival.
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  const applyActive = (): void => {
+    if (options.isOpen()) {
+      // Single-occupant center column: opening this panel must evict the
+      // sibling panel, both its html attribute and its controller state,
+      // otherwise the two panels' visibility rules fight and the second
+      // click appears dead.
+      document.documentElement.removeAttribute(options.siblingActiveAttribute)
+      document.documentElement.setAttribute(options.activeAttribute, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: options.panelName }))
+    } else {
+      document.documentElement.removeAttribute(options.activeAttribute)
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    if ((event as CustomEvent).detail === options.siblingPanelName && options.isOpen()) {
+      options.close()
+    }
+  }
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!options.isOpen()) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) options.close()
+  }
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = options.subscribe(applyActive)
+  applyActive()
+  ensure()
+
+  return () => {
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    unsubscribeLocale?.()
+    document.documentElement.removeAttribute(options.activeAttribute)
+    root?.unmount()
+    root = undefined
+    container?.remove()
+    container = undefined
+  }
+}

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

@@ -72,7 +72,10 @@
 }
 
 .description {
-  color: var(--dsw-alias-label-tertiary);
+  /* Secondary, not tertiary: skins whose tertiary token is tuned for large
+     print leave 12-13px hint text below readable contrast (orca-link #778399
+     on cream measures ~3.4:1). */
+  color: var(--dsw-alias-label-secondary);
   font-size: 13px;
   line-height: 1.5;
 }
@@ -106,7 +109,7 @@
 }
 
 .readOnly {
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-label-secondary);
   margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
@@ -130,7 +133,10 @@
 
 .failed {
   min-width: 0;
-  color: var(--dsw-alias-label-error);
+  /* The suite's error alias is state-error-primary; a label-error token does
+     not exist, so the var() would resolve to nothing and the message would
+     inherit the ink color, losing the failure signal. */
+  color: var(--dsw-alias-state-error-primary, #b42318);
   flex: 1;
   margin: 0;
   font-size: 12px;
@@ -278,7 +284,7 @@
 }
 
 .inputInvalid {
-  border: 1px solid var(--dsw-alias-label-error);
+  border: 1px solid var(--dsw-alias-state-error-primary, #b42318);
   background: var(--dsw-alias-bg-layer-3);
   height: 34px;
   font: inherit;
@@ -290,9 +296,9 @@
 }
 
 .inputInvalid:focus-visible {
-  outline: 2px solid var(--dsw-alias-label-error);
+  outline: 2px solid var(--dsw-alias-state-error-primary, #b42318);
   outline-offset: 1px;
-  border-color: var(--dsw-alias-label-error);
+  border-color: var(--dsw-alias-state-error-primary, #b42318);
 }
 
 .selectWrap {
@@ -384,14 +390,14 @@
 }
 
 .invalid {
-  color: var(--dsw-alias-label-error);
+  color: var(--dsw-alias-state-error-primary, #b42318);
   margin: 0;
   font-size: 12px;
   line-height: 1.5;
 }
 
 .hint {
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-label-secondary);
   margin: 0;
   font-size: 12px;
   line-height: 1.5;