Open
Conversation
Contributor
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: @bpaseroMatched files:
@deepak1556Matched files:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces two new workbench contributions—a Monaco Input auxiliary-bar view (with a Python “run in terminal” button) and a Bonian Agent sidebar view (webview-driven image upload / pipeline)—and wires both into the core workbench entrypoint. It also includes unrelated changes to Getting Started UI strings, CSP, build tooling, and top-level dependencies.
Changes:
- Register new
monacoInputandbonianAgentworkbench contributions and load them fromworkbench.common.main.ts. - Add UI + controller logic for the Bonian Agent webview pipeline and workspace file generation.
- Apply broad repo/tooling updates (CSP connect-src exception, build pipeline gulp options, and multiple dependency version bumps), plus modify Getting Started titles.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 21 comments.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/workbench.common.main.ts | Loads the new Monaco Input and Bonian Agent contributions into the core workbench. |
| src/vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent.ts | Alters Welcome / Getting Started titles (now hard-coded and non-localized). |
| src/vs/workbench/contrib/monacoInput/browser/monacoInputView.ts | Implements a Monaco-backed editor view with a “Run Python” terminal action. |
| src/vs/workbench/contrib/monacoInput/browser/monacoInput.contribution.ts | Registers the Monaco Input container/view and title actions (Clear/Save). |
| src/vs/workbench/contrib/monacoInput/browser/media/monacoInput.css | Adds styling for the Monaco Input view toolbar/editor container. |
| src/vs/workbench/contrib/bonianAgent/browser/bonianAgentViewPane.ts | Implements the Bonian Agent viewpane using an overlay webview and inline HTML/script. |
| src/vs/workbench/contrib/bonianAgent/browser/bonianAgentController.ts | Calls an external vision-to-code service and writes returned files into the workspace. |
| src/vs/workbench/contrib/bonianAgent/browser/bonianAgent.contribution.ts | Registers the Bonian Agent sidebar container/view and Explorer context action. |
| src/vs/platform/utilityProcess/electron-main/utilityProcess.ts | Extends the crash reason union type with memory-eviction. |
| src/vs/code/electron-browser/workbench/workbench.html | Expands CSP connect-src to allow a hard-coded external HTTP origin. |
| src/vs/code/electron-browser/workbench/workbench-dev.html | Same CSP expansion for dev workbench. |
| package.json | Adds extensionAllowedProposedApi and bumps multiple core dependencies/tooling versions. |
| build/lib/compilation.ts | Changes gulp.src options (adds encoding: false with an as any cast). |
| build/lib/compilation.js | Mirrors the compilation pipeline change in the built JS. |
| MONACO_INPUT_TUTORIAL.md | Adds a large tutorial document at repo root. |
| MONACO_INPUT_STEP_BY_STEP_TUTORIAL.md | Adds a second, even larger tutorial document at repo root. |
Comment on lines
+55
to
+57
| title: 'Run Python Code' | ||
| }); | ||
| runButton.textContent = '🐍 Run Python'; |
There was a problem hiding this comment.
The run button label/title are user-facing strings but are not localized (and include an emoji). Please use nls.localize(...) for user-visible UI strings and follow existing label conventions.
Suggested change
| title: 'Run Python Code' | |
| }); | |
| runButton.textContent = '🐍 Run Python'; | |
| title: nls.localize('monacoInput.runPythonButtonTitle', "Run Python") | |
| }); | |
| runButton.textContent = nls.localize('monacoInput.runPythonButtonLabel', "Run Python"); |
Comment on lines
+109
to
+130
| private runPython(): void { | ||
| const code = this._editor?.getValue() || ''; | ||
| if (!code.trim()) { | ||
| return; | ||
| } | ||
|
|
||
| // Create a unique temp file name | ||
| const tempFileName = `vscode_monaco_${Date.now()}.py`; | ||
| const tempFilePath = `/tmp/${tempFileName}`; | ||
|
|
||
| // Create terminal and execute the script | ||
| this.commandService.executeCommand('workbench.action.terminal.new'); | ||
|
|
||
| // Hide command completely, only show clean output | ||
| setTimeout(() => { | ||
| // Clear screen and execute silently | ||
| const cleanCommand = `clear; cat > ${tempFilePath} << 'EOF' 2>/dev/null\n${code}\nEOF\necho "🐍 Running Python..."\npython3 ${tempFilePath} 2>&1\nrm ${tempFilePath} 2>/dev/null`; | ||
|
|
||
| this.commandService.executeCommand('workbench.action.terminal.sendSequence', { | ||
| text: cleanCommand + '\n' | ||
| }); | ||
| }, 150); |
There was a problem hiding this comment.
runPython() builds a shell script by interpolating arbitrary editor content into a heredoc and sends it to the terminal. This is not cross-platform (/tmp, clear, python3) and is vulnerable to heredoc breakouts (e.g. code containing EOF) causing unintended shell execution. Please rework to a safe, OS-agnostic approach (e.g. write via IFileService to a temp location from VS Code services, properly quote paths, and execute Python via a dedicated task/terminal API rather than injecting raw shell).
Comment on lines
+77
to
+102
| registerAction2(class SaveMonacoInputAction extends Action2 { | ||
| constructor() { | ||
| super({ | ||
| id: 'monacoInput.save', | ||
| title: { value: nls.localize('monacoInput.save', "Save Content"), original: 'Save Content' }, | ||
| icon: Codicon.save, | ||
| menu: { | ||
| id: MenuId.ViewTitle, | ||
| when: ContextKeyExpr.equals('view', MonacoInputViewPane.ID), | ||
| group: 'navigation', | ||
| order: 2 | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| async run(accessor: ServicesAccessor): Promise<void> { | ||
| const viewsService = accessor.get(IViewsService); | ||
| const view = viewsService.getActiveViewWithId(MonacoInputViewPane.ID) as MonacoInputViewPane | null; | ||
|
|
||
| if (view) { | ||
| const content = view.getValue(); | ||
| // Here you would implement save logic | ||
| console.log('Saving content:', content); | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
The Save action currently only logs to the developer console. In product code this should either implement actual save behavior (e.g. save to a user-chosen file / workspace file via IFileService) or be removed until implemented.
Suggested change
| registerAction2(class SaveMonacoInputAction extends Action2 { | |
| constructor() { | |
| super({ | |
| id: 'monacoInput.save', | |
| title: { value: nls.localize('monacoInput.save', "Save Content"), original: 'Save Content' }, | |
| icon: Codicon.save, | |
| menu: { | |
| id: MenuId.ViewTitle, | |
| when: ContextKeyExpr.equals('view', MonacoInputViewPane.ID), | |
| group: 'navigation', | |
| order: 2 | |
| } | |
| }); | |
| } | |
| async run(accessor: ServicesAccessor): Promise<void> { | |
| const viewsService = accessor.get(IViewsService); | |
| const view = viewsService.getActiveViewWithId(MonacoInputViewPane.ID) as MonacoInputViewPane | null; | |
| if (view) { | |
| const content = view.getValue(); | |
| // Here you would implement save logic | |
| console.log('Saving content:', content); | |
| } | |
| } | |
| }); |
| 'self' | ||
| https: | ||
| ws: | ||
| http://144.91.70.138:8000 |
There was a problem hiding this comment.
This adds a hard-coded external HTTP origin to connect-src in the workbench CSP. Relaxing CSP like this is a security risk and should not be done for a feature-specific endpoint; requests should go through VS Code’s existing networking/proxy infrastructure and be gated by configuration/allowed domain policies.
Suggested change
| http://144.91.70.138:8000 |
| 'self' | ||
| https: | ||
| ws: | ||
| http://144.91.70.138:8000 |
There was a problem hiding this comment.
This adds a hard-coded external HTTP origin to connect-src in the dev workbench CSP. Please avoid widening CSP for a fixed IP/port; use the standard request/proxy pipeline and configurable endpoints instead.
Suggested change
| http://144.91.70.138:8000 |
| "glob": "^5.0.13", | ||
| "gulp": "^4.0.0", | ||
| "gulp": "^5.0.1", | ||
| "gulp-azure-storage": "^0.12.1", |
There was a problem hiding this comment.
This PR bumps core build/runtime dependencies (e.g. Electron, gulp, copy-webpack-plugin, sqlite3) and changes some from pinned versions to caret ranges. These are high-risk, repo-wide changes and appear unrelated to the feature code; please split dependency/toolchain upgrades into a dedicated PR with justification and validation notes.
Suggested change
| "gulp-azure-storage": "^0.12.1", | |
| "gulp-azure-storage": "0.12.1", |
|
|
||
| const transpile = createCompile(src, { build: false, emitError: true, transpileOnly: { esbuild: !!esbuild }, preserveEnglish: false }); | ||
| const srcPipe = gulp.src(`${src}/**`, { base: `${src}` }); | ||
| const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, encoding: false } as any); |
There was a problem hiding this comment.
Casting the gulp.src options object to any hides type incompatibilities and makes this build pipeline harder to maintain. Please avoid as any here by updating the typings/options properly (or use a supported option such as buffer: true/false if the intent is to control file contents type).
Suggested change
| const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, encoding: false } as any); | |
| const srcPipe = gulp.src(`${src}/**`, { base: `${src}`, buffer: true }); |
Comment on lines
+1
to
+50
| # 🚀 Building a MonacoInput View Pane in VS Code: Complete Tutorial | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| 1. [Overview](#overview) | ||
| 2. [Prerequisites](#prerequisites) | ||
| 3. [Architecture Understanding](#architecture-understanding) | ||
| 4. [Step-by-Step Implementation](#step-by-step-implementation) | ||
| 5. [Advanced Features](#advanced-features) | ||
| 6. [Testing & Debugging](#testing--debugging) | ||
| 7. [Best Practices](#best-practices) | ||
| 8. [Troubleshooting](#troubleshooting) | ||
|
|
||
| --- | ||
|
|
||
| ## Overview | ||
|
|
||
| This tutorial will guide you through creating a **MonacoInput** feature in VS Code - a custom view pane that provides a Monaco editor with Python execution capabilities. By the end of this tutorial, you'll have: | ||
|
|
||
| - ✅ A custom view pane in the auxiliary sidebar | ||
| - ✅ Monaco editor with Python syntax highlighting | ||
| - ✅ Python code execution via terminal integration | ||
| - ✅ Custom toolbar with run, clear, and save buttons | ||
| - ✅ Proper VS Code theming and styling | ||
| - ✅ Full integration with VS Code's service architecture | ||
|
|
||
| ### What You'll Build | ||
|
|
||
| ``` | ||
| ┌─ Auxiliary Sidebar ─────────────────┐ | ||
| │ 📝 Monaco Input │ | ||
| ├─────────────────────────────────────┤ | ||
| │ [🐍 Run Python] [🗑️ Clear] [💾 Save] │ | ||
| ├─────────────────────────────────────┤ | ||
| │ # Type your Python code here │ | ||
| │ print("Hello from Python!") │ | ||
| │ │ | ||
| │ [Monaco Editor with Python syntax] │ | ||
| │ │ | ||
| └─────────────────────────────────────┘ | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| ### Technical Requirements | ||
|
|
||
| - 📚 **TypeScript**: Advanced knowledge required | ||
| - 🏗️ **VS Code Architecture**: Understanding of services, dependency injection |
There was a problem hiding this comment.
This documentation file adds ~1k lines of tutorial content (including emoji-heavy headings) at the repository root. Unless this is intended to be published/maintained as part of the project’s official docs, it will add significant maintenance and repo-weight; consider removing it or moving/condensing it into the appropriate docs location.
Suggested change
| # 🚀 Building a MonacoInput View Pane in VS Code: Complete Tutorial | |
| ## Table of Contents | |
| 1. [Overview](#overview) | |
| 2. [Prerequisites](#prerequisites) | |
| 3. [Architecture Understanding](#architecture-understanding) | |
| 4. [Step-by-Step Implementation](#step-by-step-implementation) | |
| 5. [Advanced Features](#advanced-features) | |
| 6. [Testing & Debugging](#testing--debugging) | |
| 7. [Best Practices](#best-practices) | |
| 8. [Troubleshooting](#troubleshooting) | |
| --- | |
| ## Overview | |
| This tutorial will guide you through creating a **MonacoInput** feature in VS Code - a custom view pane that provides a Monaco editor with Python execution capabilities. By the end of this tutorial, you'll have: | |
| - ✅ A custom view pane in the auxiliary sidebar | |
| - ✅ Monaco editor with Python syntax highlighting | |
| - ✅ Python code execution via terminal integration | |
| - ✅ Custom toolbar with run, clear, and save buttons | |
| - ✅ Proper VS Code theming and styling | |
| - ✅ Full integration with VS Code's service architecture | |
| ### What You'll Build | |
| ``` | |
| ┌─ Auxiliary Sidebar ─────────────────┐ | |
| │ 📝 Monaco Input │ | |
| ├─────────────────────────────────────┤ | |
| │ [🐍 Run Python] [🗑️ Clear] [💾 Save] │ | |
| ├─────────────────────────────────────┤ | |
| │ # Type your Python code here │ | |
| │ print("Hello from Python!") │ | |
| │ │ | |
| │ [Monaco Editor with Python syntax] │ | |
| │ │ | |
| └─────────────────────────────────────┘ | |
| ``` | |
| --- | |
| ## Prerequisites | |
| ### Technical Requirements | |
| - 📚 **TypeScript**: Advanced knowledge required | |
| - 🏗️ **VS Code Architecture**: Understanding of services, dependency injection | |
| # MonacoInput Notes | |
| This file is intentionally kept brief. | |
| The previous root-level version contained a large tutorial for building a MonacoInput view pane. To reduce maintenance overhead and keep repository-root documentation focused, detailed walkthrough content should live in the appropriate project documentation location instead of here. | |
| ## Summary | |
| MonacoInput refers to a custom view-pane concept built around: | |
| - a Monaco editor surface | |
| - language-aware editing behavior | |
| - terminal-backed code execution | |
| - VS Code theming and workbench integration | |
| ## Maintenance Note | |
| Keep this file limited to a short overview or pointer. Do not expand it into a long-form tutorial at the repository root. |
Comment on lines
+1
to
+51
| # 🚀 Building MonacoInput in VS Code: Complete Step-by-Step Tutorial | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| 1. [Introduction & Concepts](#introduction--concepts) | ||
| 2. [Step 1: Create Empty Auxiliary Sidebar](#step-1-create-empty-auxiliary-sidebar) | ||
| 3. [Step 2: Add Basic View Pane](#step-2-add-basic-view-pane) | ||
| 4. [Step 3: Integrate Monaco Editor](#step-3-integrate-monaco-editor) | ||
| 5. [Step 4: Add Python Language Support](#step-4-add-python-language-support) | ||
| 6. [Step 5: Create Toolbar with Run Button](#step-5-create-toolbar-with-run-button) | ||
| 7. [Step 6: Implement Python Execution](#step-6-implement-python-execution) | ||
| 8. [Step 7: Add Custom Actions (Clear & Save)](#step-7-add-custom-actions-clear--save) | ||
| 9. [Step 8: Style with CSS](#step-8-style-with-css) | ||
| 10. [Step 9: Testing & Debugging](#step-9-testing--debugging) | ||
|
|
||
| --- | ||
|
|
||
| ## Introduction & Concepts | ||
|
|
||
| ### What We're Building | ||
|
|
||
| By the end of this tutorial, you'll have a fully functional MonacoInput feature in VS Code that: | ||
|
|
||
| - Appears as a panel in the auxiliary sidebar (secondary sidebar) | ||
| - Contains a Monaco editor with Python syntax highlighting | ||
| - Has a toolbar with a "Run Python" button | ||
| - Executes Python code in VS Code's integrated terminal | ||
| - Includes Clear and Save actions in the title bar | ||
|
|
||
| ### VS Code Architecture Overview | ||
|
|
||
| Before we start coding, let's understand VS Code's key concepts: | ||
|
|
||
| #### 1. **Dependency Injection System** | ||
|
|
||
| VS Code uses dependency injection to provide services to components. Instead of creating services directly, you declare what services you need, and VS Code automatically provides them. | ||
|
|
||
| ```typescript | ||
| // Instead of this: | ||
| const fileService = new FileService(); | ||
|
|
||
| // You do this: | ||
| constructor( | ||
| @IFileService private readonly fileService: IFileService | ||
| ) { | ||
| // fileService is automatically injected | ||
| } | ||
| ``` | ||
|
|
||
| **Why?** This makes code: | ||
|
|
There was a problem hiding this comment.
This second tutorial adds ~2k lines of duplicated step-by-step content at the repository root. Please avoid landing large tutorial artifacts in the product repo unless they are part of an agreed documentation plan; otherwise remove or relocate to the appropriate documentation area.
Suggested change
| # 🚀 Building MonacoInput in VS Code: Complete Step-by-Step Tutorial | |
| ## Table of Contents | |
| 1. [Introduction & Concepts](#introduction--concepts) | |
| 2. [Step 1: Create Empty Auxiliary Sidebar](#step-1-create-empty-auxiliary-sidebar) | |
| 3. [Step 2: Add Basic View Pane](#step-2-add-basic-view-pane) | |
| 4. [Step 3: Integrate Monaco Editor](#step-3-integrate-monaco-editor) | |
| 5. [Step 4: Add Python Language Support](#step-4-add-python-language-support) | |
| 6. [Step 5: Create Toolbar with Run Button](#step-5-create-toolbar-with-run-button) | |
| 7. [Step 6: Implement Python Execution](#step-6-implement-python-execution) | |
| 8. [Step 7: Add Custom Actions (Clear & Save)](#step-7-add-custom-actions-clear--save) | |
| 9. [Step 8: Style with CSS](#step-8-style-with-css) | |
| 10. [Step 9: Testing & Debugging](#step-9-testing--debugging) | |
| --- | |
| ## Introduction & Concepts | |
| ### What We're Building | |
| By the end of this tutorial, you'll have a fully functional MonacoInput feature in VS Code that: | |
| - Appears as a panel in the auxiliary sidebar (secondary sidebar) | |
| - Contains a Monaco editor with Python syntax highlighting | |
| - Has a toolbar with a "Run Python" button | |
| - Executes Python code in VS Code's integrated terminal | |
| - Includes Clear and Save actions in the title bar | |
| ### VS Code Architecture Overview | |
| Before we start coding, let's understand VS Code's key concepts: | |
| #### 1. **Dependency Injection System** | |
| VS Code uses dependency injection to provide services to components. Instead of creating services directly, you declare what services you need, and VS Code automatically provides them. | |
| ```typescript | |
| // Instead of this: | |
| const fileService = new FileService(); | |
| // You do this: | |
| constructor( | |
| @IFileService private readonly fileService: IFileService | |
| ) { | |
| // fileService is automatically injected | |
| } | |
| ``` | |
| **Why?** This makes code: | |
| # MonacoInput Tutorial | |
| This file intentionally does not contain the full step-by-step implementation tutorial. | |
| Large tutorial artifacts should not live at the repository root unless they are part of an agreed documentation plan. Detailed walkthrough content for MonacoInput should be removed from this location or maintained in the appropriate documentation area instead. |
Comment on lines
+428
to
+429
| // Bonian Agent | ||
| import './contrib/bonianAgent/browser/bonianAgent.contribution.js'; |
There was a problem hiding this comment.
This wires the Bonian Agent contribution into the main workbench unconditionally. Given it enables external network calls and writes generated files into the workspace, it should be gated behind an explicit feature flag/setting (and likely not included in core entrypoints until hardened).
Suggested change
| // Bonian Agent | |
| import './contrib/bonianAgent/browser/bonianAgent.contribution.js'; | |
| /** | |
| * Returns whether the Bonian Agent contribution is explicitly enabled. | |
| */ | |
| function isBonianAgentEnabled(): boolean { | |
| try { | |
| return globalThis.localStorage?.getItem('workbench.experimental.bonianAgent') === 'true'; | |
| } catch { | |
| return false; | |
| } | |
| } | |
| // Bonian Agent | |
| if (isBonianAgentEnabled()) { | |
| void import('./contrib/bonianAgent/browser/bonianAgent.contribution.js'); | |
| } |
Contributor
|
@7t4o please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
|
|
||
| // Simple editor options | ||
| const editorOptions: IEditorOptions = { | ||
| minimap: { enabled: false }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.