fix(ui): Improve terminal data channel handling for cross-browser compatibility (#210)

- 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

Author: adamshiervani

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();