@hydranium/glsp-client 1.0.0-next.379 → 1.0.0-next.381

package/lib/reattach.d.ts

@@ -0,0 +1,15 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+/**
+ * Puts a UI extension's element back into the diagram's base div. sprotty's
+ * first render replaces that div, so an element inserted before it is left
+ * detached. Takes the extension's own lookups, which are protected.
+ */
+export declare function reattachUIExtension(container: HTMLElement | undefined, parentContainer: () => HTMLElement | null | undefined, insert: (container: HTMLElement, parent: HTMLElement) => void): void;
+//# sourceMappingURL=reattach.d.ts.map

package/lib/reattach.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reattach.d.ts","sourceRoot":"","sources":["../src/reattach.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAElF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAChC,SAAS,EAAE,WAAW,GAAG,SAAS,EAClC,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,EACrD,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,GAC7D,IAAI,CAQN"}

package/lib/reattach.js

@@ -0,0 +1,26 @@
+"use strict";
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reattachUIExtension = reattachUIExtension;
+/**
+ * Puts a UI extension's element back into the diagram's base div. sprotty's
+ * first render replaces that div, so an element inserted before it is left
+ * detached. Takes the extension's own lookups, which are protected.
+ */
+function reattachUIExtension(container, parentContainer, insert) {
+    if (!container || container.isConnected) {
+        return;
+    }
+    const parent = parentContainer();
+    if (parent) {
+        insert(container, parent);
+    }
+}
+//# sourceMappingURL=reattach.js.map

package/lib/reattach.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reattach.js","sourceRoot":"","sources":["../src/reattach.ts"],"names":[],"mappings":";AAAA;;;;;;;kFAOkF;;;AAElF;;;;GAIG;AACH,6BACG,SAAkC,EAClC,eAAqD,EACrD,MAA6D;IAE7D,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;QACvC,OAAO;IACV,CAAC;IACD,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,IAAI,MAAM,EAAE,CAAC;QACV,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC7B,CAAC;AACJ,CAAC"}

package/lib/status-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-overlay.d.ts","sourceRoot":"","sources":["../src/status-overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAElF,OAAO,EAAE,KAAK,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGxE;;;;;;;GAOG;AACH,qBACa,sBAAuB,SAAQ,aAAa;IAC7C,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAG1C;IAEQ,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAG9D;IAED,SAAS,CAAC,QAAQ,IAAI,IAAI,CASzB;CACH"}
+{"version":3,"file":"status-overlay.d.ts","sourceRoot":"","sources":["../src/status-overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAElF,OAAO,EAAE,KAAK,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIxE;;;;;;;GAOG;AACH,qBACa,sBAAuB,SAAQ,aAAa;IAC7C,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAG1C;IAEQ,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAG9D;IAED,SAAS,CAAC,QAAQ,IAAI,IAAI,CAMzB;CACH"}

package/lib/status-overlay.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HydraniumStatusOverlay = void 0;
 const client_1 = require("@eclipse-glsp/client");
 const inversify_1 = require("inversify");
+const reattach_1 = require("./reattach");
 /**
  * GLSP's status overlay, kept on the page.
  *
@@ -35,14 +36,7 @@ let HydraniumStatusOverlay = class HydraniumStatusOverlay extends client_1.Statu
         this.reattach();
     }
     reattach() {
-        const container = this.containerElement;
-        if (!container || container.isConnected) {
-            return;
-        }
-        const parent = this.getParentContainer();
-        if (parent) {
-            this.insertContainerIntoParent(container, parent);
-        }
+        (0, reattach_1.reattachUIExtension)(this.containerElement, () => this.getParentContainer(), (container, parent) => this.insertContainerIntoParent(container, parent));
     }
 };
 exports.HydraniumStatusOverlay = HydraniumStatusOverlay;

package/lib/status-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-overlay.js","sourceRoot":"","sources":["../src/status-overlay.ts"],"names":[],"mappings":";AAAA;;;;;;;kFAOkF;;;;;;;;;AAElF,iDAAwE;AACxE,yCAAuC;AAEvC;;;;;;;GAOG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,sBAAa;IAC7C,MAAM,CAAC,MAAoB;QACjC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAEQ,IAAI,CAAC,GAAG,IAAuC;QACrD,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IACnB,CAAC;IAES,QAAQ;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,gBAA2C,CAAC;QACnE,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;YACvC,OAAO;QACV,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACzC,IAAI,MAAM,EAAE,CAAC;YACV,IAAI,CAAC,yBAAyB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACrD,CAAC;IACJ,CAAC;CACH,CAAA;;iCArBY,sBAAsB;IADlC,IAAA,sBAAU,GAAE;GACA,sBAAsB,CAqBlC"}
+{"version":3,"file":"status-overlay.js","sourceRoot":"","sources":["../src/status-overlay.ts"],"names":[],"mappings":";AAAA;;;;;;;kFAOkF;;;;;;;;;AAElF,iDAAwE;AACxE,yCAAuC;AACvC,yCAAiD;AAEjD;;;;;;;GAOG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,sBAAa;IAC7C,MAAM,CAAC,MAAoB;QACjC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAEQ,IAAI,CAAC,GAAG,IAAuC;QACrD,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IACnB,CAAC;IAES,QAAQ;QACf,IAAA,8BAAmB,EAChB,IAAI,CAAC,gBAA2C,EAChD,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC/B,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC,SAAS,EAAE,MAAM,CAAC,CAC1E,CAAC;IACL,CAAC;CACH,CAAA;;iCAlBY,sBAAsB;IADlC,IAAA,sBAAU,GAAE;GACA,sBAAsB,CAkBlC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydranium/glsp-client",
-  "version": "1.0.0-next.379",
+  "version": "1.0.0-next.381",
   "description": "Host-neutral client classes for GLSP heads built on @hydranium/glsp-server, the binder that mounts them in a Theia frontend, a VS Code webview or a plain browser page, the one call that mounts a diagram in a page, and the edge whose labels keep finite bounds without bendpoints.",
   "keywords": [
     "diagram",
@@ -26,9 +26,12 @@
   "files": [
     "lib",
     "src",
+    "style",
     "!lib/**/*.tsbuildinfo"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -43,7 +46,8 @@
     "./testing": {
       "types": "./lib/testing/index.d.ts",
       "default": "./lib/testing/index.js"
-    }
+    },
+    "./style/message-overlay.css": "./style/message-overlay.css"
   },
   "publishConfig": {
     "access": "public"
@@ -59,7 +63,7 @@
   },
   "devDependencies": {
     "@eclipse-glsp/client": "2.8.0",
-    "@hydranium/protocol": "1.0.0-next.379",
+    "@hydranium/protocol": "1.0.0-next.381",
     "@types/node": "^22.0.0",
     "inversify": "6.2.2",
     "reflect-metadata": "0.2.2",
@@ -69,13 +73,15 @@
   },
   "peerDependencies": {
     "@eclipse-glsp/client": "^2.7.0",
-    "@hydranium/protocol": "1.0.0-next.379",
+    "@hydranium/protocol": "1.0.0-next.381",
     "inversify": "^6.1.3",
     "snabbdom": "~3.5.1"
   },
   "engines": {
     "node": ">=22.13"
   },
+  "//exports": "The stylesheet key is an asset entry, spelled as the exact filename so nothing becomes reachable automatically. It lets an adopter `@import` the sheet, re-bundle it or override it by specifier. `tsc` emits no assets, and `check:exports` asserts the file exists and ships through `files`.",
   "//peerDependencies": "`inversify` is imported plainly, as `@eclipse-glsp/client` imports it, and peered so the classes here decorate with the same copy the diagram container resolves; `@theia/core/shared/inversify` re-exports that copy, so a Theia frontend satisfies it without a second install. `snabbdom` is a peer for the `VNode` type the hidden-bounds updater reads, the same reason the Theia package peers it.",
-  "//prepack": "The publish guard, a `prepack` rather than a `prepare`: `prepack` runs only when a tarball is made (`npm pack`, `npm publish`) and never on install, so it cannot break the install it has no business touching. What it defends against: `files` lists `lib`, `lib` is gitignored, and a `files` entry matching nothing is skipped SILENTLY — so `npm publish` from an unbuilt tree emits a tarball of `src` and nothing else, with no error."
+  "//prepack": "The publish guard, a `prepack` rather than a `prepare`: `prepack` runs only when a tarball is made (`npm pack`, `npm publish`) and never on install, so it cannot break the install it has no business touching. What it defends against: `files` lists `lib`, `lib` is gitignored, and a `files` entry matching nothing is skipped SILENTLY — so `npm publish` from an unbuilt tree emits a tarball of `src` and nothing else, with no error.",
+  "//sideEffects": "A stylesheet IS the side effect: `style/message-overlay.css` is pulled in by a bare import in `message-overlay.js`, and a CSS module exports nothing, so under a blanket `false` a bundler drops the import as unused and the diagram's messages render unstyled. Nothing fails at build time."
 }

package/src/diagram-message-details.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import { defineMessage } from '@hydranium/protocol';
+
+/**
+ * The label of the disclosure that holds a server message's details on the
+ * diagram. Formatted in English by `HydraniumMessageOverlay`. A host that knows
+ * the reading user's locale overrides its `detailsLabel`.
+ *
+ * In a module of its own, apart from the overlay, so the `./messages` barrel
+ * loads no `@eclipse-glsp/client`.
+ */
+export const DIAGRAM_MESSAGE_DETAILS = defineMessage('hydranium/glsp-client/diagram-message-details', 'Details');

package/src/diagram-message-dismiss.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import { defineMessage } from '@hydranium/protocol';
+
+/**
+ * The label of the button that closes a server message on the diagram.
+ * Formatted in English by `HydraniumMessageOverlay`. A host that knows the
+ * reading user's locale overrides its `dismissLabel`.
+ *
+ * In a module of its own, apart from the overlay, so the `./messages` barrel
+ * loads no `@eclipse-glsp/client`.
+ */
+export const DIAGRAM_MESSAGE_DISMISS = defineMessage('hydranium/glsp-client/diagram-message-dismiss', 'Dismiss');

package/src/diagram-mount.ts

@@ -13,7 +13,9 @@ import {
    createDiagramOptionsModule,
    DiagramLoader,
    EditorContextService,
+   FallbackActionHandler,
    FitToScreenAction,
+   type IActionHandler,
    type GLSPActionDispatcher,
    type IDiagramOptions,
    InitializeCanvasBoundsAction,
@@ -26,6 +28,7 @@ import { HydraniumGlspActionDispatcher } from './action-dispatcher';
 import { type DiagramLoadOutcome, HydraniumDiagramLoader } from './diagram-loader';
 import type { HydraniumGlspClient } from './glsp-client';
 import { createGlspClientModule } from './glsp-client-module';
+import { HydraniumMessageOverlay } from './message-overlay';
 import { enableTouchDragging } from './touch-input';
 import { HydraniumClientTypes } from './types';
 
@@ -117,6 +120,10 @@ export const DIAGRAM_FIT_PADDING = 24;
  *   that scrolls, send the element's box in page coordinates whenever it
  *   differs from the model's. A zero-sized box, which a pane dragged shut
  *   reports, is skipped: a zero canvas culls the whole model.
+ * - **Server messages.** GLSP's standalone modules only log the server's
+ *   messages and progress reports, so a refused undo changes nothing the user
+ *   sees. {@link HydraniumMessageOverlay} shows them on the diagram instead.
+ *   Rebind it to a subclass to show them elsewhere.
  * - **Touch input.** sprotty binds mouse events only; see
  *   {@link enableTouchDragging}. Give the element `touch-action: none`.
  * - **The context menu.** GLSP warns on every container built without a
@@ -149,6 +156,18 @@ export async function mountGlspDiagram(options: GlspDiagramMountOptions): Promis
    // a token those modules bind.
    const hydraniumModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       createGlspClientModule({ bind, unbind, isBound, rebind }, { logger: options.logger, trackEditsInFlight: true });
+      // The fallback is what the standalone modules register for the server's
+      // messages and progress, and it only logs them. A singleton, since GLSP
+      // resolves it once per action kind and a host may rebind the overlay
+      // without a scope.
+      bind(HydraniumMessageOverlay).toSelf().inSingletonScope();
+      if (isBound(FallbackActionHandler)) {
+         rebind<IActionHandler>(FallbackActionHandler)
+            .toDynamicValue(context => context.container.get(HydraniumMessageOverlay))
+            .inSingletonScope();
+         // Through the fallback, so the instance started is the one showing the messages.
+         bind(TYPES.IDiagramStartup).toService(FallbackActionHandler);
+      }
    });
    const container = options.initializeDiagramContainer(
       new Container(),

package/src/index.ts

@@ -15,12 +15,15 @@
 export * from './action-dispatcher';
 export * from './diagram-load-failed';
 export * from './diagram-loader';
+export * from './diagram-message-details';
+export * from './diagram-message-dismiss';
 export * from './diagram-mount';
 export * from './edge';
 export * from './glsp-client';
 export * from './glsp-connection';
 export * from './glsp-client-module';
 export * from './hidden-bounds-updater';
+export * from './message-overlay';
 export * from './select-mouse-listener';
 export * from './sprotty-logger-adapter';
 export * from './status-overlay';

package/src/message-overlay.ts

@@ -0,0 +1,254 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import {
+   type Action,
+   EndProgressAction,
+   GLSPAbstractUIExtension,
+   type IActionHandler,
+   type IDiagramStartup,
+   MessageAction,
+   StartProgressAction,
+   UpdateProgressAction
+} from '@eclipse-glsp/client';
+import { injectable } from 'inversify';
+import '../style/message-overlay.css';
+import { DIAGRAM_MESSAGE_DETAILS } from './diagram-message-details';
+import { DIAGRAM_MESSAGE_DISMISS } from './diagram-message-dismiss';
+import { reattachUIExtension } from './reattach';
+
+/**
+ * Shows the server's messages and progress reports on the diagram, for a host
+ * with no notifications of its own. GLSP's standalone modules only log them,
+ * so a refused undo would otherwise change nothing the user can see.
+ *
+ * A message stays until it is dismissed, and only the newest
+ * {@link HydraniumMessageOverlay.maxMessages} are kept. A repeated one moves
+ * to the newest instead of stacking. A progress report shows from its start
+ * to its end, with a spinner until it reports a percentage. Severity `NONE`
+ * says nothing and is dropped.
+ *
+ * A message row shows its severity's icon and carries the severity as a
+ * class, and the stylesheet edges it in GLSP's `--glsp-*-foreground` colour.
+ * A progress row has the info edge. A host with notifications of its own
+ * subclasses this class to forward them, and rebinds it to the subclass in a
+ * module only that host loads.
+ */
+@injectable()
+export class HydraniumMessageOverlay extends GLSPAbstractUIExtension implements IActionHandler, IDiagramStartup {
+   static readonly ID = 'hydranium-message-overlay';
+
+   /** How many distinct messages are kept, so they cannot cover the canvas. A repeat replaces its row. */
+   protected maxMessages = 3;
+   protected readonly messageRows: HTMLElement[] = [];
+   protected readonly progressRows = new Map<string, HTMLElement>();
+
+   id(): string {
+      return HydraniumMessageOverlay.ID;
+   }
+
+   containerClass(): string {
+      return 'hydranium-messages';
+   }
+
+   protected initializeContents(_container: HTMLElement): void {
+      // Rows are added as messages arrive.
+   }
+
+   handle(action: Action): void {
+      if (MessageAction.is(action)) {
+         this.showMessage(action);
+      } else if (StartProgressAction.is(action)) {
+         this.startProgress(action);
+      } else if (UpdateProgressAction.is(action)) {
+         this.updateProgress(action);
+      } else if (EndProgressAction.is(action)) {
+         this.endProgress(action);
+      } else {
+         this.logger.log(this, 'Unhandled action received:', action);
+      }
+   }
+
+   protected showMessage(action: MessageAction): void {
+      if (action.severity === 'NONE') {
+         return;
+      }
+      // An alert is announced when it is inserted, which a status in a region
+      // created with it is not. A refused undo is a warning and must be heard.
+      const kind = action.severity.toLowerCase();
+      const row = this.createRow(kind, action.severity !== 'INFO' && action.severity !== 'OK');
+      row.append(this.createIcon(action.severity), this.createText('hydranium-message-text', action.message));
+      if (action.details) {
+         const details = document.createElement('details');
+         const summary = document.createElement('summary');
+         summary.textContent = this.detailsLabel();
+         const text = document.createElement('pre');
+         text.textContent = action.details;
+         details.append(summary, text);
+         row.append(details);
+      }
+      const dismiss = document.createElement('button');
+      dismiss.setAttribute('type', 'button');
+      dismiss.classList.add('codicon', 'codicon-close');
+      dismiss.setAttribute('aria-label', this.dismissLabel());
+      dismiss.addEventListener('click', () => this.removeMessage(row));
+      row.append(dismiss);
+      if (!this.addRow(row, action.message)) {
+         return;
+      }
+      // A held Ctrl+Z repeats its refusal, which the newest row then says once.
+      // Its details replace those of the row it repeats.
+      const repeated = this.messageRows.find(
+         shown =>
+            shown.classList.contains(`hydranium-message-${kind}`) &&
+            shown.querySelector('.hydranium-message-text')?.textContent === action.message
+      );
+      if (repeated) {
+         this.removeMessage(repeated);
+      }
+      this.messageRows.push(row);
+      while (this.messageRows.length > this.maxMessages) {
+         this.removeMessage(this.messageRows[0]);
+      }
+   }
+
+   protected removeMessage(row: HTMLElement): void {
+      const index = this.messageRows.indexOf(row);
+      if (index >= 0) {
+         this.messageRows.splice(index, 1);
+      }
+      // Back to the diagram, as a row leaving the page would drop the focus on the body.
+      const hadFocus = row.contains(document.activeElement);
+      row.remove();
+      if (hadFocus) {
+         this.focusDiagram();
+      }
+   }
+
+   protected startProgress(action: StartProgressAction): void {
+      // A start repeated under its id would otherwise leave the first row with no end.
+      if (this.progressRows.has(action.progressId)) {
+         this.endProgress(EndProgressAction.create(action.progressId));
+      }
+      const row = this.createRow('progress', false);
+      const spinner = document.createElement('i');
+      spinner.classList.add('hydranium-progress-spinner', 'codicon', 'codicon-loading', 'codicon-modifier-spin');
+      spinner.setAttribute('aria-hidden', 'true');
+      row.append(
+         spinner,
+         this.createText('hydranium-message-text', action.title),
+         this.createText('hydranium-progress-message', ''),
+         this.createText('hydranium-progress-percentage', '')
+      );
+      if (this.addRow(row, action.title)) {
+         this.progressRows.set(action.progressId, row);
+         this.updateProgress(action);
+      }
+   }
+
+   protected updateProgress(action: Pick<UpdateProgressAction, 'progressId' | 'message' | 'percentage'>): void {
+      const row = this.progressRows.get(action.progressId);
+      if (row === undefined) {
+         return;
+      }
+      const message = row.querySelector('.hydranium-progress-message');
+      const percentage = row.querySelector('.hydranium-progress-percentage');
+      const spinner = row.querySelector<HTMLElement>('.hydranium-progress-spinner');
+      if (message && action.message !== undefined) {
+         message.textContent = action.message;
+      }
+      // A negative percentage reports work of unknown size, as GLSP has it.
+      // The spinner stands in for a percentage, so it shows only while there is none.
+      if (action.percentage !== undefined) {
+         const known = action.percentage >= 0;
+         if (percentage) {
+            percentage.textContent = known ? `${Math.round(action.percentage)}%` : '';
+         }
+         if (spinner) {
+            spinner.hidden = known;
+         }
+      }
+   }
+
+   protected endProgress(action: EndProgressAction): void {
+      this.progressRows.get(action.progressId)?.remove();
+      this.progressRows.delete(action.progressId);
+   }
+
+   /** English, as this tier knows no locale. A host that knows one renders {@link DIAGRAM_MESSAGE_DISMISS} here. */
+   protected dismissLabel(): string {
+      return DIAGRAM_MESSAGE_DISMISS.format();
+   }
+
+   /** English, as this tier knows no locale. A host that knows one renders {@link DIAGRAM_MESSAGE_DETAILS} here. */
+   protected detailsLabel(): string {
+      return DIAGRAM_MESSAGE_DETAILS.format();
+   }
+
+   protected createRow(kind: string, alert: boolean): HTMLElement {
+      const row = document.createElement('div');
+      // Prefixed, as a bare `progress` or `warning` would take the page's own styles for it.
+      row.classList.add('hydranium-message', `hydranium-message-${kind}`);
+      row.setAttribute('role', alert ? 'alert' : 'status');
+      return row;
+   }
+
+   /** The severity as a glyph too, as GLSP's default colours can be too faint on a light page. */
+   protected createIcon(severity: MessageAction['severity']): HTMLElement {
+      const glyph =
+         severity === 'FATAL' || severity === 'ERROR' ? 'error' : severity === 'WARNING' ? 'warning' : severity === 'OK' ? 'pass' : 'info';
+      const icon = document.createElement('i');
+      icon.classList.add('hydranium-message-icon', 'codicon', `codicon-${glyph}`);
+      icon.setAttribute('aria-hidden', 'true');
+      return icon;
+   }
+
+   protected focusDiagram(): void {
+      this.getParentContainer()?.querySelector<SVGElement>('svg.sprotty-graph')?.focus();
+   }
+
+   protected createText(className: string, text: string): HTMLElement {
+      const span = document.createElement('span');
+      span.classList.add(className);
+      span.textContent = text;
+      return span;
+   }
+
+   /** Adds a row to the overlay, or logs its text when the diagram has no element to show it in. */
+   protected addRow(row: HTMLElement, text: string): boolean {
+      // Checked before `initialize`, which logs the same problem without the text.
+      const noElement = !this.containerElement && !this.getContainer() && !this.getParentContainer()?.isConnected;
+      if (!noElement && this.initialize()) {
+         this.reattach();
+         // Still detached when the base div itself left the page.
+         if (this.containerElement.isConnected) {
+            this.containerElement.append(row);
+            // The overlay scrolls once it fills the diagram, and the newest row is at its bottom.
+            this.containerElement.scrollTop = this.containerElement.scrollHeight;
+            return true;
+         }
+      }
+      this.logger.warn(this, 'No diagram element to show a server message in:', text);
+      return false;
+   }
+
+   /** A row a startup hook showed before the first render would otherwise wait for the next row. */
+   postModelInitialization(): void {
+      this.reattach();
+   }
+
+   /** Puts the element back into the base div, which sprotty's first render replaces. */
+   protected reattach(): void {
+      reattachUIExtension(
+         this.containerElement as HTMLElement | undefined,
+         () => this.getParentContainer(),
+         (container, parent) => this.insertContainerIntoParent(container, parent)
+      );
+   }
+}

package/src/messages/index.ts

@@ -15,3 +15,5 @@
 // own diagram chrome discovers the codes exist.
 
 export { DIAGRAM_LOAD_FAILED } from '../diagram-load-failed';
+export { DIAGRAM_MESSAGE_DETAILS } from '../diagram-message-details';
+export { DIAGRAM_MESSAGE_DISMISS } from '../diagram-message-dismiss';

package/src/reattach.ts

@@ -0,0 +1,27 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+/**
+ * Puts a UI extension's element back into the diagram's base div. sprotty's
+ * first render replaces that div, so an element inserted before it is left
+ * detached. Takes the extension's own lookups, which are protected.
+ */
+export function reattachUIExtension(
+   container: HTMLElement | undefined,
+   parentContainer: () => HTMLElement | null | undefined,
+   insert: (container: HTMLElement, parent: HTMLElement) => void
+): void {
+   if (!container || container.isConnected) {
+      return;
+   }
+   const parent = parentContainer();
+   if (parent) {
+      insert(container, parent);
+   }
+}

package/src/status-overlay.ts

@@ -9,6 +9,7 @@
 
 import { type StatusAction, StatusOverlay } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
+import { reattachUIExtension } from './reattach';
 
 /**
  * GLSP's status overlay, kept on the page.
@@ -31,13 +32,10 @@ export class HydraniumStatusOverlay extends StatusOverlay {
    }
 
    protected reattach(): void {
-      const container = this.containerElement as HTMLElement | undefined;
-      if (!container || container.isConnected) {
-         return;
-      }
-      const parent = this.getParentContainer();
-      if (parent) {
-         this.insertContainerIntoParent(container, parent);
-      }
+      reattachUIExtension(
+         this.containerElement as HTMLElement | undefined,
+         () => this.getParentContainer(),
+         (container, parent) => this.insertContainerIntoParent(container, parent)
+      );
    }
 }

package/style/message-overlay.css

@@ -0,0 +1,74 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+/* Bottom right: GLSP's status sits top left and its tool palette top right. */
+.hydranium-messages {
+   position: absolute;
+   right: 10px;
+   bottom: 10px;
+   /* Above the tool palette (1000), which a tall overlay reaches, so its controls stay reachable. */
+   z-index: 1001;
+   display: flex;
+   flex-direction: column;
+   gap: 4px;
+   max-width: min(480px, calc(100% - 20px));
+   /* Scrolls rather than grow past the diagram, where the page may clip a row's controls. */
+   max-height: calc(100% - 20px);
+   overflow-y: auto;
+   pointer-events: none;
+}
+
+.hydranium-message {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 8px;
+   padding: 6px 8px;
+   border-left: 3px solid var(--glsp-info-foreground);
+   background: var(--glsp-issue-background);
+   box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
+   pointer-events: auto;
+}
+
+.hydranium-message-error,
+.hydranium-message-fatal {
+   border-left-color: var(--glsp-error-foreground);
+}
+
+.hydranium-message-warning {
+   border-left-color: var(--glsp-warning-foreground);
+}
+
+.hydranium-message-text {
+   flex: 1;
+}
+
+/* Above the codicon rules' `display`, whichever stylesheet a page loads last. */
+.hydranium-progress-spinner.codicon[hidden] {
+   display: none;
+}
+
+.hydranium-message > button {
+   border: none;
+   background: none;
+   color: inherit;
+   cursor: pointer;
+}
+
+.hydranium-message > details {
+   flex-basis: 100%;
+   order: 1;
+}
+
+.hydranium-message > details > pre {
+   max-height: 12em;
+   margin: 4px 0 0;
+   overflow-y: auto;
+   white-space: pre-wrap;
+}