feat(web,mobile): linked environments in Connections#16698

@@ -0,0 +1,283 @@
+import { useAtomValue } from "@effect/atom-react";
+import { AuthMcpClientAccess, type EnvironmentId, type PeerLinkSummary } from "@t3tools/contracts";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { peerLinkHealth } from "@t3tools/client-runtime/state/peerLinks";
+import * as DateTime from "effect/DateTime";
+import { PlusIcon } from "lucide-react";
+import { useId, useState } from "react";
+
+import { requestConfirmDialog } from "~/confirmDialog";
+import { peerLinkEnvironment } from "~/state/peerLinks";
+import { useEnvironmentQuery } from "~/state/query";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { AccessOption, accessConfig } from "../auth/ConnectAgentSurface";
+import { ConnectionStatusDot } from "../ConnectionStatusDot";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { RadioGroup } from "../ui/radio-group";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import { ITEM_ROW_CLASSNAME, ITEM_ROW_INNER_CLASSNAME } from "./itemRows";
+import { SettingsRow, SettingsSection, useRelativeTimeTick } from "./settingsLayout";
+import { searchableSetting } from "./settingsSearch";
+
+const failureToast = (title: string, description: string) =>
+  toastManager.add(stackedThreadToast({ type: "error", title, description }));
+
+/**
+ * Other environments this one links to, so its agents can work there. Each
+ * link is an outside agent session on the other environment, revoked from
+ * that environment's own Connections. `environmentLabel` names the linking
+ * environment when several are listed; only the first section is the search
+ * target.
+ */
+export function LinkedEnvironmentsSettings({
+  environmentId,
+  environmentLabel,
+  isSearchTarget,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly environmentLabel: string | null;
+  readonly isSearchTarget: boolean;
+}) {
+  const links = useEnvironmentQuery(peerLinkEnvironment.list({ environmentId, input: {} }));
+  const canLink = useAtomValue(peerLinkEnvironment.link.permissionAtom(environmentId));
+  const search = searchableSetting("linked-environments");
+  return (
+    <SettingsSection
+      {...(isSearchTarget ? { id: search.id } : {})}
+      title={environmentLabel === null ? search.title : `${search.title} · ${environmentLabel}`}
+      headerAction={canLink ? <LinkEnvironmentAction environmentId={environmentId} /> : null}
+    >
+      {links.error ? (
+        <SettingsRow title="Could not load linked environments" description={links.error} />
+      ) : !links.data ? (
+        <SettingsRow title="Loading linked environments…" role="status" />
+      ) : links.data.links.length === 0 ? (
+        <SettingsRow
+          title="No linked environments"
+          description="Link another machine running T3 Code, such as a VPS, so agents here can launch and drive threads there."
+        />
+      ) : (
+        links.data.links.map((link) => (
+          <LinkedEnvironmentRow
+            key={link.environmentId}
+            environmentId={environmentId}
+            link={link}
+          />
+        ))
+      )}
+    </SettingsSection>
+  );
+}
+
+function LinkedEnvironmentRow({
+  environmentId,
+  link,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly link: PeerLinkSummary;
+}) {
+  const nowMs = useRelativeTimeTick(60_000);
+  const health = peerLinkHealth(link, DateTime.makeUnsafe(nowMs));
+  const unlink = useAtomCommand(peerLinkEnvironment.unlink, { label: "unlink environment" });
+  const canUnlink = useAtomValue(peerLinkEnvironment.unlink.permissionAtom(environmentId));
+  const [busy, setBusy] = useState(false);
+  const forget = async () => {
+    const confirmed = await (requestConfirmDialog(
+      `Forget ${link.label}? Agents here stop working there. Revoke "T3 Code · …" in ${link.label}'s Connections to end the session there too.`,
+      { variant: "destructive" },
+    ) ?? Promise.resolve(false));
+    if (!confirmed) return;
+    setBusy(true);
+    const result = await unlink({ environmentId, input: { environmentId: link.environmentId } });
+    setBusy(false);
+    if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
+      failureToast("Could not forget the link", String(squashAtomCommandFailure(result)));
+    }
+  };
+  const status =
+    health.kind === "expired"
+      ? "Expired. Link it again with a new pairing code."
+      : health.kind === "unreachable"
+        ? (health.detail ?? "Not answering right now.")
+        : health.kind === "failing"
+          ? health.detail
+          : health.expiresInDays !== null
+            ? `Expires in ${health.expiresInDays} ${health.expiresInDays === 1 ? "day" : "days"}. Link it again to renew.`
+            : "Reachable";
+  return (
+    <div className={ITEM_ROW_CLASSNAME}>
+      <div className={ITEM_ROW_INNER_CLASSNAME}>
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex min-h-5 items-center gap-1.5">
+            <ConnectionStatusDot
+              tooltipText={status}
+              dotClassName={
+                health.kind === "reachable"
+                  ? health.expiresInDays === null
+                    ? "bg-success"
+                    : "bg-warning"
+                  : health.kind === "expired" || health.kind === "failing"
+                    ? "bg-destructive"
+                    : "bg-muted-foreground/30"
+              }
+              pingClassName={null}
+            />
+            <h3 className="text-sm font-medium text-foreground">{link.label}</h3>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {accessConfig[link.access].label} · {status}
+          </p>
+          <p className="truncate text-xs text-muted-foreground/80">{link.urls.join(", ")}</p>
+        </div>
+        {canUnlink ? (
+          <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+            <Button
+              size="xs"
+              variant="destructive-outline"
+              disabled={busy}
+              onClick={() => void forget()}
+            >
+              {busy ? "Forgetting…" : "Forget"}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function LinkEnvironmentAction({ environmentId }: { readonly environmentId: EnvironmentId }) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const [pairingCode, setPairingCode] = useState("");
+  const [access, setAccess] = useState<AuthMcpClientAccess>("approval-required");
+  const [busy, setBusy] = useState(false);
+  const formId = useId();
+  const link = useAtomCommand(peerLinkEnvironment.link, { label: "link environment" });
+  const reset = () => {
+    setUrl("");
+    setPairingCode("");
+    setAccess("approval-required");
+  };
+  const submit = async () => {
+    setBusy(true);
+    const result = await link({
+      environmentId,
+      input: { url: url.trim(), pairingCode: pairingCode.trim(), access },
+    });
+    setBusy(false);
+    if (result._tag === "Success") {
+      toastManager.add({ type: "success", title: `Linked ${result.value.label}` });
+      reset();
+      setOpen(false);
+    } else if (!isAtomCommandInterrupted(result)) {
+      failureToast("Could not link the environment", String(squashAtomCommandFailure(result)));
+    }
+  };
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) reset();
+      }}
+    >
+      <DialogTrigger
+        render={
+          <Button size="xs" variant="default">
+            <PlusIcon className="size-3" />
+            Link
+          </Button>
+        }
+      />
+      <DialogPopup className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Link an environment</DialogTitle>
+          <DialogDescription>
+            Agents here can then launch, message and wait on threads there. It appears in that
+            environment's Connections, where it can be revoked.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <form
+            id={formId}
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void submit();
+            }}
+          >
+            <label className="block space-y-1.5">
+              <span className="block text-xs font-medium text-foreground">Address</span>
+              <Input
+                value={url}
+                onChange={(event) => setUrl(event.target.value)}
+                placeholder="https://box.example.ts.net"
+                disabled={busy}
+                autoFocus
+                nativeInput
+                spellCheck={false}
+              />
+            </label>
+            <label className="block space-y-1.5">
+              <span className="block text-xs font-medium text-foreground">Pairing code</span>
+              <Input
+                value={pairingCode}
+                onChange={(event) => setPairingCode(event.target.value)}
+                placeholder="From that environment's Connections, or t3 pair there"
+                disabled={busy}
+                autoComplete="one-time-code"
+                nativeInput
+                spellCheck={false}
+              />
+            </label>
+            <div className="space-y-2">
+              <span id="link-environment-access-label" className="block text-xs font-medium">
+                What agents here may do there
+              </span>
+              <RadioGroup
+                aria-labelledby="link-environment-access-label"

@@ -888,6 +888,14 @@ export const SETTINGS_SEARCH_ITEMS = [
       "connections server backend local remote access administrative permissions scope pairing links qr code authorized clients sessions revoke endpoint",
     ],
   },
+  {
+    id: "linked-environments",
+    localEnvironmentOnly: true,
+    title: "Linked environments",
+    to: "/settings/connections",
+    targetId: "linked-environments",
+    searchTerms: ["link peer another machine vps agents work there handoff pairing code"],
+  },

@@ -226,6 +226,24 @@ Claude Code, Codex, ChatGPT and other agents T3 Code did not start can drive
 threads on an environment through its MCP server. See
 [outside agents](./outside-agents.md) for setup.
 
+## Link another environment
+
+Link two machines, such as your laptop and a VPS, and agents on one can launch,
+message, wait on and stop threads on the other. On the machine you will work
+from, open **Settings → Connections → Linked environments**, choose **Link**,
+and enter the other machine's address and a pairing code from it. From a
+terminal, use `t3 environment link <address> --pairing-code <code> --access <mode>`.
+
+- The access you pick is the most agents from this machine may do there. An
+  agent also never gets more there than its own mode here.
+- Threads a link starts are marked **From <machine>** there. They can change

@@ -0,0 +1,284 @@
+import { useAtomValue } from "@effect/atom-react";
+import { AuthMcpClientAccess, type EnvironmentId, type PeerLinkSummary } from "@t3tools/contracts";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { peerLinkHealth } from "@t3tools/client-runtime/state/peerLinks";
+import * as DateTime from "effect/DateTime";
+import { PlusIcon } from "lucide-react";
+import { useId, useState } from "react";
+
+import { requestConfirmDialog } from "~/confirmDialog";
+import { peerLinkEnvironment } from "~/state/peerLinks";
+import { useEnvironmentQuery } from "~/state/query";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { AccessOption, accessConfig } from "../auth/ConnectAgentSurface";
+import { ConnectionStatusDot } from "../ConnectionStatusDot";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { RadioGroup } from "../ui/radio-group";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import { ITEM_ROW_CLASSNAME, ITEM_ROW_INNER_CLASSNAME } from "./itemRows";
+import { SettingsRow, SettingsSection, useRelativeTimeTick } from "./settingsLayout";
+import { searchableSetting } from "./settingsSearch";
+
+const failureToast = (title: string, description: string) =>
+  toastManager.add(stackedThreadToast({ type: "error", title, description }));
+
+/**
+ * Other environments this one links to, so its agents can work there. Each
+ * link is an outside agent session on the other environment, revoked from
+ * that environment's own Connections. `environmentLabel` names the linking
+ * environment when several are listed; only the first section is the search
+ * target.
+ */
+export function LinkedEnvironmentsSettings({
+  environmentId,
+  environmentLabel,
+  isSearchTarget,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly environmentLabel: string | null;
+  readonly isSearchTarget: boolean;
+}) {
+  const links = useEnvironmentQuery(peerLinkEnvironment.list({ environmentId, input: {} }));
+  const canLink = useAtomValue(peerLinkEnvironment.link.permissionAtom(environmentId));
+  const search = searchableSetting("linked-environments");
+  return (
+    <SettingsSection
+      {...(isSearchTarget ? { id: search.id } : {})}
+      title={environmentLabel === null ? search.title : `${search.title} · ${environmentLabel}`}
+      headerAction={canLink ? <LinkEnvironmentAction environmentId={environmentId} /> : null}
+    >
+      {links.error ? (
+        <SettingsRow title="Could not load linked environments" description={links.error} />
+      ) : !links.data ? (
+        <SettingsRow title="Loading linked environments…" role="status" />
+      ) : links.data.links.length === 0 ? (
+        <SettingsRow
+          title="No linked environments"
+          description="Link another machine running T3 Code, such as a VPS, so agents here can launch and drive threads there."
+        />
+      ) : (
+        links.data.links.map((link) => (
+          <LinkedEnvironmentRow
+            key={link.environmentId}
+            environmentId={environmentId}
+            link={link}
+          />
+        ))
+      )}
+    </SettingsSection>
+  );
+}
+
+function LinkedEnvironmentRow({
+  environmentId,
+  link,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly link: PeerLinkSummary;
+}) {
+  const nowMs = useRelativeTimeTick(60_000);
+  const health = peerLinkHealth(link, DateTime.makeUnsafe(nowMs));
+  const unlink = useAtomCommand(peerLinkEnvironment.unlink, { label: "unlink environment" });
+  const canUnlink = useAtomValue(peerLinkEnvironment.unlink.permissionAtom(environmentId));
+  const [busy, setBusy] = useState(false);
+  const forget = async () => {
+    const confirmed = await (requestConfirmDialog(
+      `Forget ${link.label}? Agents here stop working there. Revoke "T3 Code · …" in ${link.label}'s Connections to end the session there too.`,
+      { variant: "destructive" },
+    ) ?? Promise.resolve(false));
+    if (!confirmed) return;
+    setBusy(true);
+    const result = await unlink({ environmentId, input: { environmentId: link.environmentId } });
+    setBusy(false);
+    if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
+      failureToast("Could not forget the link", String(squashAtomCommandFailure(result)));
+    }
+  };
+  const status =
+    health.kind === "expired"
+      ? "Expired. Link it again with a new pairing code."
+      : health.kind === "unreachable"
+        ? (health.detail ?? "Not answering right now.")
+        : health.kind === "failing"
+          ? health.detail
+          : health.expiresInDays !== null
+            ? `Expires in ${health.expiresInDays} ${health.expiresInDays === 1 ? "day" : "days"}. Link it again to renew.`
+            : "Reachable";
+  return (
+    <div className={ITEM_ROW_CLASSNAME}>
+      <div className={ITEM_ROW_INNER_CLASSNAME}>
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex min-h-5 items-center gap-1.5">
+            <ConnectionStatusDot
+              tooltipText={status}
+              dotClassName={
+                health.kind === "reachable"
+                  ? health.expiresInDays === null
+                    ? "bg-success"
+                    : "bg-warning"
+                  : health.kind === "expired" || health.kind === "failing"
+                    ? "bg-destructive"
+                    : "bg-muted-foreground/30"
+              }
+              pingClassName={null}
+            />
+            <h3 className="text-sm font-medium text-foreground">{link.label}</h3>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {accessConfig[link.access].label} · {status}
+          </p>
+          <p className="truncate text-xs text-muted-foreground/80">{link.urls.join(", ")}</p>
+        </div>
+        {canUnlink ? (
+          <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+            <Button
+              size="xs"
+              variant="destructive-outline"
+              disabled={busy}
+              onClick={() => void forget()}
+            >
+              {busy ? "Forgetting…" : "Forget"}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function LinkEnvironmentAction({ environmentId }: { readonly environmentId: EnvironmentId }) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const [pairingCode, setPairingCode] = useState("");
+  const [access, setAccess] = useState<AuthMcpClientAccess>("approval-required");
+  const [busy, setBusy] = useState(false);
+  const formId = useId();
+  const accessLabelId = `${formId}-access`;
+  const link = useAtomCommand(peerLinkEnvironment.link, { label: "link environment" });
+  const reset = () => {
+    setUrl("");
+    setPairingCode("");
+    setAccess("approval-required");
+  };
+  const submit = async () => {
+    setBusy(true);
+    const result = await link({
+      environmentId,
+      input: { url: url.trim(), pairingCode: pairingCode.trim(), access },
+    });
+    setBusy(false);
+    if (result._tag === "Success") {
+      toastManager.add({ type: "success", title: `Linked ${result.value.label}` });
+      reset();
+      setOpen(false);
+    } else if (!isAtomCommandInterrupted(result)) {
+      failureToast("Could not link the environment", String(squashAtomCommandFailure(result)));
+    }
+  };
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) reset();

@@ -0,0 +1,286 @@
+import { useAtomValue } from "@effect/atom-react";
+import { AuthMcpClientAccess, type EnvironmentId, type PeerLinkSummary } from "@t3tools/contracts";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { peerLinkHealth } from "@t3tools/client-runtime/state/peerLinks";
+import * as DateTime from "effect/DateTime";
+import { PlusIcon } from "lucide-react";
+import { useId, useState } from "react";
+
+import { requestConfirmDialog } from "~/confirmDialog";
+import { peerLinkEnvironment } from "~/state/peerLinks";
+import { useEnvironmentQuery } from "~/state/query";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { AccessOption, accessConfig } from "../auth/ConnectAgentSurface";
+import { ConnectionStatusDot } from "../ConnectionStatusDot";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { RadioGroup } from "../ui/radio-group";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import { ITEM_ROW_CLASSNAME, ITEM_ROW_INNER_CLASSNAME } from "./itemRows";
+import { SettingsRow, SettingsSection, useRelativeTimeTick } from "./settingsLayout";
+import { searchableSetting } from "./settingsSearch";
+
+const failureToast = (title: string, description: string) =>
+  toastManager.add(stackedThreadToast({ type: "error", title, description }));
+
+/**
+ * Other environments this one links to, so its agents can work there. Each
+ * link is an outside agent session on the other environment, revoked from
+ * that environment's own Connections. `environmentLabel` names the linking
+ * environment when several are listed; only the first section is the search
+ * target.
+ */
+export function LinkedEnvironmentsSettings({
+  environmentId,
+  environmentLabel,
+  isSearchTarget,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly environmentLabel: string | null;
+  readonly isSearchTarget: boolean;
+}) {
+  const links = useEnvironmentQuery(peerLinkEnvironment.list({ environmentId, input: {} }));
+  const canLink = useAtomValue(peerLinkEnvironment.link.permissionAtom(environmentId));
+  const search = searchableSetting("linked-environments");
+  return (
+    <SettingsSection
+      {...(isSearchTarget ? { id: search.id } : {})}
+      title={environmentLabel === null ? search.title : `${search.title} · ${environmentLabel}`}
+      headerAction={canLink ? <LinkEnvironmentAction environmentId={environmentId} /> : null}
+    >
+      {links.error ? (
+        <SettingsRow title="Could not load linked environments" description={links.error} />
+      ) : !links.data ? (
+        <SettingsRow title="Loading linked environments…" role="status" />
+      ) : links.data.links.length === 0 ? (
+        <SettingsRow
+          title="No linked environments"
+          description="Link another machine running T3 Code, such as a VPS, so agents here can launch and drive threads there."
+        />
+      ) : (
+        links.data.links.map((link) => (
+          <LinkedEnvironmentRow
+            key={link.environmentId}
+            environmentId={environmentId}
+            link={link}
+          />
+        ))
+      )}
+    </SettingsSection>
+  );
+}
+
+function LinkedEnvironmentRow({
+  environmentId,
+  link,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly link: PeerLinkSummary;
+}) {
+  const nowMs = useRelativeTimeTick(60_000);
+  const health = peerLinkHealth(link, DateTime.makeUnsafe(nowMs));
+  const unlink = useAtomCommand(peerLinkEnvironment.unlink, { label: "unlink environment" });
+  const canUnlink = useAtomValue(peerLinkEnvironment.unlink.permissionAtom(environmentId));
+  const [busy, setBusy] = useState(false);
+  const forget = async () => {
+    const confirmed = await (requestConfirmDialog(
+      `Forget ${link.label}? Agents here stop working there. Revoke "T3 Code · …" in ${link.label}'s Connections to end the session there too.`,
+      { variant: "destructive" },
+    ) ?? Promise.resolve(false));
+    if (!confirmed) return;
+    setBusy(true);
+    const result = await unlink({ environmentId, input: { environmentId: link.environmentId } });
+    setBusy(false);
+    if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
+      failureToast("Could not forget the link", String(squashAtomCommandFailure(result)));
+    }
+  };
+  const status =
+    health.kind === "expired"
+      ? "Expired. Link it again with a new pairing code."
+      : health.kind === "unreachable"
+        ? (health.detail ?? "Not answering right now.")
+        : health.kind === "failing"
+          ? health.detail
+          : health.expiresInDays !== null
+            ? `Expires in ${health.expiresInDays} ${health.expiresInDays === 1 ? "day" : "days"}. Link it again to renew.`
+            : "Reachable";
+  return (
+    <div className={ITEM_ROW_CLASSNAME}>
+      <div className={ITEM_ROW_INNER_CLASSNAME}>
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex min-h-5 items-center gap-1.5">
+            <ConnectionStatusDot
+              tooltipText={status}
+              dotClassName={
+                health.kind === "reachable"
+                  ? health.expiresInDays === null
+                    ? "bg-success"
+                    : "bg-warning"
+                  : health.kind === "expired" || health.kind === "failing"
+                    ? "bg-destructive"
+                    : "bg-muted-foreground/30"
+              }
+              pingClassName={null}
+            />
+            <h3 className="text-sm font-medium text-foreground">{link.label}</h3>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {accessConfig[link.access].label} · {status}
+          </p>
+          <p className="truncate text-xs text-muted-foreground/80">{link.urls.join(", ")}</p>
+        </div>
+        {canUnlink ? (
+          <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+            <Button
+              size="xs"
+              variant="destructive-outline"
+              disabled={busy}
+              onClick={() => void forget()}
+            >
+              {busy ? "Forgetting…" : "Forget"}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function LinkEnvironmentAction({ environmentId }: { readonly environmentId: EnvironmentId }) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const [pairingCode, setPairingCode] = useState("");
+  const [access, setAccess] = useState<AuthMcpClientAccess>("approval-required");
+  const [busy, setBusy] = useState(false);
+  const formId = useId();
+  const accessLabelId = `${formId}-access`;
+  const link = useAtomCommand(peerLinkEnvironment.link, { label: "link environment" });
+  const reset = () => {
+    setUrl("");
+    setPairingCode("");
+    setAccess("approval-required");
+  };
+  const submit = async () => {
+    setBusy(true);
+    const result = await link({
+      environmentId,
+      input: { url: url.trim(), pairingCode: pairingCode.trim(), access },
+    });
+    setBusy(false);
+    if (result._tag === "Success") {
+      toastManager.add({ type: "success", title: `Linked ${result.value.label}` });
+      reset();
+      setOpen(false);
+    } else if (!isAtomCommandInterrupted(result)) {
+      failureToast("Could not link the environment", String(squashAtomCommandFailure(result)));
+    }
+  };
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        // A link that finishes after a close would still be made, and would close a reopened form.
+        if (!next && busy) return;
+        setOpen(next);
+        if (!next) reset();
+      }}
+    >
+      <DialogTrigger
+        render={
+          <Button size="xs" variant="default">
+            <PlusIcon className="size-3" />
+            Link
+          </Button>
+        }
+      />
+      <DialogPopup className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Link an environment</DialogTitle>
+          <DialogDescription>
+            Agents here can then launch, message and wait on threads there. It appears in that
+            environment's Connections, where it can be revoked.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <form
+            id={formId}
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void submit();
+            }}
+          >
+            <label className="block space-y-1.5">
+              <span className="block text-xs font-medium text-foreground">Address</span>
+              <Input
+                value={url}
+                onChange={(event) => setUrl(event.target.value)}
+                placeholder="https://box.example.ts.net"
+                disabled={busy}
+                autoFocus
+                nativeInput
+                spellCheck={false}
+              />
+            </label>
+            <label className="block space-y-1.5">
+              <span className="block text-xs font-medium text-foreground">Pairing code</span>
+              <Input
+                value={pairingCode}
+                onChange={(event) => setPairingCode(event.target.value)}
+                placeholder="From that environment's Connections, or t3 pair there"
+                disabled={busy}
+                autoComplete="one-time-code"
+                nativeInput
+                spellCheck={false}
+              />
+            </label>
+            <div className="space-y-2">
+              <span id={accessLabelId} className="block text-xs font-medium">
+                What agents here may do there
+              </span>
+              <RadioGroup
+                aria-labelledby={accessLabelId}
+                value={access}
+                onValueChange={(value) => setAccess(value as AuthMcpClientAccess)}
+              >
+                {AuthMcpClientAccess.literals.map((option) => (
+                  <AccessOption key={option} access={option} selected={option === access} />
+                ))}
+              </RadioGroup>
+              <p className="text-xs text-muted-foreground">
+                An agent here never gets more there than its own mode here either. Threads it starts
+                there cannot change that environment's own threads, projects or settings.
+              </p>
+            </div>
+          </form>
+        </DialogPanel>
+        <DialogFooter variant="bare">
+          <Button variant="outline" type="button" disabled={busy} onClick={() => setOpen(false)}>

@@ -4210,6 +4211,11 @@ export function ConnectionsSettings() {
           }}
         />
       ) : null}
+      {canManageLocalBackend &&