feat: add support for terminals

Author: erdalkaraca

.nvmrc

@@ -0,0 +1 @@
+24

docs/reference/packages.md

@@ -13,7 +13,6 @@
 | **@eclipse-docks/extension-media-viewer** | Media (image, etc.) viewer. |
 | **@eclipse-docks/extension-notebook** | Notebook runtime and UI. |
 | **@eclipse-docks/extension-python-runtime** | Python runtime (e.g. Pyodide). |
-| **@eclipse-docks/extension-linuxterminal** | Terminal. |
 | **@eclipse-docks/extension-webllm** | Web LLM integration. |
 | **@eclipse-docks/extension-in-browser-ml** | In-browser ML (e.g. transformers). |
 | **@eclipse-docks/extension-rag-system** | RAG (retrieval-augmented generation) and document indexing. |

package-lock.json

@@ -12,6 +12,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "engines": {
+    "node": ">=20.12.0"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +26,7 @@
     "build:app-e2e": "npm run build -w @eclipse-docks/core && npm run build -w @eclipse-docks/app-e2e",
     "preview": "npm run preview -w @eclipse-docks/app",
     "type-check": "npm run type-check -w @eclipse-docks/core",
+    "pretest": "node scripts/check-node-version.cjs",
     "test": "npm run test --workspaces --if-present",
     "test:e2e": "npm run test:e2e -w @eclipse-docks/app-e2e",
     "test:e2e:stories": "npm run test:e2e:stories -w @eclipse-docks/app-e2e",

package.json

@@ -14,14 +14,13 @@
     "@eclipse-docks/extension-ai-system": "*",
     "@eclipse-docks/extension-catalog": "*",
     "@eclipse-docks/extension-command-palette": "*",
-    "@eclipse-docks/extension-command-shell": "*",
+    "@eclipse-docks/extension-terminal": "*",
     "@eclipse-docks/extension-cereusdb": "*",
     "@eclipse-docks/extension-dataviewer": "*",
     "@eclipse-docks/extension-duckdb": "*",
     "@eclipse-docks/extension-github-service": "*",
     "@eclipse-docks/extension-howto-system": "*",
     "@eclipse-docks/extension-in-browser-ml": "*",
-    "@eclipse-docks/extension-linuxterminal": "*",
     "@eclipse-docks/extension-md-editor": "*",
     "@eclipse-docks/extension-media-viewer": "*",
     "@eclipse-docks/extension-memory-usage": "*",

packages/app/package.json

@@ -41,7 +41,8 @@ appLoaderService.registerApp(
     releaseHistory: fetchReleases,
     extensions: [
       '@eclipse-docks/extension-command-palette',
-      '@eclipse-docks/extension-command-shell',
+      '@eclipse-docks/extension-terminal',
+      '@eclipse-docks/extension-python-runtime',
       '@eclipse-docks/extension-catalog',
       '@eclipse-docks/extension-md-editor',
       '@eclipse-docks/extension-plain-editor',

packages/app/src/main.ts

@@ -79,6 +79,8 @@ export interface TabContribution extends Contribution {
      * when any of them becomes the active editor in the main editor area. Omitted or empty = no auto-reveal.
      */
     coupledEditors?: string[];
+    /** Return false to cancel tab close (after dirty-tab prompt, if any). */
+    beforeClose?: () => boolean | Promise<boolean>;
     component?: (id: string) => TemplateResult;
 }
 

packages/core/src/core/contributionregistry.ts

@@ -139,11 +139,11 @@ export class DocksStandardLayout extends DocksContainer {
                                     id="left-sidebar-split" 
                                     orientation="vertical" 
                                     sizes="50%, 50%">
-                                    <docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar></docks-tabs>
+                                    <docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="large"></docks-tabs>
                                     <docks-tabs id="${SIDEBAR_MAIN_BOTTOM}"  placement="start" icon-only></docks-tabs>
                                 </docks-resizable-grid>
                             `
-                            : html`<docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar></docks-tabs>`
+                            : html`<docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="large"></docks-tabs>`
                         }
                     `
                     : nothing

packages/core/src/layouts/standard-layout.ts

@@ -9,7 +9,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { DocksContextMenu } from "./contextmenu";
 
 export abstract class DocksPart extends DocksContainer {
-    protected scrollMode: 'scroller' | 'native' = 'scroller';
+    /** `scroller`: wrap content in wa-scroller; `native`: overflow on part-content; `none`: no outer scroll (child manages scroll). */
+    protected scrollMode: 'scroller' | 'native' | 'none' = 'scroller';
 
     @property()
     private dirty: boolean = false

packages/core/src/parts/part.ts

@@ -44,6 +44,10 @@ export class DocksTabs extends DocksContainer {
     @property({ type: Boolean, reflect: true, attribute: 'hide-tabs' })
     hideTabs: boolean = false;
 
+    /** Tab and nav-toolbar control sizing (`small` | `medium` | `large`). */
+    @property({ reflect: true, attribute: 'item-size' })
+    itemSize: 'small' | 'medium' | 'large' = 'medium';
+
     /** Tab contributions for this container */
     @state()
     private contributions: TabContribution[] = [];
@@ -158,6 +162,14 @@ export class DocksTabs extends DocksContainer {
         await this.tryCloseTab(tabName, true);
     }
 
+    updateTabLabel(tabName: string, label: string): void {
+        const contribution = this.contributions.find((c) => c.name === tabName);
+        if (!contribution) return;
+        contribution.label = label;
+        this.contributions = [...this.contributions];
+        this.requestUpdate();
+    }
+
     /**
      * Closes every tab in this group. Returns false if the user cancels a dirty-tab prompt.
      */
@@ -186,6 +198,11 @@ export class DocksTabs extends DocksContainer {
         const contribution = this.contributions.find(c => c.name === tabName);
         if (!contribution) return true;
 
+        if (contribution.beforeClose) {
+            const ok = await contribution.beforeClose();
+            if (!ok) return false;
+        }
+
         this.cleanupTabInstance(tabPanel);
         this.clearActiveSignalsIfPartInPanel(tabPanel);
 
@@ -367,6 +384,20 @@ export class DocksTabs extends DocksContainer {
         return this.placement === "start" || this.placement === "end" ? "vertical" : "horizontal";
     }
 
+    private renderNavToolbar(navToolbarId: string) {
+        if (!this.withToolbar || !navToolbarId) return nothing;
+        return html`
+            <div class="nav-toolbar-spacer" slot="nav" aria-hidden="true"></div>
+            <docks-toolbar
+                slot="nav"
+                id=${navToolbarId}
+                orientation=${this.withToolbarOrientation()}
+                align="center"
+                size=${this.itemSize}
+            ></docks-toolbar>
+        `;
+    }
+
     private renderEmptyState() {
         const currentApp = appLoaderService.getCurrentApp();
         return html`
@@ -389,10 +420,22 @@ export class DocksTabs extends DocksContainer {
     }
 
     render() {
-        if (this.contributions.length === 0) {
+        const containerId = this.containerId ?? this.getAttribute('id');
+        const navToolbarId = containerId ? `${containerId}-toolbar` : '';
+        const hasToolbar = this.withToolbar && !!navToolbarId;
+
+        if (this.contributions.length === 0 && !hasToolbar) {
             return this.renderEmptyState();
         }
-        const navToolbarId = this.containerId ? `${this.containerId}-toolbar` : '';
+
+        if (this.contributions.length === 0) {
+            return html`
+                <wa-tab-group ${ref(this.tabGroup)} placement=${this.placement}>
+                    ${this.renderNavToolbar(navToolbarId)}
+                </wa-tab-group>
+            `;
+        }
+
         return html`
             <wa-tab-group ${ref(this.tabGroup)} placement=${this.placement}>
                 ${repeat(
@@ -417,18 +460,7 @@ export class DocksTabs extends DocksContainer {
                     `;
                     }
                 )}
-                ${this.withToolbar && navToolbarId
-                    ? html`
-                        <div class="nav-toolbar-spacer" slot="nav" aria-hidden="true"></div>
-                        <docks-toolbar
-                            slot="nav"
-                            id=${navToolbarId}
-                            orientation=${this.withToolbarOrientation()}
-                            align="center"
-                            size="large"
-                        ></docks-toolbar>
-                    `
-                    : nothing}
+                ${this.renderNavToolbar(navToolbarId)}
             </wa-tab-group>
         `;
     }
@@ -513,6 +545,17 @@ export class DocksTabs extends DocksContainer {
 
         wa-tab::part(base) {
             padding: 3px 0.5rem;
+            font-size: var(--wa-font-size-s);
+        }
+
+        :host([item-size="small"]) wa-tab::part(base) {
+            padding: 2px 0.375rem;
+            font-size: var(--wa-font-size-xs);
+        }
+
+        :host([item-size="large"]) wa-tab::part(base) {
+            padding: var(--wa-space-s) 0.75rem;
+            font-size: var(--wa-font-size-m);
         }
 
         :host([icon-only]) wa-tab::part(base) {
@@ -523,15 +566,39 @@ export class DocksTabs extends DocksContainer {
             padding: var(--wa-space-s);
         }
 
+        :host([icon-only][item-size="small"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
+            padding: var(--wa-space-xs);
+        }
+
+        :host([icon-only][item-size="large"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
+            padding: var(--wa-space-m);
+        }
+
         :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
             padding-inline: 0;
             padding-block: var(--wa-space-s);
         }
 
+        :host([icon-only][item-size="small"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
+            padding-block: var(--wa-space-xs);
+        }
+
+        :host([icon-only][item-size="large"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
+            padding-block: var(--wa-space-m);
+        }
+
         :host([icon-only]) wa-tab wa-icon {
             font-size: var(--wa-font-size-l);
         }
 
+        :host([icon-only][item-size="small"]) wa-tab wa-icon {
+            font-size: var(--wa-font-size-m);
+        }
+
+        :host([icon-only][item-size="large"]) wa-tab wa-icon {
+            font-size: var(--wa-font-size-xl);
+        }
+
         :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab-group::part(nav),
         :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab-group::part(tabs) {
             padding: 0;