v3.25.0

changelog.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 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
+
+- Add dees-workspace-bottombar component and export; bottom bar emits run-process events to launch processes.
+- Introduce terminal interfaces (IRunProcessEventDetail, ITerminalTab, ICreateTerminalTabOptions, etc.) and a TerminalTabManager to manage multiple terminal tabs and lifecycle.
+- Integrate bottombar into dees-workspace: layout refactor (workspace-outer), move/adjust resize handles and panels, and handle @run-process to create terminal tabs and focus terminal panel.
+- Enhance dees-workspace-terminal: tabbed terminal UI, new public APIs (createProcessTab, writeToTab, sendInputToTab), theme updates, and improved disposal/cleanup behavior.
+- Update module exports to include bottombar and additional terminal sub-exports (interfaces, terminal-tab-manager).
+
+## 2025-12-31 - 3.23.0 - feat(workspace)
+add resizable file tree and terminal panes with draggable handles and public layout APIs
+
+- Introduce reactive state for currentFileTreeWidth, currentTerminalHeight, isDraggingFileTree and isDraggingTerminal
+- Add mouse event handlers (mousedown/move/up) to drag-resize the file tree and terminal with min/max clamping
+- Dispatch window resize event after resizing to notify Monaco/editor of layout changes
+- Clean up resize event listeners in disconnectedCallback
+- Initialize current sizes from component properties in firstUpdated
+- Expose public layout methods: setFileTreeWidth, setTerminalHeight, resetLayout
+
+## 2025-12-31 - 3.22.0 - feat(workspace)
+add resizable markdown editor/preview split with draggable handle and markdown outlet styling/demo
+
+- Introduce a flexible split layout for the workspace markdown editor with a draggable resize handle (splitRatio, minPanelSize, dragging state, mouse handlers and cleanup).
+- Enhance dees-workspace-markdown: switch from grid to flex, add resize handle UI, prevent pointer selection while dragging, notify Monaco on resize.
+- Add comprehensive styling and demo content for dees-workspace-markdownoutlet (dark/light themed markdown styles, syntax highlighting classes, and demo scenarios).
+- Fix typescript-intellisense monaco model update: only set model value when content actually changed to avoid cursor resets.
+- Add markdown outlet demo helper and numerous screenshot/image assets (.playwright-mcp) for demos/documentation.
+
+## 2025-12-31 - 3.21.0 - feat(terminal)
+add dynamic bright/dark theming for terminal components and terminal preview
+
+- Add bright/dark theme PNG assets under .playwright-mcp for previews.
+- Replace hardcoded terminal background/colors with cssManager.bdTheme in workspace terminal and preview styles.
+- Introduce getTerminalTheme helper to compute xterm theme for bright/dark modes.
+- Subscribe to themeManager.themeObservable and apply updates to xterm (terminal.options.theme) so terminals update live on theme change.
+- Remove hardcoded background property/CSS var and unused background accessor from workspace terminal.
+- Ensure proper cleanup: unsubscribe theme subscriptions and dispose terminals in disconnectedCallback.
+
+## 2025-12-31 - 3.20.1 - fix(dees-workspace)
+fix demo wrapper and workspace layout; always render terminal preview
+
+- Import @design.estate/dees-wcctools/demotools and wrap demo content in <dees-demowrapper>
+- Create an absolute-positioned container so the dees-workspace fills 100% height/width
+- Always render dees-workspace-terminal-preview (use empty command when none) to avoid conditional rendering issues
+- Set a fixed height (200px) for the terminal preview in the initializing state
+- Add Playwright demo asset .playwright-mcp/dees-workspace-demo-4k.png
+
 ## 2025-12-31 - 3.20.0 - feat(workspace)
 rename editor components to workspace group and move terminal & TypeScript intellisense into workspace
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.20.0",
+  "version": "3.25.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.20.0',
+  version: '3.25.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-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -417,7 +417,6 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
-    terminal.background = 'hsl(220 13% 8%)';
     terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
     terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
     terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;

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

@@ -0,0 +1,548 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+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, ITerminalProcessCompleteEventDetail } from '../dees-workspace-terminal/interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-workspace-bottombar': DeesWorkspaceBottombar;
+  }
+}
+
+interface IOutdatedPackage {
+  name: string;
+  current: string;
+  wanted: string;
+  latest: string;
+  type: 'dependencies' | 'devDependencies';
+}
+
+@customElement('dees-workspace-bottombar')
+export class DeesWorkspaceBottombar extends DeesElement {
+  // INSTANCE
+  @property({ type: Object })
+  accessor executionEnvironment: IExecutionEnvironment | null = null;
+
+  // Script runner state
+  @state()
+  accessor scripts: Record<string, string> = {};
+
+  // Package checker state
+  @state()
+  accessor packageStatus: 'checking' | 'up-to-date' | 'updates-available' | 'error' | 'idle' = 'idle';
+
+  @state()
+  accessor outdatedPackages: IOutdatedPackage[] = [];
+
+  @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,
+    css`
+      :host {
+        display: block;
+        height: 24px;
+        flex-shrink: 0;
+      }
+
+      .bottom-bar {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        gap: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .widget:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .widget dees-icon {
+        flex-shrink: 0;
+      }
+
+      .widget-separator {
+        width: 1px;
+        height: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        margin: 0 4px;
+      }
+
+      .widget.running {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .widget.up-to-date {
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
+      }
+
+      .widget.updates-available {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .widget.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .spinning {
+        animation: spin 1s linear infinite;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="bottom-bar">
+        <!-- Script Runner Widget -->
+        <div
+          class="widget"
+          @click=${this.handleScriptClick}
+          title="Run script"
+        >
+          <dees-icon
+            .icon=${'lucide:play'}
+            iconSize="12"
+          ></dees-icon>
+          <span>Scripts</span>
+        </div>
+
+        <div class="widget-separator"></div>
+
+        <!-- Package Checker Widget -->
+        <div
+          class="widget ${this.getPackageStatusClass()}"
+          @click=${this.handlePackageClick}
+          title="${this.getPackageTooltip()}"
+        >
+          <dees-icon
+            .icon=${this.getPackageIcon()}
+            iconSize="12"
+            class="${this.isCheckingPackages ? 'spinning' : ''}"
+          ></dees-icon>
+          <span>${this.getPackageStatusText()}</span>
+        </div>
+
+        <div class="spacer"></div>
+
+        <!-- Future widgets can be added here -->
+      </div>
+    `;
+  }
+
+  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();
+  }
+
+  async updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
+      await this.loadScripts();
+      await this.checkPackages();
+    }
+  }
+
+  // ========== Script Runner ==========
+
+  private async loadScripts(): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    try {
+      const packageJsonExists = await this.executionEnvironment.exists('/package.json');
+      if (!packageJsonExists) {
+        this.scripts = {};
+        return;
+      }
+
+      const content = await this.executionEnvironment.readFile('/package.json');
+      const packageJson = JSON.parse(content);
+      this.scripts = packageJson.scripts || {};
+    } catch (error) {
+      console.warn('Failed to load scripts from package.json:', error);
+      this.scripts = {};
+    }
+  }
+
+  private async handleScriptClick(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+
+    const scriptNames = Object.keys(this.scripts);
+    if (scriptNames.length === 0) {
+      return;
+    }
+
+    const menuItems = scriptNames.map(name => ({
+      name: name,
+      iconName: 'lucide:terminal' as const,
+      action: async () => {
+        await this.runScript(name);
+      },
+    }));
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  private async runScript(scriptName: string): Promise<void> {
+    if (!this.executionEnvironment) return;
+
+    // Emit run-process event for the workspace to create a terminal tab
+    const detail: IRunProcessEventDetail = {
+      type: 'script',
+      label: scriptName,
+      command: 'pnpm',
+      args: ['run', scriptName],
+      metadata: { scriptName },
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  // ========== Package Checker ==========
+
+  private async checkPackages(): Promise<void> {
+    if (!this.executionEnvironment) {
+      this.packageStatus = 'idle';
+      return;
+    }
+
+    try {
+      const packageJsonExists = await this.executionEnvironment.exists('/package.json');
+      if (!packageJsonExists) {
+        this.packageStatus = 'idle';
+        return;
+      }
+
+      this.packageStatus = 'checking';
+      this.isCheckingPackages = true;
+
+      // Run pnpm outdated --json with timeout
+      const process = await this.executionEnvironment.spawn('pnpm', ['outdated', '--json']);
+
+      let output = '';
+
+      // 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) {
+        // No outdated packages
+        this.packageStatus = 'up-to-date';
+        this.outdatedPackages = [];
+      } else {
+        // Parse outdated packages
+        try {
+          const outdatedData = JSON.parse(output);
+          this.outdatedPackages = this.parseOutdatedPackages(outdatedData);
+          this.packageStatus = this.outdatedPackages.length > 0 ? 'updates-available' : 'up-to-date';
+        } catch {
+          // If parsing fails but exit code is 1, assume there are updates
+          this.packageStatus = 'updates-available';
+          this.outdatedPackages = [];
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to check for package updates:', error);
+      this.packageStatus = 'error';
+    } finally {
+      this.isCheckingPackages = false;
+    }
+  }
+
+  private parseOutdatedPackages(data: any): IOutdatedPackage[] {
+    const packages: IOutdatedPackage[] = [];
+
+    // pnpm outdated --json returns an object with package names as keys
+    if (typeof data === 'object' && data !== null) {
+      for (const [name, info] of Object.entries(data)) {
+        const pkgInfo = info as any;
+        packages.push({
+          name,
+          current: pkgInfo.current || 'unknown',
+          wanted: pkgInfo.wanted || pkgInfo.current || 'unknown',
+          latest: pkgInfo.latest || pkgInfo.wanted || 'unknown',
+          type: pkgInfo.dependencyType === 'devDependencies' ? 'devDependencies' : 'dependencies',
+        });
+      }
+    }
+
+    return packages;
+  }
+
+  private async handlePackageClick(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
+
+    // Refresh option - show output in terminal
+    menuItems.push({
+      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',
+          label: 'check packages',
+          command: 'pnpm',
+          args: ['outdated'],
+        };
+
+        this.dispatchEvent(new CustomEvent('run-process', {
+          bubbles: true,
+          composed: true,
+          detail,
+        }));
+
+        // Also refresh the widget status silently after a delay
+        setTimeout(() => this.checkPackages(), 3000);
+      },
+    });
+
+    if (this.outdatedPackages.length > 0) {
+      menuItems.push({ divider: true });
+
+      // Show outdated packages (max 10)
+      const displayPackages = this.outdatedPackages.slice(0, 10);
+      for (const pkg of displayPackages) {
+        menuItems.push({
+          name: `${pkg.name}: ${pkg.current} → ${pkg.latest}`,
+          iconName: 'lucide:package',
+          action: async () => {
+            // Update single package
+            await this.updatePackage(pkg.name);
+          },
+        });
+      }
+
+      if (this.outdatedPackages.length > 10) {
+        menuItems.push({
+          name: `... and ${this.outdatedPackages.length - 10} more`,
+          iconName: 'lucide:moreHorizontal',
+          action: async () => {},
+        });
+      }
+
+      menuItems.push({ divider: true });
+
+      menuItems.push({
+        name: 'Update all packages',
+        iconName: 'lucide:arrowUpCircle',
+        action: async () => {
+          await this.updateAllPackages();
+        },
+      });
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  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', '--latest', packageName],
+      metadata: { packageName },
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  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', '--latest'],
+    };
+
+    this.dispatchEvent(new CustomEvent('run-process', {
+      bubbles: true,
+      composed: true,
+      detail,
+    }));
+  }
+
+  // ========== Helper Methods ==========
+
+  private getPackageStatusClass(): string {
+    if (this.isCheckingPackages) return '';
+    return this.packageStatus;
+  }
+
+  private getPackageIcon(): string {
+    if (this.isCheckingPackages) return 'lucide:loader2';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'lucide:checkCircle';
+      case 'updates-available':
+        return 'lucide:alertCircle';
+      case 'error':
+        return 'lucide:xCircle';
+      default:
+        return 'lucide:package';
+    }
+  }
+
+  private getPackageStatusText(): string {
+    if (this.isCheckingPackages) return 'Checking...';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'Up to date';
+      case 'updates-available':
+        return `${this.outdatedPackages.length} update${this.outdatedPackages.length !== 1 ? 's' : ''}`;
+      case 'error':
+        return 'Check failed';
+      default:
+        return 'Packages';
+    }
+  }
+
+  private getPackageTooltip(): string {
+    if (this.isCheckingPackages) return 'Checking for package updates...';
+
+    switch (this.packageStatus) {
+      case 'up-to-date':
+        return 'All packages are up to date';
+      case 'updates-available':
+        return `${this.outdatedPackages.length} package update${this.outdatedPackages.length !== 1 ? 's' : ''} available`;
+      case 'error':
+        return 'Failed to check for updates. Click to retry.';
+      default:
+        return 'Click to check for package updates';
+    }
+  }
+
+  // ========== Public Methods ==========
+
+  /**
+   * Manually trigger a package check
+   */
+  public async refreshPackageStatus(): Promise<void> {
+    await this.checkPackages();
+  }
+
+  /**
+   * Manually reload scripts from package.json
+   */
+  public async refreshScripts(): Promise<void> {
+    await this.loadScripts();
+  }
+}

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

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

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

@@ -6,7 +6,8 @@ import {
   type TemplateResult,
   css,
   cssManager,
-  domtools
+  domtools,
+  state,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
@@ -27,31 +28,113 @@ export class DeesWorkspaceMarkdown extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      .gridcontainer {
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      .splitContainer {
         position: absolute;
         height: 100%;
         width: 100%;
-        display: grid;
-        grid-template-columns: 60% 40%;
+        display: flex;
+        flex-direction: row;
       }
+
       .editorContainer {
         position: relative;
+        height: 100%;
+        min-width: 100px;
+        overflow: hidden;
       }
+
+      .resizeHandle {
+        width: 6px;
+        height: 100%;
+        background: ${cssManager.bdTheme('#e5e7eb', '#30363d')};
+        cursor: col-resize;
+        flex-shrink: 0;
+        transition: background 0.15s ease;
+        position: relative;
+      }
+
+      .resizeHandle:hover,
+      .resizeHandle.dragging {
+        background: ${cssManager.bdTheme('#3b82f6', '#58a6ff')};
+      }
+
+      .resizeHandle::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 32px;
+        background: ${cssManager.bdTheme('#9ca3af', '#6e7681')};
+        border-radius: 1px;
+        opacity: 0.6;
+      }
+
+      .resizeHandle:hover::after,
+      .resizeHandle.dragging::after {
+        background: ${cssManager.bdTheme('#ffffff', '#ffffff')};
+        opacity: 1;
+      }
+
       .outletContainer {
-        background: #111;
-        color: #fff;
-        font-family: 'Roboto Slab';
+        position: relative;
+        height: 100%;
+        min-width: 100px;
+        background: ${cssManager.bdTheme('#ffffff', '#0d1117')};
+        color: ${cssManager.bdTheme('#24292f', '#e6edf3')};
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
         padding: 20px;
-        overflow-y: scroll;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+
+      /* Prevent text selection while dragging */
+      .splitContainer.dragging {
+        user-select: none;
+      }
+
+      .splitContainer.dragging .editorContainer,
+      .splitContainer.dragging .outletContainer {
+        pointer-events: none;
       }
     `,
   ];
 
+  /**
+   * Initial split ratio for the editor (left) panel.
+   * Value from 0 to 100 representing percentage width.
+   * Default is 50 (50/50 split).
+   */
+  @property({ type: Number })
+  accessor splitRatio: number = 50;
+
+  /**
+   * Minimum width percentage for either panel.
+   */
+  @property({ type: Number })
+  accessor minPanelSize: number = 10;
+
+  @state()
+  accessor currentSplitRatio: number = 50;
+
+  @state()
+  accessor isDragging: boolean = false;
+
+  private resizeHandleElement: HTMLElement;
+  private containerElement: HTMLElement;
+
   public render() {
     return html`
-      <div class="gridcontainer">
-        <div class="editorContainer">
+      <div class="splitContainer ${this.isDragging ? 'dragging' : ''}">
+        <div class="editorContainer" style="width: ${this.currentSplitRatio}%">
           <dees-workspace-monaco
             .language=${'markdown'}
             .content=${`# a test content
@@ -78,7 +161,11 @@ const hello = 'yes'
             wordWrap="bounded"
           ></dees-workspace-monaco>
         </div>
-        <div class="outletContainer">
+        <div
+          class="resizeHandle ${this.isDragging ? 'dragging' : ''}"
+          @mousedown=${this.handleMouseDown}
+        ></div>
+        <div class="outletContainer" style="width: ${100 - this.currentSplitRatio}%">
           <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
         </div>
       </div>
@@ -87,9 +174,17 @@ const hello = 'yes'
 
   public async firstUpdated(_changedPropertiesArg) {
     await super.firstUpdated(_changedPropertiesArg);
+
+    // Initialize current ratio from property
+    this.currentSplitRatio = this.splitRatio;
+
+    // Cache elements
+    this.containerElement = this.shadowRoot.querySelector('.splitContainer');
+    this.resizeHandleElement = this.shadowRoot.querySelector('.resizeHandle');
+
     const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
 
-    // lets care about wiring the markdown stuff.
+    // Wire up markdown rendering
     const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet');
     const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
     const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
@@ -97,6 +192,64 @@ const hello = 'yes'
       await mdParsedResult.updateFromMarkdownString(contentArg)
       const html = mdParsedResult.html;
       markdownOutlet.updateHtmlText(html);
-    })
+    });
+  }
+
+  private handleMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isDragging = true;
+
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (!this.isDragging || !this.containerElement) return;
+
+    const containerRect = this.containerElement.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+    const mouseX = e.clientX - containerRect.left;
+
+    // Calculate percentage, accounting for the resize handle width (6px)
+    let newRatio = (mouseX / containerWidth) * 100;
+
+    // Clamp to min/max
+    newRatio = Math.max(this.minPanelSize, Math.min(100 - this.minPanelSize, newRatio));
+
+    this.currentSplitRatio = newRatio;
+  };
+
+  private handleMouseUp = () => {
+    this.isDragging = false;
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+
+    // Trigger resize on monaco editor
+    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    if (editor) {
+      // Monaco needs to be notified of size changes
+      window.dispatchEvent(new Event('resize'));
+    }
+  };
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    // Clean up event listeners
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  /**
+   * Programmatically set the split ratio
+   */
+  public setSplitRatio(ratio: number) {
+    this.currentSplitRatio = Math.max(this.minPanelSize, Math.min(100 - this.minPanelSize, ratio));
+  }
+
+  /**
+   * Reset to initial split ratio
+   */
+  public resetSplitRatio() {
+    this.currentSplitRatio = this.splitRatio;
   }
 }

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

@@ -0,0 +1,289 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesWorkspaceMarkdownoutlet } from './dees-workspace-markdownoutlet.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 900px;
+          margin: 0 auto;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <!-- Demo 1: Headings -->
+      <dees-panel
+        .title=${'Headings'}
+        .subtitle=${'All heading levels from H1 to H6'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h1>Heading Level 1</h1>
+            <h2>Heading Level 2</h2>
+            <h3>Heading Level 3</h3>
+            <h4>Heading Level 4</h4>
+            <h5>Heading Level 5</h5>
+            <h6>Heading Level 6</h6>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 2: Text Formatting -->
+      <dees-panel
+        .title=${'Text Formatting'}
+        .subtitle=${'Bold, italic, links, code, and keyboard input'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
+            <p>You can also use <strong><em>bold italic</em></strong> for emphasis.</p>
+            <p>Here's a <a href="#">link example</a> and some <code>inline code</code>.</p>
+            <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
+            <hr>
+            <p>Above is a horizontal rule separator.</p>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 3: Lists -->
+      <dees-panel
+        .title=${'Lists'}
+        .subtitle=${'Ordered, unordered, and task lists'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h3>Unordered List</h3>
+            <ul>
+              <li>First item</li>
+              <li>Second item
+                <ul>
+                  <li>Nested item 1</li>
+                  <li>Nested item 2</li>
+                </ul>
+              </li>
+              <li>Third item</li>
+            </ul>
+
+            <h3>Ordered List</h3>
+            <ol>
+              <li>Step one</li>
+              <li>Step two</li>
+              <li>Step three</li>
+            </ol>
+
+            <h3>Task List</h3>
+            <ul>
+              <li class="task-list-item"><input type="checkbox" checked disabled> Completed task</li>
+              <li class="task-list-item"><input type="checkbox" disabled> Pending task</li>
+              <li class="task-list-item"><input type="checkbox" disabled> Another task</li>
+            </ul>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 4: Code Blocks -->
+      <dees-panel
+        .title=${'Code Blocks'}
+        .subtitle=${'Syntax highlighted code examples'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <p>Inline code: <code>const greeting = "Hello, World!";</code></p>
+
+            <h3>TypeScript Example</h3>
+            <pre><code><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-element'</span>;
+
+<span class="hljs-keyword">interface</span> <span class="hljs-title">IUser</span> {
+  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;
+  <span class="hljs-attr">email</span>: <span class="hljs-built_in">string</span>;
+  <span class="hljs-attr">age</span>?: <span class="hljs-built_in">number</span>;
+}
+
+<span class="hljs-keyword">const</span> <span class="hljs-title">getUser</span> = <span class="hljs-keyword">async</span> (<span class="hljs-attr">id</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">Promise</span>&lt;IUser&gt; =&gt; {
+  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(\`/api/users/\${id}\`);
+  <span class="hljs-keyword">return</span> response.json();
+};</code></pre>
+
+            <h3>JSON Example</h3>
+            <pre><code>{
+  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"dees-catalog"</span>,
+  <span class="hljs-attr">"version"</span>: <span class="hljs-string">"3.0.0"</span>,
+  <span class="hljs-attr">"dependencies"</span>: {
+    <span class="hljs-attr">"@design.estate/dees-element"</span>: <span class="hljs-string">"^2.0.0"</span>
+  }
+}</code></pre>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 5: Tables -->
+      <dees-panel
+        .title=${'Tables'}
+        .subtitle=${'Styled tables with alternating rows'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <table>
+              <thead>
+                <tr>
+                  <th>Feature</th>
+                  <th>Status</th>
+                  <th>Priority</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Dark mode support</td>
+                  <td>Completed</td>
+                  <td>High</td>
+                </tr>
+                <tr>
+                  <td>Responsive design</td>
+                  <td>In Progress</td>
+                  <td>Medium</td>
+                </tr>
+                <tr>
+                  <td>Accessibility</td>
+                  <td>Planned</td>
+                  <td>High</td>
+                </tr>
+                <tr>
+                  <td>Documentation</td>
+                  <td>In Progress</td>
+                  <td>Low</td>
+                </tr>
+              </tbody>
+            </table>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 6: Blockquotes & Alerts -->
+      <dees-panel
+        .title=${'Blockquotes & Alerts'}
+        .subtitle=${'Quotes and GitHub-style alerts'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <blockquote>
+              <p>This is a standard blockquote. It's great for highlighting important information or quotes from other sources.</p>
+            </blockquote>
+
+            <div class="markdown-alert markdown-alert-note">
+              <p><strong>Note:</strong> This is an informational note to draw attention to important details.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-tip">
+              <p><strong>Tip:</strong> Here's a helpful tip to improve your workflow.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-important">
+              <p><strong>Important:</strong> This information is crucial for understanding the topic.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-warning">
+              <p><strong>Warning:</strong> Be careful when performing this action.</p>
+            </div>
+
+            <div class="markdown-alert markdown-alert-caution">
+              <p><strong>Caution:</strong> This action may have unintended consequences.</p>
+            </div>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+
+      <!-- Demo 7: Full Document -->
+      <dees-panel
+        .title=${'Full Document'}
+        .subtitle=${'A complete markdown document example'}
+        .runAfterRender=${async (panelEl: HTMLElement) => {
+          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
+          await outlet?.updateHtmlText(`
+            <h1>Getting Started Guide</h1>
+            <p>Welcome to the <strong>dees-catalog</strong> component library. This guide will help you get up and running quickly.</p>
+
+            <h2>Installation</h2>
+            <p>Install the package using your preferred package manager:</p>
+            <pre><code><span class="hljs-comment"># Using pnpm (recommended)</span>
+pnpm add @design.estate/dees-catalog
+
+<span class="hljs-comment"># Using npm</span>
+npm install @design.estate/dees-catalog</code></pre>
+
+            <h2>Basic Usage</h2>
+            <p>Import and use components in your TypeScript files:</p>
+            <pre><code><span class="hljs-keyword">import</span> { DeesButton } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-catalog'</span>;
+
+<span class="hljs-comment">// Use in your templates</span>
+html\`&lt;dees-button&gt;Click me&lt;/dees-button&gt;\`</code></pre>
+
+            <div class="markdown-alert markdown-alert-tip">
+              <p><strong>Tip:</strong> Check the demo showcase for live examples of all components.</p>
+            </div>
+
+            <h2>Available Components</h2>
+            <table>
+              <thead>
+                <tr>
+                  <th>Component</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>dees-button</code></td>
+                  <td>Primary button component</td>
+                </tr>
+                <tr>
+                  <td><code>dees-input-text</code></td>
+                  <td>Text input field</td>
+                </tr>
+                <tr>
+                  <td><code>dees-table</code></td>
+                  <td>Data table with sorting</td>
+                </tr>
+                <tr>
+                  <td><code>dees-modal</code></td>
+                  <td>Modal dialog</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <h2>Next Steps</h2>
+            <ul>
+              <li>Explore the <a href="#">component documentation</a></li>
+              <li>Check out the <a href="#">theming guide</a></li>
+              <li>Join our <a href="#">community Discord</a></li>
+            </ul>
+
+            <blockquote>
+              <p>"The best component library is one that gets out of your way." — Design Systems Team</p>
+            </blockquote>
+          `);
+        }}
+      >
+        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -1,4 +1,13 @@
-import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
+import {
+  customElement,
+  DeesElement,
+  html,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoFunc } from './dees-workspace-markdownoutlet.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -9,27 +18,382 @@ declare global {
 @customElement('dees-workspace-markdownoutlet')
 export class DeesWorkspaceMarkdownoutlet extends DeesElement {
   // DEMO
-  public static demo = () => html`<dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>`;
+  public static demo = demoFunc;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        line-height: 1.6;
+        color: ${cssManager.bdTheme('#24292f', '#e6edf3')};
+      }
+
+      .outlet {
+        word-wrap: break-word;
+      }
+
+      /* Headings */
+      h1, h2, h3, h4, h5, h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: 600;
+        line-height: 1.25;
+        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
+      }
+
+      h1 {
+        font-size: 2em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      h2 {
+        font-size: 1.5em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      h3 {
+        font-size: 1.25em;
+      }
+
+      h4 {
+        font-size: 1em;
+      }
+
+      h5 {
+        font-size: 0.875em;
+      }
+
+      h6 {
+        font-size: 0.85em;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+      }
+
+      /* Paragraphs and text */
+      p {
+        margin-top: 0;
+        margin-bottom: 16px;
+      }
+
+      /* Links */
+      a {
+        color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
+        text-decoration: none;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      /* Strong and emphasis */
+      strong {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
+      }
+
+      em {
+        font-style: italic;
+      }
+
+      /* Lists */
+      ul, ol {
+        margin-top: 0;
+        margin-bottom: 16px;
+        padding-left: 2em;
+      }
+
+      li {
+        margin-top: 4px;
+      }
+
+      li + li {
+        margin-top: 4px;
+      }
+
+      ul ul, ul ol, ol ul, ol ol {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      /* Blockquotes */
+      blockquote {
+        margin: 0 0 16px 0;
+        padding: 0 1em;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+        border-left: 4px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      blockquote > :first-child {
+        margin-top: 0;
+      }
+
+      blockquote > :last-child {
+        margin-bottom: 0;
+      }
+
+      /* Inline code */
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        background-color: ${cssManager.bdTheme('rgba(175, 184, 193, 0.2)', 'rgba(110, 118, 129, 0.4)')};
+        border-radius: 6px;
+        white-space: break-spaces;
+      }
+
+      /* Code blocks */
+      pre {
+        margin-top: 0;
+        margin-bottom: 16px;
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        border-radius: 6px;
+        word-wrap: normal;
+      }
+
+      pre code {
+        display: block;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        line-height: inherit;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+        font-size: 100%;
+        white-space: pre;
+      }
+
+      /* Tables */
+      table {
+        width: max-content;
+        max-width: 100%;
+        margin-top: 0;
+        margin-bottom: 16px;
+        border-spacing: 0;
+        border-collapse: collapse;
+        overflow: auto;
+        display: block;
+      }
+
+      table th {
+        font-weight: 600;
+        padding: 6px 13px;
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+      }
+
+      table td {
+        padding: 6px 13px;
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+      }
+
+      table tr {
+        background-color: ${cssManager.bdTheme('#ffffff', '#0d1117')};
+        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#21262d')};
+      }
+
+      table tr:nth-child(2n) {
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+      }
+
+      /* Horizontal rules */
+      hr {
+        height: 4px;
+        padding: 0;
+        margin: 24px 0;
+        background-color: ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        border: 0;
+        border-radius: 2px;
+      }
+
+      /* Images */
+      img {
+        max-width: 100%;
+        box-sizing: border-box;
+        border-radius: 6px;
+      }
+
+      /* Task lists */
+      .task-list-item {
+        list-style-type: none;
+      }
+
+      .task-list-item input {
+        margin: 0 0.2em 0.25em -1.4em;
+        vertical-align: middle;
+      }
+
+      /* Definition lists */
+      dl {
+        padding: 0;
+      }
+
+      dl dt {
+        padding: 0;
+        margin-top: 16px;
+        font-size: 1em;
+        font-style: italic;
+        font-weight: 600;
+      }
+
+      dl dd {
+        padding: 0 16px;
+        margin-bottom: 16px;
+      }
+
+      /* Keyboard input */
+      kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font-size: 11px;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+        line-height: 10px;
+        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
+        vertical-align: middle;
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        border-radius: 6px;
+        box-shadow: inset 0 -1px 0 ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+      }
+
+      /* Footnotes */
+      .footnotes {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
+        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
+        padding-top: 16px;
+        margin-top: 32px;
+      }
+
+      /* Alerts/Admonitions */
+      .markdown-alert {
+        padding: 8px 16px;
+        margin-bottom: 16px;
+        border-left: 4px solid;
+        border-radius: 6px;
+      }
+
+      .markdown-alert-note {
+        border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
+        background-color: ${cssManager.bdTheme('rgba(9, 105, 218, 0.1)', 'rgba(56, 139, 253, 0.1)')};
+      }
+
+      .markdown-alert-warning {
+        border-color: ${cssManager.bdTheme('#bf8700', '#d29922')};
+        background-color: ${cssManager.bdTheme('rgba(191, 135, 0, 0.1)', 'rgba(187, 128, 9, 0.1)')};
+      }
+
+      .markdown-alert-important {
+        border-color: ${cssManager.bdTheme('#8250df', '#a371f7')};
+        background-color: ${cssManager.bdTheme('rgba(130, 80, 223, 0.1)', 'rgba(163, 113, 247, 0.1)')};
+      }
+
+      .markdown-alert-caution {
+        border-color: ${cssManager.bdTheme('#cf222e', '#f85149')};
+        background-color: ${cssManager.bdTheme('rgba(207, 34, 46, 0.1)', 'rgba(248, 81, 73, 0.1)')};
+      }
+
+      .markdown-alert-tip {
+        border-color: ${cssManager.bdTheme('#1a7f37', '#3fb950')};
+        background-color: ${cssManager.bdTheme('rgba(26, 127, 55, 0.1)', 'rgba(46, 160, 67, 0.1)')};
+      }
+
+      /* Syntax highlighting for code blocks */
+      .hljs-comment,
+      .hljs-quote {
+        color: ${cssManager.bdTheme('#6a737d', '#8b949e')};
+      }
+
+      .hljs-keyword,
+      .hljs-selector-tag,
+      .hljs-addition {
+        color: ${cssManager.bdTheme('#d73a49', '#ff7b72')};
+      }
+
+      .hljs-number,
+      .hljs-string,
+      .hljs-meta .hljs-meta-string,
+      .hljs-literal,
+      .hljs-doctag,
+      .hljs-regexp {
+        color: ${cssManager.bdTheme('#032f62', '#a5d6ff')};
+      }
+
+      .hljs-title,
+      .hljs-section,
+      .hljs-name,
+      .hljs-selector-id,
+      .hljs-selector-class {
+        color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
+      }
+
+      .hljs-attribute,
+      .hljs-attr,
+      .hljs-variable,
+      .hljs-template-variable,
+      .hljs-class .hljs-title,
+      .hljs-type {
+        color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
+      }
+
+      .hljs-symbol,
+      .hljs-bullet,
+      .hljs-subst,
+      .hljs-meta,
+      .hljs-meta .hljs-keyword,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo,
+      .hljs-link {
+        color: ${cssManager.bdTheme('#e36209', '#ffa657')};
+      }
+
+      .hljs-built_in,
+      .hljs-deletion {
+        color: ${cssManager.bdTheme('#b31d28', '#ffa198')};
+      }
+
+      .hljs-formula {
+        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
+      }
+
+      .hljs-emphasis {
+        font-style: italic;
+      }
+
+      .hljs-strong {
+        font-weight: bold;
+      }
+    `,
+  ];
 
   // INSTANCE
   private outlet: HTMLElement;
 
   public render(): TemplateResult {
     return html`
-      <div class="outlet markdown-body">
-        <h1>Hi there</h1>
+      <div class="outlet">
+        <h1>Markdown Preview</h1>
+        <p>Content will appear here when markdown is parsed.</p>
       </div>
     `;
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedProperties);
-    const styleElement = document.createElement('style');
-    const cssText = await (
-      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
-    ).text();
-    styleElement.textContent = cssText;
-    this.shadowRoot.append(styleElement);
+    this.outlet = this.shadowRoot.querySelector('.outlet');
   }
 
   public async updateHtmlText(htmlTextArg: string) {

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

@@ -55,6 +55,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
   private fitAddon: FitAddon | null = null;
   private lastLineCount: number = 0;
   private resizeObserver: ResizeObserver | null = null;
+  private terminalThemeSubscription: any = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -69,8 +70,8 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
         height: 100%;
         border-radius: 8px;
         overflow: hidden;
-        background: #000000;
-        border: 1px solid hsl(0 0% 20%);
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
         display: flex;
         flex-direction: column;
       }
@@ -80,20 +81,20 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
         align-items: center;
         gap: 8px;
         padding: 8px 12px;
-        background: hsl(0 0% 10%);
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
         font-size: 12px;
         font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        color: hsl(0 0% 60%);
-        border-bottom: 1px solid hsl(0 0% 20%);
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
         flex-shrink: 0;
       }
 
       .terminal-header-icon {
-        color: hsl(0 0% 50%);
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
       }
 
       .terminal-header-command {
-        color: hsl(0 0% 80%);
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
         font-weight: 500;
       }
 
@@ -148,8 +149,8 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       }
 
       .xterm .composition-view {
-        background: #000000;
-        color: #fff;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
         display: none;
         position: absolute;
         white-space: nowrap;
@@ -161,7 +162,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       }
 
       .xterm .xterm-viewport {
-        background-color: #000000;
+        background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
         overflow-y: scroll;
         cursor: default;
         position: absolute;
@@ -243,16 +244,16 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-track {
-        background: hsl(0 0% 8%);
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-        background: hsl(0 0% 25%);
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')};
         border-radius: 4px;
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-        background: hsl(0 0% 35%);
+        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 35%)')};
       }
     `,
   ];
@@ -271,6 +272,27 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
     `;
   }
 
+  /**
+   * Get terminal theme colors based on bright/dark mode
+   */
+  private getTerminalTheme(isBright: boolean) {
+    return isBright
+      ? {
+          background: '#ffffff',
+          foreground: '#333333',
+          cursor: '#333333',
+          cursorAccent: '#ffffff',
+          selectionBackground: 'rgba(0, 0, 0, 0.2)',
+        }
+      : {
+          background: '#000000',
+          foreground: '#cccccc',
+          cursor: '#cccccc',
+          cursorAccent: '#000000',
+          selectionBackground: 'rgba(255, 255, 255, 0.2)',
+        };
+  }
+
   public async firstUpdated(
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
@@ -279,6 +301,10 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
     const container = this.shadowRoot?.getElementById('xterm-container');
     if (!container) return;
 
+    // Get current theme from domtools
+    const domtoolsInstance = await this.domtoolsPromise;
+    const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+
     // Create xterm terminal in read-only mode
     this.terminal = new Terminal({
       convertEol: true,
@@ -286,13 +312,17 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       disableStdin: true,
       fontSize: 12,
       fontFamily: "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace",
-      theme: {
-        background: '#000000',
-        foreground: '#cccccc',
-      },
+      theme: this.getTerminalTheme(isBright),
       scrollback: 1000,
     });
 
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme(goBright);
+      }
+    });
+
     this.fitAddon = new FitAddon();
     this.terminal.loadAddon(this.fitAddon);
     this.terminal.open(container);
@@ -334,6 +364,10 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
     }
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+      this.terminalThemeSubscription = null;
+    }
     if (this.terminal) {
       this.terminal.dispose();
       this.terminal = null;

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

@@ -6,6 +6,7 @@ import {
   type TemplateResult,
   css,
   cssManager,
+  state,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
@@ -14,6 +15,13 @@ import { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../../00theme.js';
 import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
+import '../../dees-icon/dees-icon.js';
+import { TerminalTabManager } from './terminal-tab-manager.js';
+import type {
+  ITerminalTab,
+  ICreateTerminalTabOptions,
+  TTerminalTabType,
+} from './interfaces.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,6 +38,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
+  private tabManager: TerminalTabManager;
 
   /**
    * The execution environment (required).
@@ -39,7 +48,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
   accessor executionEnvironment: IExecutionEnvironment | null = null;
 
   @property()
-  accessor setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
+  accessor setupCommand = '';
 
   /**
    * Environment variables to set in the shell
@@ -47,8 +56,28 @@ export class DeesWorkspaceTerminal extends DeesElement {
   @property()
   accessor environmentVariables: { [key: string]: string } = {};
 
-  @property()
-  accessor background: string = '#000000';
+  /**
+   * Width of the tab bar in pixels
+   */
+  @property({ type: Number })
+  accessor tabBarWidth: number = 160;
+
+  /**
+   * Whether to show the tab bar
+   */
+  @property({ type: Boolean })
+  accessor showTabBar: boolean = true;
+
+  // Tab state
+  @state()
+  accessor tabs: ITerminalTab[] = [];
+
+  @state()
+  accessor activeTabId: string | null = null;
+
+  // Theme subscription for dynamic theme updates
+  private terminalThemeSubscription: any = null;
+  private isBright: boolean = false;
 
   /**
    * Promise that resolves when the environment is ready.
@@ -59,12 +88,9 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
   constructor() {
     super();
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        // Handle the resize event
-        console.log(`Terminal Resized`);
-        this.handleResize();
-      }
+    this.tabManager = new TerminalTabManager();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize();
     });
   }
 
@@ -72,61 +98,192 @@ export class DeesWorkspaceTerminal extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        padding: 20px;
-        background: var(--dees-terminal-background, #000000);
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
         position: absolute;
         height: 100%;
         width: 100%;
+        display: flex;
+        flex-direction: row;
       }
 
       * {
         box-sizing: border-box;
       }
 
-      #container {
-        position: absolute;
-        height: calc(100% - 40px);
-        width: calc(100% - 40px);
+      .terminal-container {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
       }
-      /**
-      * Copyright (c) 2014 The xterm.js authors. All rights reserved.
-      * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
-      * https://github.com/chjj/term.js
-      * @license MIT
-      *
-      * Permission is hereby granted, free of charge, to any person obtaining a copy
-      * of this software and associated documentation files (the "Software"), to deal
-      * in the Software without restriction, including without limitation the rights
-      * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-      * copies of the Software, and to permit persons to whom the Software is
-      * furnished to do so, subject to the following conditions:
-      *
-      * The above copyright notice and this permission notice shall be included in
-      * all copies or substantial portions of the Software.
-      *
-      * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-      * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-      * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-      * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-      * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-      * THE SOFTWARE.
-      *
-      * Originally forked from (with the author's permission):
-      *   Fabrice Bellard's javascript vt100 for jslinux:
-      *   http://bellard.org/jslinux/
-      *   Copyright (c) 2011 Fabrice Bellard
-      *   The original design remains. The terminal itself
-      *   has been extended to include xterm CSI codes, among
-      *   other features.
-      */
 
-      /**
-      *  Default styles for xterm.js
-      */
+      .terminal-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+      }
 
+      #active-terminal-container {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+      }
+
+      /* Tab bar on the right side */
+      .tab-bar {
+        display: flex;
+        flex-direction: column;
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 7%)')};
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .tab-bar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      }
+
+      .tab-bar-title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tab-bar-actions {
+        display: flex;
+        gap: 2px;
+      }
+
+      .tab-action {
+        width: 22px;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+        transition: all 0.15s ease;
+      }
+
+      .tab-action:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 15%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+      }
+
+      .tab-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px;
+      }
+
+      .terminal-tab {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        margin-bottom: 2px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        transition: all 0.15s ease;
+      }
+
+      .terminal-tab:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 80%)')};
+      }
+
+      .terminal-tab.active {
+        background: ${cssManager.bdTheme('hsl(210 100% 95%)', 'hsl(210 30% 15%)')};
+        color: ${cssManager.bdTheme('hsl(210 100% 40%)', 'hsl(210 100% 70%)')};
+      }
+
+      .terminal-tab.exited {
+        opacity: 0.7;
+      }
+
+      .tab-icon {
+        flex-shrink: 0;
+      }
+
+      .tab-icon.running {
+        color: ${cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)')};
+      }
+
+      .tab-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .exit-badge {
+        font-size: 10px;
+        padding: 1px 5px;
+        border-radius: 8px;
+        font-weight: 600;
+        flex-shrink: 0;
+      }
+
+      .exit-badge.success {
+        background: ${cssManager.bdTheme('hsl(142 70% 90%)', 'hsl(142 30% 20%)')};
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 60%)')};
+      }
+
+      .exit-badge.error {
+        background: ${cssManager.bdTheme('hsl(0 70% 93%)', 'hsl(0 30% 20%)')};
+        color: ${cssManager.bdTheme('hsl(0 70% 45%)', 'hsl(0 70% 60%)')};
+      }
+
+      .tab-close {
+        width: 18px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        opacity: 0;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .terminal-tab:hover .tab-close {
+        opacity: 0.6;
+      }
+
+      .tab-close:hover {
+        opacity: 1 !important;
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        font-size: 13px;
+        gap: 8px;
+      }
+
+      /* xterm.js styles */
       .xterm {
         font-feature-settings: 'liga' 0;
         position: relative;
@@ -143,10 +300,6 @@ export class DeesWorkspaceTerminal extends DeesElement {
       .xterm .xterm-helpers {
         position: absolute;
         top: 0;
-        /**
-          * The z-index of the helpers must be higher than the canvases in order for
-          * IMEs to appear on top.
-          */
         z-index: 5;
       }
 
@@ -154,7 +307,6 @@ export class DeesWorkspaceTerminal extends DeesElement {
         padding: 0;
         border: 0;
         margin: 0;
-        /* Move textarea out of the screen to the far left, so that the cursor is not visible */
         position: absolute;
         opacity: 0;
         left: -9999em;
@@ -162,16 +314,14 @@ export class DeesWorkspaceTerminal extends DeesElement {
         width: 0;
         height: 0;
         z-index: -5;
-        /** Prevent wrapping so the IME appears against the textarea at the correct position */
         white-space: nowrap;
         overflow: hidden;
         resize: none;
       }
 
       .xterm .composition-view {
-        /* TODO: Composition position got messed up somewhere */
-        background: var(--dees-terminal-background, #000000);
-        color: #fff;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
         display: none;
         position: absolute;
         white-space: nowrap;
@@ -183,8 +333,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
       }
 
       .xterm .xterm-viewport {
-        /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: var(--dees-terminal-background, #000000);
+        background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
         overflow-y: scroll;
         cursor: default;
         position: absolute;
@@ -222,7 +371,6 @@ export class DeesWorkspaceTerminal extends DeesElement {
       }
 
       .xterm.enable-mouse-events {
-        /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
         cursor: default;
       }
 
@@ -231,7 +379,6 @@ export class DeesWorkspaceTerminal extends DeesElement {
       }
 
       .xterm.column-select.focus {
-        /* Column selection mode */
         cursor: crosshair;
       }
 
@@ -265,115 +412,81 @@ export class DeesWorkspaceTerminal extends DeesElement {
   ];
 
   public render(): TemplateResult {
+    const activeTab = this.activeTabId ? this.tabManager.getTab(this.activeTabId) : null;
+
     return html`
-      <div class="mainbox">
-        <div id="container"></div>
+      <div class="terminal-container">
+        <!-- Main terminal area -->
+        <div class="terminal-content">
+          ${activeTab ? html`
+            <div id="active-terminal-container"></div>
+          ` : html`
+            <div class="empty-state">
+              <dees-icon .icon=${'lucide:terminal'} iconSize="32"></dees-icon>
+              <span>No terminal open</span>
+            </div>
+          `}
+        </div>
+
+        <!-- Vertical tab bar on the right -->
+        ${this.showTabBar ? html`
+          <div class="tab-bar" style="width: ${this.tabBarWidth}px">
+            <div class="tab-bar-header">
+              <span class="tab-bar-title">Terminals</span>
+              <div class="tab-bar-actions">
+                <div class="tab-action" @click=${this.handleAddTab} title="New Terminal">
+                  <dees-icon .icon=${'lucide:plus'} iconSize="14"></dees-icon>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-list">
+              ${this.tabs.map(tab => html`
+                <div
+                  class="terminal-tab ${tab.id === this.activeTabId ? 'active' : ''} ${tab.exited ? 'exited' : ''}"
+                  @click=${() => this.switchToTab(tab.id)}
+                >
+                  <dees-icon
+                    .icon=${tab.iconName}
+                    iconSize="14"
+                    class="tab-icon ${tab.process && !tab.exited ? 'running' : ''}"
+                  ></dees-icon>
+                  <span class="tab-label">${tab.label}</span>
+                  ${tab.exited ? html`
+                    <span class="exit-badge ${tab.exitCode === 0 ? 'success' : 'error'}">
+                      ${tab.exitCode}
+                    </span>
+                  ` : ''}
+                  ${tab.closeable ? html`
+                    <span class="tab-close" @click=${(e: Event) => this.handleTabClose(e, tab.id)}>
+                      <dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
+                    </span>
+                  ` : ''}
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : ''}
       </div>
     `;
   }
 
-  private fitAddon: FitAddon;
-  private terminal: Terminal | null = null;
+  public async firstUpdated(): Promise<void> {
+    const domtoolsInstance = await this.domtoolsPromise;
 
-  public async firstUpdated(
-    _changedProperties: Map<string | number | symbol, unknown>
-  ): Promise<void> {
-    const domtools = await this.domtoolsPromise;
-    super.firstUpdated(_changedProperties);
+    // Get current theme
+    this.isBright = domtoolsInstance.themeManager.goBrightBoolean;
 
-    // Sync CSS variable with background property
-    this.style.setProperty('--dees-terminal-background', this.background);
-
-    const container = this.shadowRoot.getElementById('container');
-
-    const term = new Terminal({
-      convertEol: true,
-      cursorBlink: true,
-      theme: {
-        background: this.background,
-      },
-    });
-    this.terminal = term;
-    this.fitAddon = new FitAddon();
-    term.loadAddon(this.fitAddon);
-
-    // Open the terminal in #terminal-container
-    term.open(container);
-
-    // Make the terminal's size and geometry fit the size of #terminal-container
-    this.fitAddon.fit();
-
-    // Check if execution environment is provided
-    if (!this.executionEnvironment) {
-      term.write('\x1b[31m');  // Red color
-      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
-      term.write('  ❌ No execution environment provided.\r\n');
-      term.write('\r\n');
-      term.write('  Pass an IExecutionEnvironment via the\r\n');
-      term.write('  \'executionEnvironment\' property.\r\n');
-      term.write('\r\n');
-      term.write('  Example:\r\n');
-      term.write('    const env = new WebContainerEnvironment();\r\n');
-      term.write('    <dees-terminal .executionEnvironment=${env}>\r\n');
-      term.write('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n');
-      term.write('\x1b[0m');  // Reset color
-      return;
-    }
-
-    term.write('Initializing execution environment...\r\n');
-
-    // Initialize the execution environment
-    try {
-      await this.executionEnvironment.init();
-      term.write('Environment ready. Starting shell...\r\n');
-    } catch (error) {
-      term.write('\x1b[31m');  // Red color
-      term.write(`\r\n❌ Failed to initialize environment: ${error}\r\n`);
-      term.write('\x1b[0m');  // Reset color
-      console.error('Failed to initialize execution environment:', error);
-      return;
-    }
-
-    // Spawn shell process
-    let shellProcess;
-    try {
-      shellProcess = await this.executionEnvironment.spawn('jsh');
-    } catch (error) {
-      term.write('\x1b[31m');  // Red color
-      term.write(`\r\n❌ Failed to spawn shell: ${error}\r\n`);
-      term.write('\x1b[0m');  // Reset color
-      console.error('Failed to spawn shell:', error);
-      return;
-    }
-    shellProcess.output.pipeTo(
-      new WritableStream({
-        write(data) {
-          term.write(data);
-        },
-      })
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
+      (goBright: boolean) => {
+        this.isBright = goBright;
+        this.tabManager.updateAllThemes(goBright);
+      }
     );
-    const input = shellProcess.input.getWriter();
-    term.onData((data) => {
-      input.write(data);
-    });
 
-    await this.waitForPrompt(term, '~/');
-
-    // Set environment variables if provided
-    if (Object.keys(this.environmentVariables).length > 0) {
-      await this.setEnvironmentVariables(this.environmentVariables);
-      input.write(`source source.env\n`);
-      await this.waitForPrompt(term, '~/');
-    }
-
-    // Run setup command if provided
-    if (this.setupCommand) {
-      input.write(this.setupCommand);
-      await this.waitForPrompt(term, '~/');
-    }
-
-    input.write(`clear && echo 'Terminal ready.'\n`);
-    this.environmentDeferred.resolve(this.executionEnvironment);
+    // Create default shell tab
+    await this.createShellTab();
   }
 
   async connectedCallback(): Promise<void> {
@@ -383,13 +496,328 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
   async disconnectedCallback(): Promise<void> {
     this.resizeObserver.unobserve(this);
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+      this.terminalThemeSubscription = null;
+    }
+    this.tabManager.disposeAll();
     await super.disconnectedCallback();
   }
 
-  handleResize() {
-    this.fitAddon.fit();
+  // ========== Tab Management ==========
+
+  private async handleAddTab(): Promise<void> {
+    await this.createShellTab();
   }
 
+  private handleTabClose(e: Event, tabId: string): void {
+    e.stopPropagation();
+    this.closeTab(tabId);
+  }
+
+  private switchToTab(tabId: string): void {
+    if (tabId === this.activeTabId) return;
+
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return;
+
+    const previousTabId = this.activeTabId;
+
+    // Detach current terminal from DOM
+    if (this.activeTabId) {
+      this.detachActiveTerminal();
+    }
+
+    // Update active tab
+    this.activeTabId = tabId;
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Wait for render then attach new terminal
+    this.updateComplete.then(() => {
+      this.attachTerminalToContainer(tab);
+
+      // Dispatch event
+      this.dispatchEvent(
+        new CustomEvent('tab-switched', {
+          bubbles: true,
+          composed: true,
+          detail: { tabId, previousTabId },
+        })
+      );
+    });
+  }
+
+  private detachActiveTerminal(): void {
+    const container = this.shadowRoot?.getElementById('active-terminal-container');
+    if (container) {
+      container.innerHTML = '';
+    }
+  }
+
+  private attachTerminalToContainer(tab: ITerminalTab): void {
+    const container = this.shadowRoot?.getElementById('active-terminal-container');
+    if (!container) return;
+
+    // Clear container
+    container.innerHTML = '';
+
+    // Open terminal in container
+    tab.terminal.open(container);
+    tab.fitAddon.fit();
+    tab.terminal.focus();
+  }
+
+  private handleResize(): void {
+    if (this.activeTabId) {
+      const tab = this.tabManager.getTab(this.activeTabId);
+      if (tab) {
+        tab.fitAddon.fit();
+      }
+    }
+  }
+
+  // ========== Process Management ==========
+
+  private async spawnProcessForTab(
+    tab: ITerminalTab,
+    command: string,
+    args: string[] = []
+  ): Promise<void> {
+    if (!this.executionEnvironment) {
+      tab.terminal.write('\x1b[31m');
+      tab.terminal.write('❌ No execution environment available.\r\n');
+      tab.terminal.write('\x1b[0m');
+      return;
+    }
+
+    try {
+      // Initialize environment if needed
+      if (!this.executionEnvironment.ready) {
+        tab.terminal.write('Initializing environment...\r\n');
+        await this.executionEnvironment.init();
+      }
+
+      // Spawn process
+      const process = await this.executionEnvironment.spawn(command, args);
+
+      // Set up output piping
+      process.output.pipeTo(
+        new WritableStream({
+          write: (data) => {
+            tab.terminal.write(data);
+          },
+        })
+      );
+
+      // Set up input for interactive processes
+      const inputWriter = process.input.getWriter();
+      tab.terminal.onData((data) => {
+        inputWriter.write(data);
+      });
+
+      // Store process reference
+      this.tabManager.setTabProcess(tab.id, process, inputWriter);
+      this.tabs = this.tabManager.getAllTabs();
+
+      // Handle process exit
+      process.exit.then((exitCode) => {
+        this.handleProcessExit(tab.id, exitCode);
+      });
+    } catch (error) {
+      tab.terminal.write('\x1b[31m');
+      tab.terminal.write(`❌ Failed to spawn process: ${error}\r\n`);
+      tab.terminal.write('\x1b[0m');
+      console.error('Failed to spawn process:', error);
+    }
+  }
+
+  private handleProcessExit(tabId: string, exitCode: number): void {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return;
+
+    // Update tab state
+    this.tabManager.markTabExited(tabId, exitCode);
+
+    // Write exit message to terminal
+    const message =
+      exitCode === 0
+        ? '\r\n\x1b[32m[Process completed successfully]\x1b[0m\r\n'
+        : `\r\n\x1b[31m[Process exited with code ${exitCode}]\x1b[0m\r\n`;
+    tab.terminal.write(message);
+
+    // Update state to trigger re-render
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('process-complete', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId, exitCode },
+      })
+    );
+  }
+
+  // ========== Public API ==========
+
+  /**
+   * Create a new shell tab
+   */
+  public async createShellTab(label?: string): Promise<string> {
+    const tab = this.tabManager.createTab(
+      {
+        type: 'shell',
+        label: label || `bash ${this.tabManager.getTabCount() + 1}`,
+        closeable: this.tabManager.getTabCount() > 0, // First tab not closeable
+      },
+      this.isBright
+    );
+
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Switch to new tab
+    this.switchToTab(tab.id);
+
+    // Wait for DOM update then spawn shell
+    await this.updateComplete;
+    await this.spawnProcessForTab(tab, 'jsh');
+
+    // Run setup command if this is the first tab
+    if (this.tabManager.getTabCount() === 1 && this.setupCommand) {
+      await this.waitForPrompt(tab.terminal, '~/');
+      if (tab.inputWriter) {
+        tab.inputWriter.write(this.setupCommand);
+      }
+    }
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-created', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId: tab.id },
+      })
+    );
+
+    return tab.id;
+  }
+
+  /**
+   * Create a terminal tab for running a process
+   */
+  public async createProcessTab(options: ICreateTerminalTabOptions): Promise<string> {
+    const tab = this.tabManager.createTab(options, this.isBright);
+
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Switch to new tab if requested (default: true)
+    if (options.switchToTab !== false) {
+      this.switchToTab(tab.id);
+    }
+
+    // Wait for DOM update
+    await this.updateComplete;
+
+    // Spawn process if command provided
+    if (options.command) {
+      await this.spawnProcessForTab(tab, options.command, options.args);
+    }
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-created', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId: tab.id },
+      })
+    );
+
+    return tab.id;
+  }
+
+  /**
+   * Get the currently active tab
+   */
+  public getActiveTab(): ITerminalTab | null {
+    if (!this.activeTabId) return null;
+    return this.tabManager.getTab(this.activeTabId) || null;
+  }
+
+  /**
+   * Get all tabs
+   */
+  public getTabs(): ITerminalTab[] {
+    return this.tabManager.getAllTabs();
+  }
+
+  /**
+   * Switch to a specific tab by ID
+   */
+  public selectTab(tabId: string): boolean {
+    if (!this.tabManager.hasTab(tabId)) return false;
+    this.switchToTab(tabId);
+    return true;
+  }
+
+  /**
+   * Close a tab by ID
+   */
+  public closeTab(tabId: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab || !tab.closeable) return false;
+
+    // If closing active tab, switch to another
+    if (tabId === this.activeTabId) {
+      const allTabs = this.tabManager.getAllTabs();
+      const currentIndex = allTabs.findIndex((t) => t.id === tabId);
+      const nextTab = allTabs[currentIndex + 1] || allTabs[currentIndex - 1];
+
+      if (nextTab) {
+        this.switchToTab(nextTab.id);
+      } else {
+        this.activeTabId = null;
+        this.detachActiveTerminal();
+      }
+    }
+
+    // Close the tab
+    this.tabManager.closeTab(tabId);
+    this.tabs = this.tabManager.getAllTabs();
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('tab-closed', {
+        bubbles: true,
+        composed: true,
+        detail: { tabId },
+      })
+    );
+
+    return true;
+  }
+
+  /**
+   * Write data to a tab's terminal
+   */
+  public writeToTab(tabId: string, data: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab) return false;
+    tab.terminal.write(data);
+    return true;
+  }
+
+  /**
+   * Send input to a tab's process (if interactive)
+   */
+  public sendInputToTab(tabId: string, data: string): boolean {
+    const tab = this.tabManager.getTab(tabId);
+    if (!tab || !tab.inputWriter) return false;
+    tab.inputWriter.write(data);
+    return true;
+  }
+
+  // ========== Utility Methods ==========
+
   public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
     return new Promise<void>((resolve) => {
       const checkPrompt = () => {
@@ -403,9 +831,9 @@ export class DeesWorkspaceTerminal extends DeesElement {
             return;
           }
         }
-        setTimeout(checkPrompt, 100); // check every 100 ms
+        setTimeout(checkPrompt, 100);
       };
-  
+
       checkPrompt();
     });
   }
@@ -420,13 +848,11 @@ export class DeesWorkspaceTerminal extends DeesElement {
       envFile += `export ${key}="${envArg[key]}"\n`;
     }
 
-    // Write the environment file using the filesystem API
     await this.executionEnvironment.writeFile('/source.env', envFile);
   }
 
   /**
    * Get the underlying execution environment.
-   * Useful for advanced operations like filesystem access.
    */
   public getExecutionEnvironment(): IExecutionEnvironment | null {
     return this.executionEnvironment;

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

@@ -1 +1,3 @@
 export * from './dees-workspace-terminal.js';
+export * from './interfaces.js';
+export * from './terminal-tab-manager.js';

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

@@ -0,0 +1,126 @@
+import type { Terminal } from 'xterm';
+import type { FitAddon } from 'xterm-addon-fit';
+import type { IProcessHandle } from '../../00group-runtime/index.js';
+
+/**
+ * Type of terminal tab based on its source/purpose
+ */
+export type TTerminalTabType =
+  | 'shell'           // Default interactive shell (jsh)
+  | 'script'          // Script from package.json
+  | 'package-update'  // Package update process
+  | 'custom';         // External process from API
+
+/**
+ * Represents a single terminal tab instance
+ */
+export interface ITerminalTab {
+  /** Unique identifier for the tab */
+  id: string;
+
+  /** Display label for the tab */
+  label: string;
+
+  /** Icon name (lucide icon) */
+  iconName: string;
+
+  /** Type of terminal process */
+  type: TTerminalTabType;
+
+  /** Whether the tab can be closed */
+  closeable: boolean;
+
+  /** xterm.js Terminal instance */
+  terminal: Terminal;
+
+  /** FitAddon for this terminal */
+  fitAddon: FitAddon;
+
+  /** Process handle (if process is running) */
+  process: IProcessHandle | null;
+
+  /** Process input writer (for interactive terminals) */
+  inputWriter: WritableStreamDefaultWriter<string> | null;
+
+  /** Whether the process has exited */
+  exited: boolean;
+
+  /** Exit code (if process has exited) */
+  exitCode: number | null;
+
+  /** Timestamp when tab was created */
+  createdAt: number;
+
+  /** Optional metadata for script tabs */
+  metadata?: {
+    scriptName?: string;
+    packageName?: string;
+    command?: string;
+  };
+}
+
+/**
+ * Options for creating a new terminal tab
+ */
+export interface ICreateTerminalTabOptions {
+  /** Display label (auto-generated if not provided) */
+  label?: string;
+
+  /** Tab type */
+  type: TTerminalTabType;
+
+  /** Icon name override */
+  iconName?: string;
+
+  /** Whether the tab can be closed (default: true for non-shell) */
+  closeable?: boolean;
+
+  /** Command to spawn (default: 'jsh' for shell type) */
+  command?: string;
+
+  /** Command arguments */
+  args?: string[];
+
+  /** Additional metadata */
+  metadata?: ITerminalTab['metadata'];
+
+  /** Whether to switch to this tab after creation (default: true) */
+  switchToTab?: boolean;
+}
+
+/**
+ * Event detail for terminal tab events
+ */
+export interface ITerminalTabEventDetail {
+  tabId: string;
+}
+
+/**
+ * Event detail for tab switch events
+ */
+export interface ITerminalTabSwitchEventDetail {
+  tabId: string;
+  previousTabId: string | null;
+}
+
+/**
+ * Event detail for process completion
+ */
+export interface ITerminalProcessCompleteEventDetail {
+  tabId: string;
+  exitCode: number;
+}
+
+/**
+ * Event detail for run-process events from bottom bar
+ */
+export interface IRunProcessEventDetail {
+  type: TTerminalTabType;
+  label: string;
+  command: string;
+  args?: string[];
+  metadata?: {
+    scriptName?: string;
+    packageName?: string;
+  };
+}

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

@@ -0,0 +1,243 @@
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import type { ITerminalTab, ICreateTerminalTabOptions, TTerminalTabType } from './interfaces.js';
+
+/**
+ * Manages terminal tabs lifecycle and state
+ */
+export class TerminalTabManager {
+  private tabs: Map<string, ITerminalTab> = new Map();
+  private tabCounter: number = 0;
+
+  /**
+   * Generate unique tab ID
+   */
+  private generateTabId(): string {
+    this.tabCounter++;
+    return `terminal-${this.tabCounter}-${Date.now()}`;
+  }
+
+  /**
+   * Get default label for tab type
+   */
+  private getDefaultLabel(type: TTerminalTabType, metadata?: ITerminalTab['metadata']): string {
+    switch (type) {
+      case 'shell':
+        return 'bash';
+      case 'script':
+        return metadata?.scriptName || 'script';
+      case 'package-update':
+        return metadata?.packageName ? `update ${metadata.packageName}` : 'update';
+      case 'custom':
+        return metadata?.command || 'process';
+      default:
+        return 'terminal';
+    }
+  }
+
+  /**
+   * Get default icon for tab type
+   */
+  private getDefaultIcon(type: TTerminalTabType): string {
+    switch (type) {
+      case 'shell':
+        return 'lucide:terminal';
+      case 'script':
+        return 'lucide:play';
+      case 'package-update':
+        return 'lucide:packageCheck';
+      case 'custom':
+        return 'lucide:code';
+      default:
+        return 'lucide:terminal';
+    }
+  }
+
+  /**
+   * Get terminal theme configuration
+   */
+  private getTerminalTheme(isBright: boolean): any {
+    if (isBright) {
+      return {
+        background: '#ffffff',
+        foreground: '#333333',
+        cursor: '#333333',
+        cursorAccent: '#ffffff',
+        selection: 'rgba(0, 0, 0, 0.2)',
+        black: '#000000',
+        red: '#cd3131',
+        green: '#00bc00',
+        yellow: '#949800',
+        blue: '#0451a5',
+        magenta: '#bc05bc',
+        cyan: '#0598bc',
+        white: '#555555',
+        brightBlack: '#666666',
+        brightRed: '#cd3131',
+        brightGreen: '#14ce14',
+        brightYellow: '#b5ba00',
+        brightBlue: '#0451a5',
+        brightMagenta: '#bc05bc',
+        brightCyan: '#0598bc',
+        brightWhite: '#a5a5a5',
+      };
+    } else {
+      return {
+        background: '#000000',
+        foreground: '#ffffff',
+        cursor: '#ffffff',
+        cursorAccent: '#000000',
+        selection: 'rgba(255, 255, 255, 0.2)',
+      };
+    }
+  }
+
+  /**
+   * Create a new tab instance
+   */
+  createTab(options: ICreateTerminalTabOptions, isBright: boolean): ITerminalTab {
+    const id = this.generateTabId();
+    const type = options.type;
+
+    // Create xterm.js Terminal instance
+    const terminal = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+      theme: this.getTerminalTheme(isBright),
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      fontSize: 13,
+      lineHeight: 1.2,
+    });
+
+    // Create FitAddon
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+
+    const tab: ITerminalTab = {
+      id,
+      label: options.label || this.getDefaultLabel(type, options.metadata),
+      iconName: options.iconName || this.getDefaultIcon(type),
+      type,
+      closeable: options.closeable ?? (type !== 'shell'),
+      terminal,
+      fitAddon,
+      process: null,
+      inputWriter: null,
+      exited: false,
+      exitCode: null,
+      createdAt: Date.now(),
+      metadata: options.metadata,
+    };
+
+    this.tabs.set(id, tab);
+    return tab;
+  }
+
+  /**
+   * Get tab by ID
+   */
+  getTab(id: string): ITerminalTab | undefined {
+    return this.tabs.get(id);
+  }
+
+  /**
+   * Get all tabs as array (ordered by creation time)
+   */
+  getAllTabs(): ITerminalTab[] {
+    return Array.from(this.tabs.values()).sort((a, b) => a.createdAt - b.createdAt);
+  }
+
+  /**
+   * Get the number of tabs
+   */
+  getTabCount(): number {
+    return this.tabs.size;
+  }
+
+  /**
+   * Check if tab exists
+   */
+  hasTab(id: string): boolean {
+    return this.tabs.has(id);
+  }
+
+  /**
+   * Close and cleanup a tab
+   */
+  closeTab(id: string): boolean {
+    const tab = this.tabs.get(id);
+    if (!tab) return false;
+
+    // Kill process if still running
+    if (tab.process && !tab.exited) {
+      try {
+        tab.process.kill();
+      } catch (e) {
+        console.warn('Failed to kill process:', e);
+      }
+    }
+
+    // Dispose terminal
+    try {
+      tab.terminal.dispose();
+    } catch (e) {
+      console.warn('Failed to dispose terminal:', e);
+    }
+
+    this.tabs.delete(id);
+    return true;
+  }
+
+  /**
+   * Rename a tab
+   */
+  renameTab(id: string, newLabel: string): boolean {
+    const tab = this.tabs.get(id);
+    if (!tab) return false;
+
+    tab.label = newLabel;
+    return true;
+  }
+
+  /**
+   * Update tab process state to exited
+   */
+  markTabExited(id: string, exitCode: number): void {
+    const tab = this.tabs.get(id);
+    if (!tab) return;
+
+    tab.exited = true;
+    tab.exitCode = exitCode;
+  }
+
+  /**
+   * Set process for a tab
+   */
+  setTabProcess(id: string, process: ITerminalTab['process'], inputWriter: ITerminalTab['inputWriter']): void {
+    const tab = this.tabs.get(id);
+    if (!tab) return;
+
+    tab.process = process;
+    tab.inputWriter = inputWriter;
+  }
+
+  /**
+   * Update theme for all terminals
+   */
+  updateAllThemes(isBright: boolean): void {
+    const theme = this.getTerminalTheme(isBright);
+    for (const tab of this.tabs.values()) {
+      tab.terminal.options.theme = theme;
+    }
+  }
+
+  /**
+   * Dispose all tabs and cleanup
+   */
+  disposeAll(): void {
+    for (const [id] of this.tabs) {
+      this.closeTab(id);
+    }
+    this.tabs.clear();
+  }
+}

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

@@ -17,11 +17,15 @@ import '../dees-workspace-monaco/dees-workspace-monaco.js';
 import '../dees-workspace-filetree/dees-workspace-filetree.js';
 import { DeesWorkspaceFiletree } from '../dees-workspace-filetree/dees-workspace-filetree.js';
 import '../dees-workspace-terminal/dees-workspace-terminal.js';
+import { DeesWorkspaceTerminal } from '../dees-workspace-terminal/dees-workspace-terminal.js';
+import type { IRunProcessEventDetail } from '../dees-workspace-terminal/interfaces.js';
 import '../dees-workspace-terminal-preview/dees-workspace-terminal-preview.js';
+import '../dees-workspace-bottombar/dees-workspace-bottombar.js';
 import '../../dees-icon/dees-icon.js';
 import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
 import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '@design.estate/dees-wcctools/demotools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -61,6 +65,7 @@ export class DeesWorkspace extends DeesElement {
                   '@push.rocks/smartpromise': '^4.2.3',
                 },
                 devDependencies: {
+                  '@types/node': '^22.0.0',
                   typescript: '^5.0.0',
                 },
               },
@@ -174,13 +179,19 @@ testSmartPromise();
       await env.mount(fileTree);
     })();
 
+    // Create container element for proper 100% height like dees-appui-base
+    const containerElement = document.createElement('div');
+    containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';
+
+    const workspaceElement = document.createElement('dees-workspace') as DeesWorkspace;
+    workspaceElement.executionEnvironment = env;
+    workspaceElement.initializationPromise = mountPromise;
+    containerElement.appendChild(workspaceElement);
+
     return html`
-      <div style="width: 100%; height: 600px; position: relative;">
-        <dees-workspace
-          .executionEnvironment=${env}
-          .initializationPromise=${mountPromise}
-        ></dees-workspace>
-      </div>
+      <dees-demowrapper>
+        ${containerElement}
+      </dees-demowrapper>
     `;
   };
 
@@ -255,6 +266,19 @@ testSmartPromise();
   @state()
   accessor initOutput: string[] = [];
 
+  // Resize state
+  @state()
+  accessor currentFileTreeWidth: number = 250;
+
+  @state()
+  accessor currentTerminalHeight: number = 200;
+
+  @state()
+  accessor isDraggingFileTree: boolean = false;
+
+  @state()
+  accessor isDraggingTerminal: boolean = false;
+
   // Keyboard shortcut handler (bound for proper cleanup)
   private keydownHandler = (e: KeyboardEvent) => {
     // Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
@@ -270,6 +294,71 @@ testSmartPromise();
     }
   };
 
+  // ========== Filetree Resize Handlers ==========
+  private handleFileTreeMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isDraggingFileTree = true;
+    document.addEventListener('mousemove', this.handleFileTreeMouseMove);
+    document.addEventListener('mouseup', this.handleFileTreeMouseUp);
+  };
+
+  private handleFileTreeMouseMove = (e: MouseEvent) => {
+    if (!this.isDraggingFileTree) return;
+
+    const containerRect = this.getBoundingClientRect();
+    const mouseX = e.clientX - containerRect.left;
+
+    // Clamp to min/max (150px min, 50% of container max)
+    const minWidth = 150;
+    const maxWidth = containerRect.width * 0.5;
+    const newWidth = Math.max(minWidth, Math.min(maxWidth, mouseX));
+
+    this.currentFileTreeWidth = newWidth;
+  };
+
+  private handleFileTreeMouseUp = () => {
+    this.isDraggingFileTree = false;
+    document.removeEventListener('mousemove', this.handleFileTreeMouseMove);
+    document.removeEventListener('mouseup', this.handleFileTreeMouseUp);
+
+    // Notify Monaco editor of size change
+    window.dispatchEvent(new Event('resize'));
+  };
+
+  // ========== Terminal Resize Handlers ==========
+  private handleTerminalMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isDraggingTerminal = true;
+    document.addEventListener('mousemove', this.handleTerminalMouseMove);
+    document.addEventListener('mouseup', this.handleTerminalMouseUp);
+  };
+
+  private handleTerminalMouseMove = (e: MouseEvent) => {
+    if (!this.isDraggingTerminal) return;
+
+    const containerRect = this.getBoundingClientRect();
+    const mouseY = e.clientY - containerRect.top;
+
+    // Calculate terminal height from bottom
+    const terminalHeight = containerRect.height - mouseY;
+
+    // Clamp to min/max (100px min, 70% of container max)
+    const minHeight = 100;
+    const maxHeight = containerRect.height * 0.7;
+    const newHeight = Math.max(minHeight, Math.min(maxHeight, terminalHeight));
+
+    this.currentTerminalHeight = newHeight;
+  };
+
+  private handleTerminalMouseUp = () => {
+    this.isDraggingTerminal = false;
+    document.removeEventListener('mousemove', this.handleTerminalMouseMove);
+    document.removeEventListener('mouseup', this.handleTerminalMouseUp);
+
+    // Notify Monaco editor of size change
+    window.dispatchEvent(new Event('resize'));
+  };
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -285,68 +374,54 @@ testSmartPromise();
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
 
-      .workspace-container {
-        display: grid;
+      .workspace-outer {
+        display: flex;
+        flex-direction: column;
         height: 100%;
         width: 100%;
       }
 
-      .workspace-container.with-filetree.with-terminal {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: 1fr auto;
-        grid-template-areas:
-          "filetree editor"
-          "filetree terminal";
+      .workspace-container {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
+        min-height: 0;
+        width: 100%;
       }
 
-      .workspace-container.with-filetree:not(.with-terminal) {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: 1fr;
-        grid-template-areas: "filetree editor";
-      }
-
-      .workspace-container:not(.with-filetree).with-terminal {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr auto;
-        grid-template-areas:
-          "editor"
-          "terminal";
-      }
-
-      .workspace-container:not(.with-filetree):not(.with-terminal) {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr;
-        grid-template-areas: "editor";
+      .editor-area {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
       }
 
       .filetree-panel {
-        grid-area: filetree;
         position: relative;
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
         overflow: hidden;
-        transition: width 0.2s ease;
+        flex-shrink: 0;
       }
 
       .filetree-panel.collapsed {
         width: 0 !important;
-        border-right: none;
       }
 
       .editor-panel {
-        grid-area: editor;
         position: relative;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        flex: 1;
+        min-width: 200px;
       }
 
       .terminal-panel {
-        grid-area: terminal;
         position: relative;
         border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
         overflow: hidden;
-        transition: height 0.2s ease;
+        flex-shrink: 0;
       }
 
       .terminal-panel.collapsed {
@@ -662,6 +737,7 @@ testSmartPromise();
         margin-top: 24px;
         width: 80%;
         max-width: 600px;
+        height: 200px;
       }
 
       dees-workspace-filetree {
@@ -687,14 +763,96 @@ testSmartPromise();
         right: 0;
         bottom: 0;
       }
+
+      /* Resize handles */
+      .resize-handle-vertical {
+        width: 6px;
+        cursor: col-resize;
+        background: transparent;
+        transition: background 0.15s ease;
+        position: relative;
+        flex-shrink: 0;
+        z-index: 10;
+      }
+
+      .resize-handle-vertical:hover,
+      .resize-handle-vertical.dragging {
+        background: ${cssManager.bdTheme('#3b82f6', '#58a6ff')};
+      }
+
+      .resize-handle-vertical::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 32px;
+        background: ${cssManager.bdTheme('#9ca3af', '#6e7681')};
+        border-radius: 1px;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+      }
+
+      .resize-handle-vertical:hover::after,
+      .resize-handle-vertical.dragging::after {
+        opacity: 1;
+        background: ${cssManager.bdTheme('#ffffff', '#ffffff')};
+      }
+
+      .resize-handle-horizontal {
+        height: 6px;
+        cursor: row-resize;
+        background: transparent;
+        transition: background 0.15s ease;
+        position: relative;
+        flex-shrink: 0;
+        z-index: 10;
+      }
+
+      .resize-handle-horizontal:hover,
+      .resize-handle-horizontal.dragging {
+        background: ${cssManager.bdTheme('#3b82f6', '#58a6ff')};
+      }
+
+      .resize-handle-horizontal::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 32px;
+        height: 2px;
+        background: ${cssManager.bdTheme('#9ca3af', '#6e7681')};
+        border-radius: 1px;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+      }
+
+      .resize-handle-horizontal:hover::after,
+      .resize-handle-horizontal.dragging::after {
+        opacity: 1;
+        background: ${cssManager.bdTheme('#ffffff', '#ffffff')};
+      }
+
+      /* Prevent text selection while dragging */
+      .workspace-container.dragging {
+        user-select: none;
+      }
+
+      .workspace-container.dragging .filetree-panel,
+      .workspace-container.dragging .editor-panel,
+      .workspace-container.dragging .terminal-panel {
+        pointer-events: none;
+      }
+
     `,
   ];
 
   public render(): TemplateResult {
     const containerClasses = [
       'workspace-container',
-      this.showFileTree && !this.isFileTreeCollapsed ? 'with-filetree' : '',
-      this.showTerminal ? 'with-terminal' : '',
+      (this.isDraggingFileTree || this.isDraggingTerminal) ? 'dragging' : '',
     ].filter(Boolean).join(' ');
 
     if (this.isInitializing) {
@@ -702,113 +860,138 @@ testSmartPromise();
         <div class="initializing">
           <dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
           <span>Initializing workspace...</span>
-          ${this.initCommand ? html`
-            <dees-workspace-terminal-preview
-              .command=${this.initCommand}
-              .lines=${this.initOutput}
-            ></dees-workspace-terminal-preview>
-          ` : ''}
+          <dees-workspace-terminal-preview
+            .command=${this.initCommand || ''}
+            .lines=${this.initOutput}
+          ></dees-workspace-terminal-preview>
         </div>
       `;
     }
 
     return html`
-      <div class="${containerClasses}">
-        ${this.showFileTree ? html`
-          <div
-            class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
-            style="width: ${this.isFileTreeCollapsed ? 0 : this.fileTreeWidth}px"
-          >
-            <dees-workspace-filetree
-              .executionEnvironment=${this.executionEnvironment}
-              .selectedPath=${this.activeFilePath}
-              @file-select=${this.handleFileSelect}
-            ></dees-workspace-filetree>
-          </div>
-        ` : ''}
+      <div class="workspace-outer">
+        <div class="${containerClasses}">
+          <!-- Filetree panel (full height) -->
+          ${this.showFileTree ? html`
+            <div
+              class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
+              style="width: ${this.isFileTreeCollapsed ? 0 : this.currentFileTreeWidth}px"
+            >
+              <dees-workspace-filetree
+                .executionEnvironment=${this.executionEnvironment}
+                .selectedPath=${this.activeFilePath}
+                @file-select=${this.handleFileSelect}
+              ></dees-workspace-filetree>
+            </div>
+            ${!this.isFileTreeCollapsed ? html`
+              <div
+                class="resize-handle-vertical ${this.isDraggingFileTree ? 'dragging' : ''}"
+                @mousedown=${this.handleFileTreeMouseDown}
+              ></div>
+            ` : ''}
+          ` : ''}
 
-        <div class="editor-panel">
-          <div class="tabs-bar">
-            <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>
+          <!-- Editor + Terminal area -->
+          <div class="editor-area">
+            <div class="editor-panel">
+              <div class="tabs-bar">
+                <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-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`
-              <div class="empty-state">
-                <dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
-                <span>Select a file to edit</span>
               </div>
-            ` : html`
-              <dees-workspace-monaco
-                .filePath=${this.activeFilePath}
-                .content=${this.getActiveFileContent()}
-                .language=${this.getLanguageFromPath(this.activeFilePath)}
-                @content-change=${this.handleContentChange}
-              ></dees-workspace-monaco>
-            `}
+              <div class="editor-content">
+                ${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>
+                  </div>
+                ` : html`
+                  <dees-workspace-monaco
+                    .filePath=${this.activeFilePath}
+                    .content=${this.getActiveFileContent()}
+                    .language=${this.getLanguageFromPath(this.activeFilePath)}
+                    @content-change=${this.handleContentChange}
+                  ></dees-workspace-monaco>
+                `}
+              </div>
+            </div>
+
+            <!-- Horizontal resize handle for terminal -->
+            ${this.showTerminal && !this.isTerminalCollapsed ? html`
+              <div
+                class="resize-handle-horizontal ${this.isDraggingTerminal ? 'dragging' : ''}"
+                @mousedown=${this.handleTerminalMouseDown}
+              ></div>
+            ` : ''}
+
+            <!-- Terminal panel -->
+            ${this.showTerminal ? html`
+              <div
+                class="terminal-panel ${this.isTerminalCollapsed ? 'collapsed' : ''}"
+                style="height: ${this.isTerminalCollapsed ? 32 : this.currentTerminalHeight}px"
+              >
+                <div class="panel-header">
+                  <div class="panel-tabs">
+                    <div
+                      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}>
+                      <dees-icon
+                        .icon=${this.isTerminalCollapsed ? 'lucide:chevronUp' : 'lucide:chevronDown'}
+                        iconSize="14"
+                      ></dees-icon>
+                    </div>
+                  </div>
+                </div>
+                <div class="terminal-content" style="display: ${this.activeBottomPanel === 'terminal' ? 'block' : 'none'}">
+                  <dees-workspace-terminal
+                    .executionEnvironment=${this.executionEnvironment}
+                    .setupCommand=${''}
+                  ></dees-workspace-terminal>
+                </div>
+                <div class="problems-content" style="display: ${this.activeBottomPanel === 'problems' ? 'block' : 'none'}">
+                  ${this.renderProblemsPanel()}
+                </div>
+              </div>
+            ` : ''}
           </div>
         </div>
 
-        ${this.showTerminal ? html`
-          <div
-            class="terminal-panel ${this.isTerminalCollapsed ? 'collapsed' : ''}"
-            style="height: ${this.isTerminalCollapsed ? 32 : this.terminalHeight}px"
-          >
-            <div class="panel-header">
-              <div class="panel-tabs">
-                <div
-                  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}>
-                  <dees-icon
-                    .icon=${this.isTerminalCollapsed ? 'lucide:chevronUp' : 'lucide:chevronDown'}
-                    iconSize="14"
-                  ></dees-icon>
-                </div>
-              </div>
-            </div>
-            <div class="terminal-content" style="display: ${this.activeBottomPanel === 'terminal' ? 'block' : 'none'}">
-              <dees-workspace-terminal
-                .executionEnvironment=${this.executionEnvironment}
-                .setupCommand=${''}
-              ></dees-workspace-terminal>
-            </div>
-            <div class="problems-content" style="display: ${this.activeBottomPanel === 'problems' ? 'block' : 'none'}">
-              ${this.renderProblemsPanel()}
-            </div>
-          </div>
-        ` : ''}
+        <!-- Bottom Bar (full width) -->
+        <dees-workspace-bottombar
+          .executionEnvironment=${this.executionEnvironment}
+          @run-process=${this.handleRunProcess}
+        ></dees-workspace-bottombar>
       </div>
     `;
   }
@@ -821,6 +1004,13 @@ testSmartPromise();
   async disconnectedCallback() {
     await super.disconnectedCallback();
     document.removeEventListener('keydown', this.keydownHandler);
+
+    // Clean up resize event listeners
+    document.removeEventListener('mousemove', this.handleFileTreeMouseMove);
+    document.removeEventListener('mouseup', this.handleFileTreeMouseUp);
+    document.removeEventListener('mousemove', this.handleTerminalMouseMove);
+    document.removeEventListener('mouseup', this.handleTerminalMouseUp);
+
     if (this.autoSaveInterval) {
       clearInterval(this.autoSaveInterval);
       this.autoSaveInterval = null;
@@ -829,6 +1019,10 @@ testSmartPromise();
   }
 
   public async firstUpdated() {
+    // Initialize current sizes from properties
+    this.currentFileTreeWidth = this.fileTreeWidth;
+    this.currentTerminalHeight = this.terminalHeight;
+
     if (this.executionEnvironment) {
       await this.initializeWorkspace();
     }
@@ -1309,4 +1503,73 @@ testSmartPromise();
       resource: { path: m.resource.path },
     }));
   }
+
+  // ========== Bottom Bar Event Handlers ==========
+
+  /**
+   * Handle run-process events from bottom bar widgets
+   * Creates a new terminal tab for the process
+   */
+  private async handleRunProcess(e: CustomEvent<IRunProcessEventDetail>): Promise<void> {
+    const detail = e.detail;
+
+    // Find the terminal component
+    const terminal = this.shadowRoot?.querySelector('dees-workspace-terminal') as DeesWorkspaceTerminal;
+    if (!terminal) {
+      console.warn('Terminal component not found');
+      return;
+    }
+
+    // Expand terminal if collapsed
+    if (this.isTerminalCollapsed) {
+      this.isTerminalCollapsed = false;
+    }
+
+    // Switch to terminal panel
+    this.activeBottomPanel = 'terminal';
+
+    // Wait for UI update
+    await this.updateComplete;
+
+    // Create a new terminal tab for the process
+    await terminal.createProcessTab({
+      type: detail.type,
+      label: detail.label,
+      command: detail.command,
+      args: detail.args,
+      metadata: detail.metadata,
+      switchToTab: true,
+    });
+  }
+
+  // ========== Public Layout Methods ==========
+
+  /**
+   * Programmatically set the file tree width
+   */
+  public setFileTreeWidth(width: number): void {
+    const minWidth = 150;
+    const maxWidth = this.getBoundingClientRect().width * 0.5;
+    this.currentFileTreeWidth = Math.max(minWidth, Math.min(maxWidth, width));
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  /**
+   * Programmatically set the terminal height
+   */
+  public setTerminalHeight(height: number): void {
+    const minHeight = 100;
+    const maxHeight = this.getBoundingClientRect().height * 0.7;
+    this.currentTerminalHeight = Math.max(minHeight, Math.min(maxHeight, height));
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  /**
+   * Reset layout to initial property values
+   */
+  public resetLayout(): void {
+    this.currentFileTreeWidth = this.fileTreeWidth;
+    this.currentTerminalHeight = this.terminalHeight;
+    window.dispatchEvent(new Event('resize'));
+  }
 }

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

@@ -378,7 +378,10 @@ export class TypeScriptIntelliSenseManager {
     const existingModel = this.monacoInstance.editor.getModel(uri);
 
     if (existingModel) {
-      existingModel.setValue(content);
+      // Only update if content actually changed (prevents cursor reset)
+      if (existingModel.getValue() !== content) {
+        existingModel.setValue(content);
+      }
     } else {
       const language = this.getLanguageFromPath(path);
       this.monacoInstance.editor.createModel(content, language, uri);

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

@@ -6,3 +6,4 @@ export * from './dees-workspace-terminal/index.js';
 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';

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,485 @@
+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: block;
+        overflow: hidden;
+        height: 0;
+        transition: height 0.2s ease-out;
+      }
+
+      :host(.visible) {
+        height: auto;
+      }
+
+      .actionbar-item {
+        display: flex;
+        flex-direction: column;
+        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 ==========
+
+  private processQueue(): void {
+    if (this.queue.length === 0) {
+      this.currentBar = null;
+      this.currentResolve = null;
+      this.isVisible = false;
+      this.classList.remove('visible');
+      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';