@echomem/mcp 1.3.2 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/city/_live.html +37 -0
- package/dist/city/_serve.mjs +45 -0
- package/dist/city/card-data.json +15 -0
- package/dist/city/city-data.json +248 -0
- package/dist/city/echo-ai-city-only.html +1862 -0
- package/dist/city/echo-ai-city-only.template.html +1254 -0
- package/dist/city/echo-extraction-plate.html +330 -0
- package/dist/city/generate-echo-city-only.mjs +112 -0
- package/dist/city/personality_stickers/bossy.png +0 -0
- package/dist/city/personality_stickers/ghosty.png +0 -0
- package/dist/city/personality_stickers/loopy.png +0 -0
- package/dist/city/personality_stickers/lusty.png +0 -0
- package/dist/city/personality_stickers/maxxy.png +0 -0
- package/dist/city/personality_stickers/tabby.png +0 -0
- package/dist/city/vendor/OrbitControls.js +1417 -0
- package/dist/city/vendor/RoundedBoxGeometry.js +155 -0
- package/dist/city/vendor/echo_general-file-21.riv +0 -0
- package/dist/city/vendor/rive.js +8139 -0
- package/dist/city/vendor/rive.wasm +0 -0
- package/dist/city/vendor/three.module.min.js +6 -0
- package/dist/forensics.js +46 -5
- package/dist/migrate.js +46 -4
- package/dist/setup-page.js +767 -266
- package/dist/setup.js +64 -4
- package/package.json +2 -2
|
@@ -0,0 +1,1862 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>I scanned your AI coding city — Echo</title>
|
|
6
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
:root{
|
|
10
|
+
--ink:#1b1c1f; --muted:#8b8d94; --line:#ececef;
|
|
11
|
+
--mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,Menlo,monospace;
|
|
12
|
+
--sans:"Avenir Next","Helvetica Neue","Segoe UI",system-ui,-apple-system,sans-serif;
|
|
13
|
+
--hand:"Caveat",cursive;
|
|
14
|
+
--blue:#2f6df0; --red:#e8473f; --amber:#f0a83f;
|
|
15
|
+
}
|
|
16
|
+
*{margin:0;padding:0;box-sizing:border-box;}
|
|
17
|
+
html,body{background:#eef0f3;}
|
|
18
|
+
body{display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;
|
|
19
|
+
font-family:var(--sans);color:var(--ink);}
|
|
20
|
+
|
|
21
|
+
/* ===== the whole shareable card ===== */
|
|
22
|
+
.share-card{position:relative;width:920px;height:1180px;background:#ffffff;border-radius:26px;
|
|
23
|
+
box-shadow:0 30px 90px rgba(20,24,40,.16);overflow:hidden;transform-origin:center center;}
|
|
24
|
+
|
|
25
|
+
/* ===== central repo visualizer (WebGL clay city) — full-bleed background ===== */
|
|
26
|
+
#repo-visualizer{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:0;}
|
|
27
|
+
#repo-visualizer:active{cursor:grabbing;}
|
|
28
|
+
|
|
29
|
+
/* overlay zones float above the visualizer (non-interactive → whole city stays draggable) */
|
|
30
|
+
.card-zone{position:absolute;z-index:5;pointer-events:none;}
|
|
31
|
+
body:not(.setup-mode) .compute-cost,
|
|
32
|
+
body:not(.setup-mode) .tool-split,
|
|
33
|
+
body:not(.setup-mode) .persona-card,
|
|
34
|
+
body:not(.setup-mode) .dirty-context,
|
|
35
|
+
body:not(.setup-mode) .counterfactual,
|
|
36
|
+
body:not(.setup-mode) .card-footer{display:none;}
|
|
37
|
+
|
|
38
|
+
/* v7 mirror-first card chrome: keep the WebGL city, replace the old poster furniture */
|
|
39
|
+
.v7-z{position:absolute;z-index:8;}
|
|
40
|
+
.v7-persona{left:56px;top:48px;width:330px;cursor:help;}
|
|
41
|
+
.v7-head{right:56px;top:48px;width:410px;text-align:right;}
|
|
42
|
+
.v7-eyebrow{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9aa0aa;}
|
|
43
|
+
.v7-title{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-top:8px;}
|
|
44
|
+
.v7-personaName{font-size:64px;font-weight:800;letter-spacing:-.035em;line-height:.9;margin-top:8px;text-transform:lowercase;}
|
|
45
|
+
.v7-rank{margin-top:12px;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8d929c;}
|
|
46
|
+
.v7-combo{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
|
|
47
|
+
.v7-combo .ct{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#3a3c43;border:1px solid var(--line);
|
|
48
|
+
border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.82);}
|
|
49
|
+
.v7-personaHover{position:absolute;left:0;top:calc(100% + 12px);width:360px;background:rgba(255,255,255,.98);
|
|
50
|
+
border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:0 18px 46px rgba(20,24,40,.18);
|
|
51
|
+
opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease;
|
|
52
|
+
pointer-events:none;z-index:32;}
|
|
53
|
+
.v7-persona:hover .v7-personaHover,
|
|
54
|
+
.v7-persona:focus-within .v7-personaHover{opacity:1;visibility:visible;transform:none;}
|
|
55
|
+
.v7-personaHover .ph-line{font-size:13.5px;line-height:1.5;color:#42444b;margin-bottom:9px;}
|
|
56
|
+
.v7-personaHover .ph-line:last-of-type{margin-bottom:0;}
|
|
57
|
+
.v7-personaHover .ph-line b{color:var(--ink);font-weight:800;}
|
|
58
|
+
.v7-personaHover .ph-meta{font-size:12px;line-height:1.45;color:#73767e;margin-top:9px;
|
|
59
|
+
padding-top:9px;border-top:1px solid var(--line);}
|
|
60
|
+
.v7-personaHover .ph-meta b{color:var(--blue);font-weight:700;}
|
|
61
|
+
.v7-statline{margin-top:16px;display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;}
|
|
62
|
+
.v7-stat .v{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1;}
|
|
63
|
+
.v7-stat .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9296a0;margin-top:4px;}
|
|
64
|
+
.v7-band{left:90px;right:90px;bottom:250px;text-align:center;}
|
|
65
|
+
.v7-band .eyebrow{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#a4a7af;}
|
|
66
|
+
.v7-band .bignum{font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:.9;margin-top:10px;color:var(--red);
|
|
67
|
+
min-height:64px;transition:opacity .52s ease,transform .52s ease;}
|
|
68
|
+
.v7-band .bignum.is-swapping,.v7-band .say.is-swapping{opacity:0;transform:translateY(6px);}
|
|
69
|
+
#v7-metric-value{font-size:64px;font-weight:800;color:var(--red);letter-spacing:-.03em;}
|
|
70
|
+
#v7-metric-label{font-size:27px;font-weight:700;margin-left:12px;color:var(--ink);letter-spacing:-.01em;}
|
|
71
|
+
.v7-infoBtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:10px;
|
|
72
|
+
border:1px solid #f3cfcc;border-radius:50%;background:rgba(255,255,255,.96);color:#b03a33;
|
|
73
|
+
font-family:var(--mono);font-size:15px;font-weight:800;line-height:1;vertical-align:middle;cursor:pointer;
|
|
74
|
+
box-shadow:0 8px 22px rgba(176,58,51,.10);transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
|
|
75
|
+
.v7-infoBtn:hover,.v7-infoBtn:focus-visible{background:#fff;box-shadow:0 10px 26px rgba(176,58,51,.18);transform:translateY(-1px);outline:none;}
|
|
76
|
+
.v7-band .say{font-size:18px;color:#46484f;margin:15px auto 0;line-height:1.55;max-width:680px;
|
|
77
|
+
min-height:56px;transition:opacity .52s ease,transform .52s ease;}
|
|
78
|
+
.v7-band .say b{color:var(--ink);font-weight:700;}
|
|
79
|
+
.v7-ctaWrap{left:0;right:0;bottom:112px;text-align:center;}
|
|
80
|
+
.v7-ctaWrap .pre{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9296a0;margin-bottom:15px;}
|
|
81
|
+
.v7-cta{display:inline-flex;align-items:center;gap:11px;background:#1a3a8f;color:#fff;border:0;border-radius:15px;
|
|
82
|
+
font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:21px 48px;
|
|
83
|
+
box-shadow:0 20px 46px rgba(26,58,143,.32);cursor:pointer;transition:background .18s ease,transform .18s ease;}
|
|
84
|
+
.v7-cta:hover,.v7-cta:focus-visible{background:#223f9b;transform:translateY(-2px);outline:none;}
|
|
85
|
+
.v7-ctaWrap .micro{font-size:13px;color:#8b8d94;margin-top:14px;line-height:1.5;}
|
|
86
|
+
.v7-foot{left:60px;right:60px;bottom:26px;display:flex;justify-content:space-between;
|
|
87
|
+
font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#b6b8bd;text-transform:uppercase;}
|
|
88
|
+
.v7-infoSheet{position:absolute;inset:0;z-index:60;display:none;background:rgba(20,24,40,.42);}
|
|
89
|
+
.v7-infoSheet.open{display:block;}
|
|
90
|
+
.v7-infoCard{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:28px 28px 26px 26px;
|
|
91
|
+
padding:34px 46px 40px;box-shadow:0 -26px 70px rgba(20,24,40,.26);transform:translateY(18px);
|
|
92
|
+
transition:transform .28s ease;}
|
|
93
|
+
.v7-infoSheet.open .v7-infoCard{transform:translateY(0);}
|
|
94
|
+
.v7-infoClose{position:absolute;right:30px;top:26px;width:38px;height:38px;border-radius:50%;
|
|
95
|
+
border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;color:#8d909c;cursor:pointer;}
|
|
96
|
+
.v7-infoClose:hover,.v7-infoClose:focus-visible{color:var(--ink);outline:none;}
|
|
97
|
+
.v7-infoTitle{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;}
|
|
98
|
+
.v7-infoSub{font-size:14px;color:#8b8d94;margin-bottom:22px;}
|
|
99
|
+
.v7-infoRow{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:15px 0;border-top:1px solid var(--line);}
|
|
100
|
+
.v7-infoRow .sk{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.04em;color:#1b1c1f;text-transform:uppercase;}
|
|
101
|
+
.v7-infoRow .sv{font-size:15.5px;color:#46484f;line-height:1.55;}
|
|
102
|
+
.v7-infoRow .sv b{color:var(--ink);font-weight:700;}
|
|
103
|
+
.v7-infoNote{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#9296a0;}
|
|
104
|
+
|
|
105
|
+
/* compute cost (headline $) */
|
|
106
|
+
.compute-cost{right:46px;top:42px;width:400px;text-align:right;}
|
|
107
|
+
.compute-cost .label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#a4a7af;text-transform:uppercase;}
|
|
108
|
+
.compute-cost .amount{font-size:60px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:.96;margin-top:4px;}
|
|
109
|
+
.compute-cost .detail{font-size:14px;color:#56585f;margin-top:10px;line-height:1.5;}
|
|
110
|
+
.compute-cost .detail b{color:var(--ink);}
|
|
111
|
+
|
|
112
|
+
/* tool split (Codex vs Claude chips) */
|
|
113
|
+
.tool-split{right:46px;top:212px;display:flex;gap:12px;justify-content:flex-end;}
|
|
114
|
+
.tool-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;
|
|
115
|
+
padding:10px 14px;background:#fff;box-shadow:0 6px 18px rgba(20,24,40,.05);}
|
|
116
|
+
.tool-chip svg{width:22px;height:22px;display:block;}
|
|
117
|
+
.tool-chip .pct{font-size:20px;font-weight:800;letter-spacing:-.01em;}
|
|
118
|
+
.tool-chip .name{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#80838c;text-transform:uppercase;line-height:1.3;}
|
|
119
|
+
|
|
120
|
+
/* persona card */
|
|
121
|
+
.persona-card{left:46px;top:38px;width:300px;background:#fff;border:1px solid var(--line);border-radius:20px;
|
|
122
|
+
box-shadow:0 18px 44px rgba(20,24,40,.12);padding:16px 18px 18px;}
|
|
123
|
+
/* big mascot: grows UP out of the card (negative top), bottom margin cancels the extra
|
|
124
|
+
height so the name/header below does NOT move. head can overflow the card's top edge. */
|
|
125
|
+
.persona-card .avatar-rive{width:280px;height:280px;display:block;margin:-129px 0 -63px -100px;
|
|
126
|
+
background:transparent;position:relative;z-index:6;pointer-events:none;}
|
|
127
|
+
.persona-card .name{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1;text-transform:lowercase;}
|
|
128
|
+
/* Coding Persona Card: primary handle + rank·rhythm + side chips + one funny verdict */
|
|
129
|
+
.persona-card .rankrhythm{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#9296a0;text-transform:uppercase;margin-top:8px;}
|
|
130
|
+
.persona-card .combo{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:15px;border-top:1px solid var(--line);}
|
|
131
|
+
.persona-card .ct{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#3a3c43;
|
|
132
|
+
border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:#fafafb;}
|
|
133
|
+
.persona-card .verdict{font-size:14px;color:#42444b;margin-top:13px;line-height:1.55;}
|
|
134
|
+
.persona-card .verdict b{color:var(--ink);font-weight:800;}
|
|
135
|
+
|
|
136
|
+
/* dirty-context callout — 85% dirty → ~5% with Echo */
|
|
137
|
+
.dirty-context{left:46px;top:850px;width:430px;}
|
|
138
|
+
.dirty-context .pct{font-size:58px;font-weight:800;color:var(--red);letter-spacing:-.02em;line-height:.95;
|
|
139
|
+
min-height:58px;transition:opacity .52s ease,transform .52s ease;}
|
|
140
|
+
.dirty-context .pct.is-swapping,.dirty-context .desc.is-swapping{opacity:0;transform:translateY(6px);}
|
|
141
|
+
.dirty-context .pct .word{font-size:26px;font-weight:700;margin-left:8px;}
|
|
142
|
+
.dirty-context .desc{font-size:15px;color:#42444b;margin-top:12px;line-height:1.5;max-width:380px;
|
|
143
|
+
min-height:48px;transition:opacity .52s ease,transform .52s ease;}
|
|
144
|
+
.dirty-context .desc b{color:var(--ink);}
|
|
145
|
+
|
|
146
|
+
/* counterfactual — one line: the 18-days payoff */
|
|
147
|
+
.counterfactual{left:46px;top:1026px;width:828px;display:flex;align-items:center;gap:24px;}
|
|
148
|
+
.counterfactual .cal-icon{width:62px;height:65px;display:block;flex:none;
|
|
149
|
+
filter:drop-shadow(0 4px 9px rgba(20,24,40,.14));}
|
|
150
|
+
.cf-hero{font-size:38px;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.04;}
|
|
151
|
+
.cf-hero b{color:var(--ink);font-weight:800;}
|
|
152
|
+
.cf-say{font-size:15px;color:#56585f;margin-top:8px;line-height:1.5;}
|
|
153
|
+
.cf-say b{color:var(--ink);font-weight:700;}
|
|
154
|
+
|
|
155
|
+
/* footer */
|
|
156
|
+
.card-footer{left:46px;right:46px;bottom:22px;display:flex;justify-content:space-between;
|
|
157
|
+
font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#b6b8bd;text-transform:uppercase;}
|
|
158
|
+
|
|
159
|
+
/* setup flow CTA: hidden in share-card export, visible only in ?setup=1 mode */
|
|
160
|
+
.setup-connect{display:none;position:absolute;z-index:20;right:46px;top:930px;width:238px;min-height:58px;
|
|
161
|
+
border:1px solid #1a3a8f;border-radius:12px;background:#1a3a8f;color:#fff;align-items:center;justify-content:center;
|
|
162
|
+
font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
|
|
163
|
+
box-shadow:0 16px 36px rgba(20,24,40,.18);cursor:pointer;}
|
|
164
|
+
.setup-connect:hover{background:#223f9b;}
|
|
165
|
+
body.setup-mode{background:#fff;}
|
|
166
|
+
body.setup-mode .share-card{width:100vw;height:100vh;border-radius:0;box-shadow:none;overflow:hidden;}
|
|
167
|
+
body.setup-mode .compute-cost,
|
|
168
|
+
body.setup-mode .tool-split,
|
|
169
|
+
body.setup-mode .persona-card,
|
|
170
|
+
body.setup-mode .dirty-context,
|
|
171
|
+
body.setup-mode .counterfactual,
|
|
172
|
+
body.setup-mode .setup-connect,
|
|
173
|
+
body.setup-mode .setup-header,
|
|
174
|
+
body.setup-mode .card-footer{display:none;}
|
|
175
|
+
/* bottom-left: dirty-context score */
|
|
176
|
+
body.setup-mode .dirty-context{left:clamp(28px,5vw,72px);top:auto;bottom:clamp(30px,6vh,64px);width:min(440px,42vw);}
|
|
177
|
+
body.setup-mode .dirty-context .pct{font-size:clamp(64px,8vw,116px);line-height:.82;}
|
|
178
|
+
body.setup-mode .dirty-context .pct .word{font-size:clamp(26px,3.4vw,46px);}
|
|
179
|
+
body.setup-mode .dirty-context .desc{font-size:clamp(13px,1.1vw,16px);max-width:min(420px,42vw);}
|
|
180
|
+
/* bottom-right: the "Echo saves you X days" payoff stacked directly above the Connect Echo CTA */
|
|
181
|
+
body.setup-mode .setup-connect{display:flex;left:auto;right:clamp(28px,5vw,64px);top:auto;bottom:clamp(30px,5vh,56px);}
|
|
182
|
+
body.setup-mode .counterfactual{left:auto;right:clamp(28px,5vw,64px);top:auto;
|
|
183
|
+
bottom:calc(clamp(30px,5vh,56px) + 78px);width:min(440px,46vw);justify-content:flex-end;gap:16px;}
|
|
184
|
+
body.setup-mode .counterfactual .cf-body{text-align:right;}
|
|
185
|
+
body.setup-mode .counterfactual .cal-icon{width:54px;height:56px;}
|
|
186
|
+
body.setup-mode .cf-hero{font-size:clamp(26px,2.5vw,36px);}
|
|
187
|
+
body.setup-mode .cf-say{font-size:clamp(13px,1vw,15px);}
|
|
188
|
+
.setup-header{display:none;}
|
|
189
|
+
body.setup-mode .setup-header{position:absolute;z-index:18;left:clamp(34px,5vw,86px);right:clamp(34px,5vw,86px);
|
|
190
|
+
top:clamp(26px,4.8vh,58px);display:flex;align-items:flex-start;justify-content:space-between;gap:28px;pointer-events:none;}
|
|
191
|
+
.setup-eyebrow{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa0aa;}
|
|
192
|
+
.setup-persona-name{margin-top:8px;font-size:clamp(42px,5.8vw,86px);font-weight:800;letter-spacing:-.02em;line-height:.88;color:var(--ink);}
|
|
193
|
+
.setup-rank{margin-top:11px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8d929c;}
|
|
194
|
+
.setup-combo{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px;}
|
|
195
|
+
.setup-combo .ct{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#3a3c43;border:1px solid var(--line);
|
|
196
|
+
border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.82);}
|
|
197
|
+
.setup-stats{text-align:right;max-width:430px;}
|
|
198
|
+
.setup-stats .amount{margin-top:7px;font-size:clamp(46px,5.2vw,78px);font-weight:800;letter-spacing:-.02em;line-height:.9;color:var(--ink);}
|
|
199
|
+
.setup-stats .detail{margin-top:10px;font-size:15px;color:#56585f;}
|
|
200
|
+
.setup-split{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
|
|
201
|
+
.setup-split span{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.82);padding:8px 11px;
|
|
202
|
+
font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#646a74;}
|
|
203
|
+
/* persona hover: derived coding-personality card revealed on hover/focus of the top-left persona */
|
|
204
|
+
body.setup-mode .setup-persona{pointer-events:auto;position:relative;cursor:help;}
|
|
205
|
+
body.setup-mode .persona-cue{margin-top:11px;font-family:var(--mono);font-size:10px;font-weight:700;
|
|
206
|
+
letter-spacing:.12em;text-transform:uppercase;color:#b0b4bd;}
|
|
207
|
+
body.setup-mode .persona-cue::after{content:" \2193";}
|
|
208
|
+
body.setup-mode .persona-hover{position:absolute;left:0;top:calc(100% + 10px);width:min(380px,80vw);
|
|
209
|
+
background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:16px;padding:15px 17px;
|
|
210
|
+
box-shadow:0 18px 46px rgba(20,24,40,.18);opacity:0;visibility:hidden;transform:translateY(-4px);
|
|
211
|
+
transition:opacity .14s ease,transform .14s ease;z-index:30;pointer-events:none;}
|
|
212
|
+
body.setup-mode .setup-persona:hover .persona-hover,
|
|
213
|
+
body.setup-mode .setup-persona:focus-within .persona-hover{opacity:1;visibility:visible;transform:none;}
|
|
214
|
+
body.setup-mode .persona-hover .ph-line{font-size:13.5px;line-height:1.5;color:#42444b;margin-bottom:9px;}
|
|
215
|
+
body.setup-mode .persona-hover .ph-line:last-of-type{margin-bottom:0;}
|
|
216
|
+
body.setup-mode .persona-hover .ph-line b{color:var(--ink);font-weight:800;}
|
|
217
|
+
body.setup-mode .persona-hover .ph-meta{font-size:12px;line-height:1.45;color:#73767e;margin-top:9px;
|
|
218
|
+
padding-top:9px;border-top:1px solid var(--line);}
|
|
219
|
+
body.setup-mode .persona-hover .ph-meta b{color:var(--blue);font-weight:700;}
|
|
220
|
+
/* short viewports (e.g. 1366×768 laptops): shrink the headline numbers so nothing crowds the edges */
|
|
221
|
+
@media (max-height:760px){
|
|
222
|
+
body.setup-mode .setup-persona-name{font-size:clamp(34px,7vh,60px);}
|
|
223
|
+
body.setup-mode .setup-stats .amount{font-size:clamp(38px,7vh,60px);}
|
|
224
|
+
body.setup-mode .dirty-context .pct{font-size:clamp(52px,11vh,92px);}
|
|
225
|
+
body.setup-mode .counterfactual{bottom:calc(clamp(24px,4vh,48px) + 70px);}
|
|
226
|
+
body.setup-mode .setup-connect{bottom:clamp(24px,4vh,48px);}
|
|
227
|
+
}
|
|
228
|
+
body.setup-mode .setup-header,
|
|
229
|
+
body.setup-mode .dirty-context,
|
|
230
|
+
body.setup-mode .counterfactual,
|
|
231
|
+
body.setup-mode .setup-connect{display:none;}
|
|
232
|
+
body.setup-mode .v7-persona{left:clamp(48px,5vw,86px);top:clamp(42px,5vh,72px);width:min(360px,32vw);}
|
|
233
|
+
body.setup-mode .v7-personaName{font-size:clamp(54px,5.3vw,86px);}
|
|
234
|
+
body.setup-mode .v7-head{right:clamp(48px,5vw,86px);top:clamp(42px,5vh,72px);width:min(520px,38vw);}
|
|
235
|
+
body.setup-mode .v7-head .v7-eyebrow{font-size:clamp(10px,.72vw,12px);}
|
|
236
|
+
body.setup-mode .v7-title{font-size:clamp(28px,2.1vw,40px);}
|
|
237
|
+
body.setup-mode .v7-statline{gap:clamp(16px,1.55vw,26px);}
|
|
238
|
+
body.setup-mode .v7-stat .v{font-size:clamp(20px,1.45vw,28px);}
|
|
239
|
+
body.setup-mode .v7-stat .k{font-size:clamp(9px,.72vw,11px);}
|
|
240
|
+
body.setup-mode .v7-band{left:clamp(48px,5vw,86px);right:auto;bottom:clamp(82px,8vh,130px);
|
|
241
|
+
width:min(570px,38vw);text-align:left;}
|
|
242
|
+
body.setup-mode .v7-band .eyebrow{display:none;}
|
|
243
|
+
body.setup-mode .v7-band .bignum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
|
|
244
|
+
margin-top:0;min-height:0;line-height:.96;}
|
|
245
|
+
body.setup-mode #v7-metric-value{font-size:clamp(38px,4vw,62px);}
|
|
246
|
+
body.setup-mode #v7-metric-label{font-size:clamp(17px,1.45vw,24px);margin-left:0;}
|
|
247
|
+
body.setup-mode .v7-infoBtn{width:30px;height:30px;margin-left:0;flex:none;}
|
|
248
|
+
body.setup-mode .v7-band .say{margin:14px 0 0;max-width:520px;font-size:clamp(15px,1.05vw,18px);
|
|
249
|
+
min-height:58px;}
|
|
250
|
+
body.setup-mode .v7-ctaWrap{left:auto;right:clamp(48px,5vw,86px);bottom:clamp(86px,8vh,132px);
|
|
251
|
+
width:min(430px,31vw);text-align:right;}
|
|
252
|
+
body.setup-mode .v7-cta{padding:20px 48px;font-size:clamp(14px,1.1vw,17px);}
|
|
253
|
+
body.setup-mode .v7-ctaWrap .micro{max-width:430px;margin-left:auto;}
|
|
254
|
+
body.setup-mode .v7-foot{left:clamp(48px,5vw,86px);right:clamp(48px,5vw,86px);}
|
|
255
|
+
@media (max-height:820px){
|
|
256
|
+
body.setup-mode .v7-personaName{font-size:clamp(44px,6vh,62px);}
|
|
257
|
+
body.setup-mode .v7-title{font-size:clamp(30px,5vh,44px);}
|
|
258
|
+
body.setup-mode .v7-band{bottom:58px;width:min(500px,40vw);}
|
|
259
|
+
body.setup-mode .v7-ctaWrap{bottom:58px;width:min(390px,32vw);}
|
|
260
|
+
body.setup-mode .v7-foot{display:none;}
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* ===== setup SPLIT layout: report panel capped ~620px, city takes the rest (responsive on wide screens) ===== */
|
|
264
|
+
body.setup-mode #repo-visualizer{right:auto;width:calc(100vw - min(40vw,620px));}
|
|
265
|
+
/* city metric toggle — centered over the city (clear of the corner ribbon), setup mode only */
|
|
266
|
+
.city-toggle{display:none;transition:opacity .4s ease;}
|
|
267
|
+
body.setup-mode .city-toggle{display:inline-flex;position:absolute;z-index:9;
|
|
268
|
+
left:calc((100vw - min(40vw,620px)) / 2);top:clamp(20px,3vh,36px);transform:translateX(-50%);gap:2px;
|
|
269
|
+
background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:4px;
|
|
270
|
+
box-shadow:0 8px 22px rgba(20,24,40,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
|
|
271
|
+
body.scanning .city-toggle{opacity:0;pointer-events:none;}
|
|
272
|
+
/* Flutter-debug-style two-line corner ribbon (top-left) — "local scan, private & safe" */
|
|
273
|
+
.corner-ribbon{display:none;}
|
|
274
|
+
body.setup-mode .corner-ribbon{display:block;position:absolute;top:0;left:0;width:180px;height:180px;
|
|
275
|
+
overflow:hidden;z-index:12;pointer-events:none;}
|
|
276
|
+
.corner-ribbon>span{position:absolute;left:-70px;top:51px;width:280px;transform:rotate(-45deg);
|
|
277
|
+
background:#1a3a8f;color:#fff;text-align:center;padding:7px 0;line-height:1.2;
|
|
278
|
+
box-shadow:0 6px 16px rgba(20,24,40,.18);}
|
|
279
|
+
.corner-ribbon .l1{display:block;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
|
|
280
|
+
.corner-ribbon .l2{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
|
|
281
|
+
text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:2px;}
|
|
282
|
+
/* Claude vs Codex token split — bottom-left of the city */
|
|
283
|
+
.city-split{display:none;transition:opacity .4s ease;}
|
|
284
|
+
body.setup-mode .city-split{display:block;position:absolute;z-index:9;
|
|
285
|
+
left:clamp(28px,3vw,48px);bottom:clamp(72px,9vh,104px);width:min(260px,24vw);}
|
|
286
|
+
body.scanning .city-split{opacity:0;pointer-events:none;}
|
|
287
|
+
/* timeline: first Claude/Codex session -> today, full width along the bottom of the city */
|
|
288
|
+
.city-timeline{display:none;transition:opacity .4s ease;}
|
|
289
|
+
body.setup-mode .city-timeline{display:block;position:absolute;z-index:9;
|
|
290
|
+
left:clamp(28px,3vw,48px);bottom:clamp(20px,2.6vh,32px);
|
|
291
|
+
width:calc(100vw - min(40vw,620px) - 2 * clamp(28px,3vw,48px));}
|
|
292
|
+
body.scanning .city-timeline{opacity:0;pointer-events:none;}
|
|
293
|
+
.city-timeline .tl-track{position:relative;height:16px;cursor:pointer;touch-action:none;}
|
|
294
|
+
.city-timeline .tl-line{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
|
|
295
|
+
height:2px;border-radius:2px;background:linear-gradient(90deg,#d8dbe1,#aab0bb);}
|
|
296
|
+
.city-timeline .tl-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;}
|
|
297
|
+
.city-timeline .tl-dot.start{left:0;background:#9aa0aa;}
|
|
298
|
+
.city-timeline .tl-dot.end{left:100%;background:#1a3a8f;}
|
|
299
|
+
.city-timeline .tl-dot.end::after{content:'';position:absolute;inset:-4px;border-radius:50%;
|
|
300
|
+
border:2px solid rgba(26,58,143,.4);animation:tlPulse 2.2s ease-out infinite;}
|
|
301
|
+
@keyframes tlPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.85);opacity:0}}
|
|
302
|
+
.city-timeline .tl-handle{position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);
|
|
303
|
+
width:16px;height:16px;border-radius:50%;background:#1a3a8f;border:3px solid #fff;
|
|
304
|
+
box-shadow:0 3px 10px rgba(20,24,40,.28);cursor:grab;z-index:3;}
|
|
305
|
+
.city-timeline .tl-handle:active,.city-timeline.dragging .tl-handle{cursor:grabbing;}
|
|
306
|
+
.city-timeline .tl-bubble{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
|
|
307
|
+
white-space:nowrap;background:#1b1c1f;color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;
|
|
308
|
+
letter-spacing:.04em;padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .15s ease;pointer-events:none;
|
|
309
|
+
box-shadow:0 6px 16px rgba(20,24,40,.24);}
|
|
310
|
+
.city-timeline.dragging .tl-bubble{opacity:1;}
|
|
311
|
+
.city-timeline .tl-labels{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;
|
|
312
|
+
font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#80838c;}
|
|
313
|
+
.city-timeline .tl-labels .tl-span{color:#1b1c1f;font-weight:800;}
|
|
314
|
+
.city-split .cs-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#eceef2;
|
|
315
|
+
box-shadow:inset 0 0 0 1px rgba(20,24,40,.05);}
|
|
316
|
+
.city-split .cs-bar i{height:100%;display:block;transition:width .4s cubic-bezier(.4,0,.2,1);}
|
|
317
|
+
.city-split .cs-claude{background:#d97757;}
|
|
318
|
+
.city-split .cs-codex{background:#10a37f;}
|
|
319
|
+
.city-split .cs-legend{display:flex;justify-content:space-between;margin-top:9px;
|
|
320
|
+
font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#80838c;}
|
|
321
|
+
.city-split .cs-l{display:flex;align-items:center;gap:6px;}
|
|
322
|
+
.city-split .cs-l i{width:8px;height:8px;border-radius:50%;}
|
|
323
|
+
.city-split .cs-l.claude i{background:#d97757;}
|
|
324
|
+
.city-split .cs-l.codex i{background:#10a37f;}
|
|
325
|
+
.city-split .cs-l b{color:#1b1c1f;font-weight:800;margin-left:2px;}
|
|
326
|
+
.ct-thumb{position:absolute;left:0;top:0;z-index:0;background:#1a3a8f;border-radius:999px;
|
|
327
|
+
transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),height .32s ease;}
|
|
328
|
+
.city-toggle button{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
|
|
329
|
+
font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
|
|
330
|
+
color:#80838c;padding:7px 14px;border-radius:999px;transition:color .25s ease;}
|
|
331
|
+
.city-toggle button.on{color:#fff;}
|
|
332
|
+
.city-toggle button:not(.on):hover{color:#1b1c1f;}
|
|
333
|
+
/* the old four-corner chrome is replaced by the right-hand field report */
|
|
334
|
+
body.setup-mode .v7-persona,
|
|
335
|
+
body.setup-mode .v7-head,
|
|
336
|
+
body.setup-mode .v7-band,
|
|
337
|
+
body.setup-mode .v7-ctaWrap{display:none;}
|
|
338
|
+
/* old footer reassurances are replaced by the top-left corner ribbon */
|
|
339
|
+
body.setup-mode .v7-foot{display:none;}
|
|
340
|
+
|
|
341
|
+
.fr-panel{display:none;transition:opacity .6s ease;}
|
|
342
|
+
body.setup-mode .fr-panel{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:8;
|
|
343
|
+
right:0;top:0;width:min(40vw,620px);height:100vh;border-left:1px solid var(--line);background:#fff;
|
|
344
|
+
padding:clamp(44px,6vh,90px) clamp(36px,3.2vw,60px);}
|
|
345
|
+
body.scanning .fr-panel{opacity:0;pointer-events:none;}
|
|
346
|
+
/* centered content column that fills the column height and distributes the beats top -> bottom */
|
|
347
|
+
.fr{width:min(54ch,100%);flex:1;display:flex;flex-direction:column;justify-content:space-between;
|
|
348
|
+
gap:clamp(22px,3.4vh,46px);}
|
|
349
|
+
.fr-dateline{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
|
|
350
|
+
font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9aa0aa;}
|
|
351
|
+
.fr-dateline .fr-no{color:var(--ink);font-weight:800;}
|
|
352
|
+
.fr-dateline .fr-rule{flex:1;height:1px;background:var(--line);}
|
|
353
|
+
.fr-intro{display:flex;flex-direction:column;position:relative;
|
|
354
|
+
padding-bottom:clamp(20px,3vh,38px);border-bottom:1px solid var(--line);}
|
|
355
|
+
.fr-avatar{width:clamp(92px,9.5vw,128px);height:auto;display:block;margin-bottom:10px;}
|
|
356
|
+
.fr-greet{font-size:clamp(34px,3.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:.95;
|
|
357
|
+
text-transform:lowercase;}
|
|
358
|
+
.fr-greet .fr-name{color:#1a3a8f;}
|
|
359
|
+
.fr-greet .fr-dot{color:var(--amber);}
|
|
360
|
+
.fr-rank{margin-top:13px;font-family:var(--mono);font-size:clamp(12px,1vw,14px);font-weight:600;
|
|
361
|
+
letter-spacing:.04em;color:#9296a0;}
|
|
362
|
+
.fr-rank b{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#3a3c43;}
|
|
363
|
+
/* persona breakdown: small "?" pinned top-right, click to reveal the rest of the read */
|
|
364
|
+
.fr-readBtn{position:absolute;z-index:9;top:clamp(2px,0.5vw,8px);right:0;
|
|
365
|
+
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
|
|
366
|
+
cursor:pointer;font-family:var(--mono);font-size:14px;font-weight:800;line-height:1;
|
|
367
|
+
color:#5a5e66;background:#fafafb;border:1px solid var(--line);border-radius:50%;
|
|
368
|
+
transition:background .15s ease,border-color .15s ease,color .15s ease;}
|
|
369
|
+
.fr-readBtn:hover,.fr-readBtn:focus-visible{background:#fff;border-color:#d7dade;color:var(--ink);outline:none;}
|
|
370
|
+
.fr-readBtn[aria-expanded="true"]{background:#1a3a8f;border-color:#1a3a8f;color:#fff;}
|
|
371
|
+
.fr-personaHover{position:absolute;z-index:32;top:clamp(42px,4.6vw,56px);right:0;
|
|
372
|
+
width:min(340px,100%);max-height:min(72vh,540px);overflow:auto;
|
|
373
|
+
background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:16px;padding:15px 17px;
|
|
374
|
+
box-shadow:0 18px 46px rgba(20,24,40,.18);opacity:0;visibility:hidden;transform:translateY(-4px);
|
|
375
|
+
transition:opacity .14s ease,transform .14s ease;pointer-events:none;}
|
|
376
|
+
.fr-personaHover.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
|
|
377
|
+
/* "this is you" — editorial: hairline rows, mono labels, amber highlighter (no boxes) */
|
|
378
|
+
.ph-kicker{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9aa0aa;}
|
|
379
|
+
.ph-title{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:6px;text-transform:lowercase;color:#1a3a8f;}
|
|
380
|
+
.ph-lead{font-size:13.5px;line-height:1.55;color:#42444b;margin-top:10px;}
|
|
381
|
+
.ph-row{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);}
|
|
382
|
+
.ph-row-h{display:flex;align-items:center;justify-content:space-between;
|
|
383
|
+
font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa0aa;}
|
|
384
|
+
.ph-row-v{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.05;margin-top:6px;
|
|
385
|
+
text-transform:lowercase;color:#1b1c1f;}
|
|
386
|
+
.ph-row-d{font-size:12px;line-height:1.45;color:#73767e;margin-top:4px;}
|
|
387
|
+
.ph-meter{display:inline-flex;gap:4px;align-items:center;}
|
|
388
|
+
.ph-meter i{width:6px;height:6px;border-radius:50%;background:#e0e3e8;}
|
|
389
|
+
.ph-meter i.on{background:#1a3a8f;}
|
|
390
|
+
.ph-also{margin-top:8px;display:flex;flex-wrap:wrap;gap:9px;}
|
|
391
|
+
.ph-also mark{background:linear-gradient(transparent 60%, rgba(240,168,63,.42) 60%);color:#1b1c1f;
|
|
392
|
+
font-weight:800;font-size:13.5px;padding:0 1px;text-transform:lowercase;}
|
|
393
|
+
/* "see all types" catalog inside the popover */
|
|
394
|
+
.ph-toggle{margin-top:13px;width:100%;cursor:pointer;font-family:var(--mono);font-size:10.5px;font-weight:800;
|
|
395
|
+
letter-spacing:.1em;text-transform:uppercase;color:#1a3a8f;background:#f3f5fb;border:1px solid #e1e6f3;
|
|
396
|
+
border-radius:10px;padding:9px 12px;transition:background .15s ease;}
|
|
397
|
+
.ph-toggle:hover{background:#e9edf8;}
|
|
398
|
+
/* section headers: mono label + hairline rule, matching the "you" rows */
|
|
399
|
+
.ph-cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
|
|
400
|
+
font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
|
|
401
|
+
color:#9aa0aa;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);}
|
|
402
|
+
.ph-cat-h:first-child{margin-top:0;padding-top:0;border-top:0;}
|
|
403
|
+
.ph-cat-h span{color:#bcc0c7;font-weight:700;text-transform:none;letter-spacing:0;}
|
|
404
|
+
/* indexed list: mono numbers + light labels; only YOUR picks are emphasized */
|
|
405
|
+
.ph-list{display:flex;flex-direction:column;margin-top:6px;}
|
|
406
|
+
.ph-item{display:flex;align-items:baseline;gap:11px;padding:4px 0;cursor:default;}
|
|
407
|
+
.ph-item .ph-ix{font-family:var(--mono);font-size:10px;font-weight:600;color:#cfd3d9;flex:none;width:15px;}
|
|
408
|
+
.ph-item .ph-nm{font-size:14px;font-weight:600;letter-spacing:-.005em;text-transform:lowercase;color:#a4a8af;}
|
|
409
|
+
.ph-item.is-you .ph-ix,.ph-item.is-primary .ph-ix{color:#1a3a8f;}
|
|
410
|
+
.ph-item.is-you .ph-nm{font-weight:700;color:#1b1c1f;background:linear-gradient(transparent 64%, rgba(240,168,63,.38) 64%);padding:0 1px;}
|
|
411
|
+
.ph-item.is-primary .ph-nm{font-weight:700;color:#1a3a8f;background:linear-gradient(transparent 62%, rgba(240,168,63,.44) 62%);padding:0 1px;}
|
|
412
|
+
.ph-item .ph-you-tag{margin-left:auto;align-self:center;font-family:var(--mono);font-size:9px;font-weight:700;
|
|
413
|
+
letter-spacing:.12em;text-transform:uppercase;color:#1a3a8f;}
|
|
414
|
+
/* rank PODIUM — ascending steps you climb; your rung is the tall blue bar with a YOU flag */
|
|
415
|
+
.ph-podium{display:flex;align-items:flex-end;gap:6px;margin-top:14px;}
|
|
416
|
+
.ph-pod{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:default;min-width:0;}
|
|
417
|
+
.ph-pod-you{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1a3a8f;margin-bottom:5px;}
|
|
418
|
+
.ph-pod-bar{position:relative;width:100%;border-radius:7px 7px 0 0;background:#ecedf1;transition:background .2s ease;}
|
|
419
|
+
.ph-pod-lvl{position:absolute;top:5px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9px;font-weight:700;color:#aab0bd;}
|
|
420
|
+
.ph-pod-nm{margin-top:7px;width:100%;text-align:center;font-size:8.5px;line-height:1.15;color:#a8acb4;
|
|
421
|
+
text-transform:lowercase;word-break:break-word;}
|
|
422
|
+
.ph-pod.reached .ph-pod-bar{background:#c9cfe2;}
|
|
423
|
+
.ph-pod.reached .ph-pod-lvl{color:#5a6486;}
|
|
424
|
+
.ph-pod.reached .ph-pod-nm{color:#6a7290;}
|
|
425
|
+
.ph-pod.is-you .ph-pod-bar{background:#1a3a8f;box-shadow:0 10px 20px rgba(26,58,143,.30);}
|
|
426
|
+
.ph-pod.is-you .ph-pod-lvl{color:#fff;}
|
|
427
|
+
.ph-pod.is-you .ph-pod-nm{color:#1b1c1f;font-weight:800;}
|
|
428
|
+
/* detail tooltip shown on hover of a catalog item (fixed, so the scrolling popover never clips it) */
|
|
429
|
+
/* trait/rank/rhythm detail card — sticker (traits only) + name + blurb */
|
|
430
|
+
.fr-catTip{position:fixed;z-index:60;width:288px;background:#fff;border:1px solid var(--line);border-radius:16px;
|
|
431
|
+
padding:14px 16px;box-shadow:0 22px 54px rgba(20,24,40,.22);pointer-events:none;opacity:0;transform:translateY(5px);
|
|
432
|
+
transition:opacity .14s ease,transform .14s ease;display:flex;gap:13px;align-items:flex-start;}
|
|
433
|
+
.fr-catTip.show{opacity:1;transform:none;}
|
|
434
|
+
.fr-catTip .ct-img{width:62px;height:62px;flex:none;object-fit:contain;display:none;
|
|
435
|
+
border-radius:14px;background:radial-gradient(120% 120% at 50% 30%,#f6f7f9,#eceef2);
|
|
436
|
+
filter:drop-shadow(0 8px 16px rgba(20,24,40,.14));}
|
|
437
|
+
.fr-catTip.has-img .ct-img{display:block;}
|
|
438
|
+
.fr-catTip .ct-body{min-width:0;}
|
|
439
|
+
.fr-catTip .tl{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;text-transform:lowercase;
|
|
440
|
+
color:#1a3a8f;line-height:1;margin-bottom:7px;}
|
|
441
|
+
.fr-catTip .bd{display:block;font-size:13px;line-height:1.5;color:#42444b;}
|
|
442
|
+
.fr-personaHover .ph-line{font-size:13.5px;line-height:1.5;color:#42444b;margin-bottom:9px;}
|
|
443
|
+
.fr-personaHover .ph-line:last-of-type{margin-bottom:0;}
|
|
444
|
+
.fr-personaHover .ph-line b{color:var(--ink);font-weight:800;}
|
|
445
|
+
.fr-personaHover .ph-meta{font-size:12px;line-height:1.45;color:#73767e;margin-top:9px;
|
|
446
|
+
padding-top:9px;border-top:1px solid var(--line);}
|
|
447
|
+
.fr-personaHover .ph-meta b{color:var(--blue);font-weight:700;}
|
|
448
|
+
/* lede + cost grouped into one section (so they stay together on tall screens), with a divider above */
|
|
449
|
+
.fr-mid{display:flex;flex-direction:column;gap:clamp(20px,3vh,40px);}
|
|
450
|
+
.fr-lede{font-size:clamp(16px,1.1vw,18px);line-height:1.68;color:#3c3e45;}
|
|
451
|
+
.fr-lede mark{background:linear-gradient(transparent 58%, rgba(240,168,63,.42) 58%);
|
|
452
|
+
color:var(--ink);font-weight:800;padding:0 1px;}
|
|
453
|
+
.fr-pull{padding-left:20px;border-left:3px solid var(--red);}
|
|
454
|
+
.fr-metric{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
|
|
455
|
+
transition:opacity .5s ease,transform .5s ease;}
|
|
456
|
+
.fr-metric .fr-v{font-size:clamp(32px,2.8vw,44px);font-weight:800;color:var(--red);letter-spacing:-.03em;line-height:.9;}
|
|
457
|
+
.fr-metric .fr-l{font-size:clamp(16px,1.2vw,19px);font-weight:700;color:var(--ink);letter-spacing:-.01em;}
|
|
458
|
+
/* reserve the tallest slide's height so the rotating swap never reflows the column */
|
|
459
|
+
.fr-say{font-size:clamp(14px,.9vw,15px);color:#56585f;margin-top:9px;line-height:1.5;max-width:46ch;
|
|
460
|
+
min-height:4.6em;transition:opacity .5s ease,transform .5s ease;}
|
|
461
|
+
.fr-say b{color:var(--ink);font-weight:700;}
|
|
462
|
+
.fr-metric.is-swapping,.fr-say.is-swapping{opacity:0;transform:translateY(6px);}
|
|
463
|
+
.fr-signoff{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
|
|
464
|
+
.fr-cta{display:inline-flex;align-items:center;gap:10px;background:#1a3a8f;color:#fff;border:0;
|
|
465
|
+
border-radius:13px;font-family:var(--mono);font-size:clamp(13px,1vw,15px);font-weight:800;
|
|
466
|
+
letter-spacing:.08em;text-transform:uppercase;padding:16px 34px;
|
|
467
|
+
box-shadow:0 18px 40px rgba(26,58,143,.30);cursor:pointer;transition:background .18s ease,transform .18s ease;}
|
|
468
|
+
.fr-cta:hover{background:#223f9b;transform:translateY(-2px);}
|
|
469
|
+
.fr-micro{font-size:12.5px;color:#8b8d94;line-height:1.45;max-width:24ch;}
|
|
470
|
+
|
|
471
|
+
/* ===== in-canvas scan loader (setup mode) — loading lives inside the report, matches its type ===== */
|
|
472
|
+
.scan-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
473
|
+
text-align:center;gap:14px;padding:24px;opacity:1;transition:opacity .5s ease;pointer-events:none;}
|
|
474
|
+
body:not(.scanning) .scan-loading{opacity:0;visibility:hidden;}
|
|
475
|
+
.scan-loading .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#a4a7af;}
|
|
476
|
+
.scan-loading .title{font-family:var(--sans);font-weight:800;font-size:clamp(28px,4.4vw,46px);letter-spacing:-.02em;color:var(--ink);}
|
|
477
|
+
.scan-loading .bar{width:min(360px,60vw);height:6px;border-radius:999px;background:#e2e4ea;overflow:hidden;margin-top:10px;}
|
|
478
|
+
.scan-loading .bar i{display:block;height:100%;width:36%;border-radius:999px;background:var(--blue);animation:scanIndet 1.3s ease-in-out infinite;}
|
|
479
|
+
@keyframes scanIndet{0%{transform:translateX(-115%)}100%{transform:translateX(330%)}}
|
|
480
|
+
.scan-loading .count{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#8b8d94;min-height:15px;margin-top:8px;}
|
|
481
|
+
/* during scan: hide the city + the value-bearing chrome (so demo numbers never flash), then fade in together */
|
|
482
|
+
#repo-visualizer{transition:opacity .7s ease;}
|
|
483
|
+
body.scanning #repo-visualizer{opacity:0;}
|
|
484
|
+
.setup-header,.dirty-context,.counterfactual,.setup-connect,.v7-z{transition:opacity .6s ease;}
|
|
485
|
+
body.scanning .setup-header,body.scanning .dirty-context,body.scanning .counterfactual,body.scanning .setup-connect,body.scanning .v7-z{opacity:0;pointer-events:none;}
|
|
486
|
+
body.setup-mode:not(.scanning) #repo-visualizer,
|
|
487
|
+
body.setup-mode:not(.scanning) .v7-z{opacity:1;}
|
|
488
|
+
|
|
489
|
+
/* hover-to-preview repo detail (interaction overlay, not part of the static export) */
|
|
490
|
+
#repo-detail{position:fixed;display:none;z-index:50;width:286px;background:rgba(255,255,255,.96);
|
|
491
|
+
border:1px solid rgba(197,203,214,.78);border-radius:18px;box-shadow:0 18px 46px rgba(20,24,40,.20);
|
|
492
|
+
padding:17px 18px 15px;pointer-events:none;backdrop-filter:blur(10px);}
|
|
493
|
+
#repo-detail .rd-kicker{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.18em;
|
|
494
|
+
text-transform:uppercase;color:#969aa4;margin-bottom:7px;}
|
|
495
|
+
#repo-detail .rd-name{font-family:var(--sans);font-weight:800;font-size:21px;color:var(--blue);
|
|
496
|
+
word-break:break-word;line-height:1.08;letter-spacing:-.01em;margin-bottom:14px;}
|
|
497
|
+
#repo-detail .rd-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:13px;}
|
|
498
|
+
#repo-detail .rd-label{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;
|
|
499
|
+
text-transform:uppercase;color:#9a9da6;margin-bottom:6px;}
|
|
500
|
+
#repo-detail .rd-value{font-family:var(--mono);font-size:21px;font-weight:800;letter-spacing:.01em;
|
|
501
|
+
color:#1f2024;white-space:nowrap;}
|
|
502
|
+
#repo-detail .rd-meta{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
|
|
503
|
+
color:#858994;margin:1px 0 12px;}
|
|
504
|
+
#repo-detail .rd-split{height:8px;border-radius:999px;overflow:hidden;background:#edf0f3;display:flex;
|
|
505
|
+
box-shadow:inset 0 0 0 1px rgba(20,24,40,.04);}
|
|
506
|
+
#repo-detail .rd-seg{height:100%;min-width:0;}
|
|
507
|
+
#repo-detail .rd-seg.claude{background:#d97757;} #repo-detail .rd-seg.codex{background:#10a37f;}
|
|
508
|
+
#repo-detail .rd-legend{display:flex;justify-content:space-between;gap:12px;margin-top:11px;
|
|
509
|
+
font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.02em;}
|
|
510
|
+
#repo-detail .rd-legend .claude{color:#d97757;} #repo-detail .rd-legend .codex{color:#10a37f;text-align:right;}
|
|
511
|
+
</style>
|
|
512
|
+
</head>
|
|
513
|
+
<body>
|
|
514
|
+
<script>try{const p=new URLSearchParams(location.search);if(p.get('setup')==='1'){document.body.classList.add('setup-mode');if(p.get('nonce'))document.body.classList.add('scanning');}}catch(e){}</script>
|
|
515
|
+
<div class="share-card">
|
|
516
|
+
<canvas id="repo-visualizer"></canvas>
|
|
517
|
+
|
|
518
|
+
<!-- city metric toggle (setup mode): swaps every number on the city among time / tokens / $ -->
|
|
519
|
+
<div class="city-toggle" id="city-toggle" role="group" aria-label="City metric">
|
|
520
|
+
<span class="ct-thumb" aria-hidden="true"></span>
|
|
521
|
+
<button type="button" data-metric="time" class="on">Time</button>
|
|
522
|
+
<button type="button" data-metric="tokens">Tokens</button>
|
|
523
|
+
<button type="button" data-metric="cost">API $</button>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
<!-- corner ribbon (Flutter-debug style): two-line, makes clear this is a safe local scan -->
|
|
527
|
+
<div class="corner-ribbon" aria-hidden="true"><span><span class="l1">Local Scan</span><span class="l2">100% private & safe</span></span></div>
|
|
528
|
+
|
|
529
|
+
<!-- Claude vs Codex token split (matches the cube colors: orange = Claude, green = Codex) -->
|
|
530
|
+
<div class="city-split" id="city-split">
|
|
531
|
+
<div class="cs-bar"><i class="cs-claude" style="width:74%"></i><i class="cs-codex" style="width:26%"></i></div>
|
|
532
|
+
<div class="cs-legend">
|
|
533
|
+
<span class="cs-l claude"><i></i>Claude <b>74%</b></span>
|
|
534
|
+
<span class="cs-l codex"><i></i>Codex <b>26%</b></span>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
|
|
538
|
+
<!-- timeline: drag to grow the city from the first Claude/Codex session to today -->
|
|
539
|
+
<div class="city-timeline" id="city-timeline">
|
|
540
|
+
<div class="tl-track" id="tl-track">
|
|
541
|
+
<span class="tl-line"></span>
|
|
542
|
+
<span class="tl-dot start"></span><span class="tl-dot end"></span>
|
|
543
|
+
<span class="tl-handle" id="tl-handle"><span class="tl-bubble" id="tl-bubble"></span></span>
|
|
544
|
+
</div>
|
|
545
|
+
<div class="tl-labels"><span class="tl-start">Dec 2024</span><span class="tl-span">drag to replay your build</span><span class="tl-end">Today</span></div>
|
|
546
|
+
</div>
|
|
547
|
+
|
|
548
|
+
<div class="v7-z v7-persona" tabindex="0" aria-describedby="v7-persona-hover">
|
|
549
|
+
<div class="v7-eyebrow">AI Coding City</div>
|
|
550
|
+
<div class="v7-personaName">bossy</div>
|
|
551
|
+
<div class="v7-rank">the architect · marathoner</div>
|
|
552
|
+
<div class="v7-combo"><span class="ct">loopy</span><span class="ct">tabby</span><span class="ct">maxxy</span></div>
|
|
553
|
+
<div class="v7-personaHover" id="v7-persona-hover" role="tooltip"></div>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="v7-z v7-head">
|
|
556
|
+
<div class="v7-eyebrow">Echo scanned your AI coding city</div>
|
|
557
|
+
<div class="v7-title">Here's what you built.</div>
|
|
558
|
+
<div class="v7-statline">
|
|
559
|
+
<div class="v7-stat"><div class="v" id="v7-repo-count">13</div><div class="k">repos</div></div>
|
|
560
|
+
<div class="v7-stat"><div class="v" id="v7-attention">191.1h</div><div class="k">attention</div></div>
|
|
561
|
+
<div class="v7-stat"><div class="v" id="v7-cost">$13,689</div><div class="k">API-equiv</div></div>
|
|
562
|
+
<div class="v7-stat"><div class="v" id="v7-total-tokens">7.49B</div><div class="k">tokens</div></div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="v7-z v7-band">
|
|
566
|
+
<div class="eyebrow">What we found</div>
|
|
567
|
+
<div class="bignum" id="v7-metric"><span id="v7-metric-value">85.0%</span><span id="v7-metric-label">repeated reads</span><button class="v7-infoBtn" id="v7-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
|
|
568
|
+
<div class="say" id="v7-metric-say">Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city.</div>
|
|
569
|
+
</div>
|
|
570
|
+
<div class="v7-z v7-ctaWrap">
|
|
571
|
+
<div class="pre">Ready when you are</div>
|
|
572
|
+
<button class="v7-cta" id="v7-connect" type="button">Connect Echo →</button>
|
|
573
|
+
<div class="micro">Clears the dirty context, so agents stop relearning your workspace.</div>
|
|
574
|
+
</div>
|
|
575
|
+
<div class="v7-z v7-foot"><span>Generated by Echo · No transcripts shown</span><span>Local scan · Share-safe city mode</span></div>
|
|
576
|
+
|
|
577
|
+
<!-- setup-mode field report (right half) — the narrative beside the city -->
|
|
578
|
+
<div class="fr-panel">
|
|
579
|
+
<div class="fr">
|
|
580
|
+
<div class="fr-dateline"><span>Echo field report</span><span class="fr-rule"></span></div>
|
|
581
|
+
<div class="fr-intro">
|
|
582
|
+
<button class="fr-readBtn" id="fr-read-btn" type="button" aria-expanded="false" aria-controls="fr-persona-hover" aria-label="Your full coding-personality read">?</button>
|
|
583
|
+
<div class="fr-personaHover" id="fr-persona-hover" role="region" aria-label="Your full coding-personality read"></div>
|
|
584
|
+
<img class="fr-avatar" id="fr-avatar" src="./personality_stickers/bossy.png" alt="" />
|
|
585
|
+
<h1 class="fr-greet">hey, <span class="fr-name" id="fr-name">bossy</span><span class="fr-dot">.</span></h1>
|
|
586
|
+
<div class="fr-rank" id="fr-rank">You are <b>the architect</b> on <b>the streak</b></div>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="fr-mid">
|
|
589
|
+
<p class="fr-lede">Across <mark id="fr-repos">13 repos</mark> you poured in <mark id="fr-hours">191.1 hours</mark> and <mark id="fr-tokens">7.49B tokens</mark> — about <mark id="fr-cost">$13,689</mark> of API-equivalent compute. That whole skyline on the left? You built it.</p>
|
|
590
|
+
<div class="fr-pull">
|
|
591
|
+
<div class="fr-metric" id="fr-metric"><span class="fr-v" id="fr-metric-value">85.0%</span><span class="fr-l" id="fr-metric-label">repeated reads</span></div>
|
|
592
|
+
<div class="fr-say" id="fr-metric-say">Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot.</div>
|
|
593
|
+
</div>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="fr-signoff">
|
|
596
|
+
<button class="fr-cta" id="fr-connect" type="button">Connect Echo →</button>
|
|
597
|
+
<div class="fr-micro">Clears the dirty context, so agents stop relearning your workspace.</div>
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
<div class="v7-infoSheet" id="v7-info-sheet" aria-hidden="true">
|
|
602
|
+
<div class="v7-infoCard" role="dialog" aria-modal="true" aria-labelledby="v7-info-title">
|
|
603
|
+
<button class="v7-infoClose" id="v7-info-close" type="button" aria-label="Close">×</button>
|
|
604
|
+
<div class="v7-infoTitle" id="v7-info-title">How we read your city</div>
|
|
605
|
+
<div class="v7-infoSub">Every number comes from your local Codex + Claude Code logs. Nothing here is an estimate of you — it's a readout of the tools.</div>
|
|
606
|
+
<div class="v7-infoRow"><div class="sk">Dirty context</div><div class="sv">Agents re-read files they've already seen — unchanged code, the same rules, stale maps — every new session. Nothing new is learned; it's re-remembering. That build-up is <b>context rot</b>.</div></div>
|
|
607
|
+
<div class="v7-infoRow"><div class="sk">The 85.0%</div><div class="sv">Share of your agents' total reads that were <b>repeats</b> of context already loaded earlier, across your sessions.</div></div>
|
|
608
|
+
<div class="v7-infoRow"><div class="sk">$13,689</div><div class="sv"><b>API-equivalent</b> — what this usage would cost at list API rates. Most of it is cache / input reads, so it's a measure of <b>volume, not a bill you paid</b>.</div></div>
|
|
609
|
+
<div class="v7-infoRow"><div class="sk">18 days</div><div class="sv">With the repeated context cleared, the same workspace state is reached <b>~18 days sooner</b> — derived from your attention hours vs. the re-read overhead.</div></div>
|
|
610
|
+
<div class="v7-infoNote">Computed locally · no transcripts leave your machine.</div>
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
|
|
614
|
+
<!-- in-canvas loading state (setup mode): the report loads in place, no separate page -->
|
|
615
|
+
<div class="scan-loading" id="scan-loading">
|
|
616
|
+
<div class="eyebrow">Local scan</div>
|
|
617
|
+
<div class="title">Reading your local history</div>
|
|
618
|
+
<div class="bar"><i></i></div>
|
|
619
|
+
<div class="count" id="scan-count"></div>
|
|
620
|
+
</div>
|
|
621
|
+
|
|
622
|
+
<div class="setup-header">
|
|
623
|
+
<div class="setup-persona" tabindex="0" aria-describedby="persona-hover">
|
|
624
|
+
<div class="setup-eyebrow">AI Coding City</div>
|
|
625
|
+
<div class="setup-persona-name">bossy</div>
|
|
626
|
+
<div class="setup-rank">the architect · marathoner</div>
|
|
627
|
+
<div class="setup-combo"><span class="ct">loopy</span><span class="ct">tabby</span><span class="ct">maxxy</span></div>
|
|
628
|
+
<div class="persona-cue">hover for the read</div>
|
|
629
|
+
<div class="persona-hover" id="persona-hover" role="tooltip"></div>
|
|
630
|
+
</div>
|
|
631
|
+
<div class="setup-stats">
|
|
632
|
+
<div class="setup-eyebrow">API-equivalent compute spent</div>
|
|
633
|
+
<div class="amount">$13,689</div>
|
|
634
|
+
<div class="detail">You spent <b>191.1h</b> of AI coding.</div>
|
|
635
|
+
<div class="setup-split">
|
|
636
|
+
<span>26% Codex</span>
|
|
637
|
+
<span>74% Claude</span>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
|
|
642
|
+
<!-- compute cost -->
|
|
643
|
+
<div class="card-zone compute-cost">
|
|
644
|
+
<div class="label">API-equivalent compute spent</div>
|
|
645
|
+
<div class="amount">$13,689</div>
|
|
646
|
+
<div class="detail">You spent <b>191.1h</b> of AI coding.</div>
|
|
647
|
+
</div>
|
|
648
|
+
|
|
649
|
+
<!-- tool split chips -->
|
|
650
|
+
<div class="card-zone tool-split" id="tool-split"></div>
|
|
651
|
+
|
|
652
|
+
<!-- persona -->
|
|
653
|
+
<div class="card-zone persona-card">
|
|
654
|
+
<canvas class="avatar-rive" id="persona-mascot"></canvas>
|
|
655
|
+
<div class="name">bossy</div>
|
|
656
|
+
<div class="rankrhythm">the architect · marathoner</div>
|
|
657
|
+
<div class="combo"><span class="ct">loopy</span><span class="ct">tabby</span><span class="ct">maxxy</span></div>
|
|
658
|
+
<div class="verdict">you don't write code, you run a daycare for <b>163</b> sleepless interns who reread the same file into amnesia and bill every typo to Opus — <b>$13,689</b> later, you wanted a helper and became a dad. 🗿</div>
|
|
659
|
+
</div>
|
|
660
|
+
|
|
661
|
+
<!-- dirty context -->
|
|
662
|
+
<div class="card-zone dirty-context">
|
|
663
|
+
<div class="pct" id="setup-metric"><span id="setup-metric-value">85.0%</span><span class="word" id="setup-metric-label">repeated reads</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
|
|
664
|
+
<div class="desc" id="setup-metric-say">Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot.</div>
|
|
665
|
+
</div>
|
|
666
|
+
|
|
667
|
+
<!-- counterfactual: one line — 18 days saved -->
|
|
668
|
+
<div class="card-zone counterfactual">
|
|
669
|
+
<svg class="cal-icon" viewBox="0 0 80 84" xmlns="http://www.w3.org/2000/svg">
|
|
670
|
+
<rect x="24" y="2" width="5" height="13" rx="2.5" fill="#1b1c1f"/>
|
|
671
|
+
<rect x="51" y="2" width="5" height="13" rx="2.5" fill="#1b1c1f"/>
|
|
672
|
+
<rect x="8" y="10" width="64" height="66" rx="12" fill="#ffffff" stroke="#e3e4e7" stroke-width="2"/>
|
|
673
|
+
<path d="M8 22 a12 12 0 0 1 12 -12 h40 a12 12 0 0 1 12 12 v8 H8 Z" fill="#1b1c1f"/>
|
|
674
|
+
<text x="40" y="24" text-anchor="middle" font-family="'IBM Plex Mono', monospace" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1.2">JUN</text>
|
|
675
|
+
<text x="40" y="64" text-anchor="middle" font-family="'Avenir Next', sans-serif" font-size="36" font-weight="800" fill="#1b1c1f">2</text>
|
|
676
|
+
</svg>
|
|
677
|
+
<div class="cf-body">
|
|
678
|
+
<div class="cf-hero">Echo saves you <b>18 days</b></div>
|
|
679
|
+
<div class="cf-say">You'd have reached today's workspace on <b>Jun 2</b>, not Jun 20.</div>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
|
|
683
|
+
<button id="setup-connect" class="setup-connect" type="button">Connect Echo</button>
|
|
684
|
+
|
|
685
|
+
<div class="card-zone card-footer">
|
|
686
|
+
<span>Generated by Echo · No transcripts shown</span>
|
|
687
|
+
<span>Local scan · Share-safe city mode</span>
|
|
688
|
+
</div>
|
|
689
|
+
</div>
|
|
690
|
+
|
|
691
|
+
<div id="repo-detail"></div>
|
|
692
|
+
|
|
693
|
+
<script type="importmap">
|
|
694
|
+
{ "imports": { "three": "./vendor/three.module.min.js" } }
|
|
695
|
+
</script>
|
|
696
|
+
<script type="module">
|
|
697
|
+
import * as THREE from 'three';
|
|
698
|
+
import { RoundedBoxGeometry } from './vendor/RoundedBoxGeometry.js';
|
|
699
|
+
import { OrbitControls } from './vendor/OrbitControls.js';
|
|
700
|
+
|
|
701
|
+
const pageParams=new URLSearchParams(location.search);
|
|
702
|
+
const setupMode=pageParams.get('setup')==='1';
|
|
703
|
+
if(setupMode) document.body.classList.add('setup-mode');
|
|
704
|
+
let VIZ_W=setupMode ? Math.round(window.innerWidth - Math.min(window.innerWidth*0.4, 620)) : 920; // setup split: city = viewport minus the capped report panel
|
|
705
|
+
let VIZ_H=setupMode ? window.innerHeight : 1180; // repo-visualizer canvas = full card in share mode, left half in setup mode
|
|
706
|
+
const TRAY_COL = 0xece5d3; // warm IVORY — not pure white, not cool grey; separates from the white card
|
|
707
|
+
const TOOL = { codex:0x10a37f, claude:0xd97757 }; // ONLY two cube colours — exact OpenAI / Claude chip-icon hexes
|
|
708
|
+
|
|
709
|
+
// ── volume normalization ─────────────────────────────────────────────────────
|
|
710
|
+
// Each cube's VOLUME is proportional to that repo's token usage, measured in a fixed unit so
|
|
711
|
+
// city size is comparable across users. 1 unit = one "coding-day": ~2h of agentic AI coding,
|
|
712
|
+
// which drives ≈80M total tokens (anchored on 7.49B tokens / 191.1h ≈ 39M tok/h, corroborated).
|
|
713
|
+
const TOKENS_PER_UNIT = 80e6; // tokens in one standard 2h coding-day = 1 volume unit
|
|
714
|
+
const MIN_TOKENS = 4e6; // hide repos below ~0.05 coding-days (declutter the long tail)
|
|
715
|
+
const BASE_EDGE = 36; // footprint of a 1-unit cube (world units)
|
|
716
|
+
const TOWER = 1.4; // gentle tower: height = TOWER × base, volume preserved
|
|
717
|
+
const COST_SCALE = 13689/19043; // reconcile forensic per-repo $ (sum ≈ $19,043) to the $13,689 headline
|
|
718
|
+
const LABEL_MIN_BASE = 24; // cubes with footprint ≥ this get a top-face label; smaller ones are click-only
|
|
719
|
+
const fmtTok=(n)=> n>=1e9?`${(n/1e9).toFixed(2)}B` : n>=1e6?`${Math.round(n/1e6)}M` : `${Math.round(n/1e3)}K`;
|
|
720
|
+
const money=(n)=>'$'+Math.round(Number(n)||0).toLocaleString('en-US');
|
|
721
|
+
const oneDec=(n)=>Number(n||0).toFixed(1).replace(/\.0$/,'');
|
|
722
|
+
const monthDay=(iso)=>{
|
|
723
|
+
const d=new Date(iso);
|
|
724
|
+
if(Number.isNaN(d.getTime())) return {month:'JUN', day:'2', label:'Jun 2'};
|
|
725
|
+
const month=d.toLocaleString('en-US',{month:'short', timeZone:'UTC'});
|
|
726
|
+
return {month:month.toUpperCase(), day:String(d.getUTCDate()), label:`${month} ${d.getUTCDate()}`};
|
|
727
|
+
};
|
|
728
|
+
function providerSplit(report){
|
|
729
|
+
let codex=0, claude=0;
|
|
730
|
+
for(const [model, v] of Object.entries(report?.cost?.byModel || {})){
|
|
731
|
+
const tok=Number(v?.total)||0;
|
|
732
|
+
if(/claude|opus|sonnet|haiku|anthropic/i.test(model)) claude+=tok;
|
|
733
|
+
else if(/gpt|codex|openai|o\d/i.test(model)) codex+=tok;
|
|
734
|
+
}
|
|
735
|
+
const total=codex+claude || 1;
|
|
736
|
+
const codexPct=Math.round(codex/total*100);
|
|
737
|
+
return {codexPct, claudePct:100-codexPct, dominant:codex>=claude?'codex':'claude'};
|
|
738
|
+
}
|
|
739
|
+
// ---- coding-persona engine (Phase 1: only signals the scan actually has — no commits / accept-all yet) ----
|
|
740
|
+
const PERSONA_TRAITS={
|
|
741
|
+
bossy:{label:'bossy', blurb:"you don't write code anymore — you run a daycare for agents who never sleep and occasionally lie. wanted a helper, became a dad."},
|
|
742
|
+
maxxy:{label:'maxxy', blurb:"Opus to rename a variable, Opus to fix a typo. the small models are right there — but you don't do small models, you do consequences. 💸"},
|
|
743
|
+
loopy:{label:'loopy', blurb:"opened the same file 14 times and still doesn't know what's in it. it's not working, it's re-remembering. context rot undefeated. 🗿"},
|
|
744
|
+
tabby:{label:'tabby', blurb:"tabs everywhere, half-built features in every direction. your brain is a browser with a memory leak. 🫠"},
|
|
745
|
+
ghosty:{label:'ghosty', blurb:"you edit a lot but commit little — branches get opened, worked on, then abandoned before they ship. lots of motion, not much landed."},
|
|
746
|
+
};
|
|
747
|
+
// maxxy (merged from lusty) wears the lusty character; every other trait uses its own sticker
|
|
748
|
+
const stickerFor=(traitKey)=> traitKey==='maxxy' ? 'lusty' : traitKey;
|
|
749
|
+
const PERSONA_RANKS={
|
|
750
|
+
tourist:{label:'vibe tourist', blurb:"accepts all on blind faith, googles the error the agent already explained two lines up. bless — we all start here."},
|
|
751
|
+
agent:{label:'agent-pilled', blurb:"saw it one-shot something once and never looked back. drives one agent, still watches its every move."},
|
|
752
|
+
high:{label:'high-agency', blurb:"fluent with the fleet, right-sizes the model, takes the wheel back when it matters."},
|
|
753
|
+
architect:{label:'the architect', blurb:"runs the whole system from above — agents in parallel worktrees, just nods and merges."},
|
|
754
|
+
enlightened:{label:'enlightened', blurb:"transcended the keyboard. hasn't hand-written a line in months and the code's never been cleaner. 🗿"},
|
|
755
|
+
};
|
|
756
|
+
const PERSONA_RHYTHMS={
|
|
757
|
+
marathoner:{label:'marathoner', blurb:"locked in since noon, sun set and rose, did not move. shipped though."},
|
|
758
|
+
raider:{label:'raider', blurb:"25-minute strikes, then gone to think about it in the shower. the breaks are the method."},
|
|
759
|
+
streak:{label:'the streak', blurb:"here every single day, small commits, never misses. the graph must stay green."},
|
|
760
|
+
binger:{label:'binger', blurb:"dark for a week, then a whole app in one unhinged weekend. not a routine — episodes."},
|
|
761
|
+
nightowl:{label:'night owl', blurb:"unreachable at 9am, unstoppable at 1am. the moon is my standup. 🌙"},
|
|
762
|
+
};
|
|
763
|
+
function daysBetween(a,b){ const x=Date.parse(a), y=Date.parse(b); if(isNaN(x)||isNaN(y)) return 1; return Math.max(1, Math.round((y-x)/86400000)+1); }
|
|
764
|
+
function derivePersona(report){
|
|
765
|
+
const cost=report?.cost||{}, scale=report?.scale||{}, uwh=report?.userWorkingHours||{}, rh=report?.rhythm||{}, cl=report?.cleanliness||{};
|
|
766
|
+
const repos=Array.isArray(report?.repos)?report.repos:[];
|
|
767
|
+
const totalTok=Number(scale.totalTokens)||1;
|
|
768
|
+
let opusTok=0; for(const [m,v] of Object.entries(cost.byModel||{})){ if(/opus/i.test(m)) opusTok+=Number(v?.total)||0; }
|
|
769
|
+
const opusShare=opusTok/totalTok;
|
|
770
|
+
const assistant=repos.reduce((s,r)=>s+(Number(r.assistantMessages)||0),0);
|
|
771
|
+
const turns=Math.max(1, Number(uwh.realUserTurns)||0);
|
|
772
|
+
const autonomy=assistant/turns; // AI turns per human prompt → how hands-off you run
|
|
773
|
+
const repoCount=Number(scale.repoCount)||repos.length;
|
|
774
|
+
const stale=Number(cl.staleReadSharePct)||0, spend=Number(cost.total)||0;
|
|
775
|
+
// Phase-2 git signal: commits landed vs building activity. Gated on commits>0 so a missing git pass can't false-fire ghosty.
|
|
776
|
+
const commits=Number(scale.totalCommits)||0, attention=Number(uwh.userAttentionHours)||0;
|
|
777
|
+
const activeDaysG=Number(uwh.activeAttentionDays)||0;
|
|
778
|
+
const commitsPerDay=activeDaysG>0?commits/activeDaysG:0;
|
|
779
|
+
const ghostyOn=commits>0 && attention>=8 && commitsPerDay<0.5;
|
|
780
|
+
// measurable traits only — primary = strongest firing signal, sides = the next few
|
|
781
|
+
const scored=[
|
|
782
|
+
{key:'loopy', on:stale>=45, s:stale/100},
|
|
783
|
+
{key:'maxxy', on:opusShare>=0.5 || spend>=1500, s:Math.max(opusShare, Math.min(1,spend/12000))}, // merged: Opus-heavy OR big spender
|
|
784
|
+
{key:'bossy', on:autonomy>=5, s:Math.min(1,autonomy/20)},
|
|
785
|
+
{key:'tabby', on:repoCount>=10, s:Math.min(1,repoCount/30)},
|
|
786
|
+
{key:'ghosty', on:ghostyOn, s:ghostyOn?Math.min(0.8, 1-Math.min(1,commitsPerDay/0.5)):0},
|
|
787
|
+
].sort((a,b)=>b.s-a.s);
|
|
788
|
+
const primaryKey=scored[0].key; // most characteristic trait (highest signal)
|
|
789
|
+
const sideKeys=scored.filter(t=>t.on && t.key!==primaryKey).slice(0,3).map(t=>t.key);
|
|
790
|
+
// rank — rough proxy from autonomy + breadth (the true rank signals like re-roll aren't scanned yet)
|
|
791
|
+
let rankKey='tourist';
|
|
792
|
+
if(autonomy>=14&&repoCount>=12) rankKey='enlightened';
|
|
793
|
+
else if(autonomy>=8) rankKey='architect';
|
|
794
|
+
else if(autonomy>=4) rankKey='high';
|
|
795
|
+
else if(autonomy>=2) rankKey='agent';
|
|
796
|
+
// rhythm — fully measurable from work blocks + active-day density + late-night share
|
|
797
|
+
const lateShare=Number(rh.lateNightShare)||0;
|
|
798
|
+
const avgBlock=(Number(uwh.userAttentionHours)||0)/Math.max(1,Number(uwh.workBlocks)||0);
|
|
799
|
+
const density=(Number(uwh.activeAttentionDays)||0)/daysBetween(report?.scanStartDate, report?.scanEndDate);
|
|
800
|
+
const maxDay=Number(uwh.maxDailyAttentionHours)||0;
|
|
801
|
+
let rhythmKey='marathoner';
|
|
802
|
+
if(lateShare>=25) rhythmKey='nightowl';
|
|
803
|
+
else if(density<=0.35&&maxDay>=6) rhythmKey='binger';
|
|
804
|
+
else if(density>=0.6) rhythmKey='streak';
|
|
805
|
+
else if(avgBlock<=0.75) rhythmKey='raider';
|
|
806
|
+
return { primary:PERSONA_TRAITS[primaryKey], sides:sideKeys.map(k=>PERSONA_TRAITS[k]),
|
|
807
|
+
rank:PERSONA_RANKS[rankKey], rhythm:PERSONA_RHYTHMS[rhythmKey] };
|
|
808
|
+
}
|
|
809
|
+
function renderPersonaHover(persona){
|
|
810
|
+
const host=document.getElementById('persona-hover');
|
|
811
|
+
if(!host) return;
|
|
812
|
+
const esc=(t)=>String(t).replace(/[&<>]/g,(c)=>({'&':'&','<':'<','>':'>'}[c]));
|
|
813
|
+
const line=(t)=>`<div class="ph-line"><b>${esc(t.label)}</b> — ${esc(t.blurb)}</div>`;
|
|
814
|
+
host.innerHTML = line(persona.primary) + persona.sides.map(line).join('') +
|
|
815
|
+
`<div class="ph-meta"><b>${esc(persona.rank.label)}</b> · ${esc(persona.rank.blurb)}</div>` +
|
|
816
|
+
`<div class="ph-meta"><b>${esc(persona.rhythm.label)}</b> · ${esc(persona.rhythm.blurb)}</div>`;
|
|
817
|
+
}
|
|
818
|
+
function renderV7PersonaHover(persona){
|
|
819
|
+
const host=document.getElementById('v7-persona-hover');
|
|
820
|
+
const esc=(t)=>String(t).replace(/[&<>]/g,(c)=>({'&':'&','<':'<','>':'>'}[c]));
|
|
821
|
+
const line=(t)=>t?`<div class="ph-line"><b>${esc(t.label)}</b> — ${esc(t.blurb)}</div>`:'';
|
|
822
|
+
if(!persona){
|
|
823
|
+
const byLabel=(table,label)=>Object.values(table).find((v)=>v.label.toLowerCase()===String(label||'').trim().toLowerCase());
|
|
824
|
+
const rankBits=String(document.querySelector('.v7-rank')?.textContent||'').split('·').map((s)=>s.trim());
|
|
825
|
+
persona={
|
|
826
|
+
primary:byLabel(PERSONA_TRAITS, document.querySelector('.v7-personaName')?.textContent),
|
|
827
|
+
sides:Array.from(document.querySelectorAll('.v7-combo .ct')).map((el)=>byLabel(PERSONA_TRAITS, el.textContent)).filter(Boolean),
|
|
828
|
+
rank:byLabel(PERSONA_RANKS, rankBits[0]),
|
|
829
|
+
rhythm:byLabel(PERSONA_RHYTHMS, rankBits[1]),
|
|
830
|
+
};
|
|
831
|
+
}
|
|
832
|
+
const youHtml = line(persona.primary) + (persona.sides||[]).map(line).join('') +
|
|
833
|
+
(persona.rank?`<div class="ph-meta"><b>${esc(persona.rank.label)}</b> · ${esc(persona.rank.blurb)}</div>`:'') +
|
|
834
|
+
(persona.rhythm?`<div class="ph-meta"><b>${esc(persona.rhythm.label)}</b> · ${esc(persona.rhythm.blurb)}</div>`:'');
|
|
835
|
+
if(host) host.innerHTML = youHtml;
|
|
836
|
+
renderFrPersona(persona, youHtml, esc);
|
|
837
|
+
}
|
|
838
|
+
// field-report popover: "this is you" + a togglable catalog of ALL the trait/rank/rhythm options
|
|
839
|
+
function renderFrPersona(persona, youHtml, esc){
|
|
840
|
+
const frHost=document.getElementById('fr-persona-hover');
|
|
841
|
+
if(!frHost || !persona) return;
|
|
842
|
+
esc = esc || ((t)=>String(t).replace(/[&<>]/g,(c)=>({'&':'&','<':'<','>':'>'}[c])));
|
|
843
|
+
const da=(t)=>esc(t).replace(/"/g,'"');
|
|
844
|
+
const primaryLabel=persona.primary?persona.primary.label:'';
|
|
845
|
+
const primaryBlurb=persona.primary?persona.primary.blurb:'';
|
|
846
|
+
const sides=(persona.sides||[]).filter(Boolean);
|
|
847
|
+
const sideLabels=new Set(sides.map((s)=>s.label));
|
|
848
|
+
const rankLabel=persona.rank?persona.rank.label:'';
|
|
849
|
+
const rhythmLabel=persona.rhythm?persona.rhythm.label:'';
|
|
850
|
+
const rankList=Object.values(PERSONA_RANKS);
|
|
851
|
+
const rankIdx=rankList.findIndex((r)=>r.label===rankLabel);
|
|
852
|
+
const dots=rankList.map((r,i)=>`<i class="${i<=rankIdx?'on':''}"></i>`).join('');
|
|
853
|
+
// ---- "this is you": primary is the star, rank as a level meter, rhythm as a badge, sides demoted ----
|
|
854
|
+
const youPaneHtml =
|
|
855
|
+
`<div class="ph-kicker">your coding personality</div>`+
|
|
856
|
+
`<div class="ph-title">${esc(primaryLabel)}</div>`+
|
|
857
|
+
`<div class="ph-lead">${esc(primaryBlurb)}</div>`+
|
|
858
|
+
`<div class="ph-row"><div class="ph-row-h"><span>Rank · lv ${rankIdx+1}/${rankList.length}</span><span class="ph-meter">${dots}</span></div>`+
|
|
859
|
+
`<div class="ph-row-v">${esc(rankLabel)}</div>`+
|
|
860
|
+
(persona.rank?`<div class="ph-row-d">${esc(persona.rank.blurb)}</div>`:'')+
|
|
861
|
+
`</div>`+
|
|
862
|
+
`<div class="ph-row"><div class="ph-row-h"><span>Rhythm</span></div>`+
|
|
863
|
+
`<div class="ph-row-v">${esc(rhythmLabel)}</div>`+
|
|
864
|
+
(persona.rhythm?`<div class="ph-row-d">${esc(persona.rhythm.blurb)}</div>`:'')+
|
|
865
|
+
`</div>`+
|
|
866
|
+
(sides.length?`<div class="ph-row"><div class="ph-row-h"><span>Also leaning</span></div>`+
|
|
867
|
+
`<div class="ph-also">${sides.map((s)=>`<mark>${esc(s.label)}</mark>`).join('')}</div></div>`:'');
|
|
868
|
+
// ---- "all types" catalog (indexed lists; each item shows its blurb on hover) ----
|
|
869
|
+
const item=(t,o)=>`<div class="ph-item${o.primary?' is-primary':o.you?' is-you':''}" data-label="${da(t.label)}" data-blurb="${da(t.blurb)}"><span class="ph-ix">${String(o.i+1).padStart(2,'0')}</span><span class="ph-nm">${esc(t.label)}</span>${(o.tag&&(o.you||o.primary))?'<span class="ph-you-tag">you</span>':''}</div>`;
|
|
870
|
+
const traitItems=Object.values(PERSONA_TRAITS).map((t,i)=>item(t,{you:sideLabels.has(t.label),primary:t.label===primaryLabel,i,tag:false})).join('');
|
|
871
|
+
const rhythmItems=Object.values(PERSONA_RHYTHMS).map((t,i)=>item(t,{you:t.label===rhythmLabel,primary:false,i,tag:true})).join('');
|
|
872
|
+
// rank as a podium — ascending steps you climb; your rung is the tall blue bar
|
|
873
|
+
const pod=(t,i)=>{ const you=t.label===rankLabel, cls=you?'is-you':(i<=rankIdx?'reached':'locked'), h=34+i*15;
|
|
874
|
+
return `<div class="ph-pod ${cls}" data-label="${da(t.label)}" data-blurb="${da(t.blurb)}">`+
|
|
875
|
+
(you?`<span class="ph-pod-you">you</span>`:'')+
|
|
876
|
+
`<span class="ph-pod-bar" style="height:${h}px"><span class="ph-pod-lvl">${i+1}</span></span>`+
|
|
877
|
+
`<span class="ph-pod-nm">${esc(t.label)}</span></div>`; };
|
|
878
|
+
const rankPods=rankList.map((t,i)=>pod(t,i)).join('');
|
|
879
|
+
frHost.innerHTML =
|
|
880
|
+
`<div class="ph-you">${youPaneHtml}</div>`+
|
|
881
|
+
`<div class="ph-all" hidden>`+
|
|
882
|
+
`<div class="ph-cat-h">Traits <span>hover to read</span></div><div class="ph-list">${traitItems}</div>`+
|
|
883
|
+
`<div class="ph-cat-h">Rank <span>level ${rankIdx+1} / ${rankList.length}</span></div><div class="ph-podium">${rankPods}</div>`+
|
|
884
|
+
`<div class="ph-cat-h">Rhythm <span>your cadence</span></div><div class="ph-list">${rhythmItems}</div>`+
|
|
885
|
+
`</div>`+
|
|
886
|
+
`<button class="ph-toggle" type="button">see all types →</button>`;
|
|
887
|
+
const toggle=frHost.querySelector('.ph-toggle');
|
|
888
|
+
const youPane=frHost.querySelector('.ph-you');
|
|
889
|
+
const allPane=frHost.querySelector('.ph-all');
|
|
890
|
+
if(toggle && youPane && allPane){
|
|
891
|
+
toggle.addEventListener('click', (e)=>{
|
|
892
|
+
e.stopPropagation();
|
|
893
|
+
const showAll=allPane.hasAttribute('hidden');
|
|
894
|
+
allPane.toggleAttribute('hidden', !showAll);
|
|
895
|
+
youPane.toggleAttribute('hidden', showAll);
|
|
896
|
+
toggle.textContent = showAll ? '← back to you' : 'see all types →';
|
|
897
|
+
});
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
function buildSetupRepos(report){
|
|
901
|
+
const split=providerSplit(report);
|
|
902
|
+
const source=Array.isArray(report?.repos) ? report.repos : [];
|
|
903
|
+
const usable=source
|
|
904
|
+
.filter((repo)=>Number(repo?.tokens)>0)
|
|
905
|
+
.sort((a,b)=>(Number(b.tokens)||0)-(Number(a.tokens)||0))
|
|
906
|
+
.slice(0, 18);
|
|
907
|
+
return usable.map((repo, i)=>{
|
|
908
|
+
let x, z;
|
|
909
|
+
if(i===0){ x=-36; z=-58; }
|
|
910
|
+
else if(i===1){ x=128; z=-12; }
|
|
911
|
+
else {
|
|
912
|
+
const angle=i*2.399963229728653;
|
|
913
|
+
const radius=72+Math.sqrt(i)*42;
|
|
914
|
+
x=Math.cos(angle)*radius;
|
|
915
|
+
z=Math.sin(angle)*radius+28;
|
|
916
|
+
}
|
|
917
|
+
const cxTok=Number(repo.codexTokens)||0, clTok=Number(repo.claudeTokens)||0, tTok=cxTok+clTok;
|
|
918
|
+
const codexPct = tTok ? Math.round(cxTok/tTok*100) : ((repo.dominantProvider==='codex')?100:0);
|
|
919
|
+
return {
|
|
920
|
+
name:String(repo.name || `Repo ${i+1}`),
|
|
921
|
+
x, z,
|
|
922
|
+
tool:(repo.dominantProvider==='codex'||repo.dominantProvider==='claude')?repo.dominantProvider:split.dominant,
|
|
923
|
+
tokens:Number(repo.tokens)||0,
|
|
924
|
+
cost:Number(repo.cost)||0,
|
|
925
|
+
days:Number(repo.equivalentFocusDays)||0,
|
|
926
|
+
hours:Number(repo.attentionHours)||0,
|
|
927
|
+
sessions:Number(repo.sessions)||0,
|
|
928
|
+
codexPct, claudePct:100-codexPct,
|
|
929
|
+
pin:i<2,
|
|
930
|
+
daily:Array.isArray(repo.daily)?repo.daily:null, // [[localDay, tokens], ...] for grow-over-time
|
|
931
|
+
};
|
|
932
|
+
});
|
|
933
|
+
}
|
|
934
|
+
function applySetupReport(report){
|
|
935
|
+
if(!setupMode || !report) return;
|
|
936
|
+
const split=providerSplit(report);
|
|
937
|
+
const persona=derivePersona(report);
|
|
938
|
+
const cost=money(report?.cost?.total);
|
|
939
|
+
const attention=oneDec(report?.userWorkingHours?.userAttentionHours);
|
|
940
|
+
const dirty=oneDec(report?.cleanliness?.staleReadSharePct);
|
|
941
|
+
const cf=report?.counterfactual || {};
|
|
942
|
+
const reach=monthDay(cf.counterfactualDate);
|
|
943
|
+
const instead=monthDay(report?.scanEndDate).label;
|
|
944
|
+
const days=Math.max(1, Math.round(Number(cf.daysGained)||0));
|
|
945
|
+
document.querySelectorAll('.setup-persona-name,.persona-card .name,.v7-personaName').forEach((el)=>{ el.textContent=persona.primary.label; });
|
|
946
|
+
document.querySelectorAll('.setup-rank,.persona-card .rankrhythm,.v7-rank').forEach((el)=>{ el.textContent=`${persona.rank.label} · ${persona.rhythm.label}`; });
|
|
947
|
+
const frRank=document.getElementById('fr-rank'); if(frRank) frRank.innerHTML=`You are <b>${persona.rank.label}</b> on <b>${persona.rhythm.label}</b>`;
|
|
948
|
+
document.querySelectorAll('.setup-combo,.persona-card .combo,.v7-combo').forEach((el)=>{ el.innerHTML=persona.sides.map((s)=>`<span class="ct">${s.label}</span>`).join(''); });
|
|
949
|
+
renderPersonaHover(persona);
|
|
950
|
+
renderV7PersonaHover(persona);
|
|
951
|
+
document.querySelectorAll('.setup-stats .amount,.compute-cost .amount').forEach((el)=>{ el.textContent=cost; });
|
|
952
|
+
document.querySelectorAll('.setup-stats .detail,.compute-cost .detail').forEach((el)=>{ el.innerHTML=`You spent <b>${attention}h</b> of AI coding.`; });
|
|
953
|
+
const v7Cost=document.getElementById('v7-cost'); if(v7Cost) v7Cost.textContent=cost;
|
|
954
|
+
const v7Attention=document.getElementById('v7-attention'); if(v7Attention) v7Attention.textContent=`${attention}h`;
|
|
955
|
+
const repoCount=Number(report?.scale?.repoCount) || (Array.isArray(report?.repos) ? report.repos.length : 0);
|
|
956
|
+
const v7RepoCount=document.getElementById('v7-repo-count'); if(v7RepoCount && repoCount) v7RepoCount.textContent=String(repoCount);
|
|
957
|
+
const v7Tokens=document.getElementById('v7-total-tokens'); if(v7Tokens) v7Tokens.textContent=fmtTok(Number(report?.scale?.totalTokens)||0);
|
|
958
|
+
const v7MetricValue=document.getElementById('v7-metric-value'); if(v7MetricValue) v7MetricValue.textContent=`${dirty}%`;
|
|
959
|
+
const v7MetricLabel=document.getElementById('v7-metric-label'); if(v7MetricLabel) v7MetricLabel.textContent='repeated reads';
|
|
960
|
+
// ---- setup-split field report (right half) ----
|
|
961
|
+
const frName=document.getElementById('fr-name'); if(frName) frName.textContent=persona.primary.label;
|
|
962
|
+
const frAvatar=document.getElementById('fr-avatar');
|
|
963
|
+
if(frAvatar){
|
|
964
|
+
const key=String(persona.primary&&persona.primary.label||'').toLowerCase();
|
|
965
|
+
if(PERSONA_TRAITS[key]){ frAvatar.src=`./personality_stickers/${stickerFor(key)}.png`; frAvatar.alt=`${key} avatar`; }
|
|
966
|
+
}
|
|
967
|
+
const frNo=document.getElementById('fr-no'); if(frNo && repoCount) frNo.textContent=`№ ${repoCount}`;
|
|
968
|
+
const frRepos=document.getElementById('fr-repos'); if(frRepos && repoCount) frRepos.textContent=`${repoCount} ${repoCount===1?'repo':'repos'}`;
|
|
969
|
+
const frHours=document.getElementById('fr-hours'); if(frHours) frHours.textContent=`${attention} hours`;
|
|
970
|
+
const frTokens=document.getElementById('fr-tokens'); if(frTokens) frTokens.textContent=`${fmtTok(Number(report?.scale?.totalTokens)||0)} tokens`;
|
|
971
|
+
const frCost=document.getElementById('fr-cost'); if(frCost) frCost.textContent=cost;
|
|
972
|
+
const frMetricValue=document.getElementById('fr-metric-value'); if(frMetricValue) frMetricValue.textContent=`${dirty}%`;
|
|
973
|
+
const v7MetricSay=document.getElementById('v7-metric-say');
|
|
974
|
+
if(v7MetricSay) v7MetricSay.innerHTML="Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city.";
|
|
975
|
+
const splitHtml=`<span>${split.codexPct}% Codex</span><span>${split.claudePct}% Claude</span>`;
|
|
976
|
+
const setupSplit=document.querySelector('.setup-split'); if(setupSplit) setupSplit.innerHTML=splitHtml;
|
|
977
|
+
// city Claude/Codex split bar + legend
|
|
978
|
+
const csClaude=document.querySelector('#city-split .cs-claude'); if(csClaude) csClaude.style.width=`${split.claudePct}%`;
|
|
979
|
+
const csCodex=document.querySelector('#city-split .cs-codex'); if(csCodex) csCodex.style.width=`${split.codexPct}%`;
|
|
980
|
+
const csClB=document.querySelector('#city-split .cs-l.claude b'); if(csClB) csClB.textContent=`${split.claudePct}%`;
|
|
981
|
+
const csCdB=document.querySelector('#city-split .cs-l.codex b'); if(csCdB) csCdB.textContent=`${split.codexPct}%`;
|
|
982
|
+
// timeline: first session -> today
|
|
983
|
+
const tlStartDate=new Date(report?.scanStartDate);
|
|
984
|
+
if(!Number.isNaN(tlStartDate.getTime())){
|
|
985
|
+
const tlStartEl=document.querySelector('#city-timeline .tl-start');
|
|
986
|
+
if(tlStartEl) tlStartEl.textContent=tlStartDate.toLocaleString('en-US',{month:'short', year:'numeric', timeZone:'UTC'});
|
|
987
|
+
}
|
|
988
|
+
const spanDays=daysBetween(report?.scanStartDate, report?.scanEndDate);
|
|
989
|
+
const spanLabel = spanDays>=60 ? `${Math.round(spanDays/30.44)} months with AI` : `${spanDays} day${spanDays===1?'':'s'} with AI`;
|
|
990
|
+
const tlSpanEl=document.querySelector('#city-timeline .tl-span'); if(tlSpanEl) tlSpanEl.textContent=spanLabel;
|
|
991
|
+
const dirtyPct=document.querySelector('.dirty-context .pct');
|
|
992
|
+
if(dirtyPct) dirtyPct.innerHTML=`<span id="setup-metric-value">${dirty}%</span><span class="word" id="setup-metric-label">repeated reads</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button>`;
|
|
993
|
+
const dirtyDesc=document.querySelector('.dirty-context .desc');
|
|
994
|
+
if(dirtyDesc) dirtyDesc.id='setup-metric-say';
|
|
995
|
+
const monthEl=document.querySelector('.counterfactual text:first-of-type'); if(monthEl) monthEl.textContent=reach.month;
|
|
996
|
+
const dayEl=document.querySelector('.counterfactual text:last-of-type'); if(dayEl) dayEl.textContent=reach.day;
|
|
997
|
+
const cfHero=document.querySelector('.cf-hero'); if(cfHero) cfHero.innerHTML=`Echo saves you <b>${days} days</b>`;
|
|
998
|
+
const cfSay=document.querySelector('.cf-say'); if(cfSay) cfSay.innerHTML=`You'd have reached today's workspace on <b>${reach.label}</b>, not ${instead}.`;
|
|
999
|
+
signpostTokens=fmtTok(Number(report?.scale?.totalTokens)||0);
|
|
1000
|
+
signpostHours=`${attention}h`;
|
|
1001
|
+
signpostCost=cost;
|
|
1002
|
+
// the "WASTED" line follows the metric too: hours / % / $ of repeated-read waste (same numbers as the cost quote)
|
|
1003
|
+
const dirtyShare=Math.max(0, Number(dirty)||0)/100;
|
|
1004
|
+
signpostWastedTime=`≈${Math.round((Number(attention)||0)*dirtyShare)}h WASTED`;
|
|
1005
|
+
signpostWastedPct=`${Math.round(Number(dirty))||0}% WASTED`;
|
|
1006
|
+
signpostWastedCost=`≈${money((Number(report?.cost?.total)||0)*dirtyShare)} WASTED`;
|
|
1007
|
+
}
|
|
1008
|
+
async function loadSetupReport(){
|
|
1009
|
+
const nonce=pageParams.get('nonce');
|
|
1010
|
+
if(!setupMode || !nonce) return null;
|
|
1011
|
+
const countEl=document.getElementById('scan-count');
|
|
1012
|
+
for(let i=0;i<80;i++){
|
|
1013
|
+
try{
|
|
1014
|
+
const res=await fetch(`/report?nonce=${encodeURIComponent(nonce)}`, {credentials:'omit', cache:'no-store'});
|
|
1015
|
+
if(res.status===200) return await res.json();
|
|
1016
|
+
if(res.status!==202) return null;
|
|
1017
|
+
// 202 = still scanning. Surface live "read N / M sessions" so heavy histories never look frozen.
|
|
1018
|
+
try{ const p=await res.json(); if(countEl && p && Number(p.total)>0){ countEl.textContent=`read ${Number(p.scanned||0).toLocaleString()} / ${Number(p.total).toLocaleString()} sessions`; } }catch(_){}
|
|
1019
|
+
}catch(_){ return null; }
|
|
1020
|
+
await new Promise((resolve)=>setTimeout(resolve, 500));
|
|
1021
|
+
}
|
|
1022
|
+
return null;
|
|
1023
|
+
}
|
|
1024
|
+
let signpostTokens='7.49B';
|
|
1025
|
+
let signpostHours='191.1h';
|
|
1026
|
+
let signpostCost='$13,689';
|
|
1027
|
+
let signpostWastedTime='≈162h WASTED';
|
|
1028
|
+
let signpostWastedPct='85% WASTED';
|
|
1029
|
+
let signpostWastedCost='≈$11,636 WASTED';
|
|
1030
|
+
const setupReport=await loadSetupReport();
|
|
1031
|
+
applySetupReport(setupReport);
|
|
1032
|
+
renderV7PersonaHover();
|
|
1033
|
+
|
|
1034
|
+
const renderer = new THREE.WebGLRenderer({canvas:document.getElementById('repo-visualizer'), antialias:true, alpha:true});
|
|
1035
|
+
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
1036
|
+
renderer.setSize(VIZ_W,VIZ_H,false);
|
|
1037
|
+
renderer.setClearColor(0xffffff,0); // transparent → card white shows through
|
|
1038
|
+
renderer.shadowMap.enabled=true;
|
|
1039
|
+
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
|
|
1040
|
+
renderer.outputColorSpace=THREE.SRGBColorSpace;
|
|
1041
|
+
renderer.toneMapping=THREE.ACESFilmicToneMapping; // soft highlight roll-off — stops light surfaces clipping to flat white
|
|
1042
|
+
renderer.toneMappingExposure=1.05; // master brightness for the whole city
|
|
1043
|
+
|
|
1044
|
+
const scene = new THREE.Scene();
|
|
1045
|
+
|
|
1046
|
+
// soft studio environment (image-based lighting) — gives the frosted glass its
|
|
1047
|
+
// translucent sheen + the bright internal highlight; generated once, no external HDRI.
|
|
1048
|
+
function buildEnv(){
|
|
1049
|
+
const c=document.createElement('canvas'); c.width=512; c.height=256;
|
|
1050
|
+
const g=c.getContext('2d');
|
|
1051
|
+
const grd=g.createLinearGradient(0,0,0,256);
|
|
1052
|
+
grd.addColorStop(0,'#ffffff'); grd.addColorStop(0.5,'#eef1f6'); grd.addColorStop(1,'#d2d7e0');
|
|
1053
|
+
g.fillStyle=grd; g.fillRect(0,0,512,256);
|
|
1054
|
+
const spot=g.createRadialGradient(150,62,8,150,62,150);
|
|
1055
|
+
spot.addColorStop(0,'rgba(255,255,255,0.95)'); spot.addColorStop(1,'rgba(255,255,255,0)');
|
|
1056
|
+
g.fillStyle=spot; g.fillRect(0,0,512,256);
|
|
1057
|
+
const tex=new THREE.CanvasTexture(c); tex.mapping=THREE.EquirectangularReflectionMapping; tex.colorSpace=THREE.SRGBColorSpace;
|
|
1058
|
+
const pm=new THREE.PMREMGenerator(renderer); pm.compileEquirectangularShader();
|
|
1059
|
+
const env=pm.fromEquirectangular(tex).texture; tex.dispose(); pm.dispose();
|
|
1060
|
+
return env;
|
|
1061
|
+
}
|
|
1062
|
+
scene.environment = buildEnv();
|
|
1063
|
+
|
|
1064
|
+
// real per-repo token usage (from city-data.json); x/z layout + tool colour stay hand-tuned, sizes are derived.
|
|
1065
|
+
let REPOS=[
|
|
1066
|
+
{name:'WebPageReactVersion', x:-30, z:-60, tool:'claude', pin:true, tokens:3436946364, cost:8896, days:18.6, hours:92.8, sessions:74},
|
|
1067
|
+
{name:'EchoMem-Chrome', x:140, z:-14, tool:'claude', pin:true, tokens:2863590896, cost:6959, days:14.0, hours:70.1, sessions:38},
|
|
1068
|
+
{name:'echo-design-system', x:30, z:30, tool:'codex', tokens:382642012, cost:1106, days:4.2, hours:21.2, sessions:29},
|
|
1069
|
+
{name:'sleepy-merkle-3d0470',x:90, z:88, tool:'codex', tokens:307339018, cost:651, days:0.8, hours:3.8, sessions:1},
|
|
1070
|
+
{name:'DG-Web', x:-128,z:6, tool:'claude', tokens:253239297, cost:621, days:1.4, hours:6.8, sessions:4},
|
|
1071
|
+
{name:'Kobe Life', x:182, z:80, tool:'codex', tokens:122566296, cost:336, days:1.9, hours:9.6, sessions:12},
|
|
1072
|
+
{name:'public', x:-66, z:96, tool:'claude', tokens:102828178, cost:290, days:0.4, hours:1.9, sessions:1},
|
|
1073
|
+
{name:'EchoMemory_log', x:40, z:150, tool:'claude', tokens:43937440, cost:111, days:0.4, hours:1.8, sessions:8},
|
|
1074
|
+
{name:'production-prompt', x:-188,z:64, tool:'claude', tokens:11092185, cost:19, days:0, hours:0, sessions:1},
|
|
1075
|
+
{name:'brands', x:-140,z:120, tool:'codex', tokens:8010799, cost:18, days:0, hours:0.1, sessions:1},
|
|
1076
|
+
{name:'components', x:-6, z:190, tool:'claude', tokens:7978639, cost:13, days:0, hours:0, sessions:1},
|
|
1077
|
+
{name:'dist', x:-210,z:118, tool:'claude', tokens:4550877, cost:8, days:0, hours:0, sessions:2},
|
|
1078
|
+
{name:'Daimler Engineering', x:-168,z:160, tool:'codex', tokens:4439902, cost:15, days:0, hours:0.2, sessions:2},
|
|
1079
|
+
];
|
|
1080
|
+
// per-repo codex/claude split (frozen poster values from city-data.json) → drives the stacked two-colour buildings
|
|
1081
|
+
const REPO_SPLIT={'WebPageReactVersion':[31,69],'EchoMem-Chrome':[19,81],'echo-design-system':[44,56],'sleepy-merkle-3d0470':[0,100],'DG-Web':[0,100],'Kobe Life':[100,0],'public':[0,100],'EchoMemory_log':[63,37],'production-prompt':[0,100],'brands':[0,100],'components':[0,100],'dist':[0,100],'Daimler Engineering':[100,0]};
|
|
1082
|
+
for(const o of REPOS){ const s=REPO_SPLIT[o.name]; if(s){ o.codexPct=s[0]; o.claudePct=s[1]; } else { o.codexPct=o.tool==='codex'?100:0; o.claudePct=100-o.codexPct; } }
|
|
1083
|
+
if(setupMode && setupReport){
|
|
1084
|
+
const liveRepos=buildSetupRepos(setupReport);
|
|
1085
|
+
if(liveRepos.length) REPOS=liveRepos;
|
|
1086
|
+
window.__ECHOMEM_CITY_REPORT_REPO_COUNT=Array.isArray(setupReport?.repos) ? setupReport.repos.length : -1;
|
|
1087
|
+
window.__ECHOMEM_CITY_REPOS=REPOS.map(({name,tokens,cost,hours,sessions,tool})=>({name,tokens,cost,hours,sessions,tool}));
|
|
1088
|
+
}
|
|
1089
|
+
// VOLUME ∝ tokens: units = tokens/TOKENS_PER_UNIT; volume = units·BASE_EDGE³; edge = cbrt(volume) (kept sane),
|
|
1090
|
+
// reshaped into a gentle tower (height = TOWER·base) with the volume preserved.
|
|
1091
|
+
for(const o of REPOS){
|
|
1092
|
+
const units=o.tokens/TOKENS_PER_UNIT;
|
|
1093
|
+
const base=Math.cbrt(units*BASE_EDGE*BASE_EDGE*BASE_EDGE/TOWER);
|
|
1094
|
+
o.w=base; o.d=base; o.h=base*TOWER;
|
|
1095
|
+
}
|
|
1096
|
+
const all=REPOS.filter(o=>o.tokens>=MIN_TOKENS); // drop the negligible long tail
|
|
1097
|
+
|
|
1098
|
+
const GAP=16;
|
|
1099
|
+
function separate(items, iters=400){
|
|
1100
|
+
for(let k=0;k<iters;k++){ let moved=false;
|
|
1101
|
+
for(let i=0;i<items.length;i++) for(let j=i+1;j<items.length;j++){
|
|
1102
|
+
const a=items[i], b=items[j];
|
|
1103
|
+
const hx=(a.w+b.w)/2+GAP, hz=(a.d+b.d)/2+GAP;
|
|
1104
|
+
const dx=b.x-a.x, dz=b.z-a.z;
|
|
1105
|
+
const ox=hx-Math.abs(dx), oz=hz-Math.abs(dz);
|
|
1106
|
+
if(ox>0 && oz>0){ moved=true;
|
|
1107
|
+
if(ox<oz){ const s=(dx<0?-1:1);
|
|
1108
|
+
if(a.pin&&b.pin){} else if(a.pin){ b.x+=ox*s; } else if(b.pin){ a.x-=ox*s; } else { a.x-=ox*0.5*s; b.x+=ox*0.5*s; }
|
|
1109
|
+
}else{ const s=(dz<0?-1:1);
|
|
1110
|
+
if(a.pin&&b.pin){} else if(a.pin){ b.z+=oz*s; } else if(b.pin){ a.z-=oz*s; } else { a.z-=oz*0.5*s; b.z+=oz*0.5*s; }
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
if(!moved) break;
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
separate(all);
|
|
1118
|
+
|
|
1119
|
+
let minX=1e9,maxX=-1e9,minZ=1e9,maxZ=-1e9;
|
|
1120
|
+
for(const o of all){ minX=Math.min(minX,o.x-o.w/2); maxX=Math.max(maxX,o.x+o.w/2);
|
|
1121
|
+
minZ=Math.min(minZ,o.z-o.d/2); maxZ=Math.max(maxZ,o.z+o.d/2); }
|
|
1122
|
+
const MARGIN=56;
|
|
1123
|
+
const CX=(minX+maxX)/2, CZ=(minZ+maxZ)/2;
|
|
1124
|
+
const traySize=Math.max(maxX-minX, maxZ-minZ)+2*MARGIN;
|
|
1125
|
+
const trayW=traySize, trayD=traySize; // SQUARE footprint — reads as a square, not a skewed rectangle
|
|
1126
|
+
|
|
1127
|
+
const TRAY_TOP=25; // tray slab thickness — declared early so the setup-mode auto-fit can size the city
|
|
1128
|
+
const Vh = 620; // share-card mode: zoom out for the v7 chrome
|
|
1129
|
+
const PAN_X = 0.10, PAN_Y = -0.18; // share-card mode pan: keep city clear of the diagnosis band
|
|
1130
|
+
const SETUP_PAN_Y = -0.08; // setup mode: lift the city slightly above optical center
|
|
1131
|
+
const camera = new THREE.OrthographicCamera(-1,1,1,-1, 1, 6000);
|
|
1132
|
+
const TARGET = new THREE.Vector3(CX, 78, CZ);
|
|
1133
|
+
const OFFSET = new THREE.Vector3(760, 660, 760); // symmetric 45° azimuth → clean isometric square (was skewed → looked like a trapezoid)
|
|
1134
|
+
camera.position.copy(TARGET).add(OFFSET);
|
|
1135
|
+
if(setupMode) camera.lookAt(TARGET); // setup mode only: orient before the auto-fit. Share-card path left untouched — OrbitControls sets this same angle at update().
|
|
1136
|
+
// Setup mode: frame the WHOLE city so no cube or label is ever clipped, at any viewport size or
|
|
1137
|
+
// repo count. Project the city's world bounding box into camera space and size the orthographic
|
|
1138
|
+
// window to contain it (plus padding), instead of a fixed zoom that only fits the frozen demo.
|
|
1139
|
+
const FIT_PAD = 1.16; // breathing room so cubes never touch the viewport edge
|
|
1140
|
+
function cityFit(){
|
|
1141
|
+
camera.updateMatrixWorld(true);
|
|
1142
|
+
camera.matrixWorldInverse.copy(camera.matrixWorld).invert();
|
|
1143
|
+
const inv = camera.matrixWorldInverse;
|
|
1144
|
+
const halfT = traySize / 2;
|
|
1145
|
+
const maxH = all.length ? Math.max.apply(null, all.map(function(o){ return o.h; })) : 60;
|
|
1146
|
+
const topY = TRAY_TOP + maxH + 150; // headroom for the token/$ labels that fly above each cube
|
|
1147
|
+
const xs=[CX-halfT, CX+halfT], ys=[0, topY], zs=[CZ-halfT, CZ+halfT];
|
|
1148
|
+
let minXc=1e9,maxXc=-1e9,minYc=1e9,maxYc=-1e9; const v=new THREE.Vector3();
|
|
1149
|
+
for(const x of xs) for(const y of ys) for(const z of zs){
|
|
1150
|
+
v.set(x,y,z).applyMatrix4(inv);
|
|
1151
|
+
if(v.x<minXc)minXc=v.x; if(v.x>maxXc)maxXc=v.x;
|
|
1152
|
+
if(v.y<minYc)minYc=v.y; if(v.y>maxYc)maxYc=v.y;
|
|
1153
|
+
}
|
|
1154
|
+
return {cx:(minXc+maxXc)/2, cy:(minYc+maxYc)/2, halfW:(maxXc-minXc)/2, halfH:(maxYc-minYc)/2};
|
|
1155
|
+
}
|
|
1156
|
+
function frame(){
|
|
1157
|
+
const aspect = VIZ_W/VIZ_H;
|
|
1158
|
+
if(setupMode){
|
|
1159
|
+
const f = cityFit();
|
|
1160
|
+
const half = Math.max(f.halfH, f.halfW/aspect) * FIT_PAD;
|
|
1161
|
+
const Vw = half*aspect;
|
|
1162
|
+
const cy = f.cy + half*SETUP_PAN_Y;
|
|
1163
|
+
camera.left = f.cx - Vw; camera.right = f.cx + Vw;
|
|
1164
|
+
camera.top = cy + half; camera.bottom = cy - half;
|
|
1165
|
+
camera.updateProjectionMatrix();
|
|
1166
|
+
return;
|
|
1167
|
+
}
|
|
1168
|
+
const Vw=Vh*aspect, px=Vw*PAN_X, py=Vh*PAN_Y;
|
|
1169
|
+
camera.left=-Vw-px; camera.right=Vw-px; camera.top=Vh+py; camera.bottom=-Vh+py;
|
|
1170
|
+
camera.updateProjectionMatrix();
|
|
1171
|
+
}
|
|
1172
|
+
frame();
|
|
1173
|
+
|
|
1174
|
+
scene.add(new THREE.HemisphereLight(0xffffff, 0xdadce2, 0.7));
|
|
1175
|
+
scene.add(new THREE.AmbientLight(0xffffff, 0.2));
|
|
1176
|
+
const key = new THREE.DirectionalLight(0xffffff, 2.3);
|
|
1177
|
+
key.position.set(CX-360, 560, CZ+360); key.target.position.copy(TARGET);
|
|
1178
|
+
key.castShadow=true; key.shadow.mapSize.set(4096,4096); key.shadow.radius=16; key.shadow.bias=-0.0004;
|
|
1179
|
+
const shalf=Math.max(trayW,trayD)*0.8+140; const sc=key.shadow.camera;
|
|
1180
|
+
sc.left=-shalf; sc.right=shalf; sc.top=shalf; sc.bottom=-shalf; sc.near=100; sc.far=1800;
|
|
1181
|
+
key.shadow.autoUpdate=false; key.shadow.needsUpdate=true;
|
|
1182
|
+
scene.add(key); scene.add(key.target);
|
|
1183
|
+
const fill = new THREE.DirectionalLight(0xffffff, 0.4); fill.position.set(CX+420, 300, CZ+260); scene.add(fill);
|
|
1184
|
+
|
|
1185
|
+
const floor = new THREE.Mesh(new THREE.PlaneGeometry(6000,6000), new THREE.ShadowMaterial({opacity:0.22}));
|
|
1186
|
+
floor.rotation.x=-Math.PI/2; floor.position.y=0; floor.receiveShadow=true; scene.add(floor);
|
|
1187
|
+
|
|
1188
|
+
// frosted clay-glass: colour comes from inside the volume (attenuation), not a flat surface
|
|
1189
|
+
function clayGlass(hex){
|
|
1190
|
+
const c=new THREE.Color(hex);
|
|
1191
|
+
return new THREE.MeshPhysicalMaterial({
|
|
1192
|
+
color:c,
|
|
1193
|
+
roughness:0.42, metalness:0.0,
|
|
1194
|
+
transmission:0.85, ior:1.34, thickness:70,
|
|
1195
|
+
attenuationColor:c.clone(), attenuationDistance:95,
|
|
1196
|
+
clearcoat:0.28, clearcoatRoughness:0.45,
|
|
1197
|
+
envMapIntensity:1.05, transparent:true,
|
|
1198
|
+
});
|
|
1199
|
+
}
|
|
1200
|
+
function selectiveRoundedBoxGeometry(width, height, depth, segments=8, radius=0.1, opts={}){
|
|
1201
|
+
const roundTop=opts.roundTop!==false, roundBottom=opts.roundBottom!==false;
|
|
1202
|
+
const s=segments*2+1;
|
|
1203
|
+
const r=Math.min(width/2, height/2, depth/2, radius);
|
|
1204
|
+
const base=new THREE.BoxGeometry(1,1,1,s,s,s);
|
|
1205
|
+
const geo=base.toNonIndexed(); base.dispose();
|
|
1206
|
+
const positions=geo.attributes.position.array;
|
|
1207
|
+
const normals=geo.attributes.normal.array;
|
|
1208
|
+
const pos=new THREE.Vector3();
|
|
1209
|
+
const n=new THREE.Vector3();
|
|
1210
|
+
const faceSpan=positions.length/6;
|
|
1211
|
+
const halfStep=0.5/s;
|
|
1212
|
+
const bx=width/2-r, by=height/2-r, bz=depth/2-r;
|
|
1213
|
+
for(let i=0;i<positions.length;i+=3){
|
|
1214
|
+
pos.fromArray(positions,i);
|
|
1215
|
+
const sx=Math.sign(pos.x)||1, sy=Math.sign(pos.y)||1, sz=Math.sign(pos.z)||1;
|
|
1216
|
+
const side=Math.floor(i/faceSpan);
|
|
1217
|
+
const roundY=sy>0 ? roundTop : roundBottom;
|
|
1218
|
+
n.copy(pos);
|
|
1219
|
+
n.x-=sx*halfStep;
|
|
1220
|
+
n.z-=sz*halfStep;
|
|
1221
|
+
if(roundY) n.y-=sy*halfStep; else n.y=0;
|
|
1222
|
+
if(n.lengthSq()>0) n.normalize();
|
|
1223
|
+
positions[i]=bx*sx+n.x*r;
|
|
1224
|
+
positions[i+1]=roundY ? by*sy+n.y*r : height/2*sy;
|
|
1225
|
+
positions[i+2]=bz*sz+n.z*r;
|
|
1226
|
+
if(!roundY && (side===2 || side===3)){
|
|
1227
|
+
normals[i]=0; normals[i+1]=sy; normals[i+2]=0;
|
|
1228
|
+
}else{
|
|
1229
|
+
normals[i]=n.x; normals[i+1]=n.y; normals[i+2]=n.z;
|
|
1230
|
+
}
|
|
1231
|
+
}
|
|
1232
|
+
geo.attributes.position.needsUpdate=true;
|
|
1233
|
+
geo.attributes.normal.needsUpdate=true;
|
|
1234
|
+
geo.computeBoundingBox();
|
|
1235
|
+
geo.computeBoundingSphere();
|
|
1236
|
+
return geo;
|
|
1237
|
+
}
|
|
1238
|
+
function addCube(o){
|
|
1239
|
+
const {x,z,w,h,d,tool}=o;
|
|
1240
|
+
const r=Math.min(Math.min(w,h,d)*0.12, 12);
|
|
1241
|
+
// proportional split: Claude (orange) on the bottom, Codex (green) on top; segment heights ∝ each tool's token share
|
|
1242
|
+
let cl=Number(o.claudePct), cx=Number(o.codexPct);
|
|
1243
|
+
if(!(cl>=0 && cx>=0 && cl+cx>0)){ cl=tool==='codex'?0:100; cx=100-cl; } // fallback to the dominant tool
|
|
1244
|
+
const total=cl+cx, segs=[];
|
|
1245
|
+
if(cl>0) segs.push([h*cl/total, TOOL.claude]);
|
|
1246
|
+
if(cx>0) segs.push([h*cx/total, TOOL.codex]);
|
|
1247
|
+
const group=new THREE.Group();
|
|
1248
|
+
let yBase=TRAY_TOP - 3;
|
|
1249
|
+
const mixed=segs.length>1;
|
|
1250
|
+
for(let i=0;i<segs.length;i++){
|
|
1251
|
+
const [hSeg, color] = segs[i];
|
|
1252
|
+
const mat=clayGlass(color);
|
|
1253
|
+
const geom=mixed
|
|
1254
|
+
? selectiveRoundedBoxGeometry(w,hSeg,d,8,Math.min(r,hSeg*0.45), {roundBottom:i===0, roundTop:i===segs.length-1})
|
|
1255
|
+
: new RoundedBoxGeometry(w,hSeg,d,8,Math.min(r,hSeg*0.45));
|
|
1256
|
+
const m=new THREE.Mesh(geom, mat);
|
|
1257
|
+
m.position.set(x, yBase + hSeg/2, z);
|
|
1258
|
+
m.castShadow=true; m.receiveShadow=true; m.userData=o;
|
|
1259
|
+
group.add(m);
|
|
1260
|
+
yBase+=hSeg;
|
|
1261
|
+
}
|
|
1262
|
+
group.userData=o; scene.add(group); return group;
|
|
1263
|
+
}
|
|
1264
|
+
// repo summary as an upright billboard above each bar — white text, ALWAYS faces the camera (never skewed).
|
|
1265
|
+
// name = small tag just above the bar top; the chosen metric (time / tokens / $) sits just above it.
|
|
1266
|
+
let cityMetric = setupMode ? 'time' : 'tokens'; // which number the city shows; toggled by the city control
|
|
1267
|
+
const repoLabels=[]; // {o,cv,g,tex,PW,PH} so every label can be redrawn on toggle
|
|
1268
|
+
function fmtMetric(hours, tokens, cost){
|
|
1269
|
+
if(cityMetric==='tokens') return fmtTok(tokens);
|
|
1270
|
+
if(cityMetric==='cost') return '$'+Math.round(cost).toLocaleString('en-US');
|
|
1271
|
+
return `${(Number(hours)||0).toFixed(1)}h`; // time (default)
|
|
1272
|
+
}
|
|
1273
|
+
function repoMetricText(o){ return fmtMetric(Number(o.hours)||0, Number(o.tokens)||0, (Number(o.cost)||0)*(setupMode?1:COST_SCALE)); }
|
|
1274
|
+
// the same metric scaled to a point in time (ratio = cumulative tokens / total) — used by the timeline scrubber
|
|
1275
|
+
function repoMetricTextAt(o, ratio){ return fmtMetric((Number(o.hours)||0)*ratio, (Number(o.tokens)||0)*ratio, (Number(o.cost)||0)*(setupMode?1:COST_SCALE)*ratio); }
|
|
1276
|
+
function drawRepoLabel(e, valueText){
|
|
1277
|
+
const {o, cv, g, tex, PW, PH}=e;
|
|
1278
|
+
g.clearRect(0,0,PW,PH);
|
|
1279
|
+
g.textAlign='center';
|
|
1280
|
+
g.shadowColor='rgba(0,0,0,0.34)'; g.shadowBlur=9; g.shadowOffsetY=1; // subtle contrast over light areas
|
|
1281
|
+
// the metric — the headline, sits just above the name tag
|
|
1282
|
+
g.fillStyle='#ffffff'; g.font=`800 ${Math.round(PW*0.19)}px "IBM Plex Mono", monospace`;
|
|
1283
|
+
g.fillText(valueText!=null?valueText:repoMetricText(o), PW/2, PH*0.66);
|
|
1284
|
+
// name — small tag sitting just above the bar top
|
|
1285
|
+
g.fillStyle='rgba(255,255,255,0.95)'; g.font=`600 ${Math.round(PW*0.075)}px "IBM Plex Mono", monospace`;
|
|
1286
|
+
const fw=g.measureText(o.name).width, maxw=PW*0.94;
|
|
1287
|
+
g.save(); g.translate(PW/2, PH*0.86); if(fw>maxw){ const s=maxw/fw; g.scale(s,s); } g.fillText(o.name, 0, 0); g.restore();
|
|
1288
|
+
tex.needsUpdate=true;
|
|
1289
|
+
}
|
|
1290
|
+
function addTopLabel(o){
|
|
1291
|
+
const PW=320, PH=280;
|
|
1292
|
+
const cv=document.createElement('canvas'); cv.width=PW; cv.height=PH;
|
|
1293
|
+
const g=cv.getContext('2d');
|
|
1294
|
+
const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
|
|
1295
|
+
const sprite=new THREE.Sprite(new THREE.SpriteMaterial({map:tex, transparent:true, toneMapped:false, depthWrite:false}));
|
|
1296
|
+
const wWorld=Math.min(Math.max(o.w*0.95, 42), 128), hWorld=wWorld*PH/PW; // scales with bar size, clamped legible
|
|
1297
|
+
sprite.scale.set(wWorld, hWorld, 1);
|
|
1298
|
+
sprite.position.set(o.x, TRAY_TOP + o.h - 3 + 6 + 0.36*hWorld, o.z); // name tags the top; metric flies higher
|
|
1299
|
+
scene.add(sprite);
|
|
1300
|
+
const e={o, cv, g, tex, PW, PH, sprite, hWorld};
|
|
1301
|
+
repoLabels.push(e);
|
|
1302
|
+
drawRepoLabel(e);
|
|
1303
|
+
}
|
|
1304
|
+
// fine ivory grain — textures EVERY face (incl. the curved side walls), so the tray isn't flat plastic
|
|
1305
|
+
const grain=(function(){
|
|
1306
|
+
const S=256; const cv=document.createElement('canvas'); cv.width=cv.height=S;
|
|
1307
|
+
const g=cv.getContext('2d'); const img=g.createImageData(S,S); const d=img.data;
|
|
1308
|
+
for(let i=0;i<d.length;i+=4){ const n=128+(Math.random()*2-1)*38; d[i]=d[i+1]=d[i+2]=n; d[i+3]=255; }
|
|
1309
|
+
g.putImageData(img,0,0);
|
|
1310
|
+
const t=new THREE.CanvasTexture(cv); t.wrapS=t.wrapT=THREE.RepeatWrapping; t.anisotropy=8;
|
|
1311
|
+
t.generateMipmaps=false; t.minFilter=THREE.LinearFilter; // don't let the grain mip-blur away to flat
|
|
1312
|
+
t.repeat.set(trayW/70, trayD/70);
|
|
1313
|
+
return t;
|
|
1314
|
+
})();
|
|
1315
|
+
const trayGeo=new RoundedBoxGeometry(trayW, TRAY_TOP, trayD, 8, 12);
|
|
1316
|
+
const tray=new THREE.Mesh(trayGeo, new THREE.MeshPhysicalMaterial({
|
|
1317
|
+
color:TRAY_COL, roughness:0.6, metalness:0.0,
|
|
1318
|
+
clearcoat:0.3, clearcoatRoughness:0.5, envMapIntensity:0.6,
|
|
1319
|
+
bumpMap:grain, bumpScale:0.4,
|
|
1320
|
+
}));
|
|
1321
|
+
tray.position.set(CX, TRAY_TOP/2, CZ); tray.castShadow=true; tray.receiveShadow=true; scene.add(tray);
|
|
1322
|
+
// grid + perimeter border on ONE decal: the grid is CLIPPED to the border's rounded rect, so
|
|
1323
|
+
// every line runs right up to the border and stops — no gap, and nothing leaks past it onto the rim.
|
|
1324
|
+
(function(){
|
|
1325
|
+
const scale=3;
|
|
1326
|
+
const W=Math.round(trayW*scale), H=Math.round(trayD*scale);
|
|
1327
|
+
const cv=document.createElement('canvas'); cv.width=W; cv.height=H;
|
|
1328
|
+
const g=cv.getContext('2d');
|
|
1329
|
+
const m=14*scale, rad=26*scale, rw=W-2*m, rh=H-2*m; // border rounded-rect (inset 14, radius 26)
|
|
1330
|
+
// grid, clipped to the border shape → fills exactly inside, ending at the border line
|
|
1331
|
+
g.save();
|
|
1332
|
+
g.beginPath(); g.roundRect(m, m, rw, rh, rad); g.clip();
|
|
1333
|
+
const cell=21*scale; // half the previous cell size
|
|
1334
|
+
g.strokeStyle='rgba(74,80,96,0.45)'; g.lineWidth=1.8;
|
|
1335
|
+
g.beginPath();
|
|
1336
|
+
for(let x=m; x<=m+rw+0.5; x+=cell){ g.moveTo(x,m); g.lineTo(x,m+rh); }
|
|
1337
|
+
for(let y=m; y<=m+rh+0.5; y+=cell){ g.moveTo(m,y); g.lineTo(m+rw,y); }
|
|
1338
|
+
g.stroke();
|
|
1339
|
+
g.restore();
|
|
1340
|
+
// the border line itself, sitting on the boundary the grid ends at
|
|
1341
|
+
g.strokeStyle='rgba(120,126,140,0.24)'; g.lineWidth=0.7*scale; g.lineJoin='round';
|
|
1342
|
+
g.beginPath(); g.roundRect(m, m, rw, rh, rad); g.stroke();
|
|
1343
|
+
const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
|
|
1344
|
+
const plane=new THREE.Mesh(new THREE.PlaneGeometry(trayW, trayD), new THREE.MeshBasicMaterial({map:tex, transparent:true, depthWrite:false, toneMapped:false}));
|
|
1345
|
+
plane.rotation.x=-Math.PI/2; plane.position.set(CX, TRAY_TOP+0.6, CZ); scene.add(plane);
|
|
1346
|
+
})();
|
|
1347
|
+
|
|
1348
|
+
all.forEach(o=>{ o.mesh=addCube(o); o.mesh.userData=o; if(o.w>=LABEL_MIN_BASE) addTopLabel(o); });
|
|
1349
|
+
|
|
1350
|
+
// bottom-right standing "signpost": tray summary — total tokens + how much is input
|
|
1351
|
+
let signpostCanvas=null, signpostTexture=null, signpostMesh=null;
|
|
1352
|
+
function drawSignpost(bigText, subLabel, bottomText, accent='#e8473f'){
|
|
1353
|
+
if(!signpostCanvas) return;
|
|
1354
|
+
const W=signpostCanvas.width, H=signpostCanvas.height;
|
|
1355
|
+
const g=signpostCanvas.getContext('2d');
|
|
1356
|
+
g.clearRect(0,0,W,H);
|
|
1357
|
+
g.fillStyle='rgba(244,241,233,0.97)'; g.beginPath(); g.roundRect(8,8,W-16,H-16,30); g.fill();
|
|
1358
|
+
g.strokeStyle='rgba(120,126,140,0.30)'; g.lineWidth=3; g.beginPath(); g.roundRect(8,8,W-16,H-16,30); g.stroke();
|
|
1359
|
+
g.textAlign='center';
|
|
1360
|
+
g.fillStyle='#1a1a1a'; g.font='800 124px "IBM Plex Mono", monospace'; g.fillText(bigText, W/2, 150);
|
|
1361
|
+
g.fillStyle='#6b6b6b'; g.font='600 36px "IBM Plex Mono", monospace'; g.fillText(subLabel, W/2, 204);
|
|
1362
|
+
g.fillStyle=accent; g.font='800 62px "IBM Plex Mono", monospace'; g.fillText(bottomText, W/2, 280);
|
|
1363
|
+
if(signpostTexture) signpostTexture.needsUpdate=true;
|
|
1364
|
+
}
|
|
1365
|
+
// the signpost headline + sublabel follow the same city metric as the cube labels
|
|
1366
|
+
function signpostBig(){ return cityMetric==='tokens'?signpostTokens : cityMetric==='cost'?signpostCost : signpostHours; }
|
|
1367
|
+
function signpostSub(){ return cityMetric==='tokens'?'TOTAL TOKENS' : cityMetric==='cost'?'TOTAL SPENT' : 'TOTAL TIME'; }
|
|
1368
|
+
function signpostBottom(){ return cityMetric==='tokens'?signpostWastedPct : cityMetric==='cost'?signpostWastedCost : signpostWastedTime; }
|
|
1369
|
+
function redrawCityMetric(){
|
|
1370
|
+
for(const e of repoLabels) drawRepoLabel(e);
|
|
1371
|
+
drawSignpost(signpostBig(), signpostSub(), signpostBottom());
|
|
1372
|
+
dirty=true;
|
|
1373
|
+
}
|
|
1374
|
+
// animated metric switch: dip the labels + signpost to 0, swap the numbers at the bottom, fade back up
|
|
1375
|
+
let animId=0;
|
|
1376
|
+
function setCityMetric(m){
|
|
1377
|
+
if(m===cityMetric) return;
|
|
1378
|
+
const id=++animId;
|
|
1379
|
+
const items=repoLabels.map((e)=>e.sprite).filter(Boolean);
|
|
1380
|
+
if(signpostMesh) items.push(signpostMesh);
|
|
1381
|
+
const dur=420, start=performance.now();
|
|
1382
|
+
let swapped=false;
|
|
1383
|
+
function step(now){
|
|
1384
|
+
if(id!==animId) return; // a newer switch superseded this one
|
|
1385
|
+
const t=Math.min(1, (now-start)/dur);
|
|
1386
|
+
const o = t<0.5 ? 1-t/0.5 : (t-0.5)/0.5; // opacity dips to 0 at the midpoint, back to 1
|
|
1387
|
+
const eased = o*o*(3-2*o); // smoothstep
|
|
1388
|
+
items.forEach((s)=>{ if(s.material) s.material.opacity=eased; });
|
|
1389
|
+
if(!swapped && t>=0.5){ swapped=true; cityMetric=m; redrawCityMetric(); }
|
|
1390
|
+
dirty=true;
|
|
1391
|
+
if(t<1) requestAnimationFrame(step);
|
|
1392
|
+
}
|
|
1393
|
+
requestAnimationFrame(step);
|
|
1394
|
+
}
|
|
1395
|
+
(function(){
|
|
1396
|
+
const W=640, H=320;
|
|
1397
|
+
const cv=document.createElement('canvas'); cv.width=W; cv.height=H;
|
|
1398
|
+
signpostCanvas=cv;
|
|
1399
|
+
const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
|
|
1400
|
+
signpostTexture=tex;
|
|
1401
|
+
drawSignpost(signpostBig(), signpostSub(), signpostBottom());
|
|
1402
|
+
const SIGN_W=152, SIGN_H=76, SIGN_Y=TRAY_TOP+64;
|
|
1403
|
+
const sign=new THREE.Mesh(
|
|
1404
|
+
new THREE.PlaneGeometry(SIGN_W, SIGN_H),
|
|
1405
|
+
new THREE.MeshBasicMaterial({map:tex, transparent:true, toneMapped:false, depthWrite:false, side:THREE.DoubleSide})
|
|
1406
|
+
);
|
|
1407
|
+
const sx=CX + trayW*0.48, sz=CZ + trayD*0.48;
|
|
1408
|
+
sign.position.set(sx, SIGN_Y, sz);
|
|
1409
|
+
sign.rotation.y=Math.PI/4; // fixed in the city, facing the default isometric camera instead of billboarding
|
|
1410
|
+
scene.add(sign);
|
|
1411
|
+
signpostMesh=sign;
|
|
1412
|
+
const POST_OVERLAP=4; // tiny tuck into the board so the pole feels attached, not floating
|
|
1413
|
+
const postH=Math.max(4, SIGN_Y - SIGN_H/2 - TRAY_TOP + POST_OVERLAP);
|
|
1414
|
+
const post=new THREE.Mesh(new THREE.CylinderGeometry(2.2,2.2,postH,12),
|
|
1415
|
+
new THREE.MeshStandardMaterial({color:0xddd9cc, roughness:0.7, metalness:0}));
|
|
1416
|
+
post.position.set(sx, TRAY_TOP+postH/2, sz); post.castShadow=true; scene.add(post);
|
|
1417
|
+
})();
|
|
1418
|
+
|
|
1419
|
+
// city metric toggle: sliding pill + animated metric swap on the city
|
|
1420
|
+
(function(){
|
|
1421
|
+
const ct=document.getElementById('city-toggle');
|
|
1422
|
+
if(!ct) return;
|
|
1423
|
+
const thumb=ct.querySelector('.ct-thumb');
|
|
1424
|
+
const moveThumb=(btn)=>{ if(!thumb||!btn) return;
|
|
1425
|
+
thumb.style.width=btn.offsetWidth+'px'; thumb.style.height=btn.offsetHeight+'px';
|
|
1426
|
+
thumb.style.transform=`translate(${btn.offsetLeft}px, ${btn.offsetTop}px)`; };
|
|
1427
|
+
// place the pill under the default button without animating in
|
|
1428
|
+
requestAnimationFrame(()=>{
|
|
1429
|
+
const on=ct.querySelector('button.on')||ct.querySelector('button[data-metric]');
|
|
1430
|
+
if(thumb) thumb.style.transition='none';
|
|
1431
|
+
moveThumb(on);
|
|
1432
|
+
requestAnimationFrame(()=>{ if(thumb) thumb.style.transition=''; });
|
|
1433
|
+
});
|
|
1434
|
+
ct.addEventListener('click', (e)=>{
|
|
1435
|
+
const b=e.target.closest('button[data-metric]'); if(!b) return;
|
|
1436
|
+
ct.querySelectorAll('button').forEach((x)=>x.classList.toggle('on', x===b));
|
|
1437
|
+
moveThumb(b);
|
|
1438
|
+
setCityMetric(b.getAttribute('data-metric'));
|
|
1439
|
+
});
|
|
1440
|
+
})();
|
|
1441
|
+
|
|
1442
|
+
// ===== timeline scrubber: drag the handle to grow the city from the first session to today =====
|
|
1443
|
+
(function(){
|
|
1444
|
+
const tl=document.getElementById('city-timeline');
|
|
1445
|
+
const track=document.getElementById('tl-track');
|
|
1446
|
+
const handle=document.getElementById('tl-handle');
|
|
1447
|
+
const bubble=document.getElementById('tl-bubble');
|
|
1448
|
+
if(!tl||!track||!handle) return;
|
|
1449
|
+
const parseDay=(s)=>{ if(!s) return null; const d=new Date(s); return Number.isNaN(d.getTime())?null:d.getTime(); };
|
|
1450
|
+
let axisStart=parseDay(setupReport&&setupReport.scanStartDate);
|
|
1451
|
+
let axisEnd=parseDay(setupReport&&setupReport.scanEndDate);
|
|
1452
|
+
if(axisStart==null||axisEnd==null||axisEnd<=axisStart){ axisEnd=Date.parse(new Date().toISOString().slice(0,10)); axisStart=axisEnd-240*864e5; }
|
|
1453
|
+
const span=Math.max(1, axisEnd-axisStart);
|
|
1454
|
+
// per-cube cumulative model: prefix-sum of the daily series; fallback = staggered linear growth (demo / missing data)
|
|
1455
|
+
const cubes=all.map((o,i)=>{
|
|
1456
|
+
const total=Number(o.tokens)||0;
|
|
1457
|
+
let cum=null;
|
|
1458
|
+
if(Array.isArray(o.daily)&&o.daily.length){
|
|
1459
|
+
const rows=o.daily.map((p)=>[parseDay(p[0]), Number(p[1])||0]).filter((r)=>r[0]!=null).sort((a,b)=>a[0]-b[0]);
|
|
1460
|
+
let s=0; cum=rows.map((r)=>{ s+=r[1]; return [r[0], s]; });
|
|
1461
|
+
}
|
|
1462
|
+
return {o, i, total, cum};
|
|
1463
|
+
});
|
|
1464
|
+
const fallbackStart=(i)=>(i*0.137)%0.66; // each repo "appears" at a staggered point along the span
|
|
1465
|
+
function ratioAt(c, t){
|
|
1466
|
+
if(c.total<=0) return 0;
|
|
1467
|
+
if(!c.cum){ const f=(t-axisStart)/span, st=fallbackStart(c.i); return Math.max(0, Math.min(1,(f-st)/(1-st))); }
|
|
1468
|
+
let lo=0, hi=c.cum.length-1, idx=-1;
|
|
1469
|
+
while(lo<=hi){ const mid=(lo+hi)>>1; if(c.cum[mid][0]<=t){ idx=mid; lo=mid+1; } else hi=mid-1; }
|
|
1470
|
+
let cumTok;
|
|
1471
|
+
if(idx<0){ cumTok=0; } // before the repo's first active day → not built yet
|
|
1472
|
+
else {
|
|
1473
|
+
const cur=c.cum[idx], nxt=c.cum[idx+1];
|
|
1474
|
+
if(!nxt){ cumTok=cur[1]; } // at/after the last recorded day → final size
|
|
1475
|
+
else { // interpolate cumulative across the gap → buildings grow smoothly, not in steps
|
|
1476
|
+
const f=Math.max(0, Math.min(1, (t-cur[0])/Math.max(1, nxt[0]-cur[0])));
|
|
1477
|
+
cumTok=cur[1]+(nxt[1]-cur[1])*f;
|
|
1478
|
+
}
|
|
1479
|
+
}
|
|
1480
|
+
return Math.max(0, Math.min(1, cumTok/c.total));
|
|
1481
|
+
}
|
|
1482
|
+
const fmtDate=(t)=>new Date(t).toLocaleString('en-US',{month:'short', day:'numeric', year:'numeric', timeZone:'UTC'});
|
|
1483
|
+
const labelByO=new Map(repoLabels.map((e)=>[e.o, e]));
|
|
1484
|
+
// drop the shadow map to a cheap resolution while scrubbing (re-renders ~16× cheaper at 49-repo scale), crisp on release
|
|
1485
|
+
function setShadowRes(n){ key.shadow.mapSize.set(n,n); if(key.shadow.map){ key.shadow.map.dispose(); key.shadow.map=null; } key.shadow.needsUpdate=true; }
|
|
1486
|
+
const labelY=(le, s)=> TRAY_TOP + s*((Number(le.o.h)||0)-3) + 6 + 0.36*le.hWorld; // label tracks the scaled cube top
|
|
1487
|
+
let lastDayKey=null, lastTextT=-1;
|
|
1488
|
+
function applyAt(frac){
|
|
1489
|
+
const atToday = frac>=0.999;
|
|
1490
|
+
const t=axisStart + frac*span;
|
|
1491
|
+
const now=performance.now();
|
|
1492
|
+
const redrawText = atToday || (now - lastTextT > 100); // throttle label canvas + shadow redraws to ~10fps (cube scaling stays 60fps)
|
|
1493
|
+
if(redrawText){ lastTextT=now; key.shadow.needsUpdate=true; } // re-render the shadow map so shadows grow with the buildings
|
|
1494
|
+
let cumH=0, cumTok=0, cumCost=0;
|
|
1495
|
+
for(const c of cubes){
|
|
1496
|
+
const r = atToday ? 1 : ratioAt(c, t);
|
|
1497
|
+
cumH += (Number(c.o.hours)||0)*r;
|
|
1498
|
+
cumTok += (Number(c.o.tokens)||0)*r;
|
|
1499
|
+
cumCost += (Number(c.o.cost)||0)*(setupMode?1:COST_SCALE)*r;
|
|
1500
|
+
const grp=c.o.mesh, le=labelByO.get(c.o);
|
|
1501
|
+
if(!grp) continue;
|
|
1502
|
+
if(r<=0.0008){ grp.visible=false; if(le&&le.sprite) le.sprite.visible=false; continue; }
|
|
1503
|
+
grp.visible=true;
|
|
1504
|
+
const s=Math.cbrt(r);
|
|
1505
|
+
grp.scale.set(s,s,s);
|
|
1506
|
+
grp.position.set(c.o.x*(1-s), TRAY_TOP*(1-s), c.o.z*(1-s)); // scale about each cube's base, so it rises in place
|
|
1507
|
+
if(le&&le.sprite){ le.sprite.visible=true; le.sprite.position.y=labelY(le, s); if(redrawText) drawRepoLabel(le, repoMetricTextAt(c.o, r)); }
|
|
1508
|
+
}
|
|
1509
|
+
const dayKey=new Date(t).toISOString().slice(0,10);
|
|
1510
|
+
if(redrawText || dayKey!==lastDayKey){ lastDayKey=dayKey; drawSignpost(fmtMetric(cumH,cumTok,cumCost), signpostSub(), fmtDate(t).toUpperCase()); }
|
|
1511
|
+
if(bubble) bubble.textContent=fmtDate(t);
|
|
1512
|
+
dirty=true;
|
|
1513
|
+
}
|
|
1514
|
+
function restore(){
|
|
1515
|
+
for(const c of cubes){
|
|
1516
|
+
const grp=c.o.mesh; if(grp){ grp.visible=true; grp.scale.set(1,1,1); grp.position.set(0,0,0); }
|
|
1517
|
+
const le=labelByO.get(c.o); if(le&&le.sprite){ le.sprite.visible=true; le.sprite.position.y=labelY(le, 1); drawRepoLabel(le); }
|
|
1518
|
+
}
|
|
1519
|
+
drawSignpost(signpostBig(), signpostSub(), signpostBottom());
|
|
1520
|
+
setShadowRes(4096); // settle crisp shadows on the full-size city
|
|
1521
|
+
dirty=true;
|
|
1522
|
+
}
|
|
1523
|
+
const fracFromX=(clientX)=>{ const r=track.getBoundingClientRect(); return Math.max(0, Math.min(1,(clientX-r.left)/Math.max(1,r.width))); };
|
|
1524
|
+
const setHandle=(frac)=>{ handle.style.left=(frac*100)+'%'; };
|
|
1525
|
+
let dragging=false;
|
|
1526
|
+
function onMove(e){ if(!dragging) return; const f=fracFromX(e.clientX); setHandle(f); applyAt(f); }
|
|
1527
|
+
function onUp(){
|
|
1528
|
+
if(!dragging) return; dragging=false; tl.classList.remove('dragging');
|
|
1529
|
+
window.removeEventListener('pointermove',onMove); window.removeEventListener('pointerup',onUp);
|
|
1530
|
+
const from=Math.max(0, Math.min(1,(parseFloat(handle.style.left)||100)/100)); // spring back to today
|
|
1531
|
+
const start=performance.now(), dur=480;
|
|
1532
|
+
(function back(now){
|
|
1533
|
+
const t=Math.min(1,(now-start)/dur), e=1-Math.pow(1-t,3);
|
|
1534
|
+
const f=from+(1-from)*e; setHandle(f); applyAt(f);
|
|
1535
|
+
if(t<1) requestAnimationFrame(back); else { setHandle(1); restore(); }
|
|
1536
|
+
})(performance.now());
|
|
1537
|
+
}
|
|
1538
|
+
track.addEventListener('pointerdown', (e)=>{
|
|
1539
|
+
dragging=true; tl.classList.add('dragging'); lastDayKey=null; lastTextT=-1; setShadowRes(1024);
|
|
1540
|
+
const f=fracFromX(e.clientX); setHandle(f); applyAt(f);
|
|
1541
|
+
window.addEventListener('pointermove',onMove); window.addEventListener('pointerup',onUp);
|
|
1542
|
+
e.preventDefault();
|
|
1543
|
+
});
|
|
1544
|
+
})();
|
|
1545
|
+
|
|
1546
|
+
const MINZ=0.4, MAXZ=2.8; // lower floor → can zoom out to ~2/3 of the previous limit
|
|
1547
|
+
const controls=new OrbitControls(camera, renderer.domElement);
|
|
1548
|
+
controls.target.copy(TARGET);
|
|
1549
|
+
controls.enableDamping=true; controls.dampingFactor=0.08; controls.enablePan=false; controls.enableZoom=false;
|
|
1550
|
+
controls.minPolarAngle=0.18; controls.maxPolarAngle=Math.PI*0.47; controls.rotateSpeed=0.85;
|
|
1551
|
+
controls.update();
|
|
1552
|
+
let targetZoom=camera.zoom;
|
|
1553
|
+
renderer.domElement.addEventListener('wheel', (e)=>{
|
|
1554
|
+
e.preventDefault();
|
|
1555
|
+
const dy=e.deltaY * (e.deltaMode===1 ? 16 : 1);
|
|
1556
|
+
targetZoom=Math.min(MAXZ, Math.max(MINZ, targetZoom * Math.pow(0.999, dy)));
|
|
1557
|
+
}, {passive:false});
|
|
1558
|
+
|
|
1559
|
+
let dirty=true;
|
|
1560
|
+
function render(){ renderer.render(scene,camera); }
|
|
1561
|
+
function loop(){ requestAnimationFrame(loop); let need=controls.update();
|
|
1562
|
+
if(Math.abs(targetZoom-camera.zoom) > 0.0006){ camera.zoom += (targetZoom-camera.zoom)*0.16; if(Math.abs(targetZoom-camera.zoom)<0.001) camera.zoom=targetZoom; camera.updateProjectionMatrix(); need=true; }
|
|
1563
|
+
if(need||dirty){ render(); dirty=false; }
|
|
1564
|
+
}
|
|
1565
|
+
loop();
|
|
1566
|
+
|
|
1567
|
+
// ---- scale the whole card to fill the viewport, keeping the visualizer crisp ----
|
|
1568
|
+
const cardEl=document.querySelector('.share-card');
|
|
1569
|
+
function fit(){
|
|
1570
|
+
if(setupMode){
|
|
1571
|
+
VIZ_W=Math.round(window.innerWidth - Math.min(window.innerWidth*0.4, 620)); VIZ_H=window.innerHeight; // city = viewport minus capped report panel
|
|
1572
|
+
cardEl.style.transform='none';
|
|
1573
|
+
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
1574
|
+
renderer.setSize(VIZ_W,VIZ_H,false);
|
|
1575
|
+
frame();
|
|
1576
|
+
dirty=true;
|
|
1577
|
+
return;
|
|
1578
|
+
}
|
|
1579
|
+
const contain=Math.min((window.innerWidth-28)/920, (window.innerHeight-28)/1180);
|
|
1580
|
+
const s=contain;
|
|
1581
|
+
cardEl.style.transform=`scale(${s})`;
|
|
1582
|
+
renderer.setPixelRatio(Math.min(Math.max(window.devicePixelRatio*s, 1), 3)); // match displayed res
|
|
1583
|
+
renderer.setSize(VIZ_W,VIZ_H,false);
|
|
1584
|
+
dirty=true;
|
|
1585
|
+
}
|
|
1586
|
+
fit();
|
|
1587
|
+
window.addEventListener('resize', fit);
|
|
1588
|
+
|
|
1589
|
+
// Loading lives inside the report: once the city has rendered + framed, fade the scan loader out and
|
|
1590
|
+
// the city + real chrome in together (one surface, smooth). Runs unconditionally so it never sticks.
|
|
1591
|
+
function finishSetupReveal(){
|
|
1592
|
+
document.body.classList.remove('scanning');
|
|
1593
|
+
}
|
|
1594
|
+
if(setupMode){
|
|
1595
|
+
requestAnimationFrame(()=>requestAnimationFrame(finishSetupReveal));
|
|
1596
|
+
window.setTimeout(finishSetupReveal, 1200);
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
// field-report persona breakdown: click to toggle (no hover); catalog items reveal their blurb on hover
|
|
1600
|
+
(function(){
|
|
1601
|
+
const btn=document.getElementById('fr-read-btn');
|
|
1602
|
+
const panel=document.getElementById('fr-persona-hover');
|
|
1603
|
+
if(!btn || !panel) return;
|
|
1604
|
+
const tip=document.createElement('div'); tip.className='fr-catTip';
|
|
1605
|
+
tip.innerHTML='<img class="ct-img" alt=""><div class="ct-body"><span class="tl"></span><span class="bd"></span></div>';
|
|
1606
|
+
document.body.appendChild(tip);
|
|
1607
|
+
const hideTip=()=>tip.classList.remove('show');
|
|
1608
|
+
const showTip=(el)=>{
|
|
1609
|
+
const blurb=el.getAttribute('data-blurb'); if(!blurb) return;
|
|
1610
|
+
const label=el.getAttribute('data-label')||'', key=label.toLowerCase();
|
|
1611
|
+
const img=tip.querySelector('.ct-img');
|
|
1612
|
+
if(PERSONA_TRAITS[key]){ img.src=`./personality_stickers/${stickerFor(key)}.png`; tip.classList.add('has-img'); }
|
|
1613
|
+
else tip.classList.remove('has-img');
|
|
1614
|
+
tip.querySelector('.tl').textContent=label;
|
|
1615
|
+
tip.querySelector('.bd').textContent=blurb;
|
|
1616
|
+
const r=el.getBoundingClientRect(), tw=tip.offsetWidth, th=tip.offsetHeight;
|
|
1617
|
+
let left=r.left - tw - 12; if(left<8) left=Math.min(r.right + 12, window.innerWidth - tw - 8);
|
|
1618
|
+
let top=Math.max(8, Math.min(r.top + r.height/2 - th/2, window.innerHeight - th - 8));
|
|
1619
|
+
tip.style.left=left+'px'; tip.style.top=top+'px';
|
|
1620
|
+
tip.classList.add('show');
|
|
1621
|
+
};
|
|
1622
|
+
const setOpen=(open)=>{
|
|
1623
|
+
panel.classList.toggle('open', open);
|
|
1624
|
+
btn.setAttribute('aria-expanded', String(open));
|
|
1625
|
+
if(open){ // always reopen on the "this is you" pane
|
|
1626
|
+
const youPane=panel.querySelector('.ph-you'), allPane=panel.querySelector('.ph-all'), tg=panel.querySelector('.ph-toggle');
|
|
1627
|
+
if(youPane && allPane && tg){ youPane.removeAttribute('hidden'); allPane.setAttribute('hidden',''); tg.textContent='see all types →'; }
|
|
1628
|
+
} else { hideTip(); }
|
|
1629
|
+
};
|
|
1630
|
+
btn.addEventListener('click', (e)=>{ e.stopPropagation(); setOpen(!panel.classList.contains('open')); });
|
|
1631
|
+
document.addEventListener('click', (e)=>{ if(e.target!==btn && !panel.contains(e.target)) setOpen(false); });
|
|
1632
|
+
window.addEventListener('keydown', (e)=>{ if(e.key==='Escape') setOpen(false); });
|
|
1633
|
+
panel.addEventListener('mouseover', (e)=>{ const el=e.target.closest && e.target.closest('.ph-item,.ph-pod'); if(el) showTip(el); });
|
|
1634
|
+
panel.addEventListener('mouseout', (e)=>{ const el=e.target.closest && e.target.closest('.ph-item,.ph-pod'); if(el) hideTip(); });
|
|
1635
|
+
panel.addEventListener('scroll', hideTip);
|
|
1636
|
+
})();
|
|
1637
|
+
|
|
1638
|
+
document.querySelectorAll('#setup-connect,#v7-connect,#fr-connect').forEach((connectButton)=>{
|
|
1639
|
+
connectButton.addEventListener('click', (event)=>{
|
|
1640
|
+
event.stopPropagation();
|
|
1641
|
+
if(setupMode) window.parent?.postMessage({type:'echomem:connect-click'}, window.location.origin);
|
|
1642
|
+
});
|
|
1643
|
+
});
|
|
1644
|
+
|
|
1645
|
+
// ---- rotating cost-of-forgetting readout: share, time, and API-equivalent waste ----
|
|
1646
|
+
const parseScalar=(value)=>{
|
|
1647
|
+
const match=String(value||'').match(/[0-9][0-9,]*(?:\.[0-9]+)?/);
|
|
1648
|
+
return match ? Number(match[0].replace(/,/g,''))||0 : 0;
|
|
1649
|
+
};
|
|
1650
|
+
const formatWasteMoney=(value)=>`$${Math.round(value).toLocaleString('en-US')}`;
|
|
1651
|
+
function buildMetricSlides(dirtyPct, attentionHours, computeCost){
|
|
1652
|
+
const dirtyShare=Math.max(0, parseScalar(dirtyPct))/100;
|
|
1653
|
+
const wastedHours=Math.max(0, parseScalar(attentionHours))*dirtyShare;
|
|
1654
|
+
const wastedDays=wastedHours/8;
|
|
1655
|
+
const wastedCost=Math.max(0, parseScalar(computeCost))*dirtyShare;
|
|
1656
|
+
return [
|
|
1657
|
+
{
|
|
1658
|
+
value:`${parseScalar(dirtyPct).toFixed(1)}%`,
|
|
1659
|
+
label:'repeated reads',
|
|
1660
|
+
say:"Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city."
|
|
1661
|
+
},
|
|
1662
|
+
{
|
|
1663
|
+
value:`≈${Math.round(wastedHours)}h`,
|
|
1664
|
+
label:'spent rereading',
|
|
1665
|
+
say:`That is roughly <b>${wastedDays.toFixed(1)} workdays</b> of agent attention spent loading old context again instead of moving the workspace forward.`
|
|
1666
|
+
},
|
|
1667
|
+
{
|
|
1668
|
+
value:`≈${formatWasteMoney(wastedCost)}`,
|
|
1669
|
+
label:'API-equiv waste',
|
|
1670
|
+
say:`At list API-equivalent rates, repeated reads account for about <b>${formatWasteMoney(wastedCost)}</b> of the compute volume shown above. Not your bill — the scale of the waste.`
|
|
1671
|
+
},
|
|
1672
|
+
];
|
|
1673
|
+
}
|
|
1674
|
+
function bindMetricCarousel({metric,value,label,say,slides}){
|
|
1675
|
+
if(!metric || !value || !label || !say || !slides?.length) return;
|
|
1676
|
+
let index=0;
|
|
1677
|
+
function show(indexToShow){
|
|
1678
|
+
const slide=slides[indexToShow%slides.length];
|
|
1679
|
+
metric.classList.add('is-swapping');
|
|
1680
|
+
say.classList.add('is-swapping');
|
|
1681
|
+
window.setTimeout(()=>{
|
|
1682
|
+
value.textContent=slide.value;
|
|
1683
|
+
label.textContent=slide.label;
|
|
1684
|
+
say.innerHTML=slide.say;
|
|
1685
|
+
metric.classList.remove('is-swapping');
|
|
1686
|
+
say.classList.remove('is-swapping');
|
|
1687
|
+
}, 520);
|
|
1688
|
+
}
|
|
1689
|
+
if(slides.length>1 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){
|
|
1690
|
+
window.setInterval(()=>{
|
|
1691
|
+
index=(index+1)%slides.length;
|
|
1692
|
+
show(index);
|
|
1693
|
+
}, 6000);
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
bindMetricCarousel({
|
|
1697
|
+
metric:document.getElementById('v7-metric'),
|
|
1698
|
+
value:document.getElementById('v7-metric-value'),
|
|
1699
|
+
label:document.getElementById('v7-metric-label'),
|
|
1700
|
+
say:document.getElementById('v7-metric-say'),
|
|
1701
|
+
slides:buildMetricSlides(
|
|
1702
|
+
document.getElementById('v7-metric-value')?.textContent || '85.0',
|
|
1703
|
+
document.getElementById('v7-attention')?.textContent || '191.1',
|
|
1704
|
+
document.getElementById('v7-cost')?.textContent || '$13,689'
|
|
1705
|
+
),
|
|
1706
|
+
});
|
|
1707
|
+
// setup-split field report shares the same rotating cost readout
|
|
1708
|
+
bindMetricCarousel({
|
|
1709
|
+
metric:document.getElementById('fr-metric'),
|
|
1710
|
+
value:document.getElementById('fr-metric-value'),
|
|
1711
|
+
label:document.getElementById('fr-metric-label'),
|
|
1712
|
+
say:document.getElementById('fr-metric-say'),
|
|
1713
|
+
slides:buildMetricSlides(
|
|
1714
|
+
document.getElementById('v7-metric-value')?.textContent || '85.0',
|
|
1715
|
+
document.getElementById('v7-attention')?.textContent || '191.1',
|
|
1716
|
+
document.getElementById('v7-cost')?.textContent || '$13,689'
|
|
1717
|
+
),
|
|
1718
|
+
});
|
|
1719
|
+
// reserve the TALLEST slide's height (measured at the real panel width) so the loop never reflows the column
|
|
1720
|
+
function reserveFrSayHeight(){
|
|
1721
|
+
if(!setupMode) return;
|
|
1722
|
+
const say=document.getElementById('fr-metric-say'); if(!say) return;
|
|
1723
|
+
const slides=buildMetricSlides(
|
|
1724
|
+
document.getElementById('v7-metric-value')?.textContent || '85.0',
|
|
1725
|
+
document.getElementById('v7-attention')?.textContent || '191.1',
|
|
1726
|
+
document.getElementById('v7-cost')?.textContent || '$13,689'
|
|
1727
|
+
);
|
|
1728
|
+
const prev=say.innerHTML; say.style.minHeight='0px'; let max=0;
|
|
1729
|
+
for(const s of slides){ say.innerHTML=s.say; max=Math.max(max, say.offsetHeight); }
|
|
1730
|
+
say.innerHTML=prev;
|
|
1731
|
+
if(max>0) say.style.minHeight=max+'px';
|
|
1732
|
+
}
|
|
1733
|
+
reserveFrSayHeight();
|
|
1734
|
+
window.addEventListener('resize', reserveFrSayHeight);
|
|
1735
|
+
|
|
1736
|
+
// ---- repeated-reads info sheet: v7 "how we read your city" disclosure, moved behind the info button ----
|
|
1737
|
+
const v7InfoBtns=Array.from(document.querySelectorAll('[aria-controls="v7-info-sheet"]'));
|
|
1738
|
+
const v7InfoSheet=document.getElementById('v7-info-sheet');
|
|
1739
|
+
const v7InfoClose=document.getElementById('v7-info-close');
|
|
1740
|
+
function setV7InfoSheet(open){
|
|
1741
|
+
if(!v7InfoSheet) return;
|
|
1742
|
+
v7InfoSheet.classList.toggle('open', open);
|
|
1743
|
+
v7InfoSheet.setAttribute('aria-hidden', String(!open));
|
|
1744
|
+
v7InfoBtns.forEach((button)=>button.setAttribute('aria-expanded', String(open)));
|
|
1745
|
+
}
|
|
1746
|
+
if(v7InfoBtns.length && v7InfoSheet){
|
|
1747
|
+
v7InfoBtns.forEach((button)=>button.addEventListener('click', (event)=>{
|
|
1748
|
+
event.stopPropagation();
|
|
1749
|
+
setV7InfoSheet(!v7InfoSheet.classList.contains('open'));
|
|
1750
|
+
}));
|
|
1751
|
+
v7InfoSheet.addEventListener('click', (event)=>{
|
|
1752
|
+
if(event.target===v7InfoSheet) setV7InfoSheet(false);
|
|
1753
|
+
});
|
|
1754
|
+
v7InfoSheet.querySelector('.v7-infoCard')?.addEventListener('click', (event)=>event.stopPropagation());
|
|
1755
|
+
}
|
|
1756
|
+
if(v7InfoClose) v7InfoClose.addEventListener('click', (event)=>{ event.stopPropagation(); setV7InfoSheet(false); });
|
|
1757
|
+
|
|
1758
|
+
// ---- hover a cube → highlight it + open a clear detail panel (more detail than the top label) ----
|
|
1759
|
+
const detailEl=document.getElementById('repo-detail');
|
|
1760
|
+
const ray=new THREE.Raycaster();
|
|
1761
|
+
let downXY=null, selected=null, activeDetail=null, pointerIsDown=false;
|
|
1762
|
+
function highlight(grp){
|
|
1763
|
+
if(selected) selected.traverse(m=>{ if(m.material && m.material.emissive) m.material.emissive.setHex(0x000000); });
|
|
1764
|
+
selected=grp;
|
|
1765
|
+
if(grp) grp.traverse(m=>{ if(m.material && m.material.emissive) m.material.emissive.copy(m.material.color).multiplyScalar(0.22); });
|
|
1766
|
+
dirty=true;
|
|
1767
|
+
}
|
|
1768
|
+
function repoAtPointer(e){
|
|
1769
|
+
const rect=renderer.domElement.getBoundingClientRect();
|
|
1770
|
+
ray.setFromCamera({x:((e.clientX-rect.left)/rect.width)*2-1, y:-((e.clientY-rect.top)/rect.height)*2+1}, camera);
|
|
1771
|
+
const hits=ray.intersectObjects(all.map(o=>o.mesh), true);
|
|
1772
|
+
return hits.length ? hits[0].object.userData : null;
|
|
1773
|
+
}
|
|
1774
|
+
function updateHoverDetail(e){
|
|
1775
|
+
if(pointerIsDown) return;
|
|
1776
|
+
const repo=repoAtPointer(e);
|
|
1777
|
+
if(repo) showDetail(repo); else hideDetail();
|
|
1778
|
+
}
|
|
1779
|
+
renderer.domElement.addEventListener('pointermove', updateHoverDetail);
|
|
1780
|
+
renderer.domElement.addEventListener('pointerleave', hideDetail);
|
|
1781
|
+
renderer.domElement.addEventListener('pointerdown', e=>{ downXY=[e.clientX,e.clientY]; pointerIsDown=true; hideDetail(); });
|
|
1782
|
+
renderer.domElement.addEventListener('pointerup', e=>{
|
|
1783
|
+
if(!downXY) return;
|
|
1784
|
+
const moved=Math.hypot(e.clientX-downXY[0], e.clientY-downXY[1]); downXY=null;
|
|
1785
|
+
pointerIsDown=false;
|
|
1786
|
+
if(moved>6) return; // it was a drag-to-rotate, not a click
|
|
1787
|
+
const repo=repoAtPointer(e); // tap/click fallback for touch and keyboard-less devices
|
|
1788
|
+
if(repo) showDetail(repo); else hideDetail();
|
|
1789
|
+
});
|
|
1790
|
+
function showDetail(o){
|
|
1791
|
+
if(activeDetail===o && detailEl.style.display==='block') return;
|
|
1792
|
+
activeDetail=o;
|
|
1793
|
+
highlight(o.mesh);
|
|
1794
|
+
const dollars=Math.round(o.cost*(setupMode?1:COST_SCALE)).toLocaleString('en-US');
|
|
1795
|
+
const days=o.days>=0.1 ? `${o.days}` : '<0.1';
|
|
1796
|
+
const cxp=Number(o.codexPct)||0, clp=Number(o.claudePct)||0;
|
|
1797
|
+
const splitTotal=Math.max(1, cxp+clp);
|
|
1798
|
+
const codexW=Math.max(0, Math.min(100, cxp/splitTotal*100));
|
|
1799
|
+
const claudeW=Math.max(0, 100-codexW);
|
|
1800
|
+
const esc=(v)=>String(v).replace(/[&<>"]/g,(c)=>({'&':'&','<':'<','>':'>','"':'"'}[c]));
|
|
1801
|
+
detailEl.innerHTML=
|
|
1802
|
+
`<div class="rd-kicker">Repository</div>`+
|
|
1803
|
+
`<div class="rd-name">${esc(o.name)}</div>`+
|
|
1804
|
+
`<div class="rd-metrics">`+
|
|
1805
|
+
`<div><div class="rd-label">Total tokens</div><div class="rd-value">${fmtTok(o.tokens)}</div></div>`+
|
|
1806
|
+
`<div><div class="rd-label">API-equiv cost</div><div class="rd-value">$${dollars}</div></div>`+
|
|
1807
|
+
`</div>`+
|
|
1808
|
+
`<div class="rd-meta">${days} focus days · ${Number(o.sessions)||0} sessions</div>`+
|
|
1809
|
+
`<div class="rd-split"><i class="rd-seg claude" style="width:${claudeW}%"></i><i class="rd-seg codex" style="width:${codexW}%"></i></div>`+
|
|
1810
|
+
`<div class="rd-legend"><span class="claude">Claude ${clp}%</span><span class="codex">Codex ${cxp}%</span></div>`;
|
|
1811
|
+
detailEl.style.display='block';
|
|
1812
|
+
const rect=renderer.domElement.getBoundingClientRect();
|
|
1813
|
+
const v=new THREE.Vector3(o.x, TRAY_TOP+o.h-3, o.z).project(camera); // anchor to the cube, not the cursor
|
|
1814
|
+
const cx=rect.left+(v.x*0.5+0.5)*rect.width, cy=rect.top+(-v.y*0.5+0.5)*rect.height;
|
|
1815
|
+
let x=cx+26, y=cy-detailEl.offsetHeight*0.5;
|
|
1816
|
+
if(x+detailEl.offsetWidth>window.innerWidth-8) x=cx-detailEl.offsetWidth-26;
|
|
1817
|
+
if(y<8) y=8; if(y+detailEl.offsetHeight>window.innerHeight-8) y=window.innerHeight-detailEl.offsetHeight-8;
|
|
1818
|
+
detailEl.style.left=x+'px'; detailEl.style.top=y+'px';
|
|
1819
|
+
}
|
|
1820
|
+
function hideDetail(){ activeDetail=null; highlight(null); detailEl.style.display='none'; }
|
|
1821
|
+
window.addEventListener('keydown', e=>{ if(e.key==='Escape'){ setV7InfoSheet(false); hideDetail(); } });
|
|
1822
|
+
|
|
1823
|
+
// ---- tool-split chips (official icons) ----
|
|
1824
|
+
const CLAUDE_SVG='<svg viewBox="0 0 100 100"><path fill="#d97757" d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"/></svg>';
|
|
1825
|
+
const OPENAI_SVG='<svg viewBox="0 0 20 20"><path fill="#10a37f" d="M11.248 18.25q-.825 0-1.568-.314a4.3 4.3 0 0 1-1.32-.874 4 4 0 0 1-1.304.214 4 4 0 0 1-2.046-.544 4.27 4.27 0 0 1-1.518-1.485 4 4 0 0 1-.56-2.095q0-.48.131-1.04A4.4 4.4 0 0 1 2.04 10.71a4.07 4.07 0 0 1 .017-3.4 4.2 4.2 0 0 1 1.056-1.418 3.8 3.8 0 0 1 1.6-.842 3.9 3.9 0 0 1 .76-1.683q.593-.759 1.451-1.188a4.04 4.04 0 0 1 1.832-.429q.825 0 1.567.313.742.314 1.32.875a4 4 0 0 1 1.304-.215q1.106 0 2.046.545a4.14 4.14 0 0 1 1.501 1.485q.578.941.578 2.095 0 .48-.132 1.04.66.61 1.023 1.419.363.792.363 1.666 0 .892-.38 1.717a4.3 4.3 0 0 1-1.072 1.435 3.8 3.8 0 0 1-1.584.825 3.8 3.8 0 0 1-.775 1.683 4.06 4.06 0 0 1-1.436 1.188 4.04 4.04 0 0 1-1.832.429m-4.076-2.062q.825 0 1.435-.347l3.103-1.782a.36.36 0 0 0 .164-.313v-1.42L7.881 14.62a.67.67 0 0 1-.726 0l-3.118-1.798a.5.5 0 0 1-.017.115v.198q0 .841.396 1.551.413.693 1.139 1.089a3.2 3.2 0 0 0 1.617.412m.165-2.69a.4.4 0 0 0 .181.05q.083 0 .165-.05l1.238-.71-3.977-2.31a.7.7 0 0 1-.363-.643v-3.58q-.825.362-1.32 1.122a2.9 2.9 0 0 0-.495 1.65q0 .809.413 1.55.412.743 1.072 1.123zm3.91 3.663q.875 0 1.585-.396a2.96 2.96 0 0 0 1.534-2.64v-3.564a.32.32 0 0 0-.165-.297l-1.254-.726v4.604a.7.7 0 0 1-.363.643l-3.119 1.799a3 3 0 0 0 1.783.577m.627-6.039V8.878L10.01 7.822 8.129 8.878v2.244l1.881 1.056zM7.057 5.859a.7.7 0 0 1 .363-.644l3.119-1.798a3 3 0 0 0-1.782-.578q-.874 0-1.584.396A2.96 2.96 0 0 0 6.05 4.324a3.07 3.07 0 0 0-.396 1.551v3.547q0 .199.165.314l1.237.726zm8.383 7.887q.825-.364 1.303-1.123.495-.758.495-1.65a3.15 3.15 0 0 0-.412-1.55q-.413-.743-1.073-1.123l-3.086-1.782q-.099-.065-.181-.049a.3.3 0 0 0-.165.05l-1.238.692 3.993 2.327a.6.6 0 0 1 .264.264.64.64 0 0 1 .1.363zm-3.317-8.382a.63.63 0 0 1 .726 0l3.135 1.831v-.297q0-.792-.396-1.501a2.86 2.86 0 0 0-1.105-1.155q-.71-.43-1.65-.43-.825 0-1.436.347L8.294 5.941a.36.36 0 0 0-.165.314v1.418z"/></svg>';
|
|
1826
|
+
document.getElementById('tool-split').innerHTML=
|
|
1827
|
+
`<div class="tool-chip">${OPENAI_SVG}<div><div class="pct">26%</div><div class="name">OpenAI Codex</div></div></div>`+
|
|
1828
|
+
`<div class="tool-chip">${CLAUDE_SVG}<div><div class="pct">74%</div><div class="name">Claude Code</div></div></div>`;
|
|
1829
|
+
</script>
|
|
1830
|
+
|
|
1831
|
+
<!-- Echo mascot (Rive) — the persona avatar, animated; replaces the old hand-drawn SVG -->
|
|
1832
|
+
<script src="./vendor/rive.js"></script>
|
|
1833
|
+
<script>
|
|
1834
|
+
(function(){
|
|
1835
|
+
if(!window.rive){ console.error('Rive runtime missing'); return; }
|
|
1836
|
+
const { Rive, Layout, Fit, Alignment, RuntimeLoader } = window.rive;
|
|
1837
|
+
RuntimeLoader.setWasmUrl('./vendor/rive.wasm');
|
|
1838
|
+
const canvas = document.getElementById('persona-mascot');
|
|
1839
|
+
if(!canvas) return;
|
|
1840
|
+
const mascot = new Rive({
|
|
1841
|
+
src: './vendor/echo_general-file-21.riv',
|
|
1842
|
+
canvas,
|
|
1843
|
+
autoplay: true,
|
|
1844
|
+
stateMachines: 'SM-General',
|
|
1845
|
+
layout: new Layout({ fit: Fit.Cover, alignment: Alignment.Center }),
|
|
1846
|
+
onLoad: () => {
|
|
1847
|
+
const resize = () => { try { mascot.resizeDrawingSurfaceToCanvas(); } catch(e){} };
|
|
1848
|
+
resize();
|
|
1849
|
+
try {
|
|
1850
|
+
const inputs = mascot.stateMachineInputs('SM-General');
|
|
1851
|
+
const greet = inputs && inputs.find(i => i.name === 'introgreeting');
|
|
1852
|
+
if (greet) greet.fire();
|
|
1853
|
+
} catch(e){}
|
|
1854
|
+
setTimeout(resize, 300);
|
|
1855
|
+
window.addEventListener('resize', resize);
|
|
1856
|
+
},
|
|
1857
|
+
onLoadError: (e) => console.error('Echo mascot failed to load', e),
|
|
1858
|
+
});
|
|
1859
|
+
})();
|
|
1860
|
+
</script>
|
|
1861
|
+
</body>
|
|
1862
|
+
</html>
|