@naviyra/cloud-panel 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,293 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { Copy, Database, Plus, Trash2 } from "lucide-react";
+import { SkeletonTable } from "./skeleton";
+
+async function api(url, options = {}) {
+  const response = await fetch(`/api/${url}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...options.headers },
+  });
+  const body = await response.json();
+  if (response.status === 401) {
+    window.location.href = "/login";
+    throw Error("Session expired");
+  }
+  if (!response.ok) throw Error(body.error || "Request failed");
+  return body;
+}
+
+export function DatabaseScreen({ canWrite }) {
+  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 load = useCallback(async () => {
+    try {
+      setData(await api("databases"));
+      setError("");
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    load();
+  }, [load]);
+  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 }),
+        }),
+      });
+      form.reset();
+      setSecret(created);
+      await load();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const resetPassword = async (item) => {
+    if (
+      !window.confirm(
+        `Replace the password for ${item.database}? The current password will stop working.`,
+      )
+    )
+      return;
+    setBusy(true);
+    setError("");
+    try {
+      setSecret(await api(`databases/${item.id}/password`, { method: "POST" }));
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const remove = async (item) => {
+    if (
+      !window.confirm(
+        `Delete database ${item.database}? Applications using it will lose this data.`,
+      )
+    )
+      return;
+    setBusy(true);
+    setError("");
+    try {
+      await api(`databases/${item.id}`, { method: "DELETE" });
+      if (secret?.id === item.id) setSecret(null);
+      await load();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const copy = async (value) => {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      setError("Could not copy to the clipboard.");
+    }
+  };
+  const rows = data?.databases || [];
+  return (
+    <>
+      <div className="page-heading">
+        <div>
+          <h1>
+            Databases<span className="title-dot">.</span>
+          </h1>
+          <p>
+            Choose a database for applications on this server. Missing engines
+            download automatically.
+          </p>
+        </div>
+      </div>
+      <div className="stack database-screen">
+        {error && <div className="error">{error}</div>}
+        {secret && (
+          <section className="credential">
+            <strong>Password for {secret.database}</strong>
+            <p>Save this password. It is shown only this time.</p>
+            <div className="credential-row">
+              <input
+                readOnly
+                value={secret.password}
+                aria-label="Database password"
+              />
+              <button
+                className="secondary"
+                type="button"
+                onClick={() => copy(secret.password)}
+              >
+                <Copy size={14} />
+                Copy
+              </button>
+            </div>
+            <button
+              className="text-button"
+              type="button"
+              onClick={() =>
+                copy(
+                  `${secret.engine === "postgresql" ? "postgresql" : "mysql"}://${secret.user}:${encodeURIComponent(secret.password)}@${secret.host}:${secret.port}/${secret.database}`,
+                )
+              }
+            >
+              Copy connection string
+            </button>
+          </section>
+        )}
+        <section className="panel">
+          <form className="database-create" onSubmit={create}>
+            <label>
+              Database engine
+              <small>
+                Naviyra installs and manages the runtime automatically.
+              </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"
+                aria-label="Database name"
+                autoComplete="off"
+                required
+                disabled={!canWrite || busy}
+              />
+            </label>
+            <button className="primary" disabled={!canWrite || busy}>
+              <Plus size={16} />
+              {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>
+        <section className="panel">
+          {!data && loading ? (
+            <SkeletonTable
+              label="Loading databases"
+              columns={[
+                "Name",
+                "Engine",
+                "User",
+                "Host",
+                "Port",
+                "Created",
+                "",
+              ]}
+            />
+          ) : rows.length ? (
+            <div className="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Engine</th>
+                    <th>User</th>
+                    <th>Host</th>
+                    <th>Port</th>
+                    <th>Created</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((item) => (
+                    <tr key={item.id}>
+                      <td className="mono">{item.database}</td>
+                      <td>
+                        {{
+                          postgresql: "PostgreSQL",
+                          mysql: "MySQL",
+                          mariadb: "MariaDB",
+                        }[item.engine] || item.engine}
+                      </td>
+                      <td className="mono">{item.user}</td>
+                      <td className="mono">{item.host}</td>
+                      <td>{item.port}</td>
+                      <td>{new Date(item.created_at).toLocaleDateString()}</td>
+                      <td>
+                        {canWrite && (
+                          <span className="row-actions">
+                            <button
+                              className="text-button"
+                              type="button"
+                              disabled={busy}
+                              onClick={() => resetPassword(item)}
+                            >
+                              New password
+                            </button>
+                            <button
+                              className="text-button danger-text"
+                              type="button"
+                              disabled={busy}
+                              onClick={() => remove(item)}
+                            >
+                              <Trash2 size={14} />
+                              Delete
+                            </button>
+                          </span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className="empty compact-empty">
+              <div className="empty-icon">
+                <Database size={28} />
+              </div>
+              <h3>No databases yet</h3>
+              <p>
+                Create one and use its host, user, and password in your
+                application.
+              </p>
+            </div>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,196 @@
+export function SkeletonTable({ label, columns, rows = 6, tableClass = "" }) {
+  return (
+    <div className="table-wrap skeleton-table-wrap">
+      <table className={tableClass} aria-busy="true" aria-label={label}>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th key={column || "actions"}>{column}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rows }, (_, row) => (
+            <tr key={row} className="skeleton-row">
+              {columns.map((column, index) => (
+                <td key={`${column}-${index}`}>
+                  {column ? <span className="skeleton" /> : null}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function SkeletonStats({ count = 4, label = "Loading" }) {
+  return (
+    <div className="stats" aria-busy="true" aria-label={label}>
+      {Array.from({ length: count }, (_, index) => (
+        <div key={index} className="stat skeleton-card">
+          <span className="skeleton" />
+          <span className="skeleton" />
+          <span className="skeleton" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonRows({ rows = 5, label = "Loading" }) {
+  return (
+    <div aria-busy="true" aria-label={label}>
+      {Array.from({ length: rows }, (_, index) => (
+        <div key={index} className="skeleton-line">
+          <span className="skeleton sq" />
+          <span className="skeleton grow" />
+          <span className="skeleton mid" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ProjectSkeleton() {
+  return (
+    <div aria-busy="true" aria-label="Loading project">
+      <div className="page-heading">
+        <span className="skeleton title" />
+        <span className="skeleton button" />
+      </div>
+      <SkeletonStats label="Loading project" />
+      <section className="panel">
+        <SkeletonRows rows={4} label="Loading project" />
+      </section>
+    </div>
+  );
+}
+
+export function EmailSkeleton() {
+  return (
+    <div className="stack" aria-busy="true" aria-label="Loading email routing">
+      <section className="panel skeleton-status">
+        <span className="skeleton" />
+        <span className="skeleton" />
+      </section>
+      <section className="panel">
+        <div className="section-heading">
+          <h2>Destination addresses</h2>
+        </div>
+        <SkeletonTable
+          label="Loading destination addresses"
+          columns={["Email", "Verified", ""]}
+          rows={3}
+        />
+      </section>
+      <section className="panel">
+        <div className="section-heading">
+          <h2>Routing rules</h2>
+        </div>
+        <SkeletonTable
+          label="Loading routing rules"
+          columns={["Name", "Match", "Action", "Enabled", ""]}
+          rows={3}
+        />
+      </section>
+    </div>
+  );
+}
+
+export function PageSkeleton({ view }) {
+  if (view === "project") return <ProjectSkeleton />;
+  if (view === "infrastructure") {
+    return (
+      <>
+        <div className="page-heading">
+          <h1>
+            Infrastructure<span className="title-dot">.</span>
+          </h1>
+        </div>
+        <SkeletonStats label="Loading infrastructure" />
+        <section className="panel">
+          <SkeletonRows rows={4} label="Loading infrastructure" />
+        </section>
+      </>
+    );
+  }
+  if (view === "activity") {
+    return (
+      <>
+        <div className="page-heading">
+          <h1>
+            Project activity<span className="title-dot">.</span>
+          </h1>
+        </div>
+        <section className="panel">
+          <SkeletonRows label="Loading activity" />
+        </section>
+      </>
+    );
+  }
+  if (view === "dns") {
+    return (
+      <>
+        <div className="page-heading">
+          <h1>
+            DNS records<span className="title-dot">.</span>
+          </h1>
+        </div>
+        <section className="panel">
+          <SkeletonTable
+            label="Loading DNS records"
+            tableClass="dns-table"
+            columns={["Type", "Name", "Content", "Proxy", "TTL", ""]}
+          />
+        </section>
+      </>
+    );
+  }
+  if (view === "databases") {
+    return (
+      <>
+        <div className="page-heading">
+          <h1>
+            Databases<span className="title-dot">.</span>
+          </h1>
+        </div>
+        <section className="panel">
+          <SkeletonTable
+            label="Loading databases"
+            columns={["Name", "User", "Host", "Port", "Created", ""]}
+          />
+        </section>
+      </>
+    );
+  }
+  if (view === "email") {
+    return (
+      <>
+        <div className="page-heading">
+          <h1>
+            Email routing<span className="title-dot">.</span>
+          </h1>
+        </div>
+        <EmailSkeleton />
+      </>
+    );
+  }
+  return (
+    <>
+      <div className="page-heading">
+        <h1>
+          Projects<span className="title-dot">.</span>
+        </h1>
+      </div>
+      <SkeletonStats label="Loading projects" />
+      <section className="panel">
+        <SkeletonTable
+          label="Loading projects"
+          columns={["Project", "Status", "Domain", "Port", "Updated", ""]}
+        />
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export function ThemeSync() {
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => {
+      if (localStorage.getItem("naviyra-theme")) return;
+      document.documentElement.dataset.theme = media.matches ? "dark" : "light";
+    };
+    media.addEventListener("change", apply);
+    return () => media.removeEventListener("change", apply);
+  }, []);
+  return null;
+}
+
+export function ThemeToggle({ className = "" }) {
+  return (
+    <button
+      type="button"
+      className={`theme-toggle ${className}`.trim()}
+      aria-label="Toggle color theme"
+      onClick={() => {
+        const next =
+          document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+        document.documentElement.dataset.theme = next;
+        localStorage.setItem("naviyra-theme", next);
+      }}
+    >
+      <Sun className="theme-sun" size={16} aria-hidden="true" />
+      <Moon className="theme-moon" size={16} aria-hidden="true" />
+    </button>
+  );
+}

package/apps/panel/lib/agent.mjs

@@ -0,0 +1,83 @@
+import { db } from "./db.mjs";
+export async function agent(route, options = {}) {
+  const base = process.env.AGENT_URL || "http://127.0.0.1:4001";
+  const url = new URL(base);
+  if (
+    url.protocol !== "https:" &&
+    !["127.0.0.1", "localhost", "[::1]"].includes(url.hostname)
+  )
+    throw Error("Remote agents require HTTPS");
+  if ((process.env.AGENT_TOKEN?.length || 0) < 32)
+    throw Error("Configure AGENT_TOKEN");
+  const response = await fetch(base + route, {
+    ...options,
+    headers: {
+      Authorization: `Bearer ${process.env.AGENT_TOKEN}`,
+      "Content-Type": "application/json",
+      ...options.headers,
+    },
+    cache: "no-store",
+    signal: AbortSignal.timeout(30000),
+  });
+  const body = await response.json();
+  if (!response.ok)
+    throw Object.assign(Error(body.error || "Agent request failed"), {
+      status: response.status,
+    });
+  await db.query("UPDATE agents SET last_seen=now() WHERE name='primary'");
+  return body;
+}
+export async function reconcile(project) {
+  const remote = await agent(`/projects/${project.id}`);
+  const client = await db.connect();
+  try {
+    await client.query("BEGIN");
+    await client.query(
+      "UPDATE projects SET status=$2,port=$3,folder_path=$4,updated_at=CASE WHEN status IS DISTINCT FROM $2 THEN now() ELSE updated_at END WHERE id=$1",
+      [project.id, remote.status, remote.port, remote.folder_path],
+    );
+    await client.query(
+      "UPDATE deployments SET status='failed',error='Agent did not accept this deployment. Please retry.',finished_at=now() WHERE project_id=$1 AND status IN ('queued','deploying') AND id IS DISTINCT FROM $2::uuid AND created_at < now() - interval '2 minutes'",
+      [project.id, remote.deployment_id || null],
+    );
+    if (remote.deployment_id)
+      await client.query(
+        "UPDATE deployments SET status=$2,error=$3,logs_ref=$4,finished_at=CASE WHEN $2 IN ('running','failed') THEN COALESCE(finished_at,now()) ELSE NULL END WHERE id=$1 AND project_id=$5",
+        [
+          remote.deployment_id,
+          remote.status,
+          remote.error || null,
+          `agent:${project.id}`,
+          project.id,
+        ],
+      );
+    if (remote.tunnel) {
+      const t = remote.tunnel;
+      await client.query(
+        "INSERT INTO tunnels(project_id,tunnel_id,tunnel_name,credentials_path,config_path) VALUES($1,$2,$3,$4,$5) ON CONFLICT(project_id) DO UPDATE SET tunnel_id=$2,tunnel_name=$3,credentials_path=$4,config_path=$5",
+        [
+          project.id,
+          t.tunnel_id,
+          t.tunnel_name,
+          t.credentials_path,
+          t.config_path,
+        ],
+      );
+    }
+    await client.query("COMMIT");
+  } catch (error) {
+    await client.query("ROLLBACK");
+    throw error;
+  } finally {
+    client.release();
+  }
+  return {
+    ...project,
+    status: remote.status,
+    port: remote.port,
+    folder_path: remote.folder_path,
+    tunnel: remote.tunnel,
+    error: remote.error,
+    has_upload: remote.has_upload,
+  };
+}

package/apps/panel/lib/auth.mjs

@@ -0,0 +1,48 @@
+import { SignJWT, jwtVerify } from "jose";
+import { cookies } from "next/headers";
+import { db } from "./db.mjs";
+function key() {
+  if ((process.env.JWT_SECRET?.length || 0) < 32)
+    throw Error("JWT_SECRET must contain at least 32 characters");
+  return new TextEncoder().encode(process.env.JWT_SECRET);
+}
+export async function session() {
+  const token = (await cookies()).get("naviyra_session")?.value;
+  if (!token) return null;
+  let payload;
+  try {
+    ({ payload } = await jwtVerify(token, key(), {
+      algorithms: ["HS256"],
+      issuer: "naviyra",
+      audience: "naviyra-panel",
+    }));
+  } catch {
+    return null;
+  }
+  return (
+    (
+      await db.query("SELECT id,email,role FROM users WHERE id=$1", [
+        payload.sub,
+      ])
+    ).rows[0] || null
+  );
+}
+export async function signIn(user) {
+  const token = await new SignJWT({})
+    .setProtectedHeader({ alg: "HS256" })
+    .setSubject(user.id)
+    .setIssuer("naviyra")
+    .setAudience("naviyra-panel")
+    .setIssuedAt()
+    .setExpirationTime("8h")
+    .sign(key());
+  (await cookies()).set("naviyra_session", token, {
+    httpOnly: true,
+    sameSite: "strict",
+    secure:
+      process.env.PUBLIC_ORIGIN?.startsWith("https://") ||
+      process.env.NODE_ENV === "production",
+    path: "/",
+    maxAge: 28800,
+  });
+}