GLSP-31: Update workflow example (standalone)

Part-of: eclipse-glsp/glsp#1693

- Redesign standalone example app
  - Central diagram widget
  - Proper title bar
  - Additional toggleable section for keyboard bindings
Add/introduce following features
- Context menu support
  - Server-side provided context menus
  - Navigation/Marker menu entries
  - Edit task menu entries
- Title bar with
  - Diagram menu similar to Theia integration
    - Including layout commands
  - Dirty state marker
  - Undo/Redo buttons
- Theming support
  - 5 seletable themes
  - light/dark mode variants
  - Theme switcher in title bar
- Extended urlParameter configuration
  - grid,readonly,mcp,theme,mode

Fixes eclipse-glsp/glsp#31
- Fixes an issue with the GLSP Projection view which did not calculate
scrollbars correctly for the diagrams that are off-center (don't start
at 0,0)

- Fixes an issue with the GLSPWebSocketConnectionHandler which did not
properly try to reconnect if it was launched before the server was
available

- Add comment section to claude.md

Author: tortmayr

.gitignore

@@ -24,3 +24,5 @@ examples/workflow-standalone/server
 
 .claude/local.settings.json
 .claude/plans
+
+.playwright-cli

CLAUDE.md

@@ -16,6 +16,17 @@ Eclipse GLSP Client monorepo. Provides the sprotty-based client framework for th
 -   After completing any code changes, always run the `/verify` skill before reporting completion
 -   If verification fails, run the `/fix` skill to auto-fix issues, then re-run `/verify`
 
+## Commenting Style
+
+-   **TSDoc (`/** ... \*/`) on the public API\*\*: document exported interfaces, types, classes, methods, and notable properties/getters. Describe intent and behavior, not the obvious signature.
+-   **Cross-reference with `{@link Symbol}`** instead of writing bare type/method names in prose.
+-   **Document non-trivial methods** with `@param`/`@returns` (and `@throws` where relevant). Skip them for self-explanatory one-liners.
+-   **Deprecations** use the fixed form `/** @deprecated Use {@link Replacement} instead */`.
+-   **Inline `//` comments explain _why_, not _what_** — keep them short and lowercase, and reserve them for non-obvious decisions or rationale.
+-   **Mark known limitations** with `// FIXME:` / `// TODO:`, and justify suppressions with `// eslint-disable-next-line <rule>`.
+-   Don't restate code in comments; let clear naming carry the _what_.
+-   Copyright headers are required on every file but are handled by `/verify` + `/fix` — don't add them manually.
+
 ## Inter-Package Import Rules
 
 These are enforced by ESLint and are easy to get wrong:

examples/workflow-glsp/src/workflow-diagram-module.ts

@@ -54,7 +54,7 @@ import '../css/diagram.css';
 import { taskEditorModule } from './direct-task-editing/task-editor-module';
 import { BranchingNode, CategoryNode, Icon, SynchronizationNode, TaskNode, WeightedEdge } from './model';
 import { WorkflowSnapper } from './workflow-snapper';
-import { WorkflowStartup } from './workflow-startup';
+import { GridDefaultVisible, WorkflowStartup } from './workflow-startup';
 import { IconView, WorkflowEdgeView } from './workflow-views';
 
 export const workflowDiagramModule = new FeatureModule(
@@ -92,6 +92,8 @@ export const workflowDiagramModule = new FeatureModule(
         });
 
         bindAsService(context, TYPES.IDiagramStartup, WorkflowStartup);
+        bind(GridDefaultVisible).toConstantValue(true);
+
         bindOrRebind(context, TYPES.ISnapper).to(WorkflowSnapper);
     },
     { featureId: Symbol('workflowDiagram') }

examples/workflow-glsp/src/workflow-startup.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2024 EclipseSource and others.
+ * Copyright (c) 2024-2026 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -18,13 +18,22 @@ import { IDiagramStartup, IGridManager } from '@eclipse-glsp/client';
 import { MaybePromise, TYPES } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 
+/**
+ * Injection symbol for the initial grid visibility applied by the {@link WorkflowStartup}.
+ * Defaults to `true` (grid shown); rebind to override (e.g. the standalone app derives it from a url
+ * parameter).
+ */
+export const GridDefaultVisible = Symbol('GridDefaultVisible');
+
 @injectable()
 export class WorkflowStartup implements IDiagramStartup {
     rank = -1;
 
     @inject(TYPES.IGridManager) @optional() protected gridManager?: IGridManager;
 
+    @inject(GridDefaultVisible) @optional() protected gridDefaultVisible?: boolean;
+
     preRequestModel(): MaybePromise<void> {
-        this.gridManager?.setGridVisible(true);
+        this.gridManager?.setGridVisible(this.gridDefaultVisible ?? true);
     }
 }

examples/workflow-glsp/src/workflow-views.tsx

@@ -41,7 +41,7 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
             <path
                 class-sprotty-edge={true}
                 class-arrow={true}
-                d='M 1,0 L 10,-4 L 10,4 Z'
+                d='M 0,0 L 9,-3.5 L 9,3.5 Z'
                 transform={`rotate(${toDegrees(angleOfPoint(Point.subtract(p1, p2)))} ${p2.x} ${p2.y}) translate(${p2.x} ${p2.y})`}
             />
         );
@@ -77,7 +77,7 @@ export class IconView extends ShapeView {
 
                     d={icon}
                 />
-                <rect class-icon-background x={0} y={0} width={25} height={20} />
+                <rect class-icon-background x={0} y={0} width={25} height={20} rx={4} ry={4} />
                 {context.renderChildren(element)}
             </g>
         );

examples/workflow-standalone/README.md

@@ -100,3 +100,22 @@ All `start` and `dev` scripts support the following flags:
 -   `--client-port <port>` – Set the webpack dev server port (default: 8082 in Node mode, 8083 in Browser mode)
 
 The server bundle download can also be skipped by setting the `SKIP_DOWNLOAD=true` environment variable.
+
+## URL Parameters
+
+The running application reads the following query parameters from the diagram URL. They are independent and can be combined, e.g.:
+
+```
+http://localhost:8082/diagram.html?grid&theme=ember&mode=dark
+```
+
+| Parameter  | Values                                           | Default       | Description                                                                                    |
+| ---------- | ------------------------------------------------ | ------------- | ---------------------------------------------------------------------------------------------- |
+| `readonly` | _flag_ (presence only)                           | editable      | Open the diagram in read-only mode (editing disabled).                                         |
+| `grid`     | _flag_ (presence only)                           | off           | Show the background grid.                                                                      |
+| `theme`    | `tide`, `graphite`, `ember`, `orchid`, `verdant` | `tide`        | Set the color theme. Persisted in local storage, so it also updates the in-app theme switcher. |
+| `mode`     | `light`, `dark`                                  | OS preference | Set light or dark appearance. Persisted in local storage.                                      |
+| `mcp`      | _flag_ (presence only)                           | off           | Enable the MCP server integration (Node mode only). Also available via the `*:mcp` scripts.    |
+
+Flag parameters only need to be present (their value is ignored), e.g. `?grid` or `?readonly`.
+Invalid `theme`/`mode` values are ignored and fall back to the stored value or, for `mode`, the OS preference.