-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathviewer.html
More file actions
124 lines (120 loc) · 6.39 KB
/
viewer.html
File metadata and controls
124 lines (120 loc) · 6.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Branch Viewer</title>
<link rel="stylesheet" href="sidepanel.css">
<link rel="stylesheet" href="viewer.css">
</head>
<body>
<div id="app" class="cbv-viewer-app">
<header id="cbv-header">
<div class="cbv-logo">
<img class="cbv-logo-icon" src="logos/plugin-logo.png" alt="" aria-hidden="true">
<div class="cbv-viewer-title-wrap">
<span class="cbv-title">Standalone Branch Viewer</span>
<span class="cbv-viewer-subtitle">Native pinch works here</span>
</div>
<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>
<div id="cbv-progress-wrap" hidden>
<div id="cbv-progress-bar"></div>
</div>
<div id="cbv-status">
<span class="cbv-status-dot" id="cbv-dot"></span>
<span id="cbv-status-text">Waiting for page…</span>
</div>
<div id="cbv-tree">
<canvas id="cbv-minimap" width="160" height="108"></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 viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M9.4 2.2L13.8 6.6L12.3 8.1L7.9 3.7L9.4 2.2Z" fill="currentColor"/>
<path d="M7.4 4.1L9.2 5.9L8.2 6.9L6.4 5.1L7.4 4.1Z" fill="currentColor" opacity=".95"/>
<path d="M5.5 5.9L10.1 10.5L8.9 11.7L4.3 7.1L5.5 5.9Z" fill="currentColor" opacity=".92"/>
<path d="M3.2 10.9L5.9 8.2L7.8 10.1L5.1 12.8H3.2V10.9Z" fill="currentColor" opacity=".92"/>
</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 0 16 16" fill="none">
<line x1="4" y1="4" x2="12" y2="12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="12" y1="4" x2="4" y2="12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</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 0 16 16" fill="none">
<path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="5.5" y="5.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4" opacity=".5"/>
</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 0 16 16" fill="none">
<path d="M8 1.5V4.25M8 11.75V14.5M1.5 8H4.25M11.75 8H14.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<rect x="5.4" y="5.4" width="5.2" height="5.2" rx="1" fill="currentColor" opacity=".22"/>
<rect x="6.45" y="6.45" width="3.1" height="3.1" rx=".7" fill="currentColor"/>
</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 viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 5H10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M3 8H13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M3 11H10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M10.5 3.5L13 6L15.5 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Expand All</span>
</button>
</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 class="cbv-empty-title">No saved tree yet</p>
<p class="cbv-empty-sub">Build from the chat tab, or click <strong>Build</strong> here to traverse branches and load the viewer.</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="viewer.js"></script>
</body>
</html>