File size: 50,084 Bytes
494c9e4
 
 
 
 
 
 
17037b0
494c9e4
 
 
 
 
 
 
 
 
 
0c3e451
494c9e4
3c2da0a
494c9e4
 
 
5b1c2f9
494c9e4
 
 
 
 
 
 
17037b0
 
 
 
 
 
 
 
 
494c9e4
 
 
 
 
 
 
 
1f66b27
 
 
494c9e4
 
 
 
 
 
 
 
1f66b27
494c9e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1f66b27
494c9e4
c911b05
494c9e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
654165a
494c9e4
 
1f66b27
494c9e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1f66b27
 
 
28147a1
 
 
 
 
494c9e4
 
312e591
1f66b27
 
 
c911b05
 
 
 
 
 
 
312e591
c911b05
1f66b27
c911b05
 
 
 
 
 
 
 
 
 
 
312e591
c911b05
 
 
 
 
 
1f66b27
 
c911b05
 
 
 
 
 
 
 
 
494c9e4
2764e14
494c9e4
 
b925659
 
 
 
 
 
494c9e4
 
 
 
 
 
 
 
 
 
b925659
 
28147a1
b925659
 
 
 
 
1f66b27
 
 
c911b05
1f66b27
4558408
c911b05
2c1b1bd
dfb84f2
 
4558408
c911b05
312e591
c911b05
 
1f66b27
 
4558408
1f66b27
4558408
 
 
 
 
 
1f66b27
 
7cf3cea
 
 
 
 
 
 
 
 
 
1f66b27
7cf3cea
 
1f66b27
 
 
dfb84f2
 
 
 
 
1f66b27
dfb84f2
 
 
 
 
1f66b27
dfb84f2
 
 
 
 
 
1f66b27
 
c911b05
 
 
 
 
1f66b27
 
c911b05
 
 
 
1f66b27
c911b05
1f66b27
 
c911b05
 
b925659
c911b05
1f66b27
c911b05
 
1f66b27
 
 
312e591
21b5186
 
 
 
 
1f66b27
 
312e591
b925659
21b5186
b925659
21b5186
 
 
1f66b27
 
 
b925659
2c1b1bd
17037b0
2c1b1bd
 
 
 
17037b0
 
1f66b27
 
 
2c1b1bd
17037b0
 
28147a1
17037b0
 
1f66b27
 
c056ab3
 
 
 
 
 
1f66b27
 
312e591
 
 
 
 
 
 
 
 
 
1f66b27
312e591
1f66b27
312e591
 
 
 
 
 
1f66b27
 
b925659
973dfd2
b925659
 
c911b05
 
 
1f66b27
 
 
2c1b1bd
 
 
 
 
1f66b27
 
2c1b1bd
dfb84f2
2c1b1bd
 
 
 
 
654165a
1f66b27
 
654165a
f3beede
654165a
 
 
 
 
1f66b27
 
654165a
 
 
 
 
 
f3beede
654165a
 
494c9e4
1f66b27
 
494c9e4
f3beede
494c9e4
 
 
 
 
1f66b27
 
494c9e4
 
654165a
f3beede
494c9e4
 
f3beede
494c9e4
 
 
 
1f66b27
 
494c9e4
 
 
 
 
 
 
1f66b27
 
494c9e4
 
654165a
494c9e4
 
 
 
 
 
 
1f66b27
 
 
b704fe2
312e591
b704fe2
312e591
b704fe2
 
 
1f66b27
 
 
b925659
 
 
 
 
 
 
1f66b27
 
 
83b1665
 
 
 
 
f24e288
1f66b27
 
83b1665
 
 
 
 
f24e288
1f66b27
 
 
f24e288
 
 
 
 
 
1f66b27
 
f24e288
 
 
 
 
1f66b27
 
f24e288
 
 
 
1f66b27
f24e288
1f66b27
 
f24e288
 
 
 
 
1f66b27
 
f24e288
 
83b1665
f24e288
 
83b1665
 
1f66b27
 
 
b704fe2
1f66b27
c056ab3
494c9e4
b704fe2
 
53e5b08
 
 
 
042658f
53e5b08
1f66b27
53e5b08
 
 
 
c056ab3
53e5b08
1f66b27
83b1665
 
 
f24e288
83b1665
 
1f66b27
53e5b08
1f66b27
c056ab3
 
 
 
 
1f66b27
042658f
 
 
 
 
1f66b27
 
dfb84f2
 
 
 
 
 
494c9e4
 
1f66b27
 
 
042658f
 
f3beede
042658f
 
 
1f66b27
042658f
 
 
 
 
 
1f66b27
042658f
 
 
 
 
1f66b27
042658f
 
 
 
f3beede
 
 
494c9e4
 
 
 
 
 
 
 
 
 
 
 
 
 
17037b0
494c9e4
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="causal_flow.css">
</head>

<body class="gen-attribute-page">

    <main class="main_frame">
        <section class="left_panel">
            <div class="floating_content">
                <header class="app-page-toolbar app-page-toolbar--bleed">
                    <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
                    <div class="app-page-toolbar-actions">
                        <a href="index.html" class="home-link" title="Back to Info Lens" data-i18n="text,title">Back to Info Lens</a>
                        <div class="settings-menu-wrapper">
                            <!-- INCLUDE partials/settings-toolbar-controls.html -->
                            <div id="settings_menu" class="settings-menu" style="display: none;">
                                <!-- INCLUDE partials/settings-menu-common-mid.html -->
                                <!-- INCLUDE partials/settings-menu-trailing-admin.html -->
                                <!-- INCLUDE partials/settings-menu-build-info.html -->
                            </div>
                        </div>
                    </div>
                </header>

                <div class="chat-cached-history-bar chat-cached-history-bar--dual">
                    <div class="semantic-search-input-wrapper chat-prompt-history-wrapper gen-attr-cached-demos-wrap">
                        <button type="button" id="gen_attr_cached_demos_btn" class="text-action-btn" data-i18n>Cached demo</button>
                        <div class="gen-attr-cached-demos-picker">
                            <button type="button" id="gen_attr_cached_demos_value_btn" class="gen-attr-cached-demos-value-btn"
                                aria-label="Selected demo" aria-haspopup="listbox">
                                <span id="gen_attr_cached_demos_value" class="gen-attr-cached-demos-value"></span>
                                <span class="gen-attr-cached-demos-chevron" aria-hidden="true"></span>
                            </button>
                            <ul id="gen_attr_cached_demos_dropdown" class="semantic-search-history-dropdown"></ul>
                        </div>
                    </div>
                    <div class="semantic-search-input-wrapper chat-prompt-history-wrapper gen-attr-cached-history-wrap">
                        <button type="button" id="gen_attr_cached_history_btn" class="text-action-btn" data-i18n>Cached history</button>
                        <ul id="gen_attr_cached_history_dropdown" class="semantic-search-history-dropdown"></ul>
                    </div>
                </div>

                <section class="input-section">
                    <div class="options-row chat-raw-prompt-mode-row">
                        <span class="options-group">
                            <label class="options-label" for="gen_attr_skip_chat_template">
                                <input type="checkbox" id="gen_attr_skip_chat_template" />
                                <span data-i18n>Raw prompt mode</span>
                            </label>
                        </span>
                    </div>

                    <div id="gen_attr_raw_input_panel" class="chat-prompt-panel">
                        <div class="input-header">
                            <span class="options-label" data-i18n>Raw prompt</span>
                            <div class="text-action-buttons-top">
                                <div class="textarea-counter" id="gen_attr_raw_text_count_display">
                                    <span id="gen_attr_raw_text_count_value">0</span> <span data-i18n>chars</span>
                                </div>
                                <button type="button" id="gen_attr_clear_raw_btn" class="text-action-btn" data-i18n>Clear</button>
                                <button type="button" id="gen_attr_paste_raw_btn" class="text-action-btn" data-i18n>Paste</button>
                                <button type="button" id="gen_attr_raw_history_btn" class="text-action-btn" data-i18n>History</button>
                            </div>
                        </div>
                        <div class="textarea-wrapper chat-prompt-textarea-block">
                            <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
                                <textarea id="gen_attr_raw_text"></textarea>
                                <ul id="gen_attr_raw_input_history_dropdown" class="semantic-search-history-dropdown"></ul>
                            </div>
                        </div>
                    </div>

                    <div id="gen_attr_chat_input_panel" hidden>
                        <div class="chat-prompt-panel" id="gen_attr_system_prompt_panel">
                            <div class="input-header">
                                <label class="chat-use-system-label options-label" for="gen_attr_use_system_prompt">
                                    <input type="checkbox" id="gen_attr_use_system_prompt" checked />
                                    <span data-i18n>System</span>
                                </label>
                                <div class="text-action-buttons-top">
                                    <div class="textarea-counter" id="gen_attr_system_text_count_display">
                                        <span id="gen_attr_system_text_count_value">0</span> <span data-i18n>chars</span>
                                    </div>
                                    <button type="button" id="gen_attr_clear_system_btn" class="text-action-btn" data-i18n>Clear</button>
                                    <button type="button" id="gen_attr_paste_system_btn" class="text-action-btn" data-i18n>Paste</button>
                                    <button type="button" id="gen_attr_system_history_btn" class="text-action-btn" data-i18n>History</button>
                                </div>
                            </div>
                            <div class="textarea-wrapper chat-prompt-textarea-block">
                                <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
                                    <textarea id="gen_attr_system_text">You are a helpful assistant.</textarea>
                                    <ul id="gen_attr_system_prompt_history_dropdown" class="semantic-search-history-dropdown"></ul>
                                </div>
                            </div>
                        </div>
                        <div id="tool_calling_options_mount"></div>
                        <div class="chat-prompt-panel">
                            <div class="input-header">
                                <span class="options-label" data-i18n>User</span>
                                <div class="text-action-buttons-top">
                                    <div class="textarea-counter" id="gen_attr_user_text_count_display">
                                        <span id="gen_attr_user_text_count_value">0</span> <span data-i18n>chars</span>
                                    </div>
                                    <button type="button" id="gen_attr_clear_user_btn" class="text-action-btn" data-i18n>Clear</button>
                                    <button type="button" id="gen_attr_paste_user_btn" class="text-action-btn" data-i18n>Paste</button>
                                    <button type="button" id="gen_attr_user_history_btn" class="text-action-btn" data-i18n>History</button>
                                </div>
                            </div>
                            <div class="textarea-wrapper chat-prompt-textarea-block">
                                <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
                                    <textarea id="gen_attr_user_text"></textarea>
                                    <ul id="gen_attr_user_prompt_history_dropdown" class="semantic-search-history-dropdown"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="options-row chat-enable-thinking-row">
                            <span class="options-group">
                                <label class="options-label" for="gen_attr_enable_thinking">
                                    <input type="checkbox" id="gen_attr_enable_thinking" />
                                    <span data-i18n>Enable thinking</span>
                                </label>
                            </span>
                        </div>
                    </div>

                    <div class="teacher-forcing-row">
                        <div class="options-row teacher-forcing-toggle-row">
                            <span class="options-group">
                                <label class="options-label"
                                    title="When enabled, type the exact continuation after the assembled prompt. Each step attributes the next token toward that text (same tokenizer as Model), then stops when the continuation is consumed or EOS."
                                    data-i18n="title">
                                    <input type="checkbox" id="gen_attr_teacher_forcing_enable">
                                    <span data-i18n>Teacher forcing</span>
                                </label>
                            </span>
                        </div>
                        <div id="gen_attr_teacher_forcing_block" class="chat-prompt-panel teacher-forcing-block" hidden>
                            <div class="input-header">
                                <span class="options-label" data-i18n>Forced continuation</span>
                                <div class="text-action-buttons-top">
                                    <div class="textarea-counter" id="gen_attr_teacher_forcing_text_count_display">
                                        <span id="gen_attr_teacher_forcing_text_count_value">0</span> <span data-i18n>chars</span>
                                    </div>
                                    <button type="button" id="gen_attr_clear_teacher_forcing_btn" class="text-action-btn" data-i18n>Clear</button>
                                    <button type="button" id="gen_attr_paste_teacher_forcing_btn" class="text-action-btn" data-i18n>Paste</button>
                                    <button type="button" id="gen_attr_teacher_forcing_history_btn" class="text-action-btn" data-i18n>History</button>
                                </div>
                            </div>
                            <div class="textarea-wrapper chat-prompt-textarea-block">
                                <div class="semantic-search-input-wrapper chat-prompt-history-wrapper">
                                    <textarea id="gen_attr_teacher_forcing_text" class="teacher-forcing-text"
                                        spellcheck="false" autocomplete="off"
                                        title="Expected generated text after the full prompt. Each API step uses the first token of what remains here as the attribution target."
                                        data-i18n="title"></textarea>
                                    <ul id="gen_attr_teacher_forcing_history_dropdown" class="semantic-search-history-dropdown"></ul>
                                </div>
                            </div>
                            <div class="options-row stop-after-tf-row">
                                <label class="options-label"
                                    title="When unchecked, generation continues with top-1 after teacher forcing tokens are exhausted, up to Max tokens."
                                    data-i18n="title">
                                    <input type="checkbox" id="gen_attr_stop_after_teacher_forcing">
                                    <span data-i18n>Stop after teacher forcing</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="textarea-wrapper chat-prompt-actions-row">
                        <!-- INCLUDE partials/completion-options-row.html -->
                        <div class="button-group">
                            <div class="button-left">
                                <div class="button-left-primary">
                                    <button type="button" id="gen_attr_submit_btn" class="primary-btn inactive" disabled>Start</button>
                                    <div class="generation-status-slot loader-small-container">
                                        <div class="loadersmall"></div>
                                        <span id="gen_attr_complete_reason" class="generation-end-reason"></span>
                                    </div>
                                </div>
                            </div>
                            <div id="gen_attr_text_metrics" class="text-metrics text-metrics-chat">
                                <div id="gen_attr_metric_usage" class="text-metrics-secondary"></div>
                                <div id="gen_attr_metric_model" class="text-metrics-secondary">model: </div>
                            </div>
                            <button type="button" id="gen_attr_export_demo_btn" class="primary-btn" style="display: none" title="Admin: download current run as JSON for bundled demos">Export demo</button>
                        </div>
                    </div>

                    <div class="gen-attr-reset-ui-options-row">
                        <button type="button" id="gen_attr_reset_ui_options_btn" class="text-action-btn"
                            title="Restore DAG options, play speed, exclusions, etc. to defaults and clear saved preferences for those controls."
                            data-i18n="text,title">
                            Reset UI options
                        </button>
                    </div>

                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group options-group--emphasis">
                            <label class="options-label" for="gen_attr_dag_layout_mode">DAG layout</label>
                            <select id="gen_attr_dag_layout_mode"
                                class="options-select gen-attr-dag-layout-mode-select"
                                title="Choose DAG layout. 'text-flow' follows text layout geometry; 'linear-arc' uses fixed-order linear nodes with arc links; 'linear-arc-step-down' is like linear-arc but drops each successive token vertically by CI (baseline = unscaled node height); 'spiral' lays nodes on an Archimedean spiral (for fun); 'matrix' shows a heatmap of attribution strength (attention-matrix style); 'text+matrix' shows text and matrix side by side with linked focus (split direction is a separate control)."
                                data-i18n="title">
                                <option value="text-flow">text</option>
                                <option value="spiral">spiral (for fun)</option>
                                <option value="attribution-matrix">matrix</option>
                                <option value="text-matrix">text+matrix</option>
                                <option value="linear-arc">linear-arc</option>
                                <option value="linear-arc-step-down">step-down(beta)</option>
                            </select>
                        </span>
                        <span class="options-group" id="gen_attr_dag_text_matrix_orient_group" hidden>
                            <label class="options-label" for="gen_attr_dag_text_matrix_orient">Split</label>
                            <select id="gen_attr_dag_text_matrix_orient"
                                class="options-select gen-attr-dag-layout-mode-select"
                                title="text+matrix split direction: left-right or top-bottom. Saved locally."
                                data-i18n="title">
                                <option value="horizontal">left-right</option>
                                <option value="vertical">top-bottom</option>
                            </select>
                        </span>
                        <span class="options-group" id="gen_attr_dag_layout_transition_group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_layout_transition"
                                    title="When checked, animate DAG layout switches. Duration is in seconds. Saved locally."
                                    data-i18n="title"
                                    checked>
                                <span data-i18n>Transition</span>
                            </label>
                            <input type="number" id="gen_attr_dag_layout_transition_s" class="gen-attr-dag-measure-width-input"
                                value="1" min="0.1" max="30" step="0.1"
                                title="Seconds for layout transition animation when Transition is checked. Saved locally."
                                data-i18n="title">
                            <span class="options-label">s</span>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group" id="gen_attr_dag_matrix_transpose_group" hidden>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_matrix_transpose"
                                    title="Swap matrix row and column axes (symmetric layout). Sources stay sources; only the on-screen orientation flips. Self becomes a column when enabled."
                                    data-i18n="title">
                                Switch axis
                            </label>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_matrix_switch_horizontal_label"
                                    title="Flip which side the horizontal-axis token labels sit on. Off: top. On: bottom."
                                    data-i18n="title">
                                Flip x label
                            </label>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_matrix_switch_vertical_label"
                                    title="Flip which side the vertical-axis token labels sit on. Off: left. On: right."
                                    data-i18n="title">
                                Flip y label
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_compactness_group">
                            <label class="options-label" for="gen_attr_dag_compactness" data-i18n>Compactness</label>
                            <input type="number" id="gen_attr_dag_compactness" class="gen-attr-dag-measure-width-input"
                                value="0.5" min="0.05" max="1" step="0.05"
                                title="Scales DAG node boxes and labels relative to the measurement layer; 1 matches full readout scale. Applies in text-flow and spiral layouts. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
                                data-i18n="title">
                        </span>
                        <span class="options-group" id="gen_attr_dag_measure_width_group">
                            <label class="options-label" for="gen_attr_dag_measure_width">Text width</label>
                            <input type="number" id="gen_attr_dag_measure_width" class="gen-attr-dag-measure-width-input"
                                value="500" min="200" max="4000" step="10"
                                title="Width (px) of the invisible measurement layer used for DAG layout. Only this width affects wrapping and node positions. When idle, changes replay and fit automatically; during generation or DAG playback, the setting updates for the next run or refresh."
                                data-i18n="title">
                            <span class="options-label">px</span>
                        </span>
                        <span class="options-group" id="gen_attr_dag_linear_arc_interval_group" hidden>
                            <label class="options-label" for="gen_attr_dag_linear_arc_interval" data-i18n>Token distance</label>
                            <input type="number" id="gen_attr_dag_linear_arc_interval" class="gen-attr-dag-measure-width-input"
                                value="0" min="0" max="400" step="1"
                                title="Horizontal gap (px) between the outer left/right edges of adjacent token nodes in linear-arc / linear-arc-step-down layout only. When idle, the DAG refits; during generation or DAG playback, the value is stored and applied on the next sync."
                                data-i18n="title">
                            <span class="options-label">px</span>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row gen-attr-dag-surprisal-toggles-row options-row">
                        <span class="options-group" id="gen_attr_dag_node_ci_visual_scale_group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_node_ci_visual_scale"
                                    title="When checked, generated nodes are visually enlarged based on their conditional information (surprisal). Takes effect on next generation."
                                    data-i18n="title">
                                Enlarge high-surprisal nodes
                            </label>
                        </span>
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_decay_attribution_high_surprisal"
                                    title="When checked, recursive trace decays propagated attribution at high-surprisal generated tokens (MI discount), so surprising or teacher-forced tokens can act as sources. Unchecked: all generated tokens are transparent conduits; trace continues to prompt only."
                                    data-i18n="title">
                                Decay attribution to high-surprisal targets
                            </label>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group options-group--emphasis">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_recursive_attribution"
                                    title="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."
                                    data-i18n="title">
                                <span class="gen-attr-causal-flow-mode-label">
                                    <span class="gen-attr-causal-flow-mode-icon" aria-hidden="true"></span>
                                    <span data-i18n>Causal Flow Mode</span>
                                </span>
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_recursive_edge_animation_direction_group" hidden>
                            <label class="options-label" for="gen_attr_dag_recursive_edge_animation_direction">Direction</label>
                            <select id="gen_attr_dag_recursive_edge_animation_direction" class="options-select"
                                title="Direction for focus-chain batch animation when you press propagation play (↯) on the DAG with a focused token in Causal Flow Mode."
                                data-i18n="title">
                                <option value="forward">forward</option>
                                <option value="backward">backward</option>
                            </select>
                        </span>
                        <span class="options-group" id="gen_attr_dag_forward_slide_prompt_wrap" hidden>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_forward_slide_shared_nodes"
                                    title="When checked, forward propagation play (↯) visits prompt and other tokens that have attribution share, with dwell time scaled by weight. When unchecked, a fixed 500ms prompt preamble runs before batch playback. Saved locally; applied when you press play."
                                    data-i18n="title">
                                <span data-i18n>Slide prompt in animation</span>
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_dim_inactive_tokens_group" hidden>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_dim_inactive_tokens"
                                    title="When checked in Causal Flow Mode, generated tokens whose Attribution share (Total) from the current focus is below the threshold are further dimmed to 0.1 (on top of the usual focus dimming); their edges and propagation animation are hidden. Prompt tokens are not affected."
                                    data-i18n="title">
                                <span data-i18n>Dim inactive tokens: share &lt;</span>
                            </label>
                            <span class="gen-attr-dag-replay-value-wrap">
                                <input type="number" id="gen_attr_dag_dim_inactive_tokens_threshold" class="gen-attr-dag-measure-width-input"
                                    value="1" min="0" max="100" step="1"
                                    title="Attribution share (Total) threshold (%): generated tokens with share strictly below this percentage are inactive."
                                    data-i18n="title">
                                <span class="options-label">%</span>
                            </span>
                            <label class="options-label" id="gen_attr_dag_dim_inactive_not_in_animation_wrap" hidden>
                                <input type="checkbox" id="gen_attr_dag_dim_inactive_not_in_animation"
                                    title="When checked, inactive-token dimming is suspended while propagation animation is playing or paused; it resumes when playback ends or stops."
                                    data-i18n="title">
                                <span data-i18n>Not in animation</span>
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_show_downstream_influence_group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_show_downstream_influence"
                                    title="When checked, focus also shows outgoing edges as downstream influence (red). Direct mode: one hop. Causal Flow Mode: recursive — propagate as arrive × one-hop weight (sum at merges); display scales each source’s outs so strongest = arrive."
                                    data-i18n="title">
                                Show downstream influence
                            </label>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group options-group--emphasis">
                            <label class="options-label" for="gen_attr_dag_edge_top_p_coverage" data-i18n>Attribution top-p coverage</label>
                            <input type="number" id="gen_attr_dag_edge_top_p_coverage" class="gen-attr-dag-measure-width-input"
                                value="0.7" min="0.05" max="1" step="0.05"
                                title="Coverage is the cumulative mass share within each generation step's Top-N candidate pool (after sorting candidates into the pool and normalizing mass inside that pool). Higher values keep more incoming edges. The denominator is this pool only, not every token-attribution entry returned for the step."
                                data-i18n="title">
                        </span>
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_hide_inactive_edges"
                                    title="When checked, gray DAG edges (or gray matrix cells) not highlighted by the current focus are hidden."
                                    data-i18n="title">
                                Hide inactive edges
                            </label>
                        </span>
                    </div>
                    <div class="attribution-exclude-prompt-patterns-row">
                        <div class="options-row attribution-delete-prompt-patterns-header">
                            <span class="options-group">
                                <label class="attribution-use-mapping-label"
                                    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>
                                </label>
                            </span>
                            <span class="options-group">
                                <label class="options-label" for="gen_attr_delete_prompt_patterns" data-i18n>Delete prompt patterns</label>
                            </span>
                        </div>
                        <textarea id="gen_attr_delete_prompt_patterns" class="attribution-exclude-prompt-patterns-input" rows="1"
                            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 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="options-row attribution-exclude-prompt-patterns-header">
                            <span class="options-group">
                                <label class="attribution-use-mapping-label"
                                    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>
                                </label>
                            </span>
                            <span class="options-group">
                                <label class="options-label" for="gen_attr_exclude_prompt_patterns" data-i18n>Exclude prompt patterns</label>
                            </span>
                        </div>
                        <textarea id="gen_attr_exclude_prompt_patterns" class="attribution-exclude-prompt-patterns-input" rows="1"
                            placeholder="One regex per line (input areas only)"
                            spellcheck="false"
                            autocomplete="off"
                            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>

                    <div class="attribution-exclude-prompt-patterns-row">
                        <div class="options-row attribution-exclude-generated-patterns-header">
                            <span class="options-group">
                                <label class="attribution-use-mapping-label"
                                    title="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."
                                    data-i18n="title">
                                    <input type="checkbox" id="gen_attr_exclude_generated_patterns_enable" checked>
                                    <span></span>
                                </label>
                            </span>
                            <span class="options-group">
                                <label class="options-label" for="gen_attr_exclude_generated_patterns" data-i18n>Exclude generated patterns</label>
                            </span>
                        </div>
                        <textarea id="gen_attr_exclude_generated_patterns" class="attribution-exclude-prompt-patterns-input" rows="1"
                            placeholder="One regex per line (generated continuation only)"
                            spellcheck="false"
                            autocomplete="off"
                            title="One regex per line (global flag), matched only within the generated suffix; if a token offset lies fully inside a match, its score is treated as 0."
                            data-i18n="placeholder,title"></textarea>
                    </div>

                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_hide_excluded_tokens"
                                    title="When checked, tokens at 0.1 opacity (exclude matches and inactive tokens when Dim inactive tokens is on) are hidden from the DAG (linear-arc: also excluded from layout)."
                                    data-i18n="title">
                                <span data-i18n>Hide exclude/inactive tokens</span>
                            </label>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row gen-attr-dag-show-topk-on-selected-row">
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_show_topk_on_selected"
                                    title="When checked, selecting or hovering a token node shows token information in the results area."
                                    data-i18n="title">
                                <span data-i18n>Show token tooltip</span>
                            </label>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row gen-attr-dag-attention-cost-row">
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_simulate_attention_cost"
                                    title="When checked, step replay (▶) expands prompt and gen steps into attention scan + FFN animation. Requires step replay without Causal Flow focus. Saved locally."
                                    data-i18n="title">
                                <span data-i18n>Simulate attention</span>
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_skip_prefill_wrap" hidden>
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_skip_prefill"
                                    title="When checked, multi-token uncached prep skips per-token query rounds; scan still follows query position in context. Saved locally."
                                    data-i18n="title">
                                <span data-i18n>Skip prefill</span>
                            </label>
                        </span>
                        <span class="options-group" id="gen_attr_dag_prefill_style_wrap" hidden>
                            <label class="options-label" for="gen_attr_dag_prefill_style" data-i18n>Prefill style</label>
                            <select id="gen_attr_dag_prefill_style" class="options-select"
                                title="Plain: sequential left-to-right scan per query. Random: shuffled query batches, random attend burst highlight, persistent query outlines. Saved locally."
                                data-i18n="title">
                                <option value="plain">plain</option>
                                <option value="random" selected>random</option>
                            </select>
                        </span>
                        <span class="options-group" id="gen_attr_dag_query_burst_wrap" hidden>
                            <span class="options-label" data-i18n>Prefill burst</span>
                            <input type="number" id="gen_attr_dag_query_burst" class="gen-attr-dag-measure-width-input"
                                value="3" min="1" max="256" step="1"
                                title="Random prefill only: parallel query tokens established per attend step (ms). Saved locally."
                                data-i18n="title">
                        </span>
                        <span class="options-group" id="gen_attr_dag_ffn_ratio_wrap" hidden>
                            <span class="options-label" data-i18n>Dwell</span>
                            <input type="number" id="gen_attr_dag_ffn_ratio" class="gen-attr-dag-measure-width-input"
                                value="3" min="0" max="20" step="1"
                                title="Dwell before and after each new gen token, as a multiple of one attend step (ms). Saved locally."
                                data-i18n="title">
                            <span class="options-label" data-i18n>× attend</span>
                        </span>
                        <span class="options-group" id="gen_attr_dag_attend_burst_wrap" hidden>
                            <span class="options-label" data-i18n>Attend burst</span>
                            <input type="number" id="gen_attr_dag_attend_burst" class="gen-attr-dag-measure-width-input"
                                value="1" min="1" max="256" step="1"
                                title="Tokens scanned in parallel per attend step (plain/gen scan) and random lit count per query. Saved locally."
                                data-i18n="title">
                        </span>
                        <span class="options-group" id="gen_attr_dag_hide_arrows_wrap" hidden>
                            <label class="options-label gen-attr-dag-hide-arrows-label">
                                <input type="checkbox" id="gen_attr_dag_hide_arrows_during_attention"
                                    title="When checked, DAG edges (arrows) stay hidden for the whole step replay (▶) session while Simulate attention is enabled. Saved locally."
                                    data-i18n="title">
                                <span data-i18n>Hide arrows</span>
                            </label>
                        </span>
                    </div>
                    <div class="gen-attr-dag-measure-width-row options-row">
                        <span class="options-group gen-attr-dag-replay-speed-row options-group--emphasis">
                            <label class="options-label" for="gen_attr_dag_replay_mode" data-i18n>Play speed</label>
                            <select id="gen_attr_dag_replay_mode"
                                class="options-select gen-attr-dag-replay-mode-select"
                                title="Total duration or per-step simulated cost. DAG step replay (▶) divides evenly or uses a fixed per-token cost; propagation chain animation (↯) scales each frame by attribution weight."
                                data-i18n="title">
                                <option value="total" data-i18n>total time</option>
                                <option value="step" data-i18n>step time</option>
                            </select>
                            <span id="gen_attr_dag_replay_total_wrap" class="gen-attr-dag-replay-value-wrap">
                                <input type="number" id="gen_attr_dag_playback_total_s" class="gen-attr-dag-measure-width-input"
                                    value="7" min="1" max="3600" step="1"
                                    title="Total seconds for weighted propagation frames. Lightning effect dwell at the end is extra wall time and not included. With no focused token, DAG step replay (▶) divides evenly; in Causal Flow Mode with a focused token, propagation play (↯) runs focus-chain animation split by layer weight. Saved locally; applied when you press play."
                                    data-i18n="title">
                                <span class="options-label">s</span>
                            </span>
                            <span id="gen_attr_dag_replay_step_wrap" class="gen-attr-dag-replay-value-wrap" hidden>
                                <input type="number" id="gen_attr_dag_playback_step_ms" class="gen-attr-dag-measure-width-input"
                                    value="200" min="0" max="10000" step="10"
                                    title="Milliseconds per step. DAG step replay (▶) uses this as the 1× output-gen clock; with a focused token in Causal Flow Mode, propagation play (↯) scales each batch by layer weight. Saved locally; applied when you press play."
                                    data-i18n="title">
                                <span id="gen_attr_dag_playback_step_ms_label" class="options-label">ms</span>
                            </span>
                            <span id="gen_attr_dag_replay_attend_wrap" class="gen-attr-dag-replay-value-wrap" hidden>
                                <input type="number" id="gen_attr_dag_attend_ms" class="gen-attr-dag-measure-width-input"
                                    value="33" min="1" max="5000" step="5"
                                    title="Milliseconds per attend step when Simulate attention is checked (step time mode). Saved locally."
                                    data-i18n="title">
                                <span class="options-label" data-i18n>ms attend</span>
                            </span>
                            <label class="options-label" id="gen_attr_dag_disable_smart_step_time_wrap" hidden>
                                <input type="checkbox" id="gen_attr_dag_disable_smart_step_time"
                                    title="When checked, propagation chain animation (↯) uses a uniform interval per frame instead of scaling by attribution weight. DAG step replay (▶) is unchanged. Saved locally; applied when you press play."
                                    data-i18n="title">
                                <span data-i18n>Disable smart step time</span>
                            </label>
                            <label class="options-label gen-attr-dag-replay-auto-zoom-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 class="options-group" id="gen_attr_dag_matrix_pin_source_group" hidden>
                                <label class="options-label">
                                    <input type="checkbox" id="gen_attr_dag_matrix_pin_source"
                                        title="Matrix only: during step replay (▶), keep the source axis at the screen position it had when you pressed play (usually the finished view); other matrix content moves into place. Works with or without Auto zoom (stops if you pan or zoom). Saved locally."
                                        data-i18n="title">
                                    Pin source tokens
                                </label>
                            </span>
                        </span>
                    </div>
                    <div id="gen_attr_dag_lightning_options_row" class="gen-attr-dag-measure-width-row options-row gen-attr-dag-lightning-options-row" hidden>
                        <span class="options-group">
                            <label class="options-label">
                                <input type="checkbox" id="gen_attr_dag_lightning_effect"
                                    title="When checked, forward propagation play (↯) highlights propagation edges in peak contrast during the last-frame dwell (boundary frame × slow-mo). Extra wall time; not counted in Play speed total time. Saved locally; applied when you press play."
                                    data-i18n="title">
                                <span data-i18n>Lightning effect</span>
                            </label>
                            <span id="gen_attr_dag_lightning_threshold_wrap" class="gen-attr-dag-replay-value-wrap" hidden>
                                <span class="options-label" data-i18n>τ</span>
                                <input type="number" id="gen_attr_dag_lightning_threshold" class="gen-attr-dag-measure-width-input"
                                    value="0.35" min="0.05" max="1" step="0.05"
                                    title="Lightning linear boost denominator τ on render strength: opacity = min(1, strength / τ). Lower τ brightens more edges. Saved locally."
                                    data-i18n="title">
                            </span>
                            <span id="gen_attr_dag_lightning_slow_mo_wrap" class="gen-attr-dag-replay-value-wrap" hidden>
                                <span class="options-label" data-i18n>Lightning slow-mo x</span>
                                <input type="number" id="gen_attr_dag_lightning_slow_mo" class="gen-attr-dag-measure-width-input"
                                    value="1" min="1" max="10" step="1"
                                    title="Slows lightning dwell and animation rhythm by this factor (1–10). Saved locally; applied when you press play."
                                    data-i18n="title">
                            </span>
                            <label class="options-label" id="gen_attr_dag_lightning_sound_wrap" hidden>
                                <input type="checkbox" id="gen_attr_dag_lightning_sound"
                                    title="When checked, forward propagation play (↯) plays thunder strike and rumble with the lightning effect. Saved locally."
                                    data-i18n="title">
                                <span data-i18n>Thunder sound</span>
                            </label>
                        </span>
                    </div>
                </section>
            </div>
        </section>

        <div class="resizer" id="resizer"></div>

        <section class="right_panel">
            <div id="results" class="attribution-inspector-surface gen-attr-results-surface LMF"></div>
        </section>
    </main>

    <div id="toast" class="toast"></div>

    <script src="vendor.js"></script>
    <script src="causal_flow.js"></script>

</body>

</html>