@naviyra/cloud-panel 0.0.3-beta → 0.0.3-beta3

package/apps/panel/app/api/[...path]/route.js

@@ -3,24 +3,27 @@ import { randomUUID } from "node:crypto";
 import { cookies } from "next/headers";
 import { db } from "../../../lib/db.mjs";
 import { session, signIn } from "../../../lib/auth.mjs";
+import { originAllowed } from "../../../lib/request-origin.mjs";
 import { agent, reconcile } from "../../../lib/agent.mjs";
-import { projectInput, idSchema, MAX_ZIP_BYTES } from "@naviyra/shared";
+import { projectInput, runtimeConfig, idSchema } from "@naviyra/shared";
 import {
   listDatabases,
   createDatabase,
   deleteDatabase,
   resetDatabasePassword,
+  listNativeDatabases,
+  browseNativeDatabase,
 } from "../../../lib/databases.mjs";
 export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
 const attempts = (globalThis.naviyraAttempts ||= new Map());
 const json = (data, status = 200) =>
   Response.json(data, { status, headers: { "Cache-Control": "no-store" } });
-async function readJson(req) {
-  if (Number(req.headers.get("content-length")) > 8192)
+async function readJson(req, limit = 8192) {
+  if (Number(req.headers.get("content-length")) > limit)
     throw Object.assign(Error("Request too large"), { status: 413 });
   const text = await req.text();
-  if (text.length > 8192)
+  if (text.length > limit)
     throw Object.assign(Error("Request too large"), { status: 413 });
   return JSON.parse(text);
 }
@@ -31,7 +34,7 @@ async function handle(req, { params }) {
     const method = req.method;
     if (method !== "GET") {
       const expected = process.env.PUBLIC_ORIGIN || new URL(req.url).origin;
-      if (req.headers.get("origin") !== expected)
+      if (!originAllowed(req.headers.get("origin"), expected))
         return json({ error: "Invalid request origin" }, 403);
     }
     if (route === "auth/login" && method === "POST") {
@@ -90,6 +93,15 @@ async function handle(req, { params }) {
     }
     if (route === "databases" && method === "GET")
       return json(await listDatabases(user.id));
+    if (parts[0] === "databases" && parts[1] === "native") {
+      if (user.role !== "admin")
+        return json({ error: "Administrator access required" }, 403);
+      if (method !== "GET") return json({ error: "Method not allowed" }, 405);
+      if (parts.length === 2) return json(await listNativeDatabases());
+      if (parts.length === 3 || parts.length === 4)
+        return json(await browseNativeDatabase(parts[2], parts[3]));
+      return json({ error: "Not found" }, 404);
+    }
     if (route === "databases" && method === "POST") {
       const body = await readJson(req);
       const created = await createDatabase(
@@ -312,6 +324,82 @@ async function handle(req, { params }) {
         ])
       ).rows[0];
       if (!project) return json({ error: "Project not found" }, 404);
+      if (action === "files") {
+        const search = new URL(req.url).search || "";
+        if (method === "GET" && new URL(req.url).searchParams.get("download") === "1") {
+          const response = await agent(`/projects/${id}/files${search}`, {
+            raw: true,
+          });
+          return new Response(response.body, {
+            status: 200,
+            headers: {
+              "Content-Type": "application/octet-stream",
+              "Content-Disposition":
+                response.headers.get("content-disposition") || "attachment",
+              "Cache-Control": "no-store",
+            },
+          });
+        }
+        if (method === "GET")
+          return json(await agent(`/projects/${id}/files${search}`));
+        if (method === "POST") {
+          const length = Number(req.headers.get("content-length") || 0);
+          if (length > 32 * 1024 * 1024)
+            return json({ error: "File is larger than 32 MB" }, 413);
+          return json(
+            await agent(`/projects/${id}/files${search}`, {
+              method: "POST",
+              headers: { "Content-Type": "application/octet-stream" },
+              body: req.body,
+              duplex: "half",
+              signal: AbortSignal.timeout(10 * 60 * 1000),
+            }),
+          );
+        }
+        if (method === "PUT") {
+          const body = await readJson(req, 2 * 1024 * 1024);
+          return json(
+            await agent(`/projects/${id}/files`, {
+              method: "PUT",
+              body: JSON.stringify(body),
+            }),
+          );
+        }
+        if (method === "DELETE")
+          return json(
+            await agent(`/projects/${id}/files${search}`, { method: "DELETE" }),
+          );
+        return json({ error: "Method not allowed" }, 405);
+      }
+      if (method === "PUT" && action === "config") {
+        const body = await readJson(req, 32768);
+        const types = new Set([
+          "nodejs",
+          "python",
+          "php",
+          "go",
+          "static",
+          "custom",
+        ]);
+        const type = types.has(body.type) ? body.type : project.type;
+        const config = runtimeConfig.parse({
+          ...(project.runtime_config || {}),
+          ...(body.runtime_config || {}),
+        });
+        await db.query(
+          "UPDATE projects SET type=$2, runtime_config=$3, updated_at=now() WHERE id=$1",
+          [id, type, JSON.stringify(config)],
+        );
+        await agent("/projects", {
+          method: "POST",
+          body: JSON.stringify({ ...project, type, runtime_config: config }),
+        });
+        await db.query(
+          "INSERT INTO audit_logs(user_id,project_id,action) VALUES($1,$2,$3)",
+          [user.id, id, "project.config"],
+        );
+        return json({ type, runtime_config: config });
+      }
       if (method === "GET" && !action) {
         let current = project;
         try {
@@ -332,14 +420,6 @@ async function handle(req, { params }) {
       if (method === "PUT" && action === "source") {
         if (project.source_type !== "zip")
           return json({ error: "This project uses Git" }, 400);
-        const chunks = [];
-        let size = 0;
-        for await (const chunk of req.body) {
-          size += chunk.byteLength;
-          if (size > MAX_ZIP_BYTES)
-            return json({ error: "ZIP limit is 25 MB" }, 413);
-          chunks.push(Buffer.from(chunk));
-        }
         await agent("/projects", {
           method: "POST",
           body: JSON.stringify(project),
@@ -348,7 +428,9 @@ async function handle(req, { params }) {
           await agent(`/projects/${id}/source`, {
             method: "PUT",
             headers: { "Content-Type": "application/zip" },
-            body: Buffer.concat(chunks),
+            body: req.body,
+            duplex: "half",
+            signal: AbortSignal.timeout(24 * 60 * 60 * 1000),
           }),
         );
       }

package/apps/panel/app/globals.css

@@ -976,6 +976,84 @@ footer > span:last-child {
   color: #227757;
   border: 1px solid #d6eadc;
 }
+.toast-stack {
+  position: fixed;
+  top: 22px;
+  right: 22px;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(380px, calc(100vw - 32px));
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  box-shadow: 0 14px 36px #142f3c24;
+  overflow: hidden;
+}
+.toast.success {
+  background: #eaf7ef;
+  color: #1d6b4a;
+  border-color: #d6eadc;
+}
+.toast.progress {
+  background: #fff6e8;
+  color: #8a5a12;
+  border-color: #f0e0c2;
+}
+.toast.failed {
+  background: #fff0ed;
+  color: #b85243;
+  border-color: #f3d9d4;
+}
+.toast-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 12px;
+}
+.toast-row p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.toast-row button {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+.toast-track {
+  height: 5px;
+  background: #00000014;
+}
+.toast.success .toast-progress {
+  background: #1d6b4a;
+}
+.toast.progress .toast-progress {
+  background: #c4842a;
+}
+.toast.failed .toast-progress {
+  background: #b85243;
+}
+.toast-progress {
+  display: block;
+  height: 100%;
+  width: 100%;
+  transform-origin: left center;
+  animation: toast-countdown 10s linear forwards;
+}
+@keyframes toast-countdown {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
 .dismissible {
   display: flex;
   justify-content: space-between;
@@ -1011,6 +1089,7 @@ footer > span:last-child {
 }
 .tabs {
   display: flex;
+  flex-wrap: wrap;
   gap: 25px;
   border-bottom: 1px solid #dce4e7;
   margin-bottom: 22px;
@@ -1033,7 +1112,7 @@ footer > span:last-child {
 }
 dl {
   display: grid;
-  grid-template-columns: 120px minmax(0, 1fr);
+  grid-template-columns: 140px minmax(0, 1fr);
   gap: 19px 15px;
   padding: 24px;
   margin: 0;
@@ -1280,6 +1359,35 @@ label small {
   margin-top: 24px;
   padding-top: 20px;
 }
+.alert-backdrop {
+  z-index: 80;
+}
+.alert-modal {
+  width: 420px;
+}
+.alert-modal h2 {
+  margin-bottom: 8px;
+}
+.alert-modal > p {
+  color: var(--muted);
+  line-height: 1.6;
+  margin-bottom: 0;
+}
+.alert-confirm {
+  color: white;
+  background: #b65c58;
+  border: 1px solid #b65c58;
+  border-radius: 6px;
+  padding: 11px 16px;
+  min-height: 38px;
+  font-size: 11px;
+  font-weight: 550;
+}
+.alert-confirm:focus-visible,
+.alert-modal .secondary:focus-visible {
+  outline: 2px solid var(--green);
+  outline-offset: 2px;
+}
 .login {
   min-height: 100vh;
   display: grid;
@@ -1709,27 +1817,105 @@ html[data-theme="dark"] .danger-text {
 .database-screen {
   margin-bottom: 10px;
 }
-.database-create {
+.native-browser {
+  padding-bottom: 8px;
+}
+.native-browser .section-heading {
+  padding: 18px 23px 0;
+}
+.db-pills {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
+  gap: 8px;
+  padding: 16px 23px;
+}
+.db-pills button {
+  border: 1px solid #dde4e7;
+  border-radius: 6px;
+  background: transparent;
+  color: #3e5360;
+  font-size: 12px;
+  padding: 7px 10px;
+}
+.db-pills button.active {
+  border-color: var(--green);
+  color: var(--green);
+}
+.browser-note {
+  padding: 0 23px 16px;
+}
+.database-create {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) auto;
+  align-items: end;
   gap: 12px 16px;
   padding: 18px 23px 20px;
 }
 .database-create label {
-  flex: 1 1 220px;
-  max-width: 460px;
   margin-bottom: 0;
+  min-width: 0;
 }
 .database-create small {
   margin-top: 4px;
+  line-height: 1.45;
 }
-.database-create input {
+.database-create input,
+.database-create select {
   height: 40px;
   margin-top: 8px;
+  box-sizing: border-box;
+}
+.database-create select {
+  display: block;
+  width: 100%;
+  padding: 0 36px 0 12px;
+  border: 1px solid #dde4e7;
+  border-radius: 6px;
+  background-color: var(--surface);
+  color: #3e5360;
+  font-size: 12px;
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
+    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) center,
+    calc(100% - 13px) center;
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
 }
 .database-create .primary {
   height: 40px;
+  min-height: 40px;
+}
+html[data-theme="dark"] .db-pills button {
+  border-color: #31464c;
+  color: #d5e4ea;
+}
+html[data-theme="dark"] .database-create select {
+  background-color: var(--surface);
+  color: var(--ink);
+  border-color: var(--line);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
+    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) center,
+    calc(100% - 13px) center;
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+}
+@media (max-width: 720px) {
+  .database-create {
+    grid-template-columns: 1fr;
+  }
+  .database-create .primary {
+    justify-self: start;
+  }
 }
 .mail-address {
   display: flex;
@@ -2016,11 +2202,37 @@ html[data-theme="dark"] .badge.queued {
   background: #3a321c;
   color: #efd392;
 }
-html[data-theme="dark"] .notice {
+html[data-theme="dark"] .notice,
+html[data-theme="dark"] .toast.success {
   background: #17352c;
   color: #b7efe4;
   border-color: #245246;
 }
+html[data-theme="dark"] .toast {
+  box-shadow: 0 14px 36px #00000066;
+}
+html[data-theme="dark"] .toast.progress {
+  background: #3a321c;
+  color: #efd392;
+  border-color: #5a4a2e;
+}
+html[data-theme="dark"] .toast.failed {
+  background: #3a2422;
+  color: #f0b2a8;
+  border-color: #5a332e;
+}
+html[data-theme="dark"] .toast-track {
+  background: #ffffff18;
+}
+html[data-theme="dark"] .toast.success .toast-progress {
+  background: #8ee0d0;
+}
+html[data-theme="dark"] .toast.progress .toast-progress {
+  background: #efd392;
+}
+html[data-theme="dark"] .toast.failed .toast-progress {
+  background: #f0b2a8;
+}
 html[data-theme="dark"] .quick-start {
   background: linear-gradient(110deg, #17342e, #172126);
 }
@@ -2055,3 +2267,97 @@ html[data-theme="dark"] .stat,
 html[data-theme="dark"] .panel {
   border-color: var(--line);
 }
+.file-crumbs,
+.file-actions,
+.env-row,
+.app-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin: 12px 0;
+}
+.file-crumbs button,
+.file-row > button,
+.file-row-actions button,
+.file-row-actions a {
+  background: transparent;
+  color: var(--ink);
+  padding: 0;
+}
+.file-crumbs button + button::before {
+  content: "/";
+  margin-right: 8px;
+  color: var(--muted);
+}
+.file-list {
+  display: grid;
+  gap: 6px;
+}
+.file-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+.file-row > button {
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  text-align: left;
+  gap: 12px;
+}
+.file-row small {
+  color: var(--muted);
+}
+.file-row-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.file-upload input {
+  display: none;
+}
+.file-editor {
+  width: 100%;
+  min-height: 280px;
+  margin: 8px 0 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+.app-fields {
+  align-items: end;
+}
+.app-fields label {
+  display: grid;
+  gap: 6px;
+  min-width: 180px;
+  font-size: 13px;
+}
+.env-row input {
+  min-width: 140px;
+}
+.connection-box,
+.db-mini {
+  margin: 14px 0;
+}
+.connection-box code {
+  display: block;
+  margin: 8px 0;
+  overflow-wrap: anywhere;
+}
+.db-mini {
+  list-style: none;
+  padding: 0;
+}
+.db-mini li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--line);
+}

package/apps/panel/app/layout.jsx

@@ -1,5 +1,6 @@
 import "./globals.css";
 import { ThemeSync } from "./ui/theme";
+import { ToastProvider } from "./ui/toast";
 export const metadata = {
   title: "Naviyra · Cloudflare hosting",
   description: "Your applications. Your infrastructure. One panel.",
@@ -11,7 +12,7 @@ export default function Layout({ children }) {
       <body>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
         <ThemeSync />
-        {children}
+        <ToastProvider>{children}</ToastProvider>
       </body>
     </html>
   );

package/apps/panel/app/login/page.jsx

@@ -2,15 +2,15 @@
 import { useEffect, useState } from "react";
 import { ArrowRight, ShieldCheck, Cloud, Terminal } from "lucide-react";
 import { ThemeToggle } from "../ui/theme";
+import { useToast } from "../ui/toast";
 export default function Login() {
-  const [error, setError] = useState("");
+  const toast = useToast();
   const [busy, setBusy] = useState(false);
   const [ready, setReady] = useState(false);
   useEffect(() => setReady(true), []);
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
-    setError("");
     const values = Object.fromEntries(new FormData(event.currentTarget));
     try {
       const response = await fetch("/api/auth/login", {
@@ -22,7 +22,7 @@ export default function Login() {
       if (!response.ok) throw Error(body.error);
       window.location.href = "/";
     } catch (error) {
-      setError(error.message);
+      toast.failed(error.message);
       setBusy(false);
     }
   }
@@ -86,11 +86,6 @@ export default function Login() {
                 required
               />
             </label>
-            {error && (
-              <div role="alert" className="error">
-                {error}
-              </div>
-            )}
             <button className="primary" disabled={busy || !ready}>
               {busy ? "Signing in…" : "Sign in"}
               <ArrowRight size={17} />

package/apps/panel/app/page.jsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { session } from "../lib/auth.mjs";
 import Dashboard from "./ui/dashboard";
+import { ConfirmProvider } from "./ui/confirm";
 export const dynamic = "force-dynamic";
 const views = new Set([
   "projects",
@@ -10,7 +11,14 @@ const views = new Set([
   "dns",
   "email",
 ]);
-const tabs = new Set(["overview", "logs", "deployments"]);
+const tabs = new Set([
+  "overview",
+  "files",
+  "application",
+  "database",
+  "logs",
+  "deployments",
+]);
 const projectId = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 function one(value) {
   return (Array.isArray(value) ? value[0] : value) || "";
@@ -23,11 +31,13 @@ export default async function Page({ searchParams }) {
   const project = projectId.test(one(params?.project)) ? one(params.project) : null;
   const tab = tabs.has(one(params?.tab)) ? one(params.tab) : "overview";
   return (
-    <Dashboard
-      user={user}
-      initialView={view}
-      initialProject={project}
-      initialTab={tab}
-    />
+    <ConfirmProvider>
+      <Dashboard
+        user={user}
+        initialView={view}
+        initialProject={project}
+        initialTab={tab}
+      />
+    </ConfirmProvider>
   );
 }