反向传播动画改进

backend/api/openai_completions.py

@@ -10,10 +10,13 @@ from typing import Any, Callable, Dict, List, Optional, Tuple
 from backend.models.model_manager import inference_lock, get_instruct_model_display_name
 from backend.core.prediction_attributor import slot_for_prediction_attr_model
 from backend.platform.oom import exit_if_oom, is_oom_error
+from backend.api.utils import request_has_valid_admin
 from backend.core.completion_generator import (
+    ModelContextLimitUnknownError,
     PromptTooLongError,
     apply_chat_template_for_completion,
     completion_cancel_requested,
+    completion_max_token_length,
     generate_completion_text,
     global_completion_stop_event,
     inference_shutdown_event,
@@ -84,6 +87,7 @@ def _completion_inference_after_lock(
     *,
     stream_delta: Optional[Callable[[str, bool], None]] = None,
     max_tokens: Optional[int] = None,
+    bypass_site_context_limit: bool = False,
 ) -> CompletionRunResult:
     """
     在已持有推理锁的上下文中执行续写（旧版非流式路径的持锁体内逻辑）。
@@ -92,7 +96,12 @@ def _completion_inference_after_lock(
     from backend.platform.access_log import log_openai_completions_start
 
     log_openai_completions_start(request_id, lock_wait_time)
-    return generate_completion_text(prompt, stream_delta=stream_delta, max_tokens=max_tokens)
+    return generate_completion_text(
+        prompt,
+        stream_delta=stream_delta,
+        max_tokens=max_tokens,
+        bypass_site_context_limit=bypass_site_context_limit,
+    )
 
 
 def _log_completion_finished(
@@ -136,6 +145,7 @@ def _generate_completion_events(
     request_id: int,
     *,
     max_tokens: Optional[int] = None,
+    bypass_site_context_limit: bool = False,
 ):
     global_completion_stop_event.clear()
     q: queue.Queue = queue.Queue()
@@ -163,6 +173,7 @@ def _generate_completion_events(
                     lock_wait_time,
                     stream_delta=stream_delta,
                     max_tokens=max_tokens,
+                    bypass_site_context_limit=bypass_site_context_limit,
                 )
             finally:
                 inference_lock.release()
@@ -246,8 +257,8 @@ def _generate_completion_events(
                 return
             elif kind == "error":
                 err = item[1]
-                if isinstance(err, PromptTooLongError):
-                    _log_cmpl_issue(request_id, f"prompt too long: {err}")
+                if isinstance(err, (PromptTooLongError, ModelContextLimitUnknownError)):
+                    _log_cmpl_issue(request_id, str(err))
                     yield send_error_event(str(err), 400)
                 elif isinstance(err, QueueTimeoutError):
                     _log_cmpl_issue(request_id, f"排队超时: {err}")
@@ -276,9 +287,15 @@ def _completions_sse_response(
     request_id: int,
     *,
     max_tokens: Optional[int] = None,
+    bypass_site_context_limit: bool = False,
 ):
     return SSEProgressReporter(
-        lambda: _generate_completion_events(prompt, request_id, max_tokens=max_tokens)
+        lambda: _generate_completion_events(
+            prompt,
+            request_id,
+            max_tokens=max_tokens,
+            bypass_site_context_limit=bypass_site_context_limit,
+        )
     ).create_response()
 
 
@@ -390,7 +407,25 @@ def completions(completions_request):
     else:
         max_tokens = max_tokens_raw
 
+    bypass_site = request_has_valid_admin() and max_tokens is not None
+    if (
+        not bypass_site
+        and max_tokens is not None
+        and max_tokens > completion_max_token_length
+    ):
+        return {
+            "success": False,
+            "message": (
+                f"max_tokens 不得超过续写上下文上限 {completion_max_token_length}"
+            ),
+        }, 400
+
     client_ip = get_client_ip()
     request_id = _log_request(model, prompt, client_ip)
 
-    return _completions_sse_response(prompt, request_id, max_tokens=max_tokens)
+    return _completions_sse_response(
+        prompt,
+        request_id,
+        max_tokens=max_tokens,
+        bypass_site_context_limit=bypass_site,
+    )

backend/api/utils.py

@@ -68,6 +68,13 @@ def get_admin_token() -> str:
     return os.environ.get('INFORADAR_ADMIN_TOKEN')
 
 
+def request_has_valid_admin() -> bool:
+    """当前 HTTP 请求是否携带有效的 X-Admin-Token。"""
+    token = request.headers.get('X-Admin-Token') or ''
+    is_valid, _ = validate_admin_token(token)
+    return is_valid
+
+
 def validate_admin_token(request_token: str) -> tuple[bool, str]:
     """
     验证管理员token是否有效

backend/core/completion_generator.py

@@ -24,7 +24,22 @@ from .pred_topk_format import pred_topk_pairs_from_probs_1d
 from backend.platform.runtime_config import DEFAULT_TOPK
 
 # 续写路径：prompt + 续写合计不得超过该 token 数（与语义分析 runtime 无关）。
-completion_max_token_length = 500
+completion_max_token_length = 300
+
+
+def _model_context_token_limit(tokenizer, model) -> int:
+    """管理员续写路径：须能解析模型上下文，否则抛错（不回退站点 500）。"""
+    pe = getattr(getattr(model, "config", None), "max_position_embeddings", None)
+    if isinstance(pe, int) and pe > 0:
+        return pe
+    ml = getattr(tokenizer, "model_max_length", None)
+    if isinstance(ml, int) and 0 < ml < 1_000_000:
+        return ml
+    raise ModelContextLimitUnknownError(
+        "无法从模型 config.max_position_embeddings 或 tokenizer.model_max_length "
+        "确定上下文长度；管理员续写已拒绝。"
+    )
+
 
 # 特殊 token 亦视为分析/展示内容，故不跳过。
 _COMPLETION_DECODE_SKIP_SPECIAL = False
@@ -69,6 +84,10 @@ class PromptTooLongError(ValueError):
     """prompt 过长或占满上下文导致无法续写（``input_len >= ctx_limit`` 时由 ``core_generate_from_text`` 抛出）。"""
 
 
+class ModelContextLimitUnknownError(ValueError):
+    """管理员 bypass 站点上限时无法解析模型上下文长度。"""
+
+
 def _completion_without_generate(
     prompt_tokens: int,
 ) -> Tuple[str, str, int, int, List[Dict[str, Any]], Optional[float]]:
@@ -392,6 +411,7 @@ def core_generate_from_text(
     *,
     stream_delta: Optional[Callable[[str, bool], None]] = None,
     max_tokens: Optional[int] = None,
+    bypass_site_context_limit: bool = False,
 ) -> Tuple[str, str, int, int, List[Dict[str, Any]], Optional[float]]:
     """
     对一段已确定的模型输入字符串做自回归续写（默认贪心；函数内 ``_use_low_temp_sampling`` 可临时切到低温采样）。
@@ -403,19 +423,23 @@ def core_generate_from_text(
     Args:
         stream_delta: 可选；若提供则额外调用（如 SSE）。本地 verbose 打印由 ``_print_completion_stream_delta`` 单独控制，与是否传入 stream_delta 无关。
         max_tokens: 可选；正整数，限制本次最多生成多少个新 token（与 ``min(max_tokens, 上限 − prompt)`` 取小）。省略则用尽剩余上下文额度。
+        bypass_site_context_limit: 为 True 时（管理员显式 max_tokens）不按站点上限封顶，``ctx_limit`` 为模型上下文上限；无法解析时抛 ``ModelContextLimitUnknownError``。
 
     Returns:
         (续写文本, finish_reason, prompt_tokens, completion_tokens, 续写段 bpe_strings, ttft_s)。
         ttft_s 为自 ``model.generate`` 起至首次产出续写片段的秒数；仅取消时为 ``None``。
     """
     tokenizer, model, device = ensure_instruct_slot_ready()
-    ctx_limit = completion_max_token_length
 
     model.eval()
     enc = tokenizer(formatted_text, return_tensors="pt")
     input_ids = enc["input_ids"].to(device)
     input_len = input_ids.shape[1]
     n = int(input_len)
+    if bypass_site_context_limit and max_tokens is not None:
+        ctx_limit = _model_context_token_limit(tokenizer, model)
+    else:
+        ctx_limit = completion_max_token_length
     if n >= ctx_limit:
         raise PromptTooLongError(
             "Prompt too long: "
@@ -549,6 +573,7 @@ def generate_completion_text(
     stream_delta: Optional[Callable[[str, bool], None]] = None,
     *,
     max_tokens: Optional[int] = None,
+    bypass_site_context_limit: bool = False,
 ) -> Tuple[str, str, int, int, List[Dict[str, Any]], Optional[float]]:
     """
     ``prompt`` 须为已确定的完整模型输入（不再在服务端套用 chat template）。
@@ -556,4 +581,9 @@ def generate_completion_text(
     流式可传 stream_delta；中止由 ``completion_cancel_requested()`` 统一判断。
     ``max_tokens`` 为可选的正整数续写上限（与 API 约定一致）。
     """
-    return core_generate_from_text(prompt, stream_delta=stream_delta, max_tokens=max_tokens)
+    return core_generate_from_text(
+        prompt,
+        stream_delta=stream_delta,
+        max_tokens=max_tokens,
+        bypass_site_context_limit=bypass_site_context_limit,
+    )

client/src/assets/demos/causal_flow/order.json

@@ -1,23 +1,36 @@
 [
   {
     "slug": "Write a sonnet about love",
-    "label": "Poem | Write a sonnet about love"
+    "label": "Poem | Write a sonnet about love",
+    "featured": "bold"
   },
   {
     "slug": "写一首绝句，主题是春天",
-    "label": "写诗 | 写一首绝句，主题是春天"
+    "label": "写诗 | 写一首绝句，主题是春天",
+    "featured": "bold"
   },
   {
     "slug": "CoT | 苏州所在省的省会",
-    "label": "CoT | 苏州所在省的省会"
+    "label": "CoT | 苏州所在省的省会",
+    "featured": "bold"
+  },
+  {
+    "slug": "CoT | 苏州所在省的省会城市里最高的山",
+    "label": "CoT | 苏州所在省的省会的最高的山"
+  },
+  {
+    "slug": "CoT | 反向传播归因动画",
+    "label": "CoT | 思维链的反向传播归因动画",
+    "featured": "bold"
   },
   {
     "slug": "CoT | 多“跳”推理",
-    "label": "CoT | 多“跳”推理"
+    "label": "CoT | 多跳推理中“跳”的具象化"
   },
   {
     "slug": "过拟合｜李白 将进酒",
-    "label": "过拟合｜李白 将进酒"
+    "label": "过拟合｜李白 将进酒",
+    "featured": "bold"
   },
   {
     "slug": "CN->EN翻译",

client/src/causal_flow.html

@@ -182,9 +182,9 @@
                                 </select>
                             </span>
                             <span class="semantic-submode-group">
-                                <label class="semantic-submode-label" for="gen_attr_max_tokens">Max tokens</label>
+                                <label class="semantic-submode-label" for="gen_attr_max_tokens" data-i18n>Max new tokens</label>
                                 <input type="number" id="gen_attr_max_tokens" class="gen-attr-max-tokens-input"
-                                    value="100" min="1" max="500" step="1">
+                                    value="200" min="1" max="300" step="1" required>
                             </span>
                         </div>
                         <div class="button-group">
@@ -269,13 +269,15 @@
                         </span>
                     </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group">
+                        <span class="semantic-submode-group semantic-submode-group--emphasis">
                             <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>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
                         <span class="semantic-submode-group semantic-submode-group--emphasis">
                             <label class="semantic-submode-label">
                                 <input type="checkbox" id="gen_attr_dag_recursive_attribution"
@@ -284,7 +286,7 @@
                                 Propagated attribution mode
                             </label>
                         </span>
-                        <span class="semantic-submode-group" id="gen_attr_dag_recursive_edge_animation_group" hidden>
+                        <span class="semantic-submode-group semantic-submode-group--emphasis" id="gen_attr_dag_recursive_edge_animation_group" hidden>
                             <label class="semantic-submode-label">
                                 <input type="checkbox" id="gen_attr_dag_recursive_edge_animation" checked
                                     title="When checked, propagated incoming edges are shown batch-by-batch with the configured direction."
@@ -293,7 +295,7 @@
                             </label>
                         </span>
                         <span class="semantic-submode-group" id="gen_attr_dag_recursive_edge_animation_direction_group" hidden>
-                            <label class="semantic-submode-label" for="gen_attr_dag_recursive_edge_animation_direction">Animation direction</label>
+                            <label class="semantic-submode-label" for="gen_attr_dag_recursive_edge_animation_direction">Direction</label>
                             <select id="gen_attr_dag_recursive_edge_animation_direction" class="semantic-submode-select"
                                 title="Choose one direction for propagated-edge batch animation."
                                 data-i18n="title">

client/src/chat.html

@@ -120,7 +120,7 @@
                             <span class="semantic-submode-group">
                                 <label class="chat-max-new-tokens-label" for="chat_max_new_tokens">
                                     <span class="semantic-submode-label" data-i18n>Max new tokens:</span>
-                                    <input type="text" id="chat_max_new_tokens" class="semantic-threshold-input chat-max-new-tokens-input" inputmode="numeric" autocomplete="off" />
+                                    <input type="number" id="chat_max_new_tokens" class="semantic-threshold-input chat-max-new-tokens-input" min="1" max="300" step="1" value="200" required />
                                 </label>
                             </span>
                         </div>

client/src/css/components/_query-history-dropdown.scss

@@ -38,6 +38,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      &--bold {
+        font-weight: 500;
+      }
     }
   }
 }

client/src/css/pages/causal_flow.scss

@@ -7,7 +7,7 @@
 @use '../base/narrow-ios-form-font-tail' as ios-form-font;
 
 $gen-attr-option-row-gap: 12px;
-$gen-attr-cached-demos-panel-width: 18em;
+$gen-attr-cached-demos-panel-width: 21em;
 
 // 单行右对齐：Cached history 最右；Cached demo 靠其左侧
 .chat-cached-history-bar.chat-cached-history-bar--dual {
@@ -143,7 +143,7 @@ $gen-attr-cached-demos-panel-width: 18em;
     box-sizing: border-box;
   }
 
-  // DAG Top‑K：贴在 #results 内侧右下（absolute）；固定尺寸 HUD；Top‑K 区超出则在滚动层内滚动。
+  // DAG Top‑K：贴在 #results 内侧右下（absolute）；固定尺寸 HUD；超出部分裁剪。
   #results.gen-attr-results-surface.LMF > .tooltip.gen-attr-dag-topk-tooltip {
     box-sizing: border-box;
     // 与 #major_tooltip 一致：不参与 opacity 过渡，避免 reposition 后与底层叠影
@@ -164,8 +164,7 @@ $gen-attr-cached-demos-panel-width: 18em;
       flex: 1 1 auto;
       min-height: 0;
       margin-top: 6px;
-      overflow-x: hidden;
-      overflow-y: auto;
+      overflow: hidden;
     }
   }
 
@@ -224,6 +223,11 @@ $gen-attr-cached-demos-panel-width: 18em;
       stroke-opacity: var(--gen-attr-dag-node-recursive-share, 1);
     }
 
+    // 反向传播动画：当前滑过节点仅改描边色相（与出边红一致），stroke-opacity 仍由 recursive-share 控制。
+    &--recursive-chain.gen-attr-dag-node--backward-slide .gen-attr-dag-node-stroke {
+      stroke: var(--dag-highlight-line-color-out);
+    }
+
     // 选中/悬停 = 焦点（追因起点，nodeShare=1）；置于 recursive-chain 之后以覆盖链上节点的 stroke-opacity
     &--hover .gen-attr-dag-node-stroke,
     &--selected .gen-attr-dag-node-stroke {

client/src/features/causal_flow/bundledDemos.ts

@@ -24,11 +24,22 @@ function isSafeDemoSlug(s: string): boolean {
 const payloadCache = new Map<string, GenAttrCachedRun>();
 const payloadInflight = new Map<string, Promise<GenAttrCachedRun | undefined>>();
 
-export type BundledDemoListEntry = { id: string; label: string };
+export type BundledDemoListEntry = { id: string; label: string; featuredStyle?: string };
 
 /** 构建期固定的 bundled demo 列表（与当前 JS 同版本）。 */
 export function getBundledGenAttributeDemoList(): readonly BundledDemoListEntry[] {
-    return GEN_ATTRIBUTE_BUNDLED_DEMOS.map(({ slug, label }) => ({ id: slug, label }));
+    return GEN_ATTRIBUTE_BUNDLED_DEMOS.map(({ slug, label, featured }) => ({
+        id: slug,
+        label,
+        ...(featured ? { featuredStyle: featured } : {}),
+    }));
+}
+
+/** `?demo=` / 列表 id 为 slug；UI 展示用 order 中的 label，未知 slug 则回退 slug。 */
+export function getBundledGenAttributeDemoLabel(slug: string): string {
+    const s = slug.trim();
+    const hit = GEN_ATTRIBUTE_BUNDLED_DEMOS.find((d) => d.slug === s);
+    return hit?.label ?? s;
 }
 
 /**

client/src/features/causal_flow/genAttributeBundledDemoManifest.generated.ts

@@ -1,5 +1,6 @@
 /**
  * Generated by GenAttributeDemoManifestPlugin — do not edit.
  */
-export type GenAttributeBundledDemoManifestEntry = { readonly slug: string; readonly label: string };
-export const GEN_ATTRIBUTE_BUNDLED_DEMOS: readonly GenAttributeBundledDemoManifestEntry[] = [{"slug":"Write a sonnet about love","label":"Poem | Write a sonnet about love"},{"slug":"写一首绝句，主题是春天","label":"写诗 | 写一首绝句，主题是春天"},{"slug":"CoT | 苏州所在省的省会","label":"CoT | 苏州所在省的省会"},{"slug":"CoT | 多“跳”推理","label":"CoT | 多“跳”推理"},{"slug":"过拟合｜李白 将进酒","label":"过拟合｜李白 将进酒"},{"slug":"CN->EN翻译","label":"CN->EN | 翻译"}];
+export type GenAttributeBundledDemoFeaturedStyle = 'bold';
+export type GenAttributeBundledDemoManifestEntry = { readonly slug: string; readonly label: string; readonly featured?: GenAttributeBundledDemoFeaturedStyle };
+export const GEN_ATTRIBUTE_BUNDLED_DEMOS: readonly GenAttributeBundledDemoManifestEntry[] = [{"slug":"Write a sonnet about love","label":"Poem | Write a sonnet about love","featured":"bold"},{"slug":"写一首绝句，主题是春天","label":"写诗 | 写一首绝句，主题是春天","featured":"bold"},{"slug":"CoT | 苏州所在省的省会","label":"CoT | 苏州所在省的省会","featured":"bold"},{"slug":"CoT | 苏州所在省的省会城市里最高的山","label":"CoT | 苏州所在省的省会的最高的山"},{"slug":"CoT | 反向传播归因动画","label":"CoT | 思维链的反向传播归因动画","featured":"bold"},{"slug":"CoT | 多“跳”推理","label":"CoT | 多跳推理中“跳”的具象化"},{"slug":"过拟合｜李白 将进酒","label":"过拟合｜李白 将进酒","featured":"bold"},{"slug":"CN->EN翻译","label":"CN->EN | 翻译"}];

client/src/features/chat/chatPromptTemplateMode.ts

@@ -1,6 +1,9 @@
 /** Chat / Generate & Attribute 共用的「Raw prompt mode」开关 storage key */
 export const LS_SKIP_CHAT_TEMPLATE = 'chat_skip_chat_template';
 
+/** Chat 页 Max new tokens（与 Causal Flow 的 gen_attr 键独立，不共享） */
+export const CHAT_MAX_NEW_TOKENS_STORAGE_KEY = 'info_radar_chat_max_new_tokens';
+
 /** Enable thinking 开关（Chat / Causal Flow 各页独立 key，仅在 Chat template 模式下生效） */
 export const CHAT_ENABLE_THINKING_STORAGE_KEY = 'info_radar_chat_enable_thinking';
 export const GEN_ATTR_ENABLE_THINKING_STORAGE_KEY = 'info_radar_gen_attr_enable_thinking';

client/src/package.json

@@ -8,6 +8,7 @@
     "test:charIndex": "npx tsx tests/utils/charIndexForByteLimit.test.ts",
     "test:findSplitPoint": "npx tsx tests/utils/findSplitPoint.test.ts",
     "test:splitChunks": "npx tsx tests/utils/splitTextToChunks.test.ts",
+    "test:dagPropagationPlayback": "npx tsx tests/prediction_attribution/genAttributeDagPropagationPlayback.test.ts",
     "prebuild": "node scripts/updateIntroHTML.js",
     "prebuild:dev": "node scripts/updateIntroHTML.js",
     "wp": "npm run build:dev",

client/src/pages/causal_flow/index.ts

@@ -4,7 +4,7 @@ import '../../css/pages/causal_flow.scss';
 
 import { initThemeManager } from '../../shared/ui/theme';
 import { initLanguageManager } from '../../shared/ui/language';
-import { initI18n, tr } from '../../shared/lang/i18n-lite';
+import { initI18n, tr, trf } from '../../shared/lang/i18n-lite';
 import { AdminManager } from '../../shared/cross/adminManager';
 import { SettingsMenuManager } from '../../shared/cross/settingsMenuManager';
 import { initChatPanelLayout } from '../../shared/ui/chat_panel_layout';
@@ -37,10 +37,16 @@ import type { DagRecursiveEdgeReplayPacing } from '../../shared/prediction_attri
 import {
     createHydratedTokenGenHandle,
     startTokenGenAttribution,
-    TOKEN_GEN_MAX_TOKENS_DEFAULT,
     type TokenGenAttributionHandle,
     type TokenGenStep,
 } from '../../shared/prediction_attribution/causal_flow/tokenGenAttributionRunner';
+import {
+    DEFAULT_MAX_NEW_TOKENS,
+    finalizeMaxNewTokensInput,
+    isMaxNewTokensRawValid,
+    parseMaxNewTokens,
+    syncMaxNewTokensInputSiteMax,
+} from '../../shared/cross/maxNewTokensConfig';
 import { fetchTokenize } from '../../shared/prediction_attribution/core/predictionAttributeClient';
 import { completionFinishReasonLabel, type CompletionFinishReason } from '../../shared/cross/generationEndReasonLabel';
 import {
@@ -72,6 +78,7 @@ import {
 } from '../../shared/cross/contentUrl';
 import {
     fetchBundledGenAttributeDemoBySlug,
+    getBundledGenAttributeDemoLabel,
     getBundledGenAttributeDemoList,
     isGenAttrRunPayloadValidForUi,
 } from '../../features/causal_flow/bundledDemos';
@@ -110,7 +117,6 @@ const showToast = createToast('#toast').show;
 
 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 = TOKEN_GEN_MAX_TOKENS_DEFAULT;
 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';
@@ -198,8 +204,9 @@ function readStoredModelVariant(): PredictionAttributeModelVariant {
 }
 
 function readStoredMaxTokens(): number {
-    return lsReadNumber(GEN_ATTR_MAX_TOKENS_STORAGE_KEY, GEN_ATTR_MAX_TOKENS_DEFAULT, {
-        validate: (n) => n >= 1 && n <= 500,
+    const admin = adminManager.isInAdminMode();
+    return lsReadNumber(GEN_ATTR_MAX_TOKENS_STORAGE_KEY, DEFAULT_MAX_NEW_TOKENS, {
+        validate: (n) => isMaxNewTokensRawValid(String(n), admin),
     });
 }
 
@@ -532,7 +539,10 @@ function genAttrEffectiveExcludeGeneratedPatternsText(): string {
     return genAttrExcludeGeneratedPatternsTa?.value ?? '';
 }
 
-if (maxTokensInput) maxTokensInput.value = String(readStoredMaxTokens());
+if (maxTokensInput) {
+    maxTokensInput.value = String(readStoredMaxTokens());
+    syncMaxNewTokensInputSiteMax(maxTokensInput, adminManager.isInAdminMode());
+}
 const initialDagLayoutMode = readStoredDagLayoutMode();
 if (dagLayoutModeSelect) dagLayoutModeSelect.value = initialDagLayoutMode;
 applyDagLayoutModeUi();
@@ -748,12 +758,17 @@ modelVariantSelect?.addEventListener('change', () => {
 });
 
 maxTokensInput?.addEventListener('change', () => {
+    if (!normalizeGenAttrMaxTokensField()) return;
     lsSet(
         GEN_ATTR_MAX_TOKENS_STORAGE_KEY,
-        maxTokensInput?.value ?? String(GEN_ATTR_MAX_TOKENS_DEFAULT),
+        maxTokensInput?.value ?? String(DEFAULT_MAX_NEW_TOKENS),
     );
     syncSubmitButtonState();
 });
+maxTokensInput?.addEventListener('input', () => syncSubmitButtonState());
+maxTokensInput?.addEventListener('blur', () => {
+    normalizeGenAttrMaxTokensField();
+});
 
 // DAG 回放节奏（与上节「DAG 测量宽度」无关；宽度 listener 在后文）
 dagPlaybackStepMsInput?.addEventListener('change', () => {
@@ -1575,13 +1590,22 @@ function currentModelVariant(): PredictionAttributeModelVariant {
 }
 
 function currentMaxTokens(): number {
-    const n = parseInt(
-        maxTokensInput?.value ?? String(GEN_ATTR_MAX_TOKENS_DEFAULT),
-        10
+    return parseMaxNewTokens(
+        maxTokensInput?.value ?? String(DEFAULT_MAX_NEW_TOKENS),
+        adminManager.isInAdminMode()
     );
-    return Number.isFinite(n) && n >= 1
-        ? Math.min(n, 500)
-        : GEN_ATTR_MAX_TOKENS_DEFAULT;
+}
+
+function normalizeGenAttrMaxTokensField(): boolean {
+    const ok = finalizeMaxNewTokensInput(
+        maxTokensInput,
+        adminManager.isInAdminMode(),
+        (msg) => showAlertDialog(tr('LLM Causal Flow'), msg),
+        tr,
+        trf
+    );
+    syncSubmitButtonState();
+    return ok;
 }
 
 function syncIdleModelMetric(): void {
@@ -1605,7 +1629,7 @@ let lastRunInputSnapshot: string | null = null;
 function getInputSnapshotForRun(): string {
     const runOpts = {
         v: currentModelVariant(),
-        max: currentMaxTokens(),
+        max: maxTokensInput?.value ?? String(DEFAULT_MAX_NEW_TOKENS),
         tfOn: isGenAttrTeacherForcingUiOn(),
         tfText: (teacherForcingTextField.node() as HTMLTextAreaElement | null)?.value ?? '',
         saOn: isStopAfterTeacherForcingOn(),
@@ -1640,7 +1664,10 @@ function isInputReadyForRun(): boolean {
     const forcing = teacherForcingContinuationForRun();
     if (prompt.length === 0 && forcing === undefined) return false;
     if (prompt.length > 0 && isGenAttrTeacherForcingUiOn() && forcing === undefined) return false;
-    return true;
+    return isMaxNewTokensRawValid(
+        maxTokensInput?.value ?? '',
+        adminManager.isInAdminMode()
+    );
 }
 
 function syncSubmitButtonState(): void {
@@ -1971,12 +1998,13 @@ const genAttrCachedHistoryBtn = document.getElementById('gen_attr_cached_history
 const genAttrCachedDemosBtn = document.getElementById('gen_attr_cached_demos_btn');
 const genAttrCachedDemosValueBtn = document.getElementById('gen_attr_cached_demos_value_btn');
 const genAttrCachedDemosValueEl = document.getElementById('gen_attr_cached_demos_value');
-let genAttrBundledDemoEntries: Array<{ id: string; label: string }> = [];
+let genAttrBundledDemoEntries: Array<{ id: string; label: string; featuredStyle?: string }> = [];
 
 function syncGenAttrCachedDemosValueDisplay(): void {
     const slug = readDemoUrlParam();
-    if (genAttrCachedDemosValueEl) genAttrCachedDemosValueEl.textContent = slug ?? '';
-    if (genAttrCachedDemosValueBtn) genAttrCachedDemosValueBtn.title = slug ?? '';
+    const display = slug ? getBundledGenAttributeDemoLabel(slug) : '';
+    if (genAttrCachedDemosValueEl) genAttrCachedDemosValueEl.textContent = display;
+    if (genAttrCachedDemosValueBtn) genAttrCachedDemosValueBtn.title = display;
 }
 
 genAttrCachedDemosValueBtn?.addEventListener('click', (e) => {
@@ -2343,8 +2371,16 @@ function syncGenAttrExportDemoBtn(): void {
     if (!exportDemoBtn) return;
     exportDemoBtn.style.display = adminManager.isInAdminMode() ? '' : 'none';
 }
-syncGenAttrExportDemoBtn();
-adminManager.onAdminModeChange(() => syncGenAttrExportDemoBtn());
+function syncGenAttrAdminUi(): void {
+    syncGenAttrExportDemoBtn();
+    syncMaxNewTokensInputSiteMax(maxTokensInput, adminManager.isInAdminMode());
+    if (maxTokensInput) {
+        maxTokensInput.value = String(readStoredMaxTokens());
+    }
+    normalizeGenAttrMaxTokensField();
+}
+syncGenAttrAdminUi();
+adminManager.onAdminModeChange(() => syncGenAttrAdminUi());
 exportDemoBtn?.addEventListener('click', () => {
     void (async () => {
         const h = runnerHandle;

client/src/pages/chat/index.ts

@@ -4,7 +4,7 @@ import '../../css/pages/chat.scss';
 
 import { initThemeManager } from '../../shared/ui/theme';
 import { initLanguageManager } from '../../shared/ui/language';
-import { initI18n, tr } from '../../shared/lang/i18n-lite';
+import { initI18n, tr, trf } from '../../shared/lang/i18n-lite';
 import { AdminManager } from '../../shared/cross/adminManager';
 import { SettingsMenuManager } from '../../shared/cross/settingsMenuManager';
 import { initCachedHistoryQueryDropdown, type CachedHistorySelectContext } from '../../shared/cross/cachedHistoryUi';
@@ -53,14 +53,24 @@ import {
 } from '../../shared/cross/contentUrl';
 import { CHAT_SURPRISAL_COLOR_MAP_MAX } from '../../shared/cross/SurprisalColorConfig';
 import { updateChatCompletionMetrics } from '../../shared/cross/textMetricsUpdater';
-import { lsReadBool, lsWriteBool } from '../../shared/storage/localStorageHelpers';
+import { lsReadBool, lsReadNumber, lsSet, lsWriteBool } from '../../shared/storage/localStorageHelpers';
 import {
     CHAT_ENABLE_THINKING_STORAGE_KEY,
+    CHAT_MAX_NEW_TOKENS_STORAGE_KEY,
     LS_SKIP_CHAT_TEMPLATE,
 } from '../../features/chat/chatPromptTemplateMode';
 import { createToast } from '../../shared/ui/toast';
 import { initDensityAttributionSidebar } from '../../shared/prediction_attribution/density_sidebar/densityAttributionSidebar';
 import { syncDraftCommittedButtonPair } from '../../shared/cross/syncDraftCommittedButtonPair';
+import {
+    DEFAULT_MAX_NEW_TOKENS,
+    finalizeMaxNewTokensInput,
+    formatMaxNewTokensParseError,
+    MaxNewTokensParseError,
+    parseMaxNewTokens as parseMaxNewTokensShared,
+    isMaxNewTokensRawValid,
+    syncMaxNewTokensInputSiteMax,
+} from '../../shared/cross/maxNewTokensConfig';
 
 // 与首页一致：默认隐藏 Ask 旁的小菊花，仅在请求进行中再显示
 d3.selectAll('.loadersmall').style('display', 'none');
@@ -305,7 +315,8 @@ function fingerprintsEqual(a: ChatCommittedFingerprint, b: ChatCommittedFingerpr
 
 function syncAskButtonState(): void {
     const fp = getCurrentFingerprint();
-    const idleInputsReady = 'raw' in fp ? fp.raw.length > 0 : fp.user.length > 0;
+    const idleInputsReady =
+        ('raw' in fp ? fp.raw.length > 0 : fp.user.length > 0) && isMaxNewTokensInputValid();
     const hasUncommittedDraft =
         lastCommittedFingerprint === null ||
         !fingerprintsEqual(lastCommittedFingerprint, fp);
@@ -380,6 +391,12 @@ void new SettingsMenuManager(
     'common'
 );
 
+adminManager.onAdminModeChange(() => {
+    api.setAdminToken(adminManager.isInAdminMode() ? adminManager.getAdminToken() : null);
+    syncChatMaxNewTokensUi();
+    normalizeChatMaxNewTokensField();
+});
+
 const flushStreamingPreview = (text: string, streamEnd: boolean): void => {
     if (
         !streamEnd &&
@@ -398,20 +415,64 @@ const getActivePromptValue = (): string => {
     return (chatUserTextField.node() as HTMLTextAreaElement | null)?.value ?? '';
 };
 
-/** 空白 = 不限制（用尽剩余上下文）；否则须为正整数。 */
-function parseOptionalMaxNewTokens(raw: string): number | undefined {
-    const t = raw.trim();
-    if (t === '') return undefined;
-    if (!/^\d+$/.test(t)) {
-        throw new Error(tr('Max new tokens must be a positive integer or empty'));
+function parseMaxNewTokens(raw: string): number {
+    try {
+        return parseMaxNewTokensShared(raw, adminManager.isInAdminMode());
+    } catch (e) {
+        if (e instanceof MaxNewTokensParseError) {
+            throw new Error(
+                formatMaxNewTokensParseError(e.code, tr, trf)
+            );
+        }
+        throw e;
     }
-    const n = parseInt(t, 10);
-    if (n <= 0) {
-        throw new Error(tr('Max new tokens must be a positive integer or empty'));
+}
+
+function normalizeChatMaxNewTokensField(): boolean {
+    const ok = finalizeMaxNewTokensInput(
+        maxNewTokensInput,
+        adminManager.isInAdminMode(),
+        (msg) => showAlertDialog(tr('LLM Raw Chat'), msg),
+        tr,
+        trf
+    );
+    syncAskButtonState();
+    return ok;
+}
+
+function isMaxNewTokensInputValid(): boolean {
+    return isMaxNewTokensRawValid(
+        maxNewTokensInput?.value ?? '',
+        adminManager.isInAdminMode()
+    );
+}
+
+function readChatStoredMaxTokens(): number {
+    return lsReadNumber(CHAT_MAX_NEW_TOKENS_STORAGE_KEY, DEFAULT_MAX_NEW_TOKENS, {
+        validate: (n) =>
+            isMaxNewTokensRawValid(String(n), adminManager.isInAdminMode()),
+    });
+}
+
+function persistChatMaxNewTokens(): void {
+    if (!maxNewTokensInput) return;
+    try {
+        const n = parseMaxNewTokens(maxNewTokensInput.value);
+        lsSet(CHAT_MAX_NEW_TOKENS_STORAGE_KEY, String(n));
+    } catch {
+        /* 非法值不写 storage */
+    }
+}
+
+function syncChatMaxNewTokensUi(): void {
+    if (maxNewTokensInput) {
+        maxNewTokensInput.value = String(readChatStoredMaxTokens());
     }
-    return n;
+    syncMaxNewTokensInputSiteMax(maxNewTokensInput, adminManager.isInAdminMode());
 }
 
+syncChatMaxNewTokensUi();
+
 const setAskLoading = (loading: boolean): void => {
     askInFlight = loading;
     loaderSmall.style('display', loading ? null : 'none');
@@ -433,9 +494,9 @@ const runAsk = async (options?: { forceRefresh?: boolean }): Promise<void> => {
     if (askInFlight || prompt.length === 0) return;
     const forceRefresh = options?.forceRefresh === true;
 
-    let maxTokensOpt: number | undefined;
+    let maxTokensOpt: number;
     try {
-        maxTokensOpt = parseOptionalMaxNewTokens(maxNewTokensInput?.value ?? '');
+        maxTokensOpt = parseMaxNewTokens(maxNewTokensInput?.value ?? '');
     } catch (e: unknown) {
         const msg = e instanceof Error ? e.message : String(e);
         showAlertDialog(tr('LLM Raw Chat'), translateApiErrorMessage(msg));
@@ -494,7 +555,7 @@ const runAsk = async (options?: { forceRefresh?: boolean }): Promise<void> => {
             {
                 model: completionModel,
                 prompt: modelPrompt,
-                ...(maxTokensOpt !== undefined ? { max_tokens: maxTokensOpt } : {})
+                max_tokens: maxTokensOpt
             },
             {
                 signal: askAbort.signal,
@@ -578,8 +639,16 @@ if (chatSystemPromptTextarea) {
         syncAskButtonState();
     });
 }
-maxNewTokensInput?.addEventListener('input', () => {
-    syncAskButtonState();
+maxNewTokensInput?.addEventListener('input', () => syncAskButtonState());
+maxNewTokensInput?.addEventListener('change', () => {
+    if (normalizeChatMaxNewTokensField()) {
+        persistChatMaxNewTokens();
+    }
+});
+maxNewTokensInput?.addEventListener('blur', () => {
+    if (normalizeChatMaxNewTokensField()) {
+        persistChatMaxNewTokens();
+    }
 });
 
 async function restoreChatFromCachedPrompt(

client/src/scripts/genAttributeDemoManifestPlugin.js

@@ -1,7 +1,8 @@
 /**
  * 构建前扫描 `assets/demos/causal_flow/*.json`，写入 `features/causal_flow/genAttributeBundledDemoManifest.generated.ts`，供 bundle 内联 demo 列表。
- * 顺序与 UI 名：`order.json` 数组；项为 slug 字符串或 `{ slug, label? }`（无 label 则 UI 显示 slug）。
- * 未列入 order 的 demo 按 UTF-16 码元序追加到末尾，label 同 slug。
+ * 顺序与 UI 名：`order.json` 数组；项为 slug 字符串或 `{ slug, label?, featured? }`（无 label 则 UI 显示 slug；`featured: "bold"` 等样式见 VALID_ORDER_FEATURED）。
+ * 目录内存在但尚未列入 order 的 demo 会在构建时自动追加到 order.json 末尾（`slug` 与 `label` 均为文件名 stem，便于人工改 label）。
+ * 若 order.json 不存在则按 UTF-16 码元序生成完整列表。manifest 生成时若仍有遗漏则按 UTF-16 追加。
  * order 中的 slug 必须对应目录内已有 demo JSON；重复 slug 亦会在构建时报错。
  */
 const path = require('path');
@@ -10,6 +11,7 @@ const fs = require('fs');
 const REL_DIR = 'assets/demos/causal_flow';
 const GENERATED_BASENAME = 'genAttributeBundledDemoManifest.generated.ts';
 const ORDER_FILENAME = 'order.json';
+const VALID_ORDER_FEATURED = new Set(['bold']);
 
 function utf16Sort(slugs) {
     return [...slugs].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
@@ -24,7 +26,7 @@ function discoverSlugs(srcDir) {
         .filter((s) => s.length > 0);
 }
 
-/** @returns {{ slug: string, label: string | null } | null} */
+/** @returns {{ slug: string, label: string | null, featured?: string } | null} */
 function parseOrderEntry(entry, index) {
     const at = `${ORDER_FILENAME}[${index}]`;
     if (typeof entry === 'string') {
@@ -38,10 +40,19 @@ function parseOrderEntry(entry, index) {
             typeof entry.label === 'string' && entry.label.trim().length > 0
                 ? entry.label.trim()
                 : null;
-        return { slug, label };
+        let featured;
+        if (entry.featured != null) {
+            if (typeof entry.featured !== 'string' || !VALID_ORDER_FEATURED.has(entry.featured)) {
+                throw new Error(
+                    `${at}: unknown featured ${JSON.stringify(entry.featured)} (supported: ${[...VALID_ORDER_FEATURED].join(', ')})`,
+                );
+            }
+            featured = entry.featured;
+        }
+        return featured ? { slug, label, featured } : { slug, label };
     }
     throw new Error(
-        `${at}: expected a slug string or { "slug": "...", "label"?: "..." }`
+        `${at}: expected a slug string or { "slug": "...", "label"?: "...", "featured"?: "bold" }`
     );
 }
 
@@ -64,6 +75,40 @@ function resolveLabel(slug, label) {
     return label ?? slug;
 }
 
+/** @param {{ slug: string, label: string | null, featured?: string }[]} entries */
+function serializeOrderFile(entries) {
+    const body = entries.map(({ slug, label, featured }) => {
+        const row = { slug, label: resolveLabel(slug, label) };
+        if (featured) row.featured = featured;
+        return row;
+    });
+    return `${JSON.stringify(body, null, 2)}\n`;
+}
+
+/** 将新发现的 demo 追加到 order.json 末尾；无 order 文件时生成完整列表。 */
+function syncOrderJson(srcDir) {
+    const discovered = discoverSlugs(srcDir);
+    if (discovered.length === 0) return;
+
+    const orderPath = path.join(srcDir, ORDER_FILENAME);
+    let orderEntries = readOrderEntries(srcDir);
+    const seen = new Set((orderEntries ?? []).map((e) => e.slug));
+    const missing = utf16Sort(discovered.filter((s) => !seen.has(s)));
+    if (missing.length === 0) return;
+
+    if (orderEntries == null) {
+        orderEntries = utf16Sort(discovered).map((slug) => ({ slug, label: slug }));
+    } else {
+        for (const slug of missing) {
+            orderEntries.push({ slug, label: slug });
+        }
+    }
+
+    const next = serializeOrderFile(orderEntries);
+    if (fs.existsSync(orderPath) && fs.readFileSync(orderPath, 'utf8') === next) return;
+    fs.writeFileSync(orderPath, next, 'utf8');
+}
+
 function collectDemoEntries(srcDir) {
     const discovered = new Set(discoverSlugs(srcDir));
     const order = readOrderEntries(srcDir);
@@ -75,7 +120,7 @@ function collectDemoEntries(srcDir) {
     }
     const seen = new Set();
     const result = [];
-    for (const { slug, label } of order) {
+    for (const { slug, label, featured } of order) {
         if (seen.has(slug)) {
             throw new Error(`${ORDER_FILENAME}: duplicate slug ${JSON.stringify(slug)}`);
         }
@@ -85,7 +130,9 @@ function collectDemoEntries(srcDir) {
             );
         }
         seen.add(slug);
-        result.push({ slug, label: resolveLabel(slug, label) });
+        const row = { slug, label: resolveLabel(slug, label) };
+        if (featured) row.featured = featured;
+        result.push(row);
     }
     for (const slug of utf16Sort([...discovered].filter((s) => !seen.has(s)))) {
         result.push({ slug, label: slug });
@@ -94,12 +141,14 @@ function collectDemoEntries(srcDir) {
 }
 
 function writeGeneratedModule(srcDir, outPath) {
+    syncOrderJson(srcDir);
     const entries = collectDemoEntries(srcDir);
     const content =
         '/**\n' +
         ' * Generated by GenAttributeDemoManifestPlugin — do not edit.\n' +
         ' */\n' +
-        'export type GenAttributeBundledDemoManifestEntry = { readonly slug: string; readonly label: string };\n' +
+        'export type GenAttributeBundledDemoFeaturedStyle = \'bold\';\n' +
+        'export type GenAttributeBundledDemoManifestEntry = { readonly slug: string; readonly label: string; readonly featured?: GenAttributeBundledDemoFeaturedStyle };\n' +
         `export const GEN_ATTRIBUTE_BUNDLED_DEMOS: readonly GenAttributeBundledDemoManifestEntry[] = ${JSON.stringify(entries)};\n`;
     if (fs.existsSync(outPath) && fs.readFileSync(outPath, 'utf8') === content) return;
     fs.mkdirSync(path.dirname(outPath), { recursive: true });
@@ -126,4 +175,11 @@ class GenAttributeDemoManifestPlugin {
     }
 }
 
-module.exports = { GenAttributeDemoManifestPlugin };
+module.exports = {
+    GenAttributeDemoManifestPlugin,
+    syncOrderJson,
+    collectDemoEntries,
+    discoverSlugs,
+    ORDER_FILENAME,
+    REL_DIR,
+};

client/src/shared/api/completionsClient.ts

@@ -1,7 +1,20 @@
 import URLHandler from '../core/URLHandler';
 import * as completionResultCache from '../../features/chat/completionResultCache';
+import { AdminManager } from '../cross/adminManager';
 import type { TokenWithOffset } from './generatedSchemas';
 
+function completionsRequestHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {
+        'Content-Type': 'application/json; charset=UTF-8',
+    };
+    const admin = AdminManager.getInstance();
+    const token = admin.isInAdminMode() ? admin.getAdminToken() : null;
+    if (token) {
+        headers['X-Admin-Token'] = token;
+    }
+    return headers;
+}
+
 /** 与 server.yaml basePath `/api` + `/v1/completions` 一致 */
 const COMPLETIONS_PATH = '/api/v1/completions';
 const COMPLETIONS_PROMPT_PATH = '/api/v1/completions/prompt';
@@ -53,7 +66,7 @@ export function postCompletionsStop(): void {
     const url = URLHandler.basicURL() + COMPLETIONS_STOP_PATH;
     void fetch(url, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+        headers: completionsRequestHeaders(),
         body: '{}'
     }).catch(() => {
         /* 忽略：Stop 与 SSE 并行，失败时生成仍可能靠墙钟或其它路径结束 */
@@ -90,7 +103,7 @@ export async function postCompletionsPrompt(
     }
     const res = await fetch(url, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+        headers: completionsRequestHeaders(),
         body: JSON.stringify(payload),
         signal
     });
@@ -219,7 +232,7 @@ export async function postCompletions(
         function fetchRemote(): void {
         fetch(URLHandler.basicURL() + COMPLETIONS_PATH, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+            headers: completionsRequestHeaders(),
             body: JSON.stringify(body),
             signal
         })

client/src/shared/cross/maxNewTokensConfig.ts

@@ -0,0 +1,100 @@
+/** 与 backend/core/completion_generator.py completion_max_token_length 一致。 */
+export const SITE_MAX_NEW_TOKENS = 300;
+
+export const DEFAULT_MAX_NEW_TOKENS = 200;
+
+export type MaxNewTokensParseErrorCode = 'empty' | 'invalid' | 'exceeds_site';
+
+export class MaxNewTokensParseError extends Error {
+    readonly code: MaxNewTokensParseErrorCode;
+
+    constructor(code: MaxNewTokensParseErrorCode) {
+        super(code);
+        this.code = code;
+        this.name = 'MaxNewTokensParseError';
+    }
+}
+
+export function parseMaxNewTokens(raw: string, admin: boolean): number {
+    const t = raw.trim();
+    if (t === '') {
+        throw new MaxNewTokensParseError('empty');
+    }
+    if (!/^\d+$/.test(t)) {
+        throw new MaxNewTokensParseError('invalid');
+    }
+    const n = parseInt(t, 10);
+    if (n <= 0) {
+        throw new MaxNewTokensParseError('invalid');
+    }
+    if (!admin && n > SITE_MAX_NEW_TOKENS) {
+        throw new MaxNewTokensParseError('exceeds_site');
+    }
+    return n;
+}
+
+export function isMaxNewTokensRawValid(raw: string, admin: boolean): boolean {
+    try {
+        parseMaxNewTokens(raw, admin);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export function ensureMaxNewTokensInputNotEmpty(input: HTMLInputElement | null): void {
+    if (input && input.value.trim() === '') {
+        input.value = String(DEFAULT_MAX_NEW_TOKENS);
+    }
+}
+
+/** 非管理员时 HTML max=站点上限；管理员去掉 max 以便填更大数字。 */
+export function syncMaxNewTokensInputSiteMax(
+    input: HTMLInputElement | null,
+    admin: boolean
+): void {
+    if (!input) return;
+    if (admin) {
+        input.removeAttribute('max');
+    } else {
+        input.max = String(SITE_MAX_NEW_TOKENS);
+    }
+}
+
+type TrFn = (text: string) => string;
+type TrfFn = (text: string, vars: Record<string, string | number>) => string;
+
+export function formatMaxNewTokensParseError(
+    code: MaxNewTokensParseErrorCode,
+    tr: TrFn,
+    trf: TrfFn
+): string {
+    if (code === 'exceeds_site') {
+        return trf('Max new tokens must not exceed {limit}', { limit: SITE_MAX_NEW_TOKENS });
+    }
+    return tr('Max new tokens must be a positive integer');
+}
+
+/** blur/change 时校验；非法则 alert、修正输入框，返回是否有效。 */
+export function finalizeMaxNewTokensInput(
+    input: HTMLInputElement | null,
+    admin: boolean,
+    onAlert: (message: string) => void,
+    tr: TrFn,
+    trf: TrfFn
+): boolean {
+    ensureMaxNewTokensInputNotEmpty(input);
+    if (!input) return false;
+    try {
+        parseMaxNewTokens(input.value, admin);
+        return true;
+    } catch (e) {
+        if (!(e instanceof MaxNewTokensParseError)) throw e;
+        onAlert(formatMaxNewTokensParseError(e.code, tr, trf));
+        input.value =
+            e.code === 'exceeds_site'
+                ? String(SITE_MAX_NEW_TOKENS)
+                : String(DEFAULT_MAX_NEW_TOKENS);
+        return false;
+    }
+}

client/src/shared/cross/queryHistory.ts

@@ -108,7 +108,7 @@ export interface InitQueryHistoryDropdownOptions {
      * 与 {@link getHistoryItems} 二选一：每项含稳定 id（如续写缓存的 contentKey）与展示 label。
      * 选中/删除/置顶回调均传递 id。
      */
-    getHistoryEntries?: () => Array<{ id: string; label: string }>;
+    getHistoryEntries?: () => Array<{ id: string; label: string; featuredStyle?: string }>;
     /**
      * 每次渲染列表前调用（如打开下拉时从 IndexedDB 刷新内存镜像）。
      * 失败时仍会继续渲染，避免下拉空白。
@@ -210,7 +210,10 @@ export function initQueryHistoryDropdown(options: InitQueryHistoryDropdownOption
                 const display = row.label;
                 const li = document.createElement('li');
                 const span = document.createElement('span');
-                span.className = 'history-text';
+                span.className =
+                    row.featuredStyle === 'bold'
+                        ? 'history-text history-text--bold'
+                        : 'history-text';
                 span.textContent = display;
                 if (!pointerFineHover) span.title = display;
                 let promoteBtn: HTMLButtonElement | null = null;

client/src/shared/cross/tokenDisplayUtils.ts

@@ -50,6 +50,11 @@ export type VisualizeSpecialCharsOptions = {
      * 省略或 false：每个 ASCII 空格都变为 ·（与 Tooltip / 候选词等一致）。
      */
     spaceDotExceptBeforeAsciiLetterOrNumber?: boolean;
+    /**
+     * 为 true（如 DAG 节点 SVG 标签）：不可打印码点显示为 `[]` 而非 `[hex]`。
+     * Tooltip 等需辨认码点的场景勿开启。
+     */
+    omitHexInCodePointLabel?: boolean;
 };
 
 function visualizeSpecialCharsImpl(text: string, options?: VisualizeSpecialCharsOptions): string {
@@ -88,8 +93,7 @@ function visualizeSpecialCharsImpl(text: string, options?: VisualizeSpecialChars
             } else {
                 const codePoint = char.codePointAt(0);
                 if (codePoint !== undefined) {
-                    const hexCode = codePoint.toString(16).toLowerCase().padStart(4, '0');
-                    processed.push(`[${hexCode}]`);
+                    processed.push(options?.omitHexInCodePointLabel === true ? '[]' : `[${codePoint.toString(16).toLowerCase().padStart(4, '0')}]`);
                 } else {
                     processed.push(char);
                 }

client/src/shared/lang/translations.ts

@@ -37,6 +37,8 @@ export const translations: Translations = {
         'LLM Raw Chat - chat with explicit raw prompts': 'LLM Raw Chat 原始对话 - 用精确的 prompt 进行对话',
         'Context Attribution - attribute a predicted token to its context': 'Context Attribution 上下文归因 - 将预测 token 归因到上下文',
         'LLM Causal Flow - explore the context-attribution DAG': 'LLM Causal Flow 因果流 - 探索上下文归因的 DAG 关系图',
+        'Max new tokens must not exceed {limit}': 'Max new tokens 不得超过 {limit}',
+        'Max new tokens must be a positive integer': 'Max new tokens 须为正整数',
         // LLM Causal Flow（gen_attribute）页：placeholder / title 文案
         'When enabled, each line below is a regex with the global flag, matched only within the initial static prompt prefix (excluding generated continuation). If a token offset lies fully inside a match, its score is treated as 0.':
             '启用后仅在初始静态 prompt 前缀内按下列正则匹配（不含已生成 continuation）；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',

client/src/shared/prediction_attribution/causal_flow/genAttributeDagEdgeRenderStrength.ts

@@ -0,0 +1,52 @@
+import { DAG_EDGE_RENDER_OPACITY_FLOOR } from './genAttributeDagEdgeDisplay';
+import { maxHighlightEdgeShare } from './genAttributeDagRecursiveEdgeAnimation';
+
+/**
+ * 池内 max 归一后的 `stroke-opacity`；最强边刻度为 {@link maxOpacity}（默认 1）。
+ * 按实际值计算后，最终不低于 {@link DAG_EDGE_RENDER_OPACITY_FLOOR}，防止过淡不可见。
+ */
+export 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);
+}
+
+/**
+ * 池内 max 归一后的 render 强度。
+ * - 默认：{@link sharesByKey} 全表 max；
+ * - {@link maxShareOverride}：蓝入边前沿分母；
+ * - {@link onlyKeys}：仅输出这些 key（红入边：集合内 max，忽略 maxShareOverride 外的键）。
+ */
+export function buildMaxNormalizedRenderStrengthByKey(
+    sharesByKey: Map<string, number>,
+    maxOpacity = 1,
+    maxShareOverride?: number,
+    onlyKeys?: ReadonlySet<string>,
+): Map<string, number> {
+    let maxShare: number;
+    if (maxShareOverride != null && Number.isFinite(maxShareOverride) && maxShareOverride > 0) {
+        maxShare = maxShareOverride;
+    } else if (onlyKeys != null) {
+        maxShare = 0;
+        for (const key of onlyKeys) {
+            const share = sharesByKey.get(key);
+            if (share != null && share > maxShare) maxShare = share;
+        }
+    } else {
+        maxShare = maxHighlightEdgeShare(sharesByKey);
+    }
+    const byKey = new Map<string, number>();
+    const keys = onlyKeys ?? sharesByKey.keys();
+    for (const key of keys) {
+        const share = sharesByKey.get(key);
+        if (share != null) {
+            byKey.set(key, normalizeEdgeRenderOpacity(share, maxShare, maxOpacity));
+        }
+    }
+    return byKey;
+}

client/src/shared/prediction_attribution/causal_flow/genAttributeDagPropagationPlaybackLog.ts

@@ -0,0 +1,103 @@
+/** 浏览器控制台调试前缀；过滤：`dag-prop`。 */
+const DAG_PROPAGATION_PLAYBACK_LOG = '[dag-prop]';
+
+/** playback 日志最小列宽（不足则填充；超出不截断）。 */
+export const DAG_PROP_LOG_W = {
+    event: 7,
+    frame: 6,
+    token: 10,
+    weight: 7,
+    dwell: 5,
+    focus: 10,
+    direction: 8,
+    int3: 3,
+} as const;
+
+/** localStorage：`localStorage.setItem('info_radar.dag_propagation_playback_log', '1')` */
+export const DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY = 'info_radar.dag_propagation_playback_log';
+
+export function isDagPropagationPlaybackLogEnabled(): boolean {
+    if (typeof globalThis === 'undefined') return false;
+    const g = globalThis as typeof globalThis & { __DAG_PROPAGATION_PLAYBACK_LOG__?: boolean };
+    if (g.__DAG_PROPAGATION_PLAYBACK_LOG__ === true) return true;
+    try {
+        return localStorage.getItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY) === '1';
+    } catch {
+        return false;
+    }
+}
+
+/** 控制台：`infoRadar.dagPropagationPlaybackLog(true)` */
+export function setDagPropagationPlaybackLogEnabled(enabled: boolean): void {
+    if (typeof globalThis !== 'undefined') {
+        (globalThis as typeof globalThis & { __DAG_PROPAGATION_PLAYBACK_LOG__?: boolean }).__DAG_PROPAGATION_PLAYBACK_LOG__ =
+            enabled;
+    }
+    try {
+        if (enabled) localStorage.setItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY, '1');
+        else localStorage.removeItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY);
+    } catch {
+        /* private mode / disabled storage */
+    }
+}
+
+export function logDagPropagationPlaybackLine(line: string): void {
+    if (!isDagPropagationPlaybackLogEnabled()) return;
+    console.log(`${DAG_PROPAGATION_PLAYBACK_LOG} ${line}`);
+}
+
+if (typeof window !== 'undefined') {
+    const w = window as Window & { infoRadar?: Record<string, unknown> };
+    w.infoRadar = { ...w.infoRadar, dagPropagationPlaybackLog: setDagPropagationPlaybackLogEnabled };
+}
+
+export function dagPropLogFmtToken(label: string | null): string {
+    return label ?? '?';
+}
+
+export function dagPropLogFmtWeight(w: number | undefined): string {
+    return w != null ? w.toFixed(4) : '-';
+}
+
+export function dagPropLogPad(value: string, width: number): string {
+    return value.length >= width ? value : value.padEnd(width, ' ');
+}
+
+export function dagPropLogPadInt(value: number, width: number): string {
+    const s = String(value);
+    return s.length >= width ? s : s.padStart(width, ' ');
+}
+
+export function dagPropLogPadWeight(w: number | undefined): string {
+    return dagPropLogPad(dagPropLogFmtWeight(w), DAG_PROP_LOG_W.weight);
+}
+
+export type DagPropagationPlaybackLogNodeShare = { id: string; share: number };
+
+export function nodesAtNodeShareTotalForPlaybackLog(
+    nodeShareById: ReadonlyMap<string, number>,
+    total: number,
+    options?: {
+        excludeFocusId?: string;
+        onlyNodeIds?: ReadonlySet<string>;
+    },
+): DagPropagationPlaybackLogNodeShare[] {
+    const out: DagPropagationPlaybackLogNodeShare[] = [];
+    for (const [nodeId, share] of nodeShareById) {
+        if (options?.excludeFocusId != null && nodeId === options.excludeFocusId) continue;
+        if (options?.onlyNodeIds != null && !options.onlyNodeIds.has(nodeId)) continue;
+        if (share === total) out.push({ id: nodeId, share });
+    }
+    out.sort((a, b) => a.id.localeCompare(b.id));
+    return out;
+}
+
+export function dagPropLogFmtNodeShareList(
+    entries: readonly DagPropagationPlaybackLogNodeShare[],
+    tokenLabelOf: (id: string) => string | null,
+): string {
+    if (entries.length === 0) return '-';
+    return entries
+        .map((e) => `${dagPropLogFmtToken(tokenLabelOf(e.id))}(${dagPropLogPadWeight(e.share)})`)
+        .join(', ');
+}

client/src/shared/prediction_attribution/causal_flow/genAttributeDagPropagationPlaybackPacing.ts

@@ -0,0 +1,145 @@
+/** forward prompt / backward 首帧固定停留（ms），不参与 Play speed 权重分配。 */
+export const FORWARD_PROMPT_FRAME_DWELL_MS = 500;
+
+/** 链序 running max 前瞻：lookahead = max(MIN, round(RATIO × 传播组数))。 */
+export const DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_RATIO = 0.1;
+export const DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN = 2;
+
+export function propagationRunningMaxLookaheadForGroupCount(groupCount: number): number {
+    if (groupCount <= 0) return 0;
+    return Math.max(
+        DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN,
+        Math.round(DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_RATIO * groupCount),
+    );
+}
+
+/** 与 UI「DAG replay speed」一致。 */
+export type DagReplayPacingMode = 'total' | 'step';
+
+export type DagRecursiveEdgeReplayPacing = {
+    mode: DagReplayPacingMode;
+    /**
+     * `step`：单步名义间隔（ms）。
+     * 实际间隔 = `propagationWeight × stepMs`；对权重连续，权重为 0 时恰为 0ms。
+     */
+    stepMs: number;
+    /**
+     * `total`：整段动画名义总时长（s）。
+     * 权重步从 `totalS×1000 − {@link FORWARD_PROMPT_FRAME_DWELL_MS}` 按占比分配；固定帧另计。
+     */
+    totalS: number;
+};
+
+/**
+ * **当前帧**展示完成后的停留时长（ms），再切到下一批（不含 forward prompt / backward 首帧等固定帧）。
+ *
+ * **与权重的关系**：停留时间对 `propagationWeight` 连续；权重为 0 时恰为 0（`step` 下为 0ms，不设最小间隔）。
+ *
+ * - `step`：`propagationWeight × stepMs`
+ * - `total`：`(propagationWeight / weightTotal) × (totalS×1000 − FORWARD_PROMPT_FRAME_DWELL_MS)`；
+ *   假定 `weightTotal > 0`。
+ */
+export function batchPlaybackDelayMs(
+    batch: { propagationWeight: number },
+    plan: { weightTotal: number },
+    pacing: DagRecursiveEdgeReplayPacing,
+): number {
+    const w = batch.propagationWeight;
+    if (pacing.mode === 'step') {
+        return Math.round(w * pacing.stepMs);
+    }
+    const totalWeight = plan.weightTotal;
+    const weightedBudgetMs = Math.max(0, pacing.totalS * 1000 - FORWARD_PROMPT_FRAME_DWELL_MS);
+    return Math.round((w / totalWeight) * weightedBudgetMs);
+}
+
+export type PropagationWeightGroup = { tgtIds: Iterable<string> };
+
+export type PropagationGroupPrep = {
+    propagationWeight: number;
+    runningMaxNorm: number;
+    shareNorm?: number;
+};
+
+function summarizePropagationGroup(
+    group: PropagationWeightGroup,
+    nodeShareById: ReadonlyMap<string, number>,
+    focusId: string,
+): { hasFocus: boolean; nonFocusGroupShare: number } {
+    let hasFocus = false;
+    let nonFocusGroupShare = 0;
+    for (const tgtId of group.tgtIds) {
+        if (tgtId === focusId) {
+            hasFocus = true;
+            continue;
+        }
+        const share = nodeShareById.get(tgtId) ?? 0;
+        if (share > nonFocusGroupShare) nonFocusGroupShare = share;
+    }
+    return { hasFocus, nonFocusGroupShare };
+}
+
+function maxShareNormInRunningMaxLookaheadWindow(
+    shareNormPacing: readonly number[],
+    startIndex: number,
+    lookahead: number,
+): number {
+    let windowMax = 0;
+    const end = Math.min(shareNormPacing.length - 1, startIndex + lookahead);
+    for (let j = startIndex; j <= end; j++) {
+        windowMax = Math.max(windowMax, shareNormPacing[j] ?? 0);
+    }
+    return windowMax;
+}
+
+/**
+ * 文序准备：非焦点 `weightMax` → share_norm pacing → running max（含 lookahead）→ `propagationWeight`。
+ * 含焦点的组无 `shareNorm`（pacing 仍用非焦点 share，通常为 0）。
+ */
+export function computePropagationGroupPacings(
+    groups: readonly PropagationWeightGroup[],
+    nodeShareById: ReadonlyMap<string, number>,
+    focusId: string,
+): {
+    groupPreps: PropagationGroupPrep[];
+    weightMax: number;
+    weightTotal: number;
+    runningMaxLookahead: number;
+} {
+    const groupSummaries = groups.map((group) =>
+        summarizePropagationGroup(group, nodeShareById, focusId),
+    );
+
+    let weightMax = 0;
+    for (const { nonFocusGroupShare } of groupSummaries) {
+        if (nonFocusGroupShare > weightMax) weightMax = nonFocusGroupShare;
+    }
+
+    const invWeightMax = weightMax > 0 ? 1 / weightMax : 0;
+    const shareNormPacing = groupSummaries.map(
+        ({ nonFocusGroupShare }) => nonFocusGroupShare * invWeightMax,
+    );
+    const runningMaxLookahead = propagationRunningMaxLookaheadForGroupCount(groups.length);
+
+    const groupPreps: PropagationGroupPrep[] = [];
+    let runningMaxNorm = 0;
+    let weightTotal = 0;
+
+    for (let i = 0; i < groups.length; i++) {
+        const { hasFocus } = groupSummaries[i]!;
+        const shareNorm = shareNormPacing[i]!;
+        runningMaxNorm = Math.max(
+            runningMaxNorm,
+            maxShareNormInRunningMaxLookaheadWindow(shareNormPacing, i, runningMaxLookahead),
+        );
+        const propagationWeight = runningMaxNorm > 0 ? shareNorm / runningMaxNorm : 0;
+        weightTotal += propagationWeight;
+        groupPreps.push({
+            propagationWeight,
+            runningMaxNorm,
+            ...(hasFocus ? {} : { shareNorm: shareNorm }),
+        });
+    }
+
+    return { groupPreps, weightMax, weightTotal, runningMaxLookahead };
+}

client/src/shared/prediction_attribution/causal_flow/genAttributeDagRecursiveEdgeAnimation.ts

@@ -1,27 +1,44 @@
 import { DAG_MIN_ATTRIBUTION_SHARE } from './genAttributeDagEdgeDisplay';
+import {
+    DAG_PROP_LOG_W,
+    dagPropLogFmtNodeShareList,
+    dagPropLogFmtToken,
+    dagPropLogFmtWeight,
+    dagPropLogPad,
+    dagPropLogPadInt,
+    dagPropLogPadWeight,
+    logDagPropagationPlaybackLine,
+    nodesAtNodeShareTotalForPlaybackLog,
+} from './genAttributeDagPropagationPlaybackLog';
+import {
+    batchPlaybackDelayMs,
+    computePropagationGroupPacings,
+    FORWARD_PROMPT_FRAME_DWELL_MS,
+    type DagRecursiveEdgeReplayPacing,
+    type DagReplayPacingMode,
+    type PropagationGroupPrep,
+} from './genAttributeDagPropagationPlaybackPacing';
+
+export type { DagRecursiveEdgeReplayPacing, DagReplayPacingMode } from './genAttributeDagPropagationPlaybackPacing';
+export {
+    batchPlaybackDelayMs,
+    computePropagationGroupPacings,
+    DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN,
+    DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_RATIO,
+    FORWARD_PROMPT_FRAME_DWELL_MS,
+    propagationRunningMaxLookaheadForGroupCount,
+} from './genAttributeDagPropagationPlaybackPacing';
+export {
+    DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY,
+    isDagPropagationPlaybackLogEnabled,
+    setDagPropagationPlaybackLogEnabled,
+} from './genAttributeDagPropagationPlaybackLog';
 
 export type DagRecursiveEdgeAnimationDirection = 'backward' | 'forward';
 
 /** forward 专有第 0 帧：仅 prompt（稳态描边/归一），无传播链边。 */
 export const FORWARD_PROMPT_BATCH_INDEX = -1;
 
-/** forward prompt 第 0 帧固定停留（ms），不参与 Play speed 权重分配。 */
-const FORWARD_PROMPT_FRAME_DWELL_MS = 500;
-
-/** 链序 running max 前瞻：lookahead = max(MIN, round(RATIO × 传播层数))。 */
-//决定了动画前期的播放速度，值越小，前面部分播放速度越慢
-export const DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_RATIO = 0.1;
-export const DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN = 2;
-
-/** 与 {@link computePropagationLayerPacings} 一致：按层数算向后看的层数。 */
-export function propagationRunningMaxLookaheadForLayerCount(layerCount: number): number {
-    if (layerCount <= 0) return 0;
-    return Math.max(
-        DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN,
-        Math.round(DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_RATIO * layerCount),
-    );
-}
-
 /** forward {@link FORWARD_PROMPT_BATCH_INDEX} 帧：仅展示 prompt，外观与稳态一致。 */
 export function isForwardPromptOnlyBatchIndex(
     direction: DagRecursiveEdgeAnimationDirection,
@@ -45,7 +62,7 @@ export type DagFocusAttributionComputeOptions = {
 };
 
 export type DagFocusAttributionGraphContext = {
-    nodesSortedByStepDesc: readonly { id: string }[];
+    nodesSortedByStepDesc: readonly { id: string; step: number }[];
     incomingLinksByTarget: ReadonlyMap<string, readonly unknown[]>;
 };
 
@@ -63,124 +80,6 @@ type ComputeSteadyStateStayShareByIdFn = (
 /** 无 {@link CreateDagRecursiveEdgeAnimationControllerOptions.getReplayPacing} 时的兜底 step 间隔（ms）。 */
 const DAG_RECURSIVE_EDGE_BATCH_STEP_MS_FALLBACK = 500;
 
-/** 浏览器控制台调试前缀；过滤：`dag-prop`。 */
-const DAG_PROPAGATION_PLAYBACK_LOG = '[dag-prop]';
-
-/** playback 日志最小列宽（不足则填充；超出不截断）。 */
-const DAG_PROP_LOG_W = {
-    event: 7,
-    frame: 6,
-    token: 10,
-    weight: 7,
-    dwell: 5,
-    focus: 10,
-    direction: 8,
-    int3: 3,
-} as const;
-
-/** localStorage：`localStorage.setItem('info_radar.dag_propagation_playback_log', '1')` */
-export const DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY = 'info_radar.dag_propagation_playback_log';
-
-export function isDagPropagationPlaybackLogEnabled(): boolean {
-    if (typeof globalThis === 'undefined') return false;
-    const g = globalThis as typeof globalThis & { __DAG_PROPAGATION_PLAYBACK_LOG__?: boolean };
-    if (g.__DAG_PROPAGATION_PLAYBACK_LOG__ === true) return true;
-    try {
-        return localStorage.getItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY) === '1';
-    } catch {
-        return false;
-    }
-}
-
-/** 控制台：`infoRadar.dagPropagationPlaybackLog(true)` */
-export function setDagPropagationPlaybackLogEnabled(enabled: boolean): void {
-    if (typeof globalThis !== 'undefined') {
-        (globalThis as typeof globalThis & { __DAG_PROPAGATION_PLAYBACK_LOG__?: boolean }).__DAG_PROPAGATION_PLAYBACK_LOG__ =
-            enabled;
-    }
-    try {
-        if (enabled) localStorage.setItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY, '1');
-        else localStorage.removeItem(DAG_PROPAGATION_PLAYBACK_LOG_LS_KEY);
-    } catch {
-        /* private mode / disabled storage */
-    }
-}
-
-function playbackLogLine(line: string): void {
-    if (!isDagPropagationPlaybackLogEnabled()) return;
-    console.log(`${DAG_PROPAGATION_PLAYBACK_LOG} ${line}`);
-}
-
-if (typeof window !== 'undefined') {
-    const w = window as Window & { infoRadar?: Record<string, unknown> };
-    w.infoRadar = { ...w.infoRadar, dagPropagationPlaybackLog: setDagPropagationPlaybackLogEnabled };
-}
-
-function playbackFmtToken(label: string | null): string {
-    return label ?? '?';
-}
-
-function playbackFmtWeight(w: number | undefined): string {
-    return w != null ? w.toFixed(4) : '-';
-}
-
-function playbackPad(value: string, width: number): string {
-    return value.length >= width ? value : value.padEnd(width, ' ');
-}
-
-function playbackPadInt(value: number, width: number): string {
-    const s = String(value);
-    return s.length >= width ? s : s.padStart(width, ' ');
-}
-
-function playbackPadWeight(w: number | undefined): string {
-    return playbackPad(playbackFmtWeight(w), DAG_PROP_LOG_W.weight);
-}
-
-function playbackFmtNodeShareList(
-    entries: readonly NodeShareEntry[],
-    tokenLabelOf: (id: string) => string | null,
-): string {
-    if (entries.length === 0) return '-';
-    return entries
-        .map((e) => `${playbackFmtToken(tokenLabelOf(e.id))}(${playbackFmtWeight(e.share)})`)
-        .join(', ');
-}
-
-/** 与 UI「DAG replay speed」一致。 */
-export type DagReplayPacingMode = 'total' | 'step';
-
-export type DagRecursiveEdgeReplayPacing = {
-    mode: DagReplayPacingMode;
-    /** `step`：单步名义间隔（ms），实际间隔 = `propagationWeight × stepMs`。 */
-    stepMs: number;
-    /** `total`：整段动画名义总时长（s），各步按权重占比分配。 */
-    totalS: number;
-};
-
-/**
- * **当前帧**展示完成后的停留时长（ms），再切到下一批。
- * - `step`：`propagationWeight × stepMs`
- * - `total`：`(propagationWeight / weightTotal) × totalS`（权重全 0 时均分 `totalS`）
- */
-export function batchPlaybackDelayMs(
-    batch: DagRecursiveIncomingEdgeBatch,
-    plan: Pick<DagPropagationPlaybackPlan, 'batches' | 'weightTotal'>,
-    pacing: DagRecursiveEdgeReplayPacing,
-): number {
-    const w = batch.propagationWeight;
-    if (pacing.mode === 'step') {
-        return Math.round(w * pacing.stepMs);
-    }
-    const totalWeight = plan.weightTotal;
-    const totalMs = pacing.totalS * 1000;
-    if (totalWeight <= 0) {
-        const intervalCount = Math.max(0, plan.batches.length - 1);
-        return intervalCount > 0 ? Math.round(totalMs / intervalCount) : 0;
-    }
-    return Math.round((w / totalWeight) * totalMs);
-}
-
 /**
  * 仅用于「Propagated attribution mode」焦点入边的分批显示状态。
  * 两方向均按 `start(tgt)` 分批；backward 从高 tgt 向低 tgt 播放（贴合向上追溯），forward 反向。
@@ -192,38 +91,45 @@ export function batchPlaybackDelayMs(
  * **forward**
  * - 第 0 帧 {@link FORWARD_PROMPT_BATCH_INDEX}：无传播链边，仅 prompt 节点按稳态 stay 描边/归一；固定停留 {@link FORWARD_PROMPT_FRAME_DWELL_MS}ms。
  * - 其后从最远 batch 递减；share 始终用全量焦点快照，动画只改「可见边集合」与归一分母（前沿内 max share）。
+ * - 部分帧内焦点不提前高亮/描边（render 延后至末帧 `batchIndex === 0` 稳态），与反向首帧才亮焦点对称。
  * - 同一帧内，已可见边的相对强弱 = share 相对强弱；绝对 opacity 可因分母随新批次变大而变暗。
  * - 末帧 `batchIndex === 0` 时前沿 = 全链、分母 = 全链 max、可见性全开，与无动画稳定态数值一致（收敛）。
  *
  * **backward**
- * - 首帧 `batchIndex === 0`（焦点侧）：固定停留 {@link FORWARD_PROMPT_FRAME_DWELL_MS}ms，与 forward prompt 首帧一致，不参与权重分配。
- * - 部分帧沿前沿重算 share（部分快照）；节点 stay 用 live partial，与 forward 仅门控可见性不同。
- * - 节点描边 opacity：分子 live partial stay，分母稳定态 `max(stay)`（与蓝边用全链 max 一致），避免 prompt 等过早顶满。
+ * - 首帧 `batchIndex === 0`（焦点侧）：固定停留 {@link FORWARD_PROMPT_FRAME_DWELL_MS}ms，焦点红色 slide；与 forward prompt 首帧对称，不参与权重分配。
+ * - 蓝线从焦点侧逐批显现：稳态 share + {@link backwardFrontierByBatchIndex} 门控（`batches[0..i]` 递增）。
+ * - 未滑过：live stay；已滑过 batch：稳态 stay；非播放链生成 token 不描边；prompt（`step === -1`）若在候选集中则用 live stay（可不在传播链上）。
+ * - 描边分母为稳态 `max(stay)`。
+ * - 当前帧 slide 节点（`--backward-slide`）的入边：红色，强度在本批指向 slide 的入边集合内 max 归一 × 焦点 MI。
  *
  * **播放计划（见 {@link DagPropagationPlaybackPlan}）**
- * - 一批 = 同一生成 offset 的入边层；`layerOffset` + `tgtId` 标识该层 token。
- * - 播放间隔权重（准备阶段一遍）：按**文字顺序**对非焦点 `layerShare/weightMax` 做 running max 归一化；向后看层数 = max({@link DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN}, round(比例×层数))；与播放方向无关。层内含焦点则无 `shareNorm`。
- * - `backwardFrontierByBatchIndex` / `forwardFrontierByBatchIndex`：各 batchIndex 下可见边并集，render 热路径 O(1)。
+ * - 一批 = 同一生成 offset 的入边组；`groupOffset` + `tgtId` 标���该组代表 token。
+ * - 播放间隔权重（准备阶段一遍）：按**文字顺序**对非焦点 `groupShare/weightMax` 做 running max 归一化；向后看组数 = max({@link DAG_PROPAGATION_WEIGHT_RUNNING_MAX_LOOKAHEAD_MIN}, round(比例×组数))；与播放方向无关。组内含焦点则无 `shareNorm`。
+ * - `backwardFrontierByBatchIndex` / `forwardFrontierByBatchIndex`：各方向蓝线可见边并集，render 热路径 O(1)。
  * - forward / backward 共用同一 plan；不用 backward 部分快照的 nodeShare 定权重。
+ *
+ * **播放停留（见 {@link batchPlaybackDelayMs}）**
+ * - 对 `propagationWeight` 连续；权重为 0 时停留恰为 0（`step` 下 0ms，不设最小间隔）。
+ * - `total` 模式：UI `totalS` 中预留 {@link FORWARD_PROMPT_FRAME_DWELL_MS} 给 forward prompt / backward 首帧，其余按权重分配。
  */
-/** 传播链动画的一批：同一生成 offset 的入边层 + 层元数据。 */
+/** 传播链动画的一批：同一生成 offset 的入边组 + 播放元数据。 */
 export type DagRecursiveIncomingEdgeBatch = {
-    /** 与 {@link buildPropagationPlaybackPlan} 分批键一致。 */
-    layerOffset: number;
-    /** 本层代表 token（forward 高亮）。 */
+    /** 与 {@link buildPropagationPlaybackPlan} 分批键一致（`start(tgt)`）。 */
+    groupOffset: number;
+    /** 本组代表 token（forward 高亮）。 */
     tgtId: string;
-    /** 本层传播链入边（`src->tgt`）。 */
+    /** 本组传播链入边（`src->tgt`）。 */
     edgeKeys: string[];
     /**
      * 文字顺序局部归一化权重：share_norm ÷ runningMax(含向后 lookahead 窗口内的非焦点 share_norm)。
      */
     propagationWeight: number;
     /**
-     * 非焦点 `layerShare / weightMax`（playback 日志 share_norm）。
-     * 层内含焦点时为 undefined。
+     * 非焦点 `groupShare / weightMax`（playback 日志 share_norm）。
+     * 组内含焦点时为 undefined。
      */
     shareNorm?: number;
-    /** 准备阶段：截至本层（含 lookahead 窗口）的链序 running max。 */
+    /** 准备阶段：截至本组（含 lookahead 窗口）的链序 running max。 */
     runningMaxNorm: number;
 };
 
@@ -231,11 +137,11 @@ export type DagRecursiveIncomingEdgeBatch = {
 export type DagPropagationPlaybackPlan = {
     focusId: string;
     batches: DagRecursiveIncomingEdgeBatch[];
-    /** 全链非焦点层 Total share 上限（日志 / 对照；量纲同 Total share）。 */
+    /** 全链非焦点组 Total share 上限（日志 / 对照；量纲同 Total share）。 */
     weightMax: number;
     /** Σ `batches[].propagationWeight`；total 模式分母。 */
     weightTotal: number;
-    /** 本计划 running max 前瞻层数（max(MIN, round(比例×层数))）。 */
+    /** 本计划 running max 前瞻组数（max(MIN, round(比例×组数))）。 */
     runningMaxLookahead: number;
     /** backward：`batchIndex = i` 时可见边 = `batches[0..i]` 并集。 */
     backwardFrontierByBatchIndex: ReadonlyArray<ReadonlySet<string>>;
@@ -258,6 +164,22 @@ export function tgtIdFromEdgeKey(edgeKey: string): string | null {
 
 const EMPTY_EDGE_KEY_SET: ReadonlySet<string> = new Set();
 
+/** backward 当前批：指向 slide 节点的入边（与全图按 tgt 筛等价，仅扫本批 edgeKeys）。 */
+export function backwardSlideIncomingEdgeKeysForBatch(
+    plan: DagPropagationPlaybackPlan,
+    batchIndex: number,
+    focusId: string,
+): ReadonlySet<string> {
+    const batch = plan.batches[batchIndex];
+    if (batch == null) return EMPTY_EDGE_KEY_SET;
+    const slideTgtId = batchIndex === 0 ? focusId : batch.tgtId;
+    const keys = new Set<string>();
+    for (const key of batch.edgeKeys) {
+        if (tgtIdFromEdgeKey(key) === slideTgtId) keys.add(key);
+    }
+    return keys;
+}
+
 /** 当前 batchIndex、方向下已启用的传播链入边（计划内预计算）。 */
 function frontierEdgeKeysAtBatch(
     plan: DagPropagationPlaybackPlan,
@@ -272,7 +194,7 @@ function frontierEdgeKeysAtBatch(
     return table[batchIndex] ?? EMPTY_EDGE_KEY_SET;
 }
 
-function maxShareInEdgeKeySet(
+export function maxShareInEdgeKeySet(
     incomingEdgeShareByKey: Map<string, number>,
     edgeKeys: ReadonlySet<string>,
 ): number {
@@ -330,7 +252,7 @@ export function isRecursiveEdgeAnimationFrontierPartial(
         if (lastBatch <= 0) return false;
         return animation.batchIndex < lastBatch;
     }
-    // forward：末帧 batchIndex===0 为稳态；含 prompt 第 0 帧（-1）与其余部分帧
+    // forward：batchIndex===0 为稳态终帧；其余含 prompt(-1) 均属「动画未结束」（边/焦点行为由专帧 flag 区分）
     return animation.batchIndex !== 0;
 }
 
@@ -345,27 +267,6 @@ function isBackwardRecursiveEdgeAnimationInProgress(
     );
 }
 
-type NodeShareEntry = { id: string; share: number };
-
-function nodesAtNodeShareTotal(
-    nodeShareById: ReadonlyMap<string, number>,
-    total: number,
-    options?: {
-        excludeFocusId?: string;
-        /** 若设，仅保留该集合内的节点。 */
-        onlyNodeIds?: ReadonlySet<string>;
-    },
-): NodeShareEntry[] {
-    const out: NodeShareEntry[] = [];
-    for (const [nodeId, share] of nodeShareById) {
-        if (options?.excludeFocusId != null && nodeId === options.excludeFocusId) continue;
-        if (options?.onlyNodeIds != null && !options.onlyNodeIds.has(nodeId)) continue;
-        if (share === total) out.push({ id: nodeId, share });
-    }
-    out.sort((a, b) => a.id.localeCompare(b.id));
-    return out;
-}
-
 function tgtIdsInBatch(batch: DagRecursiveIncomingEdgeBatch): Set<string> {
     const ids = new Set<string>();
     for (const edgeKey of batch.edgeKeys) {
@@ -375,106 +276,14 @@ function tgtIdsInBatch(batch: DagRecursiveIncomingEdgeBatch): Set<string> {
     return ids;
 }
 
-type PropagationWeightLayer = { tgtIds: Iterable<string> };
-
-/** 文序单层：pacing 权重 + 日志字段（与 {@link computePropagationLayerPacings} 一致）。 */
-type PropagationLayerPrep = {
-    propagationWeight: number;
-    runningMaxNorm: number;
-    shareNorm?: number;
-};
-
-function summarizePropagationLayer(
-    layer: PropagationWeightLayer,
-    nodeShareById: ReadonlyMap<string, number>,
-    focusId: string,
-): { hasFocus: boolean; nonFocusLayerShare: number } {
-    let hasFocus = false;
-    let nonFocusLayerShare = 0;
-    for (const tgtId of layer.tgtIds) {
-        if (tgtId === focusId) {
-            hasFocus = true;
-            continue;
-        }
-        const share = nodeShareById.get(tgtId) ?? 0;
-        if (share > nonFocusLayerShare) nonFocusLayerShare = share;
-    }
-    return { hasFocus, nonFocusLayerShare };
-}
-
-function maxShareNormInRunningMaxLookaheadWindow(
-    shareNormPacing: readonly number[],
-    startIndex: number,
-    lookahead: number,
-): number {
-    let windowMax = 0;
-    const end = Math.min(shareNormPacing.length - 1, startIndex + lookahead);
-    for (let j = startIndex; j <= end; j++) {
-        windowMax = Math.max(windowMax, shareNormPacing[j] ?? 0);
-    }
-    return windowMax;
-}
-
-/**
- * 文序准备：非焦点 `weightMax` → share_norm pacing → running max（含 lookahead）→ `propagationWeight`。
- * 含焦点的层无 `shareNorm`（pacing 仍用非焦点 share，通常为 0）。
- */
-function computePropagationLayerPacings(
-    layers: readonly PropagationWeightLayer[],
-    nodeShareById: ReadonlyMap<string, number>,
-    focusId: string,
-): {
-    layerPreps: PropagationLayerPrep[];
-    weightMax: number;
-    weightTotal: number;
-    runningMaxLookahead: number;
-} {
-    const layerSummaries = layers.map((layer) =>
-        summarizePropagationLayer(layer, nodeShareById, focusId),
-    );
-
-    let weightMax = 0;
-    for (const { nonFocusLayerShare } of layerSummaries) {
-        if (nonFocusLayerShare > weightMax) weightMax = nonFocusLayerShare;
-    }
-
-    const invWeightMax = weightMax > 0 ? 1 / weightMax : 0;
-    const shareNormPacing = layerSummaries.map(
-        ({ nonFocusLayerShare }) => nonFocusLayerShare * invWeightMax,
-    );
-    const runningMaxLookahead = propagationRunningMaxLookaheadForLayerCount(layers.length);
-
-    const layerPreps: PropagationLayerPrep[] = [];
-    let runningMaxNorm = 0;
-    let weightTotal = 0;
-
-    for (let i = 0; i < layers.length; i++) {
-        const { hasFocus } = layerSummaries[i]!;
-        const shareNorm = shareNormPacing[i]!;
-        runningMaxNorm = Math.max(
-            runningMaxNorm,
-            maxShareNormInRunningMaxLookaheadWindow(shareNormPacing, i, runningMaxLookahead),
-        );
-        const propagationWeight = runningMaxNorm > 0 ? shareNorm / runningMaxNorm : 0;
-        weightTotal += propagationWeight;
-        layerPreps.push({
-            propagationWeight,
-            runningMaxNorm,
-            ...(hasFocus ? {} : { shareNorm: shareNorm }),
-        });
-    }
-
-    return { layerPreps, weightMax, weightTotal, runningMaxLookahead };
-}
-
 function batchesInTextOrder(
     batches: readonly DagRecursiveIncomingEdgeBatch[],
 ): DagRecursiveIncomingEdgeBatch[] {
-    return [...batches].sort((a, b) => a.layerOffset - b.layerOffset);
+    return [...batches].sort((a, b) => a.groupOffset - b.groupOffset);
 }
 
-/** 层内代表 tgt；并列时取 id 字典序最小。 */
-function primaryTgtIdForLayer(
+/** 组内代表 tgt；并列时取 id 字典序最小。 */
+function primaryTgtIdForGroup(
     tgtIds: Iterable<string>,
     nodeShareById: ReadonlyMap<string, number>,
 ): string {
@@ -490,17 +299,17 @@ function primaryTgtIdForLayer(
     return bestId;
 }
 
-function incomingEdgeBatchFromLayer(
-    layerOffset: number,
-    layer: { edgeKeys: string[]; tgtIds: Set<string> },
-    prep: PropagationLayerPrep,
+function incomingEdgeBatchFromGroup(
+    groupOffset: number,
+    group: { edgeKeys: string[]; tgtIds: Set<string> },
+    prep: PropagationGroupPrep,
     nodeShareById: ReadonlyMap<string, number>,
 ): DagRecursiveIncomingEdgeBatch {
-    layer.edgeKeys.sort();
+    group.edgeKeys.sort();
     return {
-        layerOffset,
-        tgtId: primaryTgtIdForLayer(layer.tgtIds, nodeShareById),
-        edgeKeys: layer.edgeKeys,
+        groupOffset,
+        tgtId: primaryTgtIdForGroup(group.tgtIds, nodeShareById),
+        edgeKeys: group.edgeKeys,
         propagationWeight: prep.propagationWeight,
         runningMaxNorm: prep.runningMaxNorm,
         ...(prep.shareNorm != null ? { shareNorm: prep.shareNorm } : {}),
@@ -511,19 +320,17 @@ function buildFrontierEdgeKeysByBatchIndex(
     batches: readonly DagRecursiveIncomingEdgeBatch[],
 ): Pick<DagPropagationPlaybackPlan, 'backwardFrontierByBatchIndex' | 'forwardFrontierByBatchIndex'> {
     const n = batches.length;
-    const backward: Set<string>[] = Array.from({ length: n }, () => new Set<string>());
-    const forward: Set<string>[] = Array.from({ length: n }, () => new Set<string>());
+    const backward: Set<string>[] = [];
+    const forward: Set<string>[] = [];
 
     for (let i = 0; i < n; i++) {
-        if (i > 0) {
-            for (const key of backward[i - 1]!) backward[i]!.add(key);
-        }
+        const prev = backward[i - 1];
+        backward.push(new Set(prev));
         for (const key of batches[i]!.edgeKeys) backward[i]!.add(key);
     }
     for (let i = n - 1; i >= 0; i--) {
-        if (i < n - 1) {
-            for (const key of forward[i + 1]!) forward[i]!.add(key);
-        }
+        const next = forward[i + 1];
+        forward[i] = new Set(next);
         for (const key of batches[i]!.edgeKeys) forward[i]!.add(key);
     }
 
@@ -532,7 +339,7 @@ function buildFrontierEdgeKeysByBatchIndex(
 
 /**
  * 传播链播放计划：入边按 `start(tgt)` 分批（offset 降序），并预计算双向前沿。
- * backward 从 index 0 递增，forward 从末批递减。
+ * backward 从 index 0 递增（蓝线递增），forward 从末批递减（蓝线递增）。
  */
 export function buildPropagationPlaybackPlan(
     incomingEdgeShareByKey: Map<string, number>,
@@ -547,25 +354,26 @@ export function buildPropagationPlaybackPlan(
         const tgtId = tgtIdFromEdgeKey(edgeKey);
         if (tgtId == null) continue;
         const offset = offsetOf(tgtId);
-        let layer = byOffset.get(offset);
-        if (layer == null) {
-            layer = { edgeKeys: [], tgtIds: new Set() };
-            byOffset.set(offset, layer);
+        let group = byOffset.get(offset);
+        if (group == null) {
+            group = { edgeKeys: [], tgtIds: new Set() };
+            byOffset.set(offset, group);
         }
-        layer.edgeKeys.push(edgeKey);
-        layer.tgtIds.add(tgtId);
+        group.edgeKeys.push(edgeKey);
+        group.tgtIds.add(tgtId);
     }
 
     const sortedOffsetsAsc = [...byOffset.keys()].sort((a, b) => a - b);
     const sortedOffsetsDesc = [...sortedOffsetsAsc].reverse();
-    const { layerPreps, weightMax, weightTotal, runningMaxLookahead } = computePropagationLayerPacings(
-        sortedOffsetsAsc.map((layerOffset) => byOffset.get(layerOffset)!),
+    const { groupPreps, weightMax, weightTotal, runningMaxLookahead } = computePropagationGroupPacings(
+        sortedOffsetsAsc.map((groupOffset) => byOffset.get(groupOffset)!),
         nodeShareById,
         focusId,
     );
-    const batches: DagRecursiveIncomingEdgeBatch[] = sortedOffsetsDesc.map((layerOffset, j) => {
-        const prep = layerPreps[sortedOffsetsAsc.length - 1 - j]!;
-        return incomingEdgeBatchFromLayer(layerOffset, byOffset.get(layerOffset)!, prep, nodeShareById);
+    // groupPreps 按文序 ASC；batches 按播放序 DESC（远→近），故播放序下标 j 对应文序下标 n-1-j
+    const batches: DagRecursiveIncomingEdgeBatch[] = sortedOffsetsDesc.map((groupOffset, j) => {
+        const prep = groupPreps[sortedOffsetsAsc.length - 1 - j]!;
+        return incomingEdgeBatchFromGroup(groupOffset, byOffset.get(groupOffset)!, prep, nodeShareById);
     });
 
     return {
@@ -579,8 +387,8 @@ export function buildPropagationPlaybackPlan(
 }
 
 /**
- * 动画前沿处的归因快照：backward 部分态沿前沿边集追溯；
- * forward 仍用全量（边可见性由 {@link frontierEdgeKeysAtBatch} 预计算前沿单独控制）。
+ * backward 节点 stay 用：沿 {@link backwardFrontierByBatchIndex}（与蓝线同前沿）重算部分快照。
+ * 蓝边不经过此函数（与 forward 一样用全量 share + 前沿门控）。
  */
 function resolveFocusAttributionAtFrontier(
     focusId: string,
@@ -617,7 +425,38 @@ function resolveFocusAttributionAtFrontier(
     return partial ?? fullState;
 }
 
-/** 传播模式描边：backward 动画进行中用部分快照的有效 stay，否则稳定态 stay。 */
+function passedBatchTgtIdsBeforeIndex(
+    batches: readonly DagRecursiveIncomingEdgeBatch[],
+    batchIndex: number,
+): Set<string> {
+    const ids = new Set<string>();
+    for (let i = 0; i < batchIndex; i++) {
+        for (const id of tgtIdsInBatch(batches[i]!)) ids.add(id);
+    }
+    return ids;
+}
+
+/** 播放计划传播链上的全部 tgt（含同 offset 非代表 token）。 */
+function playbackChainNodeIds(batches: readonly DagRecursiveIncomingEdgeBatch[]): Set<string> {
+    const onChain = new Set<string>();
+    for (const batch of batches) {
+        for (const id of tgtIdsInBatch(batch)) onChain.add(id);
+    }
+    return onChain;
+}
+
+function promptNodeIdsFromCtx(ctx: DagFocusAttributionGraphContext): Set<string> {
+    const ids = new Set<string>();
+    for (const n of ctx.nodesSortedByStepDesc) {
+        if (n.step === -1) ids.add(n.id);
+    }
+    return ids;
+}
+
+/**
+ * 传播模式描边：backward 动画进行中，未滑过 batch 用 live stay；
+ * 已滑过 batch 用稳态 stay；候选中的 prompt 用 live（可不在链上）；其余链外生成 token 不描边。
+ */
 function resolveEffectiveStayShareByIdForStroke(
     focusState: DagFocusAttributionState,
     focusId: string,
@@ -629,6 +468,7 @@ function resolveEffectiveStayShareByIdForStroke(
     if (!isBackwardRecursiveEdgeAnimationInProgress(animation, focusId)) {
         return computeSteadyStateStayShareById(focusState.nodeShareById, focusId);
     }
+    // ① 与蓝线同前沿的部分快照 → live stay 池
     const atFrontier = resolveFocusAttributionAtFrontier(
         focusId,
         focusState,
@@ -636,19 +476,35 @@ function resolveEffectiveStayShareByIdForStroke(
         computeFocusState,
         ctx,
     );
-    return computeLivePartialStayShareById(
+    const liveById = computeLivePartialStayShareById(
         atFrontier.nodeShareById,
         atFrontier.incomingEdgeShareByKey,
         focusId,
     );
+    // ② 全链稳态 stay 池（已滑过 batch 用）
+    const steadyById = computeSteadyStateStayShareById(focusState.nodeShareById, focusId);
+    const batches = animation!.plan.batches;
+    const batchIndex = animation!.batchIndex;
+    const passedTgtIds = passedBatchTgtIdsBeforeIndex(batches, batchIndex);
+    const onChain = playbackChainNodeIds(batches);
+    const promptIds = promptNodeIdsFromCtx(ctx);
+    // ③ 合并候选：未滑过→live，已滑过→steady；仅链上或 prompt
+    const strokeCandidates = new Set([...liveById.keys(), ...passedTgtIds]);
+    const byNodeId = new Map<string, number>();
+    for (const nodeId of strokeCandidates) {
+        if (!onChain.has(nodeId) && !promptIds.has(nodeId)) continue;
+        const stay = passedTgtIds.has(nodeId) ? steadyById.get(nodeId) : liveById.get(nodeId);
+        if (stay != null && stay >= DAG_MIN_ATTRIBUTION_SHARE) byNodeId.set(nodeId, stay);
+    }
+    return byNodeId;
 }
 
 export type RecursiveEdgeAnimationRenderOverlay = {
     animationFrontierPartial: boolean;
     anim: DagEdgeBatchAnimationState | null;
     frontierEdgeKeys: ReadonlySet<string> | null;
+    /** 与 focusState 同引用；入边 share 恒为全量，可见性由 frontier / edgeVisibility 裁切。 */
     linkFocusState: DagFocusAttributionState | null;
-    displayFocusState: DagFocusAttributionState | null;
     nodeStrokeShareById: Map<string, number> | null;
     /** backward 部分帧：稳定态 stay 池 max，供描边归一分母；否则 undefined 用当前池 max。 */
     nodeStrokeMaxForRender?: number;
@@ -656,12 +512,29 @@ export type RecursiveEdgeAnimationRenderOverlay = {
     incomingMaxForRender: number;
     /** forward {@link FORWARD_PROMPT_BATCH_INDEX}：仅 prompt 稳态描边，无链边、无 slide 高亮。 */
     forwardPromptOnlyFrame: boolean;
-    forwardSlideTgtId: string | null;
+    /** 当前帧 slide token：forward 为 batch 代表；backward 首帧为焦点。不含 forward prompt 专帧。 */
+    propagationSlideTgtId: string | null;
+    /** 正向传播部分帧：焦点不提前全亮（末帧 partial 结束即恢复）。 */
+    deferFocusHighlightDuringAnim: boolean;
+    /** 传播部分帧：不为焦点挂 `--selected` 描边（正向全程；反向仅 slide=焦点时）。 */
+    suppressFocusSelectedStroke: boolean;
     edgeVisibility(edgeKey: string, inPropagationChain: boolean): number;
 };
 
 const INACTIVE_EDGE_VISIBILITY = (_edgeKey: string, _inPropagationChain: boolean): number => 1;
 
+/** backward 首帧 slide = 焦点；forward prompt 专帧和无动画 = null；其余 = 当前批代表 token。 */
+function resolvePropagationSlideTgtId(
+    anim: DagEdgeBatchAnimationState | null,
+    animationFrontierPartial: boolean,
+    forwardPromptOnlyFrame: boolean,
+    focusId: string,
+): string | null {
+    if (anim == null || !animationFrontierPartial || forwardPromptOnlyFrame) return null;
+    if (anim.direction === 'backward' && anim.batchIndex === 0) return focusId;
+    return anim.plan.batches[anim.batchIndex]?.tgtId ?? null;
+}
+
 export function resolveRecursiveEdgeAnimationRenderOverlay(args: {
     effectiveFocusId: string | null;
     focusState: DagFocusAttributionState | null;
@@ -703,12 +576,13 @@ export function resolveRecursiveEdgeAnimationRenderOverlay(args: {
             anim: null,
             frontierEdgeKeys: null,
             linkFocusState: focusState,
-            displayFocusState: focusState,
             nodeStrokeShareById,
             incomingShareForRender: focusState?.incomingEdgeShareByKey ?? emptyIncoming,
             incomingMaxForRender: maxHighlightEdgeShare(focusState?.incomingEdgeShareByKey ?? emptyIncoming),
             forwardPromptOnlyFrame: false,
-            forwardSlideTgtId: null,
+            propagationSlideTgtId: null,
+            deferFocusHighlightDuringAnim: false,
+            suppressFocusSelectedStroke: false,
             edgeVisibility: INACTIVE_EDGE_VISIBILITY,
         };
     }
@@ -721,15 +595,6 @@ export function resolveRecursiveEdgeAnimationRenderOverlay(args: {
         animationFrontierPartial && anim != null
             ? frontierEdgeKeysAtBatch(anim.plan, anim.direction, anim.batchIndex)
             : null;
-    const displayFocusState = resolveFocusAttributionAtFrontier(
-        userAnimationFocusId,
-        focusState,
-        anim,
-        computeFocusState,
-        ctx,
-    );
-    const linkFocusState =
-        animationFrontierPartial && anim?.direction === 'backward' ? displayFocusState : focusState;
     const nodeStrokeShareById = resolveEffectiveStayShareByIdForStroke(
         focusState,
         focusId,
@@ -742,52 +607,92 @@ export function resolveRecursiveEdgeAnimationRenderOverlay(args: {
         animationFrontierPartial && anim?.direction === 'backward'
             ? maxHighlightEdgeShare(computeSteadyStateStayShareById(focusState.nodeShareById, focusId))
             : undefined;
-    const incomingShareForRender =
-        animationFrontierPartial && anim?.direction === 'backward' && displayFocusState != null
-            ? displayFocusState.incomingEdgeShareByKey
-            : focusState.incomingEdgeShareByKey;
+    const incomingShareForRender = focusState.incomingEdgeShareByKey;
     const incomingMaxForRender =
         animationFrontierPartial && frontierEdgeKeys != null
-            ? maxShareInEdgeKeySet(focusState.incomingEdgeShareByKey, frontierEdgeKeys)
+            ? maxShareInEdgeKeySet(incomingShareForRender, frontierEdgeKeys)
             : maxHighlightEdgeShare(incomingShareForRender);
     const forwardPromptOnlyFrame =
         anim != null && isForwardPromptOnlyBatchIndex(anim.direction, anim.batchIndex);
-    const forwardSlideTgtId =
-        anim?.direction === 'forward' && animationFrontierPartial && !forwardPromptOnlyFrame
-            ? (anim.plan.batches[anim.batchIndex]?.tgtId ?? null)
-            : null;
+    const forwardPartial = animationFrontierPartial && anim?.direction === 'forward';
+    const propagationSlideTgtId = resolvePropagationSlideTgtId(
+        anim,
+        animationFrontierPartial,
+        forwardPromptOnlyFrame,
+        focusId,
+    );
+    const deferFocusHighlightDuringAnim = forwardPartial;
+    const suppressFocusSelectedStroke =
+        animationFrontierPartial &&
+        focusId != null &&
+        (forwardPartial || propagationSlideTgtId === focusId);
     const edgeVisibility = (edgeKey: string, inPropagationChain: boolean): number => {
-        if (
-            !animationFrontierPartial ||
-            anim?.direction !== 'forward' ||
-            !inPropagationChain
-        ) {
+        if (!animationFrontierPartial || !inPropagationChain) {
             return 1;
         }
         return frontierEdgeKeys?.has(edgeKey) ? 1 : 0;
     };
-
     return {
         animationFrontierPartial,
         anim,
         frontierEdgeKeys,
-        linkFocusState,
-        displayFocusState,
+        linkFocusState: focusState,
         nodeStrokeShareById,
         nodeStrokeMaxForRender,
         incomingShareForRender,
         incomingMaxForRender,
         forwardPromptOnlyFrame,
-        forwardSlideTgtId,
+        propagationSlideTgtId,
+        deferFocusHighlightDuringAnim,
+        suppressFocusSelectedStroke,
         edgeVisibility,
     };
 }
 
+function logPropagationPlaybackPlanOnStart(args: {
+    plan: DagPropagationPlaybackPlan;
+    focusId: string;
+    direction: DagRecursiveEdgeAnimationDirection;
+    initialBatchIndex: number;
+    pacing: DagRecursiveEdgeReplayPacing;
+    nodeShareById: ReadonlyMap<string, number>;
+    tokenLabelOf: (id: string) => string | null;
+}): void {
+    const { plan, focusId, direction, initialBatchIndex, pacing, nodeShareById, tokenLabelOf } = args;
+    const pacingLine =
+        pacing.mode === 'step'
+            ? `pacing=step stepMs=${pacing.stepMs}`
+            : `pacing=total totalS=${pacing.totalS}`;
+    logDagPropagationPlaybackLine(
+        `${dagPropLogPad('start', DAG_PROP_LOG_W.event)} | focus=${dagPropLogPad(dagPropLogFmtToken(tokenLabelOf(focusId)), DAG_PROP_LOG_W.focus)} | direction=${dagPropLogPad(direction, DAG_PROP_LOG_W.direction)} | batches=${dagPropLogPadInt(plan.batches.length, DAG_PROP_LOG_W.int3)} | initial=${dagPropLogPadInt(initialBatchIndex, DAG_PROP_LOG_W.int3)} | ${pacingLine}`,
+    );
+    const batchTgtIds = new Set<string>();
+    for (const b of plan.batches) {
+        for (const tgtId of tgtIdsInBatch(b)) batchTgtIds.add(tgtId);
+    }
+    const refNodes = nodesAtNodeShareTotalForPlaybackLog(nodeShareById, plan.weightMax, {
+        excludeFocusId: focusId,
+        onlyNodeIds: batchTgtIds,
+    });
+    logDagPropagationPlaybackLine(
+        `${dagPropLogPad('pacing', DAG_PROP_LOG_W.event)} | weightMax=${dagPropLogPadWeight(plan.weightMax)} | weightTotal=${dagPropLogPadWeight(plan.weightTotal)} | lookahead=${dagPropLogPadInt(plan.runningMaxLookahead, DAG_PROP_LOG_W.int3)} | nodes=${dagPropLogFmtNodeShareList(refNodes, tokenLabelOf)}`,
+    );
+    const planTextOrder = batchesInTextOrder(plan.batches);
+    for (let chainStep = 0; chainStep < planTextOrder.length; chainStep++) {
+        const b = planTextOrder[chainStep]!;
+        const token = dagPropLogFmtToken(tokenLabelOf(b.tgtId));
+        logDagPropagationPlaybackLine(
+            `${dagPropLogPad(`plan[${chainStep}]`, DAG_PROP_LOG_W.event)} | token=${dagPropLogPad(token, DAG_PROP_LOG_W.token)} | share_norm=${dagPropLogPadWeight(b.shareNorm)} | running_max=${dagPropLogPadWeight(b.runningMaxNorm)} | weight=${dagPropLogPadWeight(b.propagationWeight)}`,
+        );
+    }
+}
+
 export type DagRecursiveEdgeAnimationController = {
     onUserSelect(focusId: string, ctx: DagFocusAttributionGraphContext): void;
     onClear(): void;
     setEnabled(enabled: boolean): void;
     setDirection(direction: DagRecursiveEdgeAnimationDirection): void;
+    getDirection(): DagRecursiveEdgeAnimationDirection;
     getUserAnimationFocusId(): string | null;
     isEnabled(): boolean;
     resolveRenderOverlay(args: {
@@ -837,8 +742,8 @@ export function createDagRecursiveEdgeAnimationController(
             const s = animation;
             const batch = s.plan.batches[s.batchIndex];
             const lastBatch = s.plan.batches.length - 1;
-            playbackLogLine(
-                `${playbackPad('stop', DAG_PROP_LOG_W.event)} | focus=${playbackPad(playbackFmtToken(options.tokenLabelOf(s.plan.focusId)), DAG_PROP_LOG_W.focus)} | frame=${playbackPad(`${s.batchIndex}/${lastBatch}`, DAG_PROP_LOG_W.frame)} | token=${playbackPad(playbackFmtToken(batch != null ? options.tokenLabelOf(batch.tgtId) : null), DAG_PROP_LOG_W.token)}`,
+            logDagPropagationPlaybackLine(
+                `${dagPropLogPad('stop', DAG_PROP_LOG_W.event)} | focus=${dagPropLogPad(dagPropLogFmtToken(options.tokenLabelOf(s.plan.focusId)), DAG_PROP_LOG_W.focus)} | frame=${dagPropLogPad(`${s.batchIndex}/${lastBatch}`, DAG_PROP_LOG_W.frame)} | token=${dagPropLogPad(dagPropLogFmtToken(batch != null ? options.tokenLabelOf(batch.tgtId) : null), DAG_PROP_LOG_W.token)}`,
             );
         }
         version++;
@@ -885,34 +790,15 @@ export function createDagRecursiveEdgeAnimationController(
             direction,
             batchIndex: initialBatchIndex,
         };
-        const pacing = getReplayPacing();
-        const pacingLine =
-            pacing.mode === 'step'
-                ? `pacing=step stepMs=${pacing.stepMs}`
-                : `pacing=total totalS=${pacing.totalS}`;
-        playbackLogLine(
-            `${playbackPad('start', DAG_PROP_LOG_W.event)} | focus=${playbackPad(playbackFmtToken(options.tokenLabelOf(focusId)), DAG_PROP_LOG_W.focus)} | direction=${playbackPad(direction, DAG_PROP_LOG_W.direction)} | batches=${playbackPadInt(plan.batches.length, DAG_PROP_LOG_W.int3)} | initial=${playbackPadInt(initialBatchIndex, DAG_PROP_LOG_W.int3)} | ${pacingLine}`,
-        );
-        const nodeShareById = focusState.nodeShareById;
-        const batchTgtIds = new Set<string>();
-        for (const b of plan.batches) {
-            for (const tgtId of tgtIdsInBatch(b)) batchTgtIds.add(tgtId);
-        }
-        const refNodes = nodesAtNodeShareTotal(nodeShareById, plan.weightMax, {
-            excludeFocusId: focusId,
-            onlyNodeIds: batchTgtIds,
+        logPropagationPlaybackPlanOnStart({
+            plan,
+            focusId,
+            direction,
+            initialBatchIndex,
+            pacing: getReplayPacing(),
+            nodeShareById: focusState.nodeShareById,
+            tokenLabelOf: options.tokenLabelOf,
         });
-        playbackLogLine(
-            `${playbackPad('pacing', DAG_PROP_LOG_W.event)} | weightMax=${playbackPadWeight(plan.weightMax)} | weightTotal=${playbackPadWeight(plan.weightTotal)} | lookahead=${playbackPadInt(plan.runningMaxLookahead, DAG_PROP_LOG_W.int3)} | nodes=${playbackFmtNodeShareList(refNodes, options.tokenLabelOf)}`,
-        );
-        const planTextOrder = batchesInTextOrder(plan.batches);
-        for (let chainStep = 0; chainStep < planTextOrder.length; chainStep++) {
-            const b = planTextOrder[chainStep]!;
-            const token = playbackFmtToken(options.tokenLabelOf(b.tgtId));
-            playbackLogLine(
-                `${playbackPad(`plan[${chainStep}]`, DAG_PROP_LOG_W.event)} | token=${playbackPad(token, DAG_PROP_LOG_W.token)} | share_norm=${playbackPadWeight(b.shareNorm)} | running_max=${playbackPadWeight(b.runningMaxNorm)} | weight=${playbackPadWeight(b.propagationWeight)}`,
-            );
-        }
         scheduleAnimationStep(focusId);
     }
 
@@ -937,6 +823,7 @@ export function createDagRecursiveEdgeAnimationController(
         return delayMsForCurrentBatch(state);
     }
 
+    /** batchIndex 时间线：backward `0 → last`；forward `-1(prompt) → last → … → 0(稳态)`。 */
     function hasNextBatch(state: DagEdgeBatchAnimationState, lastBatch: number): boolean {
         if (state.direction === 'backward') {
             return state.batchIndex < lastBatch;
@@ -966,10 +853,10 @@ export function createDagRecursiveEdgeAnimationController(
         const dwellMs = dwellMsAfterCurrentFrame(state);
         const token = promptFrame
             ? 'prompt'
-            : playbackFmtToken(batch?.tgtId != null ? options.tokenLabelOf(batch.tgtId) : null);
-        const weight = promptFrame ? 'fixed' : playbackFmtWeight(batch?.propagationWeight);
-        playbackLogLine(
-            `${playbackPad('frame', DAG_PROP_LOG_W.event)} ${playbackPad(`${state.batchIndex}/${lastBatch}`, DAG_PROP_LOG_W.frame)} | token=${playbackPad(token, DAG_PROP_LOG_W.token)} | weight=${playbackPad(weight, DAG_PROP_LOG_W.weight)} | dwellMs=${playbackPadInt(dwellMs, DAG_PROP_LOG_W.dwell)}`,
+            : dagPropLogFmtToken(batch?.tgtId != null ? options.tokenLabelOf(batch.tgtId) : null);
+        const weight = promptFrame ? 'fixed' : dagPropLogFmtWeight(batch?.propagationWeight);
+        logDagPropagationPlaybackLine(
+            `${dagPropLogPad('frame', DAG_PROP_LOG_W.event)} ${dagPropLogPad(`${state.batchIndex}/${lastBatch}`, DAG_PROP_LOG_W.frame)} | token=${dagPropLogPad(token, DAG_PROP_LOG_W.token)} | weight=${dagPropLogPad(weight, DAG_PROP_LOG_W.weight)} | dwellMs=${dagPropLogPadInt(dwellMs, DAG_PROP_LOG_W.dwell)}`,
         );
     }
 
@@ -986,27 +873,27 @@ export function createDagRecursiveEdgeAnimationController(
             return;
         }
 
-        const v = ++version;
+        const capturedVersion = ++version;
 
         const showFrameAndScheduleNext = (): void => {
-            if (version !== v) return;
-            const s = animation;
-            if (!s || s.plan.focusId !== focusId) return;
+            if (version !== capturedVersion) return;
+            const liveState = animation;
+            if (!liveState || liveState.plan.focusId !== focusId) return;
 
             options.onTick();
-            logPropagationFrame(s);
+            logPropagationFrame(liveState);
 
-            const dwellMs = dwellMsAfterCurrentFrame(s);
+            const dwellMs = dwellMsAfterCurrentFrame(liveState);
             timer = setTimeout(() => {
-                if (version !== v) return;
-                const s2 = animation;
-                if (!s2 || s2.plan.focusId !== focusId) return;
+                if (version !== capturedVersion) return;
+                const stateAfterDwell = animation;
+                if (!stateAfterDwell || stateAfterDwell.plan.focusId !== focusId) return;
 
-                if (!hasNextBatch(s2, lastBatch)) {
+                if (!hasNextBatch(stateAfterDwell, lastBatch)) {
                     timer = null;
                     return;
                 }
-                advanceBatchIndex(s2);
+                advanceBatchIndex(stateAfterDwell);
                 showFrameAndScheduleNext();
             }, dwellMs);
         };
@@ -1031,6 +918,9 @@ export function createDagRecursiveEdgeAnimationController(
             direction = next;
             stopAnimation();
         },
+        getDirection(): DagRecursiveEdgeAnimationDirection {
+            return direction;
+        },
         getUserAnimationFocusId(): string | null {
             return userAnimationFocusId;
         },

client/src/shared/prediction_attribution/causal_flow/genAttributeDagTextMeasure.ts

@@ -42,6 +42,7 @@ function estimateExpandedLabelWidthFloorPx(raw: string): number {
     const APPROX_CHAR_WIDTH_PX = 10;
     const displayLabel = visualizeSpecialChars(raw, {
         spaceDotExceptBeforeAsciiLetterOrNumber: true,
+        omitHexInCodePointLabel: true,
     });
     const displayLen = Array.from(displayLabel).length;
     return Math.max(displayLen * APPROX_CHAR_WIDTH_PX, 1);

client/src/shared/prediction_attribution/causal_flow/genAttributeDagView.ts

@@ -12,11 +12,15 @@ import {
 } from './genAttributeDagPreprocess';
 import {
     DAG_EDGE_MIN_NORMALIZED_SCORE,
-    DAG_EDGE_RENDER_OPACITY_FLOOR,
     DAG_MIN_ATTRIBUTION_SHARE,
     DAG_NODE_STROKE_OPACITY_BASE,
 } from './genAttributeDagEdgeDisplay';
 import {
+    buildMaxNormalizedRenderStrengthByKey,
+    normalizeEdgeRenderOpacity,
+} from './genAttributeDagEdgeRenderStrength';
+import {
+    backwardSlideIncomingEdgeKeysForBatch,
     createDagRecursiveEdgeAnimationController,
     type DagRecursiveEdgeReplayPacing,
     maxHighlightEdgeShare,
@@ -214,7 +218,7 @@ type DagNodeAttrs = {
      * 下台阶等处用 {@link dagStepDownEffectiveCiRatio}(dagTargetProb)（高置信 p>p₁ 为 0；与「关闭 CI 视觉」无关）；
      */
     dagTargetProb?: number;
-    /** {@link visualizeSpecialChars}（DAG：仅「空格后是 [A-Za-z0-9]」保留空格，其余空格为 ·），建点后不变 */
+    /** {@link visualizeSpecialChars}（DAG 节点：词界空格 + 不可打印为 `[]`），建点后不变；边 tooltip 用完整 `[hex]` */
     displayLabel: string;
     /** 悬停 / 选中焦点时 Top‑K tooltip；仅生成节点（`step >= 0`） */
     gltrTooltipToken?: FrontendToken;
@@ -271,21 +275,6 @@ function nodeTargetMiRatio(node: DagNode): number {
     return computeMutualInformationRatio(node.dagTargetProb);
 }
 
-/**
- * 池内 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}）。
@@ -352,23 +341,6 @@ function computeSteadyStateStayShareById(
     return byNodeId;
 }
 
-/** 池内 max 归一后的 render 强度；{@link maxOpacity} 为链内最强边刻度（蓝入边见 {@link refreshNodeLinkHighlight}，默认 1）。 */
-function buildMaxNormalizedRenderStrengthByKey(
-    sharesByKey: Map<string, number>,
-    maxOpacity = 1,
-    maxShareOverride?: number,
-): Map<string, number> {
-    const maxShare =
-        maxShareOverride != null && Number.isFinite(maxShareOverride) && maxShareOverride > 0
-            ? maxShareOverride
-            : 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>,
@@ -722,9 +694,10 @@ function buildLinkTitleText(snapshot: DagLinkTitleSnapshot): string {
         `Link strength: ${formatTooltipLinkStrength(snapshot.linkStrength)}`,
     ];
 
+    const dagTooltipLabelOpts = { spaceDotExceptBeforeAsciiLetterOrNumber: true as const };
     return [
-        `From:\n${snapshot.src.displayLabel}\nOffset: ${formatNodeOffsetRange(snapshot.src.id)}`,
-        `To:\n${snapshot.tgt.displayLabel}\nOffset: ${formatNodeOffsetRange(snapshot.tgt.id)}`,
+        `From:\n${visualizeSpecialChars(snapshot.src.label, dagTooltipLabelOpts)}\nOffset: ${formatNodeOffsetRange(snapshot.src.id)}`,
+        `To:\n${visualizeSpecialChars(snapshot.tgt.label, dagTooltipLabelOpts)}\nOffset: ${formatNodeOffsetRange(snapshot.tgt.id)}`,
         metrics.join('\n'),
     ].join('\n\n');
 }
@@ -792,6 +765,7 @@ function resolveDagLinkHighlightDisplay(
     grayRenderByKey: Map<string, number>,
     incomingHighlightRenderByKey: Map<string, number>,
     downstreamHighlightRenderByKey: Map<string, number>,
+    backwardSlideIncomingRenderByKey: Map<string, number> | null,
 ): DagLinkHighlightDisplay {
     const directStrength = directAttributionStrength(d);
     const grayRender = grayRenderByKey.get(edgeKey) ?? directStrength;
@@ -808,9 +782,14 @@ function resolveDagLinkHighlightDisplay(
 
         const incomingShare = focusState.incomingEdgeShareByKey.get(edgeKey);
         if (incomingShare != null) {
+            const backwardSlideRender = backwardSlideIncomingRenderByKey?.get(edgeKey);
             return {
-                stroke: `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_IN})`,
-                renderStrength: incomingHighlightRenderByKey.get(edgeKey)!,
+                stroke:
+                    backwardSlideRender != null
+                        ? `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_OUT})`
+                        : `var(${CSS_VAR_DAG_HIGHLIGHT_LINE_IN})`,
+                renderStrength:
+                    backwardSlideRender ?? incomingHighlightRenderByKey.get(edgeKey)!,
                 linkStrength: incomingShare,
                 recursiveAttributionShare: recursiveAttributionEnabled ? incomingShare : undefined,
             };
@@ -1181,6 +1160,11 @@ export function initGenAttributeDagView(
     let hoveredId: string | null = null;
     /** 最近一次 {@link refreshNodeLinkHighlight} 计算出的归因状态（基于 {@link effectiveFocusId}）；tooltip 用于展示归因份额 */
     let currentFocusState: FocusAttributionState | null = null;
+    /** 传播链动画进行中 tooltip 锚点；播放结束后为 null，恢复 target / hover。 */
+    let propagationPlaybackTooltip: {
+        nodeId: string;
+        direction: DagRecursiveEdgeAnimationDirection;
+    } | null = null;
 
     const focusAttributionCtx = () => ({
         nodesSortedByStepDesc,
@@ -1217,10 +1201,35 @@ export function initGenAttributeDagView(
         return selectedId ?? hoveredId;
     }
 
-    /** tooltip 锚点：悬浮任意节点时展示该节点；无悬浮则展示焦点节点（选中 > 无） */
+    /** 传播链动画当前帧应对应 tooltip 的节点；非播放中返回 null。 */
+    function resolvePropagationPlaybackTooltipNodeId(
+        animOverlay: ReturnType<typeof recursiveEdgeAnimation.resolveRenderOverlay>,
+        focusId: string | null,
+    ): string | null {
+        if (focusId == null || !animOverlay.animationFrontierPartial || animOverlay.anim == null) {
+            return null;
+        }
+        const { anim, forwardPromptOnlyFrame, propagationSlideTgtId, nodeStrokeShareById } = animOverlay;
+        if (forwardPromptOnlyFrame) {
+            if (nodeStrokeShareById != null) {
+                for (const id of nodeStrokeShareById.keys()) {
+                    if (graph.hasNode(id) && (graph.getNodeAttributes(id) as DagNode).step === -1) {
+                        return id;
+                    }
+                }
+            }
+            return nodes.find((n) => n.step === -1)?.id ?? null;
+        }
+        return propagationSlideTgtId ?? anim.plan.batches[anim.batchIndex]?.tgtId ?? null;
+    }
+
+    /** tooltip 锚点：传播播放（忽略 hover）> hover > 焦点 */
     function tooltipFocusId(): string | null {
-        if (hoveredId != null) {
-            return graph.hasNode(hoveredId) ? hoveredId : null;
+        if (propagationPlaybackTooltip != null && graph.hasNode(propagationPlaybackTooltip.nodeId)) {
+            return propagationPlaybackTooltip.nodeId;
+        }
+        if (hoveredId != null && graph.hasNode(hoveredId)) {
+            return hoveredId;
         }
         return effectiveFocusId();
     }
@@ -1282,6 +1291,15 @@ export function initGenAttributeDagView(
         svg.attr('width', w).attr('height', h);
     }
 
+    /** 传播归因 + backward：仅 UI 路径反向，不改边数据与归因 key。 */
+    function linkEndpointsForPaint(d: DagLink): { src: DagNode; tgt: DagNode } {
+        const src = endpointNode(d.source, graph);
+        const tgt = endpointNode(d.target, graph);
+        const flipArrows =
+            recursiveAttributionEnabled && recursiveEdgeAnimation.getDirection() === 'backward';
+        return flipArrows ? { src: tgt, tgt: src } : { src, tgt };
+    }
+
     function paint(): void {
         syncNodeStrokeRects(nodeSel, displayScale);
         if (layoutMode === 'linear-arc' || layoutMode === 'linear-arc-step-down') {
@@ -1294,10 +1312,7 @@ export function initGenAttributeDagView(
                 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),
-                }),
+                getLinkNodes: linkEndpointsForPaint,
             });
         } else if (layoutMode === 'spiral') {
             const layoutNodes = hideExcludedTokens
@@ -1308,20 +1323,14 @@ export function initGenAttributeDagView(
                 nodeSel,
                 nodes: layoutNodes,
                 linkEndInsetPx,
-                getLinkNodes: (d) => ({
-                    src: endpointNode(d.source, graph),
-                    tgt: endpointNode(d.target, graph),
-                }),
+                getLinkNodes: linkEndpointsForPaint,
             });
         } else {
             paintTextFlowLayout({
                 linkSel,
                 nodeSel,
                 linkEndInsetPx,
-                getLinkNodes: (d) => ({
-                    src: endpointNode(d.source, graph),
-                    tgt: endpointNode(d.target, graph),
-                }),
+                getLinkNodes: linkEndpointsForPaint,
             });
         }
         syncNodeHitTransforms();
@@ -1374,6 +1383,11 @@ export function initGenAttributeDagView(
             recursiveAttributionEnabled,
             ctx: focusAttributionCtx(),
         });
+        const playbackNodeId = resolvePropagationPlaybackTooltipNodeId(animOverlay, focusId);
+        propagationPlaybackTooltip =
+            playbackNodeId != null && animOverlay.anim != null
+                ? { nodeId: playbackNodeId, direction: animOverlay.anim.direction }
+                : null;
         const linkFocusState = animOverlay.linkFocusState ?? focusState;
         const focusNodeIds = focusState?.activeNodeIds ?? null;
         const nodeStrokeShareById = animOverlay.nodeStrokeShareById;
@@ -1408,8 +1422,42 @@ export function initGenAttributeDagView(
                 : buildMaxNormalizedRenderStrengthByKey(focusState.downstreamEdgeStrengthByKey);
         grayRenderCache ??= buildGrayRenderStrengthByEdgeKey(graph, incomingLinksByTarget);
         const grayRenderByKey = grayRenderCache;
-        const forwardSlideTgtId = animOverlay.forwardSlideTgtId;
-        const forwardPromptOnlyFrame = animOverlay.forwardPromptOnlyFrame;
+        const {
+            propagationSlideTgtId,
+            forwardPromptOnlyFrame,
+            deferFocusHighlightDuringAnim,
+            suppressFocusSelectedStroke,
+            incomingShareForRender,
+            anim,
+            animationFrontierPartial,
+        } = animOverlay;
+        let backwardSlideIncomingRenderByKey: Map<string, number> | null = null;
+        if (
+            animationFrontierPartial &&
+            anim?.direction === 'backward' &&
+            !forwardPromptOnlyFrame &&
+            focusId != null
+        ) {
+            const slideKeys = backwardSlideIncomingEdgeKeysForBatch(
+                anim.plan,
+                anim.batchIndex,
+                focusId,
+            );
+            if (slideKeys.size > 0) {
+                backwardSlideIncomingRenderByKey = buildMaxNormalizedRenderStrengthByKey(
+                    incomingShareForRender,
+                    focusTargetMiRatio,
+                    undefined,
+                    slideKeys,
+                );
+            }
+        }
+        const isPropagationSlide = (d: DagNode): boolean =>
+            propagationSlideTgtId != null && d.id === propagationSlideTgtId;
+        const isBackwardSlide = (d: DagNode): boolean =>
+            animOverlay.anim?.direction === 'backward' && isPropagationSlide(d);
+        const showFocusSelectedStroke = (d: DagNode): boolean =>
+            selectedId === d.id && !(suppressFocusSelectedStroke && d.id === focusId);
         const nodeOnChainForRender = (d: DagNode): boolean => {
             if (!forwardPromptOnlyFrame) return nodeStrokeShareById?.has(d.id) ?? false;
             return d.step === -1 && (nodeStrokeShareById?.has(d.id) ?? false);
@@ -1420,15 +1468,15 @@ export function initGenAttributeDagView(
                 : null;
         nodeSel
             .classed('gen-attr-dag-node--hover', (d) => hoveredId === d.id)
-            .classed('gen-attr-dag-node--selected', (d) => selectedId === d.id)
+            .classed('gen-attr-dag-node--selected', showFocusSelectedStroke)
             .style('display', nodeDisplay)
             .attr('opacity', (d) => {
                 const nodeFullyHighlighted = recursiveAttributionEnabled
                     ? forwardPromptOnlyFrame
                         ? nodeOnChainForRender(d)
-                        : d.id === focusId ||
+                        : (!deferFocusHighlightDuringAnim && d.id === focusId) ||
                           (nodeStrokeShareById?.has(d.id) ?? false) ||
-                          (forwardSlideTgtId != null && d.id === forwardSlideTgtId)
+                          isPropagationSlide(d)
                     : (focusNodeIds?.has(d.id) ?? false);
                 if (nodeFullyHighlighted) return 1;
                 if (isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)) {
@@ -1439,15 +1487,19 @@ export function initGenAttributeDagView(
                 if (focusId || isPromptLeaf) return DAG_NODE_WEAKEN_OPACITY;
                 return 1;
             })
-            .classed('gen-attr-dag-node--recursive-chain', (d) => nodeOnChainForRender(d))
+            .classed(
+                'gen-attr-dag-node--recursive-chain',
+                (d) => nodeOnChainForRender(d) || isBackwardSlide(d),
+            )
+            .classed('gen-attr-dag-node--backward-slide', isBackwardSlide)
             .style(CSS_VAR_DAG_NODE_RECURSIVE_SHARE, (d) => {
-                if (!nodeOnChainForRender(d)) return null;
+                if (!nodeOnChainForRender(d) && !isBackwardSlide(d)) return null;
                 const renderStrength = nodeStrokeRenderById?.get(d.id);
                 return renderStrength != null ? String(renderStrength) : null;
             });
         nodeHitSel
             .classed('gen-attr-dag-node--hover', (d) => hoveredId === d.id)
-            .classed('gen-attr-dag-node--selected', (d) => selectedId === d.id)
+            .classed('gen-attr-dag-node--selected', showFocusSelectedStroke)
             .style('display', nodeDisplay);
         // 每条边：颜色/强度（见 resolveDagLinkHighlightDisplay）、`<title>` 一并刷新（含 linkGFront 高亮边）。
         rootG.selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link').each(function(d) {
@@ -1463,6 +1515,7 @@ export function initGenAttributeDagView(
                     grayRenderByKey,
                     incomingHighlightRenderByKey,
                     downstreamHighlightRenderByKey,
+                    backwardSlideIncomingRenderByKey,
                 );
             const finalRenderStrength =
                 renderStrength *
@@ -1536,16 +1589,24 @@ export function initGenAttributeDagView(
             pred_topk: [],
         };
 
-        // 构建 augment：归因份额行（token 下方最前）+ CI/MI 行（surprisal 之后）
+        // 反向播放：当前 token 展示稳态归因份额（同 hover）；正向播放 / 非播放：仅 hover 时展示
         const rowsBeforeInfo: ToolTipUpdateAugment['rowsBeforeInfo'] = [];
-        if (selectedId && hoveredId && currentFocusState && hoveredId !== selectedId && graph.hasNode(selectedId)) {
+        const shareSourceId =
+            propagationPlaybackTooltip?.direction === 'backward' ? focusIdNext : hoveredId;
+        if (
+            selectedId &&
+            shareSourceId &&
+            currentFocusState &&
+            shareSourceId !== 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;
+                const share = currentFocusState.nodeShareById.get(shareSourceId) ?? 0;
                 if (recursiveAttributionEnabled) {
                     const stay = share * (1 - nodePropagationMiRatio(attrs));
                     rowsBeforeInfo.push(
@@ -1728,6 +1789,7 @@ export function initGenAttributeDagView(
             }
             const displayLabel = visualizeSpecialChars(attr.raw, {
                 spaceDotExceptBeforeAsciiLetterOrNumber: true,
+                omitHexInCodePointLabel: true,
             });
             const srcNode: DagNode = {
                 id: srcId,
@@ -1784,6 +1846,7 @@ export function initGenAttributeDagView(
         const g = textMeasure.appendGeneratedToken(token, [targetStart, targetEnd]);
         const displayLabel = visualizeSpecialChars(token, {
             spaceDotExceptBeforeAsciiLetterOrNumber: true,
+            omitHexInCodePointLabel: true,
         });
         const ciVisualScale = dagGeneratedNodeCiVisualScale(response.target_prob);
         const gltrTooltipToken = frontendTokenFromGenAttrStep(step);
@@ -2075,6 +2138,7 @@ export function initGenAttributeDagView(
         if (recursiveAttributionEnabled === enabled) return;
         recursiveAttributionEnabled = enabled;
         if (!enabled) recursiveEdgeAnimation.stopAnimation();
+        paint();
         refreshNodeLinkHighlight();
     }
 
@@ -2089,6 +2153,7 @@ export function initGenAttributeDagView(
 
     function setRecursiveEdgeBatchAnimationDirection(direction: DagRecursiveEdgeAnimationDirection): void {
         recursiveEdgeAnimation.setDirection(direction);
+        paint();
         refreshNodeLinkHighlight();
     }
 

client/src/shared/prediction_attribution/causal_flow/tokenGenAttributionRunner.ts

@@ -6,9 +6,10 @@ import type { AttributionApiResponse, PredictionAttributeModelVariant } from '..
 import type { PromptTokenSpan } from './genAttributeDagPreprocess';
 import type { CompletionFinishReason } from '../../cross/generationEndReasonLabel';
 import { fetchPredictionAttribute, fetchTokenize } from '../core/predictionAttributeClient';
+import { DEFAULT_MAX_NEW_TOKENS } from '../../cross/maxNewTokensConfig';
 
-/** 与生成归因页（含 DAG）「Max tokens」输入框默认值一致 */
-export const TOKEN_GEN_MAX_TOKENS_DEFAULT = 100;
+/** @deprecated 使用 {@link DEFAULT_MAX_NEW_TOKENS} */
+export const TOKEN_GEN_MAX_TOKENS_DEFAULT = DEFAULT_MAX_NEW_TOKENS;
 
 function splitCodePointPrefix(text: string, prefixLength: number): { prefix: string; rest: string } | null {
     if (prefixLength < 0) return null;

client/src/shared/vis/ToolTip.ts

@@ -21,13 +21,13 @@ export type ToolTipOptions = {
     surprisalRowLabel?: string;
     /**
      * `parent-bottom-right`：`position:absolute`，贴在定位包含块（`offsetParent`）右下角（DAG Top‑K 作为 `#results` 直接子节点时即为 results 内侧右下）。
-     * 该 HUD 模式不依赖锚点几何；面板应由页面 CSS（如 `.gen-attr-dag-topk-tooltip`）约束宽高与内部滚动，而非按内容 shrink-wrap。
+     * 该 HUD 模式不依赖锚点几何；面板应由页面 CSS（如 `.gen-attr-dag-topk-tooltip`）约束宽高，超出部分裁剪。
      * 默认 `anchor`：沿用原有相对 token rect 的定位。
      */
     placement?: 'anchor' | 'parent-bottom-right';
     /**
      * false：面板不参与命中测试（`pointer-events: none`），避免盖住底层 SVG 时在节点上反复 `mouseleave`/闪动；
-     * 同时不注册点击/触摸收起，且不接收内部滚动交互。
+     * 同时不注册点击/触摸收起。
      */
     pointerInteractive?: boolean;
 };

client/src/tests/prediction_attribution/genAttributeDagPropagationPlayback.test.ts

@@ -0,0 +1,271 @@
+/**
+ * 传播链播放计划 / 节奏单元测试
+ * 运行: cd client/src && npm run test:dagPropagationPlayback
+ */
+import {
+    batchPlaybackDelayMs,
+    computePropagationGroupPacings,
+    FORWARD_PROMPT_FRAME_DWELL_MS,
+    propagationRunningMaxLookaheadForGroupCount,
+} from '../../shared/prediction_attribution/causal_flow/genAttributeDagPropagationPlaybackPacing';
+import { buildMaxNormalizedRenderStrengthByKey } from '../../shared/prediction_attribution/causal_flow/genAttributeDagEdgeRenderStrength';
+import {
+    backwardSlideIncomingEdgeKeysForBatch,
+    buildPropagationPlaybackPlan,
+    maxShareInEdgeKeySet,
+    tgtIdFromEdgeKey,
+} from '../../shared/prediction_attribution/causal_flow/genAttributeDagRecursiveEdgeAnimation';
+
+/** 与重构前独立的 `buildMaxNormalizedRenderStrengthForEdgeKeySet` 同公式，用于回归对照。 */
+function legacySubsetMaxNormalizedRender(
+    sharesByKey: Map<string, number>,
+    edgeKeys: ReadonlySet<string>,
+    maxOpacity = 1,
+): Map<string, number> {
+    let maxShare = 0;
+    for (const key of edgeKeys) {
+        const share = sharesByKey.get(key);
+        if (share != null && share > maxShare) maxShare = share;
+    }
+    const byKey = new Map<string, number>();
+    for (const key of edgeKeys) {
+        const share = sharesByKey.get(key);
+        if (share != null) {
+            byKey.set(
+                key,
+                buildMaxNormalizedRenderStrengthByKey(
+                    new Map([[key, share]]),
+                    maxOpacity,
+                    maxShare,
+                ).get(key)!,
+            );
+        }
+    }
+    return byKey;
+}
+
+let passed = 0;
+let failed = 0;
+
+function assert(desc: string, cond: boolean) {
+    if (cond) {
+        console.log(`  ✓ ${desc}`);
+        passed++;
+    } else {
+        console.error(`  ✗ ${desc}`);
+        failed++;
+    }
+}
+
+function assertEq<T>(desc: string, actual: T, expected: T) {
+    assert(desc, actual === expected);
+}
+
+function assertClose(desc: string, actual: number, expected: number, eps = 1e-9) {
+    assert(desc, Math.abs(actual - expected) <= eps);
+}
+
+// ── lookahead ───────────────────────────────────────────────────────────────
+console.log('1. propagationRunningMaxLookaheadForGroupCount');
+assertEq('0 组 → 0', propagationRunningMaxLookaheadForGroupCount(0), 0);
+assertEq('1 组 → MIN(2)', propagationRunningMaxLookaheadForGroupCount(1), 2);
+assertEq('10 组 → max(2, round(1))', propagationRunningMaxLookaheadForGroupCount(10), 2);
+assertEq('30 组 → 3', propagationRunningMaxLookaheadForGroupCount(30), 3);
+
+// ── computePropagationGroupPacings ──────────────────────────────────────────
+console.log('2. computePropagationGroupPacings');
+{
+    const focusId = 'f';
+    const nodeShare = new Map([
+        ['f', 1],
+        ['a', 0.4],
+        ['b', 0.2],
+        ['c', 0.1],
+    ]);
+    const groups = [
+        { tgtIds: ['a'] },
+        { tgtIds: ['b'] },
+        { tgtIds: ['c'] },
+    ];
+    const { groupPreps, weightMax, weightTotal, runningMaxLookahead } = computePropagationGroupPacings(
+        groups,
+        nodeShare,
+        focusId,
+    );
+    assertClose('weightMax = 非焦点组内 max', weightMax, 0.4);
+    assertEq('3 组 lookahead', runningMaxLookahead, 2);
+    assert('每组有 propagationWeight', groupPreps.length === 3);
+    assert('weightTotal > 0', weightTotal > 0);
+    assertClose('首组 shareNorm = 1', groupPreps[0]!.shareNorm ?? -1, 1);
+    assert('running max 非降', groupPreps[1]!.runningMaxNorm >= groupPreps[0]!.runningMaxNorm);
+    assert(
+        'propagationWeight ∈ [0,1]',
+        groupPreps.every((p) => p.propagationWeight >= 0 && p.propagationWeight <= 1),
+    );
+}
+
+{
+    const { groupPreps, weightTotal } = computePropagationGroupPacings(
+        [{ tgtIds: ['f', 'x'] }, { tgtIds: ['y'] }],
+        new Map([
+            ['f', 1],
+            ['x', 0.5],
+            ['y', 0.25],
+        ]),
+        'f',
+    );
+    assert('含焦点组无 shareNorm', groupPreps[0]!.shareNorm === undefined);
+    assert('weightTotal 可累加', weightTotal >= 0);
+}
+
+// ── batchPlaybackDelayMs ────────────────────────────────────────────────────
+console.log('3. batchPlaybackDelayMs');
+const batch = { propagationWeight: 0.25 };
+const plan = { weightTotal: 1 };
+
+assertEq(
+    'step：0 权重 → 0ms',
+    batchPlaybackDelayMs({ propagationWeight: 0 }, plan, { mode: 'step', stepMs: 500, totalS: 7 }),
+    0,
+);
+assertEq(
+    'step：权重连续',
+    batchPlaybackDelayMs(batch, plan, { mode: 'step', stepMs: 400, totalS: 7 }),
+    100,
+);
+
+const totalPacing = { mode: 'total' as const, stepMs: 500, totalS: 7 };
+const weightedBudgetMs = 7 * 1000 - FORWARD_PROMPT_FRAME_DWELL_MS;
+assertEq(
+    'total：按权重占比，预算已扣固定帧',
+    batchPlaybackDelayMs(batch, plan, totalPacing),
+    Math.round(0.25 * weightedBudgetMs),
+);
+
+assertEq(
+    'total：权重 0 → 0ms',
+    batchPlaybackDelayMs({ propagationWeight: 0 }, plan, totalPacing),
+    0,
+);
+
+// ── buildPropagationPlaybackPlan ────────────────────────────────────────────
+console.log('4. buildPropagationPlaybackPlan');
+{
+    const incoming = new Map<string, number>([
+        ['p->a', 0.3],
+        ['a->b', 0.2],
+        ['b->f', 0.5],
+    ]);
+    const offsetOf = (id: string) => ({ p: 0, a: 1, b: 2, f: 3 })[id] ?? 0;
+    const nodeShare = new Map([
+        ['f', 1],
+        ['b', 0.4],
+        ['a', 0.3],
+        ['p', 0.2],
+    ]);
+    const plan = buildPropagationPlaybackPlan(incoming, offsetOf, nodeShare, 'f');
+    assert('非空计划', plan != null);
+    if (plan != null) {
+        assertEq('批次数 = offset 组数', plan.batches.length, 3);
+        assert('播放序 offset 降序', plan.batches[0]!.groupOffset > plan.batches[1]!.groupOffset);
+        assertEq(
+            'backward batch0 = 焦点侧单组（b->f）',
+            plan.backwardFrontierByBatchIndex[0]?.has('b->f') ?? false,
+            true,
+        );
+        assert(
+            'forward batch0 前沿 = 全链',
+            plan.forwardFrontierByBatchIndex[0]?.size === 3,
+        );
+        const last = plan.batches.length - 1;
+        assertEq(
+            'backward 末批前沿 = 全链',
+            plan.backwardFrontierByBatchIndex[last]?.size ?? 0,
+            3,
+        );
+        for (const b of plan.batches) {
+            for (const key of b.edgeKeys) {
+                assertEq('edgeKey 可解析 tgt', tgtIdFromEdgeKey(key) != null, true);
+            }
+        }
+        const textOrder = [...plan.batches].sort((a, b) => a.groupOffset - b.groupOffset);
+        assertClose('文序首组 offset 最小', textOrder[0]!.groupOffset, 1);
+    }
+}
+
+assertEq('空入边 → null', buildPropagationPlaybackPlan(new Map(), () => 0, new Map(), 'f'), null);
+
+// ── buildMaxNormalizedRenderStrengthByKey（重构前后等价 + 蓝/红分母）────────
+console.log('5. buildMaxNormalizedRenderStrengthByKey');
+{
+    const shares = new Map<string, number>([
+        ['p->a', 0.3],
+        ['a->b', 0.2],
+        ['b->f', 0.5],
+        ['x->y', 0.9],
+    ]);
+    const slideKeys = new Set(['a->b', 'p->a']);
+    const merged = buildMaxNormalizedRenderStrengthByKey(shares, 0.75, undefined, slideKeys);
+    const legacy = legacySubsetMaxNormalizedRender(shares, slideKeys, 0.75);
+    assert('onlyKeys 与重构前子集归一一致', merged.size === legacy.size);
+    for (const key of slideKeys) {
+        assertClose(`onlyKeys[${key}]`, merged.get(key) ?? -1, legacy.get(key) ?? -2);
+    }
+    assert('onlyKeys 不输出集合外键', !merged.has('b->f'));
+
+    const frontierMax = 0.5;
+    const blue = buildMaxNormalizedRenderStrengthByKey(shares, 0.8, frontierMax);
+    const red = buildMaxNormalizedRenderStrengthByKey(shares, 0.8, undefined, new Set(['a->b']));
+    assertClose('蓝入边用前沿 max', blue.get('a->b') ?? 0, 0.8 * (0.2 / 0.5));
+    assertClose('红入边用集合内 max', red.get('a->b') ?? 0, 0.8);
+    assert('红边强于同键蓝边（分母更小）', (red.get('a->b') ?? 0) > (blue.get('a->b') ?? 0));
+}
+
+// ── backwardSlideIncomingEdgeKeysForBatch + 播放计划前沿 ───────────────────
+console.log('6. backwardSlideIncomingEdgeKeysForBatch');
+{
+    const incoming = new Map<string, number>([
+        ['p->a', 0.3],
+        ['a->b', 0.2],
+        ['b->f', 0.5],
+    ]);
+    const offsetOf = (id: string) => ({ p: 0, a: 1, b: 2, f: 3 })[id] ?? 0;
+    const nodeShare = new Map([
+        ['f', 1],
+        ['b', 0.4],
+        ['a', 0.3],
+        ['p', 0.2],
+    ]);
+    const plan = buildPropagationPlaybackPlan(incoming, offsetOf, nodeShare, 'f');
+    assert('计划非空', plan != null);
+    if (plan != null) {
+        const batch0Keys = backwardSlideIncomingEdgeKeysForBatch(plan, 0, 'f');
+        assertEq('batch0 仅焦点入边', batch0Keys.size, 1);
+        assert('batch0 含 b->f', batch0Keys.has('b->f'));
+
+        const batch1 = plan.batches[1]!;
+        const batch1Keys = backwardSlideIncomingEdgeKeysForBatch(plan, 1, 'f');
+        assert('batch1 含指向 slide(b) 的 a->b', batch1Keys.has('a->b'));
+        for (const key of batch1Keys) {
+            assertEq('batch1 键的 tgt = slide', tgtIdFromEdgeKey(key), batch1.tgtId);
+        }
+
+        const frontier = plan.backwardFrontierByBatchIndex[1]!;
+        const frontierMax = maxShareInEdgeKeySet(incoming, frontier);
+        const mi = 0.6;
+        const redMap = buildMaxNormalizedRenderStrengthByKey(incoming, mi, undefined, batch1Keys);
+        const blueMap = buildMaxNormalizedRenderStrengthByKey(incoming, mi, frontierMax);
+        for (const key of batch1Keys) {
+            assert('红图仅含 slide 入边', redMap.has(key));
+            assertClose(`红[${key}] 集合内 max`, redMap.get(key) ?? 0, mi);
+            assert(
+                `红[${key}] ≥ 蓝（前沿 max 归一）`,
+                (redMap.get(key) ?? 0) >= (blueMap.get(key) ?? 0) - 1e-9,
+            );
+        }
+    }
+}
+
+// ── summary ─────────────────────────────────────────────────────────────────
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);