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

package/apps/panel/app/ui/dashboard.jsx

@@ -1,8 +1,11 @@
 "use client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { runtimeLabels } from "@naviyra/shared";
 import { CloudflareConnect, DnsScreen, EmailScreen } from "./cloudflare";
+import { useConfirm } from "./confirm";
+import { useToast } from "./toast";
 import { DatabaseScreen } from "./databases";
+import { ProjectWorkspace } from "./project-tools";
 import { ThemeToggle } from "./theme";
 import {
   PageSkeleton,
@@ -82,11 +85,14 @@ export default function Dashboard({
   initialProject = null,
   initialTab = "overview",
 }) {
+  const confirm = useConfirm();
+  const toast = useToast();
+  const listError = useRef("");
+  const detailLoadError = useRef("");
+  const projectError = useRef("");
   const [projects, setProjects] = useState([]),
     [system, setSystem] = useState(null),
-    [loading, setLoading] = useState(true),
-    [error, setError] = useState(""),
-    [notice, setNotice] = useState("");
+    [loading, setLoading] = useState(true);
   const [cf, setCf] = useState(null);
   const [view, setView] = useState(initialView),
     [search, setSearch] = useState(""),
@@ -103,9 +109,12 @@ export default function Dashboard({
     try {
       const list = await api("projects");
       setProjects(list);
-      setError("");
+      listError.current = "";
     } catch (e) {
-      setError(e.message);
+      if (listError.current !== e.message) {
+        listError.current = e.message;
+        toast.failed(e.message);
+      }
     } finally {
       setLoading(false);
     }
@@ -114,7 +123,7 @@ export default function Dashboard({
     } catch (e) {
       setSystem({ available: false, error: e.message });
     }
-  }, []);
+  }, [toast]);
   useEffect(() => {
     load();
     const timer = setInterval(load, 5000);
@@ -173,16 +182,26 @@ export default function Dashboard({
       );
       setLogs(l.logs);
       setMetrics(m);
+      detailLoadError.current = "";
     } catch (e) {
-      setError(e.message);
+      if (detailLoadError.current !== e.message) {
+        detailLoadError.current = e.message;
+        toast.failed(e.message);
+      }
     }
-  }, [selected]);
+  }, [selected, toast]);
   useEffect(() => {
     setDetail(null);
     loadDetail();
     const timer = setInterval(loadDetail, 3000);
     return () => clearInterval(timer);
   }, [loadDetail]);
+  useEffect(() => {
+    const message = detail?.error || detail?.agent_error || "";
+    if (message === projectError.current) return;
+    projectError.current = message;
+    if (message) toast.failed(message);
+  }, [detail, toast]);
   const running = projects.filter((p) => p.status === "running").length,
     failed = projects.filter((p) => p.status === "failed").length;
   const visible = projects.filter(
@@ -193,35 +212,33 @@ export default function Dashboard({
   const open = (id) => {
     setSelected(id);
     setTab("overview");
-    setError("");
   };
   async function action(kind) {
     if (
       kind === "delete" &&
-      !window.confirm(
-        `Delete ${detail.name}? Its source, services, tunnel and DNS route will be removed.`,
-      )
+      !(await confirm({
+        title: `Delete ${detail.name}?`,
+        message:
+          "Its source, services, tunnel and DNS route will be removed.",
+        confirmLabel: "Delete",
+      }))
     )
       return;
     setBusy(true);
-    setError("");
     try {
       await api(`projects/${selected}${kind === "delete" ? "" : `/${kind}`}`, {
         method: kind === "delete" ? "DELETE" : "POST",
       });
       if (kind === "delete") {
         setSelected(null);
-        setNotice("Project deleted.");
-      } else
-        setNotice(
-          kind === "deploy"
-            ? "Deployment queued. Follow its progress below."
-            : "Services restarted.",
-        );
+        toast.success("Project deleted.");
+      } else if (kind === "deploy")
+        toast.progress("Deployment queued. Follow its progress below.");
+      else toast.success("Services restarted.");
       await load();
       if (kind !== "delete") await loadDetail();
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
@@ -418,25 +435,6 @@ export default function Dashboard({
           </div>
         )}
         <main className="content">
-          {error && (
-            <div role="alert" className="error dismissible">
-              {error}
-              <button aria-label="Dismiss error" onClick={() => setError("")}>
-                <X size={16} />
-              </button>
-            </div>
-          )}
-          {notice && (
-            <div role="status" className="notice dismissible">
-              {notice}
-              <button
-                aria-label="Dismiss notification"
-                onClick={() => setNotice("")}
-              >
-                <X size={16} />
-              </button>
-            </div>
-          )}
           {cf == null ? (
             <PageSkeleton view={selected ? "project" : view} />
           ) : !cf.registered && system?.mode !== "mock" ? (
@@ -447,7 +445,7 @@ export default function Dashboard({
                 setCf(status);
                 setView("projects");
                 setSelected(null);
-                setNotice("Cloudflare account connected.");
+                toast.success("Cloudflare account connected.");
               }}
             />
           ) : selected ? (
@@ -508,11 +506,6 @@ export default function Dashboard({
                       </button>
                     </div>
                   </div>
-                  {(detail.error || detail.agent_error) && (
-                    <div className="error">
-                      {detail.error || detail.agent_error}
-                    </div>
-                  )}
                   <div className="stats detail-stats">
                     <Stat
                       label="Application"
@@ -560,13 +553,20 @@ export default function Dashboard({
                     />
                   </div>
                   <div className="tabs">
-                    {["overview", "logs", "deployments"].map((t) => (
+                    {[
+                      ["overview", "Overview"],
+                      ["files", "Files"],
+                      ["application", "Application"],
+                      ["database", "Database"],
+                      ["logs", "Logs"],
+                      ["deployments", "Deployments"],
+                    ].map(([id, label]) => (
                       <button
-                        key={t}
-                        className={tab === t ? "active" : ""}
-                        onClick={() => setTab(t)}
+                        key={id}
+                        className={tab === id ? "active" : ""}
+                        onClick={() => setTab(id)}
                       >
-                        {t[0].toUpperCase() + t.slice(1)}
+                        {label}
                       </button>
                     ))}
                   </div>
@@ -601,6 +601,12 @@ export default function Dashboard({
                               ? detail.git_url
                               : "ZIP archive"}
                           </dd>
+                          <dt>Deployed directory</dt>
+                          <dd className="mono">
+                            {detail.folder_path
+                              ? `${detail.folder_path.replace(/[\\/]$/, "")}${detail.folder_path.includes("\\") ? "\\" : "/"}app`
+                              : "Available after the first upload"}
+                          </dd>
                           <dt>Hostname</dt>
                           <dd>{detail.subdomain}</dd>
                           <dt>Allocated port</dt>
@@ -623,7 +629,7 @@ export default function Dashboard({
                             <span>
                               Upload source archive
                               <small>
-                                Source files at the ZIP root · max 25 MB
+                                Source files at the ZIP root
                               </small>
                             </span>
                             <input
@@ -649,12 +655,12 @@ export default function Dashboard({
                                     },
                                     body: file,
                                   });
-                                  setNotice(
+                                  toast.success(
                                     "Source uploaded. Deploy when ready.",
                                   );
                                   await loadDetail();
                                 } catch (e) {
-                                  setError(e.message);
+                                  toast.failed(e.message);
                                 } finally {
                                   setBusy(false);
                                 }
@@ -720,6 +726,16 @@ export default function Dashboard({
                       )}
                     </section>
                   )}
+                  {(tab === "files" ||
+                    tab === "application" ||
+                    tab === "database") && (
+                    <ProjectWorkspace
+                      tab={tab}
+                      project={detail}
+                      canWrite={user.role === "admin"}
+                      onOpenDatabases={() => setView("databases")}
+                    />
+                  )}
                   <div className="danger-zone">
                     <div>
                       <strong>Delete project</strong>
@@ -1188,17 +1204,21 @@ function Stat({ label, value, icon: Icon, note, accent, warning }) {
   );
 }
 function CreateProject({ onClose, onCreated }) {
+  const toast = useToast();
   const [runtimeType, setRuntimeType] = useState("nodejs");
   const [source, setSource] = useState("git"),
-    [error, setError] = useState(""),
     [busy, setBusy] = useState(false),
     [file, setFile] = useState(null),
     [createdId, setCreatedId] = useState(null);
+const busyRef = useRef(busy);
+  const onCloseRef = useRef(onClose);
+  busyRef.current = busy;
+  onCloseRef.current = onClose;
   useEffect(() => {
     const previous = document.activeElement;
     document.getElementById("project-name")?.focus();
     const listener = (e) => {
-      if (e.key === "Escape" && !busy) onClose();
+      if (e.key === "Escape" && !busyRef.current) onCloseRef.current();
       if (e.key === "Tab") {
         const items = [
           ...document.querySelectorAll(
@@ -1221,15 +1241,13 @@ function CreateProject({ onClose, onCreated }) {
       document.removeEventListener("keydown", listener);
       previous?.focus();
     };
-  }, [busy, onClose]);
+  }, []);
   async function submit(e) {
     e.preventDefault();
-    setError("");
     setBusy(true);
     try {
       const values = Object.fromEntries(new FormData(e.currentTarget));
-      if (source === "zip" && (!file || file.size > 25 * 1024 * 1024))
-        throw Error("Choose a ZIP archive smaller than 25 MB");
+      if (source === "zip" && !file) throw Error("Choose a ZIP archive");
       let id = createdId;
       if (!id) {
         const project = await api("projects", {
@@ -1258,7 +1276,11 @@ function CreateProject({ onClose, onCreated }) {
         });
       await onCreated(id);
     } catch (e) {
-      setError(e.message);
+      toast.failed(
+        createdId
+          ? `${e.message} Project created; retry the upload or open it from your project list.`
+          : e.message,
+      );
     } finally {
       setBusy(false);
     }
@@ -1334,8 +1356,8 @@ function CreateProject({ onClose, onCreated }) {
                 ))}
               </select>
               <small>
-                Native deployment on Windows and Linux. Install the selected
-                runtime on your host.
+                PHP is downloaded by the panel on Windows and Linux. Node.js,
+                Python, and Go must already be installed on the host.
               </small>
             </label>
             {runtimeType === "python" && (
@@ -1438,7 +1460,7 @@ function CreateProject({ onClose, onCreated }) {
             <label className="upload">
               <Upload size={24} />
               <strong>{file ? file.name : "Choose a source archive"}</strong>
-              <small>ZIP · Up to 25 MB · source files at the root</small>
+              <small>ZIP · source files at the root</small>
               <input
                 aria-label="Choose ZIP archive"
                 type="file"
@@ -1455,13 +1477,6 @@ function CreateProject({ onClose, onCreated }) {
               your first deployment.
             </p>
           </div>
-          {error && (
-            <div role="alert" className="error">
-              {error}
-              {createdId &&
-                " Project created; retry the upload or open it from your project list."}
-            </div>
-          )}
           <div className="modal-actions">
             <button
               type="button"

package/apps/panel/app/ui/databases.jsx

@@ -1,7 +1,9 @@
 "use client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Copy, Database, Plus, Trash2 } from "lucide-react";
 import { SkeletonTable } from "./skeleton";
+import { useConfirm } from "./confirm";
+import { useToast } from "./toast";
 
 async function api(url, options = {}) {
   const response = await fetch(`/api/${url}`, {
@@ -18,80 +20,124 @@ async function api(url, options = {}) {
 }
 
 export function DatabaseScreen({ canWrite }) {
+  const confirm = useConfirm();
+  const toast = useToast();
+  const nativeError = useRef("");
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
   const [secret, setSecret] = useState(null);
+  const [native, setNative] = useState(null);
+  const [browse, setBrowse] = useState(null);
   const load = useCallback(async () => {
     try {
       setData(await api("databases"));
-      setError("");
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [toast]);
+  const loadNative = useCallback(async () => {
+    if (!canWrite) return;
+    try {
+      setNative(await api("databases/native"));
+    } catch (e) {
+      setNative({ error: e.message });
+    }
+  }, [canWrite]);
   useEffect(() => {
     load();
-  }, [load]);
+    loadNative();
+  }, [load, loadNative]);
+  useEffect(() => {
+    const message = native?.error || "";
+    if (message === nativeError.current) return;
+    nativeError.current = message;
+    if (message) toast.failed(message);
+  }, [native, toast]);
+  const openDatabase = async (name) => {
+    setBusy(true);
+    try {
+      setBrowse(await api(`databases/native/${encodeURIComponent(name)}`));
+    } catch (e) {
+      toast.failed(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const openTable = async (name, table) => {
+    setBusy(true);
+    try {
+      setBrowse(
+        await api(
+          `databases/native/${encodeURIComponent(name)}/${encodeURIComponent(table)}`,
+        ),
+      );
+    } catch (e) {
+      toast.failed(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
   const create = async (event) => {
     event.preventDefault();
     const form = event.currentTarget;
     const name = new FormData(form).get("name");
-    const engine = new FormData(form).get("engine");
     setBusy(true);
-    setError("");
     try {
       const created = await api("databases", {
         method: "POST",
-        body: JSON.stringify({
-          name,
-          ...(engine === "native" ? {} : { engine }),
-        }),
+        body: JSON.stringify({ name }),
       });
       form.reset();
       setSecret(created);
+      toast.success("Database created.");
       await load();
+      await loadNative();
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
   };
   const resetPassword = async (item) => {
     if (
-      !window.confirm(
-        `Replace the password for ${item.database}? The current password will stop working.`,
-      )
+      !(await confirm({
+        title: `Replace the password for ${item.database}?`,
+        message: "The current password will stop working.",
+        confirmLabel: "Replace password",
+      }))
     )
       return;
     setBusy(true);
-    setError("");
     try {
       setSecret(await api(`databases/${item.id}/password`, { method: "POST" }));
+      toast.success("Password replaced.");
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
   };
   const remove = async (item) => {
     if (
-      !window.confirm(
-        `Delete database ${item.database}? Applications using it will lose this data.`,
-      )
+      !(await confirm({
+        title: `Delete ${item.database}?`,
+        message: "Applications using it will lose this data.",
+        confirmLabel: "Delete",
+      }))
     )
       return;
     setBusy(true);
-    setError("");
     try {
       await api(`databases/${item.id}`, { method: "DELETE" });
       if (secret?.id === item.id) setSecret(null);
+      toast.success("Database deleted.");
       await load();
+      await loadNative();
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
@@ -100,7 +146,7 @@ export function DatabaseScreen({ canWrite }) {
     try {
       await navigator.clipboard.writeText(value);
     } catch {
-      setError("Could not copy to the clipboard.");
+      toast.failed("Could not copy to the clipboard.");
     }
   };
   const rows = data?.databases || [];
@@ -112,13 +158,12 @@ export function DatabaseScreen({ canWrite }) {
             Databases<span className="title-dot">.</span>
           </h1>
           <p>
-            Choose a database for applications on this server. Missing engines
-            download automatically.
+            Databases are created on the PostgreSQL server already running on
+            this machine.
           </p>
         </div>
       </div>
       <div className="stack database-screen">
-        {error && <div className="error">{error}</div>}
         {secret && (
           <section className="credential">
             <strong>Password for {secret.database}</strong>
@@ -154,34 +199,11 @@ export function DatabaseScreen({ canWrite }) {
         <section className="panel">
           <form className="database-create" onSubmit={create}>
             <label>
-              Database engine
+              Database name
               <small>
-                Naviyra installs and manages the runtime automatically.
+                Created on the native PostgreSQL server. Lowercase letters,
+                numbers, and underscores.
               </small>
-              <select
-                name="engine"
-                aria-label="Database engine"
-                disabled={!canWrite || busy}
-              >
-                {(
-                  data?.engines || [
-                    { value: "postgresql", label: "PostgreSQL" },
-                    { value: "mysql", label: "MySQL" },
-                    { value: "mariadb", label: "MariaDB" },
-                  ]
-                ).map((engine) => (
-                  <option key={engine.value} value={engine.value}>
-                    {engine.label}
-                  </option>
-                ))}
-                <option value="native">
-                  PostgreSQL (existing native server)
-                </option>
-              </select>
-            </label>
-            <label>
-              Database name
-              <small>Lowercase letters, numbers, and underscores.</small>
               <input
                 name="name"
                 placeholder="crm"
@@ -196,13 +218,100 @@ export function DatabaseScreen({ canWrite }) {
               {busy ? "Working…" : "Create database"}
             </button>
           </form>
-          {busy && (
-            <p role="status">
-              Preparing the runtime and database. First setup can take several
-              minutes. Keep this page open.
-            </p>
-          )}
         </section>
+        {canWrite && (
+          <section className="panel native-browser">
+            <div className="section-heading">
+              <h2>Native PostgreSQL</h2>
+              <span className="muted">
+                {native?.host
+                  ? `${native.host}:${native.port}`
+                  : native?.error || "Checking the local server"}
+              </span>
+            </div>
+            {native?.databases?.length ? (
+              <div className="db-pills" role="list">
+                {native.databases.map((item) => (
+                  <button
+                    key={item.name}
+                    type="button"
+                    className={
+                      browse?.database === item.name ? "active" : ""
+                    }
+                    disabled={busy}
+                    onClick={() => openDatabase(item.name)}
+                  >
+                    {item.name}
+                  </button>
+                ))}
+              </div>
+            ) : (
+              native &&
+              !native.error && (
+                <p className="muted browser-note">
+                  No application databases yet.
+                </p>
+              )
+            )}
+            {browse && (
+              <>
+                <div className="db-pills" role="list">
+                  {browse.tables.length ? (
+                    browse.tables.map((table) => (
+                      <button
+                        key={table}
+                        type="button"
+                        className={browse.table === table ? "active" : ""}
+                        disabled={busy}
+                        onClick={() => openTable(browse.database, table)}
+                      >
+                        {table}
+                      </button>
+                    ))
+                  ) : (
+                    <p className="muted browser-note">
+                      No tables in the public schema.
+                    </p>
+                  )}
+                </div>
+                {browse.table &&
+                  (browse.rows.length ? (
+                    <div className="table-wrap">
+                      <table>
+                        <thead>
+                          <tr>
+                            {browse.columns.map((column) => (
+                              <th key={column.name}>{column.name}</th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {browse.rows.map((row, index) => (
+                            <tr key={index}>
+                              {browse.columns.map((column) => (
+                                <td key={column.name} className="mono">
+                                  {row[column.name] == null
+                                    ? "—"
+                                    : String(row[column.name])}
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <p className="muted browser-note">This table is empty.</p>
+                  ))}
+                {browse.table && (
+                  <p className="muted browser-note">
+                    Showing up to 50 rows. Passwords and tokens stay hidden.
+                  </p>
+                )}
+              </>
+            )}
+          </section>
+        )}
         <section className="panel">
           {!data && loading ? (
             <SkeletonTable