diff --git a/hooks/useSSE.ts b/hooks/useSSE.ts
new file mode 100644
index 0000000..a9de1b3
--- /dev/null
+++ b/hooks/useSSE.ts
@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+export const useSSE = (url: string, onData: (data: any) => void) => {
+ useEffect(() => {
+ const sse = new EventSource(url, { withCredentials: true });
+
+ sse.onmessage = (e) => {
+ onData(JSON.parse(e.data));
+ };
+
+ sse.onerror = () => {
+ console.log("err!");
+ sse.close();
+ };
+
+ return () => {
+ sse.close();
+ };
+ }, [url]);
+};
diff --git a/lib/api.ts b/lib/api.ts
new file mode 100644
index 0000000..1bb2c5e
--- /dev/null
+++ b/lib/api.ts
@@ -0,0 +1,25 @@
+import { BASE_URL } from "./consts";
+
+export const api = async (url: string, options?: RequestInit) => {
+ const res = await fetch(BASE_URL + "/api" + url, options);
+ if (!res.ok) {
+ const body = await res.text().catch(() => null);
+ throw new APIError(body || res.statusText, res.status);
+ }
+
+ const contentType = res.headers.get("content-type");
+ if (contentType?.includes("application/json")) {
+ return res.json();
+ }
+
+ return res.text();
+};
+
+export class APIError extends Error {
+ code: number;
+
+ constructor(message: string, statusCode?: number) {
+ super(message);
+ this.code = typeof statusCode === "number" ? statusCode : 400;
+ }
+}
diff --git a/package.json b/package.json
index 3f768b9..58f7b85 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "dev": "tsx server/index.ts",
+ "dev": "HOST=0.0.0.0 tsx server/index.ts",
"dev:watch": "tsx watch --ignore *.mjs server/index.ts",
"start": "NODE_ENV=production tsx server/index.ts",
"build": "vite build",
@@ -58,6 +58,7 @@
"@trpc/server": "11.0.0-next-beta.289",
"@uiw/codemirror-theme-tokyo-night": "^4.21.22",
"@uiw/react-codemirror": "^4.21.22",
+ "ansi-to-react": "^6.1.6",
"bcrypt": "^5.1.1",
"better-sqlite3": "^9.4.1",
"class-variance-authority": "^0.7.0",
@@ -73,6 +74,7 @@
"jsonwebtoken": "^9.0.2",
"lucide-react": "^0.331.0",
"mime": "^4.0.1",
+ "node-fetch": "^3.3.2",
"nprogress": "^0.2.0",
"postcss": "^8",
"prettier": "^3.2.5",
diff --git a/pages/project/@slug/components/api-manager.tsx b/pages/project/@slug/components/api-manager.tsx
new file mode 100644
index 0000000..52b174f
--- /dev/null
+++ b/pages/project/@slug/components/api-manager.tsx
@@ -0,0 +1,182 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Ansi from "ansi-to-react";
+import { createId } from "@paralleldrive/cuid2";
+import { useProjectContext } from "../context/project";
+import { api } from "~/lib/api";
+import Spinner from "~/components/ui/spinner";
+import { useEffect, useState } from "react";
+import { BASE_URL } from "~/lib/consts";
+import { useSSE } from "~/hooks/useSSE";
+import Divider from "~/components/ui/divider";
+import { Button } from "~/components/ui/button";
+import { FaCopy, FaExternalLinkAlt, FaTimes } from "react-icons/fa";
+import ActionButton from "~/components/ui/action-button";
+import { copy, getUrl } from "~/lib/utils";
+
+const APIManager = () => {
+ const { project } = useProjectContext();
+
+ const stats = useQuery({
+ queryKey: ["sandbox/stats", project.slug],
+ queryFn: () => api(`/sandbox/${project.slug}/stats`),
+ refetchInterval: 5000,
+ retry: false,
+ });
+
+ const start = useMutation({
+ mutationFn: () => api(`/sandbox/${project.slug}/start`, { method: "POST" }),
+ onSuccess: () => stats.refetch(),
+ });
+
+ useEffect(() => {
+ if (stats.error && (stats.error as any).code === 404 && start.isIdle) {
+ start.mutate();
+ }
+ }, [stats.error, start.isIdle]);
+
+ const onRetry = () => {
+ if (start.isError) {
+ start.mutate();
+ } else if (!stats.data) {
+ stats.refetch();
+ }
+ };
+
+ if (stats.isLoading || start.isPending) {
+ return (
+
+
+
+ {start.isPending
+ ? "Starting up development sandbox..."
+ : "Please wait..."}
+
+
+
Cannot load dev sandbox :(
+ {start.error?.message ? (
+
{start.error.message}
+ ) : null}
+
+
+
+
+
copy(proxyUrl)}
+ />
+ window.open(getUrl(proxyUrl), "_blank")}
+ />
+
+
Status: {status}
+
Address: {addr}
+
CPU: {cpu}%
+
+ Memory: {memUsed != null ? `${memUsed} / ${memTotal} (${mem}%)` : "-"}
+
+
+
setLogs([])}
+ />
+
+ {logs.map((log) => (
+
+ {log.log.split("\n").map((line, idx) => (
+
+ {line}
+
+ ))}
+