feat: improve channel resilience and operations

src/styles/global.css

@@ -3167,11 +3167,32 @@ h3 {
   color: var(--color-text-inverse);
 }
 
+.cmpp-status-cell button:disabled,
+.cmpp-status-cell button.is-disabled {
+  background: var(--color-surface-muted);
+  border-color: var(--color-border);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.cmpp-status-cell button.is-enabled {
+  background: var(--color-success-soft);
+  border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
+  color: var(--color-success);
+}
+
 .cmpp-status-cell__params {
   gap: 4px;
   min-width: 58px !important;
 }
 
+.enterprise-app-actions {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  justify-content: end;
+}
+
 .cmpp-connection-detail {
   display: grid;
   gap: var(--space-5);
@@ -8061,9 +8082,9 @@ h3 {
 
 .sms-test-title span {
   align-items: center;
-  background: rgba(255, 255, 255, 0.18);
+  background: var(--color-selected-soft);
   border-radius: var(--radius-md);
-  color: white;
+  color: var(--color-selected);
   display: inline-flex;
   height: 58px;
   justify-content: center;
@@ -8072,7 +8093,7 @@ h3 {
 
 .sms-test-title h2,
 .sms-test-title p {
-  color: white;
+  color: var(--color-text-strong);
   margin: 0;
 }
 
@@ -8088,12 +8109,12 @@ h3 {
 }
 
 .ui-modal__header:has(.sms-test-title) {
-  background: var(--color-selected);
-  border-bottom: 0;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .ui-modal__header:has(.sms-test-title) .ui-button {
-  color: white;
+  color: var(--color-text-muted);
 }
 
 .sms-test-modal {
@@ -9007,8 +9028,8 @@ h3 {
 
 .admin-sms-record-list {
   display: grid;
-  gap: var(--space-4);
-  padding: var(--space-5);
+  gap: var(--space-2);
+  padding: var(--space-3);
 }
 
 .admin-sms-record-card {
@@ -9016,8 +9037,8 @@ h3 {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   display: grid;
-  gap: var(--space-4);
-  padding: var(--space-5);
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
 }
 
 .admin-sms-record-card:hover {
@@ -9041,7 +9062,12 @@ h3 {
   background: var(--color-bg-subtle);
   border-radius: var(--radius-md);
   max-width: none;
-  padding: var(--space-4);
+  display: -webkit-box;
+  line-height: 1.55;
+  overflow: hidden;
+  padding: var(--space-2) var(--space-3);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .admin-sms-record-card__meta {
@@ -9069,7 +9095,7 @@ h3 {
   border-top: 1px solid var(--color-border);
   display: flex;
   justify-content: flex-end;
-  padding-top: var(--space-3);
+  padding-top: var(--space-2);
 }
 
 .admin-sms-record-table {
@@ -9258,12 +9284,65 @@ h3 {
   overflow-wrap: anywhere;
 }
 
+.admin-sms-segment-list {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.admin-sms-segment-card {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-4);
+}
+
+.admin-sms-segment-card header {
+  align-items: center;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+}
+
+.admin-sms-segment-card header > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.admin-sms-segment-card dl {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 0;
+}
+
+.admin-sms-segment-card dl > div {
+  min-width: 0;
+}
+
+.admin-sms-segment-card dt {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  margin-bottom: var(--space-1);
+}
+
+.admin-sms-segment-card dd {
+  color: var(--color-text-strong);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
 @media (max-width: 900px) {
   .admin-sms-record-card > header,
   .admin-sms-record-card__meta,
   .admin-sms-detail-overview,
   .admin-sms-detail-status-grid,
-  .admin-sms-route-list dl {
+  .admin-sms-route-list dl,
+  .admin-sms-segment-list,
+  .admin-sms-segment-card dl {
     grid-template-columns: 1fr;
   }