v3.19.0

changelog.md

@@ -1,5 +1,72 @@
 # Changelog
 
+## 2025-12-31 - 3.19.0 - feat(dees-editor-workspace)
+improve TypeScript IntelliSense, auto-run workspace init commands, and watch node_modules for new packages
+
+- Execute an onInit command from /npmextra.json on workspace initialization (e.g., run pnpm install).
+- Add npmextra.json and an import test file (importtest.ts) plus a sample dependency in the scaffold to test package imports.
+- Add node_modules watcher with debounce to auto-scan and load package types after installs.
+- Enhance TypeScript IntelliSense: recursively load all .d.ts files from packages and @types packages, add package.json as extra lib, and log progress/errors for debugging.
+- Change processContentChange signature to accept optional filePath and trigger a diagnostic refresh when new types are loaded.
+- Expose scanAndLoadNewPackageTypes to scan top-level and scoped packages and load their types.
+- Add start/stop logic for the node_modules watcher in workspace lifecycle to avoid leaks and handle cleanup.
+
+## 2025-12-31 - 3.18.0 - feat(filetree)
+add filesystem watch support to WebContainer environment and auto-refresh file tree; improve icon handling and context menu behavior
+
+- Add IFileWatcher interface and watch(...) signature to IExecutionEnvironment.
+- Implement watch(...) in WebContainerEnvironment using WebContainer's fs.watch and return a stop() handle.
+- dees-editor-filetree: start/stop file watcher, debounce auto-refresh on FS changes, cleanup on disconnect, and track last execution environment.
+- Add clipboard state (copy/cut) and related UI/menu enhancements for file operations (new file/folder, rename, delete, copy/paste).
+- dees-icon: default to Lucide icons when no prefix is provided.
+- dees-contextmenu: remove 'lucide:' prefix usage in templates and avoid awaiting windowLayer.destroy() to provide instant visual feedback.
+- Menu item shape adjusted (use { divider: true } for dividers) and various menu icon name updates.
+
+## 2025-12-31 - 3.17.0 - feat(editor)
+add file explorer toolbar, empty-space context menu, editor auto-save, save-all, and keyboard save shortcuts
+
+- Added filetree toolbar with New File / New Folder actions and toolbar styling
+- Added right-click context menu for empty filetree space to create files/folders
+- Implemented editor menu button with context menu (Auto Save toggle, Save, Save All)
+- Added auto-save toggle with 2s interval and cleanup on disconnect
+- Implemented Save and Save All APIs that persist files and update IntelliSense manager
+- Added keyboard shortcuts: Cmd/Ctrl+S to save active file and Cmd/Ctrl+Shift+S to save all
+- Made tabs scrollable with a tabs container and added an editor menu button
+
+## 2025-12-30 - 3.16.0 - feat(editor)
+improve TypeScript IntelliSense and module resolution for Monaco editor
+
+- Add file cache (fileCache) and getFileContent() for synchronous access to project files
+- Track and dispose Monaco extra libs (addedExtraLibs) and register project files via addExtraLib to enable TypeScript module resolution
+- Add addFileAsExtraLib logic to register .ts/.tsx files also under .js/.jsx paths so ESM imports resolve to TypeScript sources
+- Use ModuleResolutionKind.Bundler fallback to NodeJs and set compilerOptions (baseUrl '/', allowImportingTsExtensions, resolveJsonModule) to improve resolution
+- Adapt executionEnvironment API usage to readDir/readFile and check entry.type ('directory'|'file') instead of isDirectory/isFile
+- Add a debugging/screenshot asset: .playwright-mcp/module-resolution-fixed.png
+
+## 2025-12-30 - 3.15.0 - feat(editor)
+enable file-backed Monaco models and add Problems panel; lazy-init project TypeScript IntelliSense
+
+- dees-editor-monaco: add `filePath` property and create/get Monaco models with file:// URIs so editors are backed by real models; sync content into models and handle model switching when filePath changes; enable hover config and improved lifecycle handling.
+- dees-editor-workspace: add bottom 'Problems' panel and panel tabs (terminal/problems), diagnosticMarkers state, marker listener, UI for problem list, and navigation to file/position when a problem is clicked; initialize IntelliSense lazily when a file is opened.
+- typescript-intellisense: index project .ts/.js files from the virtual filesystem into Monaco models for cross-file resolution, enable allowNonTsExtensions and set eager model sync so TypeScript processes models eagerly.
+- General: improved handling for language changes, model language switching, and deferred initialization of the IntelliSense manager.
+- Add Playwright test images (workspace screenshots) used by CI/tests.
+
+## 2025-12-30 - 3.14.2 - fix(editor)
+bump monaco-editor to 0.55.1 and adapt TypeScript intellisense integration to the updated Monaco API
+
+- Bumped dependency monaco-editor from 0.52.2 to 0.55.1 in package.json.
+- Generated MONACO_VERSION module updated to 0.55.1 and moved target to ts_web/elements/00group-editor/dees-editor-monaco/version.ts.
+- Refactored TypeScript IntelliSense code to use a typed Monaco TS API (added IMonacoTypeScriptAPI, tsApi getter, and replaced direct monaco.languages.typescript.* calls).
+- Added test/workspace screenshot .playwright-mcp/workspace-test.png (binary asset).
+
+## 2025-12-30 - 3.14.1 - fix(build)
+bump @webcontainer/api and enable skipLibCheck to avoid type-check conflicts
+
+- Updated @webcontainer/api from 1.2.0 to 1.6.1
+- Added "skipLibCheck": true to tsconfig.json compilerOptions to suppress external library type errors
+- No breaking changes expected; this is a build/dev fix
+
 ## 2025-12-30 - 3.14.0 - feat(editor)
 add modal prompts for file/folder creation, improve Monaco editor reactivity and add TypeScript IntelliSense support
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.14.0",
+  "version": "3.19.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -32,13 +32,13 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.3.0",
-    "@webcontainer/api": "1.2.0",
+    "@webcontainer/api": "1.6.1",
     "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
     "lit": "^3.3.1",
     "lucide": "^0.562.0",
-    "monaco-editor": "0.52.2",
+    "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"

pnpm-lock.yaml

@@ -57,8 +57,8 @@ importers:
         specifier: ^9.3.0
         version: 9.3.0
       '@webcontainer/api':
-        specifier: 1.2.0
+        specifier: 1.6.1
-        version: 1.2.0
+        version: 1.6.1
       apexcharts:
         specifier: ^5.3.6
         version: 5.3.6
@@ -75,8 +75,8 @@ importers:
         specifier: ^0.562.0
         version: 0.562.0
       monaco-editor:
-        specifier: 0.52.2
+        specifier: 0.55.1
-        version: 0.52.2
+        version: 0.55.1
       pdfjs-dist:
         specifier: ^4.10.38
         version: 4.10.38
@@ -1760,6 +1760,9 @@ packages:
   '@webcontainer/api@1.2.0':
     resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
 
+  '@webcontainer/api@1.6.1':
+    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+
   '@yr/monotone-cubic-spline@1.0.3':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
 
@@ -2149,6 +2152,9 @@ packages:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
 
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2771,6 +2777,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   matcher@5.0.0:
     resolution: {integrity: sha512-s2EMBOWtXFc8dgqvoAzKJXxNHibcdJMV0gwqKUaw9E2JBJuGUK7DrNKrA6g/i+v72TT16+6sVm5mS3thaMLQUw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2981,6 +2992,9 @@ packages:
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   mongodb-connection-string-url@3.0.2:
     resolution: {integrity: sha512-rMO7CGo/9BFwyZABcKAWL8UJwH/Kc2x0g72uhDWzG48URRax5TCIcJ7Rc3RZqffZzO/Gwff/jyKwCU9TN8gehA==}
 
@@ -6800,6 +6814,8 @@ snapshots:
 
   '@webcontainer/api@1.2.0': {}
 
+  '@webcontainer/api@1.6.1': {}
+
   '@yr/monotone-cubic-spline@1.0.3': {}
 
   accepts@1.3.8:
@@ -7168,6 +7184,10 @@ snapshots:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -7887,6 +7907,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@14.0.0: {}
+
   matcher@5.0.0:
     dependencies:
       escape-string-regexp: 5.0.0
@@ -8268,6 +8290,11 @@ snapshots:
 
   monaco-editor@0.52.2: {}
 
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   mongodb-connection-string-url@3.0.2:
     dependencies:
       '@types/whatwg-url': 11.0.5

scripts/update-monaco-version.cjs

@@ -26,7 +26,7 @@ function getMonacoVersion() {
 }
 
 function writeVersionModule(version) {
-  const targetDir = path.join(projectRoot, 'ts_web', 'elements', 'dees-editor');
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-editor', 'dees-editor-monaco');
   fs.mkdirSync(targetDir, { recursive: true });
   const targetFile = path.join(targetDir, 'version.ts');
   const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.14.0',
+  version: '3.19.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-editor/dees-editor-filetree/dees-editor-filetree.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IExecutionEnvironment, IFileEntry } from '../../00group-runtime/index.js';
+import type { IExecutionEnvironment, IFileEntry, IFileWatcher } from '../../00group-runtime/index.js';
 import '../../dees-icon/dees-icon.js';
 import '../../dees-contextmenu/dees-contextmenu.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
@@ -60,6 +60,15 @@ export class DeesEditorFiletree extends DeesElement {
   private expandedPaths: Set<string> = new Set();
   private loadTreeStarted: boolean = false;
 
+  // Clipboard state for copy/paste operations
+  private clipboardPath: string | null = null;
+  private clipboardOperation: 'copy' | 'cut' | null = null;
+
+  // File watcher for auto-refresh
+  private fileWatcher: IFileWatcher | null = null;
+  private refreshDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+  private lastExecutionEnvironment: IExecutionEnvironment | null = null;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -203,6 +212,49 @@ export class DeesEditorFiletree extends DeesElement {
         color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
         font-style: italic;
       }
+
+      .filetree-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 36px;
+        padding: 0 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .toolbar-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .toolbar-actions {
+        display: flex;
+        gap: 4px;
+      }
+
+      .toolbar-button {
+        padding: 4px;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.15s, background 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+      }
+
+      .toolbar-button:hover {
+        opacity: 1;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
     `,
   ];
 
@@ -231,18 +283,25 @@ export class DeesEditorFiletree extends DeesElement {
       `;
     }
 
-    if (this.treeData.length === 0) {
-      return html`
-        <div class="empty">
-          No files found.
-        </div>
-      `;
-    }
-
     return html`
-      <div class="tree-container">
+      <div class="filetree-toolbar">
-        ${this.renderTree(this.treeData)}
+        <span class="toolbar-title">Explorer</span>
+        <div class="toolbar-actions">
+          <div class="toolbar-button" @click=${() => this.createNewFile('/')} title="New File">
+            <dees-icon .icon=${'lucide:filePlus'} iconSize="16"></dees-icon>
+          </div>
+          <div class="toolbar-button" @click=${() => this.createNewFolder('/')} title="New Folder">
+            <dees-icon .icon=${'lucide:folderPlus'} iconSize="16"></dees-icon>
+          </div>
+        </div>
       </div>
+      ${this.treeData.length === 0
+        ? html`<div class="empty">No files found.</div>`
+        : html`
+            <div class="tree-container" @contextmenu=${this.handleEmptySpaceContextMenu}>
+              ${this.renderTree(this.treeData)}
+            </div>
+          `}
     `;
   }
 
@@ -390,26 +449,94 @@ export class DeesEditorFiletree extends DeesElement {
     const menuItems = [];
 
     if (node.type === 'directory') {
+      // Directory-specific options
       menuItems.push(
         {
           name: 'New File',
-          iconName: 'lucide:filePlus',
+          iconName: 'filePlus',
           action: async () => this.createNewFile(node.path),
         },
         {
           name: 'New Folder',
-          iconName: 'lucide:folderPlus',
+          iconName: 'folderPlus',
           action: async () => this.createNewFolder(node.path),
         },
-        { name: 'divider' }
+        { divider: true }
       );
     }
 
-    menuItems.push({
+    // Common options for both files and directories
-      name: 'Delete',
+    menuItems.push(
-      iconName: 'lucide:trash2',
+      {
-      action: async () => this.deleteItem(node),
+        name: 'Rename',
-    });
+        iconName: 'pencil',
+        action: async () => this.renameItem(node),
+      },
+      {
+        name: 'Duplicate',
+        iconName: 'files',
+        action: async () => this.duplicateItem(node),
+      },
+      {
+        name: 'Copy',
+        iconName: 'copy',
+        action: async () => this.copyItem(node),
+      }
+    );
+
+    // Paste option (only for directories and when clipboard has content)
+    if (node.type === 'directory' && this.clipboardPath) {
+      menuItems.push({
+        name: 'Paste',
+        iconName: 'clipboard',
+        action: async () => this.pasteItem(node.path),
+      });
+    }
+
+    menuItems.push(
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: async () => this.deleteItem(node),
+      }
+    );
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async handleEmptySpaceContextMenu(e: MouseEvent) {
+    // Only trigger if clicking on the container itself, not a tree item
+    const target = e.target as HTMLElement;
+    if (target.closest('.tree-item')) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const menuItems: any[] = [
+      {
+        name: 'New File',
+        iconName: 'filePlus',
+        action: async () => this.createNewFile('/'),
+      },
+      {
+        name: 'New Folder',
+        iconName: 'folderPlus',
+        action: async () => this.createNewFolder('/'),
+      },
+    ];
+
+    // Add Paste option if clipboard has content
+    if (this.clipboardPath) {
+      menuItems.push(
+        { divider: true },
+        {
+          name: 'Paste',
+          iconName: 'clipboard',
+          action: async () => this.pasteItem('/'),
+        }
+      );
+    }
 
     await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
   }
@@ -417,19 +544,17 @@ export class DeesEditorFiletree extends DeesElement {
   private async showInputModal(options: {
     heading: string;
     label: string;
+    value?: string;
+    buttonName?: string;
   }): Promise<string | null> {
     return new Promise(async (resolve) => {
-      let inputValue = '';
-
       const modal = await DeesModal.createAndShow({
         heading: options.heading,
         width: 'small',
         content: html`
           <dees-input-text
             .label=${options.label}
-            @changeSubject=${(e: CustomEvent) => {
+            .value=${options.value || ''}
-              inputValue = (e.target as DeesInputText).value;
-            }}
           ></dees-input-text>
         `,
         menuOptions: [
@@ -441,10 +566,15 @@ export class DeesEditorFiletree extends DeesElement {
             },
           },
           {
-            name: 'Create',
+            name: options.buttonName || 'Create',
             action: async (modalRef) => {
+              // Query the input element directly and read its value
+              const contentEl = modalRef.shadowRoot?.querySelector('.modal .content');
+              const inputElement = contentEl?.querySelector('dees-input-text') as DeesInputText | null;
+              const inputValue = inputElement?.value?.trim() || '';
+
               await modalRef.destroy();
-              resolve(inputValue.trim() || null);
+              resolve(inputValue || null);
             },
           },
         ],
@@ -530,13 +660,225 @@ export class DeesEditorFiletree extends DeesElement {
     }
   }
 
+  /**
+   * Rename a file or folder
+   */
+  private async renameItem(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    const newName = await this.showInputModal({
+      heading: 'Rename',
+      label: 'New name',
+      value: node.name,
+      buttonName: 'Rename',
+    });
+    if (!newName || newName === node.name) return;
+
+    // Calculate new path
+    const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+    const newPath = parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
+
+    try {
+      if (node.type === 'file') {
+        // For files: read content, write to new path, delete old
+        const content = await this.executionEnvironment.readFile(node.path);
+        await this.executionEnvironment.writeFile(newPath, content);
+        await this.executionEnvironment.rm(node.path);
+      } else {
+        // For directories: recursively copy contents then delete old
+        await this.copyDirectoryContents(node.path, newPath);
+        await this.executionEnvironment.rm(node.path, { recursive: true });
+      }
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-renamed', {
+          detail: { oldPath: node.path, newPath, type: node.type },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to rename item:', error);
+    }
+  }
+
+  /**
+   * Duplicate a file or folder
+   */
+  private async duplicateItem(node: ITreeNode) {
+    if (!this.executionEnvironment) return;
+
+    const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+    let newName: string;
+
+    if (node.type === 'file') {
+      // Add _copy before extension
+      const lastDot = node.name.lastIndexOf('.');
+      if (lastDot > 0) {
+        const baseName = node.name.substring(0, lastDot);
+        const ext = node.name.substring(lastDot);
+        newName = `${baseName}_copy${ext}`;
+      } else {
+        newName = `${node.name}_copy`;
+      }
+    } else {
+      newName = `${node.name}_copy`;
+    }
+
+    const newPath = parentPath === '/' ? `/${newName}` : `${parentPath}/${newName}`;
+
+    try {
+      if (node.type === 'file') {
+        const content = await this.executionEnvironment.readFile(node.path);
+        await this.executionEnvironment.writeFile(newPath, content);
+      } else {
+        await this.copyDirectoryContents(node.path, newPath);
+      }
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-duplicated', {
+          detail: { sourcePath: node.path, newPath, type: node.type },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      console.error('Failed to duplicate item:', error);
+    }
+  }
+
+  /**
+   * Copy item path to clipboard
+   */
+  private async copyItem(node: ITreeNode) {
+    this.clipboardPath = node.path;
+    this.clipboardOperation = 'copy';
+  }
+
+  /**
+   * Paste copied item to target directory
+   */
+  private async pasteItem(targetPath: string) {
+    if (!this.executionEnvironment || !this.clipboardPath) return;
+
+    // Get the name from clipboard path
+    const name = this.clipboardPath.split('/').pop() || 'pasted';
+    const newPath = targetPath === '/' ? `/${name}` : `${targetPath}/${name}`;
+
+    try {
+      // Check if source exists
+      if (!(await this.executionEnvironment.exists(this.clipboardPath))) {
+        console.error('Source file no longer exists');
+        this.clipboardPath = null;
+        this.clipboardOperation = null;
+        return;
+      }
+
+      // Check if it's a file or directory by trying to read as file
+      try {
+        const content = await this.executionEnvironment.readFile(this.clipboardPath);
+        await this.executionEnvironment.writeFile(newPath, content);
+      } catch {
+        // If reading fails, it's a directory
+        await this.copyDirectoryContents(this.clipboardPath, newPath);
+      }
+
+      await this.refresh();
+      this.dispatchEvent(
+        new CustomEvent('item-pasted', {
+          detail: { sourcePath: this.clipboardPath, targetPath: newPath },
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      // Clear clipboard after paste
+      this.clipboardPath = null;
+      this.clipboardOperation = null;
+    } catch (error) {
+      console.error('Failed to paste item:', error);
+    }
+  }
+
+  /**
+   * Recursively copy directory contents to a new path
+   */
+  private async copyDirectoryContents(sourcePath: string, destPath: string) {
+    if (!this.executionEnvironment) return;
+
+    // Create destination directory
+    await this.executionEnvironment.mkdir(destPath);
+
+    // Read source directory contents
+    const entries = await this.executionEnvironment.readDir(sourcePath);
+
+    for (const entry of entries) {
+      const srcEntryPath = sourcePath === '/' ? `/${entry.name}` : `${sourcePath}/${entry.name}`;
+      const destEntryPath = destPath === '/' ? `/${entry.name}` : `${destPath}/${entry.name}`;
+
+      if (entry.type === 'directory') {
+        await this.copyDirectoryContents(srcEntryPath, destEntryPath);
+      } else {
+        const content = await this.executionEnvironment.readFile(srcEntryPath);
+        await this.executionEnvironment.writeFile(destEntryPath, content);
+      }
+    }
+  }
+
   public async firstUpdated() {
     await this.loadTree();
   }
 
   public async updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
+    if (changedProperties.has('executionEnvironment')) {
-      await this.loadTree();
+      // Stop watching the old environment
+      if (this.lastExecutionEnvironment !== this.executionEnvironment) {
+        this.stopFileWatcher();
+        this.lastExecutionEnvironment = this.executionEnvironment;
+      }
+
+      if (this.executionEnvironment) {
+        await this.loadTree();
+        this.startFileWatcher();
+      }
+    }
+  }
+
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.stopFileWatcher();
+    if (this.refreshDebounceTimeout) {
+      clearTimeout(this.refreshDebounceTimeout);
+      this.refreshDebounceTimeout = null;
+    }
+  }
+
+  private startFileWatcher() {
+    if (!this.executionEnvironment || this.fileWatcher) return;
+
+    try {
+      this.fileWatcher = this.executionEnvironment.watch(
+        '/',
+        (_event, _filename) => {
+          // Debounce refresh to avoid excessive updates
+          if (this.refreshDebounceTimeout) {
+            clearTimeout(this.refreshDebounceTimeout);
+          }
+          this.refreshDebounceTimeout = setTimeout(() => {
+            this.refresh();
+          }, 300);
+        },
+        { recursive: true }
+      );
+    } catch (error) {
+      console.warn('File watching not supported:', error);
+    }
+  }
+
+  private stopFileWatcher() {
+    if (this.fileWatcher) {
+      this.fileWatcher.stop();
+      this.fileWatcher = null;
     }
   }
 

ts_web/elements/00group-editor/dees-editor-monaco/dees-editor-monaco.ts

@@ -40,6 +40,11 @@ export class DeesEditorMonaco extends DeesElement {
   })
   accessor language = 'typescript';
 
+  @property({
+    type: String
+  })
+  accessor filePath: string = '';
+
   @property({
     type: Object
   })
@@ -114,14 +119,35 @@ export class DeesEditorMonaco extends DeesElement {
       const isBright = domtoolsInstance.themeManager.goBrightBoolean;
       const initialTheme = isBright ? 'vs' : 'vs-dark';
 
-      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
+      const monacoInstance = (window as any).monaco as typeof monaco;
-        value: this.content,
+
-        language: this.language,
+      // Create or get model with proper file URI for TypeScript IntelliSense
+      let model: monaco.editor.ITextModel | null = null;
+      if (this.filePath) {
+        const uri = monacoInstance.Uri.parse(`file://${this.filePath}`);
+        model = monacoInstance.editor.getModel(uri);
+        if (!model) {
+          model = monacoInstance.editor.createModel(this.content, this.language, uri);
+        } else {
+          model.setValue(this.content);
+        }
+      }
+
+      const editor = (monacoInstance.editor as typeof monaco.editor).create(container, {
+        model: model || undefined,
+        value: model ? undefined : this.content,
+        language: model ? undefined : this.language,
         theme: initialTheme,
         useShadowDOM: true,
         fontSize: 16,
         automaticLayout: true,
-        wordWrap: this.wordWrap
+        wordWrap: this.wordWrap,
+        hover: {
+          enabled: true,
+          delay: 300,
+          sticky: true,
+          above: false,
+        },
       });
 
       // Subscribe to theme changes
@@ -160,7 +186,35 @@ export class DeesEditorMonaco extends DeesElement {
   public async updated(changedProperties: Map<string, any>): Promise<void> {
     super.updated(changedProperties);
 
-    // Handle content changes
+    const monacoInstance = (window as any).monaco as typeof monaco;
+    if (!monacoInstance) return;
+
+    // Handle filePath changes - switch to different model
+    if (changedProperties.has('filePath') && this.filePath) {
+      const editor = await this.editorDeferred.promise;
+      const uri = monacoInstance.Uri.parse(`file://${this.filePath}`);
+      let model = monacoInstance.editor.getModel(uri);
+
+      if (!model) {
+        model = monacoInstance.editor.createModel(this.content, this.language, uri);
+      } else {
+        // Update model content if different
+        if (model.getValue() !== this.content) {
+          this.isUpdatingFromExternal = true;
+          model.setValue(this.content);
+          this.isUpdatingFromExternal = false;
+        }
+      }
+
+      // Switch editor to use this model
+      const currentModel = editor.getModel();
+      if (currentModel?.uri.toString() !== uri.toString()) {
+        editor.setModel(model);
+      }
+      return; // filePath change handles content too
+    }
+
+    // Handle content changes (when no filePath or filePath unchanged)
     if (changedProperties.has('content')) {
       const editor = await this.editorDeferred.promise;
       const currentValue = editor.getValue();
@@ -176,10 +230,7 @@ export class DeesEditorMonaco extends DeesElement {
       const editor = await this.editorDeferred.promise;
       const model = editor.getModel();
       if (model) {
-        const monacoInstance = (window as any).monaco;
+        monacoInstance.editor.setModelLanguage(model, this.language);
-        if (monacoInstance) {
-          monacoInstance.editor.setModelLanguage(model, this.language);
-        }
       }
     }
   }

ts_web/elements/00group-editor/dees-editor-monaco/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/update-monaco-version.cjs
-export const MONACO_VERSION = '0.52.2';
+export const MONACO_VERSION = '0.55.1';

ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
+import type { IExecutionEnvironment, IFileWatcher } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 import type { FileSystemTree } from '@webcontainer/api';
 import '../dees-editor-monaco/dees-editor-monaco.js';
@@ -20,6 +20,7 @@ import '../../dees-terminal/dees-terminal.js';
 import '../../dees-icon/dees-icon.js';
 import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
 import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,6 +56,9 @@ export class DeesEditorWorkspace extends DeesElement {
                   build: 'tsc',
                   dev: 'tsc --watch',
                 },
+                dependencies: {
+                  '@push.rocks/smartpromise': '^4.2.3',
+                },
                 devDependencies: {
                   typescript: '^5.0.0',
                 },
@@ -64,6 +68,19 @@ export class DeesEditorWorkspace extends DeesElement {
             ),
           },
         },
+        'npmextra.json': {
+          file: {
+            contents: JSON.stringify(
+              {
+                deesEditorWorkspace: {
+                  onInit: 'pnpm install',
+                },
+              },
+              null,
+              2
+            ),
+          },
+        },
         'tsconfig.json': {
           file: {
             contents: JSON.stringify(
@@ -124,6 +141,28 @@ export function formatName(name: string): string {
 export function createUser(firstName: string, lastName: string): IUser {
   return { firstName, lastName };
 }
+`,
+              },
+            },
+            'importtest.ts': {
+              file: {
+                contents: `// Test npm package imports
+import * as smartpromise from '@push.rocks/smartpromise';
+
+// This should have IntelliSense showing defer() method
+const deferred = smartpromise.defer<string>();
+
+// Test using the deferred promise
+async function testSmartPromise() {
+  setTimeout(() => {
+    deferred.resolve('Hello from smartpromise!');
+  }, 100);
+
+  const result = await deferred.promise;
+  console.log(result);
+}
+
+testSmartPromise();
 `,
               },
             },
@@ -178,9 +217,49 @@ export function createUser(firstName: string, lastName: string): IUser {
   @state()
   accessor isInitializing: boolean = true;
 
+  @state()
+  accessor activeBottomPanel: 'terminal' | 'problems' = 'terminal';
+
+  @state()
+  accessor diagnosticMarkers: Array<{
+    message: string;
+    severity: number;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+    source?: string;
+    resource: { path: string };
+  }> = [];
+
   private editorElement: DeesEditorMonaco | null = null;
   private initializationStarted: boolean = false;
   private intelliSenseManager: TypeScriptIntelliSenseManager | null = null;
+  private intelliSenseInitialized: boolean = false;
+
+  // node_modules watcher for auto-loading types
+  private nodeModulesWatcher: IFileWatcher | null = null;
+  private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Auto-save functionality
+  @state()
+  accessor autoSave: boolean = false;
+  private autoSaveInterval: ReturnType<typeof setInterval> | null = null;
+
+  // Keyboard shortcut handler (bound for proper cleanup)
+  private keydownHandler = (e: KeyboardEvent) => {
+    // Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
+    if ((e.metaKey || e.ctrlKey) && e.key === 's' && !e.shiftKey) {
+      e.preventDefault();
+      this.saveActiveFile();
+    }
+
+    // Cmd+Shift+S - Save All
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 's') {
+      e.preventDefault();
+      this.saveAllFiles();
+    }
+  };
 
   public static styles = [
     themeDefaultStyles,
@@ -374,6 +453,31 @@ export function createUser(firstName: string, lastName: string): IUser {
         background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
       }
 
+      .tabs-container {
+        display: flex;
+        flex: 1;
+        overflow-x: auto;
+      }
+
+      .editor-menu-button {
+        padding: 6px 8px;
+        margin-right: 4px;
+        margin-left: auto;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.15s, background 0.15s;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .editor-menu-button:hover {
+        opacity: 1;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
+
       .editor-content {
         flex: 1;
         position: relative;
@@ -387,6 +491,127 @@ export function createUser(firstName: string, lastName: string): IUser {
         bottom: 0;
       }
 
+      .problems-content {
+        position: absolute;
+        top: 32px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: auto;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+      }
+
+      .panel-tabs {
+        display: flex;
+        align-items: center;
+        gap: 0;
+      }
+
+      .panel-tab {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 0 12px;
+        height: 32px;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+        border-bottom: 2px solid transparent;
+        transition: all 0.15s ease;
+      }
+
+      .panel-tab:hover {
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+      }
+
+      .panel-tab.active {
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        border-bottom-color: ${cssManager.bdTheme('hsl(210 100% 50%)', 'hsl(210 100% 60%)')};
+      }
+
+      .panel-tab-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: 9px;
+        font-size: 11px;
+        font-weight: 600;
+        background: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 45%)')};
+        color: white;
+      }
+
+      .panel-tab-badge.warning {
+        background: ${cssManager.bdTheme('hsl(40 70% 50%)', 'hsl(40 70% 45%)')};
+      }
+
+      .panel-tab-badge.none {
+        display: none;
+      }
+
+      .problems-list {
+        padding: 4px 0;
+      }
+
+      .problem-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 6px 12px;
+        cursor: pointer;
+        font-size: 12px;
+        line-height: 1.4;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+        transition: background 0.1s ease;
+      }
+
+      .problem-item:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+      }
+
+      .problem-icon {
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+
+      .problem-icon.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      .problem-icon.warning {
+        color: ${cssManager.bdTheme('hsl(40 70% 50%)', 'hsl(40 70% 60%)')};
+      }
+
+      .problem-details {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .problem-message {
+        word-break: break-word;
+      }
+
+      .problem-location {
+        margin-top: 2px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+      }
+
+      .problems-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+        font-size: 13px;
+        gap: 8px;
+      }
+
       .empty-state {
         display: flex;
         flex-direction: column;
@@ -474,18 +699,23 @@ export function createUser(firstName: string, lastName: string): IUser {
 
         <div class="editor-panel">
           <div class="tabs-bar">
-            ${this.openFiles.map(file => html`
+            <div class="tabs-container">
-              <div
+              ${this.openFiles.map(file => html`
-                class="tab ${file.path === this.activeFilePath ? 'active' : ''}"
+                <div
-                @click=${() => this.activateFile(file.path)}
+                  class="tab ${file.path === this.activeFilePath ? 'active' : ''}"
-              >
+                  @click=${() => this.activateFile(file.path)}
-                ${file.modified ? html`<span class="tab-modified"></span>` : ''}
+                >
-                <span class="tab-name">${file.name}</span>
+                  ${file.modified ? html`<span class="tab-modified"></span>` : ''}
-                <span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
+                  <span class="tab-name">${file.name}</span>
-                  <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
+                  <span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
-                </span>
+                    <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
-              </div>
+                  </span>
-            `)}
+                </div>
+              `)}
+            </div>
+            <div class="editor-menu-button" @click=${this.showEditorMenu} title="Editor options">
+              <dees-icon .icon=${'lucide:moreVertical'} iconSize="16"></dees-icon>
+            </div>
           </div>
           <div class="editor-content">
             ${this.openFiles.length === 0 ? html`
@@ -495,6 +725,7 @@ export function createUser(firstName: string, lastName: string): IUser {
               </div>
             ` : html`
               <dees-editor-monaco
+                .filePath=${this.activeFilePath}
                 .content=${this.getActiveFileContent()}
                 .language=${this.getLanguageFromPath(this.activeFilePath)}
                 @content-change=${this.handleContentChange}
@@ -509,9 +740,24 @@ export function createUser(firstName: string, lastName: string): IUser {
             style="height: ${this.isTerminalCollapsed ? 32 : this.terminalHeight}px"
           >
             <div class="panel-header">
-              <div class="panel-header-title">
+              <div class="panel-tabs">
-                <dees-icon .icon=${'lucide:terminal'} iconSize="14"></dees-icon>
+                <div
-                Terminal
+                  class="panel-tab ${this.activeBottomPanel === 'terminal' ? 'active' : ''}"
+                  @click=${() => this.activeBottomPanel = 'terminal'}
+                >
+                  <dees-icon .icon=${'lucide:terminal'} iconSize="14"></dees-icon>
+                  Terminal
+                </div>
+                <div
+                  class="panel-tab ${this.activeBottomPanel === 'problems' ? 'active' : ''}"
+                  @click=${() => this.activeBottomPanel = 'problems'}
+                >
+                  <dees-icon .icon=${'lucide:circleAlert'} iconSize="14"></dees-icon>
+                  Problems
+                  ${this.diagnosticMarkers.length > 0 ? html`
+                    <span class="panel-tab-badge ${this.getErrorCount() === 0 ? 'warning' : ''}">${this.diagnosticMarkers.length}</span>
+                  ` : ''}
+                </div>
               </div>
               <div class="panel-header-actions">
                 <div class="panel-action" @click=${this.toggleTerminal}>
@@ -522,18 +768,36 @@ export function createUser(firstName: string, lastName: string): IUser {
                 </div>
               </div>
             </div>
-            <div class="terminal-content">
+            <div class="terminal-content" style="display: ${this.activeBottomPanel === 'terminal' ? 'block' : 'none'}">
               <dees-terminal
                 .executionEnvironment=${this.executionEnvironment}
                 .setupCommand=${''}
               ></dees-terminal>
             </div>
+            <div class="problems-content" style="display: ${this.activeBottomPanel === 'problems' ? 'block' : 'none'}">
+              ${this.renderProblemsPanel()}
+            </div>
           </div>
         ` : ''}
       </div>
     `;
   }
 
+  async connectedCallback() {
+    await super.connectedCallback();
+    document.addEventListener('keydown', this.keydownHandler);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('keydown', this.keydownHandler);
+    if (this.autoSaveInterval) {
+      clearInterval(this.autoSaveInterval);
+      this.autoSaveInterval = null;
+    }
+    this.stopNodeModulesWatcher();
+  }
+
   public async firstUpdated() {
     if (this.executionEnvironment) {
       await this.initializeWorkspace();
@@ -562,8 +826,11 @@ export function createUser(firstName: string, lastName: string): IUser {
       } else if (!this.executionEnvironment.ready) {
         await this.executionEnvironment.init();
       }
-      // Initialize IntelliSense after workspace is ready
+
-      await this.initializeIntelliSense();
+      // Execute onInit command from npmextra.json if present
+      await this.executeOnInitCommand();
+
+      // IntelliSense is initialized lazily when first file is opened (Monaco loads on demand)
     } catch (error) {
       console.error('Failed to initialize workspace:', error);
       // Reset flag to allow retry
@@ -573,18 +840,102 @@ export function createUser(firstName: string, lastName: string): IUser {
     }
   }
 
-  private async initializeIntelliSense(): Promise<void> {
+  /**
+   * Execute onInit command from npmextra.json if present
+   * This allows automatic setup like `pnpm install` on workspace initialization
+   */
+  private async executeOnInitCommand(): Promise<void> {
     if (!this.executionEnvironment) return;
 
-    // Wait for Monaco to be available globally
+    try {
-    const monacoInstance = (window as any).monaco;
+      if (await this.executionEnvironment.exists('/npmextra.json')) {
+        const content = await this.executionEnvironment.readFile('/npmextra.json');
+        const config = JSON.parse(content);
+        const onInit = config?.deesEditorWorkspace?.onInit;
+
+        if (onInit && typeof onInit === 'string') {
+          console.log('Executing onInit command:', onInit);
+          // Parse command and args
+          const [cmd, ...args] = onInit.split(' ');
+          const process = await this.executionEnvironment.spawn(cmd, args);
+          // Wait for completion
+          const exitCode = await process.exit;
+          console.log('onInit command completed with exit code:', exitCode);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to execute onInit command:', error);
+    }
+  }
+
+  private async initializeIntelliSense(): Promise<void> {
+    if (!this.executionEnvironment) return;
+    if (this.intelliSenseInitialized) return;
+
+    // Wait for Monaco to be available globally (with retry for timing)
+    let monacoInstance = (window as any).monaco;
     if (!monacoInstance) {
-      console.warn('Monaco not loaded, IntelliSense disabled');
+      // Monaco loads asynchronously when the editor mounts, wait a bit
+      await new Promise(resolve => setTimeout(resolve, 100));
+      monacoInstance = (window as any).monaco;
+    }
+
+    if (!monacoInstance) {
+      console.warn('Monaco not yet loaded, IntelliSense will be initialized later');
       return;
     }
 
+    this.intelliSenseInitialized = true;
     this.intelliSenseManager = new TypeScriptIntelliSenseManager();
     await this.intelliSenseManager.init(monacoInstance, this.executionEnvironment);
+
+    // Set up marker listener for Problems panel
+    this.setupMarkerListener();
+
+    // Start watching node_modules for package installations
+    this.startNodeModulesWatcher();
+
+    // Initial scan for any existing packages
+    await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+  }
+
+  /**
+   * Watch node_modules for changes (e.g., after pnpm install)
+   * and automatically load types for new packages
+   */
+  private startNodeModulesWatcher(): void {
+    if (!this.executionEnvironment || this.nodeModulesWatcher) return;
+
+    try {
+      this.nodeModulesWatcher = this.executionEnvironment.watch(
+        '/node_modules',
+        (_event, _filename) => {
+          // Debounce - pnpm install creates many file changes
+          if (this.nodeModulesDebounceTimeout) {
+            clearTimeout(this.nodeModulesDebounceTimeout);
+          }
+          this.nodeModulesDebounceTimeout = setTimeout(async () => {
+            if (this.intelliSenseManager) {
+              await this.intelliSenseManager.scanAndLoadNewPackageTypes();
+            }
+          }, 2000); // 2 second debounce for package installation
+        },
+        { recursive: true }
+      );
+    } catch (error) {
+      console.warn('Could not watch node_modules:', error);
+    }
+  }
+
+  private stopNodeModulesWatcher(): void {
+    if (this.nodeModulesWatcher) {
+      this.nodeModulesWatcher.stop();
+      this.nodeModulesWatcher = null;
+    }
+    if (this.nodeModulesDebounceTimeout) {
+      clearTimeout(this.nodeModulesDebounceTimeout);
+      this.nodeModulesDebounceTimeout = null;
+    }
   }
 
   private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
@@ -610,6 +961,21 @@ export function createUser(firstName: string, lastName: string): IUser {
         { path, name, content, modified: false },
       ];
       this.activeFilePath = path;
+
+      // Initialize IntelliSense lazily after first file opens (Monaco loads on demand)
+      if (!this.intelliSenseInitialized) {
+        // Wait for Monaco editor to mount and load Monaco from CDN
+        await this.updateComplete;
+        // Give Monaco time to load via require.js
+        await new Promise(resolve => setTimeout(resolve, 500));
+        await this.initializeIntelliSense();
+
+        // Process the initial file content for IntelliSense
+        const language = this.getLanguageFromPath(path);
+        if (this.intelliSenseManager && (language === 'typescript' || language === 'javascript')) {
+          await this.intelliSenseManager.processContentChange(content, path);
+        }
+      }
     } catch (error) {
       console.error(`Failed to open file ${path}:`, error);
     }
@@ -666,7 +1032,7 @@ export function createUser(firstName: string, lastName: string): IUser {
       // Process content for IntelliSense (TypeScript/JavaScript files)
       const language = this.getLanguageFromPath(this.activeFilePath);
       if (this.intelliSenseManager && (language === 'typescript' || language === 'javascript')) {
-        this.intelliSenseManager.processContentChange(newContent);
+        this.intelliSenseManager.processContentChange(newContent, this.activeFilePath);
       }
     }
   }
@@ -699,18 +1065,24 @@ export function createUser(firstName: string, lastName: string): IUser {
     this.isTerminalCollapsed = !this.isTerminalCollapsed;
   }
 
+  // ========== Save Operations ==========
+
   public async saveActiveFile(): Promise<void> {
     const file = this.openFiles.find(f => f.path === this.activeFilePath);
     if (!file || !this.executionEnvironment) return;
 
     try {
       await this.executionEnvironment.writeFile(file.path, file.content);
-      const fileIndex = this.openFiles.findIndex(f => f.path === this.activeFilePath);
+
-      this.openFiles = [
+      // Update file state to mark as saved
-        ...this.openFiles.slice(0, fileIndex),
+      this.openFiles = this.openFiles.map(f =>
-        { ...file, modified: false },
+        f.path === file.path ? { ...f, modified: false } : f
-        ...this.openFiles.slice(fileIndex + 1),
+      );
-      ];
+
+      // Update IntelliSense manager with latest content
+      if (this.intelliSenseManager) {
+        this.intelliSenseManager.addFileModel(file.path, file.content);
+      }
     } catch (error) {
       console.error('Failed to save file:', error);
     }
@@ -722,11 +1094,160 @@ export function createUser(firstName: string, lastName: string): IUser {
     for (const file of this.openFiles.filter(f => f.modified)) {
       try {
         await this.executionEnvironment.writeFile(file.path, file.content);
+
+        // Update IntelliSense manager
+        if (this.intelliSenseManager) {
+          this.intelliSenseManager.addFileModel(file.path, file.content);
+        }
       } catch (error) {
         console.error(`Failed to save ${file.path}:`, error);
       }
     }
 
+    // Mark all files as saved
     this.openFiles = this.openFiles.map(f => ({ ...f, modified: false }));
   }
+
+  // ========== Editor Menu ==========
+
+  private async showEditorMenu(e: MouseEvent) {
+    e.stopPropagation();
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [
+      {
+        name: this.autoSave ? '✓ Auto Save' : 'Auto Save',
+        iconName: 'lucide:save',
+        action: async () => this.toggleAutoSave(),
+      },
+      { divider: true },
+      {
+        name: 'Save',
+        iconName: 'lucide:save',
+        action: async () => this.saveActiveFile(),
+      },
+      {
+        name: 'Save All',
+        iconName: 'lucide:save',
+        action: async () => this.saveAllFiles(),
+      },
+    ];
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private toggleAutoSave() {
+    this.autoSave = !this.autoSave;
+
+    if (this.autoSave) {
+      // Save every 2 seconds if there are changes
+      this.autoSaveInterval = setInterval(() => {
+        const hasUnsaved = this.openFiles.some(f => f.modified);
+        if (hasUnsaved) {
+          this.saveAllFiles();
+        }
+      }, 2000);
+    } else {
+      if (this.autoSaveInterval) {
+        clearInterval(this.autoSaveInterval);
+        this.autoSaveInterval = null;
+      }
+    }
+  }
+
+  private getErrorCount(): number {
+    // Monaco MarkerSeverity: Error = 8, Warning = 4, Info = 2, Hint = 1
+    return this.diagnosticMarkers.filter(m => m.severity === 8).length;
+  }
+
+  private renderProblemsPanel(): TemplateResult {
+    if (this.diagnosticMarkers.length === 0) {
+      return html`
+        <div class="problems-empty">
+          <dees-icon .icon=${'lucide:checkCircle'} iconSize="24"></dees-icon>
+          <span>No problems detected</span>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="problems-list">
+        ${this.diagnosticMarkers.map(marker => html`
+          <div class="problem-item" @click=${() => this.navigateToProblem(marker)}>
+            <dees-icon
+              class="problem-icon ${marker.severity === 8 ? 'error' : 'warning'}"
+              .icon=${marker.severity === 8 ? 'lucide:circleX' : 'lucide:triangleAlert'}
+              iconSize="14"
+            ></dees-icon>
+            <div class="problem-details">
+              <div class="problem-message">${marker.message}</div>
+              <div class="problem-location">
+                ${marker.resource.path.split('/').pop()} (${marker.startLineNumber}, ${marker.startColumn})
+                ${marker.source ? `[${marker.source}]` : ''}
+              </div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private async navigateToProblem(marker: typeof this.diagnosticMarkers[0]) {
+    // Extract file path from resource
+    const filePath = marker.resource.path;
+    const fileName = filePath.split('/').pop() || '';
+
+    // Open the file if not already open
+    const existingFile = this.openFiles.find(f => f.path === filePath);
+    if (!existingFile) {
+      await this.openFile(filePath, fileName);
+    } else {
+      this.activeFilePath = filePath;
+    }
+
+    // Wait for editor to be ready, then navigate to the line
+    await this.updateComplete;
+    const editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
+    if (editorElement) {
+      const editor = await editorElement.editorDeferred.promise;
+      editor.revealLineInCenter(marker.startLineNumber);
+      editor.setPosition({
+        lineNumber: marker.startLineNumber,
+        column: marker.startColumn,
+      });
+      editor.focus();
+    }
+  }
+
+  private setupMarkerListener() {
+    const monacoInstance = (window as any).monaco;
+    if (!monacoInstance) return;
+
+    // Listen for marker changes
+    monacoInstance.editor.onDidChangeMarkers((uris: any[]) => {
+      this.updateDiagnosticMarkers();
+    });
+
+    // Initial load
+    this.updateDiagnosticMarkers();
+  }
+
+  private updateDiagnosticMarkers() {
+    const monacoInstance = (window as any).monaco;
+    if (!monacoInstance) return;
+
+    // Get all markers from Monaco
+    const allMarkers = monacoInstance.editor.getModelMarkers({});
+
+    // Transform to our format
+    this.diagnosticMarkers = allMarkers.map((m: any) => ({
+      message: m.message,
+      severity: m.severity,
+      startLineNumber: m.startLineNumber,
+      startColumn: m.startColumn,
+      endLineNumber: m.endLineNumber,
+      endColumn: m.endColumn,
+      source: m.source,
+      resource: { path: m.resource.path },
+    }));
+  }
 }

ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts

@@ -1,6 +1,23 @@
 import type * as monaco from 'monaco-editor';
 import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 
+// Monaco TypeScript API types (runtime API still exists, types deprecated in 0.55+)
+interface IExtraLibDisposable {
+  dispose(): void;
+}
+
+interface IMonacoTypeScriptAPI {
+  typescriptDefaults: {
+    setCompilerOptions(options: Record<string, unknown>): void;
+    setDiagnosticsOptions(options: Record<string, unknown>): void;
+    addExtraLib(content: string, filePath?: string): IExtraLibDisposable;
+    setEagerModelSync(value: boolean): void;
+  };
+  ScriptTarget: { ES2020: number };
+  ModuleKind: { ESNext: number };
+  ModuleResolutionKind: { NodeJs: number; Bundler?: number };
+}
+
 /**
  * Manages TypeScript IntelliSense by loading type definitions
  * from the virtual filesystem into Monaco.
@@ -10,6 +27,20 @@ export class TypeScriptIntelliSenseManager {
   private monacoInstance: typeof monaco | null = null;
   private executionEnvironment: IExecutionEnvironment | null = null;
 
+  // Cache of file contents for synchronous access and module resolution
+  private fileCache: Map<string, string> = new Map();
+
+  // Track extra libs added for cleanup
+  private addedExtraLibs: Map<string, IExtraLibDisposable> = new Map();
+
+  /**
+   * Get TypeScript API with proper typing for Monaco 0.55+
+   */
+  private get tsApi(): IMonacoTypeScriptAPI | null {
+    if (!this.monacoInstance) return null;
+    return (this.monacoInstance.languages as any).typescript as IMonacoTypeScriptAPI;
+  }
+
   /**
    * Initialize with Monaco and execution environment
    */
@@ -20,28 +51,85 @@ export class TypeScriptIntelliSenseManager {
     this.monacoInstance = monacoInst;
     this.executionEnvironment = env;
     this.configureCompilerOptions();
+    // Load all project TypeScript/JavaScript files into Monaco for cross-file resolution
+    await this.loadAllProjectFiles();
+  }
+
+  /**
+   * Recursively load all .ts/.js files from the virtual filesystem into Monaco
+   */
+  private async loadAllProjectFiles(): Promise<void> {
+    if (!this.executionEnvironment) return;
+    await this.loadFilesFromDirectory('/');
+  }
+
+  /**
+   * Recursively load files from a directory
+   */
+  private async loadFilesFromDirectory(dirPath: string): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(dirPath);
+
+      for (const entry of entries) {
+        const fullPath = dirPath === '/' ? `/${entry.name}` : `${dirPath}/${entry.name}`;
+
+        // Skip node_modules - too large and handled separately via addExtraLib
+        if (entry.name === 'node_modules') continue;
+
+        if (entry.type === 'directory') {
+          await this.loadFilesFromDirectory(fullPath);
+        } else if (entry.type === 'file') {
+          const ext = entry.name.split('.').pop()?.toLowerCase();
+          if (ext === 'ts' || ext === 'tsx' || ext === 'js' || ext === 'jsx') {
+            try {
+              const content = await this.executionEnvironment.readFile(fullPath);
+              this.addFileModel(fullPath, content);
+            } catch {
+              // Ignore files that can't be read
+            }
+          }
+        }
+      }
+    } catch {
+      // Directory might not exist or not be readable
+    }
   }
 
   private configureCompilerOptions(): void {
-    if (!this.monacoInstance) return;
+    const ts = this.tsApi;
+    if (!ts) return;
 
-    this.monacoInstance.languages.typescript.typescriptDefaults.setCompilerOptions({
+    ts.typescriptDefaults.setCompilerOptions({
-      target: this.monacoInstance.languages.typescript.ScriptTarget.ES2020,
+      target: ts.ScriptTarget.ES2020,
-      module: this.monacoInstance.languages.typescript.ModuleKind.ESNext,
+      module: ts.ModuleKind.ESNext,
-      moduleResolution: this.monacoInstance.languages.typescript.ModuleResolutionKind.NodeJs,
+      // Use Bundler resolution if available (Monaco 0.45+), fallback to NodeJs
+      moduleResolution: ts.ModuleResolutionKind.Bundler ?? ts.ModuleResolutionKind.NodeJs,
       allowSyntheticDefaultImports: true,
       esModuleInterop: true,
       strict: true,
       noEmit: true,
       allowJs: true,
       checkJs: false,
+      allowNonTsExtensions: true,
       lib: ['es2020', 'dom', 'dom.iterable'],
+      // Set baseUrl to root for resolving absolute imports
+      baseUrl: '/',
+      // Allow importing .ts extensions directly (useful for some setups)
+      allowImportingTsExtensions: true,
+      // Resolve JSON modules
+      resolveJsonModule: true,
     });
 
-    this.monacoInstance.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    ts.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: false,
       noSyntaxValidation: false,
     });
+
+    // Enable eager model sync so TypeScript immediately processes all models
+    // This is critical for cross-file IntelliSense to work without requiring edits
+    ts.typescriptDefaults.setEagerModelSync(true);
   }
 
   /**
@@ -87,10 +175,14 @@ export class TypeScriptIntelliSenseManager {
     if (!this.monacoInstance || !this.executionEnvironment) return;
     if (this.loadedLibs.has(packageName)) return;
 
+    console.log(`[IntelliSense] Loading types for package: ${packageName}`);
+
     try {
       const typesLoaded = await this.tryLoadPackageTypes(packageName);
+      console.log(`[IntelliSense] tryLoadPackageTypes result for ${packageName}: ${typesLoaded}`);
       if (!typesLoaded) {
-        await this.tryLoadAtTypesPackage(packageName);
+        const atTypesLoaded = await this.tryLoadAtTypesPackage(packageName);
+        console.log(`[IntelliSense] tryLoadAtTypesPackage result for ${packageName}: ${atTypesLoaded}`);
       }
       this.loadedLibs.add(packageName);
     } catch (error) {
@@ -99,33 +191,37 @@ export class TypeScriptIntelliSenseManager {
   }
 
   private async tryLoadPackageTypes(packageName: string): Promise<boolean> {
-    if (!this.executionEnvironment || !this.monacoInstance) return false;
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return false;
 
     const basePath = `/node_modules/${packageName}`;
+    console.log(`[IntelliSense] Checking package at: ${basePath}`);
 
     try {
       // Check package.json for types field
       const packageJsonPath = `${basePath}/package.json`;
-      if (await this.executionEnvironment.exists(packageJsonPath)) {
+      const packageJsonExists = await this.executionEnvironment.exists(packageJsonPath);
-        const packageJson = JSON.parse(
+      console.log(`[IntelliSense] package.json exists: ${packageJsonExists}`);
-          await this.executionEnvironment.readFile(packageJsonPath)
+
-        );
+      if (packageJsonExists) {
+        const packageJsonContent = await this.executionEnvironment.readFile(packageJsonPath);
+        const packageJson = JSON.parse(packageJsonContent);
+
+        // Add package.json to Monaco so TypeScript can resolve the types field
+        ts.typescriptDefaults.addExtraLib(packageJsonContent, `file://${packageJsonPath}`);
+        console.log(`[IntelliSense] Added package.json: ${packageJsonPath}`);
 
         const typesPath = packageJson.types || packageJson.typings;
+        console.log(`[IntelliSense] types field: ${typesPath}`);
         if (typesPath) {
-          const fullTypesPath = `${basePath}/${typesPath}`;
+          // Load all .d.ts files from the package, not just the entry point
-          if (await this.executionEnvironment.exists(fullTypesPath)) {
+          // Modern packages often have multiple declaration files with imports
-            const content = await this.executionEnvironment.readFile(fullTypesPath);
+          await this.loadAllDtsFilesFromPackage(basePath);
-            this.monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
+          return true;
-              content,
-              `file://${fullTypesPath}`
-            );
-            return true;
-          }
         }
       }
 
-      // Try common locations
+      // Try common locations - if any exist, load all .d.ts files
       const commonPaths = [
         `${basePath}/index.d.ts`,
         `${basePath}/dist/index.d.ts`,
@@ -134,23 +230,65 @@ export class TypeScriptIntelliSenseManager {
 
       for (const dtsPath of commonPaths) {
         if (await this.executionEnvironment.exists(dtsPath)) {
-          const content = await this.executionEnvironment.readFile(dtsPath);
+          console.log(`[IntelliSense] Found types at: ${dtsPath}`);
-          this.monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
+          await this.loadAllDtsFilesFromPackage(basePath);
-            content,
-            `file://${dtsPath}`
-          );
           return true;
         }
       }
 
+      console.log(`[IntelliSense] No types found for ${packageName}`);
       return false;
-    } catch {
+    } catch (error) {
+      console.error(`[IntelliSense] Error loading package types:`, error);
       return false;
     }
   }
 
+  /**
+   * Recursively load all .d.ts files from a package directory
+   */
+  private async loadAllDtsFilesFromPackage(basePath: string): Promise<void> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return;
+
+    await this.loadDtsFilesFromDirectory(basePath);
+  }
+
+  /**
+   * Recursively load .d.ts files from a directory
+   */
+  private async loadDtsFilesFromDirectory(dirPath: string): Promise<void> {
+    const ts = this.tsApi;
+    if (!this.executionEnvironment || !ts) return;
+
+    try {
+      const entries = await this.executionEnvironment.readDir(dirPath);
+
+      for (const entry of entries) {
+        const fullPath = dirPath === '/' ? `/${entry.name}` : `${dirPath}/${entry.name}`;
+
+        // Skip nested node_modules (shouldn't happen in a package but be safe)
+        if (entry.name === 'node_modules') continue;
+
+        if (entry.type === 'directory') {
+          await this.loadDtsFilesFromDirectory(fullPath);
+        } else if (entry.type === 'file' && entry.name.endsWith('.d.ts')) {
+          try {
+            const content = await this.executionEnvironment.readFile(fullPath);
+            console.log(`[IntelliSense] Adding extra lib: ${fullPath} (${content.length} chars)`);
+            ts.typescriptDefaults.addExtraLib(content, `file://${fullPath}`);
+          } catch (error) {
+            console.warn(`[IntelliSense] Failed to read .d.ts file: ${fullPath}`, error);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`[IntelliSense] Failed to read directory: ${dirPath}`, error);
+    }
+  }
+
   private async tryLoadAtTypesPackage(packageName: string): Promise<boolean> {
-    if (!this.executionEnvironment || !this.monacoInstance) return false;
+    if (!this.executionEnvironment) return false;
 
     // Handle scoped packages: @scope/package -> @types/scope__package
     const typesPackageName = packageName.startsWith('@')
@@ -162,11 +300,8 @@ export class TypeScriptIntelliSenseManager {
     try {
       const indexPath = `${basePath}/index.d.ts`;
       if (await this.executionEnvironment.exists(indexPath)) {
-        const content = await this.executionEnvironment.readFile(indexPath);
+        // Load all .d.ts files from the @types package
-        this.monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
+        await this.loadAllDtsFilesFromPackage(basePath);
-          content,
-          `file://${indexPath}`
-        );
         return true;
       }
       return false;
@@ -177,20 +312,97 @@ export class TypeScriptIntelliSenseManager {
 
   /**
    * Process content change and load types for any new imports
+   * @param content The file content to parse for imports
+   * @param filePath Optional file path to trigger diagnostic refresh
    */
-  public async processContentChange(content: string): Promise<void> {
+  public async processContentChange(content: string, filePath?: string): Promise<void> {
     const imports = this.parseImports(content);
+    let typesLoaded = false;
+
     for (const packageName of imports) {
-      await this.loadTypesForPackage(packageName);
+      if (!this.loadedLibs.has(packageName)) {
+        await this.loadTypesForPackage(packageName);
+        typesLoaded = true;
+      }
+    }
+
+    // If we loaded new types and have a file path, trigger diagnostic refresh
+    if (typesLoaded && filePath && this.monacoInstance) {
+      this.triggerDiagnosticRefresh(filePath);
+    }
+  }
+
+  /**
+   * Force Monaco to re-validate a file by touching its model.
+   * This is needed because addExtraLib doesn't always trigger re-validation.
+   */
+  private triggerDiagnosticRefresh(filePath: string): void {
+    if (!this.monacoInstance) return;
+
+    const uri = this.monacoInstance.Uri.parse(`file://${filePath}`);
+    const model = this.monacoInstance.editor.getModel(uri);
+
+    if (model) {
+      // Touch the model to trigger re-validation
+      // We do this by getting and re-setting the same value
+      const currentValue = model.getValue();
+      model.setValue(currentValue);
+      console.log(`[IntelliSense] Triggered diagnostic refresh for: ${filePath}`);
+    }
+  }
+
+  /**
+   * Scan node_modules for packages and load types for any not yet loaded.
+   * Called when node_modules changes (e.g., after pnpm install).
+   */
+  public async scanAndLoadNewPackageTypes(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      // Check if node_modules exists
+      if (!await this.executionEnvironment.exists('/node_modules')) return;
+
+      // Read top-level node_modules
+      const entries = await this.executionEnvironment.readDir('/node_modules');
+
+      for (const entry of entries) {
+        if (entry.type !== 'directory') continue;
+
+        if (entry.name.startsWith('@')) {
+          // Scoped package - read subdirectories
+          try {
+            const scopedPath = `/node_modules/${entry.name}`;
+            const scopedEntries = await this.executionEnvironment.readDir(scopedPath);
+            for (const scopedEntry of scopedEntries) {
+              if (scopedEntry.type === 'directory') {
+                const packageName = `${entry.name}/${scopedEntry.name}`;
+                await this.loadTypesForPackage(packageName);
+              }
+            }
+          } catch {
+            // Skip if we can't read scoped directory
+          }
+        } else if (!entry.name.startsWith('.')) {
+          // Regular package
+          await this.loadTypesForPackage(entry.name);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to scan node_modules:', error);
     }
   }
 
   /**
    * Add a file model to Monaco for cross-file IntelliSense
+   * Also registers the file with TypeScript via addExtraLib for module resolution
    */
   public addFileModel(path: string, content: string): void {
     if (!this.monacoInstance) return;
 
+    // Cache the content for sync access
+    this.fileCache.set(path, content);
+
+    // Create/update the editor model
     const uri = this.monacoInstance.Uri.parse(`file://${path}`);
     const existingModel = this.monacoInstance.editor.getModel(uri);
 
@@ -200,6 +412,53 @@ export class TypeScriptIntelliSenseManager {
       const language = this.getLanguageFromPath(path);
       this.monacoInstance.editor.createModel(content, language, uri);
     }
+
+    // Also add as extra lib for TypeScript module resolution
+    // This is critical - TypeScript's resolver uses extra libs, not editor models
+    this.addFileAsExtraLib(path, content);
+  }
+
+  /**
+   * Add a file as an extra lib for TypeScript module resolution.
+   * This enables TypeScript to resolve imports to project files.
+   */
+  private addFileAsExtraLib(path: string, content: string): void {
+    const ts = this.tsApi;
+    if (!ts) return;
+
+    // Dispose existing lib if present (for updates)
+    const existing = this.addedExtraLibs.get(path);
+    if (existing) {
+      existing.dispose();
+    }
+
+    // Add the file with its actual path
+    const filePath = `file://${path}`;
+    const disposable = ts.typescriptDefaults.addExtraLib(content, filePath);
+    this.addedExtraLibs.set(path, disposable);
+
+    // For .ts files, also add with .js extension to handle ESM imports
+    // (e.g., import from './utils.js' should resolve to ./utils.ts)
+    if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
+      const jsPath = path.replace(/\.ts$/, '.js');
+      const jsFilePath = `file://${jsPath}`;
+      const jsDisposable = ts.typescriptDefaults.addExtraLib(content, jsFilePath);
+      this.addedExtraLibs.set(jsPath, jsDisposable);
+      this.fileCache.set(jsPath, content);
+    } else if (path.endsWith('.tsx')) {
+      const jsxPath = path.replace(/\.tsx$/, '.jsx');
+      const jsxFilePath = `file://${jsxPath}`;
+      const jsxDisposable = ts.typescriptDefaults.addExtraLib(content, jsxFilePath);
+      this.addedExtraLibs.set(jsxPath, jsxDisposable);
+      this.fileCache.set(jsxPath, content);
+    }
+  }
+
+  /**
+   * Get cached file content for synchronous access
+   */
+  public getFileContent(path: string): string | undefined {
+    return this.fileCache.get(path);
   }
 
   private getLanguageFromPath(path: string): string {

ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts

@@ -1,5 +1,5 @@
 import * as webcontainer from '@webcontainer/api';
-import type { IExecutionEnvironment, IFileEntry, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';
+import type { IExecutionEnvironment, IFileEntry, IFileWatcher, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';
 
 /**
  * WebContainer-based execution environment.
@@ -123,6 +123,22 @@ export class WebContainerEnvironment implements IExecutionEnvironment {
     }
   }
 
+  public watch(
+    path: string,
+    callback: (event: 'rename' | 'change', filename: string | null) => void,
+    options?: { recursive?: boolean }
+  ): IFileWatcher {
+    this.ensureReady();
+    const watcher = this.container!.fs.watch(
+      path,
+      { recursive: options?.recursive ?? false },
+      callback
+    );
+    return {
+      stop: () => watcher.close(),
+    };
+  }
+
   // ============ Process Execution ============
 
   public async spawn(command: string, args: string[] = []): Promise<IProcessHandle> {

ts_web/elements/00group-runtime/interfaces/IExecutionEnvironment.ts

@@ -7,6 +7,14 @@ export interface IFileEntry {
   path: string;
 }
 
+/**
+ * Handle to a file system watcher
+ */
+export interface IFileWatcher {
+  /** Stop watching for changes */
+  stop(): void;
+}
+
 /**
  * Handle to a spawned process with I/O streams
  */
@@ -68,6 +76,19 @@ export interface IExecutionEnvironment {
    */
   exists(path: string): Promise<boolean>;
 
+  /**
+   * Watch a file or directory for changes
+   * @param path - Absolute path to watch
+   * @param callback - Called when changes occur
+   * @param options - Optional: { recursive: true } to watch subdirectories
+   * @returns Watcher handle with stop() method
+   */
+  watch(
+    path: string,
+    callback: (event: 'rename' | 'change', filename: string | null) => void,
+    options?: { recursive?: boolean }
+  ): IFileWatcher;
+
   // ============ Process Execution ============
 
   /**

ts_web/elements/dees-contextmenu/dees-contextmenu.ts

@@ -246,7 +246,7 @@ export class DeesContextmenu extends DeesElement {
               @mouseleave=${() => this.handleMenuItemLeave()}
             >
               ${menuItem.iconName ? html`
-                <dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>
+                <dees-icon .icon="${menuItem.iconName}"></dees-icon>
               ` : ''}
               <span class="menuitem-text">${menuItem.name}</span>
               ${menuItem.shortcut && !hasSubmenu ? html`
@@ -436,8 +436,9 @@ export class DeesContextmenu extends DeesElement {
     }
 
     // Only destroy window layer if this is not a submenu
+    // Don't await - let cleanup happen in background for instant visual feedback
     if (this.windowLayer && !this.parentMenu) {
-      await this.windowLayer.destroy();
+      this.windowLayer.destroy();
     }
 
     this.style.opacity = '0';

ts_web/elements/dees-icon/dees-icon.ts

@@ -268,9 +268,9 @@ export class DeesIcon extends DeesElement {
         name: iconStr.substring(7) // Remove 'lucide:' prefix
       };
     } else {
-      // For backward compatibility, assume FontAwesome if no prefix
+      // Default to Lucide when no prefix is provided
       return {
-        type: 'fa',
+        type: 'lucide',
         name: iconStr
       };
     }

tsconfig.json

@@ -4,7 +4,8 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
   },
   "exclude": [
     "dist_*/**/*.d.ts"