feat: overhaul server automation, files editor, and CS2 setup workflows

apps/web/src/pages/admin/games.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Plus, Gamepad2 } from 'lucide-react';
-import { api } from '@/lib/api';
+import { toast } from 'sonner';
+import { api, ApiError } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -23,16 +24,55 @@ interface Game {
   dockerImage: string;
   defaultPort: number;
   startupCommand: string;
+  automationRules: unknown[];
 }
 
-interface PaginatedResponse<T> {
-  data: T[];
-  meta: { total: number };
+interface GamesResponse {
+  data: Game[];
+}
+
+function extractApiMessage(error: unknown, fallback: string): string {
+  if (error instanceof ApiError && error.data && typeof error.data === 'object') {
+    const maybeMessage = (error.data as { message?: unknown }).message;
+    if (typeof maybeMessage === 'string' && maybeMessage.trim()) {
+      return maybeMessage;
+    }
+  }
+  return fallback;
+}
+
+function formatAutomationRules(value: unknown): string {
+  if (!Array.isArray(value)) {
+    return '[]';
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return '[]';
+  }
+}
+
+function parseAutomationRules(raw: string): { rules: unknown[]; error: string | null } {
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) {
+      return { rules: [], error: 'Automation JSON must be an array.' };
+    }
+    return { rules: parsed, error: null };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Invalid JSON';
+    return { rules: [], error: message };
+  }
 }
 
 export function AdminGamesPage() {
   const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
+  const [automationOpen, setAutomationOpen] = useState(false);
+  const [selectedGame, setSelectedGame] = useState<Game | null>(null);
+  const [automationJson, setAutomationJson] = useState('[]');
+  const [automationError, setAutomationError] = useState<string | null>(null);
   const [name, setName] = useState('');
   const [slug, setSlug] = useState('');
   const [dockerImage, setDockerImage] = useState('');
@@ -41,7 +81,7 @@ export function AdminGamesPage() {
 
   const { data } = useQuery({
     queryKey: ['admin-games'],
-    queryFn: () => api.get<PaginatedResponse<Game>>('/admin/games'),
+    queryFn: () => api.get<GamesResponse>('/admin/games'),
   });
 
   const createMutation = useMutation({
@@ -53,11 +93,70 @@ export function AdminGamesPage() {
       setSlug('');
       setDockerImage('');
       setStartupCommand('');
+      toast.success('Game created');
+    },
+    onError: (error) => {
+      toast.error(extractApiMessage(error, 'Failed to create game'));
+    },
+  });
+
+  const updateAutomationMutation = useMutation({
+    mutationFn: ({ gameId, rules }: { gameId: string; rules: unknown[] }) =>
+      api.patch(`/admin/games/${gameId}`, { automationRules: rules }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-games'] });
+      setAutomationOpen(false);
+      setSelectedGame(null);
+      setAutomationError(null);
+      toast.success('Automation rules updated');
+    },
+    onError: (error) => {
+      toast.error(extractApiMessage(error, 'Failed to save automation rules'));
     },
   });
 
   const games = data?.data ?? [];
 
+  const openAutomationDialog = (game: Game) => {
+    setSelectedGame(game);
+    setAutomationJson(formatAutomationRules(game.automationRules));
+    setAutomationError(null);
+    setAutomationOpen(true);
+  };
+
+  const saveAutomationRules = () => {
+    if (!selectedGame) return;
+
+    const parsed = parseAutomationRules(automationJson);
+    if (parsed.error) {
+      setAutomationError(parsed.error);
+      return;
+    }
+
+    setAutomationError(null);
+    updateAutomationMutation.mutate({
+      gameId: selectedGame.id,
+      rules: parsed.rules,
+    });
+  };
+
+  const handleAutomationTabKey = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== 'Tab') return;
+
+    event.preventDefault();
+    const textarea = event.currentTarget;
+    const selectionStart = textarea.selectionStart;
+    const selectionEnd = textarea.selectionEnd;
+    const nextValue = `${automationJson.slice(0, selectionStart)}  ${automationJson.slice(selectionEnd)}`;
+    const nextCursor = selectionStart + 2;
+
+    setAutomationJson(nextValue);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(nextCursor, nextCursor);
+    });
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -142,11 +241,65 @@ export function AdminGamesPage() {
                 </p>
                 <p className="mt-2 font-mono text-xs">{game.dockerImage}</p>
                 <p>Port: {game.defaultPort}</p>
+                <p>Automation: {Array.isArray(game.automationRules) ? game.automationRules.length : 0} workflow</p>
               </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="mt-4"
+                onClick={() => openAutomationDialog(game)}
+              >
+                Manage Automation
+              </Button>
             </CardContent>
           </Card>
         ))}
       </div>
+
+      <Dialog
+        open={automationOpen}
+        onOpenChange={(nextOpen) => {
+          setAutomationOpen(nextOpen);
+          if (!nextOpen) {
+            setSelectedGame(null);
+            setAutomationError(null);
+          }
+        }}
+      >
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>
+              Automation Rules
+              {selectedGame ? ` - ${selectedGame.name}` : ''}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-2">
+            <Label>JSON</Label>
+            <p className="text-xs text-muted-foreground">
+              Supported events: server.created, server.install.completed, server.power.started, server.power.stopped
+            </p>
+            <textarea
+              value={automationJson}
+              onChange={(event) => setAutomationJson(event.target.value)}
+              onKeyDown={handleAutomationTabKey}
+              spellCheck={false}
+              className="min-h-[320px] w-full rounded-md border bg-background px-3 py-2 font-mono text-xs outline-none ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            {automationError && <p className="text-sm text-destructive">{automationError}</p>}
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              onClick={saveAutomationRules}
+              disabled={updateAutomationMutation.isPending || !selectedGame}
+            >
+              {updateAutomationMutation.isPending ? 'Saving...' : 'Save Automation'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }