From 65c1f1ee41c70781a120183dea4a5da0f9eb674f Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Thu, 16 Oct 2025 15:55:38 +0200
Subject: [PATCH 01/23] remove localization from integration webview as it is
 not available

---
 .../integrations/BigQueryForm.tsx             | 17 +++++++--------
 .../integrations/IntegrationItem.tsx          |  7 +++----
 .../integrations/IntegrationList.tsx          |  3 +--
 .../integrations/IntegrationPanel.tsx         | 13 ++++++------
 .../integrations/PostgresForm.tsx             | 21 +++++++++----------
 5 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index 627aa04c30..a354184fc3 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { l10n } from 'vscode';
 
 import { BigQueryIntegrationConfig } from './types';
 
@@ -28,7 +27,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
     const validateCredentials = (value: string): boolean => {
         if (!value.trim()) {
-            setCredentialsError(l10n.t('Credentials are required'));
+            setCredentialsError('Credentials are required');
             return false;
         }
 
@@ -38,7 +37,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return true;
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Invalid JSON format';
-            setCredentialsError(l10n.t('Invalid JSON: {0}', errorMessage));
+            setCredentialsError(`Invalid JSON: ${errorMessage}`);
             return false;
         }
     };
@@ -59,7 +58,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
         const config: BigQueryIntegrationConfig = {
             id: integrationId,
-            name: name || l10n.t('Unnamed BigQuery Integration ({0})', integrationId),
+            name: name || `Unnamed BigQuery Integration (${integrationId})`,
             type: 'bigquery',
             projectId,
             credentials
@@ -71,7 +70,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{l10n.t('Name (optional)')}</label>
+                <label htmlFor="name">Name (optional)</label>
                 <input
                     type="text"
                     id="name"
@@ -84,7 +83,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="projectId">
-                    {l10n.t('Project ID')} <span className="required">*</span>
+                    Project ID <span className="required">*</span>
                 </label>
                 <input
                     type="text"
@@ -99,7 +98,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="credentials">
-                    {l10n.t('Service Account Credentials (JSON)')} <span className="required">*</span>
+                    Service Account Credentials (JSON) <span className="required">*</span>
                 </label>
                 <textarea
                     id="credentials"
@@ -124,10 +123,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-actions">
                 <button type="submit" className="primary">
-                    {l10n.t('Save')}
+                    Save
                 </button>
                 <button type="button" className="secondary" onClick={onCancel}>
-                    {l10n.t('Cancel')}
+                    Cancel
                 </button>
             </div>
         </form>
diff --git a/src/webviews/webview-side/integrations/IntegrationItem.tsx b/src/webviews/webview-side/integrations/IntegrationItem.tsx
index 70f09e67d8..de103cb88d 100644
--- a/src/webviews/webview-side/integrations/IntegrationItem.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationItem.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IntegrationWithStatus } from './types';
-import { l10n } from 'vscode';
 
 export interface IIntegrationItemProps {
     integration: IntegrationWithStatus;
@@ -10,8 +9,8 @@ export interface IIntegrationItemProps {
 
 export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onDelete }) => {
     const statusClass = integration.status === 'connected' ? 'status-connected' : 'status-disconnected';
-    const statusText = integration.status === 'connected' ? l10n.t('Connected') : l10n.t('Not Configured');
-    const configureText = integration.config ? l10n.t('Reconfigure') : l10n.t('Configure');
+    const statusText = integration.status === 'connected' ? 'Connected' : 'Not Configured';
+    const configureText = integration.config ? 'Reconfigure' : 'Configure';
     const displayName = integration.config?.name || integration.id;
 
     return (
@@ -26,7 +25,7 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
                 </button>
                 {integration.config && (
                     <button type="button" className="secondary" onClick={() => onDelete(integration.id)}>
-                        {l10n.t('Reset')}
+                        Reset
                     </button>
                 )}
             </div>
diff --git a/src/webviews/webview-side/integrations/IntegrationList.tsx b/src/webviews/webview-side/integrations/IntegrationList.tsx
index a03baacd12..954a0d286a 100644
--- a/src/webviews/webview-side/integrations/IntegrationList.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationList.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IntegrationItem } from './IntegrationItem';
 import { IntegrationWithStatus } from './types';
-import { l10n } from 'vscode';
 
 export interface IIntegrationListProps {
     integrations: IntegrationWithStatus[];
@@ -11,7 +10,7 @@ export interface IIntegrationListProps {
 
 export const IntegrationList: React.FC<IIntegrationListProps> = ({ integrations, onConfigure, onDelete }) => {
     if (integrations.length === 0) {
-        return <p className="no-integrations">{l10n.t('No integrations found in this project.')}</p>;
+        return <p className="no-integrations">No integrations found in this project.</p>;
     }
 
     return (
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index c2a04acb5e..89c950e44c 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -3,7 +3,6 @@ import { IVsCodeApi } from '../react-common/postOffice';
 import { IntegrationList } from './IntegrationList';
 import { ConfigurationForm } from './ConfigurationForm';
 import { IntegrationWithStatus, WebviewMessage, IntegrationConfig } from './types';
-import { l10n } from 'vscode';
 
 export interface IIntegrationPanelProps {
     baseTheme: string;
@@ -130,7 +129,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
     return (
         <div className={`integration-panel theme-${baseTheme}`}>
-            <h1>{l10n.t('Deepnote Integrations')}</h1>
+            <h1>Deepnote Integrations</h1>
 
             {message && <div className={`message message-${message.type}`}>{message.text}</div>}
 
@@ -149,20 +148,20 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
                 <div className="configuration-form-overlay">
                     <div className="configuration-form-container" style={{ maxWidth: '400px' }}>
                         <div className="configuration-form-header">
-                            <h2>{l10n.t('Confirm Reset')}</h2>
+                            <h2>Confirm Reset</h2>
                         </div>
                         <div className="configuration-form-body">
-                            <p>{l10n.t('Are you sure you want to reset this integration configuration?')}</p>
+                            <p>Are you sure you want to reset this integration configuration?</p>
                             <p style={{ marginTop: '10px', fontSize: '0.9em', opacity: 0.8 }}>
-                                {l10n.t('This will remove the stored credentials. You can reconfigure it later.')}
+                                This will remove the stored credentials. You can reconfigure it later.
                             </p>
                         </div>
                         <div className="form-actions">
                             <button type="button" className="primary" onClick={handleConfirmDelete}>
-                                {l10n.t('Reset')}
+                                Reset
                             </button>
                             <button type="button" className="secondary" onClick={handleCancelDelete}>
-                                {l10n.t('Cancel')}
+                                Cancel
                             </button>
                         </div>
                     </div>
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index 1233abf8b0..c61439312d 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { PostgresIntegrationConfig } from './types';
-import { l10n } from 'vscode';
 
 export interface IPostgresFormProps {
     integrationId: string;
@@ -36,7 +35,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
         const config: PostgresIntegrationConfig = {
             id: integrationId,
-            name: name || l10n.t('Unnamed PostgreSQL Integration ({0})', integrationId),
+            name: name || `Unnamed PostgreSQL Integration (${integrationId})`,
             type: 'postgres',
             host,
             port: parseInt(port, 10),
@@ -52,7 +51,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{l10n.t('Name (optional)')}</label>
+                <label htmlFor="name">Name (optional)</label>
                 <input
                     type="text"
                     id="name"
@@ -65,7 +64,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {l10n.t('Host')} <span className="required">*</span>
+                    Host <span className="required">*</span>
                 </label>
                 <input
                     type="text"
@@ -80,7 +79,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="port">
-                    {l10n.t('Port')} <span className="required">*</span>
+                    Port <span className="required">*</span>
                 </label>
                 <input
                     type="number"
@@ -98,7 +97,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {l10n.t('Database')} <span className="required">*</span>
+                    Database <span className="required">*</span>
                 </label>
                 <input
                     type="text"
@@ -113,7 +112,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {l10n.t('Username')} <span className="required">*</span>
+                    Username <span className="required">*</span>
                 </label>
                 <input
                     type="text"
@@ -128,7 +127,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {l10n.t('Password')} <span className="required">*</span>
+                    Password <span className="required">*</span>
                 </label>
                 <input
                     type="password"
@@ -144,16 +143,16 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
             <div className="form-group checkbox-group">
                 <label>
                     <input type="checkbox" checked={ssl} onChange={(e) => setSsl(e.target.checked)} />
-                    {l10n.t('Use SSL')}
+                    Use SSL
                 </label>
             </div>
 
             <div className="form-actions">
                 <button type="submit" className="primary">
-                    {l10n.t('Save')}
+                    Save
                 </button>
                 <button type="button" className="secondary" onClick={onCancel}>
-                    {l10n.t('Cancel')}
+                    Cancel
                 </button>
             </div>
         </form>

From 88bcd66b0c29e81745f944f91c91da021f21d8f5 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Thu, 16 Oct 2025 15:54:14 +0200
Subject: [PATCH 02/23] feat: add integration link to each SQL block

---
 .../integrations/integrationManager.ts        |  12 +-
 .../integrations/integrationStorage.ts        |  20 +++
 .../integrations/integrationWebview.ts        |  14 +-
 src/notebooks/deepnote/integrations/types.ts  |  16 +-
 .../deepnote/sqlCellStatusBarProvider.ts      | 106 +++++++++++++
 .../sqlCellStatusBarProvider.unit.test.ts     | 147 ++++++++++++++++++
 src/notebooks/serviceRegistry.node.ts         |   5 +
 src/notebooks/serviceRegistry.web.ts          |   5 +
 8 files changed, 319 insertions(+), 6 deletions(-)
 create mode 100644 src/notebooks/deepnote/sqlCellStatusBarProvider.ts
 create mode 100644 src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index 1335ecb1fe..edc48df69d 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -26,8 +26,11 @@ export class IntegrationManager implements IIntegrationManager {
 
     public activate(): void {
         // Register the manage integrations command
+        // The command can optionally receive an integration ID to select/configure
         this.extensionContext.subscriptions.push(
-            commands.registerCommand(Commands.ManageIntegrations, () => this.showIntegrationsUI())
+            commands.registerCommand(Commands.ManageIntegrations, (integrationId?: string) =>
+                this.showIntegrationsUI(integrationId)
+            )
         );
 
         // Listen for active notebook changes to update context
@@ -95,8 +98,9 @@ export class IntegrationManager implements IIntegrationManager {
 
     /**
      * Show the integrations management UI
+     * @param selectedIntegrationId Optional integration ID to select/configure immediately
      */
-    private async showIntegrationsUI(): Promise<void> {
+    private async showIntegrationsUI(selectedIntegrationId?: string): Promise<void> {
         const activeNotebook = window.activeNotebookEditor?.notebook;
 
         if (!activeNotebook || activeNotebook.notebookType !== 'deepnote') {
@@ -130,8 +134,8 @@ export class IntegrationManager implements IIntegrationManager {
             return;
         }
 
-        // Show the webview
-        await this.webviewProvider.show(integrations);
+        // Show the webview with optional selected integration
+        await this.webviewProvider.show(integrations, selectedIntegrationId);
     }
 
     /**
diff --git a/src/notebooks/deepnote/integrations/integrationStorage.ts b/src/notebooks/deepnote/integrations/integrationStorage.ts
index 3f97dce782..729a9c64d6 100644
--- a/src/notebooks/deepnote/integrations/integrationStorage.ts
+++ b/src/notebooks/deepnote/integrations/integrationStorage.ts
@@ -1,4 +1,5 @@
 import { inject, injectable } from 'inversify';
+import { EventEmitter } from 'vscode';
 
 import { IEncryptedStorage } from '../../../platform/common/application/types';
 import { logger } from '../../../platform/logging';
@@ -17,6 +18,10 @@ export class IntegrationStorage {
 
     private cacheLoaded = false;
 
+    private readonly _onDidChangeIntegrations = new EventEmitter<void>();
+
+    public readonly onDidChangeIntegrations = this._onDidChangeIntegrations.event;
+
     constructor(@inject(IEncryptedStorage) private readonly encryptedStorage: IEncryptedStorage) {}
 
     /**
@@ -35,6 +40,15 @@ export class IntegrationStorage {
         return this.cache.get(integrationId);
     }
 
+    /**
+     * Get integration configuration for a specific project and integration
+     * Note: Currently integrations are stored globally, not per-project,
+     * so this method ignores the projectId parameter
+     */
+    async getIntegrationConfig(_projectId: string, integrationId: string): Promise<IntegrationConfig | undefined> {
+        return this.get(integrationId);
+    }
+
     /**
      * Get all integrations of a specific type
      */
@@ -58,6 +72,9 @@ export class IntegrationStorage {
 
         // Update the index
         await this.updateIndex();
+
+        // Fire change event
+        this._onDidChangeIntegrations.fire();
     }
 
     /**
@@ -74,6 +91,9 @@ export class IntegrationStorage {
 
         // Update the index
         await this.updateIndex();
+
+        // Fire change event
+        this._onDidChangeIntegrations.fire();
     }
 
     /**
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index 50f888336a..cd950341c3 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -24,8 +24,10 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
 
     /**
      * Show the integration management webview
+     * @param integrations Map of integration IDs to their status
+     * @param selectedIntegrationId Optional integration ID to select/configure immediately
      */
-    public async show(integrations: Map<string, IntegrationWithStatus>): Promise<void> {
+    public async show(integrations: Map<string, IntegrationWithStatus>, selectedIntegrationId?: string): Promise<void> {
         // Update the stored integrations with the latest data
         this.integrations = integrations;
 
@@ -35,6 +37,11 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
         if (this.currentPanel) {
             this.currentPanel.reveal(column);
             await this.updateWebview();
+
+            // If a specific integration was requested, show its configuration form
+            if (selectedIntegrationId) {
+                await this.showConfigurationForm(selectedIntegrationId);
+            }
             return;
         }
 
@@ -76,6 +83,11 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
         );
 
         await this.updateWebview();
+
+        // If a specific integration was requested, show its configuration form
+        if (selectedIntegrationId) {
+            await this.showConfigurationForm(selectedIntegrationId);
+        }
     }
 
     /**
diff --git a/src/notebooks/deepnote/integrations/types.ts b/src/notebooks/deepnote/integrations/types.ts
index 2daa217ae1..35bc91bc8a 100644
--- a/src/notebooks/deepnote/integrations/types.ts
+++ b/src/notebooks/deepnote/integrations/types.ts
@@ -1,9 +1,21 @@
+import { Event } from 'vscode';
 import { IntegrationConfig, IntegrationWithStatus } from './integrationTypes';
 
 export const IIntegrationStorage = Symbol('IIntegrationStorage');
 export interface IIntegrationStorage {
+    /**
+     * Event fired when integrations change
+     */
+    readonly onDidChangeIntegrations: Event<void>;
+
     getAll(): Promise<IntegrationConfig[]>;
     get(integrationId: string): Promise<IntegrationConfig | undefined>;
+
+    /**
+     * Get integration configuration for a specific project and integration
+     */
+    getIntegrationConfig(projectId: string, integrationId: string): Promise<IntegrationConfig | undefined>;
+
     save(config: IntegrationConfig): Promise<void>;
     delete(integrationId: string): Promise<void>;
     exists(integrationId: string): Promise<boolean>;
@@ -27,8 +39,10 @@ export const IIntegrationWebviewProvider = Symbol('IIntegrationWebviewProvider')
 export interface IIntegrationWebviewProvider {
     /**
      * Show the integration management webview
+     * @param integrations Map of integration IDs to their status
+     * @param selectedIntegrationId Optional integration ID to select/configure immediately
      */
-    show(integrations: Map<string, IntegrationWithStatus>): Promise<void>;
+    show(integrations: Map<string, IntegrationWithStatus>, selectedIntegrationId?: string): Promise<void>;
 }
 
 export const IIntegrationManager = Symbol('IIntegrationManager');
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
new file mode 100644
index 0000000000..c286a2c058
--- /dev/null
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -0,0 +1,106 @@
+import {
+    CancellationToken,
+    EventEmitter,
+    NotebookCell,
+    NotebookCellStatusBarItem,
+    NotebookCellStatusBarItemProvider,
+    NotebookDocument,
+    ProviderResult,
+    notebooks
+} from 'vscode';
+import { inject, injectable } from 'inversify';
+
+import { IExtensionSyncActivationService } from '../../platform/activation/types';
+import { IDisposableRegistry } from '../../platform/common/types';
+import { Commands } from '../../platform/common/constants';
+import { IIntegrationStorage } from './integrations/types';
+import { DATAFRAME_SQL_INTEGRATION_ID } from './integrations/integrationTypes';
+
+/**
+ * Provides status bar items for SQL cells showing the integration name
+ */
+@injectable()
+export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvider, IExtensionSyncActivationService {
+    private readonly _onDidChangeCellStatusBarItems = new EventEmitter<void>();
+
+    public readonly onDidChangeCellStatusBarItems = this._onDidChangeCellStatusBarItems.event;
+
+    constructor(
+        @inject(IDisposableRegistry) private readonly disposables: IDisposableRegistry,
+        @inject(IIntegrationStorage) private readonly integrationStorage: IIntegrationStorage
+    ) {}
+
+    public activate(): void {
+        // Register the status bar provider for Deepnote notebooks
+        this.disposables.push(notebooks.registerNotebookCellStatusBarItemProvider('deepnote', this));
+
+        // Listen for integration configuration changes to update status bar
+        this.disposables.push(
+            this.integrationStorage.onDidChangeIntegrations(() => {
+                this._onDidChangeCellStatusBarItems.fire();
+            })
+        );
+    }
+
+    public provideCellStatusBarItems(
+        cell: NotebookCell,
+        _token: CancellationToken
+    ): ProviderResult<NotebookCellStatusBarItem | NotebookCellStatusBarItem[]> {
+        // Only show status bar for SQL cells
+        if (cell.document.languageId !== 'sql') {
+            return undefined;
+        }
+
+        // Get the integration ID from cell metadata
+        const integrationId = this.getIntegrationId(cell);
+        if (!integrationId) {
+            return undefined;
+        }
+
+        // Don't show status bar for the internal DuckDB integration
+        if (integrationId === DATAFRAME_SQL_INTEGRATION_ID) {
+            return undefined;
+        }
+
+        return this.createStatusBarItem(cell.notebook, integrationId);
+    }
+
+    private getIntegrationId(cell: NotebookCell): string | undefined {
+        // Check cell metadata for sql_integration_id
+        const metadata = cell.metadata;
+        if (metadata && typeof metadata === 'object') {
+            const integrationId = (metadata as Record<string, unknown>).sql_integration_id;
+            if (typeof integrationId === 'string') {
+                return integrationId;
+            }
+        }
+
+        return undefined;
+    }
+
+    private async createStatusBarItem(
+        notebook: NotebookDocument,
+        integrationId: string
+    ): Promise<NotebookCellStatusBarItem | undefined> {
+        const projectId = notebook.metadata?.deepnoteProjectId;
+        if (!projectId) {
+            return undefined;
+        }
+
+        // Get integration configuration to display the name
+        const config = await this.integrationStorage.getIntegrationConfig(projectId, integrationId);
+        const displayName = config?.name || integrationId;
+
+        // Create a status bar item that opens the integration management UI
+        return {
+            text: `$(database) ${displayName}`,
+            alignment: 1, // NotebookCellStatusBarAlignment.Left
+            tooltip: `SQL Integration: ${displayName}\nClick to configure`,
+            command: {
+                title: 'Configure Integration',
+                command: Commands.ManageIntegrations,
+                arguments: [integrationId]
+            }
+        };
+    }
+}
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
new file mode 100644
index 0000000000..9e7376489a
--- /dev/null
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
@@ -0,0 +1,147 @@
+import { assert } from 'chai';
+import { anything, instance, mock, when } from 'ts-mockito';
+import {
+    CancellationToken,
+    CancellationTokenSource,
+    NotebookCell,
+    NotebookCellKind,
+    NotebookDocument,
+    TextDocument,
+    Uri
+} from 'vscode';
+
+import { IDisposableRegistry } from '../../platform/common/types';
+import { IIntegrationStorage } from './integrations/types';
+import { SqlCellStatusBarProvider } from './sqlCellStatusBarProvider';
+import { DATAFRAME_SQL_INTEGRATION_ID, IntegrationType } from './integrations/integrationTypes';
+
+suite('SqlCellStatusBarProvider', () => {
+    let provider: SqlCellStatusBarProvider;
+    let disposables: IDisposableRegistry;
+    let integrationStorage: IIntegrationStorage;
+    let cancellationToken: CancellationToken;
+
+    setup(() => {
+        disposables = [];
+        integrationStorage = mock<IIntegrationStorage>();
+        provider = new SqlCellStatusBarProvider(disposables, instance(integrationStorage));
+
+        const tokenSource = new CancellationTokenSource();
+        cancellationToken = tokenSource.token;
+    });
+
+    test('returns undefined for non-SQL cells', async () => {
+        const cell = createMockCell('python', {});
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isUndefined(result);
+    });
+
+    test('returns undefined for SQL cells without integration ID', async () => {
+        const cell = createMockCell('sql', {});
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isUndefined(result);
+    });
+
+    test('returns undefined for SQL cells with dataframe integration ID', async () => {
+        const cell = createMockCell('sql', {
+            sql_integration_id: DATAFRAME_SQL_INTEGRATION_ID
+        });
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isUndefined(result);
+    });
+
+    test('returns status bar item for SQL cell with integration ID', async () => {
+        const integrationId = 'postgres-123';
+        const cell = createMockCell(
+            'sql',
+            {
+                sql_integration_id: integrationId
+            },
+            {
+                deepnoteProjectId: 'project-1'
+            }
+        );
+
+        when(integrationStorage.getIntegrationConfig(anything(), anything())).thenResolve({
+            id: integrationId,
+            name: 'My Postgres DB',
+            type: IntegrationType.Postgres,
+            host: 'localhost',
+            port: 5432,
+            database: 'test',
+            username: 'user',
+            password: 'pass'
+        });
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isDefined(result);
+        assert.strictEqual((result as any).text, '$(database) My Postgres DB');
+        assert.strictEqual((result as any).alignment, 1); // NotebookCellStatusBarAlignment.Left
+        assert.isDefined((result as any).command);
+        assert.strictEqual((result as any).command.command, 'deepnote.manageIntegrations');
+        assert.deepStrictEqual((result as any).command.arguments, [integrationId]);
+    });
+
+    test('uses integration ID as display name when config not found', async () => {
+        const integrationId = 'postgres-123';
+        const cell = createMockCell(
+            'sql',
+            {
+                sql_integration_id: integrationId
+            },
+            {
+                deepnoteProjectId: 'project-1'
+            }
+        );
+
+        when(integrationStorage.getIntegrationConfig(anything(), anything())).thenResolve(undefined);
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isDefined(result);
+        assert.strictEqual((result as any).text, '$(database) postgres-123');
+    });
+
+    test('returns undefined when notebook has no project ID', async () => {
+        const integrationId = 'postgres-123';
+        const cell = createMockCell('sql', {
+            sql_integration_id: integrationId
+        });
+
+        const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
+
+        assert.isUndefined(result);
+    });
+
+    function createMockCell(
+        languageId: string,
+        cellMetadata: Record<string, unknown>,
+        notebookMetadata: Record<string, unknown> = {}
+    ): NotebookCell {
+        const document = {
+            languageId
+        } as TextDocument;
+
+        const notebook = {
+            metadata: notebookMetadata,
+            uri: Uri.file('/test/notebook.deepnote')
+        } as NotebookDocument;
+
+        const cell = {
+            document,
+            notebook,
+            kind: NotebookCellKind.Code,
+            metadata: cellMetadata,
+            index: 0
+        } as NotebookCell;
+
+        return cell;
+    }
+});
diff --git a/src/notebooks/serviceRegistry.node.ts b/src/notebooks/serviceRegistry.node.ts
index 9b7ed3a7c3..a42308f4f4 100644
--- a/src/notebooks/serviceRegistry.node.ts
+++ b/src/notebooks/serviceRegistry.node.ts
@@ -53,6 +53,7 @@ import {
     IIntegrationStorage,
     IIntegrationWebviewProvider
 } from './deepnote/integrations/types';
+import { SqlCellStatusBarProvider } from './deepnote/sqlCellStatusBarProvider';
 import {
     IDeepnoteToolkitInstaller,
     IDeepnoteServerStarter,
@@ -142,6 +143,10 @@ export function registerTypes(serviceManager: IServiceManager, isDevMode: boolea
     serviceManager.addSingleton<IIntegrationDetector>(IIntegrationDetector, IntegrationDetector);
     serviceManager.addSingleton<IIntegrationWebviewProvider>(IIntegrationWebviewProvider, IntegrationWebviewProvider);
     serviceManager.addSingleton<IIntegrationManager>(IIntegrationManager, IntegrationManager);
+    serviceManager.addSingleton<IExtensionSyncActivationService>(
+        IExtensionSyncActivationService,
+        SqlCellStatusBarProvider
+    );
 
     // Deepnote kernel services
     serviceManager.addSingleton<IDeepnoteToolkitInstaller>(IDeepnoteToolkitInstaller, DeepnoteToolkitInstaller);
diff --git a/src/notebooks/serviceRegistry.web.ts b/src/notebooks/serviceRegistry.web.ts
index 8c1728f231..1fb50d004a 100644
--- a/src/notebooks/serviceRegistry.web.ts
+++ b/src/notebooks/serviceRegistry.web.ts
@@ -48,6 +48,7 @@ import {
     IIntegrationStorage,
     IIntegrationWebviewProvider
 } from './deepnote/integrations/types';
+import { SqlCellStatusBarProvider } from './deepnote/sqlCellStatusBarProvider';
 
 export function registerTypes(serviceManager: IServiceManager, isDevMode: boolean) {
     registerControllerTypes(serviceManager, isDevMode);
@@ -106,6 +107,10 @@ export function registerTypes(serviceManager: IServiceManager, isDevMode: boolea
     serviceManager.addSingleton<IIntegrationDetector>(IIntegrationDetector, IntegrationDetector);
     serviceManager.addSingleton<IIntegrationWebviewProvider>(IIntegrationWebviewProvider, IntegrationWebviewProvider);
     serviceManager.addSingleton<IIntegrationManager>(IIntegrationManager, IntegrationManager);
+    serviceManager.addSingleton<IExtensionSyncActivationService>(
+        IExtensionSyncActivationService,
+        SqlCellStatusBarProvider
+    );
 
     serviceManager.addSingleton<IExportBase>(IExportBase, ExportBase);
     serviceManager.addSingleton<IFileConverter>(IFileConverter, FileConverter);

From 8be88f3beb2b0eb0f12c4efb826c7ed34318fbd3 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Thu, 16 Oct 2025 16:09:33 +0200
Subject: [PATCH 03/23] working button on sql block

---
 .../integrations/integrationManager.ts        | 33 +++++++++++++++++--
 .../integrations/integrationWebview.ts        |  3 ++
 .../integrations/IntegrationPanel.tsx         |  3 ++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index edc48df69d..ff9d19e773 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -27,10 +27,26 @@ export class IntegrationManager implements IIntegrationManager {
     public activate(): void {
         // Register the manage integrations command
         // The command can optionally receive an integration ID to select/configure
+        // Note: When invoked from a notebook cell status bar, VSCode passes context object first,
+        // then the actual arguments from the command definition
         this.extensionContext.subscriptions.push(
-            commands.registerCommand(Commands.ManageIntegrations, (integrationId?: string) =>
-                this.showIntegrationsUI(integrationId)
-            )
+            commands.registerCommand(Commands.ManageIntegrations, (...args: unknown[]) => {
+                logger.debug(`IntegrationManager: Command invoked with args:`, args);
+
+                // Find the integration ID from the arguments
+                // It could be the first arg (if called directly) or in the args array (if called from UI)
+                let integrationId: string | undefined;
+
+                for (const arg of args) {
+                    if (typeof arg === 'string') {
+                        integrationId = arg;
+                        break;
+                    }
+                }
+
+                logger.debug(`IntegrationManager: Extracted integrationId: ${integrationId}`);
+                return this.showIntegrationsUI(integrationId);
+            })
         );
 
         // Listen for active notebook changes to update context
@@ -129,6 +145,17 @@ export class IntegrationManager implements IIntegrationManager {
 
         logger.debug(`IntegrationManager: Found ${integrations.size} integrations`);
 
+        // If a specific integration was requested (e.g., from status bar click),
+        // ensure it's in the map even if not detected from the project
+        if (selectedIntegrationId && !integrations.has(selectedIntegrationId)) {
+            logger.debug(`IntegrationManager: Adding requested integration ${selectedIntegrationId} to the map`);
+            const config = await this.integrationStorage.get(selectedIntegrationId);
+            integrations.set(selectedIntegrationId, {
+                config: config || null,
+                status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected
+            });
+        }
+
         if (integrations.size === 0) {
             void window.showInformationMessage(`No integrations found in this project.`);
             return;
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index cd950341c3..a7f7b3da3f 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -95,6 +95,7 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
      */
     private async updateWebview(): Promise<void> {
         if (!this.currentPanel) {
+            logger.debug('IntegrationWebviewProvider: No current panel, skipping update');
             return;
         }
 
@@ -103,6 +104,8 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             id,
             status: integration.status
         }));
+        logger.debug(`IntegrationWebviewProvider: Sending ${integrationsData.length} integrations to webview`);
+        logger.trace('IntegrationWebviewProvider: Integration data:', JSON.stringify(integrationsData, null, 2));
 
         await this.currentPanel.webview.postMessage({
             integrations: integrationsData,
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index 89c950e44c..cf3f552025 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -37,9 +37,11 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
     React.useEffect(() => {
         const handleMessage = (event: MessageEvent<WebviewMessage>) => {
             const msg = event.data;
+            console.log('IntegrationPanel: Received message:', msg);
 
             switch (msg.type) {
                 case 'update':
+                    console.log('IntegrationPanel: Updating integrations:', msg.integrations);
                     setIntegrations(msg.integrations);
                     break;
 
@@ -66,6 +68,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
             }
         };
 
+        console.log('IntegrationPanel: Component mounted, adding message listener');
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, []);

From e6a9dff3c2711bfe850426814b127d0dfb378cef Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Thu, 16 Oct 2025 16:32:13 +0200
Subject: [PATCH 04/23] fix loading of integration list

---
 .../integrations/integrationManager.ts        | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index ff9d19e773..9ae74771b2 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -174,17 +174,24 @@ export class IntegrationManager implements IIntegrationManager {
         const blocksWithIntegrations: BlockWithIntegration[] = [];
 
         for (const cell of notebook.getCells()) {
-            const deepnoteMetadata = cell.metadata?.deepnoteMetadata;
-            logger.trace(`IntegrationManager: Cell ${cell.index} metadata:`, deepnoteMetadata);
-
-            if (deepnoteMetadata?.sql_integration_id) {
-                blocksWithIntegrations.push({
-                    id: `cell-${cell.index}`,
-                    sql_integration_id: deepnoteMetadata.sql_integration_id
-                });
+            const metadata = cell.metadata;
+            logger.trace(`IntegrationManager: Cell ${cell.index} metadata:`, metadata);
+
+            // Check cell metadata for sql_integration_id
+            if (metadata && typeof metadata === 'object') {
+                const integrationId = (metadata as Record<string, unknown>).sql_integration_id;
+                if (typeof integrationId === 'string') {
+                    logger.debug(`IntegrationManager: Found integration ${integrationId} in cell ${cell.index}`);
+                    blocksWithIntegrations.push({
+                        id: `cell-${cell.index}`,
+                        sql_integration_id: integrationId
+                    });
+                }
             }
         }
 
+        logger.debug(`IntegrationManager: Found ${blocksWithIntegrations.length} cells with integrations`);
+
         // Use the shared utility to scan blocks and build the status map
         return scanBlocksForIntegrations(blocksWithIntegrations, this.integrationStorage, 'IntegrationManager');
     }

From 360d58e62e4f2c2af628a1c79775c20e576956a1 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:11:18 +0200
Subject: [PATCH 05/23] localize integrationManager

---
 src/notebooks/deepnote/integrations/integrationManager.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index 9ae74771b2..164bae8765 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import { commands, NotebookDocument, window, workspace } from 'vscode';
+import { commands, l10n, NotebookDocument, window, workspace } from 'vscode';
 
 import { IExtensionContext } from '../../../platform/common/types';
 import { Commands } from '../../../platform/common/constants';
@@ -120,13 +120,13 @@ export class IntegrationManager implements IIntegrationManager {
         const activeNotebook = window.activeNotebookEditor?.notebook;
 
         if (!activeNotebook || activeNotebook.notebookType !== 'deepnote') {
-            void window.showErrorMessage('No active Deepnote notebook');
+            void window.showErrorMessage(l10n.t('No active Deepnote notebook'));
             return;
         }
 
         const projectId = activeNotebook.metadata?.deepnoteProjectId;
         if (!projectId) {
-            void window.showErrorMessage('Cannot determine project ID');
+            void window.showErrorMessage(l10n.t('Cannot determine project ID'));
             return;
         }
 
@@ -157,7 +157,7 @@ export class IntegrationManager implements IIntegrationManager {
         }
 
         if (integrations.size === 0) {
-            void window.showInformationMessage(`No integrations found in this project.`);
+            void window.showInformationMessage(l10n.t(`No integrations found in this project.`));
             return;
         }
 

From 1cceb9c6706a1b834ebf3b762dbd112dc0afec47 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:11:29 +0200
Subject: [PATCH 06/23] use cancel token when creating sql cell status bar
 button

---
 src/notebooks/deepnote/sqlCellStatusBarProvider.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index c286a2c058..f939730f93 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -44,8 +44,12 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
 
     public provideCellStatusBarItems(
         cell: NotebookCell,
-        _token: CancellationToken
+        token: CancellationToken
     ): ProviderResult<NotebookCellStatusBarItem | NotebookCellStatusBarItem[]> {
+        if (token?.isCancellationRequested) {
+            return undefined;
+        }
+
         // Only show status bar for SQL cells
         if (cell.document.languageId !== 'sql') {
             return undefined;

From 3c79842471787db1931a1df31cad8d43b5a05258 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:11:46 +0200
Subject: [PATCH 07/23] use imported constant in sql status bar test

---
 src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
index 9e7376489a..0cba88d158 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
@@ -5,6 +5,7 @@ import {
     CancellationTokenSource,
     NotebookCell,
     NotebookCellKind,
+    NotebookCellStatusBarAlignment,
     NotebookDocument,
     TextDocument,
     Uri
@@ -83,7 +84,7 @@ suite('SqlCellStatusBarProvider', () => {
 
         assert.isDefined(result);
         assert.strictEqual((result as any).text, '$(database) My Postgres DB');
-        assert.strictEqual((result as any).alignment, 1); // NotebookCellStatusBarAlignment.Left
+        assert.strictEqual((result as any).alignment, NotebookCellStatusBarAlignment.Left);
         assert.isDefined((result as any).command);
         assert.strictEqual((result as any).command.command, 'deepnote.manageIntegrations');
         assert.deepStrictEqual((result as any).command.arguments, [integrationId]);

From 031cd159ab8dba3488df31011fe4c536f7546539 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:11:50 +0200
Subject: [PATCH 08/23] remove logs from integration panel

---
 src/webviews/webview-side/integrations/IntegrationPanel.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index cf3f552025..89c950e44c 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -37,11 +37,9 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
     React.useEffect(() => {
         const handleMessage = (event: MessageEvent<WebviewMessage>) => {
             const msg = event.data;
-            console.log('IntegrationPanel: Received message:', msg);
 
             switch (msg.type) {
                 case 'update':
-                    console.log('IntegrationPanel: Updating integrations:', msg.integrations);
                     setIntegrations(msg.integrations);
                     break;
 
@@ -68,7 +66,6 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
             }
         };
 
-        console.log('IntegrationPanel: Component mounted, adding message listener');
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, []);

From 62b5206b22eb2cdc1e37faf4480079ec232a0c47 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:59:08 +0200
Subject: [PATCH 09/23] use absolute value literal due to unavailable import
 (?)

---
 src/notebooks/deepnote/sqlCellStatusBarProvider.ts           | 5 +++--
 src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts | 3 +--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index f939730f93..4c759550e9 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -6,6 +6,7 @@ import {
     NotebookCellStatusBarItemProvider,
     NotebookDocument,
     ProviderResult,
+    l10n,
     notebooks
 } from 'vscode';
 import { inject, injectable } from 'inversify';
@@ -99,9 +100,9 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
         return {
             text: `$(database) ${displayName}`,
             alignment: 1, // NotebookCellStatusBarAlignment.Left
-            tooltip: `SQL Integration: ${displayName}\nClick to configure`,
+            tooltip: l10n.t('SQL Integration: {0}\nClick to configure', displayName),
             command: {
-                title: 'Configure Integration',
+                title: l10n.t('Configure Integration'),
                 command: Commands.ManageIntegrations,
                 arguments: [integrationId]
             }
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
index 0cba88d158..9e7376489a 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
@@ -5,7 +5,6 @@ import {
     CancellationTokenSource,
     NotebookCell,
     NotebookCellKind,
-    NotebookCellStatusBarAlignment,
     NotebookDocument,
     TextDocument,
     Uri
@@ -84,7 +83,7 @@ suite('SqlCellStatusBarProvider', () => {
 
         assert.isDefined(result);
         assert.strictEqual((result as any).text, '$(database) My Postgres DB');
-        assert.strictEqual((result as any).alignment, NotebookCellStatusBarAlignment.Left);
+        assert.strictEqual((result as any).alignment, 1); // NotebookCellStatusBarAlignment.Left
         assert.isDefined((result as any).command);
         assert.strictEqual((result as any).command.command, 'deepnote.manageIntegrations');
         assert.deepStrictEqual((result as any).command.arguments, [integrationId]);

From 3f6cd2e1b2fb0f37f3f0d6aab73a6f4db03fbf88 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:34:50 +0200
Subject: [PATCH 10/23] remove useless template literal

---
 src/notebooks/deepnote/integrations/integrationManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index 164bae8765..87ab98d905 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -157,7 +157,7 @@ export class IntegrationManager implements IIntegrationManager {
         }
 
         if (integrations.size === 0) {
-            void window.showInformationMessage(l10n.t(`No integrations found in this project.`));
+            void window.showInformationMessage(l10n.t('No integrations found in this project.'));
             return;
         }
 

From bc036b88c52347cc6f4b1143f45525fac9854dfd Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:34:58 +0200
Subject: [PATCH 11/23] remove logging private data

---
 src/notebooks/deepnote/integrations/integrationWebview.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index a7f7b3da3f..060b430f78 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -105,7 +105,6 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             status: integration.status
         }));
         logger.debug(`IntegrationWebviewProvider: Sending ${integrationsData.length} integrations to webview`);
-        logger.trace('IntegrationWebviewProvider: Integration data:', JSON.stringify(integrationsData, null, 2));
 
         await this.currentPanel.webview.postMessage({
             integrations: integrationsData,

From 4b7dc3cbfcfb0ec0234a964dad0546953a977d66 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:35:14 +0200
Subject: [PATCH 12/23] add dispose logic for integration storage

---
 .../deepnote/integrations/integrationStorage.ts  | 16 +++++++++++++++-
 src/notebooks/deepnote/integrations/types.ts     |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationStorage.ts b/src/notebooks/deepnote/integrations/integrationStorage.ts
index 729a9c64d6..dac85950e0 100644
--- a/src/notebooks/deepnote/integrations/integrationStorage.ts
+++ b/src/notebooks/deepnote/integrations/integrationStorage.ts
@@ -2,6 +2,7 @@ import { inject, injectable } from 'inversify';
 import { EventEmitter } from 'vscode';
 
 import { IEncryptedStorage } from '../../../platform/common/application/types';
+import { IAsyncDisposableRegistry } from '../../../platform/common/types';
 import { logger } from '../../../platform/logging';
 import { IntegrationConfig, IntegrationType } from './integrationTypes';
 
@@ -22,7 +23,13 @@ export class IntegrationStorage {
 
     public readonly onDidChangeIntegrations = this._onDidChangeIntegrations.event;
 
-    constructor(@inject(IEncryptedStorage) private readonly encryptedStorage: IEncryptedStorage) {}
+    constructor(
+        @inject(IEncryptedStorage) private readonly encryptedStorage: IEncryptedStorage,
+        @inject(IAsyncDisposableRegistry) asyncRegistry: IAsyncDisposableRegistry
+    ) {
+        // Register for disposal when the extension deactivates
+        asyncRegistry.push(this);
+    }
 
     /**
      * Get all stored integration configurations
@@ -168,4 +175,11 @@ export class IntegrationStorage {
         const indexJson = JSON.stringify(integrationIds);
         await this.encryptedStorage.store(INTEGRATION_SERVICE_NAME, 'index', indexJson);
     }
+
+    /**
+     * Dispose of resources to prevent memory leaks
+     */
+    public dispose(): void {
+        this._onDidChangeIntegrations.dispose();
+    }
 }
diff --git a/src/notebooks/deepnote/integrations/types.ts b/src/notebooks/deepnote/integrations/types.ts
index 35bc91bc8a..f414e34583 100644
--- a/src/notebooks/deepnote/integrations/types.ts
+++ b/src/notebooks/deepnote/integrations/types.ts
@@ -1,8 +1,9 @@
 import { Event } from 'vscode';
+import { IDisposable } from '../../../platform/common/types';
 import { IntegrationConfig, IntegrationWithStatus } from './integrationTypes';
 
 export const IIntegrationStorage = Symbol('IIntegrationStorage');
-export interface IIntegrationStorage {
+export interface IIntegrationStorage extends IDisposable {
     /**
      * Event fired when integrations change
      */

From 082797cc10e7b6bff611b305ac07a0578629035f Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 13:58:11 +0200
Subject: [PATCH 13/23] add localization for integration management views

---
 src/messageTypes.ts                           | 42 ++++++++++++++
 .../integrations/integrationWebview.ts        | 58 +++++++++++++++++++
 src/platform/common/utils/localize.ts         | 45 ++++++++++++++
 src/platform/webviews/webviewHost.ts          | 41 ++++++++++++-
 .../integrations/BigQueryForm.tsx             | 38 ++++++++----
 .../integrations/ConfigurationForm.tsx        |  8 ++-
 .../integrations/IntegrationItem.tsx          | 12 +++-
 .../integrations/IntegrationList.tsx          |  7 ++-
 .../integrations/IntegrationPanel.tsx         | 28 +++++++--
 .../integrations/PostgresForm.tsx             | 43 +++++++++-----
 .../webview-side/integrations/types.ts        |  7 ++-
 11 files changed, 288 insertions(+), 41 deletions(-)

diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index 273c8f7bb5..85bc510d84 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -165,6 +165,48 @@ export type LocalizedMessages = {
     dataframePageOf: string;
     dataframeCopyTable: string;
     dataframeExportTable: string;
+    // Integration panel strings
+    integrationsTitle: string;
+    integrationsNoIntegrationsFound: string;
+    integrationsConnected: string;
+    integrationsNotConfigured: string;
+    integrationsConfigure: string;
+    integrationsReconfigure: string;
+    integrationsReset: string;
+    integrationsConfirmResetTitle: string;
+    integrationsConfirmResetMessage: string;
+    integrationsConfirmResetDetails: string;
+    integrationsConfigureTitle: string;
+    integrationsCancel: string;
+    integrationsSave: string;
+    // PostgreSQL form strings
+    integrationsPostgresNameLabel: string;
+    integrationsPostgresNamePlaceholder: string;
+    integrationsPostgresHostLabel: string;
+    integrationsPostgresHostPlaceholder: string;
+    integrationsPostgresPortLabel: string;
+    integrationsPostgresPortPlaceholder: string;
+    integrationsPostgresDatabaseLabel: string;
+    integrationsPostgresDatabasePlaceholder: string;
+    integrationsPostgresUsernameLabel: string;
+    integrationsPostgresUsernamePlaceholder: string;
+    integrationsPostgresPasswordLabel: string;
+    integrationsPostgresPasswordPlaceholder: string;
+    integrationsPostgresSslLabel: string;
+    integrationsPostgresUnnamedIntegration: string;
+    // BigQuery form strings
+    integrationsBigQueryNameLabel: string;
+    integrationsBigQueryNamePlaceholder: string;
+    integrationsBigQueryProjectIdLabel: string;
+    integrationsBigQueryProjectIdPlaceholder: string;
+    integrationsBigQueryCredentialsLabel: string;
+    integrationsBigQueryCredentialsPlaceholder: string;
+    integrationsBigQueryCredentialsRequired: string;
+    integrationsBigQueryInvalidJson: string;
+    integrationsBigQueryUnnamedIntegration: string;
+    // Common form strings
+    integrationsRequiredField: string;
+    integrationsOptionalField: string;
 };
 // Map all messages to specific payloads
 export class IInteractiveWindowMapping {
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index 060b430f78..5f0167f7f5 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -2,7 +2,9 @@ import { inject, injectable } from 'inversify';
 import { Disposable, l10n, Uri, ViewColumn, WebviewPanel, window } from 'vscode';
 
 import { IExtensionContext } from '../../../platform/common/types';
+import * as localize from '../../../platform/common/utils/localize';
 import { logger } from '../../../platform/logging';
+import { LocalizedMessages, SharedMessages } from '../../../messageTypes';
 import { IIntegrationStorage, IIntegrationWebviewProvider } from './types';
 import { IntegrationConfig, IntegrationStatus, IntegrationWithStatus } from './integrationTypes';
 
@@ -82,6 +84,7 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             this.disposables
         );
 
+        await this.sendLocStrings();
         await this.updateWebview();
 
         // If a specific integration was requested, show its configuration form
@@ -90,6 +93,61 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
         }
     }
 
+    /**
+     * Send localization strings to the webview
+     */
+    private async sendLocStrings(): Promise<void> {
+        if (!this.currentPanel) {
+            return;
+        }
+
+        const locStrings: Partial<LocalizedMessages> = {
+            integrationsTitle: localize.Integrations.title,
+            integrationsNoIntegrationsFound: localize.Integrations.noIntegrationsFound,
+            integrationsConnected: localize.Integrations.connected,
+            integrationsNotConfigured: localize.Integrations.notConfigured,
+            integrationsConfigure: localize.Integrations.configure,
+            integrationsReconfigure: localize.Integrations.reconfigure,
+            integrationsReset: localize.Integrations.reset,
+            integrationsConfirmResetTitle: localize.Integrations.confirmResetTitle,
+            integrationsConfirmResetMessage: localize.Integrations.confirmResetMessage,
+            integrationsConfirmResetDetails: localize.Integrations.confirmResetDetails,
+            integrationsConfigureTitle: localize.Integrations.configureTitle,
+            integrationsCancel: localize.Integrations.cancel,
+            integrationsSave: localize.Integrations.save,
+            integrationsRequiredField: localize.Integrations.requiredField,
+            integrationsOptionalField: localize.Integrations.optionalField,
+            integrationsPostgresNameLabel: localize.Integrations.postgresNameLabel,
+            integrationsPostgresNamePlaceholder: localize.Integrations.postgresNamePlaceholder,
+            integrationsPostgresHostLabel: localize.Integrations.postgresHostLabel,
+            integrationsPostgresHostPlaceholder: localize.Integrations.postgresHostPlaceholder,
+            integrationsPostgresPortLabel: localize.Integrations.postgresPortLabel,
+            integrationsPostgresPortPlaceholder: localize.Integrations.postgresPortPlaceholder,
+            integrationsPostgresDatabaseLabel: localize.Integrations.postgresDatabaseLabel,
+            integrationsPostgresDatabasePlaceholder: localize.Integrations.postgresDatabasePlaceholder,
+            integrationsPostgresUsernameLabel: localize.Integrations.postgresUsernameLabel,
+            integrationsPostgresUsernamePlaceholder: localize.Integrations.postgresUsernamePlaceholder,
+            integrationsPostgresPasswordLabel: localize.Integrations.postgresPasswordLabel,
+            integrationsPostgresPasswordPlaceholder: localize.Integrations.postgresPasswordPlaceholder,
+            integrationsPostgresSslLabel: localize.Integrations.postgresSslLabel,
+            integrationsPostgresUnnamedIntegration: '', // Will be formatted on the client side
+            integrationsBigQueryNameLabel: localize.Integrations.bigQueryNameLabel,
+            integrationsBigQueryNamePlaceholder: localize.Integrations.bigQueryNamePlaceholder,
+            integrationsBigQueryProjectIdLabel: localize.Integrations.bigQueryProjectIdLabel,
+            integrationsBigQueryProjectIdPlaceholder: localize.Integrations.bigQueryProjectIdPlaceholder,
+            integrationsBigQueryCredentialsLabel: localize.Integrations.bigQueryCredentialsLabel,
+            integrationsBigQueryCredentialsPlaceholder: localize.Integrations.bigQueryCredentialsPlaceholder,
+            integrationsBigQueryCredentialsRequired: localize.Integrations.bigQueryCredentialsRequired,
+            integrationsBigQueryInvalidJson: '', // Will be formatted on the client side
+            integrationsBigQueryUnnamedIntegration: '' // Will be formatted on the client side
+        };
+
+        await this.currentPanel.webview.postMessage({
+            type: SharedMessages.LocInit,
+            locStrings: JSON.stringify(locStrings)
+        });
+    }
+
     /**
      * Update the webview with current integration data
      */
diff --git a/src/platform/common/utils/localize.ts b/src/platform/common/utils/localize.ts
index efab91f883..ae961c9442 100644
--- a/src/platform/common/utils/localize.ts
+++ b/src/platform/common/utils/localize.ts
@@ -814,6 +814,51 @@ export namespace WebViews {
     export const dataframeExportTable = l10n.t('Export table');
 }
 
+export namespace Integrations {
+    export const title = l10n.t('Deepnote Integrations');
+    export const noIntegrationsFound = l10n.t('No integrations found in this project.');
+    export const connected = l10n.t('Connected');
+    export const notConfigured = l10n.t('Not Configured');
+    export const configure = l10n.t('Configure');
+    export const reconfigure = l10n.t('Reconfigure');
+    export const reset = l10n.t('Reset');
+    export const confirmResetTitle = l10n.t('Confirm Reset');
+    export const confirmResetMessage = l10n.t('Are you sure you want to reset this integration configuration?');
+    export const confirmResetDetails = l10n.t('This will remove the stored credentials. You can reconfigure it later.');
+    export const configureTitle = l10n.t('Configure Integration: {0}');
+    export const cancel = l10n.t('Cancel');
+    export const save = l10n.t('Save');
+    export const requiredField = l10n.t('*');
+    export const optionalField = l10n.t('(optional)');
+
+    // PostgreSQL form strings
+    export const postgresNameLabel = l10n.t('Name (optional)');
+    export const postgresNamePlaceholder = l10n.t('My PostgreSQL Database');
+    export const postgresHostLabel = l10n.t('Host');
+    export const postgresHostPlaceholder = l10n.t('localhost');
+    export const postgresPortLabel = l10n.t('Port');
+    export const postgresPortPlaceholder = l10n.t('5432');
+    export const postgresDatabaseLabel = l10n.t('Database');
+    export const postgresDatabasePlaceholder = l10n.t('mydb');
+    export const postgresUsernameLabel = l10n.t('Username');
+    export const postgresUsernamePlaceholder = l10n.t('postgres');
+    export const postgresPasswordLabel = l10n.t('Password');
+    export const postgresPasswordPlaceholder = l10n.t('••••••••');
+    export const postgresSslLabel = l10n.t('Use SSL');
+    export const postgresUnnamedIntegration = (id: string) => l10n.t('Unnamed PostgreSQL Integration ({0})', id);
+
+    // BigQuery form strings
+    export const bigQueryNameLabel = l10n.t('Name (optional)');
+    export const bigQueryNamePlaceholder = l10n.t('My BigQuery Project');
+    export const bigQueryProjectIdLabel = l10n.t('Project ID');
+    export const bigQueryProjectIdPlaceholder = l10n.t('my-project-id');
+    export const bigQueryCredentialsLabel = l10n.t('Service Account Credentials (JSON)');
+    export const bigQueryCredentialsPlaceholder = l10n.t('{"type": "service_account", ...}');
+    export const bigQueryCredentialsRequired = l10n.t('Credentials are required');
+    export const bigQueryInvalidJson = (message: string) => l10n.t('Invalid JSON: {0}', message);
+    export const bigQueryUnnamedIntegration = (id: string) => l10n.t('Unnamed BigQuery Integration ({0})', id);
+}
+
 export namespace Deprecated {
     export const SHOW_DEPRECATED_FEATURE_PROMPT_FORMAT_ON_SAVE = l10n.t({
         message: "The setting 'python.formatting.formatOnSave' is deprecated, please use 'editor.formatOnSave'.",
diff --git a/src/platform/webviews/webviewHost.ts b/src/platform/webviews/webviewHost.ts
index b26727cdfd..4957cc5692 100644
--- a/src/platform/webviews/webviewHost.ts
+++ b/src/platform/webviews/webviewHost.ts
@@ -265,7 +265,46 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             dataframeNextPage: localize.WebViews.dataframeNextPage,
             dataframePageOf: localize.WebViews.dataframePageOf,
             dataframeCopyTable: localize.WebViews.dataframeCopyTable,
-            dataframeExportTable: localize.WebViews.dataframeExportTable
+            dataframeExportTable: localize.WebViews.dataframeExportTable,
+            // Integration panel strings (not used in this webview, but required by type)
+            integrationsTitle: '',
+            integrationsNoIntegrationsFound: '',
+            integrationsConnected: '',
+            integrationsNotConfigured: '',
+            integrationsConfigure: '',
+            integrationsReconfigure: '',
+            integrationsReset: '',
+            integrationsConfirmResetTitle: '',
+            integrationsConfirmResetMessage: '',
+            integrationsConfirmResetDetails: '',
+            integrationsConfigureTitle: '',
+            integrationsCancel: '',
+            integrationsSave: '',
+            integrationsPostgresNameLabel: '',
+            integrationsPostgresNamePlaceholder: '',
+            integrationsPostgresHostLabel: '',
+            integrationsPostgresHostPlaceholder: '',
+            integrationsPostgresPortLabel: '',
+            integrationsPostgresPortPlaceholder: '',
+            integrationsPostgresDatabaseLabel: '',
+            integrationsPostgresDatabasePlaceholder: '',
+            integrationsPostgresUsernameLabel: '',
+            integrationsPostgresUsernamePlaceholder: '',
+            integrationsPostgresPasswordLabel: '',
+            integrationsPostgresPasswordPlaceholder: '',
+            integrationsPostgresSslLabel: '',
+            integrationsPostgresUnnamedIntegration: '',
+            integrationsBigQueryNameLabel: '',
+            integrationsBigQueryNamePlaceholder: '',
+            integrationsBigQueryProjectIdLabel: '',
+            integrationsBigQueryProjectIdPlaceholder: '',
+            integrationsBigQueryCredentialsLabel: '',
+            integrationsBigQueryCredentialsPlaceholder: '',
+            integrationsBigQueryCredentialsRequired: '',
+            integrationsBigQueryInvalidJson: '',
+            integrationsBigQueryUnnamedIntegration: '',
+            integrationsRequiredField: '',
+            integrationsOptionalField: ''
         };
         this.postMessageInternal(SharedMessages.LocInit, JSON.stringify(locStrings)).catch(noop);
     }
diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index a354184fc3..6edc2e8449 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { getLocString } from '../react-common/locReactSide';
 import { BigQueryIntegrationConfig } from './types';
 
 export interface IBigQueryFormProps {
@@ -27,7 +27,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
     const validateCredentials = (value: string): boolean => {
         if (!value.trim()) {
-            setCredentialsError('Credentials are required');
+            setCredentialsError(getLocString('integrationsBigQueryCredentialsRequired', 'Credentials are required'));
             return false;
         }
 
@@ -37,7 +37,11 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return true;
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Invalid JSON format';
-            setCredentialsError(`Invalid JSON: ${errorMessage}`);
+            const invalidJsonMsg = getLocString('integrationsBigQueryInvalidJson', 'Invalid JSON: {0}').replace(
+                '{0}',
+                errorMessage
+            );
+            setCredentialsError(invalidJsonMsg);
             return false;
         }
     };
@@ -56,9 +60,14 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return;
         }
 
+        const unnamedIntegration = getLocString(
+            'integrationsBigQueryUnnamedIntegration',
+            'Unnamed BigQuery Integration ({0})'
+        ).replace('{0}', integrationId);
+
         const config: BigQueryIntegrationConfig = {
             id: integrationId,
-            name: name || `Unnamed BigQuery Integration (${integrationId})`,
+            name: name || unnamedIntegration,
             type: 'bigquery',
             projectId,
             credentials
@@ -70,27 +79,28 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">Name (optional)</label>
+                <label htmlFor="name">{getLocString('integrationsBigQueryNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
-                    placeholder="My BigQuery Project"
+                    placeholder={getLocString('integrationsBigQueryNamePlaceholder', 'My BigQuery Project')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="projectId">
-                    Project ID <span className="required">*</span>
+                    {getLocString('integrationsBigQueryProjectIdLabel', 'Project ID')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="text"
                     id="projectId"
                     value={projectId}
                     onChange={(e) => setProjectId(e.target.value)}
-                    placeholder="my-project-id"
+                    placeholder={getLocString('integrationsBigQueryProjectIdPlaceholder', 'my-project-id')}
                     autoComplete="off"
                     required
                 />
@@ -98,13 +108,17 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="credentials">
-                    Service Account Credentials (JSON) <span className="required">*</span>
+                    {getLocString('integrationsBigQueryCredentialsLabel', 'Service Account Credentials (JSON)')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <textarea
                     id="credentials"
                     value={credentials}
                     onChange={handleCredentialsChange}
-                    placeholder='{"type": "service_account", ...}'
+                    placeholder={getLocString(
+                        'integrationsBigQueryCredentialsPlaceholder',
+                        '{"type": "service_account", ...}'
+                    )}
                     rows={10}
                     autoComplete="off"
                     spellCheck={false}
@@ -123,10 +137,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-actions">
                 <button type="submit" className="primary">
-                    Save
+                    {getLocString('integrationsSave', 'Save')}
                 </button>
                 <button type="button" className="secondary" onClick={onCancel}>
-                    Cancel
+                    {getLocString('integrationsCancel', 'Cancel')}
                 </button>
             </div>
         </form>
diff --git a/src/webviews/webview-side/integrations/ConfigurationForm.tsx b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
index 1fc404ce4c..1d7c7c583c 100644
--- a/src/webviews/webview-side/integrations/ConfigurationForm.tsx
+++ b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { PostgresForm } from './PostgresForm';
 import { BigQueryForm } from './BigQueryForm';
 import { IntegrationConfig } from './types';
@@ -34,11 +35,16 @@ export const ConfigurationForm: React.FC<IConfigurationFormProps> = ({
 
     const integrationType = getIntegrationType();
 
+    const title = getLocString('integrationsConfigureTitle', 'Configure Integration: {0}').replace(
+        '{0}',
+        integrationId
+    );
+
     return (
         <div className="configuration-form-overlay">
             <div className="configuration-form-container">
                 <div className="configuration-form-header">
-                    <h2>Configure Integration: {integrationId}</h2>
+                    <h2>{title}</h2>
                     <button type="button" className="close-button" onClick={onCancel}>
                         ×
                     </button>
diff --git a/src/webviews/webview-side/integrations/IntegrationItem.tsx b/src/webviews/webview-side/integrations/IntegrationItem.tsx
index de103cb88d..6e756c2159 100644
--- a/src/webviews/webview-side/integrations/IntegrationItem.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationItem.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { IntegrationWithStatus } from './types';
 
 export interface IIntegrationItemProps {
@@ -9,8 +10,13 @@ export interface IIntegrationItemProps {
 
 export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onDelete }) => {
     const statusClass = integration.status === 'connected' ? 'status-connected' : 'status-disconnected';
-    const statusText = integration.status === 'connected' ? 'Connected' : 'Not Configured';
-    const configureText = integration.config ? 'Reconfigure' : 'Configure';
+    const statusText =
+        integration.status === 'connected'
+            ? getLocString('integrationsConnected', 'Connected')
+            : getLocString('integrationsNotConfigured', 'Not Configured');
+    const configureText = integration.config
+        ? getLocString('integrationsReconfigure', 'Reconfigure')
+        : getLocString('integrationsConfigure', 'Configure');
     const displayName = integration.config?.name || integration.id;
 
     return (
@@ -25,7 +31,7 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
                 </button>
                 {integration.config && (
                     <button type="button" className="secondary" onClick={() => onDelete(integration.id)}>
-                        Reset
+                        {getLocString('integrationsReset', 'Reset')}
                     </button>
                 )}
             </div>
diff --git a/src/webviews/webview-side/integrations/IntegrationList.tsx b/src/webviews/webview-side/integrations/IntegrationList.tsx
index 954a0d286a..d003ec78dd 100644
--- a/src/webviews/webview-side/integrations/IntegrationList.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationList.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { IntegrationItem } from './IntegrationItem';
 import { IntegrationWithStatus } from './types';
 
@@ -10,7 +11,11 @@ export interface IIntegrationListProps {
 
 export const IntegrationList: React.FC<IIntegrationListProps> = ({ integrations, onConfigure, onDelete }) => {
     if (integrations.length === 0) {
-        return <p className="no-integrations">No integrations found in this project.</p>;
+        return (
+            <p className="no-integrations">
+                {getLocString('integrationsNoIntegrationsFound', 'No integrations found in this project.')}
+            </p>
+        );
     }
 
     return (
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index 89c950e44c..9de76d40b0 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IVsCodeApi } from '../react-common/postOffice';
+import { getLocString, storeLocStrings } from '../react-common/locReactSide';
 import { IntegrationList } from './IntegrationList';
 import { ConfigurationForm } from './ConfigurationForm';
 import { IntegrationWithStatus, WebviewMessage, IntegrationConfig } from './types';
@@ -39,6 +40,13 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
             const msg = event.data;
 
             switch (msg.type) {
+                case 'loc_init':
+                    if (msg.type === 'loc_init') {
+                        const locStrings = JSON.parse(msg.locStrings);
+                        storeLocStrings(locStrings);
+                    }
+                    break;
+
                 case 'update':
                     setIntegrations(msg.integrations);
                     break;
@@ -129,7 +137,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
     return (
         <div className={`integration-panel theme-${baseTheme}`}>
-            <h1>Deepnote Integrations</h1>
+            <h1>{getLocString('integrationsTitle', 'Deepnote Integrations')}</h1>
 
             {message && <div className={`message message-${message.type}`}>{message.text}</div>}
 
@@ -148,20 +156,28 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
                 <div className="configuration-form-overlay">
                     <div className="configuration-form-container" style={{ maxWidth: '400px' }}>
                         <div className="configuration-form-header">
-                            <h2>Confirm Reset</h2>
+                            <h2>{getLocString('integrationsConfirmResetTitle', 'Confirm Reset')}</h2>
                         </div>
                         <div className="configuration-form-body">
-                            <p>Are you sure you want to reset this integration configuration?</p>
+                            <p>
+                                {getLocString(
+                                    'integrationsConfirmResetMessage',
+                                    'Are you sure you want to reset this integration configuration?'
+                                )}
+                            </p>
                             <p style={{ marginTop: '10px', fontSize: '0.9em', opacity: 0.8 }}>
-                                This will remove the stored credentials. You can reconfigure it later.
+                                {getLocString(
+                                    'integrationsConfirmResetDetails',
+                                    'This will remove the stored credentials. You can reconfigure it later.'
+                                )}
                             </p>
                         </div>
                         <div className="form-actions">
                             <button type="button" className="primary" onClick={handleConfirmDelete}>
-                                Reset
+                                {getLocString('integrationsReset', 'Reset')}
                             </button>
                             <button type="button" className="secondary" onClick={handleCancelDelete}>
-                                Cancel
+                                {getLocString('integrationsCancel', 'Cancel')}
                             </button>
                         </div>
                     </div>
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index c61439312d..be7af921eb 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { PostgresIntegrationConfig } from './types';
 
 export interface IPostgresFormProps {
@@ -33,9 +34,14 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
 
+        const unnamedIntegration = getLocString(
+            'integrationsPostgresUnnamedIntegration',
+            'Unnamed PostgreSQL Integration ({0})'
+        ).replace('{0}', integrationId);
+
         const config: PostgresIntegrationConfig = {
             id: integrationId,
-            name: name || `Unnamed PostgreSQL Integration (${integrationId})`,
+            name: name || unnamedIntegration,
             type: 'postgres',
             host,
             port: parseInt(port, 10),
@@ -51,27 +57,28 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">Name (optional)</label>
+                <label htmlFor="name">{getLocString('integrationsPostgresNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
-                    placeholder="My PostgreSQL Database"
+                    placeholder={getLocString('integrationsPostgresNamePlaceholder', 'My PostgreSQL Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    Host <span className="required">*</span>
+                    {getLocString('integrationsPostgresHostLabel', 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="text"
                     id="host"
                     value={host}
                     onChange={(e) => setHost(e.target.value)}
-                    placeholder="localhost"
+                    placeholder={getLocString('integrationsPostgresHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
@@ -79,14 +86,15 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="port">
-                    Port <span className="required">*</span>
+                    {getLocString('integrationsPostgresPortLabel', 'Port')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="number"
                     id="port"
                     value={port}
                     onChange={(e) => setPort(e.target.value)}
-                    placeholder="5432"
+                    placeholder={getLocString('integrationsPostgresPortPlaceholder', '5432')}
                     min={1}
                     max={65535}
                     step={1}
@@ -97,14 +105,15 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="database">
-                    Database <span className="required">*</span>
+                    {getLocString('integrationsPostgresDatabaseLabel', 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="text"
                     id="database"
                     value={database}
                     onChange={(e) => setDatabase(e.target.value)}
-                    placeholder="mydb"
+                    placeholder={getLocString('integrationsPostgresDatabasePlaceholder', 'mydb')}
                     autoComplete="off"
                     required
                 />
@@ -112,14 +121,15 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="username">
-                    Username <span className="required">*</span>
+                    {getLocString('integrationsPostgresUsernameLabel', 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="text"
                     id="username"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
-                    placeholder="postgres"
+                    placeholder={getLocString('integrationsPostgresUsernamePlaceholder', 'postgres')}
                     autoComplete="username"
                     required
                 />
@@ -127,14 +137,15 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
             <div className="form-group">
                 <label htmlFor="password">
-                    Password <span className="required">*</span>
+                    {getLocString('integrationsPostgresPasswordLabel', 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="password"
                     id="password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    placeholder="••••••••"
+                    placeholder={getLocString('integrationsPostgresPasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />
@@ -143,16 +154,16 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
             <div className="form-group checkbox-group">
                 <label>
                     <input type="checkbox" checked={ssl} onChange={(e) => setSsl(e.target.checked)} />
-                    Use SSL
+                    {getLocString('integrationsPostgresSslLabel', 'Use SSL')}
                 </label>
             </div>
 
             <div className="form-actions">
                 <button type="submit" className="primary">
-                    Save
+                    {getLocString('integrationsSave', 'Save')}
                 </button>
                 <button type="button" className="secondary" onClick={onCancel}>
-                    Cancel
+                    {getLocString('integrationsCancel', 'Cancel')}
                 </button>
             </div>
         </form>
diff --git a/src/webviews/webview-side/integrations/types.ts b/src/webviews/webview-side/integrations/types.ts
index 65bfdbf49d..34c4f61211 100644
--- a/src/webviews/webview-side/integrations/types.ts
+++ b/src/webviews/webview-side/integrations/types.ts
@@ -54,4 +54,9 @@ export interface StatusMessage {
     message: string;
 }
 
-export type WebviewMessage = UpdateMessage | ShowFormMessage | StatusMessage;
+export interface LocInitMessage {
+    type: 'loc_init';
+    locStrings: string;
+}
+
+export type WebviewMessage = UpdateMessage | ShowFormMessage | StatusMessage | LocInitMessage;

From ec55052b1d7439a59f3874a197731f02fe2762d5 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:10:51 +0200
Subject: [PATCH 14/23] remove empty localization strings

---
 src/messageTypes.ts                                  |  3 ---
 .../deepnote/integrations/integrationWebview.ts      |  5 +----
 src/platform/webviews/webviewHost.ts                 |  3 ---
 .../webview-side/integrations/BigQueryForm.tsx       | 12 +++---------
 .../webview-side/integrations/PostgresForm.tsx       |  7 ++-----
 5 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index 85bc510d84..4398a4d655 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -193,7 +193,6 @@ export type LocalizedMessages = {
     integrationsPostgresPasswordLabel: string;
     integrationsPostgresPasswordPlaceholder: string;
     integrationsPostgresSslLabel: string;
-    integrationsPostgresUnnamedIntegration: string;
     // BigQuery form strings
     integrationsBigQueryNameLabel: string;
     integrationsBigQueryNamePlaceholder: string;
@@ -202,8 +201,6 @@ export type LocalizedMessages = {
     integrationsBigQueryCredentialsLabel: string;
     integrationsBigQueryCredentialsPlaceholder: string;
     integrationsBigQueryCredentialsRequired: string;
-    integrationsBigQueryInvalidJson: string;
-    integrationsBigQueryUnnamedIntegration: string;
     // Common form strings
     integrationsRequiredField: string;
     integrationsOptionalField: string;
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index 5f0167f7f5..de751257dd 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -130,16 +130,13 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsPostgresPasswordLabel: localize.Integrations.postgresPasswordLabel,
             integrationsPostgresPasswordPlaceholder: localize.Integrations.postgresPasswordPlaceholder,
             integrationsPostgresSslLabel: localize.Integrations.postgresSslLabel,
-            integrationsPostgresUnnamedIntegration: '', // Will be formatted on the client side
             integrationsBigQueryNameLabel: localize.Integrations.bigQueryNameLabel,
             integrationsBigQueryNamePlaceholder: localize.Integrations.bigQueryNamePlaceholder,
             integrationsBigQueryProjectIdLabel: localize.Integrations.bigQueryProjectIdLabel,
             integrationsBigQueryProjectIdPlaceholder: localize.Integrations.bigQueryProjectIdPlaceholder,
             integrationsBigQueryCredentialsLabel: localize.Integrations.bigQueryCredentialsLabel,
             integrationsBigQueryCredentialsPlaceholder: localize.Integrations.bigQueryCredentialsPlaceholder,
-            integrationsBigQueryCredentialsRequired: localize.Integrations.bigQueryCredentialsRequired,
-            integrationsBigQueryInvalidJson: '', // Will be formatted on the client side
-            integrationsBigQueryUnnamedIntegration: '' // Will be formatted on the client side
+            integrationsBigQueryCredentialsRequired: localize.Integrations.bigQueryCredentialsRequired
         };
 
         await this.currentPanel.webview.postMessage({
diff --git a/src/platform/webviews/webviewHost.ts b/src/platform/webviews/webviewHost.ts
index 4957cc5692..22e99ba093 100644
--- a/src/platform/webviews/webviewHost.ts
+++ b/src/platform/webviews/webviewHost.ts
@@ -293,7 +293,6 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             integrationsPostgresPasswordLabel: '',
             integrationsPostgresPasswordPlaceholder: '',
             integrationsPostgresSslLabel: '',
-            integrationsPostgresUnnamedIntegration: '',
             integrationsBigQueryNameLabel: '',
             integrationsBigQueryNamePlaceholder: '',
             integrationsBigQueryProjectIdLabel: '',
@@ -301,8 +300,6 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             integrationsBigQueryCredentialsLabel: '',
             integrationsBigQueryCredentialsPlaceholder: '',
             integrationsBigQueryCredentialsRequired: '',
-            integrationsBigQueryInvalidJson: '',
-            integrationsBigQueryUnnamedIntegration: '',
             integrationsRequiredField: '',
             integrationsOptionalField: ''
         };
diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index 6edc2e8449..9584ddd15b 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getLocString } from '../react-common/locReactSide';
+import { format, getLocString } from '../react-common/locReactSide';
 import { BigQueryIntegrationConfig } from './types';
 
 export interface IBigQueryFormProps {
@@ -37,10 +37,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return true;
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Invalid JSON format';
-            const invalidJsonMsg = getLocString('integrationsBigQueryInvalidJson', 'Invalid JSON: {0}').replace(
-                '{0}',
-                errorMessage
-            );
+            const invalidJsonMsg = format('Invalid JSON: {0}', errorMessage);
             setCredentialsError(invalidJsonMsg);
             return false;
         }
@@ -60,10 +57,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return;
         }
 
-        const unnamedIntegration = getLocString(
-            'integrationsBigQueryUnnamedIntegration',
-            'Unnamed BigQuery Integration ({0})'
-        ).replace('{0}', integrationId);
+        const unnamedIntegration = format('Unnamed BigQuery Integration ({0})', integrationId);
 
         const config: BigQueryIntegrationConfig = {
             id: integrationId,
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index be7af921eb..929cb6eaa3 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getLocString } from '../react-common/locReactSide';
+import { format, getLocString } from '../react-common/locReactSide';
 import { PostgresIntegrationConfig } from './types';
 
 export interface IPostgresFormProps {
@@ -34,10 +34,7 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
 
-        const unnamedIntegration = getLocString(
-            'integrationsPostgresUnnamedIntegration',
-            'Unnamed PostgreSQL Integration ({0})'
-        ).replace('{0}', integrationId);
+        const unnamedIntegration = format('Unnamed PostgreSQL Integration ({0})', integrationId);
 
         const config: PostgresIntegrationConfig = {
             id: integrationId,

From b7034490c4dc8e0a6864f6182429f887dff1da60 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:11:40 +0200
Subject: [PATCH 15/23] fix sql status bar emitter disposing

---
 src/notebooks/deepnote/sqlCellStatusBarProvider.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index 4c759550e9..517f9113e2 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -41,6 +41,9 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
                 this._onDidChangeCellStatusBarItems.fire();
             })
         );
+
+        // Dispose our emitter with the extension
+        this.disposables.push(this._onDidChangeCellStatusBarItems);
     }
 
     public provideCellStatusBarItems(

From 23b71861a35929d5962985b6800c8afbb1feb124 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:15:29 +0200
Subject: [PATCH 16/23] add interface use

---
 src/notebooks/deepnote/integrations/integrationStorage.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/notebooks/deepnote/integrations/integrationStorage.ts b/src/notebooks/deepnote/integrations/integrationStorage.ts
index dac85950e0..a231318ea5 100644
--- a/src/notebooks/deepnote/integrations/integrationStorage.ts
+++ b/src/notebooks/deepnote/integrations/integrationStorage.ts
@@ -5,6 +5,7 @@ import { IEncryptedStorage } from '../../../platform/common/application/types';
 import { IAsyncDisposableRegistry } from '../../../platform/common/types';
 import { logger } from '../../../platform/logging';
 import { IntegrationConfig, IntegrationType } from './integrationTypes';
+import { IIntegrationStorage } from './types';
 
 const INTEGRATION_SERVICE_NAME = 'deepnote-integrations';
 
@@ -14,7 +15,7 @@ const INTEGRATION_SERVICE_NAME = 'deepnote-integrations';
  * Storage is scoped to the user's machine and shared across all deepnote projects.
  */
 @injectable()
-export class IntegrationStorage {
+export class IntegrationStorage implements IIntegrationStorage {
     private readonly cache: Map<string, IntegrationConfig> = new Map();
 
     private cacheLoaded = false;

From 65ed522c1eae0d5e779dc6174ae8181eb27f2a3b Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:16:12 +0200
Subject: [PATCH 17/23] fix integration emission

---
 src/notebooks/deepnote/integrations/integrationStorage.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/notebooks/deepnote/integrations/integrationStorage.ts b/src/notebooks/deepnote/integrations/integrationStorage.ts
index a231318ea5..17a8a2b15c 100644
--- a/src/notebooks/deepnote/integrations/integrationStorage.ts
+++ b/src/notebooks/deepnote/integrations/integrationStorage.ts
@@ -129,6 +129,9 @@ export class IntegrationStorage implements IIntegrationStorage {
 
         // Clear cache
         this.cache.clear();
+
+        // Notify listeners
+        this._onDidChangeIntegrations.fire();
     }
 
     /**

From 44afb9ceda42c7ed8f72b5d8a618ba9f7823db43 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:16:24 +0200
Subject: [PATCH 18/23] add form value resetting

---
 src/webviews/webview-side/integrations/BigQueryForm.tsx | 5 +++++
 src/webviews/webview-side/integrations/PostgresForm.tsx | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index 9584ddd15b..4be08bfdee 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -22,6 +22,11 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             setProjectId(existingConfig.projectId || '');
             setCredentials(existingConfig.credentials || '');
             setCredentialsError(null);
+        } else {
+            setName('');
+            setProjectId('');
+            setCredentials('');
+            setCredentialsError(null);
         }
     }, [existingConfig]);
 
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index 929cb6eaa3..25ad55e149 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -28,6 +28,14 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
             setUsername(existingConfig.username || '');
             setPassword(existingConfig.password || '');
             setSsl(existingConfig.ssl || false);
+        } else {
+            setName('');
+            setHost('');
+            setPort('5432');
+            setDatabase('');
+            setUsername('');
+            setPassword('');
+            setSsl(false);
         }
     }, [existingConfig]);
 

From 768aa724c8e643b78f4c1c312f1caa574afdeb5b Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 14:16:30 +0200
Subject: [PATCH 19/23] add trimming of config

---
 .../webview-side/integrations/BigQueryForm.tsx         | 10 ++++++----
 .../webview-side/integrations/PostgresForm.tsx         |  8 ++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index 4be08bfdee..cad543fce3 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -57,8 +57,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
 
+        const trimmedCredentials = credentials.trim();
+
         // Validate credentials before submitting
-        if (!validateCredentials(credentials)) {
+        if (!validateCredentials(trimmedCredentials)) {
             return;
         }
 
@@ -66,10 +68,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
         const config: BigQueryIntegrationConfig = {
             id: integrationId,
-            name: name || unnamedIntegration,
+            name: (name || unnamedIntegration).trim(),
             type: 'bigquery',
-            projectId,
-            credentials
+            projectId: projectId.trim(),
+            credentials: trimmedCredentials
         };
 
         onSave(config);
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index 25ad55e149..0a037da8fa 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -46,13 +46,13 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({ integrationId, exis
 
         const config: PostgresIntegrationConfig = {
             id: integrationId,
-            name: name || unnamedIntegration,
+            name: (name || unnamedIntegration).trim(),
             type: 'postgres',
             host,
             port: parseInt(port, 10),
-            database,
-            username,
-            password,
+            database: database.trim(),
+            username: username.trim(),
+            password: password.trim(),
             ssl
         };
 

From a6dd77469089c346601e9db81fda0913f4726d26 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 15:02:33 +0200
Subject: [PATCH 20/23] drop extra localization parsing roundtrip

---
 .../integrations/integrationWebview.ts        |  2 +-
 src/platform/webviews/webviewHost.ts          | 40 +------------------
 .../integrations/IntegrationPanel.tsx         |  2 +-
 .../webview-side/integrations/types.ts        |  2 +-
 .../webview-side/react-common/locReactSide.ts |  6 +--
 5 files changed, 8 insertions(+), 44 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index de751257dd..09c2134369 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -141,7 +141,7 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
 
         await this.currentPanel.webview.postMessage({
             type: SharedMessages.LocInit,
-            locStrings: JSON.stringify(locStrings)
+            locStrings: locStrings
         });
     }
 
diff --git a/src/platform/webviews/webviewHost.ts b/src/platform/webviews/webviewHost.ts
index 22e99ba093..643ae042d7 100644
--- a/src/platform/webviews/webviewHost.ts
+++ b/src/platform/webviews/webviewHost.ts
@@ -221,7 +221,7 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
     }
 
     protected async sendLocStrings() {
-        const locStrings: LocalizedMessages = {
+        const locStrings: Partial<LocalizedMessages> = {
             collapseSingle: localize.WebViews.collapseSingle,
             expandSingle: localize.WebViews.expandSingle,
             openExportFileYes: localize.DataScience.openExportFileYes,
@@ -265,43 +265,7 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             dataframeNextPage: localize.WebViews.dataframeNextPage,
             dataframePageOf: localize.WebViews.dataframePageOf,
             dataframeCopyTable: localize.WebViews.dataframeCopyTable,
-            dataframeExportTable: localize.WebViews.dataframeExportTable,
-            // Integration panel strings (not used in this webview, but required by type)
-            integrationsTitle: '',
-            integrationsNoIntegrationsFound: '',
-            integrationsConnected: '',
-            integrationsNotConfigured: '',
-            integrationsConfigure: '',
-            integrationsReconfigure: '',
-            integrationsReset: '',
-            integrationsConfirmResetTitle: '',
-            integrationsConfirmResetMessage: '',
-            integrationsConfirmResetDetails: '',
-            integrationsConfigureTitle: '',
-            integrationsCancel: '',
-            integrationsSave: '',
-            integrationsPostgresNameLabel: '',
-            integrationsPostgresNamePlaceholder: '',
-            integrationsPostgresHostLabel: '',
-            integrationsPostgresHostPlaceholder: '',
-            integrationsPostgresPortLabel: '',
-            integrationsPostgresPortPlaceholder: '',
-            integrationsPostgresDatabaseLabel: '',
-            integrationsPostgresDatabasePlaceholder: '',
-            integrationsPostgresUsernameLabel: '',
-            integrationsPostgresUsernamePlaceholder: '',
-            integrationsPostgresPasswordLabel: '',
-            integrationsPostgresPasswordPlaceholder: '',
-            integrationsPostgresSslLabel: '',
-            integrationsBigQueryNameLabel: '',
-            integrationsBigQueryNamePlaceholder: '',
-            integrationsBigQueryProjectIdLabel: '',
-            integrationsBigQueryProjectIdPlaceholder: '',
-            integrationsBigQueryCredentialsLabel: '',
-            integrationsBigQueryCredentialsPlaceholder: '',
-            integrationsBigQueryCredentialsRequired: '',
-            integrationsRequiredField: '',
-            integrationsOptionalField: ''
+            dataframeExportTable: localize.WebViews.dataframeExportTable
         };
         this.postMessageInternal(SharedMessages.LocInit, JSON.stringify(locStrings)).catch(noop);
     }
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index 9de76d40b0..dd82ce29c8 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -42,7 +42,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
             switch (msg.type) {
                 case 'loc_init':
                     if (msg.type === 'loc_init') {
-                        const locStrings = JSON.parse(msg.locStrings);
+                        const locStrings = msg.locStrings;
                         storeLocStrings(locStrings);
                     }
                     break;
diff --git a/src/webviews/webview-side/integrations/types.ts b/src/webviews/webview-side/integrations/types.ts
index 34c4f61211..f1d877f00e 100644
--- a/src/webviews/webview-side/integrations/types.ts
+++ b/src/webviews/webview-side/integrations/types.ts
@@ -56,7 +56,7 @@ export interface StatusMessage {
 
 export interface LocInitMessage {
     type: 'loc_init';
-    locStrings: string;
+    locStrings: Partial<import('../../../messageTypes').LocalizedMessages>;
 }
 
 export type WebviewMessage = UpdateMessage | ShowFormMessage | StatusMessage | LocInitMessage;
diff --git a/src/webviews/webview-side/react-common/locReactSide.ts b/src/webviews/webview-side/react-common/locReactSide.ts
index 813285de5a..0b22dde77a 100644
--- a/src/webviews/webview-side/react-common/locReactSide.ts
+++ b/src/webviews/webview-side/react-common/locReactSide.ts
@@ -6,17 +6,17 @@ import { LocalizedMessages } from '../../../messageTypes';
 // The react code can't use the localize.ts module because it reads from
 // disk. This isn't allowed inside a browser, so we pass the collection
 // through the javascript.
-let loadedCollection: LocalizedMessages | undefined;
+let loadedCollection: Partial<LocalizedMessages> | undefined;
 
 export function getLocString(key: keyof LocalizedMessages, defValue: string): string {
     if (loadedCollection && loadedCollection.hasOwnProperty(key)) {
-        return loadedCollection[key];
+        return loadedCollection[key] ?? defValue;
     }
 
     return defValue;
 }
 
-export function storeLocStrings(collection: LocalizedMessages) {
+export function storeLocStrings(collection: Partial<LocalizedMessages>) {
     loadedCollection = collection;
 }
 

From 1faed39dbb08d0d57f16ced7f7feeda56fb974e7 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 15:25:09 +0200
Subject: [PATCH 21/23] remove extra if

---
 src/webviews/webview-side/integrations/IntegrationPanel.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index dd82ce29c8..9c0506726f 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -41,10 +41,8 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
             switch (msg.type) {
                 case 'loc_init':
-                    if (msg.type === 'loc_init') {
-                        const locStrings = msg.locStrings;
-                        storeLocStrings(locStrings);
-                    }
+                    const locStrings = msg.locStrings;
+                    storeLocStrings(locStrings);
                     break;
 
                 case 'update':

From 94843c9743fcf975389c8b1513ac1d1152225df1 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 15:34:10 +0200
Subject: [PATCH 22/23] show "unknown integration" on block when not connected

---
 src/notebooks/deepnote/sqlCellStatusBarProvider.ts           | 2 +-
 src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index 517f9113e2..80740260a9 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -97,7 +97,7 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
 
         // Get integration configuration to display the name
         const config = await this.integrationStorage.getIntegrationConfig(projectId, integrationId);
-        const displayName = config?.name || integrationId;
+        const displayName = config?.name || l10n.t('Unknown integration (configure)');
 
         // Create a status bar item that opens the integration management UI
         return {
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
index 9e7376489a..1949be6712 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.unit.test.ts
@@ -89,7 +89,7 @@ suite('SqlCellStatusBarProvider', () => {
         assert.deepStrictEqual((result as any).command.arguments, [integrationId]);
     });
 
-    test('uses integration ID as display name when config not found', async () => {
+    test('shows "Unknown integration (configure)" when config not found', async () => {
         const integrationId = 'postgres-123';
         const cell = createMockCell(
             'sql',
@@ -106,7 +106,7 @@ suite('SqlCellStatusBarProvider', () => {
         const result = await provider.provideCellStatusBarItems(cell, cancellationToken);
 
         assert.isDefined(result);
-        assert.strictEqual((result as any).text, '$(database) postgres-123');
+        assert.strictEqual((result as any).text, '$(database) Unknown integration (configure)');
     });
 
     test('returns undefined when notebook has no project ID', async () => {

From ed650188a34c6fa2ef6642dd3f08b1264415a652 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Fri, 17 Oct 2025 15:45:09 +0200
Subject: [PATCH 23/23] fix scope leak

---
 src/webviews/webview-side/integrations/IntegrationPanel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index 9c0506726f..d8d396f5bb 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -41,8 +41,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
             switch (msg.type) {
                 case 'loc_init':
-                    const locStrings = msg.locStrings;
-                    storeLocStrings(locStrings);
+                    storeLocStrings(msg.locStrings);
                     break;
 
                 case 'update':