From df5faca2863351d961dad7e4670479763af45ec7 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Fri, 28 Feb 2025 14:19:32 +0100
Subject: [PATCH] fix(ui): Improve terminal data channel handling for
 cross-browser compatibility

- Add support for different binary data types (ArrayBuffer and Blob)
- Implement FileReader for converting Blob data in Firefox
- Send initial terminal size on data channel open
---
 ui/src/components/Terminal.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Terminal.tsx b/ui/src/components/Terminal.tsx
index 9fe3b9c..1456e74 100644
--- a/ui/src/components/Terminal.tsx
+++ b/ui/src/components/Terminal.tsx
@@ -84,10 +84,23 @@ function Terminal({
     if (readyState !== "open") return;
 
     const abortController = new AbortController();
+    const binaryType = dataChannel.binaryType;
     dataChannel.addEventListener(
       "message",
       e => {
-        instance?.write(new Uint8Array(e.data));
+        // Handle binary data differently based on browser implementation
+        // Firefox sends data as blobs, chrome sends data as arraybuffer
+        if (binaryType === "arraybuffer") {
+          instance?.write(new Uint8Array(e.data));
+        } else if (binaryType === "blob") {
+          const reader = new FileReader();
+          reader.onload = () => {
+            if (!instance) return;
+            if (!reader.result) return;
+            instance.write(new Uint8Array(reader.result as ArrayBuffer));
+          };
+          reader.readAsArrayBuffer(e.data);
+        }
       },
       { signal: abortController.signal },
     );
@@ -106,6 +119,11 @@ function Terminal({
       }
     });
 
+    // Send initial terminal size
+    if (dataChannel.readyState === "open") {
+      dataChannel.send(JSON.stringify({ rows: instance?.rows, cols: instance?.cols }));
+    }
+
     return () => {
       abortController.abort();
       onDataHandler?.dispose();