@linxin666/dsh-client-ui-task-board 0.1.1

package/src/client/PluginSettingsCard.tsx

@@ -0,0 +1,207 @@
+/**
+ * Shared chrome for the plugin settings card: a disclosure header naming the
+ * plugin and what its settings govern, the controls inside, and the save that
+ * writes them. Renders nothing while the namespace is unavailable — a
+ * deployment that does not compose the owning plugin should show no trace of
+ * it. Mirrors the official ui-plugin-config PluginCard in a self-contained
+ * slice (this package must not depend on a sibling UI package).
+ */
+
+import { useState, type ReactNode } from 'react'
+import type { CardShell } from './settings-form.ts'
+import type { SettingsCardKey } from './locales.ts'
+import css from './settings-card.module.css'
+
+/** Card chrome shared by every plugin settings card. */
+export interface PluginSettingsCardProps {
+  /** Locale reader for this card's copy. */
+  t: (key: SettingsCardKey) => string
+  /** Locale key of the plugin's name. */
+  titleKey: SettingsCardKey
+  /** Locale key of the line describing what this plugin's settings govern. */
+  descriptionKey: SettingsCardKey
+  /** The card's form state: availability, writability, and what a save would do. */
+  state: CardShell
+  /** Write every staged edit. */
+  onSave: () => void
+  /** Drop every staged edit. */
+  onDiscard: () => void
+  /** The plugin's controls. */
+  children: ReactNode
+}
+
+/**
+ * Render one plugin settings card.
+ * @param props - the plugin's copy keys, its form state, and its controls.
+ * @returns the card, or nothing when the namespace is unavailable.
+ */
+export function PluginSettingsCard(props: PluginSettingsCardProps) {
+  const [open, setOpen] = useState(false)
+  const { state } = props
+  if (!state.available) return null
+  const title = props.t(props.titleKey)
+  const blocked = !state.dirty || state.invalid || state.saving
+  return (
+    <li className={css.card}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{title}</span>
+          <span className={css.description}>{props.t(props.descriptionKey)}</span>
+        </span>
+        {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
+        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+      </button>
+      {open
+        ? (
+          <div className={css.body}>
+            {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
+            {props.children}
+            <div className={css.footer}>
+              {state.failed ? <p className={css.failed} role="status">{props.t('settings.saveFailed')}</p> : null}
+              <button
+                type="button"
+                className={css.discard}
+                disabled={!state.dirty || state.saving}
+                onClick={props.onDiscard}
+              >
+                {props.t('settings.discard')}
+              </button>
+              <button
+                type="button"
+                className={css.save}
+                disabled={blocked}
+                onClick={props.onSave}
+              >
+                {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
+              </button>
+            </div>
+          </div>
+        )
+        : null}
+    </li>
+  )
+}
+
+/** Props every field control needs regardless of its value type. */
+export interface FieldProps {
+  /** Stable id associating the label with its control. */
+  id: string
+  /** Visible label. */
+  label: string
+  /** One-line explanation rendered under the control. */
+  hint: string
+  /** Draft text this control renders. */
+  text: string
+  /** True when saving would leave a user-layer entry for this field. */
+  overridden: boolean
+  /** True when the draft is not a value this field accepts. */
+  invalid: boolean
+  /** Copy for the overridden badge. */
+  overriddenLabel: string
+  /** Copy for the reset control. */
+  resetLabel: string
+  /** Copy shown in place of the hint while the draft is invalid. */
+  invalidLabel: string
+  /** Disables every control (read-only document, or an unavailable namespace). */
+  disabled: boolean
+  /** Stage draft text. */
+  onEdit: (text: string) => void
+  /** Stage a clear so the field re-inherits the composition layer. */
+  onReset: () => void
+}
+
+/** A staged value field. `numeric` only hints the keypad: which drafts a field accepts is decided by its spec. */
+export function ValueField(props: FieldProps & {
+  /** Hints a numeric keypad without narrowing what the control accepts. */
+  numeric?: boolean
+  /** Placeholder shown while the draft is empty. */
+  placeholder?: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <input
+        id={props.id}
+        className={props.invalid ? css.inputInvalid : css.input}
+        type="text"
+        {...props.numeric === true ? { inputMode: 'numeric' as const } : {}}
+        {...props.invalid ? { 'aria-invalid': true } : {}}
+        value={props.text}
+        placeholder={props.placeholder ?? ''}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      />
+      <p className={props.invalid ? css.invalid : css.hint}>
+        {props.invalid ? props.invalidLabel : props.hint}
+      </p>
+    </div>
+  )
+}
+
+/** A staged boolean field: 继承 / 开 / 关. */
+export function BooleanField(props: FieldProps & {
+  /** Copy for the inherit option. */
+  inheritLabel: string
+  /** Copy for the on option. */
+  onLabel: string
+  /** Copy for the off option. */
+  offLabel: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <select
+        id={props.id}
+        className={css.select}
+        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>
+      <p className={css.hint}>{props.hint}</p>
+    </div>
+  )
+}

package/src/client/TaskBoardSettingsCard.tsx

@@ -0,0 +1,124 @@
+/**
+ * The task-board settings card: whether the board announces itself in every
+ * agent's system prompt. Registers into the `settings.plugin.item` slot the
+ * plugin-configuration section renders, bound to the `task-board` settings
+ * namespace.
+ */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { PluginSettingsCard, BooleanField } from './PluginSettingsCard.tsx'
+import { CardForm, booleanField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
+
+/** The task-board fields this card edits (the namespace's full schema). */
+export interface TaskBoardSettings {
+  /** Master switch for the plugin. */
+  enabled?: boolean
+  /** Whether the board announces itself in every agent's system prompt. */
+  announceToAgent?: boolean
+}
+
+/** What the task-board card renders. */
+export interface TaskBoardSettingsCardState extends CardShell {
+  /** Master switch. */
+  enabled: CardFieldState
+  /** System-prompt announcement flag. */
+  announceToAgent: CardFieldState
+}
+
+/** The registration-side face the card's slot entry injects. */
+export interface TaskBoardSettingsCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useTaskBoardSettingsCard. */
+    taskBoardSettingsCard: SnapshotStore<TaskBoardSettingsCardState>
+  }
+}
+
+/** Bridges the `task-board` scope onto the card's staged form. */
+export class TaskBoardSettingsCardController {
+  private readonly form: CardForm<TaskBoardSettings>
+  private readonly store: SnapshotStore<TaskBoardSettingsCardState>
+
+  /** @param scope - the bound settings scope for the `task-board` namespace. */
+  constructor(scope: SettingsScope<TaskBoardSettings>) {
+    this.form = new CardForm(scope, [
+      booleanField('enabled'),
+      booleanField('announceToAgent'),
+    ])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): TaskBoardSettingsCardState {
+    return {
+      ...this.form.shell(),
+      enabled: this.form.field('enabled'),
+      announceToAgent: this.form.field('announceToAgent'),
+    }
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): TaskBoardSettingsCardFace {
+    return { hooks: { taskBoardSettingsCard: this.store }, ...this.form.actions() }
+  }
+}
+
+/** Props the renderer binds for the task-board card. */
+export type TaskBoardSettingsCardProps =
+  PropsRuntime<'web-ui.plugin.item'>
+  & PropsLocale<'task-board'>
+  & InjectFace<TaskBoardSettingsCardFace>
+
+/**
+ * Render the task-board card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function TaskBoardSettingsCard(props: TaskBoardSettingsCardProps) {
+  const { t } = props
+  const state = props.useTaskBoardSettingsCard(snapshot => snapshot)
+  const disabled = !state.writable
+  const fieldProps = {
+    overriddenLabel: t('settings.overridden'),
+    resetLabel: t('settings.reset'),
+    invalidLabel: t('settings.invalidNumber'),
+    disabled,
+  }
+  return (
+    <PluginSettingsCard
+      t={t}
+      titleKey="settings.title"
+      descriptionKey="settings.description"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <BooleanField
+        id="settings-task-board-enabled"
+        label={t('settings.enabled')}
+        hint={t('settings.enabledHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.enabled}
+        onEdit={(text) => { props.edit('enabled', text) }}
+        onReset={() => { props.resetField('enabled') }}
+      />
+      <BooleanField
+        id="settings-task-board-announce"
+        label={t('settings.announceToAgent')}
+        hint={t('settings.announceToAgentHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.announceToAgent}
+        onEdit={(text) => { props.edit('announceToAgent', text) }}
+        onReset={() => { props.resetField('announceToAgent') }}
+      />
+    </PluginSettingsCard>
+  )
+}

package/src/client/board/ConfirmDialog.tsx

@@ -0,0 +1,40 @@
+/**
+ * Generic confirm dialog used by destructive actions (task delete).
+ */
+import { t } from '../locales.ts'
+import css from '../board.module.css'
+
+/** Confirm overlay props. */
+export interface ConfirmDialogProps {
+  title: string
+  message: string
+  confirmLabel: string
+  /** Render the confirm button in the danger style. */
+  danger?: boolean
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+/** Small confirm overlay. */
+export function ConfirmDialog({ title, message, confirmLabel, danger, onCancel, onConfirm }: ConfirmDialogProps) {
+  return (
+    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onCancel() }}>
+      <div className={css.modal} role="alertdialog" aria-label={title}>
+        <h2 className={css.modalTitle}>{title}</h2>
+        <p className={css.confirmMessage}>{message}</p>
+        <footer className={css.modalFooter}>
+          <button type="button" className={css.ghostButton} onClick={onCancel}>
+            {t('delete.cancel')}
+          </button>
+          <button
+            type="button"
+            className={danger ? css.dangerButton : css.primaryButton}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </footer>
+      </div>
+    </div>
+  )
+}

package/src/client/board/NewTaskModal.tsx

@@ -0,0 +1,82 @@
+/**
+ * New-task modal: title + description + the prompt that execution will send.
+ * Creates through the controller (which persists immediately).
+ */
+import { useState } from 'react'
+import type { BoardController } from '../../core/controller.ts'
+import { t } from '../locales.ts'
+import css from '../board.module.css'
+
+/** New-task form overlay. */
+export function NewTaskModal({ controller, onClose }: { controller: BoardController; onClose: () => void }) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [prompt, setPrompt] = useState('')
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const submit = (): void => {
+    const task = controller.createTask({ title, description, prompt })
+    if (task === undefined) {
+      setError(t('new.required'))
+      return
+    }
+    onClose()
+  }
+
+  return (
+    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onClose() }}>
+      <form
+        className={css.modal}
+        role="dialog"
+        aria-label={t('board.new')}
+        onSubmit={event => { event.preventDefault(); submit() }}
+      >
+        <h2 className={css.modalTitle}>{t('board.new')}</h2>
+
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{t('new.title')}</span>
+          <input
+            className={css.input}
+            value={title}
+            autoFocus
+            placeholder={t('new.titlePlaceholder')}
+            onChange={event => { setTitle(event.target.value); setError(undefined) }}
+          />
+        </label>
+
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{t('new.description')}</span>
+          <textarea
+            className={css.input}
+            rows={3}
+            value={description}
+            placeholder={t('new.descriptionPlaceholder')}
+            onChange={event => { setDescription(event.target.value) }}
+          />
+        </label>
+
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{t('new.prompt')}</span>
+          <textarea
+            className={css.input}
+            rows={4}
+            value={prompt}
+            placeholder={t('new.promptPlaceholder')}
+            onChange={event => { setPrompt(event.target.value) }}
+          />
+        </label>
+
+        {error !== undefined && <p className={css.formError}>{error}</p>}
+
+        <footer className={css.modalFooter}>
+          <button type="button" className={css.ghostButton} onClick={onClose}>
+            {t('new.cancel')}
+          </button>
+          <button type="submit" className={css.primaryButton}>
+            {t('new.submit')}
+          </button>
+        </footer>
+      </form>
+    </div>
+  )
+}

package/src/client/board/TaskBoard.tsx

@@ -0,0 +1,107 @@
+/**
+ * Board view: the multi-column kanban that replaces the middle column while
+ * active. Cards open the task detail (never execute directly); the header
+ * offers filter, new-task, and a back-to-chat escape.
+ */
+import { 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 css from '../board.module.css'
+import { NewTaskModal } from './NewTaskModal.tsx'
+import { TaskCard } from './TaskCard.tsx'
+import { TaskDetail } from './TaskDetail.tsx'
+
+/** Column status → locale key. */
+const STATUS_KEY: Record<TaskStatus, TaskBoardKey> = {
+  backlog: 'board.status.backlog',
+  todo: 'board.status.todo',
+  running: 'board.status.running',
+  done: 'board.status.done',
+  failed: 'board.status.failed',
+}
+
+/** Case-insensitive title/description match. */
+function matchesFilter(task: TaskRecord, filter: string): boolean {
+  if (filter.trim() === '') return true
+  const needle = filter.trim().toLowerCase()
+  return task.title.toLowerCase().includes(needle) || task.description.toLowerCase().includes(needle)
+}
+
+/** Board component; subscribes to the controller snapshot. */
+export function TaskBoard({ controller }: { controller: BoardController }) {
+  const [snapshot, setSnapshot] = useState(controller.getSnapshot())
+  useEffect(
+    () => controller.subscribe(() => setSnapshot(controller.getSnapshot())),
+    [controller],
+  )
+  const [filter, setFilter] = useState('')
+  const [showNew, setShowNew] = useState(false)
+  const selected = selectedTaskOf(snapshot)
+  const visible = snapshot.tasks.filter(task => matchesFilter(task, filter))
+
+  return (
+    <div className={css.board} data-dsh-taskboard-board="">
+      <header className={css.boardHeader}>
+        <h2 className={css.boardTitle}>{t('board.title')}</h2>
+        <input
+          className={css.search}
+          type="search"
+          placeholder={t('board.search')}
+          value={filter}
+          onChange={event => { setFilter(event.target.value) }}
+          aria-label={t('board.search')}
+        />
+        <button
+          type="button"
+          className={css.primaryButton}
+          onClick={() => { setShowNew(true) }}
+        >
+          + {t('board.new')}
+        </button>
+        <button
+          type="button"
+          className={css.ghostButton}
+          onClick={() => { controller.closeBoard() }}
+        >
+          {t('board.close')}
+        </button>
+      </header>
+
+      <div className={css.columns}>
+        {COLUMNS.map(column => {
+          const tasks = visible.filter(task => task.status === column.status)
+          return (
+            <section key={column.status} className={css.column} data-status={column.status}>
+              <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>
+                <span className={css.columnCount}>{tasks.length}</span>
+              </header>
+              <div className={css.cards}>
+                {tasks.map(task => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    onClick={() => { controller.openTask(task.id) }}
+                  />
+                ))}
+                {tasks.length === 0 && <div className={css.columnEmpty}>{t('board.empty')}</div>}
+              </div>
+            </section>
+          )
+        })}
+      </div>
+
+      {selected !== undefined && (
+        <TaskDetail controller={controller} task={selected} />
+      )}
+      {showNew && (
+        <NewTaskModal
+          controller={controller}
+          onClose={() => { setShowNew(false) }}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/board/TaskCard.tsx

@@ -0,0 +1,62 @@
+/**
+ * Task card: the board's column item. Clicking opens the task detail — it
+ * never executes anything directly (detail holds the Run button).
+ */
+import type { TaskRecord } from '../../core/tasks.ts'
+import { executionLabel } from '../../core/tasks.ts'
+import { t } from '../locales.ts'
+import css from '../board.module.css'
+
+/** Compact relative/absolute time label. */
+export function formatTime(ms: number): string {
+  const date = new Date(ms)
+  const now = Date.now()
+  const minutes = Math.floor((now - ms) / 60000)
+  if (minutes < 1) return t('time.justNow')
+  if (minutes < 60) return `${minutes}m`
+  if (minutes < 60 * 24) return `${Math.floor(minutes / 60)}h`
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+/** One card in a column. */
+export function TaskCard({ task, onClick }: { task: TaskRecord; onClick: () => void }) {
+  const latest = task.executions[task.executions.length - 1]
+  const runs = task.executions.length
+  return (
+    <button
+      type="button"
+      className={css.card}
+      data-status={task.status}
+      onClick={onClick}
+      title={task.description !== '' ? task.description : task.title}
+    >
+      <span className={css.cardTitle}>{task.title}</span>
+      {task.description !== '' && <span className={css.cardExcerpt}>{task.description}</span>}
+      <span className={css.cardMeta}>
+        <span className={css.cardTime}>{t('board.updated')} {formatTime(task.updatedAt)}</span>
+        {task.schedule?.enabled === true && (
+          <span
+            className={css.cardSchedule}
+            title={task.schedule.nextRunAt !== undefined
+              ? `${t('card.scheduled')} · ${new Date(task.schedule.nextRunAt).toLocaleString()}`
+              : t('card.scheduled')}
+          >
+            {t('card.scheduled')}
+          </span>
+        )}
+        {latest !== undefined && (
+          <span className={css.cardRun} data-result={latest.result}>
+            {runs} {t('board.runs')}
+          </span>
+        )}
+        {latest?.sessionId !== undefined && (
+          <span className={css.cardSession} title={latest.sessionId}>⌁</span>
+        )}
+        {task.status === 'running' && <span className={css.cardSpinner} aria-hidden="true" />}
+      </span>
+      {latest !== undefined && executionLabel(latest) === 'running' && (
+        <span className={css.cardRunningLabel}>{t('detail.result.running')}…</span>
+      )}
+    </button>
+  )
+}