Experimental: VScode plugin

[rocketstack-matt]

Provides base implementation for #103

This pull request introduces the initial implementation of the experimental CALM VS Code plugin, providing live visualization, navigation, and editing helpers for CALM architecture models. The extension includes a preview webview with interactive graph features, a sidebar tree view, file watching, language features, and configuration options. The changes lay the foundation for a robust offline-first modeling tool within VS Code.

Key changes include:

Extension Core Functionality:

• Added the main extension activation logic in extension.ts, enabling the CALM Preview command, sidebar tree view, file watching for CALM model files, and language features such as hovers and code lens. The extension manages the preview panel, synchronizes selection between the graph, tree, and editor, and refreshes the model view on file changes.

User Interface & Experience:

• Introduced a dedicated CSS file (preview.css) for the preview webview, providing VS Code-themed styling for the toolbar, buttons, graph container, resizable divider, and details panel, ensuring a native and accessible look and feel.

Extension Packaging & Configuration:

• Added a comprehensive package.json defining extension metadata, activation events, commands, sidebar integration, configuration options (such as CLI path, layout, file globs), scripts for building and packaging, and dependencies for graph rendering and YAML support.

Documentation:

• Created a detailed README.md describing the plugin’s features, usage instructions, configuration, installation steps, supported model formats, limitations, and troubleshooting guidance.

[Copilot]

Pull Request Overview

This PR introduces the experimental CALM VS Code plugin providing a comprehensive architecture model visualization and editing tool. The plugin enables offline-first modeling with live graph previews, navigation aids, and editing helpers integrated directly into VS Code.

• Implements a preview webview with interactive Cytoscape-powered graph visualization supporting multiple layout algorithms
• Creates a sidebar tree view for model element navigation and a suite of language features including hovers and code lenses
• Establishes comprehensive test coverage and build configuration with TypeScript, bundling, and packaging setup

Reviewed Changes

Copilot reviewed 21 out of 25 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
conferences/osff-ln-2025/workshop/architecture/conference-signup.arch.json	Minor updates to node names and descriptions in example architecture
calm-vscode-plugin/tsup.config.ts	Build configuration for extension and webview bundling
calm-vscode-plugin/tsconfig.json	TypeScript configuration for Node.js extension code
calm-vscode-plugin/test/*.test.ts	Comprehensive test suite covering webview, preview panel, model utils, and build validation
calm-vscode-plugin/src/webview/*.ts	Webview TypeScript configuration and main interactive graph implementation
calm-vscode-plugin/src/util/*.ts	Utility modules for webview helpers, model parsing, language features, diagnostics, and CLI integration
calm-vscode-plugin/src/*.ts	Core extension files including tree view, preview panel, and main extension activation logic
calm-vscode-plugin/package.json	Extension manifest defining commands, configuration, dependencies, and VS Code integration
calm-vscode-plugin/media/preview.css	Styling for the preview webview with VS Code theme integration
calm-vscode-plugin/README.md	Comprehensive documentation covering features, usage, configuration, and installation

[markscott-ms]

In #460 (comment) you suggested putting IDE plugins in a plugins/ folder, which @Thels agreed with.

Do we want to do this?

[markscott-ms]

Changes to conference-signup.arch.json seem unrelated to this PR and should be reverted.

[rocketstack-matt]

In #460 (comment) you suggested putting IDE plugins in a plugins/ folder, which @Thels agreed with.

Do we want to do this?

I've moved to calm-plugins\vscode

[rocketstack-matt]

Changes to conference-signup.arch.json seem unrelated to this PR and should be reverted.

Done

[markscott-ms]

Approving.

• README.md was sufficient for me to configure VSCode such that I could launch the extension development window, open a CALM architecture file and explore it in the IDE.
• whilst experimental and lacking features, and potentially containing bugs and UX concerns, it provides a base for the community to work on.
• code changes for this experimental plugin are limited to the calm-plugins/vscode folder (apart from simple inclusion change to top level package.json) and do not interfere with CALM CLI or other components, making it safe to merge into main.

[LeighFinegold]

This PR shows the power of aiding tools when working with CALM.

When we look to turn this from experimental, some thoughts:-

• Fold inline the rendering logic to be shared with calm-hub-ui and calm-docify. Could we get the widgets used in the project such that really this just becomes a plugin which renders calm docify under the covers with the option section being aid to leveraging widgets.
• I think for the preview we would implement this in a way where what is rendered in the preview view is really just a shim on top of a mode which could be a web page within calm-hub-ui or even calm.finos.org (live editor ). In addition where we leverage Intellij, hopefully it would also be an iframing job.
• We probably should release a plugin version that matches the cli version