DAG增加linear-arc布局模式；增加DAG用户自定义选项；UI改进

backend/access_log.py

@@ -61,9 +61,14 @@ def log_page_load(path: str):
     _log_request("📄 页面访问", f"path={combined!r}")
 
 
-def log_demo_file(path: str):
-    """记录demo文件请求"""
-    _log_request("🎯 demo文件", f"file='{path}'")
+def log_json_demo(path: str):
+    """记录从 client/dist 拉取的 .json（如打包的 gen_attribute demo）"""
+    _log_request("🎯 json demo", f"file='{path}'")
+
+
+def log_cached_demo(path: str):
+    """记录从数据目录 /demo/ 拉取的服务端 demo"""
+    _log_request("🎯 cached demo", f"file='{path}'")
 
 
 def log_analyze_request(text: str, stream_mode: bool = False, client_ip: str = None):

backend/api/static.py

@@ -6,7 +6,7 @@ from urllib.parse import unquote
 from flask import Response, redirect, abort, request
 from werkzeug.utils import safe_join
 
-from backend.access_log import log_page_load, log_demo_file
+from backend.access_log import log_cached_demo, log_json_demo, log_page_load
 
 
 def _read_static_file(directory: str, path: str) -> Response:
@@ -42,7 +42,7 @@ def register_static_routes(app):
         if path.endswith('.html'):
             log_page_load(path)
         if path.endswith('.json'):
-            log_demo_file(path)
+            log_json_demo(path)
         return _read_static_file('client/dist', path)
 
     @app.route('/demo/<path:path>')
@@ -50,7 +50,7 @@ def register_static_routes(app):
         """serves all demo files from the demo dir to ``/demo/<path:path>``"""
         from backend.app_context import get_data_dir
         data_dir = get_data_dir()
-        log_demo_file(path)
+        log_cached_demo(path)
         try:
             decoded_path = unquote(path)
             return _read_static_file(str(data_dir), decoded_path)

backend/visit_stats.py

@@ -15,6 +15,23 @@ _api = defaultdict(int)
 _ip_os: dict[str, str] = {}
 _VALID_CLIENT_OS = frozenset({"ios", "android", "windows", "macos", "linux", "unknown"})
 
+# 与 webpack 顶层 HTML（client_activity 上报的 pathname 末段 *.html）一致；无上报也打印秒数 0
+_SUMMARY_HTML_PAGES = (
+    "index.html",
+    "analysis.html",
+    "compare.html",
+    "chat.html",
+    "attribution.html",
+    "gen_attribute.html",
+)
+
+_SUMMARY_API_KINDS = (
+    "analyze",
+    "analyze_semantic",
+    "chat",
+    "prediction_attribute",
+)
+
 
 def _is_page_route_request() -> bool:
     """与 static 中首页重定向、HTML 页面下发一致，不把 /api、静态 js/css 等算进访问 IP。"""
@@ -54,13 +71,22 @@ def print_visit_summary():
     with _LOCK:
         h = (time.monotonic() - _t0) / 3600
         n_ip, n_act = len(_seen), len(_active)
-        pg = [f"  {k}: {v}" for k, v in sorted(_page_sec.items(), key=lambda kv: (-kv[1], kv[0]))]
         apis = dict(_api)
         os_cnt = defaultdict(int)
         for aip in _active:
             o = _ip_os.get(aip)
             if o:
                 os_cnt[o] += 1
+        known_pages = frozenset(_SUMMARY_HTML_PAGES)
+        merged_sec = {k: _page_sec.get(k, 0) for k in _SUMMARY_HTML_PAGES}
+        for pk, secs in _page_sec.items():
+            if pk not in known_pages:
+                merged_sec[pk] = secs
+        pg = [f"  {k}: {merged_sec[k]}" for k in _SUMMARY_HTML_PAGES]
+        pg.extend(
+            f"  {k}: {merged_sec[k]}"
+            for k in sorted(k for k in merged_sec if k not in known_pages)
+        )
     os_order = ("ios", "android", "windows", "macos", "linux", "unknown")
     os_pg = [f"  {k}: {os_cnt[k]}" for k in os_order if os_cnt[k]]
     now = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
@@ -68,8 +94,9 @@ def print_visit_summary():
     body = [f"========== [访问统计] {now} ==========",
             f"进程约 {h:.2f}h | 页面访问IP:{n_ip} | 真实活跃IP:{n_act}", "--- 活跃IP中OS统计 ---",
             *(os_pg or ["  （尚无）"]), "--- 页面活跃时间统计(秒) ---",
-            *(pg or ["  （尚无）"]), "--- API调用统计 ---",
-            *[f"  {k}: {apis.get(k, 0)}" for k in ("analyze", "analyze_semantic", "prediction_attribute", "chat")],
+            *pg,
+            "--- API调用统计 ---",
+            *[f"  {k}: {apis.get(k, 0)}" for k in _SUMMARY_API_KINDS],
             "=" * 42]
     print("\n".join(body), flush=True)
 

client/src/content/page-meta.json

@@ -4,6 +4,7 @@
     "home": {
       "title": "Info Lens",
       "subtitle": "A toolbox for exploring the informational nature of LLMs and language",
+      "heartline": "A ❤️ would mean a lot!",
       "formula": "LLM × Linguistics × Information Theory"
     },
     "analysis": {

client/src/css/_semantic-analysis.scss

@@ -16,6 +16,12 @@
     align-items: center;
     gap: 6px;
 
+    // `.semantic-submode-row .semantic-submode-group`（两档类）特异性高于 UA 里单独的 `[hidden]`，
+    // 会把本应隐藏的组仍排成 flex；配合 TS 的 element.hidden 需强制盖住自身 flex。
+    &[hidden] {
+      display: none !important;
+    }
+
     &.semantic-submode-group-right {
       margin-left: auto;
     }

client/src/css/gen_attribute.scss

@@ -77,9 +77,8 @@
   // 初始 d3.zoom 缩放为 1/本变量，抵消 display-scale 在屏上的整体缩小感（见 genAttributeDagView）
   // 边色：`--dag-normal-line-color`、`--dag-highlight-line-color-in` / `out` 与节点描边 `--token-hover-outline` 同在 start.scss（见 genAttributeDagView）。
   #results.gen-attr-results-surface.LMF .gen-attr-dag-stack {
-    // compactness：dag界面紧凑程度，范围 [0, 1]；1时和普通文本排版一致，最紧凑；0.5为默认。
-    --gen-attr-dag-compactness: 0.5;
-    --gen-attr-dag-display-scale: var(--gen-attr-dag-compactness);
+    // compactness：dag界面紧凑程度，范围 [0.05, 1]；1时和普通文本排版一致；由 JS 写入 inline style，0.5 为纯 CSS 降级兜底。
+    --gen-attr-dag-display-scale: var(--gen-attr-dag-compactness, 0.5);
     --gen-attr-dag-node-text-font-scale: 0.9;
     --gen-attr-dag-link-stroke-width: calc(2px * var(--gen-attr-dag-compactness));
     // --gen-attr-dag-prompt-node-fill: rgba(221, 179, 120, 0.29);
@@ -133,7 +132,7 @@
     stroke-width: calc(2 * var(--gen-attr-dag-display-scale, 1));
   }
 
-  // 与 genAttributeDagView 中「仅选中节点可拖」一致：可拖时提示 grab
+  // 与 genAttributeDagView 中「仅 default(text-flow) 且选中时可拖」一致：可拖时提示 grab
   #results.gen-attr-results-surface.LMF .gen-attr-dag-svg .gen-attr-dag-node--selected {
     cursor: grab;
     &:active {
@@ -141,6 +140,17 @@
     }
   }
 
+  // linear-arc 布局禁拖：不显示 grab（由 .gen-attr-dag-stack 上的 class 标记）
+  #results.gen-attr-results-surface.LMF
+    .gen-attr-dag-stack.gen-attr-dag-linear-arc-layout
+    .gen-attr-dag-svg
+    .gen-attr-dag-node--selected {
+    cursor: default;
+    &:active {
+      cursor: default;
+    }
+  }
+
   // 默认 width:100%（随容器）仅作回退；genAttributeDagView 会在 init 与 `setMeasureWidthPx`
   // 时以 inline style 写入固定像素宽度。测量层宽度是节点几何（折行位置）的唯一输入，
   // 固定后 resize/全屏等容器变化不再影响节点布局，只影响 fit 的视口缩放/平移。
@@ -270,9 +280,12 @@
   opacity: 1;
 }
 
-// Max tokens 输入框：紧凑数字输入
-.gen-attr-max-tokens-input {
-  width: 64px;
+// 紧凑数字输入（Max tokens、DAG Text width / compactness / 回放时长等共用）
+.gen-attr-max-tokens-input,
+.gen-attr-dag-measure-width-input {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
   padding: 3px 6px;
   font-size: inherit;
   border: 1px solid var(--input-border);
@@ -280,6 +293,9 @@
   background: var(--input-bg);
   color: var(--text-color);
   text-align: right;
+  // 沿用原先约 4.5–4.75rem 目标，但以 border-box 计满宽（先前 content-box + padding/border 会额外变宽）
+  inline-size: 4rem;
+  max-inline-size: 100%;
 }
 
 // 与 Chat 共用的 .generation-status-slot 见 _generation-status.scss
@@ -329,20 +345,14 @@
   }
 }
 
-// DAG 测量层宽度：与 .gen-attr-max-tokens-input 同形
+// DAG 参数行（Text width / compactness 等）；允许换行，避免单行被撑得过宽
 .gen-attr-dag-measure-width-row {
   margin-top: 8px;
+  flex-wrap: wrap;
 }
 
-.gen-attr-dag-measure-width-input {
-  width: 72px;
-  padding: 3px 6px;
-  font-size: inherit;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  background: var(--input-bg);
-  color: var(--text-color);
-  text-align: right;
+.gen-attr-dag-measure-width-row .gen-attr-dag-layout-mode-group {
+  margin-right: 12px;
 }
 
 .gen-attr-dag-replay-speed-row {
@@ -352,9 +362,12 @@
   gap: 6px 10px;
 }
 
-select.gen-attr-dag-replay-mode-select {
-  width: auto;
-  min-width: 7.5rem;
+// DAG 两行下拉：仅按英文选项收合宽度（不专门为译文留宽）。
+.semantic-submode-row select.gen-attr-dag-layout-mode-select,
+.semantic-submode-row select.gen-attr-dag-replay-mode-select {
+  width: fit-content;
+  min-width: unset;
+  max-width: none;
   text-align: left;
 }
 

client/src/css/home.scss

@@ -88,13 +88,24 @@ html[data-theme='dark'] body.nav-landing-page {
   line-height: var(--nav-landing-subtitle-line-height);
 }
 
+.nav-landing-heartline {
+  margin: 2rem 0 0.35rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  color: var(--text-color, #1a1a1a);
+  opacity: 0.88;
+  letter-spacing: 0.02em;
+}
+
 .nav-landing-hint {
-  margin: 2rem 0 0;
+  margin: 0;
   text-align: center;
   font-size: 0.8125rem;
+  font-style: italic;
   line-height: 1.45;
   color: var(--text-muted, #666);
-  opacity: 0.82;
+  opacity: 0.72;
   letter-spacing: 0.02em;
 }
 

client/src/gen_attribute.html

@@ -190,6 +190,16 @@
                             data-i18n="placeholder,title"></textarea>
                     </div>
 
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_hide_excluded_tokens"
+                                    title="When checked, tokens fully covered by an exclude pattern are hidden from the DAG (linear-arc: also excluded from layout)."
+                                    data-i18n="title">
+                                <span data-i18n>Hide excluded tokens</span>
+                            </label>
+                        </span>
+                    </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
                         <span class="semantic-submode-group">
                             <label class="semantic-submode-label">
@@ -202,6 +212,32 @@
                     </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>
+                            <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>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group gen-attr-dag-layout-mode-group">
+                            <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."
+                                data-i18n="title">
+                                <option value="text-flow">text-flow</option>
+                                <option value="linear-arc">linear-arc</option>
+                            </select>
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_compactness_group">
+                            <label class="semantic-submode-label" for="gen_attr_dag_compactness" data-i18n>Compactness</label>
+                            <input type="number" id="gen_attr_dag_compactness" class="gen-attr-dag-measure-width-input"
+                                value="0.5" min="0.05" max="1" step="0.05"
+                                title="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."
+                                data-i18n="title">
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_measure_width_group">
                             <label class="semantic-submode-label" for="gen_attr_dag_measure_width">Text width</label>
                             <input type="number" id="gen_attr_dag_measure_width" class="gen-attr-dag-measure-width-input"
                                 value="500" min="200" max="4000" step="10"
@@ -209,15 +245,24 @@
                                 data-i18n="title">
                             <span class="semantic-submode-label">px</span>
                         </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_linear_arc_interval_group" hidden>
+                            <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."
+                                data-i18n="title">
+                            <span class="semantic-submode-label">px</span>
+                        </span>
                     </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
                         <span class="semantic-submode-group gen-attr-dag-replay-speed-row">
                             <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="gen-attr-dag-replay-mode-select gen-attr-dag-measure-width-input"
+                            <select id="gen_attr_dag_replay_mode"
+                                class="semantic-submode-select gen-attr-dag-replay-mode-select"
                                 title="Total duration vs. fixed delay per step. Waits shrink if a step is slow; long idle realigns the beat."
                                 data-i18n="title">
-                                <option value="total" data-i18n>Total time</option>
-                                <option value="step" data-i18n>Step time</option>
+                                <option value="total" data-i18n>total time</option>
+                                <option value="step" data-i18n>step time</option>
                             </select>
                             <span id="gen_attr_dag_replay_total_wrap" class="gen-attr-dag-replay-value-wrap">
                                 <input type="number" id="gen_attr_dag_playback_total_s" class="gen-attr-dag-measure-width-input"

client/src/index.html

@@ -33,6 +33,7 @@
             <a class="nav-landing-card nav-landing-card--compact" href="attribution.html" target="_blank" rel="noopener" data-nav-page="attribution" data-i18n="title"></a>
             <a class="nav-landing-card nav-landing-card--compact" href="chat.html" target="_blank" rel="noopener" data-nav-page="chat" data-i18n="title"></a>
         </nav>
+        <p class="nav-landing-heartline" data-page-heartline data-i18n></p>
         <p class="nav-landing-hint" data-page-formula data-i18n></p>
     </main>
 

client/src/scripts/injectPageMetaIntoHtml.js

@@ -50,7 +50,7 @@ function injectDataPageBlock(html, attrToken, text) {
 /**
  * @param {string} html
  * @param {string} pageKey
- * @param {{ pages: Record<string, { title: string, subtitle: string, href?: string, formula?: string }>, navPageKeys: string[] }} doc
+ * @param {{ pages: Record<string, { title: string, subtitle: string, href?: string, heartline?: string, formula?: string }>, navPageKeys: string[] }} doc
  * @returns {string}
  */
 function injectPageMeta(html, pageKey, doc) {
@@ -65,6 +65,13 @@ function injectPageMeta(html, pageKey, doc) {
     html = injectDataPageBlock(html, 'data-page-title', meta.title);
     html = injectDataPageBlock(html, 'data-page-subtitle', meta.subtitle);
 
+    const heartlineElRe = /<([a-z][a-z0-9]*)([^>]*\bdata-page-heartline\b[^>]*)>([\s\S]*?)<\/\1>/gi;
+    if (meta.heartline) {
+        html = html.replace(heartlineElRe, (_m, tag, attrs) => `<${tag}${attrs}>${escapeHtmlText(meta.heartline)}</${tag}>`);
+    } else {
+        html = html.replace(heartlineElRe, '');
+    }
+
     const formulaElRe = /<([a-z][a-z0-9]*)([^>]*\bdata-page-formula\b[^>]*)>([\s\S]*?)<\/\1>/gi;
     if (meta.formula) {
         html = html.replace(formulaElRe, (_m, tag, attrs) => `<${tag}${attrs}>${escapeHtmlText(meta.formula)}</${tag}>`);

client/src/ts/attribution.ts

@@ -10,6 +10,7 @@ import { initI18n, tr, trf } from './lang/i18n-lite';
 import { AdminManager } from './utils/adminManager';
 import { SettingsMenuManager } from './utils/settingsMenuManager';
 import { initChatPanelLayout } from './chat/chatPanelLayout';
+import { PANEL_SPLIT_STORAGE_KEY_ATTRIBUTION } from './utils/panelSplitStorage';
 import { TextInputController } from './controllers/textInputController';
 import { initializeCommonApp } from './appInitializer';
 import { showAlertDialog } from './ui/dialog';
@@ -378,7 +379,7 @@ void runContentUrlHydrate({
     },
 });
 
-initChatPanelLayout();
+initChatPanelLayout({ storageKey: PANEL_SPLIT_STORAGE_KEY_ATTRIBUTION });
 
 const themeManager = initThemeManager(
     {

client/src/ts/attribution/genAttributeDagPreprocess.ts

@@ -19,9 +19,17 @@ export type PromptTokenSpan = {
 /** 每步在 exclude 之后按 `score` 降序取前 N 条作为候选池，避免长上下文长尾稀释。 */
 // 经验值，最后能筛选出大概一半的归因数
 const DAG_EDGE_TOP_N = 10;
-// todo: 用户配置归因力度
-/** 候选池内累计份额阈值（Top-P），用于保留主要解释力。 */
-const DAG_EDGE_CUMULATIVE_SHARE = 0.7;
+
+/** DAG 边 Top-P：候选池内累计份额默认上限（{@link phase2RankAndSparsify}）。 */
+export const DAG_EDGE_TOP_P_COVERAGE_DEFAULT = 0.7;
+const DAG_EDGE_TOP_P_COVERAGE_MIN = 0.05;
+const DAG_EDGE_TOP_P_COVERAGE_MAX = 1;
+
+export function clampDagEdgeTopPCoverage(n: number): number {
+    if (!Number.isFinite(n)) return DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
+    return Math.min(DAG_EDGE_TOP_P_COVERAGE_MAX, Math.max(DAG_EDGE_TOP_P_COVERAGE_MIN, n));
+}
+
 /** 候选池内相对最强条目的下限系数：池内 L1 份额小于该比例×首条份额时停止。 */
 // topShare 的线有最大的透明度，所以这里对应的是最小的透明度是最大透明度的比例
 const DAG_EDGE_RELATIVE_TOP_SHARE_FLOOR_BETA = 0.1;
@@ -57,11 +65,12 @@ function normalizeTopNPoolForDagSparse<T extends { score: number }>(tokens: T[])
 /**
  * 在候选池已按 `score` 降序、池内归一保持该顺序的前提下，按遍历顺序取前缀，直到：
  * - 池内 L1 份额小于 β×首条份额（分布形状截断），或
- * - 累计达到 {@link DAG_EDGE_CUMULATIVE_SHARE}（候选池内 Top-P，非整步全量 token 的分母）。
+ * - 累计达到给定阈值（默认 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}；候选池内 Top-P，非整步全量 token 的分母）。
  * （池内份额与 `score` 单调一致，无需再排序。）
  */
 function selectTokenAttributionByCumulativeShare<T extends { poolMassFrac: number }>(
     normalized: Array<T>,
+    cumulativeShareThreshold: number,
 ): Array<T> {
     if (normalized.length === 0) return [];
 
@@ -81,7 +90,7 @@ function selectTokenAttributionByCumulativeShare<T extends { poolMassFrac: numbe
         }
         picked.push(t);
         cum += frac;
-        if (cum >= DAG_EDGE_CUMULATIVE_SHARE) {
+        if (cum >= cumulativeShareThreshold) {
             break;
         }
     }
@@ -152,16 +161,17 @@ export function excludeNodeAggregatedEntries(
     });
 }
 
-/**
- * 预处理阶段 2（展示单元级，纯函数）：Top-N 候选池 → 池内 max 归一 & L1 份额 → β 截断 & cumulative Top-P。
- * 输入为「按节点聚合后的条目」（带 `nodeId`）；所有额外字段会透传到输出，
- * 输出 `score` 为池内 max 归一后的强度，`poolMassFrac` 为池内 L1 份额（供下游 `scoreShare`）。
- */
+/** Top-N 候选池 → 池内归一 → β 截断与累计 Top-P；`cumulativeShare` 未传用 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}。 */
 export function phase2RankAndSparsify<T extends { score: number }>(
     entries: T[],
+    options?: { cumulativeShare?: number },
 ): Array<T & { score: number; rawScore: number; poolMassFrac: number }> {
     if (!entries.length) return [];
     const topNPool = selectTopNByScore(entries, DAG_EDGE_TOP_N);
     const normalized = normalizeTopNPoolForDagSparse(topNPool);
-    return selectTokenAttributionByCumulativeShare(normalized);
+    const threshold =
+        options?.cumulativeShare !== undefined
+            ? clampDagEdgeTopPCoverage(options.cumulativeShare)
+            : DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
+    return selectTokenAttributionByCumulativeShare(normalized, threshold);
 }

client/src/ts/attribution/genAttributeDagTextMeasure.ts

@@ -2,6 +2,7 @@ import type { FrontendAnalyzeResult, FrontendToken } from '../api/GLTR_API';
 import { TokenPositionCalculator } from '../vis/TokenPositionCalculator';
 import { ZERO_WIDTH_FRAGMENT_PLACEHOLDER_PX } from '../vis/types';
 import type { TokenFragmentRect } from '../vis/types';
+import { visualizeSpecialChars } from '../utils/tokenDisplayUtils';
 import type { PromptTokenSpan } from './genAttributeDagPreprocess';
 
 export type GenAttrDagTokenGeom = {
@@ -25,6 +26,27 @@ function fragmentsForToken(
     return parts;
 }
 
+/**
+ * raw 中含有在 visualizeSpecialChars 里会展开成更长标签的特殊字符
+ * （控制字符 / 全角空格等），此时 displayLabel 比 raw 宽，需要最小宽保底。
+ */
+function hasExpandingSpecialChar(raw: string): boolean {
+    return /[\x00-\x1f\x7f\u0085\u2028\u2029\u3000]/.test(raw);
+}
+
+/**
+ * 估算 visualizeSpecialChars 后的标签宽度下限：
+ * 直接按「显示字符数 × 常数」估算，简单稳定。
+ */
+function estimateExpandedLabelWidthFloorPx(raw: string): number {
+    const APPROX_CHAR_WIDTH_PX = 10;
+    const displayLabel = visualizeSpecialChars(raw, {
+        spaceDotExceptBeforeAsciiLetterOrNumber: true,
+    });
+    const displayLen = Array.from(displayLabel).length;
+    return Math.max(displayLen * APPROX_CHAR_WIDTH_PX, 1);
+}
+
 /** 纯换行 token 的零宽/占位 fragment 本身就是它的几何语义。 */
 function isLineBreakOnlyToken(raw: string): boolean {
     return /^[\n\r\u0085\u2028\u2029]+$/.test(raw);
@@ -65,10 +87,11 @@ function geomFromTokenFragments(frags: TokenFragmentRect[], raw: string): GenAtt
     const geomFrags = fragmentsForDagGeom(frags, raw);
     const first = geomFrags[0]!;
     const hFirst = Math.max(first.height, 1);
-    const widthSum = Math.max(
-        geomFrags.reduce((s, f) => s + widthForDagGeom(f), 0),
-        1
-    );
+    const geomWidthSum = geomFrags.reduce((s, f) => s + widthForDagGeom(f), 0);
+    const expandedFloor = hasExpandingSpecialChar(raw)
+        ? estimateExpandedLabelWidthFloorPx(raw)
+        : 1;
+    const widthSum = Math.max(geomWidthSum, expandedFloor);
     return {
         originX: first.x,
         originY: first.y,

client/src/ts/attribution/genAttributeDagView.ts

@@ -3,7 +3,9 @@ import { DirectedGraph } from 'graphology';
 import type { D3Sel } from '../utils/Util';
 import { visualizeSpecialChars } from '../utils/tokenDisplayUtils';
 import {
+    clampDagEdgeTopPCoverage,
     collectGenAttrDagExcludeIntervals,
+    DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
     excludeNodeAggregatedEntries,
     phase2RankAndSparsify,
     type PromptTokenSpan,
@@ -23,11 +25,41 @@ import {
     detachDagPseudoFullscreenIfPresent,
     runDagFullscreenToggleWithPseudoWorkaround,
 } from './genAttributeDagFullscreenWorkaround';
+import {
+    clampLinearArcAdjacentGap,
+    LINEAR_ARC_ADJACENT_GAP_DEFAULT,
+    LINEAR_ARC_ADJACENT_GAP_MAX,
+    LINEAR_ARC_ADJACENT_GAP_MIN,
+    LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION,
+    paintLinearArcLayout,
+} from './genAttributeDagViewLinearArcMode';
+import { paintTextFlowLayout } from './genAttributeDagViewTextFlowMode';
 import { tr } from '../lang/i18n-lite';
 
 /** 再次挂载前执行上一轮 detach（当前为空操作，保留扩展点） */
 const detachGenAttributeDagPanel = new WeakMap<HTMLElement, () => void>();
 
+/** 节点布局模式：`text-flow` 按文字排版层几何；`linear-arc` 按节点插入序线性排布 + 弧线连边。 */
+export type DagLayoutMode = 'text-flow' | 'linear-arc';
+
+export const DAG_COMPACTNESS_DEFAULT = 0.5;
+/** 下限取小正数以满足 {@link readDisplayScaleFromCss}「必须为正」且不出现零宽度边线。 */
+export const DAG_COMPACTNESS_MIN = 0.05;
+export const DAG_COMPACTNESS_MAX = 1;
+
+export function clampDagCompactness(n: number): number {
+    if (!Number.isFinite(n)) return DAG_COMPACTNESS_DEFAULT;
+    return Math.min(DAG_COMPACTNESS_MAX, Math.max(DAG_COMPACTNESS_MIN, n));
+}
+
+export {
+    clampLinearArcAdjacentGap,
+    LINEAR_ARC_ADJACENT_GAP_DEFAULT,
+    LINEAR_ARC_ADJACENT_GAP_MAX,
+    LINEAR_ARC_ADJACENT_GAP_MIN,
+    LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION,
+};
+
 /** 图中节点业务字段（与 graphology 节点 attributes 为同一对象） */
 type DagNodeAttrs = {
     id: string;
@@ -127,6 +159,8 @@ function stackLayoutViewportPx(stackEl: HTMLElement): { w: number; h: number } {
 /** 在「抵消 display-scale」的基准上再放大，作为 DAG 默认初始视图（d3 zoom 的 k） */
 const DAG_INITIAL_ZOOM_BOOST = 1.5;
 
+/** 与 {@link gen_attribute.scss} `.gen-attr-dag-stack` 中 `--gen-attr-dag-compactness` 一致（display-scale/link 线粗等同源派生） */
+const CSS_VAR_DAG_COMPACTNESS = '--gen-attr-dag-compactness';
 /** 与 {@link gen_attribute.scss} `.gen-attr-dag-stack` 中 `--gen-attr-dag-display-scale` 一致 */
 const CSS_VAR_DISPLAY_SCALE = '--gen-attr-dag-display-scale';
 /** 与 {@link gen_attribute.scss} `.gen-attr-dag-stack` 中 `--gen-attr-dag-link-stroke-width` 一致 */
@@ -153,6 +187,13 @@ const DISABLE_DAG_NODE_TOOLTIPS = true;
  */
 const LINK_END_INSET_PER_EM = 0.1;
 
+/** 箭头 marker 的 viewBox 半高（viewBox = `0 -H W 2H`） */
+const MARKER_HALF_H = 5;
+/** 箭头 marker 的 viewBox 宽（同时是 path 尖端 x 坐标） */
+const MARKER_VW = 10;
+/** 箭头 marker 渲染尺寸（markerWidth = markerHeight，单位为 markerUnits=strokeWidth） */
+const MARKER_SIZE = 4;
+
 /** 每条边独立 marker 的 document id（节点 id 为 `start_end`，与另一节点组合唯一） */
 function dagLinkMarkerElementId(source: string, target: string): string {
     const s = source.replace(/[^0-9_]/g, '_');
@@ -219,7 +260,9 @@ export type GenAttributeDagHandle = {
      */
     reset(preserveUserViewport?: boolean): void;
     /**
-     * zoom identity 后对 `rootG` 做 `getBBox()` 适配视口；空图走默认缩放；`k` 上限 `k₀`。
+     * zoom identity 后按内容适配视口；空图走默认缩放；`k` 上限 `k₀`。
+     * - `text-flow`：`rootG.getBBox()`（含边）等比落入内框。
+     * - `linear-arc`：仅按 `gen-attr-dag-nodes` 行宽定比，token 行相对内框竖直居中（弧不参与）。
      * 若 `layoutDirty` 为真则 no-op（仅已执行的 `syncSvgSize` 生效，不改 pan/zoom），但 `force` 为真时仍
      * fit 并清 dirty（例如刷新按钮的强制适配）。
      */
@@ -235,6 +278,26 @@ export type GenAttributeDagHandle = {
      * 传 `null` 恢复样式表默认（`100%`，跟随容器）。
      */
     setMeasureWidthPx(widthPx: number | null): void;
+    /** 切换 DAG 节点布局模式并立即重排现有节点/边。 */
+    setLayoutMode(mode: DagLayoutMode): void;
+    /**
+     * linear-arc 下相邻节点矩形外侧边的水平间隙（px）。仅影响 linear-arc 几何；若在生成/播放中途调用且
+     * `skipRefit` 为真，仅写入值，下一轮 `syncGraphToSvg`/空闲后再反映（与测量宽度语义一致）。
+     */
+    setLinearArcAdjacentGapPx(px: number, opts?: { skipRefit?: boolean }): void;
+    /**
+     * 写入 `--gen-attr-dag-compactness`（与样式表中 display-scale / 边线粗等同源派生）。
+     * 已有节点的 `nodeW`/`nodeH` 仍为建点时的缩放结果；调用方在需要一致几何时应 `reset` 后重放。
+     */
+    setDagCompactness(c: number): void;
+    /** 更新边 Top-P 覆盖阈值；要重算当前 DAG 须 reset 后重放。 */
+    setEdgeTopPCoverage(coverage: number): void;
+    /**
+     * 切换 excluded 节点的隐藏模式：
+     * - `true`：完全隐藏（`display:none`）；linear-arc 下同时不参与布局。
+     * - `false`（默认）：保留为低透明度（{@link DAG_NODE_HIDDEN_OPACITY}）占位。
+     */
+    setHideExcludedTokens(hide: boolean): void;
     /** 移除 DAG 栈与刷新按钮（离开页面时调用） */
     detach(): void;
 };
@@ -371,8 +434,12 @@ export type InitGenAttributeDagViewOptions = {
     /** 点击 DAG 刷新时：在内部先按需 `fitViewportToContent`、再 `reset` 之后调用，用于重放（视口沿用 fit 结果）。 */
     onDagRefresh?: () => void;
     /**
-     * 写入 `.gen-attr-dag-stack` 的 `--gen-attr-dag-display-scale`（矩形与节点文字同时缩放）。
-     * 未设置时沿用样式表（`--gen-attr-dag-display-scale` 与 `--gen-attr-dag-compactness` 同源）。
+     * 写入 `.gen-attr-dag-stack` 的 `--gen-attr-dag-compactness`（矩形与节点文字、边线粗等同源缩放基准）。
+     * 未设置时沿用样式表默认值（见 {@link DAG_COMPACTNESS_DEFAULT}）。
+     */
+    dagCompactness?: number;
+    /**
+     * @deprecated 与 {@link dagCompactness} 同义；二者择一，若同时传入则抛错。
      */
     displayScale?: number;
     /**
@@ -381,6 +448,17 @@ export type InitGenAttributeDagViewOptions = {
      * 「resize 只 refit 旧几何、刷新才重测几何」的结构性不一致。未设置时沿用样式表 `100%`（跟随容器）。
      */
     measureWidthPx?: number;
+    /** DAG 节点布局模式；默认 `text-flow`。 */
+    layoutMode?: DagLayoutMode;
+    /**
+     * linear-arc：相邻节点矩形外侧边的水平间隙（px），决定水平方向疏密；
+     * 默认 {@link LINEAR_ARC_ADJACENT_GAP_DEFAULT}。
+     */
+    linearArcAdjacentGapPx?: number;
+    /** 被 exclude 规则命中的节点是否完全隐藏（true）还是仅降至 {@link DAG_NODE_HIDDEN_OPACITY}（false，默认）。 */
+    hideExcludedTokens?: boolean;
+    /** 边 Top-P 覆盖阈值（候选池内累计份额）；默认 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}。 */
+    edgeTopPCoverage?: number;
     /** 进入/退出/切换全屏失败时（常见于移动端不支持元素全屏等）。不传则无提示。 */
     onFullscreenError?: (message: string) => void;
 };
@@ -392,6 +470,19 @@ export function initGenAttributeDagView(
     const onDagRefresh = options?.onDagRefresh;
     const onDagPlaybackToggle = options?.onDagPlaybackToggle;
     const onFullscreenError = options?.onFullscreenError;
+    let layoutMode: DagLayoutMode = options?.layoutMode ?? 'text-flow';
+    let linearArcAdjacentGapPx = LINEAR_ARC_ADJACENT_GAP_DEFAULT;
+    if (options?.linearArcAdjacentGapPx !== undefined) {
+        const iv = options.linearArcAdjacentGapPx;
+        if (!Number.isFinite(iv)) {
+            throw new Error('genAttributeDagView: linearArcAdjacentGapPx must be finite');
+        }
+        linearArcAdjacentGapPx = clampLinearArcAdjacentGap(iv);
+    }
+    let hideExcludedTokens: boolean = options?.hideExcludedTokens ?? false;
+    let edgeTopPCoverage = clampDagEdgeTopPCoverage(
+        options?.edgeTopPCoverage ?? DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
+    );
 
     function reportFullscreenFailure(err: unknown): void {
         if (!onFullscreenError) return;
@@ -419,6 +510,11 @@ export function initGenAttributeDagView(
             clearNodeSelection: noop,
             setDagPlaybackPlaying: noop,
             setMeasureWidthPx: noop,
+            setLayoutMode: noop,
+            setLinearArcAdjacentGapPx: noop,
+            setDagCompactness: noop,
+            setEdgeTopPCoverage: noop,
+            setHideExcludedTokens: noop,
             detach: noop,
         };
     }
@@ -433,14 +529,22 @@ export function initGenAttributeDagView(
     const stack = resultsRoot.append('div').attr('class', 'gen-attr-dag-stack');
     const stackEl = stack.node() as HTMLElement;
 
-    if (options?.displayScale !== undefined) {
-        const s = options.displayScale;
-        if (!Number.isFinite(s) || s <= 0) {
-            throw new Error('genAttributeDagView: displayScale must be a finite positive number');
-        }
-        stackEl.style.setProperty(CSS_VAR_DISPLAY_SCALE, String(s));
+    /** linear-arc 下禁用节点拖拽；同时用该类覆盖「选中 grab」光标。 */
+    function syncStackLayoutDragUi(): void {
+        stackEl.classList.toggle('gen-attr-dag-linear-arc-layout', layoutMode === 'linear-arc');
+    }
+    syncStackLayoutDragUi();
+
+    if (options?.dagCompactness !== undefined && options?.displayScale !== undefined) {
+        throw new Error('genAttributeDagView: pass only one of dagCompactness or displayScale');
+    }
+    const compactnessInit = options?.dagCompactness ?? options?.displayScale;
+    if (compactnessInit !== undefined) {
+        const c = clampDagCompactness(compactnessInit);
+        stackEl.style.setProperty(CSS_VAR_DAG_COMPACTNESS, String(c));
     }
 
+
     const measureRoot = stack
         .append('div')
         .attr('class', 'gen-attr-dag-measure-layer')
@@ -464,11 +568,26 @@ export function initGenAttributeDagView(
     const textMeasure = createGenAttributeDagTextMeasure(measureRoot);
 
     /**
-     * 一次 session 内 `--gen-attr-dag-display-scale` 与测量层字号不会变（外部未提供运行时改写入口），
-     * 故 init 时读一次即可，热路径不再触发 `getComputedStyle`（否则 `paint`/每步 `update` 都会强制样式计算）。
+     * 与 `--gen-attr-dag-display-scale` 一致；`setDagCompactness` 会更新（并同步 `linkEndInsetPx`）。
+     * 热路径不读 `getComputedStyle`，仅在该 setter 与 init 时刷新。
      */
-    const displayScale = readDisplayScaleFromCss(stackEl);
-    const linkEndInsetPx = linkEndInsetBaseAtUnitScalePx(measureRoot) * displayScale;
+    let displayScale = readDisplayScaleFromCss(stackEl);
+    let linkEndInsetPx = linkEndInsetBaseAtUnitScalePx(measureRoot) * displayScale;
+
+    function refreshDagScaleDerivedFromCss(): void {
+        displayScale = readDisplayScaleFromCss(stackEl);
+        linkEndInsetPx = linkEndInsetBaseAtUnitScalePx(measureRoot) * displayScale;
+    }
+
+    function setDagCompactness(c: number): void {
+        const v = clampDagCompactness(c);
+        stackEl.style.setProperty(CSS_VAR_DAG_COMPACTNESS, String(v));
+        refreshDagScaleDerivedFromCss();
+    }
+
+    function setEdgeTopPCoverage(coverage: number): void {
+        edgeTopPCoverage = clampDagEdgeTopPCoverage(coverage);
+    }
 
     const svg = stack.append('svg').attr('class', 'gen-attr-dag-svg');
 
@@ -553,72 +672,45 @@ export function initGenAttributeDagView(
         svg.attr('width', w).attr('height', h);
     }
 
-    function nodeCenter(n: DagNode): { cx: number; cy: number } {
-        return { cx: n.x + n.nodeW / 2, cy: n.y + n.nodeH / 2 };
-    }
-
-    /** 轴对齐矩形（半宽 hw、半高 hh）中心沿单位向量 (ux,uy) 到边界的距离 */
-    function distCenterToRectEdgeAlongRay(hw: number, hh: number, ux: number, uy: number): number {
-        const ax = Math.abs(ux);
-        const ay = Math.abs(uy);
-        let t = Infinity;
-        if (ax > 1e-12) t = Math.min(t, hw / ax);
-        if (ay > 1e-12) t = Math.min(t, hh / ay);
-        return Number.isFinite(t) ? t : 0;
-    }
-
-    /**
-     * 沿两节点中心连线画边：端点从各中心沿该线走到矩形边界，再可选向外 `outsideInset`。
-     * 若边界交点越过彼此（重叠/极近），退化为两中心直连且不加外向留白。
-     */
-    function linkSegmentThroughNodeRects(
-        src: DagNode,
-        tgt: DagNode,
-        outsideInset: number
-    ): { x1: number; y1: number; x2: number; y2: number } {
-        const a = nodeCenter(src);
-        const b = nodeCenter(tgt);
-        const dx = b.cx - a.cx;
-        const dy = b.cy - a.cy;
-        const L = Math.hypot(dx, dy);
-        if (L < 1e-9) return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
-        const ux = dx / L;
-        const uy = dy / L;
-        const tA = distCenterToRectEdgeAlongRay(src.nodeW / 2, src.nodeH / 2, ux, uy);
-        const tB = distCenterToRectEdgeAlongRay(tgt.nodeW / 2, tgt.nodeH / 2, ux, uy);
-        const eps = 1e-6;
-        let g = outsideInset;
-        if (tA + tB + 2 * g >= L - eps) g = 0;
-        if (tA + tB + 2 * g >= L - eps) {
-            return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
-        }
-        return {
-            x1: a.cx + (tA + g) * ux,
-            y1: a.cy + (tA + g) * uy,
-            x2: b.cx - (tB + g) * ux,
-            y2: b.cy - (tB + g) * uy,
-        };
-    }
-
     function paint(): void {
-        linkSel.each(function(d) {
-            const src = endpointNode(d.source, graph);
-            const tgt = endpointNode(d.target, graph);
-            const seg = linkSegmentThroughNodeRects(src, tgt, linkEndInsetPx);
-            d3.select(this)
-                .selectAll('line')
-                .attr('x1', seg.x1)
-                .attr('y1', seg.y1)
-                .attr('x2', seg.x2)
-                .attr('y2', seg.y2);
+        if (layoutMode === 'linear-arc') {
+            const layoutNodes = hideExcludedTokens
+                ? nodes.filter((n) => !isOffsetSpanFullyExcluded(n.start, n.end, dagExcludeIntervals))
+                : nodes;
+            paintLinearArcLayout({
+                linkSel,
+                nodeSel,
+                nodes: layoutNodes,
+                adjacentGapPx: linearArcAdjacentGapPx,
+                getLinkNodes: (d) => ({
+                    src: endpointNode(d.source, graph),
+                    tgt: endpointNode(d.target, graph),
+                }),
+            });
+            return;
+        }
+        paintTextFlowLayout({
+            linkSel,
+            nodeSel,
+            linkEndInsetPx,
+            getLinkNodes: (d) => ({
+                src: endpointNode(d.source, graph),
+                tgt: endpointNode(d.target, graph),
+            }),
         });
-        nodeSel.attr('transform', (d) => `translate(${d.x},${d.y})`);
     }
 
     const drag = d3
         .drag<SVGGElement, DagNode>()
         // 与 d3 默认 filter 一致，并仅在「当前节点已单击选中」时允许拖动手势生效，减少误拖
-        .filter((event, d) => !event.ctrlKey && !event.button && selectedId === d.id)
+        // 仅 text-flow（UI 的 default）支持拖拽；linear-arc 下禁拖
+        .filter(
+            (event, d) =>
+                !event.ctrlKey &&
+                !event.button &&
+                selectedId === d.id &&
+                layoutMode === 'text-flow'
+        )
         .on('start', (event) => {
             event.sourceEvent?.stopPropagation();
         })
@@ -645,11 +737,15 @@ export function initGenAttributeDagView(
         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
+            )
             .attr('opacity', (d) => {
                 if (selectedNbhd?.has(d.id)) return 1;
                 if (hoveredNbhd?.has(d.id)) return 1;
                 if (isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)) {
-                    return DAG_NODE_HIDDEN_OPACITY;
+                    return hideExcludedTokens ? 0 : DAG_NODE_HIDDEN_OPACITY;
                 }
                 const isPromptLeaf = d.step === -1 && graph.outDegree(d.id) === 0;
                 if (focusId || isPromptLeaf) return DAG_NODE_WEAKEN_OPACITY;
@@ -662,7 +758,7 @@ export function initGenAttributeDagView(
             const stroke =
                 dagLinkHighlightStroke(graph, focusId, d) ?? `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`;
             const g = d3.select(this);
-            g.select('line.gen-attr-dag-link-visible').attr('stroke', stroke).attr('stroke-opacity', op);
+            g.select('path.gen-attr-dag-link-visible').attr('stroke', stroke).attr('stroke-opacity', op);
             linkMarkersDefs
                 .select<SVGPathElement>(`#${dagLinkMarkerElementId(d.source, d.target)} path`)
                 .attr('stroke', stroke)
@@ -704,18 +800,18 @@ export function initGenAttributeDagView(
                 const m = enter
                     .append('marker')
                     .attr('id', (d) => dagLinkMarkerElementId(d.source, d.target))
-                    .attr('viewBox', '0 -5 10 10')
-                    .attr('refX', 8)
+                    .attr('viewBox', `0 -${MARKER_HALF_H} ${MARKER_VW} ${MARKER_HALF_H * 2}`)
+                    .attr('refX', MARKER_VW * 0.8)
                     .attr('refY', 0)
-                    .attr('markerWidth', 4)
-                    .attr('markerHeight', 4)
+                    .attr('markerWidth', MARKER_SIZE)
+                    .attr('markerHeight', MARKER_SIZE)
                     .attr('orient', 'auto');
                 m.append('path')
-                    .attr('d', 'M0,-5 L10,0 L0,5')
+                    .attr('d', `M0,-${MARKER_HALF_H} L${MARKER_VW},0 L0,${MARKER_HALF_H}`)
                     .attr('fill', 'none')
                     .attr('stroke', `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`)
-                    .attr('stroke-width', `var(${CSS_VAR_DAG_LINK_STROKE_WIDTH})`)
-                    .attr('vector-effect', 'non-scaling-stroke')
+                    // markerUnits=strokeWidth 坐标系下，viewBox宽/marker尺寸 = 1× 线宽
+                    .attr('stroke-width', MARKER_VW / MARKER_SIZE)
                     .attr('stroke-linecap', 'round')
                     .attr('stroke-linejoin', 'round');
                 return m;
@@ -730,8 +826,9 @@ export function initGenAttributeDagView(
                     const el = d3.select(this);
                     const mkId = dagLinkMarkerElementId(d.source, d.target);
                     el.append('title').text(d.titleText);
-                    el.append('line')
+                    el.append('path')
                         .attr('class', 'gen-attr-dag-link-visible')
+                        .attr('fill', 'none')
                         .attr('stroke', `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`)
                         .attr('stroke-width', `var(${CSS_VAR_DAG_LINK_STROKE_WIDTH})`)
                         .attr('pointer-events', 'stroke')
@@ -914,7 +1011,7 @@ export function initGenAttributeDagView(
             targetToken: token,
         });
         const afterExclude = excludeNodeAggregatedEntries(step, aggregated, excludeIntervalContext);
-        const selected = phase2RankAndSparsify(afterExclude);
+        const selected = phase2RankAndSparsify(afterExclude, { cumulativeShare: edgeTopPCoverage });
 
         const massSum = selected.reduce((acc, t) => acc + Math.max(0, t.poolMassFrac), 0);
         for (const item of selected) {
@@ -998,18 +1095,34 @@ export function initGenAttributeDagView(
             applyInitialDagZoom();
         } else {
             svg.call(zoomBehavior.transform, d3.zoomIdentity);
-            const b = rootG.node()!.getBBox();
-            const bw = Math.max(b.width, 1e-6);
-            const bh = Math.max(b.height, 1e-6);
             const pad = 12;
             const { w, h } = stackLayoutViewportPx(stackEl);
             const innerW = Math.max(w - 2 * pad, 1);
             const innerH = Math.max(h - 2 * pad, 1);
-            const kRaw = Math.min(innerW / bw, innerH / 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;
-            svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
+            if (layoutMode === 'linear-arc') {
+                /** 仅用 token 行宽度定比；竖直按行中心居中（弧不参与 bbox → 不致上下抖） */
+                const bn = nodeG.node()!.getBBox();
+                const bw = Math.max(bn.width, 1e-6);
+                const kRaw = innerW / bw;
+                const k = Math.min(Number.isFinite(kRaw) && kRaw > 0 ? kRaw : k0, k0);
+                const tx = pad * 2 - k * bn.x;
+                const rowMidY = bn.y + bn.height / 2;
+                const ty = pad + innerH / 2 - k * rowMidY;
+                svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
+            } else if (layoutMode === 'text-flow') {
+                /** 与原实现一致：`rootG` 整包 bbox + 宽高双约束顶对齐 */
+                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 k = Math.min(Number.isFinite(kRaw) && kRaw > 0 ? kRaw : k0, k0);
+                const tx = pad * 2 - k * b.x;
+                const ty = pad - k * b.y;
+                svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
+            } else {
+                const _: never = layoutMode;
+                throw new Error(`genAttributeDagView: unsupported layoutMode for fit (${String(_)})`);
+            }
         }
         // 任何成功 fit（含 RO 自动 fit、refresh）都回到默认视图语义，下个 dirty 周期重新起算。
         layoutDirty = false;
@@ -1052,6 +1165,37 @@ export function initGenAttributeDagView(
         playBtn.text(playing ? '⏸' : '▶').attr('title', playing ? 'Pause' : 'Play');
     }
 
+    function setLayoutMode(mode: DagLayoutMode): void {
+        if (layoutMode === mode) return;
+        layoutMode = mode;
+        syncStackLayoutDragUi();
+        if (batchDepth > 0) return;
+        syncGraphToSvg();
+        fitViewportToContent(true);
+    }
+
+    function setLinearArcAdjacentGapPx(px: number, opts?: { skipRefit?: boolean }): void {
+        if (!Number.isFinite(px)) {
+            throw new Error('genAttributeDagView: linear arc adjacent node gap must be finite');
+        }
+        const next = clampLinearArcAdjacentGap(px);
+        if (linearArcAdjacentGapPx === next) return;
+        linearArcAdjacentGapPx = next;
+        if (opts?.skipRefit || batchDepth > 0) return;
+        if (layoutMode !== 'linear-arc' || nodes.length === 0) return;
+        paint();
+        fitViewportToContent(true);
+    }
+
+    function setHideExcludedTokens(hide: boolean): void {
+        if (hideExcludedTokens === hide) return;
+        hideExcludedTokens = hide;
+        if (batchDepth > 0 || nodes.length === 0) return;
+        paint();
+        refreshNodeLinkHighlight();
+        fitViewportToContent(true);
+    }
+
     const fullscreenBtn = resultsRoot
         .append('button')
         .attr('type', 'button')
@@ -1142,6 +1286,11 @@ export function initGenAttributeDagView(
         clearNodeSelection,
         setDagPlaybackPlaying,
         setMeasureWidthPx,
+        setLayoutMode,
+        setLinearArcAdjacentGapPx,
+        setDagCompactness,
+        setEdgeTopPCoverage,
+        setHideExcludedTokens,
         detach,
     };
 }

client/src/ts/attribution/genAttributeDagViewLinearArcMode.ts

@@ -0,0 +1,103 @@
+import * as d3 from 'd3';
+
+/** linear-arc：相邻节点矩形水平方向「外侧边与边之间的空隙」（px，SVG 内部坐标） */
+export const LINEAR_ARC_ADJACENT_GAP_DEFAULT = 0;
+export const LINEAR_ARC_ADJACENT_GAP_MIN = 0;
+export const LINEAR_ARC_ADJACENT_GAP_MAX = 400;
+
+/** prompt→生成 首邻：在 `adjacentGapPx` 之上多出的水平空隙（节点已有 `step`，仅此一处判断） */
+const LINEAR_ARC_PROMPT_GEN_EXTRA_GAP_PX = 12;
+
+/**
+ * 连边的三次贝塞尔：P1/P2 沿水平边方向向对端内收，相对半跨距的比例，[0,1]。
+ * 0 表示控制点与端点同竖线（切线竖直向上）；1 表示收到跨度中点（最圆）。
+ */
+export const LINEAR_ARC_BEZIER_HANDLE_INSET_FRACTION = 0.25;
+
+/** 首节点中心 x（与 translate(cx - w/2) 一致） */
+const LINEAR_ARC_FIRST_CENTER_X = 20;
+const LINEAR_ARC_BASELINE_Y = 0;
+
+export function clampLinearArcAdjacentGap(px: number): number {
+    return Math.max(
+        LINEAR_ARC_ADJACENT_GAP_MIN,
+        Math.min(LINEAR_ARC_ADJACENT_GAP_MAX, Math.round(px))
+    );
+}
+
+type LinearArcNodeLike = { nodeW: number };
+
+/** `step === -1` 表示 prompt（与 `genAttributeDagView` 中 `DagNode.step` 约定一致） */
+type LinearArcSteppedNode = LinearArcNodeLike & { step: number };
+
+function computeNodeCenterXs(nodes: LinearArcSteppedNode[], adjacentGapPx: number): number[] {
+    const xs: number[] = [];
+    if (nodes.length === 0) return xs;
+    xs.push(LINEAR_ARC_FIRST_CENTER_X);
+    for (let i = 1; i < nodes.length; i++) {
+        const prev = nodes[i - 1]!;
+        const curr = nodes[i]!;
+        const gap =
+            adjacentGapPx +
+            (prev.step === -1 && curr.step !== -1 ? LINEAR_ARC_PROMPT_GEN_EXTRA_GAP_PX : 0);
+        xs.push(xs[i - 1]! + prev.nodeW / 2 + gap + curr.nodeW / 2);
+    }
+    return xs;
+}
+
+/** linear-arc 模式：节点线性排布，边使用顶部向上弧线。
+ *
+ * `nodes` 为参与布局的可见节点子集（可能少于 `nodeSel` 绑定的全量节点）；
+ * 不在 `nodes` 中的节点（如被隐藏的 excluded 节点）transform 保持不变——调用方已将它们设为 `display:none`。
+ */
+export function paintLinearArcLayout<
+    LinkDatum,
+    NodeDatum extends LinearArcSteppedNode,
+>(params: {
+    linkSel: d3.Selection<SVGGElement, LinkDatum, SVGGElement, unknown>;
+    nodeSel: d3.Selection<SVGGElement, NodeDatum, SVGGElement, unknown>;
+    nodes: NodeDatum[];
+    adjacentGapPx: number;
+    getLinkNodes: (link: LinkDatum) => { src: NodeDatum; tgt: NodeDatum };
+}): void {
+    const { linkSel, nodeSel, nodes, adjacentGapPx, getLinkNodes } = params;
+
+    const centerXs = computeNodeCenterXs(nodes, adjacentGapPx);
+
+    // Map datum → centerX：支持 nodeSel 含超出 nodes 范围的节点（如被隐藏的节点）。
+    const centerXByNode = new Map<NodeDatum, number>();
+    for (let i = 0; i < nodes.length; i++) {
+        centerXByNode.set(nodes[i]!, centerXs[i]!);
+    }
+
+    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');
+        }
+        const y = LINEAR_ARC_BASELINE_Y;
+        const dx = Math.abs(tgtCx - srcCx);
+        const arcH = dx * 0.4;
+        const upY = y - 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}`;
+    };
+
+    linkSel.each(function(d) {
+        const { src, tgt } = getLinkNodes(d);
+        d3.select(this)
+            .selectAll('path.gen-attr-dag-link-visible')
+            .attr('d', arcPathBetweenNodes(src, tgt));
+    });
+
+    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})`;
+    });
+}

client/src/ts/attribution/genAttributeDagViewTextFlowMode.ts

@@ -0,0 +1,70 @@
+import * as d3 from 'd3';
+
+type TextFlowNodeLike = {
+    x: number;
+    y: number;
+    nodeW: number;
+    nodeH: number;
+};
+
+function nodeCenter(n: TextFlowNodeLike): { cx: number; cy: number } {
+    return { cx: n.x + n.nodeW / 2, cy: n.y + n.nodeH / 2 };
+}
+
+/** 轴对齐矩形（半宽 hw、半高 hh）中心沿单位向量 (ux,uy) 到边界的距离。 */
+function distCenterToRectEdgeAlongRay(hw: number, hh: number, ux: number, uy: number): number {
+    const ax = Math.abs(ux);
+    const ay = Math.abs(uy);
+    let t = Infinity;
+    if (ax > 1e-12) t = Math.min(t, hw / ax);
+    if (ay > 1e-12) t = Math.min(t, hh / ay);
+    return Number.isFinite(t) ? t : 0;
+}
+
+/** text-flow 模式边几何：从两节点矩形边界连线，必要时退化为中心直连。 */
+function linkSegmentThroughNodeRects(
+    src: TextFlowNodeLike,
+    tgt: TextFlowNodeLike,
+    outsideInset: number
+): { x1: number; y1: number; x2: number; y2: number } {
+    const a = nodeCenter(src);
+    const b = nodeCenter(tgt);
+    const dx = b.cx - a.cx;
+    const dy = b.cy - a.cy;
+    const L = Math.hypot(dx, dy);
+    if (L < 1e-9) return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
+    const ux = dx / L;
+    const uy = dy / L;
+    const tA = distCenterToRectEdgeAlongRay(src.nodeW / 2, src.nodeH / 2, ux, uy);
+    const tB = distCenterToRectEdgeAlongRay(tgt.nodeW / 2, tgt.nodeH / 2, ux, uy);
+    const eps = 1e-6;
+    let g = outsideInset;
+    if (tA + tB + 2 * g >= L - eps) g = 0;
+    if (tA + tB + 2 * g >= L - eps) {
+        return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
+    }
+    return {
+        x1: a.cx + (tA + g) * ux,
+        y1: a.cy + (tA + g) * uy,
+        x2: b.cx - (tB + g) * ux,
+        y2: b.cy - (tB + g) * uy,
+    };
+}
+
+/** text-flow 模式：节点使用测量层坐标，边按节点矩形几何连接。 */
+export function paintTextFlowLayout<LinkDatum, NodeDatum extends TextFlowNodeLike>(params: {
+    linkSel: d3.Selection<SVGGElement, LinkDatum, SVGGElement, unknown>;
+    nodeSel: d3.Selection<SVGGElement, NodeDatum, SVGGElement, unknown>;
+    linkEndInsetPx: number;
+    getLinkNodes: (link: LinkDatum) => { src: NodeDatum; tgt: NodeDatum };
+}): void {
+    const { linkSel, nodeSel, linkEndInsetPx, getLinkNodes } = params;
+    linkSel.each(function(d) {
+        const { src, tgt } = getLinkNodes(d);
+        const seg = linkSegmentThroughNodeRects(src, tgt, linkEndInsetPx);
+        d3.select(this)
+            .selectAll('path.gen-attr-dag-link-visible')
+            .attr('d', `M ${seg.x1} ${seg.y1} L ${seg.x2} ${seg.y2}`);
+    });
+    nodeSel.attr('transform', (d) => `translate(${d.x},${d.y})`);
+}

client/src/ts/chat.ts

@@ -10,6 +10,7 @@ import { AdminManager } from './utils/adminManager';
 import { SettingsMenuManager } from './utils/settingsMenuManager';
 import { initCachedHistoryQueryDropdown, type CachedHistorySelectContext } from './utils/cachedHistoryUi';
 import { initChatPanelLayout } from './chat/chatPanelLayout';
+import { PANEL_SPLIT_STORAGE_KEY_CHAT } from './utils/panelSplitStorage';
 import { TextInputController } from './controllers/textInputController';
 import { initializeCommonApp } from './appInitializer';
 import { showAlertDialog } from './ui/dialog';
@@ -684,7 +685,7 @@ initQueryHistoryDropdown({
     applyHistoryOnHover: true
 });
 
-initChatPanelLayout();
+initChatPanelLayout({ storageKey: PANEL_SPLIT_STORAGE_KEY_CHAT });
 
 const chatCopyFulltextBtn = document.getElementById('chat_copy_fulltext_btn');
 if (chatCopyFulltextBtn) {

client/src/ts/chat/chatPanelLayout.ts

@@ -1,17 +1,24 @@
 import * as d3 from 'd3';
 import { isNarrowScreen } from '../utils/responsive';
+import { readPanelSplitRatio, writePanelSplitRatio } from '../utils/panelSplitStorage';
+
+export type ChatPanelLayoutOptions = {
+    /** 各页面独立 key，用于 localStorage 持久化分栏比例 */
+    storageKey: string;
+};
 
 /**
- * Chat 页专用：左右分栏拖拽与窗口尺寸同步，不含侧栏逻辑，不影响首页 LayoutController。
+ * Chat / 归因 / gen_attribute 等：左右分栏拖拽与窗口尺寸同步，不含侧栏逻辑。
  */
-export function initChatPanelLayout(): void {
+export function initChatPanelLayout(options: ChatPanelLayoutOptions): void {
     const resizer = d3.select('#resizer');
     const leftPanel = d3.select('.left_panel');
     if (resizer.empty() || leftPanel.empty()) {
         return;
     }
 
-    let leftPanelRatio = 0.5;
+    const { storageKey } = options;
+    let leftPanelRatio = readPanelSplitRatio(storageKey);
     let isResizing = false;
     let startX = 0;
     let startWidth = 0;
@@ -86,6 +93,8 @@ export function initChatPanelLayout(): void {
         }
         isResizing = false;
 
+        writePanelSplitRatio(storageKey, leftPanelRatio);
+
         d3.select('body').style('cursor', null).style('user-select', null);
 
         d3.select(window)

client/src/ts/controllers/layoutController.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { isNarrowScreen } from '../utils/responsive';
+import { readPanelSplitRatio, writePanelSplitRatio } from '../utils/panelSplitStorage';
 
 export type LayoutState = {
     sidebar: {
@@ -14,6 +15,8 @@ export type LayoutControllerOptions = {
     sidebarBtn: d3.Selection<any, unknown, any, any>;
     onSidebarToggle?: (visible: boolean) => void;
     onLayoutChange?: () => void;
+    /** 若设置，则从 localStorage 恢复分栏比例，并在用户拖动分割条结束后写回 */
+    panelSplitStorageKey?: string;
 };
 
 export class LayoutController {
@@ -21,10 +24,14 @@ export class LayoutController {
     private isResizing = false;
     private startX = 0;
     private startWidth = 0;
-    private leftPanelRatio = 0.5; // 左侧面板的比例，默认50%
+    private leftPanelRatio = 0.5;
 
     constructor(options: LayoutControllerOptions) {
         this.options = options;
+        const sk = options.panelSplitStorageKey;
+        if (sk) {
+            this.leftPanelRatio = readPanelSplitRatio(sk);
+        }
         this.initialize();
     }
 
@@ -169,9 +176,14 @@ export class LayoutController {
 
     private handleMouseUp(): void {
         if (!this.isResizing) return;
-        
+
         this.isResizing = false;
-        
+
+        const sk = this.options.panelSplitStorageKey;
+        if (sk) {
+            writePanelSplitRatio(sk, this.leftPanelRatio);
+        }
+
         d3.select('body')
             .style('cursor', 'default')
             .style('user-select', 'auto');

client/src/ts/gen_attribute.ts

@@ -10,14 +10,26 @@ import { initI18n, tr } from './lang/i18n-lite';
 import { AdminManager } from './utils/adminManager';
 import { SettingsMenuManager } from './utils/settingsMenuManager';
 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 { showAlertDialog } from './ui/dialog';
 import URLHandler from './utils/URLHandler';
 import { createToast } from './ui/toast';
 import type { PredictionAttributeModelVariant } from './attribution/attributionResultCache';
-import { extractPromptTokenSpans } from './attribution/genAttributeDagPreprocess';
-import { initGenAttributeDagView } from './attribution/genAttributeDagView';
+import {
+    clampDagEdgeTopPCoverage,
+    DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
+    extractPromptTokenSpans,
+} from './attribution/genAttributeDagPreprocess';
+import {
+    initGenAttributeDagView,
+    type DagLayoutMode,
+    clampDagCompactness,
+    clampLinearArcAdjacentGap,
+    DAG_COMPACTNESS_DEFAULT,
+    LINEAR_ARC_ADJACENT_GAP_DEFAULT,
+} from './attribution/genAttributeDagView';
 import {
     createHydratedTokenGenHandle,
     startTokenGenAttribution,
@@ -77,10 +89,16 @@ const GEN_ATTR_MODEL_VARIANT_STORAGE_KEY = 'info_radar_gen_attr_model_variant';
 const GEN_ATTR_MAX_TOKENS_STORAGE_KEY = 'info_radar_gen_attr_max_tokens';
 const GEN_ATTR_MAX_TOKENS_DEFAULT = 100;
 const GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY = 'info_radar_gen_attr_dag_measure_width';
+const GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY = 'info_radar_gen_attr_dag_layout_mode';
 const GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY = 'info_radar_gen_attr_dag_playback_step_ms';
 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_HIDE_INACTIVE_EDGES_STORAGE_KEY = 'info_radar_gen_attr_dag_hide_inactive_edges';
+const GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY = 'info_radar_gen_attr_dag_hide_excluded_tokens';
+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';
+const GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY = 'info_radar_gen_attr_dag_edge_top_p_coverage';
 
 /** 步进回放节奏：`total`＝整段剩余回放总时长内均分间隔；`step`＝固定每步间隔（ms）。 */
 type DagReplayPacingMode = 'total' | 'step';
@@ -139,6 +157,39 @@ function readStoredDagMeasureWidth(): number {
     return GEN_ATTR_DAG_MEASURE_WIDTH_DEFAULT;
 }
 
+function readStoredDagCompactness(): number {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY);
+        const n = v !== null ? parseFloat(v) : NaN;
+        if (Number.isFinite(n)) return clampDagCompactness(n);
+    } catch {
+        // ignore
+    }
+    return DAG_COMPACTNESS_DEFAULT;
+}
+
+function readStoredDagEdgeTopPCoverage(): number {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY);
+        const n = v !== null ? parseFloat(v) : NaN;
+        if (Number.isFinite(n)) return clampDagEdgeTopPCoverage(n);
+    } catch {
+        // ignore
+    }
+    return DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
+}
+
+function readStoredDagLinearArcAdjacentGap(): number {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY);
+        const n = v !== null ? parseInt(v, 10) : NaN;
+        if (Number.isFinite(n)) return clampLinearArcAdjacentGap(n);
+    } catch {
+        // ignore
+    }
+    return LINEAR_ARC_ADJACENT_GAP_DEFAULT;
+}
+
 function clampDagPlaybackStepMs(n: number): number {
     return Math.max(
         GEN_ATTR_DAG_PLAYBACK_STEP_MS_MIN,
@@ -185,6 +236,16 @@ function readStoredDagReplayPacingMode(): DagReplayPacingMode {
     return 'total';
 }
 
+function readStoredDagLayoutMode(): DagLayoutMode {
+    try {
+        const v = localStorage.getItem(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY);
+        if (v === 'text-flow' || v === 'linear-arc') return v;
+    } catch {
+        // ignore
+    }
+    return 'text-flow';
+}
+
 const apiPrefix = URLHandler.parameters['api'] || '';
 const bodyElement = d3.select('body').node() as Element;
 const { totalSurprisalFormat, api } = initializeCommonApp(apiPrefix, bodyElement);
@@ -237,9 +298,22 @@ const genAttrResultsEl = d3.select('#results.gen-attr-results-surface');
 
 const modelVariantSelect = document.getElementById('gen_attr_model_variant') as HTMLSelectElement | null;
 const maxTokensInput = document.getElementById('gen_attr_max_tokens') as HTMLInputElement | null;
+const dagLayoutModeSelect = document.getElementById('gen_attr_dag_layout_mode') as HTMLSelectElement | null;
+const dagMeasureWidthGroup = document.getElementById('gen_attr_dag_measure_width_group');
+const dagCompactnessGroup = document.getElementById('gen_attr_dag_compactness_group');
 const dagMeasureWidthInput = document.getElementById(
     'gen_attr_dag_measure_width'
 ) as HTMLInputElement | null;
+const dagLinearArcIntervalGroup = document.getElementById('gen_attr_dag_linear_arc_interval_group');
+const dagLinearArcIntervalInput = document.getElementById(
+    'gen_attr_dag_linear_arc_interval'
+) as HTMLInputElement | null;
+const dagCompactnessInput = document.getElementById(
+    'gen_attr_dag_compactness'
+) as HTMLInputElement | null;
+const dagEdgeTopPCoverageInput = document.getElementById(
+    'gen_attr_dag_edge_top_p_coverage'
+) as HTMLInputElement | null;
 /** 步进回放：固定间隔（ms）或总时长（s），由 {@link DagReplayPacingMode} 选择。 */
 const dagPlaybackStepMsInput = document.getElementById(
     'gen_attr_dag_playback_step_ms'
@@ -265,6 +339,26 @@ function applyDagReplaySpeedUi(): void {
     if (dagReplayStepWrap) dagReplayStepWrap.hidden = mode !== 'step';
 }
 
+function currentDagLayoutMode(): DagLayoutMode {
+    return dagLayoutModeSelect?.value === 'linear-arc' ? 'linear-arc' : 'text-flow';
+}
+
+function applyDagLayoutModeUi(): void {
+    const textFlow = currentDagLayoutMode() === 'text-flow';
+    if (dagCompactnessGroup) {
+        dagCompactnessGroup.hidden = !textFlow;
+    }
+    if (dagMeasureWidthGroup) {
+        dagMeasureWidthGroup.hidden = !textFlow;
+    }
+    if (dagLinearArcIntervalGroup) {
+        dagLinearArcIntervalGroup.hidden = textFlow;
+    }
+}
+
+const dagHideExcludedTokensInput = document.getElementById(
+    'gen_attr_dag_hide_excluded_tokens'
+) as HTMLInputElement | null;
 const dagHideInactiveEdgesInput = document.getElementById(
     'gen_attr_dag_hide_inactive_edges'
 ) as HTMLInputElement | null;
@@ -272,8 +366,17 @@ const completeReasonEl = d3.select('#gen_attr_complete_reason');
 
 if (modelVariantSelect) modelVariantSelect.value = readStoredModelVariant();
 if (maxTokensInput) maxTokensInput.value = String(readStoredMaxTokens());
+const initialDagLayoutMode = readStoredDagLayoutMode();
+if (dagLayoutModeSelect) dagLayoutModeSelect.value = initialDagLayoutMode;
+applyDagLayoutModeUi();
 const initialDagMeasureWidth = readStoredDagMeasureWidth();
 if (dagMeasureWidthInput) dagMeasureWidthInput.value = String(initialDagMeasureWidth);
+const initialDagCompactness = readStoredDagCompactness();
+if (dagCompactnessInput) dagCompactnessInput.value = String(initialDagCompactness);
+const initialDagEdgeTopPCoverage = readStoredDagEdgeTopPCoverage();
+if (dagEdgeTopPCoverageInput) dagEdgeTopPCoverageInput.value = String(initialDagEdgeTopPCoverage);
+const initialDagLinearArcGap = readStoredDagLinearArcAdjacentGap();
+if (dagLinearArcIntervalInput) dagLinearArcIntervalInput.value = String(initialDagLinearArcGap);
 
 // DAG 回放节奏：步长 / 总时长 / 模式下拉 — 自 localStorage 恢复后再同步展示哪块输入
 const initialDagPlaybackStepMs = readStoredDagPlaybackStepMs();
@@ -309,6 +412,25 @@ dagHideInactiveEdgesInput?.addEventListener('change', () => {
     applyDagHideInactiveEdges(hide);
 });
 
+function readStoredDagHideExcludedTokens(): boolean {
+    try {
+        return localStorage.getItem(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY) === '1';
+    } catch {
+        return false;
+    }
+}
+const initialDagHideExcludedTokens = readStoredDagHideExcludedTokens();
+if (dagHideExcludedTokensInput) dagHideExcludedTokensInput.checked = initialDagHideExcludedTokens;
+dagHideExcludedTokensInput?.addEventListener('change', () => {
+    const hide = dagHideExcludedTokensInput.checked;
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY, hide ? '1' : '0');
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setHideExcludedTokens(hide);
+});
+
 modelVariantSelect?.addEventListener('change', () => {
     try {
         localStorage.setItem(GEN_ATTR_MODEL_VARIANT_STORAGE_KEY, currentModelVariant());
@@ -635,10 +757,26 @@ const dagHandle = initGenAttributeDagView(d3.select('#results'), {
         if (!h) return;
         replayRunnerStepsIntoDag(h);
     },
+    layoutMode: initialDagLayoutMode,
     measureWidthPx: initialDagMeasureWidth,
+    dagCompactness: initialDagCompactness,
+    linearArcAdjacentGapPx: initialDagLinearArcGap,
+    hideExcludedTokens: initialDagHideExcludedTokens,
+    edgeTopPCoverage: initialDagEdgeTopPCoverage,
     onFullscreenError: (message) => showToast(message, 'error'),
 });
 
+dagLayoutModeSelect?.addEventListener('change', () => {
+    const mode = currentDagLayoutMode();
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY, mode);
+    } catch {
+        /* ignore */
+    }
+    applyDagLayoutModeUi();
+    dagHandle.setLayoutMode(mode);
+});
+
 /**
  * DAG 是否处于「不方便」状态：流式生成中或 DAG 播放中（含末 token dwell）。
  * 这些状态下改测量宽度只更新设置、不触发重绘，避免打断正在进行的流程/定时器状态机；
@@ -669,6 +807,63 @@ dagMeasureWidthInput?.addEventListener('change', () => {
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
 });
+
+dagCompactnessInput?.addEventListener('change', () => {
+    const raw = parseFloat(dagCompactnessInput.value);
+    const c = Number.isFinite(raw) ? clampDagCompactness(raw) : DAG_COMPACTNESS_DEFAULT;
+    dagCompactnessInput.value = String(c);
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY, String(c));
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setDagCompactness(c);
+    if (isDagBusy()) return;
+    const h = runnerHandle;
+    dagHandle.reset();
+    if (h && h.tokenCount > 0) {
+        replayRunnerStepsIntoDag(h);
+    }
+    dagHandle.fitViewportToContent();
+    dagHandle.clearNodeSelection();
+});
+
+dagEdgeTopPCoverageInput?.addEventListener('change', () => {
+    const raw = parseFloat(dagEdgeTopPCoverageInput.value);
+    const c = Number.isFinite(raw)
+        ? clampDagEdgeTopPCoverage(raw)
+        : DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
+    dagEdgeTopPCoverageInput.value = String(c);
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY, String(c));
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setEdgeTopPCoverage(c);
+    if (isDagBusy()) return;
+    const h = runnerHandle;
+    dagHandle.reset();
+    if (h && h.tokenCount > 0) {
+        replayRunnerStepsIntoDag(h);
+    }
+    dagHandle.fitViewportToContent();
+    dagHandle.clearNodeSelection();
+});
+
+dagLinearArcIntervalInput?.addEventListener('change', () => {
+    const raw = parseInt(dagLinearArcIntervalInput.value, 10);
+    const n = Number.isFinite(raw)
+        ? clampLinearArcAdjacentGap(raw)
+        : LINEAR_ARC_ADJACENT_GAP_DEFAULT;
+    dagLinearArcIntervalInput.value = String(n);
+    try {
+        localStorage.setItem(GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY, String(n));
+    } catch {
+        /* ignore */
+    }
+    dagHandle.setLinearArcAdjacentGapPx(n, { skipRefit: isDagBusy() });
+});
+
 window.addEventListener('pagehide', (ev) => {
     if (ev.persisted) return;
     dagHandle.detach();
@@ -1296,4 +1491,4 @@ exportDemoBtn?.addEventListener('click', () => {
     void exportJsonFile(payload, `genattr-${Date.now()}.json`);
 });
 
-initChatPanelLayout();
+initChatPanelLayout({ storageKey: PANEL_SPLIT_STORAGE_KEY_GEN_ATTRIBUTE });

client/src/ts/lang/translations.ts

@@ -46,10 +46,18 @@ export const translations: Translations = {
         'One regex per line (generated continuation only)': '每行一条正则（仅已生成 continuation）',
         'One regex per line (global flag), matched only within the generated suffix; if a token offset lies fully inside a match, its score is treated as 0.':
             '每行一条正则，`g`，仅在已生成后缀内匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
+        '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.':
+            'Coverage 指每一步在 Top-N 候选池内的累计质量份额（先入池、池内归一后按强度排序再累加）。数值越大保留的 DAG 入边越多；分母仅为该候选池，不是该步 API 返回的全部归因 token。',
         'When checked, gray DAG edges not adjacent to the hovered or selected node are hidden.':
             '勾选后，DAG 中未与当前悬浮/选中节点相邻的灰色边将被隐藏。',
         '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 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 播放中，仅写入存储，下一轮同步时再反映。',
+        '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 播放中，仅更新设置，下次运行或刷新时生效。',
         'Delay in milliseconds between steps during DAG playback. Stored locally; the value is read when you press play—changing it mid-playback does not affect the current run.':
             'DAG 步进重放时相邻两步之间的间隔（ms）。写入本地存储；每次点击播放时读取当前输入，播放中途改数值不影响本轮。',
         'Perform gradient attribution on the target token below.': '对以下target token做梯度归因。',
@@ -67,6 +75,7 @@ export const translations: Translations = {
             '每行一条正则，`g`，仅在 context 全文上匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
         'For threshold x∈(0,1]: map normalized scores in [0,x] linearly to display intensities [0,1]; scores above x saturate at maximum intensity. At x=1, equivalent to disabling mapping.':
             '阈值 x∈(0,1]：将已归一的分数在 [0,x] 上线性映射到显示强度 [0,1]；高于 x 的分数饱和为最高强度。x=1 时与关闭映射等价。',
+        'A ❤️ would mean a lot!': '喜欢就点个❤️吧！',
         'LLM × Linguistics × Information Theory': '大模型 × 语言学 × 信息论',
         
         // ========== 通用按钮和操作 ==========

client/src/ts/start.ts

@@ -28,6 +28,7 @@ import { DemoResourceLoader } from './storage/demoResourceLoader';
 import {TextInputController, calculateTextStatsForController, type ExtendedInputEvent} from './controllers/textInputController';
 import {HighlightController, initHighlightClearListeners} from './controllers/highlightController';
 import {LayoutController} from './controllers/layoutController';
+import {PANEL_SPLIT_STORAGE_KEY_START} from './utils/panelSplitStorage';
 import {handleServerDemoSave} from './controllers/serverDemoController';
 // 公共初始化模块
 import {initializeCommonApp} from './appInitializer';
@@ -1033,7 +1034,8 @@ window.onload = () => {
     const layoutController = new LayoutController({
         sidebarState: current.sidebar,
         sideBar: side_bar,
-        sidebarBtn: d3.select('#sidebar_btn')
+        sidebarBtn: d3.select('#sidebar_btn'),
+        panelSplitStorageKey: PANEL_SPLIT_STORAGE_KEY_START,
     });
 };
 

client/src/ts/utils/panelSplitStorage.ts

@@ -0,0 +1,35 @@
+/** 左栏宽度占「主区宽度 − resizer(8px)」的比例，与 LayoutController / chatPanelLayout 内逻辑一致 */
+
+const DEFAULT_RATIO = 0.5;
+const MIN_RATIO = 0.1;
+const MAX_RATIO = 0.9;
+
+export const PANEL_SPLIT_STORAGE_KEY_START = 'info_radar_panel_split_start';
+export const PANEL_SPLIT_STORAGE_KEY_CHAT = 'info_radar_panel_split_chat';
+export const PANEL_SPLIT_STORAGE_KEY_ATTRIBUTION = 'info_radar_panel_split_attribution';
+export const PANEL_SPLIT_STORAGE_KEY_GEN_ATTRIBUTE = 'info_radar_panel_split_gen_attribute';
+
+export function readPanelSplitRatio(storageKey: string): number {
+    try {
+        const raw = localStorage.getItem(storageKey);
+        if (raw === null) {
+            return DEFAULT_RATIO;
+        }
+        const n = Number(raw);
+        if (!Number.isFinite(n)) {
+            return DEFAULT_RATIO;
+        }
+        return Math.max(MIN_RATIO, Math.min(MAX_RATIO, n));
+    } catch {
+        return DEFAULT_RATIO;
+    }
+}
+
+export function writePanelSplitRatio(storageKey: string, ratio: number): void {
+    try {
+        const clamped = Math.max(MIN_RATIO, Math.min(MAX_RATIO, ratio));
+        localStorage.setItem(storageKey, String(clamped));
+    } catch {
+        // ignore quota / private mode
+    }
+}