grain-tools 0.10.15 → 0.10.17

package/dist/web-app.html

@@ -12820,7 +12820,7 @@ const useAppStore = create$3((set2, get2) => ({
   chartsEnabled: false,
   mcpEnabled: false,
   mcpEntitled: false,
-  grainServiceInstalled: true,
+  grainServiceSetup: "registered",
   mcpSafeMode: true,
   activeConnectorType: null,
   activeConnectionId: null,
@@ -12910,7 +12910,7 @@ const useAppStore = create$3((set2, get2) => ({
       "filterResultsByActiveFile",
       "mcpEnabled",
       "mcpEntitled",
-      "grainServiceInstalled",
+      "grainServiceSetup",
       "mcpSafeMode",
       "activeConnectorType",
       "activeConnectionId",
@@ -13073,6 +13073,7 @@ const ALL_TOOLS = [
   "list_connections",
   "get_demo_dataset",
   "save_connection",
+  "create_connection_draft",
   "request_connection_credentials",
   "test_connection",
   "delete_connection",
@@ -13170,6 +13171,7 @@ const TELEMETRY_CONNECTORS = [
 ];
 const TELEMETRY_TOOL_NAMES = [...ALL_TOOLS, "unknown"];
 const TELEMETRY_COMMAND_IDS = [
+  "grain.setUpService",
   "grain.showDaemonInfo",
   "grain.mcp.restart",
   "grain.mcp.testConnection",
@@ -13510,6 +13512,8 @@ const TELEMETRY_ERROR_IDS = [
    * Not a database error: nothing was ever sent to a connector.
    */
   "credential_required",
+  "setup_required",
+  "connection_draft_rejected",
   /**
    * The session holding this query's tab was evicted (SessionManager's maxSessions
    * cap) while the query was still running, so the result had nowhere to land.
@@ -13774,7 +13778,18 @@ async function buildGuideHubState() {
     return { ...DEFAULT_GUIDE_HUB_STATE, telemetryEnabled };
   }
 }
-const WEB_SESSION_ID = `web-${crypto.randomUUID()}`;
+const WEB_SESSION_KEY = "grain:web-session-id";
+function resolveWebSessionId() {
+  const stored = readStoredValue(WEB_SESSION_KEY);
+  if (stored && /^web-[0-9a-f-]{36}$/.test(stored)) {
+    return stored;
+  }
+  return `web-${crypto.randomUUID()}`;
+}
+const WEB_SESSION_ID = resolveWebSessionId();
+function rememberWebSessionId() {
+  writeStoredValue(WEB_SESSION_KEY, WEB_SESSION_ID);
+}
 function resolveProjectedTarget(tabId, payload) {
   const parsed = tabId ? parseProjectedTabId(tabId) : void 0;
   const tab = tabId ? useAppStore.getState().tabs.find((t) => t.id === tabId) : void 0;
@@ -14030,6 +14045,8 @@ function useWebTabSync(options) {
         remoteId: tab.id,
         sessionDisplayName: session.displayName,
         clientType: session.clientType,
+        connectionId: tab.connectionId,
+        connectionName: tab.connectionName,
         isRemote: true,
         preserveFocus
       });
@@ -14047,6 +14064,8 @@ function useWebTabSync(options) {
         remoteId: tab.id,
         sessionDisplayName: session.displayName,
         clientType: session.clientType,
+        connectionId: tab.connectionId,
+        connectionName: tab.connectionName,
         isRemote: true,
         preserveFocus
       });
@@ -14067,6 +14086,8 @@ function useWebTabSync(options) {
         remoteId: tab.id,
         sessionDisplayName: session.displayName,
         clientType: session.clientType,
+        connectionId: detail.connectionId ?? tab.connectionId,
+        connectionName: detail.connectionName ?? tab.connectionName,
         isRemote: true
       };
       if (tab.status === "success") {
@@ -14143,7 +14164,7 @@ function useWebTabSync(options) {
                 dispatchLoading(session, tab, true);
               }
             } else if (tab.status === "success" || tab.status === "error" || !cached || cached.status !== tab.status) {
-              const detailIsNeeded = tab.status === "success" && (!cached || !storeHasTab || cached.status !== tab.status || cached.rowCount !== tab.rowCount);
+              const detailIsNeeded = tab.status === "success" && (!cached || !storeHasTab || cached.status !== tab.status || cached.rowCount !== tab.rowCount || cached.connectionId !== tab.connectionId);
               const errorIsNeeded = tab.status === "error" && (!cached || !storeHasTab || cached.status !== "error");
               if (detailIsNeeded || errorIsNeeded) {
                 await dispatchTabDetail(session, tab);
@@ -14154,7 +14175,8 @@ function useWebTabSync(options) {
               remoteTabId: tab.id,
               status: tab.status,
               rowCount: tab.rowCount,
-              title: tab.title
+              title: tab.title,
+              connectionId: tab.connectionId
             });
           }
         })
@@ -14166,6 +14188,7 @@ function useWebTabSync(options) {
         }
       }
       unreachableStreakRef.current = 0;
+      rememberWebSessionId();
       setDaemonStatus("connected");
       setIsReady(true);
     } catch (err) {
@@ -14214,7 +14237,8 @@ function useWebToolProxy() {
         query: args.sql,
         sessionId,
         connectionId: args.connectionId,
-        tabId: args.tabId
+        tabId: args.tabId,
+        title: args.title
       });
       if (!ok) {
         throw new Error(data.error || "Query failed");
@@ -14330,29 +14354,29 @@ function ReauthorizeNotice({
   const [copied, setCopied] = reactExports.useState(false);
   const copyCommand = async () => {
     try {
-      await navigator.clipboard.writeText("grain open");
+      await navigator.clipboard.writeText("grain ui");
       setCopied(true);
     } catch {
       setCopied(false);
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-reauth", role: "alert", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-reauth-title", children: "Grain is running. Reconnect this browser tab." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-reauth-title", children: reason === "unreachable" ? "This tab lost its connection to Grain." : "Grain is running. Reconnect this browser tab." }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Run this command in your terminal to open your workspace again:" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-reauth-action", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sp-web-reauth-command", children: "grain open" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sp-web-reauth-command", children: "grain ui" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           type: "button",
           className: "sp-web-secondary-button",
           onClick: () => void copyCommand(),
-          "aria-label": "Copy grain open",
+          "aria-label": "Copy grain ui",
           children: copied ? "Copied" : "Copy"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-reauth-detail", children: reason === "expired-link" ? "This link has expired or was already used." : reason === "unreachable" ? "Grain may have restarted since this tab opened." : "This tab needs a fresh workspace link." })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-reauth-detail", children: reason === "expired-link" ? "This link has expired or was already used." : reason === "unreachable" ? "Grain may have stopped, or restarted on a different port. If it stopped, start it again first." : "This tab needs a fresh workspace link." })
   ] });
 }
 function isUpdateMarkerStatus(value) {
@@ -14472,7 +14496,10 @@ function fieldVisible(field, values) {
 function ConnectionSetupPage({
   onDone,
   onCancel,
-  initialConnection
+  initialConnection,
+  actions: actions2,
+  mode = "full",
+  canEditDetails = false
 }) {
   const { callServerTool, isReady } = useHostContext();
   const [connectors, setConnectors] = reactExports.useState([]);
@@ -14489,20 +14516,20 @@ function ConnectionSetupPage({
       initialConnection?.["id"] ?? `conn_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
     )
   );
+  const [displayMode, setDisplayMode] = reactExports.useState(mode);
   reactExports.useEffect(() => {
-    if (!isReady) {
+    if (!actions2 && !isReady) {
       return;
     }
     let active = true;
-    void callServerTool("list_connectors", {}).then((result) => {
+    void (actions2 ? actions2.listConnectors() : callServerTool("list_connectors", {}).then((result) => {
+      if (result.isError) throw new Error(toolMessage(result));
+      return JSON.parse(toolMessage(result));
+    })).then((result) => {
       if (!active) {
         return;
       }
-      if (result.isError) {
-        throw new Error(toolMessage(result));
-      }
-      const text = toolMessage(result);
-      const listed = JSON.parse(text);
+      const listed = result;
       if (!Array.isArray(listed)) {
         throw new Error("Connector list is unavailable.");
       }
@@ -14524,7 +14551,7 @@ function ConnectionSetupPage({
     return () => {
       active = false;
     };
-  }, [callServerTool, isReady, initialConnection]);
+  }, [callServerTool, isReady, initialConnection, actions2]);
   const selected = connectors.find((connector) => connector.id === type);
   const properties = selected?.schema?.properties ?? {};
   const entries = Object.entries(properties).filter(([key, field]) => {
@@ -14549,6 +14576,11 @@ function ConnectionSetupPage({
     ...Object.fromEntries(entries.map(([key, field]) => [key, values[key] ?? field.default]))
   });
   const test = async () => {
+    if (actions2) {
+      await actions2.test(profile(), password || void 0);
+      setTested(true);
+      return true;
+    }
     const result = await callServerTool(
       "test_connection",
       initialConnection && !password ? { connectionId: draftId } : { type, connectionProfile: { ...profile(), ...password ? { password } : {} } }
@@ -14573,6 +14605,12 @@ function ConnectionSetupPage({
         return;
       }
       const id = draftId;
+      if (actions2) {
+        await actions2.save(profile(), password || void 0);
+        setPassword("");
+        onDone(id);
+        return;
+      }
       const saved = await callServerTool("save_connection", {
         connectionProfile: { ...profile(), id }
       });
@@ -14649,15 +14687,18 @@ function ConnectionSetupPage({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "grain-connection-page", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-content", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-intro", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: initialConnection ? "Edit connection" : "Connect a database" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Add a connection to start querying your data." })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: actions2 ? "Finish connection setup" : initialConnection ? "Edit connection" : "Connect a database" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: actions2 ? "Test and save this connection to continue." : "Add a connection to start querying your data." })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-error", role: "alert", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Connection failed" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: error })
       ] }),
-      tested && !error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "grain-connection-success", role: "status", children: "Connection test successful." }),
+      tested && !error && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "grain-connection-success", role: "status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: "✓ " }),
+        "Connection test successful."
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-grid", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-field", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "grain-connection-type", children: "Database type" }),
@@ -14668,7 +14709,7 @@ function ConnectionSetupPage({
               value: type,
               onChange: (event) => selectType(event.target.value),
               required: true,
-              disabled: !isReady || busy !== null,
+              disabled: (actions2 ? true : !isReady) || busy !== null,
               children: [
                 !type && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Choose a database" }),
                 connectors.map((connector) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: connector.id, children: connector.displayName }, connector.id))
@@ -14685,20 +14726,36 @@ function ConnectionSetupPage({
               value: name,
               onChange: (event) => setName(event.target.value),
               placeholder: "e.g. Analytics",
-              required: true
+              required: true,
+              readOnly: Boolean(actions2)
             }
           )
         ] })
       ] }),
+      displayMode === "password" && canEditDetails && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "grain-connection-secondary grain-connection-edit",
+          onClick: () => setDisplayMode("full"),
+          children: "Edit details"
+        }
+      ),
       selected && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "grain-connection-section", children: [
+        displayMode === "full" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "grain-connection-section", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Connection details" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grain-connection-grid", children: entries.filter(([, field]) => !field.ui?.advanced).map(renderField) })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "grain-connection-section", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Connection details" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("dl", { className: "grain-connection-readonly", children: entries.map(([key, field]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { children: field.title ?? key }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { children: String(values[key] ?? field.default ?? "") })
+          ] }, key)) })
         ] }),
-        passwordField && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "grain-connection-section", children: [
+        (passwordField || actions2 && displayMode === "password") && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "grain-connection-section", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Authentication" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grain-connection-grid", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-field", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "grain-connection-password", children: passwordField.title ?? "Password" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "grain-connection-password", children: passwordField?.title ?? "Password" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-password", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "input",
@@ -14723,13 +14780,16 @@ function ConnectionSetupPage({
             /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Stored on this computer after connecting." })
           ] }) })
         ] }),
-        entries.some(([, field]) => field.ui?.advanced) && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "grain-connection-advanced", children: [
+        displayMode === "full" && entries.some(([, field]) => field.ui?.advanced) && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "grain-connection-advanced", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { children: "Advanced settings" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grain-connection-grid", children: entries.filter(([, field]) => field.ui?.advanced).map(renderField) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-footer", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Grain will test the connection before saving it." }),
+        tested && !error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "grain-connection-success", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: "✓ " }),
+          "Connection test successful."
+        ] }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "grain-connection-footer-error", children: error }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Grain will test the connection before saving it." }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grain-connection-actions", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -75059,6 +75119,10 @@ const DENSITY_HEIGHTS = {
   normal: { row: 35, header: 42 },
   comfortable: { row: 45, header: 52 }
 };
+const NUMERIC_TYPE = /^(unsigned\s+|signed\s+)?(u?(tiny|small|medium|big|huge)?int(eger)?\d*|decimal|numeric|number|double|float\d*|real|long|short|byte|money)(\s+(precision|unsigned|signed))?\s*(\(\s*\d+\s*(,\s*\d+\s*)?\))?$/i;
+function isNumericColumnType(type) {
+  return Boolean(type && NUMERIC_TYPE.test(type.trim()));
+}
 const DataGrid = reactExports.forwardRef(function DataGrid2({
   theme: theme2,
   data,
@@ -75293,6 +75357,7 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
               return p.data[col.name];
             return void 0;
           },
+          ...isNumericColumnType(col.type) ? { cellClass: "sp-num-cell", headerClass: "ag-right-aligned-header" } : {},
           cellClassRules: {
             "sp-range-cell": (p) => isInRange(p.rowIndex ?? 0, index + 1)
           },
@@ -149247,6 +149312,7 @@ function getFormInitialData(connection) {
   delete formData["type"];
   delete formData["builtIn"];
   delete formData["hasPassword"];
+  delete formData["draft"];
   return formData;
 }
 function schemaHasPasswordField(schema) {
@@ -149285,9 +149351,10 @@ function schemaForConnectionMode(schema, connectorId, mode) {
     }
   };
 }
+const UNREACHABLE_MESSAGE = "Can't reach Grain. Start Grain and try again.";
 const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
   const { callServerTool, isReady, mode, sendMessage, onMessage } = useHostContext();
-  const grainServiceInstalled = useAppStore((state) => state.grainServiceInstalled);
+  const grainServiceSetup = useAppStore((state) => state.grainServiceSetup);
   const supportsActiveConnection = mode === "vscode";
   const trackUi = useTrackUi();
   reactExports.useEffect(() => {
@@ -149519,7 +149586,8 @@ const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
       const profileToSave = {
         ...formData,
         type: typeToSave,
-        id: connection?.id ?? `conn_${Date.now()}`
+        id: connection?.id ?? `conn_${Date.now()}`,
+        ...connection?.draft ? { draft: false } : {}
       };
       if (isEditing2 && profileToSave["password"] === "") {
         delete profileToSave["password"];
@@ -149795,10 +149863,30 @@ const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
     }
     return null;
   };
+  const renderUnreachableActions = () => /* @__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?.(grainServiceSetup === "not-set-up" ? "setUpGrain" : "startGrain"),
+        children: grainServiceSetup === "not-set-up" ? "Set up Grain" : "Start Grain"
+      }
+    )
+  ] });
+  const renderUnreachableState = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-empty", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: UNREACHABLE_MESSAGE }),
+    renderUnreachableActions()
+  ] });
   const renderConnectionForm = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-detail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-detail-body", children: [
     renderToast(),
-    !selectedType && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-section", children: "Database Type" }),
-    !selectedType && ["local", "server"].map((group) => {
+    !selectedType && connectors.length === 0 && connectionsUnreachable && renderUnreachableState(),
+    !selectedType && connectors.length === 0 && !connectionsUnreachable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-conn-empty", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No database types are available." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sp-btn", onClick: fetchData, children: "Retry" }) })
+    ] }),
+    !selectedType && connectors.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-conn-form-section", children: "Database Type" }),
+    !selectedType && connectors.length > 0 && ["local", "server"].map((group) => {
       const groupConnectors = connectors.filter((c) => getConnectorGroup(c.id) === group);
       if (groupConnectors.length === 0) {
         return null;
@@ -149975,11 +150063,8 @@ const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
           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 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?.("startGrain"), children: grainServiceInstalled ? "Start Grain" : "Set up Grain" })
-          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: connectionsUnreachable ? UNREACHABLE_MESSAGE : "No connections configured." }),
+          connectionsUnreachable && renderUnreachableActions(),
           mode === "vscode" && !connectionsUnreachable && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -150056,7 +150141,8 @@ const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sp-dot sp-dot-${status}` }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--sp-muted-fg)" }, children: statusLabel }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--sp-muted-fg)" }, children: c.draft ? "Needs setup" : statusLabel }),
+                      c.draft && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pill", children: "Draft" }),
                       isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-pill", style: { marginLeft: "auto" }, children: "Active" })
                     ]
                   }
@@ -150080,7 +150166,8 @@ const ConnectionsManager = ({ initialAdd = false, onSubpageChange }) => {
           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" })
+            selectedConnection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-built-in-label", children: "Built-in" }),
+            selectedConnection.draft && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-conn-built-in-label", children: "Draft" })
           ] }),
           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(
@@ -150251,6 +150338,10 @@ const TOOL_ENTRIES = {
   list_connections: ["connections", "Show saved connection profiles."],
   get_demo_dataset: ["connections", "Offer the built-in bookstore demo data and sample queries."],
   save_connection: ["connections", "Create or update a connection profile."],
+  create_connection_draft: [
+    "connections",
+    "Create a draft connection and give the user a setup link."
+  ],
   request_connection_credentials: ["connections", "Ask the user to enter a connection password."],
   test_connection: ["connections", "Verify a saved or draft profile."],
   delete_connection: ["connections", "Remove a saved profile."],
@@ -150758,13 +150849,13 @@ function SettingsPanel({ onSave, onClose, onShowWelcome, initialTab = "general"
                           title: "This daemon can run standalone or inside VS Code; check the releases page for the latest version.",
                           children: "View Releases"
                         }
-                      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      ) : updateAvailable && /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "button",
                         {
                           type: "button",
                           className: "sp-btn",
                           onClick: () => sendMessage("openExtensionPage", {}),
-                          children: updateAvailable ? "Open Update" : "Open Extension"
+                          children: "Open Update"
                         }
                       )
                     ] }),
@@ -151423,7 +151514,7 @@ const LandingScreen = ({
     activeConnectionName: storeConnName,
     activeConnectorType: storeConnType,
     openSettingsPanel,
-    grainServiceInstalled
+    grainServiceSetup
   } = useAppStore();
   const [fetchedConnName, setFetchedConnName] = reactExports.useState(null);
   const [fetchedConnType, setFetchedConnType] = reactExports.useState(null);
@@ -151498,9 +151589,13 @@ const LandingScreen = ({
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-landing-subtitle", children: "Execute SQL queries directly in your IDE." })
     ] }),
-    !hasActiveConnection && grainUnavailable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-landing-active-connection", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: grainServiceInstalled ? "Grain is stopped. Start Grain to see your connections." : "Grain is not set up yet. Setup installs the Grain service once." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn", onClick: () => sendMessage("startGrain"), children: grainServiceInstalled ? "Start Grain" : "Set up Grain" })
+    grainServiceSetup === "not-set-up" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-landing-active-connection", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Grain's background service isn't set up. Set it up once so your agents and the grain CLI can reach Grain when VS Code is closed." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn", onClick: () => sendMessage("setUpGrain"), children: "Set up Grain" })
+    ] }),
+    grainServiceSetup !== "not-set-up" && !hasActiveConnection && grainUnavailable && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-landing-active-connection", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: grainServiceSetup === "registered" ? "Grain is stopped. Start Grain to see your connections." : "Grain starts when needed on this machine." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-btn", onClick: () => sendMessage("startGrain"), children: "Start Grain" })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -151630,7 +151725,7 @@ function SafeModeIndicator({
     capability
   ] });
 }
-function MultiTabLayout({ emptyState } = {}) {
+function MultiTabLayout({ emptyState, fillGridWidth = false } = {}) {
   const {
     tabs,
     activeTabId,
@@ -152319,6 +152414,7 @@ ${activeTab.errorDetails}` : activeTab.error;
                       data: activeTab.result,
                       copyIncludesHeaders,
                       density: rowDensity,
+                      fillWidth: fillGridWidth,
                       onCellDoubleClick: handleCellDoubleClick
                     }
                   )
@@ -152332,6 +152428,7 @@ ${activeTab.errorDetails}` : activeTab.error;
                 data: activeTab.result,
                 copyIncludesHeaders,
                 density: rowDensity,
+                fillWidth: fillGridWidth,
                 onCellDoubleClick: handleCellDoubleClick
               }
             ),
@@ -152393,12 +152490,254 @@ ${activeTab.errorDetails}` : activeTab.error ?? "",
     )
   ] });
 }
+function SidebarAddButton({ label, title, onClick }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      className: "sp-web-section-add",
+      onClick,
+      title,
+      "aria-label": label,
+      children: "+"
+    }
+  );
+}
+function SqlEditor({ value, onChange, onRun, readOnly = false }) {
+  const frameRef = reactExports.useRef(null);
+  const gutterRef = reactExports.useRef(null);
+  const lineCount = value.split("\n").length;
+  const digits = Math.max(2, String(lineCount).length);
+  reactExports.useLayoutEffect(() => {
+    frameRef.current?.style.setProperty("--sp-web-gutter-digits", String(digits));
+  }, [digits]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: frameRef, className: "sp-web-sql-editor-frame", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: gutterRef,
+        className: "sp-web-sql-gutter",
+        "aria-hidden": "true",
+        "data-testid": "sql-gutter",
+        children: Array.from({ length: lineCount }, (_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: index + 1 }, index))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "textarea",
+      {
+        className: "sp-web-sql-editor",
+        "aria-label": "SQL editor",
+        spellCheck: false,
+        wrap: "off",
+        value,
+        readOnly,
+        onChange: (event) => onChange(event.target.value),
+        onScroll: (event) => {
+          if (gutterRef.current) gutterRef.current.scrollTop = event.currentTarget.scrollTop;
+        },
+        onKeyDown: (event) => {
+          if (!readOnly && (event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            onRun();
+          }
+        }
+      }
+    )
+  ] });
+}
+function displayQueryTitle(title, sql) {
+  if (title.trim() && !/^Result \d+$/.test(title.trim())) return title;
+  const line = sql.replace(/\/\*[\s\S]*?\*\//g, "").split("\n").map((part) => part.trim()).find((part) => part && !part.startsWith("--"))?.replace(/\s+/g, " ");
+  if (!line) return title.trim() || "Query";
+  return line.length > 40 ? `${line.slice(0, 40).trimEnd()}…` : line;
+}
+function resultText(result, fallback) {
+  return result.content?.find((item) => item.type === "text")?.text ?? fallback;
+}
+function failed(result) {
+  return Boolean(result.isError) || result.structuredContent?.["success"] === false;
+}
+function ConnectionPage({
+  connection,
+  onNewQuery,
+  onEdit,
+  onDeleted
+}) {
+  const { callServerTool } = useHostContext();
+  const [test, setTest] = reactExports.useState(null);
+  const [confirmingDelete, setConfirmingDelete] = reactExports.useState(false);
+  const [deleteError, setDeleteError] = reactExports.useState("");
+  const label = connection.name ?? connection.id;
+  const runTest = async () => {
+    setTest({ kind: "testing" });
+    try {
+      const result = await callServerTool("test_connection", { connectionId: connection.id });
+      setTest(
+        failed(result) ? { kind: "failed", message: resultText(result, "Connection test failed") } : { kind: "passed" }
+      );
+    } catch (error) {
+      setTest({
+        kind: "failed",
+        message: error instanceof Error ? error.message : "Connection test failed"
+      });
+    }
+  };
+  const confirmDelete = async () => {
+    setDeleteError("");
+    try {
+      const result = await callServerTool("delete_connection", { connectionId: connection.id });
+      if (failed(result)) throw new Error(resultText(result, "Could not delete connection"));
+      onDeleted();
+    } catch (error) {
+      setDeleteError(error instanceof Error ? error.message : "Could not delete connection");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-detail", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+      connection.type ?? "Database",
+      " ·",
+      " ",
+      connection.engineState === "ready" ? "Ready" : "Saved connection"
+    ] }),
+    test?.kind === "testing" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { role: "status", children: "Testing…" }),
+    test?.kind === "passed" && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sp-web-connection-test-success", role: "status", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: "✓ " }),
+      "Connection test successful."
+    ] }),
+    test?.kind === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-connection-test-error", role: "alert", children: test.message }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-actions", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "sp-web-primary-button",
+          "aria-label": `New query for ${label}`,
+          onClick: onNewQuery,
+          children: "New query"
+        }
+      ),
+      !connection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-web-secondary-button", onClick: onEdit, children: "Edit" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-web-secondary-button", onClick: () => void runTest(), children: "Test" }),
+      !connection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "sp-web-secondary-button",
+          onClick: () => {
+            setDeleteError("");
+            setConfirmingDelete(true);
+          },
+          children: "Delete"
+        }
+      )
+    ] }),
+    confirmingDelete && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-delete-confirm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+        "Delete '",
+        label,
+        "'? Its stored password is removed too."
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "sp-web-secondary-button",
+          onClick: () => void confirmDelete(),
+          children: "Delete"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "sp-web-secondary-button",
+          onClick: () => {
+            setConfirmingDelete(false);
+            setDeleteError("");
+          },
+          children: "Cancel"
+        }
+      )
+    ] }),
+    deleteError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-connection-test-error", role: "alert", children: deleteError })
+  ] });
+}
+function AgentActivity({
+  tabs,
+  activeTabId,
+  onSelect
+}) {
+  const [collapsed, setCollapsed] = reactExports.useState([]);
+  const sessions = Array.from(
+    new Set(
+      tabs.flatMap(
+        (tab) => tab.sessionId && tab.sessionId !== WEB_SESSION_ID ? [tab.sessionId] : []
+      )
+    )
+  );
+  if (sessions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-sidebar-section-title", children: "Agent activity" }),
+    sessions.map((sessionId) => {
+      const sessionTabs = tabs.filter((tab) => tab.sessionId === sessionId);
+      const name = sessionTabs[0]?.sessionDisplayName || sessionTabs[0]?.clientType || "Agent";
+      const isCollapsed = collapsed.includes(sessionId);
+      const groupId = `sp-web-agent-${sessionId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "sp-web-agent-session-toggle",
+            "aria-expanded": !isCollapsed,
+            "aria-controls": groupId,
+            onClick: () => setCollapsed(
+              (current2) => isCollapsed ? current2.filter((id) => id !== sessionId) : [...current2, sessionId]
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: isCollapsed ? "▸" : "▾" }),
+              " ",
+              name
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: groupId, hidden: isCollapsed, children: sessionTabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: `sp-web-session-item sp-web-session-button${activeTabId === tab.id ? " active" : ""}`,
+            "aria-pressed": activeTabId === tab.id,
+            onClick: () => onSelect(tab.id),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-session-name", children: displayQueryTitle(tab.title, tab.sql) })
+          },
+          tab.id
+        )) })
+      ] }, sessionId);
+    })
+  ] });
+}
+function AgentQueryHeading({
+  tab,
+  connectionName
+}) {
+  const ranAt = tab.result?.executedAt && new Date(tab.result.executedAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: displayQueryTitle(tab.title, tab.sql) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-query-provenance", children: [tab.sessionDisplayName || tab.clientType, connectionName, ranAt].filter(Boolean).join(" · ") })
+  ] });
+}
 const THEME_KEY = "grain:web-theme";
 const SIDEBAR_DEFAULT_WIDTH = 220;
 const SIDEBAR_MIN_WIDTH = 160;
 const SIDEBAR_MAX_WIDTH = 400;
 const SIDEBAR_AUTO_COLLAPSE_QUERY = "(max-width: 640px)";
 const SIDEBAR_WIDTH_STORAGE_KEY = "sql-preview:web-sidebar-width";
+const CONNECTIONS_COLLAPSED_KEY = "grain:web-connections-collapsed";
 function WebApp({ viewHint }) {
   const { onMessage, isReady, sendMessage, callServerTool, track } = useHostContext();
   const session = useWebSession();
@@ -152409,6 +152748,7 @@ function WebApp({ viewHint }) {
     setActiveTab,
     setTheme,
     openSettingsPanel,
+    closeSettingsPanel,
     tabs,
     activeTabId,
     settingsPanelTab
@@ -152416,22 +152756,28 @@ function WebApp({ viewHint }) {
   const [connections, setConnections] = reactExports.useState([]);
   const [setupOpen, setSetupOpen] = reactExports.useState(false);
   const [editingConnection, setEditingConnection] = reactExports.useState(null);
-  const [openConnectionIds, setOpenConnectionIds] = reactExports.useState([]);
+  const [connectionsCollapsed, setConnectionsCollapsed] = reactExports.useState(
+    () => readStoredValue(CONNECTIONS_COLLAPSED_KEY) === "true"
+  );
   const [activeConnectionId, setActiveConnectionId] = reactExports.useState(null);
-  const [connectionStatus, setConnectionStatus] = reactExports.useState({});
   const [descriptions, setDescriptions] = reactExports.useState({});
   const [queryConnections, setQueryConnections] = reactExports.useState({});
   const [closedQueries, setClosedQueries] = reactExports.useState([]);
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
   const localConnection = connections.find((connection) => connection.id === "built-in-duckdb");
-  const selectedConnectionId = activeTab ? queryConnections[activeTab.id] ?? localConnection?.id ?? connections[0]?.id ?? "" : "";
+  const isAgentTab = Boolean(activeTab?.sessionId && activeTab.sessionId !== WEB_SESSION_ID);
+  const selectedConnectionId = activeTab ? isAgentTab ? activeTab.connectionId ?? "" : queryConnections[activeTab.id] ?? localConnection?.id ?? connections[0]?.id ?? "" : "";
+  const activeConnectionName = activeTab ? activeTab.connectionName ?? connections.find((connection) => connection.id === activeTab.connectionId)?.name ?? (activeTab.connectionId === "unknown" ? void 0 : activeTab.connectionId) : void 0;
   reactExports.useEffect(() => {
     if (isReady) track?.("ui_state_shown", { state: "workspace_ready" });
   }, [isReady, track]);
-  const newQuery = (connectionId = "built-in-duckdb") => {
+  const newQuery = (connectionId = "built-in-duckdb", sql = "SELECT 42;") => {
+    setSetupOpen(false);
+    setEditingConnection(null);
+    closeSettingsPanel();
     const remoteId = crypto.randomUUID();
     const id = addTab(
-      "SELECT 42;",
+      sql,
       createProjectedTabId(WEB_SESSION_ID, remoteId),
       tabs.some((tab) => tab.title === "Untitled query") ? `Untitled query ${tabs.filter((tab) => tab.title.startsWith("Untitled query")).length + 1}` : "Untitled query",
       void 0,
@@ -152440,26 +152786,14 @@ function WebApp({ viewHint }) {
     setQueryConnections((current2) => ({ ...current2, [id]: connectionId }));
     setActiveConnectionId(null);
   };
-  const openConnection = (id) => {
-    setOpenConnectionIds((current2) => current2.includes(id) ? current2 : [...current2, id]);
-    setActiveConnectionId(id);
-  };
-  const testConnection = async (id) => {
-    setConnectionStatus((current2) => ({ ...current2, [id]: "Testing…" }));
-    try {
-      const result = await callServerTool("test_connection", { connectionId: id });
-      const message = result.content?.find((item) => item.type === "text")?.text ?? "Connection test failed";
-      setConnectionStatus((current2) => ({
-        ...current2,
-        [id]: result.isError || result.structuredContent?.["success"] === false ? message : "Connected"
-      }));
-    } catch (error) {
-      setConnectionStatus((current2) => ({
-        ...current2,
-        [id]: error instanceof Error ? error.message : "Connection test failed"
-      }));
-    }
+  const showQuery = (tabId) => {
+    setSetupOpen(false);
+    setEditingConnection(null);
+    closeSettingsPanel();
+    setActiveConnectionId(null);
+    setActiveTab(tabId);
   };
+  const openConnection = (id) => setActiveConnectionId(id);
   const closeQuery = (id) => {
     const tab = tabs.find((item) => item.id === id);
     if (tab) {
@@ -152469,7 +152803,7 @@ function WebApp({ viewHint }) {
           sql: tab.sql,
           title: tab.title,
           description: descriptions[id] ?? "",
-          connectionId: queryConnections[id] ?? "built-in-duckdb"
+          connectionId: tab.sessionId && tab.sessionId !== WEB_SESSION_ID ? tab.connectionId ?? "" : queryConnections[id] ?? "built-in-duckdb"
         }
       ]);
       if (tab.result || tab.isLoading) {
@@ -152495,14 +152829,15 @@ function WebApp({ viewHint }) {
   };
   const runQuery = async () => {
     if (!activeTab || !activeTab.sql.trim() || !selectedConnectionId || activeTab.isLoading) return;
-    const { id, sql } = activeTab;
-    updateTab(id, { isLoading: true, error: null, cancelled: false });
+    const { id, sql, title } = activeTab;
+    updateTab(id, { isLoading: true, error: null, result: null, cancelled: false });
     try {
       const result = await callServerTool("run_query", {
         sql,
         session: WEB_SESSION_ID,
         tabId: activeTab.remoteId,
-        connectionId: selectedConnectionId
+        connectionId: selectedConnectionId,
+        title
       });
       const data = result.structuredContent;
       if (useAppStore.getState().tabs.find((tab) => tab.id === id)?.cancelled) return;
@@ -152661,6 +152996,8 @@ function WebApp({ viewHint }) {
                 remoteId: msg.remoteId,
                 sessionDisplayName: msg.sessionDisplayName,
                 clientType: msg.clientType,
+                connectionId: msg.connectionId,
+                connectionName: msg.connectionName,
                 isRemote: msg.isRemote
               },
               !msg.preserveFocus
@@ -152682,6 +153019,8 @@ function WebApp({ viewHint }) {
                 remoteId: msg.remoteId,
                 sessionDisplayName: msg.sessionDisplayName,
                 clientType: msg.clientType,
+                connectionId: msg.connectionId,
+                connectionName: msg.connectionName,
                 isRemote: msg.isRemote
               },
               !msg.preserveFocus
@@ -152694,6 +153033,8 @@ function WebApp({ viewHint }) {
             remoteId: msg.remoteId,
             sessionDisplayName: msg.sessionDisplayName,
             clientType: msg.clientType,
+            connectionId: msg.connectionId,
+            connectionName: msg.connectionName,
             isRemote: msg.isRemote
           });
           if (!msg.preserveFocus || !currentActiveId) {
@@ -152712,6 +153053,8 @@ function WebApp({ viewHint }) {
                 remoteId: msg.remoteId,
                 sessionDisplayName: msg.sessionDisplayName,
                 clientType: msg.clientType,
+                connectionId: msg.connectionId,
+                connectionName: msg.connectionName,
                 isRemote: msg.isRemote
               },
               false
@@ -152724,6 +153067,8 @@ function WebApp({ viewHint }) {
             remoteId: msg.remoteId,
             sessionDisplayName: msg.sessionDisplayName,
             clientType: msg.clientType,
+            connectionId: msg.connectionId,
+            connectionName: msg.connectionName,
             isRemote: msg.isRemote,
             result: {
               query: msg.data.query,
@@ -152731,7 +153076,7 @@ function WebApp({ viewHint }) {
               rows: msg.data.rows,
               rowCount: msg.data.totalRowsInFirstBatch ?? msg.data.rows.length,
               executionTime: msg.data.executionTimeMs,
-              connection: "Web",
+              connection: msg.connectionName ?? msg.connectionId ?? "Connection unknown",
               wasTruncated: msg.data.wasTruncated,
               executedAt: msg.data.executedAt
             }
@@ -152749,6 +153094,8 @@ function WebApp({ viewHint }) {
                 remoteId: msg.remoteId,
                 sessionDisplayName: msg.sessionDisplayName,
                 clientType: msg.clientType,
+                connectionId: msg.connectionId,
+                connectionName: msg.connectionName,
                 isRemote: msg.isRemote
               },
               false
@@ -152761,6 +153108,8 @@ function WebApp({ viewHint }) {
             remoteId: msg.remoteId,
             sessionDisplayName: msg.sessionDisplayName,
             clientType: msg.clientType,
+            connectionId: msg.connectionId,
+            connectionName: msg.connectionName,
             isRemote: msg.isRemote
           });
           break;
@@ -152868,7 +153217,33 @@ function WebApp({ viewHint }) {
       ] }),
       monitorOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs("aside", { ref: sidebarRef, className: "sp-web-sidebar", "aria-label": "Workspace navigation", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-sidebar-header", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-sidebar-title", children: "Connections" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sp-web-sidebar-title sp-web-section-toggle",
+              "aria-expanded": !connectionsCollapsed,
+              "aria-controls": "sp-web-connections",
+              onClick: () => {
+                setConnectionsCollapsed((current2) => {
+                  writeStoredValue(CONNECTIONS_COLLAPSED_KEY, String(!current2));
+                  return !current2;
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: connectionsCollapsed ? "▸" : "▾" }),
+                " Connections"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SidebarAddButton,
+            {
+              label: "Add connection",
+              title: "Add connection",
+              onClick: () => setSetupOpen(true)
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -152877,7 +153252,7 @@ function WebApp({ viewHint }) {
               onClick: () => setMonitorOpen(false),
               title: "Hide sidebar",
               "aria-label": "Hide sidebar",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { size: 14 })
+              children: "«"
             }
           )
         ] }),
@@ -152894,68 +153269,55 @@ function WebApp({ viewHint }) {
             "aria-valuemax": SIDEBAR_MAX_WIDTH
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-list", children: [
-          connections.length ? connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "sp-web-connection-item",
-              onClick: () => openConnection(connection.id),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-connection-icon", "aria-hidden": "true", children: "▤" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                  connection.name ?? connection.id,
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: connection.type })
-                ] })
-              ]
-            },
-            connection.id
-          )) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-sidebar-helper", children: "No connections yet." }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              className: "sp-web-add-connection",
-              onClick: () => setSetupOpen(true),
-              children: "+ Add connection"
-            }
-          )
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            id: "sp-web-connections",
+            className: "sp-web-connection-list",
+            hidden: connectionsCollapsed,
+            children: connections.length ? connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                className: "sp-web-connection-item",
+                "aria-current": activeConnectionId === connection.id ? "page" : void 0,
+                onClick: () => openConnection(connection.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-connection-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DatabaseIcon, { size: 15 }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sp-web-connection-label", children: [
+                    connection.name ?? connection.id,
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: connection.type })
+                  ] }),
+                  connection.engineState === "ready" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-connection-dot", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-visually-hidden", children: "Ready" })
+                  ] })
+                ]
+              },
+              connection.id
+            )) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sp-web-sidebar-helper", children: "No connections yet." })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-sidebar-section-title", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "My queries" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarAddButton, { label: "Add query", title: "New query", onClick: () => newQuery() })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-sidebar-section-title", children: "Queries" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-session-list", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-web-add-connection", onClick: () => newQuery(), children: "+ New query" }),
           closedQueries.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "sp-web-add-connection", onClick: reopenQuery, children: "Reopen closed query" }),
-          tabs.filter((tab) => tab.sessionId === WEB_SESSION_ID).map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          tabs.filter((tab) => !tab.sessionId || tab.sessionId === WEB_SESSION_ID).map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               type: "button",
               className: `sp-web-session-item sp-web-session-button${activeTabId === tab.id ? " active" : ""}`,
               "aria-pressed": activeTabId === tab.id,
-              onClick: () => {
-                setActiveTab(tab.id);
-                setActiveConnectionId(null);
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-session-name", children: tab.title })
-            },
-            tab.id
-          )),
-          tabs.some((tab) => tab.sessionId !== WEB_SESSION_ID) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-session-meta sp-web-agent-heading", children: "Other sessions" }),
-          tabs.filter((tab) => tab.sessionId !== WEB_SESSION_ID).map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              className: `sp-web-session-item sp-web-session-button${activeTabId === tab.id ? " active" : ""}`,
-              "aria-pressed": activeTabId === tab.id,
-              onClick: () => {
-                setActiveTab(tab.id);
-                setActiveConnectionId(null);
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-session-name", children: tab.title })
+              onClick: () => showQuery(tab.id),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-session-name", children: displayQueryTitle(tab.title, tab.sql) })
             },
             tab.id
           )),
           tabs.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-empty-sessions", children: "No queries yet." })
         ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AgentActivity, { tabs, activeTabId, onSelect: showQuery }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-sidebar-footer", children: "⌂   All work stays on this computer." })
       ] }),
       setupOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-main", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -152992,41 +153354,6 @@ function WebApp({ viewHint }) {
         ) }),
         !settingsPanelTab && (activeTab || activeConnectionId) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-query-workspace", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-query-tabs", role: "tablist", "aria-label": "Open tabs", children: [
-            openConnectionIds.map((id) => {
-              const connection = connections.find((item) => item.id === id);
-              if (!connection) return null;
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: `sp-web-query-tab${activeConnectionId === id ? " active" : ""}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "tab",
-                        "aria-selected": activeConnectionId === id,
-                        onClick: () => setActiveConnectionId(id),
-                        children: connection.name ?? id
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": `Close ${connection.name ?? id} tab`,
-                        onClick: () => {
-                          setOpenConnectionIds((current2) => current2.filter((item) => item !== id));
-                          if (activeConnectionId === id) setActiveConnectionId(null);
-                        },
-                        children: "×"
-                      }
-                    )
-                  ]
-                },
-                `connection-${id}`
-              );
-            }),
             tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
@@ -153038,18 +153365,15 @@ function WebApp({ viewHint }) {
                       type: "button",
                       role: "tab",
                       "aria-selected": tab.id === activeTabId && !activeConnectionId,
-                      onClick: () => {
-                        setActiveTab(tab.id);
-                        setActiveConnectionId(null);
-                      },
-                      children: tab.title
+                      onClick: () => showQuery(tab.id),
+                      children: displayQueryTitle(tab.title, tab.sql)
                     }
                   ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
                       type: "button",
-                      "aria-label": `Close ${tab.title} tab`,
+                      "aria-label": `Close ${displayQueryTitle(tab.title, tab.sql)} tab`,
                       onClick: () => closeQuery(tab.id),
                       children: "×"
                     }
@@ -153073,51 +153397,39 @@ function WebApp({ viewHint }) {
           activeConnectionId ? (() => {
             const connection = connections.find((item) => item.id === activeConnectionId);
             if (!connection) return null;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-detail", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: connection.name ?? connection.id }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
-                connection.type ?? "Database",
-                " ·",
-                " ",
-                connectionStatus[connection.id] ?? (connection.engineState === "ready" ? "Ready" : "Saved connection")
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-connection-actions", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sp-web-primary-button",
-                    "aria-label": `New query for ${connection.name ?? connection.id}`,
-                    onClick: () => newQuery(connection.id),
-                    children: "New query"
-                  }
-                ),
-                !connection.builtIn && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sp-web-secondary-button",
-                    onClick: () => {
-                      setEditingConnection(connection);
-                      setSetupOpen(true);
-                    },
-                    children: "Edit"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sp-web-secondary-button",
-                    onClick: () => void testConnection(connection.id),
-                    children: "Test"
-                  }
-                )
-              ] })
-            ] });
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ConnectionPage,
+              {
+                connection,
+                onNewQuery: () => newQuery(connection.id),
+                onEdit: () => {
+                  setEditingConnection(connection);
+                  setSetupOpen(true);
+                },
+                onDeleted: () => {
+                  setActiveConnectionId(null);
+                  setQueryConnections(
+                    (current2) => Object.fromEntries(
+                      Object.entries(current2).map(([tabId, id]) => [
+                        tabId,
+                        id === connection.id ? "built-in-duckdb" : id
+                      ])
+                    )
+                  );
+                  void fetchConnections();
+                }
+              },
+              connection.id
+            );
           })() : activeTab && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             " ",
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-query-heading", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-query-heading", children: isAgentTab ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              AgentQueryHeading,
+              {
+                tab: activeTab,
+                connectionName: activeConnectionName
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "input",
                 {
@@ -153139,24 +153451,35 @@ function WebApp({ viewHint }) {
                   rows: 1
                 }
               )
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-query-toolbar", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connection" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "select",
-                  {
-                    "aria-label": "Query connection",
-                    value: selectedConnectionId,
-                    onChange: (event) => setQueryConnections((current2) => ({
-                      ...current2,
-                      [activeTab.id]: event.target.value
-                    })),
-                    children: connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: connection.id, children: connection.name ?? connection.id }, connection.id))
-                  }
-                )
-              ] }),
-              activeTab.isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              isAgentTab ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-readonly", children: activeConnectionName ?? "Connection unknown" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "select",
+                {
+                  "aria-label": "Query connection",
+                  value: selectedConnectionId,
+                  onChange: (event) => setQueryConnections((current2) => ({
+                    ...current2,
+                    [activeTab.id]: event.target.value
+                  })),
+                  children: [
+                    !selectedConnectionId && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Choose connection" }),
+                    selectedConnectionId && !connections.some(
+                      (connection) => connection.id === selectedConnectionId
+                    ) && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: selectedConnectionId, children: selectedConnectionId }),
+                    connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: connection.id, children: connection.name ?? connection.id }, connection.id))
+                  ]
+                }
+              ) }),
+              isAgentTab ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "sp-web-secondary-button",
+                  onClick: () => newQuery(activeTab.connectionId ?? "", activeTab.sql),
+                  children: "Open as my query"
+                }
+              ) : activeTab.isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
                   type: "button",
@@ -153172,6 +153495,7 @@ function WebApp({ viewHint }) {
                   onClick: () => void runQuery(),
                   disabled: !selectedConnectionId || !activeTab.sql.trim(),
                   children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sp-web-run-glyph", "aria-hidden": "true", children: "▶" }),
                     "Run ",
                     /* @__PURE__ */ jsxRuntimeExports.jsx("kbd", { children: "⌘↵" })
                   ]
@@ -153179,25 +153503,17 @@ function WebApp({ viewHint }) {
               )
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "textarea",
+              SqlEditor,
               {
-                className: "sp-web-sql-editor",
-                "aria-label": "SQL editor",
-                spellCheck: false,
                 value: activeTab.sql,
-                onChange: (event) => updateTab(activeTab.id, { sql: event.target.value }),
-                onKeyDown: (event) => {
-                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-                    event.preventDefault();
-                    void runQuery();
-                  }
-                }
+                onChange: (sql) => updateTab(activeTab.id, { sql }),
+                onRun: () => void runQuery(),
+                readOnly: isAgentTab
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-results-label", children: "Results" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-results", hidden: Boolean(activeConnectionId), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiTabLayout, { emptyState: resultsEmptyState }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-results", hidden: Boolean(activeConnectionId), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiTabLayout, { emptyState: resultsEmptyState, fillGridWidth: true }) })
       ] })
     ] })
   ] });
@@ -153370,11 +153686,18 @@ bootstrap();</script>
   margin: 5px 0 0;
 }
 .grain-connection-success {
-  color: var(--grain-ink);
-  background: var(--grain-surface);
+  color: var(--vscode-testing-iconPassed, var(--sp-success));
+  border: 1px solid var(--vscode-testing-iconPassed, var(--sp-success));
+  background: color-mix(in srgb, var(--sp-success) 8%, var(--grain-surface));
   padding: 10px 14px;
   border-radius: var(--grain-radius-sm);
 }
+.grain-connection-footer .grain-connection-success {
+  color: var(--vscode-testing-iconPassed, var(--sp-success));
+}
+.grain-connection-footer-error {
+  color: var(--vscode-errorForeground, var(--sp-error));
+}
 .grain-connection-page :is(button, input, select, summary):focus-visible {
   outline: 2px solid var(--grain-accent);
   outline-offset: 2px;
@@ -163150,6 +163473,12 @@ body.vscode-high-contrast .ag-theme-quartz {
   outline: none !important;
 }
 
+.sp-num-cell {
+  justify-content: flex-end;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
 .sp-null {
   color: var(--sp-muted-fg);
   font-style: italic;
@@ -166216,10 +166545,79 @@ body {
   letter-spacing: 0;
 }
 .sp-web-sidebar-section-title {
-  margin: 18px 9px 8px;
-  padding-top: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 18px 0 6px;
+  padding: 17px 9px 0;
   border-top: 1px solid var(--grain-border-subtle);
 }
+.sp-web-sidebar-header .sp-web-sidebar-title {
+  flex: 1;
+}
+.sp-web-section-toggle,
+.sp-web-agent-session-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--grain-ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.sp-web-section-toggle {
+  padding: 0;
+}
+.sp-web-agent-session-toggle {
+  width: 100%;
+  padding: 7px 9px;
+  color: var(--grain-ink-muted);
+  font-size: 11px;
+}
+.sp-web-section-toggle:focus-visible,
+.sp-web-agent-session-toggle:focus-visible {
+  outline: 1px solid var(--grain-accent);
+}
+[aria-current='page'].sp-web-connection-item {
+  background: var(--grain-surface-raised);
+}
+.sp-web-section-add,
+.sp-web-sidebar-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--grain-radius-sm);
+  background: transparent;
+  color: var(--grain-ink-muted);
+  font: 400 16px/1 var(--grain-font-body);
+  cursor: pointer;
+}
+.sp-web-sidebar-close {
+  font-size: 13px;
+}
+.sp-web-section-add:hover,
+.sp-web-sidebar-close:hover {
+  background: var(--grain-surface-raised);
+  color: var(--grain-ink);
+}
+.sp-web-section-add:focus-visible,
+.sp-web-sidebar-close:focus-visible {
+  outline: 1px solid var(--grain-accent);
+}
+.sp-web-connection-label {
+  flex: 1;
+  min-width: 0;
+}
+.sp-web-connection-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--sp-success);
+}
 .sp-web-connection-item {
   display: flex;
   align-items: center;
@@ -166338,7 +166736,7 @@ body {
 .sp-web-query-tabs {
   display: flex;
   align-items: stretch;
-  min-height: 38px;
+  min-height: 42px;
   overflow-x: auto;
   border-bottom: 1px solid var(--grain-border-subtle);
   background: var(--grain-surface);
@@ -166352,6 +166750,9 @@ body {
   background: var(--grain-ground);
   box-shadow: inset 0 -2px var(--grain-accent);
 }
+.sp-web-query-tab.active button:first-child {
+  color: var(--grain-accent);
+}
 .sp-web-query-tab button,
 .sp-web-query-tab-action {
   border: 0;
@@ -166359,7 +166760,7 @@ body {
   color: var(--grain-ink);
   font: inherit;
   cursor: pointer;
-  padding: 8px 10px;
+  padding: 8px 14px;
   white-space: nowrap;
 }
 .sp-web-query-tab button:last-child {
@@ -166370,12 +166771,20 @@ body {
   gap: 4px;
   padding: 18px 24px 14px;
 }
+.sp-web-query-heading h1 {
+  margin: 0;
+  font-size: 22px;
+}
+.sp-web-query-provenance {
+  color: var(--grain-ink-muted);
+  font-size: 11px;
+}
 .sp-web-query-heading input,
 .sp-web-query-heading textarea {
   width: 100%;
   padding: 0;
   border: 0;
-  resize: vertical;
+  resize: none;
   background: transparent;
   color: var(--grain-ink);
   font-family: var(--grain-font-body);
@@ -166434,26 +166843,43 @@ body {
   opacity: 0.5;
   cursor: default;
 }
+.sp-web-sql-editor-frame {
+  --sp-web-gutter-width: calc(var(--sp-web-gutter-digits, 2) * 1ch + 28px);
+  position: relative;
+  border-bottom: 1px solid var(--grain-border-subtle);
+  background: var(--grain-ground);
+}
+.sp-web-sql-gutter {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: var(--sp-web-gutter-width);
+  overflow: hidden;
+  padding: 20px 12px 40px 0;
+  border-right: 1px solid var(--grain-border-subtle);
+  color: var(--grain-ink-muted);
+  font: 12px/1.7 var(--grain-font-mono);
+  text-align: right;
+  user-select: none;
+}
 .sp-web-sql-editor {
   display: block;
   box-sizing: border-box;
-  width: 100%;
+  width: calc(100% - var(--sp-web-gutter-width));
   min-height: 190px;
-  padding: 20px 24px;
+  margin-left: var(--sp-web-gutter-width);
+  padding: 20px 24px 20px 16px;
   border: 0;
-  border-bottom: 1px solid var(--grain-border-subtle);
   resize: vertical;
+  white-space: pre;
   outline-color: var(--grain-accent);
   background: var(--grain-ground);
   color: var(--grain-ink);
   font: 12px/1.7 var(--grain-font-mono);
   tab-size: 2;
 }
-.sp-web-results-label {
-  padding: 10px 24px;
-  font-size: 12px;
-  font-weight: 700;
-}
 .sp-web-results {
   display: flex;
   flex: 1;
@@ -166480,6 +166906,15 @@ body {
   font-weight: 700;
 }
 
+.sp-web-run-glyph {
+  margin-right: 6px;
+  font-size: 9px;
+}
+.sp-web-query-toolbar > .sp-web-primary-button {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+}
 .sp-web-query-toolbar kbd {
   margin-left: 6px;
   padding: 2px 5px;
@@ -166545,6 +166980,8 @@ body {
 .sp-web-connection-item:hover,
 .sp-web-connection-item:focus-visible {
   background: var(--grain-surface);
+}
+.sp-web-connection-item:focus-visible {
   outline: 1px solid var(--grain-accent);
 }
 .sp-web-connection-detail {
@@ -166557,6 +166994,18 @@ body {
 .sp-web-connection-detail p {
   color: var(--grain-ink-muted);
 }
+.sp-web-connection-detail .sp-web-connection-test-success {
+  color: var(--vscode-testing-iconPassed, var(--sp-success));
+}
+.sp-web-connection-detail .sp-web-connection-test-error {
+  color: var(--vscode-errorForeground, var(--sp-error));
+}
+.sp-web-connection-delete-confirm {
+  margin-top: 16px;
+}
+.sp-web-connection-delete-confirm p {
+  color: var(--grain-ink);
+}
 .sp-web-connection-actions {
   display: flex;
   gap: 8px;