eb3477aba4
Add Command Center controls for inspecting local or remote node system telemetry. - add a System area node selector with local defaults, remote stats loading, and per-node sample resets - expose proxied node system-stats fetching and route local node requests through the shared stats builder - route Vitest kill requests through node-aware proxy plumbing and cover node stats behavior with tests - add localized node selector copy, docs, and a published package changeset Files changed: .changeset/fuzzy-nodes-watch.md | 5 + docs/dashboard-guide.md | 4 +- packages/dashboard/app/api/legacy.ts | 14 +- .../__tests__/CommandCenter.mobile-scroll.test.tsx | 2 + .../__tests__/CommandCenter.tablet-layout.test.tsx | 2 + .../__tests__/CommandCenter.test.tsx | 1 + .../__tests__/SystemStatsArea.test.tsx | 160 +++++++++++++++++ .../command-center/areas/SystemStatsArea.css | 13 ++ .../command-center/areas/SystemStatsArea.tsx | 72 +++++++- .../dashboard/src/__tests__/routes-system.test.ts | 122 +++++++++++++ packages/dashboard/src/routes.ts | 190 +++++++++++++-------- packages/i18n/locales/en/app.json | 10 ++ packages/i18n/locales/es/app.json | 10 ++ packages/i18n/locales/fr/app.json | 10 ++ packages/i18n/locales/ko/app.json | 10 ++ packages/i18n/locales/zh-CN/app.json | 10 ++ packages/i18n/locales/zh-TW/app.json | 10 ++ 17 files changed, 562 insertions(+), 83 deletions(-) Fusion-Task-Id: FN-6835 Fusion-Task-Lineage: 8f9a047b-78d0-477e-824e-f7592966cdc0
144 lines
3.0 KiB
CSS
144 lines
3.0 KiB
CSS
/*
|
|
FNXC:CommandCenter 2026-06-18-22:31:
|
|
The Command Center System area replaces the standalone System Stats modal with graph-heavy telemetry while preserving the Command Center mobile scroll contract; FN-6680 keeps System chart grids shrink-bounded because jsdom cannot prove real mobile gauge/sparkline layout.
|
|
*/
|
|
|
|
.cc-system-refresh {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.cc-system-refresh .btn-icon {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cc-system-node-selector {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--text);
|
|
}
|
|
|
|
.cc-system-node-selector .input {
|
|
min-inline-size: 10rem;
|
|
}
|
|
|
|
.cc-system-gauges .cc-stat-card {
|
|
min-block-size: 100%;
|
|
}
|
|
|
|
.cc-system-chart-grid {
|
|
min-inline-size: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.cc-system-chart-grid .cc-stat-card {
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.cc-system-section-title-with-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.cc-system-section-title-with-icon svg {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/*
|
|
FNXC:CommandCenterStyling 2026-06-18-22:38:
|
|
System control cards sit beside chart/stat cards, so FN-6680 gives them the same tokenized border, radius, surface, gap, and padding rhythm instead of relying on incidental global .card styling.
|
|
*/
|
|
.cc-system-vitest-card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
.cc-system-vitest-card .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.cc-system-toggle-row,
|
|
.cc-system-threshold-row,
|
|
.cc-system-threshold-controls {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.cc-system-toggle-row,
|
|
.cc-system-threshold-row {
|
|
color: var(--text);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.cc-system-threshold-controls input[type="range"] {
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.cc-system-threshold-controls .input {
|
|
inline-size: 5rem;
|
|
}
|
|
|
|
.cc-system-note {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.cc-system-note--error,
|
|
.cc-system-value--critical {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.cc-system-value--warning {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.cc-system-note--success {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cc-system-refresh {
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cc-system-chart-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.cc-system-node-selector,
|
|
.cc-system-vitest-card,
|
|
.cc-system-toggle-row,
|
|
.cc-system-threshold-row,
|
|
.cc-system-threshold-controls {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.cc-system-node-selector .input,
|
|
.cc-system-vitest-card .btn,
|
|
.cc-system-threshold-controls .input {
|
|
inline-size: 100%;
|
|
}
|
|
}
|