sql-preview 0.6.6 → 0.6.8

package/Changelog.md

@@ -2,6 +2,30 @@
 
 ## [Unreleased]
 
+## [0.6.8] - 2026-07-12
+
+### Added
+
+- Comprehensive query telemetry (RFC-068): query events now carry a closed-enum `connector` dimension; a layered, connector-aware error classifier replaces the old substring matching (previously ~95% of failures were `unknown`); MCP tool calls and agent/web-originated queries are now telemetered daemon-side (fail-closed, consent inherited from the extension or explicit `SQL_PREVIEW_TELEMETRY=1` standalone opt-in); a new `mcp_tool_invoked` event measures agent usage. Telemetry schema `2.1` (additive).
+- Internal/dev traffic isolation: telemetry is suppressed in Extension Development/Test hosts (override with `SQL_PREVIEW_POSTHOG_TOKEN` for debug projects), a new `sqlPreview.telemetry.internal` setting (or `SQL_PREVIEW_TELEMETRY_INTERNAL=1`) stamps every event with `internal_user`, and `SQL Preview: Show Telemetry Status` now displays the anonymous install ID for PostHog exclusion filters.
+
+### Changed
+
+- Query error payloads now include an advisory machine-readable `errorKind` alongside the existing message/details (no SQL text or message content is ever sent to telemetry; only the classified enum).
+- Fully implemented MCP Streamable HTTP Spec compliance (RFC-072). The `/mcp` HTTP endpoint now strictly follows the `@modelcontextprotocol/sdk` (pinned to 1.27.1) stateful session specifications, properly supporting Claude Code HTTP transports and standard MCP external clients.
+
+## [0.6.7] - 2026-07-08
+
+### Changed
+
+- Replaced the stacked tab-close undo toast notifications with a simpler Undo button in the top action bar.
+- Restored the original emoji icons (`▶️` and `▶️➕`) for the CodeLens query execution actions.
+- Extracted hardcoded shadow colors and font stacks in the UI to strictly align with the `DESIGN.md` token system.
+
+### Fixed
+
+- Fixed an issue where running a query in a new tab would occasionally render a blank page until the tab was manually focused.
+
 ## [0.6.6] - 2026-07-06
 
 ### Added

package/README.md

@@ -6,8 +6,8 @@ Run SQL in VS Code, manage database profiles securely, inspect results in a
 high-performance grid, and expose governed database tools to Claude, Cursor,
 Copilot, and other Model Context Protocol clients.
 
-[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/mehul.sql-preview?label=VS%20Code%20Marketplace&color=0066b8)](https://marketplace.visualstudio.com/items?itemName=mehul.sql-preview)
-[![Installs](https://img.shields.io/visual-studio-marketplace/i/mehul.sql-preview)](https://marketplace.visualstudio.com/items?itemName=mehul.sql-preview)
+[![VS Code Marketplace](https://img.shields.io/vscode-marketplace/v/mehul.sql-preview?label=VS%20Code%20Marketplace&color=0066b8)](https://marketplace.visualstudio.com/items?itemName=mehul.sql-preview)
+[![Installs](https://img.shields.io/vscode-marketplace/i/mehul.sql-preview)](https://marketplace.visualstudio.com/items?itemName=mehul.sql-preview)
 [![OpenVSX](https://img.shields.io/open-vsx/v/mehul/sql-preview?label=OpenVSX&color=a60ee5)](https://open-vsx.org/extension/mehul/sql-preview)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 

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;
         }
 
@@ -12574,6 +12574,8 @@ const useAppStore = create((set, get) => ({
   mcpEnabled: false,
   mcpSafeMode: true,
   mcpPort: null,
+  daemonVersion: null,
+  daemonPid: null,
   currentVersion: null,
   latestVersion: null,
   settingsPanelTab: null,
@@ -12620,7 +12622,7 @@ const useAppStore = create((set, get) => ({
   showGuideHub: (state) => set({ guideHub: state, settingsPanelTab: null }),
   closeGuideHub: () => set({ guideHub: null }),
   applyConfig: (c) => set((state) => {
-    var _a3;
+    var _a3, _b2, _c3;
     const newState = { ...state };
     if (c.fontSize !== void 0) {
       newState.fontSize = c.fontSize != null && c.fontSize > 0 ? c.fontSize : null;
@@ -12637,8 +12639,10 @@ const useAppStore = create((set, get) => ({
     if (c.mcpSafeMode !== void 0) {
       newState.mcpSafeMode = c.mcpSafeMode;
     }
-    if (((_a3 = c.mcpStatus) == null ? void 0 : _a3.port) !== void 0) {
-      newState.mcpPort = c.mcpStatus.port;
+    if (c.mcpStatus !== void 0) {
+      newState.mcpPort = ((_a3 = c.mcpStatus) == null ? void 0 : _a3.port) ?? null;
+      newState.daemonVersion = ((_b2 = c.mcpStatus) == null ? void 0 : _b2.version) ?? null;
+      newState.daemonPid = ((_c3 = c.mcpStatus) == null ? void 0 : _c3.pid) ?? null;
     }
     return newState;
   }),
@@ -12678,7 +12682,9 @@ const useAppStore = create((set, get) => ({
   setActiveTab: (id) => set({ activeTabId: id }),
   updateTab: (id, updates) => set((state) => ({
     tabs: state.tabs.map((tab) => {
-      if (tab.id !== id) return tab;
+      if (tab.id !== id) {
+        return tab;
+      }
       const next = { ...tab, ...updates };
       if (updates.isLoading === true && !tab.isLoading) {
         next.loadingStartedAt = Date.now();
@@ -74761,16 +74767,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) => {
@@ -75027,12 +75023,14 @@ const ConnectionsManager = () => {
     });
   };
   const openAddForm = () => {
+    setSelectedConnectionId(void 0);
     setSelectedType("");
     setIsFormOpen(true);
     setToast(null);
   };
   const closeForm = reactExports.useCallback(() => {
     setIsFormOpen(false);
+    setSelectedConnectionId(void 0);
     setSelectedType("");
     setToast(null);
   }, []);
@@ -75246,17 +75244,16 @@ const ConnectionsManager = () => {
       ] });
     };
     return /* @__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: "Connection settings" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sp-conn-detail-title", children: selectedConnection.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-item-meta", 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",
             {
@@ -75264,7 +75261,7 @@ 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(
@@ -75280,12 +75277,6 @@ const ConnectionsManager = () => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
         renderToast(),
-        isActive && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-callout", role: "status", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-dot sp-dot-ok" }),
-          "Queries from SQL Preview and MCP use ",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("b", { children: selectedConnection.name }),
-          " unless a query overrides it."
-        ] }),
         modeAwareEditSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           DynamicForm,
           {
@@ -75302,149 +75293,75 @@ const ConnectionsManager = () => {
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-page", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-head", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "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: "12",
-                  height: "12",
-                  viewBox: "0 0 16 16",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "path",
-                    {
-                      fillRule: "evenodd",
-                      clipRule: "evenodd",
-                      d: "M13.627 7.25H15C14.7347 4.09068 12.1963 1.55227 9.03698 1.28698V2.66579C11.4398 2.9238 13.3638 4.84777 13.6218 7.25055L13.627 7.25ZM8.0004 0C3.58212 0 0.000396729 3.58172 0.000396729 8C0.000396729 12.4183 3.58212 16 8.0004 16C12.1643 16 15.5843 12.8124 15.9682 8.75H14.4532C14.0792 11.9772 11.3323 14.5 8.0004 14.5C4.41054 14.5 1.5004 11.5899 1.5004 8C1.5004 4.41015 4.41054 1.5 8.0004 1.5C9.72825 1.5 11.2982 2.17415 12.4578 3.27218L10.0004 5.75H15.5004V0.25L13.5186 2.23179C12.1158 0.849658 10.158 0 8.0004 0ZM2.37344 8.75C2.63873 11.9093 5.17714 14.4477 8.33644 14.713V13.3342C5.93366 13.0762 4.00969 11.1522 3.75168 8.74945L3.74646 8.75H2.37344Z",
-                      fill: "currentColor"
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "sp-btn sp-btn-primary",
-              onClick: openAddForm,
-              "aria-label": "Add new connection",
-              children: "Add"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-switcher-wrap", ref: switcherWrapRef, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  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-switcher",
-            "aria-expanded": isPopoverOpen,
-            onClick: () => setIsPopoverOpen((v) => !v),
-            children: [
-              selectedConnection ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `sp-dot ${statuses[selectedConnection.id] === "ok" ? "sp-dot-ok" : statuses[selectedConnection.id] === "error" ? "sp-dot-error" : statuses[selectedConnection.id] === "testing" ? "sp-dot-testing" : "sp-dot-unknown"}`
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-grow", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-sw-name", children: selectedConnection.name }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-badge", children: selectedConnection.type.toUpperCase() }),
-                  supportsActiveConnection && activeConnectionId === selectedConnection.id && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pill", children: "Active for queries" })
-                ] })
-              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-grow", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-sw-name", children: "No connection selected" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "svg",
-                {
-                  className: "sp-chev",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "path",
-                    {
-                      d: "M4.29303 5.29289C4.68355 4.90237 5.31672 4.90237 5.70724 5.29289L8.00014 7.58579L10.293 5.29289C10.6836 4.90237 11.3167 4.90237 11.7072 5.29289C12.0978 5.68342 12.0978 6.31658 11.7072 6.70711L8.70724 9.70711C8.31672 10.0976 7.68355 10.0976 7.29303 9.70711L4.29303 6.70711C3.90251 6.31658 3.90251 5.68342 4.29303 5.29289Z",
-                      fill: "currentColor"
-                    }
-                  )
-                }
-              )
-            ]
+            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.jsxs("div", { className: `sp-popover ${isPopoverOpen ? "open" : ""}`, children: [
-          connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { padding: "8px 10px", color: "var(--sp-muted-fg)" }, children: "No connections configured." }) : connections.map((c) => {
-            const status = statuses[c.id] || "unknown";
-            const isActive = supportsActiveConnection && activeConnectionId === c.id;
-            const isSelected = selectedConnectionId === c.id && !isFormOpen;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                className: "sp-pop-row",
-                "aria-current": isSelected,
-                onClick: () => {
-                  setSelectedConnectionId(c.id);
-                  closeForm();
-                  setIsPopoverOpen(false);
-                  setToast(null);
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: `sp-dot ${status === "ok" ? "sp-dot-ok" : status === "error" ? "sp-dot-error" : status === "testing" ? "sp-dot-testing" : "sp-dot-unknown"}`
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-grow", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-nm", children: c.name }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-badge", children: c.type.toUpperCase() }),
-                    isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pill", children: "Active" }),
-                    c.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-tag-builtin", children: "Built-in" })
-                  ] }),
-                  isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pop-check", children: "✓" })
-                ]
-              },
-              c.id
-            );
-          }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-pop-sep" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "sp-pop-row sp-pop-add",
-              onClick: () => {
-                openAddForm();
-                setIsPopoverOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-plus", children: "+" }),
-                " Add connection"
-              ]
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Connection details", children: isFormOpen ? renderConnectionForm() : renderConnectionDetails() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: "sp-btn sp-btn-primary",
+            onClick: openAddForm,
+            "aria-label": "Add new connection",
+            children: "+ New Connection"
+          }
+        )
+      ] })
     ] }),
+    /* @__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,
       {
@@ -97209,6 +97126,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,
@@ -97295,6 +97213,7 @@ body {
   padding: 0 6px;
   flex-shrink: 0;
   border-left: 1px solid var(--sp-border);
+  gap: 6px;
 }
 
 .sp-active-file-indicator {
@@ -97658,8 +97577,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 ────────────────────────────────────────── */
@@ -98182,17 +98103,26 @@ body.vscode-high-contrast .ag-theme-quartz {
 .sp-trust-badge {
   font-size: 11px;
   font-weight: 600;
-  border: 1px solid currentColor;
+  border: 1px solid transparent;
   border-radius: var(--sp-radius);
-  padding: 2px 8px;
+  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 {
-  color: var(--sp-success);
+  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 ──────────────────────────────────────── */
@@ -99116,8 +99046,9 @@ body.vscode-high-contrast .ag-theme-quartz {
   font-weight: 700;
   padding: 1px 7px;
   border-radius: 999px;
-  background: var(--sp-success);
-  color: var(--sp-bg);
+  background: var(--sp-hover-bg);
+  color: var(--sp-fg);
+  border: 1px solid var(--sp-border);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -99138,16 +99069,12 @@ body.vscode-high-contrast .ag-theme-quartz {
   background: var(--sp-bg);
   border: 1px solid var(--sp-border);
   border-radius: var(--sp-radius);
-  box-shadow: var(--sp-shadow, 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10));
+  box-shadow: var(--sp-shadow-floating);
   padding: 4px;
   display: none;
   transform-origin: top center;
 }
 
-.vscode-dark .sp-popover {
-  box-shadow: var(--sp-shadow, 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30));
-}
-
 .sp-popover.open {
   display: block;
   animation: pop 0.12s ease-out;
@@ -99409,8 +99336,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;
 }
 
@@ -99765,7 +99693,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);
 }
 
@@ -99842,27 +99770,7 @@ body.vscode-high-contrast .ag-theme-quartz {
   opacity: 1;
 }
 
-/* Undo toasts float above the document flow, so the Floating shadow vocabulary applies (DESIGN.md #4). */
-.sp-tab-undo-stack {
-  position: fixed;
-  bottom: 16px;
-  left: 50%;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  transform: translateX(-50%);
-  /* Closing many tabs in quick succession shouldn't grow this stack to cover the viewport. */
-  max-height: min(60vh, 320px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
 
-.sp-tab-undo-toast {
-  box-shadow:
-    0 6px 18px rgba(0, 0, 0, 0.3),
-    0 1px 4px rgba(0, 0, 0, 0.15);
-}
 
 /* Keep the user-selected type size flowing through shared UI primitives. */
 .sp-app,