temp [ci skip]

Author: benfdking

package-lock.json

@@ -2,7 +2,6 @@ export type Callback = {
     openFile: {
         path: string
     }
-    formatProject: {}
 } 
 
 /**
@@ -12,8 +11,20 @@ export type Callback = {
  * 
  * Example:
  * const openFileEvent: CallbackEvent<'openFile'> = ['openFile', { path: '/path/to/file' }];
- * const formatProjectEvent: CallbackEvent<'formatProject'> = ['formatProject', {}];
  */
 export type CallbackEvent = {
     [K in keyof Callback]: { key: K; payload: Callback[K] }
-}[keyof Callback];
+}[keyof Callback];
+
+/**
+ * A tuple type representing a VSCode event with its associated payload.
+ */
+export type VSCodeCallback = {
+    changeFocusOnFile: {
+        path: string
+    }
+}
+
+export type VSCodeEvent = {
+    [K in keyof VSCodeCallback]: { key: K; payload: VSCodeCallback[K] }
+}[keyof VSCodeCallback];

vscode/bus/src/callbacks.ts

@@ -7,6 +7,7 @@ import {
 } from "./utilities/common/vscodeapi"
 import {
   registerLogger,
+  traceError,
   traceInfo,
   traceVerbose,
 } from "./utilities/common/log"
@@ -16,9 +17,9 @@ import { AuthenticationProviderTobikoCloud } from "./auth/auth"
 import { signOut } from "./commands/signout"
 import { signIn } from "./commands/signin"
 import { signInSpecifyFlow } from "./commands/signinSpecifyFlow"
-import { isErr } from "./utilities/functional/result"
-import { handleNotSginedInError } from "./utilities/errors"
-import { WebServer } from "./web-server/server"
+import { isErr, Result } from "./utilities/functional/result"
+import { ErrorType, handleNotSginedInError } from "./utilities/errors"
+import { startWebServer, WebServer } from "./web-server/server"
 import { LineagePanel } from "./webviews/lineagePanel"
 
 let lspClient: LSPClient | undefined
@@ -34,6 +35,12 @@ export async function activate(context: vscode.ExtensionContext) {
   )
   traceInfo("Activating SQLMesh extension")
 
+  const webServerOutputChannel = createOutputChannel("sqlmesh-webserver")
+  context.subscriptions.push(
+    webServerOutputChannel,
+    registerLogger(webServerOutputChannel)
+  )
+
   traceInfo("Registering authentication provider")
   const authProvider = new AuthenticationProviderTobikoCloud()
   context.subscriptions.push(
@@ -80,7 +87,25 @@ export async function activate(context: vscode.ExtensionContext) {
   }
   context.subscriptions.push(lspClient)
 
+  // start web server
+  const webServerResult = await startWebServer(webServerOutputChannel)
+  if (!isErr(webServerResult)) {
+    webServer = webServerResult.value
+  } else {
+    traceError("Failed to start web server", webServerResult.error)
+  }
+
   const restart = async () => {
+    if (webServer) {
+      webServer.stop();
+      webServer = undefined;
+      const webServerResult = await startWebServer(webServerOutputChannel)
+      if (!isErr(webServerResult)) {
+        webServer = webServerResult.value
+      } else {
+        traceError("Failed to start web server", webServerResult.error)
+      }
+    }
     if (lspClient) {
       traceVerbose("Restarting LSP client")
       const restartResult = await lspClient.restart()

vscode/extension/src/extension.ts

@@ -22,11 +22,21 @@ export class LineagePanel implements WebviewViewProvider, Disposable {
   public constructor(extensionUri: Uri, getServerUrl: () => string) {
     this._extensionUri = extensionUri;
     this.getServerUrl = getServerUrl;
-    window.onDidChangeActiveTextEditor(() => {
-      if (this.panel) {
-        const { externalUrl, externalAuthority } =
-          this.externalUrlAndAutority();
-        this.panel.webview.html = this.getHtml(externalUrl, externalAuthority);
+
+    if (this.panel) {
+      const { externalUrl, externalAuthority } = this.externalUrlAndAutority();
+      this.panel.webview.html = this.getHtml(externalUrl, externalAuthority);
+    }
+
+    window.onDidChangeActiveTextEditor((editor) => {
+      if (editor) {
+        this.panel?.webview.postMessage({
+          key: "vscode_callback",
+          payload: {
+            key: "changeFocusOnFile",
+            payload: { path: editor.document.uri.fsPath },
+          },
+        });
       }
     });
   }
@@ -133,7 +143,7 @@ export class LineagePanel implements WebviewViewProvider, Disposable {
   <meta http-equiv="Content-Security-Policy" content="default-src 'none'; frame-src ${externalAuthority}; connect-src ${externalAuthority}; img-src ${externalAuthority} data:; script-src 'unsafe-inline' ${externalAuthority}; style-src 'unsafe-inline' ${externalAuthority};">
 </head>
 <body>
-  ${isProduction() ? '' : `<div>${externalUrl}</div>`}
+  ${isProduction() ? "" : `<div>${externalUrl}</div>`}
   <iframe src="${externalUrl}" style="width:100%; height:100vh;" frameborder="0" allow="clipboard-read; clipboard-write"></iframe>
 </body>
 </html>        `;

vscode/extension/src/webviews/lineagePanel.ts

@@ -20,15 +20,15 @@
     "@tanstack/router-plugin": "^1.114.3",
     "apache-arrow": "^19.0.1",
     "orval": "^7.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",

vscode/react/package.json

@@ -9,12 +9,41 @@ import { useApiModelLineage, useApiModels } from '@/api'
 import LineageFlowProvider from '@/components/graph/context'
 import { ModelLineage } from '@/components/graph/ModelLineage'
 import { useVSCode } from '@/hooks/vscode'
+import React from 'react'
 
 export const Route = createFileRoute('/lineage')({
   component: Wrappper,
 })
 
 function Wrappper() {
+  // Handle messages from VSCode extension
+  React.useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Ensure the message is from VSCode
+      if (event.data && event.data.key === 'vscode_callback') {
+        const payload = event.data.payload
+        console.log('Received message from VSCode:', payload)
+        
+        // Handle different types of messages
+        switch (payload.key) {
+          case 'changeFocusOnFile':
+            console.log('Changing focus to file:', payload.payload.path)
+            // Implement your focus change logic here
+            break
+          default:
+            console.log('Unhandled message type:', payload.key)
+        }
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+    
+    // Clean up event listener on component unmount
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [])
+
   const client = new QueryClient({
     queryCache: new QueryCache({
       onError(error, query) {