Skip to content

Commit 3791c14

Browse files
Andrew Bakerclaude
Andrew Baker
and
claude
committed
v1.8.0 — CS Monitor: Issues tab, Environment card, Request tab, Transients tab, Template hierarchy tab, scroll fix
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 3fd1c18 commit 3791c14

File tree

3 files changed

+768
-6
lines changed

3 files changed

+768
-6
lines changed

‎assets/cs-perf-monitor.css‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,7 @@
373373
flex: 1;
374374
overflow-y: auto;
375375
overflow-x: hidden;
376+
overscroll-behavior: contain;
376377
}
377378
.cs-tbl-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
378379
.cs-tbl-wrap::-webkit-scrollbar-track { background: #1e1e1e; }
@@ -546,6 +547,7 @@
546547
#cs-err-list {
547548
padding: 8px 10px;
548549
overflow-y: auto;
550+
overscroll-behavior: contain;
549551
flex: 1;
550552
}
551553
/* ── Debug toggle bar ───────────────────────────────────────────────────── */
@@ -611,6 +613,7 @@
611613
/* ── Log list ────────────────────────────────────────────────────────────── */
612614
.cs-log-list {
613615
overflow-y: auto;
616+
overscroll-behavior: contain;
614617
flex: 1;
615618
padding: 4px 6px;
616619
}
@@ -815,6 +818,7 @@ td.c-n { color: #555; font-size: 10px; text-align: right; padding-right: 6px; }
815818

816819
#cs-summary-wrap {
817820
overflow-y: auto;
821+
overscroll-behavior: contain;
818822
flex: 1;
819823
padding: 10px 12px 12px;
820824
display: flex;
@@ -1180,3 +1184,181 @@ td.c-n { color: #555; font-size: 10px; text-align: right; padding-right: 6px; }
11801184
.cs-ptable td.c-r { display: none; }
11811185
}
11821186

1187+
/* ── Issues tab count badge colours ─────────────────────────────────────── */
1188+
.cs-issues-cnt-critical { background: rgba(244,71,71,.25) !important; color: #f44747 !important; }
1189+
.cs-issues-cnt-warning { background: rgba(206,145,120,.25) !important; color: #ce9178 !important; }
1190+
1191+
/* ── Issues list ─────────────────────────────────────────────────────────── */
1192+
.cs-issues-wrap { padding: 0; }
1193+
1194+
.cs-issues-group { }
1195+
.cs-issues-group-title {
1196+
font-size: 10px;
1197+
font-weight: 700;
1198+
letter-spacing: .07em;
1199+
text-transform: uppercase;
1200+
color: #666;
1201+
padding: 8px 10px 4px;
1202+
position: sticky;
1203+
top: 0;
1204+
background: #1e1e1e;
1205+
z-index: 1;
1206+
}
1207+
1208+
.cs-issue-row {
1209+
padding: 6px 10px 5px;
1210+
border-left: 3px solid transparent;
1211+
border-bottom: 1px solid #252525;
1212+
cursor: pointer;
1213+
transition: background .1s;
1214+
}
1215+
.cs-issue-row:hover { background: #2a2d2e; }
1216+
1217+
.cs-issue-critical { border-left-color: #f44747; background: rgba(244,71,71,.05); }
1218+
.cs-issue-warning { border-left-color: #ce9178; }
1219+
.cs-issue-info { border-left-color: #4ec9b0; }
1220+
1221+
.cs-issue-top {
1222+
display: flex;
1223+
align-items: center;
1224+
gap: 8px;
1225+
min-width: 0;
1226+
}
1227+
.cs-issue-title {
1228+
flex: 1;
1229+
font-size: 12px;
1230+
color: #d4d4d4;
1231+
white-space: nowrap;
1232+
overflow: hidden;
1233+
text-overflow: ellipsis;
1234+
}
1235+
.cs-issue-arrow { color: #444; font-size: 11px; flex-shrink: 0; }
1236+
.cs-issue-detail {
1237+
font-size: 10px;
1238+
color: #777;
1239+
font-family: 'Consolas', 'Monaco', monospace;
1240+
margin-top: 2px;
1241+
white-space: nowrap;
1242+
overflow: hidden;
1243+
text-overflow: ellipsis;
1244+
}
1245+
1246+
/* ── Request tab ─────────────────────────────────────────────────────────── */
1247+
.cs-request-wrap { padding: 0; }
1248+
.cs-req-body { padding: 8px 10px 16px; }
1249+
1250+
.cs-req-section { margin-bottom: 14px; }
1251+
.cs-req-section-title {
1252+
font-size: 10px;
1253+
font-weight: 700;
1254+
letter-spacing: .07em;
1255+
text-transform: uppercase;
1256+
color: #555;
1257+
padding-bottom: 4px;
1258+
border-bottom: 1px solid #2a2a2a;
1259+
margin-bottom: 4px;
1260+
}
1261+
1262+
.cs-req-kv {
1263+
display: flex;
1264+
gap: 10px;
1265+
padding: 3px 0;
1266+
border-bottom: 1px solid #1c1c1c;
1267+
align-items: baseline;
1268+
}
1269+
.cs-req-kv:last-child { border-bottom: none; }
1270+
.cs-req-k {
1271+
font-size: 11px;
1272+
color: #9cdcfe;
1273+
width: 110px;
1274+
flex-shrink: 0;
1275+
}
1276+
.cs-req-v {
1277+
font-size: 11px;
1278+
color: #d4d4d4;
1279+
flex: 1;
1280+
word-break: break-all;
1281+
}
1282+
.cs-req-mono {
1283+
font-family: 'Consolas', 'Monaco', monospace;
1284+
color: #ce9178;
1285+
font-size: 11px;
1286+
}
1287+
.cs-req-empty {
1288+
font-size: 11px;
1289+
color: #444;
1290+
font-style: italic;
1291+
padding: 3px 0;
1292+
}
1293+
.cs-req-tags {
1294+
display: flex;
1295+
flex-wrap: wrap;
1296+
gap: 4px;
1297+
padding: 4px 0;
1298+
}
1299+
.cs-req-tag {
1300+
font-family: 'Consolas', 'Monaco', monospace;
1301+
font-size: 10px;
1302+
background: #2a2a2a;
1303+
color: #9cdcfe;
1304+
padding: 1px 6px;
1305+
border-radius: 3px;
1306+
border: 1px solid #3c3c3c;
1307+
}
1308+
1309+
/* ── Environment card ────────────────────────────────────────────────────── */
1310+
.cs-sum-card-env .cs-sum-card-title { color: #dcdcaa; }
1311+
.cs-sum-card-env .cs-sum-card-stat { color: #dcdcaa; font-size: 13px; }
1312+
1313+
/* ── Template hierarchy tab ──────────────────────────────────────────────── */
1314+
.cs-template-wrap { padding: 0; }
1315+
1316+
.cs-tmpl-group { margin-bottom: 6px; }
1317+
.cs-tmpl-type-hdr {
1318+
font-size: 10px;
1319+
font-weight: 700;
1320+
letter-spacing: .07em;
1321+
text-transform: uppercase;
1322+
color: #555;
1323+
padding: 7px 10px 4px;
1324+
background: #1e1e1e;
1325+
position: sticky;
1326+
top: 0;
1327+
z-index: 1;
1328+
border-bottom: 1px solid #2a2a2a;
1329+
}
1330+
1331+
.cs-tmpl-row {
1332+
display: flex;
1333+
align-items: center;
1334+
gap: 8px;
1335+
padding: 4px 10px;
1336+
border-bottom: 1px solid #1c1c1c;
1337+
font-size: 11px;
1338+
}
1339+
.cs-tmpl-icon { width: 14px; flex-shrink: 0; text-align: center; }
1340+
.cs-tmpl-file { flex: 1; font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; }
1341+
1342+
.cs-tmpl-active .cs-tmpl-icon { color: #4ec9b0; }
1343+
.cs-tmpl-active .cs-tmpl-file { color: #4ec9b0; font-weight: 600; }
1344+
.cs-tmpl-found .cs-tmpl-icon { color: #555; }
1345+
.cs-tmpl-found .cs-tmpl-file { color: #888; }
1346+
.cs-tmpl-miss .cs-tmpl-icon { color: #3c3c3c; }
1347+
.cs-tmpl-miss .cs-tmpl-file { color: #3c3c3c; text-decoration: line-through; }
1348+
1349+
.cs-tmpl-loc {
1350+
font-size: 9px;
1351+
font-weight: 700;
1352+
letter-spacing: .05em;
1353+
text-transform: uppercase;
1354+
padding: 1px 5px;
1355+
border-radius: 3px;
1356+
flex-shrink: 0;
1357+
}
1358+
.cs-tmpl-loc-child { background: rgba(78,201,176,.15); color: #4ec9b0; }
1359+
.cs-tmpl-loc-parent { background: rgba(156,220,254,.12); color: #9cdcfe; }
1360+
1361+
/* ── Transients tab ──────────────────────────────────────────────────────── */
1362+
.c-tk { flex: 1; min-width: 180px; font-family: 'Consolas','Monaco',monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1363+
.c-tg, .c-th, .c-tm, .c-ts, .c-td, .c-tr { width: 52px; text-align: right; }
1364+
.cs-trans-miss { color: #ce9178; font-weight: 700; }

0 commit comments

Comments
 (0)