feat: surface backend sync health in cockpit

src/index.css

@@ -106,6 +106,7 @@ body::before {
 
 .hero-stats div,
 .quick-actions,
+.status-strip,
 .status-bar,
 .tab {
   border-radius: 18px;
@@ -123,6 +124,7 @@ body::before {
 .hero-stats span,
 .meta-row,
 small,
+.status-strip,
 .status-bar {
   color: #b7c4db;
 }
@@ -135,6 +137,7 @@ small,
 .project-card,
 .quick-actions,
 .focus-card,
+.status-strip,
 .tab-bar,
 .status-bar,
 .view-stack,
@@ -355,6 +358,7 @@ button.small {
 .item-card-header,
 .meta-row,
 .feature-signal-row,
+.status-strip,
 .status-bar,
 .filters-heading {
   display: flex;
@@ -487,12 +491,33 @@ pre {
   color: #dbe7ff;
 }
 
+.status-strip {
+  padding: 0.95rem 1.1rem;
+  background: rgba(15, 23, 42, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
 .status-bar {
   padding: 0.95rem 1.1rem;
   background: rgba(15, 23, 42, 0.78);
   border: 1px solid rgba(148, 163, 184, 0.14);
 }
 
+.pill.status-healthy {
+  background: rgba(52, 211, 153, 0.16);
+  color: #bbf7d0;
+}
+
+.pill.status-connecting {
+  background: rgba(96, 165, 250, 0.18);
+  color: #bfdbfe;
+}
+
+.pill.status-degraded {
+  background: rgba(248, 113, 113, 0.18);
+  color: #fecaca;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -524,6 +549,7 @@ pre {
   }
 
   .hero-card,
+  .status-strip,
   .status-bar {
     flex-direction: column;
   }
@@ -537,6 +563,7 @@ pre {
   .tab-bar,
   .button-row,
   .filter-row,
+  .status-strip,
   .status-bar,
   .feature-signal-row {
     flex-direction: column;