@makemore/agent-frontend 2.8.1 → 2.9.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.
@@ -113,7 +113,8 @@
113
113
  align-items: center;
114
114
  justify-content: space-between;
115
115
  padding: 12px 16px;
116
- color: white;
116
+ background-color: var(--cw-primary, #0066cc);
117
+ color: var(--cw-header-text, white);
117
118
  border-radius: var(--cw-radius) var(--cw-radius) 0 0;
118
119
  }
119
120
 
@@ -131,7 +132,7 @@
131
132
  .cw-header-btn {
132
133
  background: transparent;
133
134
  border: none;
134
- color: white;
135
+ color: var(--cw-header-text, white);
135
136
  width: 28px;
136
137
  height: 28px;
137
138
  border-radius: 6px;
@@ -144,7 +145,7 @@
144
145
  }
145
146
 
146
147
  .cw-header-btn:hover:not(:disabled) {
147
- background: rgba(255, 255, 255, 0.2);
148
+ background: rgba(128, 128, 128, 0.2);
148
149
  }
149
150
 
150
151
  .cw-header-btn:disabled {
@@ -787,30 +788,219 @@
787
788
  }
788
789
  }
789
790
 
790
- /* Dark mode support */
791
+ /* ============================================================================
792
+ Dark Mode Support
793
+ .cw-dark = forced dark, .cw-auto = follows OS prefers-color-scheme
794
+ ============================================================================ */
795
+
796
+ /* Dark mode variable overrides */
797
+ .cw-container.cw-dark {
798
+ --cw-bg: #1e1e1e;
799
+ --cw-bg-muted: #2a2a2a;
800
+ --cw-text: #e0e0e0;
801
+ --cw-text-muted: #999999;
802
+ --cw-border: #3a3a3a;
803
+ --cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
804
+ }
805
+
791
806
  @media (prefers-color-scheme: dark) {
792
- :root {
793
- --cw-bg: #1a1a1a;
807
+ .cw-container.cw-auto {
808
+ --cw-bg: #1e1e1e;
794
809
  --cw-bg-muted: #2a2a2a;
795
- --cw-text: #f0f0f0;
810
+ --cw-text: #e0e0e0;
796
811
  --cw-text-muted: #999999;
797
812
  --cw-border: #3a3a3a;
813
+ --cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
798
814
  }
815
+ }
816
+
817
+ /* Dark mode color overrides for hardcoded elements */
818
+ .cw-dark .cw-message-tool-call,
819
+ .cw-dark .cw-tool-message.cw-tool-call {
820
+ background: rgba(59, 130, 246, 0.15);
821
+ color: #93c5fd;
822
+ border-color: rgba(59, 130, 246, 0.3);
823
+ }
824
+
825
+ .cw-dark .cw-message-tool-result,
826
+ .cw-dark .cw-tool-message.cw-tool-result {
827
+ background: rgba(34, 197, 94, 0.15);
828
+ color: #86efac;
829
+ border-color: rgba(34, 197, 94, 0.3);
830
+ }
831
+
832
+ .cw-dark .cw-tool-message.cw-tool-call {
833
+ border-left-color: #60a5fa;
834
+ }
835
+
836
+ .cw-dark .cw-tool-message.cw-tool-result {
837
+ border-left-color: #4ade80;
838
+ }
839
+
840
+ .cw-dark .cw-message-error,
841
+ .cw-dark .cw-error-bar {
842
+ background: rgba(239, 68, 68, 0.15);
843
+ color: #fca5a5;
844
+ border-color: rgba(239, 68, 68, 0.3);
845
+ }
846
+
847
+ .cw-dark .cw-tool-args,
848
+ .cw-dark .cw-tool-details {
849
+ background: rgba(255, 255, 255, 0.05);
850
+ }
851
+
852
+ .cw-dark .cw-message code {
853
+ background: rgba(255, 255, 255, 0.1);
854
+ }
855
+
856
+ .cw-dark .cw-dropdown-item-danger {
857
+ color: #fca5a5;
858
+ }
859
+
860
+ .cw-dark .cw-dropdown-item-danger:hover {
861
+ background: rgba(239, 68, 68, 0.15);
862
+ }
863
+
864
+ .cw-dark .cw-model-option-selected {
865
+ background: rgba(0, 102, 204, 0.2);
866
+ }
799
867
 
800
- .cw-message-tool-call {
868
+ .cw-dark .cw-model-option-selected:hover {
869
+ background: rgba(0, 102, 204, 0.25);
870
+ }
871
+
872
+ .cw-dark .cw-thinking-toggle.cw-thinking-enabled {
873
+ background: rgba(0, 102, 204, 0.25);
874
+ }
875
+
876
+ .cw-dark .cw-spinner-small {
877
+ border-color: #3a3a3a;
878
+ }
879
+
880
+ .cw-dark .cw-debug-payload-btn {
881
+ background: rgba(255, 255, 255, 0.1);
882
+ color: #999;
883
+ }
884
+
885
+ .cw-dark .cw-debug-payload-btn:hover {
886
+ background: rgba(255, 255, 255, 0.2);
887
+ }
888
+
889
+ .cw-dark .cw-attach-btn {
890
+ color: #999;
891
+ }
892
+
893
+ .cw-dark .cw-attach-btn:hover {
894
+ background: rgba(255, 255, 255, 0.05);
895
+ color: #ccc;
896
+ }
897
+
898
+ .cw-dark .cw-voice-select:focus,
899
+ .cw-dark .cw-dev-select:focus {
900
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
901
+ }
902
+
903
+ .cw-dark .cw-sidebar {
904
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
905
+ }
906
+
907
+ .cw-dark .cw-message table tr:nth-child(even) {
908
+ background: rgba(255, 255, 255, 0.02);
909
+ }
910
+
911
+ /* Auto dark mode - same overrides via media query */
912
+ @media (prefers-color-scheme: dark) {
913
+ .cw-auto .cw-message-tool-call,
914
+ .cw-auto .cw-tool-message.cw-tool-call {
915
+ background: rgba(59, 130, 246, 0.15);
801
916
  color: #93c5fd;
917
+ border-color: rgba(59, 130, 246, 0.3);
802
918
  }
803
919
 
804
- .cw-message-tool-result {
920
+ .cw-auto .cw-message-tool-result,
921
+ .cw-auto .cw-tool-message.cw-tool-result {
922
+ background: rgba(34, 197, 94, 0.15);
805
923
  color: #86efac;
924
+ border-color: rgba(34, 197, 94, 0.3);
925
+ }
926
+
927
+ .cw-auto .cw-tool-message.cw-tool-call {
928
+ border-left-color: #60a5fa;
929
+ }
930
+
931
+ .cw-auto .cw-tool-message.cw-tool-result {
932
+ border-left-color: #4ade80;
933
+ }
934
+
935
+ .cw-auto .cw-message-error,
936
+ .cw-auto .cw-error-bar {
937
+ background: rgba(239, 68, 68, 0.15);
938
+ color: #fca5a5;
939
+ border-color: rgba(239, 68, 68, 0.3);
940
+ }
941
+
942
+ .cw-auto .cw-tool-args,
943
+ .cw-auto .cw-tool-details {
944
+ background: rgba(255, 255, 255, 0.05);
806
945
  }
807
946
 
808
- .cw-message code {
947
+ .cw-auto .cw-message code {
809
948
  background: rgba(255, 255, 255, 0.1);
810
949
  }
811
950
 
812
- .cw-tool-args {
951
+ .cw-auto .cw-dropdown-item-danger {
952
+ color: #fca5a5;
953
+ }
954
+
955
+ .cw-auto .cw-dropdown-item-danger:hover {
956
+ background: rgba(239, 68, 68, 0.15);
957
+ }
958
+
959
+ .cw-auto .cw-model-option-selected {
960
+ background: rgba(0, 102, 204, 0.2);
961
+ }
962
+
963
+ .cw-auto .cw-model-option-selected:hover {
964
+ background: rgba(0, 102, 204, 0.25);
965
+ }
966
+
967
+ .cw-auto .cw-thinking-toggle.cw-thinking-enabled {
968
+ background: rgba(0, 102, 204, 0.25);
969
+ }
970
+
971
+ .cw-auto .cw-spinner-small {
972
+ border-color: #3a3a3a;
973
+ }
974
+
975
+ .cw-auto .cw-debug-payload-btn {
976
+ background: rgba(255, 255, 255, 0.1);
977
+ color: #999;
978
+ }
979
+
980
+ .cw-auto .cw-debug-payload-btn:hover {
981
+ background: rgba(255, 255, 255, 0.2);
982
+ }
983
+
984
+ .cw-auto .cw-attach-btn {
985
+ color: #999;
986
+ }
987
+
988
+ .cw-auto .cw-attach-btn:hover {
813
989
  background: rgba(255, 255, 255, 0.05);
990
+ color: #ccc;
991
+ }
992
+
993
+ .cw-auto .cw-voice-select:focus,
994
+ .cw-auto .cw-dev-select:focus {
995
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
996
+ }
997
+
998
+ .cw-auto .cw-sidebar {
999
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
1000
+ }
1001
+
1002
+ .cw-auto .cw-message table tr:nth-child(even) {
1003
+ background: rgba(255, 255, 255, 0.02);
814
1004
  }
815
1005
  }
816
1006
 
@@ -909,22 +1099,32 @@
909
1099
  }
910
1100
 
911
1101
  /* Dark mode adjustments for enhanced markdown */
1102
+ .cw-dark .cw-message pre {
1103
+ background: rgba(255, 255, 255, 0.05);
1104
+ border-color: rgba(255, 255, 255, 0.1);
1105
+ }
1106
+
1107
+ .cw-dark .cw-message table th {
1108
+ background: rgba(255, 255, 255, 0.05);
1109
+ }
1110
+
1111
+ .cw-dark .cw-message table th,
1112
+ .cw-dark .cw-message table td {
1113
+ border-color: rgba(255, 255, 255, 0.1);
1114
+ }
1115
+
912
1116
  @media (prefers-color-scheme: dark) {
913
- .cw-message pre {
1117
+ .cw-auto .cw-message pre {
914
1118
  background: rgba(255, 255, 255, 0.05);
915
1119
  border-color: rgba(255, 255, 255, 0.1);
916
1120
  }
917
1121
 
918
- .cw-message table th {
1122
+ .cw-auto .cw-message table th {
919
1123
  background: rgba(255, 255, 255, 0.05);
920
1124
  }
921
1125
 
922
- .cw-message table tr:nth-child(even) {
923
- background: rgba(255, 255, 255, 0.02);
924
- }
925
-
926
- .cw-message table th,
927
- .cw-message table td {
1126
+ .cw-auto .cw-message table th,
1127
+ .cw-auto .cw-message table td {
928
1128
  border-color: rgba(255, 255, 255, 0.1);
929
1129
  }
930
1130
  }
@@ -959,6 +1159,27 @@
959
1159
  --cw-radius-sm: 8px;
960
1160
  }
961
1161
 
1162
+ /* Dark mode for embedded containers */
1163
+ .cw-container-embedded.cw-dark {
1164
+ --cw-bg: #1e1e1e;
1165
+ --cw-bg-muted: #2a2a2a;
1166
+ --cw-text: #e0e0e0;
1167
+ --cw-text-muted: #999999;
1168
+ --cw-border: #3a3a3a;
1169
+ --cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
1170
+ }
1171
+
1172
+ @media (prefers-color-scheme: dark) {
1173
+ .cw-container-embedded.cw-auto {
1174
+ --cw-bg: #1e1e1e;
1175
+ --cw-bg-muted: #2a2a2a;
1176
+ --cw-text: #e0e0e0;
1177
+ --cw-text-muted: #999999;
1178
+ --cw-border: #3a3a3a;
1179
+ --cw-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
1180
+ }
1181
+ }
1182
+
962
1183
  .cw-container-embedded *,
963
1184
  .cw-container-embedded *::before,
964
1185
  .cw-container-embedded *::after {
@@ -1273,6 +1494,57 @@
1273
1494
  margin-top: 2px;
1274
1495
  }
1275
1496
 
1497
+ /* Thinking Toggle */
1498
+ .cw-model-selector {
1499
+ display: flex;
1500
+ align-items: center;
1501
+ gap: 8px;
1502
+ }
1503
+
1504
+ .cw-model-selector > .cw-model-btn {
1505
+ flex: 1;
1506
+ }
1507
+
1508
+ .cw-thinking-toggle {
1509
+ display: flex;
1510
+ align-items: center;
1511
+ justify-content: center;
1512
+ width: 36px;
1513
+ height: 36px;
1514
+ padding: 0;
1515
+ border: 1px solid var(--cw-border);
1516
+ border-radius: var(--cw-radius-sm);
1517
+ background: var(--cw-bg);
1518
+ cursor: pointer;
1519
+ transition: all 0.2s ease;
1520
+ flex-shrink: 0;
1521
+ }
1522
+
1523
+ .cw-thinking-toggle:hover {
1524
+ border-color: var(--cw-primary);
1525
+ background: var(--cw-bg-muted);
1526
+ }
1527
+
1528
+ .cw-thinking-toggle.cw-thinking-enabled {
1529
+ background: rgba(0, 102, 204, 0.15);
1530
+ border-color: var(--cw-primary);
1531
+ }
1532
+
1533
+ .cw-thinking-toggle:disabled {
1534
+ opacity: 0.5;
1535
+ cursor: not-allowed;
1536
+ }
1537
+
1538
+ .cw-thinking-icon {
1539
+ font-size: 18px;
1540
+ }
1541
+
1542
+ .cw-thinking-badge {
1543
+ margin-left: 4px;
1544
+ font-size: 12px;
1545
+ opacity: 0.7;
1546
+ }
1547
+
1276
1548
  /* ============================================================================
1277
1549
  Tool Call Cards (Claude-style)
1278
1550
  ============================================================================ */
@@ -2111,3 +2383,107 @@
2111
2383
  .cw-task-remove-btn:hover {
2112
2384
  color: #ef4444;
2113
2385
  }
2386
+
2387
+
2388
+ /* =============================================================================
2389
+ Dev Toolbar - System/Agent/Version Picker
2390
+ ============================================================================= */
2391
+
2392
+ .cw-dev-toolbar {
2393
+ display: flex;
2394
+ align-items: center;
2395
+ gap: 8px;
2396
+ padding: 6px 12px;
2397
+ background: var(--cw-bg-muted);
2398
+ border-bottom: 1px solid var(--cw-border);
2399
+ font-size: 12px;
2400
+ flex-shrink: 0;
2401
+ }
2402
+
2403
+ .cw-dev-toolbar-label {
2404
+ display: flex;
2405
+ align-items: center;
2406
+ gap: 4px;
2407
+ color: var(--cw-text-muted);
2408
+ font-weight: 600;
2409
+ font-size: 11px;
2410
+ text-transform: uppercase;
2411
+ letter-spacing: 0.5px;
2412
+ white-space: nowrap;
2413
+ flex-shrink: 0;
2414
+ }
2415
+
2416
+ .cw-dev-toolbar-icon {
2417
+ font-size: 14px;
2418
+ }
2419
+
2420
+ .cw-dev-toolbar-selectors {
2421
+ display: flex;
2422
+ align-items: center;
2423
+ gap: 8px;
2424
+ flex: 1;
2425
+ overflow-x: auto;
2426
+ }
2427
+
2428
+ .cw-dev-select-group {
2429
+ display: flex;
2430
+ align-items: center;
2431
+ gap: 4px;
2432
+ flex-shrink: 0;
2433
+ }
2434
+
2435
+ .cw-dev-label {
2436
+ color: var(--cw-text-muted);
2437
+ font-size: 11px;
2438
+ font-weight: 500;
2439
+ white-space: nowrap;
2440
+ }
2441
+
2442
+ .cw-dev-select {
2443
+ appearance: none;
2444
+ -webkit-appearance: none;
2445
+ background: var(--cw-bg);
2446
+ border: 1px solid var(--cw-border);
2447
+ border-radius: 4px;
2448
+ padding: 3px 22px 3px 8px;
2449
+ font-size: 12px;
2450
+ color: var(--cw-text);
2451
+ cursor: pointer;
2452
+ max-width: 140px;
2453
+ overflow: hidden;
2454
+ text-overflow: ellipsis;
2455
+ white-space: nowrap;
2456
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
2457
+ background-repeat: no-repeat;
2458
+ background-position: right 6px center;
2459
+ }
2460
+
2461
+ .cw-dev-select:hover {
2462
+ border-color: var(--cw-primary);
2463
+ }
2464
+
2465
+ .cw-dev-select:focus {
2466
+ outline: none;
2467
+ border-color: var(--cw-primary);
2468
+ box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
2469
+ }
2470
+
2471
+ .cw-dev-select:disabled {
2472
+ opacity: 0.5;
2473
+ cursor: not-allowed;
2474
+ }
2475
+
2476
+ .cw-dev-badge {
2477
+ display: inline-block;
2478
+ background: var(--cw-bg);
2479
+ border: 1px solid var(--cw-border);
2480
+ border-radius: 4px;
2481
+ padding: 3px 8px;
2482
+ font-size: 12px;
2483
+ color: var(--cw-text);
2484
+ white-space: nowrap;
2485
+ max-width: 140px;
2486
+ overflow: hidden;
2487
+ text-overflow: ellipsis;
2488
+ opacity: 0.8;
2489
+ }