ai-agent-inspector 1.0.0__py3-none-any.whl

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,630 @@
1
+ :root {
2
+ --bg: #f3f0ea;
3
+ --bg-2: #f9f7f3;
4
+ --ink: #1f1d1a;
5
+ --muted: #6e6a63;
6
+ --panel: #ffffffcc;
7
+ --panel-strong: #ffffff;
8
+ --line: #e3ddd2;
9
+ --accent: #0f6f5c;
10
+ --accent-2: #d1774f;
11
+ --accent-3: #2d6cdf;
12
+ --chip: #e6f3ef;
13
+ --shadow: 0 10px 30px rgba(32, 26, 17, 0.12);
14
+ --radius: 16px;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ body {
24
+ font-family: "Space Grotesk", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
25
+ color: var(--ink);
26
+ background:
27
+ radial-gradient(1000px 600px at 10% -10%, #ffe8d1 0%, transparent 60%),
28
+ radial-gradient(900px 500px at 110% 0%, #dff4ff 0%, transparent 55%),
29
+ linear-gradient(180deg, var(--bg), var(--bg-2));
30
+ height: 100vh;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .container {
35
+ display: grid;
36
+ grid-template-columns: 28% 46% 26%;
37
+ height: 100vh;
38
+ gap: 16px;
39
+ padding: 16px;
40
+ }
41
+
42
+ .panel {
43
+ background-color: var(--panel);
44
+ border: 1px solid var(--line);
45
+ border-radius: var(--radius);
46
+ overflow-y: auto;
47
+ display: flex;
48
+ flex-direction: column;
49
+ box-shadow: var(--shadow);
50
+ backdrop-filter: blur(10px);
51
+ }
52
+
53
+ .panel:last-child {
54
+ border-right: 1px solid var(--line);
55
+ }
56
+
57
+ .panel-header {
58
+ padding: 16px 18px;
59
+ border-bottom: 1px solid var(--line);
60
+ background-color: var(--panel-strong);
61
+ font-weight: 700;
62
+ color: var(--ink);
63
+ font-family: "Fraunces", "Iowan Old Style", "Palatino", "Times New Roman", serif;
64
+ letter-spacing: 0.2px;
65
+ position: sticky;
66
+ top: 0;
67
+ z-index: 10;
68
+ }
69
+
70
+ .panel-content {
71
+ flex: 1;
72
+ overflow-y: auto;
73
+ padding: 16px 18px 22px 18px;
74
+ }
75
+
76
+ /* Left Panel - Run List */
77
+ .filters {
78
+ padding: 12px 14px 14px 14px;
79
+ background-color: var(--panel-strong);
80
+ border-bottom: 1px solid var(--line);
81
+ }
82
+
83
+ .search-input {
84
+ width: 100%;
85
+ padding: 10px 12px;
86
+ border: 1px solid var(--line);
87
+ border-radius: 10px;
88
+ margin-bottom: 8px;
89
+ font-size: 14px;
90
+ background-color: #fff;
91
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
92
+ }
93
+
94
+ .search-input:focus {
95
+ outline: none;
96
+ border-color: var(--accent);
97
+ box-shadow: 0 0 0 3px rgba(15, 111, 92, 0.15);
98
+ }
99
+
100
+ .filter-select {
101
+ width: 100%;
102
+ padding: 10px 12px;
103
+ border: 1px solid var(--line);
104
+ border-radius: 10px;
105
+ margin-bottom: 8px;
106
+ font-size: 14px;
107
+ background-color: #fff;
108
+ }
109
+
110
+ .run-list {
111
+ list-style: none;
112
+ display: flex;
113
+ flex-direction: column;
114
+ gap: 10px;
115
+ }
116
+
117
+ .run-item {
118
+ padding: 14px 16px;
119
+ border: 1px solid var(--line);
120
+ border-radius: 12px;
121
+ cursor: pointer;
122
+ transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
123
+ background: #fff;
124
+ }
125
+
126
+ .run-item:hover {
127
+ transform: translateY(-1px);
128
+ box-shadow: 0 6px 18px rgba(21, 16, 10, 0.08);
129
+ border-color: #d7cfc1;
130
+ }
131
+
132
+ .run-item.active {
133
+ border-color: var(--accent);
134
+ box-shadow: 0 0 0 2px rgba(15, 111, 92, 0.2);
135
+ }
136
+
137
+ .run-name {
138
+ font-weight: 600;
139
+ color: var(--accent-3);
140
+ margin-bottom: 4px;
141
+ }
142
+
143
+ .run-meta {
144
+ font-size: 12px;
145
+ color: var(--muted);
146
+ }
147
+
148
+ .run-status {
149
+ display: inline-block;
150
+ padding: 4px 10px;
151
+ border-radius: 999px;
152
+ font-size: 11px;
153
+ font-weight: 600;
154
+ margin-left: 8px;
155
+ }
156
+
157
+ .run-status.completed {
158
+ background-color: #e1f3e9;
159
+ color: #1f6e4c;
160
+ }
161
+
162
+ .run-status.running {
163
+ background-color: #e4eefc;
164
+ color: #1f4ca3;
165
+ }
166
+
167
+ .run-status.failed {
168
+ background-color: #fde4e2;
169
+ color: #b43c2f;
170
+ }
171
+
172
+ /* Center Panel - Timeline */
173
+ .timeline {
174
+ position: relative;
175
+ }
176
+
177
+ .timeline-event {
178
+ display: flex;
179
+ align-items: flex-start;
180
+ padding: 12px;
181
+ border-radius: 12px;
182
+ margin-bottom: 10px;
183
+ border: 1px solid var(--line);
184
+ background: #fff;
185
+ }
186
+
187
+ .timeline-event:hover {
188
+ box-shadow: 0 6px 16px rgba(21, 16, 10, 0.08);
189
+ }
190
+
191
+ .event-icon {
192
+ width: 40px;
193
+ height: 40px;
194
+ border-radius: 50%;
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ margin-right: 12px;
199
+ flex-shrink: 0;
200
+ font-weight: bold;
201
+ color: white;
202
+ font-size: 14px;
203
+ }
204
+
205
+ .event-icon.llm_call {
206
+ background-color: #1f8f6f;
207
+ }
208
+
209
+ .event-icon.tool_call {
210
+ background-color: #2d6cdf;
211
+ }
212
+
213
+ .event-icon.memory_read {
214
+ background-color: #d1774f;
215
+ }
216
+
217
+ .event-icon.memory_write {
218
+ background-color: #d1774f;
219
+ }
220
+
221
+ .event-icon.error {
222
+ background-color: #d84b4b;
223
+ }
224
+
225
+ .event-icon.final_answer {
226
+ background-color: #7a5bd6;
227
+ }
228
+
229
+ .event-content {
230
+ flex: 1;
231
+ }
232
+
233
+ .event-type {
234
+ font-weight: 600;
235
+ color: var(--ink);
236
+ margin-bottom: 4px;
237
+ }
238
+
239
+ .event-timestamp {
240
+ font-size: 12px;
241
+ color: var(--muted);
242
+ margin-bottom: 4px;
243
+ }
244
+
245
+ .event-summary {
246
+ font-size: 13px;
247
+ color: #4b4741;
248
+ white-space: nowrap;
249
+ overflow: hidden;
250
+ text-overflow: ellipsis;
251
+ }
252
+
253
+ .event-connector {
254
+ position: absolute;
255
+ left: 20px;
256
+ top: 0;
257
+ bottom: 0;
258
+ width: 2px;
259
+ background-color: #e6dfd1;
260
+ z-index: 0;
261
+ }
262
+
263
+ /* Right Panel - Detail View */
264
+ .detail-content {
265
+ font-size: 13px;
266
+ color: var(--ink);
267
+ }
268
+
269
+ .detail-section {
270
+ margin-bottom: 16px;
271
+ }
272
+
273
+ .detail-label {
274
+ font-weight: 600;
275
+ color: var(--muted);
276
+ margin-bottom: 4px;
277
+ font-size: 11px;
278
+ text-transform: uppercase;
279
+ letter-spacing: 0.4px;
280
+ }
281
+
282
+ .detail-value {
283
+ background-color: #fff;
284
+ padding: 10px 12px;
285
+ border-radius: 10px;
286
+ border: 1px solid var(--line);
287
+ font-family: 'Courier New', monospace;
288
+ font-size: 12px;
289
+ word-wrap: break-word;
290
+ }
291
+
292
+ .detail-chat {
293
+ background-color: #fff;
294
+ padding: 10px 12px;
295
+ border-radius: 10px;
296
+ border: 1px solid var(--line);
297
+ font-size: 12px;
298
+ display: flex;
299
+ flex-direction: column;
300
+ gap: 8px;
301
+ }
302
+
303
+ .chat-row {
304
+ display: grid;
305
+ grid-template-columns: 80px 1fr;
306
+ gap: 8px;
307
+ align-items: start;
308
+ padding: 6px 8px;
309
+ border-radius: 6px;
310
+ background-color: #fff;
311
+ border: 1px solid #ece7dd;
312
+ }
313
+
314
+ .chat-row.system {
315
+ background-color: #eef6ff;
316
+ border-color: #d6e7ff;
317
+ }
318
+
319
+ .chat-row.user {
320
+ background-color: #f3f7f0;
321
+ border-color: #e1ebda;
322
+ }
323
+
324
+ .chat-row.assistant {
325
+ background-color: #fff6e9;
326
+ border-color: #ffe6c9;
327
+ }
328
+
329
+ .chat-role {
330
+ font-weight: 600;
331
+ text-transform: uppercase;
332
+ font-size: 10px;
333
+ color: #666;
334
+ }
335
+
336
+ .chat-content {
337
+ white-space: pre-wrap;
338
+ line-height: 1.4;
339
+ color: #333;
340
+ }
341
+
342
+ .detail-empty {
343
+ color: #999;
344
+ font-style: italic;
345
+ }
346
+
347
+ /* Loading state */
348
+ .loading {
349
+ text-align: center;
350
+ padding: 40px;
351
+ color: var(--muted);
352
+ }
353
+
354
+ /* Error state */
355
+ .error {
356
+ color: #d84b4b;
357
+ text-align: center;
358
+ padding: 40px;
359
+ }
360
+
361
+ @keyframes fadeUp {
362
+ from { opacity: 0; transform: translateY(6px); }
363
+ to { opacity: 1; transform: translateY(0); }
364
+ }
365
+
366
+ .panel, .run-item, .timeline-event, .detail-section {
367
+ animation: fadeUp 0.3s ease both;
368
+ }
369
+
370
+ @media (max-width: 900px) {
371
+ .container {
372
+ grid-template-columns: 1fr;
373
+ grid-template-rows: auto auto auto;
374
+ height: auto;
375
+ overflow: auto;
376
+ }
377
+
378
+ body {
379
+ overflow: auto;
380
+ }
381
+ }
382
+
383
+ .theme-toggle {
384
+ position: fixed;
385
+ top: 16px;
386
+ right: 16px;
387
+ z-index: 50;
388
+ background: #ffffff;
389
+ border: 1px solid var(--line);
390
+ border-radius: 999px;
391
+ padding: 8px 14px;
392
+ font-size: 12px;
393
+ font-weight: 600;
394
+ color: var(--ink);
395
+ box-shadow: 0 6px 16px rgba(21, 16, 10, 0.12);
396
+ cursor: pointer;
397
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
398
+ }
399
+
400
+ .theme-toggle:hover {
401
+ transform: translateY(-1px);
402
+ box-shadow: 0 10px 20px rgba(21, 16, 10, 0.16);
403
+ }
404
+
405
+ html.theme-dark .theme-toggle {
406
+ background: #1e1b17;
407
+ border-color: #3b362f;
408
+ color: #efe9df;
409
+ }
410
+
411
+ html.theme-light .theme-toggle {
412
+ background: #ffffff;
413
+ }
414
+
415
+ html.theme-dark body {
416
+ background:
417
+ radial-gradient(1000px 600px at 10% -10%, #2f2a23 0%, transparent 60%),
418
+ radial-gradient(900px 500px at 110% 0%, #1f2d3a 0%, transparent 55%),
419
+ linear-gradient(180deg, #141311, #1c1915);
420
+ }
421
+
422
+ html.theme-dark .panel {
423
+ background-color: rgba(34, 32, 28, 0.92);
424
+ border-color: #3b362f;
425
+ }
426
+
427
+ html.theme-dark .panel-header {
428
+ background-color: #1d1b18;
429
+ color: #efe9df;
430
+ }
431
+
432
+ html.theme-dark .run-item,
433
+ html.theme-dark .timeline-event {
434
+ background-color: #1b1916;
435
+ border-color: #2f2a23;
436
+ box-shadow: none;
437
+ }
438
+
439
+ html.theme-dark .event-connector {
440
+ background-color: #2b261f;
441
+ }
442
+
443
+ html.theme-dark .run-item:hover {
444
+ background-color: #25221d;
445
+ }
446
+
447
+ html.theme-dark .run-name {
448
+ color: #86b7ff;
449
+ }
450
+
451
+ html.theme-dark .run-meta {
452
+ color: #b6b0a8;
453
+ }
454
+
455
+ html.theme-dark .filters {
456
+ background-color: #1d1b18;
457
+ border-bottom-color: #3b362f;
458
+ }
459
+
460
+ html.theme-dark .search-input,
461
+ html.theme-dark .filter-select {
462
+ background-color: #151311;
463
+ border-color: #3b362f;
464
+ color: #efe9df;
465
+ }
466
+
467
+ html.theme-dark .event-type {
468
+ color: #efe9df;
469
+ }
470
+
471
+ html.theme-dark .event-timestamp {
472
+ color: #b6b0a8;
473
+ }
474
+
475
+ html.theme-dark .event-summary {
476
+ color: #cfc7bb;
477
+ }
478
+
479
+ html.theme-dark .detail-label {
480
+ color: #b6b0a8;
481
+ }
482
+
483
+ html.theme-dark .detail-value {
484
+ background-color: #151311;
485
+ border-color: #3b362f;
486
+ color: #efe9df;
487
+ }
488
+
489
+ html.theme-dark .detail-chat {
490
+ background-color: #151311;
491
+ border-color: #3b362f;
492
+ }
493
+
494
+ html.theme-dark .chat-row {
495
+ background-color: #1e1b17;
496
+ border-color: #2f2a23;
497
+ }
498
+
499
+ html.theme-dark .chat-row.system {
500
+ background-color: #233045;
501
+ border-color: #2f3f5c;
502
+ }
503
+
504
+ html.theme-dark .chat-row.user {
505
+ background-color: #263122;
506
+ border-color: #33412d;
507
+ }
508
+
509
+ html.theme-dark .chat-row.assistant {
510
+ background-color: #3a2f1f;
511
+ border-color: #4a3a25;
512
+ }
513
+
514
+ html.theme-dark .chat-role {
515
+ color: #cfc7bb;
516
+ }
517
+
518
+ html.theme-dark .chat-content {
519
+ color: #efe9df;
520
+ }
521
+
522
+ /* Dark mode support (auto when no manual light override) */
523
+ @media (prefers-color-scheme: dark) {
524
+ html:not(.theme-light) body {
525
+ background:
526
+ radial-gradient(1000px 600px at 10% -10%, #2f2a23 0%, transparent 60%),
527
+ radial-gradient(900px 500px at 110% 0%, #1f2d3a 0%, transparent 55%),
528
+ linear-gradient(180deg, #141311, #1c1915);
529
+ }
530
+
531
+ html:not(.theme-light) .panel {
532
+ background-color: rgba(34, 32, 28, 0.92);
533
+ border-color: #3b362f;
534
+ }
535
+
536
+ html:not(.theme-light) .panel-header {
537
+ background-color: #1d1b18;
538
+ color: #efe9df;
539
+ }
540
+
541
+ html:not(.theme-light) .run-item,
542
+ html:not(.theme-light) .timeline-event {
543
+ background-color: #1b1916;
544
+ border-color: #2f2a23;
545
+ box-shadow: none;
546
+ }
547
+
548
+ html:not(.theme-light) .event-connector {
549
+ background-color: #2b261f;
550
+ }
551
+
552
+ html:not(.theme-light) .run-item:hover {
553
+ background-color: #25221d;
554
+ }
555
+
556
+ html:not(.theme-light) .run-name {
557
+ color: #86b7ff;
558
+ }
559
+
560
+ html:not(.theme-light) .run-meta {
561
+ color: #b6b0a8;
562
+ }
563
+
564
+ html:not(.theme-light) .filters {
565
+ background-color: #1d1b18;
566
+ border-bottom-color: #3b362f;
567
+ }
568
+
569
+ html:not(.theme-light) .search-input,
570
+ html:not(.theme-light) .filter-select {
571
+ background-color: #151311;
572
+ border-color: #3b362f;
573
+ color: #efe9df;
574
+ }
575
+
576
+ html:not(.theme-light) .event-type {
577
+ color: #efe9df;
578
+ }
579
+
580
+ html:not(.theme-light) .event-timestamp {
581
+ color: #b6b0a8;
582
+ }
583
+
584
+ html:not(.theme-light) .event-summary {
585
+ color: #cfc7bb;
586
+ }
587
+
588
+ html:not(.theme-light) .detail-label {
589
+ color: #b6b0a8;
590
+ }
591
+
592
+ html:not(.theme-light) .detail-value {
593
+ background-color: #151311;
594
+ border-color: #3b362f;
595
+ color: #efe9df;
596
+ }
597
+
598
+ html:not(.theme-light) .detail-chat {
599
+ background-color: #151311;
600
+ border-color: #3b362f;
601
+ }
602
+
603
+ html:not(.theme-light) .chat-row {
604
+ background-color: #1e1b17;
605
+ border-color: #2f2a23;
606
+ }
607
+
608
+ html:not(.theme-light) .chat-row.system {
609
+ background-color: #233045;
610
+ border-color: #2f3f5c;
611
+ }
612
+
613
+ html:not(.theme-light) .chat-row.user {
614
+ background-color: #263122;
615
+ border-color: #33412d;
616
+ }
617
+
618
+ html:not(.theme-light) .chat-row.assistant {
619
+ background-color: #3a2f1f;
620
+ border-color: #4a3a25;
621
+ }
622
+
623
+ html:not(.theme-light) .chat-role {
624
+ color: #cfc7bb;
625
+ }
626
+
627
+ html:not(.theme-light) .chat-content {
628
+ color: #efe9df;
629
+ }
630
+ }