From dd36c639505cd7821964915d2ac752de1621dc0e Mon Sep 17 00:00:00 2001
From: 2160039878-cyber <285580214+2160039878-cyber@users.noreply.github.com>
Date: Thu, 10 Sep 2026 11:49:48 +0800
Subject: [PATCH 1/2] feat(explorer): preview tables on double-click and
 refresh rows

---
 docs/ARCHITECTURE.md                          |  8 ++++
 src/components/Studio.tsx                     |  7 +++
 .../schema-explorer/SchemaExplorer.tsx        | 21 ++++++++-
 src/components/schema-explorer/TableItem.tsx  |  2 +
 src/components/sidebar/Sidebar.tsx            |  3 ++
 src/components/studio/BottomPanel.tsx         | 21 +++++++++
 src/hooks/use-tab-manager.ts                  |  1 +
 src/lib/types.ts                              |  2 +
 src/workspace/StudioWorkspace.tsx             |  6 +++
 tests/components/Studio.test.tsx              | 21 +++++++++
 tests/components/StudioWorkspace.test.tsx     | 14 ++++++
 .../schema-explorer/SchemaExplorer.test.tsx   | 22 ++++++++-
 .../schema-explorer/TableItem.test.tsx        | 28 ++++++++++++
 tests/components/sidebar/Sidebar.test.tsx     |  7 +++
 tests/components/studio/BottomPanel.test.tsx  | 45 +++++++++++++++++++
 tests/hooks/use-tab-manager.test.ts           |  2 +
 16 files changed, 208 insertions(+), 2 deletions(-)

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 97bfa34ca..607b6e0d5 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -185,6 +185,14 @@ Multi-statement queries execute sequentially via `POST /api/db/multi-query`.
 - **React hooks** for UI state: tabs, active connection, execution status
 - **Custom hooks** extracted from Studio.tsx: `useAuth`, `useConnectionManager`, `useTabManager`, `useTransactionControl`, `useQueryExecution`, `useInlineEditing`
 
+Double-clicking an Explorer table uses `useTabManager.handleTableClick`, the same action as
+Select Top 50: it opens a new query tab and executes the provider's preview query. A session-only
+`QueryTab.previewQuery` records that generated query. BottomPanel's **Refresh rows** reruns it
+on the same tab through the standalone or embedded execution hook; it is hidden after query
+edits and for stored agent results, and disabled during execution, pagination or pending cell
+edits. **Refresh schema** separately invokes the current connection's schema fetch, including
+from empty/error states, without executing a query or replacing editor tabs.
+
 ### 4.6. Workspace Abstraction (npm package embedding)
 
 Studio ships both as a standalone app and as the `@libredb/studio` npm package consumed by libredb-platform (built with `tsup` via `build:lib`).
diff --git a/src/components/Studio.tsx b/src/components/Studio.tsx
index 30258b222..b2407f5dc 100644
--- a/src/components/Studio.tsx
+++ b/src/components/Studio.tsx
@@ -397,6 +397,10 @@ export default function Studio() {
     tabMgr.handleTableClick(tableName, queryExec.executeQuery);
   };
 
+  const onRefreshSchema = () => {
+    if (conn.activeConnection) conn.fetchSchema(conn.activeConnection);
+  };
+
   const requestDeleteConnection = (id: string) => {
     setPendingDeleteConnectionId(id);
   };
@@ -494,6 +498,7 @@ export default function Studio() {
                 }}
                 onAddConnection={() => setIsConnectionModalOpen(true)}
                 onTableClick={onTableClick}
+                onRefreshSchema={onRefreshSchema}
                 onGenerateSelect={tabMgr.handleGenerateSelect}
                 onCreateTableClick={() => setIsCreateTableModalOpen(true)}
                 onShowDiagram={() => setShowDiagram(true)}
@@ -623,6 +628,7 @@ export default function Studio() {
                         onTableClick(tableName);
                         setActiveMobileTab("editor");
                       }}
+                      onRefreshSchema={onRefreshSchema}
                       onGenerateSelect={(tableName) => {
                         tabMgr.handleGenerateSelect(tableName);
                         setActiveMobileTab("editor");
@@ -687,6 +693,7 @@ export default function Studio() {
                     <ResizableHandle className="h-1 bg-fill hover:bg-brand-tint/20" />
                     <ResizablePanel id="studio-editor-bottom" defaultSize="60" minSize="20">
                       <BottomPanel
+                        onRefreshResults={queryExec.executeQuery}
                         mode={queryExec.bottomPanelMode}
                         onSetMode={queryExec.setBottomPanelMode}
                         currentTab={tabMgr.currentTab}
diff --git a/src/components/schema-explorer/SchemaExplorer.tsx b/src/components/schema-explorer/SchemaExplorer.tsx
index f17776585..01b4d0faf 100644
--- a/src/components/schema-explorer/SchemaExplorer.tsx
+++ b/src/components/schema-explorer/SchemaExplorer.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useMemo, useCallback } from "react";
 import { TableSchema } from "@/lib/types";
 import type { ProviderMetadata } from "@/hooks/use-provider-metadata";
-import { Search, Hash, LoaderCircle, CircleAlert, Database, Plus, Settings } from "lucide-react";
+import { Search, Hash, LoaderCircle, CircleAlert, Database, Plus, Settings, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { AnimatePresence } from "framer-motion";
@@ -19,6 +19,7 @@ interface SchemaExplorerProps {
    */
   schemaError?: string | null;
   onTableClick?: (tableName: string) => void;
+  onRefreshSchema?: () => void;
   onGenerateSelect?: (tableName: string) => void;
   onCreateTableClick?: () => void;
   isAdmin?: boolean;
@@ -35,6 +36,7 @@ export function SchemaExplorer({
   isLoadingSchema,
   schemaError = null,
   onTableClick,
+  onRefreshSchema,
   onGenerateSelect,
   onCreateTableClick,
   isAdmin = false,
@@ -48,6 +50,19 @@ export function SchemaExplorer({
   const capabilities = metadata?.capabilities;
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedTables, setExpandedTables] = useState<Set<string>>(new Set());
+  const refreshButton = onRefreshSchema && (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="h-6 w-6 text-muted-foreground"
+      onClick={onRefreshSchema}
+      disabled={isLoadingSchema}
+      title="Refresh schema"
+      aria-label="Refresh schema"
+    >
+      <RefreshCw strokeWidth={1.5} className="w-3.5 h-3.5" />
+    </Button>
+  );
 
   const toggleTable = useCallback((tableName: string) => {
     setExpandedTables((prev) => {
@@ -80,6 +95,7 @@ export function SchemaExplorer({
           <Database strokeWidth={1.5} className="w-3.5 h-3.5 absolute inset-0 m-auto text-brand animate-pulse" />
         </div>
         <span className="text-xs font-medium animate-pulse">Scanning Schema...</span>
+        {refreshButton}
       </div>
     );
   }
@@ -99,6 +115,7 @@ export function SchemaExplorer({
         </div>
         <h3 className="text-foreground text-xs font-medium mb-1">Schema could not be read</h3>
         <p className="text-xs text-muted-foreground leading-relaxed break-words">{schemaError}</p>
+        {refreshButton}
       </div>
     );
   }
@@ -113,6 +130,7 @@ export function SchemaExplorer({
         <p className="text-xs text-muted-foreground leading-relaxed">
           We couldn&apos;t find any tables or views in this connection.
         </p>
+        {refreshButton}
         {capabilities?.supportsCreateTable !== false && (
           <button
             className="mt-3 flex items-center gap-1.5 rounded-md bg-brand-solid hover:bg-brand-solid-hover text-white px-3 py-1.5 text-xs font-medium transition-colors"
@@ -136,6 +154,7 @@ export function SchemaExplorer({
             <span className="text-xs font-medium text-muted-foreground">Explorer</span>
           </div>
           <div className="flex items-center gap-1.5">
+            {refreshButton}
             {isAdmin && (
               <button
                 className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-warning transition-colors"
diff --git a/src/components/schema-explorer/TableItem.tsx b/src/components/schema-explorer/TableItem.tsx
index 73a4da6b2..132571a36 100644
--- a/src/components/schema-explorer/TableItem.tsx
+++ b/src/components/schema-explorer/TableItem.tsx
@@ -238,6 +238,8 @@ export const TableItem = React.memo(function TableItem({
               aria-expanded={isExpanded}
               className="flex items-center gap-1.5 flex-1 min-w-0 py-1.5 cursor-pointer text-left"
               onClick={onToggle}
+              onDoubleClick={() => onTableClick?.(table.name)}
+              title={onTableClick ? "Double-click to preview data" : undefined}
             >
               <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }} className="shrink-0">
                 <ChevronRight strokeWidth={1.5} className="w-3.5 h-3.5 text-muted-foreground" />
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 9cb900235..431da6223 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -23,6 +23,7 @@ interface SidebarProps {
   onEditConnection?: (conn: DatabaseConnection) => void;
   onAddConnection: () => void;
   onTableClick?: (tableName: string) => void;
+  onRefreshSchema?: () => void;
   onGenerateSelect?: (tableName: string) => void;
   onCreateTableClick?: () => void;
   onShowDiagram?: () => void;
@@ -46,6 +47,7 @@ export function Sidebar({
   onEditConnection,
   onAddConnection,
   onTableClick,
+  onRefreshSchema,
   onGenerateSelect,
   onCreateTableClick,
   onShowDiagram,
@@ -106,6 +108,7 @@ export function Sidebar({
               isLoadingSchema={isLoadingSchema}
               schemaError={schemaError}
               onTableClick={onTableClick}
+              onRefreshSchema={onRefreshSchema}
               onGenerateSelect={onGenerateSelect}
               onCreateTableClick={onCreateTableClick}
               isAdmin={isAdmin}
diff --git a/src/components/studio/BottomPanel.tsx b/src/components/studio/BottomPanel.tsx
index e3f6410d3..78d44409f 100644
--- a/src/components/studio/BottomPanel.tsx
+++ b/src/components/studio/BottomPanel.tsx
@@ -26,6 +26,7 @@ import {
   GitCompare,
   LayoutDashboard,
   LayoutGrid,
+  RefreshCw,
   Terminal,
   X,
   Zap,
@@ -159,6 +160,7 @@ interface BottomPanelProps {
   // Actions
   onLoadQuery: (query: string) => void;
   onLoadMore: (() => void) | undefined;
+  onRefreshResults?: (query: string, tabId: string) => void;
   isLoadingMore: boolean | undefined;
   // The writer's own type, so a format added there cannot silently fail to reach this
   // menu — the drift between two spellings of one list is what this PR is about.
@@ -197,6 +199,7 @@ export function BottomPanel({
   onDiscardChanges,
   onLoadQuery,
   onLoadMore,
+  onRefreshResults,
   isLoadingMore,
   onExportResults,
   agentArtifact = null,
@@ -349,6 +352,24 @@ export function BottomPanel({
             <span className="hidden @4xl/panel:inline text-xs font-mono text-fg-muted mr-2">
               {displayedResult.rowCount} rows • {displayedResult.executionTime}ms
             </span>
+            {!hydratedHere &&
+              activeConnection &&
+              onRefreshResults &&
+              currentTab.previewQuery &&
+              currentTab.query === currentTab.previewQuery && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 text-xs text-fg-muted gap-1.5"
+                  title="Refresh rows"
+                  aria-label="Refresh rows"
+                  disabled={currentTab.isExecuting || isLoadingMore || pendingChanges.length > 0}
+                  onClick={() => onRefreshResults(currentTab.previewQuery!, currentTab.id)}
+                >
+                  <RefreshCw strokeWidth={1.5} className="w-3 h-3" />
+                  <span className="hidden @2xl/panel:inline">Refresh rows</span>
+                </Button>
+              )}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
diff --git a/src/hooks/use-tab-manager.ts b/src/hooks/use-tab-manager.ts
index 440fc16e6..2f6df097f 100644
--- a/src/hooks/use-tab-manager.ts
+++ b/src/hooks/use-tab-manager.ts
@@ -199,6 +199,7 @@ export function useTabManager({ activeConnection, metadata, schema, persistWorks
         id: newId,
         name: tableName,
         query: newQuery,
+        previewQuery: newQuery,
         result: null,
         isExecuting: false,
         type: resolveTabType(capabilities),
diff --git a/src/lib/types.ts b/src/lib/types.ts
index a81f4509c..83abcd41e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -333,6 +333,8 @@ export interface QueryTab {
   id: string;
   name: string;
   query: string;
+  /** Original generated preview query; refreshing rows must not execute edited SQL. */
+  previewQuery?: string;
   result: QueryResult | null;
   isExecuting: boolean;
   type: "sql" | "mongodb" | "redis" | "libredb";
diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index e4622fca0..20c153f31 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -281,6 +281,10 @@ export function StudioWorkspace({
     [tabMgr, queryExec.executeQuery],
   );
 
+  const onRefreshSchema = () => {
+    if (conn.activeConnection) conn.fetchSchema(conn.activeConnection);
+  };
+
   // === No-op callbacks for disabled features ===
   /** What the panel group may hold: below the breakpoint, only the body panel. */
   const isMobile = useIsMobile();
@@ -319,6 +323,7 @@ export function StudioWorkspace({
                 onEditConnection={noop}
                 onAddConnection={noop}
                 onTableClick={onTableClick}
+                onRefreshSchema={onRefreshSchema}
                 onGenerateSelect={tabMgr.handleGenerateSelect}
                 onCreateTableClick={undefined}
                 onShowDiagram={features.schemaDiagram ? () => setShowDiagram(true) : undefined}
@@ -423,6 +428,7 @@ export function StudioWorkspace({
                     <ResizableHandle className="h-1 bg-fill hover:bg-brand-tint/20" />
                     <ResizablePanel id="workspace-editor-bottom" defaultSize="60" minSize="20">
                       <BottomPanel
+                        onRefreshResults={queryExec.executeQuery}
                         mode={queryExec.bottomPanelMode}
                         onSetMode={queryExec.setBottomPanelMode}
                         currentTab={tabMgr.currentTab}
diff --git a/tests/components/Studio.test.tsx b/tests/components/Studio.test.tsx
index 3da91062c..0bf80b065 100644
--- a/tests/components/Studio.test.tsx
+++ b/tests/components/Studio.test.tsx
@@ -802,6 +802,27 @@ describe("Studio", () => {
   });
 
   // --- onTableClick ---
+  test("preview refresh callbacks use the current connection and explicit query", () => {
+    connMgrOverride = { activeConnection: pgConn };
+    render(<Studio />);
+    mockFetchSchema.mockClear();
+    act(() => (capturedSidebarProps.onRefreshSchema as () => void)());
+    expect(mockFetchSchema).toHaveBeenCalledWith(pgConn);
+    act(() => (capturedMobileNavProps.onTabChange as (tab: string) => void)("schema"));
+    mockFetchSchema.mockClear();
+    act(() => (capturedSchemaExplorerProps.onRefreshSchema as () => void)());
+    expect(mockFetchSchema).toHaveBeenCalledTimes(1);
+    expect(mockFetchSchema).toHaveBeenCalledWith(pgConn);
+    act(() => (capturedMobileNavProps.onTabChange as (tab: string) => void)("editor"));
+    act(() =>
+      (capturedBottomPanelProps.onRefreshResults as (query: string, id: string) => void)(
+        "SELECT * FROM users LIMIT 50;",
+        "tab-1",
+      ),
+    );
+    expect(mockExecuteQuery).toHaveBeenCalledWith("SELECT * FROM users LIMIT 50;", "tab-1");
+  });
+
   test("onTableClick delegates to handleTableClick with executeQuery", () => {
     render(<Studio />);
     const fn = capturedSidebarProps.onTableClick as (name: string) => void;
diff --git a/tests/components/StudioWorkspace.test.tsx b/tests/components/StudioWorkspace.test.tsx
index 187045d6e..2733aa2e0 100644
--- a/tests/components/StudioWorkspace.test.tsx
+++ b/tests/components/StudioWorkspace.test.tsx
@@ -690,6 +690,20 @@ describe("StudioWorkspace", () => {
     expect(mockHandleTableClick).toHaveBeenCalledWith("users", mockExecuteQuery);
   });
 
+  test("preview refresh callbacks use the embedded host connection and explicit query", () => {
+    renderWorkspace();
+    mockFetchSchema.mockClear();
+    act(() => (capturedSidebarProps.onRefreshSchema as () => void)());
+    expect(mockFetchSchema).toHaveBeenCalledWith(dbConn);
+    act(() =>
+      (capturedBottomPanelProps.onRefreshResults as (query: string, id: string) => void)(
+        "SELECT * FROM users LIMIT 50;",
+        "tab-1",
+      ),
+    );
+    expect(mockExecuteQuery).toHaveBeenCalledWith("SELECT * FROM users LIMIT 50;", "tab-1");
+  });
+
   test("sidebar noop callbacks and references are wired", () => {
     renderWorkspace();
     expect(capturedSidebarProps.onSelectConnection).toBe(mockSetActiveConnection);
diff --git a/tests/components/schema-explorer/SchemaExplorer.test.tsx b/tests/components/schema-explorer/SchemaExplorer.test.tsx
index ad0ef33e6..b16402436 100644
--- a/tests/components/schema-explorer/SchemaExplorer.test.tsx
+++ b/tests/components/schema-explorer/SchemaExplorer.test.tsx
@@ -30,7 +30,7 @@ mock.module("@/components/schema-explorer/TableItem", () => ({
 }));
 
 import { describe, test, expect, beforeEach, afterEach } from "bun:test";
-import { render, within, cleanup } from "@testing-library/react";
+import { render, within, cleanup, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 
@@ -94,6 +94,26 @@ function createDefaultProps(overrides: Partial<Parameters<typeof SchemaExplorer>
 }
 
 describe("SchemaExplorer", () => {
+  test("refresh schema is separate and remains available for empty or failed reads", () => {
+    const onRefreshSchema = mock(() => {});
+    const props = createDefaultProps({ onRefreshSchema });
+    const { getByRole, queryByRole, rerender } = render(<SchemaExplorer {...props} />);
+    fireEvent.click(getByRole("button", { name: "Refresh schema" }));
+    expect(onRefreshSchema).toHaveBeenCalledTimes(1);
+    expect(props.onTableClick).not.toHaveBeenCalled();
+    for (const schemaError of [null, "Schema read failed"]) {
+      rerender(<SchemaExplorer {...props} schema={[]} schemaError={schemaError} />);
+      fireEvent.click(getByRole("button", { name: "Refresh schema" }));
+    }
+    expect(onRefreshSchema).toHaveBeenCalledTimes(3);
+    rerender(<SchemaExplorer {...props} isLoadingSchema />);
+    const busy = getByRole("button", { name: "Refresh schema" });
+    expect(busy.hasAttribute("disabled")).toBe(true);
+    fireEvent.click(busy);
+    expect(onRefreshSchema).toHaveBeenCalledTimes(3);
+    rerender(<SchemaExplorer {...props} onRefreshSchema={undefined} />);
+    expect(queryByRole("button", { name: "Refresh schema" })).toBeNull();
+  });
   afterEach(() => {
     cleanup();
   });
diff --git a/tests/components/schema-explorer/TableItem.test.tsx b/tests/components/schema-explorer/TableItem.test.tsx
index 7b372e4c5..ae406fed5 100644
--- a/tests/components/schema-explorer/TableItem.test.tsx
+++ b/tests/components/schema-explorer/TableItem.test.tsx
@@ -253,6 +253,34 @@ describe("TableItem", () => {
 
   // ── Dropdown action callbacks ─────────────────────────────────────────────
 
+  test("double-click previews a table through the existing select action", () => {
+    const onTableClick = mock(() => {});
+    const onToggle = mock(() => {});
+    const { getByText } = render(
+      <TableItem
+        table={largeTable}
+        isExpanded={false}
+        onToggle={onToggle}
+        isAdmin={false}
+        onTableClick={onTableClick}
+      />,
+    );
+    const name = getByText("users");
+    fireEvent.click(name, { detail: 1 });
+    fireEvent.click(name, { detail: 2 });
+    fireEvent.doubleClick(name);
+    expect(onToggle).toHaveBeenCalledTimes(2);
+    expect(onTableClick).toHaveBeenCalledTimes(1);
+    expect(onTableClick).toHaveBeenCalledWith("users");
+  });
+
+  test("double-click remains safe when no preview callback is supplied", () => {
+    const { getByText } = render(
+      <TableItem table={largeTable} isExpanded={false} onToggle={mock(() => {})} isAdmin={false} />,
+    );
+    expect(() => fireEvent.doubleClick(getByText("users"))).not.toThrow();
+  });
+
   test('onTableClick fires with table name on "Select Top 50" click', () => {
     const onTableClick = mock((name: string) => {
       void name;
diff --git a/tests/components/sidebar/Sidebar.test.tsx b/tests/components/sidebar/Sidebar.test.tsx
index 3fea5943c..f215b0d25 100644
--- a/tests/components/sidebar/Sidebar.test.tsx
+++ b/tests/components/sidebar/Sidebar.test.tsx
@@ -23,8 +23,10 @@ mock.module("@/components/sidebar/ConnectionsList", () => ({
   },
 }));
 
+let capturedSchemaExplorerProps: Record<string, unknown> = {};
 mock.module("@/components/schema-explorer", () => ({
   SchemaExplorer: (props: Record<string, unknown>) => {
+    capturedSchemaExplorerProps = props;
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const React = require("react");
     const schema = props.schema as Array<unknown> | undefined;
@@ -115,6 +117,11 @@ function createDefaultProps(overrides: Record<string, unknown> = {}) {
 }
 
 describe("Sidebar", () => {
+  test("passes the schema refresh action to the explorer", () => {
+    const onRefreshSchema = mock(() => {});
+    render(<Sidebar {...createDefaultProps({ onRefreshSchema })} />);
+    expect(capturedSchemaExplorerProps.onRefreshSchema).toBe(onRefreshSchema);
+  });
   // The version tests mutate a process-wide value. The file happens to run alone
   // in its group today, but that isolation is incidental - restore it explicitly
   // so a later regrouping cannot turn this into an order-dependent flake.
diff --git a/tests/components/studio/BottomPanel.test.tsx b/tests/components/studio/BottomPanel.test.tsx
index 76c5aaddf..551e3cefd 100644
--- a/tests/components/studio/BottomPanel.test.tsx
+++ b/tests/components/studio/BottomPanel.test.tsx
@@ -216,6 +216,51 @@ function createDefaultProps(overrides: Partial<Record<string, unknown>> = {}) {
 }
 
 describe("BottomPanel", () => {
+  test("refresh rows re-executes only the unchanged table preview and respects pending work", () => {
+    const onRefreshResults = mock(() => {});
+    const previewTab = {
+      ...createDefaultProps().currentTab,
+      query: "SELECT * FROM users LIMIT 50;",
+      previewQuery: "SELECT * FROM users LIMIT 50;",
+      result: { rows: [{ id: 1 }], fields: ["id"], rowCount: 1, executionTime: 1 },
+    };
+    const props = createDefaultProps({ currentTab: previewTab, activeConnection: { id: "c1" }, onRefreshResults });
+    const { getByRole, queryByRole, rerender } = render(
+      <BottomPanel {...(props as React.ComponentProps<typeof BottomPanel>)} />,
+    );
+    fireEvent.click(getByRole("button", { name: "Refresh rows" }));
+    expect(onRefreshResults).toHaveBeenCalledWith(previewTab.previewQuery, previewTab.id);
+    for (const blocked of [
+      { currentTab: { ...previewTab, isExecuting: true } },
+      { isLoadingMore: true },
+      { pendingChanges: [{}] },
+    ]) {
+      rerender(<BottomPanel {...({ ...props, ...blocked } as React.ComponentProps<typeof BottomPanel>)} />);
+      const refresh = getByRole("button", { name: "Refresh rows" });
+      expect(refresh.hasAttribute("disabled")).toBe(true);
+      fireEvent.click(refresh);
+    }
+    expect(onRefreshResults).toHaveBeenCalledTimes(1);
+    for (const unavailable of [
+      { currentTab: { ...previewTab, query: "DELETE FROM users" } },
+      { currentTab: { ...previewTab, previewQuery: undefined } },
+      { activeConnection: null },
+      { onRefreshResults: undefined },
+      { mode: "history" },
+      {
+        agentArtifact: {
+          surface: "results",
+          result: previewTab.result,
+          runId: "r1",
+          operationId: "query",
+          correlationId: "c1",
+        },
+      },
+    ]) {
+      rerender(<BottomPanel {...({ ...props, ...unavailable } as React.ComponentProps<typeof BottomPanel>)} />);
+      expect(queryByRole("button", { name: "Refresh rows" })).toBeNull();
+    }
+  });
   /*
     The panel's heavy views are code-split (`React.lazy` in BottomPanel.tsx), so the
     FIRST render of each one suspends while its dynamic import resolves. `React.lazy`
diff --git a/tests/hooks/use-tab-manager.test.ts b/tests/hooks/use-tab-manager.test.ts
index e88e3162b..a1b951312 100644
--- a/tests/hooks/use-tab-manager.test.ts
+++ b/tests/hooks/use-tab-manager.test.ts
@@ -268,6 +268,8 @@ describe("useTabManager", () => {
     const newTab = result.current.tabs[1];
     expect(newTab.name).toBe("users");
     expect(newTab.query).toBe("SELECT * FROM users LIMIT 50;");
+    expect(newTab.previewQuery).toBe(newTab.query);
+    expect(result.current.tabs[0].previewQuery).toBeUndefined();
     expect(newTab.type).toBe("sql");
 
     // Active tab should be the new one

From cd6732dcc023b75c98e8c3df1996b64f8d8fc077 Mon Sep 17 00:00:00 2001
From: 2160039878-cyber <285580214+2160039878-cyber@users.noreply.github.com>
Date: Thu, 10 Sep 2026 12:02:49 +0800
Subject: [PATCH 2/2] fix(explorer): use native refresh button for platform
 styles

---
 src/components/schema-explorer/SchemaExplorer.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/schema-explorer/SchemaExplorer.tsx b/src/components/schema-explorer/SchemaExplorer.tsx
index 01b4d0faf..0d4c59288 100644
--- a/src/components/schema-explorer/SchemaExplorer.tsx
+++ b/src/components/schema-explorer/SchemaExplorer.tsx
@@ -4,7 +4,6 @@ import React, { useState, useMemo, useCallback } from "react";
 import { TableSchema } from "@/lib/types";
 import type { ProviderMetadata } from "@/hooks/use-provider-metadata";
 import { Search, Hash, LoaderCircle, CircleAlert, Database, Plus, Settings, RefreshCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { AnimatePresence } from "framer-motion";
 import { TableItem } from "./TableItem";
@@ -51,17 +50,16 @@ export function SchemaExplorer({
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedTables, setExpandedTables] = useState<Set<string>>(new Set());
   const refreshButton = onRefreshSchema && (
-    <Button
-      variant="ghost"
-      size="icon"
-      className="h-6 w-6 text-muted-foreground"
+    <button
+      type="button"
+      className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-brand transition-colors disabled:pointer-events-none disabled:opacity-50"
       onClick={onRefreshSchema}
       disabled={isLoadingSchema}
       title="Refresh schema"
       aria-label="Refresh schema"
     >
       <RefreshCw strokeWidth={1.5} className="w-3.5 h-3.5" />
-    </Button>
+    </button>
   );
 
   const toggleTable = useCallback((tableName: string) => {