@fonlan/dsh-task-kanban 0.2.5 → 0.2.7

package/src/client/kanban-state.ts

@@ -1,44 +1,41 @@
-import { useSyncExternalStore } from 'react'
 import type { Context } from '@deepseek-ai/cordis'
 type ClientContext = Context
 
 /**
- * HMR-safe shared state store keyed on the global symbol registry.
+ * Panel id shared by this plugin's main-panel key (`main`) and its sidebar
+ * entry (`sidebar.panellist`): the shell selects the panel by this id, so the
+ * two registrations must agree.
+ */
+export const KANBAN_PANEL_ID = 'task-kanban'
+
+/**
+ * Structural view of the client shell's panel-navigation face (`ctx.layout`).
+ * Declared locally (no value import) so the plugin keeps working on a runtime
+ * whose layout types differ.
+ */
+interface LayoutLike {
+  selectPanel(panelId: string | null): void
+}
+
+/**
+ * HMR-safe owner context, keyed on the global symbol registry.
  *
  * The client-hmr hot swap re-evaluates this module (a fresh `lib/client.js`
- * bundle) WITHOUT reloading the page. A module-level singleton would then be
- * duplicated per evaluation: the session-navigation wrapper installed by the
- * OLD module copy keeps calling the OLD copy's `exitBoard`, which reads the
- * OLD copy's `boardOpen`/`boardDisposer` — while a board opened after the swap
- * writes the NEW copy's state cell. The wrapper would then no-op and clicking
- * a sidebar session would never leave the board.
- *
- * Keeping every field on one `globalThis`-backed record (via `Symbol.for`, so
- * all bundle copies resolve the same key) makes every copy read/write the same
- * state cell, so exit works regardless of which module copy performed the
- * enter.
+ * bundle) WITHOUT reloading the page; a module-level cell would then be
+ * duplicated per evaluation and an old copy's helper would read a stale owner.
+ * `Symbol.for` makes every bundle copy share one cell.
  */
 const STATE_KEY = Symbol.for('@fonlan/dsh-task-kanban/state')
 
 interface KanbanState {
   client: ClientContext | null
-  boardRoot: ((props: Record<string, unknown>) => React.ReactNode) | null
-  boardDisposer: (() => void) | null
-  boardOpen: boolean
-  listeners: Set<() => void>
 }
 
 function getState(): KanbanState {
   const g = globalThis as unknown as Record<symbol, KanbanState | undefined>
   let state = g[STATE_KEY]
   if (state === undefined) {
-    state = {
-      client: null,
-      boardRoot: null,
-      boardDisposer: null,
-      boardOpen: false,
-      listeners: new Set(),
-    }
+    state = { client: null }
     g[STATE_KEY] = state
   }
   return state
@@ -51,80 +48,49 @@ export function getClient(): ClientContext | null {
   return getState().client
 }
 
-export function setBoardRoot(component: (props: Record<string, unknown>) => React.ReactNode): void {
-  getState().boardRoot = component
-}
-export function getBoardRoot(): ((props: Record<string, unknown>) => React.ReactNode) | null {
-  return getState().boardRoot
-}
-
-function notify(): void {
-  for (const listener of getState().listeners) listener()
-}
-export function isBoardOpen(): boolean {
-  return getState().boardOpen
-}
-function subscribe(cb: () => void): () => void {
-  const listeners = getState().listeners
-  listeners.add(cb)
-  return () => { listeners.delete(cb) }
-}
-export function useBoardOpen(): boolean {
-  return useSyncExternalStore(subscribe, isBoardOpen)
+/** The shell's panel face, when this runtime provides it. */
+function layoutOf(ctx: ClientContext | null): LayoutLike | null {
+  if (ctx === null) return null
+  try {
+    const layout = (ctx as unknown as { layout?: LayoutLike }).layout
+    return typeof layout?.selectPanel === 'function' ? layout : null
+  } catch {
+    return null
+  }
 }
 
-export function enterBoard(): void {
-  const state = getState()
-  const ctx = state.client
-  const root = state.boardRoot
-  if (ctx === null || root === null || state.boardDisposer !== null) return
+/** Select the kanban panel. The sidebar's own entry does this; kept for in-app callers. */
+export function showKanbanPanel(ctx: ClientContext | null = getClient()): void {
   try {
-    // DSH 0.1.5 moved the replaceable shell from the legacy `conversation`
-    // seat to `main.conversation`. Register through `inject` so the board
-    // waits for that owner if the client plugin load order is reversed.
-    state.boardDisposer = ctx.slots.inject('main.conversation', () =>
-      ctx.slots.register({ name: 'main.conversation', priority: -1, locale: 'task-kanban' } as never, root as never),
-    )
-    state.boardOpen = true
-    notify()
+    layoutOf(ctx)?.selectPanel(KANBAN_PANEL_ID)
   } catch (error) {
-    console.error('[@fonlan/dsh-task-kanban] cannot open the board:', error)
+    console.error('[@fonlan/dsh-task-kanban] cannot select the kanban panel:', error)
   }
 }
 
-export function exitBoard(): void {
-  const state = getState()
-  if (state.boardDisposer !== null) {
-    state.boardDisposer()
-    state.boardDisposer = null
-  }
-  if (state.boardOpen) {
-    state.boardOpen = false
-    notify()
+/** Hand the center column back to the Conversation. */
+export function leaveKanbanPanel(ctx: ClientContext | null = getClient()): void {
+  try {
+    layoutOf(ctx)?.selectPanel(null)
+  } catch (error) {
+    console.error('[@fonlan/dsh-task-kanban] cannot leave the kanban panel:', error)
   }
 }
 
-export function toggleBoard(): void {
-  if (isBoardOpen()) exitBoard()
-  else enterBoard()
-}
-
 /**
- * Route session navigation through the board: opening any session while the
- * board is open leaves the board first, so the conversation view can render
- * for the newly selected session.
+ * Route session navigation through the panel selection: opening any session
+ * while the board is the active panel first returns the center column to the
+ * Conversation, so the session view renders.
  *
  * Every sidebar path that selects a session funnels through `sessions.open`
  * (session rows, search results, fork results, New Session) or
  * `sessions.openSubagent` (catalog children) — including re-clicking the
  * already-current session, which never changes `list.current` and therefore
- * cannot be caught by a list-store subscription. Wrapping the two entry
- * points covers all of them in one place.
+ * cannot be caught by a list-store subscription. Wrapping the two entry points
+ * covers all of them in one place.
  *
  * The wrapper is idempotent: a `kbBound` marker on the wrapper prevents a
- * second bind (plugin re-apply / HMR) from stacking another layer. Because the
- * wrapper's exit goes through the shared state store, a wrapper left over from
- * a previous (HMR-replaced) module copy still closes the board correctly.
+ * second bind (plugin re-apply / HMR) from stacking another layer.
  */
 export function bindSessionNavigation(ctx: ClientContext): void {
   const sessions = ctx.sessions
@@ -133,7 +99,7 @@ export function bindSessionNavigation(ctx: ClientContext): void {
   const open = sessions.open
   if (typeof open === 'function' && (open as unknown as { kbBound?: boolean }).kbBound !== true) {
     const bound = ((id: Parameters<typeof open>[0]) => {
-      exitBoard()
+      leaveKanbanPanel(ctx)
       return open.call(sessions, id)
     }) as typeof open
     ;(bound as unknown as { kbBound?: boolean }).kbBound = true
@@ -143,10 +109,10 @@ export function bindSessionNavigation(ctx: ClientContext): void {
   const openSubagent = sessions.openSubagent
   if (typeof openSubagent === 'function' && (openSubagent as unknown as { kbBound?: boolean }).kbBound !== true) {
     const bound = ((address: Parameters<typeof openSubagent>[0]) => {
-      exitBoard()
+      leaveKanbanPanel(ctx)
       return openSubagent.call(sessions, address)
     }) as typeof openSubagent
     ;(bound as unknown as { kbBound?: boolean }).kbBound = true
     sessions.openSubagent = bound
   }
-}
+}

package/src/client/locales.ts

@@ -53,9 +53,7 @@ export const zh = {
   noWorkspace: '没有可用工作区，请先在侧边栏添加',
   refresh: '刷新',
   settingsTitle: '任务看板',
-  settingsDescription: '全局并行 worker 数与各会话类型的默认模型、推理强度、Agent 预设',
-  settingsExpand: '展开设置',
-  settingsCollapse: '收起设置',
+  sectionSub: '全局并行 worker 数与各会话类型的默认模型、推理强度、Agent 预设',
   maxParallelWorkers: '全局并行 worker 数',
   settingsRefineGroup: '细化需求会话默认',
   settingsPhaseGroup: 'Phase 实现会话默认',
@@ -129,9 +127,7 @@ export const en = {
   noWorkspace: 'No workspaces available — add one in the sidebar first',
   refresh: 'Refresh',
   settingsTitle: 'Task Kanban',
-  settingsDescription: 'Global parallel workers and per-session-type defaults for model, reasoning effort, and agent preset',
-  settingsExpand: 'Show settings',
-  settingsCollapse: 'Hide settings',
+  sectionSub: 'Global parallel workers and per-session-type defaults for model, reasoning effort, and agent preset',
   maxParallelWorkers: 'Global parallel workers',
   settingsRefineGroup: 'Refinement session defaults',
   settingsPhaseGroup: 'Phase implementation defaults',

package/src/client/sections.tsx

@@ -1,146 +1,20 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { IconChecklistOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ChecklistIcon } from './icons'
 import { api, type PresetOption, type ReasoningOptions } from './api'
-import { toggleBoard, useBoardOpen } from './kanban-state'
 import type { KanbanSettingsShape, ModelOption } from '../shared/card'
 
-interface FooterActionProps {
-  wide?: boolean
-  t?: (key: string) => string
+/**
+ * Sidebar panel-row glyph for the board (`sidebar.panellist`).
+ *
+ * The shell owns the row: it renders the button, its label, tooltip and active
+ * state, and calls `layout.selectPanel(id)` on click. The entry contributes
+ * only the glyph, so this component must stay purely presentational.
+ */
+export function KanbanPanelIcon({ size }: { size: number }): JSX.Element {
+  return <ChecklistIcon size={size} />
 }
 
-/** Sidebar footer entry: toggles the kanban board main view.
- *  The shell renders footer actions on their own row ABOVE the settings row,
- *  so the button is reparented into the settings area to sit on the same
- *  line, right of the Settings trigger (see board.css .kb-settings-row). */
-export function KanbanFooterButton({ wide, t }: FooterActionProps): JSX.Element {
-  const open = useBoardOpen()
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const label = t !== undefined ? t(open ? 'closeBoard' : 'openBoard') : 'Task Kanban'
-
-  useEffect(() => {
-    const btn = ref.current
-    if (btn === null) return
-    let foot: Element | null = null
-    let disposed = false
-
-    // Locate the sidebar foot area WITHOUT moving any DOM: it is the ancestor
-    // of the button whose LAST child contains the settings trigger and which
-    // is itself the last child of its parent (root > footArea > settingsArea).
-    // The slot machinery wraps entries in an anonymous div, so the search
-    // tolerates extra wrapper levels. Styling is pure CSS (see board.css
-    // .kb-foot-row), so a failed lookup only leaves the button in its natural
-    // slot row — it can never vanish.
-    const findFoot = (): Element | null => {
-      let el: Element | null = btn.parentElement
-      while (el !== null && el !== document.body && el.parentElement !== null) {
-        const last = el.lastElementChild
-        const hasTrigger =
-          last !== null &&
-          (last.querySelector?.('button[aria-haspopup="dialog"]') !== null ||
-            last.querySelector?.('button[aria-haspopup="menu"]') !== null)
-        const isLastChild = el.parentElement.lastElementChild === el
-        if (hasTrigger && isLastChild) return el
-        el = el.parentElement
-      }
-      return null
-    }
-
-    const tryApply = (): boolean => {
-      if (foot === null) {
-        try {
-          foot = findFoot()
-        } catch {
-          foot = null
-        }
-      }
-      if (foot === null) return false
-      try {
-        foot.classList.add('kb-foot-row')
-        foot.classList.toggle('kb-foot-rail', wide !== true)
-      } catch {
-        // element already gone; retry will re-locate
-      }
-      return true
-    }
-
-    let applied = false
-    try {
-      applied = tryApply()
-    } catch (error) {
-      console.error('[@fonlan/dsh-task-kanban] foot placement error:', error)
-    }
-    if (!applied) {
-      // The settings entry may mount later than this entry (plugin load
-      // order); retry on DOM mutations AND on a short interval until the
-      // foot area is found (give up after 15s).
-      const observer = new MutationObserver(() => {
-        if (disposed) return
-        if (tryApply()) observer.disconnect()
-      })
-      observer.observe(document.body, { childList: true, subtree: true })
-      const timer = window.setInterval(() => {
-        if (disposed) {
-          window.clearInterval(timer)
-          return
-        }
-        if (tryApply()) {
-          observer.disconnect()
-          window.clearInterval(timer)
-        }
-      }, 1000)
-      window.setTimeout(() => {
-        observer.disconnect()
-        window.clearInterval(timer)
-        if (foot === null) {
-          // report the DOM chain so the next report carries evidence
-          const chain: string[] = []
-          let el: Element | null = btn.parentElement
-          while (el !== null && chain.length < 8) {
-            chain.push(el.tagName + '.' + String(el.className).slice(0, 60))
-            el = el.parentElement
-          }
-          console.warn('[@fonlan/dsh-task-kanban] could not locate the sidebar foot area:', chain)
-        }
-      }, 15000)
-      return () => {
-        disposed = true
-        observer.disconnect()
-        window.clearInterval(timer)
-        try {
-          foot?.classList.remove('kb-foot-row')
-          foot?.classList.remove('kb-foot-rail')
-        } catch {
-          // already gone
-        }
-      }
-    }
-    return () => {
-      try {
-        foot?.classList.remove('kb-foot-row')
-        foot?.classList.remove('kb-foot-rail')
-      } catch {
-        // already gone
-      }
-    }
-  }, [wide])
-
-  return (
-    <button
-      ref={ref}
-      type="button"
-      className={'kb-footer-action' + (wide === true ? ' kb-footer-action-wide' : '') + (open ? ' kb-footer-action-active' : '')}
-      aria-label={label}
-      title={label}
-      onClick={() => toggleBoard()}
-    >
-      <IconChecklistOutline14 size={wide === true ? 16 : 18} />
-      {wide === true && <span className="kb-footer-label">{t !== undefined ? t('kanban') : 'Kanban'}</span>}
-    </button>
-  )
-}
-
-interface SettingsCardProps {
+interface SettingsSectionProps {
   t?: (key: string) => string
 }
 
@@ -247,11 +121,9 @@ function SessionDefaultsGroup({ kind, settings, models, presets, efforts, tr, on
   )
 }
 
-/** Plugin settings card (设置 → 插件配置): workers + default model + per-session-type defaults. */
-export function KanbanSettingsCard({ t }: SettingsCardProps): JSX.Element {
+/** Plugin settings page (设置 -> 侧栏「任务看板」): workers + default model + per-session-type defaults. */
+export function KanbanSettingsSection({ t }: SettingsSectionProps): JSX.Element {
   const tr = t ?? ((key: string) => key)
-  // Card-local disclosure: collapsed by default, like the built-in plugin cards.
-  const [open, setOpen] = useState(false)
   const [settings, setSettings] = useState<KanbanSettingsShape>(EMPTY_SETTINGS)
   const [models, setModels] = useState<ModelOption[]>([])
   const [presets, setPresets] = useState<PresetOption[]>([])
@@ -339,67 +211,49 @@ export function KanbanSettingsCard({ t }: SettingsCardProps): JSX.Element {
   }, [efforts])
 
   return (
-    <li className="kb-settings-card" data-open={open ? '' : undefined}>
-      <button
-        type="button"
-        className="kb-settings-card-head"
-        aria-expanded={open}
-        aria-label={(open ? tr('settingsCollapse') : tr('settingsExpand')) + '：' + tr('settingsTitle')}
-        onClick={() => setOpen(!open)}
-      >
-        <span className="kb-settings-card-headText">
-          <span className="kb-settings-card-title">{tr('settingsTitle')}</span>
-          <span className="kb-settings-card-sub">{tr('settingsDescription')}</span>
-        </span>
-        <span className="kb-settings-card-chevron" data-open={open ? '' : undefined} aria-hidden="true">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path d="M3.5 5.25L7 8.75L10.5 5.25" stroke="currentColor" strokeWidth="1.5"
-              strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
-        </span>
-      </button>
-      {open && (
-        <div className="kb-settings-card-body">
-          <div className="kb-settings">
-            <label className="kb-field kb-field-row">
-              <span>{tr('maxParallelWorkers')}</span>
-              <input
-                className="kb-input kb-input-number"
-                type="number"
-                min={1}
-                step={1}
-                value={settings.maxParallelWorkers}
-                onChange={(e) => {
-                  const value = Math.max(1, Math.floor(Number(e.target.value) || 1))
-                  setSettings((s) => ({ ...s, maxParallelWorkers: value }))
-                  void commit({ maxParallelWorkers: value })
-                }}
-              />
-            </label>
-            <SessionDefaultsGroup
-              kind="refinement"
-              settings={settings}
-              models={models}
-              presets={presets}
-              efforts={efforts}
-              tr={tr}
-              onCommit={commit}
-              loadEfforts={loadEfforts}
-            />
-            <SessionDefaultsGroup
-              kind="phase"
-              settings={settings}
-              models={models}
-              presets={presets}
-              efforts={efforts}
-              tr={tr}
-              onCommit={commit}
-              loadEfforts={loadEfforts}
-            />
-            {saved && <div className="kb-settings-saved">{tr('saved')}</div>}
-          </div>
-        </div>
-      )}
-    </li>
+    <div className="kb-page">
+      <header className="kb-page-head">
+        <h3 className="kb-page-title">{tr('settingsTitle')}</h3>
+        <p className="kb-page-sub">{tr('sectionSub')}</p>
+      </header>
+      <div className="kb-settings">
+        <label className="kb-field kb-field-row">
+          <span>{tr('maxParallelWorkers')}</span>
+          <input
+            className="kb-input kb-input-number"
+            type="number"
+            min={1}
+            step={1}
+            value={settings.maxParallelWorkers}
+            onChange={(e) => {
+              const value = Math.max(1, Math.floor(Number(e.target.value) || 1))
+              setSettings((s) => ({ ...s, maxParallelWorkers: value }))
+              void commit({ maxParallelWorkers: value })
+            }}
+          />
+        </label>
+        <SessionDefaultsGroup
+          kind="refinement"
+          settings={settings}
+          models={models}
+          presets={presets}
+          efforts={efforts}
+          tr={tr}
+          onCommit={commit}
+          loadEfforts={loadEfforts}
+        />
+        <SessionDefaultsGroup
+          kind="phase"
+          settings={settings}
+          models={models}
+          presets={presets}
+          efforts={efforts}
+          tr={tr}
+          onCommit={commit}
+          loadEfforts={loadEfforts}
+        />
+        {saved && <div className="kb-settings-saved">{tr('saved')}</div>}
+      </div>
+    </div>
   )
 }

package/src/index.ts

@@ -7,20 +7,22 @@
  * serves the fenced JSON API the board UI calls.
  */
 import type { Context } from '@deepseek-ai/cordis'
-import z from '@deepseek-ai/schemastery'
-import { registerSettings } from './server/settings.js'
+import { KanbanSettingsSchema, registerSettings } from './server/settings.js'
 import { TaskStore } from './server/task-store.js'
 import { KanbanRunner } from './server/runner.js'
 import { registerApiRoutes } from './server/rpc.js'
+import type { KanbanSettingsShape } from './shared/card.js'
 
 export const name = '@fonlan/dsh-task-kanban'
 
 export const inject = ['webServer', 'agents', 'skills']
 
-export const Config = z.object({})
+// The entry config is the settings document (worker count + per-session-type
+// defaults); a changed config restarts this entry.
+export const Config = KanbanSettingsSchema
 
-export function apply(ctx: Context, _config: unknown): void {
-  const settings = registerSettings(ctx)
+export function apply(ctx: Context, config: KanbanSettingsShape): void {
+  const settings = registerSettings(ctx, config)
   const store = new TaskStore()
   const runner = new KanbanRunner(ctx, store, settings)