feat(settings): browse and sync agent skills and instructions

apps/mobile/src/App.tsx

@@ -1,3 +1,4 @@
+import { AgentFileSyncCoordinator } from "./features/settings/AgentFileSyncCoordinator";
 import { installPermissionUpdateNotice } from "./features/connection/permissionUpdateNotice";
 import { installComposerAttachmentUploads } from "./state/composer-attachment-uploads";
 import { installThreadOutboxDelivery } from "./state/threadOutboxDelivery";
@@ -233,6 +234,7 @@ function AppContent() {
     <>
       <SplashScreenCoordinator />
       <SubscriptionUsageCoordinator />
+      <AgentFileSyncCoordinator />
       <GestureHandlerRootView className="flex-1">
         <KeyboardProvider statusBarTranslucent>
           <SafeAreaProvider>

apps/mobile/src/features/settings/AgentFileSyncCoordinator.tsx

@@ -0,0 +1,41 @@
+import { startAgentFileSyncRelay } from "@t3tools/client-runtime/state/agentFileSync";
+import { EnvironmentId } from "@t3tools/contracts";
+import { useEffect, useState } from "react";
+import { AppState } from "react-native";
+import { appAtomRegistry } from "../../state/atom-registry";
+import { agentFileSync } from "../../state/agentFileSync";
+import { useEnvironments } from "../../state/environments";
+
+export function AgentFileSyncCoordinator() {
+  const { environments } = useEnvironments();
+  const [active, setActive] = useState(AppState.currentState === "active");
+  const key = environments
+    .filter(
+      (env) =>
+        env.connection.phase === "connected" &&
+        env.serverConfig?.environment.capabilities.agentFileSync,
+    )
+    .map((env) => env.environmentId)
+    .sort()
+    .join(",");
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Tracks native app activity so background clients stop relaying file changes.
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (state) =>
+      setActive(state === "active"),
+    );
+    return () => subscription.remove();
+  }, []);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Keeps the sync relay running only while the app is active and these connections are mounted.
+  useEffect(
+    () =>
+      active
+        ? startAgentFileSyncRelay(
+            appAtomRegistry,
+            agentFileSync,
+            key ? key.split(",").map((id) => EnvironmentId.make(id)) : [],
+          )
+        : undefined,
+    [active, key],
+  );
+  return null;
+}

apps/mobile/src/features/settings/AgentFileSyncSection.tsx

@@ -0,0 +1,89 @@
+import { useAtomValue } from "@effect/atom-react";
+import { runAtomCommand, squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
+import { AppText as Text } from "../../components/ui/AppText";
+import { appAtomRegistry } from "../../state/atom-registry";
+import { agentFileSync } from "../../state/agentFileSync";
+import { useEnvironmentQuery } from "../../state/query";
+import { ListActionRow as SettingsActionRow } from "../../components/ui/ListActionRow";
+import { SettingsSection } from "./components/SettingsSection";
+
+const syncErrorMessage = (cause: unknown) =>
+  cause instanceof Error ? cause.message : "Could not update sync.";
+
+export function AgentFileSyncSection({ environmentId }: { environmentId: EnvironmentId }) {
+  const links = useEnvironmentQuery(agentFileSync.links({ environmentId, input: {} }));
+  const allowed = useAtomValue(agentFileSync.manage.permissionAtom(environmentId));
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- Owns the subscription refresh timer while these settings are mounted.
+  useEffect(() => {
+    const timer = setInterval(links.refresh, 15_000);
+    return () => clearInterval(timer);
+  }, [links.refresh]);
+  const manage = async (id: string, action: "pause" | "resume" | "remove") => {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runAtomCommand(
+        appAtomRegistry,
+        agentFileSync.manage,
+        { environmentId, input: { id, action } },
+        { reportFailure: false },
+      );
+      if (result._tag === "Failure") {
+        setError(syncErrorMessage(squashAtomCommandFailure(result)));
+      }
+      links.refresh();
+    } catch (cause) {
+      setError(syncErrorMessage(cause));
+    }
+    setBusy(false);
+  };
+  return (
+    <SettingsSection
+      title="Skills & instructions"
+      footer="Choose skills and instruction sections in web or desktop Settings. Sync continues while a T3 client connects both machines. Stopping sync keeps the current files."
+    >
+      {(links.data ?? []).map((link) => (
+        <View key={link.id}>
+          <View className="gap-1 p-4">
+            <Text>
+              From {link.label} · {link.paused ? "Paused" : "Automatic"}
+            </Text>
+            <Text className="text-sm text-foreground-muted">
+              {link.scope.cwd ?? "Personal files"}
+            </Text>
+            {link.error ? (
+              <Text className="text-sm text-danger-foreground">{link.error}</Text>
+            ) : null}
+          </View>
+          <SettingsActionRow
+            label={link.paused ? "Resume sync" : "Pause sync"}
+            disabled={busy || !allowed}
+            onPress={() => void manage(link.id, link.paused ? "resume" : "pause")}
+          />
+          <SettingsActionRow
+            label="Stop sync"
+            disabled={busy || !allowed}
+            onPress={() => void manage(link.id, "remove")}
+          />
+        </View>
+      ))}
+      {!links.data?.length ? (
+        <View className="p-4">
+          <Text className="text-sm text-foreground-muted">
+            {links.error ?? "No automatic sync subscriptions."}
+          </Text>
+        </View>
+      ) : null}
+      {error ? (
+        <View className="p-4">
+          <Text className="text-sm text-danger-foreground">{error}</Text>
+        </View>
+      ) : null}
+    </SettingsSection>
+  );
+}

apps/mobile/src/features/settings/SettingsEnvironmentDetailRouteScreen.tsx

@@ -1,3 +1,4 @@
+import { AgentFileSyncSection } from "./AgentFileSyncSection";
 import * as Dialog from "../../components/ui/Dialog";
 import { useAtom, useAtomValue } from "@effect/atom-react";
 import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
@@ -230,6 +231,9 @@ function EnvironmentDetail({ environmentId }: { readonly environmentId: Environm
               </Text>
             ) : null}
             {notice ? <Text className="px-2 text-sm text-foreground-muted">{notice}</Text> : null}
+            {config?.environment.capabilities.agentFileSync && connected ? (
+              <AgentFileSyncSection environmentId={environmentId} />
+            ) : null}
             {config && !outdated ? (
               <>
                 <SettingsSection title="T3 Code">

apps/mobile/src/state/agentFileSync.ts

@@ -0,0 +1,3 @@
+import { createAgentFileSyncAtoms } from "@t3tools/client-runtime/state/agentFileSync";
+import { connectionAtomRuntime } from "../connection/runtime";
+export const agentFileSync = createAgentFileSyncAtoms(connectionAtomRuntime);