feat(web,mobile): linked environments in Connections

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

@@ -11,6 +11,7 @@ import { AndroidScreenHeader } from "../../components/ui/AndroidScreenHeader";
 import { useRemoteConnections } from "../../state/use-remote-environment-registry";
 import { LocalEnvironmentList } from "./LocalEnvironmentList";
 import { PullRequestRoutingSettings } from "./PullRequestRoutingSettings";
+import { LinkedEnvironmentsSection } from "./LinkedEnvironmentsSection";
 
 export function ConnectionsRouteScreen() {
   const {
@@ -69,6 +70,15 @@ export function ConnectionsRouteScreen() {
           onSetEnabled={onSetEnvironmentEnabled}
           onUpdate={onUpdateEnvironment}
         />
+        {connectedEnvironments
+          .filter((environment) => environment.connectionState === "connected")
+          .map((environment) => (
+            <LinkedEnvironmentsSection
+              key={environment.environmentId}
+              environmentId={environment.environmentId}
+              environmentLabel={environment.environmentLabel}
+            />
+          ))}
         <PullRequestRoutingSettings />
       </ScrollView>
     </View>

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

@@ -0,0 +1,78 @@
+import { peerLinkHealth } from "@t3tools/client-runtime/state/peerLinks";
+import { useFocusEffect } from "@react-navigation/native";
+import { AuthAccessReadScope, type EnvironmentId } from "@t3tools/contracts";
+import * as DateTime from "effect/DateTime";
+import { useCallback, useState } from "react";
+import { AppState, View } from "react-native";
+
+import { AppText as Text } from "../../components/ui/AppText";
+import { useEnvironmentServerConfig } from "../../state/entities";
+import { peerLinkEnvironment } from "../../state/peerLinks";
+import { useEnvironmentQuery } from "../../state/query";
+import { useEnvironmentScope } from "../../state/session";
+import { SettingsSection } from "../settings/components/SettingsSection";
+
+export function LinkedEnvironmentsSection(props: {
+  readonly environmentId: EnvironmentId;
+  readonly environmentLabel: string;
+}) {
+  const config = useEnvironmentServerConfig(props.environmentId);
+  const canRead = useEnvironmentScope(props.environmentId, AuthAccessReadScope);
+  const supported = canRead && config?.environment.capabilities.peerLinks === true;
+  const links = useEnvironmentQuery(
+    supported ? peerLinkEnvironment.list({ environmentId: props.environmentId, input: {} }) : null,
+  );
+  const [nowMs, setNowMs] = useState(Date.now);
+  const hasLinks = supported && (links.data?.links.length ?? 0) > 0;
+  useFocusEffect(
+    useCallback(() => {
+      if (!hasLinks) return;
+      const updateNow = () => setNowMs(Date.now());
+      updateNow();
+      const timer = setInterval(updateNow, 60_000);
+      const subscription = AppState.addEventListener("change", (state) => {
+        if (state === "active") updateNow();
+      });
+      return () => {
+        clearInterval(timer);
+        subscription.remove();
+      };
+    }, [hasLinks]),
+  );
+  if (!supported || links.error || !links.data || links.data.links.length === 0) return null;
+  const now = DateTime.makeUnsafe(nowMs);
+  return (
+    <View className="mt-5 gap-3">
+      <SettingsSection title={`Linked from ${props.environmentLabel}`}>
+        {links.data.links.map((link) => {
+          const health = peerLinkHealth(link, now);
+          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"}`
+                    : "Reachable";
+          return (
+            <View key={link.environmentId} className="gap-0.5 p-4">
+              <Text className="text-base font-t3-bold text-foreground">{link.label}</Text>
+              <Text
+                className={
+                  health.kind === "reachable" && health.expiresInDays === null
+                    ? "text-xs text-foreground-muted"
+                    : "text-xs text-danger-foreground"
+                }
+                numberOfLines={2}
+              >
+                {status}
+              </Text>
+            </View>
+          );
+        })}
+      </SettingsSection>
+    </View>
+  );
+}

apps/mobile/src/features/threads/ThreadRouteScreen.tsx

@@ -486,6 +486,7 @@ function ThreadRouteContent(
   const headerSubtitle = [
     selectedThreadProject?.title ?? null,
     selectedEnvironmentConnection?.environmentLabel ?? null,
+    selectedThread?.linkOrigin ? `From ${selectedThread.linkOrigin.label}` : null,
   ]
     .filter(Boolean)
     .join(" · ");

apps/mobile/src/state/peerLinks.ts

@@ -0,0 +1,5 @@
+import { createPeerLinkEnvironmentAtoms } from "@t3tools/client-runtime/state/peerLinks";
+
+import { connectionAtomRuntime } from "../connection/runtime";
+
+export const peerLinkEnvironment = createPeerLinkEnvironmentAtoms(connectionAtomRuntime);

apps/server/src/auth/RpcAuthorization.ts

@@ -5,7 +5,6 @@ import {
   authScopeRequiredResponse,
   AssetCreateUrlInput,
   AuthAccessReadScope,
-  AuthAccessWriteScope,
   ServerSettingsPatch,
   ProviderInstanceMutation,
   requiredScopesForServerSettingsPatch,
@@ -88,8 +87,6 @@ export const RPC_REQUIRED_SCOPES = {
   [WS_METHODS.serverGetDatabaseStorage]: AuthOrchestrationReadScope,
   [WS_METHODS.serverGetSettings]: AuthOrchestrationReadScope,
   [WS_METHODS.peerLinksList]: AuthAccessReadScope,
-  [WS_METHODS.peerLinksLink]: AuthAccessWriteScope,
-  [WS_METHODS.peerLinksUnlink]: AuthAccessWriteScope,
   [WS_METHODS.serverUpdateSettings]: AuthSettingsWriteScope,
   [WS_METHODS.serverSearchAcpRegistry]: AuthOrchestrationReadScope,
   [WS_METHODS.serverPrepareAcpRegistryAgent]: AuthProvidersManageScope,

apps/web/src/components/ChatView.tsx

@@ -3165,6 +3165,7 @@ export default function ChatView(props: ChatViewProps) {
             activeThreadId={activeThread.id}
             isServerThread={isServerThread}
             activeThreadTitle={activeThread.title}
+            activeThreadLinkOrigin={activeThreadShell?.linkOrigin?.label ?? null}
             activeProject={activeProject ?? null}
             parentThreadLink={parentThreadLink}
             onOpenThread={onOpenRelatedThreadStable}

apps/web/src/components/auth/ConnectAgentSurface.tsx

@@ -24,7 +24,7 @@ import { RadioGroup } from "../ui/radio-group";
 import { Spinner } from "../ui/spinner";
 import { AuthSurfaceShell } from "./AuthSurfaceShell";
 
-const accessConfig: Record<
+export const accessConfig: Record<
   AuthMcpClientAccess,
   { readonly label: string; readonly description: string; readonly icon: LucideIcon }
 > = {
@@ -279,7 +279,7 @@ function ConnectAgentHeading({
   );
 }
 
-function AccessOption({
+export function AccessOption({
   access,
   selected,
 }: {

apps/web/src/components/chat/ChatHeader.tsx

@@ -19,6 +19,7 @@ import {
   type MouseEvent as ReactMouseEvent,
 } from "react";
 import { isTrailingDoubleClick } from "../Sidebar.logic";
+import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { toastManager } from "../ui/toast";
 import { useThreadActionMenu } from "~/hooks/useThreadActionMenu";
@@ -45,6 +46,7 @@ interface ChatHeaderProps {
   activeThreadEnvironmentId: EnvironmentId;
   activeThreadId: ThreadId;
   activeThreadTitle: string;
+  activeThreadLinkOrigin?: string | null | undefined;
   isServerThread: boolean;
   activeProject: EnvironmentProject | null;
   parentThreadLink: { threadId: ThreadId; title: string } | null;
@@ -70,6 +72,7 @@ export const ChatHeader = memo(function ChatHeader({
   activeThreadEnvironmentId,
   activeThreadId,
   activeThreadTitle,
+  activeThreadLinkOrigin,
   isServerThread,
   activeProject,
   parentThreadLink,
@@ -406,6 +409,16 @@ export const ChatHeader = memo(function ChatHeader({
               <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
             </Tooltip>
           )}
+          {renamingTitle === null && activeThreadLinkOrigin ? (
+            <Tooltip>
+              <TooltipTrigger render={<Badge variant="info" size="sm" />}>
+                From {activeThreadLinkOrigin}
+              </TooltipTrigger>
+              <TooltipPopup side="top">
+                Started by an agent on {activeThreadLinkOrigin} through a linked environment.
+              </TooltipPopup>
+            </Tooltip>
+          ) : null}
         </WorkspaceBreadcrumbItem>
       </WorkspaceBreadcrumb>
       {isServerThread ? <GuestShareIndicator threadRef={activeThreadRef} /> : null}

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

@@ -36,6 +36,8 @@ import { LocalEnvironmentSetting } from "./LocalEnvironmentSetting";
 import { searchableSetting } from "./settingsSearch";
 import { EnvironmentIconMenu } from "./EnvironmentIconPicker";
 import { FoldedSettingsSection } from "./FoldedSettingsSection";
+import { LinkedEnvironmentsSettings } from "./LinkedEnvironmentsSettings";
+import { usePeerLinkHosts } from "~/state/peerLinks";
 import { LoadBalancingSettings } from "./LoadBalancingSettings";
 import { PullRequestRoutingSettings } from "./PullRequestRoutingSettings";
 import { Input } from "../ui/input";
@@ -156,6 +158,7 @@ export function ConnectionsSettings({ view }: { readonly view: "environments" |
   const desktopBridge = window.desktopBridge;
   const { environments } = useEnvironments();
   const primaryEnvironment = usePrimaryEnvironment();
+  const peerLinkHosts = usePeerLinkHosts();
   const removeEnvironment = useAtomCommand(environmentCatalog.remove, { reportFailure: false });
   const setEnvironmentEnabled = useAtomCommand(environmentCatalog.setEnabled, {
     reportFailure: false,
@@ -1533,6 +1536,14 @@ export function ConnectionsSettings({ view }: { readonly view: "environments" |
           }}
         />
       ) : null}
+      {peerLinkHosts.map((environment, index) => (
+        <LinkedEnvironmentsSettings
+          key={environment.environmentId}
+          environmentId={environment.environmentId}
+          environmentLabel={peerLinkHosts.length > 1 ? environment.label : null}
+          isSearchTarget={index === 0}
+        />
+      ))}
       <LoadBalancingSettings environments={loadBalancingEnvironments} />
       <PullRequestRoutingSettings environments={loadBalancingEnvironments} />
     </SettingsPageContainer>