feat: add preview image builder

web/src/app/(app)/api/machine-built/route.ts

@@ -0,0 +1,50 @@
+import { parseDataSafe } from "../../../../lib/parseDataSafe";
+import { db } from "@/db/db";
+import { machinesTable } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const Request = z.object({
+  machine_id: z.string(),
+  endpoint: z.string().optional(),
+  build_log: z.string().optional(),
+});
+
+export async function POST(request: Request) {
+  const [data, error] = await parseDataSafe(Request, request);
+  if (!data || error) return error;
+
+  console.log(data);
+
+  const { machine_id, endpoint, build_log } = data;
+
+  if (endpoint) {
+    await db
+      .update(machinesTable)
+      .set({
+        status: "ready",
+        endpoint: endpoint,
+        build_log: build_log,
+      })
+      .where(eq(machinesTable.id, machine_id));
+  } else {
+    // console.log(data);
+    await db
+      .update(machinesTable)
+      .set({
+        status: "error",
+        build_log: build_log,
+      })
+      .where(eq(machinesTable.id, machine_id));
+  }
+
+  return NextResponse.json(
+    {
+      message: "success",
+    },
+    {
+      status: 200,
+    }
+  );
+}

web/src/app/(app)/machines/[machine_id]/loading.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { usePathname } from "next/navigation";
+
+export default function Loading() {
+  const pathName = usePathname();
+  return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
+}

web/src/app/(app)/machines/[machine_id]/page.tsx

@@ -0,0 +1,43 @@
+import { MachineBuildLog } from "../../../../components/MachineBuildLog";
+import { LogsViewer } from "@/components/LogsViewer";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getRelativeTime } from "@/lib/getRelativeTime";
+import { getMachineById } from "@/server/curdMachine";
+
+export default async function Page({
+  params,
+}: {
+  params: { machine_id: string };
+}) {
+  const machine = await getMachineById(params.machine_id);
+
+  return (
+    <div>
+      <Card className="w-full h-fit mt-4">
+        <CardHeader>
+          <CardTitle>{machine.name}</CardTitle>
+          <CardDescription suppressHydrationWarning={true}>
+            {getRelativeTime(machine?.updated_at)}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {machine.status == "building" && (
+            <MachineBuildLog
+              machine_id={params.machine_id}
+              endpoint={process.env.MODAL_BUILDER_URL!}
+            />
+          )}
+          {machine.build_log && (
+            <LogsViewer logs={JSON.parse(machine.build_log)} />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

web/src/app/(app)/workflows/[workflow_id]/loading.tsx

@@ -1,6 +0,0 @@
-import { LoadingPageWrapper } from "@/components/LoadingWrapper";
-
-export default function Loading() {
-  // You can add any UI inside Loading, including a Skeleton.
-  return <LoadingPageWrapper tag="workflow" />;
-}