taskode 0.4.0

package/public/app.js

@@ -0,0 +1,1110 @@
+const boardEl = document.getElementById('board')
+const inspectorEl = document.getElementById('inspector')
+const runsEl = document.getElementById('runs')
+const logsEl = document.getElementById('logs')
+const stateEl = document.getElementById('state')
+const authTokenInput = document.getElementById('auth-token')
+const authStatusEl = document.getElementById('auth-status')
+const refreshButton = document.getElementById('refresh-now')
+const saveTokenButton = document.getElementById('save-token')
+const runsSummaryEl = document.getElementById('runs-summary')
+const stateSummaryEl = document.getElementById('state-summary')
+const logsSummaryEl = document.getElementById('logs-summary')
+
+const metricEls = {
+  total: document.getElementById('metric-total'),
+  active: document.getElementById('metric-active'),
+  review: document.getElementById('metric-review'),
+  done: document.getElementById('metric-done')
+}
+
+const TOKEN_KEY = 'taskode.token'
+const POLL_INTERVAL_MS = 3000
+const COLLATOR = new Intl.Collator('zh-CN')
+
+const COLUMNS = [
+  { status: 'todo', label: '待处理', note: '新任务从这里开始' },
+  { status: 'in_progress', label: '进行中', note: '正在执行的任务' },
+  { status: 'review', label: '待审核', note: '变更已产出，等待人工处理' },
+  { status: 'blocked', label: '阻塞', note: '依赖未满足或暂不可执行' },
+  { status: 'failed', label: '失败', note: '需要重试或重新拆解' },
+  { status: 'done', label: '已完成', note: '已经应用或确认完成' },
+  { status: 'cancelled', label: '已取消', note: '当前不再继续处理' }
+]
+
+const STATUS_LABELS = Object.fromEntries(COLUMNS.map((column) => [column.status, column.label]))
+const PRIORITY_LABELS = {
+  high: '高优先级',
+  medium: '中优先级',
+  low: '低优先级'
+}
+const TRACKER_LABELS = {
+  local: '本地',
+  linear: 'Linear',
+  github: 'GitHub'
+}
+const REVIEW_LABELS = {
+  none: '无需审核',
+  pending: '待审核',
+  approved: '已通过',
+  rejected: '已退回'
+}
+const RUN_LABELS = {
+  queued: '排队中',
+  running: '运行中',
+  succeeded: '已成功',
+  failed: '已失败',
+  interrupted: '已中断'
+}
+const PRIORITY_ORDER = { high: 0, medium: 1, low: 2 }
+
+const state = {
+  tasks: [],
+  runs: [],
+  logs: [],
+  runtime: null,
+  selectedTaskId: null,
+  createOpen: false,
+  draftTask: createEmptyDraft(),
+  diffCache: Object.create(null),
+  expandedRuns: new Set(),
+  refreshPromise: null,
+  dragTaskId: null,
+  manualRefreshInFlight: false
+}
+
+authTokenInput.value = localStorage.getItem(TOKEN_KEY) || ''
+updateAuthStatus('')
+
+saveTokenButton.addEventListener('click', handleSaveToken)
+refreshButton.addEventListener('click', handleManualRefresh)
+
+boardEl.addEventListener('click', handleBoardClick)
+boardEl.addEventListener('input', handleBoardInput)
+boardEl.addEventListener('submit', handleBoardSubmit)
+boardEl.addEventListener('keydown', handleBoardKeydown)
+boardEl.addEventListener('dragstart', handleBoardDragStart)
+boardEl.addEventListener('dragover', handleBoardDragOver)
+boardEl.addEventListener('drop', handleBoardDrop)
+boardEl.addEventListener('dragend', handleBoardDragEnd)
+
+inspectorEl.addEventListener('click', handleInspectorClick)
+inspectorEl.addEventListener('change', handleInspectorChange)
+runsEl.addEventListener('click', handleRunsClick)
+
+document.addEventListener('toggle', handleDetailsToggle, true)
+
+refresh()
+setInterval(() => {
+  if (shouldDeferRefresh()) return
+  refresh({ background: true })
+}, POLL_INTERVAL_MS)
+
+function createEmptyDraft() {
+  return {
+    title: '',
+    description: '',
+    type: 'todo',
+    priority: 'medium',
+    dependencies: ''
+  }
+}
+
+async function handleSaveToken() {
+  const token = authTokenInput.value.trim()
+
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+
+  updateAuthStatus(token ? 'Token 已保存，正在重新验证…' : 'Token 已清空')
+  await refresh()
+}
+
+async function handleManualRefresh() {
+  if (state.manualRefreshInFlight) return
+
+  state.manualRefreshInFlight = true
+  refreshButton.disabled = true
+  refreshButton.textContent = '调度中...'
+
+  try {
+    await apiFetch('/api/v1/refresh', { method: 'POST' })
+    await refresh()
+  } catch (error) {
+    updateAuthStatus(error.message, true)
+  } finally {
+    state.manualRefreshInFlight = false
+    refreshButton.disabled = false
+    refreshButton.textContent = '立即调度'
+  }
+}
+
+function handleBoardClick(event) {
+  const actionEl = event.target.closest('[data-action]')
+  if (actionEl) {
+    const action = actionEl.dataset.action
+
+    if (action === 'open-composer') {
+      state.createOpen = true
+      renderBoard()
+      focusComposerTitle()
+      return
+    }
+
+    if (action === 'cancel-create') {
+      state.createOpen = false
+      state.draftTask = createEmptyDraft()
+      renderBoard()
+      return
+    }
+  }
+
+  const taskCard = event.target.closest('[data-task-card]')
+  if (!taskCard) return
+  if (event.target.closest('a, button, input, select, textarea, summary')) return
+
+  selectTask(taskCard.dataset.taskId)
+}
+
+function handleBoardInput(event) {
+  const field = event.target.dataset.draftField
+  if (!field) return
+  state.draftTask[field] = event.target.value
+}
+
+async function handleBoardSubmit(event) {
+  const form = event.target.closest('[data-form="create-task"]')
+  if (!form) return
+
+  event.preventDefault()
+
+  if (!canCreateTasks()) {
+    updateAuthStatus('当前不是本地任务模式，不能在 Web 端创建卡片', true)
+    return
+  }
+
+  const title = state.draftTask.title.trim()
+  if (!title) {
+    updateAuthStatus('任务标题不能为空', true)
+    focusComposerTitle()
+    return
+  }
+
+  try {
+    const response = await apiFetch('/api/tasks', {
+      method: 'POST',
+      body: JSON.stringify({
+        title,
+        description: state.draftTask.description.trim(),
+        type: state.draftTask.type.trim() || 'todo',
+        priority: state.draftTask.priority,
+        dependencies: parseDependencies(state.draftTask.dependencies)
+      })
+    })
+
+    state.createOpen = false
+    state.draftTask = createEmptyDraft()
+    state.selectedTaskId = response.task?.id || null
+    await refresh()
+  } catch (error) {
+    updateAuthStatus(error.message, true)
+  }
+}
+
+function handleBoardKeydown(event) {
+  const taskCard = event.target.closest('[data-task-card]')
+  if (!taskCard) return
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    selectTask(taskCard.dataset.taskId)
+  }
+}
+
+function handleBoardDragStart(event) {
+  const taskCard = event.target.closest('[data-task-card][draggable="true"]')
+  if (!taskCard) return
+
+  state.dragTaskId = taskCard.dataset.taskId
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/plain', state.dragTaskId)
+
+  requestAnimationFrame(() => {
+    taskCard.classList.add('is-dragging')
+  })
+}
+
+function handleBoardDragOver(event) {
+  const column = event.target.closest('[data-column-status]')
+  if (!column || !state.dragTaskId) return
+
+  const task = getTaskById(state.dragTaskId)
+  if (!canMoveTask(task, column.dataset.columnStatus)) return
+
+  event.preventDefault()
+  event.dataTransfer.dropEffect = 'move'
+  highlightColumn(column)
+}
+
+async function handleBoardDrop(event) {
+  const column = event.target.closest('[data-column-status]')
+  if (!column || !state.dragTaskId) return
+
+  clearDropTargets()
+  event.preventDefault()
+
+  const taskId = state.dragTaskId
+  state.dragTaskId = null
+  const nextStatus = column.dataset.columnStatus
+
+  await patchTaskStatus(taskId, nextStatus)
+}
+
+function handleBoardDragEnd() {
+  state.dragTaskId = null
+  clearDropTargets()
+  boardEl.querySelectorAll('.task-card.is-dragging').forEach((card) => card.classList.remove('is-dragging'))
+}
+
+function handleInspectorClick(event) {
+  handleRunContainerSummary(event)
+
+  const actionEl = event.target.closest('[data-action]')
+  if (!actionEl) return
+
+  if (actionEl.dataset.action === 'open-task-link') {
+    return
+  }
+
+  if (actionEl.dataset.taskAction === 'select-task') {
+    selectTask(actionEl.dataset.taskId, { scroll: true })
+    return
+  }
+
+  if (actionEl.dataset.runAction) {
+    handleRunAction(actionEl.dataset.runAction, actionEl.dataset.runId, actionEl.dataset.taskId)
+  }
+}
+
+function handleInspectorChange(event) {
+  const select = event.target.closest('[data-task-status-select]')
+  if (!select) return
+  patchTaskStatus(select.dataset.taskId, select.value)
+}
+
+function handleRunsClick(event) {
+  handleRunContainerSummary(event)
+
+  const actionEl = event.target.closest('[data-action]')
+  if (!actionEl) return
+
+  if (actionEl.dataset.taskAction === 'select-task') {
+    selectTask(actionEl.dataset.taskId, { scroll: true })
+    return
+  }
+
+  if (actionEl.dataset.runAction) {
+    handleRunAction(actionEl.dataset.runAction, actionEl.dataset.runId, actionEl.dataset.taskId)
+  }
+}
+
+function handleRunContainerSummary(event) {
+  const summaryEl = event.target.closest('[data-run-summary]')
+  if (!summaryEl) return
+
+  const detailsEl = summaryEl.closest('[data-run-detail]')
+  if (!detailsEl) return
+
+  const runId = detailsEl.dataset.runId
+  const willOpen = !detailsEl.open
+  if (willOpen) state.expandedRuns.add(runId)
+  else state.expandedRuns.delete(runId)
+}
+
+function handleDetailsToggle(event) {
+  const detailsEl = event.target
+  if (!(detailsEl instanceof HTMLDetailsElement)) return
+  if (!detailsEl.matches('[data-run-detail]')) return
+
+  const runId = detailsEl.dataset.runId
+  if (!runId) return
+
+  if (detailsEl.open) state.expandedRuns.add(runId)
+  else state.expandedRuns.delete(runId)
+}
+
+async function handleRunAction(action, runId, taskId) {
+  try {
+    if (action === 'select-task') {
+      selectTask(taskId, { scroll: true })
+      return
+    }
+
+    if (action === 'load-diff') {
+      await loadRunDiff(runId)
+      return
+    }
+
+    if (action === 'approve') {
+      await apiFetch(`/api/runs/${runId}/approve`, { method: 'POST' })
+    }
+
+    if (action === 'reject') {
+      const reason = window.prompt('拒绝原因（可选）', '') || ''
+      await apiFetch(`/api/runs/${runId}/reject`, {
+        method: 'POST',
+        body: JSON.stringify({ reason })
+      })
+    }
+
+    if (action === 'requeue') {
+      await apiFetch(`/api/tasks/${taskId}/requeue`, { method: 'POST' })
+    }
+
+    await refresh()
+  } catch (error) {
+    updateAuthStatus(error.message, true)
+  }
+}
+
+async function loadRunDiff(runId) {
+  const cacheEntry = state.diffCache[runId]
+  if (cacheEntry?.status === 'loading' || cacheEntry?.status === 'loaded') return
+
+  state.diffCache[runId] = { status: 'loading', text: 'Loading diff...' }
+  state.expandedRuns.add(runId)
+  renderRuns()
+  renderInspector()
+
+  try {
+    const response = await fetchWithAuth(`/api/runs/${runId}/diff`)
+
+    if (response.status === 401) {
+      throw new Error('未授权，请填写正确的 API Token')
+    }
+
+    if (!response.ok) {
+      const payload = await safeJson(response)
+      throw new Error(payload.error || `Request failed: ${response.status}`)
+    }
+
+    const text = await response.text()
+    state.diffCache[runId] = {
+      status: 'loaded',
+      text: text || 'Diff 为空'
+    }
+  } catch (error) {
+    state.diffCache[runId] = {
+      status: 'error',
+      text: error.message
+    }
+    updateAuthStatus(error.message, true)
+  }
+
+  renderRuns()
+  renderInspector()
+}
+
+async function patchTaskStatus(taskId, nextStatus) {
+  const task = getTaskById(taskId)
+  if (!canMoveTask(task, nextStatus)) return
+
+  const previousStatus = task.status
+  task.status = nextStatus
+  task.updatedAt = new Date().toISOString()
+  renderBoard()
+  renderInspector()
+  updateAuthStatus(`已切换到${formatTaskStatus(nextStatus)}，正在保存…`)
+
+  try {
+    await apiFetch(`/api/tasks/${taskId}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ status: nextStatus })
+    })
+    await refresh()
+  } catch (error) {
+    task.status = previousStatus
+    renderBoard()
+    renderInspector()
+    updateAuthStatus(error.message, true)
+  }
+}
+
+function shouldDeferRefresh() {
+  if (state.dragTaskId) return true
+
+  const activeEl = document.activeElement
+  if (!activeEl) return false
+  if (!(activeEl instanceof HTMLElement)) return false
+
+  return Boolean(activeEl.closest('input, textarea, select'))
+}
+
+function selectTask(taskId, { scroll = false } = {}) {
+  if (!getTaskById(taskId)) return
+  state.selectedTaskId = taskId
+  renderBoard()
+  renderInspector()
+
+  if (scroll && window.innerWidth <= 1280) {
+    inspectorEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+function focusComposerTitle() {
+  const input = boardEl.querySelector('[data-draft-field="title"]')
+  if (input instanceof HTMLInputElement) input.focus()
+}
+
+async function refresh({ background = false } = {}) {
+  if (state.refreshPromise) return state.refreshPromise
+
+  state.refreshPromise = (async () => {
+    try {
+      const [tasksResp, runsResp, logsResp, runtimeResp] = await Promise.all([
+        apiFetch('/api/tasks'),
+        apiFetch('/api/runs'),
+        apiFetch('/api/logs'),
+        apiFetch('/api/v1/state')
+      ])
+
+      state.tasks = Array.isArray(tasksResp.tasks) ? tasksResp.tasks : []
+      state.runs = Array.isArray(runsResp.runs) ? sortRuns(runsResp.runs) : []
+      state.logs = Array.isArray(logsResp.logs) ? logsResp.logs : []
+      state.runtime = runtimeResp || null
+
+      if (state.selectedTaskId && !getTaskById(state.selectedTaskId)) {
+        state.selectedTaskId = null
+      }
+
+      render()
+      updateAuthStatus('')
+    } catch (error) {
+      if (!background) render()
+      updateAuthStatus(error.message, true)
+    } finally {
+      state.refreshPromise = null
+    }
+  })()
+
+  return state.refreshPromise
+}
+
+function render() {
+  renderMetrics()
+  renderBoard()
+  renderInspector()
+  renderRuns()
+  renderSystemState()
+  renderLogs()
+}
+
+function renderMetrics() {
+  metricEls.total.textContent = String(state.tasks.length)
+  metricEls.active.textContent = String(state.tasks.filter((task) => task.status === 'in_progress').length)
+  metricEls.review.textContent = String(state.tasks.filter((task) => task.status === 'review').length)
+  metricEls.done.textContent = String(state.tasks.filter((task) => task.status === 'done').length)
+}
+
+function renderBoard() {
+  const runsByTask = buildRunsByTask(state.runs)
+
+  boardEl.innerHTML = COLUMNS.map((column) => {
+    const columnTasks = sortTasksForBoard(state.tasks.filter((task) => task.status === column.status))
+    const cards = columnTasks.map((task) => renderTaskCard(task, runsByTask.get(task.id)?.[0] || null)).join('')
+    const bodyParts = []
+
+    if (column.status === 'todo') {
+      bodyParts.push(renderComposerCard())
+    }
+
+    bodyParts.push(cards || '<p class="empty-column">暂无卡片</p>')
+
+    return `
+      <section class="kanban-column" data-column-status="${escapeHtml(column.status)}" aria-label="${escapeHtml(column.label)}">
+        <div class="column-head">
+          <div>
+            <div class="column-title-row">
+              <span class="column-dot ${escapeHtml(column.status)}" aria-hidden="true"></span>
+              <h3 class="column-title">${escapeHtml(column.label)}</h3>
+            </div>
+            <p class="column-note">${escapeHtml(column.note)}</p>
+          </div>
+          <span class="column-count">${columnTasks.length}</span>
+        </div>
+        <div class="column-body">
+          ${bodyParts.join('')}
+        </div>
+      </section>
+    `
+  }).join('')
+}
+
+function renderComposerCard() {
+  if (!canCreateTasks()) {
+    return `
+      <article class="composer-card">
+        <div class="composer-disabled">
+          当前是 ${escapeHtml(formatTracker(getTrackerMode()))} 同步模式，首页只展示任务，不在 Web 端新建本地卡片。
+        </div>
+      </article>
+    `
+  }
+
+  if (!state.createOpen) {
+    return `
+      <article class="composer-card">
+        <button type="button" class="composer-trigger" data-action="open-composer">
+          创建任务卡片
+        </button>
+      </article>
+    `
+  }
+
+  return `
+    <article class="composer-card">
+      <form class="task-composer-form" data-form="create-task">
+        <div>
+          <label class="token-label" for="draft-title">任务标题</label>
+          <input
+            id="draft-title"
+            data-draft-field="title"
+            value="${escapeHtml(state.draftTask.title)}"
+            placeholder="例如：重构首页任务看板"
+            autocomplete="off"
+          />
+        </div>
+
+        <div>
+          <label class="token-label" for="draft-description">任务说明</label>
+          <textarea
+            id="draft-description"
+            data-draft-field="description"
+            placeholder="补充目标、验收标准、上下文"
+          >${escapeHtml(state.draftTask.description)}</textarea>
+        </div>
+
+        <div class="task-composer-grid">
+          <div>
+            <label class="token-label" for="draft-type">类型</label>
+            <input
+              id="draft-type"
+              data-draft-field="type"
+              value="${escapeHtml(state.draftTask.type)}"
+              placeholder="todo / bug / feature"
+              autocomplete="off"
+            />
+          </div>
+
+          <div>
+            <label class="token-label" for="draft-priority">优先级</label>
+            <select id="draft-priority" data-draft-field="priority">
+              ${renderPriorityOptions(state.draftTask.priority)}
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label class="token-label" for="draft-dependencies">依赖任务</label>
+          <input
+            id="draft-dependencies"
+            data-draft-field="dependencies"
+            value="${escapeHtml(state.draftTask.dependencies)}"
+            placeholder="多个任务用逗号分隔，例如 T-1, T-2"
+            autocomplete="off"
+          />
+        </div>
+
+        <div class="composer-actions">
+          <button type="submit" class="toolbar-button">创建卡片</button>
+          <button type="button" class="ghost-button" data-action="cancel-create">收起</button>
+        </div>
+      </form>
+    </article>
+  `
+}
+
+function renderTaskCard(task, latestRun) {
+  const selected = task.id === state.selectedTaskId
+  const metaPills = [
+    `<span class="meta-pill">${escapeHtml(task.id)}</span>`,
+    `<span class="meta-pill">${escapeHtml(formatPriority(task.priority))}</span>`,
+    `<span class="meta-pill">${escapeHtml(formatTracker(task.trackerKind))}</span>`
+  ]
+
+  if (task.dependencies?.length) {
+    metaPills.push(`<span class="meta-pill">依赖 ${task.dependencies.length}</span>`)
+  }
+
+  if (latestRun) {
+    metaPills.push(`<span class="meta-pill">最近运行 ${escapeHtml(formatRunStatus(latestRun.status))}</span>`)
+  }
+
+  const description = task.description || '暂无说明'
+  const trackerHint = latestRun
+    ? `最近一次：${formatDate(latestRun.finishedAt || latestRun.startedAt)}`
+    : `更新于 ${formatDate(task.updatedAt)}`
+
+  return `
+    <article
+      class="task-card${selected ? ' is-selected' : ''}"
+      data-task-card
+      data-task-id="${escapeHtml(task.id)}"
+      draggable="${isLocalTask(task) ? 'true' : 'false'}"
+      role="button"
+      tabindex="0"
+      aria-selected="${selected ? 'true' : 'false'}"
+    >
+      <div class="task-card-header">
+        <div>
+          <h3 class="task-card-title">${escapeHtml(task.title)}</h3>
+          <p class="task-meta-line">${escapeHtml(trackerHint)}</p>
+        </div>
+        <span class="status-pill ${escapeHtml(task.status)}">${escapeHtml(formatTaskStatus(task.status))}</span>
+      </div>
+
+      <p class="task-card-body">${escapeHtml(description)}</p>
+      <p class="task-meta-line">${escapeHtml(buildTaskMetaLine(task, latestRun))}</p>
+      <div class="task-card-footer">${metaPills.join('')}</div>
+      ${isLocalTask(task) ? '<p class="drag-hint">拖到其他列即可切换状态</p>' : ''}
+    </article>
+  `
+}
+
+function renderInspector() {
+  const task = getSelectedTask()
+  if (!task) {
+    inspectorEl.innerHTML = `
+      <div class="inspector-empty">
+        <p class="section-kicker">Inspector</p>
+        <h2>选择任务卡片</h2>
+        <p>查看详情、运行记录、审核 diff，或在移动端直接修改状态。</p>
+      </div>
+    `
+    return
+  }
+
+  const taskRuns = getRunsForTask(task.id)
+  const latestRun = taskRuns[0] || null
+  const labelPills = (task.labels || []).map((label) => `<span class="meta-pill">${escapeHtml(label)}</span>`)
+  const dependencyList = task.dependencies?.length
+    ? `
+        <ul class="file-list">
+          ${task.dependencies.map((dependency) => `<li><span class="meta-pill">依赖</span><span>${escapeHtml(dependency)}</span></li>`).join('')}
+        </ul>
+      `
+    : '<p class="inspector-muted">无依赖任务</p>'
+
+  inspectorEl.innerHTML = `
+    <div class="inspector-header">
+      <div>
+        <p class="section-kicker">${escapeHtml(formatTracker(task.trackerKind))}</p>
+        <h2>${escapeHtml(task.title)}</h2>
+        <p class="task-meta-line">${escapeHtml(task.id)} · 更新于 ${escapeHtml(formatDate(task.updatedAt))}</p>
+      </div>
+      <span class="status-pill ${escapeHtml(task.status)}">${escapeHtml(formatTaskStatus(task.status))}</span>
+    </div>
+
+    <section class="inspector-section">
+      <div class="inspector-grid">
+        <div class="inspector-stat">
+          <span>优先级</span>
+          <strong>${escapeHtml(formatPriority(task.priority))}</strong>
+        </div>
+        <div class="inspector-stat">
+          <span>任务来源</span>
+          <strong>${escapeHtml(formatTracker(task.trackerKind))}</strong>
+        </div>
+        <div class="inspector-stat">
+          <span>运行记录</span>
+          <strong>${taskRuns.length}</strong>
+        </div>
+        <div class="inspector-stat">
+          <span>最新运行</span>
+          <strong>${escapeHtml(latestRun ? formatRunStatus(latestRun.status) : '暂无')}</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="inspector-section">
+      <p class="inspector-copy">${escapeHtml(task.description || '暂无说明')}</p>
+      <div class="task-card-footer">
+        <span class="meta-pill">${escapeHtml(task.type || 'todo')}</span>
+        ${task.trackerState ? `<span class="meta-pill">${escapeHtml(task.trackerState)}</span>` : ''}
+        ${labelPills.join('')}
+      </div>
+      <div class="inspector-actions">
+        ${task.url ? `<a href="${escapeHtml(task.url)}" target="_blank" rel="noreferrer" class="inline-button" data-action="open-task-link">打开来源任务</a>` : ''}
+      </div>
+    </section>
+
+    <section class="inspector-section">
+      <p class="section-kicker">Status</p>
+      ${
+        isLocalTask(task)
+          ? `
+            <label class="token-label" for="task-status-select">任务状态</label>
+            <select id="task-status-select" data-task-status-select data-task-id="${escapeHtml(task.id)}">
+              ${renderStatusOptions(task.status)}
+            </select>
+            <p class="inspector-muted">桌面端可以直接拖卡片改状态；移动端使用这里的下拉切换。</p>
+          `
+          : `<p class="inspector-muted">远程同步任务在 Web 端只读展示，状态以 ${escapeHtml(formatTracker(task.trackerKind))} 为准。</p>`
+      }
+    </section>
+
+    <section class="inspector-section">
+      <p class="section-kicker">Dependencies</p>
+      ${dependencyList}
+    </section>
+
+    <section class="inspector-section">
+      <p class="section-kicker">Runs</p>
+      ${
+        taskRuns.length
+          ? `<div class="run-list">${taskRuns.map((run) => renderRunRecord(run)).join('')}</div>`
+          : '<p class="run-empty">暂无运行记录</p>'
+      }
+    </section>
+  `
+}
+
+function renderRuns() {
+  const visibleRuns = state.runs.slice(0, 12)
+  const pendingReviews = state.runs.filter((run) => run.reviewStatus === 'pending').length
+  const runningCount = state.runs.filter((run) => run.status === 'running').length
+
+  runsSummaryEl.textContent = `${runningCount} 运行中 / ${pendingReviews} 待审`
+
+  if (!visibleRuns.length) {
+    runsEl.innerHTML = '<p class="utility-empty">暂无运行记录</p>'
+    return
+  }
+
+  runsEl.innerHTML = visibleRuns.map((run) => renderCompactRun(run)).join('')
+}
+
+function renderSystemState() {
+  const payload = state.runtime || {}
+  const runningCount = Array.isArray(payload.state?.running) ? payload.state.running.length : 0
+  const trackerName = formatTracker(payload.tracker || 'local')
+
+  stateSummaryEl.textContent = runningCount > 0 ? `${runningCount} 运行中 · ${trackerName}` : `空闲 · ${trackerName}`
+  stateEl.textContent = JSON.stringify(payload, null, 2)
+}
+
+function renderLogs() {
+  const lines = state.logs.slice(-160).map((entry) => `${entry.at} ${entry.message}`)
+  logsSummaryEl.textContent = `${state.logs.length}`
+  logsEl.textContent = lines.join('\n')
+}
+
+function renderCompactRun(run) {
+  const taskId = run.taskId || run.issueIdentifier
+  const task = getTaskById(taskId)
+  const diffBlock = renderDiffBlock(run)
+
+  return `
+    <article class="compact-run">
+      <div class="compact-run-row">
+        <div>
+          <h3 class="compact-run-title">${escapeHtml(run.issueIdentifier || run.id)}</h3>
+          <p class="compact-run-meta">${escapeHtml(run.id)} · ${escapeHtml(formatDate(run.finishedAt || run.startedAt))}</p>
+        </div>
+        <div class="task-card-footer">
+          ${renderRunBadges(run)}
+        </div>
+      </div>
+      <p class="task-meta-line">${escapeHtml(run.summary || 'Run queued')}</p>
+      <div class="compact-run-actions">
+        ${task ? `<button class="chip-button" data-action data-task-action="select-task" data-task-id="${escapeHtml(task.id)}">查看任务</button>` : ''}
+        ${renderRunActionButtons(run, taskId, 'compact')}
+      </div>
+      ${diffBlock}
+    </article>
+  `
+}
+
+function renderRunRecord(run) {
+  const detailLogs = Array.isArray(run.logs) && run.logs.length
+    ? `<pre>${escapeHtml(run.logs.join('\n'))}</pre>`
+    : '<p class="run-empty">暂无运行日志</p>'
+  const diffBlock = renderDiffBlock(run)
+  const changedFiles = run.changedFiles?.length
+    ? `
+        <ul class="file-list">
+          ${run.changedFiles.map((file) => `<li><span class="meta-pill">${escapeHtml(file.status)}</span><span>${escapeHtml(file.path)}</span></li>`).join('')}
+        </ul>
+      `
+    : '<p class="run-empty">无文件变更</p>'
+
+  return `
+    <details class="run-record" data-run-detail data-run-id="${escapeHtml(run.id)}" ${state.expandedRuns.has(run.id) ? 'open' : ''}>
+      <summary data-run-summary>
+        <div class="run-summary-row">
+          <div>
+            <h3 class="run-summary-title">${escapeHtml(run.id)}</h3>
+            <p class="run-meta">${escapeHtml(run.issueIdentifier)} · ${escapeHtml(formatDate(run.finishedAt || run.startedAt))}</p>
+          </div>
+          <div class="task-card-footer">${renderRunBadges(run)}</div>
+        </div>
+      </summary>
+
+      <div class="run-detail-body">
+        <p class="task-meta-line">${escapeHtml(run.summary || 'Run queued')}</p>
+        ${run.workspacePath ? `<p class="task-meta-line">${escapeHtml(run.workspacePath)}</p>` : ''}
+        <div class="run-actions">${renderRunActionButtons(run, run.taskId || run.issueIdentifier, 'full')}</div>
+        ${changedFiles}
+        ${diffBlock}
+        ${detailLogs}
+      </div>
+    </details>
+  `
+}
+
+function renderRunActionButtons(run, taskId, variant) {
+  const buttons = []
+  const diffEntry = state.diffCache[run.id]
+  const buttonClass = variant === 'compact' ? 'chip-button' : 'run-action'
+
+  if (run.status === 'succeeded' && run.reviewStatus === 'pending') {
+    buttons.push(`<button class="${buttonClass}${variant === 'full' ? ' primary' : ''}" data-action data-run-action="approve" data-run-id="${escapeHtml(run.id)}" data-task-id="${escapeHtml(taskId)}">应用变更</button>`)
+    buttons.push(`<button class="${buttonClass}${variant === 'full' ? ' danger' : ''}" data-action data-run-action="reject" data-run-id="${escapeHtml(run.id)}" data-task-id="${escapeHtml(taskId)}">退回重做</button>`)
+  }
+
+  if (run.status === 'failed') {
+    buttons.push(`<button class="${buttonClass}" data-action data-run-action="requeue" data-run-id="${escapeHtml(run.id)}" data-task-id="${escapeHtml(taskId)}">重新排队</button>`)
+  }
+
+  if (run.diffFile) {
+    if (diffEntry?.status === 'loading') {
+      buttons.push(`<button class="${buttonClass}" disabled>加载中...</button>`)
+    } else if (!diffEntry || diffEntry.status === 'error') {
+      buttons.push(`<button class="${buttonClass}" data-action data-run-action="load-diff" data-run-id="${escapeHtml(run.id)}" data-task-id="${escapeHtml(taskId)}">加载 Diff</button>`)
+    }
+  }
+
+  return buttons.join('')
+}
+
+function renderRunBadges(run) {
+  const pills = [
+    `<span class="status-pill ${escapeHtml(runTone(run.status))}">${escapeHtml(formatRunStatus(run.status))}</span>`,
+    `<span class="status-pill ${escapeHtml(reviewTone(run.reviewStatus))}">${escapeHtml(formatReviewStatus(run.reviewStatus))}</span>`,
+    `<span class="meta-pill">attempt ${escapeHtml(String(run.attempt || 1))}</span>`
+  ]
+
+  if (run.diffSummary?.total) {
+    pills.push(`<span class="meta-pill">${escapeHtml(String(run.diffSummary.total))} files</span>`)
+  }
+
+  if (run.session?.turnCount) {
+    pills.push(`<span class="meta-pill">${escapeHtml(String(run.session.turnCount))} turns</span>`)
+  }
+
+  return pills.join('')
+}
+
+function renderDiffBlock(run) {
+  const diffEntry = state.diffCache[run.id]
+  if (!diffEntry) return ''
+
+  return `<pre class="diff-block">${escapeHtml(diffEntry.text)}</pre>`
+}
+
+function renderPriorityOptions(current) {
+  return ['high', 'medium', 'low']
+    .map((priority) => `<option value="${priority}"${priority === current ? ' selected' : ''}>${escapeHtml(formatPriority(priority))}</option>`)
+    .join('')
+}
+
+function renderStatusOptions(current) {
+  return COLUMNS.map((column) => `<option value="${column.status}"${column.status === current ? ' selected' : ''}>${escapeHtml(column.label)}</option>`).join('')
+}
+
+function buildRunsByTask(runs) {
+  const map = new Map()
+
+  for (const run of runs) {
+    const taskId = run.taskId || run.issueIdentifier
+    if (!map.has(taskId)) map.set(taskId, [])
+    map.get(taskId).push(run)
+  }
+
+  return map
+}
+
+function getRunsForTask(taskId) {
+  return state.runs.filter((run) => (run.taskId || run.issueIdentifier) === taskId)
+}
+
+function sortRuns(runs) {
+  return [...runs].sort((left, right) => {
+    return toEpoch(right.finishedAt || right.startedAt) - toEpoch(left.finishedAt || left.startedAt)
+  })
+}
+
+function sortTasksForBoard(tasks) {
+  return [...tasks].sort((left, right) => {
+    const priorityDelta = (PRIORITY_ORDER[left.priority] ?? 9) - (PRIORITY_ORDER[right.priority] ?? 9)
+    if (priorityDelta !== 0) return priorityDelta
+
+    const dateDelta = toEpoch(right.updatedAt) - toEpoch(left.updatedAt)
+    if (dateDelta !== 0) return dateDelta
+
+    return COLLATOR.compare(left.title || '', right.title || '')
+  })
+}
+
+function getTaskById(taskId) {
+  return state.tasks.find((task) => task.id === taskId) || null
+}
+
+function getSelectedTask() {
+  return getTaskById(state.selectedTaskId)
+}
+
+function getTrackerMode() {
+  return state.runtime?.tracker || 'local'
+}
+
+function canCreateTasks() {
+  return getTrackerMode() === 'local'
+}
+
+function isLocalTask(task) {
+  return task?.trackerKind === 'local'
+}
+
+function canMoveTask(task, nextStatus) {
+  return Boolean(task && isLocalTask(task) && STATUS_LABELS[nextStatus] && task.status !== nextStatus)
+}
+
+function buildTaskMetaLine(task, latestRun) {
+  const parts = []
+
+  if (task.url) parts.push('已关联来源任务')
+  if (task.dependencies?.length) parts.push(`依赖 ${task.dependencies.join(', ')}`)
+  if (latestRun?.reviewStatus === 'pending') parts.push('有待审核变更')
+  if (!parts.length) parts.push(isLocalTask(task) ? '本地任务，可直接拖拽流转' : '远程任务，只读同步展示')
+
+  return parts.join(' · ')
+}
+
+function highlightColumn(columnEl) {
+  clearDropTargets()
+  columnEl.classList.add('is-drop-target')
+}
+
+function clearDropTargets() {
+  boardEl.querySelectorAll('.kanban-column.is-drop-target').forEach((column) => column.classList.remove('is-drop-target'))
+}
+
+async function apiFetch(url, options = {}) {
+  const response = await fetchWithAuth(url, options)
+
+  if (response.status === 401) {
+    throw new Error('未授权，请填写正确的 API Token')
+  }
+
+  if (!response.ok) {
+    const payload = await safeJson(response)
+    throw new Error(payload.error || `Request failed: ${response.status}`)
+  }
+
+  return response.json()
+}
+
+function fetchWithAuth(url, options = {}) {
+  const headers = new Headers(options.headers || {})
+  const token = localStorage.getItem(TOKEN_KEY)
+
+  if (token) {
+    headers.set('x-taskode-token', token)
+  }
+
+  if (options.body && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json')
+  }
+
+  return fetch(url, { ...options, headers })
+}
+
+async function safeJson(response) {
+  try {
+    return await response.json()
+  } catch {
+    return { error: 'Request failed' }
+  }
+}
+
+function parseDependencies(value) {
+  return String(value || '')
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+}
+
+function formatTaskStatus(status) {
+  return STATUS_LABELS[status] || status || '未知状态'
+}
+
+function formatPriority(priority) {
+  return PRIORITY_LABELS[priority] || priority || '未设置'
+}
+
+function formatTracker(tracker) {
+  return TRACKER_LABELS[tracker] || tracker || '未知来源'
+}
+
+function formatReviewStatus(status) {
+  return REVIEW_LABELS[status] || status || '未知'
+}
+
+function formatRunStatus(status) {
+  return RUN_LABELS[status] || status || '未知'
+}
+
+function runTone(status) {
+  if (status === 'running' || status === 'queued') return 'in_progress'
+  if (status === 'succeeded') return 'done'
+  if (status === 'failed') return 'failed'
+  return 'cancelled'
+}
+
+function reviewTone(status) {
+  if (status === 'pending') return 'review'
+  if (status === 'approved') return 'done'
+  if (status === 'rejected') return 'failed'
+  return 'todo'
+}
+
+function toEpoch(value) {
+  const time = Date.parse(value || '')
+  return Number.isNaN(time) ? 0 : time
+}
+
+function formatDate(value) {
+  const time = toEpoch(value)
+  if (!time) return '未知时间'
+
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(time)
+}
+
+function updateAuthStatus(message, isError = false) {
+  authStatusEl.textContent = message || '鉴权通过时，Dashboard 会自动附带 x-taskode-token。'
+  authStatusEl.style.color = isError ? 'var(--danger)' : ''
+}
+
+function escapeHtml(value) {
+  return String(value || '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+}