headless console

resources/views/components/console-view.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="h-[500px] w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-gray-900 p-5 text-gray-50 dark:border-gray-700"
+    {{ $attributes->merge(["class" => "h-[500px] w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-black p-5 text-gray-50 dark:border-gray-700"]) }}
 >
     {{ $slot }}
 </div>

resources/views/components/heroicons/o-command-line.blade.php

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+    />
+</svg>

resources/views/console/index.blade.php

@@ -0,0 +1,76 @@
+<x-server-layout :server="$server">
+    <x-slot name="pageTitle">{{ $server->name }} - Console</x-slot>
+
+    <div
+        x-data="{
+            user: '{{ $server->ssh_user }}',
+            command: '',
+            output: '',
+            runUrl: '{{ route("servers.console.run", ["server" => $server]) }}',
+            async run() {
+                this.output = 'Running...\n'
+                const fetchOptions = {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                    },
+                    body: JSON.stringify({
+                        user: this.user,
+                        command: this.command,
+                    }),
+                }
+
+                const response = await fetch(this.runUrl, fetchOptions)
+                const reader = response.body.getReader()
+                const decoder = new TextDecoder('utf-8')
+
+                while (true) {
+                    const { value, done } = await reader.read()
+                    if (done) break
+
+                    const textChunk = decoder.decode(value, { stream: true })
+
+                    this.output += textChunk
+
+                    document.getElementById('console-output').scrollTop =
+                        document.getElementById('console-output').scrollHeight
+                }
+                this.output += '\nDone!'
+            },
+        }"
+    >
+        <x-card-header>
+            <x-slot name="title">Headless Console</x-slot>
+            <x-slot name="description">
+                Here you can run ssh commands on your server and see the result right away.
+                <br />
+                <b>Note that</b>
+                this is a headless console, it doesn't keep the current path. it will always run from the home path of
+                the selected user.
+            </x-slot>
+        </x-card-header>
+
+        <div class="space-y-3">
+            <x-console-view id="console-output">
+                <div class="w-full" x-text="output"></div>
+            </x-console-view>
+            <form onsubmit="return false" id="console-form" class="flex items-center justify-between">
+                <x-select-input x-model="user" id="user" name="user" class="flex-none" data-tooltip="User">
+                    <option value="{{ $server->ssh_user }}">{{ $server->ssh_user }}</option>
+                    <option value="root">root</option>
+                </x-select-input>
+                <x-text-input
+                    id="command"
+                    name="command"
+                    x-model="command"
+                    type="text"
+                    placeholder="Type your command here..."
+                    class="mx-1 flex-grow"
+                    autocomplete="off"
+                />
+                <x-primary-button id="btn-run" x-on:click="run" class="h-[40px]">Run</x-primary-button>
+            </form>
+        </div>
+    </div>
+</x-server-layout>

resources/views/layouts/sidebar.blade.php

@@ -116,6 +116,18 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                     </x-sidebar-link>
                 </li>
 
+                <li>
+                    <x-sidebar-link
+                        :href="route('servers.console', ['server' => $server])"
+                        :active="request()->routeIs('servers.console')"
+                    >
+                        <x-heroicon name="o-command-line" class="h-6 w-6" />
+                        <span class="ml-2">
+                            {{ __("Console") }}
+                        </span>
+                    </x-sidebar-link>
+                </li>
+
                 <li>
                     <x-sidebar-link
                         :href="route('servers.settings', ['server' => $server])"