@linxin666/dsh-client-ui-task-board 0.1.2 → 0.1.6

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

package/src/client/board-mount.tsx

@@ -19,6 +19,11 @@ export const BOARD_VIEW_SELECTOR = '[data-dsh-taskboard-view]'
 
 const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
 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 {
@@ -53,16 +58,42 @@ export function mountBoard(controller: BoardController): () => void {
 
   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()
     document.documentElement.removeAttribute(ACTIVE_ATTR)

package/src/client/board.module.css

@@ -19,13 +19,16 @@
   z-index: 5;
 }
 
-html[data-dsh-taskboard-active] [data-dsh-taskboard-view] {
+/* The center column is single-occupant; the :not() guards keep the two
+   sibling panels (task board / ssh) from fighting over visibility if both
+   activation attributes ever coexist. */
+html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-dsh-taskboard-view] {
   display: block;
 }
 
 /* While the board is active, the conversation content underneath is hidden
    (it stays mounted and stateful). */
-html[data-dsh-taskboard-active] [data-pane='conversation'] > :not([data-dsh-taskboard-view]) {
+html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-taskboard-view]) {
   display: none;
 }
 

package/src/client/sidebar-entry.ts

@@ -20,21 +20,24 @@ import css from './board.module.css'
 /** Stable data attribute identifying the injected entry row. */
 export const ENTRY_SELECTOR = '[data-dsh-taskboard-entry]'
 
-/** The sidebar column is the grid item AppFrame renders with this pane marker. */
-const SIDEBAR_COLUMN_SELECTOR = '[data-pane="sidebar"]'
-
 /** Inline icon (matches the shell's 16px nav-icon look). */
 const ICON = `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5"/><path d="M2 6.5h12M6.5 6.5v7"/></svg>`
 
 /** Find the sidebar shell root element, or undefined while not yet mounted. */
 function sidebarRoot(): HTMLElement | undefined {
-  const column = document.querySelector<HTMLElement>(SIDEBAR_COLUMN_SELECTOR)
-  const root = column?.firstElementChild as HTMLElement | undefined
-  return root ?? undefined
+  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
+  if (column === null) return undefined
+  // Current shells wrap the sidebar UI: column > wrapper > root(logoRow owner).
+  // Prefer the element that owns the logo row — the real sidebar UI root —
+  // and fall back to the column's first child for legacy shells.
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
 }
 
-/** The New Session button: the shell's only direct-child button of the root. */
+/** The New Session button: nested in the logo row on current shells, a direct child on legacy shells. */
 function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  if (nested !== null) return nested
   for (const child of root.children) {
     if (child.tagName === 'BUTTON') return child as HTMLButtonElement
   }
@@ -53,14 +56,26 @@ function createEntry(controller: BoardController): HTMLButtonElement {
   return entry
 }
 
-/** Re-insert the entry after the New Session button (before the browser region). */
+/** Re-insert the entry after the New Session row (before the browser region). */
 function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
   const button = newSessionButton(root)
   if (button === undefined) return false
   if (entry.parentElement !== root) {
-    // Insert after the button: React never manages this node, and the shell
-    // keeps its own child order intact around it.
-    root.insertBefore(entry, button.nextElementSibling)
+    // Position relative to the family block (entries injected by sibling
+    // plugins), never relative to transient logoRow geometry: every family
+    // plugin that self-heals during a re-render then lands in the same
+    // relative order, so the entries cannot swap positions regardless of
+    // observer callback order or of shell wrapper changes. There is no
+    // append-to-end fallback: appending at the end would randomly reorder
+    // the block after a shell re-render.
+    const row = button.closest('[class*="logoRow"]')
+    const base = (row !== null && row.parentElement === root) ? row : button
+    const family = Array.from(root.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.matches('[data-dsh-taskboard-entry], [data-dsh-ssh-entry]'),
+    )
+    // task board sits before the whole family block.
+    const anchor = family.length > 0 ? family[0] : base.nextElementSibling
+    root.insertBefore(entry, anchor)
   }
   return true
 }
@@ -77,14 +92,37 @@ export function mountSidebarEntry(controller: BoardController): () => void {
   let placed = false
 
   const tryPlace = (): void => {
-    if (placed) return
+    if (root !== undefined && !root.isConnected) {
+      // The shell rebuilt the sidebar pane (whole-tree teardown); the root
+      // observer is gone with the old tree, so detach it and re-query from
+      // scratch. The new pane is later noticed by the body-level watcher.
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    if (placed) {
+      // Cheap short-circuit: entry still lives in a mountable subtree.
+      if (document.body.contains(entry)) return
+      // Entry was torn down together with the old tree; reset and re-place.
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
     root ??= sidebarRoot()
     if (root === undefined) return
     placed = placeEntry(root, entry)
-    if (placed) rootObserver.observe(root, { childList: true, subtree: true })
+    if (placed) {
+      rootObserver.observe(root, { childList: true, subtree: true })
+    }
   }
 
-  // The shell renders after boot settlement; watch for its arrival.
+  // Body-level watcher retained as the "whole rebuild" fallback: when the shell
+  // tears down the whole sidebar pane, the root observer is gone with it and
+  // only this body observation can notice the new pane mounting. It is no
+  // longer disconnected after placement; the placed-and-still-mounted case
+  // short-circuits through the cheap document.body.contains(entry) check, so
+  // unrelated app mutations (e.g. chat streaming) cost one contains check
+  // instead of churning the full re-query.
   const waitObserver = new MutationObserver(() => { tryPlace() })
   waitObserver.observe(document.body, { childList: true, subtree: true })