代码评审；功能改进

client/src/causal_flow.html

@@ -326,7 +326,7 @@
                         <div class="semantic-submode-row attribution-delete-prompt-patterns-header">
                             <span class="semantic-submode-group">
                                 <label class="attribution-use-mapping-label"
-                                    title="When enabled, each line below is a regex with the global flag, matched only within the initial static prompt prefix. Matched prompt tokens are physically removed from the DAG — they neither appear nor occupy layout space (stricter than Exclude + Hide)."
+                                    title="When enabled, each line below is a regex with the global flag, matched only within input areas (excluding generated continuation). Matched prompt tokens are physically removed from the DAG — they neither appear nor occupy layout space (stricter than Exclude + Hide)."
                                     data-i18n="title">
                                     <input type="checkbox" id="gen_attr_delete_prompt_patterns_enable">
                                     <span></span>
@@ -340,14 +340,14 @@
                             placeholder="One regex per line — matched prompt tokens are removed from layout"
                             spellcheck="false"
                             autocomplete="off"
-                            title="One regex per line (global flag), matched only within the initial prompt prefix; matched tokens are deleted from the DAG and do not occupy layout space."
+                            title="One regex per line (global flag), matched only within input areas (excluding generated continuation); matched tokens are deleted from the DAG and do not occupy layout space."
                             data-i18n="placeholder,title"></textarea>
                     </div>
                     <div class="attribution-exclude-prompt-patterns-row">
                         <div class="semantic-submode-row attribution-exclude-prompt-patterns-header">
                             <span class="semantic-submode-group">
                                 <label class="attribution-use-mapping-label"
-                                    title="When enabled, each line below is a regex with the global flag, matched only within the initial static prompt prefix (excluding generated continuation). If a token offset lies fully inside a match, its score is treated as 0."
+                                    title="When enabled, each line below is a regex with the global flag, matched only within input areas (excluding generated continuation). If a token offset lies fully inside a match, its score is treated as 0."
                                     data-i18n="title">
                                     <input type="checkbox" id="gen_attr_exclude_prompt_patterns_enable" checked>
                                     <span></span>
@@ -358,10 +358,10 @@
                             </span>
                         </div>
                         <textarea id="gen_attr_exclude_prompt_patterns" class="attribution-exclude-prompt-patterns-input" rows="1"
-                            placeholder="One regex per line (prompt prefix only)"
+                            placeholder="One regex per line (input areas only)"
                             spellcheck="false"
                             autocomplete="off"
-                            title="One regex per line (global flag), matched only within the initial prompt prefix; if a token offset lies fully inside a match, its score is treated as 0."
+                            title="One regex per line (global flag), matched only within input areas (excluding generated continuation); if a token offset lies fully inside a match, its score is treated as 0."
                             data-i18n="placeholder,title"></textarea>
                     </div>
 
@@ -433,6 +433,16 @@
                             </span>
                         </span>
                     </div>
+                    <div class="gen-attr-dag-measure-width-row semantic-submode-row gen-attr-dag-replay-auto-zoom-row">
+                        <span class="semantic-submode-group">
+                            <label class="semantic-submode-label">
+                                <input type="checkbox" id="gen_attr_dag_replay_auto_zoom"
+                                    title="When checked, step replay (▶) fits the viewport after each step (stops if you pan or zoom). Saved locally."
+                                    data-i18n="title">
+                                <span data-i18n>Auto zoom</span>
+                            </label>
+                        </span>
+                    </div>
                 </section>
             </div>
         </section>

client/src/pages/causal_flow/index.ts

@@ -150,6 +150,7 @@ const GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY = 'info_radar_gen_attr_dag_measure_
 const GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY = 'info_radar_gen_attr_dag_layout_mode';
 const GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY = 'info_radar_gen_attr_dag_playback_step_ms';
 const GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY = 'info_radar_gen_attr_dag_replay_pacing_mode';
+const GEN_ATTR_DAG_REPLAY_AUTO_ZOOM_STORAGE_KEY = 'info_radar_gen_attr_dag_replay_auto_zoom';
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY = 'info_radar_gen_attr_dag_playback_total_s';
 const GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY = 'info_radar_gen_attr_dag_node_ci_visual_scale';
 const GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY =
@@ -199,6 +200,8 @@ const GEN_ATTR_DAG_PLAYBACK_STEP_MS_MAX = 10000;
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT = 7;
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MIN = 1;
 const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MAX = 3600;
+/** 手输总量化的步长；原生 step=1 箭头在 `input` 里另取整。 */
+const GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STEP = 0.1;
 
 /** 与无 demoUiOptions 本地缓存时「读出默认」对齐，供重置与可读性单一的来源 */
 const DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS: GenAttrDemoUiOptions = {
@@ -219,6 +222,7 @@ const DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS: GenAttrDemoUiOptions = {
     recursiveEdgeBatchAnimationDirection: 'forward',
     showTokenInfoOnSelected: false,
     replayPacingMode: 'total',
+    replayAutoZoom: false,
     playbackTotalS: GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT,
     playbackStepMs: GEN_ATTR_DAG_PLAYBACK_STEP_MS_DEFAULT,
     excludePromptPatternsEnabled: true,
@@ -290,17 +294,36 @@ function readStoredDagPlaybackStepMs(): number {
 }
 
 function clampDagPlaybackTotalS(n: number): number {
+    const stepped =
+        Math.round(n / GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STEP) * GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STEP;
     return Math.max(
         GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MIN,
-        Math.min(GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MAX, Math.round(n))
+        Math.min(GEN_ATTR_DAG_PLAYBACK_TOTAL_S_MAX, stepped),
     );
 }
 
+function formatDagPlaybackTotalS(n: number): string {
+    const s = clampDagPlaybackTotalS(n);
+    return Number.isInteger(s) ? String(s) : s.toFixed(1);
+}
+
+function readDagPlaybackTotalSFromInput(): number {
+    const raw = parseFloat(dagPlaybackTotalSInput?.value ?? '');
+    return Number.isFinite(raw)
+        ? clampDagPlaybackTotalS(raw)
+        : GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT;
+}
+
+function commitDagPlaybackTotalSInput(): void {
+    if (!dagPlaybackTotalSInput) return;
+    dagPlaybackTotalSInput.value = formatDagPlaybackTotalS(readDagPlaybackTotalSFromInput());
+}
+
 function readStoredDagPlaybackTotalS(): number {
     return lsReadNumber(
         GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY,
         GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT,
-        { clamp: clampDagPlaybackTotalS },
+        { parse: 'float', clamp: clampDagPlaybackTotalS },
     );
 }
 
@@ -312,6 +335,14 @@ function readStoredDagReplayPacingMode(): DagReplayPacingMode {
     );
 }
 
+function readStoredDagReplayAutoZoom(): boolean {
+    return lsReadBool(
+        GEN_ATTR_DAG_REPLAY_AUTO_ZOOM_STORAGE_KEY,
+        DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS.replayAutoZoom,
+        { encoding: '1' },
+    );
+}
+
 function readStoredDagLayoutMode(): DagLayoutMode {
     return lsReadEnum(
         GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY,
@@ -406,6 +437,9 @@ const dagPlaybackTotalSInput = document.getElementById(
 ) as HTMLInputElement | null;
 const dagReplayTotalWrap = document.getElementById('gen_attr_dag_replay_total_wrap');
 const dagReplayStepWrap = document.getElementById('gen_attr_dag_replay_step_wrap');
+const dagReplayAutoZoomInput = document.getElementById(
+    'gen_attr_dag_replay_auto_zoom',
+) as HTMLInputElement | null;
 
 /** 与 `#gen_attr_dag_replay_mode` 同步；非法或缺失时视为 `total`。 */
 function currentDagReplayPacingMode(): DagReplayPacingMode {
@@ -418,13 +452,13 @@ function readDagReplayPacingFromControls(options?: { writeBack?: boolean }): Dag
     const stepMs = Number.isFinite(rawStep)
         ? clampDagPlaybackStepMs(rawStep)
         : readStoredDagPlaybackStepMs();
-    const rawS = parseInt(dagPlaybackTotalSInput?.value ?? '', 10);
+    const rawS = parseFloat(dagPlaybackTotalSInput?.value ?? '');
     const totalS = Number.isFinite(rawS)
         ? clampDagPlaybackTotalS(rawS)
         : readStoredDagPlaybackTotalS();
     if (options?.writeBack) {
         if (dagPlaybackStepMsInput) dagPlaybackStepMsInput.value = String(stepMs);
-        if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = String(totalS);
+        if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = formatDagPlaybackTotalS(totalS);
     }
     return { mode: currentDagReplayPacingMode(), stepMs, totalS };
 }
@@ -542,6 +576,7 @@ bindExcludePatternsUi({
     onEffectiveChange: onExcludePatternsEffectiveChange,
     defaultTextWhenKeyAbsent: '',
     defaultEnabledWhenKeyAbsent: false,
+    skipLocalStoragePersist: true,
 });
 bindExcludePatternsUi({
     storageKeys: {
@@ -552,6 +587,7 @@ bindExcludePatternsUi({
     enableCheckbox: genAttrExcludePromptPatternsEnable,
     onEffectiveChange: onExcludePatternsEffectiveChange,
     defaultTextWhenKeyAbsent: DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT,
+    skipLocalStoragePersist: true,
 });
 bindExcludePatternsUi({
     storageKeys: {
@@ -562,6 +598,7 @@ bindExcludePatternsUi({
     enableCheckbox: genAttrExcludeGeneratedPatternsEnable,
     onEffectiveChange: onExcludePatternsEffectiveChange,
     defaultTextWhenKeyAbsent: DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT,
+    skipLocalStoragePersist: true,
 });
 
 /** 与 DAG 同源：DAG 预处理按当前控件即时读取，不读 Attribution 的 localStorage。 */
@@ -598,7 +635,9 @@ if (dagPlaybackStepMsInput) dagPlaybackStepMsInput.value = String(initialDagPlay
 const initialDagReplayPacingMode = readStoredDagReplayPacingMode();
 if (dagReplayModeSelect) dagReplayModeSelect.value = initialDagReplayPacingMode;
 const initialDagPlaybackTotalS = readStoredDagPlaybackTotalS();
-if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = String(initialDagPlaybackTotalS);
+if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = formatDagPlaybackTotalS(initialDagPlaybackTotalS);
+const initialDagReplayAutoZoom = readStoredDagReplayAutoZoom();
+if (dagReplayAutoZoomInput) dagReplayAutoZoomInput.checked = initialDagReplayAutoZoom;
 applyDagReplaySpeedUi();
 
 const genAttrResultsNode = genAttrResultsEl.node() as HTMLElement | null;
@@ -613,9 +652,7 @@ const initialDagNodeCiVisualScale = readStoredDagNodeCiVisualScale();
 if (dagNodeCiVisualScaleInput) dagNodeCiVisualScaleInput.checked = initialDagNodeCiVisualScale;
 setDagNodeCiVisualScaleEnabled(initialDagNodeCiVisualScale);
 dagNodeCiVisualScaleInput?.addEventListener('change', () => {
-    const enabled = dagNodeCiVisualScaleInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY, enabled, '1');
-    setDagNodeCiVisualScaleEnabled(enabled);
+    setDagNodeCiVisualScaleEnabled(dagNodeCiVisualScaleInput.checked);
     tryResetAndReplayDag();
 });
 
@@ -632,9 +669,7 @@ if (dagDecayAttributionHighSurprisalInput) {
 }
 setDagDecayAttributionToHighSurprisalTargetEnabled(initialDagDecayAttributionHighSurprisal);
 dagDecayAttributionHighSurprisalInput?.addEventListener('change', () => {
-    const enabled = dagDecayAttributionHighSurprisalInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY, enabled, '1');
-    setDagDecayAttributionToHighSurprisalTargetEnabled(enabled);
+    setDagDecayAttributionToHighSurprisalTargetEnabled(dagDecayAttributionHighSurprisalInput.checked);
     tryResetAndReplayDag({ refit: false });
 });
 
@@ -653,9 +688,7 @@ const initialDagHideInactiveEdges = readStoredDagHideInactiveEdges();
 if (dagHideInactiveEdgesInput) dagHideInactiveEdgesInput.checked = initialDagHideInactiveEdges;
 applyDagHideInactiveEdges(initialDagHideInactiveEdges);
 dagHideInactiveEdgesInput?.addEventListener('change', () => {
-    const hide = dagHideInactiveEdgesInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY, hide, '1');
-    applyDagHideInactiveEdges(hide);
+    applyDagHideInactiveEdges(dagHideInactiveEdgesInput.checked);
 });
 
 function readStoredDagShowDownstreamInfluence(): boolean {
@@ -670,9 +703,7 @@ if (dagShowDownstreamInfluenceInput) {
     dagShowDownstreamInfluenceInput.checked = initialDagShowDownstreamInfluence;
 }
 dagShowDownstreamInfluenceInput?.addEventListener('change', () => {
-    const show = dagShowDownstreamInfluenceInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY, show, '1');
-    dagHandle.setShowDownstreamInfluence(show);
+    dagHandle.setShowDownstreamInfluence(dagShowDownstreamInfluenceInput.checked);
 });
 
 function syncDimInactiveTokensThresholdInputUi(): void {
@@ -790,24 +821,18 @@ setDimInactiveTokensThresholdControlFromFraction(initialDagDimInactiveTokensThre
 applyDagRecursiveAttributionSubmodeUi();
 syncDimInactiveTokensThresholdInputUi();
 dagRecursiveAttributionInput?.addEventListener('change', () => {
-    const enabled = dagRecursiveAttributionInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY, enabled, '1');
     applyDagRecursiveAttributionSubmodeUi();
-    dagHandle.setRecursiveAttributionEnabled(enabled);
+    dagHandle.setRecursiveAttributionEnabled(dagRecursiveAttributionInput.checked);
 });
 dagRecursiveEdgeAnimationDirectionSelect?.addEventListener('change', () => {
     const direction = currentDagRecursiveEdgeAnimationDirection();
     dagRecursiveEdgeAnimationDirectionSelect.value = direction;
-    lsWriteString(GEN_ATTR_DAG_RECURSIVE_EDGE_ANIMATION_DIRECTION_STORAGE_KEY, direction);
     dagHandle.setRecursiveEdgeBatchAnimationDirection(direction);
 });
 
 dagDimInactiveTokensInput?.addEventListener('change', () => {
-    const enabled = dagDimInactiveTokensInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_STORAGE_KEY, enabled, '1');
     syncDimInactiveTokensThresholdInputUi();
     applyDagDimInactiveTokensFromControls();
-    syncGenAttrResetUiOptionsButtonState();
 });
 
 dagDimInactiveTokensThresholdInput?.addEventListener('input', () => {
@@ -816,16 +841,11 @@ dagDimInactiveTokensThresholdInput?.addEventListener('input', () => {
 dagDimInactiveTokensThresholdInput?.addEventListener('change', () => {
     const t = readDimInactiveTokensThresholdFromControl();
     setDimInactiveTokensThresholdControlFromFraction(t);
-    lsSet(GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_THRESHOLD_STORAGE_KEY, String(t));
     applyDagDimInactiveTokensFromControls();
-    syncGenAttrResetUiOptionsButtonState();
 });
 
 dagDimInactiveNotInAnimationInput?.addEventListener('change', () => {
-    const enabled = dagDimInactiveNotInAnimationInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_DIM_INACTIVE_NOT_IN_ANIMATION_STORAGE_KEY, enabled, '1');
     applyDagDimInactiveTokensFromControls();
-    syncGenAttrResetUiOptionsButtonState();
 });
 
 function readStoredDagHideExcludedTokens(): boolean {
@@ -847,15 +867,11 @@ function readStoredDagShowTopkOnSelected(): boolean {
 const initialDagShowTopkOnSelected = readStoredDagShowTopkOnSelected();
 if (dagShowTopkOnSelectedInput) dagShowTopkOnSelectedInput.checked = initialDagShowTopkOnSelected;
 dagHideExcludedTokensInput?.addEventListener('change', () => {
-    const hide = dagHideExcludedTokensInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY, hide, '1');
-    dagHandle.setHideExcludedTokens(hide);
+    dagHandle.setHideExcludedTokens(dagHideExcludedTokensInput.checked);
 });
 
 dagShowTopkOnSelectedInput?.addEventListener('change', () => {
-    const show = dagShowTopkOnSelectedInput.checked;
-    lsWriteBool(GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY, show, '1');
-    dagHandle.setShowTokenInfoOnSelected(show);
+    dagHandle.setShowTokenInfoOnSelected(dagShowTopkOnSelectedInput.checked);
 });
 
 setPageOptsGetter(() => {
@@ -878,22 +894,28 @@ dagPlaybackStepMsInput?.addEventListener('change', () => {
         ? clampDagPlaybackStepMs(raw)
         : GEN_ATTR_DAG_PLAYBACK_STEP_MS_DEFAULT;
     dagPlaybackStepMsInput.value = String(ms);
-    lsSet(GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY, String(ms));
 });
 
 dagReplayModeSelect?.addEventListener('change', () => {
-    const mode = currentDagReplayPacingMode();
-    lsWriteString(GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY, mode);
     applyDagReplaySpeedUi();
 });
 
+dagPlaybackTotalSInput?.addEventListener('input', (e) => {
+    if (!dagPlaybackTotalSInput) return;
+    if (!(e instanceof InputEvent) || (e.inputType !== 'increment' && e.inputType !== 'decrement')) {
+        return;
+    }
+    const raw = parseFloat(dagPlaybackTotalSInput.value);
+    if (!Number.isFinite(raw)) return;
+    dagPlaybackTotalSInput.value = formatDagPlaybackTotalS(clampDagPlaybackTotalS(Math.round(raw)));
+});
+
 dagPlaybackTotalSInput?.addEventListener('change', () => {
-    const raw = parseInt(dagPlaybackTotalSInput.value, 10);
-    const s = Number.isFinite(raw)
-        ? clampDagPlaybackTotalS(raw)
-        : GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT;
-    dagPlaybackTotalSInput.value = String(s);
-    lsSet(GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY, String(s));
+    commitDagPlaybackTotalSInput();
+});
+
+dagPlaybackTotalSInput?.addEventListener('blur', () => {
+    commitDagPlaybackTotalSInput();
 });
 
 function isSkipChatTemplate(): boolean {
@@ -1210,7 +1232,7 @@ function handleDagPlaybackToggle(wantPlay: boolean): void {
     cancelDagLastTokenDwell();
     const steps = h.getAllSteps();
     if (dagPlaybackNextIndex >= steps.length) {
-        // `reset()` 默认会清 `layoutDirty`，每步 `update` 就会 fit；重放前需保留用户 pan/zoom 时保留 dirty。
+        // 保留 `layoutDirty`：用户 pan/zoom 后 Auto zoom 仍应停止 fit。
         dagHandle.reset(true);
         dagPlaybackNextIndex = 0;
     }
@@ -1261,15 +1283,19 @@ function handleDagPlaybackToggle(wantPlay: boolean): void {
             if (visible) toolCallingPendingLine?.show();
             else toolCallingPendingLine?.hide();
         },
-        showPrompt: (fitViewport) => {
+        showPrompt: () => {
             const firstStep = steps[0]!;
             syncDagInputLayerAtStep({
                 catalogSpans: currentRunPromptSpans,
                 layoutWire: firstStep.context,
                 inputRanges: firstStep.inputRanges,
-                fitViewport,
             });
         },
+        afterStepShown: () => {
+            if (dagReplayAutoZoomInput?.checked) {
+                dagHandle.fitViewportToContent();
+            }
+        },
         showToolResponse: (stepIndex) => {
             const step = steps[stepIndex]!;
             syncDagInputLayerAtStep({
@@ -1342,10 +1368,8 @@ toolCallingPendingLine = attachToolCallingPendingLine(
 );
 
 dagLayoutModeSelect?.addEventListener('change', () => {
-    const mode = currentDagLayoutMode();
-    lsWriteString(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY, mode);
     applyDagLayoutModeUi();
-    dagHandle.setLayoutMode(mode);
+    dagHandle.setLayoutMode(currentDagLayoutMode());
 });
 
 /**
@@ -1397,7 +1421,6 @@ dagMeasureWidthInput?.addEventListener('change', () => {
         ? clampDagMeasureWidth(raw)
         : GEN_ATTR_DAG_MEASURE_WIDTH_DEFAULT;
     dagMeasureWidthInput.value = String(w);
-    lsSet(GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY, String(w));
     dagHandle.setMeasureWidthPx(w);
     tryResetAndReplayDag();
 });
@@ -1406,7 +1429,6 @@ dagCompactnessInput?.addEventListener('change', () => {
     const raw = parseFloat(dagCompactnessInput.value);
     const c = Number.isFinite(raw) ? clampDagCompactness(raw) : DAG_COMPACTNESS_DEFAULT;
     dagCompactnessInput.value = String(c);
-    lsSet(GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY, String(c));
     dagHandle.setDagCompactness(c);
     tryResetAndReplayDag();
 });
@@ -1417,7 +1439,6 @@ dagEdgeTopPCoverageInput?.addEventListener('change', () => {
         ? clampDagEdgeTopPCoverage(raw)
         : DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
     dagEdgeTopPCoverageInput.value = String(c);
-    lsSet(GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY, String(c));
     dagHandle.setEdgeTopPCoverage(c);
     tryResetAndReplayDag({ refit: false });
 });
@@ -1428,7 +1449,6 @@ dagLinearArcIntervalInput?.addEventListener('change', () => {
         ? clampLinearArcAdjacentGap(raw)
         : LINEAR_ARC_ADJACENT_GAP_DEFAULT;
     dagLinearArcIntervalInput.value = String(n);
-    lsSet(GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY, String(n));
     dagHandle.setLinearArcAdjacentGapPx(n, { skipRefit: isDagBusy() });
 });
 
@@ -1476,6 +1496,7 @@ function readGenAttrDemoUiOptionsFromControls(): GenAttrDemoUiOptions {
         recursiveEdgeBatchAnimationDirection: currentDagRecursiveEdgeAnimationDirection(),
         showTokenInfoOnSelected: dagShowTopkOnSelectedInput?.checked ?? false,
         replayPacingMode,
+        replayAutoZoom: dagReplayAutoZoomInput?.checked ?? false,
         playbackTotalS,
         playbackStepMs,
         excludePromptPatternsEnabled: genAttrExcludePromptPatternsEnable?.checked ?? true,
@@ -1510,8 +1531,133 @@ function syncGenAttrResetUiOptionsButtonState(): void {
 }
 
 /**
- * 从 `demoUiOptions` 还原排除控件（仅 DOM）；与施加 DAG demo 不回写 GEN_ATTR_LS 的策略一致，`replay` 读当前控件生效。
+ * 演示 UI 控件 id ↔ localStorage 键：面板委托识别、批量清除 LS。
+ * 新增控件须同步改：本表、`persistGenAttrDemoUiOptionsToLocalStorage`、
+ * {@link readGenAttrDemoUiOptionsFromControls}、`applyGenAttrDemoUiOptionsSnap`、
+ * {@link DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS}（不含 Model、Max tokens、prompt 正文）。
  */
+const GEN_ATTR_DEMO_UI_PERSIST_SPECS: ReadonlyArray<{
+    readonly controlId: string;
+    readonly storageKey: string;
+}> = [
+    { controlId: 'gen_attr_dag_layout_mode', storageKey: GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_compactness', storageKey: GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_measure_width', storageKey: GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_linear_arc_interval', storageKey: GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_node_ci_visual_scale', storageKey: GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_dag_decay_attribution_high_surprisal',
+        storageKey: GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_dag_recursive_attribution', storageKey: GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_dag_recursive_edge_animation_direction',
+        storageKey: GEN_ATTR_DAG_RECURSIVE_EDGE_ANIMATION_DIRECTION_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_dag_dim_inactive_tokens', storageKey: GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_dag_dim_inactive_tokens_threshold',
+        storageKey: GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_THRESHOLD_STORAGE_KEY,
+    },
+    {
+        controlId: 'gen_attr_dag_dim_inactive_not_in_animation',
+        storageKey: GEN_ATTR_DAG_DIM_INACTIVE_NOT_IN_ANIMATION_STORAGE_KEY,
+    },
+    {
+        controlId: 'gen_attr_dag_show_downstream_influence',
+        storageKey: GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_dag_edge_top_p_coverage', storageKey: GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_hide_inactive_edges', storageKey: GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_hide_excluded_tokens', storageKey: GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_show_topk_on_selected', storageKey: GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_replay_mode', storageKey: GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_replay_auto_zoom', storageKey: GEN_ATTR_DAG_REPLAY_AUTO_ZOOM_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_playback_total_s', storageKey: GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY },
+    { controlId: 'gen_attr_dag_playback_step_ms', storageKey: GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_delete_prompt_patterns_enable',
+        storageKey: GEN_ATTR_DELETE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_delete_prompt_patterns', storageKey: GEN_ATTR_DELETE_PROMPT_PATTERNS_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_exclude_prompt_patterns_enable',
+        storageKey: GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_exclude_prompt_patterns', storageKey: GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY },
+    {
+        controlId: 'gen_attr_exclude_generated_patterns_enable',
+        storageKey: GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
+    },
+    { controlId: 'gen_attr_exclude_generated_patterns', storageKey: GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY },
+];
+
+const GEN_ATTR_DEMO_UI_CONTROL_IDS = new Set(GEN_ATTR_DEMO_UI_PERSIST_SPECS.map((s) => s.controlId));
+
+const GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS: readonly string[] = GEN_ATTR_DEMO_UI_PERSIST_SPECS.map(
+    (s) => s.storageKey,
+);
+
+function isGenAttrDemoUiControl(target: EventTarget | null): boolean {
+    return target instanceof HTMLElement && GEN_ATTR_DEMO_UI_CONTROL_IDS.has(target.id);
+}
+
+function removeGenAttrDemoUiOptionsFromLocalStorage(): void {
+    for (const k of GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS) {
+        lsRemove(k);
+    }
+}
+
+function persistGenAttrDemoUiOptionsToLocalStorage(snap: GenAttrDemoUiOptions): void {
+    lsWriteString(GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY, snap.layoutMode);
+    lsSet(GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY, String(snap.measureWidthPx));
+    lsSet(GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY, String(snap.dagCompactness));
+    lsSet(GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY, String(snap.linearArcAdjacentGapPx));
+    lsSet(GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY, String(snap.edgeTopPCoverage));
+    lsWriteBool(GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY, snap.hideExcludedTokens, '1');
+    lsWriteBool(GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_STORAGE_KEY, snap.dimInactiveTokens, '1');
+    lsSet(GEN_ATTR_DAG_DIM_INACTIVE_TOKENS_THRESHOLD_STORAGE_KEY, String(snap.dimInactiveTokensThreshold));
+    lsWriteBool(
+        GEN_ATTR_DAG_DIM_INACTIVE_NOT_IN_ANIMATION_STORAGE_KEY,
+        snap.dimInactiveNotDuringAnimation,
+        '1',
+    );
+    lsWriteBool(GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY, snap.nodeCiVisualScaleEnabled, '1');
+    lsWriteBool(
+        GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY,
+        snap.decayAttributionToHighSurprisalTargetEnabled,
+        '1',
+    );
+    lsWriteBool(GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY, snap.hideInactiveEdges, '1');
+    lsWriteBool(GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY, snap.showDownstreamInfluence, '1');
+    lsWriteBool(GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY, snap.recursiveAttributionEnabled, '1');
+    lsWriteString(
+        GEN_ATTR_DAG_RECURSIVE_EDGE_ANIMATION_DIRECTION_STORAGE_KEY,
+        snap.recursiveEdgeBatchAnimationDirection,
+    );
+    lsWriteBool(GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY, snap.showTokenInfoOnSelected, '1');
+    lsWriteString(GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY, snap.replayPacingMode);
+    lsWriteBool(GEN_ATTR_DAG_REPLAY_AUTO_ZOOM_STORAGE_KEY, snap.replayAutoZoom, '1');
+    lsSet(GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY, String(snap.playbackTotalS));
+    lsSet(GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY, String(snap.playbackStepMs));
+    lsSet(GEN_ATTR_DELETE_PROMPT_PATTERNS_STORAGE_KEY, snap.deletePromptPatternsText);
+    lsWriteBool(GEN_ATTR_DELETE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY, snap.deletePromptPatternsEnabled, '1');
+    lsSet(GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY, snap.excludePromptPatternsText);
+    lsWriteBool(GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY, snap.excludePromptPatternsEnabled, '1');
+    lsSet(GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY, snap.excludeGeneratedPatternsText);
+    lsWriteBool(
+        GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
+        snap.excludeGeneratedPatternsEnabled,
+        '1',
+    );
+}
+
+/** 演示用 UI：DOM → localStorage 的唯一写路径（用户改控件经面板委托；程序化 apply 末尾调用）。 */
+function syncGenAttrDemoUiOptionsToLocalStorage(): void {
+    persistGenAttrDemoUiOptionsToLocalStorage(readGenAttrDemoUiOptionsFromControls());
+}
+
+/** 从 `demoUiOptions` 还原排除控件（仅 DOM）；`replay` 读当前控件生效。 */
 function applyGenAttrExcludePatternsFromDemoUiSnap(snap: Partial<GenAttrDemoUiOptions>): void {
     const {
         deletePromptPatternsEnabled,
@@ -1663,9 +1809,12 @@ function applyGenAttrDemoUiOptionsSnap(snap: Partial<GenAttrDemoUiOptions>): voi
         if (dagReplayModeSelect) dagReplayModeSelect.value = snap.replayPacingMode;
         applyDagReplaySpeedUi();
     }
+    if (snap.replayAutoZoom !== undefined) {
+        if (dagReplayAutoZoomInput) dagReplayAutoZoomInput.checked = snap.replayAutoZoom;
+    }
     if (snap.playbackTotalS !== undefined) {
         const s = clampDagPlaybackTotalS(snap.playbackTotalS);
-        if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = String(s);
+        if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = formatDagPlaybackTotalS(s);
     }
     if (snap.playbackStepMs !== undefined) {
         const ms = clampDagPlaybackStepMs(snap.playbackStepMs);
@@ -1673,6 +1822,7 @@ function applyGenAttrDemoUiOptionsSnap(snap: Partial<GenAttrDemoUiOptions>): voi
     }
 
     applyGenAttrExcludePatternsFromDemoUiSnap(snap);
+    syncGenAttrDemoUiOptionsToLocalStorage();
     syncGenAttrResetUiOptionsButtonState();
 }
 
@@ -1695,38 +1845,6 @@ function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
     applyGenAttrDemoUiOptionsSnap(rec.demoUiOptions);
 }
 
-/** Gen Attribute demo-UI scope：与 {@link readGenAttrDemoUiOptionsFromControls} / IndexedDB demo 快照一致（不含 Model、Max tokens、prompt 正文）。 */
-const GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS: readonly string[] = [
-    GEN_ATTR_DAG_MEASURE_WIDTH_STORAGE_KEY,
-    GEN_ATTR_DAG_LAYOUT_MODE_STORAGE_KEY,
-    GEN_ATTR_DAG_PLAYBACK_STEP_MS_STORAGE_KEY,
-    GEN_ATTR_DAG_REPLAY_PACING_MODE_STORAGE_KEY,
-    GEN_ATTR_DAG_PLAYBACK_TOTAL_S_STORAGE_KEY,
-    GEN_ATTR_DAG_NODE_CI_VISUAL_SCALE_STORAGE_KEY,
-    GEN_ATTR_DAG_DECAY_ATTRIBUTION_HIGH_SURPRISAL_STORAGE_KEY,
-    GEN_ATTR_DAG_HIDE_INACTIVE_EDGES_STORAGE_KEY,
-    GEN_ATTR_DAG_SHOW_DOWNSTREAM_INFLUENCE_STORAGE_KEY,
-    GEN_ATTR_DAG_RECURSIVE_ATTRIBUTION_STORAGE_KEY,
-    GEN_ATTR_DAG_RECURSIVE_EDGE_ANIMATION_DIRECTION_STORAGE_KEY,
-    GEN_ATTR_DAG_HIDE_EXCLUDED_TOKENS_STORAGE_KEY,
-    GEN_ATTR_DAG_SHOW_TOPK_ON_SELECTED_STORAGE_KEY,
-    GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY,
-    GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY,
-    GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY,
-    GEN_ATTR_DELETE_PROMPT_PATTERNS_STORAGE_KEY,
-    GEN_ATTR_DELETE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
-    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY,
-    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
-    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY,
-    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
-];
-
-function removeGenAttrDemoUiOptionsFromLocalStorage(): void {
-    for (const k of GEN_ATTR_DEMO_UI_LOCAL_STORAGE_KEYS) {
-        lsRemove(k);
-    }
-}
-
 /** 重置「DAG 演示用 UI」：清 LS 后以 {@link DEFAULT_GEN_ATTR_DEMO_UI_OPTIONS} 全量套用。 */
 function resetGenAttrDemoUiOptionsToDefaults(): void {
     stopDagPlayback();
@@ -1740,10 +1858,18 @@ genAttrResetUiOptionsBtn?.addEventListener('click', resetGenAttrDemoUiOptionsToD
 (() => {
     const panel = document.querySelector('.gen-attribute-page .input-section');
     if (!panel) return;
-    const sync = () => syncGenAttrResetUiOptionsButtonState();
-    panel.addEventListener('change', sync);
-    panel.addEventListener('input', sync);
-    sync();
+    const onDemoUiPersist = (e: Event) => {
+        if (!isGenAttrDemoUiControl(e.target)) return;
+        syncGenAttrDemoUiOptionsToLocalStorage();
+        syncGenAttrResetUiOptionsButtonState();
+    };
+    panel.addEventListener('change', onDemoUiPersist);
+    panel.addEventListener('blur', onDemoUiPersist, true);
+    panel.addEventListener('input', (e) => {
+        if (!isGenAttrDemoUiControl(e.target)) return;
+        syncGenAttrResetUiOptionsButtonState();
+    });
+    syncGenAttrResetUiOptionsButtonState();
 })();
 
 window.addEventListener('pagehide', (ev) => {

client/src/shared/lang/translations.ts

@@ -40,11 +40,15 @@ export const translations: Translations = {
         'Max new tokens must not exceed {limit}': 'Max new tokens 不得超过 {limit}',
         'Max new tokens must be a positive integer': 'Max new tokens 须为正整数',
         // LLM Causal Flow（gen_attribute）页：placeholder / title 文案
-        'When enabled, each line below is a regex with the global flag, matched only within the initial static prompt prefix (excluding generated continuation). If a token offset lies fully inside a match, its score is treated as 0.':
-            '启用后仅在初始静态 prompt 前缀内按下列正则匹配（不含已生成 continuation）；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
-        'One regex per line (prompt prefix only)': '每行一条正则（仅 prompt 前缀）',
-        'One regex per line (global flag), matched only within the initial prompt prefix; if a token offset lies fully inside a match, its score is treated as 0.':
-            '每行一条正则，`g`，仅在初始 prompt 前缀内匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
+        'When enabled, each line below is a regex with the global flag, matched only within input areas (excluding generated continuation). Matched prompt tokens are physically removed from the DAG — they neither appear nor occupy layout space (stricter than Exclude + Hide).':
+            '启用后仅在 input 区（不含已生成 continuation）内按下列正则匹配；命中的 prompt token 从 DAG 物理移除，不占布局（比 Exclude + Hide 更严格）。',
+        'One regex per line (global flag), matched only within input areas (excluding generated continuation); matched tokens are deleted from the DAG and do not occupy layout space.':
+            '每行一条正则，`g`，仅在 input 区（不含已生成 continuation）内匹配；命中的 token 从 DAG 删除且不占布局空间。',
+        'When enabled, each line below is a regex with the global flag, matched only within input areas (excluding generated continuation). If a token offset lies fully inside a match, its score is treated as 0.':
+            '启用后仅在 input 区（不含已生成 continuation）内按下列正则匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
+        'One regex per line (input areas only)': '每行一条正则（仅 input 区）',
+        'One regex per line (global flag), matched only within input areas (excluding generated continuation); if a token offset lies fully inside a match, its score is treated as 0.':
+            '每行一条正则，`g`，仅在 input 区（不含已生成 continuation）内匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
         'When enabled, each line below is a regex with the global flag, matched only within the model-generated continuation (excluding the initial static prompt). If a token offset lies fully inside a match, its score is treated as 0.':
             '启用后仅在模型已生成的 continuation（不含初始静态 prompt）内按下列正则匹配；token 的 offset 完全落在某次匹配区间内则 score 视为 0。',
         'One regex per line (generated continuation only)': '每行一条正则（仅已生成 continuation）',
@@ -127,6 +131,9 @@ export const translations: Translations = {
         'Restore DAG options, play speed, exclusions, etc. to defaults and clear saved preferences for those controls.':
             '将 DAG 参数、播放速度、排除正则等恢复为默认值，并清除这些控件的本地保存项。',
         'Play speed': '播放速度',
+        'Auto zoom': '自动缩放',
+        'When checked, step replay (▶) fits the viewport after each step (stops if you pan or zoom). Saved locally.':
+            '勾选后，步进重放（▶）每步自动适配视口（手动平移/缩放后停止）。本地保存。',
         'Causal Flow Mode': '因果流模式',
         'Unchecked: direct attribution — immediate predecessors only (default). Checked: Causal Flow Mode (↯) — trace from the focused token back to information sources. Sources: prompt; surprising or teacher-forced generated tokens (MI decay stops the chain). Conduits: high-confidence middle tokens—attribution passes through. Blue edges: propagated share; node ring: attribution stay (strong where explanation lands). Use with Decay attribution to high-surprisal targets. On the DAG, ↯ plays the focus propagation chain; ▶ replays generation steps when no token is focused.':
             '未勾选：原始直接归因（仅一跳前驱，默认）。勾选：因果流模式（↯）— 从焦点 token 向上追溯到信息来源。来源：prompt；高惊讶或 teacher-forced 的生成 token（MI 衰减可截断链）。传导：高置信中间 token，归因穿过。蓝边：传播份额；节点环：归因停留（解释落点处更强）。建议与「向高惊讶目标衰减归因」配合使用。DAG 上：↯ 播放焦点传��链；无焦点时 ▶ 步进重放生成过程。',

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

@@ -140,9 +140,11 @@ export type RunDagStepPlaybackLoopOptions = {
     isStale: () => boolean;
     setTimer: (cb: () => void, delayMs: number) => void;
     setToolPendingVisible: (visible: boolean) => void;
-    showPrompt: (fitViewport: boolean) => void;
+    showPrompt: () => void;
     showToolResponse: (stepIndex: number) => void;
     showOutputGen: (stepIndex: number) => void;
+    /** 每段内容展示后调用（如步进重放开启 Auto zoom 时 fit 视口）。 */
+    afterStepShown?: () => void;
     onOutputGenShown: (stepIndex: number) => void;
     onAllOutputGensShown: () => void;
 };
@@ -168,7 +170,7 @@ export function runDagStepPlaybackLoop(opts: RunDagStepPlaybackLoopOptions): voi
 
             switch (event.kind) {
                 case 'prompt':
-                    opts.showPrompt(true);
+                    opts.showPrompt();
                     break;
                 case 'toolResponse':
                     opts.showToolResponse(event.stepIndex);
@@ -182,6 +184,7 @@ export function runDagStepPlaybackLoop(opts: RunDagStepPlaybackLoopOptions): voi
                     void _exhaustive;
                 }
             }
+            opts.afterStepShown?.();
 
             const nextIndex = eventIndex + 1;
             if (nextIndex >= opts.events.length) {

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

@@ -199,12 +199,15 @@ export function createGenAttributeDagTextMeasure(
 } {
     // 合并重叠区间，保证 originalToCompacted 与 compactText 行为一致。
     let mergedDeleteIntervals = mergeDeleteIntervals(deleteIntervals);
-    /** 当前测量层中的完整文本（prompt 部分已压缩 + 生成 token 原样拼接）。 */
+    /** 当前测量层中的完整文本（prompt 前缀已压缩 + 生成 token 原样拼接）。 */
     let fullText = '';
-    /** 原始 prompt 长度（即 setPrompt/appendInputSpans 最后一次传入的 promptText/layoutText 长度）。 */
-    let originalPromptLength = 0;
-    /** 压缩后 prompt 的长度（deleteIntervals 已移除部分不计）。 */
-    let compactedPromptLength = 0;
+    /**
+     * 最近一次 input 同步时 `layoutWire` 在原始坐标系下的长度（`setPrompt` 为 prompt 长度；
+     * `appendInputSpans` 为含 tool response 等的全长）。供 {@link appendGeneratedToken} 锚定生成区起点。
+     */
+    let layoutAnchorLength = 0;
+    /** 与 {@link layoutAnchorLength} 同锚点、经 delete 压缩后的坐标长度。 */
+    let compactedLayoutAnchorLength = 0;
     let bpeStrings: FrontendToken[] = [];
     const calculator = new TokenPositionCalculator(measureRoot);
 
@@ -229,8 +232,8 @@ export function createGenAttributeDagTextMeasure(
     return {
         reset(): void {
             fullText = '';
-            originalPromptLength = 0;
-            compactedPromptLength = 0;
+            layoutAnchorLength = 0;
+            compactedLayoutAnchorLength = 0;
             bpeStrings = [];
             while (measureRoot.firstChild) measureRoot.removeChild(measureRoot.firstChild);
             calculator.resetIndex();
@@ -247,8 +250,8 @@ export function createGenAttributeDagTextMeasure(
         setPrompt(promptText: string, spans: PromptTokenSpan[]): Map<string, GenAttrDagTokenGeom> {
             // 将被删区间字符物理移除，DOM 里不留空洞。
             const compactedPrompt = compactText(promptText, mergedDeleteIntervals);
-            originalPromptLength = promptText.length;
-            compactedPromptLength = compactedPrompt.length;
+            layoutAnchorLength = promptText.length;
+            compactedLayoutAnchorLength = compactedPrompt.length;
             fullText = compactedPrompt;
 
             // 过滤掉被删 span（调用方也会跳过，双重保险）。
@@ -291,8 +294,8 @@ export function createGenAttributeDagTextMeasure(
                     'genAttributeDagTextMeasure: appendInputSpans layoutText must extend current fullText prefix',
                 );
             }
-            originalPromptLength = layoutText.length;
-            compactedPromptLength = compactedLayout.length;
+            layoutAnchorLength = layoutText.length;
+            compactedLayoutAnchorLength = compactedLayout.length;
             fullText = compactedLayout;
 
             const keptNew = newSpans.filter(
@@ -328,9 +331,9 @@ export function createGenAttributeDagTextMeasure(
 
         appendGeneratedToken(token: string, offset: [number, number]): GenAttrDagTokenGeom {
             // offset[0] 是原始坐标系下该 token 在全文中的起点（= context.length at generation time）。
-            // 映射到压缩坐标系：prompt 外的字符无删除，仅需减去 prompt 被删除的总字符数。
-            const generatedRelative = offset[0] - originalPromptLength;
-            const compactedStart = compactedPromptLength + generatedRelative;
+            // 映射到压缩坐标系：自 layoutAnchor 之后的生成区无 delete，按锚点相对偏移平移。
+            const generatedRelative = offset[0] - layoutAnchorLength;
+            const compactedStart = compactedLayoutAnchorLength + generatedRelative;
             const compactedOffset: [number, number] = [compactedStart, compactedStart + token.length];
 
             fullText += token;

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

@@ -592,8 +592,8 @@ export type GenAttributeDagHandle = {
     /**
      * 清空图与测量状态；不修改当前 SVG 上的 d3 zoom 变换（视口平移/缩放由 `layoutDirty` 与
      * `fitViewportToContent` 控制）。
-     * @param preserveUserViewport 为 `true` 时保留调用前的 `layoutDirty`：用于「从末尾重播前 reset」
-     * 时若用户已手动画布，重放后仍不自动 fit。默认 `false`（新一次 run 等场景仍从干净视口策略起算）。
+     * @param preserveUserViewport 为 `true` 时保留调用前的 `layoutDirty`：设置项切换后重放、
+     * 步进重放从末尾重头播放等保留用户 pan/zoom。默认 `false`（新一次 run 等场景仍从干净视口起算）。
      */
     reset(preserveUserViewport?: boolean): void;
     /**
@@ -1358,6 +1358,9 @@ export function initGenAttributeDagView(
         );
     }
 
+    /** 步进重放（▶）期间为 true；fit 由页面 `afterStepShown` + Auto zoom 统一处理，见 {@link syncLayoutForLowVisibilityMembership}。 */
+    let dagPlaybackPlaying = false;
+
     /**
      * Hide exclude/inactive 时，参与布局的节点集随焦点 / dim 阈值变化；须重算 linear-arc / spiral 几何。
      */
@@ -1372,14 +1375,14 @@ export function initGenAttributeDagView(
             if (layoutIncludedNodeIdsKey === LAYOUT_INCLUDED_ALL_KEY) return;
             layoutIncludedNodeIdsKey = LAYOUT_INCLUDED_ALL_KEY;
             paint();
-            if (!layoutDirty) fitViewportToContent(true);
+            if (!layoutDirty && !dagPlaybackPlaying) fitViewportToContent(true);
             return;
         }
         const key = computeLayoutIncludedNodeIdsKey(focusId, focusState);
         if (key === layoutIncludedNodeIdsKey) return;
         layoutIncludedNodeIdsKey = key;
         paint();
-        if (!layoutDirty) fitViewportToContent(true);
+        if (!layoutDirty && !dagPlaybackPlaying) fitViewportToContent(true);
     }
 
     function invalidateLayoutIncludedNodeIdsKey(): void {
@@ -1425,7 +1428,7 @@ export function initGenAttributeDagView(
      */
     let dagExcludeIntervals: [number, number][] = [];
     /**
-     * 每次 {@link setPromptTokenSpans} 按当前 `layoutWire` + `inputRanges` 重算（与 exclude 一致；多轮追加 input 区时扩展）。
+     * 每次 {@link setPromptTokenSpans} 按 `layoutWire` + `inputRanges` 重算（与 exclude 一致；多轮追加 input 区时扩展）。
      * 命中区间内的 prompt token 不进入图也不进入测量层（textMeasure 物理压缩布局空间）。
      */
     let dagDeleteIntervals: [number, number][] = [];
@@ -2199,9 +2202,10 @@ export function initGenAttributeDagView(
         recursiveEdgeAnimation.stopPlayback();
         if (batchDepth === 0) {
             syncGraphToSvg();
-            // 生成 / 单步回放 / DAG 步进播放（均非批内）每步 `fitViewportToContent()`；其内部在
-            // `layoutDirty` 时 no-op。整段批回放仅 `endBatch` → `syncGraphToSvg`，fit 由调用方或 RO。
-            fitViewportToContent();
+            // 生成时每步 fit；步进重放（▶）由页面按 Auto zoom 在 `afterStepShown` 统一处理。
+            if (!dagPlaybackPlaying) {
+                fitViewportToContent();
+            }
         }
     }
 
@@ -2330,7 +2334,6 @@ export function initGenAttributeDagView(
     });
     ro.observe(stackEl);
 
-    let dagPlaybackPlaying = false;
     const playBtn = resultsRoot
         .append('button')
         .attr('type', 'button')

client/src/shared/prediction_attribution/core/excludePromptPatternsUi.ts

@@ -20,6 +20,8 @@ export type BindExcludePatternsUiOptions = {
     defaultTextWhenKeyAbsent?: string;
     /** enable 键从未写入时的默认勾选态；缺省 `true`（与 Attribution Exclude 一致） */
     defaultEnabledWhenKeyAbsent?: boolean;
+    /** 为 true 时不写 localStorage（由调用方统一 sync，如 Gen Attribute demo UI 面板委托） */
+    skipLocalStoragePersist?: boolean;
 };
 
 export type BindExcludePromptPatternsUiOptions = Omit<
@@ -46,6 +48,7 @@ export function bindExcludePatternsUi(options: BindExcludePatternsUiOptions): vo
         onEffectiveChange,
         defaultTextWhenKeyAbsent,
         defaultEnabledWhenKeyAbsent = true,
+        skipLocalStoragePersist = false,
     } = options;
     const { textKey, enabledKey } = storageKeys;
 
@@ -70,16 +73,20 @@ export function bindExcludePatternsUi(options: BindExcludePatternsUiOptions): vo
     syncEnableGatedTextInputVisibility(enableCheckbox, textInput);
 
     enableCheckbox?.addEventListener('change', () => {
-        if (textInput) {
-            lsSet(textKey, textInput.value);
+        if (!skipLocalStoragePersist) {
+            if (textInput) {
+                lsSet(textKey, textInput.value);
+            }
+            lsWriteBool(enabledKey, enableCheckbox.checked, '1');
         }
-        lsWriteBool(enabledKey, enableCheckbox.checked, '1');
         syncEnableGatedTextInputVisibility(enableCheckbox, textInput);
         onEffectiveChange();
     });
 
     textInput?.addEventListener('blur', () => {
-        lsSet(textKey, textInput.value);
+        if (!skipLocalStoragePersist) {
+            lsSet(textKey, textInput.value);
+        }
         onEffectiveChange();
     });
 

client/src/shared/storage/genAttributeRunCache.ts

@@ -91,6 +91,8 @@ export type GenAttrDemoUiOptions = {
     /** 是否显示 token tooltip（UI: Show token tooltip；`showTokenInfoOnSelected`）。 */
     showTokenInfoOnSelected: boolean;
     replayPacingMode: 'total' | 'step';
+    /** 步进重放（▶）每步是否自动 fit 视口。 */
+    replayAutoZoom: boolean;
     playbackTotalS: number;
     playbackStepMs: number;
     /** 删除 prompt token（物理移除，不占布局）：使能与正则文本（`info_radar_gen_attr_delete_prompt_*`）。 */
@@ -332,6 +334,9 @@ function isValidDemoUiOptionsPayload(v: unknown): v is Partial<GenAttrDemoUiOpti
     if (d.replayPacingMode !== undefined && d.replayPacingMode !== 'total' && d.replayPacingMode !== 'step') {
         return false;
     }
+    if (d.replayAutoZoom !== undefined && typeof d.replayAutoZoom !== 'boolean') {
+        return false;
+    }
     if (d.playbackTotalS !== undefined && (typeof d.playbackTotalS !== 'number' || !Number.isFinite(d.playbackTotalS))) {
         return false;
     }

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

@@ -0,0 +1,49 @@
+/**
+ * DAG 预处理：delete prompt 区间收集
+ * 运行: cd client/src && npx tsx tests/prediction_attribution/genAttributeDagPreprocess.test.ts
+ */
+import { collectDeletePromptIntervals } from '../../shared/prediction_attribution/causal_flow/genAttributeDagPreprocess';
+
+let passed = 0;
+let failed = 0;
+
+function assert(label: string, cond: boolean): void {
+    if (cond) {
+        passed++;
+        console.log(`  ✓ ${label}`);
+    } else {
+        failed++;
+        console.log(`  ✗ ${label}`);
+    }
+}
+
+function assertEq<T>(label: string, actual: T, expected: T): void {
+    assert(label, JSON.stringify(actual) === JSON.stringify(expected));
+}
+
+const wire = 'PROMPT_END|TOOL_RESPONSE';
+const inputRanges: [number, number][] = [
+    [0, 11],
+    [11, wire.length],
+];
+
+console.log('collectDeletePromptIntervals');
+
+assertEq('empty inputRanges → []', collectDeletePromptIntervals(wire, [], 'TOOL'), []);
+
+assertEq(
+    'match only in inputRanges[0]',
+    collectDeletePromptIntervals(wire, inputRanges, 'PROMPT'),
+    [[0, 6]],
+);
+
+assertEq(
+    'match in later input range',
+    collectDeletePromptIntervals(wire, inputRanges, 'TOOL'),
+    [[11, 15]],
+);
+
+assertEq('empty pattern → []', collectDeletePromptIntervals(wire, inputRanges, ''), []);
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);