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

package/src/client/board/LinkSubtaskModal.tsx

@@ -7,9 +7,10 @@
 import { useMemo, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
 import { DEFAULT_SUBTASK_DEPTH, buildLineageIndex, checkParentLink } from '../../core/subtask.ts'
-import type { TaskRecord } from '../../core/tasks.ts'
+import { hasOpenExecution, type TaskRecord } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
+import { useDialog, type OverlayPhase } from './overlay.tsx'
 import { STATUS_KEY } from './status-key.ts'
 
 /** Link-subtask overlay props. */
@@ -18,10 +19,13 @@ export interface LinkSubtaskModalProps {
   /** The task the picked card becomes a subtask of. */
   parent: TaskRecord
   onClose: () => void
+  /** Which leg of the enter/exit motion pair the surface is on. */
+  phase?: OverlayPhase
 }
 
 /** Link-subtask overlay. */
-export function LinkSubtaskModal({ controller, parent, onClose }: LinkSubtaskModalProps) {
+export function LinkSubtaskModal({ controller, parent, onClose, phase = 'open' }: LinkSubtaskModalProps) {
+  const dialog = useDialog<HTMLDivElement>(onClose, phase)
   const [pending, setPending] = useState(false)
   const [error, setError] = useState<string | undefined>(undefined)
   const snapshot = controller.getSnapshot()
@@ -39,9 +43,10 @@ export function LinkSubtaskModal({ controller, parent, onClose }: LinkSubtaskMod
     const lineage = buildLineageIndex(tasks)
     return tasks.filter(task =>
       task.archivedAt === undefined
-      // A running task may already be a participant of another run group; the
-      // Host refuses the move, so it is not offered here.
-      && task.status !== 'running'
+      // An executing task may already be a participant of another run group;
+      // the Host refuses the move, so it is not offered here. A card parked in
+      // the running column by hand carries no execution and stays linkable.
+      && !hasOpenExecution(task)
       && task.parentId === undefined
       && task.id !== parent.id
       && checkParentLink(tasks, task.id, parent.id, limit, lineage).ok,
@@ -58,8 +63,8 @@ export function LinkSubtaskModal({ controller, parent, onClose }: LinkSubtaskMod
     setError(controller.getSnapshot().transportError ?? t('new.required'))
   }
   return (
-    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onClose() }}>
-      <div className={css.modal} role="dialog" aria-label={t('link.subtask.title')}>
+    <div className={css.modalBackdrop} data-state={phase} onMouseDown={dialog.onMouseDown}>
+      <div ref={dialog.attach} className={css.modal} role="dialog" aria-modal="true" aria-label={t('link.subtask.title')} tabIndex={-1}>
         <h2 className={css.modalTitle}>{t('link.subtask.title')}</h2>
         <p className={css.fieldHint}>{t('link.subtask.hint')}</p>
         {candidates.length === 0

package/src/client/board/NewTaskModal.tsx

@@ -12,6 +12,7 @@ import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import { nextRunLabel, zoneChoices } from '../schedule-zone.ts'
 import { CollapsibleSection, ModalShell, TaskContentFields, TaskTagFields, cleanTags } from './TaskForm.tsx'
+import type { OverlayPhase } from './overlay.tsx'
 import { formatHostTimestamp } from './TaskCard.tsx'
 import { readParseModelPreference, writeParseModelPreference } from './parse-model-pref.ts'
 import { inheritPresetLabel, isBuiltinPreset, presetLabel } from './preset-label.ts'
@@ -35,10 +36,12 @@ export interface NewTaskModalProps {
    * carries the parent link; unset targets inherit again at run time.
    */
   parentTask?: TaskRecord
+  /** Which leg of the enter/exit motion pair the surface is on. */
+  phase?: OverlayPhase
 }
 
 /** New-task form overlay. */
-export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspaceId, onDuplicateSuccess, parentTask }: NewTaskModalProps) {
+export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspaceId, onDuplicateSuccess, parentTask, phase }: NewTaskModalProps) {
   const isDuplicate = initialTask !== undefined
   const [title, setTitle] = useState(initialTask?.title ?? '')
   const [description, setDescription] = useState(initialTask?.description ?? '')
@@ -57,6 +60,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   // Checked by default: a new task starts its runs with dsh's built-in /goal
   // unless the user opts out here. A duplicate keeps the original card's choice.
   const [goalRun, setGoalRun] = useState(initialTask?.goalRun ?? true)
+  const [skipVerification, setSkipVerification] = useState(initialTask?.skipVerification ?? false)
   const [scheduleEnabled, setScheduleEnabled] = useState(initialTask?.schedule?.enabled ?? false)
   const [scheduleCron, setScheduleCron] = useState(initialTask?.schedule?.cron ?? '')
   // '' means "follow the Host zone" (store no zone), which is the default a
@@ -185,6 +189,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
       model: model === '' ? undefined : model,
       ...(reuseSession ? { reuseSession: true } : {}),
       ...(goalRun ? {} : { goalRun: false }),
+      ...(skipVerification ? { skipVerification: true } : {}),
       ...(tagList.length > 0 ? { tags: tagList } : {}),
       schedule: scheduleEnabled
         ? { enabled: true, cron: scheduleCron.trim(), ...(scheduleZone === '' ? {} : { timeZone: scheduleZone }) }
@@ -277,6 +282,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
       submitLabel={t('new.submit')}
       onSubmit={() => { void submit(false) }}
       onClose={onClose}
+      phase={phase}
       secondaryAction={{ label: t('new.createAndRun'), onSubmit: () => { void submit(true) } }}
     >
       {canParse && (
@@ -466,6 +472,16 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
           <span>{t('exec.goalRun')}</span>
         </label>
         <p className={css.detailText}>{t('exec.goalRunHint')}</p>
+
+        <label className={css.scheduleToggle}>
+          <input
+            type="checkbox"
+            checked={skipVerification}
+            onChange={event => { setSkipVerification(event.target.checked) }}
+          />
+          <span>{t('exec.skipVerification')}</span>
+        </label>
+        <p className={css.detailText}>{t('exec.skipVerificationHint')}</p>
       </CollapsibleSection>
 
       <CollapsibleSection

package/src/client/board/TagManagerModal.tsx

@@ -0,0 +1,235 @@
+/**
+ * Label manager: the board's label row can only shrink through here.
+ *
+ * The filter row is the union of every label in use across the ledger, so a
+ * label created once — by an experiment, a pasted task, an import — stayed on
+ * the board forever: there was no way to rename a typo, merge two labels that
+ * mean the same thing, or remove one nobody uses. This dialog is that way out.
+ * It lists the labels with their usage counts and offers the two ledger-wide
+ * transitions, both of which go through the controller so the Host ledger stays
+ * the authority (and a shared board stays consistent for everyone watching it).
+ *
+ * Renaming onto a name already in use merges the two labels; the dialog says so
+ * before the edit is submitted. Deleting is confirmed first, and the
+ * confirmation names how many tasks the label is removed from.
+ */
+import { useMemo, useState } from 'react'
+import type { BoardController } from '../../core/controller.ts'
+import { TAG_NAME_MAX_LENGTH, collectKnownTags, type TaskRecord } from '../../core/tasks.ts'
+import { t } from '../locales.ts'
+import css from '../board.module.css'
+import { ConfirmDialog } from './ConfirmDialog.tsx'
+import { IconClose } from './icons.tsx'
+import { useDialog, usePresence, type OverlayPhase } from './overlay.tsx'
+
+/** One label as the manager lists it: its definition plus how many tasks carry it. */
+export interface TagUsage {
+  name: string
+  promptPrefix?: string
+  /** Tasks carrying the label right now. */
+  count: number
+}
+
+/**
+ * Labels in use, in board order (first occurrence wins, exactly like the
+ * filter row), each with its usage count.
+ * @param tasks - the whole ledger (board and archive).
+ * @returns one row per label.
+ */
+export function tagUsage(tasks: readonly TaskRecord[]): TagUsage[] {
+  const counts = new Map<string, number>()
+  for (const task of tasks) {
+    for (const tag of task.tags ?? []) counts.set(tag.name, (counts.get(tag.name) ?? 0) + 1)
+  }
+  return collectKnownTags(tasks).map(tag => ({
+    name: tag.name,
+    ...(tag.promptPrefix === undefined ? {} : { promptPrefix: tag.promptPrefix }),
+    count: counts.get(tag.name) ?? 0,
+  }))
+}
+
+/** Label-manager overlay props. */
+export interface TagManagerModalProps {
+  controller: BoardController
+  onClose: () => void
+  /** Which leg of the enter/exit motion pair the surface is on. */
+  phase?: OverlayPhase
+}
+
+/** Label-manager overlay. */
+export function TagManagerModal({ controller, onClose, phase = 'open' }: TagManagerModalProps) {
+  /** The label whose row is being renamed, and the draft name. */
+  const [editing, setEditing] = useState<string | undefined>(undefined)
+  const [draft, setDraft] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [confirmDelete, setConfirmDelete] = useState<string | undefined>(undefined)
+  const confirmPresence = usePresence(confirmDelete !== undefined)
+  // Escape and a backdrop press peel one layer at a time: an open row editor
+  // first, then the dialog — so a half-typed rename is never lost to the same
+  // key that closes the surface under it.
+  const dismiss = (): void => {
+    if (editing !== undefined) {
+      setEditing(undefined)
+      setError(undefined)
+      return
+    }
+    onClose()
+  }
+  const dialog = useDialog<HTMLDivElement>(dismiss, phase)
+  const snapshot = controller.getSnapshot()
+  const rows = useMemo(() => tagUsage(snapshot.tasks), [snapshot.tasks])
+  const deleting = rows.find(row => row.name === confirmDelete)
+  /** The label the typed name would merge into, when it is already in use. */
+  const mergesInto = editing === undefined ? undefined : rows.find(row => row.name === draft.trim() && row.name !== editing)
+
+  const startRename = (row: TagUsage): void => {
+    setEditing(row.name)
+    setDraft(row.name)
+    setError(undefined)
+  }
+
+  const submitRename = async (from: string): Promise<void> => {
+    const to = draft.trim()
+    if (to === '' || to === from) {
+      setEditing(undefined)
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    const accepted = await controller.renameTag(from, to)
+    setBusy(false)
+    if (accepted) {
+      setEditing(undefined)
+      return
+    }
+    setError(controller.getSnapshot().transportError ?? t('tags.renameFailed'))
+  }
+
+  const remove = async (name: string): Promise<void> => {
+    setBusy(true)
+    setError(undefined)
+    const accepted = await controller.deleteTag(name)
+    setBusy(false)
+    if (!accepted) setError(controller.getSnapshot().transportError ?? t('tags.deleteFailed'))
+  }
+
+  return (
+    <>
+      <div className={css.modalBackdrop} data-state={phase} onMouseDown={dialog.onMouseDown}>
+        <div
+          ref={dialog.attach}
+          className={css.modal}
+          role="dialog"
+          aria-modal="true"
+          aria-label={t('tags.title')}
+          tabIndex={-1}
+        >
+          <header className={css.modalHeader}>
+            <h2 className={css.modalTitle}>{t('tags.title')}</h2>
+            <button
+              type="button"
+              className={css.iconButton}
+              aria-label={t('detail.close')}
+              title={t('detail.close')}
+              onClick={onClose}
+            >
+              <IconClose size={16} />
+            </button>
+          </header>
+
+          <div className={css.modalBody}>
+            <p className={css.fieldHint}>{t('tags.hint')}</p>
+            {rows.length === 0
+              ? <p className={css.detailText}>{t('tags.empty')}</p>
+              : (
+                <ul className={css.tagManageList}>
+                  {rows.map(row => (
+                    <li key={row.name} className={css.tagManageRow}>
+                      {editing === row.name
+                        ? (
+                          <>
+                            <input
+                              className={css.input + ' ' + css.tagManageInput}
+                              value={draft}
+                              maxLength={TAG_NAME_MAX_LENGTH}
+                              spellCheck={false}
+                              aria-label={t('tags.renameLabel', { name: row.name })}
+                              onChange={event => { setDraft(event.target.value); setError(undefined) }}
+                              onKeyDown={event => {
+                                if (event.key === 'Enter') void submitRename(row.name)
+                              }}
+                            />
+                            <button
+                              type="button"
+                              className={css.primaryButton}
+                              disabled={busy || draft.trim() === ''}
+                              onClick={() => { void submitRename(row.name) }}
+                            >
+                              {t('tags.save')}
+                            </button>
+                            <button
+                              type="button"
+                              className={css.ghostButton}
+                              disabled={busy}
+                              onClick={() => { setEditing(undefined); setError(undefined) }}
+                            >
+                              {t('new.cancel')}
+                            </button>
+                          </>
+                          )
+                        : (
+                          <>
+                            <span className={css.tagManageName}>{row.name}</span>
+                            <span className={css.tagManageCount}>{t('tags.usage', { count: String(row.count) })}</span>
+                            <button
+                              type="button"
+                              className={css.ghostButton}
+                              disabled={busy}
+                              onClick={() => { startRename(row) }}
+                            >
+                              {t('tags.rename')}
+                            </button>
+                            <button
+                              type="button"
+                              className={css.ghostButton}
+                              disabled={busy}
+                              onClick={() => { setConfirmDelete(row.name) }}
+                            >
+                              {t('tags.delete')}
+                            </button>
+                          </>
+                          )}
+                      {editing === row.name && mergesInto !== undefined && (
+                        <span className={css.tagManageMerge}>{t('tags.mergeHint', { name: mergesInto.name })}</span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+                )}
+            {error !== undefined && <p className={css.formError}>{error}</p>}
+          </div>
+
+          <footer className={css.modalFooter}>
+            <button type="button" className={css.ghostButton} onClick={onClose}>{t('tags.done')}</button>
+          </footer>
+        </div>
+      </div>
+
+      {confirmPresence.mounted && deleting !== undefined && (
+        <ConfirmDialog
+          title={t('tags.deleteTitle')}
+          message={t('tags.deleteConfirm', { name: deleting.name, count: String(deleting.count) })}
+          confirmLabel={t('tags.deleteOk')}
+          danger
+          phase={confirmPresence.phase}
+          onCancel={() => { setConfirmDelete(undefined) }}
+          onConfirm={() => {
+            setConfirmDelete(undefined)
+            void remove(deleting.name)
+          }}
+        />
+      )}
+    </>
+  )
+}