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

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()

package/src/client/board.module.css

@@ -4,135 +4,30 @@
  * board follows the active theme (light/dark and skins).
  */
 
-/* --- center-column takeover (global rules, attribute-scoped) ----------------- */
+/* --- native panel page ------------------------------------------------------- */
 
-[data-pane='conversation'],
-[class*='centerCol'] {
-  position: relative;
-}
+/* The board is an official center-column panel: the layout mounts this element
+   as the selected keyed 'main' occupant, so the shell's own column already
+   owns position, sizing and the conversation underneath. Nothing here hides or
+   re-parents another plugin's surface — the previous DOM takeover (absolute
+   overlay over a hidden conversation subtree) is gone with it.
 
-/* The board container rides inside the conversation grid item as an extra
-   trailing child; hidden unless the board is active. */
+   The container query context stays: the board's responsive rules measure the
+   PANEL rather than the viewport, so a narrow column or a resized window
+   narrows the board at the same threshold the shell uses for its columns. */
 [data-dsh-taskboard-view] {
-  position: absolute;
-  inset: 0;
-  display: none;
-  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
   container-name: task-board-view;
   container-type: inline-size;
-  /* Opaque backdrop: the conversation subtree stays mounted under the view.
-     Even if the hide rule below were defeated by a stronger host inline
-     style, this background keeps sticky code-block banners (host z-index 6)
-     from showing through the active board (issue #100). */
   background: var(--dsw-alias-bg-base);
 }
 
-/* The center column is single-occupant; the :not() guards keep the two
-   sibling panels (task board / ssh) from fighting over visibility if both
-   activation attributes ever coexist. */
-html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-dsh-taskboard-view] {
-  display: block;
-}
-
-/* While the board is active, the conversation content underneath is hidden
-   (it stays mounted and stateful). The !important is required: the dsh shell
-   (0.1.0-rc.6) wraps the conversation view in a node with an inline
-   `display: contents`, and inline styles beat a plain stylesheet rule. Without
-   it the composer (input card) stays visible at the bottom and paints over the
-   board modals' footer, hiding the run/delete buttons (issue #76).
-   The rule targets both the pane attribute and the center-column class so the
-   chat subtree (including the code-block copy banner, issue #100) stays hidden
-   whichever host container carries it. */
-html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-taskboard-view]),
-html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol'] > :not([data-dsh-taskboard-view]) {
-  display: none !important;
-}
-
-/* --- sidebar entry row ------------------------------------------------------- */
-
-/* Same geometry as the shell's own panel rows (SidebarRoot .panelRow): 2px
-   inset with a 12px radius, 8px content padding, 36px row, 14/22 type, and the
-   primary ink — so an injected row and an official row line up column for
-   column instead of each carrying its own box. */
-.entry {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 36px;
-  padding: 7px 8px;
-  margin: 0 2px;
-  background: transparent;
-  border: none;
-  border-radius: 12px;
-  color: var(--dsw-alias-label-primary);
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  line-height: 22px;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.entry:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.entry[data-active] {
-  background: var(--dsw-alias-interactive-bg-active);
-  color: var(--dsw-alias-label-primary);
-  font-weight: 600;
-}
-
-/* Icon box matches the shell's panel glyph exactly (16px), so the glyph column
-   and the label column land on the official rows' x positions. */
-.entryIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex: none;
-}
-
-.entryIcon svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Collapsed rail: icon-only, centered, matching the shell's 56px rail. The
-   shell asks its own panel rows for an 18px glyph on the rail, so the icon box
-   and the svg step up together with the 12px rail radius. */
-:global([data-dsh-frame][data-sidebar-collapsed]) .entry,
-:global([data-sidebar-collapsed]) .entry {
-  justify-content: center;
-  padding: 0;
-  width: 36px;
-  height: 36px;
-  margin: 0 auto 12px;
-  border-radius: 12px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon,
-:global([data-sidebar-collapsed]) .entryIcon,
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon svg,
-:global([data-sidebar-collapsed]) .entryIcon svg {
-  width: 18px;
-  height: 18px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryLabel,
-:global([data-sidebar-collapsed]) .entryLabel {
-  display: none;
-}
-
 /* --- board frame -------------------------------------------------------------- */
 
 .board {
@@ -924,7 +819,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
     height: 100dvh;
   }
 
-  .entry,
   .card,
   .primaryButton,
   .ghostButton,
@@ -1038,7 +932,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
  * --------------------------------------------------------------------------- */
 
 /* --- one themed focus-visible ring (approx 2px, 2px offset) --- */
-.entry:focus-visible,
 .card:focus-visible,
 .primaryButton:focus-visible,
 .ghostButton:focus-visible,
@@ -1055,7 +948,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 }
 
 /* --- unified 120ms motion across the board's interactive controls --- */
-.entry,
 .primaryButton,
 .ghostButton,
 .dangerButton,
@@ -1075,7 +967,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   transform: translateY(0);
 }
 
-.entry:active,
 .primaryButton:active:not(:disabled),
 .ghostButton:active:not(:disabled),
 .dangerButton:active:not(:disabled),
@@ -1084,11 +975,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
   transform: translateY(1px);
 }
 
-/* --- entry row (sidebar) states --- */
-.entry[data-active]:hover {
-  background: var(--dsw-specific-sidebar-nav-item-active);
-}
-
 /* --- guarded hover for the remaining icon/link buttons (defensive: never
        disabled today, but a disabled element must not react to hover) --- */
 .iconButton:hover:not(:disabled) {
@@ -1121,7 +1007,6 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 
 /* --- reduced motion: strip transitions, stop the decorative spinner --- */
 @media (prefers-reduced-motion: reduce) {
-  .entry,
   .card,
   .primaryButton,
   .ghostButton,
@@ -1320,3 +1205,99 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .aiParseRow .primaryButton {
   flex: none;
 }
+
+/* --- subtask tree (parent link, cascade runs) ---------------------------------
+ * A subtask is an ordinary card with a parent link; the badges below only mark
+ * the lineage on the board, and the detail block lists the direct children
+ * with their statuses.
+ * ----------------------------------------------------------------------------- */
+
+.cardSubtask {
+  max-width: 100%;
+  padding: 0 7px;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 10px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardSubtask[data-tone='failed'] {
+  color: var(--dsw-alias-state-error-primary);
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.cardSubtask[data-tone='running'] {
+  color: var(--dsw-alias-state-warn-primary);
+  border-color: var(--dsw-alias-state-warn-primary);
+}
+
+.cardSubtask[data-tone='done'] {
+  color: var(--dsw-alias-state-success-primary);
+  border-color: var(--dsw-alias-state-success-primary);
+}
+
+.subtaskList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.subtaskRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.subtaskRow .linkButton:first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+.subtaskAddRow {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.pickList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.pickRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+}
+
+.pickTitle {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary);
+  overflow-wrap: anywhere;
+}
+

package/src/client/host-api.ts

@@ -11,6 +11,16 @@ import {
   type TaskBoardSnapshot,
 } from '../protocol.ts'
 
+/**
+ * Client-side base for the board's routes: DOCUMENT-RELATIVE (issue #1707).
+ *
+ * The host registers `TASK_BOARD_API_PREFIX` root-absolute; the page is served
+ * with `<base href="./">`, so the browser half must drop the leading slash or
+ * a sub-path deployment escapes its entry directory. Derived from the shared
+ * constant so host and client cannot drift.
+ */
+const CLIENT_API_PREFIX = TASK_BOARD_API_PREFIX.slice(1)
+
 const IMPORT_MARKER = 'dsh.taskBoard.v2.hostImported'
 const SOURCE_KEY = 'dsh.taskBoard.v2.sourceId'
 const IMPORT_REQUEST_KEY = 'dsh.taskBoard.v2.importRequestId'
@@ -114,7 +124,7 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
   }
 
   async state(): Promise<TaskBoardSnapshot> {
-    return await this.request(`${TASK_BOARD_API_PREFIX}/state`, { cache: 'no-store' })
+    return await this.request(`${CLIENT_API_PREFIX}/state`, { cache: 'no-store' })
   }
 
   async action(action: TaskBoardAction, initiator?: string): Promise<TaskBoardSnapshot> {
@@ -123,7 +133,7 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
 
   private async post(requestId: string, action: TaskBoardAction, initiator?: string): Promise<TaskBoardSnapshot> {
     const envelope: TaskBoardActionEnvelope = { requestId, action, ...(initiator === undefined || initiator === '' ? {} : { initiator }) }
-    return await this.request(`${TASK_BOARD_API_PREFIX}/action`, {
+    return await this.request(`${CLIENT_API_PREFIX}/action`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify(envelope),
@@ -154,7 +164,7 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
   async parseDraft(request: TaskBoardParseRequest, signal?: AbortSignal): Promise<TaskBoardParseDraft> {
     let response: Response
     try {
-      response = await fetch(`${TASK_BOARD_API_PREFIX}/parse`, {
+      response = await fetch(`${CLIENT_API_PREFIX}/parse`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify(request),
@@ -193,7 +203,7 @@ export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
   }
 
   subscribe(listener: (event?: TaskBoardEventPayload) => void): () => void {
-    const events = new EventSource(`${TASK_BOARD_API_PREFIX}/events`)
+    const events = new EventSource(`${CLIENT_API_PREFIX}/events`)
     let lastStreamErrorNotify = 0
     events.onmessage = (message: MessageEvent<string>): void => {
       try {