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

package/src/client/board/EditTaskModal.tsx

@@ -10,9 +10,10 @@ import type { BoardController } from '../../core/controller.ts'
 import { collectKnownTags, type TaskRecord, type TaskTag } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import { ModalShell, TaskContentFields, TaskTagFields, cleanTags } from './TaskForm.tsx'
+import type { OverlayPhase } from './overlay.tsx'
 
 /** Edit-task form overlay. */
-export function EditTaskModal({ controller, task, onClose }: { controller: BoardController; task: TaskRecord; onClose: () => void }) {
+export function EditTaskModal({ controller, task, onClose, phase }: { controller: BoardController; task: TaskRecord; onClose: () => void; phase?: OverlayPhase }) {
   const [title, setTitle] = useState(task.title)
   const [description, setDescription] = useState(task.description)
   const [prompt, setPrompt] = useState(task.prompt)
@@ -55,6 +56,7 @@ export function EditTaskModal({ controller, task, onClose }: { controller: Board
       submitLabel={t('edit.save')}
       onSubmit={() => { void submit() }}
       onClose={onClose}
+      phase={phase}
     >
       <TaskContentFields
         title={title}
@@ -71,7 +73,7 @@ export function EditTaskModal({ controller, task, onClose }: { controller: Board
 }
 
 /** Edit-tags modal: edit labels only, shown for tasks after first execution. */
-export function EditTagsModal({ controller, task, onClose }: { controller: BoardController; task: TaskRecord; onClose: () => void }) {
+export function EditTagsModal({ controller, task, onClose, phase }: { controller: BoardController; task: TaskRecord; onClose: () => void; phase?: OverlayPhase }) {
   const [tags, setTags] = useState<TaskTag[]>(task.tags ?? [])
   const [error, setError] = useState<string | undefined>(undefined)
   const [pending, setPending] = useState(false)
@@ -99,6 +101,7 @@ export function EditTagsModal({ controller, task, onClose }: { controller: Board
       submitLabel={t('edit.save')}
       onSubmit={() => { void submit() }}
       onClose={onClose}
+      phase={phase}
     >
       <TaskTagFields tags={tags} knownTags={collectKnownTags(controller.getSnapshot().tasks)} onChange={setTags} />
     </ModalShell>

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

@@ -7,11 +7,12 @@ import type { BoardController } from '../../core/controller.ts'
 import { isValidCron, nextRunAtMs } from '../../core/schedule.ts'
 import { parseFreezeRequest } from '../../core/freeze-snapshot.ts'
 import { effectiveTaskPermission } from '../../core/subtask.ts'
-import { collectKnownTags, TASK_PERMISSIONS, type TaskPermission, type TaskRecord, type TaskTag } from '../../core/tasks.ts'
+import { collectKnownTags, TASK_PERMISSIONS, type ScheduleMode, type TaskPermission, type TaskRecord, type TaskTag } from '../../core/tasks.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
-import { nextRunLabel, zoneChoices } from '../schedule-zone.ts'
+import { defaultZonedInputValue, nextRunLabel, parseZonedInput, runCapOption, zonedInputValue, 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 ?? '')
@@ -54,11 +57,20 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   const [model, setModel] = useState(initialTask?.model ?? parentTask?.model ?? '')
   const inheritedPermission = parentTask === undefined ? undefined : effectiveTaskPermission(parentTask)
   const [reuseSession, setReuseSession] = useState(initialTask?.reuseSession ?? false)
-  // 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)
+  // Unchecked by default: a new task runs one plain turn unless the user opts
+  // into dsh's built-in /goal here. A duplicate keeps the original card's choice.
+  const [goalRun, setGoalRun] = useState(initialTask?.goalRun ?? false)
+  const [skipVerification, setSkipVerification] = useState(initialTask?.skipVerification ?? false)
   const [scheduleEnabled, setScheduleEnabled] = useState(initialTask?.schedule?.enabled ?? false)
+  const [scheduleMode, setScheduleMode] = useState<ScheduleMode>(initialTask?.schedule?.mode ?? 'cron')
   const [scheduleCron, setScheduleCron] = useState(initialTask?.schedule?.cron ?? '')
+  // A duplicate keeps the original card's plan; a fresh one-shot defaults to
+  // the next hour, so the field never opens on a past instant.
+  const [scheduleAt, setScheduleAt] = useState<string>(() => initialTask?.schedule?.mode === 'once' && initialTask.schedule.at !== undefined
+    ? zonedInputValue(initialTask.schedule.at, initialTask.schedule.timeZone)
+    : defaultZonedInputValue(Date.now(), initialTask?.schedule?.timeZone))
+  const [scheduleMaxRunsChoice, setScheduleMaxRunsChoice] = useState<string>(() => runCapOption(initialTask?.schedule?.maxRuns))
+  const [scheduleMaxRunsText, setScheduleMaxRunsText] = useState<string>(initialTask?.schedule?.maxRuns === undefined ? '' : String(initialTask.schedule.maxRuns))
   // '' means "follow the Host zone" (store no zone), which is the default a
   // user gets unless they pick one explicitly.
   const [scheduleZone, setScheduleZone] = useState(initialTask?.schedule?.timeZone ?? '')
@@ -73,6 +85,11 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   const [error, setError] = useState<string | undefined>(undefined)
   const [pending, setPending] = useState(false)
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
+  // Live GLOBAL native-/goal switch. The new-task form never rewrites a stored
+  // preference from it: the checkbox stays operable and is explained while the
+  // master switch is off, and the user's own choice is what a later re-enable
+  // restores.
+  const [goalRunEnabled, setGoalRunEnabled] = useState(controller.getSnapshot().host?.goalRunEnabled === true)
   // "Parse pasted text" (issue #1540) exists only when the deployment carries a
   // parse face; the section stays hidden otherwise.
   const [canParse] = useState(controller.getSnapshot().canParseTask === true)
@@ -95,7 +112,11 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   // The workspace list and preset roster arrive from the runtime after mount;
   // follow them so the pickers never freeze on an empty snapshot.
   useEffect(
-    () => controller.subscribe(() => setOptions(controller.getSnapshot().executionOptions)),
+    () => controller.subscribe(() => {
+      const snapshot = controller.getSnapshot()
+      setOptions(snapshot.executionOptions)
+      setGoalRunEnabled(snapshot.host?.goalRunEnabled === true)
+    }),
     [controller],
   )
 
@@ -141,10 +162,25 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
    */
   const submit = async (runAfterCreate: boolean): Promise<void> => {
     if (scheduleEnabled) {
-      const cron = scheduleCron.trim()
-      if (cron === '' || !isValidCron(cron)) {
-        setScheduleError(t('detail.schedule.invalid'))
-        return
+      if (scheduleMode === 'once') {
+        const at = parseZonedInput(scheduleAt, scheduleZone === '' ? hostTimeZone : scheduleZone)
+        if (at === undefined || at <= Date.now()) {
+          setScheduleError(t('detail.schedule.atInvalid'))
+          return
+        }
+      } else {
+        const cron = scheduleCron.trim()
+        if (cron === '' || !isValidCron(cron)) {
+          setScheduleError(t('detail.schedule.invalid'))
+          return
+        }
+        if (scheduleMaxRunsChoice === 'custom') {
+          const cap = Number(scheduleMaxRunsText.trim())
+          if (scheduleMaxRunsText.trim() === '' || !Number.isInteger(cap) || cap < 1) {
+            setScheduleError(t('detail.schedule.maxRunsInvalid'))
+            return
+          }
+        }
       }
     }
     // Optional continuation-card snapshot: parse the freeze block through the
@@ -184,10 +220,26 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
       permission: permission === '' ? undefined : permission as TaskPermission,
       model: model === '' ? undefined : model,
       ...(reuseSession ? { reuseSession: true } : {}),
-      ...(goalRun ? {} : { goalRun: false }),
+      ...(goalRun ? { goalRun: true } : {}),
+      ...(skipVerification ? { skipVerification: true } : {}),
       ...(tagList.length > 0 ? { tags: tagList } : {}),
       schedule: scheduleEnabled
-        ? { enabled: true, cron: scheduleCron.trim(), ...(scheduleZone === '' ? {} : { timeZone: scheduleZone }) }
+        ? scheduleMode === 'once'
+          ? {
+              enabled: true,
+              mode: 'once' as const,
+              at: parseZonedInput(scheduleAt, scheduleZone === '' ? hostTimeZone : scheduleZone)!,
+              ...(scheduleZone === '' ? {} : { timeZone: scheduleZone }),
+            }
+          : {
+              enabled: true,
+              mode: 'cron' as const,
+              cron: scheduleCron.trim(),
+              ...(scheduleMaxRunsChoice === 'unlimited' ? {} : {
+                maxRuns: scheduleMaxRunsChoice === 'custom' ? Number(scheduleMaxRunsText.trim()) : Number(scheduleMaxRunsChoice),
+              }),
+              ...(scheduleZone === '' ? {} : { timeZone: scheduleZone }),
+            }
         : undefined,
     })
     if (task === undefined) {
@@ -213,13 +265,18 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
     onClose()
   }
 
-  // Next-run preview for a valid armed cron (creation-time only), computed in
-  // the selected zone so it matches what the Host will arm.
+  // Next-run preview for the armed plan (creation-time only), computed in the
+  // selected zone so it matches what the Host will arm. A one-shot's next run
+  // IS its planned instant; a recurring rule resolves its next occurrence.
   const hostTimeZone = controller.getSnapshot().host?.scheduler.timeZone
   const scheduleTimeZone = scheduleZone === '' ? hostTimeZone : scheduleZone
-  const scheduleNextRun = scheduleEnabled && scheduleCron.trim() !== '' && isValidCron(scheduleCron)
-    ? nextRunAtMs(scheduleCron, Date.now(), scheduleTimeZone)
-    : undefined
+  const scheduleNextRun = !scheduleEnabled
+    ? undefined
+    : scheduleMode === 'once'
+      ? parseZonedInput(scheduleAt, scheduleTimeZone)
+      : scheduleCron.trim() !== '' && isValidCron(scheduleCron)
+        ? nextRunAtMs(scheduleCron, Date.now(), scheduleTimeZone)
+        : undefined
 
   const modalTitle = parentTask !== undefined
     ? t('new.subtaskTitle')
@@ -257,7 +314,9 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   const tagCount = cleanTags(tags).length
   const labelsSummary = tagCount === 0 ? t('new.summary.none') : t('new.summary.labelCount', { count: String(tagCount) })
   const runSummary = [
-    goalRun ? t('new.summary.multiRound') : t('new.summary.singleRound'),
+    // A card whose goal option is on but whose master switch is off will run one
+    // plain turn: the collapsed line says the truth rather than the stored value.
+    goalRun && goalRunEnabled ? t('new.summary.multiRound') : t('new.summary.singleRound'),
     ...(reuseSession ? [t('exec.reuseSession')] : []),
   ].join(' · ')
   const handoverSummary = freezeText.trim() !== '' || handoverText.trim() !== ''
@@ -265,7 +324,18 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
     : t('new.summary.none')
   const scheduleSummary = !scheduleEnabled
     ? t('new.summary.scheduleOff')
-    : scheduleCron.trim() === '' ? t('new.summary.none') : scheduleCron.trim()
+    : scheduleMode === 'once'
+      ? `${t('detail.schedule.mode.once')} · ${scheduleAt.replace('T', ' ')}`
+      : scheduleCron.trim() === ''
+        ? t('new.summary.none')
+        : [
+            scheduleCron.trim(),
+            ...(scheduleMaxRunsChoice === 'unlimited'
+              ? []
+              : [t('detail.schedule.maxRunsValue', {
+                  count: scheduleMaxRunsChoice === 'custom' ? scheduleMaxRunsText : scheduleMaxRunsChoice,
+                })]),
+          ].join(' · ')
   const parseSummary = parseText.trim() === '' ? t('new.summary.none') : t('new.summary.filled')
 
   return (
@@ -277,6 +347,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 && (
@@ -461,11 +532,25 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
           <input
             type="checkbox"
             checked={goalRun}
+            // Always operable: the global switch decides whether the choice
+            // takes effect, never whether it may be stated, and the state (and a
+            // duplicate's template) is never rewritten by it.
             onChange={event => { setGoalRun(event.target.checked) }}
           />
           <span>{t('exec.goalRun')}</span>
         </label>
         <p className={css.detailText}>{t('exec.goalRunHint')}</p>
+        {!goalRunEnabled && <p className={css.detailText}>{t('settings.goalRunGlobalDisabledTaskOption')}</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
@@ -517,6 +602,32 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
         </label>
         {scheduleEnabled && (
           <>
+            <label className={css.scheduleZone}>
+              <span>{t('detail.schedule.mode')}</span>
+              <select
+                className={css.schedulePreset}
+                value={scheduleMode}
+                aria-label={t('detail.schedule.mode')}
+                onChange={event => { setScheduleMode(event.target.value as ScheduleMode); setScheduleError(undefined) }}
+              >
+                <option value="cron">{t('detail.schedule.mode.cron')}</option>
+                <option value="once">{t('detail.schedule.mode.once')}</option>
+              </select>
+            </label>
+            {scheduleMode === 'once' ? (
+              <label className={css.scheduleZone}>
+                <span>{t('detail.schedule.at')}</span>
+                <input
+                  className={css.input}
+                  type="datetime-local"
+                  value={scheduleAt}
+                  aria-label={t('detail.schedule.at')}
+                  title={t('detail.schedule.atHint')}
+                  onChange={event => { setScheduleAt(event.target.value); setScheduleError(undefined) }}
+                />
+              </label>
+            ) : (
+              <>
             <div className={css.scheduleRow}>
               <input
                 className={`${css.input} ${css.scheduleInput}${scheduleError !== undefined ? ` ${css.scheduleInputInvalid}` : ''}`}
@@ -542,6 +653,42 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
                 ))}
               </select>
             </div>
+                <label className={css.scheduleZone}>
+                  <span>{t('detail.schedule.maxRuns')}</span>
+                  <select
+                    className={css.schedulePreset}
+                    value={scheduleMaxRunsChoice}
+                    aria-label={t('detail.schedule.maxRuns')}
+                    onChange={event => {
+                      setScheduleMaxRunsChoice(event.target.value)
+                      setScheduleError(undefined)
+                      if (event.target.value === 'custom') {
+                        setScheduleMaxRunsText(initialTask?.schedule?.maxRuns === undefined ? '' : String(initialTask.schedule.maxRuns))
+                      }
+                    }}
+                  >
+                    <option value="unlimited">{t('detail.schedule.maxRunsUnlimited')}</option>
+                    <option value="1">{t('detail.schedule.maxRunsValue', { count: '1' })}</option>
+                    <option value="2">{t('detail.schedule.maxRunsValue', { count: '2' })}</option>
+                    <option value="custom">{t('detail.schedule.maxRunsCustom')}</option>
+                  </select>
+                </label>
+                {scheduleMaxRunsChoice === 'custom' && (
+                  <label className={css.scheduleZone}>
+                    <span>{t('detail.schedule.maxRuns')}</span>
+                    <input
+                      className={css.input}
+                      type="number"
+                      min={1}
+                      step={1}
+                      value={scheduleMaxRunsText}
+                      aria-label={t('detail.schedule.maxRuns')}
+                      onChange={event => { setScheduleMaxRunsText(event.target.value); setScheduleError(undefined) }}
+                    />
+                  </label>
+                )}
+              </>
+            )}
             {scheduleError !== undefined && <p className={css.formError}>{scheduleError}</p>}
             <label className={css.scheduleZone}>
               <span>{t('detail.schedule.timeZone')}</span>
@@ -549,7 +696,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
                 className={css.schedulePreset}
                 value={scheduleZone}
                 aria-label={t('detail.schedule.timeZone')}
-                title={t('detail.schedule.timeZoneHint')}
+                title={scheduleMode === 'once' ? t('detail.schedule.zoneOnceHint') : t('detail.schedule.timeZoneHint')}
                 onChange={event => { setScheduleZone(event.target.value); setScheduleError(undefined) }}
               >
                 {zoneChoices(hostTimeZone, initialTask?.schedule?.timeZone).map(choice => (

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)
+          }}
+        />
+      )}
+    </>
+  )
+}