grain-tools 0.10.16 → 0.10.17

package/dist/web-app.html

@@ -13780,21 +13780,15 @@ async function buildGuideHubState() {
 }
 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()}`;
+  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() {
-  try {
-    window.sessionStorage.setItem(WEB_SESSION_KEY, WEB_SESSION_ID);
-  } catch {
-    return;
-  }
+  writeStoredValue(WEB_SESSION_KEY, WEB_SESSION_ID);
 }
 function resolveProjectedTarget(tabId, payload) {
   const parsed = tabId ? parseProjectedTabId(tabId) : void 0;
@@ -14051,6 +14045,8 @@ function useWebTabSync(options) {
         remoteId: tab.id,
         sessionDisplayName: session.displayName,
         clientType: session.clientType,
+        connectionId: tab.connectionId,
+        connectionName: tab.connectionName,
         isRemote: true,
         preserveFocus
       });
@@ -14068,6 +14064,8 @@ function useWebTabSync(options) {
         remoteId: tab.id,
         sessionDisplayName: session.displayName,
         clientType: session.clientType,
+        connectionId: tab.connectionId,
+        connectionName: tab.connectionName,
         isRemote: true,
         preserveFocus
       });
@@ -14088,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") {
@@ -14164,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);
@@ -14175,7 +14175,8 @@ function useWebTabSync(options) {
               remoteTabId: tab.id,
               status: tab.status,
               rowCount: tab.rowCount,
-              title: tab.title
+              title: tab.title,
+              connectionId: tab.connectionId
             });
           }
         })
@@ -14694,7 +14695,10 @@ function ConnectionSetupPage({
         /* @__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" }),
@@ -14782,7 +14786,10 @@ function ConnectionSetupPage({
         ] })
       ] }),
       /* @__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",
@@ -75125,7 +75132,6 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
   nativeTheme = false,
   disableFilters = false,
   autoSizeStrategy,
-  fillWidth = false,
   onCellDoubleClick
 }, ref) {
   const trackUi = useTrackUi();
@@ -75294,21 +75300,6 @@ 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) => {
@@ -75493,11 +75484,6 @@ const DataGrid = reactExports.forwardRef(function DataGrid2({
           onGridReady: (p) => {
             apiRef.current = p.api;
           },
-          ...fillWidth ? {
-            onFirstDataRendered: fillSpareWidth,
-            onGridSizeChanged: fillSpareWidth,
-            onColumnResized: noteUserResize
-          } : {},
           rowData: data.rows,
           columnDefs,
           defaultColDef: {
@@ -152517,7 +152503,7 @@ function SidebarAddButton({ label, title, onClick }) {
     }
   );
 }
-function SqlEditor({ value, onChange, onRun }) {
+function SqlEditor({ value, onChange, onRun, readOnly = false }) {
   const frameRef = reactExports.useRef(null);
   const gutterRef = reactExports.useRef(null);
   const lineCount = value.split("\n").length;
@@ -152544,12 +152530,13 @@ function SqlEditor({ value, onChange, onRun }) {
         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 ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          if (!readOnly && (event.metaKey || event.ctrlKey) && event.key === "Enter") {
             event.preventDefault();
             onRun();
           }
@@ -152558,12 +152545,199 @@ function SqlEditor({ value, onChange, 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();
@@ -152574,6 +152748,7 @@ function WebApp({ viewHint }) {
     setActiveTab,
     setTheme,
     openSettingsPanel,
+    closeSettingsPanel,
     tabs,
     activeTabId,
     settingsPanelTab
@@ -152581,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,
@@ -152605,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) {
@@ -152634,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) {
@@ -152661,7 +152830,7 @@ function WebApp({ viewHint }) {
   const runQuery = async () => {
     if (!activeTab || !activeTab.sql.trim() || !selectedConnectionId || activeTab.isLoading) return;
     const { id, sql, title } = activeTab;
-    updateTab(id, { isLoading: true, error: null, cancelled: false });
+    updateTab(id, { isLoading: true, error: null, result: null, cancelled: false });
     try {
       const result = await callServerTool("run_query", {
         sql,
@@ -152827,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
@@ -152848,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
@@ -152860,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) {
@@ -152878,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
@@ -152890,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,
@@ -152897,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
             }
@@ -152915,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
@@ -152927,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;
@@ -153034,7 +153217,25 @@ 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,
             {
@@ -153068,63 +153269,55 @@ function WebApp({ viewHint }) {
             "aria-valuemax": SIDEBAR_MAX_WIDTH
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sp-web-connection-list", children: connections.length ? connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
           {
-            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." }) }),
+            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: "Queries" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "My queries" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarAddButton, { label: "Add query", title: "New query", onClick: () => newQuery() })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-session-list", children: [
           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",
-            {
-              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(
+          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 })
+              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(
@@ -153161,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",
               {
@@ -153207,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: "×"
                     }
@@ -153242,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",
                 {
@@ -153308,9 +153451,9 @@ function WebApp({ viewHint }) {
                   rows: 1
                 }
               )
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sp-web-query-toolbar", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__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",
@@ -153319,10 +153462,24 @@ function WebApp({ viewHint }) {
                     ...current2,
                     [activeTab.id]: event.target.value
                   })),
-                  children: connections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: connection.id, children: connection.name ?? connection.id }, connection.id))
+                  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))
+                  ]
                 }
               ) }),
-              activeTab.isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              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",
@@ -153350,7 +153507,8 @@ function WebApp({ viewHint }) {
               {
                 value: activeTab.sql,
                 onChange: (sql) => updateTab(activeTab.id, { sql }),
-                onRun: () => void runQuery()
+                onRun: () => void runQuery(),
+                readOnly: isAgentTab
               }
             )
           ] })
@@ -153528,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;
@@ -166390,6 +166555,31 @@ body {
 .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;
@@ -166581,6 +166771,14 @@ 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%;
@@ -166796,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;