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

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.12",
+  "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": {

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;
 }
 

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

@@ -1,60 +1,83 @@
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
 .card {
-  list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
   background: var(--dsw-alias-bg-layer-3);
-  overflow: hidden;
+  border-radius: 12px;
+  list-style: none;
   transition: border-color 0.16s, background 0.16s;
 }
 
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
 .cardOpen {
   background: var(--dsw-alias-bg-layer-2);
   border-color: var(--dsw-alias-label-dimmed);
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  appearance: none;
   width: 100%;
-  padding: 10px 14px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
   font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
 }
 
-.header:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
 }
 
 .headText {
-  display: flex;
   flex-direction: column;
-  gap: 2px;
   flex: 1;
+  gap: 4px;
   min-width: 0;
+  display: flex;
 }
 
 .name {
-  font-weight: 600;
   color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .description {
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .pending {
-  font-size: 12px;
-  color: var(--dsw-alias-state-warn-primary);
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .chevron {
-  transition: transform 120ms ease;
   color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
 }
 
 .chevronOpen {
@@ -62,51 +85,59 @@
 }
 
 .body {
-  padding: 0 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
 }
 
 .readOnly {
-  margin: 0;
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .notExposed {
-  margin: 0;
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-state-warn-primary);
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  border-top: 1px solid var(--dsw-alias-border-l2);
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
 }
 
 .failed {
-  margin: 0 auto 0 0;
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
 .discard,
 .save {
-  padding: 5px 12px;
-  border-radius: 6px;
+  appearance: none;
   font: inherit;
-  font-size: 13px;
   cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .discard {
-  border: 1px solid var(--dsw-alias-border-l2);
-  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
   color: var(--dsw-alias-label-secondary);
+  background: transparent;
 }
 
 .discard:hover:not(:disabled) {
@@ -115,154 +146,153 @@
 }
 
 .save {
-  border: 1px solid var(--dsw-alias-button-info-fill);
-  background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.save:hover:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-}
-
-.discard:active:not(:disabled),
-.save:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.discard:focus-visible:not(:disabled),
-.save:focus-visible:not(:disabled) {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
 }
 
 .discard:disabled,
 .save:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: default;
 }
 
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
 .field {
-  display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .head {
-  display: flex;
   align-items: center;
   gap: 8px;
+  display: flex;
 }
 
 .label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
   font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
+  line-height: 1.5;
 }
 
 .badges {
-  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  display: inline-flex;
 }
 
 .badge {
-  font-size: 11px;
-  padding: 1px 6px;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
   border-radius: 999px;
-  background: var(--dsw-alias-interactive-bg-hover-accent);
-  color: var(--dsw-alias-state-business-primary);
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .reset {
-  font-size: 11px;
-  border: 0;
-  background: transparent;
-  color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
+  background: transparent;
+  border: none;
   padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .reset:hover:not(:disabled) {
-  text-decoration: underline;
+  color: var(--dsw-alias-label-primary);
 }
 
-.reset:active:not(:disabled) {
-  text-decoration: underline;
-  opacity: 0.8;
+.reset:disabled {
+  cursor: default;
 }
 
 .reset:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
-}
-
-.reset:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
 }
 
 .input,
 .select {
-  padding: 6px 8px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-input-major);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-.inputInvalid {
-  padding: 6px 8px;
-  border: 1px solid var(--dsw-alias-state-error-primary);
-  border-radius: 6px;
-  font: inherit;
-  font-size: 13px;
-  color: var(--dsw-alias-label-primary);
+.input:focus-visible,
+.select:focus-visible {
+  border-color: var(--dsw-alias-brand-primary);
+  outline: none;
 }
 
 .input:disabled,
 .select:disabled {
-  opacity: 0.6;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
 }
 
-.hint {
-  margin: 0;
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary);
+.inputInvalid {
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.inputInvalid:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
 }
 
 .invalid {
+  color: var(--dsw-alias-label-error);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
-}
-
-/* --- polish: header keyboard focus / press, unified motion, reduced-motion --- */
-.header:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
-}
-
-.header:active {
-  background: var(--dsw-alias-interactive-bg-hover);
+  line-height: 1.5;
 }
 
-.header,
-.discard,
-.save,
-.reset {
-  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
+.hint {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
   .chevron,
+  .chevronOpen,
   .discard,
-  .save,
-  .reset {
+  .save {
     transition: none;
   }
 }

package/src/core/controller.ts

@@ -94,6 +94,15 @@ export class BoardController {
   start(): void {
     this.tasks = this.deps.store.load()
     void this.reconcileRunningTasks()
+    // A sibling tab may have edited or deleted the ledger (same origin,
+    // storage events). Reload on external change so a task deleted in
+    // another tab stops firing here — and is never written back by this
+    // tab's stale copy (scheduler roll-forward, execution settlement).
+    const unsubscribeExternal = this.deps.store.subscribeExternal?.(() => {
+      this.tasks = this.deps.store.load()
+      this.notify()
+    })
+    if (unsubscribeExternal !== undefined) this.disposers.push(unsubscribeExternal)
     this.disposers.push(this.deps.sessions.list.subscribe(() => {
       this.onSessionsChanged()
     }))
@@ -329,7 +338,7 @@ export class BoardController {
     this.reconcileInFlight = true
     try {
       type Settled = Extract<ExecutionEvent, { kind: 'settled' }>
-      const events: Array<{ task: TaskRecord; event: Settled }> = []
+      const events: Array<{ taskId: string; event: Settled }> = []
       for (const task of this.tasks) {
         if (task.status !== 'running') continue
         const execution = task.executions[task.executions.length - 1]
@@ -337,14 +346,20 @@ export class BoardController {
         // boundary); reconciliation exists for background/leftover runs.
         if (execution !== undefined && this.activeExecutionIds.has(execution.id)) continue
         const event = await this.deps.exec.reconcile(task)
-        if (event !== undefined && event.kind === 'settled') events.push({ task, event })
+        if (event !== undefined && event.kind === 'settled') events.push({ taskId: task.id, event })
       }
       if (events.length === 0) return
       let changed = false
-      for (const { task, event } of events) {
+      for (const { taskId, event } of events) {
+        // The reconcile call above awaited: a sibling tab may have rewritten
+        // the ledger (storage event reload) meanwhile. Re-read the freshest
+        // record now so the stale task captured before the await can never
+        // overwrite fields the sibling wrote.
+        const task = this.tasks.find(candidate => candidate.id === taskId)
+        if (task === undefined) continue
         const next = settleExecution(task, event.executionId, event.outcome, this.now(), event.error)
         if (next === task) continue
-        this.tasks = this.tasks.map(candidate => candidate.id === task.id ? next : candidate)
+        this.tasks = this.tasks.map(candidate => candidate.id === taskId ? next : candidate)
         changed = true
       }
       if (changed) this.persistAndNotify()