Hide Agent Builder features when disabled

Conditionally hide Agent Builder UI components and redirect from protected
routes when agentBuilder access is disabled for a workspace.

Features hidden when agentBuilder is false:
- Home link in project sidebar navigation
- Integrations section in settings page
- Latte AI copilot sidebar
- Triggers section in document editor sidebar
- SubAgents section in document editor sidebar

Tools section behavior when agentBuilder is false:
- Shows configured integrations (read-only)
- Hides add button
- Hides remove option from dropdown menu

Routes that redirect to /dashboard when agentBuilder is false:
- /projects/[projectId]/versions/[commitUuid]/home
- /settings/integrations/new
- /settings/integrations/[integrationId]/destroy

Implementation uses the productAccess flags from the workspace model,
accessed via useProductAccess() hook for client components and
computeProductAccess()/getProductAccess() for server components.

Also extracts Latte fetching logic into a separate LatteWrapper component
for cleaner layout code.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: andresgutgon

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/_components/LatteWrapper.tsx

@@ -0,0 +1,38 @@
+'use server'
+
+import { ReactNode } from 'react'
+import { getLastLatteThreadUuidCached } from '$/app/(private)/_data-access'
+import { LatteRealtimeUpdatesProvider } from '../providers/LatteRealtimeUpdatesProvider'
+import { LatteLayout } from '$/components/LatteSidebar/LatteLayout'
+import { fetchConversationWithMessages } from '@latitude-data/core/data-access/conversations/fetchConversationWithMessages'
+import type { Workspace } from '@latitude-data/core/schema/models/types/Workspace'
+
+type Props = {
+  children: ReactNode
+  projectId: number
+  workspace: Workspace
+}
+
+export async function LatteWrapper({ children, projectId, workspace }: Props) {
+  const lastThreadUuid = await getLastLatteThreadUuidCached({ projectId })
+
+  const conversationResult = lastThreadUuid
+    ? await fetchConversationWithMessages({
+        workspace,
+        documentLogUuid: lastThreadUuid,
+      })
+    : undefined
+
+  const initialMessages = conversationResult?.value?.messages
+
+  return (
+    <LatteRealtimeUpdatesProvider>
+      <LatteLayout
+        initialThreadUuid={lastThreadUuid}
+        initialMessages={initialMessages}
+      >
+        {children}
+      </LatteLayout>
+    </LatteRealtimeUpdatesProvider>
+  )
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/_components/Sidebar/ProjectSection/index.tsx

@@ -3,6 +3,7 @@
 import { useMemo } from 'react'
 import { formatCount } from '@latitude-data/constants/formatCount'
 import { ROUTES } from '$/services/routes'
+import { useProductAccess } from '$/components/Providers/SessionProvider'
 
 import { RunSourceGroup } from '@latitude-data/constants'
 import { Commit } from '@latitude-data/core/schema/models/types/Commit'
@@ -85,6 +86,7 @@ export default function ProjectSection({
   project: Project
   commit: Commit
 }) {
+  const { agentBuilder } = useProductAccess()
   const { value: lastRunTab } = useLocalStorage<RunSourceGroup>({
     key: AppLocalStorage.lastRunTab,
     defaultValue: RunSourceGroup.Playground,
@@ -93,7 +95,7 @@ export default function ProjectSection({
   const PROJECT_ROUTES = useMemo(
     () =>
       [
-        {
+        agentBuilder && {
           label: 'Home',
           route: ROUTES.projects
             .detail({ id: project.id })
@@ -123,7 +125,7 @@ export default function ProjectSection({
           iconName: 'history',
         },
       ].filter(Boolean) as ProjectRoute[],
-    [project, commit, lastRunTab],
+    [project, commit, lastRunTab, agentBuilder],
   )
 
   return (

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/Tools/ActiveIntegration/index.tsx

@@ -46,7 +46,7 @@ export function ActiveIntegration({
   onRemove,
 }: {
   integration: IActiveIntegration
-  onRemove: (integrationName: string) => void
+  onRemove?: (integrationName: string) => void
 }) {
   const { addIntegrationTool, removeIntegrationTool } = use(ToolsContext)
   const toggleIntegration = useSidebarStore((state) => state.toggleIntegration)
@@ -220,7 +220,7 @@ export function ActiveIntegration({
 
           <CustomMcpHeadersButton integration={integration} />
 
-          {!isClientTools && (
+          {!isClientTools && onRemove && (
             <DropdownMenu
               options={[
                 {

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/Tools/index.tsx

@@ -7,40 +7,72 @@ import { usePromptConfigInSidebar } from '../hooks/usePromptConfigInSidebar'
 import { ActiveIntegration } from './ActiveIntegration'
 import { ToolsProvider } from './ToolsProvider'
 import { useSidebarStore } from '../hooks/useSidebarStore'
+import { CLIENT_TOOLS_INTEGRATION_NAME } from '../toolsHelpers/collectTools'
+import { Text } from '@latitude-data/web-ui/atoms/Text'
+import Link from 'next/link'
 
-export function ToolsSidebarSection() {
+const TOOLS_DOCS_URL = 'https://docs.latitude.so/guides/prompt-manager/tools'
+
+export function ToolsSidebarSection({
+  agentBuilder,
+}: {
+  agentBuilder: boolean
+}) {
   const { commit } = useCurrentCommit()
   const isLive = !!commit.mergedAt
   const { open, onOpen, onClose } = useToggleModal()
   const actions = useMemo(
-    () => [{ onClick: onOpen, disabled: isLive }],
-    [onOpen, isLive],
+    () => (agentBuilder ? [{ onClick: onOpen, disabled: isLive }] : []),
+    [onOpen, isLive, agentBuilder],
   )
   const {
     addNewIntegration,
     addIntegrationTool,
     removeIntegrationTool,
     removeIntegration,
   } = usePromptConfigInSidebar()
-  const { integrations } = useSidebarStore((state) => ({
+  const { integrations: allIntegrations } = useSidebarStore((state) => ({
     integrations: state.integrations,
   }))
 
+  const integrations = useMemo(() => {
+    if (agentBuilder) return allIntegrations
+    return allIntegrations.filter(
+      (integration) => integration.name === CLIENT_TOOLS_INTEGRATION_NAME,
+    )
+  }, [allIntegrations, agentBuilder])
+
+  const showEmptyNote = !agentBuilder && integrations.length === 0
+
   return (
     <ToolsProvider
       addIntegrationTool={addIntegrationTool}
       removeIntegrationTool={removeIntegrationTool}
     >
       <SidebarSection title='Tools' actions={actions}>
-        {integrations.map((integration) => (
-          <ActiveIntegration
-            key={integration.name}
-            integration={integration}
-            onRemove={removeIntegration}
-          />
-        ))}
+        {showEmptyNote ? (
+          <Text.H6 color='foregroundMuted'>
+            Tools configured in the prompt will appear here.{' '}
+            <Link
+              href={TOOLS_DOCS_URL}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='underline'
+            >
+              Learn more
+            </Link>
+          </Text.H6>
+        ) : (
+          integrations.map((integration) => (
+            <ActiveIntegration
+              key={integration.name}
+              integration={integration}
+              onRemove={agentBuilder ? removeIntegration : undefined}
+            />
+          ))
+        )}
       </SidebarSection>
-      {open ? (
+      {agentBuilder && open ? (
         <ConnectToolsModal
           onCloseModal={onClose}
           addNewIntegration={addNewIntegration}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/SidebarArea/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'next/navigation'
 import { FreeRunsBanner } from '$/components/FreeRunsBanner'
 import { useIsLatitudeProvider } from '$/hooks/useIsLatitudeProvider'
 import { useMetadata } from '$/hooks/useMetadata'
+import { useProductAccess } from '$/components/Providers/SessionProvider'
 import { ResolvedMetadata } from '$/workers/readMetadata'
 import { SectionLoader } from './Section'
 import { SidebarHeader } from './SidebarHeader'
@@ -11,6 +12,7 @@ import { ToolsSidebarSection } from './Tools'
 import { SubAgentsSidebarSection } from './SubAgents'
 import { usePromptConfigData } from './hooks/usePromptConfigData'
 import { useSidebarStore } from './hooks/useSidebarStore'
+import { cn } from '@latitude-data/web-ui/utils'
 
 function SidebarLoader() {
   return (
@@ -48,34 +50,40 @@ export function DocumentEditorSidebarArea({
   const reset = useSidebarStore((state) => state.reset)
   const { metadata } = useMetadata()
   const isLatitudeProvider = useIsLatitudeProvider({ metadata })
+  const { agentBuilder } = useProductAccess()
   const data = useSidebarData({ metadata })
 
-  // Reset store when document changes or component unmounts
   useEffect(() => {
     return () => {
       reset()
     }
   }, [documentUuid, reset])
 
   return (
-    <div className='w-full relative flex flex-col gap-y-6 min-h-0 '>
+    <div className='w-full relative flex flex-col gap-y-6'>
       <SidebarHeader metadata={metadata} />
       <FreeRunsBanner
         isLatitudeProvider={isLatitudeProvider}
         freeRunsCount={freeRunsCount}
       />
-      <div className='flex flex-col gap-y-6 min-w-0 custom-scrollbar scrollable-indicator'>
+      <div
+        className={cn('flex flex-col gap-y-6 min-w-0', {
+          'custom-scrollbar scrollable-indicator': agentBuilder,
+        })}
+      >
         {data.isLoading ? (
           <SidebarLoader />
         ) : (
           <>
-            <TriggersSidebarSection
-              triggers={data.triggersData.triggers}
-              integrations={data.triggersData.integrations}
-              document={data.triggersData.document}
-            />
-            <ToolsSidebarSection />
-            <SubAgentsSidebarSection />
+            {agentBuilder && (
+              <TriggersSidebarSection
+                triggers={data.triggersData.triggers}
+                integrations={data.triggersData.integrations}
+                document={data.triggersData.document}
+              />
+            )}
+            <ToolsSidebarSection agentBuilder={agentBuilder} />
+            {agentBuilder && <SubAgentsSidebarSection />}
           </>
         )}
       </div>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/home/page.tsx

@@ -4,13 +4,21 @@ import {
   findCommitCached,
   getDocumentsAtCommitCached,
 } from '$/app/(private)/_data-access'
+import { getProductAccess } from '$/services/productAccess/getProductAccess'
+import { ROUTES } from '$/services/routes'
+import { redirect } from 'next/navigation'
 import { AgentPageWrapper } from './_components/AgentPageWrapper'
 
 export default async function AgentPage({
   params,
 }: {
   params: Promise<{ projectId: string; commitUuid: string }>
 }) {
+  const productAccess = await getProductAccess()
+  if (!productAccess.agentBuilder) {
+    redirect(ROUTES.dashboard.root)
+  }
+
   const { projectId, commitUuid } = await params
   const commit = await findCommitCached({
     uuid: commitUuid,

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/layout.tsx

@@ -6,7 +6,6 @@ import {
   findCommitsByProjectCached,
   findProjectCached,
   getHeadCommitCached,
-  getLastLatteThreadUuidCached,
 } from '$/app/(private)/_data-access'
 import { ProjectPageParams } from '$/app/(private)/projects/[projectId]/page'
 import {
@@ -15,15 +14,14 @@ import {
 } from '$/services/auth/getCurrentUser'
 import { ROUTES } from '$/services/routes'
 import { notFound, redirect } from 'next/navigation'
-import { LatteRealtimeUpdatesProvider } from './providers/LatteRealtimeUpdatesProvider'
 import { HEAD_COMMIT } from '@latitude-data/core/constants'
 
-import { LatteLayout } from '$/components/LatteSidebar/LatteLayout'
-import { fetchConversationWithMessages } from '@latitude-data/core/data-access/conversations/fetchConversationWithMessages'
 import { Commit } from '@latitude-data/core/schema/models/types/Commit'
 import { Project } from '@latitude-data/core/schema/models/types/Project'
 import { ProjectProvider } from '$/app/providers/ProjectProvider'
 import { CommitProvider } from '$/app/providers/CommitProvider'
+import { computeProductAccess } from '@latitude-data/core/services/productAccess/computeProductAccess'
+import { LatteWrapper } from './_components/LatteWrapper'
 
 export type CommitPageParams = {
   children: ReactNode
@@ -73,28 +71,21 @@ export default async function CommitLayout({
     throw error
   }
 
-  const lastThreadUuid = await getLastLatteThreadUuidCached({
-    projectId: project.id,
-  })
-  const conversationResult = lastThreadUuid
-    ? await fetchConversationWithMessages({
-        workspace: session.workspace,
-        documentLogUuid: lastThreadUuid,
-      })
-    : undefined
-  const initialMessages = conversationResult?.value?.messages
+  const productAccess = computeProductAccess(session.workspace)
 
   return (
     <ProjectProvider project={project}>
       <CommitProvider project={project} commit={commit} isHead={isHead}>
-        <LatteRealtimeUpdatesProvider>
-          <LatteLayout
-            initialThreadUuid={lastThreadUuid}
-            initialMessages={initialMessages}
+        {productAccess.agentBuilder ? (
+          <LatteWrapper
+            projectId={project.id}
+            workspace={session.workspace}
           >
             {children}
-          </LatteLayout>
-        </LatteRealtimeUpdatesProvider>
+          </LatteWrapper>
+        ) : (
+          children
+        )}
       </CommitProvider>
     </ProjectProvider>
   )

apps/web/src/app/(private)/settings/integrations/[integrationId]/destroy/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { use, useMemo } from 'react'
+import { use, useEffect, useMemo } from 'react'
 
 import DestroyModal from '$/components/modals/DestroyModal'
 import { useNavigate } from '$/hooks/useNavigate'
@@ -16,6 +16,7 @@ import { Icon } from '@latitude-data/web-ui/atoms/Icons'
 import { Skeleton } from '@latitude-data/web-ui/atoms/Skeleton'
 import useProjects from '$/stores/projects'
 import { useCommitsFromProject } from '$/stores/commitsStore'
+import { useProductAccess } from '$/components/Providers/SessionProvider'
 
 type IntegrationReferenceGroup = {
   projectId: number
@@ -97,9 +98,16 @@ export default function DestroyIntegration({
 }) {
   const { integrationId } = use(params)
   const navigate = useNavigate()
+  const { agentBuilder } = useProductAccess()
   const { data, destroy, isDestroying } = useIntegrations()
   const integration = data.find((p) => p.id === Number(integrationId))
 
+  useEffect(() => {
+    if (!agentBuilder) {
+      navigate.push(ROUTES.dashboard.root)
+    }
+  }, [agentBuilder, navigate])
+
   const { data: references, isLoading } = useIntegrationReferences(integration)
 
   const groupedReferences = useMemo<IntegrationReferenceGroup[]>(() => {

apps/web/src/app/(private)/settings/integrations/new/page.tsx

@@ -1,5 +1,13 @@
+import { getProductAccess } from '$/services/productAccess/getProductAccess'
+import { ROUTES } from '$/services/routes'
+import { redirect } from 'next/navigation'
 import NewIntegrationSetting from '../../_components/Integrations/New'
 
-export default function NewIntegration() {
+export default async function NewIntegration() {
+  const productAccess = await getProductAccess()
+  if (!productAccess.agentBuilder) {
+    redirect(ROUTES.dashboard.root)
+  }
+
   return <NewIntegrationSetting />
 }