grain-tools 0.10.15 → 0.10.16

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,24 @@ 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() {
+  try {
+    const stored = window.sessionStorage.getItem(WEB_SESSION_KEY);
+    if (stored && /^web-[0-9a-f-]{36}$/.test(stored)) return stored;
+  } catch {
+    return `web-${crypto.randomUUID()}`;
+  }
+  return `web-${crypto.randomUUID()}`;
+}
+const WEB_SESSION_ID = resolveWebSessionId();
+function rememberWebSessionId() {
+  try {
+    window.sessionStorage.setItem(WEB_SESSION_KEY, WEB_SESSION_ID);
+  } catch {
+    return;
+  }
+}
 function resolveProjectedTarget(tabId, payload) {
   const parsed = tabId ? parseProjectedTabId(tabId) : void 0;
   const tab = tabId ? useAppStore.getState().tabs.find((t) => t.id === tabId) : void 0;
@@ -14166,6 +14187,7 @@ function useWebTabSync(options) {
         }
       }
       unreachableStreakRef.current = 0;
+      rememberWebSessionId();
       setDaemonStatus("connected");
       setIsReady(true);
     } catch (err) {
@@ -14214,7 +14236,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 +14353,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 +14495,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 +14515,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 +14550,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 +14575,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 +14604,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,8 +14686,8 @@ 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: [
@@ -14668,7 +14705,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 +14722,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,7 +14776,7 @@ 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) })
         ] })
@@ -75059,6 +75112,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,
@@ -75068,6 +75125,7 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
   nativeTheme = false,
   disableFilters = false,
   autoSizeStrategy,
+  fillWidth = false,
   onCellDoubleClick
 }, ref) {
   const trackUi = useTrackUi();
@@ -75236,6 +75294,21 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
     }),
     [data, getNodeValue, copyIncludesHeaders]
   );
+  const userResizedRef = reactExports.useRef(false);
+  const fillSpareWidth = reactExports.useCallback((e2) => {
+    if (userResizedRef.current) return;
+    const body = e2.api.getHorizontalPixelRange?.();
+    const columns = (e2.api.getAllDisplayedColumns?.() ?? []).filter((c) => !c.getPinned());
+    if (!body || columns.length === 0) return;
+    const used = columns.reduce((sum2, c) => sum2 + c.getActualWidth(), 0);
+    if (used < body.right - body.left) e2.api.sizeColumnsToFit();
+  }, []);
+  const noteUserResize = reactExports.useCallback((e2) => {
+    if (e2.source === "uiColumnResized" && e2.finished) userResizedRef.current = true;
+  }, []);
+  reactExports.useEffect(() => {
+    userResizedRef.current = false;
+  }, [data?.columns]);
   const columnDefs = reactExports.useMemo(() => {
     if (!data?.columns) return [];
     const isInRange = (rowIndex, displayedColIndex) => {
@@ -75293,6 +75366,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)
           },
@@ -75419,6 +75493,11 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
           onGridReady: (p) => {
             apiRef.current = p.api;
           },
+          ...fillWidth ? {
+            onFirstDataRendered: fillSpareWidth,
+            onGridSizeChanged: fillSpareWidth,
+            onColumnResized: noteUserResize
+          } : {},
           rowData: data.rows,
           columnDefs,
           defaultColDef: {
@@ -149247,6 +149326,7 @@ function getFormInitialData(connection) {
   delete formData["type"];
   delete formData["builtIn"];
   delete formData["hasPassword"];
+  delete formData["draft"];
   return formData;
 }
 function schemaHasPasswordField(schema) {
@@ -149285,9 +149365,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 +149600,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 +149877,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 +150077,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 +150155,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 +150180,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 +150352,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 +150863,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 +151528,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 +151603,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 +151739,7 @@ function SafeModeIndicator({
     capability
   ] });
 }
-function MultiTabLayout({ emptyState } = {}) {
+function MultiTabLayout({ emptyState, fillGridWidth = false } = {}) {
   const {
     tabs,
     activeTabId,
@@ -152319,6 +152428,7 @@ ${activeTab.errorDetails}` : activeTab.error;
                       data: activeTab.result,
                       copyIncludesHeaders,
                       density: rowDensity,
+                      fillWidth: fillGridWidth,
                       onCellDoubleClick: handleCellDoubleClick
                     }
                   )
@@ -152332,6 +152442,7 @@ ${activeTab.errorDetails}` : activeTab.error;
                 data: activeTab.result,
                 copyIncludesHeaders,
                 density: rowDensity,
+                fillWidth: fillGridWidth,
                 onCellDoubleClick: handleCellDoubleClick
               }
             ),
@@ -152393,6 +152504,60 @@ ${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 }) {
+  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,
+        onChange: (event) => onChange(event.target.value),
+        onScroll: (event) => {
+          if (gutterRef.current) gutterRef.current.scrollTop = event.currentTarget.scrollTop;
+        },
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            onRun();
+          }
+        }
+      }
+    )
+  ] });
+}
 const THEME_KEY = "grain:web-theme";
 const SIDEBAR_DEFAULT_WIDTH = 220;
 const SIDEBAR_MIN_WIDTH = 160;
@@ -152495,14 +152660,15 @@ function WebApp({ viewHint }) {
   };
   const runQuery = async () => {
     if (!activeTab || !activeTab.sql.trim() || !selectedConnectionId || activeTab.isLoading) return;
-    const { id, sql } = activeTab;
+    const { id, sql, title } = activeTab;
     updateTab(id, { isLoading: true, error: 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;
@@ -152869,6 +153035,14 @@ 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.jsx(
+            SidebarAddButton,
+            {
+              label: "Add connection",
+              title: "Add connection",
+              onClick: () => setSetupOpen(true)
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -152877,7 +153051,7 @@ function WebApp({ viewHint }) {
               onClick: () => setMonitorOpen(false),
               title: "Hide sidebar",
               "aria-label": "Hide sidebar",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { size: 14 })
+              children: "«"
             }
           )
         ] }),
@@ -152894,36 +153068,31 @@ 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", { 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.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: "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(
             "button",
@@ -153141,21 +153310,18 @@ function WebApp({ viewHint }) {
               )
             ] }),
             /* @__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))
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__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(
                 "button",
                 {
@@ -153172,6 +153338,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 +153346,16 @@ 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()
               }
             )
-          ] }),
-          /* @__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 }) })
       ] })
     ] })
   ] });
@@ -163150,6 +163308,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 +166380,54 @@ 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-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 +166546,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 +166560,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 +166570,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 {
@@ -166375,7 +166586,7 @@ body {
   width: 100%;
   padding: 0;
   border: 0;
-  resize: vertical;
+  resize: none;
   background: transparent;
   color: var(--grain-ink);
   font-family: var(--grain-font-body);
@@ -166434,26 +166645,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 +166708,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 +166782,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 {