# DSH 真实结构对照表（插件实现前必读）

> 目的：把原型上的每个视觉元素，落到 DSH **真实的** DOM / 插槽 / 选择器上，避免「照着原型写、结果把宿主搞崩」。
> 证据来源：`tools/out/dsh-dom.txt`（用 CDP 打开一个隔离探针实例抓的真实 DOM）、`tools/out/dsh-dom.json`（机器可读）、各 UI 包的 `lib/client.js`（插槽名）。
> 探针实例：`DSH_HOME=/tmp/dsh-probe dsh web --port 3180`（**不碰你的 `~/.dsh`**），dsh `0.2.0-rc.2`，stock profile。

---

## 1. 三条硬结论（先看这个）

1. **DSH 的布局是三列，不是「顶栏 + 内容」**：`sidebarCol / centerCol / rightbarCol`，外加 `overlayLayer` 和 `handle`（拖拽把手）。原型里那条全宽顶栏**在真实结构里没有对应层**，硬插会挤压右侧栏与拖拽把手 → **改走 `shell.leading` 插槽 + 侧栏 brand 区**。
2. **DSH 的空态不是空的**：它有自己的 hero —— 鱼形标 + 标题「探索未至之境」+「预览版」徽标 + 工作区选择器 + 模式选择器（标准模式）+ 输入框。原型为了贴 Antigravity 把它删了，**实现时必须保留并重新配色**，否则等于删功能。
3. **选择器优先级**：`[data-slot="…"]` > `[data-*]` 状态属性 > 语义类名子串（`[class*="_newSession"]`）> ❌ 不要用带哈希前缀的全名（`hHd-Xa_root`）。

---

## 2. 真实 DOM 骨架（实测）

```
<div data-slot="root">
  <div class="pI_x6G_frame" data-rightbar-collapsed="true">          ← 三列容器
    <div class="pI_x6G_sidebarCol">
      <div data-slot="sidebar">
        <div class="hHd-Xa_root hHd-Xa_quietBars">
          <div class="hHd-Xa_logoRow" data-window-drag>
            <button class="hHd-Xa_brand hHd-Xa_wide" aria-label="新建会话">
              <span class="hHd-Xa_brandMark">  → [data-slot="sidebar.brand.mark"]
              <span class="hHd-Xa_brandName">  → [data-slot="sidebar.brand.name"]
            <button class="hHd-Xa_iconButton hHd-Xa_toggle" aria-label="收起侧边栏">
          <button class="hHd-Xa_newSession" aria-label="新建会话">
            …「新会话」 + <span class="_keys_38b9q_1"> ⌥ ⌘ N
          <nav class="hHd-Xa_panelList" aria-label="全局面板">
            <button class="hHd-Xa_panelRow" aria-label="插件"> → [data-slot="sidebar.panellist"]
          <div class="hHd-Xa_regionArea">
            <div data-slot="sidebar.workspaces">
              <div class="bhn1Oq_root">
                <div class="bhn1Oq_sectionHeader">    ← 「工作区」+ 搜索 + 视图选项 + 添加
                <div class="bhn1Oq_listArea">
                  <div class="bhn1Oq_list" role="tree" aria-label="会话">
                    <div class="bhn1Oq_emptyState">「暂无会话」
          <div class="hHd-Xa_footArea">
            <div data-slot="sidebar.footer.action">
            <div class="hHd-Xa_settingsArea"> → [data-slot="sidebar.settings"]
              <div class="VOzbGW_triggerRow"> → [data-slot="settings.launcher"]
                <button class="VOzbGW_trigger" aria-label="设置"> → [data-slot="settings.trigger"]

    <div class="pI_x6G_centerCol">
      <div data-slot="main">
        <div data-slot="main.conversation">
          <div class="wSkVaW_root" data-phase="hero">        ← hero / chat 两态
            <div data-slot="conversation.header">
              <header class="wSkVaW_header wSkVaW_headerBlank …" data-window-drag>
                <div class="wSkVaW_headerLeading" data-conversation-header-leading>
                  → [data-slot="conversation.header.leading"]
            <div class="wSkVaW_body" data-conversation-content
                 data-content-phase="hero" data-conversation-region="chat">
              <div class="wSkVaW_scrollBody" data-conversation-scroll>
                <div class="wSkVaW_composerSeat" data-composer-seat
                     data-conversation-region="composer">
                  <div data-slot="conversation.composer">
                    <div class="wSkVaW_composerStack wSkVaW_composerHero">
                      <div class="pXSMma_root"><div class="pXSMma_stack">
                        <div class="pXSMma_headline">
                          <span class="pXSMma_fishHitbox"> → [data-slot="conversation.hero.brand.mark"] > svg.pXSMma_fish
                          <span class="pXSMma_titleGroup">
                            「探索未至之境」 + <span class="pXSMma_previewBadge">「预览版」
                        <div class="pXSMma_body">
                      <div class="wSkVaW_heroWorkspaceRow">
                        <button class="pXSMma_workspace" aria-label="选择工作区">「选择工作区」
                        → [data-slot="conversation.hero.workspace"]
                        → [data-slot="conversation.hero.agentPreset"]
                           <button class="cubgiG_seat">「标准模式」
                      <div data-slot="conversation.composer.bar">
                        <div class="uV2eYG_root uV2eYG_hero">
                          <div class="uV2eYG_card" data-composer-card>      ← 输入卡
                            <div data-slot="conversation.input.attachments">
                            <div class="uV2eYG_scroll" data-input-scroll>
                              <div class="uV2eYG_grow">
                                <div class="uV2eYG_input" role="textbox"
                                     data-composer-input data-phase="inert"
                                     data-placeholder="选择一个工作区开始">
                                <div class="uV2eYG_placeholder" data-composer-placeholder>
                            <div class="uV2eYG_row">
                              <div class="uV2eYG_tools"> <button class="uV2eYG_add">
                              <div class="uV2eYG_modes">        ← 模型 / 权限 / 预设 等
                              <div class="uV2eYG_trailing">
                                <div class="uV2eYG_standardControls">
                                <button class="uV2eYG_primary" aria-label="发送消息">
                          <div class="uV2eYG_dock">

    <div class="pI_x6G_rightbarCol" data-rightbar-col> → [data-slot="rightbar"]
    <div class="pI_x6G_overlayLayer" data-shell-overlay> → [data-slot="shell.overlay"]
    <div class="pI_x6G_handle" data-side="sidebar">          ← 拖拽把手
```

## 3. 类名规则与选择器策略

真实类名形如 `hHd-Xa_newSession`、`uV2eYG_card`、`pXSMma_fish`：**`<包哈希>_<组件名>`**。组件名可读且稳定，哈希前缀随包/版本变化。

| 策略 | 写法 | 稳定性 | 用途 |
| --- | --- | --- | --- |
| A（首选） | `[data-slot="conversation.composer"]` | 高（官方插槽契约） | 结构定位、插入自绘内容 |
| B | `[data-composer-input]`、`[data-phase="hero"]`、`[data-conversation-region="composer"]` | 高 | 状态与关键节点 |
| C | `[class*="_newSession"]`、`[class$="_card"]` | 中（组件名重命名即失效） | 纯视觉覆盖 |
| D | `[class*="hHd-Xa_"]` | **低，禁止** | 版本一变全失效 |

**所有 C 类选择器必须写在 `:where()` 里降权**，避免和宿主自身样式打架：

```css
:where([class*="_newSession"]) { /* 只放变量与轻量覆盖 */ }
```

## 4. 插槽清单（实测提取，节选）

完整清单见 `tools/out/slots.txt`（从 70+ 个 UI 包扫出，按根分组）。

| 根 | 关键插槽 |
| --- | --- |
| `sidebar.*` | `brand.mark`、`brand.name`、`panellist`、`workspaces`、`workspaces.directoryFlow`、`session.row.leading`、`session.row.hover`、`session.row.action`、`settings`、`footer.action`、`toggle.badge` |
| `settings.*` | `trigger`、`launcher`、`general.item`（外观行所在）、`section`、`plugins.tab`、`theme`、`account`、`models` |
| `conversation.*` | `header`、`header.leading`、`hero.brand.mark`、`hero.workspace`、`hero.agentPreset`、`composer`、`composer.bar`、`input.attachments`、`input.model`、`input.permission`、`input.plan`、`input.left/right`、`chat.node`、`chat.turnTail`、`message.images` |
| `shell.*` | `leading`（macOS/Windows 窗口 chrome 区）、`overlay` |
| `main.*` | `conversation` |
| `rightbar.*` | `session` |

## 5. 原型 → 真实结构 映射

| 原型元素 | 真实载体 | 实现方式 | 风险 |
| --- | --- | --- | --- |
| 全宽顶栏（标/折叠/后退/搜索/状态/头像） | **不存在**。折叠钮在 `_logoRow > _iconButton._toggle`；标题在 `conversation.header`；账号在 `settings.account` | 拆开：品牌→`sidebar.brand.*`；窗口控件→`shell.leading`；**不新增顶栏** | 高：硬加会破坏三列布局 |
| 画布渐变 + 色团 + 光带 | `body` + `[data-slot=root]` 之上的固定层 | 自有 `<div id="dsh-glass-bg">` + `z-index:-1`，`pointer-events:none` | 低 |
| 侧栏「新会话」白胶囊 | `_newSession` | 纯 CSS 覆盖（结构已一致） | 低 |
| 工作区分组 / 会话行 | `sidebar.workspaces` 内 `bhn1Oq_*` | CSS + `session.row.*` 插槽加成 | 中：`bhn1Oq_*` 类名会变 |
| 空态 hero（鱼标+标题+预览版） | `pXSMma_headline` | **保留结构，只换色与间距**；logo 走 `conversation.hero.brand.mark` | 低 |
| 工作区/模式行 | `pXSMma_workspace` / `cubgiG_seat` | CSS；下拉内容走 `hero.workspace.directoryFlow` / `hero.agentPreset` | 低 |
| 输入框（大圆角玻璃） | `uV2eYG_card[data-composer-card]` | CSS（这是玻璃的主战场） | 低 |
| 模型选择「纯文字 + 箭头」 | `conversation.input.model` 插槽内的组件 | 只改视觉，**不重写交互** | 中：DSH 的菜单有键盘/滚动行为 |
| 发送按钮 | `uV2eYG_primary` | CSS（禁用/启用态用 `:disabled`） | 低 |
| 消息气泡 / 代码块 / 工具卡 | `conversation.chat.node` 等 | CSS（需要真实会话才能取样，见 §7） | 中 |
| 设置浮层 | `settings.trigger` 打开的官方面板 | **不重写**，只换 token 与玻璃；需要额外入口就用 `settings.general.item` | 低 |

## 6. 三条「不改就会出 bug」的地方

1. **不要新增全宽顶栏**。DSH 的 `sidebarCol` 与 `contentCol` 之间有把手（`pI_x6G_handle`），顶栏会打断拖拽与 `rightbar` 折叠逻辑。窗口按钮该去 `shell.leading`。
2. **不要删 hero**。空态的「探索未至之境 / 预览版 / 选择工作区 / 标准模式」是真实功能入口（工作区与 Agent 预设）。改视觉可以，删结构不行。
3. **输入框在没选工作区时是 `data-phase="inert"`**。原型里默认就可输入，实现时要尊重 `inert`（不可输入、占位符是「选择一个工作区开始」），否则会出现「能打字但发不出去」的假状态。

## 7. 对话态真实结构（已取到，来自用户保存的页面）

样本：`查看这个路子的具体做法 — DeepSeek Harness.html`（137 个 chat 节点、6 轮真实对话）。只解析结构，未读内容。

### 7.1 轮次与节点

```
[data-slot=main] > [data-slot=main.conversation]
  .wSkVaW_root[data-phase=active|hero]
    [data-slot=conversation.header]  > header.wSkVaW_header[data-window-drag]
        .wSkVaW_headerLeading > [data-slot=conversation.header.leading]
        .wSkVaW_titleCluster > nav.wSkVaW_crumbs[aria=会话层级] > .crumbSeg / .crumbCurrent
        .wSkVaW_headerActions > [data-slot=conversation.session.header.actions]
        .wSkVaW_headerUtilities > [data-slot=conversation.session.header.utilities]
        .wSkVaW_headerCorner > [data-slot=conversation.session.header.corner]
        .wSkVaW_tabs[role=tablist] > button.wSkVaW_tab
    .wSkVaW_body[data-conversation-content][data-conversation-region=chat][data-content-phase=active]
      .wSkVaW_scrollBody[data-conversation-scroll]
        [data-slot=conversation.session]
          .wSkVaW_viewArea > [data-slot=conversation.view]
            .EvIC1a_frame
              .eGxaPq_slot > nav.eGxaPq_frame[aria=轮次导航]
                .eGxaPq_marks > button.eGxaPq_mark[data-index][aria=跳转到第N轮]（.markActive 为当前）
              .EvIC1a_root[data-chat-following-tail] > .EvIC1a_scroll
                .EvIC1a_column[data-chat-flow]
                  .EvIC1a_older
                  .EvIC1a_flowItem[data-chat-flow-kind][data-chat-turn][data-chat-node-key][data-chat-group-part]
                    [data-slot=conversation.chat.node] > …
```

`data-chat-flow-kind` 实测取值：`user`(6) / `turn-process`(6) / `assistant-step`(61) / `tool-call`(52) / `turn-tail`(6)。
`assistant-step` 再分 `data-chat-group-part=reasoning`(42) / `response`(19)。

### 7.2 每种节点的内部结构

| 节点 | 结构 | 可用锚点 |
| --- | --- | --- |
| 用户消息 | `.Sixlwa_userRow > .Sixlwa_userStack > .Sixlwa_bubble` + `.xzv4MW_actions[data-clock=start]`（时间 + 复制） | `[data-chat-flow-kind=user]`、`[data-clock=start]` |
| 轮次过程（"思考了 N 秒"） | `button.l_V-RG_root[data-turn-process=N][data-turn-process-tool-calls=…]` | `[data-turn-process]` + 计数属性 |
| 思考块 | `.O_Ebla_root[data-step-process] > button.O_Ebla_title[data-process-activity=thinking] > … + .O_Ebla_body > .lcKema_root[data-variant=think][data-state=ok][data-preview]` | `[data-variant=think]`、`[data-disclosure-row]`、`[data-expandable]` |
| 助手正文 | `[data-chat-group-part=response] > .hWmORq_root > .hWmORq_body > ._markdown_1ypvv_5` | `[data-chat-group-part=response]` |
| Markdown 表格 | `.md-table-wide`（`._tableScroll_1ypvv_192`） | `.md-table-wide`（**无哈希，稳定**） |
| 代码块 | `._block_7gxqk_4.md-code-block._card_7gxqk_107[data-code-wrap] > ._bannerWrap_7gxqk_24 > ._header_1pq26_10[data-code-block-banner]（语言 + 自动换行/复制）+ ._content_7gxqk_74[data-code-block-content] > pre._plain_7gxqk_103` | `[data-code-wrap]`、`[data-code-block-banner]`、`[data-code-block-content]`、`.md-code-block` |
| 工具调用 | `.ztWv_q_callRow[data-chat-call-id] > [data-slot=tool.call.toolview] > .CY-8Ka_card > .CY-8Ka_root[data-variant=bash|search][data-state=ok][data-expandable]`，或 `.o3BgMG_root[data-tool=web_search][data-state=ok] > ._row_jhda5_16[data-disclosure-row]` | `[data-slot="tool.call.toolview"]`、`[data-variant]`、`[data-tool]`、`[data-state]` |
| 轮次尾巴 | `.TS9iAW_root[data-turn-tail=N][data-actions-reveal=hover] > [data-slot=conversation.chat.turnTail] > .xzv4MW_actions[data-clock=end]`（复制/好差评/分支/耗时/模型） | `[data-turn-tail]`、`[data-clock=end]`、`[data-slot="conversation.chat.turnTail"]` |

两个重要发现：

1. **共享的「折叠行」原语**：思考块与工具卡都用 `._root_jhda5_9 + ._row_jhda5_16[data-disclosure-row][data-expandable]`，文字也共用 `._root_1rdzk_1 / _content_1rdzk_11 / _text_1rdzk_17`。→ 只要给这一组原语上材质，思考块和工具卡会**同时**变样，不用分别写。
2. **`.md-*` 与 `[data-code-block-*]` 是无哈希的稳定钩子**，优先用它们，其次才是组件名子串。

### 7.3 还没覆盖的

- 模型菜单 / 权限菜单的浮层（`shell.overlay` 下的结构）——保存页里没有展开态。
- 附件行、图片消息、轨迹视图（`data-slot=conversation.trajectory.*`）。

## 8. 版本升级守卫

- 每次升级 dsh，跑一次 `node tools/inspect-dsh.mjs`，把新 DOM 与 `tools/out/dsh-dom.txt` 做 diff，重点看：`data-slot` 是否变化、`data-composer-*` 是否变化、关键组件名是否改名。
- 插件里所有 C 类选择器集中在一个 `selectors.css`，改版只需改这一处。
- CI 里加一条：构建后扫描 CSS，禁止出现 `[class*="<hash>_"]` 形式的选择器。

## 9. 证据索引

| 内容 | 路径 |
| --- | --- |
| 真实 DOM 骨架（可读） | `tools/out/dsh-dom.txt` |
| 真实 DOM（机器可读，含各区域 outerHTML 片段） | `tools/out/dsh-dom.json` |
| 插槽全量清单 | `tools/out/slots.txt` |
| 抓取脚本 | `tools/inspect-dsh.mjs` |
| 探针实例启动方式 | `DSH_HOME=/tmp/dsh-probe dsh web --no-open --port 3180` |