sql-preview 0.6.4 → 0.6.7

package/dist/mcp-app.html

@@ -9,7 +9,7 @@
         body {
             margin: 0;
             padding: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            font-family: var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
             background-color: transparent;
         }
 
@@ -12677,7 +12677,15 @@ const useAppStore = create((set, get) => ({
   }),
   setActiveTab: (id) => set({ activeTabId: id }),
   updateTab: (id, updates) => set((state) => ({
-    tabs: state.tabs.map((tab) => tab.id === id ? { ...tab, ...updates } : tab)
+    tabs: state.tabs.map((tab) => {
+      if (tab.id !== id) return tab;
+      const next = { ...tab, ...updates };
+      if (updates.isLoading === true && !tab.isLoading) {
+        next.loadingStartedAt = Date.now();
+        next.cancelled = false;
+      }
+      return next;
+    })
   })),
   getActiveTab: () => {
     const { tabs, activeTabId } = get();
@@ -74083,6 +74091,16 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
     },
     [onCellDoubleClick]
   );
+  const onCellKeyDown = reactExports.useCallback(
+    (e2) => {
+      const keyboardEvent = e2.event;
+      if (!keyboardEvent || keyboardEvent.key !== "Enter" || e2.column.getColId() === "_gutter" || !onCellDoubleClick) {
+        return;
+      }
+      onCellDoubleClick(e2.colDef.headerName ?? e2.column.getColId(), e2.value);
+    },
+    [onCellDoubleClick]
+  );
   if (!data || data.rows.length === 0) return null;
   const { row: rowHeight, header: headerHeight } = DENSITY_HEIGHTS[density];
   const resolvedTheme = nativeTheme ? agThemeUniversal : "legacy";
@@ -74156,7 +74174,8 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
           onCellMouseDown,
           onCellMouseOver,
           onCellClicked,
-          onCellDoubleClicked
+          onCellDoubleClicked,
+          onCellKeyDown
         }
       )
     }
@@ -74342,7 +74361,7 @@ const DynamicForm = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-form-fields", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: fieldClass("name", "sp-conn-form-group"), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "sp-conn-form-label", children: [
-          "Connection Name ",
+          "Connection name ",
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required", children: "*" })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -74393,7 +74412,7 @@ const DynamicForm = ({
           onClick: handleTest,
           disabled: isSubmitting,
           "aria-label": "Test connection",
-          children: "Test Connection"
+          children: "Test connection"
         }
       ),
       submitFeedback && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-submit-feedback", role: "status", children: submitFeedback }),
@@ -74404,12 +74423,165 @@ const DynamicForm = ({
           className: "sp-btn sp-btn-primary",
           disabled: isSubmitting,
           "aria-label": "Save connection",
-          children: isSubmitting ? "Saving…" : submitFeedback ? "Saved" : "Save Connection"
+          children: isSubmitting ? "Saving…" : submitFeedback ? "Saved" : "Save connection"
         }
       )
     ] })
   ] });
 };
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  onConfirm,
+  onCancel
+}) {
+  const dialogRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "sp-confirm-dialog",
+      "aria-labelledby": "sp-confirm-dialog-title",
+      onCancel: (e2) => {
+        e2.preventDefault();
+        onCancel();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { id: "sp-confirm-dialog-title", className: "sp-confirm-dialog-title", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-confirm-dialog-message", children: message }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-confirm-dialog-actions", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn", onClick: onCancel, autoFocus: true, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn sp-btn-danger", onClick: onConfirm, children: confirmLabel })
+        ] })
+      ]
+    }
+  );
+}
+const GLYPHS = {
+  // Simple Icons (CC0)
+  duckdb: {
+    viewBox: "0 0 24 24",
+    d: "M12 0C5.363 0 0 5.363 0 12s5.363 12 12 12 12-5.363 12-12S18.637 0 12 0zM9.502 7.03a4.974 4.974 0 0 1 4.97 4.97 4.974 4.974 0 0 1-4.97 4.97A4.974 4.974 0 0 1 4.532 12a4.974 4.974 0 0 1 4.97-4.97zm6.563 3.183h2.351c.98 0 1.787.782 1.787 1.762s-.807 1.789-1.787 1.789h-2.351v-3.551z",
+    label: "DuckDB"
+  },
+  // Simple Icons (CC0)
+  trino: {
+    viewBox: "0 0 24 24",
+    d: "M14.124 16.8529a.1615.1615 0 1 1 .1576.1614.1577.1577 0 0 1-.1576-.1614zm-5.607-.1576a.1614.1614 0 1 0 0 .3228.1614.1614 0 0 0 0-.3228zm10.1341-.6648v1.9869c-.031.5788-.524 1.0237-1.1029.9954h-.3843a5.0596 5.0596 0 0 1-1.1298 1.7178.3192.3192 0 0 0 0 .465l.2382.2191a.3036.3036 0 0 1 .0385.4304c-1.126 1.3835-2.9669 2.1521-5.0498 2.1521a6.575 6.575 0 0 1-4.8192-1.8985c-.0029-.0032-.0059-.0063-.0087-.0096a.6302.6302 0 0 1 .0548-.8896c.137-.1265.1371-.3462 0-.4727a4.944 4.944 0 0 1-1.126-1.714h-.3497c-.5797.0284-1.0737-.416-1.1068-.9954v-1.9869c.0351-.5779.5286-1.02 1.1068-.9915h.2728a5.7648 5.7648 0 0 1 2.0791-3.0936c-.4227-1.0991-1.1529-3.2551-1.226-5.0075C6.0229 4.4705 6.2189.078 7.8253.001c1.6064-.0768 1.3719 4.0275 1.0991 6.6946a32.732 32.732 0 0 0-.123 4.4503 6.994 6.994 0 0 1 2.4826-.4304 7.2414 7.2414 0 0 1 1.7371.2075c.2614-1.2682.8762-3.574 2.0292-5.1958 1.6717-2.352 3.4357-4.7808 4.6116-4.1006 1.176.6802-.3074 3.1398-1.3297 4.4272-1.0222 1.2874-2.7862 3.2089-3.3742 4.2274-.2114.3843-.4304.8032-.5956 1.1529a5.7375 5.7375 0 0 1 2.9169 3.6125h.073v-2.3058a.3075.3075 0 0 0-.1806-.2844.9148.9148 0 0 1-.5573-.8148 1.0184 1.0184 0 0 1 .9045-.9044c.5593-.0598 1.061.3452 1.1208.9044a.9187.9187 0 0 1-.5534.8148.3074.3074 0 0 0-.1691.2844v2.1522a.3113.3113 0 0 0 .1691.2805.9724.9724 0 0 1 .5648.857zm-1.0222-3.9737a.4345.4345 0 0 0 .4612-.4151.4151.4151 0 1 0-.4612.4151zm-.4227 3.4779c.0978.4794.148.9672.1498 1.4565v.3651h.4113a.3228.3228 0 0 0 .3228-.319v-1.0069c-.0111-.2967-.2733-.5256-.5688-.4957h-.3151zm-3.7278-4.481.611.2383a36.6046 36.6046 0 0 1 2.3828-3.8661c1.2874-1.7255 2.3365-3.5817 1.8715-3.8699-.465-.2883-1.6179 1.2297-2.7708 3.109a34.8978 34.8978 0 0 0-2.0945 4.3887zm-4.0544.6726.0154 1.3335c-.0039.2007.1881.3587.3843.3152a6.4317 6.4317 0 0 1 1.4565-.1653 5.995 5.995 0 0 1 1.4527.1729c.1956.0398.3853-.1153.3843-.3151v-1.3412a.319.319 0 0 0-.2421-.3113 6.664 6.664 0 0 0-1.6026-.1845 6.7093 6.7093 0 0 0-1.6025.1845.3188.3188 0 0 0-.246.3113zm1.7063 6.8637v.3843a.6878.6878 0 0 1-.4996.269c-.3074 0-.538-.4189-.538-.4189a.073.073 0 0 0-.1-.0307l-.0024.0013a.0693.0693 0 0 0-.0245.0947c.0115.0231.2806.4957.6649.4957a.7144.7144 0 0 0 .3843-.1268.3267.3267 0 0 1 .3612 0 .8332.8332 0 0 0 .4727.1345.957.957 0 0 0 .6572-.4803.0692.0692 0 0 0-.0269-.0961.0692.0692 0 0 0-.0999.0269c0 .0231-.2191.3843-.5419.4074a.8036.8036 0 0 1-.5765-.269v-.3843a.3154.3154 0 0 1 .1268-.2537c.196-.1499.415-.3958.415-.4919a.538.538 0 0 0-.5764-.4189c-.3766 0-.6533.2498-.6533.4573 0 .1345.2536.3382.4227.4612a.3226.3226 0 0 1 .1346.2383zM7.783 11.6455l.5765-.3074c-.0192-1.126-.0346-3.1436 0-4.5425.0538-2.0368.1537-4.5732-.5226-4.5463S6.6877 4.2285 6.949 7.007a33.0562 33.0562 0 0 0 .834 4.6385zm-3.305 5.3919a.319.319 0 0 0 .319.319h.3997a3.046 3.046 0 0 1 0-.3651 7.546 7.546 0 0 1 .1461-1.4565c-.0493.0002-.34.0005-.3866-.0021a.4881.4881 0 0 0-.4781.4979v1.0068zm.9184 1.4718a5.3254 5.3254 0 0 1-.123-.5573.3228.3228 0 0 0-.319-.2728h-.4957c.0007.0163-.0015.34.0009.355a.5188.5188 0 0 0 .5526.4827l.3842-.0076zm10.1265 2.917-.0884-.0807a.3229.3229 0 0 0-.3843-.0269 6.9823 6.9823 0 0 1-3.8046 1.0068 6.995 6.995 0 0 1-3.7932-1.0068.3228.3228 0 0 0-.3843.0269l-.0884.0807a.3154.3154 0 0 0 0 .4573 6.0305 6.0305 0 0 0 4.2927 1.5988 6.0453 6.0453 0 0 0 4.2889-1.5988.315.315 0 0 0-.0384-.4573zm1.4488-4.4158c0-2.4557-1.1529-4.3273-3.0245-5.2266-.2081-.1022-.4673.0594-.465.2921v1.3297a.3269.3269 0 0 0 .2037.296c1.7332.7109 2.9284 2.1866 2.9284 3.8776 0 2.2712-2.1559 3.8085-5.3419 3.8085-3.1859 0-5.3419-1.5411-5.3419-3.8085 0-1.691 1.1952-3.1667 2.9284-3.8776a.319.319 0 0 0 .2037-.296v-1.322c.0048-.2315-.2536-.3963-.4612-.2921-1.887.8839-3.0399 2.767-3.0399 5.2073 0 2.9899 2.2866 4.996 5.7108 4.996 3.4282.0001 5.6994-2.0098 5.6994-4.9844zm-8.6084-.538h-.0038a.5842.5842 0 1 0 .0038 0zm5.1614.5919c.0063.3226.2615.5789.584.5725a.5842.5842 0 1 0-.584-.5725zm4.5692.6225h-.4996a.3227.3227 0 0 0-.3151.2728c-.0346.173-.0768.3766-.1268.5573.0163.0007.3861-.0014.4012.0009a.5188.5188 0 0 0 .5366-.5004l.0037-.3306z",
+    label: "Trino"
+  },
+  // Devicon postgresql-plain (MIT)
+  postgres: {
+    viewBox: "0 0 128 128",
+    d: "M123.258 76.784c-.45-2.918-2.901-4.829-5.752-4.958-1.032-.047-2.08.061-3.109.192-1.243.158-2.471.438-3.711.623-.857.128-1.726.187-2.582.275l-.021-.111c1.598-3.018 3.263-6.003 4.775-9.064 1.159-2.348 2.151-4.781 3.176-7.194 1.696-3.998 3.051-8.12 4.173-12.309 1.075-4.011 1.995-8.066 2.284-12.227.116-1.662.196-3.331.187-4.995-.008-1.327-.151-2.656-.284-3.979-.15-1.516-.608-2.953-1.242-4.336-.836-1.822-2.132-3.317-3.496-4.737-1.092-1.137-2.293-2.173-3.484-3.208-1.698-1.477-3.607-2.656-5.59-3.703a32.18 32.18 0 00-7.09-2.75c-1.493-.381-3.02-.664-4.532-.966-.544-.11-1.089-.337-1.633-.337H85.086c-.37 0-.737.191-1.11.233-2.452.273-4.875.735-7.228 1.464-.88.273-1.684.101-2.52.024-.641-.059-1.271-.231-1.912-.263-2.442-.122-4.887-.301-7.328-.275-2.339.024-4.654.409-6.918 1.052-1.895.538-3.749 1.195-5.447 2.191-.727.426-1.303.346-2.055.129-2.527-.729-5.072-1.414-7.639-1.989-1.6-.358-3.245-.536-4.879-.707a57.214 57.214 0 00-4.718-.294c-1.538-.033-3.087-.032-4.618.104a30.16 30.16 0 00-7.158 1.513 23.813 23.813 0 00-7.086 3.865c-2.167 1.715-3.905 3.809-5.303 6.2-1.473 2.523-2.483 5.224-3.111 8.061-.34 1.537-.555 3.117-.788 4.678-.073.486.732.972-.268 1.456v6.794c1 .452.208.903.266 1.356.139 1.089.262 2.187.446 3.268.291 1.711.636 3.417.988 5.117a324.86 324.86 0 001.546 7.111c.396 1.72.847 3.43 1.319 5.131.721 2.598 1.431 5.201 2.246 7.77.757 2.387 1.624 4.74 2.484 7.093 1.191 3.255 2.617 6.405 4.327 9.424 1.479 2.614 3.169 5.062 5.436 7.076 1.494 1.327 3.157 2.347 5.093 2.857 1.521.4 3.067.448 4.624.129a10.979 10.979 0 004.824-2.311c.163-.134.342-.236.535.01.735.931 1.719 1.552 2.748 2.089 2.777 1.448 5.803 1.882 8.877 2.059.744.043 1.496-.064 2.246-.085 1.461-.04 2.881-.325 4.278-.729.732-.212 1.447-.481 2.192-.732.039.793.089 1.557.112 2.321l.104 4.166c.019.634.044 1.27.103 1.901.151 1.627.299 3.255.493 4.877.135 1.118.275 2.245.538 3.336a38.176 38.176 0 002.158 6.428 13.81 13.81 0 003.9 5.185c2.22 1.836 4.822 2.619 7.632 2.764 1.162.061 2.357.004 3.501-.204a49.01 49.01 0 005.387-1.275c3.591-1.084 6.695-2.956 9.014-5.981 1.32-1.724 2.404-3.589 3.1-5.648.574-1.701 1.115-3.419 1.545-5.16.34-1.372.508-2.787.715-4.188.137-.927.219-1.863.305-2.797.14-1.517.283-3.033.384-4.553.07-1.058.067-2.121.109-3.181.013-.323.065-.644.095-.966.028-.298.178-.401.482-.396 1.071.016 2.144.044 3.212-.004 1.197-.054 2.405-.105 3.583-.303a56.542 56.542 0 004.99-1.067c1.943-.508 3.725-1.418 5.44-2.455 1.998-1.207 3.819-2.623 5.297-4.447 1.285-1.591 1.894-3.43 1.584-5.438zm-3.412.982c-.066.915-.485 1.699-1.093 2.369-2.869 3.163-6.468 5.082-10.585 6.027-1.564.358-3.178.544-4.779.692a32.093 32.093 0 01-4.114.097c-1.006-.038-2.004-.268-3.032-.416-.103.94-.201 1.919-.32 2.896l-.479 3.745c-.145 1.187-.258 2.378-.407 3.564-.146 1.151-.328 2.298-.481 3.449-.143 1.072-.248 2.149-.407 3.219-.245 1.64-.479 3.284-.799 4.911-.384 1.945-.973 3.829-1.934 5.583-1.172 2.141-2.834 3.772-4.949 4.98-2.18 1.246-4.563 1.894-6.979 2.436-1.71.384-3.472.447-5.204.291-3.004-.272-5.568-1.557-7.506-3.886-1.85-2.223-3.102-4.771-3.55-7.655a63.102 63.102 0 01-.491-4.136 108.067 108.067 0 01-.299-4.62 250.203 250.203 0 01-.197-5.871c-.053-2.406-.07-4.812-.104-7.218l-.006-.092c-1.224.734-2.427 1.538-3.703 2.2a12.392 12.392 0 01-4.798 1.353c-1.318.1-2.653.191-3.965.086-2.151-.173-4.3-.51-6.226-1.569-.781-.43-1.596-.953-2.134-1.64-1.29-1.646-.672-3.726 1.273-4.727 1.344-.693 2.811-.982 4.268-1.319a44.368 44.368 0 003.761-1.029c1.222-.4 1.993-1.391 2.754-2.363l1.206-1.551c-.503-.053-.977-.107-1.451-.151-1.439-.136-2.812-.532-4.125-1.114-1.124-.497-1.141-.551-1.965.343-1.376 1.494-2.714 3.023-4.062 4.542-.992 1.117-1.978 2.241-2.965 3.361-.978 1.108-1.894 2.279-2.947 3.31-1.564 1.531-3.449 2.452-5.698 2.348-1.443-.066-2.764-.572-3.952-1.399-2.452-1.708-4.104-4.097-5.608-6.606-1.927-3.215-3.406-6.64-4.672-10.159-.876-2.432-1.756-4.866-2.521-7.333-.831-2.681-1.56-5.396-2.277-8.11a157.373 157.373 0 01-1.482-6.182 216.117 216.117 0 01-1.464-7.079c-.298-1.599-.471-3.221-.712-4.831-.325-2.17-.385-4.36-.267-6.539.105-1.963.387-3.921.667-5.871.388-2.698 1.277-5.244 2.556-7.648.783-1.473 1.755-2.812 2.879-4.056 1.845-2.042 4.078-3.518 6.562-4.626 1.736-.774 3.57-1.24 5.439-1.604 2.774-.54 5.573-.519 8.373-.461 1.224.025 2.443.248 3.666.369 2.633.262 5.214.816 7.762 1.5 1.857.498 3.676 1.143 5.518 1.703.185.056.456.051.607-.048 2.496-1.629 5.224-2.704 8.125-3.319 1.101-.233 2.237-.335 3.363-.407 1.369-.087 2.749-.167 4.115-.088 1.642.094 3.276.336 4.908.56.792.108 1.565.383 2.359.458.38.036.783-.242 1.185-.335 2.049-.473 4.089-1 6.156-1.374 1.539-.278 3.111-.409 4.676-.499 1.745-.1 3.503-.173 5.247-.089a36.66 36.66 0 016.555.923c2.677.623 5.245 1.528 7.686 2.784 1.824.938 3.558 2.026 5.119 3.364 1.023.878 2.07 1.745 2.994 2.723 1.14 1.206 2.303 2.413 3.018 3.958.538 1.165.922 2.371 1.028 3.647.132 1.586.292 3.178.277 4.766-.014 1.519-.221 3.037-.368 4.552-.334 3.454-1.085 6.833-1.997 10.167a116.972 116.972 0 01-2.589 8.17c-.879 2.481-1.893 4.917-2.918 7.343a80.07 80.07 0 01-2.458 5.303c-1.677 3.286-3.421 6.538-5.438 9.633-.348.535-.678 1.083-1.018 1.629.88.594 1.877.803 2.881.911.955.104 1.929.166 2.883.095 1.527-.113 3.049-.331 4.567-.544 1.504-.21 2.978-.638 4.522-.525 1.542.112 2.645 1.284 2.54 2.729zm-22.013-3.353c-.655-.846-1.323-1.682-1.964-2.538-1.006-1.344-1.729-2.845-2.455-4.353-.688-1.429-1.532-2.782-2.257-4.195-1.265-2.465-2.553-4.922-3.718-7.435-1.465-3.157-2.62-6.426-2.984-9.923-.154-1.48-.193-2.958.106-4.424.479-2.341 1.702-4.172 3.758-5.428 1.907-1.165 4.032-1.541 6.209-1.659 1.351-.073 2.708-.013 4.11-.013l-.047-.237c-.872-1.823-1.687-3.677-2.641-5.457-1.346-2.512-3.068-4.777-4.986-6.877-1.421-1.555-2.96-2.998-4.646-4.273-1.658-1.255-3.405-2.376-5.269-3.293-2.223-1.093-4.538-1.938-6.967-2.477-2.334-.518-4.683-.835-7.077-.861-2.042-.022-4.071.07-6.06.531-3.002.695-5.748 1.931-8.137 3.933a21.143 21.143 0 00-3.517 3.77c-1.196 1.643-2.161 3.417-2.986 5.277-1.132 2.552-1.909 5.208-2.44 7.938-.266 1.361-.474 2.734-.686 4.106-.074.48-.08.971-.123 1.521.369-.192.635-.34.907-.472l.885-.397c2.993-1.369 6.094-2.25 9.427-2.149 1.416.043 2.771.323 4.03.943 2.415 1.191 3.828 3.216 4.442 5.779.424 1.769.714 3.573.996 5.372.221 1.405.447 2.825.473 4.242.037 2.071-.068 4.146-.181 6.216a17.386 17.386 0 01-1.08 5.146c-1.12 2.993-2.368 5.937-3.534 8.913-.385.983-.681 2.001-1.045 3.082.562 0 1.018-.004 1.474.002.178.003.36.008.532.049 1.34.316 2.502.923 3.455 1.954 1.271 1.372 1.938 2.973 1.972 4.826.019 1.027-.089 2.057-.084 3.084.021 4.786.057 9.572.097 14.357.007.782.046 1.565.102 2.346.117 1.635.235 3.271.395 4.902.112 1.157.268 2.312.451 3.461.259 1.628 1 3.077 1.841 4.462.724 1.191 1.665 2.203 2.905 2.901 2.107 1.186 4.376 1.285 6.663.848 1.545-.295 3.062-.769 4.562-1.258a10.128 10.128 0 003.937-2.354c1.051-1.019 1.797-2.261 2.3-3.632.976-2.659 1.28-5.459 1.684-8.237.151-1.04.282-2.083.42-3.125.157-1.186.316-2.371.468-3.556.112-.883.214-1.768.322-2.651.154-1.268.317-2.535.464-3.804.113-.981.209-1.966.309-2.949.129-1.256.268-2.512.379-3.77.086-.955.051-1.927.22-2.864.311-1.718 1.123-3.18 2.646-4.125.637-.395 1.356-.655 2.063-.989l-.12-.186zm-57.597-7.052a17.526 17.526 0 01-1.354-5.622c-.128-1.825.089-3.643.276-5.46.182-1.76.333-3.528.386-5.296.088-2.906-.108-5.808-.247-8.712-.084-1.729.117-3.479.271-5.212.139-1.561.312-3.126.607-4.664.495-2.581 1.152-5.125 2.086-7.591.887-2.338 1.906-4.615 3.345-6.665.986-1.406 2.105-2.72 3.18-4.094l-.319-.113c-3.498-1.111-7.053-1.979-10.709-2.358-1.729-.179-3.464-.284-5.198-.387-.532-.032-1.072.04-1.606.091-1.322.126-2.66.176-3.961.424-2.214.421-4.338 1.129-6.305 2.282-1.766 1.035-3.249 2.373-4.491 3.978-1.372 1.772-2.295 3.776-2.958 5.913-.783 2.521-1.156 5.115-1.257 7.733-.088 2.295-.132 4.603.264 6.889.295 1.702.492 3.422.817 5.117.443 2.311.918 4.617 1.467 6.904.785 3.274 1.569 6.553 2.499 9.787.89 3.099 1.894 6.17 2.982 9.204.89 2.476 1.919 4.906 3.003 7.304.706 1.562 1.561 3.065 2.457 4.528.953 1.553 2.037 3.027 3.508 4.154 1.856 1.423 3.293 1.644 5.179.083.808-.669 1.491-1.495 2.194-2.282 1.117-1.25 2.195-2.534 3.307-3.788 1.416-1.598 2.85-3.179 4.273-4.769.301-.336.59-.682.883-1.022l-.484-.425a17.695 17.695 0 01-4.095-5.931zm53.688-47.569a61.488 61.488 0 013.309 4.204c2 2.809 3.598 5.842 4.775 9.087.521 1.43.937 2.874.751 4.439-.129 1.096-.118 2.208-.215 3.31-.081.917-.226 1.829-.345 2.743-.178 1.378-.436 2.752-.513 4.136-.073 1.317.003 2.648.086 3.968.084 1.341.265 2.676.388 4.015.139 1.518.326 3.036.369 4.557.035 1.249-.076 2.506-.185 3.753-.13 1.502-.511 2.956-1.079 4.351-.399.982-.876 1.934-1.327 2.917l.181.192.275.213.277-.496a93.621 93.621 0 006.222-11.493 186.333 186.333 0 003.287-7.766c1.624-4.064 2.909-8.242 3.903-12.503.446-1.913.787-3.855 1.09-5.797.236-1.518.433-3.054.477-4.586.047-1.625-.043-3.263-.193-4.884-.112-1.224-.414-2.456-1.181-3.451-1.233-1.602-2.564-3.134-4.201-4.346-1.378-1.021-2.751-2.068-4.23-2.927-2.345-1.36-4.883-2.266-7.535-2.883-2.588-.603-5.21-.863-7.849-.918-1.556-.033-3.119.134-4.672.28-1.407.132-2.805.357-4.222.543 1.52.855 3.019 1.615 4.433 2.511 2.973 1.883 5.637 4.149 7.924 6.831zM55.299 72.514c.961-3.073 2.27-6.007 3.538-8.959 1.028-2.394 1.59-4.916 1.777-7.506.093-1.277.067-2.57.004-3.851a44.628 44.628 0 00-.392-4.259c-.266-1.801-.569-3.603-.995-5.371-.462-1.913-1.627-3.245-3.623-3.736-1.216-.299-2.424-.287-3.653-.093-3.002.473-5.75 1.579-8.31 3.199-.515.326-.798.589-.709 1.328.188 1.565.229 3.155.222 4.735-.01 2.236-.105 4.472-.19 6.707-.028.728-.133 1.452-.211 2.177-.12 1.11-.351 2.219-.344 3.327.007 1.142.124 2.311.401 3.417.88 3.507 2.744 6.377 5.799 8.402 1.879 1.245 3.958 1.873 6.24 1.992.155-.524.293-1.019.446-1.509zm-3.586-30.087c-.402-.844-.172-1.543.76-1.867.227-.08.461-.165.697-.188.324-.032.654-.008.982-.008 1.182.006 2.319.171 3.295.923.626.482.794 1.122.389 1.779-.575.932-1.452 1.4-2.529 1.49-1.697.141-2.888-.65-3.594-2.129zm47.04-.308c.136-1.124.245-2.251.384-3.375.056-.452-.182-.574-.561-.585-1.192-.033-2.384-.075-3.576-.097-1.344-.024-2.652.192-3.896.703-1.38.568-2.431 1.478-2.86 2.98a9.042 9.042 0 00-.293 3.41 20.11 20.11 0 001.193 5.176c.834 2.221 1.707 4.441 2.75 6.569 1.413 2.881 3.012 5.67 4.513 8.507.401.757.738 1.547 1.156 2.431a13.783 13.783 0 001.351-5.622c.041-1.61-.088-3.227-.182-4.838-.059-.986-.198-1.966-.294-2.95-.134-1.371-.337-2.741-.368-4.115-.031-1.397.068-2.802.188-4.197.113-1.338.334-2.665.495-3.997zm-2.689-1.082c-.443 1.223-1.39 1.913-2.618 2.116-1.145.188-2.148-.235-2.894-1.148-.531-.65-.328-1.42.468-1.859.914-.506 1.919-.634 3.104-.711.322.059.807.108 1.268.24.669.189.916.692.672 1.362zm-35.422 37.66c-.655-.535-1.521-.566-2.144.021-.773.73-1.453 1.565-2.133 2.388-.785.951-1.521 1.94-2.534 2.677-1.474 1.071-3.192 1.515-4.919 1.935-1.373.334-2.752.644-4.129.965l-.017.178c.409.189.805.425 1.231.56 2.1.665 4.236.996 6.455.808 1.602-.136 3.128-.485 4.574-1.171 1.99-.943 3.521-2.437 4.823-4.175.218-.29.317-.719.343-1.093.089-1.321-.582-2.303-1.55-3.093zm51.751.526c-1.69.181-3.382.373-5.077.47-.818.047-1.648-.109-2.474-.176-1.385-.112-2.737-.42-3.908-1.16-.678-.427-1.241-.475-1.961-.233-1.028.346-1.867.872-2.115 1.986-.169.753-.23 1.533-.298 2.304-.013.136.157.386.287.42.793.209 1.59.456 2.401.529.996.09 2.01.061 3.013.011 1.083-.054 2.173-.124 3.24-.304 2.515-.422 4.948-1.11 7.109-2.536.779-.515 1.551-1.041 2.325-1.562l-.064-.11c-.826.123-1.648.273-2.478.361z",
+    label: "PostgreSQL"
+  },
+  // Simple Icons (CC0)
+  sqlite: {
+    viewBox: "0 0 24 24",
+    d: "M21.678.521c-1.032-.92-2.28-.55-3.513.544a8.71 8.71 0 0 0-.547.535c-2.109 2.237-4.066 6.38-4.674 9.544.237.48.422 1.093.544 1.561a13.044 13.044 0 0 1 .164.703s-.019-.071-.096-.296l-.05-.146a1.689 1.689 0 0 0-.033-.08c-.138-.32-.518-.995-.686-1.289-.143.423-.27.818-.376 1.176.484.884.778 2.4.778 2.4s-.025-.099-.147-.442c-.107-.303-.644-1.244-.772-1.464-.217.804-.304 1.346-.226 1.478.152.256.296.698.422 1.186.286 1.1.485 2.44.485 2.44l.017.224a22.41 22.41 0 0 0 .056 2.748c.095 1.146.273 2.13.5 2.657l.155-.084c-.334-1.038-.47-2.399-.41-3.967.09-2.398.642-5.29 1.661-8.304 1.723-4.55 4.113-8.201 6.3-9.945-1.993 1.8-4.692 7.63-5.5 9.788-.904 2.416-1.545 4.684-1.931 6.857.666-2.037 2.821-2.912 2.821-2.912s1.057-1.304 2.292-3.166c-.74.169-1.955.458-2.362.629-.6.251-.762.337-.762.337s1.945-1.184 3.613-1.72C21.695 7.9 24.195 2.767 21.678.521m-18.573.543A1.842 1.842 0 0 0 1.27 2.9v16.608a1.84 1.84 0 0 0 1.835 1.834h9.418a22.953 22.953 0 0 1-.052-2.707c-.006-.062-.011-.141-.016-.2a27.01 27.01 0 0 0-.473-2.378c-.121-.47-.275-.898-.369-1.057-.116-.197-.098-.31-.097-.432 0-.12.015-.245.037-.386a9.98 9.98 0 0 1 .234-1.045l.217-.028c-.017-.035-.014-.065-.031-.097l-.041-.381a32.8 32.8 0 0 1 .382-1.194l.2-.019c-.008-.016-.01-.038-.018-.053l-.043-.316c.63-3.28 2.587-7.443 4.8-9.791.066-.069.133-.128.198-.194Z",
+    label: "SQLite"
+  },
+  // Material Design Icons dolphin (Apache-2.0)
+  mysql: {
+    viewBox: "0 0 24 24",
+    d: "M20 7s0-4-5-4c-1.53 0-2.85.19-4 .5c-.5-.44-3.74-3.191-7 .07l2.56 2.56C2.5 10.53 4 18 4 18s-3 0-3 4l4-1l4 1c0-4-3-4-3-4s.85-5.76 7-6.82V14c2 0 2.68-1.81 2.89-3H18c4 0 5-1 5-2s-2-2-3-2m-2 1c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1",
+    label: "MySQL"
+  },
+  // Simple Icons (CC0)
+  snowflake: {
+    viewBox: "0 0 24 24",
+    d: "M24 3.459c0 .646-.418 1.18-1.141 1.18-.723 0-1.142-.534-1.142-1.18 0-.647.419-1.18 1.142-1.18.723 0 1.141.533 1.141 1.18zm-.228 0c0-.533-.38-.951-.913-.951s-.913.38-.913.95c0 .533.38.952.913.952.57 0 .913-.419.913-.951zm-1.37-.533h.495c.266 0 .456.152.456.38 0 .153-.076.229-.19.305l.19.266v.038h-.266l-.19-.266h-.229v.266h-.266zm.495.228h-.229v.267h.229c.114 0 .152-.038.152-.114.038-.077-.038-.153-.152-.153zM7.602 12.4c.038-.151.076-.304.076-.456 0-.114-.038-.228-.038-.342-.114-.343-.304-.647-.646-.838l-4.87-2.777c-.685-.38-1.56-.152-1.94.533-.381.685-.153 1.56.532 1.94l2.701 1.56-2.701 1.56c-.685.38-.913 1.256-.533 1.94.38.685 1.256.914 1.94.533l4.832-2.777c.343-.267.571-.533.647-.876zm1.332 2.626c-.266-.038-.57.038-.837.19l-4.832 2.777c-.685.38-.913 1.256-.532 1.94.38.686 1.255.914 1.94.533l2.701-1.56v3.12c0 .8.647 1.408 1.446 1.408.799 0 1.407-.647 1.407-1.408v-5.592c0-.761-.57-1.37-1.293-1.408zm4.946-6.088c.266.038.57-.038.837-.19l4.832-2.777c.685-.38.913-1.256.532-1.94-.38-.686-1.255-.914-1.94-.533l-2.701 1.56V1.975c0-.799-.647-1.408-1.446-1.408-.799 0-1.446.609-1.446 1.408V7.53c0 .76.609 1.37 1.332 1.407zM3.265 5.97l4.832 2.777c.266.152.533.19.837.19.723-.038 1.331-.684 1.331-1.407V1.975c0-.799-.646-1.408-1.407-1.408-.799 0-1.446.647-1.446 1.408v3.12l-2.701-1.56c-.685-.38-1.56-.152-1.94.533-.419.646-.19 1.521.494 1.902zm9.093 6.011a.412.412 0 00-.114-.266l-.57-.571a.346.346 0 00-.267-.114.412.412 0 00-.266.114l-.571.57a.411.411 0 00-.114.267c0 .076.038.19.114.267l.57.57a.345.345 0 00.267.114c.076 0 .19-.038.266-.114l.571-.57a.412.412 0 00.114-.267zm1.598.533L11.94 14.53c-.039.038-.153.114-.229.114h-.608a.411.411 0 01-.267-.114L8.82 12.514a.408.408 0 01-.076-.229v-.608c0-.076.038-.19.114-.267l2.016-2.016a.41.41 0 01.267-.114h.608a.41.41 0 01.267.114l2.016 2.016a.347.347 0 01.114.267v.608c-.076.077-.114.19-.19.229zm5.593 5.44l-4.832-2.777c-.266-.152-.57-.19-.837-.152-.723.038-1.332.684-1.332 1.408v5.554c0 .8.647 1.408 1.408 1.408.799 0 1.446-.647 1.446-1.408v-3.12l2.7 1.56c.686.38 1.561.152 1.941-.533.419-.646.19-1.521-.494-1.94zm2.549-7.533l-2.701 1.56 2.7 1.56c.686.38.914 1.256.533 1.94-.38.685-1.255.913-1.94.533l-4.832-2.778a1.644 1.644 0 01-.647-.798c-.037-.153-.076-.305-.076-.457 0-.114.039-.228.039-.342.114-.343.342-.647.646-.837l4.832-2.778c.685-.38 1.56-.152 1.94.533.457.609.19 1.484-.494 1.864",
+    label: "Snowflake"
+  },
+  // Simple Icons (CC0)
+  bigquery: {
+    viewBox: "0 0 24 24",
+    d: "M5.676 10.595h2.052v5.244a5.892 5.892 0 0 1-2.052-2.088v-3.156zm18.179 10.836a.504.504 0 0 1 0 .708l-1.716 1.716a.504.504 0 0 1-.708 0l-4.248-4.248a.206.206 0 0 1-.007-.007c-.02-.02-.028-.045-.043-.066a10.736 10.736 0 0 1-6.334 2.065C4.835 21.599 0 16.764 0 10.799S4.835 0 10.8 0s10.799 4.835 10.799 10.8c0 2.369-.772 4.553-2.066 6.333.025.017.052.028.074.05l4.248 4.248zm-5.028-10.632a8.015 8.015 0 1 0-8.028 8.028h.024a8.016 8.016 0 0 0 8.004-8.028zm-4.86 4.98a6.002 6.002 0 0 0 2.04-2.184v-1.764h-2.04v3.948zm-4.5.948c.442.057.887.08 1.332.072.4.025.8.025 1.2 0V7.692H9.468v9.035z",
+    label: "BigQuery"
+  },
+  // In-house: database cylinder (no free monochrome SQL Server mark exists)
+  mssql: {
+    viewBox: "0 0 16 16",
+    d: "M8 1.5c3.1 0 5.5 1 5.5 2.5v8c0 1.5-2.4 2.5-5.5 2.5s-5.5-1-5.5-2.5V4c0-1.5 2.4-2.5 5.5-2.5zM3.9 9.9V12c0 .5 1.6 1.2 4.1 1.2s4.1-.7 4.1-1.2V9.9c-1 .6-2.5.9-4.1.9s-3.1-.3-4.1-.9zm0-3.6v2.1C4 8.9 5.5 9.5 8 9.5s4-.6 4.1-1.1V6.3c-1 .6-2.5.9-4.1.9s-3.1-.3-4.1-.9zM8 2.8c-2.5 0-4.1.7-4.1 1.2S5.5 5.2 8 5.2 12.1 4.5 12.1 4 10.5 2.8 8 2.8z",
+    label: "SQL Server"
+  }
+};
+const FALLBACK = {
+  viewBox: "0 0 16 16",
+  d: "M5.5 1.5h1.4v3h2.2v-3h1.4v3h1a.5.5 0 01.5.5v2a4 4 0 01-3.3 3.94v1.06a1.5 1.5 0 01-3 0v-1.06A4 4 0 012.4 7V5a.5.5 0 01.5-.5h2.6v-3z"
+};
+function ConnectorGlyph({ type }) {
+  const glyph = GLYPHS[type] ?? FALLBACK;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      viewBox: glyph.viewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: "sp-connector-glyph",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: glyph.d })
+    }
+  );
+}
+function getConnectorGroup(id) {
+  return id === "duckdb" || id === "sqlite" ? "local" : "server";
+}
+function CloseIcon({ size = 10 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.707L8 8.707z" }) });
+}
+function errorText(e2) {
+  return e2 instanceof Error ? e2.message : String(e2);
+}
+const CONNECTION_TEST_TIMEOUT_MS = 15e3;
+function withTestTimeout(promise, ms) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(
+        new Error(
+          `Timed out after ${Math.round(ms / 1e3)}s — the connection may be unreachable. Check the host, port, and network.`
+        )
+      );
+    }, ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (err) => {
+        clearTimeout(timer);
+        reject(err);
+      }
+    );
+  });
+}
+function TestElapsed({ since }) {
+  const [, setTick] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 500);
+    return () => clearInterval(interval);
+  }, []);
+  const seconds = Math.max(0, Math.floor((Date.now() - since) / 1e3));
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sp-conn-test-elapsed", "aria-hidden": "true", children: [
+    " ",
+    "· ",
+    seconds,
+    "s"
+  ] });
+}
 const OPTIONAL_DEPENDENCY_ADVICE = [
   {
     dependency: "@duckdb/node-api",
@@ -74424,15 +74596,9 @@ const OPTIONAL_DEPENDENCY_ADVICE = [
     guidance: "Snowflake connections require optional Snowflake SDK support, but the SDK is not available in this extension runtime."
   }
 ];
-const CONNECTOR_ICONS = {
-  duckdb: "🦆",
-  trino: "⚡",
-  postgres: "🐘",
-  sqlite: "📦",
-  mysql: "🐬",
-  mssql: "🗄️",
-  snowflake: "❄️",
-  bigquery: "📊"
+const CONNECTOR_GROUP_LABELS = {
+  local: "Local files",
+  server: "Servers & warehouses"
 };
 function getOptionalDependencyAdvice(message) {
   const lowerMessage = message.toLowerCase();
@@ -74542,10 +74708,16 @@ const ConnectionsManager = () => {
   const [lastSavedConnectionId, setLastSavedConnectionId] = reactExports.useState(void 0);
   const [statuses, setStatuses] = reactExports.useState({});
   const [statusMessages, setStatusMessages] = reactExports.useState({});
+  const [testStartedAt, setTestStartedAt] = reactExports.useState({});
+  const testRequestIds = reactExports.useRef({});
+  const formTestIdRef = reactExports.useRef(0);
   const [toast, setToast] = reactExports.useState(null);
+  const [pendingConfirm, setPendingConfirm] = reactExports.useState(null);
   const toastRef = reactExports.useRef(null);
   const [isFormOpen, setIsFormOpen] = reactExports.useState(false);
   const [selectedType, setSelectedType] = reactExports.useState("");
+  const [isPopoverOpen, setIsPopoverOpen] = reactExports.useState(false);
+  const switcherWrapRef = reactExports.useRef(null);
   const fetchData = reactExports.useCallback(async () => {
     var _a3, _b2, _c3, _d, _e2, _f;
     if (!isReady) {
@@ -74589,16 +74761,6 @@ const ConnectionsManager = () => {
   reactExports.useEffect(() => {
     fetchData();
   }, [fetchData]);
-  reactExports.useEffect(() => {
-    if (isFormOpen || connections.length === 0) {
-      return;
-    }
-    if (selectedConnectionId && connections.some((c) => c.id === selectedConnectionId)) {
-      return;
-    }
-    const nextSelection = connections.find((c) => supportsActiveConnection && c.id === activeConnectionId) ?? connections[0];
-    setSelectedConnectionId(nextSelection == null ? void 0 : nextSelection.id);
-  }, [activeConnectionId, connections, isFormOpen, selectedConnectionId, supportsActiveConnection]);
   reactExports.useEffect(() => {
     if (connections.length > 0) {
       connections.forEach((c) => {
@@ -74623,49 +74785,72 @@ const ConnectionsManager = () => {
     if (!isReady) {
       return false;
     }
+    const requestId = (testRequestIds.current[connectionId] ?? 0) + 1;
+    testRequestIds.current[connectionId] = requestId;
+    const isStale = () => testRequestIds.current[connectionId] !== requestId;
     setStatuses((prev) => ({ ...prev, [connectionId]: "testing" }));
     setStatusMessages((prev) => ({ ...prev, [connectionId]: "" }));
+    setTestStartedAt((prev) => ({ ...prev, [connectionId]: Date.now() }));
     try {
-      const result = await callServerTool("test_connection", {
-        connectionId
-      });
+      const result = await withTestTimeout(
+        callServerTool("test_connection", { connectionId }),
+        CONNECTION_TEST_TIMEOUT_MS
+      );
+      if (isStale()) {
+        return false;
+      }
       const text = getToolText(result, ((_a3 = result.structuredContent) == null ? void 0 : _a3.message) ?? "No response");
       const isError = isErrorToolResult(result, text);
       setStatuses((prev) => ({ ...prev, [connectionId]: isError ? "error" : "ok" }));
       setStatusMessages((prev) => ({ ...prev, [connectionId]: text }));
       return !isError;
     } catch (e2) {
+      if (isStale()) {
+        return false;
+      }
       setStatuses((prev) => ({ ...prev, [connectionId]: "error" }));
-      setStatusMessages((prev) => ({
-        ...prev,
-        [connectionId]: `Error: ${e2}`
-      }));
+      setStatusMessages((prev) => ({ ...prev, [connectionId]: errorText(e2) }));
       return false;
     }
   };
+  const handleCancelTest = (connectionId) => {
+    testRequestIds.current[connectionId] = (testRequestIds.current[connectionId] ?? 0) + 1;
+    setStatuses((prev) => ({ ...prev, [connectionId]: "unknown" }));
+    setStatusMessages((prev) => ({ ...prev, [connectionId]: "Test cancelled." }));
+  };
   const handleTestFormData = async (formData, connection) => {
     var _a3;
     const typeToTest = (connection == null ? void 0 : connection.type) ?? selectedType;
     if (!isReady || !typeToTest) {
       return;
     }
+    const requestId = connection ? (testRequestIds.current[connection.id] ?? 0) + 1 : formTestIdRef.current += 1;
+    const isStale = () => connection ? testRequestIds.current[connection.id] !== requestId : formTestIdRef.current !== requestId;
     if (connection) {
+      testRequestIds.current[connection.id] = requestId;
       setToast(null);
       setStatuses((prev) => ({ ...prev, [connection.id]: "testing" }));
       setStatusMessages((prev) => ({ ...prev, [connection.id]: "" }));
+      setTestStartedAt((prev) => ({ ...prev, [connection.id]: Date.now() }));
     } else {
-      setToast({ text: "Testing connection…", severity: "success" });
+      setToast({ text: "Testing connection…", severity: "testing", startedAt: Date.now() });
     }
     try {
       const profileToTest = { ...formData, type: typeToTest };
       if (connection && profileToTest["password"] === "") {
         delete profileToTest["password"];
       }
-      const result = await callServerTool("test_connection", {
-        ...connection ? { connectionId: connection.id } : {},
-        type: typeToTest,
-        connectionProfile: profileToTest
-      });
+      const result = await withTestTimeout(
+        callServerTool("test_connection", {
+          ...connection ? { connectionId: connection.id } : {},
+          type: typeToTest,
+          connectionProfile: profileToTest
+        }),
+        CONNECTION_TEST_TIMEOUT_MS
+      );
+      if (isStale()) {
+        return;
+      }
       const text = getToolText(result, ((_a3 = result.structuredContent) == null ? void 0 : _a3.message) ?? "No response");
       const isError = isErrorToolResult(result, text);
       if (connection) {
@@ -74675,7 +74860,10 @@ const ConnectionsManager = () => {
         setToast(buildConnectionTestToast(result.structuredContent, text));
       }
     } catch (e2) {
-      const message = `Error: ${e2}`;
+      if (isStale()) {
+        return;
+      }
+      const message = `Connection test failed: ${errorText(e2)}`;
       const advice = getOptionalDependencyAdvice(message);
       if (connection) {
         setStatuses((prev) => ({ ...prev, [connection.id]: "error" }));
@@ -74689,6 +74877,10 @@ const ConnectionsManager = () => {
       }
     }
   };
+  const dismissToast = () => {
+    formTestIdRef.current += 1;
+    setToast(null);
+  };
   const handleSaveConnection = async (formData, connection) => {
     const typeToSave = (connection == null ? void 0 : connection.type) ?? selectedType;
     if (!isReady || !typeToSave) {
@@ -74718,26 +74910,36 @@ const ConnectionsManager = () => {
       setToast({ text: `Connection '${profileToSave["name"]}' saved.`, severity: "success" });
       await fetchData();
     } catch (e2) {
-      setToast({ text: `Error saving: ${e2}`, severity: "error" });
+      setToast({ text: `Couldn't save the connection: ${errorText(e2)}`, severity: "error" });
     } finally {
       setIsLoading(false);
     }
   };
-  const handleDeleteConnection = async (id, name) => {
-    if (!isReady || !window.confirm(`Delete connection '${name}'?`)) {
-      return;
-    }
-    setIsLoading(true);
-    try {
-      await callServerTool("delete_connection", { connectionId: id });
-      setSelectedConnectionId((prev) => prev === id ? void 0 : prev);
-      setToast({ text: `Connection '${name}' deleted.`, severity: "success" });
-      await fetchData();
-    } catch (e2) {
-      setToast({ text: `Error deleting: ${e2}`, severity: "error" });
-    } finally {
-      setIsLoading(false);
-    }
+  const handleDeleteConnection = (id, name) => {
+    if (!isReady) return;
+    setPendingConfirm({
+      title: "Delete connection",
+      message: `Delete connection '${name}'? This can't be undone.`,
+      confirmLabel: "Delete",
+      onConfirm: () => {
+        void (async () => {
+          setIsLoading(true);
+          try {
+            await callServerTool("delete_connection", { connectionId: id });
+            setSelectedConnectionId((prev) => prev === id ? void 0 : prev);
+            setToast({ text: `Connection '${name}' deleted.`, severity: "success" });
+            await fetchData();
+          } catch (e2) {
+            setToast({
+              text: `Couldn't delete the connection: ${errorText(e2)}`,
+              severity: "error"
+            });
+          } finally {
+            setIsLoading(false);
+          }
+        })();
+      }
+    });
   };
   const handleSetActiveConnection = async (connection) => {
     if (!isReady || !supportsActiveConnection) {
@@ -74780,24 +74982,33 @@ const ConnectionsManager = () => {
       setToast({ text: `Error saving password: ${e2}`, severity: "error" });
     }
   };
-  const handleClearConnectionPassword = async (connection) => {
-    var _a3;
+  const handleClearConnectionPassword = (connection) => {
     if (!isReady || !supportsActiveConnection || !connection.hasPassword) {
       return;
     }
-    if (!window.confirm(`Clear stored password for '${connection.name}'?`)) {
-      return;
-    }
-    try {
-      const result = await callServerTool("clear_connection_password", {
-        connectionId: connection.id
-      });
-      const text = getToolText(result, ((_a3 = result.structuredContent) == null ? void 0 : _a3.message) ?? "Password cleared.");
-      setToast({ text, severity: "success" });
-      await fetchData();
-    } catch (e2) {
-      setToast({ text: `Error clearing password: ${e2}`, severity: "error" });
-    }
+    setPendingConfirm({
+      title: "Clear stored password",
+      message: `Clear stored password for '${connection.name}'?`,
+      confirmLabel: "Clear",
+      onConfirm: () => {
+        void (async () => {
+          var _a3;
+          try {
+            const result = await callServerTool("clear_connection_password", {
+              connectionId: connection.id
+            });
+            const text = getToolText(
+              result,
+              ((_a3 = result.structuredContent) == null ? void 0 : _a3.message) ?? "Password cleared."
+            );
+            setToast({ text, severity: "success" });
+            await fetchData();
+          } catch (e2) {
+            setToast({ text: `Error clearing password: ${e2}`, severity: "error" });
+          }
+        })();
+      }
+    });
   };
   const handleInstallOptionalDependency = (advice) => {
     sendMessage("installOptionalDependency", {
@@ -74806,14 +75017,26 @@ const ConnectionsManager = () => {
     });
   };
   const openAddForm = () => {
+    setSelectedConnectionId(void 0);
     setSelectedType("");
     setIsFormOpen(true);
     setToast(null);
   };
-  const closeForm = () => {
+  const closeForm = reactExports.useCallback(() => {
     setIsFormOpen(false);
+    setSelectedConnectionId(void 0);
     setSelectedType("");
-  };
+    setToast(null);
+  }, []);
+  reactExports.useEffect(() => {
+    function handleClickOutside(event) {
+      if (isPopoverOpen && switcherWrapRef.current && !switcherWrapRef.current.contains(event.target)) {
+        setIsPopoverOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isPopoverOpen]);
   const activeSchemaDef = connectors.find((c) => c.id === selectedType);
   const selectedConnection = selectedConnectionId ? connections.find((c) => c.id === selectedConnectionId) : void 0;
   const activeFormSchema = (activeSchemaDef == null ? void 0 : activeSchemaDef.schema) ? schemaForConnectionMode(activeSchemaDef.schema, activeSchemaDef.id, mode) : void 0;
@@ -74833,7 +75056,10 @@ const ConnectionsManager = () => {
         role: toast.severity === "warning" || toast.severity === "error" ? "alert" : "status",
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-toast-text", children: toast.text }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sp-conn-toast-text", children: [
+            toast.text,
+            toast.severity === "testing" && toast.startedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TestElapsed, { since: toast.startedAt })
+          ] }),
           advice && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
@@ -74846,15 +75072,8 @@ const ConnectionsManager = () => {
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "sp-conn-toast-close",
-              onClick: () => setToast(null),
-              "aria-label": "Close message",
-              children: "✕"
-            }
-          )
+          toast.severity === "testing" && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn sp-conn-toast-action", onClick: dismissToast, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-conn-toast-close", onClick: dismissToast, "aria-label": "Close message", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { size: 14 }) })
         ]
       }
     );
@@ -74863,7 +75082,22 @@ const ConnectionsManager = () => {
     const status = statuses[connection.id] || "unknown";
     const statusMsg = statusMessages[connection.id] || "";
     if (status === "testing") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-status-message", role: "status", children: "Testing connection…" });
+      const startedAt = testStartedAt[connection.id];
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-status-message sp-conn-status-message-testing", role: "status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+          "Testing connection…",
+          startedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TestElapsed, { since: startedAt })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "sp-btn sp-conn-status-action",
+            onClick: () => handleCancelTest(connection.id),
+            children: "Cancel"
+          }
+        )
+      ] });
     }
     if (!statusMsg) {
       return null;
@@ -74901,30 +75135,46 @@ const ConnectionsManager = () => {
       }
     );
   };
-  const renderConnectionForm = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail", children: [
+  const renderConnectionForm = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-detail", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-header", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-detail-kicker", children: "Add connection" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sp-conn-detail-title", children: "New Connection" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sp-conn-detail-title", children: "New connection" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: closeForm, "aria-label": "Back to connection details", children: "Back" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: closeForm, "aria-label": "Cancel", children: "Cancel" })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
       renderToast(),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-section", children: "Database Type" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-type-grid", children: connectors.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          className: `sp-conn-type-card${selectedType === c.id ? " selected" : ""}`,
-          onClick: () => setSelectedType(c.id),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-card-icon", children: CONNECTOR_ICONS[c.id] || "🔌" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-card-name", children: c.displayName || c.id })
-          ]
-        },
-        c.id
-      )) }),
+      ["local", "server"].map((group) => {
+        const groupConnectors = connectors.filter((c) => getConnectorGroup(c.id) === group);
+        if (groupConnectors.length === 0) return null;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$2.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-type-group-label", id: `sp-conn-type-group-${group}`, children: CONNECTOR_GROUP_LABELS[group] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "sp-conn-type-grid",
+              role: "group",
+              "aria-labelledby": `sp-conn-type-group-${group}`,
+              children: groupConnectors.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `sp-conn-type-card${selectedType === c.id ? " selected" : ""}`,
+                  onClick: () => setSelectedType(c.id),
+                  "aria-pressed": selectedType === c.id,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-card-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectorGlyph, { type: c.id }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-card-name", children: c.displayName || c.id })
+                  ]
+                },
+                c.id
+              ))
+            }
+          )
+        ] }, group);
+      }),
       activeSchemaDef && activeFormSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         DynamicForm,
         {
@@ -74940,7 +75190,7 @@ const ConnectionsManager = () => {
   ] });
   const renderConnectionDetails = () => {
     if (!selectedConnection) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-detail", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-empty sp-conn-empty-compact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-empty-text", children: "Select a connection to view details, test it, or use it for queries." }) }) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-detail", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-empty sp-conn-empty-compact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-empty-text", children: "Select a connection to view details, test it, or use it for queries." }) }) });
     }
     const status = statuses[selectedConnection.id] || "unknown";
     const isActive = supportsActiveConnection && activeConnectionId === selectedConnection.id;
@@ -74987,18 +75237,17 @@ const ConnectionsManager = () => {
         ] })
       ] });
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-detail-kicker", children: "Connection settings" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sp-conn-detail-title", children: selectedConnection.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-item-meta", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-detail", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-header", style: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "16px", paddingBottom: "16px", borderBottom: "1px solid var(--sp-border)", marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "var(--sp-fg)" }, children: selectedConnection ? "Edit Connection" : "New Connection" }),
+          selectedConnection && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-badge", children: selectedConnection.type }),
-            isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-active-badge", children: "Active for queries" }),
+            isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-active-badge", children: "Active" }),
             selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-built-in-label", children: "Built-in" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-actions", style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
           supportsActiveConnection && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -75006,15 +75255,14 @@ const ConnectionsManager = () => {
               onClick: () => handleSetActiveConnection(selectedConnection),
               disabled: isActive || status === "testing",
               "aria-label": `Set ${selectedConnection.name} as the active connection for queries`,
-              children: isActive ? "Active for queries" : "Set active for queries"
+              children: isActive ? "Active" : "Set active"
             }
           ),
           !selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
-              className: "sp-btn",
+              className: "sp-btn sp-btn-ghost-danger",
               onClick: () => handleDeleteConnection(selectedConnection.id, selectedConnection.name),
-              style: { color: "var(--sp-error)" },
               "aria-label": `Delete connection ${selectedConnection.name}`,
               children: "Delete"
             }
@@ -75023,7 +75271,6 @@ const ConnectionsManager = () => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
         renderToast(),
-        isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-active-callout", role: "status", children: "Queries from SQL Preview and MCP will use this connection unless a query overrides it." }),
         modeAwareEditSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           DynamicForm,
           {
@@ -75040,86 +75287,90 @@ const ConnectionsManager = () => {
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-page", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-workspace", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "sp-conn-sidebar", "aria-label": "Connections list", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-title", children: "Connections" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "sp-btn",
-              onClick: fetchData,
-              disabled: isLoading,
-              "aria-label": "Refresh connections",
-              children: "Refresh"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "sp-btn sp-btn-primary",
-              onClick: openAddForm,
-              "aria-label": "Add new connection",
-              children: "Add"
-            }
-          )
-        ] })
-      ] }),
-      isLoading && connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-loading", style: { padding: 32 }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-spinner sp-spinner-lg" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Loading connections…" })
-      ] }) : connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-empty", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-empty-text", children: "No connections configured yet." }),
+  const renderGrid = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-grid-view", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-head", style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "DB Connections" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-head-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: "sp-btn",
+            onClick: fetchData,
+            disabled: isLoading,
+            "aria-label": "Refresh connections",
+            title: "Refresh",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.681 3H2V2h3.5l.5.5V6H5V4a5 5 0 1 0 4.53-.761l.302-.953A6 6 0 1 1 4.681 3z" }) })
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             className: "sp-btn sp-btn-primary",
             onClick: openAddForm,
             "aria-label": "Add new connection",
-            children: "Add your first connection"
+            children: "+ New Connection"
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-list", children: connections.map((c) => {
-        const status = statuses[c.id] || "unknown";
-        const statusMsg = statusMessages[c.id] || "";
-        const isActive = supportsActiveConnection && activeConnectionId === c.id;
-        const isSelected = selectedConnectionId === c.id && !isFormOpen;
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            type: "button",
-            className: `sp-conn-item${isActive ? " sp-conn-item-active" : ""}${isSelected ? " sp-conn-item-selected" : ""}`,
-            onClick: () => {
-              setSelectedConnectionId(c.id);
-              closeForm();
-              setToast(null);
-            },
-            "aria-pressed": isSelected,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: `sp-conn-status sp-conn-status-${status}`,
-                  title: statusMsg || (status === "unknown" ? "Not tested" : status)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-item-info", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-item-name", children: c.name }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-item-meta", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-badge", children: c.type }),
-                  isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-active-badge", children: "Active for queries" }),
-                  c.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-built-in-label", children: "Built-in" })
-                ] })
-              ] })
-            ]
-          },
-          c.id
-        );
-      }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Connection details", children: isFormOpen ? renderConnectionForm() : renderConnectionDetails() })
-  ] }) });
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-grid", style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: "12px" }, children: connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-empty", style: { gridColumn: "1 / -1" }, children: "No connections configured." }) : connections.map((c) => {
+      const status = statuses[c.id] || "unknown";
+      const isActive = supportsActiveConnection && activeConnectionId === c.id;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "sp-conn-card",
+          style: {
+            border: "1px solid var(--sp-border)",
+            borderRadius: "6px",
+            padding: "12px",
+            background: "var(--sp-header-bg)",
+            cursor: "pointer",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px"
+          },
+          onClick: () => {
+            setSelectedConnectionId(c.id);
+            setIsFormOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", fontWeight: 600 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { display: "flex", width: 16, height: 16, alignItems: "center", justifyContent: "center", color: "var(--sp-btn-bg)" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectorGlyph, { type: c.type }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: c.name })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "12px", color: "var(--sp-muted-fg)" }, children: c.type.toUpperCase() }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "11px", marginTop: "4px" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sp-dot sp-dot-${status}` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--sp-muted-fg)" }, children: status === "ok" ? "Connected" : status === "error" ? "Error" : status === "testing" ? "Testing..." : "Disconnected" }),
+              isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pill", style: { marginLeft: "auto" }, children: "Active" })
+            ] })
+          ]
+        },
+        c.id
+      );
+    }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-page", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn", children: !isFormOpen && !selectedConnectionId ? renderGrid() : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: closeForm, style: { marginBottom: 12, alignSelf: "flex-start" }, children: "← Back to connections" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Connection details", style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: 6 }, children: isFormOpen ? renderConnectionForm() : renderConnectionDetails() })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfirmDialog,
+      {
+        open: pendingConfirm !== null,
+        title: (pendingConfirm == null ? void 0 : pendingConfirm.title) ?? "Confirm",
+        message: (pendingConfirm == null ? void 0 : pendingConfirm.message) ?? "",
+        confirmLabel: (pendingConfirm == null ? void 0 : pendingConfirm.confirmLabel) ?? "Confirm",
+        onConfirm: () => {
+          pendingConfirm == null ? void 0 : pendingConfirm.onConfirm();
+          setPendingConfirm(null);
+        },
+        onCancel: () => setPendingConfirm(null)
+      }
+    )
+  ] });
 };
 function extractQueryResult(rawData) {
   if (!rawData || typeof rawData !== "object") return null;
@@ -75355,7 +75606,7 @@ function App() {
               },
               title: "Close tab",
               "aria-label": "Close tab",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.707L8 8.707z" }) })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { size: 10 })
             }
           )
         ]
@@ -75365,7 +75616,7 @@ function App() {
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-content", children: [
       error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-error-bar", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: error }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => updateTab(activeTab.id, { error: null }), "aria-label": "Close error message", children: "✕" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => updateTab(activeTab.id, { error: null }), "aria-label": "Close error message", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { size: 14 }) })
       ] }),
       activeView === "query" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-result-header", children: [
@@ -96795,6 +97046,20 @@ body.light-theme .ag-theme-quartz {
 }
 /* src/ui/core/tokens.css — design tokens + shared component styles */
 
+/* ── Accessibility utilities ─────────────────────────────────── */
+/* Standard visually-hidden pattern: present to assistive tech, invisible on screen. */
+.sp-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* ── Tokens ────────────────────────────────────────────────── */
 :root {
   --sp-bg: var(--vscode-editor-background, #ffffff);
@@ -96828,8 +97093,15 @@ body.light-theme .ag-theme-quartz {
   --sp-selection-bg: var(--vscode-editor-selectionBackground, rgba(38, 79, 120, 0.7));
   --sp-hover-bg: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.07));
 
+  /* Modal backdrop scrim — only for elements that truly float above the page (native <dialog>). */
+  --sp-backdrop: rgba(0, 0, 0, 0.5);
+
   --sp-focus-border: var(--vscode-focusBorder, #007acc);
   --sp-error: var(--vscode-errorForeground, #a1260d);
+  /* Solid destructive fill — dark enough in both themes to carry the button foreground,
+     unlike --sp-error whose dark value (salmon) is a text color, not a fill. */
+  --sp-btn-danger-bg: var(--vscode-statusBarItem-errorBackground, #a1260d);
+  --sp-btn-danger-fg: var(--vscode-statusBarItem-errorForeground, #ffffff);
   --sp-success: var(--vscode-charts-green, #107c10);
   --sp-warning: var(--vscode-charts-yellow, #ca8a04);
 
@@ -96848,6 +97120,7 @@ body.light-theme .ag-theme-quartz {
   --sp-space-lg: 24px;
 
   --sp-radius: 3px;
+  --sp-shadow-floating: 0 6px 18px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
 }
 
 .vscode-dark,
@@ -96934,6 +97207,7 @@ body {
   padding: 0 6px;
   flex-shrink: 0;
   border-left: 1px solid var(--sp-border);
+  gap: 6px;
 }
 
 .sp-active-file-indicator {
@@ -97001,6 +97275,10 @@ body {
   border-bottom-color: var(--sp-tab-border);
   background: var(--sp-tab-active-bg, var(--sp-bg));
 }
+.sp-tab:focus-visible {
+  outline: 2px solid var(--sp-focus-border);
+  outline-offset: -2px;
+}
 
 .sp-tab-label {
   font-size: 12px;
@@ -97029,6 +97307,11 @@ body {
 .sp-tab.active .sp-tab-close {
   opacity: 0.6;
 }
+.sp-tab-close:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--sp-focus-border);
+  outline-offset: 1px;
+}
 .sp-tab-close:hover {
   opacity: 1 !important;
   background: var(--sp-hover-bg);
@@ -97049,7 +97332,7 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 6px 12px;
-  background: rgba(161, 38, 13, 0.1);
+  background: color-mix(in srgb, var(--sp-error) 10%, transparent);
   border-bottom: 1px solid var(--sp-error);
   color: var(--sp-error);
   font-size: 12px;
@@ -97085,7 +97368,7 @@ body {
   align-items: flex-start;
   gap: 10px;
   padding: 10px 12px;
-  background: rgba(202, 138, 4, 0.12);
+  background: color-mix(in srgb, var(--sp-warning) 12%, transparent);
   border-bottom: 1px solid var(--sp-warning);
   color: var(--sp-warning);
   flex-shrink: 0;
@@ -97106,6 +97389,33 @@ body {
   opacity: 1;
 }
 
+/* Cancelled notice — user-initiated outcome, so neutral surface tones, not status color. */
+.sp-cancelled-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: var(--sp-header-bg);
+  border-bottom: 1px solid var(--sp-border);
+  color: var(--sp-muted-fg);
+  font-size: 12px;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.sp-cancelled-bar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: currentColor;
+  font-size: 14px;
+  flex-shrink: 0;
+  padding: 0 2px;
+  opacity: 0.8;
+}
+.sp-cancelled-bar button:hover {
+  opacity: 1;
+}
+
 /* ── Result header ─────────────────────────────────────────── */
 .sp-result-header {
   display: flex;
@@ -97165,14 +97475,14 @@ body {
   cursor: pointer;
   border: none;
   border-radius: var(--sp-radius);
-  background: var(--sp-btn-sec-bg, #3a3d41);
-  color: var(--sp-btn-sec-fg, #cccccc);
+  background: var(--sp-btn-sec-bg);
+  color: var(--sp-btn-sec-fg);
   white-space: nowrap;
   transition: background 0.1s;
   line-height: 1.4;
 }
 .sp-btn:hover:not(:disabled) {
-  background: var(--sp-btn-sec-hover, #45494e);
+  background: var(--sp-btn-sec-hover);
 }
 .sp-btn:disabled {
   opacity: 0.4;
@@ -97188,6 +97498,54 @@ body {
   background: var(--sp-btn-hover);
 }
 
+.sp-btn-danger {
+  background: var(--sp-btn-danger-bg);
+  color: var(--sp-btn-danger-fg);
+  font-weight: 500;
+}
+.sp-btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--sp-btn-danger-bg) 85%, black);
+}
+/* Quiet destructive action outside confirm moments: derived error tints, no solid fill. */
+.sp-btn-ghost-danger {
+  background: color-mix(in srgb, var(--sp-error) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sp-error) 55%, transparent);
+  color: var(--sp-error);
+}
+.sp-btn-ghost-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--sp-error) 18%, transparent);
+}
+
+/* ── Confirm dialog (themed replacement for window.confirm) ─── */
+.sp-confirm-dialog {
+  width: min(90vw, 26rem);
+  padding: 16px;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  background: var(--sp-header-bg, var(--sp-bg));
+  color: var(--sp-fg);
+  font-family: var(--sp-font);
+}
+.sp-confirm-dialog::backdrop {
+  background: var(--sp-backdrop);
+}
+.sp-confirm-dialog-title {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.sp-confirm-dialog-message {
+  margin: 0 0 16px;
+  color: var(--sp-muted-fg);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.sp-confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 /* ── Icon-only button (shared by density, side panel, etc.) ── */
 .sp-icon-btn {
   display: inline-flex;
@@ -97213,8 +97571,10 @@ body {
 }
 .sp-icon-btn.active {
   color: var(--sp-btn-bg);
-  border-color: var(--sp-btn-bg);
   background: var(--sp-hover-bg);
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
 /* ── Grid container ────────────────────────────────────────── */
@@ -97241,6 +97601,11 @@ body {
 .sp-loading p {
   margin: 0;
 }
+/* Live elapsed readout; tabular digits so the count-up doesn't jitter horizontally. */
+.sp-loading-elapsed {
+  margin-left: 6px;
+  font-variant-numeric: tabular-nums;
+}
 
 /* ── Empty state ───────────────────────────────────────────── */
 .sp-empty {
@@ -97364,7 +97729,7 @@ body {
   min-height: 22px;
   padding: 3px 7px;
   border: 1px solid var(--sp-border);
-  border-radius: 4px;
+  border-radius: var(--sp-radius);
   background: color-mix(in srgb, var(--sp-header-bg) 82%, transparent);
   box-sizing: border-box;
   color: var(--sp-muted-fg);
@@ -97714,6 +98079,46 @@ body.vscode-high-contrast .ag-theme-quartz {
   opacity: 0.9;
 }
 
+/* ── Tab provenance badge (client type, shown in "All Sessions" view) ──── */
+.sp-tab-provenance {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--sp-muted-fg);
+  background: var(--sp-badge-bg);
+  border-radius: 3px;
+  padding: 1px 5px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* ── MCP trust indicator ──────────────────────────────────── */
+.sp-trust-badge {
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid transparent;
+  border-radius: var(--sp-radius);
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  cursor: default;
+}
+.sp-trust-badge.safe {
+  background: var(--sp-hover-bg);
+  color: var(--sp-fg);
+  border-color: var(--sp-border);
+}
+.sp-trust-badge.unrestricted {
+  background: var(--sp-hover-bg);
+  color: var(--sp-warning);
+  border-color: var(--sp-border);
+}
+
 /* ── Tab context menu ──────────────────────────────────────── */
 .sp-ctx-menu {
   position: fixed;
@@ -98024,6 +98429,11 @@ body.vscode-high-contrast .ag-theme-quartz {
   grid-template-columns: minmax(360px, 520px) 1fr;
   align-items: start;
   gap: 22px;
+  /* The preview column's own content caps out well short of 1fr (see PREVIEW_MAX_WIDTH in
+     SettingsPanel.tsx) — without a matching cap here, a wide standalone browser tab stretches
+     this grid edge-to-edge and leaves a dead gap beside the preview instead of using that width. */
+  max-width: 1080px;
+  margin-inline: auto;
 }
 
 .sp-settings-main {
@@ -98305,6 +98715,11 @@ body.vscode-high-contrast .ag-theme-quartz {
   color: var(--sp-warning);
 }
 
+/* In-progress MCP test — amber, matching the testing vocabulary elsewhere. */
+.sp-settings-status.testing {
+  color: var(--sp-warning);
+}
+
 .sp-settings-status.error {
   color: var(--sp-error);
 }
@@ -98336,6 +98751,15 @@ body.vscode-high-contrast .ag-theme-quartz {
   border-bottom: 1px solid var(--sp-border);
 }
 
+/* Label + copy affordance for snippets the user pastes into an external client. */
+.sp-settings-guide-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
 .sp-settings-guide-section:last-child {
   border-bottom: none;
 }
@@ -98473,7 +98897,10 @@ body.vscode-high-contrast .ag-theme-quartz {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-width: none;
+  /* Same cap as .sp-settings-layout — otherwise the connection form stretches edge-to-edge
+     of a wide standalone browser tab instead of staying a dense, disciplined width. */
+  max-width: 1080px;
+  margin-inline: auto;
   min-height: 0;
 }
 
@@ -98499,36 +98926,247 @@ body.vscode-high-contrast .ag-theme-quartz {
   overflow: hidden;
 }
 
-.sp-conn-detail-header {
+.sp-conn-head {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 14px;
+  gap: 10px;
+}
+
+.sp-conn-head h2 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.sp-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sp-switcher-wrap {
+  position: relative;
+}
+
+.sp-switcher {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
   background: var(--sp-header-bg);
-  border-bottom: 1px solid var(--sp-border);
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  color: var(--sp-fg);
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.1s ease, background 0.1s ease;
 }
 
-.sp-conn-detail-kicker {
+.sp-switcher:hover {
+  border-color: var(--sp-muted-fg);
+}
+
+.sp-switcher[aria-expanded="true"] {
+  border-color: var(--sp-focus-border);
+}
+
+.sp-switcher .sp-sw-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.sp-switcher .sp-grow {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.sp-switcher .sp-chev {
   color: var(--sp-muted-fg);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sp-switcher[aria-expanded="true"] .sp-chev {
+  transform: rotate(180deg);
+}
+
+.sp-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.sp-dot-ok {
+  background: var(--sp-success);
+}
+
+.sp-dot-error {
+  background: var(--sp-error);
+}
+
+.sp-dot-unknown,
+.sp-dot-testing {
+  background: var(--sp-border);
+  box-shadow: inset 0 0 0 1px var(--sp-muted-fg);
+}
+
+.sp-dot-testing {
+  animation: pulse-border 1.5s infinite;
+}
+
+.sp-badge {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 2px;
+  background: var(--sp-bg);
+  border: 1px solid var(--sp-border);
+  color: var(--sp-muted-fg);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sp-pill {
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--sp-hover-bg);
+  color: var(--sp-fg);
+  border: 1px solid var(--sp-border);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sp-tag-builtin {
+  font-size: 10px;
+  color: var(--sp-muted-fg);
+  font-weight: 500;
+  white-space: nowrap;
 }
 
-.sp-conn-detail-title {
-  margin: 3px 0 6px;
+.sp-popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  z-index: 50;
+  background: var(--sp-bg);
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  box-shadow: var(--sp-shadow-floating);
+  padding: 4px;
+  display: none;
+  transform-origin: top center;
+}
+
+.sp-popover.open {
+  display: block;
+  animation: pop 0.12s ease-out;
+}
+
+@keyframes pop {
+  from { opacity: 0; transform: translateY(-4px) scale(0.99); }
+  to { opacity: 1; transform: none; }
+}
+
+.sp-pop-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
   color: var(--sp-fg);
-  font-size: 15px;
-  line-height: 1.3;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sp-pop-row:hover {
+  background: var(--sp-hover-bg);
+}
+
+.sp-pop-row[aria-current="true"] {
+  background: var(--sp-selection-bg);
 }
 
-.sp-conn-detail-actions {
+.sp-pop-row .sp-grow {
+  flex: 1;
+  min-width: 0;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.sp-pop-row .sp-nm {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sp-pop-check {
+  color: var(--sp-focus-border);
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.sp-pop-sep {
+  height: 1px;
+  background: var(--sp-border);
+  margin: 4px 2px;
+}
+
+.sp-pop-add {
+  color: var(--sp-focus-border);
+  font-weight: 600;
+}
+
+.sp-pop-add .sp-plus {
+  font-size: 14px;
+}
+
+.sp-callout {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--sp-success) 30%, var(--sp-border));
+  border-radius: var(--sp-radius);
+  color: var(--sp-fg);
+  background: color-mix(in srgb, var(--sp-success) 8%, transparent);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.sp-callout b {
+  font-weight: 600;
+}
+
+.sp-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sp-detail .sp-conn-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .sp-conn-detail-body {
@@ -98585,18 +99223,13 @@ body.vscode-high-contrast .ag-theme-quartz {
   outline: 1px solid var(--sp-focus-border);
   outline-offset: -1px;
 }
+/* Active-for-queries: tonal selection background; the green "Active" badge carries the state. */
 .sp-conn-item-active {
   background: var(--sp-selection-bg);
-  box-shadow: inset 4px 0 0 var(--sp-success);
 }
+/* Currently viewed: full selection ring (DESIGN.md ring vocabulary), not an edge stripe. */
 .sp-conn-item-selected {
-  box-shadow: inset 2px 0 0 var(--sp-btn-bg);
-}
-
-.sp-conn-item-active.sp-conn-item-selected {
-  box-shadow:
-    inset 4px 0 0 var(--sp-success),
-    inset 0 0 0 1px var(--sp-btn-bg);
+  box-shadow: inset 0 0 0 1px var(--sp-btn-bg);
 }
 
 .sp-conn-item-info {
@@ -98681,9 +99314,11 @@ body.vscode-high-contrast .ag-theme-quartz {
   align-self: flex-start;
 }
 
+/* Neutral provenance descriptor, not a status — muted keeps success-green meaning
+   "connection OK / active" only (DESIGN.md: status color is semantic, never decorative). */
 .sp-conn-built-in-label {
   font-size: 10px;
-  color: var(--sp-success);
+  color: var(--sp-muted-fg);
   font-weight: 500;
   white-space: nowrap;
 }
@@ -98695,8 +99330,9 @@ body.vscode-high-contrast .ag-theme-quartz {
   font-weight: 700;
   padding: 1px 6px;
   border-radius: 999px;
-  color: var(--sp-bg);
-  background: var(--sp-success);
+  color: var(--sp-fg);
+  background: var(--sp-hover-bg);
+  border: 1px solid var(--sp-border);
   white-space: nowrap;
 }
 
@@ -98741,7 +99377,21 @@ body.vscode-high-contrast .ag-theme-quartz {
   gap: 10px;
   color: var(--sp-warning);
   border-color: var(--sp-warning);
-  background: rgba(202, 138, 4, 0.12);
+  background: color-mix(in srgb, var(--sp-warning) 12%, transparent);
+}
+
+.sp-conn-status-message-testing {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+/* Tabular digits so the count-up doesn't jitter horizontally. */
+.sp-conn-test-elapsed {
+  margin-left: 4px;
+  font-variant-numeric: tabular-nums;
+  color: var(--sp-muted-fg);
 }
 
 .sp-conn-warning-content {
@@ -98844,6 +99494,27 @@ body.vscode-high-contrast .ag-theme-quartz {
 .sp-conn-type-card-icon {
   font-size: 22px;
   line-height: 1;
+  color: var(--sp-muted-fg);
+}
+/* Glyphs inherit the icon slot's font-size so the whole picker rescales with the editor font. */
+.sp-conn-type-card-icon .sp-connector-glyph {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+.sp-conn-type-card:hover .sp-conn-type-card-icon,
+.sp-conn-type-card.selected .sp-conn-type-card-icon {
+  color: var(--sp-fg);
+}
+
+.sp-conn-type-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sp-muted-fg);
+  margin: 10px 0 6px;
+}
+.sp-conn-type-group-label:first-of-type {
+  margin-top: 0;
 }
 
 /* ── Connection form ─────────────────────────────────────── */
@@ -98861,7 +99532,7 @@ body.vscode-high-contrast .ag-theme-quartz {
 }
 
 .sp-conn-form-field {
-  grid-column: span 6;
+  grid-column: 1 / -1;
   min-width: 0;
 }
 
@@ -98871,6 +99542,12 @@ body.vscode-high-contrast .ag-theme-quartz {
   grid-column: 1 / -1;
 }
 
+.sp-conn-form-field-catalog,
+.sp-conn-form-field-schema,
+.sp-conn-form-field-source {
+  grid-column: span 6;
+}
+
 .sp-conn-form-field-host {
   grid-column: span 8;
 }
@@ -99010,7 +99687,7 @@ body.vscode-high-contrast .ag-theme-quartz {
   justify-content: flex-end;
   gap: 6px;
   margin-top: 8px;
-  padding-top: 10px;
+  padding: 10px 0;
   border-top: 1px solid var(--sp-border);
 }
 
@@ -99041,20 +99718,26 @@ body.vscode-high-contrast .ag-theme-quartz {
   border: 1px solid transparent;
 }
 .sp-conn-toast-success {
-  background: rgba(16, 124, 16, 0.08);
+  background: color-mix(in srgb, var(--sp-success) 8%, transparent);
   border-color: var(--sp-success);
   color: var(--sp-success);
 }
 .sp-conn-toast-error {
-  background: rgba(161, 38, 13, 0.08);
+  background: color-mix(in srgb, var(--sp-error) 8%, transparent);
   border-color: var(--sp-error);
   color: var(--sp-error);
 }
 .sp-conn-toast-warning {
-  background: rgba(202, 138, 4, 0.12);
+  background: color-mix(in srgb, var(--sp-warning) 12%, transparent);
   border-color: var(--sp-warning);
   color: var(--sp-warning);
 }
+/* In-progress test — amber like the connection list's testing dots, distinct from a warning outcome. */
+.sp-conn-toast-testing {
+  background: color-mix(in srgb, var(--sp-warning) 8%, transparent);
+  border-color: color-mix(in srgb, var(--sp-warning) 55%, transparent);
+  color: var(--sp-warning);
+}
 .sp-conn-toast-text {
   flex: 1;
   min-width: 0;
@@ -99081,6 +99764,8 @@ body.vscode-high-contrast .ag-theme-quartz {
   opacity: 1;
 }
 
+
+
 /* Keep the user-selected type size flowing through shared UI primitives. */
 .sp-app,
 .sp-app :where(button, input, select, textarea, code, pre),
@@ -99203,6 +99888,24 @@ body.vscode-high-contrast .ag-theme-quartz {
   .sp-conn-credential-actions {
     justify-content: flex-start;
   }
+}
+
+/* ── Reduced motion ────────────────────────────────────────── */
+/* Looping animations (spin/pulse) are disabled outright rather than slowed, since a static
+   indicator still communicates loading/testing state via its accompanying text or color. Short
+   hover/focus transitions (opacity, color, background) are left alone — they're not the kind of
+   sustained or large-amplitude motion prefers-reduced-motion targets. */
+@media (prefers-reduced-motion: reduce) {
+  .sp-spinner,
+  .sp-conn-status-testing {
+    animation: none;
+  }
+  .sp-spinner {
+    opacity: 0.7;
+  }
+  .sp-conn-status-testing {
+    opacity: 0.7;
+  }
 }</style>
 </head>