From 043d367cfe0891bce92247394659032e3674c15a Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 13 Jul 2026 15:24:31 -0700
Subject: [PATCH] fix(site): show AI settings and AI Sessions in mobile admin
 menu (#27191)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

The desktop `DeploymentDropdown` surfaces **AI** and **AI sessions**
items under Admin settings (behind `canViewAISettings` /
`canViewAIBridge`), but the mobile `MobileMenu` was never updated to
match — its `AdminSettingsSub` only knows about Deployment,
Organizations, Audit logs, Connection logs, and Healthcheck.

This is a leftover from #25582 ("promote AI settings to a top-level
section"), which threaded `canViewAISettings` through `Navbar` /
`NavbarView` / `DeploymentDropdown` but did not touch `MobileMenu.tsx`.
`canViewAIBridge` has the same oversight.

## Fix

- Extend `MobileMenuPermissions` with `canViewAIBridge` and
`canViewAISettings`.
- Render **AI** (→ `/ai/settings`) and **AI Sessions** (→
`/ai-gateway/sessions`) in the mobile Admin settings collapsible, in the
same order as the desktop dropdown.
- Thread the two flags through `NavbarView` into `MobileMenu`.
- Cover the new args in `MobileMenu.stories.tsx` (Admin story now shows
the AI items; Auditor / OrgAdmin / Member keep them hidden).

No backend, permission, or routing changes.

> 🤖 This PR was drafted by Coder Agents on behalf of @tracyjohnsonux and
needs a human review.
---
 .../dashboard/Navbar/DeploymentDropdown.tsx   |  6 +++---
 .../dashboard/Navbar/MobileMenu.stories.tsx   | 12 +++++++++++
 .../modules/dashboard/Navbar/MobileMenu.tsx   | 20 +++++++++++++++++++
 .../modules/dashboard/Navbar/NavbarView.tsx   |  2 ++
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
index c3f1285256..2ca1dad5b2 100644
--- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
+++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -90,17 +90,17 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 			)}
 			{canViewAuditLog && (
 				<DropdownMenuItem asChild>
-					<Link to={linkToAuditing}>Audit Logs</Link>
+					<Link to={linkToAuditing}>Audit logs</Link>
 				</DropdownMenuItem>
 			)}
 			{canViewConnectionLog && (
 				<DropdownMenuItem asChild>
-					<Link to="/connectionlog">Connection Logs</Link>
+					<Link to="/connectionlog">Connection logs</Link>
 				</DropdownMenuItem>
 			)}
 			{canViewAIBridge && (
 				<DropdownMenuItem asChild>
-					<Link to="/ai-gateway/sessions">AI Sessions</Link>
+					<Link to="/ai-gateway/sessions">AI sessions</Link>
 				</DropdownMenuItem>
 			)}
 			{canViewHealth && (
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
index 2a40a5127e..e6b3af2ec5 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
@@ -41,9 +41,12 @@ const meta: Meta<typeof MobileMenu> = {
 		onSignOut: fn(),
 		isDefaultOpen: true,
 		canViewAuditLog: true,
+		canViewConnectionLog: true,
 		canViewDeployment: true,
 		canViewHealth: true,
 		canViewOrganizations: true,
+		canViewAIBridge: true,
+		canViewAISettings: true,
 	},
 	decorators: [withNavbarMock],
 };
@@ -65,9 +68,12 @@ export const Auditor: Story = {
 	args: {
 		user: MockUserMember,
 		canViewAuditLog: true,
+		canViewConnectionLog: false,
 		canViewDeployment: false,
 		canViewHealth: false,
 		canViewOrganizations: false,
+		canViewAIBridge: false,
+		canViewAISettings: false,
 	},
 	play: openAdminSettings,
 };
@@ -76,9 +82,12 @@ export const OrgAdmin: Story = {
 	args: {
 		user: MockUserMember,
 		canViewAuditLog: true,
+		canViewConnectionLog: false,
 		canViewDeployment: false,
 		canViewHealth: false,
 		canViewOrganizations: true,
+		canViewAIBridge: false,
+		canViewAISettings: false,
 	},
 	play: openAdminSettings,
 };
@@ -87,9 +96,12 @@ export const Member: Story = {
 	args: {
 		user: MockUserMember,
 		canViewAuditLog: false,
+		canViewConnectionLog: false,
 		canViewDeployment: false,
 		canViewHealth: false,
 		canViewOrganizations: false,
+		canViewAIBridge: false,
+		canViewAISettings: false,
 	},
 };
 
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index 9a85069b1d..eb3628433a 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -39,6 +39,8 @@ type MobileMenuPermissions = {
 	canViewOrganizations: boolean;
 	canViewAuditLog: boolean;
 	canViewConnectionLog: boolean;
+	canViewAIBridge: boolean;
+	canViewAISettings: boolean;
 	canViewHealth: boolean;
 };
 
@@ -210,6 +212,8 @@ const AdminSettingsSub: FC<MobileMenuPermissions> = ({
 	canViewDeployment,
 	canViewAuditLog,
 	canViewConnectionLog,
+	canViewAIBridge,
+	canViewAISettings,
 	canViewHealth,
 }) => {
 	const [open, setOpen] = useState(false);
@@ -245,6 +249,14 @@ const AdminSettingsSub: FC<MobileMenuPermissions> = ({
 				>
 					<Link to="/organizations">Organizations</Link>
 				</DropdownMenuItem>
+				{canViewAISettings && (
+					<DropdownMenuItem
+						asChild
+						className={cn(itemStyles.default, itemStyles.sub)}
+					>
+						<Link to="/ai/settings">AI</Link>
+					</DropdownMenuItem>
+				)}
 				{canViewAuditLog && (
 					<DropdownMenuItem
 						asChild
@@ -261,6 +273,14 @@ const AdminSettingsSub: FC<MobileMenuPermissions> = ({
 						<Link to="/connectionlog">Connection logs</Link>
 					</DropdownMenuItem>
 				)}
+				{canViewAIBridge && (
+					<DropdownMenuItem
+						asChild
+						className={cn(itemStyles.default, itemStyles.sub)}
+					>
+						<Link to="/ai-gateway/sessions">AI sessions</Link>
+					</DropdownMenuItem>
+				)}
 				{canViewHealth && (
 					<DropdownMenuItem
 						asChild
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index 208f789f54..967815c25c 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -166,6 +166,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
 						canViewConnectionLog={canViewConnectionLog}
 						canViewOrganizations={canViewOrganizations}
 						canViewDeployment={canViewDeployment}
+						canViewAIBridge={canViewAIBridge}
+						canViewAISettings={canViewAISettings}
 						canViewHealth={canViewHealth}
 					/>
 				</div>