-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsidepanel.html
More file actions
136 lines (130 loc) · 11.3 KB
/
sidepanel.html
File metadata and controls
136 lines (130 loc) · 11.3 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Branch Visualizer</title>
<link rel="stylesheet" href="sidepanel.css">
</head>
<body>
<div id="app">
<!-- ── Diagnostics Consent Banner ────────────────────────────── -->
<div id="cbv-consent-banner" class="cbv-consent-banner" hidden>
<div class="cbv-consent-body">
<p class="cbv-consent-title">Help improve compatibility</p>
<p class="cbv-consent-text">When the extension can't read a conversation, send anonymous diagnostic info (DOM structure, no chat content) to help fix bugs faster. You can change this anytime.</p>
<a class="cbv-consent-link" href="https://chat-branch-visualizer.vercel.app/privacy" target="_blank" rel="noopener">Privacy policy ↗</a>
</div>
<div class="cbv-consent-actions">
<button id="btn-consent-deny" class="cbv-btn cbv-consent-btn-deny" type="button">No thanks</button>
<button id="btn-consent-allow" class="cbv-btn cbv-btn-primary cbv-consent-btn-allow" type="button">Allow</button>
</div>
</div>
<!-- ── Header ─────────────────────────────────────────────── -->
<header id="cbv-header">
<span id="cbv-tree-summary" class="cbv-tree-summary" hidden></span>
<div class="cbv-logo">
<span id="cbv-tree-state" class="cbv-tree-state cbv-tree-state-loading">Loading...</span>
<div id="cbv-partial-banner" class="cbv-partial-banner" hidden>
<span class="cbv-partial-banner-icon">⚠️</span>
<span class="cbv-partial-banner-text">This is a partial tree</span>
</div>
</div>
<div class="cbv-actions"></div>
</header>
<!-- ── Progress ───────────────────────────────────────────── -->
<div id="cbv-progress-wrap" hidden>
<div id="cbv-progress-bar"></div>
</div>
<!-- ── Status ─────────────────────────────────────────────── -->
<div id="cbv-status">
<span class="cbv-status-dot" id="cbv-dot"></span>
<span id="cbv-status-text">Waiting for page…</span>
</div>
<!-- ── Canvas ─────────────────────────────────────────────── -->
<div id="cbv-tree">
<canvas id="cbv-minimap" width="120" height="80"></canvas>
<div id="cbv-zoom-rail" aria-label="Zoom control">
<span class="cbv-zoom-label cbv-zoom-label-top">+</span>
<input id="cbv-zoom-slider" type="range" min="0" max="100" value="50" step="1" orient="vertical" aria-label="Zoom slider">
<span class="cbv-zoom-label cbv-zoom-label-bottom">-</span>
<output id="cbv-zoom-value">100%</output>
</div>
<div class="cbv-tool-stack">
<button id="btn-build" class="cbv-tool-fab cbv-build-fab" style="--cbv-tool-expand-width: 132px;" title="Build full tree by traversing all branches">
<svg width="18" height="18" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M740-149 517-371l57-57 223 223q12 12 12 28t-12 28q-12 12-28.5 12T740-149Zm-593-28.5q0-16.5 12-28.5l261-261-107-107-2 2q-9 9-21 9t-21-9l-23-23v97q0 10-9.5 13.5T220-488L102-606q-7-7-3.5-16.5T112-632h98l-27-27q-9-9-9-21t9-21l110-110q17-17 37-23t44-6q21 0 36 5.5t32 18.5q5 5 5.5 11t-4.5 11l-95 95 27 27q9 9 9 21t-9 21l-3 3 104 104 122-122q-8-13-12.5-30t-4.5-36q0-53 38.5-91.5T711-841q8 0 14.5.5T737-838q6 3 7.5 9.5T741-817l-61 61q-5 5-5 11t5 11l53 53q5 5 11 5t11-5l59-59q5-5 13-4t11 8q2 6 2.5 12.5t.5 14.5q0 53-38.5 91.5T711-579q-18 0-31-2.5t-24-7.5L215-148q-12 12-28 11.5T159-149q-12-12-12-28.5Z"/></svg>
<span>Build Full Tree</span>
</button>
<button id="btn-cancel" class="cbv-tool-fab cbv-btn-danger cbv-build-fab" title="Cancel build" hidden>
<svg width="13" height="13" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z"/></svg>
<span>Cancel</span>
</button>
<button id="btn-fit" class="cbv-tool-fab cbv-fit-fab" style="--cbv-tool-expand-width: 72px;" title="Fit tree to view">
<svg width="13" height="13" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M820-640v-100H720q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h100q24 0 42 18t18 42v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37Zm-740 0v-100q0-24 18-42t42-18h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H140v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q80-627.25 80-640Zm740 480H720q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h100v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 24-18 42t-42 18Zm-680 0q-24 0-42-18t-18-42v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H140Zm60-180v-280q0-24.75 17.63-42.38Q235.25-680 260-680h440q24.75 0 42.38 17.62Q760-644.75 760-620v280q0 24.75-17.62 42.37Q724.75-280 700-280H260q-24.75 0-42.37-17.63Q200-315.25 200-340Zm60 0h440v-280H260v280Zm0 0v-280 280Z"/></svg>
<span>Fit</span>
</button>
<button id="btn-locate-visible" class="cbv-tool-fab cbv-locate-fab" style="--cbv-tool-expand-width: 104px;" title="Locate current visible path">
<svg width="13" height="13" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M450-72v-45q-137-14-228-105T117-450H72q-13 0-21.5-8.5T42-480q0-13 8.5-21.5T72-510h45q14-137 105-228t228-105v-45q0-13 8.5-21.5T480-918q13 0 21.5 8.5T510-888v45q137 14 228 105t105 228h45q13 0 21.5 8.5T918-480q0 13-8.5 21.5T888-450h-45q-14 137-105 228T510-117v45q0 13-8.5 21.5T480-42q-13 0-21.5-8.5T450-72Zm244.5-193.5Q784-355 784-480t-89.5-214.5Q605-784 480-784t-214.5 89.5Q176-605 176-480t89.5 214.5Q355-176 480-176t214.5-89.5Zm-321-108Q330-417 330-480t43.5-106.5Q417-630 480-630t106.5 43.5Q630-543 630-480t-43.5 106.5Q543-330 480-330t-106.5-43.5ZM544-416q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Zm-64-64Z"/></svg>
<span>Locate</span>
</button>
<button id="btn-expand-toggle" class="cbv-tool-fab cbv-expand-fab" style="--cbv-tool-expand-width: 110px;" title="Expand all chains">
<svg width="18" height="18" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="m480-208 114-114q9.13-9 22.07-9 12.93 0 21.93 9.1 9 9.11 9 22 0 12.9-9 21.9L501-141q-5 5-10.13 7-5.14 2-11 2-5.87 0-10.87-2-5-2-10-7L322-278q-9-9.13-9-22.07 0-12.93 9.1-21.93 9.11-9 22-9 12.9 0 21.9 9l114 114Zm0-540L366-634q-9.13 9-22.07 9-12.93 0-21.93-9.1-9-9.11-9-22 0-12.9 9-21.9l137-137q5-5 10.13-7 5.14-2 11-2 5.87 0 10.87 2 5 2 10 7l137 137q9 9.13 9 22.07 0 12.93-9.1 21.93-9.11 9-22 9-12.9 0-21.9-9L480-748Z"/></svg>
<span>Expand All</span>
</button>
<button id="btn-viewer" class="cbv-tool-fab cbv-viewer-fab" style="--cbv-tool-expand-width: 88px;" title="Open standalone viewer" hidden>
<svg width="13" height="13" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h249q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H180v600h600v-249q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v249q0 24-18 42t-42 18H180Zm600-617L403-360q-9 9-21 8.5t-21-9.5q-9-9-9-21t9-21l377-377H549q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h261q12.75 0 21.38 8.62Q840-822.75 840-810v261q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-188Z"/></svg>
<span>Viewer</span>
</button>
<details id="cbv-more-menu" class="cbv-menu cbv-tool-menu" hidden>
<summary class="cbv-tool-fab cbv-menu-trigger" aria-label="More actions">
<svg width="16" height="16" viewBox="0 -960 960 960" fill="none" aria-hidden="true"><path fill="currentColor" d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm0-280q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-280q-33 0-56.5-23.5T400-760q0-33 23.5-56.5T480-840q33 0 56.5 23.5T560-760q0 33-23.5 56.5T480-680Z"/></svg>
</summary>
<div class="cbv-menu-panel cbv-tool-menu-panel">
<button id="btn-diagnostics-toggle" class="cbv-btn cbv-menu-item cbv-menu-item-toggle" type="button" aria-pressed="false">
<span class="cbv-menu-item-label">Send diagnostics</span>
<span class="cbv-switch" aria-hidden="true"><span class="cbv-switch-thumb"></span></span>
</button>
<button id="btn-copy-diagnostics" class="cbv-btn cbv-menu-item" type="button" hidden>Copy Diagnostics</button>
<button id="btn-report-breakage" class="cbv-btn cbv-menu-item" type="button" hidden>Report Breakage</button>
</div>
</details>
</div>
<div id="cbv-loading" hidden>
<div class="cbv-loading-card">
<div class="cbv-loading-spinner"></div>
<div class="cbv-loading-copy">
<span id="cbv-loading-text">Updating tree…</span>
<span id="cbv-loading-subtext"></span>
</div>
</div>
</div>
<div id="cbv-tooltip" hidden></div>
<div class="cbv-empty" id="cbv-empty">
<svg class="cbv-empty-icon" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
<circle cx="8" cy="33" r="4" stroke="currentColor" stroke-width="2"/>
<circle cx="32" cy="33" r="4" stroke="currentColor" stroke-width="2"/>
<path d="M20 11v8M20 19Q20 27 8 27M20 19Q20 27 32 27"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p id="cbv-empty-title" class="cbv-empty-title">No conversation tree yet</p>
<p id="cbv-empty-sub" class="cbv-empty-sub">Open a ChatGPT or Claude chat,<br>then click <strong>Build</strong>.</p>
</div>
</div>
</div>
<div id="cbv-build-modal" class="cbv-modal-backdrop" hidden>
<div class="cbv-modal-card" role="dialog" aria-modal="true" aria-labelledby="cbv-build-modal-title">
<h2 id="cbv-build-modal-title" class="cbv-modal-title">Build full tree?</h2>
<p class="cbv-modal-copy">This will auto-visit branches to collect history. The chat window may switch branches, scroll, or briefly change state during the process.</p>
<label class="cbv-modal-check"><input id="cbv-skip-build-warning" type="checkbox"> <span>Do not ask again</span></label>
<div class="cbv-modal-actions">
<button id="btn-build-cancel" class="cbv-btn">Cancel</button>
<button id="btn-build-confirm" class="cbv-btn cbv-btn-primary">Continue</button>
</div>
</div>
</div>
<script src="platform-config.js"></script>
<script src="reporting-config.js"></script>
<script src="sidepanel.js"></script>
</body>
</html>