@qodalis/cli 2.0.0-beta.11 → 2.0.0-beta.13

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.
@@ -171,6 +171,8 @@
171
171
  overflow-x: auto;
172
172
  overflow-y: hidden;
173
173
  flex-shrink: 0;
174
+ scrollbar-width: thin;
175
+ scrollbar-color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.3)) transparent;
174
176
  }
175
177
 
176
178
  .cli-panel-tabs::-webkit-scrollbar {
@@ -809,6 +811,398 @@
809
811
  left: auto;
810
812
  }
811
813
 
814
+ /* ─── Status indicators ──────────────────────────────────── */
815
+
816
+ .cli-panel-status-indicators {
817
+ display: flex;
818
+ align-items: center;
819
+ gap: 14px;
820
+ margin-left: 24px;
821
+ font-size: 12px;
822
+ overflow: hidden;
823
+ white-space: nowrap;
824
+ }
825
+
826
+ .cli-panel-status-item {
827
+ display: flex;
828
+ align-items: center;
829
+ gap: 5px;
830
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.6));
831
+ }
832
+
833
+ .cli-panel-status-dot {
834
+ width: 6px;
835
+ height: 6px;
836
+ border-radius: 50%;
837
+ flex-shrink: 0;
838
+ background: var(--cli-status-neutral, #6b7280);
839
+ }
840
+
841
+ .cli-panel-status-dot.dot-idle {
842
+ background: var(--cli-status-idle, #3fb950);
843
+ }
844
+
845
+ .cli-panel-status-dot.dot-running {
846
+ background: var(--cli-status-running, #f0883e);
847
+ animation: cliStatusPulse 1.5s ease-in-out infinite;
848
+ }
849
+
850
+ .cli-panel-status-dot.dot-error {
851
+ background: var(--cli-status-error, #f85149);
852
+ }
853
+
854
+ .cli-panel-status-icon {
855
+ flex-shrink: 0;
856
+ }
857
+
858
+ .cli-panel-status-icon.status-success {
859
+ color: var(--cli-status-idle, #3fb950);
860
+ }
861
+
862
+ .cli-panel-status-icon.status-error {
863
+ color: var(--cli-status-error, #f85149);
864
+ }
865
+
866
+ .cli-panel-status-label {
867
+ overflow: hidden;
868
+ text-overflow: ellipsis;
869
+ }
870
+
871
+ .cli-panel-status-item.status-muted {
872
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.4));
873
+ }
874
+
875
+ .cli-panel-status-item.status-text {
876
+ max-width: 200px;
877
+ }
878
+
879
+ .cli-panel-status-item.status-text.level-info {
880
+ color: var(--cli-panel-accent, #818cf8);
881
+ }
882
+
883
+ .cli-panel-status-item.status-text.level-success {
884
+ color: var(--cli-status-idle, #3fb950);
885
+ }
886
+
887
+ .cli-panel-status-item.status-text.level-warn {
888
+ color: var(--cli-status-running, #f0883e);
889
+ }
890
+
891
+ .cli-panel-status-item.status-text.level-error {
892
+ color: var(--cli-status-error, #f85149);
893
+ }
894
+
895
+ .cli-panel-status-item.status-running {
896
+ color: var(--cli-status-running, #f0883e);
897
+ }
898
+
899
+ .cli-panel-status-item.status-clickable {
900
+ cursor: pointer;
901
+ border-radius: 4px;
902
+ padding: 2px 6px;
903
+ margin: -2px -6px;
904
+ transition: background-color 0.15s ease;
905
+ }
906
+
907
+ .cli-panel-status-item.status-clickable:hover {
908
+ background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
909
+ }
910
+
911
+ /* ─── Compact status indicators (vertical positions) ───── */
912
+
913
+ .cli-panel-status-indicators-compact {
914
+ display: none;
915
+ }
916
+
917
+ .cli-panel-wrapper[data-position="left"] .cli-panel-status-indicators-compact,
918
+ .cli-panel-wrapper[data-position="right"] .cli-panel-status-indicators-compact {
919
+ display: flex;
920
+ flex-direction: column;
921
+ align-items: center;
922
+ gap: 10px;
923
+ padding: 12px 0;
924
+ }
925
+
926
+ .cli-panel-status-compact-item {
927
+ display: flex;
928
+ align-items: center;
929
+ justify-content: center;
930
+ width: 20px;
931
+ height: 20px;
932
+ cursor: default;
933
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.6));
934
+ font-size: 12px;
935
+ }
936
+
937
+ .cli-panel-status-compact-item.status-clickable {
938
+ cursor: pointer;
939
+ border-radius: 4px;
940
+ }
941
+
942
+ .cli-panel-status-compact-item.status-clickable:hover {
943
+ background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
944
+ }
945
+
946
+ .cli-panel-status-compact-item.status-muted {
947
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.4));
948
+ }
949
+
950
+ .cli-panel-status-compact-dot {
951
+ width: 6px;
952
+ height: 6px;
953
+ border-radius: 50%;
954
+ flex-shrink: 0;
955
+ }
956
+
957
+ .cli-panel-status-compact-dot.level-info {
958
+ background: var(--cli-panel-accent, #818cf8);
959
+ }
960
+
961
+ .cli-panel-status-compact-dot.level-success {
962
+ background: var(--cli-status-idle, #3fb950);
963
+ }
964
+
965
+ .cli-panel-status-compact-dot.level-warn {
966
+ background: var(--cli-status-running, #f0883e);
967
+ }
968
+
969
+ .cli-panel-status-compact-dot.level-error {
970
+ background: var(--cli-status-error, #f85149);
971
+ }
972
+
973
+ /* ─── Tab dot ────────────────────────────────────────────── */
974
+
975
+ .cli-panel-tab-dot {
976
+ width: 6px;
977
+ height: 6px;
978
+ border-radius: 50%;
979
+ flex-shrink: 0;
980
+ background: var(--cli-status-idle, #3fb950);
981
+ }
982
+
983
+ .cli-panel-tab-dot.dot-running {
984
+ background: var(--cli-status-running, #f0883e);
985
+ animation: cliStatusPulse 1.5s ease-in-out infinite;
986
+ }
987
+
988
+ .cli-panel-tab-dot.dot-error {
989
+ background: var(--cli-status-error, #f85149);
990
+ }
991
+
992
+ /* ─── Services / Servers dropdown ────────────────────────── */
993
+
994
+ .cli-panel-services-dropdown {
995
+ position: fixed;
996
+ background-color: var(--cli-panel-header-bg, #1f2937);
997
+ border: 1px solid var(--cli-panel-border, #374151);
998
+ border-radius: 8px;
999
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
1000
+ z-index: 1100;
1001
+ min-width: 260px;
1002
+ max-width: 380px;
1003
+ overflow: hidden;
1004
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1005
+ }
1006
+
1007
+ .cli-panel-services-dropdown-header {
1008
+ padding: 10px 14px 8px;
1009
+ font-size: 11px;
1010
+ font-weight: 600;
1011
+ text-transform: uppercase;
1012
+ letter-spacing: 0.05em;
1013
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
1014
+ border-bottom: 1px solid var(--cli-panel-border, #374151);
1015
+ }
1016
+
1017
+ .cli-panel-services-dropdown-list {
1018
+ max-height: 240px;
1019
+ overflow-y: auto;
1020
+ scrollbar-width: thin;
1021
+ scrollbar-color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2)) transparent;
1022
+ }
1023
+
1024
+ .cli-panel-services-dropdown-list::-webkit-scrollbar {
1025
+ width: 6px;
1026
+ }
1027
+
1028
+ .cli-panel-services-dropdown-list::-webkit-scrollbar-track {
1029
+ background: transparent;
1030
+ }
1031
+
1032
+ .cli-panel-services-dropdown-list::-webkit-scrollbar-thumb {
1033
+ background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2));
1034
+ border-radius: 3px;
1035
+ }
1036
+
1037
+ .cli-panel-services-dropdown-list::-webkit-scrollbar-thumb:hover {
1038
+ background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.35));
1039
+ }
1040
+
1041
+ .cli-panel-services-dropdown-item {
1042
+ display: flex;
1043
+ align-items: flex-start;
1044
+ gap: 10px;
1045
+ padding: 10px 14px;
1046
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
1047
+ transition: background-color 0.15s ease;
1048
+ }
1049
+
1050
+ .cli-panel-services-dropdown-item:last-child {
1051
+ border-bottom: none;
1052
+ }
1053
+
1054
+ .cli-panel-services-dropdown-item:hover {
1055
+ background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.08));
1056
+ }
1057
+
1058
+ .cli-panel-svc-dot {
1059
+ width: 7px;
1060
+ height: 7px;
1061
+ border-radius: 50%;
1062
+ flex-shrink: 0;
1063
+ margin-top: 5px;
1064
+ }
1065
+
1066
+ .cli-panel-svc-dot.svc-running {
1067
+ background: var(--cli-status-idle, #3fb950);
1068
+ }
1069
+
1070
+ .cli-panel-svc-dot.svc-stopped {
1071
+ background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.3));
1072
+ }
1073
+
1074
+ .cli-panel-svc-info {
1075
+ flex: 1;
1076
+ min-width: 0;
1077
+ display: flex;
1078
+ flex-direction: column;
1079
+ gap: 2px;
1080
+ }
1081
+
1082
+ .cli-panel-svc-name {
1083
+ font-size: 13px;
1084
+ font-weight: 500;
1085
+ color: var(--cli-panel-text, rgba(255, 255, 255, 0.87));
1086
+ overflow: hidden;
1087
+ text-overflow: ellipsis;
1088
+ white-space: nowrap;
1089
+ }
1090
+
1091
+ .cli-panel-svc-desc {
1092
+ font-size: 11px;
1093
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
1094
+ overflow: hidden;
1095
+ text-overflow: ellipsis;
1096
+ white-space: nowrap;
1097
+ }
1098
+
1099
+ .cli-panel-svc-status {
1100
+ font-size: 11px;
1101
+ flex-shrink: 0;
1102
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
1103
+ margin-top: 1px;
1104
+ }
1105
+
1106
+ .cli-panel-srv-meta {
1107
+ display: flex;
1108
+ flex-direction: column;
1109
+ align-items: flex-end;
1110
+ gap: 2px;
1111
+ flex-shrink: 0;
1112
+ }
1113
+
1114
+ .cli-panel-services-dropdown-empty {
1115
+ padding: 16px 14px;
1116
+ font-size: 12px;
1117
+ color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.4));
1118
+ text-align: center;
1119
+ }
1120
+
1121
+ /* ─── Glow line ──────────────────────────────────────────── */
1122
+
1123
+ .cli-panel-glow-line {
1124
+ position: absolute;
1125
+ bottom: 0;
1126
+ left: 0;
1127
+ right: 0;
1128
+ height: 2px;
1129
+ background: linear-gradient(90deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
1130
+ background-size: 200% 100%;
1131
+ opacity: 0.4;
1132
+ animation: cliGlowShift 8s ease-in-out infinite;
1133
+ transition: opacity 0.6s ease;
1134
+ pointer-events: none;
1135
+ }
1136
+
1137
+ .cli-panel-glow-line.glow-active {
1138
+ opacity: 0.8;
1139
+ animation-duration: 3s;
1140
+ }
1141
+
1142
+ /* Glow line for vertical positions */
1143
+ .cli-panel-wrapper[data-position="left"] .cli-panel-glow-line {
1144
+ bottom: auto;
1145
+ top: 0;
1146
+ left: auto;
1147
+ right: 0;
1148
+ width: 2px;
1149
+ height: 100%;
1150
+ background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
1151
+ background-size: 100% 200%;
1152
+ }
1153
+
1154
+ .cli-panel-wrapper[data-position="right"] .cli-panel-glow-line {
1155
+ bottom: auto;
1156
+ top: 0;
1157
+ left: 0;
1158
+ right: auto;
1159
+ width: 2px;
1160
+ height: 100%;
1161
+ background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
1162
+ background-size: 100% 200%;
1163
+ }
1164
+
1165
+ /* ─── Animations ─────────────────────────────────────────── */
1166
+
1167
+ @keyframes cliStatusPulse {
1168
+ 0%, 100% { opacity: 1; }
1169
+ 50% { opacity: 0.3; }
1170
+ }
1171
+
1172
+ @keyframes cliGlowShift {
1173
+ 0% { background-position: 200% center; }
1174
+ 100% { background-position: -200% center; }
1175
+ }
1176
+
1177
+ /* ─── Accessibility ──────────────────────────────────────── */
1178
+
1179
+ @media (prefers-reduced-motion: reduce) {
1180
+ .cli-panel-glow-line,
1181
+ .cli-panel-status-dot,
1182
+ .cli-panel-tab-dot {
1183
+ animation: none !important;
1184
+ }
1185
+ }
1186
+
1187
+ /* ─── Scrollbar styling — scoped to CLI containers ────────── */
1188
+
1189
+ .cli-panel-wrapper .xterm .xterm-viewport {
1190
+ overscroll-behavior: contain;
1191
+ }
1192
+
1193
+ .cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar {
1194
+ width: 8px;
1195
+ }
1196
+
1197
+ .cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb {
1198
+ background: #444;
1199
+ border-radius: 4px;
1200
+ }
1201
+
1202
+ .cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
1203
+ background: #666;
1204
+ }
1205
+
812
1206
  /* ─── Global helper ──────────────────────────────────────── */
813
1207
 
814
1208
  body.cli-pane-resizing {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qodalis/cli",
3
- "version": "2.0.0-beta.11",
3
+ "version": "2.0.0-beta.13",
4
4
  "description": "Framework-agnostic CLI engine for @qodalis terminal applications.",
5
5
  "author": "Nicolae Lupei, Qodalis Solutions",
6
6
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "./assets/*": "./assets/*"
31
31
  },
32
32
  "dependencies": {
33
- "@qodalis/cli-core": "2.0.0-beta.11",
33
+ "@qodalis/cli-core": "2.0.0-beta.13",
34
34
  "@xterm/xterm": "^5.5.0",
35
35
  "@xterm/addon-fit": "^0.10.0",
36
36
  "@xterm/addon-web-links": "^0.11.0",