isaaccladandClaude Opus 4.8
28b4430c58
Deploy Ladill Hosting / deploy (push) Successful in 1m42s
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
103 lines
5.3 KiB
PHP
103 lines
5.3 KiB
PHP
<x-hosting-panel-layout :account="$account">
|
|
<x-slot name="title">Terminal - {{ $account->username }}</x-slot>
|
|
<x-slot name="header">Terminal</x-slot>
|
|
|
|
<div
|
|
x-data="hostingInteractiveTerminal({
|
|
accountId: @js($account->getKey()),
|
|
username: @js($account->username),
|
|
initialPath: @js($currentPath),
|
|
csrfToken: @js(csrf_token()),
|
|
runUrl: @js(route('hosting.panel.terminal.run', $account)),
|
|
startUrl: @js(route('hosting.panel.terminal.sessions.start', $account)),
|
|
readUrlTemplate: @js(route('hosting.panel.terminal.sessions.read', [$account, '__SESSION__'])),
|
|
inputUrlTemplate: @js(route('hosting.panel.terminal.sessions.input', [$account, '__SESSION__'])),
|
|
resizeUrlTemplate: @js(route('hosting.panel.terminal.sessions.resize', [$account, '__SESSION__'])),
|
|
closeUrlTemplate: @js(route('hosting.panel.terminal.sessions.close', [$account, '__SESSION__'])),
|
|
})"
|
|
class="-m-6 flex h-[calc(100vh-8rem)] flex-col bg-[#0a0a0a]"
|
|
>
|
|
{{-- Terminal Header --}}
|
|
<div class="flex items-center justify-between border-b border-white/5 bg-[#0a0a0a] px-4 py-2">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs font-semibold tracking-wide text-white/50">Terminal</span>
|
|
|
|
{{-- Session info --}}
|
|
<div class="flex items-center gap-2 pl-3">
|
|
<span class="font-mono text-xs text-white/40">{{ $account->username }}@ladill</span>
|
|
<span class="text-white/20">:</span>
|
|
<span class="font-mono text-xs text-emerald-400/80" x-text="promptPath()">~</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
{{-- Connection status --}}
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="h-1.5 w-1.5 rounded-full"
|
|
:class="statusLabel === 'Live' ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]' : statusLabel === 'Connecting' ? 'bg-amber-400 animate-pulse' : 'bg-red-400'"
|
|
></span>
|
|
<span class="text-[10px] font-medium uppercase tracking-wider text-white/30" x-text="statusLabel"></span>
|
|
</div>
|
|
|
|
{{-- Reconnect button --}}
|
|
<button
|
|
x-show="canReconnect"
|
|
x-transition
|
|
@click="restart()"
|
|
class="flex items-center gap-1.5 rounded-md bg-white/5 px-2.5 py-1 text-[10px] font-medium text-white/60 transition hover:bg-white/10 hover:text-white/80"
|
|
>
|
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Reconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Terminal Body --}}
|
|
<div class="relative min-h-0 flex-1 overflow-hidden">
|
|
<div
|
|
x-ref="terminal"
|
|
@mousedown.prevent="focusTerminal()"
|
|
@click="focusTerminal()"
|
|
tabindex="0"
|
|
class="h-full w-full cursor-text bg-[#0a0a0a] p-2"
|
|
></div>
|
|
|
|
{{-- Connection overlay --}}
|
|
<div
|
|
x-show="overlayMessage && !canReconnect"
|
|
x-transition.opacity.duration.200ms
|
|
class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/90 backdrop-blur-sm"
|
|
>
|
|
<div class="text-center">
|
|
<div class="mb-3 inline-flex h-8 w-8 items-center justify-center">
|
|
<svg class="h-5 w-5 animate-spin text-white/40" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="font-mono text-xs text-white/50" x-text="overlayMessage"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Terminal Footer --}}
|
|
<div class="flex items-center justify-between border-t border-white/5 bg-[#0a0a0a] px-4 py-1.5">
|
|
<div class="flex items-center gap-4 text-[10px] text-white/25">
|
|
<span class="font-mono">PTY</span>
|
|
<span class="font-mono">UTF-8</span>
|
|
<span class="font-mono">bash</span>
|
|
</div>
|
|
<div class="flex items-center gap-1 text-[10px] text-white/25">
|
|
<kbd class="rounded bg-white/5 px-1 py-0.5 font-mono">Ctrl+C</kbd>
|
|
<span>cancel</span>
|
|
<span class="mx-2 text-white/10">|</span>
|
|
<kbd class="rounded bg-white/5 px-1 py-0.5 font-mono">Tab</kbd>
|
|
<span>autocomplete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-hosting-panel-layout>
|