ai-wrapped 1.0.0 → 1.1.0
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/.github/workflows/pages.yml +31 -0
- package/README.md +4 -0
- package/docs/icon.png +0 -0
- package/docs/index.html +581 -0
- package/electrobun.config.ts +4 -3
- package/icon.icns +0 -0
- package/icon.ico +0 -0
- package/icon.iconset/icon_128x128.png +0 -0
- package/icon.iconset/icon_128x128@2x.png +0 -0
- package/icon.iconset/icon_16x16.png +0 -0
- package/icon.iconset/icon_16x16@2x.png +0 -0
- package/icon.iconset/icon_256x256.png +0 -0
- package/icon.iconset/icon_256x256@2x.png +0 -0
- package/icon.iconset/icon_32x32.png +0 -0
- package/icon.iconset/icon_32x32@2x.png +0 -0
- package/icon.iconset/icon_512x512.png +0 -0
- package/icon.iconset/icon_512x512@2x.png +0 -0
- package/icon.png +0 -0
- package/package.json +1 -1
- package/public/tray-icon.png +0 -0
- package/public/tray-icon@2x.png +0 -0
- package/src/mainview/App.tsx +0 -2
- package/src/mainview/components/Dashboard.tsx +155 -146
- package/src/mainview/components/DashboardCharts.tsx +82 -7
- package/src/mainview/components/Sidebar.tsx +44 -17
- package/src/mainview/hooks/useDashboardData.ts +59 -1
- package/src/mainview/index.css +10 -2
- package/src/mainview/lib/formatters.test.ts +14 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
name: Deploy to GitHub Pages
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: [main]
|
|
6
|
+
paths: [docs/**]
|
|
7
|
+
workflow_dispatch:
|
|
8
|
+
|
|
9
|
+
permissions:
|
|
10
|
+
contents: read
|
|
11
|
+
pages: write
|
|
12
|
+
id-token: write
|
|
13
|
+
|
|
14
|
+
concurrency:
|
|
15
|
+
group: pages
|
|
16
|
+
cancel-in-progress: true
|
|
17
|
+
|
|
18
|
+
jobs:
|
|
19
|
+
deploy:
|
|
20
|
+
environment:
|
|
21
|
+
name: github-pages
|
|
22
|
+
url: ${{ steps.deployment.outputs.page_url }}
|
|
23
|
+
runs-on: ubuntu-latest
|
|
24
|
+
steps:
|
|
25
|
+
- uses: actions/checkout@v4
|
|
26
|
+
- uses: actions/configure-pages@v5
|
|
27
|
+
- uses: actions/upload-pages-artifact@v3
|
|
28
|
+
with:
|
|
29
|
+
path: docs
|
|
30
|
+
- id: deployment
|
|
31
|
+
uses: actions/deploy-pages@v4
|
package/README.md
CHANGED
package/docs/icon.png
ADDED
|
Binary file
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,581 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="scroll-smooth">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>AI Wrapped — Your year in AI coding agents</title>
|
|
7
|
+
<meta name="description" content="Spotify Wrapped-style desktop dashboard for your AI coding agent activity. Track tokens, costs, and usage across Claude Code, Codex, Gemini, Copilot, and more.">
|
|
8
|
+
<meta property="og:title" content="AI Wrapped">
|
|
9
|
+
<meta property="og:description" content="Spotify Wrapped-style desktop dashboard for your AI coding agent activity.">
|
|
10
|
+
<meta property="og:image" content="icon.png">
|
|
11
|
+
<link rel="icon" href="icon.png" type="image/png">
|
|
12
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
13
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
14
|
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
15
|
+
<style>
|
|
16
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
17
|
+
|
|
18
|
+
:root {
|
|
19
|
+
--surface-0: #020617;
|
|
20
|
+
--surface-1: #091126;
|
|
21
|
+
--surface-2: #101a34;
|
|
22
|
+
--text-primary: #f8fbff;
|
|
23
|
+
--text-secondary: #c8d2e7;
|
|
24
|
+
--text-muted: #8ea2c2;
|
|
25
|
+
--border-soft: rgba(139,163,201,0.2);
|
|
26
|
+
--border-subtle: rgba(197,212,236,0.18);
|
|
27
|
+
--accent-cyan: #22d3ee;
|
|
28
|
+
--accent-sky: #38bdf8;
|
|
29
|
+
--accent-blue: #3b82f6;
|
|
30
|
+
--accent-teal: #14b8a6;
|
|
31
|
+
--agent-claude: #f59e0b;
|
|
32
|
+
--agent-codex: #14b8a6;
|
|
33
|
+
--agent-gemini: #60a5fa;
|
|
34
|
+
--agent-opencode: #f97316;
|
|
35
|
+
--agent-droid: #34d399;
|
|
36
|
+
--agent-copilot: #f43f5e;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
html { scroll-behavior: smooth; }
|
|
40
|
+
|
|
41
|
+
body {
|
|
42
|
+
font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
|
|
43
|
+
color: var(--text-secondary);
|
|
44
|
+
background:
|
|
45
|
+
radial-gradient(90rem 48rem at 92% -8%, rgba(59,130,246,0.25) 0%, transparent 62%),
|
|
46
|
+
radial-gradient(75rem 42rem at -8% 108%, rgba(20,184,166,0.28) 0%, transparent 55%),
|
|
47
|
+
var(--surface-0);
|
|
48
|
+
background-attachment: fixed;
|
|
49
|
+
-webkit-font-smoothing: antialiased;
|
|
50
|
+
line-height: 1.6;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* --- Typography --- */
|
|
54
|
+
.kicker {
|
|
55
|
+
font-size: 0.72rem;
|
|
56
|
+
font-weight: 500;
|
|
57
|
+
letter-spacing: 0.22em;
|
|
58
|
+
text-transform: uppercase;
|
|
59
|
+
color: rgba(186,230,253,0.92);
|
|
60
|
+
}
|
|
61
|
+
.headline {
|
|
62
|
+
font-size: clamp(2.4rem, 5vw, 3.8rem);
|
|
63
|
+
font-weight: 700;
|
|
64
|
+
color: var(--text-primary);
|
|
65
|
+
line-height: 1.1;
|
|
66
|
+
letter-spacing: -0.02em;
|
|
67
|
+
}
|
|
68
|
+
.section-title {
|
|
69
|
+
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
color: var(--text-primary);
|
|
72
|
+
letter-spacing: -0.01em;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* --- Gradient text --- */
|
|
76
|
+
.gradient-text {
|
|
77
|
+
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--accent-teal) 100%);
|
|
78
|
+
-webkit-background-clip: text;
|
|
79
|
+
-webkit-text-fill-color: transparent;
|
|
80
|
+
background-clip: text;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* --- Glassmorphism card (matches app .wrapped-card) --- */
|
|
84
|
+
.glass-card {
|
|
85
|
+
background: rgba(9,17,38,0.65);
|
|
86
|
+
backdrop-filter: blur(18px);
|
|
87
|
+
-webkit-backdrop-filter: blur(18px);
|
|
88
|
+
border: 1px solid rgba(255,255,255,0.12);
|
|
89
|
+
border-radius: 2rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* --- Inner tile (matches app .wrapped-tile) --- */
|
|
93
|
+
.glass-tile {
|
|
94
|
+
background: rgba(2,6,23,0.37);
|
|
95
|
+
backdrop-filter: blur(8px);
|
|
96
|
+
-webkit-backdrop-filter: blur(8px);
|
|
97
|
+
border: 1px solid rgba(255,255,255,0.08);
|
|
98
|
+
border-radius: 1.2rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* --- Pill button (matches app .wrapped-button) --- */
|
|
102
|
+
.btn-pill {
|
|
103
|
+
display: inline-flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: 0.5rem;
|
|
106
|
+
height: 2.75rem;
|
|
107
|
+
padding: 0 1.5rem;
|
|
108
|
+
font-family: inherit;
|
|
109
|
+
font-size: 0.875rem;
|
|
110
|
+
font-weight: 600;
|
|
111
|
+
border-radius: 9999px;
|
|
112
|
+
text-decoration: none;
|
|
113
|
+
transition: all 0.2s;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
.btn-primary {
|
|
117
|
+
background: rgba(56,189,248,0.18);
|
|
118
|
+
border: 1px solid rgba(125,211,252,0.6);
|
|
119
|
+
color: var(--text-primary);
|
|
120
|
+
}
|
|
121
|
+
.btn-primary:hover {
|
|
122
|
+
background: rgba(56,189,248,0.3);
|
|
123
|
+
border-color: rgba(125,211,252,0.85);
|
|
124
|
+
}
|
|
125
|
+
.btn-ghost {
|
|
126
|
+
background: transparent;
|
|
127
|
+
border: 1px solid var(--border-soft);
|
|
128
|
+
color: var(--text-secondary);
|
|
129
|
+
}
|
|
130
|
+
.btn-ghost:hover {
|
|
131
|
+
border-color: rgba(34,211,238,0.5);
|
|
132
|
+
color: var(--text-primary);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* --- Hero --- */
|
|
136
|
+
.hero {
|
|
137
|
+
position: relative;
|
|
138
|
+
overflow: hidden;
|
|
139
|
+
padding: 6rem 1.5rem 5rem;
|
|
140
|
+
}
|
|
141
|
+
.hero-orbs {
|
|
142
|
+
position: absolute;
|
|
143
|
+
inset: 0;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
pointer-events: none;
|
|
146
|
+
}
|
|
147
|
+
.hero-orb {
|
|
148
|
+
position: absolute;
|
|
149
|
+
border-radius: 50%;
|
|
150
|
+
filter: blur(80px);
|
|
151
|
+
animation: float 20s ease-in-out infinite;
|
|
152
|
+
}
|
|
153
|
+
@keyframes float {
|
|
154
|
+
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
155
|
+
33% { transform: translate(30px, -20px) scale(1.05); }
|
|
156
|
+
66% { transform: translate(-20px, 15px) scale(0.95); }
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* --- Wrapped preview card --- */
|
|
160
|
+
.wrapped-preview {
|
|
161
|
+
background: linear-gradient(135deg, rgba(38,21,91,0.86), rgba(13,59,141,0.8) 54%, rgba(13,148,136,0.7));
|
|
162
|
+
border-radius: 2rem;
|
|
163
|
+
border: 1px solid rgba(255,255,255,0.12);
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
position: relative;
|
|
166
|
+
}
|
|
167
|
+
.wrapped-preview::before {
|
|
168
|
+
content: "";
|
|
169
|
+
position: absolute;
|
|
170
|
+
inset: 0;
|
|
171
|
+
background: linear-gradient(180deg, transparent 60%, rgba(2,6,23,0.4));
|
|
172
|
+
pointer-events: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* --- Stat number --- */
|
|
176
|
+
.stat-number {
|
|
177
|
+
font-size: clamp(2rem, 4vw, 3rem);
|
|
178
|
+
font-weight: 700;
|
|
179
|
+
color: var(--text-primary);
|
|
180
|
+
line-height: 1;
|
|
181
|
+
letter-spacing: -0.03em;
|
|
182
|
+
}
|
|
183
|
+
.stat-label {
|
|
184
|
+
font-size: 0.68rem;
|
|
185
|
+
font-weight: 500;
|
|
186
|
+
letter-spacing: 0.18em;
|
|
187
|
+
text-transform: uppercase;
|
|
188
|
+
color: rgba(203,213,225,0.92);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* --- Agent dot --- */
|
|
192
|
+
.agent-dot {
|
|
193
|
+
width: 10px;
|
|
194
|
+
height: 10px;
|
|
195
|
+
border-radius: 50%;
|
|
196
|
+
flex-shrink: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* --- Heatmap --- */
|
|
200
|
+
.heatmap-row { display: flex; gap: 3px; }
|
|
201
|
+
.heatmap-cell {
|
|
202
|
+
width: 11px;
|
|
203
|
+
height: 11px;
|
|
204
|
+
border-radius: 2px;
|
|
205
|
+
background: rgba(71,85,105,0.2);
|
|
206
|
+
}
|
|
207
|
+
.heatmap-cell.l1 { background: rgba(45,212,191,0.2); }
|
|
208
|
+
.heatmap-cell.l2 { background: rgba(45,212,191,0.4); }
|
|
209
|
+
.heatmap-cell.l3 { background: rgba(45,212,191,0.65); }
|
|
210
|
+
.heatmap-cell.l4 { background: rgba(45,212,191,0.9); }
|
|
211
|
+
|
|
212
|
+
/* --- Feature cards with app gradients --- */
|
|
213
|
+
.feature-card {
|
|
214
|
+
border-radius: 1.5rem;
|
|
215
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
216
|
+
padding: 2rem;
|
|
217
|
+
backdrop-filter: blur(12px);
|
|
218
|
+
-webkit-backdrop-filter: blur(12px);
|
|
219
|
+
transition: transform 0.2s, border-color 0.2s;
|
|
220
|
+
}
|
|
221
|
+
.feature-card:hover {
|
|
222
|
+
transform: translateY(-2px);
|
|
223
|
+
border-color: rgba(255,255,255,0.18);
|
|
224
|
+
}
|
|
225
|
+
.feature-agents { background: linear-gradient(142deg, rgba(10,45,85,0.8), rgba(8,80,105,0.72), rgba(56,189,248,0.2)); }
|
|
226
|
+
.feature-tokens { background: linear-gradient(140deg, rgba(22,36,86,0.8), rgba(10,73,107,0.72), rgba(34,197,94,0.15)); }
|
|
227
|
+
.feature-heatmap { background: linear-gradient(145deg, rgba(4,32,62,0.85), rgba(2,75,82,0.72), rgba(45,212,191,0.2)); }
|
|
228
|
+
.feature-tray { background: linear-gradient(145deg, rgba(12,37,89,0.82), rgba(7,75,121,0.7), rgba(56,189,248,0.18)); }
|
|
229
|
+
|
|
230
|
+
/* --- Agent badge --- */
|
|
231
|
+
.agent-badge {
|
|
232
|
+
display: flex;
|
|
233
|
+
flex-direction: column;
|
|
234
|
+
align-items: center;
|
|
235
|
+
gap: 0.75rem;
|
|
236
|
+
padding: 1.25rem 1rem;
|
|
237
|
+
border-radius: 1.2rem;
|
|
238
|
+
border: 1px solid rgba(255,255,255,0.08);
|
|
239
|
+
background: rgba(2,6,23,0.37);
|
|
240
|
+
backdrop-filter: blur(8px);
|
|
241
|
+
-webkit-backdrop-filter: blur(8px);
|
|
242
|
+
transition: border-color 0.2s, transform 0.2s;
|
|
243
|
+
}
|
|
244
|
+
.agent-badge:hover {
|
|
245
|
+
transform: translateY(-2px);
|
|
246
|
+
}
|
|
247
|
+
.agent-ring {
|
|
248
|
+
width: 52px;
|
|
249
|
+
height: 52px;
|
|
250
|
+
border-radius: 14px;
|
|
251
|
+
display: flex;
|
|
252
|
+
align-items: center;
|
|
253
|
+
justify-content: center;
|
|
254
|
+
font-weight: 700;
|
|
255
|
+
font-size: 0.8rem;
|
|
256
|
+
letter-spacing: 0.05em;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* --- Code block --- */
|
|
260
|
+
.code-block {
|
|
261
|
+
font-family: "JetBrains Mono", "Menlo", monospace;
|
|
262
|
+
font-size: 0.82rem;
|
|
263
|
+
line-height: 1.8;
|
|
264
|
+
}
|
|
265
|
+
.code-prompt {
|
|
266
|
+
color: var(--text-muted);
|
|
267
|
+
user-select: none;
|
|
268
|
+
}
|
|
269
|
+
.code-cmd { color: var(--text-primary); }
|
|
270
|
+
|
|
271
|
+
/* --- Ring progress (matches app DashboardCharts) --- */
|
|
272
|
+
.ring-track { stroke: rgba(71,85,105,0.3); }
|
|
273
|
+
.ring-fill {
|
|
274
|
+
stroke: url(#ring-grad);
|
|
275
|
+
stroke-linecap: round;
|
|
276
|
+
transform: rotate(-90deg);
|
|
277
|
+
transform-origin: center;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* --- Layout helpers --- */
|
|
281
|
+
.container { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
|
|
282
|
+
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
|
|
283
|
+
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
|
|
284
|
+
.grid-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
|
|
285
|
+
@media (min-width: 640px) { .grid-agents { grid-template-columns: repeat(6, 1fr); } }
|
|
286
|
+
|
|
287
|
+
/* --- Sections --- */
|
|
288
|
+
section { padding: 5rem 0; }
|
|
289
|
+
section + section { border-top: 1px solid var(--border-subtle); }
|
|
290
|
+
|
|
291
|
+
/* --- Footer --- */
|
|
292
|
+
footer { border-top: 1px solid var(--border-subtle); }
|
|
293
|
+
|
|
294
|
+
/* --- Scroll fade-in --- */
|
|
295
|
+
.reveal {
|
|
296
|
+
opacity: 0;
|
|
297
|
+
transform: translateY(20px);
|
|
298
|
+
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
299
|
+
}
|
|
300
|
+
.reveal.visible {
|
|
301
|
+
opacity: 1;
|
|
302
|
+
transform: none;
|
|
303
|
+
}
|
|
304
|
+
</style>
|
|
305
|
+
</head>
|
|
306
|
+
<body>
|
|
307
|
+
|
|
308
|
+
<!-- Hero -->
|
|
309
|
+
<section class="hero">
|
|
310
|
+
<!-- Floating orbs -->
|
|
311
|
+
<div class="hero-orbs">
|
|
312
|
+
<div class="hero-orb" style="width:500px;height:500px;top:-20%;right:-5%;background:rgba(59,130,246,0.15);animation-delay:0s;"></div>
|
|
313
|
+
<div class="hero-orb" style="width:400px;height:400px;bottom:-10%;left:-10%;background:rgba(20,184,166,0.12);animation-delay:-7s;"></div>
|
|
314
|
+
<div class="hero-orb" style="width:250px;height:250px;top:30%;left:50%;background:rgba(139,92,246,0.1);animation-delay:-13s;"></div>
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
<div class="container" style="position:relative;z-index:1;">
|
|
318
|
+
<!-- Icon + Title -->
|
|
319
|
+
<div style="text-align:center;margin-bottom:3.5rem;">
|
|
320
|
+
<img src="icon.png" alt="AI Wrapped" width="88" height="88"
|
|
321
|
+
style="border-radius:1.25rem;margin-bottom:1.5rem;box-shadow:0 0 40px rgba(56,189,248,0.15);">
|
|
322
|
+
<p class="kicker" style="margin-bottom:0.75rem;">Your year in AI</p>
|
|
323
|
+
<h1 class="headline">
|
|
324
|
+
AI <span class="gradient-text">Wrapped</span>
|
|
325
|
+
</h1>
|
|
326
|
+
<p style="max-width:34rem;margin:1rem auto 2rem;font-size:1.1rem;color:var(--text-muted);line-height:1.6;">
|
|
327
|
+
A Spotify Wrapped-style desktop dashboard for your AI coding agents.
|
|
328
|
+
See your tokens, costs, and activity — beautifully visualized.
|
|
329
|
+
</p>
|
|
330
|
+
<div style="display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;">
|
|
331
|
+
<a href="https://github.com/gulivan/ai-wrapped" target="_blank" rel="noopener" class="btn-pill btn-primary">
|
|
332
|
+
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
333
|
+
View on GitHub
|
|
334
|
+
</a>
|
|
335
|
+
<a href="#install" class="btn-pill btn-ghost">Get Started</a>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<!-- Wrapped preview card -->
|
|
340
|
+
<div class="wrapped-preview" style="max-width:44rem;margin:0 auto;padding:2.5rem 2rem;">
|
|
341
|
+
<p class="kicker" style="margin-bottom:1.5rem;">Your 2025 Wrapped</p>
|
|
342
|
+
|
|
343
|
+
<!-- Stats row -->
|
|
344
|
+
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;">
|
|
345
|
+
<div>
|
|
346
|
+
<div class="stat-number">142</div>
|
|
347
|
+
<div class="stat-label" style="margin-top:0.25rem;">Sessions</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div>
|
|
350
|
+
<div class="stat-number">2.1<span style="font-size:0.5em;font-weight:500;letter-spacing:0;">M</span></div>
|
|
351
|
+
<div class="stat-label" style="margin-top:0.25rem;">Tokens</div>
|
|
352
|
+
</div>
|
|
353
|
+
<div>
|
|
354
|
+
<div class="stat-number">$47</div>
|
|
355
|
+
<div class="stat-label" style="margin-top:0.25rem;">Total Cost</div>
|
|
356
|
+
</div>
|
|
357
|
+
<div>
|
|
358
|
+
<div class="stat-number">891</div>
|
|
359
|
+
<div class="stat-label" style="margin-top:0.25rem;">Tool Calls</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
<!-- Mini tiles row -->
|
|
364
|
+
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
|
|
365
|
+
<!-- Agent breakdown -->
|
|
366
|
+
<div class="glass-tile" style="padding:1.25rem;">
|
|
367
|
+
<div class="stat-label" style="margin-bottom:0.75rem;">Top Agents</div>
|
|
368
|
+
<div style="display:flex;flex-direction:column;gap:0.5rem;">
|
|
369
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
370
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="flex-shrink:0;"><path fill="var(--agent-claude)" d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z"/></svg>
|
|
371
|
+
<span style="font-size:0.82rem;color:var(--text-primary);flex:1;">Claude Code</span>
|
|
372
|
+
<span style="font-size:0.82rem;color:var(--text-muted);font-variant-numeric:tabular-nums;">68%</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
375
|
+
<span style="font-size:0.65rem;flex-shrink:0;width:14px;text-align:center;">🛸</span>
|
|
376
|
+
<span style="font-size:0.82rem;color:var(--text-primary);flex:1;">Copilot</span>
|
|
377
|
+
<span style="font-size:0.82rem;color:var(--text-muted);font-variant-numeric:tabular-nums;">18%</span>
|
|
378
|
+
</div>
|
|
379
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
380
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="flex-shrink:0;"><path fill="var(--agent-gemini)" d="M24 12.024c-6.437.388-11.59 5.539-11.977 11.976h-.047C11.588 17.563 6.436 12.412 0 12.024v-.047C6.437 11.588 11.588 6.437 11.976 0h.047c.388 6.437 5.54 11.588 11.977 11.977z"/></svg>
|
|
381
|
+
<span style="font-size:0.82rem;color:var(--text-primary);flex:1;">Gemini CLI</span>
|
|
382
|
+
<span style="font-size:0.82rem;color:var(--text-muted);font-variant-numeric:tabular-nums;">14%</span>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<!-- Activity ring -->
|
|
388
|
+
<div class="glass-tile" style="padding:1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;">
|
|
389
|
+
<svg width="80" height="80" viewBox="0 0 80 80">
|
|
390
|
+
<defs>
|
|
391
|
+
<linearGradient id="ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
392
|
+
<stop offset="0%" stop-color="#22d3ee"/>
|
|
393
|
+
<stop offset="100%" stop-color="#0ea5e9"/>
|
|
394
|
+
</linearGradient>
|
|
395
|
+
</defs>
|
|
396
|
+
<circle cx="40" cy="40" r="32" fill="none" stroke-width="6" class="ring-track"/>
|
|
397
|
+
<circle cx="40" cy="40" r="32" fill="none" stroke-width="6" class="ring-fill"
|
|
398
|
+
stroke-dasharray="201" stroke-dashoffset="40"/>
|
|
399
|
+
</svg>
|
|
400
|
+
<div style="margin-top:0.5rem;text-align:center;">
|
|
401
|
+
<div style="font-size:1.1rem;font-weight:600;color:var(--text-primary);">80%</div>
|
|
402
|
+
<div class="stat-label">Active Days</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
</section>
|
|
409
|
+
|
|
410
|
+
<!-- Features -->
|
|
411
|
+
<section>
|
|
412
|
+
<div class="container reveal">
|
|
413
|
+
<div style="text-align:center;margin-bottom:3rem;">
|
|
414
|
+
<p class="kicker" style="margin-bottom:0.5rem;">Features</p>
|
|
415
|
+
<h2 class="section-title">Everything about your AI usage</h2>
|
|
416
|
+
</div>
|
|
417
|
+
|
|
418
|
+
<div class="grid-2">
|
|
419
|
+
<div class="feature-card feature-agents">
|
|
420
|
+
<div style="display:flex;gap:6px;margin-bottom:1.25rem;">
|
|
421
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.2);border:1px solid rgba(245,158,11,0.3);"></div>
|
|
422
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(20,184,166,0.2);border:1px solid rgba(20,184,166,0.3);"></div>
|
|
423
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(96,165,250,0.2);border:1px solid rgba(96,165,250,0.3);"></div>
|
|
424
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(249,115,22,0.2);border:1px solid rgba(249,115,22,0.3);"></div>
|
|
425
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(52,211,153,0.2);border:1px solid rgba(52,211,153,0.3);"></div>
|
|
426
|
+
<div style="width:28px;height:28px;border-radius:8px;background:rgba(244,63,94,0.2);border:1px solid rgba(244,63,94,0.3);"></div>
|
|
427
|
+
</div>
|
|
428
|
+
<h3 style="font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;">6 Agents, One View</h3>
|
|
429
|
+
<p style="font-size:0.88rem;color:var(--text-muted);line-height:1.6;">Claude Code, Codex, Gemini CLI, OpenCode, Droid, and Copilot — parsed and unified from local session files.</p>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<div class="feature-card feature-tokens">
|
|
433
|
+
<div style="display:flex;align-items:baseline;gap:0.5rem;margin-bottom:1.25rem;">
|
|
434
|
+
<span style="font-size:1.8rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.03em;">$47.20</span>
|
|
435
|
+
<span style="font-size:0.75rem;color:var(--accent-teal);">this month</span>
|
|
436
|
+
</div>
|
|
437
|
+
<h3 style="font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;">Token & Cost Tracking</h3>
|
|
438
|
+
<p style="font-size:0.88rem;color:var(--text-muted);line-height:1.6;">Exactly how many tokens you've burned and what it costs. Broken down by model — Opus, Sonnet, GPT-4o, Gemini Pro.</p>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<div class="feature-card feature-heatmap">
|
|
442
|
+
<!-- Mini heatmap -->
|
|
443
|
+
<div style="display:flex;flex-direction:column;gap:3px;margin-bottom:1.25rem;">
|
|
444
|
+
<div class="heatmap-row">
|
|
445
|
+
<div class="heatmap-cell"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l3"></div>
|
|
446
|
+
</div>
|
|
447
|
+
<div class="heatmap-row">
|
|
448
|
+
<div class="heatmap-cell l1"></div><div class="heatmap-cell"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l2"></div>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="heatmap-row">
|
|
451
|
+
<div class="heatmap-cell l2"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l3"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l2"></div><div class="heatmap-cell"></div><div class="heatmap-cell l4"></div><div class="heatmap-cell l1"></div><div class="heatmap-cell l3"></div>
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
<h3 style="font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;">Daily Activity Heatmap</h3>
|
|
455
|
+
<p style="font-size:0.88rem;color:var(--text-muted);line-height:1.6;">Contribution-style graph showing daily AI usage. Spot patterns in when and how intensely you use each agent.</p>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="feature-card feature-tray">
|
|
459
|
+
<!-- Menu bar mockup -->
|
|
460
|
+
<div style="display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;background:rgba(2,6,23,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:0.6rem;margin-bottom:1.25rem;font-size:0.78rem;width:fit-content;">
|
|
461
|
+
<img src="icon.png" width="14" height="14" alt="" style="border-radius:3px;opacity:0.85;">
|
|
462
|
+
<span style="color:var(--text-primary);font-weight:500;">3 sessions</span>
|
|
463
|
+
<span style="color:var(--text-muted);">·</span>
|
|
464
|
+
<span style="color:var(--accent-cyan);">24k tokens</span>
|
|
465
|
+
<span style="color:var(--text-muted);">·</span>
|
|
466
|
+
<span style="color:var(--accent-teal);">$1.20</span>
|
|
467
|
+
</div>
|
|
468
|
+
<h3 style="font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;">System Tray Stats</h3>
|
|
469
|
+
<p style="font-size:0.88rem;color:var(--text-muted);line-height:1.6;">Today's session count, tokens, and cost live in your menu bar. Always visible, never in the way.</p>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
</section>
|
|
474
|
+
|
|
475
|
+
<!-- Supported Agents -->
|
|
476
|
+
<section>
|
|
477
|
+
<div class="container reveal">
|
|
478
|
+
<div style="text-align:center;margin-bottom:3rem;">
|
|
479
|
+
<p class="kicker" style="margin-bottom:0.5rem;">Compatibility</p>
|
|
480
|
+
<h2 class="section-title">Supported Agents</h2>
|
|
481
|
+
<p style="color:var(--text-muted);margin-top:0.75rem;max-width:28rem;margin-left:auto;margin-right:auto;font-size:0.95rem;">
|
|
482
|
+
Reads session logs directly from disk. No API keys, no cloud, fully local.
|
|
483
|
+
</p>
|
|
484
|
+
</div>
|
|
485
|
+
|
|
486
|
+
<div class="grid-agents" style="max-width:40rem;margin:0 auto;">
|
|
487
|
+
<div class="agent-badge" style="border-color:rgba(245,158,11,0.15);">
|
|
488
|
+
<div class="agent-ring" style="background:rgba(245,158,11,0.12);color:var(--agent-claude);">
|
|
489
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z"/></svg>
|
|
490
|
+
</div>
|
|
491
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">Claude Code</span>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="agent-badge" style="border-color:rgba(20,184,166,0.15);">
|
|
494
|
+
<div class="agent-ring" style="background:rgba(20,184,166,0.12);color:var(--agent-codex);">
|
|
495
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"/></svg>
|
|
496
|
+
</div>
|
|
497
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">Codex</span>
|
|
498
|
+
</div>
|
|
499
|
+
<div class="agent-badge" style="border-color:rgba(96,165,250,0.15);">
|
|
500
|
+
<div class="agent-ring" style="background:rgba(96,165,250,0.12);color:var(--agent-gemini);">
|
|
501
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12.024c-6.437.388-11.59 5.539-11.977 11.976h-.047C11.588 17.563 6.436 12.412 0 12.024v-.047C6.437 11.588 11.588 6.437 11.976 0h.047c.388 6.437 5.54 11.588 11.977 11.977z"/></svg>
|
|
502
|
+
</div>
|
|
503
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">Gemini CLI</span>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="agent-badge" style="border-color:rgba(249,115,22,0.15);">
|
|
506
|
+
<div class="agent-ring" style="background:rgba(249,115,22,0.12);font-size:1.4rem;">💻</div>
|
|
507
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">OpenCode</span>
|
|
508
|
+
</div>
|
|
509
|
+
<div class="agent-badge" style="border-color:rgba(52,211,153,0.15);">
|
|
510
|
+
<div class="agent-ring" style="background:rgba(52,211,153,0.12);font-size:1.4rem;">🤖</div>
|
|
511
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">Droid</span>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="agent-badge" style="border-color:rgba(244,63,94,0.15);">
|
|
514
|
+
<div class="agent-ring" style="background:rgba(244,63,94,0.12);font-size:1.4rem;">🛸</div>
|
|
515
|
+
<span style="font-size:0.82rem;font-weight:500;color:var(--text-primary);">Copilot</span>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
</section>
|
|
520
|
+
|
|
521
|
+
<!-- Install -->
|
|
522
|
+
<section id="install">
|
|
523
|
+
<div class="container reveal">
|
|
524
|
+
<div style="text-align:center;margin-bottom:3rem;">
|
|
525
|
+
<p class="kicker" style="margin-bottom:0.5rem;">Get Started</p>
|
|
526
|
+
<h2 class="section-title">Clone, install, run</h2>
|
|
527
|
+
</div>
|
|
528
|
+
|
|
529
|
+
<div style="max-width:36rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem;">
|
|
530
|
+
<div class="glass-card" style="padding:1.75rem;border-radius:1.2rem;">
|
|
531
|
+
<div class="code-block">
|
|
532
|
+
<div><span class="code-prompt">$ </span><span class="code-cmd">git clone https://github.com/gulivan/ai-wrapped.git</span></div>
|
|
533
|
+
<div><span class="code-prompt">$ </span><span class="code-cmd">cd ai-wrapped</span></div>
|
|
534
|
+
<div><span class="code-prompt">$ </span><span class="code-cmd">bun install</span></div>
|
|
535
|
+
<div><span class="code-prompt">$ </span><span class="code-cmd">bun run dev</span></div>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
|
|
539
|
+
<div class="glass-tile" style="padding:1.25rem 1.5rem;">
|
|
540
|
+
<div class="stat-label" style="margin-bottom:0.75rem;">Requirements</div>
|
|
541
|
+
<div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.88rem;">
|
|
542
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
543
|
+
<svg width="14" height="14" fill="none" stroke="var(--accent-teal)" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
544
|
+
<span>macOS (native webview via <a href="https://electrobun.dev" target="_blank" rel="noopener" style="color:var(--accent-cyan);text-decoration:none;border-bottom:1px solid rgba(34,211,238,0.3);">Electrobun</a>)</span>
|
|
545
|
+
</div>
|
|
546
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
547
|
+
<svg width="14" height="14" fill="none" stroke="var(--accent-teal)" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
548
|
+
<span><a href="https://bun.sh" target="_blank" rel="noopener" style="color:var(--accent-cyan);text-decoration:none;border-bottom:1px solid rgba(34,211,238,0.3);">Bun</a> runtime</span>
|
|
549
|
+
</div>
|
|
550
|
+
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
551
|
+
<svg width="14" height="14" fill="none" stroke="var(--accent-teal)" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
552
|
+
<span>At least one AI coding agent with local session logs</span>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
</section>
|
|
559
|
+
|
|
560
|
+
<!-- Footer -->
|
|
561
|
+
<footer>
|
|
562
|
+
<div class="container" style="padding-top:2rem;padding-bottom:2rem;display:flex;align-items:center;justify-content:space-between;font-size:0.82rem;color:var(--text-muted);">
|
|
563
|
+
<span>MIT License</span>
|
|
564
|
+
<a href="https://github.com/gulivan/ai-wrapped" target="_blank" rel="noopener" style="color:var(--text-muted);text-decoration:none;display:flex;align-items:center;gap:0.4rem;transition:color 0.2s;">
|
|
565
|
+
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
566
|
+
gulivan/ai-wrapped
|
|
567
|
+
</a>
|
|
568
|
+
</div>
|
|
569
|
+
</footer>
|
|
570
|
+
|
|
571
|
+
<!-- Scroll reveal -->
|
|
572
|
+
<script>
|
|
573
|
+
const reveals = document.querySelectorAll('.reveal');
|
|
574
|
+
const observer = new IntersectionObserver((entries) => {
|
|
575
|
+
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
|
|
576
|
+
}, { threshold: 0.15 });
|
|
577
|
+
reveals.forEach(el => observer.observe(el));
|
|
578
|
+
</script>
|
|
579
|
+
|
|
580
|
+
</body>
|
|
581
|
+
</html>
|
package/electrobun.config.ts
CHANGED
|
@@ -17,9 +17,10 @@ export default {
|
|
|
17
17
|
"dist/index.html": "views/mainview/index.html",
|
|
18
18
|
"dist/assets": "views/mainview/assets",
|
|
19
19
|
"public/tray-icon.png": "views/mainview/tray-icon.png",
|
|
20
|
+
"public/tray-icon@2x.png": "views/mainview/tray-icon@2x.png",
|
|
20
21
|
},
|
|
21
|
-
mac: { bundleCEF: false },
|
|
22
|
-
linux: { bundleCEF: true },
|
|
23
|
-
win: { bundleCEF: false },
|
|
22
|
+
mac: { bundleCEF: false, icons: "icon.iconset" },
|
|
23
|
+
linux: { bundleCEF: true, icon: "icon.png" },
|
|
24
|
+
win: { bundleCEF: false, icon: "icon.ico" },
|
|
24
25
|
},
|
|
25
26
|
} satisfies ElectrobunConfig;
|
package/icon.icns
ADDED
|
Binary file
|
package/icon.ico
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|