DAG新增tooltip选项；新增step-down模式；释放semantic query功能；支持递归归因（recursive attribution）；其它小改进

backend/api/client_activity.py

@@ -1,7 +1,7 @@
 from urllib.parse import unquote
 
 from backend.access_log import _log_request
-from backend.visit_stats import record_activity_report
+from backend.visit_stats import record_activity_report, record_gen_attr_opt_sec
 
 
 def _sparse_page_activity_log_cum(cum: int) -> bool:
@@ -38,6 +38,10 @@ def client_activity_report(activity_body=None):
     client_os = str(raw_os).strip() if raw_os is not None else None
 
     record_activity_report(page_key, dlt, cum, client_os)
+    if page_key == "gen_attribute.html":
+        raw_opts = d.get("page_opts")
+        if isinstance(raw_opts, dict):
+            record_gen_attr_opt_sec(dlt, {k: bool(v) for k, v in raw_opts.items() if isinstance(k, str)})
     if _sparse_page_activity_log_cum(cum):
         _log_request(
             "📄 页面活跃",

backend/completion_generator.py

@@ -24,7 +24,7 @@ from backend.pred_topk_format import pred_topk_pairs_from_probs_1d
 from backend.runtime_config import DEFAULT_TOPK
 
 # 续写路径：prompt + 续写合计不得超过该 token 数（与语义分析 runtime 无关）。
-completion_max_token_length = 1000
+completion_max_token_length = 500
 
 # 特殊 token 亦视为分析/展示内容，故不跳过。
 _COMPLETION_DECODE_SKIP_SPECIAL = False

backend/visit_stats.py

@@ -14,6 +14,7 @@ _WIN = {"page_loads": 0, "active_visits": 0}
 _PAGE_SEC = defaultdict(int)
 _API = defaultdict(int)
 _OS_REPORTS = defaultdict(int)  # 与同页「首轮心跳」(delta_active_sec == total_active_sec) 对齐，仅凭该包附带 client_os 计一次
+_GEN_ATTR_OPT_SEC = defaultdict(int)  # gen_attribute.html 各非默认选项处于激活状态的活跃秒
 _VALID_CLIENT_OS = frozenset({"ios", "android", "windows", "macos", "linux", "unknown"})
 
 # client/src/ts/utils/settingsMenuManager.ts handleVisitStatsClick：PAGE_ORDER / API_ORDER / OS_ORDER
@@ -36,6 +37,10 @@ _STATS_API_ORDER = (
     "prediction_attribute__analysis.html",
 )
 _STATS_OS_ORDER = ("ios", "android", "windows", "macos", "linux", "unknown")
+_STATS_GEN_ATTR_OPT_ORDER = (
+    "layout_linear_arc", "layout_step_down", "layout_spiral",
+    "propagated", "downstream", "token_tooltip",
+)
 
 # RLock：_persist_tick 在已持锁时调用 _sample_locked_counters，同线程需可重入。
 _LOCK = threading.RLock()
@@ -190,7 +195,7 @@ def _increment_nonempty(h: dict) -> bool:
     """是否有尚未写入远端的任意增量。"""
     if h.get("page_loads") or h.get("active_visits"):
         return True
-    if h.get("page_sec") or h.get("api") or h.get("os"):
+    if h.get("page_sec") or h.get("api") or h.get("os") or h.get("gen_attr_opt_sec"):
         return True
     return False
 
@@ -214,6 +219,7 @@ def _apply_persist_success(total_rec: dict, committed_sample: dict) -> None:
         _subtract_defaultdict_int(_PAGE_SEC, committed_sample["session_page_sec"])
         _subtract_defaultdict_int(_API, committed_sample["session_api"])
         _subtract_defaultdict_int(_OS_REPORTS, committed_sample["session_os_reports"])
+        _subtract_defaultdict_int(_GEN_ATTR_OPT_SEC, committed_sample["session_gen_attr_opt_sec"])
 
 
 def _load_base():
@@ -355,21 +361,35 @@ def bump_api(kind: str):
         _API[kind] += 1
 
 
+def record_gen_attr_opt_sec(delta_sec: int, opts: dict[str, bool]) -> None:
+    """累计 gen_attribute.html 各非默认选项处于激活状态的活跃秒。"""
+    if delta_sec <= 0:
+        return
+    with _LOCK:
+        for k, v in opts.items():
+            if v:
+                _GEN_ATTR_OPT_SEC[k] += delta_sec
+
+
 def _sample_locked_counters() -> dict:
     with _LOCK:
         bo = _base.get("os")
         base_os = dict(bo) if isinstance(bo, dict) else {}
+        bgo = _base.get("gen_attr_opt_sec")
+        base_gen_attr_opt_sec = dict(bgo) if isinstance(bgo, dict) else {}
         return {
             "sw_pl": _WIN["page_loads"],
             "sw_av": _WIN["active_visits"],
             "session_page_sec": dict(_PAGE_SEC),
             "session_api": dict(_API),
             "session_os_reports": dict(_OS_REPORTS),
+            "session_gen_attr_opt_sec": dict(_GEN_ATTR_OPT_SEC),
             "bp": int(_base_int(_base, "page_loads")),
             "bav": _base_int(_base, "active_visits"),
             "base_page_sec": dict(_base.get("page_sec") or {}),
             "base_api": dict(_base.get("api") or {}),
             "base_os": base_os,
+            "base_gen_attr_opt_sec": base_gen_attr_opt_sec,
             "saved_at": _base.get("saved_at"),
         }
 
@@ -378,6 +398,7 @@ def _merge_from_sample(s: dict) -> tuple[dict, dict, dict]:
     """(管理员 API 快照, stats_total 的 body 不含 saved_at, stats_delta 的 body)。"""
     sp, sa, so = s["session_page_sec"], s["session_api"], s["session_os_reports"]
     bpp, bpa, bpo = s["base_page_sec"], s["base_api"], s["base_os"]
+    sg, bgo = s["session_gen_attr_opt_sec"], s["base_gen_attr_opt_sec"]
 
     total_page_sec = {k: bpp.get(k, 0) + sp.get(k, 0) for k in set(bpp) | set(sp)}
     total_api = {k: bpa.get(k, 0) + sa.get(k, 0) for k in set(bpa) | set(sa)}
@@ -385,13 +406,16 @@ def _merge_from_sample(s: dict) -> tuple[dict, dict, dict]:
         k: int(bpo.get(k, 0)) + int(so.get(k, 0))
         for k in set(bpo) | set(so)
     }
+    total_gen_attr_opt_sec = {k: bgo.get(k, 0) + sg.get(k, 0) for k in set(bgo) | set(sg)}
 
     total_page_sec = _ordered_str_int_map(_STATS_PAGE_ORDER, total_page_sec)
     total_api = _ordered_str_int_map(_STATS_API_ORDER, total_api)
     total_os = _ordered_str_int_map(_STATS_OS_ORDER, total_os)
+    total_gen_attr_opt_sec = _ordered_str_int_map(_STATS_GEN_ATTR_OPT_ORDER, total_gen_attr_opt_sec)
     ord_pg = _ordered_str_int_map(_STATS_PAGE_ORDER, sp)
     ord_api = _ordered_str_int_map(_STATS_API_ORDER, sa)
     ord_os = _ordered_str_int_map(_STATS_OS_ORDER, so)
+    ord_gen_attr_opt_sec = _ordered_str_int_map(_STATS_GEN_ATTR_OPT_ORDER, sg)
 
     tpl, tav = s["bp"] + s["sw_pl"], s["bav"] + s["sw_av"]
 
@@ -401,6 +425,7 @@ def _merge_from_sample(s: dict) -> tuple[dict, dict, dict]:
         "os": total_os,
         "page_sec": total_page_sec,
         "api": total_api,
+        "gen_attr_opt_sec": total_gen_attr_opt_sec,
         "saved_at": s["saved_at"],
     }
     stats_body = {
@@ -409,6 +434,7 @@ def _merge_from_sample(s: dict) -> tuple[dict, dict, dict]:
         "os": total_os,
         "page_sec": total_page_sec,
         "api": total_api,
+        "gen_attr_opt_sec": total_gen_attr_opt_sec,
     }
     delta_body = {
         "page_loads": s["sw_pl"],
@@ -416,6 +442,7 @@ def _merge_from_sample(s: dict) -> tuple[dict, dict, dict]:
         "os": ord_os,
         "page_sec": ord_pg,
         "api": ord_api,
+        "gen_attr_opt_sec": ord_gen_attr_opt_sec,
     }
     return public, stats_body, delta_body
 

client/src/analysis.html

@@ -72,9 +72,21 @@
                         <textarea id="test_text"></textarea>
                         <div class="button-group">
                             <div class="button-left">
-                                <button id="submit_text_btn" class="primary-btn" data-i18n>Analyze</button>
-                                <div class="loadersmall loader-small-container"></div>
-                                <span id="analyze_progress" class="analyze-progress"></span>
+                                <div class="button-left-stack">
+                                    <div class="button-left-primary">
+                                        <button id="submit_text_btn" class="primary-btn" data-i18n>Analyze</button>
+                                        <div class="loadersmall loader-small-container"></div>
+                                        <span id="analyze_progress" class="analyze-progress"></span>
+                                    </div>
+                                    <div class="semantic-submode-row semantic-analysis-enable-row">
+                                        <span class="semantic-submode-group">
+                                            <label class="semantic-submode-label" for="semantic_analysis_toggle">
+                                                <input type="checkbox" id="semantic_analysis_toggle" />
+                                                <span data-i18n>Semantic Query(Beta)</span>
+                                            </label>
+                                        </span>
+                                    </div>
+                                </div>
                             </div>
                             <div id="text_metrics" class="text-metrics">
                                 <div class="text-metrics-primary">
@@ -101,7 +113,7 @@
                     <div class="semantic-analysis-controls">
                         <div class="semantic-search-row">
                             <div class="semantic-search-input-wrapper">
-                                <input type="text" id="semantic_search_input" class="semantic-search-input" placeholder="Enter query for semantic analysis">
+                                <input type="text" id="semantic_search_input" class="semantic-search-input" placeholder="Enter query question or topic" data-i18n="placeholder">
                                 <button type="button" id="semantic_search_clear" class="semantic-search-clear demo-delete-btn" title="Clear" aria-label="Clear" data-i18n="title,aria-label">×</button>
                                 <ul id="semantic_search_history_dropdown" class="semantic-search-history-dropdown"></ul>
                             </div>

client/src/attribution.html

@@ -89,8 +89,10 @@
                         </div>
                         <div class="button-group">
                             <div class="button-left">
-                                <button type="button" id="analyze_btn" class="primary-btn inactive" disabled data-i18n>Analyze attribution</button>
-                                <div class="loadersmall loader-small-container"></div>
+                                <div class="button-left-primary">
+                                    <button type="button" id="analyze_btn" class="primary-btn inactive" disabled data-i18n>Analyze attribution</button>
+                                    <div class="loadersmall loader-small-container"></div>
+                                </div>
                             </div>
                             <div id="attribution_result_info" class="text-metrics is-hidden"></div>
                             <div class="button-right">

client/src/chat.html

@@ -118,12 +118,14 @@
                         </div>
                         <div class="button-group">
                             <div class="button-left">
-                                <button type="button" id="submit_text_btn" class="primary-btn inactive" disabled data-i18n>Ask</button>
-                                <div class="generation-status-slot loader-small-container">
-                                    <div class="loadersmall"></div>
-                                    <span id="chat_complete_reason" class="generation-end-reason"></span>
+                                <div class="button-left-primary">
+                                    <button type="button" id="submit_text_btn" class="primary-btn inactive" disabled data-i18n>Ask</button>
+                                    <div class="generation-status-slot loader-small-container">
+                                        <div class="loadersmall"></div>
+                                        <span id="chat_complete_reason" class="generation-end-reason"></span>
+                                    </div>
+                                    <span id="analyze_progress" class="analyze-progress"></span>
                                 </div>
-                                <span id="analyze_progress" class="analyze-progress"></span>
                             </div>
                             <div id="text_metrics" class="text-metrics text-metrics-chat">
                                 <div id="metric_usage" class="text-metrics-secondary"></div>

client/src/css/_buttons.scss

@@ -62,11 +62,15 @@
     @extend %button-inactive;
   }
 
-  &:hover:not(.inactive) {
+  &:disabled {
+    @extend %button-inactive;
+  }
+
+  &:hover:not(:disabled):not(.inactive) {
     background-color: var(--text-action-btn-hover);  // hover时浅灰色背景
   }
 
-  &:active:not(.inactive) {
+  &:active:not(:disabled):not(.inactive) {
     background-color: var(--text-action-btn-hover);  // active时更深的灰色背景
     opacity: 0.8;
   }

client/src/css/_demo-list.scss

@@ -35,7 +35,7 @@
   white-space: nowrap;  // 防止文字换行
   background-color: var(--button-bg);
   color: var(--text-color);
-  transition: background-color 0.3s ease, color 0.3s ease, border 0.2s ease, box-shadow 0.2s ease;
+  transition: none;
 
   &:hover {
     background-color: var(--button-hover-bg);

client/src/css/_responsive.scss

@@ -207,7 +207,8 @@
       padding: 8px 20px 20px;
       overflow-y: auto;
       overflow-x: hidden;  // 防止水平滚动，确保内容不会被遮挡
-      border-right: 1px solid var(--border-color);
+      // 竖向分隔只做在 .resizer::before，避免与拖条中线叠成双线
+      border-right: none;
       background-color: var(--bg-color);
       box-sizing: border-box;  // 确保padding包含在宽度计算中
       transition: background-color 0.3s ease, border-color 0.3s ease;
@@ -218,9 +219,11 @@
       }
     }
 
+    // 占位与命中区保持 8px（与 LayoutController / chatPanelLayout 的 −8 一致）；
+    // 底色透明，仅用 ::before 画窄线，避免「视觉上收窄」时拖累拖拽热区。
     .resizer {
       width: 8px;
-      background: var(--resizer-bg);
+      background: transparent;
       cursor: col-resize;
       position: relative;
       flex-shrink: 0;

client/src/css/_semantic-analysis.scss

@@ -25,6 +25,14 @@
     &.semantic-submode-group-right {
       margin-left: auto;
     }
+
+    // 组内「主控」标签/下拉：比默认 submode 更醒目（仅直接子级，避免加粗单位后缀等嵌套 label）
+    &.semantic-submode-group--emphasis {
+      > .semantic-submode-label,
+      > .semantic-submode-select {
+        font-weight: 700;
+      }
+    }
   }
 
   .semantic-submode-label {
@@ -53,6 +61,28 @@
   }
 }
 
+// Analyze 下方 Semantic Query 总开关：与 gen_attribute「Raw prompt mode」同款（未勾选整行灰色，勾选正文色）
+.textarea-wrapper .semantic-submode-row.semantic-analysis-enable-row {
+  label.semantic-submode-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+    color: var(--text-primary, var(--text-color));
+
+    &:has(> input[type='checkbox']:not(:checked)) {
+      color: var(--text-muted);
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+  }
+}
+
 // 语义分析区（在 button-group 与 histogram 之间，仅在 semantic_analysis 模式下显示）
 .semantic-analysis-section {
   margin-top: 10px;

client/src/css/_tooltip-vars.scss

@@ -0,0 +1,15 @@
+// ToolTip 与其它入口共用的 CSS 变量（compare 仅打 compare.css，需与 start 共用此文件，避免重复字面量）
+:root {
+  --tooltip-visible-opacity: 1;
+}
+
+// {@link ToolTipOptions.pointerInteractive} false：整块及子节点均不参与命中（子元素默认 `auto` 会覆盖父 none，必须用 `*`）
+.tooltip.tooltip-no-pointer-hit {
+  pointer-events: none !important;
+  cursor: default !important;
+
+  &,
+  * {
+    pointer-events: none !important;
+  }
+}

client/src/css/compare.scss

@@ -3,6 +3,7 @@
 @use "lmf-readout" as lmf;
 @use "demo-list";
 @use "buttons";
+@use "tooltip-vars";
 
 // 夜间模式：强制使用暗色滚动条
 :root[data-theme="dark"] {
@@ -366,6 +367,7 @@
   padding: 5px;
   background: var(--tooltip-bg);
   color: var(--text-color);
+  opacity: 0;
   transition-property: opacity, background-color, color;
   transition-duration: .2s;
   position: absolute;  // 绝对定位
@@ -374,13 +376,16 @@
   cursor: pointer;  // 添加指针样式，提示可点击
   user-select: none;
   -webkit-user-select: none;
+
+  &.tooltip-visible {
+    opacity: var(--tooltip-visible-opacity);
+  }
 }
 
 // 全局tooltip容器
 #global_tooltip {
   position: fixed;  // 使用fixed定位，相对于视口
   pointer-events: none;  // 初始状态不接收事件
-  opacity: 0;
   transition-property: background-color, color;
 }
 

client/src/css/gen_attribute.scss

@@ -47,7 +47,6 @@ $gen-attr-option-row-gap: 12px;
   left: auto;
   right: 0;
   width: max-content;
-  min-width: max(100%, 240px);
   max-width: min(100vw - 32px, 40rem);
   box-sizing: border-box;
 }
@@ -62,21 +61,15 @@ $gen-attr-option-row-gap: 12px;
     min-height: 0;
     width: 100%;
     box-sizing: border-box;
-    padding: 20px;
+    padding: 6px;
     background: var(--text-area-bg);
     color: var(--text-color);
     overflow: visible;
   }
 
-  @media (max-width: 767px) {
-    #results.gen-attr-results-surface.LMF {
-      padding: 15px 12px;
-    }
-  }
-
   // DAG：不可见测量层撑开高度，SVG 绝对定位叠在同栈内（坐标与 LMF 正文一致）
   // 初始 d3.zoom 缩放为 1/本变量，抵消 display-scale 在屏上的整体缩小感（见 genAttributeDagView）
-  // 边色：`--dag-normal-line-color`、`--dag-highlight-line-color-in` / `out` 与节点描边 `--token-hover-outline` 同在 start.scss（见 genAttributeDagView）。
+  // 边色与节点追因/选中描边：`--dag-highlight-line-color-in`（accent 80%），见 start.scss。
   #results.gen-attr-results-surface.LMF .gen-attr-dag-stack {
     // compactness：dag界面紧凑程度，范围 [0.05, 1]；1时和普通文本排版一致；由 JS 写入 inline style，0.5 为纯 CSS 降级兜底。
     --gen-attr-dag-display-scale: var(--gen-attr-dag-compactness, 0.5);
@@ -96,6 +89,32 @@ $gen-attr-option-row-gap: 12px;
     box-sizing: border-box;
   }
 
+  // DAG Top‑K：贴在 #results 内侧右下（absolute）；固定尺寸 HUD；Top‑K 区超出则在滚动层内滚动。
+  #results.gen-attr-results-surface.LMF > .tooltip.gen-attr-dag-topk-tooltip {
+    box-sizing: border-box;
+    // 与 #major_tooltip 一致：不参与 opacity 过渡，避免 reposition 后与底层叠影
+    transition-property: background-color, color;
+    max-width: none;
+    width: 14rem;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .currentToken,
+    .myDetail {
+      flex-shrink: 0;
+    }
+
+    .gen-attr-dag-topk-tooltip-predictions-scroll {
+      flex: 1 1 auto;
+      min-height: 0;
+      margin-top: 6px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+
   // 勾选「Hide inactive edges」时隐藏未与焦点相邻的灰边（linkG 容器内的边）；
   // 与焦点相邻的高亮边由 genAttributeDagView 运行时搬运到 .gen-attr-dag-links-front 中，不受影响。
   #results.gen-attr-results-surface.LMF.gen-attr-dag-hide-inactive-edges .gen-attr-dag-svg .gen-attr-dag-links {
@@ -115,27 +134,54 @@ $gen-attr-option-row-gap: 12px;
     white-space: pre;
   }
 
-  // 节点框：默认无边框；悬停/选中描边与 start.scss `.token` 的 outline 2px 在屏上一致：
-  // 几何按 --gen-attr-dag-display-scale 缩小后，genAttributeDagView 用 zoom 1/scale 拉回，故用户空间描边需 ×scale，
-  // 使 2×s × (1/s) = 2（css px）。（s 可变时仍成立。）
-  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node > rect {
-    stroke: none;
-    stroke-width: 0;
-    fill: var(--gen-attr-dag-generated-node-fill);
+  // 视觉节点不接收指针事件；命中由顶层 .gen-attr-dag-nodes-hit 承担（见 genAttributeDagView）。
+  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-nodes .gen-attr-dag-node {
+    pointer-events: none;
   }
 
-  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--prompt > rect {
-    fill: var(--gen-attr-dag-prompt-node-fill);
+  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node-hit-target {
+    fill: transparent;
+    stroke: none;
+    pointer-events: all;
   }
 
-  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--hover > rect,
-  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--selected > rect {
-    stroke: var(--token-hover-outline);
-    stroke-width: calc(2 * var(--gen-attr-dag-display-scale, 1));
+  // 节点 fill/stroke 分层：stroke rect 外扩见 syncNodeStrokeRects（屏上描边约 2px）。
+  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node {
+    .gen-attr-dag-node-stroke {
+      fill: none;
+      stroke: none;
+      stroke-width: 0;
+      pointer-events: none;
+    }
+
+    .gen-attr-dag-node-fill {
+      stroke: none;
+      fill: var(--gen-attr-dag-generated-node-fill);
+    }
+
+    &--prompt .gen-attr-dag-node-fill {
+      fill: var(--gen-attr-dag-prompt-node-fill);
+    }
+
+    // 递归追因链上游节点描边（直接模式仅一跳，由蓝/红边表达）；opacity 见 genAttributeDagView 中 stay→[0.3,1] 映射。
+    &--recursive-chain .gen-attr-dag-node-stroke {
+      stroke: var(--dag-highlight-line-color-in);
+      stroke-width: calc(2 * var(--gen-attr-dag-display-scale, 1));
+      stroke-opacity: var(--gen-attr-dag-node-recursive-share, 1);
+    }
+
+    // 选中/悬停 = 焦点（追因起点，nodeShare=1）；置于 recursive-chain 之后以覆盖链上节点的 stroke-opacity
+    &--hover .gen-attr-dag-node-stroke,
+    &--selected .gen-attr-dag-node-stroke {
+      stroke: var(--dag-highlight-line-color-in);
+      stroke-width: calc(2 * var(--gen-attr-dag-display-scale, 1));
+      stroke-opacity: 1;
+    }
   }
 
-  // 与 genAttributeDagView 中「仅 default(text-flow) 且选中时可拖」一致：可拖时提示 grab
-  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--selected {
+  // 与 genAttributeDagView 中「仅 default(text-flow) 且选中时可拖」一致：可拖时提示 grab（命中层与视觉层共用 class）
+  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--selected,
+  #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node-hit.gen-attr-dag-node--selected {
     cursor: grab;
     &:active {
       cursor: grabbing;
@@ -146,7 +192,11 @@ $gen-attr-option-row-gap: 12px;
   #results.gen-attr-results-surface.LMF
     .gen-attr-dag-stack.gen-attr-dag-no-node-drag-layout
     .gen-attr-dag-svg
-    .gen-attr-dag-node--selected {
+    .gen-attr-dag-node--selected,
+  #results.gen-attr-results-surface.LMF
+    .gen-attr-dag-stack.gen-attr-dag-no-node-drag-layout
+    .gen-attr-dag-svg
+    .gen-attr-dag-node-hit.gen-attr-dag-node--selected {
     cursor: default;
     &:active {
       cursor: default;
@@ -394,14 +444,22 @@ body.gen-attribute-page .input-section {
   margin-top: 10px;
 }
 
-// Start / Model 行与首行 DAG 参数（含 layout mode）之间略加大，避免与按钮挤在一起
-.gen-attribute-page
-  .input-section
-  > .textarea-wrapper.chat-prompt-actions-row
-  + .gen-attr-dag-measure-width-row {
+// Start / Model 行与 Reset UI options 之间略加大；“重置”与下方 DAG layout 一行紧凑
+.gen-attribute-page .input-section > .textarea-wrapper.chat-prompt-actions-row + .gen-attr-reset-ui-options-row {
   margin-top: 30px;
 }
 
+.gen-attr-reset-ui-options-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.gen-attr-reset-ui-options-row + .gen-attr-dag-measure-width-row {
+  margin-top: 10px;
+}
+
 .attribution-exclude-prompt-patterns-header {
   flex-wrap: wrap;
 
@@ -441,20 +499,6 @@ body.gen-attribute-page .input-section {
   flex-wrap: nowrap;
 }
 
-.gen-attr-dag-measure-width-row .gen-attr-dag-layout-mode-group {
-  .semantic-submode-label,
-  .gen-attr-dag-layout-mode-select {
-    font-weight: 700;
-  }
-}
-
-.gen-attr-dag-measure-width-row .gen-attr-dag-replay-speed-row {
-  > .semantic-submode-label,
-  .gen-attr-dag-replay-mode-select {
-    font-weight: 700;
-  }
-}
-
 .gen-attr-dag-replay-speed-row {
   display: flex;
   flex-wrap: wrap;

client/src/css/start.scss

@@ -12,6 +12,7 @@
 @use "semantic-analysis";
 @use "attribution-inspector";
 @use "attribution-sidebar";
+@use "tooltip-vars";
 
 // CSS变量定义 - 日间模式（默认）
 :root {
@@ -60,6 +61,11 @@
   --bg-hover: #f5f5f5;  // 弹窗内信息块/列表项背景（日间）
   --bg-hover-light: #f8f8f8;  // 弹窗内列表项 hover（日间）
   --primary-color: #2196F3;  // 主题色（链接、当前模型标题等）
+  // 交互高亮蓝（token / bin / DAG 归因份额=1）；与 --primary-color 日间 intentionally 区分
+  --accent-color: #1e6fff;
+  --accent-glow: color-mix(in srgb, var(--accent-color) 60%, transparent);
+  --accent-shadow: color-mix(in srgb, var(--accent-color) 65%, transparent);
+  --accent-stroke: color-mix(in srgb, var(--accent-color) 90%, transparent);
   --text-disabled: #999;  // 禁用态文本
   --text-area-bg: #fff;  // 文本显示区域背景色
   --textarea-actions-button-row-min-height: 3.5rem; // textarea 下「按钮 + stats」行最小高度（analysis / chat / attribution / gen_attribute）
@@ -68,14 +74,14 @@
   --tooltip-text-selected: #933;  // tooltip选中文本颜色
   --tooltip-text-detail: #666666;  // tooltip详情文本颜色
   --tooltip-text-value: #333;  // tooltip数值文本颜色
-  --token-hover-shadow: rgba(42, 158, 255, 0.6);  // token悬浮阴影颜色（日间模式）
-  --token-hover-outline: #1e6fff;  // token悬浮边框颜色
+  --token-hover-shadow: var(--accent-glow);
+  --token-hover-outline: var(--accent-color);
   // 与 rgba(128,128,128,0.252) 叠在 var(--text-area-bg) 上等效（实心，避免多线重叠加深）
   --dag-normal-line-color: #ddd;
-  --dag-highlight-line-color-in: rgba(0, 94, 255, 0.8); // 入边：与 --token-hover-outline #1e6fff 同 hue，半透明与出边一致
+  --dag-highlight-line-color-in: color-mix(in srgb, var(--accent-color) 80%, transparent);
   --dag-highlight-line-color-out: rgba(255, 71, 64, 0.5);
-  --bin-highlight-outline: #1e6fff;  // bin高亮边框（保持与悬浮一致）
-  --bin-highlight-shadow: rgba(30, 111, 255, 0.65);  // bin高亮阴影
+  --bin-highlight-outline: var(--accent-color);
+  --bin-highlight-shadow: var(--accent-shadow);
   --avg-line-color: #8c8c8c;  // 平均值参考线颜色（日间模式）
   --text-color-light: #c3c3c3;  // 浅色文本颜色（主要用于夜间模式）
   --token-truncated-color: #888;  // 被截断 token 的文本颜色（日间模式）
@@ -124,7 +130,11 @@ html {
   --hover-bg-color: #3a3a3a;  // 菜单项悬浮背景色（夜间模式，更暗）
   --bg-hover: #2d2d2d;  // 弹窗内信息块/列表项背景（夜间）
   --bg-hover-light: #353535;  // 弹窗内列表项 hover（夜间）
-  --primary-color: #5c8dff;  // 主题色（夜间模式略亮）
+  --accent-color: #5c8dff;
+  --accent-glow: color-mix(in srgb, var(--accent-color) 80%, transparent);
+  --accent-shadow: var(--accent-glow);
+  --accent-stroke: color-mix(in srgb, var(--accent-color) 90%, transparent);
+  --primary-color: var(--accent-color);
   --text-disabled: #666;  // 禁用态文本（夜间）
   --text-area-bg: #191919;  // 夜间模式：文本显示区域背景色与主背景一致
   --tooltip-text-normal: #ccc;  // tooltip普通文本颜色（夜间模式）
@@ -132,15 +142,13 @@ html {
   --tooltip-text-detail: #888;  // tooltip详情文本颜色（夜间模式）
   --tooltip-text-value: var(--text-color-light);  // tooltip数值文本颜色（夜间模式）
   --token-truncated-color: #888;  // 被截断 token 的文本颜色（夜间模式）
-  --token-hover-shadow: rgba(66, 165, 255, 0.8);  // token悬浮阴影颜色（夜间模式，更亮更明显）
-  --token-hover-outline: #5c8dff;  // token悬浮边框颜色（夜间模式）
+  --token-hover-shadow: var(--accent-glow);
+  --token-hover-outline: var(--accent-color);
   --dag-normal-line-color: #333;
-  // 出边数是无上限的，更可能重叠，所以透明度低一些，以免过亮
-  // 入边数是有限的，所以透明度高一些，以免过暗
-  --dag-highlight-line-color-in: rgba(92, 141, 255, 0.8); // 入边：与 --token-hover-outline #5c8dff 同 hue
+  --dag-highlight-line-color-in: color-mix(in srgb, var(--accent-color) 80%, transparent);
   --dag-highlight-line-color-out: rgba(255, 71, 64, 0.5);
-  --bin-highlight-outline: #5c8dff;  // 夜间模式 bin 高亮边框
-  --bin-highlight-shadow: rgba(92, 141, 255, 0.8);  // 夜间模式 bin 高亮阴影
+  --bin-highlight-outline: var(--accent-color);
+  --bin-highlight-shadow: var(--accent-shadow);
   --avg-line-color: #b0b0b0;  // 平均值参考线颜色（夜间模式）
 
   // 夜间模式：LMF 区域使用 Light 字重（300）
@@ -213,12 +221,21 @@ textarea{
     flex-wrap: wrap;  // 允许换行
     
     .button-left {
+      flex-shrink: 0;  // 防止左侧按钮被压缩
+    }
+
+    .button-left-stack {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 25px;  // Analyze 行与下方 Semantic Query 开关间距（略大于常规行距）
+    }
+
+    .button-left-primary {
       display: flex;
       align-items: center;
       gap: 10px;
-      flex-shrink: 0;  // 防止左侧按钮被压缩
-      position: relative;  // 为绝对定位的进度消息提供定位上下文
-      
+      position: relative;  // 为绝对定位的 loader / 进度消息提供定位上下文
     }
     
     .button-right {
@@ -645,7 +662,7 @@ select {
       //   drop-shadow(0 0 2px rgba(30, 111, 255, 1))
       //   drop-shadow(0 0 5px rgba(30, 111, 255, 0.85))
       //   drop-shadow(0 0 10px rgba(30, 111, 255, 0.7));
-      stroke: rgba(30, 111, 255, 0.9);
+      stroke: var(--accent-stroke);
       stroke-width: 2.5px;
     }
     
@@ -656,7 +673,7 @@ select {
       //   drop-shadow(0 0 2px rgba(30, 111, 255, 1))
       //   drop-shadow(0 0 5px rgba(30, 111, 255, 0.85))
       //   drop-shadow(0 0 10px rgba(30, 111, 255, 0.7));
-      stroke: rgba(30, 111, 255, 0.9);
+      stroke: var(--accent-stroke);
       stroke-width: 2.5px;
     }
   }
@@ -678,7 +695,7 @@ select {
       //   drop-shadow(0 0 10px rgba(30, 111, 255, 0.7));
       // 移动端备用方案：使用 stroke 作为发光效果（iOS Safari filter 支持不佳）
       // 使用 2.5px 区分于 bin-highlighted 的 1.5px
-      stroke: rgba(30, 111, 255, 0.9);
+      stroke: var(--accent-stroke);
       stroke-width: 2.5px;
     }
     
@@ -697,7 +714,7 @@ select {
       //   drop-shadow(0 0 5px rgba(30, 111, 255, 0.85))
       //   drop-shadow(0 0 10px rgba(30, 111, 255, 0.7));
       // 覆盖 bin-highlighted 的 stroke，使用更粗的 stroke 表示同时悬浮
-      stroke: rgba(30, 111, 255, 0.9);
+      stroke: var(--accent-stroke);
       stroke-width: 2.5px;
     }
   }
@@ -771,6 +788,7 @@ select {
   padding: 5px;
   background: var(--tooltip-bg);
   color: var(--text-color);
+  opacity: 0;
   transition-property: opacity, background-color, color;
   transition-duration: .2s;
   position: absolute;  // 相对于 #results 容器定位，与文本区域使用相同的坐标系统
@@ -783,6 +801,10 @@ select {
   max-width: min(16rem, calc(100vw - 24px));
   box-sizing: border-box;
   overflow-wrap: break-word;
+
+  &.tooltip-visible {
+    opacity: var(--tooltip-visible-opacity);
+  }
 }
 
 // 当前token显示区域，使用等宽字体以便分辨连续的␣（字号继承 .tooltip 9pt，行高与历史一致）
@@ -981,7 +1003,7 @@ select {
   white-space: nowrap;
   line-height: 1.2;
   position: absolute;  // 绝对定位，不占用正常布局空间
-  left: 100%;  // 定位在button-left的右侧
+  left: 100%;  // 定位在 button-left-primary（Analyze 行）的右侧
   margin-left: 30px;  // loader宽度(10px) + loader的margin(10px) + 额外间距(10px)
   z-index: 10;  // 确保在上层显示
   
@@ -1411,7 +1433,7 @@ select {
 // 加载器小图标容器
 .loader-small-container {
   position: absolute;  // 绝对定位，不占用正常布局空间
-  left: 100%;  // 定位在button-left的右侧
+  left: 100%;  // 定位在 button-left-primary（Analyze 行）的右侧
   margin-left: 10px;  // 与左侧元素保持间距
   z-index: 10;  // 确保在上层显示
 }
@@ -1433,7 +1455,6 @@ select {
 #major_tooltip {
   position: absolute;
   pointer-events: none;
-  opacity: 0;
   // 不参与 opacity 过渡：否则 hide 时 top/left 已归位而 opacity 仍 >0，会与 fixed 叠成视口角上鬼影
   transition-property: background-color, color;
 }

client/src/demos/gen_attribute/CN->EN翻译.json

@@ -13404,7 +13404,7 @@
     "hideExcludedTokens": true,
     "edgeTopPCoverage": 0.1,
     "nodeCiVisualScaleEnabled": true,
-    "edgeWeakenHighSurprisalEnabled": true,
+    "decayAttributionToHighSurprisalTargetEnabled": true,
     "hideInactiveEdges": false,
     "replayPacingMode": "step",
     "playbackTotalS": 7,

client/src/demos/gen_attribute/Write a sonnet about love.json

@@ -117407,7 +117407,7 @@
     "hideExcludedTokens": false,
     "edgeTopPCoverage": 0.7,
     "nodeCiVisualScaleEnabled": true,
-    "edgeWeakenHighSurprisalEnabled": true,
+    "decayAttributionToHighSurprisalTargetEnabled": true,
     "hideInactiveEdges": false,
     "replayPacingMode": "step",
     "playbackTotalS": 7,

client/src/demos/gen_attribute/写一首绝句，主题是春天.json

@@ -15973,7 +15973,7 @@
     "hideExcludedTokens": false,
     "edgeTopPCoverage": 0.7,
     "nodeCiVisualScaleEnabled": true,
-    "edgeWeakenHighSurprisalEnabled": true,
+    "decayAttributionToHighSurprisalTargetEnabled": true,
     "hideInactiveEdges": false,
     "replayPacingMode": "step",
     "playbackTotalS": 7,

client/src/demos/gen_attribute/过拟合｜李白 将进酒.json

@@ -154547,7 +154547,7 @@
     "hideExcludedTokens": true,
     "edgeTopPCoverage": 0.5,
     "nodeCiVisualScaleEnabled": true,
-    "edgeWeakenHighSurprisalEnabled": true,
+    "decayAttributionToHighSurprisalTargetEnabled": true,
     "hideInactiveEdges": false,
     "replayPacingMode": "step",
     "playbackTotalS": 7,

client/src/gen_attribute.html

@@ -174,12 +174,14 @@
                         </div>
                         <div class="button-group">
                             <div class="button-left">
-                                <button type="button" id="gen_attr_submit_btn" class="primary-btn inactive" disabled>Start</button>
-                                <div class="generation-status-slot loader-small-container">
-                                    <div class="loadersmall"></div>
-                                    <span id="gen_attr_complete_reason" class="generation-end-reason"></span>
+                                <div class="button-left-primary">
+                                    <button type="button" id="gen_attr_submit_btn" class="primary-btn inactive" disabled>Start</button>
+                                    <div class="generation-status-slot loader-small-container">
+                                        <div class="loadersmall"></div>
+                                        <span id="gen_attr_complete_reason" class="generation-end-reason"></span>
+                                    </div>
+                                    <span id="gen_attr_analyze_progress" class="analyze-progress"></span>
                                 </div>
-                                <span id="gen_attr_analyze_progress" class="analyze-progress"></span>
                             </div>
                             <div id="gen_attr_text_metrics" class="text-metrics text-metrics-chat">
                                 <div id="gen_attr_metric_usage" class="text-metrics-secondary"></div>
@@ -189,15 +191,24 @@
                         </div>
                     </div>
 
+                    <div class="gen-attr-reset-ui-options-row">
+                        <button type="button" id="gen_attr_reset_ui_options_btn" class="text-action-btn"
+                            title="Restore DAG options, replay speed, exclusions, etc. to defaults and clear saved preferences for those controls."
+                            data-i18n="text,title">
+                            Reset UI options
+                        </button>
+                    </div>
+
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group gen-attr-dag-layout-mode-group">
+                        <span class="semantic-submode-group semantic-submode-group--emphasis">
                             <label class="semantic-submode-label" for="gen_attr_dag_layout_mode">DAG layout mode</label>
                             <select id="gen_attr_dag_layout_mode"
                                 class="semantic-submode-select gen-attr-dag-layout-mode-select"
-                                title="Choose DAG layout mode. 'text-flow' follows text layout geometry; 'linear-arc' uses fixed-order linear nodes with arc links; 'spiral' lays nodes on an Archimedean spiral (for fun)."
+                                title="Choose DAG layout mode. 'text-flow' follows text layout geometry; 'linear-arc' uses fixed-order linear nodes with arc links; 'linear-arc-step-down' is like linear-arc but drops each successive token vertically by CI (baseline = unscaled node height); 'spiral' lays nodes on an Archimedean spiral (for fun)."
                                 data-i18n="title">
                                 <option value="text-flow">text-flow</option>
                                 <option value="linear-arc">linear-arc</option>
+                                <option value="linear-arc-step-down">step-down</option>
                                 <option value="spiral">spiral (for fun)</option>
                             </select>
                         </span>
@@ -220,7 +231,7 @@
                             <label class="semantic-submode-label" for="gen_attr_dag_linear_arc_interval" data-i18n>Token distance</label>
                             <input type="number" id="gen_attr_dag_linear_arc_interval" class="gen-attr-dag-measure-width-input"
                                 value="0" min="0" max="400" step="1"
-                                title="Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync."
+                                title="Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc / linear-arc-step-down layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync."
                                 data-i18n="title">
                             <span class="semantic-submode-label">px</span>
                         </span>
@@ -236,27 +247,35 @@
                         </span>
                         <span class="semantic-submode-group">
                             <label class="semantic-submode-label">
-                                <input type="checkbox" id="gen_attr_dag_edge_weaken_high_surprisal" checked
-                                    title="When checked, edges leading to high-surprisal (uncertain) target tokens are visually weakened by the mutual information ratio. Takes effect on next generation."
+                                <input type="checkbox" id="gen_attr_dag_decay_attribution_high_surprisal" checked
+                                    title="When checked, recursive trace decays propagated attribution at high-surprisal generated tokens (MI discount), so surprising or teacher-forced tokens can act as sources. Unchecked: all generated tokens are transparent conduits; trace continues to prompt only."
                                     data-i18n="title">
-                                Weaken attribution to high-surprisal target
+                                Decay attribution to high-surprisal targets
                             </label>
                         </span>
                     </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
                         <span class="semantic-submode-group">
-                            <label class="semantic-submode-label" for="gen_attr_dag_edge_top_p_coverage" data-i18n>Edge top-p coverage</label>
+                            <label class="semantic-submode-label" for="gen_attr_dag_edge_top_p_coverage" data-i18n>Attribution top-p coverage</label>
                             <input type="number" id="gen_attr_dag_edge_top_p_coverage" class="gen-attr-dag-measure-width-input"
                                 value="0.7" min="0.05" max="1" step="0.05"
                                 title="Coverage is the cumulative mass share within each generation step's Top-N candidate pool (after sorting candidates into the pool and normalizing mass inside that pool). Higher values keep more incoming edges. The denominator is this pool only, not every token-attribution entry returned for the step."
                                 data-i18n="title">
                         </span>
-                        <span class="semantic-submode-group">
+                        <span class="semantic-submode-group semantic-submode-group--emphasis">
                             <label class="semantic-submode-label">
-                                <input type="checkbox" id="gen_attr_dag_hide_inactive_edges"
-                                    title="When checked, gray DAG edges not adjacent to the hovered or selected node are hidden."
+                                <input type="checkbox" id="gen_attr_dag_recursive_attribution"
+                                    title="Trace from the focused token back to information sources (not one hop). Sources: prompt; surprising or teacher-forced generated tokens (MI decay stops the chain). Conduits: high-confidence middle tokens—attribution passes through. Blue edges: propagated share; node ring: attribution stay (strong where explanation lands). Use with Decay attribution to high-surprisal targets. Off = direct mode (immediate predecessors only)."
                                     data-i18n="title">
-                                Hide inactive edges
+                                Propagated attribution mode
+                            </label>
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_show_downstream_influence_group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_show_downstream_influence"
+                                    title="When checked, direct attribution focus also shows outgoing edges from the selected or hovered token as downstream influence. Propagated attribution keeps showing upstream attribution chains only."
+                                    data-i18n="title">
+                                Show downstream influence
                             </label>
                         </span>
                     </div>
@@ -315,7 +334,27 @@
                         </span>
                     </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group gen-attr-dag-replay-speed-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_hide_inactive_edges"
+                                    title="When checked, gray DAG edges not adjacent to the hovered or selected node are hidden."
+                                    data-i18n="title">
+                                Hide inactive edges
+                            </label>
+                        </span>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row gen-attr-dag-show-topk-on-selected-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_show_topk_on_selected"
+                                    title="When checked, selecting or hovering a token node shows token information in the results area."
+                                    data-i18n="title">
+                                <span data-i18n>Show token tooltip</span>
+                            </label>
+                        </span>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group gen-attr-dag-replay-speed-row semantic-submode-group--emphasis">
                             <label class="semantic-submode-label" for="gen_attr_dag_replay_mode" data-i18n>DAG replay speed</label>
                             <select id="gen_attr_dag_replay_mode"
                                 class="semantic-submode-select gen-attr-dag-replay-mode-select"

client/src/partials/settings-menu-analysis.html

@@ -4,12 +4,6 @@
                                         <input type="checkbox" id="enable_minimap_toggle">
                                     </label>
                                 </div>
-                                <div id="semantic_analysis_item" class="settings-menu-item settings-menu-row">
-                                    <span class="settings-menu-label">Semantic analysis (Beta):</span>
-                                    <label class="settings-menu-control settings-menu-checkbox" style="cursor: pointer;">
-                                        <input type="checkbox" id="semantic_analysis_toggle">
-                                    </label>
-                                </div>
                                 <div id="token_render_style_item" class="settings-menu-item settings-menu-row" data-admin-only style="display: none;">
                                     <span class="settings-menu-label">Token render style:</span>
                                     <div id="token_render_style_dropdown" class="settings-menu-control settings-dropdown-in-menu"></div>

client/src/ts/api/GLTR_API.ts

@@ -244,6 +244,7 @@ export class TextAnalysisAPI {
         os: Record<string, number>,
         page_sec: Record<string, number>,
         api: Record<string, number>,
+        gen_attr_opt_sec?: Record<string, number>,
         saved_at: string | null,
         process_start_at?: string | null,
         startup_base?: {
@@ -252,6 +253,7 @@ export class TextAnalysisAPI {
             page_sec?: Record<string, number>,
             api?: Record<string, number>,
             os?: Record<string, number>,
+            gen_attr_opt_sec?: Record<string, number>,
         },
         reset_base?: {
             page_loads?: number,
@@ -259,6 +261,7 @@ export class TextAnalysisAPI {
             page_sec?: Record<string, number>,
             api?: Record<string, number>,
             os?: Record<string, number>,
+            gen_attr_opt_sec?: Record<string, number>,
         },
         reset_at?: string | null,
     }> {

client/src/ts/attribution/genAttributeDagEdgeDisplay.ts

@@ -1,8 +1,24 @@
 /**
- * DAG 边最终 `stroke-opacity`（`normalizedScore × mutualInformationRatio`）的下限：
- * 小于该值的边不进入图中展示。
- *
- * 与同数值在 `genAttributeDagPreprocess.ts` 池内前缀选取里 `relativeFloor = 常数 × topFrac` 复用：
- * max 归一后首条 `normalizedScore === 1`，故低于该相对份额的条目不可能在 MI≤1 下达到本阈值，属提前筛除。
+ * 建边剪枝：候选池内 max 归一后的 `normalizedScore` 低于该值不连边；
+ * decay 开启时再要求 `mutualInformationRatio × normalizedScore` 不低于本值。
+ * 与 {@link DAG_EDGE_RENDER_OPACITY_FLOOR} 独立；数值可分别调整。
  */
-export const DAG_EDGE_MIN_DISPLAY_OPACITY = 0.1;
+export const DAG_EDGE_MIN_NORMALIZED_SCORE = 0.1;
+
+/**
+ * 焦点传播 / 高亮剪枝：传播后的节点份额、边份额、下游强度低于该阈值的边/节点不参与追因高亮。
+ */
+export const DAG_MIN_ATTRIBUTION_SHARE = 0.01;
+
+/**
+ * 归一后 `stroke-opacity` 的显示下限（`Math.max(本常数, scaled)`）：弱边被抬高到此值，而非滤掉。
+ * 与 {@link DAG_EDGE_MIN_NORMALIZED_SCORE}（低于则剪枝）语义相反。
+ */
+export const DAG_EDGE_RENDER_OPACITY_FLOOR = 0.1;
+
+/**
+ * 递归链候选节点描边 `stroke-opacity` 下限：`stay / max(stay)` 线性映射到 `[本值, 1]`。
+ * 弱 stay 若直接当 opacity，在链上 max(stay) 较大时会接近 0、描边几乎看不见；抬高下限保留相对强弱对比。
+ * 与 {@link DAG_EDGE_RENDER_OPACITY_FLOOR}（边）独立。
+ */
+export const DAG_NODE_STROKE_OPACITY_BASE = 0.3;

client/src/ts/attribution/genAttributeDagPreprocess.ts

@@ -5,7 +5,7 @@ import {
 import type { NodeAggregatedEntry } from './genAttributeDagIntervalResolve';
 import type { TokenGenStep } from './tokenGenAttributionRunner';
 import { getAttentionRawScore } from '../utils/semanticUtils';
-import { DAG_EDGE_MIN_DISPLAY_OPACITY } from './genAttributeDagEdgeDisplay';
+import { DAG_EDGE_MIN_NORMALIZED_SCORE } from './genAttributeDagEdgeDisplay';
 
 /** 与 DAG 节点 id 一致：来自 API `token_attribution` 几何（按 offset 去重，独立于 exclude/归一化）。 */
 export type PromptTokenSpan = {
@@ -58,38 +58,29 @@ function normalizeTopNPoolForDagSparse<T extends { score: number }>(tokens: T[])
 }
 
 /**
- * 在候选池已按 `score` 降序、池内归一保持该顺序的前提下，按遍历顺序取前缀，直到：
- * - 池内 L1 份额小于 {@link DAG_EDGE_MIN_DISPLAY_OPACITY}×首条份额（`relativeFloor`，系数与最小展示透明度同值），或
+ * 在候选池已按 `score` 降序、池内 max 归一（`score` 即 `normalizedScore`）的前提下，按遍历顺序取前缀，直到：
+ * - `normalizedScore < {@link DAG_EDGE_MIN_NORMALIZED_SCORE}`，或
  * - 累计达到给定阈值（默认 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}；候选池内 Top-P，非整步全量 token 的分母）。
- * （池内份额与 `score` 单调一致，无需再排序。）
- *
- * `relativeFloor`：{@link normalizeTopNPoolForDagSparse} 后首条 `normalizedScore === 1`，且对正分条目有
- * `poolMassFrac_i / topFrac === normalizedScore_i`。故 `frac < β×topFrac` ⇔ `normalizedScore < β`；
- * 再乘互信息率（≤1）后不可能达到视图层最小 `stroke-opacity`，等于提前剔除注定画不出的边，与
- * {@link DAG_EDGE_MIN_DISPLAY_OPACITY} 在视图中的含义对齐。
  */
-function selectTokenAttributionByCumulativeShare<T extends { poolMassFrac: number }>(
+function selectTokenAttributionByCumulativeShare<T extends { score: number; poolMassFrac: number }>(
     normalized: Array<T>,
     cumulativeShareThreshold: number,
 ): Array<T> {
     if (normalized.length === 0) return [];
-
-    const topFrac = normalized[0]?.poolMassFrac ?? 0;
-    if (!(topFrac > 0)) return [];
-    const relativeFloor = DAG_EDGE_MIN_DISPLAY_OPACITY * topFrac;
+    if (!(normalized[0]!.poolMassFrac > 0)) return [];
 
     let cum = 0;
     const picked: Array<T> = [];
     for (const t of normalized) {
-        const frac = t.poolMassFrac;
-        if (!(frac > 0)) {
+        if (!(t.poolMassFrac > 0)) {
             break;
         }
-        if (frac < relativeFloor) {
+        const normalizedScore = t.score;
+        if (normalizedScore < DAG_EDGE_MIN_NORMALIZED_SCORE) {
             break;
         }
         picked.push(t);
-        cum += frac;
+        cum += t.poolMassFrac;
         if (cum >= cumulativeShareThreshold) {
             break;
         }

client/src/ts/attribution/genAttributeDagTopkToken.ts

@@ -0,0 +1,37 @@
+import type { FrontendToken } from '../api/GLTR_API';
+import type { TokenGenStep } from './tokenGenAttributionRunner';
+
+/**
+ * 将单步生成归因结果转为与 {@link ToolTip} / Top‑K 条形图一致的 {@link FrontendToken}。
+ * `debug_info.topk_*` 来自 `/api/prediction-attribute`，与语义分析同源。
+ */
+export function frontendTokenFromGenAttrStep(step: TokenGenStep): FrontendToken | null {
+    const raw = step.token;
+    if (!raw) return null;
+
+    const start = step.context.length;
+    const end = start + raw.length;
+    const prob = step.response.target_prob;
+    const real_topk =
+        prob != null && Number.isFinite(prob) ? ([0, prob] as [number, number]) : undefined;
+
+    const dbg = step.response.debug_info;
+    let pred_topk: [string, number][] = [];
+    if (dbg?.topk_tokens?.length && dbg?.topk_probs?.length) {
+        const n = Math.min(dbg.topk_tokens.length, dbg.topk_probs.length);
+        for (let i = 0; i < n; i++) {
+            const t = dbg.topk_tokens[i]!;
+            const p = dbg.topk_probs[i]!;
+            if (typeof t === 'string' && typeof p === 'number' && Number.isFinite(p)) {
+                pred_topk.push([t, p]);
+            }
+        }
+    }
+
+    return {
+        offset: [start, end],
+        raw,
+        pred_topk,
+        ...(real_topk !== undefined ? { real_topk } : {}),
+    };
+}

client/src/ts/attribution/genAttributeDagView.ts

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { DirectedGraph } from 'graphology';
-import { calculateSurprisal, type D3Sel } from '../utils/Util';
+import type { D3Sel } from '../utils/Util';
 import { visualizeSpecialChars } from '../utils/tokenDisplayUtils';
 import {
     clampDagEdgeTopPCoverage,
@@ -10,10 +10,17 @@ import {
     phase2RankAndSparsify,
     type PromptTokenSpan,
 } from './genAttributeDagPreprocess';
-import { DAG_EDGE_MIN_DISPLAY_OPACITY } from './genAttributeDagEdgeDisplay';
+import {
+    DAG_EDGE_MIN_NORMALIZED_SCORE,
+    DAG_EDGE_RENDER_OPACITY_FLOOR,
+    DAG_MIN_ATTRIBUTION_SHARE,
+    DAG_NODE_STROKE_OPACITY_BASE,
+} from './genAttributeDagEdgeDisplay';
 import {
     computeMutualInformationRatio,
     computeConditionalInformationRatio,
+    dagCiVisualScaleFromTargetProb,
+    dagPropagationMiRatio,
     FULL_CONFIDENCE_PROBABILITY_BASELINE,
 } from '../utils/surprisalMath';
 import { isOffsetSpanFullyExcluded } from './attributionDisplayModel';
@@ -23,8 +30,12 @@ import {
     type NodeInterval,
     type PieceEntry,
 } from './genAttributeDagIntervalResolve';
+import type { FrontendToken } from '../api/GLTR_API';
 import type { TokenGenStep } from './tokenGenAttributionRunner';
 import { createGenAttributeDagTextMeasure } from './genAttributeDagTextMeasure';
+import { frontendTokenFromGenAttrStep } from './genAttributeDagTopkToken';
+import { SimpleEventHandler } from '../utils/SimpleEventHandler';
+import { ToolTip, type ToolTipUpdateAugment } from '../vis/ToolTip';
 import { formatTopkTooltipProbabilityPercent } from '../utils/topkChartUtils';
 import {
     CSS_PSEUDO_FULLSCREEN_CHANGE_EVENT,
@@ -38,20 +49,22 @@ import {
     LINEAR_ARC_ADJACENT_GAP_MAX,
     LINEAR_ARC_ADJACENT_GAP_MIN,
     LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION,
+    LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE,
     paintLinearArcLayout,
 } from './genAttributeDagViewLinearArcMode';
 import { paintTextFlowLayout } from './genAttributeDagViewTextFlowMode';
 import { paintSpiralLayout } from './genAttributeDagViewSpiralMode';
 import { tr } from '../lang/i18n-lite';
 
-/** 与 {@link ToolTip} 中 surprisal 数值格式一致（`.3g`） */
-const DAG_TITLE_SURPRISAL_FMT = d3.format('.3g');
-
 /** 再次挂载前执行上一轮 detach（当前为空操作，保留扩展点） */
 const detachGenAttributeDagPanel = new WeakMap<HTMLElement, () => void>();
 
-/** 节点布局模式：`text-flow` 按文字排版层几何；`linear-arc` 按节点插入序线性排布 + 弧线连边；`spiral` 螺旋排布。 */
-export type DagLayoutMode = 'text-flow' | 'linear-arc' | 'spiral';
+/** 节点布局模式：`text-flow` 按文字排版层几何；`linear-arc` / `linear-arc-step-down` 为线性序 + 弧线连边（后者按 CI 逐级下移）；`spiral` 螺旋排布。 */
+export type DagLayoutMode = 'text-flow' | 'linear-arc' | 'linear-arc-step-down' | 'spiral';
+
+function isLinearArcFamilyLayout(mode: DagLayoutMode): mode is 'linear-arc' | 'linear-arc-step-down' {
+    return mode === 'linear-arc' || mode === 'linear-arc-step-down';
+}
 
 export const DAG_COMPACTNESS_DEFAULT = 0.5;
 /** 下限取小正数以满足 {@link readDisplayScaleFromCss}「必须为正」且不出现零宽度边线。 */
@@ -71,10 +84,16 @@ export function setDagNodeCiVisualScaleEnabled(enabled: boolean): void {
     dagNodeCiVisualScaleEnabled = enabled;
 }
 
-/** 高惊讶度目标边弱化开关；`false` 时 mutualInformationRatio 恒为 1（不弱化），下次 update() 起生效。 */
-let dagEdgeWeakenHighSurprisalEnabled = true;
-export function setDagEdgeWeakenHighSurprisalEnabled(enabled: boolean): void {
-    dagEdgeWeakenHighSurprisalEnabled = enabled;
+/**
+ * 「Decay attribution to high-surprisal targets」——递归归因的配套开关。
+ * 开启：沿链向上时，在高惊讶度（低置信 / teacher forcing）的**生成 token** 处用 MI 折扣传播预算，
+ * 使它们成为与 prompt 同类的「来源」，链在此变短。
+ * 关闭：所有生成 token 视为透明管道，预算不衰减，链只止于 prompt。
+ * `false` 时 `mutualInformationRatio` 仍按目标概率存储与展示，传播/边强度计算中 MI 系数恒为 1。
+ */
+let dagDecayAttributionToHighSurprisalTargetEnabled = true;
+export function setDagDecayAttributionToHighSurprisalTargetEnabled(enabled: boolean): void {
+    dagDecayAttributionToHighSurprisalTargetEnabled = enabled;
 }
 
 /**
@@ -83,30 +102,81 @@ export function setDagEdgeWeakenHighSurprisalEnabled(enabled: boolean): void {
  * {@link dagNodeCiVisualScaleEnabled} 为 false 时恒返回 1。
  */
 function dagGeneratedNodeCiVisualScale(targetProb: number | undefined): number {
-    if (!dagNodeCiVisualScaleEnabled) return 1;
-    if (targetProb !== undefined && Number.isFinite(targetProb) && targetProb > FULL_CONFIDENCE_PROBABILITY_BASELINE) return 1;
-    return 1 + computeConditionalInformationRatio(targetProb);
+    return dagCiVisualScaleFromTargetProb(targetProb, dagNodeCiVisualScaleEnabled);
 }
 
-/** 原生 `<title>` 中 CI/MI 百分号展示，与 Top-K 概率列 {@link formatTopkTooltipProbabilityPercent} 同形。 */
-function formatCiMiRatiosLineForTooltip(ciRatio: number, miRatio: number): string {
+/** DAG Top‑K tooltip 内 CI/MI 行，数值格式与原节点原生 title 一致（{@link formatTopkTooltipProbabilityPercent}）。 */
+function dagCiMiTooltipRowForProb(targetProb: number | undefined): { label: string; value: string } | undefined {
+    if (targetProb === undefined || !Number.isFinite(targetProb)) return undefined;
+    const ciRatio = computeConditionalInformationRatio(targetProb);
+    const miRatio = computeMutualInformationRatio(targetProb);
     const ci = Number.isFinite(ciRatio) ? formatTopkTooltipProbabilityPercent(ciRatio) : String(ciRatio);
     const mi = Number.isFinite(miRatio) ? formatTopkTooltipProbabilityPercent(miRatio) : String(miRatio);
-    return `CI/MI: ${ci} / ${mi}`;
+    return { label: 'CI/MI:', value: `${ci} / ${mi}` };
 }
 
-/** 边原生 `<title>` 中互信息率 α 的展示（节点 title 改用 {@link formatCiMiRatiosLineForTooltip}）。 */
-function formatMutualInformationRatioForTooltip(miRatio: number): string {
-    if (!Number.isFinite(miRatio)) return String(miRatio);
+const TOOLTIP_NA = 'N/A';
+
+/** 边原生 `<title>` 中互信息率 α 的展示。 */
+function formatMutualInformationRatioForTooltip(miRatio: number | undefined): string {
+    if (miRatio === undefined || !Number.isFinite(miRatio)) return TOOLTIP_NA;
     return formatTopkTooltipProbabilityPercent(miRatio);
 }
 
+function isPositiveFiniteShare(share: number | undefined): share is number {
+    return typeof share === 'number' && Number.isFinite(share) && share > 0;
+}
+
+/**
+ * 边级 MI 系数（直接归因强度、无焦点灰边）。
+ * 递归链上的传播折扣在节点级 {@link nodePropagationMiRatio}，二者分工不同。
+ */
+function effectiveMiRatio(miRatio: number | undefined): number | undefined {
+    if (!dagDecayAttributionToHighSurprisalTargetEnabled) return 1;
+    if (miRatio === undefined || !Number.isFinite(miRatio)) return undefined;
+    return miRatio;
+}
+
+function formatTooltipAttributionScore(normalizedScore: number | undefined): string {
+    if (normalizedScore === undefined || !Number.isFinite(normalizedScore)) return TOOLTIP_NA;
+    return normalizedScore.toFixed(3);
+}
+
+/** 直接归因份额的展示：L1 份额 × 目标真实 MI（与弱化开关无关，仅供读数）。 */
+function formatTooltipDirectAttributionShare(
+    attributionShare: number | undefined,
+    miRatio: number | undefined,
+): string {
+    if (!isPositiveFiniteShare(attributionShare)) return TOOLTIP_NA;
+    if (miRatio === undefined || !Number.isFinite(miRatio)) return TOOLTIP_NA;
+    return formatTopkTooltipProbabilityPercent(attributionShare * miRatio);
+}
+
+function formatTooltipRecursiveAttributionShare(share: number | undefined): string {
+    if (share === undefined || !Number.isFinite(share)) return TOOLTIP_NA;
+    return formatAttributionSharePercentForTooltip(share);
+}
+
+/** 节点 tooltip 归因份额：低于 {@link DAG_MIN_ATTRIBUTION_SHARE} 时显示 `< x%`（x 为阈值，1 位有效数字）。 */
+function formatAttributionSharePercentForTooltip(share: number): string {
+    const thresholdLabel = d3.format('.1g')(DAG_MIN_ATTRIBUTION_SHARE * 100) + '%';
+    if (!Number.isFinite(share) || share < DAG_MIN_ATTRIBUTION_SHARE) {
+        return `< ${thresholdLabel}`;
+    }
+    return formatTopkTooltipProbabilityPercent(share);
+}
+
+function formatTooltipLinkStrength(strength: number): string {
+    return Number.isFinite(strength) ? strength.toFixed(3) : TOOLTIP_NA;
+}
+
 export {
     clampLinearArcAdjacentGap,
     LINEAR_ARC_ADJACENT_GAP_DEFAULT,
     LINEAR_ARC_ADJACENT_GAP_MAX,
     LINEAR_ARC_ADJACENT_GAP_MIN,
     LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION,
+    LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE,
 };
 
 /** 图中节点业务字段（与 graphology 节点 attributes 为同一对象） */
@@ -132,10 +202,17 @@ type DagNodeAttrs = {
     nodeH: number;
     /** CI 视觉缩放倍数 `1 + CI` ∈ [1, 2]；prompt 节点为 `1`。供 CSS 字号变量使用。 */
     ciVisualScale: number;
+    /**
+     * 本步 {@link TokenGenStep} 的 `response.target_prob`（仅生成节点）。
+     * 下台阶等处用 {@link dagStepDownEffectiveCiRatio}(dagTargetProb)（高置信 p>p₁ 为 0；与「关闭 CI 视觉」无关）；
+     */
+    dagTargetProb?: number;
     /** {@link visualizeSpecialChars}（DAG：仅「空格后是 [A-Za-z0-9]」保留空格，其余空格为 ·），建点后不变 */
     displayLabel: string;
-    /** 原生 `<title>` 全文（与 `DISABLE_DAG_NODE_TOOLTIPS` 无关，便于切换时不必重算） */
-    nativeTitleText: string;
+    /** 悬停 / 选中焦点时 Top‑K tooltip；仅生成节点（`step >= 0`） */
+    gltrTooltipToken?: FrontendToken;
+    /** 跟在 tooltip 内 log perplexity 行之后的 CI/MI；与 {@link dagCiMiTooltipRowForProb} 同源 */
+    dagCiMiTooltipRow?: { label: string; value: string };
 };
 
 type DagNode = DagNodeAttrs;
@@ -145,29 +222,164 @@ type DagLink = {
     target: string;
     /**
      * 候选池内 max 归一后的归因分，区间约 [0, 1]；作为 `stroke-opacity` 的基项（再乘 {@link mutualInformationRatio}）。
-     * 池内稀疏化与建边前过滤均使用 {@link DAG_EDGE_MIN_DISPLAY_OPACITY}（见 genAttributeDagEdgeDisplay）；条件为 {@link dagLinkStrokeOpacity} 不低于该阈值。
+     * 池内稀疏化与建边前过滤均使用 {@link DAG_EDGE_MIN_NORMALIZED_SCORE}（见 genAttributeDagEdgeDisplay）。
      */
     normalizedScore?: number;
     /** 互信息率：仅作为本步入边的视觉透明度系数，不参与归因筛选。 */
     mutualInformationRatio?: number;
-    /** 本步内：该边池内 L1 份额在「仅可见边」（{@link DAG_EDGE_MIN_DISPLAY_OPACITY} 过滤后）上的占比；用于原生 title「Fan in share」 */
-    scoreShare?: number;
+    /** 本步内：该边在可见入边池内的 L1 份额（建边阈值过滤后归一），追因传播的基本单位。 */
+    attributionShare?: number;
     /** 与 `console.warn('[genAttributeDagView.align] …')` 正文一致（可多条，换行拼接） */
     alignmentNote?: string;
-    /** 边创建时固定的 `<title>` 全文 */
-    titleText: string;
 };
 
-/** 与 {@link refreshNodeLinkHighlight} 中边的 `stroke-opacity` 一致：`normalizedScore × mutualInformationRatio`（开关关闭时 MI 系数恒为 1）。 */
-function dagLinkStrokeOpacity(d: Pick<DagLink, 'normalizedScore' | 'mutualInformationRatio'>): number {
-    const mi = dagEdgeWeakenHighSurprisalEnabled ? (d.mutualInformationRatio ?? 1) : 1;
-    return (d.normalizedScore ?? 1) * mi;
+/**
+ * 该边的 attribution share：优先使用可见边池内的 L1 份额；无 attributionShare 时回退到 max-normalized score。
+ * max-normalized score 作为后备仅用于 attributionShare 尚未计算（如阈值过滤前）的场景。
+ */
+function edgeAttributionShare(d: Pick<DagLink, 'attributionShare' | 'normalizedScore'>): number {
+    const share = d.attributionShare;
+    if (typeof share === 'number' && Number.isFinite(share) && share > 0) return share;
+    const s = d.normalizedScore ?? 1;
+    return Number.isFinite(s) ? Math.max(0, s) : 1;
+}
+
+/**
+ * 无焦点时的边渲染强度：attribution share × {@link effectiveMiRatio}。
+ * 「Decay attribution to high-surprisal targets」关闭时 MI 系数恒为 1（展示仍见 {@link formatMutualInformationRatioForTooltip}）。
+ */
+function directAttributionStrength(
+    d: Pick<DagLink, 'attributionShare' | 'normalizedScore' | 'mutualInformationRatio'>,
+): number {
+    const mi = effectiveMiRatio(d.mutualInformationRatio) ?? 1;
+    return edgeAttributionShare(d) * mi;
 }
 
 function dagLinkEndpointKey(source: string, target: string): string {
     return `${source}->${target}`;
 }
 
+/** 节点 target 端 MI ratio（与 tooltip「Target MI ratio」同源；与 decay 开关无关）。 */
+function nodeTargetMiRatio(node: DagNode): number {
+    return computeMutualInformationRatio(node.dagTargetProb);
+}
+
+function maxHighlightEdgeShare(sharesByKey: Map<string, number>): number {
+    let max = 0;
+    for (const share of sharesByKey.values()) {
+        if (share > max) max = share;
+    }
+    return max;
+}
+
+/**
+ * 池内 max 归一后的 `stroke-opacity`；最强边刻度为 {@link maxOpacity}（默认 1）。
+ * 按实际值计算后，最终不低于 {@link DAG_EDGE_RENDER_OPACITY_FLOOR}，防止过淡不可见。
+ */
+function normalizeEdgeRenderOpacity(share: number, maxShare: number, maxOpacity = 1): number {
+    if (!Number.isFinite(share) || share <= 0) return 0;
+    const cap = Number.isFinite(maxOpacity) && maxOpacity > 0 ? maxOpacity : 1;
+    const scaled =
+        !Number.isFinite(maxShare) || maxShare <= 0
+            ? Math.min(cap, share)
+            : Math.min(cap, (share / maxShare) * cap);
+    if (scaled <= 0) return 0;
+    return Math.max(DAG_EDGE_RENDER_OPACITY_FLOOR, scaled);
+}
+
+/**
+ * 候选归因节点描边透明度：池内 `stay / max(stay)` 线性映射到 `[{@link DAG_NODE_STROKE_OPACITY_BASE}, 1]`，
+ * 避免弱节点描边过淡、在 UI 里看不出来（见 {@link DAG_NODE_STROKE_OPACITY_BASE}）。
+ */
+function normalizeNodeStrokeRenderOpacity(share: number, maxShare: number): number {
+    if (!Number.isFinite(share) || share <= 0) return 0;
+    const scaled =
+        !Number.isFinite(maxShare) || maxShare <= 0
+            ? Math.min(1, share)
+            : Math.min(1, share / maxShare);
+    if (scaled <= 0) return 0;
+    return DAG_NODE_STROKE_OPACITY_BASE + scaled * (1 - DAG_NODE_STROKE_OPACITY_BASE);
+}
+
+/** 焦点在 target 时单条入边份额（直接模式一跳；灰边与此时蓝边共用）。 */
+function perTargetIncomingEdgeShare(
+    link: Pick<DagLink, 'attributionShare' | 'normalizedScore'>,
+    targetNode: DagNode,
+): number {
+    const upstreamBudget = nodePropagationMiRatio(targetNode);
+    return Math.min(1, upstreamBudget * edgeAttributionShare(link));
+}
+
+/** 灰边 stroke-opacity：按各 target 入边池归一���与焦点在该 target 时的蓝边一致。 */
+function buildGrayRenderStrengthByEdgeKey(
+    graph: DirectedGraph<DagNodeAttrs>,
+    incomingLinksByTarget: Map<string, DagLink[]>,
+): Map<string, number> {
+    const byKey = new Map<string, number>();
+    for (const [targetId, links] of incomingLinksByTarget) {
+        if (!graph.hasNode(targetId)) continue;
+        const targetNode = graph.getNodeAttributes(targetId) as DagNode;
+        // prompt 节点（step < 0）不应出现在 incomingLinksByTarget（仅 update() 中生成节点作为 target 时写入），
+        // 此处防御：nodePropagationMiRatio 对 prompt 返回 0，全组 share=0，跳过以节省迭代。
+        if (targetNode.step < 0) continue;
+        let maxShare = 0;
+        const rows: Array<{ key: string; share: number }> = [];
+        for (const link of links) {
+            if (!graph.hasEdge(link.source, link.target)) continue;
+            const srcId = endpointNode(link.source, graph).id;
+            const share = perTargetIncomingEdgeShare(link, targetNode);
+            if (share > maxShare) maxShare = share;
+            rows.push({ key: dagLinkEndpointKey(srcId, targetId), share });
+        }
+        for (const { key, share } of rows) {
+            byKey.set(key, normalizeEdgeRenderOpacity(share, maxShare));
+        }
+    }
+    return byKey;
+}
+
+/**
+ * 递归模式：焦点链上**上游**节点的描边 raw 强度（stay；不含焦点本身）。
+ * 直接模式仅一跳，由蓝/红高亮边表达，不画来源描边。
+ * 显示判定：stay ≥ {@link DAG_MIN_ATTRIBUTION_SHARE}；描边透明度见 {@link buildNodeStrokeRenderStrengthById}。
+ */
+function computeUpstreamNodeStrokeShareById(
+    nodeShareById: Map<string, number>,
+    graph: DirectedGraph<DagNodeAttrs>,
+    focusId: string,
+): Map<string, number> {
+    const byNodeId = new Map<string, number>();
+    for (const [nodeId, nodeShare] of nodeShareById) {
+        if (nodeId === focusId) continue;
+        const stay = nodeShare * (1 - nodePropagationMiRatio(graph.getNodeAttributes(nodeId) as DagNode));
+        if (stay >= DAG_MIN_ATTRIBUTION_SHARE) byNodeId.set(nodeId, stay);
+    }
+    return byNodeId;
+}
+
+/** 池内 max 归一后的 render 强度；{@link maxOpacity} 为链内最强边刻度（蓝入边见 {@link refreshNodeLinkHighlight}，默认 1）。 */
+function buildMaxNormalizedRenderStrengthByKey(
+    sharesByKey: Map<string, number>,
+    maxOpacity = 1,
+): Map<string, number> {
+    const maxShare = maxHighlightEdgeShare(sharesByKey);
+    const byKey = new Map<string, number>();
+    for (const [key, share] of sharesByKey) {
+        byKey.set(key, normalizeEdgeRenderOpacity(share, maxShare, maxOpacity));
+    }
+    return byKey;
+}
+
+/** 递归链候选节点描边强度：stay 池内 max 归一后映射到 `[{@link DAG_NODE_STROKE_OPACITY_BASE}, 1]`。 */
+function buildNodeStrokeRenderStrengthById(stayByNodeId: Map<string, number>): Map<string, number> {
+    const maxShare = maxHighlightEdgeShare(stayByNodeId);
+    const byNodeId = new Map<string, number>();
+    for (const [nodeId, stay] of stayByNodeId) {
+        byNodeId.set(nodeId, normalizeNodeStrokeRenderOpacity(stay, maxShare));
+    }
+    return byNodeId;
+}
+
 /**
  * 流式增量：任一端节点 span 完全落在排除区间内则删边（不重算 Top‑N，与全量重放可轻微不一致）。
  * 同步 graphology 与并行 `links`。
@@ -175,6 +387,7 @@ function dagLinkEndpointKey(source: string, target: string): string {
 function pruneDagLinksTouchingFullyExcludedNodes(
     graph: DirectedGraph<DagNodeAttrs>,
     links: DagLink[],
+    incomingLinksByTarget: Map<string, DagLink[]>,
     intervals: [number, number][],
 ): void {
     if (intervals.length === 0) return;
@@ -205,11 +418,36 @@ function pruneDagLinksTouchingFullyExcludedNodes(
         links[write++] = link;
     }
     links.length = write;
+
+    for (const [targetId, incoming] of incomingLinksByTarget) {
+        if (incoming.length === 0) {
+            incomingLinksByTarget.delete(targetId);
+            continue;
+        }
+        let keep = 0;
+        for (const link of incoming) {
+            if (removedLinkKeys.has(dagLinkEndpointKey(link.source, link.target))) {
+                continue;
+            }
+            incoming[keep++] = link;
+        }
+        if (keep === 0) {
+            incomingLinksByTarget.delete(targetId);
+            continue;
+        }
+        incoming.length = keep;
+        if (!graph.hasNode(targetId)) {
+            incomingLinksByTarget.delete(targetId);
+        }
+    }
 }
 
 const SVG_MIN_W = 320;
 const SVG_MIN_H = 280;
 
+/** text-flow：`fitViewportToContent` 四边对称边距（px）。 */
+const DAG_TEXT_FLOW_FIT_PAD_PX = 24;
+
 /**
  * `.gen-attr-dag-stack` 布局尺寸(px)，供 SVG width/height 与 `fitViewportToContent` 共用。
  * 用 offsetWidth/offsetHeight（布局流尺寸）而非 getBoundingClientRect，
@@ -224,7 +462,7 @@ function stackLayoutViewportPx(stackEl: HTMLElement): { w: number; h: number } {
 
 /** text-flow：在「抵消 display-scale」基准上的初始 zoom 倍率（d3 的 k） */
 const DAG_INITIAL_ZOOM_BOOST_TEXT_FLOW = 2;
-/** linear-arc：同上 */
+/** linear-arc / linear-arc-step-down：同上 */
 const DAG_INITIAL_ZOOM_BOOST_LINEAR_ARC = 4;
 /** spiral：同上 */
 const DAG_INITIAL_ZOOM_BOOST_SPIRAL = 2;
@@ -234,6 +472,7 @@ function dagInitialZoomBoost(mode: DagLayoutMode): number {
         case 'text-flow':
             return DAG_INITIAL_ZOOM_BOOST_TEXT_FLOW;
         case 'linear-arc':
+        case 'linear-arc-step-down':
             return DAG_INITIAL_ZOOM_BOOST_LINEAR_ARC;
         case 'spiral':
             return DAG_INITIAL_ZOOM_BOOST_SPIRAL;
@@ -253,19 +492,18 @@ const CSS_VAR_DAG_LINK_STROKE_WIDTH = '--gen-attr-dag-link-stroke-width';
 
 /** 与 {@link start.scss} `--dag-normal-line-color` 一致（普通边：线 stroke + 箭头 marker stroke） */
 const CSS_VAR_DAG_NORMAL_LINE_COLOR = '--dag-normal-line-color';
-/** 与 {@link start.scss} `--dag-highlight-line-color-in` 一致（入边：指向焦点） */
+/** 与 {@link start.scss} `--dag-highlight-line-color-in`（`--accent-color`）一致（入边：指向焦点） */
 const CSS_VAR_DAG_HIGHLIGHT_LINE_IN = '--dag-highlight-line-color-in';
 /** 与 {@link start.scss} `--dag-highlight-line-color-out` 一致（出边：从焦点出发） */
 const CSS_VAR_DAG_HIGHLIGHT_LINE_OUT = '--dag-highlight-line-color-out';
+/** 与 {@link gen_attribute.scss} `.gen-attr-dag-node--recursive-chain` 中 `stroke-opacity` 一致（由 JS 写入 g 元素） */
+const CSS_VAR_DAG_NODE_RECURSIVE_SHARE = '--gen-attr-dag-node-recursive-share';
 
 /** 弱化：未排除的 prompt 无出边，或（prompt/生成区）邻域外且存在悬停/选中焦点时 */
 const DAG_NODE_WEAKEN_OPACITY = 0.5;
 /** 隐藏：节点 span 完全落在 exclude 规则命中区间内（prompt 与生成区各一套模式） */
 const DAG_NODE_HIDDEN_OPACITY = 0.1;
 
-/** 暂时关闭节点上的原生 `<title>` 悬浮提示；恢复时改为 `false`（边不受影响） */
-const DISABLE_DAG_NODE_TOOLTIPS = false;
-
 /**
  * 边端在矩形边界外侧的留白，相对测量层「1em」的比例（无单位）；与箭头/描边衔接用。
  * 测量层与节点几何同源（lmf-readout-text），故随字号/CSS 变化而变。
@@ -316,6 +554,21 @@ function nodeRx(d: DagNode): number {
     return Math.min(d.nodeW / 2, d.nodeH / 2);
 }
 
+/** stroke rect 外扩 pad=displayScale，与 scss `stroke-width: calc(2 * display-scale)` 一致，描边不压 fill。 */
+function syncNodeStrokeRects(
+    sel: d3.Selection<SVGGElement, DagNode, SVGGElement | null, unknown>,
+    displayScale: number,
+): void {
+    const p = displayScale;
+    sel.select('rect.gen-attr-dag-node-stroke')
+        .attr('x', -p)
+        .attr('y', -p)
+        .attr('width', (d) => d.nodeW + 2 * p)
+        .attr('height', (d) => d.nodeH + 2 * p)
+        .attr('rx', (d) => nodeRx(d) + p)
+        .attr('ry', (d) => nodeRx(d) + p);
+}
+
 export type GenAttributeDagHandle = {
     /**
      * 在首帧 `update`（第一步生成 token）之前调用一次：用全量 prompt token spans 建 prompt 层节点。
@@ -346,12 +599,16 @@ export type GenAttributeDagHandle = {
     reset(preserveUserViewport?: boolean): void;
     /**
      * zoom identity 后按内容适配视口；空图走默认缩放；`k` 上限 `k₀`（随当前布局模式的初始 zoom 倍率变化）。
-     * - `text-flow`：`rootG.getBBox()`（含边）等比落入内框。
-     * - `linear-arc`：仅按 `gen-attr-dag-nodes` 行宽定比，token 行相对内框竖直居中（弧不参与）。
+     * - `text-flow`：`rootG.getBBox()`（含边）等比落入内框；四边对称各 {@link DAG_TEXT_FLOW_FIT_PAD_PX}px。
+     * - `linear-arc` / `linear-arc-step-down`：仅按 `gen-attr-dag-nodes` 行宽定比，token 行相对内框竖直居中（弧不参与）。
      * 若 `layoutDirty` 为真则 no-op（仅已执行的 `syncSvgSize` 生效，不改 pan/zoom），但 `force` 为真时仍
      * fit 并清 dirty（例如刷新按钮的强制适配）。
      */
     fitViewportToContent(force?: boolean): void;
+    /** 当前选中节点 id；无选中为 `null`。 */
+    getSelectedNodeId(): string | null;
+    /** 设置选中节点（`null` 清除）；节点须已存在于图中。 */
+    setSelectedNodeId(id: string | null): void;
     /** 清除节点选中态（与点击画布空白等价）；不改变图数据，生成结束后可调用以去掉末 token 描边 */
     clearNodeSelection(): void;
     /** DAG 步进重放：更新 ▶ / ⏸ 按钮文案（由页面在播放开始/结束/暂停时调用） */
@@ -366,7 +623,7 @@ export type GenAttributeDagHandle = {
     /** 切换 DAG 节点布局模式并立即重排现有节点/边。 */
     setLayoutMode(mode: DagLayoutMode): void;
     /**
-     * linear-arc 下相邻节点矩形外侧边的水平间隙（px）。仅影响 linear-arc 几何；若在生成/播放中途调用且
+     * linear-arc 家族下相邻节点矩形外侧边的水平间隙（px）。��影响该家族几何；若在生成/播放中途调用且
      * `skipRefit` 为真，仅写入值，下一轮 `syncGraphToSvg`/空闲后再反映（与测量宽度语义一致）。
      */
     setLinearArcAdjacentGapPx(px: number, opts?: { skipRefit?: boolean }): void;
@@ -383,6 +640,12 @@ export type GenAttributeDagHandle = {
      * - `false`（默认）：保留为低透明度（{@link DAG_NODE_HIDDEN_OPACITY}）占位。
      */
     setHideExcludedTokens(hide: boolean): void;
+    /** 是否显示 token tooltip（UI: Show token tooltip；`showTokenInfoOnSelected`）。 */
+    setShowTokenInfoOnSelected(show: boolean): void;
+    /** 是否启用传播归因（UI: Propagated attribution mode；`recursiveAttributionEnabled`）。 */
+    setRecursiveAttributionEnabled(enabled: boolean): void;
+    /** 是否在直接归因焦点上额外展示从焦点出发的下游影响出边。 */
+    setShowDownstreamInfluence(show: boolean): void;
     /** prompt 层节点是否已注入（即 {@link setPromptTokenSpans} 至少成功添加过一个节点） */
     hasPromptSpans(): boolean;
     /** 移除 DAG 栈与刷新按钮（离开页面时调用） */
@@ -409,55 +672,50 @@ function formatNodeOffsetRange(id: string): string {
     return `[${a}, ${b})`;
 }
 
-function buildNodeNativeTitleText(
-    d: Pick<DagNode, 'displayLabel' | 'id' | 'step'> & { targetProb?: number },
-): string {
-    const lines = [
-        d.displayLabel,
-        `Offset: ${formatNodeOffsetRange(d.id)}`,
-        `Step: ${d.step}`,
+/**
+ * 边当前显示状态；在 {@link refreshNodeLinkHighlight} 中与 stroke 一并刷新 `<title>`。
+ *
+ * {@link recursiveAttributionShare} 为当前焦点下传播归因链上的份额（UI: Propagated；仅入边链；无焦点或不在链上为 undefined）。
+ * {@link linkStrength} 为 tooltip 用的原始强度；{@link renderStrength} 为写入 stroke-opacity 的值（直接模式灰边与蓝边同刻度）。
+ * 空行以上为建边后不变的直接归因指标。不用「opacity」命名：灰边与蓝/红高亮边在相同强度下 `stroke-opacity` 数值可相同，但肉眼对比度不同，
+ * 视觉效果由 stroke 颜色与透明度共同衍生，强度才是可比较的固定量。
+ */
+type DagLinkTitleSnapshot = {
+    normalizedScore?: number;
+    mutualInformationRatio?: number;
+    attributionShare?: number;
+    alignmentNote?: string;
+    src: DagNode;
+    tgt: DagNode;
+    /** 递归链入边上的传播份额 edgeShare；不在链上时为 undefined（直接模式或无焦点）。 */
+    recursiveAttributionShare?: number;
+    linkStrength: number;
+};
+
+function buildLinkTitleText(snapshot: DagLinkTitleSnapshot): string {
+    // 建边后不变；空行以下随焦点/传播归因变化（Attribution share (Propagated)、Link strength）。
+    const staticMetrics = [
+        `Attribution score: ${formatTooltipAttributionScore(snapshot.normalizedScore)}`,
+        `Target MI ratio: ${formatMutualInformationRatioForTooltip(snapshot.mutualInformationRatio)}`,
+        `Attribution share (Adjacent): ${formatTooltipDirectAttributionShare(
+            snapshot.attributionShare,
+            snapshot.mutualInformationRatio,
+        )}`,
     ];
-    const { targetProb } = d;
-    if (targetProb !== undefined && Number.isFinite(targetProb)) {
-        lines.push(`\nProb: ${formatTopkTooltipProbabilityPercent(targetProb)}`);
-        lines.push(`Information: ${DAG_TITLE_SURPRISAL_FMT(calculateSurprisal(targetProb))} bits`);
-        lines.push(
-            formatCiMiRatiosLineForTooltip(
-                computeConditionalInformationRatio(targetProb),
-                computeMutualInformationRatio(targetProb),
-            ),
-        );
+    if (snapshot.alignmentNote) {
+        staticMetrics.push(snapshot.alignmentNote);
     }
-    return lines.join('\n');
-}
-
-/** 建边时调用：端点已带 {@link DagNodeAttrs.displayLabel} */
-function buildLinkTitleText(
-    d: Pick<DagLink, 'normalizedScore' | 'mutualInformationRatio' | 'scoreShare' | 'alignmentNote'>,
-    src: DagNode,
-    tgt: DagNode
-): string {
-    const s = d.normalizedScore ?? 1;
-    const normStr = Number.isFinite(s) ? s.toFixed(3) : String(s);
-    const opacity = dagLinkStrokeOpacity(d);
-    const opacityStr = Number.isFinite(opacity) ? opacity.toFixed(3) : String(opacity);
 
     const metrics = [
-        `Attribution score: ${normStr}`,
-        `Target MI ratio: ${formatMutualInformationRatioForTooltip(d.mutualInformationRatio ?? 1)}`,
-        `Link strength: ${opacityStr}`,
+        staticMetrics.join('\n'),
+        '',
+        `Attribution share (Propagated): ${formatTooltipRecursiveAttributionShare(snapshot.recursiveAttributionShare)}`,
+        `Link strength: ${formatTooltipLinkStrength(snapshot.linkStrength)}`,
     ];
-    const share = d.scoreShare;
-    if (typeof share === 'number' && Number.isFinite(share) && share > 0) {
-        metrics.push(`Fan in share: ${(share * 100).toFixed(1)}%`);
-    }
-    if (d.alignmentNote) {
-        metrics.push(d.alignmentNote);
-    }
 
     return [
-        `From:\n${src.displayLabel}\nOffset: ${formatNodeOffsetRange(src.id)}`,
-        `To:\n${tgt.displayLabel}\nOffset: ${formatNodeOffsetRange(tgt.id)}`,
+        `From:\n${snapshot.src.displayLabel}\nOffset: ${formatNodeOffsetRange(snapshot.src.id)}`,
+        `To:\n${snapshot.tgt.displayLabel}\nOffset: ${formatNodeOffsetRange(snapshot.tgt.id)}`,
         metrics.join('\n'),
     ].join('\n\n');
 }
@@ -480,45 +738,147 @@ function snapSubwordNode(node: DagNode, prev: DagNode | null): void {
     node.cx = prev.cx + (prev.nodeW + node.nodeW) / 2;
 }
 
-/** 焦点 + 一层入邻（直接祖先）+ 一层出邻（直接后代），用于选中/悬停高亮范围 */
-function oneHopNeighborhood(graph: DirectedGraph<DagNodeAttrs>, nodeId: string): Set<string> {
-    const active = new Set<string>([nodeId]);
-    graph.forEachInNeighbor(nodeId, (n) => {
-        active.add(n);
-    });
-    graph.forEachOutNeighbor(nodeId, (n) => {
-        active.add(n);
-    });
-    return active;
+/**
+ * 传播归因 vs 直接归因（设计理念）
+ *
+ * UI 称 Propagated attribution mode；代码标识 `recursiveAttribution*`（递归向上传播份额，二者同义）。
+ *
+ * - 直接归因：只看一跳前驱，回答“它直接依赖了谁”。
+ * - 传播归因：持续向上追溯，直到信息来源，回答“真正原因来自哪里”。
+ *
+ * 来源通常有两类：prompt，或低置信/高惊讶的生成 token（含 teacher forcing）。
+ * 高置信中间 token 更像传导节点，归因会继续穿过它。
+ *
+ * UI 语义：
+ * - 灰边：各 target 入边池内 max 归一（无焦点时的默认边）；
+ * - 焦点蓝入边：链内 max 归一，最强边刻度为焦点 target 的实际 MI ratio；最终 opacity 不低于 {@link DAG_EDGE_RENDER_OPACITY_FLOOR}；
+ * - 上游节点描边（仅传播归因）：stay 池内 max 归一，映射到 `[{@link DAG_NODE_STROKE_OPACITY_BASE}, 1]`；直接模式一跳由边色表达，不描边。
+ * - 传播模式节点提亮与描边一致：仅焦点 + stay 达阈的上游（传导节点仅保留蓝边，不提亮）。
+ */
+type FocusAttributionState = {
+    activeNodeIds: Set<string>;
+    /** 传播归因链上入边的份额（用于蓝边强度；`recursiveAttributionShare`）。 */
+    incomingEdgeShareByKey: Map<string, number>;
+    /** 仅直接模式：焦点出发的下游影响边。 */
+    downstreamEdgeStrengthByKey: Map<string, number>;
+    /** 链上各节点累计份额（用于计算节点停留量）。 */
+    nodeShareById: Map<string, number>;
+};
+
+/** 节点在递归传播中的传导系数：越低越像来源，越高越像传导节点。 */
+function nodePropagationMiRatio(node: DagNode): number {
+    if (node.step < 0) return 0;
+    if (!dagDecayAttributionToHighSurprisalTargetEnabled) return 1;
+    return dagPropagationMiRatio(node.dagTargetProb);
 }
 
-/** 边是否与焦点节点邻接（用于高亮边样式与 SVG 中置于灰边之上） */
-function dagLinkIncidentToFocus(
-    graph: DirectedGraph<DagNodeAttrs>,
-    focusId: string | null,
-    d: DagLink
-): boolean {
-    if (!focusId) return false;
-    const s = endpointNode(d.source, graph).id;
-    const t = endpointNode(d.target, graph).id;
-    return s === focusId || t === focusId;
+type DagLinkHighlightDisplay = {
+    stroke: string;
+    /** 写入 stroke-opacity（链内 max 归一；蓝入边最强边刻度见 {@link refreshNodeLinkHighlight}，红出边/灰边为 1）。 */
+    renderStrength: number;
+    /** tooltip「Link strength」：原始强度，不做归一。 */
+    linkStrength: number;
+    recursiveAttributionShare?: number;
+};
+
+/** 焦点下边的视觉规则：传播归因看“向上原因链”，直接看“一跳关系 + 可选下游影响”。 */
+function resolveDagLinkHighlightDisplay(
+    d: DagLink,
+    edgeKey: string,
+    focusState: FocusAttributionState | null,
+    recursiveAttributionEnabled: boolean,
+    grayRenderByKey: Map<string, number>,
+    incomingHighlightRenderByKey: Map<string, number>,
+    downstreamHighlightRenderByKey: Map<string, number>,
+): DagLinkHighlightDisplay {
+    const directStrength = directAttributionStrength(d);
+    const grayRender = grayRenderByKey.get(edgeKey) ?? directStrength;
+
+    if (focusState) {
+        const downstreamStrength = focusState.downstreamEdgeStrengthByKey.get(edgeKey);
+        if (downstreamStrength != null) {
+            return {
+                stroke: `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_OUT})`,
+                renderStrength: downstreamHighlightRenderByKey.get(edgeKey)!,
+                linkStrength: downstreamStrength,
+            };
+        }
+
+        const incomingShare = focusState.incomingEdgeShareByKey.get(edgeKey);
+        if (incomingShare != null) {
+            return {
+                stroke: `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_IN})`,
+                renderStrength: incomingHighlightRenderByKey.get(edgeKey)!,
+                linkStrength: incomingShare,
+                recursiveAttributionShare: recursiveAttributionEnabled ? incomingShare : undefined,
+            };
+        }
+    }
+
+    return {
+        stroke: `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`,
+        renderStrength: grayRender,
+        linkStrength: directStrength,
+    };
 }
 
-/**
- * 邻接焦点时边的描边：从焦点出发 → 红；指向焦点 → 蓝（自环视为「出发」）。
- * 非邻接返回 `null`，调用方用默认边色。
- */
-function dagLinkHighlightStroke(
+function computeFocusAttributionState(
     graph: DirectedGraph<DagNodeAttrs>,
-    focusId: string | null,
-    d: DagLink
-): string | null {
-    if (!focusId) return null;
-    const s = endpointNode(d.source, graph).id;
-    const t = endpointNode(d.target, graph).id;
-    if (s !== focusId && t !== focusId) return null;
-    if (s === focusId) return `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_OUT})`;
-    return `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_IN})`;
+    nodesSortedByStepDesc: DagNode[],
+    incomingLinksByTarget: Map<string, DagLink[]>,
+    focusId: string,
+    options: { maxIncomingDepth: number; includeDownstreamInfluence: boolean },
+): FocusAttributionState | null {
+    if (!graph.hasNode(focusId)) return null;
+
+    // 从焦点向上追溯：递归模式追到来源；直接模式仅保留一跳前驱。
+    const activeNodeIds = new Set<string>([focusId]);
+    const incomingEdgeShareByKey = new Map<string, number>();
+    const downstreamEdgeStrengthByKey = new Map<string, number>();
+    const nodeShareById = new Map<string, number>([[focusId, 1]]);
+    const remainingDepthByNodeId = new Map<string, number>([[focusId, options.maxIncomingDepth]]);
+
+    for (const node of nodesSortedByStepDesc) {
+        // min(1)/max(0) 仅防御，正常路径下 nodeShare ∈ (0, 1]。
+        const nodeShare = Math.min(1, Math.max(0, nodeShareById.get(node.id) ?? 0));
+        if (nodeShare <= 0) continue;
+        const remainingDepth = remainingDepthByNodeId.get(node.id) ?? 0;
+        if (remainingDepth <= 0) continue;
+
+        // 低系数节点更接近来源，高系数节点更接近传导。
+        const upstreamBudget = nodeShare * nodePropagationMiRatio(node);
+        if (upstreamBudget < DAG_MIN_ATTRIBUTION_SHARE) continue;
+
+        for (const link of incomingLinksByTarget.get(node.id) ?? []) {
+            if (!graph.hasEdge(link.source, link.target)) continue;
+            const srcId = endpointNode(link.source, graph).id;
+            // min(1) 仅防御：attributionShare L1 归一且 MI ≤ 1 保证乘积不超过 1。
+            const edgeShare = Math.min(1, upstreamBudget * edgeAttributionShare(link));
+            if (edgeShare < DAG_MIN_ATTRIBUTION_SHARE) continue;
+
+            incomingEdgeShareByKey.set(dagLinkEndpointKey(srcId, node.id), edgeShare);
+            activeNodeIds.add(srcId);
+            // min(1) 仅防御：nodeShare 从 1 出发，经 attributionShare 分配与 MI 衰减后各节点累积不超过 1。
+            nodeShareById.set(srcId, Math.min(1, (nodeShareById.get(srcId) ?? 0) + edgeShare));
+            remainingDepthByNodeId.set(
+                srcId,
+                Math.max(remainingDepthByNodeId.get(srcId) ?? 0, remainingDepth - 1),
+            );
+        }
+    }
+
+    // 直接模式可附带展示“焦点影响了谁”。
+    if (options.includeDownstreamInfluence) {
+        graph.forEachOutEdge(focusId, (_edgeId, edgeAttrs, srcId, tgtId) => {
+            const link = edgeAttrs as unknown as Pick<DagLink, 'attributionShare' | 'normalizedScore' | 'mutualInformationRatio'>;
+            const strength = directAttributionStrength(link);
+            if (strength < DAG_MIN_ATTRIBUTION_SHARE) return;
+            downstreamEdgeStrengthByKey.set(dagLinkEndpointKey(srcId, tgtId), strength);
+            activeNodeIds.add(tgtId);
+        });
+    }
+
+    return { activeNodeIds, incomingEdgeShareByKey, downstreamEdgeStrengthByKey, nodeShareById };
 }
 
 /**
@@ -562,12 +922,18 @@ export type InitGenAttributeDagViewOptions = {
     /** DAG 节点布局模式；默认 `text-flow`。 */
     layoutMode?: DagLayoutMode;
     /**
-     * linear-arc：相邻节点矩形外侧边的水平间隙（px），决定水平方向疏密；
+     * linear-arc 家族：相邻节点矩形外侧边的水平间隙（px），决定水平方向疏密；
      * 默认 {@link LINEAR_ARC_ADJACENT_GAP_DEFAULT}。
      */
     linearArcAdjacentGapPx?: number;
     /** 被 exclude 规则命中的节点是否完全隐藏（true）还是仅降至 {@link DAG_NODE_HIDDEN_OPACITY}（false，默认）。 */
     hideExcludedTokens?: boolean;
+    /** 是否显示 token tooltip（UI: Show token tooltip；`showTokenInfoOnSelected`）。 */
+    showTokenInfoOnSelected?: boolean;
+    /** 传播归因（UI: Propagated attribution mode；`recursiveAttributionEnabled`）；默认 `false`。 */
+    recursiveAttributionEnabled?: boolean;
+    /** 直接归因模式下是否展示从焦点出发的下游影响出边；默认 `false`。 */
+    showDownstreamInfluence?: boolean;
     /** 边 Top-P 覆盖阈值（候选池内累计份额）；���认 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}。 */
     edgeTopPCoverage?: number;
     /** 进入/退出/切换全屏失败时（常见于移动端不支持元素全屏等）。不传则无提示。 */
@@ -597,6 +963,9 @@ export function initGenAttributeDagView(
         linearArcAdjacentGapPx = clampLinearArcAdjacentGap(iv);
     }
     let hideExcludedTokens: boolean = options?.hideExcludedTokens ?? false;
+    let showTokenInfoOnSelected: boolean = options?.showTokenInfoOnSelected ?? false;
+    let recursiveAttributionEnabled: boolean = options?.recursiveAttributionEnabled ?? false;
+    let showDownstreamInfluence: boolean = options?.showDownstreamInfluence ?? false;
     let edgeTopPCoverage = clampDagEdgeTopPCoverage(
         options?.edgeTopPCoverage ?? DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
     );
@@ -624,6 +993,8 @@ export function initGenAttributeDagView(
             isBatching: () => false,
             reset: noop,
             fitViewportToContent: noop,
+            getSelectedNodeId: () => null,
+            setSelectedNodeId: noop,
             clearNodeSelection: noop,
             setDagPlaybackPlaying: noop,
             setMeasureWidthPx: noop,
@@ -632,6 +1003,9 @@ export function initGenAttributeDagView(
             setDagCompactness: noop,
             setEdgeTopPCoverage: noop,
             setHideExcludedTokens: noop,
+            setShowTokenInfoOnSelected: noop,
+            setRecursiveAttributionEnabled: noop,
+            setShowDownstreamInfluence: noop,
             hasPromptSpans: () => false,
             detach: noop,
         };
@@ -642,13 +1016,33 @@ export function initGenAttributeDagView(
     detachGenAttributeDagPanel.get(rootEl)?.();
     resultsRoot
         .selectAll(
-            '.gen-attr-dag-stack, svg.gen-attr-dag-svg, button.gen-attr-dag-refresh, button.gen-attr-dag-play, button.gen-attr-dag-fullscreen'
+            '.gen-attr-dag-stack, .gen-attr-dag-topk-tooltip, svg.gen-attr-dag-svg, button.gen-attr-dag-refresh, button.gen-attr-dag-play, button.gen-attr-dag-fullscreen'
         )
         .remove();
 
     const stack = resultsRoot.append('div').attr('class', 'gen-attr-dag-stack');
     const stackEl = stack.node() as HTMLElement;
 
+    const dagTooltipEh = new SimpleEventHandler(stackEl);
+    const dagTooltipRoot = resultsRoot.append('div').attr('class', 'tooltip gen-attr-dag-topk-tooltip');
+    dagTooltipRoot.append('div').attr('class', 'currentToken');
+    dagTooltipRoot.append('div').attr('class', 'myDetail');
+    dagTooltipRoot
+        .append('div')
+        .attr('class', 'gen-attr-dag-topk-tooltip-predictions-scroll')
+        .append('div')
+        .attr('class', 'predictions predictions-table');
+    const dagTopkToolTip = new ToolTip(dagTooltipRoot, dagTooltipEh, {
+        surprisalRowLabel: tr('log perplexity:'),
+        placement: 'parent-bottom-right',
+        pointerInteractive: false,
+    });
+
+    /** DAG Top‑K tooltip：挂载初期为 stub；{@link syncGenAttrDagTopkTooltipImpl} 在 {@link refreshNodeLinkHighlight} 定义之后赋值 */
+    let syncGenAttrDagTopkTooltipImpl: () => void = () => {
+        dagTopkToolTip.hideAndReset();
+    };
+
     /** 非 text-flow 时节点不可拖；用该类覆盖选中态的 grab 光标（linear-arc / spiral 等）。 */
     function syncStackLayoutDragUi(): void {
         stackEl.classList.toggle('gen-attr-dag-no-node-drag-layout', layoutMode !== 'text-flow');
@@ -697,6 +1091,7 @@ export function initGenAttributeDagView(
     function refreshDagScaleDerivedFromCss(): void {
         displayScale = readDisplayScaleFromCss(stackEl);
         linkEndInsetPx = linkEndInsetBaseAtUnitScalePx(measureRoot) * displayScale;
+        syncNodeStrokeRects(nodeSel, displayScale);
     }
 
     function setDagCompactness(c: number): void {
@@ -735,6 +1130,7 @@ export function initGenAttributeDagView(
             // 仅用户交互（滚轮/拖平移/双击）计入「改动布局」；程序触发的 transform
             // （init 初始缩放、`fitViewportToContent`）`sourceEvent === null`，不置 dirty。
             if (event.sourceEvent) layoutDirty = true;
+            syncGenAttrDagTopkTooltipImpl();
         });
 
     function applyInitialDagZoom(): void {
@@ -750,14 +1146,37 @@ export function initGenAttributeDagView(
     const nodeG = rootG.append('g').attr('class', 'gen-attr-dag-nodes');
     /** 邻接焦点的高亮边：在节点层之后绘制，避免被节点遮挡 */
     const linkGFront = rootG.append('g').attr('class', 'gen-attr-dag-links-front');
+    /** 与视觉节点同几何的透明命中层，置于 linkGFront 之上，避免蓝线挡住 hover/click */
+    const nodeGHit = rootG.append('g').attr('class', 'gen-attr-dag-nodes-hit');
 
     const graph = new DirectedGraph<DagNodeAttrs>();
     let nodes: DagNode[] = [];
+    /** `nodes` 按 step 降序（新→旧→prompt）排列的副本，供 {@link computeFocusAttributionState} 使用，避免每次 hover 重新排序。 */
+    let nodesSortedByStepDesc: DagNode[] = [];
     let links: DagLink[] = [];
+    /** 按 targetId 索引的入边列表，供 {@link computeFocusAttributionState} 使用，避免每次 hover O(N×E) 全扫描。 */
+    const incomingLinksByTarget = new Map<string, DagLink[]>();
+    /** 灰边渲染强度缓存；图结构变化（{@link syncGraphToSvg}）或 {@link reset} 时置 null 失效。 */
+    let grayRenderCache: Map<string, number> | null = null;
     let stepProcessed = 0;
     let selectedId: string | null = null;
-    /** 临时焦点：与选中同款子图高亮；优先于 {@link selectedId}，移出节点后回落到选中态 */
+    /** 悬浮节点 id；无选中时参与归因预览焦点，有选中时仅驱动 `--hover` 等样式，不改归因焦点 */
     let hoveredId: string | null = null;
+    /** 最近一次 {@link refreshNodeLinkHighlight} 计算出的归因状态（基于 {@link effectiveFocusId}）；tooltip 用于展示归因份额 */
+    let currentFocusState: FocusAttributionState | null = null;
+
+    /** 归因预览焦点：有选中则固定选中节点，否则随悬浮临时预览 */
+    function effectiveFocusId(): string | null {
+        return selectedId ?? hoveredId;
+    }
+
+    /** tooltip 锚点：悬浮任意节点时展示该节点；无悬浮则展示焦点节点（选中 > 无） */
+    function tooltipFocusId(): string | null {
+        if (hoveredId != null) {
+            return graph.hasNode(hoveredId) ? hoveredId : null;
+        }
+        return effectiveFocusId();
+    }
     /**
      * 与 {@link pruneDagLinksTouchingFullyExcludedNodes} / 预处理同源：全串上的 exclude 半开区间，
      * 供节点「隐藏」透明度判定（{@link isOffsetSpanFullyExcluded}）。在 {@link setPromptTokenSpans} 与每步
@@ -783,6 +1202,32 @@ export function initGenAttributeDagView(
         .selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link')
         .data<DagLink>([], dagLinkDataKey);
     let nodeSel = nodeG.selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node').data<DagNode>([], (d) => d.id);
+    let nodeHitSel = nodeGHit
+        .selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node-hit')
+        .data<DagNode>([], (d) => d.id);
+
+    /** 与 {@link nodeSel} 同序同 transform（paint 各布局模式之后调用） */
+    function syncNodeHitTransforms(): void {
+        const visualNodes = nodeSel.nodes();
+        nodeHitSel.attr('transform', (_d, i) => d3.select(visualNodes[i]).attr('transform'));
+    }
+
+    function bindNodePointerHandlers(
+        sel: d3.Selection<SVGGElement, DagNode, SVGGElement | null, unknown>,
+    ): void {
+        sel.on('mouseenter', (_event, d) => {
+            hoveredId = d.id;
+            refreshNodeLinkHighlight();
+        })
+            .on('mouseleave', () => {
+                hoveredId = null;
+                refreshNodeLinkHighlight();
+            })
+            .on('click', (event, d) => {
+                event.stopPropagation();
+                setSelectedNodeId(selectedId === d.id ? null : d.id);
+            });
+    }
 
     function syncSvgSize(): void {
         const { w, h } = stackLayoutViewportPx(stackEl);
@@ -790,7 +1235,8 @@ export function initGenAttributeDagView(
     }
 
     function paint(): void {
-        if (layoutMode === 'linear-arc') {
+        syncNodeStrokeRects(nodeSel, displayScale);
+        if (layoutMode === 'linear-arc' || layoutMode === 'linear-arc-step-down') {
             const layoutNodes = hideExcludedTokens
                 ? nodes.filter((n) => !isOffsetSpanFullyExcluded(n.start, n.end, dagExcludeIntervals))
                 : nodes;
@@ -799,14 +1245,13 @@ export function initGenAttributeDagView(
                 nodeSel,
                 nodes: layoutNodes,
                 adjacentGapPx: linearArcAdjacentGapPx,
+                variant: layoutMode === 'linear-arc-step-down' ? 'step-down' : 'flat',
                 getLinkNodes: (d) => ({
                     src: endpointNode(d.source, graph),
                     tgt: endpointNode(d.target, graph),
                 }),
             });
-            return;
-        }
-        if (layoutMode === 'spiral') {
+        } else if (layoutMode === 'spiral') {
             const layoutNodes = hideExcludedTokens
                 ? nodes.filter((n) => !isOffsetSpanFullyExcluded(n.start, n.end, dagExcludeIntervals))
                 : nodes;
@@ -820,17 +1265,18 @@ export function initGenAttributeDagView(
                     tgt: endpointNode(d.target, graph),
                 }),
             });
-            return;
+        } else {
+            paintTextFlowLayout({
+                linkSel,
+                nodeSel,
+                linkEndInsetPx,
+                getLinkNodes: (d) => ({
+                    src: endpointNode(d.source, graph),
+                    tgt: endpointNode(d.target, graph),
+                }),
+            });
         }
-        paintTextFlowLayout({
-            linkSel,
-            nodeSel,
-            linkEndInsetPx,
-            getLinkNodes: (d) => ({
-                src: endpointNode(d.source, graph),
-                tgt: endpointNode(d.target, graph),
-            }),
-        });
+        syncNodeHitTransforms();
     }
 
     let dragPointerOffset: { x: number; y: number } | null = null;
@@ -858,32 +1304,56 @@ export function initGenAttributeDagView(
             d.cx = x - offset.x;
             d.cy = y - offset.y;
             paint();
+            syncGenAttrDagTopkTooltipImpl();
         })
         .on('end', () => {
             dragPointerOffset = null;
         });
 
-    /**
-     * 节点透明度：先按「一跳邻域」提亮为 1（选中先于悬停，邻域内一致）；
-     * 否则被 exclude 整段命中的为「隐藏」({@link DAG_NODE_HIDDEN_OPACITY})（prompt/生成区一致）；
-     * 其余节点：prompt 无出边时弱化；存在焦点时，所有邻域外非隐藏节点弱化（与原先焦点压暗一致）。
-     * 边的高亮仍以悬停优先、否则选中为焦点（{@link dagLinkIncidentToFocus}）。
-     */
+    /** 焦点高亮：递归强调来源链，直接强调一跳关系。 */
     function refreshNodeLinkHighlight(): void {
-        const focusId = hoveredId ?? selectedId;
-        const selectedNbhd = selectedId ? oneHopNeighborhood(graph, selectedId) : null;
-        const hoveredNbhd = hoveredId ? oneHopNeighborhood(graph, hoveredId) : null;
-
+        const focusId = effectiveFocusId();
+        const focusState = focusId
+            ? computeFocusAttributionState(graph, nodesSortedByStepDesc, incomingLinksByTarget, focusId, {
+                maxIncomingDepth: recursiveAttributionEnabled ? Number.POSITIVE_INFINITY : 1,
+                includeDownstreamInfluence: !recursiveAttributionEnabled && showDownstreamInfluence,
+            })
+            : null;
+        currentFocusState = focusState;
+        const focusNodeIds = focusState?.activeNodeIds ?? null;
+        const nodeStrokeShareById =
+            !recursiveAttributionEnabled || focusState == null || focusId == null
+                ? null
+                : computeUpstreamNodeStrokeShareById(focusState.nodeShareById, graph, focusId);
+        const nodeStrokeRenderById =
+            nodeStrokeShareById == null ? null : buildNodeStrokeRenderStrengthById(nodeStrokeShareById);
+        const focusTargetMiRatio =
+            focusId != null && graph.hasNode(focusId)
+                ? nodeTargetMiRatio(graph.getNodeAttributes(focusId) as DagNode)
+                : 1;
+        const incomingHighlightRenderByKey =
+            focusState == null
+                ? new Map<string, number>()
+                : buildMaxNormalizedRenderStrengthByKey(focusState.incomingEdgeShareByKey, focusTargetMiRatio);
+        const downstreamHighlightRenderByKey =
+            focusState == null
+                ? new Map<string, number>()
+                : buildMaxNormalizedRenderStrengthByKey(focusState.downstreamEdgeStrengthByKey);
+        grayRenderCache ??= buildGrayRenderStrengthByEdgeKey(graph, incomingLinksByTarget);
+        const grayRenderByKey = grayRenderCache;
+        const nodeDisplay = (d: DagNode): string | null =>
+            hideExcludedTokens && isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)
+                ? 'none'
+                : null;
         nodeSel
             .classed('gen-attr-dag-node--hover', (d) => hoveredId === d.id)
             .classed('gen-attr-dag-node--selected', (d) => selectedId === d.id)
-            .style('display', (d) =>
-                hideExcludedTokens && isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)
-                    ? 'none' : null
-            )
+            .style('display', nodeDisplay)
             .attr('opacity', (d) => {
-                if (selectedNbhd?.has(d.id)) return 1;
-                if (hoveredNbhd?.has(d.id)) return 1;
+                const nodeFullyHighlighted = recursiveAttributionEnabled
+                    ? d.id === focusId || (nodeStrokeShareById?.has(d.id) ?? false)
+                    : (focusNodeIds?.has(d.id) ?? false);
+                if (nodeFullyHighlighted) return 1;
                 if (isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)) {
                     return hideExcludedTokens ? 0 : DAG_NODE_HIDDEN_OPACITY;
                 }
@@ -891,36 +1361,134 @@ export function initGenAttributeDagView(
                 const isPromptLeaf = hasGenTokens && d.step === -1 && graph.outDegree(d.id) === 0;
                 if (focusId || isPromptLeaf) return DAG_NODE_WEAKEN_OPACITY;
                 return 1;
+            })
+            .classed('gen-attr-dag-node--recursive-chain', (d) => nodeStrokeShareById?.has(d.id) ?? false)
+            .style(CSS_VAR_DAG_NODE_RECURSIVE_SHARE, (d) => {
+                const renderStrength = nodeStrokeRenderById?.get(d.id);
+                return renderStrength != null ? String(renderStrength) : null;
             });
-        // 每条边独立 marker：线与箭头 path 同步 stroke / stroke-opacity。
-        // normalizedScore 决定边内相对强弱（与 opacity 基项一致）；互信息率只作为整步入边的视觉折扣。
-        linkSel.each(function(d) {
-            const op = dagLinkStrokeOpacity(d);
-            const stroke =
-                dagLinkHighlightStroke(graph, focusId, d) ?? `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`;
+        nodeHitSel
+            .classed('gen-attr-dag-node--hover', (d) => hoveredId === d.id)
+            .classed('gen-attr-dag-node--selected', (d) => selectedId === d.id)
+            .style('display', nodeDisplay);
+        // 每条边：颜色/强度（见 resolveDagLinkHighlightDisplay）、`<title>` 一并刷新（含 linkGFront 高亮边）。
+        rootG.selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link').each(function(d) {
+            const srcId = endpointNode(d.source, graph).id;
+            const tgtId = endpointNode(d.target, graph).id;
+            const edgeKey = dagLinkEndpointKey(srcId, tgtId);
+            const { stroke, renderStrength, linkStrength, recursiveAttributionShare } =
+                resolveDagLinkHighlightDisplay(
+                    d,
+                    edgeKey,
+                    focusState,
+                    recursiveAttributionEnabled,
+                    grayRenderByKey,
+                    incomingHighlightRenderByKey,
+                    downstreamHighlightRenderByKey,
+                );
             const g = d3.select(this);
-            g.select('path.gen-attr-dag-link-visible').attr('stroke', stroke).attr('stroke-opacity', op);
+            const srcAttrs = graph.getNodeAttributes(srcId) as DagNode;
+            const tgtAttrs = graph.getNodeAttributes(tgtId) as DagNode;
+            g.select('title').text(
+                buildLinkTitleText({
+                    normalizedScore: d.normalizedScore,
+                    mutualInformationRatio: d.mutualInformationRatio,
+                    attributionShare: d.attributionShare,
+                    alignmentNote: d.alignmentNote,
+                    src: srcAttrs,
+                    tgt: tgtAttrs,
+                    recursiveAttributionShare,
+                    linkStrength,
+                }),
+            );
+            g.select('path.gen-attr-dag-link-visible').attr('stroke', stroke).attr('stroke-opacity', renderStrength);
             linkMarkersDefs
                 .select<SVGPathElement>(`#${dagLinkMarkerElementId(d.source, d.target)} path`)
                 .attr('stroke', stroke)
-                .attr('stroke-opacity', op);
-        });
-        // 灰边在 linkG、高亮边在 linkGFront（位于 nodeG 之后），既不被灰边也不被节点遮挡。
-        // 同层内保持 DOM 插入顺序（= `links` push 顺序）即可，无需显式 sort：
-        // - `links` 只 push、不重排；
-        // - 新 `<g>` 由 d3 `enter().append` 追加在 `linkG` 末尾；
-        // - 下面仅在父节点不一致时才 `appendChild`，避免白搬动导致末尾顺序被打乱。
-        rootG.selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link').each(function(d) {
-            const incident = dagLinkIncidentToFocus(graph, focusId, d);
+                .attr('stroke-opacity', renderStrength);
+
+            const incident =
+                focusState != null &&
+                (focusState.incomingEdgeShareByKey.has(edgeKey) ||
+                    focusState.downstreamEdgeStrengthByKey.has(edgeKey));
             const parent = incident ? linkGFront : linkG;
             const parentNode = parent.node()!;
             if (this.parentNode !== parentNode) {
                 parentNode.appendChild(this as SVGGElement);
             }
         });
+
+        syncGenAttrDagTopkTooltipImpl();
     }
 
+    syncGenAttrDagTopkTooltipImpl = (): void => {
+        if (!showTokenInfoOnSelected) {
+            dagTopkToolTip.hideAndReset();
+            return;
+        }
+        const focusIdNext = tooltipFocusId();
+        if (!focusIdNext || !graph.hasNode(focusIdNext)) {
+            dagTopkToolTip.hideAndReset();
+            return;
+        }
+        const attrs = graph.getNodeAttributes(focusIdNext) as DagNode;
+        // 生成节点必须有 gltrTooltipToken；prompt 节点用 label 构造最简 token
+        const isPromptNode = attrs.step < 0;
+        if (!isPromptNode && !attrs.gltrTooltipToken) {
+            dagTopkToolTip.hideAndReset();
+            return;
+        }
+        const rect = nodeSel
+            .filter((d: DagNode) => d.id === focusIdNext)
+            .select<SVGRectElement>('rect.gen-attr-dag-node-fill')
+            .node();
+        if (!rect) {
+            dagTopkToolTip.hideAndReset();
+            return;
+        }
+        const tokenForTooltip: FrontendToken = attrs.gltrTooltipToken ?? {
+            raw: attrs.label,
+            offset: [attrs.start, attrs.end],
+            pred_topk: [],
+        };
+
+        // 构建 augment：归因份额行（token 下方最前）+ CI/MI 行（surprisal 之后）
+        const rowsBeforeInfo: ToolTipUpdateAugment['rowsBeforeInfo'] = [];
+        if (selectedId && hoveredId && currentFocusState && hoveredId !== selectedId && graph.hasNode(selectedId)) {
+            const selectedStep = (graph.getNodeAttributes(selectedId) as DagNode).step;
+            // 归因范围：选中 token 之前的所有 token（prompt 节点 step=-1，生成节点 step < selectedStep）
+            const inAttributionRange =
+                selectedStep >= 0 &&
+                (attrs.step === -1 || (attrs.step >= 0 && attrs.step < selectedStep));
+            if (inAttributionRange) {
+                const share = currentFocusState.nodeShareById.get(hoveredId) ?? 0;
+                if (recursiveAttributionEnabled) {
+                    const stay = share * (1 - nodePropagationMiRatio(attrs));
+                    rowsBeforeInfo.push(
+                        { label: tr('Attribution share (Total):'), value: formatAttributionSharePercentForTooltip(share) },
+                        { label: tr('Attribution share (Self):'), value: formatAttributionSharePercentForTooltip(stay) },
+                    );
+                } else {
+                    rowsBeforeInfo.push({
+                        label: tr('Attribution share:'),
+                        value: formatAttributionSharePercentForTooltip(share),
+                    });
+                }
+            }
+        }
+        const rowsAfterSurprisal: ToolTipUpdateAugment['rowsAfterSurprisal'] =
+            attrs.dagCiMiTooltipRow != null ? [attrs.dagCiMiTooltipRow] : [];
+        const augment: ToolTipUpdateAugment | undefined =
+            rowsBeforeInfo.length > 0 || rowsAfterSurprisal.length > 0
+                ? { rowsBeforeInfo, rowsAfterSurprisal }
+                : undefined;
+        dagTopkToolTip.updateData({ tokenData: tokenForTooltip }, rect, augment);
+    };
+
     function setSelectedNodeId(id: string | null): void {
+        if (id != null && !graph.hasNode(id)) {
+            throw new Error(`genAttributeDagView: unknown node id ${id}`);
+        }
         selectedId = id;
         refreshNodeLinkHighlight();
     }
@@ -931,6 +1499,7 @@ export function initGenAttributeDagView(
 
     /** 将当前 `nodes` / `links` 同步到 SVG：join 新 DOM、`paint` 几何、`refreshNodeLinkHighlight` 样式。 */
     function syncGraphToSvg(): void {
+        grayRenderCache = null;
         linkGFront.selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link').each(function() {
             linkG.node()!.appendChild(this as SVGGElement);
         });
@@ -966,7 +1535,7 @@ export function initGenAttributeDagView(
                 g.each(function(d: DagLink) {
                     const el = d3.select(this);
                     const mkId = dagLinkMarkerElementId(d.source, d.target);
-                    el.append('title').text(d.titleText);
+                    el.append('title');
                     el.append('path')
                         .attr('class', 'gen-attr-dag-link-visible')
                         .attr('fill', 'none')
@@ -978,55 +1547,53 @@ export function initGenAttributeDagView(
                 return g;
             });
         // 不在此处全量重置 marker `stroke-opacity`：紧接着的 {@link refreshNodeLinkHighlight} 会按边
-        // 逐条写 `dagLinkStrokeOpacity`（与 `<title>` 中 Strength 同源），任何前值都会被覆盖，全量重置纯冗余。
+        // 逐条写 resolveDagLinkHighlightDisplay（与 `<title>` 中 Link strength 同源），任何前值都会被覆盖，全量重置纯冗余。
 
         nodeSel = nodeG
             .selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node')
             .data(nodes, (d) => d.id)
-            .join(
-                (enter) => {
-                    // 节点身份 append-only、几何（nodeW/nodeH）一旦建立不再变化（drag 仅改 x/y，
-                    // 由 paint 通过 transform 处理），故与几何相关的属性仅在 enter 写一次即可；
-                    // 同理 `--prompt` class 依据 step === -1，step 初始化后不变。
-                    const g = enter
-                        .append('g')
-                        .attr('class', 'gen-attr-dag-node')
-                        .style('--gen-attr-dag-node-ci-visual-scale', (d: DagNode) => String(d.ciVisualScale));
-                    g.classed('gen-attr-dag-node--prompt', (d: DagNode) => d.step === -1);
-                    if (!DISABLE_DAG_NODE_TOOLTIPS) {
-                        g.append('title').text((d: DagNode) => d.nativeTitleText);
-                    }
-                    g.append('rect')
-                        .attr('x', 0)
-                        .attr('y', 0)
-                        .attr('width', (d: DagNode) => d.nodeW)
-                        .attr('height', (d: DagNode) => d.nodeH)
-                        .attr('rx', (d: DagNode) => nodeRx(d))
-                        .attr('ry', (d: DagNode) => nodeRx(d));
-                    g.append('text')
-                        .attr('class', 'gen-attr-dag-node-text')
-                        .attr('xml:space', 'preserve')
-                        .attr('pointer-events', 'none')
-                        .attr('text-anchor', 'middle')
-                        .attr('dominant-baseline', 'central')
-                        .attr('x', (d: DagNode) => d.nodeW / 2)
-                        .attr('y', (d: DagNode) => d.nodeH / 2)
-                        .text((d: DagNode) => d.displayLabel);
-                    g.on('mouseenter', (_event, d) => {
-                        hoveredId = d.id;
-                        refreshNodeLinkHighlight();
-                    });
-                    g.on('mouseleave', () => {
-                        hoveredId = null;
-                        refreshNodeLinkHighlight();
-                    });
-                    g.on('click', (event, d) => {
-                        event.stopPropagation();
-                        setSelectedNodeId(selectedId === d.id ? null : d.id);
-                    });
-                    return g.call(drag);
-                }
-            );
+            .join((enter) => {
+                // 节点身份 append-only、几何（nodeW/nodeH）一旦建立不再变化（drag 仅改 x/y，
+                // 由 paint 通过 transform 处理），故与几何相关的属性仅在 enter 写一次即可；
+                // 同理 `--prompt` class 依据 step === -1，step 初始化后不变。
+                const g = enter
+                    .append('g')
+                    .attr('class', 'gen-attr-dag-node')
+                    .style('--gen-attr-dag-node-ci-visual-scale', (d: DagNode) => String(d.ciVisualScale));
+                g.classed('gen-attr-dag-node--prompt', (d: DagNode) => d.step === -1);
+                g.append('rect').attr('class', 'gen-attr-dag-node-stroke');
+                g.append('rect')
+                    .attr('class', 'gen-attr-dag-node-fill')
+                    .attr('width', (d: DagNode) => d.nodeW)
+                    .attr('height', (d: DagNode) => d.nodeH)
+                    .attr('rx', (d: DagNode) => nodeRx(d))
+                    .attr('ry', (d: DagNode) => nodeRx(d));
+                g.append('text')
+                    .attr('class', 'gen-attr-dag-node-text')
+                    .attr('xml:space', 'preserve')
+                    .attr('pointer-events', 'none')
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .attr('x', (d: DagNode) => d.nodeW / 2)
+                    .attr('y', (d: DagNode) => d.nodeH / 2)
+                    .text((d: DagNode) => d.displayLabel);
+                return g;
+            });
+
+        nodeHitSel = nodeGHit
+            .selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node-hit')
+            .data(nodes, (d) => d.id)
+            .join((enter) => {
+                const g = enter.append('g').attr('class', 'gen-attr-dag-node-hit');
+                g.append('rect')
+                    .attr('class', 'gen-attr-dag-node-hit-target')
+                    .attr('width', (d: DagNode) => d.nodeW)
+                    .attr('height', (d: DagNode) => d.nodeH)
+                    .attr('rx', (d: DagNode) => nodeRx(d))
+                    .attr('ry', (d: DagNode) => nodeRx(d));
+                bindNodePointerHandlers(g);
+                return g.call(drag);
+            });
 
         paint();
         refreshNodeLinkHighlight();
@@ -1082,11 +1649,6 @@ export function initGenAttributeDagView(
                 nodeH: g.height * displayScale,
                 ciVisualScale: 1,
                 displayLabel,
-                nativeTitleText: buildNodeNativeTitleText({
-                    displayLabel,
-                    id: srcId,
-                    step: -1,
-                }),
             };
             graph.addNode(srcId, srcNode);
             nodes.push(srcNode);
@@ -1103,6 +1665,8 @@ export function initGenAttributeDagView(
             getEffectiveExcludePromptPatternsText(),
             getEffectiveExcludeGeneratedPatternsText(),
         );
+        // prompt 节点 step=-1 始终排在末尾；重建一次即可（setPromptTokenSpans 只调一次）。
+        nodesSortedByStepDesc = [...nodes].sort((a, b) => b.step - a.step || b.start - a.start);
         if (batchDepth === 0) syncGraphToSvg();
     }
 
@@ -1130,6 +1694,8 @@ export function initGenAttributeDagView(
             spaceDotExceptBeforeAsciiLetterOrNumber: true,
         });
         const ciVisualScale = dagGeneratedNodeCiVisualScale(response.target_prob);
+        const gltrTooltipToken = frontendTokenFromGenAttrStep(step);
+        const dagCiMiTooltipRow = dagCiMiTooltipRowForProb(response.target_prob);
         const targetNode: DagNode = {
             id: targetId,
             label: token,
@@ -1141,16 +1707,15 @@ export function initGenAttributeDagView(
             nodeW: g.width * displayScale * ciVisualScale,
             nodeH: g.height * displayScale * ciVisualScale,
             ciVisualScale,
+            dagTargetProb: response.target_prob,
             displayLabel,
-            nativeTitleText: buildNodeNativeTitleText({
-                displayLabel,
-                id: targetId,
-                step: stepProcessed,
-                targetProb: response.target_prob,
-            }),
+            ...(gltrTooltipToken != null ? { gltrTooltipToken } : {}),
+            ...(dagCiMiTooltipRow != null ? { dagCiMiTooltipRow } : {}),
         };
         graph.addNode(targetId, targetNode);
         nodes.push(targetNode);
+        // 新 token 的 step 最大，直接放到排序列表最前面，无需重新全排序。
+        nodesSortedByStepDesc.unshift(targetNode);
         snapSubwordNode(targetNode, nodes.length >= 2 ? nodes[nodes.length - 2]! : null);
 
         // align → exclude → rank：Top-N / β / cumP 在节点语义上工作（合并型「如下」/ 拆分型等）。
@@ -1173,15 +1738,14 @@ export function initGenAttributeDagView(
         const selected = phase2RankAndSparsify(afterExclude, { cumulativeShare: edgeTopPCoverage });
 
         const mutualInformationRatio = computeMutualInformationRatio(response.target_prob);
-        // 仅保留可绘制的边；「Fan in share」的分母为下列可见边的池内 L1 份额之和（非完整 sparse 池）。
-        const selectedForDisplay = selected.filter(
-            (item) =>
-                dagLinkStrokeOpacity({
-                    normalizedScore: item.score,
-                    mutualInformationRatio,
-                }) >= DAG_EDGE_MIN_DISPLAY_OPACITY
-        );
+        const selectedForDisplay = selected.filter((item) => {
+            const normalizedScore = item.score;
+            const edgeVisibility =
+                (dagDecayAttributionToHighSurprisalTargetEnabled ? mutualInformationRatio : 1) * normalizedScore;
+            return edgeVisibility >= DAG_EDGE_MIN_NORMALIZED_SCORE;
+        });
         const massSum = selectedForDisplay.reduce((acc, t) => acc + Math.max(0, t.poolMassFrac), 0);
+        const linksForTarget: DagLink[] = [];
         for (const item of selectedForDisplay) {
             const srcId = item.nodeId;
             if (!graph.hasNode(srcId)) {
@@ -1202,19 +1766,19 @@ export function initGenAttributeDagView(
             const edgeAttrs = {
                 normalizedScore: item.score,
                 mutualInformationRatio,
-                scoreShare: share,
+                attributionShare: share,
                 ...(alignmentNote ? { alignmentNote } : {}),
             };
             graph.addEdge(srcId, targetId, edgeAttrs);
-            const srcAttrs = graph.getNodeAttributes(srcId) as DagNode;
-            const tgtAttrs = graph.getNodeAttributes(targetId) as DagNode;
-            links.push({
+            const newLink: DagLink = {
                 source: srcId,
                 target: targetId,
                 ...edgeAttrs,
-                titleText: buildLinkTitleText(edgeAttrs, srcAttrs, tgtAttrs),
-            });
+            };
+            links.push(newLink);
+            linksForTarget.push(newLink);
         }
+        if (linksForTarget.length > 0) incomingLinksByTarget.set(targetId, linksForTarget);
 
         const excludeIntervals = collectGenAttrDagExcludeIntervals(
             intervalCtx,
@@ -1223,10 +1787,10 @@ export function initGenAttributeDagView(
             getEffectiveExcludeGeneratedPatternsText(),
         );
         dagExcludeIntervals = excludeIntervals;
-        pruneDagLinksTouchingFullyExcludedNodes(graph, links, excludeIntervals);
+        pruneDagLinksTouchingFullyExcludedNodes(graph, links, incomingLinksByTarget, excludeIntervals);
 
         stepProcessed++;
-        // 每步生成后：默认焦点为本步新生成的 token（与悬浮同款高亮；有真实悬停时仍以 hoveredId 优先）
+        // 每步生成后：默认选中本步新生成的 token；无其它选中时悬浮仍可临时预览
         selectedId = targetId;
         if (batchDepth === 0) {
             syncGraphToSvg();
@@ -1242,19 +1806,27 @@ export function initGenAttributeDagView(
         textMeasure.reset();
         graph.clear();
         nodes = [];
+        nodesSortedByStepDesc = [];
         links = [];
+        incomingLinksByTarget.clear();
+        grayRenderCache = null;
         stepProcessed = 0;
         selectedId = null;
         hoveredId = null;
+        dagTopkToolTip.hideAndReset();
         linkMarkersDefs.selectAll('marker').remove();
         linkG.selectAll('*').remove();
         linkGFront.selectAll('*').remove();
         nodeG.selectAll('*').remove();
+        nodeGHit.selectAll('*').remove();
         dagExcludeIntervals = [];
         linkSel = rootG
             .selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link')
             .data<DagLink>([], dagLinkDataKey);
         nodeSel = nodeG.selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node').data<DagNode>([], (d) => d.id);
+        nodeHitSel = nodeGHit
+            .selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node-hit')
+            .data<DagNode>([], (d) => d.id);
         layoutDirty = preserveUserViewport ? wasLayoutDirty : false;
         userDraggedNodes = false;
     }
@@ -1273,7 +1845,7 @@ export function initGenAttributeDagView(
             const { w, h } = stackLayoutViewportPx(stackEl);
             const innerW = Math.max(w - 2 * pad, 1);
             const innerH = Math.max(h - 2 * pad, 1);
-            if (layoutMode === 'linear-arc') {
+            if (isLinearArcFamilyLayout(layoutMode)) {
                 /** 仅用 token 行宽度定比；竖直按行中心居中（弧不参与 bbox → 不致上下抖） */
                 const bn = nodeG.node()!.getBBox();
                 const bw = Math.max(bn.width, 1e-6);
@@ -1309,14 +1881,17 @@ export function initGenAttributeDagView(
                 const ty = pad + halfH;
                 svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
             } else if (layoutMode === 'text-flow') {
-                /** 与原实现一致：`rootG` 整包 bbox + 宽高双约束顶对齐 */
+                /** `rootG` 整包 bbox + 宽高双约束顶对齐 */
+                const padTf = DAG_TEXT_FLOW_FIT_PAD_PX;
+                const innerWTextFlow = Math.max(w - 2 * padTf, 1);
+                const innerHTextFlow = Math.max(h - 2 * padTf, 1);
                 const b = rootG.node()!.getBBox();
                 const bw = Math.max(b.width, 1e-6);
                 const bh = Math.max(b.height, 1e-6);
-                const kRaw = Math.min(innerW / bw, innerH / bh);
+                const kRaw = Math.min(innerWTextFlow / bw, innerHTextFlow / bh);
                 const k = Math.min(Number.isFinite(kRaw) && kRaw > 0 ? kRaw : k0, k0);
-                const tx = pad * 2 - k * b.x;
-                const ty = pad - k * b.y;
+                const tx = padTf - k * b.x;
+                const ty = padTf - k * b.y;
                 svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
             } else {
                 const _: never = layoutMode;
@@ -1381,7 +1956,7 @@ export function initGenAttributeDagView(
         if (linearArcAdjacentGapPx === next) return;
         linearArcAdjacentGapPx = next;
         if (opts?.skipRefit || batchDepth > 0) return;
-        if (layoutMode !== 'linear-arc' || nodes.length === 0) return;
+        if (!isLinearArcFamilyLayout(layoutMode) || nodes.length === 0) return;
         paint();
         fitViewportToContent(true);
     }
@@ -1395,6 +1970,25 @@ export function initGenAttributeDagView(
         fitViewportToContent(true);
     }
 
+    function setShowTokenInfoOnSelected(show: boolean): void {
+        if (showTokenInfoOnSelected === show) return;
+        showTokenInfoOnSelected = show;
+        syncGenAttrDagTopkTooltipImpl();
+    }
+
+    /** 传播归因（UI: Propagated attribution mode；`recursiveAttributionEnabled`）：向上追到来源；关闭则为直接归因（一跳）。 */
+    function setRecursiveAttributionEnabled(enabled: boolean): void {
+        if (recursiveAttributionEnabled === enabled) return;
+        recursiveAttributionEnabled = enabled;
+        refreshNodeLinkHighlight();
+    }
+
+    function setShowDownstreamInfluence(show: boolean): void {
+        if (showDownstreamInfluence === show) return;
+        showDownstreamInfluence = show;
+        refreshNodeLinkHighlight();
+    }
+
     const fullscreenBtn = resultsRoot
         .append('button')
         .attr('type', 'button')
@@ -1464,9 +2058,10 @@ export function initGenAttributeDagView(
         ro.disconnect();
         document.removeEventListener('fullscreenchange', refreshFullscreenChrome);
         document.removeEventListener(CSS_PSEUDO_FULLSCREEN_CHANGE_EVENT, refreshFullscreenChrome);
+        dagTopkToolTip.dispose();
         resultsRoot
             .selectAll(
-                '.gen-attr-dag-stack, button.gen-attr-dag-refresh, button.gen-attr-dag-play, button.gen-attr-dag-fullscreen'
+                '.gen-attr-dag-stack, .gen-attr-dag-topk-tooltip, button.gen-attr-dag-refresh, button.gen-attr-dag-play, button.gen-attr-dag-fullscreen'
             )
             .remove();
         detachGenAttributeDagPanel.delete(rootEl);
@@ -1482,6 +2077,8 @@ export function initGenAttributeDagView(
         isBatching,
         reset,
         fitViewportToContent,
+        getSelectedNodeId: () => selectedId,
+        setSelectedNodeId,
         clearNodeSelection,
         setDagPlaybackPlaying,
         setMeasureWidthPx,
@@ -1490,6 +2087,9 @@ export function initGenAttributeDagView(
         setDagCompactness,
         setEdgeTopPCoverage,
         setHideExcludedTokens,
+        setShowTokenInfoOnSelected,
+        setRecursiveAttributionEnabled,
+        setShowDownstreamInfluence,
         hasPromptSpans: () => nodes.some((n) => n.step === -1),
         detach,
     };

client/src/ts/attribution/genAttributeDagViewLinearArcMode.ts

@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import { dagStepDownEffectiveCiRatio } from '../utils/surprisalMath';
 
 /** linear-arc：相邻节点矩形水平方向「外侧边与边之间的空隙」（px，SVG 内部坐标） */
 export const LINEAR_ARC_ADJACENT_GAP_DEFAULT = 0;
@@ -30,6 +31,40 @@ type LinearArcNodeLike = { nodeW: number; nodeH: number; ciVisualScale: number }
 /** `step === -1` 表示 prompt（与 `genAttributeDagView` 中 `DagNode.step` 约定一致） */
 type LinearArcSteppedNode = LinearArcNodeLike & { step: number };
 
+/** 下台阶布局：节点可带 `dagTargetProb`；有效 CI 为 {@link dagStepDownEffectiveCiRatio}（高置信 p>p₁ 为 0；与「关掉 CI 视觉」无关）。 */
+export type LinearArcStepDownNode = LinearArcSteppedNode & { dagTargetProb?: number };
+
+export type LinearArcPaintVariant = 'flat' | 'step-down';
+
+/**
+ * 下台阶：每档竖直落差 = `LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE × linearArcUnscaledNodeHeight × CI`。
+ * 仅代码可调；不对该系数做运行时 clamp。
+ */
+export const LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE = 1;
+
+/** 未做 CI 视觉放大时的节点高度（SVG 坐标），作下台阶落差的 100% CI 基准 */
+export function linearArcUnscaledNodeHeight(n: Pick<LinearArcNodeLike, 'nodeH' | 'ciVisualScale'>): number {
+    return n.nodeH / n.ciVisualScale;
+}
+
+/**
+ * 第 i 个节点相对首节点的累积下移：对每个 j≥1，加上
+ * `LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE × linearArcUnscaledNodeHeight × CI`，
+ * CI 为 {@link dagStepDownEffectiveCiRatio}(dagTargetProb)。
+ */
+export function computeLinearArcStepDownOffsetYs(nodes: LinearArcStepDownNode[]): number[] {
+    const offsetY: number[] = [];
+    let acc = 0;
+    for (let i = 0; i < nodes.length; i++) {
+        offsetY.push(acc);
+        const next = nodes[i + 1];
+        if (!next) continue;
+        const ratio = dagStepDownEffectiveCiRatio(next.dagTargetProb);
+        acc += LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE * linearArcUnscaledNodeHeight(next) * ratio;
+    }
+    return offsetY;
+}
+
 function computeNodeCenterXs(nodes: LinearArcSteppedNode[], adjacentGapPx: number): number[] {
     const xs: number[] = [];
     if (nodes.length === 0) return xs;
@@ -49,6 +84,8 @@ function computeNodeCenterXs(nodes: LinearArcSteppedNode[], adjacentGapPx: numbe
  *
  * `nodes` 为参与布局的可见节点子集（可能少于 `nodeSel` 绑定的全量节点）；
  * 不在 `nodes` 中的节点（如被隐藏的 excluded 节点）transform 保持不变——调用方已将它们设为 `display:none`。
+ *
+ * `variant === 'step-down'`：竖直落差 × {@link LINEAR_ARC_STEP_DOWN_DISTANCE_SCALE} × {@link linearArcUnscaledNodeHeight} × {@link dagStepDownEffectiveCiRatio}。
  */
 export function paintLinearArcLayout<
     LinkDatum,
@@ -59,8 +96,9 @@ export function paintLinearArcLayout<
     nodes: NodeDatum[];
     adjacentGapPx: number;
     getLinkNodes: (link: LinkDatum) => { src: NodeDatum; tgt: NodeDatum };
+    variant?: LinearArcPaintVariant;
 }): void {
-    const { linkSel, nodeSel, nodes, adjacentGapPx, getLinkNodes } = params;
+    const { linkSel, nodeSel, nodes, adjacentGapPx, getLinkNodes, variant = 'flat' } = params;
 
     const centerXs = computeNodeCenterXs(nodes, adjacentGapPx);
 
@@ -70,23 +108,37 @@ export function paintLinearArcLayout<
         centerXByNode.set(nodes[i]!, centerXs[i]!);
     }
 
+    const offsetYs =
+        variant === 'step-down' ? computeLinearArcStepDownOffsetYs(nodes as LinearArcStepDownNode[]) : null;
+    const offsetYByNode = new Map<NodeDatum, number>();
+    if (offsetYs) {
+        for (let i = 0; i < nodes.length; i++) {
+            offsetYByNode.set(nodes[i]!, offsetYs[i]!);
+        }
+    }
+
+    const arcTopY = (n: NodeDatum): number => {
+        const oy = offsetYByNode.get(n) ?? 0;
+        return LINEAR_ARC_BASELINE_Y - n.nodeH / (2 * n.ciVisualScale) + oy;
+    };
+
     const arcPathBetweenNodes = (src: NodeDatum, tgt: NodeDatum): string => {
         const srcCx = centerXByNode.get(src);
         const tgtCx = centerXByNode.get(tgt);
         if (srcCx === undefined || tgtCx === undefined) {
             throw new Error('paintLinearArcLayout: link endpoint not in linear node list');
         }
-        // 用未放大的半高（nodeH / ciVisualScale / 2）定位弧端点，使所有节点顶部对齐同一 y 基线。
-        const y = LINEAR_ARC_BASELINE_Y - src.nodeH / (2 * src.ciVisualScale);
+        const yStart = arcTopY(src);
+        const yEnd = arcTopY(tgt);
         const dx = Math.abs(tgtCx - srcCx);
         const arcH = dx * 0.4;
-        const upY = y - arcH;
+        const upY = Math.min(yStart, yEnd) - arcH;
         const t = Math.max(0, Math.min(1, LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION));
         const inset = t * (dx / 2);
         const dir = tgtCx >= srcCx ? 1 : -1;
         const p1x = srcCx + dir * inset;
         const p2x = tgtCx - dir * inset;
-        return `M ${srcCx} ${y} C ${p1x} ${upY}, ${p2x} ${upY}, ${tgtCx} ${y}`;
+        return `M ${srcCx} ${yStart} C ${p1x} ${upY}, ${p2x} ${upY}, ${tgtCx} ${yEnd}`;
     };
 
     linkSel.each(function(d) {
@@ -99,6 +151,7 @@ export function paintLinearArcLayout<
     nodeSel.attr('transform', (d) => {
         const cx = centerXByNode.get(d);
         if (cx === undefined) return null; // 不在布局列表中（已 display:none），不更新 transform
-        return `translate(${cx - d.nodeW / 2},${LINEAR_ARC_BASELINE_Y - d.nodeH / 2})`;
+        const oy = offsetYByNode.get(d) ?? 0;
+        return `translate(${cx - d.nodeW / 2},${LINEAR_ARC_BASELINE_Y - d.nodeH / 2 + oy})`;
     });
 }

client/src/ts/demos/genAttributeBundledDemoManifest.generated.ts

@@ -1,4 +1,4 @@
 /**
  * Generated by GenAttributeDemoManifestPlugin — do not edit.
  */
-export const GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS: readonly string[] = ["CN->EN翻译","Write a sonnet about love","写一首绝句，主题是春天","过拟合｜李白 将进酒"];
+export const GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS: readonly string[] = ["CN->EN翻译","CoT | 苏州所在省的省会","Write a sonnet about love","写一首绝句，主题是春天","过拟合｜李白 将进酒"];

client/src/ts/gen_attribute.ts

@@ -13,6 +13,7 @@ import { initChatPanelLayout } from './chat/chatPanelLayout';
 import { PANEL_SPLIT_STORAGE_KEY_GEN_ATTRIBUTE } from './utils/panelSplitStorage';
 import { TextInputController } from './controllers/textInputController';
 import { initializeCommonApp } from './appInitializer';
+import { setPageOptsGetter } from './utils/clientActivityPing';
 import { showAlertDialog } from './ui/dialog';
 import URLHandler from './utils/URLHandler';
 import { createToast } from './ui/toast';
@@ -26,7 +27,7 @@ import {
 import {
     initGenAttributeDagView,
     setDagNodeCiVisualScaleEnabled,
-    setDagEdgeWeakenHighSurprisalEnabled,
+    setDagDecayAttributionToHighSurprisalTargetEnabled,
     type DagLayoutMode,
     clampDagCompactness,
     clampLinearArcAdjacentGap,
@@ -106,9 +107,17 @@ const GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY = 'info_radar_gen_attr_dag_playb
 const GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY = 'info_radar_gen_attr_dag_replay_pacing_mode';
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY = 'info_radar_gen_attr_dag_playback_total_s';
 const GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY = 'info_radar_gen_attr_dag_node_ci_visual_scale';
-const GEN_ATTR_DAG_EDGE_WEAKEN_HIGH_SURPRISAL_STORAGE_KEY = 'info_radar_gen_attr_dag_edge_weaken_high_surprisal';
+const GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY =
+    'info_radar_gen_attr_dag_decay_attribution_high_surprisal';
+/** @deprecated 读取迁移用 */
+const GEN_ATTR_DAG_EDGE_WEAKEN_HIGH_SURPRISAL_STORAGE_KEY_LEGACY =
+    'info_radar_gen_attr_dag_edge_weaken_high_surprisal';
 const GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY = 'info_radar_gen_attr_dag_hide_inactive_edges';
+const GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY =
+    'info_radar_gen_attr_dag_show_downstream_influence';
+const GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY = 'info_radar_gen_attr_dag_recursive_attribution';
 const GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY = 'info_radar_gen_attr_dag_hide_excluded_tokens';
+const GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY = 'info_radar_gen_attr_dag_show_topk_on_selected';
 const GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY =
     'info_radar_gen_attr_dag_linear_arc_adjacent_gap';
 const GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY = 'info_radar_gen_attr_dag_compactness';
@@ -136,6 +145,29 @@ const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT = 7;
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MIN = 1;
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MAX = 3600;
 
+/** 与无 demoUiOptions 本地缓存时「读出默认」对齐，供重置与可读性单一的来源 */
+const DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS: GenAttrDemoUiOptions = {
+    layoutMode: 'text-flow',
+    measureWidthPx: GEN_ATTR_DAG_MEASURE_WIDTH_DEFAULT,
+    dagCompactness: DAG_COMPACTNESS_DEFAULT,
+    linearArcAdjacentGapPx: LINEAR_ARC_ADJACENT_GAP_DEFAULT,
+    hideExcludedTokens: false,
+    edgeTopPCoverage: DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
+    nodeCiVisualScaleEnabled: true,
+    decayAttributionToHighSurprisalTargetEnabled: true,
+    hideInactiveEdges: false,
+    showDownstreamInfluence: false,
+    recursiveAttributionEnabled: false,
+    showTokenInfoOnSelected: false,
+    replayPacingMode: 'total',
+    playbackTotalS: GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT,
+    playbackStepMs: GEN_ATTR_DAG_PLAYBACK_STEP_MS_DEFAULT,
+    excludePromptPatternsEnabled: true,
+    excludePromptPatternsText: DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT,
+    excludeGeneratedPatternsEnabled: true,
+    excludeGeneratedPatternsText: DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT,
+};
+
 const GENERATE_BTN_LABEL = 'Start';
 const STOP_BTN_LABEL = 'Stop';
 
@@ -260,17 +292,24 @@ function readStoredDagReplayPacingMode(): DagReplayPacingMode {
     } catch {
         // ignore
     }
-    return 'total';
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.replayPacingMode;
 }
 
 function readStoredDagLayoutMode(): DagLayoutMode {
     try {
         const v = localStorage.getItem(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY);
-        if (v === 'text-flow' || v === 'linear-arc' || v === 'spiral') return v;
+        if (
+            v === 'text-flow' ||
+            v === 'linear-arc' ||
+            v === 'linear-arc-step-down' ||
+            v === 'spiral'
+        ) {
+            return v;
+        }
     } catch {
         // ignore
     }
-    return 'text-flow';
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.layoutMode;
 }
 
 const apiPrefix = URLHandler.parameters['api'] || '';
@@ -375,36 +414,48 @@ function applyDagReplaySpeedUi(): void {
 
 function currentDagLayoutMode(): DagLayoutMode {
     const v = dagLayoutModeSelect?.value;
-    if (v === 'linear-arc' || v === 'spiral') return v;
+    if (v === 'linear-arc' || v === 'linear-arc-step-down' || v === 'spiral') return v;
     return 'text-flow';
 }
 
 function applyDagLayoutModeUi(): void {
     const mode = currentDagLayoutMode();
     if (dagCompactnessGroup) {
-        /** text-flow / spiral 均使用 display-scale 驱动的节点宽高与边回缩；linear-arc 不适用。 */
-        dagCompactnessGroup.hidden = mode === 'linear-arc';
+        /** text-flow / spiral 均使用 display-scale 驱动的节点宽高与边回缩；linear-arc 家族不适用。 */
+        dagCompactnessGroup.hidden = mode === 'linear-arc' || mode === 'linear-arc-step-down';
     }
     if (dagMeasureWidthGroup) {
         dagMeasureWidthGroup.hidden = mode !== 'text-flow';
     }
     if (dagLinearArcIntervalGroup) {
-        dagLinearArcIntervalGroup.hidden = mode !== 'linear-arc';
+        dagLinearArcIntervalGroup.hidden = mode !== 'linear-arc' && mode !== 'linear-arc-step-down';
     }
 }
 
 const dagHideExcludedTokensInput = document.getElementById(
     'gen_attr_dag_hide_excluded_tokens'
 ) as HTMLInputElement | null;
+const dagShowTopkOnSelectedInput = document.getElementById(
+    'gen_attr_dag_show_topk_on_selected'
+) as HTMLInputElement | null;
 const dagNodeCiVisualScaleInput = document.getElementById(
     'gen_attr_dag_node_ci_visual_scale'
 ) as HTMLInputElement | null;
-const dagEdgeWeakenHighSurprisalInput = document.getElementById(
-    'gen_attr_dag_edge_weaken_high_surprisal'
+const dagDecayAttributionHighSurprisalInput = document.getElementById(
+    'gen_attr_dag_decay_attribution_high_surprisal'
 ) as HTMLInputElement | null;
 const dagHideInactiveEdgesInput = document.getElementById(
     'gen_attr_dag_hide_inactive_edges'
 ) as HTMLInputElement | null;
+const dagShowDownstreamInfluenceInput = document.getElementById(
+    'gen_attr_dag_show_downstream_influence'
+) as HTMLInputElement | null;
+const dagShowDownstreamInfluenceGroup = document.getElementById(
+    'gen_attr_dag_show_downstream_influence_group'
+);
+const dagRecursiveAttributionInput = document.getElementById(
+    'gen_attr_dag_recursive_attribution'
+) as HTMLInputElement | null;
 const genAttrExcludePromptPatternsTa = document.getElementById(
     'gen_attr_exclude_prompt_patterns'
 ) as HTMLTextAreaElement | null;
@@ -417,6 +468,9 @@ const genAttrExcludeGeneratedPatternsTa = document.getElementById(
 const genAttrExcludeGeneratedPatternsEnable = document.getElementById(
     'gen_attr_exclude_generated_patterns_enable'
 ) as HTMLInputElement | null;
+const genAttrResetUiOptionsBtn = document.getElementById(
+    'gen_attr_reset_ui_options_btn',
+) as HTMLButtonElement | null;
 const completeReasonEl = d3.select('#gen_attr_complete_reason');
 
 function syncGenAttrExcludePatternTextareasDisabled(): void {
@@ -495,10 +549,11 @@ const genAttrResultsNode = genAttrResultsEl.node() as HTMLElement | null;
 function readStoredDagNodeCiVisualScale(): boolean {
     try {
         const v = localStorage.getItem(GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY);
-        return v === null ? true : v === '1';
+        if (v !== null) return v === '1';
     } catch {
-        return true;
+        // ignore
     }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.nodeCiVisualScaleEnabled;
 }
 const initialDagNodeCiVisualScale = readStoredDagNodeCiVisualScale();
 if (dagNodeCiVisualScaleInput) dagNodeCiVisualScaleInput.checked = initialDagNodeCiVisualScale;
@@ -514,25 +569,30 @@ dagNodeCiVisualScaleInput?.addEventListener('change', () => {
     tryResetAndReplayDag();
 });
 
-function readStoredDagEdgeWeakenHighSurprisal(): boolean {
+function readStoredDagDecayAttributionToHighSurprisalTarget(): boolean {
     try {
-        const v = localStorage.getItem(GEN_ATTR_DAG_EDGE_WEAKEN_HIGH_SURPRISAL_STORAGE_KEY);
-        return v === null ? true : v === '1';
+        const v = localStorage.getItem(GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY);
+        if (v !== null) return v === '1';
+        const legacy = localStorage.getItem(GEN_ATTR_DAG_EDGE_WEAKEN_HIGH_SURPRISAL_STORAGE_KEY_LEGACY);
+        if (legacy !== null) return legacy === '1';
     } catch {
-        return true;
+        // ignore
     }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.decayAttributionToHighSurprisalTargetEnabled;
+}
+const initialDagDecayAttributionHighSurprisal = readStoredDagDecayAttributionToHighSurprisalTarget();
+if (dagDecayAttributionHighSurprisalInput) {
+    dagDecayAttributionHighSurprisalInput.checked = initialDagDecayAttributionHighSurprisal;
 }
-const initialDagEdgeWeakenHighSurprisal = readStoredDagEdgeWeakenHighSurprisal();
-if (dagEdgeWeakenHighSurprisalInput) dagEdgeWeakenHighSurprisalInput.checked = initialDagEdgeWeakenHighSurprisal;
-setDagEdgeWeakenHighSurprisalEnabled(initialDagEdgeWeakenHighSurprisal);
-dagEdgeWeakenHighSurprisalInput?.addEventListener('change', () => {
-    const enabled = dagEdgeWeakenHighSurprisalInput.checked;
+setDagDecayAttributionToHighSurprisalTargetEnabled(initialDagDecayAttributionHighSurprisal);
+dagDecayAttributionHighSurprisalInput?.addEventListener('change', () => {
+    const enabled = dagDecayAttributionHighSurprisalInput.checked;
     try {
-        localStorage.setItem(GEN_ATTR_DAG_EDGE_WEAKEN_HIGH_SURPRISAL_STORAGE_KEY, enabled ? '1' : '0');
+        localStorage.setItem(GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY, enabled ? '1' : '0');
     } catch {
         /* ignore */
     }
-    setDagEdgeWeakenHighSurprisalEnabled(enabled);
+    setDagDecayAttributionToHighSurprisalTargetEnabled(enabled);
     tryResetAndReplayDag();
 });
 
@@ -542,10 +602,12 @@ function applyDagHideInactiveEdges(hide: boolean): void {
 }
 function readStoredDagHideInactiveEdges(): boolean {
     try {
-        return localStorage.getItem(GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY) === '1';
+        const v = localStorage.getItem(GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY);
+        if (v !== null) return v === '1';
     } catch {
-        return false;
+        // ignore
     }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.hideInactiveEdges;
 }
 const initialDagHideInactiveEdges = readStoredDagHideInactiveEdges();
 if (dagHideInactiveEdgesInput) dagHideInactiveEdgesInput.checked = initialDagHideInactiveEdges;
@@ -560,15 +622,82 @@ dagHideInactiveEdgesInput?.addEventListener('change', () => {
     applyDagHideInactiveEdges(hide);
 });
 
+function readStoredDagShowDownstreamInfluence(): boolean {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY);
+        if (v !== null) return v === '1';
+    } catch {
+        // ignore
+    }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.showDownstreamInfluence;
+}
+const initialDagShowDownstreamInfluence = readStoredDagShowDownstreamInfluence();
+if (dagShowDownstreamInfluenceInput) {
+    dagShowDownstreamInfluenceInput.checked = initialDagShowDownstreamInfluence;
+}
+dagShowDownstreamInfluenceInput?.addEventListener('change', () => {
+    const show = dagShowDownstreamInfluenceInput.checked;
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY, show ? '1' : '0');
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setShowDownstreamInfluence(show);
+});
+
+/** 传播归因（UI: Propagated attribution mode；`recursiveAttributionEnabled`）开启时隐藏 downstream influence 选项（该模式仅展示上游链）。 */
+function applyDagDownstreamInfluenceUi(): void {
+    const recursive = dagRecursiveAttributionInput?.checked ?? false;
+    if (dagShowDownstreamInfluenceGroup) {
+        dagShowDownstreamInfluenceGroup.hidden = recursive;
+    }
+}
+
+function readStoredDagRecursiveAttribution(): boolean {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY);
+        if (v !== null) return v === '1';
+    } catch {
+        // ignore
+    }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.recursiveAttributionEnabled;
+}
+const initialDagRecursiveAttribution = readStoredDagRecursiveAttribution();
+if (dagRecursiveAttributionInput) dagRecursiveAttributionInput.checked = initialDagRecursiveAttribution;
+applyDagDownstreamInfluenceUi();
+dagRecursiveAttributionInput?.addEventListener('change', () => {
+    const enabled = dagRecursiveAttributionInput.checked;
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY, enabled ? '1' : '0');
+    } catch {
+        /* ignore */
+    }
+    applyDagDownstreamInfluenceUi();
+    dagHandle.setRecursiveAttributionEnabled(enabled);
+});
+
 function readStoredDagHideExcludedTokens(): boolean {
     try {
-        return localStorage.getItem(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY) === '1';
+        const v = localStorage.getItem(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY);
+        if (v !== null) return v === '1';
     } catch {
-        return false;
+        // ignore
     }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.hideExcludedTokens;
 }
 const initialDagHideExcludedTokens = readStoredDagHideExcludedTokens();
 if (dagHideExcludedTokensInput) dagHideExcludedTokensInput.checked = initialDagHideExcludedTokens;
+function readStoredDagShowTopkOnSelected(): boolean {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY);
+        if (v !== null) return v === '1';
+    } catch {
+        // ignore
+    }
+    return DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.showTokenInfoOnSelected;
+}
+const initialDagShowTopkOnSelected = readStoredDagShowTopkOnSelected();
+if (dagShowTopkOnSelectedInput) dagShowTopkOnSelectedInput.checked = initialDagShowTopkOnSelected;
 dagHideExcludedTokensInput?.addEventListener('change', () => {
     const hide = dagHideExcludedTokensInput.checked;
     try {
@@ -579,6 +708,28 @@ dagHideExcludedTokensInput?.addEventListener('change', () => {
     dagHandle.setHideExcludedTokens(hide);
 });
 
+dagShowTopkOnSelectedInput?.addEventListener('change', () => {
+    const show = dagShowTopkOnSelectedInput.checked;
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY, show ? '1' : '0');
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setShowTokenInfoOnSelected(show);
+});
+
+setPageOptsGetter(() => {
+    const mode = currentDagLayoutMode();
+    return {
+        layout_linear_arc: mode === 'linear-arc',
+        layout_step_down: mode === 'linear-arc-step-down',
+        layout_spiral: mode === 'spiral',
+        propagated: dagRecursiveAttributionInput?.checked ?? false,
+        downstream: dagShowDownstreamInfluenceInput?.checked ?? false,
+        token_tooltip: dagShowTopkOnSelectedInput?.checked ?? false,
+    };
+});
+
 modelVariantSelect?.addEventListener('change', () => {
     try {
         localStorage.setItem(GEN_ATTR_MODEL_VARIANT_STORAGE_KEY, currentModelVariant());
@@ -998,6 +1149,9 @@ const dagHandle = initGenAttributeDagView(d3.select('#results'), {
     dagCompactness: initialDagCompactness,
     linearArcAdjacentGapPx: initialDagLinearArcGap,
     hideExcludedTokens: initialDagHideExcludedTokens,
+    showTokenInfoOnSelected: initialDagShowTopkOnSelected,
+    showDownstreamInfluence: initialDagShowDownstreamInfluence,
+    recursiveAttributionEnabled: initialDagRecursiveAttribution,
     edgeTopPCoverage: initialDagEdgeTopPCoverage,
     onFullscreenError: (message) => showToast(message, 'error'),
     getEffectiveExcludePromptPatternsText: genAttrEffectiveExcludePromptPatternsText,
@@ -1024,16 +1178,25 @@ function isDagBusy(): boolean {
     return inFlight || dagPlaybackTimer !== null || dagLastTokenDwellTimer !== null;
 }
 
-/** 非忙状态下 reset + replay + fit，供各设置项切换后复用。忙时为 no-op。 */
-function tryResetAndReplayDag(): void {
+/**
+ * 非忙状态下 reset + replay + fit，供各设置项切换后复用。忙时为 no-op。
+ * 默认保留 DAG 选中节点；整页重置 UI 等场景传 `preserveNodeSelection: false`。
+ */
+function tryResetAndReplayDag(opts?: { preserveNodeSelection?: boolean }): void {
     if (isDagBusy()) return;
+    const preserveSelection = opts?.preserveNodeSelection !== false;
+    const preservedSelectedId = preserveSelection ? dagHandle.getSelectedNodeId() : null;
     const h = runnerHandle;
     dagHandle.reset();
     if (h && h.tokenCount > 0) {
         replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     }
     dagHandle.fitViewportToContent();
-    dagHandle.clearNodeSelection();
+    if (preservedSelectedId != null) {
+        dagHandle.setSelectedNodeId(preservedSelectedId);
+    } else {
+        dagHandle.clearNodeSelection();
+    }
 }
 
 dagMeasureWidthInput?.addEventListener('change', () => {
@@ -1127,8 +1290,12 @@ function readGenAttrDemoUiOptionsFromControls(): GenAttrDemoUiOptions {
         hideExcludedTokens: dagHideExcludedTokensInput?.checked ?? false,
         edgeTopPCoverage,
         nodeCiVisualScaleEnabled: dagNodeCiVisualScaleInput?.checked ?? true,
-        edgeWeakenHighSurprisalEnabled: dagEdgeWeakenHighSurprisalInput?.checked ?? true,
+        decayAttributionToHighSurprisalTargetEnabled:
+            dagDecayAttributionHighSurprisalInput?.checked ?? true,
         hideInactiveEdges: dagHideInactiveEdgesInput?.checked ?? false,
+        showDownstreamInfluence: dagShowDownstreamInfluenceInput?.checked ?? false,
+        recursiveAttributionEnabled: dagRecursiveAttributionInput?.checked ?? false,
+        showTokenInfoOnSelected: dagShowTopkOnSelectedInput?.checked ?? false,
         replayPacingMode: currentDagReplayPacingMode(),
         playbackTotalS,
         playbackStepMs,
@@ -1136,9 +1303,31 @@ function readGenAttrDemoUiOptionsFromControls(): GenAttrDemoUiOptions {
         excludePromptPatternsText: genAttrExcludePromptPatternsTa?.value ?? '',
         excludeGeneratedPatternsEnabled: genAttrExcludeGeneratedPatternsEnable?.checked ?? true,
         excludeGeneratedPatternsText: genAttrExcludeGeneratedPatternsTa?.value ?? '',
+        selectedNodeId: dagHandle.getSelectedNodeId(),
     };
 }
 
+function genAttrDemoUiOptionsMatchesDefaults(current: GenAttrDemoUiOptions): boolean {
+    const base = DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS;
+    for (const key of Object.keys(base) as (keyof GenAttrDemoUiOptions)[]) {
+        const c = current[key];
+        const b = base[key];
+        if (typeof c === 'number' && typeof b === 'number') {
+            if (Math.abs(c - b) >= 1e-6) return false;
+        } else if (c !== b) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function syncGenAttrResetUiOptionsButtonState(): void {
+    if (!genAttrResetUiOptionsBtn) return;
+    genAttrResetUiOptionsBtn.disabled = genAttrDemoUiOptionsMatchesDefaults(
+        readGenAttrDemoUiOptionsFromControls(),
+    );
+}
+
 /**
  * 从 `demoUiOptions` 还原排除控件（仅 DOM）；与施加 DAG demo 不回写 GEN_ATTR_LS 的策略一致，`replay` 读当前控件生效。
  */
@@ -1172,12 +1361,8 @@ function applyGenAttrExcludePatternsFromDemoUiSnap(snap: Partial<GenAttrDemoUiOp
     syncGenAttrExcludePatternTextareasDisabled();
 }
 
-/**
- * 按记录中的 `demoUiOptions` 还原 DAG 面板与排除控件（后者仅 DOM）。
- */
-function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
-    const snap = rec.demoUiOptions;
-    if (!snap) return;
+/** 按 `demoUiOptions` 逐项还原 DAG 面板与排除控件（后者仅 DOM）；未覆盖字段不改变。 */
+function applyGenAttrDemoUiOptionsSnap(snap: Partial<GenAttrDemoUiOptions>): void {
     const mode = snap.layoutMode;
     if (mode) {
         if (dagLayoutModeSelect) {
@@ -1215,14 +1400,36 @@ function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
         if (dagNodeCiVisualScaleInput) dagNodeCiVisualScaleInput.checked = snap.nodeCiVisualScaleEnabled;
         setDagNodeCiVisualScaleEnabled(snap.nodeCiVisualScaleEnabled);
     }
-    if (snap.edgeWeakenHighSurprisalEnabled !== undefined) {
-        if (dagEdgeWeakenHighSurprisalInput) dagEdgeWeakenHighSurprisalInput.checked = snap.edgeWeakenHighSurprisalEnabled;
-        setDagEdgeWeakenHighSurprisalEnabled(snap.edgeWeakenHighSurprisalEnabled);
+    const decayAttributionHighSurprisal =
+        snap.decayAttributionToHighSurprisalTargetEnabled ??
+        (snap as { edgeWeakenHighSurprisalEnabled?: boolean }).edgeWeakenHighSurprisalEnabled;
+    if (decayAttributionHighSurprisal !== undefined) {
+        if (dagDecayAttributionHighSurprisalInput) {
+            dagDecayAttributionHighSurprisalInput.checked = decayAttributionHighSurprisal;
+        }
+        setDagDecayAttributionToHighSurprisalTargetEnabled(decayAttributionHighSurprisal);
     }
     if (snap.hideInactiveEdges !== undefined) {
         if (dagHideInactiveEdgesInput) dagHideInactiveEdgesInput.checked = snap.hideInactiveEdges;
         applyDagHideInactiveEdges(snap.hideInactiveEdges);
     }
+    if (snap.showDownstreamInfluence !== undefined) {
+        if (dagShowDownstreamInfluenceInput) {
+            dagShowDownstreamInfluenceInput.checked = snap.showDownstreamInfluence;
+        }
+        dagHandle.setShowDownstreamInfluence(snap.showDownstreamInfluence);
+    }
+    if (snap.recursiveAttributionEnabled !== undefined) {
+        if (dagRecursiveAttributionInput) {
+            dagRecursiveAttributionInput.checked = snap.recursiveAttributionEnabled;
+        }
+        applyDagDownstreamInfluenceUi();
+        dagHandle.setRecursiveAttributionEnabled(snap.recursiveAttributionEnabled);
+    }
+    if (snap.showTokenInfoOnSelected !== undefined) {
+        if (dagShowTopkOnSelectedInput) dagShowTopkOnSelectedInput.checked = snap.showTokenInfoOnSelected;
+        dagHandle.setShowTokenInfoOnSelected(snap.showTokenInfoOnSelected);
+    }
     if (snap.replayPacingMode !== undefined) {
         if (dagReplayModeSelect) dagReplayModeSelect.value = snap.replayPacingMode;
         applyDagReplaySpeedUi();
@@ -1237,8 +1444,80 @@ function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
     }
 
     applyGenAttrExcludePatternsFromDemoUiSnap(snap);
+    syncGenAttrResetUiOptionsButtonState();
+}
+
+/** replay 完成后按 `demoUiOptions.selectedNodeId` 恢复 DAG 焦点；无效或缺失则清除选中。 */
+function restoreGenAttrDagFocusFromDemoUiOptions(snap: Partial<GenAttrDemoUiOptions> | undefined): void {
+    const focusId = snap?.selectedNodeId;
+    if (typeof focusId === 'string' && focusId.length > 0) {
+        try {
+            dagHandle.setSelectedNodeId(focusId);
+            return;
+        } catch {
+            /* demo 快照与当前图不一致时忽略 */
+        }
+    }
+    dagHandle.clearNodeSelection();
+}
+
+function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
+    if (!rec.demoUiOptions) return;
+    applyGenAttrDemoUiOptionsSnap(rec.demoUiOptions);
+}
+
+/** Gen Attribute demo-UI scope：与 {@link readGenAttrDemoUiOptionsFromControls} / IndexedDB demo 快照一致（不含 Model、Max tokens、prompt 正文）。 */
+const GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS: readonly string[] = [
+    GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY,
+    GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY,
+    GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY,
+    GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY,
+    GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY,
+    GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY,
+    GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY,
+    GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY,
+    GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY,
+    GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY,
+    GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY,
+    GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY,
+    GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY,
+    GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY,
+    GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
+];
+
+function removeGenAttrDemoUiOptionsFromLocalStorage(): void {
+    try {
+        for (const k of GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS) {
+            localStorage.removeItem(k);
+        }
+    } catch {
+        /* ignore */
+    }
+}
+
+/** 重置「DAG 演示用 UI」：清 LS 后以 {@link DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS} 全量套用。 */
+function resetGenAttrDemoUiOptionsToDefaults(): void {
+    stopDagPlayback();
+    removeGenAttrDemoUiOptionsFromLocalStorage();
+    applyGenAttrDemoUiOptionsSnap(DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS);
+    tryResetAndReplayDag({ preserveNodeSelection: false });
 }
 
+genAttrResetUiOptionsBtn?.addEventListener('click', resetGenAttrDemoUiOptionsToDefaults);
+
+(() => {
+    const panel = document.querySelector('.gen-attribute-page .input-section');
+    if (!panel) return;
+    const sync = () => syncGenAttrResetUiOptionsButtonState();
+    panel.addEventListener('change', sync);
+    panel.addEventListener('input', sync);
+    sync();
+})();
+
 window.addEventListener('pagehide', (ev) => {
     if (ev.persisted) return;
     dagHandle.detach();
@@ -1247,9 +1526,7 @@ window.addEventListener('pagehide', (ev) => {
 function onExcludePatternsEffectiveChange(): void {
     const h = runnerHandle;
     if (!h || h.tokenCount === 0) return;
-    dagHandle.reset();
-    replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
-    dagHandle.clearNodeSelection();
+    tryResetAndReplayDag();
 }
 
 function bindExcludePatternControls(
@@ -1576,6 +1853,7 @@ async function applyGenAttrCachedRun(
     stopDagPlayback();
     dagHandle.reset();
     applyGenAttrDemoUiOptionsFromRecord(rec);
+    syncGenAttrResetUiOptionsButtonState();
     runnerHandle = createHydratedTokenGenHandle(rec.steps);
     lastRunInitialContext = rec.initialContext;
     lastRunInputSnapshot = getInputSnapshotForRun();
@@ -1585,7 +1863,7 @@ async function applyGenAttrCachedRun(
     currentRunPromptSpans = replayPromptSpans;
     replayRunnerStepsIntoDag(runnerHandle, replayPromptSpans);
     dagHandle.fitViewportToContent();
-    dagHandle.clearNodeSelection();
+    restoreGenAttrDagFocusFromDemoUiOptions(rec.demoUiOptions);
     const n = runnerHandle.tokenCount;
     setGenAttrUsageMetric(initialPromptTokensFromFirstStep(rec.steps[0]!), n);
     if (validateMetricsElements(metricModel) && n > 0) {
@@ -1993,13 +2271,8 @@ submitBtn.on('click', () => {
 function refreshDagForThemeChange(): void {
     stopDagPlayback();
     const h = runnerHandle;
-    if (!h || h.tokenCount === 0) {
-        return;
-    }
-    dagHandle.reset();
-    replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
-    dagHandle.fitViewportToContent();
-    dagHandle.clearNodeSelection();
+    if (!h || h.tokenCount === 0) return;
+    tryResetAndReplayDag();
 }
 
 const themeManager = initThemeManager(

client/src/ts/lang/translations.ts

@@ -52,11 +52,17 @@ export const translations: Translations = {
             'Coverage 指每一步在 Top-N 候选池内的累计质量份额（先入池、池内归一后按强度排序再累加）。数值越大保留的 DAG 入边越多；分母仅为该候选池，不是该步 API 返回的全部归因 token。',
         'When checked, gray DAG edges not adjacent to the hovered or selected node are hidden.':
             '勾选后，DAG 中未与当前悬浮/选中节点相邻的灰色边将被隐藏。',
+        'Show token tooltip':
+            '显示 token 提示',
+        'When checked, selecting or hovering a token node shows token information in the results area.':
+            '勾选后，选中或悬浮 token 节点时，在右侧结果区展示该 token 的信息（信息量、预测分布、归因份额等）。',
         'Width (px) of the invisible measurement layer used for DAG layout. Only this width affects wrapping and node positions. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh.':
             'DAG 节点几何所基于的不可见测量层宽度（px）。只有测量层宽度会影响节点折行/位置。修改后：稳态下自动按新宽度重放并 fit；若正在生成或 DAG 播放中，仅更新设置，下次刷新/生成时生效。',
         'Token distance': 'Token distance 间距',
+        'Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc / linear-arc-step-down layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync.':
+            '仅 linear-arc / linear-arc-step-down 布局下生效：相邻 token 节点矩形外侧边之间的水平间隙（px）。修改后：稳态下立即重绘并 fit；若正在生成或 DAG 播放中，仅写入存储，下一轮同步时再反映。',
         'Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync.':
-            '仅 linear-arc 布局下生效：相邻 token 节点矩形外侧边之间的水平间隙（px）。修改后：稳态下立即重绘并 fit；若正在生成或 DAG 播放中，仅写入存储，下一轮同步时再反映。',
+            '仅 linear-arc / linear-arc-step-down 布局下生效：相邻 token 节点矩形外侧边之间的水平间隙（px）。修改后：稳态下立即重绘并 fit；若正在生成或 DAG 播放中，仅写入存储，下一轮同步时再反映。',
         'Compactness': 'DAG 紧凑度',
         'Scales DAG node boxes and labels relative to the measurement layer; 1 matches full readout scale. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh.':
             '相对测量层缩放 DAG 节点框与标签；1 与正文阅读比例一致。修改后：稳态下自动重放并 fit；若正在生成或 DAG 播放中，仅更新设置，下次运行或刷新时生效。',
@@ -115,6 +121,9 @@ export const translations: Translations = {
         'Cached result not found (link may be expired)': '未找到该条归因缓存（分享链接可能已过期）',
         'Cached run not found': '未找到该条生成缓存，可能已被删除',
         'Cached run not found (link may be expired)': '未找到该条生成缓存（分享链接可能已过期）',
+        'Reset UI options': '重置界面选项',
+        'Restore DAG options, replay speed, exclusions, etc. to defaults and clear saved preferences for those controls.':
+            '将 DAG 参数、回放速度、排除正则等恢复为默认值，并清除这些控件的本地保存项。',
         'Cached history': '历史缓存',
         'Cached demos': '示例缓存',
         'Demo not found': '未找到该示例缓存',
@@ -305,6 +314,9 @@ export const translations: Translations = {
         'log perplexity:': '对数困惑度：',
         'Top-k data not available.': '未提供 Top-k 数据。',
         'UTF-8 size:': 'UTF-8大小：',
+        'Attribution share:': '归因份额：',
+        'Attribution share (Total):': '归因份额（总计）：',
+        'Attribution share (Self):': '归因份额（自身）：',
 
         // ========== 统计信息 ==========
         'bytes': '字节',
@@ -386,6 +398,8 @@ export const translations: Translations = {
             '无法使用加密API（crypto.subtle），保存到本地缓存功能不可用。',
         'URL text extraction failed': 'URL 文本提取失败',
         'Semantic analysis failed': '语义分析失败',
+        'Semantic Query(Beta)': '语义查询(Beta)',
+        'Enter query question or topic': '请输入查询问题或主题',
         'Tokenizer results inconsistent: semantic and info-density token boundaries differ.': 'Tokenizer 结果不一致：语义分析与信息密度的 token 边界存在差异，属预期外情况。',
         'No data to analyze, please analyze text first': '没有可分析的数据，请先分析文本',
         'User cancelled file selection': '用户取消了文件选择',

client/src/ts/storage/genAttributeRunCache.ts

@@ -67,8 +67,13 @@ export type GenAttrDemoUiOptions = {
     hideExcludedTokens: boolean;
     edgeTopPCoverage: number;
     nodeCiVisualScaleEnabled: boolean;
-    edgeWeakenHighSurprisalEnabled: boolean;
+    decayAttributionToHighSurprisalTargetEnabled: boolean;
     hideInactiveEdges: boolean;
+    showDownstreamInfluence: boolean;
+    /** 传播归因（UI: Propagated attribution mode；与 `recursiveAttribution*` 同义）。 */
+    recursiveAttributionEnabled: boolean;
+    /** 是否显示 token tooltip（UI: Show token tooltip；`showTokenInfoOnSelected`）。 */
+    showTokenInfoOnSelected: boolean;
     replayPacingMode: 'total' | 'step';
     playbackTotalS: number;
     playbackStepMs: number;
@@ -78,6 +83,8 @@ export type GenAttrDemoUiOptions = {
     /** 排除生成 token 归因：使能与正则文本（`info_radar_gen_attr_exclude_generated_*`）。 */
     excludeGeneratedPatternsEnabled: boolean;
     excludeGeneratedPatternsText: string;
+    /** DAG 选中节点（offset id：`"${start}_${end}"`）；无选中时为 `null`。 */
+    selectedNodeId?: string | null;
 };
 
 /** 单条记录 JSON：内容字段 + 可选 `demoUiOptions`（仅导出 demo 写入）。 */
@@ -193,7 +200,12 @@ function isValidGenAttrRunDraftPayload(v: unknown): boolean {
 }
 
 function isDagLayoutModePayload(v: unknown): v is DagLayoutMode {
-    return v === 'text-flow' || v === 'linear-arc' || v === 'spiral';
+    return (
+        v === 'text-flow' ||
+        v === 'linear-arc' ||
+        v === 'linear-arc-step-down' ||
+        v === 'spiral'
+    );
 }
 
 function isValidDemoUiOptionsPayload(v: unknown): v is Partial<GenAttrDemoUiOptions> {
@@ -222,10 +234,35 @@ function isValidDemoUiOptionsPayload(v: unknown): v is Partial<GenAttrDemoUiOpti
     if (d.nodeCiVisualScaleEnabled !== undefined && typeof d.nodeCiVisualScaleEnabled !== 'boolean') {
         return false;
     }
-    if (d.edgeWeakenHighSurprisalEnabled !== undefined && typeof d.edgeWeakenHighSurprisalEnabled !== 'boolean') {
+    if (
+        d.decayAttributionToHighSurprisalTargetEnabled !== undefined &&
+        typeof d.decayAttributionToHighSurprisalTargetEnabled !== 'boolean'
+    ) {
+        return false;
+    }
+    const legacyDecay = (d as { edgeWeakenHighSurprisalEnabled?: unknown }).edgeWeakenHighSurprisalEnabled;
+    if (legacyDecay !== undefined && typeof legacyDecay !== 'boolean') {
         return false;
     }
     if (d.hideInactiveEdges !== undefined && typeof d.hideInactiveEdges !== 'boolean') return false;
+    if (
+        d.showDownstreamInfluence !== undefined &&
+        typeof d.showDownstreamInfluence !== 'boolean'
+    ) {
+        return false;
+    }
+    if (
+        d.recursiveAttributionEnabled !== undefined &&
+        typeof d.recursiveAttributionEnabled !== 'boolean'
+    ) {
+        return false;
+    }
+    if (
+        d.showTokenInfoOnSelected !== undefined &&
+        typeof d.showTokenInfoOnSelected !== 'boolean'
+    ) {
+        return false;
+    }
     if (d.replayPacingMode !== undefined && d.replayPacingMode !== 'total' && d.replayPacingMode !== 'step') {
         return false;
     }
@@ -256,6 +293,13 @@ function isValidDemoUiOptionsPayload(v: unknown): v is Partial<GenAttrDemoUiOpti
     ) {
         return false;
     }
+    if (
+        d.selectedNodeId !== undefined &&
+        d.selectedNodeId !== null &&
+        typeof d.selectedNodeId !== 'string'
+    ) {
+        return false;
+    }
     return true;
 }
 

client/src/ts/utils/clientActivityPing.ts

@@ -3,6 +3,12 @@ import { AdminManager } from './adminManager';
 
 const S = 10, FIRST = 2;
 
+let _pageOptsGetter: (() => Record<string, boolean>) | undefined;
+/** gen_attribute.html 等页面注册当前选项状态，供心跳上报时附带。 */
+export function setPageOptsGetter(fn: () => Record<string, boolean>): void {
+    _pageOptsGetter = fn;
+}
+
 export type ReportedClientOs = 'ios' | 'android' | 'windows' | 'macos' | 'linux' | 'unknown';
 
 /** UA 粗略归类；仅在首轮心跳（cum === FIRST）顺带上报一次。 */
@@ -39,6 +45,10 @@ export function initClientActivityPing(apiPrefix: string | null | undefined): vo
             delta_active_sec,
         };
         if (cum === FIRST) payload.client_os = detectInitialClientOs();
+        if (_pageOptsGetter) {
+            const active = Object.fromEntries(Object.entries(_pageOptsGetter()).filter(([, v]) => v));
+            if (Object.keys(active).length > 0) payload.page_opts = active;
+        }
         const body = JSON.stringify(payload);
         void fetch(u, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, keepalive: true })
             .then((r) => { if (r.ok) reportedTotal = cum; })

client/src/ts/utils/surprisalMath.ts

@@ -14,12 +14,18 @@ export const ZERO_CONFIDENCE_PROBABILITY_BASELINE = 2 ** -18;
 export const REFERENCE_MAX_SURPRISAL_BITS = Math.log2(1 / ZERO_CONFIDENCE_PROBABILITY_BASELINE);
 
 /**
- * 全信心概率阈值 p₁：surprisal 低于对应 bit 数时视作模型已充分自信，视觉上不放大节点。
- * 此处为 3 bit，对应概率 > 1/8（约 12.5%）。
+ * 全信心概率阈值 p₁（3 bit，p > 1/8）：surprisal 足够低时视为充分自信、DAG 传导节点（非信息来源）。
+ *
+ * 硬截断仅经本文件三个 `dag*` 函数进入 Generate & Attribute DAG：
+ * - {@link dagCiVisualScaleFromTargetProb} → `genAttributeDagView`：生成节点框/标签不放大（1×）
+ * - {@link dagStepDownEffectiveCiRatio} → `genAttributeDagViewLinearArcMode`：`linear-arc-step-down` 无竖直台阶
+ * - {@link dagPropagationMiRatio} → `genAttributeDagView` `nodePropagationMiRatio`：递归链满额传导、无 stay 描边
+ *
+ * 不用于 tooltip 与边上的 CI/MI 展示（仍 {@link computeMutualInformationRatio} / {@link computeConditionalInformationRatio}）。
  */
 export const FULL_CONFIDENCE_PROBABILITY_BASELINE = 2 ** -3;
 
-/** 与 p₁ 对应的 surprisal 下界（bit）；低于此值的节点 ciVisualScale 截断为 1×。 */
+/** 与 p₁ 对应的 surprisal 上界（bit）；surprisal ≤ 此值即满足「充分自信」截断条件。 */
 export const REFERENCE_NO_SURPRISAL_BITS = Math.log2(1 / FULL_CONFIDENCE_PROBABILITY_BASELINE);
 
 function clamp01(n: number): number {
@@ -49,3 +55,44 @@ export function computeConditionalInformationRatio(targetProb: number | undefine
     if (!Number.isFinite(targetProb) || targetProb <= 0) return 1;
     return clamp01(-Math.log2(targetProb) / REFERENCE_MAX_SURPRISAL_BITS);
 }
+
+/**
+ * DAG 生成节点 CI 视觉缩放倍数（约 `[1, 2]`）：语义为 `1 +` 有效 CI。
+ * `ciVisualScaleEnabled === false` 或 `p > {@link FULL_CONFIDENCE_PROBABILITY_BASELINE}` 时为 `1×`；
+ * 否则为 `1 + {@link computeConditionalInformationRatio}(p)`。
+ */
+export function dagCiVisualScaleFromTargetProb(
+    targetProb: number | undefined,
+    ciVisualScaleEnabled: boolean
+): number {
+    if (!ciVisualScaleEnabled) return 1;
+    if (targetProb !== undefined && Number.isFinite(targetProb) && targetProb > FULL_CONFIDENCE_PROBABILITY_BASELINE) {
+        return 1;
+    }
+    return 1 + computeConditionalInformationRatio(targetProb);
+}
+
+/**
+ * 仅用于 DAG「下台阶」布局的有效 CI（`[0,1]`）：与 {@link computeConditionalInformationRatio} 同源，
+ * 但 `p > {@link FULL_CONFIDENCE_PROBABILITY_BASELINE}` 时为 0（与节点「高置信 1×」截断一致）。
+ *
+ * 不受「关闭 CI 视觉放大」开关影响——该开关只缩节点框，不应关掉按不确定度的竖直落差。
+ */
+export function dagStepDownEffectiveCiRatio(targetProb: number | undefined): number {
+    if (targetProb !== undefined && Number.isFinite(targetProb) && targetProb > FULL_CONFIDENCE_PROBABILITY_BASELINE) {
+        return 0;
+    }
+    return computeConditionalInformationRatio(targetProb);
+}
+
+/**
+ * DAG 递归归因链的传导系数（`[0,1]`）：与 {@link computeMutualInformationRatio} 同源，
+ * 但 `p > {@link FULL_CONFIDENCE_PROBABILITY_BASELINE}` 时截断为 1（纯传导，不衰减预算、不留 stay）。
+ * 与节点视觉（不放大）、下台阶（不下沉）的「充分自信」语义保持一致。
+ */
+export function dagPropagationMiRatio(targetProb: number | undefined): number {
+    if (targetProb !== undefined && Number.isFinite(targetProb) && targetProb > FULL_CONFIDENCE_PROBABILITY_BASELINE) {
+        return 1;
+    }
+    return computeMutualInformationRatio(targetProb);
+}

client/src/ts/utils/tokenDisplayUtils.ts

@@ -80,7 +80,7 @@ function visualizeSpecialCharsImpl(text: string, options?: VisualizeSpecialChars
         } else if (inBracket) {
             processed.push(char);
         } else {
-            // 保留的空格不能走下方「不可打印 → U+」分支，否则会变成 [U+0020]
+            // 保留的空格不能走下方「不可打印 → 码点」分支，否则会变成 [0020]
             if (char === ' ') {
                 processed.push(char);
             } else if (isPrintableChar(char)) {
@@ -88,8 +88,8 @@ function visualizeSpecialCharsImpl(text: string, options?: VisualizeSpecialChars
             } else {
                 const codePoint = char.codePointAt(0);
                 if (codePoint !== undefined) {
-                    const hexCode = codePoint.toString(16).toUpperCase().padStart(4, '0');
-                    processed.push(`[U+${hexCode}]`);
+                    const hexCode = codePoint.toString(16).toLowerCase().padStart(4, '0');
+                    processed.push(`[${hexCode}]`);
                 } else {
                     processed.push(char);
                 }

client/src/ts/utils/topkChartUtils.ts

@@ -123,8 +123,8 @@ export function renderTopkChartHtml(
     const maxBar = options?.maxBarWidth ?? MAX_BAR_WIDTH;
     const numF = options?.numFormat ?? formatTopkTooltipProbabilityPercent;
 
-    const maxProb = data[0]?.prob ?? 1;
-    const scale = d3.scaleLinear().domain([0, maxProb]).range([0, maxBar]);
+    /** 条形满宽对应概率 100%（1），与显示的百分比刻度一致 */
+    const scale = d3.scaleLinear().domain([0, 1]).range([0, maxBar]);
     const barCellW = options?.barCellWidth ?? 110;
 
     const pickable = options?.interactivePickable === true;

client/src/ts/utils/visitStatsDialog.ts

@@ -28,6 +28,22 @@ const API_ORDER = [
 
 const OS_ORDER = ['ios', 'android', 'windows', 'macos', 'linux', 'unknown'] as const;
 
+const GEN_ATTR_OPT_ORDER = [
+    'layout_linear_arc', 'layout_step_down', 'layout_spiral',
+    'propagated',
+    'downstream', 'token_tooltip',
+] as const;
+
+/** gen_attribute.html UI 原文；key 与上报/存储一致 */
+const GEN_ATTR_OPT_LABELS: Record<(typeof GEN_ATTR_OPT_ORDER)[number], string> = {
+    propagated: 'Propagated attribution mode',
+    layout_linear_arc: 'DAG layout mode/linear_arc',
+    layout_step_down: 'DAG layout mode/step-down',
+    layout_spiral: 'DAG layout mode/spiral',
+    downstream: 'Show downstream influence',
+    token_tooltip: 'Show token tooltip',
+};
+
 type VisitStatsRow = NonNullable<Awaited<ReturnType<TextAnalysisAPI['getVisitStats']>>>;
 
 function orderedKeysGt0(primary: readonly string[], rec: Record<string, number>): string[] {
@@ -74,7 +90,8 @@ function visitStatsHtml(data: VisitStatsRow): string {
     const pg = data.page_sec ?? {};
     const ap = data.api ?? {};
     const os = data.os ?? {};
-    const fmtTotal = (v: number) => (Object.keys(sb).length > 0 ? String(v) : 'unknown');
+    const hasBase = Object.keys(sb).length > 0;
+    const fmtTotal = (v: number) => (hasBase ? String(v) : 'unknown');
     const linesJoined = (keys: string[], cur: Record<string, number>, base: Record<string, number>): string[] => {
         if (!keys.length) return ['(none)'];
         return keys.map((k) => {
@@ -84,7 +101,6 @@ function visitStatsHtml(data: VisitStatsRow): string {
     };
     const linesJoinedPageSec = (keys: string[], cur: Record<string, number>, base: Record<string, number>): string[] => {
         if (!keys.length) return ['(none)'];
-        const hasBase = Object.keys(sb).length > 0;
         return keys.map((k) => {
             const v = cur[k] ?? 0;
             const main = hasBase ? formatDurationSec(v) : 'unknown';
@@ -92,6 +108,20 @@ function visitStatsHtml(data: VisitStatsRow): string {
         });
     };
 
+    const genAttrOpts = data.gen_attr_opt_sec ?? {};
+    const genAttrTotalSec = pg['gen_attribute.html'] ?? 0;
+    const genAttrOptKeys = orderedKeysGt0(GEN_ATTR_OPT_ORDER, genAttrOpts);
+    const genAttrOptLines: string[] = genAttrOptKeys.length > 0 && genAttrTotalSec > 0
+        ? genAttrOptKeys.map((k) => {
+            const v = genAttrOpts[k] ?? 0;
+            const pct = Math.round(v / genAttrTotalSec * 100);
+            const main = hasBase ? `${formatDurationSec(v)} (${pct}%)` : 'unknown';
+            const bv = (sb.gen_attr_opt_sec ?? {})[k] ?? 0;
+            const label = GEN_ATTR_OPT_LABELS[k as (typeof GEN_ATTR_OPT_ORDER)[number]] ?? k;
+            return `${esc(label)}: ${main}${deltaSuffixDuration(v - bv)}`;
+        })
+        : ['(none)'];
+
     return [
         `Last delta reset: ${esc(data.reset_at ? new Date(data.reset_at).toLocaleString() : 'unknown')}`,
         `Last persisted: ${esc(data.saved_at ? new Date(data.saved_at).toLocaleString() : 'unknown')}`,
@@ -108,6 +138,9 @@ function visitStatsHtml(data: VisitStatsRow): string {
         '',
         '[API]',
         ...linesJoined(orderedKeysGt0(API_ORDER, ap), ap, sb.api ?? {}),
+        '',
+        '[gen_attribute options (% active time)]',
+        ...genAttrOptLines,
     ].join('\n');
 }
 

client/src/ts/utils/visualizationUpdater.ts

@@ -272,16 +272,23 @@ export class VisualizationUpdater {
 
         const infoText = this.currentState.infoDensityData?.request?.text ?? '';
         const semText = this.currentState.semanticData?.text ?? '';
+        const semanticQueryOn = getSemanticAnalysisEnabled();
 
         let showInfoDensity = false;
         let showSemantic = false;
 
         if (mode === 'infoDensity') {
-            showInfoDensity = true;
-            showSemantic = hasSemanticData(this.currentState.semanticData) && semText === text;
+            /** Semantic Query 勾选时统计区不出现信息密度图占位 */
+            showInfoDensity = !semanticQueryOn;
+            showSemantic =
+                semanticQueryOn &&
+                hasSemanticData(this.currentState.semanticData) &&
+                semText === text;
         } else {
             showSemantic = true;
-            showInfoDensity = !!this.currentState.infoDensityData && infoText === text;
+            showInfoDensity =
+                !semanticQueryOn &&
+                !!(this.currentState.infoDensityData && infoText === text);
         }
 
         if (tokenHistogramItem) tokenHistogramItem.style.display = showInfoDensity ? '' : 'none';
@@ -327,18 +334,20 @@ export class VisualizationUpdater {
 
     /**
      * 重新渲染直方图（内部方法）
-     * 仅信息密度：只显示 token/surprisal progress；仅语义：只显示 raw score normed；联合：全部显示
+     * Semantic Query 勾选：仅语义相关图；未勾选：有信息密度数据时显示 token + surprisal
      * @param skipLmfUpdate 为 true 时跳过 lmf.update（主题切换时由 rerenderOnThemeChange 统一重绘，避免竞态）
      */
     private updateVisualizationInternal(skipLmfUpdate = false): void {
         const hasInfoDensity = !!this.currentState.infoDensityData;
         const displayResult = this.computeDisplayResult();
+        const sem = this.currentState.semanticData;
+        const showInfoDensityCharts = hasInfoDensity && !getSemanticAnalysisEnabled();
 
         const tokenHistogramItem = document.getElementById('token_histogram_item');
         const surprisalProgressItem = document.getElementById('surprisal_progress_item');
         const rawScoreNormedItem = document.getElementById('raw_score_normed_histogram_item');
 
-        if (hasInfoDensity) {
+        if (showInfoDensityCharts) {
             const currentSurprisals = this.currentState.currentSurprisals;
             const currentTokenAvg = this.currentState.currentTokenAvg;
             const currentTokenP90 = this.currentState.currentTokenP90;
@@ -375,7 +384,6 @@ export class VisualizationUpdater {
 
         const rawScoresNormed = displayResult?.rawScoresNormed;
         const validRawScoresNormed = rawScoresNormed?.filter((s) => typeof s === 'number' && isFinite(s));
-        const sem = this.currentState.semanticData;
         const signalFitResult = sem?.signalFitResult ?? null;
         const chunkInfos = sem?.chunkInfos;
         const isChunkMode = (chunkInfos?.length ?? 0) > 0;
@@ -614,7 +622,6 @@ export class VisualizationUpdater {
         this.deps.highlightController.updateCurrentData(null);
         d3.select('#all_result').style('opacity', 0);
         this.updateSemanticDebugInfo();
-        this.syncDigitsMergeUi();
     }
 
     /**
@@ -627,24 +634,10 @@ export class VisualizationUpdater {
         const matchScoreProgressItem = document.getElementById('match_score_progress_item');
         if (matchScoreProgressItem) matchScoreProgressItem.style.display = 'none';
         this.updateSemanticDebugInfo();
-        this.syncDigitsMergeUi();
     }
 
     /**
-     * 分块语义结果无法在客户端切换 digit 合并方式，禁用开关避免与信息密度边界不一致
-     */
-    private syncDigitsMergeUi(): void {
-        const el = document.getElementById('enable_digits_merge_toggle') as HTMLInputElement | null;
-        if (!el) return;
-        const disabled = !!this.currentState.semanticData?.chunkInfos?.length;
-        el.disabled = disabled;
-        el.title = disabled
-            ? 'Chunked semantic analysis locks digit merge; clear semantic data or use non-chunked mode to toggle.'
-            : '';
-    }
-
-    /**
-     * digit merge 开关变化时：从 originalTokens / API attention 重算合并并刷新文本与图表
+     * digit merge 用户偏好变化时：对信息密度与整段语义从可重算数据源刷新；分块语义无副本则保持当前展示不变
      */
     public applyDigitsMergeSetting(): void {
         const digitMerge = getDigitsMergeEnabled();
@@ -678,7 +671,6 @@ export class VisualizationUpdater {
             this.currentState.currentTokenAvg = computeAverage(mergedSurprisals);
             this.currentState.currentTokenP90 = computeP90(mergedSurprisals);
         }
-        this.syncDigitsMergeUi();
         let displayResult: ReturnType<VisualizationUpdater['computeDisplayResult']>;
         try {
             displayResult = this.computeDisplayResult();
@@ -707,7 +699,7 @@ export class VisualizationUpdater {
         if (el) el.style.display = enabled ? '' : 'none';
         this.deps.lmf.updateOptions({ semanticAnalysisMode: enabled }, false);
         if (!enabled) {
-            // 关闭时清除语义数据、直方图、debug 信息（不重渲染，避免重复渲染信息密度）
+            // 关闭时清除语义数据；统计图由下方 updateVisualizationInternal 统一刷新
             this.currentState.semanticData = null;
             const rawScoreNormedItem = document.getElementById('raw_score_normed_histogram_item');
             if (rawScoreNormedItem) rawScoreNormedItem.style.display = 'none';
@@ -720,10 +712,9 @@ export class VisualizationUpdater {
                 d3.select('#all_result').style('opacity', 0);
                 this.deps.appStateManager.updateState({ hasValidData: false });
             }
-            // 关闭语义模式后立刻按当前数据重绘，确保语义着色和相关图表不残留
-            this.updateVisualizationInternal(false);
         }
-        this.syncDigitsMergeUi();
+        /** 勾选 / 关闭 Semantic Query 后立即刷新统计图显隐（与 getSemanticAnalysisEnabled 一致） */
+        this.updateVisualizationInternal(false);
         // 语义分析配置影响 Upload/Save 的 dataReadyForSave 条件，需始终更新按钮状态
         this.deps.appStateManager.updateButtonStates();
     }
@@ -881,7 +872,6 @@ export class VisualizationUpdater {
         this.deps.appStateManager.updateState({ hasValidData: true });
 
         this.syncSemanticUiFromConfig();
-        this.syncDigitsMergeUi();
     }
 
     /**
@@ -986,7 +976,6 @@ export class VisualizationUpdater {
         this.updateVisualizationInternal();
 
         this.updateSemanticDebugInfo(res.debug_info);
-        this.syncDigitsMergeUi();
         return true;
     }
 

client/src/ts/vis/ToolTip.ts

@@ -13,9 +13,30 @@ import {
 
 const SEPARATOR = '─────────────';
 
+/** 贴在定位包含块角落时的留白（px）；{@link ToolTipOptions.placement} `parent-bottom-right` 使用 */
+const CORNER_INSET_PX = 0;
+
 export type ToolTipOptions = {
     /** 真实 top-k 下 surprisal 行的标签（默认「信息量」） */
     surprisalRowLabel?: string;
+    /**
+     * `parent-bottom-right`：`position:absolute`，贴在定位包含块（`offsetParent`）右下角（DAG Top‑K 作为 `#results` 直接子节点时即为 results 内侧右下）。
+     * 该 HUD 模式不依赖锚点几何；面板应由页面 CSS（如 `.gen-attr-dag-topk-tooltip`）约束宽高与内部滚动，而非按内容 shrink-wrap。
+     * 默认 `anchor`：沿用原有相对 token rect 的定位。
+     */
+    placement?: 'anchor' | 'parent-bottom-right';
+    /**
+     * false：面板不参与命中测试（`pointer-events: none`），避免盖住底层 SVG 时在节点上反复 `mouseleave`/闪动；
+     * 同时不注册点击/触摸收起，且不接收内部滚动交互。
+     */
+    pointerInteractive?: boolean;
+};
+
+/** {@link ToolTip.updateData} 可选增补（如 DAG：CI/MI 行紧跟 surprisal 之后） */
+export type ToolTipUpdateAugment = {
+    /** 在 surprisal / 信息密度行之前渲染（紧跟 token 文字，位于所有 info 行上方） */
+    rowsBeforeInfo?: Array<{ label: string; value: string; valueColor?: boolean }>;
+    rowsAfterSurprisal?: Array<{ label: string; value: string; valueColor?: boolean }>;
 };
 
 type DetailField = { label: string; value: string; valueColor?: boolean };
@@ -43,15 +64,30 @@ export class ToolTip {
     
     // 防抖：pending 的更新任务
     private pendingUpdate: number | null = null;
-    private pendingData: { ri: GLTR_RenderItem; event?: MouseEvent } | null = null;
+    private pendingData: {
+        ri: GLTR_RenderItem;
+        anchorTarget: EventTarget | null;
+        augment?: ToolTipUpdateAugment;
+    } | null = null;
     
     // 主题监听器
     private themeObserver: MutationObserver | null = null;
 
     private readonly surprisalRowLabel: string;
+    private readonly placement: NonNullable<ToolTipOptions['placement']>;
+    private readonly pointerInteractive: boolean;
 
     constructor(private parent: D3Sel, private eh: SimpleEventHandler, options?: ToolTipOptions) {
         this.surprisalRowLabel = options?.surprisalRowLabel ?? tr('information:');
+        this.placement = options?.placement ?? 'anchor';
+        this.pointerInteractive = options?.pointerInteractive ?? true;
+        if (!this.pointerInteractive) {
+            this.parent.classed('tooltip-no-pointer-hit', true);
+        }
+        const el = this.parent.node() as HTMLElement | null;
+        if (el && this.placement === 'parent-bottom-right') {
+            el.style.position = 'absolute';
+        }
         this._init();
         this._setupThemeObserver();
         this._updateThemeColors();
@@ -62,20 +98,19 @@ export class ToolTip {
         this.predictions = this.parent.select('.predictions');
         this.myDetail = this.parent.select('.myDetail');
         this.currentToken = this.parent.select('.currentToken');
-        
-        // 添加点击事件：点击 tooltip 任意位置关闭
-        this.parent.on('click', (event) => {
-            event.stopPropagation(); // 阻止事件冒泡，避免触发下方元素
-            event.preventDefault(); // 阻止默认行为
-            this.visibility = false;
-        });
-        
-        // 移动端触摸事件
-        this.parent.on('touchstart', (event) => {
-            event.stopPropagation(); // 阻止事件冒泡，避免触发 body 的 touchstart
-            event.preventDefault(); // 阻止默认行为
-            this.visibility = false;
-        });
+
+        if (this.pointerInteractive) {
+            this.parent.on('click', (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                this.visibility = false;
+            });
+            this.parent.on('touchstart', (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                this.visibility = false;
+            });
+        }
     }
     
     /**
@@ -140,59 +175,23 @@ export class ToolTip {
     }
     
     /**
-     * 从event.target向上查找SVG rect元素，优先找到包含鼠标位置的rect
-     * 解决事件绑定在group上时，target可能是group而不是rect的问题
-     * @param target 事件目标元素
-     * @param mouseX 鼠标X坐标
-     * @param mouseY 鼠标Y坐标
-     * @returns 找到的SVG rect元素，如果没找到则返回null
+     * 从事件目标解析用于定位的 SVG rect（与指针坐标无关）：rect 自身、或容器 `g` 内首个 `rect`、或向上追溯。
      */
-    private _findTokenRect(target: EventTarget | null, mouseX: number, mouseY: number): SVGRectElement | null {
-        if (!target) return null;
-        
-        let element = target as Element;
-        
-        // 如果target本身就是rect，直接返回
-        if (element instanceof SVGRectElement) {
-            return element;
-        }
-        
-        // 如果target是group，查找包含鼠标位置的rect
+    private _resolveAnchorRectElement(target: EventTarget | null): SVGRectElement | null {
+        if (!target || !(target instanceof Element)) return null;
+        let element: Element | null = target;
+        if (element instanceof SVGRectElement) return element;
         if (element instanceof SVGGElement) {
-            const rects = element.querySelectorAll('rect');
-            // 优先查找包含鼠标位置的rect
-            for (const rect of rects) {
-                const rectBounds = rect.getBoundingClientRect();
-                if (mouseX >= rectBounds.left && mouseX <= rectBounds.right &&
-                    mouseY >= rectBounds.top && mouseY <= rectBounds.bottom) {
-                    return rect;
-                }
-            }
-            // 如果没找到包含鼠标的rect，返回第一个rect（fallback）
-            return rects[0] || null;
+            return element.querySelector('rect');
         }
-        
-        // 如果target是其他元素，向上查找parent
-        let parent = element.parentElement;
-        while (parent) {
-            if (parent instanceof SVGRectElement) {
-                return parent;
+        while (element) {
+            if (element instanceof SVGRectElement) return element;
+            if (element instanceof SVGGElement) {
+                const r = element.querySelector('rect');
+                if (r) return r;
             }
-            if (parent instanceof SVGGElement) {
-                // 在group中查找包含鼠标位置的rect
-                const rects = parent.querySelectorAll('rect');
-                for (const rect of rects) {
-                    const rectBounds = rect.getBoundingClientRect();
-                    if (mouseX >= rectBounds.left && mouseX <= rectBounds.right &&
-                        mouseY >= rectBounds.top && mouseY <= rectBounds.bottom) {
-                        return rect;
-                    }
-                }
-                return rects[0] || null;
-            }
-            parent = parent.parentElement;
+            element = element.parentElement;
         }
-        
         return null;
     }
     
@@ -222,37 +221,71 @@ export class ToolTip {
         this.pendingData = null;
         this.visibility = false;
         if (node) {
-            node.style.top = '0px';
-            node.style.left = '0px';
+            if (this.placement === 'parent-bottom-right') {
+                this._placeParentBottomRight(node);
+            } else {
+                node.style.top = '0px';
+                node.style.left = '0px';
+            }
         }
     }
 
+    /** 固定在 offsetParent（含隐藏态占位）右下角 */
+    private _placeParentBottomRight(node: HTMLElement): void {
+        node.style.position = 'absolute';
+        node.style.right = `${CORNER_INSET_PX}px`;
+        node.style.left = 'auto';
+        node.style.top = 'auto';
+        node.style.bottom = `${CORNER_INSET_PX}px`;
+    }
+
     set visibility(vis: boolean) {
+        const node = this.parent.node() as HTMLElement | null;
         if (vis == true) {
-            this.parent.style('opacity', 1);
-            this.parent.style('pointer-events', 'auto');  // 显示时允许点击
+            node?.classList.add('tooltip-visible');
+            node?.style.removeProperty('opacity');
+            this.parent.style('pointer-events', this.pointerInteractive ? 'auto' : 'none');
         } else {
+            node?.classList.remove('tooltip-visible');
             this.parent.style('opacity', 0);
             this.parent.style('pointer-events', 'none');  // 关闭时禁止点击，让事件穿透
         }
     }
 
 
-    updateData(ri: GLTR_RenderItem, event?: MouseEvent) {
+    /**
+     * @param eventOrAnchor 指针事件（使用 `target`）或直接传入用作锚点的元素（如 SVG `rect` / `g`）
+     */
+    updateData(
+        ri: GLTR_RenderItem,
+        eventOrAnchor?: MouseEvent | TouchEvent | Element | null,
+        augment?: ToolTipUpdateAugment
+    ) {
         // 防抖：取消之前的更新任务
         if (this.pendingUpdate !== null) {
             cancelAnimationFrame(this.pendingUpdate);
         }
 
+        const anchorTarget =
+            eventOrAnchor instanceof Element
+                ? eventOrAnchor
+                : eventOrAnchor && 'target' in eventOrAnchor
+                  ? (eventOrAnchor.target as EventTarget | null)
+                  : null;
+
         // 保存最新的数据
-        this.pendingData = { ri, event };
+        this.pendingData = { ri, anchorTarget, augment };
 
         // 先将 tooltip 移到屏幕外，避免在位置计算完成前显示在旧位置
         // 这可以解决 iOS Safari 上触摸时的抖动问题：
         // 如果旧位置在触摸点下方，会触发 tooltip 的 touchstart 导致关闭
         const node = this.parent.node() as HTMLElement;
         if (node) {
-            node.style.left = '-9999px';
+            if (this.placement === 'parent-bottom-right') {
+                this._placeParentBottomRight(node);
+            } else {
+                node.style.left = '-9999px';
+            }
         }
         this.visibility = true;
 
@@ -261,14 +294,14 @@ export class ToolTip {
             this.pendingUpdate = null;
             if (!this.pendingData) return;
 
-            const { ri: currentRi, event: currentEvent } = this.pendingData;
+            const { ri: currentRi, anchorTarget: at, augment } = this.pendingData;
             this.pendingData = null;
 
             // 更新内容
-            this._updateContent(currentRi);
+            this._updateContent(currentRi, augment);
 
             // 立即计算位置（DOM已更新，getBoundingClientRect 能获取准确值）
-            this._updatePosition(currentEvent);
+            this._updatePosition(at);
         });
     }
     
@@ -276,7 +309,7 @@ export class ToolTip {
      * 更新tooltip内容
      * 统一结构：语义区块（上） + 分隔线 + 信息密度区块（下，含汇总指标 + top-k 表格）
      */
-    private _updateContent(ri: GLTR_RenderItem): void {
+    private _updateContent(ri: GLTR_RenderItem, augment?: ToolTipUpdateAugment): void {
         const { selectedColor, detailColor, valueColor } = this.themeColors;
 
         // 更新当前token显示（第一行）
@@ -296,40 +329,47 @@ export class ToolTip {
                 (s.chunkIndex !== undefined && s.chunkMatchDegree !== undefined));
         const { hasRealTopk } = getFrontendTokenTopkState(tokenData);
 
-        // 1. 构建语义区块（pw score = raw_score_normed × P_pw × matchDegree，P_pw: x≤threshold 为 0，x>threshold 为 1；分块用 chunkMatchDegree，非分块用 full_match_degree）
-        const semanticRows: string[] = [];
+        // 1. 构建上区块：语义行 + rowsBeforeInfo（DAG 归因份额等附加行）
+        // 二者在视觉上同属"token 语义信息"，与下方信息密度区块以分隔线隔开
+        const topRows: string[] = [];
         if (hasSemantic && s) {
-            if (s.pwScore !== undefined) semanticRows.push(renderField({ label: tr('pw score:'), value: this.numF(s.pwScore) }, detailColor, valueColor));
-            if (s.signalProb !== undefined) semanticRows.push(renderField({ label: tr('signal probability:'), value: this.numF(s.signalProb) }, detailColor, valueColor));
-            if (s.rawScoreNormed !== undefined) semanticRows.push(renderField({ label: tr('raw score normed:'), value: this.numF(s.rawScoreNormed) }, detailColor, valueColor));
-            if (s.rawScore !== undefined) semanticRows.push(renderField({ label: tr('raw score:'), value: d3.format('.6f')(s.rawScore), valueColor: false }, detailColor, valueColor));
+            if (s.pwScore !== undefined) topRows.push(renderField({ label: tr('pw score:'), value: this.numF(s.pwScore) }, detailColor, valueColor));
+            if (s.signalProb !== undefined) topRows.push(renderField({ label: tr('signal probability:'), value: this.numF(s.signalProb) }, detailColor, valueColor));
+            if (s.rawScoreNormed !== undefined) topRows.push(renderField({ label: tr('raw score normed:'), value: this.numF(s.rawScoreNormed) }, detailColor, valueColor));
+            if (s.rawScore !== undefined) topRows.push(renderField({ label: tr('raw score:'), value: d3.format('.6f')(s.rawScore), valueColor: false }, detailColor, valueColor));
             if (s.chunkIndex !== undefined && s.chunkMatchDegree !== undefined) {
-                semanticRows.push(renderField({
+                topRows.push(renderField({
                     label: `chunk #${s.chunkIndex} match score:`,
                     value: (s.chunkMatchDegree * 100).toFixed(1) + '%'
                 }, detailColor, valueColor));
             }
         }
+        for (const f of augment?.rowsBeforeInfo ?? []) {
+            topRows.push(renderField(f, detailColor, valueColor));
+        }
 
-        // 2. 构建信息密度区块（汇总指标）
+        // 2. 构建信息密度区块：按明确顺序追加，避免脆弱的 unshift/splice
         const infoRows: string[] = [];
         if (hasRealTopk) {
             const prob = tokenData.real_topk![1];
             const surprisal = calculateSurprisal(prob);
             const isClassic = getTokenRenderStyle() === 'classic';
-            infoRows.push(renderField({ label: this.surprisalRowLabel, value: `${this.significantF(surprisal)} bits` }, detailColor, valueColor));
             if (!isClassic) {
                 const informationDensity = calculateSurprisalDensity(tokenData);
                 const utf8Size = new TextEncoder().encode(tokenData.raw).length;
-                infoRows.unshift(renderField({ label: tr('information density:'), value: `${this.significantF(informationDensity)} ${tr('bits/Byte')}` }, detailColor, valueColor));
-                infoRows.splice(1, 0, renderField({ label: tr('UTF-8 size:'), value: `${utf8Size} ${tr('bytes')}`, valueColor: false }, detailColor, valueColor));
+                infoRows.push(renderField({ label: tr('information density:'), value: `${this.significantF(informationDensity)} ${tr('bits/Byte')}` }, detailColor, valueColor));
+                infoRows.push(renderField({ label: tr('UTF-8 size:'), value: `${utf8Size} ${tr('bytes')}`, valueColor: false }, detailColor, valueColor));
             }
+            infoRows.push(renderField({ label: this.surprisalRowLabel, value: `${this.significantF(surprisal)} bits` }, detailColor, valueColor));
+        }
+        for (const f of augment?.rowsAfterSurprisal ?? []) {
+            infoRows.push(renderField(f, detailColor, valueColor));
         }
 
-        // 3. 合并 myDetail：语义 + 分隔线（仅当两区块都有时） + 信息
+        // 3. 合并 myDetail：上区块 + 分隔线（仅当两区块都有时） + 信息密度区块
         const detailParts: string[] = [];
-        if (semanticRows.length) detailParts.push(semanticRows.join('<br/>'));
-        if (semanticRows.length && infoRows.length) detailParts.push(`<span style="color:${detailColor}">${SEPARATOR}</span>`);
+        if (topRows.length) detailParts.push(topRows.join('<br/>'));
+        if (topRows.length && infoRows.length) detailParts.push(`<span style="color:${detailColor}">${SEPARATOR}</span>`);
         if (infoRows.length) detailParts.push(infoRows.join('<br/>'));
         this.myDetail.html(detailParts.join('<br/>'));
 
@@ -343,12 +383,17 @@ export class ToolTip {
     }
 
     /**
-     * 更新tooltip位置
+     * 更新tooltip位置（相对锚点元素几何，不依赖指针坐标）
      */
-    private _updatePosition(event?: MouseEvent): void {
+    private _updatePosition(anchorTarget: EventTarget | null): void {
         const tooltipNode = this.parent.node() as HTMLElement;
         if (!tooltipNode) return;
 
+        if (this.placement === 'parent-bottom-right') {
+            this._placeParentBottomRight(tooltipNode);
+            return;
+        }
+
         // 获取视口信息（用于边界检查）
         const viewport = this._getViewportInfo();
 
@@ -374,15 +419,10 @@ export class ToolTip {
             anchorRect = anchor.getBoundingClientRect();
         }
 
-        if (!event) {
-            throw new Error('[ToolTip] 更新位置需要 pointer 事件（缺少 MouseEvent）');
-        }
-        const mouseX = event.clientX;
-        const mouseY = event.clientY;
-        const tokenRectElement = this._findTokenRect(event.target, mouseX, mouseY);
+        const tokenRectElement = this._resolveAnchorRectElement(anchorTarget);
         if (!tokenRectElement) {
             throw new Error(
-                '[ToolTip] 无法从 event.target 解析到 token 的 SVG rect，请检查 GLTR 事件目标与 DOM 结构'
+                '[ToolTip] 无法从锚点解析到 SVG rect，请传入 token rect、g 或其它含 rect 的祖先元素'
             );
         }
 

client/src/ts/vis/constants.ts

@@ -13,7 +13,7 @@ export const HIGHLIGHT_CONSTANTS = {
     /** chunk 字符半开区间下划线（由 DOM Range 推算，不依赖 token rect） */
     INTERVAL_UNDERLINE_CLASS: 'chunk-interval-underline',
     /** 高亮边框颜色（CSS变量） */
-    HIGHLIGHT_COLOR: 'var(--bin-highlight-outline, #1e6fff)',
+    HIGHLIGHT_COLOR: 'var(--accent-color, #1e6fff)',
     /** 边框宽度 */
     BORDER_WIDTH: '1.5',
     /** 下划线宽度 */