@linxin666/dsh-client-ui-task-board 0.2.0 → 0.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-task-board",
   "description": "Host-authoritative task board for the DSH Web GUI with real session execution, Host cron scheduling, and optional cross-platform idle-sleep protection; mounted without DSH source changes.",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -55,7 +55,6 @@
     "@types/react-dom": "^18.3.5",
     "@types/node": "^22.20.0",
     "jsdom": "^25.0.0",
-    "lightningcss": "1.32.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsdown": "0.22.2",

package/src/client/PluginSettingsCard.tsx

@@ -8,7 +8,7 @@
  * ui-plugin-config PluginCard in a self-contained slice.
  */
 
-import { useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'
 
@@ -255,6 +255,210 @@ export function ValueField(props: FieldProps & {
   )
 }
 
+const NON_SKIN_BODY_MARKERS = new Set(['dshSkinCenter', 'dshSidebarCollapsed'])
+// 检测使用使用皮肤，用了皮肤退回原生select样式，防止样式冲突。默认外观下使用优化后的select样式。
+function isSkinActive(): boolean {
+  const datasetList = Object.keys(document.body.dataset)
+  const isActive = datasetList.some(key => key.startsWith('dsh') && !NON_SKIN_BODY_MARKERS.has(key))
+  return isActive
+}
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+const SELECT_CLOSE_MS = 100
+
+/**
+ * The shared dual-mode select control. While an appearance skin is active it
+ * renders the legacy native `<select>` untouched, so element-level skin
+ * selectors keep working; under the default appearance it renders a
+ * self-drawn `role="listbox"` popup whose open/close is transition-animated.
+ * Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+ * editors (the side-card prefs) bind it directly through onEdit.
+ * 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+ */
+export function SelectField(props: {
+  id: string
+  options: ReadonlyArray<SelectOption>
+  value: string
+  disabled: boolean
+  invalid: boolean
+  onEdit: (text: string) => void
+}) {
+  const { id, options, value } = props
+  const [open, setOpen] = useState(false)
+  const [closing, setClosing] = useState(false)
+  const [phase, setPhase] = useState<'initial' | 'open'>('initial')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const currentIndex = () => {
+    const index = options.findIndex(option => option.value === value)
+    return index >= 0 ? index : 0
+  }
+
+  const close = useCallback(() => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setClosing(true)
+    closeTimer.current = setTimeout(() => {
+      setClosing(false)
+      setOpen(false)
+    }, SELECT_CLOSE_MS)
+  }, [])
+
+  const openPopup = () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setActiveIndex(currentIndex())
+    setPhase('initial')
+    setClosing(false)
+    setOpen(true)
+  }
+
+  const commit = (index: number) => {
+    const option = options[index]
+    if (option) props.onEdit(option.value)
+    close()
+  }
+
+  const onTriggerClick = () => {
+    if (props.disabled) return
+    if (open && !closing) close()
+    else openPopup()
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (props.disabled) return
+    const count = options.length
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (!open) {
+          openPopup()
+        } else if (!closing) {
+          if (event.key === 'ArrowDown') setActiveIndex(index => (index + 1) % count)
+          else if (event.key === 'ArrowUp') setActiveIndex(index => (index - 1 + count) % count)
+          else commit(activeIndex)
+        }
+        break
+      case 'Escape':
+        if (open) {
+          event.preventDefault()
+          event.stopPropagation()
+          close()
+        }
+        break
+      case 'Tab':
+        if (open) close()
+        break
+    }
+  }
+
+  useEffect(() => () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+  }, [])
+  useLayoutEffect(() => {
+    if (open && !closing && phase === 'initial') {
+      void popupRef.current?.offsetHeight
+      setPhase('open')
+    }
+  }, [open, closing, phase])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && !wrapRef.current?.contains(target)) close()
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open, close])
+
+  useEffect(() => {
+    if (props.disabled && open) close()
+  }, [props.disabled, open, close])
+
+  // 使用了皮肤则退回原生select样式防止样式冲突。
+  if (isSkinActive()) {
+    return (
+      <select
+        id={id}
+        className={css.select}
+        value={value}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    )
+  }
+
+  const label = options.find(option => option.value === value)?.label ?? ''
+  const popupClass = closing
+    ? `${css.selectPopup} ${css.selectPopupClose}`
+    : phase === 'open'
+      ? `${css.selectPopup} ${css.selectPopupOpen}`
+      : css.selectPopup
+  return (
+    <div className={css.selectWrap} ref={wrapRef}>
+      <button
+        type="button"
+        id={id}
+        className={`${css.select} ${css.selectButton}`}
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-activedescendant={open ? `${id}-o${activeIndex}` : undefined}
+        aria-invalid={props.invalid || undefined}
+        onClick={onTriggerClick}
+        onKeyDown={onKeyDown}
+      >
+        <span className={css.selectLabel}>{label}</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.selectChevron} ${css.selectChevronOpen}` : css.selectChevron}
+          aria-hidden="true"
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      {open
+        ? (
+          <div className={popupClass} role="listbox" ref={popupRef}>
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                id={`${id}-o${index}`}
+                role="option"
+                aria-selected={option.value === value}
+                className={`${css.selectOption}${option.value === value ? ` ${css.selectOptionSelected}` : ''}${index === activeIndex && !closing ? ` ${css.selectOptionActive}` : ''}`}
+                onClick={() => { commit(index) }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )
+        : null}
+    </div>
+  )
+}
+
 /** A staged boolean field: 继承 / 开 / 关. */
 export function BooleanField(props: FieldProps & {
   /** Copy for the inherit option. */
@@ -284,17 +488,18 @@ export function BooleanField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[
+          { value: '', label: props.inheritLabel },
+          { value: 'true', label: props.onLabel },
+          { value: 'false', label: props.offLabel },
+        ]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        <option value="true">{props.onLabel}</option>
-        <option value="false">{props.offLabel}</option>
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
@@ -327,18 +532,14 @@ export function ChoiceField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[{ value: '', label: props.inheritLabel }, ...props.choices]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        {props.choices.map(choice => (
-          <option key={choice.value} value={choice.value}>{choice.label}</option>
-        ))}
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={props.invalid ? css.invalid : css.hint}>
         {props.invalid ? props.invalidLabel : props.hint}
       </p>

package/src/client/TaskBoardSettingsCard.tsx

@@ -1,7 +1,7 @@
 /**
  * Task-board settings for availability, agent announcement, and optional Host
- * idle-sleep protection. Registers into the `settings.plugin.item` slot the
- * plugin-configuration section renders, bound to the `task-board` namespace.
+ * idle-sleep protection. Registers into the `web-ui.plugin.item` child slot
+ * the Web UI plugin group renders, bound to the `task-board` namespace.
  */
 
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
@@ -97,20 +97,20 @@ export function TaskBoardSettingsCard(props: TaskBoardSettingsCardProps) {
   const disabled = !state.writable
   const [power, setPower] = useState<TaskBoardPowerSnapshot | undefined>()
   useEffect(() => {
+    // The SSE channel already carries power on every real change and pushes
+    // one frame on subscribe; polling the full /state snapshot every 5 s
+    // re-cloned and re-serialized the whole ledger server-side for one field.
     let live = true
-    const refresh = async (): Promise<void> => {
+    const events = new EventSource('/api/task-board/events')
+    events.onmessage = (message: MessageEvent<string>): void => {
       try {
-        const response = await fetch('/api/task-board/state', { cache: 'no-store', credentials: 'same-origin' })
-        if (!response.ok) return
-        const snapshot = await response.json() as { power?: TaskBoardPowerSnapshot }
-        if (live) setPower(snapshot.power)
+        const frame = JSON.parse(message.data) as { power?: TaskBoardPowerSnapshot }
+        if (frame.power !== undefined && live) setPower(frame.power)
       } catch {
         // The settings form remains usable while the host status is reconnecting.
       }
     }
-    void refresh()
-    const timer = setInterval(() => { void refresh() }, 5_000)
-    return () => { live = false; clearInterval(timer) }
+    return () => { live = false; events.close() }
   }, [])
   const fieldProps = {
     overriddenLabel: t('settings.overridden'),

package/src/client/board/TaskBoard.tsx

@@ -5,8 +5,8 @@
  */
 import { memo, useCallback, useEffect, useState } from 'react'
 import { selectedTaskOf, type BoardController } from '../../core/controller.ts'
-import { COLUMNS, type TaskRecord, type TaskStatus } from '../../core/tasks.ts'
-import { t, type TaskBoardKey } from '../locales.ts'
+import { COLUMNS, type TaskRecord } from '../../core/tasks.ts'
+import { t } from '../locales.ts'
 import css from '../board.module.css'
 import { NewTaskModal } from './NewTaskModal.tsx'
 import { STATUS_KEY } from './status-key.ts'
@@ -50,7 +50,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   const openTask = useCallback((id: string): void => { controller.openTask(id) }, [controller])
 
   return (
-    <div className={css.board} data-dsh-taskboard-board="">
+    <div className={css.board} data-dsh-taskboard-board="" data-dsh-plugin="task-board">
       <header className={css.boardHeader}>
         <button
           type="button"
@@ -107,7 +107,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
 
       <div className={css.columns}>
         {archiveView ? (
-          <section className={css.column} data-status="archived">
+          <section className={css.column} data-status="archived" data-dsh-part="column">
             <header className={css.columnHeader}>
               <h3 className={css.columnTitle}>{t('board.archive')}</h3>
               <span className={css.columnCount}>{visible.length}</span>
@@ -123,7 +123,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           COLUMNS.map(column => {
             const tasks = visible.filter(task => task.status === column.status)
             return (
-              <section key={column.status} className={css.column} data-status={column.status}>
+              <section key={column.status} className={css.column} data-status={column.status} data-dsh-part="column">
                 <header className={css.columnHeader}>
                   <span className={css.statusDot} data-status={column.status} aria-hidden="true" />
                   <h3 className={css.columnTitle}>{t(STATUS_KEY[column.status])}</h3>

package/src/client/board/TaskCard.tsx

@@ -47,6 +47,7 @@ function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord;
       type="button"
       className={css.card}
       data-status={archived ? 'archived' : task.status}
+      data-dsh-part="card"
       data-pending={pending || undefined}
       onClick={onClick}
       title={task.description !== '' ? task.description : task.title}

package/src/client/board/TaskDetail.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
 import { isValidCron } from '../../core/schedule.ts'
-import { MANUAL_STATUSES, TASK_PERMISSIONS, type ExecutionRecord, type TaskPermission, type TaskRecord, type TaskStatus } from '../../core/tasks.ts'
+import { MANUAL_STATUSES, TASK_PERMISSIONS, type ExecutionRecord, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import css from '../board.module.css'

package/src/client/board-mount.tsx

@@ -49,6 +49,7 @@ export function mountBoard(controller: BoardController): () => void {
     if (column === undefined) return
     container = document.createElement('div')
     container.dataset.dshTaskboardView = ''
+    container.dataset.dshPlugin = 'task-board'
     container.className = css.boardView
     column.appendChild(container)
     root = createRoot(container)

package/src/client/host-api.ts

@@ -3,6 +3,7 @@ import {
   TASK_BOARD_API_PREFIX,
   type TaskBoardAction,
   type TaskBoardActionEnvelope,
+  type TaskBoardEventPayload,
   type TaskBoardSnapshot,
 } from '../protocol.ts'
 
@@ -25,7 +26,7 @@ export interface TaskBoardHostTransport {
   bootstrap(legacy: readonly TaskRecord[]): Promise<TaskBoardSnapshot>
   state(): Promise<TaskBoardSnapshot>
   action(action: TaskBoardAction): Promise<TaskBoardSnapshot>
-  subscribe(listener: () => void): () => void
+  subscribe(listener: (event?: TaskBoardEventPayload) => void): () => void
 }
 
 export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
@@ -82,9 +83,17 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
     }
   }
 
-  subscribe(listener: () => void): () => void {
+  subscribe(listener: (event?: TaskBoardEventPayload) => void): () => void {
     const events = new EventSource(`${TASK_BOARD_API_PREFIX}/events`)
-    events.onmessage = () => { listener() }
+    events.onmessage = (message: MessageEvent<string>): void => {
+      try {
+        const parsed = JSON.parse(message.data) as TaskBoardEventPayload
+        if (parsed === null || typeof parsed !== 'object' || typeof parsed.revision !== 'number') throw new Error('invalid event frame')
+        listener(parsed)
+      } catch {
+        listener()
+      }
+    }
     const onVisible = (): void => { if (document.visibilityState === 'visible') listener() }
     document.addEventListener('visibilitychange', onVisible)
     return () => {

package/src/client/settings-card.module.css

@@ -290,6 +290,92 @@
   border-color: var(--dsw-alias-label-error);
 }
 
+.selectWrap {
+  position: relative;
+}
+
+.selectButton {
+  appearance: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  display: flex;
+}
+
+.selectLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectChevron {
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
+}
+
+.selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+.selectPopup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  flex-direction: column;
+  max-height: 240px;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  box-shadow: 0 8px 24px var(--dsw-alias-bg-mask-2);
+  padding: 4px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.1s ease, transform 0.1s ease;
+  display: flex;
+}
+
+.selectPopupOpen {
+  opacity: 1;
+  transform: none;
+}
+
+.selectPopupClose {
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+
+.selectOption {
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selectOption:hover,
+.selectOptionActive {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.selectOptionSelected {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 500;
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 10%, transparent);
+}
+
 .invalid {
   color: var(--dsw-alias-label-error);
   margin: 0;
@@ -310,7 +396,10 @@
   .chevron,
   .chevronOpen,
   .discard,
-  .save {
+  .save,
+  .selectChevron,
+  .selectChevronOpen,
+  .selectPopup {
     transition: none;
   }
 }