@linxin666/dsh-client-ui-task-board 0.1.18 → 0.1.19

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

@@ -40,6 +40,11 @@ export declare class TaskBoardSettingsCardController {
      * @returns the card's snapshot and its form actions.
      */
     inject(): TaskBoardSettingsCardFace;
+    /**
+     * Release the card's scope subscription and bound stores; the slot
+     * disposer calls this on teardown.
+     */
+    dispose(): void;
 }
 /** Props the renderer binds for the task-board card. */
 export type TaskBoardSettingsCardProps = PropsRuntime<'web-ui.plugin.item'> & PropsLocale<'task-board'> & InjectFace<TaskBoardSettingsCardFace>;

package/lib/types/client/settings-form.d.ts

@@ -149,11 +149,19 @@ export declare class CardForm<T> {
     private readonly specs;
     private readonly staged;
     private readonly listeners;
+    /** The scope subscription installed in the constructor; released by dispose(). */
+    private readonly disposeScope;
+    private disposed;
     private saving;
     private failed;
     private failedReason;
     /** @param scope - the bound settings scope for this card's namespace. */
     constructor(scope: SettingsScope<T>, specs: FieldSpec[]);
+    /**
+     * Release the scope subscription and every bound store listener. The card
+     * must call this on teardown; later calls are no-ops.
+     */
+    dispose(): void;
     /** Publish a projection of this form, rebuilt whenever the scope or a draft changes. */
     bind<S>(project: () => S): SnapshotStore<S>;
     /** Read the card-level state: what the Host serves, and what a save would do. */

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.18",
+  "version": "0.1.19",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/TaskBoardSettingsCard.tsx

@@ -63,6 +63,14 @@ export class TaskBoardSettingsCardController {
   inject(): TaskBoardSettingsCardFace {
     return { hooks: { taskBoardSettingsCard: this.store }, ...this.form.actions() }
   }
+
+  /**
+   * Release the card's scope subscription and bound stores; the slot
+   * disposer calls this on teardown.
+   */
+  dispose(): void {
+    this.form.dispose()
+  }
 }
 
 /** Props the renderer binds for the task-board card. */

package/src/client/board/TaskBoard.tsx

@@ -60,6 +60,15 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   return (
     <div className={css.board} data-dsh-taskboard-board="">
       <header className={css.boardHeader}>
+        <button
+          type="button"
+          className={`${css.ghostButton} ${css.backButton}`}
+          aria-label={t('board.close')}
+          onClick={() => { controller.closeBoard() }}
+        >
+          <span aria-hidden="true">‹</span>
+          <span>{t('board.close')}</span>
+        </button>
         <h2 className={css.boardTitle}>{t('board.title')}</h2>
         <input
           className={css.search}
@@ -85,13 +94,6 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         >
           + {t('board.new')}
         </button>
-        <button
-          type="button"
-          className={css.ghostButton}
-          onClick={() => { controller.closeBoard() }}
-        >
-          {t('board.close')}
-        </button>
       </header>
 
       <div className={css.columns}>

package/src/client/board.module.css

@@ -18,6 +18,8 @@
   inset: 0;
   display: none;
   z-index: 60;
+  container-name: task-board-view;
+  container-type: inline-size;
   /* 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)
@@ -103,6 +105,7 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .board {
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   height: 100%;
   min-width: 0;
   min-height: 0;
@@ -128,6 +131,12 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   white-space: nowrap;
 }
 
+.backButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .search {
   flex: 0 1 260px;
   min-width: 120px;
@@ -148,10 +157,38 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 
 .columns {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
   gap: 12px;
   flex: 1;
   min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  padding-bottom: 6px;
+  scrollbar-color: var(--dsw-alias-border-l3) var(--dsw-alias-interactive-bg-hover);
+  scrollbar-width: thin;
+}
+
+.columns::-webkit-scrollbar {
+  height: 10px;
+}
+
+.columns::-webkit-scrollbar-track {
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 999px;
+}
+
+.columns::-webkit-scrollbar-thumb {
+  background: var(--dsw-alias-border-l3);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+.columns::-webkit-scrollbar-thumb:hover {
+  background: var(--dsw-alias-border-l4);
+  background-clip: content-box;
 }
 
 .column {
@@ -770,6 +807,36 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   color: var(--dsw-alias-label-tertiary);
 }
 
+/* --- constrained board containers ------------------------------------------ */
+
+@container task-board-view (max-width: 720px) {
+  .board {
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .columns {
+    gap: 10px;
+  }
+}
+
+@container task-board-view (max-width: 600px) {
+  .boardHeader {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .search {
+    flex: 1 1 calc(100% - 72px);
+    min-width: 0;
+  }
+
+  .boardHeader > button {
+    flex: 1 1 0;
+    min-width: max-content;
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Polish pass: complete interaction states (hover / active / focus-visible /
  * disabled), unified 120ms motion, and reduced-motion fallback.

package/src/client/index.ts

@@ -92,13 +92,19 @@ export function apply(ctx: ClientContext): void {
   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',
-    id: 'task-board',
-    order: 110,
-    locale: NS,
-    inject: () => settingsCard.inject(),
-  }, TaskBoardSettingsCard))
+  ctx.slots.inject('web-ui.plugin.item', () => {
+    const unregister = ctx.slots.register({
+      name: 'web-ui.plugin.item',
+      id: 'task-board',
+      order: 110,
+      locale: NS,
+      inject: () => settingsCard.inject(),
+    }, TaskBoardSettingsCard)
+    return () => {
+      settingsCard.dispose()
+      unregister()
+    }
+  })
 
   // The sidebar entry and board view mount once the settings scope settles;
   // while the scope is still loading, the composition default is unknown, so

package/src/client/locales.ts

@@ -9,7 +9,7 @@
 export const zh = {
   'entry.label': '任务看板',
   'board.title': '任务看板',
-  'board.close': '返回对话',
+  'board.close': '返回会话',
   'board.new': '新建任务',
   'board.search': '筛选任务…',
   'board.empty': '这个状态还没有任务',

package/src/client/settings-form.ts

@@ -234,6 +234,9 @@ export class CardForm<T> {
   private readonly specs: Map<string, FieldSpec>
   private readonly staged = new Map<string, StagedEdit>()
   private readonly listeners = new Set<() => void>()
+  /** The scope subscription installed in the constructor; released by dispose(). */
+  private readonly disposeScope: () => void
+  private disposed = false
   private saving = false
   private failed = false
   private failedReason: string | undefined
@@ -244,7 +247,18 @@ export class CardForm<T> {
     specs: FieldSpec[],
   ) {
     this.specs = new Map(specs.map(spec => [spec.field, spec]))
-    scope.subscribe(() => { this.publish() })
+    this.disposeScope = scope.subscribe(() => { this.publish() })
+  }
+
+  /**
+   * Release the scope subscription and every bound store listener. The card
+   * must call this on teardown; later calls are no-ops.
+   */
+  dispose(): void {
+    if (this.disposed) return
+    this.disposed = true
+    this.disposeScope()
+    this.listeners.clear()
   }
 
   /** Publish a projection of this form, rebuilt whenever the scope or a draft changes. */

package/src/core/controller.ts

@@ -89,6 +89,10 @@ export function selectedTaskOf(snapshot: ControllerSnapshot): TaskRecord | undef
 }
 
 function randomUuid(): string {
+  const randomUUID = globalThis.crypto?.randomUUID
+  if (randomUUID !== undefined) {
+    return randomUUID.call(globalThis.crypto!)
+  }
   const bytes = globalThis.crypto?.getRandomValues(new Uint8Array(16))
   if (bytes === undefined) {
     // Non-secure fallback (tests, odd environments).