@naviyra/cloud-panel 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,1487 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { runtimeLabels } from "@naviyra/shared";
+import { CloudflareConnect, DnsScreen, EmailScreen } from "./cloudflare";
+import { DatabaseScreen } from "./databases";
+import { ThemeToggle } from "./theme";
+import {
+  PageSkeleton,
+  ProjectSkeleton,
+  SkeletonRows,
+  SkeletonStats,
+  SkeletonTable,
+} from "./skeleton";
+import {
+  Activity,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpRight,
+  Box,
+  Check,
+  ChevronRight,
+  Cloud,
+  Code2,
+  ExternalLink,
+  Folder,
+  GitBranch,
+  Globe,
+  HardDrive,
+  Layers,
+  LayoutDashboard,
+  LogOut,
+  Database,
+  Mail,
+  Menu,
+  Plus,
+  RefreshCw,
+  Rocket,
+  Search,
+  Server,
+  ShieldCheck,
+  Terminal,
+  Trash2,
+  Upload,
+  X,
+} from "lucide-react";
+
+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;
+}
+function Badge({ status }) {
+  return (
+    <span className={`badge ${status}`}>
+      <i />
+      {status === "created" ? "Not deployed" : status}
+    </span>
+  );
+}
+const bytes = (value) => `${((value || 0) / 1024 / 1024 / 1024).toFixed(1)} GB`;
+const ago = (value) => {
+  const seconds = Math.max(0, (Date.now() - new Date(value)) / 1000);
+  return seconds < 60
+    ? "Just now"
+    : seconds < 3600
+      ? `${Math.floor(seconds / 60)}m ago`
+      : seconds < 86400
+        ? `${Math.floor(seconds / 3600)}h ago`
+        : new Date(value).toLocaleDateString();
+};
+export default function Dashboard({
+  user,
+  initialView = "projects",
+  initialProject = null,
+  initialTab = "overview",
+}) {
+  const [projects, setProjects] = useState([]),
+    [system, setSystem] = useState(null),
+    [loading, setLoading] = useState(true),
+    [error, setError] = useState(""),
+    [notice, setNotice] = useState("");
+  const [cf, setCf] = useState(null);
+  const [view, setView] = useState(initialView),
+    [search, setSearch] = useState(""),
+    [filter, setFilter] = useState("all"),
+    [creating, setCreating] = useState(false),
+    [selected, setSelected] = useState(initialProject);
+  const [detail, setDetail] = useState(null),
+    [logs, setLogs] = useState(""),
+    [metrics, setMetrics] = useState(null),
+    [busy, setBusy] = useState(false),
+    [tab, setTab] = useState(initialTab);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const load = useCallback(async () => {
+    try {
+      const list = await api("projects");
+      setProjects(list);
+      setError("");
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+    try {
+      setSystem(await api("system"));
+    } catch (e) {
+      setSystem({ available: false, error: e.message });
+    }
+  }, []);
+  useEffect(() => {
+    load();
+    const timer = setInterval(load, 5000);
+    return () => clearInterval(timer);
+  }, [load]);
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (view !== "projects") params.set("view", view);
+    if (selected) params.set("project", selected);
+    if (selected && tab !== "overview") params.set("tab", tab);
+    const query = params.toString();
+    const next = query ? `/?${query}` : "/";
+    if (window.location.pathname + window.location.search !== next)
+      window.history.replaceState(null, "", next);
+  }, [view, selected, tab]);
+  useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onKey = (event) => {
+      if (event.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [menuOpen]);
+  const openView = (item) => {
+    setView(item);
+    setSelected(null);
+    setMenuOpen(false);
+  };
+  useEffect(() => {
+    let stop = false;
+    api("cloudflare/status")
+      .then((status) => {
+        if (!stop) setCf(status);
+      })
+      .catch((e) => {
+        if (!stop && e.message !== "Session expired")
+          setCf({ registered: true, unavailable: true, error: e.message });
+      });
+    return () => {
+      stop = true;
+    };
+  }, []);
+  const loadDetail = useCallback(async () => {
+    if (!selected) return;
+    try {
+      const [p, l, m] = await Promise.all([
+        api(`projects/${selected}`),
+        api(`projects/${selected}/logs`).catch((e) => ({ logs: e.message })),
+        api(`projects/${selected}/metrics`).catch(() => null),
+      ]);
+      setDetail(p);
+      setProjects((current) =>
+        current.map((project) =>
+          project.id === p.id ? { ...project, ...p } : project,
+        ),
+      );
+      setLogs(l.logs);
+      setMetrics(m);
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [selected]);
+  useEffect(() => {
+    setDetail(null);
+    loadDetail();
+    const timer = setInterval(loadDetail, 3000);
+    return () => clearInterval(timer);
+  }, [loadDetail]);
+  const running = projects.filter((p) => p.status === "running").length,
+    failed = projects.filter((p) => p.status === "failed").length;
+  const visible = projects.filter(
+    (p) =>
+      (filter === "all" || p.status === filter) &&
+      (p.name + " " + p.subdomain).includes(search.toLowerCase()),
+  );
+  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.`,
+      )
+    )
+      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.",
+        );
+      await load();
+      if (kind !== "delete") await loadDetail();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <div className="app-shell">
+      <aside className="sidebar">
+        <a href="/" className="brand">
+          <img src="/naviyra-logo.png" alt="Naviyra" className="brand-logo" />
+        </a>
+        <div className="nav-label">WORKSPACE</div>
+        <nav>
+          <button
+            className={view === "projects" ? "nav-item active" : "nav-item"}
+            onClick={() => {
+              setView("projects");
+              setSelected(null);
+            }}
+          >
+            <LayoutDashboard size={18} />
+            Projects<span>{projects.length}</span>
+          </button>
+          <button
+            className={
+              view === "infrastructure" ? "nav-item active" : "nav-item"
+            }
+            onClick={() => {
+              setView("infrastructure");
+              setSelected(null);
+            }}
+          >
+            <Server size={18} />
+            Infrastructure
+          </button>
+          <button
+            className={view === "activity" ? "nav-item active" : "nav-item"}
+            onClick={() => {
+              setView("activity");
+              setSelected(null);
+            }}
+          >
+            <Activity size={18} />
+            Activity
+          </button>
+          <button
+            className={view === "databases" ? "nav-item active" : "nav-item"}
+            onClick={() => {
+              setView("databases");
+              setSelected(null);
+            }}
+          >
+            <Database size={18} />
+            Databases
+          </button>
+          {cf?.registered && (
+            <>
+              <div className="nav-label">CLOUDFLARE</div>
+              <button
+                className={view === "dns" ? "nav-item active" : "nav-item"}
+                onClick={() => {
+                  setView("dns");
+                  setSelected(null);
+                }}
+              >
+                <Globe size={18} />
+                DNS
+              </button>
+              <button
+                className={view === "email" ? "nav-item active" : "nav-item"}
+                onClick={() => {
+                  setView("email");
+                  setSelected(null);
+                }}
+              >
+                <Mail size={18} />
+                Email routing
+              </button>
+            </>
+          )}
+        </nav>
+        <div className="sidebar-bottom">
+          <button
+            className="profile"
+            onClick={async () => {
+              await api("auth/logout", { method: "POST" });
+              window.location.href = "/login";
+            }}
+            title="Sign out"
+          >
+            <span className="avatar">{user.email[0].toUpperCase()}</span>
+            <span>
+              {user.email.split("@")[0]}
+              <small>
+                {user.role === "admin" ? "Administrator" : "Viewer"}
+              </small>
+            </span>
+            <LogOut size={16} />
+          </button>
+        </div>
+      </aside>
+      <div className="main-shell">
+        <header className="topbar">
+          <div>
+            <button
+              className="menu-button"
+              aria-label="Open menu"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen(true)}
+            >
+              <Menu size={18} />
+            </button>
+            Workspace
+            <ChevronRight size={14} />
+            <strong>
+              {selected
+                ? "Project details"
+                : {
+                    projects: "Projects",
+                    infrastructure: "Infrastructure",
+                    activity: "Activity",
+                    databases: "Databases",
+                    dns: "DNS",
+                    email: "Email routing",
+                  }[view]}
+            </strong>
+          </div>
+          <div className="topbar-right">
+            <ThemeToggle />
+            <span
+              className={`connection ${system?.available === false ? "offline" : ""}`}
+            >
+              <i />
+              {system?.available === false
+                ? "Agent offline"
+                : system
+                  ? "Agent connected"
+                  : "Connecting…"}
+            </span>
+            <span className="avatar small">{user.email[0].toUpperCase()}</span>
+          </div>
+        </header>
+        {menuOpen && (
+          <div className="drawer-root">
+            <button
+              className="drawer-backdrop"
+              aria-label="Close menu"
+              onClick={() => setMenuOpen(false)}
+            />
+            <aside className="drawer" role="dialog" aria-modal="true" aria-label="Menu">
+              <div className="drawer-head">
+                <img src="/naviyra-logo.png" alt="Naviyra" className="brand-logo" />
+                <button aria-label="Close menu" onClick={() => setMenuOpen(false)}>
+                  <X size={18} />
+                </button>
+              </div>
+              <nav>
+                {[
+                  ["projects", "Projects", LayoutDashboard],
+                  ["infrastructure", "Infrastructure", Server],
+                  ["activity", "Activity", Activity],
+                  ["databases", "Databases", Database],
+                  ...(cf?.registered
+                    ? [
+                        ["dns", "DNS", Globe],
+                        ["email", "Email routing", Mail],
+                      ]
+                    : []),
+                ].map(([item, label, Icon]) => (
+                  <button
+                    key={item}
+                    className={view === item ? "nav-item active" : "nav-item"}
+                    onClick={() => openView(item)}
+                  >
+                    <Icon size={18} />
+                    {label}
+                  </button>
+                ))}
+              </nav>
+              <button
+                className="profile"
+                onClick={async () => {
+                  await api("auth/logout", { method: "POST" });
+                  window.location.href = "/login";
+                }}
+              >
+                <span className="avatar">{user.email[0].toUpperCase()}</span>
+                <span>
+                  {user.email.split("@")[0]}
+                  <small>{user.role === "admin" ? "Administrator" : "Viewer"}</small>
+                </span>
+                <LogOut size={16} />
+              </button>
+            </aside>
+          </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" ? (
+            <CloudflareConnect
+              initial={cf}
+              canWrite={user.role === "admin"}
+              onReady={(status) => {
+                setCf(status);
+                setView("projects");
+                setSelected(null);
+                setNotice("Cloudflare account connected.");
+              }}
+            />
+          ) : selected ? (
+            <>
+              {!detail ? (
+                <ProjectSkeleton />
+              ) : (
+                <>
+                  <button className="back" onClick={() => setSelected(null)}>
+                    <ArrowLeft size={15} />
+                    All projects
+                  </button>
+                  <div className="page-heading">
+                    <div>
+                      <div className="title-row">
+                        <h1>{detail.name}</h1>
+                        <Badge status={detail.status} />
+                      </div>
+                      <p>
+                        <a
+                          href={`https://${detail.subdomain}`}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {detail.subdomain}
+                          <ExternalLink size={13} />
+                        </a>
+                        <span className="separator">/</span>
+                        {runtimeLabels[detail.type] || "Node.js"} application
+                      </p>
+                    </div>
+                    <div className="actions">
+                      <button
+                        className="secondary"
+                        onClick={() => action("restart")}
+                        disabled={
+                          busy ||
+                          detail.status !== "running" ||
+                          user.role !== "admin"
+                        }
+                      >
+                        <RefreshCw size={15} />
+                        Restart
+                      </button>
+                      <button
+                        className="primary"
+                        onClick={() => action("deploy")}
+                        disabled={
+                          busy ||
+                          ["queued", "deploying"].includes(detail.status) ||
+                          user.role !== "admin"
+                        }
+                      >
+                        <Rocket size={16} />
+                        {detail.status === "created"
+                          ? "Deploy project"
+                          : "Redeploy"}
+                      </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"
+                      value={metrics?.active ? "Online" : "Offline"}
+                      icon={Box}
+                      note={`Port ${detail.port || "not allocated"}`}
+                    />
+                    <Stat
+                      label="Cloudflare tunnel"
+                      value={metrics?.tunnel_active ? "Active" : "Inactive"}
+                      icon={Cloud}
+                      note={
+                        system?.mode === "mock"
+                          ? "Simulated connection"
+                          : "Service status"
+                      }
+                    />
+                    <Stat
+                      label="Memory usage"
+                      value={
+                        metrics?.memory_bytes != null
+                          ? `${Math.round(metrics.memory_bytes / 1048576)} MB`
+                          : "—"
+                      }
+                      icon={HardDrive}
+                      note={
+                        metrics?.metrics_available === false
+                          ? "Unavailable in native mode"
+                          : "Application service"
+                      }
+                    />
+                    <Stat
+                      label="CPU time"
+                      value={
+                        metrics?.cpu_nanoseconds != null
+                          ? `${(metrics.cpu_nanoseconds / 1e9).toFixed(1)}s`
+                          : "—"
+                      }
+                      icon={Activity}
+                      note={
+                        metrics?.metrics_available === false
+                          ? "Unavailable in native mode"
+                          : "Cumulative service CPU"
+                      }
+                    />
+                  </div>
+                  <div className="tabs">
+                    {["overview", "logs", "deployments"].map((t) => (
+                      <button
+                        key={t}
+                        className={tab === t ? "active" : ""}
+                        onClick={() => setTab(t)}
+                      >
+                        {t[0].toUpperCase() + t.slice(1)}
+                      </button>
+                    ))}
+                  </div>
+                  {tab === "overview" && (
+                    <div className="detail-grid">
+                      <section className="panel">
+                        <div className="section-heading">
+                          <h2>Project configuration</h2>
+                          <Code2 size={17} />
+                        </div>
+                        <dl>
+                          <dt>Runtime</dt>
+                          <dd>{runtimeLabels[detail.type] || "Node.js"}</dd>
+                          {metrics?.local_url && (
+                            <>
+                              <dt>Local address</dt>
+                              <dd>
+                                <a
+                                  href={metrics.local_url}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                >
+                                  {metrics.local_url}
+                                </a>
+                                <small> (on the agent host)</small>
+                              </dd>
+                            </>
+                          )}
+                          <dt>Source</dt>
+                          <dd>
+                            {detail.source_type === "git"
+                              ? detail.git_url
+                              : "ZIP archive"}
+                          </dd>
+                          <dt>Hostname</dt>
+                          <dd>{detail.subdomain}</dd>
+                          <dt>Allocated port</dt>
+                          <dd>
+                            {detail.port || "Assigned on first deployment"}
+                          </dd>
+                          <dt>Tunnel ID</dt>
+                          <dd className="mono">
+                            {detail.tunnel?.tunnel_id ||
+                              "Created on first deployment"}
+                          </dd>
+                          <dt>Created</dt>
+                          <dd>
+                            {new Date(detail.created_at).toLocaleString()}
+                          </dd>
+                        </dl>
+                        {detail.source_type === "zip" && (
+                          <label className="upload replacement">
+                            <Upload size={20} />
+                            <span>
+                              Upload source archive
+                              <small>
+                                Source files at the ZIP root · max 25 MB
+                              </small>
+                            </span>
+                            <input
+                              aria-label="Upload source archive"
+                              type="file"
+                              accept=".zip"
+                              disabled={
+                                busy ||
+                                ["queued", "deploying"].includes(
+                                  detail.status,
+                                ) ||
+                                user.role !== "admin"
+                              }
+                              onChange={async (e) => {
+                                const file = e.target.files[0];
+                                if (!file) return;
+                                setBusy(true);
+                                try {
+                                  await api(`projects/${selected}/source`, {
+                                    method: "PUT",
+                                    headers: {
+                                      "Content-Type": "application/zip",
+                                    },
+                                    body: file,
+                                  });
+                                  setNotice(
+                                    "Source uploaded. Deploy when ready.",
+                                  );
+                                  await loadDetail();
+                                } catch (e) {
+                                  setError(e.message);
+                                } finally {
+                                  setBusy(false);
+                                }
+                              }}
+                            />
+                          </label>
+                        )}
+                      </section>
+                      <section className="panel">
+                        <div className="section-heading">
+                          <h2>Deployment output</h2>
+                          <Terminal size={17} />
+                        </div>
+                        <pre className="logs compact">
+                          {logs ||
+                            "No deployment output yet. Deploy your project to get started."}
+                        </pre>
+                        <button
+                          className="text-button"
+                          onClick={() => setTab("logs")}
+                        >
+                          View full logs
+                          <ArrowRight size={14} />
+                        </button>
+                      </section>
+                    </div>
+                  )}
+                  {tab === "logs" && (
+                    <section className="panel">
+                      <div className="section-heading">
+                        <h2>Live service logs</h2>
+                        <span className="muted">Refreshes every 3 seconds</span>
+                      </div>
+                      <pre className="logs">{logs || "No logs yet."}</pre>
+                    </section>
+                  )}
+                  {tab === "deployments" && (
+                    <section className="panel">
+                      <div className="section-heading">
+                        <h2>Deployment history</h2>
+                        <span className="muted">Latest 20 deployments</span>
+                      </div>
+                      {detail.deployments.length ? (
+                        detail.deployments.map((d) => (
+                          <div className="deployment" key={d.id}>
+                            <Rocket size={18} />
+                            <div>
+                              <strong className="mono">
+                                {d.id.slice(0, 8)}
+                              </strong>
+                              <small>
+                                {d.error ||
+                                  `${d.source_type.toUpperCase()} · ${new Date(d.created_at).toLocaleString()}`}
+                              </small>
+                            </div>
+                            <Badge status={d.status} />
+                          </div>
+                        ))
+                      ) : (
+                        <div className="empty compact-empty">
+                          No deployments yet.
+                        </div>
+                      )}
+                    </section>
+                  )}
+                  <div className="danger-zone">
+                    <div>
+                      <strong>Delete project</strong>
+                      <p>
+                        Remove this project, its services, tunnel and DNS route.
+                      </p>
+                    </div>
+                    <button
+                      className="danger"
+                      disabled={
+                        busy ||
+                        ["queued", "deploying"].includes(detail.status) ||
+                        user.role !== "admin"
+                      }
+                      onClick={() => action("delete")}
+                    >
+                      <Trash2 size={15} />
+                      Delete project
+                    </button>
+                  </div>
+                </>
+              )}
+            </>
+          ) : view === "databases" ? (
+            <DatabaseScreen canWrite={user.role === "admin"} />
+          ) : view === "dns" ? (
+            <DnsScreen canWrite={user.role === "admin"} />
+          ) : view === "email" ? (
+            <EmailScreen canWrite={user.role === "admin"} />
+          ) : view === "projects" ? (
+            <>
+              <div className="page-heading">
+                <h1>
+                  Projects<span className="title-dot">.</span>
+                </h1>
+                <button
+                  className="primary"
+                  disabled={user.role !== "admin"}
+                  onClick={() => setCreating(true)}
+                >
+                  <Plus size={17} />
+                  New project
+                </button>
+              </div>
+              <div className="stats">
+                <Stat
+                  label="Total projects"
+                  value={projects.length.toString().padStart(2, "0")}
+                  icon={Layers}
+                  note="Across your workspace"
+                />
+                <Stat
+                  label="Running applications"
+                  value={running.toString().padStart(2, "0")}
+                  icon={Activity}
+                  note={
+                    running
+                      ? "Services are running"
+                      : "Ready for your first deploy"
+                  }
+                  accent
+                />
+                <Stat
+                  label="Active tunnels"
+                  value={running.toString().padStart(2, "0")}
+                  icon={Cloud}
+                  note={
+                    system?.mode === "mock"
+                      ? "Simulated in local mode"
+                      : "Last reported deployment state"
+                  }
+                />
+                <Stat
+                  label="Needs attention"
+                  value={failed.toString().padStart(2, "0")}
+                  icon={ShieldCheck}
+                  note={
+                    failed ? "Review deployment logs" : "No failed deployments"
+                  }
+                  warning={failed > 0}
+                />
+              </div>
+              <section className="panel projects-panel">
+                <div className="section-heading">
+                  <div className="title-row">
+                    <h2>Your projects</h2>
+                    <span className="count">{projects.length}</span>
+                  </div>
+                  <button
+                    className="icon-button"
+                    title="Refresh projects"
+                    onClick={load}
+                  >
+                    <RefreshCw size={16} />
+                  </button>
+                </div>
+                <div className="toolbar">
+                  <div className="search">
+                    <Search size={16} />
+                    <input
+                      aria-label="Search projects"
+                      placeholder="Search by name or domain…"
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                    />
+                  </div>
+                  <select
+                    aria-label="Filter by status"
+                    value={filter}
+                    onChange={(e) => setFilter(e.target.value)}
+                  >
+                    <option value="all">All statuses</option>
+                    <option value="running">Running</option>
+                    <option value="deploying">Deploying</option>
+                    <option value="queued">Queued</option>
+                    <option value="created">Not deployed</option>
+                    <option value="failed">Failed</option>
+                  </select>
+                  <span className="toolbar-count">
+                    {visible.length} project{visible.length !== 1 ? "s" : ""}
+                  </span>
+                </div>
+                {loading && !projects.length ? (
+                  <SkeletonTable
+                    label="Loading projects"
+                    columns={["Project", "Status", "Domain", "Port", "Updated", ""]}
+                  />
+                ) : visible.length ? (
+                  <div className="table-wrap">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>PROJECT</th>
+                          <th>STATUS</th>
+                          <th>DOMAIN</th>
+                          <th>PORT</th>
+                          <th>UPDATED</th>
+                          <th />
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {visible.map((p) => (
+                          <tr key={p.id} onClick={() => open(p.id)}>
+                            <td>
+                              <div className="project-name">
+                                <span className="project-icon">
+                                  <Code2 size={19} />
+                                </span>
+                                <div>
+                                  <button
+                                    className="name-button"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      open(p.id);
+                                    }}
+                                  >
+                                    {p.name}
+                                  </button>
+                                  <small>
+                                    <GitBranch size={11} />
+                                    {p.source_type === "git"
+                                      ? "Git repository"
+                                      : "ZIP archive"}
+                                    <span>·</span>
+                                    {runtimeLabels[p.type] || "Node.js"}
+                                  </small>
+                                </div>
+                              </div>
+                            </td>
+                            <td>
+                              <Badge status={p.status} />
+                              {p.agent_error && (
+                                <small className="unreachable">
+                                  Agent unreachable
+                                </small>
+                              )}
+                            </td>
+                            <td>
+                              <a
+                                className="domain"
+                                href={`https://${p.subdomain}`}
+                                target="_blank"
+                                rel="noreferrer"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                {p.subdomain}
+                                <ArrowUpRight size={13} />
+                              </a>
+                            </td>
+                            <td className="mono muted">{p.port || "—"}</td>
+                            <td className="muted">{ago(p.updated_at)}</td>
+                            <td>
+                              <ChevronRight size={16} className="muted" />
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : (
+                  <div className="empty">
+                    <div className="empty-icon">
+                      <Folder size={30} />
+                    </div>
+                    <h3>
+                      {projects.length
+                        ? "No matching projects"
+                        : "Your next idea starts here"}
+                    </h3>
+                    <p>
+                      {projects.length
+                        ? "Try another search or status filter."
+                        : "Connect a repository or upload your source to deploy your first application."}
+                    </p>
+                    {!projects.length && (
+                      <button
+                        className="primary"
+                        disabled={user.role !== "admin"}
+                        onClick={() => setCreating(true)}
+                      >
+                        <Plus size={16} />
+                        Create your first project
+                      </button>
+                    )}
+                  </div>
+                )}
+                <div className="table-footer">
+                  <span>
+                    <ShieldCheck size={13} /> Applications are published through
+                    Cloudflare Tunnel
+                  </span>
+                  <span>Multiple native runtimes</span>
+                </div>
+              </section>
+              <div className="bottom-grid">
+                <section className="panel server-card">
+                  <div className="section-heading">
+                    <h2>
+                      <Server size={17} />
+                      Host overview
+                    </h2>
+                    <span className="tiny-label">PRIMARY AGENT</span>
+                  </div>
+                  <div className="host-details">
+                    <div>
+                      <span className="server-avatar">
+                        <Server size={24} />
+                      </span>
+                      <div>
+                        <strong>
+                          {system?.hostname || "Waiting for agent"}
+                        </strong>
+                        <small>
+                          {system?.mode === "mock"
+                            ? "Local development host"
+                            : "Deployment host"}
+                        </small>
+                      </div>
+                    </div>
+                    <Badge
+                      status={
+                        system?.available === false
+                          ? "failed"
+                          : system
+                            ? "running"
+                            : "queued"
+                      }
+                    />
+                  </div>
+                  <div className="memory-line">
+                    <span>Host memory</span>
+                    <strong>
+                      {system?.memory_total
+                        ? `${bytes(system.memory_used)} / ${bytes(system.memory_total)}`
+                        : "Unavailable"}
+                    </strong>
+                  </div>
+                  <div className="progress">
+                    <i
+                      style={{
+                        width: system?.memory_total
+                          ? `${(100 * system.memory_used) / system.memory_total}%`
+                          : "0%",
+                      }}
+                    />
+                  </div>
+                  <button
+                    className="text-button"
+                    onClick={() => setView("infrastructure")}
+                  >
+                    View infrastructure
+                    <ArrowRight size={14} />
+                  </button>
+                </section>
+                <section className="quick-start">
+                  <div className="quick-art">
+                    <Cloud size={44} strokeWidth={1.3} />
+                    <span>
+                      <Check size={14} />
+                    </span>
+                  </div>
+                  <div>
+                    <span className="eyebrow">FROM CODE TO CLOUD</span>
+                    <h2>Less setup. More shipping.</h2>
+                    <p>
+                      One project. One port. One secure tunnel.
+                      <br />
+                      Your deployment workflow, taken care of.
+                    </p>
+                    <button
+                      className="text-button"
+                      onClick={() => setCreating(true)}
+                      disabled={user.role !== "admin"}
+                    >
+                      Deploy an application
+                      <ArrowRight size={14} />
+                    </button>
+                  </div>
+                </section>
+              </div>
+            </>
+          ) : view === "infrastructure" ? (
+            <>
+              <div className="page-heading">
+                <h1>
+                  Infrastructure<span className="title-dot">.</span>
+                </h1>
+              </div>
+              {!system ? (
+                <>
+                  <SkeletonStats label="Loading infrastructure" />
+                  <section className="panel">
+                    <SkeletonRows rows={4} label="Loading infrastructure" />
+                  </section>
+                </>
+              ) : (
+                <>
+              <div className="stats">
+                <Stat
+                  label="Hostname"
+                  value={system?.hostname || "Offline"}
+                  icon={Server}
+                  note="Primary agent"
+                />
+                <Stat
+                  label="Host memory"
+                  value={bytes(system?.memory_used)}
+                  icon={HardDrive}
+                  note={`Of ${bytes(system?.memory_total)} total`}
+                />
+                <Stat
+                  label="Load average"
+                  value={system?.load?.[0]?.toFixed(2) || "0.00"}
+                  icon={Activity}
+                  note="1 minute · unavailable on Windows"
+                />
+                <Stat
+                  label="Host uptime"
+                  value={system ? `${Math.floor(system.uptime / 3600)}h` : "—"}
+                  icon={RefreshCw}
+                  note="Since last host boot"
+                />
+              </div>
+              <section className="panel">
+                <div className="section-heading">
+                  <h2>Agent connection</h2>
+                  <Cloud size={18} />
+                </div>
+                <dl>
+                  <dt>Mode</dt>
+                  <dd>{system?.mode || "Unavailable"}</dd>
+                  <dt>Connection</dt>
+                  <dd>
+                    {system?.available === false
+                      ? system.error
+                      : "Authenticated server-to-server connection"}
+                  </dd>
+                  <dt>Agent projects</dt>
+                  <dd>{system?.projects ?? "—"}</dd>
+                  <dt>Public access</dt>
+                  <dd>Cloudflare Tunnel · HTTPS</dd>
+                </dl>
+              </section>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <div className="page-heading">
+                <h1>
+                  Project activity<span className="title-dot">.</span>
+                </h1>
+              </div>
+              <section className="panel">
+                {loading && !projects.length ? (
+                  <SkeletonRows label="Loading activity" />
+                ) : projects.length ? (
+                  projects.map((p) => (
+                    <button
+                      className="activity-row"
+                      key={p.id}
+                      onClick={() => open(p.id)}
+                    >
+                      <span className="project-icon">
+                        <Rocket size={18} />
+                      </span>
+                      <div>
+                        <strong>{p.name}</strong>
+                        <small>{p.subdomain}</small>
+                      </div>
+                      <Badge status={p.status} />
+                      <span className="muted">{ago(p.created_at)}</span>
+                      <ChevronRight size={16} />
+                    </button>
+                  ))
+                ) : (
+                  <div className="empty">
+                    <Activity size={30} />
+                    <h3>A fresh workspace</h3>
+                    <p>Your project activity will appear here.</p>
+                  </div>
+                )}
+              </section>
+            </>
+          )}
+          <footer>
+            <span>
+              Naviyra Panel <span className="footer-dot">·</span> Built for your
+              infrastructure
+            </span>
+            <span>
+              <span className="green-dot" />
+              Cloudflare-powered hosting
+            </span>
+          </footer>
+        </main>
+      </div>
+      {creating && (
+        <CreateProject
+          onClose={() => setCreating(false)}
+          onCreated={async (id) => {
+            setCreating(false);
+            await load();
+            open(id);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+function Stat({ label, value, icon: Icon, note, accent, warning }) {
+  return (
+    <section
+      className={`stat ${accent ? "accent" : ""} ${warning ? "warning" : ""}`}
+    >
+      <div>
+        <span>{label}</span>
+        <Icon size={17} />
+      </div>
+      <strong>{value}</strong>
+      <small>
+        {accent && <i className="green-dot" />}
+        {note}
+      </small>
+    </section>
+  );
+}
+function CreateProject({ onClose, onCreated }) {
+  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);
+  useEffect(() => {
+    const previous = document.activeElement;
+    document.getElementById("project-name")?.focus();
+    const listener = (e) => {
+      if (e.key === "Escape" && !busy) onClose();
+      if (e.key === "Tab") {
+        const items = [
+          ...document.querySelectorAll(
+            ".modal button:not(:disabled), .modal input:not(:disabled), .modal select:not(:disabled)",
+          ),
+        ];
+        const first = items[0],
+          last = items.at(-1);
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => {
+      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");
+      let id = createdId;
+      if (!id) {
+        const project = await api("projects", {
+          method: "POST",
+          body: JSON.stringify({
+            ...values,
+            source_type: source,
+            type: runtimeType,
+            runtime_config: {
+              python_server: values.python_server || "asgi",
+              entrypoint: values.entrypoint || "app:app",
+              public_dir: values.public_dir || ".",
+              executable: values.executable || "",
+              args: values.custom_args ? JSON.parse(values.custom_args) : [],
+            },
+          }),
+        });
+        id = project.id;
+        setCreatedId(id);
+      }
+      if (source === "zip")
+        await api(`projects/${id}/source`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/zip" },
+          body: file,
+        });
+      await onCreated(id);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <div
+      className="modal-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget && !busy) onClose();
+      }}
+    >
+      <section
+        className="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="create-title"
+      >
+        <div className="modal-heading">
+          <span className="project-icon">
+            <Box size={22} />
+          </span>
+          <button
+            className="icon-button"
+            aria-label="Close dialog"
+            disabled={busy}
+            onClick={onClose}
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <h2 id="create-title">A new home for your code.</h2>
+        <p className="muted">Add your application. Deploy when you’re ready.</p>
+        <form onSubmit={submit}>
+          <fieldset disabled={busy || !!createdId}>
+            <label>
+              Project name
+              <input
+                id="project-name"
+                name="name"
+                placeholder="my-awesome-app"
+                pattern="[a-z][a-z0-9-]+"
+                minLength={2}
+                maxLength={48}
+                required
+              />
+              <small>Lowercase letters, numbers and hyphens.</small>
+            </label>
+            <label>
+              Public hostname
+              <div className="input-icon">
+                <Globe size={16} />
+                <input
+                  name="subdomain"
+                  placeholder="app.example.com"
+                  required
+                />
+              </div>
+              <small>Use a domain in your Cloudflare account.</small>
+            </label>
+            <label>
+              Application runtime
+              <select
+                className="runtime-select"
+                name="type"
+                aria-label="Application runtime"
+                value={runtimeType}
+                onChange={(e) => setRuntimeType(e.target.value)}
+              >
+                {Object.entries(runtimeLabels).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+              <small>
+                Native deployment on Windows and Linux. Install the selected
+                runtime on your host.
+              </small>
+            </label>
+            {runtimeType === "python" && (
+              <>
+                <label>
+                  Python server
+                  <select className="runtime-select" name="python_server">
+                    <option value="asgi">
+                      ASGI · FastAPI / Starlette (Uvicorn)
+                    </option>
+                    <option value="wsgi">
+                      WSGI · Flask / Django (Waitress)
+                    </option>
+                  </select>
+                </label>
+                <label>
+                  Application entry point
+                  <input name="entrypoint" defaultValue="app:app" required />
+                  <small>
+                    Module:object, e.g. app:app or mysite.wsgi:application
+                  </small>
+                </label>
+              </>
+            )}
+            {["php", "static"].includes(runtimeType) && (
+              <label>
+                Public directory
+                <input name="public_dir" defaultValue="." required />
+                <small>
+                  {runtimeType === "php"
+                    ? "Use public for frameworks. Host requires PHP-CGI and Caddy."
+                    : "Use dist for a built frontend, or . for plain HTML. A package.json build script runs automatically."}
+                </small>
+              </label>
+            )}
+            {runtimeType === "go" && (
+              <p className="muted">
+                The agent runs go build in the source root. Your server must
+                read PORT and bind to 127.0.0.1.
+              </p>
+            )}
+            {runtimeType === "custom" && (
+              <>
+                <label>
+                  Executable alias
+                  <input name="executable" placeholder="dotnet" required />
+                  <small>
+                    Must be registered by the host owner in NATIVE_EXECUTABLES.
+                  </small>
+                </label>
+                <label>
+                  Arguments (JSON array)
+                  <input
+                    name="custom_args"
+                    defaultValue={
+                      '["MyApp.dll", "--urls", "http://127.0.0.1:{PORT}"]'
+                    }
+                    required
+                  />
+                  <small>
+                    Use prebuilt apps. No shell syntax; each array item is one
+                    argument.
+                  </small>
+                </label>
+              </>
+            )}
+            <label>Source</label>
+            <div className="source-options">
+              <button
+                type="button"
+                className={source === "git" ? "selected" : ""}
+                onClick={() => setSource("git")}
+              >
+                <GitBranch size={17} />
+                Git repository
+              </button>
+              <button
+                type="button"
+                className={source === "zip" ? "selected" : ""}
+                onClick={() => setSource("zip")}
+              >
+                <Upload size={17} />
+                ZIP upload
+              </button>
+            </div>
+            {source === "git" && (
+              <label>
+                Repository URL
+                <input
+                  name="git_url"
+                  type="url"
+                  placeholder="https://github.com/you/your-app"
+                  required
+                />
+                <small>Public GitHub, GitLab, or Bitbucket repositories.</small>
+              </label>
+            )}
+          </fieldset>
+          {source === "zip" && (
+            <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>
+              <input
+                aria-label="Choose ZIP archive"
+                type="file"
+                accept=".zip"
+                onChange={(e) => setFile(e.target.files[0])}
+                disabled={busy}
+              />
+            </label>
+          )}
+          <div className="info">
+            <ShieldCheck size={17} />
+            <p>
+              A port and Cloudflare tunnel will be assigned automatically on
+              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"
+              className="secondary"
+              disabled={busy}
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button className="primary" disabled={busy}>
+              {busy
+                ? "Creating project…"
+                : createdId
+                  ? "Retry upload"
+                  : "Create project"}
+              <ArrowRight size={16} />
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}