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

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()

package/src/core/store.ts

@@ -25,11 +25,30 @@ 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 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
+}
+
 /**
  * Structural row check with the status left unvalidated (see {@link parseLedger}).
  * The `schedule` field is deliberately NOT checked here: a malformed schedule
@@ -127,10 +146,16 @@ export class LocalStorageTaskStore implements TaskStore {
   /**
    * @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(
     private readonly key: string = DEFAULT_STORAGE_KEY,
     private readonly storage: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined = globalThis.localStorage,
+    private readonly events: StorageEvents | undefined = typeof (globalThis as { addEventListener?: unknown }).addEventListener === 'function'
+      ? (globalThis as unknown as StorageEvents)
+      : undefined,
   ) {}
 
   load(): TaskRecord[] {
@@ -163,6 +188,22 @@ export class LocalStorageTaskStore implements TaskStore {
       console.error('[dsh-task-board] task ledger clear failed', error)
     }
   }
+
+  /**
+   * 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 {
+    if (this.events === undefined) return () => {}
+    const onStorage = (event: StorageChangeEvent): void => {
+      if (event.key !== null && event.key !== this.key) return
+      listener()
+    }
+    this.events.addEventListener('storage', onStorage)
+    return () => { this.events?.removeEventListener('storage', onStorage) }
+  }
 }
 
 /** In-memory backend (tests, and a fallback when storage is unavailable). */