v3.26.1

changelog.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 2026-01-01 - 3.26.1 - fix(dees-actionbar)
+animate actionbar hide using grid-template-rows and wait for animation before clearing state
+
+- Switch host layout from block/max-height to grid using grid-template-rows for open/close transitions
+- Add min-height: 0 to .actionbar-item to prevent flex children overflow and collapsing
+- Introduce async hideCurrentBar() that removes 'visible', sets isVisible=false, waits 220ms then clears currentBar and currentResolve
+- processQueue() now calls hideCurrentBar() asynchronously instead of clearing state immediately
+
+## 2026-01-01 - 3.26.0 - feat(workspace)
+add external file change detection, conflict resolution UI, and diff editor
+
+- Watch open files for external changes with debounced file watchers (startWatchingFile/stopWatchingFile/stopAllFileWatchers).
+- Prompt the user when disk changes conflict with unsaved local edits via dees-actionbar (actions: Load from Disk, Save Local, Compare).
+- Introduce dees-workspace-diff-editor component and export it; support comparing and resolving diffs (diff-resolved / diff-closed events).
+- Add setContentExternal in dees-workspace-monaco to update editor content from external sources while optionally preserving cursor, selections and scroll position.
+- Start/stop file watchers when files are opened/closed and integrate diff view and actionbar into the workspace UI for seamless conflict handling.
+
+## 2026-01-01 - 3.25.0 - feat(dees-actionbar)
+add action bar component and improve workspace package update handling
+
+- Introduce dees-actionbar component (dees-actionbar.ts) with interfaces, queueing, timed auto-trigger and demo usage
+- Add actionbar.interfaces.ts and index export; export dees-actionbar from elements index
+- Enhance workspace bottombar: add pendingPackageUpdate flag, process-complete handler, and connected/disconnected listeners to auto-refresh package status after updates
+- Make pnpm outdated checking robust by streaming output via a reader and adding a 10s timeout to avoid hanging; handle timeout and stream cancellation
+- Update package update commands to include '--latest' for updatePackage and updateAllPackages, and show 'Checking...' label during checks
+- Add '@types/node' (^22.0.0) to devDependencies in the workspace package config
+
 ## 2026-01-01 - 3.24.0 - feat(workspace)
 add workspace bottom bar, terminal tab manager, and run-process integration
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.24.0",
+  "version": "3.26.1",
   "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.24.0',
+  version: '3.26.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -12,7 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 import '../../dees-icon/dees-icon.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
-import type { IRunProcessEventDetail } from '../dees-workspace-terminal/interfaces.js';
+import type { IRunProcessEventDetail, ITerminalProcessCompleteEventDetail } from '../dees-workspace-terminal/interfaces.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -48,6 +48,19 @@ export class DeesWorkspaceBottombar extends DeesElement {
   @state()
   accessor isCheckingPackages: boolean = false;
 
+  // Track if we have a pending package update that should trigger refresh
+  private pendingPackageUpdate: boolean = false;
+
+  // Bound handler for process-complete events
+  private handleProcessComplete = (e: CustomEvent<ITerminalProcessCompleteEventDetail>) => {
+    // If we have a pending package update and a process completed, refresh
+    if (this.pendingPackageUpdate) {
+      this.pendingPackageUpdate = false;
+      // Small delay to let pnpm-lock.yaml update
+      setTimeout(() => this.checkPackages(), 500);
+    }
+  };
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -167,6 +180,17 @@ export class DeesWorkspaceBottombar extends DeesElement {
     `;
   }
 
+  public async connectedCallback() {
+    await super.connectedCallback();
+    // Listen for process-complete events to refresh after package updates
+    window.addEventListener('process-complete', this.handleProcessComplete as EventListener);
+  }
+
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    window.removeEventListener('process-complete', this.handleProcessComplete as EventListener);
+  }
+
   async firstUpdated() {
     await this.loadScripts();
     await this.checkPackages();
@@ -256,19 +280,46 @@ export class DeesWorkspaceBottombar extends DeesElement {
       this.packageStatus = 'checking';
       this.isCheckingPackages = true;
 
-      // Run pnpm outdated --json
+      // Run pnpm outdated --json with timeout
       const process = await this.executionEnvironment.spawn('pnpm', ['outdated', '--json']);
 
       let output = '';
-      await process.output.pipeTo(
-        new WritableStream({
-          write: (chunk) => {
-            output += chunk;
-          },
-        })
-      );
 
-      const exitCode = await process.exit;
+      // Collect output asynchronously - don't await, stream may not close if no output
+      const outputReader = process.output.getReader();
+      const readOutput = async () => {
+        try {
+          while (true) {
+            const { done, value } = await outputReader.read();
+            if (done) break;
+            output += value;
+          }
+        } catch {
+          // Ignore stream errors
+        }
+      };
+      // Start reading but don't await - we'll use whatever we have when process exits
+      readOutput();
+
+      // Wait for process exit with timeout (10 seconds)
+      const exitCode = await Promise.race([
+        process.exit,
+        new Promise<number>((resolve) => setTimeout(() => resolve(-1), 10000)),
+      ]);
+
+      // Cancel reader when done
+      try {
+        await outputReader.cancel();
+      } catch {
+        // Ignore cancel errors
+      }
+
+      // Handle timeout
+      if (exitCode === -1) {
+        console.warn('Package check timed out');
+        this.packageStatus = 'error';
+        return;
+      }
 
       // pnpm outdated returns exit code 1 if there are outdated packages
       if (exitCode === 0) {
@@ -318,15 +369,15 @@ export class DeesWorkspaceBottombar extends DeesElement {
   private async handlePackageClick(e: MouseEvent): Promise<void> {
     e.stopPropagation();
 
-    if (this.isCheckingPackages) return;
-
     const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
 
     // Refresh option - show output in terminal
     menuItems.push({
-      name: 'Check for updates',
+      name: this.isCheckingPackages ? 'Checking...' : 'Check for updates',
       iconName: 'lucide:refreshCw',
       action: async () => {
+        if (this.isCheckingPackages) return;
+
         // Create terminal tab to show pnpm outdated output
         const detail: IRunProcessEventDetail = {
           type: 'package-update',
@@ -387,12 +438,15 @@ export class DeesWorkspaceBottombar extends DeesElement {
   private async updatePackage(packageName: string): Promise<void> {
     if (!this.executionEnvironment) return;
 
+    // Mark that we have a pending update - will trigger refresh when complete
+    this.pendingPackageUpdate = true;
+
     // Emit run-process event for the workspace to create a terminal tab
     const detail: IRunProcessEventDetail = {
       type: 'package-update',
       label: `update ${packageName}`,
       command: 'pnpm',
-      args: ['update', packageName],
+      args: ['update', '--latest', packageName],
       metadata: { packageName },
     };
 
@@ -406,12 +460,15 @@ export class DeesWorkspaceBottombar extends DeesElement {
   private async updateAllPackages(): Promise<void> {
     if (!this.executionEnvironment) return;
 
+    // Mark that we have a pending update - will trigger refresh when complete
+    this.pendingPackageUpdate = true;
+
     // Emit run-process event for the workspace to create a terminal tab
     const detail: IRunProcessEventDetail = {
       type: 'package-update',
       label: 'update all',
       command: 'pnpm',
-      args: ['update'],
+      args: ['update', '--latest'],
     };
 
     this.dispatchEvent(new CustomEvent('run-process', {

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

@@ -0,0 +1,359 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { MONACO_VERSION } from '../dees-workspace-monaco/version.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-button/dees-button/dees-button.js';
+
+import type * as monaco from 'monaco-editor';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-diff-editor': DeesWorkspaceDiffEditor;
+  }
+}
+
+@customElement('dees-workspace-diff-editor')
+export class DeesWorkspaceDiffEditor extends DeesElement {
+  // DEMO
+  public static demo = () => html`
+    <dees-workspace-diff-editor
+      .originalContent=${'function hello() {\n  console.log("Hello");\n}'}
+      .modifiedContent=${'function hello() {\n  console.log("Hello World!");\n  return true;\n}'}
+      .language=${'typescript'}
+      .filePath=${'/demo/example.ts'}
+    ></dees-workspace-diff-editor>
+  `;
+
+  // INSTANCE
+  public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();
+
+  @property({ type: String })
+  accessor originalContent: string = '';
+
+  @property({ type: String })
+  accessor modifiedContent: string = '';
+
+  @property({ type: String })
+  accessor originalLabel: string = 'Disk Version';
+
+  @property({ type: String })
+  accessor modifiedLabel: string = 'Local Version';
+
+  @property({ type: String })
+  accessor language: string = 'typescript';
+
+  @property({ type: String })
+  accessor filePath: string = '';
+
+  private diffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+  private originalModel: monaco.editor.ITextModel | null = null;
+  private modifiedModel: monaco.editor.ITextModel | null = null;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .diff-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
+
+      .diff-toolbar {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 12%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        flex-shrink: 0;
+      }
+
+      .diff-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+      }
+
+      .diff-filename {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
+
+      .diff-labels {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .diff-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .diff-container {
+        flex: 1;
+        min-height: 0;
+        width: 100%;
+      }
+
+      .nav-buttons {
+        display: flex;
+        gap: 4px;
+      }
+
+      .action-buttons {
+        display: flex;
+        gap: 8px;
+        margin-left: 16px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const fileName = this.filePath.split('/').pop() || 'file';
+
+    return html`
+      <div class="diff-wrapper">
+        <div class="diff-toolbar">
+          <div class="diff-info">
+            <span class="diff-filename">${fileName}</span>
+            <span class="diff-labels">${this.originalLabel} ↔ ${this.modifiedLabel}</span>
+          </div>
+          <div class="diff-actions">
+            <div class="nav-buttons">
+              <dees-button
+                type="outline"
+                @click=${this.goToPreviousDiff}
+              >Previous</dees-button>
+              <dees-button
+                type="outline"
+                @click=${this.goToNextDiff}
+              >Next</dees-button>
+            </div>
+            <div class="action-buttons">
+              <dees-button
+                type="highlighted"
+                @click=${this.acceptLocal}
+              >Use Local</dees-button>
+              <dees-button
+                type="outline"
+                @click=${this.acceptDisk}
+              >Use Disk</dees-button>
+              <dees-button
+                type="outline"
+                @click=${this.close}
+              >Close</dees-button>
+            </div>
+          </div>
+        </div>
+        <div class="diff-container"></div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(): Promise<void> {
+    await super.firstUpdated(new Map());
+    await this.initDiffEditor();
+  }
+
+  private async initDiffEditor(): Promise<void> {
+    const container = this.shadowRoot?.querySelector('.diff-container') as HTMLElement;
+    if (!container) return;
+
+    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
+
+    // Wait for Monaco to be loaded (should already be loaded by dees-workspace-monaco)
+    let monacoInstance = (window as any).monaco as typeof monaco;
+
+    if (!monacoInstance) {
+      // Monaco not loaded yet, wait for it
+      await new Promise<void>((resolve) => {
+        const checkMonaco = setInterval(() => {
+          if ((window as any).monaco) {
+            clearInterval(checkMonaco);
+            resolve();
+          }
+        }, 100);
+      });
+      monacoInstance = (window as any).monaco as typeof monaco;
+    }
+
+    // Get current theme from domtools
+    const domtoolsInstance = await this.domtoolsPromise;
+    const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+    const initialTheme = isBright ? 'vs' : 'vs-dark';
+
+    // Create unique URIs for models
+    const timestamp = Date.now();
+    const originalUri = monacoInstance.Uri.parse(`diff://original/${timestamp}${this.filePath}`);
+    const modifiedUri = monacoInstance.Uri.parse(`diff://modified/${timestamp}${this.filePath}`);
+
+    // Create models
+    this.originalModel = monacoInstance.editor.createModel(
+      this.originalContent,
+      this.language,
+      originalUri
+    );
+    this.modifiedModel = monacoInstance.editor.createModel(
+      this.modifiedContent,
+      this.language,
+      modifiedUri
+    );
+
+    // Create diff editor
+    this.diffEditor = monacoInstance.editor.createDiffEditor(container, {
+      automaticLayout: true,
+      readOnly: false, // Allow editing the modified (local) side
+      originalEditable: false, // Disk version is read-only
+      renderSideBySide: true,
+      ignoreTrimWhitespace: false,
+      fontSize: 14,
+      minimap: {
+        enabled: false,
+      },
+    });
+
+    // Set the theme
+    monacoInstance.editor.setTheme(initialTheme);
+
+    this.diffEditor.setModel({
+      original: this.originalModel,
+      modified: this.modifiedModel,
+    });
+
+    // Subscribe to theme changes
+    this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
+      (goBright: boolean) => {
+        const newTheme = goBright ? 'vs' : 'vs-dark';
+        monacoInstance.editor.setTheme(newTheme);
+      }
+    );
+
+    // Inject Monaco CSS if not already present
+    const cssId = 'monaco-diff-editor-css';
+    if (!this.shadowRoot?.getElementById(cssId)) {
+      const cssResponse = await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`);
+      const cssText = await cssResponse.text();
+      const styleElement = document.createElement('style');
+      styleElement.id = cssId;
+      styleElement.textContent = cssText;
+      this.shadowRoot?.append(styleElement);
+    }
+
+    // Navigate to first diff after a short delay
+    setTimeout(() => {
+      try {
+        this.diffEditor?.revealFirstDiff();
+      } catch {
+        // Ignore if no diffs
+      }
+    }, 100);
+
+    this.diffEditorDeferred.resolve(this.diffEditor);
+  }
+
+  public goToNextDiff(): void {
+    try {
+      this.diffEditor?.goToDiff('next');
+    } catch {
+      // Ignore if no more diffs
+    }
+  }
+
+  public goToPreviousDiff(): void {
+    try {
+      this.diffEditor?.goToDiff('previous');
+    } catch {
+      // Ignore if no more diffs
+    }
+  }
+
+  public acceptLocal(): void {
+    // User wants to keep local version (potentially with edits made in diff view)
+    const modifiedContent = this.diffEditor?.getModifiedEditor().getValue() || this.modifiedContent;
+    this.dispatchEvent(
+      new CustomEvent('diff-resolved', {
+        detail: { action: 'use-local', content: modifiedContent },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  public acceptDisk(): void {
+    // User wants disk version
+    this.dispatchEvent(
+      new CustomEvent('diff-resolved', {
+        detail: { action: 'use-disk', content: this.originalContent },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  public close(): void {
+    this.dispatchEvent(
+      new CustomEvent('diff-closed', {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+
+    if (this.monacoThemeSubscription) {
+      this.monacoThemeSubscription.unsubscribe();
+      this.monacoThemeSubscription = null;
+    }
+
+    // Dispose models
+    if (this.originalModel) {
+      this.originalModel.dispose();
+      this.originalModel = null;
+    }
+    if (this.modifiedModel) {
+      this.modifiedModel.dispose();
+      this.modifiedModel = null;
+    }
+
+    // Dispose editor
+    if (this.diffEditor) {
+      this.diffEditor.dispose();
+      this.diffEditor = null;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './dees-workspace-diff-editor.js';

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

@@ -242,4 +242,53 @@ export class DeesWorkspaceMonaco extends DeesElement {
       this.monacoThemeSubscription = null;
     }
   }
+
+  /**
+   * Update content from external source with optional cursor preservation.
+   * Use this when the file content changes externally (e.g., file changed on disk).
+   * @param newContent The new content to set
+   * @param preserveCursor Whether to preserve cursor/scroll position (default: true)
+   */
+  public async setContentExternal(
+    newContent: string,
+    preserveCursor: boolean = true
+  ): Promise<void> {
+    const editor = await this.editorDeferred.promise;
+    const currentValue = editor.getValue();
+
+    if (currentValue === newContent) return;
+
+    // Save cursor state if preserving
+    const position = preserveCursor ? editor.getPosition() : null;
+    const selections = preserveCursor ? editor.getSelections() : null;
+    const scrollTop = preserveCursor ? editor.getScrollTop() : 0;
+    const scrollLeft = preserveCursor ? editor.getScrollLeft() : 0;
+
+    // Update content
+    this.isUpdatingFromExternal = true;
+    editor.setValue(newContent);
+    this.isUpdatingFromExternal = false;
+
+    // Restore cursor state if preserving
+    if (preserveCursor) {
+      if (position) {
+        // Clamp position to valid range
+        const model = editor.getModel();
+        const lineCount = model?.getLineCount() || 1;
+        const clampedLine = Math.min(position.lineNumber, lineCount);
+        const lineLength = model?.getLineMaxColumn(clampedLine) || 1;
+        const clampedColumn = Math.min(position.column, lineLength);
+        editor.setPosition({ lineNumber: clampedLine, column: clampedColumn });
+      }
+      if (selections && selections.length > 0) {
+        // Selections may be invalid after content change, wrap in try-catch
+        try {
+          editor.setSelections(selections);
+        } catch {
+          // Ignore invalid selections
+        }
+      }
+      editor.setScrollPosition({ scrollTop, scrollLeft });
+    }
+  }
 }

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

@@ -16,6 +16,8 @@ import { themeDefaultStyles } from '../../00theme.js';
 import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 import '../../dees-icon/dees-icon.js';
+import '../../dees-actionbar/dees-actionbar.js';
+import type { DeesActionbar } from '../../dees-actionbar/dees-actionbar.js';
 import { TerminalTabManager } from './terminal-tab-manager.js';
 import type {
   ITerminalTab,
@@ -79,6 +81,9 @@ export class DeesWorkspaceTerminal extends DeesElement {
   private terminalThemeSubscription: any = null;
   private isBright: boolean = false;
 
+  // Actionbar reference for terminal-context notifications
+  private terminalActionbar: DeesActionbar | null = null;
+
   /**
    * Promise that resolves when the environment is ready.
    * @deprecated Use executionEnvironment directly
@@ -120,17 +125,21 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
       .terminal-content {
         flex: 1;
-        position: relative;
+        display: flex;
+        flex-direction: column;
         overflow: hidden;
         background: ${cssManager.bdTheme('#ffffff', '#000000')};
       }
 
       #active-terminal-container {
-        position: absolute;
-        top: 20px;
-        left: 20px;
-        right: 20px;
-        bottom: 20px;
+        flex: 1;
+        position: relative;
+        min-height: 0;
+        margin: 20px;
+      }
+
+      .terminal-content dees-actionbar {
+        flex-shrink: 0;
       }
 
       /* Tab bar on the right side */
@@ -426,6 +435,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
               <span>No terminal open</span>
             </div>
           `}
+          <dees-actionbar></dees-actionbar>
         </div>
 
         <!-- Vertical tab bar on the right -->
@@ -491,11 +501,15 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
   async connectedCallback(): Promise<void> {
     await super.connectedCallback();
-    this.resizeObserver.observe(this);
+    // ResizeObserver is set up in attachTerminalToContainer when the container exists
   }
 
   async disconnectedCallback(): Promise<void> {
-    this.resizeObserver.unobserve(this);
+    // Unobserve the terminal container
+    const container = this.shadowRoot?.getElementById('active-terminal-container');
+    if (container) {
+      this.resizeObserver.unobserve(container);
+    }
     if (this.terminalThemeSubscription) {
       this.terminalThemeSubscription.unsubscribe();
       this.terminalThemeSubscription = null;
@@ -558,6 +572,10 @@ export class DeesWorkspaceTerminal extends DeesElement {
     const container = this.shadowRoot?.getElementById('active-terminal-container');
     if (!container) return;
 
+    // Observe container for resize (handles actionbar appearing/disappearing)
+    // ResizeObserver.observe() is idempotent - safe to call multiple times
+    this.resizeObserver.observe(container);
+
     // Clear container
     container.innerHTML = '';
 
@@ -656,6 +674,36 @@ export class DeesWorkspaceTerminal extends DeesElement {
         detail: { tabId, exitCode },
       })
     );
+
+    // Show actionbar to offer closing the tab (only if tab is closeable)
+    if (tab.closeable) {
+      this.showExitedTabActionbar(tabId, tab.label, exitCode);
+    }
+  }
+
+  /**
+   * Show actionbar offering to close an exited tab
+   */
+  private async showExitedTabActionbar(tabId: string, tabLabel: string, exitCode: number): Promise<void> {
+    const isSuccess = exitCode === 0;
+    const result = await this.showActionbar({
+      message: isSuccess
+        ? `"${tabLabel}" completed. Close tab?`
+        : `"${tabLabel}" exited (code ${exitCode}). Close tab?`,
+      type: isSuccess ? 'info' : 'warning',
+      icon: isSuccess ? 'lucide:checkCircle' : 'lucide:alertTriangle',
+      actions: [
+        { id: 'close', label: 'Close Tab', primary: true },
+        { id: 'keep', label: 'Keep Open' },
+      ],
+      timeout: { duration: 10000, defaultActionId: 'close' },
+      dismissible: true,
+    });
+
+    // Close tab if user clicked "Close Tab" or timeout triggered auto-close
+    if (result.actionId === 'close') {
+      this.closeTab(tabId);
+    }
   }
 
   // ========== Public API ==========
@@ -816,6 +864,19 @@ export class DeesWorkspaceTerminal extends DeesElement {
     return true;
   }
 
+  /**
+   * Show an actionbar notification in the terminal panel context.
+   * Use this for terminal-related decisions (e.g., retry failed process, kill process, etc.)
+   */
+  public async showActionbar(
+    options: Parameters<DeesActionbar['show']>[0]
+  ): Promise<ReturnType<DeesActionbar['show']>> {
+    if (!this.terminalActionbar) {
+      this.terminalActionbar = this.shadowRoot?.querySelector('dees-actionbar') as DeesActionbar;
+    }
+    return this.terminalActionbar?.show(options);
+  }
+
   // ========== Utility Methods ==========
 
   public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {

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

@@ -26,6 +26,9 @@ import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-mon
 import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 import '@design.estate/dees-wcctools/demotools';
+import '../../dees-actionbar/dees-actionbar.js';
+import type { DeesActionbar } from '../../dees-actionbar/dees-actionbar.js';
+import '../dees-workspace-diff-editor/dees-workspace-diff-editor.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -65,6 +68,7 @@ export class DeesWorkspace extends DeesElement {
                   '@push.rocks/smartpromise': '^4.2.3',
                 },
                 devDependencies: {
+                  '@types/node': '^22.0.0',
                   typescript: '^5.0.0',
                 },
               },
@@ -253,6 +257,11 @@ testSmartPromise();
   private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
   private intelliSenseDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  // Open file watchers for external change detection
+  private openFileWatchers: Map<string, IFileWatcher> = new Map();
+  private fileChangeDebounce: Map<string, ReturnType<typeof setTimeout>> = new Map();
+  private actionbarElement: DeesActionbar | null = null;
+
   // Auto-save functionality
   @state()
   accessor autoSave: boolean = false;
@@ -278,6 +287,18 @@ testSmartPromise();
   @state()
   accessor isDraggingTerminal: boolean = false;
 
+  // Diff view state
+  @state()
+  accessor showDiffView: boolean = false;
+
+  @state()
+  accessor diffViewConfig: {
+    filePath: string;
+    originalContent: string;
+    modifiedContent: string;
+    language: string;
+  } | null = null;
+
   // Keyboard shortcut handler (bound for proper cleanup)
   private keydownHandler = (e: KeyboardEvent) => {
     // Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
@@ -913,7 +934,16 @@ testSmartPromise();
                 </div>
               </div>
               <div class="editor-content">
-                ${this.openFiles.length === 0 ? html`
+                ${this.showDiffView && this.diffViewConfig ? html`
+                  <dees-workspace-diff-editor
+                    .filePath=${this.diffViewConfig.filePath}
+                    .originalContent=${this.diffViewConfig.originalContent}
+                    .modifiedContent=${this.diffViewConfig.modifiedContent}
+                    .language=${this.diffViewConfig.language}
+                    @diff-resolved=${this.handleDiffResolved}
+                    @diff-closed=${() => { this.showDiffView = false; this.diffViewConfig = null; }}
+                  ></dees-workspace-diff-editor>
+                ` : this.openFiles.length === 0 ? html`
                   <div class="empty-state">
                     <dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
                     <span>Select a file to edit</span>
@@ -927,6 +957,7 @@ testSmartPromise();
                   ></dees-workspace-monaco>
                 `}
               </div>
+              <dees-actionbar></dees-actionbar>
             </div>
 
             <!-- Horizontal resize handle for terminal -->
@@ -1015,6 +1046,7 @@ testSmartPromise();
       this.autoSaveInterval = null;
     }
     this.stopNodeModulesWatcher();
+    this.stopAllFileWatchers();
   }
 
   public async firstUpdated() {
@@ -1031,6 +1063,11 @@ testSmartPromise();
     if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
       await this.initializeWorkspace();
     }
+
+    // Capture actionbar reference when it becomes available (after initialization completes)
+    if (!this.actionbarElement) {
+      this.actionbarElement = this.shadowRoot?.querySelector('.editor-panel dees-actionbar') as DeesActionbar;
+    }
   }
 
   private async initializeWorkspace() {
@@ -1185,6 +1222,191 @@ testSmartPromise();
     }
   }
 
+  // ========== Open File Watching for External Changes ==========
+
+  /**
+   * Start watching an open file for external changes
+   */
+  private startWatchingFile(path: string): void {
+    if (!this.executionEnvironment || this.openFileWatchers.has(path)) return;
+
+    try {
+      const watcher = this.executionEnvironment.watch(
+        path,
+        (_event, _filename) => {
+          // Debounce to avoid multiple rapid triggers
+          const existingTimeout = this.fileChangeDebounce.get(path);
+          if (existingTimeout) {
+            clearTimeout(existingTimeout);
+          }
+          const timeout = setTimeout(() => {
+            this.handleExternalFileChange(path);
+            this.fileChangeDebounce.delete(path);
+          }, 300);
+          this.fileChangeDebounce.set(path, timeout);
+        }
+      );
+      this.openFileWatchers.set(path, watcher);
+    } catch (error) {
+      console.warn(`Could not watch file ${path}:`, error);
+    }
+  }
+
+  /**
+   * Stop watching a file when it's closed
+   */
+  private stopWatchingFile(path: string): void {
+    const watcher = this.openFileWatchers.get(path);
+    if (watcher) {
+      watcher.stop();
+      this.openFileWatchers.delete(path);
+    }
+    const timeout = this.fileChangeDebounce.get(path);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.fileChangeDebounce.delete(path);
+    }
+  }
+
+  /**
+   * Stop all file watchers
+   */
+  private stopAllFileWatchers(): void {
+    for (const watcher of this.openFileWatchers.values()) {
+      watcher.stop();
+    }
+    this.openFileWatchers.clear();
+
+    for (const timeout of this.fileChangeDebounce.values()) {
+      clearTimeout(timeout);
+    }
+    this.fileChangeDebounce.clear();
+  }
+
+  /**
+   * Handle external file change - show actionbar if file has local changes,
+   * otherwise silently update with cursor preservation
+   */
+  private async handleExternalFileChange(path: string): Promise<void> {
+    const file = this.openFiles.find(f => f.path === path);
+    if (!file || !this.executionEnvironment) return;
+
+    try {
+      // Read the new content from disk
+      const newContent = await this.executionEnvironment.readFile(path);
+
+      // If content is same as what we have, no action needed
+      if (newContent === file.content) return;
+
+      if (file.modified) {
+        // File has unsaved local changes AND disk changed - conflict!
+        const result = await this.actionbarElement?.show({
+          message: `"${file.name}" changed on disk. What do you want to do?`,
+          type: 'question',
+          icon: 'lucide:gitMerge',
+          actions: [
+            { id: 'load-disk', label: 'Load from Disk', primary: true },
+            { id: 'save-local', label: 'Save Local to Disk' },
+            { id: 'compare', label: 'Compare' },
+          ],
+          timeout: { duration: 15000, defaultActionId: 'load-disk' },
+          dismissible: true,
+        });
+
+        if (result?.actionId === 'load-disk') {
+          // Discard local changes, load disk version
+          await this.updateFileContent(path, newContent, false);
+        } else if (result?.actionId === 'save-local') {
+          // Keep local changes and save to disk (overwrite external)
+          await this.executionEnvironment.writeFile(path, file.content);
+          // Mark as saved
+          this.openFiles = this.openFiles.map(f =>
+            f.path === path ? { ...f, modified: false } : f
+          );
+        } else if (result?.actionId === 'compare') {
+          // Open diff view
+          this.openDiffView(path, file.content, newContent);
+        }
+        // If dismissed, do nothing - user can manually resolve later
+      } else {
+        // No local changes - silently update with cursor preservation
+        await this.updateFileContent(path, newContent, true);
+      }
+    } catch (error) {
+      console.warn(`Failed to handle external change for ${path}:`, error);
+    }
+  }
+
+  /**
+   * Update file content in state and optionally in the editor
+   */
+  private async updateFileContent(
+    path: string,
+    newContent: string,
+    preserveCursor: boolean
+  ): Promise<void> {
+    // Update internal state
+    this.openFiles = this.openFiles.map(f =>
+      f.path === path ? { ...f, content: newContent, modified: false } : f
+    );
+
+    // If this is the active file, update Monaco editor
+    if (path === this.activeFilePath) {
+      const editor = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+      if (editor) {
+        await editor.setContentExternal(newContent, preserveCursor);
+      }
+    }
+  }
+
+  /**
+   * Open the diff view to compare local and disk versions
+   */
+  private openDiffView(path: string, localContent: string, diskContent: string): void {
+    this.diffViewConfig = {
+      filePath: path,
+      originalContent: diskContent,
+      modifiedContent: localContent,
+      language: this.getLanguageFromPath(path),
+    };
+    this.showDiffView = true;
+  }
+
+  /**
+   * Handle diff view resolution
+   */
+  private async handleDiffResolved(e: CustomEvent): Promise<void> {
+    const { action, content } = e.detail;
+    const path = this.diffViewConfig?.filePath;
+
+    if (!path || !this.executionEnvironment) {
+      this.showDiffView = false;
+      this.diffViewConfig = null;
+      return;
+    }
+
+    if (action === 'use-local') {
+      // Save local content to disk
+      await this.executionEnvironment.writeFile(path, content);
+      this.openFiles = this.openFiles.map(f =>
+        f.path === path ? { ...f, content, modified: false } : f
+      );
+      // Update editor if active
+      if (path === this.activeFilePath) {
+        const editor = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+        if (editor) {
+          await editor.setContentExternal(content, false);
+        }
+      }
+    } else if (action === 'use-disk') {
+      // Update editor with disk content
+      await this.updateFileContent(path, content, false);
+    }
+
+    this.showDiffView = false;
+    this.diffViewConfig = null;
+  }
+
   private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
     const { path, name } = e.detail;
     await this.openFile(path, name);
@@ -1209,6 +1431,9 @@ testSmartPromise();
       ];
       this.activeFilePath = path;
 
+      // Start watching for external changes
+      this.startWatchingFile(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
@@ -1245,6 +1470,9 @@ testSmartPromise();
       if (!confirmed) return;
     }
 
+    // Stop watching this file
+    this.stopWatchingFile(path);
+
     this.openFiles = this.openFiles.filter(f => f.path !== path);
 
     // If closing the active file, activate another one

ts_web/elements/00group-workspace/index.ts

@@ -7,3 +7,4 @@ export * from './dees-workspace-terminal-preview/index.js';
 export * from './dees-workspace-markdown/index.js';
 export * from './dees-workspace-markdownoutlet/index.js';
 export * from './dees-workspace-bottombar/index.js';
+export * from './dees-workspace-diff-editor/index.js';

ts_web/elements/dees-actionbar/actionbar.interfaces.ts

@@ -0,0 +1,54 @@
+/**
+ * Action button configuration for the action bar
+ */
+export interface IActionBarAction {
+  /** Unique identifier for the action */
+  id: string;
+  /** Button label text */
+  label: string;
+  /** Primary action gets highlighted styling and receives timeout trigger */
+  primary?: boolean;
+  /** Lucide icon name (optional) */
+  icon?: string;
+}
+
+/**
+ * Configuration options for showing an action bar
+ */
+export interface IActionBarOptions {
+  /** Message text to display */
+  message: string;
+  /** Lucide icon name for the message (optional) */
+  icon?: string;
+  /** Visual type affects coloring */
+  type?: 'info' | 'warning' | 'error' | 'question';
+  /** Action buttons to display */
+  actions: IActionBarAction[];
+  /** Timeout configuration (optional) */
+  timeout?: {
+    /** Duration in milliseconds before auto-triggering default action */
+    duration: number;
+    /** ID of the action to auto-trigger when timeout expires */
+    defaultActionId: string;
+  };
+  /** Whether to show a dismiss (X) button */
+  dismissible?: boolean;
+}
+
+/**
+ * Result returned when an action bar is resolved
+ */
+export interface IActionBarResult {
+  /** ID of the action that was triggered */
+  actionId: string;
+  /** Whether the action was triggered by timeout (true) or user click (false) */
+  timedOut: boolean;
+}
+
+/**
+ * Internal queue item for pending action bars
+ */
+export interface IActionBarQueueItem {
+  options: IActionBarOptions;
+  resolve: (result: IActionBarResult) => void;
+}

ts_web/elements/dees-actionbar/dees-actionbar.ts

@@ -0,0 +1,500 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  html,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+import '../dees-icon/dees-icon.js';
+import type {
+  IActionBarOptions,
+  IActionBarResult,
+  IActionBarQueueItem,
+  IActionBarAction,
+} from './actionbar.interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-actionbar': DeesActionbar;
+  }
+}
+
+@customElement('dees-actionbar')
+export class DeesActionbar extends DeesElement {
+  // STATIC
+  public static demo = () => {
+    const getActionbar = (e: Event) => {
+      const button = e.currentTarget as HTMLElement;
+      const container = button.closest('.demo-container');
+      return container?.querySelector('dees-actionbar') as DeesActionbar | null;
+    };
+
+    const showActionBar = async (e: Event) => {
+      const actionbar = getActionbar(e);
+      if (!actionbar) return;
+      const result = await actionbar.show({
+        message: 'File changed externally. Reload?',
+        type: 'warning',
+        icon: 'lucide:alertTriangle',
+        actions: [
+          { id: 'reload', label: 'Reload', primary: true },
+          { id: 'ignore', label: 'Ignore' },
+        ],
+        timeout: { duration: 5000, defaultActionId: 'reload' },
+        dismissible: true,
+      });
+      console.log('Action bar result:', result);
+    };
+
+    const showErrorBar = async (e: Event) => {
+      const actionbar = getActionbar(e);
+      if (!actionbar) return;
+      const result = await actionbar.show({
+        message: 'Process failed with exit code 1',
+        type: 'error',
+        icon: 'lucide:xCircle',
+        actions: [
+          { id: 'retry', label: 'Retry', primary: true },
+          { id: 'dismiss', label: 'Dismiss' },
+        ],
+        timeout: { duration: 10000, defaultActionId: 'dismiss' },
+      });
+      console.log('Error bar result:', result);
+    };
+
+    const showQuestionBar = async (e: Event) => {
+      const actionbar = getActionbar(e);
+      if (!actionbar) return;
+      const result = await actionbar.show({
+        message: 'Save changes before closing?',
+        type: 'question',
+        icon: 'lucide:helpCircle',
+        actions: [
+          { id: 'save', label: 'Save', primary: true },
+          { id: 'discard', label: 'Discard' },
+          { id: 'cancel', label: 'Cancel' },
+        ],
+      });
+      console.log('Question bar result:', result);
+    };
+
+    return html`
+      <style>
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          height: 300px;
+          border: 1px solid #333;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+        .demo-content {
+          flex: 1;
+          padding: 16px;
+          display: flex;
+          gap: 8px;
+          align-items: flex-start;
+        }
+      </style>
+      <div class="demo-container">
+        <div class="demo-content">
+          <dees-button @click=${showActionBar}>Warning</dees-button>
+          <dees-button @click=${showErrorBar}>Error</dees-button>
+          <dees-button @click=${showQuestionBar}>Question</dees-button>
+        </div>
+        <dees-actionbar></dees-actionbar>
+      </div>
+    `;
+  };
+
+  // Queue of pending action bars
+  private queue: IActionBarQueueItem[] = [];
+
+  // Current active bar state
+  @state() accessor currentBar: IActionBarOptions | null = null;
+  @state() accessor timeRemaining: number = 0;
+  @state() accessor progressPercent: number = 100;
+  @state() accessor isVisible: boolean = false;
+
+  // Timeout handling
+  private timeoutInterval: ReturnType<typeof setInterval> | null = null;
+  private currentResolve: ((result: IActionBarResult) => void) | null = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 0.2s ease-out;
+      }
+
+      :host(.visible) {
+        grid-template-rows: 1fr;
+      }
+
+      .actionbar-item {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 12%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 20%)')};
+        overflow: hidden;
+      }
+
+      .progress-bar {
+        height: 3px;
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 18%)')};
+        overflow: hidden;
+      }
+
+      .progress-bar-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('hsl(210 100% 50%)', 'hsl(210 100% 60%)')};
+        transition: width 0.1s linear;
+      }
+
+      .progress-bar-fill.warning {
+        background: ${cssManager.bdTheme('hsl(38 92% 50%)', 'hsl(38 92% 55%)')};
+      }
+
+      .progress-bar-fill.error {
+        background: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 55%)')};
+      }
+
+      .progress-bar-fill.question {
+        background: ${cssManager.bdTheme('hsl(270 70% 50%)', 'hsl(270 70% 60%)')};
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        gap: 12px;
+        min-height: 32px;
+      }
+
+      .message-section {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .message-icon {
+        flex-shrink: 0;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .message-icon.info {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .message-icon.warning {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .message-icon.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 55%)')};
+      }
+
+      .message-icon.question {
+        color: ${cssManager.bdTheme('hsl(270 70% 50%)', 'hsl(270 70% 60%)')};
+      }
+
+      .message-text {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .actions-section {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .action-button.secondary {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 30%)')};
+      }
+
+      .action-button.secondary:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 18%)')};
+      }
+
+      .action-button.primary {
+        background: ${cssManager.bdTheme('hsl(210 100% 50%)', 'hsl(210 100% 55%)')};
+        color: white;
+      }
+
+      .action-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 50%)')};
+      }
+
+      .action-button.primary.warning {
+        background: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 50%)')};
+      }
+
+      .action-button.primary.warning:hover {
+        background: ${cssManager.bdTheme('hsl(38 92% 40%)', 'hsl(38 92% 45%)')};
+      }
+
+      .action-button.primary.error {
+        background: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 55%)')};
+      }
+
+      .action-button.primary.error:hover {
+        background: ${cssManager.bdTheme('hsl(0 70% 45%)', 'hsl(0 70% 50%)')};
+      }
+
+      .action-button.primary.question {
+        background: ${cssManager.bdTheme('hsl(270 70% 50%)', 'hsl(270 70% 55%)')};
+      }
+
+      .action-button.primary.question:hover {
+        background: ${cssManager.bdTheme('hsl(270 70% 45%)', 'hsl(270 70% 50%)')};
+      }
+
+      .countdown {
+        font-size: 11px;
+        opacity: 0.8;
+        margin-left: 2px;
+      }
+
+      .dismiss-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        transition: all 0.15s ease;
+      }
+
+      .dismiss-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 22%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 70%)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.currentBar) {
+      return html``;
+    }
+
+    const bar = this.currentBar;
+    const type = bar.type || 'info';
+    const hasTimeout = bar.timeout && this.timeRemaining > 0;
+
+    return html`
+      <div class="actionbar-item">
+        ${hasTimeout ? html`
+          <div class="progress-bar">
+            <div
+              class="progress-bar-fill ${type}"
+              style="width: ${this.progressPercent}%"
+            ></div>
+          </div>
+        ` : ''}
+        <div class="content">
+          <div class="message-section">
+            ${bar.icon ? html`
+              <dees-icon
+                class="message-icon ${type}"
+                .icon=${bar.icon}
+                iconSize="16"
+              ></dees-icon>
+            ` : ''}
+            <span class="message-text">${bar.message}</span>
+          </div>
+          <div class="actions-section">
+            ${bar.actions.map(action => this.renderActionButton(action, bar, hasTimeout))}
+            ${bar.dismissible ? html`
+              <div
+                class="dismiss-button"
+                @click=${() => this.handleDismiss()}
+                title="Dismiss"
+              >
+                <dees-icon .icon=${'lucide:x'} iconSize="14"></dees-icon>
+              </div>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderActionButton(
+    action: IActionBarAction,
+    bar: IActionBarOptions,
+    hasTimeout: boolean | undefined
+  ): TemplateResult {
+    const isPrimary = action.primary;
+    const type = bar.type || 'info';
+    const isDefaultAction = bar.timeout?.defaultActionId === action.id;
+    const showCountdown = hasTimeout && isDefaultAction;
+    const seconds = Math.ceil(this.timeRemaining / 1000);
+
+    return html`
+      <button
+        class="action-button ${isPrimary ? `primary ${type}` : 'secondary'}"
+        @click=${() => this.handleAction(action.id, false)}
+      >
+        ${action.icon ? html`
+          <dees-icon .icon=${action.icon} iconSize="12"></dees-icon>
+        ` : ''}
+        <span>${action.label}</span>
+        ${showCountdown ? html`
+          <span class="countdown">(${seconds}s)</span>
+        ` : ''}
+      </button>
+    `;
+  }
+
+  // ========== Public API ==========
+
+  /**
+   * Show an action bar with the given options.
+   * Returns a promise that resolves when an action is taken.
+   */
+  public async show(options: IActionBarOptions): Promise<IActionBarResult> {
+    return new Promise((resolve) => {
+      // Add to queue
+      this.queue.push({ options, resolve });
+
+      // If no current bar, process queue
+      if (!this.currentBar) {
+        this.processQueue();
+      }
+    });
+  }
+
+  /**
+   * Dismiss the current action bar without triggering any action.
+   */
+  public dismiss(): void {
+    this.handleDismiss();
+  }
+
+  /**
+   * Clear all pending action bars in the queue.
+   */
+  public clearQueue(): void {
+    // Resolve all queued items with dismiss
+    for (const item of this.queue) {
+      item.resolve({ actionId: 'dismissed', timedOut: false });
+    }
+    this.queue = [];
+  }
+
+  // ========== Private Methods ==========
+
+  /**
+   * Hide the current actionbar with animation.
+   * Removes visible class first to trigger CSS transition, then clears content after animation.
+   */
+  private async hideCurrentBar(): Promise<void> {
+    // Remove visible class to start close animation
+    this.classList.remove('visible');
+    this.isVisible = false;
+
+    // Wait for animation to complete (200ms transition + buffer)
+    await new Promise(resolve => setTimeout(resolve, 220));
+
+    // Now safe to clear content
+    this.currentBar = null;
+    this.currentResolve = null;
+  }
+
+  private processQueue(): void {
+    if (this.queue.length === 0) {
+      // Hide with animation - don't await, let it run async
+      this.hideCurrentBar();
+      return;
+    }
+
+    const item = this.queue.shift()!;
+    this.currentBar = item.options;
+    this.currentResolve = item.resolve;
+    this.isVisible = true;
+    this.classList.add('visible');
+
+    // Setup timeout if configured
+    if (item.options.timeout) {
+      this.startTimeout(item.options.timeout.duration, item.options.timeout.defaultActionId);
+    }
+  }
+
+  private startTimeout(duration: number, defaultActionId: string): void {
+    this.timeRemaining = duration;
+    this.progressPercent = 100;
+
+    const startTime = Date.now();
+    const updateInterval = 50; // Update every 50ms for smooth animation
+
+    this.timeoutInterval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      this.timeRemaining = Math.max(0, duration - elapsed);
+      this.progressPercent = (this.timeRemaining / duration) * 100;
+
+      if (this.timeRemaining <= 0) {
+        this.clearTimeoutInterval();
+        this.handleAction(defaultActionId, true);
+      }
+    }, updateInterval);
+  }
+
+  private clearTimeoutInterval(): void {
+    if (this.timeoutInterval) {
+      clearInterval(this.timeoutInterval);
+      this.timeoutInterval = null;
+    }
+  }
+
+  private handleAction(actionId: string, timedOut: boolean): void {
+    this.clearTimeoutInterval();
+
+    if (this.currentResolve) {
+      this.currentResolve({ actionId, timedOut });
+    }
+
+    // Process next item in queue
+    this.processQueue();
+  }
+
+  private handleDismiss(): void {
+    this.handleAction('dismissed', false);
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    this.clearTimeoutInterval();
+  }
+}

ts_web/elements/dees-actionbar/index.ts

@@ -0,0 +1,2 @@
+export * from './dees-actionbar.js';
+export * from './actionbar.interfaces.js';

ts_web/elements/index.ts

@@ -14,6 +14,7 @@ export * from './00group-runtime/index.js';
 export * from './00group-simple/index.js';
 
 // Standalone Components
+export * from './dees-actionbar/index.js';
 export * from './dees-badge/index.js';
 export * from './dees-chips/index.js';
 export * from './dees-contextmenu/index.js';