@meshxdata/fops 0.1.55 → 0.1.58

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Fleet.jsx

@@ -1,307 +0,0 @@
-import React, { useState, useCallback } from "react";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import LogPanel from "../components/LogPanel";
-import { useFleet, useSyncResources, useFeatureFlags, useSetFeatureFlags, useDeploy, useGrantAdmin } from "../api/queries";
-import { useAuthContext } from "../utils/AuthContext";
-
-const SVC_LABELS = { be: "Backend", fe: "Frontend", pr: "Processor", wa: "Watcher", sc: "Scheduler", se: "Storage" };
-
-function Fleet() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [syncLogs, setSyncLogs] = useState([]);
-  const [actionLogs, setActionLogs] = useState([]);
-  const [flagsVm, setFlagsVm] = useState(null);
-  const [grantVm, setGrantVm] = useState(null);
-  const [grantEmail, setGrantEmail] = useState("");
-  const { data, isLoading } = useFleet();
-  const sync = useSyncResources();
-  const deploy = useDeploy();
-  const grantAdmin = useGrantAdmin();
-  const setFlags = useSetFeatureFlags();
-  const { data: flagsData, isLoading: flagsLoading } = useFeatureFlags(flagsVm);
-  const [pendingFlags, setPendingFlags] = useState({});
-  const { canWrite, canDeploy } = useAuthContext();
-  const onSyncLine = useCallback((text, type) => setSyncLogs((p) => [...p, { text, type }]), []);
-  const onActionLine = useCallback((text, type) => setActionLogs((p) => [...p, { text, type }]), []);
-
-  const fleetVms = [];
-  const fleetClusters = [];
-  if (data) {
-    for (const [provider, fleet] of Object.entries(data)) {
-      for (const [name, vm] of Object.entries(fleet?.vms || {})) {
-        fleetVms.push({ name, provider, ...vm });
-      }
-      for (const [name, cluster] of Object.entries(fleet?.clusters || {})) {
-        fleetClusters.push({ name, provider, ...cluster });
-      }
-    }
-  }
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main className="grow">
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            <div className="sm:flex sm:justify-between sm:items-center mb-8">
-              <div className="mb-4 sm:mb-0">
-                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Fleet</h1>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Foundation stack status across Sandbox and Distributed foundations</p>
-              </div>
-              {canWrite && (
-                <button className="btn bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-gray-400 dark:text-gray-500" onClick={() => { setSyncLogs([]); sync.mutate({ onLine: onSyncLine }); }} disabled={sync.isPending}>
-                  <svg className={`fill-current shrink-0 ${sync.isPending ? "animate-spin" : ""}`} width="16" height="16" viewBox="0 0 16 16"><path d="M14.15 4.92A7.05 7.05 0 0 0 8.5 1a7 7 0 1 0 6.58 9.39 1 1 0 1 0-1.88-.68A5 5 0 1 1 8.5 3a5.07 5.07 0 0 1 4.04 2.04L11 5.5V9h3.5L13 7.5l1.15-2.58Z" /></svg>
-                  <span>Sync Fleet</span>
-                </button>
-              )}
-            </div>
-
-            {isLoading ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">Loading fleet data...</div>
-            ) : (fleetVms.length === 0 && fleetClusters.length === 0) ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">No fleet data available. Run a sync to discover resources.</div>
-            ) : (
-              <div className="grid grid-cols-12 gap-6">
-                {/* VMs table */}
-                {fleetVms.length > 0 && (
-                  <div className="col-span-full bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Sandbox Foundations</h2>
-                    </header>
-                    <div className="overflow-x-auto">
-                      <table className="table-auto w-full dark:text-gray-300">
-                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                          <tr>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Name</th>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Location</th>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Branch</th>
-                            <th className="px-5 py-3 font-semibold text-center whitespace-nowrap">Running</th>
-                            {Object.keys(SVC_LABELS).map((k) => (
-                              <th key={k} className="px-3 py-3 font-semibold text-center whitespace-nowrap">{SVC_LABELS[k]}</th>
-                            ))}
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Status</th>
-                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">Actions</th>
-                          </tr>
-                        </thead>
-                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                          {fleetVms.map((vm) => (
-                            <tr key={`${vm.provider}-${vm.name}`}>
-                              <td className="px-5 py-3 whitespace-nowrap">
-                                <div className="font-medium text-gray-800 dark:text-gray-100">{vm.name}</div>
-                                {vm.publicUrl && <div className="text-xs text-gray-400 dark:text-gray-500 font-mono">{vm.publicUrl}</div>}
-                              </td>
-                              <td className="px-5 py-3 whitespace-nowrap">{vm.location || "—"}</td>
-                              <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">
-                                {vm.branch || "—"}
-                                {vm.sha && <span className="text-gray-400 dark:text-gray-500 ml-1">({vm.sha})</span>}
-                              </td>
-                              <td className="px-5 py-3 whitespace-nowrap text-center">
-                                {vm.running != null ? (
-                                  <>
-                                    <span className="text-green-500 font-medium">{vm.running}</span>
-                                    <span className="text-gray-400"> / {vm.total || ((vm.running || 0) + (vm.exited || 0))}</span>
-                                  </>
-                                ) : "—"}
-                              </td>
-                              {Object.keys(SVC_LABELS).map((k) => {
-                                const svc = vm.services?.[k];
-                                // Support both old string format and new {tag, sha} format
-                                const tag = typeof svc === "object" ? svc?.tag : null;
-                                const sha = typeof svc === "object" ? svc?.sha : (typeof svc === "string" ? svc : null);
-                                return (
-                                <td key={k} className="px-3 py-3 whitespace-nowrap text-center font-mono text-xs">
-                                  {(tag || sha) ? (
-                                    <div>
-                                      {tag && <div className="text-gray-700 dark:text-gray-300">{tag}</div>}
-                                      {sha && <div className="text-gray-400 dark:text-gray-500 text-[10px]">{sha}</div>}
-                                    </div>
-                                  ) : (
-                                    <span className="text-gray-300 dark:text-gray-600">—</span>
-                                  )}
-                                </td>
-                                );
-                              })}
-                              <td className="px-5 py-3 whitespace-nowrap">
-                                <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${vm.status === "up" ? "bg-green-500/20 text-green-700 dark:text-green-400" : "bg-gray-200 dark:bg-gray-700 text-gray-500"}`}>
-                                  {vm.status || "unknown"}
-                                </span>
-                              </td>
-                              <td className="px-5 py-3 whitespace-nowrap text-right">
-                                <div className="flex items-center justify-end gap-1">
-                                  {canDeploy && <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setActionLogs([]); deploy.mutate({ vmName: vm.name, onLine: onActionLine }); }} disabled={deploy.isPending}>Deploy</button>}
-                                  {canWrite && <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-amber-600 dark:text-amber-400 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setGrantVm(vm.name); setGrantEmail(""); }}>Grant Admin</button>}
-                                  {canWrite && <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-violet-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setFlagsVm(vm.name); setPendingFlags({}); }}>Flags</button>}
-                                </div>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                )}
-
-                {/* AKS Clusters table */}
-                {fleetClusters.length > 0 && (
-                  <div className="col-span-full bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Distributed Foundations</h2>
-                    </header>
-                    <div className="overflow-x-auto">
-                      <table className="table-auto w-full dark:text-gray-300">
-                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                          <tr>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Cluster</th>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Location</th>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">K8s</th>
-                            <th className="px-5 py-3 font-semibold text-center whitespace-nowrap">Nodes</th>
-                            {Object.keys(SVC_LABELS).map((k) => (
-                              <th key={k} className="px-3 py-3 font-semibold text-center whitespace-nowrap">{SVC_LABELS[k]}</th>
-                            ))}
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Flux</th>
-                            <th className="px-5 py-3 font-semibold text-left whitespace-nowrap">Status</th>
-                          </tr>
-                        </thead>
-                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                          {fleetClusters.map((c) => (
-                            <tr key={`${c.provider}-${c.name}`}>
-                              <td className="px-5 py-3 whitespace-nowrap">
-                                <div className="flex items-center gap-2">
-                                  <span className="font-medium text-gray-800 dark:text-gray-100">{c.name}</span>
-                                  {c.active && <span className="text-xs font-medium px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-600 dark:text-violet-400">active</span>}
-                                </div>
-                              </td>
-                              <td className="px-5 py-3 whitespace-nowrap">{c.location || "—"}</td>
-                              <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{c.kubernetesVersion || "—"}</td>
-                              <td className="px-5 py-3 whitespace-nowrap text-center">{c.nodes ?? "—"}</td>
-                              {Object.keys(SVC_LABELS).map((k) => {
-                                const svc = c.services?.[k];
-                                const tag = typeof svc === "object" ? svc?.tag : (typeof svc === "string" ? svc : null);
-                                return (
-                                <td key={k} className="px-3 py-3 whitespace-nowrap text-center font-mono text-xs">
-                                  {tag ? (
-                                    <span className="inline-flex px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">{tag}</span>
-                                  ) : (
-                                    <span className="text-gray-300 dark:text-gray-600">—</span>
-                                  )}
-                                </td>
-                                );
-                              })}
-                              <td className="px-5 py-3 whitespace-nowrap text-xs">
-                                {c.flux ? (
-                                  <span className="text-violet-500">{c.flux.owner}/{c.flux.repo}</span>
-                                ) : (
-                                  <span className="text-gray-300 dark:text-gray-600">—</span>
-                                )}
-                              </td>
-                              <td className="px-5 py-3 whitespace-nowrap">
-                                <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${c.status === "Running" ? "bg-green-500/20 text-green-700 dark:text-green-400" : "bg-gray-200 dark:bg-gray-700 text-gray-500"}`}>
-                                  {c.status || "unknown"}
-                                </span>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            <LogPanel lines={syncLogs} title="Sync Output" />
-            <LogPanel lines={actionLogs} title="Action Output" />
-
-            {/* Feature Flags modal */}
-            {flagsVm && (
-              <div className="fixed inset-0 bg-gray-900/70 z-50 flex items-center justify-center p-4">
-                <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-lg w-full p-6">
-                  <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Feature Flags</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-5">{flagsVm}</p>
-                  {flagsLoading ? (
-                    <p className="text-sm text-gray-400 py-4 text-center">Loading flags...</p>
-                  ) : (
-                    <div className="space-y-2 max-h-80 overflow-y-auto">
-                      {(flagsData?.flags || []).map((flag) => {
-                        const current = pendingFlags[flag.name] ?? flag.value;
-                        return (
-                          <label key={flag.name} className="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer">
-                            <div>
-                              <div className="text-sm font-medium text-gray-800 dark:text-gray-100">{flag.label}</div>
-                              {flag.services.length > 0 && <div className="text-xs text-gray-400 dark:text-gray-500">{flag.services.join(", ")}</div>}
-                            </div>
-                            <input
-                              type="checkbox"
-                              className="form-checkbox"
-                              checked={current}
-                              onChange={(e) => setPendingFlags((p) => ({ ...p, [flag.name]: e.target.checked }))}
-                            />
-                          </label>
-                        );
-                      })}
-                    </div>
-                  )}
-                  <div className="flex justify-end gap-2 mt-5 pt-4 border-t border-gray-200 dark:border-gray-700/60">
-                    <button className="btn border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600" onClick={() => setFlagsVm(null)}>Cancel</button>
-                    <button
-                      className="btn bg-violet-500 text-white hover:bg-violet-600"
-                      disabled={setFlags.isPending || Object.keys(pendingFlags).length === 0}
-                      onClick={() => {
-                        setActionLogs([]);
-                        setFlags.mutate({ vmName: flagsVm, flags: pendingFlags, onLine: onActionLine }, {
-                          onSuccess: () => { setFlagsVm(null); setPendingFlags({}); },
-                        });
-                      }}
-                    >
-                      {setFlags.isPending ? "Applying..." : "Apply"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-            {/* Grant Admin modal */}
-            {grantVm && (
-              <div className="fixed inset-0 bg-gray-900/70 z-50 flex items-center justify-center p-4">
-                <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
-                  <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Grant Admin</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-5">{grantVm}</p>
-                  <div className="mb-4">
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email (optional)</label>
-                    <input
-                      type="email"
-                      className="form-input w-full"
-                      placeholder="Leave empty to grant all users"
-                      value={grantEmail}
-                      onChange={(e) => setGrantEmail(e.target.value)}
-                    />
-                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">Leave empty to grant Foundation Admin to all non-system users</p>
-                  </div>
-                  <div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700/60">
-                    <button className="btn border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600" onClick={() => setGrantVm(null)}>Cancel</button>
-                    <button
-                      className="btn bg-amber-500 text-white hover:bg-amber-600"
-                      disabled={grantAdmin.isPending}
-                      onClick={() => {
-                        setActionLogs([]);
-                        grantAdmin.mutate(
-                          { vmName: grantVm, username: grantEmail || undefined, onLine: onActionLine },
-                          { onSuccess: () => setGrantVm(null) },
-                        );
-                      }}
-                    >
-                      {grantAdmin.isPending ? "Granting..." : "Grant"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export default Fleet;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Resources.jsx

@@ -1,229 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import LogPanel from "../components/LogPanel";
-import { useResources, useResourceAction, useDeleteResource } from "../api/queries";
-import { useAuthContext } from "../utils/AuthContext";
-
-function Resources() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [actionLogs, setActionLogs] = useState([]);
-  const navigate = useNavigate();
-  const { data, isLoading } = useResources();
-  const action = useResourceAction();
-  const deleteRes = useDeleteResource();
-  const [deleteTarget, setDeleteTarget] = useState(null);
-  const { canWrite } = useAuthContext();
-  const onActionLine = useCallback((text, type) => setActionLogs((p) => [...p, { text, type }]), []);
-
-  const vms = data?.vms || [];
-  const clusters = data?.clusters || [];
-
-  const thClass = "px-5 py-3 font-semibold text-left whitespace-nowrap";
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main className="grow">
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            {/* Page header */}
-            <div className="sm:flex sm:justify-between sm:items-center mb-8">
-              <div className="mb-4 sm:mb-0">
-                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Registry</h1>
-              </div>
-              {canWrite && (
-                <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
-                  <button className="btn bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white" onClick={() => navigate("/resources/new")}>
-                    <span>New Resource</span>
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {isLoading ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">Loading resources...</div>
-            ) : (
-              <div className="space-y-6">
-                {/* Virtual Machines */}
-                <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                  <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                    <h2 className="font-semibold text-gray-800 dark:text-gray-100">Virtual Machines <span className="text-gray-400 dark:text-gray-500 font-normal text-sm ml-1">({vms.length})</span></h2>
-                  </header>
-                  <div className="overflow-x-auto">
-                    <table className="table-auto w-full dark:text-gray-300">
-                      <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                        <tr>
-                          <th className={thClass}>Name</th>
-                          <th className={thClass}>Location</th>
-                          <th className={thClass}>Resource Group</th>
-                          <th className={thClass}>IP</th>
-                          <th className={thClass}>Status</th>
-                          <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                        {vms.length === 0 ? (
-                          <tr><td colSpan="6" className="px-5 py-8 text-center text-gray-400 dark:text-gray-500">No VMs found</td></tr>
-                        ) : vms.map((vm) => (
-                          <tr key={vm.name}>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <div className="font-medium text-gray-800 dark:text-gray-100">{vm.name}</div>
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap">{vm.location || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{vm.resourceGroup || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{vm.publicIp || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${vm.publicIp ? "bg-green-500/20 text-green-700 dark:text-green-400" : "bg-red-500/20 text-red-700 dark:text-red-400"}`}>
-                                {vm.publicIp ? "running" : "stopped"}
-                              </span>
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-right">
-                              <div className="flex items-center justify-end gap-1">
-                                {vm.publicUrl && (
-                                  <a href={vm.publicUrl} target="_blank" rel="noreferrer" className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-violet-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600">Open</a>
-                                )}
-                                {canWrite && (
-                                  <>
-                                    <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setActionLogs([]); action.mutate({ type: "vm", name: vm.name, action: "start", onLine: onActionLine }); }} disabled={action.isPending}>Start</button>
-                                    <button className="btn-xs bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-500 rounded-lg shadow-xs hover:border-gray-300 dark:hover:border-gray-600" onClick={() => { setActionLogs([]); action.mutate({ type: "vm", name: vm.name, action: "stop", onLine: onActionLine }); }} disabled={action.isPending}>Stop</button>
-                                    <button className="btn-xs bg-red-500/10 border-transparent text-red-500 rounded-lg shadow-xs hover:bg-red-500/20" onClick={() => setDeleteTarget({ type: "vm", name: vm.name })}>Delete</button>
-                                  </>
-                                )}
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-
-                {/* AKS Clusters */}
-                <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                  <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                    <h2 className="font-semibold text-gray-800 dark:text-gray-100">AKS Clusters <span className="text-gray-400 dark:text-gray-500 font-normal text-sm ml-1">({clusters.length})</span></h2>
-                  </header>
-                  <div className="overflow-x-auto">
-                    <table className="table-auto w-full dark:text-gray-300">
-                      <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                        <tr>
-                          <th className={thClass}>Name</th>
-                          <th className={thClass}>Location</th>
-                          <th className={thClass}>K8s</th>
-                          <th className={thClass}>HA Pairing</th>
-                          <th className={thClass}>Storage</th>
-                          <th className={thClass}>Key Vault</th>
-                          <th className={thClass}>Postgres</th>
-                          <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                        {clusters.length === 0 ? (
-                          <tr><td colSpan="8" className="px-5 py-8 text-center text-gray-400 dark:text-gray-500">No clusters found</td></tr>
-                        ) : clusters.map((c) => {
-                          const standbyName = c.ha?.standbyCluster;
-                          const primaryName = c.isStandby ? c.primaryCluster : null;
-                          return (
-                          <tr key={c.name}>
-                            <td className="px-5 py-3 whitespace-nowrap">
-                              <div className="flex items-center gap-2">
-                                <span className="font-medium text-gray-800 dark:text-gray-100">{c.name}</span>
-                                {c.active && <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-600 dark:text-violet-400">active</span>}
-                                {c.isStandby && <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-yellow-500/20 text-yellow-600 dark:text-yellow-400">standby</span>}
-                              </div>
-                              {c.domain && <div className="text-xs text-gray-400 dark:text-gray-500">{c.domain}</div>}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap">{c.location || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap font-mono text-xs">{c.kubernetesVersion || "—"}</td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {standbyName ? (
-                                <div>
-                                  <span className="text-green-600 dark:text-green-400">HA enabled</span>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">standby: {standbyName}</div>
-                                  {c.ha?.standbyRegion && <div className="text-gray-400 dark:text-gray-500">{c.ha.standbyRegion}</div>}
-                                </div>
-                              ) : primaryName ? (
-                                <div>
-                                  <span className="text-yellow-600 dark:text-yellow-400">Standby of</span>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">{primaryName}</div>
-                                </div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.storageHA ? (
-                                <div>
-                                  <div className="font-mono">{c.storageHA.sourceAccount}</div>
-                                  {c.storageHA.destAccount && (
-                                    <div className="text-gray-400 dark:text-gray-500 mt-0.5">replica: {c.storageHA.destAccount} ({c.storageHA.destRegion})</div>
-                                  )}
-                                </div>
-                              ) : c.storageAccount ? (
-                                <div className="font-mono">{c.storageAccount}</div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.vault ? (
-                                <div>
-                                  <div className="font-mono">{c.vault.keyVaultName}</div>
-                                  <div className="text-gray-400 dark:text-gray-500 mt-0.5">
-                                    {c.vault.autoUnseal ? "auto-unseal" : "manual"} · {c.vault.initialized ? "initialized" : "pending"}
-                                  </div>
-                                </div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-xs">
-                              {c.postgres ? (
-                                <div className="font-mono">{c.postgres.serverName}</div>
-                              ) : (
-                                <span className="text-gray-400 dark:text-gray-500">—</span>
-                              )}
-                            </td>
-                            <td className="px-5 py-3 whitespace-nowrap text-right">
-                              {canWrite && <button className="btn-xs bg-red-500/10 border-transparent text-red-500 rounded-lg shadow-xs hover:bg-red-500/20" onClick={() => setDeleteTarget({ type: "cluster", name: c.name })}>Delete</button>}
-                            </td>
-                          </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <LogPanel lines={actionLogs} title="Action Output" />
-
-            {/* Delete modal */}
-            {deleteTarget && (
-              <div className="fixed inset-0 bg-gray-900/70 z-50 flex items-center justify-center p-4">
-                <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
-                  <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Delete {deleteTarget.type === "vm" ? "VM" : "Cluster"}</h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
-                    Are you sure you want to delete <strong className="text-gray-800 dark:text-gray-100">{deleteTarget.name}</strong>? This action cannot be undone.
-                  </p>
-                  <div className="flex justify-end gap-2">
-                    <button className="btn border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600" onClick={() => setDeleteTarget(null)}>Cancel</button>
-                    <button className="btn bg-red-500 text-white hover:bg-red-600" disabled={deleteRes.isPending} onClick={() => { setActionLogs([]); deleteRes.mutate({ type: deleteTarget.type, name: deleteTarget.name, onLine: onActionLine }, { onSuccess: () => setDeleteTarget(null) }); }}>
-                      {deleteRes.isPending ? "Deleting..." : "Delete"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export default Resources;