@linxin666/dsh-client-ui-task-board 0.1.20 → 0.2.1

package/src/client/board/NewTaskModal.tsx

@@ -1,6 +1,6 @@
 /**
  * New-task modal: title + description + the prompt that execution will send.
- * Creates through the controller (which persists immediately).
+ * Creates through the Host and closes only after the Host confirms it.
  */
 import { useEffect, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
@@ -22,6 +22,7 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
   const [scheduleCron, setScheduleCron] = useState('')
   const [scheduleError, setScheduleError] = useState<string | undefined>(undefined)
   const [error, setError] = useState<string | undefined>(undefined)
+  const [pending, setPending] = useState(false)
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
 
   // The workspace list and preset roster arrive from the runtime after mount;
@@ -31,7 +32,7 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
     [controller],
   )
 
-  const submit = (): void => {
+  const submit = async (): Promise<void> => {
     if (scheduleEnabled) {
       const cron = scheduleCron.trim()
       if (cron === '' || !isValidCron(cron)) {
@@ -39,7 +40,8 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
         return
       }
     }
-    const task = controller.createTask({
+    setPending(true)
+    const task = await controller.createTaskConfirmed({
       title,
       description,
       prompt,
@@ -49,7 +51,8 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
       schedule: scheduleEnabled ? { enabled: true, cron: scheduleCron.trim() } : undefined,
     })
     if (task === undefined) {
-      setError(t('new.required'))
+      setPending(false)
+      setError(controller.getSnapshot().transportError ?? t('new.required'))
       return
     }
     onClose()
@@ -66,7 +69,7 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
         className={css.modal}
         role="dialog"
         aria-label={t('board.new')}
-        onSubmit={event => { event.preventDefault(); submit() }}
+        onSubmit={event => { event.preventDefault(); void submit() }}
       >
         <h2 className={css.modalTitle}>{t('board.new')}</h2>
 
@@ -205,7 +208,7 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
           <button type="button" className={css.ghostButton} onClick={onClose}>
             {t('new.cancel')}
           </button>
-          <button type="submit" className={css.primaryButton}>
+          <button type="submit" className={css.primaryButton} disabled={pending}>
             {t('new.submit')}
           </button>
         </footer>

package/src/client/board/TaskBoard.tsx

@@ -26,9 +26,9 @@ function matchesFilter(task: TaskRecord, filter: string): boolean {
  * 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, onOpen }: { task: TaskRecord; onOpen: (id: string) => void }) {
+const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpen }: { task: TaskRecord; pending: boolean; timeZone?: string; onOpen: (id: string) => void }) {
   const onClick = useCallback(() => { onOpen(task.id) }, [task.id, onOpen])
-  return <TaskCard task={task} onClick={onClick} />
+  return <TaskCard task={task} pending={pending} timeZone={timeZone} onClick={onClick} />
 })
 
 /** Board component; subscribes to the controller snapshot. */
@@ -50,7 +50,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   const openTask = useCallback((id: string): void => { controller.openTask(id) }, [controller])
 
   return (
-    <div className={css.board} data-dsh-taskboard-board="">
+    <div className={css.board} data-dsh-taskboard-board="" data-dsh-plugin="task-board">
       <header className={css.boardHeader}>
         <button
           type="button"
@@ -62,6 +62,14 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           <span>{t('board.close')}</span>
         </button>
         <h2 className={css.boardTitle}>{t('board.title')}</h2>
+        {snapshot.host !== undefined && (
+          <span className={css.detailMeta}>
+            {t('board.hostMeta', {
+              revision: String(snapshot.host.revision),
+              timeZone: snapshot.host.scheduler.timeZone,
+            })}
+          </span>
+        )}
         <input
           className={css.search}
           type="search"
@@ -88,16 +96,25 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         </button>
       </header>
 
+      {snapshot.transportError !== undefined && (
+        <div className={css.formError}>
+          {t('board.hostError', { error: snapshot.transportError })}{' '}
+          <button type="button" className={css.linkButton} onClick={() => { void controller.retryHostSync() }}>
+            {t('board.retryHost')}
+          </button>
+        </div>
+      )}
+
       <div className={css.columns}>
         {archiveView ? (
-          <section className={css.column} data-status="archived">
+          <section className={css.column} data-status="archived" data-dsh-part="column">
             <header className={css.columnHeader}>
               <h3 className={css.columnTitle}>{t('board.archive')}</h3>
               <span className={css.columnCount}>{visible.length}</span>
             </header>
             <div className={css.cards}>
               {visible.map(task => (
-                <MemoTaskCard key={task.id} task={task} onOpen={openTask} />
+                <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
               ))}
               {visible.length === 0 && <div className={css.columnEmpty}>{t('archive.empty')}</div>}
             </div>
@@ -106,7 +123,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           COLUMNS.map(column => {
             const tasks = visible.filter(task => task.status === column.status)
             return (
-              <section key={column.status} className={css.column} data-status={column.status}>
+              <section key={column.status} className={css.column} data-status={column.status} data-dsh-part="column">
                 <header className={css.columnHeader}>
                   <span className={css.statusDot} data-status={column.status} aria-hidden="true" />
                   <h3 className={css.columnTitle}>{t(STATUS_KEY[column.status])}</h3>
@@ -114,7 +131,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                 </header>
                 <div className={css.cards}>
                   {tasks.map(task => (
-                    <MemoTaskCard key={task.id} task={task} onOpen={openTask} />
+                    <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
                   ))}
                   {tasks.length === 0 && <div className={css.columnEmpty}>{t('board.empty')}</div>}
                 </div>

package/src/client/board/TaskCard.tsx

@@ -14,25 +14,41 @@ import { t } from '../locales.ts'
 import css from '../board.module.css'
 
 /** Compact relative/absolute time label. */
-export function formatTime(ms: number): string {
+export function formatHostTimestamp(ms: number, timeZone?: string): string {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: 'medium',
+      timeStyle: 'medium',
+      ...(timeZone === undefined ? {} : { timeZone }),
+    }).format(new Date(ms))
+  } catch {
+    return new Date(ms).toISOString()
+  }
+}
+
+export function formatTime(ms: number, timeZone?: string): string {
   const date = new Date(ms)
   const now = Date.now()
   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`
+  if (timeZone !== undefined) return formatHostTimestamp(ms, timeZone)
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 }
 
 /** One card in a column. */
-function TaskCardInner({ task, onClick }: { task: TaskRecord; onClick: () => void }) {
+function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord; pending: boolean; timeZone?: string; onClick: () => void }) {
   const latest = task.executions[task.executions.length - 1]
   const runs = task.executions.length
+  const archived = task.archivedAt !== undefined
   return (
     <button
       type="button"
       className={css.card}
-      data-status={task.status}
+      data-status={archived ? 'archived' : task.status}
+      data-dsh-part="card"
+      data-pending={pending || undefined}
       onClick={onClick}
       title={task.description !== '' ? task.description : task.title}
     >
@@ -40,27 +56,28 @@ function TaskCardInner({ task, onClick }: { task: TaskRecord; onClick: () => voi
       {task.description !== '' && <span className={css.cardExcerpt}>{task.description}</span>}
       <span className={css.cardMeta}>
         <span className={css.cardTime}>{t('board.updated')} {formatTime(task.updatedAt)}</span>
-        {task.schedule?.enabled === true && (
+        {!archived && task.schedule?.enabled === true && (
           <span
             className={css.cardSchedule}
             title={task.schedule.nextRunAt !== undefined
-              ? `${t('card.scheduled')} · ${new Date(task.schedule.nextRunAt).toLocaleString()}`
+              ? `${t('card.scheduled')} · ${formatHostTimestamp(task.schedule.nextRunAt, timeZone)}`
               : t('card.scheduled')}
           >
             {t('card.scheduled')}
           </span>
         )}
         {latest !== undefined && (
-          <span className={css.cardRun} data-result={latest.result}>
+          <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>
         )}
-        {task.status === 'running' && <span className={css.cardSpinner} aria-hidden="true" />}
+        {!archived && (task.status === 'running' || pending) && <span className={css.cardSpinner} aria-hidden="true" />}
       </span>
-      {latest !== undefined && executionLabel(latest) === 'running' && (
+      {!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>
       )}
     </button>

package/src/client/board/TaskDetail.tsx

@@ -12,7 +12,7 @@ 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 { formatTime } from './TaskCard.tsx'
+import { formatHostTimestamp, formatTime } from './TaskCard.tsx'
 import { STATUS_KEY } from './status-key.ts'
 
 /** Execution outcome → locale key. */
@@ -23,7 +23,7 @@ const RESULT_KEY: Record<NonNullable<ExecutionRecord['result']>, TaskBoardKey> =
 }
 
 /** One execution-history row. */
-function ExecutionRow({ execution, onOpen }: { execution: ExecutionRecord; onOpen: (sessionId: string) => void }) {
+function ExecutionRow({ execution, timeZone, onOpen }: { execution: ExecutionRecord; timeZone?: string; onOpen: (sessionId: string) => void }) {
   const result = execution.result
   return (
     <li className={css.executionRow} data-result={result}>
@@ -31,8 +31,8 @@ function ExecutionRow({ execution, onOpen }: { execution: ExecutionRecord; onOpe
         {result === undefined ? t('detail.result.running') : t(RESULT_KEY[result])}
       </span>
       <span className={css.executionTimes}>
-        {t('detail.executionStarted')} {formatTime(execution.startedAt)}
-        {execution.endedAt !== undefined && ` · ${t('detail.executionEnded')} ${formatTime(execution.endedAt)}`}
+        {t('detail.executionStarted')} {formatTime(execution.startedAt, timeZone)}
+        {execution.endedAt !== undefined && ` · ${t('detail.executionEnded')} ${formatTime(execution.endedAt, timeZone)}`}
       </span>
       {execution.sessionId !== undefined && (
         <button
@@ -52,7 +52,7 @@ function ExecutionRow({ execution, onOpen }: { execution: ExecutionRecord; onOpe
 }
 
 /** The execution-target editor: workspace / mode / permission pickers. */
-function ExecutionSettingsSection({ controller, task }: { controller: BoardController; task: TaskRecord }) {
+function ExecutionSettingsSection({ controller, task, pending }: { controller: BoardController; task: TaskRecord; pending: boolean }) {
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
   useEffect(
     () => controller.subscribe(() => setOptions(controller.getSnapshot().executionOptions)),
@@ -75,6 +75,7 @@ function ExecutionSettingsSection({ controller, task }: { controller: BoardContr
         <select
           className={css.select}
           value={workspaceId}
+          disabled={pending}
           onChange={event => { controller.updateTask(task.id, { workspaceId: event.target.value }) }}
         >
           <option value="">{t('exec.workspace.recent')}</option>
@@ -89,6 +90,7 @@ function ExecutionSettingsSection({ controller, task }: { controller: BoardContr
         <select
           className={css.select}
           value={mode}
+          disabled={pending}
           onChange={event => { controller.updateTask(task.id, { mode: event.target.value }) }}
         >
           <option value="">{t('exec.mode.default')}</option>
@@ -107,6 +109,7 @@ function ExecutionSettingsSection({ controller, task }: { controller: BoardContr
         <select
           className={css.select}
           value={permission}
+          disabled={pending}
           onChange={event => { controller.updateTask(task.id, { permission: event.target.value === '' ? undefined : event.target.value as TaskPermission }) }}
         >
           <option value="">{t('exec.permission.default')}</option>
@@ -120,13 +123,14 @@ function ExecutionSettingsSection({ controller, task }: { controller: BoardContr
 }
 
 /** The scheduled-runs editor: enable toggle, cron input + presets, next-run info. */
-function ScheduleSection({ controller, task }: { controller: BoardController; task: TaskRecord }) {
+function ScheduleSection({ controller, task, pending }: { controller: BoardController; task: TaskRecord; pending: boolean }) {
   const schedule = task.schedule
   const [cron, setCron] = useState(schedule?.cron ?? '0 9 * * *')
   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 timeZone = controller.getSnapshot().host?.scheduler.timeZone
 
   // Keep the editor in sync when the task record changes underneath (the
   // schedule rolls forward as runs trigger).
@@ -158,8 +162,11 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
       return
     }
     setError(undefined)
-    if (next && trimmed !== schedule?.cron) controller.setSchedule(task.id, { cron: trimmed })
-    if (controller.setSchedule(task.id, { enabled: next })) setEnabled(next)
+    const submitted = controller.setSchedule(task.id, {
+      enabled: next,
+      ...(next && trimmed !== schedule?.cron ? { cron: trimmed } : {}),
+    })
+    if (submitted && !controller.isHostBacked()) setEnabled(next)
   }
 
   const applyPreset = (preset: string): void => {
@@ -173,8 +180,8 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
     ? t('detail.schedule.notScheduled')
     : nextRunAt <= Date.now()
       ? t('detail.schedule.dueSoon')
-      : new Date(nextRunAt).toLocaleString()
-  const lastLabel = lastTriggeredAt === undefined ? '—' : new Date(lastTriggeredAt).toLocaleString()
+      : formatHostTimestamp(nextRunAt, timeZone)
+  const lastLabel = lastTriggeredAt === undefined ? '—' : formatHostTimestamp(lastTriggeredAt, timeZone)
 
   return (
     <section className={css.detailSection}>
@@ -183,6 +190,7 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
         <input
           type="checkbox"
           checked={enabled}
+          disabled={pending}
           onChange={event => { toggleEnabled(event.target.checked) }}
         />
         <span>{t('detail.schedule.enable')}</span>
@@ -191,6 +199,7 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
         <input
           className={`${css.input} ${css.scheduleInput}${error !== undefined ? ` ${css.scheduleInputInvalid}` : ''}`}
           value={cron}
+          disabled={pending}
           placeholder="0 9 * * *"
           spellCheck={false}
           aria-label={t('detail.schedule.cron')}
@@ -201,6 +210,7 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
         <select
           className={css.schedulePreset}
           value=""
+          disabled={pending}
           aria-label={t('detail.schedule.presets')}
           onChange={event => { applyPreset(event.target.value) }}
         >
@@ -222,19 +232,26 @@ function ScheduleSection({ controller, task }: { controller: BoardController; ta
 /** Task detail overlay. */
 export function TaskDetail({ controller, task }: { controller: BoardController; task: TaskRecord }) {
   const [confirmDelete, setConfirmDelete] = useState(false)
-  const running = task.status === 'running'
 
   // Keep the overlay in sync if the task record changes underneath.
   const [latest, setLatest] = useState(task)
   useEffect(() => { setLatest(task) }, [task])
   const current = latest
+  const snapshot = controller.getSnapshot()
+  const running = current.status === 'running'
+  const archived = current.archivedAt !== undefined
+  const pending = snapshot.pendingTaskIds.includes(current.id)
+  const transportError = snapshot.transportError
+  const timeZone = snapshot.host?.scheduler.timeZone
 
   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')}>
         <header className={css.detailHeader}>
           <h2 className={css.detailTitle}>{current.title}</h2>
-          <span className={css.statusBadge} data-status={current.status}>{t(STATUS_KEY[current.status])}</span>
+          <span className={css.statusBadge} data-status={archived ? 'archived' : current.status}>
+            {archived ? t('board.archive') : t(STATUS_KEY[current.status])}
+          </span>
           <button
             type="button"
             className={css.iconButton}
@@ -246,6 +263,14 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
         </header>
 
         <div className={css.detailBody}>
+          {transportError !== undefined && (
+            <div className={css.formError}>
+              {t('board.hostError', { error: transportError })}{' '}
+              <button type="button" className={css.linkButton} onClick={() => { void controller.retryHostSync() }}>
+                {t('board.retryHost')}
+              </button>
+            </div>
+          )}
           <section className={css.detailSection}>
             <h4>{t('detail.description')}</h4>
             <p className={css.detailText}>{current.description !== '' ? current.description : '—'}</p>
@@ -256,9 +281,12 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             <pre className={css.promptBlock}>{current.prompt !== '' ? current.prompt : current.title}</pre>
           </section>
 
-          <ExecutionSettingsSection controller={controller} task={current} />
-
-          <ScheduleSection controller={controller} task={current} />
+          {!archived && (
+            <>
+              <ExecutionSettingsSection controller={controller} task={current} pending={pending} />
+              <ScheduleSection controller={controller} task={current} pending={pending} />
+            </>
+          )}
 
           <section className={css.detailSection}>
             <h4>{t('detail.execution')}</h4>
@@ -270,6 +298,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
                   <ExecutionRow
                     key={execution.id}
                     execution={execution}
+                    timeZone={timeZone}
                     onOpen={sessionId => { controller.openSession(sessionId) }}
                   />
                 ))}
@@ -277,45 +306,49 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             )}
           </section>
 
-          <section className={css.detailSection}>
-            <h4>{t('board.status')}</h4>
-            <div className={css.moveRow}>
-              {MANUAL_STATUSES.map(status => (
-                <button
-                  key={status}
-                  type="button"
-                  className={css.ghostButton}
-                  disabled={current.status === status || running}
-                  onClick={() => { controller.moveTask(current.id, status) }}
-                >
-                  {t(`status.move.${status}` as TaskBoardKey)}
-                </button>
-              ))}
-            </div>
-          </section>
+          {!archived && (
+            <section className={css.detailSection}>
+              <h4>{t('board.status')}</h4>
+              <div className={css.moveRow}>
+                {MANUAL_STATUSES.map(status => (
+                  <button
+                    key={status}
+                    type="button"
+                    className={css.ghostButton}
+                    disabled={current.status === status || running || pending}
+                    onClick={() => { controller.moveTask(current.id, status) }}
+                  >
+                    {t(`status.move.${status}` as TaskBoardKey)}
+                  </button>
+                ))}
+              </div>
+            </section>
+          )}
         </div>
 
         <footer className={css.detailFooter}>
-          <button
-            type="button"
-            className={css.primaryButton}
-            disabled={running}
-            onClick={() => {
-              // Running kicks off a real agent session; close the detail so
-              // the whole board stays visible while the task executes.
-              controller.closeTask()
-              void controller.rerunTask(current.id)
-            }}
-          >
-            {current.executions.length === 0 ? t('detail.run') : t('detail.rerun')}
-          </button>
-          {current.archivedAt !== undefined ? (
+          {!archived && pending && <span className={css.detailMeta}>{t('board.pending')}…</span>}
+          {!archived && (
+            <button
+              type="button"
+              className={css.primaryButton}
+              disabled={running || pending}
+              onClick={() => {
+                void controller.rerunTask(current.id).then(() => {
+                  if (controller.getSnapshot().transportError === undefined) controller.closeTask()
+                })
+              }}
+            >
+              {current.executions.length === 0 ? t('detail.run') : t('detail.rerun')}
+            </button>
+          )}
+          {archived ? (
             <button
               type="button"
               className={css.primaryButton}
+              disabled={pending}
               onClick={() => {
                 controller.restoreTask(current.id)
-                controller.closeTask()
               }}
             >
               {t('detail.restore')}
@@ -325,9 +358,9 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
               <button
                 type="button"
                 className={css.ghostButton}
+                disabled={pending}
                 onClick={() => {
                   controller.archiveTask(current.id)
-                  controller.closeTask()
                 }}
               >
                 {t('detail.archive')}
@@ -337,13 +370,14 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
           <button
             type="button"
             className={css.dangerButton}
+            disabled={pending}
             onClick={() => { setConfirmDelete(true) }}
           >
             {t('detail.delete')}
           </button>
           <span className={css.detailMeta}>
-            {t('board.created')} {formatTime(current.createdAt)}
-            {current.archivedAt !== undefined && ` · ${t('detail.archivedAt', { time: formatTime(current.archivedAt) })}`}
+            {t('board.created')} {formatTime(current.createdAt, timeZone)}
+            {archived && ` · ${t('detail.archivedAt', { time: formatTime(current.archivedAt!, timeZone) })}`}
           </span>
         </footer>
       </div>
@@ -358,7 +392,6 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
           onConfirm={() => {
             setConfirmDelete(false)
             controller.deleteTask(current.id)
-            controller.closeTask()
           }}
         />
       )}

package/src/client/board-mount.tsx

@@ -49,6 +49,7 @@ export function mountBoard(controller: BoardController): () => void {
     if (column === undefined) return
     container = document.createElement('div')
     container.dataset.dshTaskboardView = ''
+    container.dataset.dshPlugin = 'task-board'
     container.className = css.boardView
     column.appendChild(container)
     root = createRoot(container)

package/src/client/host-api.ts

@@ -0,0 +1,104 @@
+import type { TaskRecord } from '../core/tasks.ts'
+import {
+  TASK_BOARD_API_PREFIX,
+  type TaskBoardAction,
+  type TaskBoardActionEnvelope,
+  type TaskBoardEventPayload,
+  type TaskBoardSnapshot,
+} from '../protocol.ts'
+
+const IMPORT_MARKER = 'dsh.taskBoard.v2.hostImported'
+const SOURCE_KEY = 'dsh.taskBoard.v2.sourceId'
+const IMPORT_REQUEST_KEY = 'dsh.taskBoard.v2.importRequestId'
+const REQUEST_TIMEOUT_MS = 15_000
+
+function uuid(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `browser-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+}
+
+async function readJson<T>(response: Response): Promise<T> {
+  const body = await response.json() as T & { error?: string }
+  if (!response.ok) throw new Error(body.error ?? `task-board request failed: ${response.status}`)
+  return body
+}
+
+export interface TaskBoardHostTransport {
+  bootstrap(legacy: readonly TaskRecord[]): Promise<TaskBoardSnapshot>
+  state(): Promise<TaskBoardSnapshot>
+  action(action: TaskBoardAction): Promise<TaskBoardSnapshot>
+  subscribe(listener: (event?: TaskBoardEventPayload) => void): () => void
+}
+
+export class HttpTaskBoardHostTransport implements TaskBoardHostTransport {
+  constructor(private readonly storage: Pick<Storage, 'getItem' | 'setItem'> | undefined = globalThis.localStorage) {}
+
+  async bootstrap(legacy: readonly TaskRecord[]): Promise<TaskBoardSnapshot> {
+    const initial = await this.state()
+    const ledgerId = initial.scheduler.ledgerId
+    if (legacy.length > 0 && ledgerId !== undefined && this.storage?.getItem(IMPORT_MARKER) !== ledgerId) {
+      let sourceId = this.storage?.getItem(SOURCE_KEY)
+      if (sourceId === null || sourceId === undefined || sourceId === '') {
+        sourceId = uuid()
+        this.storage?.setItem(SOURCE_KEY, sourceId)
+      }
+      let requestId = this.storage?.getItem(IMPORT_REQUEST_KEY)
+      if (requestId === null || requestId === undefined || requestId === '') {
+        requestId = uuid()
+        this.storage?.setItem(IMPORT_REQUEST_KEY, requestId)
+      }
+      const snapshot = await this.post(requestId, { kind: 'import', sourceId, tasks: [...legacy] })
+      this.storage?.setItem(IMPORT_MARKER, snapshot.scheduler.ledgerId ?? ledgerId)
+      return snapshot
+    }
+    return initial
+  }
+
+  async state(): Promise<TaskBoardSnapshot> {
+    return await this.request(`${TASK_BOARD_API_PREFIX}/state`, { cache: 'no-store' })
+  }
+
+  async action(action: TaskBoardAction): Promise<TaskBoardSnapshot> {
+    return await this.post(uuid(), action)
+  }
+
+  private async post(requestId: string, action: TaskBoardAction): Promise<TaskBoardSnapshot> {
+    const envelope: TaskBoardActionEnvelope = { requestId, action }
+    return await this.request(`${TASK_BOARD_API_PREFIX}/action`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(envelope),
+    })
+  }
+
+  private async request(url: string, init: RequestInit): Promise<TaskBoardSnapshot> {
+    const controller = new AbortController()
+    const timeout = globalThis.setTimeout(() => { controller.abort() }, REQUEST_TIMEOUT_MS)
+    try {
+      return await readJson<TaskBoardSnapshot>(await fetch(url, { ...init, signal: controller.signal }))
+    } catch (error) {
+      if (controller.signal.aborted) throw new Error(`task-board Host request timed out after ${REQUEST_TIMEOUT_MS / 1_000}s`)
+      throw error
+    } finally {
+      globalThis.clearTimeout(timeout)
+    }
+  }
+
+  subscribe(listener: (event?: TaskBoardEventPayload) => void): () => void {
+    const events = new EventSource(`${TASK_BOARD_API_PREFIX}/events`)
+    events.onmessage = (message: MessageEvent<string>): void => {
+      try {
+        const parsed = JSON.parse(message.data) as TaskBoardEventPayload
+        if (parsed === null || typeof parsed !== 'object' || typeof parsed.revision !== 'number') throw new Error('invalid event frame')
+        listener(parsed)
+      } catch {
+        listener()
+      }
+    }
+    const onVisible = (): void => { if (document.visibilityState === 'visible') listener() }
+    document.addEventListener('visibilitychange', onVisible)
+    return () => {
+      document.removeEventListener('visibilitychange', onVisible)
+      events.close()
+    }
+  }
+}