refine join workflow

pkgs/clan-cli/clan_cli/webui/routers/flake.py

@@ -18,7 +18,7 @@ async def inspect_flake(
     actions = []
     # Extract the flake from the given URL
     # We do this by running 'nix flake prefetch {url} --json'
-    cmd = nix_command(["flake", "prefetch", url, "--json"])
+    cmd = nix_command(["flake", "prefetch", url, "--json", "--refresh"])
     proc = await asyncio.create_subprocess_exec(
         cmd[0],
         *cmd[1:],

pkgs/clan-cli/clan_cli/webui/routers/vms.py

@@ -115,7 +115,7 @@ command output:
 
 
 @router.get("/api/vms/{uuid}/status")
-async def vm_status(uuid: UUID) -> VmStatusResponse:
+async def get_vm_status(uuid: UUID) -> VmStatusResponse:
     task = get_task(uuid)
     status: list[int | None] = list(map(lambda x: x.returncode, task.procs))
     log.debug(msg=f"returncodes: {status}. task.finished: {task.finished}")

pkgs/ui/src/app/dashboard/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { RecentActivity } from "@/components/dashboard/activity";
+import { AppOverview } from "@/components/dashboard/appOverview";
+import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
+import { Notifications } from "@/components/dashboard/notifications";
+import { QuickActions } from "@/components/dashboard/quickActions";
+import { TaskQueue } from "@/components/dashboard/taskQueue";
+import { tw } from "@/utils/tailwind";
+
+interface DashboardCardProps {
+  children?: React.ReactNode;
+  rowSpan?: number;
+  sx?: string;
+}
+const DashboardCard = (props: DashboardCardProps) => {
+  const { children, rowSpan, sx = "" } = props;
+  return (
+    <div
+      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface DashboardPanelProps {
+  children?: React.ReactNode;
+}
+const DashboardPanel = (props: DashboardPanelProps) => {
+  const { children } = props;
+  return (
+    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
+  );
+};
+
+export default function Dashboard() {
+  return (
+    <div className="flex h-screen w-full">
+      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
+        <DashboardCard rowSpan={2}>
+          <NetworkOverview />
+        </DashboardCard>
+        <DashboardCard rowSpan={2}>
+          <RecentActivity />
+        </DashboardCard>
+        <DashboardCard>
+          <Notifications />
+        </DashboardCard>
+        <DashboardCard>
+          <QuickActions />
+        </DashboardCard>
+        <DashboardPanel>
+          <AppOverview />
+        </DashboardPanel>
+        <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
+          <TaskQueue />
+        </DashboardCard>
+      </div>
+    </div>
+  );
+}

pkgs/ui/src/app/join/page.tsx

@@ -1,74 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { Button, Paper, Typography } from "@mui/material";
-import { useSearchParams } from "next/navigation";
-import GppMaybeIcon from "@mui/icons-material/GppMaybe";
-import { useInspectFlake } from "@/api/default/default";
-import { ConfirmVM } from "@/components/join/join";
-import { LoadingOverlay } from "@/components/join/loadingOverlay";
-import { FlakeBadge } from "@/components/flakeBadge/flakeBadge";
-import { Log } from "@/components/join/log";
-
-export default function Page() {
-  const queryParams = useSearchParams();
-  const flakeUrl = queryParams.get("flake") || "";
-  const flakeAttribute = queryParams.get("attr") || "default";
-  const [userConfirmed, setUserConfirmed] = useState(false);
-
-  const clanName = "Lassul.us";
-
-  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
-
-  return (
-    <div className="grid h-[70vh] w-full place-items-center gap-y-4">
-      <Typography variant="h4" className="w-full text-center">
-        Join{" "}
-        <Typography variant="h4" className="font-bold" component={"span"}>
-          {clanName}
-        </Typography>
-        {"' "}
-        Clan
-      </Typography>
-
-      {flakeUrl && flakeAttribute ? (
-        userConfirmed ? (
-          <ConfirmVM url={flakeUrl} attr={flakeAttribute} clanName={clanName} />
-        ) : (
-          <div className="mb-2 flex w-full max-w-xl flex-col items-center pb-2">
-            {isLoading && (
-              <LoadingOverlay
-                title={"Loading Flake"}
-                subtitle={
-                  <FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttribute} />
-                }
-              />
-            )}
-            {data && (
-              <>
-                <Typography variant="subtitle1">
-                  To build the VM you must trust the Author of this Flake
-                </Typography>
-                <GppMaybeIcon sx={{ height: "10rem", width: "10rem", mb: 5 }} />
-                <Button
-                  size="large"
-                  color="warning"
-                  variant="contained"
-                  onClick={() => setUserConfirmed(true)}
-                  sx={{ mb: 10 }}
-                >
-                  Trust Flake Author
-                </Button>
-                <Log
-                  title="What's about to be built"
-                  lines={data.data.content.split("\n")}
-                />
-              </>
-            )}
-          </div>
-        )
-      ) : (
-        <div>Invalid URL</div>
-      )}
-    </div>
-  );
-}

pkgs/ui/src/app/page.tsx

@@ -1,60 +1,79 @@
-import { RecentActivity } from "@/components/dashboard/activity";
-import { AppOverview } from "@/components/dashboard/appOverview";
-import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
-import { Notifications } from "@/components/dashboard/notifications";
-import { QuickActions } from "@/components/dashboard/quickActions";
-import { TaskQueue } from "@/components/dashboard/taskQueue";
-import { tw } from "@/utils/tailwind";
+"use client";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  IconButton,
+  Input,
+  InputAdornment,
+  Paper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useSearchParams } from "next/navigation";
+import { useInspectFlake } from "@/api/default/default";
+import { ConfirmVM } from "@/components/join/confirmVM";
+import { LoadingOverlay } from "@/components/join/loadingOverlay";
+import { FlakeBadge } from "@/components/flakeBadge/flakeBadge";
+import { Log } from "@/components/join/log";
 
-interface DashboardCardProps {
-  children?: React.ReactNode;
-  rowSpan?: number;
-  sx?: string;
-}
-const DashboardCard = (props: DashboardCardProps) => {
-  const { children, rowSpan, sx = "" } = props;
-  return (
-    <div
-      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
-    >
-      {children}
-    </div>
-  );
+import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { Confirm } from "@/components/join/confirm";
+import { Layout } from "@/components/join/layout";
+import { ChevronRight } from "@mui/icons-material";
+
+type FormValues = {
+  flakeUrl: string;
+  flakeAttribute: string;
 };
 
-interface DashboardPanelProps {
-  children?: React.ReactNode;
-}
-const DashboardPanel = (props: DashboardPanelProps) => {
-  const { children } = props;
-  return (
-    <div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
-  );
-};
+export default function Page() {
+  const queryParams = useSearchParams();
+  const flakeUrl = queryParams.get("flake") || "";
+  const flakeAttribute = queryParams.get("attr") || "default";
+  const { handleSubmit, control, formState, getValues, reset } =
+    useForm<FormValues>({ defaultValues: { flakeUrl: "" } });
+
+  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
 
-export default function Dashboard() {
   return (
-    <div className="flex h-screen w-full">
-      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
-        <DashboardCard rowSpan={2}>
-          <NetworkOverview />
-        </DashboardCard>
-        <DashboardCard rowSpan={2}>
-          <RecentActivity />
-        </DashboardCard>
-        <DashboardCard>
-          <Notifications />
-        </DashboardCard>
-        <DashboardCard>
-          <QuickActions />
-        </DashboardCard>
-        <DashboardPanel>
-          <AppOverview />
-        </DashboardPanel>
-        <DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
-          <TaskQueue />
-        </DashboardCard>
-      </div>
-    </div>
+    <Layout>
+      {!formState.isSubmitted && !flakeUrl && (
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="w-full max-w-2xl justify-self-center"
+        >
+          <Controller
+            name="flakeUrl"
+            control={control}
+            render={({ field }) => (
+              <Input
+                {...field}
+                // variant="standard"
+                // label="Clan url"
+                required
+                fullWidth
+                startAdornment={
+                  <InputAdornment position="start">Clan Url:</InputAdornment>
+                }
+                endAdornment={
+                  <InputAdornment position="end">
+                    <IconButton type="submit">
+                      <ChevronRight />
+                    </IconButton>
+                  </InputAdornment>
+                }
+                // }}
+              />
+            )}
+          />
+        </form>
+      )}
+      {(formState.isSubmitted || flakeUrl) && (
+        <Confirm
+          handleBack={() => reset()}
+          flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
+        />
+      )}
+    </Layout>
   );
 }

pkgs/ui/src/components/flakeBadge/flakeBadge.tsx

@@ -8,6 +8,11 @@ export const FlakeBadge = (props: FlakeBadgeProps) => (
   <Chip
     color="secondary"
     label={`${props.flakeUrl}#${props.flakeAttr}`}
-    sx={{ p: 2 }}
+    sx={{
+      p: 2,
+      "& .MuiChip-label": {
+        overflow: "unset",
+      },
+    }}
   />
 );

pkgs/ui/src/components/hooks/useVms.tsx

@@ -16,7 +16,7 @@ export const useVms = (options: UseVmsOptions) => {
 
   useEffect(() => {
     const getVmInfo = async (url: string, attr: string) => {
-      if (url === "") {
+      if (url === "" || !url) {
         toast.error("Flake url is missing", { id: "missing.flake.url" });
         return undefined;
       }

pkgs/ui/src/components/join/configureVM.tsx

@@ -0,0 +1,138 @@
+import {
+  Button,
+  InputAdornment,
+  LinearProgress,
+  ListSubheader,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+} from "@mui/material";
+import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { createVm, useGetVmLogs } from "@/api/default/default";
+import { VmConfig } from "@/api/model";
+import { Dispatch, SetStateAction, useState } from "react";
+import { toast } from "react-hot-toast";
+
+interface VmPropLabelProps {
+  children: React.ReactNode;
+}
+const VmPropLabel = (props: VmPropLabelProps) => (
+  <div className="col-span-4 flex items-center sm:col-span-1">
+    {props.children}
+  </div>
+);
+
+interface VmPropContentProps {
+  children: React.ReactNode;
+}
+const VmPropContent = (props: VmPropContentProps) => (
+  <div className="col-span-4 font-bold sm:col-span-3">{props.children}</div>
+);
+
+interface VmDetailsProps {
+  vmConfig: VmConfig;
+  formHooks: UseFormReturn<VmConfig, any, undefined>;
+  setVmUuid: Dispatch<SetStateAction<string | null>>;
+}
+
+export const ConfigureVM = (props: VmDetailsProps) => {
+  const { vmConfig, formHooks, setVmUuid } = props;
+  const { control, handleSubmit } = formHooks;
+  const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
+  const [isStarting, setStarting] = useState(false);
+
+  const onSubmit: SubmitHandler<VmConfig> = async (data) => {
+    setStarting(true);
+    console.log(data);
+    const response = await createVm(data);
+    const { uuid } = response?.data || null;
+
+    setVmUuid(() => uuid);
+    setStarting(false);
+    if (response.statusText === "OK") {
+      toast.success(("Joined @ " + uuid) as string);
+    } else {
+      toast.error("Could not join");
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="grid grid-cols-4 gap-y-10"
+    >
+      <div className="col-span-4">
+        <ListSubheader>General</ListSubheader>
+      </div>
+      <VmPropLabel>Flake</VmPropLabel>
+      <VmPropContent>
+        <FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} />
+      </VmPropContent>
+      <VmPropLabel>Machine</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="flake_attr"
+          control={control}
+          render={({ field }) => (
+            <Select {...field} variant="standard" fullWidth>
+              {["default", "vm1"].map((attr) => (
+                <MenuItem value={attr} key={attr}>
+                  {attr}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+        />
+      </VmPropContent>
+      <div className="col-span-4">
+        <ListSubheader>VM</ListSubheader>
+      </div>
+      <VmPropLabel>CPU Cores</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="cores"
+          control={control}
+          render={({ field }) => <TextField type="number" {...field} />}
+        />
+      </VmPropContent>
+      <VmPropLabel>Graphics</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="graphics"
+          control={control}
+          render={({ field }) => (
+            <Switch {...field} defaultChecked={vmConfig.graphics} />
+          )}
+        />
+      </VmPropContent>
+      <VmPropLabel>Memory Size</VmPropLabel>
+
+      <VmPropContent>
+        <Controller
+          name="memory_size"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              type="number"
+              {...field}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">MiB</InputAdornment>
+                ),
+              }}
+            />
+          )}
+        />
+      </VmPropContent>
+
+      <div className="col-span-4 grid items-center">
+        {isStarting && <LinearProgress />}
+        <Button type="submit" disabled={isStarting} variant="contained">
+          Join Clan
+        </Button>
+      </div>
+    </form>
+  );
+};

pkgs/ui/src/components/join/confirm.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+import { LoadingOverlay } from "./loadingOverlay";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { Typography, Button } from "@mui/material";
+import { FlakeResponse } from "@/api/model";
+import { ConfirmVM } from "./confirmVM";
+import { Log } from "./log";
+import GppMaybeIcon from "@mui/icons-material/GppMaybe";
+import { useInspectFlake } from "@/api/default/default";
+
+interface ConfirmProps {
+  flakeUrl: string;
+  handleBack: () => void;
+}
+export const Confirm = (props: ConfirmProps) => {
+  const { flakeUrl, handleBack } = props;
+  const [userConfirmed, setUserConfirmed] = useState(false);
+
+  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
+
+  return userConfirmed ? (
+    <ConfirmVM url={flakeUrl} handleBack={handleBack} />
+  ) : (
+    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
+      {isLoading && (
+        <LoadingOverlay
+          title={"Loading Flake"}
+          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr="" />}
+        />
+      )}
+      {data && (
+        <>
+          <Typography variant="subtitle1">
+            To join the clan you must trust the Author
+          </Typography>
+          <GppMaybeIcon sx={{ height: "10rem", width: "10rem", mb: 5 }} />
+          <Button
+            autoFocus
+            size="large"
+            color="warning"
+            variant="contained"
+            onClick={() => setUserConfirmed(true)}
+            sx={{ mb: 10 }}
+          >
+            Trust Flake Author
+          </Button>
+          <Log
+            title="What's about to be built"
+            lines={data.data.content.split("\n")}
+          />
+        </>
+      )}
+    </div>
+  );
+};

pkgs/ui/src/components/join/confirmVM.tsx

@@ -0,0 +1,104 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { VmConfig } from "@/api/model";
+import { useVms } from "@/components/hooks/useVms";
+
+import { Alert, AlertTitle, Button } from "@mui/material";
+
+import { useSearchParams } from "next/navigation";
+
+import { createVm, inspectVm, useGetVmLogs } from "@/api/default/default";
+
+import { LoadingOverlay } from "./loadingOverlay";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { Log } from "./log";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { ConfigureVM } from "./configureVM";
+import { VmBuildLogs } from "./vmBuildLogs";
+
+interface ConfirmVMProps {
+  url: string;
+  handleBack: () => void;
+}
+
+export function ConfirmVM(props: ConfirmVMProps) {
+  const { url, handleBack } = props;
+  const formHooks = useForm<VmConfig>({
+    defaultValues: {
+      flake_url: url,
+      flake_attr: "vm1",
+      cores: 1,
+      graphics: true,
+      memory_size: 1024,
+    },
+  });
+  const [vmUuid, setVmUuid] = useState<string | null>(null);
+
+  const { setValue, watch, formState, handleSubmit } = formHooks;
+  const { config, error, isLoading } = useVms({
+    url,
+    // TODO: FIXME
+    attr: watch("flake_attr"),
+  });
+  useEffect(() => {
+    if (config) {
+      setValue("cores", config?.cores);
+      setValue("memory_size", config?.memory_size);
+      setValue("graphics", config?.graphics);
+    }
+  }, [config, setValue]);
+
+  return (
+    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
+      {!formState.isSubmitted && (
+        <>
+          {error && (
+            <Alert severity="error" className="w-full max-w-2xl">
+              <AlertTitle>Error</AlertTitle>
+              An Error occurred - See details below
+            </Alert>
+          )}
+          <div className="mb-2 w-full max-w-2xl">
+            {isLoading && (
+              <LoadingOverlay
+                title={"Loading VM Configuration"}
+                subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
+              />
+            )}
+            {config && (
+              <ConfigureVM
+                vmConfig={config}
+                formHooks={formHooks}
+                setVmUuid={setVmUuid}
+              />
+            )}
+            {error && (
+              <>
+                <Button
+                  color="error"
+                  fullWidth
+                  variant="contained"
+                  onClick={handleBack}
+                  className="my-2"
+                >
+                  Back
+                </Button>
+                <Log
+                  title="Log"
+                  lines={
+                    error?.response?.data?.detail
+                      ?.map((err, idx) => err.msg.split("\n"))
+                      ?.flat()
+                      .filter(Boolean) || []
+                  }
+                />
+              </>
+            )}
+          </div>
+        </>
+      )}
+
+      {formState.isSubmitted && vmUuid && <VmBuildLogs vmUuid={vmUuid} />}
+    </div>
+  );
+}

pkgs/ui/src/components/join/join.tsx

@@ -1,147 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { VmConfig } from "@/api/model";
-import { useVms } from "@/components/hooks/useVms";
-import prettyBytes from "pretty-bytes";
-
-import {
-  Alert,
-  AlertTitle,
-  Button,
-  Chip,
-  LinearProgress,
-  ListSubheader,
-  Switch,
-  Typography,
-} from "@mui/material";
-import { useSearchParams } from "next/navigation";
-import { toast } from "react-hot-toast";
-import { Error, Numbers } from "@mui/icons-material";
-import { createVm, inspectVm } from "@/api/default/default";
-import { LoadingOverlay } from "./loadingOverlay";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { Log } from "./log";
-
-interface VmPropLabelProps {
-  children: React.ReactNode;
-}
-const VmPropLabel = (props: VmPropLabelProps) => (
-  <div className="col-span-4 flex items-center sm:col-span-1">
-    {props.children}
-  </div>
-);
-
-interface VmPropContentProps {
-  children: React.ReactNode;
-}
-const VmPropContent = (props: VmPropContentProps) => (
-  <div className="col-span-4 font-bold sm:col-span-3">{props.children}</div>
-);
-
-interface VmDetailsProps {
-  vmConfig: VmConfig;
-}
-
-const VmDetails = (props: VmDetailsProps) => {
-  const { vmConfig } = props;
-  const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
-  const [isStarting, setStarting] = useState(false);
-  const handleStartVm = async () => {
-    setStarting(true);
-    const response = await createVm(vmConfig);
-    setStarting(false);
-    if (response.statusText === "OK") {
-      toast.success(("VM created @ " + response?.data) as string);
-    } else {
-      toast.error("Could not create VM");
-    }
-  };
-  return (
-    <div className="grid grid-cols-4 gap-y-10">
-      <div className="col-span-4">
-        <ListSubheader>General</ListSubheader>
-      </div>
-
-      <VmPropLabel>Flake</VmPropLabel>
-      <VmPropContent>
-        <FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} />
-      </VmPropContent>
-
-      <VmPropLabel>Machine</VmPropLabel>
-      <VmPropContent>{flake_attr}</VmPropContent>
-
-      <div className="col-span-4">
-        <ListSubheader>VM</ListSubheader>
-      </div>
-      <VmPropLabel>CPU Cores</VmPropLabel>
-      <VmPropContent>
-        <Numbers fontSize="inherit" />
-        <span className="font-bold text-black">{cores}</span>
-      </VmPropContent>
-
-      <VmPropLabel>Graphics</VmPropLabel>
-      <VmPropContent>
-        <Switch checked={graphics} />
-      </VmPropContent>
-
-      <VmPropLabel>Memory Size</VmPropLabel>
-      <VmPropContent>{prettyBytes(memory_size * 1024 * 1024)}</VmPropContent>
-
-      <div className="col-span-4 grid items-center">
-        {isStarting && <LinearProgress />}
-        <Button
-          disabled={isStarting}
-          variant="contained"
-          onClick={handleStartVm}
-        >
-          Spin up VM
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-interface ConfirmVMProps {
-  url: string;
-  attr: string;
-  clanName: string;
-}
-
-export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, attr, clanName } = props;
-
-  const { config, error, isLoading } = useVms({
-    url,
-    attr,
-  });
-  return (
-    <>
-      {error && (
-        <Alert severity="error" className="w-full max-w-xl">
-          <AlertTitle>Error</AlertTitle>
-          An Error occurred - See details below
-        </Alert>
-      )}
-      <div className="mb-2 w-full max-w-xl">
-        {isLoading && (
-          <LoadingOverlay
-            title={"Loading VM Configuration"}
-            subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
-          />
-        )}
-        {config && <VmDetails vmConfig={config} />}
-        {error && (
-          <Log
-            title="Log"
-            lines={
-              error?.response?.data?.detail
-                ?.map((err, idx) => err.msg.split("\n"))
-                ?.flat()
-                .filter(Boolean) || []
-            }
-          />
-        )}
-      </div>
-    </>
-  );
-}

pkgs/ui/src/components/join/layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+export const Layout = (props: LayoutProps) => {
+  return (
+    <div className="grid h-[70vh] w-full grid-cols-1 justify-center gap-y-4">
+      <Typography variant="h4" className="w-full text-center">
+        Join{" "}
+        <Typography variant="h4" className="font-bold" component={"span"}>
+          Clan.lol
+        </Typography>
+      </Typography>
+      {props.children}
+    </div>
+  );
+};

pkgs/ui/src/components/join/loadingOverlay.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { LinearProgress, Typography } from "@mui/material";
 
 interface LoadingOverlayProps {

pkgs/ui/src/components/join/log.tsx

@@ -1,3 +1,4 @@
+"use client";
 interface LogOptions {
   lines: string[];
   title?: string;

pkgs/ui/src/components/join/vmBuildLogs.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { useGetVmLogs } from "@/api/default/default";
+import { Log } from "./log";
+import { LoadingOverlay } from "./loadingOverlay";
+
+interface VmBuildLogsProps {
+  vmUuid: string;
+}
+export const VmBuildLogs = (props: VmBuildLogsProps) => {
+  const { vmUuid } = props;
+
+  const {
+    data: logs,
+    isLoading,
+    error,
+  } = useGetVmLogs(vmUuid as string, {
+    swr: {
+      enabled: vmUuid !== null,
+    },
+    axios: {
+      responseType: "stream",
+    },
+  });
+
+  return (
+    <div className="w-full">
+      {isLoading && <LoadingOverlay title="Initializing" subtitle="" />}
+      <Log
+        lines={(logs?.data as string)?.split("\n") || ["..."]}
+        title="Building..."
+      />
+    </div>
+  );
+};

pkgs/ui/src/components/noDataOverlay/index.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable tailwindcss/no-custom-classname */
 "use client";
+/* eslint-disable tailwindcss/no-custom-classname */
 
 import * as React from "react";
 import Box from "@mui/material/Box";