@pioneer_zmc/dsh-workbench 0.2.1

package/web/assets/workspaces.css

@@ -0,0 +1,21 @@
+/* 独立项目选择页：共用主题色，样式仅限本页；内容自然换行和滚动。 */
+.workspaces-page { background: var(--page); }
+.workspaces-page .workspaces-main { max-width: 860px; margin: 40px auto; padding: 0 24px 40px; }
+.workspaces-page h1 { margin: 0 0 8px; font-size: 28px; }
+.workspaces-page .workspaces-intro { color: var(--secondary); margin: 0 0 24px; }
+.workspaces-page .workspace-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
+.workspaces-page .workspace-project {
+  display: block; min-width: 0; padding: 16px 20px;
+  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+  white-space: normal; overflow-wrap: anywhere;
+}
+.workspaces-page .workspace-project:hover { background: var(--hover); border-color: var(--accent); text-decoration: none; }
+.workspaces-page .workspace-project:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.workspaces-page .workspace-title { display: block; font-size: 17px; font-weight: 600; }
+.workspaces-page .workspace-path { display: block; margin-top: 6px; color: var(--secondary); overflow-wrap: anywhere; white-space: pre-wrap; }
+.workspaces-page #workspaceStatus { color: var(--muted); }
+.workspaces-page #workspaceFallback { margin-top: 20px; font-size: 13px; }
+@media (max-width: 480px) {
+  .workspaces-page .workspaces-main { margin-top: 24px; padding: 0 16px 24px; }
+  .workspaces-page .workspace-project { padding: 14px; }
+}

package/web/assets/workspaces.js

@@ -0,0 +1,81 @@
+// 只读宿主工作区；选择由作者完成，不猜当前项目或默认第一项。
+;(() => {
+  const list = document.getElementById('workspaceList')
+  const status = document.getElementById('workspaceStatus')
+  const error = document.getElementById('workspaceError')
+  const empty = document.getElementById('workspaceEmpty')
+  const retry = document.getElementById('workspaceRetry')
+  const fallback = document.getElementById('workspaceFallback')
+  let pending = false
+  let gone = false
+  let serial = 0
+  let controller = null
+
+  function entries(body) {
+    if (!body || !Array.isArray(body.workspaces)) throw new Error('项目清单格式不正确，请重试。')
+    const ids = new Set()
+    for (const item of body.workspaces) {
+      if (!item || typeof item.id !== 'string' || !item.id.trim()
+        || typeof item.title !== 'string' || !item.title.trim() || typeof item.path !== 'string'
+        || ids.has(item.id)) throw new Error('项目条目格式不正确，请重试。')
+      ids.add(item.id)
+    }
+    return body.workspaces
+  }
+  async function load() {
+    if (pending || gone) return
+    pending = true
+    const current = ++serial
+    controller = new AbortController()
+    const late = () => gone || current !== serial
+    list.replaceChildren()
+    list.setAttribute('aria-busy', 'true')
+    error.hidden = empty.hidden = retry.hidden = fallback.hidden = true
+    retry.disabled = true
+    status.textContent = '正在读取项目清单…'
+    try {
+      const response = await fetch('/specdev-workbench/api/workspaces', { signal: controller.signal })
+      if (late()) return
+      if (!response.ok) throw new Error(`项目清单读取失败（HTTP ${response.status}），请重试。`)
+      const body = await response.json()
+      if (late()) return
+      const projects = entries(body)
+      const fragment = document.createDocumentFragment()
+      for (const project of projects) {
+        const item = document.createElement('li')
+        const link = document.createElement('a')
+        link.className = 'workspace-project'
+        link.href = '/specdev-workbench/?workspace=' + encodeURIComponent(project.id)
+        const name = document.createElement('span')
+        name.className = 'workspace-title'; name.textContent = project.title
+        const location = document.createElement('span')
+        location.className = 'workspace-path'; location.textContent = project.path
+        link.append(name, location); item.append(link); fragment.append(item)
+      }
+      list.replaceChildren(fragment)
+      status.textContent = projects.length ? `共 ${projects.length} 个项目，请选择。` : '暂无项目'
+      empty.hidden = fallback.hidden = projects.length !== 0
+    } catch (reason) {
+      if (late()) return
+      list.replaceChildren()
+      status.textContent = '项目清单读取失败'
+      error.textContent = reason instanceof SyntaxError ? '项目清单不是有效 JSON，请重试。' : String(reason?.message ?? reason)
+      error.hidden = retry.hidden = fallback.hidden = false
+    } finally {
+      if (!late()) {
+        pending = false; controller = null
+        list.setAttribute('aria-busy', 'false')
+        retry.disabled = false
+      }
+    }
+  }
+  retry.addEventListener('click', load)
+  window.addEventListener('pagehide', () => {
+    gone = true; serial += 1; pending = false
+    controller?.abort(); controller = null
+  })
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) { gone = false; void load() }
+  })
+  void load()
+})()

package/web/building.html

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>建筑总览 · SpecDev 工作台</title>
+<script src="/specdev-workbench/assets/theme.js"></script>
+<link rel="stylesheet" href="/specdev-workbench/assets/style.css">
+<!-- Three.js 副本随包发布（web/assets/three/，来源与版本见其 VERSION.md）：
+     裸名 'three' 与官方 addon 路径都在这里映射，页面脚本与场景模块共用。 -->
+<script type="importmap">
+{
+  "imports": {
+    "three": "/specdev-workbench/assets/three/three.module.js",
+    "three/addons/controls/OrbitControls.js": "/specdev-workbench/assets/three/OrbitControls.js"
+  }
+}
+</script>
+</head>
+<body class="building-page">
+<a class="skip-link" href="#main">跳到主要内容</a>
+<header class="app-bar">
+  <a class="brand" data-home-link href="/specdev-workbench/" aria-label="SpecDev 项目首页"><span class="brand-mark" aria-hidden="true">S<span></span></span><span>SpecDev<span class="brand-caption">工作台</span></span></a>
+  <div class="theme-switch" role="group" aria-label="页面主题"><button type="button" data-theme-choice="light" aria-pressed="false"><span aria-hidden="true">☼</span> 浅色</button><button type="button" data-theme-choice="dark" aria-pressed="true"><span aria-hidden="true">☾</span> 深色</button></div>
+</header>
+<div class="page-content">
+<header class="top">
+  <div>
+    <p class="crumbs"><a href="/specdev-workbench/">项目首页</a> / <span>建筑总览</span></p>
+    <h1 id="title">建筑总览</h1>
+    <p class="sub" id="intro">按建筑蓝图把项目看成一栋房子：楼层、业务房间与资料入口。</p>
+    <!-- 工作区行与三页同款：默认收起，展开见全路径（common.js renderRepoLine 填充）。 -->
+    <details class="workspace-details" id="workspaceDetails" hidden><summary id="workspaceLabel">工作区</summary><p id="repoLine"></p></details>
+  </div>
+  <p id="status" class="status" data-kind="info">正在读取建筑蓝图…</p>
+</header>
+<p id="errorBox" class="error" role="alert" hidden></p>
+<section id="guideBox" class="guide" hidden></section>
+<!-- 核对或几何有问题：列出诊断（error 阻止生成，warning 只是提示），不建三维场景。 -->
+<section id="diagnosticsPanel" class="diagnostics-panel" hidden aria-labelledby="diagnosticsHeading">
+  <h2 id="diagnosticsHeading">蓝图需要调整，暂不能生成建筑</h2>
+  <p class="diagnostics-note">修好下面的问题后刷新本页即可；管理页只读，不会自动改蓝图或清单。</p>
+  <ol id="problemList" class="problem-list"></ol>
+</section>
+<!-- 三维视图＋房间目录：几何全部由服务端算好（model/present），页面只负责呈现。
+     建筑生成成功后整页切到"全窗口"形态（body.building-live，由 building.js 加上）：
+     三维视图占满窗口，右侧目录改成浮在视口上的抽屉，可随手收起让视图全宽。 -->
+<section id="buildingStage" class="building-layout" hidden>
+  <div id="viewport" class="building-viewport" aria-label="三维建筑视图，拖动环绕，滚轮缩放">
+    <div class="view-toolbar" role="group" aria-label="浏览方式">
+      <div class="toolbar-group">
+        <label class="toolbar-field" for="floor">楼层剖看</label>
+        <select id="floor" class="floor-select"><option value="all">全部楼层</option></select>
+        <label class="preview-toggle" for="preview"><input id="preview" type="checkbox"><span>完整外观预览<small>仅预览造型，不代表实现</small></span></label>
+        <button id="walkToggle" class="walk-button" type="button" aria-pressed="false">进入探索</button>
+        <button id="resetView" class="reset-button" type="button">回到总览</button>
+        <!-- 操作提示跟控制放在同一行：这样它永远不与底部横幅、方向按钮区争地方，
+             窄屏换行时也只是把操作行抬高一点（抽屉与卡片按同一行高让位）。 -->
+        <p id="sceneHint" class="scene-hint">拖动环绕 · 滚轮缩放 · 点目录定位房间</p>
+      </div>
+      <!-- 资料目录的开关：目录浮在视口右侧，收起后三维视图占满整页；状态由 building.js 管
+           （作者的选择记在本机，进探索时临时收起、退出后收回他的选择）。 -->
+      <button id="directoryToggle" class="panel-toggle" type="button" aria-expanded="true" aria-controls="directory">收起目录</button>
+    </div>
+    <p id="previewBanner" class="preview-banner" hidden>完整外观预览 · 不代表代码已实现或已验收</p>
+    <!-- 进不去探索时的说明（入口站不住、没有行走面）：留在视口里，不被状态行的换版口径冲掉。 -->
+    <p id="walkNotice" class="walk-notice" role="status" hidden></p>
+    <!-- 探索模式：所在位置＋方向按钮（键盘 WASD／方向键、Shift 加速同样可用；按钮按住即走）。 -->
+    <div id="walkHud" class="walk-hud" hidden>
+      <p id="walkLocation" class="walk-location"></p>
+      <div class="walk-pad" role="group" aria-label="漫游方向按钮">
+        <button type="button" data-walk-key="ArrowUp" aria-label="前进">↑</button>
+        <button type="button" data-walk-key="ArrowLeft" aria-label="向左">←</button>
+        <button type="button" data-walk-key="ArrowDown" aria-label="后退">↓</button>
+        <button type="button" data-walk-key="ArrowRight" aria-label="向右">→</button>
+      </div>
+    </div>
+    <div id="sceneFallback" class="scene-fallback" hidden>
+      <strong>三维视图不可用</strong>
+      <p id="sceneFallbackReason"></p>
+      <p>房间目录与资料入口不受影响，仍可使用。</p>
+    </div>
+    <!-- 房内打开资料：业务门牌／房间目录给该业务的介绍与资料清单，项目牌给项目介绍。
+         文档正文在面板里读；流程图用现有阅读页（iframe，带同一个工作区参数）。
+         打开时暂停漫游输入，关闭后位置与视角原样——读完留在原地接着逛。 -->
+    <section id="materialPanel" class="material-panel" role="dialog" aria-modal="false" aria-labelledby="materialTitle" hidden>
+      <div class="material-head">
+        <div class="material-heading">
+          <p class="material-kind" id="materialKind">业务资料</p>
+          <h2 id="materialTitle">…</h2>
+        </div>
+        <button id="materialClose" class="material-close" type="button" aria-label="关闭资料面板">×</button>
+      </div>
+      <div class="material-body">
+        <div class="material-side">
+          <p id="materialIntro" class="material-intro" hidden></p>
+          <p id="materialListLabel" class="material-list-label" hidden>资料清单 <span id="materialCount"></span></p>
+          <ul id="materialList" class="material-list" hidden></ul>
+          <p id="materialEmpty" class="material-empty" hidden></p>
+        </div>
+        <div class="material-reader">
+          <p id="materialReaderHint" class="material-reader-hint">在左边挑一份资料，正文与流程图都在这里读。</p>
+          <p id="materialReaderTitle" class="material-reader-title" hidden></p>
+          <p id="materialReaderStatus" class="material-reader-status" role="alert" hidden></p>
+          <div id="materialReaderBody" class="material-reader-body" hidden></div>
+          <iframe id="materialReaderFrame" class="material-reader-frame" title="流程图阅读" hidden></iframe>
+        </div>
+      </div>
+    </section>
+  </div>
+  <aside id="directory" class="building-directory" aria-label="项目与房间目录">
+    <div class="project-block">
+      <p class="eyebrow"><span class="eyebrow-line"></span> 当前项目</p>
+      <h2 id="projectName">…</h2>
+      <p id="projectDesc" class="project-description"></p>
+      <p id="metrics" class="metrics" aria-label="建筑信息"></p>
+    </div>
+    <div id="phaseCard" class="phase-card"><span class="status-dot" aria-hidden="true"></span><div><strong id="phaseLabel">…</strong><p id="phaseNote"></p></div></div>
+    <section id="notices" class="notices" hidden aria-label="生成提示">
+      <details><summary>生成提示 <span id="noticeCount"></span></summary><ul id="noticeList"></ul></details>
+    </section>
+    <div class="section-label">房间目录 <span>点击定位 · 资料链接到阅读入口</span></div>
+    <!-- tabindex="-1"：关掉资料面板时若原来的触发按钮已经不在了（换蓝图会重建目录），
+         焦点落到这块目录容器上，不丢在没有落点的地方。 -->
+    <div id="rooms" class="rooms" tabindex="-1"></div>
+  </aside>
+</section>
+</div>
+<script type="module" src="/specdev-workbench/assets/building.js"></script>
+</body>
+</html>

package/web/business.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>业务 · SpecDev 工作台</title>
+<script src="/specdev-workbench/assets/theme.js"></script>
+<link rel="stylesheet" href="/specdev-workbench/assets/style.css">
+</head>
+<body class="business-page">
+<header class="app-bar">
+  <a class="brand" data-home-link href="/specdev-workbench/" aria-label="SpecDev 项目首页"><span class="brand-mark" aria-hidden="true">S<span></span></span><span>SpecDev<span class="brand-caption">工作台</span></span></a>
+  <div class="theme-switch" role="group" aria-label="页面主题"><button type="button" data-theme-choice="light" aria-pressed="false"><span aria-hidden="true">☼</span> 浅色</button><button type="button" data-theme-choice="dark" aria-pressed="true"><span aria-hidden="true">☾</span> 深色</button></div>
+</header>
+<div class="page-content">
+<header class="top">
+  <div>
+    <p class="crumbs"><a href="/specdev-workbench/">项目首页</a> / <span id="bizName">…</span></p>
+    <h1 id="title">业务</h1>
+    <p class="sub" id="intro"></p>
+    <!-- P1b-2：独立业务房间入口。初始隐藏；business.js 读到当前业务且说明文件有效后才显示。
+         不为它预读房间接口：没有 room.json 时由房间页给出明确空态。
+         E9b：同一行增加「家具图鉴」入口（随业务有效显示，同样不预读房间接口）；
+         新标签打开并保留本页，workspace 由 common.js 经 data-ws-link 补全。 -->
+    <p class="room-entry-line" id="roomEntryLine" hidden><a id="roomEntry" class="room-entry-link" href="/specdev-workbench/room">进入房间 ↗</a> <a id="furnitureEntry" class="room-entry-link" data-ws-link="/specdev-workbench/furniture" href="/specdev-workbench/furniture" target="_blank" rel="noopener">家具图鉴 ↗</a></p>
+    <!-- 第二期第 2 步：工作区模式显示"工作区：名称（路径）"，手动配置模式注明（由 business.js 填充）。
+         长路径不再直接铺开行内断词，与首页一样折进可展开块（common.js renderRepoLine 填充）。 -->
+    <details class="workspace-details" id="workspaceDetails" hidden><summary id="workspaceLabel">工作区</summary><p id="repoLine"></p></details>
+  </div>
+  <p id="status" class="status" data-kind="info">正在读取业务…</p>
+</header>
+<p id="errorBox" class="error" hidden></p>
+<div id="chartSummary" class="chart-summary chip-row" hidden></div>
+<section id="guideBox" class="guide" hidden></section>
+<section id="docs" class="panel" hidden>
+  <h2>业务文档</h2>
+  <ul id="docList" class="doc-list"></ul>
+</section>
+<main id="root" class="cards"></main>
+</div>
+<script type="module" src="/specdev-workbench/assets/business.js"></script>
+</body>
+</html>

package/web/furniture.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>家具图鉴 · SpecDev 工作台</title>
+<script src="/specdev-workbench/assets/theme.js"></script>
+<link rel="stylesheet" href="/specdev-workbench/assets/style.css">
+<!-- 图鉴页独立样式：只作用于 .furniture-page，复用全局主题变量，不改业务/房间页。 -->
+<link rel="stylesheet" href="/specdev-workbench/assets/furniture-page.css">
+</head>
+<body class="furniture-page">
+<header class="app-bar">
+  <a class="brand" data-home-link href="/specdev-workbench/" aria-label="SpecDev 项目首页"><span class="brand-mark" aria-hidden="true">S<span></span></span><span>SpecDev<span class="brand-caption">工作台</span></span></a>
+  <div class="theme-switch" role="group" aria-label="页面主题"><button type="button" data-theme-choice="light" aria-pressed="false"><span aria-hidden="true">☼</span> 浅色</button><button type="button" data-theme-choice="dark" aria-pressed="true"><span aria-hidden="true">☾</span> 深色</button></div>
+</header>
+<div class="page-content">
+<header class="top">
+  <div>
+    <p class="crumbs"><a href="/specdev-workbench/">项目首页</a> / <span>家具图鉴</span></p>
+    <h1 id="title">家具图鉴</h1>
+    <!-- E9b：随包共用家具库的看图挑选页。不按业务过滤，也从这里推断不出任何业务。 -->
+    <p class="sub">本插件随包的全部家具都在这里：看图挑选喜欢的款式，复制清单回聊天，AI 按你的选择布置房间。各款风格只是搭配建议，可以混搭。</p>
+    <details class="workspace-details" id="workspaceDetails" hidden><summary id="workspaceLabel">工作区</summary><p id="repoLine"></p></details>
+  </div>
+  <p id="status" class="status" data-kind="info">正在加载家具目录…</p>
+</header>
+<p id="errorBox" class="error" role="alert" hidden></p>
+<section id="guideBox" class="guide" hidden></section>
+<!-- 选择工具条：勾选卡片上的复选框后来这里复制清单；未选择时按钮禁用。 -->
+<section id="picker" class="picker-bar" hidden aria-label="选择与复制">
+  <p id="pickCount">已选 0 款</p>
+  <button id="copyButton" type="button" disabled>复制给 AI</button>
+  <button id="clearButton" type="button" disabled>清空选择</button>
+</section>
+<div id="pickListBox" class="pick-list-box" hidden>
+  <label class="pick-list-label" for="pickList">复制后粘贴到聊天发给 AI：</label>
+  <!-- 只读文本框：始终可手动全选复制，内容随勾选即时同步；未勾选时以占位文字提示（不虚构默认选择）。 -->
+  <textarea id="pickList" readonly rows="4" spellcheck="false" placeholder="勾选上方家具后，这里会出现可复制的挑选清单。"></textarea>
+  <p id="copyNote" class="copy-note" role="status" aria-live="polite" hidden></p>
+</div>
+<!-- 目录卡片按 index.json 分类动态填充（furniture-page.js）；空态与错误态也渲染在这里。 -->
+<main id="catalog" class="furniture-cards"></main>
+</div>
+<script type="module" src="/specdev-workbench/assets/furniture-page.js"></script>
+</body>
+</html>

package/web/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>项目首页 · SpecDev 工作台</title>
+<script src="/specdev-workbench/assets/theme.js"></script>
+<link rel="stylesheet" href="/specdev-workbench/assets/style.css">
+</head>
+<body class="home-page">
+<a class="skip-link" href="#main">跳到主要内容</a>
+<header class="app-bar">
+  <a class="brand" data-home-link href="/specdev-workbench/" aria-label="SpecDev 项目首页"><span class="brand-mark" aria-hidden="true">S<span></span></span><span>SpecDev<span class="brand-caption">工作台</span></span></a>
+  <div class="theme-switch" role="group" aria-label="页面主题">
+    <button type="button" data-theme-choice="light" aria-pressed="false"><span aria-hidden="true">☼</span> 浅色</button>
+    <button type="button" data-theme-choice="dark" aria-pressed="true"><span aria-hidden="true">☾</span> 深色</button>
+  </div>
+</header>
+<main id="main" class="home-main">
+  <section class="project-hero" aria-labelledby="projectName">
+    <div class="hero-copy">
+      <p class="eyebrow"><span class="eyebrow-line"></span> 项目总览</p>
+      <h1 id="projectName">你的业务，<br>在这里清晰展开。</h1>
+      <p id="projectDesc" class="hero-description">从业务出发，阅读流程、理解实现，回看每一个版本。</p>
+      <div class="hero-actions" id="heroActions" hidden><a id="buildingLink" class="primary-link primary-link-lead" data-ws-link="/specdev-workbench/building" hidden>走进建筑 <span aria-hidden="true">↗</span></a><a href="#businesses" class="secondary-link">浏览业务</a><span class="hero-hint">从一张图，进入项目</span></div>
+      <details class="workspace-details" id="workspaceDetails" hidden><summary id="workspaceLabel">当前工作区</summary><p id="repoLine"></p></details>
+    </div>
+    <div class="hero-art" aria-hidden="true">
+      <div class="art-grid"></div>
+      <svg viewBox="0 0 480 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs><linearGradient id="flowLine" x1="40" y1="0" x2="440" y2="340" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity=".15"/><stop offset=".5" stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity=".2"/></linearGradient></defs>
+        <g class="art-path" stroke="url(#flowLine)" stroke-width="1.5"><path d="M56 168H126Q144 168 144 150V98Q144 80 162 80H234"/><path d="M56 168H218"/><path d="M56 168H126Q144 168 144 186V252Q144 270 162 270H296"/><path d="M280 168H332Q350 168 350 150V98Q350 80 368 80H426"/><path d="M280 168H332Q350 168 350 186V252Q350 270 368 270H426"/><path d="M276 80H426"/></g>
+        <g class="art-ghost"><rect x="8" y="140" width="80" height="56" rx="14"/><rect x="234" y="57" width="58" height="46" rx="12"/><rect x="272" y="247" width="58" height="46" rx="12"/><rect x="408" y="65" width="30" height="30" rx="9"/><rect x="408" y="255" width="30" height="30" rx="9"/></g>
+        <rect class="art-node-halo" x="204" y="120" width="96" height="96" rx="27" transform="rotate(-8 252 168)"/>
+        <rect class="art-node" x="211" y="127" width="82" height="82" rx="22"/>
+        <g class="art-symbol" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="234" y="150" width="11" height="11" rx="3"/><rect x="259" y="175" width="11" height="11" rx="3"/><path d="M245 155H260Q264 155 264 159V175M239 161V177Q239 181 243 181H259"/></g>
+        <g class="art-dot" fill="currentColor"><circle cx="144" cy="168" r="4"/><circle cx="350" cy="168" r="4"/><circle cx="263" cy="80" r="3"/><circle cx="48" cy="168" r="3"/><circle cx="301" cy="270" r="3"/></g>
+      </svg>
+      <span class="art-caption">连接业务与实现</span>
+    </div>
+  </section>
+  <section id="projectMetrics" class="project-metrics" aria-label="项目概况" hidden>
+    <div><span class="metric-label">业务领域</span><strong id="businessCount">—</strong><span class="metric-unit">个业务入口</span></div>
+    <div><span class="metric-label">流程图</span><strong id="chartCount">—</strong><span class="metric-unit" id="chartCountNote">张登记的图</span></div>
+    <div class="metric-note"><span class="metric-label">阅读路径</span><p>业务 <span>→</span> 流程 <span>→</span> 实现</p><span class="metric-unit">让项目上下文有迹可循</span></div>
+  </section>
+  <section id="businesses" class="business-section" aria-labelledby="businessHeading">
+    <div class="section-heading"><div><p class="eyebrow">探索项目</p><h2 id="businessHeading">业务入口</h2></div><div class="heading-side"><a id="showcaseLink" class="showcase-link" href="/specdev-workbench/showcase" data-ws-link="/specdev-workbench/showcase" hidden>业务展示 ↗</a><p id="status" class="status" data-kind="info" role="status">正在读取项目清单…</p></div></div>
+    <p id="errorBox" class="error" role="alert" hidden></p>
+    <section id="guideBox" class="guide" hidden></section>
+    <div id="root" class="cards home-cards" aria-busy="true"><p class="loading-copy">正在整理业务入口…</p></div>
+  </section>
+  <footer class="home-footer"><span>SpecDev · 让业务逻辑清晰可读</span><span>业务 / 流程 / 版本</span></footer>
+</main>
+<script type="module" src="/specdev-workbench/assets/home.js"></script>
+</body>
+</html>

package/web/read.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>图阅读 · SpecDev 工作台</title>
+<script src="/specdev-workbench/assets/theme.js"></script>
+<link rel="stylesheet" href="/specdev-workbench/assets/style.css">
+<!-- 把渲染器用到的 node: 内置模块映射到随包替身（vendor/archify-renderer/stubs/）。
+     编译路径不该真调用它们；一旦被调用，替身抛错暴露。 -->
+<script type="importmap">
+{
+  "imports": {
+    "node:fs": "/specdev-workbench/vendor/stubs/fs.mjs",
+    "node:path": "/specdev-workbench/vendor/stubs/path.mjs",
+    "node:url": "/specdev-workbench/vendor/stubs/url.mjs",
+    "node:crypto": "/specdev-workbench/vendor/stubs/crypto.mjs",
+    "node:http": "/specdev-workbench/vendor/stubs/http.mjs",
+    "node:https": "/specdev-workbench/vendor/stubs/https.mjs",
+    "node:net": "/specdev-workbench/vendor/stubs/net.mjs",
+    "node:dns/promises": "/specdev-workbench/vendor/stubs/dns-promises.mjs",
+    "node:child_process": "/specdev-workbench/vendor/stubs/child_process.mjs"
+  }
+}
+</script>
+</head>
+<body class="read-page">
+<header class="app-bar">
+  <a class="brand" data-home-link href="/specdev-workbench/" aria-label="SpecDev 项目首页"><span class="brand-mark" aria-hidden="true">S<span></span></span><span>SpecDev<span class="brand-caption">工作台</span></span></a>
+  <div class="theme-switch" role="group" aria-label="页面主题"><button type="button" data-theme-choice="light" aria-pressed="false"><span aria-hidden="true">☼</span> 浅色</button><button type="button" data-theme-choice="dark" aria-pressed="true"><span aria-hidden="true">☾</span> 深色</button></div>
+</header>
+<div class="page-content">
+<header class="top">
+  <div>
+    <p class="crumbs"><a href="/specdev-workbench/">项目首页</a> / <a id="bizLink" href="/specdev-workbench/">业务</a> / <span id="chartName">…</span></p>
+    <h1 id="title">图阅读</h1>
+    <p class="sub" id="summary"></p>
+    <!-- 第二期第 2 步：工作区模式显示"工作区：名称（路径）"，手动配置模式注明（由 read.js 填充）。
+         长路径不再直接铺开行内断词，与首页一样折进可展开块（common.js renderRepoLine 填充）。 -->
+    <details class="workspace-details" id="workspaceDetails" hidden><summary id="workspaceLabel">工作区</summary><p id="repoLine"></p></details>
+  </div>
+  <p id="status" class="status" data-kind="info">正在读取图…</p>
+</header>
+<p id="errorBox" class="error" hidden></p>
+<section id="guideBox" class="guide" hidden></section>
+<nav id="versions" class="versions"></nav>
+<!-- 正看"当前（工作区）"时的登记信息行：看历史快照时这里说明图名与摘要的来处；由 read.js 填充。 -->
+<p id="snapshotMeta" class="muted" hidden></p>
+<!-- 「已选」状态条（E·选中同步＋F·节点详情阅读）：显示图里当前被原生选中的步骤，
+     并给一个「查看详情」入口；没有选中时整条隐藏，接不上增强阅读时在这里说明一句。 -->
+<p id="selectionBar" class="selection-bar" hidden>
+  <span id="selectionText"></span>
+  <button id="detailOpen" class="detail-open" type="button" hidden>查看详情</button>
+</p>
+<div class="reader-tools"><span class="muted">双击节点查看详情，也可选中后点击“查看详情”</span><button id="materialsOpen" type="button" disabled>全部阅读资料</button></div>
+<!-- 现场渲染挂载点：原生装配出的整页装在 iframe（独立小房间）里，样式自带。 -->
+<main id="stage" class="chart-stage"></main>
+</div>
+<!-- 节点详情弹层（F）：读某个步骤在当前所选版本里的说明正文。
+     关闭三方式：右上按钮 / ESC / 点框外空白；弹层不碰图，关闭后图的缩放与位置原样。 -->
+<dialog id="detailDialog" class="detail-dialog" aria-label="节点详情与源码对照">
+  <div class="detail-dialog-head">
+    <span>节点详情</span>
+    <button autofocus id="detailClose" class="detail-close" type="button" aria-label="关闭详情">×</button>
+  </div>
+  <div id="detailContent" class="detail-dialog-body"></div>
+  <p id="detailSource" class="detail-source"></p>
+</dialog>
+<!-- 原底部资料移入按需打开的弹层，保留未配对资料与图渲染失败时的阅读入口。 -->
+<dialog id="materialsDialog" class="detail-dialog materials-dialog" aria-label="全部阅读资料">
+  <div class="detail-dialog-head"><span>全部阅读资料 · 当前所选版本</span><button autofocus id="materialsClose" class="detail-close" type="button" aria-label="关闭阅读资料">×</button></div>
+  <div class="detail-dialog-body"><section id="detailsPanel" class="details-panel"></section><section id="evidencePanel" class="evidence-panel"><p>正在读取源码证据…</p></section></div>
+</dialog>
+<script type="module" src="/specdev-workbench/assets/read.js"></script>
+<!-- 保存版本弹层（G）：给"当前（工作区）"这一份内容登记一个带名称/阶段/说明的版本。
+     关闭三方式与节点详情弹层一致：右上按钮 / ESC / 点框外空白。
+     打开时先问一次"现在能不能存"，并把服务端的内容摘要与页面正看的那一份对一下——
+     页面旧了就提示刷新并禁用保存，绝不把没确认过的内容存下来。 -->
+<dialog id="saveDialog" class="save-dialog">
+  <div class="detail-dialog-head">
+    <span>保存版本</span>
+    <button id="saveClose" class="detail-close" type="button" aria-label="关闭保存">×</button>
+  </div>
+  <div class="save-dialog-body">
+    <p id="saveCheck" class="save-check"></p>
+    <label class="save-field">
+      <span class="save-label">版本名称</span>
+      <input id="saveName" type="text" maxlength="200" autocomplete="off" placeholder="例如：首版设计">
+    </label>
+    <fieldset class="save-field save-stages">
+      <legend class="save-label">阶段</legend>
+      <label><input type="radio" name="saveStage" value="design" checked> 设计版</label>
+      <label><input type="radio" name="saveStage" value="implemented"> 实现版</label>
+    </fieldset>
+    <label class="save-field">
+      <span class="save-label">保存说明（可以不填）</span>
+      <textarea id="saveNote" rows="3" maxlength="1000" placeholder="这一版存下来是为了什么，或者和别人约定了什么"></textarea>
+    </label>
+    <p id="saveError" class="save-error" hidden></p>
+    <div class="save-actions">
+      <button id="saveSubmit" class="save-submit" type="button" disabled>保存</button>
+      <button id="saveCancel" class="save-cancel" type="button">取消</button>
+    </div>
+  </div>
+</dialog>
+</body>
+</html>