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

package/src/client/board/TaskDetail.tsx

@@ -4,24 +4,30 @@
  * delete (with confirmation), manual status moves, and a jump to the
  * execution's session transcript.
  */
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import type { BoardController, ControllerSnapshot } from '../../core/controller.ts'
+import type { TaskBoardExtensionActionRequest, TaskBoardExtensionDispatch } from '../../core/extension.ts'
+import { useTaskBoardSeats } from '../seats.tsx'
 import { isValidCron } from '../../core/schedule.ts'
-import { MANUAL_STATUSES, TASK_PERMISSIONS, tagTone, type ExecutionRecord, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
+import { MANUAL_STATUSES, TASK_PERMISSIONS, canMoveTask, hasOpenExecution, tagTone, type ExecutionRecord, type ScheduleMode, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
 import { canEditTaskContent } from '../../core/use-cases/task-update.ts'
 import { requiresPermissionConfirmation } from '../../core/handover.ts'
 import { DEFAULT_SUBTASK_DEPTH, directSubtasks, taskDepth } from '../../core/subtask.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
-import { nextRunLabel, zoneChoices } from '../schedule-zone.ts'
+import { budgetLabel, defaultZonedInputValue, endedLabel, nextRunLabel, parseZonedInput, runCapOption, skippedLabel, zonedInputValue, zoneChoices } from '../schedule-zone.ts'
 import css from '../board.module.css'
 import { ConfirmDialog } from './ConfirmDialog.tsx'
 import { EditTaskModal, EditTagsModal } from './EditTaskModal.tsx'
+import { IconClose, IconPlus, IconSession } from './icons.tsx'
 import { LinkSubtaskModal } from './LinkSubtaskModal.tsx'
 import { NewTaskModal } from './NewTaskModal.tsx'
+import { useDialog, usePresence, type OverlayPhase } from './overlay.tsx'
 import { inheritPresetLabel, presetLabel } from './preset-label.ts'
 import { formatHostTimestamp, formatTime } from './TaskCard.tsx'
 import { STATUS_KEY } from './status-key.ts'
+import { VerificationReport } from './VerificationReport.tsx'
+import { ClampedMarkdown } from './ClampedMarkdown.tsx'
 
 /** Execution outcome → locale key. */
 const RESULT_KEY: Record<NonNullable<ExecutionRecord['result']>, TaskBoardKey> = {
@@ -33,8 +39,12 @@ const RESULT_KEY: Record<NonNullable<ExecutionRecord['result']>, TaskBoardKey> =
 /** One execution-history row. */
 function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRecord; timeZone?: string; onOpen: (sessionId: string) => void }) {
   const result = execution.result
+  // An external record is one the Host never observed running: no session, no
+  // spinner, and a named outside agent instead of the initiating session. The
+  // data attribute keeps the distinction machine-readable too.
+  const external = execution.external === true
   return (
-    <li className={css.executionRow} data-result={result}>
+    <li className={css.executionRow} data-result={result} data-external={external ? 'true' : undefined}>
       <span className={css.executionBadge} data-result={result}>
         {result === undefined ? t('detail.result.running') : t(RESULT_KEY[result])}
       </span>
@@ -42,11 +52,17 @@ function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRec
         {t('detail.executionStarted')} {formatTime(execution.startedAt, timeZone)}
         {execution.endedAt !== undefined && ` · ${t('detail.executionEnded')} ${formatTime(execution.endedAt, timeZone)}`}
       </span>
-      {execution.initiatedBy !== undefined && (
+      {external && execution.initiatedBy !== undefined && (
+        <span className={css.executionTimes} title={execution.initiatedBy}>
+          {t('detail.execution.external', { agent: execution.initiatedBy })}
+        </span>
+      )}
+      {!external && execution.initiatedBy !== undefined && (
         <span className={css.executionTimes} title={execution.initiatedBy}>
           {t('detail.execution.initiator', { session: execution.initiatedBy })}
         </span>
       )}
+      {execution.verification !== undefined && <VerificationReport verification={execution.verification} />}
       {execution.sessionId !== undefined && (
         <button
           type="button"
@@ -54,7 +70,8 @@ function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRec
           onClick={() => { onOpen(execution.sessionId as string) }}
           title={execution.sessionId}
         >
-          {t('detail.viewSession')} ⌁
+          {t('detail.viewSession')}
+          <IconSession size={13} />
         </button>
       )}
       {execution.error !== undefined && execution.error !== '' && (
@@ -65,7 +82,7 @@ function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRec
 }
 
 /** The execution-target editor: workspace / mode / permission pickers. */
-function ExecutionSettingsSection({ controller, task, pending, executionOptions, teamRunAvailable }: {
+function ExecutionSettingsSection({ controller, task, pending, executionOptions, teamRunAvailable, goalRunEnabled }: {
   controller: BoardController
   task: TaskRecord
   pending: boolean
@@ -73,6 +90,12 @@ function ExecutionSettingsSection({ controller, task, pending, executionOptions,
   executionOptions: ControllerSnapshot['executionOptions']
   /** Whether this deployment serves the Agent Teams service. */
   teamRunAvailable: boolean
+  /**
+   * Live GLOBAL native-/goal switch. It only decides whether the card's own
+   * preference takes effect: the option stays operable while it is off, the
+   * stored value is never rewritten by it, and the explanation below says so.
+   */
+  goalRunEnabled: boolean
 }) {
   const options = executionOptions
   const workspaceId = task.workspaceId ?? ''
@@ -165,13 +188,27 @@ function ExecutionSettingsSection({ controller, task, pending, executionOptions,
       <label className={css.scheduleToggle}>
         <input
           type="checkbox"
-          checked={task.goalRun !== false}
+          checked={task.goalRun === true}
+          // Always operable (only a pending execution locks it): the global
+          // switch decides whether the preference takes effect, never whether
+          // the user may state it, and it never rewrites what is stored here.
           disabled={pending}
           onChange={event => { controller.updateTask(task.id, { goalRun: 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={task.skipVerification === true}
+          disabled={pending}
+          onChange={event => { controller.updateTask(task.id, { skipVerification: event.target.checked }) }}
+        />
+        <span>{t('exec.skipVerification')}</span>
+      </label>
+      <p className={css.detailText}>{t('exec.skipVerificationHint')}</p>
       <label className={css.scheduleToggle}>
         <input
           type="checkbox"
@@ -186,31 +223,49 @@ function ExecutionSettingsSection({ controller, task, pending, executionOptions,
   )
 }
 
-/** The scheduled-runs editor: enable toggle, cron input + presets, zone, next-run info. */
+/**
+ * The scheduled-runs editor. A one-shot has one planned instant; a recurring
+ * rule has a cron expression, an optional run cap, and a zone. The editor
+ * shows the rule's own state (next target, run counter, stop/skip record) and
+ * can cancel a future plan.
+ */
 function ScheduleSection({ controller, task, pending }: { controller: BoardController; task: TaskRecord; pending: boolean }) {
   const schedule = task.schedule
+  const hostTimeZone = controller.getSnapshot().host?.scheduler.timeZone
+  // The rule's own zone; '' means "follow the Host zone" (no stored zone).
+  const [zone, setZone] = useState<string>(schedule?.timeZone ?? '')
+  const [mode, setMode] = useState<ScheduleMode>(schedule?.mode ?? 'cron')
   const [cron, setCron] = useState(schedule?.cron ?? '0 9 * * *')
+  const [atText, setAtText] = useState<string>(() => schedule?.at === undefined
+    ? defaultZonedInputValue(Date.now(), schedule?.timeZone ?? hostTimeZone)
+    : zonedInputValue(schedule.at, schedule?.timeZone ?? hostTimeZone))
+  const [maxRunsChoice, setMaxRunsChoice] = useState<string>(() => runCapOption(schedule?.maxRuns))
+  const [maxRunsText, setMaxRunsText] = useState<string>(schedule?.maxRuns === undefined ? '' : String(schedule.maxRuns))
   const [enabled, setEnabled] = useState(schedule?.enabled ?? false)
   const [nextRunAt, setNextRunAt] = useState<number | undefined>(schedule?.nextRunAt)
   const [lastTriggeredAt, setLastTriggeredAt] = useState<number | undefined>(schedule?.lastTriggeredAt)
   const [error, setError] = useState<string | undefined>(undefined)
-  const hostTimeZone = controller.getSnapshot().host?.scheduler.timeZone
-  // The rule's own zone; '' means "follow the Host zone" (no stored zone).
-  const [zone, setZone] = useState<string>(schedule?.timeZone ?? '')
   // One clock reading per render pass, so the absolute and relative halves of
   // the label always describe the same instant.
   const now = Date.now()
 
   // Keep the editor in sync when the task record changes underneath (the
-  // schedule rolls forward as runs trigger).
+  // schedule rolls forward as runs trigger, ends at its budget, or is edited
+  // elsewhere).
   useEffect(() => {
+    setMode(schedule?.mode ?? 'cron')
     setCron(schedule?.cron ?? '0 9 * * *')
+    setZone(schedule?.timeZone ?? '')
+    setAtText(schedule?.at === undefined
+      ? defaultZonedInputValue(Date.now(), schedule?.timeZone ?? hostTimeZone)
+      : zonedInputValue(schedule.at, schedule?.timeZone ?? hostTimeZone))
+    setMaxRunsChoice(runCapOption(schedule?.maxRuns))
+    setMaxRunsText(schedule?.maxRuns === undefined ? '' : String(schedule.maxRuns))
     setEnabled(schedule?.enabled ?? false)
     setNextRunAt(schedule?.nextRunAt)
     setLastTriggeredAt(schedule?.lastTriggeredAt)
-    setZone(schedule?.timeZone ?? '')
     setError(undefined)
-  }, [task.id, schedule?.enabled, schedule?.cron, schedule?.timeZone, schedule?.nextRunAt, schedule?.lastTriggeredAt])
+  }, [task.id, hostTimeZone, schedule?.mode, schedule?.enabled, schedule?.cron, schedule?.at, schedule?.timeZone, schedule?.nextRunAt, schedule?.lastTriggeredAt, schedule?.maxRuns])
 
   /** Validate + persist the current cron text (Enter or blur). */
   const saveCron = (value: string): void => {
@@ -221,21 +276,101 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
       return
     }
     setError(undefined)
-    controller.setSchedule(task.id, { cron: trimmed })
+    controller.setSchedule(task.id, { mode: 'cron', cron: trimmed })
+  }
+
+  /** Validate + persist the one-shot's planned instant. */
+  const saveAt = (value: string): void => {
+    setAtText(value)
+    const at = parseZonedInput(value, effectiveZone)
+    if (at === undefined || at <= now) {
+      setError(t('detail.schedule.atInvalid'))
+      return
+    }
+    setError(undefined)
+    controller.setSchedule(task.id, { mode: 'once', at })
+  }
+
+  /** Switch the kind of plan, persisting a usable target for the new kind. */
+  const changeMode = (next: ScheduleMode): void => {
+    if (next === 'once') {
+      const at = parseZonedInput(atText, effectiveZone)
+      if (at === undefined || at <= now) {
+        setError(t('detail.schedule.atInvalid'))
+        return
+      }
+      setMode('once')
+      setError(undefined)
+      controller.setSchedule(task.id, { mode: 'once', at })
+      return
+    }
+    const trimmed = cron.trim()
+    if (trimmed === '' || !isValidCron(trimmed)) {
+      setError(t('detail.schedule.invalid'))
+      return
+    }
+    setMode('cron')
+    setError(undefined)
+    controller.setSchedule(task.id, { mode: 'cron', cron: trimmed })
   }
 
   /**
    * Change the rule's zone. `''` clears the stored zone, which is how a user
-   * returns a rule to following the Host zone.
+   * returns a rule to following the Host zone. A one-shot's instant is
+   * absolute, so only its rendered wall clock follows the new zone; a cron
+   * rule's wall clock itself moves with the zone.
    */
   const changeZone = (value: string): void => {
     setZone(value)
     setError(undefined)
+    if (mode === 'once' && schedule?.at !== undefined) {
+      setAtText(zonedInputValue(schedule.at, value === '' ? hostTimeZone : value))
+      controller.setSchedule(task.id, { mode: 'once', timeZone: value === '' ? null : value })
+      return
+    }
     controller.setSchedule(task.id, { timeZone: value === '' ? null : value })
   }
 
-  /** Arm/disarm the schedule (arming first persists the edited cron). */
+  /** Change the recurring rule's run cap (unlimited, a preset, or a custom value). */
+  const applyMaxRuns = (choice: string): void => {
+    setMaxRunsChoice(choice)
+    setError(undefined)
+    if (choice === 'unlimited') {
+      controller.setSchedule(task.id, { maxRuns: null })
+      return
+    }
+    if (choice === 'custom') {
+      setMaxRunsText(schedule?.maxRuns === undefined ? '' : String(schedule.maxRuns))
+      return
+    }
+    controller.setSchedule(task.id, { maxRuns: Number(choice) })
+  }
+
+  /** Persist a custom run cap; a non-positive or fractional value is refused. */
+  const saveCustomMaxRuns = (value: string): void => {
+    setMaxRunsText(value)
+    const parsed = Number(value.trim())
+    if (value.trim() === '' || !Number.isInteger(parsed) || parsed < 1) {
+      setError(t('detail.schedule.maxRunsInvalid'))
+      return
+    }
+    setError(undefined)
+    controller.setSchedule(task.id, { maxRuns: parsed })
+  }
+
+  /** Arm/disarm the schedule (arming first persists the edited plan). */
   const toggleEnabled = (next: boolean): void => {
+    if (next && mode === 'once') {
+      const at = parseZonedInput(atText, effectiveZone)
+      if (at === undefined || at <= now) {
+        setError(t('detail.schedule.atInvalid'))
+        return
+      }
+      setError(undefined)
+      const submitted = controller.setSchedule(task.id, { mode: 'once', at, enabled: true })
+      if (submitted && !controller.isHostBacked()) setEnabled(true)
+      return
+    }
     const trimmed = cron.trim()
     if (next && (trimmed === '' || !isValidCron(trimmed))) {
       setError(t('detail.schedule.invalid'))
@@ -249,11 +384,19 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
     if (submitted && !controller.isHostBacked()) setEnabled(next)
   }
 
+  /** Drop every future trigger without touching the card's execution history. */
+  const cancelSchedule = (): void => {
+    setError(undefined)
+    const submitted = controller.setSchedule(task.id, { enabled: false })
+    if (submitted && !controller.isHostBacked()) setEnabled(false)
+  }
+
   const applyPreset = (preset: string): void => {
     if (preset === '') return
     setCron(preset)
+    setMode('cron')
     setError(undefined)
-    controller.setSchedule(task.id, { cron: preset })
+    controller.setSchedule(task.id, { mode: 'cron', cron: preset })
   }
 
   // The zone the rule's wall clock is actually read in: its own when set,
@@ -268,6 +411,11 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
   // The rule's own stored zone rides the list even when this runtime's
   // inventory does not carry it, so opening the editor cannot rewrite it.
   const zones = zoneChoices(hostTimeZone, schedule?.timeZone)
+  // The ledger's own view of the budget and stop record: derived here rather
+  // than tracked in local state, so the display cannot drift from the Host.
+  const budget = schedule === undefined ? undefined : budgetLabel(schedule)
+  const ended = schedule === undefined ? undefined : endedLabel(schedule)
+  const skipped = schedule === undefined ? undefined : skippedLabel(schedule)
 
   return (
     <section className={css.detailSection}>
@@ -281,6 +429,35 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
         />
         <span>{t('detail.schedule.enable')}</span>
       </label>
+      <label className={css.scheduleZone}>
+        <span>{t('detail.schedule.mode')}</span>
+        <select
+          className={css.schedulePreset}
+          value={mode}
+          disabled={pending}
+          aria-label={t('detail.schedule.mode')}
+          onChange={event => { changeMode(event.target.value as ScheduleMode) }}
+        >
+          <option value="cron">{t('detail.schedule.mode.cron')}</option>
+          <option value="once">{t('detail.schedule.mode.once')}</option>
+        </select>
+      </label>
+      {mode === 'once' ? (
+        <label className={css.scheduleZone}>
+          <span>{t('detail.schedule.at')}</span>
+          <input
+            className={css.input}
+            type="datetime-local"
+            value={atText}
+            disabled={pending}
+            aria-label={t('detail.schedule.at')}
+            title={t('detail.schedule.atHint')}
+            onChange={event => { setAtText(event.target.value); setError(undefined) }}
+            onBlur={() => { saveAt(atText) }}
+          />
+        </label>
+      ) : (
+        <>
       <div className={css.scheduleRow}>
         <input
           className={`${css.input} ${css.scheduleInput}${error !== undefined ? ` ${css.scheduleInputInvalid}` : ''}`}
@@ -306,6 +483,39 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
           ))}
         </select>
       </div>
+          <label className={css.scheduleZone}>
+            <span>{t('detail.schedule.maxRuns')}</span>
+            <select
+              className={css.schedulePreset}
+              value={maxRunsChoice}
+              disabled={pending}
+              aria-label={t('detail.schedule.maxRuns')}
+              onChange={event => { applyMaxRuns(event.target.value) }}
+            >
+              <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>
+          {maxRunsChoice === 'custom' && (
+            <label className={css.scheduleZone}>
+              <span>{t('detail.schedule.maxRuns')}</span>
+              <input
+                className={css.input}
+                type="number"
+                min={1}
+                step={1}
+                value={maxRunsText}
+                disabled={pending}
+                aria-label={t('detail.schedule.maxRuns')}
+                onChange={event => { setMaxRunsText(event.target.value) }}
+                onBlur={() => { saveCustomMaxRuns(maxRunsText) }}
+              />
+            </label>
+          )}
+        </>
+      )}
       {/* A list is used instead of a free-text field so only zones the Host can
           also resolve are offered; the Host zone entry clears the stored value. */}
       <label className={css.scheduleZone}>
@@ -315,7 +525,7 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
           value={zone}
           disabled={pending}
           aria-label={t('detail.schedule.timeZone')}
-          title={t('detail.schedule.timeZoneHint')}
+          title={mode === 'once' ? t('detail.schedule.zoneOnceHint') : t('detail.schedule.timeZoneHint')}
           onChange={event => { changeZone(event.target.value) }}
         >
           {zones.map(choice => (
@@ -328,6 +538,14 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
         {t('detail.schedule.nextRun')} {nextLabel}
         {' · '}{t('detail.schedule.lastTriggered')} {lastLabel}
       </p>
+      {budget !== undefined && <p className={css.scheduleMeta}>{budget}</p>}
+      {ended !== undefined && <p className={css.scheduleMeta}>{ended}</p>}
+      {ended === undefined && skipped !== undefined && <p className={css.scheduleMeta}>{skipped}</p>}
+      {enabled && (
+        <button type="button" className={css.ghostButton} disabled={pending} onClick={cancelSchedule}>
+          {t('detail.schedule.cancel')}
+        </button>
+      )}
     </section>
   )
 }
@@ -347,6 +565,8 @@ function SubtaskSection({ controller, task, pending, archived, snapshot }: {
 }) {
   const [showAdd, setShowAdd] = useState(false)
   const [showLink, setShowLink] = useState(false)
+  const addPresence = usePresence(showAdd)
+  const linkPresence = usePresence(showLink)
   const tasks = snapshot.tasks
   const parent = task.parentId === undefined ? undefined : tasks.find(candidate => candidate.id === task.parentId)
   const children = directSubtasks(tasks, task.id)
@@ -388,8 +608,8 @@ function SubtaskSection({ controller, task, pending, archived, snapshot }: {
                   <button
                     type="button"
                     className={css.linkButton}
-                    disabled={pending || child.status === 'running'}
-                    title={child.status === 'running' ? t('detail.subtasks.runningLock') : undefined}
+                    disabled={pending || hasOpenExecution(child)}
+                    title={hasOpenExecution(child) ? t('detail.subtasks.runningLock') : undefined}
                     onClick={() => { void controller.setParent(child.id, null) }}
                   >
                     {t('detail.subtasks.detach')}
@@ -407,7 +627,8 @@ function SubtaskSection({ controller, task, pending, archived, snapshot }: {
           ? (
             <div className={css.subtaskAddRow}>
               <button type="button" className={css.ghostButton} disabled={!editable} onClick={() => { setShowAdd(true) }}>
-                + {t('detail.subtasks.add')}
+                <IconPlus size={14} />
+                {t('detail.subtasks.add')}
               </button>
               <button type="button" className={css.ghostButton} disabled={!editable} onClick={() => { setShowLink(true) }}>
                 {t('detail.subtasks.link')}
@@ -416,18 +637,19 @@ function SubtaskSection({ controller, task, pending, archived, snapshot }: {
             )
           : <p className={css.detailMeta}>{t('detail.subtasks.hostOnly')}</p>)
         : <p className={css.detailMeta}>{t('detail.subtasks.depthLimit', { depth: String(limit) })}</p>)}
-      {showAdd && (
-        <NewTaskModal controller={controller} parentTask={task} onClose={() => { setShowAdd(false) }} />
+      {addPresence.mounted && (
+        <NewTaskModal controller={controller} parentTask={task} phase={addPresence.phase} onClose={() => { setShowAdd(false) }} />
       )}
-      {showLink && (
-        <LinkSubtaskModal controller={controller} parent={task} onClose={() => { setShowLink(false) }} />
+      {linkPresence.mounted && (
+        <LinkSubtaskModal controller={controller} parent={task} phase={linkPresence.phase} onClose={() => { setShowLink(false) }} />
       )}
     </section>
   )
 }
 
+
 /** Task detail overlay. */
-export function TaskDetail({ controller, task }: { controller: BoardController; task: TaskRecord }) {
+export function TaskDetail({ controller, task, phase = 'open' }: { controller: BoardController; task: TaskRecord; phase?: OverlayPhase }) {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [showEdit, setShowEdit] = useState(false)
   const [showEditTags, setShowEditTags] = useState(false)
@@ -443,18 +665,36 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
     setShowDuplicate(false)
   }, [task.id])
   const current = latest
+  const seats = useTaskBoardSeats()
+  const dispatch = useCallback(
+    (request: TaskBoardExtensionActionRequest): Promise<boolean> => controller.dispatchExtension(request),
+    [controller],
+  ) as TaskBoardExtensionDispatch
   const snapshot = controller.getSnapshot()
-  const running = current.status === 'running'
+  // Busy means the runner is executing this card, which is an execution the
+  // detail view can see; the column alone never locks a card.
+  const busy = hasOpenExecution(current)
   const archived = current.archivedAt !== undefined
   const pending = snapshot.pendingTaskIds.includes(current.id)
   const transportError = snapshot.transportError
   const timeZone = snapshot.host?.scheduler.timeZone
   const permissionPending = requiresPermissionConfirmation(current, snapshot.host?.sessionDefaultPermission)
   const subtaskChildren = directSubtasks(snapshot.tasks, current.id)
+  const dialog = useDialog<HTMLDivElement>(() => { controller.closeTask() }, phase)
+  // One presence per nested overlay: the detail view sits under up to four of
+  // them, and each has to run its own exit leg instead of the surface being
+  // pulled out of the DOM the moment its flag flips.
+  const editOpen = showEdit && !archived && canEditTaskContent(current)
+  const tagsOpen = showEditTags && !archived && !busy
+  const duplicateOpen = showDuplicate && !archived
+  const confirmPresence = usePresence(confirmDelete)
+  const editPresence = usePresence(editOpen)
+  const tagsPresence = usePresence(tagsOpen)
+  const duplicatePresence = usePresence(duplicateOpen)
 
   return (
-    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) controller.closeTask() }}>
-      <div className={css.detail} role="dialog" aria-label={t('detail.title')}>
+    <div className={css.modalBackdrop} data-state={phase} onMouseDown={dialog.onMouseDown}>
+      <div ref={dialog.attach} className={css.detail} role="dialog" aria-modal="true" aria-label={t('detail.title')} tabIndex={-1}>
         <header className={css.detailHeader}>
           <h2 className={css.detailTitle}>{current.title}</h2>
           <span className={css.statusBadge} data-status={archived ? 'archived' : current.status}>
@@ -464,9 +704,10 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             type="button"
             className={css.iconButton}
             aria-label={t('detail.close')}
+            title={t('detail.close')}
             onClick={() => { controller.closeTask() }}
           >
-            ×
+            <IconClose size={16} />
           </button>
         </header>
 
@@ -481,7 +722,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
           )}
           <section className={css.detailSection}>
             <h4>{t('detail.description')}</h4>
-            <p className={css.detailText}>{current.description !== '' ? current.description : '—'}</p>
+            <ClampedMarkdown source={current.description !== '' ? current.description : '—'} />
           </section>
 
           <SubtaskSection controller={controller} task={current} pending={pending} archived={archived} snapshot={snapshot} />
@@ -555,9 +796,11 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             <p className={css.detailMeta}>{t('detail.permissionConfirmed', { time: formatHostTimestamp(current.permissionConfirmedAt, timeZone) })}</p>
           )}
 
+          {seats.detailSection({ task: current, dispatch })}
+
           <section className={css.detailSection}>
             <h4>{t('detail.prompt')}</h4>
-            <pre className={css.promptBlock}>{current.prompt !== '' ? current.prompt : current.title}</pre>
+            <ClampedMarkdown source={current.prompt !== '' ? current.prompt : current.title} />
           </section>
 
           {!archived && (
@@ -568,6 +811,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
                 pending={pending}
                 executionOptions={snapshot.executionOptions}
                 teamRunAvailable={snapshot.host?.teamRunAvailable === true}
+                goalRunEnabled={snapshot.host?.goalRunEnabled === true}
               />
               <ScheduleSection controller={controller} task={current} pending={pending} />
             </>
@@ -600,7 +844,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
                     key={status}
                     type="button"
                     className={css.ghostButton}
-                    disabled={current.status === status || running || pending}
+                    disabled={pending || !canMoveTask(current, status)}
                     onClick={() => { controller.moveTask(current.id, status) }}
                   >
                     {t(`status.move.${status}` as TaskBoardKey)}
@@ -623,7 +867,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
               {t('detail.edit')}
             </button>
           )}
-          {!archived && !canEditTaskContent(current) && current.status !== 'running' && (
+          {!archived && !canEditTaskContent(current) && !busy && (
             <button
               type="button"
               className={css.ghostButton}
@@ -648,7 +892,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             <button
               type="button"
               className={css.primaryButton}
-              disabled={running || pending}
+              disabled={busy || pending}
               title={subtaskChildren.length > 0
                 ? t('detail.subtasks.runHint', { count: String(subtaskChildren.length) })
                 : undefined}
@@ -701,12 +945,13 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
         </footer>
       </div>
 
-      {confirmDelete && (
+      {confirmPresence.mounted && (
         <ConfirmDialog
           title={t('delete.title')}
           message={t('delete.confirm', { name: current.title })}
           confirmLabel={t('delete.ok')}
           danger
+          phase={confirmPresence.phase}
           onCancel={() => { setConfirmDelete(false) }}
           onConfirm={() => {
             setConfirmDelete(false)
@@ -715,18 +960,19 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
         />
       )}
 
-      {showEdit && !archived && canEditTaskContent(current) && (
-        <EditTaskModal controller={controller} task={current} onClose={() => { setShowEdit(false) }} />
+      {editPresence.mounted && (
+        <EditTaskModal controller={controller} task={current} phase={editPresence.phase} onClose={() => { setShowEdit(false) }} />
       )}
 
-      {showEditTags && !archived && current.status !== 'running' && (
-        <EditTagsModal controller={controller} task={current} onClose={() => { setShowEditTags(false) }} />
+      {tagsPresence.mounted && (
+        <EditTagsModal controller={controller} task={current} phase={tagsPresence.phase} onClose={() => { setShowEditTags(false) }} />
       )}
 
-      {showDuplicate && !archived && (
+      {duplicatePresence.mounted && (
         <NewTaskModal
           controller={controller}
           initialTask={current}
+          phase={duplicatePresence.phase}
           onClose={() => { setShowDuplicate(false) }}
           onDuplicateSuccess={async (sourceId) => {
             await controller.archiveTask(sourceId)