feat(web): add backend switcher and connection status

Split the login page into backend list and credentials, show connection status in the sidebar and top bar, and render dialogs in a portal.

web/shared/theme/base.css

@@ -451,7 +451,8 @@ textarea {
 .scrim {
   position: fixed;
   inset: 0;
-  background: color-mix(in srgb, var(--app-scrim), transparent 60%);
+  background: color-mix(in srgb, var(--app-scrim), transparent 55%);
+  backdrop-filter: blur(3px);
   display: grid;
   place-items: center;
   z-index: 50;
@@ -465,7 +466,11 @@ textarea {
   width: min(560px, 100%);
   max-height: calc(100vh - 32px);
   overflow: auto;
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--app-shadow), transparent 80%);
+  border: 1px solid var(--app-outline-soft);
+  /* 近处一圈细的、远处一大片柔的：边缘清楚，又不会糊成一团 */
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--app-shadow), transparent 80%),
+    0 12px 40px color-mix(in srgb, var(--app-shadow), transparent 72%);
 }
 
 .dialog h2 {
@@ -780,3 +785,133 @@ pre.code {
   background: var(--app-card-hover);
   color: var(--app-ink);
 }
+
+/* ── 数据源列表：连接中的高亮，点一行就切换 ── */
+.src-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.src-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.src-pick {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--app-outline-soft);
+  border-radius: var(--r-control);
+  background: var(--app-card-inset);
+  color: var(--app-ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.src-pick:hover {
+  background: var(--app-card-hover);
+}
+
+.src-row.on .src-pick,
+.src-pick.on {
+  border-color: var(--app-accent);
+  background: var(--app-accent-container);
+  color: var(--app-on-accent-container);
+}
+
+.src-dot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  border: 2px solid var(--app-ink-faint);
+}
+
+.src-row.on .src-dot,
+.src-pick.on .src-dot {
+  border-color: var(--app-accent);
+  background: var(--app-accent);
+}
+
+.src-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.src-text b {
+  font-weight: 600;
+}
+
+.src-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--app-ink-muted);
+  font-size: 12px;
+}
+
+/* ── 数据源状态条：放在用户信息上方，一眼看到连的是哪个后端、连得上没有 ── */
+.src-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--app-outline-soft);
+  border-radius: var(--r-control);
+  background: var(--app-card);
+  color: var(--app-ink);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.src-status:hover {
+  background: var(--app-card-hover);
+}
+
+.src-status .st-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--app-idle);
+}
+
+.src-status.ok .st-dot {
+  background: var(--app-ok);
+}
+
+.src-status.bad .st-dot {
+  background: var(--app-bad);
+}
+
+.src-status .st-host {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.src-status .st {
+  flex: none;
+  color: var(--app-ink-muted);
+}
+
+.src-status.bad .st {
+  color: var(--app-bad);
+}