Improvements to the dev presence

Author: matt-aitken

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -85,6 +85,13 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
+import {
+  SimpleTooltip,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../primitives/Tooltip";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -515,19 +522,32 @@ export function DevConnection() {
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          variant="minimal/small"
-          className="px-1"
-          LeadingIcon={
-            isConnected ? (
-              <ConnectedIcon className="size-5" />
-            ) : (
-              <DisconnectedIcon className="size-5" />
-            )
-          }
-        />
-      </DialogTrigger>
+      <div>
+        <TooltipProvider disableHoverableContent={true}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div>
+                <DialogTrigger asChild>
+                  <Button
+                    variant="minimal/small"
+                    className="px-1"
+                    LeadingIcon={
+                      isConnected ? (
+                        <ConnectedIcon className="size-5" />
+                      ) : (
+                        <DisconnectedIcon className="size-5" />
+                      )
+                    }
+                  />
+                </DialogTrigger>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right" className={"text-xs"}>
+              {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
       <DialogContent>
         <DialogHeader>
           {isConnected

apps/webapp/app/components/primitives/Tooltip.tsx

@@ -59,6 +59,7 @@ function SimpleTooltip({
   disableHoverableContent = false,
   className,
   buttonClassName,
+  asChild = false,
 }: {
   button: React.ReactNode;
   content: React.ReactNode;
@@ -68,11 +69,12 @@ function SimpleTooltip({
   disableHoverableContent?: boolean;
   className?: string;
   buttonClassName?: string;
+  asChild?: boolean;
 }) {
   return (
     <TooltipProvider disableHoverableContent={disableHoverableContent}>
       <Tooltip>
-        <TooltipTrigger tabIndex={-1} className={cn("h-fit", buttonClassName)}>
+        <TooltipTrigger tabIndex={-1} className={cn("h-fit", buttonClassName)} asChild={asChild}>
           {button}
         </TooltipTrigger>
         <TooltipContent

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

@@ -95,6 +95,7 @@ import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
 import { useDevPresence } from "~/components/DevPresence";
 import { DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
 
 const resizableSettings = {
   parent: {
@@ -1257,15 +1258,16 @@ function ConnectedDevWarning() {
         isConnected ? "h-0 opacity-0" : "opacity-100"
       )}
     >
-      <Callout variant="info" icon={<DisconnectedIcon className="size-6" />} className="mt-2">
+      <Callout
+        variant="error"
+        icon={<DisconnectedIcon className="size-5 shrink-0" />}
+        className="mt-2"
+      >
         <div className="flex flex-col gap-1">
-          <Paragraph variant="small" spacing className="text-error">
-            Your local dev server is not connected to Trigger.dev.
-          </Paragraph>
-          <Paragraph variant="small">Check you're running the CLI:</Paragraph>
-          <Paragraph variant="small">
-            <InlineCode className="whitespace-nowrap">npx trigger.dev@latest dev</InlineCode>
+          <Paragraph variant="small" spacing>
+            Your local dev server is not connectedr. Check you're running the CLI:
           </Paragraph>
+          <ClipboardField variant="secondary/small" value="npx trigger.dev@latest dev" />
         </div>
       </Callout>
     </div>