show settings, handle new elements (#272)

Author: nuwandavek

web/src/components/common/App.tsx

@@ -310,7 +310,7 @@ const AppLoggedIn = forwardRef((_props, ref) => {
         </HStack>
         <HStack justifyContent={'space-between'} mt={1}>
             <MXMode />
-            <HStack gap={1} justifyContent={'center'} alignItems={'center'}>
+            <HStack gap={1} justifyContent={'center'} alignItems={'center'}  aria-label='mx-agent-selector'>
               {/* <Text fontSize="xs" color={"minusxGreen.600"}><Link width={"100%"} textAlign={"center"} display={"flex"} justifyContent={"center"} alignItems={"center"} href="https://docs.minusx.ai/en/articles/11814763-agents-overview" isExternal><Icon as={BsFillInfoSquareFill} boxSize={3} /></Link></Text> */}
                 <Menu>
                 <MenuButton
@@ -355,7 +355,7 @@ const AppLoggedIn = forwardRef((_props, ref) => {
         {/* {configs.IS_DEV ? <DevToolsToggle size={"micro"}/> : null} */}
         { !isSheets && <Box aria-label="settings-toggle"><DevToolsToggle size={"micro"}/></Box> }
         { !isSheets && !isEmbedded && <Text fontSize="xs" color="minusxGreen.800" fontWeight={"bold"}>{platformShortcut} to toggle</Text>}
-        {isEmbedded && <Text fontSize="xs" color="minusxGreen.800" fontWeight={"bold"}>{"Powered by MinusX"}</Text>}
+        {/* {isEmbedded && <Text fontSize="xs" color="minusxGreen.800" fontWeight={"bold"}>{"Powered by MinusX"}</Text>} */}
         {/* { tool==='metabase' && <Text fontSize="xs" color="minusxGreen.800" fontWeight={"bold"}>[-{metabaseMode} Mode-]</Text>} */}
         {/* <SupportButton email={email} /> */}
       </HStack>

web/src/components/devtools/index.tsx

@@ -13,6 +13,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../state/store';
 import { UserDebugTools } from './UserDebugTools';
 import { History } from './History';
+import { getParsedIframeInfo } from '../../helpers/origin'
 
 const Monitors: MonitorDef[] = [
   {
@@ -62,10 +63,18 @@ const Monitors: MonitorDef[] = [
 export const DevToolsBox: React.FC = () => {
   const enableStyleCustomization = useSelector((state: RootState) => state.settings.enableStyleCustomization)
   const enableUserDebugTools = useSelector((state: RootState) => state.settings.enableUserDebugTools)
+  const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true'
 
   const monitors = Monitors.filter(Monitor => {
     // Check existing dev/production logic
     const isAllowedByEnv = configs.IS_DEV || Monitor.tags?.includes('production')
+
+    if (isEmbedded) {
+        if (Monitor.title === 'History' || Monitor.title === 'Memory') {
+            return true
+        }
+        return false    
+    }
 
     // Special filtering for CSS Customization tab
     if (Monitor.title === 'CSS Customization') {