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

package/src/client/board/TaskCard.tsx

@@ -1,17 +1,31 @@
 /**
- * Task card: the board's column item. Clicking opens the task detail — it
- * never executes anything directly (detail holds the Run button).
+ * Task card: the board's column item. The stretched open control opens the
+ * task detail — it never executes anything directly (detail holds the Run
+ * button).
+ *
+ * The card is an `article` with one stretched `button` rather than a button
+ * itself: interactive content inside a button is invalid HTML, and the card
+ * carries its own quick actions (open the execution session, a provider's
+ * link such as the tracker issue). The article owns the pointer click and
+ * ignores clicks that land on a quick action; the stretched open button is the
+ * keyboard and accessibility target, and its click bubbles into the same
+ * handler, so the detail opens exactly once either way.
  *
  * Memoized: the card re-renders only when its own task record changes, so a
  * status/filter update on one card (or scrolling) never re-renders every
- * card on the board. The per-card onClick is built with a stable task reference
- * by the board, so the memo boundary is effective.
+ * card on the board. The per-card callbacks are built with a stable task
+ * reference by the board, so the memo boundary is effective.
  */
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import type { TaskRecord } from '../../core/tasks.ts'
-import { executionLabel, tagTone } from '../../core/tasks.ts'
+import { executionLabel, hasOpenExecution, tagTone } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
+import { useTaskBoardSeats } from '../seats.tsx'
+import { cardOutcome, cardTimeline, RESULT_KEY, splitTitleKind } from './card-view.ts'
+import { IconClock, IconSession } from './icons.tsx'
+import { verificationRunningKey } from './status-key.ts'
 import css from '../board.module.css'
+import { markdownExcerpt, markdownToPlainText } from './task-markdown.tsx'
 
 /**
  * Built formatters, keyed by time zone ('' = the browser's own). Constructing
@@ -56,11 +70,43 @@ export function formatTime(ms: number, timeZone?: string): string {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 }
 
+/** Cached YYYY-MM-DD formatters, keyed by time zone ('' = the browser's own). */
+const CARD_DATE_FORMATS = new Map<string, Intl.DateTimeFormat>()
+
+/**
+ * Card time label: relative within a day, otherwise the calendar date read in
+ * the Host time zone (the same zone the tooltip and the detail view use), so a
+ * card never shows a browser-local date beside a Host-zone tooltip.
+ * @param ms - the instant.
+ * @param timeZone - Host IANA zone; absent uses the browser zone.
+ * @param now - the current instant.
+ */
+export function formatCardTime(ms: number, timeZone?: string, now: number = Date.now()): string {
+  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`
+  const key = timeZone ?? ''
+  try {
+    let format = CARD_DATE_FORMATS.get(key)
+    if (format === undefined) {
+      format = new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit', ...(timeZone === undefined ? {} : { timeZone }) })
+      CARD_DATE_FORMATS.set(key, format)
+    }
+    return format.format(new Date(ms))
+  } catch {
+    // An unsupported zone id: never cached; fall back to the UTC calendar date.
+    return new Date(ms).toISOString().slice(0, 10)
+  }
+}
+
 function TaskCardInner({
   task,
   pending,
   timeZone,
   onClick,
+  onOpenSession,
+  compact = false,
   subtaskCount = 0,
   isSubtask = false,
   subtasksDone = 0,
@@ -71,6 +117,10 @@ function TaskCardInner({
   pending: boolean
   timeZone?: string
   onClick: () => void
+  /** Open an execution session; absent renders the session mark inert. */
+  onOpenSession?: (sessionId: string) => void
+  /** Single-line density used by long settled columns. */
+  compact?: boolean
   /** Direct subtasks of this card, shown as a badge (0 hides it). */
   subtaskCount?: number
   /** Whether this card is itself a subtask. */
@@ -82,16 +132,70 @@ function TaskCardInner({
   /** Direct subtasks that failed, for the roll-up badge. */
   subtasksFailed?: number
 }) {
-  const latest = task.executions[task.executions.length - 1]
+  const { cardDecoration } = useTaskBoardSeats()
   const runs = task.executions.length
+  const summary = useMemo(() => markdownToPlainText(task.title) || task.title, [task.title])
+  const title = useMemo(() => splitTitleKind(summary), [summary])
+  const excerpt = useMemo(() => (compact ? '' : markdownExcerpt(task.description)), [task.description, compact])
   const archived = task.archivedAt !== undefined
-  const isDraggable = !archived && task.status !== 'running' && !pending
+  // The lock is an open execution, not the column: a card parked in 'running'
+  // by hand stays draggable, and an executing card never is.
+  const busy = hasOpenExecution(task)
+  const isDraggable = !archived && !busy && !pending
+  const outcome = cardOutcome(task, archived)
+  const latest = outcome.latest
+  // Forced acceptance owns the running label.
+  const runningKey = verificationRunningKey(latest?.verification)
+  const timeline = cardTimeline(task, archived)
+  const resultText = latest?.result !== undefined ? t(RESULT_KEY[latest.result]) : ''
+  const sessionId = latest?.sessionId
+  const tagNames = (task.tags ?? []).map(tag => tag.name)
 
-  return (
+  const ariaLabel = [
+    title.kind === undefined ? summary : `${title.kind}: ${title.text}`,
+    !archived && pending ? t('board.pending') : '',
+    !archived && busy ? t(runningKey ?? 'detail.result.running') : '',
+    !archived && !busy && resultText !== '' ? resultText : '',
+    outcome.declared ? t('card.declared') : '',
+    subtasksFailed > 0 ? t('card.subtasksFailed', { count: String(subtasksFailed) }) : '',
+    tagNames.length > 0 ? t('card.tagsLabel', { tags: tagNames.join(', ') }) : '',
+  ].filter(Boolean).join(' · ')
+  // The tooltip names what the clamped surface cannot show — the full title and
+  // the absolute instant — not the whole excerpt again.
+  const tooltip = [
+    summary,
+    t(timeline.key, { time: formatHostTimestamp(timeline.at, timeZone) }),
+    outcome.declared ? t('card.declaredHint') : '',
+  ].filter(Boolean).join('\n')
+
+  const sessionMark = sessionId !== undefined && (onOpenSession !== undefined ? (
     <button
       type="button"
+      className={`${css.cardSession} ${css.cardAction}`}
+      data-dsh-part="card-session"
+      title={t('card.openSession')}
+      aria-label={t('card.openSession')}
+      onClick={() => { onOpenSession(sessionId) }}
+    >
+      <IconSession size={14} />
+    </button>
+  ) : (
+    <span className={css.cardSession} title={sessionId}>
+      <IconSession size={12} />
+    </span>
+  ))
+  const decoration = <span className={css.cardDecoration}>{cardDecoration({ task })}</span>
+  const timeLabel = <span className={css.cardTime} data-dsh-part="card-time">{t(timeline.key, { time: formatCardTime(timeline.at, timeZone) })}</span>
+  const kindBadge = title.kind !== undefined && (
+    <span className={css.cardKind} data-dsh-part="card-kind">{title.kind}</span>
+  )
+
+  return (
+    <article
       className={css.card}
       data-status={archived ? 'archived' : task.status}
+      data-tone={outcome.tone}
+      data-compact={compact || undefined}
       data-dsh-part="card"
       data-pending={pending || undefined}
       draggable={isDraggable}
@@ -99,82 +203,111 @@ function TaskCardInner({
         event.dataTransfer.setData('text/plain', task.id)
         event.dataTransfer.effectAllowed = 'move'
       } : undefined}
-      onClick={onClick}
-      title={task.description !== '' ? task.description : task.title}
+      title={tooltip}
+      onClick={(event) => {
+        // A quick action (session, provider link) handles its own click.
+        const target = event.target as Element
+        if (target.closest('a, button:not([data-dsh-part="card-open"])') !== null) return
+        onClick()
+      }}
     >
-      <span className={css.cardTitle}>{task.title}</span>
-      {task.tags !== undefined && task.tags.length > 0 && (
-        <span className={css.cardTags}>
-          {task.tags.map(tag => (
-            <span
-              key={tag.name}
-              className={css.cardTag}
-              data-tag-tone={tagTone(tag.name)}
-              data-dsh-part="tag-badge"
-              data-tag-hint={tag.promptPrefix === undefined ? undefined : tag.promptPrefix}
-              title={tag.promptPrefix === undefined ? tag.name : tag.promptPrefix}
-            >
-              {tag.name}
-            </span>
-          ))}
-        </span>
-      )}
-      {task.description !== '' && <span className={css.cardExcerpt}>{task.description}</span>}
-      <span className={css.cardMeta}>
-        {isSubtask && (
-          <span className={css.cardSubtask} data-dsh-part="subtask-badge">{t('card.subtask')}</span>
-        )}
-        {subtaskCount > 0 && (
-          // A board that hides subtask cards still has to report them: the badge
-          // rolls up the direct children and takes the tone of the worst state,
-          // so a hidden failing tree cannot look green.
-          <span
-            className={css.cardSubtask}
-            data-dsh-part="subtask-count"
-            data-tone={subtasksFailed > 0 ? 'failed' : subtasksRunning > 0 ? 'running' : subtasksDone === subtaskCount ? 'done' : undefined}
-            title={t('card.subtasksBreakdown', {
-              total: String(subtaskCount),
-              done: String(subtasksDone),
-              running: String(subtasksRunning),
-              failed: String(subtasksFailed),
-            })}
-          >
-            {t('card.subtasks', { count: String(subtaskCount) })}
-            {subtasksFailed > 0 ? ' · ' + t('card.subtasksFailed', { count: String(subtasksFailed) }) : ''}
-            {subtasksFailed === 0 && subtasksRunning > 0 ? ' · ' + t('card.subtasksRunning', { count: String(subtasksRunning) }) : ''}
-          </span>
-        )}
-        <span className={css.cardTime}>{t('board.updated')} {formatTime(task.updatedAt)}</span>
-        {task.freeze !== undefined && (
-          <span className={css.cardSchedule} title={task.freeze.goal}>{t('card.frozen')}</span>
-        )}
-        {!archived && task.schedule?.enabled === true && (
-          <span
-            className={css.cardSchedule}
-            title={task.schedule.nextRunAt !== undefined
-              ? `${t('card.scheduled')} · ${formatHostTimestamp(task.schedule.nextRunAt, timeZone)}`
-              : t('card.scheduled')}
-          >
-            {t('card.scheduled')}
-          </span>
-        )}
-        {latest !== undefined && (
-          <span className={css.cardRun} data-result={archived ? undefined : latest.result}>
-            {runs} {t('board.runs')}
-          </span>
-        )}
-        {latest?.sessionId !== undefined && (
-          <span className={css.cardSession} title={latest.sessionId}>⌁</span>
-        )}
-        {!archived && (task.status === 'running' || pending) && <span className={css.cardSpinner} aria-hidden="true" />}
+      <button type="button" className={css.cardOpen} data-dsh-part="card-open" aria-label={ariaLabel} />
+      <span className={css.cardTitleRow}>
+        {kindBadge}
+        <span className={css.cardTitle} data-dsh-part="card-title">{title.text}</span>
       </span>
-      {!archived && pending && <span className={css.cardRunningLabel}>{t('board.pending')}…</span>}
-      {!archived && latest !== undefined && executionLabel(latest) === 'running' && (
-        <span className={css.cardRunningLabel}>
-          {latest.ownResult === undefined ? t('detail.result.running') : t('detail.subtasks.waiting')}…
+      {compact ? (
+        <span className={css.cardMeta}>
+          {decoration}
+          {timeLabel}
+          {!archived && (busy || pending) && <span className={css.cardSpinner} aria-hidden="true" />}
         </span>
+      ) : (
+        <>
+          {task.tags !== undefined && task.tags.length > 0 && (
+            <span className={css.cardTags}>
+              {task.tags.map(tag => (
+                <span
+                  key={tag.name}
+                  className={css.cardTag}
+                  data-tag-tone={tagTone(tag.name)}
+                  data-dsh-part="tag-badge"
+                  data-tag-hint={tag.promptPrefix === undefined ? undefined : tag.promptPrefix}
+                  title={tag.promptPrefix === undefined ? tag.name : tag.promptPrefix}
+                >
+                  {tag.name}
+                </span>
+              ))}
+            </span>
+          )}
+          {excerpt !== '' && <span className={css.cardExcerpt} data-dsh-part="card-excerpt">{excerpt}</span>}
+          <span className={css.cardMeta}>
+            {decoration}
+            {isSubtask && (
+              <span className={css.cardSubtask} data-dsh-part="subtask-badge">{t('card.subtask')}</span>
+            )}
+            {subtaskCount > 0 && (
+              // A board that hides subtask cards still has to report them: the badge
+              // rolls up the direct children and takes the tone of the worst state,
+              // so a hidden failing tree cannot look green.
+              <span
+                className={css.cardSubtask}
+                data-dsh-part="subtask-count"
+                data-tone={subtasksFailed > 0 ? 'failed' : subtasksRunning > 0 ? 'running' : subtasksDone === subtaskCount ? 'done' : undefined}
+                title={t('card.subtasksBreakdown', {
+                  total: String(subtaskCount),
+                  done: String(subtasksDone),
+                  running: String(subtasksRunning),
+                  failed: String(subtasksFailed),
+                })}
+              >
+                {t('card.subtasks', { count: String(subtaskCount) })}
+                {subtasksFailed > 0 ? ' · ' + t('card.subtasksFailed', { count: String(subtasksFailed) }) : ''}
+                {subtasksFailed === 0 && subtasksRunning > 0 ? ' · ' + t('card.subtasksRunning', { count: String(subtasksRunning) }) : ''}
+              </span>
+            )}
+            {timeLabel}
+            {task.freeze !== undefined && (
+              <span className={css.cardSchedule} title={task.freeze.goal}>{t('card.frozen')}</span>
+            )}
+            {!archived && task.schedule?.enabled === true && (
+              <span
+                className={css.cardSchedule}
+                title={task.schedule.nextRunAt !== undefined
+                  ? `${t('card.scheduled')} · ${formatHostTimestamp(task.schedule.nextRunAt, timeZone)}`
+                  : t('card.scheduled')}
+              >
+                <IconClock size={12} />
+                {t('card.scheduled')}
+              </span>
+            )}
+            {latest !== undefined && (
+              <span
+                className={css.cardRun}
+                data-dsh-part="card-run"
+                data-result={archived || latest.result === undefined ? undefined : latest.result}
+                data-declared={outcome.declared || undefined}
+                title={outcome.declared ? t('card.declaredHint') : undefined}
+              >
+                {!busy && resultText !== '' ? `${resultText} · ` : ''}
+                {runs} {t('board.runs')}
+                {outcome.declared ? ` · ${t('card.declared')}` : ''}
+              </span>
+            )}
+            {sessionMark}
+            {!archived && (busy || pending) && <span className={css.cardSpinner} aria-hidden="true" />}
+          </span>
+          {!archived && pending && <span className={css.cardRunningLabel}>{t('board.pending')}…</span>}
+          {!archived && latest !== undefined && executionLabel(latest) === 'running' && (
+            <span className={css.cardRunningLabel}>
+              {runningKey !== undefined
+                ? t(runningKey)
+                : latest.ownResult === undefined ? t('detail.result.running') : t('detail.subtasks.waiting')}…
+            </span>
+          )}
+        </>
       )}
-    </button>
+    </article>
   )
 }
 

package/src/client/board/TaskDetail.tsx

@@ -4,10 +4,12 @@
  * 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 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'
@@ -17,11 +19,15 @@ import { nextRunLabel, 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> = {
@@ -47,6 +53,7 @@ function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRec
           {t('detail.execution.initiator', { session: execution.initiatedBy })}
         </span>
       )}
+      {execution.verification !== undefined && <VerificationReport verification={execution.verification} />}
       {execution.sessionId !== undefined && (
         <button
           type="button"
@@ -54,7 +61,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 !== '' && (
@@ -172,6 +180,16 @@ function ExecutionSettingsSection({ controller, task, pending, executionOptions,
         <span>{t('exec.goalRun')}</span>
       </label>
       <p className={css.detailText}>{t('exec.goalRunHint')}</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"
@@ -347,6 +365,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 +408,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 +427,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 +437,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 +465,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 +504,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 +522,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 +596,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 && (
@@ -600,7 +643,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 +666,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 +691,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 +744,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 +759,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)

package/src/client/board/TaskForm.tsx

@@ -8,6 +8,8 @@ import { useState, type ReactNode } from 'react'
 import { TAG_NAME_MAX_LENGTH, TAG_PROMPT_MAX_LENGTH, TASK_TAG_LIMIT, normalizeTags, type TaskTag } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
+import { IconClose, IconPlus } from './icons.tsx'
+import { useDialog, type OverlayPhase } from './overlay.tsx'
 
 /** DOM id shared by the tag-name inputs and their datalist (one board at a time). */
 const TAG_NAME_LIST_ID = 'dsh-task-board-tag-names'
@@ -22,6 +24,7 @@ export function ModalShell({
   onSubmit,
   onClose,
   secondaryAction,
+  phase = 'open',
   children,
 }: {
   ariaLabel: string
@@ -33,14 +36,20 @@ export function ModalShell({
   onClose: () => void
   /** Optional second action beside the primary submit (e.g. create and run). */
   secondaryAction?: { label: string; onSubmit: () => void }
+  /** Which leg of the enter/exit motion pair the surface is on. */
+  phase?: OverlayPhase
   children: ReactNode
 }) {
+  const dialog = useDialog<HTMLFormElement>(onClose, phase)
   return (
-    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onClose() }}>
+    <div className={css.modalBackdrop} data-state={phase} onMouseDown={dialog.onMouseDown}>
       <form
+        ref={dialog.attach}
         className={css.modal}
         role="dialog"
+        aria-modal="true"
         aria-label={ariaLabel}
+        tabIndex={-1}
         onSubmit={event => { event.preventDefault(); onSubmit() }}
       >
         <h2 className={css.modalTitle}>{title}</h2>
@@ -226,7 +235,7 @@ export function TaskTagFields({
             aria-label={t('new.tagRemove', { name: tag.name })}
             onClick={() => { onChange(tags.filter((_, position) => position !== index)) }}
           >
-            ×
+            <IconClose size={14} />
           </button>
         </div>
       ))}
@@ -239,7 +248,8 @@ export function TaskTagFields({
         disabled={tags.length >= TASK_TAG_LIMIT}
         onClick={() => { onChange([...tags, { name: '' }]) }}
       >
-        + {t('new.tagAdd')}
+        <IconPlus size={14} />
+        {t('new.tagAdd')}
       </button>
     </div>
   )