Add graphical model view

.vscode-test.mjs

@@ -1,14 +1,13 @@
-import { defineConfig } from '@vscode/test-cli';
+import {defineConfig} from '@vscode/test-cli';
 
-const runId = process.env.VSCODE_TEST_RUN_ID ?? 'default';
+const vscodeExecutablePath = process.env.VSCODE_EXECUTABLE_PATH;
+const runId = (process.env.VSCODE_TEST_RUN_ID ?? 'default').replace(/[^a-zA-Z0-9_-]/g, '-');
 
 export default defineConfig({
-	files: 'out/test/**/*.test.js',
-	useInstallation: process.env.VSCODE_EXECUTABLE_PATH
-		? { fromPath: process.env.VSCODE_EXECUTABLE_PATH }
-		: undefined,
-	launchArgs: [
-		`--user-data-dir=/tmp/extension-vscode-test-user-data-${runId}`,
-		`--extensions-dir=/tmp/extension-vscode-test-extensions-${runId}`
-	],
+    files: 'out/test/**/*.test.js',
+    ...(vscodeExecutablePath ? {useInstallation: {fromPath: vscodeExecutablePath}} : {}),
+    launchArgs: [
+        `--user-data-dir=/tmp/extension-vscode-test-user-data-${runId}`,
+        `--extensions-dir=/tmp/extension-vscode-test-extensions-${runId}`,
+    ],
 });

.vscodeignore

@@ -1,6 +1,8 @@
 .vscode/**
 .vscode-test/**
+scripts/
 src/**
+out/test/**
 .gitignore
 .yarnrc
 .prettierrc

README.md

@@ -46,6 +46,18 @@ Use the command `Semantic Models: Select SAMM CLI Executable` to choose either:
 - Manual validation command:
   - `Semantic Models: Validate Document Now`
 
+## Graphical View
+
+Use `Semantic Models: Open Graphical View` (`semantic-models.openGraphicalView`) from the Turtle editor-title button, the editor context menu, or the Command Palette to open a read-only SVG snapshot in a separate panel. One panel is reused per Turtle document.
+
+The view renders on initial open, manual Refresh, and Save while the main Turtle document is visible. It includes unsaved text from the main document but uses the persisted versions of imported files. Typing, import saves, hidden-document saves, and revealing an existing panel do not trigger a render.
+
+Element headers can navigate to definitions in local files. Eligible attribute rows whose owner is a named model element navigate as a whole row; language-qualified and wrapped rows retain their source mapping, and aggregated rows navigate to the start of the corresponding predicate. Rows with anonymous or otherwise non-deterministic owners remain inert. Navigation to remote URIs and arbitrary referenced values is not supported.
+
+If rendering fails, the last successful diagram remains visible with an error or warning. Rendering is limited to 1,000 boxes and a 30-second request timeout. The graphical view is not an editor, does not update live while typing, and does not claim visual parity with the Aspect Model Editor.
+
+Graphical View supports SVG only from the shipped/current trusted SAMM language server and generator contract. The extension strict-parses each SVG as XML but does not sanitize or filter its elements and attributes. Its restrictive webview CSP and extension-side message, sidecar, and local-file navigation validation remain enforced. External, substituted, incompatible, or compromised language servers are outside the supported security model; future Graphper or generator changes must preserve the tested style-free passive-output invariant.
+
 ## Running the Server and Extension Together
 
 1. In this extension project, install the dependencies using `npm install`.

package.json

@@ -39,6 +39,16 @@
         "command": "semantic-models.selectSammCliExecutable",
         "title": "Select SAMM CLI Executable",
         "category": "Semantic Models"
+      },
+      {
+        "command": "semantic-models.openGraphicalView",
+        "title": "Open Graphical View",
+        "category": "Semantic Models",
+        "enablement": "editorLangId == turtle",
+        "icon": {
+          "light": "media/aspect-model-editor-targetsize-192.png",
+          "dark": "media/aspect-model-editor-targetsize-192.png"
+        }
       }
     ],
     "languages": [
@@ -143,11 +153,23 @@
       }
     },
     "menus": {
+      "editor/title": [
+        {
+          "command": "semantic-models.openGraphicalView",
+          "when": "resourceLangId == turtle",
+          "group": "navigation@10"
+        }
+      ],
       "editor/context": [
         {
           "command": "semantic-models.validateDocumentNow",
           "when": "resourceLangId == turtle && (resourceScheme == file || resourceScheme == untitled)",
           "group": "1_modification"
+        },
+        {
+          "command": "semantic-models.openGraphicalView",
+          "when": "resourceLangId == turtle",
+          "group": "1_modification@2"
         }
       ]
     },
@@ -183,14 +205,15 @@
     "vscode:prepublish": "npm run build",
     "watch": "tsc -watch -p ./",
     "pretest": "npm run build && npm run lint",
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && node scripts/copy-webview-assets.mjs",
     "build-watch": "tsc -p tsconfig.json --watch",
     "prettier": "prettier --config .prettierrc --write './src/**/*{.ts,.js,.json}'",
     "test": "vscode-test --config .vscode-test.mjs",
     "test:prettier": "prettier --config .prettierrc --list-different './src/**/*{.ts,.js,.json}'",
     "test:coverage": "vscode-test --config .vscode-test.mjs --coverage --coverage-reporter text --coverage-reporter lcov",
     "lint": "eslint src --ext .ts",
-    "lint:fix": "eslint src --ext .ts --fix"
+    "lint:fix": "eslint src --ext .ts --fix",
+    "test:webview-assets": "node scripts/verify-webview-assets.mjs"
   },
   "devDependencies": {
     "@types/mocha": "^10.0.10",

scripts/copy-webview-assets.mjs

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2026 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for additional
+ * information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {copyFileSync, mkdirSync, readdirSync, rmSync} from 'node:fs';
+import {join} from 'node:path';
+import {outputDirectory, sha256, webviewAssets} from './webview-assets.mjs';
+
+for (const asset of webviewAssets) {
+    if (asset.expectedSha256 && sha256(asset.source) !== asset.expectedSha256) {
+        throw new Error(`Pinned webview asset hash mismatch: ${asset.destination}`);
+    }
+}
+
+rmSync(outputDirectory, {recursive: true, force: true});
+mkdirSync(outputDirectory, {recursive: true});
+for (const asset of webviewAssets) {
+    copyFileSync(asset.source, join(outputDirectory, asset.destination));
+}
+
+const actual = readdirSync(outputDirectory).sort();
+const expected = webviewAssets.map(asset => asset.destination).sort();
+if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+    throw new Error('Webview asset copy produced an unexpected inventory.');
+}

scripts/verify-webview-assets.mjs

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for additional
+ * information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {readdirSync, statSync} from 'node:fs';
+import {join} from 'node:path';
+import {outputDirectory, sha256, webviewAssets} from './webview-assets.mjs';
+
+const actual = readdirSync(outputDirectory).sort();
+const expected = webviewAssets.map(asset => asset.destination).sort();
+if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+    throw new Error(`Unexpected out/webview inventory: ${actual.join(', ')}`);
+}
+
+for (const asset of webviewAssets) {
+    const output = join(outputDirectory, asset.destination);
+    if (!statSync(output).isFile() || statSync(output).size === 0) {
+        throw new Error(`Missing or empty webview asset: ${asset.destination}`);
+    }
+    if (sha256(asset.source) !== sha256(output)) {
+        throw new Error(`Copied webview asset differs from its source: ${asset.destination}`);
+    }
+    if (asset.expectedSha256 && sha256(output) !== asset.expectedSha256) {
+        throw new Error(`Pinned webview asset hash mismatch: ${asset.destination}`);
+    }
+}
+
+process.stdout.write(`Verified ${webviewAssets.length} deterministic webview assets.\n`);

scripts/webview-assets.mjs

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2026 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for additional
+ * information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {createHash} from 'node:crypto';
+import {readFileSync} from 'node:fs';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+export const extensionRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+export const outputDirectory = resolve(extensionRoot, 'out', 'webview');
+
+export const webviewAssets = Object.freeze([
+    asset(
+        'src/webview/RobotoCondensed-LICENSE-Apache-2.0.txt',
+        'RobotoCondensed-LICENSE-Apache-2.0.txt',
+        '8173d5c29b4f956d532781d2b86e4e30f83e6b7878dce18c919451d6ba707c90',
+    ),
+    asset('src/webview/RobotoCondensed-NOTICE.txt', 'RobotoCondensed-NOTICE.txt'),
+    asset(
+        'src/webview/RobotoCondensed-Regular.ttf',
+        'RobotoCondensed-Regular.ttf',
+        '4a7c36df4318fee50a8159c3a0ebde4572abab65447ae4a651c2fe87212302b5',
+    ),
+    asset('src/webview/webview.css', 'webview.css'),
+    asset('src/webview/webview.js', 'webview.js'),
+]);
+
+export function sha256(file) {
+    return createHash('sha256').update(readFileSync(file)).digest('hex');
+}
+
+function asset(source, destination, expectedSha256) {
+    return Object.freeze({
+        source: resolve(extensionRoot, source),
+        destination,
+        ...(expectedSha256 ? {expectedSha256} : {}),
+    });
+}

src/aspectValidation.ts

@@ -31,7 +31,7 @@ export interface DiagnosticReport {
 }
 
 export interface RequestClient {
-    sendRequest<R>(method: string, params?: unknown): Thenable<R>;
+    sendRequest<R>(method: string, params?: unknown, token?: vscode.CancellationToken): Thenable<R>;
 }
 
 type RequestClientBinding = {

src/extension.ts

@@ -13,13 +13,16 @@
 
 import * as vscode from 'vscode';
 import {AspectValidationController, RequestClient} from './aspectValidation';
+import {GraphicalViewController} from './graphicalView';
+import {LspGraphicalViewClient} from './graphicalViewClient';
+import {VscodeGraphicalViewPanelFactory} from './graphicalViewPanel';
+import {GitHubRepositoryValidator} from './githubRepositoryValidator';
+import {TurtleLanguageClient} from './languageClient';
 import {TurtleLanguageServer} from './languageServer';
+import {LanguageServicesMode, LanguageServicesSupervisor, TerminalAction} from './languageServicesSupervisor';
+import type {ExtensionLogger} from './outputChannel';
 import {SammCliDownloader} from './sammCliDownloader';
 import {TurtleExtensionSettings} from './settings';
-import {TurtleLanguageClient} from './languageClient';
-import {GitHubRepositoryValidator} from './githubRepositoryValidator';
-import type {ExtensionLogger} from './outputChannel';
-import {LanguageServicesSupervisor, LanguageServicesMode, TerminalAction} from './languageServicesSupervisor';
 
 const SELECT_EXECUTABLE_COMMAND = 'semantic-models.selectSammCliExecutable';
 const SELECT_EXECUTABLE_TITLE = 'Select SAMM CLI Executable';
@@ -28,6 +31,7 @@ const GITHUB_REPOSITORY_VALIDATION_DEBOUNCE_MS = 2000;
 
 let settings: TurtleExtensionSettings;
 let aspectValidationController: AspectValidationController;
+let graphicalViewController: GraphicalViewController;
 let sammCliDownloader: SammCliDownloader;
 let gitHubRepositoryValidator: GitHubRepositoryValidator;
 
@@ -47,6 +51,40 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
     gitHubRepositoryValidator = new GitHubRepositoryValidator(outputChannel);
     aspectValidationController = new AspectValidationController(createUnavailableClient(), vscode.window, outputChannel);
     aspectValidationController.register(context);
+    graphicalViewController = new GraphicalViewController(
+        undefined,
+        new VscodeGraphicalViewPanelFactory(context.extensionUri),
+        vscode.commands,
+        vscode.window,
+        {
+            onDidSaveTextDocument: listener => vscode.workspace.onDidSaveTextDocument(listener),
+            onDidChangeDocumentAvailability: listener =>
+                vscode.Disposable.from(
+                    vscode.workspace.onDidOpenTextDocument(document => listener(document.uri.toString(), true)),
+                    vscode.workspace.onDidCloseTextDocument(document => listener(document.uri.toString(), false)),
+                    vscode.window.tabGroups.onDidChangeTabs(event => {
+                        for (const tab of event.closed) {
+                            if (tab.input instanceof vscode.TabInputText) {
+                                const sourceUri = tab.input.uri.toString();
+                                const remainsOpen = vscode.window.tabGroups.all.some(group =>
+                                    group.tabs.some(
+                                        candidate =>
+                                            candidate.input instanceof vscode.TabInputText &&
+                                            candidate.input.uri.toString() === sourceUri,
+                                    ),
+                                );
+                                if (!remainsOpen) {
+                                    listener(sourceUri, false);
+                                }
+                            }
+                        }
+                    }),
+                ),
+            isDocumentAvailable: uri => vscode.workspace.textDocuments.some(document => document.uri.toString() === uri),
+        },
+        outputChannel,
+    );
+    graphicalViewController.register(context);
     languageServicesSupervisor = createLanguageServicesSupervisor();
 
     context.subscriptions.push(
@@ -137,7 +175,12 @@ function createLanguageServicesSupervisor(): LanguageServicesSupervisor {
             logOutputChannel.logLevel,
         ),
         createClient: configuration => new TurtleLanguageClient(outputChannel, configuration.port, logOutputChannel.logLevel),
-        setRequestClient: (client, generation) => aspectValidationController.setClient(client, generation),
+        setRequestClient: (client, generation) => {
+            aspectValidationController.setClient(client, generation);
+            graphicalViewController.setClient(
+                client instanceof TurtleLanguageClient ? new LspGraphicalViewClient(client) : undefined,
+            );
+        },
         unavailableClient: createUnavailableClient,
         logger: outputChannel,
         notifyTerminal: notifyTerminalRecoveryFailure,