feat: fully functional terminal for command center

2024-06-25 15:29:33 -03:00
parent fcfbba4dc6
commit c2ea8996ee
15 changed files with 624 additions and 57 deletions
--- a/app/Livewire/Project/Shared/ExecuteContainerCommand.php
+++ b/app/Livewire/Project/Shared/ExecuteContainerCommand.php
@@ -2,17 +2,15 @@

 namespace App\Livewire\Project\Shared;

-use App\Actions\Server\RunCommand;
 use App\Models\Application;
 use App\Models\Server;
 use App\Models\Service;
 use Illuminate\Support\Collection;
+use Livewire\Attributes\On;
 use Livewire\Component;

 class ExecuteContainerCommand extends Component
 {
-    public string $command;
-
    public string $container;

    public Collection $containers;
@@ -23,8 +21,6 @@ class ExecuteContainerCommand extends Component

    public string $type;

-    public string $workDir = '';
-
    public Server $server;

    public Collection $servers;
@@ -33,7 +29,6 @@ class ExecuteContainerCommand extends Component
        'server' => 'required',
        'container' => 'required',
        'command' => 'required',
-        'workDir' => 'nullable',
    ];

    public function mount()
@@ -115,7 +110,8 @@ class ExecuteContainerCommand extends Component
        }
    }

-    public function runCommand()
+    #[On('connectToContainer')]
+    public function connectToContainer()
    {
        try {
            if (data_get($this->parameters, 'application_uuid')) {
@@ -132,14 +128,13 @@ class ExecuteContainerCommand extends Component
            if ($server->isForceDisabled()) {
                throw new \RuntimeException('Server is disabled.');
            }
-            $cmd = "sh -c 'if [ -f ~/.profile ]; then . ~/.profile; fi; ".str_replace("'", "'\''", $this->command)."'";
-            if (! empty($this->workDir)) {
-                $exec = "docker exec -w {$this->workDir} {$container_name} {$cmd}";
-            } else {
-                $exec = "docker exec {$container_name} {$cmd}";
-            }
-            $activity = RunCommand::run(server: $server, command: $exec);
-            $this->dispatch('activityMonitor', $activity->id);
+
+            $this->dispatch('send-terminal-command',
+                true,
+                $container_name,
+                $server->uuid,
+            );
+
        } catch (\Throwable $e) {
            return handleError($e, $this);
        }
--- a/app/Livewire/Project/Shared/Terminal.php
+++ b/app/Livewire/Project/Shared/Terminal.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Livewire\Project\Shared;
+
+use App\Models\Server;
+use Livewire\Attributes\On;
+use Livewire\Component;
+
+class Terminal extends Component
+{
+    #[On('send-terminal-command')]
+    public function sendTerminalCommand($isContainer, $identifier, $serverUuid)
+    {
+        $server = Server::whereUuid($serverUuid)->firstOrFail();
+
+        if (auth()->user()) {
+            $teams = auth()->user()->teams->pluck('id');
+            if (! $teams->contains($server->team_id) && ! $teams->contains(0)) {
+                throw new \Exception('User is not part of the team that owns this server');
+            }
+        }
+
+        if ($isContainer) {
+            $status = getContainerStatus($server, $identifier);
+            if ($status !== 'running') {
+                return handleError(new \Exception('Container is not running'), $this);
+            }
+            $command = generateSshCommand($server, "docker exec -it {$identifier} sh -c 'if [ -f ~/.profile ]; then . ~/.profile; fi; if [ -n \"\$SHELL\" ]; then exec \$SHELL; else sh; fi'");
+        } else {
+            $command = generateSshCommand($server, "sh -c 'if [ -f ~/.profile ]; then . ~/.profile; fi; if [ -n \"\$SHELL\" ]; then exec \$SHELL; else sh; fi'");
+        }
+
+        // ssh command is sent back to frontend then to websocket
+        // this is done because the websocket connection is not available here
+        // a better solution would be to remove websocket on NodeJS and work with something like
+        // 1. Laravel Pusher/Echo connection (not possible without a sdk)
+        // 2. Ratchet / Revolt / ReactPHP / Event Loop (possible but hard to implement and huge dependencies)
+        // 3. Just found out about this https://github.com/sirn-se/websocket-php, perhaps it can be used
+        $this->dispatch('send-back-command', $command);
+    }
+
+    public function render()
+    {
+        return view('livewire.project.shared.terminal');
+    }
+}
--- a/app/Livewire/RunCommand.php
+++ b/app/Livewire/RunCommand.php
@@ -2,42 +2,67 @@

 namespace App\Livewire;

-use App\Actions\Server\RunCommand as ServerRunCommand;
 use App\Models\Server;
+use Livewire\Attributes\On;
 use Livewire\Component;

 class RunCommand extends Component
 {
-    public string $command;
-
-    public $server;
+    public $selected_uuid;

    public $servers = [];

-    protected $rules = [
-        'server' => 'required',
-        'command' => 'required',
-    ];
-
-    protected $validationAttributes = [
-        'server' => 'server',
-        'command' => 'command',
-    ];
+    public $containers = [];

    public function mount($servers)
    {
        $this->servers = $servers;
-        $this->server = $servers[0]->uuid;
+        $this->selected_uuid = $servers[0]->uuid;
+        $this->containers = $this->getAllActiveContainers();
    }

-    public function runCommand()
+    private function getAllActiveContainers()
    {
-        $this->validate();
-        try {
-            $activity = ServerRunCommand::run(server: Server::where('uuid', $this->server)->first(), command: $this->command);
-            $this->dispatch('activityMonitor', $activity->id);
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
+        return Server::all()->flatMap(function ($server) {
+            if (! $server->isFunctional()) {
+                return [];
+            }
+
+            return $server->definedResources()
+                ->filter(fn ($resource) => str_starts_with($resource->status, 'running:'))
+                ->map(function ($resource) use ($server) {
+                    $container_name = $resource->uuid;
+
+                    if (class_basename($resource) === 'Application' || class_basename($resource) === 'Service') {
+                        if ($server->isSwarm()) {
+                            $container_name = $resource->uuid.'_'.$resource->uuid;
+                        } else {
+                            $current_containers = getCurrentApplicationContainerStatus($server, $resource->id, includePullrequests: true);
+                            $container_name = data_get($current_containers->first(), 'Names');
+                        }
+                    }
+
+                    return [
+                        'name' => $resource->name,
+                        'connection_name' => $container_name,
+                        'uuid' => $resource->uuid,
+                        'status' => $resource->status,
+                        'server' => $server,
+                        'server_uuid' => $server->uuid,
+                    ];
+                });
+        });
+    }
+
+    #[On('connectToContainer')]
+    public function connectToContainer()
+    {
+        $container = collect($this->containers)->firstWhere('uuid', $this->selected_uuid);
+
+        $this->dispatch('send-terminal-command',
+            isset($container),
+            $container['connection_name'] ?? $this->selected_uuid,
+            $container['server_uuid'] ?? $this->selected_uuid
+        );
    }
 }
--- a/app/Models/Server.php
+++ b/app/Models/Server.php
@@ -295,6 +295,13 @@ respond 404
                                'service' => 'coolify-realtime',
                                'rule' => "Host(`{$host}`) && PathPrefix(`/app`)",
                            ],
+                            'coolify-terminal-ws' => [
+                                'entryPoints' => [
+                                    0 => 'http',
+                                ],
+                                'service' => 'coolify-terminal',
+                                'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)",
+                            ],
                        ],
                        'services' => [
                            'coolify' => [
@@ -315,6 +322,15 @@ respond 404
                                    ],
                                ],
                            ],
+                            'coolify-terminal' => [
+                                'loadBalancer' => [
+                                    'servers' => [
+                                        0 => [
+                                            'url' => 'http://coolify-terminal:6002',
+                                        ],
+                                    ],
+                                ],
+                            ],
                        ],
                    ],
                ];
@@ -344,6 +360,16 @@ respond 404
                            'certresolver' => 'letsencrypt',
                        ],
                    ];
+                    $traefik_dynamic_conf['http']['routers']['coolify-terminal-wss'] = [
+                        'entryPoints' => [
+                            0 => 'https',
+                        ],
+                        'service' => 'coolify-terminal',
+                        'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)",
+                        'tls' => [
+                            'certresolver' => 'letsencrypt',
+                        ],
+                    ];
                }
                $yaml = Yaml::dump($traefik_dynamic_conf, 12, 2);
                $yaml =
@@ -377,6 +403,9 @@ $schema://$host {
    handle /app/* {
        reverse_proxy coolify-realtime:6001
    }
+    handle /terminal/* {
+        reverse_proxy coolify-terminal:6002
+    }
    reverse_proxy coolify:80
 }";
                $base64 = base64_encode($caddy_file);
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -52,8 +52,18 @@ services:
      SOKETI_DEFAULT_APP_ID: "${PUSHER_APP_ID:-coolify}"
      SOKETI_DEFAULT_APP_KEY: "${PUSHER_APP_KEY:-coolify}"
      SOKETI_DEFAULT_APP_SECRET: "${PUSHER_APP_SECRET:-coolify}"
+  terminal:
+    env_file:
+      - .env
+    pull_policy: always
+    working_dir: /var/www/html
+    ports:
+      - "${FORWARD_TERMINAL_PORT:-6002}:6002"
+    volumes:
+      - .:/var/www/html:cached
+    command: sh -c "apk add --no-cache openssh-client && node --watch /var/www/html/terminal-server.js"
  vite:
-    image: node:20
+    image: node:alpine
    pull_policy: always
    working_dir: /var/www/html
    # environment:
@@ -62,7 +72,7 @@ services:
      - "${VITE_PORT:-5173}:${VITE_PORT:-5173}"
    volumes:
      - .:/var/www/html:cached
-    command: sh -c "npm install && npm run dev"
+    command: sh -c "apk add --no-cache make g++ python3 && npm install && npm run dev"
    networks:
      - coolify
  testing-host:
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -125,6 +125,19 @@ services:
      interval: 5s
      retries: 10
      timeout: 2s
+  terminal:
+    working_dir: /var/www/html
+    ports:
+      - "${TERMINAL_PORT:-6002}:6002"
+    volumes:
+      - .:/var/www/html:cached
+    command: sh -c "apk add --no-cache openssh-client && node /var/www/html/terminal-server.js"
+    healthcheck:
+      test: wget -qO- http://localhost:6002/ready || exit 1
+      interval: 5s
+      retries: 10
+      timeout: 2s
+
 volumes:
  coolify-db:
    name: coolify-db
--- a/docker-compose.windows.yml
+++ b/docker-compose.windows.yml
@@ -121,6 +121,24 @@ services:
      interval: 5s
      retries: 10
      timeout: 2s
+  terminal:
+    image: node:alpine
+    pull_policy: always
+    container_name: coolify-terminal
+    restart: always
+    env_file:
+      - .env
+    working_dir: /var/www/html
+    ports:
+      - "${TERMINAL_PORT:-6002}:6002"
+    volumes:
+      - .:/var/www/html:cached
+    command: sh -c "apk add --no-cache openssh-client && node /var/www/html/terminal-server.js"
+    healthcheck:
+      test: wget -qO- http://localhost:6002/ready || exit 1
+      interval: 5s
+      retries: 10
+      timeout: 2s
 volumes:
  coolify-db:
    name: coolify-db
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -28,6 +28,12 @@ services:
        restart: always
        networks:
            - coolify
+    terminal:
+        image: node:alpine
+        container_name: coolify-terminal
+        restart: always
+        networks:
+            - coolify
 networks:
    coolify:
        name: coolify
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,13 @@
            "dependencies": {
                "@tailwindcss/forms": "0.5.7",
                "@tailwindcss/typography": "0.5.13",
+                "@xterm/addon-fit": "^0.10.0",
+                "@xterm/xterm": "^5.5.0",
                "alpinejs": "3.14.0",
                "ioredis": "5.4.1",
-                "tailwindcss-scrollbar": "0.1.0"
+                "node-pty": "^1.0.0",
+                "tailwindcss-scrollbar": "0.1.0",
+                "ws": "^8.17.0"
            },
            "devDependencies": {
                "@vitejs/plugin-vue": "4.5.1",
@@ -692,6 +696,19 @@
            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
        },
+        "node_modules/@xterm/addon-fit": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+            "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+            "peerDependencies": {
+                "@xterm/xterm": "^5.0.0"
+            }
+        },
+        "node_modules/@xterm/xterm": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+            "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
+        },
        "node_modules/alpinejs": {
            "version": "3.14.0",
            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.0.tgz",
@@ -1474,6 +1491,11 @@
                "thenify-all": "^1.0.0"
            }
        },
+        "node_modules/nan": {
+            "version": "2.20.0",
+            "resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
+            "integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw=="
+        },
        "node_modules/nanoid": {
            "version": "3.3.7",
            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -1491,6 +1513,15 @@
                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
            }
        },
+        "node_modules/node-pty": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.0.0.tgz",
+            "integrity": "sha512-wtBMWWS7dFZm/VgqElrTvtfMq4GzJ6+edFI0Y0zyzygUSZMgZdraDUMUhCIvkjhJjme15qWmbyJbtAx4ot4uZA==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "nan": "^2.17.0"
+            }
+        },
        "node_modules/node-releases": {
            "version": "2.0.14",
            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -2123,6 +2154,26 @@
            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
        },
+        "node_modules/ws": {
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+            "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/yaml": {
            "version": "2.3.1",
            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -20,8 +20,12 @@
    "dependencies": {
        "@tailwindcss/forms": "0.5.7",
        "@tailwindcss/typography": "0.5.13",
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/xterm": "^5.5.0",
        "alpinejs": "3.14.0",
        "ioredis": "5.4.1",
-        "tailwindcss-scrollbar": "0.1.0"
+        "node-pty": "^1.0.0",
+        "tailwindcss-scrollbar": "0.1.0",
+        "ws": "^8.17.0"
    }
 }
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,3 +4,18 @@
 // const app = createApp({});
 // app.component("magic-bar", MagicBar);
 // app.mount("#vue");
+
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { FitAddon } from '@xterm/addon-fit';
+
+if (!window.term) {
+    window.term = new Terminal({
+        cols: 80,
+        rows: 30,
+        fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
+        cursorBlink: true
+    });
+    window.fitAddon = new FitAddon();
+    window.term.loadAddon(window.fitAddon);
+}
--- a/resources/views/livewire/project/shared/execute-container-command.blade.php
+++ b/resources/views/livewire/project/shared/execute-container-command.blade.php
@@ -22,11 +22,8 @@
        </div>
        <div wire:loading.remove wire:target='loadContainers'>
            @if (count($containers) > 0)
-                <form class="flex flex-col gap-2 pt-4" wire:submit='runCommand'>
-                    <div class="flex gap-2">
-                        <x-forms.input placeholder="ls -l" autofocus id="command" label="Command" required />
-                        <x-forms.input id="workDir" label="Working directory" />
-                    </div>
+                <form class="flex flex-col justify-center gap-2 pt-4 xl:items-end xl:flex-row"
+                    wire:submit="$dispatchSelf('connectToContainer')">
                    <x-forms.select label="Container" id="container" required>
                        <option disabled selected>Select container</option>
                        @if (data_get($this->parameters, 'application_uuid'))
@@ -47,14 +44,14 @@
                            </option>
                        @endif
                    </x-forms.select>
-                    <x-forms.button type="submit">Run</x-forms.button>
+                    <x-forms.button type="submit">Start Connection</x-forms.button>
                </form>
            @else
                <div class="pt-4">No containers are not running.</div>
            @endif
        </div>
    </div>
-    <div class="w-full pt-10 mx-auto">
-        <livewire:activity-monitor header="Command output" />
+    <div class="w-full mx-auto">
+        <livewire:project.shared.terminal />
    </div>
 </div>
--- a/resources/views/livewire/project/shared/terminal.blade.php
+++ b/resources/views/livewire/project/shared/terminal.blade.php
@@ -0,0 +1,191 @@
+<div x-data="data()">
+    <div x-show="!terminalActive" class="flex items-center justify-center w-full py-4 mx-auto h-[510px]">
+        <div class="w-full h-full border rounded dark:bg-coolgray-100 dark:border-coolgray-300">
+            <span class="font-mono text-sm text-gray-500">(connection closed)</span>
+        </div>
+    </div>
+    <div x-ref="terminalWrapper"
+        :class="fullscreen ? 'fullscreen' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
+        <div id="terminal" wire:ignore></div>
+        <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4" x-on:click="makeFullscreen"><svg
+                class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                    stroke-width="2" d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
+            </svg></button>
+        <button title="Fullscreen" x-show="!fullscreen && terminalActive" class="absolute top-6 right-4"
+            x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <g fill="none">
+                    <path
+                        d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
+                    <path fill="currentColor"
+                        d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586l4.793-4.793ZM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3h5Z" />
+                </g>
+            </svg></button>
+    </div>
+
+    @script
+        <script>
+            const MAX_PENDING_WRITES = 5;
+            let pendingWrites = 0;
+            let paused = false;
+
+            let socket;
+            let commandBuffer = '';
+
+            function initializeWebSocket() {
+                if (!socket || socket.readyState === WebSocket.CLOSED) {
+                    socket = new WebSocket((window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
+                        "{{ str_replace(['http://', 'https://'], '', config('app.url')) }}" +
+                        ':6002/terminal');
+                    socket.onmessage = handleSocketMessage;
+                    socket.onerror = (e) => {
+                        console.error('WebSocket error:', e);
+                    };
+                }
+            }
+
+            function handleSocketMessage(event) {
+                // Initialize Terminal
+                if (event.data === 'pty-ready') {
+                    term.open(document.getElementById('terminal'));
+                    $data.terminalActive = true;
+                    term.reset();
+                    term.focus();
+                    document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded')
+                    $data.resizeTerminal()
+                } else {
+                    pendingWrites++;
+                    term.write(event.data, flowControlCallback);
+                }
+            }
+
+            function flowControlCallback() {
+                pendingWrites--;
+                if (pendingWrites > MAX_PENDING_WRITES && !paused) {
+                    paused = true;
+                    socket.send(JSON.stringify({
+                        pause: true
+                    }));
+                    return;
+                }
+                if (pendingWrites <= MAX_PENDING_WRITES && paused) {
+                    paused = false;
+                    socket.send(JSON.stringify({
+                        resume: true
+                    }));
+                    return;
+                }
+            }
+
+            term.onData((data) => {
+                socket.send(JSON.stringify({
+                    message: data
+                }));
+
+                // Type CTRL + D or exit in the terminal
+                if (data === '\x04' || (data === '\r' && stripAnsiCommands(commandBuffer).trim() === 'exit')) {
+                    checkIfProcessIsRunningAndKillIt();
+                    setTimeout(() => {
+                        term.reset();
+                        term.write('(connection closed)');
+                        $data.terminalActive = false;
+                    }, 500);
+                    commandBuffer = '';
+                } else if (data === '\r') {
+                    commandBuffer = '';
+                } else {
+                    commandBuffer += data;
+                }
+            });
+
+            function stripAnsiCommands(input) {
+                return input.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
+            }
+
+            // Copy and paste
+            // Enables ctrl + c and ctrl + v
+            // defaults otherwise to ctrl + insert, shift + insert
+            term.attachCustomKeyEventHandler((arg) => {
+                if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
+                    navigator.clipboard.readText()
+                        .then(text => {
+                            socket.send(JSON.stringify({
+                                message: text
+                            }));
+                        })
+                };
+
+                if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
+                    const selection = term.getSelection();
+                    if (selection) {
+                        navigator.clipboard.writeText(selection);
+                        return false;
+                    }
+                }
+                return true;
+            });
+
+            $wire.on('send-back-command', function(command) {
+                socket.send(JSON.stringify({
+                    command: command
+                }));
+            });
+
+            window.addEventListener('beforeunload', function(e) {
+                checkIfProcessIsRunningAndKillIt();
+            });
+
+            function checkIfProcessIsRunningAndKillIt() {
+                socket.send(JSON.stringify({
+                    checkActive: 'force'
+                }));
+            }
+
+            window.onresize = function() {
+                $data.resizeTerminal()
+            };
+
+            Alpine.data('data', () => ({
+                fullscreen: false,
+                terminalActive: false,
+                init() {
+                    this.$watch('terminalActive', (value) => {
+                        this.$nextTick(() => {
+                            if (value) {
+                                $refs.terminalWrapper.style.display = 'block';
+                                this.resizeTerminal();
+                            } else {
+                                $refs.terminalWrapper.style.display = 'none';
+                            }
+                        });
+                    });
+                },
+                makeFullscreen() {
+                    this.fullscreen = !this.fullscreen;
+                    $nextTick(() => {
+                        this.resizeTerminal()
+                    })
+                },
+
+                resizeTerminal() {
+                    if (!this.terminalActive) return;
+
+                    fitAddon.fit();
+                    const height = $refs.terminalWrapper.clientHeight;
+                    const rows = height / term._core._renderService._charSizeService.height - 1;
+                    var termWidth = term.cols;
+                    var termHeight = parseInt(rows.toString(), 10);
+                    term.resize(termWidth, termHeight);
+                    socket.send(JSON.stringify({
+                        resize: {
+                            cols: termWidth,
+                            rows: termHeight
+                        }
+                    }));
+                }
+            }));
+
+            initializeWebSocket();
+        </script>
+    @endscript
+</div>
--- a/resources/views/livewire/run-command.blade.php
+++ b/resources/views/livewire/run-command.blade.php
@@ -1,19 +1,23 @@
 <div>
-    <form class="flex flex-col justify-center gap-2 xl:items-end xl:flex-row" wire:submit='runCommand'>
-        <x-forms.input placeholder="ls -l" autofocus id="command" label="Command" required />
-        <x-forms.select label="Server" id="server" required>
+    <form class="flex flex-col justify-center gap-2 xl:items-end xl:flex-row"
+        wire:submit="$dispatchSelf('connectToContainer')">
+        <x-forms.select label="Select Server or Container" id="server" required wire:model="selected_uuid">
            @foreach ($servers as $server)
                @if ($loop->first)
                    <option selected value="{{ $server->uuid }}">{{ $server->name }}</option>
                @else
                    <option value="{{ $server->uuid }}">{{ $server->name }}</option>
                @endif
+                @foreach ($containers as $container)
+                    @if ($container['server_uuid'] == $server->uuid)
+                        <option value="{{ $container['uuid'] }}">
+                            {{ $server->name }} -> {{ $container['name'] }}
+                        </option>
+                    @endif
+                @endforeach
            @endforeach
        </x-forms.select>
-        <x-forms.button type="submit">Execute Command
-        </x-forms.button>
+        <x-forms.button type="submit">Start Connection</x-forms.button>
    </form>
-    <div class="w-full pt-10 mx-auto">
-        <livewire:activity-monitor header="Command output" />
-    </div>
+    <livewire:project.shared.terminal />
 </div>
--- a/terminal-server.js
+++ b/terminal-server.js
@@ -0,0 +1,163 @@
+import { WebSocketServer } from 'ws';
+import http from 'http';
+import pty from 'node-pty';
+
+const server = http.createServer((req, res) => {
+    if (req.url === '/ready') {
+        res.writeHead(200, { 'Content-Type': 'text/plain' });
+        res.end('OK');
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not Found');
+    }
+});
+
+const wss = new WebSocketServer({ server, path: '/terminal' });
+const userSessions = new Map();
+
+wss.on('connection', (ws) => {
+    const userId = generateUserId();
+    const userSession = { ws, userId, ptyProcess: null, isActive: false };
+    userSessions.set(userId, userSession);
+
+    ws.on('message', (message) => handleMessage(userSession, message));
+    ws.on('error', (err) => handleError(err, userId));
+    ws.on('close', () => handleClose(userId));
+});
+
+const messageHandlers = {
+    message: (session, data) => session.ptyProcess.write(data),
+    resize: (session, { cols, rows }) => session.ptyProcess.resize(cols, rows),
+    pause: (session) => session.ptyProcess.pause(),
+    resume: (session) => session.ptyProcess.resume(),
+    checkActive: (session, data) => {
+        if (data === 'force' && session.isActive) {
+            killPtyProcess(session.userId);
+        } else {
+            session.ws.send(session.isActive);
+        }
+    },
+    command: (session, data) => handleCommand(session.ws, data, session.userId)
+};
+
+function handleMessage(userSession, message) {
+    const parsed = parseMessage(message);
+    if (!parsed) return;
+
+    Object.entries(parsed).forEach(([key, value]) => {
+        const handler = messageHandlers[key];
+        if (handler && (userSession.isActive || key === 'checkActive' || key === 'command')) {
+            handler(userSession, value);
+        }
+    });
+}
+
+function parseMessage(message) {
+    try {
+        return JSON.parse(message);
+    } catch (e) {
+        console.error('Failed to parse message:', e);
+        return null;
+    }
+}
+
+async function handleCommand(ws, command, userId) {
+    const userSession = userSessions.get(userId);
+
+    if (userSession && userSession.isActive) {
+        await killPtyProcess(userId);
+    }
+
+    const commandString = command[0].split('\n').join(' ');
+    const timeout = extractTimeout(commandString);
+    const sshArgs = extractSshArgs(commandString);
+    const hereDocContent = extractHereDocContent(commandString);
+    const options = {
+        name: 'xterm-color',
+        cols: 80,
+        rows: 30,
+        cwd: process.env.HOME,
+        env: process.env
+    };
+
+    // NOTE: - Initiates a process within the Terminal container
+    //         Establishes an SSH connection to root@coolify with RequestTTY enabled
+    //         Executes the 'docker exec' command to connect to a specific container
+    //         If the user types 'exit', it terminates the container connection and reverts to the server.
+    const ptyProcess = pty.spawn('ssh', sshArgs.concat(['bash']), options);
+    userSession.ptyProcess = ptyProcess;
+    userSession.isActive = true;
+    ptyProcess.write(hereDocContent + '\n');
+    ptyProcess.write('clear\n');
+
+    ws.send('pty-ready');
+
+    ptyProcess.onData((data) => ws.send(data));
+
+    ptyProcess.onExit(({ exitCode, signal }) => {
+        console.error(`Process exited with code ${exitCode} and signal ${signal}`);
+        userSession.isActive = false;
+    });
+
+    if (timeout) {
+        setTimeout(async () => {
+            await killPtyProcess(userId);
+        }, timeout * 1000);
+    }
+}
+
+async function handleError(err, userId) {
+    console.error('WebSocket error:', err);
+    await killPtyProcess(userId);
+}
+
+async function handleClose(userId) {
+    await killPtyProcess(userId);
+    userSessions.delete(userId);
+}
+
+async function killPtyProcess(userId) {
+    const session = userSessions.get(userId);
+    if (!session?.ptyProcess) return false;
+
+    return new Promise((resolve) => {
+        session.ptyProcess.on('exit', () => {
+            session.isActive = false;
+            resolve(true);
+        });
+
+        session.ptyProcess.kill();
+    });
+}
+
+function generateUserId() {
+    return Math.random().toString(36).substring(2, 11);
+}
+
+function extractTimeout(commandString) {
+    const timeoutMatch = commandString.match(/timeout (\d+)/);
+    return timeoutMatch ? parseInt(timeoutMatch[1], 10) : null;
+}
+
+function extractSshArgs(commandString) {
+    const sshCommandMatch = commandString.match(/ssh (.+?) 'bash -se'/);
+    let sshArgs = sshCommandMatch ? sshCommandMatch[1].split(' ') : [];
+    sshArgs = sshArgs.map(arg => arg === 'RequestTTY=no' ? 'RequestTTY=yes' : arg);
+    if (!sshArgs.includes('RequestTTY=yes')) {
+        sshArgs.push('-o', 'RequestTTY=yes');
+    }
+    return sshArgs;
+}
+
+function extractHereDocContent(commandString) {
+    const delimiterMatch = commandString.match(/<< (\S+)/);
+    const delimiter = delimiterMatch ? delimiterMatch[1] : null;
+    const escapedDelimiter = delimiter.slice(1).trim().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+    const hereDocRegex = new RegExp(`<< \\\\${escapedDelimiter}([\\s\\S\\.]*?)${escapedDelimiter}`);
+    const hereDocMatch = commandString.match(hereDocRegex);
+    return hereDocMatch ? hereDocMatch[1] : '';
+}
+
+server.listen(6002, () => {
+    console.log('Server listening on port 6002');
+});