feat(adminsite): create and renew a free instance

Adds the create form with a live slug preview, a renew action inside the
seven-day window, and a deletion countdown that renders only when the
backend has actually promised a date.

The progress bar denominator now follows the tier; a 30-day Free licence
was rendering as an 8% sliver against the hardcoded 365.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

adminsite/app/(customer)/instances/new/CreateForm.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ApiError, api } from "@/lib/api";
+import { Button } from "@/components/Button";
+import { Field } from "@/components/Field";
+
+function slugify(value: string) {
+    return value
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+
+export function CreateForm() {
+    const [name, setName] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const router = useRouter();
+    const qc = useQueryClient();
+
+    const create = useMutation({
+        mutationFn: () => api.createInstance(name.trim()),
+        onSuccess: async () => {
+            await qc.invalidateQueries({ queryKey: ["account"] });
+            router.push("/");
+        },
+        onError: (e) =>
+            setError(e instanceof ApiError ? e.message : "Something went wrong. Try again."),
+    });
+
+    const slug = slugify(name);
+
+    return (
+        <form
+            className="grid max-w-md gap-4"
+            onSubmit={(e) => {
+                e.preventDefault();
+                setError(null);
+                if (name.trim()) create.mutate();
+            }}
+        >
+            <Field
+                label="Instance name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Northgate Systems"
+                required
+                error={error ?? undefined}
+                hint={`${slug || "your-instance"}.vantage.hostxtra.co.uk`}
+            />
+
+            <p className="text-[0.82rem] text-ink-2">
+                You sign in to it with this same email address and password. Changing one does not
+                change the other afterwards.
+            </p>
+
+            <Button type="submit" disabled={create.isPending || !name.trim()}>
+                {create.isPending ? "Creating…" : "Create instance"}
+            </Button>
+        </form>
+    );
+}

adminsite/app/(customer)/instances/new/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { CreateForm } from "./CreateForm";
+
+export const metadata: Metadata = { title: "New instance" };
+
+export default function NewInstancePage() {
+    return (
+        <div className="grid gap-6">
+            <header className="grid gap-2">
+                <h1 className="text-3xl">Create a free instance</h1>
+                <p className="max-w-prose text-ink-2">
+                    An instance owns its servers, keys, workflows, monitors and secrets. Nothing
+                    inside it is visible to any other instance. Free covers three servers, and the
+                    licence runs for a month at a time — we email you before it needs renewing.
+                </p>
+            </header>
+            <CreateForm />
+        </div>
+    );
+}

adminsite/app/(customer)/page.tsx

@@ -58,10 +58,16 @@ export default function OverviewPage() {
                 <div className="grid max-w-xl gap-3 rounded border border-rule bg-panel p-5">
                     <h2 className="text-xl">No instances yet</h2>
                     <p className="text-ink-2">
-                        There are two ways to run Vantage. Buy a cloud instance and we host it, and
-                        your licence is applied automatically. Or buy a self-hosted licence, install
-                        Vantage on your own server, and link it here to get your licence file.
+                        Create a free cloud instance and we host it, with your licence applied
+                        automatically. Or buy a self-hosted licence, install Vantage on your own
+                        server, and link it here to get your licence file.
                     </p>
+                    <Link
+                        href="/instances/new"
+                        className="justify-self-start rounded bg-accent px-4 py-2 text-[0.9rem] font-semibold text-accent-ink"
+                    >
+                        Create a free instance
+                    </Link>
                 </div>
             ) : (
                 <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -74,6 +80,18 @@ export default function OverviewPage() {
                     ))}
                 </section>
             )}
+
+            {data.instances.length > 0 &&
+                !data.instances.some(
+                    (i) => i.tier === "free" && i.status !== "cancelled" && i.status !== "deleted",
+                ) && (
+                    <Link
+                        href="/instances/new"
+                        className="justify-self-start text-[0.82rem] font-semibold text-accent underline"
+                    >
+                        Create a free instance
+                    </Link>
+                )}
         </div>
     );
 }