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