refactor: separate clab-ui host contract from product runtimes

Author: FloSch62

apps/standalone/src/clabUiHost.ts

@@ -12,7 +12,7 @@ import "@webview/styles/global.css";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 
-import { createApiClabUiHost, setClabUiHost } from "@webview/host";
+import { setClabUiHost } from "@webview/host";
 import {
   setHostContext
 } from "@webview/services/topologyHostClient";
@@ -50,6 +50,7 @@ import { useEventStream } from "./hooks/useEventStream";
 import { LoginPage } from "./components/LoginPage";
 import { SettingsOverlay } from "./components/SettingsOverlay";
 import { getRuntimeContainersForLab, runtimeContainersEqual } from "./runtimeData";
+import { createApiClabUiHost } from "./clabUiHost";
 
 // Monaco workers setup
 const monacoGlobal = self as typeof self & {

apps/standalone/src/main.tsx

@@ -9,7 +9,7 @@ import "@webview/styles/global.css";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 
-import { createApiClabUiHost, setClabUiHost } from "@webview/host";
+import { setClabUiHost } from "@webview/host";
 import { setHostContext } from "@webview/services/topologyHostClient";
 import { refreshTopologySnapshot } from "@webview/services/topologyHostCommands";
 import { useGraphStore, useTopoViewerStore } from "@webview/stores";
@@ -39,6 +39,7 @@ import type {
 } from "@srl-labs/clab-ui/explorer/snapshot";
 import { installInMemoryApi } from "./mock/inMemoryApi";
 import { loadDevSession, saveDevSession } from "./mock/devSession";
+import { createApiClabUiHost } from "../apps/standalone/src/clabUiHost";
 
 const monacoGlobal = self as typeof self & {
   MonacoEnvironment?: {

dev/main.tsx

@@ -8,6 +8,8 @@
   "include": [
     "./**/*.ts",
     "./**/*.tsx",
+    "../apps/standalone/src/**/*.ts",
+    "../apps/standalone/src/**/*.tsx",
     "../src/reactTopoViewer/**/*.ts",
     "../src/reactTopoViewer/**/*.tsx",
     "../packages/**/*.ts",

dev/tsconfig.json

@@ -136,19 +136,19 @@ async function build() {
       outfile: "dist/containerlabExplorerView.js"
     },
     {
-      entryPoints: ["packages/ui/src/webviews/welcome/welcomePage.webview.tsx"],
+      entryPoints: ["packages/ui/src/welcome/entry.tsx"],
       outfile: "dist/welcomePageWebview.js"
     },
     {
       entryPoints: ["packages/ui/src/inspect/entry.tsx"],
       outfile: "dist/inspectWebview.js"
     },
     {
-      entryPoints: ["packages/ui/src/webviews/nodeImpairments/nodeImpairments.webview.tsx"],
+      entryPoints: ["packages/ui/src/node-impairments/entry.tsx"],
       outfile: "dist/nodeImpairmentsWebview.js"
     },
     {
-      entryPoints: ["packages/ui/src/webviews/wiresharkVnc/wiresharkVnc.webview.tsx"],
+      entryPoints: ["packages/ui/src/wireshark-vnc/entry.tsx"],
       outfile: "dist/wiresharkVncWebview.js"
     }
   ].map((build) =>

esbuild.config.js

@@ -1,6 +1,6 @@
 {
   "name": "@srl-labs/clab-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": false,
   "type": "module",
   "main": "src/index.ts",
@@ -9,24 +9,33 @@
     ".": "./src/index.ts",
     "./host": "./src/host/index.ts",
     "./core": "./src/core/index.ts",
+    "./core/host/TopologyHostCore": "./src/core/host/TopologyHostCore.ts",
+    "./core/messages/extension": "./src/core/messages/extension.ts",
+    "./core/messages/webview": "./src/core/messages/webview.ts",
     "./theme": "./src/theme/index.ts",
     "./explorer": "./src/explorer/index.ts",
     "./explorer/snapshot": "./src/explorer/snapshot.ts",
     "./topology/runtime": "./src/topology/runtime.ts",
     "./topology/host-protocol": "./src/topology/hostProtocol.ts",
     "./inspect": "./src/inspect/index.ts",
-    "./welcome/entry.tsx": "./src/welcome/entry.tsx",
-    "./node-impairments/entry.tsx": "./src/node-impairments/entry.tsx",
+    "./inspect/types": "./src/inspect/types.ts",
+    "./welcome": "./src/welcome/index.ts",
+    "./node-impairments": "./src/node-impairments/index.ts",
     "./node-impairments/types": "./src/node-impairments/types.ts",
-    "./wireshark-vnc/entry.tsx": "./src/wireshark-vnc/entry.tsx",
+    "./wireshark-vnc": "./src/wireshark-vnc/index.ts",
     "./wireshark-vnc/types": "./src/wireshark-vnc/types.ts",
     "./core/parsing": "./src/core/parsing/index.ts",
     "./core/schema": "./src/core/schema/index.ts",
     "./core/types": "./src/core/types/index.ts",
+    "./core/types/messages": "./src/core/types/messages.ts",
     "./core/utilities": "./src/core/utilities/index.ts",
     "./core/*": "./src/core/*.ts",
+    "./messaging/webviewMessageBus": "./src/messaging/webviewMessageBus.ts",
+    "./styles/global.css": "./src/styles/global.css",
+    "./utils/logger": "./src/utils/logger.ts",
+    "./assets/images/wireshark_bold.svg": "./src/assets/images/wireshark_bold.svg",
     "./components/context-menu/ContextMenu": "./src/components/context-menu/ContextMenu.tsx",
-    "./*": "./src/*"
+    "./services": "./src/services/index.ts"
   },
   "peerDependencies": {
     "react": "^19.2.4",

package-lock.json

@@ -78,6 +78,7 @@ import {
   getCustomIconMap,
   saveViewerSettings
 } from "./services";
+import { getConfiguredClabUiHost } from "./host";
 import {
   PENDING_NETEM_KEY,
   areNetemEquivalent,
@@ -283,7 +284,7 @@ function getInteractionLockState(isLocked: boolean, isProcessing: boolean): bool
 }
 
 function isDevMockWebview(): boolean {
-  return window.vscode?.__isDevMock__ === true;
+  return getConfiguredClabUiHost()?.meta?.isDevMock === true;
 }
 
 function isDevExplorerDisabledByUrl(): boolean {
@@ -309,8 +310,7 @@ function shouldCollectDevMockTrafficStats(
   if (!isDevMock || interactionMode !== "view") {
     return false;
   }
-  const vscodeApi = window.vscode as unknown;
-  if (isRecord(vscodeApi) && Reflect.get(vscodeApi, "__disableDevMockTraffic__") === true) {
+  if (getConfiguredClabUiHost()?.meta?.disableDevMockTraffic === true) {
     return false;
   }
   return true;

packages/ui/package.json

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import * as monaco from "monaco-editor";
-import {
-  conf as yamlConf,
-  language as yamlLanguage
-} from "monaco-editor/esm/vs/basic-languages/yaml/yaml.js";
+// @ts-ignore Monaco's bundled YAML grammar module is untyped.
+import * as yamlMonaco from "monaco-editor/esm/vs/basic-languages/yaml/yaml.js";
 import * as YAML from "yaml";
 import Ajv from "ajv";
 
+import { getConfiguredClabUiHost } from "../../host";
 import { parseLuminance } from "../../utils/color";
 
 declare global {
@@ -25,7 +24,7 @@ function getCssVar(name: string, fallback: string): string {
 }
 
 function detectColorMode(): "light" | "dark" {
-  const isDevMock = Boolean(window.vscode && window.vscode.__isDevMock__);
+  const isDevMock = getConfiguredClabUiHost()?.meta?.isDevMock === true;
   if (isDevMock) {
     return document.documentElement.classList.contains("light") ? "light" : "dark";
   }
@@ -62,8 +61,14 @@ function ensureMonacoConfiguredOnce(): void {
   if (!yamlRegistered) {
     if (!monaco.languages.getLanguages().some((l) => l.id === "yaml")) {
       monaco.languages.register({ id: "yaml" });
-      monaco.languages.setMonarchTokensProvider("yaml", yamlLanguage);
-      monaco.languages.setLanguageConfiguration("yaml", yamlConf);
+      monaco.languages.setMonarchTokensProvider(
+        "yaml",
+        yamlMonaco.language as monaco.languages.IMonarchLanguage
+      );
+      monaco.languages.setLanguageConfiguration(
+        "yaml",
+        yamlMonaco.conf as monaco.languages.LanguageConfiguration
+      );
     }
     yamlRegistered = true;
   }

packages/ui/src/AppContent.tsx

@@ -83,7 +83,7 @@ export const FilterableDropdown: React.FC<FilterableDropdownProps> = ({
       }
       renderInput={(params) => (
         <TextField
-          {...params}
+          {...(params as unknown as React.ComponentProps<typeof TextField>)}
           label={label}
           placeholder={placeholder}
           helperText={helperText}