@linxin666/dsh-client-ui-task-board 0.4.2 → 0.4.4

package/src/client/board.module.css

@@ -4,135 +4,30 @@
  * board follows the active theme (light/dark and skins).
  */
 
-/* --- center-column takeover (global rules, attribute-scoped) ----------------- */
+/* --- native panel page ------------------------------------------------------- */
 
-[data-pane='conversation'],
-[class*='centerCol'] {
-  position: relative;
-}
+/* The board is an official center-column panel: the layout mounts this element
+   as the selected keyed 'main' occupant, so the shell's own column already
+   owns position, sizing and the conversation underneath. Nothing here hides or
+   re-parents another plugin's surface — the previous DOM takeover (absolute
+   overlay over a hidden conversation subtree) is gone with it.
 
-/* The board container rides inside the conversation grid item as an extra
-   trailing child; hidden unless the board is active. */
+   The container query context stays: the board's responsive rules measure the
+   PANEL rather than the viewport, so a narrow column or a resized window
+   narrows the board at the same threshold the shell uses for its columns. */
 [data-dsh-taskboard-view] {
-  position: absolute;
-  inset: 0;
-  display: none;
-  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
   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)
-     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
-   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). The !important is required: the dsh shell
-   (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).
-   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;
-}
-
-/* --- sidebar entry row ------------------------------------------------------- */
-
-/* Same geometry as the shell's own panel rows (SidebarRoot .panelRow): 2px
-   inset with a 12px radius, 8px content padding, 36px row, 14/22 type, and the
-   primary ink — so an injected row and an official row line up column for
-   column instead of each carrying its own box. */
-.entry {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 36px;
-  padding: 7px 8px;
-  margin: 0 2px;
-  background: transparent;
-  border: none;
-  border-radius: 12px;
-  color: var(--dsw-alias-label-primary);
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  line-height: 22px;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.entry:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.entry[data-active] {
-  background: var(--dsw-alias-interactive-bg-active);
-  color: var(--dsw-alias-label-primary);
-  font-weight: 600;
-}
-
-/* Icon box matches the shell's panel glyph exactly (16px), so the glyph column
-   and the label column land on the official rows' x positions. */
-.entryIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex: none;
-}
-
-.entryIcon svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Collapsed rail: icon-only, centered, matching the shell's 56px rail. The
-   shell asks its own panel rows for an 18px glyph on the rail, so the icon box
-   and the svg step up together with the 12px rail radius. */
-:global([data-dsh-frame][data-sidebar-collapsed]) .entry,
-:global([data-sidebar-collapsed]) .entry {
-  justify-content: center;
-  padding: 0;
-  width: 36px;
-  height: 36px;
-  margin: 0 auto 12px;
-  border-radius: 12px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon,
-:global([data-sidebar-collapsed]) .entryIcon,
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon svg,
-:global([data-sidebar-collapsed]) .entryIcon svg {
-  width: 18px;
-  height: 18px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryLabel,
-:global([data-sidebar-collapsed]) .entryLabel {
-  display: none;
-}
-
 /* --- board frame -------------------------------------------------------------- */
 
 .board {
@@ -520,10 +415,10 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .modal {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   width: min(520px, calc(100vw - 48px));
   max-height: calc(100vh - 96px);
-  overflow-y: auto;
+  overflow: hidden;
   padding: 18px;
   background: var(--dsw-alias-bg-base);
   border: 1px solid var(--dsw-alias-border-l2);
@@ -554,6 +449,95 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   margin-top: 4px;
 }
 
+/* --- form sections (create/edit dialog) --------------------------------------
+ * The task form groups its configuration into collapsible regions so the
+ * dialog fits without a scrollbar: only the content region starts open, and
+ * every collapsed header carries a one-line summary of what it holds. The
+ * body keeps an overflow fallback for tiny viewports. The chevron is drawn
+ * with borders (no glyph), so no font or emoji can change it.
+ * ----------------------------------------------------------------------------- */
+
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Every direct child keeps its natural height: a column flex item shrinks by
+   default, and a shrunk region would clip its own fields behind its
+   `overflow: hidden` instead of letting the body scroll. */
+.modalBody > * {
+  flex: none;
+}
+
+.formSection {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dsw-alias-separator-primary);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.formSectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.formSectionHeader:hover {
+  background: var(--dsw-alias-bg-mask-1);
+}
+
+.formSectionChevron {
+  flex: none;
+  width: 0;
+  height: 0;
+  margin-left: 1px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid var(--dsw-alias-label-tertiary);
+  transition: transform 120ms ease;
+}
+
+.formSection[data-open='true'] .formSectionChevron {
+  transform: rotate(90deg);
+}
+
+.formSectionTitle {
+  flex: none;
+}
+
+.formSectionSummary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 400;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.formSectionBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 10px 10px;
+  border-top: 1px solid var(--dsw-alias-separator-primary);
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -740,6 +724,21 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   outline: none;
 }
 
+/* Zone row: the label and the picker share the cron row's geometry so the two
+   controls read as one editor. */
+.scheduleZone {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.scheduleZone select {
+  flex: 1;
+  min-width: 0;
+}
+
 .scheduleMeta {
   margin: 0;
   font-size: 12px;
@@ -924,7 +923,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
     height: 100dvh;
   }
 
-  .entry,
   .card,
   .primaryButton,
   .ghostButton,
@@ -1038,7 +1036,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
  * --------------------------------------------------------------------------- */
 
 /* --- one themed focus-visible ring (approx 2px, 2px offset) --- */
-.entry:focus-visible,
 .card:focus-visible,
 .primaryButton:focus-visible,
 .ghostButton:focus-visible,
@@ -1049,13 +1046,13 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .input:focus-visible,
 .select:focus-visible,
 .schedulePreset:focus-visible,
-.scheduleToggle input:focus-visible {
+.scheduleToggle input:focus-visible,
+.formSectionHeader:focus-visible {
   outline: 2px solid var(--dsw-alias-state-business-primary);
   outline-offset: 2px;
 }
 
 /* --- unified 120ms motion across the board's interactive controls --- */
-.entry,
 .primaryButton,
 .ghostButton,
 .dangerButton,
@@ -1065,7 +1062,9 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .input,
 .select,
 .schedulePreset,
-.scheduleToggle input {
+.scheduleToggle input,
+.formSectionHeader,
+.formSectionChevron {
   transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, outline-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
 }
 
@@ -1075,7 +1074,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   transform: translateY(0);
 }
 
-.entry:active,
 .primaryButton:active:not(:disabled),
 .ghostButton:active:not(:disabled),
 .dangerButton:active:not(:disabled),
@@ -1084,11 +1082,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   transform: translateY(1px);
 }
 
-/* --- entry row (sidebar) states --- */
-.entry[data-active]:hover {
-  background: var(--dsw-specific-sidebar-nav-item-active);
-}
-
 /* --- guarded hover for the remaining icon/link buttons (defensive: never
        disabled today, but a disabled element must not react to hover) --- */
 .iconButton:hover:not(:disabled) {
@@ -1121,7 +1114,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 
 /* --- reduced motion: strip transitions, stop the decorative spinner --- */
 @media (prefers-reduced-motion: reduce) {
-  .entry,
   .card,
   .primaryButton,
   .ghostButton,
@@ -1132,7 +1124,9 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   .input,
   .select,
   .schedulePreset,
-  .scheduleToggle input {
+  .scheduleToggle input,
+  .formSectionHeader,
+  .formSectionChevron {
     transition: none;
   }
 

package/src/client/host-api.ts

@@ -1,3 +1,5 @@
+import { degradedRowOf, ledgerOwnerPid } from '../core/degraded-reason.ts'
+import { TASK_BOARD_PACKAGE } from '../core/package-name.ts'
 import type { TaskRecord } from '../core/tasks.ts'
 import { t } from './locales.ts'
 import {
@@ -37,7 +39,20 @@ const TASK_PARSE_TIMEOUT_SECONDS = 45
  * "Unexpected token 'o', \"not found\" is not valid JSON" is what a missing
  * Host half looks like today.
  */
-export type HostApiFailure = 'not-mounted' | 'unauthorized' | 'locked' | 'rejected' | 'timeout' | 'unreachable' | 'unexpected'
+export type HostApiFailure =
+  /** The board's own routes are not registered and nothing explains why. */
+  | 'not-mounted'
+  /** Another live DSH process owns the ledger, so this instance registered no board routes (#1730). */
+  | 'ledger-locked'
+  /** This row degraded during start for some other reason the family health route reports (#1730). */
+  | 'degraded'
+  | 'unauthorized'
+  | 'forbidden'
+  | 'locked'
+  | 'rejected'
+  | 'timeout'
+  | 'unreachable'
+  | 'unexpected'
 
 /** Transport failure carrying a stable class next to its user-facing message. */
 export class HostApiError extends Error {
@@ -47,6 +62,86 @@ export class HostApiError extends Error {
   }
 }
 
+/**
+ * Same-origin family health route served by the dsh-web-all shell: the
+ * degraded ledger, in which a family row that failed during apply appears WITH
+ * its reason. DOCUMENT-RELATIVE for the same reason as the board's own routes
+ * (issue #1707). A 404 here means the family shell is absent or older than the
+ * route, which is not itself a failure of the board.
+ */
+const FAMILY_DEGRADED_ROUTE = 'api/dsh-web-all/degraded'
+
+/** Health-route ceiling: an unresponsive family shell must not hold the board's first paint. */
+const DEGRADED_LOOKUP_TIMEOUT_MS = 2_000
+
+/**
+ * The failure text for a row this browser knows failed during start.
+ *
+ * A ledger lock is the one class with an owner the user can act on, so its
+ * reason is unpacked into the pid plus what to do about it; every other
+ * degraded row is reported with the shell's own reason verbatim. The raw
+ * reason rides along either way, because it is the only text that names the
+ * lock file or the recovery step when the pid is not the whole story.
+ * @param reason - the shell's one-line failure reason (never empty).
+ */
+function degradedFailureMessage(reason: string): { failure: 'ledger-locked' | 'degraded'; message: string } {
+  const pid = ledgerOwnerPid(reason)
+  if (pid === undefined) return { failure: 'degraded', message: t('board.hostError.degraded', { detail: reason }) }
+  return { failure: 'ledger-locked', message: t('board.hostError.ledgerLocked', { pid: String(pid), detail: reason }) }
+}
+
+/**
+ * The degraded record the family shell holds for THIS board, or undefined when
+ * the row is healthy, the shell is absent, or the answer is unusable. The
+ * lookup is best-effort by contract: any uncertainty keeps the caller's own
+ * failure text instead of replacing it with a weaker one.
+ * @param fetchImpl - fetch implementation (injected for tests).
+ * @returns the ledger's reason for this row, or undefined when it names none.
+ */
+async function fetchDegradedReason(fetchImpl: typeof fetch): Promise<string | undefined> {
+  const controller = new AbortController()
+  const timer = globalThis.setTimeout(() => { controller.abort() }, DEGRADED_LOOKUP_TIMEOUT_MS)
+  try {
+    const response = await fetchImpl(FAMILY_DEGRADED_ROUTE, { signal: controller.signal, headers: { accept: 'application/json' }, cache: 'no-store' })
+    if (!response.ok) return undefined
+    return degradedRowOf(await response.json(), TASK_BOARD_PACKAGE)?.reason
+  } catch {
+    return undefined
+  } finally {
+    globalThis.clearTimeout(timer)
+  }
+}
+
+/**
+ * Name the real reason this board's routes are missing (issue #1730).
+ *
+ * The core webserver answers an unmounted route with a bare 404, which cannot
+ * distinguish "this deployment never loaded the plugin" from "this row
+ * degraded during start" — a second DSH process holding `ledger-v2.lock` is
+ * the case that matters, because the panel's advice ("restart the service")
+ * is then false: the lock belongs to the other process, and restarting cannot
+ * win it. The family health route knows the difference, so the 404 is
+ * disambiguated there before anything is shown.
+ * @param fallback - copy for the plain "routes are not there" failure, which
+ *   is route-specific (the board's state route and the AI-parse route phrase
+ *   their own absence); it is also what is shown when the ledger names nothing.
+ * @param fetchImpl - fetch implementation (injected for tests).
+ * @returns the HostApiError to throw for a missing board route.
+ */
+export async function missingRouteFailure(
+  fallback: string = t('board.hostError.notMounted'),
+  fetchImpl: typeof fetch = fetch,
+): Promise<HostApiError> {
+  const absent = (): HostApiError => new HostApiError('not-mounted', fallback, 404)
+  const reason = await fetchDegradedReason(fetchImpl)
+  // A shell that predates the reason field (or recorded none) tells us the row
+  // is degraded but not why; the route's own wording is more honest than an
+  // empty "because".
+  if (reason === undefined || reason === '') return absent()
+  const described = degradedFailureMessage(reason)
+  return new HostApiError(described.failure, described.message, 404)
+}
+
 function uuid(): string {
   return globalThis.crypto?.randomUUID?.() ?? `browser-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
 }
@@ -79,14 +174,18 @@ async function readJson<T>(response: Response): Promise<T> {
     // The Host answered with a reason of its own. A ledger lock is the one
     // class worth naming in the panel's words; the authentication fence and
     // every other action rejection are reported as they arrive.
-    if (hostError === 'forbidden') throw new HostApiError('unauthorized', t('board.hostError.unauthorized'), response.status)
+    if (hostError === 'forbidden') throw new HostApiError('forbidden', t('board.hostError.forbidden'), response.status)
     if (response.status === 503 || /lock/i.test(hostError)) {
       throw new HostApiError('locked', t('board.hostError.locked', { detail: hostError }), response.status)
     }
     throw new HostApiError('rejected', hostError, response.status)
   }
-  if (response.status === 404) throw new HostApiError('not-mounted', t('board.hostError.notMounted'), 404)
-  if (response.status === 401 || response.status === 403) throw new HostApiError('unauthorized', t('board.hostError.unauthorized'), response.status)
+  // A bare 404 is the ONLY signal that this board's routes are absent; the
+  // family health route is what turns it into the real reason when this row
+  // degraded during start (issue #1730).
+  if (response.status === 404) throw await missingRouteFailure()
+  if (response.status === 403) throw new HostApiError('forbidden', t('board.hostError.forbidden'), 403)
+  if (response.status === 401) throw new HostApiError('unauthorized', t('board.hostError.unauthorized'), 401)
   throw new HostApiError('unexpected', t('board.hostError.unexpected', { status: String(response.status) }), response.status)
 }
 
@@ -193,8 +292,12 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
       if (record !== undefined && isTaskParseDraft(record.draft)) return record.draft
       throw new HostApiError('unexpected', t('new.aiParseFailed', { error: t('board.hostError.unexpected', { status: String(response.status) }) }), response.status)
     }
-    if (response.status === 404) throw new HostApiError('not-mounted', t('new.aiParseUnavailable'), 404)
-    if (response.status === 401 || response.status === 403) throw new HostApiError('unauthorized', t('board.hostError.unauthorized'), response.status)
+    // The parse route lives beside the board's own routes, so a 404 means the
+    // same thing here: absent routes, with the same health-ledger detail and
+    // this route's own wording as the fallback.
+    if (response.status === 404) throw await missingRouteFailure(t('new.aiParseUnavailable'))
+    if (response.status === 403) throw new HostApiError('forbidden', t('board.hostError.forbidden'), 403)
+    if (response.status === 401) throw new HostApiError('unauthorized', t('board.hostError.unauthorized'), 401)
     const code = typeof record?.code === 'string' ? record.code : undefined
     if (code === 'no-model') throw new HostApiError('rejected', t('new.aiParseNoModel'), response.status)
     if (code === 'timeout') throw new HostApiError('timeout', t('new.aiParseTimeout', { seconds: String(TASK_PARSE_TIMEOUT_SECONDS) }), response.status)

package/src/client/index.ts

@@ -24,17 +24,17 @@ import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 // Type-only: pulls the workspace plugin's Context merge (ctx.uiWorkspace), the
 // multi-instance navigation face that replaced ISessions.open().
 import type {} from '@deepseek-ai/dsh-client-ui-workspace/client'
-import { BoardController } from '../core/controller.ts'
+import { BoardController, TASK_BOARD_PANEL_ID } from '../core/controller.ts'
 import { mainViewSessionId } from './main-session.ts'
 import { LocalStorageTaskStore } from '../core/store.ts'
 import { claimTaskboardApply, releaseTaskboardApply } from './apply-guard.ts'
-import { mountBoard } from './board-mount.tsx'
-import { mountSidebarEntry } from './sidebar-entry.ts'
+import { registerTaskBoardPanel } from './native-panel.tsx'
 import { TaskBoardSettingsCard, TaskBoardSettingsCardController, type TaskBoardSettings } from './TaskBoardSettingsCard.tsx'
 import { en, zh, setRuntimeTranslate, type TaskBoardKey } from './locales.ts'
 import { HttpTaskBoardHostTransport } from './host-api.ts'
 import { reportDailyHeartbeat } from './telemetry.ts'
 import { installPluginCard } from './plugin-card-seat.ts'
+import { createServedEntryForm } from './settings-entry-form.ts'
 
 /** Locale namespace this plugin owns. */
 const NS = 'task-board'
@@ -124,7 +124,7 @@ declare module '@deepseek-ai/cordis' {
  * on hosts below that cohort, which serve the same roster through the
  * connection RPC face.
  */
-export const inject = ['slots', 'sessions', 'workspaces', 'connection', 'configForms', 'locale', 'remote', 'remote.session', 'uiWorkspace']
+export const inject = ['slots', 'sessions', 'workspaces', 'connection', 'configForms', 'locale', 'remote', 'remote.session', 'uiWorkspace', 'layout']
 
 /** One agent-preset row the mode picker consumes (either face's wire shape). */
 interface PresetRosterRow {
@@ -241,6 +241,18 @@ export function apply(ctx: ClientContext): void {
     const controller = new BoardController({
       store,
       transport: new HttpTaskBoardHostTransport(),
+      // Panel navigation belongs to the layout service: the board asks it to
+      // select its own panel id (or the conversation) instead of taking over
+      // the center column at the DOM level. The lookup stays lazy so a
+      // selection issued before the service settles still lands once it does,
+      // and the face throws by contract before the layout root entry mounts,
+      // which the controller tolerates.
+      panel: {
+        select: panelId => {
+          const layout = ctx.get('layout') as { selectPanel?: (id: string | null) => void } | undefined
+          layout?.selectPanel?.(panelId)
+        },
+      },
       sessions: {
         // The main-view Session comes from the catalog's per-source ownership
         // counts; navigation belongs to the workspace UI since the
@@ -360,14 +372,30 @@ export function apply(ctx: ClientContext): void {
         console.error('[dsh-task-board] model options read failed', error)
       }
     }
+    void pushPresetOptions()
     void pushModelOptions()
-    disposers.push(ctx.on('connection/reset', () => { void pushModelOptions() }))
+    disposers.push(ctx.on('connection/reset', () => {
+      void pushPresetOptions()
+      void pushModelOptions()
+    }))
+    // Native panel surfaces: one sidebar row and one center-column page, both
+    // through the official slot seats the shell itself renders. The layout's
+    // panel selection is reconciled back into the controller so the board's own
+    // view state follows the user clicking another panel row.
     try {
-      disposers.push(mountSidebarEntry(controller, ctx.locale))
-      disposers.push(mountBoard(controller, ctx.locale))
+      disposers.push(registerTaskBoardPanel(ctx, controller))
+      const layoutFace = ctx.get('layout') as { panelInfo?: { subscribe(listener: () => void): () => void; getSnapshot(): { activePanelId: unknown } } } | undefined
+      if (layoutFace?.panelInfo !== undefined) {
+        const sync = (): void => {
+          const active = layoutFace.panelInfo!.getSnapshot().activePanelId
+          controller.syncPanelSelection(active === TASK_BOARD_PANEL_ID ? TASK_BOARD_PANEL_ID : null)
+        }
+        sync()
+        disposers.push(layoutFace.panelInfo.subscribe(sync))
+      }
     } catch (error) {
-      // DOM failures degrade the board, never the GUI.
-      console.error('[dsh-task-board] mount failed:', error)
+      // A shell that cannot serve the seats degrades the board, never the GUI.
+      console.error('[dsh-task-board] panel registration failed:', error)
     }
 
     uiDisposer = () => {
@@ -415,22 +443,26 @@ export function bindSettingsForm(ctx: ClientContext): ConfigForm<TaskBoardSettin
   if (binder !== undefined && typeof binder.bind === 'function') {
     return binder.bind<TaskBoardSettings>({ namespace: TASK_BOARD_NS })
   }
-  return ctx.configForms.get<TaskBoardSettings>(servedEntryId(ctx.configForms))
+  return createServedEntryForm<TaskBoardSettings>({
+    forms: ctx.configForms,
+    entryIds: TASK_BOARD_ENTRY_IDS,
+  })
 }
 
 /**
- * The profile entry id this package's own row carries.
+ * The profile entry id this package's own row carries, for a page that serves
+ * no family binder.
  *
  * The shared describe mirror is the only local evidence of which row id this
- * profile actually serves, but it answers asynchronously: at plugin
- * activation it usually holds nothing yet. An unanswered mirror therefore
- * binds the aggregate row id rather than guessing among the candidates —
- * the form is bound once for the session, so a wrong guess would leave the
- * card reporting an unserved namespace even after the mirror settles.
+ * profile actually serves, but it answers asynchronously: at plugin activation
+ * it usually holds nothing yet. An unanswered mirror therefore binds the
+ * aggregate row id rather than guessing among the candidates, and the binding
+ * is re-resolved once the mirror answers — see
+ * {@link createServedEntryForm}, which owns that rebinding.
  * @param forms - the shared configuration forms service.
- * @returns the entry id to bind.
+ * @returns the entry id to bind before the mirror answers.
  */
-function servedEntryId(forms: ConfigForms): string {
+export function servedEntryId(forms: ConfigForms): string {
   let served: readonly string[] | undefined
   try {
     served = forms.describe().getSnapshot().view?.namespaces.map(view => view.ns)