ui fixes

app/Actions/Server/InstallServer.php

@@ -2,11 +2,14 @@
 
 namespace App\Actions\Server;
 
+use App\DTOs\SocketEventDTO;
 use App\Enums\ServerStatus;
 use App\Enums\ServiceStatus;
+use App\Events\SocketEvent;
 use App\Exceptions\SSHConnectionError;
 use App\Exceptions\SSHError;
 use App\Facades\Notifier;
+use App\Http\Resources\ServerResource;
 use App\Models\Server;
 use App\Notifications\ServerInstallationSucceed;
 use App\ServerProviders\Custom;
@@ -103,5 +106,11 @@ protected function progress(int|float $percentage, ?string $step = null): void
         $this->server->progress = $percentage;
         $this->server->progress_step = $step;
         $this->server->save();
+
+        SocketEvent::dispatch(new SocketEventDTO(
+            projectId: $this->server->project_id,
+            type: 'server.updated',
+            data: new ServerResource($this->server),
+        ));
     }
 }

app/SiteTypes/AbstractSiteType.php

@@ -2,8 +2,11 @@
 
 namespace App\SiteTypes;
 
+use App\DTOs\SocketEventDTO;
+use App\Events\SocketEvent;
 use App\Exceptions\FailedToDeployGitKey;
 use App\Exceptions\SSHError;
+use App\Http\Resources\SiteResource;
 use App\Models\Service;
 use App\Models\Site;
 use App\Services\PHP\PHP;
@@ -64,6 +67,12 @@ protected function progress(int $percentage): void
     {
         $this->site->progress = $percentage;
         $this->site->save();
+
+        SocketEvent::dispatch(new SocketEventDTO(
+            projectId: $this->site->server->project_id,
+            type: 'site.updated',
+            data: new SiteResource($this->site),
+        ));
     }
 
     /**

app/SiteTypes/NodeJS.php

@@ -80,30 +80,32 @@ public function data(array $input): array
     public function install(): void
     {
         $this->isolate();
+        $this->progress(10);
         $this->site->webserver()->createVHost($this->site);
-        $this->progress(15);
+        $this->progress(20);
         $this->deployKey();
         $this->progress(30);
         app(Git::class)->clone($this->site);
+        $this->progress(45);
         $this->site->server->ssh($this->site->user)->exec(
             __('npm install --prefix=:path', [
                 'path' => $this->site->path,
             ]),
             'install-npm-dependencies',
             $this->site->id
         );
+        $this->progress(60);
         $this->site->server->ssh($this->site->user)->exec(
             __('npm run build --prefix=:path', [
                 'path' => $this->site->path,
             ]),
             'npm-build',
             $this->site->id
         );
-        $this->progress(65);
+        $this->progress(75);
         $command = __('npm start --prefix=:path', [
             'path' => $this->site->path,
         ]);
-        $this->progress(80);
         /** @var ?Worker $worker */
         $worker = $this->site->workers()->where('name', 'app')->first();
         if ($worker) {
@@ -122,6 +124,7 @@ public function install(): void
                 $this->site,
             );
         }
+        $this->progress(90);
     }
 
     public function baseCommands(): array

app/SiteTypes/PHPBlank.php

@@ -57,9 +57,11 @@ public function data(array $input): array
     public function install(): void
     {
         $this->isolate();
+        $this->progress(20);
         $this->site->webserver()->createVHost($this->site);
-        $this->progress(65);
+        $this->progress(55);
         $this->site->php()?->restart();
+        $this->progress(90);
     }
 
     public function baseCommands(): array

app/SiteTypes/PHPMyAdmin.php

@@ -49,8 +49,9 @@ public function data(array $input): array
     public function install(): void
     {
         $this->isolate();
+        $this->progress(10);
         $this->site->webserver()->createVHost($this->site);
-        $this->progress(30);
+        $this->progress(25);
         $this->site->server->ssh($this->site->user)->exec(
             view('ssh.phpmyadmin.install', [
                 'version' => $this->site->type_data['version'],
@@ -59,7 +60,8 @@ public function install(): void
             'install-phpmyadmin',
             $this->site->id
         );
-        $this->progress(65);
+        $this->progress(70);
         $this->site->php()?->restart();
+        $this->progress(90);
     }
 }

app/SiteTypes/PHPSite.php

@@ -93,16 +93,19 @@ public function data(array $input): array
     public function install(): void
     {
         $this->isolate();
+        $this->progress(10);
         $this->site->webserver()->createVHost($this->site);
-        $this->progress(15);
+        $this->progress(25);
         $this->deployKey();
-        $this->progress(30);
+        $this->progress(40);
         app(Git::class)->clone($this->site);
-        $this->progress(65);
+        $this->progress(60);
         $this->site->php()?->restart();
+        $this->progress(75);
         if ($this->site->type_data['composer']) {
             app(Composer::class)->installDependencies($this->site);
         }
+        $this->progress(90);
     }
 
     public function baseCommands(): array

app/SiteTypes/Wordpress.php

@@ -94,12 +94,13 @@ public function data(array $input): array
     public function install(): void
     {
         $this->isolate();
+        $this->progress(10);
 
         $this->site->webserver()->createVHost($this->site);
-        $this->progress(30);
+        $this->progress(25);
 
         $this->site->php()?->restart();
-        $this->progress(60);
+        $this->progress(40);
 
         $this->site->server->ssh($this->site->user)->exec(
             view('ssh.wordpress.install', [
@@ -120,5 +121,6 @@ public function install(): void
             'install-wordpress',
             $this->site->id
         );
+        $this->progress(90);
     }
 }

resources/js/components/ui/combobox.tsx

@@ -32,7 +32,7 @@ export function Combobox({
       <PopoverContent className="p-0">
         <Command>
           <CommandInput placeholder={searchText} />
-          <CommandList className="pointer-events-auto p-0" onWheel={(e) => e.stopPropagation()}>
+          <CommandList className="p-0">
             <CommandEmpty>{noneFoundText}</CommandEmpty>
             <CommandGroup>
               {open &&

resources/js/components/ui/command.tsx

@@ -69,6 +69,7 @@ function CommandList({ className, ...props }: React.ComponentProps<typeof Comman
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      onWheel={(e) => e.stopPropagation()}
       {...props}
     />
   );

resources/js/hooks/use-socket-events.ts

@@ -160,6 +160,34 @@ export function useSocketListener(callback: (data: SocketEventData) => void): vo
   }, []);
 }
 
+/**
+ * Keeps a single resource in sync with socket events.
+ *
+ * Returns the live resource (initially from Inertia props, updated via socket).
+ * Pass `null` to skip listening (safe to call unconditionally).
+ */
+export function useRealtimeRecord<T extends { id: number }>(initial: T | null | undefined, eventPrefix: string): T | null {
+  const [record, setRecord] = useState<T | null>(initial ?? null);
+
+  useEffect(() => {
+    setRecord(initial ?? null);
+  }, [initial]);
+
+  useSocketListener(
+    useCallback(
+      (event) => {
+        if (!initial) return;
+        if (event.type === `${eventPrefix}.updated` && event.data && 'id' in event.data && event.data.id === initial.id) {
+          setRecord(event.data as unknown as T);
+        }
+      },
+      [eventPrefix, initial?.id],
+    ),
+  );
+
+  return record;
+}
+
 /**
  * Manages paginated Inertia data with realtime socket updates.
  *

resources/js/pages/servers/components/create-server.tsx

@@ -511,6 +511,7 @@ export default function CreateServer({
                     onClick={copyToClipboard}
                     id="public_key"
                     value={page.props.public_key_text}
+                    readOnly
                     className="justify-between overflow-auto font-normal"
                     spellCheck={false}
                   ></Textarea>

resources/js/pages/servers/components/header.tsx

@@ -6,13 +6,30 @@ import { cn } from '@/lib/utils';
 import { Site } from '@/types/site';
 import { StatusRipple } from '@/components/status-ripple';
 import { Badge } from '@/components/ui/badge';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
+import { router, useForm } from '@inertiajs/react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { useRealtimeRecord } from '@/hooks/use-socket-events';
 
 import { InstantLogs } from '@/pages/server-logs/components/instant-logs';
 
-export default function ServerHeader({ server, site }: { server: Server; site?: Site }) {
+export default function ServerHeader({ server: initialServer, site: initialSite }: { server: Server; site?: Site }) {
+  const server = useRealtimeRecord<Server>(initialServer, 'server')!;
+  const site = useRealtimeRecord<Site>(initialSite, 'site');
+
+  // Reload page when installation completes
+  useEffect(() => {
+    if (initialServer.status === 'installing' && (server.status === 'ready' || server.status === 'installation_failed')) {
+      router.reload();
+    }
+  }, [server.status, initialServer.status]);
+
+  useEffect(() => {
+    if (initialSite?.status === 'installing' && site && (site.status === 'ready' || site.status === 'installation_failed')) {
+      router.reload();
+    }
+  }, [site?.status, initialSite?.status]);
+
   const statusForm = useForm();
 
   const checkStatus = () => {
@@ -119,7 +136,7 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
                 <TooltipTrigger asChild>
                   <div className="flex items-center space-x-1">
                     <LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'text-brand animate-spin' : '')} />
-                    <div>%{parseInt(site.progress.toString() || '0')}</div>
+                    <div>{parseInt((site.progress ?? 0).toString())}%</div>
                     {site.status === 'installation_failed' && (
                       <Badge className="ml-1" variant={site.status_color}>
                         {site.status}