claude-code-workflow 6.3.27 → 6.3.29

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 (133) hide show
  1. package/.claude/CLAUDE.md +7 -1
  2. package/.claude/agents/action-planning-agent.md +1 -0
  3. package/.claude/agents/cli-discuss-agent.md +391 -0
  4. package/.claude/agents/cli-execution-agent.md +2 -0
  5. package/.claude/agents/cli-explore-agent.md +2 -1
  6. package/.claude/agents/cli-lite-planning-agent.md +1 -0
  7. package/.claude/agents/cli-planning-agent.md +1 -0
  8. package/.claude/agents/code-developer.md +1 -0
  9. package/.claude/agents/conceptual-planning-agent.md +2 -0
  10. package/.claude/agents/context-search-agent.md +1 -0
  11. package/.claude/agents/debug-explore-agent.md +2 -0
  12. package/.claude/agents/doc-generator.md +1 -0
  13. package/.claude/agents/issue-plan-agent.md +2 -1
  14. package/.claude/agents/issue-queue-agent.md +2 -1
  15. package/.claude/agents/memory-bridge.md +2 -0
  16. package/.claude/agents/test-context-search-agent.md +2 -0
  17. package/.claude/agents/test-fix-agent.md +1 -0
  18. package/.claude/agents/ui-design-agent.md +2 -0
  19. package/.claude/agents/universal-executor.md +1 -0
  20. package/.claude/commands/issue/execute.md +269 -176
  21. package/.claude/commands/workflow/debug.md +6 -0
  22. package/.claude/commands/workflow/execute.md +4 -0
  23. package/.claude/commands/workflow/lite-execute.md +4 -0
  24. package/.claude/commands/workflow/lite-lite-lite.md +433 -0
  25. package/.claude/commands/workflow/multi-cli-plan.md +510 -0
  26. package/.claude/commands/workflow/review-fix.md +4 -0
  27. package/.claude/commands/workflow/test-cycle-execute.md +4 -0
  28. package/.claude/skills/ccw/SKILL.md +262 -372
  29. package/.claude/skills/ccw/command.json +547 -0
  30. package/.claude/skills/ccw-help/SKILL.md +46 -107
  31. package/.claude/skills/ccw-help/command.json +511 -0
  32. package/.claude/skills/skill-tuning/SKILL.md +303 -0
  33. package/.claude/skills/skill-tuning/phases/actions/action-abort.md +164 -0
  34. package/.claude/skills/skill-tuning/phases/actions/action-analyze-requirements.md +406 -0
  35. package/.claude/skills/skill-tuning/phases/actions/action-apply-fix.md +206 -0
  36. package/.claude/skills/skill-tuning/phases/actions/action-complete.md +195 -0
  37. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-agent.md +317 -0
  38. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-context.md +243 -0
  39. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-dataflow.md +318 -0
  40. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-docs.md +299 -0
  41. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-memory.md +269 -0
  42. package/.claude/skills/skill-tuning/phases/actions/action-diagnose-token-consumption.md +200 -0
  43. package/.claude/skills/skill-tuning/phases/actions/action-gemini-analysis.md +322 -0
  44. package/.claude/skills/skill-tuning/phases/actions/action-generate-report.md +228 -0
  45. package/.claude/skills/skill-tuning/phases/actions/action-init.md +149 -0
  46. package/.claude/skills/skill-tuning/phases/actions/action-propose-fixes.md +317 -0
  47. package/.claude/skills/skill-tuning/phases/actions/action-verify.md +222 -0
  48. package/.claude/skills/skill-tuning/phases/orchestrator.md +377 -0
  49. package/.claude/skills/skill-tuning/phases/state-schema.md +378 -0
  50. package/.claude/skills/skill-tuning/specs/category-mappings.json +284 -0
  51. package/.claude/skills/skill-tuning/specs/dimension-mapping.md +212 -0
  52. package/.claude/skills/skill-tuning/specs/problem-taxonomy.md +318 -0
  53. package/.claude/skills/skill-tuning/specs/quality-gates.md +263 -0
  54. package/.claude/skills/skill-tuning/specs/skill-authoring-principles.md +189 -0
  55. package/.claude/skills/skill-tuning/specs/tuning-strategies.md +1537 -0
  56. package/.claude/skills/skill-tuning/templates/diagnosis-report.md +153 -0
  57. package/.claude/skills/skill-tuning/templates/fix-proposal.md +204 -0
  58. package/.claude/workflows/cli-templates/schemas/multi-cli-discussion-schema.json +421 -0
  59. package/.claude/workflows/cli-tools-usage.md +0 -41
  60. package/.codex/prompts/issue-execute.md +72 -12
  61. package/README.md +3 -0
  62. package/ccw/dist/core/data-aggregator.d.ts +2 -0
  63. package/ccw/dist/core/data-aggregator.d.ts.map +1 -1
  64. package/ccw/dist/core/data-aggregator.js +5 -2
  65. package/ccw/dist/core/data-aggregator.js.map +1 -1
  66. package/ccw/dist/core/lite-scanner.d.ts +2 -1
  67. package/ccw/dist/core/lite-scanner.d.ts.map +1 -1
  68. package/ccw/dist/core/lite-scanner.js +348 -6
  69. package/ccw/dist/core/lite-scanner.js.map +1 -1
  70. package/ccw/dist/core/routes/session-routes.d.ts.map +1 -1
  71. package/ccw/dist/core/routes/session-routes.js +166 -48
  72. package/ccw/dist/core/routes/session-routes.js.map +1 -1
  73. package/ccw/dist/core/routes/system-routes.d.ts.map +1 -1
  74. package/ccw/dist/core/routes/system-routes.js +87 -0
  75. package/ccw/dist/core/routes/system-routes.js.map +1 -1
  76. package/ccw/dist/core/server.js +2 -2
  77. package/ccw/dist/core/server.js.map +1 -1
  78. package/ccw/dist/tools/memory-update-queue.d.ts.map +1 -1
  79. package/ccw/dist/tools/memory-update-queue.js +5 -11
  80. package/ccw/dist/tools/memory-update-queue.js.map +1 -1
  81. package/ccw/scripts/IMPLEMENTATION-SUMMARY.md +226 -0
  82. package/ccw/scripts/QUICK-REFERENCE.md +135 -0
  83. package/ccw/scripts/README-memory-embedder.md +157 -0
  84. package/ccw/scripts/__pycache__/memory_embedder.cpython-313.pyc +0 -0
  85. package/ccw/scripts/__pycache__/test_memory_embedder.cpython-313-pytest-8.4.2.pyc +0 -0
  86. package/ccw/scripts/memory-embedder-example.ts +184 -0
  87. package/ccw/scripts/memory_embedder.py +428 -0
  88. package/ccw/scripts/test_memory_embedder.py +245 -0
  89. package/ccw/src/core/data-aggregator.ts +7 -2
  90. package/ccw/src/core/lite-scanner.ts +495 -6
  91. package/ccw/src/core/routes/session-routes.ts +201 -48
  92. package/ccw/src/core/routes/system-routes.ts +102 -0
  93. package/ccw/src/core/server.ts +2 -2
  94. package/ccw/src/templates/dashboard-css/01-base.css +8 -0
  95. package/ccw/src/templates/dashboard-css/02-session.css +81 -0
  96. package/ccw/src/templates/dashboard-css/03-tasks.css +5 -0
  97. package/ccw/src/templates/dashboard-css/04-lite-tasks.css +3071 -0
  98. package/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css +157 -0
  99. package/ccw/src/templates/dashboard-css/32-issue-manager.css +23 -0
  100. package/ccw/src/templates/dashboard-js/components/cli-stream-viewer.js +38 -4
  101. package/ccw/src/templates/dashboard-js/components/hook-manager.js +68 -34
  102. package/ccw/src/templates/dashboard-js/components/navigation.js +24 -4
  103. package/ccw/src/templates/dashboard-js/i18n.js +278 -4
  104. package/ccw/src/templates/dashboard-js/views/api-settings.js +32 -0
  105. package/ccw/src/templates/dashboard-js/views/claude-manager.js +44 -3
  106. package/ccw/src/templates/dashboard-js/views/cli-manager.js +303 -31
  107. package/ccw/src/templates/dashboard-js/views/history.js +44 -6
  108. package/ccw/src/templates/dashboard-js/views/home.js +1 -0
  109. package/ccw/src/templates/dashboard-js/views/issue-manager.js +54 -7
  110. package/ccw/src/templates/dashboard-js/views/lite-tasks.js +2621 -4
  111. package/ccw/src/templates/dashboard.html +5 -0
  112. package/ccw/src/tools/memory-update-queue.js +5 -11
  113. package/package.json +2 -1
  114. package/.claude/skills/ccw/index/command-capabilities.json +0 -127
  115. package/.claude/skills/ccw/index/intent-rules.json +0 -136
  116. package/.claude/skills/ccw/index/workflow-chains.json +0 -451
  117. package/.claude/skills/ccw/phases/actions/bugfix.md +0 -218
  118. package/.claude/skills/ccw/phases/actions/coupled.md +0 -194
  119. package/.claude/skills/ccw/phases/actions/docs.md +0 -93
  120. package/.claude/skills/ccw/phases/actions/full.md +0 -154
  121. package/.claude/skills/ccw/phases/actions/issue.md +0 -201
  122. package/.claude/skills/ccw/phases/actions/rapid.md +0 -104
  123. package/.claude/skills/ccw/phases/actions/review-fix.md +0 -84
  124. package/.claude/skills/ccw/phases/actions/tdd.md +0 -66
  125. package/.claude/skills/ccw/phases/actions/ui.md +0 -79
  126. package/.claude/skills/ccw/phases/orchestrator.md +0 -435
  127. package/.claude/skills/ccw/specs/intent-classification.md +0 -336
  128. package/.claude/skills/ccw-help/index/all-agents.json +0 -82
  129. package/.claude/skills/ccw-help/index/all-commands.json +0 -882
  130. package/.claude/skills/ccw-help/index/by-category.json +0 -914
  131. package/.claude/skills/ccw-help/index/by-use-case.json +0 -896
  132. package/.claude/skills/ccw-help/index/command-relationships.json +0 -160
  133. package/.claude/skills/ccw-help/index/essential-commands.json +0 -112
@@ -406,6 +406,7 @@
406
406
  }
407
407
 
408
408
  .collapsible-content {
409
+ display: block;
409
410
  padding: 1rem;
410
411
  background: hsl(var(--muted));
411
412
  }
@@ -1179,3 +1180,3073 @@
1179
1180
  line-height: 1.5;
1180
1181
  }
1181
1182
 
1183
+ /* ===================================
1184
+ Multi-CLI Discussion View Styles
1185
+ =================================== */
1186
+
1187
+ /* Multi-CLI Card (List View) */
1188
+ .multi-cli-card {
1189
+ background: hsl(var(--card));
1190
+ border: 1px solid hsl(var(--border));
1191
+ border-radius: 0.5rem;
1192
+ padding: 1rem;
1193
+ cursor: pointer;
1194
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1195
+ position: relative;
1196
+ }
1197
+
1198
+ .multi-cli-card::before {
1199
+ content: "";
1200
+ position: absolute;
1201
+ inset: 0;
1202
+ border-radius: 0.5rem;
1203
+ border: 2px solid transparent;
1204
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1205
+ }
1206
+
1207
+ .multi-cli-card:hover {
1208
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.5);
1209
+ box-shadow: 0 4px 16px hsl(var(--purple, 280 60% 50%) / 0.15);
1210
+ transform: translateY(-2px);
1211
+ }
1212
+
1213
+ .multi-cli-card:hover::before {
1214
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.3);
1215
+ }
1216
+
1217
+ .multi-cli-card-header {
1218
+ display: flex;
1219
+ align-items: flex-start;
1220
+ justify-content: space-between;
1221
+ gap: 1rem;
1222
+ margin-bottom: 0.75rem;
1223
+ }
1224
+
1225
+ .multi-cli-card-title {
1226
+ font-weight: 600;
1227
+ font-size: 0.95rem;
1228
+ color: hsl(var(--foreground));
1229
+ line-height: 1.4;
1230
+ flex: 1;
1231
+ }
1232
+
1233
+ .multi-cli-card-meta {
1234
+ display: flex;
1235
+ align-items: center;
1236
+ gap: 0.75rem;
1237
+ flex-wrap: wrap;
1238
+ font-size: 0.8rem;
1239
+ color: hsl(var(--muted-foreground));
1240
+ }
1241
+
1242
+ .multi-cli-round-count {
1243
+ display: inline-flex;
1244
+ align-items: center;
1245
+ gap: 0.25rem;
1246
+ padding: 0.25rem 0.5rem;
1247
+ background: hsl(var(--purple-light, 280 60% 95%));
1248
+ color: hsl(var(--purple, 280 60% 50%));
1249
+ border-radius: 0.25rem;
1250
+ font-size: 0.75rem;
1251
+ font-weight: 500;
1252
+ }
1253
+
1254
+ /* Multi-CLI Status Badges */
1255
+ .multi-cli-status {
1256
+ display: inline-flex;
1257
+ align-items: center;
1258
+ gap: 0.25rem;
1259
+ padding: 0.25rem 0.5rem;
1260
+ border-radius: 0.25rem;
1261
+ font-size: 0.75rem;
1262
+ font-weight: 500;
1263
+ }
1264
+
1265
+ .multi-cli-status.converged,
1266
+ .multi-cli-status.decided {
1267
+ background: hsl(var(--success-light, 142 70% 95%));
1268
+ color: hsl(var(--success, 142 70% 45%));
1269
+ }
1270
+
1271
+ .multi-cli-status.analyzing {
1272
+ background: hsl(var(--warning-light, 45 90% 95%));
1273
+ color: hsl(var(--warning, 45 90% 40%));
1274
+ }
1275
+
1276
+ .multi-cli-status.blocked,
1277
+ .multi-cli-status.conflict {
1278
+ background: hsl(var(--destructive) / 0.1);
1279
+ color: hsl(var(--destructive));
1280
+ }
1281
+
1282
+ .multi-cli-status.pending,
1283
+ .multi-cli-status.exploring,
1284
+ .multi-cli-status.initialized {
1285
+ background: hsl(var(--muted));
1286
+ color: hsl(var(--muted-foreground));
1287
+ }
1288
+
1289
+ .multi-cli-status.plan_generated,
1290
+ .multi-cli-status.completed {
1291
+ background: hsl(var(--success-light, 142 70% 95%));
1292
+ color: hsl(var(--success, 142 70% 45%));
1293
+ }
1294
+
1295
+ /* Multi-CLI Detail Page */
1296
+ .multi-cli-detail-page {
1297
+ display: flex;
1298
+ flex-direction: column;
1299
+ gap: 1.5rem;
1300
+ }
1301
+
1302
+ .multi-cli-detail-header {
1303
+ display: flex;
1304
+ align-items: flex-start;
1305
+ justify-content: space-between;
1306
+ gap: 1rem;
1307
+ padding-bottom: 1rem;
1308
+ border-bottom: 1px solid hsl(var(--border));
1309
+ }
1310
+
1311
+ .multi-cli-detail-info {
1312
+ flex: 1;
1313
+ }
1314
+
1315
+ .multi-cli-detail-meta {
1316
+ display: flex;
1317
+ align-items: center;
1318
+ gap: 1rem;
1319
+ flex-wrap: wrap;
1320
+ font-size: 0.85rem;
1321
+ color: hsl(var(--muted-foreground));
1322
+ }
1323
+
1324
+ .multi-cli-detail-meta .info-label {
1325
+ font-weight: 500;
1326
+ color: hsl(var(--muted-foreground));
1327
+ }
1328
+
1329
+ .multi-cli-detail-meta .info-value {
1330
+ color: hsl(var(--foreground));
1331
+ font-weight: 500;
1332
+ }
1333
+
1334
+ .multi-cli-detail-title {
1335
+ font-size: 1.25rem;
1336
+ font-weight: 600;
1337
+ color: hsl(var(--foreground));
1338
+ margin-bottom: 0.5rem;
1339
+ }
1340
+
1341
+ .multi-cli-detail-meta {
1342
+ display: flex;
1343
+ align-items: center;
1344
+ gap: 1rem;
1345
+ flex-wrap: wrap;
1346
+ font-size: 0.85rem;
1347
+ color: hsl(var(--muted-foreground));
1348
+ }
1349
+
1350
+ /* Multi-CLI Tabs */
1351
+ .multi-cli-tabs {
1352
+ display: flex;
1353
+ gap: 0;
1354
+ border-bottom: 1px solid hsl(var(--border));
1355
+ margin-bottom: 1.5rem;
1356
+ overflow-x: auto;
1357
+ background: hsl(var(--muted) / 0.2);
1358
+ padding: 0 0.5rem;
1359
+ border-radius: 0.5rem 0.5rem 0 0;
1360
+ }
1361
+
1362
+ .multi-cli-tab {
1363
+ padding: 0.75rem 1.25rem;
1364
+ font-size: 0.875rem;
1365
+ font-weight: 500;
1366
+ color: hsl(var(--muted-foreground));
1367
+ background: transparent;
1368
+ border: none;
1369
+ border-bottom: 3px solid transparent;
1370
+ cursor: pointer;
1371
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1372
+ white-space: nowrap;
1373
+ border-radius: 0.375rem 0.375rem 0 0;
1374
+ display: flex;
1375
+ align-items: center;
1376
+ gap: 0.5rem;
1377
+ }
1378
+
1379
+ .multi-cli-tab:hover {
1380
+ color: hsl(var(--foreground));
1381
+ background: hsl(var(--hover));
1382
+ border-bottom-color: hsl(var(--purple, 280 60% 50%) / 0.5);
1383
+ }
1384
+
1385
+ .multi-cli-tab.active {
1386
+ color: hsl(var(--purple, 280 60% 50%));
1387
+ border-bottom-color: hsl(var(--purple, 280 60% 50%));
1388
+ background: hsl(var(--purple, 280 60% 50%) / 0.05);
1389
+ font-weight: 600;
1390
+ }
1391
+
1392
+ .multi-cli-tab .tab-icon {
1393
+ width: 1rem;
1394
+ height: 1rem;
1395
+ }
1396
+
1397
+ .multi-cli-tab-content {
1398
+ display: none;
1399
+ animation: fadeIn 0.2s ease;
1400
+ }
1401
+
1402
+ .multi-cli-tab-content.active {
1403
+ display: block;
1404
+ }
1405
+
1406
+ @keyframes fadeIn {
1407
+ from {
1408
+ opacity: 0;
1409
+ transform: translateY(4px);
1410
+ }
1411
+ to {
1412
+ opacity: 1;
1413
+ transform: translateY(0);
1414
+ }
1415
+ }
1416
+
1417
+ /* Multi-CLI Topic Tab */
1418
+ .multi-cli-topic-section {
1419
+ background: hsl(var(--muted) / 0.3);
1420
+ border: 1px solid hsl(var(--border));
1421
+ border-radius: 0.5rem;
1422
+ padding: 1rem;
1423
+ margin-bottom: 1rem;
1424
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
1425
+ }
1426
+
1427
+ .multi-cli-topic-section:hover {
1428
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.3);
1429
+ box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.05);
1430
+ }
1431
+
1432
+ .multi-cli-topic-title {
1433
+ font-size: 1rem;
1434
+ font-weight: 600;
1435
+ color: hsl(var(--foreground));
1436
+ margin-bottom: 0.5rem;
1437
+ display: flex;
1438
+ align-items: center;
1439
+ gap: 0.5rem;
1440
+ letter-spacing: -0.01em;
1441
+ }
1442
+
1443
+ .multi-cli-topic-description {
1444
+ font-size: 0.875rem;
1445
+ color: hsl(var(--foreground));
1446
+ line-height: 1.6;
1447
+ white-space: pre-wrap;
1448
+ }
1449
+
1450
+ /* Topic Meta Container */
1451
+ .topic-meta {
1452
+ display: flex;
1453
+ flex-wrap: wrap;
1454
+ align-items: center;
1455
+ gap: 0.5rem;
1456
+ margin-top: 0.75rem;
1457
+ }
1458
+
1459
+ /* Tag Badge */
1460
+ .tag-badge {
1461
+ display: inline-flex;
1462
+ align-items: center;
1463
+ gap: 0.25rem;
1464
+ padding: 0.25rem 0.5rem;
1465
+ background: hsl(var(--primary) / 0.1);
1466
+ color: hsl(var(--primary));
1467
+ border-radius: 0.25rem;
1468
+ font-size: 0.75rem;
1469
+ font-weight: 500;
1470
+ transition: background 0.2s ease, color 0.2s ease;
1471
+ }
1472
+
1473
+ .tag-badge:hover {
1474
+ background: hsl(var(--primary) / 0.15);
1475
+ }
1476
+
1477
+ /* Additional Multi-CLI Status Variants */
1478
+ .multi-cli-status.plan_generated {
1479
+ background: hsl(var(--success-light, 142 70% 95%));
1480
+ color: hsl(var(--success, 142 70% 45%));
1481
+ }
1482
+
1483
+ .multi-cli-status.initialized,
1484
+ .multi-cli-status.exploring {
1485
+ background: hsl(var(--info-light, 220 80% 95%));
1486
+ color: hsl(var(--info, 220 80% 55%));
1487
+ }
1488
+
1489
+ .multi-cli-status.completed {
1490
+ background: hsl(var(--success-light, 142 70% 95%));
1491
+ color: hsl(var(--success, 142 70% 45%));
1492
+ }
1493
+
1494
+ .multi-cli-complexity-badge {
1495
+ display: inline-flex;
1496
+ align-items: center;
1497
+ gap: 0.25rem;
1498
+ padding: 0.25rem 0.5rem;
1499
+ border-radius: 0.25rem;
1500
+ font-size: 0.75rem;
1501
+ font-weight: 500;
1502
+ }
1503
+
1504
+ .multi-cli-complexity-badge.high {
1505
+ background: hsl(var(--destructive) / 0.1);
1506
+ color: hsl(var(--destructive));
1507
+ }
1508
+
1509
+ .multi-cli-complexity-badge.medium {
1510
+ background: hsl(var(--warning-light, 45 90% 95%));
1511
+ color: hsl(var(--warning, 45 90% 40%));
1512
+ }
1513
+
1514
+ .multi-cli-complexity-badge.low {
1515
+ background: hsl(var(--success-light, 142 70% 95%));
1516
+ color: hsl(var(--success, 142 70% 45%));
1517
+ }
1518
+
1519
+ /* Multi-CLI Files Tab */
1520
+ .multi-cli-files-section {
1521
+ margin-bottom: 1rem;
1522
+ }
1523
+
1524
+ .multi-cli-files-title {
1525
+ font-size: 0.9rem;
1526
+ font-weight: 600;
1527
+ color: hsl(var(--foreground));
1528
+ margin-bottom: 0.75rem;
1529
+ display: flex;
1530
+ align-items: center;
1531
+ gap: 0.5rem;
1532
+ }
1533
+
1534
+ .file-tree {
1535
+ background: hsl(var(--muted) / 0.3);
1536
+ border: 1px solid hsl(var(--border));
1537
+ border-radius: 0.5rem;
1538
+ padding: 0.75rem;
1539
+ }
1540
+
1541
+ .file-tree-node {
1542
+ display: flex;
1543
+ align-items: center;
1544
+ gap: 0.5rem;
1545
+ padding: 0.375rem 0.5rem;
1546
+ font-size: 0.85rem;
1547
+ border-radius: 0.25rem;
1548
+ transition: background 0.15s;
1549
+ }
1550
+
1551
+ .file-tree-node:hover {
1552
+ background: hsl(var(--hover));
1553
+ }
1554
+
1555
+ .file-tree-node.directory {
1556
+ color: hsl(var(--primary));
1557
+ font-weight: 500;
1558
+ }
1559
+
1560
+ .file-tree-node.file {
1561
+ color: hsl(var(--foreground));
1562
+ padding-left: 1.5rem;
1563
+ }
1564
+
1565
+ .file-tree-node .file-icon {
1566
+ width: 1rem;
1567
+ height: 1rem;
1568
+ color: hsl(var(--muted-foreground));
1569
+ }
1570
+
1571
+ .file-tree-node.directory .file-icon {
1572
+ color: hsl(var(--primary));
1573
+ }
1574
+
1575
+ .file-purpose {
1576
+ font-size: 0.75rem;
1577
+ color: hsl(var(--muted-foreground));
1578
+ margin-left: auto;
1579
+ }
1580
+
1581
+ /* Multi-CLI Planning Tab */
1582
+ .multi-cli-planning-section {
1583
+ margin-bottom: 1.5rem;
1584
+ }
1585
+
1586
+ .planning-section-title {
1587
+ font-size: 0.9rem;
1588
+ font-weight: 600;
1589
+ color: hsl(var(--foreground));
1590
+ margin-bottom: 0.75rem;
1591
+ display: flex;
1592
+ align-items: center;
1593
+ gap: 0.5rem;
1594
+ }
1595
+
1596
+ .requirements-list {
1597
+ display: flex;
1598
+ flex-direction: column;
1599
+ gap: 0.5rem;
1600
+ }
1601
+
1602
+ .requirement-item {
1603
+ background: hsl(var(--card));
1604
+ border: 1px solid hsl(var(--border));
1605
+ border-radius: 0.5rem;
1606
+ padding: 0.75rem;
1607
+ }
1608
+
1609
+ .requirement-header {
1610
+ display: flex;
1611
+ align-items: center;
1612
+ gap: 0.5rem;
1613
+ margin-bottom: 0.5rem;
1614
+ }
1615
+
1616
+ .requirement-id {
1617
+ font-weight: 600;
1618
+ font-size: 0.8rem;
1619
+ color: hsl(var(--primary));
1620
+ }
1621
+
1622
+ .requirement-priority {
1623
+ padding: 0.125rem 0.375rem;
1624
+ border-radius: 0.25rem;
1625
+ font-size: 0.7rem;
1626
+ font-weight: 500;
1627
+ }
1628
+
1629
+ .requirement-priority.high {
1630
+ background: hsl(var(--destructive) / 0.1);
1631
+ color: hsl(var(--destructive));
1632
+ }
1633
+
1634
+ .requirement-priority.medium {
1635
+ background: hsl(var(--warning-light, 45 90% 95%));
1636
+ color: hsl(var(--warning, 45 90% 40%));
1637
+ }
1638
+
1639
+ .requirement-priority.low {
1640
+ background: hsl(var(--success-light, 142 70% 95%));
1641
+ color: hsl(var(--success, 142 70% 45%));
1642
+ }
1643
+
1644
+ .requirement-title {
1645
+ font-size: 0.875rem;
1646
+ font-weight: 500;
1647
+ color: hsl(var(--foreground));
1648
+ margin-bottom: 0.25rem;
1649
+ }
1650
+
1651
+ .requirement-description {
1652
+ font-size: 0.8rem;
1653
+ color: hsl(var(--muted-foreground));
1654
+ line-height: 1.5;
1655
+ }
1656
+
1657
+ .impact-items {
1658
+ display: flex;
1659
+ flex-wrap: wrap;
1660
+ gap: 0.5rem;
1661
+ margin-top: 0.5rem;
1662
+ }
1663
+
1664
+ .impact-item {
1665
+ display: inline-flex;
1666
+ align-items: center;
1667
+ gap: 0.25rem;
1668
+ padding: 0.25rem 0.5rem;
1669
+ background: hsl(var(--muted));
1670
+ border-radius: 0.25rem;
1671
+ font-size: 0.75rem;
1672
+ color: hsl(var(--foreground));
1673
+ }
1674
+
1675
+ .impact-item .impact-icon {
1676
+ width: 0.875rem;
1677
+ height: 0.875rem;
1678
+ color: hsl(var(--muted-foreground));
1679
+ }
1680
+
1681
+ /* Multi-CLI Decision Tab */
1682
+ .multi-cli-decision-section {
1683
+ margin-bottom: 1.5rem;
1684
+ }
1685
+
1686
+ .decision-section-title {
1687
+ font-size: 0.9rem;
1688
+ font-weight: 600;
1689
+ color: hsl(var(--foreground));
1690
+ margin-bottom: 0.75rem;
1691
+ display: flex;
1692
+ align-items: center;
1693
+ gap: 0.5rem;
1694
+ }
1695
+
1696
+ .solutions-grid {
1697
+ display: flex;
1698
+ flex-direction: column;
1699
+ gap: 0.75rem;
1700
+ }
1701
+
1702
+ /* Unified Solution Card - used in both Decision and Rounds tabs */
1703
+ .solution-card {
1704
+ background: hsl(var(--card));
1705
+ border: 1px solid hsl(var(--border));
1706
+ border-radius: 0.5rem;
1707
+ overflow: hidden;
1708
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
1709
+ }
1710
+
1711
+ .solution-card:hover {
1712
+ border-color: hsl(var(--primary) / 0.3);
1713
+ box-shadow: 0 4px 12px hsla(var(--primary), 0.1);
1714
+ transform: translateY(-1px);
1715
+ }
1716
+
1717
+ .solution-card.selected {
1718
+ border-color: hsl(var(--success, 142 70% 45%));
1719
+ background: hsl(var(--success, 142 70% 45%) / 0.05);
1720
+ box-shadow: 0 0 0 6px hsl(var(--success, 142 70% 45%) / 0.15);
1721
+ }
1722
+
1723
+ .solution-card.rejected {
1724
+ border-color: hsl(var(--destructive) / 0.5);
1725
+ background: hsl(var(--destructive) / 0.03);
1726
+ opacity: 0.7;
1727
+ text-decoration: line-through;
1728
+ }
1729
+
1730
+ .solution-header {
1731
+ display: flex;
1732
+ align-items: center;
1733
+ justify-content: space-between;
1734
+ gap: 1rem;
1735
+ margin-bottom: 0.75rem;
1736
+ padding: 0.75rem 1rem;
1737
+ background: hsl(var(--muted) / 0.2);
1738
+ border-bottom: 1px solid hsl(var(--border));
1739
+ }
1740
+
1741
+ .solution-title {
1742
+ font-weight: 600;
1743
+ font-size: 0.95rem;
1744
+ color: hsl(var(--foreground));
1745
+ display: flex;
1746
+ align-items: center;
1747
+ gap: 0.5rem;
1748
+ }
1749
+
1750
+ .solution-status {
1751
+ padding: 0.25rem 0.5rem;
1752
+ border-radius: 0.25rem;
1753
+ font-size: 0.75rem;
1754
+ font-weight: 500;
1755
+ }
1756
+
1757
+ .solution-status.selected {
1758
+ background: hsl(var(--success, 142 70% 45%) / 0.15);
1759
+ color: hsl(var(--success, 142 70% 45%));
1760
+ }
1761
+
1762
+ .solution-status.rejected {
1763
+ background: hsl(var(--destructive) / 0.1);
1764
+ color: hsl(var(--destructive));
1765
+ }
1766
+
1767
+ .solution-status.considering {
1768
+ background: hsl(var(--warning-light, 45 90% 95%));
1769
+ color: hsl(var(--warning, 45 90% 40%));
1770
+ }
1771
+
1772
+ .solution-description {
1773
+ font-size: 0.85rem;
1774
+ color: hsl(var(--foreground));
1775
+ line-height: 1.6;
1776
+ margin-bottom: 0.75rem;
1777
+ }
1778
+
1779
+ .solution-meta {
1780
+ display: flex;
1781
+ align-items: center;
1782
+ gap: 1rem;
1783
+ flex-wrap: wrap;
1784
+ }
1785
+
1786
+ .solution-meta-item {
1787
+ display: flex;
1788
+ align-items: center;
1789
+ gap: 0.25rem;
1790
+ font-size: 0.8rem;
1791
+ color: hsl(var(--muted-foreground));
1792
+ }
1793
+
1794
+ .confidence-meter {
1795
+ display: flex;
1796
+ align-items: center;
1797
+ gap: 0.5rem;
1798
+ }
1799
+
1800
+ .confidence-bar {
1801
+ width: 60px;
1802
+ height: 6px;
1803
+ background: hsl(var(--muted));
1804
+ border-radius: 3px;
1805
+ overflow: hidden;
1806
+ }
1807
+
1808
+ .confidence-fill {
1809
+ height: 100%;
1810
+ border-radius: 3px;
1811
+ transition: width 0.3s ease;
1812
+ }
1813
+
1814
+ .confidence-fill.high {
1815
+ background: hsl(var(--success, 142 70% 45%));
1816
+ }
1817
+
1818
+ .confidence-fill.medium {
1819
+ background: hsl(var(--warning, 45 90% 50%));
1820
+ }
1821
+
1822
+ .confidence-fill.low {
1823
+ background: hsl(var(--destructive));
1824
+ }
1825
+
1826
+ .confidence-value {
1827
+ font-size: 0.75rem;
1828
+ font-weight: 500;
1829
+ color: hsl(var(--foreground));
1830
+ }
1831
+
1832
+ /* Multi-CLI Timeline Tab */
1833
+ .multi-cli-timeline {
1834
+ display: flex;
1835
+ flex-direction: column;
1836
+ gap: 0;
1837
+ }
1838
+
1839
+ .timeline-event {
1840
+ display: flex;
1841
+ gap: 1.25rem;
1842
+ position: relative;
1843
+ margin-bottom: 0.25rem;
1844
+ }
1845
+
1846
+ .timeline-marker {
1847
+ display: flex;
1848
+ flex-direction: column;
1849
+ align-items: center;
1850
+ flex-shrink: 0;
1851
+ width: 2.25rem;
1852
+ }
1853
+
1854
+ .timeline-dot {
1855
+ width: 1.5rem;
1856
+ height: 1.5rem;
1857
+ border-radius: 50%;
1858
+ display: flex;
1859
+ align-items: center;
1860
+ justify-content: center;
1861
+ z-index: 1;
1862
+ flex-shrink: 0;
1863
+ box-shadow: 0 0 0 3px currentColor;
1864
+ transition: all 0.2s ease;
1865
+ }
1866
+
1867
+ .timeline-dot:hover {
1868
+ transform: scale(1.2);
1869
+ box-shadow: 0 0 0 8px currentColor;
1870
+ }
1871
+
1872
+ .timeline-dot.proposal {
1873
+ background: hsl(var(--primary));
1874
+ color: white;
1875
+ }
1876
+
1877
+ .timeline-dot.analysis {
1878
+ background: hsl(var(--info, 220 80% 55%));
1879
+ color: white;
1880
+ }
1881
+
1882
+ .timeline-dot.decision {
1883
+ background: hsl(var(--success, 142 70% 45%));
1884
+ color: white;
1885
+ }
1886
+
1887
+ .timeline-dot.conflict {
1888
+ background: hsl(var(--warning, 45 90% 50%));
1889
+ color: hsl(var(--foreground));
1890
+ }
1891
+
1892
+ .timeline-dot.resolution {
1893
+ background: hsl(var(--purple, 280 60% 50%));
1894
+ color: white;
1895
+ }
1896
+
1897
+ .timeline-dot i {
1898
+ width: 0.75rem;
1899
+ height: 0.75rem;
1900
+ }
1901
+
1902
+ .timeline-line {
1903
+ width: 2px;
1904
+ flex: 1;
1905
+ min-height: 1rem;
1906
+ background: hsl(var(--border));
1907
+ margin: 0.25rem 0;
1908
+ }
1909
+
1910
+ .timeline-content {
1911
+ flex: 1;
1912
+ background: hsl(var(--card));
1913
+ border: 1px solid hsl(var(--border));
1914
+ border-radius: 0.5rem;
1915
+ padding: 1rem;
1916
+ margin-bottom: 0.75rem;
1917
+ transition: all 0.2s ease;
1918
+ }
1919
+
1920
+ .timeline-content:hover {
1921
+ border-color: hsl(var(--primary) / 0.4);
1922
+ box-shadow: 0 2px 8px hsl(var(--primary) / 0.05);
1923
+ transform: translateX(4px);
1924
+ }
1925
+
1926
+ .timeline-event-header {
1927
+ display: flex;
1928
+ align-items: center;
1929
+ justify-content: space-between;
1930
+ gap: 0.5rem;
1931
+ margin-bottom: 0.5rem;
1932
+ }
1933
+
1934
+ .timeline-event-type {
1935
+ font-weight: 600;
1936
+ font-size: 0.85rem;
1937
+ color: hsl(var(--foreground));
1938
+ }
1939
+
1940
+ .timeline-event-time {
1941
+ font-size: 0.75rem;
1942
+ color: hsl(var(--muted-foreground));
1943
+ }
1944
+
1945
+ .timeline-event-agent {
1946
+ font-size: 0.75rem;
1947
+ color: hsl(var(--purple, 280 60% 50%));
1948
+ margin-bottom: 0.25rem;
1949
+ }
1950
+
1951
+ .timeline-event-description {
1952
+ font-size: 0.85rem;
1953
+ color: hsl(var(--foreground));
1954
+ line-height: 1.5;
1955
+ }
1956
+
1957
+ /* Multi-CLI Rounds Tab */
1958
+ .multi-cli-rounds-nav {
1959
+ display: flex;
1960
+ gap: 0.5rem;
1961
+ flex-wrap: wrap;
1962
+ margin-bottom: 1rem;
1963
+ padding-bottom: 1rem;
1964
+ border-bottom: 1px solid hsl(var(--border));
1965
+ }
1966
+
1967
+ .round-nav-btn {
1968
+ padding: 0.5rem 1rem;
1969
+ background: hsl(var(--muted));
1970
+ border: 1px solid hsl(var(--border));
1971
+ border-radius: 0.375rem;
1972
+ font-size: 0.85rem;
1973
+ font-weight: 500;
1974
+ color: hsl(var(--foreground));
1975
+ cursor: pointer;
1976
+ transition: all 0.2s ease;
1977
+ }
1978
+
1979
+ .round-nav-btn:hover {
1980
+ background: hsl(var(--hover));
1981
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.5);
1982
+ }
1983
+
1984
+ .round-nav-btn.active {
1985
+ background: hsl(var(--purple, 280 60% 50%));
1986
+ border-color: hsl(var(--purple, 280 60% 50%));
1987
+ color: white;
1988
+ }
1989
+
1990
+ .round-content {
1991
+ background: hsl(var(--muted) / 0.3);
1992
+ border: 1px solid hsl(var(--border));
1993
+ border-radius: 0.5rem;
1994
+ padding: 1rem;
1995
+ }
1996
+
1997
+ .round-header {
1998
+ display: flex;
1999
+ align-items: center;
2000
+ justify-content: space-between;
2001
+ gap: 1rem;
2002
+ margin-bottom: 1rem;
2003
+ padding-bottom: 0.75rem;
2004
+ border-bottom: 1px solid hsl(var(--border));
2005
+ }
2006
+
2007
+ .round-title {
2008
+ font-weight: 600;
2009
+ font-size: 1rem;
2010
+ color: hsl(var(--foreground));
2011
+ }
2012
+
2013
+ .round-timestamp {
2014
+ font-size: 0.8rem;
2015
+ color: hsl(var(--muted-foreground));
2016
+ }
2017
+
2018
+ .round-section {
2019
+ margin-bottom: 1rem;
2020
+ }
2021
+
2022
+ .round-section:last-child {
2023
+ margin-bottom: 0;
2024
+ }
2025
+
2026
+ .round-section-title {
2027
+ font-size: 0.85rem;
2028
+ font-weight: 600;
2029
+ color: hsl(var(--foreground));
2030
+ margin-bottom: 0.5rem;
2031
+ display: flex;
2032
+ align-items: center;
2033
+ gap: 0.5rem;
2034
+ }
2035
+
2036
+ .round-agents {
2037
+ display: flex;
2038
+ flex-direction: column;
2039
+ gap: 0.5rem;
2040
+ }
2041
+
2042
+ .round-agent-item {
2043
+ background: hsl(var(--card));
2044
+ border: 1px solid hsl(var(--border));
2045
+ border-radius: 0.375rem;
2046
+ padding: 0.75rem;
2047
+ }
2048
+
2049
+ .round-agent-name {
2050
+ font-weight: 500;
2051
+ font-size: 0.85rem;
2052
+ color: hsl(var(--purple, 280 60% 50%));
2053
+ margin-bottom: 0.25rem;
2054
+ }
2055
+
2056
+ .round-agent-response {
2057
+ font-size: 0.8rem;
2058
+ color: hsl(var(--foreground));
2059
+ line-height: 1.5;
2060
+ white-space: pre-wrap;
2061
+ }
2062
+
2063
+ .round-convergence {
2064
+ display: flex;
2065
+ align-items: center;
2066
+ gap: 0.75rem;
2067
+ padding: 0.75rem;
2068
+ background: hsl(var(--card));
2069
+ border: 1px solid hsl(var(--border));
2070
+ border-radius: 0.375rem;
2071
+ }
2072
+
2073
+ .convergence-indicator {
2074
+ font-weight: 500;
2075
+ font-size: 0.85rem;
2076
+ }
2077
+
2078
+ .convergence-indicator.converged {
2079
+ color: hsl(var(--success, 142 70% 45%));
2080
+ }
2081
+
2082
+ .convergence-indicator.not-converged {
2083
+ color: hsl(var(--warning, 45 90% 40%));
2084
+ }
2085
+
2086
+ .round-loading {
2087
+ display: flex;
2088
+ align-items: center;
2089
+ justify-content: center;
2090
+ padding: 2rem;
2091
+ color: hsl(var(--muted-foreground));
2092
+ font-size: 0.9rem;
2093
+ }
2094
+
2095
+ /* Multi-CLI Empty States */
2096
+ .multi-cli-empty {
2097
+ display: flex;
2098
+ flex-direction: column;
2099
+ align-items: center;
2100
+ justify-content: center;
2101
+ padding: 4rem 2rem;
2102
+ text-align: center;
2103
+ color: hsl(var(--muted-foreground));
2104
+ background: hsl(var(--muted) / 0.2);
2105
+ border: 1px dashed hsl(var(--border));
2106
+ border-radius: 0.75rem;
2107
+ }
2108
+
2109
+ .multi-cli-empty-icon {
2110
+ width: 3.5rem;
2111
+ height: 3.5rem;
2112
+ margin-bottom: 1.25rem;
2113
+ color: hsl(var(--purple, 280 60% 50%) / 0.4);
2114
+ animation: float 3s ease-in-out infinite;
2115
+ }
2116
+
2117
+ .multi-cli-empty-title {
2118
+ font-size: 1rem;
2119
+ font-weight: 500;
2120
+ margin-bottom: 0.5rem;
2121
+ color: hsl(var(--foreground));
2122
+ }
2123
+
2124
+ .multi-cli-empty-description {
2125
+ font-size: 0.875rem;
2126
+ color: hsl(var(--muted-foreground));
2127
+ line-height: 1.6;
2128
+ }
2129
+
2130
+ @keyframes float {
2131
+ 0%, 100% {
2132
+ transform: translateY(0);
2133
+ }
2134
+ 50% {
2135
+ transform: translateY(-8px);
2136
+ }
2137
+ }
2138
+
2139
+ /* ===================================
2140
+ Multi-CLI Detail Page Extended Styles
2141
+ =================================== */
2142
+
2143
+ /* Scope Lists */
2144
+ .scope-list {
2145
+ display: flex;
2146
+ flex-direction: column;
2147
+ gap: 0.5rem;
2148
+ margin: 0;
2149
+ padding-left: 0;
2150
+ font-size: 0.85rem;
2151
+ }
2152
+
2153
+ .scope-list li {
2154
+ padding: 0.5rem 0.75rem;
2155
+ background: hsl(var(--card));
2156
+ border: 1px solid hsl(var(--border));
2157
+ border-radius: 0.375rem;
2158
+ font-family: var(--font-mono);
2159
+ color: hsl(var(--foreground));
2160
+ line-height: 1.5;
2161
+ transition: all 0.2s ease;
2162
+ }
2163
+
2164
+ .scope-list li:hover {
2165
+ border-color: hsl(var(--primary) / 0.5);
2166
+ transform: translateX(4px);
2167
+ }
2168
+
2169
+ .scope-list.excluded li {
2170
+ background: hsl(var(--destructive) / 0.05);
2171
+ border-color: hsl(var(--destructive) / 0.2);
2172
+ color: hsl(var(--muted-foreground));
2173
+ text-decoration: line-through;
2174
+ opacity: 0.7;
2175
+ }
2176
+
2177
+ .scope-list.excluded li:hover {
2178
+ border-color: hsl(var(--destructive) / 0.4);
2179
+ }
2180
+
2181
+ /* Acceptance List */
2182
+ .acceptance-list {
2183
+ display: flex;
2184
+ flex-direction: column;
2185
+ gap: 0.5rem;
2186
+ }
2187
+
2188
+ .acceptance-item {
2189
+ display: flex;
2190
+ align-items: flex-start;
2191
+ gap: 0.75rem;
2192
+ padding: 0.75rem;
2193
+ background: hsl(var(--card));
2194
+ border: 1px solid hsl(var(--border));
2195
+ border-radius: 0.375rem;
2196
+ transition: border-color 0.2s ease;
2197
+ }
2198
+
2199
+ .acceptance-item:hover {
2200
+ border-color: hsl(var(--primary) / 0.3);
2201
+ }
2202
+
2203
+ .acceptance-item.met {
2204
+ border-color: hsl(var(--success, 142 70% 45%) / 0.5);
2205
+ background: hsl(var(--success, 142 70% 45%) / 0.03);
2206
+ }
2207
+
2208
+ .acceptance-item.unmet {
2209
+ border-color: hsl(var(--destructive) / 0.3);
2210
+ background: hsl(var(--destructive) / 0.02);
2211
+ }
2212
+
2213
+ .acceptance-check {
2214
+ display: flex;
2215
+ align-items: center;
2216
+ justify-content: center;
2217
+ width: 1.25rem;
2218
+ height: 1.25rem;
2219
+ border-radius: 0.25rem;
2220
+ flex-shrink: 0;
2221
+ margin-top: 0.125rem;
2222
+ }
2223
+
2224
+ .acceptance-item.met .acceptance-check {
2225
+ background: hsl(var(--success, 142 70% 45%));
2226
+ color: white;
2227
+ }
2228
+
2229
+ .acceptance-item.unmet .acceptance-check {
2230
+ background: hsl(var(--muted));
2231
+ border: 1px solid hsl(var(--border));
2232
+ color: hsl(var(--muted-foreground));
2233
+ }
2234
+
2235
+ .acceptance-check i {
2236
+ width: 0.75rem;
2237
+ height: 0.75rem;
2238
+ }
2239
+
2240
+ .acceptance-id {
2241
+ font-weight: 600;
2242
+ font-size: 0.75rem;
2243
+ color: hsl(var(--primary));
2244
+ margin-bottom: 0.25rem;
2245
+ }
2246
+
2247
+ .acceptance-desc {
2248
+ font-size: 0.85rem;
2249
+ color: hsl(var(--foreground));
2250
+ line-height: 1.5;
2251
+ }
2252
+
2253
+ /* Decision Status Bar */
2254
+ .decision-status-bar {
2255
+ display: flex;
2256
+ align-items: center;
2257
+ justify-content: space-between;
2258
+ gap: 1rem;
2259
+ padding: 1rem;
2260
+ background: hsl(var(--muted) / 0.3);
2261
+ border: 1px solid hsl(var(--border));
2262
+ border-radius: 0.5rem;
2263
+ margin-bottom: 1rem;
2264
+ }
2265
+
2266
+ .decision-status-bar.converged {
2267
+ border-color: hsl(var(--success, 142 70% 45%) / 0.5);
2268
+ background: hsl(var(--success, 142 70% 45%) / 0.05);
2269
+ }
2270
+
2271
+ .decision-status-bar.divergent {
2272
+ border-color: hsl(var(--warning, 45 90% 50%) / 0.5);
2273
+ background: hsl(var(--warning, 45 90% 50%) / 0.05);
2274
+ }
2275
+
2276
+ .decision-summary {
2277
+ display: flex;
2278
+ flex-direction: column;
2279
+ gap: 0.5rem;
2280
+ flex: 1;
2281
+ }
2282
+
2283
+ .decision-summary-text {
2284
+ font-size: 0.875rem;
2285
+ color: hsl(var(--foreground));
2286
+ line-height: 1.5;
2287
+ }
2288
+
2289
+ .decision-confidence {
2290
+ display: flex;
2291
+ align-items: center;
2292
+ gap: 0.75rem;
2293
+ }
2294
+
2295
+ .decision-confidence-label {
2296
+ font-size: 0.75rem;
2297
+ font-weight: 500;
2298
+ color: hsl(var(--muted-foreground));
2299
+ }
2300
+
2301
+ .decision-confidence-bar {
2302
+ width: 100px;
2303
+ height: 8px;
2304
+ background: hsl(var(--muted));
2305
+ border-radius: 4px;
2306
+ overflow: hidden;
2307
+ }
2308
+
2309
+ .decision-confidence-fill {
2310
+ height: 100%;
2311
+ border-radius: 4px;
2312
+ transition: width 0.3s ease;
2313
+ }
2314
+
2315
+ .decision-status-bar.converged .decision-confidence-fill {
2316
+ background: hsl(var(--success, 142 70% 45%));
2317
+ }
2318
+
2319
+ .decision-status-bar.divergent .decision-confidence-fill {
2320
+ background: hsl(var(--warning, 45 90% 50%));
2321
+ }
2322
+
2323
+ .decision-confidence-value {
2324
+ font-size: 0.8rem;
2325
+ font-weight: 600;
2326
+ color: hsl(var(--foreground));
2327
+ }
2328
+
2329
+ /* Pros and Cons Lists */
2330
+ .pros-list,
2331
+ .cons-list {
2332
+ display: flex;
2333
+ flex-direction: column;
2334
+ gap: 0.5rem;
2335
+ margin: 0;
2336
+ padding: 0;
2337
+ list-style: none;
2338
+ }
2339
+
2340
+ .pro-item,
2341
+ .con-item {
2342
+ display: flex;
2343
+ align-items: flex-start;
2344
+ gap: 0.75rem;
2345
+ padding: 0.75rem 1rem;
2346
+ border-radius: 0.5rem;
2347
+ font-size: 0.85rem;
2348
+ line-height: 1.6;
2349
+ color: hsl(var(--foreground));
2350
+ transition: all 0.2s ease;
2351
+ position: relative;
2352
+ }
2353
+
2354
+ .pro-item {
2355
+ background: hsl(142 71% 45% / 0.08);
2356
+ border-left: 4px solid #10b981;
2357
+ }
2358
+
2359
+ .pro-item:hover {
2360
+ background: hsl(142 71% 45% / 0.12);
2361
+ transform: translateX(4px);
2362
+ }
2363
+
2364
+ .pro-item::before {
2365
+ content: "+";
2366
+ font-weight: 700;
2367
+ color: #10b981;
2368
+ flex-shrink: 0;
2369
+ width: 1.25rem;
2370
+ height: 1.25rem;
2371
+ display: flex;
2372
+ align-items: center;
2373
+ justify-content: center;
2374
+ background: #10b981;
2375
+ color: white;
2376
+ border-radius: 50%;
2377
+ font-size: 1rem;
2378
+ line-height: 1;
2379
+ }
2380
+
2381
+ .con-item {
2382
+ background: hsl(0 84% 60% / 0.08);
2383
+ border-left: 4px solid #ef4444;
2384
+ }
2385
+
2386
+ .con-item:hover {
2387
+ background: hsl(0 84% 60% / 0.12);
2388
+ transform: translateX(4px);
2389
+ }
2390
+
2391
+ .con-item::before {
2392
+ content: "-";
2393
+ font-weight: 700;
2394
+ color: #ef4444;
2395
+ flex-shrink: 0;
2396
+ width: 1.25rem;
2397
+ height: 1.25rem;
2398
+ display: flex;
2399
+ align-items: center;
2400
+ justify-content: center;
2401
+ background: #ef4444;
2402
+ color: white;
2403
+ border-radius: 50%;
2404
+ font-size: 1.25rem;
2405
+ line-height: 1;
2406
+ }
2407
+
2408
+ /* Rounds Navigation */
2409
+ .rounds-nav {
2410
+ display: flex;
2411
+ gap: 0.5rem;
2412
+ flex-wrap: wrap;
2413
+ padding-bottom: 1rem;
2414
+ border-bottom: 1px solid hsl(var(--border));
2415
+ margin-bottom: 1rem;
2416
+ background: hsl(var(--muted) / 0.2);
2417
+ padding: 0.5rem;
2418
+ border-radius: 0.5rem;
2419
+ }
2420
+
2421
+ .round-item {
2422
+ padding: 0.5rem 1rem;
2423
+ background: hsl(var(--card));
2424
+ border: 1px solid hsl(var(--border));
2425
+ border-radius: 0.5rem;
2426
+ font-size: 0.8rem;
2427
+ font-weight: 500;
2428
+ color: hsl(var(--muted-foreground));
2429
+ cursor: pointer;
2430
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2431
+ display: flex;
2432
+ align-items: center;
2433
+ gap: 0.375rem;
2434
+ }
2435
+
2436
+ .round-item:hover {
2437
+ background: hsl(var(--hover));
2438
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.5);
2439
+ color: hsl(var(--foreground));
2440
+ transform: translateY(-2px);
2441
+ box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.1);
2442
+ }
2443
+
2444
+ .round-item.active {
2445
+ background: hsl(var(--purple, 280 60% 50%));
2446
+ border-color: hsl(var(--purple, 280 60% 50%));
2447
+ color: white;
2448
+ box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.25);
2449
+ }
2450
+
2451
+ .round-item i {
2452
+ width: 0.875rem;
2453
+ height: 0.875rem;
2454
+ }
2455
+
2456
+ /* Timeline Event Parts */
2457
+ .event-type {
2458
+ display: inline-block;
2459
+ padding: 0.125rem 0.5rem;
2460
+ background: hsl(var(--primary) / 0.1);
2461
+ color: hsl(var(--primary));
2462
+ border-radius: 0.25rem;
2463
+ font-size: 0.7rem;
2464
+ font-weight: 600;
2465
+ text-transform: uppercase;
2466
+ letter-spacing: 0.025em;
2467
+ }
2468
+
2469
+ .event-type.proposal {
2470
+ background: hsl(var(--primary) / 0.1);
2471
+ color: hsl(var(--primary));
2472
+ }
2473
+
2474
+ .event-type.analysis {
2475
+ background: hsl(var(--info, 220 80% 55%) / 0.1);
2476
+ color: hsl(var(--info, 220 80% 55%));
2477
+ }
2478
+
2479
+ .event-type.decision {
2480
+ background: hsl(var(--success, 142 70% 45%) / 0.1);
2481
+ color: hsl(var(--success, 142 70% 45%));
2482
+ }
2483
+
2484
+ .event-type.conflict {
2485
+ background: hsl(var(--warning, 45 90% 50%) / 0.1);
2486
+ color: hsl(var(--warning, 45 90% 40%));
2487
+ }
2488
+
2489
+ .event-type.resolution {
2490
+ background: hsl(var(--purple, 280 60% 50%) / 0.1);
2491
+ color: hsl(var(--purple, 280 60% 50%));
2492
+ }
2493
+
2494
+ .event-contributor {
2495
+ display: inline-flex;
2496
+ align-items: center;
2497
+ gap: 0.25rem;
2498
+ font-size: 0.8rem;
2499
+ font-weight: 500;
2500
+ color: hsl(var(--purple, 280 60% 50%));
2501
+ }
2502
+
2503
+ .event-contributor i {
2504
+ width: 0.875rem;
2505
+ height: 0.875rem;
2506
+ }
2507
+
2508
+ .event-summary {
2509
+ font-size: 0.875rem;
2510
+ font-weight: 500;
2511
+ color: hsl(var(--foreground));
2512
+ line-height: 1.5;
2513
+ margin: 0.5rem 0;
2514
+ }
2515
+
2516
+ .event-evidence {
2517
+ font-size: 0.8rem;
2518
+ color: hsl(var(--muted-foreground));
2519
+ line-height: 1.5;
2520
+ padding: 0.5rem 0.75rem;
2521
+ background: hsl(var(--muted) / 0.5);
2522
+ border-radius: 0.375rem;
2523
+ border-left: 2px solid hsl(var(--border));
2524
+ margin-top: 0.5rem;
2525
+ }
2526
+
2527
+ .event-evidence code {
2528
+ font-size: 0.75rem;
2529
+ padding: 0.125rem 0.375rem;
2530
+ background: hsl(var(--muted));
2531
+ border-radius: 0.25rem;
2532
+ color: hsl(var(--primary));
2533
+ }
2534
+
2535
+ /* File Tree List */
2536
+ .file-tree-list {
2537
+ display: flex;
2538
+ flex-direction: column;
2539
+ gap: 0.25rem;
2540
+ padding: 0.5rem;
2541
+ background: hsl(var(--card));
2542
+ border: 1px solid hsl(var(--border));
2543
+ border-radius: 0.375rem;
2544
+ }
2545
+
2546
+ /* Impact List */
2547
+ .impact-list {
2548
+ display: flex;
2549
+ flex-direction: column;
2550
+ gap: 0.5rem;
2551
+ padding: 0.5rem;
2552
+ background: hsl(var(--card));
2553
+ border: 1px solid hsl(var(--border));
2554
+ border-radius: 0.375rem;
2555
+ }
2556
+
2557
+ .impact-item {
2558
+ display: flex;
2559
+ flex-direction: column;
2560
+ gap: 0.375rem;
2561
+ padding: 0.75rem;
2562
+ background: hsl(var(--muted) / 0.3);
2563
+ border-radius: 0.375rem;
2564
+ border-left: 3px solid hsl(var(--warning));
2565
+ }
2566
+
2567
+ .impact-item.impact-high {
2568
+ border-left-color: hsl(var(--destructive));
2569
+ }
2570
+
2571
+ .impact-item.impact-medium {
2572
+ border-left-color: hsl(var(--warning));
2573
+ }
2574
+
2575
+ .impact-item.impact-low {
2576
+ border-left-color: hsl(var(--success));
2577
+ }
2578
+
2579
+ .impact-header {
2580
+ display: flex;
2581
+ align-items: center;
2582
+ gap: 0.5rem;
2583
+ flex-wrap: wrap;
2584
+ }
2585
+
2586
+ .impact-file {
2587
+ font-family: var(--font-mono);
2588
+ font-size: 0.85rem;
2589
+ color: hsl(var(--foreground));
2590
+ background: hsl(var(--muted));
2591
+ padding: 0.125rem 0.375rem;
2592
+ border-radius: 0.25rem;
2593
+ }
2594
+
2595
+ .impact-line {
2596
+ font-size: 0.8rem;
2597
+ color: hsl(var(--muted-foreground));
2598
+ }
2599
+
2600
+ .impact-score {
2601
+ font-size: 0.75rem;
2602
+ font-weight: 500;
2603
+ padding: 0.125rem 0.5rem;
2604
+ border-radius: 0.25rem;
2605
+ text-transform: uppercase;
2606
+ }
2607
+
2608
+ .impact-score.high {
2609
+ background: hsl(var(--destructive) / 0.15);
2610
+ color: hsl(var(--destructive));
2611
+ }
2612
+
2613
+ .impact-score.medium {
2614
+ background: hsl(var(--warning) / 0.15);
2615
+ color: hsl(var(--warning));
2616
+ }
2617
+
2618
+ .impact-score.low {
2619
+ background: hsl(var(--success) / 0.15);
2620
+ color: hsl(var(--success));
2621
+ }
2622
+
2623
+ .impact-reason {
2624
+ font-size: 0.85rem;
2625
+ color: hsl(var(--muted-foreground));
2626
+ line-height: 1.5;
2627
+ padding-left: 0.25rem;
2628
+ }
2629
+
2630
+ /* Dependencies List */
2631
+ .deps-list {
2632
+ display: flex;
2633
+ flex-direction: column;
2634
+ gap: 0.5rem;
2635
+ padding: 0.5rem;
2636
+ background: hsl(var(--card));
2637
+ border: 1px solid hsl(var(--border));
2638
+ border-radius: 0.375rem;
2639
+ }
2640
+
2641
+ /* Timeline Connecting Line */
2642
+ .timeline-event::before {
2643
+ content: "";
2644
+ position: absolute;
2645
+ left: 0.9375rem;
2646
+ top: 1.75rem;
2647
+ bottom: -0.5rem;
2648
+ width: 2px;
2649
+ background: hsl(var(--border));
2650
+ z-index: 0;
2651
+ }
2652
+
2653
+ .timeline-event:last-child::before {
2654
+ display: none;
2655
+ }
2656
+
2657
+ /* Round Solutions */
2658
+ .round-solutions {
2659
+ margin-top: 1.5rem;
2660
+ }
2661
+
2662
+ .round-solutions > strong {
2663
+ display: block;
2664
+ margin-bottom: 0.75rem;
2665
+ font-size: 0.95rem;
2666
+ color: hsl(var(--foreground));
2667
+ }
2668
+
2669
+ .solutions-list {
2670
+ display: flex;
2671
+ flex-direction: column;
2672
+ gap: 1rem;
2673
+ }
2674
+
2675
+ /* Solution Card Styles (extensions to unified .solution-card above) */
2676
+ .solution-number {
2677
+ display: inline-flex;
2678
+ align-items: center;
2679
+ justify-content: center;
2680
+ min-width: 1.5rem;
2681
+ height: 1.5rem;
2682
+ background: hsl(var(--primary));
2683
+ color: hsl(var(--primary-foreground));
2684
+ border-radius: 0.25rem;
2685
+ font-size: 0.75rem;
2686
+ font-weight: 600;
2687
+ margin-right: 0.5rem;
2688
+ }
2689
+
2690
+ .solution-name {
2691
+ font-weight: 600;
2692
+ font-size: 0.95rem;
2693
+ color: hsl(var(--foreground));
2694
+ flex: 1;
2695
+ }
2696
+
2697
+ .solution-meta {
2698
+ display: flex;
2699
+ flex-direction: column;
2700
+ gap: 0.5rem;
2701
+ font-size: 0.85rem;
2702
+ }
2703
+
2704
+ .source-clis {
2705
+ display: flex;
2706
+ gap: 0.375rem;
2707
+ flex-wrap: wrap;
2708
+ }
2709
+
2710
+ .cli-badge {
2711
+ display: inline-block;
2712
+ padding: 0.125rem 0.5rem;
2713
+ background: hsl(var(--purple, 280 60% 50%) / 0.15);
2714
+ color: hsl(var(--purple, 280 60% 50%));
2715
+ border: 1px solid hsl(var(--purple, 280 60% 50%) / 0.3);
2716
+ border-radius: 0.25rem;
2717
+ font-size: 0.75rem;
2718
+ font-weight: 500;
2719
+ }
2720
+
2721
+ .solution-scores {
2722
+ display: flex;
2723
+ gap: 0.375rem;
2724
+ flex-wrap: wrap;
2725
+ }
2726
+
2727
+ .score-badge {
2728
+ display: inline-block;
2729
+ padding: 0.125rem 0.5rem;
2730
+ border-radius: 0.25rem;
2731
+ font-size: 0.75rem;
2732
+ font-weight: 500;
2733
+ }
2734
+
2735
+ .score-badge.feasibility {
2736
+ background: hsl(var(--success) / 0.15);
2737
+ color: hsl(var(--success));
2738
+ border: 1px solid hsl(var(--success) / 0.3);
2739
+ }
2740
+
2741
+ .score-badge.effort-low {
2742
+ background: hsl(var(--success) / 0.15);
2743
+ color: hsl(var(--success));
2744
+ border: 1px solid hsl(var(--success) / 0.3);
2745
+ }
2746
+
2747
+ .score-badge.effort-medium {
2748
+ background: hsl(var(--warning) / 0.15);
2749
+ color: hsl(var(--warning));
2750
+ border: 1px solid hsl(var(--warning) / 0.3);
2751
+ }
2752
+
2753
+ .score-badge.effort-high {
2754
+ background: hsl(var(--destructive) / 0.15);
2755
+ color: hsl(var(--destructive));
2756
+ border: 1px solid hsl(var(--destructive) / 0.3);
2757
+ }
2758
+
2759
+ .score-badge.risk-low {
2760
+ background: hsl(var(--success) / 0.15);
2761
+ color: hsl(var(--success));
2762
+ border: 1px solid hsl(var(--success) / 0.3);
2763
+ }
2764
+
2765
+ .score-badge.risk-medium {
2766
+ background: hsl(var(--warning) / 0.15);
2767
+ color: hsl(var(--warning));
2768
+ border: 1px solid hsl(var(--warning) / 0.3);
2769
+ }
2770
+
2771
+ .score-badge.risk-high {
2772
+ background: hsl(var(--destructive) / 0.15);
2773
+ color: hsl(var(--destructive));
2774
+ border: 1px solid hsl(var(--destructive) / 0.3);
2775
+ }
2776
+
2777
+ .solution-summary {
2778
+ padding: 1rem;
2779
+ font-size: 0.875rem;
2780
+ color: hsl(var(--foreground));
2781
+ line-height: 1.5;
2782
+ border-bottom: 1px solid hsl(var(--border));
2783
+ }
2784
+
2785
+ .solution-approach,
2786
+ .solution-dependencies,
2787
+ .solution-concerns {
2788
+ border-bottom: 1px solid hsl(var(--border));
2789
+ }
2790
+
2791
+ .solution-approach:last-child,
2792
+ .solution-dependencies:last-child,
2793
+ .solution-concerns:last-child {
2794
+ border-bottom: none;
2795
+ }
2796
+
2797
+ .solution-tasks,
2798
+ .solution-milestones,
2799
+ .internal-deps,
2800
+ .external-deps {
2801
+ margin-top: 0.75rem;
2802
+ }
2803
+
2804
+ .solution-tasks > strong,
2805
+ .solution-milestones > strong,
2806
+ .internal-deps > strong,
2807
+ .external-deps > strong {
2808
+ display: block;
2809
+ margin-bottom: 0.5rem;
2810
+ font-size: 0.85rem;
2811
+ color: hsl(var(--foreground));
2812
+ }
2813
+
2814
+ .task-list,
2815
+ .milestone-list,
2816
+ .dep-list,
2817
+ .concern-list {
2818
+ list-style: none;
2819
+ margin: 0;
2820
+ padding: 0;
2821
+ display: flex;
2822
+ flex-direction: column;
2823
+ gap: 0.375rem;
2824
+ }
2825
+
2826
+ .task-item,
2827
+ .milestone-item,
2828
+ .dep-item,
2829
+ .concern-item {
2830
+ padding: 0.375rem 0.5rem;
2831
+ background: hsl(var(--muted) / 0.2);
2832
+ border-radius: 0.25rem;
2833
+ font-size: 0.85rem;
2834
+ color: hsl(var(--foreground));
2835
+ line-height: 1.4;
2836
+ }
2837
+
2838
+ .task-id {
2839
+ display: inline-block;
2840
+ min-width: 2rem;
2841
+ font-weight: 600;
2842
+ color: hsl(var(--primary));
2843
+ margin-right: 0.5rem;
2844
+ font-size: 0.75rem;
2845
+ }
2846
+
2847
+ .task-name {
2848
+ flex: 1;
2849
+ }
2850
+
2851
+ .task-key-point {
2852
+ display: block;
2853
+ margin-top: 0.25rem;
2854
+ font-size: 0.75rem;
2855
+ color: hsl(var(--muted-foreground));
2856
+ font-style: italic;
2857
+ }
2858
+
2859
+ .execution-flow {
2860
+ margin-top: 0.75rem;
2861
+ }
2862
+
2863
+ .execution-flow > strong {
2864
+ display: block;
2865
+ margin-bottom: 0.5rem;
2866
+ font-size: 0.85rem;
2867
+ color: hsl(var(--foreground));
2868
+ }
2869
+
2870
+ .flow-code {
2871
+ display: block;
2872
+ padding: 0.5rem;
2873
+ background: hsl(var(--muted));
2874
+ border-radius: 0.25rem;
2875
+ font-size: 0.8rem;
2876
+ font-family: var(--font-mono);
2877
+ color: hsl(var(--foreground));
2878
+ overflow-x: auto;
2879
+ }
2880
+
2881
+ /* ===================================
2882
+ Multi-CLI Right Toolbar
2883
+ =================================== */
2884
+
2885
+ /* Container with toolbar layout */
2886
+ .multi-cli-detail-with-toolbar {
2887
+ display: flex;
2888
+ position: relative;
2889
+ gap: 0;
2890
+ }
2891
+
2892
+ .multi-cli-main-content {
2893
+ flex: 1;
2894
+ min-width: 0;
2895
+ transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2896
+ }
2897
+
2898
+ .multi-cli-detail-with-toolbar.toolbar-expanded .multi-cli-main-content {
2899
+ margin-right: 320px;
2900
+ }
2901
+
2902
+ /* Toolbar Container */
2903
+ .multi-cli-toolbar {
2904
+ position: fixed;
2905
+ top: 80px;
2906
+ right: 0;
2907
+ bottom: 0;
2908
+ width: 320px;
2909
+ background: hsl(var(--card));
2910
+ border-left: 1px solid hsl(var(--border));
2911
+ display: flex;
2912
+ flex-direction: column;
2913
+ z-index: 50;
2914
+ transform: translateX(calc(100% - 48px));
2915
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2916
+ box-shadow: -4px 0 16px rgb(0 0 0 / 0.1);
2917
+ }
2918
+
2919
+ .multi-cli-toolbar.expanded {
2920
+ transform: translateX(0);
2921
+ }
2922
+
2923
+ .multi-cli-toolbar.collapsed {
2924
+ transform: translateX(calc(100% - 48px));
2925
+ }
2926
+
2927
+ /* Toggle Button */
2928
+ .toolbar-toggle-btn {
2929
+ position: absolute;
2930
+ left: 0;
2931
+ top: 50%;
2932
+ transform: translate(-50%, -50%);
2933
+ width: 36px;
2934
+ height: 36px;
2935
+ display: flex;
2936
+ align-items: center;
2937
+ justify-content: center;
2938
+ background: hsl(var(--card));
2939
+ border: 1px solid hsl(var(--border));
2940
+ border-radius: 50%;
2941
+ cursor: pointer;
2942
+ z-index: 51;
2943
+ transition: all 0.2s ease;
2944
+ box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
2945
+ }
2946
+
2947
+ .toolbar-toggle-btn:hover {
2948
+ background: hsl(var(--primary));
2949
+ border-color: hsl(var(--primary));
2950
+ color: hsl(var(--primary-foreground));
2951
+ transform: translate(-50%, -50%) scale(1.1);
2952
+ }
2953
+
2954
+ .toolbar-toggle-btn i {
2955
+ color: hsl(var(--muted-foreground));
2956
+ transition: color 0.2s ease;
2957
+ }
2958
+
2959
+ .toolbar-toggle-btn:hover i {
2960
+ color: hsl(var(--primary-foreground));
2961
+ }
2962
+
2963
+ /* Toolbar Content */
2964
+ .toolbar-content {
2965
+ flex: 1;
2966
+ display: flex;
2967
+ flex-direction: column;
2968
+ overflow: hidden;
2969
+ padding: 0;
2970
+ opacity: 0;
2971
+ transition: opacity 0.2s ease 0.1s;
2972
+ }
2973
+
2974
+ .multi-cli-toolbar.expanded .toolbar-content {
2975
+ opacity: 1;
2976
+ }
2977
+
2978
+ .multi-cli-toolbar.collapsed .toolbar-content {
2979
+ opacity: 0;
2980
+ pointer-events: none;
2981
+ }
2982
+
2983
+ /* Toolbar Header */
2984
+ .toolbar-header {
2985
+ padding: 1rem;
2986
+ border-bottom: 1px solid hsl(var(--border));
2987
+ background: hsl(var(--muted) / 0.3);
2988
+ }
2989
+
2990
+ .toolbar-title {
2991
+ display: flex;
2992
+ align-items: center;
2993
+ gap: 0.5rem;
2994
+ margin: 0;
2995
+ font-size: 0.9rem;
2996
+ font-weight: 600;
2997
+ color: hsl(var(--foreground));
2998
+ }
2999
+
3000
+ .toolbar-title i {
3001
+ color: hsl(var(--primary));
3002
+ }
3003
+
3004
+ .toolbar-count {
3005
+ display: inline-flex;
3006
+ align-items: center;
3007
+ justify-content: center;
3008
+ min-width: 1.5rem;
3009
+ height: 1.5rem;
3010
+ padding: 0 0.375rem;
3011
+ background: hsl(var(--primary) / 0.15);
3012
+ color: hsl(var(--primary));
3013
+ border-radius: 0.75rem;
3014
+ font-size: 0.75rem;
3015
+ font-weight: 600;
3016
+ margin-left: auto;
3017
+ }
3018
+
3019
+ /* Toolbar Actions */
3020
+ .toolbar-actions {
3021
+ display: flex;
3022
+ align-items: center;
3023
+ gap: 0.5rem;
3024
+ padding: 0.75rem 1rem;
3025
+ border-bottom: 1px solid hsl(var(--border));
3026
+ }
3027
+
3028
+ .toolbar-action-btn {
3029
+ display: flex;
3030
+ align-items: center;
3031
+ justify-content: center;
3032
+ width: 32px;
3033
+ height: 32px;
3034
+ background: hsl(var(--muted));
3035
+ border: 1px solid hsl(var(--border));
3036
+ border-radius: 0.375rem;
3037
+ cursor: pointer;
3038
+ transition: all 0.15s ease;
3039
+ }
3040
+
3041
+ .toolbar-action-btn i {
3042
+ color: hsl(var(--muted-foreground));
3043
+ }
3044
+
3045
+ .toolbar-action-btn:hover {
3046
+ background: hsl(var(--primary) / 0.1);
3047
+ border-color: hsl(var(--primary) / 0.3);
3048
+ }
3049
+
3050
+ .toolbar-action-btn:hover i {
3051
+ color: hsl(var(--primary));
3052
+ }
3053
+
3054
+ /* Toolbar Task List */
3055
+ .toolbar-task-list {
3056
+ flex: 1;
3057
+ overflow-y: auto;
3058
+ padding: 0.5rem;
3059
+ scrollbar-width: thin;
3060
+ }
3061
+
3062
+ .toolbar-task-list::-webkit-scrollbar {
3063
+ width: 6px;
3064
+ }
3065
+
3066
+ .toolbar-task-list::-webkit-scrollbar-track {
3067
+ background: transparent;
3068
+ }
3069
+
3070
+ .toolbar-task-list::-webkit-scrollbar-thumb {
3071
+ background: hsl(var(--border));
3072
+ border-radius: 3px;
3073
+ }
3074
+
3075
+ .toolbar-task-item {
3076
+ display: flex;
3077
+ align-items: flex-start;
3078
+ gap: 0.625rem;
3079
+ padding: 0.625rem 0.75rem;
3080
+ background: hsl(var(--muted) / 0.3);
3081
+ border: 1px solid hsl(var(--border));
3082
+ border-radius: 0.5rem;
3083
+ margin-bottom: 0.375rem;
3084
+ cursor: pointer;
3085
+ transition: all 0.2s ease;
3086
+ }
3087
+
3088
+ .toolbar-task-item:hover {
3089
+ background: hsl(var(--primary) / 0.08);
3090
+ border-color: hsl(var(--primary) / 0.3);
3091
+ transform: translateX(-2px);
3092
+ }
3093
+
3094
+ .toolbar-task-item:active {
3095
+ transform: translateX(-2px) scale(0.98);
3096
+ }
3097
+
3098
+ .toolbar-task-num {
3099
+ display: inline-flex;
3100
+ align-items: center;
3101
+ justify-content: center;
3102
+ min-width: 1.5rem;
3103
+ height: 1.5rem;
3104
+ background: hsl(var(--primary));
3105
+ color: hsl(var(--primary-foreground));
3106
+ border-radius: 0.25rem;
3107
+ font-size: 0.7rem;
3108
+ font-weight: 600;
3109
+ flex-shrink: 0;
3110
+ }
3111
+
3112
+ .toolbar-task-info {
3113
+ flex: 1;
3114
+ min-width: 0;
3115
+ display: flex;
3116
+ flex-direction: column;
3117
+ gap: 0.25rem;
3118
+ }
3119
+
3120
+ .toolbar-task-title {
3121
+ font-size: 0.8rem;
3122
+ font-weight: 500;
3123
+ color: hsl(var(--foreground));
3124
+ line-height: 1.4;
3125
+ overflow: hidden;
3126
+ text-overflow: ellipsis;
3127
+ display: -webkit-box;
3128
+ -webkit-line-clamp: 2;
3129
+ -webkit-box-orient: vertical;
3130
+ }
3131
+
3132
+ .toolbar-task-scope {
3133
+ font-size: 0.7rem;
3134
+ color: hsl(var(--muted-foreground));
3135
+ font-family: var(--font-mono);
3136
+ overflow: hidden;
3137
+ text-overflow: ellipsis;
3138
+ white-space: nowrap;
3139
+ }
3140
+
3141
+ /* Toolbar Empty State */
3142
+ .toolbar-empty {
3143
+ display: flex;
3144
+ flex-direction: column;
3145
+ align-items: center;
3146
+ justify-content: center;
3147
+ padding: 2rem 1rem;
3148
+ color: hsl(var(--muted-foreground));
3149
+ text-align: center;
3150
+ gap: 0.75rem;
3151
+ }
3152
+
3153
+ .toolbar-empty i {
3154
+ color: hsl(var(--muted-foreground) / 0.5);
3155
+ }
3156
+
3157
+ .toolbar-empty span {
3158
+ font-size: 0.8rem;
3159
+ }
3160
+
3161
+ /* Toolbar Session Info */
3162
+ .toolbar-session-info {
3163
+ padding: 0.75rem 1rem;
3164
+ border-top: 1px solid hsl(var(--border));
3165
+ background: hsl(var(--muted) / 0.2);
3166
+ margin-top: auto;
3167
+ }
3168
+
3169
+ .toolbar-info-item {
3170
+ display: flex;
3171
+ flex-direction: column;
3172
+ gap: 0.25rem;
3173
+ margin-bottom: 0.5rem;
3174
+ }
3175
+
3176
+ .toolbar-info-item:last-child {
3177
+ margin-bottom: 0;
3178
+ }
3179
+
3180
+ .toolbar-info-label {
3181
+ font-size: 0.65rem;
3182
+ font-weight: 600;
3183
+ text-transform: uppercase;
3184
+ letter-spacing: 0.025em;
3185
+ color: hsl(var(--muted-foreground));
3186
+ }
3187
+
3188
+ .toolbar-info-value {
3189
+ font-size: 0.75rem;
3190
+ color: hsl(var(--foreground));
3191
+ overflow: hidden;
3192
+ text-overflow: ellipsis;
3193
+ white-space: nowrap;
3194
+ }
3195
+
3196
+ .toolbar-info-value.toolbar-summary {
3197
+ display: -webkit-box;
3198
+ -webkit-line-clamp: 3;
3199
+ -webkit-box-orient: vertical;
3200
+ white-space: normal;
3201
+ line-height: 1.4;
3202
+ }
3203
+
3204
+ /* Task Highlight Animation */
3205
+ .fix-task-summary-item.toolbar-highlight {
3206
+ animation: toolbarHighlightPulse 2s ease-out;
3207
+ }
3208
+
3209
+ @keyframes toolbarHighlightPulse {
3210
+ 0% {
3211
+ box-shadow: 0 0 0 0 hsl(var(--primary));
3212
+ }
3213
+ 20% {
3214
+ box-shadow: 0 0 0 4px hsl(var(--primary) / 0.4);
3215
+ border-color: hsl(var(--primary));
3216
+ }
3217
+ 100% {
3218
+ box-shadow: 0 0 0 0 hsl(var(--primary) / 0);
3219
+ border-color: hsl(var(--border));
3220
+ }
3221
+ }
3222
+
3223
+ /* Responsive adjustments */
3224
+ @media (max-width: 1024px) {
3225
+ .multi-cli-toolbar {
3226
+ width: 280px;
3227
+ }
3228
+ }
3229
+
3230
+ @media (max-width: 768px) {
3231
+ .multi-cli-toolbar {
3232
+ width: 100%;
3233
+ top: auto;
3234
+ bottom: 0;
3235
+ height: 50vh;
3236
+ transform: translateY(calc(100% - 48px));
3237
+ border-left: none;
3238
+ border-top: 1px solid hsl(var(--border));
3239
+ border-radius: 1rem 1rem 0 0;
3240
+ }
3241
+
3242
+ .multi-cli-toolbar.expanded {
3243
+ transform: translateY(0);
3244
+ }
3245
+
3246
+ .multi-cli-toolbar.collapsed {
3247
+ transform: translateY(calc(100% - 48px));
3248
+ }
3249
+
3250
+ .toolbar-toggle-btn {
3251
+ left: 50%;
3252
+ top: 0;
3253
+ transform: translate(-50%, -50%);
3254
+ }
3255
+
3256
+ .toolbar-toggle-btn:hover {
3257
+ transform: translate(-50%, -50%) scale(1.1);
3258
+ }
3259
+ }
3260
+
3261
+ /* ========== Discussion Section Styles ========== */
3262
+ .multi-cli-discussion-section {
3263
+ padding: 1rem;
3264
+ }
3265
+
3266
+ .discussion-header {
3267
+ display: flex;
3268
+ align-items: center;
3269
+ justify-content: space-between;
3270
+ margin-bottom: 1rem;
3271
+ padding-bottom: 0.75rem;
3272
+ border-bottom: 1px solid hsl(var(--border) / 0.5);
3273
+ }
3274
+
3275
+ .discussion-title {
3276
+ font-size: 1.125rem;
3277
+ font-weight: 600;
3278
+ color: hsl(var(--foreground));
3279
+ margin: 0;
3280
+ }
3281
+
3282
+ .discussion-status {
3283
+ font-size: 0.75rem;
3284
+ padding: 0.25rem 0.5rem;
3285
+ border-radius: 4px;
3286
+ text-transform: capitalize;
3287
+ }
3288
+
3289
+ .discussion-status.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
3290
+ .discussion-status.analyzing { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
3291
+
3292
+ .discussion-round {
3293
+ margin-bottom: 0.75rem;
3294
+ border: 1px solid hsl(var(--border));
3295
+ border-radius: 8px;
3296
+ overflow: hidden;
3297
+ background: hsl(var(--card));
3298
+ }
3299
+
3300
+ .discussion-round-header {
3301
+ display: flex;
3302
+ align-items: center;
3303
+ gap: 0.75rem;
3304
+ padding: 0.75rem 1rem;
3305
+ background: hsl(var(--muted) / 0.3);
3306
+ cursor: pointer;
3307
+ transition: background-color 0.2s;
3308
+ }
3309
+
3310
+ .discussion-round-header:hover {
3311
+ background: hsl(var(--muted) / 0.5);
3312
+ }
3313
+
3314
+ .round-title-group {
3315
+ display: flex;
3316
+ align-items: center;
3317
+ gap: 0.5rem;
3318
+ flex: 1;
3319
+ }
3320
+
3321
+ .round-badge {
3322
+ font-size: 0.75rem;
3323
+ font-weight: 600;
3324
+ padding: 0.125rem 0.5rem;
3325
+ background: hsl(var(--primary));
3326
+ color: hsl(var(--primary-foreground));
3327
+ border-radius: 4px;
3328
+ }
3329
+
3330
+ .round-timestamp {
3331
+ font-size: 0.75rem;
3332
+ color: hsl(var(--muted-foreground));
3333
+ }
3334
+
3335
+ .round-indicators {
3336
+ display: flex;
3337
+ align-items: center;
3338
+ gap: 0.5rem;
3339
+ }
3340
+
3341
+ .convergence-badge {
3342
+ font-size: 0.7rem;
3343
+ padding: 0.125rem 0.375rem;
3344
+ background: hsl(var(--success) / 0.15);
3345
+ color: hsl(var(--success));
3346
+ border-radius: 4px;
3347
+ }
3348
+
3349
+ .recommendation-badge {
3350
+ font-size: 0.7rem;
3351
+ padding: 0.125rem 0.375rem;
3352
+ border-radius: 4px;
3353
+ text-transform: capitalize;
3354
+ }
3355
+
3356
+ .recommendation-badge.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
3357
+ .recommendation-badge.continue { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); }
3358
+ .recommendation-badge.user_input_needed { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
3359
+
3360
+ .discussion-round-content {
3361
+ padding: 1rem;
3362
+ border-top: 1px solid hsl(var(--border) / 0.5);
3363
+ }
3364
+
3365
+ .round-section-title {
3366
+ font-size: 0.8rem;
3367
+ font-weight: 600;
3368
+ color: hsl(var(--muted-foreground));
3369
+ margin: 0.75rem 0 0.5rem;
3370
+ display: flex;
3371
+ align-items: center;
3372
+ gap: 0.375rem;
3373
+ }
3374
+
3375
+ .round-section-title:first-child {
3376
+ margin-top: 0;
3377
+ }
3378
+
3379
+ .agent-badges {
3380
+ display: flex;
3381
+ flex-wrap: wrap;
3382
+ gap: 0.375rem;
3383
+ }
3384
+
3385
+ .agent-badge {
3386
+ font-size: 0.7rem;
3387
+ padding: 0.125rem 0.5rem;
3388
+ background: hsl(var(--accent));
3389
+ color: hsl(var(--accent-foreground));
3390
+ border-radius: 999px;
3391
+ }
3392
+
3393
+ .solution-cards-grid {
3394
+ display: grid;
3395
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
3396
+ gap: 0.75rem;
3397
+ margin-top: 0.5rem;
3398
+ }
3399
+
3400
+ .solution-mini-card {
3401
+ border: 1px solid hsl(var(--border));
3402
+ border-radius: 6px;
3403
+ padding: 0.75rem;
3404
+ background: hsl(var(--background));
3405
+ }
3406
+
3407
+ .solution-mini-header {
3408
+ display: flex;
3409
+ align-items: center;
3410
+ gap: 0.5rem;
3411
+ margin-bottom: 0.5rem;
3412
+ }
3413
+
3414
+ .solution-mini-title {
3415
+ font-size: 0.8rem;
3416
+ font-weight: 500;
3417
+ flex: 1;
3418
+ }
3419
+
3420
+ .solution-mini-source {
3421
+ font-size: 0.65rem;
3422
+ color: hsl(var(--muted-foreground));
3423
+ }
3424
+
3425
+ .solution-mini-description {
3426
+ font-size: 0.75rem;
3427
+ color: hsl(var(--muted-foreground));
3428
+ line-height: 1.4;
3429
+ }
3430
+
3431
+ /* Discussion Round Expand/Collapse */
3432
+ .discussion-round.collapsed .discussion-round-content {
3433
+ display: none;
3434
+ }
3435
+
3436
+ .discussion-round-header .expand-icon {
3437
+ transition: transform 0.2s;
3438
+ }
3439
+
3440
+ .discussion-round.collapsed .discussion-round-header .expand-icon {
3441
+ transform: rotate(-90deg);
3442
+ }
3443
+
3444
+ /* Discussion Round using collapsible-section pattern */
3445
+ .discussion-round.collapsible-section {
3446
+ margin-bottom: 0.75rem;
3447
+ border: 1px solid hsl(var(--border));
3448
+ border-radius: 8px;
3449
+ overflow: hidden;
3450
+ background: hsl(var(--card));
3451
+ }
3452
+
3453
+ .discussion-round.collapsible-section .collapsible-header {
3454
+ display: flex;
3455
+ align-items: center;
3456
+ gap: 0.75rem;
3457
+ padding: 0.75rem 1rem;
3458
+ background: hsl(var(--muted) / 0.3);
3459
+ cursor: pointer;
3460
+ transition: background-color 0.2s;
3461
+ }
3462
+
3463
+ .discussion-round.collapsible-section .collapsible-header:hover {
3464
+ background: hsl(var(--muted) / 0.5);
3465
+ }
3466
+
3467
+ .discussion-round.collapsible-section .collapsible-content {
3468
+ padding: 1rem;
3469
+ border-top: 1px solid hsl(var(--border) / 0.5);
3470
+ background: hsl(var(--card));
3471
+ }
3472
+
3473
+ .discussion-round.collapsible-section .collapsible-content.collapsed {
3474
+ display: none;
3475
+ }
3476
+
3477
+ /* ========== Summary Tab Content ========== */
3478
+ .summary-tab-content .summary-section {
3479
+ margin-bottom: 1rem;
3480
+ padding: 1rem;
3481
+ border: 1px solid hsl(var(--border));
3482
+ border-radius: 8px;
3483
+ background: hsl(var(--card));
3484
+ }
3485
+
3486
+ .summary-section-title {
3487
+ font-size: 0.9rem;
3488
+ font-weight: 600;
3489
+ color: hsl(var(--foreground));
3490
+ margin-bottom: 0.75rem;
3491
+ display: flex;
3492
+ align-items: center;
3493
+ gap: 0.375rem;
3494
+ }
3495
+
3496
+ .summary-content {
3497
+ font-size: 0.875rem;
3498
+ color: hsl(var(--muted-foreground));
3499
+ line-height: 1.6;
3500
+ }
3501
+
3502
+ .convergence-info {
3503
+ display: flex;
3504
+ align-items: center;
3505
+ gap: 0.75rem;
3506
+ }
3507
+
3508
+ .convergence-level {
3509
+ font-size: 0.75rem;
3510
+ padding: 0.25rem 0.5rem;
3511
+ border-radius: 4px;
3512
+ text-transform: capitalize;
3513
+ background: hsl(var(--muted));
3514
+ }
3515
+
3516
+ .convergence-level.full { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
3517
+ .convergence-level.partial { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
3518
+ .convergence-level.low { background: hsl(var(--error) / 0.15); color: hsl(var(--error)); }
3519
+
3520
+ .convergence-rec {
3521
+ font-size: 0.75rem;
3522
+ padding: 0.25rem 0.5rem;
3523
+ border-radius: 4px;
3524
+ text-transform: capitalize;
3525
+ background: hsl(var(--info) / 0.15);
3526
+ color: hsl(var(--info));
3527
+ }
3528
+
3529
+ .convergence-rec.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
3530
+ .convergence-rec.continue { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); }
3531
+
3532
+ /* Summary collapsible Solutions section */
3533
+ .summary-section.collapsible-section {
3534
+ padding: 0;
3535
+ overflow: hidden;
3536
+ }
3537
+
3538
+ .summary-section.collapsible-section .collapsible-header {
3539
+ padding: 0.75rem 1rem;
3540
+ background: hsl(var(--card));
3541
+ border-bottom: 1px solid transparent;
3542
+ }
3543
+
3544
+ .summary-section.collapsible-section .collapsible-header:hover {
3545
+ background: hsl(var(--muted) / 0.5);
3546
+ }
3547
+
3548
+ .summary-section.collapsible-section .collapsible-content {
3549
+ padding: 1rem;
3550
+ background: hsl(var(--muted) / 0.3);
3551
+ border-top: 1px solid hsl(var(--border) / 0.5);
3552
+ }
3553
+
3554
+ .solution-summary-item {
3555
+ display: flex;
3556
+ align-items: center;
3557
+ gap: 0.75rem;
3558
+ padding: 0.5rem 0;
3559
+ border-bottom: 1px solid hsl(var(--border) / 0.3);
3560
+ }
3561
+
3562
+ .solution-summary-item:last-child {
3563
+ border-bottom: none;
3564
+ }
3565
+
3566
+ .solution-num {
3567
+ font-size: 0.75rem;
3568
+ font-weight: 600;
3569
+ color: hsl(var(--primary));
3570
+ min-width: 1.5rem;
3571
+ }
3572
+
3573
+ .solution-name {
3574
+ flex: 1;
3575
+ font-size: 0.875rem;
3576
+ }
3577
+
3578
+ .feasibility-badge {
3579
+ font-size: 0.7rem;
3580
+ padding: 0.125rem 0.375rem;
3581
+ border-radius: 4px;
3582
+ background: hsl(var(--success) / 0.15);
3583
+ color: hsl(var(--success));
3584
+ }
3585
+
3586
+ /* ========== Context Tab Content (Multi-CLI) ========== */
3587
+ .context-tab-content {
3588
+ display: flex;
3589
+ flex-direction: column;
3590
+ gap: 1rem;
3591
+ padding: 1rem;
3592
+ }
3593
+
3594
+ .context-tab-content .context-section {
3595
+ padding: 1rem;
3596
+ border: 1px solid hsl(var(--border));
3597
+ border-radius: 8px;
3598
+ background: hsl(var(--card));
3599
+ }
3600
+
3601
+ .context-tab-content .context-section-title {
3602
+ font-size: 0.9rem;
3603
+ font-weight: 600;
3604
+ color: hsl(var(--foreground));
3605
+ margin-bottom: 0.75rem;
3606
+ display: flex;
3607
+ align-items: center;
3608
+ gap: 0.375rem;
3609
+ }
3610
+
3611
+ .context-tab-content .context-description {
3612
+ font-size: 0.875rem;
3613
+ color: hsl(var(--muted-foreground));
3614
+ line-height: 1.6;
3615
+ margin: 0;
3616
+ }
3617
+
3618
+ .context-tab-content .constraints-list {
3619
+ margin: 0;
3620
+ padding-left: 1.25rem;
3621
+ font-size: 0.875rem;
3622
+ color: hsl(var(--muted-foreground));
3623
+ }
3624
+
3625
+ .context-tab-content .constraints-list li {
3626
+ margin-bottom: 0.375rem;
3627
+ }
3628
+
3629
+ .context-tab-content .path-tags {
3630
+ display: flex;
3631
+ flex-wrap: wrap;
3632
+ gap: 0.5rem;
3633
+ }
3634
+
3635
+ .context-tab-content .path-tag {
3636
+ font-family: monospace;
3637
+ font-size: 0.75rem;
3638
+ padding: 0.25rem 0.5rem;
3639
+ background: hsl(var(--muted));
3640
+ border-radius: 4px;
3641
+ color: hsl(var(--foreground));
3642
+ }
3643
+
3644
+ .context-tab-content .session-id-code {
3645
+ font-family: monospace;
3646
+ font-size: 0.8rem;
3647
+ padding: 0.5rem 0.75rem;
3648
+ background: hsl(var(--muted));
3649
+ border-radius: 4px;
3650
+ display: inline-block;
3651
+ }
3652
+
3653
+ /* Context tab collapsible sections */
3654
+ .context-tab-content .context-section.collapsible-section {
3655
+ padding: 0;
3656
+ overflow: hidden;
3657
+ }
3658
+
3659
+ .context-tab-content .context-section.collapsible-section .collapsible-header {
3660
+ padding: 0.75rem 1rem;
3661
+ background: hsl(var(--card));
3662
+ }
3663
+
3664
+ .context-tab-content .context-section.collapsible-section .collapsible-header:hover {
3665
+ background: hsl(var(--muted) / 0.5);
3666
+ }
3667
+
3668
+ .context-tab-content .context-section.collapsible-section .collapsible-content {
3669
+ padding: 1rem;
3670
+ background: hsl(var(--muted) / 0.3);
3671
+ border-top: 1px solid hsl(var(--border) / 0.5);
3672
+ }
3673
+
3674
+ .context-tab-content .files-list {
3675
+ margin: 0;
3676
+ padding: 0;
3677
+ list-style: none;
3678
+ }
3679
+
3680
+ .context-tab-content .file-item {
3681
+ display: flex;
3682
+ align-items: center;
3683
+ gap: 0.5rem;
3684
+ padding: 0.375rem 0;
3685
+ border-bottom: 1px solid hsl(var(--border) / 0.3);
3686
+ font-size: 0.8rem;
3687
+ }
3688
+
3689
+ .context-tab-content .file-item:last-child {
3690
+ border-bottom: none;
3691
+ }
3692
+
3693
+ .context-tab-content .file-icon {
3694
+ flex-shrink: 0;
3695
+ }
3696
+
3697
+ .context-tab-content .file-item code {
3698
+ font-family: monospace;
3699
+ font-size: 0.75rem;
3700
+ background: hsl(var(--muted));
3701
+ padding: 0.125rem 0.375rem;
3702
+ border-radius: 3px;
3703
+ }
3704
+
3705
+ .context-tab-content .file-reason {
3706
+ color: hsl(var(--muted-foreground));
3707
+ font-size: 0.75rem;
3708
+ margin-left: auto;
3709
+ }
3710
+
3711
+ .context-tab-content .deps-list {
3712
+ margin: 0;
3713
+ padding-left: 1.25rem;
3714
+ font-size: 0.8rem;
3715
+ color: hsl(var(--foreground));
3716
+ }
3717
+
3718
+ .context-tab-content .deps-list li {
3719
+ margin-bottom: 0.25rem;
3720
+ }
3721
+
3722
+ .context-tab-content .risks-list {
3723
+ margin: 0;
3724
+ padding-left: 1.25rem;
3725
+ }
3726
+
3727
+ .context-tab-content .risk-item {
3728
+ font-size: 0.875rem;
3729
+ color: hsl(var(--warning));
3730
+ margin-bottom: 0.375rem;
3731
+ }
3732
+
3733
+ .context-tab-content .json-content {
3734
+ font-family: monospace;
3735
+ font-size: 0.75rem;
3736
+ line-height: 1.5;
3737
+ margin: 0;
3738
+ white-space: pre-wrap;
3739
+ word-break: break-all;
3740
+ max-height: 400px;
3741
+ overflow-y: auto;
3742
+ background: hsl(var(--background));
3743
+ padding: 0.75rem;
3744
+ border-radius: 4px;
3745
+ }
3746
+
3747
+ /* ========== Association Section Styles ========== */
3748
+ .association-section {
3749
+ margin-bottom: 1.5rem;
3750
+ }
3751
+
3752
+ .association-section-title {
3753
+ font-size: 0.9rem;
3754
+ font-weight: 600;
3755
+ color: hsl(var(--foreground));
3756
+ margin-bottom: 0.75rem;
3757
+ display: flex;
3758
+ align-items: center;
3759
+ gap: 0.375rem;
3760
+ }
3761
+
3762
+ .association-section-title i {
3763
+ color: hsl(var(--primary));
3764
+ }
3765
+
3766
+ .association-cards-grid {
3767
+ display: grid;
3768
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
3769
+ gap: 1rem;
3770
+ }
3771
+
3772
+ .association-card {
3773
+ border: 1px solid hsl(var(--border));
3774
+ border-radius: 8px;
3775
+ padding: 1rem;
3776
+ background: hsl(var(--card));
3777
+ transition: box-shadow 0.2s, border-color 0.2s;
3778
+ }
3779
+
3780
+ .association-card:hover {
3781
+ box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
3782
+ border-color: hsl(var(--border));
3783
+ }
3784
+
3785
+ .association-card .card-header {
3786
+ display: flex;
3787
+ align-items: center;
3788
+ gap: 0.5rem;
3789
+ margin-bottom: 0.75rem;
3790
+ }
3791
+
3792
+ .association-card .card-number {
3793
+ width: 1.5rem;
3794
+ height: 1.5rem;
3795
+ border-radius: 50%;
3796
+ background: hsl(var(--primary));
3797
+ color: hsl(var(--primary-foreground));
3798
+ display: flex;
3799
+ align-items: center;
3800
+ justify-content: center;
3801
+ font-size: 0.75rem;
3802
+ font-weight: 600;
3803
+ flex-shrink: 0;
3804
+ }
3805
+
3806
+ .association-card .card-title {
3807
+ font-weight: 500;
3808
+ flex: 1;
3809
+ font-size: 0.9rem;
3810
+ }
3811
+
3812
+ .association-card .card-metrics {
3813
+ display: grid;
3814
+ grid-template-columns: repeat(3, 1fr);
3815
+ gap: 0.5rem;
3816
+ margin-bottom: 0.75rem;
3817
+ }
3818
+
3819
+ .association-card .metric {
3820
+ text-align: center;
3821
+ }
3822
+
3823
+ .association-card .metric-label {
3824
+ display: block;
3825
+ font-size: 0.65rem;
3826
+ color: hsl(var(--muted-foreground));
3827
+ margin-bottom: 0.125rem;
3828
+ }
3829
+
3830
+ .association-card .metric-value {
3831
+ font-size: 0.85rem;
3832
+ font-weight: 600;
3833
+ }
3834
+
3835
+ .association-card .metric-value.effort-low { color: hsl(var(--success)); }
3836
+ .association-card .metric-value.effort-medium { color: hsl(var(--warning)); }
3837
+ .association-card .metric-value.effort-high { color: hsl(var(--error)); }
3838
+
3839
+ .association-card .metric-value.risk-low { color: hsl(var(--success)); }
3840
+ .association-card .metric-value.risk-medium { color: hsl(var(--warning)); }
3841
+ .association-card .metric-value.risk-high { color: hsl(var(--error)); }
3842
+
3843
+ .association-card .card-section-title {
3844
+ font-size: 0.75rem;
3845
+ font-weight: 600;
3846
+ color: hsl(var(--muted-foreground));
3847
+ margin: 0.75rem 0 0.375rem;
3848
+ }
3849
+
3850
+ .dependency-list, .consensus-list {
3851
+ list-style: none;
3852
+ padding: 0;
3853
+ margin: 0.5rem 0 0 0;
3854
+ }
3855
+
3856
+ .dependency-item, .consensus-item {
3857
+ display: flex;
3858
+ align-items: flex-start;
3859
+ gap: 0.5rem;
3860
+ padding: 0.375rem 0;
3861
+ font-size: 0.8rem;
3862
+ border-bottom: 1px solid hsl(var(--border) / 0.3);
3863
+ }
3864
+
3865
+ .dependency-item:last-child, .consensus-item:last-child {
3866
+ border-bottom: none;
3867
+ }
3868
+
3869
+ .dep-type {
3870
+ font-size: 0.65rem;
3871
+ padding: 0.125rem 0.375rem;
3872
+ border-radius: 4px;
3873
+ text-transform: uppercase;
3874
+ flex-shrink: 0;
3875
+ }
3876
+
3877
+ .dep-type.internal { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); }
3878
+ .dep-type.external { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
3879
+
3880
+ .dep-name {
3881
+ flex: 1;
3882
+ word-break: break-word;
3883
+ }
3884
+
3885
+ .consensus-icon {
3886
+ color: hsl(var(--success));
3887
+ flex-shrink: 0;
3888
+ }
3889
+
3890
+ .consensus-text {
3891
+ flex: 1;
3892
+ line-height: 1.4;
3893
+ }
3894
+
3895
+ /* Association Empty State */
3896
+ .association-empty {
3897
+ text-align: center;
3898
+ padding: 2rem;
3899
+ color: hsl(var(--muted-foreground));
3900
+ }
3901
+
3902
+ .association-empty i {
3903
+ font-size: 2rem;
3904
+ margin-bottom: 0.5rem;
3905
+ opacity: 0.5;
3906
+ }
3907
+
3908
+ .association-empty p {
3909
+ margin: 0;
3910
+ font-size: 0.875rem;
3911
+ }
3912
+
3913
+ /* Discussion/Association Responsive */
3914
+ @media (max-width: 768px) {
3915
+ .association-cards-grid {
3916
+ grid-template-columns: 1fr;
3917
+ }
3918
+
3919
+ .solution-cards-grid {
3920
+ grid-template-columns: 1fr;
3921
+ }
3922
+
3923
+ .association-card .card-metrics {
3924
+ grid-template-columns: repeat(3, 1fr);
3925
+ }
3926
+ }
3927
+
3928
+ /* ===================================
3929
+ Multi-CLI Plan Summary Section
3930
+ =================================== */
3931
+
3932
+ /* Plan Summary Section - card-like styling */
3933
+ .plan-summary-section {
3934
+ background: hsl(var(--card));
3935
+ border: 1px solid hsl(var(--border));
3936
+ border-radius: 0.5rem;
3937
+ padding: 1rem 1.25rem;
3938
+ margin-bottom: 1.25rem;
3939
+ }
3940
+
3941
+ .plan-summary-section:hover {
3942
+ border-color: hsl(var(--purple, 280 60% 50%) / 0.3);
3943
+ }
3944
+
3945
+ /* Plan text styles */
3946
+ .plan-summary-text,
3947
+ .plan-solution-text,
3948
+ .plan-approach-text {
3949
+ font-size: 0.875rem;
3950
+ line-height: 1.6;
3951
+ color: hsl(var(--foreground));
3952
+ margin: 0 0 0.75rem 0;
3953
+ }
3954
+
3955
+ .plan-summary-text:last-child,
3956
+ .plan-solution-text:last-child,
3957
+ .plan-approach-text:last-child {
3958
+ margin-bottom: 0;
3959
+ }
3960
+
3961
+ .plan-summary-text strong,
3962
+ .plan-solution-text strong,
3963
+ .plan-approach-text strong {
3964
+ color: hsl(var(--muted-foreground));
3965
+ font-weight: 600;
3966
+ margin-right: 0.5rem;
3967
+ }
3968
+
3969
+ /* Plan meta badges container */
3970
+ .plan-meta-badges {
3971
+ display: flex;
3972
+ flex-wrap: wrap;
3973
+ gap: 0.5rem;
3974
+ margin-top: 0.75rem;
3975
+ padding-top: 0.75rem;
3976
+ border-top: 1px solid hsl(var(--border) / 0.5);
3977
+ }
3978
+
3979
+ /* Feasibility badge */
3980
+ .feasibility-badge {
3981
+ display: inline-flex;
3982
+ align-items: center;
3983
+ padding: 0.25rem 0.625rem;
3984
+ background: hsl(var(--primary) / 0.1);
3985
+ color: hsl(var(--primary));
3986
+ border-radius: 0.25rem;
3987
+ font-size: 0.75rem;
3988
+ font-weight: 500;
3989
+ }
3990
+
3991
+ /* Effort badge variants */
3992
+ .effort-badge {
3993
+ display: inline-flex;
3994
+ align-items: center;
3995
+ padding: 0.25rem 0.625rem;
3996
+ border-radius: 0.25rem;
3997
+ font-size: 0.75rem;
3998
+ font-weight: 500;
3999
+ }
4000
+
4001
+ .effort-badge.low {
4002
+ background: hsl(var(--success-light, 142 70% 95%));
4003
+ color: hsl(var(--success, 142 70% 45%));
4004
+ }
4005
+
4006
+ .effort-badge.medium {
4007
+ background: hsl(var(--warning-light, 45 90% 95%));
4008
+ color: hsl(var(--warning, 45 90% 40%));
4009
+ }
4010
+
4011
+ .effort-badge.high {
4012
+ background: hsl(var(--destructive) / 0.1);
4013
+ color: hsl(var(--destructive));
4014
+ }
4015
+
4016
+ /* Complexity badge */
4017
+ .complexity-badge {
4018
+ display: inline-flex;
4019
+ align-items: center;
4020
+ padding: 0.25rem 0.625rem;
4021
+ background: hsl(var(--muted));
4022
+ color: hsl(var(--foreground));
4023
+ border-radius: 0.25rem;
4024
+ font-size: 0.75rem;
4025
+ font-weight: 500;
4026
+ }
4027
+
4028
+ /* Time badge */
4029
+ .time-badge {
4030
+ display: inline-flex;
4031
+ align-items: center;
4032
+ padding: 0.25rem 0.625rem;
4033
+ background: hsl(var(--info-light, 220 80% 95%));
4034
+ color: hsl(var(--info, 220 80% 55%));
4035
+ border-radius: 0.25rem;
4036
+ font-size: 0.75rem;
4037
+ font-weight: 500;
4038
+ }
4039
+
4040
+ /* ===================================
4041
+ Multi-CLI Task Item Additional Badges
4042
+ =================================== */
4043
+
4044
+ /* Files meta badge */
4045
+ .meta-badge.files {
4046
+ background: hsl(var(--purple, 280 60% 50%) / 0.1);
4047
+ color: hsl(var(--purple, 280 60% 50%));
4048
+ }
4049
+
4050
+ /* Depends meta badge */
4051
+ .meta-badge.depends {
4052
+ background: hsl(var(--info-light, 220 80% 95%));
4053
+ color: hsl(var(--info, 220 80% 55%));
4054
+ }
4055
+
4056
+ /* Multi-CLI Task Item Full - enhanced padding */
4057
+ .detail-task-item-full.multi-cli-task-item {
4058
+ background: hsl(var(--card));
4059
+ border: 1px solid hsl(var(--border));
4060
+ border-radius: 0.5rem;
4061
+ padding: 0.875rem 1rem;
4062
+ transition: all 0.2s ease;
4063
+ border-left: 3px solid hsl(var(--primary) / 0.5);
4064
+ }
4065
+
4066
+ .detail-task-item-full.multi-cli-task-item:hover {
4067
+ border-color: hsl(var(--primary) / 0.4);
4068
+ border-left-color: hsl(var(--primary));
4069
+ box-shadow: 0 2px 8px hsl(var(--primary) / 0.1);
4070
+ background: hsl(var(--hover));
4071
+ }
4072
+
4073
+ /* Task ID badge enhancement */
4074
+ .task-id-badge {
4075
+ display: inline-flex;
4076
+ align-items: center;
4077
+ justify-content: center;
4078
+ min-width: 2.5rem;
4079
+ padding: 0.25rem 0.5rem;
4080
+ background: hsl(var(--purple, 280 60% 50%));
4081
+ color: white;
4082
+ border-radius: 0.25rem;
4083
+ font-size: 0.75rem;
4084
+ font-weight: 600;
4085
+ flex-shrink: 0;
4086
+ }
4087
+
4088
+ /* Tasks list container */
4089
+ .tasks-list {
4090
+ display: flex;
4091
+ flex-direction: column;
4092
+ gap: 0.625rem;
4093
+ }
4094
+
4095
+ /* Plan section styling (for Plan tab) */
4096
+ .plan-section {
4097
+ background: hsl(var(--muted) / 0.3);
4098
+ border: 1px solid hsl(var(--border));
4099
+ border-radius: 0.5rem;
4100
+ padding: 1rem;
4101
+ margin-bottom: 1rem;
4102
+ }
4103
+
4104
+ .plan-section:last-child {
4105
+ margin-bottom: 0;
4106
+ }
4107
+
4108
+ .plan-section-title {
4109
+ font-size: 0.9rem;
4110
+ font-weight: 600;
4111
+ color: hsl(var(--foreground));
4112
+ margin-bottom: 0.75rem;
4113
+ display: flex;
4114
+ align-items: center;
4115
+ gap: 0.5rem;
4116
+ }
4117
+
4118
+ .plan-tab-content {
4119
+ display: flex;
4120
+ flex-direction: column;
4121
+ gap: 0;
4122
+ }
4123
+
4124
+ .tasks-tab-content {
4125
+ display: flex;
4126
+ flex-direction: column;
4127
+ gap: 1rem;
4128
+ }
4129
+
4130
+ /* ===================================
4131
+ Plan Summary Meta Badges
4132
+ =================================== */
4133
+
4134
+ /* Base meta badge style (plan summary) */
4135
+ .plan-meta-badges .meta-badge {
4136
+ display: inline-block;
4137
+ padding: 0.25rem 0.625rem;
4138
+ border-radius: 0.375rem;
4139
+ font-size: 0.75rem;
4140
+ font-weight: 500;
4141
+ white-space: nowrap;
4142
+ }
4143
+
4144
+ /* Feasibility badge */
4145
+ .meta-badge.feasibility {
4146
+ background: hsl(var(--success) / 0.15);
4147
+ color: hsl(var(--success));
4148
+ border: 1px solid hsl(var(--success) / 0.3);
4149
+ }
4150
+
4151
+ /* Effort badges */
4152
+ .meta-badge.effort {
4153
+ background: hsl(var(--muted));
4154
+ color: hsl(var(--foreground));
4155
+ }
4156
+
4157
+ .meta-badge.effort.low {
4158
+ background: hsl(142 70% 50% / 0.15);
4159
+ color: hsl(142 70% 35%);
4160
+ }
4161
+
4162
+ .meta-badge.effort.medium {
4163
+ background: hsl(30 90% 50% / 0.15);
4164
+ color: hsl(30 90% 40%);
4165
+ }
4166
+
4167
+ .meta-badge.effort.high {
4168
+ background: hsl(0 70% 50% / 0.15);
4169
+ color: hsl(0 70% 45%);
4170
+ }
4171
+
4172
+ /* Risk badges */
4173
+ .meta-badge.risk {
4174
+ background: hsl(var(--muted));
4175
+ color: hsl(var(--foreground));
4176
+ }
4177
+
4178
+ .meta-badge.risk.low {
4179
+ background: hsl(142 70% 50% / 0.15);
4180
+ color: hsl(142 70% 35%);
4181
+ }
4182
+
4183
+ .meta-badge.risk.medium {
4184
+ background: hsl(30 90% 50% / 0.15);
4185
+ color: hsl(30 90% 40%);
4186
+ }
4187
+
4188
+ .meta-badge.risk.high {
4189
+ background: hsl(0 70% 50% / 0.15);
4190
+ color: hsl(0 70% 45%);
4191
+ }
4192
+
4193
+ /* Severity badges */
4194
+ .meta-badge.severity {
4195
+ background: hsl(var(--muted));
4196
+ color: hsl(var(--foreground));
4197
+ }
4198
+
4199
+ .meta-badge.severity.low {
4200
+ background: hsl(142 70% 50% / 0.15);
4201
+ color: hsl(142 70% 35%);
4202
+ }
4203
+
4204
+ .meta-badge.severity.medium {
4205
+ background: hsl(30 90% 50% / 0.15);
4206
+ color: hsl(30 90% 40%);
4207
+ }
4208
+
4209
+ .meta-badge.severity.high,
4210
+ .meta-badge.severity.critical {
4211
+ background: hsl(0 70% 50% / 0.15);
4212
+ color: hsl(0 70% 45%);
4213
+ }
4214
+
4215
+ /* Complexity badge */
4216
+ .meta-badge.complexity {
4217
+ background: hsl(var(--muted));
4218
+ color: hsl(var(--muted-foreground));
4219
+ }
4220
+
4221
+ /* Time badge */
4222
+ .meta-badge.time {
4223
+ background: hsl(220 80% 50% / 0.15);
4224
+ color: hsl(220 80% 45%);
4225
+ }
4226
+
4227
+ /* Task item action badge */
4228
+ .meta-badge.action {
4229
+ background: hsl(var(--primary) / 0.15);
4230
+ color: hsl(var(--primary));
4231
+ }
4232
+
4233
+ /* Task item scope badge */
4234
+ .meta-badge.scope {
4235
+ background: hsl(var(--muted));
4236
+ color: hsl(var(--muted-foreground));
4237
+ font-family: var(--font-mono);
4238
+ font-size: 0.7rem;
4239
+ }
4240
+
4241
+ /* Task item impl steps badge */
4242
+ .meta-badge.impl {
4243
+ background: hsl(280 60% 50% / 0.1);
4244
+ color: hsl(280 60% 50%);
4245
+ }
4246
+
4247
+ /* Task item acceptance criteria badge */
4248
+ .meta-badge.accept {
4249
+ background: hsl(var(--success) / 0.1);
4250
+ color: hsl(var(--success));
4251
+ }
4252
+