feat(vscode): rendered window is now more appropriate

Author: benfdking

vscode/extension/src/commands/renderModel.ts

@@ -2,8 +2,12 @@ import * as vscode from 'vscode'
 import { LSPClient } from '../lsp/lsp'
 import { isErr } from '@bus/result'
 import { RenderModelEntry } from '../lsp/custom'
+import { RenderedModelProvider } from '../providers/renderedModelProvider'
 
-export function renderModel(lspClient?: LSPClient) {
+export function renderModel(
+  lspClient?: LSPClient,
+  renderedModelProvider?: RenderedModelProvider,
+) {
   return async () => {
     // Get the current active editor
     const activeEditor = vscode.window.activeTextEditor
@@ -62,11 +66,19 @@ export function renderModel(lspClient?: LSPClient) {
       selectedModel = result.value.models[0]
     }
 
-    // Create a new untitled document with the rendered SQL
-    const document = await vscode.workspace.openTextDocument({
-      language: 'sql',
-      content: selectedModel.rendered_query,
-    })
+    if (!renderedModelProvider) {
+      vscode.window.showErrorMessage('Rendered model provider not available')
+      return
+    }
+
+    // Store the rendered content and get a virtual URI
+    const uri = renderedModelProvider.storeRenderedModel(
+      selectedModel.name,
+      selectedModel.rendered_query,
+    )
+
+    // Open the virtual document
+    const document = await vscode.workspace.openTextDocument(uri)
 
     // Determine the view column for side-by-side display
     let viewColumn: vscode.ViewColumn
@@ -86,5 +98,8 @@ export function renderModel(lspClient?: LSPClient) {
       preview: true,
       preserveFocus: false,
     })
+
+    // Explicitly set the language mode to SQL for syntax highlighting
+    await vscode.languages.setTextDocumentLanguage(document, 'sql')
   }
 }

vscode/extension/src/extension.ts

@@ -22,6 +22,7 @@ import {
 } from './utilities/errors'
 import { selector, completionProvider } from './completion/completion'
 import { LineagePanel } from './webviews/lineagePanel'
+import { RenderedModelProvider } from './providers/renderedModelProvider'
 
 let lspClient: LSPClient | undefined
 
@@ -65,10 +66,20 @@ export async function activate(context: vscode.ExtensionContext) {
 
   lspClient = new LSPClient()
 
+  // Create and register the rendered model provider
+  const renderedModelProvider = new RenderedModelProvider()
+  context.subscriptions.push(
+    vscode.workspace.registerTextDocumentContentProvider(
+      RenderedModelProvider.getScheme(),
+      renderedModelProvider,
+    ),
+    renderedModelProvider,
+  )
+
   context.subscriptions.push(
     vscode.commands.registerCommand(
       'sqlmesh.renderModel',
-      renderModel(lspClient),
+      renderModel(lspClient, renderedModelProvider),
     ),
   )
 

vscode/extension/src/providers/renderedModelProvider.ts

@@ -0,0 +1,54 @@
+import * as vscode from 'vscode'
+
+/**
+ * Content provider for read-only rendered SQL models
+ */
+export class RenderedModelProvider
+  implements vscode.TextDocumentContentProvider
+{
+  private static readonly scheme = 'sqlmesh-rendered'
+
+  private renderedModels = new Map<string, string>()
+
+  // Event emitter for content changes
+  private _onDidChange = new vscode.EventEmitter<vscode.Uri>()
+  readonly onDidChange = this._onDidChange.event
+
+  /**
+   * Provide text content for a given URI
+   */
+  provideTextDocumentContent(uri: vscode.Uri): string {
+    const key = uri.toString()
+    return this.renderedModels.get(key) || ''
+  }
+
+  /**
+   * Store rendered model content and create a URI for it
+   */
+  storeRenderedModel(modelName: string, content: string): vscode.Uri {
+    const fileName = `${modelName} (rendered)`
+    // Use vscode.Uri.from for proper URI construction
+    const uri = vscode.Uri.from({
+      scheme: RenderedModelProvider.scheme,
+      path: fileName,
+    })
+    this.renderedModels.set(uri.toString(), content)
+    this._onDidChange.fire(uri)
+    return uri
+  }
+
+  /**
+   * Get the URI scheme for rendered models
+   */
+  static getScheme(): string {
+    return this.scheme
+  }
+
+  /**
+   * Clean up old rendered models to prevent memory leaks
+   */
+  dispose() {
+    this.renderedModels.clear()
+    this._onDidChange.dispose()
+  }
+}