From b210bf5f48875392a6e096253e52774995c6be12 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 20 Jan 2026 17:48:04 +0000
Subject: [PATCH 01/39] Initial hide/show the side menu with toggle switch

---
 .../navigation/EnvironmentSelector.tsx        |  19 +-
 .../app/components/navigation/SideMenu.tsx    | 308 ++++++++++++++++--
 .../components/navigation/SideMenuItem.tsx    |  34 +-
 .../components/navigation/SideMenuSection.tsx |   8 +
 .../route.tsx                                 |   2 +-
 5 files changed, 349 insertions(+), 22 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index def3996f85..c44265158a 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -9,7 +9,7 @@ import { useOrganization, type MatchedOrganization } from "~/hooks/useOrganizati
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { branchesPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
-import { EnvironmentCombo } from "../environments/EnvironmentLabel";
+import { EnvironmentCombo, EnvironmentIcon, environmentFullTitle } from "../environments/EnvironmentLabel";
 import { ButtonContent } from "../primitives/Buttons";
 import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
@@ -22,6 +22,7 @@ import {
   PopoverTrigger,
 } from "../primitives/Popover";
 import { TextLink } from "../primitives/TextLink";
+import { SimpleTooltip } from "../primitives/Tooltip";
 import { V4Badge } from "../V4Badge";
 import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
 import { Badge } from "../primitives/Badge";
@@ -31,11 +32,13 @@ export function EnvironmentSelector({
   project,
   environment,
   className,
+  isCollapsed = false,
 }: {
   organization: MatchedOrganization;
   project: SideMenuProject;
   environment: SideMenuEnvironment;
   className?: string;
+  isCollapsed?: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -48,6 +51,20 @@ export function EnvironmentSelector({
 
   const hasStaging = project.environments.some((env) => env.type === "STAGING");
 
+  if (isCollapsed) {
+    return (
+      <SimpleTooltip
+        button={
+          <div className="flex h-8 w-full items-center justify-center rounded transition-colors hover:bg-charcoal-750">
+            <EnvironmentIcon environment={environment} className="size-5" />
+          </div>
+        }
+        content={environmentFullTitle(environment)}
+        side="right"
+      />
+    );
+  }
+
   return (
     <Popover onOpenChange={(open) => setIsMenuOpen(open)} open={isMenuOpen}>
       <PopoverArrowTrigger
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 9bbf970858..a76e4a42dd 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -5,8 +5,8 @@ import {
   BeakerIcon,
   BellAlertIcon,
   ChartBarIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
-  CircleStackIcon,
   ClockIcon,
   Cog8ToothIcon,
   CogIcon,
@@ -15,14 +15,13 @@ import {
   GlobeAmericasIcon,
   IdentificationIcon,
   KeyIcon,
-  MagnifyingGlassCircleIcon,
   PencilSquareIcon,
   PlusIcon,
   RectangleStackIcon,
   ServerStackIcon,
   Squares2X2Icon,
   TableCellsIcon,
-  UsersIcon,
+  UsersIcon
 } from "@heroicons/react/20/solid";
 import { Link, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
@@ -78,6 +77,7 @@ import {
   v3UsagePath,
   v3WaitpointTokensPath,
 } from "~/utils/pathBuilder";
+import { AlphaBadge } from "../AlphaBadge";
 import { AskAI } from "../AskAI";
 import { FreePlanUsage } from "../billing/FreePlanUsage";
 import { ConnectionIcon, DevPresencePanel, useDevPresence } from "../DevPresence";
@@ -102,7 +102,6 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
-import { AlphaBadge } from "../AlphaBadge";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -130,6 +129,7 @@ export function SideMenu({
 }: SideMenuProps) {
   const borderRef = useRef<HTMLDivElement>(null);
   const [showHeaderDivider, setShowHeaderDivider] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const currentPlan = useCurrentPlan();
   const { isConnected } = useDevPresence();
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
@@ -154,9 +154,11 @@ export function SideMenu({
   return (
     <div
       className={cn(
-        "grid h-full grid-rows-[2.5rem_1fr_auto] overflow-hidden border-r border-grid-bright bg-background-bright transition"
+        "relative grid h-full grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
+        isCollapsed ? "w-14" : "w-56"
       )}
     >
+      <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
       <div
         className={cn(
           "flex items-center overflow-hidden border-b px-1 py-1 transition duration-300",
@@ -169,9 +171,10 @@ export function SideMenu({
             organization={organization}
             project={project}
             user={user}
+            isCollapsed={isCollapsed}
           />
         </div>
-        {isAdmin && !user.isImpersonating ? (
+        {!isCollapsed && isAdmin && !user.isImpersonating ? (
           <TooltipProvider disableHoverableContent={true}>
             <Tooltip>
               <TooltipTrigger>
@@ -182,7 +185,7 @@ export function SideMenu({
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
-        ) : isAdmin && user.isImpersonating ? (
+        ) : !isCollapsed && isAdmin && user.isImpersonating ? (
           <ImpersonationBanner />
         ) : null}
       </div>
@@ -190,16 +193,17 @@ export function SideMenu({
         className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         ref={borderRef}
       >
-        <div className="mb-6 flex flex-col gap-4 px-1">
+        <div className={cn("mb-6 flex flex-col gap-4", isCollapsed ? "px-0.5" : "px-1")}>
           <div className="space-y-1">
-            <SideMenuHeader title={"Environment"} />
+            {!isCollapsed && <SideMenuHeader title={"Environment"} />}
             <div className="flex items-center">
               <EnvironmentSelector
                 organization={organization}
                 project={project}
                 environment={environment}
+                isCollapsed={isCollapsed}
               />
-              {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
+              {!isCollapsed && environment.type === "DEVELOPMENT" && project.engine === "V2" && (
                 <Dialog>
                   <TooltipProvider disableHoverableContent={true}>
                     <Tooltip>
@@ -236,12 +240,14 @@ export function SideMenu({
               activeIconColor="text-tasks"
               to={v3EnvironmentPath(organization, project, environment)}
               data-action="tasks"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Runs"
               icon={RunsIconExtraSmall}
               activeIconColor="text-runs"
               to={v3RunsPath(organization, project, environment)}
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Batches"
@@ -249,6 +255,7 @@ export function SideMenu({
               activeIconColor="text-batches"
               to={v3BatchesPath(organization, project, environment)}
               data-action="batches"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Schedules"
@@ -256,6 +263,7 @@ export function SideMenu({
               activeIconColor="text-schedules"
               to={v3SchedulesPath(organization, project, environment)}
               data-action="schedules"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Queues"
@@ -263,6 +271,7 @@ export function SideMenu({
               activeIconColor="text-queues"
               to={v3QueuesPath(organization, project, environment)}
               data-action="queues"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Deployments"
@@ -270,6 +279,7 @@ export function SideMenu({
               activeIconColor="text-deployments"
               to={v3DeploymentsPath(organization, project, environment)}
               data-action="deployments"
+              isCollapsed={isCollapsed}
             />
             {(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
               <SideMenuItem
@@ -279,6 +289,7 @@ export function SideMenu({
                 to={v3LogsPath(organization, project, environment)}
                 data-action="logs"
                 badge={<AlphaBadge />}
+                isCollapsed={isCollapsed}
               />
             )}
             <SideMenuItem
@@ -287,6 +298,7 @@ export function SideMenu({
               activeIconColor="text-tests"
               to={v3TestPath(organization, project, environment)}
               data-action="test"
+              isCollapsed={isCollapsed}
             />
             {(user.admin || user.isImpersonating || featureFlags.hasQueryAccess) && (
               <SideMenuItem
@@ -296,27 +308,30 @@ export function SideMenu({
                 to={queryPath(organization, project, environment)}
                 data-action="query"
                 badge={<AlphaBadge />}
+                isCollapsed={isCollapsed}
               />
             )}
           </div>
 
-          <SideMenuSection title="Waitpoints">
+          <SideMenuSection title="Waitpoints" isSideMenuCollapsed={isCollapsed}>
             <SideMenuItem
               name="Tokens"
               icon={WaitpointTokenIcon}
               activeIconColor="text-sky-500"
               to={v3WaitpointTokensPath(organization, project, environment)}
               badge={<V4Badge />}
+              isCollapsed={isCollapsed}
             />
           </SideMenuSection>
 
-          <SideMenuSection title="Manage">
+          <SideMenuSection title="Manage" isSideMenuCollapsed={isCollapsed}>
             <SideMenuItem
               name="Bulk actions"
               icon={ListCheckedIcon}
               activeIconColor="text-bulkActions"
               to={v3BulkActionsPath(organization, project, environment)}
               data-action="bulk actions"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="API keys"
@@ -324,6 +339,7 @@ export function SideMenu({
               activeIconColor="text-apiKeys"
               to={v3ApiKeysPath(organization, project, environment)}
               data-action="api keys"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Environment variables"
@@ -331,6 +347,7 @@ export function SideMenu({
               activeIconColor="text-environmentVariables"
               to={v3EnvironmentVariablesPath(organization, project, environment)}
               data-action="environment variables"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Alerts"
@@ -338,6 +355,7 @@ export function SideMenu({
               activeIconColor="text-alerts"
               to={v3ProjectAlertsPath(organization, project, environment)}
               data-action="alerts"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Preview branches"
@@ -346,6 +364,7 @@ export function SideMenu({
               to={branchesPath(organization, project, environment)}
               data-action="preview-branches"
               badge={<V4Badge />}
+              isCollapsed={isCollapsed}
             />
             {isManagedCloud && (
               <SideMenuItem
@@ -354,6 +373,7 @@ export function SideMenu({
                 activeIconColor="text-concurrency"
                 to={concurrencyPath(organization, project, environment)}
                 data-action="concurrency"
+                isCollapsed={isCollapsed}
               />
             )}
             <SideMenuItem
@@ -363,6 +383,7 @@ export function SideMenu({
               to={regionsPath(organization, project, environment)}
               data-action="regions"
               badge={<V4Badge />}
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Limits"
@@ -370,6 +391,7 @@ export function SideMenu({
               activeIconColor="text-limits"
               to={limitsPath(organization, project, environment)}
               data-action="limits"
+              isCollapsed={isCollapsed}
             />
             <SideMenuItem
               name="Project settings"
@@ -377,17 +399,18 @@ export function SideMenu({
               activeIconColor="text-projectSettings"
               to={v3ProjectSettingsPath(organization, project, environment)}
               data-action="project-settings"
+              isCollapsed={isCollapsed}
             />
           </SideMenuSection>
         </div>
       </div>
       <div>
-        <IncidentStatusPanel />
-        <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+        {!isCollapsed && <IncidentStatusPanel />}
+        <div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
           <div className="flex w-full items-center justify-between">
-            <HelpAndAI />
+            <HelpAndAI isCollapsed={isCollapsed} />
           </div>
-          {isFreeUser && (
+          {!isCollapsed && isFreeUser && (
             <FreePlanUsage
               to={v3BillingPath(organization)}
               percentage={currentPlan.v3Usage.usagePercentage}
@@ -404,11 +427,13 @@ function ProjectSelector({
   organization,
   organizations,
   user,
+  isCollapsed = false,
 }: {
   project: SideMenuProject;
   organization: MatchedOrganization;
   organizations: MatchedOrganization[];
   user: SideMenuUser;
+  isCollapsed?: boolean;
 }) {
   const currentPlan = useCurrentPlan();
   const [isOrgMenuOpen, setOrgMenuOpen] = useState(false);
@@ -426,6 +451,135 @@ function ProjectSelector({
     setOrgMenuOpen(false);
   }, [navigation.location?.pathname]);
 
+  if (isCollapsed) {
+    return (
+      <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
+        <TooltipProvider disableHoverableContent>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded transition-colors hover:bg-charcoal-750">
+                <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="text-xs">
+              {organization.title} / {project.name}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <PopoverContent
+          className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          align="start"
+          style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
+        >
+          <div className="flex flex-col gap-2 bg-charcoal-750 p-2">
+            <div className="flex items-center gap-2.5">
+              <Link
+                to={organizationSettingsPath(organization)}
+                className="group relative box-content size-10 overflow-clip rounded-sm bg-charcoal-800"
+              >
+                <Avatar avatar={organization.avatar} size={2.5} orgName={organization.title} />
+                <div className="absolute inset-0 z-10 grid h-full w-full place-items-center bg-black/50 opacity-0 transition group-hover:opacity-100">
+                  <PencilSquareIcon className="size-5 text-text-bright" />
+                </div>
+              </Link>
+              <div className="space-y-0.5">
+                <Paragraph variant="small/bright">{organization.title}</Paragraph>
+                <div className="flex items-baseline gap-2">
+                  {plan && (
+                    <TextLink
+                      variant="secondary"
+                      className="text-xs"
+                      to={v3BillingPath(organization)}
+                    >
+                      {plan} plan
+                    </TextLink>
+                  )}
+                  <TextLink
+                    variant="secondary"
+                    className="text-xs"
+                    to={organizationTeamPath(organization)}
+                  >{simplur`${organization.membersCount} member[|s]`}</TextLink>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <LinkButton
+                variant="secondary/small"
+                to={organizationSettingsPath(organization)}
+                fullWidth
+                iconSpacing="gap-1.5"
+                className="group-hover/button:border-charcoal-500"
+              >
+                <CogIcon className="size-4 text-text-dimmed" />
+                <span className="text-text-bright">Settings</span>
+              </LinkButton>
+              {isManagedCloud && (
+                <LinkButton
+                  variant="secondary/small"
+                  to={v3UsagePath(organization)}
+                  fullWidth
+                  iconSpacing="gap-1.5"
+                  className="group-hover/button:border-charcoal-500"
+                >
+                  <ChartBarIcon className="size-4 text-text-dimmed" />
+                  <span className="text-text-bright">Usage</span>
+                </LinkButton>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1 p-1">
+            {organization.projects.map((p) => {
+              const isSelected = p.id === project.id;
+              return (
+                <PopoverMenuItem
+                  key={p.id}
+                  to={v3ProjectPath(organization, p)}
+                  title={
+                    <div className="flex w-full items-center justify-between text-text-bright">
+                      <span className="grow truncate text-left">{p.name}</span>
+                    </div>
+                  }
+                  isSelected={isSelected}
+                  icon={isSelected ? FolderOpenIcon : FolderIcon}
+                  leadingIconClassName="text-indigo-500"
+                />
+              );
+            })}
+            <PopoverMenuItem to={newProjectPath(organization)} title="New project" icon={PlusIcon} />
+          </div>
+          <div className="border-t border-charcoal-700 p-1">
+            {organizations.length > 1 ? (
+              <SwitchOrganizations organizations={organizations} organization={organization} />
+            ) : (
+              <PopoverMenuItem
+                to={newOrganizationPath()}
+                title="New organization"
+                icon={PlusIcon}
+                leadingIconClassName="text-text-dimmed"
+              />
+            )}
+          </div>
+          <div className="border-t border-charcoal-700 p-1">
+            <PopoverMenuItem
+              to={accountPath()}
+              title="Account"
+              icon={UserProfilePhoto}
+              leadingIconClassName="text-text-dimmed rounded-full border border-transparent"
+            />
+          </div>
+          <div className="border-t border-charcoal-700 p-1">
+            <PopoverMenuItem
+              to={logoutPath()}
+              title="Logout"
+              icon={ArrowRightOnRectangleIcon}
+              leadingIconClassName="text-text-dimmed"
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
   return (
     <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
       <PopoverArrowTrigger
@@ -661,12 +815,128 @@ function SelectorDivider() {
   );
 }
 
-function HelpAndAI() {
+function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
     <>
       <ShortcutsAutoOpen />
-      <HelpAndFeedback />
-      <AskAI />
+      {!isCollapsed && <HelpAndFeedback />}
+      {!isCollapsed && <AskAI />}
     </>
   );
 }
+
+function AnimatedChevron({
+  isHovering,
+  isCollapsed,
+}: {
+  isHovering: boolean;
+  isCollapsed: boolean;
+}) {
+  // When hovering and expanded: left chevron (pointing left to collapse)
+  // When hovering and collapsed: right chevron (pointing right to expand)
+  // When not hovering: straight vertical line
+  
+  const getRotation = () => {
+    if (!isHovering) return { top: 0, bottom: 0 };
+    if (isCollapsed) {
+      // Right chevron
+      return { top: -17, bottom: 17 };
+    } else {
+      // Left chevron
+      return { top: 17, bottom: -17 };
+    }
+  };
+
+  const { top, bottom } = getRotation();
+  
+  // Calculate horizontal offset to keep chevron centered when rotated
+  // Left chevron: translate left (-1.5px)
+  // Right chevron: translate right (+1.5px)
+  const getTranslateX = () => {
+    if (!isHovering) return 0;
+    return isCollapsed ? 1.5 : -1.5;
+  };
+
+  return (
+    <svg
+      width="5"
+      height="24"
+      viewBox="0 0 5 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="overflow-visible text-charcoal-500 group-hover:text-text-bright transition-colors"
+      style={{
+        transform: `translateX(${getTranslateX()}px)`,
+        transition: "transform 200ms ease-out",
+      }}
+    >
+      {/* Top segment */}
+      <line
+        x1="2.5"
+        y1="1"
+        x2="2.5"
+        y2="12"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        style={{
+          transformOrigin: "2.5px 12px",
+          transform: `rotate(${top}deg)`,
+          transition: "transform 200ms ease-out",
+        }}
+      />
+      {/* Bottom segment */}
+      <line
+        x1="2.5"
+        y1="12"
+        x2="2.5"
+        y2="23"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        style={{
+          transformOrigin: "2.5px 12px",
+          transform: `rotate(${bottom}deg)`,
+          transition: "transform 200ms ease-out",
+        }}
+      />
+    </svg>
+  );
+}
+
+function CollapseToggle({
+  isCollapsed,
+  onToggle,
+}: {
+  isCollapsed: boolean;
+  onToggle: () => void;
+}) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
+      <TooltipProvider disableHoverableContent>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={onToggle}
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
+              className={cn(
+                "group flex h-10 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200",
+                isHovering
+                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
+                  : "border border-transparent bg-transparent"
+              )}
+            >
+              <AnimatedChevron isHovering={isHovering} isCollapsed={isCollapsed} />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" className="text-xs">
+            {isCollapsed ? "Expand" : "Collapse"}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 1f89368829..c4cc4abdfb 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -1,8 +1,10 @@
 import { type AnchorHTMLAttributes, type ReactNode } from "react";
+import { Link } from "@remix-run/react";
 import { usePathName } from "~/hooks/usePathName";
 import { cn } from "~/utils/cn";
 import { LinkButton } from "../primitives/Buttons";
-import { type RenderIcon } from "../primitives/Icon";
+import { type RenderIcon, Icon } from "../primitives/Icon";
+import { SimpleTooltip } from "../primitives/Tooltip";
 
 export function SideMenuItem({
   icon,
@@ -14,6 +16,7 @@ export function SideMenuItem({
   to,
   badge,
   target,
+  isCollapsed = false,
 }: {
   icon?: RenderIcon;
   activeIconColor?: string;
@@ -24,10 +27,39 @@ export function SideMenuItem({
   to: string;
   badge?: ReactNode;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+  isCollapsed?: boolean;
 }) {
   const pathName = usePathName();
   const isActive = pathName === to;
 
+  if (isCollapsed) {
+    return (
+      <SimpleTooltip
+        button={
+          <Link
+            to={to}
+            target={target}
+            className={cn(
+              "flex h-8 w-full items-center justify-center rounded text-text-bright transition-colors hover:bg-charcoal-750",
+              isActive ? "bg-tertiary" : ""
+            )}
+          >
+            <Icon
+              icon={icon}
+              className={cn(
+                "size-5",
+                isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
+              )}
+            />
+          </Link>
+        }
+        content={name}
+        side="right"
+        asChild
+      />
+    );
+  }
+
   return (
     <LinkButton
       variant="small-menu-item"
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index af37003575..ac800f125e 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -7,6 +7,8 @@ type Props = {
   initialCollapsed?: boolean;
   onCollapseToggle?: (isCollapsed: boolean) => void;
   children: React.ReactNode;
+  /** When true, hides the section header and shows only children */
+  isSideMenuCollapsed?: boolean;
 };
 
 /** A collapsible section for the side menu
@@ -17,6 +19,7 @@ export function SideMenuSection({
   initialCollapsed = false,
   onCollapseToggle,
   children,
+  isSideMenuCollapsed = false,
 }: Props) {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
 
@@ -26,6 +29,11 @@ export function SideMenuSection({
     onCollapseToggle?.(newIsCollapsed);
   }, [isCollapsed, onCollapseToggle]);
 
+  // When the side menu is collapsed, just render the children without the header
+  if (isSideMenuCollapsed) {
+    return <div>{children}</div>;
+  }
+
   return (
     <div>
       <div
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
index aea6b345ee..3f4be602aa 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
@@ -19,7 +19,7 @@ export default function Project() {
 
   return (
     <>
-      <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
+      <div className="grid grid-cols-[auto_1fr] overflow-hidden">
         <DevPresenceProvider enabled={environment.type === "DEVELOPMENT"}>
           <SideMenu
             user={{ ...user, isImpersonating }}

From a13952bf613a1137af7ba1227eb56084d9c4d6d2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 20 Jan 2026 18:01:09 +0000
Subject: [PATCH 02/39] Move Waitpoint tokens into the main list

---
 .../app/components/navigation/SideMenu.tsx    | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index a76e4a42dd..45f52de799 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -273,6 +273,14 @@ export function SideMenu({
               data-action="queues"
               isCollapsed={isCollapsed}
             />
+              <SideMenuItem
+                name="Waitpoint tokens"
+                icon={WaitpointTokenIcon}
+                activeIconColor="text-sky-500"
+                to={v3WaitpointTokensPath(organization, project, environment)}
+                badge={<V4Badge />}
+                isCollapsed={isCollapsed}
+              />
             <SideMenuItem
               name="Deployments"
               icon={ServerStackIcon}
@@ -313,17 +321,6 @@ export function SideMenu({
             )}
           </div>
 
-          <SideMenuSection title="Waitpoints" isSideMenuCollapsed={isCollapsed}>
-            <SideMenuItem
-              name="Tokens"
-              icon={WaitpointTokenIcon}
-              activeIconColor="text-sky-500"
-              to={v3WaitpointTokensPath(organization, project, environment)}
-              badge={<V4Badge />}
-              isCollapsed={isCollapsed}
-            />
-          </SideMenuSection>
-
           <SideMenuSection title="Manage" isSideMenuCollapsed={isCollapsed}>
             <SideMenuItem
               name="Bulk actions"

From ae6cde05ee93b0c1cf1d1503221c065da756cdde Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 20 Jan 2026 20:10:05 +0000
Subject: [PATCH 03/39] Nicer styling for the toggle button

---
 .../app/components/navigation/SideMenu.tsx    | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 45f52de799..35f334a023 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -856,43 +856,43 @@ function AnimatedChevron({
 
   return (
     <svg
-      width="5"
-      height="24"
-      viewBox="0 0 5 24"
+      width="4"
+      height="30"
+      viewBox="0 0 4 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="overflow-visible text-charcoal-500 group-hover:text-text-bright transition-colors"
+      className="overflow-visible text-charcoal-600 group-hover:text-text-bright transition-colors"
       style={{
         transform: `translateX(${getTranslateX()}px)`,
-        transition: "transform 200ms ease-out",
+        transition: "transform 400ms ease-out",
       }}
     >
       {/* Top segment */}
       <line
-        x1="2.5"
-        y1="1"
-        x2="2.5"
-        y2="12"
+        x1="2"
+        y1="1.5"
+        x2="2"
+        y2="15"
         stroke="currentColor"
-        strokeWidth="2"
+        strokeWidth="3"
         strokeLinecap="round"
         style={{
-          transformOrigin: "2.5px 12px",
+          transformOrigin: "2px 15px",
           transform: `rotate(${top}deg)`,
           transition: "transform 200ms ease-out",
         }}
       />
       {/* Bottom segment */}
       <line
-        x1="2.5"
-        y1="12"
-        x2="2.5"
-        y2="23"
+        x1="2"
+        y1="15"
+        x2="2"
+        y2="28.5"
         stroke="currentColor"
-        strokeWidth="2"
+        strokeWidth="3"
         strokeLinecap="round"
         style={{
-          transformOrigin: "2.5px 12px",
+          transformOrigin: "2px 15px",
           transform: `rotate(${bottom}deg)`,
           transition: "transform 200ms ease-out",
         }}
@@ -912,6 +912,8 @@ function CollapseToggle({
 
   return (
     <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
+      {/* Vertical line to mask the side menu border */}
+      <div className="absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -920,7 +922,7 @@ function CollapseToggle({
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}
               className={cn(
-                "group flex h-10 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200",
+                "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200",
                 isHovering
                   ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
                   : "border border-transparent bg-transparent"

From b4735c20d9388f0149186845c3a4c4b0213aefd5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 20 Jan 2026 21:18:18 +0000
Subject: [PATCH 04/39] Animate collapsing the side menu

---
 .../navigation/EnvironmentSelector.tsx        |  49 ++-
 .../app/components/navigation/SideMenu.tsx    | 329 ++++++++----------
 .../components/navigation/SideMenuHeader.tsx  |  25 +-
 .../components/navigation/SideMenuItem.tsx    |  85 ++---
 .../components/navigation/SideMenuSection.tsx |  22 +-
 5 files changed, 258 insertions(+), 252 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index c44265158a..0678c50e94 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -1,5 +1,6 @@
 import { ChevronRightIcon, Cog8ToothIcon } from "@heroicons/react/20/solid";
 import { useNavigation } from "@remix-run/react";
+import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -9,7 +10,7 @@ import { useOrganization, type MatchedOrganization } from "~/hooks/useOrganizati
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { branchesPath, docsPath, v3BillingPath } from "~/utils/pathBuilder";
-import { EnvironmentCombo, EnvironmentIcon, environmentFullTitle } from "../environments/EnvironmentLabel";
+import { EnvironmentCombo, EnvironmentIcon, EnvironmentLabel, environmentFullTitle } from "../environments/EnvironmentLabel";
 import { ButtonContent } from "../primitives/Buttons";
 import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
@@ -51,16 +52,35 @@ export function EnvironmentSelector({
 
   const hasStaging = project.environments.some((env) => env.type === "STAGING");
 
+  const trigger = (
+    <div
+      className={cn(
+        "flex h-8 items-center gap-1.5 overflow-hidden rounded px-2 transition-colors hover:bg-charcoal-750",
+        className
+      )}
+    >
+      <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
+      <motion.div
+        className="flex min-w-0 flex-1 items-center overflow-hidden"
+        initial={false}
+        animate={{
+          opacity: isCollapsed ? 0 : 1,
+          width: isCollapsed ? 0 : "auto",
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
+      >
+        <EnvironmentLabel environment={environment} className="text-2sm" />
+      </motion.div>
+    </div>
+  );
+
   if (isCollapsed) {
     return (
       <SimpleTooltip
-        button={
-          <div className="flex h-8 w-full items-center justify-center rounded transition-colors hover:bg-charcoal-750">
-            <EnvironmentIcon environment={environment} className="size-5" />
-          </div>
-        }
+        button={trigger}
         content={environmentFullTitle(environment)}
         side="right"
+        buttonClassName="!h-8 block"
       />
     );
   }
@@ -71,9 +91,22 @@ export function EnvironmentSelector({
         isOpen={isMenuOpen}
         overflowHidden
         fullWidth
-        className={cn("h-7 overflow-hidden py-1 pl-1.5", className)}
+        className={cn("h-8 overflow-hidden py-1 pl-0.5", className)}
       >
-        <EnvironmentCombo environment={environment} className="w-full text-2sm" />
+        <span className="flex items-center gap-1.5 text-sm text-text-bright">
+          <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
+          <motion.span
+            className="flex min-w-0 flex-1 items-center overflow-hidden"
+            initial={false}
+            animate={{
+              opacity: isCollapsed ? 0 : 1,
+              width: isCollapsed ? 0 : "auto",
+            }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+          >
+            <EnvironmentLabel environment={environment} className="text-2sm" />
+          </motion.span>
+        </span>
       </PopoverArrowTrigger>
       <PopoverContent
         className="min-w-[14rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 35f334a023..ed7fb8dc0a 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -24,6 +24,7 @@ import {
   UsersIcon
 } from "@heroicons/react/20/solid";
 import { Link, useNavigation } from "@remix-run/react";
+import { motion } from "framer-motion";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
@@ -174,28 +175,32 @@ export function SideMenu({
             isCollapsed={isCollapsed}
           />
         </div>
-        {!isCollapsed && isAdmin && !user.isImpersonating ? (
-          <TooltipProvider disableHoverableContent={true}>
-            <Tooltip>
-              <TooltipTrigger>
-                <LinkButton variant="minimal/medium" to={adminPath()} TrailingIcon={UsersIcon} />
-              </TooltipTrigger>
-              <TooltipContent side="bottom" className={"text-xs"}>
-                Admin dashboard
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        ) : !isCollapsed && isAdmin && user.isImpersonating ? (
-          <ImpersonationBanner />
+        {isAdmin && !user.isImpersonating ? (
+          <CollapsibleElement isCollapsed={isCollapsed}>
+            <TooltipProvider disableHoverableContent={true}>
+              <Tooltip>
+                <TooltipTrigger>
+                  <LinkButton variant="minimal/medium" to={adminPath()} TrailingIcon={UsersIcon} />
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className={"text-xs"}>
+                  Admin dashboard
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </CollapsibleElement>
+        ) : isAdmin && user.isImpersonating ? (
+          <CollapsibleElement isCollapsed={isCollapsed}>
+            <ImpersonationBanner />
+          </CollapsibleElement>
         ) : null}
       </div>
       <div
         className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         ref={borderRef}
       >
-        <div className={cn("mb-6 flex flex-col gap-4", isCollapsed ? "px-0.5" : "px-1")}>
+        <div className={cn("mb-6 flex flex-col gap-4 overflow-hidden", isCollapsed ? "px-0.5" : "px-1")}>
           <div className="space-y-1">
-            {!isCollapsed && <SideMenuHeader title={"Environment"} />}
+            <SideMenuHeader title={"Environment"} isCollapsed={isCollapsed} />
             <div className="flex items-center">
               <EnvironmentSelector
                 organization={organization}
@@ -203,32 +208,34 @@ export function SideMenu({
                 environment={environment}
                 isCollapsed={isCollapsed}
               />
-              {!isCollapsed && environment.type === "DEVELOPMENT" && project.engine === "V2" && (
-                <Dialog>
-                  <TooltipProvider disableHoverableContent={true}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div className="inline-flex">
-                          <DialogTrigger asChild>
-                            <Button
-                              variant="minimal/small"
-                              className="aspect-square h-7 p-1"
-                              LeadingIcon={<ConnectionIcon isConnected={isConnected} />}
-                            />
-                          </DialogTrigger>
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent side="right" className={"text-xs"}>
-                        {isConnected === undefined
-                          ? "Checking connection..."
-                          : isConnected
-                          ? "Your dev server is connected"
-                          : "Your dev server is not connected"}
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                  <DevPresencePanel isConnected={isConnected} />
-                </Dialog>
+              {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
+                <CollapsibleElement isCollapsed={isCollapsed}>
+                  <Dialog>
+                    <TooltipProvider disableHoverableContent={true}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div className="inline-flex">
+                            <DialogTrigger asChild>
+                              <Button
+                                variant="minimal/small"
+                                className="aspect-square h-7 p-1"
+                                LeadingIcon={<ConnectionIcon isConnected={isConnected} />}
+                              />
+                            </DialogTrigger>
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="right" className={"text-xs"}>
+                          {isConnected === undefined
+                            ? "Checking connection..."
+                            : isConnected
+                            ? "Your dev server is connected"
+                            : "Your dev server is not connected"}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    <DevPresencePanel isConnected={isConnected} />
+                  </Dialog>
+                </CollapsibleElement>
               )}
             </div>
           </div>
@@ -402,16 +409,20 @@ export function SideMenu({
         </div>
       </div>
       <div>
-        {!isCollapsed && <IncidentStatusPanel />}
+        <CollapsibleHeight isCollapsed={isCollapsed}>
+          <IncidentStatusPanel />
+        </CollapsibleHeight>
         <div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
           <div className="flex w-full items-center justify-between">
             <HelpAndAI isCollapsed={isCollapsed} />
           </div>
-          {!isCollapsed && isFreeUser && (
-            <FreePlanUsage
-              to={v3BillingPath(organization)}
-              percentage={currentPlan.v3Usage.usagePercentage}
-            />
+          {isFreeUser && (
+            <CollapsibleHeight isCollapsed={isCollapsed}>
+              <FreePlanUsage
+                to={v3BillingPath(organization)}
+                percentage={currentPlan.v3Usage.usagePercentage}
+              />
+            </CollapsibleHeight>
           )}
         </div>
       </div>
@@ -448,14 +459,34 @@ function ProjectSelector({
     setOrgMenuOpen(false);
   }, [navigation.location?.pathname]);
 
-  if (isCollapsed) {
-    return (
-      <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
+  const triggerContent = (
+    <span className="flex items-center gap-1.5 overflow-hidden">
+      <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
+      <motion.span
+        className="flex items-center gap-1.5 overflow-hidden"
+        initial={false}
+        animate={{
+          opacity: isCollapsed ? 0 : 1,
+          width: isCollapsed ? 0 : "auto",
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
+      >
+        <SelectorDivider />
+        <span className="truncate text-2sm font-normal text-text-bright">
+          {project.name ?? "Select a project"}
+        </span>
+      </motion.span>
+    </span>
+  );
+
+  return (
+    <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
+      {isCollapsed ? (
         <TooltipProvider disableHoverableContent>
           <Tooltip>
             <TooltipTrigger asChild>
-              <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded transition-colors hover:bg-charcoal-750">
-                <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
+              <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded px-1.5 transition-colors hover:bg-charcoal-750">
+                {triggerContent}
               </PopoverTrigger>
             </TooltipTrigger>
             <TooltipContent side="right" className="text-xs">
@@ -463,135 +494,15 @@ function ProjectSelector({
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <PopoverContent
-          className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-          align="start"
-          style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
+      ) : (
+        <PopoverArrowTrigger
+          isOpen={isOrgMenuOpen}
+          overflowHidden
+          className="h-8 w-full justify-between py-1 pl-1.5"
         >
-          <div className="flex flex-col gap-2 bg-charcoal-750 p-2">
-            <div className="flex items-center gap-2.5">
-              <Link
-                to={organizationSettingsPath(organization)}
-                className="group relative box-content size-10 overflow-clip rounded-sm bg-charcoal-800"
-              >
-                <Avatar avatar={organization.avatar} size={2.5} orgName={organization.title} />
-                <div className="absolute inset-0 z-10 grid h-full w-full place-items-center bg-black/50 opacity-0 transition group-hover:opacity-100">
-                  <PencilSquareIcon className="size-5 text-text-bright" />
-                </div>
-              </Link>
-              <div className="space-y-0.5">
-                <Paragraph variant="small/bright">{organization.title}</Paragraph>
-                <div className="flex items-baseline gap-2">
-                  {plan && (
-                    <TextLink
-                      variant="secondary"
-                      className="text-xs"
-                      to={v3BillingPath(organization)}
-                    >
-                      {plan} plan
-                    </TextLink>
-                  )}
-                  <TextLink
-                    variant="secondary"
-                    className="text-xs"
-                    to={organizationTeamPath(organization)}
-                  >{simplur`${organization.membersCount} member[|s]`}</TextLink>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <LinkButton
-                variant="secondary/small"
-                to={organizationSettingsPath(organization)}
-                fullWidth
-                iconSpacing="gap-1.5"
-                className="group-hover/button:border-charcoal-500"
-              >
-                <CogIcon className="size-4 text-text-dimmed" />
-                <span className="text-text-bright">Settings</span>
-              </LinkButton>
-              {isManagedCloud && (
-                <LinkButton
-                  variant="secondary/small"
-                  to={v3UsagePath(organization)}
-                  fullWidth
-                  iconSpacing="gap-1.5"
-                  className="group-hover/button:border-charcoal-500"
-                >
-                  <ChartBarIcon className="size-4 text-text-dimmed" />
-                  <span className="text-text-bright">Usage</span>
-                </LinkButton>
-              )}
-            </div>
-          </div>
-          <div className="flex flex-col gap-1 p-1">
-            {organization.projects.map((p) => {
-              const isSelected = p.id === project.id;
-              return (
-                <PopoverMenuItem
-                  key={p.id}
-                  to={v3ProjectPath(organization, p)}
-                  title={
-                    <div className="flex w-full items-center justify-between text-text-bright">
-                      <span className="grow truncate text-left">{p.name}</span>
-                    </div>
-                  }
-                  isSelected={isSelected}
-                  icon={isSelected ? FolderOpenIcon : FolderIcon}
-                  leadingIconClassName="text-indigo-500"
-                />
-              );
-            })}
-            <PopoverMenuItem to={newProjectPath(organization)} title="New project" icon={PlusIcon} />
-          </div>
-          <div className="border-t border-charcoal-700 p-1">
-            {organizations.length > 1 ? (
-              <SwitchOrganizations organizations={organizations} organization={organization} />
-            ) : (
-              <PopoverMenuItem
-                to={newOrganizationPath()}
-                title="New organization"
-                icon={PlusIcon}
-                leadingIconClassName="text-text-dimmed"
-              />
-            )}
-          </div>
-          <div className="border-t border-charcoal-700 p-1">
-            <PopoverMenuItem
-              to={accountPath()}
-              title="Account"
-              icon={UserProfilePhoto}
-              leadingIconClassName="text-text-dimmed rounded-full border border-transparent"
-            />
-          </div>
-          <div className="border-t border-charcoal-700 p-1">
-            <PopoverMenuItem
-              to={logoutPath()}
-              title="Logout"
-              icon={ArrowRightOnRectangleIcon}
-              leadingIconClassName="text-text-dimmed"
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  }
-
-  return (
-    <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
-      <PopoverArrowTrigger
-        isOpen={isOrgMenuOpen}
-        overflowHidden
-        className="h-8 w-full justify-between py-1 pl-1.5"
-      >
-        <span className="flex items-center gap-1.5 overflow-hidden">
-          <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
-          <SelectorDivider />
-          <span className="truncate text-2sm font-normal text-text-bright">
-            {project.name ?? "Select a project"}
-          </span>
-        </span>
-      </PopoverArrowTrigger>
+          {triggerContent}
+        </PopoverArrowTrigger>
+      )}
       <PopoverContent
         className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         align="start"
@@ -812,12 +723,66 @@ function SelectorDivider() {
   );
 }
 
+/** Helper component that fades out but preserves width (collapses to 0 width) */
+function CollapsibleElement({
+  isCollapsed,
+  children,
+  className,
+}: {
+  isCollapsed: boolean;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      className={cn("overflow-hidden", className)}
+      initial={false}
+      animate={{
+        opacity: isCollapsed ? 0 : 1,
+        width: isCollapsed ? 0 : "auto",
+      }}
+      transition={{ duration: 0.15, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/** Helper component that fades out and collapses height completely */
+function CollapsibleHeight({
+  isCollapsed,
+  children,
+  className,
+}: {
+  isCollapsed: boolean;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      className={cn("overflow-hidden", className)}
+      initial={false}
+      animate={{
+        opacity: isCollapsed ? 0 : 1,
+        height: isCollapsed ? 0 : "auto",
+      }}
+      transition={{ duration: 0.15, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
 function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
     <>
       <ShortcutsAutoOpen />
-      {!isCollapsed && <HelpAndFeedback />}
-      {!isCollapsed && <AskAI />}
+      <CollapsibleHeight isCollapsed={isCollapsed}>
+        <HelpAndFeedback />
+      </CollapsibleHeight>
+      <CollapsibleHeight isCollapsed={isCollapsed}>
+        <AskAI />
+      </CollapsibleHeight>
     </>
   );
 }
diff --git a/apps/webapp/app/components/navigation/SideMenuHeader.tsx b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
index 83741a6c7a..9ef4ab489c 100644
--- a/apps/webapp/app/components/navigation/SideMenuHeader.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
@@ -1,9 +1,18 @@
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import { Popover, PopoverContent, PopoverCustomTrigger } from "../primitives/Popover";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 
-export function SideMenuHeader({ title, children }: { title: string; children?: React.ReactNode }) {
+export function SideMenuHeader({
+  title,
+  children,
+  isCollapsed = false,
+}: {
+  title: string;
+  children?: React.ReactNode;
+  isCollapsed?: boolean;
+}) {
   const [isHeaderMenuOpen, setHeaderMenuOpen] = useState(false);
   const navigation = useNavigation();
 
@@ -12,8 +21,16 @@ export function SideMenuHeader({ title, children }: { title: string; children?:
   }, [navigation.location?.pathname]);
 
   return (
-    <div className="group flex items-center justify-between pl-1.5">
-      <h2 className="text-xs">{title}</h2>
+    <motion.div
+      className="group flex items-center justify-between overflow-hidden pl-1.5"
+      initial={false}
+      animate={{
+        height: isCollapsed ? 0 : "auto",
+        opacity: isCollapsed ? 0 : 1,
+      }}
+      transition={{ duration: 0.15, ease: "easeOut" }}
+    >
+      <h2 className="text-xs whitespace-nowrap">{title}</h2>
       {children !== undefined ? (
         <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
           <PopoverCustomTrigger className="p-1">
@@ -27,6 +44,6 @@ export function SideMenuHeader({ title, children }: { title: string; children?:
           </PopoverContent>
         </Popover>
       ) : null}
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index c4cc4abdfb..1ff5c653dc 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -1,8 +1,8 @@
 import { type AnchorHTMLAttributes, type ReactNode } from "react";
 import { Link } from "@remix-run/react";
+import { motion } from "framer-motion";
 import { usePathName } from "~/hooks/usePathName";
 import { cn } from "~/utils/cn";
-import { LinkButton } from "../primitives/Buttons";
 import { type RenderIcon, Icon } from "../primitives/Icon";
 import { SimpleTooltip } from "../primitives/Tooltip";
 
@@ -10,8 +10,6 @@ export function SideMenuItem({
   icon,
   activeIconColor,
   inactiveIconColor,
-  trailingIcon,
-  trailingIconClassName,
   name,
   to,
   badge,
@@ -21,8 +19,6 @@ export function SideMenuItem({
   icon?: RenderIcon;
   activeIconColor?: string;
   inactiveIconColor?: string;
-  trailingIcon?: RenderIcon;
-  trailingIconClassName?: string;
   name: string;
   to: string;
   badge?: ReactNode;
@@ -32,54 +28,47 @@ export function SideMenuItem({
   const pathName = usePathName();
   const isActive = pathName === to;
 
+  const content = (
+    <Link
+      to={to}
+      target={target}
+      className={cn(
+        "flex h-8 items-center gap-2 overflow-hidden rounded px-2 text-text-bright transition-colors hover:bg-charcoal-750",
+        isActive ? "bg-tertiary" : ""
+      )}
+    >
+      <Icon
+        icon={icon}
+        className={cn(
+          "size-5 shrink-0",
+          isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
+        )}
+      />
+      <motion.div
+        className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
+        initial={false}
+        animate={{
+          opacity: isCollapsed ? 0 : 1,
+          width: isCollapsed ? 0 : "auto",
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
+      >
+        <span className="truncate text-2sm">{name}</span>
+        {badge && <div className="ml-1 flex shrink-0 items-center gap-1">{badge}</div>}
+      </motion.div>
+    </Link>
+  );
+
   if (isCollapsed) {
     return (
-      <SimpleTooltip
-        button={
-          <Link
-            to={to}
-            target={target}
-            className={cn(
-              "flex h-8 w-full items-center justify-center rounded text-text-bright transition-colors hover:bg-charcoal-750",
-              isActive ? "bg-tertiary" : ""
-            )}
-          >
-            <Icon
-              icon={icon}
-              className={cn(
-                "size-5",
-                isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
-              )}
-            />
-          </Link>
-        }
-        content={name}
+      <SimpleTooltip 
+        button={content} 
+        content={name} 
         side="right"
-        asChild
+        buttonClassName="!h-8 block"
       />
     );
   }
 
-  return (
-    <LinkButton
-      variant="small-menu-item"
-      fullWidth
-      textAlignLeft
-      LeadingIcon={icon}
-      leadingIconClassName={isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"}
-      TrailingIcon={trailingIcon}
-      trailingIconClassName={trailingIconClassName}
-      to={to}
-      target={target}
-      className={cn(
-        "text-text-bright group-hover:bg-charcoal-750 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
-        isActive ? "bg-tertiary text-text-bright" : "group-hover:text-text-bright"
-      )}
-    >
-      <div className="flex w-full items-center justify-between">
-        {name}
-        <div className="flex items-center gap-1">{badge !== undefined && badge}</div>
-      </div>
-    </LinkButton>
-  );
+  return content;
 }
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index ac800f125e..7a5bf6893c 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -29,18 +29,20 @@ export function SideMenuSection({
     onCollapseToggle?.(newIsCollapsed);
   }, [isCollapsed, onCollapseToggle]);
 
-  // When the side menu is collapsed, just render the children without the header
-  if (isSideMenuCollapsed) {
-    return <div>{children}</div>;
-  }
-
   return (
     <div>
-      <div
-        className="flex cursor-pointer items-center gap-1 rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
+      <motion.div
+        className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
         onClick={handleToggle}
+        initial={false}
+        animate={{
+          height: isSideMenuCollapsed ? 0 : "auto",
+          opacity: isSideMenuCollapsed ? 0 : 1,
+          marginBottom: isSideMenuCollapsed ? 0 : undefined,
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
       >
-        <h2 className="text-xs">{title}</h2>
+        <h2 className="text-xs whitespace-nowrap">{title}</h2>
         <motion.div
           initial={isCollapsed}
           animate={{ rotate: isCollapsed ? -90 : 0 }}
@@ -48,11 +50,11 @@ export function SideMenuSection({
         >
           <ToggleArrowIcon className="size-2" />
         </motion.div>
-      </div>
+      </motion.div>
       <AnimatePresence initial={false}>
         <motion.div
           initial={isCollapsed ? "collapsed" : "expanded"}
-          animate={isCollapsed ? "collapsed" : "expanded"}
+          animate={isCollapsed && !isSideMenuCollapsed ? "collapsed" : "expanded"}
           exit="collapsed"
           variants={{
             expanded: {

From db17007469b490339c9e4cbe1d5b735d4b2177a2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 20 Jan 2026 21:54:15 +0000
Subject: [PATCH 05/39] Improvements to the section dividers

---
 .../navigation/EnvironmentSelector.tsx        |  2 +-
 .../app/components/navigation/SideMenu.tsx    |  4 +-
 .../components/navigation/SideMenuItem.tsx    | 25 ++++++++--
 .../components/navigation/SideMenuSection.tsx | 49 ++++++++++++-------
 4 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 0678c50e94..1b9589a1cf 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -91,7 +91,7 @@ export function EnvironmentSelector({
         isOpen={isMenuOpen}
         overflowHidden
         fullWidth
-        className={cn("h-8 overflow-hidden py-1 pl-0.5", className)}
+        className={cn("h-8 overflow-hidden py-1 pl-1.5", className)}
       >
         <span className="flex items-center gap-1.5 text-sm text-text-bright">
           <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index ed7fb8dc0a..b35b88155e 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -156,7 +156,7 @@ export function SideMenu({
     <div
       className={cn(
         "relative grid h-full grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
-        isCollapsed ? "w-14" : "w-56"
+        isCollapsed ? "w-12" : "w-56"
       )}
     >
       <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
@@ -240,7 +240,7 @@ export function SideMenu({
             </div>
           </div>
 
-          <div>
+          <div className="space-y-px">
             <SideMenuItem
               name="Tasks"
               icon={TaskIconSmall}
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 1ff5c653dc..7c2d73977a 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -48,13 +48,32 @@ export function SideMenuItem({
         className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
         initial={false}
         animate={{
-          opacity: isCollapsed ? 0 : 1,
           width: isCollapsed ? 0 : "auto",
         }}
         transition={{ duration: 0.15, ease: "easeOut" }}
       >
-        <span className="truncate text-2sm">{name}</span>
-        {badge && <div className="ml-1 flex shrink-0 items-center gap-1">{badge}</div>}
+        <motion.span 
+          className="truncate text-2sm"
+          initial={false}
+          animate={{
+            opacity: isCollapsed ? 0 : 1,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+        >
+          {name}
+        </motion.span>
+        {badge && (
+          <motion.div 
+            className="ml-1 flex shrink-0 items-center gap-1"
+            initial={false}
+            animate={{
+              opacity: isCollapsed ? 0 : 1,
+            }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+          >
+            {badge}
+          </motion.div>
+        )}
       </motion.div>
     </Link>
   );
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 7a5bf6893c..d0815a18d2 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -30,27 +30,39 @@ export function SideMenuSection({
   }, [isCollapsed, onCollapseToggle]);
 
   return (
-    <div>
-      <motion.div
-        className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
-        onClick={handleToggle}
-        initial={false}
-        animate={{
-          height: isSideMenuCollapsed ? 0 : "auto",
-          opacity: isSideMenuCollapsed ? 0 : 1,
-          marginBottom: isSideMenuCollapsed ? 0 : undefined,
-        }}
-        transition={{ duration: 0.15, ease: "easeOut" }}
-      >
-        <h2 className="text-xs whitespace-nowrap">{title}</h2>
+    <div className="overflow-hidden">
+      {/* Header container - stays in DOM to preserve height */}
+      <div className="relative">
+        {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          initial={isCollapsed}
-          animate={{ rotate: isCollapsed ? -90 : 0 }}
-          transition={{ duration: 0.2 }}
+          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
+          onClick={isSideMenuCollapsed ? undefined : handleToggle}
+          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
+          initial={false}
+          animate={{
+            opacity: isSideMenuCollapsed ? 0 : 1,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
         >
-          <ToggleArrowIcon className="size-2" />
+          <h2 className="text-xs whitespace-nowrap">{title}</h2>
+          <motion.div
+            initial={isCollapsed}
+            animate={{ rotate: isCollapsed ? -90 : 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <ToggleArrowIcon className="size-2" />
+          </motion.div>
         </motion.div>
-      </motion.div>
+        {/* Divider - absolutely positioned, visible when sidebar is collapsed */}
+        <motion.div
+          className="absolute left-2 right-2 top-1 w-full h-px bg-grid-bright"
+          initial={false}
+          animate={{
+            opacity: isSideMenuCollapsed ? 1 : 0,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+        />
+      </div>
       <AnimatePresence initial={false}>
         <motion.div
           initial={isCollapsed ? "collapsed" : "expanded"}
@@ -73,6 +85,7 @@ export function SideMenuSection({
           style={{ overflow: "hidden" }}
         >
           <motion.div
+            className="space-y-px"
             variants={{
               expanded: {
                 translateY: 0,

From 66fdf23f900e3d27d4af44bfb0f58581ab0f55b1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 09:33:18 +0000
Subject: [PATCH 06/39] Use framer motion instead to animate the svg

---
 .../app/components/navigation/SideMenu.tsx    | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index b35b88155e..cfebac3e49 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -820,20 +820,21 @@ function AnimatedChevron({
   };
 
   return (
-    <svg
+    <motion.svg
       width="4"
       height="30"
       viewBox="0 0 4 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="overflow-visible text-charcoal-600 group-hover:text-text-bright transition-colors"
-      style={{
-        transform: `translateX(${getTranslateX()}px)`,
-        transition: "transform 400ms ease-out",
+      className="pointer-events-none relative z-10 overflow-visible text-charcoal-600 group-hover:text-text-bright transition-colors"
+      initial={false}
+      animate={{
+        x: getTranslateX(),
       }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
     >
       {/* Top segment */}
-      <line
+      <motion.line
         x1="2"
         y1="1.5"
         x2="2"
@@ -841,14 +842,15 @@ function AnimatedChevron({
         stroke="currentColor"
         strokeWidth="3"
         strokeLinecap="round"
-        style={{
-          transformOrigin: "2px 15px",
-          transform: `rotate(${top}deg)`,
-          transition: "transform 200ms ease-out",
+        initial={false}
+        animate={{
+          rotate: top,
         }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        style={{ transformOrigin: "2px 15px" }}
       />
       {/* Bottom segment */}
-      <line
+      <motion.line
         x1="2"
         y1="15"
         x2="2"
@@ -856,13 +858,14 @@ function AnimatedChevron({
         stroke="currentColor"
         strokeWidth="3"
         strokeLinecap="round"
-        style={{
-          transformOrigin: "2px 15px",
-          transform: `rotate(${bottom}deg)`,
-          transition: "transform 200ms ease-out",
+        initial={false}
+        animate={{
+          rotate: bottom,
         }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        style={{ transformOrigin: "2px 15px" }}
       />
-    </svg>
+    </motion.svg>
   );
 }
 
@@ -878,7 +881,7 @@ function CollapseToggle({
   return (
     <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
       {/* Vertical line to mask the side menu border */}
-      <div className="absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
+      <div className="pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>

From 999c8d107fd439a6e85e2bbee88e67a6c6c33178 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 09:33:29 +0000
Subject: [PATCH 07/39] Animate the opacity too

---
 apps/webapp/app/components/navigation/SideMenuItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 7c2d73977a..ca6a2aefbc 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -62,12 +62,12 @@ export function SideMenuItem({
         >
           {name}
         </motion.span>
-        {badge && (
+        {badge && !isCollapsed && (
           <motion.div 
             className="ml-1 flex shrink-0 items-center gap-1"
             initial={false}
             animate={{
-              opacity: isCollapsed ? 0 : 1,
+              opacity: 1,
             }}
             transition={{ duration: 0.15, ease: "easeOut" }}
           >

From 2376c52ab4fa72115c860e1308ef45cf2304a4c4 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 17:32:25 +0000
Subject: [PATCH 08/39] Improves the menu item widths in the collapsed state

---
 .../navigation/EnvironmentSelector.tsx        |   2 +-
 .../app/components/navigation/SideMenu.tsx    | 108 +++++++++---------
 .../components/navigation/SideMenuHeader.tsx  |  28 ++++-
 .../components/navigation/SideMenuItem.tsx    |  99 +++++++---------
 .../components/navigation/SideMenuSection.tsx |   9 +-
 5 files changed, 127 insertions(+), 119 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 1b9589a1cf..3585b03ddd 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -55,7 +55,7 @@ export function EnvironmentSelector({
   const trigger = (
     <div
       className={cn(
-        "flex h-8 items-center gap-1.5 overflow-hidden rounded px-2 transition-colors hover:bg-charcoal-750",
+        "flex h-8 w-full items-center gap-1.5 overflow-hidden rounded pl-1.5 pr-2 transition-colors hover:bg-charcoal-750",
         className
       )}
     >
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index cfebac3e49..6ad01b1459 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -5,7 +5,6 @@ import {
   BeakerIcon,
   BellAlertIcon,
   ChartBarIcon,
-  ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
   Cog8ToothIcon,
@@ -28,6 +27,7 @@ import { motion } from "framer-motion";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
+import { DropdownIcon } from "~/assets/icons/DropdownIcon";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
 import { LogsIcon } from "~/assets/icons/LogsIcon";
@@ -88,13 +88,12 @@ import { Dialog, DialogTrigger } from "../primitives/Dialog";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
-  PopoverArrowTrigger,
   PopoverContent,
   PopoverMenuItem,
-  PopoverTrigger,
+  PopoverTrigger
 } from "../primitives/Popover";
 import { TextLink } from "../primitives/TextLink";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { UserProfilePhoto } from "../UserProfilePhoto";
 import { V4Badge } from "../V4Badge";
@@ -155,18 +154,18 @@ export function SideMenu({
   return (
     <div
       className={cn(
-        "relative grid h-full grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
-        isCollapsed ? "w-12" : "w-56"
+        "relative grid h-full grid-cols-[100%] grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
+        isCollapsed ? "w-[2.75rem]" : "w-56"
       )}
     >
       <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
       <div
         className={cn(
-          "flex items-center overflow-hidden border-b px-1 py-1 transition duration-300",
-          showHeaderDivider ? "border-grid-bright" : "border-transparent"
+          "flex min-w-0 items-center overflow-hidden border-b px-1 py-1 transition duration-300",
+          showHeaderDivider || isCollapsed ? "border-grid-bright" : "border-transparent"
         )}
       >
-        <div className="min-w-0 flex-1">
+        <div className={cn("min-w-0", !isCollapsed && "flex-1")}>
           <ProjectSelector
             organizations={organizations}
             organization={organization}
@@ -198,9 +197,9 @@ export function SideMenu({
         className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         ref={borderRef}
       >
-        <div className={cn("mb-6 flex flex-col gap-4 overflow-hidden", isCollapsed ? "px-0.5" : "px-1")}>
-          <div className="space-y-1">
-            <SideMenuHeader title={"Environment"} isCollapsed={isCollapsed} />
+        <div className="mb-6 flex w-full flex-col gap-4 overflow-hidden px-1">
+          <div className="w-full space-y-1">
+            <SideMenuHeader title={"Environment"} isCollapsed={isCollapsed} collapsedTitle="Env" />
             <div className="flex items-center">
               <EnvironmentSelector
                 organization={organization}
@@ -240,7 +239,7 @@ export function SideMenu({
             </div>
           </div>
 
-          <div className="space-y-px">
+          <div className="w-full space-y-px">
             <SideMenuItem
               name="Tasks"
               icon={TaskIconSmall}
@@ -459,52 +458,51 @@ function ProjectSelector({
     setOrgMenuOpen(false);
   }, [navigation.location?.pathname]);
 
-  const triggerContent = (
-    <span className="flex items-center gap-1.5 overflow-hidden">
-      <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
-      <motion.span
-        className="flex items-center gap-1.5 overflow-hidden"
-        initial={false}
-        animate={{
-          opacity: isCollapsed ? 0 : 1,
-          width: isCollapsed ? 0 : "auto",
-        }}
-        transition={{ duration: 0.15, ease: "easeOut" }}
-      >
-        <SelectorDivider />
-        <span className="truncate text-2sm font-normal text-text-bright">
-          {project.name ?? "Select a project"}
-        </span>
-      </motion.span>
-    </span>
-  );
-
   return (
     <Popover onOpenChange={(open) => setOrgMenuOpen(open)} open={isOrgMenuOpen}>
-      {isCollapsed ? (
-        <TooltipProvider disableHoverableContent>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded px-1.5 transition-colors hover:bg-charcoal-750">
-                {triggerContent}
-              </PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="text-xs">
-              {organization.title} / {project.name}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ) : (
-        <PopoverArrowTrigger
-          isOpen={isOrgMenuOpen}
-          overflowHidden
-          className="h-8 w-full justify-between py-1 pl-1.5"
-        >
-          {triggerContent}
-        </PopoverArrowTrigger>
-      )}
+      <SimpleTooltip
+        button={
+          <PopoverTrigger
+            className={cn(
+              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
+            )}
+          >
+            <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+              <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
+              <span
+                className={cn(
+                  "flex min-w-0 items-center gap-1.5 overflow-hidden transition-all duration-200",
+                  isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
+                )}
+              >
+                <SelectorDivider />
+                <span className="truncate text-2sm font-normal text-text-bright">
+                  {project.name ?? "Select a project"}
+                </span>
+              </span>
+            </span>
+            <span
+              className={cn(
+                "overflow-hidden transition-all duration-200",
+                isCollapsed ? "max-w-0 opacity-0" : "max-w-[16px] opacity-100"
+              )}
+            >
+              <DropdownIcon className="size-4 min-w-4 text-text-dimmed transition group-hover:text-text-bright" />
+            </span>
+          </PopoverTrigger>
+        }
+        content={`${organization.title} / ${project.name}`}
+        side="right"
+        sideOffset={8}
+        hidden={!isCollapsed}
+        buttonClassName="!h-8"
+        asChild
+      />
       <PopoverContent
         className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        side={isCollapsed ? "right" : "bottom"}
+        sideOffset={isCollapsed ? 8 : 4}
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
diff --git a/apps/webapp/app/components/navigation/SideMenuHeader.tsx b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
index 9ef4ab489c..8d975cba43 100644
--- a/apps/webapp/app/components/navigation/SideMenuHeader.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
@@ -8,10 +8,13 @@ export function SideMenuHeader({
   title,
   children,
   isCollapsed = false,
+  collapsedTitle,
 }: {
   title: string;
   children?: React.ReactNode;
   isCollapsed?: boolean;
+  /** When provided, this text stays visible when collapsed and the rest fades out */
+  collapsedTitle?: string;
 }) {
   const [isHeaderMenuOpen, setHeaderMenuOpen] = useState(false);
   const navigation = useNavigation();
@@ -20,17 +23,34 @@ export function SideMenuHeader({
     setHeaderMenuOpen(false);
   }, [navigation.location?.pathname]);
 
+  // If collapsedTitle is provided and title starts with it, split the title
+  const hasCollapsedTitle = collapsedTitle && title.startsWith(collapsedTitle);
+  const visiblePart = hasCollapsedTitle ? collapsedTitle : title;
+  const fadingPart = hasCollapsedTitle ? title.slice(collapsedTitle.length) : "";
+
   return (
     <motion.div
-      className="group flex items-center justify-between overflow-hidden pl-1.5"
+      className="group flex h-4 items-center justify-between overflow-hidden pl-1.5"
       initial={false}
       animate={{
-        height: isCollapsed ? 0 : "auto",
-        opacity: isCollapsed ? 0 : 1,
+        opacity: hasCollapsedTitle ? 1 : isCollapsed ? 0 : 1,
       }}
       transition={{ duration: 0.15, ease: "easeOut" }}
     >
-      <h2 className="text-xs whitespace-nowrap">{title}</h2>
+      <h2 className="text-xs whitespace-nowrap">
+        {visiblePart}
+        {fadingPart && (
+          <motion.span
+            initial={false}
+            animate={{
+              opacity: isCollapsed ? 0 : 1,
+            }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+          >
+            {fadingPart}
+          </motion.span>
+        )}
+      </h2>
       {children !== undefined ? (
         <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
           <PopoverCustomTrigger className="p-1">
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index ca6a2aefbc..4b0ea0b3cc 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -28,66 +28,55 @@ export function SideMenuItem({
   const pathName = usePathName();
   const isActive = pathName === to;
 
-  const content = (
-    <Link
-      to={to}
-      target={target}
-      className={cn(
-        "flex h-8 items-center gap-2 overflow-hidden rounded px-2 text-text-bright transition-colors hover:bg-charcoal-750",
-        isActive ? "bg-tertiary" : ""
-      )}
-    >
-      <Icon
-        icon={icon}
-        className={cn(
-          "size-5 shrink-0",
-          isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
-        )}
-      />
-      <motion.div
-        className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
-        initial={false}
-        animate={{
-          width: isCollapsed ? 0 : "auto",
-        }}
-        transition={{ duration: 0.15, ease: "easeOut" }}
-      >
-        <motion.span 
-          className="truncate text-2sm"
-          initial={false}
-          animate={{
-            opacity: isCollapsed ? 0 : 1,
-          }}
-          transition={{ duration: 0.15, ease: "easeOut" }}
+  return (
+    <SimpleTooltip
+      button={
+        <Link
+          to={to}
+          target={target}
+          className={cn(
+            "flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-charcoal-750",
+            isActive ? "bg-tertiary" : ""
+          )}
         >
-          {name}
-        </motion.span>
-        {badge && !isCollapsed && (
-          <motion.div 
-            className="ml-1 flex shrink-0 items-center gap-1"
+          <Icon
+            icon={icon}
+            className={cn(
+              "size-5 shrink-0",
+              isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
+            )}
+          />
+          <motion.div
+            className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
             initial={false}
             animate={{
-              opacity: 1,
+              width: isCollapsed ? 0 : "auto",
+              opacity: isCollapsed ? 0 : 1,
             }}
-            transition={{ duration: 0.15, ease: "easeOut" }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
           >
-            {badge}
+            <span className="truncate text-2sm">{name}</span>
+            {badge && !isCollapsed && (
+              <motion.div
+                className="ml-1 flex shrink-0 items-center gap-1"
+                initial={false}
+                animate={{
+                  opacity: 1,
+                }}
+                transition={{ duration: 0.15, ease: "easeOut" }}
+              >
+                {badge}
+              </motion.div>
+            )}
           </motion.div>
-        )}
-      </motion.div>
-    </Link>
+        </Link>
+      }
+      content={name}
+      side="right"
+      sideOffset={8}
+      buttonClassName="!h-8 block w-full"
+      hidden={!isCollapsed}
+      asChild
+    />
   );
-
-  if (isCollapsed) {
-    return (
-      <SimpleTooltip 
-        button={content} 
-        content={name} 
-        side="right"
-        buttonClassName="!h-8 block"
-      />
-    );
-  }
-
-  return content;
 }
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index d0815a18d2..0eab5c26bf 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -30,9 +30,9 @@ export function SideMenuSection({
   }, [isCollapsed, onCollapseToggle]);
 
   return (
-    <div className="overflow-hidden">
+    <div className="w-full overflow-hidden">
       {/* Header container - stays in DOM to preserve height */}
-      <div className="relative">
+      <div className="relative w-full">
         {/* Header - fades out when sidebar is collapsed */}
         <motion.div
           className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
@@ -55,7 +55,7 @@ export function SideMenuSection({
         </motion.div>
         {/* Divider - absolutely positioned, visible when sidebar is collapsed */}
         <motion.div
-          className="absolute left-2 right-2 top-1 w-full h-px bg-grid-bright"
+          className="absolute left-2 right-2 top-1 h-px bg-grid-bright"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed ? 1 : 0,
@@ -65,6 +65,7 @@ export function SideMenuSection({
       </div>
       <AnimatePresence initial={false}>
         <motion.div
+          className="w-full"
           initial={isCollapsed ? "collapsed" : "expanded"}
           animate={isCollapsed && !isSideMenuCollapsed ? "collapsed" : "expanded"}
           exit="collapsed"
@@ -85,7 +86,7 @@ export function SideMenuSection({
           style={{ overflow: "hidden" }}
         >
           <motion.div
-            className="space-y-px"
+            className="w-full space-y-px"
             variants={{
               expanded: {
                 translateY: 0,

From aa6f1929b8df61670a7bea182c38a3431c3f5267 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 17:52:51 +0000
Subject: [PATCH 09/39] Adds shortcut to toggle side menu

---
 apps/webapp/app/components/Shortcuts.tsx           |  4 ++++
 apps/webapp/app/components/navigation/SideMenu.tsx | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index cd25d45e06..6fedb3f764 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -82,6 +82,10 @@ function ShortcutContent() {
             <Shortcut name="Filter">
               <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
             </Shortcut>
+            <Shortcut name="Toggle side menu">
+              <ShortcutKey shortcut={{ modifiers: ["mod"]}} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "b" }} variant="medium/bright" />
+            </Shortcut>
             <Shortcut name="Select filter">
               <ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
               <Paragraph variant="small" className="ml-1.5">
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 6ad01b1459..24c16966f3 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -41,6 +41,8 @@ import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
 import { useHasAdminAccess } from "~/hooks/useUser";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { ShortcutKey } from "../primitives/ShortcutKey";
 import { type User } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
@@ -137,6 +139,11 @@ export function SideMenu({
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
 
+  useShortcutKeys({
+    shortcut: { modifiers: ["mod"], key: "b" },
+    action: () => setIsCollapsed((prev) => !prev),
+  });
+
   useEffect(() => {
     const handleScroll = () => {
       if (borderRef.current) {
@@ -897,8 +904,12 @@ function CollapseToggle({
               <AnimatedChevron isHovering={isHovering} isCollapsed={isCollapsed} />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="right" className="text-xs">
+          <TooltipContent side="right" className="flex items-center gap-2 text-xs">
             {isCollapsed ? "Expand" : "Collapse"}
+            <span className="flex items-center">
+              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="small" />
+              <ShortcutKey shortcut={{ key: "b" }} variant="small" />
+            </span>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>

From ae6abd7fe26553bc90d23be22ef32a0b3b9ecbf0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 17:58:28 +0000
Subject: [PATCH 10/39] Fixes width issue with environment selector

---
 .../navigation/EnvironmentSelector.tsx        | 92 ++++++++-----------
 1 file changed, 38 insertions(+), 54 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 3585b03ddd..78e0865402 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -1,6 +1,6 @@
 import { ChevronRightIcon, Cog8ToothIcon } from "@heroicons/react/20/solid";
+import { DropdownIcon } from "~/assets/icons/DropdownIcon";
 import { useNavigation } from "@remix-run/react";
-import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -16,7 +16,6 @@ import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
-  PopoverArrowTrigger,
   PopoverContent,
   PopoverMenuItem,
   PopoverSectionHeader,
@@ -52,64 +51,49 @@ export function EnvironmentSelector({
 
   const hasStaging = project.environments.some((env) => env.type === "STAGING");
 
-  const trigger = (
-    <div
-      className={cn(
-        "flex h-8 w-full items-center gap-1.5 overflow-hidden rounded pl-1.5 pr-2 transition-colors hover:bg-charcoal-750",
-        className
-      )}
-    >
-      <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
-      <motion.div
-        className="flex min-w-0 flex-1 items-center overflow-hidden"
-        initial={false}
-        animate={{
-          opacity: isCollapsed ? 0 : 1,
-          width: isCollapsed ? 0 : "auto",
-        }}
-        transition={{ duration: 0.15, ease: "easeOut" }}
-      >
-        <EnvironmentLabel environment={environment} className="text-2sm" />
-      </motion.div>
-    </div>
-  );
-
-  if (isCollapsed) {
-    return (
+  return (
+    <Popover onOpenChange={(open) => setIsMenuOpen(open)} open={isMenuOpen}>
       <SimpleTooltip
-        button={trigger}
+        button={
+          <PopoverTrigger
+            className={cn(
+              "group flex h-8 w-full items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
+              className
+            )}
+          >
+            <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+              <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
+              <span
+                className={cn(
+                  "flex min-w-0 items-center overflow-hidden transition-all duration-200",
+                  isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
+                )}
+              >
+                <EnvironmentLabel environment={environment} className="text-2sm" />
+              </span>
+            </span>
+            <span
+              className={cn(
+                "overflow-hidden transition-all duration-200",
+                isCollapsed ? "max-w-0 opacity-0" : "max-w-[16px] opacity-100"
+              )}
+            >
+              <DropdownIcon className="size-4 min-w-4 text-text-dimmed transition group-hover:text-text-bright" />
+            </span>
+          </PopoverTrigger>
+        }
         content={environmentFullTitle(environment)}
         side="right"
-        buttonClassName="!h-8 block"
+        sideOffset={8}
+        hidden={!isCollapsed}
+        buttonClassName="!h-8 w-full"
+        asChild
       />
-    );
-  }
-
-  return (
-    <Popover onOpenChange={(open) => setIsMenuOpen(open)} open={isMenuOpen}>
-      <PopoverArrowTrigger
-        isOpen={isMenuOpen}
-        overflowHidden
-        fullWidth
-        className={cn("h-8 overflow-hidden py-1 pl-1.5", className)}
-      >
-        <span className="flex items-center gap-1.5 text-sm text-text-bright">
-          <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
-          <motion.span
-            className="flex min-w-0 flex-1 items-center overflow-hidden"
-            initial={false}
-            animate={{
-              opacity: isCollapsed ? 0 : 1,
-              width: isCollapsed ? 0 : "auto",
-            }}
-            transition={{ duration: 0.15, ease: "easeOut" }}
-          >
-            <EnvironmentLabel environment={environment} className="text-2sm" />
-          </motion.span>
-        </span>
-      </PopoverArrowTrigger>
       <PopoverContent
         className="min-w-[14rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        side={isCollapsed ? "right" : "bottom"}
+        sideOffset={isCollapsed ? 8 : 4}
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >

From e086fe12ad5c67832cd9e604d571427092a9d0a8 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 18:21:23 +0000
Subject: [PATCH 11/39] Smooth transition the env selector

---
 .../app/components/navigation/SideMenu.tsx       | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 24c16966f3..e0578f4731 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -739,17 +739,15 @@ function CollapsibleElement({
   className?: string;
 }) {
   return (
-    <motion.div
-      className={cn("overflow-hidden", className)}
-      initial={false}
-      animate={{
-        opacity: isCollapsed ? 0 : 1,
-        width: isCollapsed ? 0 : "auto",
-      }}
-      transition={{ duration: 0.15, ease: "easeOut" }}
+    <div
+      className={cn(
+        "overflow-hidden transition-all duration-200",
+        isCollapsed ? "max-w-0 opacity-0" : "max-w-[100px] opacity-100",
+        className
+      )}
     >
       {children}
-    </motion.div>
+    </div>
   );
 }
 

From dcc5d0fb52965dbe16b358868f8e42d70df2a11c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 18:25:41 +0000
Subject: [PATCH 12/39] Adds trailingIcon props

---
 apps/webapp/app/components/navigation/SideMenuItem.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 4b0ea0b3cc..a4a0f04a7a 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -10,6 +10,8 @@ export function SideMenuItem({
   icon,
   activeIconColor,
   inactiveIconColor,
+  trailingIcon,
+  trailingIconClassName,
   name,
   to,
   badge,
@@ -19,6 +21,8 @@ export function SideMenuItem({
   icon?: RenderIcon;
   activeIconColor?: string;
   inactiveIconColor?: string;
+  trailingIcon?: RenderIcon;
+  trailingIconClassName?: string;
   name: string;
   to: string;
   badge?: ReactNode;
@@ -68,6 +72,12 @@ export function SideMenuItem({
                 {badge}
               </motion.div>
             )}
+            {trailingIcon && !isCollapsed && (
+              <Icon
+                icon={trailingIcon}
+                className={cn("ml-1 size-4 shrink-0", trailingIconClassName)}
+              />
+            )}
           </motion.div>
         </Link>
       }

From 2280babd92560527490e248efb9c2392aa925b94 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 18:53:37 +0000
Subject: [PATCH 13/39] Improvements to the help and feedback button transition

---
 apps/webapp/app/components/AskAI.tsx          | 38 +++++++++++--------
 .../navigation/HelpAndFeedbackPopover.tsx     | 25 ++++++++++--
 .../app/components/navigation/SideMenu.tsx    |  8 +---
 .../app/components/primitives/Popover.tsx     | 10 +++--
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index 39cc4cdaaf..6086691586 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -5,6 +5,7 @@ import {
   HandThumbUpIcon,
   StopIcon,
 } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 import { type FeedbackComment, KapaProvider, type QA, useChat } from "@kapaai/react-sdk";
 import { useSearchParams } from "@remix-run/react";
 import DOMPurify from "dompurify";
@@ -37,7 +38,7 @@ function useKapaWebsiteId() {
   return routeMatch?.kapa.websiteId;
 }
 
-export function AskAI() {
+export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const websiteId = useKapaWebsiteId();
 
@@ -46,21 +47,28 @@ export function AskAI() {
   }
 
   return (
-    <ClientOnly
-      fallback={
-        <Button
-          variant="small-menu-item"
-          data-action="ask-ai"
-          hideShortcutKey
-          data-modal-override-open-class-ask-ai="true"
-          disabled
-        >
-          <AISparkleIcon className="size-5" />
-        </Button>
-      }
+    <div
+      className={cn(
+        "transition-opacity duration-200",
+        isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
+      )}
     >
-      {() => <AskAIProvider websiteId={websiteId} />}
-    </ClientOnly>
+      <ClientOnly
+        fallback={
+          <Button
+            variant="small-menu-item"
+            data-action="ask-ai"
+            hideShortcutKey
+            data-modal-override-open-class-ask-ai="true"
+            disabled
+          >
+            <AISparkleIcon className="size-5" />
+          </Button>
+        }
+      >
+        {() => <AskAIProvider websiteId={websiteId} />}
+      </ClientOnly>
+    </div>
   );
 }
 
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 93f2843de5..f7aee2df57 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -8,6 +8,7 @@ import {
   SignalIcon,
   StarIcon,
 } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
@@ -24,7 +25,13 @@ import { StepNumber } from "../primitives/StepNumber";
 import { SideMenuItem } from "./SideMenuItem";
 import { Badge } from "../primitives/Badge";
 
-export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?: boolean }) {
+export function HelpAndFeedback({
+  disableShortcut = false,
+  isCollapsed = false,
+}: {
+  disableShortcut?: boolean;
+  isCollapsed?: boolean;
+}) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
 
@@ -33,16 +40,26 @@ export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?:
       <PopoverSideMenuTrigger
         isOpen={isHelpMenuOpen}
         shortcut={{ key: "h", enabledOnInputElements: false }}
-        className="grow pr-2"
+        className={isCollapsed ? "w-full justify-center" : "grow pr-2"}
         disabled={disableShortcut}
+        hideShortcutKey={isCollapsed}
       >
         <div className="flex items-center gap-1.5">
-          <QuestionMarkCircleIcon className="size-4 text-success" />
-          Help & Feedback
+          <QuestionMarkCircleIcon className="size-4.5 shrink-0 text-success" />
+          <span
+            className={cn(
+              "overflow-hidden whitespace-nowrap transition-all duration-150",
+              isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
+            )}
+          >
+            Help & Feedback
+          </span>
         </div>
       </PopoverSideMenuTrigger>
       <PopoverContent
         className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        side={isCollapsed ? "right" : "top"}
+        sideOffset={isCollapsed ? 8 : 4}
         align="start"
       >
         <Fragment>
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index e0578f4731..07425d11b4 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -780,12 +780,8 @@ function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
     <>
       <ShortcutsAutoOpen />
-      <CollapsibleHeight isCollapsed={isCollapsed}>
-        <HelpAndFeedback />
-      </CollapsibleHeight>
-      <CollapsibleHeight isCollapsed={isCollapsed}>
-        <AskAI />
-      </CollapsibleHeight>
+      <HelpAndFeedback isCollapsed={isCollapsed} />
+      <AskAI isCollapsed={isCollapsed} />
     </>
   );
 }
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 02454864c4..c7a7499e50 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -154,10 +154,12 @@ function PopoverSideMenuTrigger({
   children,
   className,
   shortcut,
+  hideShortcutKey = false,
   ...props
 }: {
   isOpen?: boolean;
   shortcut?: useShortcutKeys.ShortcutDefinition;
+  hideShortcutKey?: boolean;
 } & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
   const ref = React.useRef<HTMLButtonElement>(null);
   useShortcutKeys.useShortcutKeys({
@@ -176,14 +178,14 @@ function PopoverSideMenuTrigger({
       {...props}
       ref={ref}
       className={cn(
-        "flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
-        shortcut ? "justify-between" : "",
+        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
         className
       )}
     >
       {children}
-      {shortcut && (
-        <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
+      {shortcut && !hideShortcutKey && (
+        <ShortcutKey className="size-4 flex-none" shortcut={shortcut} variant={"small"} />
       )}
     </PopoverTrigger>
   );

From 8872d479d0805b53e4ef948e8b7706e1e9f2e422 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 20:48:25 +0000
Subject: [PATCH 14/39] Adds disableHoverableContent

---
 apps/webapp/app/components/navigation/EnvironmentSelector.tsx | 1 +
 apps/webapp/app/components/navigation/SideMenu.tsx            | 1 +
 apps/webapp/app/components/navigation/SideMenuItem.tsx        | 1 +
 3 files changed, 3 insertions(+)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 78e0865402..97400af454 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -89,6 +89,7 @@ export function EnvironmentSelector({
         hidden={!isCollapsed}
         buttonClassName="!h-8 w-full"
         asChild
+        disableHoverableContent
       />
       <PopoverContent
         className="min-w-[14rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 07425d11b4..6f6c3b01d4 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -505,6 +505,7 @@ function ProjectSelector({
         hidden={!isCollapsed}
         buttonClassName="!h-8"
         asChild
+        disableHoverableContent
       />
       <PopoverContent
         className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index a4a0f04a7a..a89765ad44 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -87,6 +87,7 @@ export function SideMenuItem({
       buttonClassName="!h-8 block w-full"
       hidden={!isCollapsed}
       asChild
+      disableHoverableContent
     />
   );
 }

From 575a815fb58cb1519f749190afee65999978e0af Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 20:49:04 +0000
Subject: [PATCH 15/39] Make shortcut work when inputs are focused

---
 apps/webapp/app/components/navigation/SideMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 6f6c3b01d4..42315f5bf2 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -140,7 +140,7 @@ export function SideMenu({
   const featureFlags = useFeatureFlags();
 
   useShortcutKeys({
-    shortcut: { modifiers: ["mod"], key: "b" },
+    shortcut: { modifiers: ["mod"], key: "b", enabledOnInputElements: true },
     action: () => setIsCollapsed((prev) => !prev),
   });
 

From 03e808bc31d87dd997b6b3547f9f28d2356a4ab3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 20:54:55 +0000
Subject: [PATCH 16/39] FIxes help and feedback button transition

---
 .../app/components/navigation/HelpAndFeedbackPopover.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index f7aee2df57..41728afc22 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -40,11 +40,11 @@ export function HelpAndFeedback({
       <PopoverSideMenuTrigger
         isOpen={isHelpMenuOpen}
         shortcut={{ key: "h", enabledOnInputElements: false }}
-        className={isCollapsed ? "w-full justify-center" : "grow pr-2"}
+        className={isCollapsed ? "w-full" : "flex-1"}
         disabled={disableShortcut}
         hideShortcutKey={isCollapsed}
       >
-        <div className="flex items-center gap-1.5">
+        <div className="flex items-center gap-1.5 overflow-hidden">
           <QuestionMarkCircleIcon className="size-4.5 shrink-0 text-success" />
           <span
             className={cn(

From c06255ed3b85d3448a08f164c36442cb904df2fb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 21:20:37 +0000
Subject: [PATCH 17/39] Adds a tooltip to the help and feedback button

---
 .../navigation/HelpAndFeedbackPopover.tsx     | 66 ++++++++++++++-----
 .../app/components/primitives/Popover.tsx     |  2 +-
 2 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 41728afc22..01d8013671 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -12,6 +12,7 @@ import { cn } from "~/utils/cn";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Feedback } from "../Feedback";
 import { Shortcuts } from "../Shortcuts";
 import { StepContentContainer } from "../StepContentContainer";
@@ -20,7 +21,9 @@ import { ClipboardField } from "../primitives/ClipboardField";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
 import { Icon } from "../primitives/Icon";
 import { Paragraph } from "../primitives/Paragraph";
-import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
+import { SimpleTooltip } from "../primitives/Tooltip";
+import { ShortcutKey } from "../primitives/ShortcutKey";
 import { StepNumber } from "../primitives/StepNumber";
 import { SideMenuItem } from "./SideMenuItem";
 import { Badge } from "../primitives/Badge";
@@ -35,27 +38,54 @@ export function HelpAndFeedback({
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
 
+  useShortcutKeys({
+    shortcut: disableShortcut ? undefined : { key: "h", enabledOnInputElements: false },
+    action: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setHelpMenuOpen(true);
+    },
+  });
+
   return (
-    <Popover onOpenChange={(open) => setHelpMenuOpen(open)}>
-      <PopoverSideMenuTrigger
-        isOpen={isHelpMenuOpen}
-        shortcut={{ key: "h", enabledOnInputElements: false }}
-        className={isCollapsed ? "w-full" : "flex-1"}
-        disabled={disableShortcut}
-        hideShortcutKey={isCollapsed}
-      >
-        <div className="flex items-center gap-1.5 overflow-hidden">
-          <QuestionMarkCircleIcon className="size-4.5 shrink-0 text-success" />
-          <span
+    <Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
+      <SimpleTooltip
+        button={
+          <PopoverTrigger
             className={cn(
-              "overflow-hidden whitespace-nowrap transition-all duration-150",
-              isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
+              "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750",
+              isCollapsed ? "w-full" : "flex-1 justify-between"
             )}
           >
-            Help & Feedback
-          </span>
-        </div>
-      </PopoverSideMenuTrigger>
+            <span className="flex items-center gap-1.5 overflow-hidden">
+              <QuestionMarkCircleIcon className="size-5 shrink-0 text-success" />
+              <span
+                className={cn(
+                  "overflow-hidden whitespace-nowrap text-2sm text-text-bright transition-all duration-150",
+                  isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
+                )}
+              >
+                Help & Feedback
+              </span>
+            </span>
+            <ShortcutKey
+              className={cn(
+                "size-4 flex-none transition-all duration-150",
+                isCollapsed ? "hidden" : ""
+              )}
+              shortcut={{ key: "h" }}
+              variant="small"
+            />
+          </PopoverTrigger>
+        }
+        content="Help & Feedback"
+        side="right"
+        sideOffset={8}
+        hidden={!isCollapsed}
+        buttonClassName={isCollapsed ? "!h-8 w-full" : "!h-8 flex-1"}
+        asChild
+        disableHoverableContent
+      />
       <PopoverContent
         className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         side={isCollapsed ? "right" : "top"}
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index c7a7499e50..a81e971243 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -178,7 +178,7 @@ function PopoverSideMenuTrigger({
       {...props}
       ref={ref}
       className={cn(
-        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
         shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
         className
       )}

From bc9047bd29824c470bfebf6bc380533e03bd4176 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 21:31:18 +0000
Subject: [PATCH 18/39] Fixes alignment of the help and feedback menu items

---
 apps/webapp/app/components/Shortcuts.tsx            | 13 ++++++-------
 .../navigation/HelpAndFeedbackPopover.tsx           |  3 ++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index 6fedb3f764..cf1b01a703 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -1,18 +1,17 @@
 import { Keyboard } from "lucide-react";
+import { useState } from "react";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { Button } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetHeader,
   SheetTitle,
-  SheetTrigger,
+  SheetTrigger
 } from "./primitives/SheetV3";
 import { ShortcutKey } from "./primitives/ShortcutKey";
-import { Button } from "./primitives/Buttons";
-import { useState } from "react";
-import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 
 export function Shortcuts() {
   return (
@@ -26,8 +25,8 @@ export function Shortcuts() {
           fullWidth
           textAlignLeft
           shortcut={{ modifiers: ["shift"], key: "?", enabled: false }}
-          className="gap-x-0 pl-0.5"
-          iconSpacing="gap-x-0.5"
+          className="gap-x-0 pl-1.5"
+          iconSpacing="gap-x-1.5"
         >
           Shortcuts
         </Button>
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 01d8013671..8f26c540cb 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -223,8 +223,9 @@ export function HelpAndFeedback({
               button={
                 <Button
                   variant="small-menu-item"
+                  className="pl-2"
                   LeadingIcon={EnvelopeIcon}
-                  leadingIconClassName="text-blue-500"
+                  leadingIconClassName="text-blue-500 pr-1"
                   data-action="contact-us"
                   fullWidth
                   textAlignLeft

From 2188f3ee2208f4d5b478aef2fa9bc898bbd90119 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 21:35:05 +0000
Subject: [PATCH 19/39] adds shortcut icon to the help and feedback tooltip

---
 .../app/components/navigation/HelpAndFeedbackPopover.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 8f26c540cb..f9c44009ae 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -78,7 +78,12 @@ export function HelpAndFeedback({
             />
           </PopoverTrigger>
         }
-        content="Help & Feedback"
+        content={
+          <span className="flex items-center gap-1">
+            Help & Feedback
+            <ShortcutKey shortcut={{ key: "h" }} variant="small" />
+          </span>
+        }
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}

From 0485be6c79212df367086ef2e96bbe36a55c56cb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 21 Jan 2026 22:15:32 +0000
Subject: [PATCH 20/39] Adds the incident panel to the collapsed state

---
 .../app/components/navigation/SideMenu.tsx    |  22 ++--
 .../webapp/app/routes/resources.incidents.tsx | 112 ++++++++++++------
 2 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 42315f5bf2..f55a3559c0 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -415,9 +415,7 @@ export function SideMenu({
         </div>
       </div>
       <div>
-        <CollapsibleHeight isCollapsed={isCollapsed}>
-          <IncidentStatusPanel />
-        </CollapsibleHeight>
+        <IncidentStatusPanel isCollapsed={isCollapsed} />
         <div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
           <div className="flex w-full items-center justify-between">
             <HelpAndAI isCollapsed={isCollapsed} />
@@ -763,17 +761,15 @@ function CollapsibleHeight({
   className?: string;
 }) {
   return (
-    <motion.div
-      className={cn("overflow-hidden", className)}
-      initial={false}
-      animate={{
-        opacity: isCollapsed ? 0 : 1,
-        height: isCollapsed ? 0 : "auto",
-      }}
-      transition={{ duration: 0.15, ease: "easeOut" }}
+    <div
+      className={cn(
+        "grid transition-all duration-200 ease-in-out",
+        isCollapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100",
+        className
+      )}
     >
-      {children}
-    </motion.div>
+      <div className="overflow-hidden">{children}</div>
+    </div>
   );
 }
 
diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index 319242c8d8..a1815a4e30 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -2,10 +2,12 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
 import { useCallback, useEffect } from "react";
-import { motion } from "framer-motion";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
+import { cn } from "~/utils/cn";
 import { BetterStackClient } from "~/services/betterstack/betterstack.server";
 
 export async function loader() {
@@ -21,7 +23,7 @@ export async function loader() {
   });
 }
 
-export function IncidentStatusPanel() {
+export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   if (!isManagedCloud) {
     return null;
@@ -45,39 +47,81 @@ export function IncidentStatusPanel() {
 
   const operational = fetcher.data?.operational ?? true;
 
+  if (operational) {
+    return null;
+  }
+
   return (
-    <>
-      {!operational && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-          className="p-1"
-        >
-          <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
-            <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
-              <ExclamationTriangleIcon className="size-4" />
-              <Paragraph variant="small/bright" className="text-warning">
-                Active incident
-              </Paragraph>
-            </div>
-            <Paragraph variant="extra-small/bright" className="text-warning/80">
-              Our team is working on resolving the issue. Check our status page for more
-              information.
-            </Paragraph>
-            <LinkButton
-              variant="secondary/small"
-              to="https://status.trigger.dev"
-              target="_blank"
-              fullWidth
-              className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
-            >
-              <span className="text-warning">View status page</span>
-            </LinkButton>
+    <div className="relative">
+      {/* Expanded: Full incident panel */}
+      <div
+        className={cn(
+          "grid transition-all duration-200 ease-in-out",
+          isCollapsed ? "grid-rows-[0fr] opacity-0 pointer-events-none" : "grid-rows-[1fr] opacity-100"
+        )}
+      >
+        <div className="overflow-hidden">
+          <IncidentPanelContent />
+        </div>
+      </div>
+
+      {/* Collapsed: Icon button with popover */}
+      <div
+        className={cn(
+          "grid transition-all duration-200 ease-in-out",
+          isCollapsed ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="p-1">
+            <Popover>
+              <SimpleTooltip
+                button={
+                  <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded bg-warning/10 transition-colors hover:bg-warning/20">
+                    <ExclamationTriangleIcon className="size-5 text-warning" />
+                  </PopoverTrigger>
+                }
+                content="Active incident"
+                side="right"
+                sideOffset={8}
+                buttonClassName="!h-8 w-full"
+                asChild
+                disableHoverableContent
+              />
+              <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
+                <IncidentPanelContent inPopover />
+              </PopoverContent>
+            </Popover>
           </div>
-        </motion.div>
-      )}
-    </>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IncidentPanelContent({ inPopover = false }: { inPopover?: boolean }) {
+  return (
+    <div className={cn(!inPopover && "p-1")}>
+      <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
+        <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
+          <ExclamationTriangleIcon className="size-4" />
+          <Paragraph variant="small/bright" className="text-warning">
+            Active incident
+          </Paragraph>
+        </div>
+        <Paragraph variant="extra-small/bright" className="text-warning/80">
+          Our team is working on resolving the issue. Check our status page for more information.
+        </Paragraph>
+        <LinkButton
+          variant="secondary/small"
+          to="https://status.trigger.dev"
+          target="_blank"
+          fullWidth
+          className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
+        >
+          <span className="text-warning">View status page</span>
+        </LinkButton>
+      </div>
+    </div>
   );
 }

From 84b160fbb00cd76a9c7ecb9f66fe23e82f2d27bd Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 22 Jan 2026 11:25:11 +0000
Subject: [PATCH 21/39] Adds disable tooltip prop

---
 apps/webapp/app/components/environments/EnvironmentLabel.tsx  | 4 +++-
 apps/webapp/app/components/navigation/EnvironmentSelector.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index 08bbe443dd..04c50d79e7 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -80,11 +80,13 @@ export function EnvironmentLabel({
   className,
   tooltipSideOffset = 34,
   tooltipSide = "right",
+  disableTooltip = false,
 }: {
   environment: Environment;
   className?: string;
   tooltipSideOffset?: number;
   tooltipSide?: "top" | "right" | "bottom" | "left";
+  disableTooltip?: boolean;
 }) {
   const spanRef = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
@@ -117,7 +119,7 @@ export function EnvironmentLabel({
     </span>
   );
 
-  if (isTruncated) {
+  if (isTruncated && !disableTooltip) {
     return (
       <SimpleTooltip
         asChild
diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 97400af454..3e804383d4 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -70,7 +70,7 @@ export function EnvironmentSelector({
                   isCollapsed ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
                 )}
               >
-                <EnvironmentLabel environment={environment} className="text-2sm" />
+                <EnvironmentLabel environment={environment} className="text-2sm" disableTooltip />
               </span>
             </span>
             <span

From 9ff48b461481d3153c0f09997aadd0c6c81c25df Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 11:13:18 +0000
Subject: [PATCH 22/39] Remove v4 badge

---
 .../app/components/navigation/SideMenu.tsx     | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index f55a3559c0..1f917e1860 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -98,7 +98,6 @@ import { TextLink } from "../primitives/TextLink";
 import { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { UserProfilePhoto } from "../UserProfilePhoto";
-import { V4Badge } from "../V4Badge";
 import { EnvironmentSelector } from "./EnvironmentSelector";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
@@ -286,14 +285,13 @@ export function SideMenu({
               data-action="queues"
               isCollapsed={isCollapsed}
             />
-              <SideMenuItem
-                name="Waitpoint tokens"
-                icon={WaitpointTokenIcon}
-                activeIconColor="text-sky-500"
-                to={v3WaitpointTokensPath(organization, project, environment)}
-                badge={<V4Badge />}
-                isCollapsed={isCollapsed}
-              />
+            <SideMenuItem
+              name="Waitpoint tokens"
+              icon={WaitpointTokenIcon}
+              activeIconColor="text-sky-500"
+              to={v3WaitpointTokensPath(organization, project, environment)}
+              isCollapsed={isCollapsed}
+            />
             <SideMenuItem
               name="Deployments"
               icon={ServerStackIcon}
@@ -373,7 +371,6 @@ export function SideMenu({
               activeIconColor="text-preview"
               to={branchesPath(organization, project, environment)}
               data-action="preview-branches"
-              badge={<V4Badge />}
               isCollapsed={isCollapsed}
             />
             {isManagedCloud && (
@@ -392,7 +389,6 @@ export function SideMenu({
               activeIconColor="text-regions"
               to={regionsPath(organization, project, environment)}
               data-action="regions"
-              badge={<V4Badge />}
               isCollapsed={isCollapsed}
             />
             <SideMenuItem

From 91d852ab968be2fefb1e38b5ee36a4ca8889ac11 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 12:06:16 +0000
Subject: [PATCH 23/39] Keep the askAI button visible when collapsed

---
 apps/webapp/app/components/AskAI.tsx          | 93 ++++++++++---------
 .../navigation/HelpAndFeedbackPopover.tsx     | 13 ++-
 .../app/components/navigation/SideMenu.tsx    | 30 +++---
 .../components/navigation/SideMenuSection.tsx |  2 +-
 4 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index 6086691586..48520fce46 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -47,36 +47,31 @@ export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
   }
 
   return (
-    <div
-      className={cn(
-        "transition-opacity duration-200",
-        isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
-      )}
+    <ClientOnly
+      fallback={
+        <Button
+          variant="small-menu-item"
+          data-action="ask-ai"
+          hideShortcutKey
+          data-modal-override-open-class-ask-ai="true"
+          disabled
+          className={isCollapsed ? "w-full justify-center" : ""}
+        >
+          <AISparkleIcon className="size-5" />
+        </Button>
+      }
     >
-      <ClientOnly
-        fallback={
-          <Button
-            variant="small-menu-item"
-            data-action="ask-ai"
-            hideShortcutKey
-            data-modal-override-open-class-ask-ai="true"
-            disabled
-          >
-            <AISparkleIcon className="size-5" />
-          </Button>
-        }
-      >
-        {() => <AskAIProvider websiteId={websiteId} />}
-      </ClientOnly>
-    </div>
+      {() => <AskAIProvider websiteId={websiteId} isCollapsed={isCollapsed} />}
+    </ClientOnly>
   );
 }
 
 type AskAIProviderProps = {
   websiteId: string;
+  isCollapsed?: boolean;
 };
 
-function AskAIProvider({ websiteId }: AskAIProviderProps) {
+function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState<string | undefined>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -120,28 +115,38 @@ function AskAIProvider({ websiteId }: AskAIProviderProps) {
       }}
       botProtectionMechanism="hcaptcha"
     >
-      <TooltipProvider disableHoverableContent>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="inline-flex">
-              <Button
-                variant="small-menu-item"
-                data-action="ask-ai"
-                shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
-                hideShortcutKey
-                data-modal-override-open-class-ask-ai="true"
-                onClick={() => openAskAI()}
-              >
-                <AISparkleIcon className="size-5" />
-              </Button>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="top" className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs">
-            Ask AI
-            <ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
+        <TooltipProvider disableHoverableContent>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className={isCollapsed ? "w-full" : "inline-flex"}>
+                <Button
+                  variant="small-menu-item"
+                  data-action="ask-ai"
+                  shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
+                  hideShortcutKey
+                  data-modal-override-open-class-ask-ai="true"
+                  onClick={() => openAskAI()}
+                  className={isCollapsed ? "w-full justify-center" : ""}
+                >
+                  <AISparkleIcon className="size-5" />
+                </Button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent
+              side={isCollapsed ? "right" : "top"}
+              sideOffset={isCollapsed ? 8 : 4}
+              className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
+            >
+              Ask AI
+              <span className="flex items-center">
+                <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "/" }} variant="medium/bright" />
+              </span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </motion.div>
       <AskAIDialog
         initialQuery={initialQuery}
         isOpen={isOpen}
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index f9c44009ae..b85bb830a5 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -11,6 +11,7 @@ import {
 import { cn } from "~/utils/cn";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useState } from "react";
+import { motion } from "framer-motion";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Feedback } from "../Feedback";
@@ -48,7 +49,8 @@ export function HelpAndFeedback({
   });
 
   return (
-    <Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
+    <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
+      <Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
       <SimpleTooltip
         button={
           <PopoverTrigger
@@ -58,7 +60,7 @@ export function HelpAndFeedback({
             )}
           >
             <span className="flex items-center gap-1.5 overflow-hidden">
-              <QuestionMarkCircleIcon className="size-5 shrink-0 text-success" />
+              <QuestionMarkCircleIcon className="size-5 min-w-5 shrink-0 text-success" />
               <span
                 className={cn(
                   "overflow-hidden whitespace-nowrap text-2sm text-text-bright transition-all duration-150",
@@ -74,14 +76,14 @@ export function HelpAndFeedback({
                 isCollapsed ? "hidden" : ""
               )}
               shortcut={{ key: "h" }}
-              variant="small"
+              variant="medium/bright"
             />
           </PopoverTrigger>
         }
         content={
           <span className="flex items-center gap-1">
             Help & Feedback
-            <ShortcutKey shortcut={{ key: "h" }} variant="small" />
+            <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
           </span>
         }
         side="right"
@@ -242,6 +244,7 @@ export function HelpAndFeedback({
           </div>
         </Fragment>
       </PopoverContent>
-    </Popover>
+      </Popover>
+    </motion.div>
   );
 }
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 1f917e1860..c0bd3ec565 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -23,7 +23,7 @@ import {
   UsersIcon
 } from "@heroicons/react/20/solid";
 import { Link, useNavigation } from "@remix-run/react";
-import { motion } from "framer-motion";
+import { LayoutGroup, motion } from "framer-motion";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
@@ -412,10 +412,12 @@ export function SideMenu({
       </div>
       <div>
         <IncidentStatusPanel isCollapsed={isCollapsed} />
-        <div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
-          <div className="flex w-full items-center justify-between">
-            <HelpAndAI isCollapsed={isCollapsed} />
-          </div>
+        <motion.div
+          layout
+          transition={{ duration: 0.2, ease: "easeInOut" }}
+          className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}
+        >
+          <HelpAndAI isCollapsed={isCollapsed} />
           {isFreeUser && (
             <CollapsibleHeight isCollapsed={isCollapsed}>
               <FreePlanUsage
@@ -424,7 +426,7 @@ export function SideMenu({
               />
             </CollapsibleHeight>
           )}
-        </div>
+        </motion.div>
       </div>
     </div>
   );
@@ -771,11 +773,13 @@ function CollapsibleHeight({
 
 function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
-    <>
-      <ShortcutsAutoOpen />
-      <HelpAndFeedback isCollapsed={isCollapsed} />
-      <AskAI isCollapsed={isCollapsed} />
-    </>
+    <LayoutGroup>
+      <div className={cn("flex w-full", isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between")}>
+        <ShortcutsAutoOpen />
+        <HelpAndFeedback isCollapsed={isCollapsed} />
+        <AskAI isCollapsed={isCollapsed} />
+      </div>
+    </LayoutGroup>
   );
 }
 
@@ -894,8 +898,8 @@ function CollapseToggle({
           <TooltipContent side="right" className="flex items-center gap-2 text-xs">
             {isCollapsed ? "Expand" : "Collapse"}
             <span className="flex items-center">
-              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="small" />
-              <ShortcutKey shortcut={{ key: "b" }} variant="small" />
+              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "b" }} variant="medium/bright" />
             </span>
           </TooltipContent>
         </Tooltip>
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 0eab5c26bf..9e264ae293 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -55,7 +55,7 @@ export function SideMenuSection({
         </motion.div>
         {/* Divider - absolutely positioned, visible when sidebar is collapsed */}
         <motion.div
-          className="absolute left-2 right-2 top-1 h-px bg-grid-bright"
+          className="absolute left-2 right-2 top-1 h-px bg-charcoal-600"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed ? 1 : 0,

From ac20a5e65024c11e52977aed83edfbdce385ef7b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 15:03:06 +0000
Subject: [PATCH 24/39] Make sure the side menu can scroll

---
 .../app/components/navigation/SideMenu.tsx    | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index c0bd3ec565..0c7d545791 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -160,17 +160,18 @@ export function SideMenu({
   return (
     <div
       className={cn(
-        "relative grid h-full grid-cols-[100%] grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
+        "relative h-full border-r border-grid-bright bg-background-bright transition-all duration-200",
         isCollapsed ? "w-[2.75rem]" : "w-56"
       )}
     >
       <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
-      <div
-        className={cn(
-          "flex min-w-0 items-center overflow-hidden border-b px-1 py-1 transition duration-300",
-          showHeaderDivider || isCollapsed ? "border-grid-bright" : "border-transparent"
-        )}
-      >
+      <div className="absolute inset-0 grid grid-cols-[100%] grid-rows-[2.5rem_1fr_auto] overflow-hidden">
+        <div
+          className={cn(
+            "flex min-w-0 items-center overflow-hidden border-b px-1 py-1 transition duration-300",
+            showHeaderDivider || isCollapsed ? "border-grid-bright" : "border-transparent"
+          )}
+        >
         <div className={cn("min-w-0", !isCollapsed && "flex-1")}>
           <ProjectSelector
             organizations={organizations}
@@ -200,7 +201,12 @@ export function SideMenu({
         ) : null}
       </div>
       <div
-        className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className={cn(
+          "min-h-0 overflow-y-auto pt-2",
+          isCollapsed
+            ? "scrollbar-none"
+            : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        )}
         ref={borderRef}
       >
         <div className="mb-6 flex w-full flex-col gap-4 overflow-hidden px-1">
@@ -428,6 +434,7 @@ export function SideMenu({
           )}
         </motion.div>
       </div>
+      </div>
     </div>
   );
 }

From cc879afd64ac32c81b6c3c0c645432bd5fa43d83 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 16:25:55 +0000
Subject: [PATCH 25/39] Animate the incident panel

---
 .../webapp/app/routes/resources.incidents.tsx | 146 ++++++++++--------
 1 file changed, 84 insertions(+), 62 deletions(-)

diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index a1815a4e30..600ca38884 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -1,13 +1,13 @@
 import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
+import { motion } from "framer-motion";
 import { useCallback, useEffect } from "react";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
-import { cn } from "~/utils/cn";
 import { BetterStackClient } from "~/services/betterstack/betterstack.server";
 
 export async function loader() {
@@ -52,76 +52,98 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
   }
 
   return (
-    <div className="relative">
-      {/* Expanded: Full incident panel */}
-      <div
-        className={cn(
-          "grid transition-all duration-200 ease-in-out",
-          isCollapsed ? "grid-rows-[0fr] opacity-0 pointer-events-none" : "grid-rows-[1fr] opacity-100"
-        )}
-      >
-        <div className="overflow-hidden">
-          <IncidentPanelContent />
-        </div>
-      </div>
+    <Popover>
+      <div className="p-1">
+        {/* Expanded panel - animated height and opacity */}
+        <motion.div
+          initial={false}
+          animate={{
+            height: isCollapsed ? 0 : "auto",
+            opacity: isCollapsed ? 0 : 1,
+          }}
+          transition={{ duration: 0.15 }}
+          className="overflow-hidden"
+        >
+          <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
+            {/* Header */}
+            <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
+              <ExclamationTriangleIcon className="size-4" />
+              <Paragraph variant="small/bright" className="text-warning">
+                Active incident
+              </Paragraph>
+            </div>
 
-      {/* Collapsed: Icon button with popover */}
-      <div
-        className={cn(
-          "grid transition-all duration-200 ease-in-out",
-          isCollapsed ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
-        )}
-      >
-        <div className="overflow-hidden">
-          <div className="p-1">
-            <Popover>
-              <SimpleTooltip
-                button={
-                  <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded bg-warning/10 transition-colors hover:bg-warning/20">
-                    <ExclamationTriangleIcon className="size-5 text-warning" />
-                  </PopoverTrigger>
-                }
-                content="Active incident"
-                side="right"
-                sideOffset={8}
-                buttonClassName="!h-8 w-full"
-                asChild
-                disableHoverableContent
-              />
-              <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
-                <IncidentPanelContent inPopover />
-              </PopoverContent>
-            </Popover>
+            {/* Description */}
+            <Paragraph variant="extra-small/bright" className="text-warning/80">
+              Our team is working on resolving the issue. Check our status page for more
+              information.
+            </Paragraph>
+
+            {/* Button */}
+            <LinkButton
+              variant="secondary/small"
+              to="https://status.trigger.dev"
+              target="_blank"
+              fullWidth
+              className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
+            >
+              <span className="text-warning">View status page</span>
+            </LinkButton>
           </div>
-        </div>
+        </motion.div>
+
+        {/* Collapsed button - animated height and opacity */}
+        <motion.div
+          initial={false}
+          animate={{
+            height: isCollapsed ? "auto" : 0,
+            opacity: isCollapsed ? 1 : 0,
+          }}
+          transition={{ duration: 0.15 }}
+          className="overflow-hidden"
+        >
+          <SimpleTooltip
+            button={
+              <PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-warning/20 bg-warning/10 transition-colors hover:border-warning/30 hover:bg-warning/20">
+                <ExclamationTriangleIcon className="size-5 text-warning" />
+              </PopoverTrigger>
+            }
+            content="Active incident"
+            side="right"
+            sideOffset={8}
+            disableHoverableContent
+            asChild
+          />
+        </motion.div>
       </div>
-    </div>
+      <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
+        <IncidentPopoverContent />
+      </PopoverContent>
+    </Popover>
   );
 }
 
-function IncidentPanelContent({ inPopover = false }: { inPopover?: boolean }) {
+function IncidentPopoverContent() {
   return (
-    <div className={cn(!inPopover && "p-1")}>
-      <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
-        <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
-          <ExclamationTriangleIcon className="size-4" />
-          <Paragraph variant="small/bright" className="text-warning">
-            Active incident
-          </Paragraph>
-        </div>
-        <Paragraph variant="extra-small/bright" className="text-warning/80">
-          Our team is working on resolving the issue. Check our status page for more information.
+    <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
+      <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
+        <ExclamationTriangleIcon className="size-4" />
+        <Paragraph variant="small/bright" className="text-warning">
+          Active incident
         </Paragraph>
-        <LinkButton
-          variant="secondary/small"
-          to="https://status.trigger.dev"
-          target="_blank"
-          fullWidth
-          className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
-        >
-          <span className="text-warning">View status page</span>
-        </LinkButton>
       </div>
+      <Paragraph variant="extra-small/bright" className="text-warning/80">
+        Our team is working on resolving the issue. Check our status page for more information.
+      </Paragraph>
+      <LinkButton
+        variant="secondary/small"
+        to="https://status.trigger.dev"
+        target="_blank"
+        fullWidth
+        className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
+      >
+        <span className="text-warning">View status page</span>
+      </LinkButton>
     </div>
   );
 }

From ff65c759bbb1e4f8bb4cf2e0a61e142fd97894f0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 16:40:08 +0000
Subject: [PATCH 26/39] Colored icons for main features

---
 .../app/components/navigation/SideMenu.tsx    | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 0c7d545791..faa26dfa53 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -256,6 +256,7 @@ export function SideMenu({
               name="Tasks"
               icon={TaskIconSmall}
               activeIconColor="text-tasks"
+              inactiveIconColor="text-tasks"
               to={v3EnvironmentPath(organization, project, environment)}
               data-action="tasks"
               isCollapsed={isCollapsed}
@@ -264,6 +265,7 @@ export function SideMenu({
               name="Runs"
               icon={RunsIconExtraSmall}
               activeIconColor="text-runs"
+              inactiveIconColor="text-runs"
               to={v3RunsPath(organization, project, environment)}
               isCollapsed={isCollapsed}
             />
@@ -271,6 +273,7 @@ export function SideMenu({
               name="Batches"
               icon={Squares2X2Icon}
               activeIconColor="text-batches"
+              inactiveIconColor="text-batches"
               to={v3BatchesPath(organization, project, environment)}
               data-action="batches"
               isCollapsed={isCollapsed}
@@ -279,6 +282,7 @@ export function SideMenu({
               name="Schedules"
               icon={ClockIcon}
               activeIconColor="text-schedules"
+              inactiveIconColor="text-schedules"
               to={v3SchedulesPath(organization, project, environment)}
               data-action="schedules"
               isCollapsed={isCollapsed}
@@ -287,6 +291,7 @@ export function SideMenu({
               name="Queues"
               icon={RectangleStackIcon}
               activeIconColor="text-queues"
+              inactiveIconColor="text-queues"
               to={v3QueuesPath(organization, project, environment)}
               data-action="queues"
               isCollapsed={isCollapsed}
@@ -295,6 +300,7 @@ export function SideMenu({
               name="Waitpoint tokens"
               icon={WaitpointTokenIcon}
               activeIconColor="text-sky-500"
+              inactiveIconColor="text-sky-500"
               to={v3WaitpointTokensPath(organization, project, environment)}
               isCollapsed={isCollapsed}
             />
@@ -302,6 +308,7 @@ export function SideMenu({
               name="Deployments"
               icon={ServerStackIcon}
               activeIconColor="text-deployments"
+              inactiveIconColor="text-deployments"
               to={v3DeploymentsPath(organization, project, environment)}
               data-action="deployments"
               isCollapsed={isCollapsed}
@@ -311,6 +318,7 @@ export function SideMenu({
                 name="Logs"
                 icon={LogsIcon}
                 activeIconColor="text-logs"
+                inactiveIconColor="text-logs"
                 to={v3LogsPath(organization, project, environment)}
                 data-action="logs"
                 badge={<AlphaBadge />}
@@ -321,6 +329,7 @@ export function SideMenu({
               name="Test"
               icon={BeakerIcon}
               activeIconColor="text-tests"
+              inactiveIconColor="text-tests"
               to={v3TestPath(organization, project, environment)}
               data-action="test"
               isCollapsed={isCollapsed}
@@ -330,6 +339,7 @@ export function SideMenu({
                 name="Query"
                 icon={TableCellsIcon}
                 activeIconColor="text-purple-500"
+                inactiveIconColor="text-purple-500"
                 to={queryPath(organization, project, environment)}
                 data-action="query"
                 badge={<AlphaBadge />}
@@ -342,7 +352,8 @@ export function SideMenu({
             <SideMenuItem
               name="Bulk actions"
               icon={ListCheckedIcon}
-              activeIconColor="text-bulkActions"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3BulkActionsPath(organization, project, environment)}
               data-action="bulk actions"
               isCollapsed={isCollapsed}
@@ -350,7 +361,8 @@ export function SideMenu({
             <SideMenuItem
               name="API keys"
               icon={KeyIcon}
-              activeIconColor="text-apiKeys"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3ApiKeysPath(organization, project, environment)}
               data-action="api keys"
               isCollapsed={isCollapsed}
@@ -358,7 +370,8 @@ export function SideMenu({
             <SideMenuItem
               name="Environment variables"
               icon={IdentificationIcon}
-              activeIconColor="text-environmentVariables"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3EnvironmentVariablesPath(organization, project, environment)}
               data-action="environment variables"
               isCollapsed={isCollapsed}
@@ -366,7 +379,8 @@ export function SideMenu({
             <SideMenuItem
               name="Alerts"
               icon={BellAlertIcon}
-              activeIconColor="text-alerts"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3ProjectAlertsPath(organization, project, environment)}
               data-action="alerts"
               isCollapsed={isCollapsed}
@@ -374,7 +388,8 @@ export function SideMenu({
             <SideMenuItem
               name="Preview branches"
               icon={BranchEnvironmentIconSmall}
-              activeIconColor="text-preview"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={branchesPath(organization, project, environment)}
               data-action="preview-branches"
               isCollapsed={isCollapsed}
@@ -383,7 +398,8 @@ export function SideMenu({
               <SideMenuItem
                 name="Concurrency"
                 icon={ConcurrencyIcon}
-                activeIconColor="text-concurrency"
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
                 to={concurrencyPath(organization, project, environment)}
                 data-action="concurrency"
                 isCollapsed={isCollapsed}
@@ -392,7 +408,8 @@ export function SideMenu({
             <SideMenuItem
               name="Regions"
               icon={GlobeAmericasIcon}
-              activeIconColor="text-regions"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={regionsPath(organization, project, environment)}
               data-action="regions"
               isCollapsed={isCollapsed}
@@ -400,7 +417,8 @@ export function SideMenu({
             <SideMenuItem
               name="Limits"
               icon={AdjustmentsHorizontalIcon}
-              activeIconColor="text-limits"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={limitsPath(organization, project, environment)}
               data-action="limits"
               isCollapsed={isCollapsed}
@@ -408,7 +426,8 @@ export function SideMenu({
             <SideMenuItem
               name="Project settings"
               icon={Cog8ToothIcon}
-              activeIconColor="text-projectSettings"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3ProjectSettingsPath(organization, project, environment)}
               data-action="project-settings"
               isCollapsed={isCollapsed}

From 702f6303acdfbff981c1a913fda58b92f57fba79 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 17:07:41 +0000
Subject: [PATCH 27/39] Fix for full width env selector

---
 .../app/components/navigation/EnvironmentSelector.tsx    | 4 ++--
 apps/webapp/app/components/navigation/SideMenu.tsx       | 9 +++++++--
 .../webapp/app/components/navigation/SideMenuSection.tsx | 4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 3e804383d4..ba3cce8232 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -57,7 +57,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 w-full items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -87,7 +87,7 @@ export function EnvironmentSelector({
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
-        buttonClassName="!h-8 w-full"
+        buttonClassName="!h-8"
         asChild
         disableHoverableContent
       />
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index faa26dfa53..f8ac5e03f5 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -217,6 +217,7 @@ export function SideMenu({
                 organization={organization}
                 project={project}
                 environment={environment}
+                className="w-full"
                 isCollapsed={isCollapsed}
               />
               {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
@@ -251,7 +252,7 @@ export function SideMenu({
             </div>
           </div>
 
-          <div className="w-full space-y-px">
+          <div className="w-full">
             <SideMenuItem
               name="Tasks"
               icon={TaskIconSmall}
@@ -348,7 +349,11 @@ export function SideMenu({
             )}
           </div>
 
-          <SideMenuSection title="Manage" isSideMenuCollapsed={isCollapsed}>
+          <SideMenuSection
+            title="Manage"
+            isSideMenuCollapsed={isCollapsed}
+            itemSpacingClassName="space-y-0"
+          >
             <SideMenuItem
               name="Bulk actions"
               icon={ListCheckedIcon}
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 9e264ae293..de0f9e4339 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -9,6 +9,7 @@ type Props = {
   children: React.ReactNode;
   /** When true, hides the section header and shows only children */
   isSideMenuCollapsed?: boolean;
+  itemSpacingClassName?: string;
 };
 
 /** A collapsible section for the side menu
@@ -20,6 +21,7 @@ export function SideMenuSection({
   onCollapseToggle,
   children,
   isSideMenuCollapsed = false,
+  itemSpacingClassName = "space-y-px",
 }: Props) {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
 
@@ -86,7 +88,7 @@ export function SideMenuSection({
           style={{ overflow: "hidden" }}
         >
           <motion.div
-            className="w-full space-y-px"
+            className={`w-full ${itemSpacingClassName}`}
             variants={{
               expanded: {
                 translateY: 0,

From 89f86f1c61b97fa9291aff0092082a1c559d5507 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 17:48:18 +0000
Subject: [PATCH 28/39] Save the toggle states in dashboardPreferences

---
 .../app/components/navigation/SideMenu.tsx    | 83 +++++++++++++++++--
 .../routes/resources.preferences.sidemenu.tsx | 39 +++++++++
 .../services/dashboardPreferences.server.ts   | 54 ++++++++++++
 3 files changed, 170 insertions(+), 6 deletions(-)
 create mode 100644 apps/webapp/app/routes/resources.preferences.sidemenu.tsx

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index f8ac5e03f5..a65438d15e 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -22,9 +22,9 @@ import {
   TableCellsIcon,
   UsersIcon
 } from "@heroicons/react/20/solid";
-import { Link, useNavigation } from "@remix-run/react";
+import { Link, useFetcher, useNavigation } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
@@ -44,6 +44,7 @@ import { useHasAdminAccess } from "~/hooks/useUser";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { type User } from "~/models/user.server";
+import { type DashboardPreferences } from "~/services/dashboardPreferences.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
 import { IncidentStatusPanel } from "~/routes/resources.incidents";
@@ -104,7 +105,10 @@ import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
 
-type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
+type SideMenuUser = Pick<User, "email" | "admin"> & {
+  isImpersonating: boolean;
+  dashboardPreferences: DashboardPreferences;
+};
 export type SideMenuProject = Pick<
   MatchedProject,
   "id" | "name" | "slug" | "version" | "environments" | "engine"
@@ -130,7 +134,15 @@ export function SideMenu({
 }: SideMenuProps) {
   const borderRef = useRef<HTMLDivElement>(null);
   const [showHeaderDivider, setShowHeaderDivider] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(
+    user.dashboardPreferences.sideMenu?.isCollapsed ?? false
+  );
+  const preferencesFetcher = useFetcher();
+  const pendingPreferencesRef = useRef<{
+    isCollapsed?: boolean;
+    manageSectionCollapsed?: boolean;
+  }>({});
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const currentPlan = useCurrentPlan();
   const { isConnected } = useDevPresence();
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
@@ -138,9 +150,66 @@ export function SideMenu({
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
 
+  const persistSideMenuPreferences = useCallback(
+    (data: { isCollapsed?: boolean; manageSectionCollapsed?: boolean }) => {
+      if (user.isImpersonating) return;
+
+      // Merge with any pending changes
+      pendingPreferencesRef.current = {
+        ...pendingPreferencesRef.current,
+        ...data,
+      };
+
+      // Clear existing timeout
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+
+      // Debounce the actual submission by 500ms
+      debounceTimeoutRef.current = setTimeout(() => {
+        const pending = pendingPreferencesRef.current;
+        const formData = new FormData();
+        if (pending.isCollapsed !== undefined) {
+          formData.append("isCollapsed", String(pending.isCollapsed));
+        }
+        if (pending.manageSectionCollapsed !== undefined) {
+          formData.append("manageSectionCollapsed", String(pending.manageSectionCollapsed));
+        }
+        preferencesFetcher.submit(formData, {
+          method: "POST",
+          action: "/resources/preferences/sidemenu",
+        });
+        pendingPreferencesRef.current = {};
+      }, 500);
+    },
+    [user.isImpersonating, preferencesFetcher]
+  );
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleToggleCollapsed = () => {
+    const newIsCollapsed = !isCollapsed;
+    setIsCollapsed(newIsCollapsed);
+    persistSideMenuPreferences({ isCollapsed: newIsCollapsed });
+  };
+
+  const handleManageSectionToggle = useCallback(
+    (collapsed: boolean) => {
+      persistSideMenuPreferences({ manageSectionCollapsed: collapsed });
+    },
+    [persistSideMenuPreferences]
+  );
+
   useShortcutKeys({
     shortcut: { modifiers: ["mod"], key: "b", enabledOnInputElements: true },
-    action: () => setIsCollapsed((prev) => !prev),
+    action: handleToggleCollapsed,
   });
 
   useEffect(() => {
@@ -164,7 +233,7 @@ export function SideMenu({
         isCollapsed ? "w-[2.75rem]" : "w-56"
       )}
     >
-      <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
+      <CollapseToggle isCollapsed={isCollapsed} onToggle={handleToggleCollapsed} />
       <div className="absolute inset-0 grid grid-cols-[100%] grid-rows-[2.5rem_1fr_auto] overflow-hidden">
         <div
           className={cn(
@@ -353,6 +422,8 @@ export function SideMenu({
             title="Manage"
             isSideMenuCollapsed={isCollapsed}
             itemSpacingClassName="space-y-0"
+            initialCollapsed={user.dashboardPreferences.sideMenu?.manageSectionCollapsed ?? false}
+            onCollapseToggle={handleManageSectionToggle}
           >
             <SideMenuItem
               name="Bulk actions"
diff --git a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
new file mode 100644
index 0000000000..3511bb84c8
--- /dev/null
+++ b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
@@ -0,0 +1,39 @@
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+import { z } from "zod";
+import { updateSideMenuPreferences } from "~/services/dashboardPreferences.server";
+import { requireUser } from "~/services/session.server";
+
+const RequestSchema = z.object({
+  isCollapsed: z.boolean().optional(),
+  manageSectionCollapsed: z.boolean().optional(),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+  const user = await requireUser(request);
+
+  const formData = await request.formData();
+  const rawData = Object.fromEntries(formData);
+
+  // Parse booleans from form data strings
+  const data = {
+    isCollapsed:
+      rawData.isCollapsed !== undefined ? rawData.isCollapsed === "true" : undefined,
+    manageSectionCollapsed:
+      rawData.manageSectionCollapsed !== undefined
+        ? rawData.manageSectionCollapsed === "true"
+        : undefined,
+  };
+
+  const result = RequestSchema.safeParse(data);
+  if (!result.success) {
+    return json({ success: false, error: "Invalid request data" }, { status: 400 });
+  }
+
+  await updateSideMenuPreferences({
+    user,
+    isCollapsed: result.data.isCollapsed,
+    manageSectionCollapsed: result.data.manageSectionCollapsed,
+  });
+
+  return json({ success: true });
+}
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index 3649704b81..0054cbf207 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -3,6 +3,13 @@ import { prisma } from "~/db.server";
 import { logger } from "./logger.server";
 import { type UserFromSession } from "./session.server";
 
+const SideMenuPreferences = z.object({
+  isCollapsed: z.boolean(),
+  manageSectionCollapsed: z.boolean(),
+});
+
+export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
+
 const DashboardPreferences = z.object({
   version: z.literal("1"),
   currentProjectId: z.string().optional(),
@@ -12,6 +19,7 @@ const DashboardPreferences = z.object({
       currentEnvironment: z.object({ id: z.string() }),
     })
   ),
+  sideMenu: SideMenuPreferences.optional(),
 });
 
 export type DashboardPreferences = z.infer<typeof DashboardPreferences>;
@@ -99,3 +107,49 @@ export async function clearCurrentProject({ user }: { user: UserFromSession }) {
     },
   });
 }
+
+export async function updateSideMenuPreferences({
+  user,
+  isCollapsed,
+  manageSectionCollapsed,
+}: {
+  user: UserFromSession;
+  isCollapsed?: boolean;
+  manageSectionCollapsed?: boolean;
+}) {
+  if (user.isImpersonating) {
+    return;
+  }
+
+  const currentSideMenu = user.dashboardPreferences.sideMenu ?? {
+    isCollapsed: false,
+    manageSectionCollapsed: false,
+  };
+
+  const updatedSideMenu: SideMenuPreferences = {
+    isCollapsed: isCollapsed ?? currentSideMenu.isCollapsed,
+    manageSectionCollapsed: manageSectionCollapsed ?? currentSideMenu.manageSectionCollapsed,
+  };
+
+  // Only update if something changed
+  if (
+    updatedSideMenu.isCollapsed === currentSideMenu.isCollapsed &&
+    updatedSideMenu.manageSectionCollapsed === currentSideMenu.manageSectionCollapsed
+  ) {
+    return;
+  }
+
+  const updatedPreferences: DashboardPreferences = {
+    ...user.dashboardPreferences,
+    sideMenu: updatedSideMenu,
+  };
+
+  return prisma.user.update({
+    where: {
+      id: user.id,
+    },
+    data: {
+      dashboardPreferences: updatedPreferences,
+    },
+  });
+}

From 2303ffe96939944d001fa1cb6a269ca123582b67 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 17:56:14 +0000
Subject: [PATCH 29/39] hide divide line

---
 apps/webapp/app/components/navigation/SideMenuSection.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index de0f9e4339..1f19ffe487 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -55,12 +55,12 @@ export function SideMenuSection({
             <ToggleArrowIcon className="size-2" />
           </motion.div>
         </motion.div>
-        {/* Divider - absolutely positioned, visible when sidebar is collapsed */}
+        {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
         <motion.div
           className="absolute left-2 right-2 top-1 h-px bg-charcoal-600"
           initial={false}
           animate={{
-            opacity: isSideMenuCollapsed ? 1 : 0,
+            opacity: isSideMenuCollapsed && !isCollapsed ? 1 : 0,
           }}
           transition={{ duration: 0.15, ease: "easeOut" }}
         />
@@ -69,7 +69,7 @@ export function SideMenuSection({
         <motion.div
           className="w-full"
           initial={isCollapsed ? "collapsed" : "expanded"}
-          animate={isCollapsed && !isSideMenuCollapsed ? "collapsed" : "expanded"}
+          animate={isCollapsed ? "collapsed" : "expanded"}
           exit="collapsed"
           variants={{
             expanded: {

From 109b1ed971fccb74ec375dc17934207b688af58d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 19:45:24 +0000
Subject: [PATCH 30/39] Fixes type error with the dashboardPreferences
 implementation

---
 apps/webapp/app/components/navigation/SideMenu.tsx | 6 ++----
 apps/webapp/app/hooks/useUser.ts                   | 8 +++++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index a65438d15e..1526bb96c1 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -43,8 +43,7 @@ import { type MatchedProject } from "~/hooks/useProject";
 import { useHasAdminAccess } from "~/hooks/useUser";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { ShortcutKey } from "../primitives/ShortcutKey";
-import { type User } from "~/models/user.server";
-import { type DashboardPreferences } from "~/services/dashboardPreferences.server";
+import { type UserWithDashboardPreferences } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
 import { IncidentStatusPanel } from "~/routes/resources.incidents";
@@ -105,9 +104,8 @@ import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
 
-type SideMenuUser = Pick<User, "email" | "admin"> & {
+type SideMenuUser = Pick<UserWithDashboardPreferences, "email" | "admin" | "dashboardPreferences"> & {
   isImpersonating: boolean;
-  dashboardPreferences: DashboardPreferences;
 };
 export type SideMenuProject = Pick<
   MatchedProject,
diff --git a/apps/webapp/app/hooks/useUser.ts b/apps/webapp/app/hooks/useUser.ts
index e31455cf92..fd9938fdb9 100644
--- a/apps/webapp/app/hooks/useUser.ts
+++ b/apps/webapp/app/hooks/useUser.ts
@@ -1,10 +1,12 @@
-import { UIMatch } from "@remix-run/react";
-import type { User } from "~/models/user.server";
-import { loader } from "~/root";
+import { type UIMatch } from "@remix-run/react";
+import type { UserWithDashboardPreferences } from "~/models/user.server";
+import { type loader } from "~/root";
 import { useChanged } from "./useChanged";
 import { useTypedMatchesData } from "./useTypedMatchData";
 import { useIsImpersonating } from "./useOrganizations";
 
+export type User = UserWithDashboardPreferences;
+
 export function useOptionalUser(matches?: UIMatch[]): User | undefined {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: "root",

From 9b7f500c11ff258dcadb42be58675d6b3137cb55 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 20:05:52 +0000
Subject: [PATCH 31/39] Help button stretches to fit space

---
 .../components/navigation/HelpAndFeedbackPopover.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index b85bb830a5..74077eed72 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -49,14 +49,18 @@ export function HelpAndFeedback({
   });
 
   return (
-    <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
+    <motion.div
+      layout="position"
+      transition={{ duration: 0.2, ease: "easeInOut" }}
+      className={isCollapsed ? undefined : "flex-1"}
+    >
       <Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
       <SimpleTooltip
         button={
           <PopoverTrigger
             className={cn(
               "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750",
-              isCollapsed ? "w-full" : "flex-1 justify-between"
+              isCollapsed ? "w-full" : "w-full justify-between"
             )}
           >
             <span className="flex items-center gap-1.5 overflow-hidden">
@@ -89,7 +93,7 @@ export function HelpAndFeedback({
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
-        buttonClassName={isCollapsed ? "!h-8 w-full" : "!h-8 flex-1"}
+        buttonClassName="!h-8 w-full"
         asChild
         disableHoverableContent
       />

From a738e38164cad007fec4d68a068bea8ddf637b23 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 20:11:07 +0000
Subject: [PATCH 32/39] Adds Ask AI button to account and org side menus

---
 apps/webapp/app/components/navigation/AccountSideMenu.tsx   | 6 ++++--
 .../components/navigation/OrganizationSettingsSideMenu.tsx  | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
index 30bf2c1925..5c74658f51 100644
--- a/apps/webapp/app/components/navigation/AccountSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
@@ -8,10 +8,11 @@ import {
   personalAccessTokensPath,
   rootPath,
 } from "~/utils/pathBuilder";
+import { AskAI } from "../AskAI";
 import { LinkButton } from "../primitives/Buttons";
+import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
-import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 
 export function AccountSideMenu({ user }: { user: User }) {
   return (
@@ -55,8 +56,9 @@ export function AccountSideMenu({ user }: { user: User }) {
           data-action="security"
         />
       </div>
-      <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+      <div className="flex w-full items-center justify-between border-t border-grid-bright p-1">
         <HelpAndFeedback />
+        <AskAI />
       </div>
     </div>
   );
diff --git a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
index 7303142f3d..e42928cdd6 100644
--- a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
@@ -25,6 +25,7 @@ import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Paragraph } from "../primitives/Paragraph";
 import { Badge } from "../primitives/Badge";
 import { useHasAdminAccess } from "~/hooks/useUser";
+import { AskAI } from "../AskAI";
 
 export type BuildInfo = {
   appVersion: string | undefined;
@@ -144,8 +145,9 @@ export function OrganizationSettingsSideMenu({
           </div>
         )}
       </div>
-      <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
+      <div className="flex w-full items-center justify-between border-t border-grid-bright p-1">
         <HelpAndFeedback />
+        <AskAI />
       </div>
     </div>
   );

From 8d98bd7ffe5b21d049a50155d183c1e0ecca1763 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 24 Jan 2026 20:16:08 +0000
Subject: [PATCH 33/39] Adds custom focus

---
 apps/webapp/app/components/navigation/SideMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 1526bb96c1..b6fb965cad 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -986,7 +986,7 @@ function CollapseToggle({
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}
               className={cn(
-                "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200",
+                "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200 focus-custom",
                 isHovering
                   ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
                   : "border border-transparent bg-transparent"

From 1119bd1feb45f0f564641da0eb48fd815b8c3b4f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 25 Jan 2026 09:43:02 +0000
Subject: [PATCH 34/39] Coderabbit markup restructure suggestion

---
 apps/webapp/app/components/AskAI.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index 48520fce46..bc55469b84 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -118,8 +118,8 @@ function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
       <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
         <TooltipProvider disableHoverableContent>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className={isCollapsed ? "w-full" : "inline-flex"}>
+            <div className={isCollapsed ? "w-full" : "inline-flex"}>
+              <TooltipTrigger asChild>
                 <Button
                   variant="small-menu-item"
                   data-action="ask-ai"
@@ -131,8 +131,8 @@ function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
                 >
                   <AISparkleIcon className="size-5" />
                 </Button>
-              </div>
-            </TooltipTrigger>
+              </TooltipTrigger>
+            </div>
             <TooltipContent
               side={isCollapsed ? "right" : "top"}
               sideOffset={isCollapsed ? 8 : 4}

From 53528c64cb3d079d5baf5b363c4dacad36a6bd3f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 25 Jan 2026 09:55:03 +0000
Subject: [PATCH 35/39] Coderabbit improvement for the deboucing

---
 .../app/components/navigation/SideMenu.tsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index b6fb965cad..e441214487 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -183,14 +183,30 @@ export function SideMenu({
     [user.isImpersonating, preferencesFetcher]
   );
 
-  // Cleanup timeout on unmount
+  // Flush pending preferences on unmount to avoid losing the last toggle
   useEffect(() => {
     return () => {
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
       }
+      if (user.isImpersonating) return;
+      const pending = pendingPreferencesRef.current;
+      if (pending.isCollapsed !== undefined || pending.manageSectionCollapsed !== undefined) {
+        const formData = new FormData();
+        if (pending.isCollapsed !== undefined) {
+          formData.append("isCollapsed", String(pending.isCollapsed));
+        }
+        if (pending.manageSectionCollapsed !== undefined) {
+          formData.append("manageSectionCollapsed", String(pending.manageSectionCollapsed));
+        }
+        preferencesFetcher.submit(formData, {
+          method: "POST",
+          action: "/resources/preferences/sidemenu",
+        });
+        pendingPreferencesRef.current = {};
+      }
     };
-  }, []);
+  }, [preferencesFetcher, user.isImpersonating]);
 
   const handleToggleCollapsed = () => {
     const newIsCollapsed = !isCollapsed;

From 6dc6baae6daa19589759adff3ce4c2f5d020cfa9 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 25 Jan 2026 10:03:32 +0000
Subject: [PATCH 36/39] Small coderabbit fixes

---
 apps/webapp/app/components/navigation/SideMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index e441214487..1e7d48cd57 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -611,7 +611,7 @@ function ProjectSelector({
             </span>
           </PopoverTrigger>
         }
-        content={`${organization.title} / ${project.name}`}
+        content={`${organization.title} / ${project.name ?? "Select a project"}`}
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
@@ -998,6 +998,8 @@ function CollapseToggle({
         <Tooltip>
           <TooltipTrigger asChild>
             <button
+              type="button"
+              aria-label={isCollapsed ? "Expand side menu" : "Collapse side menu"}
               onClick={onToggle}
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}

From 5b7c900314229e51c7f901ba33ea0aae0997c4aa Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 26 Jan 2026 08:06:18 +0000
Subject: [PATCH 37/39] Set defaults in the schema

---
 .../routes/resources.preferences.sidemenu.tsx | 22 ++++++++-----------
 .../services/dashboardPreferences.server.ts   | 11 +++++-----
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
index 3511bb84c8..9c3edc66be 100644
--- a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
+++ b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
@@ -3,9 +3,15 @@ import { z } from "zod";
 import { updateSideMenuPreferences } from "~/services/dashboardPreferences.server";
 import { requireUser } from "~/services/session.server";
 
+// Transforms form data string "true"/"false" to boolean, or undefined if not present
+const booleanFromFormData = z
+  .enum(["true", "false"])
+  .transform((val) => val === "true")
+  .optional();
+
 const RequestSchema = z.object({
-  isCollapsed: z.boolean().optional(),
-  manageSectionCollapsed: z.boolean().optional(),
+  isCollapsed: booleanFromFormData,
+  manageSectionCollapsed: booleanFromFormData,
 });
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -14,17 +20,7 @@ export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData();
   const rawData = Object.fromEntries(formData);
 
-  // Parse booleans from form data strings
-  const data = {
-    isCollapsed:
-      rawData.isCollapsed !== undefined ? rawData.isCollapsed === "true" : undefined,
-    manageSectionCollapsed:
-      rawData.manageSectionCollapsed !== undefined
-        ? rawData.manageSectionCollapsed === "true"
-        : undefined,
-  };
-
-  const result = RequestSchema.safeParse(data);
+  const result = RequestSchema.safeParse(rawData);
   if (!result.success) {
     return json({ success: false, error: "Invalid request data" }, { status: 400 });
   }
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index 0054cbf207..d0110cabc3 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -4,10 +4,12 @@ import { logger } from "./logger.server";
 import { type UserFromSession } from "./session.server";
 
 const SideMenuPreferences = z.object({
-  isCollapsed: z.boolean(),
-  manageSectionCollapsed: z.boolean(),
+  isCollapsed: z.boolean().default(false),
+  manageSectionCollapsed: z.boolean().default(false),
 });
 
+export const SideMenuPreferencesDefaults = SideMenuPreferences.parse({});
+
 export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
 
 const DashboardPreferences = z.object({
@@ -121,10 +123,7 @@ export async function updateSideMenuPreferences({
     return;
   }
 
-  const currentSideMenu = user.dashboardPreferences.sideMenu ?? {
-    isCollapsed: false,
-    manageSectionCollapsed: false,
-  };
+  const currentSideMenu = user.dashboardPreferences.sideMenu ?? SideMenuPreferencesDefaults;
 
   const updatedSideMenu: SideMenuPreferences = {
     isCollapsed: isCollapsed ?? currentSideMenu.isCollapsed,

From 9b477dcda0925a31145b0efeccfe0f5ed34b4d80 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 26 Jan 2026 08:11:47 +0000
Subject: [PATCH 38/39] Fixes a devin suggestion for calling a react hook too
 early

---
 apps/webapp/app/routes/resources.incidents.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index 600ca38884..fbdb00a1c5 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -25,10 +25,6 @@ export async function loader() {
 
 export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
-  if (!isManagedCloud) {
-    return null;
-  }
-
   const fetcher = useFetcher<typeof loader>();
 
   const fetchIncidents = useCallback(() => {
@@ -38,16 +34,18 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
   }, [fetcher]);
 
   useEffect(() => {
+    if (!isManagedCloud) return;
+
     fetchIncidents();
 
     const interval = setInterval(fetchIncidents, 60 * 1000); // 1 minute
 
     return () => clearInterval(interval);
-  }, []);
+  }, [isManagedCloud, fetchIncidents]);
 
   const operational = fetcher.data?.operational ?? true;
 
-  if (operational) {
+  if (!isManagedCloud || operational) {
     return null;
   }
 

From 19a9eddcd9829eae77805a9300d1b2323efb3d58 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 27 Jan 2026 13:56:46 +0000
Subject: [PATCH 39/39] Use the SideMenuPreferences.parse() directly

---
 .../app/services/dashboardPreferences.server.ts   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index d0110cabc3..323b96fa88 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -8,8 +8,6 @@ const SideMenuPreferences = z.object({
   manageSectionCollapsed: z.boolean().default(false),
 });
 
-export const SideMenuPreferencesDefaults = SideMenuPreferences.parse({});
-
 export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
 
 const DashboardPreferences = z.object({
@@ -123,12 +121,13 @@ export async function updateSideMenuPreferences({
     return;
   }
 
-  const currentSideMenu = user.dashboardPreferences.sideMenu ?? SideMenuPreferencesDefaults;
-
-  const updatedSideMenu: SideMenuPreferences = {
-    isCollapsed: isCollapsed ?? currentSideMenu.isCollapsed,
-    manageSectionCollapsed: manageSectionCollapsed ?? currentSideMenu.manageSectionCollapsed,
-  };
+  // Parse with schema to apply defaults, then overlay any new values
+  const currentSideMenu = SideMenuPreferences.parse(user.dashboardPreferences.sideMenu ?? {});
+  const updatedSideMenu = SideMenuPreferences.parse({
+    ...currentSideMenu,
+    ...(isCollapsed !== undefined && { isCollapsed }),
+    ...(manageSectionCollapsed !== undefined && { manageSectionCollapsed }),
+  });
 
   // Only update if something changed
   if (