@pioneer_zmc/dsh-workbench 0.2.1

package/web/assets/business.js

@@ -0,0 +1,124 @@
+// 业务页：业务介绍、文档入口、图列表（每图带快照数与当前状态）。
+import { $, chartStatusKind, countChartStatuses, el, fetchJson, pageTitle, renderEmptyWorkspaceParam, renderGuide, renderRepoLine, renderRepoState, setStatus, showError, STATUS_SUMMARY_ORDER, statusBadge, workspaceParamEmpty, wsUrl } from './common.js'
+
+/** 图列表上方的状态汇总行：点某个状态跳到第一张该状态的图卡并闪一下框，
+ *  图多时不用逐张扫徽标找"要处理的"。 */
+function renderChartSummary(charts, root) {
+  const box = $('chartSummary')
+  if (!box) return
+  const counts = countChartStatuses(charts)
+  const present = STATUS_SUMMARY_ORDER.filter(([kind]) => counts[kind])
+  if (present.length === 0) return
+  for (const [kind, label] of present) {
+    const chip = el('button', 'badge')
+    chip.type = 'button'
+    chip.dataset.kind = kind
+    chip.textContent = `${label} ${counts[kind]}`
+    chip.addEventListener('click', () => {
+      const target = root.querySelector(`.card[data-status="${kind}"]`)
+      if (!target) return
+      target.scrollIntoView({ block: 'center' })
+      target.classList.add('flash')
+      setTimeout(() => target.classList.remove('flash'), 1200)
+    })
+    box.append(chip)
+  }
+  box.hidden = false
+}
+
+function businessIdFromLocation() {
+  const parts = location.pathname.split('/').filter(Boolean) // ['specdev-workbench','business','<id>']
+  return parts[2] || ''
+}
+
+async function main() {
+  if (workspaceParamEmpty) return renderEmptyWorkspaceParam()
+  const id = businessIdFromLocation()
+  if (!id) return showError('缺少业务 id（路径应为 /specdev-workbench/business/<业务id>）')
+  let inventory
+  try {
+    inventory = await fetchJson(wsUrl('/specdev-workbench/api/inventory'))
+  } catch (error) {
+    if (renderRepoState(error)) return
+    return showError(error.message)
+  }
+  if (inventory.code === 'repo-not-configured') return renderGuide(inventory)
+  renderRepoLine(inventory.repo)
+
+  const business = inventory.businesses.find((b) => b.id === id)
+  if (!business) return showError(`业务不存在：${id}`)
+  document.title = pageTitle(business.name, inventory.repo)
+  $('bizName').textContent = business.name
+  $('title').textContent = business.name
+  if (business.descriptorError) {
+    $('intro').textContent = business.descriptorError
+    setStatus('该业务的说明文件有问题，已被跳过展开', 'warn')
+    return
+  }
+  if (business.intro) $('intro').textContent = business.intro
+
+  // P1b-2 独立业务房间入口：业务有效（说明文件检查通过）就显示，链接带工作区标识；
+  // 不为它预读房间接口——没有 room.json 时由房间页给出明确空态。
+  const roomEntry = $('roomEntry')
+  roomEntry.href = wsUrl(`/specdev-workbench/room/${encodeURIComponent(id)}`)
+  $('roomEntryLine').hidden = false
+
+  if (business.docs.length > 0) {
+    const list = $('docList')
+    for (const doc of business.docs) {
+      const li = el('li')
+      const a = el('a')
+      a.href = wsUrl(`/specdev-workbench/api/doc?business=${encodeURIComponent(id)}&path=${encodeURIComponent(doc)}`)
+      a.target = '_blank'
+      a.rel = 'noopener'
+      a.textContent = doc
+      li.appendChild(a)
+      list.appendChild(li)
+    }
+    $('docs').hidden = false
+  }
+
+  const root = $('root')
+  root.textContent = ''
+  for (const chart of business.charts) {
+    const card = el('a', 'card')
+    card.href = wsUrl(`/specdev-workbench/read/${id}/${chart.id}`)
+    card.dataset.status = chartStatusKind(chart)
+    const h = el('h2')
+    h.textContent = chart.name
+    h.insertAdjacentHTML('beforeend', statusBadge(chart.currentStatus, chart.compareError))
+    card.appendChild(h)
+    if (chart.idConflict) {
+      const badge = el('span', 'badge')
+      badge.dataset.kind = 'invalid'
+      badge.textContent = '编号冲突'
+      card.appendChild(badge)
+      const p = el('p')
+      p.textContent = chart.idConflict
+      card.appendChild(p)
+    } else if (chart.descriptorError) {
+      const badge = el('span', 'badge')
+      badge.dataset.kind = 'invalid'
+      badge.textContent = '说明文件问题'
+      card.appendChild(badge)
+      const p = el('p')
+      p.textContent = chart.descriptorError
+      card.appendChild(p)
+    } else if (chart.summary) {
+      const p = el('p')
+      p.textContent = chart.summary
+      card.appendChild(p)
+    }
+    const meta = el('p', 'meta')
+    const invalidNote = chart.invalidTagCount > 0 ? `，另有 ${chart.invalidTagCount} 个不合约定的标签被忽略` : ''
+    meta.textContent = chart.snapshotCount > 0
+      ? `快照 ${chart.snapshotCount} 版${invalidNote}`
+      : `还没有保存过快照${invalidNote}`
+    card.appendChild(meta)
+    root.appendChild(card)
+  }
+  renderChartSummary(business.charts, root)
+  setStatus(`${business.name}：${business.charts.length} 张图`, 'ok')
+}
+
+main()

package/web/assets/chart-link.js

@@ -0,0 +1,165 @@
+// 图与外层的连接：观察原生选中标记，并集中适配节点双击详情。
+// 不修改 vendor，不拦截单击、键盘与拖动。上游升级时复验此适配层。
+//
+// 页面切版本是整页跳转，图与观察随页面一起没了，所以阅读页不需要在页内清理；
+// dispose() 留给"同一页里想换一张图"的将来用法。
+//
+// 选中含义沿用旧增强阅读器的规则：**恰好一个**节点带标记才算选中，多个按未选中处理
+// （那种情形是"多点聚焦"，不是"选中了谁"）。
+
+const SVG_SELECTOR = 'svg[role="img"]'
+const MARKER = 'data-focus-selected'
+
+/**
+ * 从"带选中标记的节点"清单得出结论：恰好一个才算选中，多个按未选中处理。
+ * 纯函数（只认 { id }），Node 里可直接测。
+ */
+export function selectedId(selected) {
+  const ids = (selected || [])
+    .map((node) => (node && typeof node.id === 'string' ? node.id : ''))
+    .filter(Boolean)
+  return ids.length === 1 ? ids[0] : null
+}
+
+/**
+ * 从主图 SVG 里读一次当前选中：返回 { id, label } 或 null。
+ * label 取图上那个节点自己的名字（data-node-label）；缺了就退回编号，不编造。
+ * 只用到 querySelectorAll / getAttribute，Node 里给个同形替身即可测。
+ */
+export function readSelection(svg) {
+  const selected = [...svg.querySelectorAll(`[${MARKER}]`)].map((node) => ({
+    id: node.getAttribute('data-node-id'),
+    label: node.getAttribute('data-node-label') || node.getAttribute('data-node-id'),
+  }))
+  const id = selectedId(selected)
+  if (!id) return null
+  const hit = selected.find((node) => node.id === id)
+  return { id, label: hit.label }
+}
+
+/**
+ * 进小房间取文档：装配前的空文档不算，等 load 落地后再交出来；被拦下走 onBlocked。
+ * 失败有尽头，不留"永远等着"的口子（复审修复）：load 都到过了仍拿不到文档——
+ * 不会再有下一个信号，到此为止明确报；一直等不到 load，超时也报。
+ */
+function whenLoaded(frame, onDoc, onBlocked, timeoutMs = 10000) {
+  let settled = false
+  let timer = null
+
+  function finish(run) {
+    if (settled) return
+    settled = true
+    if (timer) clearTimeout(timer)
+    frame.removeEventListener('load', onLoad)
+    run()
+  }
+
+  function docOf() {
+    try {
+      return { doc: frame.contentDocument }
+    } catch (error) {
+      return { blocked: `进不去图所在的小房间（${error.name || '跨源'}）` }
+    }
+  }
+
+  function onLoad() {
+    const got = docOf()
+    if (got.blocked) return finish(() => onBlocked(got.blocked))
+    const doc = got.doc
+    if (!doc) return finish(() => onBlocked('图加载完了，页面却进不去它的内部文档'))
+    if (doc.location && doc.location.href !== 'about:blank') return finish(() => onDoc(doc))
+    // 这次 load 的是装配前的空文档：不算数，接着等真正那次
+  }
+
+  const initial = docOf()
+  if (initial.blocked) {
+    finish(() => onBlocked(initial.blocked))
+    return () => {}
+  }
+  if (initial.doc && initial.doc.location && initial.doc.location.href !== 'about:blank') {
+    finish(() => onDoc(initial.doc))
+    return () => {}
+  }
+  // 还没加载出来或还在空文档：等真正那次 load；真等不来，到点按超时收尾
+  frame.addEventListener('load', onLoad)
+  timer = setTimeout(
+    () => finish(() => onBlocked(`等图加载等得太久（超过 ${Math.max(1, Math.round(timeoutMs / 1000))} 秒）`)),
+    timeoutMs,
+  )
+  return () => finish(() => {})
+}
+
+/**
+ * 接上画布里的图：onSelection({ id, label } | null, ...) 每次结论变化报一次（含初读）；
+ * 接不上（进不去小房间 / 图里找不到主图 / 等图加载等到超时）走 onUnavailable(原因)，只报一次。
+ * timeoutMs 是等图加载的最长时间（毫秒，默认 10 秒），到点仍没等到就按接不上报。
+ * 返回 { dispose() }，调用方不需要时可以不接（切版本整页重载）。
+ */
+export function connectChartSelection(frame, { onSelection, onUnavailable, onOpenDetail, timeoutMs } = {}) {
+  let observer = null
+  let removeDoubleClick = () => {}
+  let stopWaiting = () => {}
+  let cancelled = false
+  let reported = false
+  let seen = false
+  let lastId = null
+
+  const fail = (reason) => {
+    if (cancelled || reported) return
+    reported = true
+    onUnavailable?.(reason)
+  }
+
+  const publish = (selection) => {
+    if (cancelled) return
+    const id = selection ? selection.id : null
+    if (seen && id === lastId) return // 结论没变不重复打扰
+    seen = true
+    lastId = id
+    onSelection?.(selection)
+  }
+
+  const start = (doc) => {
+    let svg = null
+    try {
+      svg = doc.querySelector(SVG_SELECTOR)
+    } catch (error) {
+      fail(`图里的内容读不到（${error.name || '取不到' }）`)
+      return
+    }
+    if (!svg) {
+      fail('图里找不到主图')
+      return
+    }
+    const sync = () => publish(readSelection(svg))
+    // 双击适配集中于此；不修改上游，不拦截单击、拖动或空白区事件。
+    const open = (event) => {
+      if (cancelled || event.button !== 0) return
+      const node = event.target.closest?.('[data-node-id]')
+      if (!node || !svg.contains(node)) return
+      const id = node.getAttribute('data-node-id')
+      if (!id) return
+      onOpenDetail?.({ id, label: node.getAttribute('data-node-label') || id }, node)
+    }
+    if (onOpenDetail) {
+      svg.addEventListener('dblclick', open)
+      removeDoubleClick = () => svg.removeEventListener('dblclick', open)
+    }
+    observer = new MutationObserver(sync)
+    // 只看这一个标记：图内其它变化（缩放、悬停、播放）与选中无关，不惊动外层
+    observer.observe(svg, { subtree: true, attributes: true, attributeFilter: [MARKER] })
+    sync() // 初读一次：连接时图里可能已经有选中
+  }
+
+  stopWaiting = whenLoaded(frame, start, fail, timeoutMs)
+
+  return {
+    dispose() {
+      cancelled = true
+      observer?.disconnect()
+      observer = null
+      removeDoubleClick()
+      stopWaiting()
+    },
+  }
+}

package/web/assets/common.js

@@ -0,0 +1,302 @@
+// 三个页面共用的小工具：取数、错误与"repoRoot 未配置"指引渲染。
+// 第二期第 2 步：链接带 ?workspace=<工作区标识> 时整条链路按该工作区读写——
+// 本页标识在这里取一次，站内所有跳转与取数都经 wsUrl() 补上它（丢了就会串回手动模式的项目）。
+export const $ = (id) => document.getElementById(id)
+
+// null＝链接里没有 workspace 参数（允许手动模式）；''＝有参数但为空（必须报错：
+// 空参数若当"没有参数"处理，配置过 repoRoot 的页面会悄悄打开手动配置的项目）。
+const workspaceParam = new URLSearchParams(location.search).get('workspace')
+export const workspaceId = workspaceParam || ''
+export const workspaceParamEmpty = workspaceParam === ''
+
+/** 给站内 URL 补上本页的工作区标识；手动模式（没有标识）原样返回。 */
+export function wsUrl(url) {
+  if (!workspaceId) return url
+  return `${url}${url.includes('?') ? '&' : '?'}workspace=${encodeURIComponent(workspaceId)}`
+}
+
+// 面包屑里的"项目首页"是 HTML 里写死的裸地址，这里统一补上标识（首页自己没有面包屑，查不到就不动）。
+// 阅读页的"业务"链接有业务段、且必须在取数前绑定（失败页也要带标识），由 read.js 自己设置。
+document.querySelector('.crumbs a[href="/specdev-workbench/"]')?.setAttribute('href', wsUrl('/specdev-workbench/'))
+document.querySelectorAll('[data-home-link]').forEach((link) => link.setAttribute('href', wsUrl('/specdev-workbench/')))
+// 站内其它裸地址入口（如首页进展示页的按钮）：写死 href 作无标识兜底，这里按本页标识补全。
+document.querySelectorAll('[data-ws-link]').forEach((link) => link.setAttribute('href', wsUrl(link.getAttribute('data-ws-link'))))
+
+export function setStatus(text, kind = 'info') {
+  const n = $('status')
+  if (!n) return
+  n.textContent = text
+  n.dataset.kind = kind
+}
+
+export function showError(message) {
+  setStatus('读取失败', 'bad')
+  const box = $('errorBox')
+  box.hidden = false
+  box.textContent = message
+}
+
+/** 链接里的工作区标识是空的：如实报错并停住，不发任何请求（不会悄悄落回手动模式）。 */
+export function renderEmptyWorkspaceParam() {
+  setStatus('链接不完整', 'warn')
+  const box = $('errorBox')
+  box.hidden = false
+  box.textContent = '链接里的工作区标识是空的（workspace= 后面没有编号）。请从 DSH 的工作区重新进入；手动复制链接时请复制完整编号。'
+}
+
+/** 把后端错误体上的 code 与 repo（工作区信息）挂到抛出的错误上，供状态页分支与显示。 */
+function withBody(error, body) {
+  if (body && body.code && !error.code) error.code = body.code
+  if (body && body.repo && !error.repo) error.repo = body.repo
+  return error
+}
+
+/** 统一取数：非 2xx 时抛出后端给出的中文错误（带 code 与 repo，供状态页分支与显示）；
+ *  repo 未配置交给调用方渲染指引。 */
+export async function fetchJson(url) {
+  let body
+  try {
+    const response = await fetch(url)
+    body = await response.json()
+    if (response.status === 400 && body.code === 'repo-not-configured') return body
+    if (!response.ok) throw withBody(new Error(body.error || `HTTP ${response.status}`), body)
+    return body
+  } catch (error) {
+    if (body && body.code === 'repo-not-configured') return body
+    throw withBody(error instanceof Error ? error : new Error(String(error)), body)
+  }
+}
+
+/** 带正文发 POST 取 JSON（证据清单走这里）：把第一次响应里的清单原文原样交给服务端解析。 */
+export async function postJson(url, text) {
+  let body
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+      body: text,
+    })
+    body = await response.json()
+    if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`)
+    return body
+  } catch (error) {
+    throw new Error(error.message || String(error))
+  }
+}
+
+/** 渲染"repoRoot 未配置"指引：插件正常加载、页面给可复制的配置示例。 */
+export function renderGuide(payload) {
+  setStatus('尚未配置业务项目目录', 'warn')
+  const box = $('guideBox')
+  box.hidden = false
+  box.textContent = ''
+  const h = document.createElement('h2')
+  h.textContent = '还没有指定业务项目目录（repoRoot）'
+  box.appendChild(h)
+  const p = document.createElement('p')
+  p.textContent = payload.error
+  box.appendChild(p)
+  const where = document.createElement('p')
+  where.innerHTML = `<b>配置文件位置：</b>`
+  where.appendChild(document.createTextNode(payload.guide.where))
+  box.appendChild(where)
+  const pre = document.createElement('pre')
+  pre.textContent = payload.guide.example
+  box.appendChild(pre)
+  const effect = document.createElement('p')
+  effect.textContent = payload.guide.takesEffect
+  box.appendChild(effect)
+}
+
+export function el(tag, className) {
+  const n = document.createElement(tag)
+  if (className) n.className = className
+  return n
+}
+
+// ── 状态汇总（首页业务卡小行与业务页汇总行共用）─────────────────────
+
+/** 汇总顺序与文案：要处理的靠前；"异常"涵盖编号冲突与说明文件问题。 */
+export const STATUS_SUMMARY_ORDER = [
+  ['changed', '已改动'],
+  ['invalid', '异常'],
+  ['compare-failed', '无法比较'],
+  ['no-snapshot', '无快照'],
+  ['identical', '一致'],
+]
+
+/** 图的状态归类：编号冲突 / 说明文件问题算"异常"，其余用服务端算好的四状态。 */
+export function chartStatusKind(chart) {
+  if (chart.idConflict || chart.descriptorError) return 'invalid'
+  return chart.currentStatus
+}
+
+/** 按状态清点图列表；只清点已知状态，未知值不伪造计数。 */
+export function countChartStatuses(charts) {
+  const counts = {}
+  for (const chart of charts) {
+    const kind = chartStatusKind(chart)
+    if (STATUS_SUMMARY_ORDER.some(([value]) => value === kind)) counts[kind] = (counts[kind] || 0) + 1
+  }
+  return counts
+}
+
+/** 只读状态小行：只列非零状态；没有可展示的状态返回 null（不放空行占位）。 */
+export function statusChips(charts) {
+  const counts = countChartStatuses(charts)
+  const present = STATUS_SUMMARY_ORDER.filter(([kind]) => counts[kind])
+  if (present.length === 0) return null
+  const row = el('div', 'chip-row')
+  for (const [kind, label] of present) {
+    const chip = el('span', 'badge')
+    chip.dataset.kind = kind
+    chip.textContent = `${label} ${counts[kind]}`
+    row.append(chip)
+  }
+  return row
+}
+
+/** 业务卡（首页与展示页列表视图共用）：图标、序号、名称、介绍、状态小行、
+ *  底部图数与进入动作。说明文件读不开的业务不清点，异常说明如实显示。 */
+export function businessCard(business, index) {
+  const card = el('a', 'card business-card')
+  card.href = wsUrl(`/specdev-workbench/business/${encodeURIComponent(business.id)}`)
+  const top = el('div', 'business-card-top')
+  const icon = el('span', 'business-icon')
+  icon.setAttribute('aria-hidden', 'true')
+  icon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/><path d="M10 6.5h5.5a2 2 0 0 1 2 2V14M6.5 10v5.5a2 2 0 0 0 2 2H14"/></svg>'
+  const number = el('span', 'business-number')
+  number.textContent = String(index + 1).padStart(2, '0')
+  top.append(icon, number)
+  const h = el('h3')
+  h.textContent = business.name
+  const p = el('p', 'business-intro')
+  p.textContent = business.intro || '进入业务，查看流程图与相关说明。'
+  card.append(top, h, p)
+  if (!business.descriptorError) {
+    const chips = statusChips(business.charts)
+    if (chips) card.append(chips)
+  }
+  const footer = el('div', 'business-card-footer')
+  const meta = el('span')
+  if (business.descriptorError) {
+    const warning = el('p', 'business-warning')
+    warning.textContent = `说明文件问题：${business.descriptorError}`
+    card.append(warning)
+    meta.textContent = '查看异常说明'
+  } else {
+    meta.textContent = `${business.charts.length} 张流程图`
+  }
+  const action = el('span', 'business-enter')
+  action.textContent = '进入业务 ↗'
+  footer.append(meta, action)
+  card.append(footer)
+  return card
+}
+
+/** 当前状态徽标文案（§3.2：一致 / 已改动 / 无快照 / 无法比较，服务端算好传下来）。 */
+export function statusBadge(status, title) {
+  const text = status === 'identical' ? '一致' : status === 'changed' ? '已改动'
+    : status === 'compare-failed' ? '无法比较' : '无快照'
+  const titleAttr = title ? ` title="${String(title).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')}"` : ''
+  return `<span class="badge" data-kind="${status}"${titleAttr}>${text}</span>`
+}
+
+// ── 第二期第 2 步：目录状态页与工作区行 ──────────────────────────────
+
+/** 各状态的标题与补充说明：四状态分别说清，不能都显示成"暂无流程图"。 */
+const REPO_STATE_COPY = {
+  'no-convention-root': {
+    title: '这里还没有流程图资料',
+    status: '还没有流程图资料',
+    note: '管理页只读不改：不会自动创建或修改这个目录里的任何文件。',
+  },
+  'bad-inventory': {
+    title: '流程图资料格式有问题',
+    status: '资料格式有问题',
+    note: '修好对应的说明文件后，刷新本页即可读取。',
+  },
+  'repo-unavailable': {
+    title: '目录读取不了',
+    status: '目录读取不了',
+    note: '工作区的目录可能被移动、删除或没有读取权限；从 DSH 的工作区重新进入试试。',
+  },
+  'not-a-git-repo': {
+    title: '这个目录不是 Git 仓库',
+    status: '不是 Git 仓库',
+    note: '历史版本与快照信息存放在 Git 里，目录需要是可用的 Git 仓库才能管理。',
+  },
+  'repo-not-top-level': {
+    title: '这个工作区不是 Git 仓库顶层',
+    status: '不是仓库顶层',
+    note: '目录在某个外层 Git 仓库里但不是仓库顶层，历史版本会与外层仓库混在一起；管理页只在仓库顶层工作，不会自动改绑。请把仓库顶层登记为工作区。',
+  },
+  'workspace-not-found': {
+    title: '工作区不存在或已失效',
+    status: '工作区已失效',
+    note: '可能该工作区已被删除，或这个链接来自另一个 DSH 实例；请从 DSH 的工作区重新进入。',
+  },
+  'workspace-service-unavailable': {
+    title: '当前 DSH 没有提供工作区服务',
+    status: '工作区服务不可用',
+    note: '可能是 DSH 版本变化。请从 DSH 的工作区重新进入；或改用手动配置模式（填 repoRoot，去掉链接里的 workspace 参数）。',
+  },
+}
+
+/** 工作区信息一行字：工作区模式"工作区：名称（路径）"，手动模式"手动配置模式：路径"。 */
+export function repoLineText(repo) {
+  if (!repo) return ''
+  return repo.mode === 'workspace'
+    ? `工作区：${repo.title}（${repo.path}）`
+    : `手动配置模式：${repo.path}`
+}
+
+/**
+ * 按 error.code 渲染目录状态页（复用指引框的样式）；不属于已知状态的错误返回 false，
+ * 调用方继续走普通报错。三个页面共用，保证同一状态在各页说法一致。
+ * 错误响应带 repo 块：空状态/错误页也显示工作区名称、
+ * 路径，并把标签标题带上工作区名——打开两个空项目时也能区分标签页。
+ */
+export function renderRepoState(error) {
+  const copy = REPO_STATE_COPY[error && error.code]
+  if (!copy) return false
+  setStatus(copy.status, 'warn')
+  const box = $('guideBox')
+  box.hidden = false
+  box.textContent = ''
+  const h = document.createElement('h2')
+  h.textContent = copy.title
+  box.appendChild(h)
+  if (error.repo) {
+    document.title = pageTitle(copy.title, error.repo)
+    const w = document.createElement('p')
+    w.textContent = repoLineText(error.repo)
+    box.appendChild(w)
+  }
+  if (error.message) {
+    const p = document.createElement('p')
+    p.textContent = error.message
+    box.appendChild(p)
+  }
+  const note = document.createElement('p')
+  note.textContent = copy.note
+  box.appendChild(note)
+  return true
+}
+
+/** 标签页标题：工作区模式带工作区名（两个标签好区分），手动模式保持原有后缀。 */
+export function pageTitle(main, repo) {
+  return repo && repo.mode === 'workspace' ? `${main} · ${repo.title}` : `${main} · SpecDev 工作台`
+}
+
+/** 头部工作区行：工作区模式显示"工作区：名称（路径）"，手动模式标注"手动配置模式：路径"。 */
+export function renderRepoLine(repo) {
+  const line = $('repoLine')
+  if (!line || !repo) return
+  line.textContent = repoLineText(repo)
+  const details = $('workspaceDetails')
+  if (details) {
+    details.hidden = false
+    $('workspaceLabel').textContent = repo.mode === 'workspace' ? `工作区 · ${repo.title}` : '手动配置的项目目录'
+  }
+}