grain-tools 0.10.12 → 0.10.14

package/dist/mcp-app.html

@@ -12717,6 +12717,7 @@ function detectInitialTheme() {
 }
 const useAppStore = create$3((set2, get2) => ({
   theme: detectInitialTheme(),
+  panelTheme: "inherit",
   activeView: "query",
   copyIncludesHeaders: true,
   rowDensity: "normal",
@@ -12811,41 +12812,23 @@ const useAppStore = create$3((set2, get2) => ({
     if (c.fontSize !== void 0) {
       newState.fontSize = c.fontSize !== null && c.fontSize !== void 0 && c.fontSize > 0 ? c.fontSize : null;
     }
-    if (c.maxRowsToDisplay !== void 0) {
-      newState.maxRowsToDisplay = c.maxRowsToDisplay;
-    }
-    if (c.telemetryEnabled !== void 0) {
-      newState.telemetryEnabled = c.telemetryEnabled;
-    }
-    if (c.chartsEnabled !== void 0) {
-      newState.chartsEnabled = c.chartsEnabled;
-    }
-    if (c.chartLayout !== void 0) {
-      newState.chartLayout = c.chartLayout;
-    }
-    if (c.filterResultsByActiveFile !== void 0) {
-      newState.filterResultsByActiveFile = c.filterResultsByActiveFile;
-    }
-    if (c.mcpEnabled !== void 0) {
-      newState.mcpEnabled = c.mcpEnabled;
-    }
-    if (c.mcpEntitled !== void 0) {
-      newState.mcpEntitled = c.mcpEntitled;
-    }
-    if (c.mcpSafeMode !== void 0) {
-      newState.mcpSafeMode = c.mcpSafeMode;
-    }
-    if (c.activeConnectorType !== void 0) {
-      newState.activeConnectorType = c.activeConnectorType;
-    }
-    if (c.activeConnectionId !== void 0) {
-      newState.activeConnectionId = c.activeConnectionId;
-    }
-    if (c.activeConnectionName !== void 0) {
-      newState.activeConnectionName = c.activeConnectionName;
-    }
-    if (c.confirmWriteQueries !== void 0) {
-      newState.confirmWriteQueries = c.confirmWriteQueries;
+    const passthrough = [
+      "maxRowsToDisplay",
+      "telemetryEnabled",
+      "chartsEnabled",
+      "chartLayout",
+      "panelTheme",
+      "filterResultsByActiveFile",
+      "mcpEnabled",
+      "mcpEntitled",
+      "mcpSafeMode",
+      "activeConnectorType",
+      "activeConnectionId",
+      "activeConnectionName",
+      "confirmWriteQueries"
+    ];
+    for (const key of passthrough) {
+      if (c[key] !== void 0) Object.assign(newState, { [key]: c[key] });
     }
     if (c.mcpStatus !== void 0) {
       newState.mcpPort = ((_a3 = c.mcpStatus) == null ? void 0 : _a3.port) ?? null;
@@ -12874,7 +12857,8 @@ const useAppStore = create$3((set2, get2) => ({
     };
     set2((state) => ({
       tabs: [...state.tabs, newTab],
-      activeTabId: activate ? id : state.activeTabId
+      activeTabId: activate ? id : state.activeTabId,
+      guideHub: activate ? null : state.guideHub
     }));
     return id;
   },
@@ -12890,7 +12874,7 @@ const useAppStore = create$3((set2, get2) => ({
       activeTabId: newActiveId
     };
   }),
-  setActiveTab: (id) => set2({ activeTabId: id }),
+  setActiveTab: (id) => set2({ activeTabId: id, guideHub: null }),
   updateTab: (id, updates) => set2((state) => ({
     tabs: state.tabs.map((tab) => {
       if (tab.id !== id) {
@@ -12900,6 +12884,10 @@ const useAppStore = create$3((set2, get2) => ({
       if (updates.isLoading === true && !tab.isLoading) {
         next.loadingStartedAt = Date.now();
         next.cancelled = false;
+        next.notPersisted = false;
+      }
+      if (updates.result) {
+        next.notPersisted = false;
       }
       if (updates.result !== void 0 && updates.chartSpec === void 0) {
         const signature = (r) => r ? r.columns.map((c) => `${c.name}:${c.type}`).join(" ") : "";
@@ -147468,6 +147456,109 @@ function getConnectorGroup(id) {
 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" }) });
 }
+const PATHS = {
+  play: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 3.5v9l7-4.5-7-4.5z" }),
+  stop: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1" }),
+  copy: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.5 3.5v-.5a1 1 0 0 0-1-1H3.5a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h.5" })
+  ] }),
+  download: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 2.5v8M4.5 7L8 10.5 11.5 7M3 13.5h10" }),
+  filter: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2.5 3.5h11L9.25 8.5v4l-2.5 1.25V8.5L2.5 3.5z" }),
+  close: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 4l8 8M12 4l-8 8" }),
+  settings: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 1.75v1.5M8 12.75v1.5M14.25 8h-1.5M3.25 8h-1.5M12.42 3.58l-1.06 1.06M4.64 11.36l-1.06 1.06M12.42 12.42l-1.06-1.06M4.64 4.64L3.58 3.58" })
+  ] }),
+  refresh: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.61-3.89M13.5 2.5v3h-3" }),
+  undo: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.5 3L2.5 6l3 3M2.5 6h7a4 4 0 0 1 0 8H7" }),
+  "arrow-left": /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13 8H3M7 4L3 8l4 4" }),
+  "chevron-down": /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 6l4 4 4-4" }),
+  alert: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 4.75v3.75M8 10.75v.5" })
+  ] }),
+  info: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "6" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 7.25v3.75M8 4.75v.5" })
+  ] }),
+  warning: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 2.25L14.25 13H1.75L8 2.25zM8 6.5v3M8 11.25v.25" }),
+  check: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 8.5l3 3 7-7" }),
+  plus: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 3v10M3 8h10" }),
+  file: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 1.75H4.25a1 1 0 0 0-1 1v10.5a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5.5L9 1.75z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 1.75V5.5h3.75" })
+  ] }),
+  grid: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "2.5", y: "2.5", width: "11", height: "11", rx: "1.5" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2.5 6.5h11M2.5 10h11M6.5 6.5v7" })
+  ] }),
+  chart: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2.5 13.5h11M4.5 11V8M8 11V4M11.5 11V6.5" }),
+  more: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "3.5", cy: "8", r: "0.75" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "0.75" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12.5", cy: "8", r: "0.75" })
+  ] })
+};
+function Icon({ name, size = 14, className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: className ? `sp-icon ${className}` : "sp-icon",
+      width: size,
+      height: size,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.4,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: PATHS[name]
+    }
+  );
+}
+const VARIANT_CLASS = {
+  primary: "sp-btn sp-btn-primary",
+  secondary: "sp-btn",
+  ghost: "sp-btn sp-btn-ghost",
+  danger: "sp-btn sp-btn-danger"
+};
+const Button = reactExports.forwardRef(function Button2({ variant = "secondary", icon, children, className, type = "button", ...rest }, ref) {
+  const classes = className ? `${VARIANT_CLASS[variant]} ${className}` : VARIANT_CLASS[variant];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { ref, type, className: classes, ...rest, children: [
+    icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: icon, size: 14 }),
+    children
+  ] });
+});
+reactExports.forwardRef(function IconButton2({ icon, label, active, className, type = "button", title, ...rest }, ref) {
+  const classes = ["sp-icon-btn", active ? "active" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      "aria-label": label,
+      title: title ?? label,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: icon, size: 14 })
+    }
+  );
+});
+function PageHeader({ title, backLabel, onBack, meta, actions: actions2 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "sp-page-header", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "sp-page-back", onClick: onBack, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "arrow-left", size: 14 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: backLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-page-header-sep", "aria-hidden": "true", children: "/" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "sp-page-title", children: title }),
+    meta && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-page-meta", children: meta }),
+    actions2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-page-actions", children: actions2 })
+  ] });
+}
 const OPTIONAL_DRIVERS = [
   {
     connectorType: "snowflake",
@@ -147667,7 +147758,7 @@ function schemaForConnectionMode(schema, connectorId, mode) {
     }
   };
 }
-const ConnectionsManager = ({ initialAdd = false }) => {
+const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
   const { callServerTool, isReady, mode, sendMessage, onMessage } = useHostContext();
   const supportsActiveConnection = mode === "vscode";
   const trackUi = useTrackUi();
@@ -147695,6 +147786,7 @@ const ConnectionsManager = ({ initialAdd = false }) => {
   const [isPopoverOpen, setIsPopoverOpen] = reactExports.useState(false);
   const switcherWrapRef = reactExports.useRef(null);
   const isFormVisible = isFormOpen || !!selectedConnectionId;
+  reactExports.useEffect(() => onSubpageChange == null ? void 0 : onSubpageChange(isFormVisible), [isFormVisible, onSubpageChange]);
   reactExports.useEffect(() => {
     if (isFormVisible) {
       trackUi("ui_state_shown", { state: "connection_form" });
@@ -147736,7 +147828,6 @@ const ConnectionsManager = ({ initialAdd = false }) => {
       }
       setConnectionsUnreachable(false);
     } catch (e2) {
-      console.error("Failed to fetch data:", e2);
       setConnectionsUnreachable(true);
     } finally {
       setIsLoading(false);
@@ -147746,7 +147837,16 @@ const ConnectionsManager = ({ initialAdd = false }) => {
     fetchData();
   }, [fetchData]);
   reactExports.useEffect(() => {
-    if (!onMessage) return;
+    if (!connectionsUnreachable) {
+      return;
+    }
+    const timer = setInterval(() => void fetchData(), 5e3);
+    return () => clearInterval(timer);
+  }, [connectionsUnreachable, fetchData]);
+  reactExports.useEffect(() => {
+    if (!onMessage) {
+      return;
+    }
     return onMessage((msg) => {
       if ((msg == null ? void 0 : msg.type) === "connectionsImported" || (msg == null ? void 0 : msg.type) === "updateConfig") {
         void fetchData();
@@ -147919,7 +148019,9 @@ const ConnectionsManager = ({ initialAdd = false }) => {
     }
   };
   const handleDeleteConnection = (id, name) => {
-    if (!isReady) return;
+    if (!isReady) {
+      return;
+    }
     setPendingConfirm({
       title: "Delete connection",
       message: `Delete connection '${name}'? This can't be undone.`,
@@ -148030,6 +148132,23 @@ const ConnectionsManager = ({ initialAdd = false }) => {
     setSelectedType("");
     setToast(null);
   }, []);
+  reactExports.useEffect(() => {
+    if (!isFormVisible) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || pendingConfirm) {
+        return;
+      }
+      const target = event.target;
+      if (target instanceof Element && target.closest("input, select, textarea")) {
+        return;
+      }
+      closeForm();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isFormVisible, pendingConfirm, closeForm]);
   reactExports.useEffect(() => {
     function handleClickOutside(event) {
       if (isPopoverOpen && switcherWrapRef.current && !switcherWrapRef.current.contains(event.target)) {
@@ -148048,7 +148167,9 @@ const ConnectionsManager = ({ initialAdd = false }) => {
   );
   const emptyFormInitialData = reactExports.useMemo(() => ({}), []);
   const renderToast = () => {
-    if (!toast) return null;
+    if (!toast) {
+      return null;
+    }
     const advice = toast.advice;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -148152,71 +148273,62 @@ const ConnectionsManager = ({ initialAdd = false }) => {
     }
     return null;
   };
-  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("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" }),
-      ["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);
-                    trackUi("first_value_step", {
-                      step: "connector_selected",
-                      outcome: "success"
-                    });
-                  },
-                  "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 })
-                  ]
+  const renderConnectionForm = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-detail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
+    renderToast(),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-section", children: "Database Type" }),
+    ["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);
+                  trackUi("first_value_step", {
+                    step: "connector_selected",
+                    outcome: "success"
+                  });
                 },
-                c.id
-              ))
-            }
-          )
-        ] }, group);
-      }),
-      activeSchemaDef && activeFormSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        DynamicForm,
-        {
-          schema: { ...activeFormSchema, type: "object" },
-          initialData: emptyFormInitialData,
-          onSubmit: (formData) => handleSaveConnection(formData),
-          onTest: (formData) => handleTestFormData(formData),
-          onCancel: closeForm,
-          isSubmitting: isLoading
-        }
-      ) : selectedType ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-hint", style: { color: "var(--sp-error)" }, children: "This connector does not define a configuration schema." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-empty sp-conn-empty-compact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-empty-text", children: "Choose a database type to begin." }) })
-    ] })
-  ] });
+                "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,
+      {
+        schema: { ...activeFormSchema, type: "object" },
+        initialData: emptyFormInitialData,
+        onSubmit: (formData) => handleSaveConnection(formData),
+        onTest: (formData) => handleTestFormData(formData),
+        onCancel: closeForm,
+        isSubmitting: isLoading
+      }
+    ) : selectedType ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-hint sp-conn-schema-error", children: "This connector does not define a configuration schema." }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-empty sp-conn-empty-compact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-empty-text", children: "Choose a database type to begin." }) })
+  ] }) });
   const renderConnectionDetails = () => {
     if (!selectedConnection) {
       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;
     const schemaDef = connectors.find((c) => c.id === selectedConnection.type);
     const canManagePassword = supportsActiveConnection && schemaHasPasswordField(schemaDef == null ? void 0 : schemaDef.schema);
     const editSchema = (schemaDef == null ? void 0 : schemaDef.schema) && canManagePassword ? schemaWithoutPasswordField(schemaDef.schema) : schemaDef == null ? void 0 : schemaDef.schema;
@@ -148260,78 +148372,22 @@ const ConnectionsManager = ({ initialAdd = false }) => {
         ] })
       ] });
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-detail", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-detail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
+      renderToast(),
+      modeAwareEditSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DynamicForm,
         {
-          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" }),
-                selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-built-in-label", children: "Built-in" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
-              {
-                className: "sp-conn-detail-actions",
-                style: { display: "flex", gap: "8px", flexWrap: "wrap" },
-                children: [
-                  supportsActiveConnection && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      className: `sp-btn${isActive ? " sp-btn-primary" : ""}`,
-                      onClick: () => handleSetActiveConnection(selectedConnection),
-                      disabled: isActive || status === "testing",
-                      "aria-label": `Set ${selectedConnection.name} as the active connection for queries`,
-                      children: isActive ? "Active" : "Set active"
-                    }
-                  ),
-                  !selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      className: "sp-btn sp-btn-ghost-danger",
-                      onClick: () => handleDeleteConnection(selectedConnection.id, selectedConnection.name),
-                      "aria-label": `Delete connection ${selectedConnection.name}`,
-                      children: "Delete"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
-        renderToast(),
-        modeAwareEditSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DynamicForm,
-          {
-            schema: { ...modeAwareEditSchema, type: "object" },
-            initialData: selectedFormInitialData,
-            onSubmit: (formData) => handleSaveConnection(formData, selectedConnection),
-            onTest: (formData) => handleTestFormData(formData, selectedConnection),
-            isSubmitting: isLoading,
-            renderAfterField: renderPasswordManagementField,
-            actionStatus: renderConnectionStatusMessage(selectedConnection),
-            submitFeedback: lastSavedConnectionId === selectedConnection.id ? "Saved successfully" : void 0
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-hint", style: { color: "var(--sp-error)" }, children: "This connector does not define a configuration schema." })
-      ] })
-    ] });
+          schema: { ...modeAwareEditSchema, type: "object" },
+          initialData: selectedFormInitialData,
+          onSubmit: (formData) => handleSaveConnection(formData, selectedConnection),
+          onTest: (formData) => handleTestFormData(formData, selectedConnection),
+          isSubmitting: isLoading,
+          renderAfterField: renderPasswordManagementField,
+          actionStatus: renderConnectionStatusMessage(selectedConnection),
+          submitFeedback: lastSavedConnectionId === selectedConnection.id ? "Saved successfully" : void 0
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-hint sp-conn-schema-error", children: "This connector does not define a configuration schema." })
+    ] }) });
   };
   const renderGrid = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-grid-view", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-head", style: { marginBottom: 16 }, children: [
@@ -148397,7 +148453,11 @@ const ConnectionsManager = ({ initialAdd = false }) => {
           gap: "12px"
         },
         children: connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-empty", style: { gridColumn: "1 / -1" }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: connectionsUnreachable ? "Can't reach the Grain engine right now. Your connections are saved on disk and will reappear once it reconnects." : "No connections configured." }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: connectionsUnreachable ? "Can't reach Grain. Start Grain and try again." : "No connections configured." }),
+          connectionsUnreachable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { marginTop: 12, display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: fetchData, children: "Retry" }),
+            mode === "vscode" && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: () => sendMessage == null ? void 0 : sendMessage("startGrain"), children: "Start Grain" })
+          ] }),
           mode === "vscode" && !connectionsUnreachable && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -148487,30 +148547,45 @@ const ConnectionsManager = ({ initialAdd = false }) => {
       }
     )
   ] });
-  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: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: isFormVisible ? "sp-conn-subpage" : "sp-conn-page", children: [
+    isFormVisible ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
+        PageHeader,
         {
-          className: "sp-btn",
-          onClick: closeForm,
-          style: { marginBottom: 12, alignSelf: "flex-start" },
-          children: "← Back to connections"
+          backLabel: "Connections",
+          onBack: closeForm,
+          title: isFormOpen ? "New connection" : (selectedConnection == null ? void 0 : selectedConnection.name) ?? "Connection",
+          meta: selectedConnection && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-type-badge", children: selectedConnection.type }),
+            supportsActiveConnection && activeConnectionId === selectedConnection.id && /* @__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" })
+          ] }),
+          actions: isFormOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", onClick: closeForm, "aria-label": "Cancel", children: "Cancel" }) : selectedConnection && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            supportsActiveConnection && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                onClick: () => handleSetActiveConnection(selectedConnection),
+                disabled: activeConnectionId === selectedConnection.id || statuses[selectedConnection.id] === "testing",
+                "aria-label": `Set ${selectedConnection.name} as the active connection for queries`,
+                children: activeConnectionId === selectedConnection.id ? "Active" : "Set active"
+              }
+            ),
+            !selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: "sp-btn-ghost-danger",
+                onClick: () => handleDeleteConnection(selectedConnection.id, selectedConnection.name),
+                "aria-label": `Delete connection ${selectedConnection.name}`,
+                children: "Delete"
+              }
+            )
+          ] })
         }
       ),
-      /* @__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("div", { className: "sp-conn-subpage-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("section", { "aria-label": "Connection details", className: "sp-conn-subpage-column", children: isFormOpen ? renderConnectionForm() : renderConnectionDetails() }) })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn", children: renderGrid() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConfirmDialog,
       {
@@ -148961,7 +149036,7 @@ function App() {
     var _a3, _b3;
     if (!isReady || !activeTab) return;
     const tabId = activeTab.id;
-    updateTab(tabId, { isLoading: true, error: null });
+    updateTab(tabId, { isLoading: true, error: null, cancelled: false, errorDetails: null });
     try {
       const callResult = await callServerTool("run_query", { sql, session: "mcp-app-manual" });
       if (callResult.isError) {
@@ -149105,7 +149180,10 @@ function App() {
             data: result,
             domLayout: "autoHeight"
           }
-        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-empty", children: "No results yet." }) })
+        ) }) : activeTab.cancelled ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-cancelled-bar sp-empty", children: [
+          "Query cancelled",
+          activeTab.errorDetails ? `: ${activeTab.errorDetails}` : ""
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-empty", children: "No results yet." }) })
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectionsManager, { theme: theme2 })
     ] })
   ] });
@@ -171811,7 +171889,7 @@ body.light-theme .ag-theme-quartz {
   --sp-warning: var(--vscode-charts-yellow, #ca8a04);
 
   --sp-font: var(
-    --vscode-editor-font-family,
+    --vscode-font-family,
     -apple-system,
     BlinkMacSystemFont,
     'Segoe UI',
@@ -172096,75 +172174,55 @@ body {
   gap: 6px;
 }
 
-.sp-active-file-indicator {
+.sp-chip {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
   max-width: 220px;
-  margin-right: 8px;
-  padding: 2px 6px;
-  border: 1px solid transparent;
-  border-radius: var(--sp-radius);
-  background: var(--sp-badge-bg);
-  color: var(--sp-badge-fg);
+  height: 22px;
+  padding: 0 8px;
+  border: 1px dashed var(--sp-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--sp-muted-fg);
   font: inherit;
   font-size: 11px;
   cursor: pointer;
-  opacity: 0.9;
+  transition:
+    color 0.1s,
+    background 0.1s,
+    border-color 0.1s;
 }
-
-.sp-active-file-indicator:hover {
-  opacity: 1;
-  border-color: var(--sp-focus-border);
+.sp-chip:hover {
+  color: var(--sp-fg);
+  border-color: var(--sp-muted-fg);
 }
-
-.sp-active-file-icon {
-  flex-shrink: 0;
+.sp-chip.on {
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--sp-focus-border) 55%, transparent);
+  background: color-mix(in srgb, var(--sp-focus-border) 14%, transparent);
+  color: var(--sp-fg);
 }
-
-.sp-active-file-name {
+.sp-chip.on .sp-icon {
+  color: var(--sp-focus-border);
+}
+.sp-chip:focus-visible {
+  outline: 1px solid var(--sp-focus-border);
+  outline-offset: 1px;
+}
+.sp-chip-label {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.sp-active-file-state {
-  color: var(--sp-muted-fg);
-  flex-shrink: 0;
-}
-
-/* Sibling of the file chip: states whether the tab list is narrowed to that file,
-   and switches it. Quiet by default so it reads as status until hovered. */
-.sp-active-file-toggle {
-  flex-shrink: 0;
-  margin-right: 8px;
-  padding: 2px 6px;
-  border: 1px solid transparent;
-  border-radius: var(--sp-radius);
-  background: var(--sp-badge-bg);
-  color: var(--sp-muted-fg);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-  opacity: 0.9;
-}
-
-.sp-active-file-toggle.on {
-  color: var(--sp-badge-fg);
-}
-
-.sp-active-file-toggle:hover {
-  opacity: 1;
-  border-color: var(--sp-focus-border);
-}
-
 .sp-tab {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 10px;
-  height: 35px;
+  gap: 6px;
+  padding: 0 10px 0 12px;
+  height: 30px;
   cursor: pointer;
   white-space: nowrap;
   border-bottom: 2px solid transparent;
@@ -172335,8 +172393,8 @@ body {
   padding: 0 10px;
   border-bottom: 1px solid var(--sp-border);
   flex-shrink: 0;
-  height: 36px;
-  background: var(--sp-header-bg);
+  height: 32px;
+  background: var(--sp-bg);
   gap: 8px;
 }
 
@@ -172379,36 +172437,62 @@ body {
 .sp-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  font-size: 11px;
+  justify-content: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 500;
   font-family: var(--sp-font);
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--sp-radius);
   background: var(--sp-btn-sec-bg);
   color: var(--sp-btn-sec-fg);
   white-space: nowrap;
-  transition: background 0.1s;
-  line-height: 1.4;
+  transition:
+    background 0.1s,
+    color 0.1s,
+    border-color 0.1s;
+  line-height: 1;
 }
 .sp-btn:hover:not(:disabled) {
   background: var(--sp-btn-sec-hover);
 }
+.sp-btn:focus-visible {
+  outline: 1px solid var(--sp-focus-border);
+  outline-offset: 1px;
+}
 .sp-btn:disabled {
   opacity: 0.4;
   cursor: default;
 }
+.sp-btn .sp-icon {
+  flex-shrink: 0;
+}
 
 .sp-btn-primary {
   background: var(--sp-btn-bg);
   color: var(--sp-btn-fg);
-  font-weight: 500;
 }
 .sp-btn-primary:hover:not(:disabled) {
   background: var(--sp-btn-hover);
 }
 
+.sp-btn-ghost {
+  background: transparent;
+  color: var(--sp-fg);
+}
+.sp-btn-ghost .sp-icon {
+  color: var(--sp-muted-fg);
+}
+.sp-btn-ghost:hover:not(:disabled) {
+  background: var(--sp-hover-bg);
+}
+.sp-btn-ghost:hover:not(:disabled) .sp-icon {
+  color: var(--sp-fg);
+}
+
 .sp-btn-danger {
   background: var(--sp-btn-danger-bg);
   color: var(--sp-btn-danger-fg);
@@ -172478,14 +172562,14 @@ body {
 .sp-icon-btn:hover {
   color: var(--sp-fg);
   background: var(--sp-hover-bg);
-  border-color: var(--sp-border);
+}
+.sp-icon-btn:focus-visible {
+  outline: 1px solid var(--sp-focus-border);
+  outline-offset: -1px;
 }
 .sp-icon-btn.active {
-  color: var(--sp-btn-bg);
+  color: var(--sp-fg);
   background: var(--sp-hover-bg);
-  border-color: transparent !important;
-  outline: none !important;
-  box-shadow: none !important;
 }
 
 /* ── Grid container ────────────────────────────────────────── */
@@ -172502,19 +172586,22 @@ body {
 .sp-loading {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   height: 100%;
-  gap: 12px;
   color: var(--sp-muted-fg);
   font-size: 13px;
 }
+.sp-loading .sp-empty-state {
+  flex: 1;
+  height: auto;
+}
 .sp-loading p {
   margin: 0;
 }
 /* Live elapsed readout; tabular digits so the count-up doesn't jitter horizontally. */
 .sp-loading-elapsed {
   margin-left: 6px;
+  color: var(--sp-muted-fg);
+  font-weight: 400;
   font-variant-numeric: tabular-nums;
 }
 
@@ -172832,9 +172919,40 @@ body {
   --ag-row-height: 28px;
   --ag-header-height: 32px;
   --ag-icon-size: 14px;
-  --ag-header-column-separator-display: block;
-  --ag-header-column-separator-height: 100%;
-  --ag-header-column-separator-width: 1px;
+  --ag-header-column-separator-display: none;
+  --ag-header-column-resize-handle-display: block;
+  --ag-header-column-resize-handle-width: 1px;
+  --ag-header-column-resize-handle-height: 40%;
+  --ag-header-column-resize-handle-color: var(--sp-border);
+  --ag-wrapper-border-radius: 0;
+  --ag-borders: none;
+  --ag-row-border-color: color-mix(in srgb, var(--sp-border) 60%, transparent);
+}
+
+.sp-ag-grid .ag-header-cell-resize:hover::after {
+  height: 100%;
+  top: 0;
+  background-color: var(--sp-focus-border);
+}
+
+.sp-ag-grid .ag-header-cell-text {
+  font-weight: 600;
+}
+
+.sp-ag-grid .ag-header-cell .ag-header-cell-filter-button,
+.sp-ag-grid .ag-header-cell .ag-sort-indicator-icon {
+  color: var(--sp-muted-fg);
+}
+
+.sp-ag-grid .ag-header-cell .ag-header-cell-filter-button {
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.sp-ag-grid .ag-header-cell:hover .ag-header-cell-filter-button,
+.sp-ag-grid .ag-header-cell:focus-within .ag-header-cell-filter-button,
+.sp-ag-grid .ag-header-cell-filtered .ag-header-cell-filter-button {
+  opacity: 1;
 }
 
 .sp-ag-grid .ag-header-cell-filtered {
@@ -174980,6 +175098,322 @@ body.vscode-high-contrast .ag-theme-quartz {
   .sp-conn-status-testing {
     opacity: 0.7;
   }
+}
+
+/* ── Primitives: notice ────────────────────────────────────── */
+.sp-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 8px 6px 12px;
+  border-bottom: 1px solid var(--sp-border);
+  background: var(--sp-header-bg);
+  color: var(--sp-fg);
+  font-size: 12px;
+  line-height: 1.45;
+  flex-shrink: 0;
+}
+.sp-notice-icon {
+  display: inline-flex;
+  padding-top: 2px;
+  color: var(--sp-muted-fg);
+  flex-shrink: 0;
+}
+.sp-notice-error .sp-notice-icon {
+  color: var(--sp-error);
+}
+.sp-notice-warning .sp-notice-icon {
+  color: var(--sp-warning);
+}
+.sp-notice-info .sp-notice-icon {
+  color: var(--sp-focus-border);
+}
+.sp-notice-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding-top: 1px;
+}
+.sp-notice-title {
+  overflow-wrap: anywhere;
+}
+.sp-notice-detail {
+  color: var(--sp-muted-fg);
+  overflow-wrap: anywhere;
+}
+.sp-notice-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.sp-notice-dismiss {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+/* ── Primitives: empty state ───────────────────────────────── */
+.sp-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 100%;
+  padding: 24px;
+  color: var(--sp-muted-fg);
+  font-size: 12px;
+  text-align: center;
+}
+.sp-empty-state-icon {
+  display: inline-flex;
+  margin-bottom: 2px;
+  color: var(--sp-muted-fg);
+}
+.sp-empty-state-error .sp-empty-state-icon {
+  color: var(--sp-error);
+}
+.sp-empty-state-title {
+  color: var(--sp-fg);
+  font-size: 13px;
+  font-weight: 600;
+}
+.sp-empty-state-detail {
+  max-width: 60ch;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.sp-empty-state-detail code,
+.sp-empty-state-message {
+  display: block;
+  max-height: 40vh;
+  overflow: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  background: var(--sp-header-bg);
+  color: var(--sp-fg);
+  font-family: var(--sp-font-mono, var(--vscode-editor-font-family, monospace));
+  font-size: calc(var(--sp-font-size) - 1px);
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+}
+.sp-empty-state-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+.sp-empty-state-meta {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Primitives: progress ──────────────────────────────────── */
+@keyframes sp-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+.sp-progress {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.sp-progress-bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 25%;
+  background: var(--sp-focus-border);
+  animation: sp-progress-slide 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+@keyframes sp-busy-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.sp-busy-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+}
+.sp-busy-dot > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sp-focus-border);
+  animation: sp-busy-pulse 1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sp-progress-bar {
+    width: 100%;
+    animation: none;
+    opacity: 0.6;
+  }
+  .sp-busy-dot > span {
+    animation: none;
+  }
+}
+
+/* ── Primitives: page header ───────────────────────────────── */
+.sp-page-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 35px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--sp-border);
+  background: var(--sp-header-bg);
+  flex-shrink: 0;
+}
+.sp-page-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 6px;
+  border: none;
+  border-radius: var(--sp-radius);
+  background: transparent;
+  color: var(--sp-muted-fg);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.sp-page-back:hover {
+  color: var(--sp-fg);
+  background: var(--sp-hover-bg);
+}
+.sp-page-back:focus-visible {
+  outline: 1px solid var(--sp-focus-border);
+  outline-offset: -1px;
+}
+.sp-page-header-sep {
+  color: var(--sp-border);
+}
+.sp-page-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sp-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sp-page-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.sp-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+/* ── Result toolbar ────────────────────────────────────────── */
+.sp-toolbar-sep {
+  width: 1px;
+  height: 14px;
+  margin: 0 4px;
+  background: var(--sp-border);
+  flex-shrink: 0;
+}
+
+/* ── Primitives: segmented control ─────────────────────────── */
+.sp-segmented {
+  display: inline-flex;
+  padding: 2px;
+  gap: 2px;
+  border: 1px solid var(--sp-border);
+  border-radius: calc(var(--sp-radius) + 2px);
+  background: var(--sp-bg);
+  flex-shrink: 0;
+}
+.sp-segmented-item {
+  height: 22px;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--sp-radius);
+  background: transparent;
+  color: var(--sp-muted-fg);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.1s,
+    color 0.1s;
+}
+.sp-segmented-item:hover {
+  color: var(--sp-fg);
+}
+.sp-segmented-item.active {
+  background: var(--sp-header-bg);
+  color: var(--sp-fg);
+  font-weight: 600;
+  box-shadow: inset 0 0 0 1px var(--sp-border);
+}
+.sp-segmented-item:focus-visible {
+  outline: 1px solid var(--sp-focus-border);
+  outline-offset: -1px;
+}
+/* ── Connection subpage ── */
+.sp-settings-page-body.sp-settings-page-body-subpage {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sp-settings-conn-panel-subpage,
+.sp-conn-subpage {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.sp-conn-subpage {
+  width: 100%;
+}
+
+.sp-conn-subpage-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px 32px 32px;
+}
+
+.sp-conn-subpage-column {
+  display: block;
+  max-width: 720px;
+  margin-inline: auto;
+}
+
+.sp-conn-subpage .sp-conn-detail-body {
+  padding: 0;
+}
+
+.sp-conn-schema-error {
+  color: var(--sp-error);
 }</style>
 </head>