v3.18.0

changelog.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.16.0",
+  "version": "3.18.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",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.16.0',
+  version: '3.18.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">
-        ${this.renderTree(this.treeData)}
+      <div class="filetree-toolbar">
+        <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({
-      name: 'Delete',
-      iconName: 'lucide:trash2',
-      action: async () => this.deleteItem(node),
-    });
+    // Common options for both files and directories
+    menuItems.push(
+      {
+        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) => {
-              inputValue = (e.target as DeesInputText).value;
-            }}
+            .value=${options.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) {
-      await this.loadTree();
+    if (changedProperties.has('executionEnvironment')) {
+      // 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-workspace/dees-editor-workspace.ts

@@ -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 {
@@ -198,6 +199,26 @@ export function createUser(firstName: string, lastName: string): IUser {
   private intelliSenseManager: TypeScriptIntelliSenseManager | null = null;
   private intelliSenseInitialized: boolean = false;
 
+  // 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,
     cssManager.defaultStyles,
@@ -390,6 +411,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;
@@ -611,18 +657,23 @@ export function createUser(firstName: string, lastName: string): IUser {
 
         <div class="editor-panel">
           <div class="tabs-bar">
-            ${this.openFiles.map(file => html`
-              <div
-                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>
-                <span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
-                  <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
-                </span>
-              </div>
-            `)}
+            <div class="tabs-container">
+              ${this.openFiles.map(file => html`
+                <div
+                  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>
+                  <span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
+                    <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
+                  </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`
@@ -690,6 +741,20 @@ export function createUser(firstName: string, lastName: string): IUser {
     `;
   }
 
+  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;
+    }
+  }
+
   public async firstUpdated() {
     if (this.executionEnvironment) {
       await this.initializeWorkspace();
@@ -880,6 +945,95 @@ 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);
+
+      // Update file state to mark as saved
+      this.openFiles = this.openFiles.map(f =>
+        f.path === file.path ? { ...f, modified: false } : f
+      );
+
+      // 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);
+    }
+  }
+
+  public async saveAllFiles(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    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;
@@ -976,35 +1130,4 @@ export function createUser(firstName: string, lastName: string): IUser {
       resource: { path: m.resource.path },
     }));
   }
-
-  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 = [
-        ...this.openFiles.slice(0, fileIndex),
-        { ...file, modified: false },
-        ...this.openFiles.slice(fileIndex + 1),
-      ];
-    } catch (error) {
-      console.error('Failed to save file:', error);
-    }
-  }
-
-  public async saveAllFiles(): Promise<void> {
-    if (!this.executionEnvironment) return;
-
-    for (const file of this.openFiles.filter(f => f.modified)) {
-      try {
-        await this.executionEnvironment.writeFile(file.path, file.content);
-      } catch (error) {
-        console.error(`Failed to save ${file.path}:`, error);
-      }
-    }
-
-    this.openFiles = this.openFiles.map(f => ({ ...f, modified: false }));
-  }
 }

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
       };
     }