@linxin666/dsh-client-ui-task-board 0.4.1 → 0.4.2

package/src/client/board/LinkSubtaskModal.tsx

@@ -0,0 +1,82 @@
+/**
+ * Link-subtask modal: attach an existing on-board root task under the open
+ * task. The candidate list mirrors the Host lineage gate (checkParentLink), so
+ * a link the Host would refuse is not offered in the first place; the Host
+ * still re-checks the action at submit time.
+ */
+import { useState } from 'react'
+import type { BoardController } from '../../core/controller.ts'
+import { DEFAULT_SUBTASK_DEPTH, checkParentLink } from '../../core/subtask.ts'
+import type { TaskRecord } from '../../core/tasks.ts'
+import { t } from '../locales.ts'
+import css from '../board.module.css'
+import { STATUS_KEY } from './status-key.ts'
+
+/** Link-subtask overlay props. */
+export interface LinkSubtaskModalProps {
+  controller: BoardController
+  /** The task the picked card becomes a subtask of. */
+  parent: TaskRecord
+  onClose: () => void
+}
+
+/** Link-subtask overlay. */
+export function LinkSubtaskModal({ controller, parent, onClose }: LinkSubtaskModalProps) {
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const snapshot = controller.getSnapshot()
+  const limit = snapshot.host?.maxSubtaskDepth ?? DEFAULT_SUBTASK_DEPTH
+  // Only root, on-board tasks can move under another parent; the lineage gate
+  // decides the rest (depth, cycle, archived parent).
+  const candidates = snapshot.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'
+    && task.parentId === undefined
+    && task.id !== parent.id
+    && checkParentLink(snapshot.tasks, task.id, parent.id, limit).ok,
+  )
+  const link = async (taskId: string): Promise<void> => {
+    setPending(true)
+    setError(undefined)
+    if (await controller.setParent(taskId, parent.id)) {
+      onClose()
+      return
+    }
+    setPending(false)
+    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')}>
+        <h2 className={css.modalTitle}>{t('link.subtask.title')}</h2>
+        <p className={css.fieldHint}>{t('link.subtask.hint')}</p>
+        {candidates.length === 0
+          ? <p className={css.detailText}>{t('link.subtask.empty')}</p>
+          : (
+            <ul className={css.pickList}>
+              {candidates.map(task => (
+                <li key={task.id} className={css.pickRow}>
+                  <span className={css.pickTitle}>{task.title}</span>
+                  <span className={css.statusBadge} data-status={task.status}>{t(STATUS_KEY[task.status])}</span>
+                  <button
+                    type="button"
+                    className={css.primaryButton}
+                    disabled={pending}
+                    onClick={() => { void link(task.id) }}
+                  >
+                    {t('link.subtask.confirm')}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        {error !== undefined && <p className={css.formError}>{error}</p>}
+        <footer className={css.modalFooter}>
+          <button type="button" className={css.ghostButton} onClick={onClose}>{t('new.cancel')}</button>
+        </footer>
+      </div>
+    </div>
+  )
+}

package/src/client/board/NewTaskModal.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 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 { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
@@ -25,18 +26,30 @@ export interface NewTaskModalProps {
   defaultWorkspaceId?: string
   /** Optional callback after successful duplication (e.g. to archive source). */
   onDuplicateSuccess?: (sourceTaskId: string) => Promise<void>
+  /**
+   * Task the new card becomes a subtask of ("add subtask" from its detail
+   * view). The execution targets start from the parent's and the create action
+   * carries the parent link; unset targets inherit again at run time.
+   */
+  parentTask?: TaskRecord
 }
 
 /** New-task form overlay. */
-export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspaceId, onDuplicateSuccess }: NewTaskModalProps) {
+export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspaceId, onDuplicateSuccess, parentTask }: NewTaskModalProps) {
   const isDuplicate = initialTask !== undefined
   const [title, setTitle] = useState(initialTask?.title ?? '')
   const [description, setDescription] = useState(initialTask?.description ?? '')
   const [prompt, setPrompt] = useState(initialTask?.prompt ?? '')
-  const [workspaceId, setWorkspaceId] = useState(initialTask?.workspaceId ?? defaultWorkspaceId ?? '')
-  const [mode, setMode] = useState(initialTask?.mode ?? '')
+  // A subtask starts from its parent's execution contract (issue: subtask
+  // inheritance); each picker below still overrides it for this card. The
+  // permission stays UNSET by default: leaving it empty is what makes the Host
+  // inherit the parent's binding together with its human confirmation, while
+  // picking a value pins this card's own binding and re-arms the gate.
+  const [workspaceId, setWorkspaceId] = useState(initialTask?.workspaceId ?? parentTask?.workspaceId ?? defaultWorkspaceId ?? '')
+  const [mode, setMode] = useState(initialTask?.mode ?? parentTask?.mode ?? '')
   const [permission, setPermission] = useState(initialTask?.permission ?? '')
-  const [model, setModel] = useState(initialTask?.model ?? '')
+  const [model, setModel] = useState(initialTask?.model ?? parentTask?.model ?? '')
+  const inheritedPermission = parentTask === undefined ? undefined : effectiveTaskPermission(parentTask)
   const [reuseSession, setReuseSession] = useState(initialTask?.reuseSession ?? false)
   const [scheduleEnabled, setScheduleEnabled] = useState(initialTask?.schedule?.enabled ?? false)
   const [scheduleCron, setScheduleCron] = useState(initialTask?.schedule?.cron ?? '')
@@ -62,6 +75,13 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
   const [parseError, setParseError] = useState<string | undefined>(undefined)
   const parseAbort = useRef<AbortController | undefined>(undefined)
   const parseModels = options.models ?? []
+  // A pinned target may have disappeared from the runtime (workspace deleted,
+  // preset removed) — especially when the form starts from a subtask's parent.
+  // Keep it selectable as a stale row, so the field shows what the create
+  // action will actually send instead of silently displaying the default.
+  const workspaceKnown = workspaceId === '' || options.workspaces.some(item => item.workspaceId === workspaceId)
+  const modeKnown = mode === '' || options.presets.some(item => item.id === mode)
+  const modelKnown = model === '' || parseModels.some(item => item.id === model)
 
   // The workspace list and preset roster arrive from the runtime after mount;
   // follow them so the pickers never freeze on an empty snapshot.
@@ -147,6 +167,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
       title,
       description,
       prompt,
+      ...(parentTask === undefined ? {} : { parentId: parentTask.id }),
       freeze,
       handover,
       workspaceId: workspaceId === '' ? undefined : workspaceId,
@@ -185,7 +206,9 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
     ? nextRunAtMs(scheduleCron, Date.now())
     : undefined
 
-  const modalTitle = isDuplicate ? t('new.duplicateTitle') : t('board.new')
+  const modalTitle = parentTask !== undefined
+    ? t('new.subtaskTitle')
+    : isDuplicate ? t('new.duplicateTitle') : t('board.new')
 
   return (
     <ModalShell
@@ -246,6 +269,12 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
         </section>
       )}
 
+      {parentTask !== undefined && (
+        <p className={css.detailText} data-dsh-part="subtask-inherit">
+          {t('detail.parent')}: {parentTask.title} · {t('new.subtaskInherit')}
+        </p>
+      )}
+
       <TaskContentFields
         title={title}
         description={description}
@@ -290,6 +319,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
             onChange={event => { setWorkspaceId(event.target.value) }}
           >
             <option value="">{t('exec.workspace.recent')}</option>
+            {!workspaceKnown && <option value={workspaceId}>{workspaceId}{t('exec.mode.removed')}</option>}
             {options.workspaces.map(workspace => (
               <option key={workspace.workspaceId} value={workspace.workspaceId}>{workspace.title}</option>
             ))}
@@ -304,6 +334,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
             onChange={event => { setMode(event.target.value) }}
           >
             <option value="">{t('exec.mode.default')}</option>
+            {!modeKnown && <option value={mode}>{mode}{t('exec.mode.removed')}</option>}
             {options.presets.map(preset => (
               <option key={preset.id} value={preset.id} disabled={preset.broken !== undefined}>
                 {preset.name ?? preset.id}
@@ -321,7 +352,9 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
             value={permission}
             onChange={event => { setPermission(event.target.value) }}
           >
-            <option value="">{t('exec.permission.default')}</option>
+            <option value="">{inheritedPermission === undefined
+              ? t('exec.permission.default')
+              : t('exec.permission.inheritParent', { permission: t(`exec.permission.${inheritedPermission}` as TaskBoardKey) })}</option>
             {TASK_PERMISSIONS.map(id => (
               <option key={id} value={id}>{t(`exec.permission.${id}` as TaskBoardKey)}</option>
             ))}
@@ -336,6 +369,7 @@ export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspac
             onChange={event => { setModel(event.target.value) }}
           >
             <option value="">{t('exec.model.default')}</option>
+            {!modelKnown && <option value={model}>{model}{t('exec.model.unknown')}</option>}
             {options.models?.map(item => (
               <option key={item.id} value={item.id}>{item.name ?? item.id}</option>
             ))}

package/src/client/board/TaskBoard.tsx

@@ -43,9 +43,31 @@ export function matchesTagFilter(task: TaskRecord, selected: readonly string[]):
  * re-renders only when its own task changes — not when a sibling card status,
  * the filter, or the selection moves.
  */
-const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpen }: { task: TaskRecord; pending: boolean; timeZone?: string; onOpen: (id: string) => void }) {
+const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpen, subtaskCount, isSubtask, subtasksDone, subtasksRunning, subtasksFailed }: {
+  task: TaskRecord
+  pending: boolean
+  timeZone?: string
+  onOpen: (id: string) => void
+  subtaskCount: number
+  isSubtask: boolean
+  subtasksDone: number
+  subtasksRunning: number
+  subtasksFailed: number
+}) {
   const onClick = useCallback(() => { onOpen(task.id) }, [task.id, onOpen])
-  return <TaskCard task={task} pending={pending} timeZone={timeZone} onClick={onClick} />
+  return (
+    <TaskCard
+      task={task}
+      pending={pending}
+      timeZone={timeZone}
+      onClick={onClick}
+      subtaskCount={subtaskCount}
+      isSubtask={isSubtask}
+      subtasksDone={subtasksDone}
+      subtasksRunning={subtasksRunning}
+      subtasksFailed={subtasksFailed}
+    />
+  )
 })
 
 /** Board component; subscribes to the controller snapshot. */
@@ -57,6 +79,11 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   )
   const [filter, setFilter] = useState('')
   const [tagFilter, setTagFilter] = useState<string[]>([])
+  // Subtask cards are real board cards, but a tree with dozens of children
+  // turns a column into a wall: the board starts from the parent cards only and
+  // the header switch reveals the flat view. A text or label filter re-enables
+  // them automatically, so searching a subtask title still finds it.
+  const [hideSubtasks, setHideSubtasks] = useState(true)
   const [showNew, setShowNew] = useState(false)
   // Project partition (#1536): '' means "all projects". A selected project
   // narrows the board and becomes the new-task form's default workspace.
@@ -70,10 +97,29 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   // Every label in use across the ledger (board and archive alike), so the
   // filter never loses an option just because its task was archived.
   const knownTags = collectKnownTags(snapshot.tasks)
-  // Archived tasks leave the columns; the archive view shows them instead.
-  const visible = snapshot.tasks.filter(task =>
-    (archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined)
-    && (projectId === '' || task.workspaceId === projectId)
+  // The family of cards this view owns: the board columns, or the archive.
+  const onBoard = snapshot.tasks.filter(task =>
+    archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined,
+  )
+  // Direct subtask count and state roll-up per task, for the card badge: a
+  // hidden tree still has to report how many children run, fail, or finish.
+  const subtaskCounts = new Map<string, number>()
+  const subtaskRollup = new Map<string, { done: number; running: number; failed: number }>()
+  for (const task of onBoard) {
+    if (task.parentId === undefined) continue
+    subtaskCounts.set(task.parentId, (subtaskCounts.get(task.parentId) ?? 0) + 1)
+    const rollup = subtaskRollup.get(task.parentId) ?? { done: 0, running: 0, failed: 0 }
+    if (task.status === 'done') rollup.done += 1
+    else if (task.status === 'running') rollup.running += 1
+    else if (task.status === 'failed') rollup.failed += 1
+    subtaskRollup.set(task.parentId, rollup)
+  }
+  const hasSubtasks = subtaskCounts.size > 0
+  const searchActive = filter.trim() !== '' || tagFilter.length > 0
+  const hidingSubtasks = hideSubtasks && !searchActive
+  const visible = onBoard.filter(task =>
+    (projectId === '' || task.workspaceId === projectId)
+    && (!hidingSubtasks || task.parentId === undefined)
     && matchesFilter(task, filter)
     && matchesTagFilter(task, tagFilter),
   )
@@ -159,6 +205,18 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           onChange={event => { setFilter(event.target.value) }}
           aria-label={t('board.search')}
         />
+        {hasSubtasks && (
+          <button
+            type="button"
+            className={hidingSubtasks ? css.primaryButton : css.ghostButton}
+            data-dsh-part="subtask-filter"
+            aria-pressed={hidingSubtasks}
+            title={t('board.subtaskFilterHint')}
+            onClick={() => { setHideSubtasks(value => !value) }}
+          >
+            {hidingSubtasks ? t('board.showSubtasks') : t('board.hideSubtasks')}
+          </button>
+        )}
         <button
           type="button"
           className={archiveView ? css.primaryButton : css.ghostButton}
@@ -257,7 +315,18 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
             </header>
             <div className={css.cards}>
               {visible.map(task => (
-                <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
+                <MemoTaskCard
+                  key={task.id}
+                  task={task}
+                  pending={snapshot.pendingTaskIds.includes(task.id)}
+                  timeZone={snapshot.host?.scheduler.timeZone}
+                  onOpen={openTask}
+                  subtaskCount={subtaskCounts.get(task.id) ?? 0}
+                  isSubtask={task.parentId !== undefined}
+                  subtasksDone={subtaskRollup.get(task.id)?.done ?? 0}
+                  subtasksRunning={subtaskRollup.get(task.id)?.running ?? 0}
+                  subtasksFailed={subtaskRollup.get(task.id)?.failed ?? 0}
+                />
               ))}
               {visible.length === 0 && (
                 <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('archive.empty')}</div>
@@ -295,7 +364,18 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                 </header>
                 <div className={css.cards}>
                   {tasks.map(task => (
-                    <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
+                    <MemoTaskCard
+                      key={task.id}
+                      task={task}
+                      pending={snapshot.pendingTaskIds.includes(task.id)}
+                      timeZone={snapshot.host?.scheduler.timeZone}
+                      onOpen={openTask}
+                      subtaskCount={subtaskCounts.get(task.id) ?? 0}
+                      isSubtask={task.parentId !== undefined}
+                      subtasksDone={subtaskRollup.get(task.id)?.done ?? 0}
+                      subtasksRunning={subtaskRollup.get(task.id)?.running ?? 0}
+                      subtasksFailed={subtaskRollup.get(task.id)?.failed ?? 0}
+                    />
                   ))}
                   {tasks.length === 0 && (
                     <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('board.empty')}</div>

package/src/client/board/TaskCard.tsx

@@ -37,7 +37,32 @@ export function formatTime(ms: number, timeZone?: string): string {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 }
 
-function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord; pending: boolean; timeZone?: string; onClick: () => void }) {
+function TaskCardInner({
+  task,
+  pending,
+  timeZone,
+  onClick,
+  subtaskCount = 0,
+  isSubtask = false,
+  subtasksDone = 0,
+  subtasksRunning = 0,
+  subtasksFailed = 0,
+}: {
+  task: TaskRecord
+  pending: boolean
+  timeZone?: string
+  onClick: () => void
+  /** Direct subtasks of this card, shown as a badge (0 hides it). */
+  subtaskCount?: number
+  /** Whether this card is itself a subtask. */
+  isSubtask?: boolean
+  /** Direct subtasks already settled as done, for the roll-up badge. */
+  subtasksDone?: number
+  /** Direct subtasks currently running, for the roll-up badge. */
+  subtasksRunning?: number
+  /** Direct subtasks that failed, for the roll-up badge. */
+  subtasksFailed?: number
+}) {
   const latest = task.executions[task.executions.length - 1]
   const runs = task.executions.length
   const archived = task.archivedAt !== undefined
@@ -77,6 +102,29 @@ function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord;
       )}
       {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>
@@ -103,7 +151,9 @@ function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord;
       </span>
       {!archived && pending && <span className={css.cardRunningLabel}>{t('board.pending')}…</span>}
       {!archived && latest !== undefined && executionLabel(latest) === 'running' && (
-        <span className={css.cardRunningLabel}>{t('detail.result.running')}…</span>
+        <span className={css.cardRunningLabel}>
+          {latest.ownResult === undefined ? t('detail.result.running') : t('detail.subtasks.waiting')}…
+        </span>
       )}
     </button>
   )

package/src/client/board/TaskDetail.tsx

@@ -10,11 +10,13 @@ import { isValidCron } from '../../core/schedule.ts'
 import { MANUAL_STATUSES, TASK_PERMISSIONS, 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'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import css from '../board.module.css'
 import { ConfirmDialog } from './ConfirmDialog.tsx'
 import { EditTaskModal, EditTagsModal } from './EditTaskModal.tsx'
+import { LinkSubtaskModal } from './LinkSubtaskModal.tsx'
 import { NewTaskModal } from './NewTaskModal.tsx'
 import { formatHostTimestamp, formatTime } from './TaskCard.tsx'
 import { STATUS_KEY } from './status-key.ts'
@@ -63,8 +65,16 @@ function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRec
 /** The execution-target editor: workspace / mode / permission pickers. */
 function ExecutionSettingsSection({ controller, task, pending }: { controller: BoardController; task: TaskRecord; pending: boolean }) {
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
+  // Whether this deployment serves the Agent Teams service: without it a team
+  // run is refused, so the opt-in is offered read-only with the reason.
+  const teamRunOffered = (): boolean => controller.getSnapshot().host?.teamRunAvailable === true
+  const [teamRunAvailable, setTeamRunAvailable] = useState(teamRunOffered())
   useEffect(
-    () => controller.subscribe(() => setOptions(controller.getSnapshot().executionOptions)),
+    () => controller.subscribe(() => {
+      const snapshot = controller.getSnapshot()
+      setOptions(snapshot.executionOptions)
+      setTeamRunAvailable(snapshot.host?.teamRunAvailable === true)
+    }),
     [controller],
   )
   const workspaceId = task.workspaceId ?? ''
@@ -154,6 +164,16 @@ function ExecutionSettingsSection({ controller, task, pending }: { controller: B
         <span>{t('exec.reuseSession')}</span>
       </label>
       <p className={css.detailText}>{t('exec.reuseSessionHint')}</p>
+      <label className={css.scheduleToggle}>
+        <input
+          type="checkbox"
+          checked={task.teamRun === true}
+          disabled={pending || !teamRunAvailable}
+          onChange={event => { controller.updateTask(task.id, { teamRun: event.target.checked }) }}
+        />
+        <span>{t('exec.teamRun')}</span>
+      </label>
+      <p className={css.detailText}>{teamRunAvailable ? t('exec.teamRunHint') : t('exec.teamRunUnavailable')}</p>
     </section>
   )
 }
@@ -265,6 +285,103 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
   )
 }
 
+/**
+ * The subtask block: the parent link, the direct subtasks with their status,
+ * and the actions that grow or prune the tree. Every gate here mirrors the
+ * Host lineage gate for affordance only; the Host re-checks the action.
+ */
+function SubtaskSection({ controller, task, pending, archived }: {
+  controller: BoardController
+  task: TaskRecord
+  pending: boolean
+  archived: boolean
+}) {
+  const [snapshot, setSnapshot] = useState(controller.getSnapshot())
+  useEffect(
+    () => controller.subscribe(() => setSnapshot(controller.getSnapshot())),
+    [controller],
+  )
+  const [showAdd, setShowAdd] = useState(false)
+  const [showLink, setShowLink] = useState(false)
+  const tasks = snapshot.tasks
+  const parent = task.parentId === undefined ? undefined : tasks.find(candidate => candidate.id === task.parentId)
+  const children = directSubtasks(tasks, task.id)
+  const limit = snapshot.host?.maxSubtaskDepth ?? DEFAULT_SUBTASK_DEPTH
+  // A new subtask is a leaf, so it fits whenever one more level is allowed.
+  const canAddChild = taskDepth(tasks, task.id) + 1 <= limit
+  const editable = !archived && !pending
+  return (
+    <section className={css.detailSection} data-dsh-part="subtasks">
+      <h4>{t('detail.subtasks')}</h4>
+      {parent !== undefined && (
+        <p className={css.detailText}>
+          {t('detail.parent')}:{' '}
+          <button
+            type="button"
+            className={css.linkButton}
+            title={t('detail.parent.open')}
+            onClick={() => { controller.openTask(parent.id) }}
+          >
+            {parent.title}
+          </button>
+        </p>
+      )}
+      {children.length === 0
+        ? <p className={css.detailText}>{t('detail.subtasks.empty')}</p>
+        : (
+          <ul className={css.subtaskList}>
+            {children.map(child => (
+              <li key={child.id} className={css.subtaskRow}>
+                <button
+                  type="button"
+                  className={css.linkButton}
+                  onClick={() => { controller.openTask(child.id) }}
+                >
+                  {child.title}
+                </button>
+                <span className={css.statusBadge} data-status={child.status}>{t(STATUS_KEY[child.status])}</span>
+                {!archived && (
+                  <button
+                    type="button"
+                    className={css.linkButton}
+                    disabled={pending || child.status === 'running'}
+                    title={child.status === 'running' ? t('detail.subtasks.runningLock') : undefined}
+                    onClick={() => { void controller.setParent(child.id, null) }}
+                  >
+                    {t('detail.subtasks.detach')}
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      {children.length > 0 && (
+        <p className={css.detailText}>{t('detail.subtasks.runHint', { count: String(children.length) })}</p>
+      )}
+      {!archived && (canAddChild
+        ? (controller.isHostBacked()
+          ? (
+            <div className={css.subtaskAddRow}>
+              <button type="button" className={css.ghostButton} disabled={!editable} onClick={() => { setShowAdd(true) }}>
+                + {t('detail.subtasks.add')}
+              </button>
+              <button type="button" className={css.ghostButton} disabled={!editable} onClick={() => { setShowLink(true) }}>
+                {t('detail.subtasks.link')}
+              </button>
+            </div>
+            )
+          : <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) }} />
+      )}
+      {showLink && (
+        <LinkSubtaskModal controller={controller} parent={task} onClose={() => { setShowLink(false) }} />
+      )}
+    </section>
+  )
+}
+
 /** Task detail overlay. */
 export function TaskDetail({ controller, task }: { controller: BoardController; task: TaskRecord }) {
   const [confirmDelete, setConfirmDelete] = useState(false)
@@ -289,6 +406,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
   const transportError = snapshot.transportError
   const timeZone = snapshot.host?.scheduler.timeZone
   const permissionPending = requiresPermissionConfirmation(current, snapshot.host?.sessionDefaultPermission)
+  const subtaskChildren = directSubtasks(snapshot.tasks, current.id)
 
   return (
     <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) controller.closeTask() }}>
@@ -322,6 +440,8 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             <p className={css.detailText}>{current.description !== '' ? current.description : '—'}</p>
           </section>
 
+          <SubtaskSection controller={controller} task={current} pending={pending} archived={archived} />
+
           {current.tags !== undefined && current.tags.length > 0 && (
             <section className={css.detailSection} data-dsh-part="tags">
               <h4>{t('new.tags')}</h4>
@@ -479,6 +599,9 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
               type="button"
               className={css.primaryButton}
               disabled={running || pending}
+              title={subtaskChildren.length > 0
+                ? t('detail.subtasks.runHint', { count: String(subtaskChildren.length) })
+                : undefined}
               onClick={() => {
                 void controller.rerunTask(current.id).then(() => {
                   if (controller.getSnapshot().transportError === undefined) controller.closeTask()