feat(editor/runtime): Replace bare editor with Monaco-based editor and add runtime + workspace/filetree integration

ts_web/elements/dees-terminal/dees-terminal.ts

@@ -9,11 +9,11 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as webcontainer from '@webcontainer/api';
-
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../00theme.js';
+import type { IExecutionEnvironment } from '../00group-runtime/index.js';
+import { WebContainerEnvironment } from '../00group-runtime/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,28 +23,39 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html` <dees-terminal
-    .environment=${{
-      NODE_ENV: 'development',
-      PORT: '3000',
-    }}
-  ></dees-terminal> `;
+  public static demo = () => {
+    const env = new WebContainerEnvironment();
+    return html`<dees-terminal .executionEnvironment=${env}></dees-terminal>`;
+  };
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
+  /**
+   * The execution environment (required).
+   * Use WebContainerEnvironment for browser-based execution.
+   */
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
   @property()
   accessor setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
 
+  /**
+   * Environment variables to set in the shell
+   */
   @property()
-  accessor environment: {[key: string]: string} = {};
+  accessor environmentVariables: { [key: string]: string } = {};
 
   @property()
   accessor background: string = '#000000';
 
-  // exposing webcontainer
-  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
-  public webcontainerPromise = this.webcontainerDeferred.promise;
+  /**
+   * Promise that resolves when the environment is ready.
+   * @deprecated Use executionEnvironment directly
+   */
+  private environmentDeferred = new domtools.plugins.smartpromise.Deferred<IExecutionEnvironment>();
+  public environmentPromise = this.environmentDeferred.promise;
 
   constructor() {
     super();
@@ -262,6 +273,8 @@ export class DeesTerminal extends DeesElement {
   }
 
   private fitAddon: FitAddon;
+  private terminal: Terminal | null = null;
+
   public async firstUpdated(
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
@@ -280,6 +293,7 @@ export class DeesTerminal extends DeesElement {
         background: this.background,
       },
     });
+    this.terminal = term;
     this.fitAddon = new FitAddon();
     term.loadAddon(this.fitAddon);
 
@@ -289,12 +303,48 @@ export class DeesTerminal extends DeesElement {
     // Make the terminal's size and geometry fit the size of #terminal-container
     this.fitAddon.fit();
 
-    term.write(`dees-terminal custom terminal. \r\n$ `);
+    // Check if execution environment is provided
+    if (!this.executionEnvironment) {
+      term.write('\x1b[31m');  // Red color
+      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
+      term.write('  ❌ No execution environment provided.\r\n');
+      term.write('\r\n');
+      term.write('  Pass an IExecutionEnvironment via the\r\n');
+      term.write('  \'executionEnvironment\' property.\r\n');
+      term.write('\r\n');
+      term.write('  Example:\r\n');
+      term.write('    const env = new WebContainerEnvironment();\r\n');
+      term.write('    <dees-terminal .executionEnvironment=${env}>\r\n');
+      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
+      term.write('\x1b[0m');  // Reset color
+      return;
+    }
 
-    // lets start the webcontainer
-    // Call only once
-    const webcontainerInstance = await webcontainer.WebContainer.boot();
-    const shellProcess = await webcontainerInstance.spawn('jsh');
+    term.write('Initializing execution environment...\r\n');
+
+    // Initialize the execution environment
+    try {
+      await this.executionEnvironment.init();
+      term.write('Environment ready. Starting shell...\r\n');
+    } catch (error) {
+      term.write('\x1b[31m');  // Red color
+      term.write(`\r\n❌ Failed to initialize environment: ${error}\r\n`);
+      term.write('\x1b[0m');  // Reset color
+      console.error('Failed to initialize execution environment:', error);
+      return;
+    }
+
+    // Spawn shell process
+    let shellProcess;
+    try {
+      shellProcess = await this.executionEnvironment.spawn('jsh');
+    } catch (error) {
+      term.write('\x1b[31m');  // Red color
+      term.write(`\r\n❌ Failed to spawn shell: ${error}\r\n`);
+      term.write('\x1b[0m');  // Reset color
+      console.error('Failed to spawn shell:', error);
+      return;
+    }
     shellProcess.output.pipeTo(
       new WritableStream({
         write(data) {
@@ -306,16 +356,24 @@ export class DeesTerminal extends DeesElement {
     term.onData((data) => {
       input.write(data);
     });
+
     await this.waitForPrompt(term, '~/');
-    // lets set the environment variables
-    await this.setEnvironmentVariables(this.environment, webcontainerInstance);
-    input.write(`source source.env\n`);
-    await this.waitForPrompt(term, '~/');
-    // lets run the setup command
-    input.write(this.setupCommand);
-    await this.waitForPrompt(term, '~/');
-    input.write(`clear && echo 'welcome'\n`);
-    this.webcontainerDeferred.resolve(webcontainerInstance);
+
+    // Set environment variables if provided
+    if (Object.keys(this.environmentVariables).length > 0) {
+      await this.setEnvironmentVariables(this.environmentVariables);
+      input.write(`source source.env\n`);
+      await this.waitForPrompt(term, '~/');
+    }
+
+    // Run setup command if provided
+    if (this.setupCommand) {
+      input.write(this.setupCommand);
+      await this.waitForPrompt(term, '~/');
+    }
+
+    input.write(`clear && echo 'Terminal ready.'\n`);
+    this.environmentDeferred.resolve(this.executionEnvironment);
   }
 
   async connectedCallback(): Promise<void> {
@@ -352,17 +410,25 @@ export class DeesTerminal extends DeesElement {
     });
   }
 
-  public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
-    const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
-    let envFile = ``
-    for (const key in envArg) { 
+  public async setEnvironmentVariables(envArg: { [key: string]: string }): Promise<void> {
+    if (!this.executionEnvironment) {
+      throw new Error('No execution environment available');
+    }
+
+    let envFile = '';
+    for (const key in envArg) {
       envFile += `export ${key}="${envArg[key]}"\n`;
     }
 
-    await webcontainerInstance.mount({'source.env': {
-      file: {
-        contents: envFile,
-      }
-    }});
+    // Write the environment file using the filesystem API
+    await this.executionEnvironment.writeFile('/source.env', envFile);
+  }
+
+  /**
+   * Get the underlying execution environment.
+   * Useful for advanced operations like filesystem access.
+   */
+  public getExecutionEnvironment(): IExecutionEnvironment | null {
+    return this.executionEnvironment;
   }
 }