feat(sync): /api/sync/health endpoint + dashboard health pill + MALFORMED UI
Backend:
- GET /api/sync/health returns {last_sync_at, last_sync_status,
last_halt_reason, recent_phase_failures, escalation_phase, is_healthy}.
healthy when last run was completed (or none yet), no phase has
tripped the 3-in-a-row escalation, and recent failures <= 1.
- Dashboard + run-level endpoints include `malformed` count so the
Defecte pill can render.
Frontend:
- Health pill in .sync-card-controls with three states — healthy
(success green, check icon), warning (amber, triangle), escalated
(error red, x-octagon + glow). Tooltip exposes the halt reason and
the top phases with recent failures.
- Status-dot + badge add MALFORMED treatment via --compare orange,
distinct from ERROR red. DESIGN.md notes the diagnostic rationale
(ERROR = runtime, MALFORMED = payload source issue).
- Defecte filter pill on dashboard + logs pages. Mobile segmented
control includes Defecte count. Counts wired to the malformed key.
- startSync() shows a native confirm modal when state is
halted_escalation — operator override still possible, not silenced.
- ORDER_STATUS.MALFORMED mirror added to shared.js.
- Cache-bust: style.css v46, shared.js v47, dashboard.js v52,
logs.js v16.
5 endpoint tests cover empty state, completed, failed, escalated,
single-failure warning. Full CI: 257 unit + 33 e2e green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -495,6 +495,7 @@ input[type="checkbox"] {
|
||||
.dot-yellow { background: var(--warning); box-shadow: 0 0 6px 2px rgba(202,138,4,0.3); }
|
||||
.dot-red { background: var(--error); box-shadow: 0 0 8px 2px rgba(220,38,38,0.35); }
|
||||
.dot-gray { background: var(--cancelled); }
|
||||
.dot-orange { background: var(--compare); box-shadow: 0 0 8px 2px rgba(234,88,12,0.35); }
|
||||
.dot-blue { background: var(--info); }
|
||||
|
||||
/* ── Flat row (mobile + desktop) ────────────────── */
|
||||
@@ -805,6 +806,45 @@ tr.mapping-deleted td {
|
||||
.sync-status-dot.running { background: var(--info); animation: pulse-dot 2s ease-in-out infinite; }
|
||||
.sync-status-dot.completed { background: var(--success); }
|
||||
.sync-status-dot.failed { background: var(--error); }
|
||||
.sync-status-dot.malformed { background: var(--compare); box-shadow: 0 0 8px 2px rgba(234,88,12,0.35); }
|
||||
|
||||
/* ── Sync health pill (dashboard only) ────────────── */
|
||||
.health-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
min-height: 32px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
.health-pill i { font-size: 0.9375rem; line-height: 1; }
|
||||
.health-pill.healthy {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
border-color: var(--success);
|
||||
}
|
||||
.health-pill.warning {
|
||||
background: var(--warning-light);
|
||||
color: var(--warning-text);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
.health-pill.escalated {
|
||||
background: var(--error-light);
|
||||
color: var(--error-text);
|
||||
border-color: var(--error);
|
||||
box-shadow: 0 0 8px 2px rgba(220,38,38,0.35);
|
||||
}
|
||||
/* Ensure adequate touch target on mobile */
|
||||
@media (max-width: 600px) {
|
||||
.health-pill { min-height: 44px; padding: 0.5rem 0.75rem; }
|
||||
}
|
||||
|
||||
/* ── Custom period range inputs ──────────────────── */
|
||||
.period-custom-range {
|
||||
|
||||
Reference in New Issue
Block a user