fix(ui): improve mobile terminal controls and target filtering

resources/js/terminal.js

@@ -934,6 +934,7 @@ export function initializeTerminalComponent() {
                     tab: '\t',
                     escape: '\x1b',
                     ctrlC: '\x03',
+                    ctrlD: '\x04',
                     ctrlBackslash: '\x1c',
                     ctrlS: '\x13',
                     ctrlZ: '\x1a'

resources/views/livewire/project/shared/terminal.blade.php

@@ -76,7 +76,7 @@
                     : 'terminal-host h-[510px] max-h-[calc(100dvh-10rem)] overflow-hidden px-2 py-1 rounded-sm bg-black')">
         </div>
 
-        <div x-show="terminalActive" x-cloak
+        <div x-show="terminalActive" x-cloak class="sm:hidden"
             :class="fullscreen ? 'relative z-[2] shrink-0 px-2 pb-2' : (keyboardInset > 0 ? 'fixed inset-x-0 z-[100002] px-2 pb-2' : 'relative z-[2] mt-2 shrink-0')"
             :style="!fullscreen && keyboardInset > 0 ? `top: ${keyboardAnchorTop}px; transform: translateY(-100%)` : ''"
             data-terminal-mobile-toolbar>
@@ -96,6 +96,7 @@
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalKey('~')">~</button>
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalKey('-')">-</button>
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('ctrlC')">^C</button>
+                <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('ctrlD')">^D</button>
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('ctrlBackslash')">^\</button>
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('ctrlS')">^S</button>
                 <button type="button" class="terminal-mobile-key" x-on:click="sendTerminalControl('ctrlZ')">^Z</button>

resources/views/livewire/terminal/index.blade.php

@@ -122,6 +122,7 @@
                                 <x-reicon name="search"
                                     class="pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
                                 <input x-model.debounce.100ms="targetSearch" type="search" placeholder="Filter targets"
+                                    aria-label="Filter terminal targets"
                                     class="h-8! w-full rounded-lg! border-neutral-200! bg-white! py-0! pr-8! pl-8! text-[12px]! shadow-none! placeholder:text-neutral-400 focus:border-accent! focus:ring-0! dark:border-white/[0.08]! dark:bg-white/[0.035]! dark:text-fg! dark:placeholder:text-fg-faint">
                                 <button x-cloak x-show="targetSearch" x-on:click="targetSearch = ''" type="button"
                                     class="absolute top-1/2 right-2 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg"

tests/Feature/RealtimeTerminalPackagingTest.php

@@ -323,12 +323,12 @@ it('preserves terminal scrollback across transient reconnects', function () {
         ->not->toContain("this.term.reset();\n                    this.term.clear();");
 });
 
-it('renders a horizontally scrollable mobile terminal key row', function () {
+it('renders a horizontally scrollable terminal key row only on mobile', function () {
     $terminalView = file_get_contents(resource_path('views/livewire/project/shared/terminal.blade.php'));
     $appCss = file_get_contents(resource_path('css/app.css'));
 
     expect($terminalView)
-        ->not->toContain('class="sm:hidden" data-terminal-mobile-toolbar')
+        ->toContain('class="sm:hidden"')
         ->toContain('overflow-x-auto')
         ->toContain('whitespace-nowrap')
         ->toContain('pasteFromClipboard()')
@@ -343,11 +343,12 @@ it('renders a horizontally scrollable mobile terminal key row', function () {
         ->toContain("sendTerminalKey('~')")
         ->toContain("sendTerminalKey('-')")
         ->toContain("sendTerminalControl('ctrlC')")
+        ->toContain("sendTerminalControl('ctrlD')")
         ->toContain("sendTerminalControl('ctrlBackslash')")
         ->toContain("sendTerminalControl('ctrlS')")
         ->toContain("sendTerminalControl('ctrlZ')")
         ->not->toContain("sendTerminalControl('arrowUp')")
-        ->toContain("fullscreen ? 'relative z-[2] shrink-0 px-2 pb-2' : 'relative z-[2] mt-2 shrink-0'")
+        ->toContain("fullscreen ? 'relative z-[2] shrink-0 px-2 pb-2' : (keyboardInset > 0 ? 'fixed inset-x-0 z-[100002] px-2 pb-2' : 'relative z-[2] mt-2 shrink-0')")
         ->toContain('data-terminal-mobile-toolbar')
         ->and($appCss)
         ->toContain('.terminal-mobile-key')
@@ -358,13 +359,13 @@ it('renders a horizontally scrollable mobile terminal key row', function () {
         ->toContain('var(--terminal-scrollbar');
 });
 
-it('shows the terminal key row outside fullscreen mode', function () {
+it('shows the mobile terminal key row outside fullscreen mode', function () {
     $terminalView = file_get_contents(resource_path('views/livewire/project/shared/terminal.blade.php'));
     $terminalClient = file_get_contents(resource_path('js/terminal.js'));
 
     expect($terminalView)
-        ->toContain("fullscreen ? 'relative z-[2] shrink-0 px-2 pb-2' : 'relative z-[2] mt-2 shrink-0'")
-        ->not->toContain('class="sm:hidden" data-terminal-mobile-toolbar')
+        ->toContain("fullscreen ? 'relative z-[2] shrink-0 px-2 pb-2' : (keyboardInset > 0 ? 'fixed inset-x-0 z-[100002] px-2 pb-2' : 'relative z-[2] mt-2 shrink-0')")
+        ->toContain('class="sm:hidden"')
         ->toContain(':style="!fullscreen && keyboardInset > 0 ? `top: ${keyboardAnchorTop}px; transform: translateY(-100%)` : \'\'"')
         ->and($terminalClient)
         ->toContain("this.\$refs.terminalWrapper.style.removeProperty('display')")
@@ -384,6 +385,7 @@ it('sends terminal mobile toolbar controls through the websocket', function () {
         ->toContain("tab: '\\t'")
         ->toContain("escape: '\\x1b'")
         ->toContain("ctrlC: '\\x03'")
+        ->toContain("ctrlD: '\\x04'")
         ->toContain("ctrlBackslash: '\\x1c'")
         ->toContain("ctrlS: '\\x13'")
         ->toContain("ctrlZ: '\\x1a'")

tests/Feature/TerminalPageHeaderTest.php

@@ -39,6 +39,7 @@ it('keeps the pre-session target list scrollable inside the full-width card', fu
 
     expect($view)
         ->toContain('data-terminal-target-picker="page"')
+        ->toContain('aria-label="Filter terminal targets"')
         ->toContain('class="application-settings-workspace flex w-full min-w-0 flex-col"')
         ->toContain('class="terminal-target-card-list"')
         ->and($styles)