agentacta 1.1.4 → 1.2.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/public/style.css CHANGED
@@ -1,21 +1,80 @@
1
+ /* ============================================================
2
+ AgentActa — Premium Dark Theme
3
+ Inspired by Linear, Raycast, and high-end developer tools.
4
+ ============================================================ */
5
+
1
6
  :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; }
7
+ /* Background layers — deep navy-charcoal */
8
+ --bg-base: #0a0e1a;
9
+ --bg-surface: #0f1420;
10
+ --bg-elevated: #151b28;
11
+ --bg-hover: #1a2133;
12
+ --bg-active: #1e2740;
13
+
14
+ /* Borders — subtle, glass-like */
15
+ --border-subtle: rgba(255, 255, 255, 0.06);
16
+ --border-default: rgba(255, 255, 255, 0.08);
17
+ --border-hover: rgba(255, 255, 255, 0.12);
18
+ --border-focus: rgba(99, 144, 240, 0.5);
19
+
20
+ /* Text crisp with deliberate hierarchy */
21
+ --text-primary: #e8ecf1;
22
+ --text-secondary: #6b7a8d;
23
+ --text-tertiary: #4a5568;
24
+ --text-inverse: #0a0e1a;
25
+
26
+ /* Accent palette — muted, refined */
27
+ --accent: #6390f0;
28
+ --accent-soft: rgba(99, 144, 240, 0.12);
29
+ --accent-medium: rgba(99, 144, 240, 0.2);
30
+
31
+ --green: #34d399;
32
+ --green-soft: rgba(52, 211, 153, 0.12);
33
+
34
+ --purple: #a78bfa;
35
+ --purple-soft: rgba(167, 139, 250, 0.12);
36
+
37
+ --amber: #f59e0b;
38
+ --amber-soft: rgba(245, 158, 11, 0.12);
39
+
40
+ --red: #f87171;
41
+ --red-soft: rgba(248, 113, 113, 0.12);
42
+
43
+ --teal: #2dd4bf;
44
+ --teal-soft: rgba(45, 212, 191, 0.12);
45
+
46
+ /* Spacing */
47
+ --space-xs: 4px;
48
+ --space-sm: 8px;
49
+ --space-md: 12px;
50
+ --space-lg: 16px;
51
+ --space-xl: 24px;
52
+ --space-2xl: 32px;
53
+ --space-3xl: 48px;
54
+
55
+ /* Radii */
56
+ --radius-sm: 6px;
57
+ --radius-md: 8px;
58
+ --radius-lg: 12px;
59
+ --radius-xl: 16px;
60
+
61
+ /* Typography */
62
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
63
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
64
+
65
+ /* Transitions */
66
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
67
+ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
68
+ --duration-fast: 0.12s;
69
+ --duration-normal: 0.2s;
70
+ --duration-slow: 0.35s;
71
+
72
+ /* Layout */
73
+ --sidebar-width: 240px;
74
+ }
75
+
76
+ /* ---- Reset ---- */
77
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
19
78
 
20
79
  /* Fixed status bar cover for PWA standalone mode */
21
80
  @supports (padding-top: env(safe-area-inset-top)) {
@@ -26,217 +85,453 @@
26
85
  left: 0;
27
86
  right: 0;
28
87
  height: env(safe-area-inset-top, 0px);
29
- background: var(--bg);
88
+ background: var(--bg-base);
30
89
  z-index: 200;
31
90
  }
32
91
  }
33
92
 
34
93
  body {
35
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
36
- background: var(--bg);
37
- color: var(--text);
94
+ font-family: var(--font-sans);
95
+ background: var(--bg-base);
96
+ color: var(--text-primary);
38
97
  line-height: 1.5;
39
98
  min-height: 100vh;
99
+ -webkit-font-smoothing: antialiased;
100
+ -moz-osx-font-smoothing: grayscale;
101
+ font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
40
102
  }
41
103
 
42
- /* Layout */
43
- .app { display: flex; min-height: 100vh; }
104
+ /* ---- Layout ---- */
105
+ .app {
106
+ display: flex;
107
+ min-height: 100vh;
108
+ }
44
109
 
110
+ /* ---- Sidebar ---- */
45
111
  .sidebar {
46
- width: 220px;
47
- background: var(--bg2);
48
- border-right: 1px solid var(--border);
49
- padding: 20px 0;
112
+ width: var(--sidebar-width);
113
+ background: var(--bg-surface);
114
+ border-right: 1px solid var(--border-subtle);
50
115
  flex-shrink: 0;
51
116
  position: fixed;
52
117
  top: 0;
53
118
  left: 0;
54
119
  bottom: 0;
55
120
  overflow-y: auto;
121
+ display: flex;
122
+ flex-direction: column;
123
+ z-index: 50;
124
+ }
125
+
126
+ .sidebar-header {
127
+ padding: var(--space-xl) var(--space-xl) var(--space-lg);
56
128
  }
57
129
 
58
130
  .sidebar h1 {
59
- font-size: 16px;
131
+ font-size: 15px;
60
132
  font-weight: 600;
61
- padding: 0 20px 16px;
62
- color: var(--text);
133
+ color: var(--text-primary);
63
134
  letter-spacing: -0.3px;
64
135
  }
65
136
 
66
- .sidebar h1 span { color: var(--accent); }
137
+ .sidebar h1 span {
138
+ background: linear-gradient(135deg, var(--accent), var(--purple));
139
+ -webkit-background-clip: text;
140
+ -webkit-text-fill-color: transparent;
141
+ background-clip: text;
142
+ }
143
+
144
+ .nav-section {
145
+ display: flex;
146
+ flex-direction: column;
147
+ padding: 0 var(--space-md);
148
+ gap: 2px;
149
+ }
67
150
 
68
151
  .nav-item {
69
152
  display: flex;
70
153
  align-items: center;
71
- gap: 10px;
72
- padding: 8px 20px;
73
- color: var(--text2);
154
+ gap: var(--space-md);
155
+ padding: var(--space-sm) var(--space-md);
156
+ color: var(--text-secondary);
74
157
  cursor: pointer;
75
- font-size: 14px;
76
- transition: all 0.15s;
77
- border-left: 2px solid transparent;
158
+ font-size: 13px;
159
+ font-weight: 500;
160
+ border-radius: var(--radius-md);
161
+ transition: all var(--duration-normal) var(--ease-out);
162
+ position: relative;
163
+ user-select: none;
164
+ }
165
+
166
+ .nav-item:hover {
167
+ color: var(--text-primary);
168
+ background: var(--bg-hover);
78
169
  }
79
170
 
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); }
171
+ .nav-item.active {
172
+ color: var(--text-primary);
173
+ background: var(--bg-active);
174
+ }
82
175
 
83
- .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
176
+ .nav-item.active::before {
177
+ content: '';
178
+ position: absolute;
179
+ left: 0;
180
+ top: 50%;
181
+ transform: translateY(-50%);
182
+ width: 3px;
183
+ height: 16px;
184
+ background: var(--accent);
185
+ border-radius: 0 2px 2px 0;
186
+ }
84
187
 
188
+ .nav-item svg {
189
+ width: 18px;
190
+ height: 18px;
191
+ flex-shrink: 0;
192
+ opacity: 0.7;
193
+ transition: opacity var(--duration-fast);
194
+ }
195
+
196
+ .nav-item:hover svg,
197
+ .nav-item.active svg {
198
+ opacity: 1;
199
+ }
200
+
201
+ /* ---- Main Content ---- */
85
202
  .main {
86
203
  flex: 1;
87
- margin-left: 220px;
88
- padding: 24px 32px;
89
- max-width: 1100px;
204
+ margin-left: var(--sidebar-width);
205
+ padding: var(--space-2xl) var(--space-3xl);
206
+ max-width: 1000px;
207
+ min-height: 100vh;
208
+ }
209
+
210
+ /* ---- Page Title ---- */
211
+ .page-title {
212
+ font-size: 22px;
213
+ font-weight: 700;
214
+ color: var(--text-primary);
215
+ letter-spacing: -0.4px;
216
+ margin-bottom: var(--space-xl);
90
217
  }
91
218
 
92
- /* Search */
219
+ .section-label {
220
+ font-size: 11px;
221
+ font-weight: 600;
222
+ color: var(--text-tertiary);
223
+ text-transform: uppercase;
224
+ letter-spacing: 0.8px;
225
+ margin-bottom: var(--space-md);
226
+ margin-top: var(--space-2xl);
227
+ }
228
+
229
+ /* ---- Search Bar ---- */
93
230
  .search-bar {
94
231
  position: relative;
95
- margin-bottom: 20px;
232
+ margin-bottom: var(--space-xl);
96
233
  }
97
234
 
98
235
  .search-bar input {
99
236
  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;
237
+ background: var(--bg-surface);
238
+ border: 1px solid var(--border-default);
239
+ border-radius: var(--radius-lg);
240
+ padding: 13px 16px 13px 44px;
241
+ color: var(--text-primary);
242
+ font-family: var(--font-sans);
243
+ font-size: 14px;
244
+ font-weight: 400;
106
245
  outline: none;
107
- transition: border-color 0.2s;
246
+ transition: all var(--duration-normal) var(--ease-out);
108
247
  }
109
248
 
110
- .search-bar input:focus { border-color: var(--accent); }
111
- .search-bar input::placeholder { color: var(--text2); }
249
+ .search-bar input:hover {
250
+ border-color: var(--border-hover);
251
+ }
252
+
253
+ .search-bar input:focus {
254
+ border-color: var(--border-focus);
255
+ background: var(--bg-elevated);
256
+ box-shadow: 0 0 0 3px var(--accent-soft);
257
+ }
258
+
259
+ .search-bar input::placeholder {
260
+ color: var(--text-tertiary);
261
+ font-weight: 400;
262
+ }
112
263
 
113
264
  .search-bar svg {
114
265
  position: absolute;
115
266
  left: 14px;
116
267
  top: 50%;
117
268
  transform: translateY(-50%);
118
- color: var(--text2);
269
+ color: var(--text-tertiary);
119
270
  width: 18px;
120
271
  height: 18px;
272
+ transition: color var(--duration-fast);
273
+ }
274
+
275
+ .search-bar input:focus ~ svg,
276
+ .search-bar:focus-within svg {
277
+ color: var(--accent);
121
278
  }
122
279
 
280
+ /* ---- Filter Chips ---- */
123
281
  .filters {
124
282
  display: flex;
125
- gap: 10px;
126
- margin-bottom: 20px;
283
+ gap: var(--space-sm);
284
+ margin-bottom: var(--space-xl);
127
285
  flex-wrap: wrap;
128
286
  }
129
287
 
130
288
  .filter-chip {
131
- padding: 4px 12px;
289
+ padding: 5px 14px;
132
290
  border-radius: 20px;
133
- border: 1px solid var(--border);
134
- background: var(--bg2);
135
- color: var(--text2);
136
- font-size: 13px;
291
+ border: 1px solid var(--border-default);
292
+ background: transparent;
293
+ color: var(--text-secondary);
294
+ font-family: var(--font-sans);
295
+ font-size: 12px;
296
+ font-weight: 500;
137
297
  cursor: pointer;
138
- transition: all 0.15s;
298
+ transition: all var(--duration-normal) var(--ease-out);
299
+ user-select: none;
139
300
  }
140
301
 
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); }
302
+ .filter-chip:hover {
303
+ border-color: var(--border-hover);
304
+ color: var(--text-primary);
305
+ background: var(--bg-hover);
306
+ }
307
+
308
+ .filter-chip.active {
309
+ border-color: var(--accent);
310
+ color: var(--accent);
311
+ background: var(--accent-soft);
312
+ }
143
313
 
144
- /* Cards */
314
+ /* ---- Stat Cards ---- */
145
315
  .stat-grid {
146
316
  display: grid;
147
317
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
148
- gap: 12px;
149
- margin-bottom: 28px;
318
+ gap: var(--space-md);
319
+ margin-bottom: var(--space-2xl);
150
320
  }
151
321
 
152
322
  .stat-card {
153
- background: var(--bg2);
154
- border: 1px solid var(--border);
155
- border-radius: var(--radius);
156
- padding: 16px 20px;
323
+ background: var(--bg-surface);
324
+ border: 1px solid var(--border-subtle);
325
+ border-radius: var(--radius-lg);
326
+ padding: var(--space-xl);
327
+ position: relative;
328
+ overflow: hidden;
329
+ transition: all var(--duration-normal) var(--ease-out);
157
330
  }
158
331
 
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; }
332
+ .stat-card::before {
333
+ content: '';
334
+ position: absolute;
335
+ top: 0;
336
+ left: 0;
337
+ right: 0;
338
+ height: 1px;
339
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
340
+ opacity: 0.3;
341
+ }
342
+
343
+ .stat-card:hover {
344
+ border-color: var(--border-hover);
345
+ transform: translateY(-1px);
346
+ }
161
347
 
162
- /* Session list */
348
+ .stat-card .label {
349
+ font-size: 11px;
350
+ font-weight: 600;
351
+ color: var(--text-tertiary);
352
+ text-transform: uppercase;
353
+ letter-spacing: 0.6px;
354
+ }
355
+
356
+ .stat-card .value {
357
+ font-size: 28px;
358
+ font-weight: 700;
359
+ margin-top: 6px;
360
+ font-variant-numeric: tabular-nums;
361
+ letter-spacing: -0.5px;
362
+ background: linear-gradient(135deg, var(--text-primary) 60%, var(--text-secondary));
363
+ -webkit-background-clip: text;
364
+ -webkit-text-fill-color: transparent;
365
+ background-clip: text;
366
+ }
367
+
368
+ /* ---- Session List ---- */
163
369
  .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;
370
+ background: var(--bg-surface);
371
+ border: 1px solid var(--border-subtle);
372
+ border-radius: var(--radius-lg);
373
+ padding: var(--space-lg) var(--space-xl);
374
+ margin-bottom: var(--space-sm);
169
375
  cursor: pointer;
170
- transition: all 0.15s;
376
+ transition: all var(--duration-normal) var(--ease-out);
377
+ position: relative;
378
+ }
379
+
380
+ .session-item:hover {
381
+ border-color: var(--border-hover);
382
+ background: var(--bg-elevated);
383
+ transform: translateY(-1px);
171
384
  }
172
385
 
173
- .session-item:hover { border-color: var(--accent); }
386
+ .session-item:active {
387
+ transform: translateY(0);
388
+ }
174
389
 
175
390
  .session-header {
176
391
  display: flex;
177
392
  justify-content: space-between;
178
393
  align-items: center;
179
- margin-bottom: 6px;
394
+ margin-bottom: var(--space-sm);
395
+ gap: var(--space-sm);
396
+ }
397
+
398
+ .session-time {
399
+ font-size: 12px;
400
+ color: var(--text-tertiary);
401
+ font-family: var(--font-mono);
402
+ font-weight: 400;
403
+ }
404
+
405
+ .session-project {
406
+ font-size: 11px;
407
+ font-weight: 500;
408
+ color: var(--green);
409
+ background: var(--green-soft);
410
+ padding: 2px 10px;
411
+ border-radius: 10px;
412
+ }
413
+
414
+ .session-model {
415
+ font-size: 11px;
416
+ font-weight: 500;
417
+ color: var(--purple);
418
+ background: var(--purple-soft);
419
+ padding: 2px 10px;
420
+ border-radius: 10px;
421
+ }
422
+
423
+ .session-agent {
424
+ font-size: 11px;
425
+ font-weight: 500;
426
+ color: var(--teal);
427
+ background: var(--teal-soft);
428
+ padding: 2px 10px;
429
+ border-radius: 10px;
430
+ }
431
+
432
+ .session-type {
433
+ font-size: 11px;
434
+ font-weight: 500;
435
+ color: var(--amber);
436
+ background: var(--amber-soft);
437
+ padding: 2px 10px;
438
+ border-radius: 10px;
439
+ }
440
+
441
+ .session-summary {
442
+ font-size: 14px;
443
+ color: var(--text-primary);
444
+ line-height: 1.5;
445
+ font-weight: 400;
446
+ }
447
+
448
+ .session-meta {
449
+ display: flex;
450
+ gap: var(--space-lg);
451
+ margin-top: var(--space-sm);
452
+ font-size: 12px;
453
+ color: var(--text-tertiary);
454
+ }
455
+
456
+ .session-meta span {
457
+ display: flex;
458
+ align-items: center;
459
+ gap: 5px;
180
460
  }
181
461
 
182
- .session-time { font-size: 13px; color: var(--text2); font-family: var(--mono); }
183
- .session-project { font-size: 11px; color: var(--accent2); background: rgba(63,185,80,0.14); padding: 2px 8px; border-radius: 10px; }
184
- .session-model { font-size: 11px; color: var(--purple); background: rgba(188,140,255,0.1); padding: 2px 8px; border-radius: 10px; }
185
- .session-summary { font-size: 14px; color: var(--text); line-height: 1.4; }
186
- .session-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text2); }
187
- .session-meta span { display: flex; align-items: center; gap: 4px; }
462
+ /* ---- Event Timeline ---- */
463
+ .timeline-container {
464
+ position: relative;
465
+ padding-left: var(--space-2xl);
466
+ }
188
467
 
189
- /* Removed - initial prompt now shown in session detail view */
468
+ .timeline-container::before {
469
+ content: '';
470
+ position: absolute;
471
+ left: 7px;
472
+ top: 0;
473
+ bottom: 0;
474
+ width: 1px;
475
+ background: linear-gradient(180deg, var(--border-default), transparent);
476
+ }
190
477
 
191
- /* Event list / timeline */
192
478
  .event-item {
193
479
  display: flex;
194
- gap: 14px;
195
- padding: 12px 0;
196
- border-bottom: 1px solid var(--border);
480
+ gap: var(--space-lg);
481
+ padding: var(--space-md) 0;
197
482
  font-size: 14px;
483
+ position: relative;
484
+ transition: background var(--duration-fast);
198
485
  }
199
486
 
200
487
  .event-item:last-child { border-bottom: none; }
201
488
 
202
489
  .event-time {
203
- font-family: var(--mono);
204
- font-size: 12px;
205
- color: var(--text2);
490
+ font-family: var(--font-mono);
491
+ font-size: 11px;
492
+ font-weight: 400;
493
+ color: var(--text-tertiary);
206
494
  white-space: nowrap;
207
- min-width: 70px;
495
+ min-width: 72px;
208
496
  padding-top: 2px;
209
497
  }
210
498
 
211
499
  .event-badge {
212
- font-size: 11px;
213
- font-weight: 500;
214
- padding: 2px 8px;
215
- border-radius: 10px;
500
+ font-size: 10px;
501
+ font-weight: 600;
502
+ padding: 3px 8px;
503
+ border-radius: 6px;
216
504
  white-space: nowrap;
217
505
  flex-shrink: 0;
506
+ text-transform: uppercase;
507
+ letter-spacing: 0.3px;
218
508
  }
219
509
 
220
- .badge-message { color: var(--accent); background: rgba(88,166,255,0.1); }
221
- .badge-user { color: var(--accent2); background: rgba(63,185,80,0.1); }
222
- .badge-assistant { color: var(--purple); background: rgba(188,140,255,0.1); }
223
- .badge-tool_call { color: var(--orange); background: rgba(210,153,34,0.1); }
224
- .badge-tool_result { color: var(--text2); background: var(--bg3); }
510
+ .badge-message { color: var(--accent); background: var(--accent-soft); }
511
+ .badge-user { color: var(--green); background: var(--green-soft); }
512
+ .badge-assistant { color: var(--purple); background: var(--purple-soft); }
513
+ .badge-tool_call { color: var(--amber); background: var(--amber-soft); }
514
+ .badge-tool_result { color: var(--text-secondary); background: var(--bg-active); }
225
515
 
226
516
  .event-body { flex: 1; min-width: 0; }
227
517
 
228
518
  .event-content {
229
519
  white-space: pre-wrap;
230
520
  word-break: break-word;
231
- font-family: var(--mono);
232
- font-size: 13px;
233
- line-height: 1.6;
234
- color: var(--text);
521
+ font-family: var(--font-mono);
522
+ font-size: 12.5px;
523
+ line-height: 1.7;
524
+ color: var(--text-primary);
235
525
  max-height: 300px;
236
526
  overflow-y: auto;
237
527
  }
238
528
 
239
- .event-content.collapsed { max-height: 80px; overflow: hidden; position: relative; }
529
+ .event-content.collapsed {
530
+ max-height: 80px;
531
+ overflow: hidden;
532
+ position: relative;
533
+ }
534
+
240
535
  .event-content.collapsed::after {
241
536
  content: '';
242
537
  position: absolute;
@@ -244,131 +539,355 @@ body {
244
539
  left: 0;
245
540
  right: 0;
246
541
  height: 40px;
247
- background: linear-gradient(transparent, var(--bg));
542
+ background: linear-gradient(transparent, var(--bg-base));
543
+ }
544
+
545
+ .tool-name {
546
+ color: var(--amber);
547
+ font-weight: 600;
548
+ font-family: var(--font-mono);
549
+ font-size: 12.5px;
248
550
  }
249
551
 
250
- .tool-name { color: var(--orange); font-weight: 600; font-family: var(--mono); font-size: 13px; }
251
552
  .tool-args {
252
- background: var(--bg3);
253
- border-radius: 6px;
254
- padding: 8px 12px;
255
- margin-top: 6px;
256
- font-family: var(--mono);
257
- font-size: 12px;
258
- color: var(--text2);
553
+ background: var(--bg-active);
554
+ border: 1px solid var(--border-subtle);
555
+ border-radius: var(--radius-md);
556
+ padding: var(--space-md) var(--space-lg);
557
+ margin-top: var(--space-sm);
558
+ font-family: var(--font-mono);
559
+ font-size: 11.5px;
560
+ color: var(--text-secondary);
259
561
  max-height: 200px;
260
562
  overflow-y: auto;
261
563
  white-space: pre-wrap;
262
564
  word-break: break-all;
565
+ line-height: 1.6;
263
566
  }
264
567
 
265
- /* Search results */
568
+ /* ---- Search Results ---- */
266
569
  .result-item {
267
- background: var(--bg2);
268
- border: 1px solid var(--border);
269
- border-radius: var(--radius);
270
- padding: 14px 18px;
271
- margin-bottom: 8px;
570
+ background: var(--bg-surface);
571
+ border: 1px solid var(--border-subtle);
572
+ border-radius: var(--radius-lg);
573
+ padding: var(--space-lg) var(--space-xl);
574
+ margin-bottom: var(--space-sm);
575
+ transition: all var(--duration-normal) var(--ease-out);
576
+ }
577
+
578
+ .result-item:hover {
579
+ border-color: var(--border-hover);
272
580
  }
273
581
 
274
582
  .result-meta {
275
583
  display: flex;
276
- gap: 10px;
584
+ gap: var(--space-md);
277
585
  align-items: center;
278
- margin-bottom: 8px;
586
+ margin-bottom: var(--space-sm);
279
587
  font-size: 12px;
280
588
  }
281
589
 
282
590
  .result-content {
283
- font-family: var(--mono);
284
- font-size: 13px;
285
- line-height: 1.6;
591
+ font-family: var(--font-mono);
592
+ font-size: 12.5px;
593
+ line-height: 1.7;
286
594
  white-space: pre-wrap;
287
595
  word-break: break-word;
288
596
  max-height: 150px;
289
597
  overflow: hidden;
290
- color: var(--text);
598
+ color: var(--text-secondary);
291
599
  }
292
600
 
293
- mark { background: rgba(210,153,34,0.3); color: var(--text); border-radius: 2px; padding: 0 2px; }
601
+ mark {
602
+ background: var(--amber-soft);
603
+ color: var(--amber);
604
+ border-radius: 2px;
605
+ padding: 1px 3px;
606
+ }
294
607
 
295
- /* Back button */
608
+ /* ---- Back Button ---- */
296
609
  .back-btn {
297
610
  display: inline-flex;
298
611
  align-items: center;
299
612
  gap: 6px;
300
- color: var(--text2);
613
+ color: var(--text-tertiary);
301
614
  font-size: 13px;
615
+ font-weight: 500;
302
616
  cursor: pointer;
303
- margin-bottom: 16px;
304
- transition: color 0.15s;
617
+ margin-bottom: var(--space-lg);
618
+ padding: var(--space-xs) var(--space-sm);
619
+ border-radius: var(--radius-sm);
620
+ transition: all var(--duration-normal) var(--ease-out);
305
621
  }
306
622
 
307
- .back-btn:hover { color: var(--text); }
623
+ .back-btn:hover {
624
+ color: var(--text-primary);
625
+ background: var(--bg-hover);
626
+ }
308
627
 
309
- /* Empty state */
628
+ /* ---- Empty State ---- */
310
629
  .empty {
311
630
  text-align: center;
312
- padding: 60px 20px;
313
- color: var(--text2);
631
+ padding: 80px 20px;
632
+ color: var(--text-tertiary);
314
633
  }
315
634
 
316
- .empty h2 { font-size: 18px; margin-bottom: 8px; color: var(--text); }
635
+ .empty h2 {
636
+ font-size: 16px;
637
+ font-weight: 600;
638
+ margin-bottom: var(--space-sm);
639
+ color: var(--text-secondary);
640
+ }
641
+
642
+ .empty p {
643
+ font-size: 14px;
644
+ color: var(--text-tertiary);
645
+ }
317
646
 
318
- /* Loading */
647
+ /* ---- Loading ---- */
319
648
  .loading {
320
649
  display: flex;
321
650
  justify-content: center;
322
- padding: 40px;
323
- color: var(--text2);
651
+ align-items: center;
652
+ padding: 60px;
653
+ color: var(--text-tertiary);
654
+ font-size: 13px;
655
+ font-weight: 500;
656
+ }
657
+
658
+ @keyframes pulse {
659
+ 0%, 100% { opacity: 0.4; }
660
+ 50% { opacity: 1; }
661
+ }
662
+
663
+ .loading::before {
664
+ content: '';
665
+ width: 6px;
666
+ height: 6px;
667
+ background: var(--accent);
668
+ border-radius: 50%;
669
+ margin-right: var(--space-md);
670
+ animation: pulse 1.4s ease-in-out infinite;
324
671
  }
325
672
 
326
- /* Date input */
673
+ /* ---- Date Input ---- */
327
674
  .date-input {
328
- background: var(--bg2);
329
- border: 1px solid var(--border);
330
- border-radius: var(--radius);
331
- padding: 8px 12px;
332
- color: var(--text);
333
- font-size: 14px;
675
+ background: var(--bg-surface);
676
+ border: 1px solid var(--border-default);
677
+ border-radius: var(--radius-md);
678
+ padding: 10px 14px;
679
+ color: var(--text-primary);
680
+ font-family: var(--font-sans);
681
+ font-size: 13px;
682
+ font-weight: 500;
334
683
  outline: none;
335
- margin-bottom: 16px;
684
+ margin-bottom: var(--space-lg);
685
+ transition: all var(--duration-normal) var(--ease-out);
686
+ color-scheme: dark;
336
687
  }
337
688
 
338
- .date-input:focus { border-color: var(--accent); }
339
-
340
- /* Scrollbar */
341
- ::-webkit-scrollbar { width: 8px; height: 8px; }
342
- ::-webkit-scrollbar-track { background: transparent; }
343
- ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }
344
- ::-webkit-scrollbar-thumb:hover { background: var(--border); }
689
+ .date-input:hover {
690
+ border-color: var(--border-hover);
691
+ }
345
692
 
346
- /* Page title */
347
- .page-title {
348
- font-size: 20px;
349
- font-weight: 600;
350
- margin-bottom: 20px;
351
- color: var(--text);
693
+ .date-input:focus {
694
+ border-color: var(--border-focus);
695
+ box-shadow: 0 0 0 3px var(--accent-soft);
352
696
  }
353
697
 
354
- .section-label {
698
+ /* ---- Session Link ---- */
699
+ .session-link {
355
700
  font-size: 12px;
356
- color: var(--text2);
701
+ font-weight: 500;
702
+ color: var(--accent);
703
+ cursor: pointer;
704
+ transition: color var(--duration-fast);
705
+ }
706
+
707
+ .session-link:hover {
708
+ color: var(--text-primary);
709
+ text-decoration: underline;
710
+ }
711
+
712
+ /* ---- Export Buttons ---- */
713
+ .export-btn {
714
+ font-size: 11px;
715
+ font-weight: 500;
716
+ color: var(--text-secondary);
717
+ background: var(--bg-elevated);
718
+ border: 1px solid var(--border-default);
719
+ border-radius: var(--radius-sm);
720
+ padding: 5px 12px;
721
+ text-decoration: none;
722
+ cursor: pointer;
723
+ transition: all var(--duration-normal) var(--ease-out);
724
+ font-family: var(--font-sans);
725
+ }
726
+
727
+ .export-btn:hover {
728
+ color: var(--text-primary);
729
+ border-color: var(--border-hover);
730
+ background: var(--bg-hover);
731
+ }
732
+
733
+ /* ---- Jump to Start ---- */
734
+ .jump-to-start-btn {
735
+ font-size: 11px;
736
+ font-weight: 500;
737
+ color: var(--green);
738
+ background: var(--green-soft);
739
+ border: 1px solid rgba(52, 211, 153, 0.15);
740
+ border-radius: var(--radius-sm);
741
+ padding: 5px 12px;
742
+ cursor: pointer;
743
+ transition: all var(--duration-normal) var(--ease-out);
744
+ font-family: var(--font-sans);
745
+ }
746
+
747
+ .jump-to-start-btn:hover {
748
+ background: rgba(52, 211, 153, 0.2);
749
+ border-color: rgba(52, 211, 153, 0.3);
750
+ }
751
+
752
+ /* ---- Session ID ---- */
753
+ .session-id-row {
754
+ display: flex;
755
+ align-items: center;
756
+ gap: var(--space-sm);
757
+ margin-bottom: var(--space-sm);
758
+ width: 100%;
759
+ }
760
+
761
+ .session-id-label {
762
+ font-size: 10px;
763
+ font-weight: 600;
764
+ color: var(--text-tertiary);
357
765
  text-transform: uppercase;
358
766
  letter-spacing: 0.5px;
359
- margin-bottom: 12px;
360
- margin-top: 24px;
767
+ flex-shrink: 0;
361
768
  }
362
769
 
363
- .session-link {
770
+ .session-id-value {
771
+ font-family: var(--font-mono);
772
+ font-size: 11px;
773
+ color: var(--text-tertiary);
774
+ background: var(--bg-active);
775
+ padding: 3px 10px;
776
+ border-radius: var(--radius-sm);
777
+ flex: 1 1 auto;
778
+ min-width: 0;
779
+ max-width: none;
780
+ overflow: hidden;
781
+ text-overflow: ellipsis;
782
+ white-space: nowrap;
783
+ }
784
+
785
+ .session-id-copy {
786
+ background: none;
787
+ border: 1px solid var(--border-default);
788
+ border-radius: var(--radius-sm);
789
+ color: var(--text-tertiary);
790
+ cursor: pointer;
791
+ padding: 3px 8px;
364
792
  font-size: 12px;
793
+ line-height: 1;
794
+ transition: all var(--duration-normal) var(--ease-out);
795
+ font-family: inherit;
796
+ display: inline-flex;
797
+ align-items: center;
798
+ }
799
+
800
+ .session-id-copy:hover {
801
+ color: var(--text-primary);
802
+ border-color: var(--border-hover);
803
+ background: var(--bg-hover);
804
+ }
805
+
806
+ .session-id-copied {
807
+ font-size: 11px;
808
+ font-weight: 500;
809
+ color: var(--green);
810
+ opacity: 0;
811
+ transition: opacity var(--duration-normal);
812
+ }
813
+
814
+ .session-id-copied.show { opacity: 1; }
815
+
816
+ /* ---- File Items ---- */
817
+ .file-item {
818
+ background: var(--bg-surface);
819
+ border: 1px solid var(--border-subtle);
820
+ border-radius: var(--radius-lg);
821
+ padding: var(--space-md) var(--space-xl);
822
+ margin-bottom: var(--space-sm);
823
+ cursor: pointer;
824
+ transition: all var(--duration-normal) var(--ease-out);
825
+ }
826
+
827
+ .file-item:hover {
828
+ border-color: var(--border-hover);
829
+ background: var(--bg-elevated);
830
+ }
831
+
832
+ .file-path {
833
+ font-family: var(--font-mono);
834
+ font-size: 13px;
365
835
  color: var(--accent);
836
+ word-break: break-all;
837
+ }
838
+
839
+ .file-meta {
840
+ display: flex;
841
+ gap: var(--space-lg);
842
+ margin-top: var(--space-sm);
843
+ font-size: 12px;
844
+ color: var(--text-tertiary);
845
+ flex-wrap: wrap;
846
+ }
847
+
848
+ /* ---- File Groups ---- */
849
+ .file-group { margin-bottom: var(--space-xs); }
850
+
851
+ .file-group-header {
852
+ display: flex;
853
+ align-items: center;
854
+ gap: var(--space-md);
855
+ padding: var(--space-md) var(--space-lg);
856
+ background: var(--bg-surface);
857
+ border: 1px solid var(--border-subtle);
858
+ border-radius: var(--radius-lg);
366
859
  cursor: pointer;
860
+ font-size: 13px;
861
+ transition: all var(--duration-normal) var(--ease-out);
367
862
  }
368
863
 
369
- .session-link:hover { text-decoration: underline; }
864
+ .file-group-header:hover {
865
+ border-color: var(--border-hover);
866
+ background: var(--bg-elevated);
867
+ }
370
868
 
371
- /* Pull to refresh */
869
+ .file-group-arrow {
870
+ color: var(--text-tertiary);
871
+ font-size: 10px;
872
+ width: 14px;
873
+ transition: transform var(--duration-normal) var(--ease-out);
874
+ }
875
+
876
+ .file-group-name {
877
+ font-weight: 500;
878
+ color: var(--accent);
879
+ font-family: var(--font-mono);
880
+ font-size: 12.5px;
881
+ }
882
+
883
+ .file-group-items {
884
+ border-left: 1px solid var(--border-subtle);
885
+ margin-left: 22px;
886
+ margin-top: var(--space-xs);
887
+ margin-bottom: var(--space-sm);
888
+ }
889
+
890
+ /* ---- Pull to Refresh ---- */
372
891
  .ptr-indicator {
373
892
  position: fixed;
374
893
  top: 0;
@@ -377,118 +896,288 @@ mark { background: rgba(210,153,34,0.3); color: var(--text); border-radius: 2px;
377
896
  text-align: center;
378
897
  padding: 0;
379
898
  color: var(--accent);
380
- font-size: 13px;
899
+ font-size: 12px;
381
900
  font-weight: 500;
382
901
  opacity: 0;
383
- transition: opacity 0.2s, padding 0.2s;
902
+ transition: opacity var(--duration-normal), padding var(--duration-normal);
384
903
  z-index: 300;
385
- background: var(--bg);
904
+ background: var(--bg-base);
386
905
  height: 0;
387
906
  overflow: hidden;
388
907
  padding-top: env(safe-area-inset-top, 0px);
389
908
  }
390
- .ptr-indicator.visible { opacity: 1; height: auto; padding: 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
391
- .ptr-indicator.refreshing { color: var(--text2); }
392
909
 
393
- /* File groups */
394
- .file-group { margin-bottom: 4px; }
395
- .file-group-header {
910
+ .ptr-indicator.visible {
911
+ opacity: 1;
912
+ height: auto;
913
+ padding: var(--space-md);
914
+ padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
915
+ }
916
+
917
+ .ptr-indicator.refreshing { color: var(--text-secondary); }
918
+
919
+ /* ---- Scrollbar ---- */
920
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
921
+ ::-webkit-scrollbar-track { background: transparent; }
922
+ ::-webkit-scrollbar-thumb {
923
+ background: var(--bg-active);
924
+ border-radius: 3px;
925
+ }
926
+ ::-webkit-scrollbar-thumb:hover {
927
+ background: var(--border-default);
928
+ }
929
+
930
+ /* ---- View Transition ---- */
931
+ .view-enter {
932
+ animation: viewIn var(--duration-slow) var(--ease-out);
933
+ }
934
+
935
+ @keyframes viewIn {
936
+ from {
937
+ opacity: 0;
938
+ transform: translateY(8px);
939
+ }
940
+ to {
941
+ opacity: 1;
942
+ transform: translateY(0);
943
+ }
944
+ }
945
+
946
+ /* ---- Timeline View Enhancements ---- */
947
+ .timeline-day-header {
948
+ font-size: 13px;
949
+ font-weight: 600;
950
+ color: var(--text-secondary);
951
+ padding: var(--space-lg) 0 var(--space-sm);
952
+ border-bottom: 1px solid var(--border-subtle);
953
+ margin-bottom: var(--space-md);
954
+ }
955
+
956
+ .timeline-event {
396
957
  display: flex;
397
- align-items: center;
398
- gap: 10px;
399
- padding: 10px 14px;
400
- background: var(--bg2);
401
- border: 1px solid var(--border);
402
- border-radius: var(--radius);
403
- cursor: pointer;
404
- font-size: 14px;
405
- transition: all 0.15s;
958
+ gap: var(--space-lg);
959
+ padding: var(--space-md) 0;
960
+ position: relative;
961
+ padding-left: var(--space-xl);
406
962
  }
407
- .file-group-header:hover { border-color: var(--accent); }
408
- .file-group-arrow { color: var(--text2); font-size: 11px; width: 14px; }
409
- .file-group-name { font-weight: 500; color: var(--accent); }
410
- .file-group-items { padding-left: 16px; border-left: 2px solid var(--border); margin-left: 20px; margin-top: 4px; margin-bottom: 8px; }
411
963
 
412
- /* Agent/type badges */
413
- .session-agent {
414
- font-size: 11px;
415
- color: var(--accent2);
416
- background: rgba(63,185,80,0.1);
417
- padding: 2px 8px;
418
- border-radius: 10px;
964
+ .timeline-event::before {
965
+ content: '';
966
+ position: absolute;
967
+ left: 5px;
968
+ top: 50%;
969
+ transform: translateY(-50%);
970
+ width: 7px;
971
+ height: 7px;
972
+ border-radius: 50%;
973
+ background: var(--bg-active);
974
+ border: 1.5px solid var(--border-hover);
975
+ z-index: 1;
419
976
  }
420
977
 
421
- .session-type {
978
+ .timeline-event.type-user::before {
979
+ background: var(--green);
980
+ border-color: var(--green);
981
+ box-shadow: 0 0 8px var(--green-soft);
982
+ }
983
+
984
+ .timeline-event.type-assistant::before {
985
+ background: var(--purple);
986
+ border-color: var(--purple);
987
+ box-shadow: 0 0 8px var(--purple-soft);
988
+ }
989
+
990
+ .timeline-event.type-tool::before {
991
+ background: var(--amber);
992
+ border-color: var(--amber);
993
+ box-shadow: 0 0 8px var(--amber-soft);
994
+ }
995
+
996
+ .timeline-events-wrap {
997
+ position: relative;
998
+ padding-left: 24px;
999
+ }
1000
+
1001
+ .timeline-line {
1002
+ position: absolute;
1003
+ left: 8px;
1004
+ top: 0;
1005
+ bottom: 0;
1006
+ width: 1px;
1007
+ background: var(--border-subtle);
1008
+ }
1009
+
1010
+ /* ---- Stat Card Variants ---- */
1011
+ .stat-card.accent-blue::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
1012
+ .stat-card.accent-green::before { background: linear-gradient(90deg, transparent, var(--green), transparent); }
1013
+ .stat-card.accent-purple::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
1014
+ .stat-card.accent-amber::before { background: linear-gradient(90deg, transparent, var(--amber), transparent); }
1015
+ .stat-card.accent-teal::before { background: linear-gradient(90deg, transparent, var(--teal), transparent); }
1016
+
1017
+ /* ---- Tools List in Stats ---- */
1018
+ .tools-grid {
1019
+ display: flex;
1020
+ flex-wrap: wrap;
1021
+ gap: var(--space-sm);
1022
+ }
1023
+
1024
+ .tool-chip {
1025
+ padding: 5px 14px;
1026
+ border-radius: 20px;
1027
+ border: 1px solid var(--border-subtle);
1028
+ background: var(--bg-surface);
1029
+ color: var(--text-secondary);
1030
+ font-family: var(--font-mono);
1031
+ font-size: 11.5px;
1032
+ font-weight: 400;
1033
+ transition: all var(--duration-normal) var(--ease-out);
1034
+ }
1035
+
1036
+ .tool-chip:hover {
1037
+ border-color: var(--border-hover);
1038
+ color: var(--text-primary);
1039
+ }
1040
+
1041
+ /* ---- Config Card ---- */
1042
+ .config-card {
1043
+ background: var(--bg-surface);
1044
+ border: 1px solid var(--border-subtle);
1045
+ border-radius: var(--radius-lg);
1046
+ padding: var(--space-lg) var(--space-xl);
1047
+ transition: all var(--duration-normal) var(--ease-out);
1048
+ }
1049
+
1050
+ .config-card:hover {
1051
+ border-color: var(--border-hover);
1052
+ }
1053
+
1054
+ .config-label {
422
1055
  font-size: 11px;
423
- color: var(--orange);
424
- background: rgba(210,153,34,0.1);
425
- padding: 2px 8px;
426
- border-radius: 10px;
1056
+ font-weight: 600;
1057
+ color: var(--text-tertiary);
1058
+ text-transform: uppercase;
1059
+ letter-spacing: 0.5px;
1060
+ margin-bottom: var(--space-xs);
427
1061
  }
428
1062
 
429
- /* Export buttons */
430
- .export-btn {
431
- font-size: 12px;
432
- color: var(--text2);
433
- background: var(--bg3);
434
- border: 1px solid var(--border);
435
- border-radius: 6px;
436
- padding: 4px 10px;
437
- text-decoration: none;
438
- cursor: pointer;
439
- transition: all 0.15s;
1063
+ .config-value {
1064
+ font-size: 16px;
1065
+ font-weight: 600;
1066
+ color: var(--text-primary);
1067
+ font-family: var(--font-mono);
440
1068
  }
441
1069
 
442
- .export-btn:hover { color: var(--text); border-color: var(--accent); }
1070
+ /* ---- Highlight animation for jumped-to events ---- */
1071
+ @keyframes highlightFade {
1072
+ 0% { background: var(--accent-medium); }
1073
+ 100% { background: transparent; }
1074
+ }
443
1075
 
444
- /* Jump to start button */
445
- .jump-to-start-btn {
1076
+ .event-highlight {
1077
+ animation: highlightFade 2s var(--ease-out);
1078
+ }
1079
+
1080
+ /* ---- Search Home Stats ---- */
1081
+ .search-stats {
1082
+ display: grid;
1083
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1084
+ gap: var(--space-md);
1085
+ margin-bottom: var(--space-2xl);
1086
+ }
1087
+
1088
+ .search-stat {
1089
+ background: var(--bg-surface);
1090
+ border: 1px solid var(--border-subtle);
1091
+ border-radius: var(--radius-lg);
1092
+ padding: var(--space-lg) var(--space-xl);
1093
+ text-align: center;
1094
+ transition: all var(--duration-normal) var(--ease-out);
1095
+ }
1096
+
1097
+ .search-stat:hover {
1098
+ border-color: var(--border-hover);
1099
+ }
1100
+
1101
+ .search-stat .num {
1102
+ font-size: 24px;
1103
+ font-weight: 700;
1104
+ color: var(--text-primary);
1105
+ font-variant-numeric: tabular-nums;
1106
+ letter-spacing: -0.3px;
1107
+ }
1108
+
1109
+ .search-stat .lbl {
1110
+ font-size: 11px;
1111
+ font-weight: 500;
1112
+ color: var(--text-tertiary);
1113
+ text-transform: uppercase;
1114
+ letter-spacing: 0.5px;
1115
+ margin-top: 2px;
1116
+ }
1117
+
1118
+ /* ---- Suggestions ---- */
1119
+ .suggestion-chip {
1120
+ padding: 6px 16px;
1121
+ border-radius: 20px;
1122
+ border: 1px solid var(--border-default);
1123
+ background: transparent;
1124
+ color: var(--text-secondary);
446
1125
  font-size: 12px;
447
- color: var(--accent2);
448
- background: var(--bg3);
449
- border: 1px solid var(--border);
450
- border-radius: 6px;
451
- padding: 4px 10px;
1126
+ font-weight: 500;
452
1127
  cursor: pointer;
453
- transition: all 0.15s;
454
- font-family: inherit;
1128
+ transition: all var(--duration-normal) var(--ease-out);
455
1129
  }
456
1130
 
457
- .jump-to-start-btn:hover {
458
- color: var(--text);
459
- border-color: var(--accent2);
1131
+ .suggestion-chip:hover {
1132
+ border-color: var(--accent);
1133
+ color: var(--accent);
1134
+ background: var(--accent-soft);
460
1135
  }
461
1136
 
462
- /* File activity */
463
- .file-item {
464
- background: var(--bg2);
465
- border: 1px solid var(--border);
466
- border-radius: var(--radius);
467
- padding: 12px 18px;
468
- margin-bottom: 6px;
469
- cursor: pointer;
470
- transition: all 0.15s;
1137
+ /* ---- Session Detail Header Card ---- */
1138
+ .session-detail-card {
1139
+ background: var(--bg-surface);
1140
+ border: 1px solid var(--border-subtle);
1141
+ border-radius: var(--radius-lg);
1142
+ padding: var(--space-xl);
1143
+ margin-bottom: var(--space-xl);
1144
+ position: relative;
1145
+ overflow: hidden;
471
1146
  }
472
1147
 
473
- .file-item:hover { border-color: var(--accent); }
1148
+ .session-detail-card::before {
1149
+ content: '';
1150
+ position: absolute;
1151
+ top: 0;
1152
+ left: 0;
1153
+ right: 0;
1154
+ height: 1px;
1155
+ background: linear-gradient(90deg, var(--accent), var(--purple), transparent);
1156
+ opacity: 0.4;
1157
+ }
474
1158
 
475
- .file-path {
476
- font-family: var(--mono);
1159
+ .session-detail-grid {
1160
+ display: grid;
1161
+ grid-template-columns: repeat(2, 1fr);
1162
+ gap: var(--space-sm) var(--space-lg);
477
1163
  font-size: 13px;
478
- color: var(--accent);
479
- word-break: break-all;
480
1164
  }
481
1165
 
482
- .file-meta {
1166
+ .session-detail-grid span {
483
1167
  display: flex;
484
- gap: 16px;
485
- margin-top: 6px;
486
- font-size: 12px;
487
- color: var(--text2);
488
- flex-wrap: wrap;
1168
+ align-items: center;
1169
+ gap: var(--space-sm);
1170
+ color: var(--text-secondary);
489
1171
  }
490
1172
 
491
- /* Mobile */
1173
+ .session-detail-grid .detail-icon {
1174
+ color: var(--text-tertiary);
1175
+ font-size: 14px;
1176
+ width: 18px;
1177
+ text-align: center;
1178
+ }
1179
+
1180
+ /* ---- Mobile ---- */
492
1181
  @media (max-width: 768px) {
493
1182
  .sidebar {
494
1183
  position: fixed;
@@ -499,17 +1188,27 @@ mark { background: rgba(210,153,34,0.3); color: var(--text); border-radius: 2px;
499
1188
  width: 100%;
500
1189
  height: auto;
501
1190
  border-right: none;
502
- border-top: 1px solid var(--border);
1191
+ border-top: 1px solid var(--border-subtle);
503
1192
  padding: 0;
504
- padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
1193
+ padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
505
1194
  display: flex;
506
1195
  flex-direction: row;
507
1196
  overflow: hidden;
508
1197
  z-index: 100;
509
- background: var(--bg2);
1198
+ background: var(--bg-surface);
1199
+ backdrop-filter: blur(20px);
1200
+ -webkit-backdrop-filter: blur(20px);
510
1201
  }
511
1202
 
512
- .sidebar h1 { display: none; }
1203
+ .sidebar-header { display: none; }
1204
+
1205
+ .nav-section {
1206
+ display: flex;
1207
+ flex-direction: row;
1208
+ width: 100%;
1209
+ padding: 0;
1210
+ gap: 0;
1211
+ }
513
1212
 
514
1213
  .nav-item {
515
1214
  flex: 1;
@@ -518,46 +1217,135 @@ mark { background: rgba(210,153,34,0.3); color: var(--text); border-radius: 2px;
518
1217
  justify-content: center;
519
1218
  padding: 10px 0 4px;
520
1219
  font-size: 10px;
521
- gap: 4px;
522
- border-left: none;
523
- border-top: none;
1220
+ gap: 3px;
1221
+ border-radius: 0;
524
1222
  letter-spacing: 0.02em;
525
1223
  }
526
1224
 
527
- .nav-item svg { width: 24px; height: 24px; }
1225
+ .nav-item::before { display: none; }
1226
+
1227
+ .nav-item svg { width: 22px; height: 22px; }
528
1228
 
529
1229
  .nav-item.active {
530
- border-left-color: transparent;
531
1230
  color: var(--accent);
532
1231
  background: transparent;
533
1232
  }
534
1233
 
535
1234
  .main {
536
1235
  margin-left: 0;
537
- padding: 20px 16px;
538
- padding-top: calc(20px + env(safe-area-inset-top, 0px));
1236
+ padding: var(--space-xl) var(--space-lg);
1237
+ padding-top: calc(var(--space-xl) + env(safe-area-inset-top, 0px));
539
1238
  padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), 20px));
540
1239
  max-width: 100%;
541
1240
  }
542
1241
 
1242
+ .page-title {
1243
+ font-size: 20px;
1244
+ }
1245
+
543
1246
  .stat-grid {
544
1247
  grid-template-columns: repeat(2, 1fr);
545
- gap: 8px;
1248
+ gap: var(--space-sm);
1249
+ }
1250
+
1251
+ .stat-card {
1252
+ padding: var(--space-md) var(--space-lg);
546
1253
  }
547
1254
 
548
- .stat-card { padding: 12px 14px; }
549
1255
  .stat-card .value { font-size: 22px; }
550
1256
 
551
- .session-header { flex-direction: column; align-items: flex-start; gap: 4px; }
1257
+ .search-stats {
1258
+ grid-template-columns: repeat(2, 1fr);
1259
+ }
552
1260
 
553
- .event-item { flex-direction: column; gap: 6px; }
1261
+ .session-header {
1262
+ flex-direction: column;
1263
+ align-items: flex-start;
1264
+ gap: var(--space-xs);
1265
+ }
1266
+
1267
+ .event-item { flex-direction: column; gap: 2px; }
554
1268
  .event-time { min-width: auto; }
555
1269
 
556
- .filters { gap: 6px; }
557
- .filter-chip { font-size: 12px; padding: 4px 10px; }
1270
+ .timeline-event {
1271
+ flex-direction: column;
1272
+ gap: 1px;
1273
+ padding-left: var(--space-md);
1274
+ padding-top: var(--space-sm);
1275
+ padding-bottom: var(--space-sm);
1276
+ border-bottom: 1px solid rgba(255, 255, 255, 0.03);
1277
+ }
1278
+
1279
+ .timeline-event .event-time {
1280
+ font-size: 10px;
1281
+ min-width: auto;
1282
+ opacity: 0.45;
1283
+ line-height: 1.2;
1284
+ }
1285
+
1286
+ .timeline-event .event-badge {
1287
+ align-self: flex-start;
1288
+ display: inline-block;
1289
+ }
1290
+
1291
+ .timeline-event .event-body {
1292
+ width: 100%;
1293
+ font-size: 13px;
1294
+ line-height: 1.4;
1295
+ word-break: break-word;
1296
+ margin-top: 0;
1297
+ }
1298
+
1299
+ .timeline-event .tool-args {
1300
+ padding: var(--space-sm) var(--space-md);
1301
+ margin-top: 2px;
1302
+ font-size: 11px;
1303
+ line-height: 1.4;
1304
+ }
1305
+
1306
+ .timeline-event .event-content {
1307
+ font-size: 12px;
1308
+ line-height: 1.4;
1309
+ }
1310
+
1311
+ .timeline-container {
1312
+ padding-left: 0;
1313
+ }
1314
+
1315
+ .timeline-day-header {
1316
+ padding: var(--space-sm) 0 var(--space-xs);
1317
+ margin-bottom: var(--space-sm);
1318
+ }
1319
+
1320
+ .timeline-event::before {
1321
+ display: none;
1322
+ }
1323
+
1324
+ .timeline-events-wrap {
1325
+ position: relative;
1326
+ padding-left: 24px;
1327
+ }
1328
+
1329
+ .timeline-line {
1330
+ display: none;
1331
+ }
1332
+
1333
+ .timeline-events-wrap {
1334
+ padding-left: 0;
1335
+ }
1336
+
1337
+ .filters { gap: var(--space-sm); }
1338
+ .filter-chip { font-size: 11px; padding: 4px 12px; }
558
1339
 
559
1340
  .search-bar input { font-size: 16px; /* prevent iOS zoom */ }
560
1341
 
561
1342
  .result-meta { flex-wrap: wrap; }
562
1343
  .tool-args { font-size: 11px; }
1344
+
1345
+ .session-id-value { font-size: 10px; }
1346
+
1347
+ .session-detail-grid {
1348
+ grid-template-columns: 1fr;
1349
+ }
563
1350
  }
1351
+