agentacta 1.0.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.
@@ -0,0 +1,72 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
2
+ <defs>
3
+ <!-- Background gradient — deep rich navy -->
4
+ <linearGradient id="bg" x1="0" y1="0" x2="0.3" y2="1">
5
+ <stop offset="0%" stop-color="#1a2744"/>
6
+ <stop offset="100%" stop-color="#0f1a30"/>
7
+ </linearGradient>
8
+
9
+ <!-- Subtle inner glow -->
10
+ <radialGradient id="innerGlow" cx="50%" cy="40%" r="60%">
11
+ <stop offset="0%" stop-color="rgba(140,170,220,0.08)"/>
12
+ <stop offset="100%" stop-color="rgba(140,170,220,0)"/>
13
+ </radialGradient>
14
+
15
+ <!-- Column surface -->
16
+ <linearGradient id="colSurface" x1="0" y1="0" x2="1" y2="0">
17
+ <stop offset="0%" stop-color="rgba(255,255,255,0.85)"/>
18
+ <stop offset="15%" stop-color="rgba(255,255,255,0.95)"/>
19
+ <stop offset="50%" stop-color="#ffffff"/>
20
+ <stop offset="85%" stop-color="rgba(255,255,255,0.92)"/>
21
+ <stop offset="100%" stop-color="rgba(255,255,255,0.82)"/>
22
+ </linearGradient>
23
+
24
+ <!-- Flute shadow -->
25
+ <linearGradient id="flute" x1="0" y1="0" x2="1" y2="0">
26
+ <stop offset="0%" stop-color="rgba(0,0,0,0.04)"/>
27
+ <stop offset="50%" stop-color="rgba(0,0,0,0)"/>
28
+ <stop offset="100%" stop-color="rgba(0,0,0,0.04)"/>
29
+ </linearGradient>
30
+ </defs>
31
+
32
+ <!-- Background -->
33
+ <rect width="1024" height="1024" rx="0" fill="url(#bg)"/>
34
+ <rect width="1024" height="1024" fill="url(#innerGlow)"/>
35
+
36
+ <!-- Column — Ionic style, simplified -->
37
+
38
+ <!-- Column base -->
39
+ <rect x="350" y="780" width="324" height="28" rx="4" fill="url(#colSurface)"/>
40
+ <rect x="370" y="760" width="284" height="24" rx="3" fill="url(#colSurface)"/>
41
+
42
+ <!-- Column shaft -->
43
+ <rect x="400" y="290" width="224" height="474" rx="6" fill="url(#colSurface)"/>
44
+
45
+ <!-- Fluting lines on shaft -->
46
+ <rect x="430" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
47
+ <rect x="462" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
48
+ <rect x="494" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
49
+ <rect x="526" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
50
+ <rect x="558" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
51
+ <rect x="590" y="295" width="2" height="464" fill="rgba(0,0,0,0.04)"/>
52
+
53
+ <!-- Capital (top piece) -->
54
+ <rect x="370" y="260" width="284" height="34" rx="4" fill="url(#colSurface)"/>
55
+ <rect x="350" y="240" width="324" height="26" rx="5" fill="url(#colSurface)"/>
56
+
57
+ <!-- Inscribed lines on the shaft — the "acta" records -->
58
+ <rect x="432" y="380" width="160" height="4" rx="1" fill="rgba(200,180,140,0.35)"/>
59
+ <rect x="432" y="410" width="140" height="4" rx="1" fill="rgba(200,180,140,0.3)"/>
60
+ <rect x="432" y="440" width="155" height="4" rx="1" fill="rgba(200,180,140,0.28)"/>
61
+ <rect x="432" y="470" width="125" height="4" rx="1" fill="rgba(200,180,140,0.25)"/>
62
+ <rect x="432" y="500" width="150" height="4" rx="1" fill="rgba(200,180,140,0.3)"/>
63
+ <rect x="432" y="530" width="130" height="4" rx="1" fill="rgba(200,180,140,0.25)"/>
64
+ <rect x="432" y="560" width="145" height="4" rx="1" fill="rgba(200,180,140,0.22)"/>
65
+ <rect x="432" y="590" width="110" height="4" rx="1" fill="rgba(200,180,140,0.2)"/>
66
+ <rect x="432" y="620" width="140" height="4" rx="1" fill="rgba(200,180,140,0.22)"/>
67
+ <rect x="432" y="650" width="100" height="4" rx="1" fill="rgba(200,180,140,0.18)"/>
68
+
69
+ <!-- Cursor — at the end of the last line -->
70
+ <rect x="536" y="645" width="3.5" height="16" rx="1.5" fill="#58a6ff" opacity="0.9"/>
71
+ <circle cx="538" cy="653" r="10" fill="rgba(88,166,255,0.15)"/>
72
+ </svg>
@@ -0,0 +1,50 @@
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.0, viewport-fit=cover">
6
+ <title>AgentActa</title>
7
+ <link rel="stylesheet" href="/style.css">
8
+ <link rel="manifest" href="/manifest.json">
9
+ <meta name="theme-color" content="#1a2744">
10
+ <meta name="apple-mobile-web-app-capable" content="yes">
11
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
+ <link rel="apple-touch-icon" href="/icon-192.png">
13
+ <link rel="icon" type="image/svg+xml" href="/icon.svg">
14
+ <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
15
+ </head>
16
+ <body>
17
+ <div class="app">
18
+ <nav class="sidebar">
19
+ <h1>Agent<span>Acta</span></h1>
20
+ <div class="nav-item" data-view="sessions">
21
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
22
+ Sessions
23
+ </div>
24
+ <div class="nav-item" data-view="timeline">
25
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
26
+ Timeline
27
+ </div>
28
+ <div class="nav-item active" data-view="search">
29
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
30
+ Search
31
+ </div>
32
+ <div class="nav-item" data-view="files">
33
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
34
+ Files
35
+ </div>
36
+ <div class="nav-item" data-view="stats">
37
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
38
+ Stats
39
+ </div>
40
+ </nav>
41
+ <main class="main" id="content"></main>
42
+ </div>
43
+ <script src="/app.js"></script>
44
+ <script>
45
+ if ('serviceWorker' in navigator) {
46
+ navigator.serviceWorker.register('/sw.js').catch(() => {});
47
+ }
48
+ </script>
49
+ </body>
50
+ </html>
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "AgentActa",
3
+ "short_name": "AgentActa",
4
+ "description": "Agent audit trail and search",
5
+ "start_url": "/",
6
+ "display": "standalone",
7
+ "background_color": "#0f1a30",
8
+ "theme_color": "#1a2744",
9
+ "icons": [
10
+ {
11
+ "src": "/icon.svg",
12
+ "sizes": "any",
13
+ "type": "image/svg+xml"
14
+ },
15
+ {
16
+ "src": "/icon-192.png",
17
+ "sizes": "192x192",
18
+ "type": "image/png"
19
+ },
20
+ {
21
+ "src": "/icon-512.png",
22
+ "sizes": "512x512",
23
+ "type": "image/png"
24
+ }
25
+ ]
26
+ }
@@ -0,0 +1,562 @@
1
+ :root {
2
+ --bg: #0d1117;
3
+ --bg2: #161b22;
4
+ --bg3: #21262d;
5
+ --border: #30363d;
6
+ --text: #e6edf3;
7
+ --text2: #8b949e;
8
+ --accent: #58a6ff;
9
+ --accent2: #3fb950;
10
+ --accent-bg: rgba(88, 166, 255, 0.15);
11
+ --orange: #d29922;
12
+ --red: #f85149;
13
+ --purple: #bc8cff;
14
+ --radius: 8px;
15
+ --mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
16
+ }
17
+
18
+ * { margin: 0; padding: 0; box-sizing: border-box; }
19
+
20
+ /* Fixed status bar cover for PWA standalone mode */
21
+ @supports (padding-top: env(safe-area-inset-top)) {
22
+ body::before {
23
+ content: '';
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ height: env(safe-area-inset-top, 0px);
29
+ background: var(--bg);
30
+ z-index: 200;
31
+ }
32
+ }
33
+
34
+ body {
35
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
36
+ background: var(--bg);
37
+ color: var(--text);
38
+ line-height: 1.5;
39
+ min-height: 100vh;
40
+ }
41
+
42
+ /* Layout */
43
+ .app { display: flex; min-height: 100vh; }
44
+
45
+ .sidebar {
46
+ width: 220px;
47
+ background: var(--bg2);
48
+ border-right: 1px solid var(--border);
49
+ padding: 20px 0;
50
+ flex-shrink: 0;
51
+ position: fixed;
52
+ top: 0;
53
+ left: 0;
54
+ bottom: 0;
55
+ overflow-y: auto;
56
+ }
57
+
58
+ .sidebar h1 {
59
+ font-size: 16px;
60
+ font-weight: 600;
61
+ padding: 0 20px 16px;
62
+ color: var(--text);
63
+ letter-spacing: -0.3px;
64
+ }
65
+
66
+ .sidebar h1 span { color: var(--accent); }
67
+
68
+ .nav-item {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 10px;
72
+ padding: 8px 20px;
73
+ color: var(--text2);
74
+ cursor: pointer;
75
+ font-size: 14px;
76
+ transition: all 0.15s;
77
+ border-left: 2px solid transparent;
78
+ }
79
+
80
+ .nav-item:hover { color: var(--text); background: var(--bg3); }
81
+ .nav-item.active { color: var(--text); border-left-color: var(--accent); background: var(--bg3); }
82
+
83
+ .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
84
+
85
+ .main {
86
+ flex: 1;
87
+ margin-left: 220px;
88
+ padding: 24px 32px;
89
+ max-width: 1100px;
90
+ }
91
+
92
+ /* Search */
93
+ .search-bar {
94
+ position: relative;
95
+ margin-bottom: 20px;
96
+ }
97
+
98
+ .search-bar input {
99
+ width: 100%;
100
+ background: var(--bg2);
101
+ border: 1px solid var(--border);
102
+ border-radius: var(--radius);
103
+ padding: 12px 16px 12px 42px;
104
+ color: var(--text);
105
+ font-size: 15px;
106
+ outline: none;
107
+ transition: border-color 0.2s;
108
+ }
109
+
110
+ .search-bar input:focus { border-color: var(--accent); }
111
+ .search-bar input::placeholder { color: var(--text2); }
112
+
113
+ .search-bar svg {
114
+ position: absolute;
115
+ left: 14px;
116
+ top: 50%;
117
+ transform: translateY(-50%);
118
+ color: var(--text2);
119
+ width: 18px;
120
+ height: 18px;
121
+ }
122
+
123
+ .filters {
124
+ display: flex;
125
+ gap: 10px;
126
+ margin-bottom: 20px;
127
+ flex-wrap: wrap;
128
+ }
129
+
130
+ .filter-chip {
131
+ padding: 4px 12px;
132
+ border-radius: 20px;
133
+ border: 1px solid var(--border);
134
+ background: var(--bg2);
135
+ color: var(--text2);
136
+ font-size: 13px;
137
+ cursor: pointer;
138
+ transition: all 0.15s;
139
+ }
140
+
141
+ .filter-chip:hover { border-color: var(--accent); color: var(--text); }
142
+ .filter-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,0.1); }
143
+
144
+ /* Cards */
145
+ .stat-grid {
146
+ display: grid;
147
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
148
+ gap: 12px;
149
+ margin-bottom: 28px;
150
+ }
151
+
152
+ .stat-card {
153
+ background: var(--bg2);
154
+ border: 1px solid var(--border);
155
+ border-radius: var(--radius);
156
+ padding: 16px 20px;
157
+ }
158
+
159
+ .stat-card .label { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
160
+ .stat-card .value { font-size: 28px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
161
+
162
+ /* Session list */
163
+ .session-item {
164
+ background: var(--bg2);
165
+ border: 1px solid var(--border);
166
+ border-radius: var(--radius);
167
+ padding: 14px 18px;
168
+ margin-bottom: 8px;
169
+ cursor: pointer;
170
+ transition: all 0.15s;
171
+ }
172
+
173
+ .session-item:hover { border-color: var(--accent); }
174
+
175
+ .session-header {
176
+ display: flex;
177
+ justify-content: space-between;
178
+ align-items: center;
179
+ margin-bottom: 6px;
180
+ }
181
+
182
+ .session-time { font-size: 13px; color: var(--text2); font-family: var(--mono); }
183
+ .session-model { font-size: 11px; color: var(--purple); background: rgba(188,140,255,0.1); padding: 2px 8px; border-radius: 10px; }
184
+ .session-summary { font-size: 14px; color: var(--text); line-height: 1.4; }
185
+ .session-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text2); }
186
+ .session-meta span { display: flex; align-items: center; gap: 4px; }
187
+
188
+ /* Removed - initial prompt now shown in session detail view */
189
+
190
+ /* Event list / timeline */
191
+ .event-item {
192
+ display: flex;
193
+ gap: 14px;
194
+ padding: 12px 0;
195
+ border-bottom: 1px solid var(--border);
196
+ font-size: 14px;
197
+ }
198
+
199
+ .event-item:last-child { border-bottom: none; }
200
+
201
+ .event-time {
202
+ font-family: var(--mono);
203
+ font-size: 12px;
204
+ color: var(--text2);
205
+ white-space: nowrap;
206
+ min-width: 70px;
207
+ padding-top: 2px;
208
+ }
209
+
210
+ .event-badge {
211
+ font-size: 11px;
212
+ font-weight: 500;
213
+ padding: 2px 8px;
214
+ border-radius: 10px;
215
+ white-space: nowrap;
216
+ flex-shrink: 0;
217
+ }
218
+
219
+ .badge-message { color: var(--accent); background: rgba(88,166,255,0.1); }
220
+ .badge-user { color: var(--accent2); background: rgba(63,185,80,0.1); }
221
+ .badge-assistant { color: var(--purple); background: rgba(188,140,255,0.1); }
222
+ .badge-tool_call { color: var(--orange); background: rgba(210,153,34,0.1); }
223
+ .badge-tool_result { color: var(--text2); background: var(--bg3); }
224
+
225
+ .event-body { flex: 1; min-width: 0; }
226
+
227
+ .event-content {
228
+ white-space: pre-wrap;
229
+ word-break: break-word;
230
+ font-family: var(--mono);
231
+ font-size: 13px;
232
+ line-height: 1.6;
233
+ color: var(--text);
234
+ max-height: 300px;
235
+ overflow-y: auto;
236
+ }
237
+
238
+ .event-content.collapsed { max-height: 80px; overflow: hidden; position: relative; }
239
+ .event-content.collapsed::after {
240
+ content: '';
241
+ position: absolute;
242
+ bottom: 0;
243
+ left: 0;
244
+ right: 0;
245
+ height: 40px;
246
+ background: linear-gradient(transparent, var(--bg));
247
+ }
248
+
249
+ .tool-name { color: var(--orange); font-weight: 600; font-family: var(--mono); font-size: 13px; }
250
+ .tool-args {
251
+ background: var(--bg3);
252
+ border-radius: 6px;
253
+ padding: 8px 12px;
254
+ margin-top: 6px;
255
+ font-family: var(--mono);
256
+ font-size: 12px;
257
+ color: var(--text2);
258
+ max-height: 200px;
259
+ overflow-y: auto;
260
+ white-space: pre-wrap;
261
+ word-break: break-all;
262
+ }
263
+
264
+ /* Search results */
265
+ .result-item {
266
+ background: var(--bg2);
267
+ border: 1px solid var(--border);
268
+ border-radius: var(--radius);
269
+ padding: 14px 18px;
270
+ margin-bottom: 8px;
271
+ }
272
+
273
+ .result-meta {
274
+ display: flex;
275
+ gap: 10px;
276
+ align-items: center;
277
+ margin-bottom: 8px;
278
+ font-size: 12px;
279
+ }
280
+
281
+ .result-content {
282
+ font-family: var(--mono);
283
+ font-size: 13px;
284
+ line-height: 1.6;
285
+ white-space: pre-wrap;
286
+ word-break: break-word;
287
+ max-height: 150px;
288
+ overflow: hidden;
289
+ color: var(--text);
290
+ }
291
+
292
+ mark { background: rgba(210,153,34,0.3); color: var(--text); border-radius: 2px; padding: 0 2px; }
293
+
294
+ /* Back button */
295
+ .back-btn {
296
+ display: inline-flex;
297
+ align-items: center;
298
+ gap: 6px;
299
+ color: var(--text2);
300
+ font-size: 13px;
301
+ cursor: pointer;
302
+ margin-bottom: 16px;
303
+ transition: color 0.15s;
304
+ }
305
+
306
+ .back-btn:hover { color: var(--text); }
307
+
308
+ /* Empty state */
309
+ .empty {
310
+ text-align: center;
311
+ padding: 60px 20px;
312
+ color: var(--text2);
313
+ }
314
+
315
+ .empty h2 { font-size: 18px; margin-bottom: 8px; color: var(--text); }
316
+
317
+ /* Loading */
318
+ .loading {
319
+ display: flex;
320
+ justify-content: center;
321
+ padding: 40px;
322
+ color: var(--text2);
323
+ }
324
+
325
+ /* Date input */
326
+ .date-input {
327
+ background: var(--bg2);
328
+ border: 1px solid var(--border);
329
+ border-radius: var(--radius);
330
+ padding: 8px 12px;
331
+ color: var(--text);
332
+ font-size: 14px;
333
+ outline: none;
334
+ margin-bottom: 16px;
335
+ }
336
+
337
+ .date-input:focus { border-color: var(--accent); }
338
+
339
+ /* Scrollbar */
340
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
341
+ ::-webkit-scrollbar-track { background: transparent; }
342
+ ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }
343
+ ::-webkit-scrollbar-thumb:hover { background: var(--border); }
344
+
345
+ /* Page title */
346
+ .page-title {
347
+ font-size: 20px;
348
+ font-weight: 600;
349
+ margin-bottom: 20px;
350
+ color: var(--text);
351
+ }
352
+
353
+ .section-label {
354
+ font-size: 12px;
355
+ color: var(--text2);
356
+ text-transform: uppercase;
357
+ letter-spacing: 0.5px;
358
+ margin-bottom: 12px;
359
+ margin-top: 24px;
360
+ }
361
+
362
+ .session-link {
363
+ font-size: 12px;
364
+ color: var(--accent);
365
+ cursor: pointer;
366
+ }
367
+
368
+ .session-link:hover { text-decoration: underline; }
369
+
370
+ /* Pull to refresh */
371
+ .ptr-indicator {
372
+ position: fixed;
373
+ top: 0;
374
+ left: 0;
375
+ right: 0;
376
+ text-align: center;
377
+ padding: 0;
378
+ color: var(--accent);
379
+ font-size: 13px;
380
+ font-weight: 500;
381
+ opacity: 0;
382
+ transition: opacity 0.2s, padding 0.2s;
383
+ z-index: 300;
384
+ background: var(--bg);
385
+ height: 0;
386
+ overflow: hidden;
387
+ padding-top: env(safe-area-inset-top, 0px);
388
+ }
389
+ .ptr-indicator.visible { opacity: 1; height: auto; padding: 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
390
+ .ptr-indicator.refreshing { color: var(--text2); }
391
+
392
+ /* File groups */
393
+ .file-group { margin-bottom: 4px; }
394
+ .file-group-header {
395
+ display: flex;
396
+ align-items: center;
397
+ gap: 10px;
398
+ padding: 10px 14px;
399
+ background: var(--bg2);
400
+ border: 1px solid var(--border);
401
+ border-radius: var(--radius);
402
+ cursor: pointer;
403
+ font-size: 14px;
404
+ transition: all 0.15s;
405
+ }
406
+ .file-group-header:hover { border-color: var(--accent); }
407
+ .file-group-arrow { color: var(--text2); font-size: 11px; width: 14px; }
408
+ .file-group-name { font-weight: 500; color: var(--accent); }
409
+ .file-group-items { padding-left: 16px; border-left: 2px solid var(--border); margin-left: 20px; margin-top: 4px; margin-bottom: 8px; }
410
+
411
+ /* Agent/type badges */
412
+ .session-agent {
413
+ font-size: 11px;
414
+ color: var(--accent2);
415
+ background: rgba(63,185,80,0.1);
416
+ padding: 2px 8px;
417
+ border-radius: 10px;
418
+ }
419
+
420
+ .session-type {
421
+ font-size: 11px;
422
+ color: var(--orange);
423
+ background: rgba(210,153,34,0.1);
424
+ padding: 2px 8px;
425
+ border-radius: 10px;
426
+ }
427
+
428
+ /* Export buttons */
429
+ .export-btn {
430
+ font-size: 12px;
431
+ color: var(--text2);
432
+ background: var(--bg3);
433
+ border: 1px solid var(--border);
434
+ border-radius: 6px;
435
+ padding: 4px 10px;
436
+ text-decoration: none;
437
+ cursor: pointer;
438
+ transition: all 0.15s;
439
+ }
440
+
441
+ .export-btn:hover { color: var(--text); border-color: var(--accent); }
442
+
443
+ /* Jump to start button */
444
+ .jump-to-start-btn {
445
+ font-size: 12px;
446
+ color: var(--accent2);
447
+ background: var(--bg3);
448
+ border: 1px solid var(--border);
449
+ border-radius: 6px;
450
+ padding: 4px 10px;
451
+ cursor: pointer;
452
+ transition: all 0.15s;
453
+ font-family: inherit;
454
+ }
455
+
456
+ .jump-to-start-btn:hover {
457
+ color: var(--text);
458
+ border-color: var(--accent2);
459
+ }
460
+
461
+ /* File activity */
462
+ .file-item {
463
+ background: var(--bg2);
464
+ border: 1px solid var(--border);
465
+ border-radius: var(--radius);
466
+ padding: 12px 18px;
467
+ margin-bottom: 6px;
468
+ cursor: pointer;
469
+ transition: all 0.15s;
470
+ }
471
+
472
+ .file-item:hover { border-color: var(--accent); }
473
+
474
+ .file-path {
475
+ font-family: var(--mono);
476
+ font-size: 13px;
477
+ color: var(--accent);
478
+ word-break: break-all;
479
+ }
480
+
481
+ .file-meta {
482
+ display: flex;
483
+ gap: 16px;
484
+ margin-top: 6px;
485
+ font-size: 12px;
486
+ color: var(--text2);
487
+ flex-wrap: wrap;
488
+ }
489
+
490
+ /* Mobile */
491
+ @media (max-width: 768px) {
492
+ .sidebar {
493
+ position: fixed;
494
+ top: auto;
495
+ bottom: 0;
496
+ left: 0;
497
+ right: 0;
498
+ width: 100%;
499
+ height: auto;
500
+ border-right: none;
501
+ border-top: 1px solid var(--border);
502
+ padding: 0;
503
+ padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
504
+ display: flex;
505
+ flex-direction: row;
506
+ overflow: hidden;
507
+ z-index: 100;
508
+ background: var(--bg2);
509
+ }
510
+
511
+ .sidebar h1 { display: none; }
512
+
513
+ .nav-item {
514
+ flex: 1;
515
+ flex-direction: column;
516
+ align-items: center;
517
+ justify-content: center;
518
+ padding: 10px 0 4px;
519
+ font-size: 10px;
520
+ gap: 4px;
521
+ border-left: none;
522
+ border-top: none;
523
+ letter-spacing: 0.02em;
524
+ }
525
+
526
+ .nav-item svg { width: 24px; height: 24px; }
527
+
528
+ .nav-item.active {
529
+ border-left-color: transparent;
530
+ color: var(--accent);
531
+ background: transparent;
532
+ }
533
+
534
+ .main {
535
+ margin-left: 0;
536
+ padding: 20px 16px;
537
+ padding-top: calc(20px + env(safe-area-inset-top, 0px));
538
+ padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), 20px));
539
+ max-width: 100%;
540
+ }
541
+
542
+ .stat-grid {
543
+ grid-template-columns: repeat(2, 1fr);
544
+ gap: 8px;
545
+ }
546
+
547
+ .stat-card { padding: 12px 14px; }
548
+ .stat-card .value { font-size: 22px; }
549
+
550
+ .session-header { flex-direction: column; align-items: flex-start; gap: 4px; }
551
+
552
+ .event-item { flex-direction: column; gap: 6px; }
553
+ .event-time { min-width: auto; }
554
+
555
+ .filters { gap: 6px; }
556
+ .filter-chip { font-size: 12px; padding: 4px 10px; }
557
+
558
+ .search-bar input { font-size: 16px; /* prevent iOS zoom */ }
559
+
560
+ .result-meta { flex-wrap: wrap; }
561
+ .tool-args { font-size: 11px; }
562
+ }