@meshxdata/fops 0.1.55 → 0.1.57

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

@@ -1,285 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import LogPanel from "../components/LogPanel";
-import { useCreateResource } from "../api/queries";
-import { pollJob } from "../api/client";
-
-const STORAGE_KEY = "cloud-provision-job";
-
-const LOCATIONS = [
-  { value: "uaenorth", label: "UAE North", flag: "🇦🇪" },
-  { value: "eastus", label: "East US", flag: "🇺🇸" },
-  { value: "westeurope", label: "West Europe", flag: "🇪🇺" },
-  { value: "northeurope", label: "North Europe", flag: "🇪🇺" },
-  { value: "southeastasia", label: "Southeast Asia", flag: "🇸🇬" },
-];
-const VM_SIZES = [
-  { value: "Standard_B2s", label: "B2s", spec: "2 vCPU · 4 GiB" },
-  { value: "Standard_B2ms", label: "B2ms", spec: "2 vCPU · 8 GiB" },
-  { value: "Standard_D2s_v5", label: "D2s v5", spec: "2 vCPU · 8 GiB" },
-  { value: "Standard_D4s_v5", label: "D4s v5", spec: "4 vCPU · 16 GiB" },
-];
-
-const ALL_STEPS = ["Type", "Configure", "Review", "Deploy"];
-
-// Shared tile class for selectable options
-const tileBase = "text-left rounded-lg border transition-all cursor-pointer";
-const tileActive = "border-violet-500 bg-violet-500/10 shadow-sm shadow-violet-500/10";
-const tileInactive = "border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 bg-gray-50 dark:bg-gray-900/50";
-const tile = (active) => `${tileBase} ${active ? tileActive : tileInactive}`;
-
-function CreateResource() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const navigate = useNavigate();
-  const createResource = useCreateResource();
-  const [step, setStep] = useState(0);
-  const [form, setForm] = useState({ type: "vm", vmName: "", location: "uaenorth", vmSize: "Standard_B2s", resourceGroup: "", clusterName: "", nodeCount: 2, kubernetesVersion: "1.30" });
-  const [logs, setLogs] = useState([]);
-  const [reconnecting, setReconnecting] = useState(false);
-  const [reconnectDone, setReconnectDone] = useState(false);
-  const pollingRef = useRef(false);
-  const set = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.value }));
-  const canProceed = step === 0 ? true : step === 1 ? (form.type === "vm" ? form.vmName.length >= 3 : form.clusterName.length >= 3) : true;
-
-  const onLine = useCallback((text, type) => setLogs((prev) => [...prev, { text, type }]), []);
-  const onJobId = useCallback((jobId) => localStorage.setItem(STORAGE_KEY, jobId), []);
-
-  useEffect(() => {
-    const savedJobId = localStorage.getItem(STORAGE_KEY);
-    if (!savedJobId || pollingRef.current) return;
-    pollingRef.current = true;
-    setStep(3);
-    setReconnecting(true);
-    pollJob(savedJobId, (text, type) => setLogs((prev) => [...prev, { text, type }]))
-      .then(() => { setReconnecting(false); setReconnectDone(true); localStorage.removeItem(STORAGE_KEY); })
-      .catch(() => { localStorage.removeItem(STORAGE_KEY); setReconnecting(false); setStep(0); pollingRef.current = false; });
-  }, []);
-
-  const handleCreate = () => {
-    const body = form.type === "vm"
-      ? { type: "vm", vmName: form.vmName, location: form.location, vmSize: form.vmSize, resourceGroup: form.resourceGroup || undefined }
-      : { type: "cluster", clusterName: form.clusterName, location: form.location, nodeCount: Number(form.nodeCount), kubernetesVersion: form.kubernetesVersion };
-    setLogs([]);
-    setStep(3);
-    createResource.mutate({ body, onLine, onJobId }, { onSuccess: () => localStorage.removeItem(STORAGE_KEY) });
-  };
-
-  const isRunning = reconnecting || createResource.isPending;
-  const isDone = reconnectDone || (!createResource.isPending && !createResource.isError && logs.length > 0);
-
-  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-4xl mx-auto">
-
-            {/* Pipeline header */}
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <h1 className="text-xl font-bold text-gray-800 dark:text-gray-100">Foundation Factory</h1>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Provision a Foundation environment</p>
-              </div>
-              {step < 3 && (
-                <button className="btn-sm border border-gray-200 dark:border-gray-700/60 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg" onClick={() => navigate("/")}>Cancel</button>
-              )}
-            </div>
-
-            {/* Pipeline stepper */}
-            <div className="flex items-center mb-8">
-              {ALL_STEPS.map((s, i) => {
-                const done = i < step || (i === 3 && isDone);
-                const active = i === step && !(i === 3 && isDone);
-                return (
-                  <React.Fragment key={s}>
-                    <div className="flex items-center gap-2">
-                      <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 ${
-                        done ? "bg-green-500 text-white shadow-sm shadow-green-500/30"
-                        : active ? "bg-violet-500 text-white shadow-sm shadow-violet-500/30 ring-4 ring-violet-500/20"
-                        : "bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-500 border border-gray-300 dark:border-gray-700/60"
-                      }`}>
-                        {done ? "✓" : i + 1}
-                      </div>
-                      <span className={`text-sm font-medium hidden sm:inline ${
-                        done ? "text-green-600 dark:text-green-500" : active ? "text-gray-800 dark:text-gray-100" : "text-gray-400 dark:text-gray-600"
-                      }`}>{s}</span>
-                    </div>
-                    {i < ALL_STEPS.length - 1 && (
-                      <div className={`flex-1 h-px mx-3 transition-colors duration-500 ${i < step ? "bg-green-500/40" : "bg-gray-200 dark:bg-gray-700/60"}`} />
-                    )}
-                  </React.Fragment>
-                );
-              })}
-            </div>
-
-            {/* Content card */}
-            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 shadow-xs rounded-xl overflow-hidden">
-
-              {/* Step 0: Type */}
-              {step === 0 && (
-                <div className="p-6">
-                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Select Target</h2>
-                  <div className="grid grid-cols-2 gap-4">
-                    {[
-                      { type: "vm", label: "Virtual Machine", desc: "Single-node Foundation on Azure VM", icon: "🖥" },
-                      { type: "cluster", label: "AKS Cluster", desc: "Distributed Foundation on managed Kubernetes", icon: "☸" },
-                    ].map((opt) => (
-                      <button key={opt.type} onClick={() => setForm((p) => ({ ...p, type: opt.type }))} className={`${tile(form.type === opt.type)} p-5`}>
-                        <div className="text-2xl mb-3">{opt.icon}</div>
-                        <div className="text-sm font-semibold text-gray-800 dark:text-gray-100">{opt.label}</div>
-                        <div className="text-xs text-gray-500 mt-1">{opt.desc}</div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Step 1: VM Config */}
-              {step === 1 && form.type === "vm" && (
-                <div className="p-6 space-y-5">
-                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">VM Configuration</h2>
-                  <Field label="Name" hint="Unique identifier for this VM">
-                    <input className="field-input" placeholder="my-foundation-vm" value={form.vmName} onChange={set("vmName")} />
-                  </Field>
-                  <Field label="Region">
-                    <div className="grid grid-cols-3 gap-2">
-                      {LOCATIONS.map((l) => (
-                        <button key={l.value} onClick={() => setForm((p) => ({ ...p, location: l.value }))} className={`${tile(form.location === l.value)} px-3 py-2.5 text-sm`}>
-                          <span className="mr-1.5">{l.flag}</span>
-                          <span className={form.location === l.value ? "text-gray-800 dark:text-gray-100" : "text-gray-600 dark:text-gray-400"}>{l.label}</span>
-                        </button>
-                      ))}
-                    </div>
-                  </Field>
-                  <Field label="Size">
-                    <div className="grid grid-cols-2 gap-2">
-                      {VM_SIZES.map((s) => (
-                        <button key={s.value} onClick={() => setForm((p) => ({ ...p, vmSize: s.value }))} className={`${tile(form.vmSize === s.value)} px-3 py-2.5 text-sm`}>
-                          <div className={`font-medium ${form.vmSize === s.value ? "text-gray-800 dark:text-gray-100" : "text-gray-700 dark:text-gray-200"}`}>{s.label}</div>
-                          <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{s.spec}</div>
-                        </button>
-                      ))}
-                    </div>
-                  </Field>
-                  <Field label="Resource Group" hint="Leave empty for auto-generated">
-                    <input className="field-input" placeholder="FOUNDATION-VM-RG" value={form.resourceGroup} onChange={set("resourceGroup")} />
-                  </Field>
-                </div>
-              )}
-
-              {/* Step 1: Cluster Config */}
-              {step === 1 && form.type === "cluster" && (
-                <div className="p-6 space-y-5">
-                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Cluster Configuration</h2>
-                  <Field label="Cluster Name">
-                    <input className="field-input" placeholder="my-aks-cluster" value={form.clusterName} onChange={set("clusterName")} />
-                  </Field>
-                  <Field label="Region">
-                    <div className="grid grid-cols-3 gap-2">
-                      {LOCATIONS.map((l) => (
-                        <button key={l.value} onClick={() => setForm((p) => ({ ...p, location: l.value }))} className={`${tile(form.location === l.value)} px-3 py-2.5 text-sm`}>
-                          <span className="mr-1.5">{l.flag}</span>
-                          <span className={form.location === l.value ? "text-gray-800 dark:text-gray-100" : "text-gray-600 dark:text-gray-400"}>{l.label}</span>
-                        </button>
-                      ))}
-                    </div>
-                  </Field>
-                  <Field label="Node Count">
-                    <input className="field-input" type="number" min={1} max={20} value={form.nodeCount} onChange={set("nodeCount")} />
-                  </Field>
-                  <Field label="Kubernetes Version">
-                    <input className="field-input" placeholder="1.30" value={form.kubernetesVersion} onChange={set("kubernetesVersion")} />
-                  </Field>
-                </div>
-              )}
-
-              {/* Step 2: Review */}
-              {step === 2 && (
-                <div className="p-6">
-                  <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Review Deployment</h2>
-                  <div className="bg-gray-50 dark:bg-gray-900/60 rounded-lg border border-gray-200 dark:border-gray-700/60 divide-y divide-gray-200 dark:divide-gray-700/60">
-                    {(form.type === "vm"
-                      ? [
-                          ["Target", "Virtual Machine"],
-                          ["Name", form.vmName],
-                          ["Region", LOCATIONS.find(l => l.value === form.location)?.label || form.location],
-                          ["Size", (VM_SIZES.find(s => s.value === form.vmSize)?.label || "") + " — " + (VM_SIZES.find(s => s.value === form.vmSize)?.spec || form.vmSize)],
-                          ...(form.resourceGroup ? [["Resource Group", form.resourceGroup]] : []),
-                        ]
-                      : [
-                          ["Target", "AKS Cluster"],
-                          ["Name", form.clusterName],
-                          ["Region", LOCATIONS.find(l => l.value === form.location)?.label || form.location],
-                          ["Nodes", String(form.nodeCount)],
-                          ["K8s Version", form.kubernetesVersion],
-                        ]
-                    ).map(([label, value]) => (
-                      <div key={label} className="flex justify-between items-center px-4 py-3">
-                        <span className="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">{label}</span>
-                        <span className="text-sm font-mono text-gray-800 dark:text-gray-200">{value}</span>
-                      </div>
-                    ))}
-                  </div>
-                  {createResource.isError && <p className="text-sm text-red-500 mt-4">{createResource.error?.message || "Failed"}</p>}
-                </div>
-              )}
-
-              {/* Step 3: Deploy */}
-              {step === 3 && (
-                <div className="p-6">
-                  <div className="flex items-center gap-3 mb-1">
-                    {isRunning && <div className="w-4 h-4 border-2 border-violet-500 border-t-transparent rounded-full animate-spin" />}
-                    <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
-                      {isRunning ? (reconnecting ? "Reconnecting..." : "Deploying") : isDone ? "Deployment Complete" : "Failed"}
-                    </h2>
-                  </div>
-                  <LogPanel lines={logs} title="" isDone={isDone} showPhases />
-                  {!isRunning && (
-                    <div className="mt-5">
-                      <button className="btn bg-violet-500 text-white hover:bg-violet-600" onClick={() => navigate("/")}>Go to Registry</button>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Nav bar */}
-              {step < 3 && (
-                <div className="flex justify-between items-center px-6 py-4 border-t border-gray-100 dark:border-gray-700/60 bg-gray-50 dark:bg-gray-900/40">
-                  <button
-                    className="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition disabled:opacity-30"
-                    onClick={() => setStep((s) => s - 1)}
-                    disabled={step === 0}
-                  >&larr; Back</button>
-                  {step < 2 ? (
-                    <button className="btn bg-violet-500 text-white hover:bg-violet-600 disabled:opacity-40" onClick={() => setStep((s) => s + 1)} disabled={!canProceed}>
-                      Continue &rarr;
-                    </button>
-                  ) : (
-                    <button className="btn bg-green-600 text-white hover:bg-green-500" onClick={handleCreate}>
-                      Deploy &rarr;
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-function Field({ label, hint, children }) {
-  return (
-    <div>
-      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{label}</label>
-      {children}
-      {hint && <p className="text-xs text-gray-400 dark:text-gray-600 mt-1.5">{hint}</p>}
-    </div>
-  );
-}
-
-export default CreateResource;

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;