feat(frontend): enhance MudSocketAdapter with hooks for message transformation and lifecycle management

Author: mystiker

frontend/src/app/core/mud/components/mud-client/mud-client.component.ts

@@ -17,6 +17,11 @@ import { MudService } from '../../services/mud.service';
 import { SecureString } from '@mudlet3/frontend/shared';
 
 type SocketListener = EventListener;
+type MudSocketAdapterHooks = {
+  transformMessage?: (data: string) => string;
+  beforeMessage?: (data: string) => void;
+  afterMessage?: (data: string) => void;
+};
 
 class MudSocketAdapter {
   public binaryType: BinaryType = 'arraybuffer';
@@ -25,9 +30,23 @@ class MudSocketAdapter {
   private readonly listeners = new Map<string, Set<SocketListener>>();
   private readonly subscription: Subscription;
 
-  constructor(private readonly mudService: MudService) {
+  constructor(
+    private readonly mudService: MudService,
+    private readonly hooks?: MudSocketAdapterHooks,
+  ) {
     this.subscription = this.mudService.mudOutput$.subscribe(({ data }) => {
-      this.dispatch('message', new MessageEvent('message', { data }));
+      this.hooks?.beforeMessage?.(data);
+
+      const transformed = this.hooks?.transformMessage?.(data) ?? data;
+
+      if (transformed.length > 0) {
+        this.dispatch(
+          'message',
+          new MessageEvent('message', { data: transformed }),
+        );
+      }
+
+      this.hooks?.afterMessage?.(transformed);
     });
   }
 
@@ -88,7 +107,14 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
 
   private readonly terminal: Terminal;
   private readonly terminalFitAddon = new FitAddon();
-  private readonly socketAdapter = new MudSocketAdapter(this.mudService);
+  private readonly socketAdapter = new MudSocketAdapter(
+    this.mudService,
+    {
+      transformMessage: (data) => this.transformMudOutput(data),
+      beforeMessage: (data) => this.beforeMudOutput(data),
+      afterMessage: (data) => this.afterMudOutput(data),
+    },
+  );
   private readonly terminalAttachAddon = new AttachAddon(
     this.socketAdapter as unknown as WebSocket,
     { bidirectional: false },
@@ -107,6 +133,11 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
   private currentShowEcho = true;
   private isEditMode = true;
   private lastViewportSize?: { columns: number; rows: number };
+  private terminalReady = false;
+  private editLineHidden = false;
+  private serverLineBuffer = '';
+  private hiddenPrompt = '';
+  private leadingLineBreaksToStrip = 0;
 
   @ViewChild('hostRef', { static: true })
   private readonly terminalRef!: ElementRef<HTMLDivElement>;
@@ -143,6 +174,7 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     );
 
     this.resizeObs.observe(this.terminalRef.nativeElement);
+    this.terminalReady = true;
 
     const columns = this.terminal.cols;
     const rows = this.terminal.rows + 1;
@@ -269,6 +301,10 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
       this.lastInputWasCarriageReturn = false;
     }
 
+    this.editLineHidden = false;
+    this.serverLineBuffer = '';
+    this.hiddenPrompt = '';
+    this.leadingLineBreaksToStrip = 0;
     this.updateLocalEcho(this.currentShowEcho);
   }
 
@@ -315,4 +351,142 @@ export class MudClientComponent implements AfterViewInit, OnDestroy {
     // Default to consuming only the ESC character
     return 1;
   }
+
+  private beforeMudOutput(_data: string) {
+    if (
+      !this.isEditMode ||
+      !this.terminalReady ||
+      !this.localEchoEnabled ||
+      this.inputBuffer.length === 0 ||
+      this.editLineHidden
+    ) {
+      return;
+    }
+
+    this.hiddenPrompt = this.serverLineBuffer;
+    this.serverLineBuffer = '';
+    this.leadingLineBreaksToStrip = 1;
+    this.terminal.write('\r\u001b[2K');
+    this.editLineHidden = true;
+  }
+
+  private afterMudOutput(data: string) {
+    this.trackServerLine(data);
+
+    if (
+      !this.editLineHidden ||
+      !this.isEditMode ||
+      !this.terminalReady ||
+      !this.localEchoEnabled ||
+      this.inputBuffer.length === 0
+    ) {
+      return;
+    }
+
+    queueMicrotask(() => this.restoreEditInput());
+  }
+
+  private restoreEditInput() {
+    if (!this.editLineHidden) {
+      return;
+    }
+
+    if (
+      !this.isEditMode ||
+      !this.terminalReady ||
+      !this.localEchoEnabled ||
+      this.inputBuffer.length === 0
+    ) {
+      this.editLineHidden = false;
+      return;
+    }
+
+    this.terminal.write('\r\u001b[2K');
+
+    const prefix =
+      this.serverLineBuffer.length > 0 ? this.serverLineBuffer : this.hiddenPrompt;
+
+    if (prefix.length > 0) {
+      this.terminal.write(prefix);
+    }
+
+    this.terminal.write(this.inputBuffer);
+    this.editLineHidden = false;
+    this.hiddenPrompt = '';
+    this.serverLineBuffer = prefix;
+    this.leadingLineBreaksToStrip = 0;
+  }
+
+  private transformMudOutput(data: string): string {
+    if (this.leadingLineBreaksToStrip === 0 || data.length === 0) {
+      return data;
+    }
+
+    let startIndex = 0;
+    let remainingBreaks = this.leadingLineBreaksToStrip;
+
+    while (startIndex < data.length && remainingBreaks > 0) {
+      const char = data[startIndex];
+
+      if (char === '\n') {
+        remainingBreaks -= 1;
+        startIndex += 1;
+        continue;
+      }
+
+      if (char === '\r') {
+        startIndex += 1;
+        continue;
+      }
+
+      break;
+    }
+
+    this.leadingLineBreaksToStrip = remainingBreaks;
+
+    if (startIndex === 0) {
+      this.leadingLineBreaksToStrip = 0;
+      return data;
+    }
+
+    if (startIndex >= data.length) {
+      return '';
+    }
+
+    this.leadingLineBreaksToStrip = 0;
+    return data.slice(startIndex);
+  }
+
+  private trackServerLine(data: string) {
+    let index = 0;
+
+    while (index < data.length) {
+      const char = data[index];
+
+      if (char === '\r' || char === '\n') {
+        this.serverLineBuffer = '';
+        index += 1;
+        continue;
+      }
+
+      if (char === '\b' || char === '\u007f') {
+        this.serverLineBuffer = this.serverLineBuffer.slice(0, -1);
+        index += 1;
+        continue;
+      }
+
+      if (char === '\u001b') {
+        const consumed = this.skipEscapeSequence(data.slice(index));
+        const sequence =
+          consumed > 0 ? data.slice(index, index + consumed) : char;
+
+        this.serverLineBuffer += sequence;
+        index += Math.max(consumed, 1);
+        continue;
+      }
+
+      this.serverLineBuffer += char;
+      index += 1;
+    }
+  }
 }