feat: MSK, MSK CONNECT and SES

packages/frontend/src/index.css

@@ -438,6 +438,8 @@ pre,
     gap: 4px;
     padding: 14px 16px;
     border-bottom: 1px solid var(--border);
+    color: inherit;
+    text-decoration: none;
 }
 
 .brand-logo {
@@ -479,6 +481,44 @@ pre,
     text-align: center;
 }
 
+.kinesis-records-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.kinesis-record-list {
+    max-height: 340px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.apigateway-workspace {
+    align-items: start;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 16px;
+}
+
+.apigateway-test-panel {
+    grid-column: auto;
+}
+
+@media (max-width: 760px) {
+    .kinesis-records-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .apigateway-workspace {
+        grid-template-columns: 1fr;
+    }
+
+    .apigateway-test-panel {
+        grid-column: auto;
+    }
+}
+
 .nav {
     flex: 1;
     overflow-y: auto;
@@ -3414,9 +3454,9 @@ pre,
 }
 
 .apigateway-test-panel {
-    border-top: 1px solid var(--border);
-    margin-top: 18px;
-    padding-top: 16px;
+    border-top: 0;
+    margin-top: 0;
+    padding-top: 0;
 }
 
 .apigateway-route-explorer {
@@ -3508,6 +3548,44 @@ pre,
     font-size: 11px;
 }
 
+.sqs-received-message {
+    align-items: flex-start;
+    width: 100%;
+}
+
+.sqs-received-message .apigateway-route-select {
+    align-items: stretch;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.sqs-message-body {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    margin: 4px 0;
+    max-height: 320px;
+    max-width: 100%;
+    overflow: auto;
+    padding: 8px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.sqs-sns-notification {
+    min-width: 0;
+}
+
+.sqs-sns-notification .metric-label {
+    margin: 8px 0 3px;
+}
+
+.sqs-json-code .json-key { color: var(--accent); }
+.sqs-json-code .json-string { color: var(--status-success); }
+.sqs-json-code .json-number { color: #d99b45; }
+.sqs-json-code .json-literal { color: #c586c0; }
+
 .apigateway-route-method {
     color: var(--accent);
     font-size: 11px;
@@ -3679,7 +3757,19 @@ pre,
     }
 
     .apigateway-request-flow {
-        justify-content: flex-start;
+        align-items: stretch;
+        flex-direction: column;
+        overflow-x: hidden;
+    }
+
+    .apigateway-flow-step {
+        flex: 0 0 auto;
+        min-width: 0;
+    }
+
+    .apigateway-flow-arrow {
+        align-self: center;
+        transform: rotate(90deg);
     }
 }