further implementing server page (#4)

* further implementing server page

* optimize icon button

* rename some unnecessary file extensions

* add terminal page & fm card

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-avatar": "^1.1.1",
         "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.2",
@@ -19,6 +20,9 @@
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.0",
         "@tanstack/react-table": "^8.20.5",
+        "@xterm/addon-attach": "^0.11.0",
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/xterm": "^5.5.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "jotai-zustand": "^0.6.0",
@@ -28,6 +32,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.1",
         "react-router-dom": "^6.27.0",
+        "react-use-websocket": "^4.10.1",
         "sonner": "^1.6.1",
         "swr": "^2.2.5",
         "tailwind-merge": "^2.5.4",
@@ -1118,6 +1123,34 @@
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz",
+      "integrity": "sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -2594,6 +2627,30 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/@xterm/addon-attach": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-attach/-/addon-attach-0.11.0.tgz",
+      "integrity": "sha512-JboCN0QAY6ZLY/SSB/Zl2cQ5zW1Eh4X3fH7BnuR1NB7xGRhzbqU2Npmpiw/3zFlxDaU88vtKzok44JKi2L2V2Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -4977,6 +5034,12 @@
         }
       }
     },
+    "node_modules/react-use-websocket": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.10.1.tgz",
+      "integrity": "sha512-PrZbKj3BSy9kRU9otKEoMi0FOcEVh1abyYxJDzB/oL7kMBDBs+ZXhnWWed/sc679nPHAWMOn1gotoV04j5gJUw==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -21,6 +22,9 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-table": "^8.20.5",
+    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "jotai-zustand": "^0.6.0",
@@ -30,6 +34,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.27.0",
+    "react-use-websocket": "^4.10.1",
     "sonner": "^1.6.1",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.4",

src/api/fm.ts

@@ -0,0 +1,6 @@
+import { ModelCreateFMResponse } from "@/types";
+import { fetcher, FetcherMethod } from "./api"
+
+export const createFM = async (id: string): Promise<ModelCreateFMResponse> => {
+    return fetcher<ModelCreateFMResponse>(FetcherMethod.GET, `/api/v1/file?id=${id}`, null);
+}

src/api/server.ts

@@ -0,0 +1,10 @@
+import { ModelServerForm } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const updateServer = async (id: number, data: ModelServerForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/server/${id}`, data)
+}
+
+export const deleteServer = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/server', id)
+}

src/api/terminal.ts

@@ -0,0 +1,8 @@
+import { ModelTerminalForm, ModelCreateTerminalResponse } from "@/types";
+import { fetcher, FetcherMethod } from "./api"
+
+export const createTerminal = async (id: number): Promise<ModelCreateTerminalResponse> => {
+    return fetcher<ModelCreateTerminalResponse>(FetcherMethod.POST, '/api/v1/terminal', {
+        server_id: id,
+    });
+}

src/components/action-button-group.tsx

@@ -1,16 +1,17 @@
-import { Button } from "@/components/ui/button";
+import { IconButton } from "@/components/xui/icon-button";
-import { TrashButton } from "@/components/xui/icon-buttons";
 import {
-    Dialog,
+    AlertDialog,
-    DialogContent,
+    AlertDialogAction,
-    DialogDescription,
+    AlertDialogCancel,
-    DialogFooter,
+    AlertDialogContent,
-    DialogHeader,
+    AlertDialogDescription,
-    DialogTitle,
+    AlertDialogFooter,
-    DialogTrigger,
+    AlertDialogHeader,
-    DialogClose,
+    AlertDialogTitle,
-} from "@/components/ui/dialog"
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 import { KeyedMutator } from "swr";
+import { buttonVariants } from "@/components/ui/button"
 
 interface ButtonGroupProps<T> {
     className?: string;
@@ -27,24 +28,23 @@ export function ActionButtonGroup<T>({ className, children, delete: { fn, id, mu
     return (
         <div className={className}>
             {children}
-            <Dialog>
+            <AlertDialog>
-                <DialogTrigger asChild>
+                <AlertDialogTrigger asChild>
-                    <TrashButton variant="outline" />
+                    <IconButton variant="outline" icon="trash" />
-                </DialogTrigger>
+                </AlertDialogTrigger>
-                <DialogContent className="sm:max-w-lg">
+                <AlertDialogContent className="sm:max-w-lg">
-                    <DialogHeader>
+                    <AlertDialogHeader>
-                        <DialogTitle>Confirm Deletion?</DialogTitle>
+                        <AlertDialogTitle>Confirm Deletion?</AlertDialogTitle>
-                        <DialogDescription>
+                        <AlertDialogDescription>
                             This operation is unrecoverable!
-                        </DialogDescription>
+                        </AlertDialogDescription>
-                    </DialogHeader>
+                    </AlertDialogHeader>
-                    <DialogFooter>
+                    <AlertDialogFooter>
-                        <DialogClose asChild>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                            <Button type="submit" variant="destructive" onClick={handleDelete}>Confirm</Button>
+                        <AlertDialogAction className={buttonVariants({ variant: "destructive" })} onClick={handleDelete}>Confirm</AlertDialogAction>
-                        </DialogClose>
+                    </AlertDialogFooter>
-                    </DialogFooter>
+                </AlertDialogContent>
-                </DialogContent>
+            </AlertDialog>
-            </Dialog>
         </div>
     )
 }

src/components/fm.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState, useRef } from "react"
+import {
+    Sheet,
+    SheetTrigger,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetDescription,
+} from "./xui/overlayless-sheet"
+import { IconButton } from "./xui/icon-button"
+import { createFM } from "@/api/fm"
+import { ModelCreateFMResponse } from "@/types"
+import useWebSocket from "react-use-websocket"
+import { toast } from "sonner"
+
+interface FMProps {
+    wsUrl: string;
+}
+
+const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, ...props }) => {
+    const fmRef = useRef<HTMLDivElement>(null);
+
+    const { sendMessage } = useWebSocket(wsUrl, {
+        share: false,
+        onOpen: () => {
+            listFile();
+        },
+        onClose: (e) => {
+            console.log('WebSocket connection closed:', e);
+        },
+        onError: (e) => {
+            console.log(e);
+            toast("Websocket error", {
+                description: "View console for details.",
+            })
+        },
+        onMessage: async (e) => {
+
+        }
+    });
+
+    const currentPath = useRef('').current;
+
+    const listFile = () => {
+        const prefix = new Int8Array([0]);
+        const resizeMessage = new TextEncoder().encode(currentPath);
+
+        const msg = new Int8Array(prefix.length + resizeMessage.length);
+        msg.set(prefix);
+        msg.set(resizeMessage, prefix.length);
+
+        sendMessage(msg);
+    }
+
+    return <div ref={fmRef} {...props} />;
+}
+
+export const FMCard = ({ id }: { id?: string }) => {
+    const [open, setOpen] = useState(false);
+    const [fm, setFM] = useState<ModelCreateFMResponse | null>(null);
+
+    const fetchFM = async () => {
+        if (id && !fm) {
+            try {
+                const createdFM = await createFM(id);
+                setFM(createdFM);
+            } catch (e) {
+                toast("FM API Error", {
+                    description: "View console for details.",
+                })
+                console.log("fetch error", e);
+                return;
+            }
+        }
+    }
+
+    return (
+        <Sheet modal={false} open={open} onOpenChange={(isOpen) => { if (isOpen) setOpen(true); }}>
+            <SheetTrigger asChild>
+                <IconButton icon="folder-closed" onClick={fetchFM} />
+            </SheetTrigger>
+            <SheetContent setOpen={setOpen}>
+                <SheetHeader>
+                    <SheetTitle>Pseudo File Manager</SheetTitle>
+                    <SheetDescription />
+                </SheetHeader>
+                <div>
+
+                </div>
+            </SheetContent>
+        </Sheet>
+    )
+}

src/components/header-button-group.tsx

@@ -1,21 +1,22 @@
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
-import { TrashButton } from "@/components/xui/icon-buttons";
+import { IconButton } from "@/components/xui/icon-button";
 import {
-    Dialog,
+    AlertDialog,
-    DialogContent,
+    AlertDialogAction,
-    DialogDescription,
+    AlertDialogCancel,
-    DialogFooter,
+    AlertDialogContent,
-    DialogHeader,
+    AlertDialogDescription,
-    DialogTitle,
+    AlertDialogFooter,
-    DialogTrigger,
+    AlertDialogHeader,
-    DialogClose,
+    AlertDialogTitle,
-} from "@/components/ui/dialog"
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 import { KeyedMutator } from "swr";
 import { toast } from "sonner"
 
 interface ButtonGroupProps<T> {
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     delete: { fn: (id: number[]) => Promise<void>, id: number[], mutate: KeyedMutator<T> };
 }
 
@@ -29,7 +30,7 @@ export function HeaderButtonGroup<T>({ className, children, delete: { fn, id, mu
         <div className={className}>
             {id.length < 1 ? (
                 <>
-                    <TrashButton variant="destructive" onClick={() => {
+                    <IconButton variant="destructive" icon="trash" onClick={() => {
                         toast("Error", {
                             description: "No rows are selected."
                         });
@@ -38,24 +39,23 @@ export function HeaderButtonGroup<T>({ className, children, delete: { fn, id, mu
                 </>
             ) : (
                 <>
-                    <Dialog>
+                    <AlertDialog>
-                        <DialogTrigger asChild>
+                        <AlertDialogTrigger asChild>
-                            <TrashButton variant="destructive" />
+                            <IconButton variant="destructive" icon="trash" />
-                        </DialogTrigger>
+                        </AlertDialogTrigger>
-                        <DialogContent className="sm:max-w-lg">
+                        <AlertDialogContent className="sm:max-w-lg">
-                            <DialogHeader>
+                            <AlertDialogHeader>
-                                <DialogTitle>Confirm Deletion?</DialogTitle>
+                                <AlertDialogTitle>Confirm Deletion?</AlertDialogTitle>
-                                <DialogDescription>
+                                <AlertDialogDescription>
                                     This operation is unrecoverable!
-                                </DialogDescription>
+                                </AlertDialogDescription>
-                            </DialogHeader>
+                            </AlertDialogHeader>
-                            <DialogFooter>
+                            <AlertDialogFooter>
-                                <DialogClose asChild>
+                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                    <Button type="submit" variant="destructive" onClick={handleDelete}>Confirm</Button>
+                                <AlertDialogAction className={buttonVariants({ variant: "destructive" })} onClick={handleDelete}>Confirm</AlertDialogAction>
-                                </DialogClose>
+                            </AlertDialogFooter>
-                            </DialogFooter>
+                        </AlertDialogContent>
-                        </DialogContent>
+                    </AlertDialog>
-                    </Dialog>
                     {children}
                 </>
             )}

src/components/install-commands.tsx

@@ -0,0 +1,38 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ButtonProps } from "@/components/ui/button"
+import { forwardRef, useState } from "react"
+import { IconButton } from "./xui/icon-button"
+
+export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    const [copy, setCopy] = useState(false);
+
+    const switchState = async () => {
+        if (!copy) {
+            setCopy(true);
+            await navigator.clipboard.writeText("stub");
+            setTimeout(() => {
+                setCopy(false);
+            }, 2 * 1000);
+        }
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <IconButton {...props} ref={ref} variant="outline" size="icon" icon={
+                    copy ? "check" : "clipboard"
+                } />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem onClick={switchState}>Linux</DropdownMenuItem>
+                <DropdownMenuItem onClick={switchState}>macOS</DropdownMenuItem>
+                <DropdownMenuItem onClick={switchState}>Windows</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+})

src/components/note-menu.tsx

@@ -0,0 +1,49 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ButtonProps } from "@/components/ui/button"
+import { forwardRef, useState } from "react"
+import { IconButton } from "./xui/icon-button"
+import { toast } from "sonner";
+
+interface NoteMenuProps extends ButtonProps {
+    note: { private?: string, public?: string };
+}
+
+export const NoteMenu = forwardRef<HTMLButtonElement, NoteMenuProps>((props, ref) => {
+    const [copy, setCopy] = useState(false);
+
+    const switchState = async (text?: string) => {
+        if (!text) {
+            toast("Warning", {
+                description: "You didn't have any note."
+            })
+            return;
+        }
+
+        if (!copy) {
+            setCopy(true);
+            await navigator.clipboard.writeText(text);
+            setTimeout(() => {
+                setCopy(false);
+            }, 2 * 1000);
+        }
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <IconButton {...props} ref={ref} variant="outline" size="icon" icon={
+                    copy ? "check" : "clipboard"
+                } />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem onClick={() => { switchState(props.note.private) }}>Private</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => { switchState(props.note.public) }}>Public</DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+})

src/components/server.tsx

@@ -0,0 +1,222 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelServer } from "@/types"
+import { updateServer } from "@/api/server"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { conv } from "@/lib/utils"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { asOptionalField } from "@/lib/utils"
+import { IconButton } from "@/components/xui/icon-button"
+import { Textarea } from "@/components/ui/textarea"
+
+interface ServerCardProps {
+    data: ModelServer;
+    mutate: KeyedMutator<ModelServer[]>;
+}
+
+const serverFormSchema = z.object({
+    name: z.string().min(1),
+    note: asOptionalField(z.string()),
+    public_note: asOptionalField(z.string()),
+    display_index: z.number(),
+    hide_for_guest: asOptionalField(z.boolean()),
+    enable_ddns: asOptionalField(z.boolean()),
+    ddns_profiles: z.array(z.string()).transform((v => {
+        return v.filter(Boolean).map(Number);
+    })),
+});
+
+export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
+    const form = useForm<z.infer<typeof serverFormSchema>>({
+        resolver: zodResolver(serverFormSchema),
+        defaultValues: data,
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof serverFormSchema>) => {
+        await updateServer(data.id, values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <IconButton variant="outline" icon="edit" />
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>New Service</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Name</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="My Server"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="display_index"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Display Index</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="number"
+                                                    placeholder="0"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="ddns_profiles"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>DDNS Profile IDs (Separate with comma)</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="1,2,3"
+                                                    {...field}
+                                                    value={conv.arrToStr(field.value ?? [])}
+                                                    onChange={e => {
+                                                        const arr = conv.strToArr(e.target.value);
+                                                        field.onChange(arr);
+                                                    }}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="enable_ddns"
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2">
+                                            <FormControl>
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                    <Label className="text-sm">Enable DDNS</Label>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="hide_for_guest"
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2">
+                                            <FormControl>
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        checked={field.value}
+                                                        onCheckedChange={field.onChange}
+                                                    />
+                                                    <Label className="text-sm">Hide from Guest</Label>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="note"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Note</FormLabel>
+                                            <FormControl>
+                                                <Textarea
+                                                    className="resize-none"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="public_note"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Public Note</FormLabel>
+                                            <FormControl>
+                                                <Textarea
+                                                    className="resize-y"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <DialogFooter className="justify-end">
+                                    <DialogClose asChild>
+                                        <Button type="button" className="my-2" variant="secondary">
+                                            Close
+                                        </Button>
+                                    </DialogClose>
+                                    <Button type="submit" className="my-2">Submit</Button>
+                                </DialogFooter>
+                            </form>
+                        </Form>
+                    </div>
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}

src/components/service.tsx

@@ -37,7 +37,7 @@ import { conv } from "@/lib/utils"
 import { useState } from "react"
 import { KeyedMutator } from "swr"
 import { asOptionalField } from "@/lib/utils"
-import { EditButton, PlusButton } from "@/components/xui/icon-buttons"
+import { IconButton } from "@/components/xui/icon-button"
 import { serviceTypes, serviceCoverageTypes } from "@/types"
 
 interface ServiceCardProps {
@@ -102,9 +102,9 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
             <DialogTrigger asChild>
                 {data
                     ?
-                    <EditButton variant="outline" />
+                    <IconButton variant="outline" icon="edit" />
                     :
-                    <PlusButton />
+                    <IconButton icon="plus" />
                 }
             </DialogTrigger>
             <DialogContent className="sm:max-w-xl">

src/components/terminal.tsx

@@ -0,0 +1,190 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Terminal } from "@xterm/xterm";
+import { AttachAddon } from "@xterm/addon-attach";
+import { FitAddon } from '@xterm/addon-fit';
+import { useRef, useEffect, useState } from "react";
+import { sleep } from "@/lib/utils";
+import useWebSocket from "react-use-websocket";
+import { IconButton } from "./xui/icon-button";
+import "@xterm/xterm/css/xterm.css";
+import { createTerminal } from "@/api/terminal";
+import { ModelCreateTerminalResponse } from "@/types";
+import { useParams } from 'react-router-dom';
+import { Button } from "./ui/button";
+import { toast } from "sonner";
+import { FMCard } from "./fm";
+
+interface XtermProps {
+    wsUrl: string;
+    setClose: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const XtermComponent: React.FC<XtermProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, setClose, ...props }) => {
+    const terminalRef = useRef<HTMLDivElement>(null);
+
+    const { sendMessage, getWebSocket } = useWebSocket(wsUrl, {
+        share: false,
+        onOpen: () => {
+            onResize();
+        },
+        onClose: () => {
+            terminal.dispose();
+            setClose(true);
+        },
+        onError: (e) => {
+            console.log(e);
+            toast("Websocket error", {
+                description: "View console for details.",
+            })
+        },
+    });
+
+    const socket = getWebSocket();
+    const terminal = useRef(
+        new Terminal({
+            cursorBlink: true,
+            fontSize: 16,
+        })
+    ).current;
+
+    const fitAddon = useRef(new FitAddon()).current;
+    const sendResize = useRef(false);
+
+    const doResize = () => {
+        if (!terminalRef.current) return;
+
+        fitAddon.fit();
+
+        const dimensions = fitAddon.proposeDimensions();
+
+        if (dimensions) {
+            const prefix = new Int8Array([1]);
+            const resizeMessage = new TextEncoder().encode(JSON.stringify({
+                Rows: dimensions.rows,
+                Cols: dimensions.cols,
+            }));
+
+            const msg = new Int8Array(prefix.length + resizeMessage.length);
+            msg.set(prefix);
+            msg.set(resizeMessage, prefix.length);
+
+            sendMessage(msg);
+        }
+    };
+
+    const onResize = async () => {
+        if (sendResize.current) return;
+
+        sendResize.current = true;
+        try {
+            await sleep(1500);
+            doResize();
+        } catch (error) {
+            console.log('resize error', error);
+        } finally {
+            sendResize.current = false;
+        }
+    };
+
+    useEffect(() => {
+        if (socket && "binaryType" in socket && terminalRef.current) {
+            socket.binaryType = "arraybuffer";
+            const attachAddon = new AttachAddon(socket);
+
+            terminal.loadAddon(attachAddon);
+            terminal.loadAddon(fitAddon);
+
+            terminal.open(terminalRef.current);
+        }
+
+        window.addEventListener('resize', onResize);
+
+        return () => {
+            window.removeEventListener('resize', onResize);
+            if (socket) {
+                socket.close();
+            }
+        };
+    }, [socket, terminal]);
+
+    return <div ref={terminalRef} {...props} />;
+};
+
+export const TerminalPage = () => {
+    const [terminal, setTerminal] = useState<ModelCreateTerminalResponse | null>(null);
+    const [open, setOpen] = useState(false);
+
+    const { id } = useParams<{ id: string }>();
+
+    useEffect(() => {
+        const fetchTerminal = async () => {
+            if (id && !terminal) {
+                try {
+                    const createdTerminal = await createTerminal(Number(id));
+                    setTerminal(createdTerminal);
+                } catch (e) {
+                    toast("Terminal API Error", {
+                        description: "View console for details.",
+                    })
+                    console.log("fetch error", e);
+                    return;
+                }
+            }
+        };
+        fetchTerminal();
+    }, [id]);
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
+                <h1 className="flex-1 text-3xl font-bold tracking-tight">
+                    Terminal
+                </h1>
+                <div className="flex-2 flex ml-auto gap-2">
+                    <FMCard id={id} />
+                </div>
+            </div>
+            {terminal?.session_id
+                ?
+                <XtermComponent className="max-h-[60%] mb-5" wsUrl={`/api/v1/ws/terminal/${terminal.session_id}`} setClose={setOpen} />
+                :
+                <p>The server does not exist, or have not been connected yet.</p>
+            }
+            <AlertDialog open={open} onOpenChange={setOpen}>
+                <AlertDialogContent className="sm:max-w-lg">
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Session completed</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            You may close this window now.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogAction asChild>
+                            <Button onClick={window.close}>
+                                Close
+                            </Button>
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    )
+}
+
+export const TerminalButton = ({ id }: { id: number }) => {
+    const handleOpenNewTab = () => {
+        window.open(`/dashboard/terminal/${id}`, '_blank');
+    };
+
+    return (
+        <IconButton variant="outline" icon="terminal" onClick={handleOpenNewTab} />
+    )
+}

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/components/xui/icon-button.tsx

@@ -0,0 +1,42 @@
+import { Plus, Edit2, Trash2, Terminal, CircleArrowUp, Clipboard, Check, FolderClosed } from "lucide-react"
+import { Button, ButtonProps } from "@/components/ui/button"
+import { forwardRef } from "react";
+
+export interface IconButtonProps extends ButtonProps {
+    icon: "clipboard" | "check" | "edit" | "trash" | "plus" | "terminal" | "update" | "folder-closed";
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
+    return (
+        <Button {...props} ref={ref} size="icon">
+            {(() => {
+                switch (props.icon) {
+                    case "clipboard": {
+                        return <Clipboard />;
+                    }
+                    case "check": {
+                        return <Check />;
+                    }
+                    case "edit": {
+                        return <Edit2 />;
+                    }
+                    case "trash": {
+                        return <Trash2 />;
+                    }
+                    case "plus": {
+                        return <Plus />;
+                    }
+                    case "terminal": {
+                        return <Terminal />;
+                    }
+                    case "update": {
+                        return <CircleArrowUp />;
+                    }
+                    case "folder-closed": {
+                        return <FolderClosed />;
+                    }
+                }
+            })()}
+        </Button>
+    );
+})

src/components/xui/icon-buttons.tsx

@@ -1,27 +0,0 @@
-import { Plus, Edit2, Trash2 } from "lucide-react"
-import { Button, ButtonProps } from "@/components/ui/button"
-import { forwardRef } from "react";
-
-export const EditButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    return (
-        <Button {...props} ref={ref} size="icon">
-            <Edit2 />
-        </Button>
-    );
-});
-
-export const TrashButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    return (
-        <Button {...props} ref={ref} size="icon">
-            <Trash2 />
-        </Button>
-    );
-});
-
-export const PlusButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    return (
-        <Button {...props} ref={ref} size="icon">
-            <Plus />
-        </Button>
-    );
-});

src/components/xui/overlayless-sheet.tsx

@@ -0,0 +1,121 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  VariantProps<typeof sheetVariants> { setOpen: React.Dispatch<React.SetStateAction<boolean>> }
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, setOpen, ...props }, ref) => (
+  <SheetPortal>
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" onClick={() => { setOpen(false) }} />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/lib/utils.ts

@@ -42,3 +42,7 @@ export const conv = {
     return arr;
   },
 }
+
+export const sleep = (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};

src/main.tsx

@@ -14,6 +14,7 @@ import LoginPage from './routes/login';
 import ServerPage from './routes/server';
 import ServicePage from './routes/service';
 import { AuthProvider } from './hooks/useAuth';
+import { TerminalPage } from './components/terminal';
 
 const router = createBrowserRouter([
   {
@@ -33,6 +34,10 @@ const router = createBrowserRouter([
         path: "/dashboard/service",
         element: <ServicePage />,
       },
+      {
+        path: "/dashboard/terminal/:id",
+        element: <TerminalPage />,
+      },
     ]
   },
 ]);

src/routes/server.tsx

@@ -4,8 +4,28 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { ModelServer as Server } from "@/types"
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
 import useSWR from "swr"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { deleteServer } from "@/api/server"
+import { ServerCard } from "@/components/server"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { useEffect } from "react"
+import { toast } from "sonner"
+import { IconButton } from "@/components/xui/icon-button"
+import { InstallCommandsMenu } from "@/components/install-commands"
+import { NoteMenu } from "@/components/note-menu"
+import { TerminalButton } from "@/components/terminal"
 
 export default function ServerPage() {
+    const { data, mutate, error, isLoading } = useSWR<Server[]>('/api/v1/server', swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
     const columns: ColumnDef<Server>[] = [
         {
             id: "select",
@@ -32,51 +52,119 @@ export default function ServerPage() {
         {
             header: "ID",
             accessorKey: "id",
-            accessorFn: (row) => row.id,
+            accessorFn: row => `${row.id}(${row.display_index})`,
         },
         {
             header: "Name",
             accessorKey: "name",
-            accessorFn: (row) => row.name,
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.name}
+                    </div>
+                )
+            }
         },
         {
-            header: "Host",
+            header: "Groups",
+            accessorKey: "groups",
+            accessorFn: row => "stub",
+        },
+        {
+            id: "ip",
+            header: "IP",
             accessorKey: "host.ip",
-            accessorFn: (row) => row.host?.ip,
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.host.ip}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Version",
+            accessorKey: "host.version",
+            accessorFn: row => row.host.version || "Unknown",
+        },
+        {
+            header: "Enable DDNS",
+            accessorKey: "enableDDNS",
+            accessorFn: row => row.enable_ddns ?? false,
+        },
+        {
+            header: "Hide from Guest",
+            accessorKey: "hideForGuest",
+            accessorFn: row => row.hide_for_guest ?? false,
+        },
+        {
+            id: "installCommands",
+            header: "Install commands",
+            cell: () => <InstallCommandsMenu />,
+        },
+        {
+            id: "note",
+            header: "Note",
+            cell: ({ row }) => {
+                const s = row.original;
+                return <NoteMenu note={{ private: s.note, public: s.public_note }} />;
+            },
         },
         {
             id: "actions",
             header: "Actions",
             cell: ({ row }) => {
-                const s = row.original
+                const s = row.original;
                 return (
-                    <>{s.id}</>
+                    <ActionButtonGroup className="flex gap-2" delete={{ fn: deleteServer, id: s.id, mutate: mutate }}>
+                        <>
+                            <TerminalButton id={s.id} />
+                            <ServerCard mutate={mutate} data={s} />
+                        </>
+                    </ActionButtonGroup>
                 )
             },
         },
     ]
 
-    const { data, error, isLoading } = useSWR<Server[]>('/api/v1/server', swrFetcher)
-
     const table = useReactTable({
         data: data ?? [],
         columns,
         getCoreRowModel: getCoreRowModel(),
     })
 
-    return <div className="px-9">
+    const selectedRows = table.getSelectedRowModel().rows;
-        <div className="flex space-between mt-4 pb-4">
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
                 <h1 className="text-3xl font-bold tracking-tight">
                     Server
                 </h1>
+                <HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
+                    fn: deleteServer,
+                    id: selectedRows.map(r => r.original.id),
+                    mutate: mutate,
+                }}>
+                    <IconButton icon="update" />
+                </HeaderButtonGroup>
             </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                <TableHead key={header.id}>
+                                        <TableHead key={header.id} className="text-sm">
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -97,7 +185,7 @@ export default function ServerPage() {
                                     data-state={row.getIsSelected() && "selected"}
                                 >
                                     {row.getVisibleCells().map((cell) => (
-                                <TableCell key={cell.id}>
+                                        <TableCell key={cell.id} className="text-xsm">
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
@@ -112,5 +200,7 @@ export default function ServerPage() {
                         )}
                     </TableBody>
                 </Table>
+            )}
         </div>
+    )
 }

src/routes/service.tsx

@@ -15,12 +15,12 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { toast } from "sonner"
 
 export default function ServicePage() {
-    const { data, mutate, error, isLoading } = useSWR<ModelServiceResponse>('/api/v1/service', swrFetcher)
+    const { data, mutate, error, isLoading } = useSWR<ModelServiceResponse>('/api/v1/service', swrFetcher);
 
     useEffect(() => {
         if (error)
             toast("Error", {
-                description: "Error fetching resource.",
+                description: `Error fetching resource: ${error.message}.`,
             })
     }, [error])
 
@@ -55,12 +55,26 @@ export default function ServicePage() {
         {
             header: "Name",
             accessorKey: "service.name",
-            accessorFn: row => row.service.name,
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.service.name}
+                    </div>
+                )
+            }
         },
         {
             header: "Target",
             accessorKey: "service.target",
-            accessorFn: row => row.service.target,
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-24 whitespace-normal break-words">
+                        {s.service.target}
+                    </div>
+                )
+            }
         },
         {
             header: "Coverage",
@@ -97,7 +111,7 @@ export default function ServicePage() {
             accessorFn: row => row.service.notification_group_id,
         },
         {
-            header: "Enable Trigger Task",
+            header: "On Trigger",
             accessorKey: "service.triggerTask",
             accessorFn: row => row.service.enable_trigger_task ?? false,
         },

vite.config.ts

@@ -11,6 +11,11 @@ export default defineConfig({
         target: 'http://localhost:8008',
         changeOrigin: true,
       },
+      '/api/v1/ws': {
+        target: 'http://localhost:8008',
+        changeOrigin: true,
+        ws: true,
+      },
     },
   },
   resolve: {