@krtclcdy/tersio 2.21.0 → 2.22.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.
@@ -1,410 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <meta name="color-scheme" content="dark light">
7
- <script>(function(){try{var t=localStorage.getItem('tersio-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);else document.documentElement.removeAttribute('data-theme');}catch(e){}})();</script>
8
- <title>Tersio Dashboard</title>
9
- <link rel="icon" type="image/png" href="brand.webp">
10
- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
11
- <script src="https://unpkg.com/lucide@latest"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
14
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/outfit@5/index.css">
15
- <link rel="stylesheet" href="styles.css">
16
- </head>
17
- <body class="min-h-[100dvh] antialiased">
18
- <div class="bg-blueprint pointer-events-none fixed inset-0" aria-hidden="true"></div>
19
-
20
- <main class="overflow-x-clip w-full max-w-full">
21
- <div class="relative mx-auto max-w-7xl px-4 sm:px-6 pb-16">
22
- <!-- Scroll progress rail: fixed left ticks, accent fill by scroll fraction -->
23
- <nav id="rail" class="rail hidden md:flex" aria-label="Scroll progress"></nav>
24
-
25
- <!-- Floating dock navbar -->
26
- <header class="dock mt-4 flex w-full items-center gap-2 px-3 py-2">
27
- <a href="#" class="flex shrink-0 items-center gap-2.5 pl-1 pr-2" aria-label="Tersio dashboard home">
28
- <img src="brand.webp" alt="Tersio" width="32" height="32" class="brand size-8 rounded-full">
29
- <span class="leading-tight text-left">
30
- <span class="block font-bold tracking-tight text-sm">TERSIO DASHBOARD</span>
31
- <span class="mono block text-[11px]" style="color: var(--dim)">live token number feed</span>
32
- </span>
33
- </a>
34
- <span class="mono hidden shrink-0 sm:flex items-center gap-2 text-xs px-2 ml-auto" style="color: var(--dim)">
35
- <span class="live-dot inline-block size-2 rounded-full"></span>
36
- <span id="clock">--:--</span>
37
- </span>
38
- <span class="hidden sm:block w-px h-5 shrink-0" style="background: var(--line)" aria-hidden="true"></span>
39
- <button id="settingsBtn" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Open settings">
40
- <i data-lucide="settings" class="size-4"></i>
41
- </button>
42
- </header>
43
-
44
- <!-- Settings dialog (shadcn pattern, native modal) -->
45
- <dialog id="settings" class="dlg" aria-labelledby="settingsTitle">
46
- <div class="dlg-head">
47
- <div class="min-w-0">
48
- <p class="dlg-title" id="settingsTitle">Settings</p>
49
- <p class="dlg-desc">Appearance, data, and where statistics live. <span id="verChip" class="mono">tersio</span></p>
50
- </div>
51
- <button id="settingsClose" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Close settings">
52
- <i data-lucide="x" class="size-4"></i>
53
- </button>
54
- </div>
55
- <p class="dlg-label">Appearance</p>
56
- <div class="dlg-row">
57
- <div class="min-w-0">
58
- <p class="dlg-name">Theme</p>
59
- <p class="dlg-hint">Light, dark, or follow the system.</p>
60
- </div>
61
- <div class="seg mono text-xs flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line); background: var(--panel)" role="tablist" aria-label="Theme">
62
- <button data-theme-val="light" class="px-2.5 py-1.5" role="tab" aria-label="Light" title="Light"><i data-lucide="sun" class="size-4"></i></button>
63
- <button data-theme-val="dark" class="px-2.5 py-1.5" role="tab" aria-label="Dark" title="Dark"><i data-lucide="moon" class="size-4"></i></button>
64
- <button data-theme-val="system" class="px-2.5 py-1.5" role="tab" aria-label="System" title="System"><i data-lucide="monitor" class="size-4"></i></button>
65
- </div>
66
- </div>
67
- <p class="dlg-label">Data</p>
68
- <div class="dlg-row">
69
- <div class="min-w-0">
70
- <p class="dlg-name">Reload</p>
71
- <p class="dlg-hint">Re-read statistics from disk.</p>
72
- </div>
73
- <button id="reload" class="btn-push mono flex shrink-0 items-center gap-2 text-xs pl-2.5 pr-3 py-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Reload data">
74
- <i data-lucide="refresh-cw" class="size-3.5"></i><span>Reload</span>
75
- </button>
76
- </div>
77
- <div class="dlg-paths">
78
- <div class="dlg-path">
79
- <p class="dlg-name">Usage ledger <span class="dlg-own">tersio-owned · reset clears</span></p>
80
- <p class="mono dlg-file" id="pathLedger" title="">–</p>
81
- </div>
82
- <div class="dlg-path">
83
- <p class="dlg-name">Session transcripts <span class="dlg-own">host-owned · never touched</span></p>
84
- <p class="mono dlg-file" id="pathSessions" title="">–</p>
85
- </div>
86
- <div class="dlg-path">
87
- <p class="dlg-name">Usage DB <span class="dlg-own">tersio-owned · reset clears</span></p>
88
- <p class="mono dlg-file" id="pathUsageDb" title="">–</p>
89
- </div>
90
- </div>
91
- <div class="dlg-danger">
92
- <p class="dlg-label">Danger zone</p>
93
- <div class="dlg-row">
94
- <div class="min-w-0">
95
- <p class="dlg-name">Reset statistics</p>
96
- <p class="dlg-hint">Clears tersio statistics. Host-owned files stay intact. Click twice to confirm.</p>
97
- </div>
98
- <button id="reset" class="btn-push mono flex shrink-0 items-center gap-2 text-xs pl-2.5 pr-3 py-2 rounded-xl" style="border: 1px solid var(--danger-border)" aria-label="Reset tersio statistics">
99
- <i data-lucide="rotate-ccw" class="size-3.5"></i><span id="resetLabel">Reset</span>
100
- </button>
101
- </div>
102
- </div>
103
- </dialog>
104
-
105
- <!-- Model detail dialog (shadcn chart language, native modal): kpi strip,
106
- gradient area chart with range tabs, rounded bars, token-mix donut. -->
107
- <dialog id="modelDialog" class="dlg mdlg" aria-labelledby="mdTitle">
108
- <div class="dlg-head">
109
- <div class="min-w-0 flex items-center gap-3">
110
- <span id="mdBadge"></span>
111
- <div class="min-w-0">
112
- <p class="dlg-title truncate" id="mdTitle">Model</p>
113
- <p class="dlg-desc mono" id="mdSub">–</p>
114
- </div>
115
- </div>
116
- <div class="flex shrink-0 items-center gap-2">
117
- <span class="md-rankpill mono" id="mdRank">#–</span>
118
- <button id="mdClose" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Close model details">
119
- <i data-lucide="x" class="size-4"></i>
120
- </button>
121
- </div>
122
- </div>
123
- <div class="md-body">
124
- <div class="md-kpis" id="mdKpis"></div>
125
- <div class="md-chart">
126
- <div class="md-chart-head">
127
- <div class="min-w-0">
128
- <p class="md-chart-title">Token volume</p>
129
- <p class="md-chart-sub mono" id="mdMomRange">–</p>
130
- </div>
131
- <div class="flex shrink-0 items-center gap-2">
132
- <span class="md-trend mono" id="mdTrend"></span>
133
- <span class="seg mono text-xs flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="group" aria-label="Chart range">
134
- <button data-mdspan="30" class="px-2.5 py-1" role="button">30D</button>
135
- <button data-mdspan="90" class="px-2.5 py-1" role="button">90D</button>
136
- <button data-mdspan="all" class="on px-2.5 py-1" role="button">ALL</button>
137
- </span>
138
- </div>
139
- </div>
140
- <svg id="mdSpark" viewBox="0 0 560 190" preserveAspectRatio="none" aria-hidden="true"></svg>
141
- <div class="md-tip mono" id="mdTip"></div>
142
- <div class="md-months mono" id="mdMonths" aria-hidden="true"></div>
143
- </div>
144
- <div class="md-cols">
145
- <div class="md-chart">
146
- <div class="md-chart-head">
147
- <div class="min-w-0">
148
- <p class="md-chart-title">Daily activity</p>
149
- <p class="md-chart-sub mono" id="mdBarsSub">tokens per day</p>
150
- </div>
151
- <span class="md-trend mono" id="mdActive"></span>
152
- </div>
153
- <div class="md-bars" id="mdBars" aria-hidden="true"></div>
154
- <div class="md-months mono" id="mdBarsMonths" aria-hidden="true"></div>
155
- <div class="md-note mono" id="mdBarsNote"></div>
156
- </div>
157
- <div class="md-chart">
158
- <div class="md-chart-head">
159
- <div class="min-w-0">
160
- <p class="md-chart-title">Token mix</p>
161
- <p class="md-chart-sub mono">input vs output vs cache</p>
162
- </div>
163
- </div>
164
- <div class="md-donut-wrap">
165
- <svg id="mdMix" viewBox="0 0 140 140" aria-hidden="true"></svg>
166
- <div class="md-donut-center"><p class="mono" id="mdMixTotal">–</p></div>
167
- </div>
168
- <div class="md-legend mono" id="mdMixLegend"></div>
169
- </div>
170
- </div>
171
- <div class="md-grid" id="mdStats"></div>
172
- </div>
173
- </dialog>
174
-
175
- <!-- Hero: centered total -->
176
- <section class="mx-auto max-w-6xl text-center pt-14 pb-10 relative">
177
- <div class="hero-glow" aria-hidden="true"></div>
178
- <p class="hero-in mono text-[11px] uppercase tracking-[0.22em] mb-4 relative" style="color: var(--accent)">Live token feed</p>
179
- <p class="hero-in mono font-bold tracking-tighter leading-none text-7xl md:text-8xl relative herototal" id="total">0</p>
180
- <div class="hero-in relative mt-6 overflow-hidden" aria-hidden="true" style="mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent)">
181
- <div class="ticker mono text-xs whitespace-nowrap inline-block" id="ticker" style="color: var(--dim)"></div>
182
- </div>
183
- </section>
184
-
185
- <!-- Savings bento: big USD card + nested right rail -->
186
- <section class="grid grid-cols-12 grid-flow-dense gap-3" aria-label="Savings">
187
- <div class="rise col-span-12 lg:col-span-7 lg:row-span-2 rounded-xl p-6 flex flex-col justify-between" style="border: 1px solid var(--line); background: var(--panel)">
188
- <div>
189
- <div class="flex items-center justify-between gap-2">
190
- <p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)" id="costLabel">usd cost</p>
191
- <span class="relative">
192
- <button id="fxBtn" class="pill mono fxbtn" aria-haspopup="listbox" aria-expanded="false"><span id="fxCur">🇺🇸 USD</span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
193
- <div id="fxPanel" class="fxpanel hidden" role="listbox" aria-label="Display currency"></div>
194
- </span>
195
- </div>
196
- <p class="mono font-bold tracking-tighter leading-none mt-2 text-6xl lg:text-7xl" id="usd">-</p>
197
- </div>
198
- <div class="mt-4">
199
- <div class="spark h-16" id="usdSpark"></div>
200
- <div class="flex gap-4 mt-3 mono text-xs" style="color: var(--dim)">
201
- <span>avg <span id="usdPerDay" style="color: var(--ink)">-</span>/day</span>
202
- <span>top <span id="usdTopDay" style="color: var(--ink)">-</span></span>
203
- <span title="Cache savings per $1 spent, vs full input price">x<span id="usdLeverage" style="color: var(--accent)">-</span> cache leverage</span>
204
- </div>
205
- </div>
206
- <p class="mono text-[11px] mt-3" style="color: var(--dim)" id="usdNote">per-model price table</p>
207
- </div>
208
- <div class="col-span-12 lg:col-span-5 lg:row-span-2 grid grid-cols-2 grid-flow-dense gap-3 h-full grid-rows-[auto_1fr]">
209
- <div class="rise col-span-2 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
210
- <div class="flex items-center justify-between gap-2">
211
- <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">saved by cache</p>
212
- <p class="mono font-bold text-3xl mt-1" style="color: var(--accent)" id="saved">-</p></div>
213
- <span class="pill flat mono" title="Modeled estimate, not measured">est.</span>
214
- </div>
215
- <p class="mono text-[11px] mt-2" style="color: var(--dim)">est. vs full input price</p>
216
- </div>
217
- <div class="rise col-span-1 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
218
- <div class="flex items-center justify-between gap-2">
219
- <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">co2</p>
220
- <p class="mono font-bold text-3xl mt-1" id="co2">-</p>
221
- <p class="mt-2"><span class="pill flat mono" title="Single-stream ceiling divided by 32-way served concurrency">served ÷32</span></p></div>
222
- </div>
223
- <p class="mono text-[11px] mt-2" style="color: var(--dim)">est. from output</p>
224
- </div>
225
- <div class="rise col-span-1 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
226
- <div class="flex items-center justify-between gap-2">
227
- <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">cache share</p>
228
- <p class="mono font-bold text-3xl mt-1" id="cacheShare">-</p>
229
- <p class="mt-2"><span class="pill good mono" id="cacheDelta">-</span></p></div>
230
- </div>
231
- <p class="mono text-[11px] mt-2" style="color: var(--dim)">of tokens cached</p>
232
- </div>
233
- </div>
234
- </section>
235
-
236
- <!-- Token strip: nonzero buckets only -->
237
- <section class="rise mt-3 flex rounded-xl overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)" id="tokens" aria-label="Tokens by bucket"></section>
238
-
239
- <!-- Activity: full-width year heatmap -->
240
- <section id="activity" class="rise mt-8" style="scroll-margin-top: 90px" aria-label="Activity graph">
241
- <div class="flex items-center gap-2 mb-1">
242
- <i data-lucide="calendar-days" class="size-4" style="color: var(--accent)"></i>
243
- <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Activity</h2>
244
- <div class="seg mono text-xs flex items-center gap-1 ml-auto p-1 rounded-[10px]" style="border: 1px solid var(--line); background: var(--panel)" role="tablist" aria-label="Graph range">
245
- <button data-gmode="daily" class="on px-3 py-1.5" role="tab">Daily</button>
246
- <button data-gmode="weekly" class="px-3 py-1.5" role="tab">Weekly</button>
247
- <button data-gmode="cumulative" class="px-3 py-1.5" role="tab">Cumulative</button>
248
- </div>
249
- </div>
250
- <p class="mono text-xs mb-4 truncate" style="color: var(--dim)"><span id="graphRange"></span> · <span id="graphCap">daily values / trailing 12 months</span></p>
251
- <div class="rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)">
252
- <div class="pb-1">
253
- <div class="grid w-full" style="grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px;" id="graph"></div>
254
- </div>
255
- <div class="mono text-[11px] mt-3 flex items-center gap-1.5" style="color: var(--dim)">
256
- <span>less</span>
257
- <span class="cell key"></span><span class="cell key l1"></span><span class="cell key l2"></span><span class="cell key l3"></span><span class="cell key l4"></span>
258
- <span>more</span>
259
- </div>
260
- <div class="heatmonth mono mt-2 grid w-full" style="color: var(--dim); grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px;" id="graphMonths"></div>
261
- <div id="emptyGraph" class="empty hidden">
262
- <span class="empty-icon"><i data-lucide="calendar-x" class="size-5"></i></span>
263
- <p class="empty-title">No activity yet</p>
264
- <p class="empty-desc">Daily token activity will chart here once sessions report tokens.</p>
265
- </div>
266
- </div>
267
- </section>
268
-
269
- <!-- Top models: 3 columns -->
270
- <section class="mt-8 modelsSection" aria-label="Top models">
271
- <div class="flex items-center gap-2 mb-1">
272
- <i data-lucide="cpu" class="size-4" style="color: var(--accent)"></i>
273
- <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Top models</h2>
274
- <span class="mono text-xs ml-auto" style="color: var(--dim)">usage across sessions</span>
275
- </div>
276
- <div class="grid grid-cols-1 md:grid-cols-3 gap-3" id="modelCards"></div>
277
- </section>
278
-
279
-
280
- <!-- Models: own full-width section (split out of the old 50/50 twin card) -->
281
- <section class="rise mt-8 rounded-xl p-5 overflow-hidden flex flex-col modelsSection" style="border: 1px solid var(--line); background: var(--panel)" aria-label="All models">
282
- <div class="flex items-center gap-2 mb-1">
283
- <i data-lucide="layers" class="size-4" style="color: var(--accent)"></i>
284
- <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Models</h2>
285
- <span class="mono text-xs ml-auto truncate shrink-0" style="color: var(--dim)" id="modelsCount"></span>
286
- </div>
287
- <p class="mono text-xs mb-4" style="color: var(--dim)">ranked by tokens / top 10</p>
288
- <div class="scrollarea"><ol id="models" class="overflow-hidden"></ol></div>
289
- <div class="mono text-xs mt-4 pt-4 flex flex-wrap items-center gap-x-4 gap-y-3 mt-auto" style="color: var(--dim); border-top: 1px solid var(--line)">
290
- <span id="modelRange">Showing 0 of 0</span>
291
- <span class="seg flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="group" aria-label="Models per page">
292
- <button data-pp="10" class="on px-2.5 py-1" role="button">10</button>
293
- <button data-pp="15" class="px-2.5 py-1" role="button">15</button>
294
- <button data-pp="25" class="px-2.5 py-1" role="button">25</button>
295
- <button data-pp="50" class="px-2.5 py-1" role="button">50</button>
296
- </span>
297
- <span class="ml-auto flex items-center gap-1" id="modelPages" role="navigation" aria-label="Model pages"></span>
298
- </div>
299
- <div id="emptyModels" class="empty hidden">
300
- <span class="empty-icon"><i data-lucide="boxes" class="size-5"></i></span>
301
- <p class="empty-title">No models yet</p>
302
- <p class="empty-desc">Model token totals will appear here once sessions report tokens.</p>
303
- </div>
304
- </section>
305
-
306
- <!-- Recent requests: full-width, sitting with the other per-request views
307
- right after Models. When is absolutely stamped, so the column reads as
308
- a real timeline and sorts honestly against Time. -->
309
- <section class="rise mt-8 rounded-xl p-5 overflow-hidden flex flex-col" style="border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 90px" aria-label="Recent requests">
310
- <div class="flex items-center gap-2 mb-1">
311
- <i data-lucide="history" class="size-4" style="color: var(--accent)"></i>
312
- <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Recent requests</h2>
313
- <span class="mono text-xs ml-auto truncate shrink-0" style="color: var(--dim)" id="recentCount"></span>
314
- </div>
315
- <p class="mono text-xs mb-4 truncate" style="color: var(--dim)" title="Time = elapsed time with the model; Speed = output tokens per second">latest assistant messages · local time · sort any column · cost is measured when the host recorded it</p>
316
- <div class="scrollarea overflow-x-auto" style="max-height: 560px">
317
- <table class="w-full mono text-[13px]" id="recentTable">
318
- <colgroup><col><col style="width:96px"><col style="width:96px"><col style="width:120px"><col style="width:116px"><col style="width:120px"><col style="width:158px"></colgroup>
319
- <thead>
320
- <tr class="text-left text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">
321
- <th class="font-normal py-2 pr-3" aria-sort="none"><button class="thsort" data-sort="model">Model <span class="arr">⇅</span></button></th>
322
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="input">Input <span class="arr">⇅</span></button></th>
323
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="output">Output <span class="arr">⇅</span></button></th>
324
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="time" title="Elapsed time with the model / output token speed">Time <span class="arr">⇅</span></button></th>
325
- <th class="font-normal py-2 pr-3" aria-sort="none"><button class="thsort" data-sort="status">Status <span class="arr">⇅</span></button></th>
326
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="cost">Cost <span class="arr">⇅</span></button></th>
327
- <th class="font-normal text-right py-2" aria-sort="none"><button class="thsort num" data-sort="when" title="Local timestamp: month day, hour:minute:second">When <span class="arr">⇅</span></button></th>
328
- </tr>
329
- </thead>
330
- <tbody id="recent"></tbody>
331
- </table>
332
- </div>
333
- <div id="emptyRecent" class="empty hidden">
334
- <span class="empty-icon"><i data-lucide="inbox" class="size-5"></i></span>
335
- <p class="empty-title">No requests yet</p>
336
- <p class="empty-desc">Recent assistant messages will show here once sessions report tokens.</p>
337
- </div>
338
- <div class="mono text-xs mt-4 pt-4 flex flex-wrap items-center gap-x-4 gap-y-3 mt-auto" style="color: var(--dim); border-top: 1px solid var(--line)">
339
- <span id="recentRange">Showing 0 of 0</span>
340
- <span class="seg flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="group" aria-label="Requests per page">
341
- <button data-pp="10" class="px-2.5 py-1" role="button">10</button>
342
- <button data-pp="15" class="px-2.5 py-1" role="button">15</button>
343
- <button data-pp="25" class="on px-2.5 py-1" role="button">25</button>
344
- <button data-pp="50" class="px-2.5 py-1" role="button">50</button>
345
- </span>
346
- <span class="ml-auto flex items-center gap-1" id="recentPages" role="navigation" aria-label="Recent pages"></span>
347
- </div>
348
- </section>
349
-
350
- <!-- Command tools: own card, header outside like Models -->
351
- <section id="tools" class="rise mt-8 rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 90px" aria-label="Command tools">
352
- <div class="flex items-center gap-2 mb-1">
353
- <i data-lucide="terminal" class="size-4" style="color: var(--accent)"></i>
354
- <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Command tools</h2>
355
- <div class="flex items-center gap-2 ml-auto min-w-0">
356
- <span class="mono text-xs truncate min-w-0" style="color: var(--dim)" id="toolsScope">tool calls in sessions</span>
357
- </div>
358
- </div>
359
- <p class="mono text-xs mb-4 truncate" style="color: var(--dim)">count · tokens saved · avg rate · avg time · share of executions</p>
360
- <div class="overflow-x-auto">
361
- <table class="w-full mono text-[13px]" id="cmdTable">
362
- <colgroup><col style="width:40px"><col><col style="width:90px"><col style="width:90px"><col style="width:90px"><col style="width:90px"><col style="width:140px"></colgroup>
363
- <thead>
364
- <tr class="text-left text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">
365
- <th class="font-normal text-right pr-3 py-2 w-10">#</th>
366
- <th class="font-normal py-2 pr-3" aria-sort="none"><button class="thsort" data-sort="name">Tool / Command <span class="arr">⇅</span></button></th>
367
- <th class="font-normal text-right py-2 pr-3" aria-sort="descending"><button class="thsort num" data-sort="count">Count <span class="arr">↓</span></button></th>
368
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="saved">Saved <span class="arr">⇅</span></button></th>
369
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="avgPct">Avg% <span class="arr">⇅</span></button></th>
370
- <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="avgMs">Time <span class="arr">⇅</span></button></th>
371
- <th class="font-normal py-2 min-w-32">Impact</th>
372
- </tr>
373
- </thead>
374
- <tbody id="cmdBody"></tbody>
375
- </table>
376
- </div>
377
- <div id="emptyCmd" class="empty hidden">
378
- <span class="empty-icon"><i data-lucide="wrench" class="size-5"></i></span>
379
- <p class="empty-title">No tool data yet</p>
380
- <p class="empty-desc">Session tool calls and RTK measurements will appear here once recorded.</p>
381
- </div>
382
- <div id="cmdPager" class="mono text-xs mt-4 flex flex-wrap items-center gap-x-4 gap-y-3" style="color: var(--dim)">
383
- <span id="cmdRange">Showing 0 of 0</span>
384
- <span class="seg flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="group" aria-label="Rows per page">
385
- <button data-pp="10" class="px-2.5 py-1" role="button">10</button>
386
- <button data-pp="15" class="on px-2.5 py-1" role="button">15</button>
387
- <button data-pp="25" class="px-2.5 py-1" role="button">25</button>
388
- <button data-pp="50" class="px-2.5 py-1" role="button">50</button>
389
- </span>
390
- <span class="ml-auto flex items-center gap-1" id="cmdPages" role="navigation" aria-label="Pages"></span>
391
- </div>
392
- <p class="mono text-[11px] mt-3" style="color: var(--dim)">bash commands run through the rtk-wired OMP hook meter automatically; rows without metering show –. caveman + ponytail gains are instruction-following, bench-measured in BENCHMARK.md.</p>
393
- </section>
394
-
395
- <footer class="mono text-xs mt-12 pt-4" style="color: var(--dim); border-top: 1px solid var(--line)">
396
- <div class="flex flex-wrap items-center gap-x-4 gap-y-3">
397
- <span>© 2026 Tersio. KurutoDenzeru. All rights reserved.</span>
398
- <span class="ml-auto flex items-center gap-1" style="color: var(--ink)">
399
- <a href="https://github.com/KurutoDenzeru/tersio" target="_blank" rel="noopener" aria-label="GitHub" class="btn-push social grid size-8 place-items-center rounded-lg"><img height="16" width="16" src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/github.svg" alt="GitHub"></a>
400
- <a href="https://linkedin.com/in/kurtcalacday/" target="_blank" rel="noopener" aria-label="LinkedIn" class="btn-push social grid size-8 place-items-center rounded-lg"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
401
- <a href="https://instagram.com/krtclcdy/" target="_blank" rel="noopener" aria-label="Instagram" class="btn-push social grid size-8 place-items-center rounded-lg"><img height="16" width="16" src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/instagram.svg" alt="Instagram"></a>
402
- </span>
403
- </div>
404
- </footer>
405
- </div>
406
- </main>
407
-
408
- <script src="app.js" defer></script>
409
- </body>
410
- </html>
File without changes