feat(web): rename saved environments from settings

apps/web/src/components/settings/RenameEnvironmentDialog.tsx

@@ -0,0 +1,111 @@
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { useState } from "react";
+
+import { environmentCatalog } from "~/connection/catalog";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+
+// The popup unmounts when closed, so each open starts from the current label.
+function RenameEnvironmentForm({
+  environmentId,
+  label: currentLabel,
+  onDone,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly label: string;
+  readonly onDone: () => void;
+}) {
+  const [label, setLabel] = useState(currentLabel);
+  const setEnvironmentLabel = useAtomCommand(environmentCatalog.setLabel, "Rename environment");
+  const canSave = label.trim() !== "";
+
+  const save = async () => {
+    if (!canSave) return;
+    const result = await setEnvironmentLabel({ environmentId, label });
+    if (result._tag === "Success") {
+      onDone();
+      return;
+    }
+    if (isAtomCommandInterrupted(result)) return;
+    const error = squashAtomCommandFailure(result);
+    toastManager.add(
+      stackedThreadToast({
+        type: "error",
+        title: "Could not rename environment",
+        description: error instanceof Error ? error.message : "The label was not saved.",
+      }),
+    );
+  };
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Rename environment</DialogTitle>
+      </DialogHeader>
+      <DialogPanel>
+        <form
+          id="rename-environment-form"
+          className="grid gap-1.5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void save();
+          }}
+        >
+          <Label htmlFor="environment-label">Label</Label>
+          <Input
+            id="environment-label"
+            value={label}
+            onChange={(event) => setLabel(event.target.value)}
+            autoFocus
+          />
+        </form>
+      </DialogPanel>
+      <DialogFooter variant="bare">
+        <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
+        <Button type="submit" form="rename-environment-form" disabled={!canSave}>
+          Save
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+export function RenameEnvironmentDialog({
+  open,
+  onOpenChange,
+  environmentId,
+  label,
+}: {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly environmentId: EnvironmentId;
+  readonly label: string;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPopup className="max-w-md">
+        <RenameEnvironmentForm
+          environmentId={environmentId}
+          label={label}
+          onDone={() => onOpenChange(false)}
+        />
+      </DialogPopup>
+    </Dialog>
+  );
+}

apps/web/src/components/settings/SavedEnvironmentRows.tsx

@@ -3,6 +3,7 @@ import {
   ChevronRightIcon,
   ChevronsLeftRightEllipsisIcon,
   EllipsisIcon,
+  PencilIcon,
   RouteIcon,
 } from "lucide-react";
 import { useAtomValue } from "@effect/atom-react";
@@ -29,6 +30,7 @@ import { SettingsRow } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 import { EnvironmentIconMenu } from "./EnvironmentIconPicker";
 import { EnvironmentRoutesList } from "./EnvironmentRoutesList";
+import { RenameEnvironmentDialog } from "./RenameEnvironmentDialog";
 import {
   ConnectionDiagnosisPanel,
   ConnectionDiagnosisSummary,
@@ -117,6 +119,7 @@ export function SavedBackendListRow({
   const [routesOpen, setRoutesOpen] = useState(false);
   const [permissionsOpen, setPermissionsOpen] = useState(false);
   const [diagnosisOpen, setDiagnosisOpen] = useState(false);
+  const [renameOpen, setRenameOpen] = useState(false);
   const environmentId = environment.environmentId;
   const unsupported = environment.connection.phase === "unsupported";
   const blocked = unsupported && !hasSavedBearerRoute(environment.entry);
@@ -413,6 +416,12 @@ export function SavedBackendListRow({
             environmentId={environmentId}
             serverConfig={environment.serverConfig}
           />
+          {environment.relayManaged ? null : (
+            <MenuItem onClick={() => setRenameOpen(true)}>
+              <PencilIcon />
+              Rename…
+            </MenuItem>
+          )}
           <MenuItem onClick={() => setRoutesOpen((open) => !open)}>
             <RouteIcon />
             {routesOpen ? "Hide routes" : "Routes"}
@@ -429,6 +438,12 @@ export function SavedBackendListRow({
           </MenuItem>
         </MenuPopup>
       </Menu>
+      <RenameEnvironmentDialog
+        open={renameOpen}
+        onOpenChange={setRenameOpen}
+        environmentId={environmentId}
+        label={environment.label}
+      />
     </EnvironmentRow>
   );
 }

packages/client-runtime/src/connection/registry.test.ts

@@ -2196,6 +2196,107 @@ describe("EnvironmentRegistry routes", () => {
     }),
   );
 
+  it.effect("renames every route and keeps credentials and learned state", () =>
+    Effect.gen(function* () {
+      const environmentId = LAN_TARGET.environmentId;
+      const learnedId = `learned:${environmentId}:http://100.64.0.9:3773@${LAN_TARGET.connectionId}`;
+      const connectedProfileLabels: Array<string> = [];
+      const harness = yield* makeHarness(
+        [
+          new BearerConnectionTarget({ ...LAN_TARGET, connectionId: learnedId }),
+          LAN_TARGET,
+          RELAY_TARGET,
+        ],
+        [
+          new BearerConnectionProfile({ ...LAN_PROFILE, connectionId: learnedId, learned: true }),
+          LAN_PROFILE,
+        ],
+        [[LAN_TARGET.connectionId, BEARER_CREDENTIAL]],
+        {
+          checkRoute: (route) => {
+            if (Option.isSome(route.profile))
+              connectedProfileLabels.push(route.profile.value.label);
+            return "unchecked";
+          },
+        },
+      );
+      yield* Effect.gen(function* () {
+        const registry = yield* EnvironmentRegistry.EnvironmentRegistry;
+        yield* awaitConnectionState(
+          registry,
+          environmentId,
+          (state) => state.phase === "connected",
+        );
+        yield* registry.setLabel(environmentId, "  Studio  ");
+
+        expect((yield* registry.state(environmentId)).phase).toBe("connected");
+        expect(yield* Ref.get(harness.sessions)).toHaveLength(1);
+        expect(yield* Ref.get(harness.releasedSessions)).toBe(0);
+        expect(
+          routesOf(yield* Ref.get(harness.storedTargets), environmentId).map((target) => [
+            target._tag,
+            target.label,
+          ]),
+        ).toEqual([
+          ["BearerConnectionTarget", "Studio"],
+          ["BearerConnectionTarget", "Studio"],
+          ["RelayConnectionTarget", "Studio"],
+        ]);
+        const profiles = yield* Ref.get(harness.storedProfiles);
+        expect(profiles.get(learnedId)).toMatchObject({ label: "Studio", learned: true });
+        expect(profiles.get(LAN_TARGET.connectionId)?.label).toBe("Studio");
+        expect((yield* Ref.get(harness.storedCredentials)).get(LAN_TARGET.connectionId)).toEqual(
+          BEARER_CREDENTIAL,
+        );
+        const entry = (yield* SubscriptionRef.get(registry.entries)).get(environmentId);
+        expect(entry?.target.label).toBe("Studio");
+
+        // A retained supervisor must reconnect with the new label: the SSH broker saves the
+        // profile it is handed, so a stale one would write the old label back.
+        connectedProfileLabels.length = 0;
+        yield* registry.setEnabled(environmentId, false);
+        yield* awaitConnectionState(
+          registry,
+          environmentId,
+          (state) => state.phase !== "connected",
+        );
+        yield* registry.setEnabled(environmentId, true);
+        yield* awaitConnectionState(
+          registry,
+          environmentId,
+          (state) => state.phase === "connected",
+        );
+        expect(connectedProfileLabels).not.toHaveLength(0);
+        expect(new Set(connectedProfileLabels)).toEqual(new Set(["Studio"]));
+
+        const error = yield* registry.setLabel(environmentId, "   ").pipe(Effect.flip);
+        expect(error._tag).toBe("ConnectionBlockedError");
+      }).pipe(Effect.provide(harness.layer), Effect.scoped);
+    }),
+  );
+
+  it.effect("a rename keeps the SSH target the broker last saved", () =>
+    Effect.gen(function* () {
+      const harness = yield* makeHarness([SSH_CONNECTION], [SSH_PROFILE]);
+      yield* Effect.gen(function* () {
+        const registry = yield* EnvironmentRegistry.EnvironmentRegistry;
+        const moved = { ...SSH_TARGET, hostname: "moved.example.test" };
+        yield* Ref.update(harness.storedProfiles, (current) =>
+          new Map(current).set(
+            SSH_CONNECTION.connectionId,
+            new SshConnectionProfile({ ...SSH_PROFILE, target: moved }),
+          ),
+        );
+
+        yield* registry.setLabel(SSH_CONNECTION.environmentId, "Studio");
+
+        expect((yield* Ref.get(harness.storedProfiles)).get(SSH_CONNECTION.connectionId)).toEqual(
+          new SshConnectionProfile({ ...SSH_PROFILE, label: "Studio", target: moved }),
+        );
+      }).pipe(Effect.provide(harness.layer), Effect.scoped);
+    }),
+  );
+
   it.effect("removing the last route forgets the environment", () =>
     Effect.gen(function* () {
       const harness = yield* makeHarness(
@@ -2246,6 +2347,9 @@ describe("EnvironmentRegistry routes", () => {
             LAN_TARGET.connectionId,
           ]);
           expect(yield* permissions.get(yield* current())).toBe("read");
+
+          yield* registry.setLabel(LAN_TARGET.environmentId, "Studio");
+          expect(yield* permissions.get(yield* current())).toBe("read");
         }).pipe(
           Effect.provide(harness.layer),
           Effect.provideService(PullRequestRoutingPermissions, permissions),

packages/client-runtime/src/connection/registry.ts

@@ -51,6 +51,8 @@ import {
   findRouteToSameAddress,
   hasSavedBearerRoute,
   mergeLearnedRoutes,
+  profileWithLabel,
+  routeWithLabel,
   routesAfterRemoving,
   upsertRoute,
   type ReportedEndpoint,
@@ -151,6 +153,16 @@ export class EnvironmentRegistry extends Context.Service<
       | PlatformEnvironmentRemovalError
       | ConnectionBlockedError
     >;
+    readonly setLabel: (
+      environmentId: EnvironmentId,
+      label: string,
+    ) => Effect.Effect<
+      void,
+      | Persistence.ConnectionPersistenceError
+      | ConnectionAttemptError
+      | EnvironmentNotRegisteredError
+      | PlatformEnvironmentRemovalError
+    >;
     readonly removeRelayEnvironments: () => Effect.Effect<
       void,
       | Persistence.ConnectionPersistenceError
@@ -202,7 +214,7 @@ export class EnvironmentRegistry extends Context.Service<
 
 interface EnvironmentServiceScope {
   readonly entry: ConnectionCatalogEntry;
-  readonly supervisor: EnvironmentSupervisor.EnvironmentSupervisor["Service"];
+  readonly supervisor: EnvironmentSupervisor.ManagedEnvironmentSupervisor;
   readonly scope: Scope.Closeable;
 }
 
@@ -1025,6 +1037,54 @@ export const make = Effect.gen(function* () {
     );
   });
 
+  const setLabel = Effect.fn("EnvironmentRegistry.setLabel")(function* (
+    environmentId: EnvironmentId,
+    label: string,
+  ) {
+    const trimmed = label.trim();
+    if (trimmed === "") {
+      return yield* new ConnectionBlockedError({
+        reason: "configuration",
+        detail: "Environment label cannot be empty.",
+      });
+    }
+    yield* withLeaseLock(
+      environmentId,
+      Effect.gen(function* () {
+        const entry = yield* userEntry(environmentId);
+        const routes = connectionRoutes(entry);
+        if (routes.every((route) => route.target.label === trimmed)) return;
+        // Every route carries the label: the first one is displayed, and reordering can change it.
+        const renamed = routes.map((route) => routeWithLabel(route, trimmed));
+        for (const { profile } of routes) {
+          if (Option.isNone(profile)) continue;
+          // The SSH broker saves a freshly resolved target only to the store, so relabel that copy.
+          const saved = yield* profiles.get(profile.value.connectionId);
+          yield* profiles.put(
+            profileWithLabel(
+              Option.getOrElse(saved, () => profile.value),
+              trimmed,
+            ),
+          );
+        }
+        const next = entryWithRoutes(entry, renamed);
+        yield* registrations.setRoutes(environmentId, persistedRoutes(next));
+        // A label changes no address, so the supervisor keeps its session. Its next connect uses
+        // the new label; its own messages keep the old one until it is next recreated.
+        const lease = (yield* SubscriptionRef.get(serviceScopes)).get(environmentId);
+        if (lease !== undefined) {
+          yield* lease.supervisor.setLabel(trimmed);
+          yield* SubscriptionRef.update(serviceScopes, (current) =>
+            new Map(current).set(environmentId, { ...lease, entry: next }),
+          );
+        }
+        yield* SubscriptionRef.update(entries, (current) =>
+          new Map(current).set(environmentId, next),
+        );
+      }),
+    );
+  });
+
   const removeRelayEnvironments = Effect.fn("EnvironmentRegistry.removeRelayEnvironments")(
     function* () {
       const relayEnvironmentIds = [...(yield* SubscriptionRef.get(entries)).values()]
@@ -1193,6 +1253,7 @@ export const make = Effect.gen(function* () {
     remove,
     removeRoute,
     reorderRoutes,
+    setLabel,
     removeRelayEnvironments,
     retryNow,
     setEnabled,