Adds DevPresenceBanner to the Run page

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -21,13 +21,13 @@ import {
   tryCatch,
 } from "@trigger.dev/core/v3";
 import { type RuntimeEnvironmentType } from "@trigger.dev/database";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
 import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
 import tileBgPath from "~/assets/images/[email protected]";
-import { useDevPresence } from "~/components/DevPresence";
+import { DevPresenceBanner, useDevPresence } from "~/components/DevPresence";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { PageBody } from "~/components/layout/AppLayout";
 import { Badge } from "~/components/primitives/Badge";
@@ -195,6 +195,19 @@ export default function Page() {
           }}
           title={`Run #${run.number}`}
         />
+        <AnimatePresence>
+          {environment.type === "DEVELOPMENT" && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="flex"
+            >
+              <DevPresenceBanner />
+            </motion.div>
+          )}
+        </AnimatePresence>
         <PageAccessories>
           <AdminDebugTooltip>
             <Property.Table>