Commit 5e961d3d7fc07ff1ba998bfd20bb366c2ab8c9a9 | the-knife

author	Theo Browne <me@t3.gg> 2026-09-13 19:40:19-07:00
committer	GitHub <noreply@github.com> 2026-09-13 19:40:19-07:00
log	5e961d3d7fc07ff1ba998bfd20bb366c2ab8c9a9
tree	d4d73b0361d657d22bf4aa54ca9e1bd2e55a6666
parent	2d737465027b18cafd0c4704e9025b124bc94b2c
signature	Signed by PGP key B5690EEEBB952194

feat(web): flatten the connections page into one environments list (#11672)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

13 files changed, 720 insertions(+), 586 deletions(-)

apps
- web
  - src
    components
    cloud
    CloudEnvironmentConnectList.test.tsx
    CloudEnvironmentConnectList.tsx
    settings
    ConnectionsSettings.tsx
    EnvironmentIconPicker.tsx
    EnvironmentRow.tsx
    FoldedSettingsSection.tsx
    GitHubRoutingSettings.test.ts
    GitHubRoutingSettings.tsx
    LoadBalancingSettings.test.ts
    LoadBalancingSettings.tsx
    settingsSearch.ts
docs
- user
  - remote-access.md
  - source-control.md

apps/web/src/components/cloud/CloudEnvironmentConnectList.test.tsx+3-3

apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx+6-5

 @@ -288,12 +288,13 @@ export function CloudEnvironmentConnectRows({
     const statusText = savedConnection
       ? savedConnection.statusText
       : availability === "online"
-        ? "Available · Relay online"
+        ? "T3 Connect · Not added · Relay online"
         : availability === "offline"
-          ? "Available · Relay offline"
+          ? "T3 Connect · Not added · Relay offline"
           : availability === "checking"
-            ? "Available · Checking relay status…"
+            ? "T3 Connect · Not added · Checking relay status…"
-            : (Option.getOrNull(error)?.message ?? "Available · Relay status unavailable");
+            : (Option.getOrNull(error)?.message ??
+              "T3 Connect · Not added · Relay status unavailable");
     if (selection) {
       return (
         <label
 @@ -386,7 +387,7 @@ export function CloudEnvironmentConnectRows({
               disabled={connectingEnvironmentIds.size > 0}
               onClick={() => void connectEnvironment(environment)}
             >
-              {connectingEnvironmentIds.has(environment.environmentId) ? "Connecting…" : "Connect"}
+              {connectingEnvironmentIds.has(environment.environmentId) ? "Adding…" : "Add"}
             </Button>
           )}
         </div>

apps/web/src/components/settings/ConnectionsSettings.tsx+268-371

 @@ -6,7 +6,6 @@ import {
   TerminalIcon,
 } from "lucide-react";
 import { useAtomValue } from "@effect/atom-react";
-import { useLocation } from "@tanstack/react-router";
 import { Atom } from "effect/unstable/reactivity";
 import {
   type KeyboardEvent,
 @@ -42,7 +41,7 @@ import {
   type EnvironmentId,
   resolveEnvironmentMachineKind,
 } from "@t3tools/contracts";
-import { connectionStatusText, connectionStatusTitle } from "@t3tools/client-runtime/connection";
+import { connectionStatusText } from "@t3tools/client-runtime/connection";
 import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
 @@ -67,8 +66,14 @@ import {
   useRelativeTimeTick,
 } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
-import { EnvironmentIconPicker } from "./EnvironmentIconPicker";
+import { EnvironmentIconMenu } from "./EnvironmentIconPicker";
-import { LoadBalancingPreference, LoadBalancingSettings } from "./LoadBalancingSettings";
+import {
+  EnvironmentRow,
+  environmentTransportLabel,
+  formatDesktopSshTarget,
+} from "./EnvironmentRow";
+import { FoldedSettingsSection } from "./FoldedSettingsSection";
+import { LoadBalancingSettings } from "./LoadBalancingSettings";
 import { GitHubRoutingSettings } from "./GitHubRoutingSettings";
 import { Input } from "../ui/input";
 import { CommandShortcut } from "../ui/command";
 @@ -106,7 +111,7 @@ import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { QRCodeSvg } from "../ui/qr-code";
 import { Spinner } from "../ui/spinner";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
-import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
+import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../ui/menu";
 import { Switch } from "../ui/switch";
 import { stackedThreadToast, toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 @@ -158,7 +163,7 @@ import {
 import { requestConfirmDialog } from "~/confirmDialog";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { primaryServerKeybindingsAtom, serverEnvironment } from "~/state/server";
-import { ConnectionStatusDot, connectionPhaseDotClassName } from "../ConnectionStatusDot";
+import { ConnectionStatusDot } from "../ConnectionStatusDot";
 import {
   ServerUpdateAction,
   ServerUpdateProgress,
 @@ -288,11 +293,6 @@ function AccessScopeSummary({
   );
 }
-function formatDesktopSshTarget(target: DesktopSshEnvironmentTarget): string {
-  const authority = target.username ? `${target.username}@${target.hostname}` : target.hostname;
-  return target.port ? `${authority}:${target.port}` : authority;
-}
 function parseManualDesktopSshTarget(input: {
   readonly host: string;
   readonly username: string;
 @@ -436,6 +436,20 @@ function sortDesktopPairingLinks(links: ReadonlyArray<ServerPairingLinkRecord>)
   );
 }
+/** Closed-header summary for the Authorized clients fold. */
+function summarizeAuthorizedClients(
+  sessions: ReadonlyArray<ServerClientSessionRecord>,
+  links: ReadonlyArray<ServerPairingLinkRecord>,
+): string {
+  const parts = [
+    `${sessions.length} ${sessions.length === 1 ? "client" : "clients"}`,
+    links.length > 0
+      ? `${links.length} ${links.length === 1 ? "pairing link" : "pairing links"}`
+      : null,
+  ];
+  return parts.filter((part): part is string => part !== null).join(" · ");
+}
 function sortDesktopClientSessions(sessions: ReadonlyArray<ServerClientSessionRecord>) {
   return [...sessions].toSorted((left, right) => {
     if (left.current !== right.current) {
 @@ -1419,6 +1433,44 @@ type SavedBackendListRowProps = {
   onRemove: (environment: EnvironmentPresentation) => void;
 };
+/**
+ * Status word for a row subtitle: "Reconnecting: <reason>" instead of the
+ * long-form sentence, since the row has one line and the full text is one
+ * hover away.
+ */
+function savedBackendStatus(environment: EnvironmentPresentation): {
+  readonly text: string;
+  readonly tone: "muted" | "error";
+} {
+  if (!environment.entry.enabled) return { text: "Off", tone: "muted" };
+  const { connection } = environment;
+  switch (connection.phase) {
+    case "connected":
+      return { text: "Connected", tone: "muted" };
+    case "connecting":
+      return { text: "Connecting", tone: "muted" };
+    case "reconnecting":
+      return {
+        text: connection.error ? `Reconnecting: ${connection.error}` : "Reconnecting",
+        tone: "error",
+      };
+    case "error":
+      return {
+        text: connection.error ? `Connection failed: ${connection.error}` : "Connection failed",
+        tone: "error",
+      };
+    case "offline":
+      return { text: "Offline", tone: "muted" };
+    case "available":
+      return { text: "Not connected", tone: "muted" };
+  }
+}
+/**
+ * One added machine in the Environments list. The switch is the main action;
+ * the update icon appears only when that machine can take an update; the
+ * row menu holds the icon override, trace ID, and removal.
+ */
 function SavedBackendListRow({
   environment,
   removingEnvironmentId,
 @@ -1427,19 +1479,8 @@ function SavedBackendListRow({
 }: SavedBackendListRowProps) {
   const environmentId = environment.environmentId;
   const enabled = environment.entry.enabled;
-  const connectionState = environment.connection.phase;
+  const isConnected = environment.connection.phase === "connected";
-  const isConnected = connectionState === "connected";
   const isRemoving = removingEnvironmentId === environmentId;
-  const stateDotClassName = !enabled
-    ? "bg-muted-foreground/40"
-    : connectionState === "connected"
-      ? "bg-success"
-      : connectionState === "connecting" || connectionState === "reconnecting"
-        ? "bg-warning"
-        : connectionState === "error"
-          ? "bg-destructive"
-          : "bg-muted-foreground/40";
-  const statusTooltip = enabled ? connectionStatusText(environment.connection) : "Off";
   const errorTraceId = environment.connection.traceId;
   const { copyToClipboard: copyTraceIdToClipboard } = useCopyToClipboard<{ traceId: string }>({
     target: "trace ID",
 @@ -1470,25 +1511,18 @@ function SavedBackendListRow({
   const serverUpdateState = useAtomValue(serverEnvironment.updateStateAtom(environmentId));
   const resumingServerUpdate =
     serverUpdateState.status === "running" && serverUpdateState.stage === "resuming";
-  const sshTarget =
+  const status = savedBackendStatus(environment);
-    environment.entry.target._tag === "SshConnectionTarget" &&
+  const serverVersion = environment.serverConfig?.environment.serverVersion ?? null;
-    Option.isSome(environment.entry.profile) &&
+  const subtitleText = [
-    environment.entry.profile.value._tag === "SshConnectionProfile"
+    environmentTransportLabel(environment),
-      ? environment.entry.profile.value.target
+    resumingServerUpdate ? "Restarting" : status.text,
-      : null;
+    enabled && versionMismatch ? serverVersion : null,
-  const metadataBits = [
+  ]
-    sshTarget ? `SSH ${formatDesktopSshTarget(sshTarget)}` : null,
+    .filter((value): value is string => value !== null)
-    environment.relayManaged ? "T3 Connect" : null,
+    .join(" · ");
-    enabled ? null : "Off",
-  ].filter((value): value is string => value !== null);
-  // The WSL backend is a desktop-managed local backend (it surfaces as a bearer
-  // environment whose connection id is prefixed "local:"), not a remote
-  // environment you connect to or remove here — its lifecycle is driven by the
-  // WSL on/off + distro picker on this page.
-  const isWslEnvironment = isDesktopLocalConnectionTarget(environment.entry.target);
   // Only a connected, enabled machine can take a remote update; a switched-off
-  // one keeps the "update available" note so the icon is not a surprise later.
+  // one keeps the version note so the icon is not a surprise later.
   const showUpdateAction =
     enabled &&
     isConnected &&
 @@ -1496,153 +1530,96 @@ function SavedBackendListRow({
     (serverUpdateState.status === "idle" || serverUpdateState.status === "failed");
   return (
-    <div className={cn(ITEM_ROW_CLASSNAME, !enabled && "opacity-60")}>
+    <EnvironmentRow
-      <div className={ITEM_ROW_INNER_CLASSNAME}>
+      kind={resolveEnvironmentMachineKind(environment.serverConfig)}
-        <div className="min-w-0 flex-1 space-y-1">
+      label={environment.label}
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+      dimmed={!enabled}
-            <div className="flex min-h-5 min-w-0 max-w-full items-center gap-1.5">
+      subtitle={
-              <ConnectionStatusDot
+        <Tooltip>
-                tooltipText={statusTooltip}
+          <TooltipTrigger
-                dotClassName={stateDotClassName}
+            render={
-                pingClassName={
+              <span
-                  enabled &&
+                className={cn(
-                  (connectionState === "connecting" || connectionState === "reconnecting")
+                  "block truncate",
-                    ? "bg-warning/60 duration-2000"
+                  enabled && status.tone === "error" && !resumingServerUpdate && "text-destructive",
-                    : null
+                )}
-                }
-              />
-              <EnvironmentMachineIcon
-                aria-hidden
-                kind={resolveEnvironmentMachineKind(environment.serverConfig)}
-                className="size-3.5 shrink-0 text-muted-foreground"
               />
-              <h3 className="min-w-0 truncate text-sm font-medium text-foreground">
+            }
-                {environment.label}
+          >
-              </h3>
+            {subtitleText}
-            </div>
+          </TooltipTrigger>
-            {isConnected ? (
+          <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
-              <div className="w-full sm:w-auto">
+            {enabled ? connectionStatusText(environment.connection) : "Switched off"}
-                <EnvironmentIconPicker
+            {versionMismatch
-                  environmentId={environmentId}
+              ? `\nUpdate available: ${versionMismatch.serverVersion} → ${versionMismatch.clientVersion}`
-                  serverConfig={environment.serverConfig}
+              : ""}
-                  size="xs"
+          </TooltipPopup>
-                />
+        </Tooltip>
-              </div>
+      }
-            ) : null}
+      below={
+        serverUpdateState.status !== "idle" ? (
+          <div className="mt-1 max-w-md">
+            <ServerUpdateProgress state={serverUpdateState} />
           </div>
-          {metadataBits.length > 0 ? (
+        ) : null
-            <p className="truncate text-xs text-muted-foreground">{metadataBits.join(" · ")}</p>
+      }
-          ) : null}
+    >
-          {serverUpdateState.status !== "idle" ? (
+      {showUpdateAction ? (
-            <div className="max-w-md">
+        <ServerUpdateAction
-              <ServerUpdateProgress state={serverUpdateState} />
+          environmentId={environmentId}
-            </div>
+          serverLabel={`${environment.label} server`}
-          ) : versionMismatch ? (
+          selfUpdate={resolveServerSelfUpdateCapability(environment.serverConfig)}
-            <Tooltip>
+          desktopAppUpdate={supportsDesktopAppUpdate(environment.serverConfig)}
-              <TooltipTrigger
+          threadContinuation={supportsServerUpdateThreadContinuation(environment.serverConfig)}
-                render={
+          targetVersion={versionMismatch.clientVersion}
-                  <button
+          label={serverUpdateState.status === "failed" ? "Retry update" : "Update"}
-                    type="button"
+          appearance="icon"
-                    className="w-fit cursor-help rounded-sm text-left text-muted-foreground text-xs"
+        />
-                  >
+      ) : null}
-                    Server update available
+      <Tooltip>
-                  </button>
+        <TooltipTrigger
-                }
+          render={
-              />
+            <Switch
-              <TooltipPopup side="top">
+              size="sm"
-                {versionMismatch.serverVersion} <span aria-hidden="true">→</span>{" "}
+              checked={enabled}
-                {versionMismatch.clientVersion}
+              disabled={isRemoving}
-              </TooltipPopup>
+              aria-label={`${enabled ? "Switch off" : "Switch on"} ${environment.label}`}
-            </Tooltip>
+              onCheckedChange={(checked) => onSetEnabled(environmentId, checked)}
-          ) : null}
+            />
-          {enabled && environment.connection.error && !resumingServerUpdate ? (
+          }
-            <p className="flex min-w-0 items-center gap-2 text-destructive text-xs">
+        />
-              <span className="min-w-0 break-words">
+        <TooltipPopup side="top">{enabled ? "Switch off" : "Switch on"}</TooltipPopup>
-                {connectionStatusText(environment.connection)}
+      </Tooltip>
-              </span>
+      <Menu>
-              {errorTraceId ? (
+        <MenuTrigger
-                <button
+          render={
-                  type="button"
+            <Button
-                  className="shrink-0 underline underline-offset-2"
+              type="button"
-                  onClick={() => copyTraceId(errorTraceId)}
+              variant="ghost"
-                >
+              size="icon-xs"
-                  Copy trace ID
+              className="text-muted-foreground hover:text-foreground"
-                </button>
+              disabled={isRemoving}
-              ) : null}
+              aria-label={`More actions for ${environment.label}`}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex w-full shrink-0 items-center gap-1 sm:w-auto sm:justify-end">
-          {showUpdateAction ? (
-            <ServerUpdateAction
-              environmentId={environmentId}
-              serverLabel={`${environment.label} server`}
-              selfUpdate={resolveServerSelfUpdateCapability(environment.serverConfig)}
-              desktopAppUpdate={supportsDesktopAppUpdate(environment.serverConfig)}
-              threadContinuation={supportsServerUpdateThreadContinuation(environment.serverConfig)}
-              targetVersion={versionMismatch.clientVersion}
-              label={serverUpdateState.status === "failed" ? "Retry update" : "Update"}
-              appearance="icon"
             />
+          }
+        >
+          <EllipsisIcon className="size-3.5" />
+        </MenuTrigger>
+        <MenuPopup align="end" className="min-w-52">
+          <EnvironmentIconMenu
+            environmentId={environmentId}
+            serverConfig={environment.serverConfig}
+          />
+          {errorTraceId ? (
+            <MenuItem onClick={() => copyTraceId(errorTraceId)}>Copy trace ID</MenuItem>
           ) : null}
-          {isWslEnvironment ? (
+          <MenuSeparator />
-            <Tooltip>
+          <MenuItem variant="destructive" onClick={() => onRemove(environment)}>
-              <TooltipTrigger
+            {isRemoving ? "Removing…" : "Remove from this device…"}
-                render={
+          </MenuItem>
-                  <Button size="xs" variant="outline" disabled>
+        </MenuPopup>
-                    Managed locally
+      </Menu>
-                  </Button>
+    </EnvironmentRow>
-                }
-              />
-              <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
-                Select the primary environment to turn the WSL backend on or off.
-              </TooltipPopup>
-            </Tooltip>
-          ) : (
-            <>
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Switch
-                      size="sm"
-                      checked={enabled}
-                      disabled={isRemoving}
-                      aria-label={`${enabled ? "Switch off" : "Switch on"} ${environment.label}`}
-                      onCheckedChange={(checked) => onSetEnabled(environmentId, checked)}
-                    />
-                  }
-                />
-                <TooltipPopup side="top">{enabled ? "Switch off" : "Switch on"}</TooltipPopup>
-              </Tooltip>
-              <Menu>
-                <MenuTrigger
-                  render={
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon-xs"
-                      className="text-muted-foreground hover:text-foreground"
-                      disabled={isRemoving}
-                      aria-label={`More actions for ${environment.label}`}
-                    />
-                  }
-                >
-                  <EllipsisIcon className="size-3.5" />
-                </MenuTrigger>
-                <MenuPopup align="end" className="min-w-52">
-                  {errorTraceId ? (
-                    <MenuItem onClick={() => copyTraceId(errorTraceId)}>Copy trace ID</MenuItem>
-                  ) : null}
-                  <MenuItem variant="destructive" onClick={() => onRemove(environment)}>
-                    {isRemoving ? "Removing…" : "Remove from this device…"}
-                  </MenuItem>
-                </MenuPopup>
-              </Menu>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
   );
 }
 @@ -1817,19 +1794,6 @@ export function ConnectionsSettings() {
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const { environments } = useEnvironments();
   const primaryEnvironment = usePrimaryEnvironment();
-  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<EnvironmentId | null>(null);
-  const searchTargetId = useLocation({ select: (location) => location.hash.replace(/^#/, "") });
-  const [handledSearchTargetId, setHandledSearchTargetId] = useState<string | null>(null);
-  if (primaryEnvironment && handledSearchTargetId !== searchTargetId) {
-    setHandledSearchTargetId(searchTargetId);
-    if (["connections-environment", "wsl-backend"].includes(searchTargetId)) {
-      setSelectedEnvironmentId(primaryEnvironment.environmentId);
-    }
-  }
-  const selectedEnvironment =
-    environments.find((environment) => environment.environmentId === selectedEnvironmentId) ??
-    primaryEnvironment ??
-    environments[0];
   const connectPairing = useAtomCommand(connectPairingAtom, { reportFailure: false });
   const connectSshEnvironment = useAtomCommand(connectSshEnvironmentAtom, {
     reportFailure: false,
 @@ -1846,13 +1810,24 @@ export function ConnectionsSettings() {
       ? (primarySessionState.data.scopes ?? null)
       : null;
   const currentAuthPolicy = desktopBridge ? null : (primarySessionState.data?.auth.policy ?? null);
+  // Catalog order is the order the machines were added; rows never jump when
+  // one is switched off.
   const savedEnvironments = useMemo(
     () =>
-      environments
+      environments.filter(
-        .filter((environment) => environment.entry.target._tag !== "PrimaryConnectionTarget")
+        (environment) => environment.entry.target._tag !== "PrimaryConnectionTarget",
-        .toSorted((left, right) => left.label.localeCompare(right.label)),
+      ),
     [environments],
   );
+  // The WSL backend is managed from the WSL row under this machine, so it has
+  // no row of its own in the list.
+  const listedEnvironments = useMemo(
+    () =>
+      savedEnvironments.filter(
+        (environment) => !isDesktopLocalConnectionTarget(environment.entry.target),
+      ),
+    [savedEnvironments],
+  );
   // Machines "Update all" can reach: switched on, connected, behind the client
   // version, remotely updatable, and not already mid-update. The button only
   // renders when this list is non-empty.
 @@ -1901,10 +1876,15 @@ export function ConnectionsSettings() {
     [savedServerUpdateStates],
   );
   // Switched-off machines never receive threads, so they stay out of the
-  // load balancing list.
+  // load balancing and GitHub sharing lists. The WSL backend has no row in
+  // the Environments list but does take threads, so it stays in here. This
+  // machine leads the list.
   const loadBalancingEnvironments = useMemo(
-    () => environments.filter((environment) => environment.entry.enabled),
+    () => [
-    [environments],
+      ...(primaryEnvironment ? [primaryEnvironment] : []),
+      ...savedEnvironments.filter((environment) => environment.entry.enabled),
+    ],
+    [primaryEnvironment, savedEnvironments],
   );
   const savedDesktopSshEnvironmentKeys = useMemo(() => {
     const keys = new Set<string>();
 @@ -3259,69 +3239,78 @@ export function ConnectionsSettings() {
           <SettingsSection
             {...searchableSetting("connections-environment")}
             title={primaryEnvironment?.label ?? "Primary environment"}
-          >
+            icon={
-            {primaryVersionMismatch || primaryServerUpdateState.status !== "idle" ? (
+              <EnvironmentMachineIcon
-              <SettingsRow
+                aria-hidden
-                title={
+                kind={resolveEnvironmentMachineKind(primaryServerConfig)}
-                  primaryServerUpdateState.status === "failed"
+                className="size-4"
-                    ? "Update failed"
+              />
-                    : primaryServerUpdateState.status === "running"
+            }
-                      ? "Updating server"
+            headerAction={
-                      : "Server update available"
+              primaryEnvironmentId !== null ? (
-                }
+                <Menu>
-                description={
+                  <MenuTrigger
-                  primaryServerUpdateState.status !== "idle" ? (
+                    render={
-                    <ServerUpdateProgress state={primaryServerUpdateState} />
+                      <Button
-                  ) : primaryVersionMismatch ? (
+                        type="button"
-                    <Tooltip>
+                        variant="ghost"
-                      <TooltipTrigger
+                        size="icon-xs"
-                        render={
+                        className="text-muted-foreground hover:text-foreground"
-                          <button type="button" className="w-fit cursor-help rounded-sm text-left">
+                        aria-label="More actions for this machine"
-                            Update to match this client.
-                          </button>
-                        }
                       />
-                      <TooltipPopup side="top">
+                    }
-                        {primaryVersionMismatch.serverVersion} <span aria-hidden="true">→</span>{" "}
+                  >
-                        {primaryVersionMismatch.clientVersion}
+                    <EllipsisIcon className="size-3.5" />
-                      </TooltipPopup>
+                  </MenuTrigger>
-                    </Tooltip>
+                  <MenuPopup align="end" className="min-w-52">
-                  ) : null
+                    <EnvironmentIconMenu
-                }
-                control={
-                  primaryVersionMismatch &&
-                  primaryEnvironmentId !== null &&
-                  primaryServerUpdateState.status !== "running" ? (
-                    <ServerUpdateAction
-                      size="sm"
                       environmentId={primaryEnvironmentId}
-                      serverLabel={
+                      serverConfig={primaryServerConfig}
-                        primaryEnvironment ? `${primaryEnvironment.label} server` : "server"
-                      }
-                      selfUpdate={resolveServerSelfUpdateCapability(primaryServerConfig)}
-                      desktopAppUpdate={supportsDesktopAppUpdate(primaryServerConfig)}
-                      threadContinuation={supportsServerUpdateThreadContinuation(
-                        primaryServerConfig,
-                      )}
-                      targetVersion={primaryVersionMismatch.clientVersion}
-                      label={primaryServerUpdateState.status === "failed" ? "Retry" : "Update"}
                     />
-                  ) : undefined
+                  </MenuPopup>
-                }
+                </Menu>
-              />
+              ) : null
-            ) : null}
+            }
-            {primaryEnvironmentId !== null ? (
+          >
-              <SettingsRow
+            <SettingsRow
-                {...searchableSetting("environment-icon")}
+              title="Version"
-                description="The machine other devices see this environment as. Automatic uses what the server detected."
+              description={
-                control={
+                primaryServerUpdateState.status !== "idle" ? (
-                  <EnvironmentIconPicker
+                  <ServerUpdateProgress state={primaryServerUpdateState} />
+                ) : (
+                  [
+                    primaryServerConfig?.environment.serverVersion ?? null,
+                    primaryEnvironment?.displayUrl ?? null,
+                  ]
+                    .filter((value): value is string => value !== null)
+                    .join(" · ") || "Loading…"
+                )
+              }
+              control={
+                primaryVersionMismatch &&
+                primaryEnvironmentId !== null &&
+                primaryServerUpdateState.status !== "running" ? (
+                  <ServerUpdateAction
+                    size="sm"
                     environmentId={primaryEnvironmentId}
-                    serverConfig={primaryServerConfig}
+                    serverLabel={
+                      primaryEnvironment ? `${primaryEnvironment.label} server` : "server"
+                    }
+                    selfUpdate={resolveServerSelfUpdateCapability(primaryServerConfig)}
+                    desktopAppUpdate={supportsDesktopAppUpdate(primaryServerConfig)}
+                    threadContinuation={supportsServerUpdateThreadContinuation(primaryServerConfig)}
+                    targetVersion={primaryVersionMismatch.clientVersion}
+                    label={
+                      primaryServerUpdateState.status === "failed"
+                        ? "Retry update"
+                        : `Update to ${primaryVersionMismatch.clientVersion}`
+                    }
                   />
-                }
+                ) : primaryServerUpdateState.status === "idle" && primaryServerConfig ? (
-              />
+                  <span className="text-xs text-muted-foreground">Up to date</span>
-            ) : null}
+                ) : undefined
+              }
+            />
             {desktopBridge ? (
               <>
                 {renderNetworkAccessRow()}
 @@ -3339,10 +3328,14 @@ export function ConnectionsSettings() {
           </SettingsSection>
           {isLocalBackendRemotelyReachable ? (
-            <SettingsSection
+            <FoldedSettingsSection
+              id="authorized-clients"
               title="Authorized clients"
-              className="[&>div:first-child]:flex-wrap"
+              summary={summarizeAuthorizedClients(
-              headerAction={
+                desktopClientSessions,
+                visibleDesktopPairingLinks,
+              )}
+              control={
                 <AuthorizedClientsHeaderAction
                   onPairingLinkCreated={handlePairingLinkCreated}
                   clientSessions={desktopClientSessions}
 @@ -3359,7 +3352,7 @@ export function ConnectionsSettings() {
               >
                 {renderAuthorizedClients("current")}
               </ScrollArea>
-            </SettingsSection>
+            </FoldedSettingsSection>
           ) : null}
           <AlertDialog
             open={isDesktopServerExposureDialogOpen}
 @@ -3649,10 +3642,10 @@ export function ConnectionsSettings() {
   return (
     <SettingsPageContainer width="wide">
+      {primarySettings}
       <SettingsSection
         {...searchableSetting("remote-environments")}
         title="Environments"
-        variant="plain"
         headerAction={
           <div className="flex items-center gap-1">
             {savedServerUpdateTargets.length > 0 ? (
 @@ -3725,118 +3718,22 @@ export function ConnectionsSettings() {
           </div>
         }
       >
-        <div className="overflow-hidden rounded-xl border border-border/60 bg-card/40 shadow-xs/5 lg:grid lg:h-[min(34rem,calc(100dvh-18rem))] lg:min-h-[28rem] lg:grid-cols-[17rem_minmax(0,1fr)]">
+        {listedEnvironments.map((environment) => (
-          <div className="border-b border-border/60 bg-muted/10 lg:flex lg:min-h-0 lg:flex-col lg:border-r lg:border-b-0">
+          <SavedBackendListRow
-            <ScrollArea
+            key={environment.environmentId}
-              scrollFade
+            environment={environment}
-              chainVerticalScroll
+            removingEnvironmentId={removingSavedEnvironmentId}
-              className="max-h-64 lg:max-h-none lg:min-h-0 lg:flex-1"
+            onSetEnabled={handleSetSavedBackendEnabled}
-            >
+            onRemove={handleRemoveSavedBackend}
-              <div className="divide-y divide-border/50" aria-label="Environments">
+          />
-                {(primaryEnvironment
+        ))}
-                  ? [primaryEnvironment, ...savedEnvironments]
-                  : savedEnvironments
-                ).map((environment) => {
-                  const selected = environment.environmentId === selectedEnvironment?.environmentId;
-                  const isPrimary = environment.entry.target._tag === "PrimaryConnectionTarget";
-                  return (
-                    <button
-                      key={environment.environmentId}
-                      type="button"
-                      aria-label={"Select " + environment.label}
-                      aria-pressed={selected}
-                      onClick={() => setSelectedEnvironmentId(environment.environmentId)}
-                      className={cn(
-                        "flex min-h-18 w-full cursor-pointer items-start gap-3 px-3 py-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:px-4",
-                        selected ? "bg-muted/45" : "hover:bg-muted/25",
-                        !environment.entry.enabled && !selected && "opacity-60",
-                      )}
-                    >
-                      <EnvironmentMachineIcon
-                        aria-hidden
-                        kind={resolveEnvironmentMachineKind(environment.serverConfig)}
-                        className="mt-0.5 size-4 shrink-0 text-muted-foreground"
-                      />
-                      <span className="min-w-0 flex-1 space-y-1">
-                        <span className="flex items-center gap-2">
-                          <span className="truncate text-sm font-medium">{environment.label}</span>
-                          {isPrimary ? (
-                            <span className="shrink-0 text-[10px] text-muted-foreground">
-                              Primary
-                            </span>
-                          ) : null}
-                        </span>
-                        <Tooltip>
-                          <TooltipTrigger
-                            render={
-                              <span className="block truncate text-xs text-muted-foreground" />
-                            }
-                          >
-                            {environment.displayUrl ?? "T3 Connect"}
-                          </TooltipTrigger>
-                          <TooltipPopup>{environment.displayUrl ?? "T3 Connect"}</TooltipPopup>
-                        </Tooltip>
-                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                          <span
-                            aria-hidden
-                            className={cn(
-                              "size-1.5 shrink-0 rounded-full",
-                              !environment.entry.enabled
-                                ? "bg-muted-foreground/40"
-                                : connectionPhaseDotClassName(environment.connection.phase),
-                            )}
-                          />
-                          {environment.entry.enabled
-                            ? connectionStatusTitle(environment.connection)
-                            : "Off"}
-                        </span>
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </ScrollArea>
-          </div>
-          <ScrollArea
-            key={selectedEnvironment?.environmentId}
-            scrollFade
-            chainVerticalScroll
-            className="min-w-0 lg:min-h-0 lg:h-full"
-          >
-            {selectedEnvironment ? (
-              <div className="space-y-6 p-4">
-                {selectedEnvironment.entry.target._tag === "PrimaryConnectionTarget" ? (
-                  primarySettings
-                ) : (
-                  <SettingsSection title="Connection">
-                    <SavedBackendListRow
-                      key={selectedEnvironment.environmentId}
-                      environment={selectedEnvironment}
-                      removingEnvironmentId={removingSavedEnvironmentId}
-                      onSetEnabled={handleSetSavedBackendEnabled}
-                      onRemove={handleRemoveSavedBackend}
-                    />
-                  </SettingsSection>
-                )}
-                {selectedEnvironment.entry.enabled && loadBalancingEnvironments.length > 1 ? (
-                  <SettingsSection title="Thread placement">
-                    <LoadBalancingPreference environment={selectedEnvironment} />
-                  </SettingsSection>
-                ) : null}
-                <GitHubRoutingSettings
-                  environments={environments}
-                  selectedEnvironmentId={selectedEnvironment.environmentId}
-                />
-              </div>
-            ) : null}
-          </ScrollArea>
-        </div>
         <CloudRemoteEnvironmentRows
           primaryEnvironmentId={primaryEnvironmentId}
           savedEnvironments={savedEnvironments}
         />
       </SettingsSection>
       <LoadBalancingSettings environments={loadBalancingEnvironments} />
+      <GitHubRoutingSettings environments={loadBalancingEnvironments} />
     </SettingsPageContainer>
   );
 }

apps/web/src/components/settings/EnvironmentIconPicker.tsx+57-81

 @@ -5,7 +5,6 @@ import {
   type EnvironmentId,
   type ServerConfig,
 } from "@t3tools/contracts";
-import { useCallback } from "react";
 import { isElectron } from "../../env";
 import { usePrimarySessionState } from "../../environments/primary";
 @@ -13,15 +12,20 @@ import { useUpdateEnvironmentSettings } from "../../hooks/useSettings";
 import { usePrimaryEnvironmentId } from "../../state/environments";
 import { useEnvironmentSessionState } from "../../state/session";
 import { ENVIRONMENT_MACHINE_KIND_LABELS, EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import {
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSub,
+  MenuSubPopup,
+  MenuSubTrigger,
+} from "../ui/menu";
 import {
   resolvePrimaryOperateAccess,
   resolveRemoteOperateAccess,
 } from "./ProviderSettingsPanel.logic";
-const AUTOMATIC_VALUE = "automatic";
 /**
  * Why the picker is inert, in the order the user can do something about it.
  * Null means it can be changed.
 @@ -68,94 +72,66 @@ function useEnvironmentOperateAccess(environmentId: EnvironmentId) {
 }
 /**
- * Picks the machine glyph an environment wears everywhere it is listed.
+ * "Icon" submenu for an environment's row menu. Lists the machine kinds with
- * "Automatic" clears the override so the server's own detection shows
+ * the server's own detection marked, so the user can tell whether detection
- * through; the label says what that currently resolves to so the user can
+ * got it right before overriding. Picking the detected kind clears the
- * tell whether detection got it right before overriding. The control stays
+ * override. Locked environments show the reason as a disabled item instead of
- * visible while locked so the current icon still reads, the same way
+ * hiding the submenu, so the current icon still reads.
- * server-scoped rows go inert instead of disappearing.
  */
-export function EnvironmentIconPicker({
+export function EnvironmentIconMenu({
   environmentId,
   serverConfig,
-  size = "sm",
 }: {
   readonly environmentId: EnvironmentId;
   readonly serverConfig: ServerConfig | null;
-  readonly size?: "xs" | "sm";
 }) {
   const updateSettings = useUpdateEnvironmentSettings(environmentId);
   const operateAccess = useEnvironmentOperateAccess(environmentId);
   const lock = resolveEnvironmentIconPickerLock({ serverConfig, operateAccess });
-  const override = serverConfig?.settings.environmentIcon ?? null;
+  // With no detection the server falls back to "server", so picking that
-  const detected = serverConfig?.environment.platform.machine ?? null;
+  // kind clears the override the same way picking the detected kind does.
+  const detected = serverConfig?.environment.platform.machine ?? "server";
   const resolved = resolveEnvironmentMachineKind(serverConfig);
-  const value = override ?? AUTOMATIC_VALUE;
-  const automaticLabel =
-    detected === null ? "Automatic" : `Automatic (${ENVIRONMENT_MACHINE_KIND_LABELS[detected]})`;
-  const handleValueChange = useCallback(
-    (next: string | null) => {
-      if (next === null) return;
-      if (next === AUTOMATIC_VALUE) {
-        updateSettings({ environmentIcon: null });
-      } else if (isEnvironmentMachineKind(next)) {
-        updateSettings({ environmentIcon: next });
-      }
-    },
-    [updateSettings],
-  );
-  const select = (
-    <Select value={value} onValueChange={handleValueChange} disabled={lock !== null}>
-      <SelectTrigger size={size} className="w-full sm:w-52" aria-label="Environment icon">
-        <SelectValue>
-          <span className="flex min-w-0 items-center gap-2">
-            <EnvironmentMachineIcon kind={resolved} className="size-3.5 shrink-0" />
-            <span className="truncate">
-              {override === null ? automaticLabel : ENVIRONMENT_MACHINE_KIND_LABELS[override]}
-            </span>
-          </span>
-        </SelectValue>
-      </SelectTrigger>
-      <SelectPopup align="end" alignItemWithTrigger={false}>
-        <SelectItem hideIndicator value={AUTOMATIC_VALUE}>
-          <span className="flex min-w-0 items-center gap-2">
-            <EnvironmentMachineIcon kind={detected ?? "server"} className="size-3.5 shrink-0" />
-            <span className="truncate">{automaticLabel}</span>
-          </span>
-        </SelectItem>
-        {ENVIRONMENT_MACHINE_KINDS.map((kind) => (
-          <SelectItem hideIndicator key={kind} value={kind}>
-            <span className="flex min-w-0 items-center gap-2">
-              <EnvironmentMachineIcon kind={kind} className="size-3.5 shrink-0" />
-              <span className="truncate">{ENVIRONMENT_MACHINE_KIND_LABELS[kind]}</span>
-            </span>
-          </SelectItem>
-        ))}
-      </SelectPopup>
-    </Select>
-  );
-  if (lock === null) {
-    return select;
-  }
   return (
-    <Tooltip>
+    <MenuSub>
-      <TooltipTrigger
+      <MenuSubTrigger>
-        render={
+        <EnvironmentMachineIcon kind={resolved} />
-          // Focusable so keyboard users can still reach the explanation.
+        Icon
-          <span
+      </MenuSubTrigger>
-            tabIndex={0}
+      <MenuSubPopup className="min-w-44">
-            className="flex w-full items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring sm:w-auto"
+        {lock !== null ? (
-          />
+          <>
-        }
+            <MenuItem disabled className="whitespace-normal text-xs">
-      >
+              {lock}
-        <span className="flex w-full items-center sm:w-auto">{select}</span>
+            </MenuItem>
-      </TooltipTrigger>
+            <MenuSeparator />
-      <TooltipPopup side="top" className="max-w-72">
+          </>
-        {lock}
+        ) : null}
-      </TooltipPopup>
+        <MenuRadioGroup
-    </Tooltip>
+          value={resolved}
+          onValueChange={(next) => {
+            if (lock !== null || !isEnvironmentMachineKind(next)) return;
+            updateSettings({ environmentIcon: next === detected ? null : next });
+          }}
+        >
+          {ENVIRONMENT_MACHINE_KINDS.map((kind) => (
+            <MenuRadioItem key={kind} value={kind} disabled={lock !== null}>
+              <span className="flex min-w-0 items-center gap-2">
+                <EnvironmentMachineIcon kind={kind} className="size-3.5 shrink-0" />
+                <span className="min-w-0 flex-1 truncate">
+                  {ENVIRONMENT_MACHINE_KIND_LABELS[kind]}
+                </span>
+                {kind === detected ? (
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    {serverConfig?.environment.platform.machine ? "detected" : "default"}
+                  </span>
+                ) : null}
+              </span>
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuSubPopup>
+    </MenuSub>
   );
 }

apps/web/src/components/settings/EnvironmentRow.tsx created+74

...	@@ -0,0 +1,74 @@
1	import type { DesktopSshEnvironmentTarget, EnvironmentMachineKind } from "@t3tools/contracts";
2	import * as Option from "effect/Option";
3	import type { ReactNode } from "react";
4
5	import { cn } from "~/lib/utils";
6	import type { EnvironmentPresentation } from "~/state/environments";
7	import { isDesktopLocalConnectionTarget } from "~/connection/desktopLocal";
8	import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
9
10	export function formatDesktopSshTarget(target: DesktopSshEnvironmentTarget): string {
11	const authority = target.username ? `${target.username}@${target.hostname}` : target.hostname;
12	return target.port ? `${authority}:${target.port}` : authority;
13	}
14
15	/**
16	* How this client reaches a machine, printed first in every environment row so
17	* T3 Connect, SSH, WSL, and plain remote links are told apart without a legend.
18	*/
19	export function environmentTransportLabel(environment: EnvironmentPresentation): string {
20	const { entry } = environment;
21	if (entry.target._tag === "PrimaryConnectionTarget") return "This machine";
22	if (environment.relayManaged) return "T3 Connect";
23	if (isDesktopLocalConnectionTarget(entry.target)) return "WSL";
24	if (
25	entry.target._tag === "SshConnectionTarget" &&
26	Option.isSome(entry.profile) &&
27	entry.profile.value._tag === "SshConnectionProfile"
28	) {
29	return `SSH ${formatDesktopSshTarget(entry.profile.value.target)}`;
30	}
31	return environment.displayUrl ?? "Remote link";
32	}
33
34	/**
35	* One machine in a grouped settings list: icon, name, a single subtitle line,
36	* and controls on the right. Every environment list on the Connections page
37	* uses this so the lists share one rhythm.
38	*/
39	export function EnvironmentRow({
40	kind,
41	label,
42	subtitle,
43	below,
44	dimmed = false,
45	className,
46	children,
47	}: {
48	readonly kind: EnvironmentMachineKind;
49	readonly label: string;
50	readonly subtitle: ReactNode;
51	/** Extra content under the subtitle, such as update progress. */
52	readonly below?: ReactNode;
53	readonly dimmed?: boolean;
54	readonly className?: string;
55	readonly children?: ReactNode;
56	}) {
57	return (
58	<div
59	className={cn(
60	"grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 px-3 py-2.5 sm:px-4",
61	dimmed && "opacity-60",
62	className,
63	)}
64	>
65	<EnvironmentMachineIcon aria-hidden kind={kind} className="size-4 text-muted-foreground" />
66	<div className="min-w-0">
67	<p className="truncate text-sm font-medium text-foreground">{label}</p>
68	<div className="truncate text-xs text-muted-foreground">{subtitle}</div>
69	{below}
70	</div>
71	<div className="flex shrink-0 items-center gap-1">{children}</div>
72	</div>
73	);
74	}

apps/web/src/components/settings/FoldedSettingsSection.tsx created+67

...	@@ -0,0 +1,67 @@
1	import { ChevronRightIcon } from "lucide-react";
2	import { type ReactNode, useState } from "react";
3
4	import { cn } from "~/lib/utils";
5	import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
6	import { useSettingsSearchTarget, useSettingsSearchTargetId } from "./settingsLayout";
7
8	/**
9	* A grouped settings section that starts closed. The header carries the title,
10	* a one line summary of what is set inside, and an optional control such as
11	* the section's own switch. A settings search that targets the section opens it.
12	*/
13	export function FoldedSettingsSection({
14	id,
15	title,
16	summary,
17	control,
18	children,
19	}: {
20	readonly id: string;
21	readonly title: string;
22	readonly summary?: string \| null;
23	readonly control?: ReactNode;
24	readonly children: ReactNode;
25	}) {
26	const [open, setOpen] = useState(false);
27	const searchTargetId = useSettingsSearchTargetId();
28	const targetRef = useSettingsSearchTarget<HTMLElement>(id);
29	// A search jump lands inside the fold, so open it before the scroll runs.
30	const [openedForTarget, setOpenedForTarget] = useState<string \| null>(null);
31	if (searchTargetId === id && openedForTarget !== id) {
32	setOpenedForTarget(id);
33	if (!open) setOpen(true);
34	}
35
36	return (
37	<section id={id} ref={targetRef} tabIndex={-1} className="outline-none">
38	<Collapsible
39	open={open}
40	onOpenChange={setOpen}
41	className="rounded-xl border border-border/60 bg-card/40 text-foreground shadow-xs/5"
42	>
43	<div className="flex items-center gap-4 px-3 sm:px-4">
44	<CollapsibleTrigger className="flex min-h-11 min-w-0 flex-1 items-center gap-2 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md">
45	<ChevronRightIcon
46	aria-hidden
47	className={cn(
48	"size-4 shrink-0 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none",
49	open && "rotate-90",
50	)}
51	/>
52	<span className="shrink-0 text-sm font-medium">{title}</span>
53	{summary ? (
54	<span className="min-w-0 truncate text-xs text-muted-foreground">{summary}</span>
55	) : null}
56	</CollapsibleTrigger>
57	{control ? <div className="flex shrink-0 items-center">{control}</div> : null}
58	</div>
59	<CollapsiblePanel>
60	<div className="border-t border-border/50 [&>+]:border-t [&>+]:border-border/50">
61	{children}
62	</div>
63	</CollapsiblePanel>
64	</Collapsible>
65	</section>
66	);
67	}

apps/web/src/components/settings/GitHubRoutingSettings.test.ts created+20

...	@@ -0,0 +1,20 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import { summarizeGitHubRouting } from "./GitHubRoutingSettings";
4
5	describe("summarizeGitHubRouting", () => {
6	it("is empty when no machine shares", () => {
7	expect(summarizeGitHubRouting([{ label: "alvin", permission: "off" }])).toBeNull();
8	});
9
10	it("groups sharing machines by permission, read and act first", () => {
11	expect(
12	summarizeGitHubRouting([
13	{ label: "alvin", permission: "read" },
14	{ label: "bb-1", permission: "read-write" },
15	{ label: "cup2", permission: "off" },
16	{ label: "Theo's MacBook Pro", permission: "read-write" },
17	]),
18	).toBe("bb-1, Theo's MacBook Pro read and act · alvin read PRs");
19	});
20	});

apps/web/src/components/settings/GitHubRoutingSettings.tsx+90-56

 @@ -1,5 +1,5 @@
 import { useAtomValue } from "@effect/atom-react";
-import type { EnvironmentId } from "@t3tools/contracts";
+import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import {
   gitHubRoutingConnectionKey,
   gitHubRoutingPermissionFor,
 @@ -12,7 +12,8 @@ import type { EnvironmentPresentation } from "~/state/environments";
 import { useAtomCommand } from "~/state/use-atom-command";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { toastManager } from "../ui/toast";
-import { SettingsRow, SettingsSection } from "./settingsLayout";
+import { EnvironmentRow, environmentTransportLabel } from "./EnvironmentRow";
+import { FoldedSettingsSection } from "./FoldedSettingsSection";
 import { searchableSetting } from "./settingsSearch";
 const options: ReadonlyArray<{ value: GitHubRoutingPermission; label: string }> = [
 @@ -21,73 +22,106 @@ const options: ReadonlyArray<{ value: GitHubRoutingPermission; label: string }>
   { value: "read-write", label: "Read and act" },
 ];
+const summaryLabels = { "read-write": "read and act", read: "read PRs" } as const;
+/**
+ * Closed-header summary: the machines that share, grouped by permission.
+ * Null when nothing is shared.
+ */
+export function summarizeGitHubRouting(
+  entries: ReadonlyArray<{ readonly label: string; readonly permission: GitHubRoutingPermission }>,
+): string | null {
+  const groups = (["read-write", "read"] as const).flatMap((permission) => {
+    const labels = entries.filter((entry) => entry.permission === permission);
+    return labels.length === 0
+      ? []
+      : [`${labels.map((entry) => entry.label).join(", ")} ${summaryLabels[permission]}`];
+  });
+  return groups.length === 0 ? null : groups.join(" · ");
+}
+/**
+ * Folded section under the environments list. One row per switched-on machine
+ * with how much of its GitHub access the other machines may use. The trust
+ * warning is the first line of the body so it sits next to the control.
+ * Rendered only when two or more machines are on.
+ */
 export function GitHubRoutingSettings({
   environments,
-  selectedEnvironmentId,
 }: {
   readonly environments: ReadonlyArray<EnvironmentPresentation>;
-  readonly selectedEnvironmentId: EnvironmentId;
 }) {
   const permissions = useAtomValue(environmentCatalog.githubRoutingPermissionsValueAtom);
   const catalog = useAtomValue(environmentCatalog.catalogValueAtom);
   const update = useAtomCommand(environmentCatalog.setGitHubRoutingPermission);
   const [saving, setSaving] = useState(false);
-  const selectedEnvironments = environments.filter(
-    (environment) => environment.environmentId === selectedEnvironmentId,
-  );
+  if (environments.length < 2) return null;
+  const { id, title } = searchableSetting("github-routing");
   return (
-    <SettingsSection {...searchableSetting("github-routing")}>
+    <FoldedSettingsSection
-      <SettingsRow
+      id={id}
-        title="Share GitHub access"
+      title={title}
-        className="sm:[&>div]:grid-cols-1 [&_p]:max-w-none"
+      summary={
-        description="Choose environments you trust to share PR data and use each other's GitHub access. Enable both environments. Read and act may use broader permissions than the original environment. This applies only to this client."
+        summarizeGitHubRouting(
-      />
+          environments.map((environment) => ({
-      {selectedEnvironments.map((environment) => (
+            label: environment.label,
-        <SettingsRow
+            permission: gitHubRoutingPermissionFor(environment.entry, permissions),
+          })),
+        ) ?? "Off"
+      }
+    >
+      <p className="px-3 py-2.5 text-xs text-muted-foreground sm:px-4">
+        Machines you trust here can read PR data through each other's GitHub access. Enable both
+        machines. Read and act may use broader permissions than the machine that owns them. This
+        applies only to this device.
+      </p>
+      {environments.map((environment) => (
+        <EnvironmentRow
           key={environment.environmentId}
-          title="GitHub access"
+          kind={resolveEnvironmentMachineKind(environment.serverConfig)}
-          description={environment.displayUrl ?? "T3 Connect"}
+          label={environment.label}
-          control={
+          subtitle={environmentTransportLabel(environment)}
-            <Select
+        >
-              items={options}
+          <Select
-              value={gitHubRoutingPermissionFor(environment.entry, permissions)}
+            items={options}
-              disabled={
+            value={gitHubRoutingPermissionFor(environment.entry, permissions)}
-                !catalog.isReady || saving || gitHubRoutingConnectionKey(environment.entry) === null
+            disabled={
-              }
+              !catalog.isReady || saving || gitHubRoutingConnectionKey(environment.entry) === null
-              onValueChange={(permission) => {
+            }
-                if (permission === null) return;
+            onValueChange={(permission) => {
-                setSaving(true);
+              if (permission === null) return;
-                void update({ environmentId: environment.environmentId, permission }).then(
+              setSaving(true);
-                  (result) => {
+              void update({ environmentId: environment.environmentId, permission }).then(
-                    setSaving(false);
+                (result) => {
-                    if (result._tag === "Failure")
+                  setSaving(false);
-                      toastManager.add({
+                  if (result._tag === "Failure")
-                        type: "error",
+                    toastManager.add({
-                        title: "Could not save GitHub routing permission",
+                      type: "error",
-                      });
+                      title: "Could not save GitHub routing permission",
-                  },
+                    });
-                );
+                },
-              }}
+              );
+            }}
+          >
+            <SelectTrigger
+              size="xs"
+              className="w-32"
+              aria-label={`${environment.label} GitHub routing`}
             >
-              <SelectTrigger
+              <SelectValue />
-                size="sm"
+            </SelectTrigger>
-                className="w-full sm:w-40"
+            <SelectPopup align="end" alignItemWithTrigger={false}>
-                aria-label={`${environment.label} GitHub routing`}
+              {options.map(({ value, label }) => (
-              >
+                <SelectItem key={value} value={value}>
-                <SelectValue />
+                  {label}
-              </SelectTrigger>
+                </SelectItem>
-              <SelectPopup align="end" alignItemWithTrigger={false}>
+              ))}
-                {options.map(({ value, label }) => (
+            </SelectPopup>
-                  <SelectItem key={value} value={value}>
+          </Select>
-                    {label}
+        </EnvironmentRow>
-                  </SelectItem>
-                ))}
-              </SelectPopup>
-            </Select>
-          }
-        />
       ))}
-    </SettingsSection>
+    </FoldedSettingsSection>
   );
 }

apps/web/src/components/settings/LoadBalancingSettings.test.ts created+32

...	@@ -0,0 +1,32 @@
1	import { EnvironmentId } from "@t3tools/contracts";
2	import { describe, expect, it } from "vite-plus/test";
3
4	import { loadPreferenceForWeight, summarizeLoadPreferences } from "./LoadBalancingSettings";
5
6	const machines = [
7	{ environmentId: EnvironmentId.make("a"), label: "alvin" },
8	{ environmentId: EnvironmentId.make("b"), label: "bb-1" },
9	{ environmentId: EnvironmentId.make("c"), label: "ProMini" },
10	];
11
12	describe("loadPreferenceForWeight", () => {
13	it("snaps legacy slider weights onto the four preferences", () => {
14	expect(loadPreferenceForWeight(undefined)).toBe(50);
15	expect(loadPreferenceForWeight(0)).toBe(0);
16	expect(loadPreferenceForWeight(10)).toBe(25);
17	expect(loadPreferenceForWeight(50)).toBe(50);
18	expect(loadPreferenceForWeight(80)).toBe(100);
19	});
20	});
21
22	describe("summarizeLoadPreferences", () => {
23	it("is empty when every machine is at Normal", () => {
24	expect(summarizeLoadPreferences(machines, { a: 50 })).toBeNull();
25	});
26
27	it("lists only the machines that differ from Normal, in list order", () => {
28	expect(summarizeLoadPreferences(machines, { b: 100, c: 0 })).toBe(
29	"bb-1 prefer · ProMini manual only",
30	);
31	});
32	});

apps/web/src/components/settings/LoadBalancingSettings.tsx+97-65

 @@ -1,3 +1,5 @@
+import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import {
   useClientSettings,
   useClientSettingsHydrated,
 @@ -6,7 +8,8 @@ import {
 import type { EnvironmentPresentation } from "~/state/environments";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { Switch } from "../ui/switch";
-import { SettingsRow, SettingsSection } from "./settingsLayout";
+import { EnvironmentRow, environmentTransportLabel } from "./EnvironmentRow";
+import { FoldedSettingsSection } from "./FoldedSettingsSection";
 import { searchableSetting } from "./settingsSearch";
 const preferences = [
 @@ -14,8 +17,44 @@ const preferences = [
   { value: 50, label: "Normal" },
   { value: 25, label: "Less often" },
   { value: 0, label: "Manual only" },
-];
+] as const;
+type LoadPreference = (typeof preferences)[number]["value"];
+/** Snaps a saved weight (older builds stored a slider value) onto the four preferences. */
+export function loadPreferenceForWeight(weight: number | undefined): LoadPreference {
+  if (weight === undefined || weight === 50) return 50;
+  if (weight === 0) return 0;
+  return weight < 50 ? 25 : 100;
+}
+function preferenceLabel(preference: LoadPreference): string {
+  return preferences.find((entry) => entry.value === preference)!.label;
+}
+/**
+ * Closed-header summary: the machines not at Normal, so the folded section
+ * still tells you what is set. Null when every machine is at the default.
+ */
+export function summarizeLoadPreferences(
+  environments: ReadonlyArray<Pick<EnvironmentPresentation, "environmentId" | "label">>,
+  weights: Readonly<Record<string, number>>,
+): string | null {
+  const parts = environments.flatMap((environment) => {
+    const preference = loadPreferenceForWeight(weights[environment.environmentId]);
+    return preference === 50
+      ? []
+      : [`${environment.label} ${preferenceLabel(preference).toLowerCase()}`];
+  });
+  return parts.length === 0 ? null : parts.join(" · ");
+}
+/**
+ * Folded section under the environments list. Its switch turns balancing on
+ * for this client, and the body holds one row per switched-on machine with
+ * how often that machine should receive new threads. Rendered only when two
+ * or more machines are on, since one machine has nothing to balance against.
+ */
 export function LoadBalancingSettings({
   environments,
 }: {
 @@ -25,78 +64,71 @@ export function LoadBalancingSettings({
   const settingsHydrated = useClientSettingsHydrated();
   const updateSettings = useUpdateClientSettings();
-  if (environments.length < 2) {
+  if (environments.length < 2) return null;
-    return (
-      <SettingsSection {...searchableSetting("load-balancing")} variant="plain">
-        <p className="px-3 text-sm text-muted-foreground sm:px-4">
-          Connect another machine to automatically balance load across environments.
-        </p>
-      </SettingsSection>
-    );
-  }
+  const { id, title } = searchableSetting("load-balancing");
   return (
-    <SettingsSection {...searchableSetting("load-balancing")}>
+    <FoldedSettingsSection
-      <SettingsRow
+      id={id}
-        title="Automatically balance load"
+      title={title}
-        description="Choose a machine automatically for new threads in shared projects."
+      summary={
-        control={
+        settings.loadBalancingEnabled
-          <Switch
+          ? summarizeLoadPreferences(environments, settings.loadBalancingWeights)
-            aria-label="Automatically balance load"
+          : "Off"
-            checked={settings.loadBalancingEnabled}
+      }
-            disabled={!settingsHydrated}
-            onCheckedChange={(loadBalancingEnabled) => updateSettings({ loadBalancingEnabled })}
-          />
-        }
-      />
-    </SettingsSection>
-  );
-}
-export function LoadBalancingPreference({ environment }: { environment: EnvironmentPresentation }) {
-  const settings = useClientSettings();
-  const settingsHydrated = useClientSettingsHydrated();
-  const updateSettings = useUpdateClientSettings();
-  const weight = settings.loadBalancingWeights[environment.environmentId] ?? 50;
-  // Keep saved slider weights until the user chooses a different preference.
-  const preference = weight === 0 ? 0 : weight < 50 ? 25 : weight === 50 ? 50 : 100;
-  return (
-    <SettingsRow
-      title="Load preference"
-      description="How often this machine receives new threads when load balancing is on."
       control={
-        <Select
+        <Switch
-          items={preferences}
+          aria-label="Automatically balance load"
-          value={preference}
+          checked={settings.loadBalancingEnabled}
-          disabled={!settingsHydrated || !settings.loadBalancingEnabled}
+          disabled={!settingsHydrated}
-          onValueChange={(value) => {
+          onCheckedChange={(loadBalancingEnabled) => updateSettings({ loadBalancingEnabled })}
-            if (value !== null) {
+        />
+      }
+    >
+      <p className="px-3 py-2.5 text-xs text-muted-foreground sm:px-4">
+        New threads in shared projects start on the machine with the most free CPU and memory,
+        weighted by each machine's preference.
+      </p>
+      {environments.map((environment) => (
+        <EnvironmentRow
+          key={environment.environmentId}
+          kind={resolveEnvironmentMachineKind(environment.serverConfig)}
+          label={environment.label}
+          subtitle={environmentTransportLabel(environment)}
+        >
+          <Select
+            items={preferences}
+            value={loadPreferenceForWeight(
+              settings.loadBalancingWeights[environment.environmentId],
+            )}
+            disabled={!settingsHydrated || !settings.loadBalancingEnabled}
+            onValueChange={(value) => {
+              if (value === null) return;
               updateSettings({
                 loadBalancingWeights: {
                   ...settings.loadBalancingWeights,
                   [environment.environmentId]: value,
                 },
               });
-            }
+            }}
-          }}
-        >
-          <SelectTrigger
-            size="sm"
-            className="w-full sm:w-40"
-            aria-label={`${environment.label} load preference`}
           >
-            <SelectValue />
+            <SelectTrigger
-          </SelectTrigger>
+              size="xs"
-          <SelectPopup align="end" alignItemWithTrigger={false}>
+              className="w-32"
-            {preferences.map(({ value, label }) => (
+              aria-label={`${environment.label} load preference`}
-              <SelectItem key={value} value={value}>
+            >
-                {label}
+              <SelectValue />
-              </SelectItem>
+            </SelectTrigger>
-            ))}
+            <SelectPopup align="end" alignItemWithTrigger={false}>
-          </SelectPopup>
+              {preferences.map(({ value, label }) => (
-        </Select>
+                <SelectItem key={value} value={value}>
-      }
+                  {label}
-    />
+                </SelectItem>
+              ))}
+            </SelectPopup>
+          </Select>
+        </EnvironmentRow>
+      ))}
+    </FoldedSettingsSection>
   );
 }

apps/web/src/components/settings/settingsSearch.ts+3-3

...	@@ -682,7 +682,7 @@ export const SETTINGS_SEARCH_ITEMS = [	...	@@ -682,7 +682,7 @@ export const SETTINGS_SEARCH_ITEMS = [
682	},	682	},
683	{	683	{
684	id: "connections-environment",	684	id: "connections-environment",
685	title: "This environment",	685	title: "This machine",
686	to: "/settings/connections",	686	to: "/settings/connections",
687	searchTerms: [	687	searchTerms: [
688	"connections server backend local remote access administrative permissions scope pairing links qr code authorized clients sessions revoke endpoint",	688	"connections server backend local remote access administrative permissions scope pairing links qr code authorized clients sessions revoke endpoint",
...	@@ -690,7 +690,7 @@ export const SETTINGS_SEARCH_ITEMS = [	...	@@ -690,7 +690,7 @@ export const SETTINGS_SEARCH_ITEMS = [
690	},	690	},
691	{	691	{
692	id: "remote-environments",	692	id: "remote-environments",
693	title: "Remote environments",	693	title: "Environments",
694	to: "/settings/connections",	694	to: "/settings/connections",
695	searchTerms: ["add pair backend host code ssh config agent tunnel saved t3 connect"],	695	searchTerms: ["add pair backend host code ssh config agent tunnel saved t3 connect"],
696	},	696	},
...	@@ -704,7 +704,7 @@ export const SETTINGS_SEARCH_ITEMS = [	...	@@ -704,7 +704,7 @@ export const SETTINGS_SEARCH_ITEMS = [
704	},	704	},
705	{	705	{
706	id: "github-routing",	706	id: "github-routing",
707	title: "GitHub routing",	707	title: "GitHub sharing",
708	to: "/settings/connections",	708	to: "/settings/connections",
709	searchTerms: ["pull request trusted environments shared credentials permissions read actions"],	709	searchTerms: ["pull request trusted environments shared credentials permissions read actions"],
710	},	710	},

docs/user/remote-access.md+2-1

...	@@ -65,7 +65,8 @@ another link to share.	...	@@ -65,7 +65,8 @@ another link to share.
65		65
66	Auto balance is off by default. On web and desktop, enable it in	66	Auto balance is off by default. On web and desktop, enable it in
67	Settings → Connections → Load balancing to automatically choose a machine for	67	Settings → Connections → Load balancing to automatically choose a machine for
68	new threads in projects grouped across connected environments.	68	new threads in projects grouped across connected environments. The section
		69	appears once two or more machines are switched on.
69	Each machine starts at Normal. Choose Prefer to favor it when it has CPU and	70	Each machine starts at Normal. Choose Prefer to favor it when it has CPU and
70	memory available, Less often to reduce its share, or Manual only to exclude	71	memory available, Less often to reduce its share, or Manual only to exclude
71	it from automatic selection. These are preferences, not fixed traffic percentages.	72	it from automatic selection. These are preferences, not fixed traffic percentages.

docs/user/source-control.md+1-1

...	@@ -99,7 +99,7 @@ GitLab calls these merge requests.	...	@@ -99,7 +99,7 @@ GitLab calls these merge requests.
99	GitHub, GitLab, and Azure DevOps support auto-merge while checks are outstanding. GitHub also	99	GitHub, GitLab, and Azure DevOps support auto-merge while checks are outstanding. GitHub also
100	supports approving waiting fork workflows and opening a revert pull request for a merged change.	100	supports approving waiting fork workflows and opening a revert pull request for a merged change.
101		101
102	GitHub routing is off by default. In Settings → Connections (Environments on mobile), choose	102	GitHub sharing is off by default. In Settings → Connections → GitHub sharing (Environments on mobile), choose
103	Read PRs or Read and act for each environment you trust to share GitHub access.	103	Read PRs or Read and act for each environment you trust to share GitHub access.
104	Enable both the original environment and the environment answering its requests on this client.	104	Enable both the original environment and the environment answering its requests on this client.
105	Read and act can use broader GitHub permissions than the original environment's credential;	105	Read and act can use broader GitHub permissions than the original environment's credential;

...	@@ -175,7 +175,7 @@ describe("cloud onboarding discovery", () => {	...	@@ -175,7 +175,7 @@ describe("cloud onboarding discovery", () => {
175	finishDiscovery(linkedMachines);	175	finishDiscovery(linkedMachines);
176	});	176	});
177	expect(onDiscoveryReady).toHaveBeenCalledTimes(1);	177	expect(onDiscoveryReady).toHaveBeenCalledTimes(1);
178	expect(renderer!.root.findByType("button").children).toEqual(["Connect"]);	178	expect(renderer!.root.findByType("button").children).toEqual(["Add"]);
179	});	179	});
180		180
181	it("connects and selects discovered computers by default without overwriting deselection", async () => {	181	it("connects and selects discovered computers by default without overwriting deselection", async () => {
...	@@ -232,7 +232,7 @@ describe("cloud onboarding discovery", () => {	...	@@ -232,7 +232,7 @@ describe("cloud onboarding discovery", () => {
232	expect(renderer!.root.findAllByType("p").map((node) => node.children)).toContainEqual([	232	expect(renderer!.root.findAllByType("p").map((node) => node.children)).toContainEqual([
233	"Work laptop",	233	"Work laptop",
234	]);	234	]);
235	expect(renderer!.root.findByType("button").children).toEqual(["Connect"]);	235	expect(renderer!.root.findByType("button").children).toEqual(["Add"]);
236	await advance(30_000);	236	await advance(30_000);
237	expect(discovery.listEnvironments).toHaveBeenCalledTimes(2);	237	expect(discovery.listEnvironments).toHaveBeenCalledTimes(2);
238	});	238	});
...	@@ -240,7 +240,7 @@ describe("cloud onboarding discovery", () => {	...	@@ -240,7 +240,7 @@ describe("cloud onboarding discovery", () => {
240	it("keeps a discovered computer visible when it is added to the browser", async () => {	240	it("keeps a discovered computer visible when it is added to the browser", async () => {
241	discovery.listEnvironments.mockResolvedValue(linkedMachines);	241	discovery.listEnvironments.mockResolvedValue(linkedMachines);
242	await mount();	242	await mount();
243	expect(renderer!.root.findByType("button").children).toEqual(["Connect"]);	243	expect(renderer!.root.findByType("button").children).toEqual(["Add"]);
244	await act(async () => {	244	await act(async () => {
245	renderer!.update(	245	renderer!.update(
246	<CloudEnvironmentConnectRows	246	<CloudEnvironmentConnectRows