@linxin666/dsh-client-ui-task-board 0.1.11 → 0.1.13

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

@@ -8,7 +8,7 @@
  * shell fails the whole boot when a plugin apply throws, and an external
  * plugin must not take the GUI down.
  */
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
+import type { ClientContext, SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-runtime/client';
 import { type TaskBoardKey } from './locales.ts';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {
@@ -34,6 +34,18 @@ export interface SettingsPluginItemOwnerProps {
     /** Marker field: card owner props are intentionally empty. */
     children?: never;
 }
+declare module '@deepseek-ai/cordis' {
+    interface Context {
+        /**
+         * Optional rc.6 compatibility binder provided by dsh-web-ui-settings;
+         * absent when that group plugin is not installed, so callers fall back to
+         * the official settings scope.
+         */
+        webUiSettings?: {
+            bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S>;
+        };
+    }
+}
 /** Required services (fiber inject waiting — the runtime must be up first). */
 export declare const inject: string[];
 /**

package/lib/types/core/store.d.ts

@@ -7,9 +7,26 @@ export interface TaskStore {
     save(tasks: readonly TaskRecord[]): void;
     /** Drop the persisted ledger (leaves the in-memory state alone). */
     clear(): void;
+    /**
+     * Subscribe to ledger changes written by ANOTHER tab of the same origin
+     * (browser storage events). The board controller reloads the ledger on
+     * such a change, so a task deleted in one tab cannot keep firing (or be
+     * written back) from the stale in-memory copy of another tab. No-op when
+     * the backend has no cross-instance channel (in-memory store).
+     */
+    subscribeExternal?(listener: () => void): () => void;
 }
 /** Storage key for the task ledger document. */
 export declare const DEFAULT_STORAGE_KEY = "dsh.taskBoard.v1";
+/** Structural shape of the storage event fired in sibling tabs (DOM-free). */
+export interface StorageChangeEvent {
+    key: string | null;
+}
+/** The event-target face the store needs for cross-tab notifications. */
+export interface StorageEvents {
+    addEventListener(type: 'storage', listener: (event: StorageChangeEvent) => void): void;
+    removeEventListener(type: 'storage', listener: (event: StorageChangeEvent) => void): void;
+}
 /** A task record is structurally valid if it round-trips through the UI. */
 export declare function isTaskRecord(value: unknown): value is TaskRecord;
 /** Parse + validate a persisted ledger document; invalid rows are dropped. */
@@ -18,14 +35,25 @@ export declare function parseLedger(raw: string | null): TaskRecord[];
 export declare class LocalStorageTaskStore implements TaskStore {
     private readonly key;
     private readonly storage;
+    private readonly events;
     /**
      * @param key - storage key for the ledger document.
      * @param storage - storage backend (defaults to the global localStorage; tests inject fakes).
+     * @param events - storage-event target for cross-tab notifications (defaults
+     *   to the browser global; undefined in non-browser runtimes, where the
+     *   subscription becomes a no-op).
      */
-    constructor(key?: string, storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined);
+    constructor(key?: string, storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined, events?: StorageEvents | undefined);
     load(): TaskRecord[];
     save(tasks: readonly TaskRecord[]): void;
     clear(): void;
+    /**
+     * Cross-tab change subscription (see {@link TaskStore.subscribeExternal}).
+     * The browser fires the storage event in every OTHER tab of the same origin
+     * when one tab writes; a null key means the whole storage was cleared. Both
+     * cases reload the ledger here; unrelated keys are ignored.
+     */
+    subscribeExternal(listener: () => void): () => void;
 }
 /** In-memory backend (tests, and a fallback when storage is unavailable). */
 export declare class InMemoryTaskStore implements TaskStore {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-task-board",
   "description": "Task board for the dsh web GUI: a sidebar entry plus a multi-column kanban view with local persistence, task details, and real execution through dsh sessions (session.prompt). Hot-pluggable — mounted via ~/.dsh/cordis.patch.yml + a profile node_modules symlink, no dsh source changes.",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -35,10 +35,6 @@
     }
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
     "react": "^18.2.0"
   },
   "dependencies": {
@@ -72,7 +68,7 @@
     "src",
     "cordis.patch.yml"
   ],
-  "license": "BSD-3-Clause",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/zhu1090093659/dsh-web-ui.git"

package/src/client/PluginSettingsCard.tsx

@@ -41,13 +41,14 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const blocked = !state.dirty || state.invalid || state.saving
+  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
   // The namespace exists but the Host does not serve it to this client (the
   // official settings allowlist omits third-party namespaces): show a card
   // that explains the gap instead of vanishing, so a missing card never
   // reads as a missing plugin.
   if (!state.exposed) {
     return (
-      <li className={css.card}>
+      <li className={cardClass}>
         <button
           type="button"
           className={css.header}
@@ -59,7 +60,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
             <span className={css.name}>{title}</span>
             <span className={css.description}>{props.t(props.descriptionKey)}</span>
           </span>
-          <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+          >
+            <path
+              d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
         {open
           ? (
@@ -72,7 +85,7 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
     )
   }
   return (
-    <li className={css.card}>
+    <li className={cardClass}>
       <button
         type="button"
         className={css.header}
@@ -85,7 +98,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
           <span className={css.description}>{props.t(props.descriptionKey)}</span>
         </span>
         {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
-        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
       </button>
       {open
         ? (
@@ -234,4 +259,4 @@ export function BooleanField(props: FieldProps & {
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
-}
+}

package/src/client/board-mount.tsx

@@ -3,8 +3,11 @@
  *
  * 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 `[data-pane="conversation"]`
- * grid item (an extra trailing child React never manages), and a stylesheet
+ * 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.
@@ -17,7 +20,7 @@ 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"]'
+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'

package/src/client/board.module.css

@@ -6,7 +6,8 @@
 
 /* --- center-column takeover (global rules, attribute-scoped) ----------------- */
 
-[data-pane='conversation'] {
+[data-pane='conversation'],
+[class*='centerCol'] {
   position: relative;
 }
 
@@ -17,6 +18,11 @@
   inset: 0;
   display: none;
   z-index: 60;
+  /* Opaque backdrop: the conversation subtree stays mounted under the view.
+     Even if the hide rule below were defeated by a stronger host inline
+     style, this background keeps sticky code-block banners (host z-index 6)
+     from showing through the active board (issue #100). */
+  background: var(--dsw-alias-bg-base);
 }
 
 /* The center column is single-occupant; the :not() guards keep the two
@@ -31,8 +37,12 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-dsh-taskboard-v
    (0.1.0-rc.6) wraps the conversation view in a node with an inline
    `display: contents`, and inline styles beat a plain stylesheet rule. Without
    it the composer (input card) stays visible at the bottom and paints over the
-   board modals' footer, hiding the run/delete buttons (issue #76). */
-html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-taskboard-view]) {
+   board modals' footer, hiding the run/delete buttons (issue #76).
+   The rule targets both the pane attribute and the center-column class so the
+   chat subtree (including the code-block copy banner, issue #100) stays hidden
+   whichever host container carries it. */
+html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-taskboard-view]),
+html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol'] > :not([data-dsh-taskboard-view]) {
   display: none !important;
 }
 

package/src/client/index.ts

@@ -8,7 +8,7 @@
  * shell fails the whole boot when a plugin apply throws, and an external
  * plugin must not take the GUI down.
  */
-import type { ClientContext, SessionId, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ClientContext, SessionId, SettingsScope, SettingsScopeSpec, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale) and its
@@ -54,6 +54,18 @@ export interface SettingsPluginItemOwnerProps {
   children?: never
 }
 
+declare module '@deepseek-ai/cordis' {
+  interface Context {
+    /**
+     * Optional rc.6 compatibility binder provided by dsh-web-ui-settings;
+     * absent when that group plugin is not installed, so callers fall back to
+     * the official settings scope.
+     */
+    webUiSettings?: { bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S> }
+  }
+}
+
+
 /** Required services (fiber inject waiting — the runtime must be up first). */
 export const inject = ['slots', 'sessions', 'workspaces', 'connection', 'settingsScope', 'locale', 'remote']
 
@@ -66,7 +78,8 @@ export function apply(ctx: ClientContext): void {
 
   // Plugin configuration card: one staged form over the `task-board` settings
   // namespace, contributed to the Web UI plugin group.
-  const settingsScope = ctx.settingsScope.bind<TaskBoardSettings>({ namespace: TASK_BOARD_NS })
+  const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
+  const settingsScope = binder.bind<TaskBoardSettings>({ namespace: TASK_BOARD_NS })
   const settingsCard = new TaskBoardSettingsCardController(settingsScope)
   ctx.slots.inject('web-ui.plugin.item', () => ctx.slots.register({
     name: 'web-ui.plugin.item',