DAG增加螺旋模式，支持teacher forcing

backend/access_log.py

@@ -52,6 +52,20 @@ def _log_request(event_type: str, details: str = "", client_ip: str = None):
     print(log_msg)
 
 
+def _log_str_preview(s: str, max_visible: int) -> str:
+    """
+    访问日志中的字符串预览：超过 max_visible 时省略中间，前后各保留约一半原文，
+    中间统一为 ……（与旧版「仅前缀」使用相同的 max_visible 取值）。
+    """
+    if max_visible < 1:
+        return s
+    if len(s) <= max_visible:
+        return s
+    head = max_visible // 2
+    tail = max_visible - head
+    return s[:head] + "……" + s[-tail:]
+
+
 def log_page_load(path: str):
     from backend.visit_stats import record_page_load
 
@@ -89,7 +103,8 @@ def log_analyze_request(text: str, stream_mode: bool = False, client_ip: str = N
         request_id = _request_counter
     
     preview_length = 100
-    text_preview = text[:preview_length] + '......' if text and len(text) > preview_length else (text if text else '')
+    raw = text if text else ""
+    text_preview = _log_str_preview(raw, preview_length)
     char_count = len(text) if text else 0
     byte_count = len(text.encode('utf-8')) if text else 0
     mode_str = "(stream)" if stream_mode else ""
@@ -150,8 +165,8 @@ def log_analyze_semantic_request(query: str, text: str, client_ip: str = None):
         request_id = _request_counter
 
     preview = 50
-    q_preview = query[:preview] + "..." if len(query) > preview else query
-    t_preview = text[:preview] + "..." if len(text) > preview else text
+    q_preview = _log_str_preview(query, preview)
+    t_preview = _log_str_preview(text, preview)
     details = f"req_id={request_id}, query='{q_preview}', text='{t_preview}', chars={len(text)}"
     _log_request("📥 semantic 分析请求", details, client_ip)
 
@@ -183,7 +198,7 @@ def log_openai_completions_request(
         request_id = _request_counter
 
     preview = 100
-    p_preview = prompt[:preview] + "..." if len(prompt) > preview else prompt
+    p_preview = _log_str_preview(prompt, preview)
     details = (
         f"req_id={request_id}, model='{model}', "
         f"prompt='{p_preview}', chars={len(prompt)}"
@@ -196,6 +211,7 @@ def log_openai_completions_request(
 def log_prediction_attribute_request(
     context: str,
     target_prediction: Optional[str],
+    target_token_id: Optional[int],
     model: str,
     client_ip: str = None,
 ) -> int:
@@ -212,12 +228,11 @@ def log_prediction_attribute_request(
         request_id = _request_counter
 
     context_preview = 150
-    c_preview = (
-        context[:context_preview] + "..."
-        if len(context) > context_preview
-        else context
-    )
-    target_show = "<top-1>" if target_prediction is None else target_prediction
+    c_preview = _log_str_preview(context, context_preview)
+    if target_token_id is not None:
+        target_show = f"<token_id:{target_token_id}>"
+    else:
+        target_show = "<top-1>" if target_prediction is None else target_prediction
     details = (
         f"req_id={request_id}, model={model!r}, context='{c_preview}', target='{target_show}', "
         f"context_chars={len(context)}"
@@ -237,13 +252,10 @@ def log_openai_completions_prompt_request(
     """记录 POST /v1/completions/prompt（仅拼装 chat template，不分配 req_id）。"""
     preview = 50
 
-    def _pv(s: str) -> str:
-        return s[:preview] + "..." if len(s) > preview else s
-
-    up = _pv(user_prompt)
+    up = _log_str_preview(user_prompt, preview)
     if system is None:
         details = f"model='{model}', user_prompt='{up}'"
     else:
-        details = f"model='{model}', system='{_pv(system)}', user_prompt='{up}'"
+        details = f"model='{model}', system='{_log_str_preview(system, preview)}', user_prompt='{up}'"
     _log_request("📥 openai completions/prompt 请求", details, client_ip)
 

backend/api/openai_completions.py

@@ -8,6 +8,7 @@ import traceback
 from typing import Any, Callable, Dict, List, Optional, Tuple
 
 from backend.model_manager import _inference_lock, get_semantic_model_display_name
+from backend.prediction_attributor import _slot_for_prediction_attr_model
 from backend.oom import exit_if_oom, is_oom_error
 from backend.completion_generator import (
     PromptTooLongError,
@@ -332,7 +333,12 @@ def completions_prompt(completions_prompt_request):
     )
 
     try:
-        prompt_used = apply_chat_template_for_completion(prompt, system_opt)
+        slot = _slot_for_prediction_attr_model(model)
+    except ValueError as e:
+        return {"success": False, "message": str(e)}, 400
+
+    try:
+        prompt_used = apply_chat_template_for_completion(prompt, system_opt, slot=slot)
     except PromptTooLongError as e:
         return {"success": False, "message": str(e)}, 400
 

backend/api/prediction_attribute.py

@@ -14,13 +14,17 @@ def prediction_attribute(attribution_request):
     对上下文文本的下一 token 预测做归因分析。
 
     Args:
-        attribution_request: 包含 context 和 target_prediction 的字典
+        attribution_request: 须含 ``context``、``model``。归因目标二选一：
+            省略 ``target_prediction`` 且省略 ``target_token_id`` 时为 top-1；
+            或传非空 ``target_prediction``（字符串首 token）；
+            或传 ``target_token_id``（非负整数词表 id）；二者不可同时出现。
 
     Returns:
         (响应字典, 状态码) 元组
     """
     context = attribution_request.get("context")
     target_prediction = attribution_request.get("target_prediction")
+    target_token_id = attribution_request.get("target_token_id")
     model = attribution_request.get("model")
 
     if context is None:
@@ -34,6 +38,12 @@ def prediction_attribute(attribution_request):
         return {"success": False, "message": "target_prediction must be a string"}, 400
     if target_prediction == "":
         return {"success": False, "message": "target_prediction must not be empty"}, 400
+    if target_token_id is not None and not isinstance(target_token_id, int):
+        return {"success": False, "message": "target_token_id must be an integer"}, 400
+    if target_token_id is not None and target_token_id < 0:
+        return {"success": False, "message": "target_token_id must be >= 0"}, 400
+    if target_prediction is not None and target_token_id is not None:
+        return {"success": False, "message": "target_prediction and target_token_id are mutually exclusive"}, 400
 
     if model is None:
         return {"success": False, "message": "Missing required field: model"}, 400
@@ -44,7 +54,13 @@ def prediction_attribute(attribution_request):
 
     client_ip = get_client_ip()
     start_time = time.perf_counter()
-    request_id = log_prediction_attribute_request(context, target_prediction, model, client_ip)
+    request_id = log_prediction_attribute_request(
+        context=context,
+        target_prediction=target_prediction,
+        target_token_id=target_token_id,
+        model=model,
+        client_ip=client_ip,
+    )
 
     lock_acquired = _inference_lock.acquire(timeout=LOCK_WAIT_TIMEOUT)
     if not lock_acquired:
@@ -57,7 +73,12 @@ def prediction_attribute(attribution_request):
         }, 503
 
     try:
-        result = analyze_prediction_attribution(context, target_prediction, model=model)
+        result = analyze_prediction_attribution(
+            context,
+            target_prediction,
+            model=model,
+            target_token_id=target_token_id,
+        )
     except ValueError as e:
         return {"success": False, "message": str(e)}, 400
     except Exception as e:

backend/api/tokenize.py

@@ -0,0 +1,36 @@
+"""文本 tokenize API：不做模型推理，仅返回各 token 的字符 offset 与原文。"""
+from backend.prediction_attributor import _slot_for_prediction_attr_model
+from backend.model_manager import ensure_slot_weights_loaded
+
+
+def tokenize(tokenize_request):
+    """
+    对 context 用指定 model 的 tokenizer 分词，返回各 token 的字符 offset 与原文。
+    不持有推理锁，不做前向 / 梯度计算。
+    """
+    context = tokenize_request.get("context")
+    model = tokenize_request.get("model")
+
+    if context is None or not isinstance(context, str) or context == "":
+        return {"success": False, "message": "Missing required field: context"}, 400
+    if model is None or not isinstance(model, str):
+        return {"success": False, "message": "Missing required field: model"}, 400
+
+    try:
+        slot = _slot_for_prediction_attr_model(model)
+    except ValueError as e:
+        return {"success": False, "message": str(e)}, 400
+
+    tokenizer, _, _ = ensure_slot_weights_loaded(slot)
+
+    enc = tokenizer(context, return_offsets_mapping=True)
+    token_ids = enc["input_ids"]
+    if token_ids and isinstance(token_ids[0], list):
+        token_ids = token_ids[0]
+    spans = [
+        {"offset": [s, e], "raw": context[s:e], "token_id": int(tid)}
+        for (s, e), tid in zip(enc["offset_mapping"], token_ids)
+        if s < e  # 过滤 BOS/EOS 等长度为 0 的特殊 token
+    ]
+
+    return {"success": True, "spans": spans}, 200

backend/completion_generator.py

@@ -19,7 +19,7 @@ from transformers import StoppingCriteria, StoppingCriteriaList, TextStreamer
 from backend.api.utils import round_to_sig_figs
 from backend.app_context import get_verbose
 from backend.device import DeviceManager
-from backend.model_manager import ensure_semantic_slot_ready
+from backend.model_manager import ModelSlot, ensure_semantic_slot_ready, ensure_slot_weights_loaded
 from backend.pred_topk_format import pred_topk_pairs_from_probs_1d
 from backend.runtime_config import DEFAULT_TOPK
 
@@ -517,15 +517,17 @@ def core_generate_from_text(
 def apply_chat_template_for_completion(
     user_content: str,
     system: Optional[str] = None,
+    *,
+    slot: ModelSlot = ModelSlot.SEMANTIC,
 ) -> str:
     """
     将单条 user 文本套用到 tokenizer chat template，返回实际送入 core_generate_from_text 的字符串。
 
     调用方未传入 ``system``（即 ``None``）时仅拼装单条 user 消息；传入字符串时（含 ``\"\"``、仅空白）
     原样作为 chat template 的 system 段，不做裁剪或改写。长度与上下文上限由 ``core_generate_from_text``
-    在生成前校验。
+    在生成前校验。slot 控制使用哪个槽位的 tokenizer（base 传 ModelSlot.MAIN）。
     """
-    tokenizer, _, _ = ensure_semantic_slot_ready()
+    tokenizer, _, _ = ensure_slot_weights_loaded(slot)
     if system is None:
         messages = [{"role": "user", "content": user_content}]
     else:

backend/prediction_attributor.py

@@ -51,7 +51,11 @@ def _slot_for_prediction_attr_model(model: str) -> ModelSlot:
 
 
 def analyze_prediction_attribution(
-    context: str, target_prediction: Optional[str] = None, *, model: str
+    context: str,
+    target_prediction: Optional[str] = None,
+    *,
+    model: str,
+    target_token_id: Optional[int] = None,
 ) -> Dict:
     """
     计算 context 中各 token 对 target_prediction 首 token 预测的归因分。
@@ -59,7 +63,8 @@ def analyze_prediction_attribution(
     Args:
         context: 输入上下文文本（token 数不得超过 ATTRIBUTION_MAX_TOKEN_LENGTH，否则抛 ValueError）
         target_prediction: 目标预测文本；tokenize 后取第一个 token 作为归因目标。
-                           省略或传 None 时自动使用 top-1（贪心解码）。
+        target_token_id: 目标 token id；用于 teacher forcing 按 tokenizer 词表精确指定目标。
+        target_prediction 与 target_token_id 仅可二选一；两者均省略时自动使用 top-1（贪心解码）。
         model: ``base`` 为主槽位权重，``instruct`` 为语义槽位权重（与 API 请求体一致）
 
     Returns:
@@ -78,8 +83,12 @@ def analyze_prediction_attribution(
         get_main_model_display_name() if slot == ModelSlot.MAIN else get_semantic_model_display_name()
     )
 
-    # 归因目标 id 仅在前向得到 logits 后解析：top-1 用 argmax；显式 target 用 encode（可与 argmax 不同）。
-    use_top1 = target_prediction is None
+    if target_prediction is not None and target_token_id is not None:
+        raise ValueError("target_prediction and target_token_id are mutually exclusive")
+
+    # 归因目标 id 仅在前向得到 logits 后解析：
+    # top-1 用 argmax；显式 target 用 encode；显式 token id 直接使用请求值。
+    use_top1 = target_prediction is None and target_token_id is None
 
     # 对 context 编码，保留 offset_mapping 用于还原字符位置
     enc = tokenizer(context, return_tensors="pt", return_offsets_mapping=True)
@@ -121,6 +130,12 @@ def analyze_prediction_attribution(
         if use_top1:
             target_token_id = int(topk_ids[0].item())
             target_token = tokenizer.decode([target_token_id])
+        elif target_token_id is not None:
+            if target_token_id < 0 or target_token_id >= logits.shape[-1]:
+                raise ValueError(
+                    f"target_token_id out of range: {target_token_id} (vocab_size={int(logits.shape[-1])})"
+                )
+            target_token = tokenizer.decode([int(target_token_id)])
         else:
             assert target_prediction is not None
             target_ids = tokenizer.encode(target_prediction, add_special_tokens=False)
@@ -129,10 +144,11 @@ def analyze_prediction_attribution(
             target_token_id = target_ids[0]
             target_token = tokenizer.decode([target_token_id])
 
-        target_prob = round_to_sig_figs(probs[target_token_id].item())
+        assert target_token_id is not None
+        target_prob = round_to_sig_figs(probs[int(target_token_id)].item())
 
         # 对目标 token 的 raw logit 反传（不经 softmax，避免饱和与竞争污染）
-        logits[target_token_id].backward()
+        logits[int(target_token_id)].backward()
 
         grad = embeds.grad
         if grad is None:
@@ -168,7 +184,7 @@ def analyze_prediction_attribution(
             print(f"⚠️ token_attribution 中有 {nan_count} 个 score 为 NaN/Inf，已替换为 0。")
 
         eos_id = tokenizer.eos_token_id
-        is_eos = eos_id is not None and target_token_id == int(eos_id)
+        is_eos = eos_id is not None and int(target_token_id) == int(eos_id)
 
         return {
             "model": model_display,

client/src/css/attribution.scss

@@ -104,10 +104,6 @@
 .attribution-exclude-prompt-patterns-header {
   flex-wrap: wrap;
 
-  .semantic-submode-label {
-    font-size: inherit;
-  }
-
   &:not(:has(#attribution_exclude_prompt_patterns_enable:checked)) .semantic-submode-label {
     color: var(--text-muted);
   }

client/src/css/gen_attribute.scss

@@ -140,9 +140,9 @@
     }
   }
 
-  // linear-arc 布局禁拖：不显示 grab（由 .gen-attr-dag-stack 上的 class 标记）
+  // 非 text-flow 布局禁拖：不显示 grab（由 .gen-attr-dag-stack 上的 class 标记）
   #results.gen-attr-results-surface.LMF
-    .gen-attr-dag-stack.gen-attr-dag-linear-arc-layout
+    .gen-attr-dag-stack.gen-attr-dag-no-node-drag-layout
     .gen-attr-dag-svg
     .gen-attr-dag-node--selected {
     cursor: default;
@@ -305,21 +305,92 @@
   height: 50px;
 }
 
+// Raw / User / Forced continuation：统一高度（不占 chat 默认 250px 主 prompt 区）
+.input-section .textarea-wrapper textarea#gen_attr_raw_text,
+.input-section .textarea-wrapper textarea#gen_attr_user_text,
+.input-section .textarea-wrapper textarea#gen_attr_teacher_forcing_text {
+  height: 90px;
+  min-height: 60px;
+  max-height: 250px;
+}
+
+body.gen-attribute-page .input-section {
+  span.semantic-submode-label {
+    color: var(--text-muted);
+  }
+
+  .semantic-submode-row:not(.attribution-exclude-prompt-patterns-header):not(.attribution-exclude-generated-patterns-header) {
+    label.semantic-submode-label {
+      color: var(--text-primary);
+    }
+
+    label.semantic-submode-label:has(> input[type='checkbox']:not(:checked)) {
+      color: var(--text-muted);
+    }
+  }
+
+  // Start 上方的 prompt 区标题与同系字号（非 .semantic-submode-row 后代时补齐 9pt）
+  > .semantic-submode-row.chat-raw-prompt-mode-row label.semantic-submode-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .chat-prompt-panel > .input-header > .semantic-submode-label {
+    font-size: 9pt;
+  }
+
+  // System：在 input-header 内（非 semantic-submode-row），勾选主次色与勾选行一致
+  #gen_attr_system_prompt_panel.chat-prompt-panel > .input-header label.chat-use-system-label.semantic-submode-label {
+    font-size: 9pt;
+
+    &:has(> input[type='checkbox']:not(:checked)) {
+      color: var(--text-muted);
+    }
+
+    &:has(> input[type='checkbox']:checked) {
+      color: var(--text-primary);
+    }
+  }
+}
+
 // 与 Attribution 页 Exclude prompt patterns 同形；generated 仅本页有 UI（持久化键见 attributionExclude*PatternsStorage）
 .attribution-exclude-prompt-patterns-row {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  // Teacher forcing：与同页 Chat 模板的相邻面板间距（12px，见 chat.scss `#chat_input_panel`）对齐；容器默认 gap 仅 4px 会显得挤。
+  &:has(.gen-attr-teacher-forcing-toggle-row) {
+    gap: 12px;
+  }
+}
+
+// Teacher forcing / Stop after：勾选行与同页 semantic-submode 一致（字号、未勾选灰色）；勾选+文本 inline-flex 对齐
+.gen-attr-teacher-forcing-toggle-row label.semantic-submode-label,
+#gen_attr_teacher_forcing_block.chat-prompt-panel .gen-attr-stop-after-tf-row label.semantic-submode-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+// 强制续写块内 textarea 与「Stop after teacher forcing」；整块与下方 Model / Start 行的节奏（比照本列其它块 margin-top 10px）
+#gen_attr_teacher_forcing_block.chat-prompt-panel .gen-attr-stop-after-tf-row {
+  margin-top: 8px;
+}
+
+.gen-attribute-page .input-section > .textarea-wrapper.chat-prompt-actions-row {
+  margin-top: 10px;
 }
 
 .attribution-exclude-prompt-patterns-header {
   flex-wrap: wrap;
 
-  .semantic-submode-label {
-    font-size: inherit;
-  }
-
   &:not(:has(#gen_attr_exclude_prompt_patterns_enable:checked)) .semantic-submode-label {
     color: var(--text-muted);
   }
@@ -332,10 +403,6 @@
 .attribution-exclude-generated-patterns-header {
   flex-wrap: wrap;
 
-  .semantic-submode-label {
-    font-size: inherit;
-  }
-
   &:not(:has(#gen_attr_exclude_generated_patterns_enable:checked)) .semantic-submode-label {
     color: var(--text-muted);
   }
@@ -353,6 +420,18 @@
 
 .gen-attr-dag-measure-width-row .gen-attr-dag-layout-mode-group {
   margin-right: 12px;
+
+  .semantic-submode-label,
+  .gen-attr-dag-layout-mode-select {
+    font-weight: 700;
+  }
+}
+
+.gen-attr-dag-measure-width-row .gen-attr-dag-replay-speed-row {
+  > .semantic-submode-label,
+  .gen-attr-dag-replay-mode-select {
+    font-weight: 700;
+  }
 }
 
 .gen-attr-dag-replay-speed-row {

client/src/gen_attribute.html

@@ -43,7 +43,7 @@
                 <section class="input-section">
                     <div class="semantic-submode-row chat-raw-prompt-mode-row">
                         <span class="semantic-submode-group">
-                            <label for="gen_attr_skip_chat_template">
+                            <label class="semantic-submode-label" for="gen_attr_skip_chat_template">
                                 <input type="checkbox" id="gen_attr_skip_chat_template" />
                                 <span data-i18n>Raw prompt mode</span>
                             </label>
@@ -52,7 +52,7 @@
 
                     <div id="gen_attr_raw_input_panel" class="chat-prompt-panel">
                         <div class="input-header">
-                            <span><span class="demo" data-i18n>Raw prompt</span></span>
+                            <span class="semantic-submode-label" data-i18n>Raw prompt</span>
                             <div class="text-action-buttons-top">
                                 <div class="textarea-counter" id="gen_attr_raw_text_count_display">
                                     <span id="gen_attr_raw_text_count_value">0</span> <span data-i18n>chars</span>
@@ -73,9 +73,9 @@
                     <div id="gen_attr_chat_input_panel" hidden>
                         <div class="chat-prompt-panel" id="gen_attr_system_prompt_panel">
                             <div class="input-header">
-                                <label class="chat-use-system-label">
+                                <label class="chat-use-system-label semantic-submode-label" for="gen_attr_use_system_prompt">
                                     <input type="checkbox" id="gen_attr_use_system_prompt" checked />
-                                    <span class="demo" data-i18n>System</span>
+                                    <span data-i18n>System</span>
                                 </label>
                                 <div class="text-action-buttons-top">
                                     <div class="textarea-counter" id="gen_attr_system_text_count_display">
@@ -95,7 +95,7 @@
                         </div>
                         <div class="chat-prompt-panel">
                             <div class="input-header">
-                                <span><span class="demo" data-i18n>User</span></span>
+                                <span class="semantic-submode-label" data-i18n>User</span>
                                 <div class="text-action-buttons-top">
                                     <div class="textarea-counter" id="gen_attr_user_text_count_display">
                                         <span id="gen_attr_user_text_count_value">0</span> <span data-i18n>chars</span>
@@ -114,6 +114,49 @@
                         </div>
                     </div>
 
+                    <div class="attribution-exclude-prompt-patterns-row">
+                        <div class="semantic-submode-row gen-attr-teacher-forcing-toggle-row">
+                            <span class="semantic-submode-group">
+                                <label class="semantic-submode-label"
+                                    title="When enabled, type the exact continuation after the assembled prompt. Each step attributes the next token toward that text (same tokenizer as Model), then stops when the continuation is consumed or EOS."
+                                    data-i18n="title">
+                                    <input type="checkbox" id="gen_attr_teacher_forcing_enable">
+                                    <span data-i18n>Teacher forcing</span>
+                                </label>
+                            </span>
+                        </div>
+                        <div id="gen_attr_teacher_forcing_block" class="chat-prompt-panel" hidden>
+                            <div class="input-header">
+                                <span class="semantic-submode-label" data-i18n>Forced continuation</span>
+                                <div class="text-action-buttons-top">
+                                    <div class="textarea-counter" id="gen_attr_teacher_forcing_text_count_display">
+                                        <span id="gen_attr_teacher_forcing_text_count_value">0</span> <span data-i18n>chars</span>
+                                    </div>
+                                    <button type="button" id="gen_attr_clear_teacher_forcing_btn" class="text-action-btn" data-i18n>Clear</button>
+                                    <button type="button" id="gen_attr_paste_teacher_forcing_btn" class="text-action-btn" data-i18n>Paste</button>
+                                    <button type="button" id="gen_attr_teacher_forcing_history_btn" class="text-action-btn" data-i18n>History</button>
+                                </div>
+                            </div>
+                            <div class="textarea-wrapper chat-prompt-textarea-block">
+                                <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
+                                    <textarea id="gen_attr_teacher_forcing_text"
+                                        spellcheck="false" autocomplete="off"
+                                        title="Expected generated text after the full prompt. Each API step uses the first token of what remains here as the attribution target."
+                                        data-i18n="title"></textarea>
+                                    <ul id="gen_attr_teacher_forcing_history_dropdown" class="semantic-search-history-dropdown"></ul>
+                                </div>
+                            </div>
+                            <div class="semantic-submode-row gen-attr-stop-after-tf-row">
+                                <label class="semantic-submode-label"
+                                    title="When unchecked, generation continues with top-1 after teacher forcing tokens are exhausted, up to Max tokens."
+                                    data-i18n="title">
+                                    <input type="checkbox" id="gen_attr_stop_after_teacher_forcing">
+                                    <span data-i18n>Stop after teacher forcing</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="textarea-wrapper chat-prompt-actions-row">
                         <div class="semantic-submode-row chat-completion-options-row attribution-model-variant-row">
                             <span class="semantic-submode-group">
@@ -146,6 +189,61 @@
                         </div>
                     </div>
 
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group gen-attr-dag-layout-mode-group">
+                            <label class="semantic-submode-label" for="gen_attr_dag_layout_mode">DAG layout mode</label>
+                            <select id="gen_attr_dag_layout_mode"
+                                class="semantic-submode-select gen-attr-dag-layout-mode-select"
+                                title="Choose DAG layout mode. 'text-flow' follows text layout geometry; 'linear-arc' uses fixed-order linear nodes with arc links; 'spiral' lays nodes on an Archimedean spiral (for fun)."
+                                data-i18n="title">
+                                <option value="text-flow">text-flow</option>
+                                <option value="linear-arc">linear-arc</option>
+                                <option value="spiral">spiral (for fun)</option>
+                            </select>
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_compactness_group">
+                            <label class="semantic-submode-label" for="gen_attr_dag_compactness" data-i18n>Compactness</label>
+                            <input type="number" id="gen_attr_dag_compactness" class="gen-attr-dag-measure-width-input"
+                                value="0.5" min="0.05" max="1" step="0.05"
+                                title="Scales DAG node boxes and labels relative to the measurement layer; 1 matches full readout scale. Applies in text-flow and spiral layouts. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
+                                data-i18n="title">
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_measure_width_group">
+                            <label class="semantic-submode-label" for="gen_attr_dag_measure_width">Text width</label>
+                            <input type="number" id="gen_attr_dag_measure_width" class="gen-attr-dag-measure-width-input"
+                                value="500" min="200" max="4000" step="10"
+                                title="Width (px) of the invisible measurement layer used for DAG layout. Only this width affects wrapping and node positions. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
+                                data-i18n="title">
+                            <span class="semantic-submode-label">px</span>
+                        </span>
+                        <span class="semantic-submode-group" id="gen_attr_dag_linear_arc_interval_group" hidden>
+                            <label class="semantic-submode-label" for="gen_attr_dag_linear_arc_interval" data-i18n>Token distance</label>
+                            <input type="number" id="gen_attr_dag_linear_arc_interval" class="gen-attr-dag-measure-width-input"
+                                value="0" min="0" max="400" step="1"
+                                title="Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync."
+                                data-i18n="title">
+                            <span class="semantic-submode-label">px</span>
+                        </span>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_hide_inactive_edges"
+                                    title="When checked, gray DAG edges not adjacent to the hovered or selected node are hidden."
+                                    data-i18n="title">
+                                Hide inactive edges
+                            </label>
+                        </span>
+                    </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label" for="gen_attr_dag_edge_top_p_coverage" data-i18n>Edge top-p coverage</label>
+                            <input type="number" id="gen_attr_dag_edge_top_p_coverage" class="gen-attr-dag-measure-width-input"
+                                value="0.7" min="0.05" max="1" step="0.05"
+                                title="Coverage is the cumulative mass share within each generation step's Top-N candidate pool (after sorting candidates into the pool and normalizing mass inside that pool). Higher values keep more incoming edges. The denominator is this pool only, not every token-attribution entry returned for the step."
+                                data-i18n="title">
+                        </span>
+                    </div>
                     <div class="attribution-exclude-prompt-patterns-row">
                         <div class="semantic-submode-row attribution-exclude-prompt-patterns-header">
                             <span class="semantic-submode-group">
@@ -200,60 +298,6 @@
                             </label>
                         </span>
                     </div>
-                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group">
-                            <label class="semantic-submode-label">
-                                <input type="checkbox" id="gen_attr_dag_hide_inactive_edges"
-                                    title="When checked, gray DAG edges not adjacent to the hovered or selected node are hidden."
-                                    data-i18n="title">
-                                Hide inactive edges
-                            </label>
-                        </span>
-                    </div>
-                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group">
-                            <label class="semantic-submode-label" for="gen_attr_dag_edge_top_p_coverage" data-i18n>Edge top-p coverage</label>
-                            <input type="number" id="gen_attr_dag_edge_top_p_coverage" class="gen-attr-dag-measure-width-input"
-                                value="0.7" min="0.05" max="1" step="0.05"
-                                title="Coverage is the cumulative mass share within each generation step's Top-N candidate pool (after sorting candidates into the pool and normalizing mass inside that pool). Higher values keep more incoming edges. The denominator is this pool only, not every token-attribution entry returned for the step."
-                                data-i18n="title">
-                        </span>
-                    </div>
-                    <div class="gen-attr-dag-measure-width-row semantic-submode-row">
-                        <span class="semantic-submode-group gen-attr-dag-layout-mode-group">
-                            <label class="semantic-submode-label" for="gen_attr_dag_layout_mode">DAG layout mode</label>
-                            <select id="gen_attr_dag_layout_mode"
-                                class="semantic-submode-select gen-attr-dag-layout-mode-select"
-                                title="Choose DAG layout mode. 'text-flow' follows text layout geometry; 'linear-arc' uses fixed-order linear nodes with arc links."
-                                data-i18n="title">
-                                <option value="text-flow">text-flow</option>
-                                <option value="linear-arc">linear-arc</option>
-                            </select>
-                        </span>
-                        <span class="semantic-submode-group" id="gen_attr_dag_compactness_group">
-                            <label class="semantic-submode-label" for="gen_attr_dag_compactness" data-i18n>Compactness</label>
-                            <input type="number" id="gen_attr_dag_compactness" class="gen-attr-dag-measure-width-input"
-                                value="0.5" min="0.05" max="1" step="0.05"
-                                title="Scales DAG node boxes and labels relative to the measurement layer; 1 matches full readout scale. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
-                                data-i18n="title">
-                        </span>
-                        <span class="semantic-submode-group" id="gen_attr_dag_measure_width_group">
-                            <label class="semantic-submode-label" for="gen_attr_dag_measure_width">Text width</label>
-                            <input type="number" id="gen_attr_dag_measure_width" class="gen-attr-dag-measure-width-input"
-                                value="500" min="200" max="4000" step="10"
-                                title="Width (px) of the invisible measurement layer used for DAG layout. Only this width affects wrapping and node positions. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
-                                data-i18n="title">
-                            <span class="semantic-submode-label">px</span>
-                        </span>
-                        <span class="semantic-submode-group" id="gen_attr_dag_linear_arc_interval_group" hidden>
-                            <label class="semantic-submode-label" for="gen_attr_dag_linear_arc_interval" data-i18n>Token distance</label>
-                            <input type="number" id="gen_attr_dag_linear_arc_interval" class="gen-attr-dag-measure-width-input"
-                                value="0" min="0" max="400" step="1"
-                                title="Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync."
-                                data-i18n="title">
-                            <span class="semantic-submode-label">px</span>
-                        </span>
-                    </div>
                     <div class="gen-attr-dag-measure-width-row semantic-submode-row">
                         <span class="semantic-submode-group gen-attr-dag-replay-speed-row">
                             <label class="semantic-submode-label" for="gen_attr_dag_replay_mode" data-i18n>DAG replay speed</label>

client/src/ts/attribution/genAttributeDagEdgeDisplay.ts

@@ -0,0 +1,8 @@
+/**
+ * DAG 边最终 `stroke-opacity`（`normalizedScore × mutualInformationRatio`）的下限：
+ * 小于该值的边不进入图中展示。
+ *
+ * 与同数值在 `genAttributeDagPreprocess.ts` 池内前缀选取里 `relativeFloor = 常数 × topFrac` 复用：
+ * max 归一后首条 `normalizedScore === 1`，故低于该相对份额的条目不可能在 MI≤1 下达到本阈值，属提前筛除。
+ */
+export const DAG_EDGE_MIN_DISPLAY_OPACITY = 0.1;

client/src/ts/attribution/genAttributeDagLinkSegment.ts

@@ -0,0 +1,51 @@
+/** 轴对齐矩形节点：用于连线从边界起止（与 layout 所用的 x,y 左上角一致）。 */
+export type DagLinkRectNode = {
+    x: number;
+    y: number;
+    nodeW: number;
+    nodeH: number;
+};
+
+function nodeCenter(n: DagLinkRectNode): { cx: number; cy: number } {
+    return { cx: n.x + n.nodeW / 2, cy: n.y + n.nodeH / 2 };
+}
+
+/** 轴对齐矩形（半宽 hw、半高 hh）中心沿单位向量 (ux,uy) 到边界的距离。 */
+function distCenterToRectEdgeAlongRay(hw: number, hh: number, ux: number, uy: number): number {
+    const ax = Math.abs(ux);
+    const ay = Math.abs(uy);
+    let t = Infinity;
+    if (ax > 1e-12) t = Math.min(t, hw / ax);
+    if (ay > 1e-12) t = Math.min(t, hh / ay);
+    return Number.isFinite(t) ? t : 0;
+}
+
+/** 两节点矩形边界之间的线段，端点可再回缩 `outsideInset`（与 text-flow 一致）。 */
+export function linkSegmentThroughNodeRects(
+    src: DagLinkRectNode,
+    tgt: DagLinkRectNode,
+    outsideInset: number
+): { x1: number; y1: number; x2: number; y2: number } {
+    const a = nodeCenter(src);
+    const b = nodeCenter(tgt);
+    const dx = b.cx - a.cx;
+    const dy = b.cy - a.cy;
+    const L = Math.hypot(dx, dy);
+    if (L < 1e-9) return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
+    const ux = dx / L;
+    const uy = dy / L;
+    const tA = distCenterToRectEdgeAlongRay(src.nodeW / 2, src.nodeH / 2, ux, uy);
+    const tB = distCenterToRectEdgeAlongRay(tgt.nodeW / 2, tgt.nodeH / 2, ux, uy);
+    const eps = 1e-6;
+    let g = outsideInset;
+    if (tA + tB + 2 * g >= L - eps) g = 0;
+    if (tA + tB + 2 * g >= L - eps) {
+        return { x1: a.cx, y1: a.cy, x2: b.cx, y2: b.cy };
+    }
+    return {
+        x1: a.cx + (tA + g) * ux,
+        y1: a.cy + (tA + g) * uy,
+        x2: b.cx - (tB + g) * ux,
+        y2: b.cy - (tB + g) * uy,
+    };
+}

client/src/ts/attribution/genAttributeDagPreprocess.ts

@@ -9,11 +9,14 @@ import {
 import type { NodeAggregatedEntry } from './genAttributeDagIntervalResolve';
 import type { TokenGenStep } from './tokenGenAttributionRunner';
 import { getAttentionRawScore } from '../utils/semanticUtils';
+import { DAG_EDGE_MIN_DISPLAY_OPACITY } from './genAttributeDagEdgeDisplay';
 
 /** 与 DAG 节点 id 一致：来自 API `token_attribution` 几何（按 offset 去重，独立于 exclude/归一化）。 */
 export type PromptTokenSpan = {
     offset: [number, number];
     raw: string;
+    /** tokenizer 词表 id（/api/tokenize 返回）；DAG 几何不依赖此字段。 */
+    token_id?: number;
 };
 
 /** 每步在 exclude 之后按 `score` 降序取前 N 条作为候选池，避免长上下文长尾稀释。 */
@@ -30,10 +33,6 @@ export function clampDagEdgeTopPCoverage(n: number): number {
     return Math.min(DAG_EDGE_TOP_P_COVERAGE_MAX, Math.max(DAG_EDGE_TOP_P_COVERAGE_MIN, n));
 }
 
-/** 候选池内相对最强条目的下限系数：池内 L1 份额小于该比例×首条份额时停止。 */
-// topShare 的线有最大的透明度，所以这里对应的是最小的透明度是最大透明度的比例
-const DAG_EDGE_RELATIVE_TOP_SHARE_FLOOR_BETA = 0.1;
-
 /**
  * 按 `score` 降序排序后取前 min(N, length) 项。
  * 会 **原地** `sort` 输入数组（与池内 `poolMassFrac` 次序一致，调用方无需再按份额排序）。
@@ -64,9 +63,14 @@ function normalizeTopNPoolForDagSparse<T extends { score: number }>(tokens: T[])
 
 /**
  * 在候选池已按 `score` 降序、池内归一保持该顺序的前提下，按遍历顺序取前缀，直到：
- * - 池内 L1 份额小于 β×首条份额（分布形状截断），或
+ * - 池内 L1 份额小于 {@link DAG_EDGE_MIN_DISPLAY_OPACITY}×首条份额（`relativeFloor`，系数与最小展示透明度同值），或
  * - 累计达到给定阈值（默认 {@link DAG_EDGE_TOP_P_COVERAGE_DEFAULT}；候选池内 Top-P，非整步全量 token 的分母）。
  * （池内份额与 `score` 单调一致，无需再排序。）
+ *
+ * `relativeFloor`：{@link normalizeTopNPoolForDagSparse} 后首条 `normalizedScore === 1`，且对正分条目有
+ * `poolMassFrac_i / topFrac === normalizedScore_i`。故 `frac < β×topFrac` ⇔ `normalizedScore < β`；
+ * 再乘互信息率（≤1）后不可能达到视图层最小 `stroke-opacity`，等于提前剔除注定画不出的边，与
+ * {@link DAG_EDGE_MIN_DISPLAY_OPACITY} 在视图中的含义对齐。
  */
 function selectTokenAttributionByCumulativeShare<T extends { poolMassFrac: number }>(
     normalized: Array<T>,
@@ -76,7 +80,7 @@ function selectTokenAttributionByCumulativeShare<T extends { poolMassFrac: numbe
 
     const topFrac = normalized[0]?.poolMassFrac ?? 0;
     if (!(topFrac > 0)) return [];
-    const relativeFloor = DAG_EDGE_RELATIVE_TOP_SHARE_FLOOR_BETA * topFrac;
+    const relativeFloor = DAG_EDGE_MIN_DISPLAY_OPACITY * topFrac;
 
     let cum = 0;
     const picked: Array<T> = [];

client/src/ts/attribution/genAttributeDagView.ts

@@ -10,6 +10,7 @@ import {
     phase2RankAndSparsify,
     type PromptTokenSpan,
 } from './genAttributeDagPreprocess';
+import { DAG_EDGE_MIN_DISPLAY_OPACITY } from './genAttributeDagEdgeDisplay';
 import { isOffsetSpanFullyExcluded } from './attributionDisplayModel';
 import {
     alignAndAggregateByNode,
@@ -19,6 +20,7 @@ import {
 } from './genAttributeDagIntervalResolve';
 import type { TokenGenStep } from './tokenGenAttributionRunner';
 import { createGenAttributeDagTextMeasure } from './genAttributeDagTextMeasure';
+import { formatTopkTooltipProbabilityPercent } from '../utils/topkChartUtils';
 import {
     CSS_PSEUDO_FULLSCREEN_CHANGE_EVENT,
     dagResultsSurfaceFullscreenExpanded,
@@ -34,13 +36,14 @@ import {
     paintLinearArcLayout,
 } from './genAttributeDagViewLinearArcMode';
 import { paintTextFlowLayout } from './genAttributeDagViewTextFlowMode';
+import { paintSpiralLayout } from './genAttributeDagViewSpiralMode';
 import { tr } from '../lang/i18n-lite';
 
 /** 再次挂载前执行上一轮 detach（当前为空操作，保留扩展点） */
 const detachGenAttributeDagPanel = new WeakMap<HTMLElement, () => void>();
 
-/** 节点布局模式：`text-flow` 按文字排版层几何；`linear-arc` 按节点插入序线性排布 + 弧线连边。 */
-export type DagLayoutMode = 'text-flow' | 'linear-arc';
+/** 节点布局模式：`text-flow` 按文字排版层几何；`linear-arc` 按节点插入序线性排布 + 弧线连边；`spiral` 螺旋排布。 */
+export type DagLayoutMode = 'text-flow' | 'linear-arc' | 'spiral';
 
 export const DAG_COMPACTNESS_DEFAULT = 0.5;
 /** 下限取小正数以满足 {@link readDisplayScaleFromCss}「必须为正」且不出现零宽度边线。 */
@@ -52,6 +55,40 @@ export function clampDagCompactness(n: number): number {
     return Math.min(DAG_COMPACTNESS_MAX, Math.max(DAG_COMPACTNESS_MIN, n));
 }
 
+/**
+ * 零信心概率基准 p₀：surprisal log₂(1/p₀) 视作单 token 的绝对信息量参照（此处 20 bit）。
+ * p = p₀ 时 {@link computeMutualInformationRatio} 为 0。
+ */
+const ZERO_CONFIDENCE_PROBABILITY_BASELINE = 2 ** -20;
+
+function clamp01(n: number): number {
+    return Math.min(1, Math.max(0, n));
+}
+
+/**
+ * 互信息率 α：在参照熵 log₂(1/p₀) 下，将「前文与目标 token 的可对齐程度」
+ * (log₂(1/p₀) − log₂(1/p)) / log₂(1/p₀) = log₂(p/p₀) / log₂(1/p₀) clamp 到 [0,1]。
+ * 低 surprisal → 高 α；仅用于本步入边透明度，不参与边筛选。缺省 `target_prob` 时返回 1（兼容旧缓存）。
+ */
+function computeMutualInformationRatio(targetProb: number | undefined): number {
+    if (targetProb === undefined) return 1;
+    if (!Number.isFinite(targetProb) || targetProb <= 0) return 0;
+
+    return clamp01(
+        Math.log2(targetProb / ZERO_CONFIDENCE_PROBABILITY_BASELINE) /
+            Math.log2(1 / ZERO_CONFIDENCE_PROBABILITY_BASELINE)
+    );
+}
+
+/**
+ * 节点/边原生 `<title>` 中互信息率 α 的展示：α∈[0,1] 转为百分号字符串，
+ * 与 analysis 主视图 Tooltip 中 Top-K 概率列 {@link formatTopkTooltipProbabilityPercent} 同形。
+ */
+function formatMutualInformationRatioForTooltip(miRatio: number): string {
+    if (!Number.isFinite(miRatio)) return String(miRatio);
+    return formatTopkTooltipProbabilityPercent(miRatio);
+}
+
 export {
     clampLinearArcAdjacentGap,
     LINEAR_ARC_ADJACENT_GAP_DEFAULT,
@@ -89,8 +126,14 @@ type DagNode = DagNodeAttrs;
 type DagLink = {
     source: string;
     target: string;
-    strength?: number;
-    /** 本步内该边在 Σ(score) 中的 L1 份额；用于原生 title「Fan in share」 */
+    /**
+     * 候选池内 max 归一后的归因分，区间约 [0, 1]；作为 `stroke-opacity` 的基项（再乘 {@link mutualInformationRatio}）。
+     * 池内稀疏化与建边前过滤均使用 {@link DAG_EDGE_MIN_DISPLAY_OPACITY}（见 genAttributeDagEdgeDisplay）；条件为 {@link dagLinkStrokeOpacity} 不低于该阈值。
+     */
+    normalizedScore?: number;
+    /** 互信息率：仅作为本步入边的视觉透明度系数，不参与归因筛选。 */
+    mutualInformationRatio?: number;
+    /** 本步内：该边池内 L1 份额在「仅可见边」（{@link DAG_EDGE_MIN_DISPLAY_OPACITY} 过滤后）上的占比；用于原生 title「Fan in share」 */
     scoreShare?: number;
     /** 与 `console.warn('[genAttributeDagView.align] …')` 正文一致（可多条，换行拼接） */
     alignmentNote?: string;
@@ -98,6 +141,11 @@ type DagLink = {
     titleText: string;
 };
 
+/** 与 {@link refreshNodeLinkHighlight} 中边的 `stroke-opacity` 一致：`normalizedScore × mutualInformationRatio`。 */
+function dagLinkStrokeOpacity(d: Pick<DagLink, 'normalizedScore' | 'mutualInformationRatio'>): number {
+    return (d.normalizedScore ?? 1) * (d.mutualInformationRatio ?? 1);
+}
+
 function dagLinkEndpointKey(source: string, target: string): string {
     return `${source}->${target}`;
 }
@@ -156,8 +204,27 @@ function stackLayoutViewportPx(stackEl: HTMLElement): { w: number; h: number } {
     };
 }
 
-/** 在「抵消 display-scale」的基准上再放大，作为 DAG 默认初始视图（d3 zoom 的 k） */
-const DAG_INITIAL_ZOOM_BOOST = 1.5;
+/** text-flow：在「抵消 display-scale」基准上的初始 zoom 倍率（d3 的 k） */
+const DAG_INITIAL_ZOOM_BOOST_TEXT_FLOW = 2;
+/** linear-arc：同上 */
+const DAG_INITIAL_ZOOM_BOOST_LINEAR_ARC = 4;
+/** spiral：同上 */
+const DAG_INITIAL_ZOOM_BOOST_SPIRAL = 2;
+
+function dagInitialZoomBoost(mode: DagLayoutMode): number {
+    switch (mode) {
+        case 'text-flow':
+            return DAG_INITIAL_ZOOM_BOOST_TEXT_FLOW;
+        case 'linear-arc':
+            return DAG_INITIAL_ZOOM_BOOST_LINEAR_ARC;
+        case 'spiral':
+            return DAG_INITIAL_ZOOM_BOOST_SPIRAL;
+        default: {
+            const _: never = mode;
+            throw new Error(`genAttributeDagView: unknown DagLayoutMode (${String(_)})`);
+        }
+    }
+}
 
 /** 与 {@link gen_attribute.scss} `.gen-attr-dag-stack` 中 `--gen-attr-dag-compactness` 一致（display-scale/link 线粗等同源派生） */
 const CSS_VAR_DAG_COMPACTNESS = '--gen-attr-dag-compactness';
@@ -179,7 +246,7 @@ const DAG_NODE_WEAKEN_OPACITY = 0.5;
 const DAG_NODE_HIDDEN_OPACITY = 0.1;
 
 /** 暂时关闭节点上的原生 `<title>` 悬浮提示；恢复时改为 `false`（边不受影响） */
-const DISABLE_DAG_NODE_TOOLTIPS = true;
+const DISABLE_DAG_NODE_TOOLTIPS = false;
 
 /**
  * 边端在矩形边界外侧的留白，相对测量层「1em」的比例（无单位）；与箭头/描边衔接用。
@@ -260,7 +327,7 @@ export type GenAttributeDagHandle = {
      */
     reset(preserveUserViewport?: boolean): void;
     /**
-     * zoom identity 后按内容适配视口；空图走默认缩放；`k` 上限 `k₀`。
+     * zoom identity 后按内容适配视口；空图走默认缩放；`k` 上限 `k₀`（随当前布局模式的初始 zoom 倍率变化）。
      * - `text-flow`：`rootG.getBBox()`（含边）等比落入内框。
      * - `linear-arc`：仅按 `gen-attr-dag-nodes` 行宽定比，token 行相对内框竖直居中（弧不参与）。
      * 若 `layoutDirty` 为真则 no-op（仅已执行的 `syncSvgSize` 生效，不改 pan/zoom），但 `force` 为真时仍
@@ -298,6 +365,8 @@ export type GenAttributeDagHandle = {
      * - `false`（默认）：保留为低透明度（{@link DAG_NODE_HIDDEN_OPACITY}）占位。
      */
     setHideExcludedTokens(hide: boolean): void;
+    /** prompt 层节点是否已注入（即 {@link setPromptTokenSpans} 至少成功添加过一个节点） */
+    hasPromptSpans(): boolean;
     /** 移除 DAG 栈与刷新按钮（离开页面时调用） */
     detach(): void;
 };
@@ -322,20 +391,38 @@ function formatNodeOffsetRange(id: string): string {
     return `[${a}, ${b})`;
 }
 
-function buildNodeNativeTitleText(d: Pick<DagNode, 'displayLabel' | 'id' | 'step'>): string {
-    return `${d.displayLabel}\nOffset: ${formatNodeOffsetRange(d.id)}\nStep: ${d.step}`;
+function buildNodeNativeTitleText(
+    d: Pick<DagNode, 'displayLabel' | 'id' | 'step'> & { targetProb?: number },
+): string {
+    const lines = [
+        d.displayLabel,
+        `Offset: ${formatNodeOffsetRange(d.id)}`,
+        `Step: ${d.step}`,
+    ];
+    const { targetProb } = d;
+    if (targetProb !== undefined && Number.isFinite(targetProb)) {
+        lines.push(`Prob: ${formatTopkTooltipProbabilityPercent(targetProb)}`);
+        lines.push(`MI ratio: ${formatMutualInformationRatioForTooltip(computeMutualInformationRatio(targetProb))}`);
+    }
+    return lines.join('\n');
 }
 
 /** 建边时调用：端点已带 {@link DagNodeAttrs.displayLabel} */
 function buildLinkTitleText(
-    d: Pick<DagLink, 'strength' | 'scoreShare' | 'alignmentNote'>,
+    d: Pick<DagLink, 'normalizedScore' | 'mutualInformationRatio' | 'scoreShare' | 'alignmentNote'>,
     src: DagNode,
     tgt: DagNode
 ): string {
-    const s = d.strength ?? 1;
-    const strengthStr = Number.isFinite(s) ? s.toFixed(3) : String(s);
-
-    const metrics = [`Strength: ${strengthStr}`];
+    const s = d.normalizedScore ?? 1;
+    const normStr = Number.isFinite(s) ? s.toFixed(3) : String(s);
+    const opacity = dagLinkStrokeOpacity(d);
+    const opacityStr = Number.isFinite(opacity) ? opacity.toFixed(3) : String(opacity);
+
+    const metrics = [
+        `Attribution score: ${normStr}`,
+        `Target MI ratio: ${formatMutualInformationRatioForTooltip(d.mutualInformationRatio ?? 1)}`,
+        `Link strength: ${opacityStr}`,
+    ];
     const share = d.scoreShare;
     if (typeof share === 'number' && Number.isFinite(share) && share > 0) {
         metrics.push(`Fan in share: ${(share * 100).toFixed(1)}%`);
@@ -515,6 +602,7 @@ export function initGenAttributeDagView(
             setDagCompactness: noop,
             setEdgeTopPCoverage: noop,
             setHideExcludedTokens: noop,
+            hasPromptSpans: () => false,
             detach: noop,
         };
     }
@@ -529,9 +617,9 @@ export function initGenAttributeDagView(
     const stack = resultsRoot.append('div').attr('class', 'gen-attr-dag-stack');
     const stackEl = stack.node() as HTMLElement;
 
-    /** linear-arc 下禁用节点拖拽；同时用该类覆盖「选中 grab」光标。 */
+    /** 非 text-flow 时节点不可拖；用该类覆盖选中态的 grab 光标（linear-arc / spiral 等）。 */
     function syncStackLayoutDragUi(): void {
-        stackEl.classList.toggle('gen-attr-dag-linear-arc-layout', layoutMode === 'linear-arc');
+        stackEl.classList.toggle('gen-attr-dag-no-node-drag-layout', layoutMode !== 'text-flow');
     }
     syncStackLayoutDragUi();
 
@@ -598,14 +686,14 @@ export function initGenAttributeDagView(
 
     /**
      * 基准缩放为 `1 / --gen-attr-dag-display-scale`：节点几何与 SVG 文字已按 display-scale 相对测量层缩放后，
-     * 再用其倒数做 zoom，使屏上接近未单独缩小时的阅读比例；实际初始 k 还会乘以 `DAG_INITIAL_ZOOM_BOOST`。
+     * 再用其倒数做 zoom，使屏上接近未单独缩小时的阅读比例；实际初始 k 还会乘以 {@link dagInitialZoomBoost}（按布局模式）。
      */
     function initialDagZoomK(): number {
         return 1 / displayScale;
     }
 
     function defaultDagZoomK(): number {
-        return initialDagZoomK() * DAG_INITIAL_ZOOM_BOOST;
+        return initialDagZoomK() * dagInitialZoomBoost(layoutMode);
     }
 
     const zoomBehavior = d3
@@ -659,9 +747,6 @@ export function initGenAttributeDagView(
      */
     let userDraggedNodes = false;
 
-    const strengthToOpacity = (s: number) => s; // 由于有DAG_EDGE_RELATIVE_TOP_SHARE_FLOOR_BETA的限制，所以这里不再限制透明度
-    // const strengthToOpacity = (s: number) => 0.1 + s * 0.9;
-
     let linkSel = rootG
         .selectAll<SVGGElement, DagLink>('g.gen-attr-dag-link')
         .data<DagLink>([], dagLinkDataKey);
@@ -689,6 +774,22 @@ export function initGenAttributeDagView(
             });
             return;
         }
+        if (layoutMode === 'spiral') {
+            const layoutNodes = hideExcludedTokens
+                ? nodes.filter((n) => !isOffsetSpanFullyExcluded(n.start, n.end, dagExcludeIntervals))
+                : nodes;
+            paintSpiralLayout({
+                linkSel,
+                nodeSel,
+                nodes: layoutNodes,
+                linkEndInsetPx,
+                getLinkNodes: (d) => ({
+                    src: endpointNode(d.source, graph),
+                    tgt: endpointNode(d.target, graph),
+                }),
+            });
+            return;
+        }
         paintTextFlowLayout({
             linkSel,
             nodeSel,
@@ -747,14 +848,15 @@ export function initGenAttributeDagView(
                 if (isOffsetSpanFullyExcluded(d.start, d.end, dagExcludeIntervals)) {
                     return hideExcludedTokens ? 0 : DAG_NODE_HIDDEN_OPACITY;
                 }
-                const isPromptLeaf = d.step === -1 && graph.outDegree(d.id) === 0;
+                const hasGenTokens = nodes.some((n) => n.step >= 0);
+                const isPromptLeaf = hasGenTokens && d.step === -1 && graph.outDegree(d.id) === 0;
                 if (focusId || isPromptLeaf) return DAG_NODE_WEAKEN_OPACITY;
                 return 1;
             });
-        // 每条边独立 marker：线与箭头 path 同步 stroke / stroke-opacity（强度仍按边独立）
+        // 每条边独立 marker：线与箭头 path 同步 stroke / stroke-opacity。
+        // normalizedScore 决定边内相对强弱（与 opacity 基项一致）；互信息率只作为整步入边的视觉折扣。
         linkSel.each(function(d) {
-            const incidentToFocus = dagLinkIncidentToFocus(graph, focusId, d);
-            const op = strengthToOpacity(d.strength ?? 1);
+            const op = dagLinkStrokeOpacity(d);
             const stroke =
                 dagLinkHighlightStroke(graph, focusId, d) ?? `var(${CSS_VAR_DAG_NORMAL_LINE_COLOR})`;
             const g = d3.select(this);
@@ -837,7 +939,7 @@ export function initGenAttributeDagView(
                 return g;
             });
         // 不在此处全量重置 marker `stroke-opacity`：紧接着的 {@link refreshNodeLinkHighlight} 会按边
-        // 逐条写 `strengthToOpacity(d.strength)`，任何前值都会被覆盖，全量重置纯冗余。
+        // 逐条写 `dagLinkStrokeOpacity`（与 `<title>` 中 Strength 同源），任何前值都会被覆盖，全量重置纯冗余。
 
         nodeSel = nodeG
             .selectAll<SVGGElement, DagNode>('g.gen-attr-dag-node')
@@ -994,6 +1096,7 @@ export function initGenAttributeDagView(
                 displayLabel,
                 id: targetId,
                 step: stepProcessed,
+                targetProb: response.target_prob,
             }),
         };
         graph.addNode(targetId, targetNode);
@@ -1013,8 +1116,17 @@ export function initGenAttributeDagView(
         const afterExclude = excludeNodeAggregatedEntries(step, aggregated, excludeIntervalContext);
         const selected = phase2RankAndSparsify(afterExclude, { cumulativeShare: edgeTopPCoverage });
 
-        const massSum = selected.reduce((acc, t) => acc + Math.max(0, t.poolMassFrac), 0);
-        for (const item of selected) {
+        const mutualInformationRatio = computeMutualInformationRatio(response.target_prob);
+        // 仅保留可绘制的边；「Fan in share」的分母为下列可见边的池内 L1 份额之和（非完整 sparse 池）。
+        const selectedForDisplay = selected.filter(
+            (item) =>
+                dagLinkStrokeOpacity({
+                    normalizedScore: item.score,
+                    mutualInformationRatio,
+                }) >= DAG_EDGE_MIN_DISPLAY_OPACITY
+        );
+        const massSum = selectedForDisplay.reduce((acc, t) => acc + Math.max(0, t.poolMassFrac), 0);
+        for (const item of selectedForDisplay) {
             const srcId = item.nodeId;
             if (!graph.hasNode(srcId)) {
                 throw new Error(
@@ -1032,7 +1144,8 @@ export function initGenAttributeDagView(
                 );
             }
             const edgeAttrs = {
-                strength: item.score,
+                normalizedScore: item.score,
+                mutualInformationRatio,
                 scoreShare: share,
                 ...(alignmentNote ? { alignmentNote } : {}),
             };
@@ -1109,6 +1222,31 @@ export function initGenAttributeDagView(
                 const rowMidY = bn.y + bn.height / 2;
                 const ty = pad + innerH / 2 - k * rowMidY;
                 svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
+            } else if (layoutMode === 'spiral') {
+                /**
+                 * 螺旋：等比缩放 + 视口中心对齐曲线原点 (0,0)（{@link paintSpiralLayout} 坐标），
+                 * 避免按 bbox 中心 fit 时随步进增长 centroid 漂移导致播放抖动。
+                 */
+                const b = rootG.node()!.getBBox();
+                const xmin = b.x;
+                const xmax = b.x + b.width;
+                const ymin = b.y;
+                const ymax = b.y + b.height;
+                const halfW = innerW / 2;
+                const halfH = innerH / 2;
+                let kFromOrigin = Infinity;
+                if (xmax > 0) kFromOrigin = Math.min(kFromOrigin, halfW / xmax);
+                if (xmin < 0) kFromOrigin = Math.min(kFromOrigin, halfW / (-xmin));
+                if (ymax > 0) kFromOrigin = Math.min(kFromOrigin, halfH / ymax);
+                if (ymin < 0) kFromOrigin = Math.min(kFromOrigin, halfH / (-ymin));
+                const bw = Math.max(b.width, 1e-6);
+                const bh = Math.max(b.height, 1e-6);
+                const kFromSides = Math.min(innerW / bw, innerH / bh);
+                const kRaw = Number.isFinite(kFromOrigin) && kFromOrigin > 0 ? kFromOrigin : kFromSides;
+                const k = Math.min(kRaw, k0);
+                const tx = pad + halfW;
+                const ty = pad + halfH;
+                svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
             } else if (layoutMode === 'text-flow') {
                 /** 与原实现一致：`rootG` 整包 bbox + 宽高双约束顶对齐 */
                 const b = rootG.node()!.getBBox();
@@ -1291,6 +1429,7 @@ export function initGenAttributeDagView(
         setDagCompactness,
         setEdgeTopPCoverage,
         setHideExcludedTokens,
+        hasPromptSpans: () => nodes.some((n) => n.step === -1),
         detach,
     };
 }

client/src/ts/attribution/genAttributeDagViewSpiralMode.ts

@@ -0,0 +1,96 @@
+import * as d3 from 'd3';
+import { linkSegmentThroughNodeRects } from './genAttributeDagLinkSegment';
+
+// ── 可配置参数（代码变量，后续可暴露为 UI 控件）────────────────────────────
+/** 第一个 token 的起始半径（px）：0 = 正中心，> 0 = 距中心该距离处。 */
+const SPIRAL_R0 = 80;
+/** 相邻两圈之间的径向间距（px）。 */
+const SPIRAL_SPACING = 60;
+/** 每个 token 沿螺旋弧长占据的固定步长（px）。 */
+const SPIRAL_ARC_STEP = 40;
+/** 螺旋旋转相位（弧度）：控制螺旋臂展开方向。0 = 向右，-Math.PI/2 = 向上。 */
+const SPIRAL_PHASE = Math.PI * 0.6;
+// ────────────────────────────────────────────────────────────────────────────
+
+type SpiralNodeLike = { nodeW: number; nodeH: number };
+
+/**
+ * 阿基米德螺旋：r(θ) = b·θ，b = spacing / (2π)。
+ *
+ * theta 从 r0/b 起步，使第一个 token 位于半径 r0 处。
+ * 相位 phase 叠加到 cos/sin 的角度，只旋转螺旋臂方向，不影响 r 的增长。
+ * 弧长步进：Δθ ≈ arcStep / sqrt(r² + b²)。
+ */
+function computeSpiralPositions(
+    count: number,
+    r0: number,
+    spacing: number,
+    arcStep: number,
+    phase: number,
+): { cx: number; cy: number }[] {
+    const b = spacing / (2 * Math.PI);
+    let theta = r0 / b;
+    const positions: { cx: number; cy: number }[] = [];
+
+    for (let i = 0; i < count; i++) {
+        const r = b * theta;
+        positions.push({
+            cx: r * Math.cos(theta + phase),
+            cy: r * Math.sin(theta + phase),
+        });
+        theta += arcStep / Math.sqrt(r * r + b * b);
+    }
+    return positions;
+}
+
+/** spiral 模式：token 中心依次落在阿基米德螺旋上，节点保持水平矩形。 */
+export function paintSpiralLayout<
+    LinkDatum,
+    NodeDatum extends SpiralNodeLike,
+>(params: {
+    linkSel: d3.Selection<SVGGElement, LinkDatum, SVGGElement, unknown>;
+    nodeSel: d3.Selection<SVGGElement, NodeDatum, SVGGElement, unknown>;
+    nodes: NodeDatum[];
+    linkEndInsetPx: number;
+    getLinkNodes: (link: LinkDatum) => { src: NodeDatum; tgt: NodeDatum };
+}): void {
+    const { linkSel, nodeSel, nodes, linkEndInsetPx, getLinkNodes } = params;
+
+    const rawPos = computeSpiralPositions(nodes.length, SPIRAL_R0, SPIRAL_SPACING, SPIRAL_ARC_STEP, SPIRAL_PHASE);
+
+    const positionByNode = new Map<NodeDatum, { cx: number; cy: number }>();
+    for (let i = 0; i < nodes.length; i++) {
+        positionByNode.set(nodes[i]!, rawPos[i]!);
+    }
+
+    // 节点：中心落在螺旋点，矩形保持水平
+    nodeSel.attr('transform', (d) => {
+        const pos = positionByNode.get(d);
+        if (pos === undefined) return null;
+        return `translate(${pos.cx - d.nodeW / 2},${pos.cy - d.nodeH / 2})`;
+    });
+
+    // 边：与 text-flow 相同，从矩形边界起止并回缩
+    linkSel.each(function(d) {
+        const { src, tgt } = getLinkNodes(d);
+        const pa = positionByNode.get(src);
+        const pb = positionByNode.get(tgt);
+        if (pa === undefined || pb === undefined) return;
+        const srcRect = {
+            x: pa.cx - src.nodeW / 2,
+            y: pa.cy - src.nodeH / 2,
+            nodeW: src.nodeW,
+            nodeH: src.nodeH,
+        };
+        const tgtRect = {
+            x: pb.cx - tgt.nodeW / 2,
+            y: pb.cy - tgt.nodeH / 2,
+            nodeW: tgt.nodeW,
+            nodeH: tgt.nodeH,
+        };
+        const seg = linkSegmentThroughNodeRects(srcRect, tgtRect, linkEndInsetPx);
+        d3.select(this)
+            .selectAll('path.gen-attr-dag-link-visible')
+            .attr('d', `M ${seg.x1} ${seg.y1} L ${seg.x2} ${seg.y2}`);
+    });
+}

client/src/ts/attribution/genAttributeDagViewTextFlowMode.ts

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

client/src/ts/attribution/predictionAttributeClient.ts

@@ -1,8 +1,9 @@
 /**
- * /api/prediction-attribute：统一请求、JSON 解析与归因结果缓存写入。
- * 命中缓存与 MRU 规则见 {@link ./attributionResultCache}。
+ * /api/prediction-attribute 与 /api/tokenize：统一请求与 JSON 解析。
+ * 归因缓存规则见 {@link ./attributionResultCache}。
  */
 import type { AttributionApiResponse, PredictionAttributeModelVariant } from './attributionResultCache';
+import type { PromptTokenSpan } from './genAttributeDagPreprocess';
 import {
     entryKey,
     removeCachedEntryByContentKey,
@@ -16,12 +17,16 @@ export async function fetchPredictionAttribute(
     apiBaseForRequests: string,
     context: string,
     targetPrediction: string | null,
-    model: PredictionAttributeModelVariant
+    model: PredictionAttributeModelVariant,
+    targetTokenId?: number
 ): Promise<AttributionApiResponse> {
     const bodyObj: Record<string, unknown> = { context, model };
     if (targetPrediction !== null) {
         bodyObj.target_prediction = targetPrediction;
     }
+    if (typeof targetTokenId === 'number' && Number.isInteger(targetTokenId) && targetTokenId >= 0) {
+        bodyObj.target_token_id = targetTokenId;
+    }
     const res = await fetch(`${apiBaseForRequests}/api/prediction-attribute`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -76,3 +81,31 @@ export async function loadPredictionAttributeWithCache(
     await save({ context, targetPrediction }, json, 'complete');
     return json;
 }
+
+/**
+ * POST /api/tokenize：快速分词，返回 prompt 各 token 的 offset + raw。
+ * 不占推理锁，响应极快，用于在 DAG 模式流式生成时提前展示 prompt 节点。
+ */
+export async function fetchTokenize(
+    apiBase: string,
+    context: string,
+    model: PredictionAttributeModelVariant,
+): Promise<PromptTokenSpan[]> {
+    const res = await fetch(`${apiBase}/api/tokenize`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ context, model }),
+    });
+    const text = await res.text();
+    let json: { success: boolean; spans?: PromptTokenSpan[]; message?: string };
+    try {
+        json = JSON.parse(text) as typeof json;
+    } catch {
+        const snippet = text.slice(0, 160) + (text.length > 160 ? '…' : '');
+        throw new Error(`/api/tokenize response is not JSON (HTTP ${res.status}): ${snippet}`);
+    }
+    if (!res.ok || !json.success) {
+        throw new Error(json.message ?? `HTTP ${res.status}`);
+    }
+    return json.spans ?? [];
+}

client/src/ts/attribution/tokenGenAttributionRunner.ts

@@ -1,10 +1,21 @@
 /**
- * 逐 token 生成归因：基于 /api/prediction-attribute (top-1 模式) 的贪心解码循环。
- * 每次 API 调用 = 一次前向 pass（贪心解码一个 token）+ 对该 token 的完整归因。
+ * 逐 token 生成归因：基于 /api/prediction-attribute。
+ * 默认 `target_prediction` 为空 → 服务端 top-1 贪心；传入 {@link TokenGenAttributionOptions.teacherForcingContinuation} 时按用户续写逐步强制首 token 再归因。
  */
 import type { AttributionApiResponse, PredictionAttributeModelVariant } from './attributionResultCache';
+import type { PromptTokenSpan } from './genAttributeDagPreprocess';
 import type { CompletionFinishReason } from '../utils/generationEndReasonLabel';
-import { fetchPredictionAttribute } from './predictionAttributeClient';
+import { fetchPredictionAttribute, fetchTokenize } from './predictionAttributeClient';
+
+function splitCodePointPrefix(text: string, prefixLength: number): { prefix: string; rest: string } | null {
+    if (prefixLength < 0) return null;
+    const chars = Array.from(text);
+    if (prefixLength > chars.length) return null;
+    return {
+        prefix: chars.slice(0, prefixLength).join(''),
+        rest: chars.slice(prefixLength).join(''),
+    };
+}
 
 export type TokenGenStep = {
     /** 本步归因所用的 context（不含新 token） */
@@ -24,6 +35,16 @@ export type TokenGenAttributionOptions = {
     initialContext: string;
     apiPrefix: string;
     model: PredictionAttributeModelVariant;
+    /**
+     * 非空则启用 teacher forcing：启动时仅调用一次 `/api/tokenize` 预取 token_id，
+     * 后续每步通过 `target_token_id` 指定归因目标，并按 spans 的码点覆盖推进。
+     */
+    teacherForcingContinuation?: string;
+    /**
+     * teacher forcing token 用尽后是否停止。
+     * `true`：停止；`false`（默认）：切换为 top-1 继续生成，直到 maxTokens 或 EOS。
+     */
+    stopAfterTeacherForcing?: boolean;
     /** 最大生成 token 数，默认 200 */
     maxTokens?: number;
     /** 每生成一个 token 后的回调；`stepIndex` 从 0 起，与 {@link TokenGenAttributionHandle.getAllSteps} 下标一致 */
@@ -41,13 +62,87 @@ export type TokenGenAttributionHandle = {
 };
 
 export function startTokenGenAttribution(opts: TokenGenAttributionOptions): TokenGenAttributionHandle {
-    const { initialContext, apiPrefix, model, maxTokens = 200 } = opts;
+    const { initialContext, apiPrefix, model, maxTokens = 200, stopAfterTeacherForcing = false } = opts;
+    const tfOpt = opts.teacherForcingContinuation;
+    const forcingEnabled = typeof tfOpt === 'string' && tfOpt.length > 0;
     const promptRegionEnd = initialContext.length;
     let aborted = false;
     let generatedText = '';
+    let remainingForcing = tfOpt ?? '';
+    let forcingPieces: Array<{ token: string; tokenId: number }> = [];
+    let forcingPieceIndex = 0;
     const steps: TokenGenStep[] = [];
 
     const loop = async (): Promise<void> => {
+        if (forcingEnabled) {
+            let spans;
+            try {
+                spans = await fetchTokenize(apiPrefix, tfOpt, model);
+            } catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                opts.onError(error);
+                opts.onComplete('error');
+                return;
+            }
+            if (!spans.length) {
+                opts.onError(new Error('Teacher forcing tokenize returned empty spans.'));
+                opts.onComplete('error');
+                return;
+            }
+            const chars = Array.from(tfOpt);
+            let cursor = 0;
+            const pieces: Array<{ token: string; tokenId: number }> = [];
+            for (const span of spans) {
+                const [start, end] = span.offset;
+                const tokenId = (span as PromptTokenSpan).token_id;
+                if (start < 0 || end <= start || end > chars.length) {
+                    opts.onError(
+                        new Error(`Teacher forcing tokenize returned invalid span [${start}, ${end}) for continuation.`)
+                    );
+                    opts.onComplete('error');
+                    return;
+                }
+                if (start > cursor) {
+                    opts.onError(
+                        new Error(
+                            `Teacher forcing tokenize produced gap: span starts at ${start} but consumed cursor is ${cursor}.`
+                        )
+                    );
+                    opts.onComplete('error');
+                    return;
+                }
+                if (end <= cursor) {
+                    continue;
+                }
+                if (typeof tokenId !== 'number' || !Number.isInteger(tokenId) || tokenId < 0) {
+                    opts.onError(
+                        new Error(
+                            `Teacher forcing tokenize span is missing token_id at offset [${start}, ${end}).`
+                        )
+                    );
+                    opts.onComplete('error');
+                    return;
+                }
+                pieces.push({ token: chars.slice(cursor, end).join(''), tokenId });
+                cursor = end;
+            }
+            if (cursor !== chars.length) {
+                opts.onError(
+                    new Error(
+                        `Teacher forcing tokenize did not fully cover continuation: consumed ${cursor}/${chars.length} code points.`
+                    )
+                );
+                opts.onComplete('error');
+                return;
+            }
+            if (!pieces.length) {
+                opts.onError(new Error('Teacher forcing tokenize produced no consumable pieces.'));
+                opts.onComplete('error');
+                return;
+            }
+            forcingPieces = pieces;
+        }
+
         while (true) {
             if (aborted) {
                 opts.onComplete('abort');
@@ -57,12 +152,19 @@ export function startTokenGenAttribution(opts: TokenGenAttributionOptions): Toke
                 opts.onComplete('length');
                 return;
             }
+            const forcingExhausted = forcingEnabled && forcingPieceIndex >= forcingPieces.length;
+            if (forcingExhausted && stopAfterTeacherForcing) {
+                opts.onComplete('stop');
+                return;
+            }
 
             const context = initialContext + generatedText;
+            const targetTokenId =
+                forcingEnabled && !forcingExhausted ? forcingPieces[forcingPieceIndex]!.tokenId : undefined;
+
             let response: AttributionApiResponse;
             try {
-                // target_prediction 传 null → 服务端 top-1 贪心解码
-                response = await fetchPredictionAttribute(apiPrefix, context, null, model);
+                response = await fetchPredictionAttribute(apiPrefix, context, null, model, targetTokenId);
             } catch (err) {
                 const error = err instanceof Error ? err : new Error(String(err));
                 opts.onError(error);
@@ -75,9 +177,30 @@ export function startTokenGenAttribution(opts: TokenGenAttributionOptions): Toke
                 return;
             }
 
-            const token = response.target_token ?? '';
+            let token = response.target_token ?? '';
+
+            if (forcingEnabled && !forcingExhausted) {
+                token = forcingPieces[forcingPieceIndex]!.token;
+                const sliced = splitCodePointPrefix(remainingForcing, Array.from(token).length);
+                if (!sliced) {
+                    opts.onError(
+                        new Error(
+                            `Teacher forcing piece consume failed at step=${forcingPieceIndex}: token="${token}", remaining="${remainingForcing}"`
+                        )
+                    );
+                    opts.onComplete('error');
+                    return;
+                }
+                remainingForcing = sliced.rest;
+                forcingPieceIndex++;
+            }
             generatedText += token;
 
+            if (aborted) {
+                opts.onComplete('abort');
+                return;
+            }
+
             const step: TokenGenStep = {
                 context,
                 promptRegionEnd,

client/src/ts/chat/buildCompletionDisplayResult.ts

@@ -9,7 +9,7 @@ import {
 } from '../utils/dataValidation';
 
 /** 与手动 curl 调试一致的默认 model 字段 */
-export const CHAT_DEFAULT_COMPLETION_MODEL = 'any-id';
+export const CHAT_DEFAULT_COMPLETION_MODEL = 'instruct';
 
 function normalizeServerTokens(raw: TokenWithOffset[]): FrontendToken[] {
     return raw.map((t) => ({

client/src/ts/gen_attribute.ts

@@ -21,6 +21,7 @@ import {
     clampDagEdgeTopPCoverage,
     DAG_EDGE_TOP_P_COVERAGE_DEFAULT,
     extractPromptTokenSpans,
+    type PromptTokenSpan,
 } from './attribution/genAttributeDagPreprocess';
 import {
     initGenAttributeDagView,
@@ -36,6 +37,7 @@ import {
     type TokenGenAttributionHandle,
     type TokenGenStep,
 } from './attribution/tokenGenAttributionRunner';
+import { fetchTokenize } from './attribution/predictionAttributeClient';
 import { completionFinishReasonLabel, type CompletionFinishReason } from './utils/generationEndReasonLabel';
 import {
     buildCachedContentUrlParam,
@@ -44,6 +46,7 @@ import {
     removeCachedEntryByContentKey,
     save,
     touchCachedEntryByContentKey,
+    type GenAttrCacheKey,
 } from './storage/genAttributeRunCache';
 import { bindExcludeGeneratedPatternsUi, bindExcludePromptPatternsUi } from './attribution/excludePromptPatternsUi';
 import { initCachedHistoryQueryDropdown, type CachedHistorySelectContext } from './utils/cachedHistoryUi';
@@ -63,10 +66,11 @@ import {
 } from './demos/genAttributeBundledDemos';
 import { extractErrorMessage } from './utils/errorUtils';
 import { exportJsonFile } from './storage/localFileIO';
-import type { GenAttrCachedRun } from './storage/genAttributeRunCache';
+import type { GenAttrCachedRun, GenAttrRunDraft } from './storage/genAttributeRunCache';
 import {
     GEN_ATTR_RAW_INPUT_HISTORY_KEY,
     GEN_ATTR_SYSTEM_INPUT_HISTORY_KEY,
+    GEN_ATTR_TEACHER_FORCING_INPUT_HISTORY_KEY,
     GEN_ATTR_USER_INPUT_HISTORY_KEY,
     initQueryHistoryDropdown,
     saveHistory,
@@ -76,7 +80,6 @@ import {
     writeSkipChatTemplateToStorage,
 } from './utils/chatPromptTemplateMode';
 import { postCompletionsPrompt, postCompletionsStop } from './api/completionsClient';
-import { CHAT_DEFAULT_COMPLETION_MODEL } from './chat/buildCompletionDisplayResult';
 import { updateApiUsageDisplay, updateModel, validateMetricsElements } from './utils/textMetricsUpdater';
 
 d3.selectAll('.loadersmall').style('display', 'none');
@@ -239,7 +242,7 @@ function readStoredDagReplayPacingMode(): DagReplayPacingMode {
 function readStoredDagLayoutMode(): DagLayoutMode {
     try {
         const v = localStorage.getItem(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY);
-        if (v === 'text-flow' || v === 'linear-arc') return v;
+        if (v === 'text-flow' || v === 'linear-arc' || v === 'spiral') return v;
     } catch {
         // ignore
     }
@@ -254,12 +257,6 @@ const apiBaseForRequests = apiPrefix === '' ? '' : String(apiPrefix);
 const adminManager = AdminManager.getInstance();
 api.setAdminToken(adminManager.isInAdminMode() ? adminManager.getAdminToken() : null);
 
-const modelParam = URLHandler.parameters['model'];
-const completionModel =
-    typeof modelParam === 'string' && modelParam.length > 0
-        ? modelParam
-        : CHAT_DEFAULT_COMPLETION_MODEL;
-
 // --- DOM ---
 const rawTextField = d3.select('#gen_attr_raw_text');
 const rawTextCountValue = d3.select('#gen_attr_raw_text_count_value');
@@ -279,6 +276,12 @@ const clearUserBtn = d3.select('#gen_attr_clear_user_btn');
 const pasteUserBtn = d3.select('#gen_attr_paste_user_btn');
 const userHistoryBtn = document.getElementById('gen_attr_user_history_btn');
 
+const teacherForcingTextField = d3.select('#gen_attr_teacher_forcing_text');
+const teacherForcingTextCountValue = d3.select('#gen_attr_teacher_forcing_text_count_value');
+const clearTeacherForcingBtn = d3.select('#gen_attr_clear_teacher_forcing_btn');
+const pasteTeacherForcingBtn = d3.select('#gen_attr_paste_teacher_forcing_btn');
+const teacherForcingHistoryBtn = document.getElementById('gen_attr_teacher_forcing_history_btn');
+
 const rawInputPanel = document.getElementById('gen_attr_raw_input_panel');
 const chatInputPanel = document.getElementById('gen_attr_chat_input_panel');
 const skipChatTemplateInput = document.getElementById(
@@ -288,6 +291,13 @@ const genAttrUseSystemPromptInput = document.getElementById(
     'gen_attr_use_system_prompt'
 ) as HTMLInputElement | null;
 const genAttrSystemPromptPanel = document.getElementById('gen_attr_system_prompt_panel');
+const genAttrTeacherForcingEnable = document.getElementById(
+    'gen_attr_teacher_forcing_enable'
+) as HTMLInputElement | null;
+const genAttrTeacherForcingBlock = document.getElementById('gen_attr_teacher_forcing_block');
+const genAttrStopAfterTeacherForcing = document.getElementById(
+    'gen_attr_stop_after_teacher_forcing'
+) as HTMLInputElement | null;
 
 const submitBtn = d3.select('#gen_attr_submit_btn');
 const loaderSmall = d3.select('.loadersmall');
@@ -340,19 +350,22 @@ function applyDagReplaySpeedUi(): void {
 }
 
 function currentDagLayoutMode(): DagLayoutMode {
-    return dagLayoutModeSelect?.value === 'linear-arc' ? 'linear-arc' : 'text-flow';
+    const v = dagLayoutModeSelect?.value;
+    if (v === 'linear-arc' || v === 'spiral') return v;
+    return 'text-flow';
 }
 
 function applyDagLayoutModeUi(): void {
-    const textFlow = currentDagLayoutMode() === 'text-flow';
+    const mode = currentDagLayoutMode();
     if (dagCompactnessGroup) {
-        dagCompactnessGroup.hidden = !textFlow;
+        /** text-flow / spiral 均使用 display-scale 驱动的节点宽高与边回缩；linear-arc 不适用。 */
+        dagCompactnessGroup.hidden = mode === 'linear-arc';
     }
     if (dagMeasureWidthGroup) {
-        dagMeasureWidthGroup.hidden = !textFlow;
+        dagMeasureWidthGroup.hidden = mode !== 'text-flow';
     }
     if (dagLinearArcIntervalGroup) {
-        dagLinearArcIntervalGroup.hidden = textFlow;
+        dagLinearArcIntervalGroup.hidden = mode !== 'linear-arc';
     }
 }
 
@@ -526,6 +539,37 @@ function getActivePromptValue(): string {
     return (userTextField.node() as HTMLTextAreaElement | null)?.value ?? '';
 }
 
+function setActivePromptValue(value: string): void {
+    if (isSkipChatTemplate()) {
+        rawTextField.property('value', value);
+        rawTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+        return;
+    }
+    userTextField.property('value', value);
+    userPromptTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function isGenAttrTeacherForcingUiOn(): boolean {
+    return genAttrTeacherForcingEnable?.checked ?? false;
+}
+
+function isStopAfterTeacherForcingOn(): boolean {
+    return genAttrStopAfterTeacherForcing?.checked ?? false;
+}
+
+/** 勾选 Teacher forcing 且续写非空时返回原文；未勾选或空串时返回 `undefined`。 */
+function teacherForcingContinuationForRun(): string | undefined {
+    if (!isGenAttrTeacherForcingUiOn()) return undefined;
+    const t = (teacherForcingTextField.node() as HTMLTextAreaElement | null)?.value ?? '';
+    return t.length > 0 ? t : undefined;
+}
+
+function syncTeacherForcingRow(): void {
+    if (genAttrTeacherForcingBlock) {
+        genAttrTeacherForcingBlock.hidden = !isGenAttrTeacherForcingUiOn();
+    }
+}
+
 new TextInputController({
     textField: rawTextField,
     textCountValue: rawTextCountValue,
@@ -559,6 +603,17 @@ new TextInputController({
     showAlertDialog,
 });
 
+new TextInputController({
+    textField: teacherForcingTextField,
+    textCountValue: teacherForcingTextCountValue,
+    clearBtn: clearTeacherForcingBtn,
+    submitBtn,
+    saveBtn: d3.select(null),
+    pasteBtn: pasteTeacherForcingBtn,
+    totalSurprisalFormat,
+    showAlertDialog,
+});
+
 /** 与 DAG 节点 offset 同源的累积串，供跨 token 闭合后的排除区间（`excludeNodeAggregatedEntries`）。 */
 function excludeIntervalContextFromSteps(steps: TokenGenStep[]): string | undefined {
     if (steps.length === 0) return undefined;
@@ -574,7 +629,9 @@ function pushDagFromPreprocess(
     excludeIntervalContext?: string,
 ): void {
     if (stepIndex === 0) {
-        dagHandle.setPromptTokenSpans(extractPromptTokenSpans(step), step.context);
+        if (!dagHandle.hasPromptSpans()) {
+            dagHandle.setPromptTokenSpans(extractPromptTokenSpans(step), step.context);
+        }
         if (!dagHandle.isBatching() && fitOnFirstStep) {
             dagHandle.fitViewportToContent();
         }
@@ -585,18 +642,29 @@ function pushDagFromPreprocess(
 /** 下一步要 `pushDagFromPreprocess` 的步下标；与当前 DAG 前缀一致（暂停不重置） */
 let dagPlaybackNextIndex = 0;
 
-/** 将 handle 中已存步序按序重放进 DAG（调用方负责先 {@link dagHandle.reset} 等） */
-function replayRunnerStepsIntoDag(h: TokenGenAttributionHandle): void {
+/**
+ * 当前 run 的 prompt token spans：tokenize 先行写入，或 step 0 归因兜底，或历史加载时赋值。
+ * 步进回放从头开始时作为 prompt 帧数据源，独立于 token_attribution 完整性。
+ */
+let currentRunPromptSpans: PromptTokenSpan[] = [];
+
+/**
+ * 将 handle 中已存步序按序重放进 DAG（调用方负责先 {@link dagHandle.reset} 等）。
+ * @param promptSpans prompt 层节点数据；在批内最先注入，与归因裁剪无关。
+ *   未传入时从 step 0 归因降级（旧缓存 / 非生成路径兼容）。
+ */
+function replayRunnerStepsIntoDag(h: TokenGenAttributionHandle, promptSpans?: PromptTokenSpan[]): void {
     if (h.tokenCount === 0) {
         dagPlaybackNextIndex = 0;
         return;
     }
-    // 整段回放期间中间帧不可见：批处理内 `update` 只维护图数据，结束时统一刷一次 svg。
-    // 避免 N 次 `syncGraphToSvg`（含 N 次对所有边的 join / paint / refresh）造成 O(N²) 累计开销。
     const steps = h.getAllSteps();
+    const spans = promptSpans ?? extractPromptTokenSpans(steps[0]!);
     const excludeCtx = excludeIntervalContextFromSteps(steps);
+    // 整段回放期间中间帧不可见：批处理内只维护图数据，结束时统一刷一次 svg。
     dagHandle.beginBatch();
     try {
+        dagHandle.setPromptTokenSpans(spans, steps[0]!.context);
         steps.forEach((step, i) => {
             pushDagFromPreprocess(step, i, true, excludeCtx);
         });
@@ -632,9 +700,10 @@ function scheduleDagLastTokenDwell(action: () => void, dwellMs: number = DAG_LAS
 }
 
 /**
- * 点击播放时：读界面值并写回规范化结果，得到���轮「相邻两步 DAG 更新」之间的延时（ms）。
+ * 点击播放时：读界面值并写回规范化结果，得到本轮「相邻两帧 DAG 更新」之间的延时（ms）。
  * - `step`：固定间隔。
- * - `total`：`totalS` 按**整段 DAG 步数**均分间隔，与「从头回放」相同（`fullStepCount - 1` 段）；不管当前 `dagPlaybackNextIndex`。首步立即执行，与末 token dwell 无关。
+ * - `total`：`totalS` 按**整段帧数（含 prompt 帧）**均分，共 `fullStepCount` 段等权间隔。
+ *   `fullStepCount` 即生成 token 步数；prompt 帧 → step0 占一段，step0 → step1 占一段，依此类推。
  */
 function resolveDagPlaybackStepDelayMsOnPlay(fullStepCount: number): number {
     if (currentDagReplayPacingMode() === 'step') {
@@ -652,7 +721,8 @@ function resolveDagPlaybackStepDelayMsOnPlay(fullStepCount: number): number {
         : readStoredDagPlaybackTotalS();
     if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = String(totalS);
 
-    const transitionCount = Math.max(0, fullStepCount - 1);
+    // prompt 帧作为等权第一段，共 fullStepCount 段（比原来的 fullStepCount-1 多一段）
+    const transitionCount = Math.max(0, fullStepCount);
     if (transitionCount <= 0) return 0;
     return Math.round((totalS * 1000) / transitionCount);
 }
@@ -746,7 +816,15 @@ function handleDagPlaybackToggle(wantPlay: boolean): void {
         }
         scheduleNextPlaybackTick();
     };
-    tick();
+    // 从头开始（index 为 0）时先展示 prompt 帧，再等一个步进间隔后触发 step 0；
+    // 中途恢复（index > 0）则直接续播，不重复 prompt 帧。
+    if (dagPlaybackNextIndex === 0 && currentRunPromptSpans.length > 0) {
+        dagHandle.setPromptTokenSpans(currentRunPromptSpans, steps[0]!.context);
+        dagHandle.fitViewportToContent();
+        scheduleNextPlaybackTick();
+    } else {
+        tick();
+    }
 }
 
 const dagHandle = initGenAttributeDagView(d3.select('#results'), {
@@ -755,7 +833,7 @@ const dagHandle = initGenAttributeDagView(d3.select('#results'), {
         stopDagPlayback();
         const h = runnerHandle;
         if (!h) return;
-        replayRunnerStepsIntoDag(h);
+        replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     },
     layoutMode: initialDagLayoutMode,
     measureWidthPx: initialDagMeasureWidth,
@@ -802,7 +880,7 @@ dagMeasureWidthInput?.addEventListener('change', () => {
     const h = runnerHandle;
     dagHandle.reset();
     if (h && h.tokenCount > 0) {
-        replayRunnerStepsIntoDag(h);
+        replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     }
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
@@ -822,7 +900,7 @@ dagCompactnessInput?.addEventListener('change', () => {
     const h = runnerHandle;
     dagHandle.reset();
     if (h && h.tokenCount > 0) {
-        replayRunnerStepsIntoDag(h);
+        replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     }
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
@@ -844,7 +922,7 @@ dagEdgeTopPCoverageInput?.addEventListener('change', () => {
     const h = runnerHandle;
     dagHandle.reset();
     if (h && h.tokenCount > 0) {
-        replayRunnerStepsIntoDag(h);
+        replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     }
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
@@ -873,7 +951,7 @@ function onExcludePatternsEffectiveChange(): void {
     const h = runnerHandle;
     if (!h || h.tokenCount === 0) return;
     dagHandle.reset();
-    replayRunnerStepsIntoDag(h);
+    replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     dagHandle.clearNodeSelection();
 }
 
@@ -922,7 +1000,13 @@ let lastRunInitialContext = '';
 let lastRunInputSnapshot: string | null = null;
 
 function getInputSnapshotForRun(): string {
-    const runOpts = { v: currentModelVariant(), max: currentMaxTokens() };
+    const runOpts = {
+        v: currentModelVariant(),
+        max: currentMaxTokens(),
+        tfOn: isGenAttrTeacherForcingUiOn(),
+        tfText: (teacherForcingTextField.node() as HTMLTextAreaElement | null)?.value ?? '',
+        saOn: isStopAfterTeacherForcingOn(),
+    };
     if (isSkipChatTemplate()) {
         return JSON.stringify({
             mode: 'raw' as const,
@@ -949,6 +1033,15 @@ function setGenLoading(loading: boolean): void {
     syncSubmitButtonState();
 }
 
+/** 当前输入是否满足可以发起一次生成（不含 inFlight 判断）。 */
+function isInputReadyForRun(): boolean {
+    const prompt = getActivePromptValue();
+    const forcing = teacherForcingContinuationForRun();
+    if (prompt.length === 0 && forcing === undefined) return false;
+    if (prompt.length > 0 && isGenAttrTeacherForcingUiOn() && forcing === undefined) return false;
+    return true;
+}
+
 function syncSubmitButtonState(): void {
     if (inFlight) {
         submitBtn.text(STOP_BTN_LABEL);
@@ -956,7 +1049,12 @@ function syncSubmitButtonState(): void {
         submitBtn.classed('inactive', false);
         return;
     }
-    const raw = getActivePromptValue();
+    if (!isInputReadyForRun()) {
+        submitBtn.text(GENERATE_BTN_LABEL);
+        submitBtn.property('disabled', true);
+        submitBtn.classed('inactive', true);
+        return;
+    }
     const hasDisplayedRun =
         runnerHandle !== null &&
         runnerHandle.tokenCount > 0 &&
@@ -964,13 +1062,6 @@ function syncSubmitButtonState(): void {
         lastRunInputSnapshot !== null;
     const inputMatchesDisplayed =
         hasDisplayedRun && getInputSnapshotForRun() === lastRunInputSnapshot;
-
-    if (raw.length === 0) {
-        submitBtn.text(GENERATE_BTN_LABEL);
-        submitBtn.property('disabled', true);
-        submitBtn.classed('inactive', true);
-        return;
-    }
     if (inputMatchesDisplayed) {
         submitBtn.text(tr('Retry'));
         submitBtn.property('disabled', false);
@@ -987,6 +1078,7 @@ function bindInputsForSync(): void {
     (rawTextField.node() as HTMLTextAreaElement | null)?.addEventListener('input', onInput);
     (systemTextField.node() as HTMLTextAreaElement | null)?.addEventListener('input', onInput);
     (userTextField.node() as HTMLTextAreaElement | null)?.addEventListener('input', onInput);
+    (teacherForcingTextField.node() as HTMLTextAreaElement | null)?.addEventListener('input', onInput);
 }
 
 if (skipChatTemplateInput) {
@@ -1004,6 +1096,11 @@ genAttrUseSystemPromptInput?.addEventListener('change', () => {
     syncGenAttrSystemPromptSuppressedUi();
     syncSubmitButtonState();
 });
+genAttrTeacherForcingEnable?.addEventListener('change', () => {
+    syncTeacherForcingRow();
+    syncSubmitButtonState();
+});
+syncTeacherForcingRow();
 bindInputsForSync();
 syncSubmitButtonState();
 syncIdleModelMetric();
@@ -1012,6 +1109,7 @@ syncIdleModelMetric();
 const rawTextarea = rawTextField.node() as HTMLTextAreaElement | null;
 const systemPromptTextarea = systemTextField.node() as HTMLTextAreaElement | null;
 const userPromptTextarea = userTextField.node() as HTMLTextAreaElement | null;
+const teacherForcingTextarea = teacherForcingTextField.node() as HTMLTextAreaElement | null;
 
 initQueryHistoryDropdown({
     input: rawTextarea,
@@ -1046,10 +1144,22 @@ initQueryHistoryDropdown({
     applyHistoryOnHover: true,
 });
 
-function syncGenAttrContentUrl(initialContext: string): void {
+initQueryHistoryDropdown({
+    input: teacherForcingTextarea,
+    dropdownId: 'gen_attr_teacher_forcing_history_dropdown',
+    storageKey: GEN_ATTR_TEACHER_FORCING_INPUT_HISTORY_KEY,
+    openDropdownOnFocusInput: false,
+    filterHistoryByInput: false,
+    onSelect: syncSubmitButtonState,
+    historyButton: teacherForcingHistoryBtn,
+    applyHistoryOnHover: true,
+});
+
+
+function syncGenAttrContentUrl(key: GenAttrCacheKey): void {
     replaceDemoUrlParam(null, DEFAULT_DEMO_URL_PARAM, 'gen_attribute');
     replaceContentUrlParam(
-        buildCachedContentUrlParam(initialContext),
+        buildCachedContentUrlParam(key),
         DEFAULT_CONTENT_URL_PARAM,
         'gen_attribute'
     );
@@ -1078,24 +1188,61 @@ async function applyGenAttrCachedRun(
     rec: GenAttrCachedRun,
     options: {
         mru?: { shouldTouch: boolean; contentKey: string; ctx?: CachedHistorySelectContext };
-        afterUrl: { kind: 'content' } | { kind: 'demo'; slug: string };
+        afterUrl: { kind: 'content'; contentKey: string } | { kind: 'demo'; slug: string };
     },
     applyGen: number
 ): Promise<void> {
+    if (isStaleGenAttrCachedApply(applyGen)) {
+        return;
+    }
     if (rec.steps.length === 0) {
         showToast(tr('Cached run not found'), 'error');
         return;
     }
-    if (isStaleGenAttrCachedApply(applyGen)) {
-        return;
+    const { draft } = rec;
+    if (draft?.mode === 'chat') {
+        if (genAttrUseSystemPromptInput) {
+            genAttrUseSystemPromptInput.checked = draft.useSystem ?? true;
+        }
+        if (skipChatTemplateInput) {
+            skipChatTemplateInput.checked = false;
+            writeSkipChatTemplateToStorage(false);
+            syncPromptPanelVisibility();
+            syncGenAttrSystemPromptSuppressedUi();
+        }
+        systemTextField.property('value', draft.system ?? '');
+        systemPromptTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+        userTextField.property('value', draft.user ?? '');
+        userPromptTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+    } else {
+        if (skipChatTemplateInput) {
+            skipChatTemplateInput.checked = true;
+            writeSkipChatTemplateToStorage(true);
+            syncPromptPanelVisibility();
+        }
+        rawTextField.property('value', rec.initialContext);
+        rawTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    if (skipChatTemplateInput) {
-        skipChatTemplateInput.checked = true;
-        writeSkipChatTemplateToStorage(true);
-        syncPromptPanelVisibility();
+
+    // 恢复 model / maxTokens（必须在 getInputSnapshotForRun() 之前，使快照与实际一致）
+    if (draft?.model && modelVariantSelect) {
+        modelVariantSelect.value = draft.model;
+    }
+    if (draft?.maxTokens != null && maxTokensInput) {
+        maxTokensInput.value = String(draft.maxTokens);
     }
-    rawTextField.property('value', rec.initialContext);
-    rawTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+
+    // 恢复 teacher forcing 状态
+    const tfFromRec = draft?.teacherForcing ?? '';
+    if (genAttrTeacherForcingEnable) {
+        genAttrTeacherForcingEnable.checked = tfFromRec.length > 0;
+    }
+    if (genAttrStopAfterTeacherForcing) {
+        genAttrStopAfterTeacherForcing.checked = draft?.stopAfterTeacherForcing ?? false;
+    }
+    teacherForcingTextField.property('value', tfFromRec);
+    teacherForcingTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+    syncTeacherForcingRow();
 
     if (rec.completionReason != null) {
         completeReasonEl.text(completionFinishReasonLabel(rec.completionReason));
@@ -1111,7 +1258,10 @@ async function applyGenAttrCachedRun(
     lastRunInitialContext = rec.initialContext;
     lastRunInputSnapshot = getInputSnapshotForRun();
     syncSubmitButtonState();
-    replayRunnerStepsIntoDag(runnerHandle);
+    // 新缓存直接用 promptSpans；旧缓存无此字段时从 step 0 归因降级
+    const replayPromptSpans = rec.promptSpans ?? extractPromptTokenSpans(rec.steps[0]!);
+    currentRunPromptSpans = replayPromptSpans;
+    replayRunnerStepsIntoDag(runnerHandle, replayPromptSpans);
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
     const n = runnerHandle.tokenCount;
@@ -1136,7 +1286,8 @@ async function applyGenAttrCachedRun(
         return;
     }
     if (options.afterUrl.kind === 'content') {
-        syncGenAttrContentUrl(rec.initialContext);
+        replaceDemoUrlParam(null, DEFAULT_DEMO_URL_PARAM, 'gen_attribute');
+        replaceContentUrlParam(options.afterUrl.contentKey, DEFAULT_CONTENT_URL_PARAM, 'gen_attribute');
     } else {
         syncGenAttrDemoUrl(options.afterUrl.slug);
     }
@@ -1161,7 +1312,7 @@ async function restoreGenAttrFromCachedRun(
         rec,
         {
             mru: shouldTouch ? { shouldTouch: true, contentKey, ctx } : undefined,
-            afterUrl: { kind: 'content' },
+            afterUrl: { kind: 'content', contentKey },
         },
         applyGen
     );
@@ -1264,6 +1415,7 @@ function showAttributionForStepIndex(idx: number): void {
 
 void (async () => {
     const demoRaw = readDemoUrlParam();
+    const contentRaw = readContentUrlParam();
     if (demoRaw) {
         const applyGen = nextGenAttrCachedApplyGen();
         let applied = false;
@@ -1311,6 +1463,13 @@ void (async () => {
             replaceContentUrlParam(null, DEFAULT_CONTENT_URL_PARAM, 'gen_attribute');
         },
     });
+    // 无任何 URL 参数时，静默恢复最近一次缓存 run（输入框与 DAG 一并还原）
+    if (!demoRaw && !contentRaw) {
+        const rows = await listCachedHistoryRows();
+        if (rows.length > 0) {
+            await restoreGenAttrFromCachedRun(rows[0]!.contentKey, false);
+        }
+    }
 })();
 
 async function resolveInitialContext(signal: AbortSignal): Promise<string> {
@@ -1321,7 +1480,7 @@ async function resolveInitialContext(signal: AbortSignal): Promise<string> {
     const useSystem = isGenAttrUseSystemPrompt();
     const systemRaw = (systemTextField.node() as HTMLTextAreaElement | null)?.value ?? '';
     const promptReq: { model: string; prompt: string; system?: string } = {
-        model: completionModel,
+        model: currentModelVariant(),
         prompt: user,
     };
     if (useSystem) {
@@ -1331,9 +1490,34 @@ async function resolveInitialContext(signal: AbortSignal): Promise<string> {
     return assembled.prompt_used;
 }
 
+async function autoMoveFirstTeacherForcingTokenToPromptIfNeeded(): Promise<void> {
+    if (!isSkipChatTemplate()) return;
+    if (getActivePromptValue().length > 0) return;
+    const forcing = teacherForcingContinuationForRun();
+    if (forcing === undefined) return;
+
+    const spans = await fetchTokenize(apiBaseForRequests, forcing, currentModelVariant());
+    if (!spans.length) {
+        throw new Error('Teacher forcing tokenize returned empty spans.');
+    }
+    const first = spans[0]!;
+    const [start, end] = first.offset;
+    const chars = Array.from(forcing);
+    if (start < 0 || end <= start || end > chars.length) {
+        throw new Error(
+            `Teacher forcing tokenize returned invalid first span [${start}, ${end}) for continuation.`
+        );
+    }
+    const movedPrompt = chars.slice(start, end).join('');
+    const remainingForcing = chars.slice(end).join('');
+
+    setActivePromptValue(movedPrompt);
+    teacherForcingTextField.property('value', remainingForcing);
+    teacherForcingTextarea?.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
 async function runGeneration(): Promise<void> {
-    const prompt = getActivePromptValue();
-    if (inFlight || prompt.length === 0) return;
+    if (inFlight || !isInputReadyForRun()) return;
 
     genAbort?.abort();
     genAbort = new AbortController();
@@ -1352,6 +1536,26 @@ async function runGeneration(): Promise<void> {
     let initialContext = '';
 
     try {
+        await autoMoveFirstTeacherForcingTokenToPromptIfNeeded();
+        const teacherForcingText = teacherForcingContinuationForRun();
+        const stopAfterTF = isStopAfterTeacherForcingOn();
+        const maxTokens = currentMaxTokens();
+        const tokenizeModel = currentModelVariant();
+        const tfDraftFields = teacherForcingText !== undefined
+            ? { teacherForcing: teacherForcingText, stopAfterTeacherForcing: stopAfterTF }
+            : {};
+        const runDraft: GenAttrRunDraft = isSkipChatTemplate()
+            ? { mode: 'raw', model: tokenizeModel, maxTokens, ...tfDraftFields }
+            : {
+                mode: 'chat',
+                model: tokenizeModel,
+                maxTokens,
+                system: systemPromptTextarea?.value ?? '',
+                user: userPromptTextarea?.value ?? '',
+                useSystem: isGenAttrUseSystemPrompt(),
+                ...tfDraftFields,
+            };
+        const prompt = getActivePromptValue();
         analyzeProgressEl.text('Assembling prompt…').style('display', null);
         initialContext = await resolveInitialContext(signal);
         lastRunInitialContext = initialContext;
@@ -1369,20 +1573,38 @@ async function runGeneration(): Promise<void> {
                 }
             }
         }
+        if (teacherForcingText !== undefined) {
+            saveHistory(teacherForcingText, GEN_ATTR_TEACHER_FORCING_INPUT_HISTORY_KEY);
+        }
 
-        const maxTokens = currentMaxTokens();
         let initialPromptTokens: number | undefined;
+        currentRunPromptSpans = [];
         setGenAttrUsageMetric(undefined, 0);
         showProgress(0, maxTokens);
 
         dagHandle.reset();
+        void fetchTokenize(apiBaseForRequests, initialContext, tokenizeModel).then((spans) => {
+            currentRunPromptSpans = spans;
+            if (spans.length > 0) {
+                dagHandle.setPromptTokenSpans(spans, initialContext);
+                dagHandle.fitViewportToContent();
+            }
+        }).catch(() => { /* 失败静默，step 0 回调兜底 */ });
         runnerHandle = startTokenGenAttribution({
             initialContext,
             apiPrefix: apiBaseForRequests,
-            model: currentModelVariant(),
+            model: tokenizeModel,
             maxTokens,
+            teacherForcingContinuation: teacherForcingText,
+            stopAfterTeacherForcing: stopAfterTF,
             onStep(step, stepIndex) {
-                if (stepIndex === 0) initialPromptTokens = initialPromptTokensFromFirstStep(step);
+                if (stepIndex === 0) {
+                    initialPromptTokens = initialPromptTokensFromFirstStep(step);
+                    // tokenize 失败时兜底：从 step 0 归因派生 spans
+                    if (currentRunPromptSpans.length === 0) {
+                        currentRunPromptSpans = extractPromptTokenSpans(step);
+                    }
+                }
                 const h = runnerHandle;
                 if (!h) return;
                 const excludeCtx = excludeIntervalContextFromSteps(h.getAllSteps());
@@ -1402,9 +1624,18 @@ async function runGeneration(): Promise<void> {
                     const stepsToStore = h.getAllSteps();
                     const cacheStatus: 'partial' | 'complete' =
                         reason === 'stop' || reason === 'length' ? 'complete' : 'partial';
-                    void save({ initialContext: ic }, stepsToStore, cacheStatus, reason)
+                    const cacheKey: GenAttrCacheKey = {
+                        initialContext: ic,
+                        model: tokenizeModel,
+                        maxTokens,
+                        ...(teacherForcingText !== undefined ? {
+                            teacherForcing: teacherForcingText,
+                            stopAfterTeacherForcing: stopAfterTF,
+                        } : {}),
+                    };
+                    void save(cacheKey, stepsToStore, currentRunPromptSpans, cacheStatus, reason, runDraft)
                         .then(() => genCachedHistory.refreshList())
-                        .then(() => syncGenAttrContentUrl(ic))
+                        .then(() => syncGenAttrContentUrl(cacheKey))
                         .catch((e) => console.warn('[gen_attribute] save cached run failed:', e));
                 }
                 completeReasonEl.text(completionFinishReasonLabel(reason));
@@ -1439,7 +1670,7 @@ submitBtn.on('click', () => {
     void runGeneration();
 });
 
-[rawTextarea, userPromptTextarea].forEach((el) => {
+[rawTextarea, userPromptTextarea, teacherForcingTextarea].forEach((el) => {
     el?.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) void runGeneration();
     });
@@ -1452,7 +1683,7 @@ function refreshDagForThemeChange(): void {
         return;
     }
     dagHandle.reset();
-    replayRunnerStepsIntoDag(h);
+    replayRunnerStepsIntoDag(h, currentRunPromptSpans.length > 0 ? currentRunPromptSpans : undefined);
     dagHandle.fitViewportToContent();
     dagHandle.clearNodeSelection();
 }

client/src/ts/lang/translations.ts

@@ -116,6 +116,15 @@ export const translations: Translations = {
         'History': '输入历史',
         'Raw prompt': 'Raw prompt 原始提示词',
         'Raw prompt mode': 'Raw prompt mode 原始提示词模式',
+        'Teacher forcing': 'Teacher forcing 强制续写归因',
+        'Forced continuation': 'Forced continuation 期望续写',
+        'Stop after teacher forcing': '续写结束后停止（不继续 top-1 生成）',
+        'When enabled, type the exact continuation after the assembled prompt. Each step attributes the next token toward that text (same tokenizer as Model), then stops when the continuation is consumed or EOS.':
+            '启用后，在下方填写接在「完整 prompt」之后的期望续写文本。每一步用该串剩余部分的第一个 token 作为归因目标（与所选 Model 槽位分词器一致）；续写消费完或遇到 EOS 时结束。',
+        'Expected generated text after the full prompt. Each API step uses the first token of what remains here as the attribution target.':
+            '期望模型在完整 prompt 之后生成的文字；每一步对当前剩余串的第一个 token 做归因目标。',
+        'When unchecked, generation continues with top-1 after teacher forcing tokens are exhausted, up to Max tokens.':
+            '未勾选时，teacher forcing 续写用完后将继续以 top-1 贪心生成，直到 Max tokens 或 EOS。',
         'Ask': '提问',
         'Force retry': '强制重试',
         'Retry': '重试',

client/src/ts/storage/genAttributeRunCache.ts

@@ -1,4 +1,5 @@
 import type { TokenGenStep } from '../attribution/tokenGenAttributionRunner';
+import type { PromptTokenSpan } from '../attribution/genAttributeDagPreprocess';
 import {
     canonicalizeCompletionFinishReason,
     isCompletionFinishReason,
@@ -17,26 +18,72 @@ import {
 const NAMESPACE = 'gen_attr';
 const MAX_ENTRIES = 50;
 
+/** 生成时左侧输入面板的状态快照，随缓存一起存储，加载缓存时据此还原输入模式与内容。 */
+export type GenAttrRunDraft = {
+    mode: 'raw' | 'chat';
+    /** 生成所用的 model 槽位 */
+    model?: string;
+    /** 生成时的 maxTokens 上限 */
+    maxTokens?: number;
+    /** chat 模式：system prompt 原文 */
+    system?: string;
+    /** chat 模式：user prompt 原文 */
+    user?: string;
+    /** chat 模式：是否启用 system prompt */
+    useSystem?: boolean;
+    /** Teacher forcing 续写原文；非空则表示已启用 teacher forcing。旧缓存无此字段时从根级 teacherForcingContinuation 降级读取。 */
+    teacherForcing?: string;
+    /** teacher forcing 结束后是否停止（而非继续 top-1 生成）。 */
+    stopAfterTeacherForcing?: boolean;
+};
+
 export type GenAttrCachedRun = {
     initialContext: string;
     steps: TokenGenStep[];
+    /** 完整 prompt token spans（offset + raw），与 /api/tokenize 同源；旧缓存无此字段时由调用方从 step 0 归因降级。 */
+    promptSpans?: PromptTokenSpan[];
     /** 与 OpenAI `finish_reason` 子集一致，见 {@link CompletionFinishReason} */
     completionReason?: CompletionFinishReason;
+    /** 生成时输入面板快照；旧缓存无此字段时回退到 raw 模式展示 initialContext。 */
+    draft?: GenAttrRunDraft;
 };
 
+/**
+ * 缓存业务 key：涵盖所有影响 steps 内容的生成参数。
+ * 原则：draft 中存储的可变参数均纳入 key，同参数不同结果不应互相覆盖。
+ */
 export type GenAttrCacheKey = {
     initialContext: string;
+    model: string;
+    maxTokens: number;
+    /** teacher forcing 续写文本，无则省略 */
+    teacherForcing?: string;
+    /** teacher forcing 用尽后是否停止，仅在 teacherForcing 非空时有意义 */
+    stopAfterTeacherForcing?: boolean;
 };
 
-function keyHashForContext(initialContext: string): string {
-    return buildContentKeyFromBusinessKey({ initialContext });
+/** 规范化 key，去除对结果无影响的冗余字段，保证相同语义的 key 生成相同 hash。 */
+function normalizeKey(key: GenAttrCacheKey): object {
+    const tf = key.teacherForcing && key.teacherForcing.length > 0 ? key.teacherForcing : undefined;
+    return {
+        initialContext: key.initialContext,
+        model: key.model,
+        maxTokens: key.maxTokens,
+        ...(tf !== undefined ? { teacherForcing: tf, stopAfterTeacherForcing: key.stopAfterTeacherForcing ?? false } : {}),
+    };
+}
+
+function keyHash(key: GenAttrCacheKey): string {
+    return buildContentKeyFromBusinessKey(normalizeKey(key));
 }
 
 export async function save(
     key: GenAttrCacheKey,
     steps: TokenGenStep[],
+    promptSpans: PromptTokenSpan[],
     status: 'partial' | 'complete' = steps.length > 0 ? 'partial' : 'complete',
-    completionReason?: CompletionFinishReason
+    completionReason?: CompletionFinishReason,
+    draft?: GenAttrRunDraft
 ): Promise<void> {
     const { initialContext } = key;
     let reasonToStore: CompletionFinishReason | undefined;
@@ -50,11 +97,13 @@ export async function save(
     const payload: GenAttrCachedRun = {
         initialContext,
         steps,
+        ...(promptSpans.length > 0 ? { promptSpans } : {}),
         ...(reasonToStore !== undefined ? { completionReason: reasonToStore } : {}),
+        ...(draft !== undefined ? { draft } : {}),
     };
     await upsertEntry({
         namespace: NAMESPACE,
-        businessKeyJson: JSON.stringify({ initialContext }),
+        businessKeyJson: JSON.stringify(normalizeKey(key)),
         listLabel: initialContext,
         payload,
         status,
@@ -63,7 +112,7 @@ export async function save(
 }
 
 export async function get(key: GenAttrCacheKey): Promise<GenAttrCachedRun | undefined> {
-    const row = await getByContentKey<GenAttrCachedRun>(NAMESPACE, keyHashForContext(key.initialContext));
+    const row = await getByContentKey<GenAttrCachedRun>(NAMESPACE, keyHash(key));
     return row?.payload;
 }
 
@@ -73,8 +122,8 @@ export async function getCachedEntryByContentKey(raw: string): Promise<GenAttrCa
     return row?.payload;
 }
 
-export function buildCachedContentUrlParam(initialContext: string): string {
-    return keyHashForContext(initialContext);
+export function buildCachedContentUrlParam(key: GenAttrCacheKey): string {
+    return keyHash(key);
 }
 
 export async function removeCachedEntryByContentKey(contentKey: string): Promise<void> {

client/src/ts/utils/queryHistory.ts

@@ -18,6 +18,8 @@ export const GEN_ATTR_RAW_INPUT_HISTORY_KEY = 'info_radar_gen_attr_raw_input_his
 export const GEN_ATTR_USER_INPUT_HISTORY_KEY = 'info_radar_gen_attr_user_input_history';
 /** Generate & Attribute 页 System 输入框 */
 export const GEN_ATTR_SYSTEM_INPUT_HISTORY_KEY = 'info_radar_gen_attr_system_input_history';
+/** Generate & Attribute 页 Teacher forcing 续写框 */
+export const GEN_ATTR_TEACHER_FORCING_INPUT_HISTORY_KEY = 'info_radar_gen_attr_teacher_forcing_input_history';
 
 const MAX = 100;
 

client/src/ts/utils/topkChartUtils.ts

@@ -13,6 +13,14 @@
 import * as d3 from 'd3';
 import { processCandidateText } from './tokenDisplayUtils';
 
+/**
+ * 与 analysis.html 主视图 Tooltip 中 Top-K 条形图概率列一致（{@link renderTopkChartHtml} 默认格式）。
+ * @param v 模型给出的概率，区间 [0, 1]
+ */
+export function formatTopkTooltipProbabilityPercent(v: number): string {
+    return d3.format('.3g')(v * 100) + '%';
+}
+
 /** Tooltip 默认条形宽度 */
 const MAX_BAR_WIDTH = 60;
 /** Semantic debug 专用：更大条形与列宽，tooltip 不受影响 */
@@ -113,7 +121,7 @@ export function renderTopkChartHtml(
     if (!data.length) return '';
 
     const maxBar = options?.maxBarWidth ?? MAX_BAR_WIDTH;
-    const numF = options?.numFormat ?? ((v: number) => d3.format('.3g')(v * 100) + '%');
+    const numF = options?.numFormat ?? formatTopkTooltipProbabilityPercent;
 
     const maxProb = data[0]?.prob ?? 1;
     const scale = d3.scaleLinear().domain([0, maxProb]).range([0, maxBar]);

server.py

@@ -38,6 +38,7 @@ from backend.api.fetch_url import fetch_url  # noqa: F401
 from backend.api.client_activity import client_activity_report  # noqa: F401
 from backend.api.analyze_semantic import analyze_semantic  # noqa: F401
 from backend.api.prediction_attribute import prediction_attribute  # noqa: F401
+from backend.api.tokenize import tokenize  # noqa: F401
 from backend.api.model_switch import (  # noqa: F401
     get_available_models,
     get_current_model,

server.yaml

@@ -562,6 +562,56 @@ paths:
         503:
           description: 服务繁忙
 
+  /tokenize:
+    post:
+      tags:
+        - all
+      summary: tokenize text
+      description: |
+        对 context 用指定 model 的 tokenizer 分词，返回各 token 的字符 offset 与原文。
+        不持有推理锁，不做前向 / 梯度计算，响应极快。
+      operationId: server.tokenize
+      parameters:
+        - in: body
+          name: tokenize_request
+          required: true
+          schema:
+            type: object
+            required:
+              - context
+              - model
+            properties:
+              context:
+                type: string
+                description: 待分词文本
+              model:
+                type: string
+                enum: [base, instruct]
+                description: base 使用主槽位 tokenizer，instruct 使用语义槽位 tokenizer
+      responses:
+        200:
+          description: 分词结果
+          schema:
+            type: object
+            properties:
+              success:
+                type: boolean
+              spans:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    offset:
+                      type: array
+                      items:
+                        type: integer
+                      description: 字符偏移 [start, end]
+                    raw:
+                      type: string
+                      description: token 原文
+        400:
+          description: 缺少必要字段或 model 非法
+
   /analyze-semantic:
     post:
       tags: