Demo支持完整UI快照；增加新的demo；其它小改进

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

@@ -117181,5 +117181,240 @@
       "token": "<|im_end|>",
       "currentText": "In twilight's hush, where shadows play,  \nLove whispers soft, a gentle ray.  \nIt blooms in hearts, a fleeting flame,  \nThat lights the darkest, darkest lane.  \n\nIt seeks the soul, with tender grace,  \nTo mend the wounds, to heal the face.  \nThrough joy and sorrow, it remains,  \nA constant flame in life's vast sea.  \n\nYet love is not a rose that fades,  \nBut seeds that grow in time and space.  \nIt bends, it breaks, it grows again,  \nA promise etched in every pain.  \n\nSo let the world proclaim its might,  \nBut in the heart, love's truest light.<|im_end|>"
     }
-  ]
+  ],
+  "promptSpans": [
+    {
+      "offset": [
+        0,
+        12
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        12,
+        18
+      ],
+      "raw": "system"
+    },
+    {
+      "offset": [
+        18,
+        19
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        19,
+        22
+      ],
+      "raw": "You"
+    },
+    {
+      "offset": [
+        22,
+        26
+      ],
+      "raw": " are"
+    },
+    {
+      "offset": [
+        26,
+        28
+      ],
+      "raw": " a"
+    },
+    {
+      "offset": [
+        28,
+        36
+      ],
+      "raw": " helpful"
+    },
+    {
+      "offset": [
+        36,
+        46
+      ],
+      "raw": " assistant"
+    },
+    {
+      "offset": [
+        46,
+        47
+      ],
+      "raw": "."
+    },
+    {
+      "offset": [
+        47,
+        57
+      ],
+      "raw": "<|im_end|>"
+    },
+    {
+      "offset": [
+        57,
+        58
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        58,
+        70
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        70,
+        74
+      ],
+      "raw": "user"
+    },
+    {
+      "offset": [
+        74,
+        75
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        75,
+        80
+      ],
+      "raw": "Write"
+    },
+    {
+      "offset": [
+        80,
+        82
+      ],
+      "raw": " a"
+    },
+    {
+      "offset": [
+        82,
+        86
+      ],
+      "raw": " son"
+    },
+    {
+      "offset": [
+        86,
+        89
+      ],
+      "raw": "net"
+    },
+    {
+      "offset": [
+        89,
+        95
+      ],
+      "raw": " about"
+    },
+    {
+      "offset": [
+        95,
+        100
+      ],
+      "raw": " love"
+    },
+    {
+      "offset": [
+        100,
+        101
+      ],
+      "raw": "."
+    },
+    {
+      "offset": [
+        101,
+        111
+      ],
+      "raw": "<|im_end|>"
+    },
+    {
+      "offset": [
+        111,
+        112
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        112,
+        124
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        124,
+        133
+      ],
+      "raw": "assistant"
+    },
+    {
+      "offset": [
+        133,
+        134
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        134,
+        141
+      ],
+      "raw": "<think>"
+    },
+    {
+      "offset": [
+        141,
+        143
+      ],
+      "raw": "\n\n"
+    },
+    {
+      "offset": [
+        143,
+        151
+      ],
+      "raw": "</think>"
+    },
+    {
+      "offset": [
+        151,
+        153
+      ],
+      "raw": "\n\n"
+    }
+  ],
+  "draft": {
+    "mode": "raw",
+    "model": "base",
+    "maxTokens": 200
+  },
+  "demoUiOptions": {
+    "layoutMode": "text-flow",
+    "measureWidthPx": 400,
+    "dagCompactness": 0.6,
+    "linearArcAdjacentGapPx": 0,
+    "hideExcludedTokens": false,
+    "edgeTopPCoverage": 0.7,
+    "nodeCiVisualScaleEnabled": true,
+    "edgeWeakenHighSurprisalEnabled": true,
+    "hideInactiveEdges": false,
+    "replayPacingMode": "step",
+    "playbackTotalS": 7,
+    "playbackStepMs": 100,
+    "excludePromptPatternsEnabled": true,
+    "excludePromptPatternsText": "#comment# use '#comment#' to comment lines; support regex\n<\\|im_start\\|>system\\n\n<\\|im_start\\|>user\\n\n<\\|im_start\\|>assistant\\n\n<\\|im_start\\|>assistant\\n\\n\n<\\|im_end\\|>\\n\n<think>\\n\\n\n</think>\\n\\n\n<\\|im_start\\|>system\\n[\\s\\S]*?<\\|im_end\\|>#comment# all system prompt",
+    "excludeGeneratedPatternsEnabled": true,
+    "excludeGeneratedPatternsText": "<think>\\n\n</think>\\n\\n"
+  }
 }

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

@@ -15733,5 +15733,254 @@
       "token": "<|im_end|>",
       "currentText": "春色满园花满枝，  \n轻风拂面柳依依。  \n桃红柳绿新晴日，  \n一缕芬芳入梦时。<|im_end|>"
     }
-  ]
+  ],
+  "promptSpans": [
+    {
+      "offset": [
+        0,
+        12
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        12,
+        18
+      ],
+      "raw": "system"
+    },
+    {
+      "offset": [
+        18,
+        19
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        19,
+        22
+      ],
+      "raw": "You"
+    },
+    {
+      "offset": [
+        22,
+        26
+      ],
+      "raw": " are"
+    },
+    {
+      "offset": [
+        26,
+        28
+      ],
+      "raw": " a"
+    },
+    {
+      "offset": [
+        28,
+        36
+      ],
+      "raw": " helpful"
+    },
+    {
+      "offset": [
+        36,
+        46
+      ],
+      "raw": " assistant"
+    },
+    {
+      "offset": [
+        46,
+        47
+      ],
+      "raw": "."
+    },
+    {
+      "offset": [
+        47,
+        57
+      ],
+      "raw": "<|im_end|>"
+    },
+    {
+      "offset": [
+        57,
+        58
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        58,
+        70
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        70,
+        74
+      ],
+      "raw": "user"
+    },
+    {
+      "offset": [
+        74,
+        75
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        75,
+        76
+      ],
+      "raw": "写"
+    },
+    {
+      "offset": [
+        76,
+        78
+      ],
+      "raw": "一首"
+    },
+    {
+      "offset": [
+        78,
+        79
+      ],
+      "raw": "绝"
+    },
+    {
+      "offset": [
+        79,
+        80
+      ],
+      "raw": "句"
+    },
+    {
+      "offset": [
+        80,
+        81
+      ],
+      "raw": "，"
+    },
+    {
+      "offset": [
+        81,
+        83
+      ],
+      "raw": "主题"
+    },
+    {
+      "offset": [
+        83,
+        84
+      ],
+      "raw": "是"
+    },
+    {
+      "offset": [
+        84,
+        86
+      ],
+      "raw": "春天"
+    },
+    {
+      "offset": [
+        86,
+        87
+      ],
+      "raw": "。"
+    },
+    {
+      "offset": [
+        87,
+        97
+      ],
+      "raw": "<|im_end|>"
+    },
+    {
+      "offset": [
+        97,
+        98
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        98,
+        110
+      ],
+      "raw": "<|im_start|>"
+    },
+    {
+      "offset": [
+        110,
+        119
+      ],
+      "raw": "assistant"
+    },
+    {
+      "offset": [
+        119,
+        120
+      ],
+      "raw": "\n"
+    },
+    {
+      "offset": [
+        120,
+        127
+      ],
+      "raw": "<think>"
+    },
+    {
+      "offset": [
+        127,
+        129
+      ],
+      "raw": "\n\n"
+    },
+    {
+      "offset": [
+        129,
+        137
+      ],
+      "raw": "</think>"
+    },
+    {
+      "offset": [
+        137,
+        139
+      ],
+      "raw": "\n\n"
+    }
+  ],
+  "draft": {
+    "mode": "raw",
+    "model": "base",
+    "maxTokens": 200
+  },
+  "demoUiOptions": {
+    "layoutMode": "text-flow",
+    "measureWidthPx": 400,
+    "dagCompactness": 0.5,
+    "linearArcAdjacentGapPx": 0,
+    "hideExcludedTokens": false,
+    "edgeTopPCoverage": 0.7,
+    "nodeCiVisualScaleEnabled": true,
+    "edgeWeakenHighSurprisalEnabled": true,
+    "hideInactiveEdges": false,
+    "replayPacingMode": "step",
+    "playbackTotalS": 7,
+    "playbackStepMs": 200,
+    "excludePromptPatternsEnabled": true,
+    "excludePromptPatternsText": "#comment# use '#comment#' to comment lines; support regex\n<\\|im_start\\|>system\\n\n<\\|im_start\\|>user\\n\n<\\|im_start\\|>assistant\\n\n<\\|im_start\\|>assistant\\n\\n\n<\\|im_end\\|>\\n\n<think>\\n\\n\n</think>\\n\\n\n<\\|im_start\\|>system\\n[\\s\\S]*?<\\|im_end\\|>#comment# all system prompt",
+    "excludeGeneratedPatternsEnabled": true,
+    "excludeGeneratedPatternsText": "<think>\\n\n</think>\\n\\n"
+  }
 }

client/src/ts/attribution/attributionExcludePromptPatternsStorage.ts

@@ -1,14 +1,10 @@
 /**
- * 与 {@link ./excludePromptPatternsUi bindExcludePromptPatternsUi} / {@link ./excludePromptPatternsUi bindExcludeGeneratedPatternsUi} 同步持久化。
- * Prompt 键名保留历史前缀 `exclude_tokens`，避免用户已存配置失效。
+ * 归因页 Exclude prompt：`bindExcludePromptPatternsUi` / {@link readStoredEffectiveExcludePromptPatternsText} 共用键名。
+ * Prompt 键名保留历史前缀 `exclude_tokens`。Generate & Attribute 页的排除正则使用独立 `info_radar_gen_attr_exclude_*`，与此处解耦。
  */
 export const EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY = 'info_radar_attribution_exclude_tokens';
 export const EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY = 'info_radar_attribution_exclude_tokens_enabled';
 
-export const EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY = 'info_radar_attribution_exclude_generated_tokens';
-export const EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY =
-    'info_radar_attribution_exclude_generated_tokens_enabled';
-
 /**
  * 首次使用（`exclude_tokens` 键从未写入）时 UI 与生效逻辑采用的默认行；`''` 表示用户已显式清空，不再使用本默认。
  * 与 {@link readStoredEffectiveExcludePromptPatternsText} 的 `null` / 有值区分一致。
@@ -26,7 +22,7 @@ export const DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT = [
 ].join('\n');
 
 /**
- * 首次使用（`exclude_generated_tokens` 键从未写入）时 Generate & Attribute「Exclude generated」的默认行。
+ * Generate & Attribute「Exclude generated」占位默认文案；该页的存储键前缀为 `info_radar_gen_attr_exclude_generated_*`。
  */
 export const DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT = [
     '<think>\\n',
@@ -49,20 +45,3 @@ export function readStoredEffectiveExcludePromptPatternsText(): string {
         return '';
     }
 }
-
-/**
- * Generate & Attribute「Exclude generated patterns」：未持久化文本键（`null`）时用
- * {@link DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT}；已持久化空串表示用户选择排除零条模式。
- */
-export function readStoredEffectiveExcludeGeneratedPatternsText(): string {
-    try {
-        const enabledRaw = localStorage.getItem(EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY);
-        const enabled = enabledRaw === null ? true : enabledRaw === '1';
-        if (!enabled) return '';
-        const raw = localStorage.getItem(EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY);
-        if (raw === null) return DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT;
-        return raw;
-    } catch {
-        return '';
-    }
-}

client/src/ts/attribution/excludePromptPatternsUi.ts

@@ -1,8 +1,5 @@
 import {
-    DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT,
     DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT,
-    EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
-    EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY,
     EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
     EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY,
 } from './attributionExcludePromptPatternsStorage';
@@ -92,7 +89,8 @@ function bindExcludePatternsUi(options: BindExcludePatternsUiOptions): void {
 }
 
 /**
- * Exclude prompt patterns：Attribution 与 Generate & Attribute 页共用，storage 见 {@link attributionExcludePromptPatternsStorage}。
+ * Exclude prompt patterns：归因页绑定；键名见 {@link ./attributionExcludePromptPatternsStorage}。
+ * Generate & Attribute 页的排除在 `gen_attribute.ts` 内单独绑定（`info_radar_gen_attr_exclude_*`）。
  */
 export function bindExcludePromptPatternsUi(options: BindExcludePromptPatternsUiOptions): void {
     bindExcludePatternsUi({
@@ -104,15 +102,3 @@ export function bindExcludePromptPatternsUi(options: BindExcludePromptPatternsUi
         defaultTextWhenKeyAbsent: DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT,
     });
 }
-
-/** Exclude generated patterns：仅 Generate & Attribute 页绑定；storage 键见 {@link attributionExcludePromptPatternsStorage}。 */
-export function bindExcludeGeneratedPatternsUi(options: BindExcludePromptPatternsUiOptions): void {
-    bindExcludePatternsUi({
-        storageKeys: {
-            textKey: EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY,
-            enabledKey: EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
-        },
-        ...options,
-        defaultTextWhenKeyAbsent: DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT,
-    });
-}

client/src/ts/attribution/genAttributeDagPreprocess.ts

@@ -1,7 +1,3 @@
-import {
-    readStoredEffectiveExcludeGeneratedPatternsText,
-    readStoredEffectiveExcludePromptPatternsText,
-} from './attributionExcludePromptPatternsStorage';
 import {
     collectExcludeRegexMatchIntervals,
     isOffsetSpanFullyExcluded,
@@ -120,18 +116,23 @@ export function extractPromptTokenSpans(step: TokenGenStep): PromptTokenSpan[] {
     return [...byKey.values()];
 }
 
-/** 与 {@link excludeNodeAggregatedEntries} 使用同一套 prompt / 生成区与 storage 文本，在 `intervalCtx` 上收集排除区间（全串下标）。 */
+/**
+ * 在 `intervalCtx` 上收集排除区间（全串下标）；正则全文由调用方提供（Gen Attribute 页与控件一致）。
+ * 与 {@link excludeNodeAggregatedEntries} 须传入同一套 `excludePromptPatternsText` / `excludeGeneratedPatternsText`。
+ */
 export function collectGenAttrDagExcludeIntervals(
     intervalCtx: string,
     promptRegionEnd: number,
+    excludePromptPatternsText: string,
+    excludeGeneratedPatternsText: string,
 ): [number, number][] {
     const pe = promptRegionEnd;
     return [
-        ...collectExcludeRegexMatchIntervals(intervalCtx, readStoredEffectiveExcludePromptPatternsText(), {
+        ...collectExcludeRegexMatchIntervals(intervalCtx, excludePromptPatternsText, {
             start: 0,
             end: pe,
         }),
-        ...collectExcludeRegexMatchIntervals(intervalCtx, readStoredEffectiveExcludeGeneratedPatternsText(), {
+        ...collectExcludeRegexMatchIntervals(intervalCtx, excludeGeneratedPatternsText, {
             start: pe,
             end: intervalCtx.length,
         }),
@@ -144,17 +145,26 @@ export function collectGenAttrDagExcludeIntervals(
  *
  * @param excludeIntervalContext 取匹配区间所用的全文（与 DAG 节点 offset 同源）。流式场景传**当前已写出的累积串**
  *（如 `steps[last].context + steps[last].token`），使跨多 token 才闭合的正则与下标一致；缺省为 `step.context`。
+ * @param excludePromptPatternsText prompt 区 `[0, promptRegionEnd)` 上使用的排除正则全文（勾选关时传 `''`）。
+ * @param excludeGeneratedPatternsText 已生成后缀区上使用的排除正则全文（勾选关时传 `''`）。
  */
 export function excludeNodeAggregatedEntries(
     step: TokenGenStep,
     entries: NodeAggregatedEntry[],
-    excludeIntervalContext?: string,
+    excludeIntervalContext: string | undefined,
+    excludePromptPatternsText: string,
+    excludeGeneratedPatternsText: string,
 ): NodeAggregatedEntry[] {
     if (!entries.length) return [];
 
     const pe = step.promptRegionEnd;
     const intervalCtx = excludeIntervalContext ?? step.context;
-    const excludeIntervals = collectGenAttrDagExcludeIntervals(intervalCtx, pe);
+    const excludeIntervals = collectGenAttrDagExcludeIntervals(
+        intervalCtx,
+        pe,
+        excludePromptPatternsText,
+        excludeGeneratedPatternsText,
+    );
     return entries.map((t) => {
         const [ts, te] = t.offset;
         const excluded = isOffsetSpanFullyExcluded(ts, te, excludeIntervals);

client/src/ts/attribution/genAttributeDagView.ts

@@ -572,11 +572,17 @@ export type InitGenAttributeDagViewOptions = {
     edgeTopPCoverage?: number;
     /** 进入/退出/切换全屏失败时（常见于移动端不支持元素全屏等）。不传则无提示。 */
     onFullscreenError?: (message: string) => void;
+    /**
+     * DAG 归因排除：prompt 区正则的**生效**全文（勾选关则 `''`）。须与 Gen Attribute 页控件同源（仅该页使用本视图）。
+     */
+    getEffectiveExcludePromptPatternsText: () => string;
+    /** 已生成后缀区排除正则的生效全文（勾选关则 `''`）。 */
+    getEffectiveExcludeGeneratedPatternsText: () => string;
 };
 
 export function initGenAttributeDagView(
     resultsRoot: D3Sel,
-    options?: InitGenAttributeDagViewOptions
+    options: InitGenAttributeDagViewOptions
 ): GenAttributeDagHandle {
     const onDagRefresh = options?.onDagRefresh;
     const onDagPlaybackToggle = options?.onDagPlaybackToggle;
@@ -631,6 +637,8 @@ export function initGenAttributeDagView(
         };
     }
 
+    const { getEffectiveExcludePromptPatternsText, getEffectiveExcludeGeneratedPatternsText } = options;
+
     detachGenAttributeDagPanel.get(rootEl)?.();
     resultsRoot
         .selectAll(
@@ -1089,7 +1097,12 @@ export function initGenAttributeDagView(
             const prevIdx = firstNewIdx + i - 1;
             snapSubwordNode(addedNodes[i]!, prevIdx >= 0 ? nodes[prevIdx]! : null);
         }
-        dagExcludeIntervals = collectGenAttrDagExcludeIntervals(promptText, promptText.length);
+        dagExcludeIntervals = collectGenAttrDagExcludeIntervals(
+            promptText,
+            promptText.length,
+            getEffectiveExcludePromptPatternsText(),
+            getEffectiveExcludeGeneratedPatternsText(),
+        );
         if (batchDepth === 0) syncGraphToSvg();
     }
 
@@ -1150,7 +1163,13 @@ export function initGenAttributeDagView(
             step: stepProcessed,
             targetToken: token,
         });
-        const afterExclude = excludeNodeAggregatedEntries(step, aggregated, excludeIntervalContext);
+        const afterExclude = excludeNodeAggregatedEntries(
+            step,
+            aggregated,
+            excludeIntervalContext,
+            getEffectiveExcludePromptPatternsText(),
+            getEffectiveExcludeGeneratedPatternsText(),
+        );
         const selected = phase2RankAndSparsify(afterExclude, { cumulativeShare: edgeTopPCoverage });
 
         const mutualInformationRatio = computeMutualInformationRatio(response.target_prob);
@@ -1197,7 +1216,12 @@ export function initGenAttributeDagView(
             });
         }
 
-        const excludeIntervals = collectGenAttrDagExcludeIntervals(intervalCtx, step.promptRegionEnd);
+        const excludeIntervals = collectGenAttrDagExcludeIntervals(
+            intervalCtx,
+            step.promptRegionEnd,
+            getEffectiveExcludePromptPatternsText(),
+            getEffectiveExcludeGeneratedPatternsText(),
+        );
         dagExcludeIntervals = excludeIntervals;
         pruneDagLinksTouchingFullyExcludedNodes(graph, links, excludeIntervals);
 

client/src/ts/attribution/genAttributeDagViewSpiralMode.ts

@@ -7,11 +7,11 @@ const SPIRAL_R0 = 80;
 /** 相邻两圈之间的径向间距（px）。 */
 const SPIRAL_SPACING = 60;
 /** 每个 token 沿螺旋弧长占据的固定步长（px）。 */
-const SPIRAL_ARC_STEP = 40;
+const SPIRAL_ARC_STEP = 30;
 /** 螺旋旋转相位（弧度）：控制螺旋臂展开方向。0 = 向右，-Math.PI/2 = 向上。 */
 const SPIRAL_PHASE = Math.PI * 0.6;
 /** 螺旋上第一个（起始位置）token 的相对视觉放大倍数（仅 spiral 布局）。 */
-const SPIRAL_FIRST_TOKEN_SCALE = 2;
+const SPIRAL_FIRST_TOKEN_SCALE = 1.5;
 // ────────────────────────────────────────────────────────────────────────────
 
 type SpiralNodeLike = { nodeW: number; nodeH: number };

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

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

client/src/ts/demos/genAttributeBundledDemos.ts

@@ -2,8 +2,11 @@
  * Gen Attribute 打包 demo：大 JSON 在 `dist/demos/gen_attribute/`，运行时 fetch；slug 列表构建期内联自 generated 模块。
  */
 
-import type { GenAttrCachedRun } from '../storage/genAttributeRunCache';
-import { isKnownPersistedCompletionReason } from '../utils/generationEndReasonLabel';
+import {
+    isValidGenAttrCachedRunPayload,
+    parseGenAttrCachedRunPayload,
+    type GenAttrCachedRun,
+} from '../storage/genAttributeRunCache';
 import { GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS } from './genAttributeBundledDemoManifest.generated';
 
 const BASE = 'demos/gen_attribute/';
@@ -18,28 +21,6 @@ function isSafeDemoSlug(s: string): boolean {
     return true;
 }
 
-function isValidGenAttrCachedRunPayload(v: unknown): v is GenAttrCachedRun {
-    if (v == null || typeof v !== 'object') return false;
-    const o = v as {
-        initialContext?: unknown;
-        steps?: unknown;
-        completionReason?: unknown;
-    };
-    if (
-        typeof o.initialContext !== 'string' ||
-        !Array.isArray(o.steps) ||
-        o.steps.length === 0
-    ) {
-        return false;
-    }
-    if (o.completionReason !== undefined) {
-        if (typeof o.completionReason !== 'string' || !isKnownPersistedCompletionReason(o.completionReason)) {
-            return false;
-        }
-    }
-    return true;
-}
-
 const payloadCache = new Map<string, GenAttrCachedRun>();
 const payloadInflight = new Map<string, Promise<GenAttrCachedRun | undefined>>();
 
@@ -67,12 +48,10 @@ export async function fetchBundledGenAttributeDemoBySlug(
             const r = await fetch(fileUrl);
             if (!r.ok) return undefined;
             const raw: unknown = await r.json();
-            if (!isValidGenAttrCachedRunPayload(raw)) {
-                console.warn(`[genAttributeBundledDemos] invalid demo JSON: ${s}`);
-                return undefined;
-            }
-            payloadCache.set(s, raw);
-            return raw;
+            const parsed = parseGenAttrCachedRunPayload(raw, `bundled demo slug=${s}`);
+            if (!parsed) return undefined;
+            payloadCache.set(s, parsed);
+            return parsed;
         })().finally(() => {
             payloadInflight.delete(s);
         });

client/src/ts/gen_attribute.ts

@@ -44,14 +44,21 @@ import { fetchTokenize } from './attribution/predictionAttributeClient';
 import { completionFinishReasonLabel, type CompletionFinishReason } from './utils/generationEndReasonLabel';
 import {
     buildCachedContentUrlParam,
+    buildGenAttrExportedDemoPayload,
     getCachedEntryByContentKey,
     listCachedHistoryRows,
     removeCachedEntryByContentKey,
     save,
     touchCachedEntryByContentKey,
+    type GenAttrCachedRun,
+    type GenAttrDemoUiOptions,
     type GenAttrCacheKey,
+    type GenAttrRunDraft,
 } from './storage/genAttributeRunCache';
-import { bindExcludeGeneratedPatternsUi, bindExcludePromptPatternsUi } from './attribution/excludePromptPatternsUi';
+import {
+    DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT,
+    DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT,
+} from './attribution/attributionExcludePromptPatternsStorage';
 import { initCachedHistoryQueryDropdown, type CachedHistorySelectContext } from './utils/cachedHistoryUi';
 import {
     DEFAULT_CONTENT_URL_PARAM,
@@ -69,7 +76,6 @@ import {
 } from './demos/genAttributeBundledDemos';
 import { extractErrorMessage } from './utils/errorUtils';
 import { exportJsonFile } from './storage/localFileIO';
-import type { GenAttrCachedRun, GenAttrRunDraft } from './storage/genAttributeRunCache';
 import {
     GEN_ATTR_RAW_INPUT_HISTORY_KEY,
     GEN_ATTR_SYSTEM_INPUT_HISTORY_KEY,
@@ -107,6 +113,13 @@ const GEN_ATTR_DAG_LINEAR_ARC_GAP_STORAGE_KEY =
     'info_radar_gen_attr_dag_linear_arc_adjacent_gap';
 const GEN_ATTR_DAG_COMPACTNESS_STORAGE_KEY = 'info_radar_gen_attr_dag_compactness';
 const GEN_ATTR_DAG_EDGE_TOP_P_COVERAGE_STORAGE_KEY = 'info_radar_gen_attr_dag_edge_top_p_coverage';
+/** 仅此页：与 Attribution 的 `exclude_tokens` 无关。 */
+const GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY = 'info_radar_gen_attr_exclude_prompt_patterns';
+const GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY =
+    'info_radar_gen_attr_exclude_prompt_patterns_enabled';
+const GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY = 'info_radar_gen_attr_exclude_generated_patterns';
+const GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY =
+    'info_radar_gen_attr_exclude_generated_patterns_enabled';
 
 /** 步进回放节奏：`total`＝整段剩余回放总时长内均分间隔；`step`＝固定每步间隔（ms）。 */
 type DagReplayPacingMode = 'total' | 'step';
@@ -392,8 +405,69 @@ const dagEdgeWeakenHighSurprisalInput = document.getElementById(
 const dagHideInactiveEdgesInput = document.getElementById(
     'gen_attr_dag_hide_inactive_edges'
 ) as HTMLInputElement | null;
+const genAttrExcludePromptPatternsTa = document.getElementById(
+    'gen_attr_exclude_prompt_patterns'
+) as HTMLTextAreaElement | null;
+const genAttrExcludePromptPatternsEnable = document.getElementById(
+    'gen_attr_exclude_prompt_patterns_enable'
+) as HTMLInputElement | null;
+const genAttrExcludeGeneratedPatternsTa = document.getElementById(
+    'gen_attr_exclude_generated_patterns'
+) as HTMLTextAreaElement | null;
+const genAttrExcludeGeneratedPatternsEnable = document.getElementById(
+    'gen_attr_exclude_generated_patterns_enable'
+) as HTMLInputElement | null;
 const completeReasonEl = d3.select('#gen_attr_complete_reason');
 
+function syncGenAttrExcludePatternTextareasDisabled(): void {
+    if (genAttrExcludePromptPatternsTa) {
+        genAttrExcludePromptPatternsTa.disabled = !genAttrExcludePromptPatternsEnable?.checked;
+    }
+    if (genAttrExcludeGeneratedPatternsTa) {
+        genAttrExcludeGeneratedPatternsTa.disabled = !genAttrExcludeGeneratedPatternsEnable?.checked;
+    }
+}
+
+function hydrateGenAttrExcludePatternsFromGenAttrStorage(): void {
+    try {
+        const savedPrompt = localStorage.getItem(GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY);
+        if (genAttrExcludePromptPatternsTa) {
+            genAttrExcludePromptPatternsTa.value =
+                savedPrompt !== null ? savedPrompt : DEFAULT_EXCLUDE_PROMPT_PATTERNS_TEXT;
+        }
+        const promptEnRaw = localStorage.getItem(GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY);
+        if (genAttrExcludePromptPatternsEnable) {
+            genAttrExcludePromptPatternsEnable.checked = promptEnRaw === null ? true : promptEnRaw === '1';
+        }
+
+        const savedGen = localStorage.getItem(GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY);
+        if (genAttrExcludeGeneratedPatternsTa) {
+            genAttrExcludeGeneratedPatternsTa.value =
+                savedGen !== null ? savedGen : DEFAULT_EXCLUDE_GENERATED_PATTERNS_TEXT;
+        }
+        const genEnRaw = localStorage.getItem(GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY);
+        if (genAttrExcludeGeneratedPatternsEnable) {
+            genAttrExcludeGeneratedPatternsEnable.checked = genEnRaw === null ? true : genEnRaw === '1';
+        }
+    } catch {
+        /* ignore */
+    }
+    syncGenAttrExcludePatternTextareasDisabled();
+}
+
+hydrateGenAttrExcludePatternsFromGenAttrStorage();
+
+/** 与 DAG 同源：DAG 预处理按当前控件即时读取，不读 Attribution 的 localStorage。 */
+function genAttrEffectiveExcludePromptPatternsText(): string {
+    if (!genAttrExcludePromptPatternsEnable?.checked) return '';
+    return genAttrExcludePromptPatternsTa?.value ?? '';
+}
+
+function genAttrEffectiveExcludeGeneratedPatternsText(): string {
+    if (!genAttrExcludeGeneratedPatternsEnable?.checked) return '';
+    return genAttrExcludeGeneratedPatternsTa?.value ?? '';
+}
+
 if (modelVariantSelect) modelVariantSelect.value = readStoredModelVariant();
 if (maxTokensInput) maxTokensInput.value = String(readStoredMaxTokens());
 const initialDagLayoutMode = readStoredDagLayoutMode();
@@ -625,6 +699,29 @@ function teacherForcingContinuationForRun(): string | undefined {
     return t.length > 0 ? t : undefined;
 }
 
+/** 与 IndexedDB `save` 使用同一快照逻辑（须在 `autoMoveFirstTeacherForcingTokenToPromptIfNeeded` 之后调用）。 */
+function buildGenAttrRunDraftForCache(): GenAttrRunDraft {
+    const teacherForcingText = teacherForcingContinuationForRun();
+    const stopAfterTF = isStopAfterTeacherForcingOn();
+    const maxTokens = currentMaxTokens();
+    const tokenizeModel = currentModelVariant();
+    const tfDraftFields =
+        teacherForcingText !== undefined
+            ? { teacherForcing: teacherForcingText, stopAfterTeacherForcing: stopAfterTF }
+            : {};
+    return isSkipChatTemplate()
+        ? { mode: 'raw', model: tokenizeModel, maxTokens, ...tfDraftFields }
+        : {
+              mode: 'chat',
+              model: tokenizeModel,
+              maxTokens,
+              system: systemPromptTextarea?.value ?? '',
+              user: userPromptTextarea?.value ?? '',
+              useSystem: isGenAttrUseSystemPrompt(),
+              ...tfDraftFields,
+          };
+}
+
 function syncTeacherForcingRow(): void {
     if (genAttrTeacherForcingBlock) {
         genAttrTeacherForcingBlock.hidden = !isGenAttrTeacherForcingUiOn();
@@ -903,6 +1000,8 @@ const dagHandle = initGenAttributeDagView(d3.select('#results'), {
     hideExcludedTokens: initialDagHideExcludedTokens,
     edgeTopPCoverage: initialDagEdgeTopPCoverage,
     onFullscreenError: (message) => showToast(message, 'error'),
+    getEffectiveExcludePromptPatternsText: genAttrEffectiveExcludePromptPatternsText,
+    getEffectiveExcludeGeneratedPatternsText: genAttrEffectiveExcludeGeneratedPatternsText,
 });
 
 dagLayoutModeSelect?.addEventListener('change', () => {
@@ -994,6 +1093,152 @@ dagLinearArcIntervalInput?.addEventListener('change', () => {
     dagHandle.setLinearArcAdjacentGapPx(n, { skipRefit: isDagBusy() });
 });
 
+/** 读取当前演示用 UI（DAG 与排除正则等），供 Export demo 写入 `demoUiOptions`。 */
+function readGenAttrDemoUiOptionsFromControls(): GenAttrDemoUiOptions {
+    const rawW = parseInt(dagMeasureWidthInput?.value ?? '', 10);
+    const measureWidthPx = Number.isFinite(rawW)
+        ? clampDagMeasureWidth(rawW)
+        : GEN_ATTR_DAG_MEASURE_WIDTH_DEFAULT;
+    const rawC = parseFloat(dagCompactnessInput?.value ?? '');
+    const dagCompactness = Number.isFinite(rawC)
+        ? clampDagCompactness(rawC)
+        : DAG_COMPACTNESS_DEFAULT;
+    const rawGap = parseInt(dagLinearArcIntervalInput?.value ?? '', 10);
+    const linearArcAdjacentGapPx = Number.isFinite(rawGap)
+        ? clampLinearArcAdjacentGap(rawGap)
+        : LINEAR_ARC_ADJACENT_GAP_DEFAULT;
+    const rawTop = parseFloat(dagEdgeTopPCoverageInput?.value ?? '');
+    const edgeTopPCoverage = Number.isFinite(rawTop)
+        ? clampDagEdgeTopPCoverage(rawTop)
+        : DAG_EDGE_TOP_P_COVERAGE_DEFAULT;
+    const rawTotal = parseInt(dagPlaybackTotalSInput?.value ?? '', 10);
+    const playbackTotalS = Number.isFinite(rawTotal)
+        ? clampDagPlaybackTotalS(rawTotal)
+        : GEN_ATTR_DAG_PLAYBACK_TOTAL_S_DEFAULT;
+    const rawStep = parseInt(dagPlaybackStepMsInput?.value ?? '', 10);
+    const playbackStepMs = Number.isFinite(rawStep)
+        ? clampDagPlaybackStepMs(rawStep)
+        : GEN_ATTR_DAG_PLAYBACK_STEP_MS_DEFAULT;
+    return {
+        layoutMode: currentDagLayoutMode(),
+        measureWidthPx,
+        dagCompactness,
+        linearArcAdjacentGapPx,
+        hideExcludedTokens: dagHideExcludedTokensInput?.checked ?? false,
+        edgeTopPCoverage,
+        nodeCiVisualScaleEnabled: dagNodeCiVisualScaleInput?.checked ?? true,
+        edgeWeakenHighSurprisalEnabled: dagEdgeWeakenHighSurprisalInput?.checked ?? true,
+        hideInactiveEdges: dagHideInactiveEdgesInput?.checked ?? false,
+        replayPacingMode: currentDagReplayPacingMode(),
+        playbackTotalS,
+        playbackStepMs,
+        excludePromptPatternsEnabled: genAttrExcludePromptPatternsEnable?.checked ?? true,
+        excludePromptPatternsText: genAttrExcludePromptPatternsTa?.value ?? '',
+        excludeGeneratedPatternsEnabled: genAttrExcludeGeneratedPatternsEnable?.checked ?? true,
+        excludeGeneratedPatternsText: genAttrExcludeGeneratedPatternsTa?.value ?? '',
+    };
+}
+
+/**
+ * 从 `demoUiOptions` 还原排除控件（仅 DOM）；与施加 DAG demo 不回写 GEN_ATTR_LS 的策略一致，`replay` 读当前控件生效。
+ */
+function applyGenAttrExcludePatternsFromDemoUiSnap(snap: Partial<GenAttrDemoUiOptions>): void {
+    const {
+        excludePromptPatternsEnabled,
+        excludePromptPatternsText,
+        excludeGeneratedPatternsEnabled,
+        excludeGeneratedPatternsText,
+    } = snap;
+    if (
+        excludePromptPatternsEnabled === undefined &&
+        excludePromptPatternsText === undefined &&
+        excludeGeneratedPatternsEnabled === undefined &&
+        excludeGeneratedPatternsText === undefined
+    ) {
+        return;
+    }
+    if (excludePromptPatternsEnabled !== undefined && genAttrExcludePromptPatternsEnable) {
+        genAttrExcludePromptPatternsEnable.checked = excludePromptPatternsEnabled;
+    }
+    if (excludePromptPatternsText !== undefined && genAttrExcludePromptPatternsTa) {
+        genAttrExcludePromptPatternsTa.value = excludePromptPatternsText;
+    }
+    if (excludeGeneratedPatternsEnabled !== undefined && genAttrExcludeGeneratedPatternsEnable) {
+        genAttrExcludeGeneratedPatternsEnable.checked = excludeGeneratedPatternsEnabled;
+    }
+    if (excludeGeneratedPatternsText !== undefined && genAttrExcludeGeneratedPatternsTa) {
+        genAttrExcludeGeneratedPatternsTa.value = excludeGeneratedPatternsText;
+    }
+    syncGenAttrExcludePatternTextareasDisabled();
+}
+
+/**
+ * 按记录中的 `demoUiOptions` 还原 DAG 面板与排除控件（后者仅 DOM）。
+ */
+function applyGenAttrDemoUiOptionsFromRecord(rec: GenAttrCachedRun): void {
+    const snap = rec.demoUiOptions;
+    if (!snap) return;
+    const mode = snap.layoutMode;
+    if (mode) {
+        if (dagLayoutModeSelect) {
+            dagLayoutModeSelect.value = mode;
+        }
+        applyDagLayoutModeUi();
+        dagHandle.setLayoutMode(mode);
+    }
+
+    if (snap.measureWidthPx !== undefined) {
+        const w = clampDagMeasureWidth(snap.measureWidthPx);
+        if (dagMeasureWidthInput) dagMeasureWidthInput.value = String(w);
+        dagHandle.setMeasureWidthPx(w);
+    }
+    if (snap.dagCompactness !== undefined) {
+        const c = clampDagCompactness(snap.dagCompactness);
+        if (dagCompactnessInput) dagCompactnessInput.value = String(c);
+        dagHandle.setDagCompactness(c);
+    }
+    if (snap.linearArcAdjacentGapPx !== undefined) {
+        const n = clampLinearArcAdjacentGap(snap.linearArcAdjacentGapPx);
+        if (dagLinearArcIntervalInput) dagLinearArcIntervalInput.value = String(n);
+        dagHandle.setLinearArcAdjacentGapPx(n);
+    }
+    if (snap.edgeTopPCoverage !== undefined) {
+        const c = clampDagEdgeTopPCoverage(snap.edgeTopPCoverage);
+        if (dagEdgeTopPCoverageInput) dagEdgeTopPCoverageInput.value = String(c);
+        dagHandle.setEdgeTopPCoverage(c);
+    }
+    if (snap.hideExcludedTokens !== undefined) {
+        if (dagHideExcludedTokensInput) dagHideExcludedTokensInput.checked = snap.hideExcludedTokens;
+        dagHandle.setHideExcludedTokens(snap.hideExcludedTokens);
+    }
+    if (snap.nodeCiVisualScaleEnabled !== undefined) {
+        if (dagNodeCiVisualScaleInput) dagNodeCiVisualScaleInput.checked = snap.nodeCiVisualScaleEnabled;
+        setDagNodeCiVisualScaleEnabled(snap.nodeCiVisualScaleEnabled);
+    }
+    if (snap.edgeWeakenHighSurprisalEnabled !== undefined) {
+        if (dagEdgeWeakenHighSurprisalInput) dagEdgeWeakenHighSurprisalInput.checked = snap.edgeWeakenHighSurprisalEnabled;
+        setDagEdgeWeakenHighSurprisalEnabled(snap.edgeWeakenHighSurprisalEnabled);
+    }
+    if (snap.hideInactiveEdges !== undefined) {
+        if (dagHideInactiveEdgesInput) dagHideInactiveEdgesInput.checked = snap.hideInactiveEdges;
+        applyDagHideInactiveEdges(snap.hideInactiveEdges);
+    }
+    if (snap.replayPacingMode !== undefined) {
+        if (dagReplayModeSelect) dagReplayModeSelect.value = snap.replayPacingMode;
+        applyDagReplaySpeedUi();
+    }
+    if (snap.playbackTotalS !== undefined) {
+        const s = clampDagPlaybackTotalS(snap.playbackTotalS);
+        if (dagPlaybackTotalSInput) dagPlaybackTotalSInput.value = String(s);
+    }
+    if (snap.playbackStepMs !== undefined) {
+        const ms = clampDagPlaybackStepMs(snap.playbackStepMs);
+        if (dagPlaybackStepMsInput) dagPlaybackStepMsInput.value = String(ms);
+    }
+
+    applyGenAttrExcludePatternsFromDemoUiSnap(snap);
+}
+
 window.addEventListener('pagehide', (ev) => {
     if (ev.persisted) return;
     dagHandle.detach();
@@ -1007,16 +1252,40 @@ function onExcludePatternsEffectiveChange(): void {
     dagHandle.clearNodeSelection();
 }
 
-bindExcludePromptPatternsUi({
-    textInput: document.getElementById('gen_attr_exclude_prompt_patterns') as HTMLTextAreaElement | null,
-    enableCheckbox: document.getElementById('gen_attr_exclude_prompt_patterns_enable') as HTMLInputElement | null,
-    onEffectiveChange: onExcludePatternsEffectiveChange,
-});
-bindExcludeGeneratedPatternsUi({
-    textInput: document.getElementById('gen_attr_exclude_generated_patterns') as HTMLTextAreaElement | null,
-    enableCheckbox: document.getElementById('gen_attr_exclude_generated_patterns_enable') as HTMLInputElement | null,
-    onEffectiveChange: onExcludePatternsEffectiveChange,
-});
+function bindExcludePatternControls(
+    enableEl: HTMLInputElement | null,
+    textEl: HTMLTextAreaElement | null,
+    textKey: string,
+    enabledKey: string,
+): void {
+    enableEl?.addEventListener('change', () => {
+        try {
+            if (textEl) localStorage.setItem(textKey, textEl.value);
+            localStorage.setItem(enabledKey, enableEl.checked ? '1' : '0');
+        } catch { /* ignore */ }
+        syncGenAttrExcludePatternTextareasDisabled();
+        onExcludePatternsEffectiveChange();
+    });
+    textEl?.addEventListener('blur', () => {
+        try {
+            localStorage.setItem(textKey, textEl.value);
+        } catch { /* ignore */ }
+        onExcludePatternsEffectiveChange();
+    });
+}
+
+bindExcludePatternControls(
+    genAttrExcludePromptPatternsEnable,
+    genAttrExcludePromptPatternsTa,
+    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_PROMPT_PATTERNS_ENABLED_STORAGE_KEY,
+);
+bindExcludePatternControls(
+    genAttrExcludeGeneratedPatternsEnable,
+    genAttrExcludeGeneratedPatternsTa,
+    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_STORAGE_KEY,
+    GEN_ATTR_EXCLUDE_GENERATED_PATTERNS_ENABLED_STORAGE_KEY,
+);
 
 function currentModelVariant(): PredictionAttributeModelVariant {
     const v = modelVariantSelect?.value;
@@ -1306,6 +1575,7 @@ async function applyGenAttrCachedRun(
 
     stopDagPlayback();
     dagHandle.reset();
+    applyGenAttrDemoUiOptionsFromRecord(rec);
     runnerHandle = createHydratedTokenGenHandle(rec.steps);
     lastRunInitialContext = rec.initialContext;
     lastRunInputSnapshot = getInputSnapshotForRun();
@@ -1475,7 +1745,11 @@ void (async () => {
         try {
             const rec = await fetchBundledGenAttributeDemoBySlug(demoRaw);
             if (!isStaleGenAttrCachedApply(applyGen) && rec && isGenAttrRunPayloadValidForUi(rec)) {
-                await applyGenAttrCachedRun(rec, { afterUrl: { kind: 'demo', slug: demoRaw } }, applyGen);
+                await applyGenAttrCachedRun(
+                    rec,
+                    { afterUrl: { kind: 'demo', slug: demoRaw } },
+                    applyGen
+                );
                 if (!isStaleGenAttrCachedApply(applyGen)) {
                     applied = true;
                 }
@@ -1593,20 +1867,7 @@ async function runGeneration(): Promise<void> {
         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 runDraft = buildGenAttrRunDraftForCache();
         const prompt = getActivePromptValue();
         analyzeProgressEl.text('Assembling prompt…').style('display', null);
         initialContext = await resolveInitialContext(signal);
@@ -1773,18 +2034,29 @@ function syncGenAttrExportDemoBtn(): void {
 syncGenAttrExportDemoBtn();
 adminManager.onAdminModeChange(() => syncGenAttrExportDemoBtn());
 exportDemoBtn?.addEventListener('click', () => {
-    const h = runnerHandle;
-    const ic = lastRunInitialContext;
-    if (!h || !ic || h.tokenCount < 1) {
-        showToast(tr('No run to export'), 'error');
-        return;
-    }
-    const payload: GenAttrCachedRun = {
-        initialContext: ic,
-        steps: h.getAllSteps(),
-        ...(lastRunCompletionReason != null ? { completionReason: lastRunCompletionReason } : {}),
-    };
-    void exportJsonFile(payload, `genattr-${Date.now()}.json`);
+    void (async () => {
+        const h = runnerHandle;
+        const ic = lastRunInitialContext;
+        if (!h || !ic || h.tokenCount < 1) {
+            showToast(tr('No run to export'), 'error');
+            return;
+        }
+        await autoMoveFirstTeacherForcingTokenToPromptIfNeeded();
+        try {
+            const payload = buildGenAttrExportedDemoPayload({
+                initialContext: ic,
+                steps: h.getAllSteps(),
+                promptSpans: currentRunPromptSpans,
+                completionReason: lastRunCompletionReason ?? undefined,
+                draft: buildGenAttrRunDraftForCache(),
+                demoUiOptions: readGenAttrDemoUiOptionsFromControls(),
+            });
+            void exportJsonFile(payload, `genattr-${Date.now()}.json`);
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : String(e);
+            showToast(msg, 'error');
+        }
+    })();
 });
 
 initChatPanelLayout({ storageKey: PANEL_SPLIT_STORAGE_KEY_GEN_ATTRIBUTE });

client/src/ts/lang/translations.ts

@@ -87,6 +87,10 @@ export const translations: Translations = {
         'Analyze&Upload': '分析并上传',
         'Analyze URL': '分析 URL',
         'Analyze URL content': '分析 URL 内容',
+        'Please enter a URL.': '请输入 URL。',
+        'Invalid input': '输入无效',
+        'Invalid URL': 'URL 无效',
+        'This does not look like a valid URL. Check for typos.': '这不像有效的网址，请检查是否输错。',
         'Cancel': '取消',
         'Clear': '清空',
         'Compare results': '对比结果',

client/src/ts/storage/genAttributeRunCache.ts

@@ -1,8 +1,10 @@
+import type { DagLayoutMode } from '../attribution/genAttributeDagView';
 import type { TokenGenStep } from '../attribution/tokenGenAttributionRunner';
 import type { PromptTokenSpan } from '../attribution/genAttributeDagPreprocess';
 import {
     canonicalizeCompletionFinishReason,
     isCompletionFinishReason,
+    isKnownPersistedCompletionReason,
     type CompletionFinishReason,
 } from '../utils/generationEndReasonLabel';
 import {
@@ -37,7 +39,12 @@ export type GenAttrRunDraft = {
     stopAfterTeacherForcing?: boolean;
 };
 
-export type GenAttrCachedRun = {
+/**
+ * Payload 中与 **正文 / demo UI 选项** 中的 UI 无关的内容（一次 run 的 JSON 主体）：
+ * - **Key 语义**（去重哈希）单独由 {@link GenAttrCacheKey} 表示并排他参与 `contentKey`；
+ * - UI 控件快照见可选字段 {@link GenAttrCachedRun.demoUiOptions}（仅导出 demo）。
+ */
+export type GenAttrCachedRunContentFields = {
     initialContext: string;
     steps: TokenGenStep[];
     /** 完整 prompt token spans（offset + raw），与 /api/tokenize 同源；旧缓存无此字段时由调用方从 step 0 归因降级。 */
@@ -49,7 +56,37 @@ export type GenAttrCachedRun = {
 };
 
 /**
- * 缓存业务 key：涵盖所有影响 steps 内容的生成参数。
+ * Gen Attribute 页 **演示用 UI** 快照（DAG 几何与勾选、回放节奏、归因排除正则等；与正文 key 无关）。
+ * **Export demo** 写入完整对象；加载时可为 {@link Partial}，按存在字段逐项应用。
+ */
+export type GenAttrDemoUiOptions = {
+    layoutMode: DagLayoutMode;
+    measureWidthPx: number;
+    dagCompactness: number;
+    linearArcAdjacentGapPx: number;
+    hideExcludedTokens: boolean;
+    edgeTopPCoverage: number;
+    nodeCiVisualScaleEnabled: boolean;
+    edgeWeakenHighSurprisalEnabled: boolean;
+    hideInactiveEdges: boolean;
+    replayPacingMode: 'total' | 'step';
+    playbackTotalS: number;
+    playbackStepMs: number;
+    /** 排除 prompt token 归因：使能与正则文本（仅 Gen Attribute，`info_radar_gen_attr_exclude_prompt_*`）。 */
+    excludePromptPatternsEnabled: boolean;
+    excludePromptPatternsText: string;
+    /** 排除生成 token 归因：使能与正则文本（`info_radar_gen_attr_exclude_generated_*`）。 */
+    excludeGeneratedPatternsEnabled: boolean;
+    excludeGeneratedPatternsText: string;
+};
+
+/** 单条记录 JSON：内容字段 + 可选 `demoUiOptions`（仅导出 demo 写入）。 */
+export type GenAttrCachedRun = GenAttrCachedRunContentFields & {
+    demoUiOptions?: Partial<GenAttrDemoUiOptions>;
+};
+
+/**
+ * 缓存业务 **key 字段**：涵盖所有影响 `steps` 内容的生成参数（决定 `contentKey`）。
  * 原则：draft 中存储的可变参数均纳入 key，同参数不同结果不应互相覆盖。
  */
 export type GenAttrCacheKey = {
@@ -77,15 +114,15 @@ 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,
-    draft?: GenAttrRunDraft
-): Promise<void> {
-    const { initialContext } = key;
+/** 构造「内容字段」：供 IndexedDB `save` 与导出 demo 的共有主体（不含 demo UI）。 */
+export function buildGenAttrCachedRunContentPayload(params: {
+    initialContext: string;
+    steps: TokenGenStep[];
+    promptSpans: PromptTokenSpan[];
+    completionReason?: CompletionFinishReason;
+    draft?: GenAttrRunDraft;
+}): GenAttrCachedRunContentFields {
+    const { initialContext, steps, promptSpans, completionReason, draft } = params;
     let reasonToStore: CompletionFinishReason | undefined;
     if (completionReason !== undefined) {
         const c = canonicalizeCompletionFinishReason(completionReason);
@@ -94,13 +131,192 @@ export async function save(
         }
         reasonToStore = c;
     }
-    const payload: GenAttrCachedRun = {
+    return {
         initialContext,
         steps,
         ...(promptSpans.length > 0 ? { promptSpans } : {}),
         ...(reasonToStore !== undefined ? { completionReason: reasonToStore } : {}),
         ...(draft !== undefined ? { draft } : {}),
     };
+}
+
+/**
+ * 仅 **Export demo** 使用：在内容字段上附加 **demoUiOptions** 全量（history 不得调用）。
+ */
+export function buildGenAttrExportedDemoPayload(
+    params: {
+        initialContext: string;
+        steps: TokenGenStep[];
+        promptSpans: PromptTokenSpan[];
+        completionReason?: CompletionFinishReason;
+        draft?: GenAttrRunDraft;
+        demoUiOptions: GenAttrDemoUiOptions;
+    }
+): GenAttrCachedRun {
+    const { demoUiOptions, ...contentParams } = params;
+    return { ...buildGenAttrCachedRunContentPayload(contentParams), demoUiOptions };
+}
+
+function isValidPromptSpansPayload(v: unknown): boolean {
+    if (!Array.isArray(v)) return false;
+    for (const item of v) {
+        if (item == null || typeof item !== 'object') return false;
+        const o = item as Record<string, unknown>;
+        const off = o.offset;
+        if (!Array.isArray(off) || off.length !== 2) return false;
+        if (typeof off[0] !== 'number' || !Number.isFinite(off[0])) return false;
+        if (typeof off[1] !== 'number' || !Number.isFinite(off[1])) return false;
+        if (typeof o.raw !== 'string') return false;
+        if (o.token_id !== undefined && (typeof o.token_id !== 'number' || !Number.isFinite(o.token_id))) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function isValidGenAttrRunDraftPayload(v: unknown): boolean {
+    if (v == null || typeof v !== 'object') return false;
+    const d = v as Record<string, unknown>;
+    if (d.mode !== 'raw' && d.mode !== 'chat') return false;
+    if (d.model !== undefined && typeof d.model !== 'string') return false;
+    if (d.maxTokens !== undefined && (typeof d.maxTokens !== 'number' || !Number.isFinite(d.maxTokens))) {
+        return false;
+    }
+    if (d.system !== undefined && typeof d.system !== 'string') return false;
+    if (d.user !== undefined && typeof d.user !== 'string') return false;
+    if (d.useSystem !== undefined && typeof d.useSystem !== 'boolean') return false;
+    if (d.teacherForcing !== undefined && typeof d.teacherForcing !== 'string') return false;
+    if (d.stopAfterTeacherForcing !== undefined && typeof d.stopAfterTeacherForcing !== 'boolean') {
+        return false;
+    }
+    return true;
+}
+
+function isDagLayoutModePayload(v: unknown): v is DagLayoutMode {
+    return v === 'text-flow' || v === 'linear-arc' || v === 'spiral';
+}
+
+function isValidDemoUiOptionsPayload(v: unknown): v is Partial<GenAttrDemoUiOptions> {
+    if (v == null || typeof v !== 'object') return false;
+    const d = v as Record<string, unknown>;
+    if (d.layoutMode !== undefined && !isDagLayoutModePayload(d.layoutMode)) return false;
+    if (d.measureWidthPx !== undefined && (typeof d.measureWidthPx !== 'number' || !Number.isFinite(d.measureWidthPx))) {
+        return false;
+    }
+    if (d.dagCompactness !== undefined && (typeof d.dagCompactness !== 'number' || !Number.isFinite(d.dagCompactness))) {
+        return false;
+    }
+    if (
+        d.linearArcAdjacentGapPx !== undefined &&
+        (typeof d.linearArcAdjacentGapPx !== 'number' || !Number.isFinite(d.linearArcAdjacentGapPx))
+    ) {
+        return false;
+    }
+    if (d.hideExcludedTokens !== undefined && typeof d.hideExcludedTokens !== 'boolean') return false;
+    if (
+        d.edgeTopPCoverage !== undefined &&
+        (typeof d.edgeTopPCoverage !== 'number' || !Number.isFinite(d.edgeTopPCoverage))
+    ) {
+        return false;
+    }
+    if (d.nodeCiVisualScaleEnabled !== undefined && typeof d.nodeCiVisualScaleEnabled !== 'boolean') {
+        return false;
+    }
+    if (d.edgeWeakenHighSurprisalEnabled !== undefined && typeof d.edgeWeakenHighSurprisalEnabled !== 'boolean') {
+        return false;
+    }
+    if (d.hideInactiveEdges !== undefined && typeof d.hideInactiveEdges !== 'boolean') return false;
+    if (d.replayPacingMode !== undefined && d.replayPacingMode !== 'total' && d.replayPacingMode !== 'step') {
+        return false;
+    }
+    if (d.playbackTotalS !== undefined && (typeof d.playbackTotalS !== 'number' || !Number.isFinite(d.playbackTotalS))) {
+        return false;
+    }
+    if (d.playbackStepMs !== undefined && (typeof d.playbackStepMs !== 'number' || !Number.isFinite(d.playbackStepMs))) {
+        return false;
+    }
+    if (
+        d.excludePromptPatternsEnabled !== undefined &&
+        typeof d.excludePromptPatternsEnabled !== 'boolean'
+    ) {
+        return false;
+    }
+    if (d.excludePromptPatternsText !== undefined && typeof d.excludePromptPatternsText !== 'string') {
+        return false;
+    }
+    if (
+        d.excludeGeneratedPatternsEnabled !== undefined &&
+        typeof d.excludeGeneratedPatternsEnabled !== 'boolean'
+    ) {
+        return false;
+    }
+    if (
+        d.excludeGeneratedPatternsText !== undefined &&
+        typeof d.excludeGeneratedPatternsText !== 'string'
+    ) {
+        return false;
+    }
+    return true;
+}
+
+/**
+ * 打包 demo JSON 与 Cached history 负载对齐：`steps` 仅要求非空数组（细粒度由运行时承担）。
+ */
+export function isValidGenAttrCachedRunPayload(v: unknown): v is GenAttrCachedRun {
+    if (v == null || typeof v !== 'object') return false;
+    const o = v as Record<string, unknown>;
+    if (typeof o.initialContext !== 'string' || !Array.isArray(o.steps) || o.steps.length === 0) {
+        return false;
+    }
+    if (o.completionReason !== undefined) {
+        if (typeof o.completionReason !== 'string' || !isKnownPersistedCompletionReason(o.completionReason)) {
+            return false;
+        }
+    }
+    if (o.promptSpans !== undefined && !isValidPromptSpansPayload(o.promptSpans)) {
+        return false;
+    }
+    if (o.draft !== undefined && !isValidGenAttrRunDraftPayload(o.draft)) {
+        return false;
+    }
+    if (o.demoUiOptions !== undefined && !isValidDemoUiOptionsPayload(o.demoUiOptions)) {
+        return false;
+    }
+    return true;
+}
+
+/**
+ * 加载 demo 与加载 IndexedDB 历史共用的入口：`unknown` → 合法则返回记录，否则打日志并返回 `undefined`。
+ */
+export function parseGenAttrCachedRunPayload(
+    raw: unknown,
+    contextForLog?: string
+): GenAttrCachedRun | undefined {
+    if (!isValidGenAttrCachedRunPayload(raw)) {
+        const suffix =
+            contextForLog !== undefined && contextForLog.length > 0 ? ` (${contextForLog})` : '';
+        console.warn(`[genAttributeRunCache] invalid GenAttrCachedRun payload${suffix}`);
+        return undefined;
+    }
+    return raw;
+}
+
+export async function save(
+    key: GenAttrCacheKey,
+    steps: TokenGenStep[],
+    promptSpans: PromptTokenSpan[],
+    status: 'partial' | 'complete' = steps.length > 0 ? 'partial' : 'complete',
+    completionReason?: CompletionFinishReason,
+    draft?: GenAttrRunDraft
+): Promise<void> {
+    const { initialContext } = key;
+    const payload = buildGenAttrCachedRunContentPayload({
+        initialContext,
+        steps,
+        promptSpans,
+        completionReason,
+        draft,
+    });
     await upsertEntry({
         namespace: NAMESPACE,
         businessKeyJson: JSON.stringify(normalizeKey(key)),
@@ -113,13 +329,15 @@ export async function save(
 
 export async function get(key: GenAttrCacheKey): Promise<GenAttrCachedRun | undefined> {
     const row = await getByContentKey<GenAttrCachedRun>(NAMESPACE, keyHash(key));
-    return row?.payload;
+    if (!row) return undefined;
+    return parseGenAttrCachedRunPayload(row.payload, 'get(GenAttrCacheKey)');
 }
 
 export async function getCachedEntryByContentKey(raw: string): Promise<GenAttrCachedRun | undefined> {
     if (!raw) return undefined;
     const row = await getByContentKey<GenAttrCachedRun>(NAMESPACE, raw);
-    return row?.payload;
+    if (!row) return undefined;
+    return parseGenAttrCachedRunPayload(row.payload, `contentKey=${raw}`);
 }
 
 export function buildCachedContentUrlParam(key: GenAttrCacheKey): string {

client/src/ts/ui/dialog.ts

@@ -579,6 +579,34 @@ export function createNamePathTextContent(
     };
 }
 
+/**
+ * 将地址栏风格的输入转为绝对 URL：缺协议时补 `https://`；`//host/path` 先去掉协议相对前缀再补全。
+ * 若无法解析则返回 null。
+ */
+function normalizeUserFetchUrl(raw: string): string | null {
+    const trimmed = raw.trim();
+    if (!trimmed) {
+        return null;
+    }
+    try {
+        new URL(trimmed);
+        return trimmed;
+    } catch {
+        if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(trimmed)) {
+            return null;
+        }
+        const rest = trimmed.replace(/^\/+/, '');
+        if (!rest) {
+            return null;
+        }
+        try {
+            return new URL(`https://${rest}`).href;
+        } catch {
+            return null;
+        }
+    }
+}
+
 /**
  * 创建 URL 输入弹窗内容（URL 输入框）
  */
@@ -596,7 +624,8 @@ export function createUrlInputContent(
             .text(label);
 
         const input = container.append('input')
-            .attr('type', 'url')
+            .attr('type', 'text')
+            .attr('inputmode', 'url')
             .attr('class', 'dialog-input')
             .attr('value', defaultValue)
             .attr('placeholder', placeholder || 'https://example.com');
@@ -626,21 +655,21 @@ export function createUrlInputContent(
         return {
             getValue: () => {
                 const inputNode = input.node() as HTMLInputElement;
-                return inputNode?.value?.trim() || '';
+                const raw = inputNode?.value?.trim() || '';
+                return normalizeUserFetchUrl(raw) ?? '';
             },
             validate: () => {
                 const inputNode = input.node() as HTMLInputElement;
-                const value = inputNode?.value?.trim() || '';
-                // 基本的 URL 验证
-                if (value.length === 0) {
+                const raw = inputNode?.value?.trim() || '';
+                if (raw.length === 0) {
+                    showAlertDialog(tr('Invalid input'), tr('Please enter a URL.'));
                     return false;
                 }
-                try {
-                    new URL(value);
+                if (normalizeUserFetchUrl(raw)) {
                     return true;
-                } catch {
-                    return false;
                 }
+                showAlertDialog(tr('Invalid URL'), tr('This does not look like a valid URL. Check for typos.'));
+                return false;
             },
             focus: () => {
                 const inputNode = input.node() as HTMLInputElement;