diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f46eff..1bd9e5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 All notable changes to Simple DB are documented in this file.
 
-## Unreleased
+## 0.1.2 - 2026-08-08
 
 ### Added
 
@@ -10,11 +10,17 @@ All notable changes to Simple DB are documented in this file.
 - Automatic migration of existing 0.1.1 connection profiles to JSON files.
 - `Open Connection JSON`, `Set Password`, and `Open Connections Folder` actions.
 - A native `Simple DB` editor context submenu containing the six main database actions.
+- A resizable `Simple DB` Results view in the lower VS Code Panel, with a SQL Developer-style data grid and row numbers.
 
 ### Changed
 
 - Simplified connection creation: choose the engine and name, optionally enter a secure network password, then edit all non-secret connection parameters together in JSON.
 - Passwords remain in VS Code `SecretStorage` and are explicitly rejected from connection JSON files.
+- Query results now open below the SQL editor instead of in a separate editor tab, keeping the SQL document visible while results are inspected.
+
+### Fixed
+
+- Fixed the Results webview script error that could leave successful `SELECT` queries stuck on `Loading results…`.
 
 ## 0.1.1 - 2026-08-07
 
diff --git a/README.md b/README.md
index 85fc5a3..d759412 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Simple DB
 
-Simple DB `0.1.1` is a Visual Studio Code extension written entirely in JavaScript for working with **SQLite, PostgreSQL, MySQL, SQL Server, and Oracle** through a single interface.
+Simple DB `0.1.2` is a Visual Studio Code extension written entirely in JavaScript for working with **SQLite, PostgreSQL, MySQL, SQL Server, and Oracle** through a single interface.
 
 The extension opens regular VS Code SQL documents. `F5` launches `src/extension.js` directly: there is no TypeScript, `tsconfig.json`, `dist` folder, or compilation step.
 
@@ -17,11 +17,19 @@ The extension opens regular VS Code SQL documents. `F5` launches `src/extension.
 - Generate `CREATE`, `ALTER`, and `DROP` scripts from the explorer and inspect object definitions/DDL.
 - Use explicit per-editor transactions with `BEGIN`, `COMMIT`, and `ROLLBACK`.
 - Cancel queries and configure query timeouts per connection.
-- View results with multiple result sets, types, `NULL`, affected rows, duration, and cell/row/selection copy actions.
+- View results below the SQL editor in a resizable SQL Developer-style grid with row numbers, multiple result sets, types, `NULL`, affected rows, duration, and cell/row/selection copy actions.
 - Preserve 64-bit integers and high-precision `NUMBER` values exactly before displaying or exporting them.
 - Export already-retrieved results to CSV, JSON, or XLSX without executing the SQL again.
 - Use configurable local query history with reopen, copy, and rerun actions.
 
+## Quick start
+
+1. Open **Simple DB** in the Activity Bar and choose **Create Connection**.
+2. Select the database engine and enter a connection name. SQLite uses the native file picker; network databases create a JSON profile with the correct default parameters.
+3. Edit the generated JSON if needed, press `Ctrl+S`, then use **Test Connection** or **Connect** from the connection menu. Passwords stay outside JSON in VS Code `SecretStorage`.
+4. Choose **New Query**, write SQL, and press `Ctrl+Enter` to execute the selection or the statement at the cursor. Use `Ctrl+Shift+Enter` to execute the entire document.
+5. Results appear automatically in the resizable **Simple DB — Results** panel below the SQL editor. The same core commands are also available from the editor's **Simple DB** context submenu.
+
 ## Five database engines
 
 | Engine | Driver | Notable dialect and explorer support |
@@ -32,7 +40,7 @@ The extension opens regular VS Code SQL documents. `F5` launches `src/extension.
 | SQL Server | `mssql` | databases, schemas, tables, views, procedures/functions, indexes, triggers, sequences, types, synonyms, `GO` |
 | Oracle | `oracledb` Thin | schemas, tables, views/materialized views, procedures/functions, packages, indexes, triggers, sequences, types, synonyms, PL/SQL |
 
-Oracle uses the default `node-oracledb` Thin mode, so normal connections do not require Oracle Client to be installed. Simple DB `0.1.1` uses SQL authentication with a username and password for SQL Server.
+Oracle uses the default `node-oracledb` Thin mode, so normal connections do not require Oracle Client to be installed. Simple DB `0.1.2` uses SQL authentication with a username and password for SQL Server.
 
 ## No imposed row limit by default
 
@@ -79,7 +87,9 @@ Each SQL editor has an independent session identifier. A transaction reserves it
 
 ## Results, copy, and export
 
-The result panel supports page navigation, switching between multiple result sets, distinguishing `NULL`, selecting a cell or a range with `Shift`, and copying a cell, row, or selection.
+Executing SQL automatically reveals the **Simple DB** view in VS Code's lower Panel while keeping the SQL editor visible above it. `SELECT` results are displayed in a spreadsheet-like grid with a sticky header, row numbers, horizontal/vertical scrolling, page navigation, and tabs for multiple result sets.
+
+The result grid distinguishes `NULL`, shows column types, supports selecting a cell or a range with `Shift`, and can copy a cell, row, or selection. Non-query statements display their execution message and affected-row information in the same lower Results view.
 
 CSV, JSON, and XLSX are streamed from the retrieved temporary result pages. The query is not executed again. Very large cell values are bounded for display by `simpleDb.maxCellCharacters`; the UI explicitly indicates when a cell has been truncated for display.
 
@@ -201,7 +211,7 @@ src/
   storage/       # profiles, history, and paged results
   test/          # JavaScript tests
   ui/            # connection form
-  views/         # trees and result panel
+  views/         # trees and lower result grid
   extension.js   # activate/deactivate
 ```
 
diff --git a/package-lock.json b/package-lock.json
index da3a75f..75d0df6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-db-suzdalenko",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-db-suzdalenko",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "MIT",
       "dependencies": {
         "exceljs": "4.4.0",
diff --git a/package.json b/package.json
index 541fb0e..987114e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "simple-db-suzdalenko",
   "displayName": "Simple DB - SQL Client for SQLite, MySQL, PostgreSQL, SQL Server & Oracle",
   "description": "SQL client and database editor for SQLite, MySQL, PostgreSQL, SQL Server (MSSQL) and Oracle. Browse database objects, run queries, manage DDL and export results.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "publisher": "suzdalenko-dev",
   "license": "MIT",
   "icon": "resources/simple-db-marketplace.png",
@@ -56,6 +56,7 @@
   "activationEvents": [
     "onView:simpleDb.connections",
     "onView:simpleDb.history",
+    "onView:simpleDb.results",
     "onLanguage:sql"
   ],
   "main": "./src/extension.js",
@@ -246,6 +247,13 @@
           "title": "Simple DB",
           "icon": "resources/simple-db.svg"
         }
+      ],
+      "panel": [
+        {
+          "id": "simpleDbResults",
+          "title": "Simple DB",
+          "icon": "resources/simple-db.svg"
+        }
       ]
     },
     "views": {
@@ -260,6 +268,14 @@
           "name": "History",
           "type": "tree"
         }
+      ],
+      "simpleDbResults": [
+        {
+          "id": "simpleDb.results",
+          "name": "Results",
+          "type": "webview",
+          "contextualTitle": "Simple DB Results"
+        }
       ]
     },
     "menus": {
diff --git a/src/core/valueNormalizer.js b/src/core/valueNormalizer.js
index d082194..e9ed77b 100644
--- a/src/core/valueNormalizer.js
+++ b/src/core/valueNormalizer.js
@@ -6,7 +6,7 @@ function truncateText(value, maxCharacters) {
   }
 
   const removed = value.length - maxCharacters;
-  return `${value.slice(0, maxCharacters)}… [${removed} caracteres omitidos]`;
+  return `${value.slice(0, maxCharacters)}… [${removed} characters omitted]`;
 }
 
 function normalizeValue(value, maxCharacters = 10000) {
diff --git a/src/extension.js b/src/extension.js
index 5557804..8475c2e 100644
--- a/src/extension.js
+++ b/src/extension.js
@@ -19,7 +19,7 @@ const { ResultStore } = require('./storage/resultStore');
 const { promptConnection, promptPassword } = require('./ui/connectionForm');
 const { ConnectionsTreeProvider } = require('./views/connectionsTreeProvider');
 const { HistoryTreeProvider } = require('./views/historyTreeProvider');
-const { ResultPanel } = require('./views/resultPanel');
+const { RESULT_VIEW_ID, ResultPanel } = require('./views/resultPanel');
 const { getDatabaseEngine } = require('./databaseEngines');
 
 let runtime = null;
@@ -150,6 +150,11 @@ async function activate(context) {
   await resultStore.initialize();
   const exportService = new ExportService(resultStore, exportConfiguration);
   const resultPanel = new ResultPanel(resultStore, exportService);
+  const resultViewRegistration = vscode.window.registerWebviewViewProvider(
+    RESULT_VIEW_ID,
+    resultPanel,
+    { webviewOptions: { retainContextWhenHidden: true } },
+  );
   const queryRunner = new QueryRunner({
     connectionStore,
     connectionManager,
@@ -174,6 +179,7 @@ async function activate(context) {
   context.subscriptions.push(
     connectionsView,
     historyView,
+    resultViewRegistration,
     connectionsProvider,
     historyProvider,
     editorSessionManager,
diff --git a/src/test/resultStore.test.js b/src/test/resultStore.test.js
index 807c32f..8ce9d05 100644
--- a/src/test/resultStore.test.js
+++ b/src/test/resultStore.test.js
@@ -55,6 +55,6 @@ describe('ResultStore', () => {
     await store.finishSet('exec-2', 0);
     const metadata = await store.finalizeExecution('exec-2');
     expect(metadata.sets[0].pages).toBe(2);
-    expect((await store.getPage('exec-2', 0, 0))[0][0]).toContain('omitidos');
+    expect((await store.getPage('exec-2', 0, 0))[0][0]).toContain('characters omitted');
   });
 });
diff --git a/src/test/resultViewHtml.test.js b/src/test/resultViewHtml.test.js
new file mode 100644
index 0000000..c074702
--- /dev/null
+++ b/src/test/resultViewHtml.test.js
@@ -0,0 +1,152 @@
+'use strict';
+
+const vm = require('node:vm');
+const packageJson = require('../../package.json');
+const { createResultViewHtml } = require('../views/resultViewHtml');
+
+describe('lower Results view', () => {
+  it('generates valid JavaScript for the SQL result grid', () => {
+    const html = createResultViewHtml('test-nonce');
+    const match = html.match(
+      /<script nonce="test-nonce">([\s\S]*?)<\/script>/,
+    );
+
+    expect(match).not.toBeNull();
+    expect(() => new vm.Script(match[1])).not.toThrow();
+    expect(match[1]).toContain("lines.join('\\n')");
+    expect(html).toContain("numberCell.className = 'row-number'");
+  });
+
+  it('contributes Results as a webview in the VS Code Panel', () => {
+    const panel = packageJson.contributes.viewsContainers.panel;
+    const views = packageJson.contributes.views.simpleDbResults;
+
+    expect(packageJson.version).toBe('0.1.2');
+    expect(panel).toContainEqual(
+      expect.objectContaining({ id: 'simpleDbResults', title: 'Simple DB' }),
+    );
+    expect(views).toContainEqual(
+      expect.objectContaining({ id: 'simpleDb.results', type: 'webview' }),
+    );
+  });
+
+  it('renders SELECT metadata and returned rows in the lower grid', () => {
+    class FakeElement {
+      constructor(tagName = 'div') {
+        this.tagName = tagName.toUpperCase();
+        this.children = [];
+        this.dataset = {};
+        this.listeners = {};
+        this.className = '';
+        this.textContent = '';
+        this.hidden = false;
+        this.disabled = false;
+        this.value = '';
+        this.max = '';
+        this.classList = { toggle: () => {} };
+      }
+
+      appendChild(child) {
+        this.children.push(child);
+        return child;
+      }
+
+      replaceChildren(...children) {
+        this.children = children;
+      }
+
+      addEventListener(type, listener) {
+        this.listeners[type] = listener;
+      }
+
+      querySelectorAll() {
+        return [];
+      }
+    }
+
+    const elements = new Map();
+    const document = {
+      getElementById(id) {
+        if (!elements.has(id)) elements.set(id, new FakeElement());
+        return elements.get(id);
+      },
+      createElement(tagName) {
+        return new FakeElement(tagName);
+      },
+      querySelectorAll() {
+        return [];
+      },
+    };
+    const windowListeners = {};
+    const window = {
+      addEventListener(type, listener) {
+        windowListeners[type] = listener;
+      },
+    };
+    const posted = [];
+    const html = createResultViewHtml('render-test');
+    const scriptSource = html.match(
+      /<script nonce="render-test">([\s\S]*?)<\/script>/,
+    )[1];
+    const script = new vm.Script(scriptSource);
+
+    script.runInNewContext({
+      acquireVsCodeApi: () => ({ postMessage: (message) => posted.push(message) }),
+      document,
+      window,
+    });
+
+    expect(posted).toContainEqual({ type: 'ready' });
+    windowListeners.message({
+      data: {
+        type: 'metadata',
+        metadata: {
+          connectionName: 'Local SQLite',
+          totalRows: 1,
+          affectedRows: 0,
+          durationMs: 5,
+          status: 'success',
+          sets: [
+            {
+              kind: 'rows',
+              rowCount: 1,
+              pages: 1,
+              columns: [
+                { name: 'id', type: 'INTEGER' },
+                { name: 'name', type: 'TEXT' },
+              ],
+            },
+          ],
+        },
+      },
+    });
+
+    expect(posted).toContainEqual({ type: 'page', setIndex: 0, pageIndex: 0 });
+    windowListeners.message({
+      data: {
+        type: 'pageData',
+        setIndex: 0,
+        pageIndex: 0,
+        rowOffset: 0,
+        rows: [[1, 'Ada']],
+      },
+    });
+
+    const grid = elements.get('grid');
+    const allNodes = [];
+    const collect = (node) => {
+      allNodes.push(node);
+      node.children.forEach(collect);
+    };
+    grid.children.forEach(collect);
+    expect(allNodes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ className: 'row-number', textContent: '1' }),
+        expect.objectContaining({ tagName: 'TD', textContent: 'Ada' }),
+      ]),
+    );
+    expect(elements.get('summary').textContent).toBe(
+      'Local SQLite · 1 row · 5 ms',
+    );
+  });
+});
diff --git a/src/test/valueNormalizer.test.js b/src/test/valueNormalizer.test.js
index 9705e9b..3bce1b6 100644
--- a/src/test/valueNormalizer.test.js
+++ b/src/test/valueNormalizer.test.js
@@ -21,7 +21,7 @@ describe('valueNormalizer', () => {
       5,
     );
     expect(rows).toHaveLength(2);
-    expect(rows[0][0]).toContain('omitidos');
+    expect(rows[0][0]).toContain('characters omitted');
   });
 
   it('generates a safe display value for binary data', () => {
diff --git a/src/views/resultPanel.js b/src/views/resultPanel.js
index 599338b..7f7a765 100644
--- a/src/views/resultPanel.js
+++ b/src/views/resultPanel.js
@@ -2,6 +2,9 @@
 
 const { randomBytes } = require('node:crypto');
 const vscode = require('vscode');
+const { createResultViewHtml } = require('./resultViewHtml');
+
+const RESULT_VIEW_ID = 'simpleDb.results';
 
 function nonce() {
   return randomBytes(18).toString('base64');
@@ -11,44 +14,56 @@ class ResultPanel {
   constructor(resultStore, exportService) {
     this.resultStore = resultStore;
     this.exportService = exportService;
-    this.panel = null;
+    this.view = null;
     this.executionId = null;
-    this.messageDisposable = null;
-    this.panelDisposable = null;
+    this.viewDisposables = [];
+  }
+
+  resolveWebviewView(webviewView) {
+    this._disposeViewBindings();
+    this.view = webviewView;
+    webviewView.webview.options = { enableScripts: true };
+    webviewView.webview.html = createResultViewHtml(nonce());
+
+    const messageDisposable = webviewView.webview.onDidReceiveMessage((message) =>
+      this._handleMessage(message),
+    );
+    const visibilityDisposable = webviewView.onDidChangeVisibility(() => {
+      if (webviewView.visible && this.executionId) {
+        this._sendMetadata().catch(() => {});
+      }
+    });
+    const disposeDisposable = webviewView.onDidDispose(() => {
+      if (this.view === webviewView) this.view = null;
+    });
+    this.viewDisposables = [
+      messageDisposable,
+      visibilityDisposable,
+      disposeDisposable,
+    ];
   }
 
   async show(executionId) {
     const previousExecutionId = this.executionId;
     this.executionId = executionId;
 
-    if (!this.panel) {
-      this.panel = vscode.window.createWebviewPanel(
-        'simpleDb.results',
-        'Simple DB — Results',
-        vscode.ViewColumn.Beside,
-        { enableScripts: true, retainContextWhenHidden: true },
-      );
-      this.messageDisposable = this.panel.webview.onDidReceiveMessage((message) =>
-        this._handleMessage(message),
-      );
-      this.panelDisposable = this.panel.onDidDispose(() => {
-        this.messageDisposable?.dispose();
-        this.messageDisposable = null;
-        this.panelDisposable = null;
-        this.panel = null;
-      });
+    if (this.view) {
+      this.view.show(true);
     } else {
-      this.panel.reveal(vscode.ViewColumn.Beside, true);
+      await vscode.commands.executeCommand(`${RESULT_VIEW_ID}.focus`, {
+        preserveFocus: true,
+      });
+      this.view?.show(true);
     }
 
-    this.panel.webview.html = this._html(this.panel.webview, executionId);
+    await this._sendMetadata();
     if (previousExecutionId && previousExecutionId !== executionId) {
       await this.resultStore.deleteExecution(previousExecutionId).catch(() => {});
     }
   }
 
   async _handleMessage(message) {
-    if (!this.panel || !this.executionId) return;
+    if (!this.view || !this.executionId) return;
     try {
       if (message.type === 'ready') {
         await this._sendMetadata();
@@ -89,181 +104,39 @@ class ResultPanel {
 
   async _sendMetadata() {
     const metadata = this.resultStore.getMetadata(this.executionId);
-    if (!metadata || !this.panel) return;
-    await this.panel.webview.postMessage({ type: 'metadata', metadata });
+    if (!metadata || !this.view) return;
+    await this.view.webview.postMessage({ type: 'metadata', metadata });
   }
 
   async _sendPage(setIndex, requestedPage) {
     const metadata = this.resultStore.getMetadata(this.executionId);
     const set = metadata?.sets?.[setIndex];
-    if (!set || !this.panel) return;
+    if (!set || !this.view) return;
     const maximum = Math.max(0, set.pages - 1);
     const pageIndex = Math.min(maximum, Math.max(0, requestedPage || 0));
     const rows = await this.resultStore.getPage(this.executionId, setIndex, pageIndex);
-    await this.panel.webview.postMessage({
+    await this.view.webview.postMessage({
       type: 'pageData',
       setIndex,
       pageIndex,
+      rowOffset: pageIndex * this.resultStore.pageSize,
       rows,
     });
   }
 
-  _html(webview, executionId) {
-    const n = nonce();
-    return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'nonce-${n}'; script-src 'nonce-${n}';">
-  <style nonce="${n}">
-    :root { color-scheme: light dark; }
-    body { padding: 0; margin: 0; font-family: var(--vscode-font-family); color: var(--vscode-foreground); background: var(--vscode-editor-background); }
-    header { padding: 10px 14px; border-bottom: 1px solid var(--vscode-panel-border); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
-    #summary { color: var(--vscode-descriptionForeground); }
-    #tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
-    button { color: var(--vscode-button-foreground); background: var(--vscode-button-background); border: 0; padding: 5px 9px; cursor: pointer; }
-    button:hover { background: var(--vscode-button-hoverBackground); }
-    button.secondary, .tab { color: var(--vscode-foreground); background: var(--vscode-button-secondaryBackground); }
-    .tab.active { outline: 2px solid var(--vscode-focusBorder); }
-    button:disabled { opacity: .45; cursor: default; }
-    #toolbar { padding: 8px 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--vscode-panel-border); }
-    #status { margin-left: auto; color: var(--vscode-descriptionForeground); }
-    #grid { overflow: auto; height: calc(100vh - 124px); }
-    table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-family: var(--vscode-editor-font-family); font-size: var(--vscode-editor-font-size); }
-    th, td { border-right: 1px solid var(--vscode-panel-border); border-bottom: 1px solid var(--vscode-panel-border); padding: 4px 8px; text-align: left; white-space: pre; max-width: 700px; overflow: hidden; text-overflow: ellipsis; }
-    th { position: sticky; top: 0; z-index: 1; background: var(--vscode-editorGroupHeader-tabsBackground); }
-    td.null { color: var(--vscode-descriptionForeground); font-style: italic; }
-    td.selected { outline: 2px solid var(--vscode-focusBorder); outline-offset: -2px; background: var(--vscode-list-activeSelectionBackground); color: var(--vscode-list-activeSelectionForeground); }
-    .message { padding: 18px; white-space: pre-wrap; }
-    .error { color: var(--vscode-errorForeground); }
-    input { width: 70px; color: var(--vscode-input-foreground); background: var(--vscode-input-background); border: 1px solid var(--vscode-input-border, transparent); padding: 4px; }
-  </style>
-</head>
-<body>
-  <header><strong>Simple DB</strong><span id="summary">Loading…</span></header>
-  <div id="tabs"></div>
-  <div id="toolbar" hidden>
-    <button id="prev" class="secondary">← Previous</button>
-    <span>Page</span><input id="page" type="number" min="1" value="1"><span id="pages"></span>
-    <button id="next" class="secondary">Next →</button>
-    <button id="copyCell" class="secondary">Copy Cell</button><button id="copyRow" class="secondary">Copy Row</button><button id="copySelection" class="secondary">Copy Selection</button>
-    <button data-export="csv">CSV</button><button data-export="json">JSON</button><button data-export="xlsx">XLSX</button>
-    <span id="status"></span>
-  </div>
-  <div id="grid"><div class="message">Loading results…</div></div>
-  <script nonce="${n}">
-    const vscode = acquireVsCodeApi();
-    const executionId = ${JSON.stringify(executionId)};
-    let metadata = null;
-    let activeSet = 0;
-    let activePage = 0;
-    let visibleRows = [];
-    let anchorCell = null;
-    let selection = null;
-    const tabs = document.getElementById('tabs');
-    const toolbar = document.getElementById('toolbar');
-    const grid = document.getElementById('grid');
-    const pageInput = document.getElementById('page');
-    const pages = document.getElementById('pages');
-    const status = document.getElementById('status');
-    const prev = document.getElementById('prev');
-    const next = document.getElementById('next');
-
-    function currentSet() { return metadata?.sets?.[activeSet]; }
-    function requestPage(pageIndex) { vscode.postMessage({ type: 'page', setIndex: activeSet, pageIndex }); }
-    function selectSet(index) {
-      activeSet = index;
-      activePage = 0;
-      renderTabs();
-      const set = currentSet();
-      if (!set) return;
-      if (set.kind === 'rows') { toolbar.hidden = false; requestPage(0); }
-      else { toolbar.hidden = true; grid.replaceChildren(messageNode(set.message || 'Statement executed.', set.kind === 'error')); }
-    }
-    function messageNode(text, error) {
-      const div = document.createElement('div'); div.className = 'message' + (error ? ' error' : ''); div.textContent = text; return div;
-    }
-    function selectRange(rowStart, rowEnd, columnStart, columnEnd) {
-      selection = {
-        rowStart: Math.min(rowStart, rowEnd), rowEnd: Math.max(rowStart, rowEnd),
-        columnStart: Math.min(columnStart, columnEnd), columnEnd: Math.max(columnStart, columnEnd)
-      };
-      grid.querySelectorAll('td[data-row]').forEach((cell) => {
-        const row = Number(cell.dataset.row); const column = Number(cell.dataset.column);
-        cell.classList.toggle('selected', row >= selection.rowStart && row <= selection.rowEnd && column >= selection.columnStart && column <= selection.columnEnd);
-      });
-    }
-    function cellText(value) { return value === null || value === undefined ? 'NULL' : String(value); }
-    function copyRange(range) {
-      if (!range) return;
-      const lines = [];
-      for (let row = range.rowStart; row <= range.rowEnd; row += 1) {
-        const values = [];
-        for (let column = range.columnStart; column <= range.columnEnd; column += 1) values.push(cellText(visibleRows[row]?.[column]));
-        lines.push(values.join('\t'));
-      }
-      vscode.postMessage({ type: 'copy', text: lines.join('\n') });
-    }
-    function renderTabs() {
-      tabs.replaceChildren();
-      (metadata?.sets || []).forEach((set, index) => {
-        if (!set) return;
-        const button = document.createElement('button');
-        button.className = 'tab' + (index === activeSet ? ' active' : '');
-        button.textContent = set.kind === 'rows' ? 'Result ' + (index + 1) + ' (' + set.rowCount + ')' : 'Message ' + (index + 1);
-        button.addEventListener('click', () => selectSet(index)); tabs.appendChild(button);
-      });
-    }
-    function renderPage(data) {
-      if (data.setIndex !== activeSet) return;
-      activePage = data.pageIndex;
-      visibleRows = data.rows;
-      anchorCell = null;
-      selection = null;
-      const set = currentSet(); if (!set) return;
-      const table = document.createElement('table');
-      const head = document.createElement('thead'); const headerRow = document.createElement('tr');
-      set.columns.forEach((column) => { const th = document.createElement('th'); th.textContent = column.name + (column.type ? '  ·  ' + column.type : ''); headerRow.appendChild(th); });
-      head.appendChild(headerRow); table.appendChild(head);
-      const body = document.createElement('tbody');
-      data.rows.forEach((row, rowIndex) => { const tr = document.createElement('tr'); row.forEach((value, columnIndex) => { const td = document.createElement('td'); td.dataset.row = String(rowIndex); td.dataset.column = String(columnIndex); if (value === null) { td.textContent = 'NULL'; td.className = 'null'; } else td.textContent = String(value); td.title = value === null ? 'NULL' : String(value); td.addEventListener('click', (event) => { if (event.shiftKey && anchorCell) selectRange(anchorCell.row, rowIndex, anchorCell.column, columnIndex); else { anchorCell = { row: rowIndex, column: columnIndex }; selectRange(rowIndex, rowIndex, columnIndex, columnIndex); } }); tr.appendChild(td); }); body.appendChild(tr); });
-      table.appendChild(body); grid.replaceChildren(table);
-      const pageCount = Math.max(1, set.pages); pageInput.value = String(activePage + 1); pageInput.max = String(pageCount); pages.textContent = 'of ' + pageCount;
-      prev.disabled = activePage <= 0; next.disabled = activePage >= pageCount - 1;
-      status.textContent = set.rowCount + ' rows' + (set.truncated ? ' · configured limit reached' : '');
-    }
-    function renderMetadata(value) {
-      metadata = value;
-      document.getElementById('summary').textContent = (value.connectionName || '') + ' · ' + (value.database || '') + ' · ' + (value.totalRows || 0) + ' rows' + (value.affectedRows ? ' · ' + value.affectedRows + ' affected' : '') + ' · ' + value.durationMs + ' ms · ' + value.status;
-      renderTabs();
-      const firstRows = value.sets.findIndex((set) => set?.kind === 'rows');
-      const first = firstRows >= 0 ? firstRows : value.sets.findIndex(Boolean);
-      if (first >= 0) selectSet(first); else { toolbar.hidden = true; grid.replaceChildren(messageNode('No results.', false)); }
-    }
-    window.addEventListener('message', (event) => { const message = event.data; if (message.type === 'metadata') renderMetadata(message.metadata); else if (message.type === 'pageData') renderPage(message); });
-    prev.addEventListener('click', () => requestPage(activePage - 1)); next.addEventListener('click', () => requestPage(activePage + 1));
-    pageInput.addEventListener('change', () => requestPage(Number(pageInput.value) - 1));
-    document.getElementById('copyCell').addEventListener('click', () => { if (anchorCell) copyRange({ rowStart: anchorCell.row, rowEnd: anchorCell.row, columnStart: anchorCell.column, columnEnd: anchorCell.column }); });
-    document.getElementById('copyRow').addEventListener('click', () => { const set = currentSet(); if (anchorCell && set?.columns?.length) copyRange({ rowStart: anchorCell.row, rowEnd: anchorCell.row, columnStart: 0, columnEnd: set.columns.length - 1 }); });
-    document.getElementById('copySelection').addEventListener('click', () => copyRange(selection));
-    document.querySelectorAll('[data-export]').forEach((button) => button.addEventListener('click', () => vscode.postMessage({ type: 'export', setIndex: activeSet, format: button.dataset.export })));
-    vscode.postMessage({ type: 'ready', executionId });
-  </script>
-</body>
-</html>`;
+  _disposeViewBindings() {
+    for (const disposable of this.viewDisposables) disposable.dispose();
+    this.viewDisposables = [];
   }
 
   dispose() {
-    this.messageDisposable?.dispose();
-    this.panelDisposable?.dispose();
-    this.panel?.dispose();
-    this.messageDisposable = null;
-    this.panelDisposable = null;
-    this.panel = null;
+    this._disposeViewBindings();
+    this.view = null;
+    this.executionId = null;
   }
 }
 
 module.exports = {
+  RESULT_VIEW_ID,
   ResultPanel,
 };
diff --git a/src/views/resultViewHtml.js b/src/views/resultViewHtml.js
new file mode 100644
index 0000000..f9df6f7
--- /dev/null
+++ b/src/views/resultViewHtml.js
@@ -0,0 +1,396 @@
+'use strict';
+
+function createResultViewHtml(nonce) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'nonce-${nonce}'; script-src 'nonce-${nonce}';">
+  <style nonce="${nonce}">
+    :root { color-scheme: light dark; }
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; }
+    body {
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      font-family: var(--vscode-font-family);
+      color: var(--vscode-foreground);
+      background: var(--vscode-editor-background);
+    }
+    #summaryBar {
+      min-height: 30px;
+      padding: 5px 10px;
+      border-bottom: 1px solid var(--vscode-panel-border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      background: var(--vscode-editorGroupHeader-tabsBackground);
+    }
+    #summary { color: var(--vscode-descriptionForeground); }
+    #tabs {
+      min-height: 30px;
+      display: flex;
+      align-items: end;
+      gap: 2px;
+      padding: 4px 8px 0;
+      overflow-x: auto;
+      border-bottom: 1px solid var(--vscode-panel-border);
+      background: var(--vscode-editorGroupHeader-tabsBackground);
+    }
+    button {
+      height: 24px;
+      padding: 2px 8px;
+      border: 1px solid transparent;
+      border-radius: 2px;
+      color: var(--vscode-button-foreground);
+      background: var(--vscode-button-background);
+      cursor: pointer;
+      font-family: var(--vscode-font-family);
+    }
+    button:hover { background: var(--vscode-button-hoverBackground); }
+    button.secondary, .tab {
+      color: var(--vscode-foreground);
+      background: var(--vscode-button-secondaryBackground);
+    }
+    .tab {
+      min-width: 88px;
+      border-radius: 2px 2px 0 0;
+      border-bottom: 2px solid transparent;
+      white-space: nowrap;
+    }
+    .tab.active {
+      border-bottom-color: var(--vscode-focusBorder);
+      background: var(--vscode-editor-background);
+    }
+    button:disabled { opacity: .45; cursor: default; }
+    #toolbar {
+      min-height: 34px;
+      padding: 5px 8px;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      flex-wrap: wrap;
+      border-bottom: 1px solid var(--vscode-panel-border);
+      background: var(--vscode-editor-background);
+    }
+    #toolbar[hidden] { display: none; }
+    .page-controls { display: flex; gap: 4px; align-items: center; }
+    #page {
+      width: 58px;
+      height: 24px;
+      padding: 2px 5px;
+      color: var(--vscode-input-foreground);
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
+    }
+    #status {
+      margin-left: auto;
+      color: var(--vscode-descriptionForeground);
+      white-space: nowrap;
+    }
+    #grid {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      background: var(--vscode-editor-background);
+    }
+    table {
+      border-collapse: separate;
+      border-spacing: 0;
+      width: max-content;
+      min-width: 100%;
+      font-family: var(--vscode-editor-font-family);
+      font-size: var(--vscode-editor-font-size);
+    }
+    th, td {
+      height: 25px;
+      padding: 3px 8px;
+      border-right: 1px solid var(--vscode-panel-border);
+      border-bottom: 1px solid var(--vscode-panel-border);
+      text-align: left;
+      white-space: pre;
+      max-width: 700px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      font-weight: 600;
+      background: var(--vscode-editorGroupHeader-tabsBackground);
+    }
+    .row-number {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      min-width: 48px;
+      width: 48px;
+      max-width: 78px;
+      text-align: right;
+      color: var(--vscode-editorLineNumber-foreground);
+      background: var(--vscode-editorGutter-background, var(--vscode-editor-background));
+      user-select: none;
+    }
+    th.row-number { z-index: 3; }
+    tbody tr:hover td:not(.selected) { background: var(--vscode-list-hoverBackground); }
+    td.null { color: var(--vscode-descriptionForeground); font-style: italic; }
+    td.selected {
+      outline: 1px solid var(--vscode-focusBorder);
+      outline-offset: -1px;
+      background: var(--vscode-list-activeSelectionBackground);
+      color: var(--vscode-list-activeSelectionForeground);
+    }
+    .column-type {
+      margin-left: 8px;
+      color: var(--vscode-descriptionForeground);
+      font-size: .9em;
+      font-weight: 400;
+    }
+    .message { padding: 16px; white-space: pre-wrap; color: var(--vscode-descriptionForeground); }
+    .error { color: var(--vscode-errorForeground); }
+  </style>
+</head>
+<body>
+  <div id="summaryBar"><strong>Query Results</strong><span id="summary">Run a query to see results.</span></div>
+  <div id="tabs"></div>
+  <div id="toolbar" hidden>
+    <div class="page-controls">
+      <button id="prev" class="secondary" title="Previous page">&#8592;</button>
+      <span>Page</span><input id="page" type="number" min="1" value="1"><span id="pages"></span>
+      <button id="next" class="secondary" title="Next page">&#8594;</button>
+    </div>
+    <button id="copyCell" class="secondary">Copy Cell</button>
+    <button id="copyRow" class="secondary">Copy Row</button>
+    <button id="copySelection" class="secondary">Copy Selection</button>
+    <button data-export="csv">CSV</button>
+    <button data-export="json">JSON</button>
+    <button data-export="xlsx">XLSX</button>
+    <span id="status"></span>
+  </div>
+  <div id="grid"><div class="message">Run SELECT or another SQL statement to see its result here.</div></div>
+  <script nonce="${nonce}">
+    const vscode = acquireVsCodeApi();
+    let metadata = null;
+    let activeSet = 0;
+    let activePage = 0;
+    let visibleRows = [];
+    let rowOffset = 0;
+    let anchorCell = null;
+    let selection = null;
+    const tabs = document.getElementById('tabs');
+    const toolbar = document.getElementById('toolbar');
+    const grid = document.getElementById('grid');
+    const pageInput = document.getElementById('page');
+    const pages = document.getElementById('pages');
+    const status = document.getElementById('status');
+    const prev = document.getElementById('prev');
+    const next = document.getElementById('next');
+
+    function sets() { return Array.isArray(metadata?.sets) ? metadata.sets : []; }
+    function currentSet() { return sets()[activeSet]; }
+    function rowLabel(count) { return count === 1 ? '1 row' : String(count) + ' rows'; }
+    function messageNode(text, error) {
+      const div = document.createElement('div');
+      div.className = 'message' + (error ? ' error' : '');
+      div.textContent = text;
+      return div;
+    }
+    function requestPage(pageIndex) {
+      const set = currentSet();
+      if (!set) return;
+      const maximum = Math.max(0, Number(set.pages || 0) - 1);
+      const requested = Math.min(maximum, Math.max(0, Number(pageIndex) || 0));
+      vscode.postMessage({ type: 'page', setIndex: activeSet, pageIndex: requested });
+    }
+    function selectSet(index) {
+      activeSet = index;
+      activePage = 0;
+      renderTabs();
+      const set = currentSet();
+      if (!set) return;
+      if (set.kind === 'rows') {
+        toolbar.hidden = false;
+        grid.replaceChildren(messageNode('Loading result rows...', false));
+        requestPage(0);
+      } else {
+        toolbar.hidden = true;
+        grid.replaceChildren(messageNode(set.message || 'Statement executed successfully.', set.kind === 'error'));
+      }
+    }
+    function selectRange(rowStart, rowEnd, columnStart, columnEnd) {
+      selection = {
+        rowStart: Math.min(rowStart, rowEnd),
+        rowEnd: Math.max(rowStart, rowEnd),
+        columnStart: Math.min(columnStart, columnEnd),
+        columnEnd: Math.max(columnStart, columnEnd)
+      };
+      grid.querySelectorAll('td[data-row]').forEach((cell) => {
+        const row = Number(cell.dataset.row);
+        const column = Number(cell.dataset.column);
+        cell.classList.toggle(
+          'selected',
+          row >= selection.rowStart && row <= selection.rowEnd && column >= selection.columnStart && column <= selection.columnEnd
+        );
+      });
+    }
+    function cellText(value) { return value === null || value === undefined ? 'NULL' : String(value); }
+    function copyRange(range) {
+      if (!range) return;
+      const lines = [];
+      for (let row = range.rowStart; row <= range.rowEnd; row += 1) {
+        const values = [];
+        for (let column = range.columnStart; column <= range.columnEnd; column += 1) {
+          values.push(cellText(visibleRows[row]?.[column]));
+        }
+        lines.push(values.join('\\t'));
+      }
+      vscode.postMessage({ type: 'copy', text: lines.join('\\n') });
+    }
+    function renderTabs() {
+      tabs.replaceChildren();
+      sets().forEach((set, index) => {
+        if (!set) return;
+        const button = document.createElement('button');
+        button.className = 'tab' + (index === activeSet ? ' active' : '');
+        button.textContent = set.kind === 'rows'
+          ? 'Result ' + (index + 1) + ' · ' + rowLabel(Number(set.rowCount || 0))
+          : 'Message ' + (index + 1);
+        button.addEventListener('click', () => selectSet(index));
+        tabs.appendChild(button);
+      });
+    }
+    function renderPage(data) {
+      if (data.setIndex !== activeSet) return;
+      activePage = Number(data.pageIndex || 0);
+      rowOffset = Number(data.rowOffset || 0);
+      visibleRows = Array.isArray(data.rows) ? data.rows : [];
+      anchorCell = null;
+      selection = null;
+      const set = currentSet();
+      if (!set) return;
+
+      const table = document.createElement('table');
+      const head = document.createElement('thead');
+      const headerRow = document.createElement('tr');
+      const numberHeader = document.createElement('th');
+      numberHeader.className = 'row-number';
+      numberHeader.textContent = '#';
+      headerRow.appendChild(numberHeader);
+      (set.columns || []).forEach((column) => {
+        const th = document.createElement('th');
+        const name = document.createElement('span');
+        name.textContent = column.name;
+        th.appendChild(name);
+        if (column.type) {
+          const type = document.createElement('span');
+          type.className = 'column-type';
+          type.textContent = column.type;
+          th.appendChild(type);
+        }
+        headerRow.appendChild(th);
+      });
+      head.appendChild(headerRow);
+      table.appendChild(head);
+
+      const body = document.createElement('tbody');
+      visibleRows.forEach((row, rowIndex) => {
+        const tr = document.createElement('tr');
+        const numberCell = document.createElement('td');
+        numberCell.className = 'row-number';
+        numberCell.textContent = String(rowOffset + rowIndex + 1);
+        tr.appendChild(numberCell);
+        row.forEach((value, columnIndex) => {
+          const td = document.createElement('td');
+          td.dataset.row = String(rowIndex);
+          td.dataset.column = String(columnIndex);
+          if (value === null) {
+            td.textContent = 'NULL';
+            td.className = 'null';
+          } else {
+            td.textContent = String(value);
+          }
+          td.title = value === null ? 'NULL' : String(value);
+          td.addEventListener('click', (event) => {
+            if (event.shiftKey && anchorCell) {
+              selectRange(anchorCell.row, rowIndex, anchorCell.column, columnIndex);
+            } else {
+              anchorCell = { row: rowIndex, column: columnIndex };
+              selectRange(rowIndex, rowIndex, columnIndex, columnIndex);
+            }
+          });
+          tr.appendChild(td);
+        });
+        body.appendChild(tr);
+      });
+      table.appendChild(body);
+      grid.replaceChildren(table);
+
+      const pageCount = Math.max(1, Number(set.pages || 0));
+      pageInput.value = String(activePage + 1);
+      pageInput.max = String(pageCount);
+      pages.textContent = 'of ' + pageCount;
+      prev.disabled = activePage <= 0;
+      next.disabled = activePage >= pageCount - 1;
+      if (visibleRows.length > 0) {
+        status.textContent = 'Rows ' + (rowOffset + 1) + '–' + (rowOffset + visibleRows.length) + ' of ' + set.rowCount + (set.truncated ? ' · configured limit reached' : '');
+      } else {
+        status.textContent = '0 rows' + (set.truncated ? ' · configured limit reached' : '');
+      }
+    }
+    function renderMetadata(value) {
+      metadata = value;
+      const parts = [];
+      if (value.connectionName) parts.push(value.connectionName);
+      if (value.database) parts.push(value.database);
+      parts.push(rowLabel(Number(value.totalRows || 0)));
+      if (Number(value.affectedRows || 0) > 0) parts.push(String(value.affectedRows) + ' affected');
+      parts.push(String(Number(value.durationMs || 0)) + ' ms');
+      if (value.status && value.status !== 'success') parts.push(String(value.status));
+      document.getElementById('summary').textContent = parts.join(' · ');
+      renderTabs();
+      const firstRows = sets().findIndex((set) => set?.kind === 'rows');
+      const first = firstRows >= 0 ? firstRows : sets().findIndex(Boolean);
+      if (first >= 0) {
+        selectSet(first);
+      } else {
+        toolbar.hidden = true;
+        grid.replaceChildren(messageNode('Statement completed. No result set was returned.', false));
+      }
+    }
+
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+      if (message.type === 'metadata') renderMetadata(message.metadata);
+      else if (message.type === 'pageData') renderPage(message);
+    });
+    prev.addEventListener('click', () => requestPage(activePage - 1));
+    next.addEventListener('click', () => requestPage(activePage + 1));
+    pageInput.addEventListener('change', () => requestPage(Number(pageInput.value) - 1));
+    document.getElementById('copyCell').addEventListener('click', () => {
+      if (anchorCell) copyRange({ rowStart: anchorCell.row, rowEnd: anchorCell.row, columnStart: anchorCell.column, columnEnd: anchorCell.column });
+    });
+    document.getElementById('copyRow').addEventListener('click', () => {
+      const set = currentSet();
+      if (anchorCell && set?.columns?.length) {
+        copyRange({ rowStart: anchorCell.row, rowEnd: anchorCell.row, columnStart: 0, columnEnd: set.columns.length - 1 });
+      }
+    });
+    document.getElementById('copySelection').addEventListener('click', () => copyRange(selection));
+    document.querySelectorAll('[data-export]').forEach((button) => {
+      button.addEventListener('click', () => vscode.postMessage({ type: 'export', setIndex: activeSet, format: button.dataset.export }));
+    });
+    vscode.postMessage({ type: 'ready' });
+  </script>
+</body>
+</html>`;
+}
+
+module.exports = {
+  createResultViewHtml,
+};