feat: Let staff rename an instance

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

@@ -13,6 +13,7 @@ import { Panel } from "@/components/Panel";
 import { licenceState } from "@/lib/format";
 import PlanConfigurator, { type PlanChoice } from "@/components/PlanConfigurator";
 import { IssuePanel } from "./IssuePanel";
+import { RenamePanel } from "@/components/RenamePanel";
 
 const INJECTION: Record<InjectionState, { label: string; tone: string }> = {
     current: { label: "Control plane holds the current licence", tone: "text-valid" },
@@ -26,6 +27,7 @@ const INJECTION: Record<InjectionState, { label: string; tone: string }> = {
 
 export default function StaffInstancePage() {
     const id = String(useParams().id);
+    const qc = useQueryClient();
     const { data, isLoading } = useQuery({
         queryKey: ["staff-instance", id],
         queryFn: () => api.staff.instance(id),
@@ -79,6 +81,23 @@ export default function StaffInstancePage() {
                 <IssuePanel instanceId={data.instance.instance_id} />
             </Panel>
 
+            {/*
+             * Staff rename has no cooldown and does not start the customer's:
+             * fixing a name on someone's behalf must not spend their next 24
+             * hours.
+             */}
+            <Panel title="Name" meta={data.instance.deployment === "cloud" ? "Moves the address" : "Label only"}>
+                <RenamePanel
+                    currentName={data.instance.name}
+                    currentSlug={data.instance.slug ?? ""}
+                    onRename={async (name) => {
+                        const res = await api.staff.renameInstance(data.instance.instance_id, name);
+                        qc.invalidateQueries({ queryKey: ["staff-instance", id] });
+                        return res;
+                    }}
+                />
+            </Panel>
+
             <EntitlementSection instanceId={data.instance.instance_id} deployment={data.instance.deployment} />
         </div>
     );