feat(frontend): show connection status

7 files changed, 55 insertions, 3 deletions

diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index 9e41f57b..101990af 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -115,6 +115,13 @@ export default class ContentAssistService {
   }
 
   async contentAssist(context: CompletionContext): Promise<CompletionResult> {
+    if (!this.updateService.opened) {
+      this.lastCompletion = undefined;
+      return {
+        from: context.pos,
+        options: [],
+      };
+    }
     const tokenBefore = findToken(context);
     if (!context.explicit && !shouldCompleteImplicitly(tokenBefore, context)) {
       return {
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
index f9ab7b7e..a126ee40 100644
--- a/subprojects/frontend/src/xtext/HighlightingService.ts
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -31,4 +31,8 @@ export default class HighlightingService {
     });
     this.store.updateSemanticHighlighting(ranges);
   }
+
+  onDisconnect(): void {
+    this.store.updateSemanticHighlighting([]);
+  }
 }
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index c8d6fd7b..9d738d76 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -41,6 +41,15 @@ export default class OccurrencesService {
     private readonly updateService: UpdateService,
   ) {}
 
+  onReconnect(): void {
+    this.clearOccurrences();
+    this.findOccurrencesLater();
+  }
+
+  onDisconnect(): void {
+    this.clearOccurrences();
+  }
+
   onTransaction(transaction: Transaction): void {
     if (transaction.docChanged) {
       // Must clear occurrences asynchronously from `onTransaction`,
@@ -91,7 +100,7 @@ export default class OccurrencesService {
   }
 
   private async updateOccurrences() {
-    if (!this.needsOccurrences) {
+    if (!this.needsOccurrences || !this.updateService.opened) {
       this.clearOccurrences();
       return;
     }
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
index d7471cdc..63e28652 100644
--- a/subprojects/frontend/src/xtext/UpdateService.ts
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -82,6 +82,10 @@ export default class UpdateService {
     }
   }
 
+  get opened(): boolean {
+    return this.webSocketClient.opened;
+  }
+
   private idleUpdate(): void {
     if (!this.webSocketClient.opened || !this.tracker.needsUpdate) {
       return;
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
index e78318f7..72414590 100644
--- a/subprojects/frontend/src/xtext/ValidationService.ts
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -28,4 +28,8 @@ export default class ValidationService {
     });
     this.store.updateDiagnostics(diagnostics);
   }
+
+  onDisconnect(): void {
+    this.store.updateDiagnostics([]);
+  }
 }
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index 6351c9fd..c02afb3b 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -18,7 +18,7 @@ import type { XtextWebPushService } from './xtextMessages';
 const log = getLogger('xtext.XtextClient');
 
 export default class XtextClient {
-  private readonly webSocketClient: XtextWebSocketClient;
+  readonly webSocketClient: XtextWebSocketClient;
 
   private readonly updateService: UpdateService;
 
@@ -32,7 +32,8 @@ export default class XtextClient {
 
   constructor(store: EditorStore) {
     this.webSocketClient = new XtextWebSocketClient(
-      () => this.updateService.onReconnect(),
+      () => this.onReconnect(),
+      () => this.onDisconnect(),
       (resource, stateId, service, push) =>
         this.onPush(resource, stateId, service, push),
     );
@@ -46,6 +47,17 @@ export default class XtextClient {
     this.occurrencesService = new OccurrencesService(store, this.updateService);
   }
 
+  private onReconnect(): void {
+    this.updateService.onReconnect();
+    this.occurrencesService.onReconnect();
+  }
+
+  private onDisconnect(): void {
+    this.highlightingService.onDisconnect();
+    this.validationService.onDisconnect();
+    this.occurrencesService.onDisconnect();
+  }
+
   onTransaction(transaction: Transaction): void {
     // `ContentAssistService.prototype.onTransaction` needs the dirty change desc
     // _before_ the current edit, so we call it before `updateService`.
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
index eedfa365..b69e1d6c 100644
--- a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -22,6 +22,8 @@ const log = getLogger('xtext.XtextWebSocketClient');
 
 export type ReconnectHandler = () => void;
 
+export type DisconnectHandler = () => void;
+
 export type PushHandler = (
   resourceId: string,
   stateId: string,
@@ -136,6 +138,7 @@ export default class XtextWebSocketClient {
 
   constructor(
     private readonly onReconnect: ReconnectHandler,
+    private readonly onDisconnect: DisconnectHandler,
     private readonly onPush: PushHandler,
   ) {
     this.interpreter
@@ -179,10 +182,18 @@ export default class XtextWebSocketClient {
     return this.interpreter.state;
   }
 
+  get opening(): boolean {
+    return this.state.matches('connection.socketCreated.open.opening');
+  }
+
   get opened(): boolean {
     return this.state.matches('connection.socketCreated.open.opened');
   }
 
+  get errors(): string[] {
+    return this.state.context.errors;
+  }
+
   connect(): void {
     this.interpreter.send('CONNECT');
   }
@@ -261,6 +272,7 @@ export default class XtextWebSocketClient {
   }
 
   private cancelPendingRequests(): void {
+    this.onDisconnect();
     this.pendingRequests.forEach((task) =>
       task.reject(new CancelledError('Closing connection')),
     );