update

web/app/Filament/Pages/Terminal.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace app\Filament\Pages;
+
+use Filament\Pages\Page;
+
+class Terminal extends Page
+{
+    protected static ?string $navigationIcon = 'heroicon-o-command-line';
+
+    protected static string $view = 'filament.pages.terminal';
+
+    protected static ?string $navigationGroup = 'Server Management';
+
+    protected static ?string $navigationLabel = 'Terminal';
+
+    protected static ?int $navigationSort = 1;
+
+}

web/package.json

@@ -16,5 +16,8 @@
         "tailwindcss": "^3.4.3",
         "tippy.js": "^6.3.7",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "@xterm/xterm": "^5.5.0"
     }
 }

web/resources/views/filament/pages/terminal.blade.php

@@ -0,0 +1,34 @@
+<x-filament-panels::page>
+
+    <div>
+        <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+        <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
+
+
+        <div id="js-web-terminal"></div>
+        <script>
+
+            const terminal = new Terminal();
+            terminal.open(document.getElementById('js-web-terminal'));
+            //terminal.resize(160, 30);
+
+            const socket = new WebSocket(`ws://49.13.166.115:3311`);
+            socket.addEventListener('open', (_) => {
+                terminal.onData((data) => socket.send(data));
+                socket.addEventListener('message', (evt) => terminal.write(evt.data));
+            });
+            socket.addEventListener('error', (_) => {
+                terminal.reset();
+                terminal.writeln('Connection error.');
+            });
+            socket.addEventListener('close', (evt) => {
+                if (evt.wasClean) {
+                    terminal.reset();
+                    terminal.writeln(evt.reason ?? 'Connection closed.');
+                }
+            });
+        </script>
+
+    </div>
+
+</x-filament-panels::page>