claude-code-templates 1.11.0 → 1.12.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.
Files changed (8) hide show
  1. package/package.json +1 -2
  2. package/src/analytics/core/ConversationAnalyzer.js +65 -23
  3. package/src/analytics-web/components/AgentsPage.js +2365 -156
  4. package/src/analytics-web/components/App.js +11 -0
  5. package/src/analytics-web/components/DashboardPage.js +4 -0
  6. package/src/analytics-web/components/ToolDisplay.js +17 -2
  7. package/src/analytics-web/index.html +3005 -1059
  8. package/src/analytics.js +342 -3
package/src/analytics-web/index.html CHANGED
@@ -3178,160 +3178,153 @@
3178
3178
  margin-bottom: 20px;
3179
3179
  }
3180
3180
 
3181
- .conversations-filters {
3181
+ /* Agents Section Styling */
3182
+ .agents-section {
3182
3183
  background: var(--bg-secondary);
3183
3184
  border: 1px solid var(--border-primary);
3184
3185
  border-radius: 8px;
3185
- padding: 20px;
3186
- margin-bottom: 20px;
3186
+ padding: 12px 16px;
3187
+ margin-bottom: 16px;
3187
3188
  }
3188
3189
 
3189
- .filters-row {
3190
+ .agents-header {
3190
3191
  display: flex;
3191
- flex-wrap: wrap;
3192
- gap: 20px;
3193
- align-items: flex-end;
3194
- margin-bottom: 16px;
3192
+ justify-content: space-between;
3193
+ align-items: center;
3194
+ margin-bottom: 10px;
3195
3195
  }
3196
3196
 
3197
- .filter-group {
3198
- display: flex;
3199
- flex-direction: column;
3200
- gap: 6px;
3201
- min-width: 150px;
3202
- align-self: flex-end;
3197
+ .agents-header h4 {
3198
+ margin: 0;
3199
+ color: var(--text-primary);
3200
+ font-size: 1em;
3201
+ font-weight: 600;
3203
3202
  }
3204
3203
 
3205
- .filter-group.search-group {
3206
- flex: 1;
3207
- min-width: 250px;
3208
- align-self: flex-end;
3209
- gap: 8px;
3204
+ .agents-info {
3205
+ display: flex;
3206
+ align-items: center;
3207
+ gap: 12px;
3210
3208
  }
3211
3209
 
3212
- .filter-label {
3213
- font-size: 0.75rem;
3210
+ .agents-count {
3214
3211
  color: var(--text-secondary);
3215
- font-weight: 600;
3216
- text-transform: uppercase;
3217
- letter-spacing: 0.5px;
3218
- margin-bottom: 2px;
3219
- line-height: 1.2;
3212
+ font-size: 0.9em;
3220
3213
  }
3221
3214
 
3222
- .filter-select {
3215
+ .refresh-agents-btn {
3223
3216
  background: var(--bg-tertiary);
3224
3217
  border: 1px solid var(--border-primary);
3225
- color: var(--text-primary);
3226
- padding: 8px 12px;
3227
3218
  border-radius: 4px;
3228
- font-size: 0.875rem;
3229
- font-family: inherit;
3230
- height: 40px;
3231
- box-sizing: border-box;
3219
+ padding: 6px 8px;
3220
+ color: var(--text-secondary);
3221
+ cursor: pointer;
3222
+ transition: all 0.2s ease;
3232
3223
  }
3233
3224
 
3234
- .filter-select:focus {
3235
- outline: none;
3236
- border-color: var(--text-accent);
3237
- box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
3225
+ .refresh-agents-btn:hover {
3226
+ background: var(--bg-primary);
3227
+ color: var(--text-primary);
3238
3228
  }
3239
3229
 
3240
- .search-input-container {
3241
- position: relative;
3230
+ .agents-list {
3242
3231
  display: flex;
3243
- align-items: center;
3244
- height: 40px;
3245
- width: 100%;
3232
+ flex-wrap: wrap;
3233
+ gap: 8px;
3234
+ margin-bottom: 12px;
3246
3235
  }
3247
3236
 
3248
- .search-input {
3237
+ .agent-item {
3238
+ display: inline-flex;
3239
+ align-items: center;
3240
+ gap: 6px;
3249
3241
  background: var(--bg-tertiary);
3250
3242
  border: 1px solid var(--border-primary);
3251
- color: var(--text-primary);
3252
- padding: 8px 12px;
3253
- padding-right: 36px;
3254
3243
  border-radius: 4px;
3255
- font-size: 0.875rem;
3256
- font-family: inherit;
3257
- width: 100%;
3258
- height: 100%;
3259
- box-sizing: border-box;
3260
- margin: 0;
3244
+ padding: 4px 8px;
3245
+ cursor: pointer;
3246
+ transition: all 0.2s ease;
3247
+ font-size: 0.85em;
3248
+ white-space: nowrap;
3249
+ width: fit-content;
3261
3250
  }
3262
3251
 
3263
- .search-input:focus {
3264
- outline: none;
3252
+ .agent-item:hover {
3253
+ background: var(--bg-primary);
3254
+ border-color: var(--border-secondary);
3255
+ transform: translateY(-1px);
3256
+ }
3257
+
3258
+ .agent-item.selected {
3259
+ background: var(--bg-primary);
3265
3260
  border-color: var(--text-accent);
3266
- box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
3261
+ box-shadow: 0 0 0 1px var(--text-accent);
3267
3262
  }
3268
3263
 
3269
- .search-clear {
3270
- position: absolute;
3271
- right: 8px;
3272
- top: 50%;
3273
- transform: translateY(-50%);
3274
- background: none;
3275
- border: none;
3276
- color: var(--text-secondary);
3277
- cursor: pointer;
3278
- font-size: 1.2rem;
3279
- padding: 4px;
3280
- border-radius: 2px;
3281
- transition: all 0.2s ease;
3282
- height: 24px;
3283
- width: 24px;
3284
- display: flex;
3285
- align-items: center;
3286
- justify-content: center;
3264
+ .agent-dot {
3265
+ width: 8px;
3266
+ height: 8px;
3267
+ border-radius: 50%;
3268
+ flex-shrink: 0;
3287
3269
  }
3288
3270
 
3289
- .search-clear:hover {
3290
- color: var(--text-accent);
3291
- background: var(--bg-primary);
3271
+ .agent-name {
3272
+ color: var(--text-primary);
3273
+ font-weight: 500;
3292
3274
  }
3293
3275
 
3294
- .results-count {
3295
- font-size: 0.875rem;
3296
- color: var(--text-secondary);
3276
+ .agent-level-badge {
3277
+ display: inline-flex;
3278
+ align-items: center;
3279
+ justify-content: center;
3280
+ min-width: 16px;
3281
+ height: 16px;
3282
+ border-radius: 50%;
3283
+ font-size: 0.65em;
3284
+ font-weight: bold;
3285
+ color: white;
3286
+ flex-shrink: 0;
3287
+ line-height: 1;
3297
3288
  }
3298
3289
 
3299
- .clear-filters-btn {
3290
+ .agent-level-badge.project {
3300
3291
  background: none;
3301
- border: 1px solid var(--border-primary);
3302
- color: var(--text-secondary);
3303
- padding: 6px 12px;
3304
- border-radius: 4px;
3305
- font-size: 0.75rem;
3306
- cursor: pointer;
3307
- transition: all 0.2s ease;
3292
+ color: #ffa500;
3308
3293
  }
3309
3294
 
3310
- .clear-filters-btn:hover {
3311
- border-color: var(--text-accent);
3312
- color: var(--text-accent);
3295
+ .agent-level-badge.user {
3296
+ background: none;
3297
+ color: #00d4aa;
3313
3298
  }
3314
3299
 
3315
- /* Two Column Layout */
3316
- .conversations-layout {
3317
- display: grid;
3318
- grid-template-columns: 350px 1fr;
3319
- gap: 20px;
3320
- height: calc(100vh - 400px);
3321
- min-height: 600px;
3300
+
3301
+ /* Agent Modal Styling */
3302
+ .agent-modal-overlay {
3303
+ position: fixed;
3304
+ top: 0;
3305
+ left: 0;
3306
+ right: 0;
3307
+ bottom: 0;
3308
+ background: rgba(0, 0, 0, 0.7);
3309
+ display: flex;
3310
+ align-items: center;
3311
+ justify-content: center;
3312
+ z-index: 1000;
3313
+ backdrop-filter: blur(2px);
3322
3314
  }
3323
-
3324
- /* Left Sidebar */
3325
- .conversations-sidebar {
3315
+
3316
+ .agent-modal {
3326
3317
  background: var(--bg-secondary);
3327
3318
  border: 1px solid var(--border-primary);
3328
3319
  border-radius: 8px;
3320
+ width: 90%;
3321
+ max-width: 600px;
3322
+ max-height: 80vh;
3329
3323
  overflow: hidden;
3330
- display: flex;
3331
- flex-direction: column;
3324
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
3332
3325
  }
3333
-
3334
- .sidebar-header {
3326
+
3327
+ .agent-modal-header {
3335
3328
  display: flex;
3336
3329
  justify-content: space-between;
3337
3330
  align-items: center;
@@ -3339,1258 +3332,3187 @@
3339
3332
  border-bottom: 1px solid var(--border-primary);
3340
3333
  background: var(--bg-tertiary);
3341
3334
  }
3342
-
3343
- .sidebar-header h3 {
3344
- margin: 0;
3345
- font-size: 1rem;
3346
- color: var(--text-primary);
3347
- font-weight: 600;
3348
- }
3349
-
3350
- .conversation-count {
3351
- background: var(--text-accent);
3352
- color: white;
3353
- font-size: 0.75rem;
3354
- padding: 2px 8px;
3355
- border-radius: 12px;
3356
- font-weight: 600;
3357
- }
3358
-
3359
- .conversations-list {
3360
- flex: 1;
3361
- overflow-y: auto;
3362
- padding: 8px;
3335
+
3336
+ .agent-modal-title {
3337
+ display: flex;
3338
+ align-items: center;
3339
+ gap: 10px;
3363
3340
  }
3364
3341
 
3365
- /* Load More Indicator */
3366
- .load-more-indicator {
3342
+ .agent-title-main {
3367
3343
  display: flex;
3368
- flex-direction: column;
3369
3344
  align-items: center;
3370
- justify-content: center;
3371
- padding: 20px;
3372
3345
  gap: 12px;
3373
- border-top: 1px solid var(--border-primary);
3374
- background: var(--bg-secondary);
3375
- margin: 8px;
3376
- border-radius: 6px;
3377
3346
  }
3378
3347
 
3379
- .load-more-indicator .loading-spinner {
3380
- width: 20px;
3381
- height: 20px;
3348
+ .agent-title-info h3 {
3349
+ margin: 0 0 4px 0;
3350
+ color: var(--text-primary);
3351
+ font-size: 1.3em;
3352
+ font-weight: 600;
3382
3353
  }
3383
3354
 
3384
- .load-more-indicator .loading-text {
3385
- font-size: 0.85rem;
3355
+ .agent-subtitle {
3356
+ display: flex;
3357
+ align-items: center;
3358
+ gap: 8px;
3359
+ font-size: 0.85em;
3360
+ }
3361
+
3362
+ .agent-project-name {
3386
3363
  color: var(--text-secondary);
3387
- font-weight: 500;
3364
+ font-style: italic;
3388
3365
  }
3389
-
3390
- /* Sidebar Conversation Items */
3391
- .sidebar-conversation-item {
3392
- padding: 12px;
3393
- margin-bottom: 8px;
3394
- border-radius: 6px;
3366
+
3367
+ .agent-modal-close {
3368
+ background: none;
3369
+ border: none;
3370
+ color: var(--text-secondary);
3371
+ font-size: 1.5em;
3395
3372
  cursor: pointer;
3373
+ padding: 4px;
3374
+ border-radius: 4px;
3396
3375
  transition: all 0.2s ease;
3397
- border: 1px solid transparent;
3398
3376
  }
3399
-
3400
- .sidebar-conversation-item:hover {
3401
- background: var(--bg-tertiary);
3402
- border-color: var(--border-primary);
3377
+
3378
+ .agent-modal-close:hover {
3379
+ background: var(--bg-primary);
3380
+ color: var(--text-primary);
3403
3381
  }
3404
-
3405
- .sidebar-conversation-item.selected {
3406
- background: var(--bg-tertiary);
3407
- border-color: var(--text-accent);
3408
- box-shadow: 0 0 0 1px rgba(213, 116, 85, 0.2);
3382
+
3383
+ .agent-modal-content {
3384
+ padding: 20px;
3385
+ max-height: calc(80vh - 80px);
3386
+ overflow-y: auto;
3409
3387
  }
3410
-
3411
- .sidebar-conversation-header {
3412
- display: flex;
3413
- justify-content: space-between;
3414
- align-items: flex-start;
3415
- margin-bottom: 8px;
3388
+
3389
+ .agent-info-section {
3390
+ margin-bottom: 20px;
3416
3391
  }
3417
-
3418
- .sidebar-conversation-title {
3419
- display: flex;
3420
- align-items: center;
3421
- gap: 8px;
3422
- flex: 1;
3423
- min-width: 0;
3424
- }
3425
-
3426
- .sidebar-conversation-name {
3427
- font-size: 0.9rem;
3392
+
3393
+ .agent-info-section h4 {
3394
+ margin: 0 0 8px 0;
3395
+ color: var(--text-accent);
3396
+ font-size: 0.95em;
3428
3397
  font-weight: 600;
3429
- color: var(--text-primary);
3398
+ }
3399
+
3400
+ .agent-info-section p {
3430
3401
  margin: 0;
3431
- overflow: hidden;
3432
- text-overflow: ellipsis;
3433
- white-space: nowrap;
3402
+ color: var(--text-primary);
3403
+ line-height: 1.5;
3434
3404
  }
3435
-
3436
- .sidebar-conversation-badge {
3437
- font-size: 0.65rem;
3438
- padding: 2px 6px;
3439
- border-radius: 10px;
3440
- text-transform: uppercase;
3441
- font-weight: 600;
3442
- letter-spacing: 0.3px;
3443
- flex-shrink: 0;
3405
+
3406
+ .agent-system-prompt {
3407
+ background: var(--bg-primary);
3408
+ border: 1px solid var(--border-primary);
3409
+ border-radius: 4px;
3410
+ padding: 12px;
3411
+ color: var(--text-primary);
3412
+ font-family: 'Monaco', 'Menlo', monospace;
3413
+ font-size: 0.85em;
3414
+ line-height: 1.4;
3415
+ white-space: pre-wrap;
3416
+ max-height: 200px;
3417
+ overflow-y: auto;
3444
3418
  }
3445
-
3446
- .sidebar-conversation-meta {
3447
- display: flex;
3448
- flex-wrap: wrap;
3449
- gap: 8px;
3450
- margin-bottom: 6px;
3419
+
3420
+ .agent-usage-tips {
3421
+ background: var(--bg-tertiary);
3422
+ border: 1px solid var(--border-primary);
3423
+ border-radius: 6px;
3424
+ padding: 16px;
3425
+ margin: 20px 0;
3451
3426
  }
3452
-
3453
- .sidebar-meta-item {
3454
- display: flex;
3455
- align-items: center;
3456
- gap: 3px;
3457
- font-size: 0.7rem;
3458
- color: var(--text-secondary);
3427
+
3428
+ .agent-usage-tips h4 {
3429
+ margin: 0 0 12px 0;
3430
+ color: var(--text-accent);
3431
+ font-size: 1em;
3459
3432
  }
3460
-
3461
- .sidebar-meta-icon {
3462
- font-size: 0.65rem;
3463
- opacity: 0.8;
3433
+
3434
+ .usage-tips-content p {
3435
+ margin: 8px 0;
3436
+ color: var(--text-primary);
3464
3437
  }
3465
-
3466
- .sidebar-conversation-preview {
3467
- margin-top: 6px;
3438
+
3439
+ .usage-tips-content ul {
3440
+ margin: 8px 0;
3441
+ padding-left: 20px;
3442
+ color: var(--text-primary);
3468
3443
  }
3469
-
3470
- .sidebar-preview-text {
3471
- font-size: 0.75rem;
3472
- color: var(--text-secondary);
3473
- line-height: 1.3;
3474
- margin: 0;
3475
- overflow: hidden;
3476
- display: -webkit-box;
3477
- -webkit-line-clamp: 2;
3478
- line-clamp: 2;
3479
- -webkit-box-orient: vertical;
3444
+
3445
+ .usage-tips-content li {
3446
+ margin: 4px 0;
3480
3447
  }
3481
-
3482
- /* Right Panel */
3483
- .messages-panel {
3484
- background: var(--bg-secondary);
3448
+
3449
+ .usage-example {
3450
+ display: inline-block;
3451
+ background: var(--bg-primary);
3485
3452
  border: 1px solid var(--border-primary);
3486
- border-radius: 8px;
3487
- overflow: hidden;
3488
- display: flex;
3489
- flex-direction: column;
3453
+ border-radius: 4px;
3454
+ padding: 6px 10px;
3455
+ font-family: 'Monaco', 'Menlo', monospace;
3456
+ font-size: 0.85em;
3457
+ color: var(--text-success);
3458
+ margin: 4px 0;
3490
3459
  }
3491
-
3492
- .messages-header {
3493
- display: flex;
3494
- justify-content: space-between;
3495
- align-items: center;
3496
- padding: 16px 20px;
3497
- border-bottom: 1px solid var(--border-primary);
3498
- background: var(--bg-tertiary);
3460
+
3461
+ .usage-tips-content code {
3462
+ background: var(--bg-primary);
3463
+ border: 1px solid var(--border-primary);
3464
+ border-radius: 3px;
3465
+ padding: 2px 4px;
3466
+ font-family: 'Monaco', 'Menlo', monospace;
3467
+ font-size: 0.85em;
3468
+ color: var(--text-info);
3499
3469
  }
3500
-
3501
- .selected-conversation-info h3 {
3502
- margin: 0 0 4px 0;
3503
- font-size: 1.1rem;
3470
+
3471
+ .agent-metadata {
3472
+ margin-top: 20px;
3473
+ padding-top: 16px;
3474
+ border-top: 1px solid var(--border-primary);
3475
+ color: var(--text-secondary);
3476
+ font-size: 0.8em;
3477
+ }
3478
+
3479
+ /* Project agents modal styling */
3480
+ .project-agents-modal {
3481
+ max-width: 700px;
3482
+ }
3483
+
3484
+ .project-icon {
3485
+ font-size: 1.2em;
3486
+ margin-right: 4px;
3487
+ }
3488
+
3489
+ .project-info {
3504
3490
  color: var(--text-primary);
3505
3491
  font-weight: 600;
3506
3492
  }
3507
-
3508
- .selected-conversation-meta {
3509
- display: flex;
3510
- flex-wrap: wrap;
3493
+
3494
+ .project-agents-grid {
3495
+ display: grid;
3496
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
3511
3497
  gap: 16px;
3498
+ margin-bottom: 20px;
3512
3499
  }
3513
-
3514
- .messages-actions {
3515
- display: flex;
3516
- gap: 8px;
3500
+
3501
+ .project-agent-card {
3502
+ background: var(--bg-tertiary);
3503
+ border: 1px solid var(--border-primary);
3504
+ border-radius: 6px;
3505
+ padding: 12px;
3506
+ transition: all 0.2s ease;
3517
3507
  }
3518
-
3519
- .messages-content {
3520
- flex: 1;
3521
- overflow-y: auto;
3522
- padding: 20px;
3508
+
3509
+ .project-agent-card:hover {
3510
+ background: var(--bg-primary);
3511
+ border-color: var(--border-secondary);
3523
3512
  }
3524
-
3525
- /* No Conversation Selected State */
3526
- .no-conversation-selected {
3513
+
3514
+ .project-agent-header {
3527
3515
  display: flex;
3528
- flex-direction: column;
3529
3516
  align-items: center;
3530
- justify-content: center;
3531
- height: 100%;
3532
- text-align: center;
3533
- color: var(--text-secondary);
3534
- }
3535
-
3536
- .no-selection-icon {
3537
- font-size: 3rem;
3538
- margin-bottom: 16px;
3539
- opacity: 0.5;
3517
+ gap: 8px;
3518
+ margin-bottom: 8px;
3540
3519
  }
3541
-
3542
- .no-conversation-selected h4 {
3543
- margin: 0 0 8px 0;
3544
- font-size: 1.2rem;
3520
+
3521
+ .project-agent-info h4 {
3522
+ margin: 0;
3545
3523
  color: var(--text-primary);
3524
+ font-size: 0.95em;
3525
+ font-weight: 600;
3546
3526
  }
3547
-
3548
- .no-conversation-selected p {
3549
- margin: 0;
3550
- font-size: 0.9rem;
3527
+
3528
+ .project-agent-description {
3529
+ color: var(--text-secondary);
3530
+ font-size: 0.85em;
3531
+ line-height: 1.4;
3532
+ margin-bottom: 10px;
3551
3533
  }
3552
-
3553
- /* No Messages Found State */
3554
- .no-messages-found {
3534
+
3535
+ .project-agent-footer {
3555
3536
  display: flex;
3556
- flex-direction: column;
3537
+ justify-content: space-between;
3557
3538
  align-items: center;
3558
- justify-content: center;
3559
- height: 100%;
3539
+ }
3540
+
3541
+ .project-agent-tools {
3542
+ color: var(--text-secondary);
3543
+ font-size: 0.75em;
3544
+ }
3545
+
3546
+ .project-agent-details-btn {
3547
+ background: var(--text-accent);
3548
+ color: white;
3549
+ border: none;
3550
+ border-radius: 4px;
3551
+ padding: 4px 8px;
3552
+ font-size: 0.75em;
3553
+ cursor: pointer;
3554
+ transition: all 0.2s ease;
3555
+ }
3556
+
3557
+ .project-agent-details-btn:hover {
3558
+ background: var(--text-warning);
3559
+ }
3560
+
3561
+ .no-agents-message {
3560
3562
  text-align: center;
3563
+ padding: 40px 20px;
3561
3564
  color: var(--text-secondary);
3562
3565
  }
3563
-
3564
- .no-messages-icon {
3565
- font-size: 3rem;
3566
+
3567
+ .no-agents-icon {
3568
+ font-size: 3em;
3566
3569
  margin-bottom: 16px;
3567
3570
  opacity: 0.5;
3568
3571
  }
3569
-
3570
- .no-messages-found h4 {
3572
+
3573
+ .no-agents-message h4 {
3571
3574
  margin: 0 0 8px 0;
3572
- font-size: 1.2rem;
3573
3575
  color: var(--text-primary);
3574
3576
  }
3575
-
3576
- .no-messages-found p {
3577
- margin: 0;
3578
- font-size: 0.9rem;
3577
+
3578
+ .no-agents-message p {
3579
+ margin: 4px 0;
3580
+ line-height: 1.5;
3579
3581
  }
3580
-
3581
- /* Messages List */
3582
- .messages-list {
3583
- display: flex;
3584
- flex-direction: column;
3585
- gap: 20px;
3582
+
3583
+ .no-agents-message code {
3584
+ background: var(--bg-primary);
3585
+ border: 1px solid var(--border-primary);
3586
+ border-radius: 3px;
3587
+ padding: 2px 4px;
3588
+ font-family: 'Monaco', 'Menlo', monospace;
3589
+ font-size: 0.85em;
3590
+ color: var(--text-info);
3586
3591
  }
3587
-
3588
- .message {
3592
+
3593
+ .usage-instruction {
3589
3594
  background: var(--bg-primary);
3590
3595
  border: 1px solid var(--border-primary);
3591
- border-radius: 8px;
3592
- overflow: hidden;
3596
+ border-radius: 6px;
3597
+ padding: 16px;
3598
+ margin-top: 20px;
3593
3599
  }
3594
-
3595
- .message-user {
3596
- margin-left: 60px;
3597
- border-left: 3px solid var(--text-info);
3600
+
3601
+ .usage-instruction h4 {
3602
+ margin: 0 0 8px 0;
3603
+ color: var(--text-accent);
3598
3604
  }
3599
-
3600
- .message-assistant {
3601
- margin-right: 60px;
3602
- border-left: 3px solid var(--text-accent);
3605
+
3606
+ .usage-instruction p {
3607
+ margin: 0 0 10px 0;
3608
+ color: var(--text-primary);
3603
3609
  }
3604
-
3605
- .message-header {
3610
+
3611
+ .usage-examples {
3606
3612
  display: flex;
3607
- justify-content: space-between;
3608
- align-items: center;
3609
- padding: 12px 16px;
3610
- background: var(--bg-tertiary);
3611
- border-bottom: 1px solid var(--border-primary);
3613
+ flex-direction: column;
3614
+ gap: 6px;
3612
3615
  }
3613
-
3614
- .message-role {
3616
+
3617
+ /* Conversation agents button */
3618
+ .sidebar-conversation-actions {
3615
3619
  display: flex;
3616
- align-items: center;
3617
- gap: 8px;
3618
- }
3619
-
3620
- .role-icon {
3621
- font-size: 1rem;
3620
+ justify-content: flex-end;
3621
+ margin-top: 8px;
3622
+ opacity: 0;
3623
+ transition: opacity 0.2s ease;
3622
3624
  }
3623
-
3624
- .role-name {
3625
- font-weight: 600;
3626
- color: var(--text-primary);
3627
- font-size: 0.875rem;
3625
+
3626
+ .sidebar-conversation-item:hover .sidebar-conversation-actions {
3627
+ opacity: 1;
3628
3628
  }
3629
-
3630
- .message-meta {
3629
+
3630
+ .conversation-agents-btn {
3631
3631
  display: flex;
3632
3632
  align-items: center;
3633
- gap: 12px;
3634
- }
3635
-
3636
- .message-timestamp {
3637
- font-size: 0.75rem;
3638
- color: var(--text-secondary);
3639
- }
3640
-
3641
- .message-tokens, .message-tools {
3642
- font-size: 0.7rem;
3643
- color: var(--text-secondary);
3644
- background: var(--bg-secondary);
3645
- padding: 2px 6px;
3646
- border-radius: 4px;
3647
- }
3648
-
3649
- .message-content {
3650
- padding: 16px;
3651
- }
3652
-
3653
- .message-text {
3654
- color: var(--text-primary);
3655
- line-height: 1.6;
3656
- font-size: 0.9rem;
3657
- }
3658
-
3659
- /* Code Formatting */
3660
- .code-block {
3633
+ gap: 4px;
3661
3634
  background: var(--bg-primary);
3662
3635
  border: 1px solid var(--border-primary);
3663
3636
  border-radius: 4px;
3664
- padding: 12px;
3665
- margin: 12px 0;
3666
- overflow-x: auto;
3667
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
3668
- font-size: 0.85rem;
3669
- }
3670
-
3671
- .inline-code {
3672
- background: var(--bg-tertiary);
3673
- color: var(--text-accent);
3674
- padding: 2px 4px;
3675
- border-radius: 2px;
3676
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
3677
- font-size: 0.85rem;
3678
- }
3679
-
3680
- /* Loading and Error States */
3681
- .messages-loading, .messages-error {
3682
- display: flex;
3683
- flex-direction: column;
3684
- align-items: center;
3685
- justify-content: center;
3686
- height: 200px;
3687
- gap: 16px;
3637
+ padding: 4px 8px;
3638
+ font-size: 0.75em;
3688
3639
  color: var(--text-secondary);
3640
+ cursor: pointer;
3641
+ transition: all 0.2s ease;
3689
3642
  }
3690
-
3691
- .loading-spinner {
3692
- width: 24px;
3693
- height: 24px;
3694
- border: 2px solid var(--border-primary);
3695
- border-top: 2px solid var(--text-accent);
3696
- border-radius: 50%;
3697
- animation: spin 1s linear infinite;
3643
+
3644
+ .conversation-agents-btn:hover {
3645
+ background: var(--text-accent);
3646
+ color: white;
3647
+ border-color: var(--text-accent);
3698
3648
  }
3699
-
3700
- .loading-spinner.small {
3701
- width: 16px;
3702
- height: 16px;
3703
- border-width: 1px;
3649
+
3650
+ .agents-icon {
3651
+ font-size: 0.9em;
3704
3652
  }
3705
-
3706
- .messages-loading-indicator {
3653
+
3654
+ .agents-text {
3655
+ font-weight: 500;
3656
+ }
3657
+
3658
+ .agents-loading, .agents-empty {
3707
3659
  display: flex;
3660
+ flex-direction: column;
3708
3661
  align-items: center;
3709
3662
  justify-content: center;
3710
- gap: 8px;
3711
- padding: 12px;
3663
+ padding: 20px;
3712
3664
  color: var(--text-secondary);
3713
- font-size: 0.8rem;
3714
- background: var(--bg-secondary);
3715
- border-bottom: 1px solid var(--border-primary);
3716
- }
3717
-
3718
- .retry-messages {
3719
- background: var(--text-accent);
3720
- color: white;
3721
- border: none;
3722
- padding: 8px 16px;
3723
- border-radius: 4px;
3724
- cursor: pointer;
3725
- font-size: 0.875rem;
3726
- }
3727
-
3728
- /* Responsive Design */
3729
- @media (max-width: 1024px) {
3730
- .conversations-layout {
3731
- grid-template-columns: 300px 1fr;
3732
- }
3733
- }
3734
-
3735
- @media (max-width: 768px) {
3736
- .conversations-layout {
3737
- grid-template-columns: 1fr;
3738
- grid-template-rows: auto 1fr;
3739
- }
3740
-
3741
- .conversations-sidebar {
3742
- max-height: 300px;
3743
- }
3744
-
3745
- .message-user, .message-assistant {
3746
- margin-left: 0;
3747
- margin-right: 0;
3748
- }
3665
+ text-align: center;
3749
3666
  }
3750
3667
 
3751
- /* Status Dot Styles (reused in sidebar) */
3752
- .status-dot {
3753
- width: 8px;
3754
- height: 8px;
3755
- border-radius: 50%;
3756
- display: inline-block;
3668
+ .agents-empty .empty-icon {
3669
+ font-size: 2em;
3670
+ margin-bottom: 8px;
3671
+ opacity: 0.5;
3757
3672
  }
3758
3673
 
3759
- .status-dot.status-active {
3760
- background: var(--text-success);
3761
- box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
3674
+ .agents-empty p {
3675
+ margin: 0 0 4px 0;
3676
+ color: var(--text-primary);
3762
3677
  }
3763
3678
 
3764
- .status-dot.status-idle {
3765
- background: var(--text-warning);
3679
+ .agents-empty small {
3680
+ color: var(--text-secondary);
3681
+ opacity: 0.8;
3766
3682
  }
3767
3683
 
3768
- .status-dot.status-waiting {
3769
- background: var(--text-info);
3684
+ /* Agent indicators in conversations */
3685
+ .agent-indicator-small {
3686
+ display: inline-block;
3687
+ width: 12px;
3688
+ height: 12px;
3689
+ border-radius: 50%;
3690
+ margin-left: 6px;
3691
+ vertical-align: middle;
3770
3692
  }
3771
3693
 
3772
- .status-dot.status-completed {
3773
- background: var(--text-secondary);
3694
+ .agent-badge {
3695
+ display: inline-block;
3696
+ padding: 2px 6px;
3697
+ border-radius: 10px;
3698
+ font-size: 0.75em;
3699
+ font-weight: 500;
3700
+ color: white;
3701
+ margin-left: 8px;
3702
+ vertical-align: middle;
3774
3703
  }
3775
3704
 
3776
- .status-dot.status-unknown {
3777
- background: var(--text-error);
3705
+ .conversations-filters {
3706
+ background: var(--bg-secondary);
3707
+ border: 1px solid var(--border-primary);
3708
+ border-radius: 8px;
3709
+ padding: 20px;
3710
+ margin-bottom: 20px;
3778
3711
  }
3779
3712
 
3780
- /* Badge Styles (reused in sidebar) */
3781
- .sidebar-conversation-badge.status-active {
3782
- background: rgba(63, 185, 80, 0.2);
3783
- color: var(--text-success);
3713
+ .filters-row {
3714
+ display: flex;
3715
+ flex-wrap: wrap;
3716
+ gap: 20px;
3717
+ align-items: flex-end;
3718
+ margin-bottom: 16px;
3784
3719
  }
3785
3720
 
3786
- .sidebar-conversation-badge.status-idle {
3787
- background: rgba(249, 115, 22, 0.2);
3788
- color: var(--text-warning);
3721
+ .filter-group {
3722
+ display: flex;
3723
+ flex-direction: column;
3724
+ gap: 6px;
3725
+ min-width: 150px;
3726
+ align-self: flex-end;
3789
3727
  }
3790
3728
 
3791
- .sidebar-conversation-badge.status-waiting {
3792
- background: rgba(165, 214, 255, 0.2);
3793
- color: var(--text-info);
3729
+ .filter-group.search-group {
3730
+ flex: 1;
3731
+ min-width: 250px;
3732
+ align-self: flex-end;
3733
+ gap: 8px;
3794
3734
  }
3795
3735
 
3796
- .sidebar-conversation-badge.status-completed {
3797
- background: rgba(125, 133, 144, 0.2);
3736
+ .filter-label {
3737
+ font-size: 0.75rem;
3798
3738
  color: var(--text-secondary);
3739
+ font-weight: 600;
3740
+ text-transform: uppercase;
3741
+ letter-spacing: 0.5px;
3742
+ margin-bottom: 2px;
3743
+ line-height: 1.2;
3799
3744
  }
3800
3745
 
3801
- .sidebar-conversation-badge.status-unknown {
3802
- background: rgba(248, 81, 73, 0.2);
3803
- color: var(--text-error);
3804
- }
3805
-
3806
- /* Additional state classes for new conversation states */
3807
- .status-dot.status-typing {
3808
- background: var(--text-info);
3746
+ .filter-select {
3747
+ background: var(--bg-tertiary);
3748
+ border: 1px solid var(--border-primary);
3749
+ color: var(--text-primary);
3750
+ padding: 8px 12px;
3751
+ border-radius: 4px;
3752
+ font-size: 0.875rem;
3753
+ font-family: inherit;
3754
+ height: 40px;
3755
+ box-sizing: border-box;
3809
3756
  }
3810
3757
 
3811
- .status-dot.status-pending {
3812
- background: var(--text-warning);
3758
+ .filter-select:focus {
3759
+ outline: none;
3760
+ border-color: var(--text-accent);
3761
+ box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
3813
3762
  }
3814
3763
 
3815
- .status-dot.status-recent {
3816
- background: var(--text-success);
3817
- }
3818
-
3819
- .status-dot.status-inactive {
3820
- background: var(--text-secondary);
3821
- }
3822
-
3823
- .status-dot.status-old {
3824
- background: var(--text-secondary);
3825
- opacity: 0.5;
3826
- }
3827
-
3828
- .sidebar-conversation-badge.status-typing {
3829
- background: rgba(165, 214, 255, 0.2);
3830
- color: var(--text-info);
3831
- }
3832
-
3833
- .sidebar-conversation-badge.status-pending {
3834
- background: rgba(249, 115, 22, 0.2);
3835
- color: var(--text-warning);
3764
+ .search-input-container {
3765
+ position: relative;
3766
+ display: flex;
3767
+ align-items: center;
3768
+ height: 40px;
3769
+ width: 100%;
3836
3770
  }
3837
3771
 
3838
- .sidebar-conversation-badge.status-recent {
3839
- background: rgba(63, 185, 80, 0.2);
3840
- color: var(--text-success);
3772
+ .search-input {
3773
+ background: var(--bg-tertiary);
3774
+ border: 1px solid var(--border-primary);
3775
+ color: var(--text-primary);
3776
+ padding: 8px 12px;
3777
+ padding-right: 36px;
3778
+ border-radius: 4px;
3779
+ font-size: 0.875rem;
3780
+ font-family: inherit;
3781
+ width: 100%;
3782
+ height: 100%;
3783
+ box-sizing: border-box;
3784
+ margin: 0;
3841
3785
  }
3842
3786
 
3843
- .sidebar-conversation-badge.status-inactive {
3844
- background: rgba(125, 133, 144, 0.2);
3845
- color: var(--text-secondary);
3787
+ .search-input:focus {
3788
+ outline: none;
3789
+ border-color: var(--text-accent);
3790
+ box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
3846
3791
  }
3847
3792
 
3848
- .sidebar-conversation-badge.status-old {
3849
- background: rgba(125, 133, 144, 0.1);
3793
+ .search-clear {
3794
+ position: absolute;
3795
+ right: 8px;
3796
+ top: 50%;
3797
+ transform: translateY(-50%);
3798
+ background: none;
3799
+ border: none;
3850
3800
  color: var(--text-secondary);
3851
- opacity: 0.7;
3852
- }
3853
-
3854
- /* Meta Item Styles (reused) */
3855
- .meta-item {
3801
+ cursor: pointer;
3802
+ font-size: 1.2rem;
3803
+ padding: 4px;
3804
+ border-radius: 2px;
3805
+ transition: all 0.2s ease;
3806
+ height: 24px;
3807
+ width: 24px;
3856
3808
  display: flex;
3857
3809
  align-items: center;
3858
- gap: 4px;
3859
- font-size: 0.8rem;
3860
- color: var(--text-secondary);
3810
+ justify-content: center;
3861
3811
  }
3862
3812
 
3863
- .meta-icon {
3864
- font-size: 0.75rem;
3865
- opacity: 0.8;
3813
+ .search-clear:hover {
3814
+ color: var(--text-accent);
3815
+ background: var(--bg-primary);
3866
3816
  }
3867
3817
 
3868
- .header-actions {
3869
- display: flex;
3870
- gap: 12px;
3818
+ .results-count {
3819
+ font-size: 0.875rem;
3820
+ color: var(--text-secondary);
3871
3821
  }
3872
3822
 
3873
- .action-btn {
3874
- display: flex;
3875
- align-items: center;
3876
- gap: 6px;
3877
- padding: 8px 16px;
3878
- background: var(--bg-tertiary);
3823
+ .clear-filters-btn {
3824
+ background: none;
3879
3825
  border: 1px solid var(--border-primary);
3880
- color: var(--text-primary);
3881
- border-radius: 6px;
3826
+ color: var(--text-secondary);
3827
+ padding: 6px 12px;
3828
+ border-radius: 4px;
3829
+ font-size: 0.75rem;
3882
3830
  cursor: pointer;
3883
3831
  transition: all 0.2s ease;
3884
- font-family: inherit;
3885
- font-size: 0.875rem;
3886
3832
  }
3887
3833
 
3888
- .action-btn:hover {
3834
+ .clear-filters-btn:hover {
3889
3835
  border-color: var(--text-accent);
3890
- background: var(--border-primary);
3836
+ color: var(--text-accent);
3891
3837
  }
3892
3838
 
3893
- .action-btn:disabled {
3894
- opacity: 0.5;
3895
- cursor: not-allowed;
3839
+ /* Two Column Layout */
3840
+ .conversations-layout {
3841
+ display: grid;
3842
+ grid-template-columns: 350px 1fr;
3843
+ gap: 20px;
3844
+ height: calc(100vh - 400px);
3845
+ min-height: 600px;
3896
3846
  }
3897
-
3898
- .btn-icon {
3899
- font-size: 0.875rem;
3847
+
3848
+ /* Left Sidebar */
3849
+ .conversations-sidebar {
3850
+ background: var(--bg-secondary);
3851
+ border: 1px solid var(--border-primary);
3852
+ border-radius: 8px;
3853
+ overflow: hidden;
3854
+ display: flex;
3855
+ flex-direction: column;
3900
3856
  }
3901
-
3902
- /* Global Loading */
3903
- .global-loading {
3904
- position: fixed;
3905
- top: 0;
3906
- left: 0;
3907
- right: 0;
3908
- bottom: 0;
3909
- background: rgba(13, 17, 23, 0.8);
3857
+
3858
+ .sidebar-header {
3910
3859
  display: flex;
3860
+ justify-content: space-between;
3911
3861
  align-items: center;
3912
- justify-content: center;
3913
- z-index: 9999;
3862
+ padding: 16px 20px;
3863
+ border-bottom: 1px solid var(--border-primary);
3864
+ background: var(--bg-tertiary);
3914
3865
  }
3915
-
3916
- .loading-content {
3917
- text-align: center;
3866
+
3867
+ .sidebar-header h3 {
3868
+ margin: 0;
3869
+ font-size: 1rem;
3918
3870
  color: var(--text-primary);
3871
+ font-weight: 600;
3919
3872
  }
3920
-
3921
- .loading-spinner.large {
3922
- width: 40px;
3923
- height: 40px;
3924
- margin-bottom: 16px;
3925
- }
3926
-
3927
- /* Error Modal */
3928
- .error-modal {
3929
- position: fixed;
3930
- top: 0;
3931
- left: 0;
3932
- right: 0;
3933
- bottom: 0;
3934
- background: rgba(0, 0, 0, 0.5);
3935
- display: flex;
3936
- align-items: center;
3937
- justify-content: center;
3938
- z-index: 10000;
3873
+
3874
+ .conversation-count {
3875
+ background: var(--text-accent);
3876
+ color: white;
3877
+ font-size: 0.75rem;
3878
+ padding: 2px 8px;
3879
+ border-radius: 12px;
3880
+ font-weight: 600;
3939
3881
  }
3940
-
3941
- .error-modal-content {
3942
- background: var(--bg-secondary);
3943
- border: 1px solid var(--border-primary);
3944
- border-radius: 8px;
3945
- width: 90%;
3946
- max-width: 500px;
3947
- max-height: 80vh;
3882
+
3883
+ .conversations-list {
3884
+ flex: 1;
3948
3885
  overflow-y: auto;
3886
+ padding: 8px;
3949
3887
  }
3950
3888
 
3951
- .error-modal-header {
3889
+ /* Load More Indicator */
3890
+ .load-more-indicator {
3952
3891
  display: flex;
3892
+ flex-direction: column;
3953
3893
  align-items: center;
3954
- justify-content: space-between;
3894
+ justify-content: center;
3955
3895
  padding: 20px;
3956
- border-bottom: 1px solid var(--border-primary);
3896
+ gap: 12px;
3897
+ border-top: 1px solid var(--border-primary);
3898
+ background: var(--bg-secondary);
3899
+ margin: 8px;
3900
+ border-radius: 6px;
3957
3901
  }
3958
3902
 
3959
- .error-modal-header h3 {
3960
- margin: 0;
3961
- color: var(--text-error);
3903
+ .load-more-indicator .loading-spinner {
3904
+ width: 20px;
3905
+ height: 20px;
3962
3906
  }
3963
3907
 
3964
- .error-modal-close {
3965
- background: none;
3966
- border: none;
3908
+ .load-more-indicator .loading-text {
3909
+ font-size: 0.85rem;
3967
3910
  color: var(--text-secondary);
3968
- font-size: 1.5rem;
3969
- cursor: pointer;
3970
- padding: 4px;
3971
- }
3972
-
3973
- .error-modal-body {
3974
- padding: 20px;
3975
- }
3976
-
3977
- .error-modal-message {
3978
- color: var(--text-primary);
3979
- margin: 0;
3980
- }
3981
-
3982
- .error-modal-footer {
3983
- padding: 20px;
3984
- border-top: 1px solid var(--border-primary);
3985
- display: flex;
3986
- gap: 12px;
3987
- justify-content: flex-end;
3911
+ font-weight: 500;
3988
3912
  }
3989
-
3990
- .btn {
3991
- padding: 8px 16px;
3913
+
3914
+ /* Sidebar Conversation Items */
3915
+ .sidebar-conversation-item {
3916
+ padding: 12px;
3917
+ margin-bottom: 8px;
3992
3918
  border-radius: 6px;
3993
3919
  cursor: pointer;
3994
- font-family: inherit;
3995
- font-size: 0.875rem;
3996
3920
  transition: all 0.2s ease;
3921
+ border: 1px solid transparent;
3997
3922
  }
3998
-
3999
- .btn-primary {
4000
- background: var(--text-accent);
4001
- color: white;
4002
- border: 1px solid var(--text-accent);
3923
+
3924
+ .sidebar-conversation-item:hover {
3925
+ background: var(--bg-tertiary);
3926
+ border-color: var(--border-primary);
4003
3927
  }
4004
-
4005
- .btn-primary:hover {
4006
- background: var(--text-error);
4007
- border-color: var(--text-error);
4008
- }
4009
-
4010
- .btn-secondary {
3928
+
3929
+ .sidebar-conversation-item.selected {
4011
3930
  background: var(--bg-tertiary);
4012
- color: var(--text-primary);
4013
- border: 1px solid var(--border-primary);
3931
+ border-color: var(--text-accent);
3932
+ box-shadow: 0 0 0 1px rgba(213, 116, 85, 0.2);
4014
3933
  }
4015
-
4016
- .btn-secondary:hover {
4017
- background: var(--border-primary);
3934
+
3935
+ .sidebar-conversation-header {
3936
+ display: flex;
3937
+ justify-content: space-between;
3938
+ align-items: flex-start;
3939
+ margin-bottom: 8px;
4018
3940
  }
4019
-
4020
- /* Responsive Design */
4021
- @media (max-width: 768px) {
4022
- .app-sidebar {
4023
- position: fixed;
4024
- left: -240px;
4025
- z-index: 1000;
4026
- height: 100vh;
4027
- }
4028
-
4029
- .app-sidebar.open {
4030
- left: 0;
4031
- }
4032
-
4033
- .app-main {
4034
- margin-left: 0;
4035
- }
4036
-
4037
- .page-header {
4038
- flex-direction: column;
4039
- align-items: flex-start;
4040
- gap: 16px;
4041
- }
4042
-
4043
- .header-actions {
4044
- width: 100%;
4045
- justify-content: flex-start;
4046
- }
3941
+
3942
+ .sidebar-conversation-title {
3943
+ display: flex;
3944
+ align-items: center;
3945
+ gap: 8px;
3946
+ flex: 1;
3947
+ min-width: 0;
4047
3948
  }
4048
-
4049
- /* Animation Keyframes */
4050
- @keyframes spin {
4051
- from { transform: rotate(0deg); }
4052
- to { transform: rotate(360deg); }
3949
+
3950
+ .sidebar-conversation-name {
3951
+ font-size: 0.9rem;
3952
+ font-weight: 600;
3953
+ color: var(--text-primary);
3954
+ margin: 0;
3955
+ overflow: hidden;
3956
+ text-overflow: ellipsis;
3957
+ white-space: nowrap;
4053
3958
  }
4054
-
4055
- /* Page Content Styles */
4056
- .dashboard-page,
4057
- .agents-page {
4058
- max-width: 1400px;
4059
- margin: 0 auto;
3959
+
3960
+ .sidebar-conversation-badge {
3961
+ font-size: 0.65rem;
3962
+ padding: 2px 6px;
3963
+ border-radius: 10px;
3964
+ text-transform: uppercase;
3965
+ font-weight: 600;
3966
+ letter-spacing: 0.3px;
3967
+ flex-shrink: 0;
4060
3968
  }
4061
3969
 
4062
- /* App Layout Styles (App.js + Sidebar.js) */
4063
- .app {
3970
+ .sidebar-conversation-meta {
4064
3971
  display: flex;
4065
- min-height: 100vh;
4066
- background: var(--bg-primary);
3972
+ flex-wrap: wrap;
3973
+ gap: 8px;
3974
+ margin-bottom: 6px;
4067
3975
  }
4068
3976
 
4069
- .app-sidebar {
4070
- width: 60px;
4071
- background: var(--bg-secondary);
4072
- border-right: 1px solid var(--border-primary);
4073
- transition: width 0.3s ease;
3977
+ .sidebar-meta-item {
3978
+ display: flex;
3979
+ align-items: center;
3980
+ gap: 3px;
3981
+ font-size: 0.7rem;
3982
+ color: var(--text-secondary);
4074
3983
  }
4075
3984
 
4076
- .app-main {
4077
- flex: 1;
4078
- display: flex;
4079
- flex-direction: column;
4080
- min-width: 0;
3985
+ .sidebar-meta-icon {
3986
+ font-size: 0.65rem;
3987
+ opacity: 0.8;
4081
3988
  }
4082
3989
 
4083
- .app-content {
4084
- flex: 1;
4085
- padding: 20px;
4086
- overflow-y: auto;
3990
+ .sidebar-conversation-preview {
3991
+ margin-top: 6px;
4087
3992
  }
4088
-
4089
- /* Metrics Section */
4090
- .metrics-section {
4091
- margin-bottom: 30px;
3993
+
3994
+ .sidebar-preview-text {
3995
+ font-size: 0.75rem;
3996
+ color: var(--text-secondary);
3997
+ line-height: 1.3;
3998
+ margin: 0;
3999
+ overflow: hidden;
4000
+ display: -webkit-box;
4001
+ -webkit-line-clamp: 2;
4002
+ line-clamp: 2;
4003
+ -webkit-box-orient: vertical;
4092
4004
  }
4093
-
4094
- .section-title {
4005
+
4006
+ /* Right Panel */
4007
+ .messages-panel {
4008
+ background: var(--bg-secondary);
4009
+ border: 1px solid var(--border-primary);
4010
+ border-radius: 8px;
4011
+ overflow: hidden;
4012
+ display: flex;
4013
+ flex-direction: column;
4014
+ }
4015
+
4016
+ .messages-header {
4095
4017
  display: flex;
4096
- align-items: center;
4097
4018
  justify-content: space-between;
4098
- margin-bottom: 20px;
4019
+ align-items: center;
4020
+ padding: 16px 20px;
4021
+ border-bottom: 1px solid var(--border-primary);
4022
+ background: var(--bg-tertiary);
4099
4023
  }
4100
-
4101
- .section-title h2 {
4024
+
4025
+ .selected-conversation-info h3 {
4026
+ margin: 0 0 4px 0;
4027
+ font-size: 1.1rem;
4102
4028
  color: var(--text-primary);
4103
- font-size: 1.25rem;
4104
- margin: 0;
4029
+ font-weight: 600;
4105
4030
  }
4106
-
4107
- .metrics-grid {
4108
- display: grid;
4109
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4110
- gap: 20px;
4031
+
4032
+ .selected-conversation-meta {
4033
+ display: flex;
4034
+ flex-wrap: wrap;
4035
+ gap: 16px;
4111
4036
  }
4112
-
4113
- .metric-card {
4114
- background: var(--bg-secondary);
4115
- border: 1px solid var(--border-primary);
4116
- border-radius: 8px;
4117
- padding: 20px;
4118
- transition: all 0.2s ease;
4037
+
4038
+ .messages-actions {
4039
+ display: flex;
4040
+ gap: 8px;
4119
4041
  }
4120
-
4121
- .metric-card:hover {
4122
- border-color: var(--text-accent);
4123
- transform: translateY(-2px);
4042
+
4043
+ .messages-content {
4044
+ flex: 1;
4045
+ overflow-y: auto;
4046
+ padding: 20px;
4124
4047
  }
4125
-
4126
- .card-header {
4048
+
4049
+ /* No Conversation Selected State */
4050
+ .no-conversation-selected {
4127
4051
  display: flex;
4052
+ flex-direction: column;
4128
4053
  align-items: center;
4129
- justify-content: space-between;
4130
- margin-bottom: 12px;
4131
- }
4132
-
4133
- .card-header h3 {
4054
+ justify-content: center;
4055
+ height: 100%;
4056
+ text-align: center;
4134
4057
  color: var(--text-secondary);
4135
- font-size: 0.875rem;
4136
- text-transform: uppercase;
4137
- letter-spacing: 0.5px;
4138
- margin: 0;
4139
4058
  }
4140
-
4141
- .card-icon {
4142
- font-size: 1.25rem;
4059
+
4060
+ .no-selection-icon {
4061
+ font-size: 3rem;
4062
+ margin-bottom: 16px;
4063
+ opacity: 0.5;
4143
4064
  }
4144
-
4145
- .card-value {
4146
- font-size: 2rem;
4147
- font-weight: 700;
4148
- color: var(--text-accent);
4149
- margin-bottom: 8px;
4150
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4065
+
4066
+ .no-conversation-selected h4 {
4067
+ margin: 0 0 8px 0;
4068
+ font-size: 1.2rem;
4069
+ color: var(--text-primary);
4151
4070
  }
4152
-
4153
- .card-change {
4154
- font-size: 0.875rem;
4155
- color: var(--text-secondary);
4071
+
4072
+ .no-conversation-selected p {
4073
+ margin: 0;
4074
+ font-size: 0.9rem;
4156
4075
  }
4157
-
4158
- /* Loading and Error States */
4159
- .loading-state,
4160
- .error-state {
4076
+
4077
+ /* No Messages Found State */
4078
+ .no-messages-found {
4161
4079
  display: flex;
4080
+ flex-direction: column;
4162
4081
  align-items: center;
4163
4082
  justify-content: center;
4164
- padding: 40px;
4083
+ height: 100%;
4165
4084
  text-align: center;
4166
4085
  color: var(--text-secondary);
4167
4086
  }
4168
-
4169
- .loading-spinner {
4170
- width: 20px;
4171
- height: 20px;
4172
- border: 2px solid var(--border-primary);
4173
- border-top: 2px solid var(--text-accent);
4174
- border-radius: 50%;
4175
- animation: spin 1s linear infinite;
4176
- margin-right: 12px;
4177
- }
4178
-
4179
- .error-state {
4180
- color: var(--text-error);
4181
- flex-direction: column;
4182
- gap: 16px;
4183
- }
4184
-
4185
- .error-retry {
4186
- padding: 8px 16px;
4187
- background: var(--text-error);
4188
- color: white;
4189
- border: none;
4190
- border-radius: 4px;
4191
- cursor: pointer;
4192
- font-family: inherit;
4193
- }
4194
-
4195
- /* Conversation State Banner */
4196
- .conversation-state-banner {
4197
- position: sticky;
4198
- bottom: 0;
4199
- left: 0;
4200
- right: 0;
4201
- background: var(--bg-secondary);
4202
- border-top: 1px solid var(--border-primary);
4203
- padding: 12px 16px;
4204
- display: flex;
4205
- justify-content: space-between;
4206
- align-items: center;
4207
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4208
- font-size: 0.8rem;
4209
- z-index: 100;
4210
- }
4211
4087
 
4212
- .state-indicator {
4213
- display: flex;
4214
- align-items: center;
4215
- gap: 8px;
4088
+ .no-messages-icon {
4089
+ font-size: 3rem;
4090
+ margin-bottom: 16px;
4091
+ opacity: 0.5;
4216
4092
  }
4217
4093
 
4218
- .state-dot {
4219
- width: 8px;
4220
- height: 8px;
4221
- border-radius: 50%;
4222
- background: var(--text-secondary);
4223
- transition: background-color 0.3s ease;
4094
+ .no-messages-found h4 {
4095
+ margin: 0 0 8px 0;
4096
+ font-size: 1.2rem;
4097
+ color: var(--text-primary);
4224
4098
  }
4225
4099
 
4226
- .state-dot.status-active {
4227
- background: var(--text-success);
4228
- animation: pulse 2s infinite;
4100
+ .no-messages-found p {
4101
+ margin: 0;
4102
+ font-size: 0.9rem;
4229
4103
  }
4230
4104
 
4231
- .state-dot.status-waiting {
4232
- background: var(--text-info);
4105
+ /* Messages List */
4106
+ .messages-list {
4107
+ display: flex;
4108
+ flex-direction: column;
4109
+ gap: 20px;
4233
4110
  }
4234
4111
 
4235
- .state-dot.status-typing {
4236
- background: var(--text-warning);
4237
- animation: pulse 1.5s infinite;
4112
+ .message {
4113
+ background: var(--bg-primary);
4114
+ border: 1px solid var(--border-primary);
4115
+ border-radius: 8px;
4116
+ overflow: hidden;
4238
4117
  }
4239
4118
 
4240
- .state-dot.status-working {
4241
- background: var(--text-accent);
4242
- animation: pulse 1s infinite;
4119
+ .message-user {
4120
+ margin-left: 60px;
4121
+ border-left: 3px solid var(--text-info);
4243
4122
  }
4244
4123
 
4245
- .state-dot.status-idle {
4246
- background: var(--text-secondary);
4124
+ .message-assistant {
4125
+ margin-right: 60px;
4126
+ border-left: 3px solid var(--text-accent);
4247
4127
  }
4248
4128
 
4249
- /* Enhanced state styles */
4250
- .state-dot.status-tool-pending {
4251
- background: #f97316;
4252
- animation: pulse 2s infinite;
4129
+ .message-header {
4130
+ display: flex;
4131
+ justify-content: space-between;
4132
+ align-items: center;
4133
+ padding: 12px 16px;
4134
+ background: var(--bg-tertiary);
4135
+ border-bottom: 1px solid var(--border-primary);
4253
4136
  }
4254
4137
 
4255
- .state-dot.status-tool-executing {
4256
- background: #10b981;
4257
- animation: pulse 1s infinite;
4138
+ .message-role {
4139
+ display: flex;
4140
+ align-items: center;
4141
+ gap: 8px;
4258
4142
  }
4259
4143
 
4260
- .state-dot.status-analyzing {
4261
- background: #8b5cf6;
4262
- animation: pulse 1.5s infinite;
4144
+ .role-icon {
4145
+ font-size: 1rem;
4263
4146
  }
4264
4147
 
4265
- .state-dot.status-loading {
4266
- background: var(--text-info);
4267
- animation: pulse 2s infinite;
4148
+ .role-name {
4149
+ font-weight: 600;
4150
+ color: var(--text-primary);
4151
+ font-size: 0.875rem;
4268
4152
  }
4269
4153
 
4270
- /* New enhanced state styles */
4271
- .state-dot.status-completed {
4272
- background: #10b981;
4273
- animation: none;
4154
+ .message-meta {
4155
+ display: flex;
4156
+ align-items: center;
4157
+ gap: 12px;
4274
4158
  }
4275
4159
 
4276
- .state-dot.status-processing {
4277
- background: #3b82f6;
4278
- animation: pulse 1.2s infinite;
4160
+ .message-timestamp {
4161
+ font-size: 0.75rem;
4162
+ color: var(--text-secondary);
4279
4163
  }
4280
4164
 
4281
- .state-dot.status-error {
4282
- background: #ef4444;
4283
- animation: pulse 0.8s infinite;
4165
+ .message-tokens, .message-tools {
4166
+ font-size: 0.7rem;
4167
+ color: var(--text-secondary);
4168
+ background: var(--bg-secondary);
4169
+ padding: 2px 6px;
4170
+ border-radius: 4px;
4284
4171
  }
4285
4172
 
4286
- .state-dot.status-fetching {
4287
- background: #06b6d4;
4288
- animation: pulse 1.5s infinite;
4173
+ .message-content {
4174
+ padding: 16px;
4289
4175
  }
4290
4176
 
4291
- .state-text {
4177
+ .message-text {
4292
4178
  color: var(--text-primary);
4293
- font-weight: 500;
4294
- display: flex;
4295
- flex-direction: column;
4296
- gap: 2px;
4179
+ line-height: 1.6;
4180
+ font-size: 0.9rem;
4297
4181
  }
4298
4182
 
4299
- .state-text-main {
4183
+ /* Code Formatting */
4184
+ .code-block {
4185
+ background: var(--bg-primary);
4186
+ border: 1px solid var(--border-primary);
4187
+ border-radius: 4px;
4188
+ padding: 12px;
4189
+ margin: 12px 0;
4190
+ overflow-x: auto;
4191
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4300
4192
  font-size: 0.85rem;
4301
- font-weight: 600;
4302
- line-height: 1.2;
4303
4193
  }
4304
4194
 
4305
- .state-text-description {
4306
- font-size: 0.7rem;
4307
- color: var(--text-secondary);
4308
- font-weight: 400;
4309
- line-height: 1.1;
4195
+ .inline-code {
4196
+ background: var(--bg-tertiary);
4197
+ color: var(--text-accent);
4198
+ padding: 2px 4px;
4199
+ border-radius: 2px;
4200
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4201
+ font-size: 0.85rem;
4310
4202
  }
4311
4203
 
4312
- .state-timestamp {
4313
- color: var(--text-secondary);
4314
- font-size: 0.7rem;
4315
- text-align: right;
4204
+ /* Loading and Error States */
4205
+ .messages-loading, .messages-error {
4316
4206
  display: flex;
4317
4207
  flex-direction: column;
4318
- gap: 1px;
4208
+ align-items: center;
4209
+ justify-content: center;
4210
+ height: 200px;
4211
+ gap: 16px;
4212
+ color: var(--text-secondary);
4319
4213
  }
4320
4214
 
4321
- .timestamp-label {
4322
- font-size: 0.65rem;
4323
- opacity: 0.7;
4215
+ .loading-spinner {
4216
+ width: 24px;
4217
+ height: 24px;
4218
+ border: 2px solid var(--border-primary);
4219
+ border-top: 2px solid var(--text-accent);
4220
+ border-radius: 50%;
4221
+ animation: spin 1s linear infinite;
4324
4222
  }
4325
4223
 
4326
- .timestamp-value {
4327
- font-weight: 600;
4328
- font-family: 'Monaco', monospace;
4224
+ .loading-spinner.small {
4225
+ width: 16px;
4226
+ height: 16px;
4227
+ border-width: 1px;
4329
4228
  }
4330
4229
 
4331
- /* Pulse animation for active states */
4332
- .pulse-animation {
4333
- animation: enhanced-pulse 2s ease-in-out infinite;
4230
+ .messages-loading-indicator {
4231
+ display: flex;
4232
+ align-items: center;
4233
+ justify-content: center;
4234
+ gap: 8px;
4235
+ padding: 12px;
4236
+ color: var(--text-secondary);
4237
+ font-size: 0.8rem;
4238
+ background: var(--bg-secondary);
4239
+ border-bottom: 1px solid var(--border-primary);
4334
4240
  }
4335
4241
 
4336
- @keyframes pulse {
4337
- 0%, 100% {
4338
- opacity: 1;
4339
- }
4340
- 50% {
4341
- opacity: 0.5;
4242
+ .retry-messages {
4243
+ background: var(--text-accent);
4244
+ color: white;
4245
+ border: none;
4246
+ padding: 8px 16px;
4247
+ border-radius: 4px;
4248
+ cursor: pointer;
4249
+ font-size: 0.875rem;
4250
+ }
4251
+
4252
+ /* Responsive Design */
4253
+ @media (max-width: 1024px) {
4254
+ .conversations-layout {
4255
+ grid-template-columns: 300px 1fr;
4342
4256
  }
4343
4257
  }
4344
4258
 
4345
- @keyframes enhanced-pulse {
4346
- 0%, 100% {
4347
- opacity: 1;
4348
- transform: scale(1);
4259
+ @media (max-width: 768px) {
4260
+ .conversations-layout {
4261
+ grid-template-columns: 1fr;
4262
+ grid-template-rows: auto 1fr;
4349
4263
  }
4350
- 50% {
4351
- opacity: 0.6;
4352
- transform: scale(1.1);
4264
+
4265
+ .conversations-sidebar {
4266
+ max-height: 300px;
4267
+ }
4268
+
4269
+ .message-user, .message-assistant {
4270
+ margin-left: 0;
4271
+ margin-right: 0;
4353
4272
  }
4354
4273
  }
4274
+
4275
+ /* Status Dot Styles (reused in sidebar) */
4276
+ .status-dot {
4277
+ width: 8px;
4278
+ height: 8px;
4279
+ border-radius: 50%;
4280
+ display: inline-block;
4281
+ }
4282
+
4283
+ .status-dot.status-active {
4284
+ background: var(--text-success);
4285
+ box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
4286
+ }
4287
+
4288
+ .status-dot.status-idle {
4289
+ background: var(--text-warning);
4290
+ }
4291
+
4292
+ .status-dot.status-waiting {
4293
+ background: var(--text-info);
4294
+ }
4295
+
4296
+ .status-dot.status-completed {
4297
+ background: var(--text-secondary);
4298
+ }
4299
+
4300
+ .status-dot.status-unknown {
4301
+ background: var(--text-error);
4302
+ }
4303
+
4304
+ /* Badge Styles (reused in sidebar) */
4305
+ .sidebar-conversation-badge.status-active {
4306
+ background: rgba(63, 185, 80, 0.2);
4307
+ color: var(--text-success);
4308
+ }
4309
+
4310
+ .sidebar-conversation-badge.status-idle {
4311
+ background: rgba(249, 115, 22, 0.2);
4312
+ color: var(--text-warning);
4313
+ }
4314
+
4315
+ .sidebar-conversation-badge.status-waiting {
4316
+ background: rgba(165, 214, 255, 0.2);
4317
+ color: var(--text-info);
4318
+ }
4319
+
4320
+ .sidebar-conversation-badge.status-completed {
4321
+ background: rgba(125, 133, 144, 0.2);
4322
+ color: var(--text-secondary);
4323
+ }
4324
+
4325
+ .sidebar-conversation-badge.status-unknown {
4326
+ background: rgba(248, 81, 73, 0.2);
4327
+ color: var(--text-error);
4328
+ }
4355
4329
 
4356
- /* Improved conversation state banner layout */
4357
- .conversation-state-banner {
4358
- position: sticky;
4359
- bottom: 0;
4360
- left: 0;
4361
- right: 0;
4362
- background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
4363
- border-top: 2px solid var(--border-primary);
4364
- padding: 14px 18px;
4330
+ /* Additional state classes for new conversation states */
4331
+ .status-dot.status-typing {
4332
+ background: var(--text-info);
4333
+ }
4334
+
4335
+ .status-dot.status-pending {
4336
+ background: var(--text-warning);
4337
+ }
4338
+
4339
+ .status-dot.status-recent {
4340
+ background: var(--text-success);
4341
+ }
4342
+
4343
+ .status-dot.status-inactive {
4344
+ background: var(--text-secondary);
4345
+ }
4346
+
4347
+ .status-dot.status-old {
4348
+ background: var(--text-secondary);
4349
+ opacity: 0.5;
4350
+ }
4351
+
4352
+ .sidebar-conversation-badge.status-typing {
4353
+ background: rgba(165, 214, 255, 0.2);
4354
+ color: var(--text-info);
4355
+ }
4356
+
4357
+ .sidebar-conversation-badge.status-pending {
4358
+ background: rgba(249, 115, 22, 0.2);
4359
+ color: var(--text-warning);
4360
+ }
4361
+
4362
+ .sidebar-conversation-badge.status-recent {
4363
+ background: rgba(63, 185, 80, 0.2);
4364
+ color: var(--text-success);
4365
+ }
4366
+
4367
+ .sidebar-conversation-badge.status-inactive {
4368
+ background: rgba(125, 133, 144, 0.2);
4369
+ color: var(--text-secondary);
4370
+ }
4371
+
4372
+ .sidebar-conversation-badge.status-old {
4373
+ background: rgba(125, 133, 144, 0.1);
4374
+ color: var(--text-secondary);
4375
+ opacity: 0.7;
4376
+ }
4377
+
4378
+ /* Meta Item Styles (reused) */
4379
+ .meta-item {
4365
4380
  display: flex;
4366
- justify-content: space-between;
4367
4381
  align-items: center;
4368
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4382
+ gap: 4px;
4369
4383
  font-size: 0.8rem;
4370
- z-index: 100;
4371
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
4384
+ color: var(--text-secondary);
4372
4385
  }
4373
-
4374
- .state-indicator {
4386
+
4387
+ .meta-icon {
4388
+ font-size: 0.75rem;
4389
+ opacity: 0.8;
4390
+ }
4391
+
4392
+ .header-actions {
4393
+ display: flex;
4394
+ gap: 12px;
4395
+ }
4396
+
4397
+ .action-btn {
4375
4398
  display: flex;
4376
4399
  align-items: center;
4377
- gap: 10px;
4378
- flex: 1;
4400
+ gap: 6px;
4401
+ padding: 8px 16px;
4402
+ background: var(--bg-tertiary);
4403
+ border: 1px solid var(--border-primary);
4404
+ color: var(--text-primary);
4405
+ border-radius: 6px;
4406
+ cursor: pointer;
4407
+ transition: all 0.2s ease;
4408
+ font-family: inherit;
4409
+ font-size: 0.875rem;
4379
4410
  }
4380
-
4381
- /* Console Interaction Panel Styles */
4382
- .console-interaction-panel {
4411
+
4412
+ .action-btn:hover {
4413
+ border-color: var(--text-accent);
4414
+ background: var(--border-primary);
4415
+ }
4416
+
4417
+ .action-btn:disabled {
4418
+ opacity: 0.5;
4419
+ cursor: not-allowed;
4420
+ }
4421
+
4422
+ .btn-icon {
4423
+ font-size: 0.875rem;
4424
+ }
4425
+
4426
+ /* Global Loading */
4427
+ .global-loading {
4383
4428
  position: fixed;
4384
4429
  top: 0;
4385
4430
  left: 0;
4386
4431
  right: 0;
4387
4432
  bottom: 0;
4388
- background: rgba(0, 0, 0, 0.8);
4433
+ background: rgba(13, 17, 23, 0.8);
4434
+ display: flex;
4435
+ align-items: center;
4436
+ justify-content: center;
4389
4437
  z-index: 9999;
4438
+ }
4439
+
4440
+ .loading-content {
4441
+ text-align: center;
4442
+ color: var(--text-primary);
4443
+ }
4444
+
4445
+ .loading-spinner.large {
4446
+ width: 40px;
4447
+ height: 40px;
4448
+ margin-bottom: 16px;
4449
+ }
4450
+
4451
+ /* Error Modal */
4452
+ .error-modal {
4453
+ position: fixed;
4454
+ top: 0;
4455
+ left: 0;
4456
+ right: 0;
4457
+ bottom: 0;
4458
+ background: rgba(0, 0, 0, 0.5);
4390
4459
  display: flex;
4391
4460
  align-items: center;
4392
4461
  justify-content: center;
4393
- backdrop-filter: blur(4px);
4462
+ z-index: 10000;
4394
4463
  }
4395
-
4396
- .console-interaction-panel .interaction-content {
4464
+
4465
+ .error-modal-content {
4397
4466
  background: var(--bg-secondary);
4398
- border: 2px solid var(--border-primary);
4399
- border-radius: 12px;
4400
- padding: 24px;
4401
- max-width: 600px;
4467
+ border: 1px solid var(--border-primary);
4468
+ border-radius: 8px;
4402
4469
  width: 90%;
4470
+ max-width: 500px;
4403
4471
  max-height: 80vh;
4404
4472
  overflow-y: auto;
4405
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
4406
4473
  }
4407
-
4408
- .interaction-header {
4409
- display: flex;
4410
- align-items: center;
4411
- justify-content: space-between;
4412
- margin-bottom: 20px;
4413
- padding-bottom: 16px;
4414
- border-bottom: 1px solid var(--border-primary);
4474
+
4475
+ .error-modal-header {
4476
+ display: flex;
4477
+ align-items: center;
4478
+ justify-content: space-between;
4479
+ padding: 20px;
4480
+ border-bottom: 1px solid var(--border-primary);
4481
+ }
4482
+
4483
+ .error-modal-header h3 {
4484
+ margin: 0;
4485
+ color: var(--text-error);
4486
+ }
4487
+
4488
+ .error-modal-close {
4489
+ background: none;
4490
+ border: none;
4491
+ color: var(--text-secondary);
4492
+ font-size: 1.5rem;
4493
+ cursor: pointer;
4494
+ padding: 4px;
4495
+ }
4496
+
4497
+ .error-modal-body {
4498
+ padding: 20px;
4499
+ }
4500
+
4501
+ .error-modal-message {
4502
+ color: var(--text-primary);
4503
+ margin: 0;
4504
+ }
4505
+
4506
+ .error-modal-footer {
4507
+ padding: 20px;
4508
+ border-top: 1px solid var(--border-primary);
4509
+ display: flex;
4510
+ gap: 12px;
4511
+ justify-content: flex-end;
4512
+ }
4513
+
4514
+ .btn {
4515
+ padding: 8px 16px;
4516
+ border-radius: 6px;
4517
+ cursor: pointer;
4518
+ font-family: inherit;
4519
+ font-size: 0.875rem;
4520
+ transition: all 0.2s ease;
4521
+ }
4522
+
4523
+ .btn-primary {
4524
+ background: var(--text-accent);
4525
+ color: white;
4526
+ border: 1px solid var(--text-accent);
4527
+ }
4528
+
4529
+ .btn-primary:hover {
4530
+ background: var(--text-error);
4531
+ border-color: var(--text-error);
4532
+ }
4533
+
4534
+ .btn-secondary {
4535
+ background: var(--bg-tertiary);
4536
+ color: var(--text-primary);
4537
+ border: 1px solid var(--border-primary);
4538
+ }
4539
+
4540
+ .btn-secondary:hover {
4541
+ background: var(--border-primary);
4542
+ }
4543
+
4544
+ /* Responsive Design */
4545
+ @media (max-width: 768px) {
4546
+ .app-sidebar {
4547
+ position: fixed;
4548
+ left: -240px;
4549
+ z-index: 1000;
4550
+ height: 100vh;
4551
+ }
4552
+
4553
+ .app-sidebar.open {
4554
+ left: 0;
4555
+ }
4556
+
4557
+ .app-main {
4558
+ margin-left: 0;
4559
+ }
4560
+
4561
+ .page-header {
4562
+ flex-direction: column;
4563
+ align-items: flex-start;
4564
+ gap: 16px;
4565
+ }
4566
+
4567
+ .header-actions {
4568
+ width: 100%;
4569
+ justify-content: flex-start;
4570
+ }
4571
+ }
4572
+
4573
+ /* Animation Keyframes */
4574
+ @keyframes spin {
4575
+ from { transform: rotate(0deg); }
4576
+ to { transform: rotate(360deg); }
4577
+ }
4578
+
4579
+ /* Page Content Styles */
4580
+ .dashboard-page,
4581
+ .agents-page {
4582
+ max-width: 1400px;
4583
+ margin: 0 auto;
4584
+ }
4585
+
4586
+ /* App Layout Styles (App.js + Sidebar.js) */
4587
+ .app {
4588
+ display: flex;
4589
+ min-height: 100vh;
4590
+ background: var(--bg-primary);
4591
+ }
4592
+
4593
+ .app-sidebar {
4594
+ width: 60px;
4595
+ background: var(--bg-secondary);
4596
+ border-right: 1px solid var(--border-primary);
4597
+ transition: width 0.3s ease;
4598
+ }
4599
+
4600
+ .app-main {
4601
+ flex: 1;
4602
+ display: flex;
4603
+ flex-direction: column;
4604
+ min-width: 0;
4605
+ }
4606
+
4607
+ .app-content {
4608
+ flex: 1;
4609
+ padding: 20px;
4610
+ overflow-y: auto;
4611
+ }
4612
+
4613
+ /* Metrics Section */
4614
+ .metrics-section {
4615
+ margin-bottom: 30px;
4616
+ }
4617
+
4618
+ .section-title {
4619
+ display: flex;
4620
+ align-items: center;
4621
+ justify-content: space-between;
4622
+ margin-bottom: 20px;
4623
+ }
4624
+
4625
+ .section-title h2 {
4626
+ color: var(--text-primary);
4627
+ font-size: 1.25rem;
4628
+ margin: 0;
4629
+ }
4630
+
4631
+ .metrics-grid {
4632
+ display: grid;
4633
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4634
+ gap: 20px;
4635
+ }
4636
+
4637
+ .metric-card {
4638
+ background: var(--bg-secondary);
4639
+ border: 1px solid var(--border-primary);
4640
+ border-radius: 8px;
4641
+ padding: 20px;
4642
+ transition: all 0.2s ease;
4643
+ }
4644
+
4645
+ .metric-card:hover {
4646
+ border-color: var(--text-accent);
4647
+ transform: translateY(-2px);
4648
+ }
4649
+
4650
+ .card-header {
4651
+ display: flex;
4652
+ align-items: center;
4653
+ justify-content: space-between;
4654
+ margin-bottom: 12px;
4655
+ }
4656
+
4657
+ .card-header h3 {
4658
+ color: var(--text-secondary);
4659
+ font-size: 0.875rem;
4660
+ text-transform: uppercase;
4661
+ letter-spacing: 0.5px;
4662
+ margin: 0;
4663
+ }
4664
+
4665
+ .card-icon {
4666
+ font-size: 1.25rem;
4667
+ }
4668
+
4669
+ .card-value {
4670
+ font-size: 2rem;
4671
+ font-weight: 700;
4672
+ color: var(--text-accent);
4673
+ margin-bottom: 8px;
4674
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4675
+ }
4676
+
4677
+ .card-change {
4678
+ font-size: 0.875rem;
4679
+ color: var(--text-secondary);
4680
+ }
4681
+
4682
+ /* Loading and Error States */
4683
+ .loading-state,
4684
+ .error-state {
4685
+ display: flex;
4686
+ align-items: center;
4687
+ justify-content: center;
4688
+ padding: 40px;
4689
+ text-align: center;
4690
+ color: var(--text-secondary);
4691
+ }
4692
+
4693
+ .loading-spinner {
4694
+ width: 20px;
4695
+ height: 20px;
4696
+ border: 2px solid var(--border-primary);
4697
+ border-top: 2px solid var(--text-accent);
4698
+ border-radius: 50%;
4699
+ animation: spin 1s linear infinite;
4700
+ margin-right: 12px;
4701
+ }
4702
+
4703
+ .error-state {
4704
+ color: var(--text-error);
4705
+ flex-direction: column;
4706
+ gap: 16px;
4707
+ }
4708
+
4709
+ .error-retry {
4710
+ padding: 8px 16px;
4711
+ background: var(--text-error);
4712
+ color: white;
4713
+ border: none;
4714
+ border-radius: 4px;
4715
+ cursor: pointer;
4716
+ font-family: inherit;
4717
+ }
4718
+
4719
+ /* Conversation State Banner */
4720
+ .conversation-state-banner {
4721
+ position: sticky;
4722
+ bottom: 0;
4723
+ left: 0;
4724
+ right: 0;
4725
+ background: var(--bg-secondary);
4726
+ border-top: 1px solid var(--border-primary);
4727
+ padding: 12px 16px;
4728
+ display: flex;
4729
+ justify-content: space-between;
4730
+ align-items: center;
4731
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4732
+ font-size: 0.8rem;
4733
+ z-index: 100;
4734
+ }
4735
+
4736
+ .state-indicator {
4737
+ display: flex;
4738
+ align-items: center;
4739
+ gap: 8px;
4740
+ }
4741
+
4742
+ .state-dot {
4743
+ width: 8px;
4744
+ height: 8px;
4745
+ border-radius: 50%;
4746
+ background: var(--text-secondary);
4747
+ transition: background-color 0.3s ease;
4748
+ }
4749
+
4750
+ .state-dot.status-active {
4751
+ background: var(--text-success);
4752
+ animation: pulse 2s infinite;
4753
+ }
4754
+
4755
+ .state-dot.status-waiting {
4756
+ background: var(--text-info);
4757
+ }
4758
+
4759
+ .state-dot.status-typing {
4760
+ background: var(--text-warning);
4761
+ animation: pulse 1.5s infinite;
4762
+ }
4763
+
4764
+ .state-dot.status-working {
4765
+ background: var(--text-accent);
4766
+ animation: pulse 1s infinite;
4767
+ }
4768
+
4769
+ .state-dot.status-idle {
4770
+ background: var(--text-secondary);
4771
+ }
4772
+
4773
+ /* Enhanced state styles */
4774
+ .state-dot.status-tool-pending {
4775
+ background: #f97316;
4776
+ animation: pulse 2s infinite;
4777
+ }
4778
+
4779
+ .state-dot.status-tool-executing {
4780
+ background: #10b981;
4781
+ animation: pulse 1s infinite;
4782
+ }
4783
+
4784
+ .state-dot.status-analyzing {
4785
+ background: #8b5cf6;
4786
+ animation: pulse 1.5s infinite;
4787
+ }
4788
+
4789
+ .state-dot.status-loading {
4790
+ background: var(--text-info);
4791
+ animation: pulse 2s infinite;
4792
+ }
4793
+
4794
+ /* New enhanced state styles */
4795
+ .state-dot.status-completed {
4796
+ background: #10b981;
4797
+ animation: none;
4798
+ }
4799
+
4800
+ .state-dot.status-processing {
4801
+ background: #3b82f6;
4802
+ animation: pulse 1.2s infinite;
4803
+ }
4804
+
4805
+ .state-dot.status-error {
4806
+ background: #ef4444;
4807
+ animation: pulse 0.8s infinite;
4808
+ }
4809
+
4810
+ .state-dot.status-fetching {
4811
+ background: #06b6d4;
4812
+ animation: pulse 1.5s infinite;
4813
+ }
4814
+
4815
+ .state-text {
4816
+ color: var(--text-primary);
4817
+ font-weight: 500;
4818
+ display: flex;
4819
+ flex-direction: column;
4820
+ gap: 2px;
4821
+ }
4822
+
4823
+ .state-text-main {
4824
+ font-size: 0.85rem;
4825
+ font-weight: 600;
4826
+ line-height: 1.2;
4827
+ }
4828
+
4829
+ .state-text-description {
4830
+ font-size: 0.7rem;
4831
+ color: var(--text-secondary);
4832
+ font-weight: 400;
4833
+ line-height: 1.1;
4834
+ }
4835
+
4836
+ .state-timestamp {
4837
+ color: var(--text-secondary);
4838
+ font-size: 0.7rem;
4839
+ text-align: right;
4840
+ display: flex;
4841
+ flex-direction: column;
4842
+ gap: 1px;
4843
+ }
4844
+
4845
+ .timestamp-label {
4846
+ font-size: 0.65rem;
4847
+ opacity: 0.7;
4848
+ }
4849
+
4850
+ .timestamp-value {
4851
+ font-weight: 600;
4852
+ font-family: 'Monaco', monospace;
4853
+ }
4854
+
4855
+ /* Pulse animation for active states */
4856
+ .pulse-animation {
4857
+ animation: enhanced-pulse 2s ease-in-out infinite;
4858
+ }
4859
+
4860
+ @keyframes pulse {
4861
+ 0%, 100% {
4862
+ opacity: 1;
4863
+ }
4864
+ 50% {
4865
+ opacity: 0.5;
4866
+ }
4867
+ }
4868
+
4869
+ @keyframes enhanced-pulse {
4870
+ 0%, 100% {
4871
+ opacity: 1;
4872
+ transform: scale(1);
4873
+ }
4874
+ 50% {
4875
+ opacity: 0.6;
4876
+ transform: scale(1.1);
4877
+ }
4878
+ }
4879
+
4880
+ /* Improved conversation state banner layout */
4881
+ .conversation-state-banner {
4882
+ position: sticky;
4883
+ bottom: 0;
4884
+ left: 0;
4885
+ right: 0;
4886
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
4887
+ border-top: 2px solid var(--border-primary);
4888
+ padding: 14px 18px;
4889
+ display: flex;
4890
+ justify-content: space-between;
4891
+ align-items: center;
4892
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
4893
+ font-size: 0.8rem;
4894
+ z-index: 100;
4895
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
4896
+ }
4897
+
4898
+ .state-indicator {
4899
+ display: flex;
4900
+ align-items: center;
4901
+ gap: 10px;
4902
+ flex: 1;
4903
+ }
4904
+
4905
+ /* Console Interaction Panel Styles */
4906
+ .console-interaction-panel {
4907
+ position: fixed;
4908
+ top: 0;
4909
+ left: 0;
4910
+ right: 0;
4911
+ bottom: 0;
4912
+ background: rgba(0, 0, 0, 0.8);
4913
+ z-index: 9999;
4914
+ display: flex;
4915
+ align-items: center;
4916
+ justify-content: center;
4917
+ backdrop-filter: blur(4px);
4918
+ }
4919
+
4920
+ .console-interaction-panel .interaction-content {
4921
+ background: var(--bg-secondary);
4922
+ border: 2px solid var(--border-primary);
4923
+ border-radius: 12px;
4924
+ padding: 24px;
4925
+ max-width: 600px;
4926
+ width: 90%;
4927
+ max-height: 80vh;
4928
+ overflow-y: auto;
4929
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
4930
+ }
4931
+
4932
+ .interaction-header {
4933
+ display: flex;
4934
+ align-items: center;
4935
+ justify-content: space-between;
4936
+ margin-bottom: 20px;
4937
+ padding-bottom: 16px;
4938
+ border-bottom: 1px solid var(--border-primary);
4939
+ }
4940
+
4941
+ .interaction-title {
4942
+ display: flex;
4943
+ align-items: center;
4944
+ gap: 8px;
4945
+ color: var(--text-primary);
4946
+ font-weight: 600;
4947
+ font-size: 1.1rem;
4948
+ }
4949
+
4950
+ .interaction-icon {
4951
+ font-size: 1.2rem;
4952
+ color: var(--text-warning);
4953
+ }
4954
+
4955
+ .interaction-close {
4956
+ background: none;
4957
+ border: none;
4958
+ color: var(--text-secondary);
4959
+ font-size: 1.5rem;
4960
+ cursor: pointer;
4961
+ padding: 4px 8px;
4962
+ border-radius: 4px;
4963
+ transition: all 0.2s ease;
4964
+ }
4965
+
4966
+ .interaction-close:hover {
4967
+ background: var(--bg-tertiary);
4968
+ color: var(--text-primary);
4969
+ }
4970
+
4971
+ .interaction-description {
4972
+ background: var(--bg-tertiary);
4973
+ border: 1px solid var(--border-primary);
4974
+ border-radius: 8px;
4975
+ padding: 16px;
4976
+ margin-bottom: 16px;
4977
+ font-family: 'Monaco', monospace;
4978
+ font-size: 0.85rem;
4979
+ }
4980
+
4981
+ .tool-action {
4982
+ color: var(--text-primary);
4983
+ }
4984
+
4985
+ .tool-details {
4986
+ margin-top: 8px;
4987
+ color: var(--text-secondary);
4988
+ font-size: 0.8rem;
4989
+ line-height: 1.4;
4990
+ white-space: pre-wrap;
4991
+ }
4992
+
4993
+ .interaction-prompt {
4994
+ font-size: 1rem;
4995
+ color: var(--text-primary);
4996
+ font-weight: 600;
4997
+ margin-bottom: 20px;
4998
+ text-align: center;
4999
+ }
5000
+
5001
+ .interaction-choices {
5002
+ margin-bottom: 20px;
5003
+ }
5004
+
5005
+ .interaction-choice {
5006
+ display: flex;
5007
+ align-items: flex-start;
5008
+ gap: 12px;
5009
+ padding: 12px;
5010
+ margin-bottom: 8px;
5011
+ background: var(--bg-tertiary);
5012
+ border: 1px solid var(--border-primary);
5013
+ border-radius: 8px;
5014
+ cursor: pointer;
5015
+ transition: all 0.2s ease;
5016
+ }
5017
+
5018
+ .interaction-choice:hover {
5019
+ background: var(--bg-primary);
5020
+ border-color: var(--text-accent);
5021
+ }
5022
+
5023
+ .interaction-choice input[type="radio"] {
5024
+ margin: 2px 0 0 0;
5025
+ cursor: pointer;
5026
+ }
5027
+
5028
+ .choice-number {
5029
+ color: var(--text-accent);
5030
+ font-weight: 600;
5031
+ min-width: 20px;
5032
+ }
5033
+
5034
+ .choice-text {
5035
+ color: var(--text-primary);
5036
+ line-height: 1.4;
5037
+ flex: 1;
5038
+ }
5039
+
5040
+ .interaction-text-input {
5041
+ margin-bottom: 20px;
5042
+ }
5043
+
5044
+ .interaction-text-input label {
5045
+ display: block;
5046
+ color: var(--text-primary);
5047
+ font-weight: 600;
5048
+ margin-bottom: 8px;
5049
+ }
5050
+
5051
+ .interaction-text-input textarea {
5052
+ width: 100%;
5053
+ background: var(--bg-tertiary);
5054
+ border: 1px solid var(--border-primary);
5055
+ border-radius: 8px;
5056
+ padding: 12px;
5057
+ color: var(--text-primary);
5058
+ font-family: 'Monaco', monospace;
5059
+ font-size: 0.9rem;
5060
+ resize: vertical;
5061
+ min-height: 100px;
5062
+ }
5063
+
5064
+ .interaction-text-input textarea:focus {
5065
+ outline: none;
5066
+ border-color: var(--text-accent);
5067
+ background: var(--bg-primary);
5068
+ }
5069
+
5070
+ .interaction-actions {
5071
+ display: flex;
5072
+ gap: 12px;
5073
+ justify-content: flex-end;
5074
+ }
5075
+
5076
+ .interaction-btn {
5077
+ padding: 10px 20px;
5078
+ border-radius: 6px;
5079
+ border: none;
5080
+ font-weight: 600;
5081
+ cursor: pointer;
5082
+ transition: all 0.2s ease;
5083
+ font-size: 0.9rem;
5084
+ }
5085
+
5086
+ .interaction-btn.primary {
5087
+ background: var(--text-accent);
5088
+ color: white;
5089
+ }
5090
+
5091
+ .interaction-btn.primary:hover {
5092
+ background: #c96543;
5093
+ transform: translateY(-1px);
5094
+ }
5095
+
5096
+ .interaction-btn.secondary {
5097
+ background: var(--bg-tertiary);
5098
+ color: var(--text-secondary);
5099
+ border: 1px solid var(--border-primary);
5100
+ }
5101
+
5102
+ .interaction-btn.secondary:hover {
5103
+ background: var(--bg-primary);
5104
+ color: var(--text-primary);
5105
+ border-color: var(--text-secondary);
5106
+ }
5107
+
5108
+ .interaction-error {
5109
+ background: rgba(248, 81, 73, 0.1);
5110
+ border: 1px solid var(--text-error);
5111
+ border-radius: 6px;
5112
+ padding: 12px;
5113
+ margin-bottom: 16px;
5114
+ color: var(--text-error);
5115
+ font-size: 0.9rem;
5116
+ text-align: center;
5117
+ }
5118
+
5119
+ /* Read Tool Modal Specific Styling */
5120
+ .read-tool-modal {
5121
+ max-width: 800px;
5122
+ max-height: 90vh;
5123
+ }
5124
+
5125
+ .tool-icon {
5126
+ width: 40px;
5127
+ height: 40px;
5128
+ border-radius: 8px;
5129
+ display: flex;
5130
+ align-items: center;
5131
+ justify-content: center;
5132
+ background: var(--bg-primary);
5133
+ border: 1px solid var(--border-primary);
5134
+ color: var(--text-accent);
5135
+ }
5136
+
5137
+ .tool-icon.read-tool {
5138
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
5139
+ color: white;
5140
+ border: none;
5141
+ }
5142
+
5143
+ .tool-type-badge {
5144
+ background: var(--bg-primary);
5145
+ color: var(--text-info);
5146
+ padding: 4px 8px;
5147
+ border-radius: 12px;
5148
+ font-size: 0.75em;
5149
+ border: 1px solid var(--border-primary);
5150
+ }
5151
+
5152
+ .tool-overview-section {
5153
+ display: grid;
5154
+ grid-template-columns: 1fr 1fr;
5155
+ gap: 20px;
5156
+ margin-bottom: 24px;
5157
+ }
5158
+
5159
+ .tool-description, .tool-capabilities {
5160
+ background: var(--bg-tertiary);
5161
+ border: 1px solid var(--border-primary);
5162
+ border-radius: 6px;
5163
+ padding: 16px;
5164
+ }
5165
+
5166
+ .capabilities-list {
5167
+ list-style: none;
5168
+ padding: 0;
5169
+ margin: 8px 0 0 0;
5170
+ }
5171
+
5172
+ .capabilities-list li {
5173
+ display: flex;
5174
+ align-items: center;
5175
+ gap: 8px;
5176
+ padding: 6px 0;
5177
+ color: var(--text-primary);
5178
+ font-size: 0.9em;
5179
+ }
5180
+
5181
+ .capability-icon {
5182
+ font-size: 1.1em;
5183
+ width: 20px;
5184
+ text-align: center;
5185
+ }
5186
+
5187
+ .tool-usage-section {
5188
+ background: var(--bg-primary);
5189
+ border: 1px solid var(--border-primary);
5190
+ border-radius: 6px;
5191
+ padding: 16px;
5192
+ margin-bottom: 20px;
5193
+ }
5194
+
5195
+ .usage-details {
5196
+ display: flex;
5197
+ flex-direction: column;
5198
+ gap: 12px;
5199
+ margin-top: 12px;
5200
+ }
5201
+
5202
+ .usage-param {
5203
+ display: flex;
5204
+ align-items: center;
5205
+ gap: 12px;
5206
+ }
5207
+
5208
+ .param-label {
5209
+ color: var(--text-secondary);
5210
+ font-weight: 500;
5211
+ min-width: 100px;
5212
+ }
5213
+
5214
+ .param-value {
5215
+ background: var(--bg-secondary);
5216
+ border: 1px solid var(--border-primary);
5217
+ border-radius: 4px;
5218
+ padding: 4px 8px;
5219
+ font-family: 'Monaco', 'Menlo', monospace;
5220
+ font-size: 0.85em;
5221
+ color: var(--text-info);
5222
+ flex: 1;
5223
+ }
5224
+
5225
+ .tool-parameters-section, .tool-examples-section, .tool-tips-section {
5226
+ margin-bottom: 24px;
5227
+ }
5228
+
5229
+ .parameters-grid {
5230
+ display: grid;
5231
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5232
+ gap: 16px;
5233
+ margin-top: 12px;
5234
+ }
5235
+
5236
+ .parameter-card {
5237
+ background: var(--bg-tertiary);
5238
+ border: 1px solid var(--border-primary);
5239
+ border-radius: 6px;
5240
+ padding: 16px;
5241
+ transition: all 0.2s ease;
5242
+ }
5243
+
5244
+ .parameter-card:hover {
5245
+ border-color: var(--text-accent);
5246
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
5247
+ }
5248
+
5249
+ .parameter-card.required {
5250
+ border-left: 3px solid var(--text-error);
5251
+ }
5252
+
5253
+ .param-header {
5254
+ display: flex;
5255
+ align-items: center;
5256
+ gap: 8px;
5257
+ margin-bottom: 8px;
5258
+ }
5259
+
5260
+ .param-name {
5261
+ font-family: 'Monaco', 'Menlo', monospace;
5262
+ font-weight: 600;
5263
+ color: var(--text-primary);
5264
+ font-size: 0.9em;
5265
+ }
5266
+
5267
+ .param-type {
5268
+ background: var(--bg-primary);
5269
+ color: var(--text-info);
5270
+ padding: 2px 6px;
5271
+ border-radius: 3px;
5272
+ font-size: 0.75em;
5273
+ font-family: 'Monaco', 'Menlo', monospace;
5274
+ }
5275
+
5276
+ .param-required {
5277
+ background: var(--text-error);
5278
+ color: white;
5279
+ padding: 2px 6px;
5280
+ border-radius: 3px;
5281
+ font-size: 0.75em;
5282
+ font-weight: 500;
5283
+ }
5284
+
5285
+ .param-optional {
5286
+ background: var(--text-secondary);
5287
+ color: white;
5288
+ padding: 2px 6px;
5289
+ border-radius: 3px;
5290
+ font-size: 0.75em;
5291
+ font-weight: 500;
5292
+ }
5293
+
5294
+ .param-description {
5295
+ color: var(--text-secondary);
5296
+ font-size: 0.85em;
5297
+ line-height: 1.4;
5298
+ margin: 0;
5299
+ }
5300
+
5301
+ .examples-container {
5302
+ display: grid;
5303
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
5304
+ gap: 16px;
5305
+ margin-top: 12px;
5306
+ }
5307
+
5308
+ .example-card {
5309
+ background: var(--bg-tertiary);
5310
+ border: 1px solid var(--border-primary);
5311
+ border-radius: 6px;
5312
+ padding: 16px;
5313
+ transition: all 0.2s ease;
5314
+ }
5315
+
5316
+ .example-card:hover {
5317
+ border-color: var(--text-accent);
5318
+ transform: translateY(-2px);
5319
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
5320
+ }
5321
+
5322
+ .example-title {
5323
+ font-weight: 600;
5324
+ color: var(--text-primary);
5325
+ margin-bottom: 8px;
5326
+ font-size: 0.9em;
5327
+ }
5328
+
5329
+ .example-code {
5330
+ background: var(--bg-primary);
5331
+ border: 1px solid var(--border-primary);
5332
+ border-radius: 4px;
5333
+ padding: 10px;
5334
+ font-family: 'Monaco', 'Menlo', monospace;
5335
+ font-size: 0.8em;
5336
+ color: var(--text-success);
5337
+ margin: 8px 0;
5338
+ overflow-x: auto;
5339
+ }
5340
+
5341
+ .example-desc {
5342
+ color: var(--text-secondary);
5343
+ font-size: 0.8em;
5344
+ margin: 0;
5345
+ line-height: 1.3;
5346
+ }
5347
+
5348
+ .tips-grid {
5349
+ display: grid;
5350
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5351
+ gap: 12px;
5352
+ margin-top: 12px;
5353
+ }
5354
+
5355
+ .tip-item {
5356
+ display: flex;
5357
+ align-items: center;
5358
+ gap: 8px;
5359
+ background: var(--bg-tertiary);
5360
+ border: 1px solid var(--border-primary);
5361
+ border-radius: 6px;
5362
+ padding: 12px;
5363
+ transition: all 0.2s ease;
5364
+ }
5365
+
5366
+ .tip-item:hover {
5367
+ border-color: var(--text-accent);
5368
+ transform: translateY(-1px);
5369
+ }
5370
+
5371
+ .tip-icon {
5372
+ font-size: 1.1em;
5373
+ flex-shrink: 0;
5374
+ }
5375
+
5376
+ .tip-text {
5377
+ color: var(--text-primary);
5378
+ font-size: 0.85em;
5379
+ font-weight: 500;
5380
+ }
5381
+
5382
+ /* Project Context & Insights Styling */
5383
+ .read-operation-section, .file-insights-section, .raw-parameters-section, .compact-context-section {
5384
+ margin-bottom: 24px;
5385
+ padding: 16px;
5386
+ background: rgba(33, 38, 45, 0.5);
5387
+ border-radius: 8px;
5388
+ border: 1px solid var(--border-color);
5389
+ }
5390
+
5391
+ /* Primary Section - Tool Parameters */
5392
+ .primary-section {
5393
+ background: rgba(56, 139, 253, 0.08);
5394
+ border: 1px solid rgba(56, 139, 253, 0.3);
5395
+ margin-bottom: 24px;
5396
+ padding: 20px;
5397
+ }
5398
+
5399
+ .primary-section h4 {
5400
+ color: #58a6ff;
5401
+ font-size: 1.1rem;
5402
+ margin-bottom: 16px;
5403
+ }
5404
+
5405
+ /* Raw Parameters Section */
5406
+ .raw-params-container {
5407
+ background: rgba(13, 17, 23, 0.9);
5408
+ border: 1px solid rgba(48, 54, 61, 0.8);
5409
+ border-radius: 8px;
5410
+ padding: 20px;
5411
+ margin-bottom: 16px;
5412
+ }
5413
+
5414
+ .params-summary {
5415
+ display: flex;
5416
+ flex-wrap: wrap;
5417
+ gap: 8px;
5418
+ margin-top: 16px;
5419
+ }
5420
+
5421
+ .param-chip {
5422
+ background: rgba(56, 139, 253, 0.15);
5423
+ color: #58a6ff;
5424
+ padding: 4px 12px;
5425
+ border-radius: 16px;
5426
+ font-size: 0.8rem;
5427
+ font-weight: 500;
5428
+ border: 1px solid rgba(56, 139, 253, 0.3);
5429
+ }
5430
+
5431
+ /* Compact Context Section */
5432
+ .compact-context-section {
5433
+ background: rgba(33, 38, 45, 0.3);
5434
+ border: 1px solid rgba(48, 54, 61, 0.5);
5435
+ padding: 12px;
5436
+ }
5437
+
5438
+ .compact-context-section h4 {
5439
+ font-size: 0.95rem;
5440
+ margin-bottom: 12px;
5441
+ color: var(--text-secondary);
5442
+ }
5443
+
5444
+ .compact-context-grid {
5445
+ display: grid;
5446
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5447
+ gap: 8px;
5448
+ }
5449
+
5450
+ .compact-item {
5451
+ display: flex;
5452
+ justify-content: space-between;
5453
+ padding: 4px 0;
5454
+ font-size: 0.85rem;
5455
+ }
5456
+
5457
+ .compact-label {
5458
+ color: var(--text-secondary);
5459
+ font-weight: 500;
5460
+ }
5461
+
5462
+ .compact-value {
5463
+ color: var(--text-primary);
5464
+ text-align: right;
5465
+ }
5466
+
5467
+ /* Edit Tool Modal Specific Styles */
5468
+ .edit-changes-section {
5469
+ margin-bottom: 24px;
5470
+ padding: 16px;
5471
+ background: rgba(33, 38, 45, 0.5);
5472
+ border-radius: 8px;
5473
+ border: 1px solid var(--border-color);
5474
+ }
5475
+
5476
+ .diff-header-section {
5477
+ display: flex;
5478
+ justify-content: space-between;
5479
+ align-items: center;
5480
+ margin-bottom: 16px;
5481
+ }
5482
+
5483
+ .diff-header-section h4 {
5484
+ margin: 0;
5485
+ }
5486
+
5487
+ .diff-mode-toggle {
5488
+ display: flex;
5489
+ gap: 4px;
5490
+ background: rgba(13, 17, 23, 0.6);
5491
+ border-radius: 6px;
5492
+ padding: 2px;
5493
+ }
5494
+
5495
+ .diff-mode-btn {
5496
+ background: transparent;
5497
+ border: none;
5498
+ color: var(--text-secondary);
5499
+ padding: 6px 12px;
5500
+ border-radius: 4px;
5501
+ font-size: 0.8rem;
5502
+ cursor: pointer;
5503
+ transition: all 0.2s ease;
5504
+ display: flex;
5505
+ align-items: center;
5506
+ gap: 4px;
5507
+ }
5508
+
5509
+ .diff-mode-btn:hover {
5510
+ background: rgba(56, 139, 253, 0.1);
5511
+ color: var(--text-primary);
5512
+ }
5513
+
5514
+ .diff-mode-btn.active {
5515
+ background: rgba(56, 139, 253, 0.15);
5516
+ color: #58a6ff;
5517
+ font-weight: 500;
5518
+ }
5519
+
5520
+ .diff-mode-btn span {
5521
+ font-size: 0.9rem;
5522
+ }
5523
+
5524
+ /* Diff Editor Styles */
5525
+ .diff-container {
5526
+ background: rgba(13, 17, 23, 0.9);
5527
+ border-radius: 6px;
5528
+ border: 1px solid rgba(48, 54, 61, 0.8);
5529
+ overflow: hidden;
5530
+ }
5531
+
5532
+ .diff-editor {
5533
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
5534
+ font-size: 0.8rem;
5535
+ line-height: 1.4;
5536
+ }
5537
+
5538
+ .diff-header {
5539
+ background: rgba(22, 27, 34, 0.9);
5540
+ padding: 8px 12px;
5541
+ border-bottom: 1px solid rgba(48, 54, 61, 0.5);
5542
+ color: var(--text-secondary);
5543
+ font-size: 0.75rem;
5544
+ }
5545
+
5546
+ .diff-stats {
5547
+ font-weight: 500;
5548
+ }
5549
+
5550
+ .diff-section {
5551
+ max-height: 300px;
5552
+ overflow-y: auto;
5553
+ }
5554
+
5555
+ .diff-line {
5556
+ display: flex;
5557
+ align-items: center;
5558
+ min-height: 20px;
5559
+ padding: 0;
5560
+ border-left: 3px solid transparent;
5561
+ }
5562
+
5563
+ .diff-line:hover {
5564
+ background: rgba(56, 139, 253, 0.05);
5565
+ }
5566
+
5567
+ .removed-line {
5568
+ background: rgba(248, 81, 73, 0.1);
5569
+ border-left-color: #f85149;
5570
+ }
5571
+
5572
+ .removed-line:hover {
5573
+ background: rgba(248, 81, 73, 0.15);
5574
+ }
5575
+
5576
+ .added-line {
5577
+ background: rgba(63, 185, 80, 0.1);
5578
+ border-left-color: #3fb950;
5579
+ }
5580
+
5581
+ .added-line:hover {
5582
+ background: rgba(63, 185, 80, 0.15);
5583
+ }
5584
+
5585
+ .line-prefix {
5586
+ width: 24px;
5587
+ text-align: center;
5588
+ font-weight: 600;
5589
+ padding: 2px 8px;
5590
+ user-select: none;
5591
+ font-size: 0.9rem;
5592
+ }
5593
+
5594
+ .removed-line .line-prefix {
5595
+ color: #f85149;
5596
+ }
5597
+
5598
+ .added-line .line-prefix {
5599
+ color: #3fb950;
5600
+ }
5601
+
5602
+ .line-content {
5603
+ flex: 1;
5604
+ padding: 2px 12px;
5605
+ white-space: pre;
5606
+ overflow-x: auto;
5607
+ }
5608
+
5609
+ .removed-line .line-content {
5610
+ color: #ffd6d6;
5611
+ }
5612
+
5613
+ .added-line .line-content {
5614
+ color: #d6ffdd;
5615
+ }
5616
+
5617
+ .truncated {
5618
+ background: rgba(125, 133, 144, 0.1);
5619
+ border-left-color: #7d8590;
5620
+ }
5621
+
5622
+ .truncated .line-content {
5623
+ color: var(--text-muted);
5624
+ font-style: italic;
5625
+ }
5626
+
5627
+ /* Scrollbar for diff sections */
5628
+ .diff-section::-webkit-scrollbar {
5629
+ width: 6px;
5630
+ }
5631
+
5632
+ .diff-section::-webkit-scrollbar-track {
5633
+ background: rgba(22, 27, 34, 0.5);
5634
+ }
5635
+
5636
+ .diff-section::-webkit-scrollbar-thumb {
5637
+ background: rgba(125, 133, 144, 0.5);
5638
+ border-radius: 3px;
5639
+ }
5640
+
5641
+ .diff-section::-webkit-scrollbar-thumb:hover {
5642
+ background: rgba(125, 133, 144, 0.7);
5643
+ }
5644
+
5645
+ /* Smart Diff Specific Styles */
5646
+ .smart-diff {
5647
+ background: rgba(13, 17, 23, 0.95);
5648
+ }
5649
+
5650
+ .change-block {
5651
+ background: rgba(22, 27, 34, 0.5);
5652
+ border-radius: 4px;
5653
+ margin-bottom: 8px;
5654
+ overflow: hidden;
5655
+ }
5656
+
5657
+ .change-separator {
5658
+ text-align: center;
5659
+ padding: 8px;
5660
+ color: var(--text-muted);
5661
+ font-size: 1.2rem;
5662
+ background: rgba(125, 133, 144, 0.1);
5663
+ margin: 8px 0;
5664
+ border-radius: 4px;
5665
+ }
5666
+
5667
+ .no-changes {
5668
+ padding: 24px;
5669
+ text-align: center;
5670
+ background: rgba(22, 27, 34, 0.5);
5671
+ border-radius: 6px;
5672
+ border: 2px dashed rgba(125, 133, 144, 0.3);
5673
+ }
5674
+
5675
+ .no-changes-text {
5676
+ color: var(--text-muted);
5677
+ font-style: italic;
5678
+ }
5679
+
5680
+ .diff-line.smart {
5681
+ border-radius: 0;
5682
+ margin: 0;
5683
+ }
5684
+
5685
+ .smart-diff .diff-line:first-child {
5686
+ border-top-left-radius: 4px;
5687
+ border-top-right-radius: 4px;
5688
+ }
5689
+
5690
+ .smart-diff .diff-line:last-child {
5691
+ border-bottom-left-radius: 4px;
5692
+ border-bottom-right-radius: 4px;
5693
+ }
5694
+
5695
+ /* Write Tool Modal Specific Styles */
5696
+ .file-content-section {
5697
+ margin-bottom: 24px;
5698
+ padding: 16px;
5699
+ background: rgba(33, 38, 45, 0.5);
5700
+ border-radius: 8px;
5701
+ border: 1px solid var(--border-color);
5702
+ }
5703
+
5704
+ .content-header-section {
5705
+ display: flex;
5706
+ justify-content: space-between;
5707
+ align-items: center;
5708
+ margin-bottom: 16px;
5709
+ }
5710
+
5711
+ .content-header-section h4 {
5712
+ margin: 0;
5713
+ }
5714
+
5715
+ .content-stats {
5716
+ display: flex;
5717
+ gap: 12px;
5718
+ }
5719
+
5720
+ .content-stat {
5721
+ background: rgba(56, 139, 253, 0.15);
5722
+ color: #58a6ff;
5723
+ padding: 2px 8px;
5724
+ border-radius: 12px;
5725
+ font-size: 0.75rem;
5726
+ font-weight: 500;
5727
+ }
5728
+
5729
+ .content-preview-container {
5730
+ background: rgba(13, 17, 23, 0.9);
5731
+ border: 1px solid rgba(48, 54, 61, 0.8);
5732
+ border-radius: 8px;
5733
+ overflow: hidden;
5734
+ }
5735
+
5736
+ .content-preview {
5737
+ color: #e6edf3;
5738
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
5739
+ font-size: 0.8rem;
5740
+ line-height: 1.4;
5741
+ margin: 0;
5742
+ padding: 16px;
5743
+ white-space: pre-wrap;
5744
+ word-wrap: break-word;
5745
+ max-height: 400px;
5746
+ overflow-y: auto;
5747
+ background: none;
5748
+ border: none;
5749
+ }
5750
+
5751
+ .content-preview::-webkit-scrollbar {
5752
+ width: 8px;
5753
+ }
5754
+
5755
+ .content-preview::-webkit-scrollbar-track {
5756
+ background: rgba(22, 27, 34, 0.5);
5757
+ }
5758
+
5759
+ .content-preview::-webkit-scrollbar-thumb {
5760
+ background: rgba(125, 133, 144, 0.5);
5761
+ border-radius: 4px;
5762
+ }
5763
+
5764
+ .content-preview::-webkit-scrollbar-thumb:hover {
5765
+ background: rgba(125, 133, 144, 0.7);
5766
+ }
5767
+
5768
+ .raw-params-json {
5769
+ color: #e6edf3;
5770
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
5771
+ font-size: 0.85rem;
5772
+ line-height: 1.4;
5773
+ margin: 0;
5774
+ white-space: pre;
5775
+ overflow-x: auto;
5776
+ background: none;
5777
+ border: none;
5778
+ padding: 0;
5779
+ }
5780
+
5781
+ .raw-params-json::-webkit-scrollbar {
5782
+ height: 6px;
5783
+ }
5784
+
5785
+ .raw-params-json::-webkit-scrollbar-track {
5786
+ background: rgba(33, 38, 45, 0.5);
5787
+ border-radius: 3px;
5788
+ }
5789
+
5790
+ .raw-params-json::-webkit-scrollbar-thumb {
5791
+ background: rgba(125, 133, 144, 0.5);
5792
+ border-radius: 3px;
5793
+ }
5794
+
5795
+ .raw-params-json::-webkit-scrollbar-thumb:hover {
5796
+ background: rgba(125, 133, 144, 0.7);
5797
+ }
5798
+
5799
+ .context-details, .operation-details {
5800
+ display: flex;
5801
+ flex-direction: column;
5802
+ gap: 12px;
5803
+ }
5804
+
5805
+ .context-item, .operation-item {
5806
+ display: flex;
5807
+ justify-content: space-between;
5808
+ align-items: center;
5809
+ padding: 8px 0;
5810
+ border-bottom: 1px solid rgba(48, 54, 61, 0.5);
5811
+ }
5812
+
5813
+ .context-item:last-child, .operation-item:last-child {
5814
+ border-bottom: none;
5815
+ }
5816
+
5817
+ .context-label, .operation-label {
5818
+ font-weight: 600;
5819
+ color: var(--text-secondary);
5820
+ min-width: 120px;
5821
+ }
5822
+
5823
+ .context-value, .operation-value {
5824
+ color: var(--text-primary);
5825
+ text-align: right;
5826
+ flex: 1;
5827
+ }
5828
+
5829
+ .tool-id-badge {
5830
+ background: rgba(56, 139, 253, 0.15);
5831
+ color: #58a6ff;
5832
+ padding: 2px 8px;
5833
+ border-radius: 12px;
5834
+ font-size: 0.75rem;
5835
+ margin-left: 8px;
5836
+ }
5837
+
5838
+
5839
+ .insights-grid {
5840
+ display: grid;
5841
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
5842
+ gap: 12px;
5843
+ }
5844
+
5845
+ .insight-card {
5846
+ padding: 12px;
5847
+ background: rgba(22, 27, 34, 0.6);
5848
+ border-radius: 6px;
5849
+ border: 1px solid rgba(48, 54, 61, 0.8);
5850
+ }
5851
+
5852
+ .insight-header {
5853
+ display: flex;
5854
+ align-items: center;
5855
+ gap: 8px;
5856
+ margin-bottom: 8px;
5857
+ }
5858
+
5859
+ .insight-icon {
5860
+ font-size: 1.1rem;
5861
+ }
5862
+
5863
+ .insight-title {
5864
+ font-weight: 600;
5865
+ color: var(--text-secondary);
5866
+ font-size: 0.85rem;
5867
+ }
5868
+
5869
+ .insight-content {
5870
+ color: var(--text-primary);
5871
+ font-size: 0.9rem;
5872
+ font-weight: 500;
5873
+ }
5874
+
5875
+ .context-explanation {
5876
+ color: var(--text-primary);
5877
+ line-height: 1.5;
5878
+ }
5879
+
5880
+ .context-list {
5881
+ margin: 16px 0;
5882
+ padding-left: 20px;
5883
+ }
5884
+
5885
+ .context-list li {
5886
+ margin-bottom: 8px;
5887
+ color: var(--text-secondary);
5888
+ }
5889
+
5890
+ .context-note {
5891
+ margin-top: 16px;
5892
+ padding: 12px;
5893
+ background: rgba(56, 139, 253, 0.1);
5894
+ border-radius: 6px;
5895
+ border-left: 3px solid #58a6ff;
5896
+ font-size: 0.9rem;
5897
+ }
5898
+
5899
+ /* Responsive design for tool modal */
5900
+ @media (max-width: 768px) {
5901
+ .read-tool-modal {
5902
+ max-width: 95%;
5903
+ margin: 10px;
5904
+ }
5905
+
5906
+ .insights-grid {
5907
+ grid-template-columns: 1fr;
5908
+ }
5909
+
5910
+ .compact-context-grid {
5911
+ grid-template-columns: 1fr;
5912
+ }
5913
+
5914
+ .compact-item {
5915
+ flex-direction: column;
5916
+ align-items: flex-start;
5917
+ gap: 2px;
5918
+ }
5919
+
5920
+ .compact-value {
5921
+ text-align: left;
5922
+ }
5923
+
5924
+ .params-summary {
5925
+ justify-content: center;
5926
+ }
5927
+
5928
+ .context-item, .operation-item {
5929
+ flex-direction: column;
5930
+ align-items: flex-start;
5931
+ gap: 4px;
5932
+ }
5933
+
5934
+ .context-label, .operation-label {
5935
+ min-width: auto;
5936
+ }
5937
+
5938
+ .context-value, .operation-value {
5939
+ text-align: left;
5940
+ }
5941
+
5942
+ .tool-overview-section {
5943
+ grid-template-columns: 1fr;
5944
+ gap: 16px;
5945
+ }
5946
+
5947
+ .parameters-grid,
5948
+ .examples-container {
5949
+ grid-template-columns: 1fr;
5950
+ }
5951
+
5952
+ .tips-grid {
5953
+ grid-template-columns: 1fr;
5954
+ }
5955
+
5956
+ .usage-param {
5957
+ flex-direction: column;
5958
+ align-items: flex-start;
5959
+ gap: 6px;
5960
+ }
5961
+
5962
+ .param-label {
5963
+ min-width: auto;
5964
+ }
5965
+ }
5966
+ /* Glob Modal Styles */
5967
+ .agent-modal.glob-tool-modal .agent-modal-content {
5968
+ background: #0d1117;
5969
+ border: 1px solid #21262d;
5970
+ }
5971
+
5972
+ .glob-pattern-section, .glob-components-section, .glob-insights-section {
5973
+ margin-bottom: 24px;
5974
+ padding: 16px;
5975
+ background: rgba(33, 38, 45, 0.5);
5976
+ border-radius: 8px;
5977
+ border: 1px solid var(--border-color);
5978
+ }
5979
+
5980
+ .glob-pattern-section h4, .glob-components-section h4, .glob-insights-section h4 {
5981
+ color: #d57455;
5982
+ font-size: 1.1rem;
5983
+ margin-bottom: 16px;
5984
+ }
5985
+
5986
+ .pattern-display {
5987
+ font-family: 'Courier New', monospace;
5988
+ background: #1b1e23;
5989
+ padding: 4px 8px;
5990
+ border-radius: 3px;
5991
+ color: #f0c674;
5992
+ border: 1px solid #30363d;
5993
+ }
5994
+
5995
+ .pattern-breakdown {
5996
+ display: flex;
5997
+ flex-direction: column;
5998
+ gap: 12px;
5999
+ }
6000
+
6001
+ .pattern-component {
6002
+ display: flex;
6003
+ align-items: center;
6004
+ gap: 12px;
6005
+ padding: 8px 12px;
6006
+ background: #161b22;
6007
+ border-left: 3px solid #30363d;
6008
+ border-radius: 0 4px 4px 0;
6009
+ }
6010
+
6011
+ .pattern-component.recursive {
6012
+ border-left-color: #f85149;
6013
+ }
6014
+
6015
+ .pattern-component.wildcard {
6016
+ border-left-color: #79c0ff;
6017
+ }
6018
+
6019
+ .pattern-component.extension {
6020
+ border-left-color: #a5f3fc;
6021
+ }
6022
+
6023
+ .pattern-component.partial-wildcard {
6024
+ border-left-color: #f0c674;
6025
+ }
6026
+
6027
+ .pattern-component.char-wildcard {
6028
+ border-left-color: #b4befe;
6029
+ }
6030
+
6031
+ .pattern-component.char-class {
6032
+ border-left-color: #a6e3a1;
6033
+ }
6034
+
6035
+ .pattern-component.literal {
6036
+ border-left-color: #c9d1d9;
6037
+ }
6038
+
6039
+ .pattern-part {
6040
+ font-family: 'Courier New', monospace;
6041
+ background: #21262d;
6042
+ padding: 4px 8px;
6043
+ border-radius: 3px;
6044
+ color: #58a6ff;
6045
+ min-width: 60px;
6046
+ text-align: center;
6047
+ font-weight: 500;
6048
+ }
6049
+
6050
+ .pattern-desc {
6051
+ color: #8b949e;
6052
+ font-size: 0.875rem;
6053
+ flex: 1;
6054
+ }
6055
+
6056
+ .pattern-empty {
6057
+ color: #8b949e;
6058
+ font-style: italic;
6059
+ text-align: center;
6060
+ padding: 20px;
6061
+ }
6062
+
6063
+ .tool-insights {
6064
+ display: grid;
6065
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
6066
+ gap: 12px;
6067
+ }
6068
+
6069
+ .insight-item {
6070
+ display: flex;
6071
+ justify-content: space-between;
6072
+ align-items: center;
6073
+ padding: 8px 12px;
6074
+ background: #161b22;
6075
+ border-radius: 4px;
6076
+ border: 1px solid #21262d;
6077
+ }
6078
+
6079
+ .insight-label {
6080
+ color: #8b949e;
6081
+ font-weight: 500;
6082
+ font-size: 0.875rem;
6083
+ }
6084
+
6085
+ .insight-value {
6086
+ color: #c9d1d9;
6087
+ font-weight: 400;
6088
+ text-align: right;
6089
+ max-width: 60%;
6090
+ }
6091
+
6092
+ /* Grep Modal Styles */
6093
+ .agent-modal.grep-tool-modal .agent-modal-content {
6094
+ background: #0d1117;
6095
+ border: 1px solid #21262d;
6096
+ }
6097
+
6098
+ .grep-config-section, .grep-options-section, .grep-pattern-section, .grep-insights-section {
6099
+ margin-bottom: 24px;
6100
+ padding: 16px;
6101
+ background: rgba(33, 38, 45, 0.5);
6102
+ border-radius: 8px;
6103
+ border: 1px solid var(--border-color);
6104
+ }
6105
+
6106
+ .grep-config-section h4, .grep-options-section h4, .grep-pattern-section h4, .grep-insights-section h4 {
6107
+ color: #d57455;
6108
+ font-size: 1.1rem;
6109
+ margin-bottom: 16px;
6110
+ }
6111
+
6112
+ .search-pattern {
6113
+ font-family: 'Courier New', monospace;
6114
+ background: #1b1e23;
6115
+ padding: 4px 8px;
6116
+ border-radius: 3px;
6117
+ color: #a5f3fc;
6118
+ border: 1px solid #30363d;
6119
+ }
6120
+
6121
+ .search-options {
6122
+ display: flex;
6123
+ flex-direction: column;
6124
+ gap: 8px;
6125
+ }
6126
+
6127
+ .search-option {
6128
+ background: #161b22;
6129
+ border: 1px solid #21262d;
6130
+ border-radius: 4px;
6131
+ padding: 12px;
6132
+ }
6133
+
6134
+ .search-option.enabled {
6135
+ border-left: 3px solid #238636;
6136
+ }
6137
+
6138
+ .option-header {
6139
+ display: flex;
6140
+ justify-content: space-between;
6141
+ align-items: center;
6142
+ margin-bottom: 4px;
6143
+ }
6144
+
6145
+ .option-name {
6146
+ font-weight: 500;
6147
+ color: #c9d1d9;
6148
+ font-size: 0.875rem;
6149
+ }
6150
+
6151
+ .option-status {
6152
+ font-size: 0.75rem;
6153
+ padding: 2px 6px;
6154
+ border-radius: 3px;
6155
+ text-transform: uppercase;
6156
+ font-weight: 600;
6157
+ }
6158
+
6159
+ .option-status.enabled {
6160
+ background: #238636;
6161
+ color: #ffffff;
6162
+ }
6163
+
6164
+ .option-desc {
6165
+ color: #8b949e;
6166
+ font-size: 0.8rem;
6167
+ margin-top: 4px;
6168
+ }
6169
+
6170
+ .no-options {
6171
+ color: #8b949e;
6172
+ font-style: italic;
6173
+ text-align: center;
6174
+ padding: 20px;
6175
+ background: #161b22;
6176
+ border-radius: 4px;
6177
+ }
6178
+
6179
+ .pattern-analysis {
6180
+ display: flex;
6181
+ flex-direction: column;
6182
+ gap: 8px;
6183
+ }
6184
+
6185
+ .pattern-analysis .pattern-component.regex {
6186
+ border-left-color: #f85149;
6187
+ }
6188
+
6189
+ .pattern-analysis .pattern-component.anchor {
6190
+ border-left-color: #79c0ff;
6191
+ }
6192
+
6193
+ .pattern-analysis .pattern-component.operator {
6194
+ border-left-color: #a5f3fc;
6195
+ }
6196
+
6197
+ .pattern-analysis .pattern-component.charclass {
6198
+ border-left-color: #a6e3a1;
6199
+ }
6200
+
6201
+ .pattern-analysis .pattern-component.group {
6202
+ border-left-color: #f0c674;
6203
+ }
6204
+
6205
+ .pattern-simple {
6206
+ color: #8b949e;
6207
+ font-style: italic;
6208
+ text-align: center;
6209
+ padding: 20px;
6210
+ background: #161b22;
6211
+ border-radius: 4px;
6212
+ }
6213
+
6214
+ .pattern-empty {
6215
+ color: #8b949e;
6216
+ font-style: italic;
6217
+ text-align: center;
6218
+ padding: 20px;
6219
+ background: #161b22;
6220
+ border-radius: 4px;
6221
+ }
6222
+
6223
+ /* TodoWrite Modal Styles */
6224
+ .agent-modal.todo-tool-modal .agent-modal-content {
6225
+ background: #0d1117;
6226
+ border: 1px solid #21262d;
6227
+ }
6228
+
6229
+ .todo-summary-section, .todo-status-section, .todo-priority-section, .todo-items-section {
6230
+ margin-bottom: 24px;
6231
+ padding: 16px;
6232
+ background: rgba(33, 38, 45, 0.5);
6233
+ border-radius: 8px;
6234
+ border: 1px solid var(--border-color);
6235
+ }
6236
+
6237
+ .todo-summary-section h4, .todo-status-section h4, .todo-priority-section h4, .todo-items-section h4 {
6238
+ color: #d57455;
6239
+ font-size: 1.1rem;
6240
+ margin-bottom: 16px;
6241
+ }
6242
+
6243
+ .todo-summary {
6244
+ background: #161b22;
6245
+ border-radius: 6px;
6246
+ padding: 16px;
6247
+ }
6248
+
6249
+ .summary-stats {
6250
+ display: grid;
6251
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
6252
+ gap: 20px;
6253
+ }
6254
+
6255
+ .stat-item {
6256
+ text-align: center;
6257
+ padding: 12px;
6258
+ background: #21262d;
6259
+ border-radius: 4px;
6260
+ }
6261
+
6262
+ .stat-number {
6263
+ display: block;
6264
+ font-size: 2rem;
6265
+ font-weight: 700;
6266
+ color: #58a6ff;
6267
+ margin-bottom: 4px;
6268
+ }
6269
+
6270
+ .stat-label {
6271
+ font-size: 0.875rem;
6272
+ color: #8b949e;
6273
+ text-transform: uppercase;
6274
+ font-weight: 500;
6275
+ }
6276
+
6277
+ .status-breakdown {
6278
+ display: flex;
6279
+ flex-direction: column;
6280
+ gap: 12px;
6281
+ }
6282
+
6283
+ .status-item {
6284
+ background: #161b22;
6285
+ border-radius: 4px;
6286
+ padding: 12px;
6287
+ border: 1px solid #21262d;
6288
+ }
6289
+
6290
+ .status-item.pending {
6291
+ border-left: 3px solid #f0c674;
6292
+ }
6293
+
6294
+ .status-item.in-progress {
6295
+ border-left: 3px solid #79c0ff;
6296
+ }
6297
+
6298
+ .status-item.completed {
6299
+ border-left: 3px solid #238636;
6300
+ }
6301
+
6302
+ .status-info {
6303
+ display: flex;
6304
+ justify-content: space-between;
6305
+ align-items: center;
6306
+ margin-bottom: 8px;
6307
+ }
6308
+
6309
+ .status-name {
6310
+ font-weight: 500;
6311
+ color: #c9d1d9;
6312
+ }
6313
+
6314
+ .status-count {
6315
+ font-weight: 600;
6316
+ color: #58a6ff;
6317
+ background: #21262d;
6318
+ padding: 2px 8px;
6319
+ border-radius: 3px;
6320
+ font-size: 0.875rem;
6321
+ }
6322
+
6323
+ .status-bar {
6324
+ width: 100%;
6325
+ height: 6px;
6326
+ background: #21262d;
6327
+ border-radius: 3px;
6328
+ overflow: hidden;
6329
+ }
6330
+
6331
+ .status-fill {
6332
+ height: 100%;
6333
+ border-radius: 3px;
6334
+ transition: width 0.3s ease;
6335
+ }
6336
+
6337
+ .status-item.pending .status-fill {
6338
+ background: #f0c674;
6339
+ }
6340
+
6341
+ .status-item.in-progress .status-fill {
6342
+ background: #79c0ff;
4415
6343
  }
4416
-
4417
- .interaction-title {
4418
- display: flex;
4419
- align-items: center;
4420
- gap: 8px;
4421
- color: var(--text-primary);
4422
- font-weight: 600;
4423
- font-size: 1.1rem;
6344
+
6345
+ .status-item.completed .status-fill {
6346
+ background: #238636;
4424
6347
  }
4425
-
4426
- .interaction-icon {
4427
- font-size: 1.2rem;
4428
- color: var(--text-warning);
6348
+
6349
+ .priority-distribution {
6350
+ display: grid;
6351
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
6352
+ gap: 12px;
4429
6353
  }
4430
-
4431
- .interaction-close {
4432
- background: none;
4433
- border: none;
4434
- color: var(--text-secondary);
4435
- font-size: 1.5rem;
4436
- cursor: pointer;
4437
- padding: 4px 8px;
6354
+
6355
+ .priority-item {
6356
+ display: flex;
6357
+ justify-content: space-between;
6358
+ align-items: center;
6359
+ background: #161b22;
6360
+ border: 1px solid #21262d;
4438
6361
  border-radius: 4px;
4439
- transition: all 0.2s ease;
6362
+ padding: 12px;
4440
6363
  }
4441
-
4442
- .interaction-close:hover {
4443
- background: var(--bg-tertiary);
4444
- color: var(--text-primary);
6364
+
6365
+ .priority-item.high {
6366
+ border-left: 3px solid #f85149;
4445
6367
  }
4446
-
4447
- .interaction-description {
4448
- background: var(--bg-tertiary);
4449
- border: 1px solid var(--border-primary);
4450
- border-radius: 8px;
4451
- padding: 16px;
4452
- margin-bottom: 16px;
4453
- font-family: 'Monaco', monospace;
4454
- font-size: 0.85rem;
6368
+
6369
+ .priority-item.medium {
6370
+ border-left: 3px solid #f0c674;
4455
6371
  }
4456
-
4457
- .tool-action {
4458
- color: var(--text-primary);
6372
+
6373
+ .priority-item.low {
6374
+ border-left: 3px solid #a6e3a1;
4459
6375
  }
4460
-
4461
- .tool-details {
4462
- margin-top: 8px;
4463
- color: var(--text-secondary);
4464
- font-size: 0.8rem;
4465
- line-height: 1.4;
4466
- white-space: pre-wrap;
6376
+
6377
+ .priority-label {
6378
+ font-weight: 500;
6379
+ color: #c9d1d9;
6380
+ font-size: 0.875rem;
4467
6381
  }
4468
-
4469
- .interaction-prompt {
4470
- font-size: 1rem;
4471
- color: var(--text-primary);
6382
+
6383
+ .priority-count {
4472
6384
  font-weight: 600;
4473
- margin-bottom: 20px;
4474
- text-align: center;
4475
- }
4476
-
4477
- .interaction-choices {
4478
- margin-bottom: 20px;
6385
+ color: #58a6ff;
6386
+ background: #21262d;
6387
+ padding: 2px 8px;
6388
+ border-radius: 3px;
6389
+ font-size: 0.875rem;
4479
6390
  }
4480
-
4481
- .interaction-choice {
6391
+
6392
+ .todo-items {
4482
6393
  display: flex;
4483
- align-items: flex-start;
4484
- gap: 12px;
6394
+ flex-direction: column;
6395
+ gap: 8px;
6396
+ max-height: 400px;
6397
+ overflow-y: auto;
6398
+ }
6399
+
6400
+ .todo-item {
6401
+ background: #161b22;
6402
+ border: 1px solid #21262d;
6403
+ border-radius: 4px;
4485
6404
  padding: 12px;
4486
- margin-bottom: 8px;
4487
- background: var(--bg-tertiary);
4488
- border: 1px solid var(--border-primary);
4489
- border-radius: 8px;
4490
- cursor: pointer;
4491
- transition: all 0.2s ease;
4492
6405
  }
4493
-
4494
- .interaction-choice:hover {
4495
- background: var(--bg-primary);
4496
- border-color: var(--text-accent);
6406
+
6407
+ .todo-item.pending {
6408
+ border-left: 3px solid #f0c674;
4497
6409
  }
4498
-
4499
- .interaction-choice input[type="radio"] {
4500
- margin: 2px 0 0 0;
4501
- cursor: pointer;
6410
+
6411
+ .todo-item.in-progress {
6412
+ border-left: 3px solid #79c0ff;
4502
6413
  }
4503
-
4504
- .choice-number {
4505
- color: var(--text-accent);
4506
- font-weight: 600;
4507
- min-width: 20px;
6414
+
6415
+ .todo-item.completed {
6416
+ border-left: 3px solid #238636;
6417
+ opacity: 0.7;
4508
6418
  }
4509
-
4510
- .choice-text {
4511
- color: var(--text-primary);
4512
- line-height: 1.4;
4513
- flex: 1;
6419
+
6420
+ .todo-header {
6421
+ display: flex;
6422
+ gap: 8px;
6423
+ align-items: center;
6424
+ margin-bottom: 8px;
4514
6425
  }
4515
-
4516
- .interaction-text-input {
4517
- margin-bottom: 20px;
6426
+
6427
+ .todo-index {
6428
+ font-family: 'Courier New', monospace;
6429
+ font-size: 0.75rem;
6430
+ color: #8b949e;
6431
+ background: #21262d;
6432
+ padding: 2px 6px;
6433
+ border-radius: 3px;
6434
+ min-width: 24px;
6435
+ text-align: center;
4518
6436
  }
4519
-
4520
- .interaction-text-input label {
4521
- display: block;
4522
- color: var(--text-primary);
6437
+
6438
+ .todo-status {
6439
+ font-size: 0.75rem;
6440
+ padding: 2px 6px;
6441
+ border-radius: 3px;
6442
+ text-transform: uppercase;
4523
6443
  font-weight: 600;
4524
- margin-bottom: 8px;
4525
6444
  }
4526
-
4527
- .interaction-text-input textarea {
4528
- width: 100%;
4529
- background: var(--bg-tertiary);
4530
- border: 1px solid var(--border-primary);
4531
- border-radius: 8px;
4532
- padding: 12px;
4533
- color: var(--text-primary);
4534
- font-family: 'Monaco', monospace;
4535
- font-size: 0.9rem;
4536
- resize: vertical;
4537
- min-height: 100px;
6445
+
6446
+ .todo-status.pending {
6447
+ background: #f0c674;
6448
+ color: #0d1117;
4538
6449
  }
4539
-
4540
- .interaction-text-input textarea:focus {
4541
- outline: none;
4542
- border-color: var(--text-accent);
4543
- background: var(--bg-primary);
6450
+
6451
+ .todo-status.in_progress {
6452
+ background: #79c0ff;
6453
+ color: #0d1117;
4544
6454
  }
4545
-
4546
- .interaction-actions {
4547
- display: flex;
4548
- gap: 12px;
4549
- justify-content: flex-end;
6455
+
6456
+ .todo-status.completed {
6457
+ background: #238636;
6458
+ color: #ffffff;
4550
6459
  }
4551
-
4552
- .interaction-btn {
4553
- padding: 10px 20px;
4554
- border-radius: 6px;
4555
- border: none;
6460
+
6461
+ .todo-priority {
6462
+ font-size: 0.75rem;
6463
+ padding: 2px 6px;
6464
+ border-radius: 3px;
6465
+ text-transform: uppercase;
4556
6466
  font-weight: 600;
4557
- cursor: pointer;
4558
- transition: all 0.2s ease;
4559
- font-size: 0.9rem;
4560
- }
4561
-
4562
- .interaction-btn.primary {
4563
- background: var(--text-accent);
4564
- color: white;
4565
6467
  }
4566
-
4567
- .interaction-btn.primary:hover {
4568
- background: #c96543;
4569
- transform: translateY(-1px);
6468
+
6469
+ .todo-priority.high {
6470
+ background: #f85149;
6471
+ color: #ffffff;
4570
6472
  }
4571
-
4572
- .interaction-btn.secondary {
4573
- background: var(--bg-tertiary);
4574
- color: var(--text-secondary);
4575
- border: 1px solid var(--border-primary);
6473
+
6474
+ .todo-priority.medium {
6475
+ background: #f0c674;
6476
+ color: #0d1117;
4576
6477
  }
4577
-
4578
- .interaction-btn.secondary:hover {
4579
- background: var(--bg-primary);
4580
- color: var(--text-primary);
4581
- border-color: var(--text-secondary);
6478
+
6479
+ .todo-priority.low {
6480
+ background: #a6e3a1;
6481
+ color: #0d1117;
4582
6482
  }
4583
-
4584
- .interaction-error {
4585
- background: rgba(248, 81, 73, 0.1);
4586
- border: 1px solid var(--text-error);
4587
- border-radius: 6px;
4588
- padding: 12px;
4589
- margin-bottom: 16px;
4590
- color: var(--text-error);
6483
+
6484
+ .todo-content {
6485
+ color: #c9d1d9;
6486
+ line-height: 1.5;
6487
+ margin-bottom: 8px;
4591
6488
  font-size: 0.9rem;
6489
+ }
6490
+
6491
+ .todo-meta {
6492
+ display: flex;
6493
+ justify-content: space-between;
6494
+ align-items: center;
6495
+ font-size: 0.75rem;
6496
+ color: #8b949e;
6497
+ }
6498
+
6499
+ .todo-id {
6500
+ font-family: 'Courier New', monospace;
6501
+ }
6502
+
6503
+ .todo-length {
6504
+ font-style: italic;
6505
+ }
6506
+
6507
+ .no-todos {
6508
+ color: #8b949e;
6509
+ font-style: italic;
4592
6510
  text-align: center;
6511
+ padding: 20px;
6512
+ background: #161b22;
6513
+ border-radius: 4px;
4593
6514
  }
6515
+
4594
6516
  </style>
4595
6517
  </head>
4596
6518
  <body>
@@ -4716,16 +6638,40 @@
4716
6638
 
4717
6639
  // Results Modal Management
4718
6640
  window.showResultsModal = function(contentId) {
4719
- console.log('showResultsModal called with contentId:', contentId);
4720
- console.log('Available stored content:', Object.keys(window.storedContent || {}));
6641
+ console.log('🔍 showResultsModal called with contentId:', contentId);
6642
+ console.log('🔍 Available stored content keys:', Object.keys(window.storedContent || {}));
6643
+ console.log('🔍 Available stored tool data keys:', Object.keys(window.storedToolData || {}));
4721
6644
 
4722
6645
  const content = window.storedContent && window.storedContent[contentId];
4723
6646
  if (!content) {
4724
- console.error('Content not found for ID:', contentId);
6647
+ console.error('❌ Content not found for ID:', contentId);
4725
6648
  alert('Content not found for ID: ' + contentId);
4726
6649
  return;
4727
6650
  }
4728
6651
 
6652
+ // Check if this is a Read tool by examining stored tool data
6653
+ const toolData = window.storedToolData && window.storedToolData[contentId];
6654
+ console.log('🔍 Tool data for', contentId, ':', toolData);
6655
+ console.log('🔍 window.claudeAnalyticsApp:', window.claudeAnalyticsApp);
6656
+ console.log('🔍 window.claudeAnalyticsApp.agentsPage:', window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage);
6657
+
6658
+ // Check if this is a supported tool with custom modal
6659
+ const supportedTools = ['Read', 'Edit', 'Write', 'Bash', 'Glob', 'Grep', 'TodoWrite'];
6660
+ if (toolData && supportedTools.includes(toolData.name) && window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage) {
6661
+ console.log(`✅ Opening custom ${toolData.name} tool modal`);
6662
+ // Open tool-specific modal
6663
+ window.claudeAnalyticsApp.agentsPage.openToolModal(toolData);
6664
+ return;
6665
+ } else {
6666
+ console.log('❌ Custom tool modal conditions not met:');
6667
+ console.log(' - toolData exists:', !!toolData);
6668
+ console.log(' - toolData.name:', toolData?.name);
6669
+ console.log(' - is supported tool:', toolData ? supportedTools.includes(toolData.name) : false);
6670
+ console.log(' - window.claudeAnalyticsApp exists:', !!window.claudeAnalyticsApp);
6671
+ console.log(' - agentsPage exists:', !!(window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage));
6672
+ }
6673
+
6674
+ // Default modal for other tools
4729
6675
  const modal = document.getElementById('results-modal');
4730
6676
  const modalContent = document.getElementById('modal-results-content');
4731
6677
  const modalTitle = document.getElementById('modal-results-title');