Add database overview feature with metrics and UI enhancements

This commit introduces a detailed database overview endpoint and service, providing key metrics such as replication status, database sizes, and performance indicators. On the frontend, a new UI section displays these metrics along with improved forms and troubleshooting tips. Enhancements improve user experience by adding informative tooltips and formatting for byte and time values.

frontend/src/styles.css

@@ -96,6 +96,26 @@ button {
   padding: 10px;
 }
 
+.field {
+  display: grid;
+  gap: 6px;
+}
+
+.field label {
+  font-size: 13px;
+  color: #b9c6dc;
+}
+
+.field small {
+  font-size: 12px;
+  color: #8fa0bf;
+}
+
+.tips p {
+  margin: 8px 0;
+  color: #bfd0ea;
+}
+
 button {
   cursor: pointer;
 }
@@ -147,6 +167,53 @@ td {
   text-overflow: ellipsis;
 }
 
+.overview-kv span,
+.overview-metrics span {
+  display: block;
+  font-size: 12px;
+  color: #97a7c8;
+}
+
+.overview-kv strong,
+.overview-metrics strong {
+  font-size: 15px;
+}
+
+.overview-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.pill {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.pill.primary {
+  color: #4ade80;
+}
+
+.pill.standby {
+  color: #f59e0b;
+}
+
+.lag-bad {
+  color: #ef4444;
+}
+
+.partial-warning {
+  margin-top: 12px;
+  border: 1px solid #7f1d1d;
+  border-radius: 10px;
+  padding: 10px;
+  color: #fecaca;
+}
+
+.partial-warning ul {
+  margin: 8px 0 0 18px;
+}
+
 @media (max-width: 980px) {
   .shell {
     grid-template-columns: 1fr;