feat(connect): let hosts set their display name

apps/mobile/src/features/connection/ConnectionDiagnosisDetails.tsx

@@ -4,6 +4,7 @@ import {
   type ConnectionDiagnosis,
   connectionDiagnosisText,
   connectionRoutes,
+  environmentDisplayLabel,
   hasRelayRoute,
   presentConnectionDiagnosis,
   type EnvironmentPresentation,
@@ -37,7 +38,7 @@ export function useConnectionDiagnosis(
   const relayOnly =
     connectionRoutes(presentation.entry).length === 1 && hasRelayRoute(presentation.entry);
   const diagnosis = presentConnectionDiagnosis({
-    hostLabel: presentation.entry.target.label,
+    hostLabel: environmentDisplayLabel(presentation.entry, presentation.serverConfig),
     state,
     via: relayOnly ? "relay" : "direct",
     clientVersion: Constants.expoConfig?.version,

apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx

@@ -3,7 +3,11 @@ import { ConnectionTraceId } from "./ConnectionTraceId";
 import { SymbolView } from "../../components/ui/AppSymbol";
 import { hasSavedBearerRoute, hostFreezeNotice } from "@t3tools/client-runtime/connection";
 import type { AtomCommandResult } from "@t3tools/client-runtime/state/runtime";
-import { type EnvironmentId, resolveEnvironmentMachineKind } from "@t3tools/contracts";
+import {
+  type EnvironmentId,
+  type ServerConfig,
+  resolveEnvironmentMachineKind,
+} from "@t3tools/contracts";
 import { useAtomValue } from "@effect/atom-react";
 import * as Cause from "effect/Cause";
 import { AsyncResult } from "effect/reactivity";
@@ -24,6 +28,7 @@ import { ConnectionDiagnosisDetails, useConnectionDiagnosis } from "./Connection
 import { ConnectionFormField } from "./ConnectionFormField";
 import { ConnectionStatusDot } from "./ConnectionStatusDot";
 import { environmentStatusText } from "./environmentStatusText";
+import { environmentCatalog } from "../../connection/catalog";
 
 function connectionStatusLabel(environment: ConnectedEnvironmentSummary): string | null {
   if (!environment.isEnabled && environment.connectionState !== "unsupported") {
@@ -36,7 +41,7 @@ function connectionStatusLabel(environment: ConnectedEnvironmentSummary): string
   });
 }
 
-export function ConnectionEnvironmentRow(props: {
+interface ConnectionEnvironmentRowProps {
   readonly environment: ConnectedEnvironmentSummary;
   readonly expanded: boolean;
   readonly opensDetails?: boolean;
@@ -48,9 +53,12 @@ export function ConnectionEnvironmentRow(props: {
     environmentId: EnvironmentId,
     updates: { readonly label: string; readonly displayUrl: string },
   ) => Promise<AtomCommandResult<unknown, unknown>>;
-}) {
-  const [label, setLabel] = useState(props.environment.environmentLabel);
-  const [url, setUrl] = useState(props.environment.displayUrl);
+}
+
+export function ConnectionEnvironmentRow(props: ConnectionEnvironmentRowProps) {
+  const catalog = useAtomValue(environmentCatalog.catalogValueAtom);
+  const isHostName =
+    catalog.entries.get(props.environment.environmentId)?.target._tag === "RelayConnectionTarget";
   const serverConfig = useAtomValue(
     serverEnvironment.configValueAtom(props.environment.environmentId),
   );
@@ -74,21 +82,6 @@ export function ConnectionEnvironmentRow(props: {
     enabled &&
     (props.environment.connectionState === "connecting" ||
       props.environment.connectionState === "reconnecting");
-  const handleSave = async () => {
-    const result = await props.onUpdate(props.environment.environmentId, {
-      label: label.trim(),
-      displayUrl: url.trim(),
-    });
-    if (AsyncResult.isSuccess(result)) {
-      props.onToggle();
-      return;
-    }
-    const error = Cause.squash(result.cause);
-    Dialog.alert(
-      "Could not update environment",
-      error instanceof Error ? error.message : "The environment could not be updated.",
-    );
-  };
 
   return (
     <Animated.View layout={LinearTransition.duration(250)} className="bg-grouped-card">
@@ -121,7 +114,7 @@ export function ConnectionEnvironmentRow(props: {
               {props.environment.environmentLabel}
             </Text>
           </View>
-          {!props.environment.isRelayManaged && props.environment.displayUrl.trim() ? (
+          {!isHostName && props.environment.displayUrl.trim() ? (
             <Text className="text-xs text-foreground-muted" numberOfLines={1}>
               {props.environment.displayUrl}
             </Text>
@@ -197,119 +190,187 @@ export function ConnectionEnvironmentRow(props: {
       </View>
 
       {props.expanded ? (
-        <Animated.View
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(150)}
-          className="gap-3 px-4 pb-4"
-        >
-          {diagnosis ? (
-            <ConnectionDiagnosisDetails
-              hostLabel={props.environment.environmentLabel}
-              diagnosis={diagnosis}
-            />
-          ) : null}
-          {props.environment.isRelayManaged ? (
-            <Text className="text-sm text-foreground-muted">
-              Managed by T3 Connect. Tunnel details update automatically.
-            </Text>
-          ) : (
-            <>
-              <ConnectionFormField
-                label="Label"
-                autoCapitalize="words"
-                autoCorrect={false}
-                placeholder="My MacBook"
-                value={label}
-                onChangeText={setLabel}
-              />
+        <ConnectionEnvironmentEditor
+          key={isHostName ? "host" : "local"}
+          {...props}
+          isHostName={isHostName}
+          enabled={enabled}
+          serverConfig={serverConfig}
+          diagnosis={diagnosis}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}
 
-              <ConnectionFormField
-                label="URL"
-                autoCapitalize="none"
-                autoCorrect={false}
-                keyboardType="url"
-                placeholder="192.168.1.100:8080"
-                value={url}
-                onChangeText={setUrl}
-              />
-            </>
-          )}
+/** Mounted only while expanded, so each opening starts from the latest saved values. */
+function ConnectionEnvironmentEditor(
+  props: ConnectionEnvironmentRowProps & {
+    readonly isHostName: boolean;
+    readonly enabled: boolean;
+    readonly serverConfig: ServerConfig | null;
+    readonly diagnosis: ReturnType<typeof useConnectionDiagnosis>["diagnosis"];
+  },
+) {
+  const { isHostName, enabled, serverConfig, diagnosis } = props;
+  const [draft, setDraft] = useState<{ readonly label?: string; readonly url?: string }>({});
+  const [saving, setSaving] = useState(false);
+  const label =
+    draft.label ??
+    (isHostName
+      ? (serverConfig?.settings.environmentLabel ?? "")
+      : props.environment.environmentLabel);
+  const url = draft.url ?? props.environment.displayUrl;
+  const canUpdateSettings = useAtomValue(
+    serverEnvironment.updateSettings.permissionAtom(props.environment.environmentId, {
+      patch: { environmentLabel: label.trim() },
+    }),
+  );
+  const canEditHost =
+    props.environment.connectionState === "connected" &&
+    serverConfig?.environment.capabilities.environmentLabel === true &&
+    canUpdateSettings;
+  const canSave = !saving && (!isHostName || canEditHost);
+  async function handleSave() {
+    if (!canSave) return;
+    setSaving(true);
+    const result = await props
+      .onUpdate(props.environment.environmentId, {
+        label: label.trim(),
+        displayUrl: url.trim(),
+      })
+      .finally(() => setSaving(false));
+    if (AsyncResult.isSuccess(result)) {
+      props.onToggle();
+      return;
+    }
+    const error = Cause.squash(result.cause);
+    Dialog.alert(
+      "Could not update environment",
+      error instanceof Error ? error.message : "The environment could not be updated.",
+    );
+  }
 
-          {Platform.OS === "android" ? (
-            <View className="flex-row items-center justify-end gap-2">
-              {props.environment.isRelayManaged ? null : (
-                <View className="flex-1">
-                  <Button
-                    label="Save"
-                    tone="primary"
-                    fullWidth
-                    onPress={() => {
-                      void handleSave();
-                    }}
-                  />
-                </View>
-              )}
-              <IconButton
-                accessibilityLabel="Reconnect environment"
-                icon="arrow.clockwise"
-                variant="tonal"
-                disabled={!enabled}
-                onPress={() => props.onReconnect(props.environment.environmentId)}
-              />
-              <IconButton
-                accessibilityLabel="Remove environment"
-                icon="trash"
-                variant="danger"
-                onPress={() => props.onRemove(props.environment.environmentId)}
-              />
-            </View>
-          ) : (
-            <View className="flex-row justify-end gap-2">
-              {props.environment.isRelayManaged ? null : (
-                <Pressable
-                  className="min-h-[42px] flex-1 flex-row items-center justify-center gap-1.5 rounded-[14px] bg-primary px-3.5 py-2.5 active:opacity-70"
-                  onPress={handleSave}
-                >
-                  <SymbolView
-                    name="checkmark"
-                    size={13}
-                    tintColorClassName="accent-primary-foreground"
-                    type="monochrome"
-                  />
-                  <Text className="text-xs font-t3-bold tracking-[0.8px] uppercase text-primary-foreground">
-                    Save
-                  </Text>
-                </Pressable>
-              )}
+  return (
+    <Animated.View
+      entering={FadeIn.duration(200)}
+      exiting={FadeOut.duration(150)}
+      className="gap-3 px-4 pb-4"
+    >
+      {diagnosis ? (
+        <ConnectionDiagnosisDetails
+          hostLabel={props.environment.environmentLabel}
+          diagnosis={diagnosis}
+        />
+      ) : null}
+      <ConnectionFormField
+        label={isHostName ? "Host name" : "Label"}
+        autoCapitalize="words"
+        autoCorrect={false}
+        placeholder="My MacBook"
+        value={label}
+        editable={!saving && (!isHostName || canEditHost)}
+        onChangeText={(value) => {
+          setDraft((previous) => ({ ...previous, label: value }));
+        }}
+      />
 
-              <Pressable
-                className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-input-border bg-input active:opacity-70 disabled:opacity-40"
-                disabled={!enabled}
-                onPress={() => props.onReconnect(props.environment.environmentId)}
-              >
-                <SymbolView
-                  name="arrow.clockwise"
-                  size={14}
-                  tintColorClassName="accent-icon-subtle"
-                  type="monochrome"
-                />
-              </Pressable>
+      {isHostName ? (
+        <Text className="text-sm text-foreground-muted">
+          {props.environment.connectionState !== "connected"
+            ? "Connect to this environment to change its host name."
+            : serverConfig?.environment.capabilities.environmentLabel !== true
+              ? "Update the host server to change its name."
+              : !canUpdateSettings
+                ? "You need permission to update this environment’s settings."
+                : "Shared with all connected clients. Leave empty to use the machine name."}
+        </Text>
+      ) : (
+        <ConnectionFormField
+          label="URL"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+          placeholder="192.168.1.100:8080"
+          value={url}
+          editable={!saving}
+          onChangeText={(value) => {
+            setDraft((previous) => ({ ...previous, url: value }));
+          }}
+        />
+      )}
 
-              <Pressable
-                className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-danger-border bg-danger active:opacity-70"
-                onPress={() => props.onRemove(props.environment.environmentId)}
-              >
-                <SymbolView
-                  name="trash"
-                  size={14}
-                  tintColorClassName="accent-danger-foreground"
-                  type="monochrome"
-                />
-              </Pressable>
-            </View>
-          )}
-        </Animated.View>
-      ) : null}
+      {Platform.OS === "android" ? (
+        <View className="flex-row items-center justify-end gap-2">
+          <View className="flex-1">
+            <Button
+              label="Save"
+              tone="primary"
+              fullWidth
+              disabled={!canSave}
+              onPress={() => {
+                void handleSave();
+              }}
+            />
+          </View>
+          <IconButton
+            accessibilityLabel="Reconnect environment"
+            icon="arrow.clockwise"
+            variant="tonal"
+            disabled={!enabled}
+            onPress={() => props.onReconnect(props.environment.environmentId)}
+          />
+          <IconButton
+            accessibilityLabel="Remove environment"
+            icon="trash"
+            variant="danger"
+            onPress={() => props.onRemove(props.environment.environmentId)}
+          />
+        </View>
+      ) : (
+        <View className="flex-row justify-end gap-2">
+          <Pressable
+            className="min-h-[42px] flex-1 flex-row items-center justify-center gap-1.5 rounded-[14px] bg-primary px-3.5 py-2.5 active:opacity-70 disabled:opacity-40"
+            disabled={!canSave}
+            onPress={handleSave}
+          >
+            <SymbolView
+              name="checkmark"
+              size={13}
+              tintColorClassName="accent-primary-foreground"
+              type="monochrome"
+            />
+            <Text className="text-xs font-t3-bold tracking-[0.8px] uppercase text-primary-foreground">
+              Save
+            </Text>
+          </Pressable>
+
+          <Pressable
+            className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-input-border bg-input active:opacity-70 disabled:opacity-40"
+            disabled={!enabled}
+            onPress={() => props.onReconnect(props.environment.environmentId)}
+          >
+            <SymbolView
+              name="arrow.clockwise"
+              size={14}
+              tintColorClassName="accent-icon-subtle"
+              type="monochrome"
+            />
+          </Pressable>
+
+          <Pressable
+            className="h-[42px] w-[42px] items-center justify-center rounded-[14px] border border-danger-border bg-danger active:opacity-70"
+            onPress={() => props.onRemove(props.environment.environmentId)}
+          >
+            <SymbolView
+              name="trash"
+              size={14}
+              tintColorClassName="accent-danger-foreground"
+              type="monochrome"
+            />
+          </Pressable>
+        </View>
+      )}
     </Animated.View>
   );
 }