feat: Let a customer rename a cloud instance from HQ

adminsite/app/(customer)/instances/[id]/page.tsx

@@ -9,6 +9,7 @@ import { NotConnectedPanel } from "@/components/NotConnected";
 import { LicenceDelivery } from "@/components/LicenceDelivery";
 import { MembersPanel } from "@/components/MembersPanel";
 import { RelinkPanel } from "@/components/RelinkPanel";
+import { RenamePanel } from "@/components/RenamePanel";
 import { StatePill } from "@/components/StatePill";
 import { TermBar } from "@/components/TermBar";
 import { EmptyState, Note, Panel } from "@/components/Panel";
@@ -17,6 +18,7 @@ import { PageHeader } from "@/components/PageHeader";
 import { LinkButton } from "@/components/Button";
 import { formatDate, licenceState, limitLabel } from "@/lib/format";
 import { FEATURE_LABEL, featureDesc, featureLabel } from "@/lib/features";
+import { useSession } from "@/lib/session";
 
 /** One key/value row. The key is the same keyed idiom as everywhere else. */
 function Row({ label, value }: { label: string; value: React.ReactNode }) {
@@ -65,6 +67,10 @@ export default function InstancePage() {
     const qc = useQueryClient();
     const [relinkError, setRelinkError] = useState<string | undefined>();
 
+    // useSession is the app's one way to ask who the caller is — it shares the
+    // ["me"] query, so this adds no request.
+    const { session } = useSession();
+
     const account = useQuery({ queryKey: ["account"], queryFn: api.account });
     const licence = useQuery({
         queryKey: ["license", id],
@@ -95,6 +101,7 @@ export default function InstancePage() {
     const lic = licence.data;
     const state = licenceState(lic?.expires_at, Boolean(lic));
     const cloud = instance.deployment === "cloud";
+    const mayRename = session?.account_role === "owner" || session?.account_role === "admin";
     const maxRelinks = account.data?.max_relinks ?? 3;
     const host = cloud && instance.slug ? `${instance.slug}.vantage.hostxtra.co.uk` : null;
 
@@ -194,6 +201,30 @@ export default function InstancePage() {
 
                 {cloud && <MembersPanel instanceId={instance.instance_id} />}
 
+                {/*
+                 * Address rather than "Rename": the panel is about where this
+                 * instance lives, and the rename is how you change it. Cloud
+                 * only — a self-hosted install has no tenant subdomain for us to
+                 * move.
+                 */}
+                {cloud && mayRename && (
+                    <Panel title="Address" meta={host ?? undefined}>
+                        <p className="text-[0.86rem] text-ink-2">
+                            The instance name is where its address comes from. Renaming moves it to a new address and releases the old
+                            one, so saved links and bookmarks to it stop working.
+                        </p>
+                        <RenamePanel
+                            currentName={instance.name}
+                            currentSlug={instance.slug ?? ""}
+                            onRename={async (name) => {
+                                const res = await api.renameInstance(instance.instance_id, name);
+                                qc.invalidateQueries({ queryKey: ["account"] });
+                                return res;
+                            }}
+                        />
+                    </Panel>
+                )}
+
                 {/*
                  * "Moves" rather than "Relinks": the count is rationed, so the
                  * headline is how many are left, and the panel explains what

adminsite/components/RenamePanel.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "./Button";
+import { Field } from "./Field";
+import { Note } from "./Panel";
+import { ApiError, type RenameResult } from "@/lib/api";
+import { baseSlug, hostFor, slugError } from "@/lib/slug";
+
+/*
+ * The rename control, and only the control — the same shape as RelinkPanel: an
+ * input that expands in place rather than a modal, because this app has no modal
+ * and one action with one field does not need one.
+ *
+ * The host preview is drawn from lib/slug.ts, a mirror of the Go rules. It can
+ * disagree with the server; the 409 that comes back is the answer that counts.
+ */
+export function RenamePanel({
+    currentName,
+    currentSlug,
+    onRename,
+}: {
+    currentName: string;
+    currentSlug: string;
+    onRename: (name: string) => Promise<RenameResult>;
+}) {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(currentName);
+    const [error, setError] = useState<string | undefined>();
+    const [busy, setBusy] = useState(false);
+    const [done, setDone] = useState<RenameResult | undefined>();
+
+    const name = value.trim();
+    const derived = baseSlug(name);
+    const invalid = slugError(name);
+    // A cosmetic edit that lands on the same slug is still a rename worth doing —
+    // the name is what the customer reads. Only an empty or unchanged name is
+    // nothing to submit.
+    const unchanged = name === currentName.trim();
+
+    async function submit() {
+        setError(undefined);
+        setBusy(true);
+        try {
+            const res = await onRename(name);
+            setDone(res);
+            setOpen(false);
+        } catch (err) {
+            setError(err instanceof ApiError ? err.message : "Rename failed. Try again.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    if (done) {
+        const host = done.login_url || `https://${hostFor(done.slug)}`;
+        return (
+            <Note tone="warn">
+                <span className="grid gap-2">
+                    <span>
+                        This instance is now <strong>{done.name}</strong>, at{" "}
+                        <span className="font-mono">{hostFor(done.slug)}</span>. The old address has stopped working, and your
+                        sign-in does not follow it — you will need to sign in again there.
+                    </span>
+                    <a href={host} className="justify-self-start font-mono text-[0.78rem] text-accent underline">
+                        Open {hostFor(done.slug)} &rarr;
+                    </a>
+                </span>
+            </Note>
+        );
+    }
+
+    return (
+        <div className="grid gap-3">
+            {open && (
+                <Field
+                    label="Instance name"
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    error={error ?? (name ? invalid : undefined)}
+                    hint={
+                        name && !invalid ? (
+                            <>
+                                Moves to <span className="font-mono">{hostFor(derived)}</span>
+                                {derived === currentSlug && " — the address does not change"}
+                            </>
+                        ) : (
+                            "Letters and digits; everything else becomes a hyphen."
+                        )
+                    }
+                />
+            )}
+            <div className="flex flex-wrap items-center gap-3">
+                <Button
+                    type="button"
+                    variant="line"
+                    disabled={busy || (open && (!name || Boolean(invalid) || unchanged))}
+                    onClick={() => (open ? submit() : setOpen(true))}
+                >
+                    {busy ? "Renaming…" : "Rename instance"}
+                </Button>
+                {open && (
+                    <span className="text-[0.82rem] text-ink-3">
+                        Anyone signed in will need to sign in again at the new address, and links to the old one stop working.
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}